:root{--bg: #10141c;--panel: #1a2030;--panel-2: #222a3d;--border: #2e3850;--text: #e9ecf4;--text-dim: #9aa5bd;--accent: #e8a13d;--accent-dark: #b97c22;--yes: #4ec98a;--no: #ef6a6a;--na: #8a93a5;--shadow: 0 8px 30px rgba(0, 0, 0, .35)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Hiragino Kaku Gothic ProN,Yu Gothic UI,Meiryo,system-ui,sans-serif;line-height:1.7}button{font-family:inherit;cursor:pointer}.app{max-width:920px;margin:0 auto;padding:24px 20px 48px;min-height:100vh;display:flex;flex-direction:column}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px 28px;box-shadow:var(--shadow)}.panel.warn{border-color:var(--no)}.panel h2{margin-top:0}.hero{text-align:center;padding:32px 0 8px}.hero h1{font-size:2.4rem;margin:0 0 8px;letter-spacing:.06em}.hero-emoji{filter:drop-shadow(0 2px 8px rgba(232,161,61,.4))}.hero-sub{color:var(--text-dim);margin:0}.setup-status{text-align:center;color:var(--text-dim)}.setup-heading{margin:32px 0 4px}.setup-note{color:var(--text-dim);font-size:.9rem;margin-top:4px}.model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}.model-card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;color:var(--text);transition:border-color .15s,transform .15s}.model-card:hover{border-color:var(--accent);transform:translateY(-2px)}.model-card.recommended{border-color:var(--accent-dark)}.model-card .badge{position:absolute;top:-10px;right:14px;background:var(--accent);color:#201503;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:99px}.model-tier{color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.1em}.model-name{font-size:1.25rem;font-weight:700}.model-spec{font-size:.85rem;color:var(--text-dim)}.model-desc{font-size:.9rem;color:var(--text-dim)}.progress-track{height:10px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin:12px 0 8px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-dark),var(--accent));border-radius:99px;transition:width .3s}.progress-text{font-size:.85rem;color:var(--text-dim);word-break:break-all}.game{display:flex;flex-direction:column;gap:16px;flex:1}.status-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 16px}.status-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.status-level{font-weight:700;color:var(--accent)}.status-remaining{font-size:.9rem;color:var(--text-dim);display:flex;align-items:center;gap:8px}.status-remaining strong{color:var(--text);font-size:1.05rem}.pips{display:inline-flex;gap:3px}.pip{width:7px;height:7px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border)}.pip.on{background:var(--accent);border-color:var(--accent)}.status-right{display:flex;align-items:center;gap:8px}.status-model{font-size:.85rem;color:var(--text-dim)}.ghost-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:8px;padding:5px 12px;font-size:.85rem;transition:border-color .15s,color .15s}.ghost-btn:hover{border-color:var(--accent);color:var(--text)}.pick-source .notice{background:#ef6a6a1f;border:1px solid var(--no);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-size:.9rem}.source-buttons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.source-btn{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:20px;color:var(--text);transition:border-color .15s,transform .15s}.source-btn:hover{border-color:var(--accent);transform:translateY(-2px)}.source-icon{font-size:1.8rem}.source-name{font-size:1.1rem;font-weight:700}.source-desc{font-size:.85rem;color:var(--text-dim)}.generating{text-align:center;padding:48px 28px}.spinner{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;border:4px solid var(--panel-2);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.play-area{display:flex;flex-direction:column;gap:16px;flex:1}.puzzle-card{background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--accent-dark);border-radius:14px;padding:20px 24px;box-shadow:var(--shadow)}.puzzle-title{margin:0 0 10px;font-size:1.15rem;color:var(--accent);display:flex;align-items:center;gap:10px}.puzzle-source{font-size:.7rem;font-weight:700;padding:2px 10px;border-radius:99px;border:1px solid var(--border);color:var(--text-dim)}.puzzle-source.generated{border-color:var(--accent);color:var(--accent)}.puzzle-problem{margin:0;font-size:1.05rem;white-space:pre-wrap}.chat-log{flex:1;min-height:180px;max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:8px 4px}.chat-system{text-align:center;color:var(--text-dim);font-size:.85rem;margin:2px 0}.chat-row{display:flex}.chat-row.player{justify-content:flex-end}.chat-row.ai{justify-content:flex-start}.chat-bubble{max-width:72%;padding:10px 16px;border-radius:16px;white-space:pre-wrap}.chat-bubble.player{background:var(--panel-2);border:1px solid var(--border);border-bottom-right-radius:4px}.declare-badge{display:inline-block;background:var(--accent);color:#201503;font-size:.7rem;font-weight:700;padding:1px 8px;border-radius:99px;margin-right:8px;vertical-align:middle}.chat-reply{font-size:1.05rem;font-weight:700;padding:8px 22px;border-radius:16px 16px 16px 4px;border:1px solid}.chat-reply.yes{color:var(--yes);border-color:var(--yes);background:#4ec98a1a}.chat-reply.no{color:var(--no);border-color:var(--no);background:#ef6a6a1a}.chat-reply.na{color:var(--na);border-color:var(--na);background:#8a93a51a}.chat-verdict{max-width:80%;padding:10px 16px;border-radius:16px;border:1px solid;font-weight:700}.chat-verdict.correct{color:var(--yes);border-color:var(--yes);background:#4ec98a1a}.chat-verdict.wrong{color:var(--no);border-color:var(--no);background:#ef6a6a14}.chat-typing{display:flex;gap:5px;padding:12px 18px;background:var(--panel-2);border-radius:16px 16px 16px 4px}.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--text-dim);animation:blink 1.2s infinite}.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,60%,to{opacity:.25}30%{opacity:1}}.input-bar{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 16px}.mode-tabs{display:flex;gap:8px;margin-bottom:10px}.mode-tab{background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:99px;padding:4px 16px;font-size:.9rem;transition:all .15s}.mode-tab.active{background:var(--panel-2);border-color:var(--accent);color:var(--text);font-weight:700}.mode-tab.active.declare{border-color:var(--yes)}.input-row{display:flex;gap:10px;align-items:stretch}.input-row textarea{flex:1;resize:none;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 14px;font-family:inherit;font-size:.95rem;line-height:1.6}.input-row textarea:focus{outline:none;border-color:var(--accent)}.send-btn{min-width:88px;background:var(--accent);color:#201503;border:none;border-radius:10px;font-size:1rem;font-weight:700;transition:opacity .15s}.send-btn.declare{background:var(--yes);color:#06301c}.send-btn:disabled{opacity:.4;cursor:not-allowed}.input-hint{margin:8px 0 0;font-size:.75rem;color:var(--text-dim)}.modal-overlay{position:fixed;inset:0;background:#06080cb8;display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}.modal{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:32px 36px;max-width:620px;width:100%;max-height:84vh;overflow-y:auto;box-shadow:var(--shadow)}.modal-title{margin:0 0 8px;font-size:1.6rem}.modal-title.correct{color:var(--yes)}.modal-title.wrong{color:var(--no)}.solution-box{background:var(--panel-2);border:1px solid var(--accent-dark);border-radius:12px;padding:16px 20px;margin:16px 0}.solution-box h3{margin:0 0 8px;color:var(--accent);font-size:1rem}.solution-box p{margin:0;white-space:pre-wrap}.modal-actions{display:flex;justify-content:flex-end;gap:12px}.primary-btn{background:var(--accent);color:#201503;border:none;border-radius:10px;padding:10px 24px;font-size:1rem;font-weight:700;transition:transform .15s}.primary-btn:hover{transform:translateY(-1px)}