:root{--bg: #141019;--panel: #1f1826;--panel-2: #292033;--border: #3a2f47;--text: #e8e0f0;--muted: #9a8fae;--accent: #c9a227;--accent-dim: #8f7420;--danger: #c0453e;--ok: #4f9d69;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}.screen{max-width:480px;margin:0 auto;min-height:100%;padding:12px;display:flex;flex-direction:column;gap:12px}.screen.play{height:100dvh;padding-bottom:8px}.logo{font-size:2.6rem;text-align:center;margin:48px 0 0;letter-spacing:.02em}.logo span{color:var(--accent)}.tagline{text-align:center;color:var(--muted);margin-top:4px}h2,h3{margin:0}.muted{color:var(--muted);font-size:.85em}.center{text-align:center}.topbar{display:flex;align-items:center;gap:10px}.turn-banner{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-badge{font-size:.7rem;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:2px 6px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}input,textarea,select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:1rem;width:100%;font-family:inherit}textarea{resize:none}.field-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}.form-row{display:flex;gap:8px;flex-wrap:wrap}.form-row>*{flex:1;min-width:140px}button{font-family:inherit;font-size:1rem;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:10px 14px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent-dim);color:#1c1505;font-weight:700}button.big{padding:14px;font-size:1.1rem}button.ghost{background:transparent}button.small{padding:4px 10px;font-size:.85rem}button.danger{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}.error{color:var(--danger);margin:0}.error-banner{background:#3a1f1e;border:1px solid var(--danger);border-radius:10px;padding:8px 12px;font-size:.9rem}.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.class-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px}.class-card span{color:var(--muted);font-size:.78rem}.class-card.selected{border-color:var(--accent);background:#2c2416}.abilities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ability-pick{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 4px}.ability-pick select{width:auto;padding:4px 8px;text-align:center}.ability-name{font-size:.7rem;color:var(--muted);letter-spacing:.08em}.ability-mod{color:var(--accent);font-weight:700}.derived-row{display:flex;gap:14px;color:var(--muted);font-size:.9rem;flex-wrap:wrap}.class-card.custom{grid-column:1 / -1;border-style:dashed}.genre-chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:6px 12px;border-radius:999px;font-size:.88rem;background:var(--panel)}.chip.selected{border-color:var(--accent);background:#2c2416;color:var(--accent)}.custom-class{display:flex;flex-direction:column;gap:8px}.inline-pick{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}.inline-pick select,.inline-pick input{width:auto;flex:1}.stats-header{display:flex;justify-content:space-between;align-items:center}.stat-input{width:56px;text-align:center;padding:4px}.game-code{font-size:1.3rem;letter-spacing:.15em;color:var(--accent)}.radio-row{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}.radio-row input{width:auto;margin-top:3px}.party-strip{display:flex;flex-direction:column;gap:10px}.party-member{display:grid;grid-template-columns:1fr auto;gap:2px 10px;background:var(--panel-2);border-radius:10px;padding:8px 12px;align-items:center}.premise{margin:0;font-style:italic;color:var(--muted)}.hp-bar{grid-column:1 / -1;height:8px;background:#171221;border-radius:4px;overflow:hidden}.hp-fill{height:100%;background:var(--ok);border-radius:4px;transition:width .4s ease}.hp-fill.low{background:var(--danger)}.combat-strip{display:flex;gap:8px;flex-wrap:wrap;background:#2b1c1c;border:1px solid #5b3030;border-radius:10px;padding:6px 10px;font-size:.85rem}.combat-strip .round{font-weight:700}.combat-strip .enemy.dead{text-decoration:line-through;opacity:.5}.log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px}.log-entry p{margin:0;white-space:pre-wrap}.log-entry .speaker{display:block;font-size:.75rem;color:var(--muted);margin-bottom:2px}.log-entry.dm{background:var(--panel);border:1px solid var(--border);border-radius:12px 12px 12px 4px;padding:10px 12px;margin-right:24px}.log-entry.action{background:#24304a26;border:1px solid #33415e;border-radius:12px 12px 4px;padding:8px 12px;margin-left:24px}.log-entry.roll{text-align:center;color:var(--accent);font-size:.88rem}.log-entry.system{text-align:center;color:var(--muted);font-size:.82rem}.log-entry.thinking{color:var(--muted);font-style:italic;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}.roll-panel{background:#2c2416;border:1px solid var(--accent-dim);border-radius:14px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.roll-panel p{margin:0 0 6px}.die-button{background:none;border:none;padding:0;-webkit-tap-highlight-color:transparent}.d20{position:relative;width:110px;height:110px;color:var(--accent);display:grid;place-items:center;filter:drop-shadow(0 0 12px rgba(201,162,39,.25))}.d20 svg{position:absolute;inset:0;width:100%;height:100%}.d20-face{position:relative;font-size:2rem;font-weight:800;color:var(--text);transform:translateY(6px)}.d20.waiting{animation:die-idle 2.2s ease-in-out infinite}.d20.tumbling{animation:die-tumble .5s linear infinite}.d20.crit{color:#ffd75e;animation:die-land .5s ease-out,die-crit-glow 1.2s ease-in-out infinite .5s}.d20.fumble{color:var(--danger);animation:die-land .5s ease-out}.d20.ok{color:var(--ok);animation:die-land .5s ease-out}.d20.fail{color:var(--danger);animation:die-land .5s ease-out}@keyframes die-idle{0%,to{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.05)}}@keyframes die-tumble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(12deg) scale(1.06) translate(3px)}50%{transform:rotate(-8deg) scale(.97) translateY(2px)}75%{transform:rotate(9deg) scale(1.04) translate(-3px)}to{transform:rotate(0) scale(1)}}@keyframes die-land{0%{transform:scale(1.35)}55%{transform:scale(.92)}to{transform:scale(1)}}@keyframes die-crit-glow{0%,to{filter:drop-shadow(0 0 10px rgba(255,215,94,.5))}50%{filter:drop-shadow(0 0 26px rgba(255,215,94,.95))}}.tap-hint{margin:0;animation:pulse 1.6s ease-in-out infinite}.roll-breakdown{margin:4px 0 0;font-weight:600}.roll-breakdown.crit{color:#ffd75e;font-size:1.15rem;letter-spacing:.04em}.roll-breakdown.fumble,.roll-breakdown.fail{color:var(--danger)}.roll-breakdown.ok{color:var(--ok)}.roll-result{border-radius:10px;padding:8px 12px;font-size:.9rem;text-align:center;border:1px solid var(--ok);background:#1c2b21}.roll-result.fail{border-color:var(--danger);background:#2b1c1c}.companion-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.companion-chip{flex:0 0 auto;min-width:130px;display:flex;flex-direction:column;gap:3px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:.82rem}.companion-chip.down{opacity:.55;border-color:var(--danger)}.companion-name{font-weight:600;white-space:nowrap}.mini-sheet{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--panel);padding:10px 12px}.mini-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.mini-head .conditions{color:var(--danger);font-size:.8rem}.mini-stats{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}.mini-stats .stat{background:var(--panel-2);border-radius:6px;padding:1px 6px}.input-row{display:flex;gap:8px;align-items:stretch}.input-row textarea{flex:1}.sheet-toprow{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}.stat-big{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-big label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.hp-edit{display:flex;align-items:center;gap:8px}.inventory{margin:0;padding-left:20px}.danger-zone{border-color:#5b3030}
