:root {
  --sump: #15111D;
  --rim: #FFA23F;
  --s0: #EFE8D8;
  --s2: #9DA394;
  --loot: #F0FF5A;
  --white: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #E7E2D6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--s0); touch-action: none; -webkit-user-select: none; user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; font-size: 15px; }
.panel { position: absolute; background: rgba(21, 17, 29, 0.7); padding: 8px 12px; border-radius: 4px; display: flex; gap: 14px; align-items: center; }
#hud-tl { top: 12px; left: 12px; font-size: 18px; font-variant-numeric: tabular-nums; gap: 0; white-space: nowrap; }
#hud-tl span + span::before { content: '·'; color: var(--s2); margin: 0 10px; }
/* your kill count: the number pulses loot-chartreuse for a moment each time it goes up */
#hud-kills { display: inline-block; transition: color 250ms, transform 250ms; }
#hud-kills.up { color: var(--loot); transform: scale(1.18); transition: color 60ms, transform 60ms; }
#hud-tc { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); text-align: center; }
#hud-center { font-size: 48px; font-weight: 700; letter-spacing: 0.08em; color: var(--s0); text-shadow: 0 2px 8px rgba(21,17,29,0.8); min-height: 56px; }
#hud-feed { font-size: 14px; background: rgba(21, 17, 29, 0.55); border-radius: 4px; padding: 0 10px; }
#hud-feed div { padding: 3px 0; }
#hud-feed:empty { display: none; }
/* top-right: minimap (whole map, north up, islands shaded by height, you as an arrow) over two plain lines */
#hud-tr { top: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; }
#hud-mini { display: block; width: 160px; height: 160px; border-radius: 3px; image-rendering: pixelated; }
#hud-water, #hud-island { font-size: 13px; line-height: 1.25; color: var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
#hud-water { margin-top: 2px; }
#hud-island.warn { color: var(--rim); }
#hud-island.bad { color: #FF5A3C; }
#hud-bl { bottom: 12px; left: 12px; }
#hud-hp { display: flex; flex-direction: column; gap: 3px; align-items: center; }
#hud-hp .cube { background: var(--s0); border: 2px solid var(--sump); }
#hud-hp .cap { width: 24px; height: 7px; }
#hud-hp .core { width: 20px; height: 20px; }
#hud-hp .keel { width: 15px; height: 15px; background: #6F7E7B; }
#hud-hp .cube.lost { background: #2A2833; opacity: 0.4; }
#hud-fps { top: 60px; left: 12px; font-size: 12px; padding: 3px 8px; color: var(--s2); font-variant-numeric: tabular-nums; }
#hud-fps[hidden] { display: none; }

/* hotbar: six sump-dark tiles along the bottom centre. Corner number, CSS-drawn icon, item name, amber count.
   The selected tile carries the loot-chartreuse outline; empty tiles fade back. Tiles take taps/clicks. */
#hud-hotbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; }
.hslot { position: relative; width: 58px; height: 58px; border-radius: 4px; background: rgba(21, 17, 29, 0.72); border: 2px solid rgba(239, 232, 216, 0.22); color: var(--s0); cursor: pointer; transition: border-color 80ms, opacity 120ms; }
.hslot .n { position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 700; color: var(--s2); font-variant-numeric: tabular-nums; }
.hslot .nm { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; color: var(--s0); white-space: nowrap; overflow: hidden; }
.hslot .ct { position: absolute; top: 2px; right: 5px; font-size: 12px; font-weight: 700; color: var(--rim); font-variant-numeric: tabular-nums; }
.hslot.empty { opacity: 0.35; }
.hslot.empty .ct, .hslot.empty .nm { display: none; }
.hslot.out .ct { color: var(--s2); }
.hslot.out .ic { opacity: 0.4; }
.hslot.sel { border-color: var(--loot); background: rgba(21, 17, 29, 0.88); box-shadow: 0 0 0 1px rgba(21, 17, 29, 0.8), 0 0 10px rgba(240, 255, 90, 0.35); }
.hslot.sel .n { color: var(--loot); }
.hslot:active { background: rgba(239, 232, 216, 0.18); }
/* icons: one .ic box per tile, drawn with ::before / ::after so no image files are needed */
.ic { position: absolute; left: 50%; top: 50%; width: 26px; height: 22px; margin: -13px 0 0 -13px; }
.ic::before, .ic::after { content: ''; position: absolute; }
.ic-chipper::before { left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #FF5A3C; box-shadow: 8px -4px 0 #FF5A3C, 15px 1px 0 #FF5A3C; }
.ic-splinter::before { left: 1px; top: 10px; width: 24px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--rim), var(--white) 55%, var(--white)); transform: rotate(-32deg); }
.ic-mallet::before { left: 4px; top: 2px; width: 18px; height: 9px; border-radius: 2px; background: #CBC5B2; border: 1px solid var(--sump); }
.ic-mallet::after { left: 11px; top: 11px; width: 4px; height: 11px; background: #6A5A4A; }
.ic-ballast::before { left: 6px; top: 4px; width: 14px; height: 14px; background: #3B3F4A; border: 1px solid var(--s2); box-shadow: inset -3px -3px 0 rgba(21, 17, 29, 0.6); }
.ic-float::before { left: 3px; top: 7px; width: 20px; height: 9px; border-radius: 5px; background: #3CF5A8; }
.ic-float::after { left: 9px; top: 3px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: var(--s0); }
/* lobby toys: an amber bow with a chalk string; a mint fan hub with two blades; a mint coil on a chalk plate; an
   amber cone throwing band-coloured squares */
.ic-bow::before { left: 4px; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; border-left-color: var(--rim); }
.ic-bow::after { left: 13px; top: 2px; width: 2px; height: 18px; background: var(--s0); }
.ic-gust::before { left: 10px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #3CF5A8; }
.ic-gust::after { left: 4px; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--s0); border-bottom-color: var(--s0); transform: rotate(30deg); }
.ic-spring::before { left: 6px; top: 1px; width: 14px; height: 17px; border-radius: 3px; background: repeating-linear-gradient(-30deg, #3CF5A8 0 3px, transparent 3px 6px); }
.ic-spring::after { left: 3px; top: 18px; width: 20px; height: 3px; border-radius: 1px; background: var(--s0); }
.ic-popper::before { left: 6px; top: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 14px solid var(--rim); transform: rotate(-35deg); }
.ic-popper::after { left: 15px; top: 2px; width: 4px; height: 4px; border-radius: 1px; background: #38B6FF; box-shadow: 6px 3px 0 #FFD23C, -3px 6px 0 #FF7ACB, 4px -1px 0 #3CF5A8; }
/* the lobby island: no health bar and no kill count; the centre line is the match countdown, sized to fit */
body.lobby #hud-bl, body.lobby #hud-kills { display: none; }
body.lobby #hud-center { font-size: 32px; letter-spacing: 0.1em; }

/* reticle */
#reticle { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid var(--white); border-radius: 50%; }
#hud-charge { position: absolute; left: -12px; top: -12px; width: 28px; height: 28px; border-radius: 50%; display: none; -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px); mask: radial-gradient(circle, transparent 10px, #000 11px); }
#hud-hit { position: absolute; left: -10px; top: -18px; width: 24px; text-align: center; font-size: 26px; line-height: 24px; color: var(--white); display: none; font-weight: 700; }
#hud-dmg { position: absolute; left: 1px; top: -22px; width: 2px; height: 10px; background: var(--rim); transform-origin: 1px 26px; display: none; }
#hud-map-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; background: rgba(21,17,29,0.7); padding: 8px; border-radius: 4px; }
#hud-map { display: block; width: 256px; height: 256px; image-rendering: pixelated; }

/* cards */
/* every card scrolls when its body is taller than the viewport (short landscape phones); margin:auto keeps
   the body centred whenever it fits */
.card { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; background: rgba(21, 17, 29, 0.72); z-index: 10; }
.card-body { text-align: center; max-width: 640px; padding: 24px 16px; margin: auto; width: 100%; }
.card h1 { font-size: 64px; letter-spacing: 0.2em; margin: 0 0 8px; }
/* main menu title: the letters ride a slow swell like cubes afloat (a wave runs left to right), over a shimmering
   amber waterline. Delays come from nth-child because the page's CSP blocks inline styles. */
.card h1.bob { position: relative; padding-bottom: 10px; }
.bob span { display: inline-block; animation: bob 3.4s ease-in-out infinite; }
.bob span:nth-child(2) { animation-delay: -0.3s; } .bob span:nth-child(3) { animation-delay: -0.6s; }
.bob span:nth-child(4) { animation-delay: -0.9s; } .bob span:nth-child(5) { animation-delay: -1.2s; }
.bob span:nth-child(6) { animation-delay: -1.5s; } .bob span:nth-child(7) { animation-delay: -1.8s; }
.bob span:nth-child(8) { animation-delay: -2.1s; } .bob span:nth-child(9) { animation-delay: -2.4s; }
.bob::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--rim) 30%, #FFD9A8 50%, var(--rim) 70%, transparent) 0 0 / 200% 100%;
  opacity: 0.8; animation: waterline 5s linear infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes waterline { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .bob span, .bob::after { animation: none; } }
.card h2 { font-size: 40px; letter-spacing: 0.1em; margin: 0 0 8px; }
.tag { font-size: 18px; margin: 0 0 16px; color: var(--s0); }
.help { font-size: 13px; color: var(--s2); margin: 6px 0; line-height: 1.5; }
.cta { font: inherit; font-size: 22px; font-weight: 700; letter-spacing: 0.15em; padding: 14px 40px; margin: 14px 0; background: var(--loot); color: var(--sump); border: 0; border-radius: 4px; cursor: pointer; }
.cta:active { transform: translateY(1px); }
.name-input { display: block; margin: 18px auto 0; width: 220px; font: inherit; font-size: 18px; text-align: center; padding: 10px 12px; background: rgba(239, 232, 216, 0.08); color: var(--s0); border: 1px solid rgba(239, 232, 216, 0.35); border-radius: 4px; outline: none; user-select: text; -webkit-user-select: text; }
.name-input:focus { border-color: var(--loot); }
.name-input::placeholder { color: rgba(239, 232, 216, 0.45); }
#landscape-note { display: none; color: var(--rim); }
#menu-note { color: var(--rim); }
#menu-note:empty { display: none; }
/* queue card: one quiet line while the server drops this client onto the island */
.count { font-size: 56px; font-weight: 700; letter-spacing: 0.1em; margin: 8px 0 12px; color: var(--s0); font-variant-numeric: tabular-nums; }
.count.small { font-size: 20px; letter-spacing: 0.2em; color: var(--s2); }
/* the pause card on the island: LEAVE LOBBY leads (screens.js swaps the labels and the .cta) */
#card-pause.lobby #btn-quit { order: -1; }
/* mid-match reconnect note, under the top HUD */
#reconnect { position: fixed; left: 50%; top: 68px; transform: translateX(-50%); display: none; padding: 5px 12px; background: rgba(21, 17, 29, 0.7); border-radius: 4px; font-size: 13px; color: var(--rim); z-index: 7; }
.touch-only, .row.touch-only, .rows.touch-only { display: none; }
body.touch .touch-only { display: block; }
body.touch .row.touch-only, body.touch .rows.touch-only { display: flex; }

/* menus: a column of buttons under the wordmark; PLAY / RESUME keep the loot-chartreuse .cta */
.menu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0; }
.menu .cta { margin: 8px 0 6px; min-width: 240px; }
.mbtn { font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; padding: 12px 28px; min-width: 240px; min-height: 44px; background: rgba(21, 17, 29, 0.85); color: var(--s0); border: 1px solid rgba(239, 232, 216, 0.35); border-radius: 4px; cursor: pointer; }
.mbtn:hover { border-color: var(--s0); }
.mbtn:active { transform: translateY(1px); }
.mbtn.small { font-size: 13px; padding: 9px 18px; min-width: 0; margin-top: 12px; }
.mbtn.back { min-width: 0; padding: 9px 16px; font-size: 13px; }
.cta:focus-visible, .mbtn:focus-visible, .name-input:focus-visible, .row:focus-visible, .seg button:focus-visible, input:focus-visible { outline: 3px solid var(--rim); outline-offset: 2px; }

/* scrolling screens (settings, how to play): pinned Back bar, one column, scroll instead of clip */
.card-body.wide { max-width: 720px; text-align: left; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; }
.bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 12px 0; background: rgba(21, 17, 29, 0.92); }
.bar h2 { font-size: 26px; margin: 0; }
section { margin: 18px 0 8px; }
section h3 { font-size: 14px; letter-spacing: 0.2em; color: var(--rim); margin: 0 0 8px; border-bottom: 1px solid rgba(255, 162, 63, 0.35); padding-bottom: 6px; }
.rows { display: flex; flex-direction: column; gap: 4px; }
.rows.fixed { margin-top: 4px; opacity: 0.7; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 10px; background: rgba(21, 17, 29, 0.55); border-radius: 4px; border: 1px solid transparent; font-size: 15px; }
.row > span:first-child { flex: 1; }
.row.bind { cursor: pointer; }
.row.bind:hover { border-color: rgba(239, 232, 216, 0.35); }
.row.bind.listening { border-color: var(--loot); background: rgba(240, 255, 90, 0.12); }
.row.bind.listening .key { color: var(--loot); }
.key { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--s0); background: rgba(239, 232, 216, 0.12); border: 1px solid rgba(239, 232, 216, 0.3); border-radius: 3px; padding: 4px 10px; white-space: nowrap; }
.key.none { color: var(--rim); border-color: var(--rim); }
.rows .row .key + span { flex: 2; color: var(--s2); }
.ctl { display: flex; align-items: center; gap: 10px; flex: 1.2; }
.ctl input[type=range] { flex: 1; min-width: 80px; accent-color: var(--loot); }
.ctl output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--s2); }
.row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--loot); }
.seg { display: flex; gap: 4px; }
.seg button { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 8px 12px; min-height: 36px; background: transparent; color: var(--s2); border: 1px solid rgba(239, 232, 216, 0.3); border-radius: 3px; cursor: pointer; }
.seg button[aria-checked=true] { background: var(--s0); color: var(--sump); border-color: var(--s0); }
.rules { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.rules li { margin: 4px 0; }

/* spectating (your Tor sank, the match plays on): a slim sump-dark bar along the bottom with two small buttons.
   The play-only HUD (hotbar, health, reticle, touch controls) steps aside so the bar has the bottom edge. */
#spec { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; max-width: calc(100% - 32px); background: rgba(21, 17, 29, 0.82); border: 1px solid rgba(239, 232, 216, 0.25); border-radius: 4px; z-index: 5; }
body.spec #spec { display: flex; }
body.spec #hud-hotbar, body.spec #hud-bl, body.spec #reticle, body.spec #touch, body.spec #hud-fps,
body.sunk #hud-hotbar, body.sunk #hud-bl, body.sunk #reticle, body.sunk #touch, body.sunk #hud-fps,
body.ending #reticle, body.ending #touch { display: none; }
body.menu #hud, body.menu #reticle, body.menu #touch { display: none; }
#spec-text { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--s0); white-space: nowrap; margin-right: 6px; }
#spec-text b { color: var(--rim); }
.mbtn.tiny { font-size: 12px; padding: 0 14px; min-width: 0; min-height: 40px; }
/* spectating: who the camera follows, one row above the banner, with switch buttons either side */
#spec-watch { position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: none; align-items: center; gap: 10px; padding: 6px; max-width: calc(100% - 32px); background: rgba(21, 17, 29, 0.82); border: 1px solid rgba(239, 232, 216, 0.25); border-radius: 4px; z-index: 5; }
body.spec #spec-watch { display: flex; }
body.ending #spec-watch, body.nowatch #spec-watch { display: none; }
#spec-watch-mid { display: flex; flex-direction: column; align-items: center; min-width: 150px; line-height: 1.25; }
#spec-name { font-size: 16px; color: var(--rim); letter-spacing: 0.04em; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-small { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: var(--s2); }
body.touch #spec-hint { display: none; }
/* match results: a sump-dark panel over an amber seam in the middle of the live scene. Winner line, the
   top-kills table (your row lit, an extra separated row when you are below the top five), two buttons and the
   countdown to the main menu. Scrolls on short screens instead of clipping. */
#result { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; gap: 10px; width: 400px; max-width: calc(100% - 32px); max-height: calc(100% - 24px); overflow-y: auto; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(21, 17, 29, 0.88); border-top: 2px solid var(--rim); border-radius: 4px; z-index: 6; text-align: center; touch-action: pan-y; }
#result.on { display: flex; }
#result:focus { outline: none; } /* the panel takes focus when it opens (see screens.js); the buttons keep their rings */
#result-title { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--rim); }
#result-text { font-size: 22px; font-weight: 700; letter-spacing: 0.08em; color: var(--s0); line-height: 1.25; }
#result-text b { color: var(--loot); }
#result.won #result-text { color: var(--loot); }
#result-sub { font-size: 12px; letter-spacing: 0.2em; color: var(--s2); border-bottom: 1px solid rgba(255, 162, 63, 0.35); padding-bottom: 5px; margin-top: 4px; text-align: left; }
#result-rows { display: flex; flex-direction: column; gap: 3px; }
#result-rows .rrow { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 10px; background: rgba(239, 232, 216, 0.06); border: 1px solid transparent; border-radius: 4px; font-size: 15px; font-variant-numeric: tabular-nums; text-align: left; }
#result-rows .rrow .pl { width: 34px; font-weight: 700; color: var(--s2); }
#result-rows .rrow .nm { flex: 1; font-weight: 700; color: var(--s0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#result-rows .rrow .ks { color: var(--s2); white-space: nowrap; }
#result-rows .rrow.me { border-color: var(--loot); background: rgba(240, 255, 90, 0.1); }
#result-rows .rrow.me .pl, #result-rows .rrow.me .ks { color: var(--loot); }
#result-rows .rrow.extra { margin-top: 8px; position: relative; }
#result-rows .rrow.extra::before { content: ''; position: absolute; left: 10px; right: 10px; top: -6px; border-top: 1px dashed rgba(239, 232, 216, 0.3); }
#result-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
#result-btns .cta, #result-btns .mbtn { margin: 0; min-width: 0; flex: 1 1 150px; font-size: 15px; padding: 12px 16px; }
#result-count { margin: 0; }
#result-count:empty { display: none; }
#last-match { color: var(--s0); margin: -6px 0 6px; }
#last-match:empty { display: none; }
#last-match b { color: var(--rim); }

/* touch controls */
#touch { position: fixed; inset: 0; display: none; pointer-events: none; }
body.touch #touch { display: block; }
#stick { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(239,232,216,0.5); display: none; }
#stick-knob { position: absolute; left: 35px; top: 35px; width: 46px; height: 46px; border-radius: 50%; background: rgba(239,232,216,0.6); }
.tbtn { pointer-events: auto; font: inherit; font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: var(--s0); background: rgba(21,17,29,0.6); border: 2px solid rgba(239,232,216,0.45); border-radius: 50%; touch-action: none; }
.tbtn:active { background: rgba(239,232,216,0.35); }
.tbtn.big { width: 72px; height: 72px; }
.tbtn.mid { width: 56px; height: 56px; }
.tbtn.small { width: 44px; height: 44px; font-size: 10px; border-radius: 8px; }
/* action buttons: a 2x2 cluster (DASH / USE over JUMP / FIRE) so the hotbar keeps the bottom centre clear */
#touch-br { position: absolute; right: 16px; bottom: 24px; display: grid; grid-template-columns: 56px 72px; gap: 10px; align-items: end; justify-items: end; }
#touch-tr { position: absolute; right: 16px; top: 100px; display: flex; flex-direction: column; gap: 10px; }
body.touch #hud-tr { top: 12px; right: 70px; }
body.touch #hud-hotbar { gap: 4px; }
body.touch .hslot { width: 46px; height: 46px; }
body.touch .hslot .nm { font-size: 7px; bottom: 3px; }
body.touch .hslot .n { top: 2px; left: 4px; }
body.touch .hslot .ct { top: 1px; right: 4px; font-size: 11px; }

@media (max-width: 520px) {
  .card h1 { font-size: 40px; letter-spacing: 0.12em; }
  .card h2 { font-size: 26px; }
  .tag { font-size: 15px; }
  .card-body { padding: 16px; }
  #result-text { font-size: 17px; }
  #result { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  #result-rows .rrow { font-size: 13px; min-height: 28px; }
  /* narrow phone: the top-left panel stacks its three lines so it never runs into the minimap (a one-line
     '16 / 16 · 0:00 · 10 kills' would reach x 195 at 360px, past the minimap panel's left edge at 174) */
  #hud-tl { font-size: 13px; line-height: 1.3; padding: 6px 8px; flex-direction: column; align-items: flex-start; }
  #hud-tl span + span::before { content: none; margin: 0; }
  body.lobby #hud-center { font-size: 20px; }
  /* the kill feed clips long names instead of running under the side panels */
  #hud-tc { max-width: calc(100% - 24px); }
  #hud-feed div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #spec { gap: 6px; padding: 6px 6px 6px 10px; }
  #spec-text { font-size: 13px; }
  /* portrait phone: the hotbar sits above the action cluster instead of beside it, and the health panel one
     row above that (the 296px hotbar reaches x 32-59 on 360-414px screens, right under the panel at x 12-60) */
  body.touch #hud-hotbar { bottom: 176px; }
  body.touch #hud-bl { bottom: 232px; }
  /* phone: a smaller minimap so the panel clears the MAP / PAUSE buttons beside it */
  #hud-tr { padding: 6px; gap: 3px; }
  #hud-mini { width: 104px; height: 104px; }
  #hud-water, #hud-island { font-size: 11px; }
}
/* narrow landscape phone (521-610px wide, e.g. 568x320): the centred hotbar would run under the JUMP button,
   so it shrinks a step and sits left of the action cluster instead */
@media (max-height: 480px) and (max-width: 610px) {
  body.touch #hud-hotbar { left: auto; right: 170px; transform: none; gap: 3px; }
  body.touch .hslot { width: 40px; height: 40px; }
}
/* landscape phone: same compact minimap so it clears the hotbar row */
@media (max-height: 480px) {
  #hud-tr { padding: 6px; gap: 3px; }
  #hud-mini { width: 104px; height: 104px; }
  #hud-water, #hud-island { font-size: 11px; }
}