:root{
  --sky:#241E4E; --roof:#161233;
  --shell:#FFF; --ink:#1A1730; --muted:#6E6A8A; --line:#E7E5F0; --soft:#F4F3F9;
  --ok:#1E9C74; --ok-soft:#DAF0E8; --warm:#E8901A; --warm-soft:#FBEBD5;
  --cage:#2A2547; --cage-2:#3B3560;
  --disp:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:#15122B;font-family:var(--body);color:var(--ink);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px 12px}
.phone{width:100%;max-width:390px;height:min(800px,calc(100vh - 32px));min-height:600px;background:var(--shell);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.on{display:flex}

.roof{background:var(--sky);padding:calc(16px + env(safe-area-inset-top,0px)) 16px 12px;position:relative;flex:none}
.roof .hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.roof .n{font-family:var(--disp);font-size:22px;font-weight:800;color:#fff;line-height:1}
.roof .n small{font-family:var(--body);font-size:12px;font-weight:500;color:#A9A2D4;display:block;margin-top:3px}
.free{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;min-height:74px;max-height:120px;overflow:hidden}
.free button{background:none;border:none;padding:0;cursor:pointer;line-height:0}
.empty-roof{color:#8981BC;font-size:12.5px;line-height:1.5;padding:16px 0 8px}

.cages{flex:1;overflow-y:auto;padding:14px 16px 0;background:var(--shell);display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
.gridwrap{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.cage{position:relative;padding-bottom:100%;border-radius:5px;background:var(--cage);overflow:hidden;cursor:pointer;border:none}
.cage.seen{background:var(--cage-2)}
.cage.out{background:var(--soft)}
.cage i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:0}
.cage i svg{width:88%;height:88%}
.cage.dark i{filter:brightness(.86) saturate(.9)}
.cage.seen i{filter:none}
.cage .bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 3.4px,rgba(22,18,51,.82) 3.4px 4.8px)}.cage.seen .bars{background:repeating-linear-gradient(90deg,transparent 0 3.4px,rgba(232,144,26,.85) 3.4px 4.8px)}
.cage.out .bars{display:none}
.foot{padding:12px 16px calc(18px + env(safe-area-inset-bottom,0px));background:var(--shell);flex:none}
.cta{background:var(--ink);border:none;border-radius:16px;padding:15px;font-family:var(--body);font-size:15.5px;font-weight:600;color:#fff;cursor:pointer;width:100%}
.cta:active{transform:scale(.985)}
.mudou{background:var(--soft);border-radius:14px;padding:11px 12px;margin-bottom:10px}
.mudou p{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:9px;text-align:center}
.mudou b{color:var(--ink);font-weight:600}
.mudou .btn{padding:10px;font-size:13.5px}
.tally{text-align:center;font-size:12px;color:var(--muted);margin-top:8px}
[hidden]{display:none!important}
.install{display:flex;gap:6px;margin-top:9px}
.softbtn,.install-go{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:11px;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.softbtn:active,.install-go:active{background:var(--soft)}
.softbtn{width:100%}
.install-x{width:42px;border:1.5px solid var(--line);background:#fff;border-radius:14px;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.sheet{position:absolute;inset:0;z-index:5;background:rgba(22,18,51,.55);display:flex;align-items:flex-end;padding:12px}
.sheet-in{width:100%;background:var(--shell);border-radius:20px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}

.page{background:var(--shell);padding:calc(24px + env(safe-area-inset-top,0px)) 22px calc(18px + env(safe-area-inset-bottom,0px));overflow-y:auto;flex:1;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.icon{width:34px;height:34px;border-radius:11px;border:1.5px solid var(--line);background:none;cursor:pointer;font-size:16px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none}
h2{font-family:var(--disp);font-size:19px;font-weight:600}
.sub{font-size:13.5px;color:var(--muted);line-height:1.5}
.bar{height:5px;background:var(--soft);border-radius:99px;overflow:hidden;flex:1}
.bar span{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .3s}
/* Barra do tempo. Largura vem do JS quadro a quadro, sem transition nem
   animation, então continua funcionando com prefers-reduced-motion. */
.clock{height:5px;background:var(--soft);border-radius:99px;overflow:hidden;margin-top:13px;flex:none}
.clock span{display:block;height:100%;width:100%;background:var(--ink);border-radius:99px}
.clock span.low{background:var(--warm)}
#confete{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

.cagebig{display:flex;align-items:center;gap:13px;background:var(--soft);border-radius:15px;padding:11px 13px;min-height:74px}
.cagebig .box{width:54px;height:54px;border-radius:10px;background:var(--cage);position:relative;overflow:hidden;flex:none}
.cagebig .box i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:0}
.cagebig .box i svg{width:88%;height:88%}
.cagebig .box.dark i{filter:brightness(.86) saturate(.9)}
.cagebig .box.seen i{filter:none}
.cagebig .box.out{background:var(--ok-soft)}
.cagebig .box .bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(22,18,51,.82) 5px 7px)}.cagebig .box.seen .bars{background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(232,144,26,.85) 5px 7px)}
.cagebig .box.out .bars{display:none}
.cagebig p{font-size:12.5px;color:var(--muted);line-height:1.45}
.fact{font-family:var(--disp);font-size:50px;font-weight:800;letter-spacing:-.03em;text-align:center;padding:18px 0 4px}
.answer{border:2px solid var(--line);border-radius:16px;height:56px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:28px;font-weight:600;margin:8px 0}
.answer.empty{color:#BEBBD0}
.answer.ok{border-color:var(--ok);background:var(--ok-soft);color:#10614A}
.answer.no{border-color:var(--warm);background:var(--warm-soft);color:#82500A}
.fb{min-height:50px;font-size:13px;line-height:1.45;border-radius:13px}
.fb.show{padding:10px 12px}
.fb.good{background:var(--ok-soft);color:#10614A;font-weight:500}
.fb.tip{background:var(--warm-soft);color:#7A4906}
.fb.free{background:#EFE9FB;color:#3A2E6B;font-weight:500}
.fb b{font-weight:600}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:auto}
.key{border:1.5px solid var(--line);background:#fff;border-radius:14px;height:50px;font-family:var(--disp);font-size:21px;font-weight:600;color:var(--ink);cursor:pointer}
.key:active{transform:scale(.94);background:var(--soft)}
.key.act{background:var(--ink);border-color:var(--ink);color:#fff;font-family:var(--body);font-size:14.5px;font-weight:600}
.key.ghost{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--muted)}
.array{display:grid;gap:4px;justify-content:center;margin:0 auto;max-width:200px}
.array b{width:100%;padding-bottom:100%;background:#EFE9FB;border-radius:50%;display:block}

.big{font-family:var(--disp);font-size:28px;font-weight:800;letter-spacing:-.02em}
.freedrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;flex:none}
.roofcat{line-height:0;border-radius:5px}
.roofcat.new{box-shadow:0 0 0 2px var(--ok)}
.roofmore{display:flex;align-items:center;padding:0 9px;border-radius:5px;background:var(--soft);font-size:12px;font-weight:600;color:var(--muted)}
.minigrid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:8px;flex:none}
.mini{position:relative;padding-bottom:100%;border-radius:5px;background:var(--cage);overflow:hidden}
.mini.seen{background:var(--cage-2)}
.mini.out{background:var(--ok-soft)}
.mini i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:0}
.mini i svg{width:88%;height:88%}
.mini.dark i{filter:brightness(.86) saturate(.9)}
.mini .bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 3.4px,rgba(22,18,51,.82) 3.4px 4.8px)}
.mini.seen .bars{background:repeating-linear-gradient(90deg,transparent 0 3.4px,rgba(232,144,26,.85) 3.4px 4.8px)}
.mini.out .bars{display:none}
.mini.just{box-shadow:0 0 0 2px var(--ok)}
.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 13px;font-size:11.5px;color:var(--muted);margin-top:10px}
.legend b{font-weight:600;color:var(--ink)}
.lg{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.lg.dark{background:var(--cage)}
.lg.seen{background:var(--warm)}
.lg.out{background:var(--ok-soft);box-shadow:inset 0 0 0 1px #A8D9C8}
.duelrows{margin-top:14px;display:flex;flex-direction:column;gap:5px;flex:none}
.duelrow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:11px;background:var(--soft)}
.duelrow .conta{font-family:var(--disp);font-size:14px;font-weight:600;min-width:52px}
.duelrow .who{margin-left:auto;text-align:right;font-size:11.5px;color:var(--muted);line-height:1.4}
.duelrow .who b{display:block;font-weight:600;color:var(--ink)}
.duelrow .who .win{color:#10614A}
.duelrow.fugiu{opacity:.72}
.namein{border:1.5px solid var(--line);border-radius:13px;height:46px;padding:0 14px;font-family:var(--body);font-size:15px;width:100%;color:var(--ink)}
.namein:focus{outline:none;border-color:var(--ink)}
.btn{border:1.5px solid var(--line);background:#fff;border-radius:15px;padding:13px;font-family:var(--body);font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;width:100%}
.btn.solid{background:var(--ink);border-color:var(--ink);color:#fff}
.row{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.err{color:#B3261E;font-size:12.5px;display:none;margin-top:4px}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .45s ease-out}
@keyframes tail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(9deg)}}
.t-tail{transform-box:fill-box;transform-origin:0% 100%;animation:tail 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* No celular não faz sentido desenhar um celular dentro do celular: o jogo
   ocupa a tela inteira. A moldura continua no desktop, onde ela ajuda. */
@media (max-width:700px){
  body{padding:0;background:var(--shell);min-height:0}
  .phone{max-width:none;min-height:0;border-radius:0;box-shadow:none;
         height:100vh;height:100dvh}
}
/* Instalado na tela inicial: não deixa o puxão pra baixo recarregar o jogo. */
@media (display-mode:standalone){
  body{overscroll-behavior-y:contain}
}