.subtitle{ color:var(--muted) }
.tables{ grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); }
.checktile{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; cursor:pointer;
            border:2px solid transparent; transition:.2s transform,.2s box-shadow;
            background:linear-gradient(135deg, #fff, #f7faff); box-shadow:0 4px 14px rgba(40,60,120,.08); user-select:none; }
.checktile:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(40,60,120,.12) }
.checktile input{ appearance:none; width:22px; height:22px; border-radius:8px; border:2px solid var(--primary); display:grid; place-items:center }
.checktile input:checked{ background:var(--primary) }
.checktile input:checked::after{ content:'✓'; color:white; font-weight:700; font-size:16px }
.bubble{ font-weight:800; padding:2px 10px; border-radius:999px; color:white; font-size:14px; letter-spacing:.5px; display:inline-block }
.b1{ background:#ffd166; color:#553000 } .b2{ background:#ff9f1c } .b3{ background:#ff5fa2 } .b4{ background:#8a5cff } .b5{ background:#19c5c5 }
.controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:12px }
.progress{ font-weight:800; color:var(--muted); margin-bottom:8px }
.question{ font-size: clamp(28px, 6vw, 54px); font-weight:900; margin:10px 0 16px;
           background:linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
.answers{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); margin-top:8px }
.answer{ border:none; border-radius:16px; padding:14px; font-weight:900; font-size:20px; cursor:pointer; background:white;
         box-shadow:0 8px 18px rgba(40,60,120,.1); transition:.15s transform,.15s filter }
.answer:hover{ transform:translateY(-2px) }
.answer.correct{ background:#e9fbf4; border:2px solid var(--good) }
.answer.wrong{ background:#ffeff1; border:2px solid var(--bad) }
.feedback{ margin-top:12px; font-weight:800 } .ok{ color:var(--good) } .ko{ color:var(--bad) }
.hidden{ display:none !important }
.pill{ display:inline-block; padding:6px 12px; border-radius:999px; font-weight:800 }
.pill.ok{ background:#e9fbf4; color:var(--good) } .pill.ko{ background:#ffeff1; color:var(--bad) }
.arena{ position:relative; width:100%; height:120px; margin:8px 0 4px; border-radius:16px; background:linear-gradient(90deg,#fff7ec,#eef6ff); box-shadow:inset 0 0 0 2px #e6e9f6 }
.track{ position:absolute; left:12px; right:12px; top:50%; height:8px; transform:translateY(-50%); background:#e2e8ff; border-radius:6px }
.marker{ position:absolute; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:28px; font-weight:900; box-shadow:0 6px 14px rgba(40,60,120,.15) }
.hero{ background:#e8fff6; border:2px solid var(--good) } .dragon{ background:#ffeeee; border:2px solid var(--bad) }
.danger{ animation:pulse .8s infinite } @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,79,100,.45)}70%{box-shadow:0 0 0 12px rgba(255,79,100,0)}100%{box-shadow:0 0 0 0 rgba(255,79,100,0)}}