:root{
  --red:#B91C22;--ink:#1F1A17;--paper:#F5EDD9;--card:#FBF6EC;--empty:#E4D8BF;
  --marx:#946000;--rosa:#A51D36;--gramsci:#087F83;--mandela:#A85A0A;--frida:#B51E62;
  --bg:#F5EDD9;--text:#191915;
  /* Para usar una imagen de fondo: --bg-image: url(data:image/jpeg;base64,...) */
  --bg-image:none;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* El juego mantiene su fondo claro también en modo oscuro */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#F5EDD9;--text:#191915;}}
:root[data-theme="dark"]{--bg:#F5EDD9;--text:#191915;}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;min-height:100%}
body{
  color:var(--text);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background-color:var(--bg);
  background-image:var(--bg-image),
    radial-gradient(ellipse at 50% 18%,rgba(244,236,220,.0) 0,rgba(244,236,220,.0) 30%,rgba(241,232,213,.9) 75%),
    repeating-conic-gradient(from -3deg at 50% 22%,rgba(165,29,54,.075) 0deg 6deg,transparent 6deg 12deg);
  background-size:cover,100% 100%,100% 100%;background-position:center;background-attachment:fixed;
}
.game-wrap{max-width:480px;margin:0 auto;padding:14px 16px 32px}
.game-heading{text-align:center;padding-top:4px}
.kicker{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rosa)}
h1{font-family:'Anton','Arial Black',Impact,sans-serif;font-weight:400;font-size:clamp(30px,9vw,40px);color:var(--red);margin:2px 0 6px;line-height:1;text-shadow:3px 3px 0 var(--ink)}
.chip{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;padding:4px 12px}
.chip:empty{display:none}
.starbox{display:flex;justify-content:center;margin:6px -8px 2px}
#star{width:100%;max-width:440px;height:auto;overflow:visible}
#star .fillpt{transition:all .5s ease}
#star.win{animation:pop 1s ease;transform-origin:50% 50%}
@keyframes pop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.1) rotate(-10deg)}100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion: reduce){#star.win{animation:none}#star .fillpt{transition:none}}
.panel{background:var(--card);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--rosa);padding:18px 16px}
.panel h2{font-size:20px;line-height:1.25;margin:0 0 14px;font-weight:700}
.panel p{font-size:15px;line-height:1.45;margin:0 0 10px}
.center{text-align:center}
.muted{font-size:13px;opacity:.72}
.tag{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag b{font-family:'Anton','Arial Black',sans-serif;font-weight:400;font-size:13px;color:#fff;padding:4px 10px}
.tag span{font-size:13px;font-weight:600;opacity:.8}
.die{width:128px;height:128px;margin:2px auto 14px;border:4px solid var(--ink);border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--paper);box-shadow:5px 5px 0 var(--ink);color:#fff;font-family:'Anton','Arial Black',sans-serif;font-size:16px;text-align:center;padding:6px;overflow:hidden}
.die.idle{color:var(--ink);font-size:58px}
.die.joker{background:var(--red)}
.die svg{width:92px;height:92px}
.die.rolling{animation:shake .12s linear infinite}
@keyframes shake{0%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}100%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion: reduce){.die.rolling{animation:none}}
.opts{display:grid;gap:9px}
.opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:16px;font-weight:600;color:var(--ink);background:#fff;border:3px solid var(--ink);padding:11px 12px;cursor:pointer}
.opt b{font-family:'Anton','Arial Black',sans-serif;font-weight:400;font-size:14px;width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper)}
.opt.ok{background:#D6EDE6;border-color:var(--gramsci)}.opt.ok b{background:var(--gramsci)}
.opt.bad{background:#F6D5D6;border-color:var(--red)}.opt.bad b{background:var(--red)}
.opt:disabled{cursor:default}
.fb{margin-top:14px;font-size:15px;line-height:1.45}
.fb strong{font-size:17px;display:block;margin-bottom:4px}
.btn{display:block;width:100%;background:var(--red);color:var(--paper);border:3px solid var(--ink);font-family:'Anton','Arial Black',Impact,sans-serif;font-size:15px;padding:14px;margin-top:14px;cursor:pointer;box-shadow:4px 4px 0 var(--ink)}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:3px solid var(--marx);outline-offset:2px}
.choose{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.choose button{grid-column:span 2;font-family:'Anton','Arial Black',sans-serif;font-size:14px;color:#fff;border:3px solid var(--ink);padding:14px 8px;cursor:pointer}
.choose button:last-child:nth-child(odd){grid-column:2 / span 2}
.choose button:disabled{opacity:.28;cursor:default}
.levels{display:grid;gap:9px;margin:14px 0 4px}
.level{display:block;width:100%;text-align:left;font:inherit;background:#fff;color:var(--ink);border:3px solid var(--ink);padding:12px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.level strong{display:block;font-size:16px}
.level span{font-size:13px;opacity:.75}
.level[disabled]{opacity:.45;cursor:default;box-shadow:none}
.stats{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:16px;font-weight:600;margin:6px 0 4px}
.stats dt,.stats dd{margin:0}.stats dd{text-align:right;font-weight:700}

.game-wrap{max-width:560px;padding-top:16px}.game-wrap h1{text-shadow:none;font-size:clamp(36px,10vw,52px);letter-spacing:.01em}.panel p,.fb{font-size:1rem}.muted,.tag span,.level span{font-size:.875rem;opacity:1;color:#514c42}.tag span{flex:1;min-width:150px}.choose button{font-size:1rem}.btn{font-size:1.05rem;letter-spacing:.025em}.chip{font-size:.875rem}.kicker{font-size:.875rem}.game-wrap h2{font-family:var(--body);text-transform:none;font-weight:700}.stats{display:block}.stats dt{margin-top:8px}.stats dd{text-align:left}.masthead{background:var(--paper)}.masthead.wrap{max-width:1280px}.masthead nav{flex-wrap:wrap;gap:16px}.game-wrap button{min-height:44px}.game-footer{text-align:center;max-width:560px;margin:auto;padding:12px 20px 32px;font-size:.875rem}.game-wrap a{color:var(--red)}.game-wrap :focus-visible{outline:3px solid var(--gramsci);outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:380px){.game-wrap{padding-inline:12px}.panel{padding:16px 12px;box-shadow:4px 4px 0 var(--rosa)}.tag b{font-size:.875rem}.chip{max-width:100%;white-space:normal}.level span{display:block}}