/* TELA DE RESET B (03/10): festa + guia. Desenho em src/ui/reset-tela.js.
   O cartão é uma coluna: corpo que rola + rodapé com o botão sempre à vista (celular deitado e texto 130%). */
#resetModal.reset-tela-fundo{background:radial-gradient(ellipse at 50% 35%,rgba(70,48,14,.55),rgba(5,6,10,.92) 70%)}
#resetModal .reset-tela{position:relative;display:flex;flex-direction:column;width:min(620px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  overflow:hidden;padding:0!important;text-align:left;color:#e9dcc2;background:linear-gradient(180deg,#1b1610,#100d09)!important;border:1px solid #7a5f2f!important;border-radius:12px;
  box-shadow:0 0 0 1px #2a2114 inset,0 20px 60px rgba(0,0,0,.6),0 0 60px rgba(214,163,69,.15)}
#resetModal .reset-tela *{box-sizing:border-box}
.reset-tela-corpo{position:relative;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:22px 22px 10px;overscroll-behavior:contain}
.reset-tela-rodape{flex:none;padding:8px 22px 14px;border-top:1px solid #2a2218;background:#100d09}
.reset-tela-x{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid #4a3a22;background:#16120c;color:#c9a463;
  font-size:20px;line-height:1;cursor:var(--cur-mao,pointer);display:grid;place-items:center;padding:0}
.reset-tela-x:hover,.reset-tela-x:focus-visible{color:#f6d68c;border-color:#d6a345;outline:none}
/* 10/10 (print do autor): letra Cinzel (@font-face em styles/salao.css) nos títulos; o PARABÉNS ganha filetes dos lados. */
.reset-tela-sobre{display:flex;align-items:center;justify-content:center;gap:10px;color:#e0b25a;letter-spacing:3px;line-height:1.5;
  font:700 calc(11px*var(--text-scale,1)) "Cinzel",Georgia,serif;padding:0 40px}
.reset-tela-sobre>span{flex:0 1 auto;min-width:0;text-align:center}
.reset-tela-sobre:before,.reset-tela-sobre:after{content:"";flex:1 1 0;max-width:46px;min-width:0;height:1px;background:linear-gradient(90deg,transparent,#d6a345)}
.reset-tela-sobre:after{background:linear-gradient(270deg,transparent,#d6a345)}
.reset-tela-titulo{margin:6px 0 12px;text-align:center;font:700 calc(22px*var(--text-scale,1)) "Cinzel",Georgia,serif;letter-spacing:1px;color:#f3dfb0;text-shadow:0 2px 14px rgba(214,163,69,.35)}
.reset-tela-sub{margin:8px auto 0;text-align:center;color:#b8ad9a;font-size:calc(13px*var(--text-scale,1));line-height:1.45;max-width:440px}
.reset-tela-nota{margin:8px auto 0;text-align:center;color:#a99d88;font-size:calc(11.5px*var(--text-scale,1));line-height:1.4;max-width:460px}
/* tela 1 */
.reset-tela-raios{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% var(--rt-raios-y,150px),rgba(246,214,140,.09) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% var(--rt-raios-y,150px),#000 0,transparent 340px);mask:radial-gradient(circle at 50% var(--rt-raios-y,150px),#000 0,transparent 340px)}
.reset-tela-palco{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
/* O herói: caixa do retrato + espaço reservado para a moldura (que sai 34% para cada lado) + auréola atrás. */
.reset-tela-heroi{--rt-ret:112px;position:relative;flex:none;display:grid;place-items:center;margin:14px 0 6px}
.reset-tela-heroi.com-moldura{--rt-ret:100px;margin:calc(var(--rt-ret)*.36 + 6px) 0 calc(var(--rt-ret)*.36 + 2px)}
.reset-tela-aureola{position:absolute;left:50%;top:50%;width:calc(var(--rt-ret)*1.9);height:calc(var(--rt-ret)*1.9);translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(246,214,140,.34) 0,rgba(214,163,69,.14) 42%,transparent 70%)}
#resetModal .reset-tela-retrato{position:relative;width:var(--rt-ret);height:var(--rt-ret);margin:0;border-radius:12px;overflow:hidden;border:2px solid #d6a345;box-shadow:0 0 30px rgba(214,163,69,.5);background:#0c0a07;flex:none}
#resetModal .reset-tela-retrato.has-col-frame{overflow:visible!important;border-color:transparent;box-shadow:none;background:transparent}
/* RESET #N: Cinzel com ouro em degradê (sem arte), contorno escuro para ler sobre os raios e um brilho que passa uma vez. */
.reset-tela-grande{position:relative;z-index:4;display:flex;align-items:baseline;justify-content:center;gap:.28em;margin:4px 0 0;line-height:1;
  font:900 calc(44px*var(--text-scale,1)) "Cinzel",Georgia,serif;letter-spacing:.06em;color:#f6d68c;filter:drop-shadow(0 2px 0 #3a250a) drop-shadow(0 0 16px rgba(246,190,90,.45))}
.reset-tela-grande>span{background:linear-gradient(100deg,#b7832c 0%,#f7dc95 28%,#fff6d6 42%,#e7b65a 56%,#a8741f 78%,#f3cf7a 100%);background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:resetTelaBrilho 1.6s ease-out .2s 1 both}
.reset-tela-grande-num{font-size:1.18em}
.reset-tela-grande-num small{font-size:.62em;margin-right:.04em;vertical-align:.32em}
@keyframes resetTelaBrilho{from{background-position:0 0}to{background-position:100% 0}}
.reset-tela-grande:after{content:"";position:absolute;left:50%;bottom:-9px;width:min(240px,70%);height:2px;translate:-50% 0;background:linear-gradient(90deg,transparent,#d6a345,transparent);filter:none}
.reset-tela-palco .reset-tela-sub{margin-top:16px}
.reset-tela-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 2px}
.reset-tela-chip{background:#16120c;border:1px solid #3d3020;border-radius:20px;padding:5px 11px;font-size:calc(11.5px*var(--text-scale,1));color:#f0e2cc}
.reset-tela-marco{width:100%;margin-top:12px;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#2a2010,#16120c);border:1px solid #6b5228;border-radius:8px;padding:8px 12px;text-align:left}
.reset-tela-marco img{flex:none;width:34px;height:34px;object-fit:contain}
.reset-tela-marco-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:calc(11.5px*var(--text-scale,1));color:#eadbc0;line-height:1.3;overflow-wrap:anywhere}
.reset-tela-marco-texto strong{font-size:calc(13.5px*var(--text-scale,1));color:#f0e2cc;font-weight:700}
.reset-tela-marco b{color:#f6d68c}
.reset-tela-falta{color:#c9a463}
.reset-tela-marco .reset-tela-barra{flex:none;margin-top:4px}
.reset-tela-marco.ganho{border-color:#d6a345;box-shadow:0 0 16px rgba(214,163,69,.3)}
/* 0550: Sorte de Joias (o total e o próximo marco) */
.reset-tela-sorte{width:100%;margin-top:8px;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#10202a,#0d1418);border:1px solid #2f5a6e;border-radius:8px;padding:8px 12px;text-align:left}
.reset-tela-sorte img{flex:none;width:34px;height:34px;object-fit:contain}
.reset-tela-sorte-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:calc(11.5px*var(--text-scale,1));color:#cfe3ea;line-height:1.3;overflow-wrap:anywhere}
.reset-tela-sorte-texto strong{font-size:calc(13.5px*var(--text-scale,1));color:#9fe3ff}
.reset-tela-sorte .reset-tela-barra{flex:none;margin-top:4px}
.reset-tela-sorte .reset-tela-barra i{background:linear-gradient(90deg,#2a7fa3,#9fe3ff)}
.reset-tela-barra{flex-basis:100%;height:8px;border-radius:5px;background:#0d0b08;border:1px solid #3d3020;margin-top:6px;overflow:hidden}
.reset-tela-barra i{display:block;height:100%;background:linear-gradient(90deg,#9c6d22,#f3cf7a)}
/* tela 2 */
.reset-tela-passos{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.reset-tela-passo{display:flex;align-items:center;gap:10px;background:#16120c;border:1px solid #3d3020;border-radius:8px;padding:8px 10px;min-width:0}
.reset-tela-num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#2b2112;border:1px solid #d6a345;color:#f6d68c;font-weight:800;font-size:calc(12px*var(--text-scale,1))}
.reset-tela-icone{flex:none;width:30px;height:30px;object-fit:contain}
.reset-tela-brasao{flex:none;width:30px;height:34px;display:grid;place-items:center}.reset-tela-brasao svg{width:100%;height:100%}
.reset-tela-passo-texto{flex:1;min-width:0}
.reset-tela-passo-texto strong{display:block;font-size:calc(13px*var(--text-scale,1));color:#f0e2cc;line-height:1.3;overflow-wrap:anywhere}
.reset-tela-passo-texto small{display:block;font-size:calc(11px*var(--text-scale,1));color:#a99d88;line-height:1.3;overflow-wrap:anywhere}
.reset-tela-ir{flex:none;border:1px solid #d6a345;background:linear-gradient(180deg,#3b2c12,#22190b);color:#f6d68c;font-weight:800;letter-spacing:.8px;
  border-radius:6px;padding:7px 10px;font-size:calc(11px*var(--text-scale,1));cursor:var(--cur-mao,pointer);white-space:nowrap;min-height:32px}
.reset-tela-ir:hover,.reset-tela-ir:focus-visible{background:#4a3612;outline:none}
.reset-tela-duas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reset-tela-caixa{background:#14110c;border:1px solid #33291b;border-radius:8px;padding:10px 11px;min-width:0}
.reset-tela-caixa h3{margin:0 0 6px;font-size:calc(10.5px*var(--text-scale,1));letter-spacing:1.4px;color:#d6a345;text-transform:uppercase}
.reset-tela-caixa ul{margin:0;padding:0;list-style:none}
.reset-tela-caixa li{position:relative;padding-left:16px;margin:3px 0;font-size:calc(12px*var(--text-scale,1));line-height:1.35;color:#d8ccb6;overflow-wrap:anywhere}
.reset-tela-caixa li:before{content:"";position:absolute;left:2px;top:.45em;width:7px;height:7px;border-radius:50%;background:#7fbf6a}
.reset-tela-caixa.muda li:before{background:#d6a345}
/* rodapé */
.reset-tela-principal{display:block;width:100%;border:0;border-radius:8px;padding:12px;font-weight:900;letter-spacing:1.5px;font-size:calc(13px*var(--text-scale,1));cursor:var(--cur-mao,pointer);
  color:var(--botao-ouro-texto);background:var(--botao-ouro-fundo);box-shadow:0 0 18px rgba(214,163,69,.35)}
.reset-tela-principal:focus-visible{outline:2px solid #fff1c4;outline-offset:2px}
.reset-tela-nav{display:flex;gap:8px}.reset-tela-nav .reset-tela-principal{flex:2}
.reset-tela-voltar{flex:1;border:1px solid #3d3020;background:transparent;color:#c9a463;border-radius:8px;padding:11px 8px;font-weight:800;letter-spacing:1.2px;font-size:calc(12px*var(--text-scale,1));cursor:var(--cur-mao,pointer)}
.reset-tela-etapas{display:flex;justify-content:center;gap:6px;margin-top:8px}
.reset-tela-etapas i{width:8px;height:8px;border-radius:50%;background:#3d3020}.reset-tela-etapas i.on{background:#d6a345}
@media (max-width:520px){
  .reset-tela-corpo{padding:16px 12px 8px}.reset-tela-rodape{padding:8px 12px 12px}
  .reset-tela-duas{grid-template-columns:1fr}
  .reset-tela-passo{flex-wrap:wrap}.reset-tela-passo-texto{flex:1 1 calc(100% - 80px)}.reset-tela-ir{margin-left:auto}
  .reset-tela-grande{font-size:calc(36px*var(--text-scale,1))}
  .reset-tela-sobre{letter-spacing:1.6px;gap:8px}
}
@media (max-height:500px){
  #resetModal .reset-tela{width:min(860px,100%);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .reset-tela-corpo{padding:12px 16px 6px}.reset-tela-rodape{padding:6px 16px 8px}
  .reset-tela-heroi{--rt-ret:80px;margin:6px 0 4px}.reset-tela-heroi.com-moldura{--rt-ret:68px}
  .reset-tela-raios{--rt-raios-y:100px}
  .reset-tela-grande{font-size:calc(30px*var(--text-scale,1))}.reset-tela-palco .reset-tela-sub{margin-top:12px}
  .reset-tela-etapas{display:none}
  .reset-tela.passo-2 .reset-tela-passos{display:grid;grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.reset-tela *{transition:none!important;animation:none!important}}
/* Reset manual (0196): a caixa da aba de pontos e o botão no cartão da área. */
.reset-auto-row{margin-top:12px}
.reset-possivel{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0 2px;padding:7px 10px;border:1px solid #d6a345;border-radius:8px;cursor:var(--cur-mao,pointer);text-align:left;
  background:linear-gradient(180deg,#3b2c12,#1d150a);color:#f6d68c;box-shadow:0 0 14px rgba(214,163,69,.35);animation:resetPossivelBrilho 2.4s ease-in-out infinite}
.reset-possivel[hidden]{display:none!important}
.reset-possivel img{flex:none;width:24px;height:24px;object-fit:contain}
.reset-possivel span{min-width:0;display:flex;flex-direction:column}
.reset-possivel strong{font-size:calc(11.5px*var(--text-scale,1));letter-spacing:1px;line-height:1.2}
.reset-possivel small{font-size:calc(10px*var(--text-scale,1));color:#c9b48a;line-height:1.2}
.reset-possivel:focus-visible{outline:2px solid #fff1c4;outline-offset:2px}
@keyframes resetPossivelBrilho{50%{box-shadow:0 0 22px rgba(246,214,140,.6)}}
@media (prefers-reduced-motion:reduce){.reset-possivel{animation:none}}
/* Celular em pé: o cartão da área fica estreito; o botão vira uma pílula de uma linha só, sem cobrir a arena. */
@media (max-width:520px){.reset-possivel{width:max-content;max-width:calc(100vw - 48px);padding:6px 10px}.reset-possivel strong,.reset-possivel small{white-space:nowrap}}