/* Fonts are self-hosted (SIL Open Font License, see fonts/OFL-*.txt). */
@font-face { font-family: 'Snails Start'; src: url('fonts/snails-start.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('fonts/vt323.woff2') format('woff2'); font-display: swap; }

/*
  Look: dark glassy panels with notched pixel corners, one gold accent, team colours where they mean something.
  Snails Start (Press Start 2P with the letters the translations need) is the display face and only used at
  multiples of 8px, where it stays sharp; VT323 is the UI text.
  Pixel frames are drawn with four hard shadows (top, bottom, left, right), which leaves each corner cut by one step.
*/
:root {
  --bg0: #140e16;
  --bg1: #1d1520;
  --bg2: #2e222f;
  --bg3: #3e3546;
  --bg4: #4c4055;
  --line: #4f4256;
  --line2: #7f708a;
  --text: #fbf5ef;
  --text2: #cbbec6;
  --text3: #94879a;
  --gold: #f9c22b;
  --gold-hi: #fbff86;
  --gold-lo: #f79617;
  --hot: #f04f78;
  --hot-lo: #c32454;
  --green: #1ebc73;
  --sky: #4d9be6;
  --ink: #2e222f;
  --panel: rgba(23, 16, 26, .9);
  --glass: rgba(23, 16, 26, .78);
  --head: 'Snails Start', monospace;
  --body: 'VT323', monospace;
  --b: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); color: var(--text); font-family: var(--body); font-size: 22px; line-height: 1.1; }
canvas#game { position: fixed; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; image-rendering: crisp-edges; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3 { font-family: var(--head); font-weight: normal; margin: 0 0 12px; }
h2 { font-size: 16px; line-height: 24px; color: var(--text); }
h3 { font-size: 8px; line-height: 16px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; }
p { margin: 0 0 10px; }
b { color: var(--gold-hi); font-weight: normal; }

kbd {
  font-family: var(--head); font-size: 8px; line-height: 8px; color: var(--text); display: inline-block; vertical-align: 2px;
  background: var(--bg3); padding: 4px 5px 3px; margin: 0 4px 0 2px;
  box-shadow: 0 -2px 0 var(--line2), 0 2px 0 var(--line2), -2px 0 0 var(--line2), 2px 0 0 var(--line2), inset 0 -2px 0 rgba(0, 0, 0, .35);
}
/* arrow keys: the pixel font has no arrows, so they're drawn as pixel triangles */
kbd.ka { width: 20px; height: 15px; padding: 0; position: relative; vertical-align: -3px; }
kbd.ka::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z'/%3E%3C/svg%3E") center / 14px 8px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM2 1h3v1H2zM1 2h5v1H1zM0 3h7v1H0z'/%3E%3C/svg%3E") center / 14px 8px no-repeat;
}
kbd.ka.d::before { transform: rotate(180deg); }
kbd.ka.l::before { transform: rotate(-90deg); }
kbd.ka.r::before { transform: rotate(90deg); }
@media (pointer: coarse) { .btn kbd, .hud-wp kbd { display: none; } }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; flex-direction: column; padding: 20px; overflow-y: auto; }
/* centred, but scrollable from the top when taller than the screen */
.screen > :first-child { margin-top: auto; }
.screen > :last-child { margin-bottom: auto; }
.screen.active { display: flex; }
.screen.dim, .overlay { background: rgba(12, 8, 14, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 12; }
/* title screen: the menu stands in a dark band down the left, the demo battle plays on to the right of it */
#menu {
  align-items: flex-start; padding-left: clamp(16px, 8vw, 128px);
  background: linear-gradient(90deg, rgba(14, 9, 16, .82), rgba(14, 9, 16, .62) clamp(300px, 34vw, 560px), rgba(14, 9, 16, 0) clamp(520px, 62vw, 1000px));
}

/* ---------- logo ---------- */
/* painted by logo.js 76 px wide: 5x lines it up with the 380 px buttons */
.logo { margin: 0 0 36px 3px; line-height: 0; }
#logo { width: 380px; height: 110px; image-rendering: pixelated; image-rendering: crisp-edges; }

/* main menu: one stack, the first visible entry is the call to action */
.menu-buttons { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); }
.menu-buttons .btn.big { justify-content: flex-start; padding-left: 52px; position: relative; transition: transform .06s; }
.menu-buttons .btn::before {
  content: ''; position: absolute; left: 22px; top: 50%; width: 12px; height: 12px; margin-top: -6px; opacity: .45;
  background: currentColor;
  clip-path: polygon(0 0, 34% 0, 34% 17%, 67% 17%, 67% 34%, 100% 34%, 100% 67%, 67% 67%, 67% 84%, 34% 84%, 34% 100%, 0 100%);
  transition: transform .12s steps(2), opacity .12s;
}
.menu-buttons .btn:hover::before, .menu-buttons .btn:focus-visible::before { opacity: 1; transform: translateX(4px); }
.menu-buttons > .btn:not(.hidden) { --bg: var(--gold); --bc: var(--ink); --fg: var(--ink); --shade: var(--gold-lo); --hi: var(--gold-hi); --glow: rgba(249, 194, 43, .35); }
.menu-buttons > .btn:not(.hidden) ~ .btn { --bg: var(--glass); --bc: var(--line); --fg: var(--text); --shade: rgba(0, 0, 0, .35); --hi: rgba(255, 255, 255, .06); --glow: transparent; }
.menu-buttons > .btn:not(.hidden):hover { --glow: rgba(249, 194, 43, .55); }
.menu-buttons > .btn:not(.hidden) ~ .btn:hover, .menu-buttons > .btn:not(.hidden) ~ .btn:focus-visible { --bc: var(--gold); --bg: rgba(46, 34, 47, .92); --glow: rgba(249, 194, 43, .18); filter: none; }
/* who made it: a quiet line under the buttons; each half wraps whole */
.credit { margin: 32px 0 0 3px; max-width: calc(100vw - 32px); font-size: 20px; line-height: 1.2; color: var(--text3); text-shadow: 2px 2px 0 var(--bg0); }
.credit span { white-space: nowrap; }
.credit i { font-style: normal; color: var(--line2); }
.credit a { color: var(--text2); text-decoration: none; box-shadow: inset 0 -2px 0 var(--line); transition: color .1s, box-shadow .1s; }
.credit a:hover, .credit a:focus-visible { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); outline: none; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--bg3); --bc: var(--line); --fg: var(--text); --shade: rgba(0, 0, 0, .35); --hi: rgba(255, 255, 255, .07); --glow: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--body); font-size: 24px; line-height: 1; color: var(--fg); cursor: pointer; white-space: nowrap;
  background: var(--bg); border: 0; padding: 9px 16px 10px; margin: var(--b);
  box-shadow: 0 calc(var(--b) * -1) 0 var(--bc), 0 var(--b) 0 var(--bc), calc(var(--b) * -1) 0 0 var(--bc), var(--b) 0 0 var(--bc),
    inset 0 -4px 0 var(--shade), inset 0 3px 0 var(--hi), 0 0 22px var(--glow);
  transition: transform .06s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --bc: var(--line2); filter: brightness(1.1); }
.btn:focus { outline: none; }
.btn:focus-visible { --bc: var(--gold); --glow: rgba(249, 194, 43, .4); }
.btn:active { transform: translateY(2px); --shade: transparent; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.big { font-family: var(--head); font-size: 16px; line-height: 16px; padding: 18px 22px 17px; letter-spacing: 1px; }
.btn.small { font-size: 22px; padding: 4px 10px 5px; --b: 2px; }
.btn.small kbd { margin-left: 6px; }
.btn.primary { --bg: var(--gold); --bc: var(--ink); --fg: var(--ink); --shade: var(--gold-lo); --hi: var(--gold-hi); --glow: rgba(249, 194, 43, .3); }
.btn.primary:hover { --glow: rgba(249, 194, 43, .55); filter: brightness(1.05); }
.btn.primary:focus-visible { --bc: var(--text); }
.btn.ghost { --bg: transparent; --bc: var(--line); --fg: var(--text2); --shade: transparent; --hi: transparent; }
.btn.ghost:hover { --bg: var(--bg3); --fg: var(--text); filter: none; }
.btn.icon { width: 36px; padding-left: 0; padding-right: 0; font-size: 18px; }
.btn.start { width: calc(100% - var(--b) * 2); margin-top: 16px; padding-top: 16px; padding-bottom: 15px; }
.btn-row { display: flex; gap: 10px; }

/* ---------- windows ---------- */
.window {
  background: var(--panel); padding: 18px 24px; margin: var(--b);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line),
    inset 0 3px 0 rgba(255, 255, 255, .05), 0 18px 48px rgba(0, 0, 0, .55);
  max-height: calc(100vh - 40px); overflow-y: auto; width: min(1100px, calc(100% - 6px));
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.window.narrow { width: min(560px, calc(100% - 6px)); }
.window.mid { width: min(720px, calc(100% - 6px)); }
.window.center { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: min(440px, calc(100% - 6px)); }
.window.center h2 { font-size: 24px; line-height: 32px; margin: 4px 0 8px; }
.win-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--bg3); }
.win-head h2 { margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.win-head h2::before { content: ''; width: 8px; height: 16px; background: var(--gold); box-shadow: 0 0 12px rgba(249, 194, 43, .6); }
.code { font-family: var(--head); font-size: 16px; color: var(--gold); background: var(--bg0); padding: 6px 10px 6px 14px; letter-spacing: 4px; box-shadow: 0 0 0 2px var(--line); }
.hint { color: var(--text3); font-size: 20px; margin-top: 10px; }

.setup { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
@media (max-width: 860px) { .setup { grid-template-columns: 1fr; } }
.col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; min-height: 36px; }
.col-head h3 { margin: 0; }
.team-list { display: flex; flex-direction: column; gap: 12px; }

/* team cards: their colour runs down the left edge */
.team {
  --tc: var(--hot);
  position: relative; background: var(--bg2); padding: 12px 12px 12px 22px; margin: 0 2px;
  box-shadow: 0 -2px 0 var(--bg3), 0 2px 0 var(--bg3), -2px 0 0 var(--bg3), 2px 0 0 var(--bg3);
  display: grid; grid-template-columns: 1fr auto; gap: 10px 10px; align-items: center;
}
.team::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--tc); box-shadow: inset -2px 0 0 rgba(0, 0, 0, .25), 4px 0 14px -4px var(--tc); }
.team .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.team .row.full { grid-column: 1 / -1; }
.team input.name { font-size: 24px; flex: 1; min-width: 120px; padding: 3px 10px; color: var(--text); }
.team .owner { color: var(--text3); font-size: 20px; }
.team.locked { opacity: .8; }
.swatches { display: flex; gap: 6px; margin-right: 4px; }
.swatch {
  width: 20px; height: 20px; padding: 0; border: 0; cursor: pointer; background: var(--sw);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px var(--bg0); transition: transform .06s;
}
.swatch:hover:not(:disabled) { transform: translateY(-2px); }
.swatch:disabled { cursor: default; }
.swatch:focus { outline: none; }
.swatch:focus-visible, .swatch.sel { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px var(--bg0), 0 0 0 4px var(--text), 0 0 12px var(--sw); }
.team .worm-names { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.worm-names input { font-size: 20px; padding: 3px 7px; width: 100%; }
.ally { min-width: 98px; }

/* ---------- form controls ---------- */
input, select, textarea {
  font-family: var(--body); font-size: 22px; color: var(--text); background: var(--bg0); border: 0; border-radius: 0;
  padding: 4px 10px; outline: none; margin: 2px;
  box-shadow: 0 0 0 2px var(--line), inset 0 2px 0 rgba(0, 0, 0, .4); transition: box-shadow .1s;
}
input::placeholder { color: var(--text3); }
input:hover:not(:disabled), select:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--line2), inset 0 2px 0 rgba(0, 0, 0, .4); }
input:focus, select:focus { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(249, 194, 43, .3), inset 0 2px 0 rgba(0, 0, 0, .4); }
input:disabled, select:disabled { color: var(--text3); background: rgba(20, 14, 22, .5); cursor: default; }
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23cbbec6' d='M0 0h2v2H0zM8 0h2v2H8zM2 2h2v2H2zM6 2h2v2H6zM4 4h2v2H4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
}
select:disabled { background-image: none; padding-right: 10px; }
option { background: var(--bg2); color: var(--text); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; color: var(--text2); }
.field input { width: calc(100% - 4px); }
.check { display: flex; gap: 12px; align-items: center; margin: 12px 0; cursor: pointer; color: var(--text); }
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; padding: 0; flex: none; cursor: pointer; background: var(--bg0);
}
input[type=checkbox]:checked {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath fill='%232e222f' d='M6 0h1v2H6zM5 2h1v1H5zM4 3h1v1H4zM3 4h1v1H3zM2 5h1v1H2zM1 4h1v1H1zM0 2h1v2H0z'/%3E%3C/svg%3E") center / 14px 12px no-repeat;
  box-shadow: 0 0 0 2px var(--gold-lo), 0 0 10px rgba(249, 194, 43, .35);
}
input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; padding: 0; margin: 12px 2px; background: var(--bg0); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 24px; background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-lo), 0 0 0 2px var(--ink), 0 0 12px rgba(249, 194, 43, .5); }
input[type=range]::-moz-range-thumb { width: 14px; height: 24px; border: 0; border-radius: 0; background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-lo), 0 0 0 2px var(--ink); }

.preview-wrap { background: var(--bg0); padding: 4px; margin: 2px 2px 12px; box-shadow: 0 0 0 2px var(--line); }
#map-preview, #lobby-preview { width: 100%; height: auto; image-rendering: pixelated; display: block; background: #323353; }
.preview-bar { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 2px 4px; color: var(--text2); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.opt { display: flex; flex-direction: column; gap: 4px; color: var(--text3); font-size: 20px; line-height: 1; }
.opt select { width: calc(100% - 4px); }
.opt.inline { flex-direction: row; align-items: center; gap: 12px; color: var(--text); cursor: pointer; }

.online-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .online-actions { grid-template-columns: 1fr; } }
.box { background: var(--bg2); padding: 16px; margin: 2px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: 0 0 0 2px var(--bg3); }
.box h3 { margin: 0; color: var(--text2); }
.box p { color: var(--text3); font-size: 20px; margin: 0; flex: 1; }
.box input { width: calc(100% - 4px); min-width: 0; }
.box .btn { width: calc(100% - var(--b) * 2); min-width: 0; margin-top: auto; }
.code-input { font-family: var(--head); font-size: 16px; line-height: 24px; text-transform: uppercase; letter-spacing: 8px; text-align: center; }
/* public or private: two buttons, the chosen one gold */
.seg { display: flex; gap: 6px; }
.box .seg .btn { flex: 1; width: auto; margin: 2px; }

/* public or private, shown on the lobby header: a lit dot when the room is listed */
.btn.vis::before { content: ''; width: 8px; height: 8px; margin-right: 4px; background: var(--text3); }
.btn.vis.pub::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.btn.vis:disabled { filter: none; cursor: default; --bg: transparent; --shade: transparent; --hi: transparent; }

/* the room browser: one row per public room, its teams' colours on the left */
.rooms-head { margin: 22px 0 8px; padding-top: 14px; border-top: 2px solid var(--bg3); }
#room-count:not(:empty) { color: var(--ink); background: var(--gold); padding: 0 4px; margin-left: 6px; }
.room-list {
  list-style: none; padding: 2px; margin: 0; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.room-list .empty { color: var(--text3); font-size: 20px; text-align: center; padding: 18px 12px; box-shadow: 0 0 0 2px var(--bg2); }
.room {
  display: grid; grid-template-columns: 41px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  background: var(--bg2); padding: 8px 8px 8px 12px; box-shadow: 0 0 0 2px var(--bg3); transition: box-shadow .1s;
}
.room:hover { box-shadow: 0 0 0 2px var(--line2); }
.room-teams { display: grid; grid-template-columns: repeat(4, 8px); grid-auto-rows: 8px; gap: 3px; }
.room-teams i { background: var(--sw); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 6px -2px var(--sw); }
.room-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.room-name b, .room-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-name b { color: var(--text); font-size: 24px; }
.room-name span { color: var(--text3); font-size: 19px; }
.room-state { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; color: var(--text2); font-size: 20px; line-height: 1; }
.tag { font-family: var(--head); font-size: 8px; line-height: 8px; padding: 3px 4px; color: var(--ink); background: var(--green); white-space: nowrap; }
.room.busy .tag { color: var(--text); background: var(--hot-lo); }
.room .btn { min-width: 80px; }
@media (max-width: 560px) {
  .room-list { max-height: none; }
  .room { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .room-teams { display: none; }
  .room-state { grid-row: 2; flex-direction: row; align-items: center; gap: 8px; }
  .room .btn { grid-column: 2; grid-row: 1 / span 2; }
}

.players { margin-top: 20px; }
.players ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.players li { background: var(--bg2); padding: 3px 10px; box-shadow: 0 0 0 2px var(--bg3); display: flex; align-items: center; }
.players li.host::after { content: 'host'; font-family: var(--head); font-size: 8px; color: var(--ink); background: var(--gold); padding: 3px 4px; margin-left: 8px; }
.players li.away { opacity: .55; }
.players li .kick { margin-left: 8px; font-family: var(--body); font-size: 18px; line-height: 1; color: var(--text); background: var(--hot-lo); border: 0; cursor: pointer; padding: 1px 6px 2px; }
.players li .kick:hover { background: var(--hot); }
.chat-box { margin: 20px 2px 2px; background: var(--bg0); box-shadow: 0 0 0 2px var(--line); }
#chat-log { height: 120px; overflow-y: auto; padding: 8px 10px; font-size: 20px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#chat-log .who { color: var(--gold); }
#chat-input { width: 100%; margin: 0; box-shadow: inset 0 2px 0 var(--bg3); background: var(--bg1); }

/* ---------- help ---------- */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px; }
@media (max-width: 860px) { .help-grid { grid-template-columns: 1fr; } }
.keys { border-collapse: collapse; width: 100%; }
.keys td { padding: 7px 8px 7px 0; border-bottom: 2px solid var(--bg2); vertical-align: middle; color: var(--text2); }
.keys td:first-child { white-space: nowrap; width: 1%; padding-right: 14px; }
.rules { margin: 0; padding-left: 0; list-style: none; color: var(--text2); }
.rules li { margin-bottom: 10px; padding-left: 20px; position: relative; }
.rules li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; background: var(--gold); }
.arsenal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.arsenal .wpn { display: flex; gap: 10px; align-items: center; background: var(--bg2); padding: 6px 10px 6px 6px; }
.arsenal canvas { width: 48px; height: 48px; image-rendering: pixelated; flex: none; background: var(--bg1); }
.arsenal .wpn b { display: block; font-size: 22px; color: var(--text); }
.arsenal .wpn span { color: var(--text3); font-size: 18px; line-height: 1; display: block; }

/* ---------- in-game HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 1; pointer-events: none; --tc: var(--hot); --tcl: var(--hot); --tcd: var(--hot-lo); }
#hud .btn, #hud .hud-wp, #hud .sug { pointer-events: auto; }
.hud-panel {
  background: var(--glass); margin: 2px;
  box-shadow: 0 -2px 0 rgba(98, 85, 101, .9), 0 2px 0 rgba(98, 85, 101, .9), -2px 0 0 rgba(98, 85, 101, .9), 2px 0 0 rgba(98, 85, 101, .9),
    inset 0 2px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .35);
}
.hud-tl { position: fixed; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: calc(100vw - 220px); }

/* weapon card: what you're holding; click it to open the weapon menu */
.hud-wp {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; min-width: 220px; border: 0; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: box-shadow .1s;
}
.hud-wp:hover:not(:disabled), .hud-wp:focus-visible { outline: none; box-shadow: 0 -2px 0 var(--gold), 0 2px 0 var(--gold), -2px 0 0 var(--gold), 2px 0 0 var(--gold), 0 0 18px rgba(249, 194, 43, .35); }
.hud-wp:disabled { cursor: default; }
.hud-wp:disabled kbd { visibility: hidden; }
.hw-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: rgba(0, 0, 0, .35); box-shadow: inset 0 -3px 0 var(--tcd); }
.hw-icon canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.hw-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.hw-name { font-size: 28px; line-height: 22px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-sub { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 20px; line-height: 16px; color: var(--text2); background: rgba(255, 255, 255, .07); padding: 1px 6px 2px; }
.chip.on { color: var(--ink); background: var(--gold); }
.chip.off { color: var(--text); background: var(--hot-lo); }
.hw-fuel { display: block; height: 6px; background: rgba(0, 0, 0, .5); }
.hw-fuel i { display: block; height: 100%; background: var(--gold-lo); box-shadow: 0 0 8px var(--gold-lo); }
.hud-wp > kbd { align-self: flex-start; margin: 0; }
/* off your turn just the icon of what you'll hold next: it opens the menu to look through your weapons */
.hud-wp.peek { min-width: 0; padding: 8px; gap: 8px; }
.hud-wp.peek .hw-text { display: none; }

/* suggested weapons: small boxes under the card, worth using from where the snail is (suggest.js), the best first and
   as many as fit before the minimap; a box's name and reason show under it while the pointer is on it */
.hud-sug { position: relative; margin: 0 2px; }
.sug-row { display: flex; gap: 8px; }
.sug {
  position: relative; flex: none; width: 52px; height: 52px; padding: 0; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); animation: msgIn .2s steps(3);
  box-shadow: 0 0 0 2px rgba(98, 85, 101, .9), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35);
}
.sug canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.sug:hover { outline: none; box-shadow: 0 0 0 2px var(--gold), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(249, 194, 43, .3); }
.sug.sel { box-shadow: 0 0 0 2px var(--tcl), inset 0 -3px 0 var(--tcd), 0 0 12px var(--tc); }
.sug .cnt { position: absolute; right: 2px; bottom: 3px; font-family: var(--head); font-size: 8px; line-height: 8px; font-style: normal; color: var(--text); text-shadow: 1px 1px 0 var(--bg0); }
.sug .arrow {
  width: 32px; height: 28px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM4 1h2v1H4zM0 2h7v1H0zM0 3h8v1H0zM0 4h7v1H0zM4 5h2v1H4zM4 6h1v1H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM4 1h2v1H4zM0 2h7v1H0zM0 3h8v1H0zM0 4h7v1H0zM4 5h2v1H4zM4 6h1v1H4z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.sug .arrow.l { transform: scaleX(-1); }
.sug-why {
  position: absolute; top: calc(100% + 8px); z-index: 1; white-space: nowrap; pointer-events: none;
  font-size: 20px; line-height: 18px; color: var(--text); background: var(--glass); padding: 5px 10px 7px;
  box-shadow: 0 0 0 2px rgba(98, 85, 101, .9), 0 6px 18px rgba(0, 0, 0, .35); animation: msgIn .12s steps(2);
}
.sug-why b { margin-right: 6px; }

.hud-tip, .hud-hint { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 22px; color: var(--text); text-shadow: 2px 0 0 var(--bg0), -2px 0 0 var(--bg0), 0 2px 0 var(--bg0), 0 -2px 0 var(--bg0); }
.hud-tip { padding-left: 4px; }
.hud-tip kbd, .hud-hint kbd { text-shadow: none; }
.hud-hint { justify-content: center; color: var(--text2); margin-bottom: 12px; animation: hintIn .4s steps(4); }
@keyframes hintIn { from { opacity: 0; transform: translateY(6px); } }

.hud-bottom { position: fixed; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; }
.hud-mid { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }

/* timer: whose turn it is and how long is left */
.hud-timer { display: flex; align-items: stretch; position: relative; min-width: 200px; max-width: 280px; }
.hud-timer > b {
  min-width: 72px; padding: 16px 8px;
  display: grid; place-items: center; background: var(--tcd);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .15), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 18px -2px var(--tc);
}
/* the digits are a pixel canvas (hud.js), scaled 3x without smoothing */
.hud-timer > b canvas { display: block; height: 24px; image-rendering: pixelated; image-rendering: crisp-edges; }
.ht-text { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 14px; min-width: 0; }
.ht-team { font-family: var(--head); font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--tcl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-who { font-size: 24px; line-height: 20px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-timer.low > b { background: var(--hot); animation: pulse .5s steps(2) infinite; }
.hud-timer.retreat > b { background: var(--hot-lo); }
.hud-timer.retreat .ht-who { color: var(--hot); }
@keyframes pulse { 50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .15), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 26px 2px var(--hot); } }
.ht-sd {
  position: absolute; left: -2px; bottom: calc(100% + 10px); white-space: nowrap;
  font-family: var(--head); font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text); background: var(--hot-lo); padding: 6px 8px; box-shadow: 0 0 16px rgba(240, 79, 120, .55);
  animation: blink 1.2s steps(2) infinite;
}

/* team health */
.hud-teams { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.hud-teams:empty { display: none; }
.ht-row { display: grid; grid-template-columns: 132px 168px 36px; align-items: center; gap: 10px; }
.ht-name { font-size: 20px; line-height: 16px; color: var(--cl); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-bar { position: relative; height: 12px; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.ht-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); box-shadow: inset 0 3px 0 var(--cl), inset 0 -3px 0 var(--cd); transition: width .6s steps(12); }
.ht-hp { font-family: var(--head); font-size: 8px; line-height: 8px; color: var(--text2); }
.ht-row.away .ht-name { color: var(--text3); }
.ht-row.cur .ht-name { color: var(--text); }
.ht-row.cur .ht-name::before { content: '▸ '; color: var(--cl); }
.ht-row.cur .ht-bar i { box-shadow: inset 0 3px 0 var(--cl), inset 0 -3px 0 var(--cd), 0 0 12px var(--c); }
.ht-row.cur .ht-hp { color: var(--text); }

/* wind */
.hud-wind { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.hw-label { font-family: var(--head); font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); text-align: center; }
/* the wind comes in ten steps each way: the bar is 20 whole steps wide and its fill a block per step, chevrons flowing
   through them the way it blows */
.hwind-bar { --step: 8px; position: relative; display: block; width: calc(var(--step) * 20); height: 12px; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.hwind-bar::after { content: ''; position: absolute; left: calc(50% - 1px); top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.hwind-bar i { --steps: repeating-linear-gradient(90deg, transparent 0 calc(var(--step) - 1px), rgba(0, 0, 0, .55) calc(var(--step) - 1px) var(--step));
  position: absolute; top: 2px; bottom: 2px; transition: width .4s steps(8); box-shadow: 0 0 10px rgba(77, 155, 230, .6); }
.hwind-bar i.r { left: 50%; background: var(--steps), repeating-linear-gradient(90deg, #8fd3ff 0 4px, #4d9be6 4px 8px); animation: flowR .5s steps(4) infinite; }
.hwind-bar i.l { right: 50%; background: var(--steps), repeating-linear-gradient(90deg, #4d9be6 0 4px, #8fd3ff 4px 8px); animation: flowL .5s steps(4) infinite; }
@keyframes flowR { to { background-position: 0 0, 8px 0; } }
@keyframes flowL { to { background-position: 0 0, -8px 0; } }

/* banners and messages, top centre */
.hud-top { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(92vw, 900px); text-align: center; }
#hud-banners, #hud-msgs { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.banner { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: bannerIn .35s steps(5); transition: opacity .3s; }
.banner b { font-family: var(--head); font-size: 24px; line-height: 24px; color: var(--c); letter-spacing: 2px;
  text-shadow: 3px 0 0 var(--bg0), -3px 0 0 var(--bg0), 0 3px 0 var(--bg0), 0 -3px 0 var(--bg0), 3px 6px 0 rgba(0, 0, 0, .5), 0 0 28px var(--c); }
.banner.big b { font-size: 40px; line-height: 40px; }
.banner span { font-size: 26px; color: var(--text); text-shadow: 2px 0 0 var(--bg0), -2px 0 0 var(--bg0), 0 2px 0 var(--bg0), 0 -2px 0 var(--bg0); }
.msg { font-size: 24px; line-height: 20px; color: var(--gold-hi); background: var(--glass); padding: 6px 14px 8px; box-shadow: 0 0 0 2px rgba(98, 85, 101, .9), 0 6px 18px rgba(0, 0, 0, .35); animation: msgIn .2s steps(3); transition: opacity .3s; }
.banner.out, .msg.out { opacity: 0; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-24px) scale(1.3); } }
@keyframes msgIn { from { opacity: 0; transform: translateY(-8px); } }

#hud-mini { position: fixed; box-shadow: 0 0 0 2px var(--bg0), 0 0 0 4px rgba(98, 85, 101, .9), 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; }
#hud-buttons { position: fixed; top: 80px; right: 14px; display: flex; gap: 8px; }
#hud-buttons .btn { --bg: var(--glass); }
.no-fs .fs-only { display: none; }

@media (max-width: 900px) {
  .ht-row { grid-template-columns: 124px 96px 32px; gap: 8px; }
  .hwind-bar { --step: 6px; }
  .hud-timer { min-width: 0; max-width: 232px; }
}
@media (max-width: 640px), (max-height: 480px) {
  .hud-tl { left: 10px; top: 10px; }
  .hud-bottom { left: 10px; right: 10px; bottom: 10px; }
  .hud-wp { min-width: 0; padding: 6px 10px 6px 6px; }
  .hud-wp.peek { padding: 6px; }
  .hw-icon { width: 40px; height: 40px; }
  .hw-icon canvas { width: 40px; height: 40px; }
  .hw-name { font-size: 24px; line-height: 18px; }
  .sug { width: 44px; height: 44px; }
  .sug canvas { width: 40px; height: 40px; }
  .sug .arrow { width: 24px; height: 21px; }
  .sug-why { font-size: 18px; }
  .hud-tip { font-size: 20px; }
  .ht-row { grid-template-columns: 72px 80px 28px; }
  .ht-name { font-size: 18px; }
  .hwind-bar { --step: 4px; }
  .hud-timer > b { min-width: 56px; padding: 12px 6px; }
  .hud-timer > b canvas { height: 16px; }
  .ht-text { display: none; }
  .banner b { font-size: 16px; line-height: 16px; }
  .banner.big b { font-size: 24px; line-height: 24px; }
}
/* a phone held upright: the timer, team health and wind can't all fit centred, so the health takes the room between
   the other two and its bars shrink to fit */
@media (max-width: 480px) {
  .hud-bottom { gap: 6px; }
  .hud-mid { position: static; transform: none; flex: 1 1 0; min-width: 0; }
  .hud-mid .hud-hint { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); }
  .hud-teams { width: 100%; padding: 8px; }
  .ht-row { grid-template-columns: minmax(0, 1fr) minmax(20px, 64px) 24px; gap: 6px; }
  .hud-wind { padding: 8px 8px 10px; }
  .hwind-bar { --step: 3px; }
}
@media (max-width: 360px) {
  .ht-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .ht-hp { display: none; }
}

/* ---------- weapon menu ---------- */
#weapons {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 15;
  width: min(880px, calc(100vw - 28px)); height: min(640px, calc(100vh - 28px));
  display: flex; flex-direction: column; padding: 16px 16px 10px;
  background: rgba(20, 14, 23, .96); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line),
    inset 0 3px 0 rgba(255, 255, 255, .05), 0 24px 64px rgba(0, 0, 0, .6);
  animation: popIn .14s steps(3);
}
@keyframes popIn { from { opacity: 0; transform: translate(-50%, -48%); } }
.wp-head { display: flex; align-items: center; gap: 12px; }
#wp-title { font-family: var(--head); font-size: 8px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28%; display: flex; align-items: center; gap: 10px; }
#wp-title::before { content: ''; width: 8px; height: 16px; flex: none; background: var(--gold); box-shadow: 0 0 12px rgba(249, 194, 43, .6); }
#wp-timer { font-family: var(--head); font-size: 8px; line-height: 8px; color: var(--ink); background: var(--text2); padding: 6px 8px; min-width: 3em; text-align: center; }
#wp-timer:empty { display: none; }
#wp-timer.low { background: var(--hot); color: var(--text); box-shadow: 0 0 14px rgba(240, 79, 120, .6); }
/* when the menu is only for looking (off your turn, or after your shot) a note says so, and shakes when a card is
   clicked anyway */
#wp-note { font-family: var(--head); font-size: 8px; line-height: 8px; color: var(--text2); background: var(--bg3); padding: 6px 8px; white-space: nowrap; flex: none; }
#wp-note:empty { display: none; }
#wp-note.nudge { animation: nudge .32s steps(1, end); }
@keyframes nudge {
  0%, 50% { transform: translateX(-3px); color: var(--text); background: var(--hot-lo); }
  25%, 75% { transform: translateX(3px); color: var(--text); background: var(--hot-lo); }
}
#weapons.look .wcard { cursor: default; }
#wp-search {
  flex: 1; min-width: 0; font-size: 24px; padding: 6px 12px 6px 38px; background-color: var(--bg0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2394879a' d='M1 0h3v1H1zM0 1h1v3H0zM4 1h1v3H4zM1 4h3v1H1zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 16px 16px;
}
#wp-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.wp-x { font-family: var(--body); font-size: 24px; line-height: 1; color: var(--text2); background: transparent; border: 0; width: 40px; height: 40px; cursor: pointer; flex: none; box-shadow: 0 0 0 2px var(--line); }
.wp-x:hover { color: var(--text); background: var(--hot-lo); box-shadow: 0 0 0 2px var(--hot); }
#wp-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 14px 2px 12px; scrollbar-width: none; flex: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
#wp-tabs::-webkit-scrollbar { display: none; }
.wtab {
  font-family: var(--body); font-size: 22px; line-height: 1; color: var(--text2); background: transparent; border: 0;
  padding: 5px 12px 7px; white-space: nowrap; cursor: pointer; flex: none; box-shadow: inset 0 0 0 2px var(--bg3);
}
.wtab:hover { color: var(--text); background: var(--bg3); }
.wtab.on { background: var(--gold); color: var(--ink); box-shadow: inset 0 -3px 0 var(--gold-lo), 0 0 14px rgba(249, 194, 43, .35); }
#wp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 240px; gap: 14px; }
#wp-grid {
  overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
  align-content: start; padding: 4px 8px 8px 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.wsec { grid-column: 1 / -1; font-family: var(--head); font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); margin: 14px 0 2px; display: flex; align-items: center; gap: 10px; }
.wsec::after { content: ''; flex: 1; height: 2px; background: var(--bg3); }
.wsec:first-child { margin-top: 2px; }
.wempty { grid-column: 1 / -1; color: var(--text3); font-size: 22px; padding: 24px 4px; }
.wcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px;
  background: var(--bg2); border: 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3);
  color: var(--text2); font-family: var(--body); font-size: 19px; cursor: pointer; transition: transform .06s, background-color .08s;
}
.wcard canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.wcard .wname { line-height: .85; text-align: center; min-height: 1.8em; display: flex; align-items: center; }
.wcard:hover, .wcard.cur { background: var(--bg3); color: var(--text); transform: translateY(-2px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--text2); }
.wcard.sel { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--gold), 0 0 16px rgba(249, 194, 43, .35); color: var(--text); }
.wcard.sel.cur, .wcard.sel:hover { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--gold-hi), 0 0 20px rgba(249, 194, 43, .5); }
.wcard.empty { opacity: .3; filter: grayscale(1); }
.wcard.locked { opacity: .55; }
.wcard.locked canvas { filter: grayscale(.8); }
.wbadge { position: absolute; top: 4px; font-family: var(--body); font-size: 17px; line-height: 1; padding: 1px 4px 2px; background: var(--bg0); }
.wbadge:empty { display: none; }
.wbadge.cnt { right: 4px; color: var(--gold-hi); }
.wbadge.lock { left: 4px; color: var(--hot); }
#wp-info {
  background: var(--bg1); padding: 18px 14px; overflow-y: auto; margin: 2px; box-shadow: 0 0 0 2px var(--bg3);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
#wp-big { width: 112px; height: 112px; flex: none; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(249, 194, 43, .14), transparent); }
#wp-big canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.wp-text { display: flex; flex-direction: column; gap: 8px; }
#wp-name { font-family: var(--head); font-size: 16px; line-height: 24px; color: var(--text); }
#wp-meta { font-size: 20px; color: var(--gold); }
#wp-meta.off { color: var(--hot); }
#wp-desc { margin: 0; font-size: 21px; line-height: 1.05; color: var(--text2); }
#wp-how { font-size: 19px; line-height: 1.05; color: var(--text3); }
.wp-foot { flex: none; margin-top: 8px; font-size: 18px; color: var(--text3); text-align: center; }
/* small or short screens: details become a strip under the cards */
@media (max-width: 700px), (max-height: 540px) {
  #weapons { height: calc(100vh - 16px); width: calc(100vw - 16px); padding: 10px 10px 8px; }
  #wp-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 8px; }
  #wp-info { flex-direction: row; text-align: left; align-items: center; padding: 6px 10px; max-height: 76px; }
  #wp-big, #wp-big canvas { width: 48px; height: 48px; }
  #wp-name { font-size: 8px; line-height: 16px; }
  #wp-desc { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #wp-tabs { padding: 8px 2px; }
  .wtab { font-size: 20px; padding: 3px 10px 5px; }
  #wp-search { font-size: 22px; padding-top: 3px; padding-bottom: 3px; }
  .wp-x { width: 34px; height: 34px; }
  #wp-how { display: none; }
  .wp-text { gap: 3px; }
  #wp-meta { font-size: 17px; }
  .wcard { font-size: 16px; padding: 6px 2px 4px; }
  .wcard canvas { width: 40px; height: 40px; }
  #wp-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .wp-foot { display: none; }
}
@media (pointer: coarse) { .wp-foot { display: none; } }

#chat { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(480px, 90vw); }
#chat input { width: 100%; background: var(--panel); }

/* ---------- pause / game over ---------- */
#go-title.won { color: var(--gold); text-shadow: 0 0 24px rgba(249, 194, 43, .55); }
#go-title.lost { color: var(--hot); text-shadow: 0 0 24px rgba(240, 79, 120, .55); }
#go-sub { color: var(--text2); }
#go-stats { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
#go-stats .st { display: flex; justify-content: space-between; background: var(--bg2); padding: 6px 12px 6px 16px; box-shadow: inset 6px 0 0 var(--c); }
#go-stats .st.out { opacity: .55; }
#go-stats .st span:last-child { color: var(--text2); }

#toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 25; display: none; text-align: center; max-width: 90vw;
  font-size: 24px; color: var(--text); background: var(--panel); padding: 10px 18px 12px;
  box-shadow: 0 0 0 2px var(--gold), 0 0 20px rgba(249, 194, 43, .3), 0 10px 28px rgba(0, 0, 0, .5);
}
#toast.show { display: block; animation: msgIn .2s steps(3); }

#netstatus {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 14px; max-width: 92vw;
  background: var(--panel); padding: 6px 8px 6px 16px; font-size: 22px;
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(249, 194, 43, .3), 0 8px 24px rgba(0, 0, 0, .5);
}
#netstatus span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--gold); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#loading {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--panel); padding: 22px 30px; font-family: var(--head); font-size: 8px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 18px 48px rgba(0, 0, 0, .55);
}
#loading .dig { display: flex; gap: 8px; }
#loading .dig i { width: 10px; height: 10px; background: var(--hot); animation: dig .9s steps(2) infinite; }
#loading .dig i:nth-child(2) { animation-delay: .3s; background: var(--gold); }
#loading .dig i:nth-child(3) { animation-delay: .6s; background: var(--sky); }
@keyframes dig { 50% { transform: translateY(-6px); } }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: auto 0 0 0; height: 0; pointer-events: none; }
#touch .tpad { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom)); pointer-events: auto; user-select: none; -webkit-user-select: none; }
#touch .tleft { left: 14px; display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3, 56px); gap: 4px; }
#touch .tright { right: 14px; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: flex-end; gap: 10px; width: 240px; }
.tbtn {
  font-family: var(--body); font-size: 22px; color: var(--text); background: var(--glass); border: 0; margin: 2px;
  box-shadow: 0 -2px 0 rgba(98, 85, 101, .9), 0 2px 0 rgba(98, 85, 101, .9), -2px 0 0 rgba(98, 85, 101, .9), 2px 0 0 rgba(98, 85, 101, .9), inset 0 -3px 0 rgba(0, 0, 0, .35);
  min-width: 56px; height: 56px; touch-action: none; -webkit-tap-highlight-color: transparent; padding: 0 10px; text-transform: uppercase;
}
.tbtn.on { background: var(--gold); color: var(--ink); }
.tbtn.tsmall { height: 44px; min-width: 52px; font-size: 20px; }
.tbtn.tfire {
  width: 92px; height: 92px; font-family: var(--head); font-size: 16px; color: var(--ink); background: var(--gold);
  clip-path: polygon(24% 0, 76% 0, 76% 8%, 92% 8%, 92% 24%, 100% 24%, 100% 76%, 92% 76%, 92% 92%, 76% 92%, 76% 100%, 24% 100%, 24% 92%, 8% 92%, 8% 76%, 0 76%, 0 24%, 8% 24%, 8% 8%, 24% 8%);
  box-shadow: inset 0 -6px 0 var(--gold-lo), inset 0 4px 0 var(--gold-hi);
}
.tbtn.tfire.on { background: var(--hot); color: var(--text); box-shadow: inset 0 -6px 0 var(--hot-lo); }
#touch .tu { grid-column: 2; grid-row: 1; }
#touch .tl { grid-column: 1; grid-row: 2; }
#touch .tr { grid-column: 3; grid-row: 2; }
#touch .td { grid-column: 2; grid-row: 3; }
#touch.idle .tpad { opacity: .35; }
#touch .tleft .tbtn { font-family: system-ui, sans-serif; font-size: 20px; line-height: 1; }
#touch.menu-open .tpad { display: none; }
@media (max-height: 480px) { #touch .tpad { bottom: calc(68px + env(safe-area-inset-bottom)); } }
#rotate-hint {
  display: none; position: fixed; left: 50%; top: 40%; transform: translateX(-50%); font-size: 24px; text-align: center; pointer-events: none;
  background: var(--panel); padding: 10px 16px; box-shadow: 0 0 0 2px var(--line); animation: fadeHint 6s forwards;
}
@keyframes fadeHint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (orientation: portrait) { #touch:not(.hidden) #rotate-hint { display: block; } }

@media (max-width: 560px) {
  .logo { margin-bottom: 28px; }
  #logo { width: 304px; height: 88px; }
  .window { padding: 16px; }
  .win-head h2 { font-size: 8px; line-height: 16px; }
  .opts { grid-template-columns: 1fr; }
  .team .worm-names { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 640px) {
  .logo { margin-bottom: 24px; }
  .credit { margin-top: 20px; }
  .menu-buttons { gap: 10px; }
  .menu-buttons .btn.big { padding-top: 13px; padding-bottom: 12px; }
}
@media (max-height: 440px) {
  .logo { margin-bottom: 14px; }
  #logo { width: 228px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- training coach ---------- */
/* Down the right under the minimap and the menu buttons (training.js sets --top): the lesson to do next, a word on
   each shot, the weapon in hand, and the training ground's own buttons. */
.coach {
  position: fixed; right: 14px; top: var(--top, 140px); width: 300px; max-height: calc(100vh - var(--top, 140px) - 88px);
  display: flex; flex-direction: column; pointer-events: auto; background: var(--glass); margin: 2px;
  box-shadow: 0 -2px 0 rgba(98, 85, 101, .9), 0 2px 0 rgba(98, 85, 101, .9), -2px 0 0 rgba(98, 85, 101, .9), 2px 0 0 rgba(98, 85, 101, .9),
    inset 0 2px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .35);
}
.co-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-bottom: 2px solid var(--bg3); flex: none; }
.co-head > b { flex: 1; display: flex; align-items: center; gap: 10px; font-family: var(--head); font-size: 8px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--text); }
.co-head > b::before { content: ''; width: 8px; height: 16px; background: var(--gold); box-shadow: 0 0 12px rgba(249, 194, 43, .6); }
.co-prog { font-family: var(--head); font-size: 8px; line-height: 8px; color: var(--ink); background: var(--gold); padding: 4px 5px 3px; }
.co-now { display: none; font-size: 20px; line-height: 16px; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.coach.folded .co-head > b { flex: none; }
.coach.folded .co-now { display: block; flex: 1; }
.coach:not(.placed) { visibility: hidden; } /* until it has measured where the menu buttons are */
.coach.folded .co-head { border-bottom: 0; }
.coach.folded .co-body, .coach.folded .co-tools { display: none; }
.co-body {
  min-height: 0; overflow-y: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.co-hello { margin: 0 0 10px; font-size: 20px; line-height: 1.05; color: var(--text2); }
.co-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--head); font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
.co-pips { display: flex; gap: 3px; }
.co-pips i { width: 6px; height: 6px; background: rgba(255, 255, 255, .2); }
.co-pips i.on { background: var(--gold); }
.co-pips i.cur { background: var(--text); animation: blink 1.2s steps(2) infinite; }
.co-title { display: block; margin-top: 8px; font-size: 28px; line-height: 24px; color: var(--gold-hi); }
.co-text { margin: 4px 0 0; font-size: 21px; line-height: 1.05; color: var(--text); }
.co-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.co-acts .btn, .co-btns .btn { margin: 2px; }
.co-again { margin: 6px 2px 0; align-self: flex-start; }
/* a word on each shot and the first-time tips, newest first, each with its colour down the left */
.co-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.co-news:empty { display: none; }
.co-news li { position: relative; font-size: 20px; line-height: 1.05; color: var(--text); background: rgba(0, 0, 0, .3); padding: 5px 8px 6px 14px; animation: msgIn .2s steps(3); }
.co-news li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line2); }
.co-news li.good::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.co-news li.done::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.co-news li.tip::before { background: var(--sky); }
.co-news li.old { opacity: .6; }
/* the weapon in hand */
.co-wp { padding-top: 10px; border-top: 2px solid var(--bg3); }
.co-wp-head { display: flex; align-items: center; gap: 10px; }
.co-wp-head canvas { width: 48px; height: 48px; flex: none; image-rendering: pixelated; background: rgba(0, 0, 0, .35); box-shadow: inset 0 -3px 0 var(--tcd); }
.co-wp-head b { display: block; font-size: 26px; line-height: 20px; color: var(--text); }
.co-wp-head small { display: block; margin-top: 4px; font-size: 18px; line-height: 1; color: var(--text3); }
.co-tip { margin: 8px 0 0; font-size: 20px; line-height: 1.05; color: var(--text2); }
.co-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.co-chips .chip { font-size: 18px; }
.co-tools { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-top: 2px solid var(--bg3); }
.co-btns { display: flex; flex-wrap: wrap; gap: 2px; }
.co-btns .btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
.co-where { font-size: 18px; line-height: 1; color: var(--text3); }
.co-where:empty { display: none; }
/* the lessons teach the controls, so the first-time hint at the bottom isn't needed */
#hud.training #hud-hint { display: none; }
@media (min-width: 1280px) { .coach { width: 344px; } }
@media (max-width: 900px), (max-height: 640px) {
  .coach { width: 272px; }
  .co-hello { display: none; }
  .co-title { font-size: 24px; line-height: 20px; }
  .co-text, .co-tip, .co-news li { font-size: 19px; }
}
/* phones: a slimmer card at the top, between the weapon card and the minimap */
@media (max-width: 640px), (max-height: 480px) {
  .coach { right: auto; left: 50%; top: 10px; transform: translateX(-50%); width: min(320px, 46vw); max-height: calc(100vh - 110px); }
  .co-wp, .co-where { display: none; }
  .co-tools { padding: 6px 8px 8px; }
  .co-btns { flex-wrap: nowrap; }
  .co-btns .btn { flex: 1 1 0; font-size: 18px; padding: 3px 4px 4px; }
}