/* Juego Limpio — modo individual y taller */
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 20px 64px; }

/* ingreso */
.login { min-height: calc(100vh - 40px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; max-width: 1160px; margin: 0 auto; padding: 32px 20px; }
.login .hero h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 400; margin: 18px 0 14px; }
.login .hero h1 em { font-style: normal; color: var(--brand-2); }
.login .hero p.lead { font-size: 18px; color: var(--ink-2); max-width: 36ch; margin: 0 0 22px; }
.login .cats { display: flex; flex-wrap: wrap; gap: 8px; }
.login .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; max-width: 560px; }
.login .facts div { border-top: 2px solid var(--ink); padding-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.login .facts b { display: block; font: 500 24px var(--display); color: var(--ink); }
.login form { display: grid; gap: 14px; }
.login .card h2 { font-size: 24px; }
.demo-box { margin-top: 16px; padding: 18px; border-radius: var(--r); background: var(--gold-soft); border: 1px solid #ecdcb7; display: grid; gap: 10px; }
.demo-box h3 { font-size: 17px; }
.or-admin { text-align: center; font-size: 13.5px; margin-top: 14px; }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; gap: 24px; } .login .facts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .login .facts { grid-template-columns: 1fr 1fr; } }

/* inicio */
.home { display: grid; gap: 22px; }
.status { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 28px; overflow: hidden; position: relative; }
.status h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 400; margin: 8px 0 8px; }
.status p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.status .actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.status.done { background: linear-gradient(120deg, #fff 55%, var(--gold-soft)); }
@media (max-width: 760px) { .status { grid-template-columns: 1fr; } }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rule { padding: 18px; display: grid; gap: 8px; align-content: start; }
.rule .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 14px; }
.rule h3 { font-size: 17px; }
.rule p { margin: 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 900px) { .rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rules { grid-template-columns: 1fr; } }
.section-title { display: flex; align-items: end; gap: 12px; margin: 10px 0 0; }
.section-title h2 { font-size: 24px; }

/* juego */
.game { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 20px; align-items: start; }
.board-card { padding: 16px 16px 8px; }
.board-card .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 6px 8px; }
.board-card .head h2 { font-size: 20px; }
.board { width: 100%; height: auto; display: block; }
.board .pawn { transition: transform .3s cubic-bezier(.4,1.4,.6,1); }
.board .node.here circle { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding: 2px 6px 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.side { display: grid; gap: 16px; }
@media (max-width: 980px) { .game { grid-template-columns: 1fr; } }

.play { padding: 22px; min-height: 280px; display: grid; gap: 16px; align-content: start; }
.play h3 { font-size: 21px; line-height: 1.3; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: -.005em; }
.dice-zone { display: grid; justify-items: center; gap: 14px; padding: 8px 0; text-align: center; }
.dice { width: 132px; height: 132px; border-radius: 30px; background: var(--c, var(--brand)); color: #fff; display: grid; place-items: center; align-content: center; gap: 6px;
  box-shadow: 0 14px 30px -10px var(--c, var(--brand)), inset 0 -6px 0 rgba(0,0,0,.14); transition: background .1s; }
.dice .ic { width: 44px; height: 44px; stroke-width: 1.6; }
.dice b { font-size: 13px; font-weight: 600; letter-spacing: .02em; max-width: 110px; line-height: 1.2; }
.dice.rolling { animation: wobble .12s linear infinite; }
@keyframes wobble { 0% { transform: rotate(-6deg) scale(.96); } 50% { transform: rotate(6deg) scale(1.02); } 100% { transform: rotate(-6deg) scale(.96); } }
.dice.land { animation: land .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes land { from { transform: scale(.8); } }
.qmeta { display: flex; gap: 6px; flex-wrap: wrap; }
.opts { display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; text-align: left; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); font-size: 15px; line-height: 1.4; transition: border .12s, background .12s, transform .12s; }
.opt:hover { border-color: var(--brand-2); background: #f4fafa; }
.opt:active { transform: scale(.99); }
.opt .l { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.opt.gone { opacity: .3; text-decoration: line-through; pointer-events: none; }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .l { background: var(--ok); color: #fff; border-color: var(--ok); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .l { background: var(--bad); color: #fff; border-color: var(--bad); }
.opts.locked .opt { pointer-events: none; }
.wildbar { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--line); }
.verdict { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; }
.verdict.ok { background: var(--ok-soft); color: #0f5a3c; } .verdict.bad { background: var(--bad-soft); color: #8a2018; }
.verdict .big { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.verdict.ok .big { background: var(--ok); } .verdict.bad .big { background: var(--bad); }
.verdict b { display: block; font-size: 16px; }
.explain { font-size: 14.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.explain .ref { display: flex; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-btn { display: grid; gap: 8px; justify-items: start; text-align: left; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 14px; }
.cat-btn:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, white); }
.cat-btn .ic { color: var(--c); width: 24px; height: 24px; }

.stats { padding: 18px 20px; display: grid; gap: 12px; }
.meter { display: grid; gap: 5px; }
.meter .top { display: flex; justify-content: space-between; font-size: 13px; }
.meter .bar { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.kpis b { display: block; font: 500 22px var(--display); }
.kpis span { font-size: 12px; color: var(--muted); }
.wilds { display: flex; gap: 8px; flex-wrap: wrap; }
.wild { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--gold-soft); color: #7a5a17; }
.wild.used { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }

/* resultado */
.result { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; }
.result .hero { text-align: center; padding: 36px 24px; display: grid; justify-items: center; gap: 12px; }
.result .medal { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--gold); box-shadow: 0 16px 40px -12px var(--gold); }
.result .medal.no { background: var(--brand); box-shadow: 0 16px 40px -12px var(--brand); }
.result .medal .ic { width: 46px; height: 46px; }
.result h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 400; }
.review-item { padding: 16px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.review-item:last-child { border-bottom: 0; }
.review-item .q { font-weight: 600; }
.review-item .a { font-size: 14px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }

/* taller (pantalla compartida) */
.teams { display: grid; gap: 10px; }
.team { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); }
.team.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.team .sw { width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-weight: 700; }
.team b { font-size: 16px; } .team small { display: block; color: var(--muted); font-size: 12.5px; }
.team .pos { font: 500 26px var(--display); }
.steal { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--warn-soft); }
.attendees { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.attendees label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.attendees label:last-child { border-bottom: 0; }
.attendees input { width: 18px; height: 18px; accent-color: var(--brand); }