@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}

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}

.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}

.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 {
  color:var(--muted);
  font-size:12px;
  margin-top:14px}

.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:hover {
  border-color:#388c9877}

.pack strong {
  font-size:22px}

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

.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 {
  border:1px solid #3e5258;
  padding:3px 7px;
  border-radius:5px;
  color:#e4eeee}

.archive {
  display:grid;
  grid-template-columns:1fr 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}

.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:20px;
  left:50%;
  transform:translateX(-50%);
  background:#172529;
  border:1px solid #388c98;
  color:white;
  padding:12px 18px;
  border-radius:12px;
  z-index:3}

.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}

.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}

@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)); padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--white); }
.settingsdialog::backdrop { background: #000b; backdrop-filter: blur(5px); }
.settingsdialog h2 { margin: 6px 0 22px; }
.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: 12px; padding: 17px; border: 1px solid #c84d5860; border-radius: 14px; background: #c84d5810; }
.settingslogout b, .logoutbutton { color: #ff777f; }
.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 { width: min(380px, 92vw); text-align: center; border: 1px solid rgba(56,140,152,.5); }
.tossball { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; margin: 22px auto; padding: 14px; background: radial-gradient(circle at 35% 25%, #55bac4, #17616c 72%); box-shadow: 0 0 30px rgba(56,140,152,.3); font-size: 1.1rem; font-weight: 800; }
@media (max-width: 700px) { .settingsrow { grid-template-columns: 1fr; } }
.emptycontent { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.8; }
.setupstep { animation: setup-in .22s ease-out; }
.setupintro { color: var(--muted); margin: 0 0 16px; }
.categorygroups { display: grid; gap: 20px; margin-top: 18px; }
.categorygroup { border-top: 1px solid var(--line); padding-top: 14px; }
.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: 15px; color: var(--teal2); }
.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 .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 b { margin-top: auto; font-size: 14px; line-height: 1.6; }
.categorycard small { color: #d3e5e4; margin-bottom: 12px; }
.categorycard.selected { border-color: var(--teal2); box-shadow: 0 0 0 2px #388c9870, 0 10px 28px #0006; }
.categorycard.excluded { opacity: .58; filter: saturate(.55); }
.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; margin-top: 16px; align-items: stretch; }
.difficultycolumn { display: grid; grid-template-rows: repeat(2, minmax(72px, auto)); gap: 8px; min-width: 0; }
.questiontile { min-height: 76px; display: grid; place-content: center; gap: 5px; text-align: center; padding: 8px 4px; }
.questiontile b { color: var(--teal2); font-size: 17px; }
.questiontile:disabled { opacity: .28; cursor: default; }
.questiondialog { width: min(760px, calc(100% - 28px)) !important; max-width: 760px !important; 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; }
#categoryStep .filterrow { grid-template-columns: 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 { padding: 7px; } .questiondialog { padding: 22px 16px; } }
.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; }
.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; } }
.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; }
.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; }
.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); }
.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; }
  .authpage { margin: 48px auto; }
}