* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cyan: #00d4ff;
  --cyan-dim: rgba(0, 212, 255, 0.3);
  --panel: rgba(6, 14, 28, 0.82);
  --panel-edge: rgba(0, 212, 255, 0.35);
}

:root[data-skin="cave"] {
  --cyan: #d6a85f;
  --cyan-dim: rgba(214, 168, 95, 0.32);
  --panel: rgba(28, 20, 13, 0.88);
  --panel-edge: rgba(190, 139, 75, 0.48);
}

html, body {
  height: 100%;
  background: #05070f;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  user-select: none;
}

.hidden { display: none !important; }

.skin-picker { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 16px; }
.skin-label { color: var(--cyan); font-size: 13px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.skin-label small { color: #91a0b1; font-weight: 400; letter-spacing: 0; text-transform: none; }
.skin-options { display: flex; justify-content: center; gap: 9px; }
.skin-btn { width: 190px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; text-align: left; padding: 9px 11px; cursor: pointer; color: #eaf4ff; background: rgba(8,16,30,.76); border: 1px solid var(--panel-edge); border-radius: 9px; }
.skin-btn > span { grid-row: 1 / 3; align-self: center; font-size: 25px; }
.skin-btn b { font-size: 13px; }
.skin-btn small { color: #91a0b1; font-size: 11px; }
.skin-btn:hover { border-color: var(--cyan); }
.skin-btn.selected { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 16%, rgba(8,16,30,.84)); box-shadow: 0 0 14px var(--cyan-dim); }
.skin-picker.entry-locked .skin-btn { cursor: default; }
.skin-picker.entry-locked .skin-btn:hover { border-color: var(--cyan); }
.plaza-return {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 6px 12px; color: var(--cyan); text-decoration: none;
  border: 1px solid color-mix(in srgb,var(--cyan) 56%,transparent); border-radius: 9px;
  background: rgba(2,7,14,.78); box-shadow: 0 4px 14px rgba(0,0,0,.32);
  font-size: 13px; font-weight: 750; white-space: nowrap; transition: background .15s,color .15s,transform .15s;
}
.plaza-return:hover,.plaza-return:focus-visible { color: #06101a; background: var(--cyan); transform: translateY(-1px); outline: none; }
#start-screen > .plaza-return-screen,#game-over-screen > .plaza-return-screen {
  position: absolute; top: max(10px,env(safe-area-inset-top)); left: max(10px,env(safe-area-inset-left)); z-index: 3;
}
:root[data-skin="cave"] #start-screen { background: #080604; overflow: hidden auto; isolation: isolate; }
:root[data-skin="cave"] #start-screen::before {
  content: ''; position: absolute; inset: -2%; z-index: -2;
  background: url('assets/cave-lobby.webp') center center / cover no-repeat;
}
:root[data-skin="cave"] #start-screen::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%,rgba(5,5,4,.2) 0 25%,rgba(5,3,2,.66) 63%,rgba(2,1,1,.92) 100%),linear-gradient(180deg,rgba(0,0,0,.48),transparent 26%,rgba(0,0,0,.42));
}
:root[data-skin="cave"] #start-screen > * { position: relative; z-index: 1; }
:root[data-skin="cave"] #start-screen > .plaza-return-screen { position: absolute; z-index: 3; }
:root[data-skin="cave"] #start-screen h1 {
  position: relative; margin-bottom: 4px; font-family: Georgia,'Times New Roman',serif; font-size: clamp(48px,7vw,82px); line-height: .92;
  letter-spacing: 9px; color: transparent; background: linear-gradient(180deg,#fff4d3 0,#e8b96a 34%,#9a5c24 72%,#f0c574 100%); -webkit-background-clip:text; background-clip:text;
  filter: drop-shadow(0 4px 2px #080402) drop-shadow(0 0 18px rgba(255,181,71,.42)); text-shadow:none;
}
:root[data-skin="cave"] #start-screen h1::after { content:'DEEP MINE'; display:block; margin-top:10px; color:#8ce9e6; font-family:'Segoe UI',sans-serif; font-size:11px; font-weight:700; letter-spacing:7px; text-shadow:0 0 12px #1cd4d0; }
:root[data-skin="cave"] .tagline { max-width:670px; margin:10px 0 14px; color:#eadbc2; font-size:clamp(14px,1.6vw,18px); text-shadow:0 2px 4px #000; }
:root[data-skin="cave"] .skin-picker { margin:8px 0 12px; padding:9px 12px 11px; border-radius:10px; background:rgba(12,8,5,.82); border:1px solid rgba(199,145,72,.32); box-shadow:0 7px 24px rgba(0,0,0,.42); }
:root[data-skin="cave"] .skin-label { color:#dcb16d; }
:root[data-skin="cave"] .skin-btn { background:linear-gradient(145deg,rgba(52,36,22,.92),rgba(20,13,8,.92)); border-color:#79532d; box-shadow:inset 0 1px rgba(255,224,166,.12); }
:root[data-skin="cave"] .skin-btn.selected { border-color:#e2ae62; background:linear-gradient(145deg,rgba(111,75,34,.94),rgba(38,24,13,.94)); box-shadow:0 0 18px rgba(230,165,71,.3),inset 0 1px rgba(255,235,194,.16); }
:root[data-skin="cave"] .join-box { padding:12px; border-radius:12px; background:rgba(12,8,5,.86); border:1px solid rgba(204,149,75,.4); box-shadow:0 12px 34px rgba(0,0,0,.58),inset 0 1px rgba(255,224,166,.1); }
:root[data-skin="cave"] #name-input, :root[data-skin="cave"] #code-input { background:rgba(14,9,6,.82); border-color:#8c6236; border-radius:7px; box-shadow:inset 0 2px 7px #000; }
:root[data-skin="cave"] #name-input:focus, :root[data-skin="cave"] #code-input:focus { border-color:#e7b568; box-shadow:0 0 14px rgba(226,164,77,.34),inset 0 2px 7px #000; }
:root[data-skin="cave"] #start-btn, :root[data-skin="cave"] #start-game-btn { color:#1c1007; border:1px solid #ffe0a1; border-radius:7px; background:linear-gradient(180deg,#ffd98b,#c88432 58%,#8e4f1e); box-shadow:inset 0 1px #fff3ca,0 5px 16px rgba(0,0,0,.5),0 0 14px rgba(236,163,65,.24); text-shadow:0 1px rgba(255,244,211,.4); }
:root[data-skin="cave"] #start-btn:hover, :root[data-skin="cave"] #start-game-btn:hover { transform:translateY(-2px) scale(1.025); box-shadow:inset 0 1px #fff3ca,0 8px 22px rgba(0,0,0,.58),0 0 24px rgba(242,174,74,.5); }
:root[data-skin="cave"] #lobby-settings { width:min(680px,94vw); max-height:min(66vh,650px); overflow-y:auto; margin-top:5px; padding:15px 17px; gap:10px; background:linear-gradient(155deg,rgba(44,29,17,.97),rgba(13,9,6,.98)); border-color:#9b6b37; border-radius:9px; box-shadow:0 18px 48px rgba(0,0,0,.68),inset 0 1px rgba(255,226,171,.14); scrollbar-color:#a66f35 #1b1009; }
:root[data-skin="cave"] .lobby-head, :root[data-skin="cave"] .char-label { color:#e1b36c; }
:root[data-skin="cave"] .account-line, :root[data-skin="cave"] .lobby-member { background:rgba(213,159,84,.09); border-color:rgba(213,159,84,.34); }
:root[data-skin="cave"] .char-btn, :root[data-skin="cave"] .upg-btn, :root[data-skin="cave"] .siphon-btn { background:linear-gradient(145deg,rgba(67,45,25,.86),rgba(23,14,9,.9)); border-color:rgba(179,121,55,.56); }
:root[data-skin="cave"] .char-btn:hover, :root[data-skin="cave"] .upg-btn:hover, :root[data-skin="cave"] .siphon-btn:hover { box-shadow:0 5px 14px rgba(0,0,0,.55),0 0 10px rgba(222,157,69,.22); border-color:#d99d4e; }
:root[data-skin="cave"] .preset-btn { background:linear-gradient(155deg,#51351d,#21140b); border-color:#8e5e2e; border-radius:7px; box-shadow:inset 0 1px rgba(255,224,165,.12); }
:root[data-skin="cave"] .preset-btn.selected { color:#fff0d2; background:linear-gradient(155deg,#9b6630,#482a13); border-color:#f1bd68; box-shadow:0 0 17px rgba(235,166,70,.38); }
:root[data-skin="cave"] #advanced-panel { border-color:rgba(189,130,61,.45); background:rgba(7,4,3,.3); }
:root[data-skin="cave"] #advanced-panel > summary { color:#dcb16d; }
:root[data-skin="cave"] .conn { margin-top:10px; text-shadow:0 1px 3px #000; }
:root[data-skin="cave"] .credits { margin-top:10px; color:#82705a; text-shadow:0 1px 3px #000; }
:root[data-skin="cave"] .build-btn, :root[data-skin="cave"] .ins-btn { background: linear-gradient(135deg, #35271a, #594027); }
:root[data-skin="cave"] #gameCanvas { background: #17120d; }

/* Deep Mine HUD: carved iron, warm crystal light, and authored structure portraits. */
:root[data-skin="cave"] #top-bar {
  height: 56px; padding: 0 16px;
  background:
    linear-gradient(180deg, rgba(45,31,19,.98), rgba(15,10,7,.94)),
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(255,213,139,.035) 91px 92px);
  border-bottom: 1px solid #b77b38;
  box-shadow: inset 0 -1px rgba(255,218,151,.24), 0 7px 24px rgba(0,0,0,.58);
  /* no backdrop-filter: the bar is ~96% opaque so the blur was invisible, but it forced
     the compositor to re-blur a full-width strip under the 60fps canvas every frame */
}
:root[data-skin="cave"] #resources, :root[data-skin="cave"] #wave-info { gap: 7px; }
:root[data-skin="cave"] #resources span, :root[data-skin="cave"] #wave-info span {
  position: relative; min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(89,62,34,.74), rgba(32,21,13,.8));
  border: 1px solid rgba(205,151,76,.42); border-radius: 6px;
  box-shadow: inset 0 1px rgba(255,226,170,.12), inset 0 -2px rgba(0,0,0,.3); text-shadow: 0 1px 2px #000;
}
:root[data-skin="cave"] #resources span { min-width: 62px; padding-left: 31px; font-variant-numeric: tabular-nums; }
:root[data-skin="cave"] #resources span::before {
  content: ''; position: absolute; left: 8px; width: 14px; height: 19px; transform: rotate(45deg) skew(-8deg,-8deg);
  border-radius: 2px; background: linear-gradient(135deg,#fff 0 12%,var(--gem-hi) 14% 42%,var(--gem) 45% 72%,var(--gem-lo) 74%);
  border: 1px solid color-mix(in srgb,var(--gem) 75%,white); box-shadow: 0 0 9px var(--gem), inset 2px 1px 2px rgba(255,255,255,.42);
}
:root[data-skin="cave"] #res-c { --gem:#5be8ff; --gem-hi:#c7f9ff; --gem-lo:#087c9e; }
:root[data-skin="cave"] #res-r { --gem:#ff4864; --gem-hi:#ffd1d7; --gem-lo:#8f0926; }
:root[data-skin="cave"] #res-e { --gem:#43e798; --gem-hi:#d1ffe7; --gem-lo:#087c4b; }
:root[data-skin="cave"] #res-t { --gem:#668dff; --gem-hi:#dbe4ff; --gem-lo:#24358f; }
:root[data-skin="cave"] #kills::before { transform: none; width: 18px; height: 18px; border: 0; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 34% 40%,#1b100b 0 11%,transparent 12%),radial-gradient(circle at 66% 40%,#1b100b 0 11%,transparent 12%),linear-gradient(#c9b59a,#705b48); box-shadow: 0 0 8px rgba(214,168,95,.35); }
:root[data-skin="cave"] #core-status { background: rgba(17,11,7,.46); border: 1px solid rgba(205,151,76,.3); border-radius: 7px; padding: 5px 8px; }
:root[data-skin="cave"] .core-bar { border-color: #8f6234; background: #100a06; box-shadow: inset 0 2px 5px #000; }
:root[data-skin="cave"] #core-bar-fill { background: linear-gradient(90deg,#18a989,#65f5ce,#d1ffe7); box-shadow: 0 0 9px #30dcb2; }
:root[data-skin="cave"] #bottom-bar {
  max-height: 126px; padding: 8px 16px 9px; gap: 14px;
  background: linear-gradient(0deg, rgba(15,9,6,.99), rgba(44,29,17,.96));
  border-top: 1px solid #b77b38; box-shadow: inset 0 1px rgba(255,218,151,.23), 0 -9px 28px rgba(0,0,0,.62); /* backdrop-filter removed — see #top-bar note */
}
:root[data-skin="cave"] #build-menu h3, :root[data-skin="cave"] #help h3 { color: #e3b76f; text-shadow: 0 1px 2px #000; }
:root[data-skin="cave"] #build-menu .hint { color: #a68c6b; }
:root[data-skin="cave"] .build-row { gap: 6px; }
:root[data-skin="cave"] .build-btn {
  width: 72px; min-height: 91px; padding: 3px 3px 5px; gap: 0; overflow: hidden;
  background: linear-gradient(150deg,#4c351f,#21150d 64%,#130c08); border: 1px solid #8d6333; border-radius: 7px;
  box-shadow: inset 0 1px rgba(255,224,162,.16), inset 0 -3px rgba(0,0,0,.32), 0 3px 7px rgba(0,0,0,.34);
}
:root[data-skin="cave"] .build-btn .icon {
  display: block; width: 58px; height: 53px; font-size: 0; flex: 0 0 53px;
  background-image: url('assets/cave-structures.png'); background-repeat: no-repeat; background-size: 400% 300%;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.75)); transition: filter .14s, transform .14s;
}
:root[data-skin="cave"] .build-btn[data-build="wall"] .icon { background-position: 0 0; }
:root[data-skin="cave"] .build-btn[data-build="gen"] .icon { background-position: 33.333% 0; }
:root[data-skin="cave"] .build-btn[data-build="cannon"] .icon { background-position: 66.667% 0; }
:root[data-skin="cave"] .build-btn[data-build="flame"] .icon { background-position: 100% 0; }
:root[data-skin="cave"] .build-btn[data-build="psi"] .icon { background-image: url('assets/cave-psi.png'); background-size: contain; background-position: center; }
:root[data-skin="cave"] .build-btn[data-build="frost"] .icon { background-position: 33.333% 50%; }
:root[data-skin="cave"] .build-btn[data-build="healer"] .icon { background-position: 66.667% 50%; }
:root[data-skin="cave"] .build-btn[data-build="timewarp"] .icon { background-position: 100% 50%; }
:root[data-skin="cave"] .build-btn[data-build="siphon"] .icon { background-position: 0 100%; }
:root[data-skin="cave"] .build-btn[data-build="converter"] .icon { background-position: 33.333% 100%; }
:root[data-skin="cave"] .build-btn .bname { color: #f0dfc3; font-weight: 650; text-shadow: 0 1px 2px #000; }
:root[data-skin="cave"] .build-btn .cost { color: #bcefff; line-height: 1.25; }
:root[data-skin="cave"] .build-btn .hotkey { top: 4px; left: 5px; z-index: 1; width: 15px; height: 15px; line-height: 15px; border-radius: 3px; color: #f4cf8f; background: rgba(12,7,4,.82); border: 1px solid rgba(226,176,98,.42); }
:root[data-skin="cave"] .build-btn:hover { transform: translateY(-3px); border-color: #e0aa5c; box-shadow: 0 7px 17px rgba(0,0,0,.55),0 0 12px rgba(222,159,74,.25); }
:root[data-skin="cave"] .build-btn:hover .icon { transform: scale(1.08); filter: drop-shadow(0 3px 4px #000) brightness(1.13); }
:root[data-skin="cave"] .build-btn.selected { background: linear-gradient(150deg,#8b6230,#3a2413); color: #fff; border-color: #ffd27e; box-shadow: 0 0 17px rgba(255,181,74,.62), inset 0 0 12px rgba(255,198,105,.18); }
:root[data-skin="cave"] .build-btn.selected .bname, :root[data-skin="cave"] .build-btn.selected .cost { color: #fff4d8; }
:root[data-skin="cave"] #help { color: #c6b394; border-left: 1px solid rgba(190,139,75,.3); padding-left: 12px; }
:root[data-skin="cave"] .roster-row, :root[data-skin="cave"] #minimap, :root[data-skin="cave"] #inspector { box-shadow: 0 5px 18px rgba(0,0,0,.5), inset 0 1px rgba(255,218,151,.1); }

/* Olympus Frontier: orbital marble, Delphic gold, and cyan aether light. */
:root[data-skin="classic"] {
  --cyan: #70efff;
  --cyan-dim: rgba(112,239,255,.34);
  --panel: rgba(5,13,31,.9);
  --panel-edge: rgba(216,184,99,.5);
}
:root[data-skin="classic"] #start-screen { background:#020817; overflow:hidden auto; isolation:isolate; }
:root[data-skin="classic"] #start-screen::before {
  content:''; position:absolute; inset:-2%; z-index:-2;
  background:url('assets/orbital-lobby-v1.webp') center 42% / cover no-repeat;
  filter:saturate(.94) contrast(1.04);
}
:root[data-skin="classic"] #start-screen::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(3,13,35,.28) 0 27%,rgba(2,8,25,.68) 68%,rgba(1,4,15,.94) 100%),linear-gradient(180deg,rgba(1,5,17,.58),transparent 32%,rgba(1,4,14,.62));
}
:root[data-skin="classic"] #start-screen > * { position:relative; z-index:1; }
:root[data-skin="classic"] #start-screen > .plaza-return-screen { position:absolute; z-index:3; }
:root[data-skin="classic"] #start-screen h1 {
  position:relative; margin-bottom:4px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(48px,7vw,82px); line-height:.92;
  letter-spacing:10px; color:transparent; background:linear-gradient(180deg,#fff 0,#dcecff 25%,#d9bb68 58%,#806225 82%,#e9d692 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 4px 2px #010817) drop-shadow(0 0 20px rgba(82,225,255,.38)); text-shadow:none;
}
:root[data-skin="classic"] #start-screen h1::before { content:'Ω'; margin-right:16px; color:#8cf3ff; -webkit-text-fill-color:#8cf3ff; font-size:.72em; text-shadow:0 0 18px rgba(81,232,255,.75); }
:root[data-skin="classic"] #start-screen h1::after { content:'OLYMPUS FRONTIER'; display:block; margin-top:10px; color:#e7cb7a; -webkit-text-fill-color:#e7cb7a; font-family:'Segoe UI',sans-serif; font-size:11px; font-weight:750; letter-spacing:7px; text-shadow:0 0 13px rgba(230,192,92,.6); }
:root[data-skin="classic"] .tagline { max-width:690px; margin:10px 0 14px; color:#dcecff; font-size:clamp(14px,1.6vw,18px); text-shadow:0 2px 5px #000; }
:root[data-skin="classic"] .skin-picker { margin:8px 0 12px; padding:9px 12px 11px; border-radius:3px 12px 3px 12px; background:linear-gradient(145deg,rgba(9,24,53,.92),rgba(3,10,27,.94)); border:1px solid rgba(226,195,108,.45); box-shadow:0 12px 35px rgba(0,0,0,.48),inset 0 1px rgba(231,244,255,.14); }
:root[data-skin="classic"] .skin-label { color:#efd47f; }
:root[data-skin="classic"] .skin-label small, :root[data-skin="classic"] .skin-btn small { color:#9fc5d6; }
:root[data-skin="classic"] .skin-btn { background:linear-gradient(145deg,rgba(19,43,81,.96),rgba(5,15,37,.96)); border-color:#6f7e91; border-radius:2px 9px 2px 9px; box-shadow:inset 0 1px rgba(235,247,255,.14); }
:root[data-skin="classic"] .skin-btn.selected { border-color:#efd477; background:linear-gradient(145deg,rgba(29,68,111,.98),rgba(7,26,56,.98)); box-shadow:0 0 18px rgba(87,231,255,.28),inset 0 0 12px rgba(239,207,109,.09); }
:root[data-skin="classic"] .join-box { padding:12px; border-radius:3px 13px 3px 13px; background:rgba(4,13,32,.88); border:1px solid rgba(226,195,108,.48); box-shadow:0 15px 38px rgba(0,0,0,.58),inset 0 1px rgba(224,242,255,.13); }
:root[data-skin="classic"] #start-btn, :root[data-skin="classic"] #start-game-btn { color:#041326; border:1px solid #fff1b4; border-radius:2px 9px 2px 9px; background:linear-gradient(180deg,#f7e4a5,#d0a942 56%,#8c6c22); box-shadow:inset 0 1px #fff9dc,0 5px 18px rgba(0,0,0,.55),0 0 18px rgba(92,228,255,.2); text-shadow:0 1px rgba(255,255,255,.65); }
:root[data-skin="classic"] #start-btn:hover, :root[data-skin="classic"] #start-game-btn:hover { box-shadow:inset 0 1px #fff9dc,0 7px 22px rgba(0,0,0,.56),0 0 24px rgba(90,236,255,.38); }
:root[data-skin="classic"] #lobby-settings { width:min(680px,94vw); max-height:min(66vh,650px); overflow-y:auto; margin-top:5px; padding:15px 17px; gap:10px; background:linear-gradient(155deg,rgba(12,31,65,.97),rgba(3,10,27,.98)); border-color:#b49a56; border-radius:3px 13px 3px 13px; box-shadow:0 20px 52px rgba(0,0,0,.68),inset 0 1px rgba(230,244,255,.16); scrollbar-color:#bb9c49 #07132a; }
:root[data-skin="classic"] .lobby-head, :root[data-skin="classic"] .char-label, :root[data-skin="classic"] .dial-title { color:#efd47f; }
:root[data-skin="classic"] .lobby-member, :root[data-skin="classic"] .char-btn, :root[data-skin="classic"] .upg-btn, :root[data-skin="classic"] .siphon-btn { background:rgba(70,159,211,.1); border-color:rgba(103,222,244,.32); }
:root[data-skin="classic"] .dial-box, :root[data-skin="classic"] #advanced-panel { background:rgba(1,7,20,.4); border-color:rgba(226,195,108,.4); }
:root[data-skin="classic"] #advanced-panel > summary { color:#efd47f; }
:root[data-skin="classic"] .conn { margin-top:10px; text-shadow:0 2px 4px #000; }
:root[data-skin="classic"] .credits { margin-top:10px; color:#7796aa; text-shadow:0 2px 4px #000; }
:root[data-skin="classic"] #gameCanvas { background:#050b19; }

:root[data-skin="classic"] #top-bar {
  height:56px; padding:0 16px;
  background:linear-gradient(180deg,rgba(13,31,62,.98),rgba(3,11,28,.96)),repeating-linear-gradient(90deg,transparent 0 91px,rgba(232,210,145,.035) 92px 93px);
  border-bottom:1px solid #dfc56f; box-shadow:inset 0 -1px rgba(120,235,255,.25),0 7px 26px rgba(0,0,0,.6);
}
:root[data-skin="classic"] #resources, :root[data-skin="classic"] #wave-info { gap:7px; }
:root[data-skin="classic"] #resources span, :root[data-skin="classic"] #wave-info span { position:relative; min-height:32px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(30,69,108,.76),rgba(6,20,45,.82)); border:1px solid rgba(218,191,107,.4); border-radius:2px 8px 2px 8px; box-shadow:inset 0 1px rgba(224,245,255,.13),inset 0 -2px rgba(0,0,0,.32); text-shadow:0 1px 3px #000; }
:root[data-skin="classic"] #resources span { min-width:62px; padding-left:31px; font-variant-numeric:tabular-nums; }
:root[data-skin="classic"] #resources span::before { content:''; position:absolute; left:8px; width:14px; height:19px; transform:rotate(45deg) skew(-8deg,-8deg); border-radius:2px; background:linear-gradient(135deg,#fff 0 12%,var(--gem-hi) 14% 42%,var(--gem) 45% 72%,var(--gem-lo) 74%); border:1px solid color-mix(in srgb,var(--gem) 72%,white); box-shadow:0 0 10px var(--gem),inset 2px 1px 2px rgba(255,255,255,.48); }
:root[data-skin="classic"] #res-c { --gem:#65eaff; --gem-hi:#e2fcff; --gem-lo:#087f9b; }
:root[data-skin="classic"] #res-r { --gem:#ff5674; --gem-hi:#ffe2e7; --gem-lo:#960d33; }
:root[data-skin="classic"] #res-e { --gem:#55ecae; --gem-hi:#e1fff1; --gem-lo:#087e53; }
:root[data-skin="classic"] #res-t { --gem:#7897ff; --gem-hi:#e6ebff; --gem-lo:#2d409d; }
:root[data-skin="classic"] #kills::before { transform:none; width:19px; height:19px; border:1px solid #e4c96f; border-radius:50%; background:radial-gradient(circle at 38% 38%,#effeff 0 8%,#67ecff 9% 24%,#17668c 25% 46%,#071a37 48% 67%,#d9bc61 69% 76%,#1a3153 78%); box-shadow:0 0 11px rgba(84,232,255,.65); }
:root[data-skin="classic"] #core-status { background:rgba(3,13,31,.56); border:1px solid rgba(218,191,107,.38); border-radius:2px 8px 2px 8px; padding:5px 8px; }
:root[data-skin="classic"] .core-bar { border-color:#9c874e; background:#020818; box-shadow:inset 0 2px 5px #000; }
:root[data-skin="classic"] #core-bar-fill { background:linear-gradient(90deg,#258ee6,#6cf4ff,#e6ffff); box-shadow:0 0 10px #48dcff; }
:root[data-skin="classic"] #bottom-bar { max-height:126px; padding:8px 16px 9px; gap:14px; background:linear-gradient(0deg,rgba(2,8,22,.99),rgba(10,29,59,.97)); border-top:1px solid #dfc56f; box-shadow:inset 0 1px rgba(120,235,255,.22),0 -9px 30px rgba(0,0,0,.64); }
:root[data-skin="classic"] #build-menu h3, :root[data-skin="classic"] #help h3 { color:#efd47f; text-shadow:0 1px 3px #000; }
:root[data-skin="classic"] #build-menu .hint { color:#88aabd; }
:root[data-skin="classic"] .build-row { gap:6px; }
:root[data-skin="classic"] .build-btn { width:72px; min-height:91px; padding:3px 3px 5px; gap:0; overflow:hidden; background:linear-gradient(150deg,#173d69,#08182f 64%,#030b1c); border:1px solid #8e824f; border-radius:2px 8px 2px 8px; box-shadow:inset 0 1px rgba(223,245,255,.17),inset 0 -3px rgba(0,0,0,.34),0 3px 8px rgba(0,0,0,.38); }
:root[data-skin="classic"] .build-btn .icon { display:block; width:58px; height:53px; font-size:0; flex:0 0 53px; background-image:url('assets/orbital-structures-v1.webp'); background-repeat:no-repeat; background-size:400% 300%; filter:drop-shadow(0 3px 4px rgba(0,0,0,.78)); transition:filter .14s,transform .14s; }
:root[data-skin="classic"] .build-btn[data-build="wall"] .icon { background-position:0 0; }
:root[data-skin="classic"] .build-btn[data-build="gen"] .icon { background-position:33.333% 0; }
:root[data-skin="classic"] .build-btn[data-build="cannon"] .icon { background-position:66.667% 0; }
:root[data-skin="classic"] .build-btn[data-build="flame"] .icon { background-position:100% 0; }
:root[data-skin="classic"] .build-btn[data-build="psi"] .icon { background-image:url('assets/orbital-psi-v1.webp'); background-size:contain; background-position:center; }
:root[data-skin="classic"] .build-btn[data-build="frost"] .icon { background-position:33.333% 50%; }
:root[data-skin="classic"] .build-btn[data-build="healer"] .icon { background-position:66.667% 50%; }
:root[data-skin="classic"] .build-btn[data-build="timewarp"] .icon { background-position:100% 50%; }
:root[data-skin="classic"] .build-btn[data-build="siphon"] .icon { background-position:0 100%; }
:root[data-skin="classic"] .build-btn[data-build="converter"] .icon { background-position:33.333% 100%; }
:root[data-skin="classic"] .build-btn .bname { color:#e6f2ff; font-weight:650; text-shadow:0 1px 3px #000; }
:root[data-skin="classic"] .build-btn .cost { color:#91f4ff; line-height:1.25; }
:root[data-skin="classic"] .build-btn .hotkey { top:4px; left:5px; z-index:1; width:15px; height:15px; line-height:15px; border-radius:2px; color:#f4da82; background:rgba(2,8,21,.86); border:1px solid rgba(226,195,108,.5); }
:root[data-skin="classic"] .build-btn:hover { transform:translateY(-3px); border-color:#f0d377; box-shadow:0 7px 18px rgba(0,0,0,.56),0 0 14px rgba(91,230,255,.28); }
:root[data-skin="classic"] .build-btn:hover .icon { transform:scale(1.08); filter:drop-shadow(0 3px 5px #000) brightness(1.13); }
:root[data-skin="classic"] .build-btn.selected { background:linear-gradient(150deg,#2e6997,#0d2e55); border-color:#ffe58c; box-shadow:0 0 18px rgba(76,228,255,.6),inset 0 0 13px rgba(244,211,112,.16); }
:root[data-skin="classic"] .build-btn.selected .bname, :root[data-skin="classic"] .build-btn.selected .cost { color:#fff8d8; }
:root[data-skin="classic"] #help { color:#a9c7d7; border-left:1px solid rgba(220,194,108,.32); padding-left:12px; }
:root[data-skin="classic"] .roster-row, :root[data-skin="classic"] #minimap, :root[data-skin="classic"] #inspector, :root[data-skin="classic"] #command-table { border-color:rgba(218,191,107,.44); box-shadow:0 5px 19px rgba(0,0,0,.54),inset 0 1px rgba(125,234,255,.11); }

#game-container { position: relative; width: 100vw; height: 100vh; height: 100dvh; }

#gameCanvas { display: block; width: 100vw; height: 100vh; height: 100dvh; background: #0a0f1e; cursor: crosshair; touch-action: none; }

#ui-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* Touch controls are opt-in from the runtime capability check. Keeping them
   out of desktop layout avoids a UA sniff and gives tablets with a coarse
   pointer the same complete input surface as phones. */
#touch-controls { display: none; }
.touch-ui #touch-controls { display: block; }
#touch-joystick {
  position: absolute; left: max(10px,env(safe-area-inset-left)); bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 16; width: 112px; height: 112px; border-radius: 50%; pointer-events: auto; touch-action: none;
  border: 2px solid color-mix(in srgb,var(--cyan) 62%,transparent); background: radial-gradient(circle,rgba(16,47,72,.62) 0 31%,rgba(3,12,24,.82) 33% 100%);
  box-shadow: 0 8px 28px rgba(0,0,0,.5),inset 0 0 22px color-mix(in srgb,var(--cyan) 13%,transparent);
}
#touch-joystick::before { content:''; position:absolute; inset:22px; border:1px solid color-mix(in srgb,var(--cyan) 32%,transparent); border-radius:50%; }
#touch-joystick .touch-stick { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px; border-radius:50%; background:linear-gradient(145deg,#dffbff,#65d8ef); border:2px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 16px var(--cyan-dim); will-change:transform; }
#touch-joystick small { position:absolute; left:0; right:0; bottom:7px; color:#dff8ff; font-size:8px; font-weight:900; letter-spacing:.16em; text-align:center; text-shadow:0 1px 3px #000; }
#touch-actions { position:absolute; right:max(8px,env(safe-area-inset-right)); bottom:calc(88px + env(safe-area-inset-bottom)); z-index:15; display:flex; flex-direction:column; gap:7px; pointer-events:auto; }
#touch-actions button { min-width:82px; min-height:46px; padding:6px 9px; border:1px solid color-mix(in srgb,var(--cyan) 55%,transparent); border-radius:12px; color:#e9fbff; background:rgba(4,17,31,.9); box-shadow:0 5px 16px rgba(0,0,0,.46); font:inherit; font-size:12px; font-weight:800; touch-action:manipulation; }
#touch-actions button:disabled { opacity:.42; }
#touch-actions #touch-panic:not(:disabled) { color:#ffe0e5; border-color:rgba(255,104,137,.7); background:rgba(65,12,27,.9); }
#touch-actions #touch-cancel { color:#ffe7ae; border-color:rgba(255,209,102,.65); }
#touch-help { position:absolute; left:50%; bottom:calc(205px + env(safe-area-inset-bottom)); z-index:14; width:min(460px,calc(100vw - 142px)); padding:8px 11px; transform:translateX(-50%); pointer-events:none; color:#e8fbff; background:rgba(3,13,25,.9); border:1px solid var(--panel-edge); border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.45); font-size:11px; font-weight:650; line-height:1.35; text-align:center; transition:opacity .25s; }
#touch-help.settled { opacity:0; }

/* ---------- Top bar ---------- */
#top-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 52px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92), rgba(0,0,0,0.45));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; gap: 16px;
  border-bottom: 2px solid var(--cyan);
  pointer-events: auto;
}
#resources, #wave-info { display: flex; gap: 12px; font-size: 15px; align-items: center; }
#resources span, #wave-info span {
  background: rgba(0, 212, 255, 0.08);
  padding: 5px 13px; border-radius: 5px;
  border: 1px solid var(--cyan-dim);
  white-space: nowrap;
}
#resources span { padding: 5px 9px; font-weight: 600; }
.res-c { color: #9be7ff; } .res-r { color: #ff8090; } .res-e { color: #5fe6bf; } .res-t { color: #9fb0ff; }
.res.short { opacity: .4; }
#phase.phase-day { color: #ffd166; border-color: rgba(255,209,102,.4); background: rgba(255,209,102,.08); }
#phase.phase-night { color: #ff6b9d; border-color: rgba(255,107,157,.4); background: rgba(255,107,157,.08); }
#timer.enraged { color: #fff; font-weight: 700; border-radius: 5px; padding: 2px 8px; background: rgba(255,34,34,.18); animation: enragePulse .7s ease-in-out infinite; }
@keyframes enragePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,40,40,.0); text-shadow: 0 0 4px rgba(255,60,60,.6); } 50% { box-shadow: 0 0 10px 2px rgba(255,40,40,.55); text-shadow: 0 0 9px rgba(255,80,80,1); } }
#skip-day { cursor: pointer; font-family: inherit; font-size: 14px; white-space: nowrap; color: #cfe; padding: 5px 12px; border-radius: 5px; background: rgba(0,212,255,.08); border: 1px solid var(--cyan-dim); }
#skip-day:hover { background: rgba(0,212,255,.2); }
#skip-day.readyon { background: linear-gradient(135deg,#06d6a0,#00a37a); color: #021; border-color: #06d6a0; font-weight: 700; }
#command-toggle { cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; color: #f6df9b; padding: 5px 10px; border-radius: 5px; background: rgba(96,72,22,.36); border: 1px solid rgba(232,195,105,.55); }
#command-toggle:hover, #command-toggle[aria-expanded="true"] { background: linear-gradient(145deg,rgba(119,84,25,.74),rgba(40,49,62,.92)); box-shadow: 0 0 14px rgba(232,195,105,.12); }

#core-status { display: flex; align-items: center; gap: 8px; }
.core-label { font-size: 12px; letter-spacing: 2px; color: var(--cyan); }
.core-bar {
  width: 160px; height: 14px; border: 1px solid var(--cyan-dim);
  border-radius: 7px; overflow: hidden; background: rgba(0,0,0,.5);
}
#core-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #00d4ff, #06d6a0);
  transition: width .2s linear;
}

/* ---------- Roster ---------- */
#roster {
  position: absolute; top: 62px; left: 12px;
  display: flex; flex-direction: column; gap: 5px;
  pointer-events: none;
}
.roster-row {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 6px; padding: 4px 9px; font-size: 13px; min-width: 150px;
}
.roster-row .rline { display: flex; align-items: center; gap: 8px; }
.roster-row .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.roster-row .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-row.dead { opacity: .65; }
.roster-row .rstatus { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.roster-row .rstatus.down { color: #ff6b6b; }
.roster-row .rstatus.rev { color: #06d6a0; }
.roster-row .hpbar { width: 46px; height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.roster-row .hpbar > i { display: block; height: 100%; background: #06d6a0; }

/* ---------- Minimap ---------- */
#minimap {
  position: absolute; top: 62px; right: 12px;
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background: rgba(2, 6, 14, 0.85);
  pointer-events: none;
}

/* ---------- Delphic assault forecast ---------- */
#command-table {
  position: absolute; top: 207px; right: 12px; width: min(324px, calc(100vw - 24px));
  padding: 12px; color: #e9f5fa; pointer-events: auto;
  background: linear-gradient(155deg, rgba(12,18,28,.96), rgba(9,27,39,.94));
  border: 1px solid rgba(232,195,105,.52); border-radius: 10px;
  box-shadow: 0 16px 38px rgba(0,0,0,.48), inset 0 0 0 1px rgba(119,214,255,.08);
}
.command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(232,195,105,.2); }
.command-head > div { min-width: 0; }
.command-head span { display: block; color: #c4a95f; font-size: 8px; font-weight: 900; letter-spacing: .17em; }
.command-head strong { display: block; margin-top: 3px; overflow: hidden; color: #fff4cf; font-family: Georgia, serif; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
#command-close { flex: 0 0 26px; width: 26px; height: 26px; cursor: pointer; color: #d9c98f; font-size: 18px; line-height: 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(232,195,105,.28); border-radius: 50%; }
#command-close:hover { color: #fff; border-color: #e8c369; background: rgba(232,195,105,.12); }
.command-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.command-metrics > div { min-width: 0; padding: 7px 6px; text-align: center; background: rgba(83,161,197,.07); border: 1px solid rgba(94,182,220,.16); border-radius: 7px; }
.command-metrics span { display: block; overflow: hidden; color: #7194a4; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-overflow: ellipsis; }
.command-metrics strong { display: block; margin-top: 2px; color: #dff8ff; font-size: 14px; }
.command-traits { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; margin-top: 8px; }
.command-trait { padding: 3px 7px; color: #b7d9e8; font-size: 9px; font-weight: 700; background: rgba(69,115,143,.16); border: 1px solid rgba(105,180,215,.22); border-radius: 999px; }
.command-trait.danger { color: #ffd3d9; background: rgba(160,48,72,.2); border-color: rgba(255,104,137,.34); }
#command-counter { margin-top: 7px; color: #adc3cc; font-size: 11px; line-height: 1.35; }

/* ---------- Toast notifications (hero joins, etc.) ---------- */
/* anchored just ABOVE the bottom bar (its positioned parent) regardless of bar height */
#toast {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; z-index: 60; width: max-content; max-width: 80vw;
}
.toast {
  background: linear-gradient(135deg, rgba(12,24,48,.96), rgba(20,12,40,.96));
  border: 1px solid var(--cyan); border-left: 4px solid var(--cyan);
  border-radius: 8px; padding: 9px 18px; color: #eaf6ff; font-size: 15px;
  box-shadow: 0 6px 22px rgba(0,0,0,.55); text-align: center;
  animation: toastIn .25s ease-out, toastOut .5s ease-in forwards;
  animation-delay: 0s, 5s;
}
.toast.hero { border-color: #ffd166; border-left-color: #ffd166; }
.toast.hero b { color: #ffd166; }
.toast .sub { display: block; font-size: 12px; color: #ff9db0; margin-top: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- Bottom bar ---------- */
#bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0; min-height: 0; max-height: 116px;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.4));
  display: flex; gap: 16px; padding: 8px 18px;
  border-top: 2px solid var(--cyan);
  pointer-events: auto; align-items: flex-start;
}
#build-menu { flex: 1; min-width: 0; }
#build-menu h3, #help h3 {
  color: var(--cyan); font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#build-menu .hint { color: #6f8aa3; text-transform: none; letter-spacing: 0; font-weight: 400; }
.build-row { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
.build-btn {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 66px; padding: 5px 3px;
  background: linear-gradient(135deg, #112141, #0f3460);
  color: #fff; border: 1px solid var(--cyan); border-radius: 8px;
  cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s;
}
.build-btn .icon { font-size: 19px; }
.build-btn .bname { font-size: 10px; white-space: nowrap; }
.build-btn .cost { font-size: 10px; color: #9be7ff; }
.build-btn .hotkey { position: absolute; top: 1px; left: 4px; font-size: 10px; font-weight: 700; color: #ffd166; opacity: .85; }
.build-btn.selected .hotkey { color: #022; }
/* per-mineral cost affordability (build cards + upgrade buttons): bright = affordable, .short = you're low on it */
.cm.short { opacity: .32; }
.build-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,212,255,.35); }
.build-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); color: #022; box-shadow: 0 0 16px rgba(0,212,255,.6); }
.build-btn.selected .cost { color: #022; }
.build-btn.unaffordable { cursor: not-allowed; } /* no whole-card dim — the per-mineral .short shows exactly what you lack */
/* probe level too low to build this yet (e.g. Crystallizer needs Lv 4) */
.build-btn.locked { opacity: .6; cursor: not-allowed; border-color: rgba(255,209,102,.55); }
.build-btn.locked:hover { transform: none; box-shadow: none; }
.build-btn.locked .cost { color: #ffd166; }
.build-btn.locked .cost::before { content: '🔒 '; }

#help { width: 208px; overflow-y: auto; }
/* refinery output-mineral picker (shown while the Refinery card is selected) */
#refine-pick { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
#refine-pick .rp-label { font-size: 11px; color: #9be7ff; }
#refine-row { display: flex; gap: 4px; }
.refine-btn { cursor: pointer; padding: 3px 8px; border-radius: 7px; background: rgba(0,212,255,.07); border: 1px solid var(--cyan-dim); font-size: 14px; }
.refine-btn:hover { background: rgba(0,212,255,.16); }
.refine-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); border-color: #fff; }
/* relic placement prompt (shown while you're holding a found relic) */
#relic-prompt { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
#relic-prompt .rp-label { font-size: 11px; color: #e0aaff; }
#relic-place-btn { cursor: pointer; padding: 3px 10px; border-radius: 7px; background: rgba(224,170,255,.12); border: 1px solid rgba(224,170,255,.55); color: #f0e0ff; font-size: 12px; font-weight: 600; }
#relic-place-btn:hover, #relic-place-btn.armed { background: linear-gradient(135deg, #b98cff, #7b5cff); border-color: #fff; color: #fff; }
/* skip-day: loud pulse + toast when a teammate readies up */
#skip-day.skip-alert { animation: skipPulse .8s ease-in-out infinite; border-color: #ffd166; }
@keyframes skipPulse { 0%,100% { box-shadow: 0 0 6px rgba(255,209,102,.5); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(255,209,102,1); transform: scale(1.06); } }
/* the Secret Cow Level: the one night the HUD goes bovine */
.toast.cow { background: linear-gradient(135deg, rgba(244,240,230,.96), rgba(226,214,190,.96)); color: #241f1c; font-weight: 700; border-color: #241f1c; border-left-color: #241f1c; }
.toast.cow b { color: #7a1010; }
.phase-cow { color: #f4f0e6 !important; text-shadow: 0 0 12px rgba(255,64,32,.85); }
.toast.skip { background: linear-gradient(135deg, rgba(255,209,102,.95), rgba(255,150,60,.95)); color: #201400; font-weight: 700; font-size: 14px; }
/* lobby host/kick controls */
.lobby-member .lm-btn { margin-left: 5px; font-size: 10px; padding: 1px 6px; border-radius: 6px; cursor: pointer; border: 1px solid var(--cyan-dim); background: rgba(0,212,255,.08); color: #cfe; }
.lobby-member .lm-btn.kick { border-color: rgba(255,107,107,.5); color: #ffb3b3; }
.lobby-member .lm-btn:hover { background: rgba(0,212,255,.2); }
/* roster send-minerals buttons (#1) */
.roster-row .rcry { font-size: 11px; color: #9be7ff; margin-left: auto; }
.roster-row .give { display: flex; align-items: center; gap: 4px; margin: 1px 0 2px 14px; pointer-events: auto; } /* #roster is pointer-events:none (clicks pass to the game) — re-enable it for the gift buttons */
.give-lbl { font-size: 10px; color: #ffd166; letter-spacing: .3px; }
.give-btn { cursor: pointer; border: 1px solid rgba(255,209,102,.5); background: rgba(255,209,102,.10); border-radius: 6px; font-size: 15px; line-height: 1; padding: 2px 6px; }
.give-btn:hover { background: rgba(255,209,102,.30); transform: scale(1.12); }
/* refinery output picker in the inspector (#6) */
.refine-inspect { margin-top: 6px; font-size: 11px; color: #9be7ff; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ri-btn { cursor: pointer; border: 1px solid var(--cyan-dim); background: rgba(0,212,255,.07); border-radius: 6px; font-size: 15px; padding: 2px 6px; }
.ri-btn:hover { background: rgba(0,212,255,.2); }
.ri-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); border-color: #fff; }
/* clearer gift affordance: a small label before the mineral buttons */
/* pause */
#pause-btn, #save-leave-btn { cursor: pointer; }
#pause-btn.on { background: #ffd166; color: #201400; border-color: #ffd166; }
#save-leave-btn { border: 1px solid rgba(0,212,255,.55); border-radius: 7px; background: rgba(0,212,255,.12); color: #cfffff; padding: 4px 9px; font-weight: 700; }
#save-leave-btn:hover { background: rgba(0,212,255,.25); }
#save-leave-btn:disabled { opacity: .75; cursor: wait; }
#pause-overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(4,8,16,.55); pointer-events: none; }
#pause-overlay .pause-box { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 46px; font-weight: 800; letter-spacing: 3px; color: #ffd166; text-shadow: 0 0 24px rgba(255,209,102,.6); animation: panicPulse 1.6s ease-in-out infinite; }
#pause-overlay .pause-box span { font-size: 16px; letter-spacing: 1px; color: #cfe; font-weight: 600; }
#pause-overlay .pause-box small { font-size: 12px; letter-spacing: .5px; color: #9be7ff; font-weight: 400; }

/* ---------- Inspector (hover/select a building or your probe) ---------- */
#inspector {
  position: absolute; right: 14px; bottom: 116px; width: 260px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 10px 12px; pointer-events: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); font-size: 13px;
}
#inspector .ins-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
#inspector .ins-head b { color: var(--cyan); font-size: 15px; }
.ins-lv { font-size: 11px; color: #ffd166; background: rgba(255,209,102,.12); padding: 1px 7px; border-radius: 9px; }
.ins-desc { color: #b9c6d6; font-size: 12px; line-height: 1.35; margin-bottom: 6px; }
.ins-stats { color: #cfe; font-size: 12px; margin-bottom: 8px; }
.ins-warn, .ins-stats .ins-warn { color: #ff6b6b; font-weight: 600; }
.ins-tally { display: inline-block; margin-top: 3px; color: #9fb6c8; font-size: 11px; }
.target-panel { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(122,219,255,.16); }
.target-kicker { display: block; margin-bottom: 6px; color: #8ebbd1; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.target-doctrines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.target-btn { min-width: 0; min-height: 43px; padding: 5px 6px; border: 1px solid rgba(93,182,220,.34); border-radius: 7px; background: linear-gradient(145deg, rgba(13,31,59,.94), rgba(7,22,43,.96)); color: #dff8ff; cursor: pointer; text-align: left; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 4px; align-items: center; }
.target-btn > span { grid-row: 1 / 3; color: #77e4ff; font-size: 16px; text-align: center; }
.target-btn b { overflow: hidden; font-size: 10px; line-height: 1.1; text-overflow: ellipsis; }
.target-btn small { overflow: hidden; color: #7897aa; font-size: 8px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.target-btn:hover { border-color: #67dfff; background: linear-gradient(145deg, rgba(17,55,91,.98), rgba(10,36,66,.98)); }
.target-btn.active { border-color: #ffd166; background: linear-gradient(145deg, rgba(72,55,16,.96), rgba(34,40,54,.98)); box-shadow: inset 0 0 0 1px rgba(255,209,102,.16), 0 0 12px rgba(255,209,102,.1); }
.target-btn.active > span, .target-btn.active b { color: #ffe49a; }
.ins-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ins-actions-col { flex-direction: column; align-items: stretch; }
.ins-actions-col .ins-btn { justify-content: space-between; }
.ins-sub { color: #9be7ff; opacity: .7; font-size: 11px; margin-left: 4px; }
.ins-btn {
  flex: 1; min-width: 96px; cursor: pointer; border-radius: 6px; padding: 7px 8px;
  background: linear-gradient(135deg, #112141, #0f3460); color: #fff;
  border: 1px solid var(--cyan); font-size: 12px; display: flex; justify-content: center; gap: 5px; align-items: center;
}
.ins-btn span { color: #9be7ff; }
.ins-btn:hover { background: linear-gradient(135deg, #0f3460, #1a4a8a); }
.ins-btn.sell { border-color: #ff6b6b; }
.ins-btn.sell span { color: #ffb3b3; }
.ins-btn.dis { cursor: not-allowed; } /* affordability is shown per-mineral (.cm.short) instead of dimming the whole button */
.ins-max { color: #ffd166; font-weight: 600; padding: 6px 0; }
.ins-hint { color: #6f8aa3; font-size: 11px; padding: 4px 0; }
/* probe-gated upgrade: the upgrade button itself, locked (amber, not-allowed, no hover lift) */
.ins-btn.ins-gate { cursor: not-allowed; border-color: rgba(255,209,102,.55); color: #ffd166; background: linear-gradient(135deg, rgba(30,24,6,.85), rgba(48,36,8,.85)); white-space: nowrap; }
.ins-btn.ins-gate:hover { background: linear-gradient(135deg, rgba(30,24,6,.85), rgba(48,36,8,.85)); }
.ins-upg { flex: 1; padding: 7px 8px; border-radius: 6px; background: rgba(0,212,255,.1); border: 1px dashed var(--cyan); color: #9be7ff; font-size: 12px; text-align: center; }
.ins-upg span { color: #fff; font-weight: 700; }
.ins-downed { flex: 1; padding: 7px 8px; border-radius: 6px; background: rgba(255,107,107,.12); border: 1px dashed rgba(255,107,107,.55); color: #ff9aa0; font-size: 12px; text-align: center; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 11px; line-height: 1.3; color: #b9c6d6; }
.help-grid b { color: var(--cyan); }

/* ---------- Lobby & game over ---------- */
#start-screen, #game-over-screen {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,18,40,.92), rgba(2,4,10,.97));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  pointer-events: auto; z-index: 100; text-align: center; padding: 20px;
}
#start-screen h1, #game-over-screen h1 {
  font-size: clamp(40px, 8vw, 76px); color: var(--cyan);
  text-shadow: 0 0 28px rgba(0,212,255,.55); margin-bottom: 14px; letter-spacing: 2px;
}
#game-over-screen h1 { color: #ff6b9d; text-shadow: 0 0 28px rgba(255,107,157,.55); }
#game-over-screen.victory { background: radial-gradient(ellipse at center, rgba(6,40,30,.92), rgba(2,10,8,.97)); overflow: hidden; }
/* ---------- Victory celebration ---------- */
#vfx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.over-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
#game-over-screen.victory h1 {
  font-size: clamp(52px, 11vw, 110px); letter-spacing: 4px;
  background: linear-gradient(90deg, #ffd166, #fff6d8, #06d6a0, #00d4ff, #ffd166); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 26px rgba(255,209,102,.5));
  animation: victoryPop .8s cubic-bezier(.2,1.6,.4,1) both, victoryShimmer 3s linear infinite;
}
@keyframes victoryPop { 0% { transform: scale(.2) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.15) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes victoryShimmer { to { background-position: 300% 0; } }
#victory-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 18px 0 6px; }
.vstat {
  min-width: 128px; padding: 14px 18px; border-radius: 14px;
  background: rgba(6,30,24,.65); border: 1px solid rgba(6,214,160,.4);
  box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 18px rgba(6,214,160,.15);
  display: flex; flex-direction: column; gap: 6px; opacity: 0;
  animation: vstatIn .6s cubic-bezier(.2,1.4,.4,1) forwards;
}
.vstat:nth-child(1) { animation-delay: .25s; } .vstat:nth-child(2) { animation-delay: .45s; }
.vstat:nth-child(3) { animation-delay: .65s; } .vstat:nth-child(4) { animation-delay: .85s; }
@keyframes vstatIn { from { opacity: 0; transform: translateY(26px) scale(.8); } to { opacity: 1; transform: none; } }
.vlabel { font-size: 13px; color: #9fe8d2; }
.vval { font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 0 14px rgba(6,214,160,.65); }
#game-over-screen.victory .respawn-note { color: #9fe8d2 !important; }
.chronicle-unlock {
  display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 11px; align-items: center;
  width: min(440px,86vw); box-sizing: border-box; margin: 13px auto 8px; padding: 11px 14px; text-align: left;
  color: #fff0c8; border: 1px solid rgba(255,209,102,.7); border-radius: 13px;
  background: linear-gradient(135deg,rgba(86,58,16,.92),rgba(10,35,43,.94)); box-shadow: 0 10px 32px rgba(0,0,0,.42),0 0 22px rgba(255,209,102,.16);
}
.chronicle-unlock > span:first-child { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffd166; border-radius: 50%; font-size: 25px; background: rgba(255,209,102,.12); }
.chronicle-unlock b,.chronicle-unlock small { display: block; }
.chronicle-unlock b { font: 700 15px Georgia,serif; }
.chronicle-unlock small { margin-top: 3px; color: #b7cad0; font-size: 10px; line-height: 1.35; }
.companion-run {
  display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 11px; align-items: center;
  width: min(520px,88vw); box-sizing: border-box; margin: 10px auto 5px; padding: 12px 15px; text-align: left;
  color: #eafaff; border: 1px solid rgba(127,212,255,.58); border-radius: 14px;
  background: radial-gradient(circle at 0 50%,rgba(226,178,59,.18),transparent 38%),linear-gradient(135deg,rgba(6,42,53,.95),rgba(9,16,30,.96));
  box-shadow: 0 12px 34px rgba(0,0,0,.44),0 0 24px rgba(127,212,255,.12);
}
.companion-run > span:first-child { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,209,102,.72); border-radius: 50%; background: rgba(255,209,102,.1); font-size: 27px; }
.companion-run b,.companion-run small { display: block; }
.companion-run b { color: #fff0c8; font: 700 16px Georgia,serif; }
.companion-run small { margin-top: 4px; color: #a9cbd1; font-size: 10px; line-height: 1.4; }
.tagline { font-size: clamp(15px, 2.4vw, 21px); color: #cfe; margin-bottom: 18px; max-width: 640px; }
/* The lobby card can outgrow a short window. inset:0 + justify-content:center
   clips BOTH ends with no scrollbar (owner report), so the start screen
   scrolls, and auto margins center it only when there is room: a flex
   "safe center" whose top is always reachable. */
#start-screen { justify-content: flex-start; overflow-x: hidden; overflow-y: auto; }
#start-screen h1 { margin-top: auto; font-size: clamp(34px, 6vw, 56px); margin-bottom: 8px; }
#conn-status { margin-bottom: auto; }
:root[data-skin="cave"] #game-over-screen {
  overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at center,rgba(34,9,7,.5),rgba(6,3,2,.94) 72%),linear-gradient(rgba(36,5,4,.36),rgba(8,3,2,.82)),url('assets/cave-lobby.webp') center/cover no-repeat;
}
:root[data-skin="cave"] #game-over-screen::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(255,65,36,.08) 49%,transparent 70%),repeating-linear-gradient(105deg,transparent 0 96px,rgba(255,86,45,.025) 98px 100px); }
:root[data-skin="cave"] #game-over-screen .over-content { padding:34px 42px; border:1px solid rgba(184,75,45,.48); border-radius:10px; background:linear-gradient(155deg,rgba(32,14,10,.9),rgba(10,6,4,.94)); box-shadow:0 22px 70px #000,inset 0 1px rgba(255,181,125,.12); }
:root[data-skin="cave"] #game-over-screen h1 { max-width:900px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(44px,8vw,92px); line-height:.95; letter-spacing:5px; color:transparent; background:linear-gradient(180deg,#ffd4b4,#d45a3d 48%,#671d18); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 2px #120503) drop-shadow(0 0 22px rgba(255,61,35,.38)); text-shadow:none; }
:root[data-skin="cave"] #game-over-screen #final-wave, :root[data-skin="cave"] #game-over-screen #final-score { color:#e4c4aa; text-shadow:0 2px 4px #000; }
:root[data-skin="cave"] #game-over-screen .respawn-note { color:#b88e75 !important; }
:root[data-skin="cave"] #game-over-screen.victory {
  background:radial-gradient(ellipse at center,rgba(8,58,48,.38),rgba(3,8,6,.92) 75%),linear-gradient(rgba(5,35,30,.26),rgba(6,5,2,.72)),url('assets/cave-lobby.webp') center/cover no-repeat;
}
:root[data-skin="cave"] #game-over-screen.victory::before { background:radial-gradient(circle at 20% 75%,rgba(44,255,215,.12),transparent 26%),radial-gradient(circle at 82% 22%,rgba(255,190,75,.13),transparent 28%); }
:root[data-skin="cave"] #game-over-screen.victory .over-content { border-color:rgba(231,181,83,.58); background:linear-gradient(155deg,rgba(35,28,15,.85),rgba(5,22,19,.92)); box-shadow:0 22px 70px #000,inset 0 1px rgba(255,234,169,.2),0 0 38px rgba(57,224,190,.12); }
:root[data-skin="cave"] #game-over-screen.victory h1 { background:linear-gradient(90deg,#e7b851,#fff1bc,#54ebce,#9af7e4,#e7b851); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 2px #06110d) drop-shadow(0 0 25px rgba(64,237,201,.36)); }
:root[data-skin="cave"] #game-over-screen.victory .vstat { border-radius:8px; background:linear-gradient(155deg,rgba(52,43,22,.82),rgba(7,34,29,.86)); border-color:rgba(84,235,206,.42); box-shadow:0 8px 26px rgba(0,0,0,.5),inset 0 1px rgba(255,237,182,.12); }
:root[data-skin="cave"] #game-over-screen.victory .vlabel { color:#bfe9d9; text-transform:uppercase; font-size:11px; letter-spacing:1.3px; }
:root[data-skin="cave"] #game-over-screen.victory .vval { color:#fff0bd; text-shadow:0 0 13px rgba(84,235,206,.46); }

:root[data-skin="classic"] #game-over-screen {
  overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at center,rgba(10,20,53,.46),rgba(1,5,17,.94) 74%),linear-gradient(rgba(20,5,35,.34),rgba(1,7,22,.84)),url('assets/orbital-lobby-v1.webp') center/cover no-repeat;
}
:root[data-skin="classic"] #game-over-screen::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 18% 70%,rgba(95,227,255,.11),transparent 27%),radial-gradient(circle at 82% 18%,rgba(220,180,73,.1),transparent 25%),repeating-linear-gradient(112deg,transparent 0 110px,rgba(100,204,255,.025) 112px 114px); }
:root[data-skin="classic"] #game-over-screen .over-content { padding:34px 42px; border:1px solid rgba(216,184,93,.52); border-radius:3px 15px 3px 15px; background:linear-gradient(155deg,rgba(10,26,58,.92),rgba(2,8,23,.95)); box-shadow:0 24px 72px #000,inset 0 1px rgba(227,245,255,.16),0 0 38px rgba(86,221,255,.08); }
:root[data-skin="classic"] #game-over-screen h1 { max-width:900px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(44px,8vw,92px); line-height:.95; letter-spacing:5px; color:transparent; background:linear-gradient(180deg,#f7d8eb,#d26eaa 48%,#532359); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 2px #090318) drop-shadow(0 0 23px rgba(225,94,192,.34)); text-shadow:none; }
:root[data-skin="classic"] #game-over-screen #final-wave, :root[data-skin="classic"] #game-over-screen #final-score { color:#d9eafb; text-shadow:0 2px 4px #000; }
:root[data-skin="classic"] #game-over-screen .respawn-note { color:#91aeca !important; }
:root[data-skin="classic"] #game-over-screen.victory { background:radial-gradient(ellipse at center,rgba(12,57,86,.4),rgba(1,7,22,.92) 76%),linear-gradient(rgba(4,31,49,.24),rgba(3,5,18,.7)),url('assets/orbital-lobby-v1.webp') center/cover no-repeat; }
:root[data-skin="classic"] #game-over-screen.victory::before { background:radial-gradient(circle at 18% 74%,rgba(82,241,255,.15),transparent 28%),radial-gradient(circle at 84% 20%,rgba(255,215,99,.16),transparent 29%); }
:root[data-skin="classic"] #game-over-screen.victory .over-content { border-color:rgba(239,210,116,.65); background:linear-gradient(155deg,rgba(16,39,73,.88),rgba(2,18,39,.94)); box-shadow:0 24px 72px #000,inset 0 1px rgba(238,248,255,.22),0 0 42px rgba(75,231,255,.15); }
:root[data-skin="classic"] #game-over-screen.victory h1 { background:linear-gradient(90deg,#e3bd55,#fff4c8,#76f2ff,#dffcff,#e3bd55); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 2px #03101c) drop-shadow(0 0 27px rgba(79,232,255,.4)); }
:root[data-skin="classic"] #game-over-screen.victory .vstat { border-radius:2px 10px 2px 10px; background:linear-gradient(155deg,rgba(22,51,88,.84),rgba(3,25,46,.9)); border-color:rgba(230,200,106,.48); box-shadow:0 8px 27px rgba(0,0,0,.52),inset 0 1px rgba(138,239,255,.15); }
:root[data-skin="classic"] #game-over-screen.victory .vlabel { color:#bdebf1; text-transform:uppercase; font-size:11px; letter-spacing:1.3px; }
:root[data-skin="classic"] #game-over-screen.victory .vval { color:#fff0b8; text-shadow:0 0 14px rgba(91,236,255,.48); }

/* Compact layouts preserve the battlefield before sacrificing ornament. */
@media (max-width:900px) {
  :root[data-skin="cave"] #help, :root[data-skin="classic"] #help { display:none; }
  :root[data-skin="cave"] .build-btn, :root[data-skin="classic"] .build-btn { width:64px; min-height:84px; }
  :root[data-skin="cave"] .build-btn .icon, :root[data-skin="classic"] .build-btn .icon { width:52px; height:47px; flex-basis:47px; }
  :root[data-skin="cave"] #resources, :root[data-skin="cave"] #wave-info, :root[data-skin="classic"] #resources, :root[data-skin="classic"] #wave-info { gap:4px; }
  :root[data-skin="cave"] #resources span, :root[data-skin="cave"] #wave-info span, :root[data-skin="classic"] #resources span, :root[data-skin="classic"] #wave-info span { padding:4px 7px; font-size:13px; }
  :root[data-skin="cave"] #resources span, :root[data-skin="classic"] #resources span { padding-left:28px; }
  :root[data-skin="cave"] #core-status, :root[data-skin="classic"] #core-status { padding:4px 6px; }
  :root[data-skin="cave"] .core-bar, :root[data-skin="classic"] .core-bar { width:105px; }
}
@media (max-height:650px) {
  :root[data-skin="cave"] #start-screen h1, :root[data-skin="classic"] #start-screen h1 { font-size:44px; }
  :root[data-skin="cave"] .tagline, :root[data-skin="classic"] .tagline { margin:5px 0 7px; font-size:13px; }
  :root[data-skin="cave"] .skin-picker, :root[data-skin="classic"] .skin-picker { margin:4px 0 7px; padding:6px 9px; }
  :root[data-skin="cave"] #lobby-settings, :root[data-skin="classic"] #lobby-settings { max-height:62vh; }
  :root[data-skin="cave"] #bottom-bar, :root[data-skin="classic"] #bottom-bar { max-height:110px; padding-top:4px; padding-bottom:5px; }
  :root[data-skin="cave"] #build-menu h3, :root[data-skin="classic"] #build-menu h3 { margin-bottom:3px; }
  :root[data-skin="cave"] .build-row, :root[data-skin="classic"] .build-row { padding-bottom:0; }
  :root[data-skin="cave"] .build-btn, :root[data-skin="classic"] .build-btn { min-height:75px; padding-bottom:3px; }
  :root[data-skin="cave"] .build-btn .icon, :root[data-skin="classic"] .build-btn .icon { height:39px; flex-basis:39px; }
  :root[data-skin="cave"] #game-over-screen .over-content, :root[data-skin="classic"] #game-over-screen .over-content { padding:24px 32px; }
}
.join-box { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#name-input {
  padding: 14px 18px; font-size: 18px; border-radius: 10px;
  border: 1px solid var(--cyan); background: rgba(0,0,0,.5); color: #fff; outline: none; min-width: 220px;
}
#name-input:focus, #code-input:focus { box-shadow: 0 0 14px rgba(0,212,255,.5); }
#code-input {
  padding: 14px 18px; font-size: 18px; border-radius: 10px;
  border: 1px solid var(--cyan); background: rgba(0,0,0,.5); color: #fff; outline: none; min-width: 200px;
}
#join-msg { margin-top: 14px; font-size: 14px; color: #ff9db0; }
.account-line { font-size: 13px; color: #9be7ff; background: rgba(0,212,255,.07); border: 1px solid var(--cyan-dim); border-radius: 8px; padding: 7px 11px; }
.account-line.guest { color: #9bb0c2; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.account-line b { color: #fff; }
.hero-choice {
  width: 100%; box-sizing: border-box; padding: 13px; border: 1px solid rgba(226,178,59,.42); border-radius: 14px;
  background: linear-gradient(145deg, rgba(48,31,11,.92), rgba(8,23,31,.9));
  box-shadow: inset 0 1px rgba(255,235,183,.08), 0 12px 26px rgba(0,0,0,.24); text-align: left;
}
.hero-choice.hidden { display: none; }
.identity-kicker { color: #e2b23b; font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }
.hero-choice h3 { margin: 4px 0 9px; color: #f6e4bd; font: 700 19px Georgia, serif; }
.hero-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.hero-card {
  display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 8px; align-items: center; min-height: 62px;
  padding: 8px; border: 1px solid rgba(155,231,255,.26); border-radius: 11px; background: rgba(3,11,18,.68);
  color: #dce9e5; text-align: left; cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s;
}
.hero-card:hover, .hero-card:focus-visible { border-color: #9be7ff; outline: none; background: rgba(12,37,48,.86); }
.hero-card.on { border-color: #e2b23b; box-shadow: 0 0 0 2px rgba(226,178,59,.13), 0 8px 20px rgba(0,0,0,.24); }
.hero-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle,rgba(226,178,59,.24),rgba(4,19,26,.8)); font-size: 28px; }
.hero-card b, .hero-card small { display: block; min-width: 0; }
.hero-card b { color: #fff0c8; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-card small { margin-top: 3px; color: #8fb6ba; font-size: 9px; line-height: 1.3; }
.companion-career {
  display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 8px; padding: 8px 10px;
  border: 1px solid rgba(127,212,255,.2); border-radius: 10px; background: rgba(2,12,20,.54); color: #dcecf0;
}
.companion-career-crest { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(226,178,59,.48); border-radius: 50%; background: radial-gradient(circle,rgba(226,178,59,.18),rgba(4,19,26,.8)); font-size: 23px; }
.companion-career b,.companion-career small,.companion-career-records { display: block; }
.companion-career b { color: #fff0c8; font: 700 13px Georgia,serif; }
.companion-career small { margin-top: 2px; color: #8fb6ba; font-size: 8px; }
.companion-career-records { margin-top: 4px; color: #71b9ca; font-size: 8px; line-height: 1.35; }
#hero-note { margin: 8px 1px 0; color: #8ca4a7; font-size: 9px; line-height: 1.4; }
.plaza-legacy {
  width: 100%; box-sizing: border-box; padding: 13px; border: 1px solid rgba(127,212,255,.3); border-radius: 14px;
  background: radial-gradient(circle at 90% 0, rgba(75,125,154,.16), transparent 42%), linear-gradient(145deg, rgba(6,24,33,.96), rgba(8,14,24,.94));
  box-shadow: inset 0 1px rgba(214,244,255,.07), 0 12px 28px rgba(0,0,0,.24); text-align: left;
}
.plaza-legacy.hidden { display: none; }
.legacy-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plaza-legacy > summary { cursor: pointer; list-style: none; }
.plaza-legacy > summary::-webkit-details-marker { display: none; }
.plaza-legacy > summary::after { content: '▸'; margin-left: auto; color: #9be7ff; font-size: 14px; }
.plaza-legacy[open] > summary::after { content: '▾'; }
.legacy-heading strong { display: block; margin-top: 4px; color: #dcecf0; font: 700 16px Georgia,serif; }
.legacy-body { padding-top: 10px; }
.plaza-legacy h3 { margin: 4px 0 10px; color: #dcecf0; font: 700 19px Georgia, serif; }
.legacy-verified { flex: 0 0 auto; color: #78dcb6; border: 1px solid rgba(120,220,182,.28); background: rgba(20,83,67,.2); border-radius: 999px; padding: 4px 7px; font-size: 8px; letter-spacing: .6px; text-transform: uppercase; }
.expedition-standing { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid rgba(226,178,59,.28); border-radius: 11px; background: rgba(43,29,11,.32); }
.standing-crest { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,209,102,.58); border-radius: 50%; color: #ffd166; background: radial-gradient(circle,rgba(255,209,102,.18),rgba(3,13,20,.72)); font: 25px Georgia,serif; box-shadow: 0 0 18px rgba(255,209,102,.12); }
.expedition-standing b,.expedition-standing small,.expedition-standing i { display: block; }
.expedition-standing b { color: #fff0c8; font: 700 15px Georgia,serif; }
.expedition-standing small { margin-top: 2px; color: #91aeb4; font-size: 9px; line-height: 1.35; }
.expedition-standing i { height: 3px; margin-top: 7px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.expedition-standing i i { height: 100%; margin: 0; background: linear-gradient(90deg,#8b6ee8,#ffd166); }
.chronicle-records { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.chronicle-records > div { min-width: 0; padding: 6px 4px; text-align: center; border: 1px solid rgba(127,212,255,.13); border-radius: 7px; background: rgba(1,10,16,.5); }
.chronicle-records b,.chronicle-records span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chronicle-records b { color: #dff8ff; font-size: 13px; }
.chronicle-records span { margin-top: 2px; color: #678b94; font-size: 6.5px; font-weight: 800; letter-spacing: .1em; }
.chronicle-medals { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.chronicle-medal { min-width: 0; padding: 6px 3px; text-align: center; opacity: .52; border: 1px solid rgba(124,148,157,.2); border-radius: 8px; background: rgba(2,9,14,.5); }
.chronicle-medal.earned { opacity: 1; border-color: rgba(255,209,102,.46); background: linear-gradient(160deg,rgba(89,58,15,.42),rgba(8,28,36,.65)); box-shadow: inset 0 1px rgba(255,235,183,.08); }
.chronicle-medal span,.chronicle-medal b,.chronicle-medal small { display: block; overflow: hidden; text-overflow: ellipsis; }
.chronicle-medal span { color: #869ca3; font: 19px Georgia,serif; }
.chronicle-medal.earned span { color: #ffd166; text-shadow: 0 0 12px rgba(255,209,102,.32); }
.chronicle-medal b { min-height: 18px; margin-top: 2px; color: #b7c5c8; font-size: 7px; line-height: 1.2; }
.chronicle-medal.earned b { color: #fff0c8; }
.chronicle-medal small { margin-top: 2px; color: #647980; font-size: 6.5px; }
.chronicle-medal.earned small { color: #77c8ac; }
.legacy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.legacy-card { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; padding: 8px; border: 1px solid rgba(127,212,255,.16); border-radius: 9px; background: rgba(1,10,16,.55); }
.legacy-card > span { grid-row: 1/3; font-size: 16px; }
.legacy-card b { color: #9be7ff; font-size: 14px; }
.legacy-card strong,.legacy-card small { grid-column: 2; display: block; }
.legacy-card strong { color: #d9e8e8; font-size: 9px; }
.legacy-card small { margin-top: 3px; color: #66898f; font-size: 7.5px; }
#legacy-note { margin: 8px 1px 0; color: #78979c; font-size: 8.5px; line-height: 1.4; }
#start-btn {
  padding: 14px 44px; font-size: 20px; font-weight: 700;
  background: linear-gradient(135deg, #00d4ff, #0099cc); color: #021;
  border: none; border-radius: 10px; cursor: pointer; transition: transform .2s, box-shadow .2s;
}
#start-btn:hover { transform: scale(1.06); box-shadow: 0 0 26px rgba(0,212,255,.55); }
#start-btn:disabled { opacity: .5; cursor: progress; transform: none; }
.conn { margin-top: 18px; font-size: 14px; color: #8aa; }
.conn.ok { color: #06d6a0; }
.conn.err { color: #ff6b9d; }
.credits { margin-top: 28px; font-size: 12px; color: #56708a; }
#build-tag { opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
#game-over-screen p { font-size: 22px; margin: 6px 0; color: #cdd; }
.respawn-note { font-size: 15px !important; color: #8aa !important; margin-top: 18px !important; }

/* ---------- Lobby: host-configured game setup ---------- */
#lobby-settings {
  width: min(560px, 92vw); margin-top: 8px;
  box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 12px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55); text-align: left;
}
.lobby-head { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); }
.lobby-head span { color: #8aa; text-transform: none; letter-spacing: 0; font-size: 12px; }
#lobby-members { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.lobby-member { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #eaf6ff;
  background: rgba(0,212,255,.08); border: 1px solid var(--cyan-dim); border-radius: 14px; padding: 3px 10px; }
.lobby-member i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lobby-empty { color: #6f8aa3; font-size: 13px; }

/* character picker (per-player, emoji creatures) */
.char-pick { display: flex; flex-direction: column; gap: 5px; }
.char-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7fb3d5; }
.char-sub { text-transform: none; letter-spacing: 0; color: #6f8aa3; font-size: 11px; }
#char-row { display: flex; flex-wrap: wrap; gap: 6px; }
.char-btn {
  width: 46px; min-height: 46px; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(0,212,255,.06); border: 1px solid var(--cyan-dim); border-radius: 9px;
  transition: transform .1s, box-shadow .1s, background .1s; padding: 2px;
}
.char-btn .char-cost { font-size: 9px; color: #ffd166; line-height: 1; }
.char-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,212,255,.3); }
.char-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); border-color: #fff; box-shadow: 0 0 14px rgba(0,212,255,.6); }
.char-btn.locked { border-style: dashed; border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.05); }
.char-btn.unaffordable { opacity: .5; }
.char-btn.armed { border-color: #ffd166; border-style: solid; box-shadow: 0 0 14px rgba(255,209,102,.6); transform: translateY(-2px); }
.char-hint { font-size: 12px; color: #ffd166; min-height: 14px; }
/* outfit picker: a compact ROW beside the preview (each .char-btn is
   display:flex = block-level, so without this they stack tall and the
   whole setup card overflows the viewport) */
#plaza-skin-row { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.plaza-skin-btn { width: auto; min-width: 78px; max-width: 116px; min-height: 42px; font-size: 15px; padding: 4px 8px; }
.plaza-skin-btn .char-cost { font-size: 9.5px; line-height: 1.25; text-align: center; }
#upg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.upg-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 11px;
  background: rgba(0,212,255,.06); border: 1px solid var(--cyan-dim); border-radius: 9px; color: #eaf6ff; font-size: 13px;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.upg-btn .upg-ic { font-size: 18px; }
.upg-btn .upg-cost { color: #ffd166; font-size: 12px; }
.upg-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,212,255,.3); }
.upg-btn.locked { border-style: dashed; border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.05); }
.upg-btn.unaffordable { opacity: .5; }
.upg-btn.owned { border-color: #06d6a0; background: rgba(6,214,160,.1); }
.upg-btn.owned .upg-cost { color: #06d6a0; }
.upg-btn.owned { cursor: default; }
.upg-btn.owned:hover { transform: none; box-shadow: none; }
.upg-btn.armed { border-color: #ffd166; border-style: solid; box-shadow: 0 0 14px rgba(255,209,102,.6); transform: translateY(-2px); }
/* siphon mineral picker (lobby) */
#siphon-row { display: flex; flex-wrap: wrap; gap: 6px; }
.siphon-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 11px;
  background: rgba(0,212,255,.06); border: 1px solid var(--cyan-dim); border-radius: 9px; color: #eaf6ff; font-size: 13px;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.siphon-btn .siphon-em { font-size: 16px; }
.siphon-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,212,255,.3); }
.siphon-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); border-color: #fff; box-shadow: 0 0 14px rgba(0,212,255,.6); }
/* siphon build card on its deploy cooldown */
.build-btn.cooldown { opacity: .6; cursor: not-allowed; border-color: rgba(120,180,255,.55); }
.build-btn.cooldown:hover { transform: none; box-shadow: none; }
.build-btn.cooldown .cost { color: #7fd0ff; }
/* Panic Button HUD badge */
#panic-badge { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 5px 13px; border-radius: 999px; background: rgba(24,8,10,.85); border: 1px solid rgba(255,93,109,.75); color: #ffd0d5; font-size: 13px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; animation: panicPulse 1.4s ease-in-out infinite; }
#panic-badge .pb-key { font-weight: 500; opacity: .8; font-size: 11px; margin-left: 5px; }
#panic-badge.used { border-color: rgba(120,130,150,.5); color: #8b93a3; background: rgba(12,16,22,.8); animation: none; }
/* [Q] active-ability badge (sits beside the panic badge) */
#ability-badge { position: fixed; top: 58px; left: 50%; transform: translateX(-50%) translateY(34px); z-index: 20; padding: 5px 13px; border-radius: 999px; background: rgba(8,18,24,.85); border: 1px solid rgba(127,245,255,.7); color: #c8f4ff; font-size: 13px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
#ability-badge .pb-key { font-weight: 600; opacity: .85; font-size: 11px; margin-left: 5px; border: 1px solid rgba(127,245,255,.5); border-radius: 4px; padding: 0 5px; }
#ability-badge.used { border-color: rgba(120,130,150,.5); color: #8b93a3; background: rgba(12,16,22,.8); }
/* loadout pickers (lobby): specialty / passive / [Q] active */
.lo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 3px 0; }
.lo-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7fb3d5; min-width: 84px; }
.lo-btn { cursor: pointer; padding: 5px 9px; border-radius: 8px; background: rgba(0,212,255,.06); border: 1px solid var(--cyan-dim); color: #eaf6ff; font-size: 12px; transition: transform .1s, background .1s; }
.lo-btn:hover { background: rgba(0,212,255,.16); transform: translateY(-1px); }
.lo-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); border-color: #fff; color: #04222e; font-weight: 700; }
.lo-btn.locked { border-style: dashed; opacity: .55; cursor: not-allowed; }
.xp-mini { font-size: 11px; color: #9fd8a8; opacity: .9; }
@keyframes panicPulse { 0%, 100% { box-shadow: 0 0 8px rgba(255,93,109,.4); } 50% { box-shadow: 0 0 18px rgba(255,93,109,.85); } }

/* Post-run offer: the dial's own read on how the last game went. */
.run-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-radius: 9px;
  background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.28); font-size: 12.5px; line-height: 1.35; }
.run-offer .ro-result { font-weight: 700; color: #eaf6ff; }
.run-offer .ro-why { color: #9be7ff; }
.run-offer .ro-btn { margin-left: auto; padding: 6px 11px; font-size: 12.5px; font-weight: 700; border-radius: 7px; cursor: pointer;
  color: #022; background: linear-gradient(135deg,#00d4ff,#0099cc); border: none; }
.run-offer .ro-btn:hover { filter: brightness(1.1); }

/* The difficulty dial: one axis, with the named difficulties marked on it. */
.dial-box { display: flex; flex-direction: column; gap: 7px; }
.dial-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dial-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9be7ff; }
.dial-now { font-size: 15px; font-weight: 700; color: #eaf6ff; text-align: right; }
.dial-range { width: 100%; margin: 0; accent-color: #00d4ff; cursor: pointer; }
.dial-range:disabled { cursor: not-allowed; opacity: .55; }
.dial-ticks { position: relative; height: 9px; margin: -4px 0 1px; }
.dial-ticks i { position: absolute; top: 0; width: 2px; height: 7px; margin-left: -1px; background: rgba(155,231,255,.45); border-radius: 1px; }
.dial-hint { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; color: #8fb4c6; }
.preset-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; }
.preset-row .preset-btn { padding: 7px 4px; }
.preset-row .preset-btn .pname { font-size: 13.5px; line-height: 1.15; }
.preset-row .preset-btn .pdesc { font-size: 10px; line-height: 1.2; }
.preset-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; cursor: pointer; border-radius: 10px;
  background: linear-gradient(135deg, #112141, #0f3460); color: #fff;
  border: 1px solid var(--cyan); transition: transform .12s, box-shadow .12s, background .12s;
}
.preset-btn .pname { font-size: 15px; font-weight: 600; }
.preset-btn .pdesc { font-size: 11px; color: #9be7ff; }
.preset-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,212,255,.35); }
.preset-btn.selected { background: linear-gradient(135deg, #00d4ff, #0099cc); color: #022; box-shadow: 0 0 16px rgba(0,212,255,.55); }
.preset-btn.selected .pdesc { color: #023; }
.preset-btn.locked { cursor: not-allowed; }
.preset-btn.locked:hover { transform: none; box-shadow: none; }

#advanced-panel { border: 1px solid var(--panel-edge); border-radius: 8px; background: rgba(0,0,0,.25); }
#advanced-panel > summary { cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--cyan); user-select: none; }
#advanced-groups { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 12px; max-height: 40vh; overflow-y: auto; }
.settings-group h4 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7fb3d5; margin: 6px 0 4px; }
.set-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 10px; margin: 5px 0; font-size: 13px; color: #cfe; }
.set-row .set-name { color: #b9c6d6; }
.set-row .set-val { text-align: right; color: #9be7ff; font-variant-numeric: tabular-nums; }
.set-input { width: 100%; accent-color: var(--cyan); cursor: pointer; }
.set-input:disabled { cursor: not-allowed; opacity: .8; }

#start-game-btn {
  padding: 13px; font-size: 18px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #06d6a0, #00a37a); color: #012; transition: transform .15s, box-shadow .15s;
}
#start-game-btn:hover { transform: scale(1.02); box-shadow: 0 0 22px rgba(6,214,160,.5); }
#save-preset-btn {
  padding: 9px; font-size: 13px; font-weight: 600; border: 1px solid var(--cyan-dim); border-radius: 8px; cursor: pointer;
  background: rgba(0,212,255,.10); color: #cfe; transition: background .15s, box-shadow .15s;
}
#save-preset-btn:hover { background: rgba(0,212,255,.22); box-shadow: 0 0 14px rgba(0,212,255,.3); }
#save-preset-btn.saved { background: linear-gradient(135deg,#06d6a0,#00a37a); color: #012; border-color: #06d6a0; font-weight: 700; }
#lobby-wait { text-align: center; color: #ffd166; font-size: 14px; padding: 8px; }

.lobby-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.lobby-column { display: flex; min-width: 0; flex-direction: column; gap: 10px; }

/* Once identity is loaded, setup becomes a compact two-column command board.
   The full desktop lobby fits in the viewport; profile history and advanced
   tuning remain available as local disclosure panels without stealing space
   from the controls required to launch. Shorter laptop windows can't always
   fit the whole board, so the screen scrolls vertically when it overflows —
   otherwise the START GAME button is clipped and unreachable. */
@media (min-width: 981px) {
  #start-screen.lobby-active { justify-content: flex-start; overflow: hidden auto; padding: 8px 18px 18px; }
  #start-screen.lobby-active h1 { margin: 0; font-size: clamp(30px,4.4vh,42px); line-height: .9; }
  #start-screen.lobby-active .tagline { display: none; }
  #start-screen.lobby-active .skin-picker { flex-direction: row; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 5px 8px; }
  #start-screen.lobby-active .skin-options { gap: 6px; }
  #start-screen.lobby-active .skin-btn { width: 170px; padding: 5px 8px; }
  #start-screen.lobby-active .skin-btn > span { font-size: 21px; }
  #start-screen.lobby-active #lobby-settings { width: min(1120px,96vw); max-height: none; margin: 0; padding: 9px 12px; gap: 6px; overflow: visible; }
  #start-screen.lobby-active .lobby-columns { grid-template-columns: minmax(0,.95fr) minmax(0,1.2fr); gap: 12px; }
  #start-screen.lobby-active .lobby-column { gap: 7px; }
  #start-screen.lobby-active .hero-choice { padding: 9px; }
  #start-screen.lobby-active .hero-choice h3 { margin: 2px 0 5px; font-size: 16px; }
  #start-screen.lobby-active .hero-card { min-height: 50px; padding: 5px 7px; }
  #start-screen.lobby-active #hero-note { margin-top: 4px; }
  #start-screen.lobby-active .plaza-legacy { padding: 8px 10px; }
  #start-screen.lobby-active .plaza-skin-pick canvas { width: 68px; height: 68px; }
  #start-screen.lobby-active .char-sub { font-size: 9.5px; }
  #start-screen.lobby-active .char-hint { min-height: 0; font-size: 10px; }
  #start-screen.lobby-active .upg-btn { padding: 5px 8px; }
  #start-screen.lobby-active .lo-row { margin: 1px 0; }
  #start-screen.lobby-active .preset-btn { padding: 7px 5px; }
  #start-screen.lobby-active #advanced-panel > summary { padding: 6px 10px; }
  #start-screen.lobby-active #start-game-btn { padding: 10px; font-size: 16px; }
  #start-screen.lobby-active #lobby-wait { padding: 2px 6px; font-size: 11px; }
  #start-screen.lobby-active #conn-status,
  #start-screen.lobby-active .credits { display: none; }
  :root[data-skin="cave"] #start-screen.lobby-active { overflow: hidden auto; }
  :root[data-skin="classic"] #start-screen.lobby-active { overflow: hidden auto; }
  :root[data-skin="cave"] #start-screen.lobby-active h1, :root[data-skin="classic"] #start-screen.lobby-active h1 { font-size: clamp(31px,4.6vh,44px); }
  :root[data-skin="cave"] #start-screen.lobby-active h1::after, :root[data-skin="classic"] #start-screen.lobby-active h1::after { display: inline-block; margin: 0 0 0 14px; vertical-align: middle; }
  :root[data-skin="cave"] #start-screen.lobby-active #lobby-settings, :root[data-skin="classic"] #start-screen.lobby-active #lobby-settings { width: min(1180px,96vw); max-height: none; overflow: visible; padding: 9px 12px; gap: 6px; }
}

/* Phone-fit HUD (restored: the vtg merge 3a0c0d5 dropped this block) */
@media (max-width: 980px), (pointer: coarse) and (max-width: 1200px) {
  #top-bar { z-index:20; height: auto; flex-wrap: wrap; justify-content:center; padding: calc(3px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left)); gap: 5px; row-gap: 2px; }
  #back-plaza { min-height: 28px; padding: 3px 8px; font-size: 11px; }
  #start-screen > .plaza-return-screen,#game-over-screen > .plaza-return-screen { min-height: 30px; padding: 4px 9px; font-size: 11px; }
  #resources, #wave-info { gap: 3px; font-size: 11px; flex-wrap: wrap; justify-content:center; }
  #resources span, #wave-info span { padding: 2px 6px; }
  #save-leave-btn,#pause-btn,#skip-day { min-height:30px; padding:3px 7px; font-size:10.5px; }
  #core-status { gap: 5px; }
  .core-label { font-size: 10px; letter-spacing: 1px; }
  .core-bar { width: 84px; height: 11px; }
  #roster { top: 74px; left: 6px; gap: 3px; }
  .roster-row { min-width: 0; font-size: 10.5px; padding: 2px 6px; gap: 5px; }
  .roster-row .give { display:none; }
  .roster-row .hpbar { width: 30px; }
  #minimap { top: 74px; right: 6px; width: 117px; height: 88px; }
  #command-toggle { padding: 2px 6px; font-size: 10px; }
  #command-table { top: 168px; right: 6px; width: min(244px, calc(100vw - 12px)); padding: 9px; }
  .command-head strong { font-size: 14px; line-height: 1.1; white-space: normal; }
  .command-metrics { gap: 4px; margin-top: 7px; }
  .command-metrics > div { padding: 5px 3px; }
  .command-metrics strong { font-size: 12px; }
  #command-counter { font-size: 10px; }
  #bottom-bar { z-index:18; flex-direction: column; gap: 0; min-height: 0; max-height:80px!important; padding: 5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  #build-menu h3, #help { display: none; }
  .build-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0; }
  .build-btn { width: 62px; flex: 0 0 auto; padding: 4px 2px; border-radius: 7px; }
  .build-btn .icon { font-size: 17px; }
  .build-btn .bname { font-size: 9.5px; white-space: nowrap; overflow: hidden; max-width: 58px; text-overflow: ellipsis; }
  .build-btn .cost { font-size: 10px; }
  #inspector { z-index:24; right: max(6px,env(safe-area-inset-right)); bottom: calc(82px + env(safe-area-inset-bottom)); width: min(272px,calc(100vw - 124px)); max-height:calc(100dvh - 174px); overflow:auto; padding: 8px 10px; font-size: 12px; }
  #ability-hud { left: 6px; bottom: 92px; padding: 9px 13px; }
  /* The sound button used to sit on top of the final tower cards and could
     disappear behind Safari's bottom toolbar with them. Keep it above the tray. */
  #sfx-toggle { bottom: calc(76px + env(safe-area-inset-bottom)) !important; right: 7px !important; }
  .touch-ui #sfx-toggle { bottom: calc(196px + env(safe-area-inset-bottom)) !important; }
  #start-screen { justify-content: flex-start; overflow-y: auto; padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); }
  #start-screen h1 { font-size: clamp(30px, 7vw, 44px); margin-bottom: 8px; }
  .tagline { margin-bottom: 16px; font-size: 14px; }
  #setup { gap: 14px; margin: 2px 0 16px; }
  .setup-cols { flex-direction: column; gap: 14px; align-items: center; }
  .hero-row { grid-template-columns: 1fr; }
  .companion-career { grid-template-columns: 36px minmax(0,1fr); }
  .companion-career-crest { width: 32px; height: 32px; font-size: 20px; }
  .companion-run { width: min(92vw,520px); padding: 10px 12px; }
  .legacy-heading { align-items: center; }
  .chronicle-records { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .chronicle-medals { display: flex; overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .chronicle-medal { flex: 0 0 65px; scroll-snap-align: start; }
  .legacy-grid { grid-template-columns: 1fr; }
  .legacy-card { grid-template-columns: 26px 72px 1fr; align-items: center; }
  .legacy-card > span { grid-row: auto; }
  .legacy-card strong,.legacy-card small { grid-column: 3; }
  .legacy-card small { margin-top: 0; }
  .arena-bonus-banner { top: 84px; max-width: 92vw; padding: 9px 14px; }
}

@media (max-height: 520px) and (max-width: 980px) {
  #command-table { top: 72px; max-height: calc(100vh - 166px); overflow-y: auto; }
  #touch-joystick { width:96px; height:96px; bottom:calc(72px + env(safe-area-inset-bottom)); }
  #touch-joystick .touch-stick { width:40px; height:40px; margin:-20px; }
  #touch-actions { bottom:calc(72px + env(safe-area-inset-bottom)); gap:5px; }
  #touch-actions button { min-width:72px; min-height:39px; padding:4px 7px; font-size:10.5px; }
  #touch-help { bottom:calc(172px + env(safe-area-inset-bottom)); }
  .touch-ui #sfx-toggle { bottom:calc(162px + env(safe-area-inset-bottom)) !important; }
  #inspector { bottom:calc(72px + env(safe-area-inset-bottom)); max-height:calc(100dvh - 146px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card { transition: none; }
  #game-over-screen.victory h1, .vstat { animation:none; opacity:1; }
  :root[data-skin="classic"] .build-btn .icon { transition:none; }
}

/* Live team tower tally in the build header — a cap you can see coming. */
.tower-tally { display: inline-block; margin: 0 8px 0 2px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #9be7ff; background: rgba(0,212,255,.10); border: 1px solid rgba(0,212,255,.30); vertical-align: 1px; }
.tower-tally.near { color: #ffd98a; background: rgba(255,190,60,.12); border-color: rgba(255,190,60,.45); }
.tower-tally.full { color: #ffc9c9; background: rgba(255,90,90,.15); border-color: rgba(255,90,90,.5); }