:root {
  color-scheme: dark;
  --bg: #060a1f;
  --panel: #0d1740;
  --panel-2: #14245f;
  --gold: #f2c94c;
  --gold-deep: #b57a19;
  --cyan: #4dd8ff;
  --white: #ffffff;
  --muted: #adbbdf;
  --danger: #f05252;
  --success: #32d583;
  --line: rgba(255, 255, 255, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(77, 216, 255, 0.16), transparent 35%),
    radial-gradient(circle at 76% 0%, rgba(242, 201, 76, 0.18), transparent 30%),
    var(--bg);
}

.app::before,
.app::after {
  content: "";
  position: fixed;
  width: 36vw;
  height: 120vh;
  top: -15vh;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(77, 216, 255, 0.24), transparent 68%);
  filter: blur(10px);
  opacity: 0.44;
  transform-origin: top;
  animation: sweep 8s ease-in-out infinite alternate;
}

.app::before {
  left: 4vw;
  transform: rotate(24deg);
}

.app::after {
  right: 4vw;
  transform: rotate(-24deg);
  animation-delay: -3s;
}

.screen {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.hidden {
  display: none !important;
}

.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 18px;
}

.stage-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid rgba(77, 216, 255, 0.26);
  border-radius: 8px;
  background: #020817;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.hero-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, 0.35));
  animation: floatStage 5.8s ease-in-out infinite;
}

.stage-title {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  padding: 10px 22px;
  border: 1px solid rgba(242, 201, 76, 0.72);
  border-radius: 8px;
  color: #fff6c5;
  background: rgba(2, 6, 23, 0.42);
  box-shadow: 0 0 42px rgba(77, 216, 255, 0.26), inset 0 0 24px rgba(242, 201, 76, 0.12);
  font-size: clamp(28px, 4.8vw, 58px);
  font-weight: 1000;
  text-shadow: 0 0 22px rgba(77, 216, 255, 0.72);
  animation: titleGlow 2.4s ease-in-out infinite alternate;
}

.light-beam {
  position: absolute;
  z-index: 1;
  top: 5%;
  width: 34%;
  height: 84%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(77, 216, 255, 0.34), transparent 70%);
  filter: blur(18px);
  opacity: 0.6;
  animation: beamPulse 3.6s ease-in-out infinite alternate;
}

.beam-left {
  left: 8%;
  transform: rotate(22deg);
}

.beam-right {
  right: 8%;
  transform: rotate(-22deg);
  animation-delay: -1.4s;
}

.hero-copy h1 {
  margin: 4px 0 14px;
  font-size: clamp(46px, 7vw, 92px);
  line-height: 0.92;
  letter-spacing: 0;
}

.hero-copy p {
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.hero-copy {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(77, 216, 255, 0.14), transparent 42%),
    rgba(13, 23, 64, 0.5);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.primary-button,
.ghost-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 900;
}

.primary-button {
  color: #06102f;
  background: linear-gradient(180deg, #ffe889, var(--gold));
  box-shadow: 0 12px 32px rgba(242, 201, 76, 0.24);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ghost-button {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.primary-button:hover,
.ghost-button:hover,
.lifeline:hover,
.answer:hover {
  transform: translateY(-1px);
}

.primary-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 16px 42px rgba(242, 201, 76, 0.32);
}

.ghost-button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

.player-card {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid rgba(242, 201, 76, 0.28);
  border-radius: 8px;
  background: rgba(13, 23, 64, 0.78);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.player-card label {
  display: block;
  margin-bottom: 9px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.start-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.start-row input {
  min-height: 46px;
  border: 1px solid rgba(77, 216, 255, 0.36);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.start-row input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.18);
}

.form-note {
  display: none;
  margin: 10px 0 0 !important;
  color: #ffd0d0 !important;
  font-size: 13px !important;
}

.form-note.visible {
  display: block;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.start-actions .ghost-button {
  flex: 1 1 170px;
}

.ghost-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 18px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  text-decoration: none;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 0;
}

.rules-grid article {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 23, 64, 0.78);
}

.rule-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rule-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #06102f;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(242, 201, 76, 0.24);
}

.rules-grid article::after {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 54%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: rotate(18deg);
  animation: shine 7s ease-in-out infinite;
}

.rules-grid strong {
  display: block;
  color: var(--gold);
}

.rules-grid span {
  color: var(--muted);
  line-height: 1.45;
}

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.topbar h2 {
  margin: 4px 0 0;
  font-size: clamp(30px, 5vw, 52px);
}

.timer-pill {
  min-width: 132px;
  min-height: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  border: 1px solid rgba(242, 201, 76, 0.46);
  border-radius: 8px;
  padding: 8px 14px;
  background: rgba(13, 23, 64, 0.78);
  box-shadow: inset 0 0 22px rgba(242, 201, 76, 0.12);
}

.timer-pill span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.timer-pill strong {
  color: var(--gold);
  font-size: 24px;
  letter-spacing: 0;
  animation: timerPulse 1.8s ease-in-out infinite;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
}

.mobile-game-bar {
  display: none;
}

.question-panel,
.ladder,
.check,
.save-form,
.scores {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 23, 64, 0.86);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.question-panel {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 18px;
}

.question-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  background: linear-gradient(120deg, transparent, rgba(77, 216, 255, 0.22), transparent);
  opacity: 0.7;
  pointer-events: none;
  animation: panelGlow 5s linear infinite;
}

.question-panel > * {
  position: relative;
}

.lifelines {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lifeline {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(77, 216, 255, 0.45);
  border-radius: 8px;
  color: var(--white);
  background: #13266b;
  font-weight: 900;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.lifeline i {
  color: var(--gold);
  font-size: 18px;
}

.lifeline span {
  font-size: 12px;
  line-height: 1;
}

.lifeline:not(:disabled) {
  box-shadow: inset 0 0 18px rgba(77, 216, 255, 0.16);
  animation: lifelineReady 3.4s ease-in-out infinite;
}

.studio-panel {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(77, 216, 255, 0.36);
  border-radius: 8px;
  padding: 0;
  background:
    radial-gradient(circle at 42% 20%, rgba(77, 216, 255, 0.18), transparent 42%),
    rgba(5, 14, 45, 0.9);
}

.studio-panel::after {
  content: "";
  position: absolute;
  inset: -60% auto auto -10%;
  width: 30%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: rotate(20deg);
  animation: shine 5.8s ease-in-out infinite;
}

.studio-panel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 220px;
  max-height: 300px;
  object-fit: cover;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.32));
  animation: consoleFloat 4.8s ease-in-out infinite;
}

.lifeline:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  text-decoration: line-through;
  transform: scale(0.96);
  animation: lifelineUsed 360ms ease both;
}

.question-card {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 24px;
  border: 2px solid rgba(242, 201, 76, 0.58);
  border-radius: 8px;
  background: linear-gradient(180deg, #152a74, #0b1744);
  box-shadow: inset 0 0 42px rgba(77, 216, 255, 0.16);
  animation: questionEnter 420ms ease both;
}

.question-card::before {
  content: "";
  position: absolute;
  inset: -60% -10%;
  background: conic-gradient(from 90deg, transparent, rgba(77, 216, 255, 0.18), transparent, rgba(242, 201, 76, 0.14), transparent);
  animation: rotateHalo 12s linear infinite;
}

.question-card p {
  position: relative;
  margin: 0;
  text-align: center;
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 850;
  line-height: 1.35;
}

.question-card,
.question-card *,
.answers,
.answers * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer {
  position: relative;
  overflow: hidden;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(77, 216, 255, 0.42);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white);
  background: #0f2160;
  text-align: left;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, opacity 170ms ease;
  animation: answerIn 360ms ease both;
}

.answer:nth-child(2) {
  animation-delay: 60ms;
}

.answer:nth-child(3) {
  animation-delay: 120ms;
}

.answer:nth-child(4) {
  animation-delay: 180ms;
}

.answer:hover,
.answer:focus-visible {
  outline: 2px solid var(--gold);
}

.answer.disabled {
  visibility: visible;
}

.answer.correct {
  border-color: var(--success);
  background: rgba(50, 213, 131, 0.2);
  animation: correctPulse 760ms ease both;
}

.answer.wrong {
  border-color: var(--danger);
  background: rgba(240, 82, 82, 0.18);
  animation: wrongShake 360ms ease both;
}

.answer-letter {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06102f;
  background: var(--gold);
  font-weight: 1000;
}

.answer-text {
  min-width: 0;
  line-height: 1.35;
  font-weight: 750;
}

.hint-box {
  position: relative;
  margin-top: 14px;
  padding: 16px 44px 16px 16px;
  border: 1px solid rgba(242, 201, 76, 0.42);
  border-radius: 8px;
  background: rgba(242, 201, 76, 0.1);
  color: #ffeeb1;
  line-height: 1.5;
  animation: hintIn 220ms ease both;
}

.hint-box.guaranteed-hint {
  border-color: rgba(242, 201, 76, 0.78);
  background:
    radial-gradient(circle at 18% 50%, rgba(242, 201, 76, 0.22), transparent 38%),
    rgba(242, 201, 76, 0.16);
  color: #fff4c2;
  box-shadow: 0 0 32px rgba(242, 201, 76, 0.22);
  animation: guaranteedPop 1.35s ease both;
}

.hint-box.guaranteed-hint::before,
.hint-box.guaranteed-hint::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    28px 15px 0 #4dd8ff,
    58px -4px 0 #ffffff,
    92px 18px 0 #f2c94c;
  opacity: 0;
  animation: confettiBurst 1.2s ease both;
}

.hint-box.guaranteed-hint::before {
  left: 18px;
  top: 18px;
}

.hint-box.guaranteed-hint::after {
  right: 120px;
  top: 20px;
  animation-delay: 120ms;
}

.hint-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.audience-row {
  display: grid;
  grid-template-columns: 26px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.audience-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.audience-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
  animation: growBar 850ms ease both;
}

.ladder {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 16px;
}

.scores h3 {
  margin: 0 0 12px;
}

.ladder-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.side-title {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242, 201, 76, 0.62);
  border-radius: 8px;
  color: #fff7c8;
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 216, 255, 0.2), transparent 56%),
    rgba(3, 8, 27, 0.66);
  box-shadow: 0 0 34px rgba(77, 216, 255, 0.16), inset 0 0 22px rgba(242, 201, 76, 0.1);
  font-size: 24px;
  font-weight: 1000;
  text-shadow: 0 0 18px rgba(77, 216, 255, 0.65);
  animation: titleGlow 2.4s ease-in-out infinite alternate;
}

.ladder-actions .timer-pill {
  width: 100%;
}

.ladder ol {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.end-game-button {
  width: 100%;
  margin-top: auto;
}

.ladder li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--muted);
}

.ladder li.active {
  color: #06102f;
  background: var(--gold);
  font-weight: 950;
  box-shadow: 0 0 20px rgba(242, 201, 76, 0.34);
  animation: activePrize 1.6s ease-in-out infinite alternate;
}

.ladder li.safe {
  color: var(--white);
  border: 1px solid rgba(242, 201, 76, 0.35);
}

.ladder li.active.safe {
  color: #06102f;
  border-color: rgba(255, 255, 255, 0.86);
  background: linear-gradient(180deg, #fff1a6, #f2c94c);
  text-shadow: none;
  box-shadow: 0 0 0 2px rgba(6, 16, 47, 0.35), 0 0 28px rgba(242, 201, 76, 0.5);
}

.ladder li.active.safe span,
.ladder li.active.safe strong {
  color: #06102f;
}

.result-screen {
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 16px;
}

.check {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(22px, 5vw, 44px);
  border-color: rgba(242, 201, 76, 0.7);
  background: rgba(13, 23, 64, .86);
  color: var(--white);
  animation: checkReveal 460ms ease both;
}

.check-visual {
  position: relative;
  overflow: hidden;
  height: clamp(150px, 24vw, 220px);
  margin: 0 0 24px;
  border: 2px solid rgba(181, 122, 25, 0.42);
  border-radius: 8px;
  background: #07123a;
  box-shadow: 0 18px 38px rgba(6, 16, 47, 0.18);
}

.check-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 201, 76, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.42));
}

.check-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.check-visual span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  padding: 8px 20px;
  border: 1px solid rgba(242, 201, 76, 0.72);
  border-radius: 8px;
  color: #fff7c8;
  background: rgba(3, 8, 27, 0.5);
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 1000;
  text-shadow: 0 0 18px rgba(77, 216, 255, 0.78);
}

.check-label {
  margin: 0 0 12px;
  color: var(--gold);
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.check h2 {
  color: var(--gold);
  margin: 0 0 24px;
  font-size: clamp(42px, 8vw, 84px);
  letter-spacing: 0;
}

.check-time {
  margin: -12px 0 22px;
  color: var(--muted);
  font-weight: 850;
}

.check strong {
  display: block;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
  font-size: clamp(26px, 5vw, 44px);
}

.save-form,
.scores {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.section-heading h3 {
  margin: 0;
}

.section-heading h3,
.scores h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-heading h3 i,
.scores h3 i {
  color: var(--gold);
}

.section-heading span {
  color: var(--muted);
  font-size: 13px;
}

.save-form label {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-weight: 800;
}

.save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.save-row input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.score-list {
  display: grid;
  gap: 14px;
}

.score-section {
  display: grid;
  gap: 8px;
}

.score-section h4 {
  margin: 0;
  color: var(--gold);
  font-size: 15px;
  font-weight: 950;
}

.score-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.score-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.score-empty {
  color: var(--muted);
}

.score-time {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.score-lifelines {
  color: #d8e7ff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.score-time i,
.score-points i,
.score-lifelines i {
  margin-right: 5px;
  color: var(--gold);
}

.score-points {
  color: #ffeeb1;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(10px);
}

.modal-card {
  position: relative;
  width: min(640px, 100%);
  max-height: min(720px, 88vh);
  overflow: auto;
  border: 1px solid rgba(242, 201, 76, 0.46);
  border-radius: 8px;
  padding: 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(77, 216, 255, 0.16), transparent 38%),
    #0d1740;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
  animation: modalIn 220ms ease both;
}

.modal-card h2 {
  margin: 8px 0 14px;
  font-size: clamp(28px, 5vw, 42px);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  font-size: 24px;
}

.rules-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.55;
}

.million-celebration {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(242, 201, 76, 0.3), transparent 26%),
    radial-gradient(circle at 50% 48%, rgba(77, 216, 255, 0.22), transparent 42%),
    rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(8px);
}

.million-card {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 2px solid rgba(242, 201, 76, 0.8);
  border-radius: 8px;
  padding: clamp(26px, 7vw, 56px);
  color: #fff7c8;
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 216, 255, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(13, 23, 64, 0.96), rgba(4, 10, 35, 0.98));
  box-shadow:
    0 0 70px rgba(242, 201, 76, 0.24),
    inset 0 0 34px rgba(77, 216, 255, 0.18);
  text-align: center;
  animation: millionCardPop 950ms cubic-bezier(0.2, 1.15, 0.32, 1) both;
}

.million-card i {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06102f;
  background: linear-gradient(180deg, #fff2a5, var(--gold));
  font-size: 34px;
  box-shadow: 0 0 36px rgba(242, 201, 76, 0.42);
  animation: crownPulse 1.1s ease-in-out infinite alternate;
}

.million-card span {
  color: var(--cyan);
  font-size: clamp(24px, 5vw, 46px);
  font-weight: 1000;
  text-shadow: 0 0 20px rgba(77, 216, 255, 0.72);
}

.million-card strong {
  width: 100%;
  color: var(--gold);
  font-size: clamp(34px, 8.5vw, 86px);
  line-height: 0.98;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 30px rgba(242, 201, 76, 0.42);
}

.million-card p {
  margin: 0;
  color: var(--white);
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
}

.confetti-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti-field span {
  position: absolute;
  top: -24px;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(-24px) rotate(0deg) scale(var(--scale));
  animation: confettiFall linear forwards;
}

@media (max-width: 820px) {
  .screen {
    padding: 16px;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 10px;
    margin-bottom: 12px;
  }

  .hero-art {
    min-height: 210px;
  }

  .stage-wrap {
    min-height: 280px;
  }

  .stage-title {
    top: 44%;
  }

  .rules-grid,
  .game-layout,
  .answers {
    grid-template-columns: 1fr;
  }

  .mobile-game-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto) 46px;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  .rules-grid {
    margin-top: 0;
  }

  .topbar {
    align-items: flex-start;
  }

  .studio-panel {
    grid-template-columns: 1fr;
  }

  .ladder {
    position: static;
  }

  .ladder-actions,
  .end-game-button {
    display: none;
  }

  .mobile-game-bar .side-title {
    min-height: 46px;
    padding: 0 10px;
    font-size: 18px;
  }

  .mobile-game-bar .timer-pill {
    min-width: 0;
    min-height: 46px;
    padding: 5px 9px;
  }

  .mobile-game-bar .timer-pill span {
    font-size: 10px;
  }

  .mobile-game-bar .timer-pill strong {
    font-size: 18px;
  }

  .mobile-end-button {
    width: 46px;
    min-height: 46px;
    padding: 0;
    align-self: stretch;
  }

  .ladder ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .save-row {
    grid-template-columns: 1fr;
  }

  .start-row {
    grid-template-columns: 1fr;
  }

  .section-heading {
    display: block;
  }
}

@media (max-width: 430px) {
  .million-celebration {
    padding: 10px;
  }

  .million-card {
    padding: 22px 12px;
  }

  .million-card strong {
    font-size: clamp(30px, 9.4vw, 40px);
  }

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

  .topbar {
    flex-direction: column;
  }

  .topbar .ghost-button,
  .start-actions .ghost-button,
  .result-actions button {
    width: 100%;
  }

  .timer-pill {
    width: 100%;
    justify-items: start;
  }

  .mobile-game-bar .timer-pill {
    justify-items: center;
  }

  .score-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .score-row strong,
  .score-points,
  .score-time,
  .score-lifelines {
    grid-column: 2;
  }
}

@keyframes sweep {
  from {
    opacity: 0.25;
    transform: rotate(18deg) translateX(-3vw);
  }
  to {
    opacity: 0.56;
    transform: rotate(28deg) translateX(3vw);
  }
}

@keyframes floatStage {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.015);
  }
}

@keyframes beamPulse {
  from {
    opacity: 0.34;
  }
  to {
    opacity: 0.76;
  }
}

@keyframes shine {
  0%,
  42% {
    transform: translateX(-120%) rotate(18deg);
  }
  62%,
  100% {
    transform: translateX(260%) rotate(18deg);
  }
}

@keyframes panelGlow {
  from {
    transform: translateX(-55%);
  }
  to {
    transform: translateX(55%);
  }
}

@keyframes questionEnter {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes rotateHalo {
  to {
    transform: rotate(360deg);
  }
}

@keyframes answerIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes correctPulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.025);
    box-shadow: 0 0 24px rgba(50, 213, 131, 0.34);
  }
}

@keyframes wrongShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  55% {
    transform: translateX(5px);
  }
  78% {
    transform: translateX(-3px);
  }
}

@keyframes hintIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growBar {
  from {
    width: 0;
  }
}

@keyframes activePrize {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.15);
  }
}

@keyframes titleGlow {
  from {
    filter: brightness(1);
    box-shadow: 0 0 30px rgba(77, 216, 255, 0.2), inset 0 0 20px rgba(242, 201, 76, 0.1);
  }
  to {
    filter: brightness(1.16);
    box-shadow: 0 0 54px rgba(77, 216, 255, 0.38), inset 0 0 28px rgba(242, 201, 76, 0.18);
  }
}

@keyframes timerPulse {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(242, 201, 76, 0);
  }
  50% {
    text-shadow: 0 0 18px rgba(242, 201, 76, 0.42);
  }
}

@keyframes lifelineReady {
  0%,
  100% {
    border-color: rgba(77, 216, 255, 0.45);
    box-shadow: inset 0 0 18px rgba(77, 216, 255, 0.16);
  }
  50% {
    border-color: rgba(242, 201, 76, 0.56);
    box-shadow: inset 0 0 22px rgba(77, 216, 255, 0.22), 0 0 18px rgba(242, 201, 76, 0.14);
  }
}

@keyframes lifelineUsed {
  from {
    transform: scale(1.04);
    filter: brightness(1.35);
  }
  to {
    transform: scale(0.96);
    filter: brightness(0.82);
  }
}

@keyframes guaranteedPop {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  34% {
    opacity: 1;
    transform: scale(1.025) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes confettiBurst {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-34px) scale(1);
  }
}

@keyframes checkReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes consoleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes millionCardPop {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.82);
  }
  58% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes crownPulse {
  from {
    transform: scale(1) rotate(-3deg);
  }
  to {
    transform: scale(1.08) rotate(3deg);
  }
}

@keyframes confettiFall {
  0% {
    opacity: 0;
    transform: translateY(-24px) rotate(0deg) scale(var(--scale));
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0.95;
    transform: translate(var(--drift), 108vh) rotate(var(--spin)) scale(var(--scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

.mode-choice { border:0; padding:0; margin:0 0 18px; display:flex; gap:18px; flex-wrap:wrap; }
.mode-choice legend { margin-bottom:8px; font-weight:700; }
.mode-choice label { display:flex; align-items:center; gap:8px; }
.mode-choice input { width:auto; min-height:0; accent-color:#eac75b; }
.question-actions,.ranking-filters,.utility-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.question-actions { margin-top:18px; }
.question-actions button { flex:1; }
.utility-actions { justify-content:center; margin:16px; }
.ranking-filters label { display:grid; gap:6px; flex:1; }
.ranking-filters select,textarea { width:100%; padding:12px; border:1px solid #727283; border-radius:6px; background:#171729; color:white; font:inherit; }
textarea { resize:vertical; margin:12px 0; }
button:disabled { cursor:default; opacity:.55; }
.answer.selected { border-color:#f4c95d; background:#654916; box-shadow:0 0 18px #f4c95d55; }
.answer.correct,
.answer.correct:hover,
.answer.correct:focus-visible { color:#fff; border-color:#69f0ae; background:#11663e; box-shadow:0 0 22px #32d58380; }
.answer.correct .answer-letter { color:#064225; background:#b9ffd7; }
.answer.wrong,
.answer.wrong:hover { color:#fff; border-color:#ff8791; background:#862838; }
.my-score { outline:2px solid #f4c95d; outline-offset:-2px; background:#f4c95d12; }
#gameStatus { min-height:24px; color:#f4c95d; }
#resultExplanation { overflow-wrap:anywhere; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; animation-iteration-count:1!important; } }
@media print { .utility-actions { display:none; } }
.check .check-time strong { font-size:22px; border:0; padding:0; margin:6px 0; }
.result-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; border-block:1px solid var(--line); margin:16px 0; }
.check .result-stats strong { display:block; font-size:24px; border:0; padding:0; margin-top:6px; overflow-wrap:anywhere; }
.answer.disabled,
.answer.disabled:hover { opacity:1; color:#9da6b4; background:#303747; border-color:#566174; cursor:not-allowed; box-shadow:none; outline:none; animation:none; }
.answer.disabled .answer-letter { color:#abb4c2; background:#4b5567; }
.ladder-close { display:none; }
.ladder-header { min-width:0; }
body.is-playing .app,body.is-result .app { min-height:0; }
body.is-playing .utility-actions,body.is-result .utility-actions { display:none; }
.question-actions #soundButton,.result-actions #soundButton { flex:0 0 46px; width:46px; padding:0; }
.studio-panel { height:var(--studio-height,280px); min-height:0; }
.studio-panel img { min-height:0; max-height:none; }
.studio-panel[data-collapsed="true"] { display:none; }
.ladder-backdrop { position:fixed; inset:0; z-index:39; border:0; background:#020617bf; backdrop-filter:blur(5px); }
.scores summary { cursor:pointer; font-weight:800; padding:4px 0; }
.scores summary i { color:var(--gold); margin-right:6px; }
.scores[open] summary { margin-bottom:12px; }

@media (max-width:1024px), (max-width:1180px) and (max-height:600px) {
  body.is-playing .app { min-height:0; }
  .game-screen { padding:8px; }
  .mobile-game-bar { display:grid; grid-template-columns:minmax(0,1fr) 100px 44px 44px; gap:6px; margin-bottom:8px; align-items:stretch; }
  .mobile-game-bar .side-title { min-height:44px; padding:0 6px; font-size:18px; }
  .mobile-game-bar .timer-pill { min-width:0; min-height:44px; padding:3px 6px; justify-items:center; }
  .mobile-game-bar .timer-pill span { font-size:10px; }
  .mobile-game-bar .timer-pill strong { font-size:18px; }
  .mobile-game-bar .mobile-end-button { width:44px; min-height:44px; padding:0; }
  .game-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .question-panel { min-height:0; padding:10px; overflow:visible; }
  .question-panel::before { overflow:hidden; }
  .lifelines { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
  .lifeline { min-height:44px; padding:5px 2px; gap:3px; }
  .lifeline i { font-size:16px; }
  .lifeline span { font-size:11px; }
  .studio-panel { height:var(--studio-height,220px); min-height:0; margin-bottom:8px; }
  .studio-panel[data-collapsed="true"] { display:none; }
  .studio-panel img { height:100%; min-height:0; max-height:none; object-position:center 52%; animation:none; }
  .question-card { min-height:76px; margin-bottom:8px; padding:12px; }
  .question-card p { font-size:18px; line-height:1.3; overflow-wrap:anywhere; }
  .answers { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; grid-auto-rows:minmax(52px,auto); }
  .answer { min-height:52px; gap:8px; padding:8px; }
  .answer-letter { width:28px; height:28px; flex-basis:28px; font-size:14px; }
  .answer-text { font-size:14px; line-height:1.3; overflow-wrap:anywhere; }
  .question-actions { gap:6px; flex-wrap:nowrap; margin-top:8px; }
  .question-actions button { min-height:44px; padding:7px 8px; font-size:13px; }
  .question-actions #soundButton { flex:0 0 44px; width:44px; padding:0; }
  #gameStatus { min-height:18px; margin:6px 0 0; font-size:12px; line-height:1.3; }
  .hint-box { position:fixed; z-index:35; left:12px; right:12px; bottom:60px; max-width:650px; max-height:70svh; margin:0 auto; overflow:auto; background:#14245f; }
  .hint-close { width:44px; height:44px; top:0; right:0; }
  .ladder { display:none; }
  .ladder.is-open { display:flex; position:fixed; z-index:40; top:12px; left:50%; transform:translateX(-50%); width:min(420px,calc(100% - 24px)); max-height:calc(100svh - 24px); padding:16px; overflow:auto; background:#0d1740; }
  .ladder.is-open .ladder-actions { display:grid; padding-right:0; }
  .ladder-header { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:8px; }
  .ladder-header .side-title { min-width:0; font-size:24px; }
  .ladder.is-open ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ladder.is-open li strong { white-space:nowrap; }
  .ladder-close { display:grid; place-items:center; position:static; width:44px; height:44px; color:white; border:1px solid var(--line); border-radius:6px; background:#14245f; }
  .end-game-button { display:none; }
  body.ladder-open { overflow:hidden; }
  body.is-playing .utility-actions { display:none; }
  body.is-playing .utility-actions button { min-height:36px; padding:6px 12px; }
  .result-screen { min-height:0; padding:8px; gap:8px; align-content:start; }
  .check { padding:16px; }
  .check-visual { height:100px; margin-bottom:12px; }
  .check-visual span { font-size:28px; }
  .check-label { font-size:12px; margin-bottom:8px; letter-spacing:0; }
  .check h2 { font-size:42px; white-space:nowrap; margin-bottom:18px; }
  .check-time { font-size:13px; margin:0 0 8px; }
  .check .check-time strong { display:inline; width:auto; font-size:16px; margin:0; }
  .result-stats { gap:8px; margin:10px 0; }
  .result-stats p { margin:8px 0; font-size:12px; }
  .check .result-stats strong { font-size:18px; margin-top:4px; }
  #resultExplanation { font-size:13px; margin:10px 0; }
  .check > p:not([class]) { margin:8px 0; font-size:13px; }
  #checkName { font-size:22px; padding-bottom:6px; overflow-wrap:anywhere; }
  .save-form,.result-screen .scores { padding:10px; }
  .save-form label { font-size:12px; margin-bottom:6px; }
  .save-row { grid-template-columns:minmax(0,1fr) auto; gap:6px; }
  .save-row input { min-width:0; min-height:44px; padding:8px; }
  .save-row button { font-size:13px; padding:8px; }
  .result-actions { display:flex; gap:6px; }
  .result-actions button { flex:1; width:auto; min-height:44px; padding:8px; font-size:13px; }
  .result-actions #soundButton { flex:0 0 44px; width:44px; padding:0; }
  body.is-result .app { min-height:0; }
  body.is-result .utility-actions { display:none; }
  body.is-result .utility-actions button { min-height:36px; padding:6px 12px; }
}
@media (max-width:430px) {
  .check h2 { font-size:36px; }
  .question-card p { font-size:16px; }
}
@media (max-width:1024px) and (max-height:700px) {
  .check { padding:12px; }
  .check-visual { height:72px; margin-bottom:8px; }
  .check h2 { margin-bottom:10px; }
  .result-stats { margin:6px 0; }
  .check > p:not([class]) { margin:4px 0; }
  .result-screen .scores { padding:6px 10px; }
  .scores summary { padding:0; }
}
@media (max-width:430px) and (max-height:620px) {
  .is-result .check-visual { display:none; }
  .result-screen { gap:6px; }
}
@media (max-width:360px) {
  .mobile-game-bar .side-title { font-size:15px; }
  .check h2 { font-size:32px; }
  .ladder.is-open li { font-size:13px; padding:7px 5px; gap:4px; }
}
@media (max-width:1180px) and (max-height:520px) {
  .studio-panel { display:none; }
  .question-panel { padding:8px; }
  .question-card { min-height:48px; padding:8px 12px; }
  .question-card p { font-size:16px; }
  .answer,.answers { min-height:44px; grid-auto-rows:minmax(44px,auto); }
  .answer { padding:6px 8px; }
  .check-visual { height:64px; }
  .result-screen { grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr); align-items:start; }
  .result-screen .check { grid-row:1 / 4; }
  .is-result .check-visual { display:none; }
  .result-screen .save-row { grid-template-columns:minmax(0,1fr); }
  .result-screen .save-form { grid-column:2; }
  .result-screen .result-actions { grid-column:2; }
  .result-screen .scores { grid-column:2; }
}
@media screen and (min-width:1025px) {
  .result-screen { min-height:0; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-content:start; align-items:start; gap:16px; }
  .result-screen .check { grid-row:1 / 4; padding:24px; }
  .result-screen .save-form,.result-screen .result-actions,.result-screen .scores { grid-column:2; }
  .result-screen .save-row { grid-template-columns:minmax(0,1fr); }
  .check-visual { height:140px; margin-bottom:16px; }
  .check h2 { font-size:48px; white-space:nowrap; margin-bottom:18px; }
  .check-time { margin:0 0 10px; font-size:14px; }
  .check .check-time strong { display:inline; width:auto; font-size:18px; margin:0; }
  .check .result-stats strong { font-size:20px; }
  #checkName { font-size:28px; overflow-wrap:anywhere; }
}
@media screen and (min-width:1025px) and (max-height:850px) {
  .game-screen,.result-screen { padding:12px; }
  .question-panel { padding:12px; }
  .lifelines { margin-bottom:10px; }
  .studio-panel { margin-bottom:10px; }
  .question-card { min-height:100px; padding:16px; margin-bottom:10px; }
  .question-card p { font-size:22px; }
  .answers { gap:8px; }
  .answer { min-height:56px; }
  .question-actions { margin-top:10px; }
  #gameStatus { margin:8px 0 0; }
  .ladder { padding:12px; }
  .ladder li { padding:5px 9px; }
  .result-screen .check { padding:18px; }
  .check-visual { height:100px; margin-bottom:12px; }
  .check h2 { font-size:42px; margin-bottom:14px; }
  .result-stats { margin:10px 0; }
}
@media print {
  @page { size:A4 portrait; margin:15mm; }
  html,body { height:auto; min-height:0; overflow:visible; background:white; }
  body > :not(.app),.app > :not(#resultScreen),#resultScreen > :not(#check),
  .app::before,.app::after { display:none !important; }
  body .app,body #resultScreen { display:block; position:static; width:100%; height:auto; min-height:0; margin:0; padding:0; overflow:visible; background:none; }
  #check { position:static; inset:auto; width:100%; max-width:none; margin:0; padding:8mm; background:white; color:#0b1744; border:1px solid #8b94aa; box-shadow:none; transform:none; animation:none; break-inside:avoid; }
  #check * { animation:none; text-shadow:none; }
  #check p,#check strong,#check h2 { color:#0b1744; }
  #check h2 { font-size:36pt; white-space:nowrap; margin:0 0 6mm; }
  #check .check-visual { display:block; height:40mm; margin:0 0 6mm; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #check .check-visual span { color:white; font-size:30pt; }
  #check .check-time { font-size:11pt; margin:0 0 3mm; }
  #check .check-time strong { display:inline; width:auto; margin:0; padding:0; font-size:12pt; }
  #check strong,.result-stats { border-color:#bbc0cb; }
  #check #checkName { font-size:22pt; overflow-wrap:anywhere; }
}

.feature-dialog { position:fixed; width:min(720px,calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:8px; background:#0d1740; color:white; }
.feature-dialog::backdrop { background:#020617cc; backdrop-filter:blur(4px); }
.feature-dialog h2 { font-size:24px; margin:0 44px 24px 0; }
.feature-dialog .modal-close { top:8px; right:8px; }
.feature-dialog label { display:block; margin:16px 0 8px; }
.feature-dialog input[type="range"] { width:100%; min-height:44px; padding:0; accent-color:#f2c94c; }
.feature-dialog .toggle-label { display:flex; align-items:center; gap:10px; }
.feature-dialog input[type="checkbox"] { width:20px; min-height:20px; height:20px; accent-color:#f2c94c; }
.feature-dialog output { float:right; color:var(--gold); }
.history-scope { font-size:13px; color:var(--muted); }
.history-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0; }
.history-stats div { min-width:0; font-size:13px; color:var(--muted); }
.history-stats strong { display:block; margin-top:6px; color:white; font-size:20px; overflow-wrap:anywhere; }
.history-row { padding:14px 0; display:grid; gap:6px; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.history-row time,.history-row small { color:var(--muted); font-size:12px; }
.history-pagination { display:flex; justify-content:center; align-items:center; gap:16px; margin-top:16px; }
.connection-notice { position:fixed; bottom:12px; left:12px; right:12px; z-index:60; margin:auto; max-width:720px; background:#29344d; border:1px solid #e5b951; padding:12px; border-radius:6px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 8px 32px #0008; }
.connection-notice span { font-size:13px; }
.result-extras { min-width:0; width:100%; max-width:780px; margin:0 auto; }
.result-extras summary { cursor:pointer; padding:4px 0; font-weight:700; }
.result-extras summary i { margin-right:6px; color:var(--gold); }
.extra-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.extra-actions button { font-size:13px; flex:1; }
.link-row { display:flex; gap:6px; margin:8px 0; }
.link-row input { min-width:0; flex:1; }
.link-row button { width:44px; padding:0; flex:none; }
#duelPlayers { font-size:13px; overflow-wrap:anywhere; }
.duel-mine { color:var(--gold); font-weight:700; }
#extraStatus:empty { display:none; }
.question-actions #audioSettingsButton,.result-actions #audioSettingsButton { flex:0 0 44px; width:44px; padding:0; }
@media screen and (min-width:1025px) {
  .result-screen .check { grid-row:1 / 5; }
  .result-screen .result-extras { grid-column:2; }
}
@media (max-width:430px) {
  .history-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-dialog { padding:16px; }
  .question-actions #reportButton,.result-actions #printButton { font-size:0; flex:0 0 44px; width:44px; padding:0; }
  .question-actions #reportButton i,.result-actions #printButton i { font-size:16px; }
  .connection-notice { flex-wrap:wrap; }
}
@media (max-width:430px) and (max-height:700px) {
  .result-screen { gap:4px; }
  .result-screen .check { padding:10px; }
  .check-label { margin-bottom:4px; }
  .check-time { margin-bottom:4px; }
  .result-stats p { margin:6px 0; }
  #resultExplanation { margin:6px 0; }
  .result-extras summary { font-size:13px; }
}
@media (max-width:1180px) and (max-height:520px) {
  .result-screen .check { grid-row:1 / 5; }
  .result-screen .result-extras { grid-column:2; }
}
@media print { .result-extras,.connection-notice,.feature-dialog { display:none !important; } }
.custom-duel-notice { margin:8px 0; padding:10px 12px; border-left:3px solid var(--gold); background:#f2c94c0d; color:#d5def5; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.custom-set-dialog { width:min(900px,calc(100% - 24px)); }
.custom-set-meta { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.custom-set-meta input { display:block; width:100%; margin-top:8px; }
.custom-set-dialog input:not([type="radio"]) { padding:10px 12px; min-height:44px; border:1px solid var(--line); border-radius:6px; background:#111f4f; color:white; }
.custom-set-dialog input:focus-visible,.custom-set-dialog textarea:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.custom-set-progress { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:16px 0 12px; font-size:13px; }
.custom-set-progress span { color:var(--muted); }
.custom-question-nav { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-bottom:20px; }
.custom-question-nav button { min-width:0; height:44px; border:1px solid var(--line); border-radius:4px; background:#14245f; color:white; font:inherit; }
.custom-question-nav button.complete { background:#155338; border-color:#42a97b; }
.custom-question-nav button[aria-current="step"] { background:var(--gold); color:#06102f; border-color:var(--gold); font-weight:800; }
#customQuestionFields { min-width:0; margin:0; padding:0; border:0; }
#customQuestionFields legend { font-weight:800; padding:0; }
#customQuestionText { margin:0 0 12px; min-height:90px; }
.custom-answer-row { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; margin:8px 0; }
.custom-answer-row input[type="text"],.custom-answer-row > input { width:100%; min-width:0; min-height:44px; }
.feature-dialog .custom-correct-choice { display:flex; align-items:center; gap:8px; min-height:44px; margin:0; }
.custom-correct-choice input[type="radio"] { width:20px; height:20px; min-height:20px; padding:0; accent-color:var(--gold); }
.custom-editor-actions { display:flex; gap:8px; position:sticky; bottom:-24px; padding:12px 0; background:#0d1740; border-top:1px solid var(--line); margin-top:16px; }
.custom-editor-actions > button { min-height:44px; }
.custom-editor-actions > button:not(.primary-button) { width:44px; padding:0; }
.custom-editor-actions .primary-button { margin-left:auto; }
#customPublished h3 { font-size:20px; overflow-wrap:anywhere; }
#customPublished .primary-button { text-decoration:none; display:flex; align-items:center; justify-content:center; gap:8px; }
#customLobbyPlayers { font-size:14px; overflow-wrap:anywhere; }
@media (max-width:600px) {
  .custom-set-meta { grid-template-columns:minmax(0,1fr); gap:0; }
  .custom-question-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .custom-editor-actions { bottom:-16px; }
  .custom-editor-actions .primary-button { padding:8px; font-size:13px; }
  .custom-answer-row { grid-template-columns:52px minmax(0,1fr); }
}
@media print { #check .custom-duel-notice { font-size:9pt; background:none; color:#0b1744; } }
.set-row { padding:16px 0; border-top:1px solid var(--line); min-width:0; }
.set-row > strong { font-size:16px; overflow-wrap:anywhere; }
.set-row > p { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.set-actions { display:flex; flex-wrap:wrap; gap:6px; }
.set-actions button { width:44px; min-height:44px; padding:0; }
.set-results { font-size:13px; overflow-wrap:anywhere; margin-top:12px; }
.qr-dialog { width:min(420px,calc(100% - 24px)); }
.qr-image { width:256px; height:256px; padding:32px; margin:20px auto; background:white; }
.qr-image canvas,.qr-image img { width:192px; height:192px; }
#duelShortCode { display:block; text-align:center; font-size:28px; color:var(--gold); }
#duelQRLink { width:100%; min-width:0; padding:10px; border:1px solid var(--line); background:#111f4f; border-radius:6px; color:white; }
.join-code-form { margin-top:16px; max-width:360px; font-size:13px; }
.join-code-form .link-row input { width:100%; min-height:44px; background:#111f4f; border:1px solid var(--line); border-radius:6px; padding:10px; color:white; text-transform:uppercase; }
.join-code-form p:empty { display:none; }
.import-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.import-actions select { min-height:44px; background:#111f4f; color:white; border:1px solid var(--line); border-radius:6px; padding:8px; font:inherit; }
.import-actions button { min-height:44px; padding:8px 12px; font-size:13px; }
#customPublishedPolicy { font-size:13px; color:var(--muted); }
#invitedDuelRanking { font-size:13px; overflow-wrap:anywhere; }
@media (max-width:360px) { .qr-dialog { padding:12px; }.qr-image { width:248px; height:248px; padding:28px; } }
#startCategory{width:100%;padding:10px;border-radius:6px;background:#101e43;color:#fff;border:1px solid #8a8e9e}
.wrong-answer-review { grid-column:1 / -1; order:10; min-width:0; padding:20px 0; border-top:1px solid var(--line); text-align:left; overflow-wrap:anywhere; }
.question-actions .speech-tool { flex:0 0 40px; width:40px; min-height:40px; padding:0; }
.speech-tool[aria-pressed="true"] { border-color:#f2c94c; background:#38412b; color:#fff1ab; }
#speechStatus { margin:0; color:#d5def5; font-size:13px; overflow-wrap:anywhere; }
#speechStatus:empty { display:none; }
@media (max-width:600px) {
  .question-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .question-actions #confirmAnswer { grid-column:1 / -1; grid-row:2; }
  .question-actions .speech-tool,.question-actions #reportButton,.question-actions #soundButton,.question-actions #audioSettingsButton { width:100%; min-width:0; }
}
.wrong-answer-review h3 { margin:0 0 12px; font-size:20px; }
.wrong-answer-review h4 { margin:18px 0 8px; font-size:16px; }
#wrongReviewQuestion { font-weight:700; }
#wrongReviewExplanation { white-space:pre-wrap; line-height:1.6; }
#wrongReviewAnswers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; list-style:none; }
#wrongReviewAnswers li { display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:6px; }
#wrongReviewAnswers strong { font-size:12px; }
#wrongReviewAnswers .review-correct { background:#12432d; color:#e6fff1; border-color:#54c58a; }
#wrongReviewAnswers .review-wrong { background:#542129; color:#fff0f2; border-color:#ec8291; }
@media (max-width:600px) { #wrongReviewAnswers { grid-template-columns:minmax(0,1fr); } .wrong-answer-review { padding:16px 0; } }
@media print { .wrong-answer-review { display:none !important; } }