:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
  background: #667eea;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(92vw, 760px); margin: 0 auto; padding: 32px 0; }
.card {
  background: rgba(255,255,255,.98);
  border-radius: 24px;
  padding: clamp(22px, 5vw, 38px);
  box-shadow: 0 22px 60px rgba(26, 19, 62, .28);
  animation: rise .35s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { color: #6366f1; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.05; }
h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 3vw, 1.8rem); }
p { line-height: 1.55; }
.muted { color: #6b7280; }
.topics { display: grid; gap: 14px; margin-top: 26px; }
.topline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.scorebox { background:#eef2ff; color:#4338ca; border-radius:16px; padding:10px 14px; font-size:.82rem; font-weight:700; text-align:center; white-space:nowrap; }
.scorebox strong { display:block; font-size:1.45rem; }
.topic-switcher { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:20px 0 18px; }
.topic-switch { border:1px solid #c7d2fe; border-radius:15px; padding:12px 14px; background:#f8faff; color:#3730a3; text-align:left; transition:.18s; }
.topic-switch strong { display:block; font-size:.98rem; }
.topic-switch span { display:block; margin-top:3px; color:#64748b; font-size:.78rem; line-height:1.3; }
.topic-switch:hover, .topic-switch.active { border-color:transparent; background:linear-gradient(135deg,#4338ca,#7c3aed); color:#fff; box-shadow:0 10px 22px rgba(79,70,229,.2); }
.topic-switch.active span, .topic-switch:hover span { color:#e0e7ff; }
.board { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin-top:24px; }
.game-column { display:grid; gap:10px; min-width:0; }
.game-column h2 { min-height:58px; margin:0; padding:10px 5px; border-radius:14px; background:#312e81; color:#fff; font-size:.9rem; line-height:1.15; display:flex; align-items:center; justify-content:center; text-align:center; }
.point { min-height:68px; border:0; border-radius:14px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; font-size:1.35rem; font-weight:900; box-shadow:0 8px 16px rgba(79,70,229,.2); transition:.18s; }
.point:hover { transform:translateY(-2px); filter:brightness(1.06); }
.point.used { background:#e5e7eb; color:#9ca3af; box-shadow:none; cursor:default; }
.board-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; color:#6b7280; font-size:.9rem; }
.board-actions { display:flex; align-items:center; gap:10px; }
.giveaway-button { border:0; border-radius:999px; padding:10px 15px; color:#fff; background:linear-gradient(135deg,#ec4899,#f97316); font-weight:800; box-shadow:0 8px 18px rgba(236,72,153,.22); }
.giveaway-button:hover { filter:brightness(1.06); transform:translateY(-1px); }
.giveaway-overlay { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.72); backdrop-filter:blur(5px); }
.giveaway-dialog { position:relative; width:min(92vw,860px); padding:12px; border-radius:22px; background:#111827; box-shadow:0 24px 70px rgba(15,23,42,.45); }
.giveaway-video { display:block; width:100%; max-height:78vh; border-radius:14px; background:#000; }
.giveaway-close { position:absolute; top:-14px; right:-14px; z-index:1; width:36px; height:36px; border:0; border-radius:50%; color:#fff; background:#7c3aed; font-size:1.5rem; line-height:1; cursor:pointer; }
.value-badge { border-radius:999px; padding:9px 14px; background:#ede9fe; color:#6d28d9; font-weight:900; }
.order-lock-button { position:fixed; top:10px; right:10px; z-index:900; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:rgba(255,255,255,.16); font-size:10px; line-height:18px; opacity:.28; }
.order-lock-button:hover, .order-lock-button:focus { opacity:.85; background:rgba(255,255,255,.9); color:#4338ca; outline:none; }
.topic {
  border: 1px solid #e0e7ff; border-radius: 18px; padding: 18px; text-align: left;
  background: linear-gradient(135deg, #f8faff, #eef2ff); color: #1e1b4b;
  transition: .2s ease; box-shadow: 0 8px 18px rgba(79,70,229,.07);
}
.topic:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(79,70,229,.14); }
.topic strong { display: block; font-size: 1.08rem; margin-bottom: 5px; }
.topic span { color: #64748b; font-size: .92rem; }
.toolbar, .progress-row, .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toolbar { margin-bottom: 22px; }
.ghost { border: 0; background: #eef2ff; color: #4338ca; padding: 10px 14px; border-radius: 999px; font-weight: 700; }
.progress { color: #4b5563; font-size: .9rem; font-weight: 800; }
.bar { height: 8px; margin: 10px 0 24px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); border-radius: inherit; transition: width .25s ease; }
.question { font-size: clamp(1.18rem, 3vw, 1.5rem); line-height: 1.35; font-weight: 800; margin: 22px 0; }
.options { display: grid; gap: 10px; }
.option { min-height:72px; display:flex; align-items:center; justify-content:center; border: 1px solid #e5e7eb; border-radius: 15px; padding: 14px 16px; background: #f8fafc; text-align: center; color: #111827; font-size:18px; line-height:1.3; white-space:pre-wrap; transition: .18s; }
.option:hover { border-color: #818cf8; background: #eef2ff; }
.option.selected { border: 2px solid #6366f1; background: #eef2ff; padding: 13px 15px; }
.option.correct { border-color: #22c55e; background: #dcfce7; }
.option.wrong { border-color: #ef4444; background: #fee2e2; }
.primary { border: 0; border-radius: 15px; padding: 14px 18px; color: white; font-weight: 800; background: linear-gradient(135deg, #4338ca, #7c3aed); box-shadow: 0 10px 22px rgba(79,70,229,.23); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.secondary { border: 1px solid #c7d2fe; border-radius: 15px; padding: 13px 18px; color: #4338ca; background: #fff; font-weight: 800; }
.feedback { min-height: 26px; margin: 16px 0 0; font-weight: 700; }
.good { color: #15803d; } .bad { color: #b91c1c; }
.answer-label { display:block; margin:4px 0 8px; color:#4b5563; font-size:.9rem; font-weight:800; }
.free-answer { width:100%; resize:vertical; border:1px solid #c7d2fe; border-radius:15px; padding:14px; color:#111827; background:#f8faff; line-height:1.45; outline:none; }
.free-answer:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.reference-answer { margin-top:16px; padding:14px 16px; border-radius:15px; background:#ecfdf5; border:1px solid #bbf7d0; color:#166534; line-height:1.45; }
.manual-actions { display:flex; gap:10px; width:100%; }
.manual-actions > * { flex:1; }
.confirm-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.55); backdrop-filter:blur(5px); }
.confirm-dialog { width:min(92vw,420px); padding:24px; border-radius:22px; background:#fff; box-shadow:0 24px 60px rgba(15,23,42,.3); }
.confirm-dialog h3 { margin:0 0 8px; font-size:1.3rem; }
.confirm-dialog p { margin:0 0 20px; color:#4b5563; }
.confirm-actions { display:flex; gap:10px; justify-content:flex-end; }
.confirm-actions > * { min-width:120px; }
.score { font-size: 3rem; font-weight: 900; color: #4f46e5; margin: 18px 0; }
.notice { margin-top: 20px; color: #64748b; font-size: .84rem; }
@media (max-width: 560px) { .shell { padding: 16px 0; } .card { border-radius: 18px; } .actions { flex-direction: column-reverse; align-items: stretch; } .actions button { width: 100%; } }
@media (max-width: 760px) { .board { grid-template-columns:repeat(3, minmax(0,1fr)); } .game-column h2 { min-height:68px; } }
@media (max-width: 500px) { .board { grid-template-columns:repeat(2, minmax(0,1fr)); } .topline { flex-direction:column; } .scorebox { align-self:flex-start; } }
@media (max-width: 500px) { .topic-switcher { grid-template-columns:1fr; } .board-footer { align-items:stretch; flex-direction:column; } .board-actions { justify-content:space-between; } }