/* ===== Tema ATARI (padrão) ===== */
:root{
  --bg:#08080f; --panel:#12121f; --fg:#d6d6e6; --hi:#ffffff; --yel:#fcfc54; --cyan:#54e8fc;
  --red:#fc5454; --green:#54fc7c; --mag:#fc54d8; --orange:#fc9c3c; --gray:#8a8aa8; --line:#34345a;
  --win-border:3px solid #54e8fc; --win-shadow:5px 5px 0 #fc54d8;
  --btn:#fcfc54; --btn-ink:#000; --btn-edge:#9c9c1c; --sel:#54e8fc; --sel-edge:#1c8ca8;
  --top-bg:#000; --top-ink:#fcfc54;
  --title-font:'Press Start 2P',monospace; --title-size:12px;
  --icon-filter:saturate(1.2);
  --overlay:rgba(0,0,0,.85);
}
/* ===== Tema DOS ===== */
body.dos{
  --bg:#0000aa; --panel:#0000aa; --fg:#c0c0c0; --hi:#ffffff; --yel:#ffff55; --cyan:#55ffff;
  --red:#ff5555; --green:#55ff55; --mag:#ff55ff; --orange:#ffaa55; --gray:#a0a0d0; --line:#c0c0c0;
  --win-border:4px double #c0c0c0; --win-shadow:8px 8px 0 #000;
  --btn:#c0c0c0; --btn-ink:#000; --btn-edge:#000; --sel:#55ffff; --sel-edge:#000;
  --top-bg:#c0c0c0; --top-ink:#000;
  --title-font:'VT323',monospace; --title-size:22px;
  --icon-filter:grayscale(1) contrast(1.6) brightness(1.4);
  --overlay:rgba(0,0,40,.8);
}

*{box-sizing:border-box}
/* Legibilidade: fonte pixelada só em títulos curtos; texto de leitura grande e com alto contraste. */
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:'VT323',monospace;font-size:24px;line-height:1.2}
button,input{font:inherit}
button{cursor:pointer}
.blink{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

#app{height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg)}
body:not(.dos) #app::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:40;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

.topbar{background:var(--top-bg);color:var(--top-ink);padding:4px 10px;display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden;flex:none}
.topbar.sub{background:#000;color:var(--fg)}
body:not(.dos) .topbar.main{border-bottom:6px solid;border-image:linear-gradient(to bottom,#fc5454 0 33%,#fc9c3c 33% 66%,#fcfc54 66%) 1}
.fbar{flex:none;background:#000;display:flex;border-top:2px solid var(--line)}
.fbar button{flex:1;background:#000;color:var(--fg);border:0;padding:12px 4px;text-align:center}
.fbar button i{font-style:normal;color:#000;background:var(--yel);padding:0 4px;margin-right:4px}
body.dos .fbar button i{background:var(--cyan)}
.fbar button:active{background:var(--sel);color:#000}
.fbar button.go{flex:2;background:var(--green);color:#000;font-weight:bold}
.fbar button.qfb{flex:0 0 56px;background:var(--cyan);color:#000;font-family:var(--title-font);font-size:20px}
.btn.go{background:var(--green);border-bottom-color:#1c9c3c;margin-top:4px;font-size:26px}
.body{padding:12px 12px 90px;flex:1;overflow:auto;min-height:0}
/* Botão "?" sempre visível: a voz da sabedoria */
.qmark{position:absolute;right:14px;bottom:74px;z-index:25;width:58px;height:58px;border-radius:50%;background:var(--cyan);color:#000;border:3px solid #000;font-family:var(--title-font);font-size:22px;box-shadow:3px 3px 0 var(--mag);cursor:pointer}
.qmark:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--mag)}
body.dos .qmark{border-radius:0;box-shadow:4px 4px 0 #000}
.hint{border-left:4px solid var(--cyan);padding:4px 10px;margin:6px 0}
details.hint summary{cursor:pointer}

/* "A vida acontece": acordeon das situações e pedidos */
.acc{border:2px solid var(--line);margin:8px 0;background:#000}
.acc-h{width:100%;display:flex;justify-content:space-between;gap:8px;align-items:center;background:transparent;border:0;color:var(--hi);padding:8px 10px;text-align:left;font:inherit}
.acc-h span:last-child{font-size:19px;white-space:nowrap}
.acc-b{padding:0 10px 10px}
.acc-b p{margin:6px 0}
.blinkbox{border-color:var(--yel);animation:pulse 1.1s steps(2) infinite}
@keyframes pulse{50%{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}}

/* Avisos discretos no topo (pedidos e respostas entre casas) */
#notices{position:absolute;top:44px;left:10px;right:10px;z-index:36;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.notice{background:var(--panel);border:2px solid var(--cyan);color:var(--fg);padding:6px 10px;box-shadow:3px 3px 0 var(--mag);pointer-events:auto;font-size:21px}
.notice b{color:var(--yel);font-weight:normal}

.win{border:var(--win-border);padding:16px 12px 12px;margin:12px 0 18px;box-shadow:var(--win-shadow);background:var(--panel);position:relative}
.win>.ttl{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--panel);padding:0 8px;color:var(--yel);white-space:nowrap;font-family:var(--title-font);font-size:var(--title-size);line-height:1.6}
body.dos .win>.ttl{color:var(--hi);top:-14px}
.sec{color:var(--orange);margin:16px 0 8px;font-family:var(--title-font);font-size:var(--title-size);line-height:1.6}
body.dos .sec{color:var(--yel)}
.muted{color:var(--gray)}
.hi{color:var(--hi)} .y{color:var(--yel)} .c{color:var(--cyan)} .r{color:var(--red)} .g{color:var(--green)} .m{color:var(--mag)}
.center{text-align:center}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pre{white-space:pre-line}

/* Catálogo */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.item{background:var(--panel);border:2px solid var(--line);border-bottom-width:5px;color:var(--fg);padding:8px 4px 6px;text-align:center;position:relative}
body.dos .item{background:transparent;border:1px solid var(--fg)}
.item .ic{font-size:34px;line-height:1;display:block;filter:var(--icon-filter);margin-bottom:4px}
.item .nm{display:block;font-size:21px;line-height:1;min-height:42px;color:var(--hi)}
.item .pr{display:block;color:var(--yel)}
.item:active,.item.flash{background:var(--sel);border-color:var(--sel-edge);transform:translateY(2px)}
.item:active .nm,.item.flash .nm,.item:active .pr,.item.flash .pr{color:#000}
.item .qty{position:absolute;top:-8px;right:-6px;background:var(--mag);color:#000;padding:0 6px;font-size:20px;border:2px solid #000}
body.dos .item .qty{background:var(--yel);top:2px;right:4px;border:0}
.item.has{border-color:var(--mag)}
body.dos .item.has{border-color:var(--fg)}

/* Tabelas e listas */
table{width:100%;border-collapse:collapse}
td,th{padding:4px;text-align:left;vertical-align:middle}
th{color:var(--yel);font-weight:normal;border-bottom:1px dashed var(--gray)}
td.n,th.n{text-align:right}
.qbtn{background:#000;color:var(--cyan);border:2px solid var(--cyan);min-width:34px;padding:2px 6px;white-space:nowrap}
.qbtn:active{background:var(--cyan);color:#000}
.qbtn.r{color:var(--red);border-color:var(--red)}
.qbtn:disabled{opacity:.35}
.total{border-top:1px dashed var(--gray);margin-top:8px;padding-top:6px}
.goods{display:flex;flex-direction:column;gap:8px}
.good{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.good .nm{flex:1;min-width:120px}

/* Botões */
.btn{background:var(--btn);color:var(--btn-ink);border:0;border-bottom:5px solid var(--btn-edge);padding:10px 14px}
.btn:active{transform:translateY(3px);border-bottom-width:2px}
.btn.sel{background:var(--sel);border-bottom-color:var(--sel-edge)}
.btn.danger{background:var(--red);border-bottom-color:#9c1c1c}
.btn.magic{background:var(--mag);border-bottom-color:#9c1c88}
.btn.ghost{background:#000;color:var(--fg);border:2px solid var(--line);border-bottom-width:5px}
.btn:disabled{opacity:.35}
body.dos .btn{border-bottom:0;box-shadow:4px 4px 0 #000}
.btns{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.stack{display:grid;gap:12px}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}

/* Modais */
.overlay{position:absolute;inset:0;background:var(--overlay);display:flex;padding:20px 14px;z-index:30;overflow:auto}
.overlay .win{width:100%;margin:auto}
.msgtext{color:var(--hi);margin:6px 0}
.verse{color:var(--hi);font-size:28px;line-height:1.2;margin:10px 0 4px}
.verse .cur{display:inline-block;width:10px;background:var(--cyan);animation:bl .7s steps(1) infinite}
.ref{color:var(--yel);text-align:right}
.sig{color:var(--cyan);margin-top:8px}
.after{visibility:hidden}
.after.on{visibility:visible}
input.dos{width:100%;background:#000;color:var(--green);border:2px solid var(--line);padding:6px 10px;font-size:28px}
.toast{position:absolute;left:12px;right:12px;bottom:70px;background:var(--red);color:#000;padding:10px 12px;z-index:35;text-align:center}
.toast.ok{background:var(--green)}

/* Login */
.logo{text-align:center;margin:24px 0 4px}
.logo .l1{font-family:var(--title-font);font-size:26px;color:var(--hi);line-height:1.3;text-shadow:3px 3px 0 #fc5454}
.logo .l2{font-family:var(--title-font);font-size:16px;color:var(--yel);letter-spacing:6px;margin-top:8px}
.logo .stripes{height:12px;margin:12px auto 0;width:70%;background:linear-gradient(to bottom,#fc5454 0 33%,#fc9c3c 33% 66%,#fcfc54 66%)}
body.dos .logo .l1{font-size:44px;text-shadow:none}
body.dos .logo .l2{font-size:30px}
body.dos .logo .stripes{background:var(--fg);height:3px}

/* Barras de progresso */
.bar{height:22px;border:2px solid var(--line);background:#000;position:relative;margin:4px 0 2px}
.bar>span{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 12px)}
.bar.red>span{background:repeating-linear-gradient(90deg,var(--red) 0 10px,transparent 10px 12px)}
.alert-banner{background:var(--red);color:#000;text-align:center;padding:6px;font-family:var(--title-font);font-size:var(--title-size);flex:none}

/* Narrador */
.ntable{font-size:20px}
.ntable td,.ntable th{padding:3px 2px}
.log{max-height:260px;overflow:auto;color:var(--green);font-size:19px}
.big{font-size:26px;padding:14px}
.members{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.member{border:2px solid var(--line);padding:2px 8px}
.member.lost{border-color:var(--red);color:var(--red)}
.member.q{border-color:var(--cyan);color:var(--cyan)}

/* A voz da insensatez */
.folly{border-left:4px solid var(--gray);padding:4px 10px;margin:6px 0;font-size:21px;color:var(--fg)}
.folly b{color:var(--red);font-weight:normal}

/* Desfecho: cenas 2D e a história da casa */
.scene{display:block;width:100%;height:auto;border:2px solid var(--line);margin:8px 0 4px;image-rendering:pixelated}
.scene .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .35s steps(2) infinite alternate}
@keyframes flick{to{transform:scaleY(1.25) translateY(-1px)}}
.scene .rain{animation:fall .6s linear infinite}
@keyframes fall{to{transform:translateY(30px)}}
.story{margin:0;padding-left:22px}
.story li{margin:6px 0}
/* No fim, a bolinha ? chama até ser tocada */
.qmark.call{animation:callme .8s steps(2) infinite;box-shadow:0 0 0 4px var(--yel)}
@keyframes callme{50%{background:var(--yel);transform:scale(1.12)}}

/* Créditos finais subindo, como nos jogos antigos */
.overlay:has(.credits){background:#000;padding:0}
.credits{position:relative;width:100%;height:100%;overflow:hidden;text-align:center}
.credits .roll{position:absolute;left:0;right:0;top:75%;padding:0 20px;animation:roll 34s linear forwards}
.credits h3{font-family:var(--title-font);font-size:13px;line-height:1.7;color:var(--cyan);margin:46px 0 14px;font-weight:normal}
.credits p{margin:8px 0}
@keyframes roll{to{transform:translateY(-100%) translateY(-80vh)}}
.credits-end{position:absolute;left:0;right:0;bottom:24px;display:flex;flex-direction:column;gap:12px;padding:0 24px;opacity:0;pointer-events:none;transition:opacity .6s}
.credits-end.on{opacity:1;pointer-events:auto}
a.btn{display:inline-block;text-decoration:none;text-align:center}/* tela de abertura */
.start{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 20px)}
.start .scene{margin-top:0}
.start .logo .l1{font-size:28px}
.press{width:100%;animation:bl 1.1s steps(1) infinite}