@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&display=swap');
  :root {
  --bg:#080d10;
  --panel:#10191d;
  --panel2:#142126;
  --teal:#388C98;
  --teal2:#64bbc5;
  --white:#f3f7f7;
  --muted:#91a4a8;
  --line:#24353a;
  --gold:#e8bb69}

* {
  box-sizing:border-box}

.icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.game-card-back { fill:#19434a; stroke:#54b8c2; stroke-width:1.5; }
.game-card-front { fill:#16323a; stroke:#83e7e9; stroke-width:1.7; }
.game-card-frame { fill:none; stroke:#5ac8d0; stroke-width:1; opacity:.8; }
.game-card-badge { fill:#0c1b21; stroke:#8af4f2; stroke-width:1.5; }
.game-card-mark { fill:none; stroke:#c3ffff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.game-card-lines { fill:none; stroke:#73d8df; stroke-width:1.4; stroke-linecap:round; }

body {
  margin:0;
  background:radial-gradient(ellipse at 50% -25%,#15333a 0,transparent 48%),var(--bg);
  color:var(--white);
  font-family:Alexandria,system-ui,sans-serif;
  min-height:100vh}

button,input {
  font:inherit}

button {
  cursor:pointer}

.wrap {
  max-width:1180px;
  margin:auto;
  padding:28px 28px 64px}

.top {
  display:flex;
  align-items:center;
  justify-content:space-between}

.brand {
  display:flex;
  align-items:center;
  direction:rtl;
  gap:4px;
  font-size:18px;
  font-weight:800;
  white-space:nowrap;
  color:var(--white);
  border:0;
  background:transparent;
  padding:4px 0;
  cursor:pointer}

.brand img { width:36px; height:36px; flex:0 0 auto; border:1px solid #388c9860; border-radius:11px; object-fit:cover; box-shadow:0 0 18px #388c9825; }
.brand span { display:inline-flex; align-items:center; gap:5px; letter-spacing:0; }

.sigil {
  width:43px;
  height:43px;
  border:1px solid #388c9880;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:var(--teal2);
  font-size:21px;
  background:#388c9819}

.nav {
  display:flex;
  align-items:center;
  gap:10px}

.nav button,.ghost {
  color:#d7e1e2;
  border:1px solid var(--line);
  border-radius:11px;
  background:#0e171a;
  padding:10px 15px}

.nav button:hover,.ghost:hover {
  border-color:var(--teal)}

.theme {
  font-size:18px}

.hero {
  text-align:center;
  padding:72px 20px 32px}

.eyebrow {
  color:var(--teal2);
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px}

.hero h1 {
  font-size:clamp(38px,7vw,70px);
  line-height:1.2;
  margin:18px 0 12px;
  font-weight:800}

.accent {
  color:var(--teal2)}

.hero p {
  color:#aab9bc;
  font-size:15px;
  margin:0 auto 28px}

.hero .hero-caption { max-width:560px; margin:0 auto 26px; color:#9eafb2; font-size:clamp(12px,2.5vw,14px); font-weight:400; line-height:1.85; }

.hero #homeChallengeButton { display:block; width:min(100%,260px); margin:0 auto; }

.primary {
  background:var(--teal);
  color:white;
  border:1px solid #56aab4;
  padding:14px 25px;
  border-radius:13px;
  font-weight:700;
  box-shadow:0 0 25px #388c9850;
  transition:.2s}

.primary:hover {
  transform:translateY(-2px);
  box-shadow:0 0 34px #388c9875}

.primary:disabled {
  opacity:.4;
  cursor:not-allowed;
  transform:none}

.count {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:210px;
  margin-top:16px;
  padding:9px 14px;
  color:#dce9ea;
  text-align:right;
  border:1px solid #36727a88;
  border-radius:15px;
  background:linear-gradient(135deg,#14272b,#0d171a);
  box-shadow:0 8px 22px #0003,inset 0 1px #ffffff08}

.hero .count { display:flex; width:max-content; max-width:100%; margin:14px auto 0; }

.guest-trial-offer { display:grid; justify-items:center; gap:10px; width:min(100%,360px); margin:12px auto 0; padding:14px; border:1px solid #36727a88; border-radius:16px; background:linear-gradient(135deg,#14272b,#0d171a); color:#dce9ea; font-size:14px; line-height:1.6; text-align:center; }
.guest-trial-offer .primary { min-width:150px; padding:10px 20px; }

.count-icon {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  color:#9cf5f4;
  font-size:21px;
  border:1px solid #58c4ca88;
  border-radius:11px;
  background:linear-gradient(145deg,#20545b,#11282d)}

.count-icon svg { width:29px; height:34px; overflow:visible; }

.count-copy {
  display:grid;
  gap:2px;
  flex:1}

.count-label {
  color:#dce9ea;
  font-size:13px;
  font-weight:700}

.count-caption {
  color:var(--muted);
  font-size:10px}

.count b {
  min-width:34px;
  color:var(--teal2);
  font-size:23px;
  line-height:1;
  text-align:center}

.section {
  margin-top:46px}

.sectionhead {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:16px}

.section h2 {
  font-size:19px;
  margin:0}

.sectionhead span {
  font-size:11px;
  color:var(--muted)}

.wallet {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px}

.pack,.box {
  background:linear-gradient(145deg,#142126,#0d1518);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  position:relative;
  overflow:hidden}

.pack {
  min-height:150px}
.pack-icon { display:grid; place-items:center; float:left; width:50px; height:62px; margin-inline-start:12px; border:1px solid #67d1db55; border-radius:14px; color:#a8ffff; background:linear-gradient(145deg,#18363c,#102126); box-shadow:inset 0 1px #ffffff0c,0 8px 18px #0004; }
.pack-icon svg { width:42px; height:54px; overflow:visible; filter:drop-shadow(0 3px 4px #0007); }
.pack-icon .card-back { fill:#19434a; stroke:#54b8c2; stroke-width:1.5; }
.pack-icon .card-front { fill:#16323a; stroke:#83e7e9; stroke-width:1.6; }
.pack-icon .card-band { fill:#43b5bf; opacity:.9; }
.pack-icon .card-chip { fill:#dbcf8b; stroke:#fff0b1; stroke-width:.8; }
.pack-icon .card-line { fill:none; stroke:#b7fafa; stroke-width:1.6; stroke-linecap:round; }
.pack-icon .card-dot { fill:#e8d995; }

.pack:hover {
  border-color:#388c9877}

.pack strong {
  font-size:22px}

.pack .price {
  font-size:24px;
  font-weight:800;
  color:var(--teal2);
  margin-top:14px}

.pack .price-iqd {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  opacity:.78}

.pack small {
  color:var(--muted);
  font-size:11px}

.saving {
  position:absolute;
  top:15px;
  left:14px;
  background:#503c1c;
  color:#f1cf88;
  border-radius:8px;
  padding:5px 8px;
  font-size:10px}

.payment {
  margin-top:13px;
  color:#aab9bc;
  font-size:11px;
  display:flex;
  gap:8px;
  align-items:center}

.payicon {
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid #3e5258;
  padding:3px 7px;
  border-radius:5px;
  color:#e4eeee}
.payicon.mastercard { font-family:Arial,sans-serif; font-size:9px; }
.payicon.mastercard i { position:relative; display:inline-block; width:18px; height:11px; }
.payicon.mastercard i::before,.payicon.mastercard i::after { content:""; position:absolute; top:0; width:11px; height:11px; border-radius:50%; }
.payicon.mastercard i::before { left:0; background:#eb3545; }
.payicon.mastercard i::after { right:0; background:#f6a623d9; }
.payicon.zaincash { border-color:#38a8b580; color:#b6fbff; font-family:Arial,sans-serif; font-size:9px; }
.payicon.zaincash i { display:grid; place-items:center; width:13px; height:13px; border-radius:4px; color:#071a1d; background:#55d7df; font-style:normal; font-weight:900; font-size:10px; }

.archive {
  display:grid;
  grid-template-columns:1fr;
  gap:12px}

.match {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d7e1e2;
  font-size:13px}

.match small {
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:10px}

.archive-match { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.archive-match .archive-resume { grid-column:1/-1; width:100%; }
.archive-summary { min-width:0; }
.archive-summary b { display:block; overflow-wrap:anywhere; }
.archive-match details { grid-column:1/-1; border-top:1px solid var(--line); padding-top:10px; color:var(--muted); }
.archive-match summary { cursor:pointer; color:var(--teal2); font-size:12px; font-weight:700; }
.archive-questions { margin:12px 0 0; padding-inline-start:24px; }
.archive-questions li { padding:10px 4px; border-bottom:1px solid #31515970; }
.archive-questions li:last-child { border-bottom:0; }
.archive-questions b { color:#e8f1f2; font-size:12px; }
.archive-questions p { margin:6px 0; color:#f4f8f8; line-height:1.7; }
.archive-questions small { line-height:1.7; }

.winner {
  color:#9bd4ad;
  font-size:11px}

.foot {
  text-align:center;
  color:#64767b;
  font-size:10px;
  margin-top:48px}

.hidden {
  display:none!important}

.page {
  max-width:920px;
  margin:42px auto 0}

.heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px}

.heading h2 {
  margin:0;
  font-size:24px}

.step {
  color:var(--muted);
  font-size:11px}

.field {
  background:#0b1215;
  border:1px solid var(--line);
  border-radius:11px;
  color:white;
  padding:11px 13px;
  width:100%;
  outline:none}

.field:focus {
  border-color:var(--teal)}

.teamgrid,.catgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px}

.box label {
  display:block;
  font-size:12px;
  color:#becacc;
  margin-bottom:9px}

.row {
  display:flex;
  gap:12px;
  margin-top:13px}

.catgrid {
  grid-template-columns:repeat(3,1fr)}

.cat {
  height:116px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  text-align:right;
  color:white;
  border:1px solid var(--line);
  background:linear-gradient(145deg,#142126,#0d1518);
  border-radius:16px;
  padding:14px}

.cat.selected {
  border-color:var(--teal2);
  box-shadow:inset 0 0 0 1px #388c9840,0 0 20px #388c9820}

.cat .emoji {
  font-size:22px}

.cat small {
  font-size:10px;
  color:var(--muted)}

.actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px}

.arena {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:15px;
  align-items:stretch}

.score {
  padding:20px;
  text-align:center}

.score .pts {
  font-size:35px;
  color:var(--teal2);
  font-weight:800;
  margin-top:10px}

.question {
  min-height:240px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center}

.value {
  color:var(--gold);
  font-size:12px}

.question h3 {
  font-size:20px;
  line-height:1.8;
  max-width:520px}

.answerrow {
  display:flex;
  gap:9px;
  width:100%;
  max-width:500px}

.answerrow .field {
  flex:1}

.timer {
  color:var(--teal2);
  font-weight:700;
  font-size:13px}

.pill {
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:99px;
  color:var(--muted);
  font-size:10px;
  padding:7px 10px;
  margin:3px}

.toast {
  position:fixed;
  bottom:calc(20px + env(safe-area-inset-bottom) + 82px);
  left:50%;
  transform:translateX(-50%);
  background:#172529;
  border:1px solid #388c98;
  color:white;
  padding:12px 18px;
  border-radius:12px;
  z-index:1000;
  width:max-content;
  max-width:calc(100vw - 32px);
  text-align:center;
  line-height:1.5}

.light {
  --bg:#e8f0f1;
  --panel:#fff;
  --panel2:#edf4f4;
  --white:#142126;
  --muted:#637579;
  --line:#d1dfe1;
  background:radial-gradient(ellipse at 50% -25%,#cae7e9 0,transparent 50%),var(--bg)}

.light .nav button,.light .ghost {
  color:#26383b;
  background:#f3f8f8}

.light .pack,.light .box,.light .cat {
  background:linear-gradient(145deg,#fff,#edf4f4)}

.light .field {
  color:#142126;
  background:white}

.light .question .field {
  color:#142126}

@media(max-width:700px) {
  .wrap {
  padding:18px 16px 45px}

.brand {
  font-size:14px}

.nav button {
  font-size:11px;
  padding:8px}

.hero {
  padding-top:56px}

.wallet {
  grid-template-columns:1fr}

.pack {
  min-height:125px}

.archive,.teamgrid {
  grid-template-columns:1fr}

.catgrid {
  grid-template-columns:repeat(2,1fr)}

.arena {
  grid-template-columns:1fr 1fr}

.question {
  grid-column:1/-1;
  grid-row:1}

.score {
  padding:12px}

.score .pts {
  font-size:24px}

.heading h2 {
  font-size:19px}

}

.buy {
  margin-top:14px;
  width:100%}

.payment-options {
  display:flex;
  gap:10px;
  margin:12px 0}

.payment-options button {
  flex:1}

.payment-options .selected {
  border-color:var(--teal2);
  color:var(--teal2)}

dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(4px)}

dialog[open] {
  margin:auto}

.feedbackbox {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:28px;
  border-color:#388c9870;
  padding:26px}

.feedbackbox h3 {
  font-size:21px;
  margin:12px 0}

.feedbackbox p {
  color:var(--muted);
  font-size:13px;
  line-height:1.9}

.feedbackicon {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border-radius:14px;
  color:var(--teal2);
  background:#388c9820;
  font-size:22px}

.feedbackform {
  display:grid;
  gap:9px}

.feedbackform label {
  font-size:11px;
  color:#becacc}

.feedbackform textarea {
  resize:vertical;
  line-height:1.7}

.whatsapp {
  text-align:center;
  text-decoration:none;
  display:block}

.feedbackform small {
  color:var(--muted);
  font-size:10px}

.filterrow {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px}

.emptycontent {
  grid-column:1/-1;
  color:var(--muted);
  font-size:12px;
  line-height:1.8}

.questionmedia {
  display:block;
  max-width:min(100%,560px);
  max-height:360px;
  margin:12px auto;
  border-radius:14px}

.career-timeline { display:flex; direction:ltr; align-items:stretch; gap:8px; overflow-x:auto; padding:16px 4px 10px; max-width:100%; scroll-snap-type:x mandatory; scrollbar-color:#238e99 #0b1418; }
.career-stop { box-sizing:border-box; flex:0 0 clamp(126px,34vw,170px); min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px 9px; color:#ecf8fa; background:linear-gradient(155deg,#10242b,#071115); border:1px solid #1e5a64; border-radius:19px; scroll-snap-align:center; }
.career-stop.is-revealed { border-color:#20d5e1; box-shadow:inset 0 0 20px #0e687326,0 8px 22px #0006; }
.career-stop.is-next { cursor:pointer; border:2px dashed #ffc65b; background:linear-gradient(155deg,#241e12,#101719); transition:transform .18s ease,border-color .18s ease; }
.career-stop.is-next:hover { transform:translateY(-3px); border-color:#ffe09b; }
.career-stop.is-locked { opacity:.55; border-style:dotted; }
.career-crest { width:clamp(68px,19vw,94px); height:98px; object-fit:contain; filter:drop-shadow(0 4px 8px #0009); }
.career-club-name { max-width:100%; color:#f4fbfc; font-size:14px; line-height:1.3; text-align:center; }
.career-years { padding:5px 8px; color:#d5e8ea; background:#071a20; border:1px solid #1b6871; border-radius:10px; font-size:12px; white-space:nowrap; }
.career-lock { display:grid; place-items:center; width:58px; height:70px; color:#ffd27a; border:2px solid currentColor; border-radius:17px 17px 22px 22px; font-size:34px; font-weight:800; box-shadow:0 0 20px #ffc65b20; }
.career-arrow { align-self:center; flex:0 0 auto; color:#29dcea; font-size:34px; font-weight:900; }
.career-hint { margin:2px auto 10px; color:#8fa9ad; font-size:13px; text-align:center; }
.timer-controls { display:flex; justify-content:center; margin:6px auto 14px; }
.timer-controls button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:8px 18px; border-color:#41aab4; color:#dffbfc; background:#0e252a; font-size:14px; }
.timer-controls button span { color:#63d0d9; font-size:18px; font-weight:900; }

.questionmedia:where(audio) {
  width:min(100%,440px)}

.authpage {
  max-width:470px;
  margin:76px auto}

.authcard {
  background:linear-gradient(145deg,#142126,#0d1518);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px}

.authcard h1 {
  font-size:27px;
  margin:0 0 8px}

.authcard p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8}

.authform {
  display:grid;
  gap:12px;
  margin-top:18px}

.authform label {
  font-size:11px;
  color:#becacc}

.authform .primary {
  width:100%}

.seo-intro {
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-align:right}

.seo-intro h2 {
  margin:0 0 8px;
  color:var(--text);
  font-size:15px;
  line-height:1.6}

.seo-intro p {
  margin:7px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.9}

.authswitch {
  display:flex;
  gap:8px;
  margin-top:14px}

.authswitch button {
  flex:1}

.authnotice {
  border:1px solid #388c9850;
  background:#388c9812;
  border-radius:12px;
  padding:12px;
  color:#9fc8cd;
  font-size:11px;
  line-height:1.8}

.authnotice.error {
  border-color:#d9606c80;
  color:#ffc2c7;
  background:#d9606c16}

@media(max-width:700px) {
  .feedbackbox {
  grid-template-columns:1fr;
  gap:14px}

.filterrow {
  grid-template-columns:1fr}

.authpage {
  margin:48px auto}

}
.difficultyrow, .aidchoices { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.aidchoice.selected { border-color: var(--teal2); color: var(--teal2); }
.aidgrid { margin: 12px 0; }
.aidchoice { display: grid; text-align: right; gap: 5px; min-width: 155px; }
.aidchoice small { color: var(--muted); white-space: normal; line-height: 1.5; }
.settingsrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.settingsdialog { width: min(560px, calc(100% - 28px)); max-height:min(860px,calc(100dvh - 28px)); overflow:auto; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background:linear-gradient(155deg,#101d22,#091115); color: var(--white); }
.settingsdialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.settingsdialog h2 { margin:0; font-size:30px; }
.settingsheader { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.settingsheader p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.settingsclose { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--white); background:#17262b; font-size:29px; line-height:1; cursor:pointer; }
.settingspanel { margin-top:14px; padding:17px; border:1px solid var(--line); border-radius:18px; background:#122127a8; }
.settingspanel-title { display:flex; align-items:center; gap:12px; padding-bottom:12px; }
.settingspanel-title > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid #388c9860; border-radius:12px; color:var(--teal2); background:#388c981a; font-size:20px; }
.settingspanel-title b { display:block; font-size:17px; }
.settingspanel-title small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.settingitem, .settingslogout { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.settingitem b, .settingslogout b { display: block; }
.settingitem small, .settingslogout small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settingslogout { margin-top:14px; padding:17px; border:1px solid #388c9870; border-radius:18px; background:linear-gradient(135deg,#14798a44,#102128); }
.settingslogout b { color:var(--white); }
.settingslogout.signed-in b, .logoutbutton { color: #ff777f; }
.feedback-setting { width:100%; padding:15px 18px; border:1px solid var(--line); background:#122127a8; color:var(--white); text-align:right; cursor:pointer; }
.feedback-setting:hover { background:#388c9810; }
.feedback-menu-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:1px solid #53bec780; border-radius:12px; color:#9cf5f4; background:#388c9820; font-size:21px; font-weight:800; }
.feedback-setting-copy { flex:1; }
.feedback-setting-copy small { font-size:10px; }
.feedback-setting-arrow { display:grid; place-items:center; width:28px; height:28px; margin-inline-end:3px; color:var(--teal2); font-size:18px; }
.toggle-control { position:relative; flex:0 0 52px; width:52px; height:29px; }
.toggle-control input { position:absolute; opacity:0; pointer-events:none; }
.toggle-control span { position:absolute; inset:0; border:1px solid var(--line); border-radius:999px; background:#26363b; cursor:pointer; transition:.2s ease; }
.toggle-control span::after { content:''; position:absolute; top:3px; right:3px; width:21px; height:21px; border-radius:50%; background:#d9e2e3; transition:.2s ease; }
.toggle-control input:checked + span { border-color:#4fc3ce; background:#2a9aa6; }
.toggle-control input:checked + span::after { transform:translateX(-23px); background:#fff; }
.volume-setting { align-items:flex-end; }
.volume-control { display:flex; align-items:center; gap:8px; width:min(52%,240px); direction:ltr; }
.volume-control input { width:100%; accent-color:#4db9c3; cursor:pointer; }
.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theme-options button { display:grid; gap:8px; padding:8px; border:1px solid var(--line); border-radius:14px; color:var(--white); background:#0b1519; cursor:pointer; }
.theme-options button.active { border-color:#4fc3ce; box-shadow:0 0 0 2px #4fc3ce22; }
.theme-preview { display:grid; place-items:center; min-height:76px; border-radius:10px; font-size:28px; }
.theme-preview-light { color:#546b70; background:linear-gradient(150deg,#f7fafb,#cfdcdf); }
.theme-preview-dark { color:#dffaff; background:linear-gradient(150deg,#183038,#081014); }
.light .settingsdialog { background:linear-gradient(155deg,#f7fbfb,#e4eeee); }
.light .settingspanel,.light .feedback-setting { background:#f7fbfbcf; }
.light .theme-options button { color:#142126; background:#edf4f4; }
.light .settingsclose {
  color:#365157;
  background:linear-gradient(145deg,#fff,#e8f0f1);
  border-color:#c9d9dc;
  box-shadow:0 3px 10px #17323812;
}
.light .settingsclose:hover { color:#18383e; background:#dcebed; border-color:#a9c9ce; }
.light .settingslogout.signed-in {
  border-color:#e5b9bb;
  background:linear-gradient(135deg,#fff5f4,#f6e9e9);
}
.light .settingslogout.signed-in b { color:#a33c44; }
.light .settingslogout.signed-in small { color:#69777a; }
.light .settingslogout.signed-in .logoutbutton {
  color:#a23a42;
  border-color:#e4a5a9;
  background:#fff9f8;
}
.light .settingslogout.signed-in .logoutbutton:hover { color:#872b33; background:#fce8e7; }
.feedbackdialog { width:min(520px,calc(100% - 28px)); padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--panel); color:var(--white); }
.feedbackdialog h2 { margin:8px 0; }
.feedback-description { color:var(--muted); font-size:13px; line-height:1.8; margin:0 0 20px; }
.feedbackdialog .feedbackform { gap:11px; }
.packages-hero { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:190px; margin:12px 0 18px; padding:24px clamp(18px,4vw,34px); overflow:hidden; border:1px solid #388c9866; border-radius:22px; background:radial-gradient(ellipse at 78% 50%,#1a4550 0,transparent 42%),linear-gradient(135deg,#14282d,#0d1518 70%); }
.packages-copy { position:relative; z-index:1; }
.packages-copy h2 { margin:8px 0; font-size:clamp(25px,5vw,34px); }
.packages-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.packages-back { position:absolute; top:14px; inset-inline-start:16px; padding:8px 11px; font-size:11px; }
.packages-art { width:clamp(125px,30vw,190px); height:auto; margin-top:16px; flex:0 0 auto; filter:drop-shadow(0 10px 20px #0008); }
.soundtoggle { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.soundtoggle input { width: 18px; height: 18px; accent-color: var(--teal); }
.logoutbutton { border: 1px solid #c84d5880; border-radius: 11px; background: #c84d5818; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.logoutbutton:hover { background: #c84d5833; }
.scoretools { display: flex; align-items: center; justify-content: center; gap: 10px; }
.scoretools .ghost { padding: 4px 12px; min-width: 34px; }
.difficultyrow button { line-height: 1.4; }
.difficultyrow button small { color: var(--teal2); font-weight: 800; }
.tossdialog { position:relative; width:min(410px,92vw); overflow:hidden; text-align:center; border:1px solid rgba(56,140,152,.55); background:radial-gradient(circle at 50% 45%,#18323a 0,#101d22 45%,#091115 100%); }
.tossdialog::before { content:''; position:absolute; inset:-30% 10% auto; height:180px; pointer-events:none; background:radial-gradient(ellipse,var(--winner-soft,#388c9838),transparent 70%); filter:blur(12px); }
.tossdialog h2 { position:relative; margin:8px 0 2px; font-size:30px; }
.toss-stage { position:relative; display:grid; place-items:center; min-height:245px; padding:20px 0 4px; perspective:900px; }
.toss-stage::before { content:''; position:absolute; top:53%; width:190px; height:36px; border-radius:50%; background:#0009; filter:blur(13px); transform:translateY(60px) scale(.8); opacity:.55; transition:.35s ease; }
.tosscoin { --team-one:#62a7ef; --team-two:#df5968; position:relative; width:164px; height:164px; border-radius:50%; transform-style:preserve-3d; transform:rotateY(0); filter:drop-shadow(0 14px 22px #0009); }
.tossface { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; overflow:hidden; padding:18px; border:5px solid color-mix(in srgb,currentColor 76%,#f8f2c6); border-radius:50%; box-shadow:inset 0 0 0 3px #ffffff35,inset 0 0 34px #0008,0 0 26px currentColor; color:var(--team-one); background:radial-gradient(circle at 34% 24%,#ffffff70 0,transparent 18%),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--team-one) 88%,#fff),color-mix(in srgb,var(--team-one) 66%,#061014) 72%); opacity:0; visibility:hidden; transition:opacity .035s linear; }
.tossface.active { opacity:1; visibility:visible; }
.tossface::after { content:''; position:absolute; inset:9px; border:1px dashed #ffffff55; border-radius:50%; }
.tossface img { position:relative; z-index:1; width:62px; height:62px; border:2px solid #ffffff9e; border-radius:50%; object-fit:contain; background:#07111599; box-shadow:0 7px 18px #0008; }
.tossface span { position:relative; z-index:1; max-width:125px; color:#fff; font-size:16px; font-weight:900; line-height:1.35; text-shadow:0 2px 8px #000; }
.tossface-two { color:var(--team-two); background:radial-gradient(circle at 34% 24%,#ffffff70 0,transparent 18%),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--team-two) 88%,#fff),color-mix(in srgb,var(--team-two) 66%,#061014) 72%); }
.tosscoin.tossing { animation:coin-flip-safe 1.85s cubic-bezier(.42,0,.18,1) forwards; }
.tossdialog.toss-complete .tosscoin { filter:drop-shadow(0 0 24px var(--winner-color,#61cbd3)) drop-shadow(0 14px 22px #0009); }
.tossdialog.toss-complete .toss-stage::before { background:var(--winner-soft,#388c9855); opacity:.9; }
.tossresult { position:relative; min-height:24px; margin-top:13px; color:var(--muted); font-size:12px; font-weight:700; transition:.25s ease; }
.tossdialog.toss-complete .tossresult { color:var(--winner-color,var(--teal2)); font-size:14px; }
.tossdialog #tossButton { position:relative; min-width:210px; margin-top:8px; }
@keyframes coin-flip-safe { 0% { transform:scaleX(1); } 12.5% { transform:scaleX(.1); } 25% { transform:scaleX(1); } 37.5% { transform:scaleX(.1); } 50% { transform:scaleX(1); } 62.5% { transform:scaleX(.1); } 75% { transform:scaleX(1); } 87.5% { transform:scaleX(.1); } 100% { transform:scaleX(1); } }
@media(prefers-reduced-motion:reduce) { .tosscoin.tossing { animation:coin-settle-safe .45s ease-in-out forwards; } @keyframes coin-settle-safe { 50% { transform:scaleX(.14); } to { transform:scaleX(1); } } }
@media (max-width: 700px) { .settingsrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settingsrow label:last-child { grid-column: 1 / -1; } }
.emptycontent { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.8; }
.setupstep { animation: setup-in .22s ease-out; }
#setup .heading > div { display: grid; gap: 8px; }
#setup .heading h2 { line-height: 1.35; }
.setupintro { color: var(--muted); margin: 0 0 12px; font-size: 12px; line-height: 1.65; }
.teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.teamgrid .box { min-width: 0; padding: 12px; }
.teamgrid .field { padding: 10px; font-size: 14px; }
.team-name-card { position: relative; overflow: hidden; }
.team-emblem { position:relative; display: grid; place-items: center; box-sizing:border-box; width: 42px; height: 42px; margin: 0 0 10px auto; border: 1px solid currentColor; border-radius: 13px; box-shadow: inset 0 0 18px currentColor, 0 5px 16px #0004; font-size: 23px; line-height: 1; }
.team-emblem img { position:absolute; left:50%; top:50%; display:block; width:34px; height:34px; transform:translate(-50%,-50%); border-radius:50%; object-fit:contain; object-position:50% 50%; }
.team-name-card { border-color: var(--team-color,#388c98); background: linear-gradient(145deg,var(--team-soft,#19363a),var(--panel)); }
.team-name-card > label:not(:first-child) { margin-top: 10px; }
.team-choice { border-color: var(--team-color,#388c98); }
.team-one .team-emblem,.team-two .team-emblem { color: var(--team-color,#388c98); }
.score { border-color: var(--team-color,var(--line)); background: linear-gradient(145deg,var(--team-soft,#172126),var(--panel)); }
.score > div:first-child::before { content: ''; display: inline-block; width: 24px; height: 24px; margin-inline-end: 7px; vertical-align: -6px; border-radius: 50%; background: var(--team-icon) center / cover no-repeat; box-shadow: 0 0 10px var(--team-soft,transparent); }
.team-name-card select.field { padding-inline-end: 32px; background-position: left 12px center; }
select.field { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%2391a4a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 12px center; background-size:14px; padding-inline-end:32px; }
.settingsrow select.field { padding-left:32px; }
.settingsrow { column-gap: 12px; row-gap: 18px; }
.settingsrow label { display:grid; gap:7px; align-content:start; min-width: 0; font-size: 11px; line-height:1.5; }
.settingsrow .field { padding: 10px 8px; font-size: 12px; }
.categorygroups { display: grid; gap: 24px; margin-top: 18px; }
.categorygroup { border-top: 1px solid var(--line); padding-top: 12px; }
.categorybrowsehead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0; }
.categorybrowsehead b { color: var(--teal2); font-size: 15px; }
.categorybrowsehead small { display: block; color: var(--muted); font-size: 11px; }
.categorybrowsehead:has(button) { justify-content: flex-start; }
.groupchoices { margin-top: 12px; }
.categorygroup h3 { margin: 0 0 12px; font-size: 14px; line-height: 1.6; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.groupcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.groupcards .categorycard { height: 210px; position: relative; overflow: hidden; padding: 0; border-color: #388c9870; isolation: isolate; }
.categorycard .categoryartback { display:none; }
.categorycard .categoryart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit:cover; transition: transform .25s ease; }
.categorycard:hover .categoryart { transform: scale(1.04); }
.categorycard .categoryshade { position: absolute; z-index: 0; inset: 25% 0 0; background: linear-gradient(180deg, transparent, rgba(5,10,13,.48) 30%, rgba(5,10,13,.96)); }
.categorycard b,.categorycard small { position: relative; z-index: 1; margin-inline: 12px; text-shadow: 0 2px 8px #000; }
.categorycard.posterfit .categoryartback { display:block; position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px); object-fit:cover; filter:blur(16px) brightness(.5) saturate(1.18); transform:scale(1.1); opacity:.92; z-index:0; }
.categorycard.posterfit .categoryart { z-index:1; object-fit:contain; object-position:center; box-sizing:border-box; padding:6px 6px 44px; }
.categorycard.posterfit .categoryshade { z-index:2; }
.categorycard.posterfit b,.categorycard.posterfit small { z-index:3; }
.categorycard.animezoom .categoryart { transform:scale(1.3); }
.categorycard.animezoom:hover .categoryart { transform:scale(1.34); }
.categorycard.animezoomclose .categoryart { transform:scale(1.5); }
.categorycard.animezoomclose:hover .categoryart { transform:scale(1.54); }
.categorycard.animebleach .categoryart { transform-origin:50% 64%; }
.categorycard.animezoomstrong .categoryart { transform:scale(1.48); }
.categorycard.animezoomstrong:hover .categoryart { transform:scale(1.52); }
.categorycard.animezoommax .categoryart { transform:scale(1.72); }
.categorycard.animezoommax:hover .categoryart { transform:scale(1.76); }
.categorycard b { margin-top: auto; font-size: 14px; line-height: 1.6; }
.categorycard small { color: #d3e5e4; margin-bottom: 12px; }
.categorycard.selected { border-color: var(--owner-color,var(--teal2)); box-shadow: 0 0 0 2px var(--owner-soft,#388c9870), 0 10px 28px #0006; }
.categorycard.excluded { opacity: .58; filter: saturate(.55); }
.categorygroup-hollywood_movies .categorycard,
.categorygroup-foreign_series .categorycard,
.categorygroup-animation_movies .categorycard {
  height:auto;
  min-height:230px;
  aspect-ratio:4 / 5;
  background:radial-gradient(circle at 50% 34%,#183038 0,#0b171b 48%,#071014 100%);
}
.categorygroup-hollywood_movies .categoryart,
.categorygroup-foreign_series .categoryart,
.categorygroup-animation_movies .categoryart {
  object-fit:contain;
  object-position:center;
  padding:6px 6px 44px;
}
.categorygroup-hollywood_movies .categoryshade,
.categorygroup-foreign_series .categoryshade,
.categorygroup-animation_movies .categoryshade {
  inset:52% 0 0;
  background:linear-gradient(180deg,transparent,rgba(5,10,13,.72) 24%,rgba(5,10,13,.99));
}
.categorygroup-hollywood_movies .categorycard b,
.categorygroup-foreign_series .categorycard b,
.categorygroup-animation_movies .categorycard b {
  width:calc(100% - 24px);
  min-height:42px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-inline:auto;
  padding-bottom:9px;
  line-height:1.35;
  text-align:center;
}
.groupinstruction { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 12px 0; }
.groupselectactions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.groupselectactions span { color: var(--muted); font-size: 12px; }
.groupselectactions button { min-width: 180px; }
.boardcategory { padding: 10px; }
.boardcathead { display: grid; gap: 9px; width: 100%; text-align: center; }
.boardcathead img { display: block; width: 100%; height: 108px; object-fit: cover; border-radius: 11px; border: 1px solid #388c9860; }
.boardcathead b { font-size: 13px; line-height: 1.55; }
.revealbutton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-color: #388c98a0; }
.revealbutton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.difficultygrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; margin-top:16px; align-items:stretch; }
.difficultycolumn { display: grid; grid-template-rows: repeat(2, minmax(72px, auto)); gap: 8px; min-width: 0; }
.questiontile { width:100%; min-width:0; min-height:76px; display:grid; place-content:center; gap:5px; overflow:hidden; text-align:center; padding:8px 2px; }
.questiontile span { display:block; max-width:100%; overflow:hidden; font-size:12px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.questiontile b { color: var(--teal2); font-size: 17px; }
.questiontile.answered-team-red,.questiontile.answered-team-blue { border-color:var(--answer-color,#388c98); background:linear-gradient(145deg,var(--answer-soft,#388c9840),#10191d); box-shadow:inset 0 0 16px var(--answer-soft,#388c9820); }
.questiontile.answered-team-red .answered-label,.questiontile.answered-team-blue .answered-label { display:none; }
.questiontile.answered-no-score { border-color:#66777a88; background:linear-gradient(145deg,#59686a20,#1a222450); }
.questiontile .answered-label { max-width:100%; overflow:hidden; color:#fff; font-size:8px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.answered-team-red .answered-label,.answered-team-blue .answered-label { color:var(--answer-color,#e5f5f5); }
.board-status { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 12px; color:var(--muted); font-size:10px; }
.answered-legend { display:inline-flex; align-items:center; gap:5px; }
.answered-dot { width:9px; height:9px; border-radius:50%; }
.answered-legend .answered-dot { background:var(--team-color,#388c98); box-shadow:0 0 9px var(--team-soft,#388c9866); }
.reviewdialog .answerreveal { margin:14px 0; }
.reviewdialog .step { line-height:1.8; }
.questiontile:disabled { opacity: .28; cursor: default; }
.questiondialog { position:fixed; inset:14px; width:min(760px,calc(100% - 28px)) !important; max-width:760px !important; max-height:calc(100dvh - 28px); margin:auto; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:28px; text-align:center; }
.questiondialog h2 { font-size: clamp(20px, 4vw, 30px); line-height: 1.8; margin: 22px auto; max-width: 650px; }
.questiondialog .value { margin-top: 16px; }
.questionactions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.answerreveal { margin: 22px auto; border: 1px solid #388c9860; border-radius: 14px; padding: 16px; background: #388c9818; color: #fff; font-size: 18px; }
.answerreveal b { color: var(--teal2); }
.questiondialog #nextQuestion { margin: 8px auto 0; }
.questionactions .steal-now { border-color:#bb7d33aa; color:#f5c36c; background:linear-gradient(145deg,#251d12,#151716); }
.questionactions .steal-now:hover { border-color:#f1b44f; color:#ffda8e; }
#categoryStep .filterrow { grid-template-columns: 1fr; }
.settings-trigger { display: inline-flex; align-items: center; gap: 8px; }
.settings-trigger span { color: var(--teal2); font-size: 17px; }
.bottom-nav { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(480px, calc(100% - 28px)); display: grid; grid-template-columns: repeat(3,1fr); padding: 8px; border: 1px solid #315159; border-radius: 20px; background: rgba(8,15,18,.94); box-shadow: 0 12px 45px #0009; backdrop-filter: blur(18px); }
.bottom-nav button { display: grid; place-items: center; gap: 2px; min-height: 53px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; }
.bottom-nav button span { font-size: 22px; line-height: 1.1; }
.bottom-nav .nav-card-icon { display:grid; place-items:center; }
.bottom-nav .nav-card-icon svg { width:24px; height:29px; overflow:visible; }
.bottom-nav button small { font: inherit; font-size: 10px; }
.bottom-nav button.active { color: #dffbfc; background: #388c9838; }
.bottom-nav button.active span { color: var(--teal2); }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 12px; margin-top: 14px; scrollbar-width: thin; }
.category-tab { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #0e171a; font-size: 11px; white-space: nowrap; }
.category-tab.active { color: #e9ffff; border-color: #388c98; background: #12606a; }
.pick-tracker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0 16px; }
.pick-team { min-width: 0; padding: 11px; border: 1px solid var(--team-color,var(--line)); border-radius: 15px; background: linear-gradient(145deg,var(--team-soft,#172126),#0d171b); }
.pick-team.active { border-color: #388c98a0; box-shadow: 0 0 0 1px #388c9830; }
.pick-team-title { display: block; margin-bottom: 9px; color: var(--team-color,var(--white)); font-size: 12px; }
.pick-team-title::before { content:''; display:inline-block; width:22px; height:22px; margin-inline-end:7px; vertical-align:middle; border-radius:50%; background:var(--team-icon) center / cover no-repeat; }
.house-mini-sigil { width:22px; height:22px; margin-inline-end:5px; border-radius:50%; vertical-align:middle; }
.pick-team .pick-slot.filled { border-color: var(--team-color,var(--line)); box-shadow: inset 0 0 12px var(--team-soft,transparent); }
.pick-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.pick-slot { min-width: 0; min-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #101d22; }
.pick-slot:not(:disabled) { cursor: pointer; }
.pick-slot:not(.filled) { color: var(--teal2); font-size: 18px; }
.pick-slot.filled { color: #dff9fa; border-color: #388c987a; background: #14505a66; font-size: 10px; }
.pick-slot:not(:disabled):hover { border-color:var(--teal2); background:#16424a; }
.category-picker { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); animation:setup-in .18s ease-out; }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.picker-heading h3 { margin:0; font-size:15px; }
.picker-heading button { white-space:nowrap; }
.timer-urgent { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 14px; border:1px solid #ff657066; border-radius:999px; color:#ff737c !important; background:#ff515c12; box-shadow:inset 0 0 16px #ff515c0d; font-size:14px !important; font-weight:800; letter-spacing:0; }
.active-match { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; border-color:#388c9880; background:linear-gradient(100deg,#388c9820,transparent),var(--panel); }
.active-match b,.active-match small { display:block; }
.active-match small { margin-top:5px; color:var(--muted); }
.question-art { width:min(100%,520px); height:clamp(180px,40vw,310px); object-fit:cover; border:1px solid #388c9860; background:#071114; }
.categorygroup { border: 0; padding-top: 4px; }
.categorygroup h3 { margin-bottom: 10px; }
.wrap:has(.bottom-nav:not(.hidden)) { padding-bottom: 112px; }
@media(max-width:700px) { .top { min-height: 46px; } .nav .settings-trigger { font-size: 11px; padding: 8px 10px; } .bottom-nav { bottom: max(8px, env(safe-area-inset-bottom)); } .category-tabs { margin-inline: -2px; } .pick-tracker { gap: 7px; } .pick-team { padding: 8px; } .pick-slot { min-height: 35px; font-size: 9px; } }
@media(max-width:520px) { .active-match { align-items:stretch; flex-direction:column; } .active-match button { width:100%; } .archive-match { grid-template-columns:minmax(0,1fr); } }
@keyframes setup-in { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .groupcards { grid-template-columns: repeat(2, minmax(0,1fr)); } .groupcards .categorycard { height: 185px; } .groupselectactions { align-items: stretch; flex-direction: column; } .groupselectactions button { width: 100%; } .boardcathead img { height: 78px; } .boardcategory { min-width:0; padding:7px; } .difficultygrid { gap:5px; } .difficultycolumn { gap:5px; } .questiontile { min-height:72px; padding:7px 1px; } .questiontile span { font-size:clamp(9px,2.7vw,11px); } .questiontile b { font-size:clamp(14px,4vw,17px); } .questiondialog { inset:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); width:calc(100% - 16px) !important; max-height:calc(100dvh - 16px); padding:18px 14px; } }
.questionmedia { display: block; max-width: min(100%, 560px); max-height: 360px; margin: 12px auto; border-radius: 14px; }
.questionvideo-embed { width: min(100%, 560px); aspect-ratio: 16 / 9; height: auto; border: 1px solid #388c9860; background: #05090b; }
.questionvideo-audio { width: min(100%, 440px); aspect-ratio: 16 / 5; height: auto; }
.questionmedia:where(audio) { width: min(100%, 440px); }
.questionmedia-blurred { filter: blur(13px) saturate(.5); transition: filter .35s ease; }
.questionmedia.question-blur-stage-0 { filter:blur(22px) saturate(.35); }
.questionmedia.question-blur-stage-1 { filter:blur(14px) saturate(.55); }
.questionmedia.question-blur-stage-2 { filter:blur(6px) saturate(.78); }
.player-blur-controls { display:grid; gap:9px; width:min(100%,560px); margin:10px auto 14px; padding:12px; border:1px solid #388c9860; border-radius:14px; background:#0b171c; text-align:center; }
.blur-stages { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.blur-stages span { padding:5px 9px; border:1px solid #388c9840; border-radius:999px; color:var(--muted); font-size:12px; }
.blur-stages span.is-active { border-color:var(--teal2); color:#fff; background:#388c9830; }
.blur-stages span.is-done { border-color:#388c9880; color:var(--teal2); }
.player-blur-controls button { justify-self:center; }
.player-blur-controls button:disabled { opacity:.6; }
.player-blur-controls small { color:var(--muted); font-size:11px; }
.mediacredit { display: block; margin: -3px auto 12px; color: var(--muted); font-size: 10px; }
.mediacredit a { color: var(--teal2); }
.winnerdialog { width: min(540px, calc(100% - 28px)); overflow: hidden; padding: 34px 26px; text-align: center; border: 1px solid #388c9880; background: radial-gradient(ellipse at 50% 0%, #388c9835, transparent 68%), var(--panel); }
.winnerdialog::backdrop { background: #020607cc; backdrop-filter: blur(9px); }
.winnerconfetti { color: #61c7cf; font-size: 26px; letter-spacing: 9px; animation: confetti-float 2s ease-in-out infinite alternate; }
.winneremoji { margin: 8px auto; font-size: 76px; filter: drop-shadow(0 0 22px #efc45b90); animation: winner-pop .65s cubic-bezier(.2,.8,.2,1.2) both; }
.winnerdialog h2 { margin: 8px 0; color: var(--teal2); font-size: clamp(28px, 7vw, 42px); }
.winnerdialog p { color: var(--muted); }
.winnerscores { display: grid; gap: 8px; margin: 22px auto; }
.winnerscores div { padding: 12px; border: 1px solid #388c9860; border-radius: 13px; background: #388c9815; font-weight: 750; }
.winnerdialog .actions { justify-content: center; }
@keyframes winner-pop { from { transform: scale(.45) rotate(-16deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes confetti-float { to { transform: translateY(7px); opacity: .65; } }
.winnerdialog { position:relative; width:min(560px,calc(100% - 28px)); padding:26px clamp(18px,5vw,38px) 30px; border:1px solid color-mix(in srgb,var(--winner-color,#56bdc8) 44%,transparent); border-radius:26px; background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--winner-color,#56bdc8) 12%,transparent),transparent 44%),radial-gradient(ellipse at 50% 100%,#c59a3d0d,transparent 50%),var(--panel); box-shadow:0 28px 90px #0009,0 0 48px color-mix(in srgb,var(--winner-color,#56bdc8) 12%,transparent); }
.winnerdialog::before { content:''; position:absolute; inset:0 18% auto; height:2px; border-radius:0 0 99px 99px; background:linear-gradient(90deg,transparent,var(--winner-color,#56bdc8),transparent); opacity:.8; }
.winner-kicker { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.16em; }
.winner-kicker-dot { width:4px; height:4px; border-radius:50%; background:var(--winner-color,#56bdc8); box-shadow:0 0 9px var(--winner-color,#56bdc8); }
.winner-team-mark { position:relative; isolation:isolate; display:grid; place-items:center; width:144px; height:144px; margin:20px auto 18px; border:1px solid color-mix(in srgb,var(--winner-color,#56bdc8) 54%,transparent); border-radius:50%; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--winner-color,#56bdc8) 17%,var(--panel)) 0 43%,color-mix(in srgb,var(--winner-color,#56bdc8) 7%,var(--panel)) 68%,var(--panel) 100%); box-shadow:inset 0 0 30px color-mix(in srgb,var(--winner-color,#56bdc8) 12%,transparent),0 0 0 7px color-mix(in srgb,var(--winner-color,#56bdc8) 5%,transparent),0 0 38px color-mix(in srgb,var(--winner-color,#56bdc8) 14%,transparent); }
.winner-team-mark::before { content:''; position:absolute; z-index:-1; inset:-9px; border:1px solid color-mix(in srgb,var(--winner-color,#56bdc8) 25%,transparent); border-radius:50%; }
.winner-mark-orbit { position:absolute; inset:-15px!important; display:block!important; border:1px dashed color-mix(in srgb,var(--winner-color,#56bdc8) 24%,transparent)!important; border-radius:50%!important; background:none!important; animation:winner-orbit 36s linear infinite; }
.winner-team-mark img { width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 5px 12px #0009); }
.winner-mark-star { position:absolute; inset:auto 1px 7px auto; display:grid!important; place-items:center; width:26px; height:26px; border:1px solid color-mix(in srgb,var(--winner-color,#56bdc8) 55%,transparent)!important; border-radius:50%!important; color:var(--winner-color,#56bdc8); background:var(--panel)!important; font-size:12px; }
.winner-team-mark.is-tie { --winner-color:#d8b96b; }
.winnerdialog .eyebrow { margin:0 0 5px; color:var(--winner-color,#56bdc8); font-size:11px; letter-spacing:.08em; }
.winnerdialog h2 { margin:4px 0 8px; color:var(--white); font-size:clamp(29px,7.4vw,44px); text-shadow:0 4px 24px color-mix(in srgb,var(--winner-color,#56bdc8) 25%,transparent); }
.winnerdialog p { margin:0 auto; color:var(--muted); line-height:1.8; }
.winnerscores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:22px auto 13px; }
.winnerscores div { display:grid; align-content:center; gap:6px; min-height:78px; padding:12px 8px; border:1px solid #ffffff12; border-radius:16px; color:var(--muted); background:linear-gradient(145deg,#ffffff07,transparent),#0b1419; font-size:12px; font-weight:700; }
.winnerscores div b { color:var(--white); font-size:clamp(18px,4.8vw,24px); font-variant-numeric:tabular-nums; }
.winner-score-champion { border-color:color-mix(in srgb,var(--winner-color,#56bdc8) 48%,transparent)!important; color:var(--white)!important; background:linear-gradient(145deg,color-mix(in srgb,var(--winner-color,#56bdc8) 16%,transparent),#0b1419 72%)!important; box-shadow:inset 0 0 20px color-mix(in srgb,var(--winner-color,#56bdc8) 6%,transparent),0 0 22px color-mix(in srgb,var(--winner-color,#56bdc8) 8%,transparent); }
.winner-score-champion b { color:var(--winner-color,#56bdc8)!important; }
.winner-statline { display:inline-flex; justify-content:center; margin:0 auto 18px; padding:8px 15px; border:1px solid color-mix(in srgb,var(--winner-color,#56bdc8) 28%,transparent); border-radius:999px; color:color-mix(in srgb,var(--winner-color,#56bdc8) 75%,white); background:color-mix(in srgb,var(--winner-color,#56bdc8) 7%,transparent); font-size:11px; font-weight:750; }
.winnerdialog .actions { gap:9px; }
.winnerdialog .actions button { min-height:48px; border-radius:14px; }
.winner-replay .winner-team-mark { animation:winner-mark-enter .72s cubic-bezier(.2,.8,.2,1.1) both; }
@keyframes winner-mark-enter { from { transform:scale(.72) rotate(-8deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }
@keyframes winner-orbit { to { transform:rotate(360deg); } }
@media(max-width:600px) { .winnerdialog { padding-inline:16px; } .winnerscores { gap:7px; } .winnerscores div { min-height:72px; padding-inline:5px; } }
.filterrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.feedbackbox { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; border-color: #388c9870; padding: 26px; }
.feedbackbox h3 { font-size: 21px; margin: 12px 0; }
.feedbackbox p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.feedbackicon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: var(--teal2); background: #388c9820; font-size: 22px; }
.feedbackform { display: grid; gap: 9px; }
.feedbackform label { font-size: 11px; color: #becacc; }
.feedbackform textarea { resize: vertical; line-height: 1.7; }
.whatsapp { text-align: center; text-decoration: none; display: block; }
.feedbackform small { color: var(--muted); font-size: 10px; }
.authpage { max-width: 470px; margin: 76px auto; }
.authcard { background: linear-gradient(145deg, #142126, #0d1518); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.authcard > .eyebrow { display: block; margin-bottom: 14px; line-height: 1.6; }
.profile-back { display:block; margin:0 0 18px auto; padding:9px 16px; }
.authcard h1 { font-size: 27px; line-height: 1.4; margin: 0 0 12px; }
.authcard p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.authform { display: grid; gap: 12px; margin-top: 18px; }
.authform label { font-size: 11px; color: #becacc; }
.authform .primary { width: 100%; }
.authswitch { display: flex; gap: 8px; margin-top: 14px; }
.authswitch button { flex: 1; }
.authnotice { border: 1px solid #388c9850; background: #388c9812; border-radius: 12px; padding: 12px; color: #9fc8cd; font-size: 11px; line-height: 1.8; }
.social-auth-divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.social-auth-divider::before,.social-auth-divider::after { content:''; height:1px; flex:1; background:var(--line); }
.social-auth-buttons { display:flex; justify-content:center; width:100%; }
.social-auth { width:min(100%, 360px); min-width:0; padding:10px 8px; font-size:11px; }
.social-auth span { display:inline-grid; place-items:center; width:20px; height:20px; margin-inline-end:5px; border-radius:50%; background:#fff; color:#111; font-weight:900; }
.helpers-setup { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.helpers-setup > div:first-child { display:grid; gap:4px; }
.helpers-setup small { color:var(--muted); font-size:10px; line-height:1.6; }
.helpers-mode { display:flex; gap:7px; }
.helpers-mode button { padding:8px 12px; font-size:11px; }
.helpers-mode button.active { border-color:var(--teal2); background:#2a7d8750; color:#fff; }
.helper-actions { max-width:620px; margin:8px auto 14px; padding:11px; border:1px solid #4aa8b655; border-radius:13px; background:#0b202585; }
.helper-actions > small { display:block; margin-bottom:8px; color:#a9c8cc; font-size:10px; }
.helper-actions > div { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.helper-actions button { min-height:34px; padding:6px 10px; font-size:10px; }
.helper-actions button.is-active { border-color:#e8bb69; color:#ffe09a; }
.helper-actions p { margin:8px 0 0; color:#d8e7e8; font-size:10px; line-height:1.6; }
.explanation-toggle { margin:0 auto 8px; min-height:36px; padding:7px 14px; font-size:11px; }
.question-explanation { max-width:620px; margin:0 auto 14px; padding:12px 14px; border-inline-start:3px solid var(--teal2); border-radius:10px; background:#081519cc; color:#b9cbce; font-size:11px; font-weight:400; line-height:1.8; text-align:right; }
.question-rating { margin:13px auto 0; padding-top:10px; border-top:1px solid var(--line); }
.question-rating small { display:block; margin-bottom:7px; color:var(--muted); font-size:9px; }
.question-rating > div { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.question-rating button { border:1px solid #395156; border-radius:999px; padding:5px 9px; background:transparent; color:#91a4a8; font:inherit; font-size:9px; cursor:pointer; }
.question-rating button.selected { border-color:var(--teal2); background:#388c9830; color:#dffcff; }
.answer-correct { animation:answer-correct-pulse .5s ease-out; }
.answer-wrong { animation:answer-wrong-pulse .5s ease-out; }
@keyframes answer-correct-pulse { 0% { border-color:#54d19b; box-shadow:0 0 0 0 #54d19b55; } 100% { box-shadow:0 0 0 12px transparent; } }
@keyframes answer-wrong-pulse { 0% { border-color:#dd6871; box-shadow:0 0 0 0 #dd687155; } 100% { box-shadow:0 0 0 12px transparent; } }
@media (max-width:600px) { .helpers-setup { align-items:stretch; flex-direction:column; } .helpers-mode button { flex:1; } }
.buy { margin-top: 14px; width: 100%; }
.payment-options { display: flex; gap: 10px; margin: 12px 0; }
.payment-options button { flex: 1; }
.payment-options .selected { border-color: var(--teal2); color: var(--teal2); }
.payment-options .payicon { pointer-events:none; }
.paymentnotice { display: grid; gap: 8px; margin: 16px 0; padding: 15px; border: 1px solid #388c9860; border-radius: 13px; background: #388c9812; line-height: 1.7; }
.paymentnotice b { color: var(--teal2); }
.wallet-number { width: fit-content; direction: ltr; color: var(--white); font-size: 21px; letter-spacing: .06em; padding: 7px 11px; border-radius: 9px; background: #388c9826; }
.paymentnotice span { color: var(--muted); font-size: 13px; }
.whatsapp-pay { width: 100%; background: #167b50; border-color: #37b879; }
.whatsapp-pay:hover { background: #1b9460; }
dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
dialog[open] { margin: auto; }
dialog.box { max-width: 420px; width: calc(100% - 28px); color: var(--white); background: #10191d; }
dialog .close { float: left; }
@media (max-width: 700px) {
  .filterrow { grid-template-columns: 1fr; }
  .feedbackbox { grid-template-columns: 1fr; gap: 14px; }
  .packages-hero { min-height:164px; padding:42px 16px 18px; }
  .packages-art { width:clamp(110px,31vw,155px); margin-inline-start:-8px; }
  .packages-copy p { max-width:210px; }
  .feedbackdialog { padding:24px 18px; }
  .authpage { margin: 48px auto; }
}