:root {
  --ink: #0b0e22;
  --paper: #f5f6ff;
  --white: #ffffff;
  --blue: #1820d8;
  --blue-dark: #0e159e;
  --yellow: #e9ff43;
  --pink: #ff4ca0;
  --cyan: #55e7ff;
  --green: #7dff9c;
  --red: #ff5a67;
  --border: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
}

* { box-sizing: border-box; }

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--blue);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }
button:focus-visible { outline: 4px solid var(--pink); outline-offset: 3px; }

.bg-grid {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(400px) rotateX(30deg) scale(1.4);
  transform-origin: center bottom;
}

.shell {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 32px));
  margin: 20px auto;
}

.topbar, .scorebar, .game-layout, footer { position: relative; z-index: 1; }

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

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  color: white;
  background: transparent;
  cursor: pointer;
  font-weight: 950;
  letter-spacing: .05em;
  font-size: 1.05rem;
}
.brand strong { color: var(--yellow); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
}

.top-actions { display: flex; gap: 8px; }
.icon-btn {
  height: 40px;
  min-width: 44px;
  padding: 0 13px;
  border: 2px solid var(--ink);
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .05em;
  cursor: pointer;
}
.icon-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.sound-on, .music-on { background: var(--yellow); }
.music-on { color: var(--blue-dark); }

.scorebar {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr);
  border: var(--border);
  background: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  border-left: 1px solid rgba(255,255,255,.18);
}
.stat:first-child { border-left: 0; }
.stat span { font-size: .68rem; letter-spacing: .14em; font-weight: 850; opacity: .7; }
.stat strong { font-size: 1.65rem; line-height: 1; font-weight: 950; font-variant-numeric: tabular-nums; }
.stat small { color: var(--yellow); font-size: 1rem; }
.global-stat strong { display: flex; align-items: baseline; gap: 3px; font-size: 1.15rem; }
.global-stat strong b { font: inherit; }
.global-stat strong small { font-size: .58rem; letter-spacing: .08em; }
.global-bests { display: flex; gap: 8px; margin-top: 4px; }
.global-bests span { padding: 2px 5px; border: 1px solid rgba(255,255,255,.32); font-size: .51rem; letter-spacing: .06em; opacity: 1; }
.global-bests b { color: var(--yellow); font-size: .61rem; }
.score-stat { background: var(--yellow); color: var(--ink); }
.score-stat span { opacity: .72; }
.timer-stat.urgent { background: var(--red); animation: timerPulse .7s infinite alternate; }

.game-layout {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 18px;
  margin-top: 18px;
}

.game-panel, .control-panel {
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.game-panel { padding: clamp(18px, 3vw, 30px); }
.control-panel { padding: 22px; align-self: stretch; }

.round-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.level-pill { padding: 7px 10px; background: var(--cyan); border: 2px solid var(--ink); }

.formula-stage { text-align: center; padding: 30px 10px 18px; }
.eyebrow {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .16em;
  font-size: .72rem;
  text-transform: uppercase;
}
.formula {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 0;
  max-width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(3.3rem, 7vw, 5.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.formula-element {
  display: inline-flex; align-items: flex-end; flex-shrink: 0;
  min-width: 44px; padding: .06em .035em .12em; margin: 0 1px;
  font: inherit; letter-spacing: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 4px solid transparent; border-radius: 5px;
  cursor: pointer; transition: color .12s, background .12s;
}
.formula-atom { display: inline-flex; flex-direction: column; align-items: center; gap: .15em; }
.element-symbol { line-height: 1; }
.oxidation-value { font: 800 .36em/1 Arial, sans-serif; letter-spacing: 0; min-height: 1em; }
.formula-element.selected { color: #1820d8; background: #e4e6ff; border-bottom-color: #1820d8; }
.formula-element.wrong { color: #ad223a; background: #ffe1e7; border-bottom-color: #ad223a; }
.formula-element.wrong.selected { box-shadow: inset 0 0 0 2px #ad223a; }
.formula-element:disabled { opacity: 1; cursor: default; }
.formula .element-count { font-size: .46em; line-height: 1; position: static; margin-bottom: -.12em; }
.formula .formula-punctuation { line-height: 1; padding-bottom: calc(.12em + 4px); }
.formula .formula-group-count { font-size: .46em; line-height: 1; position: static; padding-bottom: .28em; }
.formula .formula-charge { font-size: .38em; line-height: 1; position: static; align-self: flex-end; margin: 0 0 2.3em 2px; }
.formula.formula-long { max-width: none; }
.formula.formula-long .formula-element { min-width: 24px; margin-inline: 0; }
.compound-name { margin: 5px 0 15px; color: #5a5f7f; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }

.feedback {
  margin-top: 14px;
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 13px 14px;
  border: 2px solid var(--ink);
  background: var(--green);
  height: 94px;
  overflow-y: auto;
}
.feedback[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.feedback.wrong { background: #ffd5d8; }
.feedback-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border: 2px solid var(--ink); background: white; font-weight: 950; font-size: 1.25rem; }
.feedback strong { font-weight: 950; }
.feedback p { margin: 2px 0 0; font-size: .82rem; line-height: 1.3; }

.control-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.control-head strong { display: block; font-size: 1.08rem; }
.hint-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--ink);
  padding: 7px 9px;
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 900;
}
.hint-btn span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--pink); color: white; }
.hint-btn b { color: var(--blue); }
.hint-btn:disabled { opacity: .4; cursor: not-allowed; }
.hint-btn[hidden] { display: none; }

.number-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.number-btn {
  min-height: 54px;
  border: 2px solid var(--ink);
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.1rem;
  font-weight: 950;
  cursor: pointer;
  transition: transform .08s ease, background .08s ease;
}
.number-btn:hover:not(:disabled) { background: var(--cyan); transform: translateY(-2px); }
.number-btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.number-btn:disabled { opacity: .35; cursor: not-allowed; }
.number-btn.chosen { background: var(--yellow); }

.submit-row { display: grid; grid-template-columns: auto 1fr; gap: 9px; margin-top: 17px; }
.submit-btn, .skip-btn {
  min-height: 57px;
  border: 2px solid var(--ink);
  font-weight: 950;
  letter-spacing: .035em;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}
.submit-btn { display: flex; align-items: center; justify-content: space-between; padding: 0 17px; background: var(--yellow); }
.submit-btn span { font-size: 1.35rem; }
.submit-btn:disabled { background: #d8daea; color: #777b94; cursor: not-allowed; box-shadow: 2px 2px 0 #777b94; }
.skip-btn { padding: 0 15px; background: white; font-size: .76rem; }
.skip-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: 2px 2px 0 #777b94; }
.submit-btn:not(:disabled):active, .skip-btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.keyboard-tip { text-align: center; margin: 16px 0 0; color: #686d89; font-size: .7rem; line-height: 1.7; }
kbd { padding: 1px 4px; margin: 0 1px; border: 1px solid #a8abc0; border-bottom-width: 2px; background: white; font-family: inherit; font-size: .65rem; }

footer { display: flex; justify-content: space-between; color: white; margin-top: 16px; font-weight: 850; letter-spacing: .12em; font-size: .68rem; }
footer #modeLabel { margin-left: auto; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(6, 8, 34, .86);
  backdrop-filter: blur(5px);
}
.modal-backdrop.open { display: grid; animation: fadeIn .16s ease; }
.start-card, .end-card, .rules-card {
  width: min(610px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: var(--border);
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--ink);
  animation: popIn .22s cubic-bezier(.2,.9,.25,1.2);
}
.start-card { position: relative; padding: clamp(24px, 5vw, 42px); overflow-x: hidden; overflow-y: auto; }
.mini-badge { display: inline-block; padding: 6px 9px; border: 2px solid var(--ink); background: var(--cyan); font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.start-bolt { position: absolute; right: -5px; top: 2px; font-size: 8rem; transform: rotate(8deg); filter: drop-shadow(5px 5px 0 var(--ink)); }
h1 { margin: 19px 0 8px; font-size: clamp(2.6rem, 9vw, 5rem); line-height: .82; letter-spacing: -.065em; font-weight: 1000; }
h1 em { color: var(--blue); font-style: normal; -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--yellow); }
.start-copy { margin: 18px 0 24px; color: #505572; font-weight: 700; }
.audio-unlock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin: -11px 0 18px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .08em;
  cursor: pointer;
  animation: musicPulse 1.35s ease-in-out infinite;
}
.audio-unlock:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.audio-unlock[hidden] { display: none; }
.audio-unlock span { font-size: 1.05rem; }
@keyframes musicPulse { 50% { background: var(--yellow); } }
.mode-grid { display: grid; gap: 11px; }
.mode-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 13px;
  text-align: left;
  border: 2px solid var(--ink);
  background: white;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}
.mode-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.mode-card.tutorial { background: #ff8a3d; }
.mode-card.tutorial .mode-icon { color: var(--ink); background: white; }
.mode-card.primary { background: var(--yellow); }
.mode-card.two-minute { background: var(--cyan); }
.mode-card.rave { color: white; background: linear-gradient(100deg,#ff238e,#6d2cff 55%,#006fff); }
.mode-card.rave small { color: white; }
.mode-card.rave .mode-icon { color: var(--ink); background: var(--yellow); animation: raveMenuPulse 1.6s ease-in-out infinite alternate; }
.mode-icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--ink); color: white; font-size: 1.3rem; font-weight: 950; transform: rotate(-2deg); }
.mode-card strong, .mode-card small { display: block; }
.mode-card strong { font-size: .9rem; font-weight: 950; }
.mode-card small { margin-top: 3px; color: #5a5f7a; font-size: .72rem; font-weight: 650; }
.mode-card b { font-size: 1.6rem; }
.menu-play-count { margin: 12px 0 0; text-align: center; font-size: .75rem; font-weight: 800; letter-spacing: .07em; color: #505572; }
.menu-play-count strong { color: var(--blue); font-size: .95rem; font-variant-numeric: tabular-nums; }
.leaderboard-menu-btn { width: 100%; margin-top: 14px; }
.leaderboard-dialog { width: min(960px,calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; padding: clamp(16px,3vw,28px); border: var(--border); color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.leaderboard-dialog::backdrop { background: rgba(6,8,34,.86); }
.leaderboard-dialog h2 { margin: 0; font-size: clamp(1.4rem,4vw,2rem); }
.leaderboard-dialog .modal-head { gap: 14px; }
.leaderboard-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.leaderboard-board h3, .end-leaderboard h3 { font-size: 1rem; margin: 14px 0 10px; }
.leaderboard-table { width: 100%; border: 2px solid var(--ink); border-collapse: collapse; background: white; font-size: .875rem; font-variant-numeric: tabular-nums; }
.leaderboard-table th { background: var(--ink); color: white; font-size: .75rem; letter-spacing: .04em; }
.leaderboard-table th, .leaderboard-table td { padding: 8px; text-align: left; }
.leaderboard-table td { border-bottom: 1px solid #d8daea; }
.leaderboard-table th:last-child, .leaderboard-table td:last-child { text-align: right; }
.leaderboard-table tbody tr:first-child { background: #f3ffc2; font-weight: 900; }
.leaderboard-table tr.your-score { background: var(--cyan); font-weight: 900; }
.leaderboard-note { color: #505572; font-size: .875rem; line-height: 1.4; }
.end-leaderboard { margin: 18px 0; }
.end-leaderboard[hidden], #retryLeaderboards[hidden] { display: none; }
.daily-champions { margin-top: 16px; padding: 12px; border: 2px solid var(--ink); background: #fff5cc; text-align: left; }
.daily-champions h4 { margin: 0; font-size: .9rem; letter-spacing: .03em; }
.daily-note { margin: 6px 0 10px; color: #505572; font-size: .75rem; line-height: 1.4; }
.daily-current { padding: 10px; margin-bottom: 10px; border: 2px solid var(--ink); background: #ffe077; }
.daily-current.your-score { background: var(--cyan); }
.daily-label { display: block; margin-bottom: 5px; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.daily-current strong { font-size: 1rem; }
.daily-history { max-height: 220px; overflow: auto; }
.daily-table { font-size: .75rem; }
.daily-table th, .daily-table td { padding: 7px 5px; }
.daily-table tbody tr:first-child { background: white; font-weight: inherit; }
.daily-table tbody tr.your-score { background: var(--cyan); font-weight: 900; }
@media (max-width: 700px) { .leaderboard-columns { grid-template-columns: 1fr; } }

.end-card { padding: 35px; text-align: center; }
.end-card h2, .rules-card h2 { margin: 0; font-size: clamp(2.4rem, 7vw, 4.3rem); line-height: .95; font-weight: 1000; letter-spacing: -.05em; }
.final-score { margin: 25px 0 18px; padding: 18px; background: var(--yellow); border: 2px solid var(--ink); }
.final-score span, .results-grid span { display: block; font-size: .67rem; letter-spacing: .13em; font-weight: 900; }
.final-score strong { display: block; font-size: 3.2rem; line-height: 1; font-weight: 1000; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); }
.results-grid div { padding: 14px 7px; border-left: 2px solid var(--ink); }
.results-grid div:first-child { border-left: 0; }
.results-grid strong { display: block; font-size: 1.35rem; }
.rank-line { font-weight: 750; color: #595e79; }
.record-entry { margin: 18px 0; padding: 16px; border: 3px solid var(--ink); background: var(--cyan); }
.record-entry[hidden], #recordForm[hidden], #retryRecordCheck[hidden] { display: none; }
.record-entry h3 { margin: 0 0 8px; font-size: 1rem; }
.record-entry p { margin: 8px 0; font-size: .875rem; }
.record-entry label { display: block; font-weight: 850; }
.record-controls { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
#recordName { width: 112px; min-height: 54px; padding: 8px; border: 3px solid var(--ink); font: 900 1.7rem ui-monospace,monospace; text-align: center; letter-spacing: .14em; text-transform: uppercase; }
.global-bests { flex-wrap: wrap; justify-content: center; }
.replay-btn { width: 100%; margin-top: 10px; }
.text-btn { margin-top: 15px; border: 0; background: transparent; text-decoration: underline; font-weight: 850; cursor: pointer; }

.rules-card { width: min(980px,100%); padding: 28px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; }
.close-btn { width: 42px; height: 42px; border: 2px solid var(--ink); background: white; box-shadow: 3px 3px 0 var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.rules-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(220px, .8fr); gap: 14px; margin: 24px 0 18px; align-items: stretch; }
.rules-table-wrap { border: 2px solid var(--ink); background: white; overflow: hidden; }
.table-caption { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 2px solid var(--ink); font-size: .78rem; font-weight: 900; letter-spacing: .04em; }
.table-caption b { padding: 4px 6px; background: var(--blue); color: white; }
.rules-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .78rem; line-height: 1.35; }
.rules-table th { padding: 9px 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: #dce7cd; text-align: left; font-size: .74rem; }
.rules-table th:nth-child(1) { width: 39%; }
.rules-table th:nth-child(2) { width: 24%; text-align: center; }
.rules-table th:last-child { border-right: 0; }
.rules-table td { padding: 10px; border-right: 2px solid var(--ink); border-bottom: 1px solid #9a9dac; vertical-align: middle; }
.rules-table tr:last-child td { border-bottom: 0; }
.rules-table td:last-child { border-right: 0; }
.rules-table .ox-cell { text-align: center; font-size: .9rem; font-weight: 900; line-height: 1.65; }
.sum-rule { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 18px; border: 2px solid var(--ink); background: var(--yellow); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
.sum-rule .sigma { position: absolute; right: -5px; top: -30px; font-family: Georgia, serif; font-size: 8rem; font-weight: 900; opacity: .09; }
.sum-rule p { position: relative; margin: 0 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; line-height: 1.25; font-weight: 700; }
.sum-rule strong { font-size: .7rem; letter-spacing: .13em; }
.sum-rule span { position: relative; display: block; padding: 8px 9px; border: 2px solid var(--ink); background: white; font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.sum-rule sub, .sum-rule sup, .rules-table sub, .rules-table sup { line-height: 0; }
.got-it { width: 100%; }

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 25px);
  padding: 10px 15px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  font-weight: 900;
  font-size: .8rem;
  transition: .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }

.particle { position: fixed; z-index: 60; width: 10px; height: 16px; border: 2px solid var(--ink); pointer-events: none; animation: burst .7s ease-out forwards; }
.shake { animation: shake .28s ease; }
.score-pop { animation: scorePop .24s ease; }

@keyframes popIn { from { opacity: 0; transform: scale(.92) rotate(-1deg); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
@keyframes scorePop { 50% { transform: scale(1.24); color: var(--pink); } }
@keyframes timerPulse { to { filter: brightness(1.15); } }
@keyframes raveMenuPulse { to { transform: rotate(3deg) scale(1.06); background: var(--cyan); } }
/* The warning stays still and opaque, before any Rave effects begin. */
.rave-warning { width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; padding: clamp(20px, 5vw, 32px); border: var(--border); color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--pink); }
.rave-warning::backdrop { background: rgba(6,8,34,.92); }
.rave-warning .eyebrow { color: var(--blue); }
.rave-warning h2 { margin: 10px 0 16px; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.15; overflow-wrap: anywhere; }
.rave-warning p { line-height: 1.6; }
.rave-warning-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.rave-warning-actions button { width: 100%; min-height: 48px; }
@keyframes raveBeams { to { transform: rotate(360deg); } }
@keyframes raveBackdrop {
  0% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
  100% { background-position: 15% 100%; }
}
@keyframes raveLights {
  0% { transform: translate3d(-5%, -4%, 0) rotate(-4deg) scale(1); opacity: .72; }
  50% { transform: translate3d(6%, 2%, 0) rotate(3deg) scale(1.1); opacity: 1; }
  100% { transform: translate3d(-1%, 6%, 0) rotate(-2deg) scale(1.04); opacity: .8; }
}
@keyframes raveFrame {
  0%, 100% { border-color: rgba(85,231,255,.88); box-shadow: inset 0 0 45px rgba(85,231,255,.9), inset 0 0 120px rgba(0,111,255,.5); }
  50% { border-color: rgba(255,76,160,.95); box-shadow: inset 0 0 65px rgba(255,76,160,1), inset 0 0 150px rgba(109,44,255,.65); }
}
@keyframes raveGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 108px 108px, 108px 108px; }
}
@keyframes ravePanelGlow {
  0%, 100% { border-color: #55e7ff; box-shadow: 6px 6px 0 #0b0e22, 0 0 16px rgba(85,231,255,.8), 0 0 44px rgba(85,231,255,.36); }
  50% { border-color: #ff4ca0; box-shadow: 6px 6px 0 #0b0e22, 0 0 28px rgba(255,76,160,1), 0 0 72px rgba(109,44,255,.58); }
}
@keyframes raveFormula {
  0%, 100% { color: #222be8; text-shadow: 4px 3px 0 #e9ff43, 0 0 14px rgba(233,255,67,.7); transform: scale(1); }
  50% { color: #e40078; text-shadow: -4px 3px 0 #55e7ff, 0 0 24px rgba(255,76,160,.8); transform: scale(1.055); }
}
@keyframes raveKey {
  0%, 100% { background: #fff; box-shadow: 3px 3px 0 #0b0e22, 0 0 0 rgba(85,231,255,0); }
  50% { background: #e9ff43; box-shadow: 3px 3px 0 #0b0e22, 0 0 18px rgba(233,255,67,.95); }
}
@keyframes raveChrome {
  0%, 100% { background: #e9ff43; color: #0b0e22; }
  50% { background: #ff4ca0; color: #0b0e22; }
}
@keyframes raveScorebar {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
@keyframes ravePanelWash {
  0%, 100% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
}
@keyframes ravePanelSweep {
  0% { transform: translate3d(-24%, -10%, 0) rotate(-8deg) scale(1); }
  50% { transform: translate3d(23%, 8%, 0) rotate(7deg) scale(1.14); }
  100% { transform: translate3d(-8%, 15%, 0) rotate(-3deg) scale(1.05); }
}

body.rave-mode {
  background: linear-gradient(125deg,#07135e 0%,#8e05be 22%,#ff147f 43%,#1631e9 63%,#00a8d8 82%,#5711bd 100%);
  background-size: 320% 320%;
  animation: raveBackdrop 4.74s ease-in-out infinite;
}
body.rave-mode::before,
body.rave-mode::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
body.rave-mode::before {
  inset: -22vmax;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,40,157,.92) 0 8%, transparent 27%),
    radial-gradient(circle at 78% 25%, rgba(85,231,255,.92) 0 9%, transparent 28%),
    radial-gradient(circle at 63% 83%, rgba(233,255,67,.62) 0 7%, transparent 25%),
    conic-gradient(from 40deg, transparent, rgba(109,44,255,.65), transparent 28%, rgba(0,216,255,.55), transparent 60%, rgba(255,28,137,.58), transparent);
  filter: blur(8px) saturate(1.8);
  animation: raveLights 3.16s ease-in-out infinite alternate;
}
body.rave-mode::after {
  inset: 0;
  z-index: 5;
  border: 12px solid rgba(85,231,255,.88);
  animation: raveFrame 1.58s ease-in-out infinite;
}
body.rave-mode .bg-grid {
  opacity: .64;
  filter: drop-shadow(0 0 5px #55e7ff);
  animation: raveGrid 2.37s linear infinite;
}
body.rave-mode .game-panel,
body.rave-mode .control-panel,
body.rave-mode .scorebar { animation: ravePanelGlow 1.58s ease-in-out infinite; }
body.rave-mode .game-panel,
body.rave-mode .control-panel {
  background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(231,248,255,.97) 45%,rgba(255,230,248,.98));
}
body.rave-mode .scorebar {
  background: linear-gradient(90deg,#0b0e22,#6d2cff,#e40078,#006fff,#0b0e22);
  background-size: 200% 100%;
  animation-name: ravePanelGlow, raveScorebar;
  animation-duration: 1.58s, 3.16s;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite;
}
body.rave-mode .score-stat,
body.rave-mode .level-pill,
body.rave-mode .submit-btn:not(:disabled) { animation: raveChrome 1.58s ease-in-out infinite; }
body.rave-mode .brand-mark { animation: raveChrome .79s ease-in-out infinite; box-shadow: 0 0 18px #e9ff43, 3px 3px 0 var(--ink); }
body.rave-mode .brand strong { color: #fff; text-shadow: 0 0 10px #ff4ca0, 0 0 20px #55e7ff; }
body.rave-mode .formula { animation: raveFormula .79s ease-in-out infinite; }
body.rave-mode .number-btn { animation: raveKey 1.58s ease-in-out infinite; }
body.rave-mode .number-btn:nth-child(3n+2) { animation-delay: -.53s; }
body.rave-mode .number-btn:nth-child(3n) { animation-delay: -1.05s; }
body.rave-mode .number-btn.chosen { animation: none; background: var(--pink); box-shadow: 3px 3px 0 var(--ink), 0 0 24px var(--pink); }
body.rave-mode .formula-element.selected { box-shadow: 0 0 18px rgba(85,231,255,.65); }
body.rave-mode .formula-element.wrong.selected { box-shadow: inset 0 0 0 2px #ad223a, 0 0 18px rgba(255,76,160,.55); }
body.rave-mode .feedback { box-shadow: 0 0 15px var(--cyan), 0 0 38px rgba(255,76,160,.55); }
body.rave-mode footer { text-shadow: 0 0 8px #55e7ff, 0 0 16px #ff4ca0; }

/* Put the light show inside the panels on every screen size. */
  body.rave-mode .game-panel,
  body.rave-mode .control-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      linear-gradient(125deg,#e8faff,#7cecff 24%,#ff9bd5 48%,#eaff86 72%,#e8faff);
    background-size: 260% 260%;
    animation: ravePanelGlow 1.58s ease-in-out infinite, ravePanelWash 3.16s ease-in-out infinite;
  }
  body.rave-mode .game-panel::before,
  body.rave-mode .game-panel::after,
  body.rave-mode .control-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -100%;
    pointer-events: none;
    background: repeating-conic-gradient(from 15deg, transparent 0deg 24deg, rgba(255,255,255,.4) 25deg 28deg, rgba(85,231,255,.3) 29deg 33deg, transparent 34deg 60deg);
    animation: raveBeams 12.64s linear infinite;
  }
  body.rave-mode .control-panel::after { animation-direction: reverse; }
  body.rave-mode .control-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -55%;
    pointer-events: none;
    opacity: .9;
    background:
      radial-gradient(circle at 24% 34%, rgba(255,20,127,.7) 0 8%, transparent 28%),
      radial-gradient(circle at 76% 28%, rgba(0,209,255,.76) 0 9%, transparent 30%),
      conic-gradient(from 35deg, transparent 0 14%, rgba(233,255,67,.62) 20%, transparent 30% 48%, rgba(109,44,255,.55) 58%, transparent 70%);
    filter: blur(10px) saturate(1.8);
    animation: ravePanelSweep 3.16s ease-in-out infinite alternate;
  }
  body.rave-mode .game-panel::after,
  body.rave-mode .control-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -100%;
    pointer-events: none;
    background: repeating-conic-gradient(from 15deg, transparent 0deg 24deg, rgba(255,255,255,.4) 25deg 28deg, rgba(85,231,255,.3) 29deg 33deg, transparent 34deg 60deg);
    animation: raveBeams 12.64s linear infinite;
  }
  body.rave-mode .control-panel::after { animation-direction: reverse; }
  body.rave-mode .control-panel::before {
    animation-delay: -1.58s;
  }
  body.rave-mode .game-panel > *,
  body.rave-mode .control-panel > * {
    position: relative;
    z-index: 1;
  }
  body.rave-mode .formula-stage {
    border-radius: 18px;
    background: radial-gradient(ellipse,rgba(255,255,255,.96) 20%,rgba(255,255,255,.72) 70%,rgba(255,255,255,.35));
  }
  body.rave-mode .number-grid {
    padding: 9px;
    margin: -9px;
    border-radius: 14px;
    background: linear-gradient(115deg,rgba(85,231,255,.28),rgba(255,76,160,.3),rgba(233,255,67,.25));
    box-shadow: inset 0 0 25px rgba(109,44,255,.22);
  }

@media (max-width: 800px) {
  .shell { width: min(100% - 20px, 650px); margin: 8px auto 12px; }
  .topbar { margin-bottom: 10px; }
  .stat { min-height: 68px; }
  .game-layout { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .game-panel { padding: clamp(16px, 3vw, 24px); }
  .control-panel { padding: 16px; }
  .formula-stage { padding: 18px 8px 12px; }
  .formula { font-size: clamp(3.5rem, 16vw, 5.3rem); }
  .compound-name { margin: 3px 0 11px; }
  .feedback { margin-top: 11px; padding: 11px 12px; }
  .control-head { margin-bottom: 13px; }
  .number-grid { grid-template-columns: repeat(6, 1fr); gap: 7px; }
  .number-btn { min-height: 45px; }
  .submit-row { margin-top: 14px; }
  .submit-btn, .skip-btn { min-height: 52px; }
  .keyboard-tip { display: none; }
  footer { margin-top: 12px; }

  .modal-backdrop { padding: 14px; }
  .start-card, .end-card, .rules-card { max-height: calc(100vh - 20px); max-height: calc(100svh - 20px); }
  .start-card { padding: 26px 30px; }
  .end-card { padding: 30px; }
  .start-bolt { font-size: 7rem; }
  h1 { margin-top: 15px; font-size: clamp(2.6rem, 12vw, 4.5rem); }
  .start-copy { margin: 14px 0 20px; }
  .audio-unlock { margin: -7px 0 15px; padding: 9px 12px; }
  .mode-grid { gap: 9px; }
  .mode-card { padding: 11px; }
  .mode-icon { width: 44px; height: 44px; }
  .rules-layout { grid-template-columns: 1fr; }
  .sum-rule { min-height: 190px; }
}

@media (max-width: 520px) {
  .shell { margin: 6px auto 10px; }
  .topbar { margin-bottom: 7px; }
  .brand { font-size: .82rem; }
  .brand-mark { width: 32px; height: 32px; }
  .icon-btn { height: 34px; padding: 0 8px; font-size: .64rem; }
  .scorebar { grid-template-columns: repeat(4, 1fr); box-shadow: 4px 4px 0 var(--ink); }
  .stat { min-height: 54px; }
  .stat strong { font-size: 1.18rem; }
  .stat span { font-size: .56rem; }
  .global-stat > span { font-size: .47rem; letter-spacing: .055em; }
  .global-stat strong { font-size: .82rem; }
  .global-stat strong small { font-size: .43rem; }
  .global-bests { flex-direction: column; gap: 1px; margin-top: 2px; }
  .global-bests span { padding: 0; border: 0; font-size: .43rem; line-height: 1.05; }
  .global-bests b { font-size: .5rem; }
  .game-layout { margin-top: 10px; gap: 10px; }
  .game-panel { padding: 12px; }
  .control-panel { padding: 14px; }
  .round-meta { font-size: .62rem; }
  .level-pill { padding: 5px 7px; }
  .formula-stage { padding: 15px 4px 10px; }
  .formula { font-size: clamp(3.1rem, 17vw, 4.6rem); }
  .compound-name { margin-bottom: 9px; }
  .feedback { margin-top: 8px; padding: 9px 10px; height: 104px; }
  .control-head { margin-bottom: 9px; }
  .number-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .number-btn { min-height: 44px; font-size: 1rem; }
  .submit-row { margin-top: 11px; }
  .submit-btn, .skip-btn { min-height: 48px; }
  footer { font-size: .55rem; }
  .start-bolt { font-size: 5rem; opacity: .8; }
  .start-card { padding: 36px 16px 24px; }
  .start-copy { margin: 12px 0 17px; }
  .mode-card { padding: 9px; }
  .mode-icon { width: 40px; height: 40px; }
  .rules-card { padding: 18px 14px; }
  .rules-table { font-size: .68rem; }
  .rules-table th, .rules-table td { padding: 7px 6px; }
  .rules-table th:nth-child(1) { width: 37%; }
  .rules-table th:nth-child(2) { width: 25%; }
  .table-caption { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body.rave-mode { background: linear-gradient(135deg,#1820d8,#8e05be 42%,#007fae); }
  body.rave-mode::before { transform: none; opacity: .82; }
}

/* Hero Training keeps the arcade controls, with room for readable lesson copy. */
.hero-training .scorebar, .hero-training #gameArea, .hero-training .shell > footer { display: none; }
.training-deck[hidden], .training-controls[hidden], .training-feedback[hidden] { display: none; }
.training-deck { max-width: 860px; margin: 0 auto 24px; border: var(--border); background: var(--paper); box-shadow: var(--shadow); }
.training-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 22px; font-size: .8rem; font-weight: 850; }
.training-header .level-pill { background: #ff8a3d; }
.training-header .text-btn { margin-left: auto; min-height: 44px; }
#trainingProgress { display: block; appearance: none; width: 100%; height: 7px; border: 0; background: #dddfee; accent-color: var(--blue); }
#trainingProgress::-webkit-progress-bar { background: #dddfee; }
#trainingProgress::-webkit-progress-value { background: var(--blue); }
#trainingProgress::-moz-progress-bar { background: var(--blue); }
.training-content { padding: clamp(18px, 4vw, 32px); }
#trainingTitle { margin: 0 0 20px; font-size: clamp(1.65rem, 4vw, 2.3rem); line-height: 1.12; letter-spacing: -.025em; }
#trainingTitle:focus { outline: none; }
.training-copy, .training-example > p:not(.compound-name), .training-feedback, .training-definition { font-size: 1rem; line-height: 1.6; }
.training-copy p { margin: 0 0 18px; }
.training-copy a { color: #1820d8; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.training-rule { margin: 18px 0; border-left: 5px solid var(--blue); padding: 16px 20px; background: #e4e6ff; }
.training-rule p:last-child { margin-bottom: 0; }
.training-example { padding: 18px 12px; text-align: center; border: 2px solid #c8cbe2; margin: 16px 0; background: white; }
.training-example > p:not(.compound-name) { text-align: left; margin: 0 0 12px; }
.training-formula { font-size: clamp(3.4rem, 10vw, 5.6rem); }
.training-formula .formula-element { min-width: 44px; }
.training-formula .formula-element:disabled:not(.training-context-atom) { opacity: .7; }
.training-context-atom .oxidation-value { visibility: hidden; }
.training-example .compound-name { margin: 12px 0 0; font-size: .85rem; letter-spacing: .055em; }
.training-controls { max-width: 590px; margin: 24px auto 0; }
#trainingSelected { font-size: .9rem; letter-spacing: .07em; }
#trainingPrompt { font-size: 1rem; line-height: 1.45; margin: 8px 0 14px; min-height: 2.9em; }
.training-controls .number-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.training-controls .number-btn { min-height: 48px; }
.training-feedback { border: 2px solid var(--ink); padding: 16px 20px; margin: 24px 0 0; background: var(--green); scroll-margin-bottom: 110px; }
.training-feedback.training-wrong { background: #ffd5d8; }
#trainingFeedbackTitle { display: block; margin-bottom: 8px; letter-spacing: .05em; }
#trainingFeedbackText p { margin: 8px 0; }
#trainingFeedbackText ol { margin: 8px 0; padding-left: 24px; }
#trainingFeedbackText li { margin-bottom: 8px; }
.training-navigation { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.5fr; gap: 14px; padding: 16px 22px; border-top: 2px solid var(--ink); background: var(--paper); z-index: 5; }
.training-navigation button { min-width: 0; font-size: .95rem; min-height: 52px; }
.training-water { margin: 18px auto; max-width: 440px; padding: 12px; border: 2px solid #c8cbe2; background: white; }
.training-water svg { display: block; width: 100%; height: auto; }
.training-water .water-oxygen { fill: var(--blue); }
.training-water figcaption { font-size: .8rem; text-align: center; line-height: 1.4; }
.training-definition { width: min(540px, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 24px; border: var(--border); background: var(--paper); box-shadow: var(--shadow); }
.training-definition::backdrop { background: rgba(6,8,34,.8); }
.training-definition h2 { font-size: 1.5rem; line-height: 1.2; }
.training-definition .submit-btn { width: 100%; }
.training-rules .rules-layout { grid-template-columns: 1fr; }
.training-rules .rules-table { font-size: .9rem; }
.training-rules .rules-table-wrap { overflow-x: auto; }
.training-rules .sum-rule { min-height: auto; }
.training-copy .training-note { font-size: .88rem; margin-top: 16px; }
.hero-training button:focus-visible, .hero-training a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 520px) {
  .training-header { padding: 10px 12px; gap: 8px; }
  .training-header .level-pill { font-size: .8rem; }
  .training-content { padding: 18px 14px; }
  .training-navigation { padding: 12px; gap: 10px; }
  .training-navigation button { font-size: .82rem; }
  .training-controls .number-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .training-formula { font-size: clamp(3rem, 13vw, 4rem); }
  .training-feedback { padding: 14px; }
  .training-rules .rules-table { font-size: .9rem; }
  .training-rules .table-caption { font-size: .8rem; }
}