/* ============ BENTHIC — abyssal terminal theme ============ */
:root {
  --bg: #04070d;
  --panel: #070d17;
  --panel2: #0a1322;
  --line: #14283c;
  --line-bright: #1f3c58;
  --text: #c9d8e4;
  --dim: #5d7488;
  --faint: #3a4d5e;
  --cyan: #54d8e8;
  --bio: #6ee7b7;
  --power: #ffd166;
  --research: #c4a7ff;
  --danger: #ff5d5d;
  --warn: #ffb454;
  --ok: #6ee7b7;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Roboto Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ============ TOP BAR ============ */
#topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #081020, #060b14);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(120,180,210,.05), 0 1px 0 #000;
  flex: 0 0 auto;
  transition: background .6s ease, box-shadow .6s ease;
}
/* machined instrument-module dividers */
#depthBlock, #gauges, #resources {
  border-left: 1px solid var(--line); padding-left: 18px;
}
#brand { min-width: 112px; }
#brandName { font-size: 17px; letter-spacing: 6px; color: var(--cyan); text-shadow: 0 0 12px rgba(84,216,232,.45); }
#probeName { font-size: 9px; letter-spacing: 2px; color: var(--dim); margin-top: 2px; }

#depthBlock { text-align: left; min-width: 176px; }
#depthRow { display: flex; align-items: baseline; gap: 5px; }
#depthVal {
  font-size: 26px; font-weight: 700; color: #eaf6fb;
  text-shadow: 0 0 14px rgba(84,216,232,.35);
  font-variant-numeric: tabular-nums;
}
#depthVal.glitch { color: var(--danger); text-shadow: 2px 0 #f0f, -2px 0 #0ff; animation: depthGlitch .14s steps(2) infinite; }
@keyframes depthGlitch { 0% { transform: translate(0,0) skewX(0); } 50% { transform: translate(-1px,0) skewX(-3deg); } 100% { transform: translate(1px,0) skewX(2deg); } }
#depthUnit { color: var(--dim); font-size: 13px; }
#zoneNameTop { font-size: 9px; letter-spacing: 2px; color: var(--cyan); opacity: .8; margin-top: 1px; }

#gauges { min-width: 176px; }
.gaugeRow { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.gaugeLabel { color: var(--faint); letter-spacing: 1px; }
.gaugeVal { color: var(--text); font-variant-numeric: tabular-nums; }
.gaugeVal.ok { color: var(--ok); }
.gaugeVal.warn { color: var(--warn); }
.gaugeVal.bad { color: var(--danger); }
#stressBarWrap {
  margin-top: 4px; height: 6px; background: #0a121e;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 1px 1px #000;
  background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.4) 9px 10px);
}
#stressBar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2e8b6e, #d9a93f 65%, #c43d3d 92%);
  transition: width .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
#stressBar.warn { box-shadow: 0 0 8px rgba(255,180,84,.5); }
#stressBar.crit { box-shadow: 0 0 10px rgba(255,93,93,.6); animation: hullPulse .9s ease-in-out infinite; }
#stressBar.crit.atlimit { animation-duration: .5s; }
@keyframes hullPulse { 50% { filter: brightness(1.5); } }

#resources { display: flex; gap: 16px; margin-left: auto; }
.res { display: flex; align-items: baseline; gap: 5px; }
.resIcon { font-size: 12px; }
.resIcon.power { color: var(--power); }
.resIcon.bio { color: var(--bio); }
.resIcon.research { color: var(--research); }
.resVal { font-size: 15px; color: #e8f1f7; font-variant-numeric: tabular-nums; transition: color .2s ease, text-shadow .2s ease; }
.resVal.gain { color: #fff; text-shadow: 0 0 10px currentColor; }
.resRate { font-size: 9px; color: var(--dim); font-variant-numeric: tabular-nums; }
#powerRate { color: var(--power); opacity: .8; }
#bioRate { color: var(--bio); opacity: .8; }
#researchPending { color: var(--research); opacity: .8; }

.iconBtn {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--dim); font-size: 13px; padding: 4px 8px; cursor: pointer;
}
.iconBtn:hover { border-color: var(--line-bright); color: var(--text); }

/* ============ MAIN ============ */
#mainRow { display: flex; flex: 1 1 auto; min-height: 0; }

#viewport { position: relative; flex: 1 1 auto; min-width: 0; background: #000; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#zoneBanner {
  position: absolute; top: 18%; left: 0; right: 0;
  text-align: center; pointer-events: none;
  font-size: 15px; letter-spacing: 7px; color: #d7eef5;
  text-shadow: 0 0 18px rgba(84,216,232,.6);
  opacity: 0;
  white-space: pre-line;
}
#zoneBanner.show { animation: bannerIn 1.1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes bannerIn {
  0%   { opacity: 0; letter-spacing: 14px; transform: translateY(-10px) scale(.98); filter: blur(2px); }
  100% { opacity: .95; letter-spacing: 7px; transform: none; filter: blur(0); }
}

#toasts { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: 300px; }
.toast {
  --life: 6s;
  position: relative; overflow: hidden;
  background: rgba(7,13,23,.9); border: 1px solid var(--line-bright);
  border-left: 3px solid var(--cyan);
  padding: 7px 10px 9px; font-size: 11px; border-radius: 3px;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8);
  animation: toastIn .32s cubic-bezier(.16,1,.3,1), toastOut .6s ease calc(var(--life) - .6s) forwards;
}
.toast::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--cyan); transform-origin: left; opacity: .5;
  animation: toastLife var(--life) linear forwards;
}
.toast.research { border-left-color: var(--research); }
.toast.research::after { background: var(--research); }
.toast.dread { border-left-color: var(--danger); box-shadow: inset 0 0 12px rgba(255,93,93,.12); }
.toast.dread::after { background: var(--danger); }
@keyframes toastIn { 0% { transform: translateX(24px) scale(.96); opacity: 0; } 70% { transform: translateX(-2px); opacity: 1; } 100% { transform: none; } }
@keyframes toastOut { to { transform: translateY(-6px); opacity: 0; } }
@keyframes toastLife { to { transform: scaleX(0); } }

#miniLog {
  position: absolute; left: 14px; bottom: 62px; pointer-events: none;
  display: flex; flex-direction: column-reverse; gap: 3px; max-width: 62%;
}

#lightsBtn {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(8,16,28,.85); color: var(--power);
  border: 1px solid var(--line-bright); border-radius: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  padding: 10px 14px; cursor: pointer;
  transition: color .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
#lightsBtn:hover { border-color: var(--power); box-shadow: 0 0 16px rgba(255,209,102,.25); }
#lightsBtn:active { transform: scale(.96); }
#lightsBtn.dark { color: #44525e; border-color: var(--line); background: rgba(2,4,8,.85); }
#lightsBtn.dark:hover { border-color: var(--dim); color: var(--dim); box-shadow: none; }
#lightsBtn.switched { animation: lightSwitch .3s ease; }
@keyframes lightSwitch { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

.resRate.raided { color: var(--danger); }
.miniLine { font-size: 11px; color: #b9cad6; text-shadow: 0 1px 3px #000; opacity: .9; }
.miniLine.l1 { opacity: .55; }
.miniLine.l2 { opacity: .3; }
.miniLine .lt-dread { color: #ff9b9b; }
.miniLine .lt-creature { color: var(--bio); }
.miniLine .lt-zone { color: var(--cyan); }
.miniLine .lt-event { color: #d8c9a3; }

#contactBox {
  position: absolute; right: 14px; bottom: 78px;
  background: rgba(20,14,6,.82); border: 1px solid #5a4422;
  border-radius: 6px; padding: 9px 12px; max-width: 250px;
  animation: contactGlow 2.4s ease-in-out infinite;
}
#contactBox.hidden { display: none; }
@keyframes contactGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,180,84,.12); border-color: #5a4422; }
  50% { box-shadow: 0 0 20px rgba(255,180,84,.3); border-color: var(--warn); }
}
#contactLabel { font-size: 10px; letter-spacing: 1px; color: var(--warn); margin-bottom: 7px; }
#scanBtn {
  width: 100%;
  background: rgba(40,28,10,.9); color: var(--warn);
  border: 1px solid var(--warn); border-radius: 5px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  padding: 8px 10px; cursor: pointer;
}
#scanBtn:hover:not(:disabled) { box-shadow: 0 0 14px rgba(255,180,84,.4); }
#scanBtn:disabled { opacity: .45; cursor: default; }
.scanCost { font-size: 11px; letter-spacing: 0; color: var(--power); }
#contactMore { font-size: 9px; color: var(--dim); margin-top: 5px; text-align: right; }

.scanMini {
  margin-top: 6px; width: 100%;
  background: rgba(40,28,10,.6); color: var(--warn);
  border: 1px solid #5a4422; border-radius: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  padding: 6px 8px; cursor: pointer;
}
.scanMini:hover { border-color: var(--warn); }
.beast.pending { border-color: #5a4422; opacity: 1; }
.beast.pending .beastName { color: var(--warn); letter-spacing: 1px; animation: contactPulse 2s ease infinite; }

#pingBtn {
  position: absolute; right: 14px; bottom: 14px; overflow: hidden;
  background: rgba(8,16,28,.85); color: var(--cyan);
  border: 1px solid var(--line-bright); border-radius: 6px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 2px;
  padding: 12px 18px; cursor: pointer;
  box-shadow: 0 0 18px rgba(84,216,232,.12);
  transition: transform .05s ease, box-shadow .2s ease, opacity .2s ease;
}
#pingBtn:hover { box-shadow: 0 0 24px rgba(84,216,232,.3); border-color: var(--cyan); }
#pingBtn:active { transform: scale(.97); }
/* recharge meter — fills 0->100% as the ping comes back, button disabled while cooling */
#pingBtn::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px;
  width: var(--cdfill, 0%); background: var(--cyan); opacity: 0;
  transition: width .14s linear;
}
#pingBtn.cooling { pointer-events: none; opacity: .5; cursor: default; }
#pingBtn.cooling::after { opacity: .85; }
.pingIcon { font-size: 14px; }
.pingYield { color: var(--bio); font-size: 11px; letter-spacing: 0; }

/* ============ SIDE PANEL ============ */
#panel {
  flex: 0 0 372px; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
  min-height: 0;
}
#tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.tabBtn {
  position: relative; flex: 1; background: none; border: none;
  color: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  padding: 10px 2px; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.tabBtn + .tabBtn { border-left: 1px solid var(--line); }
.tabBtn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: center;
  transition: transform .2s ease;
}
.tabBtn:hover { color: var(--text); }
.tabBtn.active { color: var(--cyan); background: linear-gradient(180deg, rgba(84,216,232,.06), transparent); }
.tabBtn.active::after { transform: scaleX(1); }
.tabDot {
  position: absolute; top: 6px; right: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--research); display: none;
  box-shadow: 0 0 6px var(--research); animation: contactPulse 2s ease infinite;
}
.tabDot.on { display: block; }

.tab { display: none; flex: 1 1 auto; overflow-y: auto; padding: 10px; min-height: 0; }
.tab.active { display: block; animation: tabIn .18s ease; }
@keyframes tabIn { from { opacity: 0; transform: translateY(4px); } }
.tab::-webkit-scrollbar { width: 8px; }
.tab::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.panelHint { font-size: 10px; color: var(--dim); line-height: 1.5; margin-bottom: 10px; }
.panelFootnote { font-size: 9px; color: var(--faint); margin-top: 10px; line-height: 1.5; }
.bioCol { color: var(--bio); }
.powerCol { color: var(--power); }
.researchCol { color: var(--research); }
.dim { color: var(--dim); }

/* buy buttons */
.buy {
  position: relative; overflow: hidden;
  display: block; width: 100%; text-align: left;
  background: linear-gradient(180deg, #0b1422, #080f1b); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(120,180,210,.04);
  color: var(--text); font-family: var(--mono);
  padding: 8px 10px 8px 13px; margin-bottom: 7px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.buy::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cyan); opacity: .5;
}
.buy[data-res="power"]::before { background: var(--power); }
.buy[data-res="bio"]::before { background: var(--bio); }
.buy[data-res="research"]::before { background: var(--research); }
.buy:hover:not(:disabled) { border-color: var(--line-bright); background: linear-gradient(180deg, #0e1a2c, #0a1322); }
.buy:active:not(:disabled) { transform: translateY(1px) scale(.992); }
.buy:disabled { opacity: .45; cursor: default; }
.buy:disabled::before { opacity: .2; }
.buy.hidden { display: none; }
.buy.bought { animation: buyFlash .5s ease; }
@keyframes buyFlash {
  0% { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 14px rgba(84,216,232,.5); }
  100% { box-shadow: inset 0 1px 0 rgba(120,180,210,.04); }
}
.buyTop { display: flex; justify-content: space-between; align-items: baseline; }
.buyName { font-size: 12px; color: #dcebf3; }
.buyCount { font-size: 11px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.buyDesc { font-size: 10px; color: var(--dim); margin: 3px 0; line-height: 1.45; }
.buyBottom { display: flex; justify-content: space-between; align-items: baseline; }
.buyEff { font-size: 9px; color: var(--faint); }
.buyCost { font-size: 11px; font-variant-numeric: tabular-nums; }
.buyCost.power { color: var(--power); }
.buyCost.bio { color: var(--bio); }
.buyCost.research { color: var(--research); }
.buy.cant .buyCost { color: var(--danger); opacity: .7; }
.buy.maxed .buyCost { color: var(--faint); }

/* refit */
#surfaceBox {
  background: var(--panel2); border: 1px solid var(--line-bright); border-radius: 5px;
  padding: 10px; margin-bottom: 12px;
}
#surfaceStats { font-size: 11px; color: var(--dim); line-height: 1.7; margin-bottom: 8px; }
#surfaceStats span { color: var(--text); }
#surfaceBtn {
  width: 100%; padding: 11px; cursor: pointer;
  background: linear-gradient(180deg, #11253b, #0b1828);
  border: 1px solid var(--cyan); border-radius: 5px;
  color: var(--cyan); font-family: var(--mono); font-size: 13px; letter-spacing: 3px;
}
#surfaceBtn:hover:not(:disabled) { box-shadow: 0 0 16px rgba(84,216,232,.35); }
#surfaceBtn:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--dim); }
#surfaceBtn.armed { border-color: var(--warn); color: var(--warn); }
#autobuyRow { margin-bottom: 10px; }
#autobuyRow.hidden { display: none; }

/* bestiary */
.beast {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 5px;
  padding: 8px 10px; margin-bottom: 7px;
}
.beastTop { display: flex; justify-content: space-between; align-items: baseline; }
.beastName { font-size: 12px; color: var(--bio); }
.beastDepth { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
.beastBuff { font-size: 9px; color: var(--cyan); margin-top: 2px; }
.beastText { font-size: 10px; color: var(--dim); line-height: 1.5; margin-top: 4px; }
.beast.unknown { opacity: .65; }
.beast.unknown .beastName { color: var(--faint); letter-spacing: 2px; }
.beast.contact .beastName { color: var(--warn); animation: contactPulse 2.4s ease infinite; }
.beast.anomaly .beastName { color: #e8a3c0; }
@keyframes contactPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* milestones / achievements */
.ach { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; opacity: .5; }
.ach.got { opacity: 1; }
.achMark { color: var(--faint); font-size: 13px; line-height: 1.2; }
.ach.got .achMark { color: var(--warn); text-shadow: 0 0 8px rgba(255,200,120,.5); }
.achBody { display: flex; flex-direction: column; }
.achName { font-size: 11px; color: var(--dim); letter-spacing: .5px; }
.ach.got .achName { color: var(--cyan); }
.achDesc { font-size: 9px; color: var(--faint); line-height: 1.4; }

/* log */
#logList { font-size: 11px; line-height: 1.55; }
.logLine { padding: 4px 2px; border-bottom: 1px solid #0a1320; color: #a8bcc9; }
.logLine .ldepth { color: var(--faint); font-size: 9px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.logLine.lt-system { color: var(--dim); }
.logLine.lt-zone { color: var(--cyan); }
.logLine.lt-creature { color: var(--bio); }
.logLine.lt-event { color: #d8c9a3; }
.logLine.lt-dread { color: #ff9b9b; }
.logLine.lt-research { color: var(--research); }

/* options */
.optGroup { margin-bottom: 16px; }
.optTitle { font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 7px; }
.optRow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text); padding: 4px 0; cursor: pointer; }
.optRow input[type="range"] { flex: 1; accent-color: var(--cyan); }
.optRow input[type="checkbox"] { accent-color: var(--cyan); }
.optBtnRow { display: flex; gap: 8px; margin: 6px 0; }
.smallBtn {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  padding: 7px 10px; cursor: pointer;
}
.smallBtn:hover { border-color: var(--line-bright); }
.smallBtn.danger { color: var(--danger); border-color: #3c1418; width: 100%; margin-top: 8px; }
.smallBtn.danger:hover { border-color: var(--danger); }
.smallBtn.armed { background: #2a0e12; border-color: var(--danger); }
#saveField {
  width: 100%; height: 64px; resize: none;
  background: #050a12; border: 1px solid var(--line); border-radius: 4px;
  color: var(--dim); font-family: var(--mono); font-size: 9px; padding: 6px;
}

/* ============ OVERLAYS ============ */
#beginOverlay {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 28%, #0a2236 0%, #03101c 52%, #01060b 100%);
  transition: opacity 1.4s ease;
}
/* two slow photophores far below — something is already down there */
#beginOverlay::before, #beginOverlay::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  width: 4px; height: 4px;
  background: radial-gradient(circle, rgba(110,231,183,.7), rgba(110,231,183,0) 70%);
  filter: blur(1px);
}
#beginOverlay::before { left: 34%; bottom: 16%; box-shadow: 0 0 18px 6px rgba(110,231,183,.25); animation: abyssBlink 6s ease-in-out infinite; }
#beginOverlay::after  { left: 63%; bottom: 23%; box-shadow: 0 0 16px 5px rgba(84,216,232,.2); animation: abyssBlink 7.3s ease-in-out 1.6s infinite; }
@keyframes abyssBlink { 0%,100% { opacity: .1; } 50% { opacity: .4; } }
#beginOverlay.gone { opacity: 0; pointer-events: none; }
#beginInner { text-align: center; max-width: 520px; padding: 24px; }
#beginTitle {
  font-size: 52px; letter-spacing: 26px; color: var(--cyan);
  text-shadow: 0 0 30px rgba(84,216,232,.55); margin-left: 26px;
  animation: titleBreathe 5s ease-in-out infinite;
}
@keyframes titleBreathe { 50% { text-shadow: 0 0 46px rgba(84,216,232,.8); } }
#beginBtn {
  margin-top: 52px;
  background: linear-gradient(180deg, rgba(84,216,232,.05), transparent);
  border: 1px solid var(--cyan); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(84,216,232,.15);
  color: var(--cyan); font-family: var(--mono); font-size: 15px; letter-spacing: 5px;
  padding: 14px 34px; cursor: pointer; transition: all .25s ease;
  animation: ctaPulse 3.2s ease-in-out infinite;
}
#beginBtn:hover { background: rgba(84,216,232,.1); box-shadow: 0 0 34px rgba(84,216,232,.4), inset 0 0 0 1px rgba(84,216,232,.3); }
@keyframes ctaPulse { 50% { box-shadow: 0 0 22px rgba(84,216,232,.3), inset 0 0 0 1px rgba(84,216,232,.25); } }

#surfaceFlash {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: linear-gradient(0deg, #14506e 0%, #6db5d8 55%, #dff2fb 100%);
}
#surfaceFlash.flash { animation: surfaceUp 2.6s ease forwards; }
@keyframes surfaceUp {
  0%   { opacity: 0; transform: translateY(40%); }
  18%  { opacity: 1; }
  55%  { opacity: .95; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10%); }
}

/* CRT scanline overlay removed — the repeating horizontal lines distracted from the play field.
   (To restore a much subtler version, re-add #viewport::after with a larger gap / lower opacity.) */
/* HUD sits above the canvas */
#zoneBanner, #toasts, #miniLog, #lightsBtn, #contactBox, #pingBtn { z-index: 5; }

/* ============ DEEP-EVENT TRANSMISSION OVERLAY ============ */
#deepEventOverlay {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(2,5,10,.82), rgba(0,0,0,.92));
  opacity: 0; transition: opacity .6s ease;
}
#deepEventOverlay.show { opacity: 1; pointer-events: auto; cursor: pointer; }
#deepEventInner {
  max-width: 600px; padding: 0 32px; text-align: center;
  font-size: 15px; line-height: 2.1; letter-spacing: 2px;
}
#deepEventInner .line { display: block; white-space: pre-wrap; }
#deepEventInner .line.setup { color: var(--cyan); text-shadow: 0 0 16px rgba(84,216,232,.4); }
#deepEventInner .line.payload { color: var(--danger); text-shadow: 1px 0 #f0f, -1px 0 #0ff; }
#deepEventCursor { color: var(--cyan); animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
#deepEventHint { margin-top: 26px; font-size: 10px; letter-spacing: 3px; color: var(--faint); opacity: 0; transition: opacity .8s ease; }
#deepEventHint.show { opacity: 1; }

/* ============ FOCUS / ACCESSIBILITY ============ */
:where(button, input, textarea, [tabindex]):focus-visible {
  outline: none; border-radius: inherit;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(84,216,232,.35);
}
#scanBtn:active:not(:disabled), #surfaceBtn:active:not(:disabled), .smallBtn:active { transform: translateY(1px) scale(.992); }

/* ============ RUNNING-DARK CHROME THEME ============ */
body.running-dark { --line: #0c1a28; --line-bright: #163148; --text: #9fb4c2; --dim: #48596a; }
body.running-dark #topbar { background: linear-gradient(180deg, #050a14, #03060c); box-shadow: inset 0 1px 0 rgba(80,130,160,.04), 0 1px 0 #000; }
body.running-dark #panel { background: #050912; }
body.running-dark #brandName { text-shadow: 0 0 8px rgba(84,216,232,.25); }
body.running-dark .buy, body.running-dark #surfaceBox { background: linear-gradient(180deg, #08101c, #060c16); }
#panel { transition: background .6s ease; }

/* ============ BIG SCREENS ============ */
@media (min-width: 1500px) {
  body { font-size: 14px; }
  #panel { flex: 0 0 440px; }
  #depthVal { font-size: 34px; }
  #zoneNameTop { font-size: 10px; }
  #brandName { font-size: 20px; }
  .resVal { font-size: 17px; }
  .resRate { font-size: 10px; }
  .gaugeRow { font-size: 11px; }
  .tabBtn { font-size: 11px; padding: 12px 2px; }
  .buyName { font-size: 13px; }
  .buyDesc { font-size: 11px; }
  .panelHint { font-size: 11px; }
  .beastName { font-size: 13px; }
  .beastText { font-size: 11px; }
  #logList { font-size: 12px; }
  #pingBtn { font-size: 15px; padding: 14px 22px; }
  .miniLine { font-size: 12px; }
}

/* ============ NARROW SCREENS ============ */
@media (max-width: 900px) {
  #topbar { flex-wrap: wrap; gap: 8px 14px; padding: 6px 10px; }
  #depthBlock, #gauges, #resources { border-left: none; padding-left: 0; }
  #resources { margin-left: 0; }
  #mainRow { flex-direction: column; }
  #viewport { flex: 1 1 50%; min-height: 240px; }
  #panel { flex: 0 0 46%; border-left: none; border-top: 1px solid var(--line); }
  #depthVal { font-size: 20px; }
  #beginTitle { font-size: 34px; letter-spacing: 14px; margin-left: 14px; }
}

/* phones: shrink the two bottom-corner controls so LIGHTS and PING never overlap */
@media (max-width: 560px) {
  #lightsBtn, #pingBtn { font-size: 10px; letter-spacing: 1px; padding: 9px 10px; bottom: 12px; }
  #lightsBtn { left: 10px; }
  #pingBtn { right: 10px; }
  .pingIcon { font-size: 11px; }
  .pingYield, .scanCost { font-size: 9px; }
  #miniLog { max-width: 50%; }
  #contactBox { right: 10px; max-width: 62%; }
}

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