:root {
  --bg: #081521;
  --panel: #102235;
  --panel2: #162b40;
  --line: #22515b;
  --orange: #f2c879;
  --primary: #43d4c1;
  --purple: #4a8bc1;
  --pink: #f08a79;
  --muted: #a3b7c5;
  --green: #45d6a6;
  --success: #45d6a6;
  --danger: #ff7378;
  --cyan: #49d3d2;
  --gold: #f4cf7b;
  --white: #f2f7f4;
  --text: #f2f7f4;
}

body {
  background:
    radial-gradient(ellipse at 10% 85%, #12424b 0, transparent 38%),
    radial-gradient(ellipse at 100% 12%, #253b56 0, transparent 32%),
    radial-gradient(ellipse at 48% 42%, #112b3b 0, transparent 54%),
    var(--bg);
}

body:before {
  background-image:
    radial-gradient(2px 2px at 18% 22%, #a5f4e488 45%, transparent 100%),
    radial-gradient(1px 1px at 74% 18%, #fff7 45%, transparent 100%),
    radial-gradient(2px 2px at 81% 72%, #f4cf7b88 45%, transparent 100%),
    radial-gradient(1px 1px at 33% 83%, #79d8e966 45%, transparent 100%),
    radial-gradient(1px 1px at 57% 41%, #fff7 45%, transparent 100%);
  opacity: .38;
}

.pointer-light {
  background: radial-gradient(420px circle at var(--pointer-x) var(--pointer-y), #42d4c122, transparent 72%);
}

header {
  background: #091724e8;
  border-bottom-color: #48cbbb35;
  box-shadow: 0 6px 26px #020b1280;
}

.logo,
.resultMark {
  color: #09212a;
  background: linear-gradient(145deg, #74ead4, #3bb8bd 64%, #548cc2);
  border-color: #9cfff277;
  box-shadow: 0 0 30px #43d4c13b, inset 0 1px #ffffffa6;
}

.logo {
  border-radius: 14px 14px 14px 5px;
}

.hero {
  border-color: #43d4c155;
  background:
    radial-gradient(circle at 82% 25%, #367c8b38, transparent 34%),
    radial-gradient(circle at 12% 100%, #1e738044, transparent 42%),
    linear-gradient(118deg, #10283b, #112337 58%, #162c3d);
  box-shadow: 0 18px 54px #020b1270;
}

.hero:after {
  content: "✦";
  left: 7%;
  top: -60px;
  color: #80f0de0a;
  font-size: 310px;
}

.hero-mark {
  border-color: #83eada88;
  border-radius: 50%;
  color: #a6fff0;
  background:
    radial-gradient(circle at 35% 30%, #74ead477, transparent 30%),
    radial-gradient(circle, #1d6370, #123247 70%);
  box-shadow: 0 0 0 10px #43d4c10b, 0 0 48px #43d4c14a, inset 0 0 34px #72e6d21c;
}

.hero-mark:before {
  inset: -12px;
  border-color: #f2c87955;
  border-radius: 50%;
}

.eyebrow {
  color: var(--orange);
}

.pill {
  background: #70dccc0b;
  border-color: #83eada22;
}

.card {
  background: linear-gradient(145deg, #12283bee, #0e2032f5 72%, #132a3b);
  border-color: #b0e7e512;
  box-shadow: 0 9px 26px #020b1245;
}

.card:hover {
  border-color: #43d4c166;
  box-shadow: 0 15px 34px #020b1275, 0 0 22px #43d4c10b;
}

.mode.selected {
  border-color: #63e4d2;
  background: linear-gradient(130deg, #1a3f4d, #183047);
  box-shadow: 0 0 0 1px #43d4c133, 0 0 26px #43d4c11d;
}

.mode:nth-child(1) .icon,
.mode:nth-child(2) .icon,
.mode:nth-child(3) .icon,
.mode:nth-child(4) .icon {
  color: var(--primary);
  background: #43d4c112;
}

.primary {
  color: #08232b;
  background: linear-gradient(105deg, #5ae2ce, #55c9d2 58%, #8bd9ce);
  box-shadow: 0 9px 27px #43d4c12a, inset 0 1px #ffffff9c;
}

.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 30px #43d4c13b;
}

.secondary {
  background: #95b8c30d;
  border-color: #9fc9d52b;
}

.secondary:hover {
  background: #7edccc18;
}

.nav {
  background: #0a1a28e8;
  border-color: #6ee2d21c;
  box-shadow: 0 8px 32px #02091088;
}

.nav button.active {
  color: #6de1d1;
  background: linear-gradient(135deg, #43d4c11c, #579ac21b);
}

.nav button.home.active {
  color: #09212a;
  background: linear-gradient(145deg, #5ae2ce, #4db6c8);
  box-shadow: 0 6px 20px #43d4c134;
}

.rank-row {
  background: #6ab8c10a;
  border-color: #b0e7e50f;
}

.rank-row:hover {
  background: #43d4c10d;
}

.rank-row .medal {
  color: #f5d88e;
  background: #f2c87914;
  border-color: #f2c8792a;
}

.bar i {
  background: linear-gradient(90deg, #43d4c1, #7dc7d2);
}

.topic-choice {
  background: linear-gradient(120deg, #153044, #11263a) !important;
  border-color: #b2e7e522 !important;
}

.topic-choice:hover:not(:disabled) {
  border-color: #58ddca !important;
  background: linear-gradient(120deg, #1a4350, #15344a) !important;
}

.question {
  background:
    radial-gradient(circle at 50% 0, #2e6d7740, transparent 65%),
    linear-gradient(145deg, #142a3d, #102238);
  border-color: #67d8cb26;
}

.question .tag,
.tag {
  color: #8ce9db;
  background: #43d4c114;
  border-color: #43d4c135;
}

.progress {
  background: #91b6c11c;
}

.progress i {
  background: linear-gradient(90deg, #54d8b8, #67d7d5, #f2c879);
  box-shadow: 0 0 14px #55d6c255;
}

.answer:hover:not(:disabled) {
  border-color: #55d9c7;
  background: #43d4c112;
}

.answer.correct {
  border-color: #45d6a6;
  background: #45d6a61b;
}

.answer.wrong,
.leave-btn {
  border-color: #ff737866;
}

.leave-btn {
  color: #ffd9da;
  background: #ff737817;
}

.resultMark {
  border-radius: 22px 22px 22px 7px;
}

.toast {
  background: #0a1b29f5;
  border-color: #69dccb38;
  box-shadow: 0 14px 40px #020a1180;
}

.authField input:focus,
.authField select:focus {
  border-color: #55d9c7;
  box-shadow: 0 0 0 3px #43d4c117;
}

.link-btn {
  color: #6de1d1;
}

.queue-spinner {
  border-top-color: #54dfcc;
}

.queue-bar i {
  background: linear-gradient(90deg, #4cb9d0, #50ddc4, #f2c879);
}

.profile .avatar {
  background: linear-gradient(145deg, #4dc6c1, #467fa9);
}

.ach span {
  color: #f2c879;
}

.source-line {
  border-top-color: #a7d4d51e;
}

@media (max-width: 720px) {
  .hero {
    background:
      radial-gradient(circle at 90% 18%, #367c8b38, transparent 38%),
      linear-gradient(135deg, #10283b, #112337 64%, #162c3d);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:before,
  .hero,
  .hero-mark,
  .hero-mark:before,
  .queue-spinner {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Mobile / installed-app refinements
   ------------------------------------------------------------------ */

html {
  -webkit-text-size-adjust: 100%;
}

/* dvh follows the mobile URL bar instead of the tallest possible viewport. */
@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

/* Kill the grey flash on tap; inputs still get a visible focus ring. */
button,
a,
[onclick],
.mode,
.answer,
.tile,
.topic-choice {
  -webkit-tap-highlight-color: transparent;
}

/* Keep the fixed top/bottom bars clear of notches and home indicators. */
header {
  padding-top: env(safe-area-inset-top, 0px);
}

.bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.wrap {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

/* Long stems and answer text must never push the layout sideways. */
.question h2,
.answer,
.topic-choice b,
.rank-row > div {
  overflow-wrap: anywhere;
}

/* Coarse pointers get finger-sized targets and no hover-only affordances. */
@media (pointer: coarse) {
  .nav button {
    min-width: 62px;
    padding: 10px 12px 9px;
  }

  .answer {
    min-height: 60px;
  }

  .link-btn {
    padding: 8px 4px;
    font-size: 13px;
  }

  .topic-choice {
    min-height: 92px;
  }
}

@media (max-width: 720px) {
  /* The header had three nowrap groups competing for one row. Let it breathe. */
  .top {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 9px;
  }

  .stats {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .user {
    margin-inline-start: auto;
  }
}

@media (max-width: 620px) {
  .wrap {
    padding-left: max(13px, env(safe-area-inset-left, 0px));
    padding-right: max(13px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .stats {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  /* Answer letters were 28px boxes; a touch easier to aim at now. */
  .answer {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .profile {
    flex-wrap: wrap;
  }

  .profile .bar {
    width: 100% !important;
  }

  #logoutButton {
    margin-inline-start: 0 !important;
    width: 100%;
  }

  .toast {
    top: auto;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: calc(100% - 24px);
  }
}