:root {
  --bg: #030a12;
  --panel: #071523;
  --panel-2: #0a1b2b;
  --border: #294864;
  --border-soft: rgba(55, 88, 119, .58);
  --text: #eef5ff;
  --muted: #95a8bf;
  --dim: #667d97;
  --cyan: #2ce0ff;
  --amber: #ffb020;
  --green: #4ee09a;
  --red: #ff5d78;
  --violet: #a48bff;
  --mono: "JetBrains Mono", monospace;
  --display: "Rajdhani", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--text); background: var(--bg); font-family: var(--display); }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Successful storm celebration */
.storm-success-fx { position: fixed; z-index: 1000; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.storm-success-flash { position: absolute; inset: 0; background: #e9fbff; opacity: 0; }
.storm-success-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.storm-bolt { fill: none; stroke: #f8fdff; stroke-linecap: square; stroke-linejoin: bevel; filter: drop-shadow(0 0 5px #2ce0ff) drop-shadow(0 0 15px rgba(255, 225, 90, .95)); }
.storm-bolt-main { stroke-width: 7; stroke-dasharray: 1250; stroke-dashoffset: 1250; vector-effect: non-scaling-stroke; }
.storm-bolt-branch { stroke-width: 4; stroke-dasharray: 260; stroke-dashoffset: 260; vector-effect: non-scaling-stroke; }
.storm-success-active .storm-success-fx { animation: storm-fx-window 1.35s both; }
.storm-success-active .storm-success-flash { animation: storm-screen-flash 1.05s both; }
.storm-success-active .storm-bolt-main { animation: storm-bolt-strike .48s cubic-bezier(.16,.78,.24,1) .08s both; }
.storm-success-active .storm-bolt-branch { animation: storm-bolt-strike .32s ease-out .2s both; }
.storm-success-active .storm-bolt-branch-late { animation-delay: .3s; }
.storm-success-active .atmosphere-chamber { animation: storm-chamber-impact .46s ease-out .12s both; }
.storm-success-active .atmosphere-chamber .chamber-cloud { animation: storm-cloud-surge .8s cubic-bezier(.2,.75,.25,1) .06s both; }
.storm-success-active .lab-action.selected { animation: storm-card-rumble .42s ease-out .13s both; }
.storm-success-active .lab-result:not(.incorrect) { animation: storm-result-arrive .62s cubic-bezier(.16,.84,.3,1) .25s both; }

@keyframes storm-fx-window {
  0%, 100% { opacity: 0; }
  4%, 58% { opacity: 1; }
}
@keyframes storm-screen-flash {
  0%, 7%, 24%, 100% { opacity: 0; }
  10% { opacity: .48; }
  16% { opacity: .08; }
}
@keyframes storm-bolt-strike {
  0% { opacity: 0; stroke-dashoffset: 1250; }
  12% { opacity: 1; }
  65% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes storm-chamber-impact {
  0%, 100% { transform: translate(0); }
  18% { transform: translate(-5px, 2px); }
  36% { transform: translate(5px, -2px); }
  54% { transform: translate(-3px, 1px); }
  72% { transform: translate(3px, -1px); }
}
@keyframes storm-cloud-surge {
  0% { filter: brightness(.72); }
  28% { filter: brightness(2.1) drop-shadow(0 0 22px #e9fbff); }
  100% { filter: brightness(1); }
}
@keyframes storm-card-rumble {
  0%, 100% { transform: translate(0) rotate(0); }
  18% { transform: translate(-4px, 1px) rotate(-.4deg); }
  36% { transform: translate(4px, -1px) rotate(.4deg); }
  54% { transform: translate(-3px, 1px) rotate(-.25deg); }
  72% { transform: translate(2px, 0) rotate(.2deg); }
}
@keyframes storm-result-arrive {
  0% { opacity: 0; transform: translateY(14px) scale(.985); box-shadow: 0 0 0 rgba(78,224,154,0); }
  58% { opacity: 1; transform: translateY(0) scale(1.008); box-shadow: 0 0 34px rgba(78,224,154,.34); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 16px rgba(78,224,154,.14); }
}

@media (prefers-reduced-motion: reduce) {
  .storm-success-active .storm-success-fx { animation: storm-reduced-glow .65s both; background: rgba(44,224,255,.08); }
  .storm-success-active .storm-success-fx svg,
  .storm-success-active .storm-success-flash { display: none; }
  .storm-success-active .atmosphere-chamber,
  .storm-success-active .atmosphere-chamber .chamber-cloud,
  .storm-success-active .lab-action.selected,
  .storm-success-active .lab-result:not(.incorrect) { animation: none; }
  .storm-success-active .atmosphere-chamber { box-shadow: inset 0 0 55px rgba(44,224,255,.18), 0 0 30px rgba(78,224,154,.3); }
  @keyframes storm-reduced-glow { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; } }
}

.arcade-nav {
  min-height: 72px;
  padding: 0 clamp(14px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1d354c;
  background: rgba(3, 10, 18, .96);
}
.arcade-brand { display: flex; align-items: center; gap: 10px; color: #dce8f7; font: 800 .7rem var(--mono); letter-spacing: .22em; text-decoration: none; }
.arcade-brand img { width: 72px; height: auto; }
.arcade-brand strong { color: var(--amber); }
.all-missions { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--amber); color: #10100c; background: linear-gradient(180deg, #ffc54f, #f0a00e); font: 800 .57rem var(--mono); letter-spacing: .08em; text-decoration: none; }

.app-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 6%, rgba(44, 224, 255, .08), transparent 26%),
    linear-gradient(rgba(34, 73, 99, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 73, 99, .13) 1px, transparent 1px),
    #04101b;
  background-size: auto, 82px 82px, 82px 82px, auto;
}
.app { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 52px; }
.app-header { text-align: center; }
.mission-id, .panel-kicker { margin: 0; color: var(--amber); font: 800 .6rem var(--mono); letter-spacing: .16em; }
.app-header h1 { margin: 8px auto 0; display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--text); font-size: clamp(2rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.035em; }
.brand-hair { width: 78px; height: 2px; background: linear-gradient(90deg, transparent, var(--amber)); }
.brand-hair:last-child { background: linear-gradient(90deg, var(--amber), transparent); }
.subtitle { margin: 13px 0 0; color: var(--muted); font: 700 .68rem var(--mono); letter-spacing: .12em; }

.trainer-modes { width: min(920px, 100%); margin: 30px auto 26px; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border: 1px solid var(--border); background: rgba(4, 14, 24, .86); }
.mode-btn { min-height: 58px; padding: 8px; border: 1px solid transparent; color: #8395ac; background: transparent; font: 800 .67rem var(--mono); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; }
.mode-btn.active { border-color: var(--amber); color: #171107; background: linear-gradient(180deg, #ffc654, #ffac17); box-shadow: 0 0 22px rgba(255, 176, 32, .22); }

.mode-panel { display: grid; gap: 18px; }
.card { border: 1px solid var(--border); background: rgba(6, 19, 31, .95); box-shadow: 0 20px 55px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .02); }
.panel-heading { min-height: 70px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); }
.panel-heading h2 { margin: 5px 0 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1; }
.status-badge { padding: 9px 11px; border: 1px solid rgba(78, 224, 154, .5); color: var(--green); font: 800 .55rem var(--mono); letter-spacing: .08em; }

.ingredient-reference { padding: 22px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.ingredient-reference > article { min-width: 0; padding: 19px; display: grid; grid-template-columns: auto 1fr; gap: 14px; border: 1px solid var(--border-soft); background: rgba(7, 23, 37, .7); }
.ingredient-reference > b { align-self: center; color: var(--amber); font: 800 1.5rem var(--mono); }
.ingredient-symbol { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid; border-radius: 50%; font: 800 1rem var(--mono); }
.ingredient-symbol.moisture { color: var(--cyan); border-color: var(--cyan); }
.ingredient-symbol.instability { color: var(--violet); border-color: var(--violet); }
.ingredient-symbol.lift { color: var(--amber); border-color: var(--amber); }
.ingredient-reference small, .life-card > small { color: var(--dim); font: 800 .5rem var(--mono); letter-spacing: .12em; }
.ingredient-reference h3 { margin: 5px 0 7px; font-size: 1.3rem; }
.ingredient-reference p, .life-card p, .hazard-grid p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.45; }

.lifecycle-grid { padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.life-card { min-width: 0; padding: 18px; border: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(12, 35, 52, .86), rgba(5, 16, 27, .86)); }
.life-card h3 { margin: 7px 0; font-size: 1.35rem; }
.mini-cloud { position: relative; height: 126px; margin: -3px -3px 15px; overflow: hidden; border-bottom: 2px solid #365a6d; background: linear-gradient(#0d3147, #17475d); }
.mini-cloud i { position: absolute; right: 19%; bottom: 14px; width: 57%; height: 55%; border-radius: 50% 50% 30% 30%; background: #d7e5ec; box-shadow: -40px 22px 0 -10px #cad9e1, 35px 18px 0 -7px #b9cad4; }
.mini-cloud span { position: absolute; z-index: 2; bottom: 8px; color: var(--cyan); font: 800 1.7rem var(--mono); }
.mini-cloud span:nth-of-type(1) { left: 36%; }
.mini-cloud span:nth-of-type(2) { right: 31%; }
.mini-cloud b { position: absolute; z-index: 3; right: 23%; bottom: 4px; color: var(--amber); font-size: 2rem; }
.life-card.mature .mini-cloud i { height: 79%; background: #8798a6; }
.life-card.mature .mini-cloud span:nth-of-type(2), .life-card.dissipating .mini-cloud span { color: var(--amber); }
.life-card.dissipating .mini-cloud i { height: 61%; opacity: .7; }

.hazard-grid { padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hazard-grid article { padding: 16px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; border: 1px solid var(--border-soft); }
.hazard-grid article > span { width: 38px; height: 38px; grid-row: 1 / 3; display: grid; place-items: center; color: var(--amber); border: 1px solid rgba(255, 176, 32, .5); font: 800 1rem var(--mono); }
.hazard-grid strong { font-size: 1.1rem; }
.hazard-grid p { font-size: .84rem; }

.challenge-heading .new-btn { flex: 0 0 auto; }
.new-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--amber); color: #171107; background: var(--amber); font: 800 .58rem var(--mono); letter-spacing: .08em; cursor: pointer; }
.objective-card { margin: 20px 22px 0; padding: 17px 19px; border: 1px solid rgba(255, 176, 32, .68); border-left: 5px solid var(--amber); background: rgba(255, 176, 32, .07); }
.objective-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.objective-card .objective-meta span { color: var(--amber); font: 800 .54rem var(--mono); letter-spacing: .12em; }
.objective-card[data-challenge-type="builder"] { border-color: rgba(44, 224, 255, .68); border-left-color: var(--cyan); background: rgba(44, 224, 255, .055); }
.objective-card[data-challenge-type="builder"] .objective-meta span { color: var(--cyan); }
.objective-card strong { display: block; margin-top: 8px; font-size: clamp(1.25rem, 3vw, 1.7rem); }
.objective-card .objective-icon { display: inline-block; margin-right: .4em; font-size: .9em; vertical-align: .06em; }
.objective-copy-mobile { display: none; }
.objective-card p { margin: 5px 0 0; color: var(--muted); font-size: 1rem; }

.builder-layout { padding: 22px; display: grid; grid-template-columns: minmax(390px, .92fr) minmax(0, 1.08fr); gap: 18px; align-items: start; }
.visual-column, .atmosphere-controls { display: grid; align-content: start; gap: 12px; }
.visual-column { gap: 0; border: 1px solid var(--border); background: rgba(6, 18, 30, .72); }
.visual-column .storm-console { border: 0; }
.visual-column .atmosphere-readout { position: absolute; z-index: 4; top: 14px; left: 14px; width: auto; padding: 0; border: 0; background: transparent; }
.visual-column .atmosphere-readout .control-heading { width: max-content; max-width: calc(100vw - 70px); padding: 4px 8px; border-left: 3px solid var(--cyan); background: transparent; text-shadow: 0 2px 3px rgba(2, 8, 14, .9); }
.visual-column .ingredient-status-grid { width: 150px; margin-top: 6px; grid-template-columns: 1fr; border: 0; background: transparent; }
.visual-column .ingredient-status { padding: 6px 9px; display: block; border-right: 0; border-bottom: 1px solid var(--border-soft); text-align: left; }
.visual-column .ingredient-status:last-child { border-bottom: 0; }
.visual-column .ingredient-status strong { margin-top: 2px; text-align: left; text-shadow: 0 2px 3px rgba(2, 8, 14, .92); }
.visual-column .ingredient-status.missing { background: transparent; }
.atmosphere-readout, .action-panel { padding: 14px; border: 1px solid var(--border); background: rgba(6, 18, 30, .72); }
.control-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.control-heading span { color: var(--cyan); font: 800 .46rem var(--mono); letter-spacing: .1em; }
.ingredient-status-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-soft); background: rgba(7, 21, 34, .62); }
.ingredient-status { min-width: 0; padding: 13px 8px; text-align: center; border: 0; border-right: 1px solid var(--border-soft); background: transparent; }
.ingredient-status:last-child { border-right: 0; }
.ingredient-status span, .ingredient-status strong { display: block; }
.ingredient-status span { color: var(--dim); font: 800 .4rem var(--mono); letter-spacing: .08em; }
.ingredient-status strong { margin-top: 6px; color: var(--text); font: 800 .61rem var(--mono); }
.ingredient-status.missing { background: rgba(255, 93, 120, .025); }
.action-panel > p { margin: 7px 0 12px; color: var(--muted); font-size: .88rem; }
.action-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.atmosphere-action { position: relative; min-height: 88px; padding: 15px 15px 32px 16px; text-align: left; border: 1px solid #355774; color: var(--text); background: linear-gradient(180deg, #0b2235, #081a2a); cursor: pointer; box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.atmosphere-action strong, .atmosphere-action em { display: block; }
.atmosphere-action strong { font-size: .9rem; line-height: 1.35; }
.atmosphere-action em { position: absolute; right: 12px; bottom: 10px; color: var(--cyan); font: normal 800 .37rem var(--mono); letter-spacing: .08em; }
.atmosphere-action em b { margin-left: 3px; font-size: .5rem; }
.atmosphere-action:hover { border-color: var(--cyan); background: #0d2940; }
.atmosphere-action:active { background: #102f49; }
.atmosphere-action.selected { color: var(--amber); border-color: var(--amber); background: rgba(255, 176, 32, .08); box-shadow: inset 4px 0 var(--amber); }
.atmosphere-action.selected em { color: var(--amber); }
.atmosphere-action.correct-answer { color: #051910; border-color: var(--green); background: var(--green); box-shadow: none; }
.atmosphere-action.correct-answer span { color: #17352a; }
.atmosphere-action.correct-answer em { color: #051910; }
.atmosphere-action.incorrect-answer { color: var(--text); border-color: var(--red); background: rgba(255, 93, 120, .14); }
.atmosphere-action.incorrect-answer span { color: var(--text); }
.atmosphere-action.incorrect-answer em { color: var(--red); }
.ingredient-controls { display: grid; gap: 11px; }
.ingredient-controls fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--border); }
.ingredient-controls legend { width: 100%; padding: 0 4px; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; }
.ingredient-controls legend > span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--cyan); font: 800 .48rem var(--mono); }
.ingredient-controls legend strong { font: 800 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ingredient-controls legend small { color: var(--dim); font: 700 .45rem var(--mono); letter-spacing: .06em; text-align: right; }
.choice-row { margin-top: 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice-row button { min-height: 66px; padding: 8px 5px; border: 1px solid #2a4967; color: #8294aa; background: #071522; cursor: pointer; }
.choice-row button b, .choice-row button small { display: block; }
.choice-row button b { font: 800 .58rem var(--mono); letter-spacing: .04em; }
.choice-row button small { margin-top: 6px; font: 700 .38rem var(--mono); letter-spacing: .04em; }
.choice-row button.selected { color: #061017; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 18px rgba(44, 224, 255, .2); }
.ingredient-controls fieldset:not(.changed) .choice-row button.selected { color: var(--text); border-color: #66839e; background: #173047; box-shadow: none; }
.ingredient-controls fieldset.changed { border-color: var(--cyan); background: rgba(44, 224, 255, .035); }
.ingredient-controls fieldset.changed legend > span { color: var(--cyan); border-color: var(--cyan); }
.ingredient-controls fieldset.locked { border-color: rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .035); }
.ingredient-controls fieldset.locked legend > span { color: var(--amber); border-color: var(--amber); }
.ingredient-controls fieldset.locked .choice-row button:not(.selected) { opacity: .4; }
.ingredient-controls fieldset.locked .choice-row button.selected { color: #171107; border-color: var(--amber); background: var(--amber); box-shadow: 0 0 18px rgba(255, 176, 32, .16); }
.ingredient-controls fieldset.needs-change { border-color: var(--red); background: rgba(255, 93, 120, .035); }
.ingredient-controls fieldset.needs-change legend > span { color: var(--red); border-color: var(--red); }
.choice-row button.correct-answer { color: var(--green); border-color: var(--green); background: rgba(78, 224, 154, .09); box-shadow: inset 0 0 0 1px var(--green); }
.choice-row button.incorrect-answer { color: var(--text); border-color: var(--red); background: rgba(255, 93, 120, .15); }
.build-btn, .submit-btn { min-height: 54px; border: 1px solid var(--amber); color: #171107; background: linear-gradient(180deg, #ffc856, #ffad19); font: 800 .65rem var(--mono); letter-spacing: .08em; cursor: pointer; }
.build-btn { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.build-btn[data-ready="false"], .submit-btn:disabled { color: #64778d; border-color: #2b4359; background: #0c1925; cursor: not-allowed; }

.storm-console { display: grid; grid-template-rows: minmax(320px, 1fr); border: 1px solid var(--border); background: #06121e; }
.storm-scene { position: relative; min-height: 320px; overflow: hidden; background: linear-gradient(to bottom, #0b2940 0%, #16415a 82%, #315331 82%, #315331 100%); }
.storm-scene svg { width: 100%; height: 100%; display: block; }
.storm-scene .sun { fill: #ffc950; opacity: .9; }
.storm-scene .ground { fill: #315331; }
.storm-scene .horizon { fill: none; stroke: #78915a; stroke-width: 2; }
.storm-scene .cloud-body { fill: url(#cloud); opacity: 0; transform-origin: 330px 310px; transform: translateY(80px) scale(.45); transition: .55s ease; }
.storm-scene .anvil { opacity: 0; }
.storm-scene .updraft, .storm-scene .downdraft, .storm-scene .rain, .storm-scene .outflow { fill: none; stroke-width: 7; stroke-linecap: round; opacity: 0; }
.storm-scene .updraft { stroke: var(--cyan); }
.storm-scene .downdraft, .storm-scene .outflow { stroke: var(--amber); }
.storm-scene .rain { stroke: #61c8ff; stroke-width: 5; }
.storm-scene .lightning { fill: #ffd45c; opacity: 0; }
.storm-scene .hail { fill: #eaf8ff; opacity: 0; }
.storm-scene[data-outcome="waiting"][data-moisture="0"] .cloud-body { opacity: .04; }
.storm-scene[data-outcome="waiting"][data-moisture="1"] .cloud-body { opacity: .5; }
.storm-scene[data-outcome="waiting"][data-moisture="2"] .cloud-body { opacity: .86; }
.storm-scene[data-outcome="waiting"][data-moisture="2"] .sun { opacity: .58; }
.storm-scene[data-outcome="waiting"]:not([data-moisture])[data-instability] .cloud-body { opacity: .16; }
.storm-scene[data-outcome="waiting"][data-instability="0"] .cloud-body { transform: translateY(74px) scale(.72, .34); }
.storm-scene[data-outcome="waiting"][data-instability="1"] .cloud-body { transform: translateY(39px) scale(.72); }
.storm-scene[data-outcome="waiting"][data-instability="2"] .cloud-body { transform: translateY(8px) scale(.92); }
.storm-scene[data-outcome="waiting"][data-lift="1"] .updraft { opacity: .42; }
.storm-scene[data-outcome="waiting"][data-lift="2"] .updraft { opacity: 1; stroke-width: 10; }
.storm-scene[data-outcome="limited"] .cloud-body { opacity: .72; transform: translateY(56px) scale(.58); }
.storm-scene[data-outcome="towering"] .cloud-body { opacity: 1; transform: translateY(14px) scale(.78); }
.storm-scene[data-outcome="towering"] .updraft { opacity: 1; }
.storm-scene[data-outcome="ordinary"] .cloud-body, .storm-scene[data-outcome="strong"] .cloud-body { opacity: 1; transform: none; }
.storm-scene[data-outcome="ordinary"] .anvil, .storm-scene[data-outcome="strong"] .anvil { opacity: 1; }
.storm-scene[data-outcome="ordinary"] .updraft, .storm-scene[data-outcome="ordinary"] .downdraft, .storm-scene[data-outcome="ordinary"] .rain, .storm-scene[data-outcome="ordinary"] .lightning,
.storm-scene[data-outcome="strong"] .updraft, .storm-scene[data-outcome="strong"] .downdraft, .storm-scene[data-outcome="strong"] .rain, .storm-scene[data-outcome="strong"] .lightning, .storm-scene[data-outcome="strong"] .hail, .storm-scene[data-outcome="strong"] .outflow { opacity: 1; }
.storm-scene[data-outcome="strong"] .cloud-body { filter: brightness(.75) contrast(1.2); }
.storm-scene[data-outcome="strong"] .rain { stroke-width: 8; }
.result-banner { margin: 0 22px 20px; padding: 15px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--green); background: rgba(78, 224, 154, .08); }
.result-banner.incorrect { border-color: var(--red); background: rgba(255, 93, 120, .07); }
.result-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--green); border-radius: 50%; color: var(--green); font: 800 .9rem var(--mono); }
.incorrect .result-icon { color: var(--red); border-color: var(--red); }
.result-banner strong { color: var(--green); font: 800 .67rem var(--mono); letter-spacing: .07em; }
.result-banner.incorrect strong { color: var(--red); }
.result-banner p { margin: 5px 0 0; color: var(--text); font-size: .94rem; line-height: 1.42; }
.result-banner .feedback-line { display: block; }
.result-banner .feedback-line + .feedback-line { margin-top: 7px; }
.result-banner .feedback-line b { color: var(--red); font: 800 .52rem var(--mono); letter-spacing: .06em; }
.result-banner button { min-height: 42px; padding: 0 13px; border: 1px solid var(--amber); color: #151006; background: var(--amber); font: 800 .52rem var(--mono); letter-spacing: .06em; cursor: pointer; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.stats-row article { padding: 15px; text-align: center; }
.stats-row article + article { border-left: 1px solid var(--border); }
.stats-row span, .stats-row strong { display: block; font-family: var(--mono); }
.stats-row span { color: var(--dim); font-size: .48rem; letter-spacing: .09em; }
.stats-row strong { margin-top: 5px; color: var(--cyan); font-size: 1rem; }

.quiz-module { width: min(900px, 100%); margin: 0 auto; }
.quiz-progress { padding: 18px 22px 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.quiz-progress span { color: var(--cyan); font: 800 .5rem var(--mono); letter-spacing: .08em; }
.quiz-progress i { height: 4px; overflow: hidden; background: #1e3448; }
.quiz-progress b { width: 10%; height: 100%; display: block; background: var(--cyan); transition: width .25s; }
.quiz-scenario { margin: 18px 22px 0; padding: clamp(20px, 4vw, 34px); border: 1px solid rgba(255, 176, 32, .65); background: rgba(255, 176, 32, .055); }
.quiz-scenario > span { color: var(--amber); font: 800 .55rem var(--mono); letter-spacing: .12em; }
.quiz-scenario h3 { margin: 11px 0 7px; font-size: clamp(1.45rem, 4vw, 2.15rem); line-height: 1.12; }
.quiz-scenario p { margin: 0; color: var(--muted); font-size: 1rem; }
.quiz-choices { padding: 16px 22px; display: grid; gap: 9px; }
.quiz-choice { min-height: 62px; padding: 12px 16px; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; border: 1px solid var(--border); color: var(--text); background: #071523; text-align: left; cursor: pointer; }
.quiz-choice > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #45627d; color: var(--cyan); font: 800 .52rem var(--mono); }
.quiz-choice strong { font-size: 1rem; }
.quiz-choice.selected { border-color: var(--cyan); background: rgba(44, 224, 255, .08); }
.quiz-choice.correct-answer { border-color: var(--green); background: rgba(78, 224, 154, .1); }
.quiz-choice.incorrect-answer { border-color: var(--red); background: rgba(255, 93, 120, .1); }
.quiz-module > .submit-btn { width: calc(100% - 44px); margin: 0 22px 20px; }

.app-footer { margin-top: 20px; padding: 18px 2px 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); color: var(--dim); font: 700 .48rem var(--mono); letter-spacing: .06em; }

.trainer-seo-guide { width: min(1120px, calc(100% - 32px)); margin: 58px auto; color: var(--text); font-family: var(--display); }
.trainer-seo-guide .seo-kicker { margin: 0; color: var(--amber); font: 800 .58rem var(--mono); letter-spacing: .15em; }
.trainer-seo-guide > h2 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.trainer-seo-guide > p:not(.seo-kicker) { max-width: 850px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.trainer-seo-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trainer-seo-grid article { padding: 20px; border: 1px solid var(--border); background: var(--panel); }
.trainer-seo-grid h3 { margin: 0 0 8px; color: var(--cyan); font-size: 1.2rem; }
.trainer-seo-grid p { margin: 0; color: var(--muted); line-height: 1.5; }
.trainer-seo-links { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.trainer-seo-links h3 { width: 100%; margin: 0; color: var(--dim); font: 800 .55rem var(--mono); letter-spacing: .1em; }
.trainer-seo-links a { color: var(--cyan); font: 700 .58rem var(--mono); text-decoration: none; }

/* Atmosphere Chamber */
.world-lab { overflow: hidden; }
.lab-heading { align-items: flex-start; }
.lab-heading > div { max-width: 820px; }
.lab-intro { max-width: 760px; margin: 10px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.location-strip { padding: 14px 18px; display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--border); background: #04101b; scrollbar-color: var(--border) transparent; }
.location-choice { flex: 0 0 auto; min-width: 148px; min-height: 66px; padding: 10px 12px; border: 1px solid var(--border); color: var(--muted); background: #081a29; text-align: left; cursor: pointer; }
.location-choice span, .location-choice strong { display: block; }
.location-choice span { color: var(--dim); font: 800 .43rem var(--mono); letter-spacing: .08em; }
.location-choice strong { margin-top: 6px; color: var(--text); font-size: 1rem; line-height: 1.1; }
.location-choice:hover { border-color: var(--cyan); }
.location-choice.active { border-color: var(--amber); background: rgba(255, 176, 32, .1); box-shadow: inset 4px 0 var(--amber); }
.location-choice.active span { color: var(--amber); }
.lab-objective { margin: 18px; padding: 16px 18px; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(320px, 1.5fr) auto; gap: 20px; align-items: center; border: 1px solid var(--border); border-left: 5px solid var(--cyan); background: rgba(44, 224, 255, .045); }
.lab-objective span, .lab-objective strong { display: block; }
.lab-objective span { color: var(--cyan); font: 800 .48rem var(--mono); letter-spacing: .1em; }
.lab-objective strong { margin-top: 5px; font-size: 1.35rem; }
.lab-objective p { margin: 0; color: #becbda; font-size: 1rem; line-height: 1.4; }
.lab-objective > b { padding: 9px 11px; border: 1px solid rgba(255,176,32,.55); color: var(--amber); font: 800 .48rem var(--mono); white-space: nowrap; }
.weather-workbench { padding: 0 18px 18px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr); gap: 14px; align-items: stretch; }
.action-bank, .chamber-panel { min-width: 0; padding: 18px; border: 1px solid var(--border); background: rgba(4, 15, 25, .76); }
.lab-section-heading { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lab-section-heading span { color: var(--cyan); font: 800 .48rem var(--mono); letter-spacing: .11em; }
.lab-section-heading h3 { margin: 5px 0 0; font-size: 1.35rem; }
.lab-section-heading small { color: var(--dim); font: 800 .42rem var(--mono); letter-spacing: .07em; text-align: right; }
.mobile-swipe-hint { display: none; }
.lab-action-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.lab-action { position: relative; min-height: 96px; padding: 14px 58px 13px 14px; border: 1px solid #345570; color: var(--text); background: linear-gradient(135deg, rgba(14,42,62,.94), rgba(6,21,34,.96)); text-align: left; cursor: pointer; }
.lab-action:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-1px); }
.lab-action .action-icon { position: absolute; right: 13px; top: 13px; font-size: 1.7rem; filter: saturate(.8); }
.lab-action strong, .lab-action small, .lab-action em { display: block; }
.lab-action strong { max-width: 210px; font: 800 .68rem/1.3 var(--mono); letter-spacing: .025em; }
.lab-action small { margin-top: 8px; color: var(--muted); font-size: .82rem; line-height: 1.3; }
.lab-action em { margin-top: 10px; color: var(--cyan); font: 800 .43rem/1 var(--mono); letter-spacing: .08em; font-style: normal; }
.lab-action.selected { border-color: var(--amber); background: linear-gradient(135deg, rgba(255,176,32,.17), rgba(35,26,9,.82)); box-shadow: inset 4px 0 var(--amber); }
.lab-action.selected em { color: var(--amber); }
.lab-action:disabled:not(.selected) { opacity: .28; cursor: not-allowed; }
.chamber-panel { display: flex; flex-direction: column; }
.chamber-heading { flex: none; align-items: center; }
.chamber-reset { min-height: 34px; padding: 0 10px; border: 1px solid var(--border); color: var(--muted); background: transparent; font: 800 .43rem var(--mono); letter-spacing: .08em; cursor: pointer; }
.chamber-reset:hover, .chamber-reset:focus-visible { border-color: var(--cyan); color: var(--cyan); background: rgba(44,224,255,.07); }
.atmosphere-chamber { --moisture-level: 0%; position: relative; width: min(390px, 88%); height: 370px; margin: 16px auto 12px; overflow: hidden; border: 4px solid rgba(115,205,233,.62); border-top: 0; border-radius: 0 0 72px 72px; background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(89,199,228,.09) 52%, rgba(255,255,255,.025)); box-shadow: inset 20px 0 35px rgba(82,196,229,.06), inset -20px 0 35px rgba(82,196,229,.06), 0 18px 35px rgba(0,0,0,.25); }
.atmosphere-chamber::before { content: ""; position: absolute; z-index: 5; left: -5px; right: -5px; top: 0; height: 18px; border: 4px solid rgba(153,225,246,.76); border-radius: 50%; background: #071827; box-shadow: 0 0 16px rgba(44,224,255,.14); }
.atmosphere-chamber::after { content: "ATMOSPHERE"; position: absolute; z-index: 4; right: 20px; top: 31px; color: rgba(191,229,240,.38); font: 800 .43rem var(--mono); letter-spacing: .13em; }
.chamber-liquid { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: var(--moisture-level); min-height: 0; border-radius: 0 0 66px 66px; background: linear-gradient(180deg, rgba(44,224,255,.18), rgba(25,123,174,.5)); transition: height .35s ease; }
.chamber-liquid::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; border-radius: 50%; background: rgba(78,212,245,.38); }
.chamber-tokens { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 24px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 7px; }
.chamber-token { position: relative; min-width: 58px; min-height: 48px; padding: 8px 32px 8px 10px; border: 1px solid rgba(255,176,32,.75); border-radius: 12px; color: #fff1cc; background: rgba(42,31,10,.9); box-shadow: 0 5px 12px rgba(0,0,0,.25); cursor: pointer; }
.chamber-token::after { content: "×"; position: absolute; top: 6px; right: 6px; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--red); border-radius: 50%; color: var(--red); background: rgba(255,93,120,.1); font: 900 .8rem/1 var(--mono); }
.chamber-token:hover::after, .chamber-token:focus-visible::after { color: #fff; background: var(--red); }
.chamber-token span, .chamber-token small { display: block; }
.chamber-token span { font-size: 1.15rem; }
.chamber-token small { margin-top: 3px; font: 800 .34rem/1.15 var(--mono); }
.chamber-empty { position: absolute; z-index: 2; left: 50%; top: 49%; width: 80%; color: var(--dim); font: 800 .48rem/1.4 var(--mono); letter-spacing: .08em; text-align: center; transform: translate(-50%,-50%); }
.chamber-cloud { position: absolute; z-index: 2; left: 50%; top: 38%; width: 148px; height: 68px; opacity: 0; transform: translate(-50%,-50%) scale(.7); transition: .35s ease; }
.chamber-cloud i { position: absolute; bottom: 0; display: block; border-radius: 50%; background: linear-gradient(#f2f7fb,#8193a5); }
.chamber-cloud i:nth-child(1) { left: 8px; width: 70px; height: 44px; }
.chamber-cloud i:nth-child(2) { left: 46px; width: 72px; height: 68px; }
.chamber-cloud i:nth-child(3) { right: 2px; width: 68px; height: 43px; }
.chamber-cloud b { position: absolute; z-index: 2; left: 66px; top: 55px; color: #ffe15a; font-size: 2rem; text-shadow: 0 0 12px #ffb020; }
.atmosphere-chamber[data-state="storm"] .chamber-cloud { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.atmosphere-chamber[data-state="storm"] { border-color: var(--green); box-shadow: inset 0 0 55px rgba(44,224,255,.12), 0 0 24px rgba(78,224,154,.15); }
.ingredient-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ingredient-meters article { min-width: 0; padding: 10px; border: 1px solid var(--border); background: #071827; }
.ingredient-meters span, .ingredient-meters strong { display: block; font-family: var(--mono); }
.ingredient-meters span { color: var(--dim); font-size: .38rem; letter-spacing: .06em; }
.ingredient-meters i { height: 5px; margin: 7px 0; display: block; overflow: hidden; background: #1c3448; }
.ingredient-meters i b { width: 0; height: 100%; display: block; background: var(--cyan); transition: width .25s; }
.ingredient-meters article:nth-child(2) i b { background: var(--violet); }
.ingredient-meters article:nth-child(3) i b { background: var(--amber); }
.ingredient-meters strong { color: var(--text); font-size: .48rem; }
.reaction-readout { min-height: 72px; margin-top: 9px; padding: 12px; border-left: 4px solid var(--cyan); background: rgba(44,224,255,.055); }
.reaction-readout span { color: var(--cyan); font: 800 .4rem var(--mono); letter-spacing: .1em; }
.reaction-readout p { margin: 6px 0 0; color: #bdcad9; font-size: .87rem; line-height: 1.35; }
.test-atmosphere-btn { min-height: 56px; margin-top: 9px; border: 1px solid var(--amber); color: #171107; background: linear-gradient(180deg,#ffc654,#ffac17); font: 800 .58rem var(--mono); letter-spacing: .07em; cursor: pointer; }
.test-atmosphere-btn:disabled { border-color: #2a4257; color: #687e94; background: #101d29; cursor: not-allowed; }
.lab-result { margin: 0 18px 18px; padding: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--green); background: rgba(78,224,154,.08); }
.lab-result.incorrect { border-color: var(--red); background: rgba(255,93,120,.07); }
.lab-result > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--green); font: 800 1rem var(--mono); }
.lab-result.incorrect > span { color: var(--red); }
.lab-result strong { color: var(--green); font: 800 .62rem var(--mono); letter-spacing: .08em; }
.lab-result.incorrect strong { color: var(--red); }
.lab-result p { margin: 6px 0 0; color: #d1dce8; line-height: 1.4; }
.lab-result button { min-height: 46px; padding: 0 15px; border: 1px solid var(--amber); color: #171107; background: var(--amber); font: 800 .5rem var(--mono); cursor: pointer; }

@media (min-width: 901px) {
  .builder-layout { align-items: stretch; }
  .visual-column { align-content: stretch; }
  .storm-console, .storm-scene { height: 100%; }
  .atmosphere-controls { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .action-panel { padding: 20px; display: flex; flex-direction: column; }
  .action-panel .control-heading span { font-size: .56rem; }
  .action-panel > p { margin: 9px 0 16px; font-size: 1.02rem; }
  .action-choices { flex: 1; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .atmosphere-action { min-height: 0; padding: 22px 20px 40px; }
  .atmosphere-action strong { font-size: 1.08rem; line-height: 1.35; }
  .atmosphere-action em { right: 16px; bottom: 14px; font-size: .45rem; }
  .build-btn { min-height: 68px; font-size: .72rem; }
}

@media (max-width: 900px) {
  .ingredient-reference { grid-template-columns: 1fr; }
  .ingredient-reference > b { display: none; }
  .lifecycle-grid, .hazard-grid { grid-template-columns: 1fr; }
  .builder-layout { grid-template-columns: 1fr; }
  .trainer-seo-grid { grid-template-columns: 1fr; }
  .weather-workbench { grid-template-columns: 1fr; }
  .chamber-panel { order: -1; }
  .lab-objective { grid-template-columns: 1fr auto; }
  .lab-objective p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 640px) {
  .arcade-nav { min-height: 64px; padding: 0 10px; }
  .arcade-brand { gap: 6px; font-size: .54rem; letter-spacing: .13em; }
  .arcade-brand img { width: 55px; }
  .all-missions { min-height: 38px; padding: 0 9px; font-size: .48rem; }
  .app { width: calc(100% - 16px); padding: 26px 0 38px; }
  .app-header h1 { font-size: 2rem; }
  .brand-hair { width: 24px; }
  .subtitle { font-size: .49rem; line-height: 1.55; }
  .trainer-modes { margin: 22px auto 17px; gap: 4px; padding: 4px; }
  .trainer-modes { grid-template-columns: repeat(3, 1fr); }
  .mode-btn { min-height: 50px; padding: 5px 2px; font-size: .47rem; letter-spacing: .035em; }
  .panel-heading { min-height: 62px; padding: 15px; align-items: flex-start; }
  .panel-heading h2 { font-size: 1.35rem; }
  .status-badge { display: none; }
  .ingredient-reference, .lifecycle-grid, .hazard-grid, .builder-layout { padding: 12px; }
  .ingredient-reference > article { padding: 14px; grid-template-columns: auto 1fr; }
  .ingredient-symbol { width: 42px; height: 42px; }
  .ingredient-reference p, .life-card p { font-size: .9rem; }
  .challenge-heading { align-items: center; }
  .challenge-heading h2 { font-size: 1.18rem; }
  .new-btn { min-height: 42px; padding: 0 10px; font-size: .48rem; }
  .objective-card { margin: 12px 12px 0; padding: 14px; }
  .objective-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .objective-card strong { font-size: 1.18rem; }
  .objective-copy-desktop { display: none; }
  .objective-copy-mobile { display: inline; }
  .storm-console { grid-template-rows: 220px; }
  .storm-scene { min-height: 220px; }
  .visual-column .atmosphere-readout { top: 9px; left: 9px; width: auto; padding: 0; }
  .visual-column .atmosphere-readout .control-heading { padding: 5px 7px; }
  .visual-column .ingredient-status-grid { width: 132px; margin-top: 6px; }
  .visual-column .ingredient-status { padding: 4px 7px; }
  .visual-column .ingredient-status span { font-size: .32rem; }
  .visual-column .ingredient-status strong { font-size: .43rem; }
  .visual-column .control-heading span { font-size: .34rem; }
  .ingredient-controls fieldset { padding: 10px; }
  .atmosphere-readout, .action-panel { padding: 11px; }
  .control-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ingredient-status { padding: 10px 4px; }
  .ingredient-status strong { font-size: .48rem; }
  .action-choices { grid-template-columns: 1fr; }
  .atmosphere-action { min-height: 88px; }
  .ingredient-controls legend { grid-template-columns: auto 1fr; }
  .ingredient-controls legend small { grid-column: 1 / -1; text-align: left; }
  .choice-row { gap: 5px; }
  .choice-row button { min-height: 64px; padding: 6px 3px; }
  .choice-row button b { font-size: .5rem; }
  .choice-row button small { font-size: .32rem; }
  .result-banner { margin: 0 12px 12px; grid-template-columns: auto 1fr; }
  .result-banner button { grid-column: 1 / -1; width: 100%; }
  .stats-row article { padding: 12px 3px; }
  .stats-row span { font-size: .39rem; }
  .quiz-progress { padding: 14px 12px 0; }
  .quiz-scenario { margin: 14px 12px 0; padding: 18px; }
  .quiz-scenario h3 { font-size: 1.35rem; }
  .quiz-choices { padding: 12px; }
  .quiz-module > .submit-btn { width: calc(100% - 24px); margin: 0 12px 12px; }
  .app-footer { flex-direction: column; gap: 7px; line-height: 1.5; }
  .lab-heading { display: grid; grid-template-columns: 1fr; }
  .lab-heading .new-btn { width: 100%; }
  .lab-intro { font-size: .9rem; }
  .location-strip { padding: 10px 12px; }
  .location-choice { min-width: 132px; min-height: 60px; }
  .lab-objective { position: relative; margin: 12px; padding: 13px; grid-template-columns: 1fr; gap: 9px; }
  .lab-objective > div > span { padding-right: 142px; }
  .lab-objective p { grid-column: auto; grid-row: auto; }
  .lab-objective > b { position: absolute; top: 13px; right: 13px; padding: 7px 9px; font-size: .4rem; }
  .weather-workbench { padding: 0 12px 12px; }
  .action-bank, .chamber-panel { padding: 12px; }
  .mobile-swipe-hint { margin: 10px 0 0; display: block; color: var(--cyan); font: 800 .4rem/1.2 var(--mono); letter-spacing: .08em; }
  .lab-action-grid {
    margin: 9px -12px 0;
    padding: 0 12px 10px;
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .lab-action { flex: 0 0 min(78vw, 285px); min-height: 112px; scroll-snap-align: start; }
  .atmosphere-chamber { width: min(330px, 94%); height: 330px; }
  .lab-section-heading { min-height: 43px; }
  .lab-section-heading small { max-width: 135px; }
  .ingredient-meters { gap: 4px; }
  .ingredient-meters article { padding: 8px 5px; }
  .lab-result { margin: 0 12px 12px; grid-template-columns: auto 1fr; }
  .lab-result button { grid-column: 1 / -1; width: 100%; }
  .weather-workbench > .chamber-panel { order: 1; }
  .weather-workbench > .action-bank { order: 2; }
  .weather-workbench > .reaction-readout { display: none; }
  .weather-workbench > .test-atmosphere-btn { order: 4; width: 100%; margin: 0; }
}

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