:root { --ink:#f5f0e9; --muted:#aeb1c3; --night:#090d1a; --panel:#121a2c; --panel-2:#19233a; --line:#39445e; --ember:#ff7428; --gold:#ffc45d; --lav:#a989f7; --good:#80dfae; --bad:#ff7f77; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 50% -15%,#2a1d3d 0,transparent 34%),linear-gradient(160deg,#090d1a,#0d1324 55%,#180f1b); font:16px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
button,input,select { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100%,760px); min-height:100vh; margin:auto; padding:20px 16px 42px; }
.topbar,.panel-heading,.encounter-card,.boss-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }.topbar { padding:8px 2px 20px; }.eyebrow { margin:0 0 5px; color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.7rem,7vw,2.8rem); letter-spacing:.05em; } h2 { margin-bottom:0; font-size:1.25rem; } h3 { margin-bottom:3px; }.pet-chip,.badge { border:1px solid var(--line); background:#11182a; border-radius:10px; padding:8px 10px; font-size:.75rem; line-height:1.15; }.pet-chip { display:flex; align-items:center; gap:8px; }.pet-pixel { color:var(--ember); font-size:1.6rem; text-shadow:0 0 15px #ff742888; }.badge { color:var(--lav); white-space:nowrap; }
.mission-card,.panel,.fight-result { border:1px solid var(--line); background:linear-gradient(145deg,#161e32,#0e1526); box-shadow:0 18px 45px #0004; border-radius:16px; }.mission-card { padding:20px; }.mission-card p:not(.eyebrow) { color:var(--muted); margin:10px 0 0; }.steps { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:18px 0 0; list-style:none; }.steps li { padding:5px 8px; border:1px solid #35415c; border-radius:5px; color:var(--muted); font-size:.72rem; }.steps .active { border-color:var(--ember); color:var(--ink); background:#ff742820; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:18px 0; }.tab,.secondary,.text-button { border:1px solid var(--line); background:#11192b; color:var(--ink); border-radius:8px; padding:10px; }.tab.active { border-color:var(--ember); background:#ff74281c; color:var(--gold); }.panel { display:none; padding:20px; }.panel.active { display:block; }.helper { color:var(--muted); font-size:.88rem; }.deck-list { display:grid; gap:9px; margin:16px 0; }.deck-card { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:12px; border:1px solid #37435c; border-radius:10px; background:#101827; }.rank { color:var(--gold); font-weight:900; }.deck-card h3 { font-size:.95rem; }.deck-card p { margin:2px 0 0; color:var(--muted); font-size:.76rem; }.deck-actions { display:flex; align-items:center; gap:6px; }.mini { width:30px; height:30px; padding:0; border:1px solid #4b5670; border-radius:6px; background:#1d2940; color:var(--ink); }.trigger { border:1px solid #4b5670; border-radius:6px; color:var(--ink); background:#1b253a; padding:5px; font-size:.73rem; }.prediction { display:grid; gap:7px; color:var(--gold); font-size:.8rem; }.prediction input { width:100%; border:1px solid #48536c; border-radius:8px; padding:11px; color:var(--ink); background:#0c1220; }.primary { width:100%; margin-top:18px; border:0; border-radius:9px; padding:14px; background:linear-gradient(90deg,#e84d1e,#ff8b30); color:#1a0b08; font-weight:900; }.primary:hover { filter:brightness(1.1); }
.encounter-grid { display:grid; gap:12px; margin:16px 0; }.encounter-card { padding:14px; border:1px solid #3b4863; border-radius:11px; background:#10192a; }.encounter-card.danger { border-color:#77485a; }.encounter-card p { margin:2px 0; color:var(--muted); font-size:.77rem; }.enemy-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:9px; background:#253c37; color:var(--good); font-size:1.6rem; }.golem { background:#3b2b31; color:var(--ember); }.secondary { font-weight:800; }.fight-result { margin-top:16px; padding:16px; }.fight-result.empty { color:var(--muted); }.result-top { display:flex; justify-content:space-between; gap:10px; }.win { color:var(--good); }.loss { color:var(--bad); }.reason { margin:12px 0; border-left:3px solid var(--ember); padding:10px 12px; background:#ff742812; }.log { margin:0; padding-left:20px; color:#d4d9e8; font-size:.78rem; }.log li { margin:6px 0; }
.boss-arena { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin:18px 0; }.fighter { text-align:center; }.fighter-sprite { display:block; font-size:3rem; }.ember-fighter .fighter-sprite { color:var(--ember); }.boss-fighter .fighter-sprite { color:var(--lav); }.versus { color:var(--gold); font-weight:900; }.health { height:9px; margin:7px 0 3px; overflow:hidden; border:1px solid #5e2941; border-radius:999px; background:#260f1c; }.health span { display:block; height:100%; background:linear-gradient(90deg,#ee4c39,#ff8b30); transition:width .2s; }.fighter small { color:var(--muted); }.intent { display:flex; justify-content:space-between; gap:10px; border:1px solid #594458; background:#23182b; border-radius:8px; padding:10px; font-size:.8rem; }.intent span { color:var(--lav); }.boss-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:16px; }.boss-card { min-height:100px; padding:10px; text-align:left; border:1px solid #4c486b; border-radius:9px; background:#15172b; color:var(--ink); }.boss-card strong { display:block; color:var(--gold); }.boss-card small { color:var(--muted); }.boss-card:disabled { cursor:not-allowed; opacity:.45; }.energy { color:var(--gold); font-weight:900; }.text-button { border:0; background:transparent; color:var(--muted); text-decoration:underline; }
@media (max-width:540px) { .app-shell { padding:14px 11px 30px; }.panel,.mission-card { padding:15px; }.encounter-card { display:grid; grid-template-columns:44px 1fr; }.encounter-card .secondary { grid-column:1/-1; }.panel-heading { align-items:flex-start; }.badge { font-size:.65rem; }.deck-card { grid-template-columns:25px 1fr; }.deck-actions { grid-column:2; }.boss-actions { flex-wrap:wrap; } }