html,body.play{height:100%;margin:0;overflow:hidden;background:#07110c;overscroll-behavior:none}
#canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;background:#07110c;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;z-index:2;
  background:radial-gradient(900px 500px at 50% 20%,#21412f 0,#0b1611 70%)}
.screen .panel{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.screen h1{font-size:2rem;text-align:center}
.screen .muted{text-align:center}
.screen form{margin-top:12px}
.links{text-align:center;font-size:.9rem;margin:12px 0 0}
.load{text-align:center}
.bar{height:14px;border-radius:99px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;margin:18px 0 10px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#b98a3c,#f6d999);transition:width .25s}
.tip{min-height:3em;font-size:.92rem;margin-top:14px}
/* Celular em pé durante o jogo: pede para deitar (o jogo é horizontal). */
.rotate{display:none}
@media (orientation:portrait) and (pointer:coarse){
  body.playing .rotate{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:rgba(7,17,12,.96);color:#f3e7c4;font-size:1.1rem}
}
.rotate .phone{width:44px;height:76px;border:3px solid #e6c47f;border-radius:10px;animation:turn 1.8s ease-in-out infinite}
@keyframes turn{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.rotate .phone{animation:none;transform:rotate(-90deg)}}

/* ---- Portão: login e carregamento (cartão com arte à esquerda e formulário claro à direita) ---- */
@font-face{font-family:"Cinzel";src:url(../fonts/Cinzel.ttf) format("truetype");font-display:swap}
.screen{flex-direction:column;justify-content:flex-start;overflow:auto;padding-top:60px;background:radial-gradient(1000px 520px at 30% 0%,#24452f 0,#0b1611 65%),#0b1611}
.gate-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;font-size:.92rem}
.gate-top .brand{font-family:"Cinzel",Georgia,serif;color:var(--gold2);text-decoration:none;font-size:1.15rem;letter-spacing:.04em}
.gate-top nav a{color:var(--muted);text-decoration:none}
.gate-top nav a:hover{color:var(--gold2)}
.gate{display:grid;grid-template-columns:5fr 6fr;width:min(920px,100%);min-height:540px;margin:auto 0;flex-shrink:0;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(227,184,102,.25)}
.eyebrow{margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#c99b4a}
.gate-art{position:relative;display:flex;flex-direction:column;padding:32px 30px 22px;color:#e9e2cc;
  background:radial-gradient(420px 320px at 50% 88%,rgba(227,184,102,.22),transparent 70%),
             repeating-radial-gradient(circle at 120% -20%,rgba(255,255,255,.035) 0 2px,transparent 2px 26px),
             linear-gradient(160deg,#1c3a2b,#0f2219)}
.gate-claim{font-family:"Cinzel",Georgia,serif;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.15;color:#f6e7bf;margin:0 0 12px}
.gate-sub{margin:0;color:#b9c2ae;font-size:.95rem;max-width:30ch}
.gate-hero{width:min(220px,70%);height:auto;aspect-ratio:1;object-fit:contain;margin:auto auto 6px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.gate-foot{margin:8px 0 0;font-size:.78rem;color:#8fa08b;text-align:center}
.gate-form{background:linear-gradient(180deg,#fbf6e9,#f3ead4);color:#26332a;padding:44px 44px 28px;display:flex;flex-direction:column;justify-content:center}
.gate-form h1{font-family:"Cinzel",Georgia,serif;color:#1d3326;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15;margin:0 0 8px;text-align:left}
.gate-form .muted{color:#69735f;text-align:left;margin:0 0 18px;font-size:.95rem}
.gate-form label{display:block;font-size:.82rem;font-weight:700;color:#3a4a3e;margin:12px 0 6px}
.gate-form input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #d6cbb0;background:#fffdf7;color:#1d2a21;font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.gate-form input:focus{border-color:#c99b4a;box-shadow:0 0 0 3px rgba(201,155,74,.25)}
.pass-row{position:relative}
.pass-row input{padding-right:84px}
.pass-row .show{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8a6a2c;font:600 .82rem system-ui,sans-serif;padding:8px 10px;cursor:pointer;border-radius:8px}
.pass-row .show:hover{background:#f1e5c6}
.btn.wide{width:100%;margin-top:20px;padding:13px 16px;font-size:1rem;border:0;border-radius:10px;cursor:pointer;color:#2a1e08;font-weight:700;
  background:linear-gradient(180deg,#f2cf7f,#d9a64a);box-shadow:0 6px 16px rgba(185,138,60,.35);transition:transform .1s,filter .15s}
.btn.wide:hover{filter:brightness(1.05)}
.btn.wide:active{transform:translateY(1px)}
.btn.wide:disabled{opacity:.6;cursor:wait}
.gate-form .msg{min-height:1.4em;margin:12px 0 0;font-size:.9rem;color:#4b5a4c}
.gate-form .msg.err{color:#b4442c}
.switch{margin:14px 0 0;font-size:.92rem;color:#56614f}
.link{border:0;background:none;padding:0;color:#9b6d1f;font:inherit;font-weight:700;cursor:pointer}
.link:hover{text-decoration:underline}
.fine{margin:10px 0 0;font-size:.78rem}
.gate-form .btn.ghost{color:#6b4f1c;border-color:#d6cbb0}
.hidden{display:none !important}
/* Carregamento */
.load-card{min-height:420px}
.emblem-side{align-items:center;justify-content:center}
.emblem-side .eyebrow{align-self:flex-start}
.emblem{position:relative;width:210px;height:210px;margin:auto;display:grid;place-items:center}
.emblem img{width:150px;height:150px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.emblem .ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(227,184,102,.55);animation:spin 14s linear infinite}
.emblem .ring::after{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(227,184,102,.25);
  background:radial-gradient(circle,rgba(227,184,102,.16),transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.bar-head{display:flex;justify-content:space-between;font-size:.85rem;font-weight:600;color:#3a4a3e;margin-top:10px}
.gate-form .bar{background:#e8dcc0;border-color:#d6cbb0;margin:8px 0 14px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;margin:4px 0 0;font-size:.78rem;color:#8a917f;text-align:center}
.steps i{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 6px;border-radius:50%;border:2px solid #d6cbb0;background:#fffdf7;font-style:normal;font-weight:700}
.steps li.on{color:#3a4a3e;font-weight:700}
.steps li.on i{border-color:#c99b4a;box-shadow:0 0 0 4px rgba(201,155,74,.2)}
.steps li.done i{background:#c99b4a;border-color:#c99b4a;color:#fff}
.steps li.done i::before{content:"✓"}
.gate-form .tip{color:#69735f;text-align:left;margin-top:16px}
@media (max-width:760px){
  .gate{grid-template-columns:1fr;min-height:0}
  .gate-art{padding:20px 20px 14px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .gate-art .eyebrow,.gate-sub,.gate-foot{display:none}
  .gate-claim{flex:1;font-size:1.25rem;margin:0}
  .gate-hero{width:72px;margin:0;order:-1;animation:none}
  .gate-form{padding:24px 20px 20px}
  .emblem-side{flex-direction:column}
  .emblem{width:120px;height:120px}.emblem img{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){.gate-hero,.emblem .ring{animation:none}}
.google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border-radius:10px;border:1px solid #d6cbb0;
  background:#fff;color:#2b2f2c;font:600 .95rem system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s}
.google:hover{background:#faf6ec;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.google:disabled{opacity:.6;cursor:wait}
.or{display:flex;align-items:center;gap:10px;margin:16px 0 0;color:#8a917f;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}
.or::before,.or::after{content:"";flex:1;height:1px;background:#ddd2b8}