@charset "utf-8";
/* CSS Document */

:root{
  --bg:#f6f3ff; --ink:#1f1742; --muted:#5b5680; --panel:#fff; --panel-bd:#e7e2ff;
  --accent:#7b5cff; --accent2:#00c2ff; --accent3:#ffb84d; --good:#16b885; --bad:#ff5b6b;
  --shadow:0 18px 50px rgba(44,33,93,.12); --r:22px; --w:min(1200px,75vw);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 0% -10%, #e9e5ff 0%, transparent 60%),
    radial-gradient(1200px 600px at 100% 0%, #e1fbff 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif
}
.wrap{width:var(--w); margin:0 auto; padding:20px 24px 36px}
@media (max-width: 720px){
  .wrap{ width: min(1200px, 95vw); padding: 14px 12px 28px; }
}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 16px}
.brand-link{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.logo{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:conic-gradient(from 0deg,#7b5cff,#00c2ff,#ffb84d,#7b5cff);
  animation:spin 12s linear infinite; box-shadow:0 10px 30px rgba(123,92,255,.25)
}
.logo span{
  background:#fff;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:22px;font-weight:800;color:#7b5cff
}
@keyframes spin{to{transform:rotate(1turn)}}
h1{margin:0;font-size:32px;letter-spacing:.3px}

.card{background:var(--panel);border:1px solid var(--panel-bd);border-radius:var(--r);box-shadow:var(--shadow)}
.intro{padding:18px}

/* Inputs */
.search{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--panel-bd);
  font-size:16px; margin:8px 0 12px; background:#fff; color:var(--ink)
}
.rowFlex{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rowFlex .search{flex:1}

/* Category-grid */
.cats{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-start; /* important: prevent equal height stretch */
}
.cat{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--panel-bd);
  background:linear-gradient(180deg,#fff,#faf9ff);
  padding:16px 20px;
  cursor:pointer;
  transition:transform .08s,box-shadow .2s,border-color .2s;
  width: calc((100% - 2 * 14px) / 3); /* 3 columns minus gaps */
}
@media (max-width:1100px){ .cat{ width: calc((100% - 14px) / 2) } }
@media (max-width:720px){ .cat{ width: 100% } }


.cat:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(60,52,120,.12) }
.cat h3{ margin:0; font-size:22px }

/* header row with caret */
.cat .cat-head{
  display:flex; align-items:center; gap:10px;
}
.caret{
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid var(--muted);
  transform:rotate(0deg); transition:transform .15s ease;
  margin-left:auto; /* push to right */
  opacity:.75;
}
.cat.open .caret{ transform:rotate(180deg) } /* pointing up when open */

/* sublist collapsed by default */
.sublist{ margin-top:10px; display:none }

.emoji { line-height:1 }
.emoji-cat { font-size:1.8em; display:inline-block; transform:translateY(2px) }
.emoji-sub { font-size:1.2em }

.sublist{margin-top:10px;display:none}
.cat.open .sublist{display:block}
.subbtn{
  display:inline-flex;align-items:center;gap:8px;margin:10px 8px 0 0;
  padding:12px 14px;border-radius:14px;border:1px solid var(--panel-bd);
  background:#fff;color:var(--ink);cursor:pointer;font-weight:800
}
.subbtn:hover{border-color:#d4ccff}

/* Selected states */
.cat.activeSel{
  border-color:#7b5cff;
  box-shadow:0 12px 28px rgba(123,92,255,.16);
  background:linear-gradient(180deg,#fff,#f2efff);
}
.subbtn.selected{
  border-color:#7b5cff;
  background:linear-gradient(180deg,#fff,#f4f1ff);
  color:#2a1fa0;
}
.diffbtn.selected{
  border-color:#7b5cff;
  background:linear-gradient(180deg,#fff,#f4f1ff);
  color:#2a1fa0;
}

.note{
  color:#4b3ea0; background:linear-gradient(180deg,#fff,#f7f5ff);
  border:1px solid #e7e2ff; padding:10px 12px; border-radius:10px;
}

.controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between; /* left & right groups */
  margin-top:14px
}
.controlsLeft{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.controlsRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.helperRow{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.linkBtn{
  appearance:none;background:transparent;border:0;padding:0 6px;border-radius:8px;
  color:#3d2e92;font-weight:800;cursor:pointer; text-decoration:underline
}
.linkBtn:hover{opacity:.85}

/* simple alert block reused in JS */
.alert{
  margin-top:12px;padding:12px;border:1px solid #f5c2c7;background:#fff5f5;
  border-radius:12px;color:#842029
}

.ghost{appearance:none;border-radius:16px;padding:14px 16px;font-weight:800;cursor:pointer;color:#3d2e92;background:#fff;border:1px solid var(--panel-bd)}
.start{
  appearance:none;border:0;border-radius:16px;padding:14px 16px;font-weight:800;cursor:pointer;color:#fff;
  background:linear-gradient(90deg,#7b5cff,#00c2ff);box-shadow:0 8px 20px rgba(0,194,255,.25)
}
.start:disabled{opacity:.5;cursor:not-allowed}

/* Sticky controls on mobile */
@media (max-width: 720px){
  .controls{position:sticky; bottom:8px; background:transparent; backdrop-filter:blur(2px); padding-bottom:4px}
}

.diffWrap{margin-top:16px;padding:16px;border:1px dashed #d4ccff;border-radius:18px;background:#fff}
.diffGrid{display:flex;gap:10px;flex-wrap:wrap}
.diffbtn{appearance:none;border:1px solid var(--panel-bd);background:#fff;color:#2a1fa0;padding:12px 16px;border-radius:14px;font-weight:900;cursor:pointer}
.diffbtn:hover{border-color:#c8c0ff}
.diffbtn[disabled]{opacity:.35;cursor:not-allowed}

.quiz{padding:18px;margin-top:16px}

/* Sticky top (mobile/tablet) */
.top{position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #efeaff; padding-bottom:10px; margin:-18px -18px 10px; padding:12px 18px 10px; border-top-left-radius:22px;border-top-right-radius:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;padding:8px 12px;border-radius:999px;font-size:12px;border:1px solid var(--panel-bd);color:#4b3ea0}
.chip.badge{background:linear-gradient(90deg,rgba(123,92,255,.15),rgba(0,194,255,.15));border-color:#d4ccff}
.chip.team{background:linear-gradient(90deg,rgba(255,184,77,.18),rgba(0,194,255,.18));border-color:#ffdca2;color:#754c00}
.topSpacer{flex:1 1 auto}
.timer{display:flex;align-items:center;gap:10px}
.bar{width:260px;height:14px;border-radius:999px;overflow:hidden;border:1px solid var(--panel-bd);background:#efeaff}
.bar>span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7b5cff,#00c2ff,#ffb84d);transform-origin:left center;transition:width .2s linear}
.digits{font-variant-numeric:tabular-nums;font-weight:800}

/* Stop button */
.stopBtn{
  appearance:none;border:1px solid #ffb3b3;
  background:linear-gradient(90deg,#ff5b6b,#ff1e42);
  color:#fff;border-radius:14px;padding:8px 12px;font-weight:800;cursor:pointer
}
.stopBtn:hover{border-color:#ff8080;filter:brightness(1.05)}

/* Desktop: timer + stop under answers */
.timerBarWrap{ display:none; margin-top:16px; gap:16px; align-items:center }
.timerBarWrap .bar{ flex:1; width:auto; height:16px }
@media (min-width:821px){
  .top .timer, .top .stopBtn { display:none }
  .timerBarWrap{ display:flex }
  .bar{ width:auto }
}

.question{font-size:26px;margin:16px 4px 10px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.answers{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.answers{grid-template-columns:1fr 1fr; gap:10px}}
.ans{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--panel-bd);
  background:#ffffff;
  border-radius:20px;
  padding:18px 16px;
  min-height:72px;
  text-align:left;
  cursor:pointer;
  color:var(--ink)!important;
  line-height:1.35;
  font-size:18px;
  transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  word-break:break-word;
}
@media (min-width:821px){ .ans{font-size:20px; padding:22px 20px; min-height:78px} }
@media (max-width:720px){ .ans{font-size:16px; padding:14px 12px; min-height:60px} }
.ans:hover{border-color:#d4ccff; transform:translateY(-1px); box-shadow:0 10px 22px rgba(60,52,120,.10)}
.ans.correct{border-color:var(--good);background:linear-gradient(0deg,rgba(22,184,133,.10),transparent)}
.ans.wrong{border-color:var(--bad);background:linear-gradient(0deg,rgba(255,91,107,.10),transparent)}
.ans.disabled{pointer-events:none;opacity:.96}
.ans:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,194,255,.35)}

.progress{margin-top:12px;display:flex;align-items:center;justify-content:space-between}
.counter{color:var(--muted);font-weight:600}
.score{font-weight:900;color:#2a1fa0}

.backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(59,46,140,.15);z-index:50}
.modal{max-width:620px;width:calc(min(92vw,700px));background:#fff;border:1px solid var(--panel-bd);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.tada{font-size:42px} .big{font-size:30px;font-weight:900}
.name{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--panel-bd);background:#fff;color:#2a1fa0}
.row2{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.again,.close{appearance:none;border-radius:16px;padding:12px 16px;font-weight:800;cursor:pointer}
.again{color:#fff;background:linear-gradient(90deg,#7b5cff,#00c2ff);border:0}
.close{color:#3d2e92;background:#fff;border:1px solid var(--panel-bd)}
.save{color:#fff;background:linear-gradient(90deg,#ffb84d,#00c2ff);border:0}

.save.saving { opacity: .8; pointer-events:none }
.save.saved { pointer-events:none; animation: savedPulse 900ms ease; }
@keyframes savedPulse {
  0% { box-shadow:0 0 0 0 rgba(22,184,133,.0) }
  30% { box-shadow:0 0 0 10px rgba(22,184,133,.25) }
  100% { box-shadow:0 0 0 0 rgba(22,184,133,.0) }
}
.modal.flash { animation: flashOk 600ms ease; }
@keyframes flashOk {
  0% { box-shadow:0 0 0 0 rgba(22,184,133,.0) }
  30% { box-shadow:0 0 0 10px rgba(22,184,133,.25) }
  100% { box-shadow:0 0 0 0 rgba(22,184,133,.0) }
}

.stopBackdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:#12102640;z-index:55}
.stopModal{max-width:420px;width:min(92vw,520px);background:#fff;border:1px solid var(--panel-bd);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.stopActions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.btnOutline{appearance:none;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;border:1px solid var(--panel-bd);background:#fff;color:#3d2e92}
.btnDanger{appearance:none;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;border:1px solid #ffd9d9;background:linear-gradient(180deg,#fff,#fff5f6);color:#b00020}
.btnDanger:hover{border-color:#ffc6c6}
.btnOutline:hover{border-color:#d4ccff}

.formula{margin-top:18px;padding:18px;border:1px dashed #d4ccff;border-radius:18px;background:#fff}
.f-title{font-weight:900;color:#2a1fa0;font-size:18px;margin-bottom:8px}
.f-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.f-label{font-weight:800;min-width:90px}
.f-eq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900;letter-spacing:.3px}

.lbBackdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(59,46,140,.15);z-index:60}
.lbModal{max-width:920px;width:min(94vw,1000px);background:#fff;border:1px solid var(--panel-bd);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.lbTop{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.lbSearch{padding:10px 12px;border:1px solid var(--panel-bd);border-radius:12px;background:#fff;color:#2a1fa0; width: min(360px, 60vw)}
.lbTable{width:100%;border-collapse:collapse;font-size:15px}
.lbTable th,.lbTable td{border-bottom:1px solid #eee;padding:10px 8px;text-align:left;vertical-align:top}
.lbTable th{position:sticky;top:0;background:#fff}
.lbFooter{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.btn{appearance:none;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;border:1px solid var(--panel-bd);background:#fff;color:#3d2e92}
.btnPrimary{background:linear-gradient(90deg,#7b5cff,#00c2ff);color:#fff;border:0}
.muted{color:#5b5680}

.hidden{display:none !important}

/* Team code success badge */
.codeBadge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid #ffdca2;background:linear-gradient(180deg,#fffdf7,#fff6e6);
  font-weight:800;color:#5a3a00
}

/* Selectable buttons for mode */
.btnChoice{border:2px solid transparent}
.btnChoice.selected{
  border-color:#7b5cff;
  background:linear-gradient(180deg,#fff,#f4f1ff);
  box-shadow:0 8px 18px rgba(123,92,255,.12);
}