:root{
  --bg:#06201a;--card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.12);--line:rgba(255,255,255,.15);
  --tx:#f3fff9;--mu:#a6c9b9;--oro:#ffd23f;--ver:#2ee59d;--rojo:#ff7a7a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;line-height:1.4;color:var(--tx);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(900px 600px at 8% -10%,#14694b 0%,transparent 60%),radial-gradient(800px 600px at 100% 110%,#5b4707 0%,transparent 55%),var(--bg);
  background-attachment:fixed;
}
img{max-width:100%}
.rojo{color:var(--rojo);font-weight:700}
.verde{color:var(--ver);font-weight:700}
.oroc{color:var(--oro);font-weight:700}
.chico{font-size:14px;color:var(--mu)}
.centro{text-align:center}
.blink{animation:blink 1.3s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.rainbow{background:linear-gradient(90deg,var(--ver),var(--oro));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.arco{border:0;height:1px;background:var(--line);margin:14px 0}
h1,h2,h3{margin:0}
button{
  font:inherit;font-weight:600;font-size:16px;color:var(--tx);background:var(--card2);border:1px solid var(--line);
  padding:11px 16px;cursor:pointer;border-radius:12px;transition:transform .08s,background .15s;-webkit-tap-highlight-color:transparent
}
button:hover{background:rgba(255,255,255,.18)}
button:active{transform:scale(.97)}
button:disabled{opacity:.4;cursor:not-allowed}
button.ok,button.on{background:var(--ver);color:#03261a;border-color:transparent}
button.oro{background:var(--oro);color:#2a1d00;border-color:transparent}
button.mal{background:rgba(255,122,122,.16);border-color:rgba(255,122,122,.5);color:#ffd6d6}
button.grande{display:block;width:100%;font-size:18px;font-weight:700;padding:15px}
input,select,textarea{
  font:inherit;font-size:17px;background:rgba(0,0,0,.35);color:var(--tx);border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;max-width:100%
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ver);outline-offset:1px}
::placeholder{color:#6f9585}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--ver);vertical-align:middle}
.caja{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.negro{background:rgba(0,0,0,.35);border-radius:14px;padding:10px;text-align:center}
.negro b{color:var(--oro)}
[hidden]{display:none!important}
.fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
kbd{background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:0 6px;font-family:inherit;font-size:.9em}
a{color:var(--oro)}

/* cartones y fichas */
.carton{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;background:rgba(0,0,0,.35);border-radius:16px;padding:8px;aspect-ratio:1}
.carton .c{position:relative;background:#fff;border-radius:10px;min-width:0;min-height:0;overflow:hidden}
.carton .c img{position:absolute;inset:6%;width:88%;height:88%;max-width:none;object-fit:contain}
.carton .c.m::after{content:"";position:absolute;inset:16%;border-radius:50%;background:rgba(46,229,157,.5);border:3px solid #0a8a5a}
.carton .c.l{background:#fff3b0;box-shadow:inset 0 0 0 4px var(--oro)}
.cajacarton{position:relative}
.cajacarton .num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9%;min-width:26px;aspect-ratio:1;border-radius:50%;background:var(--bg);color:#fff;border:2px solid var(--oro);display:grid;place-items:center;font-weight:800;font-size:13px;z-index:2}