/* Elysium Treino 2P — edição para celular (página instalável).
   Tudo aqui vale só com body.m (tela estreita); em tablet/computador o visual é o mesmo do .exe. */
:root{--mbar:48px;--sheet:64px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
@media (display-mode:standalone){.fsBtn{display:none !important}}
body.ios .fsBtn{display:none !important}

/* ---------- tela inicial: instalar e imagens offline ---------- */
.pwa-box{margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.pwa-box h2{margin-top:0 !important}
.pwa-box p{margin:6px 0;color:var(--dim);font-size:14px}
.pwa-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.pwa-row .btn{padding:10px 14px;font-weight:700}
.pwa-row .btn.go{background:var(--accent2);border-color:var(--accent2);color:#1a1316}
.pwa-bar{height:8px;border-radius:5px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin-top:8px}
.pwa-bar i{display:block;height:100%;width:0;background:var(--accent2);transition:width .2s}
.pwa-st{font-size:13.5px !important;color:var(--text) !important}
.ios-tip{display:none}
body.ios .ios-tip{display:block}
#mtoast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--safe-b));z-index:90;background:#2a2030;border:1px solid var(--accent2);color:var(--text);border-radius:10px;padding:10px 14px;font-size:14px;max-width:calc(100vw - 32px);box-shadow:0 8px 30px #000c;display:none}
#mtoast.show{display:block}
#mtoast button{margin-left:10px}

/* ---------- barra de cima (só no jogo) ---------- */
#mbar{display:none}
body.m.ingame #mbar{display:flex;position:fixed;left:0;right:0;top:0;z-index:35;height:calc(var(--mbar) + var(--safe-t));padding:var(--safe-t) max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));align-items:center;gap:6px;background:#140e11f2;border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
#mbar .mt{font:400 17px var(--display);color:var(--accent2);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mbar button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;padding:7px 10px;min-height:36px;cursor:pointer;white-space:nowrap}
#mbar button[aria-pressed=true]{border-color:var(--accent2);color:var(--accent2)}
#mbar .tu-tog{font-size:0;padding:7px 10px}
#mbar .tu-tog::before{content:"🎓 Tutorial";font-size:13.5px}
#mbar .tu-tog[aria-pressed=true]{background:#1d3326;border-color:var(--ok);color:var(--ok)}

/* ---------- jogo: uma coluna, mesa rolando, decisões presas embaixo ---------- */
body.m{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
body.m #ver{display:none}
body.m #game{display:block;padding-top:calc(var(--mbar) + var(--safe-t) + 6px);padding-bottom:calc(var(--sheet) + 14px)}
body.m #board{gap:6px}

/* painel de decisões = folha presa embaixo */
body.m #side{position:fixed !important;left:0;right:0;bottom:0;top:auto;z-index:34;max-height:none;overflow:visible;display:block;padding:0 max(8px,env(safe-area-inset-right,0px)) calc(8px + var(--safe-b)) max(8px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,#0f0b0d00,#0f0b0d 14px)}
body.m #prompt{max-height:46vh;max-height:46dvh;margin-top:10px;border-radius:12px;box-shadow:0 -8px 28px #000c;overscroll-behavior:contain}
body.m #prompt h3{font-size:16.5px}
body.m #prompt p{font-size:14.5px}
body.m #prompt .wait{margin:0;font-size:14px}
body.m .opts .btn,body.m .opts .btn.off{min-height:44px;font-size:15px;padding:10px 12px;line-height:1.3}
body.m .opts{gap:6px}

/* carta jogada / anúncio da IA / tutorial: sobem por cima da mesa quando pedem "Seguir" */
body.m #playcol{display:none}
body.m.m-over #playcol{display:flex;position:fixed;z-index:33;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));top:calc(var(--mbar) + var(--safe-t) + 8px);bottom:calc(var(--sheet) + 8px);max-height:none;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 0 0 100vmax #000b;overscroll-behavior:contain}
body.m.m-over:not(.m-cards) #playcol .loghead,
body.m.m-over:not(.m-cards) #playcol > h4,
body.m.m-over:not(.m-cards) #recent,
body.m.m-over:not(.m-cards) #mrev{display:none}
body.m.m-over:not(.m-cards):not(.m-spot) #spot{display:none}
body.m.m-over:not(.m-cards):not(.m-tutor) #tutor{display:none !important}
body.m #playcol .tuhead{display:none}
body.m #playcol .spot{display:block !important;text-align:center}
body.m #playcol .sp-card{max-width:300px;margin:0 auto}
body.m #playcol .sp-img{max-height:30vh;max-height:30dvh;width:auto;max-width:100%}
body.m #playcol .spot.wait .sp-go,body.m #playcol .tutor.wait .tu-go{position:sticky;bottom:0;z-index:2;box-shadow:0 -10px 18px var(--bg)}
body.m #playcol .sp-name{display:block}
body.m #playcol .sp-use{text-align:left;margin:0 0 8px}
body.m #playcol .sp-go{min-height:52px;font-size:18px}
body.m.m-spot #playcol{padding-bottom:0}
body.m .sp-use th{font-size:11.5px;padding-right:6px}
body.m .sp-use td{font-size:13.5px}
body.m #playcol .spot.notice{text-align:left}
body.m #tutor{order:-2}
body.m .tu-go{min-height:50px}
body.m.m-cards #playcol .loghead .fsBtn{display:none}
#mrev h4{margin-top:8px}

/* registro em tela própria */
body.m #mlog{display:none}
body.m.m-log #mlog{display:flex;flex-direction:column;position:fixed;z-index:33;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));top:calc(var(--mbar) + var(--safe-t) + 8px);bottom:calc(var(--sheet) + 8px);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 0 0 100vmax #000b}
body.m #mlog #log{min-height:0;flex:1 1 auto;font-size:14.5px}
body.m #mlog #logBig{display:none}

/* mesa compacta */
body.m .side{padding:8px}
body.m .side header{gap:5px}
body.m .side header b{font-size:15px}
body.m .side header .deck{font-size:12px}
body.m .stat{font-size:11.5px;padding:1px 5px}
body.m .poolbox{padding:2px 9px 2px 6px}
body.m .zone h4{margin:5px 0 3px}
body.m .vrow{gap:6px}
body.m .vc{width:84px;min-height:112px;padding:5px}
body.m .vc.small{width:70px;min-height:92px}
body.m .vc.locked{margin:0 14px}
body.m .vc.small.locked{margin:0 11px}
body.m .vc-name{font-size:11.5px}
body.m .vc-info,body.m .vc-disc{font-size:10px}
body.m .vc-blood{font-size:12px;padding:0 6px;right:4px;bottom:4px}
body.m .zone.table{grid-template-columns:1fr 1fr;gap:6px}
body.m .tz{min-height:0;padding:5px 6px}
body.m .tz:has(.tc){min-height:0}
body.m .tz:not(:has(.tc)){display:none}
body.m .zone.table:not(:has(.tc)){display:none}
body.m .tc{width:64px;height:80px}
body.m .mid.pbar{padding:6px 6px}
body.m .pturn{font-size:14px;margin-right:4px;width:100%;text-align:center}
body.m .pchip{font-size:11px;padding:1px 6px}
body.m .parr{display:none}
body.m .pstep{font-size:13px}
/* mão: uma faixa com rolagem para o lado */
body.m .hand{padding:8px}
body.m .hand .hrow{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;-webkit-overflow-scrolling:touch}
body.m .hc{flex:none;width:100px;min-height:120px;scroll-snap-align:start}
body.m .hc-name{font-size:12px}

/* janelas */
body.m .modal{padding:8px;padding-top:calc(8px + var(--safe-t))}
body.m .modal .box{max-height:calc(100dvh - 24px);padding:12px}
body.m .vw-img{width:100%;max-height:62vh;max-height:62dvh}
body.m .ilist{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
body.m .ilist .btn{min-height:44px}
body.m.log-big #log{position:static}

/* tela inicial no celular */
body.m #setup{padding-top:calc(16px + var(--safe-t));padding-bottom:calc(40px + var(--safe-b))}
body.m .setup-box h1{font-size:26px}
body.m .opt{padding:12px}
body.m .chk{padding:6px 0}
body.m .chk input{width:20px;height:20px;vertical-align:-4px;margin-right:6px}

/* celular deitado: decisões à direita, mesa à esquerda */
@media (orientation:landscape) and (max-height:520px){
  body.m #game{padding-bottom:10px;padding-right:calc(min(46vw,380px) + 10px)}
  body.m #side{left:auto;right:0;top:calc(var(--mbar) + var(--safe-t));bottom:0;width:min(46vw,380px);background:var(--bg);border-left:1px solid var(--line);padding-top:0}
  body.m #prompt{max-height:calc(100dvh - var(--mbar) - var(--safe-t) - 24px);box-shadow:none}
  body.m.m-over #playcol,body.m.m-log #mlog{bottom:8px;right:calc(min(46vw,380px) + 8px)}
  body.m #playcol .sp-img{max-height:56dvh}
}

/* esconder/mostrar a folha de decisões */
#mSheetTog{display:none}
body.m.ingame #mSheetTog{display:block;margin:8px auto 0;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:14px;font:inherit;font-size:12.5px;padding:3px 14px;min-height:28px}
body.m #mSheetTog.pend{color:#1a1316;background:var(--accent2);border-color:var(--accent2);font-weight:700;animation:mPulse 1.4s ease-in-out infinite}
@keyframes mPulse{50%{box-shadow:0 0 0 5px #e2b04a44}}
@media (prefers-reduced-motion:reduce){#mSheetTog.pend{animation:none}}
body.m.m-min #prompt{display:none}
body.m #prompt{margin-top:6px}
body.m #prompt{max-height:42vh;max-height:42dvh}
/* sem decisão pendente e com a carta da IA na tela: a folha some (o botão Seguir está na própria carta) */
body.m.m-over:not(.m-choice) #side{display:none}
body.m:not(.m-choice) #mSheetTog{display:none !important}
@media (max-width:380px){#mbar .mt{display:none}#mbar button{padding:7px 8px;font-size:13px}#mbar .tu-tog::before{font-size:13px}}
@media (orientation:landscape) and (max-height:520px){
  body.m #prompt{max-height:calc(100dvh - var(--mbar) - var(--safe-t) - 24px)}
  body.m.ingame #mSheetTog{display:none !important}
  body.m.m-min #prompt{display:block}
}
@media (orientation:landscape) and (max-height:520px){
  body.m.m-over:not(.m-choice) #playcol{right:max(8px,env(safe-area-inset-right,0px))}
  body.m.m-over:not(.m-choice) #game{padding-right:0}
}

/* seletor de língua (PT | EN) */
.langsw{display:flex;justify-content:flex-end;gap:0;margin:0 0 10px auto;width:max-content;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.langsw a{padding:6px 12px;min-width:44px;text-align:center;color:var(--dim);text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:.04em}
.langsw a+a{border-left:1px solid var(--line)}
.langsw a.on{background:var(--accent2);color:#1a1316}
.langsw a:not(.on):hover,.langsw a:focus-visible{color:var(--text);background:var(--panel2);outline:none}
.setup-box .langsw{float:right;margin:0 0 6px 10px}