/* ════════════════════════════════════════════════════════════
COSMO ARENA HUD — standalone stylesheet, the ONLY place HUD
styling lives. Two independent layouts keyed on body.touch:
no responsive breakpoints, no legacy cascade.
════════════════════════════════════════════════════════════ */
:root {
--hud-line: rgba(56, 178, 230, .55);
--hud-line-hi: rgba(120, 214, 255, .8);
--hud-glow: rgba(56, 178, 230, .22);
--hud-glass-a: rgba(8, 16, 27, .93);
--hud-glass-b: rgba(3, 8, 15, .96);
--hud-gold: #eab543;
--hud-red: rgba(232, 92, 62, .6);
}
/* ─────────────────────────── shared primitives ─────────────────────────── */
.hudPlate {
border: 1px solid var(--hud-line);
border-top-color: var(--hud-line-hi);
border-radius: 8px;
background:
radial-gradient(130% 80% at 50% 0%, rgba(40, 90, 140, .18), transparent 55%),
linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 12px var(--hud-glow),
inset 0 1px 0 rgba(140, 210, 250, .18);
}
/* upgrade + refit + ability icons (inline SVG) */
.ico { display: inline-block; width: 18px; height: 18px; background-size: contain; background-position: center; background-repeat: no-repeat; }
/* Custom art dropped in icons/ — the image itself comes from an inline
background-image, this just gives it the same box and fit as a built-in. */
/* Custom art, letterboxed inside the normal glyph box. */
.icoCustom { background-size: contain; background-repeat: no-repeat; background-position: center; }
/* ...or bled edge to edge across the whole tile ("fill" mode). The art becomes
the tile's background and the level / cost / name labels ride on top of it,
so nothing the player needs to read gets covered. */
/* NO overflow:hidden here — the tooltips are positioned outside these tiles and
clipping the tile would clip them too. The art rounds its own corners
instead. */
.upgTile, .cmd { position: relative; }
/* !important because touch has an ID-selector rule further down
(#commandCard .cmd .aico { width: 15px }) that otherwise outranks three
classes and was shrinking every "fill" icon on mobile back down to glyph
size — the icon looked tiny with a big empty tile around it. */
.ico.icoCustom.icoFill {
position: absolute !important; inset: 0 !important;
width: auto !important; height: auto !important;
background-size: cover; background-position: center;
border-radius: inherit; z-index: 0; pointer-events: none;
}
/* keep the text legible over busy art */
.upgTile > b, .cmd > b, .cmd .cName, .cmd .cCost, .cmd .cLvl {
position: relative; z-index: 1;
}
.upgTile:has(.icoFill) > b, .cmd:has(.icoFill) > b,
.cmd:has(.icoFill) .cName, .cmd:has(.icoFill) .cCost, .cmd:has(.icoFill) .cLvl {
text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .8);
}
/* the tip must escape the tile even though the tile now clips its art */
.upgTile .tip, .cmd.ability .tip { z-index: 60; }
/* ---- Decorative tile frame -------------------------------------------------
A single image stretched over the whole tile, drawn ABOVE the icon art but
BELOW the labels. When a frame is in use the tile drops its own border and
background so the art isn't sitting inside two frames at once. */
.tileFrame {
position: absolute; inset: 0;
background-repeat: no-repeat; background-position: center;
background-size: 100% 100%;
pointer-events: none; z-index: 2;
}
.framed {
border-color: transparent !important;
background: none !important;
box-shadow: none !important;
}
/* labels ride above the frame */
.framed > b, .framed .cName, .framed .cCost, .framed .cLvl { z-index: 3; }
/* the icon art pulls in slightly so the frame's bevel doesn't cover it */
.framed .ico.icoCustom.icoFill { inset: 9% !important; border-radius: 2px; }
.ico-weapons{ background-image: url('data:image/svg+xml;utf8,'); }
.ico-missiles { background-image: url('data:image/svg+xml;utf8,'); }
.ico-hull { background-image: url('data:image/svg+xml;utf8,'); }
.ico-shields { background-image: url('data:image/svg+xml;utf8,'); }
.ico-range { background-image: url('data:image/svg+xml;utf8,'); }
.ico-engines { background-image: url('data:image/svg+xml;utf8,'); }
.ico-reactor { background-image: url('data:image/svg+xml;utf8,'); }
.aico { display: block; width: 28px; height: 28px; margin: 0 auto; background-size: contain; background-position: center; background-repeat: no-repeat; }
.aico-target { background-image: url('data:image/svg+xml;utf8,'); }
.aico-rockets { background-image: url('data:image/svg+xml;utf8,'); }
.aico-shield { background-image: url('data:image/svg+xml;utf8,'); }
.aico-boost { background-image: url('data:image/svg+xml;utf8,'); }
.aico-plus { background-image: url('data:image/svg+xml;utf8,'); }
/* ─────────────────────────── frame chrome ─────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: inherit; }
#hud > * { pointer-events: auto; }
#hud.hidden { display: none; }
/* top bar: minerals only, centred */
#topBar { position: absolute; top: 8px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.stationBar { display: none; }
#minerals {
pointer-events: auto;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi); border-radius: 8px;
background: linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 12px var(--hud-glow);
padding: 6px 22px;
font-size: 15px; font-weight: 800; letter-spacing: 1px;
color: #cfeaff; text-shadow: 0 0 10px rgba(80, 200, 255, .45);
}
/* corner buttons */
#hudToggle, #adminToggle, #fsToggle, #btnSelf, #btnCancel {
position: absolute;
min-width: 40px; min-height: 34px; padding: 6px 12px;
border: 1px solid var(--hud-line); border-radius: 8px;
background: linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
color: #cfe8fa; font-size: 13px; font-weight: 800; letter-spacing: 1.4px;
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 10px var(--hud-glow);
cursor: pointer;
}
#hudToggle { top: 8px; right: 8px; font-size: 16px; }
#adminToggle { top: 8px; right: 58px; }
#fsToggle { top: 8px; right: 108px; }
#btnSelf { top: 8px; left: 8px; }
#btnCancel { top: 8px; left: 110px; display: none; }
body.targeting #btnCancel { display: block; }
#mapToggle { display: none; }
#hudToggle:hover, #adminToggle:hover, #fsToggle:hover, #btnSelf:hover { border-color: var(--hud-line-hi); color: #fff; }
#touchBtns { position: static; }
/* messages */
#respawnMsg {
position: absolute; top: 38%; left: 0; right: 0; text-align: center;
font-size: 24px; letter-spacing: 4px; color: #ff8a7a;
text-shadow: 0 0 20px rgba(255, 80, 60, .5); pointer-events: none;
}
#respawnMsg .spectate { color: #9fd0ff; }
#targetHint {
position: absolute; top: 54px; left: 0; right: 0; text-align: center;
font-size: 12px; letter-spacing: 1.6px; color: #ffd27f; pointer-events: none;
text-shadow: 0 1px 3px #000;
}
#netBadge {
position: absolute; top: 8px; left: 50%; transform: translateX(-50%); margin-top: 40px;
font-size: 9px; letter-spacing: 1.4px; color: #7fb8dc; pointer-events: none;
}
.netDot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #35e07a; margin-right: 5px; }
#netPlayers { display: none; }
/* minimap — always visible, bottom-left */
#minimapPanel {
position: absolute; left: 8px; bottom: 8px; padding: 5px;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi); border-radius: 8px;
background: linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 12px var(--hud-glow);
}
#minimapPanel .panelLabel { display: none; }
#minimap { display: block; border-radius: 5px; background: #02050a; cursor: pointer; }
/* ─────────────────────────── SHIP CARD ───────────────────────────
StarCraft layout — NO bars:
┌──────────┬──────────────────────────────┐
│ portrait │ Battlecruiser │
│ │ Move Speed: 55 (Normal) │
│ 300/300 │ Kills: 12 (240◆) │
│ 1100/1100│ [▢][▢][▢][▢][▢][▢][▢] │
│ 200/200 │ ARMORED · CAPITAL │
└──────────┴──────────────────────────────┘ */
#infoPanel {
position: absolute; bottom: 8px; left: 226px; right: auto;
width: max-content; max-width: calc(100vw - 570px);
height: auto; box-sizing: border-box;
display: flex; align-items: center; gap: 28px;
padding: 16px 30px;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi); border-radius: 8px;
background:
radial-gradient(130% 80% at 50% 0%, rgba(40, 90, 140, .18), transparent 55%),
linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 12px var(--hud-glow),
inset 0 1px 0 rgba(140, 210, 250, .18);
}
body:not(.hasSelection) #infoPanel { display: none; }
/* ── left column: portrait, then the three vitals numbers ── */
#infoLeft {
display: flex; flex-direction: column; align-items: center; gap: 6px;
flex: 0 0 auto;
}
#portrait {
position: relative; width: 76px; height: 76px; flex: 0 0 auto;
border: 1px solid var(--hud-line); border-radius: 6px;
background: radial-gradient(circle at 50% 32%, rgba(28, 56, 88, .8), rgba(3, 7, 13, .97) 74%);
box-shadow: inset 0 0 18px rgba(0, 0, 0, .9);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#portrait.hostile { border-color: var(--hud-red); }
#portraitArt { width: 64px; height: 64px; background-size: contain; background-position: center; background-repeat: no-repeat; }
#portrait[data-tier]:not([data-tier=''])::after {
content: attr(data-tier);
position: absolute; top: 0; left: 0; width: 24px; height: 24px;
background: linear-gradient(160deg, var(--hud-gold), #9a6d1c);
clip-path: polygon(0 0, 100% 0, 0 100%);
color: #141005; font-size: 11px; font-weight: 800;
padding: 2px 0 0 4px; box-sizing: border-box;
}
#portraitVitals {
display: flex !important; flex-direction: column; align-items: center;
line-height: 1.45; font-weight: 800; letter-spacing: .3px;
}
#portraitVitals .vSh { font-size: 14px; color: #6fc9ff; }
#portraitVitals .vHp { font-size: 14px; color: #5df08e; }
#portraitVitals .vEn { font-size: 13px; color: #c9a0ff; }
/* bars are not part of the StarCraft card */
#unitBars { display: none !important; }
#unitSub { display: none; }
/* ── right column: name, stat lines, tiles, tags ── */
#infoMain {
display: flex; flex-direction: column; align-items: center; justify-content: center;
flex: 0 0 auto; min-width: 380px; gap: 6px;
}
#unitName {
font-size: 21px; font-weight: 800; letter-spacing: 1.4px; color: #57c9f7;
padding-top: 2px;
text-shadow: 0 0 14px rgba(70, 190, 250, .45), 0 1px 2px #000;
white-space: nowrap; text-align: center; margin: 0;
}
#unitName .tag, #unitName .youTag {
font-size: 7px; font-weight: 800; letter-spacing: 1.2px;
padding: 2px 7px; margin-left: 6px; border-radius: 9px; vertical-align: 3px;
}
#unitName .tag { border: 1px solid currentColor; }
#unitName .youTag { background: linear-gradient(90deg, #3ba7dc, #1e6a96); color: #eaf6ff; }
#unitStats { display: flex; flex-direction: column; align-items: center; width: 100%; }
#unitStats .scCard { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
#unitStats .scLine {
font-size: 13.5px; line-height: 1.45; letter-spacing: .2px; color: #cfe4f4; white-space: nowrap;
}
#unitStats .scLine b { color: #fff; font-weight: 700; }
#unitStats .scLine em { font-style: normal; color: #8fb2cc; }
.scTier { color: #6fe08a !important; }
#unitStats .scIcons {
display: flex; flex-wrap: nowrap; gap: 7px; justify-content: center; margin-top: 5px;
}
#unitStats .scIco { display: none; }
#unitStats .scTags {
font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
color: #57c9f7; text-align: center; margin-top: 7px; padding-bottom: 2px;
}
.upgTile {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 5px;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi);
background:
radial-gradient(90% 60% at 50% 0%, rgba(60, 140, 210, .25), transparent 60%),
linear-gradient(180deg, #16283c, #0a1421);
box-shadow: inset 0 1px 0 rgba(150, 215, 255, .22), 0 2px 5px rgba(0, 0, 0, .5);
cursor: help; flex: 0 0 auto;
}
.upgTile.tipOpen { border-color: var(--hud-line-hi); }
.upgTile .ico { width: 24px; height: 24px; }
.upgTile > b {
position: absolute; right: 3px; bottom: 1px;
font-size: 12px; font-weight: 800; color: #f2f9ff;
text-shadow: 0 0 4px #000, 0 1px 2px #000;
}
/* SC2 tooltip: cyan title, colour-coded values */
.tip {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; gap: 3px;
min-width: 206px; padding: 11px 14px 12px;
text-align: left; white-space: nowrap;
background: linear-gradient(180deg, rgba(14, 34, 58, .98), rgba(6, 16, 30, .99));
border: 1px solid #3ba7dc; border-radius: 5px;
box-shadow: 0 8px 26px rgba(0, 0, 0, .8), 0 0 18px rgba(59, 167, 220, .3);
opacity: 0; visibility: hidden; transition: opacity .12s;
pointer-events: none; z-index: 60;
}
/* Hover is DESKTOP ONLY. A touch WebView leaves :hover latched on the last
thing tapped, and the canvas calls preventDefault() on touchstart so the
browser never gets the signal to clear it — the tooltip stayed visible no
matter where you tapped next, whatever the .tipOpen class said. On touch,
.tipOpen is the only thing that shows a tip. */
body:not(.touch) .upgTile:hover .tip, .upgTile.tipOpen .tip { opacity: 1; visibility: visible; }
body:not(.touch) .upgTile:hover { border-color: var(--hud-line-hi); }
/* Ability tiles get the same explain-yourself tooltip as the refit icons. They
sit in the bottom-right command card, so the tip opens up and to the LEFT to
stay on screen. */
.cmd.ability { position: relative; overflow: visible; }
.cmd.ability .tip {
left: auto; right: 0; bottom: calc(100% + 8px); top: auto;
transform: none; text-align: left; white-space: normal; min-width: 210px;
}
body:not(.touch) .cmd.ability:hover .tip, .cmd.ability.tipOpen .tip { opacity: 1; visibility: visible; }
.tip em { font-style: normal; font-size: 13px; font-weight: 800; color: #57c9f7; text-shadow: 0 0 10px rgba(70, 190, 250, .45); margin-bottom: 5px; }
.tipRow { font-size: 11px; font-weight: 600; color: #b9d3e8; }
.tipRow b { font-weight: 700; color: #fff; }
.tipRow b.v-att { color: #ff9a6a; } .tipRow b.v-hp { color: #5df08e; }
.tipRow b.v-sh { color: #6fc9ff; } .tipRow b.v-en { color: #c9a0ff; }
.tipRow b.v-spd { color: #ffd069; } .tipRow b.v-rng { color: #a9b6ff; }
.tipNext { margin-top: 6px; padding-top: 6px; font-size: 10px; color: #86a8c6; border-top: 1px solid rgba(59, 167, 220, .25); }
/* ─────────────────────────── REFIT (docked) ─────────────────────────── */
#upgPanel {
position: absolute; right: 8px; bottom: 122px; padding: 8px 10px 10px;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi); border-radius: 8px;
background: linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 12px var(--hud-glow);
display: none;
}
body.atBase #upgPanel { display: block; }
.upgHead {
font-size: 8.5px; font-weight: 800; letter-spacing: 2.6px; text-align: center;
color: #57e0a0; text-shadow: 0 0 8px rgba(60, 220, 140, .4); margin-bottom: 7px;
}
#upgradeGrid { display: grid; grid-template-columns: repeat(4, 62px); gap: 5px; }
/* command tiles (refit + abilities share .cmd) */
.cmd {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 58px; padding: 4px 2px; border-radius: 6px;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi);
background:
radial-gradient(90% 60% at 50% 0%, rgba(60, 140, 210, .22), transparent 60%),
linear-gradient(180deg, #122133, #081120);
box-shadow: inset 0 1px 0 rgba(150, 215, 255, .2), 0 2px 5px rgba(0, 0, 0, .5);
color: #cfe6fa; cursor: pointer; font-family: inherit;
}
.cmd:hover:not(:disabled) { border-color: #6fe0a0; box-shadow: inset 0 0 8px rgba(80, 220, 140, .18), 0 0 10px rgba(60, 220, 140, .25); }
.cmd:disabled { opacity: .38; cursor: default; }
.cmd > b {
position: absolute; top: 2px; left: 4px;
font-size: 8px; font-weight: 800; color: #7fb0d8;
}
.cmd .ico { width: 17px; height: 17px; }
.cmd .cName { font-size: 8px; font-weight: 700; letter-spacing: .4px; margin-top: 2px; white-space: nowrap; max-width: 58px; overflow: hidden; text-overflow: ellipsis; }
.cmd .cCost { font-size: 8.5px; font-weight: 800; color: #ffd76e; }
.cmd .cLvl { font-size: 7.5px; color: #8fb4d4; letter-spacing: 1px; }
/* ─────────────────────────── ABILITIES ─────────────────────────── */
#cmdPanel { position: absolute; right: 8px; bottom: 8px; }
#abilityToggle {
display: none;
padding: 12px 20px; border-radius: 9px;
border: 1px solid var(--hud-gold);
background: linear-gradient(180deg, rgba(50, 38, 12, .95), rgba(24, 18, 6, .97));
color: #ffe2a0; font-size: 12px; font-weight: 800; letter-spacing: 2px;
box-shadow: 0 0 0 1px rgba(14, 10, 2, .9), 0 0 14px rgba(234, 181, 67, .3);
cursor: pointer; font-family: inherit;
}
#commandCard { display: flex; gap: 8px; }
#commandCard .cmd { width: auto; height: 62px; }
#commandCard .cmd .cName { max-width: 68px; }
.cmd.ability:not(:disabled):not(.research) {
border-color: var(--hud-gold);
background:
radial-gradient(90% 60% at 50% 20%, rgba(240, 181, 69, .2), transparent 65%),
linear-gradient(180deg, rgba(30, 24, 9, .96), rgba(12, 9, 3, .97));
box-shadow: inset 0 1px 0 rgba(255, 226, 160, .3), 0 0 12px rgba(234, 181, 67, .35);
}
.cmd.ability:not(:disabled):not(.research) .cName { color: #ffe2a0; }
.cmd.ability.research .cCost { color: #7fffc0; }
.cmd.ability.research::after {
content: 'RESEARCH'; font-size: 6px; letter-spacing: 1.6px; color: #57e0a0; margin-top: 1px;
}
.cmd.ability.targeting { border-color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .4); }
/* HUD visibility states: full → hidden → minimal (map + own vitals) */
body.hudCollapsed #minimapPanel, body.hudCollapsed #infoPanel,
body.hudCollapsed #cmdPanel, body.hudCollapsed #upgPanel,
body.hudCollapsed #topBar, body.hudCollapsed #netBadge { display: none !important; }
body.hudMinimal #cmdPanel, body.hudMinimal #upgPanel,
body.hudMinimal #topBar, body.hudMinimal #netBadge { display: none !important; }
body.hudMinimal.hasSelection:not(.ownSelected) #infoPanel { display: none !important; }
body.hudMinimal #unitStats { visibility: hidden; }
/* ════════════════════════════════════════════════════════════
TOUCH LAYOUT — its own numbers, not breakpoints.
════════════════════════════════════════════════════════════ */
body.touch #minerals { font-size: 12px; padding: 4px 16px; }
body.touch #minimapPanel { padding: 4px; }
body.touch #infoPanel { left: 150px; min-width: 0; max-width: 460px; padding: 7px 14px 6px; gap: 12px; }
body.touch.abilitiesOpen #infoPanel { right: 348px; }
body.touch #portrait { width: 58px; height: 58px; }
body.touch #portraitArt { width: 46px; height: 46px; }
body.touch #infoMain { width: 216px; }
body.touch #unitName { font-size: 11px; margin-bottom: 4px; }
body.touch .uBar { height: 9px; padding: 0 52px 0 16px; }
body.touch .uBar > b { width: 12px; height: 12px; }
body.touch .uBar::after { left: 16px; right: 52px; }
body.touch .uBar > i { left: 17px; max-width: calc(100% - 70px); }
body.touch .uBar > span { width: 48px; font-size: 9px; line-height: 12px; }
body.touch #unitStats .scLine { font-size: 8.5px; line-height: 1.6; }
body.touch #unitStats .scIcons { grid-template-columns: repeat(4, 30px); gap: 4px; }
body.touch .upgTile { width: 30px; height: 30px; }
body.touch .upgTile .ico { width: 16px; height: 16px; }
body.touch .upgTile > b { font-size: 8px; }
body.touch .tip { bottom: auto; top: calc(100% + 8px); }
/* touch abilities: collapsed behind the gold button */
body.touch #abilityToggle { display: block; }
body.touch #commandCard { display: none; }
body.touch.abilitiesOpen #commandCard { display: flex; }
body.touch.abilitiesOpen #abilityToggle { display: none; }
body.touch #commandCard .cmd { width: auto; height: 56px; }
body.touch #upgPanel { bottom: 110px; }
body.touch #upgradeGrid { grid-template-columns: repeat(4, 58px); }
body.touch .cmd { height: 54px; }
body.touch .cmd > b { display: none; }
/* ════════════════════════════════════════════════════════════
TOUCH CARD — two columns, wide enough that nothing is cut off.
┌─────────────┬──────────────────────────┐
│ Battlecruiser│ Move Speed: 55 (Normal) │
│ 300 / 300 │ Kills: 13 (124◆) │
│ 1100 / 1100 │ ▢ ▢ ▢ ▢ ▢ ▢ ▢ │
│ 200 / 200 │ │
└─────────────┴──────────────────────────┘
Children of #infoLeft / #infoMain / #unitStats are hoisted with
display:contents so one grid can lay them all out.
════════════════════════════════════════════════════════════ */
body.touch #infoPanel {
left: 150px; right: auto; width: max-content;
max-width: calc(100vw - 176px);
height: auto; padding: 9px 18px;
display: grid;
grid-template-columns: max-content max-content;
align-items: center; justify-items: start;
column-gap: 24px; row-gap: 1px;
}
body.touch #infoLeft,
body.touch #infoMain,
body.touch #unitStats,
body.touch #unitStats .scCard { display: contents; }
body.touch #portrait { display: none; } /* no ship image */
body.touch #unitStats .scTags { display: none; } /* no ARMORED · CAPITAL */
/* left column */
body.touch #unitName {
grid-column: 1; grid-row: 1;
font-size: 13px; padding: 0 0 3px; margin: 0; justify-self: center;
}
body.touch #unitName .tag, body.touch #unitName .youTag {
font-size: 6.5px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px;
}
body.touch #portraitVitals {
grid-column: 1; grid-row: 2 / span 2;
align-items: center; justify-self: center; line-height: 1.35;
}
body.touch #portraitVitals .vSh,
body.touch #portraitVitals .vHp { font-size: 13.2px; }
body.touch #portraitVitals .vEn { font-size: 12.1px; }
/* right column */
body.touch #unitStats .scLine { font-size: 10.5px; line-height: 1.4; grid-column: 2; }
body.touch #unitStats .scLine:nth-of-type(1) { grid-row: 1; }
body.touch #unitStats .scLine:nth-of-type(2) { grid-row: 2; }
body.touch #unitStats .scIcons {
grid-column: 2; grid-row: 3;
display: flex; gap: 5px; margin-top: 4px;
}
body.touch .upgTile { width: 32px; height: 32px; }
body.touch .upgTile .ico { width: 17px; height: 17px; }
body.touch .upgTile > b { font-size: 9px; }
/* tooltip opens UPWARD on touch — the card sits at the bottom of the screen */
body.touch .tip { bottom: calc(100% + 8px); top: auto; min-width: 186px; }
/* refit becomes a centred popup over everything while docked */
body.touch #upgPanel {
position: fixed; left: 50%; top: 46%; right: auto; bottom: auto;
transform: translate(-50%, -50%);
z-index: 80; padding: 14px 18px 16px;
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 24px rgba(56, 178, 230, .35),
0 18px 60px rgba(0, 0, 0, .8);
}
body.touch #upgPanel .upgHead { font-size: 9.5px; margin-bottom: 10px; }
body.touch #upgradeGrid { grid-template-columns: repeat(4, 66px); gap: 7px; }
body.touch #upgPanel .cmd { height: 60px; }
/* ════════════════════════════════════════════════════════════
COMMAND CARD — one panel, bottom-right, two pages.
page 1 (docked) : upgrades + [ABILITIES] tile
page 2 : abilities + [BACK] tile (back only when docked)
Nothing ever sits in the middle of the screen.
════════════════════════════════════════════════════════════ */
.aico-back { background-image: url('data:image/svg+xml;utf8,'); }
#upgPanel, #cmdPanel {
position: absolute; right: 8px; bottom: 8px; left: auto; top: auto;
transform: none; z-index: 20;
padding: 9px 11px 11px;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi);
border-radius: 8px;
background:
radial-gradient(130% 80% at 50% 0%, rgba(40, 90, 140, .18), transparent 55%),
linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 12px var(--hud-glow),
inset 0 1px 0 rgba(140, 210, 250, .18);
}
/* which page shows */
body.atBase:not(.cmdAbilities) #upgPanel { display: block; }
body.atBase:not(.cmdAbilities) #cmdPanel { display: none; }
body.atBase.cmdAbilities #upgPanel { display: none; }
body.atBase.cmdAbilities #cmdPanel { display: block; }
body:not(.atBase) #upgPanel { display: none; }
body:not(.atBase) #cmdPanel { display: block; }
body:not(.hasSelection) #upgPanel, body:not(.hasSelection) #cmdPanel { display: none; }
/* the old gold pill is replaced by the in-grid nav tile */
#abilityToggle { display: none !important; }
/* both pages use the same 4-wide grid so tiles never jump around */
#upgradeGrid, #commandCard {
display: grid !important;
grid-template-columns: repeat(4, 68px);
gap: 6px;
}
#upgradeGrid .cmd, #commandCard .cmd { width: auto; height: 62px; }
/* Abilities run one tile per slot plus nav, so they get 10% less each to buy
back room on narrow phones. Refit keeps full size (fewer tiles since the
Range and Reactor tracks went away). */
#commandCard { grid-template-columns: repeat(4, 61px); }
#commandCard .cmd { height: 56px; }
/* back tile is only meaningful while docked (otherwise there is no page 1) */
#toUpgrades { display: none; }
body.atBase #toUpgrades { display: flex; }
/* nav tiles read as chrome, not as purchases */
.navTile {
border-color: rgba(234, 181, 67, .6) !important;
background:
radial-gradient(90% 60% at 50% 0%, rgba(240, 181, 69, .18), transparent 60%),
linear-gradient(180deg, rgba(26, 20, 8, .96), rgba(10, 7, 3, .97)) !important;
}
.navTile .cName { color: #ffe2a0 !important; font-size: 8.5px; letter-spacing: 1.2px; }
.navTile:hover { border-color: var(--hud-gold) !important; box-shadow: 0 0 12px rgba(234, 181, 67, .35) !important; }
#toUpgrades { border-color: var(--hud-line) !important; background: linear-gradient(180deg, #122133, #081120) !important; }
#toUpgrades .cName { color: #cfe6fa !important; }
.upgHead {
font-size: 8.5px; font-weight: 800; letter-spacing: 2.4px; text-align: center;
color: #57e0a0; text-shadow: 0 0 8px rgba(60, 220, 140, .4); margin-bottom: 8px;
}
#cmdPanel::before {
content: 'ABILITIES'; display: block;
font-size: 8.5px; font-weight: 800; letter-spacing: 2.4px; text-align: center;
color: #8fc0e0; margin-bottom: 8px;
}
/* touch: same card, finger-sized, still bottom-right (never centred) */
body.touch #upgPanel, body.touch #cmdPanel {
position: absolute; right: 6px; bottom: 6px; left: auto; top: auto;
transform: none; padding: 6px 8px 8px;
}
body.touch #upgradeGrid, body.touch #commandCard { grid-template-columns: repeat(4, 53px); gap: 4px; }
body.touch #upgPanel .cmd, body.touch #cmdPanel .cmd { height: 48px; }
body.touch #commandCard { grid-template-columns: repeat(4, 48px); }
body.touch #cmdPanel .cmd { height: 43px; }
body.touch .cmd > b { display: none; }
/* the card owns the bottom-right, so the ship strip stops short of it */
body.touch #infoPanel { max-width: calc(100vw - 448px); }
/* ════════════════════════════════════════════════════════════
Kill feed · Leaderboard · Cast bar
════════════════════════════════════════════════════════════ */
#killFeed {
position: absolute; top: 54px; right: 12px;
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
pointer-events: none; z-index: 30;
}
.kfRow {
padding: 5px 11px; border-radius: 5px;
background: linear-gradient(180deg, rgba(8, 16, 27, .92), rgba(3, 8, 15, .95));
border: 1px solid var(--hud-line);
font-size: 11px; font-weight: 600; letter-spacing: .3px; color: #a9c6de;
white-space: nowrap;
opacity: 1; transition: opacity .8s;
}
.kfRow.kfOut { opacity: 0; }
.kfRow b { font-weight: 800; }
.kfMine { color: #6fc9ff; }
.kfTheirs { color: #ff7a5c; }
#leaderboard {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
min-width: 300px; padding: 12px 16px 14px; z-index: 70;
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi);
border-radius: 8px;
background: linear-gradient(180deg, rgba(8, 16, 27, .97), rgba(3, 8, 15, .98));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 26px var(--hud-glow), 0 18px 60px rgba(0, 0, 0, .8);
}
#leaderboard.hidden { display: none; }
.lbHead {
display: flex; justify-content: space-between;
padding-bottom: 7px; margin-bottom: 7px;
border-bottom: 1px solid rgba(56, 178, 230, .3);
font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: #cfe6fa;
}
.lbRow {
display: grid; grid-template-columns: 1fr auto 34px;
align-items: center; gap: 10px;
padding: 4px 2px; font-size: 12.5px; font-weight: 700;
}
.lbRow.lbMe { background: rgba(56, 178, 230, .12); border-radius: 4px; }
.lbName.lbBlue { color: #6fc9ff; }
.lbName.lbRed { color: #ff7a5c; }
.lbScore { color: #eaf4ff; font-weight: 800; }
.lbKills { color: #ffd069; font-weight: 800; text-align: right; }
.lbRow.lbDead { opacity: .38; }
.lbRow.lbDead .lbName { text-decoration: line-through; }
#castBar {
position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%);
width: 260px; padding: 7px 10px 8px; z-index: 40; pointer-events: none;
border: 1px solid rgba(255, 201, 74, .6); border-radius: 6px;
background: linear-gradient(180deg, rgba(26, 20, 8, .95), rgba(10, 7, 3, .97));
box-shadow: 0 0 16px rgba(255, 201, 74, .3);
}
#castBar.hidden { display: none; }
.castLabel {
font-size: 9px; font-weight: 800; letter-spacing: 2px; color: #ffd98f;
text-align: center; margin-bottom: 5px;
}
.castTrack { height: 8px; border-radius: 2px; background: rgba(8, 20, 32, .95); overflow: hidden; }
.castTrack > i {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, #c08a1e, #ffd069);
box-shadow: 0 0 8px rgba(255, 208, 105, .7);
}
body.touch #killFeed { top: 50px; font-size: 10px; }
body.touch .kfRow { font-size: 10px; padding: 4px 9px; }
body.touch #castBar { bottom: 112px; width: 220px; }
/* ── touch card ─────────────────────────────────────────────────────────────
Left-justified. Width is set at runtime (layoutTouchCard) so it always stops
short of the command card. Icons on TWO rows, kept short by tight leading.
Battlecruiser Move Speed: 55 (Normal)
300 / 300 Kills: 0 (0◆)
1100 / 1100 ▢ ▢ ▢ ▢
200 / 200 ▢ ▢ ▢ */
body.touch #infoPanel {
padding: 5px 13px;
column-gap: 16px; row-gap: 0;
align-items: center;
justify-content: flex-start;
}
body.touch #infoLeft { align-items: flex-start; }
body.touch #unitName {
font-size: 12.7px; margin: 0 0 1px; padding: 0;
text-align: left; justify-self: start;
}
body.touch #portraitVitals {
align-items: flex-start; /* left-justified, not centred */
line-height: 1.08; margin: 0;
}
body.touch #portraitVitals .vSh,
body.touch #portraitVitals .vHp { font-size: 12px; }
body.touch #portraitVitals .vEn { font-size: 11px; }
body.touch #infoMain { align-items: flex-start; }
body.touch #unitStats { align-items: flex-start; }
body.touch #unitStats .scCard { align-items: flex-start; }
body.touch #unitStats .scLine { font-size: 10.5px; line-height: 1.15; text-align: left; }
/* two rows of four */
body.touch #unitStats .scIcons {
display: flex; flex-wrap: nowrap;
gap: 3px; margin-top: 2px; justify-content: flex-start;
}
body.touch .upgTile { width: 30px; height: 30px; }
body.touch .upgTile .ico { width: 15px; height: 15px; }
body.touch .upgTile > b { font-size: 9px; right: 2px; }
/* leaderboard button, beside MY SHIP (no Tab key on a phone) */
#btnLb { display: none; }
body.touch #btnLb {
display: block; position: absolute; top: 8px; left: 108px;
min-width: 42px; min-height: 34px; padding: 6px 10px;
border: 1px solid var(--hud-line); border-radius: 8px;
background: linear-gradient(180deg, var(--hud-glass-a), var(--hud-glass-b));
color: #cfe8fa; font-size: 16px; line-height: 1; text-align: center;
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 10px var(--hud-glow);
cursor: pointer; z-index: 25;
}
body.touch #btnLb:active { border-color: var(--hud-line-hi); }
body.touch #btnCancel { left: 164px; }
/* ── command tiles: no level tag, names that fit ────────────────────────────
"L0" was the upgrade level and just added noise. Ability names were also
overflowing their tiles and colliding, so they now wrap to two tight lines
and clip cleanly instead. */
.cmd .cLvl { display: none !important; }
.cmd .cName {
white-space: normal;
line-height: 1.08;
max-width: 100%;
overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#commandCard .cmd .cName { font-size: 7.5px; letter-spacing: 0; }
#upgradeGrid .cmd .cName { font-size: 8px; letter-spacing: .2px; }
/* the green cost already says "not researched yet" — drop the extra label */
.cmd.ability.research::after { display: none !important; }
/* ── tile layout: name across the top, price pinned bottom-right ─────────────
The icon owns the middle of the tile, so the two labels are lifted out of the
flex flow and parked in corners instead of stacking under it. */
.cmd .cName {
position: absolute; top: 3px; left: 3px; right: 3px;
text-align: center; margin-top: 0;
}
.cmd .cCost {
position: absolute; bottom: 2px; right: 4px;
text-align: right; line-height: 1;
}
/* the icon no longer has to share vertical space with the labels */
.cmd .ico, .cmd .aico { margin-top: 4px; }
/* a little more room per tile so two lines of name actually fit */
body.touch #upgradeGrid, body.touch #commandCard {
grid-template-columns: repeat(4, 58px); gap: 4px;
}
body.touch #upgPanel .cmd, body.touch #cmdPanel .cmd { height: 52px; padding: 3px 2px; }
body.touch #commandCard .cmd .aico, body.touch #upgradeGrid .cmd .ico { width: 15px; height: 15px; }
body.touch .cmd .cCost { font-size: 8px; }
/* ── card: no tag line, centred on screen ───────────────────────────────────
ARMORED · CAPITAL removed and speed/kills on one line, so the card gets
shorter on its own. Centring is done between the map and the command card
so it sits in the real gap, not the middle of the window. */
#unitStats .scTags { display: none !important; }
@media (min-width: 901px) and (min-height: 621px) {
#infoPanel { left: 50%; right: auto; transform: translateX(-50%); }
}
/* ════════════════════════════════════════════════════════════
In-game ship selector — overlays the live match
════════════════════════════════════════════════════════════ */
#shipPicker {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center;
background: rgba(2, 6, 12, .45);
pointer-events: auto;
}
#shipPicker.hidden { display: none; }
.spPanel {
width: min(880px, 94vw);
border: 1px solid var(--hud-line); border-top-color: var(--hud-line-hi);
border-radius: 10px;
background:
radial-gradient(120% 70% at 50% 0%, rgba(40, 90, 140, .22), transparent 55%),
linear-gradient(180deg, rgba(8, 18, 30, .97), rgba(3, 8, 15, .98));
box-shadow: 0 0 0 1px rgba(2, 7, 14, .9), 0 0 30px var(--hud-glow), 0 24px 70px rgba(0, 0, 0, .8);
padding: 14px 18px 16px;
}
.spHead {
display: flex; align-items: baseline; justify-content: center; position: relative;
padding-bottom: 10px; margin-bottom: 12px;
border-bottom: 1px solid rgba(56, 178, 230, .28);
}
.spTitle { font-size: 20px; font-weight: 800; letter-spacing: 1px; color: #cfe8fa; }
.spTimer {
position: absolute; right: 0; top: -2px;
font-size: 22px; font-weight: 800; color: #eaf4ff;
}
.spBody { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
/* left: hull tiles */
.spGrid { display: grid; grid-template-columns: repeat(4, 66px); gap: 7px; }
.spTile {
position: relative; width: 66px; height: 60px;
border: 1px solid rgba(56, 178, 230, .45); border-radius: 5px;
background: linear-gradient(180deg, #14243a, #08111f);
cursor: pointer; padding: 0; overflow: hidden;
}
.spTile.on {
border-color: #7fd4ff;
box-shadow: 0 0 0 1px #7fd4ff, 0 0 14px rgba(90, 200, 255, .5);
}
.spTile > b {
position: absolute; top: 2px; left: 4px; z-index: 2;
font-size: 11px; font-weight: 800; color: #cfe8fa; text-shadow: 0 1px 3px #000;
}
.spTileArt {
display: block; width: 100%; height: 100%;
background-size: 78%; background-position: center; background-repeat: no-repeat;
opacity: .95;
}
/* right: detail */
.spDetail { min-width: 0; }
.spName { font-size: 19px; font-weight: 800; color: var(--hud-gold); margin-bottom: 8px; }
.spArt {
height: 200px; margin-bottom: 10px;
border: 1px solid rgba(56, 178, 230, .4); border-radius: 5px;
background: radial-gradient(circle at 50% 45%, rgba(24, 52, 84, .6), rgba(3, 8, 15, .95) 72%);
overflow: hidden;
}
#spCanvas { display: block; width: 100%; height: 100%; }
.spRole, .spVitals, .spSpeed { font-size: 13px; color: #a9c6de; line-height: 1.65; }
.spRole b, .spSpeed b { color: #eaf4ff; }
.spHull { color: #5df08e; }
.spShield { color: #6fc9ff; }
.spDesc { font-size: 12.5px; color: #8fb2cc; line-height: 1.5; margin: 8px 0 12px; }
.spAbilTitle { font-size: 12px; color: #a9c6de; margin-bottom: 6px; }
.spAbils { display: flex; flex-wrap: wrap; gap: 6px; }
.spAbil {
width: 44px; height: 44px; border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(56, 178, 230, .45);
background: linear-gradient(180deg, #16283c, #0a1421);
}
.spAbil .aico { width: 26px; height: 26px; }
.spConfirm {
display: block; width: 100%; margin-top: 14px; padding: 12px 0;
border: 1px solid #7fd4ff; border-radius: 6px;
background: linear-gradient(180deg, #2f7fc4, #1b4c7d);
color: #f2faff; font-size: 15px; font-weight: 800; letter-spacing: 1.4px;
font-family: inherit; cursor: pointer;
box-shadow: 0 6px 20px rgba(30, 110, 190, .35);
}
.spConfirm:hover { background: linear-gradient(180deg, #3a95e0, #22598f); }
/* touch: shorter panel, smaller preview */
body.touch .spPanel { width: 94vw; padding: 10px 12px 12px; }
body.touch .spBody { gap: 12px; }
body.touch .spGrid { grid-template-columns: repeat(3, 56px); gap: 5px; }
body.touch .spTile { width: 56px; height: 50px; }
body.touch .spArt { height: 110px; }
body.touch .spTitle { font-size: 16px; }
body.touch .spTimer { font-size: 17px; }
body.touch .spName { font-size: 15px; }
body.touch .spRole, body.touch .spVitals, body.touch .spSpeed { font-size: 11px; line-height: 1.45; }
body.touch .spDesc { font-size: 10.5px; margin: 5px 0 8px; }
body.touch .spAbil { width: 34px; height: 34px; }
body.touch .spAbil .aico { width: 20px; height: 20px; }
body.touch .spConfirm { padding: 10px 0; font-size: 13px; margin-top: 10px; }
/* picker preview: give the canvas real pixels and lift the stage lighting */
.spArt { position: relative; background: radial-gradient(circle at 50% 45%, rgba(30, 64, 102, .75), rgba(3, 8, 15, .96) 74%); }
#spCanvas { width: 100%; height: 100%; display: block; }
.spTileArt { background-size: 82%; }
.spTile > b { background: rgba(3, 8, 15, .75); padding: 0 3px; border-radius: 3px; }
/* spawn status: never leave the player staring at a silent black screen */
#spawnErr {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 95; display: none; padding: 14px 22px;
border: 1px solid var(--hud-line); border-radius: 8px;
background: linear-gradient(180deg, rgba(8,16,27,.96), rgba(3,8,15,.97));
box-shadow: 0 0 24px var(--hud-glow);
color: #ffd27f; font-size: 14px; font-weight: 700; letter-spacing: .6px;
}