/* =========================================================================
   Reactor Core — mobile (Android) stylesheet
   Portrait-first. Nothing here scrolls except the tab panel.
   ========================================================================= */

:root{
  /* surfaces */
  --bg:#070b10;
  --bg-2:#0b1119;
  --surface:#111926;
  --surface-2:#18222f;
  --surface-3:#1f2b3a;
  --line:#25323f;
  --line-soft:#1b2632;

  /* text */
  --txt:#dfe8f2;
  --txt-dim:#8496a8;
  --txt-faint:#5d6d7e;

  /* semantics */
  --teal:#3fd9ad;
  --teal-dark:#1c7f66;
  --blue:#5aa9ff;
  --amber:#f0c04a;
  --red:#ff5c5c;
  --green:#7fe063;
  --violet:#b98bff;

  /* metrics */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --tap:52px;             /* minimum comfortable touch target */
  --gut:12px;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0;
  height:100%;
  overflow:hidden;                 /* the app shell never scrolls */
  overscroll-behavior:none;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:15px;
  line-height:1.35;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;       /* kills the 300ms double-tap zoom */
}

button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* =========================================================================
   App shell
   ========================================================================= */
#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  padding-top:var(--sat);
  padding-left:var(--sal); padding-right:var(--sar);
  background:
    radial-gradient(120% 60% at 50% 0%, #101a26 0%, transparent 60%),
    var(--bg);
}

/* ---- top bar ---------------------------------------------------------- */
.topbar{
  flex:none;
  height:46px;
  display:flex; align-items:center; gap:10px;
  padding:0 var(--gut);
  border-bottom:1px solid var(--line-soft);
}
.brand{
  font-size:13px; font-weight:700; letter-spacing:2px;
  color:var(--teal);
}
.brand span{ color:var(--txt-faint); font-weight:500; }
.topbar .spacer{ flex:1; }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  height:28px; padding:0 10px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:12px;
}
.pill.prestige{ color:var(--violet); border-color:#3a2d52; }
.icon-btn{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:17px;
}
.icon-btn:active{ background:var(--surface-3); }

/* ---- reactor stage ---------------------------------------------------- */
.stage{
  flex:none;
  position:relative;
  height:clamp(120px, 21vh, 200px);
  display:grid; place-items:center;
}
#reactorCanvas{ width:100%; height:100%; display:block; }
.stage .tierLabel{
  position:absolute; left:0; right:0; bottom:2px;
  text-align:center;
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--txt-faint);
  pointer-events:none;
}
.stage .tierLabel b{ color:var(--teal); font-weight:600; }

/* ---- vitals ----------------------------------------------------------- */
.vitals{
  flex:none;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px;
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
}
.vital{
  background:var(--bg-2);
  padding:7px 8px;
  text-align:center;
  min-width:0;
}
.vital .k{
  display:block;
  font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--txt-faint);
}
.vital .v{
  display:block;
  font-family:var(--mono);
  font-size:16px; font-weight:600;
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vital .v.money{ color:var(--green); }
.vital .v.watt{ color:var(--blue); }
.vital .v.rate{ color:var(--txt-dim); font-size:14px; }

/* ---- heat ------------------------------------------------------------- */
.heatWrap{
  flex:none;
  padding:8px var(--gut) 9px;
  border-bottom:1px solid var(--line-soft);
}
.heatTop{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-bottom:5px;
}
.heatTitle{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--txt-faint);
}
.heatTitle b{ margin-left:6px; letter-spacing:1.5px; }
.heatMeta{ font-family:var(--mono); font-size:10.5px; color:var(--txt-faint); }

/* cooling capacity vs demand — drifts down on its own as output grows */
.coolMeta{
  font-family:var(--mono); font-size:10px;
  margin-top:5px; letter-spacing:.2px;
}
.cool-ok{   color:var(--teal); }
.cool-warn{ color:var(--amber); }
.cool-crit{ color:var(--red); }

.heatTrack{
  position:relative;
  height:16px;
  border-radius:999px;
  background:#060a0f;
  border:1px solid var(--line);
  overflow:hidden;
}
.heatFill{
  height:100%; width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--teal-dark), var(--teal));
  transition:width .15s linear, background .3s;
}
/* threshold ticks at 70 / 90 % */
.heatTrack::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 69.6%, rgba(255,255,255,.13) 69.6% 70.4%, transparent 70.4%),
    linear-gradient(90deg, transparent 89.6%, rgba(255,255,255,.18) 89.6% 90.4%, transparent 90.4%);
  pointer-events:none;
}
.heatVal{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:10px;
  color:#fff; text-shadow:0 1px 3px #000;
  pointer-events:none;
}
.heat-warn .heatFill{ background:linear-gradient(90deg,#8a6a12,var(--amber)); }
.heat-crit .heatFill{ background:linear-gradient(90deg,#8c1f1f,var(--red)); animation:heatPulse .6s infinite alternate; }
.heat-warn .heatTitle b{ color:var(--amber); }
.heat-crit .heatTitle b{ color:var(--red); }
.heat-ok   .heatTitle b{ color:var(--teal); }
@keyframes heatPulse{ from{ filter:brightness(.7);} to{ filter:brightness(1.25);} }

/* ---- tab panels ------------------------------------------------------- */
#panels{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:10px var(--gut) 14px;
}
.panel{ display:none; }
.panel.active{ display:block; animation:fadeIn .18s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.sectionTitle{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--txt-faint);
  margin:2px 0 8px;
  display:flex; align-items:center; gap:8px;
}
.sectionTitle::after{ content:""; flex:1; height:1px; background:var(--line-soft); }

/* ---- generic card ----------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:11px 12px;
  margin-bottom:9px;
}
.card.tight{ padding:9px 11px; }

/* ---- action buttons (core tab) ---------------------------------------- */
.actionBtn{
  width:100%; min-height:var(--tap);
  display:flex; align-items:center; gap:11px;
  padding:9px 12px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--line);
  margin-bottom:9px;
  text-align:left;
  transition:transform .06s, opacity .15s;
}
.actionBtn:active:not(:disabled){ transform:scale(.985); background:var(--surface-2); }
.actionBtn:disabled{ opacity:.4; }
.actionBtn .ico{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  background:var(--surface-3);
  font-size:16px;
}
.actionBtn .body{ flex:1; min-width:0; }
.actionBtn .t{ display:block; font-size:14px; font-weight:600; }
.actionBtn .s{ display:block; font-size:11.5px; color:var(--txt-dim); margin-top:1px; }
.actionBtn .r{ font-family:var(--mono); font-size:12px; color:var(--txt-faint); flex:none; }

.actionBtn.rods{ border-color:#2b4a55; }
.actionBtn.rods .ico{ color:var(--blue); }
.actionBtn.oc.on{ border-color:var(--amber); background:#20190a; }
.actionBtn.oc.on .ico{ color:var(--amber); }
.actionBtn.restr{ border-color:#3a2d52; }
.actionBtn.restr .ico{ color:var(--violet); }
.actionBtn.restr:not(:disabled) .t{ color:var(--violet); }

/* ---- upgrade rows ----------------------------------------------------- */
.buyModeRow{
  display:flex; gap:6px; margin-bottom:10px;
}
.buyMode{
  flex:1; height:34px;
  border-radius:var(--r-sm);
  background:var(--surface);
  border:1px solid var(--line);
  font-size:12.5px; font-weight:600;
  color:var(--txt-dim);
}
.buyMode.on{ background:var(--surface-3); border-color:var(--teal); color:var(--teal); }

.upg{
  display:flex; align-items:stretch; gap:10px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:9px 10px;
  margin-bottom:8px;
  transition:border-color .2s;
}
.upg.afford{ border-color:#28513f; }
.upg.maxed{ opacity:.75; }
.upg .left{ flex:1; min-width:0; }
.upg .nameRow{ display:flex; align-items:center; gap:7px; }
/* One 10px slot carries the whole signal: a synergy dot when the part is in
   step, an arrow when it is not. Merging them costs the name no width. */
.upg .ind{
  width:10px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1;
}
.upg .ind.dot::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:currentColor; box-shadow:0 0 6px currentColor;
}
.upg .ind.arw{ text-shadow:0 0 6px currentColor; }
.dot.g{ color:var(--teal); }
.dot.y{ color:var(--amber); }
.dot.r{ color:var(--red); }
.upg .name{
  font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.upg .lvl{
  font-family:var(--mono); font-size:11px;
  color:var(--txt-dim);
  background:var(--surface-3);
  border-radius:5px; padding:1px 6px; flex:none;
}
.upg .eff{ font-size:11.5px; color:var(--blue); margin-top:3px; }
.upg .syn{ font-size:10.5px; color:var(--txt-faint); margin-top:2px; }

/* ---- attention arrow --------------------------------------------------
   The only guidance the game gives. No labels, no sentences: up means this
   part is behind, down means it is ahead of the rest. */
.arw.adv-crit{ color:var(--red); animation:arrowPulse 1s ease-in-out infinite; }
.arw.adv-warn{ color:var(--red); }
.arw.adv-hold{ color:var(--txt-faint); text-shadow:none; }

@keyframes arrowPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.upg.adv-crit{ border-color:#6b2226; }
.upg.adv-hold{ opacity:.72; }

.upg .buy{
  flex:none;
  min-width:96px; min-height:var(--tap);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:6px 8px;
  transition:transform .06s;
}
.upg .buy:active:not(:disabled){ transform:scale(.95); }
.upg .buy:disabled{ opacity:.35; }
.upg.afford .buy{ background:#16301f; border-color:#2f6a45; }
.upg .buy .qty{ font-size:10px; letter-spacing:1px; color:var(--txt-faint); }
.upg .buy .cost{ font-family:var(--mono); font-size:12.5px; font-weight:600; }
.upg.afford .buy .cost{ color:var(--green); }

/* ---- prestige tab ----------------------------------------------------- */
.bigStat{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:6px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
}
.bigStat:last-child{ border-bottom:none; }
.bigStat .k{ color:var(--txt-dim); }
.bigStat .v{ font-family:var(--mono); font-weight:600; }
.bigStat .v.violet{ color:var(--violet); }
.bigStat .v.teal{ color:var(--teal); }

.logList{
  font-family:var(--mono); font-size:11px;
  color:var(--txt-faint);
  max-height:190px; overflow-y:auto;
  overscroll-behavior:contain;
}
.logList div{ padding:2px 0; border-bottom:1px solid var(--line-soft); }
.logList div:last-child{ border-bottom:none; }

/* ---- inject dock ------------------------------------------------------ */
.dock{
  flex:none;
  padding:8px var(--gut);
  border-top:1px solid var(--line-soft);
  background:var(--bg-2);
}
#btnInject{
  width:100%; min-height:60px;
  border-radius:var(--r-lg);
  border:1px solid #2f5f7d;
  background:linear-gradient(180deg,#1d3348,#12222f);
  color:#d8ecff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  position:relative; overflow:hidden;
  transition:transform .06s;
}
#btnInject:active{ transform:scale(.985); background:linear-gradient(180deg,#24405a,#16283a); }
#btnInject .t{ display:block; font-size:16px; font-weight:700; letter-spacing:1.5px; }
#btnInject .s{ display:block; font-family:var(--mono); font-size:12px; color:#7fb4e0; }
/* ripple */
.ripple{
  position:absolute; border-radius:50%;
  background:rgba(140,205,255,.35);
  transform:translate(-50%,-50%) scale(0);
  animation:rip .45s ease-out forwards;
  pointer-events:none;
}
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* floating "+W" feedback */
.floatW{
  position:fixed; z-index:60;
  font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--blue);
  pointer-events:none;
  animation:floatUp .8s ease-out forwards;
  text-shadow:0 2px 6px #000;
}
@keyframes floatUp{
  from{ transform:translate(-50%,0); opacity:1; }
  to  { transform:translate(-50%,-56px); opacity:0; }
}

/* ---- tab bar ---------------------------------------------------------- */
.tabbar{
  flex:none;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-soft);
  background:var(--bg-2);
  padding-bottom:var(--sab);
}
.tab{
  height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  color:var(--txt-faint);
  position:relative;
}
.tab .ti{ font-size:17px; line-height:1; }
.tab .tl{ font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.tab.on{ color:var(--teal); }
.tab.on::before{
  content:""; position:absolute; top:0; left:22%; right:22%;
  height:2px; border-radius:2px; background:var(--teal);
}
.tab .badge{
  position:absolute; top:9px; right:50%; margin-right:-22px;
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  display:none;
}
.tab .badge.show{ display:block; }

/* =========================================================================
   Overlays / sheets / modals
   ========================================================================= */
.scrim{
  position:fixed; inset:0; z-index:80;
  background:rgba(3,6,10,.72);
  backdrop-filter:blur(3px);
  display:flex; align-items:flex-end;
  animation:fadeIn .16s ease-out;
}
.scrim.center{ align-items:center; justify-content:center; padding:20px; }
.scrim[hidden]{ display:none; }

.sheet{
  width:100%;
  max-height:82vh; overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--surface);
  border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:14px var(--gut) calc(18px + var(--sab));
  animation:slideUp .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.sheet .grip{
  width:38px; height:4px; border-radius:2px;
  background:var(--line); margin:0 auto 12px;
}
.sheet h2{
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--txt-dim); margin:0 0 12px;
}

.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; min-height:46px;
  border-bottom:1px solid var(--line-soft);
}
.row:last-child{ border-bottom:none; }
.row .lbl{ font-size:13.5px; }
.row .sub{ font-size:11px; color:var(--txt-faint); margin-top:1px; }

.switch{
  width:46px; height:27px; flex:none;
  border-radius:999px; background:var(--surface-3);
  border:1px solid var(--line);
  position:relative; transition:background .2s;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:19px; height:19px; border-radius:50%;
  background:var(--txt-faint); transition:transform .2s, background .2s;
}
.switch.on{ background:#173a2e; border-color:var(--teal-dark); }
.switch.on::after{ transform:translateX(19px); background:var(--teal); }

.btn{
  min-height:46px; padding:0 14px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  border:1px solid var(--line);
  font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn:active{ background:var(--surface-3); }
.btn.wide{ width:100%; }
.btn.danger{ border-color:#5c2626; color:#ff9a9a; }
.btn.primary{ border-color:var(--teal-dark); background:#12362b; color:var(--teal); }
.btnGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }

/* dev chip (lives in the top bar so it never covers content) */
#devChip{
  flex:none;
  height:28px; padding:0 11px;
  border-radius:999px;
  background:rgba(90,60,130,.30);
  border:1px solid #5a4478;
  color:var(--violet);
  font-size:10.5px; font-weight:700; letter-spacing:1.5px;
}
#devChip:active{ background:rgba(90,60,130,.55); }
#devChip.speeding{ background:rgba(120,80,20,.45); border-color:var(--amber); color:var(--amber); }
#devChip[hidden]{ display:none; }

/* modal box (win / offline) */
.modalBox{
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px 20px 18px;
  text-align:center;
  animation:popIn .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes popIn{ from{ transform:scale(.9); opacity:0; } to{ transform:none; opacity:1; } }
.modalBox.win{ border-color:var(--teal); box-shadow:0 0 40px rgba(63,217,173,.18); }
.modalBox h1{
  font-size:24px; letter-spacing:4px; margin:0 0 4px;
  color:var(--teal);
}
.modalBox .lead{ font-size:12.5px; color:var(--txt-dim); margin-bottom:14px; }
.modalBox .statList{ text-align:left; margin-bottom:16px; }

/* toast */
#toasts{
  position:fixed; z-index:90;
  left:0; right:0;
  top:calc(var(--sat) + 52px);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  pointer-events:none;
  padding:0 var(--gut);
}
.toast{
  max-width:100%;
  background:rgba(20,30,42,.96);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:var(--r-sm);
  padding:9px 13px;
  font-size:12.5px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  animation:toastIn .25s ease-out, toastOut .3s ease-in forwards;
  animation-delay:0s, 2.7s;
}
.toast.warn{ border-left-color:var(--amber); }
.toast.bad{ border-left-color:var(--red); }
.toast.good{ border-left-color:var(--green); }
@keyframes toastIn{ from{ transform:translateY(-12px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes toastOut{ to{ transform:translateY(-12px); opacity:0; } }

/* screen shake on meltdown */
@keyframes shake{
  10%,90%{ transform:translate(-2px,1px); }
  20%,80%{ transform:translate(3px,-2px); }
  30%,50%,70%{ transform:translate(-5px,2px); }
  40%,60%{ transform:translate(5px,-1px); }
}
#app.shake{ animation:shake .5s; }

/* meltdown flash */
#flash{
  position:fixed; inset:0; z-index:95;
  background:#fff; opacity:0; pointer-events:none;
}
#flash.fire{ animation:flashOut .5s ease-out; }
@keyframes flashOut{ from{ opacity:.75; } to{ opacity:0; } }

/* =========================================================================
   Accessibility / motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* very short screens: shrink the stage so upgrades stay reachable */
@media (max-height:660px){
  .stage{ height:clamp(96px, 16vh, 130px); }
  #btnInject{ min-height:54px; }
  .tab{ height:50px; }
}