:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#dfe6ee;--fg:#14202c;--panel:rgba(255,255,255,.82);--gold:#b8860b;--line:rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1016;--fg:#e8eef5;--panel:rgba(12,18,26,.78);--gold:#f0c050;--line:rgba(255,255,255,.2)}}
:root[data-theme="dark"]{--bg:#0b1016;--fg:#e8eef5;--panel:rgba(12,18,26,.78);--gold:#f0c050;--line:rgba(255,255,255,.2)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;overflow:hidden}
html{color-scheme:dark;background:#121212}   /* fundo base ESCURO (mesmo das telas): se a troca de tela deixar uma lateral descoberta por 1 frame, aparece escuro e nao o --bg claro. color-scheme:dark tambem escurece barras de rolagem e fundos padrao do navegador */
/* BOTAO FECHAR (X) UNICO do jogo: o visual e o do X do modal de Salvar. Todo X de painel/modal usa class="x-btn" e o texto "×" (U+00D7); as classes antigas (v-x, s-x, fn-x, sq-x, r-x, tf-x) ficam so como gancho de JS/posicao. O !important cobre regras de botao de cada tela */
.x-btn{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:0;padding:0!important;border:0!important;border-radius:10px!important;background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.8);font:inherit;font-size:22px;font-weight:400;letter-spacing:0;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.x-btn:hover{background:rgba(255,255,255,.16)!important;color:#fff}
.x-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
html body{background:#121212}   /* html body = mais especifico que body{background:var(--bg)} la embaixo, entao vale sem mexer naquela linha */
body{background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;touch-action:none;user-select:none}
canvas{display:block;width:100%;height:100%}
.hud{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 14px;backdrop-filter:blur(8px)}
#stats{top:calc(env(safe-area-inset-top,0px) + 10px);left:10px}
#stats b{color:var(--gold);font-size:18px}
#help{bottom:calc(env(safe-area-inset-bottom,0px) + 10px);left:10px;max-width:260px;font-size:12px}
#qbtn{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:50%;transform:translateX(-50%);width:64px;height:64px;padding:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;cursor:pointer;overflow:hidden;color:var(--fg)}
#qcd{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);height:0}
.bar{position:fixed;width:44px;height:6px;margin:-4px 0 0 -22px;background:#0008;border:1px solid #000;pointer-events:none;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%}
.pop{position:fixed;pointer-events:none;font-weight:700;color:var(--gold);text-shadow:0 1px 3px #000;transition:transform .9s,opacity .9s}
.tbtn{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:0;padding:10px 20px;font-family:var(--ui,system-ui);font-size:14px;font-weight:700;line-height:1;cursor:pointer;transition:transform .12s,background .15s}
.tbtn:hover{background:rgba(255,255,255,.26);transform:scale(1.03)}
.tbtn.pri{background:#fff;color:#000}.tbtn.tsm{padding:5px 12px;margin-left:8px;font-size:12px}
#tstrip,#tcard{display:none;position:fixed;top:calc(env(safe-area-inset-top,0px) + 66px);left:50%;transform:translateX(-50%);width:min(470px,calc(100vw - 20px));box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;backdrop-filter:blur(6px);z-index:5}
#tcard{border-color:rgba(255,255,255,.35);padding:14px 16px}#tcard h3{margin:2px 0 6px;font-size:17px}#tcard p{margin:0 0 8px;font-size:14px}
.tk{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.08em}.th{font-size:12px;opacity:.8;margin-bottom:8px}.tb{display:flex;gap:8px;flex-wrap:wrap}
.twin{height:4px;background:#0006;border-radius:2px;margin-top:6px;overflow:hidden}.twin i{display:block;height:100%;background:var(--gold)}
#tdim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.28);pointer-events:none;z-index:4}
#ttoast{display:none;position:fixed;top:40%;left:50%;transform:translateX(-50%);background:#b3261eee;color:#fff;font-weight:700;padding:8px 16px;border-radius:10px;z-index:5;pointer-events:none}
.tlabel{display:none;position:fixed;transform:translate(-50%,-100%);background:var(--panel);border:1px solid var(--gold);color:var(--fg);font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:4}

/* ---- visual unificado: preto e branco, mesmo estilo da tela inicial ---- */
:root{--ui:"Circular Std",Circular,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Fundo de PAINEL DENTRO DE PAINEL (ex.: "Estilo de coach"): a cor FINAL do modal de Configuracoes/Salvar (vidro .34/.40 sobre a camada escura #smodal rgba(8,10,28,.62)), quase opaca, porque dentro de outro painel com
   backdrop-filter o blur nao funciona (a mesma cor dos menus .fn-dlg, .c-inbp, .cn-dd, .sc-dd). Quem usa: lista "PAINEL DENTRO DE PAINEL" em css/flat.css. Mude aqui e todos mudam. */
:root{--glass-inner:linear-gradient(135deg,rgba(33,39,64,.97),rgba(22,27,47,.97))}
.hud,#tstrip,#tcard,.tlabel,.fpop{--fg:#fff;--gold:#fff;--panel:rgba(18,18,18,.88);--line:rgba(255,255,255,.16);color:#fff;font-family:var(--ui)}
/* barra do canto superior direito (camera, menu, reiniciar, engrenagem) */
#topbar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;z-index:6;display:flex;align-items:center;gap:8px}
#topbar .hud{position:static}
#lbtn,#rst{padding:10px 18px;border-radius:500px;font-family:var(--ui);font-size:13px;font-weight:700;line-height:1;cursor:pointer;color:#fff;transition:transform .12s,border-color .15s,background .15s}
#lbtn:hover,#rst:hover,#gbtn:hover{border-color:#fff;transform:scale(1.04)}
#gbtn{width:38px;height:38px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font:19px/1 var(--ui);color:#fff;cursor:pointer;transition:transform .12s,border-color .15s}
@media (max-width:1000px){#topbar{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 20px)}#camcfg{order:9;flex:0 0 100%;box-sizing:border-box;justify-content:center}}
/* menu flutuante "Com dicas / Sem dicas" */
.fpop{position:fixed;z-index:60;min-width:240px;padding:6px;background:#282828;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.6);animation:fpin .16s ease both}
@keyframes fpin{from{opacity:0;transform:translateY(-4px) scale(.97)}}
.fpop button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:10px 12px;color:#fff;font-family:var(--ui);cursor:pointer;transition:background .12s}
.fpop button:hover{background:#3a3a3a}
.fpt{display:block;font-size:14px;font-weight:700}.fpd{display:block;margin-top:2px;font-size:12px;color:#b3b3b3}
/* ---- tela inicial: minimalista, preto e branco, inspirada no Spotify ---- */
#home{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:linear-gradient(#232323 0,#121212 380px,#121212);color:#fff;
  font-family:"Circular Std",Circular,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);overflow:auto;touch-action:pan-y}
#home [hidden]{display:none!important}
.hbar{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,56px)}
.hlogo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:-.01em}
.hlogo::before{content:'';width:30px;height:30px;background:url(../assets/img/logo.png) center/contain no-repeat}
.hlink{background:none;border:0;padding:8px 0;color:#b3b3b3;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:color .15s}
.hlink:hover{color:#fff}
.hmain{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 clamp(20px,5vw,56px) 9vh;max-width:1100px;width:100%;box-sizing:border-box}
.hview{width:100%}
.hview>*{animation:hin .45s ease both}.hview>:nth-child(2){animation-delay:.06s}.hview>:nth-child(3){animation-delay:.12s}.hview>:nth-child(4){animation-delay:.18s}
@keyframes hin{from{opacity:0;transform:translateY(24px);animation-timing-function:cubic-bezier(.22,1,.36,1)}}   /* entrada de blocos/paineis: sobe suave e assenta (sem zoom: a escala re-amostra fotos/textos e da um tranco no fim); a curva vale para TODAS as telas (mesmo as que declaram "ease") */
@keyframes bgz{from{opacity:0;transform:scale(1.06);animation-timing-function:cubic-bezier(.22,1,.36,1)}}   /* fundo das telas da carreira: se aproxima devagar */
.hmain h1{margin:0;font-size:clamp(52px,11vw,128px);line-height:.95;font-weight:900;letter-spacing:-.045em}
.hmain h2{margin:0 0 26px;font-size:clamp(34px,6vw,56px);line-height:1;font-weight:900;letter-spacing:-.035em}
.hmain p{margin:22px 0 0;max-width:30ch;font-size:clamp(16px,2vw,20px);line-height:1.4;color:#b3b3b3}
.hbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hpill{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:0;padding:15px 36px;font-family:inherit;font-size:16px;font-weight:700;line-height:1;cursor:pointer;will-change:transform;transition:transform .12s,background .15s,opacity .2s}
.hpill.pri{background:#fff;color:#000}
.hpill:hover:not(:disabled){transform:scale(1.04)}
.hpill:not(.pri):hover:not(:disabled){background:rgba(255,255,255,.26)}
.hpill.pri:hover:not(:disabled){background:#e6eaff}   /* Jogar da tela inicial: mesmo azulado do Jogar do dashboard */
.hpill:focus-visible,.hlink:focus-visible,.hback:focus-visible,.hles:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hpill:disabled{opacity:.35;cursor:default}
/* botoes de texto: sem anel/contorno de foco (o foco pelo teclado aparece como fundo mais claro). "body" na frente garante prioridade sobre os .x-root :focus-visible */
body .hpill:focus-visible,body .tbtn:focus-visible,body .r-btn:focus-visible{outline:0;background:rgba(255,255,255,.3)}
body .d-btn:focus-visible{outline:0;--bg:rgba(255,255,255,.3)}   /* o fundo do .d-btn vem de --bg (draft.css) */
body .c-play:focus-visible,body .c-mng:focus-visible,body .nc-ok:focus-visible,body .nc-back:focus-visible{outline:0;background:rgba(255,255,255,.3)!important}
body .r-sell:focus-visible{background:rgba(220,70,70,.42)}
body .hmhead:focus-visible{outline:0;background:#242424}   /* modos de jogo: sem contorno (o cartao tem overflow:hidden e o .tap encolhe o botao, o que deixava aparecer linhas brancas nas laterais); o foco aparece como fundo mais claro, igual ao hover */
body .hpill.pri:focus-visible{background:#fff}                    /* foco automatico ao entrar (sem teclado): continua branco */
html.kbd body .hpill.pri:focus-visible{background:#dfe5ff}       /* foco por teclado (Tab/setas): azulado claro */
body .tbtn.pri:focus-visible{background:#dfe5ff}
body .d-btn.pri:focus-visible{--bg:#e6eaff}
#load{margin-top:24px;min-height:18px;font-size:13px;color:#727272}
.hback{background:none;border:0;padding:0 0 22px;color:#b3b3b3;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:color .15s}
.hback:hover{color:#fff}
/* modos de jogo */
.hmodes{display:flex;flex-direction:column;gap:12px;width:min(660px,100%)}
.hmode{background:#181818;border-radius:10px;overflow:hidden}
.hmhead{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;box-sizing:border-box;padding:22px 24px;background:transparent;border:0;color:#fff;font-family:inherit;text-align:left;cursor:pointer;transition:background .15s}
.hmhead:hover{background:#242424}
.hmt{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em}
.hmd{display:block;margin-top:4px;font-size:14px;font-weight:400;color:#b3b3b3}
.hma{flex:none;color:#b3b3b3;transition:transform .25s ease,color .15s}
.hmhead:hover .hma{color:#fff}
#hfree:hover .hma{transform:translateX(3px)}
.hacc.open .hma{transform:rotate(180deg);color:#fff}
/* aulas: painel que expande dentro do proprio cartao */
.hpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.hacc.open .hpanel{grid-template-rows:1fr}
.hpin{min-height:0;overflow:hidden}
#hlist{padding:2px 12px 14px;border-top:1px solid #2a2a2a}
.hsec{padding-top:12px}
.hsech{display:flex;justify-content:space-between;align-items:center;padding:4px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#b3b3b3}
.hsech em{font-style:normal;font-weight:700;letter-spacing:.08em;color:#727272}
.hsec.off .hsech{color:#727272}
.hles{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:12px;border:0;border-radius:8px;background:transparent;color:#fff;font-family:inherit;text-align:left;cursor:pointer;transition:background .15s}
.hles:hover{background:#2a2a2a}
.hck{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-sizing:border-box;border:1.5px solid #727272;border-radius:50%;font-size:12px;font-weight:900;color:#000}
.hles.done .hck{background:#fff;border-color:#fff}
.hlb{flex:1;min-width:0}
.hlt{display:block;font-size:16px;font-weight:700}
.hld{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:#b3b3b3}
.hlm{flex:none;font-size:12px;font-weight:700;color:#b3b3b3;white-space:nowrap}
@media (max-width:480px){.hlm{display:none}.hmhead{padding:18px}}
.hlm i{display:block;margin-top:3px;font-style:normal;font-weight:600;color:#727272;text-align:right}

/* ---- barra superior (jogando): botoes de icone, discretos ---- */
#topbar{gap:8px}
#topbar .ibtn{width:40px;height:40px;padding:0;margin:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(18,18,18,.72);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
#topbar .ibtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);transform:none}
#topbar .ibtn:active{transform:scale(.93)}
#topbar .ibtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
#topbar .ibtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#topbar #camcfg{height:40px;box-sizing:border-box;padding:0 4px 0 16px;background:rgba(18,18,18,.72);border:1px solid rgba(255,255,255,.12)}
#topbar #camcfg button{padding:7px 14px}

/* ---- barras de rolagem minimalistas (todas as areas roláveis) ---- */
@supports (-moz-appearance:none){*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent}}   /* Firefox; Chrome/Edge/Safari usam o ::-webkit-scrollbar abaixo (sem setinhas) */
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border:3px solid transparent;border-radius:10px;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.42);border:3px solid transparent;background-clip:content-box}

/* ---- animacao ao clicar: apertar e voltar (curta e simples; sem brilho) ---- */
@keyframes tap{0%,100%{scale:1}50%{scale:.975}}
.tap{animation:tap .28s ease-in-out}
/* ---- REGRA GERAL ANTI-TREMIDA (texto que mexe por um instante ao clicar / trocar de pagina) ----
   Causa: o .tap (scale) roda em QUALQUER botao (tapFlash, js/game/home.js) e as animacoes de entrada (hin) terminam; nesses momentos o navegador cria/desfaz a camada do elemento e re-rasteriza o texto em volta, que da um pulinho.
   Cura: camada FIXA desde o inicio (will-change), assim o clique/fim da animacao nao troca de camada. Vale para todo botao e todo painel (.c-p); tela ou botao novo ja nasce protegido, nao precisa corrigir um por um.
   :where() = especificidade zero: qualquer classe com seu proprio will-change (ex.: .hpill, .mz-r, .m-tag.ch) continua mandando. Um botao so deixa de ter camada se ganhar will-change:auto na propria classe (ex.: .m-tag.ch em match.css). */
:where(button){will-change:transform,scale}
:where(.c-p){will-change:transform}   /* so transform: will-change em opacity cria "backdrop root" e some com o blur dos filhos (ver js/core/app.js) */
/* .nolayer = regiao que o JS RECRIA a cada atualizacao (cartas, listas, corpo de painel). Nunca ganha camada propria: camada criada/destruida a cada clique repinta o painel pai inteiro (e o texto do cabecalho treme). Vale tambem para os filhos e vence o will-change do app.js (inline) e dos botoes. Regiao nova que o JS recria com outerHTML/innerHTML? Ponha class="nolayer" na raiz dela. */
.nolayer,.nolayer *{will-change:auto!important}

/* ---- cadeado minimalista da camera ---- */
#topbar #camcfg .cs{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:96px}
#camcfg .cs svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- imagem de fundo da tela inicial (bem sutil; o degrade continua por baixo) ---- */
#home::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(../assets/img/home-bg.jpg) center right/cover no-repeat;opacity:.3}
@media (max-width:700px){#home::before{background-position:70% center}}

/* ---- aulas: escolha de lane ---- */
.hsech .hlink{padding:0;font-size:12px;letter-spacing:0}
.hles:disabled{opacity:.4;cursor:default}
.hles:disabled:hover{background:transparent}

/* ---- feed de reacoes da Jinx (esquerda, no meio) ---- */
#jxfeed{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.jx{display:flex;align-items:center;gap:12px;transform-origin:left center;animation:jxin .5s cubic-bezier(.34,1.56,.64,1) both}
.jx img{display:block;width:100px;height:100px;object-fit:cover;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.jxm{max-width:180px;padding:9px 14px;border-radius:14px;background:rgba(18,18,18,.92);color:#fff;font:800 14px/1.25 var(--ui);box-shadow:0 6px 18px rgba(0,0,0,.4);animation:jxmsg .35s .22s cubic-bezier(.2,.9,.3,1.2) both}
.jx.good .jxm{background:#fff;color:#000}
.jx.out{animation:jxout .3s ease forwards}
@keyframes jxin{from{opacity:0;transform:scale(.25) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes jxmsg{from{opacity:0;transform:translateX(-12px) scale(.85)}to{opacity:1;transform:none}}
@keyframes jxout{to{opacity:0;transform:translateX(-16px) scale(.9)}}
@media (max-width:600px){#jxfeed{left:8px;gap:10px}.jx img{width:72px;height:72px;border-radius:16px}.jxm{max-width:130px;font-size:13px;padding:8px 12px}}

/* ---- estatisticas (canto superior esquerdo): rotulo pequeno em cima, numero grande embaixo ---- */
#stats{display:grid;grid-template-columns:repeat(4,auto);gap:14px 26px;padding:14px 20px;border-radius:16px;background:rgba(18,18,18,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);line-height:1.1}
#stats .st{display:flex;flex-direction:column;gap:5px;min-width:0}
#stats .st>span{font-size:12px;font-weight:700;color:#b3b3b3;white-space:nowrap}
#stats .st b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
#stats .st small{margin-left:2px;font-size:12px;font-weight:700;color:#b3b3b3}
@media (max-width:700px){#stats{gap:10px 16px;padding:10px 14px;border-radius:14px}#stats .st b{font-size:17px}#stats .st>span{font-size:11px}}

/* ---- caixa da camera: mesma linguagem das estatisticas e dos botoes ---- */
#topbar #camcfg{gap:2px;padding:0 5px 0 16px;background:rgba(18,18,18,.72);border:1px solid rgba(255,255,255,.12)}
#topbar #camcfg .ct{margin-right:8px;font-size:13px;font-weight:700;letter-spacing:0;color:#b3b3b3}
#topbar #camcfg button{padding:7px 14px;font-size:13px}
#topbar #camcfg .cs{min-width:0;height:18px;margin-left:6px;padding:0 12px 0 14px;border-left:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#b3b3b3}