:root {
  color-scheme: dark;
  --navy: #071a39;
  --ink: #10264a;
  --cream: #fff9e9;
  --cyan: #21dff2;
  --cyan-dark: #087eaa;
  --blue: #1577db;
  --blue-dark: #0b3f8f;
  --yellow: #ffd638;
  --yellow-dark: #a86800;
  --coral: #ff6d5f;
  --coral-dark: #a92e3d;
  --green: #55e3a6;
  --panel: rgba(7, 29, 62, .9);
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 1100px; min-height: 680px; overflow: hidden; }
body { margin: 0; color: var(--cream); background: var(--navy); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.game { position: relative; width: 100%; height: 100%; min-height: 680px; overflow: hidden; isolation: isolate; background: #061a36; }
.world { position: absolute; z-index: -4; inset: -10px; opacity: .38; background: url("art/reactor-lab-01.webp") center/cover no-repeat; filter: blur(5px) saturate(.48); transform: scale(1.035); }
.game::before { position: absolute; z-index: -3; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 51% 48%,rgba(17,81,119,.28),rgba(3,16,37,.78) 46%,rgba(3,13,31,.94) 100%); }
.game::after { position: absolute; z-index: 20; inset: 0; content: ""; pointer-events: none; opacity: .04; background-image: repeating-linear-gradient(0deg,transparent 0 4px,rgba(62,228,244,.08) 5px); }

.forge-hud { position: absolute; z-index: 15; left: 20px; right: 20px; top: 16px; height: 72px; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 22px; }
.brand-plate,.difficulty-meter,.scoreboard,.speech-bubble,.particle-dials,.action-deck { border: 1px solid rgba(120,222,237,.22); background: rgba(5,27,59,.84); box-shadow: 0 12px 34px rgba(0,8,25,.24); backdrop-filter: blur(14px); }
.brand-plate { height: 64px; display: flex; align-items: center; gap: 12px; padding: 9px 15px; border-radius: 16px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid #074f82; border-radius: 50%; color: var(--ink); background: var(--cyan); box-shadow: 0 4px 0 #075179, 0 0 18px rgba(36,224,242,.52); font-size: 27px; }
.brand-plate div { display: grid; gap: 2px; }.brand-plate span:not(.brand-mark),.difficulty-meter span,.scoreboard span,.panel-label,.speech-bubble span,.decision-copy > span,.scan-lines > span { color: #9feef5; font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.brand-plate strong { font-size: 17px; letter-spacing: .01em; }
.difficulty-meter { justify-self: center; width: min(370px,100%); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 15px; border-radius: 13px; }
.difficulty-meter div { display: contents; }.difficulty-meter div strong { color: var(--yellow); font-size: 18px; }.difficulty-meter > i { grid-column: 1/-1; height: 8px; overflow: hidden; border: 1px solid #30628c; border-radius: 999px; background: #061a3a; }.difficulty-meter > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--yellow),var(--coral)); box-shadow: 0 0 10px var(--cyan); transition: width 250ms ease-out; }.difficulty-meter small { grid-column: 1/-1; color: #d9fbff; font-size: 10px; font-weight: 900; }
.scoreboard { height: 64px; display: flex; align-items: stretch; padding: 7px; border-radius: 16px; }
.scoreboard > div { min-width: 77px; display: grid; place-content: center; text-align: center; }.scoreboard > div + div { border-left: 1px solid rgba(118,213,232,.25); }.scoreboard strong { margin-top: 3px; color: white; font-size: 23px; line-height: 1; }.scoreboard strong i { color: var(--yellow); font-style: normal; font-size: 15px; }

.nova-panel { position: absolute; z-index: 9; left: 21px; top: 106px; bottom: 145px; width: 230px; pointer-events: none; }
.speech-bubble { position: relative; z-index: 2; width: 210px; padding: 14px 16px 16px; border-color: rgba(255,214,56,.28); border-radius: 16px 16px 16px 5px; }
.speech-bubble::after { position: absolute; left: 27px; bottom: -12px; width: 20px; height: 20px; content: ""; transform: rotate(45deg); border-right: 1px solid rgba(255,214,56,.28); border-bottom: 1px solid rgba(255,214,56,.28); background: #071d3d; }
.speech-bubble span { color: var(--yellow); }.speech-bubble p { margin: 7px 0 0; color: #eefcff; font-size: 13px; font-weight: 750; line-height: 1.42; }
.nova { position: absolute; left: 3px; bottom: -24px; width: 230px; max-height: calc(100% - 115px); object-fit: contain; object-position: bottom; filter: drop-shadow(0 13px 8px rgba(0,8,29,.38)); transform-origin: 50% 90%; transition: transform 180ms ease-out; }
.nova.is-cheering { animation: nova-cheer 620ms cubic-bezier(.2,.9,.25,1.2); }

.reactor-zone { position: absolute; z-index: 5; left: 254px; right: 324px; top: 100px; bottom: 143px; min-width: 490px; }
.mission-copy { position: absolute; z-index: 8; left: 50%; top: 0; width: 94%; transform: translateX(-50%); text-align: center; text-shadow: 0 3px 0 #051a3b,0 4px 12px #021026; }
.mission-copy > span { display: inline-flex; padding: 5px 10px; border-radius: 999px; color: #a9eaf0; background: rgba(4,25,54,.58); font-size: 9px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.mission-copy h1 { margin: 9px 0 6px; font-size: clamp(29px,2.8vw,41px); line-height: 1; letter-spacing: -.045em; }.mission-copy p { margin: 0 auto; max-width: 570px; color: #c9e7eb; font-size: 13px; font-weight: 650; line-height: 1.4; }
.reactor { position: absolute; left: 50%; top: 52%; width: min(43vw,570px); aspect-ratio: 1; transform: translate(-50%,-50%); }
.reactor::before { position: absolute; z-index: -1; left: 50%; top: 47%; width: 67%; aspect-ratio: 1; content: ""; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(95,245,255,.4),rgba(20,165,216,.12) 50%,transparent 72%); filter: blur(10px); animation: reactor-breathe 2.5s ease-in-out infinite; }
.reactor-pedestal { position: absolute; z-index: 1; left: 50%; bottom: -8%; width: 80%; transform: translateX(-50%); filter: drop-shadow(0 16px 10px rgba(0,9,27,.45)); }
.reactor-burst { position: absolute; z-index: 7; inset: -4%; width: 108%; height: 108%; opacity: 0; transform: scale(.62) rotate(-8deg); pointer-events: none; }
.game.is-celebrating .reactor-burst { animation: burst 760ms ease-out both; }
.atom { position: absolute; z-index: 5; left: 50%; top: 44%; width: 76%; aspect-ratio: 1; transform: translate(-50%,-50%); filter: drop-shadow(0 7px 8px rgba(0,14,43,.42)); }
.orbit { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; transform: translate(-50%,-50%) rotate(-8deg); border: 5px solid rgba(35,224,241,.88); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25),0 0 13px rgba(33,226,243,.7); }
.orbit::after { position: absolute; inset: 9%; content: ""; border: 1px dashed rgba(201,252,255,.44); border-radius: inherit; }.orbit-two { width: 94%; }.orbit-one { width: 59%; transform: translate(-50%,-50%) rotate(13deg); border-color: rgba(255,214,56,.9); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2),0 0 13px rgba(255,214,56,.45); }
.nucleus { position: absolute; z-index: 4; left: 50%; top: 50%; width: 35%; aspect-ratio: 1; display: grid; place-items: center; padding: 11px; overflow: hidden; transform: translate(-50%,-50%); border: 5px solid #234f83; border-radius: 50%; background: radial-gradient(circle at 38% 32%,#c9f8ff,#4dc2df 52%,#11639e); box-shadow: inset 0 0 18px rgba(255,255,255,.42),0 7px 0 #082c63,0 0 26px rgba(52,224,243,.72); }
.empty-core { color: #164f75; font-size: 12px; font-weight: 1000; letter-spacing: .12em; }.nucleus:has(.particle) .empty-core { display: none; } #nucleons { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0; }
.particle { position: relative; z-index: 12; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; transform: translateZ(0); border: 2px solid var(--ink); border-radius: 50%; color: white; box-shadow: inset 0 4px rgba(255,255,255,.32),0 4px 0 var(--particle-shadow),0 0 8px rgba(255,255,255,.22); font-size: 10px; font-weight: 1000; animation: particle-pop 190ms cubic-bezier(.2,.95,.25,1.25); }.particle span { pointer-events: none; }
.particle.proton,.control-token.proton,.particle-control.proton .control-token { --particle-shadow: #9a2439; background: var(--coral); }.particle.neutron,.particle-control.neutron .control-token { --particle-shadow: #0a3f8c; background: #3a95f2; }.particle.electron,.particle-control.electron .control-token { --particle-shadow: #9a6200; color: #453000; background: var(--yellow); }
.particle.electron { position: absolute; left: var(--x); top: var(--y); width: 41px; height: 41px; transform: translate(-50%,-50%); box-shadow: inset 0 4px rgba(255,255,255,.38),0 4px 0 var(--particle-shadow),0 0 12px rgba(255,220,49,.64); }
.element-reveal { position: absolute; z-index: 6; left: 50%; top: 43%; width: 80%; display: grid; grid-template-columns: 155px 1fr; align-items: center; gap: 20px; transform: translate(-50%,-50%); animation: scan-in 280ms ease-out; }
.element-tile { height: 178px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; padding: 15px; border: 4px solid #72f2fb; border-radius: 18px; color: var(--ink); background: linear-gradient(145deg,#ecfdff,#75eaf5); box-shadow: inset 0 0 0 3px rgba(255,255,255,.45),0 8px 0 #0a6590,0 0 26px rgba(46,227,243,.6); }.element-tile span { font-weight: 1000; }.element-tile strong { grid-column: 1/-1; align-self: center; font-size: 73px; line-height: .8; }.element-tile small { grid-column: 1/-1; font-size: 14px; font-weight: 1000; }
.scan-lines { padding: 16px; border: 2px solid rgba(70,226,241,.55); border-radius: 16px; background: rgba(4,31,70,.91); box-shadow: 0 6px 0 rgba(2,14,38,.6); }.scan-lines dl { margin: 9px 0 0; display: grid; gap: 6px; }.scan-lines dl div { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 5px 11px; border: 1px solid rgba(123,225,237,.25); border-radius: 9px; background: rgba(8,60,103,.72); }.scan-lines dt { color: #a5dce5; font-size: 10px; font-weight: 900; text-transform: uppercase; }.scan-lines dd { margin: 0; color: white; font-size: 20px; font-weight: 1000; }
.reactor-status { position: absolute; z-index: 9; left: 50%; bottom: 4px; display: flex; align-items: center; gap: 8px; padding: 7px 12px; transform: translateX(-50%); color: #b9dce2; font-size: 11px; font-weight: 800; text-align: center; white-space: nowrap; }.reactor-status i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: status-pulse 1.4s ease-in-out infinite; }

.forge-console { position: absolute; z-index: 10; right: 24px; top: 50%; width: 300px; opacity: 0; transform: translateY(-42%); visibility: hidden; transition: opacity 150ms ease-out,transform 150ms ease-out,visibility 150ms; }
.game[data-phase="building"] .forge-console { opacity: 1; transform: translateY(-50%); visibility: visible; }
.particle-dials { padding: 20px; border-radius: 20px; }.panel-label { display: block; }.particle-dials > .panel-label { margin-bottom: 14px; color: #b8e8ee; }
.particle-control { display: grid; grid-template-columns: 42px 1fr auto 42px; align-items: center; gap: 11px; margin-bottom: 10px; padding: 11px 10px; border-radius: 14px; background: rgba(13,55,91,.52); transition: background 150ms ease-out; }.particle-control:last-child { margin-bottom: 0; }.particle-control.is-matched { background: rgba(18,87,77,.54); }
.control-token { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; box-shadow: inset 0 4px rgba(255,255,255,.3),0 3px 0 var(--particle-shadow); font-size: 12px; font-weight: 1000; }.particle-control strong { display: block; font-size: 14px; text-transform: capitalize; }.particle-control small { display: block; margin-top: 2px; color: #8fc1ca; font-size: 9px; }.particle-control > b { min-width: 45px; color: white; font-size: 18px; text-align: center; white-space: nowrap; }.particle-control > b i { margin: 0 4px; color: #6f9fa9; font-size: 12px; font-style: normal; }.particle-control.is-matched > b { color: var(--green); }.particle-control button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; color: #083051; background: var(--cyan); box-shadow: 0 4px 0 #075281; font-size: 24px; font-weight: 1000; transition: transform 130ms ease-out,box-shadow 130ms ease-out; }.particle-control button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 #075281; }.particle-control button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #075281; }.particle-control button:disabled { cursor: not-allowed; filter: grayscale(.8); }

.action-deck { position: absolute; z-index: 14; left: 24px; right: 24px; bottom: 20px; min-height: 116px; display: grid; grid-template-columns: minmax(260px,390px) 1fr; align-items: center; gap: 30px; padding: 19px 24px; border-color: rgba(255,214,56,.22); border-radius: 20px; }
.decision-copy { min-width: 0; }.decision-copy > span { color: var(--yellow); }.decision-copy h2 { margin: 5px 0 4px; font-size: 23px; line-height: 1.1; letter-spacing: -.03em; white-space: normal; }.decision-copy p { margin: 0; color: #add1d7; font-size: 11px; font-weight: 700; }.action-area { min-width: 0; display: flex; justify-content: center; }
.choice-row { width: min(710px,100%); display: grid; grid-template-columns: repeat(3,minmax(120px,1fr)); gap: 10px; }.choice,.primary { min-height: 58px; border: 2px solid #1389ad; border-radius: 12px; color: #09274a; background: linear-gradient(#f3feff,#9aebf3); box-shadow: 0 5px 0 #07557d, inset 0 0 0 2px rgba(255,255,255,.5); font-weight: 1000; transition: transform 135ms ease-out,box-shadow 135ms ease-out,filter 135ms ease-out; }.choice { padding: 7px 14px; font-size: 18px; }.choice:hover,.primary:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 7px 0 #07557d, inset 0 0 0 2px rgba(255,255,255,.5); }.choice:active,.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #07557d; }
.primary { min-width: 260px; padding: 0 25px; color: #fff8dc; border-color: #9e6500; background: linear-gradient(#ffdf55,#f5a814); box-shadow: 0 6px 0 #985d00,inset 0 0 0 2px rgba(255,255,255,.28); font-size: 15px; text-shadow: 0 2px 0 rgba(118,65,0,.5); }.primary span { margin-right: 8px; }.primary:hover:not(:disabled) { box-shadow: 0 8px 0 #985d00,inset 0 0 0 2px rgba(255,255,255,.28); }.primary:disabled { cursor: not-allowed; opacity: .42; filter: grayscale(.7); }
.explain-row { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.explain-choice { min-height: 66px; padding: 8px 12px; font-size: 11px; line-height: 1.25; }

.toast { position: absolute; z-index: 40; left: 50%; bottom: 138px; max-width: 520px; padding: 10px 17px; opacity: 0; transform: translate(-50%,12px); border: 2px solid var(--cyan); border-radius: 999px; color: #eaffff; background: #061b3f; box-shadow: 0 5px 0 rgba(0,9,30,.55),0 0 18px rgba(31,218,238,.3); pointer-events: none; font-size: 12px; font-weight: 900; transition: 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.confetti { position: absolute; z-index: 31; left: 50%; top: 44%; pointer-events: none; }.confetti i { position: absolute; width: 10px; height: 17px; opacity: 0; border-radius: 3px; background: var(--yellow); }.confetti i:nth-child(2n) { background: var(--cyan); }.confetti i:nth-child(3n) { background: var(--coral); }.game.is-celebrating .confetti i { animation: confetti 820ms ease-out both; }.confetti i:nth-child(1){--x:-230px;--y:-190px;--r:190deg}.confetti i:nth-child(2){--x:-150px;--y:170px;--r:-130deg;animation-delay:50ms}.confetti i:nth-child(3){--x:-70px;--y:-220px;--r:240deg;animation-delay:90ms}.confetti i:nth-child(4){--x:90px;--y:190px;--r:170deg;animation-delay:130ms}.confetti i:nth-child(5){--x:180px;--y:-160px;--r:-220deg;animation-delay:170ms}.confetti i:nth-child(6){--x:245px;--y:90px;--r:260deg;animation-delay:210ms}.confetti i:nth-child(7){--x:-260px;--y:40px;--r:-170deg;animation-delay:240ms}.confetti i:nth-child(8){--x:40px;--y:-245px;--r:200deg;animation-delay:280ms}
.is-highlighted { animation: highlight 520ms ease-out 3 !important; }
.reactor-zone.is-shaking { animation: shake 380ms ease-out; }

@keyframes reactor-breathe { 50% { opacity: .72; transform: translate(-50%,-50%) scale(1.05); } }
@keyframes status-pulse { 50% { opacity: .45; transform: scale(.75); } }
@keyframes particle-pop { from { opacity: 0; scale: .45; } 65% { scale: 1.16; } }
@keyframes scan-in { from { opacity: 0; transform: translate(-50%,-45%) scale(.88); filter: brightness(2); } }
@keyframes burst { 0% { opacity: 0; transform: scale(.5) rotate(-15deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18) rotate(5deg); } }
@keyframes nova-cheer { 35% { transform: translateY(-17px) rotate(-4deg) scale(1.04); } 65% { transform: translateY(0) rotate(3deg); } }
@keyframes confetti { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r)) scale(1); } }
@keyframes highlight { 50% { filter: drop-shadow(0 0 15px var(--yellow)) brightness(1.25); transform: scale(1.035); } }
@keyframes shake { 20% { transform: translateX(-8px) rotate(-.4deg); } 40% { transform: translateX(7px) rotate(.4deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

@media (max-height: 760px) {
  .forge-hud { top: 10px; height: 62px; }.brand-plate,.scoreboard { height: 60px; }.nova-panel { top: 82px; bottom: 127px; }.reactor-zone { top: 79px; bottom: 126px; }.action-deck { bottom: 10px; min-height: 101px; padding-top: 13px; padding-bottom: 13px; }.reactor { width: min(40vw,510px); }.speech-bubble { padding-top: 11px; padding-bottom: 13px; }.nova { width: 210px; }.particle-dials { padding: 16px; }.particle-control { margin-bottom: 7px; padding-top: 8px; padding-bottom: 8px; }.toast { bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }