/* Morterra v2 UI, dressed in v1's look (v1 client/main.css): Hammersmith One everywhere with a 1px
   black text shadow, beige (#ddc) start screen with the logo and an orange "Play" button, and in-game
   windows, buttons and slots as flat translucent black (rgba(0,0,0,0.3)) boxes with 4px corners.
   Vitals are v1's green-on-red bars; the selected toolbar slot is v1's blue weapon slot. */
@font-face { font-family: "Hammersmith One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/hammersmith-one-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hammersmith One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/hammersmith-one-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Edo"; font-display: swap; src: url(/assets/fonts/edosz.ttf) format("truetype"); }
@font-face { font-family: "GS"; font-display: swap; src: url(/assets/fonts/GS.otf) format("opentype"); }

:root {
  --font: "Hammersmith One", "Trebuchet MS", system-ui, sans-serif;
  --shadow: 1px 1px #000;
  --r: 4px;
  --box: rgba(0, 0, 0, 0.3);          /* v1 .window / .inv / .options */
  --box-hover: rgba(0, 0, 0, 0.4);
  --box-strong: rgba(0, 0, 0, 0.6);   /* v1 .active tab, map backdrop */
  --panel: rgba(0, 0, 0, 0.55);       /* windows over the 3D scene: v1 used 0.3; darker so text stays readable over bright terrain */
  --text: #fff;
  --muted: #ccc;
  --beige: #ddc;
  --tan: #dca;
  --brown: #642;
  --ink: #3c3c3c;
  --orange: #f9ae1a;
  --orange-hover: #c68f2b;
  --green: #5b3;
  --green-hover: #593;
  --red: #d40;
  --red-hover: #d20;
  --blue: rgba(0, 0, 255, 0.3);       /* v1 button.weapon */
}

/* Behind the game's view: the theme's dark ink, never the start screen's beige. A frame the graphics can't draw (a lost
   WebGL context, a blank first frame) shows this dark neutral instead of flashing near-white. The start screen keeps its
   beige on its own backing (#menu::before). */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); font: 14px/1.4 var(--font); letter-spacing: 0.6px; color: var(--text); text-shadow: var(--shadow); }
button, input, select, textarea { font-family: var(--font); letter-spacing: 0.6px; }
[hidden] { display: none !important; }
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
input[type=checkbox] { accent-color: var(--green); }
input[type=range] { accent-color: var(--orange); }
option { background: #333; color: #fff; text-shadow: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.35); border-radius: var(--r); }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.5); }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: var(--ink); }
/* The graphics were lost (ui/graphicsNotice.js): the same dark over the view, the note in the middle. Below the HUD
   (z-index 2), chat and windows, which keep working; above the canvas, name tags and crosshair. */
.gfx-notice { z-index: 1; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); }
.gfx-notice-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 14px 20px; border-radius: var(--r); background: rgba(0, 0, 0, 0.35); font-size: 20px; text-align: center; }
.gfx-notice-box p { margin: 0; }
.gfx-notice-box button { border: 0; border-radius: var(--r); padding: 8px 16px; background: var(--orange); color: #fff; text-shadow: var(--shadow); font-size: 15px; cursor: pointer; }
.gfx-notice-box button:hover { background: var(--orange-hover); }
/* Stuck (no graphics after a while): a window over everything, still dark, its Reload button reachable by mouse and pad. */
.gfx-notice.overlay { z-index: 8; background: var(--ink); padding: 0; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; padding: 1px 6px; border-radius: var(--r); background: var(--box); color: #fff; font-size: 13px; white-space: nowrap; will-change: transform; }
#crosshair { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 2px #000; pointer-events: none; }
#debug { position: fixed; right: 8px; top: 172px; z-index: 2; margin: 0; padding: 6px 8px; background: var(--box); border-radius: var(--r); font: 12px/1.35 ui-monospace, Consolas, monospace; letter-spacing: 0; color: #fff; pointer-events: none; white-space: pre; }

/* ---- Windows (v1 .window / #canvasCover) ---------------------------------------------------- */
.overlay { z-index: 5; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--box); padding: 16px; }
.panel { min-width: 260px; max-width: 360px; width: 100%; padding: 16px; border-radius: var(--r); background: var(--panel); box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.panel h1 { margin: 0 0 4px; text-align: center; font-size: 28px; font-weight: normal; }
.panel h2 { margin: 0; text-align: center; font-size: 22px; font-weight: normal; }
.panel label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text); }
.panel select, .panel button { font-size: 15px; padding: 8px 10px; border-radius: var(--r); border: none; background: var(--box); color: #fff; text-shadow: var(--shadow); cursor: pointer; }
.panel select:hover { background: var(--box-hover); }
/* Primary action: v1 "Play Now" / account buttons. */
.panel button { background: var(--orange); }
.panel button:hover { background: var(--orange-hover); }
.panel button.secondary { background: var(--box); }
.panel button.secondary:hover { background: var(--box-hover); }
.panel button:disabled { opacity: 0.5; cursor: default; }
.panel button:disabled:hover { background: var(--orange); }
.panel button.secondary:disabled:hover { background: var(--box); }
#status { min-height: 1.4em; margin: 0; text-align: center; color: var(--muted); }
/* v1 input.accountInput: plain white field. */
.panel input:not([type=checkbox]):not([type=range]) { font-size: 16px; padding: 8px 10px; border-radius: var(--r); border: none; background: #fff; color: #222; text-shadow: none; letter-spacing: 0; }
.panel label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.panel button.link { padding: 0; border: none; background: none; color: var(--orange); text-decoration: underline; }
.panel button.link:hover { background: none; color: #ffc85a; }
.panel a { color: var(--orange); }
.panel a.warn { color: #ff0; }
.account-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; min-height: 1.4em; font-size: 14px; color: var(--muted); }
.auth-modal { z-index: 30; }
.auth-modal .panel { position: relative; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.panel .modal-close { position: absolute; right: 6px; top: 4px; padding: 0 8px; border: none; background: none; font-size: 24px; color: #fff; }
.panel .modal-close:hover { background: none; color: var(--red); }
.form-error, .form-ok { min-height: 1.2em; margin: 0; text-align: center; font-size: 14px; color: #ff6b4f; }
.form-ok { color: #7d5; }
.form-note { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.form-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; }

/* ---- Start menu (v1 #loginScreenDiv) ---------------------------------------------------------- */
/* v1's layout over the live island preview (menuPreview.js): world list top left, account buttons and settings top
   right, the logo, a big orange Play Now at the bottom centre and the legal links under it. Before the preview draws,
   the screen is v1's beige; everything sits on its own translucent backing, so it reads on both. */
#menu.start { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; justify-content: stretch; justify-items: center; align-items: center; gap: 12px;
  padding: 16px; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.4) 100%); }
#menu::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--beige); transition: opacity 1.5s ease; }
#menu.live::before { opacity: 0; }
#menu.behind > * { visibility: hidden; }

.start-top { justify-self: stretch; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.start-world { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.45);
  color: var(--text); text-shadow: var(--shadow); font-size: 15px; cursor: pointer; backdrop-filter: blur(4px); }
.start-world select { min-width: 210px; max-width: 60vw; font-size: 16px; padding: 7px 10px; border: none; border-radius: var(--r);
  background: rgba(255, 255, 255, 0.14); color: #fff; text-shadow: var(--shadow); cursor: pointer; }
.start-world select:hover, .start-world select:focus-visible { background: rgba(255, 255, 255, 0.24); }
.start-world option { background: #3b2a17; color: #fff; text-shadow: none; }
.start-account { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.account-bar { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.account-bar .account-button, .account-bar .account-name { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: none;
  border-radius: var(--r); font-size: 15px; color: #fff; text-shadow: var(--shadow); text-decoration: none; cursor: pointer; white-space: nowrap; }
.account-bar .account-button { background: var(--orange); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.account-bar .account-button:hover { background: var(--orange-hover); }
.account-bar .account-button.warn { background: var(--red); }
.account-bar .account-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); }
.account-bar .account-name:hover { background: rgba(0, 0, 0, 0.6); }
.start-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none;
  border-radius: var(--r); background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
.start-icon:hover { background: rgba(0, 0, 0, 0.6); }
.start-icon svg { transition: transform 0.4s ease; }
.start-icon:hover svg { transform: rotate(60deg); }

/* the logo, as large as the room between the bars allows */
.start-logo { width: min(90vw, 620px); height: clamp(110px, 26vh, 240px); margin: 0; background: url(/assets/src/img/logo.png) no-repeat center / contain;
  color: transparent; text-shadow: none; overflow: hidden; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35)); }

.start-play { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 420px); }
#menu #playButton { width: 100%; padding: 14px 24px; border: none; border-radius: 6px; background: var(--orange); color: #fff; font-size: clamp(26px, 4.5vmin, 38px);
  text-shadow: 1px 1px #000; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.08s ease, background 0.15s; }
#menu #playButton:hover:not(:disabled) { background: var(--orange-hover); }
#menu #playButton:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35); }
#menu #playButton:disabled { opacity: 0.6; cursor: default; }
#menu #status { min-height: 1.3em; margin: 0; padding: 0 10px; border-radius: var(--r); color: #fff; text-shadow: var(--shadow); font-size: 15px; text-align: center; }
#menu #status:not(:empty) { background: rgba(0, 0, 0, 0.45); }
.start-cookies { margin: 0; font-size: 12px; color: #fff; text-shadow: var(--shadow); opacity: 0.85; text-align: center; }

.start-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); }
.start-footer a { padding: 4px 12px; border-radius: var(--r); color: #fff; text-shadow: var(--shadow); font-size: 14px; text-decoration: none; }
.start-footer a:hover { background: rgba(255, 255, 255, 0.14); color: var(--orange); }

@media (max-width: 600px) {
  .start-top { flex-direction: column; align-items: stretch; }
  .start-world { justify-content: space-between; }
  .start-world select { flex: 1; min-width: 0; max-width: none; }
  .start-account { margin-left: 0; justify-content: flex-end; }
  .start-footer a { padding: 4px 8px; font-size: 13px; }
}
@media (max-height: 460px) { .start-logo { height: 90px; } .start-cookies { display: none; } }

/* ---- HUD --------------------------------------------------------------------------------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
/* v1 #levelsDiv: green level draining over a red bar, in a translucent box. */
/* v1 #levelsContainerDiv: top left, above the dimmed inventory/Esc screens so the friends box is usable. */
.levels-container { position: fixed; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
body.inv-open .levels-container, body.ui-open .levels-container { z-index: 6; }
/* v1 #levelsDiv / .bar / .inbar: 6vmin squares, green rising in red, % inside, icon on the left. */
.vitals { margin: 4px; padding: 0.1vmin; border-radius: var(--r); background: var(--box); width: fit-content; }
.level { display: flex; align-items: center; gap: 0.6vmin; margin: 1vmin 1vmin 1vmin 0.6vmin; }
.level-icon { width: 2.4vmin; height: 2.4vmin; min-width: 14px; min-height: 14px; background: no-repeat center / contain; }
.level .bar { position: relative; width: 6vmin; height: 6vmin; min-width: 34px; min-height: 34px; border-radius: var(--r); background: var(--red); overflow: hidden; }
.bar-fill { position: absolute; inset: 0; border-radius: var(--r); background: var(--green); transform-origin: bottom center; transition: transform 0.5s linear; }
.bar-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: max(11px, 1.5vmin); text-shadow: var(--shadow); }
.weight-row { margin-top: 0; }
.weight { font-size: max(11px, 1.5vmin); }
/* Potion effects on (shared/content/effects.js): a line each with the time left. */
.effects { margin: 0 1vmin 0.8vmin 0.6vmin; font-size: max(11px, 1.4vmin); color: #c9f0d8; white-space: pre-line; text-shadow: var(--shadow); }
/* v1 .blinkingIcon: hunger, thirst or fatigue at zero. */
.level-icon.blink { animation: level-blink 1s linear infinite; }
@keyframes level-blink { 50% { opacity: 0; } }
/* v1 #performanceLabel: small grey line under the minimap. The detailed overlay is admin-only. */
#perf { position: fixed; right: 8px; top: 130px; color: #999; font-size: 13px; pointer-events: none; text-shadow: none; z-index: 2; }
/* v1 #inventoryRow0: 45px slots, 8px apart. The inventory screen draws its own copy in the same place. */
/* --hotbar-scale (client/main.js layoutScreens): 1 until the window is narrower than the row (10 x 45px + 9 x 8px = 522px),
   then as large as fits with 6px either side (0.72 on a 390px phone). */
.toolbar, .inv-toolbar { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%) scale(var(--hotbar-scale, 1)); transform-origin: bottom center; display: flex; gap: 8px; pointer-events: auto; }
.inv-toolbar { position: absolute; }
body.inv-open .toolbar { visibility: hidden; }
/* v1 button.inv: flat translucent square; selected = v1's blue weapon slot. */
.slot { position: relative; width: 45px; height: 45px; border-radius: var(--r); background: var(--box); border: none; box-sizing: border-box; padding: 0; color: #fff; }
.slot:hover { background: var(--box-hover); }
.slot.selected { background: var(--blue); }
.slot.selected:hover { background: rgba(0, 0, 255, 0.4); }
.slot.locked { opacity: 0.25; }
.slot-icon { position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); background-repeat: no-repeat; pointer-events: none; }
.slot-key { position: absolute; left: 3px; top: 0; font-size: 11px; opacity: 0.85; z-index: 1; }
.slot-dur { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: var(--green); transform-origin: left center; border-radius: 2px; box-shadow: 0 1px 0 #000; }
/* v1 #hoverDiv */
/* (as wide as its longest line, up to the screen less a margin: past that a line wraps rather than run off a phone) */
.target { position: fixed; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); width: max-content; max-width: 92vw; box-sizing: border-box; padding: 4px 8px; border-radius: var(--r); background: var(--box); text-align: center; }
.target-name { font-size: 15px; }
.target-hint { font-size: 12px; color: #eee; white-space: pre-line; }
/* (kept to the middle of the screen, clear of the zone line under the minimap; long ones wrap) */
/* (above the windows that leave the view showing round them: the trading post's, the bounty board's) */
.notice { z-index: 8; pointer-events: none; position: fixed; left: 50%; top: 22%; transform: translateX(-50%); width: max-content; max-width: min(92vw, 560px); font-size: 22px; text-shadow: 1px 1px #000, 0 0 6px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.4s; text-align: center; }
.notice.show { opacity: 1; }
.downed { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); padding: 8px 12px; border-radius: var(--r); background: var(--box); text-align: center; font-size: 16px; }
.hold-bar { width: 220px; max-width: 70vw; height: 10px; margin: 8px auto 0; border-radius: var(--r); background: rgba(167, 216, 175, 0.5); overflow: hidden; }
.hold-fill { height: 100%; background: var(--red); transform-origin: left center; transform: scaleX(0); }
/* Reviving someone (v1 #reviveDiv: green bar). */
.downed.revive { top: 36%; }
.revive .hold-fill { background: rgba(64, 199, 30, 0.9); }
/* v1 #cooldownTimer: a ring around the crosshair that empties while the server makes you wait. */
.cooldown { position: fixed; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; }
.cooldown svg { display: block; transform: rotate(-90deg); }
.cooldown-ring { fill: none; stroke: rgba(255, 0, 0, 0.45); stroke-width: 4; transition: stroke-dashoffset 0.1s linear; }
.cooldown-text { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); font-size: 13px; color: rgba(255, 255, 255, 0.75); }
body.ui-open .cooldown, body.third-person .cooldown { visibility: hidden; }
/* Bow draw / crossbow reload: a thin ring filling clockwise around the crosshair; bright at full draw. */
.ranged-ring { position: fixed; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; }
.ranged-ring svg { display: block; transform: rotate(-90deg); }
.ranged-track { fill: none; stroke: rgba(0, 0, 0, 0.25); stroke-width: 2.5; }
.ranged-fill { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2.5; stroke-linecap: round; }
.ranged-ring.full .ranged-fill { stroke: rgba(255, 244, 214, 1); stroke-width: 3; }
.ranged-ring.reloading .ranged-fill { stroke: rgba(255, 255, 255, 0.45); }
body.ui-open .ranged-ring, body.third-person .ranged-ring { visibility: hidden; }
/* Fishing: the strike cue over the crosshair, the fight panel low in the view (the fish is usually in the middle, coming
   in) above the hints and the hotbar, and the catch card. */
.fish-cue { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -150%); font-size: 46px; line-height: 1; color: var(--orange); text-shadow: 2px 2px #000, 0 0 10px rgba(0, 0, 0, 0.6); pointer-events: none; }
.fish-cue.pop { animation: fish-pop 0.22s ease-out infinite alternate; }
.fish-cue.hooked { font-size: 26px; color: #7dff5a; white-space: nowrap; }
.fish-cue.hooked.pop { animation: fish-hooked 0.3s ease-out; }
@keyframes fish-hooked { from { transform: translate(-50%, -150%) scale(1.5); opacity: 0.4; } }
@keyframes fish-pop { from { transform: translate(-50%, -150%) scale(1); } to { transform: translate(-50%, -158%) scale(1.25); } }
.fish-panel { position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 8px 10px 6px; border-radius: var(--r); background: var(--box); pointer-events: none; }
/* The call: what the fish wants from you now, with the tell's countdown under it. */
.fish-call { position: relative; margin: 0 4px 6px; padding-bottom: 4px; font-size: 19px; line-height: 1.1; text-align: center; white-space: nowrap; color: #fff; text-shadow: 1px 1px #000; }
.fish-call[data-tone=good] { color: #7dff5a; }
.fish-call[data-tone=warn] { color: var(--orange); }
.fish-call[data-tone=bad] { color: #ff6a3d; }
.fish-call[data-tone=calm] { color: #ddd; }
.fish-call.pop { animation: fish-call-in 0.18s ease-out; }
@keyframes fish-call-in { from { transform: scale(1.3); } }
.fish-call-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: center; }
.fish-row { display: flex; align-items: center; gap: 6px; }
.fish-arrow { width: 22px; font-size: 18px; text-align: center; color: rgba(255, 255, 255, 0.22); transition: color 0.1s, transform 0.1s; }
.fish-arrow.pulling { color: var(--orange); }
.fish-arrow.countering { color: #7dff5a; transform: scale(1.35); }
.fish-arrow.warn { animation: fish-arrow-warn 0.24s steps(2) infinite; }
@keyframes fish-arrow-warn { 50% { color: #fff; transform: scale(1.45); } }
.fish-track { position: relative; flex: 1; height: 40px; border-radius: var(--r); background: rgba(24, 78, 120, 0.5); overflow: hidden; }
.fish-land { position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: rgba(91, 179, 51, 0.55); }
.fish-dot { position: absolute; top: 3px; width: 34px; height: 34px; margin-left: -17px; transition: left 0.08s linear; }
.fish-icon { width: 34px; height: 34px; filter: brightness(0) opacity(0.8); }
.fish-dot.running .fish-icon { animation: fish-wiggle 0.16s linear infinite alternate; }
.fish-dot.tense .fish-icon { animation: fish-tense 0.07s linear infinite alternate; }
@keyframes fish-tense { from { transform: translate(-2px, 1px) rotate(-5deg); } to { transform: translate(2px, -1px) rotate(5deg); } }
@keyframes fish-wiggle { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.fish-tension { position: relative; height: 12px; margin: 7px 28px 0; border-radius: var(--r); background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.fish-tension-slack { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(156, 211, 255, 0.28) 0 4px, transparent 4px 8px); }
.fish-tension-fill { position: relative; height: 100%; width: 0; background: var(--green); }
.fish-tension-fill[data-zone=slack] { background: #9cd3ff; }
.fish-tension-fill[data-zone=orange] { background: var(--orange); }
.fish-tension-fill[data-zone=red] { background: var(--red); }
.fish-tension-limit { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.85); }
.fish-panel.danger .fish-tension { animation: fish-flash 0.2s steps(2) infinite; }
@keyframes fish-flash { 50% { box-shadow: inset 0 0 0 2px #fff; } }
.fish-panel.slack .fish-tension { animation: fish-slack 0.5s steps(2) infinite; }
@keyframes fish-slack { 50% { background: rgba(255, 255, 255, 0.35); } }
/* Close to losing it: the line's strain fills red from the right, the hook working loose fills pale from the left. */
.fish-risk { position: relative; height: 3px; margin: 2px 28px 0; }
.fish-risk-strain, .fish-risk-slack { position: absolute; top: 0; bottom: 0; width: 100%; transform: scaleX(0); }
.fish-risk-strain { right: 0; transform-origin: right center; background: #ff6a3d; }
.fish-risk-slack { left: 0; transform-origin: left center; background: #cfe9ff; }
.fish-stamina { height: 4px; margin: 4px 28px 0; border-radius: 2px; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.fish-stamina-fill { height: 100%; background: #9cd3ff; transform-origin: left center; }
/* (wraps on a narrow phone rather than spilling out of the panel) */
.fish-help { margin-top: 5px; font-size: 12px; line-height: 1.25; text-align: center; color: #eee; overflow-wrap: anywhere; }
.fish-catch { position: fixed; left: 50%; top: 13%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 8px; border-radius: var(--r); background: var(--box); pointer-events: none; }
.fish-catch.pop { animation: fish-catch-in 0.35s ease-out; }
@keyframes fish-catch-in { from { opacity: 0; transform: translate(-50%, -10px) scale(0.9); } }
.fish-catch-icon { width: 54px; height: 54px; }
.fish-catch-name { font-size: 20px; }
.fish-catch-size { font-size: 14px; color: #ddd; }
body.ui-open .fish-cue, body.ui-open .fish-panel { visibility: hidden; }
/* A hint showing under the panel (two or three lines, from 76px up): the panel moves up clear of it. */
body:has(.tip.show) .fish-panel { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
/* With touch controls the lower screen is buttons: the panel sits just under the crosshair instead. */
body:has(.touch:not([hidden])) .fish-panel { bottom: auto; top: calc(50% + 24px); }
/* A phone on its side has no room below the crosshair (the hints sit there): up top, under the menu buttons. */
@media (orientation: landscape) and (max-height: 500px) { body:has(.touch:not([hidden])) .fish-panel { top: calc(84px + env(safe-area-inset-top, 0px)); } }
/* A phone held upright has the buttons right under the panel: the controls line goes (the fight hint and the call say it). */
@media (orientation: portrait) and (max-width: 500px) { body:has(.touch:not([hidden])) .fish-help { display: none; } }
/* Auto-reconnect after an unexpected disconnect. */
.reconnecting { z-index: 20; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--r); background: rgba(0, 0, 0, 0.7); font-size: 20px; text-align: center; }
.reconnecting[hidden] { display: none; }
.reconnecting button { border: 0; border-radius: var(--r); padding: 6px 12px; background: var(--box); color: #fff; font-size: 14px; cursor: pointer; }
.zone-hud { position: fixed; right: 8px; top: 150px; font-size: 13px; opacity: 0.9; text-align: right; }
/* v1 #apocalypseTimer */
.apocalypse { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); padding: 6px 16px; border-radius: var(--r); background: rgba(139, 0, 0, 0.9); border: 2px solid #f00; color: #f44; font-size: 16px; font-weight: bold; text-shadow: 0 0 8px #f00; }
/* v1 .voiceName */
.talking { position: fixed; left: 50%; top: 48px; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--r); background: rgba(85, 187, 51, 0.75); font-size: 14px; }
#hurt { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(200, 20, 20, 0.55)); opacity: 0; transition: opacity 0.5s; }
.floater { position: absolute; left: 0; top: 0; font: 24px var(--font); text-shadow: 1px 1px #000, 0 0 3px #000; pointer-events: none; will-change: transform, opacity; }

/* ---- Inventory screen (v1 #invScreenDiv + #canvasCover): the view dims; equipment and backpack sit
   just above the toolbar, quick craft bottom right, other stations top centre, examine in the corner. */
.overlay.inventory { display: block; padding: 0; overflow: visible; }
.window { background: var(--box); border-radius: var(--r); padding: 1vmin; }
h3.ui-title { margin: 4px; font-size: clamp(16px, 3vmin, 24px); font-weight: normal; color: #fff; }
.inv-container { position: absolute; left: 50%; bottom: 61px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 24px; }
.inv-block { display: flex; flex-direction: column; }
.equip-grid, .inventory .grid { display: grid; grid-template-columns: repeat(3, 45px); gap: 8px; margin: 4px; }
.inventory .grid { grid-template-columns: repeat(5, 45px); }
.inventory .slot { cursor: pointer; touch-action: none; }
/* v1 main.css button#helmetSlot etc.: the slot's icon (27x27 viewBox scaled to the whole 45px slot). */
.slot-label { position: absolute; inset: 0; background: no-repeat center / contain; pointer-events: none; }
.equip-helmet { background-image: url(/assets/src/img/hud/helmet.svg); }
.equip-body { background-image: url(/assets/src/img/hud/body.svg); }
.equip-legs { background-image: url(/assets/src/img/hud/legs.svg); }
.equip-shield { background-image: url(/assets/src/img/hud/shield.svg); }
.equip-back { background-image: url(/assets/src/img/hud/bag.svg); }
.equip-necklace { background-image: url(/assets/src/img/hud/necklace.svg); }
.equip-weapon { background-image: url(/assets/src/img/hud/weapon.svg); }
.slot.filled .slot-label { display: none; }
.weapon-view { cursor: default !important; }
.drag-ghost { position: fixed; left: 0; top: 0; width: 45px; height: 45px; pointer-events: none; z-index: 10; }
/* While an item is dragged its slot shows a faint copy (it comes back if the drop isn't valid). */
.slot.drag-source .slot-icon { opacity: 0.3; }
.overlay.inventory, body.dragging-item { user-select: none; -webkit-user-select: none; }
body.dragging-item, body.dragging-item .slot { cursor: grabbing; }
/* v1 #quickCraftDiv (bottom right) and station panels (#anvilCraftDiv etc.: top centre). */
.inv-side { position: absolute; }
.inv-side:has(.station[data-station="quickcraft"]) { right: 2vmin; bottom: calc(12vmin + 60px); }
/* (under the options strip however many rows it wraps to: --strip-bottom, client/main.js layoutScreens) */
.inv-side:not(:has(.station[data-station="quickcraft"])) { left: 50%; top: max(calc(6vh + 36px), calc(var(--strip-bottom, 0px) + 8px)); transform: translateX(-50%); }
.station { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 1vmin; border-radius: var(--r); background: var(--box); }
.station-title { margin: 4px; font-size: clamp(16px, 3vmin, 24px); font-weight: normal; color: #fff; }
.station .station-close { position: absolute; right: 4px; top: 2px; padding: 0 6px; background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1.2; text-shadow: var(--shadow); cursor: pointer; }
.station .station-close:hover { color: var(--red); }
.station .inv-help { margin: 0; font-size: 12px; color: var(--muted); }
.station-grid { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; }
.station .slot.craft { width: 40px; height: 40px; cursor: pointer; }
/* v1 #groundItemListDiv ("Pick up:"): icon buttons, name on hover. */
.inv-pickup { position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); max-width: min(32vw, 280px); max-height: 40vh; overflow-y: auto; }
.pickup-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px; }
.pickup-item { cursor: pointer; }
/* v1 #examineDiv (bottom right corner) and #hoverDiv (follows the cursor). */
.inv-examine { position: absolute; right: 0; bottom: 0; min-width: 16vw; max-width: 320px; padding: 1vmin; border-top-left-radius: var(--r); background: var(--box); font-size: 13px; }
.inv-detail { min-height: 3.6em; line-height: 1.4; white-space: pre-line; }
.inv-detail:empty::before { content: "Point at an item to see what it is."; opacity: 0.6; }
.inv-help { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.hover-title { position: fixed; left: 0; top: 0; z-index: 30; padding: 4px; border-radius: var(--r); background: var(--box); text-align: center; pointer-events: none; white-space: nowrap; }
@media (max-width: 1200px) {
  .inv-examine { display: none; }
  /* a long press on a slot (touch) shows it over the open view between the panels, clear of the fingers */
  .inv-examine.peek { display: block; position: fixed; left: 50%; right: auto; bottom: auto; top: 42vh; transform: translateX(-50%); z-index: 31; min-width: min(70vw, 260px); max-width: min(92vw, 340px); padding: 8px 10px; border-radius: var(--r); background: rgba(0, 0, 0, 0.85); pointer-events: none; }
}
@media (max-width: 800px) {
  .inv-container { transform: translateX(-50%) scale(0.8); transform-origin: bottom center; gap: 12px; }
  .inv-side:has(.station[data-station="quickcraft"]) { right: 4px; bottom: auto; top: max(calc(6vh + 36px), calc(var(--strip-bottom, 0px) + 8px)); }
  .inv-pickup { max-width: 40vw; }
}
/* v1 button:disabled on craft buttons: red tint when you lack the materials. */
.slot.craft.missing { background: rgba(255, 0, 0, 0.35); }
.slot.craft.missing:hover { background: rgba(255, 0, 0, 0.5); }
.slot.accept { background: rgba(85, 187, 51, 0.45); }
.slot.reject { background: rgba(255, 0, 0, 0.3); }
/* Count badge on containers (quiver arrows, ore sack ores): bottom right, above the durability bar. */
.slot-count { position: absolute; right: 3px; bottom: 5px; z-index: 1; font-size: 11px; line-height: 1; pointer-events: none; }
/* Quality (shared/content/quality.js): a dot in the tier's colour on anything better or worse than Common; names in it. */
.slot-q { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.9), 0 0 0 2.5px rgba(255, 255, 255, 0.35); pointer-events: none; z-index: 1; }
.q-name { font-weight: bold; }
/* A Legendary item's slot (hud.js paintPip): a thin gold edge, a faint warm inner glow, and every few seconds a soft
   band of light sweeping across it. Calm on purpose: it says "this one is special" without pulling the eye all the
   time. With reduced motion asked for, the edge and glow stay and the sweep doesn't run. */
.slot.legendary { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 102, 0.9), inset 0 0 9px rgba(255, 196, 64, 0.32); }
.slot.legendary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 228, 140, 0.32) 46%, rgba(255, 250, 225, 0.55) 50%, rgba(255, 228, 140, 0.32) 54%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0; animation: legend-shimmer 4.2s ease-in-out infinite; }
@keyframes legend-shimmer { 0%, 20% { background-position: 160% 0; } 62%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .slot.legendary::after { animation: none; display: none; } }
.slot-count.full { color: var(--orange); }
.slot-count.pop { animation: count-pop 0.35s ease-out; }
@keyframes count-pop { 0% { transform: scale(1.6); color: var(--orange); } 100% { transform: scale(1); } }
/* The worn ore sack on the HUD: a slot just right of the toolbar (outside the row, so the toolbar and the
   inventory's copy of it stay where they are; on a phone, above its right end). Clicking or tapping it opens
   its contents. It stays below the touch controls' look zone (bottom 72px) so a tap reaches it. */
.sack-hud { position: absolute; left: calc(100% + 12px); bottom: 0; cursor: pointer; font: inherit; }
.sack-hud[hidden] { display: none; }
/* Ore sack contents (the station panel's "sack" view): one row per ore type. */
.station[data-station="sack"] .station-grid { max-height: none; overflow: visible; }
.sack-rows { display: grid; grid-template-columns: minmax(300px, auto); gap: 3px 6px; max-height: min(34vh, 230px); overflow-y: auto; }
.sack-rows.two { grid-template-columns: repeat(2, minmax(300px, auto)); }
.sack-row { display: flex; align-items: center; gap: 6px; padding: 1px 4px; border-radius: var(--r); background: var(--box); font-size: 13px; }
.sack-row .slot { width: 28px; height: 28px; flex: none; pointer-events: none; background: transparent; }
.sack-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sack-row button, .sack-actions button { flex: none; white-space: nowrap; padding: 2px 7px; border: none; border-radius: var(--r); background: var(--orange); color: #fff; font-size: 12px; text-shadow: var(--shadow); cursor: pointer; }
.sack-row button:hover, .sack-actions button:hover { background: var(--orange-hover); }
.sack-row button:disabled, .sack-actions button:disabled { opacity: 0.4; cursor: default; }
.sack-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-size: 13px; }
.sack-empty { margin: 4px; color: var(--muted); }
/* v1 #foundryDiv: #materialsDiv (.foundryRow: name, available / processing) beside the bar grid. */
.station-body { display: flex; flex-direction: column; gap: 6px; }
.station[data-station="foundry"] .station-body { flex-direction: row; align-items: flex-start; gap: 10px; }
.station[data-station="foundry"] .station-grid { max-height: 75vh; }
.station-section { margin: 4px 2px 0; font-size: 13px; font-weight: normal; color: #aaa; text-shadow: var(--shadow); }
.station-grid .station-section { grid-column: 1 / -1; margin: 2px 2px -4px; }
.pools { display: flex; flex-direction: column; gap: 3px; min-width: 150px; font-size: 13px; }
.pool { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 6px; border-radius: var(--r); background: var(--box); cursor: default; }
.pool .available { color: #2c2; }
.pool .processing { color: #f9ae1a; }
/* Foundry bars the pools pay for, on the cell like a stack count. */
.craft-count { position: absolute; right: 3px; bottom: 1px; font-size: 11px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 2px #000; pointer-events: none; }
@media (max-width: 600px) { .station[data-station="foundry"] .station-body { flex-direction: column; } }

/* ---- Chat (v1 #chatDiv: bare shadowed text, yellow names) -------------------------------------- */
/* Placed by client/ui/chatDock.js (left/top/bottom/width and the log's height), clear of everything you tap: bottom
   left with a mouse (v1), top left beside the vitals on touch. While playing it takes no pointer at all, so nothing
   under it is ever blocked; on the pause and inventory screens (.interactive) it sits above the dimmed view (.up) and
   can be scrolled, its badges hovered or tapped, its field clicked to type. */
.chat { position: fixed; left: 3px; bottom: 4px; width: 220px; z-index: 3; pointer-events: none; }
.chat.up, .chat.active { z-index: 6; }
.chat.off:not(.active), .chat.docked-out:not(.active) { visibility: hidden; }
.chat-log { max-height: 50vh; overflow-y: auto; font-size: max(13px, 1.6vmin); line-height: 1.4; word-wrap: break-word; scrollbar-width: none; overscroll-behavior: contain; }
.chat:not(.active):not(.interactive) .chat-log { mask-image: linear-gradient(to top, #000 60%, transparent); }
.chat.active .chat-log, .chat.interactive .chat-log, .chat.active .chat-input, .chat.interactive .chat-input { pointer-events: auto; }
/* Usable on the screens: a faint backing says so, and the log scrolls with a thin bar. */
.chat.interactive .chat-log, .chat.active .chat-log { padding: 2px 6px; border-radius: var(--r); background: rgba(0, 0, 0, 0.32); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.chat-line b { font-weight: normal; color: #ff0; }
.chat-line.server { color: var(--orange); }
.chat-line.private { color: #4db; }
.chat-line.private b { color: #4db; }
.chat-line.info { color: #bbb; }
.chat-line a { color: #ff0; }
.chat-input { display: block; width: 100%; height: 24px; box-sizing: border-box; margin: 2px 0 0; padding: 0 4px; border: none; border-radius: var(--r); background: transparent; color: #fff; font: 16px var(--font); text-shadow: var(--shadow); outline: none; }
.chat.active .chat-input { background: var(--box); }
.chat.interactive:not(.active) .chat-input { cursor: text; background: rgba(0, 0, 0, 0.32); }
.chat-input::placeholder { color: #fff; text-shadow: var(--shadow); }
.chat.interactive:not(.active) .chat-input::placeholder { color: #ddd; }
/* Playing on touch: the latest lines only (they fade a while after they arrive), and no [ENTER] field (the Chat button
   opens it). */
.chat.touch:not(.active):not(.interactive) .chat-input { display: none; }
.chat.touch .chat-line { transition: opacity 1.2s ease; }
.chat.touch:not(.active):not(.interactive) .chat-line.stale { opacity: 0; }
.chat.touch:not(.active):not(.interactive) .chat-log { mask-image: linear-gradient(to bottom, transparent, #000 1.2em); }

/* Badges beside names (client/ui/nameStyle.js): the emoji only; what it is shows in this tooltip (client/ui/badgeTip.js)
   on hover, a tap or a controller's focus. */
.ns-badge[data-tip] { cursor: help; }
/* (only while the chat can be used: in play its faded lines must take no tap) */
.chat.interactive .ns-badge, .chat.active .ns-badge { pointer-events: auto; }
.badge-tip { position: fixed; left: 0; top: 0; z-index: 60; display: flex; flex-direction: column; gap: 1px; max-width: min(260px, calc(100vw - 12px));
  padding: 5px 9px; border-radius: var(--r); background: rgba(0, 0, 0, 0.85); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.4);
  color: #fff; font: 14px/1.3 var(--font); letter-spacing: 0.6px; text-shadow: var(--shadow); pointer-events: none; box-sizing: border-box; }
.badge-tip b { font-weight: normal; color: var(--orange); }
.badge-tip span { font-size: 12px; color: #ddd; }
.pad-focus.ns-badge { outline-offset: 1px; border-radius: 3px; }

/* ---- Modals (client/ui/dialog.js: every alert, question and text field; v1 #signDiv / #lockDiv) -------------------
   The game's window look, a shade darker so a question reads over bright terrain, with an orange rule on top. Above
   every other window, the vitals and the touch controls. */
.overlay.modal { z-index: 40; background: rgba(0, 0, 0, 0.5); animation: modal-fade 0.14s ease-out; }
.panel.modal-panel { max-width: 380px; padding: 18px 18px 16px; gap: 12px; background: rgba(0, 0, 0, 0.8); border-top: 3px solid var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.5); color: #fff; text-shadow: var(--shadow); animation: modal-in 0.16s ease-out; }
.modal-panel .modal-title { margin: 0; font-size: 22px; font-weight: normal; text-align: center; }
.modal-message { margin: 0; text-align: center; font-size: 15px; line-height: 1.45; color: #eee; white-space: pre-line; overflow-wrap: anywhere; }
.modal-actions { margin-top: 2px; }
.panel button.danger { background: var(--red); }
.panel button.danger:hover { background: var(--red-hover); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .overlay.modal, .panel.modal-panel { animation: none; } }
/* Fingers: full-height buttons. */
@media (pointer: coarse) { .modal-actions button { min-height: 44px; } }
.dialog-input { font-size: 16px; padding: 8px; border-radius: var(--r); border: none; background: var(--box); color: #fff; text-shadow: var(--shadow); resize: none; }
.panel input.dialog-input:not([type=checkbox]) { background: var(--box); color: #fff; text-shadow: var(--shadow); }
textarea.dialog-input { height: 5.5em; font-family: ui-monospace, monospace; }
.dialog-input.invalid, .panel input.dialog-input.invalid { box-shadow: inset 0 0 0 2px var(--red); }
/* The sign editor's preview: the lines as they will be burnt into the board (client/render/signBoards.js). */
.dialog-preview { align-self: center; min-width: 15ch; min-height: 4.6em; padding: 8px 14px; border-radius: 3px; background: #b88d5c; color: #2a170b; font-family: var(--font); font-size: 17px; line-height: 1.15; text-align: center; white-space: pre; display: flex; flex-direction: column; justify-content: center; box-shadow: inset 0 -3px rgba(0, 0, 0, 0.18); }
.dialog-preview.empty::before { content: "(blank sign)"; opacity: 0.55; }
.dialog-overflow { margin: 0; padding: 5px 8px; border-radius: 3px; background: rgba(190, 30, 10, 0.88); color: #fff; font-size: 14px; overflow-wrap: anywhere; }
.dialog-overflow:empty { display: none; }
.dialog-row { display: flex; gap: 8px; }
.dialog-row button { flex: 1; }

/* ---- Settings (v1 #settingsDiv tabs) ----------------------------------------------------------- */
.panel.xwide { max-width: 760px; width: 100%; max-height: 88vh; overflow: hidden; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--box); }
.panel .tabs .tab { flex: 1 1 auto; background: transparent; padding: 6px 10px; }
.panel .tabs .tab:hover { background: var(--box); }
.panel .tabs .tab.active { background: var(--box-strong); }
.settings-body { overflow-y: auto; max-height: 64vh; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.settings-col { display: flex; flex-direction: column; gap: 8px; }
.settings h3, .highscores h3 { margin: 6px 0 0; font-size: 16px; font-weight: normal; color: #fff; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
.bind-table { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 6px; align-items: center; }
.bind-row { display: contents; }
.bind-group { grid-column: 1 / -1; margin-top: 8px; font-size: 15px; color: var(--orange); }
.bind-label { font-size: 14px; }
.panel button.bind { min-width: 118px; padding: 5px 8px; font-size: 13px; background: var(--box); }
.panel button.bind:hover { background: var(--box-hover); }
.panel button.bind.reset { min-width: 0; }
.panel button.bind.capturing { background: var(--orange); }
.slider { display: grid !important; grid-template-columns: 180px 1fr 52px; align-items: center; gap: 8px; font-size: 14px !important; color: #fff !important; }
.slider output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.check { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14px !important; color: #fff !important; }
.tester, .titles { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; padding: 3px 8px; border-radius: var(--r); background: var(--box); color: var(--muted); }
.chip.on { background: var(--green); color: #fff; }
.mic-meter { position: relative; height: 10px; border-radius: var(--r); background: var(--box); overflow: hidden; margin-top: 6px; }
.mic-meter > div:first-child { height: 100%; width: 0; background: #888; transition: width 0.06s linear; }
.mic-meter > div.open { background: var(--green); }
.mic-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); }

/* ---- Map (v1 #mapDiv) and minimap ------------------------------------------------------------ */
.overlay.map { background: var(--box-strong); pointer-events: auto; padding-bottom: 72px; } /* click the dimmed view to close; the bottom padding keeps the legend clear of the hotbar */
.panel.map-panel { max-width: none; width: auto; align-items: center; background: transparent; }
.map-panel h2 { font-size: 30px; }
/* the map in a frame: dark inner edge, tan outer edge (the UI's own colours), soft shadow */
.map-canvas { border-radius: 6px; image-rendering: auto; box-shadow: 0 0 0 3px var(--brown), 0 0 0 5px var(--tan), 0 12px 36px rgba(0, 0, 0, 0.65); }
/* v1 #minimap: a 120px square with rounded corners, framed like the map. */
.minimap { position: fixed; right: 4px; top: 4px; width: 120px; height: 120px; border-radius: 6px; box-shadow: 0 0 0 2px var(--brown), 0 0 0 3px var(--tan), 0 3px 10px rgba(0, 0, 0, 0.5); pointer-events: auto; cursor: pointer; } /* click: world map (v1) */
.overlay.map:not([hidden]) ~ .minimap { visibility: hidden; } /* the world map is open: the minimap would only show dimmed behind its scrim */

/* ---- Highscores (client/ui/highscores.js): board chips, a gold / silver / bronze podium (v1 #highscoresDiv's
   colours), ranks 4-10, the asker's own row in orange ---------------------------------------------------------- */
.panel.hs-panel { max-width: 640px; max-height: calc(94vh - 30px); overflow-y: auto; gap: 8px; }
.hs-title { font: clamp(26px, 4.4vmin, 38px) "Edo", var(--font) !important; letter-spacing: 1px; color: var(--orange);
  -webkit-text-stroke: 1px #2a1606; paint-order: stroke fill; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.hs-group { display: flex; flex-direction: column; gap: 3px; }
.hs-group-name, .hs-sub { margin: 0; font-size: 12px; font-weight: normal; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.panel button.hs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; font-size: 13px; background: var(--box); color: var(--muted); }
.panel button.hs-chip:hover { background: var(--box-hover); color: #fff; }
.panel button.hs-chip.on { background: var(--orange); color: #fff; }
.hs-chip-icon { width: 26px; height: 26px; margin: -3px 0; flex: none; }
.hs-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.hs-board-name { font-size: 18px; }
.panel select.hs-season { padding: 4px 8px; font-size: 13px; }
.hs-board { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r); background: var(--box); }
.hs-empty { padding: 18px 0; text-align: center; color: var(--muted); }
.hs-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; }
.hs-step { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 6px 10px; border-radius: var(--r) var(--r) 0 0; background: var(--box); border-bottom: 4px solid var(--medal); }
.hs-step:empty { visibility: hidden; }
.hs-step-1 { --medal: #fd0; min-height: 112px; }
.hs-step-2 { --medal: #ccc; min-height: 92px; }
.hs-step-3 { --medal: #c73; min-height: 80px; }
.hs-medal { width: 26px; height: 26px; border-radius: 50%; background: var(--medal); color: #2a1606; text-shadow: none; display: grid; place-items: center; font-size: 15px; }
.hs-step .hs-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--medal); }
.hs-step-1 .hs-name { font-size: 17px; }
.hs-step .hs-value { font-size: 14px; }
.hs-xp { font-size: 11px; color: var(--muted); }
.hs-step.me, .hs-row.me { box-shadow: inset 0 0 0 2px var(--orange); }
.hs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.hs-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r); background: var(--box); }
.hs-row .hs-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.hs-row .hs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-row .hs-value { text-align: right; font-variant-numeric: tabular-nums; }
.hs-row .hs-xp { margin-left: 6px; }
.hs-row.me .hs-name, .hs-row.me .hs-rank { color: var(--orange); }
.hs-mine { margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, 0.2); }
@media (max-width: 520px) {
  .panel button.hs-chip { font-size: 12px; padding: 2px 7px 2px 4px; }
  .hs-step .hs-name { font-size: 13px; }
  .hs-step-1 .hs-name { font-size: 14px; }
}

/* ---- Skills (client/ui/skillsPanel.js): one row per skill, a bar to the next level; "+XP" toasts at the side ---- */
.skills-panel { max-width: 640px; }
/* wide screens: two columns, so all 14 show without scrolling */
@media (min-width: 900px) { .overlay .panel.skills-panel { max-width: 880px; } .skills-list { grid-template-columns: 1fr 1fr; } }
.skills-total { margin-right: 40px; color: #fff; }
.skills-list { display: grid; gap: 3px; max-height: min(62vh, 560px); max-height: min(62dvh, 560px); overflow-y: auto; padding: 2px; }
.panel .skill-row { display: grid; grid-template-columns: 7.5em 3.8em 1fr; grid-template-areas: "name level bar" "name sub sub"; align-items: center;
  column-gap: 10px; row-gap: 2px; width: 100%; padding: 5px 8px; border: none; border-radius: var(--r); background: var(--box); color: #fff;
  font: inherit; text-align: left; cursor: default; box-shadow: none; }
.panel .skill-row:hover { background: var(--box-hover); }
.skill-name { grid-area: name; font-size: 15px; }
.skill-level { grid-area: level; font-size: 15px; color: var(--orange); white-space: nowrap; }
.skill-bar { grid-area: bar; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.skill-fill { display: block; height: 100%; background: var(--green); transform-origin: left center; transform: scaleX(0); transition: transform 0.4s ease-out; }
.skill-sub { grid-area: sub; display: flex; justify-content: space-between; gap: 8px; min-width: 0; white-space: nowrap; font-size: 11px; color: var(--muted); }
.skill-next, .skill-xp { overflow: hidden; text-overflow: ellipsis; }
.skills-hint { margin: 6px 0 0; font-size: 12px; }
.xp-toasts { position: fixed; right: 16px; top: 38%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; z-index: 4; }
.xp-toast { padding: 3px 10px; border-radius: var(--r); background: var(--box); color: #fff; font-size: 14px; text-shadow: var(--shadow); animation: xp-in 0.3s ease-out, xp-out 0.5s ease-in 2.1s forwards; }
.xp-toast.level-up { font-size: 17px; color: #ffe066; background: var(--box-strong); animation: xp-in 0.3s ease-out, xp-out 0.6s ease-in 3.6s forwards; }
@keyframes xp-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes xp-out { to { opacity: 0; } }
@media (max-width: 560px) {
  .panel .skill-row { grid-template-columns: 6.5em 3.8em 1fr; column-gap: 6px; padding: 4px 6px; }
  .skill-name, .skill-level { font-size: 13px; }
  .xp-toasts { right: 8px; top: 30%; }
  .xp-toast { font-size: 12px; }
}
/* (a phone held upright puts the touch buttons' menu column at the right edge: the toasts sit just left of it) */
@media (max-width: 700px) and (orientation: portrait) { body:has(.touch:not([hidden])) .xp-toasts { right: 66px; } }

/* ---- Death (v1 #deathDiv: the screen goes red) ------------------------------------------------ */
#death { background: rgba(255, 0, 0, 0.6); }
#death .panel { background: transparent; text-align: center; align-items: center; max-width: 440px; }
#death h2 { font-size: clamp(40px, 12vw, 60px); font-weight: bold; margin: 0; }
#killedBy { margin: 0 0 8px; font-size: 18px; }
#death button { width: 100%; font-size: clamp(20px, 5vw, 26px); padding: 10px 14px; background: var(--box); }
#death button:hover { background: var(--box-hover); }

/* ---- Options strip (v1 #optionsDiv): flush buttons hanging from the top edge, on the inventory
   screen and when the pointer is released (Esc). Only the strip's outer corners are rounded. ---- */
.options-strip { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; pointer-events: none; }
.options-strip .options { pointer-events: auto; padding: 1vh 1.4vmin; border: none; border-radius: 0; background: var(--box); color: #fff; font: clamp(14px, 2.5vmin, 22px) var(--font); text-shadow: var(--shadow); text-decoration: none; cursor: pointer; }
.options-strip .options:hover { background: var(--box-hover); }
.options-strip .options:first-child { border-bottom-left-radius: var(--r); }
.options-strip .options:last-child { border-bottom-right-radius: var(--r); }
.options-strip .discord { background: rgba(114, 137, 218, 0.85); }
.options-strip .discord:hover { background: #7289da; }
.options-strip .tutorial { color: #ff0; }
.options-strip .leave { background: rgba(255, 0, 0, 0.6); }
.options-strip .leave:hover { background: rgba(255, 0, 0, 0.4); }
#pause { cursor: pointer; }
#pause .resume { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 22px; border: none; border-radius: var(--r); background: var(--box); color: #fff; font: clamp(18px, 3.5vmin, 30px) var(--font); text-shadow: var(--shadow); cursor: pointer; }
#pause .resume:hover { background: var(--box-hover); }

/* ---- In-game windows (v1 .window + h3.uiTitle + button.close): translucent black, just under the
   options strip; the strip stays clickable around them. ---- */
.overlay.settings, .overlay.highscores, .overlay.skills, .overlay.friends-panel, .overlay.guide, .overlay.wardrobe, .overlay.admin-window { align-items: flex-start; padding-top: calc(6vh + 30px); background: transparent; pointer-events: none; }
.overlay.settings .panel, .overlay.highscores .panel, .overlay.skills .panel, .overlay.friends-panel .panel, .overlay.guide .panel, .overlay.wardrobe .panel, .overlay.admin-window .panel { position: relative; background: rgba(0, 0, 0, 0.45); pointer-events: auto; }
.overlay .settings-head h2 { font-size: clamp(18px, 3vmin, 26px); text-align: left; }
/* The Close button reads as v1's × (its text stays "Close" for screen readers and controller Back). */
.overlay .settings-head > button.secondary { position: absolute; right: 6px; top: 4px; width: 30px; height: 30px; padding: 0; font-size: 0; background: transparent; box-shadow: none; }
.overlay .settings-head > button.secondary::after { content: "×"; font-size: 26px; line-height: 30px; color: #fff; }
.overlay .settings-head > button.secondary:hover::after { color: var(--red); }
.panel .tabs { background: transparent; box-shadow: none; padding: 0; }
.panel .tabs .tab { flex-grow: 1; padding: 4px; border-radius: var(--r); }
.panel .tabs .tab.active { background: rgba(0, 0, 0, 0.6); }

/* Settings window: Gameplay / Graphics / Audio / Controls tabs over sections of options. The window
   fits under the options strip at any height; only its body scrolls. Sliders and checkboxes use the
   game's orange (the Play button), flat like the rest of the UI. */
/* Above the vitals/friends column (z-index 6 on menu screens), which would otherwise cover it on
   small windows. */
.overlay.settings { z-index: 7; }
/* The skills window covers the HUD as Settings does (on a phone the vitals and the touch column would sit on it), as dark,
   so what is under it doesn't show through its rows. */
.overlay.skills { z-index: 7; }
.overlay.skills .panel.skills-panel { background: rgba(0, 0, 0, 0.72); }
.overlay.settings .panel.settings-panel { background: rgba(0, 0, 0, 0.72); }
/* The minimap and its lines would only show through the window. */
body.settings-open .minimap, body.settings-open .zone-hud, body.settings-open #perf { visibility: hidden; }
/* Under the options strip and clear of the hotbar (64px) on screens tall enough to spare it. */
.overlay.settings .panel.settings-panel { max-height: calc(100vh - 6vh - 46px - 64px); max-height: calc(100dvh - 6vh - 46px - 64px); gap: 8px; }
@media (max-height: 520px) { .overlay.settings .panel.settings-panel { max-height: calc(100vh - 6vh - 40px); max-height: calc(100dvh - 6vh - 40px); } }
.settings-panel .settings-body { flex: 1 1 auto; min-height: 0; max-height: none; gap: 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.settings-panel .tabs { flex-wrap: nowrap; gap: 4px; }
.settings-panel .tabs .tab { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: clamp(13px, 2.2vmin, 16px); background: var(--box); box-shadow: inset 0 -2px 0 transparent; }
.settings-panel .tabs .tab.active { background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 -3px 0 var(--orange); }
.settings-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: rgba(0, 0, 0, 0.25); }
.settings-section > h3, .settings .settings-section > h3 { margin: 0; font-size: 15px; color: var(--orange); }
.settings-section > button.secondary { align-self: flex-start; }
.panel label.select-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.panel label.select-row select { min-width: 180px; max-width: 100%; }
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; }
.panel .subtabs .subtab { flex: 1 1 auto; padding: 5px 10px; font-size: 14px; background: var(--box); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.panel .subtabs .subtab:hover { background: var(--box-hover); }
.panel .subtabs .subtab.active { background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 1px var(--orange); }
.settings input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--orange); cursor: pointer; }
.settings input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; }
.settings input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--orange) var(--fill, 50%), rgba(255, 255, 255, 0.2) var(--fill, 50%)); }
.settings input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 1px 1px 0 #000; }
.settings input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.settings input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--orange); }
.settings input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: #fff; box-shadow: 1px 1px 0 #000; }
.settings input[type=range]:focus-visible { outline: none; }
.settings input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(249, 174, 26, 0.6); }
.settings .slider.pad-focus, .settings .check.pad-focus { outline: none; }
.settings .bind-table { margin-top: 2px; }
/* Fingers: bigger thumbs and rows. */
@media (pointer: coarse) {
  .settings input[type=range] { height: 36px; }
  .settings input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .settings input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
  .settings input[type=checkbox] { width: 24px; height: 24px; }
  .settings .check { min-height: 36px; }
}
/* Narrow windows: label and value on one line, the slider full width under them. */
@media (max-width: 560px) {
  .settings .slider { grid-template-columns: 1fr 52px; grid-template-areas: "label value" "range range"; row-gap: 0; }
  .settings .slider > span { grid-area: label; }
  .settings .slider > input { grid-area: range; }
  .settings .slider > output { grid-area: value; }
  .settings-section { padding: 8px; }
  .overlay.settings { padding-left: 6px; padding-right: 6px; }
  .settings .bind-table { grid-template-columns: 1fr auto auto auto; }
  .panel.settings-panel button.bind { min-width: 72px; }
}
/* (opened from the start screen, the start screen steps aside while the settings are up: #menu.behind, above) */

/* Touch controls (client/input/touch.js). The layer ignores pointers; its zone and buttons take them. */
.touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; user-select: none; -webkit-user-select: none; }
.touch-zone { position: absolute; left: 0; right: 0; top: 0; bottom: 72px; pointer-events: auto; touch-action: none; }
.stick-base { position: absolute; left: 0; top: 0; width: 112px; height: 112px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); background: var(--box); opacity: 0; pointer-events: none; }
.stick-base.active { opacity: 1; }
.stick-knob { position: absolute; left: 32px; top: 32px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.touch-buttons { position: absolute; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 76px 58px 58px; grid-auto-rows: 58px; gap: 10px; direction: rtl; align-items: center; justify-items: center; }
.touch-top { position: absolute; right: calc(172px + env(safe-area-inset-right, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); display: flex; gap: 8px; }
.tbtn { pointer-events: auto; touch-action: none; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 13px var(--font); color: #fff; text-shadow: var(--shadow); background: var(--box); border: 2px solid rgba(255, 255, 255, 0.25); direction: ltr; }
.tbtn.big { width: 76px; height: 76px; font-size: 15px; grid-row: span 2; }
.tbtn.small { width: 46px; height: 38px; border-radius: var(--r); }
.tbtn.on { background: rgba(249, 174, 26, 0.55); }
.tbtn.latched { border-color: var(--orange); color: var(--orange); }
.touch.ui .touch-zone, .touch.ui .touch-buttons, .touch.ui .stick-base { display: none; }
/* The inventory screen has its own Close and Chat in the options strip on touch (below): the top row steps aside rather
   than lie over the strip, the stations or the slots. */
body.inv-open .touch-top { display: none; }
.slot { touch-action: none; }
/* A phone held upright has no room for the row between the vitals and the minimap: in play it is a column on the right,
   under the zone line, beside the hints (moved to the left edge it lay over the vitals); with the inventory open, whose craft
   grid fills the right, it stays at the top left. */
@media (max-width: 700px) and (orientation: portrait) {
  .touch-top { top: calc(182px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); flex-direction: column; }
}
/* A phone held sideways with the touch controls up: the zone line sits under the menu row, where the buttons under the
   minimap can't cover it. */
@media (orientation: landscape) and (max-height: 500px) { body:has(.touch:not([hidden])) .zone-hud { top: calc(56px + env(safe-area-inset-top, 0px)); right: calc(172px + env(safe-area-inset-right, 0px)); } }
@media (max-height: 420px) { .touch-buttons { bottom: 64px; grid-template-columns: 64px 50px 50px; grid-auto-rows: 50px; gap: 8px; } .tbtn { width: 50px; height: 50px; font-size: 12px; } .tbtn.big { width: 64px; height: 64px; } }

/* Guide (client/ui/guide.js) and contextual hints (client/ui/hints.js; v1 #tutorialModal) */
.guide-body { display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.guide-section { display: flex; gap: 14px; align-items: flex-start; }
.guide-section h3 { margin: 0 0 4px; font-size: 17px; font-weight: normal; }
.guide-section p { margin: 0; line-height: 1.45; color: #eee; }
.guide-icon { flex: none; width: 46px; height: 46px; border-radius: var(--r); background-color: var(--box); }
.guide-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.guide-dots { color: var(--muted); font-size: 14px; }
.tip { position: fixed; left: 50%; bottom: 76px; transform: translate(-50%, 8px); max-width: min(560px, calc(100vw - 32px)); padding: 8px 14px; border-radius: var(--r); background: rgba(204, 68, 51, 0.92); border: 2px dotted #fff; font-size: 15px; line-height: 1.4; text-align: center; opacity: 0; transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
.tip.show { opacity: 1; transform: translate(-50%, 0); }
/* Controller navigation (client/input/uiNav.js) */
.pad-focus { outline: 3px solid var(--orange) !important; outline-offset: 2px; }
.pad-grab { box-shadow: 0 0 0 3px var(--green) inset, 0 0 12px var(--green); }
.pad-only { display: none; }
body.pad .pad-only { display: block; }
body.pad .inv-help:not(.pad-only) { display: none; }
.label.bad-karma { color: #f66; background: rgba(90, 0, 0, 0.55); box-shadow: 0 0 6px rgba(255, 40, 40, 0.6); }
.legal-note { font-size: 12px; opacity: 0.75; margin: 10px 0 0; line-height: 1.4; }
.legal-note a { color: inherit; }
/* The Wardrobe's Wear tab (client/ui/appearance.js; v1 #characteristicsDiv) */
/* Fixed sizes everywhere: long or locked option names never resize or reshape the window. */
.appearance-rows { display: flex; flex-direction: column; gap: 6px; flex: 0 0 330px; width: 330px; max-width: 100%; }
.appearance-row { display: grid; grid-template-columns: 90px 36px 1fr 36px; align-items: center; gap: 6px; }
.appearance-value { min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appearance-label { color: var(--muted); font-size: 14px; }
.label.bubble { background: rgba(255, 255, 255, 0.9); color: #111; text-shadow: none; border-radius: var(--r); padding: 3px 9px; max-width: 280px; white-space: normal; text-align: center; }
/* Friends panel (client/ui/friends.js; v1 #friendsDiv) */
/* Friends box (v1 #friendsDivTabs + #friendsDiv + .friendElement + .indicator). */
.friends-panel { width: 220px; margin: 0 4px 4px; pointer-events: auto; font-size: 15px; }
.friends-tabs { display: flex; margin-bottom: 4px; border-radius: var(--r); background: var(--box); }
/* v1 .tab: the icon is the whole tab, 16px, centred. */
.friends-tab { flex: 1 1 0; height: 26px; padding: 4px; border: none; border-radius: var(--r); background: transparent no-repeat center / 16px; cursor: pointer; }
.friends-tab.friends { background-image: url(/assets/src/img/hud/friends.svg); }
.friends-tab.ignored { background-image: url(/assets/src/img/hud/ignore.svg); }
.friends-tab:hover { background-color: var(--box); }
.friends-tab.active { background-color: rgba(0, 0, 0, 0.6); }
.friends-list { max-height: 240px; overflow-y: auto; border-radius: var(--r); background: var(--box); }
.friend-row { display: flex; align-items: center; padding: 4px; color: #fff; }
.indicator { flex: none; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--red); }
.indicator.online { background: var(--green); }
.friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: none; background: none; color: #fff; font: inherit; text-align: left; text-shadow: var(--shadow); }
button.friend-name { cursor: pointer; }
button.friend-name:hover { color: var(--orange); }
.friend-world { font-size: 11px; color: var(--muted); margin-left: 6px; }
.friend-remove { flex: none; margin-left: 4px; padding: 0 4px; border: none; background: none; color: #fff; font: 18px/1 var(--font); cursor: pointer; opacity: 0; text-shadow: var(--shadow); }
.friend-row:hover .friend-remove, .friend-remove:focus-visible { opacity: 1; }
.friend-remove:hover { color: var(--red); }
@media (hover: none) { .friend-remove { opacity: 0.8; } }
.friends-empty { padding: 6px; font-size: 13px; color: var(--muted); }
.friends-add { display: flex; gap: 4px; margin-top: 4px; }
.friends-add input { flex: 1; min-width: 0; padding: 4px 6px; border: none; border-radius: var(--r); background: var(--box); color: #fff; font: 14px var(--font); text-shadow: var(--shadow); }
.friends-add input::placeholder { color: #ccc; }
.friends-add button { padding: 4px 8px; border: none; border-radius: var(--r); background: var(--orange); color: #fff; font: 13px var(--font); text-shadow: var(--shadow); cursor: pointer; }
.friends-add button:hover { background: var(--orange-hover); }
.friends-status { font-size: 12px; color: var(--muted); padding: 2px 4px; }
.friends-status:empty { display: none; }
/* Admin-only entries (the options strip's Admin button). */
.options-strip .admin-only { display: none; }
body.admin .options-strip .admin-only { display: inline-block; }
/* Touch only: Close (the inventory) and Chat lead the strip. */
.options-strip .touch-only { display: none; }
body.touch-mode .options-strip .touch-only { display: inline-block; }
.options-strip .close { background: rgba(0, 0, 0, 0.55); }
body:not(.touch-mode) .options-strip .discord { border-bottom-left-radius: var(--r); }
.panel button.small { padding: 4px 9px; font-size: 13px; }

@media (max-width: 480px) {
  .panel { padding: 12px; }
  .panel h2 { font-size: 20px; }
  .slider { grid-template-columns: 1fr 1fr 40px; }
}
/* Inside the darker windows, v1's flat black boxes get a faint edge so they still read as buttons. */
.panel button.secondary, .panel select, .panel button.bind, .tabs, .chip, .score-list, .friends-list { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

#death button { box-shadow: none; }
/* Phones: shrink the toolbar to fit (--hotbar-scale, above) and stack vitals and hints above it instead of under it. */
@media (max-width: 520px) {
  .sack-hud { left: auto; right: 0; bottom: calc(100% + 6px); }
  .level { margin: 0.6vmin 0.6vmin 0.6vmin 0.4vmin; }
  .level .bar { min-width: 30px; min-height: 30px; }
  .friends-panel { width: 180px; }
  /* Inventory screen on a phone: equipment and backpack above the toolbar, vitals and minimap out of the way. */
  body.inv-open .minimap, body.inv-open .zone-hud, body.inv-open #perf { display: none; }
  /* The pause screen too: its options strip needs the top of a phone. */
  body.paused .minimap, body.paused .zone-hud, body.paused #perf { display: none; }
  .inv-container { bottom: calc(14px + 45px * var(--hotbar-scale, 0.66)); transform: translateX(-50%) scale(0.75); gap: 8px; }
  .zone-hud { bottom: 210px; }
  .tip { bottom: auto; top: calc(172px + env(safe-area-inset-top, 0px)); }
  /* (a notice while a hint shows up there: below it, not over it) */
  body:has(.tip.show) .notice { top: 52%; }
}
.overlay.friends-panel .panel { max-width: 460px; }
/* Windows taller than the screen (inventory + a station on a phone) scroll instead of being cut off. */
.overlay { overflow-y: auto; }
.overlay > .panel { margin: auto; }
/* Windows under the options strip keep their top edge fixed: switching tabs only changes the height,
   so the window never jumps while you are using it. */
.overlay.settings > .panel, .overlay.highscores > .panel, .overlay.guide > .panel, .overlay.wardrobe > .panel, .overlay.admin-window > .panel { margin: 0 auto; }
/* With a menu open, the aim text, crosshair and hints would show through the translucent windows. */
body.ui-open .target, body.ui-open #crosshair, body.ui-open .tip { visibility: hidden; }
body.third-person #crosshair, body.third-person .target { visibility: hidden; }

/* Chief (admin) panel: a Settings-style window (v1 public/client/chief.css colours and switches). */
.overlay.admin-window { z-index: 7; }
.panel .chief-btn {
  margin: 3px;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: #3c3c3c;
  color: #fff;
  text-shadow: var(--shadow, 1px 1px #000);
  font-size: 14px;
  cursor: pointer;
}
.panel .chief-btn:hover { background: #000; }
.chief-page { display: flex; flex-direction: column; gap: 10px; }
.chief-page[hidden] { display: none !important; }
.chief-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.chief-stack { display: flex; flex-direction: column; gap: 10px; }
.chief-section { align-items: stretch; gap: 2px; }
.chief-buttons { flex-direction: row; flex-wrap: wrap; align-items: center; }
.chief-buttons h3 { width: 100%; }
.chief-inline { display: flex; align-items: center; }
.panel .chief-inline input { width: 80px; min-width: 0; flex: 1 1 60px; margin: 3px; padding: 7px; border: 0; border-radius: 4px; font-size: 14px; color: #222; text-shadow: none; }

/* Toggle rows and iOS-style switches (v1 .chiefToggleRow / .chiefSwitch / .chiefSlider). */
.panel .chief-toggle-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 10px;
  background-color: #3c3c3c;
  margin: 3px;
  border-radius: 4px;
  cursor: pointer;
}
.chief-toggle-text { color: #fff; font-size: 14px; }
.chief-switch { position: relative; display: inline-block; flex: none; width: 50px; height: 26px; }
.chief-switch input { opacity: 0; width: 0; height: 0; }
.chief-slider { position: absolute; cursor: pointer; inset: 0; background-color: #555; transition: 0.3s; border-radius: 26px; }
.chief-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: 0.3s;
  border-radius: 50%;
}
.chief-switch input:checked + .chief-slider { background-color: #4a4; }
.chief-switch input:checked + .chief-slider::before { transform: translateX(24px); }
.chief-switch input:focus-visible + .chief-slider { outline: 2px solid var(--orange, #f9ae1a); outline-offset: 1px; }
/* Speed slider (the admin's own speed): a row like the toggles, the value turning orange when it isn't normal. */
.panel .chief-speed-row { display: grid; grid-template-columns: auto minmax(60px, 1fr) 40px auto; align-items: center; gap: 10px; padding: 5px 10px; margin: 3px; border-radius: 4px; background-color: #3c3c3c; }
.chief-speed-row output { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-size: 14px; }
.chief-speed-row.chief-speed-changed output { color: var(--orange, #f9ae1a); }
.panel .chief-speed-row .chief-btn { margin: 0; padding: 4px 8px; background: #555; }
.panel .chief-speed-row .chief-btn:hover { background: #000; }

/* ITEMS: sprite grid (v1 .inv buttons). */
.chief-items { align-items: center; }
.panel input.chief-search { width: min(320px, 100%); margin: 0 auto; padding: 7px 10px; border: 0; border-radius: 4px; font-size: 14px; color: #222; text-shadow: none; }
.chief-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.panel .chief-item {
  width: 40px;
  height: 40px;
  margin: 3px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: #3c3c3c;
  background-repeat: no-repeat;
  cursor: pointer;
}
.panel .chief-item:hover { background-color: #000; }
.chief-item[hidden] { display: none; }

.chief-wrap { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }

/* PLAYERS: v1 green (online) / red (offline, dead) cards. */
.chief-players { gap: 0; }
.chief-list-title { width: 100%; text-align: center; font-size: 16px; margin: 8px 0 2px; }
.chief-player { margin: 4px; padding: 8px; border-radius: 4px; font-size: 14px; color: #fff; text-align: center; min-width: 220px; }
.chief-online { background-color: #494; }
.chief-offline { background-color: #c33; }
.chief-player-name { font-size: 16px; }
.chief-tags { font-size: 12px; color: #eee; }
.chief-dead { text-decoration: line-through; }
.chief-player-info { font-size: 12px; margin: 2px 0 4px; }
.chief-player-buttons { display: flex; flex-wrap: wrap; justify-content: center; }
.panel .chief-player .chief-btn { font-size: 13px; padding: 5px 8px; margin: 2px; }

/* Wipes: red buttons. */
.panel .chief-danger .chief-btn { background: #822; }
.panel .chief-danger .chief-btn:hover { background: #000; }

/* ==== Shop: name styles and Character panel locks (client/ui/nameStyle.js, client/ui/appearance.js) ====
   Appended block owned by the shop work; name tags (.label) and chat lines use the same classes. */
.ns-name.ns-gradient { -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(1px 1px 0 #000); }
.ns-badge { display: inline-block; margin-right: 0.25em; font-size: 0.95em; line-height: 1; text-shadow: none; vertical-align: -0.05em; }
.ns-member { margin-left: 0.25em; color: var(--orange); }
.appearance-value.locked { color: var(--orange); }

/* ---- Build menu (client/ui/buildMenu.js) ------------------------------------------------------ */
/* Above the touch controls' top row and the vitals column (like the settings window). */
.build-menu { z-index: 7; }
body.build-open .toolbar, body.build-open .touch-top { visibility: hidden; }
.build-panel { width: min(880px, 100%); max-height: 100%; overflow: auto; padding: 10px 14px; border-radius: var(--r); background: var(--panel); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.build-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.build-head .ui-title { margin: 0; }
.build-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.build-tab { border: none; border-radius: var(--r); padding: 5px 10px; background: var(--box); color: #fff; text-shadow: var(--shadow); cursor: pointer; font-size: 13px; }
.build-tab:hover { background: var(--box-hover); }
.build-tab.active { background: var(--orange); }
.build-close { border: none; background: var(--box); color: #fff; font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: var(--r); cursor: pointer; }
.build-close:hover { background: var(--red); }
/* Groups flow side by side (Foundations and Floors share a row...), each a small heading over its pieces. */
.build-groups { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.build-group { display: flex; flex-direction: column; gap: 3px; }
.build-group-name { font-size: 12px; color: var(--muted); }
.build-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.build-cell { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px; border: 2px solid transparent; border-radius: var(--r); background: var(--box); color: #fff; text-shadow: var(--shadow); cursor: pointer; font-size: 11px; line-height: 1.15; }
.build-cell:hover { background: var(--box-hover); }
.build-cell.chosen { border-color: var(--orange); }
.build-cell.short .build-cost { color: #f86; }
.build-icon { width: 48px; height: 48px; background-repeat: no-repeat; }
.build-name { text-align: center; }
.build-cost { color: var(--tan); }
.build-help { margin: 0; font-size: 12px; color: var(--muted); }
.build-height { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #fff; text-shadow: var(--shadow); }
.build-height-name { color: var(--muted); font-size: 12px; }
.build-height-value { min-width: 84px; text-align: center; color: var(--tan); }
.build-height-note { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.build-step { border: none; border-radius: var(--r); padding: 4px 10px; background: var(--box); color: #fff; text-shadow: var(--shadow); cursor: pointer; font-size: 12px; }
.build-step:hover { background: var(--box-hover); }
@media (max-width: 600px) {
  .build-panel { padding: 8px; }
  .build-cell { width: 70px; }
}
/* Small screens (phones, either way up): one column, a shorter list and no help line, in a darker window
   drawn above the inventory it covers (so a tap on its buttons never lands on a slot underneath). */
@media (max-width: 900px), (max-height: 520px) {
  .sack-rows, .sack-rows.two { grid-template-columns: minmax(0, 1fr); max-height: 30vh; }
  .station[data-station="sack"] { background: var(--panel); }
  .station[data-station="sack"] .inv-help { display: none; }
  .inv-side:has(.station[data-station="sack"]) { z-index: 1; width: min(360px, calc(100vw - 16px)); }
}
/* Phones held sideways: the inventory screen's quick craft fills the top right, where the minimap and the zone line
   would show through it. */
@media (max-height: 520px) {
  body.inv-open .minimap, body.inv-open .zone-hud, body.inv-open #perf { display: none; }
}
/* Phones held sideways: the list takes the height left between the window's title and the toolbar (30vh is
   only three rows there). */
@media (max-height: 520px) {
  .sack-rows, .sack-rows.two { max-height: max(30vh, calc(100vh - 200px)); }
}
/* Tall phone screens have room under the vitals column: the sack window sits there, clear of it. */
@media (max-width: 700px) and (orientation: portrait) and (min-height: 700px) {
  .inv-side:has(.station[data-station="sack"]) { top: 300px; }
}

/* ---- Settings header extras (Report a bug, admin dashboard link) and the bug report window ------ */
.settings-extras { display: flex; gap: 8px; margin-left: auto; margin-right: 34px; flex-wrap: wrap; justify-content: flex-end; }
.settings-extras a.btn { display: inline-flex; align-items: center; padding: 4px 9px; font-size: 13px; border-radius: var(--r); background: var(--orange); color: #fff; text-decoration: none; text-shadow: var(--shadow); }
.settings-extras a.btn:hover { background: var(--orange-hover); }
.settings-extras a.btn[hidden] { display: none; }
.overlay.bug-report { z-index: 9; }
.overlay.bug-report .panel { max-width: 440px; }
.overlay.bug-report .hint { margin: 0; text-align: center; }
textarea.bug-text { height: 8em; font-family: var(--font); font-size: 15px; }
.bug-status { min-height: 1.2em; }

/* ---- Guild window (client/ui/guildPanel.js): found / invitations, then the members with rank badges ---------------- */
.overlay.guild { z-index: 7; align-items: flex-start; padding-top: calc(6vh + 30px); background: transparent; pointer-events: none; }
.overlay.guild .panel.guild-panel { position: relative; max-width: 560px; background: rgba(0, 0, 0, 0.8); pointer-events: auto; gap: 8px;
  max-height: calc(100vh - 6vh - 46px - 64px); max-height: calc(100dvh - 6vh - 46px - 64px); }
@media (max-height: 520px) { .overlay.guild .panel.guild-panel { max-height: calc(100dvh - 6vh - 40px); } }
.guild-chip { margin-right: 40px; color: #fff; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
/* (a dark halo as well as the drop shadow: the darker colours read on grass, sand and the name tags' grey alike) */
.guild-tag, .ns-guild { font-weight: bold; text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000; }
.guild-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: rgba(0, 0, 0, 0.25); }
.guild-section > h3 { margin: 0; font-size: 15px; font-weight: normal; color: var(--orange); }
.guild-form { display: flex; gap: 6px; }
.guild-form input { flex: 1 1 auto; min-width: 0; }
.panel .guild-form input.guild-tag-input { flex: 0 0 5.5em; text-transform: uppercase; }
.guild-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.panel button.guild-swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.45); }
.panel button.guild-swatch.on { box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px rgba(0, 0, 0, 0.45); }
.panel button.guild-swatch:hover { filter: brightness(1.12); }
.guild-problem { margin: 0; color: #ff8a70; font-size: 13px; }
.guild-problem:empty { display: none; }
.guild-summary { margin: 0; color: var(--muted); font-size: 13px; }
.guild-list { display: flex; flex-direction: column; gap: 3px; }
.guild-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r); background: var(--box); min-height: 38px; }
.guild-row .guild-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.guild-row:not(.online) .guild-name { color: var(--muted); }
.guild-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.guild-row.online .guild-dot { background: #5d5; box-shadow: 0 0 4px #5d5; }
.guild-rank { flex: none; font-size: 11px; padding: 2px 7px; border-radius: 9px; background: rgba(255, 255, 255, 0.14); color: #ddd; }
.guild-rank.r3 { background: var(--orange); color: #241500; text-shadow: none; }
.guild-rank.r2 { background: rgba(91, 187, 51, 0.85); color: #fff; }
.guild-acts { flex: none; display: flex; gap: 4px; }
.panel .guild-acts button { padding: 5px 8px; font-size: 13px; }
.guild-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.guild-ranks { font-size: 12px; }
@media (pointer: coarse) { .panel .guild-acts button { min-height: 36px; } }
@media (max-width: 560px) {
  .guild-row { flex-wrap: wrap; row-gap: 4px; }
  .guild-row .guild-acts { width: 100%; justify-content: flex-end; }
  .guild-row.guild-invite .hint { order: 3; }
  .guild-foot button { flex: 1 1 auto; }
}
/* Guild chat: the tag in the guild's colour, the line in the chat's; a faint edge tells guild lines from the rest. */
.chat-line.guild { box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.35); padding-left: 4px; }
/* ---- Bounty Board window (client/ui/bountyPanel.js): the hunt, the wanted, the paid bounties, placing one ------------ */
/* (the Guild window's shell and rows: guild-section, guild-row, guild-acts) */
.overlay.bounty { z-index: 7; align-items: flex-start; padding-top: calc(6vh + 30px); background: transparent; pointer-events: none; }
.overlay.bounty .panel.bounty-panel { position: relative; max-width: 600px; background: rgba(12, 10, 8, 0.96); pointer-events: auto; gap: 8px;
  max-height: calc(100vh - 6vh - 46px - 64px); max-height: calc(100dvh - 6vh - 46px - 64px); }
@media (max-height: 520px) { .overlay.bounty .panel.bounty-panel { max-height: calc(100dvh - 6vh - 40px); } }
.bounty-chip { margin-right: 40px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bounty-chip.hunting { background: rgba(200, 40, 30, 0.85); color: #fff; }
.bounty-chip.hunted { background: rgba(230, 130, 20, 0.9); color: #1a0d00; }
.bounty-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.bounty-section .hint { margin: 0; }
/* (a hint shrinks and wraps rather than being cut off: "karma bounty · 52 min left · not in the world now") */
.bounty-row .hint { flex: 0 1 auto; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.bounty-empty { font-size: 13px; }
.bounty-karma { flex: none; min-width: 30px; padding: 2px 6px; border-radius: 9px; background: rgba(200, 30, 30, 0.85); color: #fff; font-size: 12px; text-align: center; }
.bounty-bars { flex: none; display: flex; align-items: center; gap: 2px; color: var(--orange); font-size: 14px; }
.bounty-bar-icon { display: inline-block; width: 40px; height: 40px; margin: -8px -6px -8px -10px; }
.bounty-mark { flex: none; width: 22px; text-align: center; }
.bounty-row.hunted { box-shadow: inset 3px 0 0 #ff9a1f; }
.bounty-hunt .bounty-row.online { box-shadow: inset 3px 0 0 #ff3b2f; }
.panel .bounty-acts button, .panel .guild-acts button.bounty-take { white-space: nowrap; }
/* A button that can't be pressed now says why in its text (and title): it looks it, plain and greyed, not orange. */
.panel .guild-acts button:disabled, .panel .guild-acts button.off { opacity: 1; background: rgba(255, 255, 255, 0.07); color: #aaa;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); cursor: default; text-shadow: none; }
.bounty-players { max-height: 210px; overflow-y: auto; overscroll-behavior: contain; }
.bounty-rules { font-size: 12px; }
@media (max-width: 560px) {
  /* (on a phone the HUD lines sit right behind the window's head: no seeing through it there) */
  .overlay.bounty .panel.bounty-panel { background: rgba(12, 10, 8, 0.97); }
  .bounty-row { flex-wrap: wrap; row-gap: 4px; }
  .bounty-row .guild-acts { width: 100%; justify-content: flex-end; }
  .bounty-row .hint { order: 3; }
}
/* The hunt line under the zone line: red while we hunt, orange while we are hunted. */
.hunt-hud { position: fixed; right: 8px; top: 172px; max-width: min(420px, 60vw); padding: 3px 8px; border-radius: var(--r);
  background: rgba(150, 20, 15, 0.82); color: #fff; font-size: 13px; text-align: right; box-shadow: inset 0 0 0 1px rgba(255, 90, 70, 0.6); }
.hunt-hud.hunted { background: rgba(170, 85, 0, 0.85); box-shadow: inset 0 0 0 1px rgba(255, 170, 60, 0.7); }
body.settings-open .hunt-hud { visibility: hidden; }
@media (orientation: landscape) and (max-height: 500px) { body:has(.touch:not([hidden])) .hunt-hud { top: calc(78px + env(safe-area-inset-top, 0px)); right: calc(172px + env(safe-area-inset-right, 0px)); } }
@media (max-width: 520px) {
  .hunt-hud { font-size: 12px; max-width: 62vw; }
  body.inv-open .hunt-hud, body.paused .hunt-hud { display: none; }
}

/* The map: a guildmate's or a marked spot's name under the pointer; a crosshair where a click marks a spot. */
.panel.map-panel { position: relative; }
.map-legend, .map-guild-hint { margin: -4px 0 0; max-width: min(760px, 92vw); text-align: center; font-size: 13px; }
.map-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); padding: 3px 8px; border-radius: var(--r); background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; z-index: 2; }

/* ---- Trading Post window (client/ui/tradingPanel.js): listings, the till, the linked chest, the sales log ---------- */
/* (the Guild window's shell and rows, as the bounty board: guild-section, guild-row, guild-acts) */
.overlay.trade { z-index: 7; align-items: flex-start; padding-top: calc(6vh + 30px); background: transparent; pointer-events: none; }
.overlay.trade .panel.trade-panel { position: relative; max-width: 640px; background: rgba(12, 10, 8, 0.96); pointer-events: auto; gap: 8px;
  max-height: calc(100vh - 6vh - 46px - 64px); max-height: calc(100dvh - 6vh - 46px - 64px); }
@media (max-height: 520px) { .overlay.trade .panel.trade-panel { max-height: calc(100dvh - 6vh - 40px); } }
.trade-chip { margin-right: 40px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-chip.mine { background: rgba(249, 174, 26, 0.85); color: #1a0d00; }
.trade-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.trade-section .hint { margin: 0; }
.trade-section .guild-row .hint { flex: 0 1 auto; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.trade-empty, .trade-rules { font-size: 12px; }
.trade-status { margin: 0; padding: 5px 10px; border-radius: var(--r); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 13px; }
.trade-section .guild-row .guild-name { white-space: normal; overflow-wrap: anywhere; }
.trade-warn { margin: 0; padding: 6px 10px; border-radius: var(--r); background: rgba(190, 70, 20, 0.85); color: #fff; font-size: 13px; }
.trade-add { justify-content: flex-start; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.trade-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; border-radius: var(--r); background: var(--box); min-width: 0; }
.trade-card.paused { opacity: 0.75; }
.trade-goods { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trade-slot { flex: none; }
.trade-count { position: absolute; right: 2px; bottom: 5px; font-size: 12px; text-shadow: 1px 1px #000; }
.trade-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trade-name { font-size: 14px; overflow-wrap: anywhere; }
.trade-meta { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.trade-price { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13px; color: var(--orange); }
.trade-for { color: var(--muted); font-size: 12px; }
.trade-price-icon { flex: none; display: inline-block; width: 30px; height: 30px; margin: -4px -2px; background-repeat: no-repeat; }
.trade-price-text { min-width: 0; overflow-wrap: anywhere; }
.trade-pays { margin: 0; font-size: 11px; }
.trade-acts { justify-content: flex-end; flex-wrap: wrap; }
.panel .trade-acts button { white-space: nowrap; }
.trade-flag { position: absolute; right: 6px; top: 6px; padding: 1px 6px; border-radius: 8px; background: rgba(200, 40, 30, 0.85); color: #fff; font-size: 11px; }
.trade-till-items { display: flex; flex-wrap: wrap; gap: 4px; }
.trade-sale { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); }
.trade-sale-icon { flex: none; display: inline-block; width: 26px; height: 26px; background-repeat: no-repeat; }
/* The pickers (the game's popups, wider): the bag, and every item a price can be. */
/* (opaque: the trading window behind would read through the item grid) */
.panel.modal-panel.trade-picker { max-width: 560px; max-height: calc(100dvh - 24px); background: rgb(16, 13, 10); }
.trade-note, .trade-chosen { margin: 0; font-size: 13px; text-align: center; }
.trade-hover { margin: -4px 0 0; min-height: 1.2em; font-size: 12px; text-align: center; }
.trade-bag { display: grid; grid-template-columns: repeat(auto-fill, 45px); gap: 4px; justify-content: center; max-height: 40dvh; overflow-y: auto; }
.trade-bag button.slot:disabled { opacity: 0.3; }
.panel .trade-bag button.slot, .panel .trade-items button.slot { padding: 0; background: var(--box); }
.panel .trade-bag button.slot.selected, .panel .trade-items button.slot.selected { background: var(--orange); box-shadow: 0 0 0 2px #fff; }
.trade-search { width: 100%; box-sizing: border-box; }
.trade-tabs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.panel .trade-tabs button, .panel .trade-tiers button { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.panel .trade-tabs button.selected, .panel .trade-tiers button.selected { background: var(--orange); color: #fff; }
.trade-items { display: grid; grid-template-columns: repeat(auto-fill, 45px); gap: 4px; justify-content: center; max-height: 34dvh; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; }
.trade-stepper, .trade-tiers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.panel .trade-stepper button { min-width: 38px; padding: 4px 10px; font-size: 18px; }
.panel input.trade-qty { width: 3.4em; padding: 4px 4px; text-align: center; font-size: 18px; }
.panel .trade-stepper button.trade-minus10, .panel .trade-stepper button.trade-plus10 { font-size: 14px; }
@media (pointer: coarse) { .panel .trade-stepper button, .panel .trade-tabs button, .panel .trade-tiers button { min-height: 36px; } }
@media (max-width: 560px) {
  .overlay.trade .panel.trade-panel { background: rgba(12, 10, 8, 0.97); }
  .trade-grid { grid-template-columns: 1fr; }
  .trade-section .guild-row { flex-wrap: wrap; row-gap: 4px; }
  .trade-section .guild-row .guild-acts { width: 100%; justify-content: flex-end; }
}

/* ==== Wardrobe: Wear, Shop, Collection (client/ui/wardrobe.js), Get Crowns (client/ui/getCrowns.js), the Shop button ====
   The game's look: Hammersmith One with the 1px shadow, translucent black boxes with 4px corners, the orange; Edo for the
   title. Gold (#f2c230) is the members' colour, as their star. */
.overlay.wardrobe { z-index: 7; }
.panel.wardrobe-panel { max-width: 1080px; width: 100%; padding: 0; gap: 0; background: rgba(0, 0, 0, 0.72) !important;
  height: min(640px, calc(100vh - 6vh - 46px - 64px)); height: min(640px, calc(100dvh - 6vh - 46px - 64px)); overflow: hidden; }
/* (under the options strip and clear of the hotbar, like Settings; short windows take the hotbar's room too) */
@media (max-height: 560px) { .panel.wardrobe-panel { height: calc(100vh - 6vh - 40px); height: calc(100dvh - 6vh - 40px); } }
body.wardrobe-open .minimap, body.wardrobe-open .zone-hud, body.wardrobe-open #perf, body.wardrobe-open .hunt-hud { visibility: hidden; }
.coin { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.35em; border-radius: 50%; vertical-align: -0.12em; flex: none;
  background: radial-gradient(circle at 35% 35%, #ffe9a0, #e0a526 60%, #a8801c); box-shadow: inset 0 0 0 1px #6b4e0e; }
.ward-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: rgba(0, 0, 0, 0.3); flex-wrap: wrap; }
.panel .ward-title { margin: 0 12px 0 0; font: clamp(24px, 3.6vmin, 30px) "Edo", var(--font); letter-spacing: 1px; color: var(--orange); text-align: left; }
.ward-tabs { display: flex; gap: 4px; }
.wardrobe-panel .ward-tab { padding: 8px 16px; min-height: 38px; background: var(--box); color: #ddd; }
.wardrobe-panel .ward-tab:hover { background: var(--box-hover); }
.wardrobe-panel .ward-tab.on { background: var(--orange); color: #fff; }
.ward-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ward-balance { font-size: 18px; white-space: nowrap; }
.wardrobe-panel .ward-ghost, .get-crowns .ward-ghost { background: var(--box); color: #fff; }
.wardrobe-panel .ward-ghost:hover { background: var(--box-hover); }
.wardrobe-panel .ward-close { width: 38px; min-height: 38px; padding: 0; font-size: 18px; }
.wardrobe-panel .ward-close:hover { color: var(--red); background: var(--box-hover); }
.ward-body { display: flex; gap: 14px; padding: 14px; min-height: 0; flex: 1 1 auto; }
.ward-side { flex: 0 0 260px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ward-stage { position: relative; flex: 1 1 auto; min-height: 260px; border-radius: var(--r); background: var(--box); overflow: hidden; }
.ward-preview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.ward-try { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--r); background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.ward-try[hidden], .ward-takeoff[hidden] { display: none; }
.ward-try-tag { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ward-try-name { font-size: 16px; }
.ward-try-colors { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ward-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
.ward-box[hidden] { display: none; }
.ward-box { display: flex; flex-direction: column; gap: 12px; }
.ward-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #ddd; }
.ward-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); display: inline-block; flex: none; }
.ward-dot.radiant { box-shadow: 0 0 6px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.ward-chips { display: flex; flex-wrap: wrap; gap: 3px 10px; min-height: 16px; }

/* Wear */
.ward-wear .appearance-rows { flex: none; width: 100%; max-width: 440px; }
.ward-wear .wear-status { min-height: 1.4em; }
.ward-wear .wear-status.wardrobe-note { color: var(--orange); }
.wardrobe-panel .wear-save { align-self: flex-start; min-width: 120px; }

/* Shop */
.ward-shop-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ward-shop-title { display: flex; flex-direction: column; gap: 2px; }
.ward-shop-title h3 { margin: 0; font-size: 20px; font-weight: normal; }
.ward-turnover { font-size: 13px; color: var(--muted); }
.wardrobe-panel .ward-refresh { margin-left: auto; display: inline-flex; align-items: center; }
.ward-shop-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.ward-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ward-tile { display: flex; flex-direction: column; border-radius: var(--r); background: var(--box); overflow: hidden; position: relative; min-height: 270px; }
.ward-tile.trying { box-shadow: inset 0 0 0 2px var(--orange); }
.wardrobe-panel .ward-art { flex: 1 1 auto; min-height: 130px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%); }
.wardrobe-panel .ward-art:hover { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%); }
.ward-art-img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; display: block; }
.ward-art-img.name { aspect-ratio: auto; display: flex; align-items: center; justify-content: center; max-width: none; font-size: 18px; padding: 8px; }
.ward-info { padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.ward-tag { align-self: flex-start; padding: 3px 7px; border-radius: 3px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; background: var(--box-strong); }
.ward-tag.featured { background: #fff; color: #222; text-shadow: none; }
.ward-tag.deal { background: var(--orange); }
.ward-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wardrobe-panel .ward-buy, .wardrobe-panel .ward-wear-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; }
.ward-buy-row { display: flex; align-items: center; gap: 8px; }
.ward-buy-row .ward-buy { flex: 1; }
.ward-was { font-size: 13px; color: #aaa; }
.ward-owned { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; }
.ward-owned-mark { color: #8fe0c0; font-size: 14px; white-space: nowrap; }
.ward-wearing { color: var(--muted); font-size: 14px; }
.ward-members { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--r); background: rgba(242, 194, 48, 0.07); box-shadow: inset 0 0 0 1px rgba(242, 194, 48, 0.4); }
.ward-members-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ward-members-title { font-size: 15px; color: #f2c230; }
.ward-members-odds { font-size: 12px; color: #e8d9a8; }
.ward-members-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ward-members .ward-tile { background: rgba(0, 0, 0, 0.35); }
.ward-tile.covered { min-height: 200px; background: linear-gradient(160deg, rgba(60, 44, 8, 0.75), rgba(0, 0, 0, 0.6)); box-shadow: inset 0 0 0 1px rgba(242, 194, 48, 0.55); }
.ward-veil { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(242, 194, 48, 0.06) 0 10px, rgba(0, 0, 0, 0) 10px 20px); }
.ward-glow { position: absolute; width: 110px; height: 90px; border-radius: 50%; filter: blur(22px); opacity: 0.85;
  background: radial-gradient(circle, #f2c230 0%, #a8801c 55%, transparent 72%); box-shadow: 0 0 60px 20px rgba(242, 194, 48, 0.35); }
.ward-lock { position: relative; filter: drop-shadow(0 0 8px rgba(242, 194, 48, 0.7)); display: flex; }
.ward-q { position: absolute; right: 10px; top: 6px; font: 26px "Edo", var(--font); color: #f2c230; opacity: 0.8; }
.wardrobe-panel .ward-gold { background: #f2c230; color: #2a1606; text-shadow: none; }
.wardrobe-panel .ward-gold:hover { background: #d9ad28; }
.wardrobe-panel .ward-signin { align-self: flex-start; }

/* Collection */
.ward-coll-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.ward-coll-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ward-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.wardrobe-panel .ward-pill { padding: 6px 13px; border-radius: 999px; font-size: 14px; background: var(--box); color: #ddd; }
.wardrobe-panel .ward-pill:hover { background: var(--box-hover); }
.wardrobe-panel .ward-pill.on { background: #fff; color: #222; text-shadow: none; }
.ward-line { margin: 0; font-size: 14px; color: var(--muted); }
.ward-coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ward-coll-grid.names { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wardrobe-panel .ward-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: left; border-radius: var(--r); background: var(--box); color: #fff; }
.wardrobe-panel .ward-card:hover { background: var(--box-hover); }
.wardrobe-panel .ward-card.on { box-shadow: inset 0 0 0 2px var(--orange); }
.ward-card.name { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r); background: var(--box); }
.ward-card-art { display: flex; align-items: center; justify-content: center; height: 76px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.ward-card-art .ward-art-img { width: 76px; }
.ward-card-art.name { height: 52px; font-size: 17px; }
.ward-card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ward-card-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ward-card-sub { font-size: 12px; color: #aaa; }
.ward-mark { font-size: 11px; white-space: nowrap; }
.ward-mark.owned { color: #8fe0c0; }
.ward-mark.shop { color: var(--orange); }
.ward-mark.member { color: #f2c230; }
.ward-coll-side { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r); background: rgba(0, 0, 0, 0.35); position: sticky; top: 0; }
.ward-coll-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ward-coll-side-head h3 { margin: 0; font-size: 19px; font-weight: normal; }
.ward-coll-count { font-size: 13px; color: var(--muted); }
.ward-picked { color: #fff; }
.ward-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.wardrobe-panel .ward-sw { width: 100%; aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.wardrobe-panel .ward-sw.on { outline: 2px solid #fff; outline-offset: 2px; }
.wardrobe-panel .ward-sw.own { background: conic-gradient(#b3172b 0 25%, #e8c56a 0 50%, #2f6b2f 0 75%, #27408b 0); }
.ward-radiant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ward-radiant > span { flex: 1 0 100%; }
.wardrobe-panel .ward-radiant .ward-sw { width: 28px; flex: none; }
.ward-coll-note { padding: 10px; border-radius: var(--r); background: rgba(0, 0, 0, 0.35); font-size: 14px; color: var(--muted); }
.ward-coll-note .ward-buy { width: 100%; }

/* Buy confirm (a dialog.js modal) */
.panel.modal-panel.ward-confirm { max-width: 460px; }
.ward-confirm-item { display: flex; gap: 14px; align-items: center; }
.ward-confirm-art { width: 110px; height: 96px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--r); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ward-confirm-art .ward-art-img { width: 96px; }
.ward-confirm-text { display: flex; flex-direction: column; gap: 5px; }
.ward-confirm-name { font-size: 20px; }
.ward-confirm-price { color: #ddd; }
.ward-sums { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 10px 14px; border-radius: var(--r); background: rgba(0, 0, 0, 0.35); font-size: 15px; }
.ward-sums dt { color: #bbb; }
.ward-sums dd { margin: 0; text-align: right; }

/* Get Crowns (a dialog.js modal) */
.panel.modal-panel.get-crowns { position: relative; max-width: 600px; }
.panel .get-crowns .modal-close, .get-crowns .modal-close { position: absolute; right: 6px; top: 4px; padding: 0 8px; border: none; background: none; font-size: 20px; color: #fff; }
.get-crowns .modal-close:hover { color: var(--red); background: none; }
.gc-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.get-crowns .gc-pack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; padding: 8px 4px; background: var(--box); }
.get-crowns .gc-pack:hover { background: var(--box-hover); }
.get-crowns .gc-pack.on { background: rgba(249, 174, 26, 0.18); box-shadow: inset 0 0 0 2px var(--orange); }
.get-crowns .gc-pack:disabled:hover { background: var(--box); }
.gc-amt { font-size: 19px; }
.gc-bonus { font-size: 12px; color: var(--orange); }
.gc-price { font-size: 13px; color: var(--muted); }
.gc-member { display: flex; flex-direction: column; gap: 6px; }
.gc-member-price { font-size: 20px; }
.gc-perks { margin: 0; padding-left: 18px; font-size: 14px; color: #ddd; display: flex; flex-direction: column; gap: 2px; }
.gc-checkout { min-height: 200px; border-radius: var(--r); background: #fff; overflow: auto; max-height: 56vh; }
.gc-checkout[hidden] { display: none; }
.panel .gc-consent { align-items: flex-start; font-size: 13px; color: #ccc; line-height: 1.4; }
.panel .gc-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--orange); }
.get-crowns .gc-pay[hidden], .panel .gc-consent[hidden] { display: none; }

/* The Shop button under the minimap, and the start screen's chip */
.shop-hud { position: fixed; right: 8px; top: 172px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: none; border-radius: var(--r);
  background: var(--box-strong); color: #fff; font: 15px var(--font); letter-spacing: 0.6px; text-shadow: var(--shadow); cursor: pointer; pointer-events: auto; z-index: 6; }
.shop-hud[hidden] { display: none; }
.shop-hud:hover { background: rgba(0, 0, 0, 0.75); }
.shop-hud .shop-key { font-size: 12px; color: #bbb; }
.shop-hud .shop-key:empty { display: none; }
.shop-hud .shop-dot { position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #000; }
.shop-hud .shop-dot[hidden] { display: none; }
.hunt-hud { top: 210px; }
body.dead .shop-hud, body.inv-open .shop-hud, body.settings-open .shop-hud, body.wardrobe-open .shop-hud { display: none !important; }
/* (touch: the touch layer lies over the HUD, so its own top row has Shop instead) */
body.touch-mode .shop-hud { display: none !important; }
.start-shop { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.55);
  color: #fff; font: 14px var(--font); letter-spacing: 0.6px; text-shadow: var(--shadow); cursor: pointer; white-space: nowrap; }
.start-shop:hover { background: rgba(0, 0, 0, 0.7); }

/* Narrow windows and phones: the preview on top, one column. */
@media (max-width: 820px) {
  .ward-body { flex-direction: column; overflow-y: auto; }
  .ward-side { flex: none; }
  .ward-stage { min-height: 220px; height: 34vh; }
  .ward-main { overflow: visible; }
  .ward-shop-grid, .ward-coll-layout { grid-template-columns: minmax(0, 1fr); }
  .ward-slots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .gc-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ward-head-right { margin-left: 0; width: 100%; justify-content: flex-end; }
  .overlay.wardrobe { padding-left: 6px; padding-right: 6px; }
}