:root,:root[data-theme="light"],:root[data-theme="dark"]{
  --bg:#07182f;--panel:#f9f4dc;--panel2:#dff0eb;--box:#a9ddda;--box-lite:#d9f1ec;
  --ink:#071b3a;--ink-soft:#1d425d;--ink-dim:#274560;--ink-faint:#567082;--line:#244f73;--line2:#08254b;
  --accent:#0a70b8;--accent2:#0a67aa;--gold:#ffd74a;--red:#e44753;--good:#2aa875;
  --sans:ui-monospace,"Cascadia Mono","Courier New",monospace;--mono:var(--sans)
}
*{image-rendering:pixelated}
body{
  background:radial-gradient(circle at 50% 20%,#1d5278 0,#07182f 52%,#020817 100%);
  color:var(--ink);font-family:var(--sans)
}
#app{
  max-width:720px;background:#07182f;border-left:4px solid #020b1d;border-right:4px solid #020b1d;
  box-shadow:0 0 0 2px #2b6fa1,0 20px 90px #000
}
#hud{
  min-height:48px;padding:7px 10px;background:linear-gradient(#1575ba,#075394);border-bottom:4px solid #03162e;
  box-shadow:inset 0 0 0 2px #55a4cf;color:#fff
}
.hero-chip{gap:8px}.hero-chip .pic{width:36px;height:36px;border:3px solid #071b3a;border-radius:0;background:#f8f2d6;overflow:hidden}
.hero-chip .pic .pixel-head-img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.hero-meta .n{font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-shadow:2px 2px #07477e}
.hero-meta .r{font-size:8px;color:#d5efff;letter-spacing:.05em}
.dots .dot{border-radius:0;border:2px solid #06264b;background:#b5cbd2}.dots .dot.done{background:var(--gold);box-shadow:0 0 0 1px #fff0a8 inset}
.iconbtn{border:2px solid #05244a!important;border-radius:0!important;background:#f8f2d6!important;color:#08254b!important;box-shadow:2px 2px #021128}
#scene{background:#07182f;border-left:2px solid #2d729f;border-right:2px solid #2d729f}
#world{image-rendering:pixelated}
#objective{
  top:9px;width:calc(100% - 24px);max-width:520px;justify-content:flex-start;border:3px solid #071b3a;border-radius:0;
  background:#fffaf0;color:#092b55;box-shadow:4px 4px 0 rgba(1,12,30,.65),inset 0 0 0 2px #d6c9a8;padding:8px 11px
}
#objective .go{color:#ffcc2b;font-size:18px;text-shadow:1px 1px #0a315d}
#objective .txt{font-size:11px}.objective .txt b,#objective .txt b{color:#0a67aa;font-size:9px}
#controls .dpad{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.5))}
.dbtn,.abtn{border:3px solid #04172e!important;border-radius:4px!important;background:#f5f0d7!important;color:#0b3d70!important;box-shadow:inset 0 0 0 2px #9dc6cf!important;font-family:var(--mono)!important;font-weight:900!important}
.dbtn:active,.abtn:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #7fa8b2!important}
.abtn{background:#ffd84d!important;color:#09264a!important}
#encBg{
  background-image:linear-gradient(rgba(5,28,58,.16),rgba(5,28,58,.08)),var(--encounter-art)!important;
  background-size:cover!important;background-position:center!important;filter:saturate(.95) contrast(1.04)
}
#encBg::after{opacity:.12;background-size:4px 4px;background-image:linear-gradient(rgba(5,16,35,.28) 1px,transparent 1px)!important;mask-image:none}
#stage{padding:10px 18px 5px;align-items:flex-start;padding-top:36px}
.actor{filter:drop-shadow(4px 6px 0 rgba(2,14,31,.45))}.actor .ci{height:150px;display:flex;align-items:flex-end;justify-content:center}
.pixel-char-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated}
.actor .pixel-char-img{object-fit:contain}.actor .plate{display:none}
.surface{max-width:370px;background:#f8f1d3;color:#08254b;border:4px solid #071b3a;border-radius:0;box-shadow:6px 6px 0 rgba(2,13,30,.65),inset 0 0 0 2px #cbbf9d}
.surf-head,.chart-title{font-family:var(--mono);color:#0a477e}.kpi,.note,.chat .msg,.vs-col{border-radius:0;border:2px solid #193d5d;background:#fffaf0;color:#0b294b}
#dialogue{padding:0 10px calc(10px + env(safe-area-inset-bottom));background:#07182f}
.dbox{
  background:#a9ddda;border:4px solid #06182f;border-radius:0;box-shadow:0 -4px 0 #e74e55,inset 0 0 0 4px #e74e55,inset 0 0 0 7px #d7f0e9;
  padding:16px 18px;max-height:52vh;overflow-y:auto
}
.speaker{position:relative;top:auto;left:auto;display:inline-flex;width:max-content;max-width:100%;margin:0 0 14px;border:3px solid #06182f;border-radius:0;background:#fff8dc;padding:3px 12px 3px 4px;box-shadow:3px 3px #e74e55;color:#08254b}
.speaker .face{width:42px;height:42px;border-radius:0;border:2px solid #08254b;background:#dbece5}
.speaker .face .pixel-head-img{width:100%;height:100%;object-fit:cover;object-position:center top}
.speaker .sn{font-family:var(--mono);font-size:11px;color:#08254b;text-transform:uppercase;letter-spacing:.08em}
#say{font-size:14px;line-height:1.45;font-weight:700;color:#092849;margin-top:0}
#after{margin-top:11px}.choices{gap:8px}
.choice{
  border:3px solid #08254b;border-radius:0;background:#fffaf0;color:#08254b;padding:10px 11px 10px 31px;
  font-family:var(--mono);font-size:12px;line-height:1.35;box-shadow:3px 3px 0 #547a87
}
.choice:hover,.choice.sel{border-color:#08254b;background:#ffe578;transform:translate(-1px,-1px);box-shadow:5px 5px 0 #143b58}
.choice.sel[disabled]{opacity:1;color:#08254b}
.choice::before{color:#d42e3e;opacity:1;transform:translateY(-50%) scale(.85)}
.conseq{border:3px solid #08254b;border-radius:0;background:#eef9f4;padding:10px;box-shadow:3px 3px 0 #547a87;color:#0b2c50;font-family:var(--mono)}
.conseq .lead{color:#0a67aa;font-weight:900}.conseq p{color:#183d59;font-weight:700}.conseq .impact{background:#fff8dc;border:2px solid #345c75;border-radius:0}
.btn{border:3px solid #06182f;border-radius:0;background:#ffd74a;color:#08254b;font-family:var(--mono);text-transform:uppercase;box-shadow:4px 4px 0 #06182f;padding:12px}
.btn:hover{filter:none;transform:translate(-1px,-1px);box-shadow:6px 6px 0 #06182f}.btn.ghost{background:#f8f1d3;border-color:#06182f}
.screen{background:#07182f;color:#fff}
.title-s{
  background:linear-gradient(rgba(4,24,48,.38),rgba(3,16,34,.84)),var(--office-art) center/cover;
  padding:24px 28px;text-shadow:2px 2px #041226
}
.title-s::before{content:"";position:absolute;inset:12px;border:4px solid #05152b;box-shadow:inset 0 0 0 2px #3b84ae;pointer-events:none}
.hero-art{height:155px;width:110px;margin-bottom:8px}.hero-art .ci{height:100%}.hero-art .pixel-char-img{filter:drop-shadow(5px 7px 0 rgba(0,0,0,.5))}
.eyebrow,.game-title,.tag,.chips,.title-s .btn,.press{position:relative;z-index:1}.eyebrow{font-family:var(--mono);color:#ffe681}.game-title{text-transform:uppercase;font-family:var(--mono);letter-spacing:.04em}.game-title .g{color:#ffd74a}.tag{max-width:520px;color:#f6fbff;background:rgba(3,19,39,.82);border:3px solid #dceff2;padding:12px;line-height:1.45}.chip{border:2px solid #071b3a;border-radius:0;background:#fff8dc;color:#08254b;box-shadow:2px 2px #05162e;text-shadow:none}.chip b{text-shadow:none}
.press{color:#d9f1ff}.result-s{background:linear-gradient(#0d4e82,#07182f);color:#fff}.r-title,.r-kick,.review h4{font-family:var(--mono)}
.success-score{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(100%,360px);margin:13px auto 4px;padding:10px 14px;background:#ffd74a;color:#08254b;border:4px solid #06182f;box-shadow:5px 5px #021024;font-family:var(--mono);text-align:left}.success-score span{font-size:10px;font-weight:900;letter-spacing:.08em}.success-score b{font-size:34px;line-height:1}.success-score small{font-size:12px}
.rank{border-radius:0;border:4px solid #06182f;box-shadow:5px 5px #021024}.r-sub,.review,.dim{background:#fff8dc;color:#08254b;border:3px solid #06182f;border-radius:0}.dim-track{border-radius:0;background:#98adb2}.dim-fill{border-radius:0}
@media (min-width:620px){#dialogue{padding-left:16px;padding-right:16px}.dbox{padding:26px 22px 18px}.choices{grid-template-columns:1fr 1fr}.choice{min-height:72px}}
@media (max-width:420px){#app{border-left:0;border-right:0}.hero-meta .r{display:none}#stage{padding-left:7px;padding-right:7px}.surface{max-width:310px}.actor .ci{height:122px}.dbox{max-height:58vh;padding:14px 13px}#say{font-size:13px}.choice{font-size:11px;padding-top:9px;padding-bottom:9px}.conseq{flex-direction:column}.conseq .impact{width:100%;flex-direction:row;justify-content:space-between}.conseq .impact svg{width:74px}.title-s{padding:22px 18px}.hero-art{height:130px}}