:root {
  --bg: #0b3d30;
  --bg2: #082a21;
  --panel: #0f4a3b;
  --gold: #ffc000;
  --gold2: #ffd65a;
  --ink: #12302a;
  --white: #ffffff;
  --mint: #cfe8df;
  --muted: #9fb5ad;
  --red: #e21b3c;
  --blue: #1368ce;
  --yellow: #d89e00;
  --green: #26890c;
  --ok: #2fbf5b;
  --bad: #e5484d;
  --radius: 18px;
  --font: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--white);
  background: radial-gradient(1200px 700px at 15% 0%, #136650 0%, var(--bg) 45%, var(--bg2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: 0; }
input { font-family: inherit; }
.hidden { display: none !important; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .04em; }
.brand .badge { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 900; box-shadow: 0 0 0 4px rgba(255,192,0,.25); }
.brand .t1 { font-size: 13px; color: var(--mint); text-transform: uppercase; }
.brand .t2 { font-size: 20px; color: var(--gold); }

.btn { background: var(--gold); color: var(--ink); font-weight: 800; border-radius: 999px; padding: 14px 28px; font-size: 18px; box-shadow: 0 6px 0 #a87b00; transition: transform .08s, box-shadow .08s, opacity .2s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a87b00; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: rgba(255,255,255,.12); color: var(--white); box-shadow: none; }
.btn.small { padding: 10px 18px; font-size: 15px; }

/* opciones (colores y formas tipo Kahoot) */
.opt { position: relative; display: flex; align-items: center; gap: 16px; border-radius: 14px; color: #fff; font-weight: 800; text-align: left; padding: 18px 22px; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.opt .shape { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; }
.opt .shape svg { width: 100%; height: 100%; fill: #fff; }
.opt.o0 { background: var(--red); }
.opt.o1 { background: var(--blue); }
.opt.o2 { background: var(--yellow); }
.opt.o3 { background: var(--green); }
.opt.dim { opacity: .28; }
.opt .mark { margin-left: auto; font-size: 34px; }

.card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,.25); font-weight: 700; }

@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.pop { animation: pop .35s cubic-bezier(.2,1.4,.4,1) both; }
.rise { animation: rise .45s ease both; }