@font-face { font-family: Geist; src: url('./assets/Geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* Design tokens. Radius 8/12/16/pill, type 11/12/13/15/22, one 44 px height for everything in the top bar.
   The --top/--left/--right/--bottom edges include the safe-area insets (notches, home bars). */
:root {
  --paper: #fffbf2; --paper-2: #f5efe2; --paper-3: #ebe3d1; --ink: #1d2126; --muted: #5f646b; --line: #e3dccb;
  --cobalt: #2f4bff; --cobalt-ink: #243ed8; --gold: #d9a93a; --maroon: #7f2633; --shadow: 0 6px 24px rgba(30, 24, 10, .14);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --radius: var(--r-lg);
  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px; --t-xl: 22px;
  --hud-h: 44px; --edge: 16px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: calc(env(safe-area-inset-bottom, 0px) + var(--ctl-lift, 0px));   /* PHONE CONTROLS: Controls height (ui/touch-settings.js) */ --safe-l: env(safe-area-inset-left, 0px);
  --top: calc(var(--safe-t) + var(--edge)); --left: calc(var(--safe-l) + var(--edge)); --right: calc(var(--safe-r) + var(--edge)); --bottom: calc(var(--safe-b) + 18px);
  --rail-top: calc(var(--top) + var(--hud-h) + 10px);
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always wins over a component's own display */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--cobalt-ink); outline-offset: 2px; }
html, body { margin: 0; height: 100%; background: #e9e2d0; overflow: hidden; }
#app { position: fixed; inset: 0; }
#scene { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: var(--t-sm); font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(255, 251, 242, .92); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: opacity .2s; }
.tag.crowd { opacity: 0; }   /* a player tag right next to yours, or one with no room left on screen */
.tag.you { background: var(--cobalt); color: #fff; }
.tag.place { font-size: var(--t-md); padding: 5px 11px; background: rgba(29, 33, 38, .82); color: #fff; }
.tag.place.big { font-size: var(--t-lg); letter-spacing: .02em; }
.tag.statue { background: rgba(255, 251, 242, .95); font-size: var(--t-xs); }

/* The top bar: brand on the left, then sound, Games, your profile and your character, all 44 px tall */
.hud { position: absolute; z-index: 2; }
.hud-top { top: var(--top); left: var(--left); right: var(--right); display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; height: var(--hud-h); background: var(--paper); padding: 0 14px 0 8px; border-radius: var(--r-md); box-shadow: var(--shadow); color: inherit; text-decoration: none; flex: none; }
.brand strong { display: block; font-size: var(--t-lg); line-height: 1.15; }
.brand small { display: block; max-width: 170px; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); background: url('./assets/printer-mark.png') center / contain no-repeat, #f1e8d4; image-rendering: pixelated; }
.brand-mark.big { width: 64px; height: 64px; border-radius: var(--r-md); }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.pill { display: flex; align-items: center; gap: 8px; height: var(--hud-h); min-width: 44px; border: 0; cursor: pointer; background: var(--paper); color: var(--ink); padding: 0 16px; border-radius: var(--r-pill); box-shadow: var(--shadow); font: inherit; font-size: var(--t-lg); font-weight: 600; white-space: nowrap; flex: none; }
.pill:hover { background: #fff; }
.pill .ink { font-size: var(--t-xs); font-weight: 700; color: var(--cobalt-ink); background: #e9edff; padding: 3px 8px; border-radius: var(--r-pill); min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
.pill-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-left: -8px; flex: none; }
.pill-label { display: none; }
#open-profile::before { content: none !important; }   /* the label is real markup now (.pill-label); an older release stylesheet added it with ::before */
#profile-name { min-width: 9ch; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }   /* room for "Guest 1234" before the room answers; long names end in ... */
#open-picker { padding: 0 6px 0 7px; gap: 10px; }
#open-games { min-width: 146px; justify-content: center; }   /* room for the quest count before it arrives, so the bar never shifts */
.pick-face { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #dfe5ff; box-shadow: inset 0 0 0 2px #fff; }
.pick-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.5); transform-origin: 50% 18%; }
.pick-face b { font-size: var(--t-md); font-weight: 800; color: var(--cobalt-ink); }
#current-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-cta { background: var(--ink); color: #fff; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 700; }

/* Emotes, bottom center */
.emotes { left: 50%; bottom: var(--bottom); transform: translateX(-50%); display: flex; gap: 2px; background: var(--paper); padding: 4px; border-radius: var(--r-pill); box-shadow: var(--shadow); }
.emotes button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: var(--t-md); height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-pill); cursor: pointer; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.emotes button:hover { background: var(--paper-2); }
kbd { font: 600 10px/1 ui-monospace, monospace; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; color: var(--muted); }

/* Plaza chat: bottom left on a computer, folds to its header */
.chat { left: var(--left); bottom: var(--bottom); width: 300px; max-height: min(250px, 38vh); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 6px 8px 10px 14px; }
.chat header { display: flex; align-items: center; gap: 8px; min-height: 32px; flex: none; }
.chat header strong { font-size: var(--t-md); }
.chat .online { font-size: var(--t-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.chat-min { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.chat-min:hover { background: var(--paper-3); }
.chat-min svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .2s; }
.chat.min .chat-min svg { transform: none; }
.chat-toggle { display: none; }
.chat-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--maroon); color: #fff; font-size: var(--t-xs); font-weight: 800; display: inline-grid; place-items: center; line-height: 1; }
.chat.min { padding-bottom: 6px; }
.chat.min > :not(header):not(.chat-toggle) { display: none; }
.chat-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-list { list-style: none; margin: 0 0 6px; padding: 10px 2px 0 0; overflow-y: auto; flex: 1; min-height: 36px; -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
.chat-list:empty { min-height: 0; padding: 0; margin: 0; }
.chat-list li { font-size: var(--t-md); line-height: 1.4; position: relative; padding: 1px 0; overflow-wrap: anywhere; }
.chat-list .who { display: inline; margin: 0; font-weight: 700; color: var(--cobalt-ink); }
.chat-list .who.team { color: #b3261e; }
.chat-list .who em { font-style: normal; font-size: 10px; background: #fde7e4; color: #8f1d17; padding: 1px 5px; border-radius: 6px; margin-left: 4px; }
.chat-list .sep { color: var(--muted); }
.chat-list li.mine .who { color: var(--ink); }
.chat-list li.sys { color: var(--muted); font-style: italic; }
.chat-list .acts { position: absolute; right: 0; top: 0; display: inline-flex; gap: 2px; background: var(--paper); opacity: 0; pointer-events: none; }
.chat-list li:hover .acts, .chat-list li:focus-within .acts, .chat-list li.acts-on .acts { opacity: 1; pointer-events: auto; }
.chat-list .acts button { border: 0; background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 600; border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.chat-gate p { margin: 6px 0 8px; font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.chat-form { display: flex; gap: 6px; flex: none; }
.chat-form input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-md); padding: 0 10px; font: inherit; font-size: var(--t-md); }
.chat-form button { height: 36px; border: 0; border-radius: var(--r-md); padding: 0 14px; background: var(--ink); color: #fff; font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.chat-discord { margin: 6px 0 2px; flex: none; }

/* Controls card, bottom right; folds to a "?" chip after the first minute of walking */
.help { right: var(--right); bottom: var(--bottom); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 6px 14px 12px 8px; font-size: var(--t-sm); }
.help-toggle { display: flex; align-items: center; gap: 8px; height: 32px; border: 0; background: none; font: inherit; font-weight: 700; font-size: var(--t-md); padding: 0 6px 0 0; cursor: pointer; color: var(--ink); border-radius: var(--r-pill); }
.help-q { width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-weight: 800; font-size: var(--t-md); }
.help ul { list-style: none; margin: 4px 0 0 6px; padding: 0; display: grid; grid-template-columns: auto auto; gap: 4px 14px; }
.help li { display: flex; gap: 6px; align-items: center; color: var(--muted); white-space: nowrap; line-height: 18px; }
.help li kbd { padding: 2px 5px; }
.help.collapsed { padding: 0; border-radius: 50%; }
.help.collapsed .help-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
.help.collapsed .help-q { background: none; font-size: var(--t-lg); }
.help.collapsed .help-title, .help.collapsed ul { display: none; }

#loading { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #efe8d8; transition: opacity .5s, visibility 0s .5s; }
#loading.done { opacity: 0; pointer-events: none; visibility: hidden; }
.loader { text-align: center; }
.loader p { margin: 14px 0 0; font-weight: 600; color: var(--muted); }

/* Touch controls (phones and tablets): joystick bottom left, Jump bottom right, the action button above Jump */
.touch { display: none; }
.joy { position: absolute; z-index: 2; left: var(--joy-left); bottom: var(--joy-bottom); width: var(--joy); height: var(--joy); border-radius: 50%; background: rgba(255, 251, 242, .55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); touch-action: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); }
.jump { position: absolute; z-index: 2; right: var(--jump-right); bottom: var(--jump-bottom); width: var(--jump); height: var(--jump); border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-weight: 700; font-size: var(--t-lg); touch-action: manipulation; }
.jump.down { transform: scale(.94); background: #fff; }

dialog { border: 0; padding: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.3); max-width: min(980px, calc(100vw - 32px)); width: 100%; background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(28, 24, 16, .45); backdrop-filter: blur(2px); }
.picker header { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 24px 8px; }
.picker h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.picker header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.close { border: 0; background: var(--paper-2); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; cursor: pointer; color: var(--ink); }
.picker { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.picker-body { display: grid; grid-template-columns: 190px 1fr; gap: 0; min-height: 0; height: min(62vh, 600px); overflow: hidden; flex: 1 1 auto; }
.picker-body > * { min-height: 0; }
.tabs { padding: 10px 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; overflow: auto; border-right: 1px solid var(--line); }
.tabs button { text-align: left; border: 0; background: transparent; font: inherit; padding: 9px 12px; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 14px; }
.tabs button small { font-weight: 600; font-size: 10px; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.tabs button[aria-selected="true"] small { color: #c9ccd2; }
.panel { padding: 12px 22px 20px; overflow: auto; }
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel h3 { margin: 0; font-size: 18px; }
.badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e9edff; color: var(--cobalt); }
.badge.free { background: #e6f4e5; color: #2c6b33; }
.muted { color: var(--muted); font-size: 13px; }
#nft-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 14px; padding: 12px; background: var(--paper-2); border-radius: 12px; }
#nft-form[hidden] { display: none; }
#nft-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; }
#nft-form input { width: 140px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font: inherit; background: #fff; }
#nft-form button { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--cobalt); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
#nft-form small { flex-basis: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.card { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 6px 6px 9px; cursor: pointer; text-align: center; font: inherit; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card[aria-current="true"] { outline: 2px solid var(--cobalt); }
.card img, .card .ph { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; background: linear-gradient(#f3ede0, #e6dcc8); display: block; object-fit: cover; }
.card span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.card.locked img, .card.locked .ph { filter: grayscale(.7) opacity(.55); }
.card.locked small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.picker-foot { padding: 12px 24px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .picker-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: min(70dvh, 640px); }
  .tabs { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .tabs button { white-space: nowrap; }
  .tabs button small { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* places, prompts and sheets */
.tag.item { font-size: 11px; background: rgba(29, 33, 38, .86); color: #f3ead7; }
.door-prompt { left: 50%; bottom: calc(var(--bottom) + 64px); transform: translateX(-50%); }
.door-prompt button { display: flex; align-items: center; gap: 10px; min-height: 48px; max-width: calc(100vw - 32px); border: 0; cursor: pointer; background: var(--ink); color: #fff; font: inherit; font-weight: 700; font-size: var(--t-lg); padding: 0 20px 0 10px; border-radius: var(--r-pill); box-shadow: var(--shadow); animation: pop .18s ease-out; }
.door-prompt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.door-prompt kbd { background: #fff; color: var(--ink); border: 0; font-size: var(--t-sm); padding: 5px 8px; }
.door-ic { display: none; }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
#fade { position: absolute; inset: 0; z-index: 6; background: #14161a; opacity: 0; pointer-events: none; transition: opacity .26s ease; }
#fade.on { opacity: 1; }
.place-hud { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.place-chip { display: flex; align-items: center; gap: 8px; background: var(--paper); height: 36px; padding: 0 14px; border-radius: var(--r-pill); box-shadow: var(--shadow); font-size: var(--t-md); white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.place-chip.fading { opacity: 0; }
.place-chip small { color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; box-shadow: 0 0 0 4px rgba(63, 191, 106, .18); }
.find { display: flex; gap: 4px; background: var(--paper); padding: 4px; border-radius: var(--r-pill); box-shadow: var(--shadow); }
.find select, .find input { height: 34px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill); padding: 0 10px; font: inherit; font-size: var(--t-md); color: var(--ink); }
.find input { width: 92px; }
.find button { height: 34px; border: 0; border-radius: var(--r-pill); background: var(--cobalt-ink); color: #fff; font: inherit; font-weight: 700; font-size: var(--t-md); padding: 0 16px; cursor: pointer; }
#sheet { position: absolute; z-index: 4; top: calc(var(--safe-t) + 12px); right: calc(var(--safe-r) + 12px); bottom: calc(var(--safe-b) + 12px); width: min(400px, calc(100vw - 24px)); overflow: auto; background: var(--paper); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
#sheet[hidden] { display: none; }
.sheet-close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 1; }
.sheet-inner { padding: 22px 22px 26px; }
.sheet-inner h2 { margin: 4px 0 6px; font-size: 22px; letter-spacing: -.01em; }
.sheet-inner h3 { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sheet-inner p { font-size: 14px; line-height: 1.5; margin: 8px 0; }
.eyebrow { font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); margin: 0 !important; }
.art { width: 100%; max-width: 220px; aspect-ratio: 1; image-rendering: pixelated; border-radius: 14px; display: block; margin: 0 0 14px; background: #eee6d6; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 8px 10px; background: var(--paper-2); border-radius: 10px; }
.note { font-size: 12px !important; color: var(--muted); background: var(--paper-2); padding: 10px 12px; border-radius: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 12px; background: var(--cobalt); color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 11px 16px; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: var(--paper-2); color: var(--ink); }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: var(--paper-2); border-radius: 12px; padding: 8px; font-size: 12px; display: grid; gap: 4px; }
.tile img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border-radius: 8px; }
.tile span { color: var(--muted); }
.field { display: grid; gap: 6px; margin: 14px 0 0; font-size: 13px; font-weight: 600; }
.field input, .field select { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 500; }
.field small { color: var(--muted); font-weight: 500; }
.field .row { display: flex; gap: 6px; }
.field .row > * { flex: 1; min-width: 0; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
/* SHOPNFT: Feature an NFT, the NFTs in your linked wallets as pictures to tap (ui/nftpick.js) */
.nftpick { display: grid; gap: 8px; }
.nftgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.nfttile { display: grid; grid-template-rows: auto auto; gap: 4px; padding: 4px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.nfttile img, .nfttile .nopic { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #2b2f36; display: block; }
.nfttile .nopic { display: grid; place-items: center; color: #8a8f99; font-weight: 700; font-size: 20px; }
.nfttile .nftname { font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfttile[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.nftpick .btn.small { justify-self: start; }
.error { color: #b3261e; font-size: 13px !important; min-height: 1em; margin: 10px 0 0 !important; }
.callout { background: #e9edff; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.callout p { font-size: 13px !important; }
.tokens { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tokens li { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: var(--paper-2); border-radius: 10px; padding: 7px 9px; font-size: 13px; }
.tokens img, .tokens .dot { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--cobalt); }
.tokens small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  #sheet { top: auto; left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); bottom: calc(var(--safe-b) + 8px); width: auto; max-height: 72dvh; }
}

/* multiplayer, chat, building, games */
.tag.player { background: rgba(255, 251, 242, .94); }
.tag.player.holder { box-shadow: 0 0 0 2px #d9ad48; }
.tag.bubble { background: #fff; color: var(--ink); font-weight: 500; font-size: 13px; max-width: 240px; white-space: normal; text-align: center; border-radius: 14px; padding: 6px 10px; }
.btn.small { padding: 0 14px; min-height: 32px; font-size: var(--t-sm); border-radius: var(--r-md); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e9edff; color: var(--cobalt); }
.chip.gold { background: #fbf0d3; color: #8a6412; } .chip.muted { background: var(--paper-2); color: var(--muted); }
.list.board li:first-child strong { color: #a97d22; }
.game-hud { top: 70px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }
.game-hud[hidden] { display: none; }
.build-bar { left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; display: grid; gap: 8px; width: min(760px, calc(100vw - 24px)); }
.build-bar .tools { display: flex; gap: 6px; flex-wrap: wrap; }
.build-bar .tools button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink); }
.build-bar .tools button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.build-bar .tools button.locked { color: var(--muted); }
.build-bar .tools button.locked::after { content: ' · $Printer'; font-weight: 500; }
.build-bar .tools button.locked[data-pay="ink"]::after { content: ' · Ink'; }   /* BUILDER: the basic tools are for Ink */
.build-bar .tools .done { margin-left: auto; background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.build-bar .palette { display: flex; gap: 6px; flex-wrap: wrap; }
.build-bar .palette button { width: 34px; height: 34px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); background: var(--c); cursor: pointer; position: relative; padding: 0; }
.build-bar .palette button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.build-bar .palette button.locked { opacity: .35; }
.build-bar .palette small { position: absolute; left: 3px; top: 1px; font-size: 9px; font-weight: 700; color: rgba(0,0,0,.55); }
body.building .emotes, body.building .help { display: none; }
body.building .door-prompt { display: none; }
/* no accidental text selection while playing */
#app { user-select: none; -webkit-user-select: none; }
#app input, #app textarea, .chat-list, #sheet { user-select: text; -webkit-user-select: text; }

@media (max-width: 640px) { .game-hud { font-size: var(--t-sm); padding: 8px 14px; } }

.style-bar { margin: 0 0 12px; max-width: 420px; }
.style-bar[hidden] { display: none; }

.hit-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 120px 40px rgba(200, 30, 40, .55); opacity: 0; }
.hit-flash.on { animation: hitflash .45s ease-out; }
@keyframes hitflash { from { opacity: 1; } to { opacity: 0; } }

/* fishing */
.fish-prompt { left: 50%; bottom: 136px; transform: translateX(-50%); }
.fish-prompt[hidden] { display: none; }
.fish-prompt button { display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: #fffbf2; color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; padding: 11px 18px 11px 12px; border-radius: 999px; box-shadow: var(--shadow); touch-action: none; animation: pop .18s ease-out; }
.fish-prompt kbd { background: var(--ink); color: #fff; border: 0; font-size: 12px; padding: 4px 7px; }
.fish-prompt.alert button { background: #e8b23a; animation: biteshake .35s ease-in-out infinite; }
@keyframes biteshake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.06); } 75% { transform: rotate(4deg) scale(1.06); } }
.fish-hud { top: 70px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; background: rgba(20, 23, 28, .86); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }
.fish-hud[hidden] { display: none; }
.fish-hud .meter { display: block; width: 180px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; }
.fish-hud .meter[hidden] { display: none; }
.fish-hud .meter b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7fd0ff, #2f4bff); border-radius: 6px; }
.reel { right: max(24px, calc(50% - 330px)); top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 26px 64px 26px; grid-template-rows: auto auto; gap: 8px 10px; align-items: end; background: rgba(20, 23, 28, .9); color: #fff; padding: 14px 14px 12px; border-radius: 18px; box-shadow: var(--shadow); touch-action: none; user-select: none; }
.reel[hidden] { display: none; }
.reel.big { box-shadow: 0 0 0 2px #e8b23a, var(--shadow); }
.reel-track { position: relative; height: 260px; border-radius: 12px; background: linear-gradient(#2e7fb0, #164a6e); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.reel-zone { position: absolute; left: 4px; right: 4px; bottom: 0; border-radius: 9px; background: rgba(127, 208, 255, .35); box-shadow: inset 0 0 0 2px rgba(190, 232, 255, .8); transition: background .1s; }
.reel-zone.on { background: rgba(255, 236, 160, .45); box-shadow: inset 0 0 0 2px #f0d68a; }
.reel-fish { position: absolute; left: 50%; transform: translateX(-50%); color: #f0d68a; line-height: 0; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.reel-side { display: grid; justify-items: center; gap: 6px; }
.reel-side small { font-size: 10px; font-weight: 700; color: #b8c0ca; text-transform: uppercase; letter-spacing: .04em; }
.reel .bar { position: relative; width: 14px; height: 240px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; }
.reel .bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: #f0d68a; }
.reel .bar.tension i { background: #7fd0ff; }
.reel .bar.tension.hot i { background: #ff6a5a; }
.reel p { grid-column: 1 / -1; margin: 0; max-width: 150px; font-size: 11px; line-height: 1.35; color: #cfd5dc; text-align: center; }
.catch-card { left: 50%; bottom: 196px; translate: -50% 0; display: flex; gap: 12px; align-items: center; background: var(--paper); padding: 10px 14px 10px 10px; border-radius: 16px; box-shadow: var(--shadow); min-width: 260px; pointer-events: none; }
.catch-card .btn { pointer-events: auto; }   /* taps go through the card to the world, except its Journal button */
.catch-card[hidden] { display: none; }
.catch-card.pop { animation: cardpop .3s ease-out; }
@keyframes cardpop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cc-art { width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--rarity) 22%, #fff); box-shadow: inset 0 0 0 2px var(--rarity); }
.cc-fish svg { width: 44px; height: 26px; }
.cc-body { display: grid; gap: 2px; }
.cc-body small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.cc-body strong { font-size: 17px; }
.cc-body span { font-size: 13px; color: var(--muted); }
.cc-body .btn { justify-self: start; margin-top: 4px; }
.tag.fish-bite { background: #e8b23a; color: #1d2126; font-size: 26px; font-weight: 900; padding: 2px 13px; border-radius: 12px; animation: biteshake .3s ease-in-out infinite; }
.tag.catch { background: #fffbf2; box-shadow: 0 0 0 2px var(--rarity, #9aa3ad), 0 2px 6px rgba(0,0,0,.2); font-weight: 700; }
.fj-grid { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.fj { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--rarity); }
.fj > div { display: grid; gap: 1px; min-width: 0; }
.fj strong { font-size: 13px; }
.fj small { font-size: 11px; color: var(--muted); }
.fj-icon { width: 34px; height: 22px; flex: none; display: grid; place-items: center; color: #c9c2b2; }
.fj-icon::before { content: ''; width: 28px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M3 2h6v1h2v1h1V3h1v1h1v1h-1v1h-1V5h-1v1H9v1H3V6H2V5H1V3h1V2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M3 2h6v1h2v1h1V3h1v1h1v1h-1v1h-1V5h-1v1H9v1H3V6H2V5H1V3h1V2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.fj.unknown strong { color: var(--muted); }
@media (pointer: coarse) {
  .fish-prompt { left: auto; right: var(--act-right); bottom: var(--act-1); transform: none; }
  .fish-prompt button { width: var(--act); height: var(--act); border-radius: 50%; padding: 0; justify-content: center; flex-direction: column; gap: 2px; font-size: var(--t-md); }
  .reel { right: 14px; top: auto; bottom: 330px; transform: none; padding: 10px; grid-template-columns: 22px 54px 22px; }
  .reel-track { height: 190px; } .reel .bar { height: 172px; }
  /* phones: above the joystick, left of the round Fish button */
  .catch-card { left: 16px; right: 116px; bottom: 244px; translate: none; min-width: 0; }
}
@media (max-width: 640px) {
  .fish-hud { font-size: var(--t-sm); }
  .catch-card { min-width: 0; max-width: calc(100vw - 32px); }
}

/* Terms of play: the entry card and the in-checkout version ------------------------------- */
.gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(29, 33, 38, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: gatein .35s ease-out; }
.gate.out { opacity: 0; transition: opacity .3s; pointer-events: none; }
@keyframes gatein { from { opacity: 0; } to { opacity: 1; } }
.gate-card { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--paper); border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.3); padding: 24px 24px 18px; animation: gatepop .4s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes gatepop { from { transform: translateY(14px) scale(.98); } to { transform: none; } }
.gate-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.gate-head > div { flex: 1; min-width: 0; }
.gate-head .close { align-self: flex-start; flex: none; }
.gate-head h2:focus { outline: none; }
.gate-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.gate-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.terms-points { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.terms-points li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 11px 13px; box-shadow: inset 0 0 0 1px var(--line); }
.terms-points .num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #e9edff; color: var(--cobalt); }
.terms-points li:nth-child(2) .num { background: #fbf0d3; color: #8a6412; }
.terms-points strong { font-size: 14px; }
.terms-points p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.terms-more { margin: 12px 2px 0; font-size: 13px; }
.terms-more summary { cursor: pointer; font-weight: 700; color: var(--cobalt); }
.terms-more ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); line-height: 1.45; }
.terms .actions { margin-top: 16px; }
.btn.wide { flex: 1; justify-content: center; padding: 13px 16px; font-size: 15px; }
.terms.compact .terms-points li { padding: 9px 11px; }

/* Checkout ---------------------------------------------------------------------------------- */
.checkout .receipt { background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); padding: 4px 16px 14px; margin-top: 14px; }
.checkout .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.checkout .total span { font-size: 13px; color: var(--muted); font-weight: 600; }
.checkout .total strong { font-size: 24px; letter-spacing: -.01em; }
.checkout .payee { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.checkout .payee code { font: 600 12px ui-monospace, monospace; background: var(--paper-2); color: var(--ink); padding: 3px 7px; border-radius: 7px; }
.link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--cobalt); cursor: pointer; }
.checkout .fee { font-size: 12px !important; color: var(--muted); margin: 6px 0 0 !important; }
.checkout .final { font-size: 13px !important; background: #fbf0d3; color: #6b4e0e; border-radius: 10px; padding: 9px 12px; margin-top: 12px !important; }
.wallet-line { text-align: center; font-size: 12px !important; color: var(--muted); }
.steps { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; gap: 0; }
.steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; font-weight: 600; color: #b3ab9b; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 32px; bottom: -10px; width: 2px; background: var(--line); }
.steps .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--line); background: #fff; position: relative; z-index: 1; }
.steps li.past { color: var(--ink); }
.steps li.past .dot { background: var(--cobalt); box-shadow: none; }
.steps li.past .dot::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps li.past:not(:last-child)::after { background: var(--cobalt); }
.steps li.now { color: var(--ink); }
.steps li.now .dot { box-shadow: inset 0 0 0 2px var(--cobalt); }
.steps li.now .dot::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--cobalt); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.done-mark { width: 54px; height: 54px; border-radius: 50%; background: var(--cobalt); margin: 8px 0 4px; position: relative; animation: gatepop .4s cubic-bezier(.2, .9, .3, 1.4); }
.done-mark::after { content: ''; position: absolute; left: 20px; top: 12px; width: 11px; height: 22px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.callout.warn { background: #fdeceb; color: #7d2a24; }

/* Profiles: X pictures on nameplates, the profile header and editor --------------------------- */
.tag.with-av { display: flex; align-items: center; gap: 5px; padding-left: 3px; }
.tag .av { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--paper-2); flex: none; }
.pill-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin: -4px -2px -4px -6px; }
.who { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.who h2 { margin: 0 !important; }
.who-sub { margin: 2px 0 0 !important; font-size: 13px !important; color: var(--muted); }
.who-sub a { color: var(--cobalt); font-weight: 600; text-decoration: none; }
.avatar { position: relative; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--maroon); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.15); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-edit .field input:disabled { background: var(--paper-2); }
.switch-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; font-size: 13px; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; width: 38px; height: 22px; border-radius: 999px; background: #d8d1c1; position: relative; transition: background .2s; margin-top: 1px; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.switch-row input:checked + .switch { background: var(--cobalt); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.switch-row input:disabled + .switch { opacity: .45; }
.switch-row > span:last-child { display: grid; gap: 2px; }
.switch-row small { color: var(--muted); }
.status { font-size: 13px !important; min-height: 1em; margin: 4px 0 0 !important; color: var(--muted); }
.status.good { color: #1f7a45; } .status.bad { color: #b3261e; }

/* Voice: the mic row in the chat panel, the nearby panel, and who is talking ------------------- */
.voice-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.voice-row .voice-join { opacity: 1; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--paper-2); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.voice-row .voice-join:hover { background: #ebe3d1; }
.voice-join .ic svg, .voice-mic svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.lock { font-size: var(--t-xs); font-weight: 600; color: var(--cobalt-ink); background: #e9edff; padding: 2px 8px; border-radius: var(--r-pill); }
.voice-join .lock { margin-left: 2px; }
.voice-row .voice-mic { opacity: 1; padding: 0; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--ink); color: #fff; touch-action: none; transition: background .15s, box-shadow .15s, transform .1s; }
.voice-row .voice-mic:disabled { background: #b9b1a1; cursor: default; }
.voice-row.talking .voice-mic { background: #1f9d55; box-shadow: 0 0 0 4px rgba(31, 157, 85, .22); transform: scale(1.05); }
.voice-info { display: grid; gap: 1px; min-width: 0; flex: 1; }
.voice-info strong { font-size: 12px; }
.voice-row .voice-info .link { opacity: 1; background: none; padding: 0; color: var(--cobalt); font-weight: 700; border-radius: 0; font-size: 11px; text-align: left; }
.voice-row .voice-leave { opacity: 1; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.voice-row .voice-leave:hover { background: var(--paper-2); color: var(--ink); }
.voice-panel { position: absolute; z-index: 3; left: var(--left); bottom: calc(var(--bottom) + min(250px, 38vh) + 8px); width: 300px; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; font-size: 13px; }
.voice-panel header { display: flex; justify-content: space-between; align-items: center; }
.voice-panel .close { border: 0; background: var(--paper-2); border-radius: 8px; width: 24px; height: 24px; cursor: pointer; font-size: 16px; line-height: 1; }
.voice-people { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.voice-people li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.voice-panel p { font-size: 12px; margin: 10px 0 0; }
.tag.speaking { box-shadow: 0 0 0 2px #1f9d55, 0 0 12px rgba(31, 157, 85, .55); }
.tag.speaking::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; background: linear-gradient(#1f9d55, #1f9d55) 0 100% / 2px 60% no-repeat, linear-gradient(#1f9d55, #1f9d55) 4px 100% / 2px 100% no-repeat, linear-gradient(#1f9d55, #1f9d55) 8px 100% / 2px 45% no-repeat; animation: talkbars .5s ease-in-out infinite alternate; }
/* VOICE FIX: a mic on the name tag of everyone in voice (ui/voice.js) */
#labels .tag.in-voice:not(.xt-sig):not(.xt-col)::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; flex: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231f9d55' d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z'/><path d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21' fill='none' stroke='%231f9d55' stroke-width='2.5' stroke-linecap='round'/></svg>") center / contain no-repeat; }
.tag.you.speaking::after { background: linear-gradient(#fff, #fff) 0 100% / 2px 60% no-repeat, linear-gradient(#fff, #fff) 4px 100% / 2px 100% no-repeat, linear-gradient(#fff, #fff) 8px 100% / 2px 45% no-repeat; }
@keyframes talkbars { to { background-size: 2px 100%, 2px 40%, 2px 90%; } }
.chat.min .voice-row { margin-bottom: 0; }
/* The Printer Discord: "Voice on Discord" where in-game voice does not run, a small "Discord" beside Join voice where it does */
.discord-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px 0 11px; border-radius: var(--r-md); background: #4752c4; color: #fff; font-size: var(--t-md); font-weight: 700; text-decoration: none; white-space: nowrap; }
.discord-btn:hover { background: #3c45a5; }
.discord-btn .ic svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.discord-btn.compact { min-height: 32px; padding: 0 10px 0 8px; font-size: var(--t-sm); border-radius: var(--r-pill); margin-left: auto; }
.discord-btn.compact .ic svg { width: 16px; height: 16px; }
.chat-discord .discord-btn { width: 100%; }
@media (max-width: 480px) {
  .gate { padding: 10px; }
  .gate-card { padding: 16px 16px 12px; border-radius: 18px; }
  .gate-head { gap: 10px; margin-bottom: 4px; }
  .gate-head .brand-mark.big { width: 40px; height: 40px; border-radius: 10px; }
  .gate-head h2 { font-size: 19px; }
  .gate-head p { font-size: 13px; }
  .terms-points { gap: 7px; }
  .terms-points li { padding: 9px 11px; gap: 10px; }
  .terms-points strong { font-size: 13px; }
  .terms-points p { font-size: 12px; line-height: 1.4; }
  .terms .actions { margin-top: 12px; }
}
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 500; }
.checks label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Printer Speedway: kart HUD, minimap, bar and phone controls */
.driving .emotes, .driving .touch, .driving .help, .driving .game-hud { display: none; }
.driving .rail { top: calc(var(--safe-t) + 230px); }
.kart-hud { top: 70px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; align-items: stretch; background: rgba(20, 23, 28, .88); color: #fff; padding: 6px; border-radius: 16px; box-shadow: var(--shadow); white-space: nowrap; }
.kart-hud[hidden], .kart-map[hidden], .kart-bar[hidden], .kart-touch[hidden], .kart-flash[hidden] { display: none; }
.kart-hud > div { display: grid; gap: 1px; padding: 4px 12px; border-radius: 11px; }
.kart-hud small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aa3ad; }
.kart-hud strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.kart-hud .kart-lap { background: rgba(255, 255, 255, .08); }
.kart-hud .kart-lap strong { font-size: 20px; color: #f0d68a; }
.kart-flash { top: 176px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 800; font-size: 18px; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); animation: pop .18s ease-out; white-space: nowrap; }
.kart-flash.gold { background: #e8b23a; color: var(--ink); }
.kart-map { top: 70px; right: 16px; width: 144px; height: 130px; background: rgba(141, 196, 90, .82); border-radius: 14px; box-shadow: var(--shadow); image-rendering: auto; }
.kart-bar { left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; }
.kart-bar .pill { padding: 6px 8px 6px 6px; }
.kart-bar img { width: 30px; height: 30px; border-radius: 8px; image-rendering: pixelated; background: #e9e2d0; }
.kart-exit { background: var(--ink) !important; color: #fff !important; padding: 10px 16px !important; }
.kart-keys { background: var(--paper); border-radius: 999px; box-shadow: var(--shadow); padding: 9px 14px; font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.kart-grid { grid-template-columns: repeat(3, 1fr); }
.kart-card img { aspect-ratio: 1; image-rendering: pixelated; object-fit: cover; }
.kart-touch { display: none; }
@media (max-width: 1100px) { .kart-keys { display: none; } }
@media (pointer: coarse) {
  .driving .chat { display: none; }
  .kart-keys { display: none; }
  .kart-touch:not([hidden]) { display: block; }
  .kart-touch button { position: absolute; z-index: 2; border: 0; border-radius: 50%; background: rgba(255, 251, 242, .86); color: var(--ink); font: inherit; font-weight: 800; box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .kart-touch button.on { background: var(--ink); color: #fff; transform: scale(.94); }
  /* PHONE CONTROLS: Kart steering Slide: one wide pad instead of the two arrows */
  .kt-slide { display: none; position: absolute; z-index: 2; left: calc(var(--safe-l) + 16px); bottom: calc(var(--safe-b) + 22px); width: min(200px, 46vw); height: 84px; border-radius: 42px; background: rgba(255, 251, 242, .8); box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .kt-slide::before { content: ''; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(20, 23, 28, .18); }
  .kt-slide-dot { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--ink); box-shadow: var(--shadow); transition: transform .12s ease-out; }
  .kt-slide.on .kt-slide-dot { transition: none; }
  body[data-kart-steer="slide"] .kt-slide { display: block; }
  body[data-kart-steer="slide"] .kt-steer button { display: none; }
  .kt-steer button { bottom: calc(var(--safe-b) + 26px); width: 74px; height: 74px; font-size: 26px; }
  .kt-steer button[data-k="left"] { left: 16px; }
  .kt-steer button[data-k="right"] { left: 100px; }
  .kt-pedals button[data-k="gas"] { right: 16px; bottom: calc(var(--safe-b) + 26px); width: 86px; height: 86px; background: #3fbf6a; color: #fff; font-size: 16px; }
  .kt-pedals button[data-k="brake"] { right: 112px; bottom: calc(var(--safe-b) + 26px); width: 64px; height: 64px; font-size: 13px; }
  .kt-pedals button[data-k="drift"] { right: 28px; bottom: calc(var(--safe-b) + 124px); width: 64px; height: 64px; font-size: 13px; background: #2f4bff; color: #fff; }
  .kart-bar { bottom: auto; top: 116px; left: 10px; transform: none; }
}
@media (max-width: 640px) {
  .kart-hud { top: 64px; left: 10px; transform: none; padding: 4px; }
  .kart-hud > div { padding: 3px 8px; }
  .kart-hud strong { font-size: 13px; }
  .kart-hud .kart-lap strong { font-size: 16px; }
  .kart-map { top: 64px; right: 10px; width: 96px; height: 87px; }
  .kart-flash { top: 210px; font-size: 15px; }
  .kart-bar .pill-cta { display: inline; }
  .kart-skin > span:not(.pill-cta) { display: none; }
  .driving .rail { top: calc(var(--safe-t) + 256px); }
}
.kart-count { top: 34%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; font-weight: 900; color: #fff; text-shadow: 0 6px 0 rgba(20, 23, 28, .55), 0 0 30px rgba(229, 50, 43, .6); pointer-events: none; font-variant-numeric: tabular-nums; }
.kart-count.go { color: #7be08f; text-shadow: 0 6px 0 rgba(20, 23, 28, .55), 0 0 30px rgba(63, 191, 106, .7); }
.kart-place { top: 128px; left: 50%; transform: translateX(-50%); background: #2f4bff; color: #fff; font-weight: 800; font-size: 15px; padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }
.kart-count[hidden], .kart-place[hidden] { display: none; }
@media (max-width: 640px) { .kart-count { font-size: 88px; } .kart-place { top: 166px; left: 10px; transform: none; font-size: 13px; } }
.style-bar button.locked { color: var(--muted); }

/* Holder tiers ------------------------------------------------------------------------------- */
.tier-card { margin-top: 14px; border-radius: 14px; padding: 12px 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tier-card[data-tier="collector"] { box-shadow: inset 0 0 0 2px #8fa2ff; }
.tier-card[data-tier="baron"] { box-shadow: inset 0 0 0 2px #d9a93a; background: #fffaf0; }
.tier-card[data-tier="mint"] { box-shadow: inset 0 0 0 2px #d9a93a, 0 0 18px rgba(217, 169, 58, .35); background: #fff7e6; }
.tier-head { display: flex; justify-content: space-between; align-items: baseline; }
.tier-name { font-weight: 800; font-size: 15px; }
.tier-step { font-size: 11px; color: var(--muted); font-weight: 600; }
.tier-perks { margin: 8px 0 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; }
.tier-next { font-size: 12px !important; color: var(--muted); margin: 8px 0 0 !important; }

/* XP ------------------------------------------------------------------------------------------ */
.pill .lvl { font-size: 11px; font-weight: 800; color: #8a6412; background: #fbf0d3; padding: 3px 7px; border-radius: 999px; }
.pill .lvl.pulse { animation: lvlpulse .9s ease-out 2; }
@keyframes lvlpulse { 50% { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(217, 169, 58, .25); } }
.xp-pops { position: absolute; z-index: 3; top: 118px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.xp-pop { background: rgba(29, 33, 38, .86); color: #f6d47c; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow); animation: xpin .25s ease-out; transition: opacity .45s, transform .45s; }
.xp-pop.up { display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border-radius: 16px; background: linear-gradient(135deg, #2f4bff, #6a3cff); color: #fff; animation: xpup .5s cubic-bezier(.2, .9, .3, 1.4); }
.xp-pop.up strong { font-size: 20px; letter-spacing: .01em; }
.xp-pop.up span { font-size: 11px; opacity: .85; }
.xp-pop.out { opacity: 0; transform: translateY(-8px); }
@keyframes xpin { from { opacity: 0; transform: translateY(6px); } }
@keyframes xpup { from { opacity: 0; transform: scale(.7); } }
.xp-block { margin-top: 12px; }
.xp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.xp-head strong { font-size: 15px; }
.xp-head span { font-size: 12px; color: var(--muted); }
.xp-bar { height: 8px; border-radius: 999px; background: var(--paper-2); margin-top: 6px; overflow: hidden; }
.xp-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #d9a93a, #f2c95a); }
.xp-kinds { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; }
.xp-kinds li { display: flex; justify-content: space-between; color: var(--muted); }
.xp-kinds li strong { color: var(--ink); }
.xp-kinds li.full strong { color: #1f7a45; }

/* Daily quests -------------------------------------------------------------------------------- */
.quest-badge b { font-weight: 800; }
.quest-badge { font-size: 10px; font-weight: 800; background: var(--cobalt); color: #fff; padding: 2px 7px; border-radius: 999px; margin-left: 6px; }
.quest-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.quest-list li { display: grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto 4px; align-items: center; gap: 4px 8px; background: #fff; border-radius: 12px; padding: 9px 11px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.quest-list .check { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); grid-row: span 2; position: relative; }
.quest-list li.done .check { background: #1f9d55; box-shadow: none; }
.quest-list li.done .check::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.quest-list li.done .q-label { color: var(--muted); text-decoration: line-through; }
.quest-list .q-prog { font-weight: 700; font-size: 12px; }
.quest-list .q-bar { grid-column: 2 / 4; height: 4px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.quest-list .q-bar span { display: block; height: 100%; background: var(--cobalt); border-radius: 999px; }
.quest-list li.done .q-bar span { background: #1f9d55; }

/* Weekly cups ---------------------------------------------------------------------------------- */
.event-pill { display: flex; align-items: center; gap: 10px; height: 36px; border: 0; cursor: pointer; font: inherit; background: rgba(29, 33, 38, .9); color: #fff; font-size: var(--t-sm); padding: 0 14px; border-radius: var(--r-pill); box-shadow: var(--shadow); white-space: nowrap; }
.event-pill:hover { background: var(--ink); }
.event-pill strong { color: #f6d47c; }
.event-pill .ev-time { font-variant-numeric: tabular-nums; }
.event-pill .you { color: #cfd8ff; } .event-pill .you.muted { color: #b9bfc7; }
.event-pill .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a4f; box-shadow: 0 0 0 0 rgba(255, 90, 79, .6); animation: livepulse 1.6s infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 8px rgba(255, 90, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 79, 0); } }
.event-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.event-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; background: #fff; border-radius: 12px; padding: 9px 11px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.event-list li span { text-align: right; color: var(--muted); font-size: 12px; }
.event-list li small { grid-column: 1 / 3; color: var(--muted); font-size: 11px; }

/* Trivia Night card: in the rail under the top bar; folds to one line ---------------------------- */
.trivia { width: min(440px, calc(100vw - 24px)); background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 12px 36px rgba(0,0,0,.2); padding: 6px 12px 12px; animation: gatepop .3s ease-out; }
.trivia header { display: flex; align-items: center; }
.tv-min { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 36px; border: 0; background: none; padding: 0 2px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; border-radius: var(--r-sm); }
.tv-min strong { flex: 1; min-width: 0; font-size: var(--t-md); color: var(--cobalt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-time { font: 700 var(--t-sm) ui-monospace, monospace; color: var(--muted); font-variant-numeric: tabular-nums; }
.tv-chev { width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14.5l5-5 5 5' fill='none' stroke='%231d2126' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.trivia.min { padding-bottom: 6px; border-radius: var(--r-pill); width: auto; max-width: min(440px, calc(100vw - 24px)); }
.trivia.min .tv-chev { transform: rotate(180deg); }
.trivia.min > :not(header) { display: none; }
.trivia p { font-size: var(--t-md); margin: 6px 0; line-height: 1.45; }
.tv-q { font-size: var(--t-lg) !important; font-weight: 700; margin: 2px 0 8px !important; }
.tv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tv-opts button, .tv-opt { display: flex; align-items: center; gap: 8px; min-height: 40px; text-align: left; border: 0; border-radius: var(--r-md); padding: 6px 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.tv-opts button { cursor: pointer; }
.tv-opts b { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--paper-2); font-size: var(--t-xs); }
.tv-opts button:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 2px var(--cobalt); }
.tv-opts button.picked { box-shadow: inset 0 0 0 2px var(--cobalt); background: #eef1ff; }
.tv-opts button[aria-disabled="true"] { cursor: default; }
.tv-opt.right { background: #e3f6ea; box-shadow: inset 0 0 0 2px #1f9d55; }
.tv-opt.wrong { background: #fdeceb; box-shadow: inset 0 0 0 2px #d0453a; }
.tv-opt small { margin-left: auto; color: var(--muted); font-weight: 700; }
.tv-bar { height: 4px; border-radius: var(--r-pill); background: var(--paper-2); margin-top: 10px; overflow: hidden; }
.tv-bar span { display: block; height: 100%; background: var(--cobalt); transform-origin: left; animation: tvbar linear forwards; }
@keyframes tvbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tv-you { font-weight: 700; }
.tv-top { margin: 6px 0 0; padding-left: 20px; font-size: var(--t-md); display: grid; gap: 2px; }
.tv-top li span { display: inline-block; min-width: 60%; }
.tv-top.podium { font-size: var(--t-lg); list-style: none; padding: 0; }

/* The Big Print: Paint mode, the replay bar and the Gallery sheet ----------------------------------- */
.paint { position: absolute; z-index: 3; inset: 70px 16px 18px 362px; margin: 0; padding: 0; border: 0; width: auto; height: auto; max-width: none; max-height: none; background: var(--paper); color: var(--ink); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); overflow: hidden; display: none; }
.paint[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); animation: pop .18s ease-out; }
.paint-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 10px 16px; }
.paint-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.paint-title > div { min-width: 0; }
.paint-title strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.paint-title small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.paint-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; background: conic-gradient(#2f4bff 0 25%, #d9a93a 0 50%, #e98fa8 0 75%, #7fd6b0 0); box-shadow: inset 0 0 0 3px #1d2126; }
.paint-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.paint-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 13px 8px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink); }
.paint-chip svg { width: 14px; height: 14px; }
.paint-chip:hover { background: var(--paper-2); }
.paint-stage { position: relative; min-height: 0; background: #23272e; overflow: hidden; }
.paint-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; outline: none; }
.paint-canvas.panning { cursor: grabbing; }
.paint-tip { position: absolute; left: 0; top: 0; pointer-events: none; background: rgba(255, 251, 242, .97); color: var(--ink); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); white-space: nowrap; }
.paint-tip[hidden] { display: none; }
.paint-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 1px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.paint-zoom button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: rgba(29, 33, 38, .86); color: #f3ead7; cursor: pointer; padding: 0; }
.paint-zoom button:hover { background: #3a3f47; }
.paint-zoom svg { width: 16px; height: 16px; }
.paint-foot { padding: 12px 14px 14px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.paint-palette { display: flex; gap: 6px; flex-wrap: wrap; }
.paint-palette .swatch { width: 32px; height: 32px; border-radius: 9px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); background: var(--c); cursor: pointer; padding: 0; flex: none; transition: transform .12s; }
.paint-palette .swatch:hover { transform: translateY(-1px); }
.paint-palette .swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); transform: translateY(-2px); }
.paint-bar { display: flex; align-items: center; gap: 12px; }
.paint-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.paint-xy { font-size: 14px; font-variant-numeric: tabular-nums; }
.paint-who { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paint-place { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; padding: 13px 20px 13px 16px; min-width: 220px; font: inherit; font-weight: 800; font-size: 15px; background: var(--cobalt); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(47, 75, 255, .3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.paint-place > * { position: relative; }
/* QUICKDRY: Ink for a brush that dries in half the time; gold while it runs */
.paint-quick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(217, 173, 72, .55); border-radius: 14px; padding: 12px 14px; font: inherit; font-weight: 700; font-size: 13px; background: #fff7e2; color: #6b4e12; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.paint-quick[data-state="on"] { background: #d9ad48; border-color: #b88a2a; color: #2b1f05; }
.paint-quick:disabled { cursor: default; opacity: .8; }
.paint-quick:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.paint-place .paint-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(47, 75, 255, .14); transition: width .25s linear; }
.paint-place:not([data-state="wait"]) .paint-fill { display: none; }
.paint-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 1px rgba(29, 33, 38, .25); flex: none; }
.paint-place[data-state="ready"]:hover { filter: brightness(1.08); }
.paint-place[data-state="wait"] { background: #e9edff; color: var(--cobalt); box-shadow: none; cursor: default; }
.paint-place[data-state="off"] { background: var(--paper-2); color: var(--muted); box-shadow: none; cursor: default; }
.paint-place[data-state="signin"] { background: var(--ink); box-shadow: none; }
.paint-place[data-state="signin"] .paint-dot, .paint-place[data-state="off"] .paint-dot { display: none; }
.paint-place[data-state="done"] { background: var(--gold); color: var(--ink); box-shadow: 0 6px 18px rgba(217, 169, 58, .35); }
.paint-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; }
.paint-team[hidden] { display: none; }
.paint-team button, .paint-team select { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.paint-team button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.paint-team .danger { color: #b3261e; }
.paint-area-size { color: var(--muted); margin-right: auto; }
body.painting .emotes, body.painting .help, body.painting .door-prompt, body.painting .touch, body.painting .game-hud { display: none; }
body.painting .rail { z-index: 5; }
.bp-replay { top: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: rgba(20, 23, 28, .9); color: #fff; padding: 7px 7px 7px 16px; border-radius: 999px; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-replay[hidden] { display: none; }
.bp-replay i { width: 120px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; display: block; }
.bp-replay b { display: block; height: 100%; width: 0; background: var(--gold); }
.bp-replay button { border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; padding: 6px 12px; cursor: pointer; }
.bp-art { width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; display: block; margin: 16px 0 12px; border-radius: 4px; background: #fffbf3; box-shadow: 0 0 0 5px #2b2f36, 0 0 0 8px #d9a93a, 0 12px 30px rgba(0, 0, 0, .2); }
.bp-art-status { font-variant-numeric: tabular-nums; }
@media (max-width: 900px), (pointer: coarse) {
  .paint { inset: 0; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .paint-head { padding: 10px 10px 8px 12px; }
  .paint-foot { padding: 10px 12px 12px; gap: 9px; }
  .paint-palette { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
  .paint-palette .swatch { width: auto; height: auto; aspect-ratio: 1; max-height: 46px; border-radius: 10px; }
  .paint-zoom button { width: 44px; height: 44px; }
  .paint-tip { display: none; }
}
@media (max-width: 520px) {
  .paint-chip span { display: none; }
  .paint-chip { padding: 9px; }
  .paint-bar { gap: 10px; }
  .paint-place { min-width: 0; padding: 14px; font-size: 14px; }
  .paint-bar { flex-wrap: wrap; } .paint-quick { padding: 10px 12px; font-size: 12px; }   /* QUICKDRY: it wraps under the cursor line on a phone */
  .bp-replay { top: 116px; font-size: 12px; }
  .bp-replay i { width: 70px; }
}

/* Go Brrr: the HUD entry, the mini press, the Golden Bill arrow, big moments and the panel ------------ */
.brrr-icon { display: block; width: 30px; height: 26px; background: center / contain no-repeat; image-rendering: pixelated; flex: none; }
.brrr-icon.big { width: 40px; height: 34px; }
.brrr-entry { top: calc(var(--top) + var(--hud-h) + 10px); right: var(--right); display: flex; align-items: center; gap: 9px; min-height: var(--hud-h); border: 0; cursor: pointer; padding: 6px 14px 6px 8px; border-radius: var(--r-lg); font: inherit; color: #fff;
  background: var(--maroon); box-shadow: 0 4px 14px rgba(60, 25, 30, .18); transition: transform .12s, box-shadow .12s; }
.brrr-entry:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(60, 25, 30, .26); }
.brrr-entry .brrr-icon { background-color: rgba(255,255,255,.16); border-radius: 8px; padding: 3px; box-sizing: content-box; }
.brrr-label { display: grid; text-align: left; line-height: 1.1; }
.brrr-label strong { font-size: 14px; letter-spacing: .01em; }
.brrr-amt { font-size: var(--t-sm); font-weight: 700; color: #f6dfc4; font-variant-numeric: tabular-nums; }
.brrr-amt:empty { display: none; }
.brrr-entry[hidden], .brrr-mini[hidden], .brrr-arrow[hidden], .brrr-flash[hidden] { display: none; }
.brrr-mini { top: calc(var(--top) + var(--hud-h) + 10px); right: var(--right); display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); }
.brrr-mini-press { width: 58px; height: 58px; border-radius: 16px; border: 0; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 40%, #e9f7e4, #bfe2b6); box-shadow: inset 0 -3px 0 rgba(31, 107, 58, .25), 0 2px 6px rgba(0,0,0,.08); }
.brrr-mini-press:active { transform: scale(.94); }
.brrr-mini.hit .brrr-mini-press .brrr-icon { animation: brrrsquash .22s ease-out; }
.brrr-mini.jam .brrr-mini-press { animation: brrrshake .3s ease-in-out; }
.brrr-mini-info { display: grid; gap: 2px; min-width: 92px; }
.brrr-mini-info strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.brrr-mini-info small { font-size: var(--t-xs); color: var(--maroon); font-weight: 700; font-variant-numeric: tabular-nums; }
.brrr-mini-bar { display: block; height: 5px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin-top: 2px; }
.brrr-mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9aa3ad, #6a6f76); border-radius: 4px; }
.brrr-mini-acts { display: grid; gap: 4px; }
.brrr-mini-acts button { width: 28px; height: 26px; border: 0; border-radius: 8px; background: var(--paper-2); cursor: pointer; font: inherit; font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1; }
.brrr-arrow { top: calc(var(--top) + var(--hud-h) + 66px); right: var(--right); display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #f6d36b, #d9a93a); color: #3d2a05; font-weight: 800; font-size: 13px; padding: 7px 14px 7px 8px; border-radius: 999px; box-shadow: 0 6px 22px rgba(217, 169, 58, .45); pointer-events: none; animation: pop .2s ease-out; }
.brrr-mini:not([hidden]) ~ .brrr-arrow { top: calc(var(--top) + var(--hud-h) + 94px); }
.brrr-arrow-dir { width: 24px; height: 24px; border-radius: 50%; background: #3d2a05 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l6 9h-4v7h-4v-7H6z' fill='%23f6d36b'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .12s linear; }
.brrr-flash { top: 24%; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 2px; pointer-events: none; z-index: 5; }
.brrr-flash strong { font-size: 54px; font-weight: 900; letter-spacing: .02em; line-height: 1; color: #fff; -webkit-text-stroke: 2px rgba(61, 42, 5, .35); text-shadow: 0 5px 0 rgba(61, 42, 5, .35), 0 0 40px rgba(246, 211, 107, .9); }
.brrr-flash span { font-size: 18px; font-weight: 800; color: #fff; background: rgba(29, 33, 38, .72); padding: 5px 14px; border-radius: 999px; }
.brrr-flash.gold strong { color: #ffe08a; }
.brrr-flash.aqua strong { color: #9fe7ff; text-shadow: 0 5px 0 rgba(10, 60, 80, .35), 0 0 40px rgba(127, 208, 255, .9); }
.brrr-flash.green strong { color: #b8f5a8; text-shadow: 0 5px 0 rgba(20, 70, 30, .35), 0 0 40px rgba(127, 224, 138, .9); }
.brrr-flash.cobalt strong { color: #c9d4ff; text-shadow: 0 5px 0 rgba(20, 30, 90, .45), 0 0 40px rgba(47, 75, 255, .8); }
.brrr-flash.on { animation: brrrflash 2.4s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes brrrflash { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.12); } 22% { transform: scale(1); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes brrrsquash { 0% { transform: scale(1.12, .84); } 55% { transform: scale(.95, 1.07); } 100% { transform: none; } }
@keyframes brrrshake { 25% { transform: translateX(-4px) rotate(-2deg); } 75% { transform: translateX(4px) rotate(2deg); } }
.driving .brrr-entry, .driving .brrr-mini, .driving .brrr-arrow, body.building .brrr-entry, body.building .brrr-mini { display: none; }
.tag.golden-tag { background: linear-gradient(135deg, #f6d36b, #d9a93a); color: #3d2a05; font-weight: 800; box-shadow: 0 0 14px rgba(246, 211, 107, .7); }

/* the panel lives in the side sheet: its own header, a fixed top and a scrolling list */
#sheet.brrr-sheet { overflow: hidden; display: flex; flex-direction: column; }
#sheet.brrr-sheet > .sheet-close { display: none; }
#sheet.brrr-sheet #sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.brrr { display: flex; flex-direction: column; min-height: 0; flex: 1; user-select: none; -webkit-user-select: none; }
.brrr-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 4px 18px; }
.brrr-series { font-size: 12px; color: var(--muted); font-weight: 600; }
.brrr-head-acts { display: flex; gap: 6px; }
.brrr-min { border: 0; background: var(--paper-2); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.brrr-min i { display: block; width: 14px; height: 3px; border-radius: 2px; background: var(--ink); margin-top: 8px; }
.brrr-top { padding: 0 18px; display: grid; gap: 2px; }
.brrr-amount { display: flex; align-items: baseline; gap: 8px; }
.brrr-count { font-size: 36px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; display: inline-block; transform-origin: 0 80%; }
.brrr-count.tick { animation: brrrtick .16s ease-out; }
@keyframes brrrtick { 40% { transform: scale(1.035); color: #1f6b3a; } }
.brrr-amount small { font-size: 14px; font-weight: 700; color: var(--muted); }
.brrr-rates { display: flex; gap: 10px; font-size: 13px; font-weight: 700; color: var(--maroon); font-variant-numeric: tabular-nums; }
.brrr-rates span + span { color: var(--muted); }
.brrr-buffs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.brrr-buffs:empty { display: none; }
.brrr-buff { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 6px 4px 10px; border-radius: 999px; background: #e9edff; color: var(--cobalt); animation: pop .2s ease-out; }
.brrr-buff small { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.brrr-buff.gold { background: linear-gradient(135deg, #f6d36b, #e8b23a); color: #3d2a05; }
.brrr-buff.aqua { background: #dff4fb; color: #0f6a87; }
.brrr-buff.green { background: #e3f5df; color: #1f6b3a; }
.brrr-stage { position: relative; margin: 10px 14px 0; height: 214px; border-radius: 20px; overflow: hidden; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; flex: none;
  background: #e8dfcf; box-shadow: inset 0 0 0 1px #d5cbb9; }
.brrr-stage::before { content: ''; position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 224, 138, 0) 0deg 10deg, rgba(255, 224, 138, .55) 10deg 20deg); opacity: 0; transition: opacity .4s; animation: spin 14s linear infinite; }
.brrr-stage.frenzy { background: radial-gradient(120% 90% at 50% 38%, #fff8dc 0%, #f6d97c 60%, #e8b23a 100%); }
.brrr-stage.frenzy::before { opacity: .7; }
.brrr-stage.boom::after { content: ''; position: absolute; left: 50%; top: 46%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .8); animation: brrrboom .6s ease-out forwards; pointer-events: none; }
@keyframes brrrboom { to { transform: scale(9); opacity: 0; } }
.brrr-stage:active .brrr-press { filter: brightness(1.05); }
.brrr-press { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 1; display: grid; place-items: center; }
.brrr-press::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 14px; border-radius: 50%; background: rgba(31, 60, 30, .18); z-index: -1; }
.brrr-art { display: block; image-rendering: pixelated; width: auto; height: 150px; max-width: 220px; object-fit: contain; }
.brrr-press.hit .brrr-art { animation: brrrsquash .2s ease-out; transform-origin: 50% 100%; }
.brrr-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.brrr-paper { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 11px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; color: var(--maroon); text-transform: uppercase; letter-spacing: .05em; }
.brrr-paper .bar { flex: 1; height: 9px; border-radius: 6px; background: rgba(29, 33, 38, .14); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.brrr-paper .bar i { display: block; height: 100%; border-radius: 6px; background: repeating-linear-gradient(90deg, #fff 0 10px, #f1ece0 10px 12px); transition: width .12s linear; }
.brrr-paper small { font-size: 11px; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; min-width: 62px; text-align: right; }
.brrr-jam { position: absolute; z-index: 3; top: 12px; left: 50%; translate: -50% 0; background: #b3261e; color: #fff; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; white-space: nowrap; }
.brrr-stage.empty .brrr-jam { opacity: 1; visibility: visible; }
.brrr-stage.jam .brrr-press { animation: brrrshake .3s ease-in-out; }
.brrr-stage.empty .brrr-paper .bar { box-shadow: inset 0 0 0 2px rgba(179, 38, 30, .45); }
.brrr-golden { position: absolute; z-index: 3; top: 12px; left: 12px; background: linear-gradient(135deg, #f6d36b, #d9a93a); color: #3d2a05; font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; box-shadow: 0 3px 10px rgba(217, 169, 58, .45); }
.brrr-golden[hidden] { display: none; }
.brrr-stage.empty .brrr-golden { top: 44px; }
.brrr-hint { text-align: center; font-size: 12px !important; color: var(--muted); margin: 6px 14px 0 !important; min-height: 16px; }
.brrr-hint.warn { color: #9a5b00; font-weight: 700; }
.brrr-tabs { display: flex; gap: 2px; margin: 8px 14px 0; padding: 4px; background: var(--paper-2); border-radius: 13px; flex: none; }
.brrr-tabs button { flex: 1; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 750; padding: 8px 2px; border-radius: 10px; cursor: pointer; color: var(--muted); }
.brrr-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.brrr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 18px; overscroll-behavior: contain; }
.brrr-body h3 { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.brrr-body h3:first-child { margin-top: 4px; }
.brrr-body p { font-size: 13px; line-height: 1.45; margin: 6px 0; }
.brrr-body .small { font-size: 12px; }
.brrr-mult { margin-bottom: 8px; }
.brrr-mult button { padding: 7px 8px; font-size: 12px; }
.brrr-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 8px 8px 9px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 6px; transition: box-shadow .2s; }
.brrr-row.can { box-shadow: inset 0 0 0 1px #9fd69a, 0 2px 8px rgba(47, 122, 58, .08); }
.brrr-row-main { min-width: 0; display: grid; gap: 1px; }
.brrr-row-name { display: flex; align-items: center; gap: 6px; }
.brrr-row-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brrr-own { font-size: 11px; font-weight: 800; color: var(--cobalt); background: #e9edff; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.brrr-row-main small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.brrr-tier { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.brrr-tier.t0 { background: #7fbf73; } .brrr-tier.t1 { background: #3f9a5a; } .brrr-tier.t2 { background: #2f8a8a; } .brrr-tier.t3 { background: #2f6fbf; }
.brrr-tier.t4 { background: #2f4bff; } .brrr-tier.t5 { background: #6a3cff; } .brrr-tier.t6 { background: #b8862a; } .brrr-tier.t7 { background: linear-gradient(135deg, #1d2126, #4a3a7a); }
.brrr-pips { width: 36px; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.brrr-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.brrr-pips i.on { background: #3f9a5a; box-shadow: none; }
.brrr-buy { --p: 0%; min-width: 86px; border: 0; border-radius: 11px; padding: 6px 10px; font: inherit; cursor: pointer; display: grid; justify-items: center; line-height: 1.15; color: var(--ink);
  background: linear-gradient(90deg, #d7ecd2 var(--p), #efe9dc var(--p)); transition: transform .08s; }
.brrr-buy span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.brrr-buy strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.brrr-buy:disabled { cursor: default; color: #7d8288; }
.brrr-row.can .brrr-buy { background: linear-gradient(160deg, #3a9a55, #1f6b3a); color: #fff; box-shadow: 0 3px 10px rgba(31, 107, 58, .3); }
.brrr-row.can .brrr-buy:active { transform: scale(.95); }
.brrr-card { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; margin-bottom: 10px; }
.brrr-card h3 { margin: 4px 0 8px !important; font-size: 17px !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
.brrr-card.order { background: linear-gradient(160deg, #1f2a5c, #141a3a); color: #f3ead7; box-shadow: none; }
.brrr-card.order .eyebrow { color: #e8bd52; }
.brrr-card.order h3 { color: #fff !important; }
.brrr-card.order .muted { color: #c9d0ff; }
.brrr-card.order.done { background: linear-gradient(160deg, #5a4210, #2f2208); }
.brrr-meter { height: 10px; border-radius: 6px; background: rgba(127, 127, 127, .2); overflow: hidden; margin: 8px 0; }
.brrr-meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #5fcf6f, #9fe08a); }
.brrr-card.order.done .brrr-meter i { background: linear-gradient(90deg, #f2c64f, #ffe08a); }
.brrr-seals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
.brrr-seals > div { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 12px 8px; display: grid; justify-items: center; gap: 2px; }
.brrr-seals strong { font-size: 24px; font-weight: 850; font-variant-numeric: tabular-nums; }
.brrr-seals small { font-size: 11px; color: var(--muted); font-weight: 700; text-align: center; }
.brrr-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.brrr-skin { border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 8px 6px 9px; cursor: pointer; font: inherit; color: var(--ink); display: grid; justify-items: center; gap: 3px; text-align: center; transition: transform .12s, box-shadow .12s; }
.brrr-skin:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.brrr-skin[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--cobalt); }
.brrr-skin-art { height: 62px; display: grid; place-items: center; }
.brrr-skin-art canvas { image-rendering: pixelated; max-height: 62px; max-width: 86px; }
.brrr-skin strong { font-size: 12px; }
.brrr-skin small { font-size: 11px; color: var(--muted); font-weight: 600; }
.brrr-skin.price small { color: #8a6412; }
.brrr-skin.free small { color: #1f7a45; }
@media (max-width: 640px), (pointer: coarse) {
  .brrr-entry { top: auto; right: auto; left: var(--joy-left); bottom: var(--brrr-bottom); width: 66px; height: 66px; padding: 0; border-radius: 20px; flex-direction: column; justify-content: center; gap: 1px; }
  .brrr-entry .brrr-icon { width: 30px; height: 25px; padding: 2px; }
  .brrr-label strong { display: none; }
  .brrr-label .brrr-amt { font-size: 11px; }
  .brrr-label .brrr-amt:empty { display: block; }
  .brrr-label .brrr-amt:empty::before { content: 'Brrr'; }
  .brrr-mini { top: auto; right: auto; left: var(--joy-left); bottom: var(--brrr-bottom); padding: 6px; gap: 8px; border-radius: var(--r-lg); }
  .brrr-mini-press { width: 60px; height: 60px; }
  .brrr-mini-info { min-width: 76px; }
  .brrr-mini-info strong { font-size: 15px; }
  /* the Golden Bill: a gold tab on the right edge, below the rail and above the round action button */
  .brrr-arrow { top: auto; right: 0; bottom: calc(var(--act-1) + var(--act) + 56px); left: auto; max-width: 150px; font-size: var(--t-sm); line-height: 1.25; white-space: normal; padding: 7px calc(var(--safe-r) + 10px) 7px 7px; border-radius: var(--r-pill) 0 0 var(--r-pill); }
  .brrr-mini:not([hidden]) ~ .brrr-arrow { top: auto; }
  .brrr-arrow-dir { flex: none; }
  .brrr-flash { top: 14%; }
  .brrr-flash strong { font-size: 40px; }
  .brrr-flash span { font-size: 15px; }
  #sheet.brrr-sheet { height: min(640px, 76dvh); max-height: none; }
  .brrr-head { padding: 10px 10px 2px 16px; }
  .brrr-count { font-size: 28px; }
  .brrr-stage { height: 150px; margin-top: 8px; }
  .brrr-art { height: 104px; }
  .brrr-paper { bottom: 8px; }
  .brrr-tabs button { font-size: 11.5px; padding: 7px 1px; }
  .brrr-body { padding: 8px 12px 14px; }
}
body.brrr-full .brrr-arrow { display: none; }
@media (max-width: 640px) { body.brrr-full .emotes, body.brrr-full .touch { display: none; } }
.saved-line { font-size: 12px !important; color: var(--muted); padding-left: 22px; position: relative; }
.saved-line::before { content: ''; position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px #b9b1a1; }
.saved-line.on::before { background: #1f9d55; box-shadow: none; }

/* Arcade: status line, big countdown and winner, your own state, the feed, the printer heat glow ---------- */
.arcade-hud { top: 114px; left: 50%; transform: translateX(-50%); display: grid; gap: 2px; justify-items: center; width: max-content; max-width: min(640px, calc(100vw - 24px)); background: rgba(22, 15, 41, .9); color: #fff; padding: 8px 16px; border-radius: 16px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(56, 217, 255, .35); text-align: center; pointer-events: none; }
.arcade-hud[hidden], .arcade-big[hidden], .arcade-banner[hidden], .arcade-heat[hidden] { display: none; }
.arcade-hud strong { font-size: 14px; letter-spacing: .01em; }
.arcade-hud small { font-size: 12px; color: #c9c2dc; line-height: 1.35; }
.arcade-big { top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: 128px; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 6px 0 rgba(20, 15, 35, .55), 0 0 34px rgba(56, 217, 255, .8); pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arcade-big.go { color: #7dff6a; text-shadow: 0 6px 0 rgba(20, 15, 35, .55), 0 0 34px rgba(125, 255, 106, .8); animation: arcbig .35s cubic-bezier(.2, .9, .3, 1.4); }
.arcade-big.win { font-size: 68px; color: #ffc94a; text-shadow: 0 5px 0 rgba(20, 15, 35, .6), 0 0 30px rgba(255, 79, 163, .85); max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; animation: arcbig .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes arcbig { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.arcade-banner { top: 174px; left: 50%; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); white-space: nowrap; background: var(--ink); color: #fff; pointer-events: none; }
.arcade-banner.hot { background: #ff3b30; animation: hotpulse .6s ease-in-out infinite alternate; }
.arcade-banner.go { background: #2f4bff; }
.arcade-banner.out { background: #3a3346; color: #ddd6ea; }
.arcade-banner.win { background: #ffc94a; color: #1d2126; }
@keyframes hotpulse { to { box-shadow: 0 0 0 7px rgba(255, 59, 48, .28); } }
.arcade-feed { position: absolute; z-index: 2; top: 222px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; width: min(520px, calc(100vw - 24px)); }
.arcade-pop-line { background: rgba(22, 15, 41, .86); color: #f3ead7; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); animation: xpin .25s ease-out; transition: opacity .45s, transform .45s; text-align: center; }
.arcade-pop-line.hot { color: #ffb0a8; }
.arcade-pop-line.good { color: #9dff8f; }
.arcade-pop-line.bad { background: #ff3b30; color: #fff; }
.arcade-pop-line.out { opacity: 0; transform: translateY(-8px); }
.arcade-heat { position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 110px 34px rgba(255, 59, 48, .85); }
.tag.arcade-pad { background: rgba(22, 15, 41, .88); color: #7fe7ff; }
.tag.arcade-pop { font-size: 24px; font-weight: 900; background: none; box-shadow: none; color: #fff; text-shadow: 0 2px 0 #000, 0 0 14px #ff3b30; }
.tag.arcade-win { font-size: 15px; font-weight: 900; background: #ffc94a; color: #1d2126; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 640px) {
  .arcade-hud { top: 156px; padding: 6px 12px; }
  .arcade-hud strong { font-size: 12px; }
  .arcade-hud small { font-size: 11px; }
  .arcade-big { top: 47%; font-size: 92px; }
  .arcade-big.win { font-size: 42px; }
  .arcade-banner { top: 226px; font-size: 12px; white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 24px); }
  .arcade-feed { top: 284px; }
  .arcade-pop-line { font-size: 12px; }
}

/* Sound: a speaker in the top bar (on phones, at the end of the emote bar) and its panel ----------------- */
.sound-btn { display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.sound-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .spk { fill: currentColor; stroke: none; }
.sound-btn .cross { display: none; }
.sound-btn.muted { color: var(--muted); }
.sound-btn.muted .wave { display: none; }
.sound-btn.muted .cross { display: inline; }
.top-actions .pill.sound-btn { width: var(--hud-h); padding: 0; }
.emotes .sound-btn { display: none; width: 44px; padding: 0; border-left: 1px solid var(--line); border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.sound-panel { position: fixed; z-index: 30; width: 280px; background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 12px 36px rgba(30, 24, 10, .2); padding: 10px 14px 12px; display: grid; gap: 6px; }
.sound-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sound-head strong { font-size: var(--t-lg); }
.sound-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.sound-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sound-switch input:checked + .switch { background: var(--cobalt-ink); }
.sound-switch input:checked + .switch::after { transform: translateX(16px); }
.sound-switch input:focus-visible + .switch { outline: 3px solid var(--cobalt-ink); outline-offset: 2px; }
.sw-text { min-width: 2.2em; }
.sound-rows { display: grid; gap: 2px; }
.sound-panel.off .sound-rows { opacity: .55; }
.sound-row { display: grid; grid-template-columns: 70px 1fr 42px; align-items: center; gap: 10px; min-height: 36px; font-size: var(--t-md); }
.sound-row input { width: 100%; margin: 0; accent-color: var(--cobalt-ink); }
.sound-row output { font-size: var(--t-sm); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sound-hint { font-size: var(--t-xs); color: var(--muted); }

/* The notification rail (ui/rail.js): one centered column under the top bar ---------------------------- */
.rail { position: absolute; z-index: 3; top: var(--rail-top); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.rail > * { pointer-events: auto; }
#rail > * { position: relative; inset: auto; transform: none; translate: none; margin: 0; max-width: 100%; z-index: auto; }
#rail .rail-off { display: none !important; }
@media (pointer: coarse) and (max-width: 600px) {
  /* Leave the right-hand launch controls clear when a world event is active. */
  #rail > .hud, #rail > #toast { max-width: calc(100vw - 132px); white-space: normal; text-align: center; }
}
.rail > .consent { order: 0; } #place-hud { order: 1; } .rail > .event-pill { order: 2; }
.rail > .game-hud, .rail > .arcade-hud, .rail > .arcade-banner, .rail > .fish-hud, .rail > .bp-replay { order: 3; }
.rail > .trivia { order: 4; } .rail > #toast { order: 5; } .rail > .xp-pops, .rail > .arcade-feed { order: 6; }
#toast, .rail > .xp-pops, .rail > .arcade-hud, .rail > .arcade-banner, .rail > .arcade-feed { pointer-events: none; }
#toast { background: var(--ink); color: #fff; font-size: var(--t-md); line-height: 1.35; padding: 9px 16px; border-radius: var(--r-lg); box-shadow: var(--shadow); max-width: min(520px, calc(100vw - 24px)); text-align: center; transition: opacity .2s; }
#toast.in { animation: pop .18s ease-out; }
#toast.out { opacity: 0; }
.consent { display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 24px)); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 6px 6px 6px 14px; font-size: var(--t-md); transition: opacity .25s; }
.consent p { margin: 0; line-height: 1.35; }
.consent .link { color: var(--cobalt-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.consent-ok { flex: none; height: 32px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: inherit; font-weight: 700; font-size: var(--t-md); cursor: pointer; }
.consent.out { opacity: 0; }

/* Touch layout. One map for every piece near the thumbs: joystick and Go Brrr on the left, Jump and the
   round action button (a door, the Fish button) on the right, emotes between them at the bottom. */
:root {
  --joy: 116px; --joy-left: calc(var(--safe-l) + 20px); --joy-bottom: calc(var(--safe-b) + 84px);
  --jump: 76px; --jump-right: calc(var(--safe-r) + 20px); --jump-bottom: calc(var(--safe-b) + 92px);
  --act: 68px; --act-right: calc(var(--jump-right) + (var(--jump) - var(--act)) / 2); --act-1: calc(var(--jump-bottom) + var(--jump) + 12px); --act-2: calc(var(--act-1) + var(--act) + 14px);
  --brrr-bottom: calc(var(--joy-bottom) + var(--joy) + 16px);
}
@media (pointer: coarse) {
  .touch { display: block; }
  .help, .hud kbd { display: none; }
  .emotes button { height: 44px; min-width: 44px; padding: 0 12px; }
  /* the door: a round button above Jump, its name in a tag above it (above the Fish button when both show) */
  .door-prompt { left: auto; right: var(--act-right); bottom: var(--act-1); transform: none; }
  #app:has(.fish-prompt:not([hidden])) .door-prompt { bottom: var(--act-2); }
  .door-prompt button { position: relative; width: var(--act); height: var(--act); min-height: 0; max-width: none; padding: 0; border-radius: 50%; justify-content: center; overflow: visible; }
  .door-ic { display: block; width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .door-ic circle { fill: #fff; stroke: none; }
  .door-prompt span { position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(220px, calc(100vw - 150px)); white-space: normal; text-align: right; line-height: 1.25; background: var(--ink); color: #fff; font-size: var(--t-md); padding: 7px 12px; border-radius: var(--r-md); box-shadow: var(--shadow); }
  /* 44 px for everything you tap */
  .close, .brrr-min, .chat-min { width: 44px; height: 44px; }
  .chat-form input, .chat-form button, .btn.small, .voice-row .voice-join, .voice-row .voice-leave, .discord-btn, .discord-btn.compact, .consent-ok, .event-pill, .tv-min { min-height: 44px; }
  .voice-row .voice-mic { width: 44px; height: 44px; }
  .chat-list .acts button { min-height: 44px; padding: 0 12px; }
  .find select, .find input, .find button { height: 44px; }
  .tv-opts button { min-height: 44px; }
  .sound-row input { height: 44px; }
  .sound-switch { min-height: 44px; }
  .brrr-mini-acts button { width: 44px; height: 44px; }
  .consent .link { padding: 13px 2px; margin: -13px -2px; }   /* a 44 px tap area inside the sentence */
  .voice-panel .close { width: 44px; height: 44px; }
}

/* Narrow windows on a computer: the top bar stays one row (short labels first, then the brand's words) */
@media (max-width: 1100px) { #open-profile .ink, .pill-cta { display: none; } #profile-name, #current-name { max-width: 120px; } }
@media (max-width: 900px) { .brand { width: var(--hud-h); padding: 0; justify-content: center; } .brand-text { display: none; } }

/* Phones (and every touch screen): chat folds into a round button next to the brand, with its unread count */
@media (max-width: 640px), (pointer: coarse) {
  .brand { width: var(--hud-h); padding: 0; justify-content: center; }
  .brand-text { display: none; }
  .chat.min { top: var(--top); bottom: auto; left: calc(var(--left) + var(--hud-h) + 8px); width: var(--hud-h); height: var(--hud-h); max-height: none; padding: 0; border-radius: 50%; }
  .chat.min > header { display: none; }
  .chat.min .chat-toggle { display: grid; place-items: center; position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
  .chat-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
  .chat-toggle .chat-badge { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--paper); }
  .chat:not(.min) { z-index: 3; top: var(--rail-top); bottom: auto; left: var(--left); right: var(--right); width: auto; height: min(300px, 44dvh); max-height: none; }
  body.chat-open .rail { top: calc(var(--rail-top) + min(300px, 44dvh) + 8px); }
  .voice-panel { left: var(--left); right: var(--right); width: auto; bottom: auto; top: calc(var(--rail-top) + min(300px, 44dvh) + 8px); }
}
/* Phones in portrait: one 44 px row up top (brand, chat, Games, Profile, your character), compact chips */
@media (max-width: 640px) {
  :root { --edge: 12px; }
  .top-actions { gap: 6px; }
  .pill { padding: 0 14px; font-size: 14px; }
  #open-games .qb-txt { display: none; }
  #open-games { min-width: 104px; }
  #open-games .quest-badge { margin-left: 0; }
  #open-profile { min-width: 66px; justify-content: center; }
  #open-profile .pill-label { display: inline; }
  #open-profile #profile-name, #open-profile .ink, #open-profile .lvl, #open-profile .pill-av { display: none; }
  #open-picker { width: var(--hud-h); padding: 0; justify-content: center; }
  #open-picker .pick-face { width: 38px; height: 38px; }
  #open-picker #current-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pill-cta { display: none; }
  .top-actions .sound-btn { display: none; }
  .emotes .sound-btn { display: grid; }
  .sound-hint { display: none; }
  .event-pill .you { display: none; }
  .trivia { width: calc(100vw - 24px); }
}
/* Phones on their side (short screens): controls low in the corners, chat on the left, never over the emotes */
@media (pointer: coarse) and (max-height: 500px) {
  :root { --edge: 12px; --top: calc(var(--safe-t) + 8px); --rail-top: calc(var(--top) + var(--hud-h) + 8px);
    --joy: 100px; --joy-left: calc(var(--safe-l) + 24px); --joy-bottom: calc(var(--safe-b) + 16px);
    --jump: 68px; --jump-right: calc(var(--safe-r) + 24px); --jump-bottom: calc(var(--safe-b) + 20px);
    --act: 60px; --act-1: calc(var(--jump-bottom) + var(--jump) + 10px); --act-2: calc(var(--act-1) + var(--act) + 10px);
    --brrr-bottom: calc(var(--joy-bottom) + var(--joy) + 12px); }
  .emotes { bottom: calc(var(--safe-b) + 10px); }
  #profile-name { max-width: 110px; }
  #open-profile .ink, .pill-cta { display: none; }
  #current-name { max-width: 110px; }
  .brrr-entry { width: 56px; height: 56px; }
  .chat:not(.min) { right: auto; width: min(320px, 40vw); height: calc(100dvh - var(--rail-top) - var(--joy-bottom) - var(--joy) - 12px); max-height: none;
    flex-flow: row wrap; align-content: flex-start; align-items: center; column-gap: 6px; }
  /* one line for the title, voice and Discord, so the messages get the height */
  .chat:not(.min) > header { display: contents; }
  .chat:not(.min) #chat-title { order: 0; flex: 1 1 auto; }
  .chat:not(.min) .online, .chat:not(.min) > header .chat-badge { display: none; }
  .chat:not(.min) > .voice-row { order: 1; margin: 0; }
  .chat:not(.min) .chat-min { order: 2; }
  .chat:not(.min) > .chat-body { order: 3; flex: 1 1 100%; height: calc(100% - 50px); }
  .chat:not(.min) .voice-join { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .chat:not(.min) .voice-join .lock { display: none; }
  .chat:not(.min) .discord-btn.compact { width: 44px; padding: 0; margin: 0; }
  .chat:not(.min) .discord-btn.compact .tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.chat-open .rail { top: var(--rail-top); left: calc(var(--left) + min(320px, 40vw) + 12px); right: var(--right); transform: none; width: auto; }
  body.chat-open .brrr-entry, body.chat-open .brrr-mini { visibility: hidden; }
  .voice-panel { top: var(--rail-top); left: calc(var(--left) + min(320px, 40vw) + 12px); right: auto; width: 300px; }
  .trivia { width: min(420px, 56vw); }
  .tv-q { font-size: var(--t-md) !important; }
}

/* Reduced motion: entrances appear in place, loops and shakes stop, the red hit vignette stays off.
   The trivia countdown bar keeps moving (it is the clock). Code reads ui/motion.js (reducedMotion). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .door-prompt button, .fish-prompt button, .catch-card.pop, .trivia, .gate, .gate-card, .done-mark, .xp-pop, .xp-pop.up, .arcade-pop-line, .brrr-buff, .brrr-arrow,
  .paint[open], .arcade-big.go, .arcade-big.win, #toast.in, .kart-flash, .brrr-flash.on,
  .fish-prompt.alert button, .tag.fish-bite, .event-pill .live-dot, .tag.speaking::after, .steps li.now .dot::before, .brrr-stage::before, .arcade-banner.hot, .pill .lvl.pulse,
  .brrr-mini.hit .brrr-mini-press .brrr-icon, .brrr-mini.jam .brrr-mini-press, .brrr-press.hit .brrr-art, .brrr-stage.jam .brrr-press, .brrr-count.tick, .brrr-stage.boom::after, .card { animation: none !important; }
  .hit-flash, .hit-flash.on { animation: none !important; opacity: 0 !important; }
  .card:hover, .brrr-skin:hover, .brrr-entry:hover { transform: none; }
}

/* Panels: the Games sheet (.gs), the character picker (#picker) and the profile (.pf), the install row and the
   Take me there waypoint. Everything here is scoped to those panels. ----------------------------------------- */
.gs, .pf, #picker, .waypoint, .install-row { --pw-muted: #595e66; --pw-soft: #e9edff; --pw-deep: #1d2c99; --pw-live: #b8322a; }
.gs [hidden], .pf [hidden], #picker [hidden], .install-row[hidden], .waypoint[hidden] { display: none !important; }
.ic { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; }
.ic svg { width: 100%; height: 100%; display: block; }
.gs button:focus-visible, .pf button:focus-visible, #picker button:focus-visible, .waypoint button:focus-visible, .install-row button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* shared: the numbers row at the top of the Games sheet and the profile */
.gs-stats, .pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.pf-stats:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs .note, .pf .note { color: var(--pw-muted); }
.gs-stat, .pf-stat { display: grid; gap: 1px; min-width: 0; padding: 9px 11px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.gs-stat strong, .pf-stat strong { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-stat span, .pf-stat span { font-size: 11.5px; color: var(--pw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs .eyebrow + h2, .pf .who h2 { overflow-wrap: anywhere; }

/* Games sheet ---------------------------------------------------------------------------------------------- */
.gs h3, .pf h3 { color: var(--pw-muted); }
.gs-seg { display: flex; gap: 2px; margin: 16px 0 2px; padding: 4px; background: var(--paper-2); border-radius: 14px; }
.gs-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0; background: none; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 750; color: var(--pw-muted); cursor: pointer; }
.gs-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.gs-seg button:not([aria-selected="true"]):hover { color: var(--ink); }
.gs-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: 11px; font-weight: 800; }
.gs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pw-live); box-shadow: 0 0 0 3px rgba(184, 50, 42, .18); }
.gs-block { margin-top: 18px; }
.gs-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gs-block-head h3, .gs .gs-block > h3 { margin: 0 0 0 !important; }
.gs .gs-h { margin: 22px 0 10px; }
.gs-pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-pill.done { background: var(--pw-soft); color: var(--cobalt); }
.gs-fine { margin: 8px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: var(--pw-muted); }
.gs-empty { margin: 10px 0 0 !important; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px !important; color: var(--pw-muted); }
.gs-bar { display: block; height: 5px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.gs-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cobalt); transition: width .4s ease; }
/* quests */
.gs-qlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.gs-qlist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 8px; padding: 10px 12px; background: #fff; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.gs-qlist li:has(.gs-qgo) { grid-template-columns: 22px minmax(0, 1fr) auto auto; padding-right: 8px; }
.gs-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #cdc4af; color: #fff; }
.gs-check .ic { width: 14px; height: 14px; }
.gs-check svg { stroke-width: 2.8; }
.gs-qlist li.done .gs-check { background: var(--cobalt); box-shadow: none; }
.gs-qlabel { min-width: 0; font-weight: 600; line-height: 1.35; }
.gs-qlist li.done .gs-qlabel { color: var(--pw-muted); }
.gs-qprog { font-size: 12.5px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-qlist li.done .gs-qprog { color: var(--cobalt); }
.gs-qlist .gs-bar { grid-column: 2 / -1; }
.gs-qlist li:has(.gs-qgo) .gs-bar { grid-column: 2 / 4; }
.gs-qlist .gs-qgo { grid-column: 4; grid-row: 1 / span 2; }
.gs-qgo { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--pw-soft); color: var(--cobalt); cursor: pointer; }
.gs-qgo:hover { background: var(--cobalt); color: #fff; }
.gs-qgo .ic { width: 17px; height: 17px; }
.gs-week { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 13px; background: var(--paper-2); }
.gs-week-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.gs-week-top span { font-weight: 600; }
.gs-week-top strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-week .gs-bar { background: #e5dbc5; }
.gs-week .gs-bar i { background: linear-gradient(90deg, #d9a93a, #ecc35a); }
/* game cards */
.gs-cards { display: grid; gap: 10px; }
.gs-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 14px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.gs-card.live { box-shadow: inset 0 0 0 2px var(--cobalt), 0 8px 20px rgba(47, 75, 255, .12); }
.gs-card > .gs-badge { align-self: start; }
.gs-card-body { min-width: 0; }
.gs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gs-card-title { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gs-card-head h4 { min-width: 0; }
.gs .btn.gs-go { flex: none; min-height: 34px; padding: 6px 12px 6px 10px; gap: 5px; border-radius: 10px; font-size: 13px; }
.gs-card .btn.gs-go { background: var(--pw-soft); color: var(--pw-deep); }   /* calm in the list; the live game gets the solid button */
.gs-card .btn.gs-go:hover, .gs-card.live .btn.gs-go { background: var(--cobalt); color: #fff; }
.gs-card .gs-goal { margin: 6px 0 0 !important; }
.gs-card .gs-how { margin-left: auto; min-height: 30px; padding: 4px 2px 4px 6px; }
.gs-more { min-height: 30px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.gs-more:hover { border-color: #cdc4af; }
.gs-place { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--pw-muted); }
.gs-place .ic { width: 13px; height: 13px; }
.gs-card .gs-rules { grid-column: 1 / -1; margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.gs-badge { width: 40px; height: 40px; border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.gs-badge svg { width: 22px; height: 22px; }
.gs-badge.sm { width: 34px; height: 34px; border-radius: 10px; }
.gs-badge.sm svg { width: 19px; height: 19px; }
.gs-card.live .gs-badge, .gs-sched li.live .gs-badge { background: var(--cobalt); color: #fff; }
.gs-card h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; }
.gs-where { margin: 1px 0 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; color: var(--pw-muted); }
.gs-goal { margin: 10px 0 0 !important; font-size: 13.5px !important; line-height: 1.45 !important; }
.gs-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.gs-chip { max-width: 100%; padding: 4px 9px; border-radius: 8px; background: var(--paper-2); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-chip.you { background: var(--pw-soft); color: var(--pw-deep); }
.gs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 11px; }
.gs-acts:empty { display: none; }
.gs-onnow .btn.gs-go { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
.gs-go .ic { width: 16px; height: 16px; }
.gs-how { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; min-height: 38px; padding: 6px 4px 6px 8px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--pw-muted); cursor: pointer; }
.gs-how:hover { color: var(--ink); }
.gs-how .ic, .pf-more .ic { width: 16px; height: 16px; transition: transform .2s ease; }
.gs-how[aria-expanded="true"] .ic, .pf-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.gs-rules { margin-top: 10px; padding: 11px 13px; border-radius: 12px; background: var(--paper-2); }
.gs-rules p { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; }
.gs-rules p + p { margin-top: 8px !important; }
.gs-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border-radius: 999px; background: #fbe7e5; color: var(--pw-live); font-size: 11px; font-weight: 800; letter-spacing: .01em; text-transform: none; }
.gs-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pwblink 1.4s ease-in-out infinite; }
@keyframes pwblink { 50% { opacity: .25; } }
/* events */
.gs-onnow { padding: 14px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--cobalt); }
.gs-onnow h3 { display: flex; align-items: center; gap: 8px; font-size: 15px !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
.gs-sched { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.gs-sched li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.gs-sched li:has(.gs-qgo) { grid-template-columns: 34px minmax(0, 1fr) auto; }
.gs-sched li.live { box-shadow: inset 0 0 0 2px var(--cobalt); }
.gs-sched .gs-qgo { align-self: center; }
.gs-ev { min-width: 0; }
.gs-ev-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.gs-ev-top strong { font-size: 14px; }
.gs-when { font-size: 12.5px; font-weight: 750; color: var(--pw-deep); font-variant-numeric: tabular-nums; }
.gs-sched .gs-where { margin-top: 3px !important; }
.gs-sched .gs-fine { margin-top: 4px !important; }
/* boards */
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.gs-chips button { min-height: 36px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.gs-chips button:hover { border-color: #cdc4af; }
.gs-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.gs-boardbox { margin-top: 12px; padding: 14px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.gs-boardbox h3 { font-size: 16px !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
.gs-boardbox .gs-fine { margin-top: 2px !important; }
.gs-sub { margin: 14px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pw-muted); }
.gs-board { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.gs-board li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 5px 10px 5px 5px; border-radius: 10px; font-size: 13.5px; }
.gs-board li:nth-child(odd) { background: #faf6ec; }
.gs-board li.me { background: var(--pw-soft); box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.gs-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--pw-muted); font-variant-numeric: tabular-nums; }
.gs-board .top1 .gs-rank { background: #f1cf73; color: #3f2c02; }
.gs-board .top2 .gs-rank { background: #dde2e9; color: #2c3138; }
.gs-board .top3 .gs-rank { background: #e8c2a0; color: #46260c; }
.gs-name { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-name em { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--cobalt); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; }
.gs-board strong { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gs-onnow .gs-board { margin-top: 10px; }
.gs .gs-note { margin-top: 20px; }
@media (max-width: 640px) {
  .gs-card { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 12px; }
  .gs-card > .gs-badge { width: 36px; height: 36px; border-radius: 11px; }
  .gs-card h4 { font-size: 15px; }
}

/* install the app (profile and the Games sheet) */
.install-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; padding: 12px; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.install-icon { flex: none; width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.install-text { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.install-text strong { font-size: 13.5px; }
.install-text small { font-size: 12px; line-height: 1.4; color: var(--pw-muted); }
.install-share { width: 15px; height: 15px; vertical-align: -3px; display: inline-grid; color: var(--cobalt); }
.install-row .btn { flex: none; margin-left: auto; }

/* Take me there: the waypoint arrow, the place and the distance left */
.waypoint { top: 72px; left: 16px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(340px, calc(100vw - 24px)); padding: 6px 6px 6px 7px; background: var(--ink); color: #fff; border-radius: 999px; box-shadow: var(--shadow); animation: pop .2s ease-out; }
.wp-dir { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l6.5 9.5h-4.3v7.5H9.8V13H5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform .12s linear; }
.wp-text { display: grid; min-width: 0; line-height: 1.2; }
.wp-text strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-dist { font-size: 12px; color: #c8d0ff; font-variant-numeric: tabular-nums; }
.wp-x { flex: none; width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.wp-x:hover { background: rgba(255, 255, 255, .24); }
@media (pointer: coarse), (max-width: 640px) {
  .waypoint { top: auto; bottom: 68px; left: 50%; translate: -50% 0; width: max-content; padding: 4px 4px 4px 5px; }
}
body.building .waypoint, .driving .waypoint { display: none; }

/* Character picker ------------------------------------------------------------------------------------------ */
#picker { max-width: min(1000px, calc(100vw - 32px)); }
#picker .picker header { align-items: center; gap: 12px; padding: 20px 20px 12px 24px; }
.picker-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.pk-info-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.pk-info-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.pk-info-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.pk-info { margin: 0 20px 12px 24px; padding: 12px 14px; max-height: 32vh; overflow: auto; border-radius: 12px; background: var(--paper-2); font-size: 13px; line-height: 1.5; }
.pk-info p { margin: 0; }
.pk-info p + p { margin-top: 6px; }
.pk-local { color: var(--pw-muted); }
#picker .picker-body { grid-template-columns: 224px minmax(0, 1fr); height: min(68vh, 640px); border-top: 1px solid var(--line); }
#picker .tabs { gap: 2px; padding: 12px 10px 16px 14px; }
#picker .tabs button { min-height: 40px; padding: 8px 10px 8px 12px; font-size: 14px; gap: 10px; }
#picker .tabs button:not([aria-selected="true"]):hover { background: var(--paper-2); }
#picker .tabs button:focus-visible { outline-offset: -2px; }
.pk-tab-name { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.pk-tab-st { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; color: var(--pw-muted); white-space: nowrap; }
.pk-tab-st .ic { width: 13px; height: 13px; }
.pk-tab-st[data-kind="yours"] { color: var(--cobalt); }
.pk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#picker .tabs button[aria-selected="true"] .pk-tab-st { color: #d9dde4; }
#picker .tabs button[aria-selected="true"] .pk-tab-st[data-kind="yours"] { color: #b4c0ff; }
#picker .panel { position: relative; padding: 16px 22px 22px; }
#picker .panel-head { display: block; }
.pk-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#picker .panel h3 { font-size: 20px; letter-spacing: -.01em; }
#picker .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; }
#picker .badge .ic { width: 13px; height: 13px; }
#picker .badge.free, #picker .badge.none { background: var(--paper-2); color: var(--ink); }
#picker .badge.yours { background: var(--pw-soft); color: var(--pw-deep); }
#picker .badge.locked { background: var(--ink); color: #fff; }
#picker #col-blurb { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--pw-muted); }
.pk-rule { display: grid; gap: 4px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.pk-rule p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; }
.pk-rule .ic { width: 15px; height: 15px; margin-top: 2px; color: var(--pw-muted); }
.pk-rule.flash { animation: pkflash .9s ease-out; }
@keyframes pkflash { 0%, 35% { background: var(--ink); color: #fff; } }
.pk-say { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 10px 24px rgba(29, 33, 38, .25); }
.pk-say .ic { width: 17px; height: 17px; color: #f2c95a; }
.pk-say.in { animation: pksay .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pksay { from { opacity: 0; transform: translateY(-6px); } }
#picker .style-bar { flex-wrap: nowrap; gap: 6px; max-width: 460px; margin: 14px 0; }
#picker .style-bar button { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 44px; padding: 6px 10px; line-height: 1.15; }
.pk-style-name { display: inline-flex; align-items: center; gap: 5px; }
.pk-style-name .ic { width: 13px; height: 13px; }
#picker .style-bar small { font-size: 10.5px; font-weight: 700; color: var(--pw-muted); }
#picker .style-bar button[aria-pressed="true"] small { color: #cfd3d9; }
#picker .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
#picker .card { position: relative; display: flex; flex-direction: column; padding: 6px 6px 10px; border-radius: 16px; }
#picker .card[aria-current="true"] { outline: 2px solid var(--cobalt); outline-offset: 0; box-shadow: 0 8px 20px rgba(47, 75, 255, .16); }
#picker .card:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
#picker .card span { margin: 0; font-size: inherit; font-weight: inherit; }
.pk-art { position: relative; display: block; }
#picker .card.locked img, #picker .card.locked .ph { filter: grayscale(.4); opacity: .8; }
.pk-lock { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(29, 33, 38, .88); color: #fff; }
.pk-lock .ic { width: 14px; height: 14px; }
.pk-wearing { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: 11px !important; font-weight: 800 !important; }
.pk-wearing .ic { width: 12px; height: 12px; }
.pk-wearing svg { stroke-width: 2.8; }
#picker .card .pk-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.5em; margin-top: 8px; padding: 0 2px; font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
#picker .card .pk-tier { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--pw-muted); }
#picker .card.nudge { animation: pknudge .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes pknudge { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
#picker #nft-form button { min-height: 40px; }
@media (max-width: 640px) {
  #picker { max-width: calc(100vw - 16px); border-radius: 18px; }
  #picker .picker { height: min(calc(100dvh - 24px), 860px); max-height: calc(100dvh - 24px); }
  #picker .picker header { padding: 14px 12px 8px 18px; }
  #picker .picker h2 { font-size: 19px; }
  #picker .picker header p { font-size: 12.5px; }
  .pk-info { margin: 0 12px 10px; }
  #picker .picker-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; flex: 1 1 auto; }
  #picker .tabs { flex-direction: row; gap: 6px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--line); scroll-padding-inline: 28px; }
  #picker .tabs::-webkit-scrollbar { display: none; }
  #picker .tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  #picker .tabs.more-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
  #picker .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
  #picker .tabs button { flex: none; min-height: 44px; padding: 8px 14px; gap: 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  #picker .tabs button[aria-selected="true"] { box-shadow: none; }
  #picker .tabs .pk-st-txt { display: none; }
  #picker .tabs .pk-tab-name { white-space: nowrap; }
  #picker .panel { padding: 12px 14px 18px; }
  #picker .panel h3 { font-size: 18px; }
  #picker .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #picker .card { padding: 5px 5px 8px; border-radius: 14px; }
  #picker .card .pk-name { font-size: 12px; }
  .pk-lock { top: 4px; right: 4px; width: 22px; height: 22px; }
  .pk-lock .ic { width: 12px; height: 12px; }
  .pk-wearing { left: 4px; bottom: 4px; padding: 2px 6px 2px 4px; font-size: 10px !important; }
}

/* Profile ------------------------------------------------------------------------------------------------- */
.pf-card { margin-top: 14px; padding: 14px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.pf .pf-card h3 { margin: 0 !important; font-size: 18px !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink) !important; }
.pf-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pw-muted); }
.pf-sub { margin: 2px 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--pw-muted); }
.pf-fine { margin: 12px 0 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: var(--pw-muted); }
/* tier */
.pf-tier-top { display: grid; gap: 2px; }
.pf-tier[data-tier="vault"], .pf-tier[data-tier="mint"] { background: #fffaf0; box-shadow: inset 0 0 0 1.5px #d9a93a; }
.pf-ladder { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 12px 0 0; padding: 0; }
.pf-ladder li { display: grid; gap: 5px; align-content: start; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--pw-muted); }
.pf-ladder i { display: block; height: 6px; border-radius: 999px; background: var(--paper-2); }
.pf-ladder li.past i { background: #aebaff; }
.pf-ladder li.now i { background: var(--cobalt); }
.pf-ladder li.now { color: var(--ink); font-weight: 800; }
.pf-perks { list-style: none; display: grid; gap: 6px; margin: 12px 0 0; padding: 0; font-size: 13px; }
.pf-perks li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.pf-perks .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--cobalt); }
.pf-perks svg { stroke-width: 2.4; }
.pf-next { margin: 12px 0 0 !important; padding: 10px 12px; border-radius: 12px; background: var(--pw-soft); color: var(--pw-deep); font-size: 13px !important; line-height: 1.45 !important; }
.pf-more { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 6px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--cobalt); cursor: pointer; }
.pf-tiers { list-style: none; display: grid; gap: 8px; margin: 6px 0 0; padding: 0; }
.pf-tiers > li { padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.pf-tiers > li.now { background: var(--pw-soft); box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.pf-tiers-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pf-you { padding: 1px 7px; border-radius: 999px; background: var(--cobalt); color: #fff; font-size: 10.5px; font-weight: 800; }
.pf-tiers small { display: block; margin-top: 2px; font-size: 12px; color: var(--pw-muted); }
.pf-tiers ul { display: grid; gap: 2px; margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
/* level */
.pf-level-top { display: flex; align-items: center; gap: 12px; }
.pf-level-top > div { min-width: 0; }
.pf-lv { flex: none; display: grid; place-items: center; align-content: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(150deg, #3a56ff, #1f34c7); color: #fff; font-size: 22px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-lv small { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pf-level .pf-sub { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-bar { display: block; height: 8px; margin-top: 12px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.pf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9a93a, #efc34f); }
.pf-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 12.5px; color: var(--pw-muted); }
.pf-meta strong { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-goals-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.pf-goals-head .pf-more { margin: 0; }
.pf-goals-head h4, .pf-xpall h4 { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pw-muted); }
.pf-xpall h4 { margin-top: 14px; }
.pf-xplist { list-style: none; display: grid; gap: 4px; margin: 6px 0 0; padding: 0; }
.pf-xplist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 7px 10px; border-radius: 10px; background: #faf6ec; font-size: 13px; }
.pf-xplist li:has(.pf-go) { grid-template-columns: minmax(0, 1fr) auto auto; padding-right: 5px; }
.pf-xl { min-width: 0; line-height: 1.35; }
.pf-xv { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-xplist li.full .pf-xv { color: var(--cobalt); }
.pf-go { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--pw-soft); color: var(--cobalt); cursor: pointer; }
.pf-go:hover { background: var(--cobalt); color: #fff; }
.pf-go .ic { width: 16px; height: 16px; }
.pf-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 14px; }
.pf-tools .badges { margin: 0; }
.pf-preview { margin-top: 12px; }
.pf-preview-body { margin-top: 4px; padding: 4px 12px 12px; border-radius: 12px; background: var(--pw-soft); font-size: 13px; }
.pf-preview-body > p { margin: 8px 0 0; font-size: 13px !important; }
.pf .pf-signin p { line-height: 1.5; }

/* touch: every target at least 44 px */
@media (pointer: coarse) {
  .gs-seg button, .gs .btn.gs-go, .gs-more, .gs-how, .gs .gs-card .gs-how, .gs-chips button, .pf-more, .install-row .btn, .pf .btn, .gs .btn { min-height: 44px; }
  .gs-qgo, .pf-go, .wp-x, #picker .close, .pk-info-btn { width: 44px; height: 44px; }
  #picker .tabs button, #picker .style-bar button, #picker #nft-form button, #picker #nft-form input, .pf .field input { min-height: 44px; }
  .pf .who-sub a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-live i, #picker .card.nudge, .pk-say.in, .waypoint, .pk-rule.flash { animation: none; }
  .pk-rule.flash { box-shadow: inset 0 0 0 2px var(--ink); }
  #picker .card.nudge { box-shadow: 0 0 0 3px var(--ink); }
  .gs-bar i, .gs-how .ic, .pf-more .ic, .wp-dir { transition: none; }
}

/* ---- Loading screen: progress, failure and Try again (polish-perf; src/boot-guard.js drives it) ---- */
.loader { padding: 0 24px; }
.loader .brand-mark { display: block; margin: 0 auto; }   /* a span: without this it has no size and never showed */
.load-track { width: 168px; height: 4px; margin: 14px auto 0; border-radius: 999px; background: rgba(29, 33, 38, .1); overflow: hidden; }
.load-track i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform: scaleX(.04); transform-origin: left center; transition: transform .45s ease-out; }
#loading.failed .load-track { display: none; }
#loading.failed #loading-text { color: var(--ink); }
.loader .load-detail { margin-top: 6px; font-weight: 500; font-size: 13px; max-width: 320px; line-height: 1.45; }
.load-retry { margin-top: 18px; border: 0; border-radius: 999px; padding: 10px 20px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.load-retry:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .load-track i { transition: none; } }
/* ACCESS TASK: access locks, the guest chat lock, Log out and the character ladder (ui/account.js, shared/access.js) */
.door-prompt .lock-ic { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.door-prompt.locked button { background: #3b3f47; color: #f4efe2; }
.door-prompt.locked .lock-ic { display: block; }
.door-prompt.locked .door-ic { display: none; }
.door-prompt.locked span { white-space: normal; text-align: left; font-size: var(--t-md); line-height: 1.25; }
.chat.locked { width: auto; max-width: 300px; padding: 6px 6px 6px 8px; }
.chat.locked > :not(.chat-lock) { display: none !important; }
.chat.locked > .chat-lock:not([hidden]) { display: flex !important; }   /* also when the chat is folded (.min) */
.chat-lock { display: flex; align-items: center; gap: 8px; }
.chat-lock[hidden] { display: none; }
.chat-lock-ic { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; }
.chat-lock-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-lock-text { font-size: var(--t-sm); font-weight: 600; color: var(--muted); line-height: 1.3; }
.chat-lock .btn { flex: none; }
.chat-gate .chat-need { display: block; color: var(--ink); margin-bottom: 2px; }
.qc-btn.locked { opacity: .55; }
.pf-access { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--pw-muted, var(--muted)); }
.pf-logout { margin-top: 8px; }
.pf-ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pk-ladder { margin: 0 24px 10px; padding: 10px 12px; border-radius: 12px; background: var(--pw-soft, #e9edff); font-size: 12.5px; }
.pk-ladder-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pk-ladder-head strong { font-size: 13px; }
.pk-ladder-head span { color: var(--pw-muted, var(--muted)); font-weight: 600; }
.pk-steps { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 8px 0 0; padding: 0; }
.pk-steps li { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 6px; border-radius: 8px; background: rgba(255, 255, 255, .6); color: var(--pw-muted, var(--muted)); font-weight: 700; font-size: 11px; line-height: 1.15; }
.pk-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-steps li i { flex: none; display: grid; }
.pk-steps li .ic { width: 12px; height: 12px; }
.pk-steps li.done { color: var(--pw-deep, var(--cobalt-ink)); }
.pk-steps li.now { background: var(--cobalt); color: #fff; }
.pk-steps li.next { box-shadow: inset 0 0 0 2px var(--cobalt); color: var(--ink); }
.pk-ladder-next { margin: 8px 0 0; }
.pk-ladder-next p { margin: 6px 0 0; line-height: 1.4; }
.pk-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.pk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9a93a, #efc34f); }
@media (max-width: 640px) {
  .pk-ladder { margin: 0 12px 8px; padding: 8px 10px; }
  .pk-steps { display: flex; overflow-x: auto; scrollbar-width: none; }
  .pk-steps li { flex: none; }
  .pk-steps li:not(.now):not(.next) span { display: none; }
}
@media (pointer: coarse) {
  .chat.locked { top: var(--top); bottom: auto; left: calc(var(--left) + var(--hud-h) + 8px); width: var(--hud-h); height: var(--hud-h); max-height: none; padding: 0; border-radius: 50%; }
  .chat.locked .chat-lock-text, .chat.locked .chat-lock .btn { display: none; }
  .chat.locked .chat-lock-ic { width: var(--hud-h); height: var(--hud-h); background: none; }
}
/* ACCESS TASK end */

/* ---- CASTLE: player cards (ui/playercard.js), the castle invite line, the admin's hangout list, the gate lock (games/castle.js) ---- */
#labels .tag.player, #labels .tag.you { pointer-events: auto; cursor: pointer; }   /* tap a name for a player card */
#labels .tag.player:hover { box-shadow: 0 0 0 2px var(--cobalt), 0 1px 3px rgba(0,0,0,.15); }
.tag.place.castle-lock { background: rgba(27, 42, 153, .9); color: #fff3cf; font-size: var(--t-sm); }
.chip.whale { background: #e2e7ff; color: #1b2a99; box-shadow: inset 0 0 0 1px #c9d1ff; }
.pcard .pc-who .who h2 { margin: 0; }
.pcard .pc-char { margin: 6px 0 0; font-size: var(--t-md); color: var(--muted); }
.pcard .pc-line { margin: 12px 0 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--t-lg); line-height: 1.4; }
.pc-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pc-items.one { grid-template-columns: 1fr; margin: 0; flex: 1; }
.pc-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); text-align: center; min-width: 0; }
.pc-item .pc-label { font-size: var(--t-sm); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pc-item small { font-size: var(--t-xs); color: var(--muted); }
.pc-item .pc-art { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--paper-2); overflow: hidden; color: var(--cobalt); }
.pc-item.nft img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pc-item .pc-desk { font-weight: 800; font-size: var(--t-md); color: var(--ink); }
.pc-item.fish { box-shadow: inset 0 0 0 2px var(--rarity, var(--line)); }
.pc-item.stat strong { font-size: var(--t-xl); line-height: 1.1; color: var(--ink); padding-top: 6px; }
.pc-item.badge.whale .pc-art { background: #e2e7ff; color: #1b2a99; }
.pc-item.badge .pc-art { color: var(--gold); }
.pc-empty { margin-top: 12px; padding: 12px; border-radius: var(--r-md); background: var(--paper-2); }
.pc-empty p { margin: 0 0 8px; font-size: var(--t-md); }
.pc-castle { display: grid; gap: 8px; margin-top: 14px; }
.pc-castle .castle-invite-btn { justify-content: center; background: #1b2a99; }
.pc-castle-note { margin: 0; font-size: var(--t-md); color: var(--muted); }
.pc-actions { margin-top: 14px; }
.pc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pc-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: var(--paper-2); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.pc-row small { color: var(--muted); font-size: var(--t-sm); }
.pc-pick-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.pc-count { font-size: var(--t-sm); color: var(--muted); }
.pc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pc-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pc-pick input { width: 20px; height: 20px; flex: none; accent-color: var(--cobalt); }
.pc-pick .pc-item { flex-direction: row; text-align: left; padding: 6px; }
.pc-pick .pc-item .pc-art { width: 40px; height: 40px; flex: none; }
.pc-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 12px; border-radius: var(--r-md); background: var(--paper-2); }
.pc-profile-row small { display: block; color: var(--muted); font-size: var(--t-sm); margin-top: 2px; }
.chat .online[role="button"] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.consent.castle-invite { background: #1b2a99; color: #fff7e0; }
.consent.castle-invite .consent-ok { background: #eccb6a; color: #1b2a99; }
.castle-no { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: #c9d1ff; font: inherit; font-weight: 600; font-size: var(--t-md); cursor: pointer; }
.castle-crown { position: absolute; right: var(--right); bottom: calc(var(--bottom) + 168px); z-index: 5; height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: #1b2a99; color: #fff3cf; font: inherit; font-weight: 700; font-size: var(--t-md); box-shadow: var(--shadow); cursor: pointer; }
.castle-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.castle-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--r-md); background: var(--paper-2); font-weight: 600; }
.castle-rows li small { color: var(--cobalt); font-weight: 700; }
@media (pointer: coarse) { .castle-no, .castle-crown, .pc-pick input { min-height: 44px; } .castle-rows .btn { min-height: 44px; } }
@media (max-width: 420px) { .pc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-picks { grid-template-columns: 1fr; } }
/* ---- Launch Site: the Build Hall's sheets (games/launch.js) ---- */
.launch-sheet .launch-list, .launch-sheet .launch-board { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.launch-sheet .launch-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); }
.launch-sheet .launch-list .who { display: grid; gap: 2px; min-width: 0; }
.launch-sheet .launch-list .who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-sheet .launch-list small { color: var(--muted); text-transform: capitalize; }
.launch-sheet .sym { color: var(--cobalt-ink); font-weight: 700; font-size: var(--t-sm); }
.launch-sheet .launch-board { counter-reset: rank; }
.launch-sheet .launch-board li { counter-increment: rank; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--paper-2); }
.launch-sheet .launch-board li::before { content: counter(rank); font-weight: 800; color: var(--muted); min-width: 1.4ch; }
.launch-sheet .launch-board li:first-child::before { color: var(--gold); }
.launch-sheet .launch-board a { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.launch-sheet .launch-board a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-sheet .launch-board a:hover strong, .launch-sheet .launch-board a:focus-visible strong { text-decoration: underline; }
.launch-sheet .launch-board .val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }


/* Minimap (ui/minimap.js): round, bottom right above the Controls card on a computer; on phones a small
   round button above Go Brrr in the left thumb column (tap: the full map). Hidden while driving (the kart
   map takes over), painting, during the first arrival, and while a side sheet covers it. --------------- */
.minimap { --mm: 172px; right: var(--right); bottom: calc(var(--bottom) + var(--mm-help, 0px) + 14px); width: var(--mm); height: var(--mm); transition: opacity .25s, visibility .25s; }
.minimap.mm-off { opacity: 0; visibility: hidden; pointer-events: none; }
.mm-face { position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: #2c72b5; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(29, 33, 38, .1), var(--shadow); -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .15s ease; }
.mm-face::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 1px 8px rgba(29, 33, 38, .28), inset 0 0 0 1px rgba(29, 33, 38, .16); }
.mm-face:hover { transform: scale(1.015); }
.mm-face:focus-visible { outline: 3px solid var(--cobalt-ink); outline-offset: 6px; }
.mm-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.mm-compass { position: absolute; left: -4px; bottom: -4px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); }
.mm-compass:hover { background: #fff; }
.mm-compass svg { width: 20px; height: 20px; transition: transform .2s ease; }
.mm-needle-n { fill: #d8392f; } .mm-needle-s { fill: #a3a8b0; }
.minimap.mm-north .mm-compass { background: var(--ink); }
.minimap.mm-north .mm-needle-s { fill: #6f757d; }
.mm-place { position: absolute; left: 50%; top: -12px; transform: translate(-50%, -100%); max-width: calc(var(--mm) + 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); box-shadow: var(--shadow); }
.mm-place:empty { display: none; }
@media (max-height: 780px) and (pointer: fine) { .minimap { --mm: 148px; } }
@media (max-width: 640px), (pointer: coarse) {
  .minimap { --mm: 72px; right: auto; left: calc(var(--joy-left) - 3px); bottom: calc(var(--brrr-bottom) + 66px + 14px); }
  #app:has(.brrr-mini:not([hidden])) .minimap { bottom: calc(var(--brrr-bottom) + 72px + 14px); }
  .mm-face { box-shadow: 0 0 0 3px var(--paper), var(--shadow); }
  .mm-face:hover { transform: none; }
  .mm-face:active { transform: scale(.95); }
  .mm-compass, .mm-place { display: none; }
  #app:has(.catch-card:not([hidden])) .minimap { visibility: hidden; }
}
@media (pointer: coarse) and (max-height: 500px) {
  .minimap { --mm: 62px; bottom: calc(var(--brrr-bottom) + 56px + 12px); }
  body.chat-open .minimap { visibility: hidden; }
}

/* The full map (ui/fullmap.js): a dialog with the map, who is here (Find, star), what is on now and the legend */
.map-dialog { width: min(1320px, calc(100vw - 32px)); max-width: none; height: min(880px, calc(100dvh - 32px)); max-height: none; overflow: hidden; }
.map-dialog::backdrop { background: rgba(28, 24, 16, .5); backdrop-filter: blur(3px); }
.map-dialog[open] { animation: mapin .22s ease-out; }
@keyframes mapin { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.map-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 10px 20px; border-bottom: 1px solid var(--line); }
.map-titles { min-width: 0; }
.map-titles h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.01em; line-height: 1.15; }
.map-sub { margin: 2px 0 0; font-size: var(--t-md); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.map-tool { width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: var(--r-md); display: inline-grid; place-items: center; cursor: pointer; background: var(--paper-2); color: var(--ink); }
.map-tool:hover { background: var(--paper-3); }
.map-ic { display: block; width: 20px; height: 20px; flex: none; }
.map-ic svg { display: block; width: 100%; height: 100%; }
.map-north { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; font: inherit; font-size: var(--t-md); font-weight: 700; }
.map-north .map-ic { color: #d8392f; }
.map-north[aria-pressed="true"] { background: var(--ink); color: #fff; }
.map-north[aria-pressed="true"] .map-ic { color: #ff8a7a; }
.map-close { margin-left: 4px; flex: none; }
.map-body { display: grid; grid-template-columns: minmax(0, 1fr) 312px; min-height: 0; }
.map-view { position: relative; min-height: 0; min-width: 0; background: #2c72b5; overflow: hidden; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; outline: none; }
.map-canvas.grab { cursor: grabbing; }
.map-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--cobalt-ink); }
.map-cross { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.map-cross::before, .map-cross::after { content: ""; position: absolute; background: var(--ink); box-shadow: 0 0 0 2px var(--paper); border-radius: 2px; }
.map-cross::before { left: 14px; top: 2px; width: 2px; height: 26px; }
.map-cross::after { top: 14px; left: 2px; height: 2px; width: 26px; }
.map-canvas:focus-visible + .map-cross { opacity: 1; }
.map-side { min-height: 0; overflow: auto; border-left: 1px solid var(--line); padding: 14px 14px 18px; display: grid; align-content: start; gap: 18px; background: var(--paper); }
.map-side h3 { margin: 0 0 8px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.map-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px; padding: 3px 4px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.map-list li.following { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--gold); }
.map-list li.sel { box-shadow: inset 0 0 0 2px var(--cobalt); }
.map-who { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 2px 6px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.map-who > span { display: grid; min-width: 0; line-height: 1.25; }
.map-who strong { font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-who span span { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-dot { display: block; width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2.5px #fff, 0 0 0 3.5px rgba(29, 33, 38, .18); }
.map-list li.friend .map-dot { box-shadow: 0 0 0 2.5px var(--gold), 0 0 0 3.5px rgba(29, 33, 38, .18); }
.map-star { width: 36px; height: 36px; background: transparent; color: #7c8188; }
.map-star[aria-pressed="true"] { color: #a8730c; background: #fdf1d3; }
.map-star[aria-pressed="true"] svg path { fill: currentColor; }
.map-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-md); font-weight: 700; white-space: nowrap; }
.map-btn:hover { background: var(--paper-3); }
.map-btn.primary, .map-list .map-btn { background: var(--ink); color: #fff; }
.map-btn.primary:hover, .map-list .map-btn:hover { background: #000; }
.map-btn.small { height: 32px; padding: 0 11px 0 8px; font-size: var(--t-sm); }
.map-btn .map-ic { width: 16px; height: 16px; }
.map-btn[aria-pressed="true"] { background: #fdf1d3; color: #7a520a; }
.map-btn[aria-pressed="true"] svg path { fill: currentColor; }
.map-away { margin-top: 10px; }
.map-away li { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 4px 4px 12px; }
.map-away li .map-who { display: grid; gap: 0; padding: 0; min-height: 36px; align-content: center; cursor: default; }
.map-away .map-away-h { display: block; padding: 4px 2px 0; background: none; box-shadow: none; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.map-empty { margin: 0; font-size: var(--t-md); color: var(--muted); line-height: 1.45; }
.map-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.map-legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: var(--r-md); }
.map-legend li.on { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.map-swatch { display: block; width: 28px; height: 28px; }
.map-key-text { display: grid; min-width: 0; line-height: 1.3; }
.map-key-text strong { font-size: var(--t-md); }
.map-key-text > span { font-size: var(--t-sm); color: var(--muted); }
.map-key-text .map-live { color: #8f2a1f; font-weight: 700; font-variant-numeric: tabular-nums; }
.map-key-text .map-live:empty { display: none; }
.map-foot { display: grid; gap: 6px; align-content: center; min-height: 46px; padding: 8px 14px 10px 20px; border-top: 1px solid var(--line); }
.map-status { margin: 0; font-size: var(--t-md); color: var(--muted); }
.map-sel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-sel > .map-dot { margin: 0 4px 0 2px; }
.map-sel-text { display: grid; min-width: 0; margin-right: auto; line-height: 1.2; }
.map-sel-text strong { font-size: var(--t-lg); }
.map-sel-meta { font-size: var(--t-sm); color: var(--muted); }
.map-sel:not([hidden]) + .map-status { display: none; }
@media (pointer: coarse) {
  .map-tool, .map-dialog .close { width: 44px; height: 44px; }
  .map-btn, .map-btn.small, .map-who, .map-away li .map-who { min-height: 44px; }
  .map-star { width: 44px; height: 44px; }
}
/* phones: the map fills the screen, the list and legend below it (beside it when the phone is on its side) */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .map-dialog { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  .map-head { gap: 8px; padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) 8px calc(var(--safe-l) + 14px); }
  .map-titles h2 { font-size: var(--t-lg); }
  .map-sub { font-size: var(--t-sm); }
  .map-tools { gap: 4px; }
  .map-tools [data-act="in"], .map-tools [data-act="out"], .map-north-txt { display: none; }
  .map-north { width: 44px; padding: 0; justify-content: center; }
  .map-foot { padding: 8px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 14px); }
  .map-sel-text strong { font-size: var(--t-md); }
}
@media (max-width: 640px) {
  .map-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .map-side { max-height: 34dvh; border-left: 0; border-top: 1px solid var(--line); padding: 10px calc(var(--safe-r) + 12px) 12px calc(var(--safe-l) + 12px); gap: 14px; }
  .map-sel .map-btn > span:not(.map-ic) { display: none; }
  .map-sel .map-btn { width: 44px; padding: 0; justify-content: center; }
}
@media (pointer: coarse) and (max-height: 500px) {
  .map-head { padding-top: calc(var(--safe-t) + 4px); padding-bottom: 4px; }
  .map-sub { display: none; }
  .map-body { grid-template-columns: minmax(0, 1fr) 270px; }
  .map-side { padding: 10px calc(var(--safe-r) + 10px) 12px 12px; }
  .map-foot { min-height: 0; padding-top: 4px; padding-bottom: calc(var(--safe-b) + 4px); }
}
@media (pointer: coarse) { .map-cross { display: none; } }
@media (prefers-reduced-motion: reduce) { .map-dialog[open] { animation: none; } .map-cross { transition: none; } }
.map-key-text .map-lock { display: flex; align-items: center; gap: 5px; font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.map-key-text .map-lock::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2.2'/%3E%3Cpath d='M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2.2'/%3E%3Cpath d='M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.map-key-text .map-lock[hidden] { display: none; }
/* GARAGE: the Speedway Garage panel (ui/shop.js), gold nameplates (games/pets.js) and the kart bar horn ---------- */
#sheet.garage-sheet { width: min(780px, calc(100vw - 24px)); overflow: hidden; display: flex; flex-direction: column; background: #f7f2e7; }
#sheet.garage-sheet > .sheet-close { display: none; }
#sheet.garage-sheet #sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.garage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "head head" "left right" "note note"; gap: 0 18px; padding: 16px 18px 18px; }
.gar-left { grid-area: left; min-width: 0; }
.gar-right { grid-area: right; min-width: 0; display: flex; flex-direction: column; }
.gar-head { grid-area: head; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gar-head h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.01em; }
.gar-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper-2); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); flex: none; }
.gar-close:hover { background: var(--paper-3); }
.gar-stage { position: relative; height: 320px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 50% 26%, #434b5c 0%, #262a33 52%, #15171c 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(20, 22, 28, .25); }
.gar-stage::before { content: ''; position: absolute; left: 50%; top: -30%; width: 70%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 244, 214, .16), transparent); pointer-events: none; }
.gar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.gar-canvas:active { cursor: grabbing; }
.gar-over { position: absolute; left: 16px; top: 14px; right: 16px; display: grid; gap: 2px; pointer-events: none; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.gar-name { font-size: 26px; font-weight: 850; letter-spacing: -.01em; line-height: 1.1; }
.gar-style { font-size: 12.5px; font-weight: 600; color: #b9c2cf; }
.gar-price { margin-top: 6px; justify-self: start; font-size: 13px; font-weight: 700; color: #f3e2b0; background: rgba(0, 0, 0, .32); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(242, 201, 76, .35); }
.gar-price b { color: #ffd76a; font-weight: 850; font-variant-numeric: tabular-nums; }
.gar-drag { position: absolute; right: 14px; bottom: 10px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.42); pointer-events: none; }
.gar-plate { position: absolute; transform: translate(-50%, -100%); pointer-events: none; }
.gar-info { padding: 12px 2px 0; }
.gar-blurb { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.gar-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.gar-soon { font-size: 13px; padding: 8px 14px; }
.gar-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.gar-tabs { display: flex; gap: 2px; padding: 4px; background: var(--paper-2); border-radius: 14px; align-self: stretch; }
.gar-tabs button { flex: 1; min-height: 38px; border: 0; background: none; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 750; color: var(--muted); cursor: pointer; }
.gar-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(30, 24, 10, .14); }
.gar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; padding: 10px 0 2px; max-height: 420px; overflow-y: auto; }
.gar-card { display: grid; gap: 1px; padding: 5px 5px 8px; border: 1px solid var(--line); background: #fff; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: transform .12s, box-shadow .12s; }
.gar-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.gar-card[aria-pressed="true"] { outline: 2px solid var(--cobalt); outline-offset: 0; }
.gar-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: radial-gradient(110% 90% at 50% 30%, #434b5c, #1b1e24); margin-bottom: 5px; }
.gar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gar-thumb img.pixel { object-fit: contain; image-rendering: pixelated; padding: 6px; }
.gar-card strong { font-size: 12.5px; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gar-card small { font-size: 11px; font-weight: 650; padding: 0 3px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.gar-card.owned small { color: #1f6b3a; }
.gar-card.locked .gar-thumb img { filter: grayscale(.85) brightness(.75); }
.gar-card.locked small { color: #8a6412; }
.gar-note { grid-area: note; margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .garage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "left" "right" "note"; padding: 12px 12px 14px; }
  .gar-stage { height: 230px; }
  .gar-tabs { margin-top: 12px; }
  .gar-list { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (max-width: 640px) { #sheet.garage-sheet { max-height: 86dvh; } .gar-stage { height: 200px; } .gar-name { font-size: 22px; } }
@media (pointer: coarse) { .gar-tabs button, .gar-close { min-height: 44px; } .gar-close { width: 44px; height: 44px; } }
.tag.gold-plate { background: linear-gradient(135deg, #fff4c9 0%, #f2c94c 46%, #d9a93a 100%); color: #3d2a05; box-shadow: 0 0 0 2px #b8862b, 0 0 14px rgba(242, 201, 76, .6); font-weight: 750; }
.tag.you.gold-plate { box-shadow: 0 0 0 2px var(--cobalt), 0 0 14px rgba(242, 201, 76, .6); }
.kart-horn { background: #fbf0d3 !important; color: #5a3d06 !important; gap: 6px; }
.kart-bar .kart-skin img { object-fit: cover; }

/* PAINTBALL (games/paintball.js): the first-person HUD, the pause card, the scoreboard and the phone controls.
   body.pb-on while you are on the field. Team colors come in as --pb. ------------------------------------------ */
body.pb-on #scene { cursor: crosshair; }
body.pb-on .emotes, body.pb-on .help, body.pb-on .door-prompt, body.pb-on .brrr-entry, body.pb-on .brrr-mini { display: none !important; }
body.pb-on .minimap { visibility: hidden !important; }   /* no map on the field: it would show where everyone is */
body.pb-on .rail { top: calc(var(--rail-top) + 54px); }
.tag.pb-hide, .tag.pb-foe { visibility: hidden; }
.tag.pb-mate { box-shadow: 0 0 0 2px var(--pb, #fff), 0 1px 3px rgba(0,0,0,.2); }
.pb-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: Geist, system-ui, sans-serif; color: #fff; }
.pb-hud button, .pb-hud input, .pb-pause { pointer-events: auto; }
.pb-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pb-cross::before { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20, 23, 28, .8); }
.pb-cross i, .pb-mark { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; filter: drop-shadow(0 0 1px rgba(20, 23, 28, .95)); }
.pb-cross i { background: linear-gradient(#fff, #fff) 50% 0 / 2px 8px no-repeat, linear-gradient(#fff, #fff) 50% 100% / 2px 8px no-repeat, linear-gradient(#fff, #fff) 0 50% / 8px 2px no-repeat, linear-gradient(#fff, #fff) 100% 50% / 8px 2px no-repeat; }
.pb-mark { left: -17px; top: -17px; width: 34px; height: 34px; opacity: 0; transform: rotate(45deg);
  background: linear-gradient(#fff, #fff) 50% 0 / 3px 11px no-repeat, linear-gradient(#fff, #fff) 50% 100% / 3px 11px no-repeat, linear-gradient(#fff, #fff) 0 50% / 11px 3px no-repeat, linear-gradient(#fff, #fff) 100% 50% / 11px 3px no-repeat; }
.pb-mark.on { animation: pb-mark .26s ease-out; }
.pb-mark.out { width: 46px; height: 46px; left: -23px; top: -23px; animation-duration: .5s;
  background: linear-gradient(#ff4a5a, #ff4a5a) 50% 0 / 4px 15px no-repeat, linear-gradient(#ff4a5a, #ff4a5a) 50% 100% / 4px 15px no-repeat, linear-gradient(#ff4a5a, #ff4a5a) 0 50% / 15px 4px no-repeat, linear-gradient(#ff4a5a, #ff4a5a) 100% 50% / 15px 4px no-repeat; }
@keyframes pb-mark { 0% { opacity: 1; transform: rotate(45deg) scale(1.35); } 30% { opacity: 1; transform: rotate(45deg) scale(1); } 100% { opacity: 0; transform: rotate(45deg) scale(1); } }
.pb-aimname { position: absolute; left: 50%; top: calc(50% + 24px); transform: translateX(-50%); font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.9); white-space: nowrap; }
.pb-flash { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); font-size: 22px; font-weight: 900; text-shadow: 0 2px 0 #1d2126, 0 0 14px rgba(0,0,0,.4); opacity: 0; white-space: nowrap; }
.pb-flash.on { animation: pb-flash 1.4s ease-out forwards; }
.pb-flash.out { color: #ffd23a; }
@keyframes pb-flash { 0% { opacity: 0; transform: translateX(-50%) scale(.7); } 12% { opacity: 1; transform: translateX(-50%) scale(1.08); } 20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
.pb-top { position: absolute; top: var(--rail-top); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px); padding: 7px 18px; border-radius: var(--r-pill); background: rgba(20, 23, 28, .84); box-shadow: var(--shadow); font-size: var(--t-md); white-space: nowrap; }
.pb-top strong { font-size: var(--t-lg); }
.pb-top .pb-clock { font-size: 20px; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.pb-top .pb-team { color: var(--pb); font-size: 17px; font-weight: 900; }
.pb-top small { color: #b8c0ca; font-size: var(--t-xs); }
.pb-feed { position: absolute; top: var(--rail-top); right: var(--right); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; justify-items: end; font-size: var(--t-md); }
.pb-feed li { background: rgba(20, 23, 28, .78); padding: 4px 10px; border-radius: var(--r-sm); }
.pb-feed b { font-weight: 800; }
.pb-me { position: absolute; left: 50%; bottom: var(--bottom); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(20, 23, 28, .7); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.pb-drops { display: flex; gap: 5px; }
.pb-drops i { width: 15px; height: 19px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; border: 2px solid rgba(255,255,255,.85); }
.pb-drops i.hit { background: #ff5a4a; border-color: #ff5a4a; }
.pb-you { color: var(--pb); }
.pb-me em { font-style: normal; color: #9fe8ff; }
.pb-mod { padding: 2px 8px; border-radius: var(--r-pill); background: #ffd23a; color: #1d2126; }
.pb-ammo { position: absolute; right: var(--right); bottom: var(--bottom); display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: end; column-gap: 4px; text-align: right; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pb-ammo strong { font-size: 36px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.pb-ammo span { font-size: 15px; font-weight: 700; opacity: .85; }
.pb-ammo .pb-hopper { grid-column: 1 / -1; width: 120px; height: 6px; justify-self: end; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.pb-ammo .pb-hopper b { display: block; height: 100%; background: #fff; border-radius: 3px; }
.pb-ammo small { grid-column: 1 / -1; font-size: var(--t-xs); font-weight: 700; opacity: .8; min-height: 14px; }
.pb-ammo.low strong { color: #ff6a5a; }
.pb-paint i { position: absolute; -webkit-mask: var(--pb-splat) center / contain no-repeat; mask: var(--pb-splat) center / contain no-repeat; opacity: 0; animation: pb-blot 1.8s ease-out forwards; }
@keyframes pb-blot { 0% { opacity: .95; scale: .55; } 12% { opacity: .9; scale: 1; } 60% { opacity: .75; } 100% { opacity: 0; scale: 1.04; } }
.pb-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pb-dir i { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border-top: 6px solid rgba(255, 74, 90, .9); animation: pb-dir 1.2s ease-out forwards; }
@keyframes pb-dir { 0% { opacity: 1; } 100% { opacity: 0; } }
.pb-out { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: grid; gap: 4px; text-align: center; padding: 14px 26px; border-radius: var(--r-lg); background: rgba(20, 23, 28, .86); box-shadow: var(--shadow); }
.pb-out strong { font-size: var(--t-xl); }
.pb-out span { font-size: var(--t-lg); color: #c9ced6; font-variant-numeric: tabular-nums; }
.pb-board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 120px); overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 14px 16px 16px; border-radius: var(--r-lg); background: rgba(20, 23, 28, .94); box-shadow: 0 20px 60px rgba(0,0,0,.35); pointer-events: auto; }
.pb-board header { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: var(--t-lg); }
.pb-board h3 { margin: 0 0 6px; color: var(--pb, #fff); font-size: var(--t-lg); }
.pb-board table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.pb-board th { text-align: left; color: #9aa3ad; font-weight: 600; font-size: var(--t-xs); padding: 2px 6px; }
.pb-board th + th, .pb-board td + td { text-align: right; }
.pb-board td { padding: 5px 6px; border-top: 1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.pb-board td i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
.pb-board tr.me td { background: rgba(255,255,255,.09); font-weight: 800; }
.pb-pause { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 12, 16, .38); }
.pb-card { width: min(420px, calc(100vw - 24px)); padding: 20px 22px; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); display: grid; gap: 12px; }
.pb-card h2 { margin: -6px 0 0; font-size: 26px; }
.pb-kicker { margin: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pb-card .pb-go { min-height: 48px; font-size: var(--t-lg); }
.pb-sens { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: var(--t-md); font-weight: 600; }
.pb-keys { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: var(--t-sm); color: var(--muted); }
.pb-keys kbd { display: inline-block; }
.pb-card .pb-leave { justify-self: start; }
.pw-card.pb-round small { color: #9fe8ff; }
.pb-touch { display: none; }
@media (pointer: coarse) {
  body.pb-on .pb-touch { display: block; }
  body.pb-on .jump { right: calc(var(--jump-right) + 8px); bottom: calc(var(--jump-bottom) + 112px); width: 64px; height: 64px; font-size: var(--t-md); }
  .pb-fire { position: absolute; right: var(--jump-right); bottom: var(--jump-bottom); width: 96px; height: 96px; border-radius: 50%; border: 3px solid #fff; background: rgba(240, 53, 155, .88); color: #fff; font: inherit; font-weight: 900; font-size: var(--t-lg); letter-spacing: .04em; box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; }
  .pb-fire.down { transform: scale(.93); background: rgba(240, 53, 155, 1); }
  .pb-btn { position: absolute; min-width: 56px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: rgba(20, 23, 28, .78); color: #fff; font: inherit; font-weight: 700; font-size: var(--t-md); touch-action: manipulation; }
  .pb-reload { right: calc(var(--jump-right) + 108px); bottom: calc(var(--jump-bottom) + 6px); width: 72px; height: 56px; }
  .pb-zoom { right: calc(var(--jump-right) + 108px); bottom: calc(var(--jump-bottom) + 70px); width: 72px; }
  .pb-zoom[aria-pressed="true"] { background: #ffd23a; color: #1d2126; }
  .pb-scores { left: var(--left); top: calc(var(--rail-top) + 54px); }
  .pb-quit { left: calc(var(--left) + 92px); top: calc(var(--rail-top) + 54px); }
  .pb-me { bottom: calc(var(--bottom) + 2px); }
  .pb-me .pb-you { display: none; }
  .pb-ammo { right: auto; left: var(--joy-left); bottom: calc(var(--joy-bottom) + var(--joy) + 12px); justify-content: start; text-align: left; }
  .pb-ammo strong { font-size: 28px; }
  .pb-ammo .pb-hopper { width: 80px; justify-self: start; }
  .pb-ammo small { display: none; }
  .pb-pause { display: none !important; }
  .pb-top { font-size: var(--t-sm); gap: 10px; padding: 6px 14px; }
}
@media (pointer: coarse) and (max-width: 640px) {
  .pb-top span { display: none; }
  .pb-feed { top: calc(var(--rail-top) + 104px); font-size: var(--t-xs); }
}
@media (prefers-reduced-motion: reduce) { .pb-paint i { animation: pb-dir 1.2s ease-out forwards; opacity: .8; } .pb-mark.on, .pb-flash.on { animation-duration: .01ms; } }
/* CASINO: the Printer Casino (games/casino.js). The chips line in the rail, the table dock, the sheets, the tags over
   the tables, the result pops, and the green water wash when you walk through the falls. */
.casino-hud { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px 0 0; border: 0; border-radius: var(--r-pill); background: rgba(13, 38, 26, .92); color: #f3ece0; box-shadow: var(--shadow), inset 0 0 0 1px rgba(61, 255, 138, .35); font: inherit; }
.casino-hud-main { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px 0 8px; border: 0; border-radius: var(--r-pill); background: none; color: inherit; font: inherit; cursor: pointer; }
.casino-hud-buy { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: linear-gradient(180deg, #f6d36b, #d9a93a); color: #1a1508; font: inherit; font-weight: 800; font-size: var(--t-sm); cursor: pointer; box-shadow: 0 2px 0 #8a6a1f; }
.casino-hud-music { height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); color: #f3ece0; font: inherit; font-weight: 700; font-size: var(--t-sm); cursor: pointer; white-space: nowrap; }
.casino-hud-music:hover { background: rgba(255, 255, 255, .18); }
.casino-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.casino-genre { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 14px; background: var(--card, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.casino-genre strong { font-size: var(--t-md); } .casino-genre small { font-size: var(--t-xs); opacity: .72; }
.casino-genre.on { border-color: #d9a93a; box-shadow: inset 0 0 0 2px #d9a93a; background: linear-gradient(180deg, rgba(246, 211, 107, .18), rgba(217, 169, 58, .08)); }
.casino-duel-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.casino-duel-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; }
.casino-duel-list li span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casino-hud-buy:hover { filter: brightness(1.08); } .casino-hud-buy:active { transform: translateY(1px); box-shadow: 0 1px 0 #8a6a1f; }
.casino-hud strong { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.casino-hud small { font-size: var(--t-xs); color: #9fd3b3; }
.casino-hud.up { animation: casino-bump .5s ease-out; }
.casino-coin { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f0cd6a 0 34%, #d9a93a 35% 52%, #f3ece0 53% 60%, #d9a93a 61%); box-shadow: inset 0 0 0 2px #a97d22; flex: none; }
@keyframes casino-bump { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.casino-dock { left: 50%; bottom: var(--bottom); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 12px 14px 10px; border-radius: var(--r-lg);
  background: rgba(16, 20, 28, .94); color: #f3ece0; box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(217, 169, 58, .45); z-index: 3; }
.casino-dock { opacity: 0; translate: 0 14px; transition: opacity .22s ease-out, translate .22s ease-out; }
.casino-dock.on { opacity: 1; translate: 0 0; }
.casino-dock .fresh { animation: casino-in .24s ease-out; }
@keyframes casino-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.casino-badge { border: 0; min-height: 32px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: rgba(61, 255, 138, .12); color: #c8f5d9; font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; box-shadow: inset 0 0 0 1px rgba(61, 255, 138, .35); }
.casino-badge:hover { background: rgba(61, 255, 138, .2); }
.casino-badge i { font-style: normal; font-weight: 900; color: #3dff8a; }
.casino-badge.bad { background: rgba(255, 120, 100, .14); box-shadow: inset 0 0 0 1px rgba(255, 155, 143, .5); color: #ffd6cf; }
.casino-badge.bad .casino-shield { background: #ff9b8f; }
.casino-badge.bad i { color: #ff9b8f; }
.casino-badge.pop { animation: casino-bump .5s ease-out; }
.casino-answer { font-weight: 800; font-size: var(--t-md); }
.casino-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.casino-head strong { font-size: var(--t-lg); letter-spacing: .01em; color: #f0cd6a; }
button.casino-player { border: 0; font: inherit; font-size: var(--t-sm); cursor: pointer; color: inherit; }
button.casino-player:hover { background: rgba(255, 255, 255, .16); }
.casino-sheet .casino-status { color: var(--ink); font-weight: 600; }   /* the status line on a paper sheet (the dock's is light on dark) */
.casino-duel-hand { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; }
.casino-duel .casino-card { box-shadow: 0 2px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px #d8cfba; }
.casino-duel-dice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.casino-duel-dice > div { display: grid; gap: 4px; padding: 10px; border-radius: var(--r-md); background: var(--paper-2); }
.casino-dice-faces { font-size: 56px; line-height: 1; letter-spacing: 4px; }
.casino-dice-faces.rolling { animation: casino-shake .14s linear infinite; }
@keyframes casino-shake { 0% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } }
.pc-casino { display: flex; justify-content: center; margin-top: 6px; }
.casino-players { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 0; padding-bottom: 1px; }
.casino-players::-webkit-scrollbar { display: none; }
.casino-player { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); font-size: var(--t-sm); white-space: nowrap; }
.casino-player b { font-weight: 700; color: #f3ece0; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.casino-player span { color: #f0cd6a; font-variant-numeric: tabular-nums; font-weight: 700; }
.casino-player.you { background: rgba(61, 255, 138, .14); box-shadow: inset 0 0 0 1px rgba(61, 255, 138, .4); }
.casino-player.bot b { color: #b9c3ff; }
.tag.casino-plate { font-size: var(--t-xs); font-weight: 700; padding: 3px 9px; background: rgba(16, 20, 28, .82); color: #f0cd6a; box-shadow: inset 0 0 0 1px rgba(217, 169, 58, .45); white-space: nowrap; }
.tag.casino-plate.bot { color: #b9c3ff; box-shadow: inset 0 0 0 1px rgba(185, 195, 255, .4); }
.casino-hand { display: inline-flex; gap: 4px; align-items: center; border-radius: 9px; padding: 2px; }
.casino-hands { display: inline-flex; gap: 8px; }
.casino-hand.on { box-shadow: 0 0 0 2px #3dff8a; }
.casino-total { min-width: 26px; height: 24px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: #f0cd6a; color: #1d2126; font-size: var(--t-sm); font-weight: 900; font-variant-numeric: tabular-nums; }
.casino-total.bust { background: #ff9b8f; }
.casino-card { display: inline-grid; place-items: center; min-width: 30px; height: 38px; padding: 0 5px; border-radius: 6px; background: #fffbf2; color: #1d2126; font: 800 15px/1 ui-monospace, Consolas, monospace; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.casino-card.red { color: #c8302c; }
.casino-card.back { background: repeating-linear-gradient(45deg, #2f4bff 0 4px, #4f68ff 4px 8px); }
.casino-hand.folded .casino-card { opacity: .45; }
.casino-stack { font-size: var(--t-sm); color: #c9c2b0; font-variant-numeric: tabular-nums; margin-right: auto; }
.casino-link, .casino-leave { border: 0; background: rgba(255, 255, 255, .08); color: #f3ece0; font: inherit; font-size: var(--t-sm); font-weight: 600; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.casino-link:hover, .casino-leave:hover { background: rgba(255, 255, 255, .16); }
.casino-dock kbd { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); color: #f3ece0; }
.casino-status { margin: 0; font-size: var(--t-md); line-height: 1.4; color: #f3ece0; min-height: 1.4em; }
.casino-timer.off { visibility: hidden; }
.casino-rows { display: grid; gap: 8px; align-content: start; }
.casino-rows.poker { min-height: 92px; }   /* the raise row comes and goes on your turn; the dock keeps its height */
.casino-timer { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.casino-timer::before { content: ""; display: block; height: 100%; width: calc(var(--k, 1) * 100%); background: linear-gradient(90deg, #3dff8a, #f0cd6a); border-radius: inherit; transition: width .25s linear; }
.casino-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.casino-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-weight: 700; font-size: var(--t-md); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.casino-btn.primary { background: #18a85a; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.casino-btn:hover:not(:disabled) { filter: brightness(1.12); }
.casino-btn:disabled, .casino-chip-btn:disabled, .casino-bet:disabled { opacity: .4; cursor: default; }
.casino-chip-btn { min-height: 40px; min-width: 52px; padding: 0 12px; border: 2px dashed rgba(240, 205, 106, .7); border-radius: var(--r-pill); background: rgba(217, 169, 58, .14); color: #f0cd6a; font: inherit; font-weight: 800; font-size: var(--t-md); cursor: pointer; }
.casino-chip-btn.on { background: #d9a93a; color: #1d2126; border-style: solid; }
.casino-row.bets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.casino-bet { display: grid; gap: 1px; justify-items: center; padding: 8px 4px; min-height: 60px; border: 1px solid rgba(243, 236, 224, .5); border-radius: var(--r-md); background: #1d36a8; color: #fff; font: inherit; cursor: pointer; }
.casino-bet strong { font-size: var(--t-md); }
.casino-bet small { font-size: var(--t-xs); color: #f0cd6a; }
.casino-bet em { font-style: normal; font-size: var(--t-sm); font-weight: 800; color: #3dff8a; min-height: 1.2em; }
.casino-bet.on { box-shadow: inset 0 0 0 2px #3dff8a; }
.casino-range { flex: 1 1 160px; accent-color: #18a85a; min-height: 32px; }
.casino-fair { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: #9fd3b3; overflow-wrap: anywhere; }
.casino-shield { width: 12px; height: 14px; flex: none; background: #3dff8a; clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
.casino-demo { margin: 0; font-size: var(--t-xs); color: #c9c2b0; text-align: center; }
body.casino-seated .emotes, body.casino-seated .touch, body.casino-seated .help, body.casino-seated #door-prompt { display: none; }
body.casino-seated .tag.you { visibility: hidden; }   /* your own name tag would sit on the dock's edge */
.casino-sheet { display: grid; gap: 10px; padding: 18px 20px 22px; }
.casino-sheet h2 { margin: 0 32px 0 0; font-size: var(--t-xl); }
.casino-sheet h3 { margin: 8px 0 0; font-size: var(--t-lg); }
.casino-sheet p { margin: 0; line-height: 1.5; }
.casino-sheet .casino-big { font-size: 28px; font-weight: 800; color: #17804a; font-variant-numeric: tabular-nums; }
.casino-warn { padding: 8px 10px; border-radius: var(--r-sm); background: #fff3d6; color: #6a4a00; font-weight: 600; font-size: var(--t-md); }
.casino-board, .casino-history { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: var(--t-md); }
.casino-board li span { display: inline-block; min-width: 60%; }
.casino-board b { font-variant-numeric: tabular-nums; }
.casino-board b.up { color: #17804a; }
.casino-board b.down { color: #b3261e; }
.casino-board.jackpot li:first-child { font-weight: 800; font-size: var(--t-lg); }
.casino-rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--t-md); line-height: 1.45; }
.casino-details summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.casino-round { display: flex; align-items: center; gap: 8px; }
.casino-round span:first-child { font-weight: 700; white-space: nowrap; }
.casino-round span:nth-child(2) { flex: 1; color: var(--muted); font-size: var(--t-sm); }
.casino-check { margin: 6px 0 4px; padding: 10px; border-radius: var(--r-sm); background: var(--paper-2); font-size: var(--t-sm); }
.casino-check dl { margin: 6px 0 0; display: grid; gap: 2px; }
.casino-check dt { font-weight: 700; color: var(--muted); }
.casino-check dd { margin: 0 0 4px; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.casino-ok { color: #17804a; font-weight: 800; }
.casino-bad { color: #b3261e; font-weight: 800; }
.casino-input { flex: 1 1 180px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font: 600 14px ui-monospace, monospace; background: var(--paper); color: var(--ink); }
.casino-verify .casino-fair { color: #17804a; font-size: var(--t-sm); }
.casino-sheet .casino-btn { background: var(--paper-2); color: var(--ink); }
.casino-sheet .casino-btn.primary { background: #17804a; color: #fff; }
.casino-sheet .casino-chip-btn { color: #6a4a00; border-color: #d9a93a; }
.tag.casino-tag { background: rgba(16, 20, 28, .86); color: #f0cd6a; font-size: var(--t-sm); box-shadow: inset 0 0 0 1px rgba(217, 169, 58, .5); }
.tag.casino-pop { font-size: var(--t-lg); font-weight: 800; padding: 5px 12px; background: rgba(16, 20, 28, .9); color: #fff; animation: casino-pop 2.4s ease-out forwards; }
.tag.casino-pop.win { color: #3dff8a; }
.tag.casino-pop.lose { color: #ff9b8f; }
@keyframes casino-pop { 0% { opacity: 0; margin-top: 10px; } 12% { opacity: 1; margin-top: 0; } 75% { opacity: 1; margin-top: -18px; } 100% { opacity: 0; margin-top: -26px; } }
#fade.casino-water { background: radial-gradient(ellipse at 50% 40%, rgba(214, 255, 228, .96), rgba(24, 168, 90, .94) 55%, rgba(6, 60, 32, .98)); transition-duration: .3s; }
@media (max-width: 640px) {
  .casino-dock { left: calc(var(--safe-l) + 8px); right: calc(var(--safe-r) + 8px); width: auto; transform: none; bottom: calc(var(--safe-b) + 8px); padding: 10px; }
  .casino-head { gap: 6px; }
  .casino-link { padding: 0 8px; }
  .casino-bet { min-height: 54px; }
  body.casino-seated .minimap { visibility: hidden; }
  .casino-rows.poker .casino-range { flex-basis: 100%; }   /* the raise slider on its own line, the four amounts under it */   /* the dock needs the corner the minimap sits in */
}
@media (prefers-reduced-motion: reduce) {
  .tag.casino-pop, .casino-hud.up, .casino-badge.pop, .casino-dock .fresh, .casino-dice-faces.rolling { animation: none; }
  .casino-dock { transition: none; translate: none; }
  .casino-timer::before { transition: none; }
}
/* CASINO end */
/* arcade-push: the Push button in Paper Jam and Shredder (games/arcade-push.js). A ring fills while it recharges;
   desktop: above the emote bar, with its F key; touch: the round action slot above Jump. */
.arcade-push { --cd: 1; left: 50%; bottom: calc(var(--bottom) + 62px); transform: translateX(-50%); width: 76px; height: 76px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; background: #ff4fa3; color: #fff; font: inherit; box-shadow: var(--shadow), inset 0 -4px 0 rgba(0, 0, 0, .18); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background .15s, filter .15s; }
.arcade-push[hidden] { display: none; }
.arcade-push-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.arcade-push-ring circle { fill: none; stroke-width: 4; }
.arcade-push-ring .track { stroke: rgba(22, 15, 41, .35); }
.arcade-push-ring .fill { stroke: #ffc94a; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--cd) * 100); }
.arcade-push-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.arcade-push-label { font-size: 13px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; text-transform: uppercase; }
.arcade-push kbd { position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--paper); color: var(--ink); font: 800 12px/1 Geist, system-ui; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.arcade-push.cool { background: #5b4a73; color: #d9d2e6; }
.arcade-push.dizzy { background: #3a3346; color: #a69fb3; }
.arcade-push.ready { animation: arcade-push-ready .32s cubic-bezier(.2, 1.7, .4, 1); }
.arcade-push.nope { animation: arcade-push-nope .24s ease-in-out; }
.arcade-push:active:not(.cool) { filter: brightness(1.15); }
@keyframes arcade-push-ready { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.14); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes arcade-push-nope { 0%, 100% { margin-left: 0; } 25% { margin-left: -5px; } 75% { margin-left: 5px; } }
@media (pointer: coarse) {
  .arcade-push { left: auto; right: var(--act-right); bottom: var(--act-1); transform: none; width: var(--act); height: var(--act); }
  .arcade-push kbd { display: none; }
  .arcade-push-ic { width: 20px; height: 20px; }
  .arcade-push-label { font-size: 12px; }
  @keyframes arcade-push-ready { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .arcade-push.ready, .arcade-push.nope { animation: none; } }
/* arcade-push: the round's variation under the countdown and GO (games/arcade.js) */
.arcade-mode { top: calc(38% + 86px); left: 50%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; text-align: center; width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 10px 18px 11px; border-radius: 16px; background: rgba(22, 15, 41, .88); color: #fff; box-shadow: var(--shadow), inset 0 0 0 2px #7dff6a; pointer-events: none; }
.arcade-mode[hidden] { display: none; }
.arcade-mode strong { font-size: 22px; font-weight: 900; letter-spacing: .02em; color: #7dff6a; }
.arcade-mode span { font-size: 14px; font-weight: 600; color: #e9e4f2; line-height: 1.35; }
.arcade-mode.gold { box-shadow: var(--shadow), inset 0 0 0 2px #ffc94a; }
.arcade-mode.gold strong { color: #ffc94a; }
@media (max-width: 640px) { .arcade-mode { top: calc(47% + 64px); } .arcade-mode strong { font-size: 18px; } .arcade-mode span { font-size: 12.5px; } }

/* COIN LADDER: a mascot coin's tab in the picker (ui/coin-ladder.js): the ladder card in a gold tint, the looks
   grouped under a heading per coin amount. */
.pk-coin { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(#fffaf0, #fbf1d8); box-shadow: inset 0 0 0 1px #efdcaa; }
.pk-coin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pk-coin-head strong { font-size: 14px; }
.pk-coin-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 10px 0 0; padding: 0; }
.pk-coin-steps li { display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 6px 3px 5px; border-radius: 10px; background: rgba(255, 255, 255, .6); color: var(--pw-muted); text-align: center; }
.pk-coin-steps li i { display: grid; }
.pk-coin-steps li .ic { width: 12px; height: 12px; }
.pk-coin-steps li b { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pk-coin-steps li small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 650; }
.pk-coin-steps li.done { background: #fff; color: #7a5a10; }
.pk-coin-steps li.done i { color: #b8860b; }
.pk-coin-steps li.open { background: #fff; }
.pk-coin-steps li.open i { color: var(--cobalt); }
.pk-coin-steps li.next { background: #fff; box-shadow: inset 0 0 0 2px var(--gold); color: var(--ink); }
.pk-coin-bar { margin: 10px 0 0; background: rgba(255, 255, 255, .9); }
.pk-coin-next { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; }
.pk-coin-next p { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; }
.pk-coin-faces { flex: none; display: flex; gap: 4px; }
.pk-coin-face { display: block; width: 40px; height: 50px; border-radius: 8px; overflow: hidden; background: linear-gradient(#f3ede0, #e6dcc8); box-shadow: inset 0 0 0 1px #e3d3a6; }
.pk-coin-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-coin-tier { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--pw-muted); }
#picker .grid .pk-rung { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 8px 0 -2px; font-size: 13px; font-weight: 700; line-height: 1.35; }
#picker .grid .pk-rung:first-child { margin-top: 2px; }
.pk-rung .ic { flex: none; width: 15px; height: 15px; color: var(--pw-muted); }
.pk-rung.yours .ic { color: var(--cobalt); }
.pk-rung > span { min-width: 0; text-wrap: balance; }
.pk-rung small { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); font-size: 11.5px; font-weight: 700; color: var(--pw-muted); }
.pk-rung.next small { background: #fbf0d3; color: #7a5a10; }
#picker .pk-coin:not([hidden]) ~ .style-bar button.locked[aria-pressed="true"], #picker .pk-coin:not([hidden]) ~ .style-bar button.locked[aria-pressed="true"] small { color: #fff; }
@media (max-width: 640px) {
  .pk-coin { margin-top: 10px; padding: 10px 12px; }
  .pk-coin-steps { gap: 3px; }
  .pk-coin-steps li { padding: 5px 2px 4px; }
  .pk-coin-steps li b { font-size: 12px; }
  .pk-coin-steps li small { display: none; }
  .pk-coin-next { align-items: flex-start; }
  .pk-coin-face { width: 32px; height: 40px; }
}
/* COIN LADDER end */
/* TRIAL: the free trial for non-holders (ui/trial.js). The chip leads the rail during the trial; after it the scene
   turns grey, the HUD dims (still usable) and a card says how to keep playing. Holders never get any of it. */
.rail > .trial-chip { order: -1; }
.trial-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 12px 4px 10px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-sm); cursor: pointer; white-space: nowrap; }
.trial-chip strong { font-weight: 800; color: var(--cobalt-ink); }
.trial-chip .tc-left { font-weight: 700; font-variant-numeric: tabular-nums; }
.trial-chip .tc-line { color: var(--muted); padding-left: 7px; border-left: 1px solid var(--line); }
.trial-chip .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #fbf0d3; flex: none; }
.trial-chip.paused .tc-dot { background: var(--muted); box-shadow: 0 0 0 3px var(--paper-2); }
.trial-chip.over strong { color: var(--muted); }
.trial-chip.over .tc-dot { background: #8b8f96; box-shadow: 0 0 0 3px var(--paper-2); }
.trial-chip:hover { background: #fff; }
.trial-card { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -58%); width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - var(--rail-top) - 24px); overflow: auto; background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); padding: 20px 22px 18px; animation: trial-in .45s ease-out; }
.trial-card h2 { margin: 6px 36px 10px 0; font-size: var(--t-xl); line-height: 1.2; }
.trial-card p { margin: 0 0 10px; font-size: var(--t-lg); line-height: 1.45; }
.trial-card p.muted { font-size: var(--t-md); color: var(--muted); }
.trial-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.trial-card .tc-close { position: absolute; top: 12px; right: 12px; }
@keyframes trial-in { from { opacity: 0; transform: translate(-50%, -52%); } }
/* OPEN GAMES (owner, October 24): the world no longer turns grey when a guest's trial ends; every game stays open */
#scene, #labels { transition: filter 1.4s ease; }
.trial-tag { display: inline-block; margin: 0 0 10px !important; padding: 4px 10px; border-radius: var(--r-pill); background: #fbf0d3; color: #7a5810; font-size: var(--t-sm) !important; font-weight: 700; }
.trial-sheet .trial-list { margin: 12px 0 4px; padding-left: 18px; font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.trial-sheet .trial-list li { margin-bottom: 6px; }
.pf-trial .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.checkout .total.trial-total { gap: 12px; }
.checkout .total.trial-total strong { font-size: 20px; text-align: right; }
.pf-trial-line strong { color: var(--cobalt-ink); }
@media (max-width: 640px) {
  .trial-chip .tc-line { display: none; }
  .trial-card { top: calc(var(--rail-top) + 54px); transform: translateX(-50%); max-height: calc(100dvh - var(--rail-top) - 54px - var(--joy-bottom) - var(--joy) - 12px); padding: 16px 16px 14px; }
  .trial-card h2 { font-size: 19px; }
  .trial-card p { font-size: var(--t-md); }
  @keyframes trial-in { from { opacity: 0; } }
}
@media (pointer: coarse) { .trial-chip { min-height: 44px; } .trial-card .tc-close { width: 44px; height: 44px; top: 8px; right: 8px; } .trial-card .btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .trial-card { animation: none; } #scene, #labels { transition: none; } }
/* ---- ADMIN: the visit counter (ui/owner.js), the Owner panel and the Team tools (ui/owner-panel.js) ---- */
/* The counter sits beside the brand block (never inside it): a 44 px pill on wide screens; a small ink badge hanging
   under the brand on phones and narrow windows, where the row has no room left. Digits roll up on their columns. */
.visits { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; margin-right: auto; height: var(--hud-h); }
.visits:not(.door), .visits-btn { display: flex; align-items: center; gap: 8px; height: var(--hud-h); padding: 0 16px 0 14px; border: 0; background: var(--paper); color: var(--ink); border-radius: var(--r-pill); box-shadow: var(--shadow); font: 600 var(--t-md)/1 Geist, "Segoe UI", system-ui, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; }
.visits-btn { cursor: pointer; padding-right: 6px; }
.visits-btn:hover { background: #fff; }
.visits-live { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #1f9d55; }
.visits-live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #1f9d55; opacity: 0; animation: visits-ping 2.8s ease-out infinite; }
@keyframes visits-ping { 0% { transform: scale(.4); opacity: .55; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.visits-od { display: inline-flex; height: 1.2em; line-height: 1.2em; font-size: var(--t-lg); font-weight: 750; letter-spacing: .01em; }
.od-d { display: inline-block; height: 1.2em; overflow: hidden; }
.od-col { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1.2em)); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.od-col > span { display: block; height: 1.2em; text-align: center; }
.od-col.snap { transition: none; }
.od-sep { display: inline-block; }
.visits-word { color: var(--muted); font-weight: 500; }
.visits-key { margin-left: 4px; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 700; }
.visits[data-role="team"] .visits-key { background: var(--cobalt-ink); }
@media (max-width: 820px), (pointer: coarse) {
  .visits { position: absolute; left: calc(var(--hud-h) / 2); top: calc(var(--hud-h) - 8px); height: auto; margin: 0; transform: translateX(-50%); z-index: 1; pointer-events: none; }
  .visits:not(.door), .visits-btn { height: 17px; padding: 0 7px; gap: 0; background: var(--ink); color: #fff; box-shadow: 0 2px 6px rgba(20, 16, 6, .28); font-size: 10.5px; overflow: visible; }
  .visits-od { font-size: 10.5px; font-weight: 700; }
  .visits-live, .visits-word, .visits-key { display: none; }
  .visits-btn { position: relative; pointer-events: auto; }
  .visits-btn::after { content: ''; position: absolute; left: -6px; right: -6px; top: 2px; bottom: -22px; }   /* a bigger tap area below the badge, never over the brand */
  .visits.door .visits-btn { background: var(--cobalt-ink); }
}
@media (prefers-reduced-motion: reduce) { .od-col { transition: none; } .visits-live::after { animation: none; } }

/* Moderator touches elsewhere: Hide on a chat line, the Team tools on a player card, the profile row */
.chat-list .acts button.hide { color: #b3261e; }
.pc-team { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: #eef1ff; box-shadow: inset 0 0 0 1px #d5dcff; }
.pc-team .pf-label { display: block; margin: 0 0 8px; }
.pc-team .actions { flex-wrap: wrap; gap: 8px; margin: 0; }
.pc-team .note { margin: 8px 0 0; padding: 0; background: none; }
.pc-select { height: 36px; padding: 0 30px 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d2126' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center no-repeat; font: inherit; font-size: var(--t-md); font-weight: 600; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.owner-row .btn { flex: none; }
@media (pointer: coarse) { .pc-select { height: 44px; } }

/* The Owner panel: a dark control room over the town (a modal dialog; Escape or the edge closes it) */
.ctl { --c-bg: #0d1016; --c-panel: #151a22; --c-panel-2: #1c222c; --c-line: #262e3b; --c-text: #eef1f6; --c-muted: #a1aab9; --c-dim: #808a9b;
  --c-cobalt: #7086ff; --c-gold: #e9bb4d; --c-green: #42d48b; --c-red: #ff7070; --c-amber: #ffb84d;
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--c-text); overflow: hidden;
  font-family: Geist, "Segoe UI", system-ui, -apple-system, sans-serif; font-size: var(--t-md); }
.ctl[open] { display: grid; place-items: center; }
.ctl::backdrop { background: rgba(8, 10, 14, .5); backdrop-filter: blur(2px); }
.ctl-shell { width: min(1240px, calc(100vw - 48px)); height: min(880px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--c-bg); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 0 0 1px #222a36; animation: ctl-up .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes ctl-up { from { transform: translateY(12px) scale(.985); opacity: 0; } }
.ctl button, .ctl input, .ctl select { font: inherit; color: inherit; }
.ctl :focus-visible { outline: 2px solid var(--c-cobalt); outline-offset: 2px; }
.ctl-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px 10px; }
.ctl-title { display: flex; align-items: center; gap: 12px; }
.ctl-mark { width: 36px; height: 36px; flex: none; border-radius: 10px; background: url('./assets/printer-mark.png') center / 26px no-repeat, #232a36; image-rendering: pixelated; box-shadow: inset 0 0 0 1px #2e3746; }
.ctl-eyebrow { margin: 0; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold); }
.ctl-head h2 { margin: 2px 0 0; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.01em; }
.ctl-head h2:focus { outline: none; }
.ctl-sync { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: var(--t-sm); white-space: nowrap; }
.ctl-sync::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 4px rgba(66, 212, 139, .16); }
.ctl-sync.stale::before { background: var(--c-amber); box-shadow: 0 0 0 4px rgba(255, 184, 77, .16); }
.ctl-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--c-panel-2); font-size: 24px; line-height: 1; cursor: pointer; }
.ctl-close:hover { background: #2a3240; }
/* OWNER TABS (owner, October 25: "owner panel orientation needs to be better because chests is hidden"): the sections in a
   sidebar of four labeled groups, every one in view; a phone gets a Section menu instead (below) */
.ctl-main { min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); border-top: 1px solid var(--c-line); }
.ctl-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 16px; border-right: 1px solid var(--c-line); scrollbar-width: thin; }
.ctl-pick { display: none; }
.ctl-tabs { display: flex; flex-direction: column; gap: 1px; }
.ctl-tab-group { margin: 12px 10px 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
.ctl-tabs [role="tab"] { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 7px; width: 100%; min-height: 34px; padding: 0 10px 0 14px; border: 0; border-radius: 10px; background: none; color: var(--c-muted); font-weight: 600; text-align: left; cursor: pointer; }
.ctl-tabs [role="tab"]:hover { color: var(--c-text); background: rgba(255, 255, 255, .04); }
.ctl-tabs [role="tab"]:focus-visible { outline-offset: -2px; }
.ctl-tabs [aria-selected="true"] { color: var(--c-text); background: var(--c-panel-2); }
.ctl-tabs [aria-selected="true"]::after { content: ''; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--c-cobalt); }
.ctl-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--c-panel-2); color: var(--c-muted); font-size: var(--t-xs); font-weight: 800; }
.ctl-count.hot { background: var(--c-red); color: #1a0606; }
.ctl-body { min-height: 0; min-width: 0; position: relative; }
.ctl-pane { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 22px 20px; }
.ctl-pane[data-pane="overview"], .ctl-pane[data-pane="mods"], .ctl-pane[data-pane="errors"] { overflow: auto; }
.ctl-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ctl-pane[data-pane="mods"] .ctl-scroll { overflow: visible; }
.ctl-empty, .ctl-none { margin: 0; padding: 18px 4px; color: var(--c-muted); list-style: none; }
.ctl-dim { margin: 0; color: var(--c-dim); font-size: var(--t-sm); }
.ctl-lede { margin: 0 0 6px; color: var(--c-muted); line-height: 1.5; max-width: 72ch; }
.ctl-h { margin: 14px 0 6px; font-size: var(--t-lg); }

/* Overview: the numbers, then a wall of cards */
.ctl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctl-kpi { display: grid; gap: 4px; padding: 14px 16px 15px; border-radius: 14px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.ctl-kpi-label { color: var(--c-muted); font-size: var(--t-sm); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ctl-kpi strong { font-size: 34px; line-height: 1.05; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ctl-kpi small { color: var(--c-dim); font-size: var(--t-sm); }
.ctl-kpi.live .ctl-kpi-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 3px rgba(66, 212, 139, .18); }
.ctl-kpi.gold strong { color: var(--c-gold); }
.ctl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ctl-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-radius: 14px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.ctl-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctl-card h3 { margin: 0; font-size: var(--t-md); font-weight: 700; color: var(--c-text); }
.ctl-link { border: 0; background: none; padding: 4px 0; color: var(--c-cobalt); font-size: var(--t-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ctl-link:hover { text-decoration: underline; }
.ctl-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctl-bars li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 3ch; align-items: center; gap: 10px; }
.ctl-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); }
.ctl-bars i { height: 8px; border-radius: 4px; background: var(--c-panel-2); overflow: hidden; }
.ctl-bars b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5468ff, var(--c-cobalt)); transition: width .5s ease; }
.ctl-bars strong { text-align: right; font-variant-numeric: tabular-nums; }
.ctl-chart { width: 100%; height: auto; display: block; }
.ctl-chart rect.v { fill: #3a4ab8; }
.ctl-chart rect.v.today { fill: var(--c-gold); }
.ctl-chart rect.v.none { fill: #222a36; }
.ctl-chart rect.u { fill: var(--c-cobalt); opacity: .9; pointer-events: none; }
.ctl-chart text { fill: var(--c-dim); font-size: 9px; text-anchor: middle; }
.ctl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; color: var(--c-dim); font-size: var(--t-xs); }
.ctl-legend .k::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: #3a4ab8; }
.ctl-legend .k.u::before { background: var(--c-cobalt); } .ctl-legend .k.today::before { background: var(--c-gold); }
.ctl-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ctl-mini li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.4; }
.ctl-mini time { color: var(--c-dim); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctl-mini span { overflow-wrap: anywhere; }

/* Category colors (never the only cue: every row also names its kind) */
.c-all { --cat: var(--c-text); } .c-people { --cat: #7086ff; } .c-reports { --cat: #ff9f43; } .c-moderation { --cat: #ff7070; } .c-orders { --cat: #e9bb4d; }
.c-progress { --cat: #b49cff; } .c-games { --cat: #42d48b; } .c-castle { --cat: #6fd0ff; } .c-launches { --cat: #ff7ac6; } .c-errors { --cat: #ff5252; }
.ctl-chips, .ctl-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ctl-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-panel); color: var(--c-text); font-size: var(--t-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ctl-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.ctl-chip b { color: var(--c-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctl-chip:hover { border-color: #3a4558; }
.ctl-chip[aria-pressed="true"] { background: #222b45; border-color: var(--c-cobalt); }
.ctl-chip[aria-pressed="true"] b { color: var(--c-text); }

/* Activity */
.ctl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ctl-search { flex: 1 1 220px; max-width: 360px; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23a1aab9' stroke-width='1.8'%3E%3Ccircle cx='6' cy='6' r='4.6'/%3E%3Cpath d='M9.5 9.5L13 13'/%3E%3C/svg%3E") 12px center no-repeat; }
.ctl-search::placeholder { color: var(--c-dim); }
.ctl-search:focus { border-color: var(--c-cobalt); outline: none; }
.ctl-fresh { align-self: center; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--c-cobalt); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(112, 134, 255, .35); }
.ctl-feed { list-style: none; margin: 0; padding: 0; }
.ctl-feed li { display: grid; grid-template-columns: 72px 116px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 6px; border-bottom: 1px solid #1b212b; line-height: 1.45; }
.ctl-feed li:hover { background: #121720; }
.ctl-feed li.new { animation: ctl-new 1.6s ease-out; }
@keyframes ctl-new { from { background: rgba(112, 134, 255, .16); } }
.ctl-feed time { color: var(--c-dim); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ctl-cat { display: inline-flex; align-items: center; gap: 7px; color: var(--c-muted); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-cat::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cat); }
.ctl-say { overflow-wrap: anywhere; }
.ctl-say strong, .ctl-mini strong { color: #fff; font-weight: 650; }
.ctl-feed .ctl-none { display: block; border: 0; }
.ctl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--c-dim); font-size: var(--t-sm); }

/* Players, reports, moderators */
.ctl-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 13px; border: 1px solid transparent; border-radius: 10px; background: var(--c-cobalt); color: #0c0f1a; font-weight: 700; font-size: var(--t-sm); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.ctl-btn:hover { filter: brightness(1.08); }
.ctl-btn.ghost { background: transparent; border-color: var(--c-line); color: var(--c-text); }
.ctl-btn.ghost:hover { background: var(--c-panel-2); }
.ctl-btn.small { height: 30px; padding: 0 10px; }
.ctl-btn.armed { background: var(--c-amber); border-color: var(--c-amber); color: #241500; }
.ctl-btn:disabled { opacity: .5; cursor: default; }
.ctl-select { height: 34px; padding: 0 28px 0 12px; border: 1px solid var(--c-line); border-radius: 10px; appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23eef1f6' stroke-width='1.6'/%3E%3C/svg%3E") right 11px center no-repeat; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.ctl-select option { background: #151a22; color: #eef1f6; }
.ctl-events { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.ctl-ref-details { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--c-line); }
.ctl-ref-details summary { display: list-item; min-height: 44px; align-content: center; cursor: pointer; font-weight: 600; }
.ctl-ref-details h4 { margin: 0 0 6px; font-size: var(--t-md); }
.ctl-ref-friends { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.ctl-ref-friends li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--c-line); }
.ctl-ref-friends li > strong { min-width: 0; overflow-wrap: anywhere; }
.ctl-ref-friends li > div { display: grid; gap: 2px; min-width: 0; color: var(--c-muted); }
.ctl-who { display: grid; gap: 2px; min-width: 0; }
.ctl-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-lg); }
.ctl-who small { color: var(--c-dim); font-size: var(--t-sm); }
.ctl-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ctl-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: #222b45; color: #c8d0ff; font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
.ctl-tag.gold { background: #3a2f12; color: var(--c-gold); } .ctl-tag.green { background: #123323; color: var(--c-green); } .ctl-tag.red { background: #3a1717; color: #ff9a9a; } .ctl-tag.dim { background: var(--c-panel-2); color: var(--c-muted); }
.ctl-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ctl-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.ctl-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--c-muted); font-weight: 600; cursor: pointer; }
.ctl-seg [aria-pressed="true"] { background: var(--c-panel-2); color: var(--c-text); box-shadow: inset 0 0 0 1px #313a4a; }
.ctl-report { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line), inset 3px 0 0 #ff9f43; }
.ctl-report.done { box-shadow: inset 0 0 0 1px var(--c-line); opacity: .78; }
.ctl-report header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ctl-report header p { margin: 0; }
.ctl-report header strong { color: #fff; }
.ctl-report time { color: var(--c-dim); font-size: var(--t-sm); white-space: nowrap; }
.ctl-report blockquote { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--c-panel-2); color: #dfe3ea; overflow-wrap: anywhere; }
.ctl-report .ctl-tags, .ctl-report .ctl-acts { justify-content: flex-start; }
.ctl-errors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctl-errors li { display: grid; grid-template-columns: 120px auto minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.ctl-errors time { color: var(--c-dim); font-size: var(--t-sm); }
.ctl-errors code { font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #ffc2c2; overflow-wrap: anywhere; }

/* Narrower windows: two columns of cards; phones: the panel is the whole screen, one column, 44 px targets */
@media (max-width: 1080px) { .ctl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .ctl-shell { width: 100vw; height: 100dvh; border-radius: 0; animation: none; }
  .ctl-head { padding: calc(var(--safe-t) + 10px) calc(var(--safe-r) + 14px) 8px calc(var(--safe-l) + 14px); gap: 10px; flex-wrap: wrap; }
  .ctl-head h2 { font-size: 19px; }
  .ctl-sync { order: 3; flex-basis: 100%; margin: 0; }
  .ctl-close { margin-left: auto; width: 44px; height: 44px; }
  .ctl-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ctl-nav { overflow: visible; padding: 8px calc(var(--safe-r) + 12px) 8px calc(var(--safe-l) + 12px); border-right: 0; border-bottom: 1px solid var(--c-line); }
  .ctl-tabs { display: none; }
  .ctl-pick { display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-panel-2); color: var(--c-text); font-weight: 700; }
  .ctl-pane { padding: 12px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 12px); gap: 10px; }
  .ctl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ctl-kpi { padding: 12px 13px; } .ctl-kpi strong { font-size: 28px; }
  .ctl-grid { grid-template-columns: minmax(0, 1fr); }
  .ctl-search { max-width: none; height: 44px; }
  .ctl-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .ctl-filters::-webkit-scrollbar { display: none; }
  .ctl-feed li { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  .ctl-feed time { white-space: nowrap; }
  .ctl-feed .ctl-cat { grid-column: 2; grid-row: 1; }
  .ctl-feed .ctl-say { grid-column: 1 / -1; }
  .ctl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ctl-row .ctl-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .ctl-errors li { grid-template-columns: auto minmax(0, 1fr); }
  .ctl-errors code { grid-column: 1 / -1; }
}
@media (pointer: coarse) { .ctl-btn, .ctl-select, .ctl-chip, .ctl-seg button, .ctl-tabs [role="tab"] { min-height: 44px; } .ctl-btn.small { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ctl-shell, .ctl-feed li.new { animation: none; } .ctl-bars b { transition: none; } }
/* ADMIN end */

/* TELEPORT: the place card on the full map (ui/teleport.js): Walk there (free) or Teleport (500 $Printer to the treasury) */
.tp-card { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; width: min(420px, calc(100% - 28px)); display: grid; gap: 10px; padding: 14px 14px 13px 16px; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 12px 34px rgba(20, 16, 8, .3), 0 0 0 1px rgba(29, 33, 38, .06); animation: tpin .18s ease-out; outline: none; }
.tp-card:focus-visible { box-shadow: 0 12px 34px rgba(20, 16, 8, .3), 0 0 0 3px var(--cobalt-ink); }
@keyframes tpin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
.tp-head { display: flex; align-items: flex-start; gap: 10px; }
.tp-titles { display: grid; min-width: 0; margin-right: auto; line-height: 1.2; gap: 2px; }
.tp-name { font-size: var(--t-xl); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-meta { font-size: var(--t-md); color: var(--muted); }
.tp-x { width: 36px; height: 36px; margin: -4px -4px 0 0; }
.tp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-acts .map-btn { height: auto; min-height: 54px; justify-content: flex-start; gap: 10px; padding: 7px 14px 7px 13px; border-radius: var(--r-md); white-space: normal; text-align: left; }
.tp-acts .map-btn .map-ic { width: 20px; height: 20px; }
.tp-btxt { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.tp-btxt strong { font-size: var(--t-lg); font-weight: 800; }
.tp-btxt small { font-size: var(--t-sm); font-weight: 700; opacity: .82; font-variant-numeric: tabular-nums; }
.tp-walk .tp-btxt small { color: #2f7a3a; opacity: 1; }
.tp-acts .map-btn.tp-go { background: var(--cobalt); color: #fff; }
.tp-acts .map-btn.tp-go:hover:not(:disabled) { background: var(--cobalt-ink); }
.tp-acts .map-btn.tp-go:disabled { background: var(--paper-3); color: #5f646b; cursor: not-allowed; }
.tp-acts .map-btn.tp-go.soon:disabled { background: #fdf1d3; color: #7a520a; }
.tp-land, .tp-price, .tp-note { margin: 0; font-size: var(--t-md); line-height: 1.4; }
.tp-land { color: var(--ink); }
.tp-price { color: var(--muted); }
.tp-price b { color: var(--ink); }
.tp-price code { font: 600 var(--t-sm)/1 ui-monospace, monospace; color: var(--muted); background: var(--paper-2); padding: 2px 6px; border-radius: 6px; }
.tp-note:empty { display: none; }
.tp-note.warn { color: #8f2a1f; font-weight: 700; }
@media (pointer: coarse) { .tp-x { width: 44px; height: 44px; } }
@media (max-width: 640px) { .tp-card { bottom: 10px; width: calc(100% - 20px); padding: 12px 12px 11px 14px; gap: 8px; } .tp-name { font-size: var(--t-lg); } .tp-acts .map-btn { font-size: var(--t-md); } }
@media (prefers-reduced-motion: reduce) { .tp-card { animation: none; } }
/* I18N: languages (public/src/i18n). Chinese, Japanese and Korean use the system's fonts for their own script (Geist
   has none); <html lang> picks the right glyph forms. The Language row in the profile. Long languages (German,
   French, Russian) and CJK: labels may wrap on phones instead of running off screen. */
:root:lang(zh-CN) { font-family: Geist, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif; }
:root:lang(ja) { font-family: Geist, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }
:root:lang(ko) { font-family: Geist, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", system-ui, sans-serif; }
:root:lang(zh-CN) body, :root:lang(ja) body, :root:lang(ko) body { line-break: strict; }
:root:lang(ko) body { word-break: keep-all; }
/* CJK can break between any two characters, so a short label in a row of buttons would shrink to one character a
   line: keep bar labels on one line */
:is(:lang(zh-CN), :lang(ja), :lang(ko)) :is(.emotes button, .pill, .seg button, .gs-seg button, .gs-chips button, .tabs button, .map-btn, .map-tool, .gs-go, .gs-how, .gs-more, .chat-form button, .voice-row button, .qc-btn, .jump, .consent-ok, .pk-steps li) { white-space: nowrap; }
/* away from English a progress chip may take two lines rather than end in ... */
:root:not(:lang(en)) .gs-chip { white-space: normal; }
/* the quick chat wheel on a phone: phrases run longer in some languages; they wrap inside the ring (the wheel's own
   styles come later from ui/quickchat.js, hence .qc-wheel in front) */
@media (max-width: 480px) { .qc-wheel .qc-ring button { width: max-content; max-width: 25vw; white-space: normal; overflow-wrap: anywhere; padding: 8px 7px; font-size: 13px; line-height: 1.15; text-align: center; } .emotes { max-width: calc(100vw - 12px); } .emotes button { padding: 0 9px; } }
.pf-lang { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--paper-2); }
.pf-lang .ic { width: 20px; height: 20px; flex: none; color: var(--cobalt-ink); display: grid; }
.pf-lang .ic svg { width: 20px; height: 20px; }
.pf-lang label { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; cursor: pointer; }
.pf-lang label strong { font-size: var(--t-md); }
.pf-lang label small { font-size: var(--t-xs); color: var(--muted); }
.pf-lang-select { flex: none; max-width: 60%; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); font: inherit; font-size: var(--t-md); font-weight: 600; padding: 0 30px 0 10px; cursor: pointer; }
.pf-lang-select:focus-visible { outline: 3px solid var(--cobalt-ink); outline-offset: 2px; }
.sound-row { grid-template-columns: minmax(70px, max-content) 1fr 46px; }
/* paintball's round touch buttons are 72 px: away from English the word may take two lines (ru.js marks where) */
@media (pointer: coarse) { :root:not(:lang(en)) :is(.pb-reload, .pb-zoom) { padding: 0 4px; font-size: 12px; line-height: 1.05; overflow-wrap: anywhere; hyphens: manual; } }
/* the full map's one column never grows past the screen: a longer "You are near ..." line in the head ends in ... instead
   of widening the whole map (its column was auto, so the head's text set its width) */
.map-shell { grid-template-columns: minmax(0, 1fr); }
/* the Land Office's Ink math: a longer source name wraps, the amount stays on one line ("150 Ink") */
.ik-math { grid-template-columns: minmax(0, 1fr) auto; }
.ik-math dd { white-space: nowrap; }
/* I18N end */

/* LAND: the build bar's undo and redo, the status line, the block kinds on the palette, the claim sheet's show home note */
.build-bar .tools .land-undo, .build-bar .tools .land-redo { min-width: 54px; }
.build-bar .tools button:disabled { opacity: .45; cursor: default; }
.build-bar { width: min(1000px, calc(100vw - 24px)); }
.build-bar .palette { max-height: 76px; overflow-y: auto; scrollbar-width: thin; gap: 4px; }
.build-bar .palette button { width: 32px; height: 32px; }
.build-bar .palette button[data-kind="water"] { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff) 0 40%, var(--c) 40%); }
.build-bar .palette button[data-kind="water"]::after, .build-bar .palette button[data-kind="plant"]::after, .build-bar .palette button[data-kind="glow"]::after {
  position: absolute; right: 2px; bottom: 1px; font-size: 10px; line-height: 1; font-weight: 800; color: rgba(255, 255, 255, .95); text-shadow: 0 0 2px rgba(0, 0, 0, .45);
}
.build-bar .palette button[data-kind="water"]::after { content: '~'; }
.build-bar .palette button[data-kind="plant"]::after { content: '*'; }
.build-bar .palette button[data-kind="glow"] { box-shadow: 0 0 0 1px var(--line), 0 0 10px 1px color-mix(in srgb, var(--c) 70%, transparent); }
.build-bar .palette button[data-kind="glow"]::after { content: '+'; }
.build-bar .palette button[data-kind="glow"][aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink), 0 0 10px 1px color-mix(in srgb, var(--c) 70%, transparent); }
.build-bar .land-status { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--muted); min-height: 18px; }
.build-bar .land-status .swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 1px var(--line); flex: none; }
.sheet-inner .land-show-note { margin: 10px 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--t-md); line-height: 1.45; color: var(--ink); }
.land-blueprints { display: flex; flex-wrap: wrap; gap: 8px; }
/* LAND: shapes, Rotate and Flip (big targets on touch) */
.build-bar .land-shape-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.build-bar .land-shapes, .build-bar .land-turns { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.build-bar .land-turns { margin-left: auto; }
.build-bar .land-shape-row button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink); }
.build-bar .land-shape-row button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.build-bar .land-shape-row button:disabled { opacity: .4; cursor: default; }
.build-bar .land-shape i { width: 16px; height: 16px; display: inline-block; background: currentColor; flex: none; }
.build-bar .land-shape[data-shape="cube"] i { border-radius: 2px; }
.build-bar .land-shape[data-shape="slab"] i { clip-path: inset(50% 0 0 0); }
.build-bar .land-shape[data-shape="stairs"] i { clip-path: polygon(0 100%, 0 50%, 50% 50%, 50% 0, 100% 0, 100% 100%); }
.build-bar .land-shape[data-shape="slope"] i { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.build-bar .land-shape[data-shape="pane"] i { clip-path: inset(0 38%); }
.build-bar .land-shape[data-shape="post"] i { clip-path: inset(0 32% 0 32%); }
.build-bar .land-rotate i { width: 16px; height: 16px; display: inline-block; flex: none; background: currentColor; transform: rotate(var(--yaw, 0deg)); transition: transform .18s ease; clip-path: polygon(50% 0, 100% 45%, 64% 45%, 64% 100%, 36% 100%, 36% 45%, 0 45%); }
.build-bar .land-flip i { width: 16px; height: 16px; display: inline-block; flex: none; background: currentColor; clip-path: polygon(50% 0, 85% 38%, 15% 38%, 15% 62%, 85% 62%, 50% 100%); }
.build-bar .land-flip[aria-pressed="true"] { background: var(--paper-2); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .build-bar .land-rotate i { transition: none; } }
@media (max-width: 640px) {
  .build-bar .palette { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 4px; }
  .build-bar .palette button { flex: none; }
  .build-bar .land-status { font-size: var(--t-xs); }
}
@media (pointer: coarse) {
  .build-bar .tools button, .build-bar .land-shapes button { min-height: 44px; }
  .build-bar .palette button { width: 40px; height: 40px; }
  .build-bar .land-rotate, .build-bar .land-flip { min-width: 88px; justify-content: center; font-size: 14px; }
  .build-bar .land-rotate i, .build-bar .land-flip i { width: 20px; height: 20px; }
}
@media (max-width: 640px) {
  .build-bar .land-shapes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; }
  .build-bar .land-shapes button { flex: 1 0 auto; justify-content: center; }
  .build-bar .land-turns { flex: 1 1 100%; margin-left: 0; }
  .build-bar .land-turns button { flex: 1; }
  .build-bar .palette, .build-bar .tools { scrollbar-width: none; }
  .build-bar .palette::-webkit-scrollbar, .build-bar .tools::-webkit-scrollbar, .build-bar .land-shapes::-webkit-scrollbar { display: none; }
  body.building .chat { display: none; }   /* the bar needs the room while you build on a phone; chat comes back when you finish */
  .build-bar .land-shape span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the name stays for screen readers */
  .build-bar .land-shape { padding: 6px 10px; }
  .build-bar .tools { flex-wrap: nowrap; overflow-x: auto; }
  .build-bar .tools button { flex: none; }
  .build-bar .land-rotate, .build-bar .land-flip { min-height: 44px; justify-content: center; font-size: 14px; }
  .build-bar .land-rotate i, .build-bar .land-flip i { width: 20px; height: 20px; }
}
/* INK-MARKET: the Ink Market panel (ui/inkmarket.js), the looks bought with Ink (games/inkflair.js), the keepers'
   bubbles (world/inkmarket.js), the holder discount at checkout and the perks card in the profile */
#sheet.ink-sheet { width: min(780px, calc(100vw - 24px)); overflow: hidden; display: flex; flex-direction: column; background: #f7f2e7; }
#sheet.ink-sheet > .sheet-close { display: none; }
#sheet.ink-sheet #sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ink-shop { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 18px 20px 0; }
.ik-head { display: flex; align-items: flex-start; gap: 12px; }
.ik-titles { flex: 1; min-width: 0; }
.ik-titles h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ik-bal { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.ik-bal > div { display: grid; line-height: 1.05; }
.ik-bal-n { font-size: 22px; font-weight: 850; color: var(--cobalt-ink); font-variant-numeric: tabular-nums; }
.ik-bal small { font-size: 11px; font-weight: 700; color: var(--muted); }
.ik-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.ik-ic svg { width: 100%; height: 100%; }
.ik-drop { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--cobalt); color: #fff; }
.ik-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper-2); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); flex: none; }
.ik-close:hover { background: var(--paper-3); }
.ik-xp { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #3b4150; background: #e9edff; border-radius: 12px; padding: 8px 12px; }
.ik-xp b { color: var(--cobalt-ink); }
.ik-perk { display: block; margin: 8px 0 0; padding: 7px 12px; border: 0; border-radius: 12px; background: #fbf0d3; color: #6e4f0c; font: inherit; font-size: 12.5px; font-weight: 750; text-align: left; }
.ik-perk.muted { background: var(--paper-2); color: var(--muted); cursor: pointer; font-weight: 650; }
.ik-tabs { display: flex; gap: 2px; padding: 4px; margin: 12px 0 0; background: var(--paper-2); border-radius: 14px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ik-tabs::-webkit-scrollbar { display: none; }
.ik-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; background: none; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 750; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ik-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(30, 24, 10, .14); }
.ik-tabs button[aria-selected="true"] .ik-ic { color: var(--cobalt); }
.ik-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 22px; }
.ik-lead { margin: 12px 0 4px; font-size: 13.5px; line-height: 1.5; color: #3b4150; }
.ik-status { margin: 8px 0; padding: 8px 12px; border-radius: 10px; background: #fdeceb; color: #7d2a24; font-size: 13px; font-weight: 650; }
.ik-group { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ik-group small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 10px; margin-top: 8px; }
.ik-wide { grid-column: 1 / -1; }
.ik-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.ik-card.owned { box-shadow: inset 0 0 0 1px #b9dcc6; }
.ik-card.locked { background: #fbf9f4; }
.ik-card.done { background: #f2f7ff; box-shadow: inset 0 0 0 1px #c9d4ff; }
.ik-card-top { display: flex; align-items: center; gap: 10px; }
.ik-card-top h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.ik-step { font-size: 11px; font-weight: 750; color: #8a6412; }
.ik-art { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #eef1ff; color: var(--cobalt); padding: 10px; }
.ik-art.rod-reel { background: #fff4d6; color: #b8862b; }
.ik-art.rod-line { background: #e6f4ec; color: #2d6a45; }
.ik-plate-art { width: auto; min-width: 46px; padding: 0 6px; background: #3b4150; }
.ik-plate-art .tag { position: static; transform: none; display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ik-trail-art { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px 6px; background: #2b2f36; }
.ik-trail-art i { display: block; width: 5px; height: 5px; border-radius: 1px; }
.ik-rod-art { background: #f3ead7; padding: 6px; }   /* GOLDEN ROD: the rod in its own colors on paper */
.ik-rod-art svg { width: 100%; height: 100%; display: block; }
.ik-trail-art i:nth-child(1) { height: 3px; opacity: .5; }
.ik-trail-art i:nth-child(2) { height: 6px; opacity: .7; }
.ik-trail-art i:nth-child(3) { height: 9px; }
.ik-trail-art i:nth-child(4) { height: 6px; opacity: .8; }
.ik-trail-art i:nth-child(5) { height: 4px; opacity: .6; }
.ik-trail-art.trail-drip i { background: #4a64ff; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.ik-trail-art.trail-paper i { background: #f7f2e7; width: 7px; border-radius: 1px; transform: rotate(-12deg); }
.ik-trail-art.trail-gold i { background: #ffc94a; box-shadow: 0 0 6px #ffd76a; width: 4px; }
.ik-blurb { margin: 0; font-size: 13px; line-height: 1.45; color: #3b4150; }
.ik-now, .ik-next, .ik-maxed { margin: 0; font-size: 12.5px; line-height: 1.4; }
.ik-now { color: var(--muted); }
.ik-next { color: var(--cobalt-ink); font-weight: 700; }
.ik-maxed { color: #2d6a45; font-weight: 700; }
.ik-pips { display: inline-flex; gap: 3px; margin-top: 4px; }
.ik-pips i { width: 16px; height: 6px; border-radius: 999px; background: var(--paper-3); }
.ik-pips i.on { background: var(--cobalt); }
.ik-buyrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.ik-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ik-price { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 13px; font-weight: 650; color: var(--muted); }
.ik-price b { font-size: 17px; font-weight: 850; color: var(--ink); font-variant-numeric: tabular-nums; }
.ik-price s { color: var(--muted); font-weight: 600; }
.ik-price small { flex-basis: 100%; font-size: 11px; font-weight: 750; color: #8a6412; }
.ik-short { color: var(--muted) !important; }
.ik-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.ik-pickline { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: #fff4d6; color: #6e4f0c; font-size: 13px; font-weight: 700; }
.ik-pickline.used { background: #e6f4ec; color: #2d6a45; }
.ik-land-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 10px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #1d2a6b, #2f4bff); color: #fff; }
.ik-land-price { margin: 0 !important; font-size: 30px !important; font-weight: 850; letter-spacing: -.01em; line-height: 1.05 !important; }
.ik-land-price s { font-size: 16px; font-weight: 650; opacity: .6; margin-right: 6px; }
.ik-land-for { margin: 2px 0 0 !important; font-size: 12.5px !important; color: #c9d4ff; }
.ik-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(242, 201, 76, .22); color: #ffe3a0; font-size: 11px; font-weight: 750; }
.ik-progress small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #dfe5ff; }
.ik-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.ik-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fa2ff, #fff); }
.ik-math { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ik-math .sum { padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 800; }
.ik-namefield { margin-top: 6px; }
.ik-name { width: 100%; }
.ik-plots { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.ik-plot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ik-plot > div { display: grid; min-width: 0; }
.ik-plot strong { font-size: 13.5px; overflow-wrap: anywhere; }
.ik-plot small { font-size: 12px; color: var(--muted); }
.ik-plot.mine { box-shadow: inset 0 0 0 2px #c9d4ff; background: #f5f7ff; }
.ik-you { margin-top: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ik-you h3 { margin: 2px 0 6px; font-size: 20px; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.ik-today { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.ik-ladder { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ik-ladder > li { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ik-ladder > li.now { box-shadow: inset 0 0 0 2px var(--cobalt); background: #f5f7ff; }
.ik-ladder > li.past { opacity: .78; }
.ik-ladder ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: #3b4150; }
.ik-ladder small { font-size: 11.5px; color: var(--muted); }
.ik-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ik-step-head strong { font-size: 14.5px; }
.ik-off { padding: 1px 8px; border-radius: 999px; background: #fbf0d3; color: #8a6412; font-size: 11px; font-weight: 800; }
.ik-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.ik-log li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #fff; }
/* nameplates bought with Ink (they win over the garage's gold plate when both are on) */
.tag.ink-plate.plate-cobalt { background: linear-gradient(180deg, #3a55ff, #2236b8); color: #fff; box-shadow: 0 0 0 2px #f4efe2, 0 2px 6px rgba(20, 30, 90, .35); font-weight: 750; }
.tag.ink-plate.plate-paper { background: repeating-linear-gradient(0deg, #fffdf6 0 5px, #f3ecdc 5px 6px); color: #1d2126; box-shadow: 0 0 0 1px #c9bfa6, 0 2px 0 #e3d9c2; border-radius: 4px; font-family: ui-monospace, "Cascadia Mono", monospace; font-weight: 700; }
.tag.ink-plate.plate-neon { background: #120e1c; color: #9fb2ff; text-shadow: 0 0 6px #4f6bff, 0 0 12px #4f6bff; box-shadow: 0 0 0 2px #4f6bff, 0 0 16px rgba(79, 107, 255, .7); font-weight: 750; }
.tag.ink-plate.plate-mint { background: linear-gradient(180deg, #5fae7e, #2d6a45); color: #fff8dc; box-shadow: 0 0 0 2px #d9a93a, 0 2px 6px rgba(20, 60, 30, .35); font-weight: 750; }
.tag.ink-plate.plate-whale { background: linear-gradient(135deg, #0f2a4a, #14537a); color: #ffe7a8; box-shadow: 0 0 0 2px #d9a93a, 0 0 14px rgba(217, 169, 58, .45); font-weight: 800; }
.tag.you.ink-plate { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.tag.bubble.ink-bubble { background: #fffbf2; box-shadow: 0 0 0 2px var(--cobalt), 0 3px 10px rgba(20, 30, 90, .2); font-weight: 600; }
/* Ink emotes on the emote bar: inline on wide screens, behind a + on phones */
.ik-emotes { display: flex; align-items: center; gap: 2px; border-left: 1px solid var(--line); padding-left: 2px; position: relative; }
.ik-emote-list { display: flex; gap: 2px; }
.emotes .ik-more { display: none; font-size: 20px; font-weight: 800; color: var(--cobalt); }
@media (max-width: 640px), (pointer: coarse) {
  .emotes .ik-more { display: flex; justify-content: center; }
  .ik-emote-list { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; flex-direction: column; background: var(--paper); padding: 4px; border-radius: 16px; box-shadow: var(--shadow); }
  .ik-emotes.open .ik-emote-list { display: flex; }
  .ik-emote-list .ik-emote { justify-content: flex-start; white-space: nowrap; }
}
/* checkout: the holder discount line above the total */
.ik-perkline { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #fbf0d3; color: #6e4f0c; font-size: 12.5px; font-weight: 750; }
.ik-perkline s { color: #8a6412; font-weight: 600; }
/* the profile's perks card */
.ik-pf .pf-ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ik-pf-lines { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.ik-pf-today { margin: 8px 0 0 !important; font-size: 13px !important; font-weight: 700; color: var(--cobalt-ink); }
@media (max-width: 640px) {
  #sheet.ink-sheet { max-height: 88dvh; }
  .ink-shop { padding: 14px 14px 0; }
  .ik-titles h2 { font-size: 20px; }
  .ik-bal { padding: 4px 10px 4px 6px; }
  .ik-bal-n { font-size: 18px; }
  .ik-drop { width: 28px; height: 28px; padding: 5px; }
  .ik-tabs button > span:not(.ik-ic) { display: none; }
  .ik-tabs button { flex: 1 0 44px; padding: 0 8px; }
  .ik-tabs button[aria-selected="true"] > span:not(.ik-ic) { display: inline; }
  .ik-grid { grid-template-columns: 1fr; }
  .ik-land-hero { grid-template-columns: 1fr; gap: 10px; }
  .ik-land-price { font-size: 26px !important; }
}
@media (pointer: coarse) {
  .ik-tabs button, .ik-close { min-height: 44px; }
  .ik-close { width: 44px; height: 44px; }
  .ink-shop .btn.small { min-height: 44px; }
}
.ik-claim { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #eef1ff; font-size: 13px; }
.ik-claim p { margin: 0 0 4px !important; font-size: 13px !important; }
.ik-claim p:last-child { margin-bottom: 0 !important; }
.ik-claim .link { border: 0; background: none; padding: 0; font: inherit; font-weight: 750; color: var(--cobalt-ink); text-decoration: underline; cursor: pointer; }
.ik-free { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #0f2a4a, #14537a); color: #ffe7a8; font-size: 13px; line-height: 1.45; }
.ik-plot.free { box-shadow: inset 0 0 0 2px #d9a93a; background: #fffaf0; }
.ik-freebtn { background: #14537a; }
.ik-free-line { padding: 8px 10px; border-radius: 10px; background: #0f2a4a; color: #ffe7a8; }
.ik-free-line .btn { margin-top: 6px; background: #d9a93a; color: #1d2126; }
/* INK-MARKET end */

/* VISUAL-QA (docs/WAVE2.md 17): narrow windows on a computer (641 to 1100 px wide). The emotes and the door prompt were
   centred under the chat and the Controls (overlapping from 1024 px down); they now sit centred in the gap between the
   two (the prompt clear of the minimap too), the key hints in the emotes go (the Controls list them), and the chat
   narrows a little in the narrowest windows. */
@media (min-width: 641px) and (max-width: 1100px) and (pointer: fine) {
  :root { --chat-w: 300px; --help-w: 262px; --mm-w: 180px; }   /* the minimap and its compass */
  :root:has(#help.collapsed) { --help-w: 44px; }
  .chat:not(.locked) { width: var(--chat-w); }
  .emotes { left: calc((var(--left) + var(--chat-w) + 100vw - var(--right) - var(--help-w)) / 2); }
  .door-prompt { left: calc((var(--left) + var(--chat-w) + 100vw - var(--right) - max(var(--help-w), var(--mm-w))) / 2); }   /* one row up: beside the open Controls, or under the minimap when they fold */
  .emotes kbd { display: none; }
  .emotes button { padding: 0 12px; }
  .door-prompt button { max-width: calc(100vw - var(--left) - var(--chat-w) - var(--right) - max(var(--help-w), var(--mm-w)) - 24px); padding-top: 4px; padding-bottom: 4px; }
  .door-prompt span { white-space: normal; line-height: 1.25; }   /* a long name takes two lines instead of an ellipsis */
}
@media (min-width: 641px) and (max-width: 760px) and (pointer: fine) {   /* the narrowest: the minimap steps aside while a door prompt shows (as phones do for the catch card) */
  :root { --chat-w: 270px; } .emotes button { padding: 0 10px; }
  :root:has(#door-prompt:not([hidden])) { --mm-w: 0px; } #app:has(#door-prompt:not([hidden])) .minimap { visibility: hidden; }
}
/* VISUAL-QA: phones on their side narrower than 720 px (667 x 375): the top bar ran under the round chat button; the
   sound button moves into the emotes, as on phones held upright */
@media (pointer: coarse) and (max-height: 500px) and (max-width: 720px) { .top-actions .sound-btn { display: none; } .emotes .sound-btn { display: grid; } .sound-hint { display: none; } }

/* SETTINGS (ui/settings.js, branch settings): the top right reads Games, your Character (your look, "Character", its
   name and Change), your Profile, and the gear for Settings; the Settings sheet (Graphics, Sound, Controls, Language,
   Account). The sound panel docks in the Sound section; on phones the emote bar's speaker opens it. */
#open-picker { padding: 0 6px 0 6px; gap: 9px; }
.pick-text { display: grid; min-width: 0; line-height: 1.1; text-align: left; }
.pick-kicker { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pick-text #current-name { font-size: var(--t-md); font-weight: 700; max-width: 150px; }
.pick-ava { position: relative; flex: none; display: grid; }
.pick-swap { display: none; position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); place-items: center; box-shadow: 0 0 0 2px var(--paper); }
.pick-swap svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#open-picker .pill-cta { display: inline-flex; }
#open-picker:hover .pill-cta, #open-picker:focus-visible .pill-cta { background: var(--cobalt-ink); }
.gear-btn { padding: 0 12px; gap: 7px; }
.gear-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: transform .35s ease; }
.gear-btn:hover svg, .gear-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.gear-label { font-size: var(--t-md); font-weight: 700; }
@media (max-width: 1279px) { .gear-btn { width: var(--hud-h); padding: 0; justify-content: center; } .gear-label { display: none; } }
@media (max-width: 1100px) { #open-picker .pill-cta { display: inline-flex; } .pick-text #current-name { max-width: 104px; } }
@media (max-width: 900px) { .pick-text { display: none; } #open-picker { padding: 0 6px 0 5px; } }
/* phones in portrait: Games, your character's face, your Profile picture (or initial) and the gear, 44 px each */
@media (max-width: 640px) {
  #open-games { min-width: 0; padding: 0 12px; }
  #open-picker .pill-cta { display: none; }
  #open-profile { width: var(--hud-h); min-width: 0; padding: 0; justify-content: center; position: relative; }
  #open-profile .pill-label { display: none; }
  #open-profile::after { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--st-person) center / contain no-repeat; mask: var(--st-person) center / contain no-repeat; }
  #open-profile:has(.pill-av:not([hidden]))::after { content: none; }
  #open-profile .pill-av:not([hidden]) { display: block; width: 32px; height: 32px; margin: 0; }
  .pick-swap { display: grid; right: -2px; bottom: -2px; }
}
/* the narrowest phones: Games shows a joystick with its count, so the top row still fits beside the brand and chat */
@media (max-width: 380px) {
  .top-actions { gap: 5px; }
  #open-games { width: var(--hud-h); padding: 0; justify-content: center; font-size: 0; position: relative; }
  #open-games::before { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--st-games) center / contain no-repeat; mask: var(--st-games) center / contain no-repeat; }
  #open-games .quest-badge { position: absolute; top: -4px; right: -4px; margin: 0; font-size: 10px; box-shadow: 0 0 0 2px var(--paper); }
}
@media (pointer: coarse) and (max-height: 500px) { .pick-text #current-name { max-width: 96px; } }
:root { --st-games: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="4" y="14" width="16" height="6" rx="2"/><path d="M12 14V8.6"/><circle cx="12" cy="6" r="2.6"/></svg>'); }
:root { --st-person: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8.6" r="3.6"/><path d="M5 19.5c1.2-3.6 3.8-5.4 7-5.4s5.8 1.8 7 5.4"/></svg>'); }

/* the Settings sheet */
#sheet.st-sheet { width: min(440px, calc(100vw - 24px)); }
.st h2 { margin-bottom: 2px; }
.st .st-sub { margin: 0 0 12px; font-size: var(--t-md); color: var(--muted); }
.st-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 -4px 14px; background: var(--paper-2); border-radius: var(--r-md); overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs button { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; min-height: 52px; padding: 6px 6px 5px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.st-tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.st-tabs button[aria-selected="true"] { background: #fff; color: var(--cobalt-ink); box-shadow: 0 1px 3px rgba(30, 24, 10, .12); }
.st-tabs button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.st-ic { display: grid; place-items: center; width: 22px; height: 22px; }
.st-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-panel:focus { outline: none; }
.st-group { background: #fff; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px 14px; margin: 0 0 10px; }
.st .st-label { display: block; margin: 0 0 8px; font-size: var(--t-md); font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--ink); }
.st .st-label-sm { margin: 12px 0 4px; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.st-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.st-row .st-label { margin: 0; }
.st-val { font-size: var(--t-md); font-weight: 800; color: var(--cobalt-ink); font-variant-numeric: tabular-nums; }
.st-presets button { min-height: 40px; }
.st .st-say { margin: 10px 0 0; font-size: var(--t-md); line-height: 1.45; }
.st .st-now { margin: 6px 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--cobalt-ink); }
.st .st-hint { margin: 8px 0 0; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.st-facts { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; margin: 0; font-size: var(--t-sm); }
.st-facts dt { color: var(--muted); font-weight: 600; }
.st-facts dd { margin: 0; font-weight: 600; }
.st input[type="range"] { width: 100%; margin: 10px 0 2px; accent-color: var(--cobalt-ink); }
.st-ends { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--muted); }
.st .st-meter { margin: 4px 2px 0; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.st .st-cap { color: #8a6412; }
.st-switch { margin-top: 14px; }
.st-keys ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: var(--t-sm); }
.st-keys kbd { margin-right: 4px; }
.st-who { display: flex; align-items: center; gap: 12px; }
.st-who strong { display: block; font-size: var(--t-lg); overflow-wrap: anywhere; }
.st-who small { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--muted); }
.st-face { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #dfe5ff; color: var(--cobalt-ink); font-weight: 800; font-size: 20px; }
.st-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-acts { margin-top: 0; }
/* the sound panel, docked: a section of the sheet, not a popover */
.sound-panel.docked { position: static; z-index: auto; width: auto; box-shadow: inset 0 0 0 1px var(--line); background: #fff; border-radius: var(--r-md); padding: 10px 14px 12px; margin: 0 0 10px; }
.sound-panel.docked .sound-hint { display: none; }
@media (pointer: coarse) { .st-tabs button { min-height: 56px; } .st-presets button { min-height: 44px; } .st input[type="range"] { height: 44px; margin: 2px 0 0; } }
@media (max-width: 640px) { .st-tabs button { min-width: 58px; font-size: var(--t-xs); } .st-keys { display: none; } }
@media (pointer: coarse) { .st-keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .gear-btn svg { transition: none; } }
/* SETTINGS end */
/* SETTINGS: the first visit's note under the top right, and the Character button and the gear glowing twice */
.st-coach { position: fixed; z-index: 5; max-width: min(320px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: var(--ink); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow); animation: pop .2s ease-out; }
.st-coach::before { content: ''; position: absolute; top: -6px; right: 16px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.st-coach p { margin: 0; font-size: var(--t-md); line-height: 1.35; }
.st-coach-ok { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: #fff; color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer; }
.st-glow { animation: st-glow 1.6s ease-out 2; }
@keyframes st-glow { 0% { box-shadow: var(--shadow), 0 0 0 0 rgba(47, 75, 255, .55); } 70% { box-shadow: var(--shadow), 0 0 0 12px rgba(47, 75, 255, 0); } 100% { box-shadow: var(--shadow), 0 0 0 0 rgba(47, 75, 255, 0); } }
@media (pointer: coarse) { .st-coach-ok { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .st-coach, .st-glow { animation: none; } }

/* PB-LOBBY (games/paintball-lobby.js): the Paintball desk sheet, your lobby, and the invite line --------------- */
.pbl .pbl-sum { margin: 6px 0 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.pbl .pbl-sum p { margin: 2px 0; font-size: var(--t-md); }
.pbl .pbl-more { margin: 8px 0 0; }
.pbl .pbl-more > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; font-size: var(--t-md); color: var(--cobalt-ink); }
.pbl .pbl-form { display: grid; gap: 2px; }
.pbl .pbl-form .field { margin-top: 10px; }
.pbl .seg button { min-height: 40px; }
.pbl .actions .btn.wide { min-height: 48px; }
.pbl .pbl-state { font-weight: 700; color: var(--ink); background: #e9edff; border-radius: var(--r-md); padding: 10px 12px; }
.pbl .pbl-list li, .pbl .pbl-players li { align-items: center; }
.pbl .pbl-list li > span { display: grid; gap: 2px; min-width: 0; }
.pbl .pbl-list small { color: var(--muted); }
.pbl .pbl-players li.me { box-shadow: inset 0 0 0 2px var(--cobalt); }
.pbl .pbl-players li > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.pbl .pbl-right { display: flex; align-items: center; gap: 6px; flex: none; }
.pbl .pbl-right small { color: var(--muted); font-weight: 600; }
.pbl .pbl-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.pbl .pbl-players em.chip { font-style: normal; }
.pb-invite p { margin: 0; }
@media (pointer: coarse) { .pbl .seg button, .pbl select, .pbl .btn.small { min-height: 44px; } }
/* TRACKS: the Tracks sheet (karts/picker.js) and Race here on the full map's place card (ui/teleport.js) */
.tp-acts .map-btn.tp-extra { grid-column: 1 / -1; min-height: 46px; background: #fdf1d3; color: #7a520a; }
.tp-acts .map-btn.tp-extra:hover { background: #f8e4b4; }
.tp-acts .map-btn.tp-extra[hidden] { display: none; }
.trk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.trk > p { margin: 0 0 4px; color: var(--muted); }
.trk-card { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.trk-card.chosen { background: #fdf6e3; box-shadow: inset 0 0 0 2px var(--gold); }
.trk-top { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
.trk-art { border-radius: var(--r-md); overflow: hidden; background: #6fb3d6; }
.trk-outline { display: block; width: 100%; height: auto; }
.trk-body { min-width: 0; display: grid; gap: 4px; align-content: start; }
.trk-body h3 { margin: 0; font-size: var(--t-lg); letter-spacing: 0; text-transform: none; color: var(--ink); }
.trk-card p { margin: 0; font-size: var(--t-md); line-height: 1.4; }
.trk-line { color: var(--muted); }
.trk-facts { font-weight: 600; font-variant-numeric: tabular-nums; }
.trk-live { color: #7a520a; font-weight: 700; }
.trk-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trk-boards small { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.trk-board { margin: 0; }
.trk-board li { font-size: var(--t-md); }
.trk-empty { font-size: var(--t-sm) !important; }
.trk-vbest { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.trk-vbest span { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.trk-card .actions { margin: 2px 0 0; }
.trk-card .actions .btn { width: 100%; }

/* SHOWCASE (WAVE2 23): your gallery showcase, the list of every showcase, the profile rows, the card's sync notes */
.field textarea { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 500; resize: vertical; min-height: 72px; }
.sc-edit .pc-picks { max-height: 320px; overflow: auto; }
.sc-rows { display: grid; gap: 0; }
.sc-rows .switch-row.pc-profile-row { align-items: center; }
.pc-auto, .pc-sync { margin: 8px 0 0; font-size: var(--t-sm); color: var(--muted); }
.sc-list .pc-row strong { overflow-wrap: anywhere; text-align: left; }

/* LAUNCH-BROWSER: the Launcher inside the game (ui/launcher.js): the Launcher's own page in a frame, a header with the
   page's address, Back, Open in a new tab and Close; full screen on a phone */
.launcher-panel { width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100dvh - 32px)); max-height: none; overflow: hidden; }
.launcher-panel::backdrop { background: rgba(28, 24, 16, .55); backdrop-filter: blur(3px); }
.launcher-panel[open] { animation: mapin .22s ease-out; }
.lp-shell { display: flex; flex-direction: column; height: 100%; }   /* the note line comes and goes: a column, not fixed grid rows */
.lp-head, .lp-note, .lp-foot { flex: none; }
.lp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.lp-btn { flex: none; min-width: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-md); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.lp-btn:hover:not(:disabled) { background: var(--paper-3); }
.lp-btn:disabled { opacity: .4; cursor: default; }
.lp-sym { font-size: 18px; line-height: 1; }
.lp-address { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--r-pill); background: var(--paper-2); font-size: var(--t-md); color: var(--muted); }
.lp-address .lp-lock { width: 16px; height: 16px; flex: none; color: #2e8a4f; }
.lp-address .lp-lock svg { display: block; width: 100%; height: 100%; }
.lp-url { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-host { color: var(--ink); font-weight: 700; }
.lp-tab { flex: none; min-height: 40px; padding: 0 14px; }
.lp-note { margin: 0; padding: 8px 16px; font-size: var(--t-sm); line-height: 1.35; background: #fff4d6; color: #5a4210; border-bottom: 1px solid #f0dca6; }
.lp-view { position: relative; flex: 1 1 auto; min-height: 0; background: var(--paper-2); }
.lp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.lp-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: var(--t-md); background: var(--paper); }
.lp-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--paper-3); border-top-color: var(--cobalt); animation: lpspin .8s linear infinite; }
@keyframes lpspin { to { transform: rotate(360deg); } }
.lp-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: var(--paper); }
.lp-fallback h3 { margin: 0; font-size: var(--t-xl); line-height: 1.2; }
.lp-fallback p { margin: 0; max-width: 46ch; color: var(--muted); }
.lp-fallback .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.lp-foot { margin: 0; padding: 8px 16px; font-size: var(--t-xs); line-height: 1.35; color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); }
@media (max-width: 720px), (pointer: coarse) and (max-height: 560px) {
  .launcher-panel { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  .lp-head { gap: 6px; padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l)); }
  .lp-btn, .lp-tab, .lp-address { height: 44px; min-height: 44px; }
  .lp-btn, .lp-tab { min-width: 44px; padding: 0 10px; }
  .lp-btn .lp-label, .lp-tab .lp-label { display: none; }   /* symbols only on a phone; the buttons keep their names for screen readers */
  .lp-address { padding: 0 12px; }
  .lp-foot { padding-bottom: calc(8px + var(--safe-b)); }
}
@media (prefers-reduced-motion: reduce) { .launcher-panel[open] { animation: none; } .lp-spin { animation-duration: 2.4s; } }
/* SLOTS-LOOK: the slot dock's result. Three symbols in a little reel window (they turn while the machine's reels turn and
   land with them), a red payline across, the symbols that paid lit in gold, and the win popping and counting up. */
.slot-face { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.slot-reels { position: relative; display: inline-grid; grid-template-columns: repeat(3, 58px); gap: 4px; padding: 4px; border-radius: 12px; flex: none;
  background: linear-gradient(#30343e, #101216); box-shadow: inset 0 0 0 1px rgba(240, 205, 106, .6), 0 2px 12px rgba(0, 0, 0, .4); }
.slot-reels::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: #ff4a3a; box-shadow: 0 0 6px #ff3b2f; opacity: .8; pointer-events: none; }
.slot-tile { width: 58px; height: 58px; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(#cfc5ae, #fbf6ea 24%, #fbf6ea 76%, #cfc5ae); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.slot-tile i { width: 52px; height: 52px; background: center / contain no-repeat; }
.slot-tile.spin { background: var(--strip) center 0 / 46px auto repeat-y, linear-gradient(#cfc5ae, #fbf6ea 24%, #fbf6ea 76%, #cfc5ae); animation: slot-roll .3s linear infinite; filter: blur(1.4px) saturate(.8); }
.slot-tile:nth-child(2).spin { animation-duration: .26s; }
.slot-tile:nth-child(3).spin { animation-duration: .34s; }
.slot-tile.land i { animation: slot-land .34s cubic-bezier(.3, 1.7, .5, 1); }
.slot-tile.hit { background: radial-gradient(circle, #fff7da 40%, #f3d27a); box-shadow: inset 0 0 0 2px #f0cd6a, 0 0 14px rgba(255, 207, 90, .85); animation: slot-hit .55s ease-in-out infinite alternate; }
.slot-win { display: grid; gap: 2px; min-width: 0; }
.slot-amount { font-size: 30px; line-height: 1; font-weight: 900; color: #3dff8a; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(61, 255, 138, .45); }
.slot-face.big .slot-amount { font-size: 36px; color: #ffd36a; text-shadow: 0 0 16px rgba(255, 207, 90, .6); }
.slot-amount.pop { animation: slot-pop .55s cubic-bezier(.2, 1.7, .4, 1); }
.slot-word { font-size: var(--t-md); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #f0cd6a; }
@keyframes slot-roll { from { background-position: center 0, 0 0; } to { background-position: center 230px, 0 0; } }
@keyframes slot-land { from { transform: translateY(-34%); } to { transform: none; } }
@keyframes slot-hit { from { box-shadow: inset 0 0 0 2px #f0cd6a, 0 0 8px rgba(255, 207, 90, .5); } to { box-shadow: inset 0 0 0 2px #fff0b8, 0 0 18px rgba(255, 207, 90, .95); } }
@keyframes slot-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
@media (max-width: 640px) {
  .slot-reels { grid-template-columns: repeat(3, 52px); }
  .slot-tile { width: 52px; height: 52px; }
  .slot-tile i { width: 46px; height: 46px; }
  .slot-amount { font-size: 26px; }
  .slot-face.big .slot-amount { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .slot-tile.spin, .slot-tile.hit, .slot-tile.land i, .slot-amount.pop { animation: none; } }
/* SLOTS-LOOK: cards in the dock and the challenge sheet are little playing cards, the rank large over its suit (your hand
   large on a phone); each blackjack hand's total sits on the felt by its cards (.casino-sum: a bust red, a blackjack green). */
.casino-card { position: relative; display: inline-grid; align-content: center; justify-items: center; width: 36px; min-width: 36px; height: 48px; padding: 0; border-radius: 6px;
  background: linear-gradient(#fffefa, #f1eadb); color: #15181d; font: 900 20px/1 Geist, system-ui, sans-serif; box-shadow: inset 0 0 0 1px #cdbf9f, 0 2px 0 rgba(0, 0, 0, .35); }
.casino-card b { font-weight: 900; letter-spacing: -.05em; }
.casino-card i { font-style: normal; font-size: 17px; line-height: 1; margin-top: 2px; }
.casino-card.red { color: #c42b27; }
.casino-card.back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 6px), linear-gradient(#3a55ff, #1d36b8); box-shadow: inset 0 0 0 2px #f0cd6a, inset 0 0 0 3px #1d36a8, 0 2px 0 rgba(0, 0, 0, .35); }
.casino-duel .casino-card { box-shadow: inset 0 0 0 1px #cdbf9f, 0 2px 0 rgba(0, 0, 0, .25); }
.casino-total { min-width: 30px; height: 28px; font-size: var(--t-md); }
.tag.casino-sum { padding: 2px 9px; min-width: 28px; text-align: center; font-weight: 900; font-size: var(--t-md); font-variant-numeric: tabular-nums; background: #f0cd6a; color: #1d2126; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.tag.casino-sum.bust { background: #ff9b8f; }
.tag.casino-sum.bj { background: #3dff8a; }
@media (max-width: 640px) {
  .casino-card { width: 44px; min-width: 44px; height: 60px; font-size: 25px; border-radius: 7px; }
  .casino-card i { font-size: 20px; }
  .casino-total { min-width: 36px; height: 32px; font-size: var(--t-lg); }
}
/* SLOTS-LOOK end */

/* ONBOARD, REFERRAL: the first-visit card and its username step (ui/onboard.js; it reuses the terms gate, .gate and
   .gate-card), the "Pick a name to play" chip in the rail, Invite friends in the profile and the referrer badge on cards
   (ui/invite.js). Phones: the card fills the width with a 16 px gutter, every choice is a 64 px tap target. */
.ob-gate { z-index: 41; padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l)); }   /* a 16 px gutter on phones too (the terms gate uses 10) */
.ob-card { width: min(440px, 100%); padding: 22px 20px 16px; }
.ob-card .gate-head { align-items: flex-start; }
.ob-card .gate-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--t-lg); line-height: 1.4; }
.ob-invited { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 2px 0 12px; padding: 7px 14px 7px 12px; border-radius: var(--r-pill); background: #fbf0d3; color: #6f5010; font-size: var(--t-md); }
.ob-invited strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4f390b; }
.ob-invited-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(217, 169, 58, .25); }
.ob-choices { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.ob-choice { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.ob-choice:hover { border-color: #b9c3ff; box-shadow: 0 6px 18px rgba(47, 75, 255, .12); }
.ob-choice:active { transform: scale(.99); }
.ob-choice .ob-ic { width: 44px; height: 44px; padding: 11px; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); }
.ob-choice[data-choice="link"] .ob-ic { background: var(--ink); color: #fff; }   /* ONBOARD2: link a wallet (the username step comes after it) */
.ob-head-ic { flex: none; width: 64px; height: 64px; padding: 16px; border-radius: var(--r-md); background: #e9edff; color: var(--cobalt-ink); }
.ob-text { display: grid; gap: 3px; min-width: 0; }
.ob-text strong { font-size: var(--t-lg); }
.ob-text small { color: var(--muted); font-size: var(--t-md); line-height: 1.35; }
.ob-go { font-size: 24px; line-height: 1; color: var(--muted); padding: 0 2px; }
.ob-foot { margin: 14px 2px 2px; font-size: var(--t-md); line-height: 1.45; color: var(--muted); }
.ob-fine { margin: 10px 2px 0; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.ob-form .field { margin-top: 8px; }
.ob-form input { font-size: 16px; height: 48px; }   /* 16 px: phones do not zoom into the field */
.ob-form input[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.ob-form .error:empty { display: none; }
.ob-form .actions { flex-direction: row-reverse; }
.rail > .ob-nudge { order: -1; }
.ob-nudge { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px 6px 12px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer; pointer-events: auto; animation: pop .18s ease-out; }
.ob-nudge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(217, 169, 58, .3); }
.ob-row { margin-top: 14px; }
.ob-row .actions { margin: 10px 0 0; }
.iv-head { display: flex; align-items: center; gap: 12px; }
.iv-head .iv-ic { width: 40px; height: 40px; padding: 9px; border-radius: var(--r-md); background: #fbf0d3; color: #8a6412; }
.iv-row { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; }
.iv-link, .iv-custom { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); padding: 0 10px; font: inherit; font-size: 14px; color: var(--ink); }
.iv-share { margin-top: 12px; }
.iv-share .iv-row { margin-top: 8px; }
.iv-custom-form { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.iv-custom-form label { font-size: 13px; font-weight: 700; }
.iv-custom-form .iv-row { margin-top: 6px; }
.iv-custom-form .pf-sub { margin: 6px 0 0; }
.iv-custom-form .iv-status:empty { display: none; }
.iv-row .btn { flex-shrink: 0; min-height: 40px; }
.iv-custom:focus-visible, .iv-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.iv-stats .pf-stat span { white-space: normal; line-height: 1.25; }
.iv-earned { margin: 10px 0 0 !important; font-size: 13px !important; font-weight: 600; }
.iv-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.iv-badges .pf-sub { margin: 0 !important; }
.iv-friends h4, .iv-top h4 { margin: 14px 0 6px; font-size: var(--t-md); }
.iv-friends .list li span:first-child, .iv-top .list li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.iv-state { display: grid; justify-items: end; gap: 1px; color: var(--muted); white-space: nowrap; text-align: right; }
.iv-got { color: #8a6412; font-size: 12px; font-weight: 700; }
.iv-top ol { counter-reset: iv; }
.iv-top li { counter-increment: iv; }
.iv-top li span:first-child::before { content: counter(iv) ". "; color: var(--muted); font-weight: 700; }
.iv-card .note { margin: 12px 0 0; }
.iv-card-badge { margin: 0 0 4px; }
@media (max-width: 640px) {
  .ob-card { padding: 18px 16px 14px; border-radius: 20px; }
  .ob-card .gate-head h2 { font-size: 20px; }
  .ob-card .brand-mark.big, .ob-head-ic { width: 52px; height: 52px; }
  .ob-head-ic { padding: 13px; }
  .ob-choice { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ob-choice, .ob-nudge { transition: none; animation: none; } }

/* CASINO-PAY: $Printer at the casino (games/casino-pay.js). The dock's chip count opens Buy chips (or your $Printer
   balance), the Chips or $Printer switch, the Buy chips packs, the first-time confirmation, the balance sheet, and the
   Owner panel's Casino tab. */
.casino-buy { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px 0 10px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); color: inherit; font: inherit; cursor: pointer; }
.casino-buy .casino-stack { margin-right: 0; color: #f3ece0; font-weight: 700; }
.casino-buy i { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: #d9a93a; color: #1d2126; font-style: normal; font-weight: 900; font-size: 15px; line-height: 1; }
.casino-buy:hover { background: rgba(255, 255, 255, .14); }
.casino-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); }
.casino-mode-btn { min-height: 34px; border: 0; border-radius: var(--r-pill); background: transparent; color: #c9c2b0; font: inherit; font-weight: 700; font-size: var(--t-md); cursor: pointer; }
.casino-mode-btn.on { background: #f0cd6a; color: #1d2126; }
.casino-mode-btn:not(.on):hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cpay-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cpay-pack { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 128px; padding: 16px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); transition: transform .12s ease-out, box-shadow .12s; }
.cpay-pack:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.cpay-pack .casino-coin { width: 30px; height: 30px; }
.cpay-pack strong { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.cpay-pack small { font-size: var(--t-md); color: var(--muted); font-variant-numeric: tabular-nums; }
.cpay-pack em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: var(--r-pill); background: #17804a; color: #fff; font-style: normal; font-size: var(--t-xs); font-weight: 800; white-space: nowrap; }
.cpay-pack.best { border-color: #17804a; box-shadow: inset 0 0 0 1px #17804a; }
.cpay-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cpay-points li { display: grid; gap: 1px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--paper-2); }
.cpay-points span { color: var(--muted); font-size: var(--t-md); line-height: 1.45; }
.cpay-checks { display: grid; gap: 6px; }
.cpay-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--r-sm); background: var(--paper-2); font-weight: 600; cursor: pointer; }
.cpay-check input { width: 20px; height: 20px; accent-color: #17804a; flex: none; }
.cpay-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cpay-amount { font-variant-numeric: tabular-nums; }
.cpay .casino-big { margin: 0; }
.cpay-today { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--t-md); }
.cpay-list { padding-left: 0; list-style: none; }
.cpay-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cpay-list li span { min-width: 0; }
.cpay-list a { font-weight: 800; color: #17804a; font-variant-numeric: tabular-nums; }
.cpay-break { background: var(--paper-2); color: var(--muted); }
.cpay-cage { font-size: var(--t-lg); font-variant-numeric: tabular-nums; margin-right: auto; }
.ctl-cpay { display: grid; gap: 10px; justify-items: start; }
.ctl-cpay p { margin: 0; }
@media (max-width: 520px) {
  .cpay-packs { grid-template-columns: 1fr; }
  .cpay-pack { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; min-height: 64px; padding: 12px 14px; text-align: left; }
  .cpay-pack em { left: auto; right: 12px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cpay-pack { transition: none; } .cpay-pack:hover { transform: none; } }
/* CASINO-PAY end */

/* GROW: community islands (ui/islands-panel.js in the Owner panel, games/islands.js: the community board and a lead's Island tools) */
.grow-input { height: 38px; min-width: 0; max-width: 260px; padding: 0 12px; border: 1px solid var(--c-line, #d9d2c2); border-radius: 10px; background: var(--c-panel, #fff); color: inherit; font: inherit; font-size: var(--t-sm, 14px); }
.grow-input:focus { border-color: var(--c-cobalt, #2f4bff); outline: none; }
.grow-make .grow-input { width: 100%; max-width: 420px; margin: 4px 0 6px; }
.grow-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.grow-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.grow-pick { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 8px; padding: 6px 12px !important; cursor: pointer; }
.grow-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-cobalt, #2f4bff); }
.grow-isle .ctl-acts { align-items: center; }
.grow-isle .ctl-tag .ctl-x { margin-left: 6px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 2px; }
.grow-board, .grow-tools { padding: 2px 8px 6px; }
.grow-board blockquote.grow-board-line { margin: 10px 0; padding: 12px 14px; border-left: 4px solid var(--cobalt); border-radius: 8px; background: var(--paper-2); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.grow-board-edit { display: grid; gap: 6px; margin: 12px 0 8px; font-size: 13px; color: var(--muted); }
.grow-board-edit textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line, #e6dccb); border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; resize: vertical; }
.grow-board .row, .grow-tools .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.grow-tools-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.grow-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); }
.grow-tools-row > span { flex: 1 1 120px; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 600px) { .grow-input { max-width: none; width: 100%; height: 44px; } .grow-tools-row .btn { min-height: 40px; } }
/* GROW end */
/* ISLANDS: claims and gates (ui/islands-panel.js), the Signal Grid line in the rail (games/signal.js), the board sheet's gate line */
.grow-access { display: grid; gap: 8px; margin: 4px 0 8px; }
.grow-min { display: grid; gap: 4px; max-width: 220px; font-size: 13px; color: var(--muted); }
.grow-claim, .grow-gate-edit { display: grid; gap: 8px; width: 100%; padding: 10px 12px; margin-top: 6px; border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.grow-claim .ctl-h, .grow-gate-edit .ctl-h { color: var(--ink); }   /* the light card: dark headings and ghost buttons */
.grow-claim .ctl-btn.ghost, .grow-gate-edit .ctl-btn.ghost { color: var(--ink); border-color: rgba(29, 33, 38, .35); }
.grow-claim .ctl-chip, .grow-gate-edit .ctl-chip { color: #f7f2e7; }   /* the chips keep the panel's dark pill and light type */
.grow-unclaimed .ctl-who strong::after { content: ' \00b7 '; color: var(--muted); font-weight: 400; }
.grow-world .switch-row { margin-top: 4px; }
.grow-gate { padding: 10px 12px; border-radius: 10px; background: var(--paper-2); font-size: 14px; }
.signal-hud { white-space: normal; max-width: min(92vw, 560px); text-align: center; line-height: 1.3; box-shadow: var(--shadow), inset 0 0 0 2px rgba(25, 255, 122, .55); }
@media (max-width: 640px) { .signal-hud { max-width: calc(100vw - 32px); } }
/* ISLANDS end */
/* LAND2: the starter picker on the claim sheet and the plot menu (kind chips, color swatches, the way it faces) */
.sheet-inner .land-h { margin-top: 20px; }
.land-starter .land-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.land-starter .land-kinds button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.land-starter .land-kinds button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.land-starter .land-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.land-starter .land-swatches button { width: 32px; height: 32px; border-radius: var(--r-sm); border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); cursor: pointer; padding: 0; }
.land-starter .land-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.land-starter .land-faces button { text-transform: capitalize; }
.land-starter .land-span { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 13px; font-weight: 600; }
.land-starter .land-span input { width: 20px; height: 20px; flex: none; }
.sheet-inner .land-join { background: #e8eeff; }
@media (pointer: coarse) { .land-starter .land-swatches button { width: 38px; height: 38px; } }

/* PORT-PAY (live release/world-payments, October 14): the persistent Link wallet button for anyone not linked, on every
   layout down to the smallest phone (the locked chat folds to an icon beside the minimap so the button never sits behind it).
   .world-wallet-picker styles the release's wallet picker (net/wallet-picker.js, built into the release only). */
/* A single visible account action, including the smallest phone layout. */
.top-actions .link-wallet { background: #2054bd; color: #fff; white-space: nowrap; flex: none; }
.top-actions .link-wallet[hidden] { display: none; }
.world-wallet-picker { width: min(360px, calc(100vw - 32px)); box-sizing: border-box; max-height: 85dvh; overflow: auto; padding: 24px; border: 1px solid #cbd0db; border-radius: 16px; color: #202532; background: #fffdf8; font: inherit; box-shadow: 0 18px 60px #0003; }
.world-wallet-picker::backdrop { background: #17203199; }
.world-wallet-picker h2 { font-size: 22px; margin: 0 0 18px; }
.world-wallet-options { display: grid; gap: 10px; margin-bottom: 16px; }
.world-wallet-picker button, .world-wallet-options a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid #cbd0db; border-radius: 10px; background: #fff; color: #202532; font: inherit; text-decoration: none; cursor: pointer; }
.world-wallet-picker button:focus-visible, .world-wallet-options a:focus-visible { outline: 3px solid #2054bd; outline-offset: 2px; }
@media (max-width: 600px) {
 body:has(#link-wallet:not([hidden])) { --rail-top: calc(var(--top) + var(--hud-h) * 2 + 16px); }
 .hud-top:has(.link-wallet:not([hidden])) { flex-wrap: wrap; gap: 6px; }
 .hud-top:has(.link-wallet:not([hidden])) { z-index: 4; }
 .hud-top:has(.link-wallet:not([hidden])) .top-actions { width: 100%; justify-content: flex-end; }
 .hud-top:has(.link-wallet:not([hidden])) #open-profile { display: none; }
 .top-actions .link-wallet { padding: 0 12px; font-size: 13px; }
 .chat.locked { top: var(--top); bottom: auto; left: calc(var(--left) + var(--hud-h) + 8px); width: var(--hud-h); height: var(--hud-h); max-height: none; padding: 0; border-radius: 50%; }
 .chat.locked .chat-lock-text, .chat.locked .chat-lock .btn { display: none; }
 .chat.locked .chat-lock-ic { width: var(--hud-h); height: var(--hud-h); background: none; }
}
/* CHAT (ui/chat.js; owner, October 14: "chat window should be easier to work and slightly bigger, should be clean everytime
   you come into the server, should be bottom first"). On a computer one steady size, 340 x 300 (320 or 300 wide in narrower windows) (was 300 wide and up to 250
   tall, growing with its lines), so the lines sit on the input from the first one; a phone held upright gets up to 330
   (was 300) under the top bar, still clear of the joystick, Jump and the emotes. A bigger input and Send, a focus ring while
   the keys are the chat's, an empty-window line, and a New messages pill while you read back. */
:root { --chat-h: min(300px, 44vh); }
.chat-scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 0 8px; }
.chat-list { display: flex; flex-direction: column; margin: 0; min-height: 0; overflow-anchor: none; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent; }
.chat-list > li { flex: none; padding: 2px 0; }
.chat-list > li:first-child { margin-top: auto; }   /* bottom first: a few lines sit on the input, the newest last */
.chat-list:empty::after { content: attr(data-empty); margin-top: auto; padding: 0 4px 2px 0; font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
.chat-new { position: absolute; z-index: 1; left: 50%; bottom: 4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--cobalt-ink); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(30, 24, 10, .24); cursor: pointer; }
.chat-new:hover { background: var(--cobalt); }
.chat-new svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chat-form { gap: 8px; }
.chat-form input { width: 0; height: 40px; padding: 0 12px; font-size: 14px; transition: border-color .15s, box-shadow .15s; }   /* width 0: it fills the row and never pushes Send out of the panel */
.chat-body, .chat-scroll { min-width: 0; }
.chat-form input:focus { outline: none; border-color: var(--cobalt-ink); box-shadow: 0 0 0 3px rgba(47, 75, 255, .2); }
.chat-form button { height: 40px; padding: 0 18px; font-size: 14px; }
.chat-form button:hover { background: #000; }
.chat.typing { box-shadow: var(--shadow), 0 0 0 2px var(--cobalt); }
@media (min-width: 641px) and (pointer: fine) {
  .chat:not(.min):not(.locked) { height: var(--chat-h); max-height: none; }
  .voice-panel { bottom: calc(var(--bottom) + var(--chat-h) + 8px); }
}
@media (min-width: 1180px) and (pointer: fine) { .chat:not(.locked), .voice-panel { width: 340px; } }
@media (min-width: 1101px) and (max-width: 1179px) and (pointer: fine) { .chat:not(.locked), .voice-panel { width: 320px; } }   /* the emote bar (centred) keeps clear */
@media (min-width: 920px) and (max-width: 1100px) and (pointer: fine) { :root { --chat-w: 320px; } }   /* VISUAL-QA block: 300 before, which stays below 920 px (the emotes sit between the chat and the Controls) */
@media (max-width: 640px), (pointer: coarse) {
  .chat-form input { font-size: 16px; }   /* 16 px: a phone does not zoom the page when the input takes focus */
  .chat-new { height: 40px; padding: 0 16px 0 12px; font-size: var(--t-md); }
}
@media (max-width: 640px) and (min-height: 501px) {
  .chat:not(.min):not(.locked) { height: min(330px, 45dvh); }
  body.chat-open .rail { top: calc(var(--rail-top) + min(330px, 45dvh) + 8px); }
  .voice-panel { top: calc(var(--rail-top) + min(330px, 45dvh) + 8px); }
}
/* CHAT end */
/* RINGS: the start ring line in the rail (games/rings.js): a sentence that wraps on a phone, edged in the ring's gold */
.ring-hud { white-space: normal; max-width: min(92vw, 560px); text-align: center; line-height: 1.3; box-shadow: var(--shadow), inset 0 0 0 2px rgba(255, 210, 58, .55); }
@media (max-width: 640px) { .ring-hud { max-width: calc(100vw - 32px); } }
/* RINGS end */

/* INVENTORY: the profile's inventory and unlock tracker (ui/inventory.js) */
.pf-inventory { display: grid; gap: 8px; margin: 14px 0; }
.inv-list { display: grid; gap: 6px; }
.inv-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .04); }
.inv-row.done { background: rgba(242, 194, 48, .12); }
.inv-main { display: grid; gap: 2px; min-width: 0; }
.inv-main strong { font-size: 14px; }
.inv-line { font-size: 12px; opacity: .75; }
.inv-prog { display: grid; gap: 3px; justify-items: end; min-width: 92px; }
.inv-prog small { font-size: 11px; opacity: .8; }
.inv-bar { display: block; width: 92px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.inv-bar i { display: block; height: 100%; background: #2f4bff; border-radius: 3px; }
.inv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.inv-tabs button small { font-size: 11px; font-weight: 700; opacity: .65; }
.inv-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.inv-tabs button[aria-selected="true"] small { opacity: .85; }
.inv-hide { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.inv-chip { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--inv-chip, #9aa3ad); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; vertical-align: 2px; }
.inv-row.done .inv-main strong { opacity: .8; }
@media (pointer: coarse) { .inv-tabs button { min-height: 44px; } }
/* INVENTORY end */
/* SIGNIN: Link wallet and Link X side by side wherever the game asks to sign in (ui/sign-in.js), and the welcome card's
   three choices (ui/onboard.js: play as a guest, Link wallet, Link X; both sign-ins look the same) */
.sign-in-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.sign-in-ways .btn { width: 100%; justify-content: center; }
.callout .sign-in-note { margin: 6px 0 0; color: var(--muted); font-size: 12px !important; line-height: 1.4; }
.ob-choice[data-choice="wallet"] .ob-ic, .ob-choice[data-choice="x"] .ob-ic { background: var(--ink); color: #fff; }
/* SIGNIN end */

/* PLOT-NFT: NFT displays on plots (world/plotnft.js): the picker, a display's sheet and a visitor's look */
.pnft .pnft-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pnft .pnft-kinds button { display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; color: var(--ink); cursor: pointer; }
.pnft .pnft-kinds button strong { font-size: 13px; }
.pnft .pnft-kinds button small { font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.25; }
.pnft .pnft-kinds button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pnft .pnft-kinds button[aria-pressed="true"] small { color: #d5d9e0; }
.pnft .pnft-cols { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pnft .pnft-cols button { min-height: 32px; padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.pnft .pnft-cols button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pnft .pnft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: min(46dvh, 420px); overflow-y: auto; padding: 2px; }
.pnft .pnft-tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.pnft .pnft-tile[aria-pressed="true"] { border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt); }
.pnft .pnft-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--paper-2); overflow: hidden; }
.pnft .pnft-art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pnft .pnft-noart { font-weight: 800; font-size: var(--t-md, 15px); color: var(--ink); }
.pnft .pnft-label { font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.pnft .pnft-pick > .btn { margin-top: 8px; }
.pnft .pnft-caption { width: 100%; box-sizing: border-box; }
.pnft .btn.danger { color: #b3261e; }
.pnft-manager-card{gap:6px;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);box-shadow:none}
.pnft-manager-card h3{margin:0 0 4px;font-size:16px;color:var(--ink);text-transform:none;letter-spacing:normal}
.pnft-manager-card p{margin:4px 0;overflow-wrap:anywhere}
.pnft-manager-card .actions{margin-top:12px}
.pnft-current{padding:10px 12px;border-left:3px solid var(--cobalt-ink);background:var(--paper-2);font-weight:650}
.pnft-manager-summary,.pnft-current{display:flex;align-items:center;gap:12px;min-width:0}
.pnft-manager-thumb{width:56px;height:56px;flex:0 0 56px;object-fit:cover;image-rendering:pixelated;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.pnft-change-nft{margin-top:16px;border-top:1px solid var(--line)}
.pnft-change-nft summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:650}
.pnft-change-nft summary::after{content:'+';margin-left:auto;font-size:22px;font-weight:400}
.pnft-change-nft[open] summary::after{content:'-'}
.pnft :is(.actions .btn,.pnft-caption){min-height:44px}
.pnft-info .pnft-show { display: grid; gap: 10px; justify-items: center; margin: 12px 0 4px; }
.pnft-info .pnft-big { width: min(100%, 260px); aspect-ratio: 1; border-radius: var(--r-md); background: var(--paper-2); object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 6px #6b4528, 0 0 0 8px var(--gold); margin: 8px; }
.pnft-info .pnft-empty { background: #efe6d2; }
.pnft-info .pnft-line { margin: 4px 0 0; padding: 6px 14px; border-radius: var(--r-sm); background: #c9a457; color: #2a2116; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.pnft-info .pnft-holder { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.pnft-info .pnft-holder strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.pnft-info .pnft-holder .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (pointer: coarse) { .pnft .pnft-cols button { min-height: 44px; } .pnft .pnft-kinds button { min-height: 56px; } }
@media (max-width: 420px) { .pnft .pnft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* PLOT-NFT end */

/* GARAGE2: the Garage's Studio and Add-ons tabs (ui/studio.js, ui/shop.js), pet looks, a holder's name tag color ---------- */
.garage .gar-tabs { flex-wrap: wrap; }
.garage .gar-tabs button { min-width: 0; padding: 0 4px; white-space: nowrap; font-size: 13px; }
.gar-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 0; }
.gar-filters button, .st-ride, .st-preset { min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.gar-filters button[aria-pressed="true"], .st-ride[aria-pressed="true"], .st-preset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.studio { display: grid; gap: 12px; padding: 10px 0 2px; align-content: start; min-width: 0; }
.gar-right .studio { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.st-rides, .st-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-preset small { margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1f6b3a; }
.st-preset[aria-pressed="true"] small { color: #8ff0b0; }
.st-sec h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.st-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.st-opt[aria-pressed="true"] { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); background: #eef1ff; }
.st-opt.locked { color: var(--muted); background: var(--paper-2); }
.st-opt.locked[aria-pressed="true"] { background: #f3eedf; }
.st-lock { font-size: 10px; }
.st-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.st-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-sw { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; flex: none; }
.st-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--cobalt); }
.st-sw.factory { width: auto; padding: 0 10px; border-radius: 999px; background: var(--paper-2); font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.st-sub { font-size: 12px; font-weight: 700; color: var(--muted); }
.st-plate, .st-num { font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .08em; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 9.5em; text-transform: uppercase; }
.st-num { width: 5em; letter-spacing: 0; }
.st-carhint { margin: 0; }
.pet-look { padding: 6px 0 4px; }
.gar-info .pet-look .st-sec + .st-sec { margin-top: 2px; }
@media (max-width: 760px) {
  .gar-right .studio { max-height: none; overflow: visible; padding-right: 0; }
  .garage.in-studio .gar-left { position: sticky; top: -12px; z-index: 3; margin: 0 -12px; padding: 0 12px 8px; background: #f7f2e7; box-shadow: 0 10px 12px -12px rgba(30, 24, 10, .45); }   /* the turntable stays in view while you pick */
  .garage.in-studio .gar-stage { height: 168px; }
  .garage.in-studio .gar-info { padding-top: 8px; }
  .garage.in-studio .gar-info .gar-blurb, .garage.in-studio .gar-info .gar-hint + .gar-hint { display: none; }
}
@media (pointer: coarse) { .gar-filters button, .st-ride, .st-preset, .st-opt, .garage .gar-acts .btn, .st-plate, .st-num { min-height: 44px; } .st-sw { width: 44px; height: 44px; } .st-sw.factory { height: 44px; } }
.tag.player.tc:not(.ink-plate):not(.gold-plate) { background: color-mix(in srgb, var(--tc) 18%, #fffbf2); color: color-mix(in srgb, var(--tc) 72%, #1d2126); }
.tag.player.tc { box-shadow: 0 0 0 2px var(--tc), 0 1px 3px rgba(0, 0, 0, .15); }
/* GARAGE2 end */
/* DOORS: a door you walk through says "Walk in" (or "Walk out"); E is only the second way, small, on a keyboard
   (world/places.js, world/doors.js). Action doors (stalls, kiosks, boards) keep E first. */
.door-prompt.walk button > kbd { display: none; }
.door-prompt.walk button { padding-left: 14px; }
.door-prompt .door-how { margin-left: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font-size: var(--t-sm); font-weight: 800; vertical-align: 1px; }
.door-prompt .door-or { margin-left: 8px; font-size: var(--t-xs); font-weight: 600; opacity: .62; }
@media (pointer: coarse) {
  .door-prompt.walk button { padding: 0; }
  .door-prompt .door-or { display: none; }
  .door-prompt .door-how { display: table; margin: 5px 0 0 auto; }
}
/* DOORS end */

/* BOTS: house bot choices before a game (games/bots.js), the Bots tab (ui/owner-panel.js), bot marks on tags and boards */
.bot-pick { display: grid; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: var(--r-lg, 14px); background: rgba(47, 75, 255, .06); box-shadow: inset 0 0 0 1px rgba(47, 75, 255, .22); }
.bot-pick .bot-lead { margin: 0; font-size: var(--t-sm, 13px); color: var(--muted); line-height: 1.35; }
.bot-pick .bot-row { display: grid; grid-template-columns: minmax(84px, auto) 1fr; align-items: center; gap: 10px; }
.bot-pick .bot-label { font-weight: 700; font-size: var(--t-sm, 13px); }
.bot-pick .seg button { min-height: 40px; }
.bot-pick .seg button:disabled { opacity: .45; cursor: not-allowed; }
.bot-pick.off p { margin: 0; color: var(--muted); font-size: var(--t-sm, 13px); }
.bot-panel { order: 3; display: grid; gap: 4px; width: min(440px, calc(100vw - 24px)); background: var(--ink); color: #fff; padding: 10px 12px; border-radius: 18px; box-shadow: var(--shadow), inset 0 0 0 2px rgba(127, 162, 255, .55); }
.bot-panel[hidden] { display: none; }
.bot-panel .bot-title { font-size: var(--t-sm, 13px); text-align: center; letter-spacing: .01em; }
.bot-panel .bot-pick { margin: 0; padding: 4px 0 0; background: none; box-shadow: none; }
.bot-panel .bot-pick .bot-lead, .bot-panel .bot-pick.off p { color: #c9d1da; }
.bot-panel .seg button { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); min-height: 38px; padding: 6px 8px; }
.bot-panel .seg button[aria-pressed="true"] { background: #ffd23a; color: #1d2126; border-color: #ffd23a; }
@media (max-width: 420px) { .bot-pick .bot-row { grid-template-columns: 1fr; gap: 4px; } .bot-panel { padding: 8px 10px; } }
.tag.player.bot { box-shadow: 0 0 0 2px #8f86ff; }
.bot-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: #8f86ff; color: #0f0b1b; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .03em; vertical-align: 1px; }
.ctl-note { margin: 0 0 10px; color: var(--c-muted); font-size: var(--t-sm); line-height: 1.45; max-width: 72ch; }
.ctl-bots-body { display: grid; gap: 10px; }
.ctl-bots-body.off .ctl-bot-row:not(:first-child) { opacity: .55; }
.ctl-bot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-sm); color: var(--c-text); }
.ctl-bot-row select { min-width: 72px; }
.ctl-bot-row .ctl-seg button:disabled { cursor: default; }
.ctl-bot-row .ctl-seg button[aria-pressed="true"]:disabled { background: var(--c-panel-2); color: var(--c-text); box-shadow: inset 0 0 0 1px #313a4a; opacity: 1; }
.ctl-bots-by { margin: 0 0 10px; }
@media (pointer: coarse) { .ctl-bot-row select { min-height: 44px; } }
/* BOTS end */
/* SKILL: Paper Park's games (games/skill-hud.js lays the row out; games/putt.js, stack.js, shot.js) */
.skill-hud > * { position: absolute; z-index: 3; }
.skill-pad { position: absolute; z-index: 2; touch-action: none; cursor: crosshair; }
.skill-pad[hidden], .skill-hud[hidden] { display: none; }
.skill-leave, .skill-action { border: 0; cursor: pointer; font: inherit; font-weight: 800; border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: 44px; min-height: 44px; }
.skill-leave { background: var(--paper); color: var(--ink); font-size: var(--t-md); }
.skill-action { background: var(--cobalt); color: #fff; font-size: 20px; letter-spacing: .02em; }
.skill-action:active { transform: translateY(1px); background: var(--cobalt-ink); }
.skill-status { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 14px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.skill-status strong { font-size: var(--t-lg); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-status span { font-size: var(--t-sm); color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skill-meter { height: 10px; background: rgba(255, 251, 242, .85); border-radius: 999px; box-shadow: var(--shadow); overflow: hidden; }
.skill-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fcf6a, #f2c94c 60%, #e0574c); border-radius: inherit; }
.skill-cross { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 33, 38, .55); pointer-events: none; z-index: 3; }
.skill-cross::after { content: ''; position: absolute; left: 11px; top: 11px; width: 2px; height: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(29, 33, 38, .6); }
body.skill-on .emotes, body.skill-on .touch, body.skill-on .help, body.skill-on #door-prompt, body.skill-on .chat, body.skill-on .minimap, body.skill-on .brrr-entry, body.skill-on .brrr-mini, body.skill-on .brrr-arrow, body.skill-on .waypoint, body.skill-on .pw-prompt, body.skill-on .fish-hud { display: none; }
@media (pointer: coarse) { .skill-status strong { font-size: var(--t-md); } .skill-action { font-size: 18px; } }
body.skill-on .tag.you { visibility: hidden; }   /* your own tag would float in the middle of the game */
/* SKILL end */
/* PERF2 (HANDOFF 78): name tags and signs move every frame with the camera; on their own layer a move is composited, not
   painted again (the tags' shadows and text were repainted on the main thread each frame, worst on phones) */
.tag { will-change: transform; }
/* CAMERA (HANDOFF 103): Settings as one panel in plain sections, a row of section names at the top; first person (the phone's
   eye button beside Jump, your own tag hidden while you look out of your eyes) */
#sheet.st-sheet { width: min(440px, calc(100vw - 24px)); }
.st2 .st-jump { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; margin: 0 -22px 4px; padding: 8px 18px; background: var(--paper); box-shadow: 0 6px 10px -8px rgba(30, 24, 10, .25); overflow-x: auto; scrollbar-width: none; }
.st2 .st-jump::-webkit-scrollbar { display: none; }
.st2 .st-jump button { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; min-height: 48px; padding: 5px 6px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.st2 .st-jump button:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.st2 .st-jump button[aria-current="true"] { background: #fff; color: var(--cobalt-ink); box-shadow: 0 1px 3px rgba(30, 24, 10, .12); }
.st2 .st-jump button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.st2 .st-jump .st-ic, .st2 .st-jump .st-ic svg { width: 20px; height: 20px; }
.st2 .st-sec { margin: 16px 0 0; }
.st2 .st-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--t-lg); font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--ink); }
.st2 .st-h .st-ic { color: var(--cobalt-ink); }
.st2 .st-set, .st2 .st-switch2, .st2 .st-lang, .st2 .st-who { background: #fff; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; margin: 0 0 8px; }
.st2 .st-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.st2 .st-name { font-size: var(--t-md); font-weight: 800; color: var(--ink); }
.st2 .st-line { margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
.st2 .st-seg { margin-top: 8px; }
.st2 .st-seg button { min-height: 40px; }
.st2 .st-now { margin: 6px 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--cobalt-ink); }
.st2 .st-more { margin-top: 8px; }
.st2 .st-more summary { cursor: pointer; font-size: var(--t-sm); font-weight: 700; color: var(--cobalt-ink); }
.st2 .st-more[open] summary { margin-bottom: 6px; }
.st2 .st-switch2 { margin-top: 0; }
.st2 .st-switch2 small { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
.st2 .st-meter { margin: 2px 2px 0; font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.st2 .sound-panel.docked .st-line { margin: -2px 0 4px; }
.st2 .st-keys { background: #fff; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); padding: 12px 14px; margin: 0 0 8px; }
.st2 .st-keys ul { margin-top: 4px; }
.st2 .st-acts { margin: 0 0 4px; }
.st2 .st-reset { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.st2 .st-reset-btn[data-sure] { background: #8a2b1f; border-color: #8a2b1f; color: #fff; }
@media (pointer: coarse) { .st2 .st-jump button { min-height: 52px; } .st2 .st-seg button { min-height: 44px; } .st2 .st-more summary { padding: 12px 0; } .st2 .st-keys { display: none; } }
.view-btn { position: absolute; z-index: 2; right: calc(var(--jump-right) + var(--jump) + 14px); bottom: calc(var(--jump-bottom) + var(--jump) - 52px); width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; }
.view-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body.cam-first .view-btn { background: var(--ink); color: #fff; }
body.cam-first .tag.you { visibility: hidden; }
body.pb-on .view-btn { display: none; }
/* Printer Putt's View hole: a small pill at the play area's top left (games/skill-hud.js places it) */
.skill-view { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: rgba(255, 251, 242, .94); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 800; cursor: pointer; }
.skill-view[hidden] { display: none; }
.skill-view:active { transform: translateY(1px); }
@media (pointer: coarse) { .skill-view { min-height: 44px; } }
/* CAMERA end */
/* CASINO3: Roulette and Baccarat at the table dock (games/casino3.js), the Whale Room's host, the Baccarat totals on the
   felt. The dock keeps its rows on a phone: one column of big targets, the numbers in nine columns, and it scrolls inside
   itself (never the page) when a tab is taller than the room left under the top bar. */
.casino-tab { flex: 1 1 0; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); color: #f3ece0; font: inherit; font-weight: 700; font-size: var(--t-sm); cursor: pointer; white-space: nowrap; }
.casino-tab.on { background: #d9a93a; color: #1d2126; }
.casino-row.rl-top { display: flex; flex-wrap: wrap; gap: 6px; }
.casino-chips { display: inline-flex; gap: 6px; }
.rl-tabs { flex: 1 1 200px; display: flex; gap: 6px; }
.casino-row.rl-out { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.casino-row.rl-out .casino-bet { min-height: 46px; padding: 5px 2px; }
.casino-bet.rl-red { background: #a3202a; }
.casino-bet.rl-black { background: #15181d; }
.casino-bet.rl-d1, .casino-bet.rl-d2, .casino-bet.rl-d3, .casino-bet.rl-c1, .casino-bet.rl-c2, .casino-bet.rl-c3 { background: #17633f; }
.casino-bet.hit { box-shadow: inset 0 0 0 2px #f0cd6a, 0 0 14px rgba(240, 205, 106, .55); }
.casino-row.rl-nums { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); grid-template-rows: repeat(3, 38px); gap: 3px; }
.rl-num { grid-column: var(--c); grid-row: var(--r); position: relative; border: 1px solid rgba(243, 236, 224, .45); border-radius: 6px; color: #fff; font: inherit; font-weight: 800; font-size: var(--t-sm); cursor: pointer; padding: 0; min-width: 0; }
.rl-num.red { background: #b3261e; }
.rl-num.black { background: #15181d; }
.rl-num.green { background: #18a85a; }
.rl-num.on { box-shadow: inset 0 0 0 2px #3dff8a; }
.rl-num.hit { box-shadow: inset 0 0 0 2px #f0cd6a, 0 0 12px rgba(240, 205, 106, .7); }
.rl-num em { position: absolute; right: 1px; bottom: 1px; font-style: normal; font-size: 10px; line-height: 1; padding: 1px 3px; border-radius: 4px; background: #d9a93a; color: #1d2126; }
.rl-num:disabled { opacity: .45; cursor: default; }
.rl-recent, .bac-road { margin-left: auto; display: inline-flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.rl-recent i, .bac-road i { font-style: normal; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rl-recent i.red, .bac-road i.bac-banker { background: #b3261e; }
.rl-recent i.black { background: #15181d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.rl-recent i.green, .bac-road i.bac-tie { background: #18a85a; }
.bac-road i.bac-player { background: #2338cc; }
.casino-row.bac-bets { display: grid; grid-template-columns: 1fr .8fr 1fr; }
.casino-bet.bac-player { background: #2338cc; }
.casino-bet.bac-banker { background: #a3202a; }
.casino-bet.bac-tie { background: #17633f; }
.bac-hand small { font-size: var(--t-xs); font-weight: 800; color: #c9c2b0; margin-right: 2px; }
.bac-hand.bac-player .casino-total { background: #9fb4ff; }
.bac-hand.bac-banker .casino-total { background: #ffb3a6; }
.tag.casino-sum.bac-player { background: #2338cc; color: #fff; }
.tag.casino-sum.bac-banker { background: #a3202a; color: #fff; }
.tag.casino-host { max-width: 260px; white-space: normal; text-align: center; font-size: var(--t-sm); line-height: 1.35; padding: 8px 12px; background: rgba(11, 18, 48, .92); color: #dff7ff; box-shadow: inset 0 0 0 1px rgba(159, 232, 255, .5); }
@media (max-width: 640px) {
  .casino-dock { max-height: 72dvh; overflow-y: auto; overscroll-behavior: contain; }
  .casino-row.rl-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .casino-chips { flex: 1 1 100%; } .casino-chips .casino-chip-btn { flex: 1 1 0; min-width: 0; }
  .casino-row.rl-nums { grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 40px; }
  .rl-num { grid-column: auto; grid-row: auto; }
  .rl-num.green { grid-column: 1 / -1; }
  .rl-recent, .bac-road { max-width: 100%; margin-left: 0; }
}
@media (pointer: coarse) {
  .casino-tab, .casino-row.rl-out .casino-bet, .casino-row.bac-bets .casino-bet { min-height: 48px; }
  .casino-row.rl-nums { grid-auto-rows: 44px; }
  .rl-num { min-height: 44px; }
}
@media (pointer: coarse) and (min-width: 641px) { .casino-row.rl-nums { grid-template-rows: repeat(3, 44px); } }
.casino-bots-fold { display: grid; gap: 6px; }
.casino-bots-sum { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: rgba(185, 195, 255, .14); color: #d6dcff; font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.casino-bots-sum i { font-style: normal; }
@media (pointer: coarse) { .casino-bots-sum { min-height: 44px; } }
.casino-dock > *, .casino-rows > * { min-width: 0; }   /* a wide row never widens the dock past the screen */
.bac-hands-row .casino-hands { display: flex; flex-wrap: wrap; gap: 10px; }
.bac-hands-row .casino-hand { flex-wrap: nowrap; }
/* CASINO3 end */
/* SOCIAL (owner, October 15: "people able to press each other's name, send DMs"; "public chat should be easier,
   clean, easy to use"; "different hang out rooms"; "a room that live streams TV with channels"; "the hangout list needs to be
   able to be hidden or opened, it covers the map"). The chat's tabs (Plaza, the room you are in, Messages) and its lines
   (a name is a button, Reply, Message, a mention of you in gold), the Messages tab (ui/dm.js), Message on a player card, the
   hangout list (ui/hangouts.js: under the brand on a computer, above its button bottom right on a phone, never over the map),
   the TV window (ui/tv.js) and the channel board, and the Owner panel's TV lounge tab. */
.chat-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-size: var(--t-md); font-weight: 700; white-space: nowrap; cursor: pointer; flex: none; }
.chat-tab strong { font-size: inherit; font-weight: inherit; }
.chat-tab:hover { background: var(--paper-2); color: var(--ink); }
.chat-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.chat-tab.fresh::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 2px var(--paper); }
.chat-tab[aria-selected="true"].fresh::after { display: none; }
.chat-tab .chat-tab-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.chat-tab .chat-badge, .chat-badge.dm { background: var(--cobalt-ink); }
.chat .chat-tab[aria-selected="true"] .chat-badge { box-shadow: 0 0 0 2px var(--ink); }
.chat header > .chat-badge:not(.dm) { display: none; }   /* the tabs show where new lines are; folded, the header keeps its count */
.chat.min header > .chat-badge:not([hidden]) { display: inline-grid; }
.chat-toggle .chat-badge.dm { background: var(--cobalt-ink); }
.chat-list button.who { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--cobalt-ink); cursor: pointer; text-align: left; }
.chat-list button.who:hover { text-decoration: underline; text-underline-offset: 2px; }
.chat-list button.who.team { color: #b3261e; }
.chat-list .at { color: var(--cobalt-ink); font-weight: 600; }
.chat-list li.mention { background: linear-gradient(90deg, rgba(217, 169, 58, .22), rgba(217, 169, 58, .06)); box-shadow: inset 3px 0 0 var(--gold); border-radius: 6px; padding-left: 7px; margin-left: -4px; }
.chat-list .acts button[data-act="reply"], .chat-list .acts button[data-act="message"] { background: #e9edff; color: var(--cobalt-ink); }
/* the Messages tab */
.chat-dm { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat.on-dm .chat-discord, .chat.on-dm .voice-row { display: none; }   /* the Messages tab keeps its height for the conversation */
.dm-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 2px 2px 0; overscroll-behavior: contain; scrollbar-width: thin; }
.dm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dm-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dm-row:hover { background: var(--paper-3); }
.dm-row.unread { background: #e9edff; }
.dm-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-md); }
.dm-row-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row-top time, .dm-line time { margin-left: auto; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.dm-row-text { grid-column: 1; font-size: var(--t-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row .chat-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dm-tag { font-size: 10px; font-weight: 700; color: #8f1d17; background: #fde7e4; border-radius: 6px; padding: 1px 5px; }
.dm-on { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fa46a; flex: none; }
.dm-empty, .dm-note { margin: 8px 2px; font-size: var(--t-sm); line-height: 1.45; color: var(--muted); }
.dm-note { font-size: var(--t-xs); }
.dm-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dm-head { display: flex; align-items: center; gap: 6px; padding: 4px 0 6px; border-bottom: 1px solid var(--line); flex: none; }
.dm-back { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); cursor: pointer; padding: 0; }
.dm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; border: 0; background: none; padding: 0 4px; font: inherit; font-weight: 800; font-size: var(--t-md); color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-name:hover { color: var(--cobalt-ink); }
.dm-tools { margin-left: auto; display: inline-flex; gap: 4px; flex: none; }
.dm-tool { height: 28px; padding: 0 9px; border: 0; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.dm-tool:hover { background: var(--paper-3); }
.dm-tool:disabled { opacity: .6; cursor: default; }
.dm-blocked { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-md); background: #fde7e4; color: #6d1c16; font-size: var(--t-sm); line-height: 1.4; }
.dm-lines { list-style: none; margin: 0; padding: 8px 2px 4px 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; scrollbar-width: thin; }
.dm-lines > :first-child { margin-top: auto; }
.dm-lines:empty::after { content: attr(data-empty); margin-top: auto; font-size: var(--t-sm); color: var(--muted); }
.dm-line { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; }
.dm-line.mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-bubble { padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: var(--paper-2); font-size: var(--t-md); line-height: 1.38; overflow-wrap: anywhere; }
.dm-line.mine .dm-bubble { background: var(--cobalt-ink); color: #fff; border-radius: 14px 14px 4px 14px; }
.dm-line time { margin: 0 0 2px; }
.dm-lines .sys { color: var(--muted); font-style: italic; font-size: var(--t-sm); }
/* Message on a player card */
.pc-message { display: flex; gap: 8px; margin-top: 12px; }
.pc-message .btn { display: inline-flex; align-items: center; gap: 8px; }
.pc-message .btn:first-child { flex: 1; justify-content: center; }
.pc-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
/* the hangout list: under the brand on a computer */
.hang { top: calc(var(--rail-top) + 4px); left: var(--left); width: 252px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.hang > * { pointer-events: auto; }
.hang-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.hang-btn:hover { background: #fff; }
.hang-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hang-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--muted); font-size: var(--t-xs); display: inline-grid; place-items: center; }
.hang-count.some { background: var(--cobalt-ink); color: #fff; }
.hang.open .hang-btn { background: var(--ink); color: #fff; }
.hang.open .hang-count:not(.some) { background: rgba(255, 255, 255, .16); color: #fff; }
.hang-list { width: 100%; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hang-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hang-room { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-md); background: var(--paper-2); }
.hang-room.here { background: #e9edff; box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.hang-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--room, var(--ink)); }
.hang-room.admin .hang-dot { background: var(--gold); }
.hang-info { min-width: 0; display: grid; gap: 1px; }
.hang-info strong { font-size: var(--t-md); }
.hang-info small { font-size: var(--t-xs); color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hang-info .hang-tv { color: #7f2633; font-weight: 600; }
.hang-go { height: 30px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.hang-go:hover { background: #000; }
.hang-go.locked { background: var(--paper-3); color: var(--muted); }
.hang-here { font-size: var(--t-xs); font-weight: 700; color: var(--cobalt-ink); white-space: nowrap; }
.hang-note { margin: 8px 4px 2px; font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
body.ctl-open .hang, body.painting .hang, body.driving .hang, body.pb-on .hang, body.skill-on .hang, body.building .hang { display: none; }
body:not(.no-lounges) .castle-crown { display: none !important; }   /* the admin's Hangout list button sat on the minimap; it is a row of the hangout list now; NOSOUTH: with The Lounges held back (body.no-lounges, games/lounges.js) the button is back */
/* the TV window over the lounge: top middle on a computer */
.tv-win { z-index: 2; top: calc(var(--rail-top) + 46px); left: 50%; transform: translateX(-50%); width: min(480px, 40vw); background: #141015; border-radius: var(--r-lg); box-shadow: 0 10px 34px rgba(20, 10, 12, .38); overflow: hidden; color: #fff; }
.tv-video { position: relative; aspect-ratio: 16 / 9; background: #0b0a0c; }
.tv-still, .tv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.tv-why { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 6px 10px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .55); font-size: var(--t-xs); line-height: 1.4; }
.tv-win.world .tv-video, .tv-win.small .tv-video { display: none; }
.tv-controls { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; }
.tv-now { min-width: 0; flex: 1; display: grid; }
.tv-now strong { font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-now small { font-size: var(--t-xs); color: rgba(255, 255, 255, .66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; padding: 0; }
.tv-btn:hover { background: rgba(255, 255, 255, .2); }
.tv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-btn[aria-pressed="true"] { background: #9b2335; }
.tv-btn.fold svg { transform: rotate(180deg); transition: transform .2s; }
.tv-win.small .tv-btn.fold svg { transform: none; }
.tv-vol { width: 84px; accent-color: #eccb6a; flex: none; }
.tv-win.world .tv-btn.fold { display: none; }
body.ctl-open .tv-win { display: none; }
.tv-board h3 { margin: 16px 0 6px; font-size: var(--t-md); }
.tv-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tv-shuffle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }   /* SHUFFLE: the TV board's Shuffle button and its line */
.tv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tv-row:hover:not(:disabled) { background: var(--paper-3); }
.tv-row.on { background: var(--ink); color: #fff; cursor: default; }
.tv-row small { color: inherit; opacity: .7; white-space: nowrap; }
.tv-row:disabled:not(.on) { opacity: .55; cursor: default; }
.tv-pick li:has(>.tv-row+button){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.tv-pick .tv-row strong{min-width:0;overflow-wrap:anywhere}
.tv-pick li>.btn{min-height:44px}
.tv-win.fallback .tv-why{position:static;margin:0 12px 8px}
.tv-win.tv-collapsed.fallback .tv-why{display:block!important}
.tv-retry{margin:0 12px 10px;min-height:44px}
/* the Owner panel's TV lounge tab and a direct message report's lines */
.ctl-lines { margin: 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--c-panel-2); display: grid; gap: 3px; font-size: var(--t-sm); color: #dfe3ea; overflow-wrap: anywhere; }
.ctl-lounge h3 { margin: 18px 0 8px; font-size: var(--t-md); color: var(--c-text); }
.ctl-lounge .ctl-report { box-shadow: inset 0 0 0 1px var(--c-line); gap: 6px; padding: 10px 14px; }   /* a channel, not a report */
.ctl-lounge .ctl-report header { justify-content: flex-start; }
.ctl-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ctl-add select, .ctl-add input { height: 34px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel); color: var(--c-text); font: inherit; font-size: var(--t-sm); min-width: 0; }
.ctl-add input[type="text"] { flex: 1 1 180px; }
.ctl-add .ctl-mins { width: 150px; }
.ctl-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.ctl-checks label, .ctl-switch { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--c-panel); font-size: var(--t-sm); cursor: pointer; }
/* a phone: the hangout list's button on the left above the minimap (the right side is the door prompt's and Jump's), opening
   upward; the TV window across the top */
@media (max-width: 640px), (pointer: coarse) {
  .hang { top: auto; left: calc(var(--joy-left) - 3px); bottom: calc(var(--brrr-bottom) + 172px); width: min(280px, calc(100vw - 2 * var(--left))); flex-direction: column-reverse; align-items: flex-start; }
  .hang-btn { height: 46px; padding: 0 10px 0 12px; }
  .hang-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* the icon and the count; the name is its label */
  .hang-go { height: 36px; min-width: 52px; }
  .tv-win { left: var(--left); right: var(--right); transform: none; width: auto; }
  body.chat-open .tv-win, body.chat-open .hang .hang-list { visibility: hidden; }
  .tv-btn { width: 40px; height: 40px; }
  .tv-vol { width: 72px; }
  .chat-tab { height: 32px; padding: 0 9px; }
  .dm-tool { height: 32px; }
}
/* SOCIAL end */
/* TIERS: the top 100 Printers' exclusives (games/exclusives.js, ui/exclusives.js): gold script name tags with a Signature
   badge, silver ones with a Collector badge, the exclusive emotes, the profile's Top 100 card, the Hall and Wing sheets,
   the player card line, the boards and the map. */
:root { --xt-script: 'Segoe Script', 'Snell Roundhand', 'Brush Script MT', 'Dancing Script', cursive; --xt-gold: linear-gradient(135deg, #fff1c2 0%, #f2c94c 42%, #c8901f 100%); --xt-silver: linear-gradient(135deg, #ffffff 0%, #dfe5ec 45%, #a9b3bf 100%);
  --xt-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233d2a05' d='M8 1l4 5-4 9-4-9z'/%3E%3Cpath fill='%23fff1c2' d='M8 4.2l.9 4.3H7.1z'/%3E%3Ccircle cx='8' cy='9.4' r='1' fill='%23fff1c2'/%3E%3C/svg%3E");
  --xt-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='%23e8f4ff' stroke='%233a4350' stroke-width='1.8'/%3E%3Cpath d='M10.4 10.4l3.6 4' stroke='%23b8862b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
#labels .tag.xt-sig { background: var(--xt-gold); color: #3d2a05; font-family: var(--xt-script); font-weight: 700; font-size: calc(var(--t-sm) + 2px); letter-spacing: .01em; box-shadow: 0 0 0 1.5px #b8862b, 0 0 12px rgba(242, 201, 76, .55); padding-left: 5px; }
#labels .tag.xt-col { background: var(--xt-silver); color: #222831; box-shadow: 0 0 0 1.5px #8a94a1, 0 0 10px rgba(190, 210, 255, .5); padding-left: 5px; }
#labels .tag.xt-sig::before, #labels .tag.xt-col::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; background: var(--xt-pen) center / contain no-repeat; flex: none; }
#labels .tag.xt-col::before { background-image: var(--xt-glass); }
#labels .tag.xt-sig.with-av, #labels .tag.xt-col.with-av { padding-left: 3px; }
#labels .tag.you.xt-sig, #labels .tag.you.xt-col { box-shadow: 0 0 0 2px var(--cobalt), 0 0 12px rgba(242, 201, 76, .5); }
.xt-emotes { display: flex; align-items: center; gap: 2px; border-left: 1px solid var(--line); padding-left: 2px; position: relative; }
.xt-emote-list { display: flex; gap: 2px; }
.emotes .xt-emote { color: #8a5a00; }
.xt-emotes.xt-c .xt-emote { color: #4a5563; }
.emotes .xt-more { display: none; width: 44px; justify-content: center; background: var(--xt-pen) center / 20px no-repeat; }
.xt-emotes.xt-c .xt-more { background-image: var(--xt-glass); }
@media (max-width: 899px) {
  .emotes .xt-more { display: flex; }
  .xt-emote-list { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; flex-direction: column; background: var(--paper); padding: 4px; border-radius: 16px; box-shadow: var(--shadow); }
  .xt-emotes.open .xt-emote-list { display: flex; }
  .xt-emote-list .xt-emote { justify-content: flex-start; white-space: nowrap; }
}
.pf-card.xt-pf { background: linear-gradient(160deg, #fffaf0, #fff); box-shadow: inset 0 0 0 1.5px #e2b43f; }
.pf-card.xt-pf.xt-c { background: linear-gradient(160deg, #f6f8fb, #fff); box-shadow: inset 0 0 0 1.5px #a9b3bf; }
.xt-mine { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.xt-mine li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xt-mine li span { display: flex; flex-direction: column; min-width: 0; }
.xt-mine strong { font-size: 15px; white-space: nowrap; }
.xt-mine small { color: var(--muted); }
.xt-art { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 8px; box-shadow: 0 0 0 2px #e2b43f; flex: none; background: var(--paper-2); }
.xt-c .xt-art, li.xt-c .xt-art { box-shadow: 0 0 0 2px #a9b3bf; }
.xt-perks { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-sm); line-height: 1.45; }
.xt-switches { display: grid; gap: 6px; margin-top: 10px; }
.xt-switch { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-sm); min-height: 44px; padding: 6px 0; cursor: pointer; }
.xt-switch input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: #b8862b; }
.chip.xt-chip.xt-s { background: var(--xt-gold); color: #3d2a05; }
.chip.xt-chip.xt-c { background: var(--xt-silver); color: #222831; }
.xt-script { font-family: var(--xt-script); font-weight: 700; font-size: 1.15em; color: #8a5a00; }
.xt-c .xt-script, li.xt-c .xt-script { color: #3a4350; }
.xt-sheet .xt-frame { display: grid; place-items: center; margin: 10px 0; padding: 14px; background: #2a1d14; border-radius: 12px; box-shadow: inset 0 0 0 5px #d9ad48; }
.xt-sheet.xt-c .xt-frame { box-shadow: inset 0 0 0 5px #c3c9d2; background: #2b3138; }
.xt-sheet .xt-frame .xt-art { width: min(260px, 70vw); height: auto; aspect-ratio: 1; box-shadow: none; border-radius: 4px; }
.xt-holder { font-size: var(--t-md); }
.xt-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.xt-list button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px; border: 0; border-radius: 12px; background: var(--paper-2); font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.xt-list li.xt-s button { background: #fff6e0; }
.xt-list button > span { display: flex; flex-direction: column; min-width: 0; }
.xt-list small { color: var(--muted); }
.xt-list em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; }
.pc-tiers .xt-title { font-family: var(--xt-script); font-weight: 700; font-size: 18px; color: #8a5a00; }
.pc-tiers.xt-c .xt-title { color: #3a4350; }
.gs-board li.xt-s .gs-name { font-family: var(--xt-script); font-weight: 700; color: #8a5a00; }
.gs-board li.xt-c .gs-name { color: #3a4350; }
.gs-board li.xt-s .gs-name::before, .gs-board li.xt-c .gs-name::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -1px; background: var(--xt-pen) center / contain no-repeat; }
.gs-board li.xt-c .gs-name::before { background-image: var(--xt-glass); }
.map-list li.xt-s .map-who strong, .map-sel-name.xt-s { font-family: var(--xt-script); color: #8a5a00; }
.map-list li.xt-c .map-who strong, .map-sel-name.xt-c { color: #3a4350; }
.map-list li.xt-s .map-who strong::before, .map-list li.xt-c .map-who strong::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -1px; background: var(--xt-pen) center / contain no-repeat; }
.map-list li.xt-c .map-who strong::before { background-image: var(--xt-glass); }
@media (max-width: 480px) { .xt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xt-mine { grid-template-columns: 1fr; } }
/* TIERS end */
/* FRIENDS: the friends list beside the Hangouts button (ui/friends.js), the card's Add friend row, the plot menu's builders.
   The panel takes the hangout list's column and look; ui/friends.js places it from the Hangouts button and stops it short of
   the minimap, the chat and the TV window (fitList); opening one folds the other. */
.friends { top: calc(var(--rail-top) + 4px); left: 170px; display: flex; pointer-events: none; }
.friends > * { pointer-events: auto; }
.fr-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.fr-btn:hover { background: #fff; }
.fr-btn svg, .pc-friend svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fr-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--muted); font-size: var(--t-xs); display: inline-grid; place-items: center; }
.fr-count.some { background: var(--cobalt-ink); color: #fff; }
.fr-count.ask { background: var(--gold); color: #2b1f00; }
.friends.open .fr-btn { background: var(--ink); color: #fff; }
.friends.open .fr-count:not(.some):not(.ask) { background: rgba(255, 255, 255, .16); color: #fff; }
.fr-panel { width: 300px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: grid; gap: 8px; align-content: start; }
.fr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px 0; }
.fr-head strong { font-size: var(--t-md); }
.fr-head small { font-size: var(--t-xs); color: var(--muted); }
.fr-sec h3 { margin: 2px 4px 4px; font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fr-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fr-row { display: grid; gap: 6px; padding: 7px 8px; border-radius: var(--r-md); background: var(--paper-2); }
.fr-who { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 7px; min-width: 0; }
.fr-who > strong, .fr-who > .fr-name { font-size: var(--t-md); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-who > strong { grid-column: 1 / -1; }
.fr-who small { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--muted); line-height: 1.3; }
.fr-row.on .fr-who small { color: #3d4450; }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); box-shadow: inset 0 0 0 1.5px #b9b09c; }
.fr-row.on .fr-dot { background: var(--cobalt); box-shadow: 0 0 0 3px rgba(47, 75, 255, .18); }
.fr-name { border: 0; padding: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.fr-name:hover { text-decoration: underline; }
.fr-acts, .fr-way { display: flex; flex-wrap: wrap; gap: 5px; }
.fr-act { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.fr-act:hover:not(:disabled) { background: #fff; }
.fr-act.primary { background: var(--ink); color: #fff; box-shadow: none; }
.fr-act.primary:hover:not(:disabled) { background: #000; }
.fr-act.on { background: var(--cobalt-ink); color: #fff; box-shadow: none; }
.fr-act.ghost { background: none; box-shadow: none; color: var(--muted); padding: 0 8px; }
.fr-act.ghost.warn { color: #a3322a; background: #fbe9e6; }
.fr-act:disabled { opacity: .5; cursor: not-allowed; }
.fr-act small { font-weight: 600; opacity: .8; }
.fr-choice { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; border-radius: var(--r-md); background: #e9edff; }
.fr-choice .fr-note { flex-basis: 100%; margin: 2px 2px 0; }
.fr-note { margin: 2px 4px; font-size: var(--t-xs); color: var(--muted); line-height: 1.4; }
.fr-switch { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; font-size: var(--t-sm); cursor: pointer; }
.fr-switch input { width: 18px; height: 18px; accent-color: var(--cobalt); }
.pc-friend { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pc-friend .btn { display: inline-flex; align-items: center; gap: 8px; }
.pc-friend > .btn:first-child { flex: 1; justify-content: center; }
.dm-tools .fr-sent { display: inline-flex; align-items: center; background: none; color: var(--muted); cursor: default; }
.fr-builders .fr-rows { margin: 8px 0; }
.fr-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.fr-pick { height: 40px; min-width: 0; flex: 1 1 140px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); font: inherit; font-size: var(--t-md); color: var(--ink); }
.fr-all { display: flex; align-items: center; gap: 6px; flex-basis: 100%; font-size: var(--t-sm); }
body.ctl-open .friends, body.painting .friends, body.driving .friends, body.pb-on .friends, body.skill-on .friends, body.building .friends,
body.ctl-open .fr-panel, body.painting .fr-panel, body.driving .fr-panel, body.pb-on .fr-panel, body.skill-on .fr-panel, body.building .fr-panel { display: none; }
@media (max-width: 640px), (pointer: coarse) {
  .fr-btn { height: 46px; padding: 0 10px 0 12px; }
  .fr-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* the icon and the count; the name is its label */
  .fr-act { height: 36px; }
  body.chat-open .fr-panel { visibility: hidden; }
}
/* FRIENDS end */
/* ADMIN2: the Admin section (ui/admin2.js) on a player card and in the Owner panel's Admin tab, notes from the owner, and the
   admin camera (ui/gifts.js). One set of a2- classes in two skins: the card's paper and the control room's dark. */
.a2 { --a2-bg: #fff; --a2-bg2: var(--paper-2); --a2-line: #d5dcff; --a2-text: var(--ink); --a2-muted: var(--muted); --a2-acc: var(--cobalt); --a2-acc-ink: #fff; --a2-ok: #1f7a43; --a2-no: #b3261e; --a2-warn: #f2a33a;
  display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--a2-line); color: var(--a2-text); min-width: 0; }
.ctl .a2 { --a2-bg: var(--c-panel-2); --a2-bg2: var(--c-panel); --a2-line: var(--c-line); --a2-text: var(--c-text); --a2-muted: var(--c-muted); --a2-acc: var(--c-cobalt); --a2-acc-ink: #0c0f1a; --a2-ok: var(--c-green); --a2-no: var(--c-red); --a2-warn: var(--c-amber); margin: 0; padding: 0; border: 0; }
.a2-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--a2-bg); box-shadow: inset 0 0 0 1px var(--a2-line); }
.a2-tabs button { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 6px; border: 0; border-radius: 9px; background: none; color: var(--a2-muted); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.a2-tabs [aria-pressed="true"] { background: var(--a2-acc); color: var(--a2-acc-ink); }
.a2-form { display: grid; gap: 9px; min-width: 0; }
.a2-field { display: grid; gap: 4px; min-width: 0; }
.a2-field > span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; color: var(--a2-muted); }
.a2-select, .a2-input { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--a2-line); border-radius: 10px; background-color: var(--a2-bg); color: var(--a2-text); font: inherit; font-size: var(--t-md); }
.a2-select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23808a9b' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; text-overflow: ellipsis; }
.a2-select option, .a2-select optgroup { background: var(--a2-bg); color: var(--a2-text); }
.a2-select:focus, .a2-input:focus { outline: none; border-color: var(--a2-acc); box-shadow: 0 0 0 3px rgba(47, 75, 255, .2); }
.a2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.a2-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: var(--a2-acc); color: var(--a2-acc-ink); font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer; white-space: nowrap; }
.a2-btn:hover { filter: brightness(1.06); }
.a2-btn.ghost { background: transparent; border-color: var(--a2-line); color: var(--a2-text); }
.a2-btn.chip { height: 30px; padding: 0 11px; border-radius: var(--r-pill); background: var(--a2-bg); border-color: var(--a2-line); color: var(--a2-text); font-weight: 700; }
.a2-btn.armed { background: var(--a2-warn); border-color: var(--a2-warn); color: #241500; }
.a2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.a2-seg { display: inline-flex; justify-self: start; padding: 3px; border-radius: 10px; background: var(--a2-bg); box-shadow: inset 0 0 0 1px var(--a2-line); }
.a2-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--a2-muted); font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.a2-seg [aria-pressed="true"] { background: var(--a2-acc); color: var(--a2-acc-ink); }
.a2 .a2-hint, .a2 .a2-note, .a2 .a2-foot { margin: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--a2-muted); }
.a2-hint { flex: 1 1 180px; min-width: 0; }
.a2 .a2-foot { font-size: var(--t-xs); }
.a2 .a2-said { margin: 0; font-size: var(--t-sm); font-weight: 650; line-height: 1.4; }
.a2-said:empty { display: none; }
.a2-said.ok { color: var(--a2-ok); }
.a2-said.no { color: var(--a2-no); }
.a2-said::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.a2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.a2-gift { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--a2-bg); box-shadow: inset 0 0 0 1px var(--a2-line); }
.a2-gift > div { display: grid; gap: 1px; min-width: 0; }
.a2-gift strong { overflow-wrap: anywhere; font-size: var(--t-md); }
.a2-gift small { color: var(--a2-muted); font-size: var(--t-xs); overflow-wrap: anywhere; }
.a2-gift .a2-why { font-style: italic; }
.a2-gift.done { opacity: .62; }
.a2-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--a2-bg2); color: var(--a2-muted); font-size: var(--t-xs); font-weight: 700; white-space: nowrap; }
/* the Owner panel's Admin tab: players, the section, the latest gifts and the camera */
.ctl-pane[data-pane="admin"] { overflow: auto; }
.a2-tab { display: grid; gap: 12px; align-content: start; overflow: visible; }
.a2-grid { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.a2-players, .a2-for { grid-row: span 2; }
.a2-who { max-height: 440px; overflow: auto; gap: 6px; }
.a2-pick { width: 100%; display: grid; gap: 2px; text-align: left; padding: 9px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel-2); color: var(--c-text); font: inherit; cursor: pointer; }
.a2-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2-pick small { color: var(--c-dim); font-size: var(--t-xs); }
.a2-pick[aria-pressed="true"] { border-color: var(--c-cobalt); background: #222b45; }
.a2-players .ctl-search { max-width: none; flex: none; }
.a2-recent .a2-list { max-height: 360px; overflow: auto; }
@media (max-width: 1080px) { .a2-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); } .a2-players { grid-row: span 1; } .a2-for { grid-row: span 3; } }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) { .a2-grid { grid-template-columns: minmax(0, 1fr); } .a2-players, .a2-for { grid-row: auto; } .a2-who { max-height: 220px; } }
@media (pointer: coarse) { .a2-select, .a2-input, .a2-btn, .a2-tabs button, .a2-seg button { min-height: 44px; } .a2-btn.chip { min-height: 40px; } }
/* the free camera: a bar while it is on, and the admin camera button on screen */
.cam-bar { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--bottom) + 4px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: var(--r-pill); background: rgba(20, 24, 31, .88); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); backdrop-filter: blur(6px); }
.cam-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 4px rgba(255, 90, 90, .22); animation: cam-rec 1.6s ease-in-out infinite; }
@keyframes cam-rec { 50% { opacity: .35; } }
.cam-say { min-width: 0; font-size: var(--t-sm); line-height: 1.3; }
.cam-say strong { font-weight: 800; }
.cam-say small { color: #c8cfda; font-size: var(--t-sm); }
.cam-hold, .cam-done { flex: none; height: 40px; min-width: 52px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 800; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.cam-hold:active { background: rgba(255, 255, 255, .3); }
.cam-done { background: var(--paper); color: var(--ink); }
.cam-btn { position: absolute; z-index: 2; left: -4px; top: -4px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.cam-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cam-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
body.cam-on .emotes, body.cam-on .help, body.cam-on #door-prompt, body.cam-on .brrr-entry, body.cam-on .brrr-mini { display: none; }
@media (max-width: 640px), (pointer: coarse) { .cam-btn { left: calc(100% + 8px); top: 0; width: 44px; height: 44px; } }   /* phones: beside the small minimap, a full 44 px target */
@media (max-width: 640px) {
  .cam-bar { left: var(--left); right: var(--right); width: auto; transform: none; bottom: calc(var(--bottom) + 150px); flex-wrap: wrap; border-radius: 18px; padding: 10px 10px 10px 14px; }
  .cam-say { flex: 1 1 100%; }
  .cam-dot { display: none; }
  .cam-hold, .cam-done { height: 44px; flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .cam-dot { animation: none; } }
/* ADMIN2 end */
/* ROOFTOP: the Printer Tower's elevator: the floor counter while you ride (games/tower.js), top middle, out of the way of the
   chat, the minimap and the touch controls; the World's board style (ink, a gold rule, gold figures) */
.lift-hud { position: absolute; z-index: 4; left: 50%; top: calc(var(--rail-top) + 4px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-width: 92px; height: 48px; padding: 0 16px; border: 2px solid #e8b23a; border-radius: var(--r-md); background: linear-gradient(#171b22, #0f1217); color: #e8bd52; box-shadow: var(--shadow); pointer-events: none; font-variant-numeric: tabular-nums; }
.lift-hud b { font-size: 26px; font-weight: 800; letter-spacing: .06em; min-width: 1.4em; text-align: center; }
.lift-hud .lift-arrow { font-size: 15px; line-height: 1; }
.lift-hud[hidden] { display: none; }
@media (max-width: 640px) { .lift-hud { top: calc(var(--rail-top) + 48px); height: 44px; } }
/* ROOFTOP end */

/* FIRSTVISIT: the welcome screen (src/ui/welcome.js): the sign-in and the character, drawn before the world loads; the
   town loads behind it (its progress at the bottom). A guest picks a username here; Link wallet and Link X sit under it.
   Phones: full width with a 16 px gutter, the looks scroll sideways. The daily check-in card (src/ui/checkin.js). */
.fv { z-index: 38; padding: max(16px, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l)); background: radial-gradient(120% 90% at 50% 0%, #f7efdc 0%, #e9e2d0 60%, #d9cfb8 100%); backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
.fv .fv-card { width: min(460px, 100%); padding: 22px 20px 16px; animation: none; }
.fv-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.fv-head > div { flex: 1; min-width: 0; }
.fv-head h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.01em; }
.fv-head h2:focus { outline: none; }
.fv-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--t-lg); line-height: 1.4; }
.fv-form .field { margin-top: 12px; }
.fv-namebox { display: flex; gap: 6px; margin-top: 6px; }
.fv-namebox input { flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 16px; font-weight: 600; }
.fv-namebox input[aria-invalid] { border-color: #b3261e; }
.fv-dice { flex: none; width: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.fv-dice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fv-hint { display: block; margin-top: 5px; color: var(--muted); font-size: var(--t-sm); }
.fv-section { margin-top: 12px; }
.fv-label { display: block; font-size: 13px; font-weight: 600; }
.fv-looks { display: flex; gap: 8px; margin-top: 6px; overflow-x: auto; padding: 2px 2px 4px; min-height: 104px; scrollbar-width: thin; }
.fv-look { flex: none; width: 76px; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 5px; border: 2px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; font-size: var(--t-xs); color: var(--muted); cursor: pointer; }
.fv-look img, .fv-look-ph { width: 56px; height: 70px; object-fit: contain; }
.fv-look-ph { display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink); font-size: 22px; font-weight: 700; }
.fv-look span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-look[aria-checked="true"] { border-color: var(--cobalt); color: var(--ink); box-shadow: 0 4px 14px rgba(47, 75, 255, .16); }
.fv .actions { margin-top: 14px; }
.fv-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--muted); font-size: var(--t-sm); }
.fv-or::before, .fv-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.fv-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fv-links .btn { justify-content: center; }
.fv-fine { margin: 8px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.fv-trial { color: #2f6b3a; }
.fv .sign-in { margin-top: 10px; }
.fv-load { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-sm); }
.fv-load .load-track { flex: none; width: 96px; margin: 0; }
.fv-load.fv-busy .load-track i { width: 30%; transform: none !important; animation: fvslide 1.2s ease-in-out infinite; }
@keyframes fvslide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.fv[data-step="go"] .fv-card { text-align: left; }
@media (max-width: 420px) { .fv .fv-card { padding: 18px 16px 14px; } .fv-head .brand-mark.big { width: 48px; height: 48px; } .fv-head h2 { font-size: 19px; } .fv-head p { font-size: var(--t-md); } }
@media (prefers-reduced-motion: reduce) { .fv-load.fv-busy .load-track i { animation: none; margin-left: 0; } }
.ck-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: min(340px, calc(100vw - 32px)); padding: 10px 10px 10px 14px; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); pointer-events: auto; }
.ck-card strong { display: block; font-size: var(--t-md); }
.ck-card small { display: block; color: var(--muted); font-size: var(--t-sm); }
.ck-card .close { width: 32px; height: 32px; }
.gs-checkin { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.gs-checkin small { display: block; color: var(--muted); }
.fv .error:empty { display: none; }   /* no gap until there is something to say */
/* /FIRSTVISIT */
/* LAUNCHBUY (owner, October 15: "a launch a coin option that hovers"; "an easy option to purchase $Printer tokens in the
   game"): the hovering dock (ui/launchbuy.js), its two overlays and the in-context Get $Printer. A computer: the dock hangs on
   the right edge under Go Brrr, two pills in a column (ui/launchbuy.js turns it into a row, then two round icons, when the
   minimap is close, places it under whatever sits above, and on a short window beside Go Brrr). A phone: two round icons on the right edge above the round
   action buttons; on a phone on its side, a row under the top bar. Never in games, painting, building, the camera modes or
   the arrival (ui/launchbuy.js hides it for rides, fishing and every game's own HUD too). */
.lb-dock { top: calc(var(--top) + var(--hud-h) * 2 + 20px); right: var(--right); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.lb-dock > * { pointer-events: auto; }
.lb-dock.lb-row { flex-direction: row; align-items: center; }
.lb-dock.lb-tucked { visibility: hidden; }
.lb-act { display: inline-flex; align-items: center; gap: 9px; height: var(--hud-h); padding: 0 16px 0 7px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lb-act:hover { background: #fff; }
.lb-act:active { transform: scale(.97); }
.lb-ic { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; }
.lb-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lb-launch-ic { background: var(--cobalt); color: #fff; }
.lb-buy-ic { background: var(--gold); color: #2b1f00; }
.lb-dock.lb-icons .lb-act { width: var(--hud-h); padding: 0; justify-content: center; }
.lb-dock.lb-icons .lb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.ctl-open .lb-dock, body.painting .lb-dock, body.driving .lb-dock, body.pb-on .lb-dock, body.skill-on .lb-dock, body.building .lb-dock,
body.casino-seated .lb-dock, body.brrr-full .lb-dock, body.cam-on .lb-dock, body.cam-first .lb-dock { display: none; }
@media (max-width: 640px), (pointer: coarse) {
  .lb-dock { top: auto; bottom: calc(var(--act-2) + var(--act) + 96px); gap: 10px; }   /* clear of a door's name above the highest round button */
  .lb-act { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .lb-act .lb-ic { width: 36px; height: 36px; }
  .lb-act .lb-ic svg { width: 20px; height: 20px; }
  .lb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.chat-open .lb-dock { display: none; }
}
@media (pointer: coarse) and (max-height: 500px) { .lb-dock { bottom: auto; top: var(--rail-top); flex-direction: row; } }
/* the overlay: a card in the middle on a computer, a sheet from the bottom on a phone */
.lb-sheet { width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.lb-sheet::backdrop { background: rgba(28, 24, 16, .45); backdrop-filter: blur(2px); }
.lb-sheet[open] { animation: mapin .2s ease-out; }
.lb-card { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.lb-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 8px 20px; flex: none; }
.lb-head-ic .lb-ic { width: 46px; height: 46px; border-radius: 14px; }
.lb-head-ic .lb-ic svg { width: 26px; height: 26px; }
.lb-titles { flex: 1; min-width: 0; }
.lb-titles h2 { margin: 3px 0 0; font-size: var(--t-xl); letter-spacing: -.01em; outline: none; }
.lb-x { flex: none; width: 44px; height: 44px; }
.lb-sheet .btn { min-height: 44px; }
.lb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 12px; }
.lb-body h3 { margin: 18px 0 8px; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lb-body p { font-size: 14px; line-height: 1.5; margin: 8px 0; }
.lb-body p.lb-lead { font-size: var(--t-lg); margin-top: 2px; }
.lb-kinds, .lb-needs, .lb-projlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-kinds li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.lb-kinds strong { font-size: var(--t-md); }
.lb-kinds span { font-size: var(--t-sm); line-height: 1.4; color: var(--muted); }
.lb-needs li { position: relative; padding-left: 18px; font-size: var(--t-md); line-height: 1.45; }
.lb-needs li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); }
.lb-actions { margin: 16px 0 4px; }
.lb-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
.lb-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.lb-who strong { font-size: var(--t-md); overflow-wrap: anywhere; }
.lb-who .sym { font-size: var(--t-sm); font-weight: 700; color: var(--cobalt-ink); }
.lb-who small { flex-basis: 100%; font-size: var(--t-xs); color: var(--muted); }
.lb-coin { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r-md); background: #e9edff; }
.lb-projlist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--paper-2); }
.lb-projects .btn { white-space: nowrap; }
.lb-market dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 2px; }
.lb-market dl > div { padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.lb-market dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lb-market dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lb-market.none dd { color: var(--muted); }
.lb-body p.lb-src { margin: 4px 0; font-size: var(--t-xs); color: var(--muted); }
.lb-mint { margin: 14px 0 0; }
.lb-k { display: block; margin-bottom: 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lb-mint-row { display: flex; align-items: center; gap: 8px; }
.lb-mint-code { flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px/1.35 ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
.lb-copy { flex: none; }
.lb-copied { display: block; min-height: 16px; margin-top: 3px; font-size: var(--t-xs); font-weight: 700; color: var(--cobalt-ink); }
.lb-mint p.muted { margin: 2px 0 0; font-size: var(--t-sm); }
.lb-wallet { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: #e9edff; }
.lb-wallet p { margin: 0 0 8px; font-weight: 600; }
.lb-plugin { margin: 12px 0 0; }
.lb-foot { flex: none; padding: 10px 20px 18px; border-top: 1px solid var(--line); }
.lb-back { width: 100%; justify-content: center; min-height: 44px; }
/* in context: a line and Get $Printer where a $Printer price is more than your wallets hold; the button on the tier hints */
.lb-short { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-md); background: #fff4d9; font-size: var(--t-md); }
.lb-short > span { flex: 1 1 160px; }
.lb-get { display: inline-flex; align-items: center; gap: 7px; }
.lb-ic.lb-mini { width: 20px; height: 20px; }
.lb-ic.lb-mini svg { width: 13px; height: 13px; stroke-width: 2.1; }
.lb-tier { margin: 8px 0 0; }
@media (max-width: 640px) {
  .lb-sheet { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .lb-card { max-height: 92dvh; }
  .lb-head { padding: 16px 12px 6px 16px; }
  .lb-body { padding: 4px 16px 12px; }
  .lb-foot { padding: 10px 16px calc(14px + var(--safe-b)); }
}
@media (max-width: 640px), (pointer: coarse) { .lb-get, .lb-short .btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .lb-sheet[open] { animation: none; } .lb-act:active { transform: none; } }
/* LAUNCHBUY end */
/* CHAT2: World and Messages only. Guest lines carry a Guest tag; while a guest waits,
   Send counts down instead of being refused. */
.chat-list .who em.gtag { background: var(--paper-2); color: var(--muted); }
.chat-list li.guest .who { font-weight: 600; }
.chat-form button:disabled { background: var(--paper-3); color: var(--muted); cursor: default; font-variant-numeric: tabular-nums; }
.chat .online:not(:empty) { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chat .online svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat .chat-tab { padding: 0 9px; }
/* CHAT2 end */
.treasure-wallet { overflow-wrap: anywhere; }
/* SIMPLIFY (owner, October 15, after trying it on his phone: "too many buttons on the overlays confusing one friends list should
   be the same as hangout simplify not complicate"). While you play: the joystick, Jump, the minimap, the chat, People, the
   guest's Link wallet or X (the one sign-in prompt), one Menu and one Emotes button. Games, Character, Profile, Settings,
   Go Brrr, Launch a coin, Get $Printer, first person, the free camera and Sound are one tap into the Menu (ui/menu.js); the
   old buttons stay wired and step aside while body.sp-hud is on. The Hangouts and Friends buttons are one People button
   and panel (ui/people.js). */
body.sp-hud .top-actions > #open-games, body.sp-hud .top-actions > #open-picker, body.sp-hud .top-actions > #open-profile, body.sp-hud .top-actions > #open-settings,
body.sp-hud .touch .view-btn, body.sp-hud .minimap .cam-btn, body.sp-hud .trial-chip:not(.over) { display: none !important; }   /* Go Brrr keeps its direct HUD control. */
/* the Menu button: last in the top bar; a round button on a phone */
.menu-btn { position: relative; gap: 8px; padding: 0 16px 0 12px; }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.menu-dot { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font-size: var(--t-xs); font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper); }
/* the Menu: a card under the top bar's right end, every tile 44 px or more */
.pm-panel { z-index: 4; top: calc(var(--top) + var(--hud-h) + 8px); right: var(--right); width: min(560px, calc(100vw - var(--left) - var(--right))); max-height: calc(100dvh - var(--top) - var(--hud-h) - 20px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 14px 40px rgba(30, 24, 10, .22); padding: 10px; display: grid; gap: 8px; animation: pop .16s ease-out; }
.pm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pm-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 70px; padding: 6px 4px; border: 0; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.pm-tile:hover { background: var(--paper-3); }
.pm-ic { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.pm-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pm-tile[data-menu="launch"] .pm-ic { color: var(--cobalt); }
.pm-tile[data-menu="buy"] .pm-ic { color: #a87512; }
.pm-tile[data-menu="brrr"] .pm-ic { color: var(--maroon); }
.pm-tile strong { font-size: var(--t-sm); font-weight: 750; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.pm-tile small { font-size: var(--t-xs); color: var(--muted); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tile kbd { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 1px 5px; }
.pm-trial { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-md); background: #fff4d6; color: var(--ink); font: inherit; font-size: var(--t-md); cursor: pointer; text-align: left; }
.pm-trial strong { font-weight: 800; }
.pm-trial span:last-child { color: var(--muted); margin-left: auto; }
.pm-trial .tc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.pm-trial.over { background: #fde7e4; }
/* the Emotes button: a pill at the bottom on a computer; the bar it opens sits above it */
.sp-emote-btn { display: none; }
body.sp-hud .sp-emote-btn { display: flex; align-items: center; gap: 8px; left: 50%; bottom: var(--bottom); transform: translateX(-50%); height: var(--hud-h); padding: 0 14px 0 10px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.sp-emote-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sp-emote-btn[aria-expanded="true"] { background: var(--ink) !important; color: #fff !important; }
body.sp-hud .hud.emotes { display: none; }
body.sp-hud.sp-emotes-open .hud.emotes { display: flex; animation: pop .16s ease-out; }   /* in its own place at the bottom, under a door prompt; on a computer it takes the button's place while open */
@media (pointer: fine) { body.sp-hud.sp-emotes-open .sp-emote-btn { visibility: hidden; } }
body.sp-hud.sp-emotes-open:is(.building, .painting, .pb-on, .skill-on, .casino-seated, .cam-on, .driving, .ctl-open) .hud.emotes,
body.sp-hud:is(.building, .painting, .pb-on, .skill-on, .casino-seated, .cam-on, .driving, .ctl-open) .sp-emote-btn { display: none; }
@media (min-width: 641px) and (max-width: 1100px) and (pointer: fine) {
  body.sp-hud .sp-emote-btn, body.sp-hud.sp-emotes-open .hud.emotes { left: calc((var(--left) + var(--chat-w) + 100vw - var(--right) - var(--help-w)) / 2); }
}
/* People: one button and one panel where the Hangouts and Friends buttons were */
.people { top: calc(var(--rail-top) + 4px); left: var(--left); display: flex; pointer-events: none; }
.people > * { pointer-events: auto; }
.pp-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--hud-h); padding: 0 12px 0 11px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font: inherit; font-size: var(--t-md); font-weight: 700; cursor: pointer; }
.pp-btn:hover { background: #fff; }
.pp-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pp-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--muted); font-size: var(--t-xs); display: inline-grid; place-items: center; }
.pp-count.some { background: var(--cobalt-ink); color: #fff; }
.pp-count.ask { background: var(--gold); color: #3d2a05; }
.people.open .pp-btn { background: var(--ink); color: #fff; }
.people.open .pp-count:not(.some):not(.ask) { background: rgba(255, 255, 255, .16); color: #fff; }
.pp-panel { z-index: 3; width: 320px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: grid; gap: 8px; align-content: start; }
.pp-panel .hang-rooms { margin-top: 2px; }
.pp-panel .hang-note { margin-top: 6px; }
body:is(.ctl-open, .painting, .driving, .pb-on, .skill-on, .building, .casino-seated, .cam-on) :is(.people, .pp-panel) { display: none; }
/* Go Brrr's Golden Bill arrow hangs where its button was (a computer) */
@media (min-width: 641px) and (pointer: fine) { body.sp-hud .brrr-arrow { top: calc(var(--top) + var(--hud-h) + 10px); } body.sp-hud .brrr-mini:not([hidden]) ~ .brrr-arrow { top: calc(var(--top) + var(--hud-h) + 94px); } }
/* a phone: People above the minimap on the left (the minimap moves down to where the Go Brrr button was), the panel opens
   upward; the Emotes button where the eye button was, beside Jump; the bar it opens at the bottom, between the thumbs */
@media (max-width: 640px), (pointer: coarse) {
  body.sp-hud .minimap { bottom: var(--brrr-bottom); }
  body.sp-hud #app:has(.brrr-mini:not([hidden])) .minimap { bottom: calc(var(--brrr-bottom) + 72px + 14px); }
  .people { top: auto; left: calc(var(--joy-left) - 3px); bottom: calc(var(--brrr-bottom) + 72px + 14px); }
  #app:has(.brrr-mini:not([hidden])) .people { bottom: calc(var(--brrr-bottom) + 2 * (72px + 14px)); }
  .pp-btn { height: 46px; padding: 0 10px 0 12px; }
  .pp-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* the icon and the count; the name is its label */
  .pp-panel .fr-act, .pp-panel .fr-name { min-height: 44px; }
  body.chat-open .pp-panel { visibility: hidden; }
  .menu-btn { width: var(--hud-h); padding: 0; justify-content: center; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-panel { width: min(360px, calc(100vw - var(--left) - var(--right))); }
  .pm-tile { min-height: 80px; }
  .pm-ic { width: 38px; height: 38px; }
  .pm-trial { min-height: 44px; }
  .pm-tile[data-menu="settings"] { grid-column: 1 / -1; min-height: 52px; grid-auto-flow: column; justify-content: center; gap: 10px; }   /* nine tiles in three rows, Settings across the foot */
  .pm-tile[data-menu="settings"] .pm-ic { width: 34px; height: 34px; }
}
/* a guest's phone: Link wallet or X and the Menu fit beside the brand and the chat, one row (PORT-PAY wrapped the old five) */
@media (max-width: 600px) {
  body.sp-hud:has(#link-wallet:not([hidden])) { --rail-top: calc(var(--top) + var(--hud-h) + 10px); }
  body.sp-hud .hud-top:has(.link-wallet:not([hidden])) { flex-wrap: nowrap; }
  body.sp-hud .hud-top:has(.link-wallet:not([hidden])) .top-actions { width: auto; }
}
@media (pointer: coarse) {
  body.sp-hud .sp-emote-btn { left: auto; transform: none; right: calc(var(--jump-right) + var(--jump) + 14px); bottom: calc(var(--jump-bottom) + var(--jump) - 52px); width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  body.sp-hud .sp-emote-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.sp-hud.sp-emotes-open .hud.emotes { bottom: var(--bottom); }
  body.sp-hud.brrr-full .sp-emote-btn, body.sp-hud.sp-emotes-open.brrr-full .hud.emotes { display: none; }
}
/* a phone on its side: People over the minimap's column, its panel opens to the right; the Menu's tiles in two rows */
@media (pointer: coarse) and (max-height: 500px) {
  body.sp-hud .minimap { bottom: var(--brrr-bottom); }
  body.sp-hud #app:has(.brrr-mini:not([hidden])) .minimap { bottom: calc(var(--brrr-bottom) + 72px + 12px); }
  .people { bottom: calc(var(--brrr-bottom) + 62px + 12px); }
  #app:has(.brrr-mini:not([hidden])) .people { bottom: calc(var(--brrr-bottom) + 72px + 12px + 62px + 12px); }
  .pm-panel { width: min(600px, calc(100vw - var(--left) - var(--right))); gap: 6px; padding: 8px; }
  .pm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pm-tile, .pm-tile[data-menu="settings"] { grid-column: auto; grid-auto-flow: row; min-height: 66px; padding: 5px 4px; gap: 2px; }
  .pm-ic, .pm-tile[data-menu="settings"] .pm-ic { width: 30px; height: 30px; }
  .pm-ic svg { width: 19px; height: 19px; }
  .pm-tile small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pm-panel, body.sp-hud.sp-emotes-open .hud.emotes { animation: none; } }
/* SIMPLIFY end */
/* ROULETTE2: Roulette's one countdown (games/casino3.js rlTimer): on the dock a ring with the seconds beside the call (Place
   your bets, Last bets, No more bets). Green while bets are open, coral and pulsing for the last seconds, quiet grey once the
   ball runs. */
.casino-timer.rl-clock { height: auto; min-height: 38px; display: flex; align-items: center; gap: 10px; background: none; overflow: visible; border-radius: 0; }
.casino-timer.rl-clock::before { display: none; }
.casino-timer.rl-clock.off { display: none; }
.rl-clock b { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-md); font-weight: 900; font-variant-numeric: tabular-nums; color: #f3ece0;
  background: radial-gradient(closest-side, #12161f 74%, transparent 76%), conic-gradient(var(--rl, #3dff8a) calc(var(--k, 1) * 360deg), rgba(255, 255, 255, .16) 0); }
.rl-clock b:empty { display: none; }
.rl-clock span { font-size: var(--t-md); font-weight: 800; letter-spacing: .02em; color: #3dff8a; }
.rl-clock.wait span { color: #f0cd6a; }
.rl-clock.last { --rl: #ff9b8f; }
.rl-clock.last span { color: #ff9b8f; }
.rl-clock.last b { animation: rl-last 1s ease-in-out infinite; }
.rl-clock.closed span { color: #c9c2b0; }
@keyframes rl-last { 50% { transform: scale(1.12); } }
@media (pointer: coarse) { .rl-clock b { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .rl-clock.last b { animation: none; } }
/* The clock sits beside the status line (one row, the dock no taller than with the old thin bar); while the ball runs and the
   room pays the rows fold to the last numbers, so the camera sees the wheel and the felt */
.casino-dock:has(> .rl-clock) { grid-template-columns: minmax(0, 1fr) auto; }
.casino-dock:has(> .rl-clock) > * { grid-column: 1 / -1; }
.casino-dock:has(> .rl-clock) > .casino-status { grid-column: 1; align-self: center; }
.casino-dock:has(> .rl-clock) > .rl-clock { grid-column: 2; justify-self: end; }
.casino-row.rl-fold .rl-recent { margin-left: 0; max-width: 100%; justify-content: flex-start; }
/* ROULETTE2 end */
/* SWEEP3 (docs/BUGS-SWEEP3.md): on a phone every control a thumb presses is 44 px or more: the chat's tabs (World, Members,
   a room, Messages: 32 px), People's Go to a hangout room (36 px), the welcome screen's Link wallet and Link X (40 px) and the
   profile's language (40 px) */
@media (pointer: coarse) {
  .chat .chat-tab { min-height: 44px; }
  .pp-panel .hang-go { min-height: 44px; }
  .fv-links .btn { min-height: 44px; }
  .pf-lang-select { min-height: 44px; }
}
/* SWEEP3: a phone building on its plot: the build bar takes the bottom, so the minimap goes back up where it stood before
   SIMPLIFY moved it down (it sat half under the bar; People, which stands there now, is hidden while building) */
@media (max-width: 640px), (pointer: coarse) {
  body.sp-hud.building .minimap { bottom: calc(var(--brrr-bottom) + 72px + 14px); }
}
/* SWEEP3: a phone on its side: the chat's head is two rows now (the tabs, then voice, Discord and the fold), 88 px, not
   the one row of 50 px the messages' height was set for, so its message box and Send hung 16 px out of the panel */
@media (pointer: coarse) and (max-height: 500px) {
  .chat:not(.min) > .chat-body { height: calc(100% - 88px); }
}
/* SWEEP3 end */

/* POLISH: first person on a computer holds the mouse in the middle (ui/mouselook.js): a small crosshair marks it; under
   the door's fade (z-index 6) and every sheet */
.crosshair { position: fixed; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; z-index: 5; }
.crosshair[hidden] { display: none; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(20, 22, 26, .45); border-radius: 1px; }
.crosshair::before { left: 7px; top: 1px; width: 2px; height: 14px; }
.crosshair::after { top: 7px; left: 1px; width: 14px; height: 2px; }
/* CLICKS (owner, October 16: "there should be less scrolling and more intuative clicks for users, again same thing each
   language should be good"): the profile on four tabs, the unlock guide folded by group, the Games sheet's games as rows,
   the tab rows of the profile, the Games sheet and Settings stuck to the top of the sheet with Close always at its top
   right, the garage in the Menu, 44 px targets on phones, one scrolling area per panel. Measured: tools/clicks-measure.mjs. */
#sheet > .sheet-close { z-index: 3; }   /* Close stays on top of a tab row stuck to the top */
/* a tab row stuck to the top of the sheet: full width under the paper, its buttons clear of Close (44 px at the right) */
.pf-tabs, .gs-segbar { position: sticky; top: 0; z-index: 2; margin: 12px -22px 6px; padding: 8px 62px 8px 22px; background: var(--paper); }
.pf-tabs { display: flex; gap: 2px; }
.pf-tabs::before, .gs-segbar::before { content: ''; position: absolute; inset: 8px 62px 8px 22px; z-index: -1; border-radius: 14px; background: var(--paper-2); }
.pf-tabs button { flex: 1 1 0; min-width: 0; display: grid; place-items: center; min-height: 44px; margin: 3px 0; padding: 4px 4px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 12.5px; font-weight: 750; line-height: 1.15; text-align: center; color: var(--pw-muted); cursor: pointer; overflow-wrap: anywhere; hyphens: auto; }
.pf-tabs button:first-child { margin-left: 4px; } .pf-tabs button:last-child { margin-right: 4px; }
.pf-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.pf-tabs button:not([aria-selected="true"]):hover { color: var(--ink); }
.pf-panel > :first-child { margin-top: 4px; }
.pf-panel .pf-access:first-child { margin-top: 6px; }
.pf .pf-logout { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gs-segbar .gs-seg { margin: 0; background: none; }
.st2 .st-jump { padding-right: 62px; gap: 2px; }   /* Close keeps its place at the top right over the jump row */
.st2 .st-jump button { min-width: 52px; }
/* the unlock guide: a row per group with its count, one tap opens it */
.inv-groups { display: grid; gap: 6px; margin-top: 8px; }
.inv-gsec { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.inv-gsec.open { box-shadow: inset 0 0 0 1.5px var(--cobalt); }
.inv-group { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 14px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.inv-group strong { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.inv-count { font-size: 12px; font-weight: 700; color: var(--pw-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-group .inv-bar { width: 56px; }
.inv-group .ic { width: 16px; height: 16px; color: var(--pw-muted); transition: transform .2s ease; }
.inv-group[aria-expanded="true"] .ic { transform: rotate(180deg); }
.inv-gsec > .inv-list { padding: 0 8px 8px; }
.inv-hide { min-height: 40px; margin-top: 4px; }
.inv-hide input { width: 18px; height: 18px; }
.pf-inventory .pf-label { display: block; margin: 4px 0 6px; }
.pf-inventory + .actions { margin-top: 12px; }
/* the Games sheet's games: one row each (the badge, the name and the place open the rest), Take me there beside it */
.gs-card { display: block; padding: 0; }
.gs-card-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; }
.gs-card-toggle { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.gs-card-toggle:hover { background: var(--paper); }
.gs-card-toggle .gs-card-title { display: grid; gap: 2px; min-width: 0; }
.gs-t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 15px; font-weight: 750; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.gs-chev { width: 16px; height: 16px; color: var(--pw-muted); transition: transform .2s ease; }
.gs-card-toggle[aria-expanded="true"] .gs-chev { transform: rotate(180deg); }
.gs-card .gs-details { padding: 0 14px 14px 62px; }
.gs-card .gs-details .gs-goal { margin: 0 !important; }
.gs-card .gs-details .gs-rules { margin-top: 10px; }
.gs-rules-h { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-muted); }
.gs .gs-card .btn.gs-go { min-height: 44px; }
.gs .gs-card .btn.gs-go:not(.words) { width: 44px; padding: 0; justify-content: center; }   /* the same arrow as the quests' Take me there; its name says where (aria-label, title) */
.gs .gs-card .btn.gs-go:not(.words) .gs-go-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gs-cards { gap: 8px; }
@media (max-width: 640px) {
  #sheet { max-height: 86dvh; }   /* a long sheet shows more of itself; a short one is as tall as it is */
  .gs-card .gs-details { padding: 0 12px 12px 12px; }
  .gs-card-toggle { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 8px; }
  .gs-card-toggle .gs-badge { width: 36px; height: 36px; border-radius: 11px; }
  .gs-stats .gs-stat { padding: 6px 10px; }
}
/* every button in these panels 44 px on a touch screen */
@media (max-width: 640px), (pointer: coarse) {
  .pcard .btn, .pcard button.fr-act, .pf .btn, .pf .pf-lang-select, .pf .card-acts button, .st2 .btn, .st2 .st-seg button, .st2 .pf-lang-select, .st2 .st-more summary, .pp-panel button { min-height: 44px; }
  .gs-more { min-height: 44px; }
  .brrr-tabs button, .brrr-mult button, .brrr-buy { min-height: 44px; }
  .gar-info .st-preset, .garage .st-preset { min-width: 44px; }
  .casino-head button, .casino-head summary, .casino-mode-btn, .casino-chip-btn { min-height: 44px; }   /* the dock's top row (chips, Rules, Fair, Stand up), Chips or $Printer and the chip values */
}
/* the Menu: the Garage after Go Brrr; eleven tiles, Settings two wide at the end */
.pm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pm-tile[data-menu="settings"] { grid-column: span 2; }
.pm-tile[data-menu="garage"] .pm-ic { color: #0f7b52; }
@media (max-width: 640px), (pointer: coarse) {
  .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-tile[data-menu="settings"] { grid-column: span 2; min-height: 80px; }
}
@media (pointer: coarse) and (max-height: 500px) {
  .pm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pm-tile[data-menu="settings"] { grid-column: span 2; }
}
/* Back: top left, to where you came from (a checkout opened from the garage); Close stays top right */
.sheet-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0 2px -10px; padding: 0 14px 0 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 14px; font-weight: 750; color: var(--cobalt-ink); cursor: pointer; }
.sheet-back span { font-size: 22px; line-height: 1; margin-top: -2px; }
.sheet-back:hover { background: var(--paper-2); }
/* the garage on a phone: the item's main button at the foot of the sheet while the one under the turntable is out of view */
.gar-stick { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .garage .gar-stick { grid-column: 1 / -1; position: sticky; bottom: -14px; z-index: 4; display: flex; margin: 8px -12px -14px; padding: 10px 12px calc(12px + var(--safe-b)); background: linear-gradient(rgba(247, 242, 231, 0), #f7f2e7 26%); visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility 0s .15s; }
  .garage .gar-stick.show { visibility: visible; opacity: 1; transition: opacity .15s ease; }
  .garage .gar-stick .btn { flex: 1; justify-content: center; min-height: 48px; box-shadow: 0 6px 16px rgba(47, 75, 255, .25); }
}
/* the character picker is the one scrolling area of its dialog (the dialog itself scrolled 14 px on a phone) */
#picker { max-height: calc(100dvh - 12px); overflow: hidden; }
/* a stat's label wraps in a longer language instead of being cut (Sequência de gm) */
.gs-stat span, .pf-stat span { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
/* the full map's line under its title wraps in a longer language instead of being cut (Você está perto de Market Street) */
.map-sub { white-space: normal; overflow: visible; line-height: 1.3; }
/* the primary button stays in reach on a long sheet: the checkout's Pay, the Launch and Get $Printer overlays' main row */
.checkout > .actions:has(> .btn.wide) { position: sticky; bottom: 0; z-index: 2; margin: 14px -22px 0; padding: 10px 22px 12px; background: linear-gradient(rgba(255, 251, 242, 0), var(--paper) 22%); }
.lb-body > .lb-actions { position: sticky; bottom: -12px; z-index: 2; margin-left: -20px; margin-right: -20px; padding: 10px 20px 12px; background: linear-gradient(rgba(255, 251, 242, 0), var(--paper) 22%); }
/* a short screen (a phone on its side): the character picker gives its room to the looks, the garage's turntable is lower and
   its list is the sheet's one scroll */
@media (max-height: 500px) {
  #picker .picker header { padding-top: 6px; padding-bottom: 4px; } #picker .picker h2 { font-size: 18px; }
  #picker .picker header p, .pk-ladder .pk-steps, .pk-ladder .lb-tier, .pk-ladder .pk-ladder-printer { display: none; }
  .pk-ladder { margin-bottom: 6px; padding: 6px 12px; }
  .pk-ladder .pk-bar { margin-top: 4px; }
  .pk-ladder-next p { margin: 4px 0 0; }
  #picker .picker-body { height: auto; flex: 1 1 auto; }
  #picker .panel { display: flex; flex-direction: column; } #picker .panel > * { flex-shrink: 0; }   /* the looks first: the collection's name and the look switch, the cards, then why some are locked */
  #picker .panel-head { display: none; }   /* the selected tab beside it names the collection and says where you stand */
  #picker .grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  #picker .panel { padding-top: 6px; }
  #picker .style-bar { order: 2; margin: 2px 0 6px; } #picker #nft-form { order: 3; } #picker .grid { order: 4; } #picker .pk-rule, #picker .pk-coin { order: 5; }
  .gs > .eyebrow, .gs > .gs-stats { display: none; }   /* the Games sheet: its numbers are on the profile's Stats tab */
  .gs > h2 { font-size: 18px; margin-top: 0; }
  #sheet:has(> #sheet-body > .gs) { width: min(760px, calc(100vw - 24px)); }   /* wide and short: the games in two columns */
  .gs .gs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .gar-stage { height: 150px; }
  .gar-list, .gar-right .studio { max-height: none; overflow: visible; }
  .lb-body > .lb-actions { bottom: -12px; }
  #picker { margin-top: 6px; margin-bottom: 6px; } #picker .picker { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }   /* the dialog takes the height: the looks get it */
  .casino-dock { gap: 4px; padding: 6px 10px; bottom: calc(var(--safe-b) + 6px); max-height: calc(100dvh - var(--safe-b) - 12px); overflow-y: auto; overscroll-behavior: contain; }   /* the dock fits the height: it was taller than a phone on its side */
}
@media (prefers-reduced-motion: reduce) { .inv-group .ic, .gs-chev, .garage .gar-stick { transition: none; } }
/* CLICKS end */
/* ADMIN3: the admin's quick moves (ui/admin3.js): one row of icon buttons wherever the admin meets a player (a name tag's or
   a chat name's small bar, People's rows, the full map's picked dot, the card and the Owner panel's Admin tab), the
   checkboxes and the bar for several players, the Move picker with the places' pictures, the map's drop and Bring here.
   Icons from ui/icons.js; 32 px on a computer, 44 px on a touch screen. */
.a3-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.a3-ic { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.a3-ic .ic { width: 18px; height: 18px; }
.a3-ic:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--cobalt); color: var(--cobalt-ink); }
.a3-ic.ghost { background: transparent; box-shadow: none; }
.a3-ic[data-a3="bring"], .a3-ic[data-a3="goto"] { background: var(--ink); color: #fff; box-shadow: none; }   /* the two one-tap moves stand out */
.a3-ic[data-a3="bring"]:hover, .a3-ic[data-a3="goto"]:hover { background: #000; color: #fff; }
.a3-quick.text { gap: 6px; }
.a3-quick.text .a3-ic { width: auto; min-width: 0; padding: 0 12px 0 9px; gap: 7px; grid-template-columns: auto minmax(0, 1fr); justify-content: start; text-align: left; font: inherit; font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.a3-quick.text .a3-ic span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.a3-check { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; cursor: pointer; }
.a3-check-box { width: 17px; height: 17px; margin: 0; accent-color: var(--cobalt); cursor: pointer; }
/* People: the checkbox, the name and where, the icons (under the name on a phone) */
.fr-row.a3-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; }
.fr-row.a3-row > .a3-quick { justify-content: flex-end; }
.fr-acts > .a3-quick { flex-basis: 100%; }
/* the bar while players are picked, and the last batch's answer */
.a3-bar { display: grid; gap: 6px; padding: 8px; border-radius: var(--r-md); background: #eef1ff; box-shadow: inset 0 0 0 1px #d5dcff; }
.a3-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a3-count { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: var(--t-md); }
.a3-count .ic { width: 18px; height: 18px; color: var(--cobalt-ink); }
.a3-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer; white-space: nowrap; }
.a3-btn .ic { width: 16px; height: 16px; }
.a3-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); padding: 0 14px; }
.a3-btn.armed, .a3-here-btn.armed { background: #f2a33a; color: #241500; }
.a3-result { display: grid; gap: 3px; font-size: var(--t-sm); line-height: 1.35; }
.a3-result strong { font-weight: 750; }
.a3-result.ok strong { color: #1f6b3d; }
.a3-result.no strong { color: #b3261e; }
.a3-result ul { margin: 0; padding-left: 18px; color: var(--muted); }
.a3-dark { background: var(--c-panel-2); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-text); }
.a3-dark .a3-count .ic { color: var(--c-cobalt); }
.a3-dark .a3-btn { background: var(--c-cobalt); color: #0c0f1a; }
.a3-dark .a3-btn.ghost { background: transparent; color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line); }
.a3-dark .a3-result.ok strong { color: var(--c-green); }
.a3-dark .a3-result.no strong { color: var(--c-red); }
.a3-dark .a3-result ul { color: var(--c-muted); }
/* the Owner panel's Admin tab: the checkbox, the player, the icons under the name */
.a2-who > li.a3-arow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 6px; }
.a2-who > li.a3-arow > .a3-quick { grid-column: 2; }
.ctl .a3-ic { background: var(--c-panel-2); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line); }
.ctl .a3-ic:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--c-cobalt); }
.ctl .a3-ic.ghost { background: transparent; box-shadow: none; }
.ctl .a3-ic[data-a3="bring"], .ctl .a3-ic[data-a3="goto"] { background: var(--c-cobalt); color: #0c0f1a; box-shadow: none; }
.ctl .a3-check-box { accent-color: var(--c-cobalt); }
.a2-players > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* the card: the moves with their words, right under who they are; the Admin tab's section: the icons first */
.a3-card { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px 12px; border-radius: var(--r-md); background: #eef1ff; box-shadow: inset 0 0 0 1px #d5dcff; }
.a3-card .pf-label { margin: 0; }
.a3-card .a3-quick.text .a3-ic { flex: 1 1 calc(50% - 6px); justify-content: start; }
.a2 > .a2-quick { padding-bottom: 2px; }
/* the small bar by a name */
.a3-pop { position: absolute; z-index: 6; display: grid; gap: 6px; padding: 8px 8px 9px; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 10px 30px rgba(20, 16, 8, .26), 0 0 0 1px rgba(29, 33, 38, .06); animation: a3in .14s ease-out; outline: none; }
.a3-pop-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; padding-left: 4px; }
.a3-pop-head strong { font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.a3-pop-head small { grid-column: 1; grid-row: 2; font-size: var(--t-xs); color: var(--muted); }
.a3-pop-x { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; }
@keyframes a3in { from { opacity: 0; transform: translateY(4px); } }
/* the Move picker */
.a3-picker { width: min(720px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 24px)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(20, 16, 8, .35); overflow: hidden; }
.a3-picker[open] { display: flex; flex-direction: column; }
.a3-pick-head, .a3-search-row, .a3-confirm { flex: none; }   /* only the places scroll; the head, the search and the confirm keep their size */
.a3-picker::backdrop { background: rgba(20, 24, 31, .42); }
.a3-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 6px 20px; }
.a3-pick-head h2 { margin: 0; font-size: var(--t-xl); line-height: 1.15; }
.a3-pick-head p { margin: 3px 0 0; font-size: var(--t-md); color: var(--muted); }
.a3-search-row { display: flex; align-items: center; gap: 8px; margin: 4px 16px 8px 20px; padding: 0 12px; height: 40px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.a3-search-row:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt); }
.a3-search-row .ic { color: var(--muted); }
.a3-search { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: var(--t-lg); }
.a3-groups { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px 20px; display: grid; gap: 14px; align-content: start; }
.a3-group h3 { margin: 0 0 7px; font-size: var(--t-sm); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.a3-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.a3-tile { width: 100%; display: grid; gap: 0; padding: 0; border: 0; border-radius: var(--r-md); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(20, 16, 8, .06); overflow: hidden; cursor: pointer; text-align: left; font: inherit; }
.a3-tile:hover, .a3-tile:focus-visible { box-shadow: inset 0 0 0 2px var(--cobalt), 0 4px 14px rgba(20, 16, 8, .12); }
.a3-pic { display: block; width: 100%; aspect-ratio: 176 / 112; object-fit: cover; background: #2c72b5 linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .08)); }
.a3-tile-name { display: block; padding: 7px 10px 8px; font-size: var(--t-md); font-weight: 700; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
.a3-none { margin: 8px 0; color: var(--muted); font-size: var(--t-md); }
.a3-confirm { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 16px 14px 20px; border-top: 1px solid var(--line); background: var(--paper-2); }
.a3-confirm[hidden] { display: none; }
.a3-confirm-pic { width: 84px; aspect-ratio: 176 / 112; border-radius: 8px; object-fit: cover; grid-row: span 2; }
.a3-confirm p { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.a3-confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* the full map: the picked dot's icons, the drop's confirm, Bring here on a place's card */
.a3-mapbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.a3-mapbar[hidden] { display: none; }
.a3-mapbar .a3-hint { font-size: var(--t-sm); color: var(--muted); }
.map-canvas.a3-dragging { cursor: grabbing; }
.a3-drop { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; width: min(420px, calc(100% - 28px)); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 12px 34px rgba(20, 16, 8, .3); outline: none; animation: a3in .14s ease-out; }
.a3-drop[hidden] { display: none; }
.a3-drop-pic { width: 96px; aspect-ratio: 176 / 112; border-radius: 9px; object-fit: cover; grid-row: span 2; }
.a3-drop-text strong { font-size: var(--t-lg); line-height: 1.3; }
.a3-drop-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.a3-here { display: grid; }
.a3-here[hidden] { display: none; }
.a3-here-btn { height: auto; min-height: 50px; justify-content: flex-start; gap: 10px; padding: 7px 14px 7px 13px; border-radius: var(--r-md); white-space: normal; text-align: left; background: #eef1ff; box-shadow: inset 0 0 0 1px #d5dcff; }
.a3-here-btn .ic { width: 20px; height: 20px; color: var(--cobalt-ink); }
.a3-here-note { margin: 0; font-size: var(--t-sm); color: var(--muted); }
@media (pointer: coarse), (max-width: 640px) {
  .a3-ic, .a3-check { width: 44px; height: 44px; border-radius: 12px; }
  .a3-ic .ic { width: 20px; height: 20px; }
  .a3-check-box { width: 22px; height: 22px; }
  .a3-quick.text .a3-ic { height: 44px; }
  .a3-btn { height: 44px; padding: 0 14px 0 11px; }
  .a3-pop-x { width: 44px; height: 44px; }
  .a3-search-row { height: 44px; }
  .fr-row.a3-row { grid-template-columns: auto minmax(0, 1fr); }
  .fr-row.a3-row > .a3-quick { grid-column: 1 / -1; justify-content: flex-start; padding-left: 50px; }
  .a3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .a3-pick-head { padding: 14px 12px 4px 16px; }
  .a3-search-row { margin: 4px 12px 8px 16px; }
  .a3-groups { padding: 0 12px 14px 16px; }
  .a3-mapbar .a3-hint { display: none; }
  .a3-drop { grid-template-columns: 76px minmax(0, 1fr); }
  .a3-drop-pic { width: 76px; }
}
@media (max-width: 640px) { .a3-picker { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } }
@media (prefers-reduced-motion: reduce) { .a3-pop, .a3-drop { animation: none; } }
/* ADMIN3 end */
/* TVLOUNGE: the TV window's Tap to unmute (ui/tv.js; in the controls, beside the picture and never over it: Twitch plays only
   when nothing covers its frame), the window below the rail's cards, and Twitch's frame at its documented least, 400 x 300,
   wherever the screen has room */
.tv-unmute { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: var(--r-pill); background: #eccb6a; color: #231a1c; font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer; white-space: nowrap; }
.tv-unmute[hidden] { display: none; }
.tv-unmute:hover { background: #f3d982; }
.tv-unmute svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-win.small .tv-unmute span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* folded: the icon, its name kept for screen readers */
.tv-win { z-index: 3; top: max(calc(var(--rail-top) + 46px), var(--tv-top, 0px)); transition: top .2s ease; }   /* below the rail's cards (ui/tv.js clearRail), and over their shadows (the rail is z 3 too, earlier in #app; sheets and the Menu stay above) */
.tv-win.twitch .tv-video { aspect-ratio: 8 / 5; }
@media (min-width: 641px) and (pointer: fine) { .tv-win.twitch { width: max(400px, min(480px, 40vw)); } }
@media (max-width: 640px), (pointer: coarse) { .tv-unmute { height: 40px; } .tv-win:has(.tv-unmute:not([hidden])) .tv-vol { display: none; } }   /* a phone: the volume makes room while Tap to unmute shows */
@media (prefers-reduced-motion: reduce) { .tv-win { transition: none; } }
/* TVLOUNGE end */

/* LAUNCHIN (owner, October 16: "when a launch goes off it should have an announcement and an option to purchase ... in game";
   "display coins of my picking under Highlighted"). The launch announcement card, the Highlighted chip in the dock, the
   Highlighted rows, and the owner's tab. ui/launchin.js places the card under the notification rail. */
.ln-card { position: fixed; z-index: 7; left: 50%; top: var(--rail-top); transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 40px 10px 10px; border-radius: var(--r-lg);
  background: #1d2126; color: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); animation: ln-in .28s ease-out both; pointer-events: auto; }
.ln-card.out { animation: ln-out .22s ease-in both; }
@keyframes ln-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ln-out { to { opacity: 0; translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .ln-card, .ln-card.out { animation: none; } }
.ln-card .ln-text { min-width: 0; }
.ln-card small { display: block; font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd25a; }
.ln-card strong { display: block; margin-top: 2px; font-size: var(--t-lg); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.ln-card .ln-acts { display: flex; gap: 6px; }
.ln-card .ln-acts .btn { min-height: 44px; min-width: 64px; justify-content: center; }
.ln-card .ln-acts .btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.ln-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #c9ced6; font-size: 20px; line-height: 1; cursor: pointer; }
.ln-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ln-art { flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px #e8b23a; object-fit: cover; }
.ln-card .ln-art { width: 40px; height: 40px; }
.ln-mono { display: inline-grid; place-items: center; background: var(--cobalt); color: #f3ead7; font-size: 11px; font-weight: 900; letter-spacing: .02em; overflow: hidden; }
@media (max-width: 640px) {
  .ln-card { grid-template-columns: auto 1fr; padding-right: 36px; }
  .ln-card .ln-acts { grid-column: 1 / -1; }
  .ln-card .ln-acts .btn { flex: 1; }
}
.lb-hl-ic { background: var(--ink); color: #ffd25a; }
.lb-hl-ic svg { fill: currentColor; stroke: none; }
.lb-act.lb-hl { position: relative; }
.lb-act.lb-hl .lb-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font-size: var(--t-xs); line-height: 18px; text-align: center; box-sizing: border-box; }
.lb-dock.lb-icons .lb-act.lb-hl .lb-count, .lb-act.lb-hl .lb-count:empty { position: absolute; top: -3px; right: -3px; }
.lb-act.lb-hl .lb-count:empty { display: none; }
@media (max-width: 640px), (pointer: coarse) { .lb-act.lb-hl .lb-count { position: absolute; top: -3px; right: -3px; } }
.lb-ic.lb-mini { width: 22px; height: 22px; vertical-align: -6px; margin-right: 6px; }
.lb-ic.lb-mini svg { width: 14px; height: 14px; }
.ln-hl { margin: 0 0 12px; padding: 10px 12px 12px; border-radius: var(--r-md); background: #fff6dc; }
.lb-body .ln-hl h3 { margin: 0 0 8px; color: var(--ink); }
.ln-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ln-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--paper-2); }
.ln-hl .ln-row { background: #fff; }
.ln-row .ln-art { width: 36px; height: 36px; }
.ln-row-acts { display: flex; gap: 6px; }
.ln-row-acts .btn { min-height: 44px; min-width: 60px; justify-content: center; }
@media (max-width: 420px) { .ln-row { grid-template-columns: auto 1fr; } .ln-row-acts { grid-column: 1 / -1; } .ln-row-acts .btn { flex: 1; } }
.ctl-highlight .ctl-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctl-highlight .ctl-add input[type="text"] { flex: 1 1 140px; min-height: 40px; }
.ctl-highlight .ctl-add input[translate="no"] { flex-basis: 260px; font-family: ui-monospace, monospace; }
.ctl-highlight .ctl-bad { color: var(--maroon); }
/* LAUNCHIN end */
/* HUDFIX (owner, October 16: "sound can get packed in settings, character can get packaged in profile, printer token and launch
   are always on main hud ... just clean"; "free camera mode is missing the ability to mute hud and take photo"): the Menu's seven
   tiles, Get $Printer with the Printer mark (the dock is on the HUD again: ui/launchbuy.js), your character on the profile's
   Overview, the free camera's Photo button and photo mode (ui/photo.js). */
/* the Menu: Games, Profile, Go Brrr, Garage, then First person, Free camera and Settings (two wide, it says whether sound is on) */
.pm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pm-tile[data-menu="settings"] { grid-column: span 2; }
@media (max-width: 640px), (pointer: coarse) {
  .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-tile[data-menu="settings"] { grid-column: 1 / -1; min-height: 56px; }   /* a row of its own at the foot: the icon, Settings, Sound on */
}
@media (pointer: coarse) and (max-height: 500px) {
  .pm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm-tile[data-menu="settings"] { grid-column: span 2; }
}
/* LAUNCHIN's Highlighted tile (only while its chip is not on the HUD): eight tiles, two rows of four; on a phone it shares the last row */
.pm-grid:has(> [data-menu="highlighted"]) > .pm-tile[data-menu="settings"] { grid-column: auto; }
@media (max-width: 640px), (pointer: coarse) { .pm-grid:has(> [data-menu="highlighted"]) > .pm-tile[data-menu="settings"] { grid-column: span 2; } }
@media (pointer: coarse) and (max-height: 500px) { .pm-grid:has(> [data-menu="highlighted"]) > .pm-tile[data-menu="settings"] { grid-column: auto; } }
/* Get $Printer: the Printer mark (the brand's pixel Printer) in a cream badge, wherever it shows */
.lb-ic.lb-mark { background: #f1e8d4; box-shadow: inset 0 0 0 1px rgba(60, 48, 24, .14); overflow: hidden; }
.lb-mark img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; transform: scale(1.22) translateY(-2%); pointer-events: none; }   /* the mark's Printer fills the badge (its file has a clear border) */
@media (min-width: 641px) and (pointer: fine) { .lb-dock:not(.lb-row) { align-items: stretch; } }   /* a computer: the two pills one width, one under the other */
/* the profile's Overview: your character, its face, its name and Change your character */
.pf-char { display: flex; align-items: center; gap: 12px; }
.pf-char-face { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; font-weight: 800; font-size: 18px; color: var(--muted); }
.pf-char-face img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pf-char-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pf-char-who strong { font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-character { min-height: 44px; }
/* PROFILEFIX: the button under the name everywhere (beside it, it cut "CHARACTER" and the look's name in the side sheet) */
.pf-char { flex-wrap: wrap; } .pf-character { flex: 1 1 100%; justify-content: center; }
/* the free camera's bar: Photo, with its key */
.cam-photo { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.cam-photo:hover { background: rgba(255, 255, 255, .24); }
.cam-photo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cam-photo kbd { font-size: 10px; padding: 1px 5px; border: 0; background: rgba(255, 255, 255, .2); color: #fff; }
@media (max-width: 640px), (pointer: coarse) { .cam-photo { height: 44px; flex: 1 1 0; justify-content: center; } }
/* photo mode: only the world shows (the HUD, the name tags and the toasts hide), a line that fades, the shutter */
body.photo-on #app > :not(#scene):not(.hf-layer):not(.hf-flash) { visibility: hidden !important; }
.hf-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.hf-layer[hidden] { display: none; }
.hf-hint { position: absolute; left: 50%; top: calc(var(--top) + 4px); transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; border-radius: 18px; background: rgba(20, 24, 31, .8); color: #fff; font-size: var(--t-sm); font-weight: 650; line-height: 1.35; text-align: center; transition: opacity .6s ease; }
.hf-hint.gone { opacity: 0; }
.hf-shutter { position: absolute; left: 50%; bottom: calc(var(--bottom) + 10px); transform: translateX(-50%); width: 70px; height: 70px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 6px 22px rgba(0, 0, 0, .28); display: grid; place-items: center; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hf-ring { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px rgba(20, 24, 31, .85); transition: transform .08s ease; }
.hf-shutter:active .hf-ring { transform: scale(.9); }
.hf-flash { position: absolute; inset: 0; z-index: 21; background: #fff; opacity: 0; pointer-events: none; }
.hf-flash.go { animation: hf-flash .45s ease-out; }
@keyframes hf-flash { from { opacity: .8; } to { opacity: 0; } }
/* the photo's sheet: the picture, Save image, Share, Post to X, the X line */
.hf-shot { display: block; width: 100%; height: auto; max-height: min(42dvh, 460px); object-fit: contain; margin: 12px 0 4px; border-radius: var(--r-md); background: #1f242c; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); }   /* a tall phone photo keeps Save, Share and Post to X in view */
.hf-acts { flex-wrap: wrap; }
.hf-acts .btn { flex: 1 1 0; min-width: 96px; padding-inline: 10px; white-space: nowrap; justify-content: center; min-height: 44px; }   /* SHARECLEAN: Share to X, Copy and Save image side by side */
.hf-x-linked { margin: 10px 0 0; font-size: var(--t-sm); font-weight: 750; color: var(--cobalt-ink); }
/* SHARECLEAN: Retake is a quiet line under the three buttons (Share to X, Copy, Save image), no Details fold */
.hf-retake { display: block; min-height: 44px; margin: 4px auto 0; padding: 0 12px; border: 0; background: none; font: inherit; font-size: var(--t-sm); font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hf-retake:hover, .hf-retake:focus-visible { color: var(--cobalt-ink); }
.hf-status { min-height: 18px; margin: 6px 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--cobalt-ink); }
@media (prefers-reduced-motion: reduce) { .hf-flash.go { animation: none; } .hf-hint, .hf-ring { transition: none; } }
/* HUDFIX end */
/* BOARDSPFP: a player's picture wherever their profile shows (ui/profile-avatar.js avatarBox): the X picture when their
   Printer profile shows X publicly, else their initial on a color of their name; sized before it loads, so nothing moves */
.avatar.pa { background: var(--pa, var(--maroon)) !important; line-height: 1; letter-spacing: 0; text-transform: uppercase; }   /* !important: release.css (live) pins .avatar to the maroon */
.avatar.pa-sm { box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .14); font-weight: 800; }
.pa-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
.pa-name > .pa-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-who.pa-who { grid-template-columns: minmax(0, 1fr); }
.fr-who.pa-who > .pa-name { justify-self: start; }
.fr-who.pa-who small { padding-left: 37px; }
.pa-wrap { position: relative; display: inline-flex; flex: none; }
.pa-wrap .fr-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--paper-2); }
.fr-row.on .pa-wrap .fr-dot { box-shadow: 0 0 0 2px var(--paper-2); }
.pc-row .pa { margin-right: 2px; }
.pc-row .pa + strong { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list .who .chat-av { display: inline-grid; vertical-align: -4px; margin-right: 6px; }
/* the Fish Journal's record lists: the catcher's picture and the fish's */
.list.board li:has(> .pa-name) { align-items: center; }
.list.board li > .pa-name { flex: 1 1 auto; }
.list.board li > strong:has(.fish-thumb) { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.fish-thumb { width: auto; image-rendering: pixelated; flex: none; }
/* BOARDSPFP end */
/* LAUNCHNATIVE (owner, October 16: "i want it all inside the game native so its clean and smooth"): Launch a coin, Mint and Buy as
   the game's own sheets in the dock's overlay (ui/launchnative.js). One column, the overlay's paper and cobalt, 44 px targets,
   the main button in reach at the bottom as on the other launch sheets. */
.ln2 > .lb-actions { position: sticky; bottom: -12px; z-index: 2; margin-left: -20px; margin-right: -20px; padding: 10px 20px 12px; background: linear-gradient(rgba(255, 251, 242, 0), var(--paper) 22%); }
.lb-alt { margin: 12px 0 4px; }
.lb-alt .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
.ln2-standin { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-md); background: #fff4d9; color: #6a4b00; font-size: var(--t-sm) !important; font-weight: 650; line-height: 1.4; }
.ln2-alert { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-md); background: #fde8ea; color: var(--maroon); font-weight: 650; }
.ln2-note { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.ln2-note p { margin: 0 0 8px; }
.ln2-small { font-size: var(--t-sm) !important; line-height: 1.45; }
.ln2-kinds { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.ln2-kind { flex: 1 1 0; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-md); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ln2-kind.on { background: var(--cobalt); color: #fff; }
.ln2-pic { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; min-height: 64px; }
.ln2-pic:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt-ink); }
.ln2-pic.bad, .ln2-field.bad input, .ln2-field.bad textarea { box-shadow: inset 0 0 0 2px var(--maroon); }
.ln2-pic img, .ln2-pic-empty { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.ln2-pic-empty { display: grid; place-items: center; background: #e9edff; color: var(--cobalt); font-size: 28px; font-weight: 700; }
.ln2-pic-text { display: grid; gap: 2px; min-width: 0; }
.ln2-pic-text strong { font-size: var(--t-lg); color: var(--cobalt-ink); }
.ln2-pic-text small { font-size: var(--t-sm); color: var(--muted); }
.ln2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ln2-field { margin-top: 12px; }
.ln2-field input, .ln2-field textarea { width: 100%; min-height: 44px; font-size: 16px; }
.ln2-err { color: var(--maroon) !important; font-weight: 650 !important; }
.ln2-modes { margin: 16px 0 0; padding: 0; border: 0; display: grid; gap: 6px; }
.ln2-modes legend { margin: 0 0 8px; padding: 0; font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ln2-mode { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--paper-2); cursor: pointer; }
.ln2-mode.on { background: #e9edff; box-shadow: inset 0 0 0 2px var(--cobalt); }
/* BRROK INSTANT: the holder reward pair, as on the Launcher's page */
.ln2-pairs { margin: 14px 0 0; padding: 0; border: 0; display: grid; grid-template-columns:minmax(0,1fr); gap: 6px; min-width:0; max-width:100%; }
.ln2-pairs > * { min-width:0; }
.ln2-basket-row strong { overflow-wrap:anywhere; }
.ln2-pairs legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.ln2-pair-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ln2-pair { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 0; background: var(--paper-2); color: inherit; font-weight: 700; cursor: pointer; }
.ln2-pair.on { background: #e9edff; box-shadow: inset 0 0 0 2px var(--cobalt); }
.ln2-pair-more { min-height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line, #ddd); background: transparent; font: inherit; max-width: 100%; }
.ln2-pairs small { color: var(--muted, #6b6b6b); }
.ln2-basket-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.ln2-basket-row label { display:flex; align-items:center; gap:4px; }
.ln2-basket-row input { width:78px; min-height:42px; padding:8px; border:1px solid var(--line); border-radius:8px; font:inherit; color:inherit; background:var(--paper); }
.ln2-nft { margin:18px 0; padding:16px; border:1px solid var(--line); border-radius:12px; }
.ln2-nft h3 { margin-top:0; }
.ln2-nft input[type=file] { max-width:100%; }
.ln2-basket-total { font-weight:700; text-align:right; }
.ln2-basket-total[aria-invalid=true] { color:#a92f2f; }
.ln2-pair { min-height:44px; }
body.map-docked .lb-head-ic .lb-ic { width:30px; height:30px; border-radius:9px; }
body.map-docked .lb-head-ic .lb-ic svg { width:20px; height:20px; }
.ln2-mode input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cobalt); }
.ln2-mode-text { display: grid; gap: 2px; }
.ln2-mode-text strong { font-size: var(--t-lg); }
.ln2-mode-text small { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.ln2-working { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 14px 12px; border-radius: var(--r-md); background: var(--paper-2); }
.ln2-working p { margin: 0 !important; font-weight: 650; }
.ln2-working .lp-spin { flex: none; }
.ln2-thumb { flex: none; border-radius: 10px; object-fit: cover; }
.ln2-coin { justify-content: flex-start; }
.ln2-checks, .ln2-steps, .ln2-fees { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ln2-checks li, .ln2-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--t-md); line-height: 1.4; }
.ln2-checks li > span:last-child, .ln2-steps li > span:last-child { display: grid; gap: 4px; min-width: 0; }
.ln2-checks small { color: var(--muted); }
.ln2-checks li.no { background: #fde8ea; }
.ln2-steps { margin: 12px 0 0; }
.ln2-steps li:not(.ok) { color: var(--muted); }
.ln2-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-3); color: #fff; }
.ln2-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ln2-mark.ok { background: #1f9d55; }
.ln2-checks li.no .ln2-mark { background: var(--maroon); }
.ln2-steps .ln2-mark.no { color: transparent; }
.ln2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.ln2-split > div { padding: 9px 12px; border-radius: var(--r-md); background: var(--paper-2); min-width: 0; }
.ln2-split dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ln2-split dd { margin: 2px 0 0; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ln2-wallet { margin: 14px 0 0; padding: 14px 14px 4px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt); }
.ln2-wallet h3 { margin: 4px 0 6px !important; font-size: var(--t-xl) !important; text-transform: none !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
.ln2-warn { padding: 8px 10px; border-radius: var(--r-md); background: #fff4d9; font-weight: 650; }
.ln2-fees li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--paper-2); }
.ln2-fees code { font: 600 12px/1.35 ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
.ln2-done { color: #17773f; font-weight: 800; }
h3.ln2-done { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--t-xl) !important; color: #17773f !important; }
.ln2-buy { margin: 14px 0 0; padding: 12px 14px 4px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ln2-buy h3 { margin-top: 2px !important; }
.ln2-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }   /* three a row: 0.05 0.1 0.25 / 0.5 1 Other */
.ln2-amt { min-width: 0; min-height: 44px; padding: 0 6px; border: 0; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.ln2-amt.on { background: var(--cobalt); color: #fff; }
.ln2-other { display: flex; }
.ln2-other input { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; font-size: 16px; font-weight: 700; }
.ln2-quote { margin-top: 12px; }
@media (max-width: 640px) {
  .ln2 > .lb-actions { margin-left: -16px; margin-right: -16px; padding: 10px 16px 12px; }
  .ln2-row { grid-template-columns: 1fr; }
  .ln2-kind { font-size: var(--t-sm); padding: 0 8px; }
}
/* LAUNCHNATIVE end */
/* TXFLOW start: one checkout, the same in every flow (ui/checkout.js). The forms before it keep their main button in reach at
   the foot of the sheet, like the checkout's Pay; one plan is a fact, not a choice; the local preview's stand-in for the
   wallet's review; 44 px on touch */
.sheet-inner > .actions.tx-foot { position: sticky; bottom: 0; z-index: 2; margin: 14px -22px 0; padding: 10px 22px 12px; background: linear-gradient(rgba(255, 251, 242, 0), var(--paper) 22%); }
.tx-plan { margin: 0 !important; display: inline-flex; justify-self: start; padding: 9px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.checkout .callout.warn strong, .checkout .callout > strong { display: block; margin-bottom: 2px; }
.checkout .callout p { margin: 4px 0 0; }
.checkout > .payee { margin-top: 2px; }
.tx-wallet { margin: 14px 0 0; padding: 14px 14px 4px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--cobalt), 0 10px 26px rgba(47, 75, 255, .12); }
.tx-wallet[hidden] { display: none; }
.tx-wallet-head { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--cobalt); }
.tx-wallet-amt { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tx-wallet-amt strong { font-size: 22px; letter-spacing: -.01em; }
.tx-wallet-amt code { font: 600 12px ui-monospace, monospace; background: var(--paper-2); padding: 3px 7px; border-radius: 7px; }
.tx-wallet .actions { justify-content: flex-end; }
@media (pointer: coarse) {
  .checkout .btn, .checkout .sheet-back, .sheet-inner > .actions.tx-foot .btn, .tx-wallet .btn, .sheet-inner .callout .btn.small { min-height: 44px; }
  .checkout .sheet-back { padding: 0 10px; }
}
/* TXFLOW end */
/* TVSCREEN: the TV Lounge's video plays ON its big screen (ui/tv.js). The canvas has alpha: over its black background it looks
   exactly as before everywhere; in the lounge, while a frame plays, the canvas is see-through on the screen's cut-out only and
   the frame's layer (behind the canvas, never a pointer) shows there, carried by one matrix3d. Watch closer lifts the layer
   over the room, the frame flat and big below the controls (the same frame: nothing reloads). */
#scene { background: #000; }
body.tv-cinema #scene { background: transparent; }
.tv-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
.tv-layer[hidden] { display: none; }
.tv-holder { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; background: #000; backface-visibility: hidden; will-change: transform; }
.tv-layer.closer { z-index: 3; pointer-events: auto; background: rgba(12, 9, 11, .88); }
.tv-layer.closer .tv-holder { will-change: auto; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
body.photo-on #app > .tv-layer:not(#scene) { visibility: visible !important; }
.tv-win .tv-closer { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer; white-space: nowrap; }
.tv-win .tv-closer[hidden] { display: none; }
.tv-win .tv-closer:hover { background: rgba(255, 255, 255, .24); }
.tv-win .tv-closer[aria-pressed="true"] { background: #eccb6a; color: #231a1c; }
.tv-win .tv-closer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tv-win > .tv-why { position: static; margin: 0 10px 8px; }
@media (max-width: 640px), (pointer: coarse) {
  .tv-win .tv-closer { height: 44px; }
  .tv-win:has(.tv-unmute:not([hidden])) .tv-closer span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* while Tap to unmute shows: the icon, its name kept for screen readers */
}
.tv-win .tv-closer.ask { background: #eccb6a; color: #231a1c; box-shadow: 0 0 0 3px rgba(236, 203, 106, .35); }   /* TVSCREEN: Twitch waits at its play button on the screen: press play in Watch closer */
@media (min-width: 641px) and (pointer: fine) { .tv-win, .tv-win.twitch { width: min(620px, 52vw); } }   /* TVSCREEN: the controls only now (the picture is on the screen): room for the channel's name beside both pills */

/* OWNER FIX 6: the underwater walk's tint (games/expansion.js) */
.underwater-tint { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(70, 160, 185, .18), rgba(20, 70, 95, .42)); z-index: 2; }

/* BUILDER: the Decor sheet's grid */
.land-decor{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 14px}.land-decor-card{border:1px solid #d9d2c3;border-radius:12px;padding:10px 12px;background:#fffdf8}.land-decor-card p{margin:4px 0 8px;font-size:13px}.land-decor-card .actions{margin:0}

/* Navigation shares the central status rail, clear of People and its close control. */
.rail > .waypoint { position: relative; inset: auto; translate: none; transform: none; order: 3; margin: 0; pointer-events: auto; max-width: min(340px, calc(100vw - 32px)); }
.waypoint .wp-x { width: 44px; height: 44px; }
@media (min-width: 641px) and (pointer: fine) {
  #app:has(.people.open) .rail { left: calc(50% + 175px); max-width: calc(100vw - 374px); }
}
@media (min-width: 641px) and (max-width: 1000px) and (pointer: fine) {
  #app:has(.people.open) .rail { top: calc(var(--rail-top) + 112px); }
}
/* CHESTS: the chest sheet and the Chests tab */
.chest-sheet h3 { margin: 18px 0 6px; font-size: 15px; }
.chest-sheet .chest-sum { margin: 4px 0 8px; }
.chest-bar { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.chest-bar span { display: block; height: 100%; background: #e8bd52; border-radius: 999px; transition: width .4s ease; }
.chest-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chest-amounts .btn { min-height: 44px; }
.chest-raid.on { padding: 10px 12px; border-radius: 12px; background: rgba(232, 189, 82, .18); }
.chest-raid .good, .chest-sheet .good { color: #304bc4; font-weight: 600; }
.tag.chest-tag { background: #2b1d10; color: #e8bd52; }
.ctl-chest-place { display: grid; gap: 8px; }
.ctl-chest-raid { display: grid; gap: 6px; margin: 8px 0; }
.ctl-airdrop table { width: 100%; font-size: 12px; border-collapse: collapse; }
.ctl-airdrop td { padding: 3px 4px; border-top: 1px solid rgba(0, 0, 0, .08); word-break: break-all; }
.ctl-input { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .18); font: inherit; width: 100%; box-sizing: border-box; }
#ctl-pane-chests .ctl-input { background: var(--c-panel-2); color: var(--c-text); border-color: var(--c-line); }
.ctl-chest-custom:not([hidden]) { display: grid; gap: 6px; }

/* Mobile stability: keep controls in fixed lanes while events and action prompts change. */
@media (max-width: 640px), (pointer: coarse) {
  body.sp-hud .people, body.sp-hud #app:has(.brrr-mini:not([hidden])) .people {
    top: var(--top); bottom: auto; left: calc(var(--left) + 2 * (var(--hud-h) + 8px));
  }
  body.sp-hud .minimap, body.sp-hud #app:has(.brrr-mini:not([hidden])) .minimap {
    bottom: calc(var(--brrr-bottom) + 86px);
  }
  body.sp-hud .lb-dock { top: calc(var(--top) + var(--hud-h) + 12px); bottom: auto; }
  body.sp-hud:has(.consent) .lb-dock { top: calc(var(--top) + var(--hud-h) + 80px); }
}
.market-sheet {padding:8px 4px;color:#243347;line-height:1.5}
.market-sheet h2 {font-size:26px;margin:0 0 14px}
.market-card,.market-create {padding:18px 0;border-top:1px solid #d9d0c1}
.market-move{padding:18px 0;border-top:1px solid var(--line)}
.market-move h3{margin:0 0 4px}
.market-nudges{display:grid;grid-template-columns:repeat(4,44px);justify-content:center;gap:8px;margin:10px 0}
.market-nudges .btn{width:44px;min-width:44px;min-height:44px;padding:0;font-size:20px}
.market-add{margin-top:16px;border-top:1px solid var(--line)}
.market-add summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:650}
.market-add summary::after{content:'+';margin-left:auto;font-size:22px;font-weight:400}
.market-add[open] summary::after{content:'-'}
.market-card h3 {margin:0 0 4px}
.market-sheet label {display:grid;gap:6px;margin:10px 0;font-weight:600}
.market-sheet input,.market-sheet select,.world-tools select {width:100%;min-height:44px;padding:10px 12px;border:1px solid #c9bda7;border-radius:8px;font:inherit;background:#fffbf3;color:#243347}
.market-fields {display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.market-plan{display:block;width:min(100%,240px);height:auto;aspect-ratio:1;margin:auto;cursor:crosshair;border-radius:8px;touch-action:none}
.market-plan:focus-visible{outline:3px solid #2f4bff;outline-offset:3px}.market-placement p{font-size:13px;text-align:center}
.market-sheet .actions,.world-tools .actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.world-tools {--c-text:#243347;--c-muted:#5a6775;color:#243347;margin-bottom:20px;padding:18px;background:#f5eddd;border:1px solid #d7c8ae;border-radius:12px}
.world-tools h3 {margin:0 0 8px}.world-tools p {max-width:60ch;line-height:1.5}
@media(max-width:420px){.world-tools .btn{flex:1 1 45%;min-height:44px}}
/* The workshop keeps its completed station and shows the next renewable order. */
.supply-order{margin:18px 0;padding:18px;border:1px solid #cfc2a5;background:#f1e8d4;border-radius:10px;color:#243347}
.supply-order h3{margin:0 0 10px}.supply-order progress{accent-color:#2f4bff}.supply-order .btn{width:100%}
.roof-lookout-sheet{display:grid;gap:12px;padding:8px 4px;line-height:1.5}.roof-lookout-sheet h2,.roof-lookout-sheet p{margin:0}.roof-lookout-sheet .btn{min-height:44px;white-space:normal}

/* Persistent manual printer. The existing mini press stays clear of the mobile map and action lane. */
.brrr-mini-name {font-size:11px;font-weight:750;line-height:1.2;color:var(--ink)}
@media(max-width:640px),(pointer:coarse){
  body.sp-hud .brrr-mini {gap:6px;padding:6px;max-width:calc(100vw - var(--joy-left) - var(--act-right) - var(--act) - 12px)}
  body.sp-hud .brrr-mini-press {width:54px;height:58px;flex:none}
  body.sp-hud .brrr-mini-info {min-width:48px;max-width:72px;gap:1px;overflow:hidden}
  body.sp-hud .brrr-mini-info strong {font-size:15px}
  body.sp-hud .brrr-mini-acts {flex:none}
  body.sp-hud .brrr-mini-acts [data-k="away"] {display:none}
}

/* Printer tweet-to-launch: source stays visible beside the editable launch details. */
.lb-titles .eyebrow {text-transform:none;letter-spacing:.02em}
.ln2-post {padding:16px;border:1px solid #d4cbb9;border-left:4px solid #304bdb;background:#f6f1e7;border-radius:8px;color:#202b3d;margin:4px 0 18px}
.ln2-post header {display:flex;align-items:center;justify-content:space-between;gap:12px}
.ln2-post header strong {font-size:16px}
.ln2-post-source {color:#263fba;font-size:13px;text-underline-offset:3px}
.ln2-post-text {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;margin:12px 0;font-size:14px}
.ln2-post small {display:block;line-height:1.5;color:#525b69;margin-top:8px}
.degen-post-setting {display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 0;font-size:13px;line-height:1.4;cursor:pointer}
.degen-post-setting input {width:18px;height:18px;flex:0 0 18px;accent-color:#304bdb;margin:0}
.degen-post-setting input:focus-visible {outline:2px solid #304bdb;outline-offset:3px}
.degen-terminal>.degen-post-setting {margin:0 0 10px}
@media(max-width:480px) {.ln2-post {padding:12px}.ln2-post header {align-items:flex-start}.ln2-post-source {flex-shrink:0}}

/* Mobile play: quiet edges, a clear centre and tools revealed only when needed. */
.pm-shade {display:none}
.pp-close {margin-left:auto}
.pm-head {display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px;font-size:20px}
@media (max-width:640px), (pointer:coarse) {
  body.sp-hud {
    --joy:104px;--joy-bottom:calc(var(--safe-b) + 24px);
    --jump:60px;--jump-bottom:calc(var(--safe-b) + 32px);
    --act:56px;--act-1:calc(var(--jump-bottom) + var(--jump) + 14px);
    --act-2:calc(var(--act-1) + var(--act) + 14px);
  }
  body.sp-hud .people,body.sp-hud .sp-emote-btn {display:none!important}
  body.sp-hud #visits {display:none!important}
  body.sp-hud .hud-top {gap:8px}
  body.sp-hud .hud-top .top-actions {margin-left:auto}
  body.sp-hud #link-wallet {max-width:144px;min-height:44px;font-size:13px}
  body.sp-hud .minimap,body.sp-hud #app:has(.brrr-mini:not([hidden])) .minimap {
    --mm:64px;top:calc(var(--top) + 56px);bottom:auto;left:var(--left);right:auto;
  }
  body.sp-hud .minimap .mm-place {display:none}
  body.sp-hud .lb-dock,body.sp-hud:has(.consent) .lb-dock {
    top:calc(var(--top) + 56px);bottom:auto;right:var(--right);gap:8px;
  }
  body.sp-hud .lb-act {width:44px;height:44px;min-height:44px}
  body.sp-hud .lb-act .lb-ic {width:30px;height:30px}
  body.sp-hud .brrr-entry {
    top:auto;bottom:calc(var(--joy-bottom) + var(--joy) + 14px);left:var(--joy-left);right:auto;
    width:52px;height:52px;min-height:52px;padding:7px;border-radius:14px;
  }
  body.sp-hud .brrr-entry .brrr-icon {width:32px;height:32px;padding:3px;flex:none}
  body.sp-hud .brrr-entry .brrr-label {display:none}
  body.sp-hud .brrr-mini {bottom:calc(var(--joy-bottom) + var(--joy) + 12px);left:var(--joy-left);right:auto;max-width:calc(100vw - 116px)}
  body.sp-hud .brrr-mini-acts [data-k="away"] {display:block}
  body.sp-hud .joy {background:rgba(255,251,242,.12);box-shadow:inset 0 0 0 1.5px rgba(255,251,242,.52);opacity:.6;transition:opacity .15s}
  body.sp-hud .joy .knob {background:rgba(255,251,242,.72);width:42%;height:42%;margin:-21%}
  body.sp-hud .joy.active {opacity:1;background:rgba(255,251,242,.24)}
  body.sp-hud .jump {font-size:14px;background:rgba(255,251,242,.94)}
  body.sp-hud .door-prompt span {font-size:14px;max-width:min(210px,calc(100vw - 138px));padding:7px 10px}
  body.sp-hud .pm-shade:not([hidden]) {display:block;position:fixed;inset:0;z-index:5;border:0;background:rgba(24,30,38,.26)}
  body.sp-hud .pm-panel {
    z-index:6;top:auto;bottom:var(--bottom);left:var(--left);right:var(--right);width:auto;
    max-height:calc(100dvh - var(--top) - var(--hud-h) - 28px);padding:14px;gap:10px;
    border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 38px #1d212630;
  }
  body.sp-hud .pm-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  body.sp-hud .pm-tile,body.sp-hud .pm-tile[data-menu="settings"] {
    grid-column:auto;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;
    justify-items:start;align-content:center;min-height:64px;padding:10px;column-gap:8px;text-align:left;border-radius:10px;
  }
  body.sp-hud .pm-ic {grid-row:1 / span 2;width:30px;height:30px;align-self:center;background:transparent;box-shadow:none}
  body.sp-hud .pm-tile strong {grid-column:2;grid-row:1;font-size:14px;line-height:1.25}
  body.sp-hud .pm-tile small {grid-column:2;grid-row:2;font-size:12px;white-space:normal;display:block}
  body.sp-hud .pm-tile[data-menu="garage"] .pm-ic {color:var(--ink)}
  body.sp-hud .pm-tile kbd {display:none}
  body.sp-hud .pm-tile:active,body.sp-hud .lb-act:active {background:var(--paper-3);transform:scale(.97)}
  body.sp-hud .chat:not(.min) {top:auto;bottom:var(--bottom);left:var(--left);right:var(--right);width:auto;height:min(50dvh,380px);max-height:calc(100dvh - var(--top) - 64px);z-index:6}
  body.sp-hud .chat:not(.min) .chat-tab {height:44px;font-size:14px}
  body.sp-hud .chat-form input {font-size:16px}
  body.sp-hud .pp-panel {z-index:6;font-size:14px;max-height:65dvh!important}
  body.sp-hud:is(.sp-menu-open,.chat-open):not(.cam-on) :is(.touch,.minimap,.lb-dock,.brrr-entry,.brrr-mini,.door-prompt,.fish-prompt),
  body.sp-hud:has(#sheet:not([hidden])) :is(.touch,.minimap,.lb-dock,.brrr-entry,.brrr-mini,.door-prompt,.fish-prompt),
  body.sp-hud:has(dialog[open],.people.open) :is(.touch,.minimap,.lb-dock,.brrr-entry,.brrr-mini,.door-prompt,.fish-prompt) {visibility:hidden}
  body.sp-hud .consent {font-size:12px;max-width:calc(100vw - 104px);padding-left:10px}
  body.sp-hud .consent-ok {min-width:44px;padding:0 10px}
  body.sp-hud:has(.consent:not(.out)) .rail {top:calc(var(--top) + 64px)}
  body.sp-hud:has(.consent:not(.out)) .consent {max-width:calc(100vw - 32px)}
  body.sp-hud.sp-emotes-open .touch {visibility:hidden}
}
@media (pointer:coarse) and (max-height:500px) {
  body.sp-hud {--joy:88px;--joy-bottom:calc(var(--safe-b) + 16px);--jump:56px;--jump-bottom:calc(var(--safe-b) + 20px)}
  body.sp-hud .minimap,body.sp-hud #app:has(.brrr-mini:not([hidden])) .minimap {--mm:52px}
  body.sp-hud .lb-dock,body.sp-hud:has(.consent) .lb-dock {flex-direction:row}
  body.sp-hud .pm-panel {left:calc(var(--left) + 92px);right:calc(var(--right) + 64px);max-height:calc(100dvh - 2 * var(--bottom))}
  body.sp-hud .pm-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  body.sp-hud .pm-tile {min-height:54px;padding:7px}
}
@media (prefers-reduced-motion:reduce) {.joy,.pm-tile,.lb-act {transition:none!important}}

/* Owner's map-led HUD: one vertical menu and a single navigation group. */
body.map-docked .hud-top > .brand,body.map-docked .help,
body.map-docked .chat.min,body.map-docked .people,
body.map-docked .sp-emote-btn,body.map-docked .lb-dock {display:none!important}
body.map-docked.sp-hud #visits.door:not([hidden]) {display:flex!important;position:static;top:auto;left:auto;width:auto;height:44px;margin:0 auto 0 0;transform:none}
body.map-docked #visits .visits-btn {height:44px;min-height:44px;width:auto;min-width:110px;padding:0 6px 0 12px;font-size:13px;gap:7px;border-radius:999px;background:var(--paper);color:var(--ink)}
body.map-docked #visits .visits-od {font-size:16px}
body.map-docked #visits .visits-live {display:block}
body.map-docked #visits .visits-key {position:static;display:inline-flex;align-items:center;min-height:30px;padding:0 8px;font-size:12px}
body.map-docked #visits .visits-word {display:inline}
body.map-docked .brrr-arrow {top:calc(var(--top) + 56px);bottom:auto;left:var(--left);right:auto;max-width:180px}
body.map-docked .pm-panel {width:min(280px,calc(100vw - var(--left) - var(--right)));left:auto;right:var(--right);padding:12px;gap:8px}
body.map-docked .pm-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body.map-docked .pm-tile,body.map-docked .pm-tile[data-menu="settings"] {grid-column:auto;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;align-content:center;min-height:56px;padding:9px;column-gap:7px;text-align:left;border-radius:10px;grid-auto-flow:row}
body.map-docked .pm-tile[data-menu="profile"],body.map-docked .pm-tile[data-menu="photo"],body.map-docked .pm-tile[data-menu="settings"] {grid-column:1 / -1}
body.map-docked .pm-ic {grid-column:1;grid-row:1 / span 2;width:28px;height:28px;background:transparent;box-shadow:none;align-self:center}
body.map-docked .pm-tile strong {grid-column:2;grid-row:1;font-size:14px;line-height:1.3}
body.map-docked .pm-tile small {grid-column:2;grid-row:2;font-size:12px;white-space:normal;display:block}
body.map-docked .pm-tile kbd {display:none}
.pm-home {display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--muted);font-size:13px;text-decoration:none;border-top:1px solid var(--line)}
body.map-docked .pp-panel .fr-head {flex-wrap:wrap;gap:6px}
body.map-docked .ik-tabs button span {display:block;font-size:12px}
/* Halloween 2026: progress in the existing character picker. */
.hw-progress {background:#fcf5e9;border:1px solid #cfb496;border-left:4px solid #b55126;border-radius:10px;padding:14px 16px;margin:12px 0;color:#30251f}
.hw-progress h3 {font-size:17px;margin:0 0 6px}
.hw-progress p {margin:6px 0;line-height:1.45}
.hw-progress .hw-total {font-weight:700;font-size:15px}
.hw-step {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;margin:14px 0}
.hw-step strong {font-size:12px;color:#704727}
.hw-step progress {grid-column:1/-1;display:block;width:100%;height:8px;accent-color:#b55126;border:0;border-radius:4px;overflow:hidden}

.hw-step progress::-webkit-progress-bar {background:#e5d6c1;border-radius:4px}
.hw-step progress::-webkit-progress-value {background:#b55126;border-radius:4px}
.hw-progress .note {color:#6c5545;font-size:12px}
.hw-card-rule {display:block;font-size:11px;line-height:1.4;padding:2px 8px 8px;color:inherit;white-space:normal}
@media(max-width:640px){.hw-progress{padding:12px}.hw-step{gap:6px 8px}.hw-step span{font-size:12px}}


/* Desktop keeps the original map, surrounding icons and top-right Menu. */
@media (min-width:641px) and (pointer:fine) {
  body.map-docked .top-actions {margin-left:auto}
.map-dock {position:absolute;right:var(--right);bottom:var(--bottom);width:244px;height:284px;pointer-events:none;z-index:2}
body.map-docked #app .map-dock .minimap {--mm:172px;position:absolute;left:36px;right:auto;bottom:0;top:auto;margin:0;pointer-events:auto}
.md-actions {position:absolute;inset:0;pointer-events:none}
.md-action {position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ded6c5;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 3px 10px #18202a20;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.md-action svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.md-action img {width:28px;height:28px;object-fit:contain}
.md-action:active {background:var(--paper-3);transform:scale(.95)}
.md-messages {left:0;top:108px}.md-emotes {left:50px;top:72px}.md-friends {left:100px;top:56px}.md-launch {left:150px;top:72px}.md-buy {left:200px;top:108px}.md-mute {left:200px;top:56px}
.md-launch {background:var(--cobalt-ink);color:#fff;border-color:var(--cobalt-ink)}
.md-photo {left:-16px;bottom:0;top:auto}
.md-count {position:absolute;right:-3px;top:-4px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:var(--cobalt-ink);color:#fff;font-size:11px;line-height:19px;text-align:center}
body.map-docked:is(.cam-on,.building,.painting,.driving,.pb-on,.skill-on,.casino-seated,.ctl-open) .map-dock {visibility:hidden}
body.map-docked #app .map-dock .minimap {visibility:inherit}

  body.map-docked .map-dock {z-index:7}
  body.map-docked .md-toggle {display:none}
  body.map-docked .md-action[aria-expanded="true"] {background:var(--ink);color:var(--paper);border-color:var(--ink)}
  body.map-docked .pp-panel {left:var(--left);top:calc(var(--top) + 56px);max-height:calc(100dvh - var(--top) - 80px)}
  body.map-docked.sp-emotes-open .hud.emotes {left:auto;right:calc(var(--right) + 264px);bottom:var(--bottom);transform:none;max-width:calc(100vw - var(--left) - var(--right) - 280px);flex-wrap:wrap}
  body.map-docked #sheet {right:calc(var(--right) + 264px);max-width:calc(100vw - var(--left) - var(--right) - 280px)}
  body.map-docked .lb-sheet {width:min(720px,calc(100vw - 304px));margin:auto calc(var(--right) + 264px) auto auto}
  body.map-docked .lb-sheet::backdrop {background:rgba(28,24,16,.16);backdrop-filter:none}
}




/* Keep chest placement results inside the Owner panel that initiated them. */
.ctl-chest-status {margin:0;padding:12px;border-left:3px solid var(--c-cobalt);background:var(--c-panel-2);color:var(--c-text);line-height:1.45;overflow-wrap:anywhere}




/* Local chest discovery: the public finder stays readable after the short coin burst. */
.tag.chest-found {background:#fff4d7;color:#49321b;border:1px solid #bd934e;font-weight:750;box-shadow:0 3px 10px #30201020;max-width:min(280px,calc(100vw - 24px));white-space:normal;text-align:center}
.chest-finder {padding:10px 12px;background:#fff4d7;color:#49321b;border-left:3px solid #bd934e;border-radius:6px;overflow-wrap:anywhere}




/* Placement has one scroll surface, including its form, with stable cards during room refresh. */
#ctl-pane-chests {overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;overflow-wrap:anywhere}
#ctl-pane-chests > * {flex-shrink:0}
#ctl-pane-chests .ctl-select {min-height:44px;max-width:100%}
@media (min-width:641px) and (pointer:fine) {
  body.map-docked:has(.people.open) .chat:not(.min) {width:min(340px,calc(50vw - 24px))}
  body.map-docked:has(.pp-panel:not([hidden])) .pp-panel {height:auto}
}
.trk-records {margin:8px 0;font-size:12px}
.trk-records summary {min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--muted)}
.trk-card .actions .btn {min-height:44px;width:100%}

/* Theater controls sit above the picture and fold without disturbing its player. */
body.map-docked .tv-win,body.map-docked .tv-win.twitch {top:max(var(--top),var(--tv-top,0px))!important;left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:min(640px,calc(100vw - 400px));max-width:calc(100vw - 32px)}
.tv-fold {flex:none;font-size:22px}
body.map-docked .tv-win.tv-collapsed {width:260px}
.tv-win .tv-controls {flex-wrap:wrap}
.tv-win .tv-now {flex:1 1 100px}
.tv-win:has(.tv-unmute:not([hidden])) .tv-vol {display:none}
.tv-win.tv-collapsed .tv-controls > :not(.tv-now,.tv-fold),.tv-win.tv-collapsed .tv-why,.tv-win.tv-collapsed .tv-now small {display:none!important}
.tv-link-form {display:grid;gap:8px;margin:14px 0;padding:12px;background:var(--paper-2);border-radius:12px}
.tv-link-form h3,.tv-link-form p {margin:0}
.tv-link-form input {width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;background:var(--paper);color:var(--ink)}
.tv-link-form .btn {min-height:44px}
@media (min-width:641px) and (max-width:1000px) and (pointer:fine) {
  body.map-docked .tv-win,body.map-docked .tv-win.twitch {top:max(calc(var(--top) + 56px),var(--tv-top,0px))!important;width:calc(100vw - 32px)}
  body.map-docked .tv-win.tv-collapsed {width:260px}
}



/* Native movie controls must stay clear of movement controls in Watch closer. */
body.tv-closer :is(.touch,.door-prompt,.fish-prompt,#rail,.map-dock,.mobile-toolbar,.hud-top,#visits,.brrr-entry,.brrr-mini,#chat,#pp-panel,#pm-panel,#labels,.hang-list) {visibility:hidden!important;pointer-events:none!important}
body.map-docked .tv-win {transition:none}





.md-label {display:none}


.tv-link-form .tv-playlist-option {display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;line-height:1.4;cursor:pointer}
.tv-link-form .tv-playlist-option input {width:20px;height:20px;min-height:20px;flex:none;accent-color:var(--cobalt-ink)}

.map-picking .map-side {display:none}.map-picking .map-body{grid-template-columns:1fr}.ctl-chest-map-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ctl-chest-map-actions .btn{min-height:44px}.ctl-draft-row{display:flex;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid #ded8ca;padding:10px 0}.ctl-draft-row .btn{min-height:44px}.ctl-chest-preview{padding:12px;background:#1d232c;border:1px solid #2a3443;border-radius:10px}

/* Photo previews size to their content and keep the attachment actions together. */
.hf-share-hint{font-size:12px;line-height:1.45;margin:4px 0 12px;color:var(--muted)}
@media (min-width:641px) and (pointer:fine){
 body.map-docked #sheet:has(.hf-sheet){top:auto;bottom:var(--bottom);right:calc(var(--right) + 280px);height:auto;width:360px;max-height:calc(100dvh - var(--top) - var(--bottom))}
 body.map-docked .hf-sheet{padding:18px}
 body.map-docked .hf-shot{max-height:240px}
 body.map-docked .hf-status:empty{display:none}
}


/* Local mobile layout: a sticky action bar, a circular map and its two social actions. */
.sheet-mobile-head{display:none}
@media (max-width:640px),(pointer:coarse){
 body.map-docked{--mobile-left:calc(var(--safe-l) + 12px);--mobile-right:calc(var(--safe-r) + 12px);--mobile-top:calc(var(--safe-t) + 68px);--dock-width:112px;--dock-height:200px;--mobile-panel-top:calc(var(--mobile-top) + var(--dock-height) + 12px);--corner-room:calc(100dvh - var(--mobile-panel-top) - var(--safe-b) - 12px);--notice-top:var(--mobile-top)}
 body.map-docked:is(.sp-menu-open,.brrr-full){--mobile-panel-top:var(--mobile-top)}
 body.map-docked #link-wallet{display:none!important}
 body.map-docked .hud-top{z-index:7;pointer-events:none}
 body.map-docked #app .mobile-toolbar{position:fixed;inset:0 0 auto;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));height:calc(var(--safe-t) + 56px);padding:var(--safe-t) var(--safe-r) 0 var(--safe-l);background:var(--paper);border-bottom:1px solid var(--line);box-shadow:none;z-index:7;pointer-events:auto}
 body.map-docked #app .mobile-toolbar :is(#open-menu,.md-action){position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:55px;min-width:44px;min-height:44px;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--ink);box-shadow:none;font:inherit;cursor:pointer;pointer-events:auto;touch-action:manipulation}
 body.map-docked #app .mobile-toolbar :is(#open-menu,.md-action):focus-visible{outline-offset:-3px}
 body.map-docked #open-menu .menu-label{display:block!important;position:static;width:auto;height:auto;clip-path:none;overflow:visible;font-size:10px;line-height:11px;white-space:nowrap}
 body.map-docked #open-menu svg{width:20px;height:20px}
 body.map-docked #open-menu .menu-dot{right:calc(50% - 22px);top:3px;min-width:17px;height:17px;line-height:17px;font-size:10px}
 body.map-docked #app .mobile-toolbar .md-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 body.map-docked #app .mobile-toolbar .md-action img{width:22px;height:22px;object-fit:contain}
 body.map-docked #app .mobile-toolbar .md-label{display:block;font-size:10px;line-height:11px;font-weight:650}
 body.map-docked #app .mobile-toolbar :is(#open-menu,.md-action)[aria-expanded='true']{background:var(--paper-2);box-shadow:inset 0 -3px var(--cobalt-ink)}
 body.map-docked #app .mobile-toolbar .md-launch{color:var(--cobalt-ink)}
 body.map-docked #app .map-dock{position:absolute;inset:var(--mobile-top) var(--mobile-right) auto auto;width:var(--dock-width);height:var(--dock-height);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none;z-index:6}
 body.map-docked #app .map-dock .minimap,body.map-docked #app:has(.brrr-mini:not([hidden])) .map-dock .minimap{--mm:96px;position:absolute;left:8px;right:auto;top:0;bottom:auto;width:96px;height:96px;margin:0;visibility:inherit;pointer-events:auto}
 body.map-docked #app .map-dock .mm-face{width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 3px var(--paper),0 3px 10px #18202a25;transform:none}
 body.map-docked #app .map-dock :is(.mm-face::after,.mm-canvas){border-radius:50%}
 body.map-docked #app .map-dock .mm-compass,body.map-docked .md-toggle{display:none!important}
 body.map-docked #app .map-dock .md-actions{position:absolute;inset:104px 8px auto auto;display:grid;grid-template-columns:44px;grid-auto-rows:44px;gap:8px;width:44px;height:96px;pointer-events:none}
 body.map-docked #app .map-dock .md-action{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:1px solid #ffffff26;border-radius:50%;background:var(--ink)!important;color:var(--paper);box-shadow:0 2px 5px #18202a20;pointer-events:auto;transform:none;isolation:auto}
 body.map-docked #app .map-dock .md-action::before{display:none}
 body.map-docked #app .map-dock .md-action svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 body.map-docked #app .map-dock .md-action img{width:20px;height:20px;flex:none}
 body.map-docked #app .map-dock .md-label{display:none}
 body.map-docked #app .map-dock .md-messages{grid-column:1;grid-row:1}
 body.map-docked #app .map-dock .md-friends{grid-column:1;grid-row:2}
 body.map-docked #app .map-dock .md-action[aria-expanded='true']{background:var(--cobalt-ink)!important;color:var(--paper);border-color:var(--cobalt-ink)}
 body.map-docked #app .map-dock .md-count{position:absolute;right:-3px;top:-3px;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px;border:1px solid var(--paper);border-radius:50%;background:var(--cobalt-ink);color:#fff;font-weight:700}
 body.map-docked:is(.cam-on,.building,.painting,.driving,.pb-on,.skill-on,.casino-seated,.ctl-open) #app :is(.map-dock,.mobile-toolbar){visibility:hidden}
 body.map-docked .brrr-entry{display:none}
 body.map-docked.building{--mobile-panel-top:var(--mobile-top)}
 body.map-docked.building:has(#sheet:not([hidden])) :is(#visits,.build-bar){visibility:hidden}
 body.map-docked .build-bar .tools .done{margin-left:0}
 body.map-docked.sp-hud #visits.door:not([hidden]){position:fixed;left:var(--mobile-left);top:var(--mobile-top);width:max-content;max-width:calc(100vw - var(--mobile-left) - var(--mobile-right) - var(--dock-width) - 12px);height:44px;z-index:5}
 body.map-docked #visits .visits-btn{min-height:44px;padding:0 8px;gap:4px;font-size:11px}
 body.map-docked #visits .visits-word{display:none}
 body.map-docked #visits .visits-key{font-size:10px;padding:3px 5px}
 body.map-docked:has(#visits.door:not([hidden])){--notice-top:calc(var(--mobile-top) + 52px)}
 body.map-docked #rail{position:absolute;inset:var(--notice-top) auto auto var(--mobile-left);width:calc(100vw - var(--mobile-left) - var(--mobile-right) - var(--dock-width) - 12px);max-width:300px;max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 184px);overflow-y:auto;overscroll-behavior:contain;align-items:stretch;transform:none;z-index:3;gap:6px;scrollbar-width:thin}
 body.map-docked #rail>*{max-width:100%;flex-shrink:0;overflow-wrap:anywhere}
 body.map-docked #rail .consent{flex-direction:column;align-items:stretch;gap:5px;width:100%;padding:8px;border-radius:10px;font-size:11px;box-sizing:border-box}
 body.map-docked #rail .consent-ok{min-height:44px;width:100%;font-size:11px}
 body.map-docked #rail :is(.event-pill,#toast,.brrr-arrow,.game-hud,.arcade-hud,.fish-hud){position:relative!important;inset:auto!important;transform:none!important;width:100%;max-width:100%;margin:0;padding:8px;font-size:11px;line-height:1.35;white-space:normal;text-align:left;border-radius:10px;box-sizing:border-box}
 body.map-docked #rail>.brrr-arrow{order:1;gap:6px;box-shadow:none}
 body.map-docked #rail>.brrr-arrow .brrr-arrow-dir{flex:0 0 20px;width:20px;height:20px}
 body.map-docked #rail>.brrr-arrow>span:last-child{min-width:0;overflow-wrap:anywhere}
 body.map-docked #rail .game-hud{max-height:90px;overflow:auto}
 body.map-docked:is(.sp-menu-open,.chat-open,.sp-emotes-open) #rail,body.map-docked:has(#sheet:not([hidden]),.pp-panel:not([hidden]),dialog[open]) #rail{visibility:hidden}
 body.map-docked:is(.sp-menu-open,.chat-open,.sp-emotes-open) :is(.touch,.door-prompt,.fish-prompt,.brrr-mini),body.map-docked:has(#sheet:not([hidden]),.pp-panel:not([hidden])) :is(.touch,.door-prompt,.fish-prompt,.brrr-mini){visibility:hidden}
 body.map-docked :is(.pm-panel,.pp-panel,#sheet,.chat:not(.min),.hud.emotes,.lb-sheet[open]){left:var(--mobile-left)!important;right:var(--mobile-right)!important;top:var(--mobile-panel-top)!important;bottom:auto!important;width:auto!important;max-width:none!important;max-height:var(--corner-room)!important;margin:0;transform:none;border-radius:14px}
 body.map-docked .pm-shade:not([hidden]){top:var(--mobile-panel-top)}
 body.map-docked .pm-panel{display:flex;flex-direction:column;height:min(480px,var(--corner-room))!important;padding:0;overflow:hidden}
 body.map-docked.sp-menu-open #app .pm-panel,body.map-docked #app #sheet.brrr-sheet{top:var(--mobile-top)!important;right:var(--mobile-right)!important;height:var(--corner-room)!important;max-height:var(--corner-room)!important}
 body.map-docked:is(.sp-menu-open,.brrr-full) #app :is(.map-dock,#visits,#labels,.door-prompt,.fish-prompt,.brrr-mini,.brrr-flash,.lb-dock,.st-coach){visibility:hidden;pointer-events:none}
 body.map-docked .pm-head{flex:none;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;min-height:52px;margin:0;padding:4px 8px 4px 16px;border-bottom:1px solid var(--line)}
 body.map-docked .pm-head .close{width:44px;height:44px;position:static;margin:0;float:none}
 body.map-docked .pm-account{flex:none;min-height:44px;margin:0;padding:9px 12px;text-align:center;font-weight:650;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink)}
 body.map-docked .pm-trial{flex:none;margin:0;padding:4px 16px;min-height:28px;font-size:11px}
 body.map-docked .pm-grid{display:flex;flex-direction:column;gap:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px;flex:1}
 body.map-docked .pm-tile,body.map-docked .pm-tile[data-menu='settings']{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;gap:0 10px;flex:none;min-height:52px;margin:0;padding:8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;box-shadow:none}
 body.map-docked .pm-tile .pm-ic{grid-column:1;grid-row:1/3;width:30px;height:30px;background:transparent;box-shadow:none;align-self:center}
 body.map-docked .pm-tile strong{grid-column:2;grid-row:1;font-size:14px}
 body.map-docked .pm-tile small{grid-column:2;grid-row:2;white-space:normal;font-size:12px}
 body.map-docked .pm-tile:not(:has(small)) strong{grid-row:1/3;align-self:center}
 body.map-docked .pm-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none;padding:8px 12px;border-top:1px solid var(--line)}
 body.map-docked .pm-footer .pm-tile{grid-column:auto;min-height:44px;padding:4px;border:0;background:var(--paper-2);border-radius:8px}
 body.map-docked .pm-footer .pm-tile small{display:none}
 body.map-docked .pm-footer:not(:has(.pm-account)){grid-template-columns:1fr}
 body.map-docked .pm-home{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;font-size:12px;text-align:center;color:var(--muted)}
 body.map-docked #sheet{display:flex;flex-direction:column;height:auto;overflow:hidden}
 body.map-docked #sheet>.sheet-close{display:none}
 body.map-docked .sheet-mobile-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px;align-items:center;flex:none;min-height:52px;padding:4px 8px 4px 12px;background:var(--paper);border-bottom:1px solid var(--line)}
 body.map-docked .sheet-mobile-head h2{grid-column:2;min-width:0;margin:0;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
 body.map-docked .sheet-mobile-head>.close,body.map-docked .sheet-head-extra{position:static;float:none;margin:0;width:44px;height:44px;min-width:44px;min-height:44px}
 body.map-docked .sheet-menu-back{grid-column:1;display:flex;align-items:center;gap:3px;min-height:44px;min-width:44px;margin:0;padding:0 5px 0 0;border:0;background:none;color:var(--cobalt-ink);font-size:24px}
 body.map-docked .sheet-menu-back span{font-size:11px;font-weight:650}
 body.map-docked .sheet-mobile-head>.close{grid-column:4}
 body.map-docked .sheet-head-extra{grid-column:3;border:0;background:var(--paper-2);border-radius:50%;font-size:22px;color:var(--ink)}
 body.map-docked #sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 body.map-docked #sheet-body [data-mobile-sheet-title],body.map-docked #sheet-body header .close,body.map-docked #sheet-body [data-sheet-close],body.map-docked #sheet-body .ik-close{display:none}
 body.map-docked .sheet-inner{padding:14px}
 body.map-docked .sheet-inner p{font-size:13px}
 body.map-docked :is(.pf-tabs,.gs-segbar){margin:12px -14px 6px;padding:4px 14px}
 body.map-docked :is(.pf-tabs,.gs-segbar)::before{inset:4px 14px}
 body.map-docked .st-section-picker{display:grid;gap:5px;margin:0 0 14px;font-size:12px;color:var(--muted)}
 body.map-docked #st-section-choice{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
 body.map-docked .st-compact .st-sec{margin-top:0}
 body.map-docked .st-seg button{min-height:44px}
 body.map-docked .pp-panel{height:min(430px,var(--corner-room))!important;overflow-y:auto;padding:0 12px 12px}
 body.map-docked .pp-panel>.fr-head{position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:4px 0 8px;margin:0 0 8px;background:var(--paper);z-index:2;border-bottom:1px solid var(--line)}
 body.map-docked .pp-head-main,body.map-docked .pp-head-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
 body.map-docked .pp-head-main>.pp-close{flex:0 0 44px;width:44px;height:44px;margin:0}
 body.map-docked .pp-head-meta .btn{min-height:44px}
 body.map-docked .chat:not(.min){height:min(320px,var(--corner-room))!important}
 body.map-docked .chat-top{flex:none;min-height:48px}
 body.map-docked .chat-form input{font-size:16px;min-width:0}
 body.map-docked.sp-emotes-open .hud.emotes{display:flex;flex-wrap:wrap;gap:6px;padding:8px;max-height:var(--corner-room)!important;overflow-y:auto}
 body.map-docked #sheet:has(.hf-sheet){width:auto!important;border-radius:14px}
 body.map-docked .hf-sheet{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px 12px;width:100%;min-width:0;padding:14px}
 body.map-docked .hf-shot{grid-column:1;grid-row:1;width:80px;height:104px;max-height:none;object-fit:contain;margin:0;border-radius:8px;box-shadow:none;background:var(--paper-2)}
 body.map-docked .hf-acts{grid-column:2;grid-row:1;display:grid;align-content:start;gap:8px;margin:0}
 body.map-docked .hf-acts .btn{min-height:44px;width:100%;font-size:13px;padding:0 8px}
 body.map-docked .hf-share-hint{grid-column:1/-1;grid-row:2;margin:0;font-size:12px}
 body.map-docked .hf-retake{grid-column:1/-1;grid-row:3;margin:0;font-size:12px}
 body.map-docked .hf-status{grid-column:1/-1;font-size:12px;margin:0}
 body.map-docked .hf-status:empty{display:none}
 body.map-docked #sheet.brrr-sheet{height:var(--corner-room)!important}
 body.map-docked #sheet.brrr-sheet #sheet-body{display:flex;overflow:hidden}
 body.map-docked .brrr{display:flex;flex-direction:column;height:100%;min-height:0;width:100%;overflow:hidden}
 body.map-docked .brrr-head{display:none}
 body.map-docked .brrr-top,body.map-docked .brrr-tabs{flex:none}
 body.map-docked .brrr-top{padding:8px 12px}
 body.map-docked .brrr-count{font-size:24px}
 body.map-docked .brrr-stage{flex:none;height:clamp(112px,24dvh,172px);min-height:96px;margin:0 10px;border-radius:10px}
 body.map-docked .brrr-press{transform:translate(-50%,-50%)}
 body.map-docked .brrr-art{height:clamp(76px,18dvh,120px)}
 body.map-docked .brrr-paper{font-size:9px;bottom:5px;left:8px;right:8px;gap:6px}
 body.map-docked .brrr-hint{flex:none;font-size:11px;margin:4px 10px}
 body.map-docked .brrr-tabs{margin:4px 8px 0;padding:2px;gap:0}
 body.map-docked .brrr-tabs button{min-height:44px;padding:0 4px;font-size:11px}
 body.map-docked .brrr-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px}
 body.map-docked .lb-sheet[open]{overflow:hidden;border:0}
 body.map-docked .lb-sheet .lb-card{max-height:var(--corner-room);display:flex;flex-direction:column;overflow:hidden}
 body.map-docked .lb-head{display:grid;grid-template-columns:30px minmax(0,1fr) 44px;gap:8px;align-items:center;flex:none;padding:8px 12px}
 body.map-docked .lb-head .lb-titles{min-width:0}
 body.map-docked .lb-head h2{font-size:18px}
 body.map-docked .lb-head .lb-x{position:static;width:44px;height:44px;margin:0}
 body.map-docked .lb-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
 body.map-docked .lb-foot{flex:none}
 body.map-docked .joy{width:var(--touch-stick-size,104px);height:var(--touch-stick-size,104px);left:calc(var(--safe-l) + 40px);right:auto;bottom:calc(var(--safe-b) + 56px)}
 body.map-docked[data-joystick-side='right'] .joy{left:auto;right:calc(var(--safe-r) + 40px)}
 body.map-docked .touch .jump{width:64px;height:64px;background:rgba(255,251,242,.1);border-radius:50%;border:1.5px solid rgba(255,251,242,.6);box-shadow:none;color:#fffaf0;text-shadow:0 1px 3px #111827;font-size:14px;left:auto;right:calc(var(--safe-r) + 36px);bottom:calc(var(--safe-b) + 44px)}
 body.map-docked[data-joystick-side='right'] .touch .jump{left:calc(var(--safe-l) + 36px);right:auto}
 body.map-docked :is(.brrr-mini,.door-prompt,.fish-prompt){top:auto;right:var(--mobile-right);bottom:calc(var(--safe-b) + 124px);max-width:200px}
 body.map-docked .brrr-mini{left:var(--mobile-left);right:auto;bottom:calc(var(--safe-b) + 188px)}
 body.map-docked[data-joystick-side='right'] :is(.brrr-mini,.door-prompt,.fish-prompt){left:var(--mobile-left);right:auto}
 body.map-docked[data-joystick-side='right'] .door-prompt span{left:0;right:auto;text-align:left}
 body.map-docked:has(.brrr-mini:not([hidden])) #rail{max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 304px)}
 body.map-docked .door-prompt{bottom:calc(var(--safe-b) + 192px)}
 body.map-docked #app:has(.fish-prompt:not([hidden])) .door-prompt{bottom:calc(var(--safe-b) + 192px)}
 body.map-docked #app .door-prompt button{width:200px;height:56px;min-height:56px;padding:6px 10px;gap:8px;border-radius:12px}
 body.map-docked #app .door-prompt .door-ic{flex:none;width:24px;height:24px}
 body.map-docked #app .door-prompt span{position:static;max-width:none;max-height:44px;width:auto;padding:0;background:transparent;box-shadow:none;text-align:left;font-size:12px;line-height:1.3}
 body.map-docked:has(.door-prompt:not([hidden]),.fish-prompt:not([hidden])) .brrr-mini{visibility:hidden}
 body.map-docked:has(.door-prompt:not([hidden]),.fish-prompt:not([hidden])) #rail{max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 266px)}
 body.map-docked:has(.door-prompt:not([hidden])):has(.fish-prompt:not([hidden])) #rail{max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 266px)}
 .map-dialog .map-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px}
 .map-dialog .map-titles{padding-right:52px;min-width:0}
 .map-dialog .map-titles h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .map-dialog .map-tools{position:static;display:flex;gap:4px;justify-content:flex-start;flex-wrap:nowrap}
 .map-dialog .map-tools .map-close{position:absolute;right:10px;top:8px;width:44px;height:44px}
 .map-dialog .map-tool{min-width:44px;min-height:44px}
 body.map-docked .tv-win,body.map-docked .tv-win.twitch{top:max(var(--mobile-panel-top),var(--tv-top,0px))!important;left:var(--mobile-left);right:var(--mobile-right);transform:none;width:auto;max-width:none}
 body.map-docked .tv-win.tv-collapsed{top:max(calc(var(--mobile-top) + 52px),var(--tv-top,0px))!important;left:var(--mobile-left);right:auto;width:calc(100vw - var(--dock-width) - var(--mobile-left) - var(--mobile-right) - 12px)}
 body.map-docked .tv-controls{flex-wrap:wrap}
 body.map-docked .tv-now{flex:1 1 100%}
 body.map-docked .tv-btn,body.map-docked .tv-fold,body.map-docked .tv-unmute{min-width:44px;min-height:44px}
}
@media (max-width:640px) and (max-height:650px),(pointer:coarse) and (max-height:650px){
 body.map-docked .brrr-stage{height:clamp(96px,22dvh,136px)}
 body.map-docked .brrr-art{height:clamp(68px,17dvh,98px)}
 body.map-docked .brrr-top{padding:5px 12px}
 body.map-docked .brrr-count{font-size:20px}
 body.map-docked .brrr-hint{display:none}
}
@media (min-width:560px) and (max-height:500px) and (pointer:coarse),(min-width:560px) and (max-width:640px) and (max-height:500px){
 body.map-docked{--landscape-map:clamp(48px,calc(100dvh - var(--mobile-top) - var(--safe-b) - 28px - min(var(--touch-stick-size,104px),88px) - 64px),88px);--dock-height:calc(var(--landscape-map) + 52px);--mobile-panel-top:var(--mobile-top);--corner-room:calc(100dvh - var(--mobile-top) - var(--safe-b) - 12px)}
 body.map-docked :is(.pm-panel,.pp-panel,#sheet,.chat:not(.min),.hud.emotes,.lb-sheet[open]){left:var(--mobile-left)!important;right:calc(var(--mobile-right) + var(--dock-width) + 12px)!important}
 body.map-docked #app .map-dock .minimap,body.map-docked #app:has(.brrr-mini:not([hidden])) .map-dock .minimap{--mm:var(--landscape-map);left:calc((var(--dock-width) - var(--landscape-map))/2);width:var(--landscape-map);height:var(--landscape-map)}
 body.map-docked #app .map-dock .mm-face{width:var(--landscape-map);height:var(--landscape-map)}
 body.map-docked #app .map-dock .md-actions{inset:calc(var(--landscape-map) + 8px) auto auto 6px;grid-template-columns:repeat(2,44px);gap:12px;width:100px;height:44px}
 body.map-docked #app .map-dock .md-friends{grid-column:2;grid-row:1}
 body.map-docked .joy{width:min(var(--touch-stick-size,104px),88px);height:min(var(--touch-stick-size,104px),88px);bottom:calc(var(--safe-b) + 28px)}
 body.map-docked .touch .jump{bottom:calc(var(--safe-b) + 28px)}
 body.map-docked #rail{max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 128px)}
 body.map-docked #app .brrr-mini{left:50%;right:auto;bottom:calc(var(--safe-b) + 28px);transform:translateX(-50%)}
 body.map-docked:has(.brrr-mini:not([hidden])) #rail{max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 146px)}
 body.map-docked #app :is(.door-prompt,.fish-prompt){left:50%;right:auto;bottom:calc(var(--safe-b) + 28px);transform:translateX(-50%)}
 body.map-docked #app:has(.fish-prompt:not([hidden])) .door-prompt{left:calc(50% - 124px);right:auto;bottom:calc(var(--safe-b) + 28px);transform:none}
 body.map-docked #app:has(.fish-prompt:not([hidden])) .door-prompt button{width:180px}
 body.map-docked #app:has(.door-prompt:not([hidden])) .fish-prompt{left:calc(50% + 68px);transform:none}
 body.map-docked:has(.door-prompt:not([hidden]),.fish-prompt:not([hidden])) #rail,body.map-docked:has(.door-prompt:not([hidden])):has(.fish-prompt:not([hidden])) #rail{max-height:calc(100dvh - var(--notice-top) - var(--safe-b) - 128px)}
 body.map-docked .brrr{display:grid;grid-template-columns:minmax(132px,34%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:0}
 body.map-docked .brrr-top{display:grid;grid-column:1;grid-row:1;padding:4px 10px;gap:0}
 body.map-docked .brrr-amount{gap:5px}
 body.map-docked .brrr-amount small{font-size:10px}
 body.map-docked .brrr-count{font-size:20px}
 body.map-docked .brrr-rates{flex-wrap:wrap;gap:0 6px;font-size:10px;line-height:1.2}
 body.map-docked .brrr-buffs{gap:2px;margin-top:2px}
 body.map-docked .brrr-buff{padding:2px 4px;font-size:10px;gap:3px}
 body.map-docked .brrr-buff small{font-size:10px;padding:0 3px}
 body.map-docked .brrr-stage{grid-column:1;grid-row:2;height:auto;min-height:0;margin:4px 6px 8px 10px}
 body.map-docked .brrr-art{height:clamp(48px,calc(100dvh - var(--mobile-top) - var(--safe-b) - 172px),96px)}
 body.map-docked .brrr-tabs{grid-column:2;grid-row:1;align-self:start;margin:4px 8px 0 0}
 body.map-docked .brrr-body{grid-column:2;grid-row:2;padding:8px}
 body.map-docked .brrr-hint,body.map-docked .pm-trial{display:none}
}

/* Local comparison option: a higher map and compact social circles under a translucent bar. */
@media (max-width:640px),(pointer:coarse){
 body.map-docked.mobile-ui-compact{--mobile-top:calc(var(--safe-t) + 52px);--dock-height:144px}
 body.map-docked.mobile-ui-compact #app .mobile-toolbar{height:calc(var(--safe-t) + 48px);background:rgba(255,251,242,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
 body.map-docked.mobile-ui-compact #app .mobile-toolbar :is(#open-menu,.md-action){height:47px;gap:2px;padding:2px 0}
 body.map-docked.mobile-ui-compact #app .mobile-toolbar :is(#open-menu,.md-action) svg{width:18px;height:18px}
 body.map-docked.mobile-ui-compact #app .mobile-toolbar .md-action img{width:20px;height:20px}
 body.map-docked.mobile-ui-compact #app .map-dock .md-actions{inset:100px auto auto 10px;grid-template-columns:repeat(2,44px);gap:4px;width:92px;height:44px}
 body.map-docked.mobile-ui-compact #app .map-dock .md-friends{grid-column:2;grid-row:1}
 body.map-docked.mobile-ui-compact #app .map-dock .md-action{border:0;background:radial-gradient(circle,var(--ink) 0 58%,transparent 60%)!important;box-shadow:none}
 body.map-docked.mobile-ui-compact #app .map-dock .md-action svg{width:18px;height:18px}
 body.map-docked.mobile-ui-compact #app .map-dock .md-action[aria-expanded='true']{background:radial-gradient(circle,var(--cobalt-ink) 0 58%,transparent 60%)!important}
 body.map-docked.mobile-ui-compact #app .map-dock .md-count{right:0;top:1px}
}
@media (min-width:560px) and (max-height:500px) and (pointer:coarse),(min-width:560px) and (max-width:640px) and (max-height:500px){
 body.map-docked.mobile-ui-compact{--dock-height:calc(var(--landscape-map) + 52px);--mobile-panel-top:var(--mobile-top)}
 body.map-docked.mobile-ui-compact #app .map-dock .md-actions{top:calc(var(--landscape-map) + 8px)}
}

/* The map keeps its audio switch beside the social controls on every screen. */
.md-mute[aria-pressed='false'] [data-sound-off],.md-mute[aria-pressed='true'] [data-sound-on]{display:none}
@media (min-width:641px) and (pointer:fine){
 body.map-docked .map-dock .mm-place{top:auto;bottom:22px;transform:translateX(-50%);max-width:calc(var(--mm) - 64px);padding:3px 8px;font-size:11px;line-height:14px;box-shadow:none}
}
@media (max-width:640px),(pointer:coarse){
 body.map-docked{--dock-width:144px;--dock-height:148px}
 body.map-docked #app .map-dock .minimap,body.map-docked #app:has(.brrr-mini:not([hidden])) .map-dock .minimap{left:auto;right:8px}
 body.map-docked #app .map-dock .md-actions{inset:104px 2px auto auto;grid-template-columns:repeat(3,44px);gap:4px;width:140px;height:44px}
 body.map-docked #app .map-dock .md-friends{grid-column:2;grid-row:1}
 body.map-docked #app .map-dock .md-mute{grid-column:3;grid-row:1}
 body.map-docked.mobile-ui-compact{--dock-height:144px}
 body.map-docked.mobile-ui-compact #app .map-dock .md-actions{inset:100px 2px auto auto;grid-template-columns:repeat(3,44px);gap:4px;width:140px;height:44px}
}
@media (min-width:560px) and (max-height:500px) and (pointer:coarse),(min-width:560px) and (max-width:640px) and (max-height:500px){
 body.map-docked,body.map-docked.mobile-ui-compact{--dock-height:calc(var(--landscape-map) + 52px)}
 body.map-docked #app .map-dock .minimap,body.map-docked #app:has(.brrr-mini:not([hidden])) .map-dock .minimap{left:auto;right:calc((var(--dock-width) - var(--landscape-map))/2)}
 body.map-docked #app .map-dock .md-actions,body.map-docked.mobile-ui-compact #app .map-dock .md-actions{top:calc(var(--landscape-map) + 8px)}
}

/* Character Market: the catalog and fitting room share one calm, contained shop. */
body.map-docked #sheet.character-market-sheet{z-index:8;width:min(930px,calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 40px);top:calc(var(--safe-t) + 20px);right:24px;left:auto;bottom:auto;overflow-y:auto;border-radius:16px}
#sheet.character-market-sheet>.sheet-close{position:absolute;top:8px;right:8px;margin:0;width:44px;height:44px;background:transparent}
.cm{color:var(--ink);padding:0 24px 24px}
.cm button,.cm-checkout button,.cm a{font:inherit;cursor:pointer}
.cm button,.cm-checkout button{min-height:44px;min-width:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:13px;font-weight:650;padding:8px 12px}
.cm :is(button,a,input):focus-visible,.cm-checkout :is(button,summary):focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.cm button:disabled,.cm-checkout button:disabled{cursor:default;opacity:.56}
.cm-shop-nav{display:flex;align-items:center;gap:18px;min-height:60px;padding-right:45px;border-bottom:1px solid var(--line)}
.cm .cm-shop-nav button{border:0;border-radius:0;padding:10px 0;min-height:60px;white-space:nowrap}
.cm .cm-shop-nav .cm-nav-on{box-shadow:inset 0 -3px #863a3d}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0 18px}
.cm-head h2{margin:0;font-size:25px;letter-spacing:-.035em;line-height:1.15}
.cm-head p{margin:6px 0 0;max-width:44ch;color:var(--muted);font-size:13px;line-height:1.5}
.cm .cm-visit{flex:none;font-size:12px}
.cm-pass-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 16px;background:#eae1d2;border-radius:9px;margin-bottom:20px}
.cm-pass-strip>span{display:grid;gap:3px;font-size:12px;line-height:1.4}
.cm-pass-strip strong{font-size:14px}
.cm .cm-pass-price{background:var(--ink);color:var(--paper);border-color:var(--ink);white-space:nowrap}
.cm .cm-included{border-color:transparent}
.cm-layout{display:grid;grid-template-columns:minmax(230px,.9fr) minmax(0,1.35fr);gap:28px;align-items:start}
.cm-browse,.cm-detail{min-width:0}
.cm-find{display:grid;gap:9px;margin-bottom:12px}
.cm input{width:100%;min-width:0;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid #c8beac;border-radius:7px;background:var(--paper);color:var(--ink)}
.cm-filters{display:flex;gap:6px}
.cm .cm-filters button{flex:1;min-height:44px;padding:7px;font-size:12px;border:0}
.cm .cm-filters button[aria-pressed='true']{background:var(--paper-2)}
.cm-collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:560px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.cm .cm-collection{display:flex;flex-direction:column;min-width:0;text-align:left;padding:0 0 10px;border:1px solid transparent;border-radius:7px;overflow:hidden;font-weight:600}
.cm .cm-collection.is-selected{border-color:#863a3d;background:#f7f0e3}
.cm-collection-art{display:flex;align-items:center;justify-content:center;aspect-ratio:1.1;width:100%;background:#e6dfd1;overflow:hidden}
.cm-collection-art img{width:100%;height:100%;max-height:145px;object-fit:contain;transition:transform .16s ease}
.cm-collection:hover img{transform:scale(1.035)}
.cm-collection-name{font-size:13px;margin:9px 9px 2px;overflow-wrap:anywhere}
.cm-collection-count{font-size:11px;margin:0 9px;color:var(--muted);font-weight:400}
.cm-empty{grid-column:1/-1;font-size:13px;padding:10px}
.cm-detail-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.cm-detail-title h3{margin:0;font-size:18px;letter-spacing:-.02em}
.cm-detail-title>span{font-size:11px;color:var(--muted)}
.cm-fitting{height:265px;position:relative;background:#e9e1d3;border-radius:9px;overflow:hidden}
.cm-fitting canvas{width:100%;height:100%;display:block;cursor:grab}
.cm-fitting canvas:active{cursor:grabbing}
.cm-preview-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:13px;pointer-events:none;background:#e9e1d3;z-index:1}
.cm-preview-status[hidden]{display:none}
.cm-preview-status:has(button){pointer-events:auto}
.cm-turn{display:flex;justify-content:center;align-items:center;gap:14px;margin:2px 0 10px;color:var(--muted);font-size:11px}
.cm .cm-turn button{width:44px;padding:0;font-size:25px;border:0}
.cm-styles{display:flex;gap:8px;margin-bottom:10px}
.cm .cm-styles button{flex:1;padding:6px}
.cm :is(.cm-styles,.cm-outfits) button[aria-pressed='true']{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cm-styles:has(>button:only-child){display:none}
.cm-outfits{display:flex;flex-wrap:wrap;gap:6px;max-height:144px;overflow-y:auto;overscroll-behavior:contain;padding:2px}
.cm .cm-outfits button{font-size:12px;min-height:44px;padding:7px 11px}
.cm-wear-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:15px 0}
.cm-wear-row strong{font-size:14px}
.cm-requirement{font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.4}
.cm .cm-wear{flex:none;background:#863a3d;border-color:#863a3d;color:#fff9ed;max-width:50%}
.cm-ways>p:first-child{font-size:12px;font-weight:650;margin:16px 0 9px}
.cm-token-link,.cm .cm-pass-option{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;text-decoration:none;color:var(--ink);font-size:13px}
.cm-token-link small{font-size:11px;text-align:right;color:var(--muted)}
.cm .cm-token-note,.cm-nft-route{font-size:11px;color:var(--muted);line-height:1.5;margin:8px 0 11px}
.cm .cm-pass-option{background:#eae1d2;border-color:transparent;font-weight:500}
.cm-pass-option strong{white-space:nowrap}
.cm-checkout{padding:28px 24px 24px;line-height:1.5;color:var(--ink)}
.cm-checkout h2{font-size:24px;letter-spacing:-.03em;margin:0 40px 12px 0}
.cm-checkout p{font-size:13px}
.cm-checkout .cm-checkout-price{font-size:32px;letter-spacing:-.04em;font-weight:750;margin:10px 0 16px}
.cm-order-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:12px}
.cm-order-row code{font:inherit;font-weight:650}
.cm-checkout summary{cursor:pointer;font-size:12px;min-height:44px;display:flex;align-items:center}
.cm-full-address{overflow-wrap:anywhere;user-select:all;padding:10px;background:var(--paper-2);border-radius:6px}
.cm-checkout-status{padding:12px;border-left:3px solid #863a3d;background:#eae1d2}
.cm-checkout .cm-confirm{width:100%;background:var(--ink);color:var(--paper);border-color:var(--ink);margin:5px 0 8px}
.cm-checkout .cm-back{width:100%;border-color:transparent}
@media(max-width:640px),(pointer:coarse){
 body.map-docked #app #sheet.character-market-sheet{top:var(--mobile-top)!important;right:var(--mobile-right)!important;left:var(--mobile-left)!important;width:auto!important;height:calc(100dvh - var(--mobile-top) - var(--safe-b) - 12px)!important;max-height:calc(100dvh - var(--mobile-top) - var(--safe-b) - 12px)!important;bottom:auto;overflow:hidden}
 body:has(#sheet.character-market-sheet:not([hidden])) #app .map-dock{visibility:hidden;pointer-events:none}
 #sheet.character-market-sheet #sheet-body{overflow-y:auto}
 .cm{padding:0 14px 18px}
 .cm-shop-nav{gap:20px;min-height:46px;padding:0}
 .cm .cm-shop-nav button{min-height:46px;font-size:12px}
 .cm-head{padding:6px 0;gap:12px;justify-content:flex-end}
 .cm-head p{display:none}
 .cm .cm-visit{max-width:none;font-size:11px;padding:7px 9px}
 .cm-pass-strip{gap:10px;padding:11px 12px;margin-bottom:14px}
 .cm-pass-strip>span{font-size:11px}
 .cm-pass-strip strong{font-size:13px}
 .cm .cm-pass-price{font-size:12px;padding:8px 10px}
 .cm-layout{display:flex;flex-direction:column;gap:18px}
 .cm-browse,.cm-detail{width:100%}
 .cm-find{grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;margin-bottom:10px}
 .cm .cm-filters button{min-height:44px;font-size:11px;padding:7px}
 .cm-filters{gap:0}
 .cm-collections{display:flex;max-height:none;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:2px 2px 5px}
 .cm .cm-collection{flex:0 0 94px;scroll-snap-align:start}
 .cm-collection-art{aspect-ratio:1.2}
 .cm-collection-art img{max-height:84px}
 .cm-collection-name{font-size:12px;margin:7px 7px 1px}
 .cm-collection-count{font-size:10px;margin:0 7px}
 .cm-fitting{height:230px}
 .cm-detail-title h3{font-size:17px}
 .cm .cm-outfits button{min-height:44px}
 .cm-outfits{max-height:150px}
 .cm-wear-row{padding:12px 0}
 .cm-checkout{padding:18px 16px}
}
@media(min-width:641px) and (max-height:760px){
 .cm-shop-nav,.cm .cm-shop-nav button{min-height:48px}
 .cm-head{padding:16px 0 12px}
 .cm-pass-strip{padding:10px 14px;margin-bottom:14px}
 .cm-fitting{height:220px}
}
@media(prefers-reduced-motion:reduce){.cm-collection-art img{transition:none}}

/* Challenge chests use the existing warm chest palette and ordinary sheet controls. */
.chest-event-builder,.chest-hunt-builder,.chest-challenge-status{display:grid;gap:12px}
.chest-event-builder p,.chest-hunt-builder p,.chest-challenge-status p{margin:0}
.chest-event-field{display:grid;gap:6px;min-width:0}
.chest-event-activity{display:grid;grid-template-columns:minmax(0,1fr) 100px;align-items:center;gap:16px}
.chest-event-activity label{display:flex;align-items:center;gap:10px;min-height:44px}
.chest-event-activity input[type=checkbox]{width:20px;height:20px;accent-color:#b38b4b}
.chest-event-goal>div{display:flex;justify-content:space-between;gap:16px;margin-bottom:6px}
.chest-event-goal progress{display:block;width:100%;height:10px;accent-color:#b38b4b}
.chest-event-state,.chest-event-prize{font-weight:650}
.chest-event-fields{display:grid;gap:12px}
.chest-event-builder .ctl-input,.chest-event-builder .ctl-select,.chest-hunt-builder .ctl-input{width:100%;box-sizing:border-box;min-height:44px}
.chest-event-builder input:disabled{opacity:.45}
.chest-hunt-builder summary{min-height:44px;align-content:center;cursor:pointer}
body.map-docked #sheet:has(.chest-challenge-status){max-height:min(680px,calc(100dvh - var(--top) - var(--bottom)))!important}
@media(max-width:640px),(pointer:coarse){body.map-docked #sheet:has(.chest-challenge-status){max-height:var(--corner-room)!important}}

/* Watch closer uses the available screen. Returning restores the room HUD. */
body.map-docked.tv-closer .tv-win,
body.map-docked.tv-closer .tv-win.tv-collapsed,
body.map-docked.tv-closer .tv-win.twitch{top:calc(var(--safe-t) + 12px)!important;left:12px;right:12px;transform:none;width:auto;max-width:640px;margin-inline:auto;z-index:13;visibility:visible!important}
body.map-docked.tv-closer .tv-win.tv-collapsed{max-width:300px}
.hf-caption-label{display:grid;gap:6px;font-weight:650}
.hf-caption,.hf-referral{display:block;box-sizing:border-box;width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;color:var(--ink);background:var(--paper)}
.hf-caption{resize:vertical;max-height:180px;line-height:1.45}
.hf-referral{margin-top:8px;font-size:var(--t-sm)}
.fj-guide{padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin:14px 0}
.fj-guide summary{min-height:44px;align-content:center;cursor:pointer;font-weight:750}
.fj-guide ol{padding-left:22px;display:grid;gap:10px}
@media(max-width:640px),(pointer:coarse){
 body.map-docked .hf-caption-label{grid-column:1/-1;grid-row:2}
 body.map-docked .hf-referral{grid-column:1/-1;grid-row:3;margin:0}
 body.map-docked .hf-share-hint{grid-row:4}
 body.map-docked .hf-retake{grid-row:5}
}

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(./assets/fonts/plex-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(./assets/fonts/plex-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(./assets/fonts/plex-sans-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(./assets/fonts/plex-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(./assets/fonts/plex-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(./assets/fonts/plex-sans-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;
}

/* Local HUD refinement: print-inspired type and a close circular map orbit. */
:root{--font-ui:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;font-family:var(--font-ui)}
:root:lang(zh-CN){--font-ui:'IBM Plex Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif;font-family:var(--font-ui)}
:root:lang(ja){--font-ui:'IBM Plex Sans','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic',Meiryo,'Noto Sans JP','Noto Sans CJK JP',system-ui,sans-serif;font-family:var(--font-ui)}
:root:lang(ko){--font-ui:'IBM Plex Sans','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Noto Sans CJK KR',system-ui,sans-serif;font-family:var(--font-ui)}
button,input,select,textarea{font-family:inherit}
.pb-hud,.ctl{font-family:var(--font-ui)}
.pm-account,.sheet-menu-back{font-family:inherit}
.pm-tile strong{font-weight:650;line-height:1.25}
.pm-tile small{font-weight:400;line-height:1.35}
.st2 .st-h{font-size:15px;font-weight:700;font-stretch:90%;line-height:1.3}
.st2 :is(.st-name,.st-switch2 strong,.sound-name,.st-lang strong){font-size:13px;font-weight:600;line-height:1.35}
.st2 .st-val{font-size:13px;font-weight:650;line-height:1.35}
.st2 :is(.st-line,.st-meter,.st-switch2 small){font-size:12px;font-weight:400;line-height:1.45}
.st2 .st-now{font-size:12px;font-weight:600;line-height:1.45}
.md-mute svg{stroke-width:1.8}
@media (max-width:640px),(pointer:coarse){
 body.map-docked,body.map-docked.mobile-ui-compact{--dock-map:96px;--dock-radius:calc(var(--dock-map)/2);--dock-orbit:calc(var(--dock-radius) + 26px);--dock-side:calc(var(--dock-orbit)*.819152);--dock-rise:calc(var(--dock-orbit)*.573576);--dock-width:calc(var(--dock-side)*2 + 44px);--dock-height:calc(var(--dock-map) + 48px)}
 body.map-docked #app .map-dock .minimap,body.map-docked #app:has(.brrr-mini:not([hidden])) .map-dock .minimap{--mm:var(--dock-map);left:calc((var(--dock-width) - var(--dock-map))/2);right:auto;width:var(--dock-map);height:var(--dock-map)}
 body.map-docked #app .map-dock .mm-face{width:var(--dock-map);height:var(--dock-map)}
 body.map-docked #app .map-dock .md-actions,body.map-docked.mobile-ui-compact #app .map-dock .md-actions{inset:0;display:block;width:100%;height:100%;gap:0;grid-template-columns:none}
 body.map-docked #app .map-dock .md-action{position:absolute;inset:auto;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none;color:var(--paper)}
 body.map-docked #app .map-dock .md-action::before{content:'';display:block;position:absolute;inset:3px;border:1px solid #ffffff40;border-radius:50%;background:var(--ink);box-shadow:0 2px 5px #18202a20;pointer-events:none}
 body.map-docked #app .map-dock .md-action svg{position:relative;width:19px;height:19px;stroke-width:1.8;pointer-events:none}
 body.map-docked #app .map-dock .md-messages{left:0;top:calc(var(--dock-radius) + var(--dock-rise) - 22px)}
 body.map-docked #app .map-dock .md-friends{left:calc(var(--dock-width)/2 - 22px);top:calc(var(--dock-map) + 4px)}
 body.map-docked #app .map-dock .md-mute{left:calc(var(--dock-width) - 44px);top:calc(var(--dock-radius) + var(--dock-rise) - 22px)}
 body.map-docked #app .map-dock .md-action[aria-expanded='true'],body.map-docked.mobile-ui-compact #app .map-dock .md-action[aria-expanded='true']{background:transparent!important}
 body.map-docked #app .map-dock .md-action[aria-expanded='true']::before{background:var(--cobalt-ink);border-color:var(--cobalt-ink)}
 body.map-docked #app .map-dock .md-action:active::before{background:#343b44}
 body.map-docked #app .map-dock .md-action:focus-visible{outline:2px solid var(--paper);outline-offset:0}
 body.map-docked #app .map-dock .md-count{right:0;top:0;z-index:1}
 body.map-docked #app .mobile-toolbar{background:rgba(255,251,242,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 body.map-docked #app .mobile-toolbar :is(.md-label,.menu-label){font-size:11px;line-height:12px;font-weight:600;letter-spacing:0}
 body.map-docked .pm-head,body.map-docked .sheet-mobile-head h2{font-size:18px;font-weight:700;font-stretch:90%;line-height:1.2;letter-spacing:0}
 body.map-docked.sp-menu-open #app .pm-panel{height:auto!important;max-height:var(--corner-room)!important}
 body.map-docked .pm-account{font-size:13px;font-weight:600;line-height:1.3}
 body.map-docked .sheet-menu-back{font-size:24px;line-height:1}
 body.map-docked .sheet-menu-back span{font-size:12px;font-weight:600;line-height:1.25}
 body.map-docked .pm-tile strong{font-size:14px;font-weight:650}
 body.map-docked .pm-tile small{font-size:12px;line-height:1.35}
 body.map-docked .st.st2 :is(.st-line,.st-meter,.st-switch2 small){font-size:12px;font-weight:400;line-height:1.45}
 body.map-docked .st.st2 .st-now{font-size:12px;font-weight:600;line-height:1.45}
 body.map-docked .st2 .pf-lang-select{font-size:16px}
}
@media (min-width:560px) and (max-height:500px) and (pointer:coarse),(min-width:560px) and (max-width:640px) and (max-height:500px){
 body.map-docked,body.map-docked.mobile-ui-compact{--dock-map:var(--landscape-map);--dock-height:calc(var(--dock-map) + 48px)}
}

/* The narrow notification column keeps the check-in action below its readable copy. */
@media (max-width:640px),(pointer:coarse){
 body.map-docked #rail>.ck-card{grid-template-columns:minmax(0,1fr) 44px;gap:6px;width:100%;padding:8px;border-radius:10px}
 body.map-docked #rail>.ck-card>div{grid-column:1;grid-row:1;min-width:0}
 body.map-docked #rail>.ck-card>.close{grid-column:2;grid-row:1;align-self:start;width:44px;height:44px}
 body.map-docked #rail>.ck-card>[data-checkin]{grid-column:1/-1;grid-row:2;width:100%;min-height:44px;white-space:normal}
 body.map-docked #rail>.ck-card strong{font-size:13px;line-height:1.2}
 body.map-docked #rail>.ck-card small{margin-top:3px;font-size:11px;line-height:1.35}
}

/* Local Cabin Bear encounter. */
.bear-hud{position:fixed;z-index:45;left:24px;bottom:110px;width:340px;max-width:calc(100vw - 32px);padding:17px 18px;background:#faf3e4;color:#30251d;border:1px solid #b79772;border-radius:8px;box-shadow:0 5px 18px #30251d26;font:13px/1.4 system-ui,sans-serif;pointer-events:auto}
.bear-hud[hidden],.bear-hud button[hidden]{display:none!important}.bear-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.bear-heading strong{font-size:20px;letter-spacing:-.4px}.bear-preview{color:#7a6450;font-size:10px}.bear-summary{color:#765337;margin-top:3px;font-size:12px}.bear-health{height:8px;border-radius:2px;background:#d9c9b2;margin:13px 0 9px;overflow:hidden}.bear-health i{display:block;height:100%;background:#ad472d;transition:width .15s linear}.bear-team>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #e0d2bf;font-size:11px}.bear-team>div span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:135px}.bear-team>div span:last-child{white-space:nowrap;color:#7b614b}.bear-status{min-height:36px;margin:10px 0 7px;font-weight:650}.bear-actions{display:flex;flex-wrap:wrap;gap:7px}.bear-actions button{min-height:44px;min-width:70px;padding:9px 12px;border:1px solid #8d6240;border-radius:5px;background:#fffaf0;color:#52351f;font:600 13px system-ui;cursor:pointer}.bear-actions button[data-bear=attack],.bear-actions button[data-bear=join]{background:#9c432d;color:#fff8e9;border-color:#9c432d}.bear-actions button[data-bear=leave]{min-width:54px;font-size:12px;background:transparent;border-color:#cbb599}.bear-actions button:disabled{opacity:.45;cursor:default}.bear-actions button:focus-visible{outline:3px solid #315e8c;outline-offset:3px}.bear-hud small{display:block;color:#77614d;font-size:10px;line-height:1.5;margin-top:10px}.bear-warning .bear-status{color:#a02e1b}.bear-warning{border-color:#a02e1b}.bear-defeated .bear-status{color:#8d3828}
@media(max-width:600px){.bear-hud{left:10px;bottom:calc(190px + env(safe-area-inset-bottom,0px));padding:12px 13px;width:280px;max-width:calc(100vw - 20px);font-size:12px}.bear-heading strong{font-size:18px}.bear-status{min-height:32px;margin:7px 0}.bear-team>div{font-size:10px}.bear-hud small{margin-top:7px}.bear-health{margin:9px 0 6px}.bear-preview{font-size:9px}}
@media(max-height:540px){.bear-hud{bottom:16px;left:12px;padding:10px 12px;width:285px}.bear-team{display:none}.bear-hud small{display:none}.bear-status{min-height:20px;margin:6px 0}}
/* Sword combat view: world-space telegraphs, compact health and reachable actions. */
.bear-hud{inset:0;width:auto;max-width:none;padding:0;border:0;background:none;border-radius:0;box-shadow:none;pointer-events:none}.bear-boss-card{position:absolute;top:78px;left:50%;transform:translateX(-50%);width:350px;max-width:calc(100vw - 24px);padding:13px 16px 10px;background:#faf3e4f2;border:1px solid #b79772;border-radius:6px;box-shadow:0 3px 14px #30251d1a}.bear-boss-card .bear-heading strong{font-size:21px}.bear-boss-card .bear-status{min-height:20px;margin:8px 0 0}.bear-boss-card .bear-health{height:9px}.bear-player{position:absolute;left:24px;bottom:100px;width:265px;padding:12px 14px;background:#faf3e4f2;border:1px solid #b79772;border-radius:5px}.bear-player b{font-size:12px}.bear-your-health{height:7px;background:#d9c9b2;margin-top:8px;overflow:hidden}.bear-your-health i{display:block;background:#a54b35;height:100%;transition:width .15s}.bear-controls{position:absolute;right:24px;bottom:230px;pointer-events:auto;text-align:right}.bear-actions{align-items:center;justify-content:flex-end;max-width:260px}.bear-actions button[data-bear=attack],.bear-actions button[data-bear=dodge]{width:86px;height:86px;padding:9px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;box-shadow:0 3px 0 #38261c44}.bear-actions button[data-bear=attack]{background:#9b432d}.bear-actions button[data-bear=dodge]{background:#f6e6c8}.bear-actions button svg{width:28px;height:28px}.bear-actions kbd{font:10px system-ui;opacity:.7}.bear-control-help{color:#4c3526;background:#f7ebd4e8;padding:5px 8px;border-radius:4px;font-size:10px}.bear-hurt{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 0 #ac322900;transition:box-shadow .1s}.is-hurt .bear-hurt{box-shadow:inset 0 0 70px 15px #ac322955}.bear-fighting #chat,.bear-fighting #minimap,.bear-fighting #mapdock-actions{visibility:hidden}.bear-warning .bear-boss-card{border-color:#a02e1b}.bear-player[hidden]{display:none!important}
@media(max-width:600px){.bear-hud{inset:0;width:auto;max-width:none;padding:0}.bear-boss-card{top:72px;width:calc(100vw - 24px);padding:10px 12px}.bear-boss-card .bear-heading strong{font-size:18px}.bear-boss-card .bear-status{font-size:12px;min-height:18px}.bear-boss-card .bear-summary{font-size:11px}.bear-team>div{padding:3px 0}.bear-player{left:10px;bottom:178px;width:calc(100vw - 192px);padding:9px 10px}.bear-player b{font-size:10px}.bear-player small{font-size:9px}.bear-controls{right:10px;bottom:178px}.bear-actions{gap:7px;max-width:170px}.bear-actions button[data-bear=attack],.bear-actions button[data-bear=dodge]{width:70px;height:70px;min-width:70px;padding:7px;font-size:11px}.bear-actions button[data-bear=leave]{order:3;min-height:32px;min-width:50px;padding:5px 9px;font-size:10px}.bear-control-help{display:none}.bear-actions kbd{display:none}.bear-actions button svg{width:25px;height:25px}}
@media(max-height:540px){.bear-boss-card{top:8px;left:50%;width:300px;padding:8px 12px}.bear-team{display:none}.bear-player{bottom:16px;left:14px;width:240px;padding:8px 10px}.bear-controls{bottom:24px;right:20px}.bear-player small{display:none}.bear-actions button[data-bear=attack],.bear-actions button[data-bear=dodge]{width:62px;height:62px;min-width:62px}}
.bear-fighting #chat,.bear-fighting #minimap,.bear-fighting #mapdock-actions{display:none!important}
/* Printer Pup: a warm holder press portrait, with the existing game controls. */
.brrr-stage.ppup-stage { background: #f3e8cf; border: 1px solid #d4b578; }
.ppup-stage .brrr-press { top: 45%; }
.ppup-stage .brrr-press::after { background: rgba(91, 62, 44, .14); bottom: 8px; left: 24%; right: 24%; }
.ppup-portrait { display: block; width: 280px; height: 200px; pointer-events: none; }
.brrr-skin.ppup-skin { border-color: #be9b58; }
.brrr-skin.ppup-skin:disabled { opacity: .72; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ppup-stage .brrr-press, .ppup-stage .brrr-art { animation: none !important; } }
.ppup-stage .brrr-press { height: calc(100% - 26px); width: 100%; top: calc(50% - 10px); }
.ppup-stage .ppup-portrait { height: 100%; width: auto; aspect-ratio: 1.4; max-width: 100%; }
.ppup-stage .ppup-portrait { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
/* EARNED: the earned wardrobe and its tracker (ui/earned.js), and its entry in the inventory */
.ew .ew-sub { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ew .ew-admin { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #e8edff; color: var(--cobalt-ink); font-size: 12.5px; font-weight: 600; }
.ew .ew-total { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.ew .ew-total .inv-bar { flex: 1; max-width: 220px; }
.ew .ew-tabs { margin-bottom: 12px; }
.ew-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ew-filters button { min-height: 32px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ew-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ew-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.ew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ew-card { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 9px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.ew-card strong { font-size: 13px; line-height: 1.2; }
.ew-card small { font-size: 11px; color: var(--muted); }
.ew-card .inv-bar { width: 100%; }
.ew-card.done { background: #fbf6e6; }
.ew-card[aria-pressed="true"] { border-color: var(--cobalt); box-shadow: 0 0 0 2px rgba(47, 75, 255, .25); }
.ew-state { font-size: 11.5px; font-weight: 700; }
.ew-thumb { width: 48px; height: 48px; border-radius: 8px; flex: none; }
.ew-swatch { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.ew-swatch i:first-child { grid-row: span 2; }
.ew img.pixel, .ew-entry img.pixel { image-rendering: pixelated; }
.ew-detail { display: grid; gap: 8px; min-width: 0; }
.ew-detail-head span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ew-detail-head h3 { margin: 2px 0 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ew-stage.ew-kart { display: grid; place-items: center; height: 220px; border-radius: 9px; background: #e9e1d3; }
.ew-stage.ew-kart img { width: 192px; height: 192px; }
.ew-design { margin: 0; font-size: 13px; line-height: 1.5; }
.ew-challenge { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(0, 0, 0, .04); font-size: 13px; }
.ew-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ew-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ew-tracker { display: grid; gap: 12px; }
.ew-group { display: grid; gap: 6px; }
.ew-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.ew-entry { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.ew-entry .actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
@media (max-width: 640px) {
  .ew-layout { grid-template-columns: 1fr; }
  .ew-detail { order: -1; }
  .ew-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .ew-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ew-row .btn { grid-column: 1 / -1; justify-self: start; }
}
/* EARNED end */

/* RETENTION (October 23, 2026): the 7-day check-in calendar and streak freezes (ui/checkin.js), achievements on cards and
   in the profile (ui/achievements.js), the Solar weekly order (games/expansion.js). Scoped to their own classes. */
.ck-card > .ck-week { grid-column: 1 / -1; }
.ck-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; }
.ck-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); min-width: 0; }
.ck-day b { font-size: var(--t-md); line-height: 1.1; }
.ck-day span { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ck-day.done { background: var(--paper-3); opacity: .7; }
.ck-day.done b::after { content: " \2713"; color: var(--cobalt); }
.ck-day.today { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt) inset; }
.ck-day.chest span { color: var(--gold); font-weight: 700; }
.gs-checkin-wrap { margin: 0 0 12px; }
.gs-checkin-wrap > .gs-checkin { margin-bottom: 6px; }
.ck-freeze { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ck-freeze small { color: var(--muted); }
.ach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ach-chip { padding: 6px 8px; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); opacity: .55; min-width: 0; }
.ach-chip.got { opacity: 1; border-color: var(--gold); }
.ach-chip strong { display: block; font-size: var(--t-md); }
.ach-chip small { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.3; }
.ach-row { flex-wrap: wrap; }
.ach-row > .ach-list { flex-basis: 100%; }
.pc-achievements { margin-top: 10px; }
.solar-weekly { margin-top: 12px; }
/* GRANNY: Grandma Toner's speech bubble over her head (the same shape as Brrok's) */
.granny-near{position:fixed;z-index:60;transform:translate(-50%,calc(-100% - 10px));border:0;border-radius:16px;padding:7px 13px;background:#fffdf6;color:#2c241a;min-height:34px;max-width:220px;font:600 13px/1.3 system-ui;box-shadow:0 3px 12px #0003;white-space:normal;text-align:center;cursor:pointer}
.granny-near::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fffdf6}
.granny-near.say{font-weight:500;color:#4a4034;cursor:default}
.granny-near[hidden]{display:none}
.granny-rewards{margin:8px 0 0;padding-left:18px}
body:has(#sheet:not([hidden]),.pp-panel:not([hidden]),dialog[open]) .granny-near{visibility:hidden}
/* TOUR: the World Tour's pill under the visits count, and its guide */
.tour-pill{position:fixed;left:16px;top:70px;z-index:55;display:flex;align-items:center;gap:2px;height:36px;padding:0 4px 0 0;border-radius:var(--r-pill);background:rgba(20,24,31,.86);color:#fff7e6;box-shadow:var(--shadow)}
.tour-pill[hidden]{display:none}
.tour-open{display:flex;align-items:center;gap:8px;height:100%;padding:0 10px 0 8px;border:0;background:none;color:inherit;font:inherit;font-size:var(--t-sm);font-weight:700;cursor:pointer;max-width:min(72vw,420px)}
.tour-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-cap{width:20px;height:20px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#f0cd6a 0 30%,#d9a93a 31% 60%,transparent 61%),#2b313d}
.tour-x{width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:inherit;font-size:16px;cursor:pointer}
.tour-x:hover{background:rgba(255,255,255,.16)}
.tour-bar{height:8px;border-radius:8px;background:rgba(0,0,0,.08);overflow:hidden;margin:10px 0 4px}.tour-bar i{display:block;height:100%;background:linear-gradient(90deg,#2f4bff,#d9a93a)}
.tour-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.tour-step{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:14px}
.tour-step.done{opacity:.72}
.tour-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef0ff;color:#2f4bff;font-weight:800}
.tour-step.done .tour-num{background:#e4f6ea;color:#1f8a4c}
.tour-body p{margin:2px 0 0;font-size:var(--t-sm);opacity:.8}
.tour-ok{font-weight:700;color:#1f8a4c;font-size:var(--t-sm)}
.tour-rewards{margin:8px 0 0;padding-left:18px}
.tour-row{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0;padding:10px 12px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:14px;background:linear-gradient(90deg,rgba(47,75,255,.08),rgba(217,169,58,.1));color:inherit;font:inherit;cursor:pointer;text-align:left}
.tour-row strong{flex:1}
@media (max-width:640px){.tour-pill{top:62px;left:12px}.tour-step{grid-template-columns:28px 1fr}.tour-step .btn,.tour-step .tour-ok{grid-column:2}}
body:has(#sheet:not([hidden]),.pp-panel:not([hidden])) .tour-pill{visibility:hidden}
/* FISHGUIDE: the Fishing guide (ui/fish-guide.js) */
.fj-guide-btn{display:grid;gap:2px;width:100%;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(90deg,rgba(47,75,255,.07),rgba(63,184,162,.1));color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:44px}
.fj-guide-btn span{font-size:var(--t-sm);color:var(--muted)}
.fish-guide .lead{margin:2px 0 4px;color:var(--muted)}
.fg-sec{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.fg-sec>h3{margin:0 0 8px}
.fg-sub{margin:10px 0 6px;font-weight:700;font-size:var(--t-md)}
.fg-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fg-steps li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.fg-steps p{margin:2px 0 0;font-size:var(--t-sm);color:var(--muted)}
.fg-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;font-weight:800;font-size:var(--t-sm)}
.fg-fish{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 5px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--rarity);font-size:var(--t-sm);font-weight:650;white-space:nowrap}
.fg-fish i{width:14px;height:8px;background:var(--fish);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M3 2h6v1h2v1h1V3h1v1h1v1h-1v1h-1V5h-1v1H9v1H3V6H2V5H1V3h1V2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M3 2h6v1h2v1h1V3h1v1h1v1h-1v1h-1V5h-1v1H9v1H3V6H2V5H1V3h1V2z'/%3E%3C/svg%3E") center/contain no-repeat}
.fg-fish.unknown{color:var(--rarity);font-weight:600}
.fg-fish.unknown i{background:var(--rarity);opacity:.45}
.fg-hot{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fg-hot li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fg-hot small{color:var(--muted);font-size:var(--t-xs)}
.fg-spots{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.fg-spot{display:grid;gap:8px;align-content:start;padding:10px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 var(--rarity)}
.fg-spot-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.fg-count{font-size:var(--t-xs);color:var(--muted);white-space:nowrap}
.fg-note{margin:0;font-size:var(--t-sm);color:var(--maroon)}
.fg-fishes{display:flex;flex-wrap:wrap;gap:5px}
.fg-spot .btn{justify-self:start}
.fg-ink{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.fg-ink li{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:var(--r-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.fg-ink i{width:10px;height:10px;border-radius:50%;background:var(--rarity);flex:none}
.fg-ink span{flex:1;font-size:var(--t-sm)}
.fg-rod{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.fg-rod li{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:var(--r-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-md);font-weight:650}
.fg-pips{display:flex;gap:4px}
.fg-pips i{width:18px;height:6px;border-radius:3px;background:var(--paper-3)}
.fg-pips i.on{background:var(--cobalt)}
.fg-tips{margin:0;padding-left:18px;display:grid;gap:6px;font-size:var(--t-md)}
.fg-now{display:grid;grid-template-columns:minmax(120px,.8fr) 2fr;gap:8px}
.fg-clock,.fg-day{display:grid;gap:4px;align-content:start;padding:10px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.fg-clock small,.fg-day small{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.fg-clock span{font-size:var(--t-sm);color:var(--muted)}
.fg-day{background:linear-gradient(135deg,#fff,rgba(217,169,58,.12))}
.fg-day .fg-fish{justify-self:start}
.fg-day p{margin:0;font-size:var(--t-sm)}
@media (max-width:520px){.fg-now{grid-template-columns:1fr}}
/* RENTALS: the rental board and cards (games/plot-rentals.js) */
.rent-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.rent-card{display:grid;gap:6px;padding:10px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--cobalt)}
.rent-card.taken{box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--maroon)}
.rent-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.rent-price{font-weight:750;color:var(--cobalt)}
.rent-card .actions{margin:2px 0 0}
.rent-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rent-board h4{margin:12px 0 4px}
/* SHOWPIECES: the shop cards and the plot sheet (games/showpieces.js) */
.sp-shop{margin:0 0 16px}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:8px 0}
.sp-card{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-md);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 2px 10px rgba(30,24,10,.06)}
.sp-card.own{box-shadow:inset 0 0 0 2px var(--gold),0 2px 10px rgba(30,24,10,.06)}
.sp-pic{display:block;width:100%;aspect-ratio:1/1;max-height:180px;object-fit:contain;background:radial-gradient(circle at 50% 40%,#fffaf0,#efe6d2 70%,#e3d8c0)}
.sp-body{display:grid;gap:6px;padding:10px 12px;align-content:start}
.sp-body p{margin:0;font-size:var(--t-sm);color:var(--muted)}
.sp-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.sp-price{font-weight:800;color:var(--cobalt)}
.sp-planwrap{display:flex;justify-content:center;margin:8px 0}
.sp-plan{width:min(100%,360px);height:auto;border-radius:var(--r-md);touch-action:none;cursor:crosshair;background:#f7f1e3}
.sp-list{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.sp-list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sp-list strong{flex:1}
.sp-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;font-size:var(--t-xs);font-weight:800}
.sp-owned{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sp-pickbtn{display:grid;gap:4px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font:inherit;font-size:var(--t-sm);font-weight:650;cursor:pointer;color:inherit}
.sp-pickbtn .sp-pic{max-height:90px}
.sp-pickbtn:disabled{opacity:.5;cursor:default}
.sp-carbtn{grid-template-columns:auto 1fr;align-items:center;text-align:left}   /* CAR SHOWS: a car you own, its paint as a chip */
.sp-carchip{width:28px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
/* LAUNCH MOMENT: the map-wide hue on a launch (world/launch-moment.js), on the same 14 s clock as its sky and the rocket */
.launch-hue{position:fixed;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;background:radial-gradient(circle at 72% 18%,rgba(255,214,110,.75),transparent 55%),linear-gradient(160deg,rgba(47,75,255,.7),rgba(155,92,255,.55) 50%,rgba(232,178,58,.55))}
.launch-hue[hidden]{display:none}
.launch-hue.on{animation:launch-hue 14s ease-in-out forwards}
@keyframes launch-hue{0%{opacity:0;filter:hue-rotate(0deg)}12%{opacity:.6}40%{opacity:.7;filter:hue-rotate(50deg)}44%{opacity:1;filter:hue-rotate(120deg)}52%{opacity:.75}74%{opacity:.6}100%{opacity:0;filter:hue-rotate(160deg)}}
@media (prefers-reduced-motion:reduce){.launch-hue.on{animation:launch-hue-still 14s linear forwards}@keyframes launch-hue-still{0%,100%{opacity:0}10%,80%{opacity:.45}}}
/* STYLES: the Earned wardrobe's Next up strip and game filters (ui/earned.js) */
.ew-next{margin:12px 0 4px}
.ew-next-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:6px}
.ew-next-card{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:start;padding:10px 12px;border-radius:var(--r-md);background:linear-gradient(135deg,#fff,rgba(217,169,58,.1));box-shadow:inset 0 0 0 1px var(--line)}
.ew-next-body{display:grid;gap:4px;min-width:0}
.ew-next-body small{color:var(--muted);font-size:var(--t-xs)}
.ew-next-acts{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end}
.ew-cats button small{margin-left:6px;font-size:var(--t-xs);color:var(--muted);font-weight:600}
/* AUTORUN: the phone's auto run button (above the camera button, beside Jump) and the HUD's note while it runs (player.js setAutoRun) */
.autorun-btn{position:absolute;z-index:2;right:calc(var(--jump-right) + var(--jump) + 14px);bottom:calc(var(--jump-bottom) + var(--jump) + 10px);width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);display:grid;place-items:center;touch-action:manipulation}
.autorun-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.autorun-on .autorun-btn{background:var(--cobalt);color:#fff}
.autorun-note{position:fixed;left:50%;bottom:calc(var(--safe-b) + 96px);transform:translateX(-50%);z-index:40;padding:6px 12px;border-radius:var(--r-pill);background:rgba(20,24,31,.82);color:#fff7e6;font-size:var(--t-sm);font-weight:700;pointer-events:none}
.autorun-note[hidden]{display:none}
/* SMOOTHSIGNS: place names ease in and out (ui.js Labels.fade) */
.tag.place { transition: opacity .35s ease; will-change: opacity; }
/* AD PICTURES: the ad board form's picture row (games/ad-boards.js) */
.ab-pic-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ab-pic-thumb{width:96px;height:72px;object-fit:contain;border-radius:var(--r-sm, 8px);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ab-pic-thumb[hidden]{display:none}
.ab-pic-pick{cursor:pointer;position:relative}
.ab-pic-pick:focus-within{outline:2px solid var(--accent, #2f4bff);outline-offset:2px}
/* HUDFIT (owner, October 23: "everything has to be placed well and accordingly and everything has to fit well"): the World Tour
   pill had its own fixed spot, and covered the Golden Bill arrow under the top bar on a computer and the visits chip and the
   minimap on a phone. On a computer it stays top left, the arrow goes under it, and it stops short of the centre rail; on a
   phone it is a line of the rail (ui/rail.js), wrapping instead of running into the minimap. */
@media (min-width:641px) and (pointer:fine){
  body.map-docked:has(.tour-pill:not([hidden])) .brrr-arrow{top:calc(var(--top) + 100px)}
  .tour-open{max-width:max(120px,min(300px,calc(50vw - 320px)))}
}
#rail>.tour-pill{position:relative;inset:auto;order:0;width:100%;height:auto;min-height:40px;padding:2px 4px 2px 0;box-shadow:none;z-index:auto}
#rail>.tour-pill .tour-open{flex:1;min-width:0;max-width:none;padding:6px 8px}
#rail>.tour-pill .tour-text{white-space:normal;line-height:1.25;font-size:11px;text-align:left}
#rail>.tour-pill .tour-x{flex:none;width:32px;height:32px}
/* HUDFIT: in the phone rail the week's tiles are a finger wide, so "5 Ink" read "5..." and Chest "C...": there the tiles show the
   day, today and the days done, and the chest day is gold; each tile's title and the line above still say the reward */
@media (max-width:640px),(pointer:coarse){
  body.map-docked #rail .ck-day span{display:none}
  body.map-docked #rail .ck-day{padding:5px 0}
  body.map-docked #rail .ck-day.chest{background:linear-gradient(#f6e3a8,#e6c35f);border-color:#c9a14a}
  body.map-docked #rail .ck-day.chest b{color:#5a3d06}
}
/* HUDFIT: a sheet moves focus to its title for screen readers; a title is not a control, so it takes no focus ring */
:is(h1,h2,h3)[tabindex="-1"]:focus,:is(h1,h2,h3)[tabindex="-1"]:focus-visible{outline:none}
/* BUILD PREVIEWS: a picture of each building kit item on its buy sheet, its Decor card and its Builder's Yard card */
.bp-pic{display:block;width:min(220px,60vw);aspect-ratio:1;margin:4px auto 10px;border-radius:var(--r-lg,16px);background:radial-gradient(circle at 50% 60%,#fffaf0,#efe6d3)}
.bp-thumb{display:block;width:100%;max-width:140px;aspect-ratio:1;margin:0 auto 6px;border-radius:12px;background:radial-gradient(circle at 50% 60%,#fffaf0,#efe6d3)}
.ik-build-art{width:76px;height:76px;padding:2px;object-fit:contain;background:radial-gradient(circle at 50% 60%,#fffaf0,#efe6d3)}
/* BUILD CONTROLS: the build bar's labelled groups, a tool's picture in its button, the blueprint cards (world/land.js folds the
   chat while you build, so the bar never covers it) */
.build-bar .tb-lead{justify-content:flex-start}
.build-bar .tb-group{align-items:center;gap:5px;padding-top:6px;border-top:1px solid var(--line)}
.build-bar .tb-cap{flex:0 0 64px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.build-bar .tools button .tb-pic{width:22px;height:22px;margin:-4px 5px -4px -4px;vertical-align:middle;object-fit:contain}
.build-bar .tools button{display:inline-flex;align-items:center}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px}
.bp-card{display:grid;justify-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;cursor:pointer}
.bp-card:hover{border-color:var(--cobalt)}
@media (max-width:640px){.build-bar .tb-cap{flex-basis:100%}}
/* MENUBACK (owner, October 23: "menu should have a back button like on wardrobe there should be a back i shouldnt have to keep
   going closed open close open"): on a computer, "‹ Menu" at the top left of every sheet the Menu opened, in the checkout's Back
   look (.sheet-back), with Close kept at the top right (panels.js sheetHeader). Phones keep the header row's Back. Sheets
   that draw their own header (Go Brrr, the Garage, the Ink Market, the Printer Shop) get it as a row above that header. */
#sheet>.sheet-menu-return{display:none}
@media (min-width:641px) and (pointer:fine){
 #sheet.has-menu-return>.sheet-menu-return{display:inline-flex;float:left;position:relative;z-index:3;margin:12px 0 -12px 12px;padding:0 14px 0 8px;background:var(--paper)}
 #sheet.has-menu-return>.sheet-menu-return:hover{background:var(--paper-2)}
 #sheet.has-menu-return>#sheet-body{clear:left}
 #sheet.has-menu-return:is(.brrr-sheet,.garage-sheet,.ink-sheet,.commerce-sheet)>.sheet-menu-return{flex:none;align-self:flex-start;margin:8px 0 2px 10px}
 #sheet.commerce-sheet.has-menu-return{display:flex;flex-direction:column}
 #sheet.commerce-sheet.has-menu-return>#sheet-body{height:auto;flex:1;min-height:0}
}
/* SUGGESTIONS (owner, October 23: "in the menu add a suggesstions box that i can view and in admin"): the Menu's suggestion box
   (ui/suggestions.js) and the Owner panel's Suggestions list (ui/suggestions-panel.js) */
.sg .field textarea{width:100%;box-sizing:border-box;min-height:132px;resize:vertical;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font:inherit;font-weight:500;line-height:1.45;color:var(--ink)}
.sg .field textarea:focus-visible{outline:3px solid var(--cobalt);outline-offset:1px}
.sg-foot{display:flex;justify-content:flex-end;margin-top:4px}
.sg-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sg-count.full{color:#b3261e}
.sg-status{min-height:1.2em;margin:6px 0 0;font-size:13px;color:var(--muted)}
.sg-status[data-kind=ok]{color:#1f7a45;font-weight:650}
.sg-status[data-kind=error]{color:#b3261e}
.sg-guest .btn{margin-top:8px}
.sg-admin{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.sg-admin .note{margin:0 0 8px}
.sg-quote{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
/* MOD DELETE: the Photos tab (ui/photos-panel.js) */
.ph-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.ph-cell{display:grid;gap:6px;min-width:0}.ph-cell img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#0002}.ph-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px}.ph-bylink{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.ph-bylink label{display:grid;gap:4px;flex:1 1 220px}.ph-link{width:100%;min-width:0}
@media (max-width:640px),(pointer:coarse){.sg .field textarea{font-size:16px}}
/* MUTES (owner, October 23: "people should be able to mute players too"): everyone you muted, in Settings (ui/settings.js) */
.st-mute-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;max-height:260px;overflow-y:auto;border-top:1px solid var(--line)}
.st-mute-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line)}
.st-mute-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.st-mute-list .btn{flex:none;min-height:36px}
.voice-row .voice-off{margin:0;font-size:12px;font-weight:650;color:var(--muted)}
/* PREVIEWS (owner, October 23: "the brr machine and emotes to buy should ahve more options to preview"): the Go Brrr shop's
   turntable (ui/press-preview.js), the Ink Market's emote stage (ui/emote-preview.js) and their controls */
.brrr-preview{display:grid;gap:6px;margin:0 0 12px;padding:10px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.brrr-preview-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.brrr-preview-head strong{font-size:14px}
.brrr-preview-head small{font-size:11px;color:var(--muted);font-weight:600}
.brrr-preview-hide{margin-left:auto;min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:var(--line,#ece5d6);color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer}   /* PREVIEW ON TAP: put the machine away */
.brrr-preview-stage{height:230px;border-radius:10px;background:#efe8da;overflow:hidden;position:relative}
.brrr-preview-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.brrr-preview-stage canvas:active{cursor:grabbing}
.brrr-skin-wrap{display:grid;gap:4px;align-content:start}
.brrr-skin-wrap.previewing .brrr-skin{box-shadow:inset 0 0 0 2px #8a6412}
.brrr-skin-wrap .brrr-skin[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--cobalt)}
.brrr-skin-look{border:0;border-radius:10px;background:#f4efe3;box-shadow:inset 0 0 0 1px var(--line);min-height:32px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.brrr-skin-look[aria-pressed="true"]{background:#fff3c4;box-shadow:inset 0 0 0 1px #d9a93a}
.press-preview-controls,.emote-preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.press-preview-controls button,.emote-preview-controls button{min-height:40px;min-width:40px;padding:6px 12px;border:0;border-radius:10px;background:#f4efe3;box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.press-preview-controls .press-preview-turn,.emote-preview-controls .emote-preview-turn{font-size:20px;padding:4px 10px}
.press-preview-controls .press-preview-print,.emote-preview-controls .emote-preview-again{background:var(--cobalt);color:#fff;box-shadow:none}
.press-preview-controls button:disabled,.emote-preview-controls button:disabled{opacity:.5;cursor:default}
.emote-preview-who{display:inline-flex;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.emote-preview-controls .emote-preview-who button{border-radius:0;box-shadow:none;background:#fff}
.emote-preview-controls .emote-preview-who button[aria-pressed="true"]{background:#fff3c4}
.press-preview-status:empty,.emote-preview-status:empty{display:none}
.press-preview-status,.emote-preview-status{margin:0;font-size:12px;color:var(--muted)}
.ik-emote-preview{display:grid;gap:6px;margin:0 0 10px;padding:10px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ik-emote-preview-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.ik-emote-preview-head small{font-size:11px;color:var(--muted);font-weight:600}
.ik-emote-stage.cm-fitting{height:250px}
.ik-preview-btn[aria-pressed="true"]{background:#fff3c4}
@media (max-width:640px){.brrr-preview-stage{height:200px}.ik-emote-stage.cm-fitting{height:210px}.press-preview-controls button,.emote-preview-controls button{min-height:44px;min-width:44px}.emote-preview-who{flex:1 1 100%}.emote-preview-controls .emote-preview-who button{flex:1}}

/* DEAD PRESS (games/zombies.js): the zombies mode's HUD. body.zm-on while you play; the room is dark, so the HUD is light on dark,
   the shooter's own layout: the round top left, Bills and health bottom left, the weapon bottom right, the crosshair in the
   middle. Layout tokens as the rest of the HUD. --------------------------------------------------------------------------- */
body.zm-on #scene { cursor: crosshair; }
body.zm-on .emotes, body.zm-on .help, body.zm-on .brrr-entry, body.zm-on .brrr-mini, body.zm-on .view-btn, body.zm-on .launchbuy, body.zm-on .map-dock, body.zm-on .hang, body.zm-on .friends, body.zm-on .fr-panel { display: none !important; }
body.zm-on .minimap { visibility: hidden !important; }
body.zm-on .chat, body.zm-on .pw-prompt, body.zm-on .waypoint { display: none !important; }
body.zm-on.zm-chat .chat { display: flex !important; left: auto; right: var(--right); top: auto; bottom: calc(var(--bottom) + 128px); width: 320px; max-height: 220px; padding: 8px 10px 10px; background: rgba(243, 234, 215, .94); color: #1d2126; border-radius: 2px; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); border-left: 4px solid #d93a3a; z-index: 4; font-size: var(--t-sm); }   /* paper and ink, by the ammo: while you type, or for a moment when a line arrives (games/zombies.js) */
body.zm-on.zm-chat .chat header { min-height: 24px; } body.zm-on.zm-chat .chat header strong { font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: #8a1f1f; }
body.zm-on.zm-chat .chat .chat-tab, body.zm-on.zm-chat .chat .chat-min, body.zm-on.zm-chat .chat .online { display: none; }
body.zm-on.zm-chat .chat input, body.zm-on.zm-chat .chat textarea { background: #fff; color: #1d2126; border: 1px solid #1d2126; border-radius: 2px; }   /* the chat panel sits where the Bills and health go (as skill-on hides it); Enter still opens it after */
body.zm-on .door-prompt { bottom: calc(var(--bottom) + 96px); }
body.zm-on .door-prompt button { background: rgba(20, 23, 28, .9); border: 1px solid rgba(255, 255, 255, .18); }
.tag.zm-hide { visibility: hidden; }
.zm-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: Geist, system-ui, sans-serif; color: #fff; --zm-red: #d93a3a; --zm-gold: #ffd23a; --zm-ink: rgba(20, 23, 28, .78); }
.zm-hud button, .zm-hud input, .zm-pause .zm-card, .zm-over { pointer-events: auto; }
/* the room's mood over the picture: a vignette that tightens as the rounds climb (--vig), a slow film grain */
.zm-vig { position: absolute; inset: 0; --vig: .18; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 46%, rgba(0,0,0,var(--vig)) 100%); transition: background .8s; }
.zm-grain { position: absolute; inset: -40px; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); background-size: 160px 160px; animation: zm-grain .42s steps(4) infinite; }
@keyframes zm-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-12px, 8px); } 50% { transform: translate(9px, -14px); } 75% { transform: translate(-6px, -4px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .zm-grain { animation: none; } }
body.zm-post .zm-grain, body.zm-post .zm-vig, body.zm-post .zm-hurt { display: none; }   /* the room's render path draws these itself */
/* the crosshair: four lines that open with the spread, a dot */
.zm-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 8px; transition: opacity .12s; }
.zm-cross i { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(20, 23, 28, .85); }
.zm-cross i.n { left: -1px; top: calc(-1 * var(--gap) - 8px); width: 2px; height: 8px; }
.zm-cross i.s { left: -1px; top: var(--gap); width: 2px; height: 8px; }
.zm-cross i.w { top: -1px; left: calc(-1 * var(--gap) - 8px); width: 8px; height: 2px; }
.zm-cross i.e { top: -1px; left: var(--gap); width: 8px; height: 2px; }
.zm-cross .dot { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20, 23, 28, .85); }
/* the hit marker: four ticks at 45 degrees, white for a hit, red for a kill, bigger for a head */
.zm-mark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; --mk: #fff; --mks: 22px; }
.zm-mark::before { content: ""; position: absolute; left: calc(var(--mks) / -2); top: calc(var(--mks) / -2); width: var(--mks); height: var(--mks); filter: drop-shadow(0 0 1px rgba(20, 23, 28, .95)); transform: rotate(45deg);
  background: linear-gradient(var(--mk), var(--mk)) 0 0 / 7px 2px no-repeat, linear-gradient(var(--mk), var(--mk)) 0 0 / 2px 7px no-repeat, linear-gradient(var(--mk), var(--mk)) 100% 0 / 7px 2px no-repeat, linear-gradient(var(--mk), var(--mk)) 100% 0 / 2px 7px no-repeat, linear-gradient(var(--mk), var(--mk)) 0 100% / 7px 2px no-repeat, linear-gradient(var(--mk), var(--mk)) 0 100% / 2px 7px no-repeat, linear-gradient(var(--mk), var(--mk)) 100% 100% / 7px 2px no-repeat, linear-gradient(var(--mk), var(--mk)) 100% 100% / 2px 7px no-repeat; }
.zm-mark.kill { --mk: #ff4a3a; }
.zm-mark.head { --mks: 30px; }
.zm-mark.on { animation: zm-mark .34s ease-out forwards; }
@keyframes zm-mark { 0% { opacity: 1; transform: scale(1.3); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.zm-pops { position: absolute; left: calc(50% + 26px); top: calc(50% - 10px); display: grid; gap: 2px; font-size: 15px; font-weight: 900; color: var(--zm-gold); text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.zm-pop { animation: zm-pop .9s ease-out forwards; }
@keyframes zm-pop { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-22px); } }
/* the round, top left under the brand */
.zm-round { position: absolute; left: var(--left); top: var(--rail-top); display: grid; justify-items: start; line-height: 1; }
.zm-round small { font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-xs); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #e8a0a0; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.zm-round strong { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-size: 68px; font-weight: 900; color: var(--zm-red); text-shadow: 0 0 2px #ff8a8a, 0 3px 0 #4a1010, 0 0 24px rgba(217, 58, 58, .45); letter-spacing: 0; transform: rotate(-2deg); transition: color .6s; }
.zm-round.break strong { color: #f5c6c6; }
.zm-left { position: absolute; left: var(--left); top: calc(var(--rail-top) + 84px); font-size: var(--t-sm); font-weight: 700; color: #c9ced6; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
/* Bills and health, bottom left */
.zm-vitals { position: absolute; left: var(--left); bottom: var(--bottom); display: grid; gap: 7px; }
.zm-bills { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.zm-bills b { font-size: 20px; color: var(--zm-gold); }
.zm-bills strong { font-size: 30px; font-weight: 900; }
.zm-bills small { font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c9ced6; }
.zm-hp { width: 220px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); overflow: hidden; }
.zm-hp i { display: block; height: 100%; background: #e9eef5; border-radius: 5px; transition: width .15s; }
.zm-hp i.low { background: var(--zm-red); }
.zm-timers { display: grid; gap: 4px; }
.zm-timer { display: grid; gap: 2px; width: 160px; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--zm-gold); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.zm-timer i { display: block; height: 4px; border-radius: 2px; background: var(--zm-gold); }
.zm-timer.insta { color: #ff8a5a; } .zm-timer.insta i { background: #ff8a5a; }
.zm-perks { position: absolute; left: var(--left); bottom: calc(var(--bottom) + 76px); display: flex; gap: 6px; align-items: center; }
.zm-perk { width: 30px; height: 30px; border-radius: 8px; background: var(--c, #555); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.25); }
.zm-power { font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff8a5a; text-shadow: 0 1px 2px rgba(0,0,0,.8); margin-left: 4px; }
/* the weapon, bottom right */
.zm-ammo { position: absolute; right: var(--right); bottom: var(--bottom); display: grid; justify-items: end; text-align: right; text-shadow: 0 1px 2px rgba(0,0,0,.85); gap: 2px; }
.zm-wname { font-size: var(--t-md); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #e9eef5; }
.zm-wname em { font-style: normal; color: var(--zm-gold); margin-left: 3px; }
.zm-count { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.zm-count strong { font-size: 40px; font-weight: 900; line-height: 1; }
.zm-count span { font-size: 16px; font-weight: 700; opacity: .85; }
.zm-count.low strong { color: #ff6a5a; }
.zm-bar { width: 130px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.zm-bar b { display: block; height: 100%; background: #fff; border-radius: 3px; }
.zm-ammo small { font-size: var(--t-xs); font-weight: 700; opacity: .85; min-height: 14px; }
.zm-second { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); font-weight: 700; color: #b8c0ca; }
.zm-second .dim { opacity: .5; }
.zm-nades { display: flex; gap: 3px; }
.zm-nades i { width: 9px; height: 12px; border-radius: 50% 50% 45% 45%; border: 2px solid rgba(255,255,255,.4); }
.zm-nades i.on { background: #1d2126; border-color: #fff; }
/* banners and the round stamp */
.zm-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) scale(.9); font-size: 30px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--zm-gold); text-shadow: 0 3px 0 #4a3a0a, 0 0 24px rgba(255, 210, 58, .45); opacity: 0; white-space: nowrap; }
.zm-banner.on { animation: zm-banner 2.6s ease-out forwards; }
@keyframes zm-banner { 0% { opacity: 0; transform: translateX(-50%) scale(.8); } 12% { opacity: 1; transform: translateX(-50%) scale(1.06); } 20% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.zm-stamp { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); display: grid; justify-items: center; opacity: 0; line-height: 1; }
.zm-stamp small { font-family: ui-monospace, 'Courier New', monospace; font-size: 15px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: #f5c6c6; }
.zm-stamp strong { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-size: 136px; font-weight: 900; color: var(--zm-red); text-shadow: 0 0 3px #ff8a8a, 0 6px 0 #4a1010, 0 0 40px rgba(217, 58, 58, .6); letter-spacing: 0; transform: rotate(-3deg); }
.zm-stamp.on { animation: zm-stamp 3.2s ease-out forwards; }
@keyframes zm-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%) scale(.98); } }
/* hurt: a red vignette by your health, a pulse on a hit, and the arrow where it came from */
.zm-hurt { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(120, 10, 10, 0) 45%, rgba(120, 10, 10, .9) 100%); opacity: 0; transition: opacity .25s; }
.zm-hurt.hit { animation: zm-hit .5s ease-out; }
@keyframes zm-hit { 0% { box-shadow: inset 0 0 120px rgba(200, 30, 30, .85); } 100% { box-shadow: inset 0 0 0 rgba(200, 30, 30, 0); } }
.zm-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.zm-dir i { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%; border-top: 7px solid rgba(217, 58, 58, .9); animation: zm-dir 1.1s ease-out forwards; }
@keyframes zm-dir { 0% { opacity: 1; } 100% { opacity: 0; } }
body.zm-down .zm-hurt { opacity: 1 !important; }
/* the Fax aimed: a scope, the world through a circle with a fine cross */
.zm-scopeview { position: absolute; inset: 0; display: none; background: radial-gradient(circle at center, transparent 0, transparent min(34vw, 34vh), rgba(0,0,0,.92) calc(min(34vw, 34vh) + 2px), #05060a 100%); }
.zm-scopeview i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.zm-scopeview i::before, .zm-scopeview i::after { content: ""; position: absolute; background: rgba(10, 12, 16, .9); }
.zm-scopeview i::before { left: -1px; top: calc(-1 * min(34vw, 34vh)); width: 2px; height: calc(2 * min(34vw, 34vh)); }
.zm-scopeview i::after { top: -1px; left: calc(-1 * min(34vw, 34vh)); height: 2px; width: calc(2 * min(34vw, 34vh)); }
body.zm-scope .zm-scopeview { display: block; }
body.zm-scope .zm-cross { opacity: 0 !important; }
/* stats (Tab), the game over card, the pause card */
.zm-stats { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 24px)); padding: 14px 18px 16px; border-radius: var(--r-lg); background: rgba(20, 23, 28, .94); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.zm-stats h3 { margin: 0 0 8px; color: var(--zm-red); font-size: var(--t-lg); }
.zm-stats table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.zm-stats td { padding: 5px 4px; border-top: 1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.zm-stats td + td { text-align: right; font-weight: 800; }
.zm-over { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); padding: 22px 24px; border-radius: var(--r-lg); background: rgba(20, 23, 28, .96); box-shadow: 0 20px 60px rgba(0,0,0,.4); text-align: center; display: grid; gap: 8px; }
.zm-over h2 { margin: 0; font-size: 30px; color: var(--zm-red); }
.zm-over p { margin: 0; font-size: var(--t-md); color: #c9ced6; }
.zm-over .zm-best { color: var(--zm-gold); font-weight: 800; }
.zm-over .zm-row { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.zm-kicker { margin: 0; font-size: var(--t-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--zm-gold); }
.zm-pause { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 12, 16, .28); pointer-events: none; }   /* the card takes clicks, the rest lets the World's own menu, dock and chat through (owner: the overlay blocked them) */
body.zm-on.zm-paused .hang, body.zm-on.zm-paused .friends, body.zm-on.zm-paused .map-dock, body.zm-on.zm-paused .help, body.zm-on.zm-paused .view-btn, body.zm-on.zm-paused .emotes, body.zm-on.zm-paused .brrr-entry, body.zm-on.zm-paused .launchbuy, body.zm-on.zm-paused .minimap { visibility: visible !important; }
body.zm-on.zm-paused .chat { display: flex !important; }
/* the first-night hints: a line at the top with its key, and a ring over the place it is about (projected every frame) */
.zm-hint { position: absolute; left: 50%; top: 13%; transform: translateX(-50%) translateY(-8px); display: flex; align-items: center; gap: 10px; max-width: min(640px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px; background: rgba(20, 23, 28, .86); border: 1px solid rgba(255, 210, 58, .45); color: #f3ead7; font-size: var(--t-md); line-height: 1.3; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.zm-hint.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.zm-hint kbd { flex: none; min-width: 28px; padding: 3px 8px; border-radius: 6px; background: var(--zm-gold); color: #2a2008; font-weight: 900; text-align: center; font-family: Geist, system-ui, sans-serif; }
.zm-hintmark { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.zm-hintmark i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--zm-gold); box-shadow: 0 0 18px rgba(255, 210, 58, .6), inset 0 0 12px rgba(255, 210, 58, .35); animation: zm-hintring 1.4s ease-in-out infinite; }
.zm-hintmark b { position: absolute; left: -14px; top: 30px; min-width: 28px; padding: 2px 6px; border-radius: 6px; background: var(--zm-gold); color: #2a2008; font-weight: 900; text-align: center; }
.zm-hintmark b:empty { display: none; }
@keyframes zm-hintring { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.zm-guide { display: grid; gap: 8px; }
.zm-guide-item { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); }
.zm-guide-item strong { font-size: var(--t-md); }
.zm-guide-item span { font-size: var(--t-sm); color: var(--muted); line-height: 1.35; }
.zm-count.knife span { font-size: var(--t-sm); color: #e6e9ee; }
.zm-lobby .zm-how { margin: 4px 0 8px; }
/* the night that is on, live: a red dot, the roster, the ways in */
.zm-live { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a1f1f; }
.zm-live i { width: 8px; height: 8px; border-radius: 50%; background: #d93a3a; animation: zm-mic 1.2s ease-in-out infinite; }
.zm-live-roster { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-sm); }
.zm-live-roster li.out { opacity: .55; } .zm-live-roster small { color: var(--muted); }
.zm-live-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zm-live-note { display: block; margin-top: 6px; color: var(--muted); }
/* the night school: the current step at the left, its target's ring (an arrow at the edge when it is off the screen), the windows' plank counts */
.zm-school { position: absolute; left: var(--left); top: 27%; max-width: 300px; padding: 8px 12px 10px; border-radius: 10px; background: rgba(20, 23, 28, .82); border-left: 3px solid var(--zm-gold); color: #f3ead7; pointer-events: none; transition: transform .25s, opacity .25s; }
.zm-school small { display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--zm-gold); }
.zm-school small span { letter-spacing: 0; color: #e6e9ee; }
.zm-school-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.zm-school-line kbd { flex: none; min-width: 24px; padding: 2px 7px; border-radius: 6px; background: var(--zm-gold); color: #2a2008; font-weight: 900; text-align: center; font-family: Geist, system-ui, sans-serif; font-size: var(--t-sm); }
.zm-school-line strong { font-size: var(--t-md); line-height: 1.25; }
.zm-school.done { border-left-color: var(--zm-green, #3ad97a); transform: scale(1.04); }
.zm-school.done strong { text-decoration: line-through; color: #b9c0cc; }
.zm-goalmark { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.zm-goalmark i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .55), inset 0 0 10px rgba(255, 255, 255, .3); animation: zm-hintring 1.6s ease-in-out infinite; }
.zm-goalmark em { display: none; position: absolute; left: -10px; top: -10px; width: 0; height: 0; border: 10px solid transparent; border-left: 18px solid #fff; transform-origin: 10px 10px; transform: rotate(var(--ang, 0rad)) translateX(26px); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
.zm-goalmark.edge i { width: 30px; height: 30px; left: -15px; top: -15px; animation: none; opacity: .8; }
.zm-goalmark.edge em { display: block; }
.zm-goalmark b { position: absolute; left: -12px; top: 26px; min-width: 24px; padding: 1px 6px; border-radius: 6px; background: #fff; color: #1d2126; font-weight: 900; text-align: center; font-size: var(--t-sm); }
.zm-goalmark.edge b, .zm-goalmark b:empty { display: none; }
.zm-winmark { position: absolute; left: 0; top: 0; width: 46px; height: 22px; margin: -11px 0 0 -23px; display: grid; place-items: center; border-radius: 11px; background: rgba(20, 23, 28, .72); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: var(--t-sm); font-weight: 900; text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; }
.zm-winmark[hidden] { display: none; }
.zm-winmark.bare { background: rgba(217, 58, 58, .85); border-color: #ffb1b1; animation: zm-hintring 1s ease-in-out infinite; }
.zm-guide-school ul { margin: 6px 0 0; padding: 0 0 0 18px; display: grid; gap: 2px; font-size: var(--t-sm); color: var(--muted); }
.zm-guide-school li.done { color: var(--ink); text-decoration: line-through; opacity: .7; }
/* the title card over a night's first seconds: letterbox bars, the name in stencil, the mode under it */
.zm-title { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; opacity: 0; }
.zm-title::before, .zm-title::after { content: ''; position: absolute; left: 0; right: 0; height: 11%; background: #05060a; transform: scaleY(0); transition: transform .6s ease; }
.zm-title::before { top: 0; transform-origin: top; } .zm-title::after { bottom: 0; transform-origin: bottom; }
.zm-title small { font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-sm); letter-spacing: .4em; text-transform: uppercase; color: #f5c6c6; }
.zm-title strong { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-size: clamp(44px, 9vw, 112px); letter-spacing: .04em; color: #f3ead7; text-shadow: 0 0 2px #fff, 0 6px 0 #4a1010, 0 0 44px rgba(217, 58, 58, .55); line-height: 1; }
.zm-title span { font-size: var(--t-md); letter-spacing: .3em; text-transform: uppercase; color: var(--zm-gold); }
.zm-title.on { animation: zm-title 3.4s ease-out forwards; }
.zm-title.on::before, .zm-title.on::after { transform: scaleY(1); }
@keyframes zm-title { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.zm-card { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 20px 22px; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); display: grid; gap: 12px; }
.zm-card h2 { margin: -6px 0 0; font-size: 26px; }
.zm-card .zm-kicker { color: var(--maroon, #7f2633); }
.zm-sets { display: grid; gap: 8px; }
.zm-set { display: grid; grid-template-columns: 1fr 150px 44px; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 600; }
.zm-set output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.zm-set input[type=range] { width: 100%; accent-color: var(--cobalt-ink, #2f4bff); }
.zm-tog { grid-column: 2 / -1; justify-self: start; min-width: 90px; height: 30px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.zm-tog[aria-pressed="true"] { background: var(--ink); color: #fff; }
.zm-keys { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: var(--t-xs); color: var(--muted); }
.zm-keys kbd { margin-right: 4px; }
/* the team (top right, under the rail), the prompt line (a down, a revive, the wait for the room), the frame counter, rosters */
body.zm-cursor #scene { cursor: none; }   /* the mouse was never captured: the crosshair is the pointer (games/zombies.js edgeTurn, aimDir) */
body.zm-cursor .zm-cross, body.zm-cursor .zm-mark, body.zm-cursor .zm-pops { margin-left: var(--cx, 0px); margin-top: var(--cy, 0px); }
/* waiting for players (the Arcade's way): the card under the round counter, the player count row on the lobby sheet */
.zm-wait { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); padding: 14px 18px 16px; border-radius: var(--r-lg); background: rgba(20, 23, 28, .92); box-shadow: 0 16px 40px rgba(0,0,0,.35); text-align: center; display: grid; gap: 6px; pointer-events: auto; }
.zm-wait h3 { margin: 0; font-size: 24px; color: var(--zm-gold); }
.zm-wait .zm-wait-n { font-size: 20px; font-weight: 900; }
.zm-wait p { margin: 0; font-size: var(--t-sm); color: #c9ced6; }
.zm-wait .zm-row { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.zm-need { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-sm); font-weight: 700; }
.zm-need span { margin-right: 4px; color: var(--muted); }
.zm-need button { min-width: 40px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.zm-need button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
body.zm-on .brrok-summon, body.zm-on .ck-card { display: none !important; }   /* the companion's button and the daily check-in card sit over the HUD */   /* the companion's button sits where the team list goes; the night shift has no room for it */
.zm-team { position: absolute; right: var(--right); top: calc(var(--rail-top) + 48px); display: grid; gap: 4px; justify-items: end; }
.zm-team small { font-size: var(--t-xs); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--zm-gold); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.zm-mate { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--zm-ink); font-size: var(--t-sm); }
.zm-mate b { font-weight: 800; }
.zm-mate i { font-style: normal; color: #c9ced6; }
.zm-mate em { font-style: normal; color: #7fe08f; font-weight: 800; font-variant-numeric: tabular-nums; }
.zm-mate.me { box-shadow: inset 0 0 0 1px rgba(255, 210, 58, .6); }
.zm-mate.down { background: rgba(120, 10, 10, .85); }
.zm-prompt { position: absolute; left: 50%; bottom: 27%; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; text-align: center; }
.zm-prompt:empty { display: none; }
.zm-prompt strong { font-size: var(--t-lg); font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.zm-prompt span { font-size: var(--t-sm); color: #e6e9ee; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.zm-prompt span:empty { display: none; }
.zm-revbar { display: block; width: 180px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.zm-revbar b { display: block; height: 100%; background: var(--zm-gold); }
.zm-fps { position: absolute; right: var(--right); top: var(--rail-top); font: 700 var(--t-xs) ui-monospace, Menlo, monospace; color: #c9ced6; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.zm-roster { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-top: 6px; }
.zm-roster th { text-align: left; padding: 4px; font-size: var(--t-xs); font-weight: 700; color: #9aa3ae; }
.zm-roster td { padding: 4px; border-top: 1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; text-align: left; }
.zm-roster th + th, .zm-roster td + td { text-align: right; }
.zm-roster tr.me td { color: var(--zm-gold); font-weight: 800; }
/* the settings card's tabs and pickers */
.zm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.zm-tabs button { flex: 1; height: 34px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: inherit; font-size: var(--t-sm); font-weight: 800; cursor: pointer; }
.zm-tabs button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.zm-card .zm-sets { min-height: 236px; align-content: start; }
.zm-set select { grid-column: 2 / -1; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 700; }
/* the lobby sheet (the pad in the Arena) and the start card's modes */
.zm-lobby .zm-kicker { color: var(--maroon, #7f2633); }
.zm-lobby h2 { margin: 2px 0 6px; }
.zm-lobby-line { margin: 0; color: var(--muted); font-size: var(--t-md); }
.zm-modes { display: grid; gap: 8px; margin: 12px 0 4px; }
.zm-modes h3 { margin: 0; font-size: var(--t-md); }
.zm-mode { display: grid; gap: 3px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-2); color: var(--ink); font: inherit; cursor: pointer; }
.zm-mode:hover { border-color: var(--ink); }
.zm-mode strong { font-size: var(--t-md); }
.zm-mode span { font-size: var(--t-sm); color: var(--muted); }
.zm-over .zm-modes { text-align: left; }
.zm-over .zm-mode { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14); }
.zm-over .zm-mode span { color: #c9ced6; }
.zm-over .zm-mode:hover { border-color: var(--zm-gold); }
.zm-lobby-on { display: grid; gap: 6px; padding: 12px 14px; margin: 12px 0 4px; border-radius: var(--r-lg); background: var(--paper-2); }
.zm-lobby-on span { font-size: var(--t-sm); color: var(--muted); }
.zm-lobby-on .btn { justify-self: start; margin-top: 4px; }
.zm-lobby-rules { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-sm); color: var(--muted); display: grid; gap: 4px; }
/* touch: Fire (hold, drag to aim) on the right, the rest round it */
.zm-touch { display: none; }
/* the paper-and-ink HUD (docs/DEAD-PRESS-WORLD-PASS.md, slice E): every reading is a paper ticket with ink type or ink type with
   a paper face; the stamp red is for the round, the dollar and danger; the gold stays for the prizes and the keys */
.zm-hud { --zm-paper: #f3ead7; --zm-inkd: #1d2126; --zm-paper-dim: #c9c0ae; }
.zm-bills, .zm-timer, .zm-prompt strong, .zm-power, .zm-left { background: var(--zm-paper); color: var(--zm-inkd); text-shadow: none; border-radius: 2px; box-shadow: 0 2px 0 rgba(0, 0, 0, .38); }
.zm-round small { color: var(--zm-paper); background: var(--zm-inkd); padding: 2px 7px; border-left: 3px solid var(--zm-red); text-shadow: none; }
.zm-left { top: calc(var(--rail-top) + 94px); padding: 3px 8px; font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }   /* under the round's digit (the label chip above it grew) */
.zm-bills { padding: 3px 12px 4px 9px; clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 14%, 100% 28%, calc(100% - 5px) 42%, 100% 56%, calc(100% - 5px) 70%, 100% 84%, calc(100% - 4px) 100%, 0 100%); }
.zm-bills b { color: var(--zm-red); font-size: 22px; }
.zm-bills strong { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-weight: 400; font-size: 32px; letter-spacing: .02em; }
.zm-bills small { color: #6a645a; }
.zm-hp { height: 10px; border-radius: 1px; background: var(--zm-paper); box-shadow: 0 2px 0 rgba(0, 0, 0, .38); }
.zm-hp i { border-radius: 0; background: var(--zm-inkd); background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(243, 234, 215, .55) 21px 22px); }
.zm-hp i.low { background-color: var(--zm-red); }
.zm-timer { padding: 3px 8px 5px; color: var(--zm-inkd); }
.zm-timer i { background: var(--zm-inkd); border-radius: 0; }
.zm-timer.insta { color: var(--zm-red); } .zm-timer.insta i { background: var(--zm-red); }
.zm-perk { border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, .4), inset 0 0 0 2px var(--zm-paper); }
.zm-power { padding: 2px 7px; color: var(--zm-red); margin-left: 4px; }
.zm-wname { padding: 2px 8px; background: var(--zm-inkd); color: var(--zm-paper); border-right: 3px solid var(--zm-red); font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-sm); font-weight: 800; letter-spacing: .16em; text-shadow: none; }
.zm-count strong { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-weight: 400; font-size: 46px; color: var(--zm-paper); -webkit-text-stroke: 1px var(--zm-inkd); text-shadow: 0 3px 0 var(--zm-inkd); letter-spacing: .02em; }
.zm-count span { color: var(--zm-paper-dim); opacity: 1; }
.zm-count.low strong { color: var(--zm-red); }
.zm-count.knife span { color: var(--zm-paper); font-family: ui-monospace, 'Courier New', monospace; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-sm); }
.zm-bar { height: 4px; border-radius: 0; background: rgba(243, 234, 215, .22); }
.zm-bar b { background: var(--zm-paper); border-radius: 0; }
.zm-ammo small { color: var(--zm-paper); font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; opacity: 1; }
.zm-second { color: var(--zm-paper-dim); }
.zm-nades i { border-color: rgba(243, 234, 215, .45); border-radius: 1px 1px 2px 2px; }
.zm-nades i.on { background: var(--zm-paper); border-color: var(--zm-paper); }
.zm-pops { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .03em; color: var(--zm-paper); text-shadow: 0 2px 0 var(--zm-inkd), 0 0 2px var(--zm-inkd); }   /* no stroke at this size: it ate the fill */
.zm-prompt strong { padding: 6px 14px; font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-md); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zm-prompt span { color: var(--zm-paper); }
.zm-cross i, .zm-cross .dot { background: var(--zm-paper); }
.zm-banner { font-family: Impact, 'Arial Narrow', Geist, sans-serif; font-weight: 400; color: var(--zm-paper); -webkit-text-stroke: 1px var(--zm-inkd); text-shadow: 0 4px 0 var(--zm-inkd), 0 0 24px rgba(255, 210, 58, .35); }
.zm-hint { background: var(--zm-paper); color: var(--zm-inkd); border-color: rgba(29, 33, 38, .5); border-left: 4px solid var(--zm-red); }
.zm-hint kbd, .zm-school-line kbd { background: var(--zm-inkd); color: var(--zm-paper); }
.zm-school { background: var(--zm-paper); color: var(--zm-inkd); border-left-color: var(--zm-red); }
.zm-school small { color: var(--zm-red); } .zm-school small span { color: #6a645a; }
.zm-mate { background: var(--zm-paper); color: var(--zm-inkd); border-radius: 2px; } .zm-mate i { color: #6a645a; } .zm-mate em { color: #1f7a3a; }
.zm-mate.down { background: #7a1414; color: var(--zm-paper); } .zm-mate.down i { color: #f0c0c0; }
.zm-team small { color: var(--zm-paper); }
/* the floor plan (M) and the talking chip */
.zm-plan { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--rail-top) + 8px); padding: 6px 8px 8px; background: var(--zm-paper); color: var(--zm-inkd); border-radius: 2px; box-shadow: 0 3px 0 rgba(0, 0, 0, .4); display: grid; gap: 4px; }
.zm-plan small { font-family: ui-monospace, 'Courier New', monospace; font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--zm-red); }
.zm-plan canvas { display: block; width: 360px; height: 230px; border: 1px solid var(--zm-inkd); }
.zm-mic { position: absolute; right: var(--right); top: calc(var(--rail-top) + 20px); padding: 2px 8px; background: var(--zm-red); color: var(--zm-paper); font: 800 var(--t-xs) ui-monospace, 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; }
.zm-mic::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--zm-paper); margin-right: 6px; animation: zm-mic 1s ease-in-out infinite; }
@keyframes zm-mic { 50% { opacity: .3; } }
@media (pointer: coarse) {
  body.zm-on .zm-touch { display: block; }
  body.zm-on .touch .jump { right: calc(var(--right) + 26px) !important; bottom: calc(var(--bottom) + 128px) !important; width: 60px !important; height: 60px !important; font-size: var(--t-sm); }   /* the World's own Jump, above Fire (the phone layouts place it by more specific rules) */
  body.zm-on .zm-ammo { bottom: calc(var(--bottom) + 200px); }
  body.zm-on .zm-vitals { bottom: calc(var(--bottom) + 150px); }
  body.zm-on .zm-perks { bottom: calc(var(--bottom) + 226px); }
  body.zm-on .door-prompt { bottom: calc(var(--bottom) + 250px); }
  .zm-fire { position: absolute; right: calc(var(--right) + 8px); bottom: calc(var(--bottom) + 20px); width: 96px; height: 96px; border-radius: 50%; border: 0; background: rgba(217, 58, 58, .85); color: #fff; font: 800 var(--t-md) Geist, system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.35); touch-action: none; }
  .zm-fire.down { background: rgba(255, 90, 90, .95); transform: scale(.96); }
  .zm-btn { position: absolute; min-width: 60px; height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: 0; background: rgba(20, 23, 28, .82); color: #fff; font: 700 var(--t-sm) Geist, system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.3); touch-action: manipulation; }
  .zm-btn[aria-pressed="true"] { background: var(--zm-gold); color: #1d2126; }
  .zm-aim { right: calc(var(--right) + 112px); bottom: calc(var(--bottom) + 46px); }
  .zm-reload { right: calc(var(--right) + 112px); bottom: calc(var(--bottom) + 0px); }
  .zm-crouch { right: calc(var(--right) + 112px); bottom: calc(var(--bottom) + 92px); }
  .zm-knife { right: calc(var(--right) + 186px); bottom: calc(var(--bottom) + 46px); }
  .zm-swap { right: calc(var(--right) + 186px); bottom: calc(var(--bottom) + 0px); }
  .zm-nade { right: calc(var(--right) + 186px); bottom: calc(var(--bottom) + 92px); min-width: 66px; }
  .zm-use { left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom) + 190px); min-width: 80px; }
  .zm-quit { left: var(--left); top: calc(var(--rail-top) + 112px); height: 34px; }
  body.zm-on .zm-team { top: calc(var(--rail-top) + 48px); right: calc(var(--right) + 4px); }
  body.zm-on .zm-team .zm-mate i { display: none; }
  body.zm-on .zm-prompt { bottom: calc(var(--bottom) + 250px); }
}
@media (max-width: 640px) { .zm-plan canvas { width: 260px; height: 166px; } .zm-round strong { font-size: 44px; } .zm-stamp strong { font-size: 88px; } .zm-hp { width: 150px; } .zm-count strong { font-size: 32px; } .zm-bills strong { font-size: 22px; } .zm-bills b { font-size: 16px; } .zm-prompt strong { font-size: var(--t-sm); padding: 5px 10px; } .zm-wname { font-size: var(--t-xs); } .zm-bar { width: 100px; } .zm-keys { grid-template-columns: 1fr; } .zm-set { grid-template-columns: 1fr 110px 40px; } }
/* DEAD PRESS BETA: the Beta tag beside the kicker and the HUD's round label, and the note on every card */
.zm-beta{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;background:#ffd23a;color:#2f0a0a;font:800 10px/1.5 ui-monospace,'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;text-shadow:none}
.zm-beta-note{margin:8px 0 0;padding:7px 11px;border-radius:8px;background:#fff4cc;color:#4a3600;font-weight:700;font-size:var(--t-sm)}
/* DEAD PRESS TOUCH (owner, October 24: "mobile overlays have to be perfected and has to be easy better than most mobile games and
   lay it out so they can play landscape too should be a better layout than cod mobile"): phones and tablets, portrait (zm-port)
   and landscape (zm-land), set by games/zombies.js layoutTouch. One floating stick under the left thumb, Fire under the right
   with an arc of round buttons, Use only when something is in reach, Pause at the top right; the World's stick, Jump, top bar,
   door button and Tour pill step aside while the night is on (they come back on the pause card). */
body.zm-on:is(.zm-port, .zm-land) { --zl: calc(var(--safe-l) + 14px); --zr: calc(var(--safe-r) + 14px); --zt: calc(var(--safe-t) + 10px); --zb: calc(var(--safe-b) + 12px); }
body.zm-on:not(.zm-paused):is(.zm-port, .zm-land) :is(.mobile-toolbar, .joy, .touch .jump, .door-prompt, .autorun-btn) { display: none !important; }
body.zm-on .zm-touch.zm-idle { display: none !important; }   /* a start or end card is up: only the card */
body.zm-on:not(.zm-paused) .tour-pill { display: none !important; }
.zm-fire2 { display: none !important; }
body.zm-on:is(.zm-port, .zm-land) .zm-touch { position: absolute; inset: 0; pointer-events: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-touch > * { pointer-events: auto; }
body.zm-on.zm-paused .zm-touch { display: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-tb { position: absolute; display: grid; place-items: center; align-content: center; gap: 1px; width: var(--s, 50px); height: var(--s, 50px); min-width: 0; padding: 0; border-radius: 50%; border: 1.5px solid rgba(243, 234, 215, .5); background: rgba(20, 23, 28, .6); color: #f3ead7; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transform: none; font: inherit; }
body.zm-on:is(.zm-port, .zm-land) .zm-ic svg { display: block; width: calc(var(--s, 50px) * .42); height: calc(var(--s, 50px) * .42); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.zm-on:is(.zm-port, .zm-land) .zm-tb small { font: 800 9px/1 Geist, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
body.zm-on:is(.zm-port, .zm-land) .zm-tb.down, body.zm-on:is(.zm-port, .zm-land) .zm-tb:active { background: rgba(243, 234, 215, .92); color: #1d2126; }
body.zm-on:is(.zm-port, .zm-land) .zm-tb[aria-pressed="true"] { background: var(--zm-gold); border-color: var(--zm-gold); color: #1d2126; }
body.zm-on:is(.zm-port, .zm-land) .zm-fire { position: absolute; display: grid; place-items: center; align-content: center; gap: 2px; width: var(--fs); height: var(--fs); padding: 0; border-radius: 50%; border: 2px solid rgba(255, 214, 204, .75); background: rgba(217, 58, 58, .8); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .4), inset 0 0 0 6px rgba(255, 255, 255, .08); touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; font: inherit; }
body.zm-on:is(.zm-port, .zm-land) .zm-fire .zm-ic svg { width: calc(var(--fs) * .4); height: calc(var(--fs) * .4); }
body.zm-on:is(.zm-port, .zm-land) .zm-fire small { font: 900 10px/1 Geist, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
body.zm-on:is(.zm-port, .zm-land) .zm-fire.down { background: rgba(255, 96, 96, .96); transform: scale(.95); }
body.zm-on:is(.zm-port, .zm-land) .zm-use { display: none; width: auto; min-width: 64px; max-width: 240px; height: 52px; padding: 0 16px 0 14px; border-radius: 26px; grid-template-columns: auto minmax(0, 1fr); gap: 8px; border-color: var(--zm-gold); background: rgba(255, 210, 58, .94); color: #1d2126; transform: translateX(-50%); }
body.zm-on:is(.zm-port, .zm-land) .zm-use.on { display: grid; animation: zm-usein .18s ease-out; }
body.zm-on:is(.zm-port, .zm-land) .zm-use .zm-ic svg { width: 22px; height: 22px; }
body.zm-on:is(.zm-port, .zm-land) .zm-use small { justify-self: stretch; width: 100%; text-align: left; min-width: 0; font-size: 12.5px; line-height: 1.15; letter-spacing: .01em; text-transform: none; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; opacity: 1; }   /* two lines at most: a price always shows */
body.zm-on:is(.zm-port, .zm-land) .zm-use.down { background: #fff4cc; }
@keyframes zm-usein { from { transform: translateX(-50%) scale(.85); opacity: 0; } }
body.zm-on:is(.zm-port, .zm-land) .zm-pausebtn small { display: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-move { position: absolute; left: 0; bottom: 0; touch-action: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-stick { position: absolute; left: calc(var(--zl) + 64px); top: calc(100% - var(--zb) - 70px); width: var(--ss, 116px); height: var(--ss, 116px); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(243, 234, 215, .38); background: radial-gradient(circle, rgba(20, 23, 28, .12) 0 55%, rgba(20, 23, 28, .34) 57%); opacity: .7; transition: opacity .15s; pointer-events: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-stick.active { opacity: 1; transition: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(243, 234, 215, .86); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
body.zm-on:is(.zm-port, .zm-land) .zm-stick.sprint { border-color: var(--zm-gold); }
body.zm-on:is(.zm-port, .zm-land) .zm-stick.sprint i { background: var(--zm-gold); }
body.zm-on:is(.zm-port, .zm-land) .zm-round { left: var(--zl); top: var(--zt); }
body.zm-on:is(.zm-port, .zm-land) .zm-team { right: calc(var(--zr) + 52px); top: var(--zt); }
body.zm-on:is(.zm-port, .zm-land) .zm-hp { width: 150px; }
body.zm-on:is(.zm-port, .zm-land) .zm-bills strong { font-size: 22px; }
body.zm-on:is(.zm-port, .zm-land) .zm-bills b { font-size: 16px; }
body.zm-on:is(.zm-port, .zm-land) .zm-vitals { gap: 5px; }
/* portrait: the HUD up top, the controls in the bottom half */
body.zm-on.zm-port { --fs: 80px; }
body.zm-on.zm-port .zm-round strong { font-size: 40px; }
body.zm-on.zm-port .zm-left { left: var(--zl); top: calc(var(--zt) + 62px); }
body.zm-on.zm-port .zm-vitals { left: var(--zl); top: calc(var(--zt) + 90px); bottom: auto; }
body.zm-on.zm-port .zm-perks { left: var(--zl); top: calc(var(--zt) + 162px); bottom: auto; }
body.zm-on.zm-port .zm-team { top: calc(var(--zt) + 52px); right: var(--zr); }
body.zm-on.zm-port .zm-hint { left: var(--zl); right: var(--zr); top: calc(var(--zt) + 204px); max-width: none; transform: translateY(-8px); }
body.zm-on.zm-port .zm-hint.on { transform: none; }
body.zm-on.zm-port .zm-school { left: var(--zl); top: calc(var(--zt) + 268px); max-width: 260px; }
body.zm-on.zm-port .zm-ammo { left: var(--zl); right: auto; bottom: calc(var(--zb) + 200px); justify-items: start; text-align: left; }
body.zm-on.zm-port .zm-prompt { top: calc(50% + 30px); bottom: auto; }
body.zm-on.zm-port .zm-move { width: 48%; height: 44%; }
body.zm-on.zm-port .zm-fire { right: calc(var(--zr) + 6px); bottom: calc(var(--zb) + 18px); }
body.zm-on.zm-port .zm-aim { --s: 58px; right: calc(var(--zr) + 100px); bottom: calc(var(--zb) + 22px); }
body.zm-on.zm-port .zm-reload { --s: 50px; right: calc(var(--zr) + 92px); bottom: calc(var(--zb) + 94px); }
body.zm-on.zm-port .zm-jump { --s: 54px; right: calc(var(--zr) + 18px); bottom: calc(var(--zb) + 112px); }
body.zm-on.zm-port .zm-crouch { --s: 48px; right: calc(var(--zr) + 172px); bottom: calc(var(--zb) + 12px); }
body.zm-on.zm-port .zm-swap { --s: 46px; right: calc(var(--zr) + 160px); bottom: calc(var(--zb) + 76px); }
body.zm-on.zm-port .zm-nade { --s: 46px; right: calc(var(--zr) + 96px); bottom: calc(var(--zb) + 160px); }
body.zm-on.zm-port .zm-knife { --s: 46px; right: calc(var(--zr) + 22px); bottom: calc(var(--zb) + 182px); }
body.zm-on.zm-port .zm-use { left: auto; right: var(--zr); bottom: calc(var(--zb) + 248px); max-width: 210px; transform: none; animation-name: zm-usein-r; }   /* by the right thumb, over the arc */
@keyframes zm-usein-r { from { transform: scale(.85); opacity: 0; } }
body.zm-on.zm-port .zm-pausebtn { --s: 42px; right: var(--zr); top: var(--zt); }
body.zm-on.zm-port .zm-talk { --s: 42px; right: calc(var(--zr) + 52px); top: var(--zt); }
@media (max-width: 370px) { body.zm-on.zm-port { --ss: 100px; } body.zm-on.zm-port .zm-stick { left: calc(var(--zl) + 52px); } }   /* a narrow phone: the stick's ring clears Crouch */
/* landscape: the HUD in the corners and along the top, a thumb for each side, the view clear in the middle */
body.zm-on.zm-land { --fs: 84px; --ss: 112px; }
body.zm-on.zm-land .zm-round { display: flex; align-items: flex-end; gap: 8px; }
body.zm-on.zm-land .zm-round strong { font-size: 34px; }
body.zm-on.zm-land .zm-left { left: var(--zl); top: calc(var(--zt) + 44px); }
body.zm-on.zm-land .zm-vitals { left: var(--zl); top: calc(var(--zt) + 72px); bottom: auto; }
body.zm-on.zm-land .zm-perks { left: var(--zl); top: calc(var(--zt) + 152px); bottom: auto; }
body.zm-on.zm-land .zm-hint { top: var(--zt); max-width: min(44vw, 420px); }
body.zm-on.zm-land .zm-school { left: 50%; top: calc(var(--zt) + 58px); transform: translateX(-50%); max-width: min(40vw, 320px); }
body.zm-on.zm-land .zm-ammo { left: 50%; right: auto; bottom: var(--zb); transform: translateX(-50%); justify-items: center; text-align: center; }
body.zm-on.zm-land .zm-prompt { bottom: 46%; }
body.zm-on.zm-land .zm-move { width: 44%; height: 66%; }
body.zm-on.zm-land .zm-stick { left: calc(var(--zl) + 70px); top: calc(100% - var(--zb) - 66px); }
body.zm-on.zm-land .zm-fire { right: calc(var(--zr) + 16px); bottom: calc(var(--zb) + 12px); }
body.zm-on.zm-land .zm-fire2 { display: grid !important; --fs: 62px; right: auto; left: calc(var(--zl) + 170px); bottom: calc(var(--zb) + 132px); }
body.zm-on.zm-land .zm-aim { --s: 58px; right: calc(var(--zr) + 114px); bottom: calc(var(--zb) + 18px); }
body.zm-on.zm-land .zm-reload { --s: 50px; right: calc(var(--zr) + 104px); bottom: calc(var(--zb) + 90px); }
body.zm-on.zm-land .zm-jump { --s: 54px; right: calc(var(--zr) + 30px); bottom: calc(var(--zb) + 108px); }
body.zm-on.zm-land .zm-crouch { --s: 48px; right: calc(var(--zr) + 186px); bottom: calc(var(--zb) + 8px); }
body.zm-on.zm-land .zm-swap { --s: 46px; right: calc(var(--zr) + 172px); bottom: calc(var(--zb) + 70px); }
body.zm-on.zm-land .zm-nade { --s: 46px; right: calc(var(--zr) + 100px); bottom: calc(var(--zb) + 152px); }
body.zm-on.zm-land .zm-knife { --s: 46px; right: calc(var(--zr) + 30px); bottom: calc(var(--zb) + 172px); }
body.zm-on.zm-land .zm-use { left: 50%; bottom: calc(var(--zb) + 92px); }
body.zm-on.zm-land .zm-pausebtn { --s: 40px; right: var(--zr); top: var(--zt); }
body.zm-on.zm-land .zm-talk { --s: 40px; right: var(--zr); top: calc(var(--zt) + 48px); }
body.zm-on:is(.zm-port, .zm-land) .zm-talk { display: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-talk.on { display: grid; }
body.zm-on:is(.zm-port, .zm-land) .zm-talk small { display: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-talk.nomic { opacity: .6; }   /* listening only: a tap asks for the microphone again */
/* the World's toasts keep a clear spot in the night (the top-left rail is the HUD's), and the ammo stays small on a short screen */
body.zm-on:is(.zm-port, .zm-land) #toast { position: fixed !important; left: 50% !important; right: auto !important; top: 30% !important; bottom: auto !important; transform: translateX(-50%) !important; width: max-content !important; max-width: min(420px, 78vw) !important; z-index: 6; text-align: center !important; font-size: var(--t-sm) !important; }
body.zm-on.zm-port .zm-count strong { font-size: 32px; }
body.zm-on.zm-land .zm-count strong { font-size: 28px; }
body.zm-on.zm-land .zm-wname { font-size: 11px; }
/* paused on a phone the World's top bar comes back (Menu, chat): the card sits below it */
body.zm-on.zm-paused:is(.zm-port, .zm-land) .zm-pause { padding-top: calc(var(--safe-t) + 54px); padding-bottom: 8px; align-items: start; }
body.zm-on.zm-paused:is(.zm-port, .zm-land) .zm-pause .zm-card { max-height: calc(100dvh - var(--safe-t) - 66px); }
/* BUILD TOOLS and STAND TOOL (owner, October 25: "what is jetpack in tools? and the tools are still not great", "if you want to
   place a market stand it should be easy to place and manage"; world/land.js renderBar, world/standtool.js): each tool's chip
   has its picture, its name and what it does under it; the Jetpack is a switch on the leading row, with Up and Down to hold on
   a phone; the Rent out group; on a phone either way round and on a short screen the groups in tabs, the bar placed so the
   plot and the stick stay in view */
.build-bar .tb-row{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0;align-items:center}
.build-bar .tools .tb-chip{gap:7px;padding:5px 10px 5px 6px;text-align:left;line-height:1.15}
.build-bar .tools .tb-chip .tb-pic{margin:0}
.build-bar .tb-text{display:grid;gap:1px;min-width:0}
.build-bar .tb-text b{font-size:12px;font-weight:800}
.build-bar .tb-text small{font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.build-bar .tools button[aria-pressed="true"] .tb-text small{color:rgba(255,255,255,.78)}
.build-bar .tools .tb-chip.locked::after{content:none}
.build-bar .tools .tb-chip.locked .tb-pic{opacity:.6}
.build-bar .tools .tb-chip.locked b{color:var(--muted)}
.build-bar .tools .land-jet{padding:5px 11px;text-align:left;line-height:1.15}
.build-bar .tools .land-jet[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.build-bar .tools .land-jet[aria-pressed="true"] small{color:rgba(255,255,255,.82)}
.build-bar .tb-lead .done{margin-left:auto}
.build-bar .jet-pad{position:absolute;right:6px;bottom:calc(100% + 12px);display:grid;gap:8px;z-index:3}
.build-bar .jet-pad button{width:66px;height:56px;border-radius:16px;border:2px solid #fff;background:var(--ink);color:#fff;font:inherit;font-size:11px;font-weight:800;display:grid;place-items:center;align-content:center;gap:1px;box-shadow:var(--shadow);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.build-bar .jet-pad i{font-style:normal;font-size:18px;line-height:1}
.build-bar .jet-pad button:active{background:var(--cobalt)}
body.building.jet-fly .jump{display:none}   /* the pad's Up is the jump while the jetpack flies */
.build-bar .tb-tabs{display:flex;gap:3px;background:var(--paper-2);border-radius:12px;padding:3px}
.build-bar .tb-tabs button{flex:1;border:0;background:transparent;border-radius:9px;padding:6px 4px;font:inherit;font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;min-height:36px;white-space:nowrap}
.build-bar .tb-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(30,24,10,.14)}
.build-bar.compact{gap:6px;padding:8px}
.build-bar.compact .tb-group{border-top:0;padding-top:0}
.build-bar.compact .tb-cap{display:none}
.build-bar.compact .tb-lead{flex-wrap:nowrap;overflow:visible}
.build-bar.compact .land-status{font-size:var(--t-xs);line-height:1.3}
@media (max-width:640px),(pointer:coarse){   /* a phone: each row scrolls sideways, one line high */
  .build-bar.compact .tb-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .build-bar.compact .tb-row::-webkit-scrollbar{display:none}
  .build-bar.compact .tb-row>*{flex:none}
  .build-bar.compact .tb-lead{gap:5px}
  .build-bar.compact .tb-lead button{min-height:40px;padding:6px 8px}
  .build-bar.compact .land-jet small{display:none}
  .build-bar.compact .palette{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;padding-bottom:2px}
  .build-bar.compact .palette button{flex:none}
  .build-bar.compact .land-shape span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* the shape's name stays for screen readers */
  /* Tools and Rent out: every chip in view at once, two or more to a row, the hint wrapping under the name */
  .build-bar.compact :is([data-group="tools"],[data-group="rent"]) .tb-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible;flex-wrap:wrap}
  .build-bar.compact :is([data-group="tools"],[data-group="rent"]) .tb-chip{min-height:46px}
  .build-bar.compact :is([data-group="tools"],[data-group="rent"]) .tb-text small{white-space:normal}
}
/* a phone upright: the bar at the bottom, the stick and the pad just above it (--bb-gap: the bar's top from the bottom edge) */
@media (max-width:640px) and (pointer:coarse){
  body.building .joy{bottom:calc(var(--bb-gap,320px) + 14px)}
  body.building .jump{bottom:calc(var(--bb-gap,320px) + 26px)}
}
/* a phone on its side: the bar between the stick and the map column, the Up and Down where the jump button was */
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .build-bar.compact{left:calc(var(--joy-left) + var(--joy) + 34px);right:calc(var(--safe-r) + 140px);transform:none;bottom:calc(var(--safe-b) + 8px);width:auto;max-height:calc(100dvh - var(--safe-t) - 16px);overflow-y:auto;overscroll-behavior:contain}
  body.building .tour-pill{display:none}   /* the bar needs the low left corner while you build; the tour comes back at Done */
  .build-bar.compact .jet-pad{position:fixed;right:calc(var(--safe-r) + 18px);bottom:calc(var(--safe-b) + 14px)}
  .build-bar.compact .tb-lead,.build-bar.compact .tb-tabs{flex:none}
}
/* the market stand's set-down and the whole plot's rental (world/standtool.js), a stand's state for its holder (games/marketspots.js) */
.stand-sheet .market-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px}
.stand-sheet .market-fields label{display:grid;gap:4px;font-weight:700;font-size:var(--t-sm)}
.market-card .market-state{font-weight:700}
.market-card .market-terms{margin:6px 0}
.market-card .market-terms summary{cursor:pointer;font-weight:700;color:var(--cobalt-ink)}
/* CHALLENGES: the website's friend challenges in the game (ui/challenges.js) */
.chal-sheet .chal-wallet{margin:4px 0 10px;font-weight:700;color:var(--muted)}
.chal-sheet .chal-section{margin:14px 0 0}
.chal-sheet .chal-section h3{margin:0 0 6px;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chal-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;margin:0 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.chal-row:hover,.chal-row:focus-visible{border-color:var(--cobalt)}
.chal-row .chal-game{font-weight:800}
.chal-row .chal-stake{font-weight:700;text-align:right}
.chal-row .chal-vs,.chal-row .chal-status{font-size:var(--t-sm);color:var(--muted)}
.chal-row .chal-status{text-align:right}
.chal-sheet .chal-empty,.chal-sheet .chal-note{color:var(--muted);font-size:var(--t-sm)}
.chal-sheet .chal-error{color:var(--maroon);font-weight:700}
.chal-sheet .chal-back{margin:0 0 8px}
.chal-sheet .chal-status-line{font-weight:800;color:var(--cobalt-ink);margin:2px 0 10px}
.chal-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 12px}
.chal-facts dt{color:var(--muted)}
.chal-facts dd{margin:0;font-weight:700}
.chal-sheet .chal-ask{flex-basis:100%;margin:0 0 4px}
.chal-sheet .chal-actions{flex-wrap:wrap}
.chal-field{display:grid;gap:4px;margin:0 0 10px;font-weight:700;font-size:var(--t-sm)}
.chal-select,.chal-input{min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;width:100%;box-sizing:border-box}
.chal-presets{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 8px}
.chal-chip{border:1px solid var(--line);border-radius:999px;background:var(--paper-2);color:var(--ink);font:inherit;font-weight:700;padding:5px 12px;cursor:pointer}
.chal-chip.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* X chest wallet: keep the recovery action usable on touch screens. */
.chest-sheet .chest-wallet-action{min-height:44px}