/* Ludo Arena — visual do site (madeira + areia do deserto), pensado primeiro para celular */
:root{
  --madeira:#6b4423; --madeira2:#4a2c14; --madeira3:#3b220f; --madeiraClara:#a8723f;
  --areia:#f2c995; --areia2:#e2a76a; --creme:#fff3dc; --txt:#3b2210; --txt2:#7a5232;
  --verm:#d8232a; --azul:#4f8fd6; --amar:#f5c518; --verde:#5cb83a; --ouro:#ffcb2e;
  --ok:#2b7a17; --erro:#b3141b;
  --titulo:"Lilita One","Arial Black","Trebuchet MS",sans-serif;
  --corpo:"Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--corpo);color:var(--txt);min-height:100vh;font-size:16px;line-height:1.45;
  background:#2b1a0d repeating-linear-gradient(90deg,#3a2413 0 18px,#33200f 18px 36px)}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:0}
.moldura{max-width:1040px;margin:0 auto;min-height:100vh;padding:10px max(10px,env(safe-area-inset-right,0px)) 14px max(10px,env(safe-area-inset-left,0px));
  background:linear-gradient(135deg,#8b5a2b,#6b4423 40%,#7d5028 70%,#5a3618)}
.areia{border-radius:12px;min-height:calc(100vh - 24px);padding:14px 16px 22px;position:relative;
  background:radial-gradient(circle at 20% 15%,#f6d2a3 0,transparent 40%),radial-gradient(circle at 85% 70%,#f3c690 0,transparent 45%),linear-gradient(160deg,#f2c995,#e8b277 60%,#e2a76a);
  box-shadow:inset 0 0 0 2px #3b220f,inset 0 0 30px #a0602a55}
/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none}
.marca svg{width:38px;height:38px;flex:none}
.marca b{font-family:var(--titulo);font-weight:400;font-size:28px;line-height:1;color:#6aa6e6;-webkit-text-stroke:5px #1d2f5c;paint-order:stroke fill;letter-spacing:.5px}
.topo nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.saldoPill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:#fff3c4;box-shadow:inset 0 -3px 0 #f0c040;font-weight:900;color:#6b4300;font-variant-numeric:tabular-nums}
.moeda{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff6c2,#ffcb2e 45%,#c88400);box-shadow:inset 0 0 0 2px #d99a00;display:inline-block}
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 24px;border-radius:999px;font-size:18px;font-weight:900;color:#fff;letter-spacing:.3px;text-decoration:none;
  background:linear-gradient(180deg,#7ed957,#3f9e2a);box-shadow:inset 0 2px 0 #fff6,0 5px 0 #2b6b1c,0 7px 12px #0005;text-shadow:0 2px 0 #0004;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #fff6,0 1px 0 #2b6b1c,0 2px 4px #0005}
.btn:disabled{filter:grayscale(.8);cursor:not-allowed}
.btn:focus-visible,.btnSec:focus-visible,input:focus-visible{outline:3px solid #1d2f5c;outline-offset:2px}
.btn.azul{background:linear-gradient(180deg,#7fb4ef,#3a74c0);box-shadow:inset 0 2px 0 #fff6,0 5px 0 #234a80,0 7px 12px #0005}
.btn.madeira{background:linear-gradient(180deg,#a8723f,#6b4423);box-shadow:inset 0 2px 0 #fff4,0 5px 0 #3b220f,0 7px 12px #0005}
.btn.largo{width:100%}
.btnSec{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:10px;font-weight:800;font-size:15px;color:#5a3618;text-decoration:none;
  background:linear-gradient(180deg,#f3dcb8,#d9b07a);box-shadow:inset 0 1px 0 #fff8,0 3px 0 #8b5a2b}
.btnSec:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff8,0 1px 0 #8b5a2b}
/* cartões */
.cartao{background:#fff6e4;border-radius:16px;padding:18px;box-shadow:inset 0 0 0 3px var(--madeira),inset 0 0 0 5px #3b220f22,0 10px 24px #3b220f40}
.painelMadeira{border-radius:12px;padding:16px;color:#ffe9c7;
  background:linear-gradient(90deg,#3b220f,#4a2c14 15%,#3d2411 50%,#4a2c14 85%,#3b220f);
  box-shadow:inset 0 0 0 4px #8b5a2b,inset 0 0 0 6px #2a170a,inset 0 0 18px #000c,0 4px 10px #0007}
h1,h2,h3{font-family:var(--titulo);font-weight:400;line-height:1.1;text-wrap:balance}
/* formulários */
.form{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-weight:900;font-size:15px}
.campo input{font:inherit;font-size:17px;font-weight:700;min-height:52px;padding:12px 14px;border-radius:12px;border:3px solid #a8723f;background:#fffdf7;color:#3b220f;width:100%}
.campo input:focus{outline:none;border-color:#e86a10;box-shadow:0 0 0 4px #ffb35c55}
.campo input[aria-invalid="true"]{border-color:var(--erro)}
.campo small{color:var(--txt2);font-size:13.5px}
.senhaBox{position:relative}
.senhaBox input{padding-right:84px}
.senhaBox button{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:8px 10px;border-radius:8px;background:#f3dcb8;color:#5a3618;font-weight:800;font-size:13px}
.alerta{padding:11px 13px;border-radius:12px;font-weight:800;font-size:14.5px}
.alerta.erro{background:#ffe0dc;color:#8a1010;box-shadow:inset 0 0 0 2px var(--verm)}
.alerta.ok{background:#e2f6d8;color:#1f5c10;box-shadow:inset 0 0 0 2px var(--verde)}
.alerta.info{background:#dceaff;color:#183f75;box-shadow:inset 0 0 0 2px var(--azul)}
.rodapeForm{text-align:center;font-size:15px}
.rodapeForm a{font-weight:900;color:#1d4b8a}
.rodape{margin-top:26px;text-align:center;font-size:13px;color:#6b4423}
.oculto{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}