@import url("home-assets/leaderboard.css");
@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); }
#bank-find { min-height: 44px; font-size: var(--t-md); }
#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:has(#gate-title) { backdrop-filter: none; -webkit-backdrop-filter: none; background: #17203199; }
.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; }
  .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); }
.pk-coin-perk { margin: 6px 0 0; font-size: 12px; line-height: 1.4; font-weight: 600; }   /* SWORDCAT: the Sword switch line (ui/coin-ladder.js perkLine) */
#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; }
/* PLAY PATH: the first question (Play for fun / Play for rewards), the bar that names the choice, the guide and Home row */
.fv-paths { display: grid; gap: 10px; margin-top: 14px; }
.fv-path { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 2px 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 .15s; }
.fv-path:hover, .fv-path:focus-visible { border-color: var(--cobalt); box-shadow: 0 6px 18px rgba(47, 75, 255, .14); outline: none; }
.fv-path:active { transform: translateY(1px); }
.fv-path-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); align-self: start; }
.fv-path-rewards .fv-path-icon { background: #fff3cf; color: #8a5a00; }
.fv-path-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fv-path-text { display: grid; gap: 3px; min-width: 0; }
.fv-path-text strong { font-size: 16px; letter-spacing: -.005em; }
.fv-path-lead { color: var(--muted); font-size: var(--t-md); line-height: 1.4; }
.fv-path-points { display: grid; gap: 2px; margin-top: 4px; font-size: var(--t-sm); line-height: 1.4; }
.fv-path-points span { position: relative; padding-left: 16px; }
.fv-path-points span::before { content: ''; position: absolute; left: 2px; top: .5em; width: 7px; height: 4px; border-left: 2px solid #2f6b3a; border-bottom: 2px solid #2f6b3a; transform: rotate(-45deg); }
.fv-path-go { align-self: center; padding: 8px 14px; border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font-weight: 700; font-size: var(--t-md); white-space: nowrap; }
.fv-path-fun .fv-path-go { background: var(--ink); }
.fv-pathbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--paper-2); font-size: var(--t-md); font-weight: 600; }
.fv-pathbar .linkish { background: none; border: 0; padding: 4px 2px; color: var(--cobalt-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 600; }
.fv-links.fv-links-one { grid-template-columns: 1fr; }
.fv-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fv-foot .btn { justify-content: center; }
@media (max-width: 420px) { .fv-path { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; } .fv-path-icon { width: 40px; height: 40px; } .fv-path-go { grid-column: 1 / -1; justify-self: stretch; text-align: center; padding: 10px 14px; } }
.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; }
/* CARD ON-RAMP: Add SOL with a card (ui/launchbuy.js openCard): the line under a SOL price and in Get $Printer, the amounts */
.lb-cardline { background: #eef1ff; }
.lb-sheet .lb-cardline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; padding: 9px 12px; border-radius: var(--r-md); font-size: var(--t-md); }
.lb-sheet .lb-cardline > span { flex: 1 1 120px; }
.lb-card-ic { background: #3c2f86; color: #fff; }
.lb-card-ic svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lb-label-sm { margin: 12px 0 6px; font-size: 13px; font-weight: 700; }
.lb-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lb-amount { min-height: 46px; border: 2px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.lb-amount[aria-checked="true"] { border-color: var(--cobalt); box-shadow: 0 4px 14px rgba(47, 75, 255, .16); }
.lb-cardbody .actions { margin-top: 12px; }
@media (max-width: 420px) { .lb-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.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}
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 #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 .menu-label{font-size:11px;line-height:12px;font-weight:600;letter-spacing:0} /* PERFECT-GAPS (audit CSS-18): the toolbar is icons only (interaction-release.css hides .md-label); only the Menu keeps its label */
 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}


/* Optional skin-specific laugh trail. A full tap target and explicit state. */
.emotes button[data-slingoor-trail]{display:inline-flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;padding:8px 11px;border:1px solid #b5aa9b;border-radius:7px;background:#faf6ee;color:#29323c;font-weight:600}
.emotes button[data-slingoor-trail][aria-pressed=true]{background:#29323c;border-color:#29323c;color:#fffaf2}
.emotes button[data-slingoor-trail]:focus-visible{outline:3px solid #a14c4c;outline-offset:2px}
.emotes button[data-slingoor-trail] .slingoor-trail-state{font-size:11px;font-weight:700}
.emotes button[data-slingoor-trail] .slingoor-trail-switch{position:relative;display:inline-block;flex:0 0 32px;width:32px;height:18px;border:1px solid currentColor;border-radius:12px}
.emotes button[data-slingoor-trail] .slingoor-trail-switch:before{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;background:currentColor;border-radius:50%}
.emotes button[data-slingoor-trail][aria-pressed=true] .slingoor-trail-switch:before{transform:translateX(14px)}
/* SWORDCAT: the knight kitten's Sword switch (ui/swordcat-emotes.js) */
.emotes button[data-swordcat-sword]{display:inline-flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;padding:8px 11px;border:1px solid #b5aa9b;border-radius:7px;background:#faf6ee;color:#29323c;font-weight:600}
.emotes button[data-swordcat-sword][aria-pressed=true]{background:#29323c;border-color:#29323c;color:#fffaf2}
.emotes button[data-swordcat-sword].locked{opacity:.72}
.emotes button[data-swordcat-sword]:focus-visible{outline:3px solid #a14c4c;outline-offset:2px}
.emotes button[data-swordcat-sword] .swordcat-sword-state{font-size:11px;font-weight:700}
.emotes button[data-swordcat-sword] .swordcat-sword-switch{position:relative;display:inline-block;flex:0 0 32px;width:32px;height:18px;border:1px solid currentColor;border-radius:12px}
.emotes button[data-swordcat-sword] .swordcat-sword-switch:before{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;background:currentColor;border-radius:50%}
.emotes button[data-swordcat-sword][aria-pressed=true] .swordcat-sword-switch:before{transform:translateX(14px)}
/* Character picker: the card itself opens its exact purchase or unlock route. */
#picker .card .pk-card-action { display:block; margin:8px 10px 12px; padding:8px 4px; border-radius:7px; background:#e9edff; color:#2538b6; font-size:12px; line-height:1.35; font-weight:700; text-align:center; }
#picker .card.locked:hover .pk-card-action, #picker .card.locked:focus-visible .pk-card-action { background:#2f4bff; color:#fff; }
#picker .pk-unlock-options { margin:0 0 16px; padding:16px; border:1px solid #ded8ca; border-radius:12px; background:#f4f0e6; color:#20242b; }
#picker .pk-unlock-options[hidden] { display:none; }
#picker .pk-unlock-options p { margin:8px 0 12px; line-height:1.5; }
#picker .pk-unlock-actions { display:flex; gap:10px; flex-wrap:wrap; }
#picker .pk-unlock-actions :is(a,button) { min-height:44px; }

/* Player gift sheet, shared with the website. */
#app #sheet:has(.player-gift-sheet){top:calc(var(--safe-t) + 12px);right:calc(var(--safe-r) + 12px);bottom:auto;width:min(780px,calc(100vw - var(--safe-l) - var(--safe-r) - 24px));height:calc(100dvh - var(--safe-t) - var(--safe-b) - 24px);max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 24px);display:flex;flex-direction:column;overflow:hidden}#sheet:has(.player-gift-sheet)>.sheet-close{display:none}#sheet:has(.player-gift-sheet) #sheet-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}.player-gift-sheet{width:100%;max-width:100%;flex:1;display:flex;flex-direction:column;min-height:0}.player-gift-heading{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.player-gift-heading h2{margin:0}.player-gift-frame{border:0;flex:1;min-height:0;min-width:0;width:100%;background:#fffbf2;border-radius:10px}.player-gift-heading button{min-width:44px;min-height:44px;border:0;border-radius:12px;background:var(--paper-2);color:var(--ink);padding:8px 12px;font:inherit}

@media(max-width:640px),(pointer:coarse){
 body.map-docked #app #sheet:has(.player-gift-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!important}
 #sheet:has(.player-gift-sheet) .player-gift-heading{display:none}
}
.shipment-weekly-row{padding:14px 0;border-top:1px solid #ccc1ae}.shipment-weekly-row p{font-size:13px;line-height:1.6}.shipment-weekly-native{margin:20px 0}

.shipment-native-title{display:flex;align-items:center;gap:12px}.shipment-native-title img{width:44px;height:44px;border-radius:50%;flex-shrink:0}


/* MINT: The Mint's panels (ui/mint.js): the Vault Window, the Printer you hold, the Gift Post, and opening a gift */
.mt-sheet .mt-lead { color: var(--muted); }
.mt-stats { display: flex; gap: 16px; margin: 10px 0 12px; font-size: var(--t-md); color: var(--muted); }
.mt-stats b { color: var(--ink); font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.mt-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.mt-input { flex: 1 1 140px; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.mt-input:focus-visible { outline: 3px solid var(--cobalt-ink); outline-offset: 1px; }
.mt-err { color: var(--maroon); font-weight: 600; font-size: var(--t-md) !important; }
.mt-empty { color: var(--muted); font-size: var(--t-md) !important; }
.mt-preview { margin: 14px 0 0 !important; padding: 10px 12px; border-radius: var(--r-md); background: #eef1ff; color: var(--cobalt-ink); font-size: var(--t-sm) !important; line-height: 1.45 !important; }
.mt-ranges { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin: 12px 0; }
.mt-range { display: grid; gap: 1px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mt-range b { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.mt-range small { font-size: var(--t-xs); color: var(--muted); }
.mt-range[aria-selected=true] { border-color: var(--ink); background: var(--ink); color: #fff; }
.mt-range[aria-selected=true] small { color: #c9cdd4; }
.mt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.mt-tile { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 4px 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; color: var(--ink); cursor: pointer; transition: transform .12s, border-color .12s; }
.mt-tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.mt-tile b { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.mt-tile small { font-size: 10px; color: var(--muted); }
.mt-tile.held { opacity: .5; cursor: not-allowed; }
.mt-tile.mine { border-color: var(--gold); background: #fff6dc; box-shadow: 0 0 0 2px var(--gold) inset; }
.mt-tile-case { width: 26px; height: 22px; border-radius: 4px; background: linear-gradient(#cfd2d6 0 28%, #a3a7ad 28% 82%, #3e3e3e 82% 90%, #a3a7ad 90%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.mt-tile.mine .mt-tile-case { background: linear-gradient(#fff4cf 0 28%, #d9a93a 28% 82%, #6e5317 82% 90%, #d9a93a 90%); }
.mt-hero { display: flex; gap: 16px; align-items: center; margin: 10px 0 14px; padding: 12px; border-radius: var(--r-lg); background: var(--paper-2); }
.mt-hero p { margin: 0 0 6px !important; color: var(--muted); }
.mt-pixel { image-rendering: pixelated; flex: none; border-radius: var(--r-md); background: #efe6d2; }
.mt-timer { font-size: var(--t-md); font-weight: 700; color: var(--cobalt-ink); font-variant-numeric: tabular-nums; }
.mt-seg { display: flex; gap: 4px; padding: 4px; margin: 10px 0; border-radius: var(--r-pill); background: var(--paper-2); }
.mt-seg button { flex: 1; min-height: 40px; border: 0; border-radius: var(--r-pill); background: transparent; font: inherit; font-weight: 700; font-size: var(--t-md); color: var(--muted); cursor: pointer; }
.mt-seg button[aria-checked=true], .mt-seg button[aria-selected=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(30,24,10,.12); }
.mt-label { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px !important; font-size: var(--t-sm) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mt-label b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; }
.mt-people { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-person { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font: inherit; font-weight: 600; font-size: var(--t-md); color: var(--ink); cursor: pointer; }
.mt-person[aria-checked=true] { border-color: var(--cobalt); background: #eef1ff; color: var(--cobalt-ink); }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9c3b4; }
.mt-dot.on { background: #3fae7a; }
.mt-wraps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mt-wrap { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--paper-2); cursor: pointer; }
.mt-wrap[aria-checked=true] { border-color: var(--ink); background: #fff; }
.mt-wrapbox { --pattern: none; position: relative; display: inline-block; flex: none; width: 44px; height: 38px; margin-top: 6px; border-radius: 5px; background: linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%), var(--pattern) 0 0 / 44px 44px, var(--paper); box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.mt-wrapbox.small { width: 30px; height: 26px; margin-top: 4px; }
.mt-wb-lid { position: absolute; left: -3px; right: -3px; top: -6px; height: 9px; border-radius: 3px; background: linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%), var(--pattern) 0 0 / 44px 44px, var(--paper); filter: brightness(1.08); }
.mt-wrapbox.small .mt-wb-lid { top: -5px; height: 7px; }
.mt-wb-bow { position: absolute; left: 50%; top: -12px; width: 16px; height: 8px; margin-left: -8px; border-radius: 50% 50% 0 0; border: 3px solid var(--ribbon); border-bottom: 0; }
.mt-wrapbox.small .mt-wb-bow { top: -10px; width: 12px; margin-left: -6px; border-width: 2px; }
.mt-check { display: flex; gap: 10px; align-items: center; margin: 12px 0; font-size: var(--t-md); cursor: pointer; }
.mt-check input { width: 18px; height: 18px; accent-color: var(--cobalt); }
.mt-price { display: grid; gap: 1px; margin: 12px 0 0; border-radius: var(--r-md); overflow: hidden; background: var(--line); }
.mt-price > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fff; font-size: var(--t-md); }
.mt-price dt { color: var(--muted); }
.mt-price dd { margin: 0; font-weight: 700; text-align: right; }
.mt-gifts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.mt-gift { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.mt-gift.opened { background: var(--paper-2); }
.mt-gift-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mt-gift-text strong { font-size: var(--t-lg); }
.mt-gift-text small { color: var(--muted); font-size: var(--t-md); overflow-wrap: anywhere; }
.mt-badge { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: var(--r-pill); background: var(--paper-3); color: var(--muted); }
.mt-badge.done { background: #e4f4ea; color: #24734a; }
.mt-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper-2); }
.mt-courier { margin-top: 12px; }
.mt-goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.mt-good { display: grid; gap: 4px; justify-items: start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mt-good img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
.mt-good strong { font-size: var(--t-sm); line-height: 1.25; }
.mt-good small { font-size: var(--t-xs); color: var(--muted); }
.mt-good[aria-checked=true] { border-color: var(--cobalt); box-shadow: 0 0 0 2px var(--cobalt) inset; }
.mt-summary { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 12px; border-radius: var(--r-lg); background: var(--paper-2); }
.mt-summary p { margin: 0 !important; font-weight: 700; }
.mt-summary small { display: block; font-weight: 500; color: var(--muted); font-size: var(--t-sm); }
/* opening a gift: the box in its paper, the ribbon pulled, the lid off, the gift rising out of it */
.mt-unwrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 42%, rgba(255,240,200,.18), rgba(14,16,20,.82) 62%); opacity: 0; transition: opacity .22s; overflow: hidden; }
.mt-unwrap.in { opacity: 1; }
.mt-unwrap.closing { opacity: 0; }
.mt-uw-stage { display: grid; justify-items: center; gap: 18px; width: min(420px, 100%); text-align: center; color: #fff; }
.mt-uw-from { display: grid; gap: 4px; }
.mt-uw-from small { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; color: #e8c15a; font-weight: 700; }
.mt-uw-from strong { font-size: 24px; }
.mt-uw-from q { font-size: var(--t-lg); color: #e9e2d0; max-width: 34ch; overflow-wrap: anywhere; }
.mt-box { position: relative; width: 210px; height: 230px; margin-top: 72px; }
.mt-box { --pattern: none; }
.mt-box-body { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18)), var(--pattern) 0 0 / 128px 128px, var(--paper); box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 -10px 0 rgba(0,0,0,.12); transition: transform .5s cubic-bezier(.3,1.5,.5,1) .2s, opacity .4s .5s; }
.mt-box-lid { position: absolute; left: -10px; right: -10px; bottom: 150px; height: 46px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.1)), var(--pattern) 0 0 / 128px 128px, var(--paper); box-shadow: 0 6px 14px rgba(0,0,0,.3); transform-origin: 20% 100%; transition: transform .7s cubic-bezier(.2,.9,.3,1.2) .15s, opacity .5s .55s; }
.mt-bow { position: absolute; left: 50%; top: -38px; width: 76px; height: 40px; margin-left: -38px; }
.mt-bow::before, .mt-bow::after { content: ""; position: absolute; bottom: 0; width: 36px; height: 34px; border: 9px solid var(--ribbon); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.mt-bow::before { left: 0; transform: rotate(-24deg); }
.mt-bow::after { right: 0; transform: rotate(24deg); }
.mt-rib-v { position: absolute; left: 50%; bottom: 0; width: 28px; height: 196px; margin-left: -14px; background: var(--ribbon); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); transition: transform .45s ease-in, opacity .3s .2s; }
.mt-rib-h { position: absolute; left: 0; right: 0; bottom: 64px; height: 26px; background: var(--ribbon); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); transition: transform .45s ease-in, opacity .3s .2s; }
.mt-item { position: absolute; left: 50%; bottom: 40px; width: 200px; height: 200px; margin-left: -100px; display: grid; place-items: center; opacity: 0; transform: translateY(40px) scale(.3); transition: transform .8s cubic-bezier(.2,1.4,.4,1) .55s, opacity .3s .55s; z-index: 1; }
.mt-item img, .mt-item canvas { width: 190px; height: 190px; object-fit: contain; border-radius: 14px; background: #fbf6ea; box-shadow: 0 0 0 6px #e8c15a, 0 18px 50px rgba(255,214,120,.55); image-rendering: pixelated; }
.mt-rays { position: absolute; left: 50%; bottom: 80px; width: 520px; height: 520px; margin: 0 0 -260px -260px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,226,150,.35) 0 9deg, transparent 9deg 22deg); opacity: 0; transform: scale(.4); transition: opacity .6s .6s, transform 1s .6s; pointer-events: none; }
.mt-box.open .mt-rays { opacity: 1; transform: scale(1); animation: mt-spin 14s linear 1.2s infinite; }
.mt-box.open .mt-rib-v { transform: translateY(-260px) rotate(-12deg); opacity: 0; }
.mt-box.open .mt-rib-h { transform: translateX(340px); opacity: 0; }
.mt-box.open .mt-box-lid { transform: translate(-60px, -190px) rotate(-38deg); opacity: 0; }
.mt-box.open .mt-box-body { transform: translateY(70px) scale(.92); opacity: 0; }
.mt-box.open .mt-item { opacity: 1; transform: translateY(-6px) scale(1); }
.mt-pull { min-width: 200px; justify-content: center; animation: mt-nudge 1.6s ease-in-out .8s infinite; }
.mt-uw-reveal { display: grid; gap: 4px; justify-items: center; animation: mt-rise .45s ease-out; }
.mt-uw-reveal small { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .1em; color: #e8c15a; font-weight: 700; }
.mt-uw-reveal h2 { margin: 0; font-size: 28px; }
.mt-uw-reveal p { margin: 4px 0 0; color: #e9e2d0; font-size: var(--t-lg); line-height: 1.45; max-width: 36ch; }
.mt-uw-reveal .actions { justify-content: center; }
.mt-confetti { position: absolute; inset: 0; pointer-events: none; }
.mt-confetti i { position: absolute; left: 50%; top: 44%; width: 9px; height: 14px; border-radius: 2px; background: var(--c); animation: mt-pop var(--d) cubic-bezier(.15,.8,.35,1) var(--delay) forwards; opacity: 0; }
@keyframes mt-pop { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 46vw), 50vh) rotate(var(--r)); } }
@keyframes mt-spin { to { transform: rotate(360deg); } }
@keyframes mt-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mt-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mt-box *, .mt-rays, .mt-pull, .mt-confetti i, .mt-uw-reveal { animation: none !important; transition-duration: .01s !important; } }
@media (max-width: 640px) { .mt-box { transform: scale(.86); margin-top: 20px; } .mt-uw-from strong { font-size: 20px; } .mt-tiles { max-height: 40vh; } }

.mt-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-lg); background: var(--paper-2); }
.mt-alt p { margin: 0 !important; font-weight: 600; }
.mt-market { text-decoration: none; }
.mt-out { font-size: 12px; margin-left: 2px; }
.mt-small { font-size: var(--t-sm) !important; color: var(--muted); }
.mt-textlink { color: var(--cobalt-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }


/* MINT: a clean stage while a gift is open (the HUD, chat, map and name tags step aside); the airdrop line; the collection's
   bar; the print's mystery Printer; the thank-you share */
body.mt-unwrapping #app > *:not(canvas):not(.mt-unwrap) { visibility: hidden !important; }
body.mt-unwrapping > *:not(#app):not(.mt-unwrap) { visibility: hidden !important; }   /* the game's cards and toasts live on the body */
.mt-drop { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: #fff7e2; border: 1px solid #ecd9a6; font-size: var(--t-sm); line-height: 1.45; color: var(--ink); }
.mt-drop b { font-weight: 700; }
.mt-drop-coin { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #e8c15a 45%, #b8892b); box-shadow: inset 0 0 0 2px rgba(120,80,10,.25); }
.mt-bar { height: 10px; margin: 0 0 12px; border-radius: 999px; background: #ece4d2; overflow: hidden; }
.mt-bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #2f4bff, #d9a93a); }
.mt-mystery { position: relative; flex: none; }
.mt-mystery canvas { filter: brightness(.55) contrast(.9) blur(.4px); border-radius: 12px; background: #2a2d33; }
.mt-mystery b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 800; color: #f0cf6a; text-shadow: 0 2px 12px rgba(0,0,0,.6); animation: mt-nudge 2.4s ease-in-out infinite; }
.mt-share .mt-x { font-weight: 800; margin-right: 6px; }
.mt-uw-note { margin: 6px 0 0; color: #f3d9a4; font-size: var(--t-sm); }
@media (prefers-reduced-motion: reduce) { .mt-mystery b { animation: none; } }
/* MINT: the owner's Mint airdrops list: a full-width list, the wallet wraps instead of running under the amount */
#ctl-pane-mintdrops .ctl-grid { grid-template-columns: minmax(0, 1fr); }
#ctl-pane-mintdrops .ctl-row { align-items: center; gap: 12px; }
#ctl-pane-mintdrops .ctl-who small { overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: var(--t-xs); }
#ctl-pane-mintdrops .ctl-tags { flex: none; }



/* BUILDERS: Builders' Isle's sheets (games/builders.js): the lock and welcome, the Collab Board, a Founders' Walk coin, the
   Founders' Lagoon's fish. Scoped to .builders-sheet; the fishing guide's lagoon entry is .fg-builders */
.builders-sheet h3{margin:16px 0 8px}
.builders-sheet .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.builders-sheet .callout{margin-top:12px;display:grid;gap:4px}
.builders-sheet .callout p{margin:0}
.bld-perks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.bld-perks li{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 #2f4bff}
.bld-perks li span{color:var(--muted);font-size:13px}
.bld-rows{display:grid;gap:6px;margin-top:10px}
.bld-row{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bld-post{display:grid;gap:8px;padding:12px;border-radius:var(--r-md);background:#f4efe2;box-shadow:inset 0 0 0 1px #d9b265}
.bld-post-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.bld-post select,.bld-post input{min-height:40px;border-radius:10px;border:1px solid var(--line);padding:0 10px;font:inherit;background:#fff;min-width:0}
.bld-post .btn{justify-self:start}
.bld-cards,.bld-deals,.bld-fishes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bld-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 3px 0 0 #2f4bff}
.bld-card.offer{box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 #3fb87a}
.bld-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.bld-card-head small{margin-left:auto;color:var(--muted)}
.bld-kind{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#2f4bff}
.bld-card.offer .bld-kind{color:#2a8f5a}
.bld-who,.bld-note{margin:0;font-size:13px}
.bld-who{font-weight:700}
.bld-note{color:var(--muted);overflow-wrap:anywhere}
.bld-joins{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bld-joins li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.bld-card .row{margin-top:2px}
.bld-deals li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:8px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 #e8bd52}
.bld-deals li small{margin-left:auto;color:var(--muted)}
.bld-fish{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;padding:10px 12px;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--rarity)}
.bld-fish i{width:18px;height:11px;margin-top:4px;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}
.bld-fish div{display:grid;gap:1px}
.bld-fish small{color:var(--muted)}
.bld-fish p{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.fg-spot.fg-builders{background:linear-gradient(180deg,#fff8e6,#fff)}


/* BUILDERS: the Builder badge, a pixel rocket by the name of everyone who launched a coin on the Printer Launcher: their
   name tag (yours too), their chat lines and a chip on their card (server/builders.mjs adds the badge 'builder') */
.tag.player.builder::after,.tag.you.builder::after,.who.builder::after,.chip.builder::before{content:'';display:inline-block;width:10px;height:14px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1' fill='%232f4bff'/%3E%3Crect x='2' y='1' width='3' height='5' fill='%232f4bff'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='4' width='1' height='3' fill='%232f4bff'/%3E%3Crect x='5' y='4' width='1' height='3' fill='%232f4bff'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%231d2fa8'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%23f2c230'/%3E%3Crect x='3' y='8' width='1' height='2' fill='%23ff7a1a'/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated}
.tag.player.builder::after,.tag.you.builder::after,.who.builder::after{margin-left:5px}
.chip.builder{display:inline-flex;align-items:center;gap:5px;background:#e9edff;color:#2236b8}
.builders-sheet .bld-tide{background:#eef1ff}
.builders-sheet .bld-tide.on{background:#fff1cf;box-shadow:inset 0 0 0 1px #e8a21a}


.mt-payee{overflow-wrap:anywhere;word-break:break-word;max-width:100%}.mt-price dd{min-width:0}

.mt-order{overflow-wrap:anywhere}


/* SKR welcome pack. Paper, slate and cobalt, scoped to this reward sheet. */
.skr-pack{--skr-paper:#f3efe6;--skr-ink:#18252f;--skr-blue:#244fc3;--skr-line:#d7d3c9;background:var(--skr-paper);color:var(--skr-ink);font-family:'IBM Plex Sans',Arial,sans-serif;border-radius:16px;overflow:hidden;width:100%;max-width:680px;margin:0 auto;text-align:left}
.skr-pack *{box-sizing:border-box}
.skr-pack-heading{padding:28px 30px 0}
.skr-pack-heading>span{font-size:12px;font-weight:600;letter-spacing:.035em;color:#53616a}
.skr-pack h2{font-family:inherit!important;font-size:32px!important;letter-spacing:-1.3px!important;line-height:1.08!important;margin:12px 0!important;color:var(--skr-ink)!important}
.skr-pack-heading p{font-size:15px;line-height:1.5;margin:0;color:#53616a}
.skr-pack-stage{height:295px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 80%,#dad5cb 0,transparent 56%);perspective:900px;overflow:hidden}
.skr-pouch{position:relative;width:184px;height:242px;padding:30px 20px 16px;background:linear-gradient(105deg,#1c2c38 0,#364956 47%,#223440 55%,#182a35 100%);color:#f4efe4;box-shadow:12px 17px 16px -10px #14232c55;border:1px solid #667580;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%);transform:rotate(-7deg);transition:transform .4s ease}
.skr-pouch-brand{display:block;font-size:11px;letter-spacing:.02em}
.skr-pouch>strong{display:block;font-size:46px;line-height:1;font-weight:600;letter-spacing:-2px;margin:8px 0 5px}
.skr-pouch-label{font-size:9px;letter-spacing:.16em;font-weight:600}
.skr-pouch-seal,.skr-pouch-crimp{position:absolute;left:0;right:0;height:13px;background:repeating-linear-gradient(90deg,#85909633 0px,#85909633 1px,transparent 1px,transparent 4px);border-bottom:1px solid #9aabae66;top:0}
.skr-pouch-seal:after{content:'';position:absolute;top:18px;left:0;right:0;border-bottom:1px dashed #bec4c17a}
.skr-pouch-crimp{top:auto;bottom:0;border-top:1px solid #9aabae66;border-bottom:0}
.skr-pouch-phone{position:absolute;right:17px;bottom:43px;width:44px;height:79px;border:3px solid #aeb8b8;border-radius:10px;background:#1b2430;transform:rotate(13deg);display:grid;place-items:center;box-shadow:3px 4px 0 #111b24}
.skr-pouch-phone:before{content:'';width:7px;height:4px;position:absolute;top:4px;left:15px;border-radius:4px;background:#aeb8b8}
.skr-pouch-phone b{font-size:12px;color:#cad7f2;transform:rotate(-13deg)}
.skr-pouch-phone i{position:absolute;background:#496aa8;left:0;right:0;bottom:0;height:24px;border-radius:0 0 6px 6px}
.skr-pouch-foot{position:absolute;left:20px;bottom:22px;font-size:9px;letter-spacing:.035em}
.skr-pack-copy{padding:0 30px 26px}
.skr-pack-status{font-size:14px;font-weight:600;line-height:1.5;margin:0 0 16px;min-height:21px}
.skr-rewards{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--skr-line)}
.skr-rewards li{display:flex;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid var(--skr-line);min-height:67px}
.skr-rewards img,.skr-reward-icon{width:42px;height:42px;flex:0 0 42px;object-fit:contain;border-radius:7px;background:#e7e3d9}
.skr-reward-icon{display:grid;place-items:center;font-size:23px;color:#273b52;font-weight:500}
.skr-xp{color:var(--skr-blue);font-size:29px}
.skr-rewards strong{font-size:15px;font-weight:600;display:block;line-height:1.4}
.skr-rewards span{font-size:12px;color:#53616a;display:block;margin-top:2px;line-height:1.4}
.skr-primary{width:100%;min-height:50px;border:0;border-radius:8px;background:var(--skr-blue);color:white;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:12px 16px;touch-action:manipulation}
.skr-primary:hover:enabled{background:#193f9e}
.skr-primary:focus-visible{outline:3px solid #18252f;outline-offset:3px}
.skr-primary:disabled{cursor:default;background:#dad7cf;color:#4e5b65}
.skr-pack-terms{font-size:11px;line-height:1.5;color:#53616a;text-align:center;margin:13px 0 0}
.skr-saved-mark{display:grid;place-items:center;margin:24px auto;width:54px;height:54px;border:1px solid #244fc366;border-radius:50%;font-size:24px;color:var(--skr-blue)}
.skr-revealing .skr-pouch{animation:skr-open .85s cubic-bezier(.22,.61,.36,1) both}
.skr-revealing .skr-pouch-seal{animation:skr-tear .85s ease both}
.skr-opened .skr-rewards li{animation:skr-reward-in .35s ease both}
.skr-opened .skr-rewards li:nth-child(2){animation-delay:.07s}.skr-opened .skr-rewards li:nth-child(3){animation-delay:.14s}
@keyframes skr-open{0%{transform:rotate(-7deg)}30%{transform:rotate(1deg) scale(1.04)}65%{transform:translateY(5px) rotate(-2deg)}100%{transform:translateY(310px) rotate(7deg)}}
@keyframes skr-tear{0%,20%{transform:translateY(0)}60%,100%{transform:translateY(-120px) rotate(-20deg)}}
@keyframes skr-reward-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(min-width:700px){.skr-pack{display:grid;grid-template-columns:44% 56%;max-width:680px}.skr-pack-heading{grid-column:1/-1;padding:30px 30px 0}.skr-pack-stage{height:380px}.skr-pack-copy{padding-top:24px}.skr-pack h2{font-size:36px!important}.skr-opened{display:block;max-width:480px}.skr-opened .skr-pack-copy{padding-top:0}}
@media(max-width:360px){.skr-pack-heading{padding:22px 20px 0}.skr-pack h2{font-size:29px!important}.skr-pack-copy{padding:0 20px 22px}.skr-pack-stage{height:270px}.skr-pouch{transform:rotate(-7deg) scale(.92)}}
@media(prefers-reduced-motion:reduce){.skr-pack *{animation:none!important;transition:none!important}}
/* The opening uses Printer artwork and four printed reward receipts. */
.skr-pack.skr-pack-v2{display:block;max-width:480px;font-family:Geist,Arial,sans-serif;border-radius:13px}
.skr-pack-v2 .skr-pack-heading{padding:22px 24px 0}
.skr-pack-v2 .skr-heading-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650}
.skr-brand-mark{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.skr-heading-seeker{font-weight:450;color:#53616a;margin-left:auto;font-size:11px}
.skr-pack-v2 h2{font-size:29px!important;letter-spacing:-1px!important;margin-top:17px!important}
.skr-pack-v2 .skr-pack-heading p{font-size:13px}
.skr-pack-v2 .skr-pack-stage{height:318px;background:radial-gradient(ellipse at 50% 82%,#d6d0c2 0,transparent 55%)}
.skr-pack-v2 .skr-pouch{width:190px;height:258px;padding-top:30px;transform:rotate(-5deg);background:linear-gradient(105deg,#203646,#345064 45%,#293f51 52%,#1d3344 100%)}
.skr-pack-v2 .skr-pouch>strong{font-size:50px;letter-spacing:-2.6px;margin-top:7px}
.skr-pack-v2 .skr-pouch>.skr-brand-mark{position:absolute;width:86px;height:86px;left:50%;top:129px;transform:translateX(-50%)}
.skr-pack-v2 .skr-pouch-foot{bottom:24px;left:0;width:100%;text-align:center;font-size:10px}
.skr-pack-v2 .skr-pouch-brand{font-weight:600;font-size:13px}
.skr-pack-v2 .skr-pouch-label{font-size:9px}
.skr-pack-v2 .skr-pack-copy{padding:0 24px 21px}
.skr-pack-v2 .skr-pack-status{font-size:13px;text-align:center;margin-bottom:14px;font-weight:500}
.skr-contents-preview{padding:13px 0 16px;border-top:1px solid #d7d3c9;display:flex;flex-direction:column;gap:5px;text-align:center}
.skr-contents-preview strong{font-size:12px;font-weight:600}.skr-contents-preview span{font-size:11px;color:#53616a;line-height:1.5}
.skr-reveal-stage{height:348px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;perspective:900px;overflow:hidden}
.skr-reward-card{width:228px;min-height:277px;border:1px solid #d2cbbd;background:#faf7ee;border-radius:7px;box-shadow:0 12px 24px -17px #14232c88;position:relative;display:flex;align-items:center;flex-direction:column;padding:11px 18px 15px;animation:skr-print-reward .65s cubic-bezier(.2,.7,.2,1) both}
.skr-card-brand{align-self:stretch;display:flex;align-items:center;gap:5px;font-size:9px;font-weight:650;color:#53616a;border-bottom:1px solid #ded8ca;padding-bottom:6px}.skr-card-brand .skr-brand-mark{width:20px;height:20px}
.skr-card-art{width:112px;height:128px;object-fit:contain;margin:5px 0;image-rendering:pixelated}
.skr-card-look .skr-card-art{width:132px;height:135px;image-rendering:auto}
.skr-card-title{font-size:23px;letter-spacing:-.8px;font-weight:600;line-height:1.15;text-align:center}
.skr-reward-card p{font-size:11px;line-height:1.5;color:#53616a;text-align:center;margin:8px 0 12px;max-width:180px}
.skr-card-perf{border-bottom:1px dashed #c8c1b2;width:calc(100% + 36px);margin-top:auto;position:relative}
.skr-card-perf:before,.skr-card-perf:after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#f3efe6;top:-4px;left:-4px}.skr-card-perf:after{left:auto;right:-4px}
.skr-card-edition{font-size:8px;letter-spacing:.06em;color:#53616a;margin-top:9px}
.skr-xp-lettering{height:138px;display:grid;place-items:center;font-size:58px;font-weight:500;color:#315b9f;letter-spacing:-4px}
.skr-card-printer{background:#233c50;border-color:#3f586c;color:#f3efe6}.skr-card-printer .skr-card-brand,.skr-card-printer p,.skr-card-printer .skr-card-edition{color:#d0d8dd}.skr-card-printer .skr-card-brand{border-color:#587080}.skr-card-printer .skr-card-perf{border-color:#718393}
.skr-reveal-progress{display:flex;gap:7px}.skr-reveal-progress i{width:24px;height:3px;background:#d3cec2;border-radius:2px}.skr-reveal-progress i.is-revealed{background:#244fc3}
.skr-pack-v2.skr-revealing .skr-pouch{animation:skr-seal-open .8s cubic-bezier(.2,.7,.2,1) both}.skr-pack-v2.skr-revealing .skr-pouch-seal{animation:skr-tear .8s ease both}
.skr-pack-v2 .skr-skip{background:transparent;color:#53616a;border:1px solid #c8c1b2;font-size:12px;min-height:44px}
.skr-pack-v2 .skr-skip:hover:enabled{background:#e8e2d6;color:#304860}
#app #sheet.skr-pack-sheet{z-index:100;background:#f3efe6;border-color:#d7d3c9}
#sheet.skr-pack-sheet #sheet-body{padding:0}
@media(max-width:640px),(pointer:coarse){
 body.map-docked #sheet.skr-pack-sheet{left:8px!important;right:8px!important;top:max(8px,env(safe-area-inset-top))!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;height:auto!important;max-height:none!important;padding:0;display:flex;flex-direction:column;border-radius:13px}
 body.map-docked #sheet.skr-pack-sheet[hidden]{display:none}
 body.map-docked #sheet.skr-pack-sheet #sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 body.map-docked #sheet.skr-pack-sheet .sheet-mobile-head{background:#f3efe6;color:#18252f;border-color:#d7d3c9}
 body.map-docked #sheet.skr-pack-sheet .sheet-mobile-head button{color:#18252f}
}
.skr-pack-v2.skr-opened .skr-rewards{margin-top:19px}.skr-pack-v2.skr-opened .skr-pack-copy{padding-top:20px}
.skr-pack-v2.skr-opened .skr-rewards li{min-height:71px}.skr-replay{display:block;min-height:44px;margin:5px auto 0;background:transparent;color:#344f70;border:0;text-decoration:underline;font-family:inherit;font-size:12px;cursor:pointer}
.skr-pack-v2.skr-opened .skr-rewards li:nth-child(4){animation-delay:.21s}
@keyframes skr-seal-open{0%{transform:rotate(-5deg)}40%{transform:rotate(0) scale(1.035)}72%{transform:translateY(6px) rotate(-2deg);opacity:1}100%{transform:translateY(20px) rotate(-2deg);opacity:0}}
@keyframes skr-print-reward{0%{opacity:0;transform:translateY(72px) rotateX(-8deg) scale(.94)}65%{opacity:1;transform:translateY(-4px) rotateX(0) scale(1)}100%{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@media(max-width:360px){.skr-pack-v2 .skr-pack-heading{padding:18px 20px 0}.skr-pack-v2 h2{font-size:26px!important}.skr-pack-v2 .skr-pack-copy{padding:0 20px 18px}.skr-pack-v2 .skr-pack-stage{height:286px}.skr-pack-v2 .skr-pouch{transform:rotate(-5deg) scale(.92)}.skr-reveal-stage{height:320px}.skr-heading-seeker{font-size:10px}}

/* The Mint release gift. Paper, ink and brass match the existing Mint. */
.mint-release-gift{width:min(540px,100%);box-sizing:border-box;padding:28px;color:#24344b}
.mint-release-gift .mrg-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.mint-release-gift .mrg-brand img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}
.mint-release-gift .mrg-brand div{display:grid;gap:2px}.mint-release-gift .mrg-brand strong{font-size:15px}.mint-release-gift .mrg-brand span{font-size:12px;color:#716654}
.mint-release-gift h2{margin:0 0 8px;font-size:30px;line-height:1.15;letter-spacing:-.6px}
.mint-release-gift .mrg-intro{margin:0 0 22px;font-size:14px;line-height:1.6;color:#626975}
.mint-release-gift .mrg-reward{display:grid;gap:4px;padding:22px 24px;background:#f2ead9;border:1px solid #d7c9a9;border-bottom:4px solid #b49650}
.mint-release-gift .mrg-reward span{font-size:13px}.mint-release-gift .mrg-reward strong{font-size:52px;line-height:1.1;letter-spacing:-2px;font-variant-numeric:tabular-nums;color:#22334b}
.mint-release-gift .mrg-rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0;border-bottom:1px solid #ddd5c6}
.mint-release-gift .mrg-rules p{display:grid;gap:5px;font-size:12px;line-height:1.45;margin:0;color:#656b73}.mint-release-gift .mrg-rules strong{font-size:15px;color:#24344b}
.mint-release-gift .mrg-status{font-size:14px;line-height:1.6;margin:18px 0;color:#37485c}
.mint-release-gift .mrg-wallet{display:grid;gap:6px;padding:14px;background:#f5f1e9;border:1px solid #e2d9c8;font-size:12px}
.mint-release-gift .mrg-wallet code{font-family:inherit;font-size:12px;line-height:1.5;overflow-wrap:anywhere;user-select:all;color:#24344b}.mint-release-gift .mrg-wallet small{font-size:11px;color:#656b73}
.mint-release-gift .mrg-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}.mint-release-gift .mrg-actions button{min-height:44px}
.mint-release-gift .mrg-error{color:#8b3a32;font-size:13px;line-height:1.6}.mint-release-gift .mrg-transfer{display:inline-block;margin-top:16px;font-size:13px}
.mint-release-gift .mrg-foot{margin:20px 0 0;font-size:11px;line-height:1.6;color:#656b73}
.mint-release-gift .mrg-reward .mrg-qualification{margin-top:8px;font-size:12px;font-weight:650;color:#3c4b5e}
.mint-release-gift .mrg-rules .mrg-tier-current{padding:8px 10px;background:#f2ead9;border-left:3px solid #b49650}
.mint-release-gift .mrg-actions button:disabled{background:#e6e0d3!important;color:#3d4754!important;border-color:#cbbfaa!important;opacity:1!important;cursor:default}
.mint-gift-desk{box-sizing:border-box;width:min(100%,540px);margin-inline:auto;color:#252d3a}
#sheet:has(> #sheet-body > .mint-gift-desk){bottom:auto;max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 24px)}
.mint-gift-desk header>p{margin:0;color:#4b5668;font-size:13px;font-weight:650}
.mint-gift-desk h2{margin:4px 0 18px}
.mint-ink-gift{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:1px solid #e4d9c3;border-radius:14px;background:#f4eddf}
.mint-ink-gift h3{margin:0 0 4px;color:#252d3a;font-size:17px;text-transform:none;letter-spacing:0}
.mint-ink-gift p{margin:0;color:#4b5668;font-size:14px;line-height:1.45}
.mint-ink-gift button,.mint-gift-actions button{min-height:44px}
.mint-gift-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media(max-width:540px){.mint-ink-gift{grid-template-columns:1fr}.mint-ink-gift button{width:100%}}
@media(max-width:480px){.mint-release-gift{padding:22px 18px}.mint-release-gift h2{font-size:27px}.mint-release-gift .mrg-brand{margin-bottom:18px}.mint-release-gift .mrg-reward{padding:18px}.mint-release-gift .mrg-reward strong{font-size:44px}.mint-release-gift .mrg-actions{display:grid;grid-template-columns:1fr}.mint-release-gift .mrg-actions button{width:100%}}
body.map-docked #app #sheet:has(.mint-release-gift),#app #sheet:has(.mint-release-gift){width:min(520px,calc(100vw - 24px));height:auto;bottom:auto;max-height:calc(100dvh - 24px)}
@media(max-width:700px){body.map-docked #app #sheet:has(.mint-release-gift),#app #sheet:has(.mint-release-gift){top:8px!important;bottom:8px!important;max-height:calc(100dvh - 16px)!important;height:auto!important;z-index:220!important}.mint-release-gift .mrg-brand{margin-bottom:16px}.mint-release-gift .mrg-intro{margin-bottom:16px}.mint-release-gift .mrg-status{margin:14px 0}.mint-release-gift .mrg-actions{margin-top:16px}}


/* Wallet sign-in recovery uses the existing Printer wallet dialog. */
.wallet-error p{line-height:1.5;overflow-wrap:anywhere}
.wallet-error button{width:100%;margin-top:10px;justify-content:center}
.wallet-error button:last-child{background:#2054bd;color:#fff;border-color:#2054bd}

/* CITYWORLD: the Printer Gate's travel card and Loop City's street names (games/city-world.js) */
.cw-travel{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(ellipse at 50% 55%,rgba(255,226,170,.96) 0%,rgba(242,140,74,.94) 38%,rgba(42,36,70,.97) 100%)}
.cw-travel.home{background:radial-gradient(ellipse at 50% 55%,rgba(232,251,255,.96) 0%,rgba(44,207,198,.92) 40%,rgba(18,32,96,.97) 100%)}
.cw-travel.on{opacity:1}
.cw-travel-in{text-align:center;color:#fff8ea;text-shadow:0 2px 18px rgba(0,0,0,.35);transform:scale(.96);transition:transform 1.6s ease-out}
.cw-travel.on .cw-travel-in{transform:scale(1)}
.cw-kicker{font:600 13px/1 Geist,"IBM Plex Sans",system-ui;letter-spacing:.32em;text-transform:uppercase;opacity:.85}
.cw-title{font:800 clamp(40px,9vw,92px)/1 Geist,"IBM Plex Sans",system-ui;letter-spacing:.02em;margin:14px 0 10px}
.cw-line{font:500 16px/1.3 Geist,"IBM Plex Sans",system-ui;opacity:.9}
.cw-bar{width:min(260px,60vw);height:3px;margin:22px auto 0;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.cw-bar i{display:block;height:100%;width:0;background:#fff8ea;transition:width 1.5s linear}
.cw-travel.on .cw-bar i{width:100%}
.cw-street{position:fixed;right:18px;bottom:236px;z-index:30;pointer-events:none;text-align:right;color:#fff;
  text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.6);transition:opacity .8s ease;opacity:1}
.cw-street.fade{opacity:0}
.cw-street b{display:block;font:800 26px/1.05 Geist,"IBM Plex Sans",system-ui;letter-spacing:.01em}
.cw-street span{display:block;font:600 13px/1.2 Geist,"IBM Plex Sans",system-ui;letter-spacing:.18em;text-transform:uppercase;color:#f2c294;margin-top:4px}
@media (max-width:767px){.cw-street{right:12px;bottom:auto;top:96px}.cw-street b{font-size:20px}}

/* CLUB: Adults BRR (games/club.js): Make It Rain, the big-rain banner and the club's sheets */
.club-rain{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:31;display:grid;gap:2px;min-width:210px;padding:12px 22px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#ff3fa6,#9b5cff);color:#fff;box-shadow:0 8px 28px rgba(255,63,166,.45),inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.club-rain b{font:800 18px/1.1 Geist,"IBM Plex Sans",system-ui;letter-spacing:.02em}
.club-rain span{font:600 12px/1.2 Geist,"IBM Plex Sans",system-ui;opacity:.9}
.club-rain:active{transform:translateX(-50%) scale(.97)}
.club-big{position:fixed;left:50%;top:22%;transform:translate(-50%,0) scale(.9);z-index:32;pointer-events:none;padding:12px 26px;border-radius:14px;
  background:rgba(20,15,26,.82);color:#ffc94a;font:800 clamp(20px,4vw,34px)/1.1 Geist,"IBM Plex Sans",system-ui;text-shadow:0 0 18px rgba(255,201,74,.6);opacity:0}
.club-big.on{animation:club-big 4s ease forwards}
@keyframes club-big{0%{opacity:0;transform:translate(-50%,0) scale(.85)}10%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0}}
.club-stacks{display:grid;gap:10px;margin:14px 0}
.club-stack{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.club-stack span{opacity:.75}
.club-board{margin:12px 0;padding-left:22px}
.club-board li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.08)}
@media (max-width:767px){.club-rain{bottom:120px}}

/* DONUTS: Dough Printer (games/donuts.js): the menu, the shift panel */
.donut-menu{display:grid;gap:8px;margin:14px 0}
.donut-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:12px 14px;text-align:left}
.donut-item i,.donut-want i,.donut-box i,.donut-tray i{display:inline-block;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 5px #d9a066,0 0 0 2px #fff}
.donut-item span{opacity:.7}
.donut-shift{position:fixed;right:16px;top:110px;z-index:31;width:min(300px,calc(100vw - 32px));padding:14px;border-radius:16px;background:rgba(43,29,36,.92);color:#fff4dc;
  box-shadow:0 10px 30px rgba(0,0,0,.35);font:500 14px/1.3 Geist,"IBM Plex Sans",system-ui}
.donut-shift.away{opacity:.55}
.donut-shift .eyebrow{color:#ff9ad0;margin:0 0 8px}
.donut-want,.donut-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.donut-want span,.donut-box span{opacity:.75;margin-right:4px}
.donut-box em{opacity:.6}
.donut-trays{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.donut-tray{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px}
.donut-shift .row{display:flex;flex-wrap:wrap;gap:6px}
.donut-clock{height:4px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.donut-clock b{display:block;height:100%;background:#ff7fbf;transition:width .25s linear}
@media (max-width:767px){.donut-shift{top:auto;bottom:130px;right:8px}}

/* CITYWORLD: the Loop Phone and its GPS (games/city-phone.js) */
.cw-phone-btn{position:fixed;left:16px;top:124px;z-index:30;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border:0;border-radius:999px;
  background:#1d2433;color:#fff4dc;box-shadow:0 6px 20px rgba(0,0,0,.3);font:700 14px/1 Geist,"IBM Plex Sans",system-ui;cursor:pointer}
.cw-phone-icon{width:14px;height:22px;border-radius:4px;border:2px solid #f2c294;position:relative}
.cw-phone-icon::after{content:"";position:absolute;left:3px;right:3px;bottom:2px;height:2px;border-radius:2px;background:#f2c294}
.cw-gps{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;
  background:rgba(29,36,51,.86);color:#fff4dc;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.3);font:600 13px/1.15 Geist,"IBM Plex Sans",system-ui}
.cw-gps i{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid #ffc94a;transform-origin:50% 60%}
.cw-gps b{display:block;font-weight:800}
.cw-gps span{opacity:.8}
.cw-phone-tabs{display:flex;gap:6px;margin:10px 0 14px}
.cw-section h3{margin:16px 0 6px;font:800 13px/1 Geist,"IBM Plex Sans",system-ui;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.cw-place{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.cw-place p{margin:2px 0 4px;opacity:.8;font-size:13px}
.cw-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#3fd18a22;color:#1f7a4c;font:700 11px/1.4 Geist,system-ui}
.cw-tag.soon{background:#0000000d;color:#6b6257}
.cw-wallet{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 12px}
.cw-wallet div{padding:12px;border-radius:12px;background:#0000000a}
.cw-wallet span{display:block;font-size:12px;opacity:.7}
.cw-wallet b{display:block;font-size:22px;margin-top:4px}
@media (max-width:767px){.cw-phone-btn{top:150px;left:12px}.cw-gps{top:12px}}
/* CITYLOTS: Loop City's lots, towers, squads and showroom garages (games/city-lots.js) */
.lot-sheet h3{margin:14px 0 6px;font:800 13px/1.2 Geist,system-ui;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.lot-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}
.lot-facts>div{padding:10px 12px;border-radius:12px;background:#0000000a;display:flex;flex-direction:column;gap:2px}
.lot-facts span{font-size:12px;opacity:.65}.lot-facts b{font:800 15px/1.2 Geist,system-ui}
.lot-tiers{display:grid;gap:6px;margin:10px 0}.lot-tiers>div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:#2f4bff0d}.lot-tiers span{opacity:.75;font-size:13px;text-align:right}
.lot-build{margin:6px 0 4px}.lot-build .row{flex-wrap:wrap}
.lot-chips{display:flex;flex-wrap:wrap;gap:8px}
.lot-input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid #0000001f;font:600 15px Geist,system-ui;background:#fff}
.lot-squad{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}.lot-squad li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:#0000000a}.lot-squad li b{flex:1}.lot-squad li span{opacity:.65;font-size:12px}.lot-squad .btn{padding:6px 10px;font-size:12px}
.lot-cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}.lot-car{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:#0000000a;font-weight:700}
.lot-rentals{display:grid;gap:6px;margin:10px 0}.lot-rentals>div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:#0000000a}.lot-rentals span{opacity:.7;font-size:13px}
.chip.tower{background:#1d2026;color:#ffc94a}   /* CITYLOTS: a Loop City tower on the player card */
/* CLUB REALISTIC: the club's graphics switch (games/club.js) */
.club-gfx{position:fixed;top:124px;right:16px;z-index:30;padding:9px 14px;border-radius:999px;border:1px solid #ffffff2e;background:#140f1acc;color:#ffd6ee;font:700 13px/1 Geist,system-ui;backdrop-filter:blur(8px);cursor:pointer}
.club-gfx:hover{background:#1f1628e6}
/* WHIRLPOOL: the vignette that closes in while you spin down into the Printer Gate whirlpool (games/city-world.js) */
.cw-dive{position:fixed;inset:0;z-index:59;pointer-events:none;opacity:0;transition:opacity 1.1s ease-in;background:radial-gradient(circle at 50% 52%,rgba(16,30,110,0) 0%,rgba(16,30,110,0) 26%,rgba(20,40,150,.42) 58%,rgba(8,12,44,.9) 100%)}
.cw-dive.on{opacity:1}
@media (prefers-reduced-motion:reduce){.cw-dive{transition:none}}
/* CITYJOBS, CITYRACES, CITYMEET: the job panel under the Loop Phone button, the race panel under the GPS, the jobs' sheets, the
   drag strip's timing slip and the meet's stars (games/city-jobs.js, games/city-races.js, games/city-meet.js) */
.cj-hud{position:fixed;left:16px;top:172px;z-index:30;display:grid;gap:3px;min-width:200px;max-width:260px;padding:10px 12px;border-radius:14px;
  background:rgba(29,36,51,.88);color:#fff4dc;box-shadow:0 6px 20px rgba(0,0,0,.3);font:600 13px/1.25 Geist,"IBM Plex Sans",system-ui}
.cj-hud b{font:800 11px/1.2 Geist,system-ui;letter-spacing:.08em;text-transform:uppercase;color:#f2c230}
.cj-hud strong{font:800 15px/1.2 Geist,system-ui;color:#fff}
.cj-hud .cj-ink,.cj-hud .cj-clock{color:#ffd23a;font-weight:800}
.cj-hud .cj-clock.late{color:#ff6a5c}
.cj-hud .btn{justify-self:start;margin-top:4px;padding:5px 10px;font-size:12px}
.cj-hud.cr-hud{left:50%;top:64px;transform:translateX(-50%);min-width:220px;text-align:center;justify-items:center}
.cj-hud.cr-hud strong{font:900 24px/1.1 Geist,system-ui;font-variant-numeric:tabular-nums}
.cj-facts{display:grid;gap:6px;margin:10px 0}.cj-facts>div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;background:#0000000a}
.cj-facts span{opacity:.7;font-size:13px}.cj-facts b{text-align:right}
.cj-cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.cj-car{display:flex;align-items:center;gap:8px;padding:8px 10px;font-weight:700;justify-content:flex-start}.cj-car img{width:44px;height:30px;object-fit:contain}
.cr-paper{margin:10px 0;padding:14px 16px;border-radius:6px;background:#fbf8f0;color:#1d2126;font:600 14px/1.5 "IBM Plex Mono",ui-monospace,monospace;box-shadow:inset 0 0 0 1px #0000001a}
.cr-line{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed #0000002a;padding:3px 0}.cr-line b{font-variant-numeric:tabular-nums}
.cr-pb{margin:8px 0 0;font-weight:800;color:#2f4bff}
.cm-stars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0}.cm-stars .btn{padding:10px 4px;color:#d8a400;font-size:13px;letter-spacing:-1px}
@media (max-width:767px){.cj-hud{left:12px;top:196px;min-width:0;max-width:200px;padding:8px 10px;font-size:12px}.cj-hud strong{font-size:14px}.cj-hud.cr-hud{top:56px;max-width:none}.cj-hud.cr-hud strong{font-size:20px}}
/* CITYMARKET (games/city-market.js, games/city-billboards.js): the condo desk, the shop counter, the upgrades, the billboards */
.mk-units{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.mk-unit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:#0000000a}
.mk-unit.mine{background:#1f7a5222;box-shadow:inset 0 0 0 1px #1f7a5255}
.mk-unit>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:140px}.mk-unit span{font-size:12px;opacity:.7}
.mk-acts{display:flex;flex-wrap:wrap;gap:6px}.mk-acts .btn{padding:6px 10px;font-size:12px}
.mk-up{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #00000012}
.mk-up>div:first-child{display:flex;flex-direction:column;gap:2px;max-width:340px}.mk-up span{font-size:12px;opacity:.75}
.mk-lift{display:flex;flex-direction:column;gap:6px;margin:6px 0}.mk-lift .btn{justify-content:flex-start}
.mk-sheet .field{margin:8px 0}.mk-nft{margin-top:8px}
@media (max-width:767px){.mk-unit>div:first-child{min-width:0;flex:1 1 100%}.mk-acts{width:100%}}

/* CAREERS: a paper workbench with navy enamel and warm brass. */
body.career-open #sheet{width:min(880px,calc(100vw - 36px));max-width:880px;background:#f8f3e8}
.career{font:14px/1.5 Geist,system-ui,sans-serif;color:#263d50;--cr-muted:#626d72;--cr-line:#d9cfbc;--cr-brass:#aa8546;min-width:0;padding-bottom:28px}
.career *{box-sizing:border-box}
.career h2,.career h3,.career h4{font-family:Geist,system-ui,sans-serif;color:#203b50;letter-spacing:normal;text-transform:none}
.career h2{font-size:30px;line-height:1.15;font-weight:650;margin:4px 0 7px}
.career h3{font-size:18px;font-weight:650;margin:0 0 14px}
.career h4{font-size:14px;font-weight:650;margin:0 0 4px}
.career p{margin:0 0 12px}
.career-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:18px 0 22px}
.career-small{font-size:11px;color:#656d70;margin:0!important}
.career-title{font-size:14px;color:#697177;margin:0!important}
.career-game-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--cr-line);border-radius:7px}
.career-btn{appearance:none;border:1px solid #28495f;background:#28495f;color:#fff8e8;border-radius:5px;padding:10px 14px;min-height:42px;font:600 12px/1.35 Geist,system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;transition:background .12s,color .12s;white-space:normal}
.career-btn.quiet{background:transparent;border-color:#c9bea9;color:#314d60}
.career-btn:hover:not(:disabled){background:#18394e;border-color:#18394e;color:#fff8e8}
.career-btn:disabled{cursor:default;opacity:.54}
.career-btn:focus-visible{outline:3px solid #b28d4f;outline-offset:3px}
.career-game-switch .career-btn{min-height:34px;padding:7px 12px}
.career-game-switch .quiet{border-color:transparent}
.career-hero{display:grid;grid-template-columns:220px 1fr;border:1px solid var(--cr-line);background:#f0e8d8;border-radius:9px;overflow:hidden;margin-bottom:22px}
.career-hero-art{display:flex;align-items:center;justify-content:center;background:#e7deca;border-right:1px solid var(--cr-line);min-height:184px}
.career-art{display:block;width:100%;height:auto;max-width:240px}
.career-hero-copy{padding:24px 25px}
.career-level{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:9px 0 14px}
.career-level strong{font-size:25px;line-height:1.2;font-weight:650;letter-spacing:-.6px}
.career-level span{font-size:12px;color:#736346}
.career-progress{height:5px;width:100%;background:#d9cfbc;overflow:hidden;border-radius:2px}
.career-progress i{display:block;height:100%;background:#9b7943;min-width:0;max-width:100%}
.career-note{font-size:12px;color:var(--cr-muted);line-height:1.55;margin:9px 0!important}
.career-balances{display:flex;gap:20px;font-size:12px;font-weight:600;padding-top:11px;border-top:1px solid var(--cr-line);margin-top:12px}
.career-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-bottom:1px solid #cabea6;margin-bottom:25px}
.career-tabs .career-btn{border:0;border-radius:0;background:transparent;color:#53616a;padding:12px 5px;border-bottom:3px solid #a3824f;margin-bottom:-1px}
.career-tabs .career-btn.quiet{border-bottom-color:transparent;font-weight:450}
.career-tabs .career-btn:hover:not(:disabled){background:#eee5d4;color:#203b50}
.career-section{margin-bottom:27px}
.career-section+.career-section{border-top:1px solid var(--cr-line);padding-top:23px}
.career-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid #e0d7c6}
.career-row:last-child{border-bottom:0}
.career-row-copy{flex:1;min-width:0}
.career-row-copy p{font-size:12px;line-height:1.6;color:var(--cr-muted);margin:0;max-width:53ch}
.career-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;max-width:48%;flex-shrink:0}
.career-row-actions .career-btn{padding:9px 11px;min-height:39px}
.career-options{display:flex;gap:8px;flex-wrap:wrap}
.career-options .career-btn{flex:1;min-width:110px}
.career-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.career-subtabs .career-btn{min-height:37px;padding:8px 11px}
.career-rigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.career-rig{border:1px solid var(--cr-line);border-radius:7px;background:#f6efe1;overflow:hidden;padding:0 17px 17px}
.career-rig.selected{border-color:#8d7449;box-shadow:inset 0 0 0 1px #8d7449}
.career-rig .career-art{width:100%;max-width:none;height:155px;margin:0 0 12px;background:#ece3d1;border-bottom:1px solid #ddd1bb}
.career-rig p{font-size:12px;color:var(--cr-muted);min-height:36px}
.career-rig .career-btn{width:100%}
.career-recent{border-left:3px solid #aa8546;padding:10px 13px;background:#eee4d0;font-size:12px;margin-bottom:22px!important}
.career-alert{padding:14px;border:1px solid #b28b78;background:#f3e4da;border-radius:6px;margin-bottom:20px;color:#713e33;font-size:13px}
.career-alert .career-btn{margin:10px 0 0;display:flex}
.career-badge-row{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--cr-line);padding:12px 0}
.career-badge-row .career-art{width:70px;height:65px;flex-shrink:0}
.career-badge-row>div{flex:1}
.career-badge-row p{font-size:12px;color:var(--cr-muted);margin:0}
.career-owned{font-size:11px;color:#685b3f;font-weight:650}
.career-mini-progress{width:90px;font-size:11px;color:var(--cr-muted);text-align:right}
.career-objective{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:13px;padding:11px 0}
.career-objective .career-progress{grid-column:1 / -1}
.career-objective strong{font-weight:550;font-size:12px}
.career-review{padding:19px;background:#ece1cc;border:1px solid #b1986b;border-radius:6px}
.career-review p{font-size:13px}
.career-review .career-btn{margin-right:7px}
.career-review .holding{background:#9f783c;color:#fff}
.career-trial-player{margin:16px 0 20px}
.career-trial-canvas{display:block;width:100%;height:auto;border:1px solid #d1c4ad;border-radius:7px;background:#203b50;touch-action:none}
.career-trial-instruction{font-weight:550;font-size:13px;margin:13px 0 6px!important}
.career-trial-values{font-size:11px;color:var(--cr-muted)}
.career-trial-controls{display:flex;gap:12px;margin:15px 0}
.career-hold{flex:1;min-height:64px;background:#28495f;color:#fff8e8;border:1px solid #28495f;border-radius:6px;font:600 14px Geist,system-ui;touch-action:none;user-select:none;-webkit-user-select:none}
.career-hold:active{background:#a18047;border-color:#a18047}
.career-hold:focus-visible{outline:3px solid #b28d4f;outline-offset:3px}
.career-edition-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:20px 0 12px}
.career-edition-total strong{font-size:22px}
.career-edition-total span{font-size:12px;color:var(--cr-muted)}
.career-loading{padding:25px 0;color:var(--cr-muted)}
.career-profile{padding:14px 0}
.career-world-title{display:block;font:500 9px/1.3 Geist,system-ui;color:#d7bf8a;text-shadow:0 1px 2px #152c3c;white-space:nowrap}
@media(max-width:640px){
 body.career-open #sheet{width:100%;max-width:100%}
 .career{font-size:13px;padding-bottom:20px}
 .career-head{padding:10px 0 18px;gap:12px;align-items:center}
 .career h2{font-size:25px}
 .career h3{font-size:17px}
 .career-game-switch .career-btn{padding:7px 9px;font-size:11px}
 .career-hero{grid-template-columns:102px 1fr;margin-bottom:14px}
 .career-hero-art{min-height:168px}
 .career-hero-art .career-art{width:142px;max-width:none;flex-shrink:0;transform:rotate(-6deg)}
 .career-hero-copy{padding:17px 13px}
 .career-level{display:block;margin:8px 0 10px}
 .career-level strong{font-size:23px;display:block;margin-bottom:2px}
 .career-level span{font-size:11px}
 .career-balances{gap:11px;font-size:11px;flex-wrap:wrap;padding-top:8px;margin-top:9px}
 .career-note{font-size:11px}
 .career-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:20px}
 .career-tabs .career-btn{font-size:12px;min-height:43px}
 .career-row{align-items:flex-start;gap:10px;flex-wrap:wrap}
 .career-row-copy{flex-basis:60%}
 .career-row-actions{max-width:none;justify-content:flex-start;flex:1 0 auto}
 .career-row-actions .career-btn{min-height:42px}
 .career-rigs{grid-template-columns:1fr}
 .career-rig{display:grid;grid-template-columns:115px 1fr;gap:12px;padding:0 12px 0 0;align-items:center}
 .career-rig .career-art{height:155px;margin:0;border-bottom:0;border-right:1px solid #ddd1bb}
 .career-rig>div{padding:14px 0}
 .career-rig>h4{align-self:end}
 .career-rig>.career-btn{margin:0 0 12px;grid-column:2}
 .career-rig p{min-height:0}
 .career-rig .career-note{margin:7px 0!important}
 .career-badge-row{gap:8px}
 .career-badge-row .career-art{width:48px;height:50px}
 .career-badge-row .career-btn{padding:8px;min-height:42px;font-size:11px}
 .career-options .career-btn{min-width:95px}
 .career-edition-total{display:block}
 .career-edition-total strong{font-size:20px;display:block}
 .career-edition-total span{display:block;margin-top:5px}
 .career-trial-controls{gap:8px}
 .career-hold{min-height:62px}
}
@media(prefers-reduced-motion:reduce){.career *{transition:none!important}}

/* CAREERS refinement after desktop and phone review. */
body.career-open #sheet-body{padding:20px 28px 28px}
.career{--cr-muted:#53616a}
.career-progress{height:8px;background:#d8cbb4}
.career-progress i{background:#9b743b}
.career-row-copy p,.career-rig p{font-size:13px;color:#52606a}
.career-small,.career-note{color:#59646a}
.career-rigs{grid-template-columns:1fr}
.career-rig{position:relative;display:grid;grid-template-columns:164px 1fr;gap:19px;padding:0 18px 0 0;align-items:center}
.career-rig .career-art{height:154px;margin:0;border-bottom:0;border-right:1px solid #d8cbb4}
.career-rig>div{padding:16px 0}
.career-rig p{min-height:0;max-width:52ch}
.career-rig .career-btn{width:auto;min-width:115px}
.career-rig.selected{border:2px solid #9b7a42;box-shadow:none}
.career-rig.selected h4:after{content:'Equipped';display:inline-block;margin-left:10px;background:#28495f;color:#fff4dc;border-radius:3px;padding:3px 6px;font-size:10px;font-weight:550;vertical-align:middle}
.career-rig.locked .career-art{filter:grayscale(.8);opacity:.5}
.career-badge-row.unearned .career-art{filter:grayscale(1);opacity:.45}
.career-showcase-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 22px}
.career-showcase-cards article{padding:10px;background:#ede4d2;border:1px solid #d4c6ac;border-radius:5px;text-align:center}
.career-showcase-cards .career-art{height:75px;width:100%;max-width:none}
.career-showcase-cards strong,.career-showcase-cards span{display:block;font:600 12px/1.5 Geist,system-ui}
.career-showcase-cards span{font-weight:450;color:#52606a}
.career-recent{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
@media(max-width:640px){
 body.career-open #sheet{top:max(8px,env(safe-area-inset-top))!important;bottom:8px!important;left:8px!important;right:8px!important;width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;transform:none!important}
 body.career-open #sheet-body{padding:12px 15px 22px}
 .career-head{padding:2px 0 13px}
 .career-head h2,.career-head .career-small{display:none}
 .career-head .career-title{font-size:13px}
 .career-game-switch .career-btn{min-height:44px;padding:8px 9px}
 .career-hero{grid-template-columns:72px 1fr;margin-bottom:8px}
 .career-hero-art{min-height:132px}
 .career-hero-art .career-art{width:112px;transform:none}
 .career-hero-copy{padding:12px 11px}
 .career-hero-copy>.career-small{font-size:10px}
 .career-level{display:flex;margin:7px 0 9px}
 .career-level strong{font-size:22px;margin:0}
 .career-level span{font-size:10px}
 .career-hero-copy .career-note{font-size:12px;margin:6px 0!important}
 .career-balances{font-size:11px;border:0;padding:0;margin-top:9px}
 .career-tabs{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;background:#f8f3e8;scrollbar-width:none;margin:0 -1px 20px}
 .career-tabs::-webkit-scrollbar{display:none}
 .career-tabs .career-btn{min-width:0;font-size:12px;min-height:44px;padding:11px 6px}
 .career-btn,.career-row-actions .career-btn,.career-subtabs .career-btn,.career-badge-row .career-btn{min-height:44px}
 .career-row-copy p{font-size:13px;line-height:1.65}
 .career-rig{grid-template-columns:100px 1fr;gap:12px;padding-right:12px}
 .career-rig .career-art{height:155px}
 .career-rig>div{padding:13px 0}
 .career-rig.selected h4:after{display:block;width:max-content;margin:5px 0 0;font-size:9px}
 .career-rig .career-btn{min-width:0;width:100%}
 .career-showcase-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}



/* CAREERS: final readability and display review. */
.career .career-note,.career-showcase-cards span{font-size:13px;color:#585247}
.career-showcase-cards article{border:0;background:transparent;box-shadow:none}

/* CAREERS: clear active navigation and finite showcase selections. */
.career-tabs .career-btn:not(.quiet){background:#e9dfc8;color:#203b50;font-weight:750}
.career-role-options{padding:4px;border:1px solid var(--cr-line);border-radius:6px;gap:4px}
.career-role-options .career-btn{min-width:0;border-color:transparent}
.career-showcase-cards{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media(max-width:640px){.career-section{margin-bottom:18px}.career-section+.career-section{padding-top:17px}.career-showcase-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* PRINTER CAREER BRAND: native World typography, cobalt and original Printer mark. */
/* POLISH-FONT: the pixel font is gone; menus use the UI font (var(--font-ui), IBM Plex Sans) */
.career{--cr-ink:var(--ink);--cr-muted:var(--muted);--cr-paper:var(--paper);--cr-line:var(--line);color:var(--ink);font-family:Geist,Arial,sans-serif}
.career-brand,.brrr-brand{display:flex;align-items:center;gap:10px}.career-brand img,.brrr-brand img{object-fit:contain;image-rendering:pixelated}.career-brand span{font:600 17px/1 var(--font-ui);letter-spacing:.6px;color:var(--ink)}
.career-head{border-bottom:1px solid var(--line);margin-bottom:20px;padding:5px 0 20px;align-items:center}.career-head h2{font:600 43px/1 var(--font-ui);color:var(--ink);letter-spacing:-1px;margin:13px 0 7px}.career-head .career-title{color:var(--muted)}
.career-game-switch{border:1px solid var(--line);background:var(--paper-2);border-radius:10px;padding:4px}.career-game-switch .career-btn{border:0!important;min-height:44px;border-radius:7px;color:var(--ink);background:transparent}.career-game-switch .career-btn:not(.quiet){background:var(--cobalt);color:#fff}
.career-hero{background:#fffdf7;border:1px solid var(--line);border-radius:12px;grid-template-columns:210px minmax(0,1fr);overflow:hidden;box-shadow:none}.career-hero-art{background:var(--paper-2);min-height:194px;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}.career-hero-art .career-art{width:100%;max-width:250px;height:180px;transform:none!important}.career-hero-copy{padding:24px}.career-hero-copy>.career-small{font-size:12px;color:var(--muted)}
.career-level strong{font:600 34px/1 var(--font-ui);letter-spacing:-.3px;color:var(--ink)}.career-level span{color:var(--cobalt);font-weight:650}.career-progress{height:6px;background:#e7e6df;border-radius:3px}.career-progress i{background:var(--cobalt)}.career-balances{border-color:var(--line);color:var(--ink);gap:18px}.career-balances span:first-child{color:var(--cobalt)}
.career-tabs{border-color:var(--line);margin:20px 0}.career-tabs .career-btn{font-size:13px;color:var(--muted);background:transparent;border:0;border-radius:0;min-height:48px}.career-tabs [aria-current=page]{color:var(--cobalt)!important;background:#ebeeff!important;box-shadow:inset 0 -3px var(--cobalt);font-weight:700}
.career-btn{background:var(--cobalt);border:1px solid var(--cobalt);color:#fff;border-radius:7px;min-height:44px;padding:10px 14px;font:600 13px/1.4 Geist,Arial,sans-serif;box-shadow:none}.career-btn.quiet{background:transparent;color:var(--ink);border-color:#d4cdbc}.career-btn:disabled{opacity:.5}.career-btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}.career-section>h3{font:600 25px/1.2 var(--font-ui);color:var(--ink);letter-spacing:0;margin:24px 0 13px}.career-row{border-color:var(--line);padding:18px 0}.career-row h4,.career-rig h4{color:var(--ink);font-size:16px}.career-row p{color:var(--muted);font-size:13px;line-height:1.6}.career-owned{color:var(--cobalt);font-weight:650}.career-rig{background:#fffdf7;border:1px solid var(--line);border-radius:10px;box-shadow:none}.career-rig.selected{border:2px solid var(--cobalt);background:#f3f4ff}.career-rig>.career-art{background:var(--paper-2);width:100%;height:142px;border-radius:7px;filter:none}.career-rig.locked>.career-art{opacity:.62;filter:grayscale(.5)}
.career-component{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:15px;align-items:center}.career-component>.career-art{width:100px;height:88px;background:var(--paper-2);border-radius:7px}.career-row-copy{min-width:0}.career-subtabs .career-btn:not(.quiet){background:var(--cobalt);color:#fff}.career-subtabs .career-btn.quiet{background:transparent;color:var(--ink)}
.career-machine{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fffdf7;align-items:center}.career-machine>.career-art{width:100%;height:200px}.career-machine h4{font:600 29px/1 var(--font-ui);margin:0 0 12px;color:var(--ink)}.career-machine p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 13px}
.career .career-event{border-color:var(--line);box-shadow:none}.career .career-event.selected{border-color:var(--cobalt);background:#f3f4ff}.career .career-small{letter-spacing:.02em}.career .career-loadout,.career .career-showcase-cards article{border-color:var(--line)}
.brrr-head .eyebrow{font:600 28px/1 var(--font-ui);color:var(--ink);letter-spacing:0;margin:0}.brrr-stage{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;min-height:260px}.brrr-press{display:flex;align-items:center;justify-content:center;inset:0 0 45px!important;width:auto!important;height:auto!important;transform:none!important;pointer-events:none}.brrr-press .machine-portrait{display:block;width:min(100%,400px);height:240px;object-fit:contain;filter:none}.brrr-press .ppup-portrait{width:min(100%,360px);height:240px;object-fit:contain}.brrr .brrr-line-art{width:96px;height:76px;object-fit:contain;background:var(--paper-2);border-radius:7px}.brrr .brrr-machine-unknown{width:96px;height:76px;display:grid;place-items:center;background:var(--paper-2);border-radius:7px;font:32px var(--font-ui);color:var(--muted)}.brrr-row{grid-template-columns:96px minmax(0,1fr) auto!important;gap:14px}.brrr-skin-art canvas{max-width:100%;max-height:115px;object-fit:contain;image-rendering:auto}.brrr-skin-art{height:115px!important;background:var(--paper-2)}.brrr-skin{border-color:var(--line);background:#fffdf7}.brrr-skin[aria-pressed=true]{border-color:var(--cobalt);background:#f3f4ff}.brrr-pup-feature{display:grid;grid-template-columns:minmax(0,1fr) 185px;gap:22px;padding:22px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;margin:20px 0}.brrr-pup-label{font-size:11px;font-weight:700;color:var(--cobalt);letter-spacing:.04em;margin:0 0 10px}.brrr-pup-feature h3{font:600 30px var(--font-ui);margin:0 0 12px}.brrr-pup-feature p{font-size:13px;line-height:1.6}.brrr-pup-feature .brrr-skin-wrap{min-width:0}.brrr-pup-feature .brrr-skin:disabled{opacity:1}.brrr-pup-feature .brrr-skin:disabled small{color:var(--muted)}
@media(max-width:640px){.career-head{display:flex;padding:3px 0 15px;margin-bottom:15px;gap:12px}.career-brand{gap:7px}.career-brand img{width:26px;height:26px}.career-brand span{font-size:14px}.career-head h2{display:block;font-size:31px;margin:10px 0 5px}.career-head .career-title{font-size:12px}.career-game-switch{display:flex;flex-direction:column;flex-shrink:0}.career-game-switch .career-btn{font-size:12px;padding:8px 12px;min-height:40px}.career-hero{grid-template-columns:100px minmax(0,1fr)}.career-hero-art{min-height:157px}.career-hero-art .career-art{width:160px;max-width:none;height:150px;flex-shrink:0}.career-hero-copy{padding:16px 12px}.career-level strong{font-size:27px}.career-level{gap:7px;flex-wrap:wrap;margin:9px 0 12px}.career-level span{font-size:11px}.career-hero-copy>.career-small{font-size:11px}.career-balances{gap:10px;flex-wrap:wrap;font-size:11px}.career-tabs{margin:16px 0}.career-tabs .career-btn{font-size:11px;padding:8px 2px;min-height:46px}.career-section>h3{font-size:23px}.career-component{grid-template-columns:65px minmax(0,1fr);gap:12px}.career-component>.career-art{width:65px;height:70px}.career-component .career-row-actions{grid-column:2;justify-content:flex-start}.career-machine{grid-template-columns:100px minmax(0,1fr);padding:15px;gap:15px}.career-machine>.career-art{height:145px}.career-machine h4{font-size:25px}.career-machine p{font-size:12px}.career-machine .career-btn{padding:9px 10px;font-size:12px}.brrr-stage{min-height:215px}.brrr-press .machine-portrait,.brrr-press .ppup-portrait{height:200px}.brrr-row{grid-template-columns:70px minmax(0,1fr) auto!important;gap:10px}.brrr .brrr-line-art,.brrr .brrr-machine-unknown{width:70px;height:62px}.brrr-pup-feature{grid-template-columns:1fr;padding:16px;gap:15px}.brrr-pup-feature .brrr-skin-wrap{max-width:230px}.brrr-pup-feature h3{font-size:28px}}

.career-machine-canvas{max-width:100%;height:auto;object-fit:contain}.career-hero-art .career-machine-canvas{width:210px}@media(max-width:640px){.career-hero-art .career-machine-canvas{width:140px;max-width:none;flex-shrink:0}}

/* Keep the focused career sheet above the walking HUD. */
body.career-open #sheet{z-index:110;background:var(--paper)}
.brrr .brrr-head .brrr-brand .eyebrow{font:600 24px/1 var(--font-ui)!important;letter-spacing:0;color:var(--ink)}
.brrr .brrr-row.can{box-shadow:none;border-color:var(--line)}.brrr .brrr-buy{background:#eeebe3;box-shadow:none;border:1px solid var(--line);border-radius:7px;min-height:44px;color:var(--ink)}.brrr .brrr-row.can .brrr-buy{background:var(--cobalt);border-color:var(--cobalt);color:#fff;box-shadow:none}
@media(max-width:640px){body.career-open #sheet-mobile-title{font:600 24px/1 var(--font-ui)}body.career-open .career-head h2{display:none}.career-hero-art .career-art{width:110px;height:130px}.career-hero-art .career-machine-canvas{width:110px}.career-machine{grid-template-columns:105px minmax(0,1fr)}.career-machine>.career-art{height:170px}}

.career-machine-status{display:inline-flex;align-items:center;gap:7px;background:#ebeeff;color:#243ed8!important;border-radius:6px;padding:7px 10px;font-size:12px!important;font-weight:650}.career-machine-status:before{content:"✓";font-size:14px}

body.career-open .pw-skip,body.brrr-full .pw-skip{display:none}
.career :is(h2,h3,h4),.career-level strong,.career-brand span,.brrr-brand .eyebrow,.brrr-pup-feature h3,body.career-open #sheet-mobile-title{font-variant-ligatures:none}
/* The next permanent machine is visible where players print and choose equipment. */
.press-unlock{display:grid;grid-template-columns:145px minmax(0,1fr);gap:18px;padding:20px;margin:18px 0;border:1px solid var(--line);border-radius:12px;background:#fffdf7;color:var(--ink)}
.press-unlock>.career-art{width:145px;height:150px;align-self:center;background:var(--paper-2);border-radius:9px}.press-unlock-copy{min-width:0}.press-unlock .press-unlock-label{font:650 11px/1.3 Geist,Arial,sans-serif;color:#5f646b;letter-spacing:.03em;margin:0 0 7px}.press-unlock h3{font:600 26px/1.1 var(--font-ui);font-variant-ligatures:none;margin:0 0 7px;color:var(--ink)}.press-unlock p{font-size:12px;line-height:1.5;margin:6px 0}.press-unlock-rank{color:#5f646b}.press-unlock progress{appearance:none;display:block;width:100%;height:6px;border:0;background:#e7e6df;border-radius:4px}.press-unlock progress::-webkit-progress-bar{background:#e7e6df;border-radius:4px}.press-unlock progress::-webkit-progress-value{background:#49748d;border-radius:4px}.press-unlock progress::-moz-progress-bar{background:#49748d;border-radius:4px}.press-unlock .press-unlock-open{min-height:44px;background:var(--cobalt);border-color:var(--cobalt);color:#fff;margin-top:7px}.press-unlock-status{color:#5f646b}.press-unlock-explanation,.press-unlock-goals{grid-column:1/-1}.press-unlock .press-unlock-explanation{margin:0;color:#5f646b}.press-unlock-goals{list-style:none;padding:0;margin:0}.press-unlock-goals li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;border-top:1px solid var(--line);padding:12px 0;font-size:12px;line-height:1.5}.press-unlock-goals li:before{display:none}.press-unlock-goals strong{font-size:11px;white-space:nowrap;color:#5f646b}.press-unlock-goals .done span:before{content:'✓ ';color:#243ed8}.press-unlock.compact{grid-template-columns:78px minmax(0,1fr);gap:12px;padding:13px;margin:0 0 15px}.press-unlock.compact>.career-art{width:78px;height:90px}.press-unlock.compact h3{font-size:20px}.press-unlock.compact .press-unlock-rank{display:none}.press-unlock.compact .press-unlock-label{font-size:10px}.press-unlock.compact .press-unlock-open{padding:7px 12px}
@media(max-width:640px){.press-unlock{grid-template-columns:90px minmax(0,1fr);gap:12px;padding:15px}.press-unlock>.career-art{width:90px;height:120px}.press-unlock h3{font-size:23px}.press-unlock-goals li{grid-template-columns:minmax(0,1fr) auto;gap:10px}.press-unlock.compact{grid-template-columns:68px minmax(0,1fr);padding:12px}.press-unlock.compact>.career-art{width:68px;height:85px}.press-unlock.compact h3{font-size:19px}.press-unlock.compact p{font-size:11px}}
.press-unlock{scroll-margin-top:120px}
/* Keep World celebration cards behind the focused career reading flow. */
body.career-open>.pw-card{display:none}
/* Compact game and career reading layout. Keep each focused view to one scroll area. */
.press-unlock.compact{grid-template-columns:46px minmax(0,1fr);gap:10px;padding:10px 12px;margin:0 0 10px}
.press-unlock.compact>.career-art{width:46px;height:62px}.press-unlock.compact .press-unlock-copy{display:grid;grid-template-columns:minmax(0,1fr) 58px;column-gap:8px;align-items:center}.press-unlock.compact .press-unlock-label,.press-unlock.compact h3,.press-unlock.compact [data-unlock-mastery],.press-unlock.compact progress,.press-unlock.compact .press-unlock-status{grid-column:1}.press-unlock.compact h3{font-size:17px;line-height:1.1;margin:0 0 3px;letter-spacing:0;text-transform:none}.press-unlock.compact .press-unlock-label{font-size:10px;line-height:1.2;margin:0 0 3px}.press-unlock.compact [data-unlock-mastery]{font-size:11px;line-height:1.25;margin:0 0 4px}.press-unlock.compact .press-unlock-open{grid-column:2;grid-row:1/6;align-self:center;min-height:44px;margin:0;padding:7px 9px}.press-unlock.compact[data-unlock-phase=mastery] .press-unlock-status{display:none}.press-unlock.compact .press-unlock-status{font-size:11px;line-height:1.3;margin:5px 0 0}
.brrr-stage-note{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;margin:3px 14px 0}.brrr-stage-note .brrr-hint{margin:0!important;text-align:left;font-size:11px!important;min-height:0}.brrr-stage-note .brrr-golden{position:static;flex-shrink:0;max-width:58%;padding:4px 7px;border-radius:5px;background:#f1d58d;box-shadow:none;font-size:10px;line-height:1.25}
.brrr .brrr-stage{height:192px;min-height:192px}.brrr .brrr-press{inset:4px 0 30px!important}.brrr .brrr-press .machine-portrait,.brrr .brrr-press .ppup-portrait{height:100%;max-height:158px;width:min(100%,340px);object-fit:contain}.brrr .brrr-paper{bottom:8px}.brrr .brrr-mult{position:sticky;top:0;z-index:2;background:var(--paper);padding:4px 0 7px;margin:0 0 4px}
.brrr-disclosure,.career-disclosure{border:1px solid var(--line);border-radius:9px;background:#fffdf7;margin:10px 0}.brrr-disclosure>summary,.career-disclosure>summary{min-height:44px;padding:12px;font-size:13px;font-weight:650;line-height:1.4;cursor:pointer}.brrr-disclosure>summary:focus-visible,.career-disclosure>summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:7px}.brrr-disclosure-body,.career-disclosure-body{padding:0 12px 12px}.career-disclosure-body>p{font-size:13px;line-height:1.5;margin:0 0 10px}.career-disclosure-body .career-row{padding:12px 0}.career-disclosure-body .career-row:last-child{border-bottom:0}.career-commission-action{margin:10px 0 14px}.career-commission-action .career-btn{min-height:44px}
.brrr .brrr-pup-feature{grid-template-columns:minmax(0,1fr) 126px;gap:12px;padding:14px;margin:14px 0}.brrr .brrr-pup-feature h3{font-size:25px;text-transform:none;letter-spacing:0;margin:5px 0 8px}.brrr .brrr-pup-label{font-size:10px;margin:0}.brrr .brrr-pup-feature p{font-size:12px;margin:5px 0}.brrr .brrr-pup-feature .brrr-skin-art{height:86px!important}.brrr .brrr-pup-feature .brrr-skin-art canvas{max-height:84px}.brrr .brrr-pup-feature .brrr-skin strong{display:none}.brrr .brrr-pup-feature .brrr-skin-wrap{max-width:none}
.career[data-career-game=brrr][data-career-tab=prestige] .career-hero{display:none}.career[data-career-game=brrr][data-career-tab=prestige] .career-head .career-title{display:none}.career .press-unlock{padding:16px;gap:12px;margin:12px 0;scroll-margin-top:60px}.career .press-unlock h3{font-size:25px}.career .press-unlock p{margin:4px 0}.career .press-unlock-goals li{padding:9px 0}.career .press-unlock-explanation{font-size:11px;line-height:1.45}.career .career-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:12px 0;top:0}.career .career-tabs .career-btn{min-width:0;min-height:44px;padding:8px 2px;font-size:11px}
@media(max-width:640px),(pointer:coarse){
 body.career-open #sheet{display:flex!important;flex-direction:column;overflow:hidden!important}
 body.career-open #sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 15px 16px}
 .career-head{padding:0 0 10px;margin-bottom:10px;gap:8px}.career-head>div:first-child{min-width:0}.career-brand{gap:5px}.career-brand img{width:23px;height:23px}.career-brand span{font-size:12px;letter-spacing:0}.career-head .career-title{font-size:11px;margin-top:5px}.career-game-switch{flex-direction:row;padding:2px;gap:0}.career-game-switch .career-btn{min-height:44px;padding:7px 8px;font-size:11px}
 .career-hero{grid-template-columns:64px minmax(0,1fr);border-radius:9px}.career-hero-art{min-height:0}.career-hero-art .career-art,.career-hero-art .career-machine-canvas{width:64px;max-width:64px;height:82px;object-fit:contain}.career-hero-copy{padding:10px 12px}.career-hero-copy>.career-small{display:none}.career-level{gap:7px;margin:0 0 5px}.career-level strong{font-size:23px}.career-hero-copy>.career-note{font-size:11px;line-height:1.3;margin:5px 0}.career-balances{gap:9px;font-size:11px;padding-top:6px;margin-top:6px}.career .career-tabs{margin:10px 0;position:sticky;z-index:3;background:var(--paper)}
 .career .press-unlock{grid-template-columns:86px minmax(0,1fr);padding:13px;gap:10px}.career .press-unlock>.career-art{width:86px;height:108px}.career .press-unlock h3{font-size:23px}.career .press-unlock-goals li{font-size:12px;padding:9px 0}.career .press-unlock-goals strong{font-size:11px}
 .brrr .brrr-head{padding:9px 12px 2px}.brrr .brrr-head .brrr-brand .eyebrow{font-size:21px!important}.brrr .brrr-brand img{width:26px;height:26px}.brrr .brrr-top{padding:0 14px}.brrr .brrr-count{font-size:28px}.brrr .brrr-stage{height:166px;min-height:166px;margin-top:7px}.brrr .brrr-press .machine-portrait,.brrr .brrr-press .ppup-portrait{max-height:132px}.brrr .brrr-paper{left:11px;right:11px;font-size:10px}.brrr .brrr-paper small{font-size:10px;min-width:53px}.brrr .brrr-body{padding:8px 12px 14px}.brrr .brrr-row{grid-template-columns:58px minmax(0,1fr) auto!important;gap:9px}.brrr .brrr-line-art,.brrr .brrr-machine-unknown{width:58px;height:52px}.brrr .brrr-pup-feature{grid-template-columns:minmax(0,1fr) 110px;padding:12px;gap:10px}.brrr .brrr-pup-feature h3{font-size:23px}
}
@media(max-width:640px) and (max-height:760px){.brrr .brrr-stage{height:136px;min-height:136px}.brrr .brrr-press .machine-portrait,.brrr .brrr-press .ppup-portrait{max-height:102px}.brrr-stage-note{margin-top:2px}}

.career .press-unlock.compact{grid-template-columns:46px minmax(0,1fr);padding:10px 12px;gap:10px}.career .press-unlock.compact>.career-art{width:46px;height:62px}.career .press-unlock.compact h3{font-size:17px}.career .career-machine{grid-template-columns:88px minmax(0,1fr);padding:13px;gap:12px}.career .career-machine>.career-art{width:88px;height:118px}.career .career-machine h4{font-size:24px}.career .career-machine p{font-size:12px;line-height:1.4;margin:6px 0}.career .career-machine .career-btn{min-height:44px}
@media(max-width:640px){body.brrr-full #sheet.brrr-sheet{top:max(8px,env(safe-area-inset-top))!important;bottom:max(8px,env(safe-area-inset-bottom))!important;left:8px!important;right:8px!important;width:calc(100vw - 16px)!important;height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))!important;max-height:none!important;z-index:110}}
.career[data-career-game=fishing] .career-hero-copy>.career-small{display:block;font-size:11px;line-height:1.3;margin:0 0 5px}
/* Small-screen readability and short owned-machine rows. */
.brrr .brrr-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}.brrr .brrr-tabs button{min-width:0;padding-inline:4px}.career .career-tabs{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.2fr)}
.brrr .brrr-row-name{flex-wrap:wrap;column-gap:5px;row-gap:3px}.brrr .brrr-row-name strong{min-width:0;max-width:100%;white-space:normal;overflow:visible;line-height:1.25}.brrr .brrr-own{position:static;flex:none;margin:0;white-space:nowrap}.brrr .brrr-row-main>small,.brrr .brrr-hint{color:#555b63;opacity:1}.brrr .brrr-body{scrollbar-gutter:stable}
.brrr .brrr-owned-skins{grid-template-columns:1fr;gap:8px}.brrr-owned-skins .brrr-skin-wrap{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:8px}.brrr .brrr-owned-skins .brrr-skin{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;column-gap:10px;padding:8px}.brrr .brrr-owned-skins .brrr-skin-art{grid-column:1;grid-row:1/3;width:52px;height:60px!important;background:transparent}.brrr .brrr-owned-skins .brrr-skin-art canvas{max-width:52px;max-height:60px}.brrr .brrr-owned-skins .brrr-skin strong{grid-column:2;align-self:end;text-align:left;font-size:13px;line-height:1.3;padding:0;margin:0 0 3px}.brrr .brrr-owned-skins .brrr-skin small{grid-column:2;align-self:start;text-align:left;font-size:11px;padding:0}.brrr .brrr-owned-skins .brrr-skin-look{margin:0;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:6px;font-size:11px;align-self:stretch}
@media(max-width:640px){.brrr .brrr-tabs button,.brrr .brrr-mult button{min-height:44px}.brrr .brrr-tabs button{font-size:11px}.career .career-tabs .career-btn{padding-inline:0}}
.career .career-tabs .career-btn,.brrr .brrr-tabs button{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
@media(max-width:360px){body.career-open #sheet-body{padding-left:12px;padding-right:12px}}

/* Build tools fold into a small rail while keeping the selected tool and history. */
.build-bar.is-minimized{width:max-content;max-width:calc(100vw - 24px);padding:6px 8px}
.build-bar .tb-min-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.build-bar .tb-min-title{min-width:0;max-width:min(38vw,260px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.build-bar .land-bar-toggle,.build-bar.is-minimized button{min-height:44px;min-width:44px}
.build-bar.is-minimized .done{margin-left:auto}

@media(max-width:600px){.build-bar:not(.is-minimized) .tb-lead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.build-bar:not(.is-minimized) .tb-lead>.done{margin-left:0}}

/* Keep the new build actions in the existing circular control style. */
.build-bar .tools .land-bar-toggle,.build-bar .tools .done{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-grid;place-items:center;flex:none;font-size:0}
.build-bar .land-bar-toggle::before{content:'';display:block;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.build-bar .land-bar-toggle[aria-expanded=false]::before{transform:translateY(3px) rotate(225deg)}
.build-bar .done::before{content:'';display:block;width:16px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.build-bar.is-minimized{border-radius:999px}
.build-bar .tb-lead>.land-bar-toggle{justify-self:start}.build-bar .tb-lead>.done{justify-self:end}
.build-bar .tb-lead>button:not(.land-bar-toggle):not(.done){border-radius:999px}

.build-bar.is-minimized .land-bar-toggle{background:var(--cobalt);color:#fff}
.build-bar.is-minimized .done{background:var(--paper);color:var(--ink)}
.build-bar.is-minimized .tb-min-title{background:transparent;border:0;box-shadow:none;padding:0 4px;font-size:13px;font-weight:700;color:var(--ink)}

.build-bar{bottom:calc(var(--safe-b) + 16px)}

/* Careers use the same rounded paper controls as the original Go Brrr menu. */
.career{color:var(--ink);--cr-muted:var(--muted);--cr-line:var(--line)}
.career .career-btn{border-radius:999px;min-height:44px;background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.career .career-btn.quiet{background:var(--paper);border-color:var(--line);color:var(--ink)}
.career .career-btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.career .career-btn:focus-visible{outline-color:var(--cobalt)}
.career .career-game-switch{border-radius:999px;background:var(--paper-2)}
.career-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,360px)}
.career .career-paths .career-btn{display:grid;justify-items:start;align-content:center;gap:3px;min-height:58px;padding:8px 12px;border-radius:12px;text-align:left;font-size:13px}
.career .career-paths .career-btn[aria-pressed="true"]:hover:not(:disabled){background:var(--cobalt);border-color:var(--cobalt)}
.career-paths small{font-size:11px;font-weight:500;line-height:1.3}
.career .career-next{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;margin:0 0 14px;border:1px solid #dbe2ff;border-radius:12px;background:#f1f4ff}
.career .career-next h3{margin:0 0 4px;font-size:16px}
.career .career-next p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.career .career-next .career-btn{flex-shrink:0}
@media(max-width:640px){
 .career .career-head{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding-bottom:12px;margin-bottom:12px}
 .career .career-head .career-brand{display:none}
 .career-paths{width:100%}
 .career .career-next{align-items:flex-start;flex-direction:column;gap:9px}
}
.career .career-tabs{display:flex;gap:5px;overflow-x:auto;padding:3px;border:0;border-radius:999px;background:var(--paper-2);margin-bottom:18px}
.career .career-tabs .career-btn{flex:1;white-space:nowrap;padding:8px 11px;border:0;min-height:40px}
.career .career-tabs .career-btn.quiet{background:transparent;color:var(--muted)}
.career .career-tabs .career-btn[aria-current=page]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #00000014}
.career:has(.career-edition) .career-hero{display:none}
.career .career-progress i{background:var(--cobalt)}
.career .career-buy-quantity{display:flex;gap:6px;margin-bottom:10px}
.career .career-feedback{font-size:12px;color:var(--muted);margin:9px 0}
.career .career-run-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:16px;padding:12px;background:var(--paper-2);margin:12px 0 18px}
.career .career-edition-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.career-edition-stats strong{display:block;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
.career-edition-stats span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.career .career-checklist{list-style:none;padding:0;display:grid;gap:9px;font-size:13px}
.career-checklist li{display:flex;gap:8px;align-items:flex-start}.career-checklist .complete{color:var(--cobalt)}
.brrr .brrr-buy,.brrr .btn,.brrr .brrr-skin-look{border-radius:999px}
.brrr .brrr-tabs,.brrr .brrr-tabs button{border-radius:999px}
.brrr-career-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.brrr-career-error{padding:10px 12px;border-radius:12px;background:#fff0e8;color:#803719}
.brrr-prestige .press-unlock{margin-top:8px}.brrr-prestige .holding{background:var(--ink)}
@media(max-width:640px){.career .career-tabs{border-radius:14px}.career .career-tabs .career-btn{flex:0 0 auto}.career .career-run-banner{align-items:flex-start;flex-direction:column}.career-edition-stats strong{font-size:19px}.career .career-row-actions{max-width:100%}.career .career-edition .career-row{gap:9px}}

.brrr .brrr-owned-skins .brrr-skin-look{border-radius:999px}

.fg-career-more{margin:18px 0;padding:12px 14px;border:1px solid var(--line);border-radius:16px}.fg-career-more>summary{font-weight:700;cursor:pointer;padding:4px}.fg-career-more[open]>summary{margin-bottom:12px}

@media(max-width:640px){.career .career-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:4px;background:var(--paper-2)}.career .career-tabs .career-btn{min-width:0;padding:8px 4px}}

.emotes .xt-more{width:auto;min-width:76px;padding-left:30px;background-position:8px center;font-size:12px}.emotes .sound-btn{width:auto;min-width:78px;gap:6px;font-size:12px}.brrr .brrr-owned-skins .brrr-skin-look{border-color:var(--muted);color:var(--ink)}

/* Loop beta invites use the existing Owner panel with full touch targets. */
#ctl-pane-loopaccess .ctl-select,#ctl-pane-loopaccess .ctl-btn{min-height:44px;max-width:100%;border-radius:999px}

/* Community pack nameplates, granted to authenticated claim profiles. */
.tag.ink-plate.plate-chat-blue{background:#2b46dc;color:#fff;border:3px solid #e8e9e2;border-radius:3px;padding:5px 11px}.tag.ink-plate.plate-chat-silver{background:linear-gradient(105deg,#c4cbd5,#f2f4f6 50%,#b5bfce);color:#18233b;border:3px solid #294e94;border-radius:3px;padding:5px 11px}.tag.ink-plate.plate-chat-silver:before{content:'X';color:#294e94;font-weight:800;margin-right:7px}

/* Verified account connections use the existing paper and cobalt interface. */
.wallet-connections{padding:18px 0 2px;border-top:1px solid var(--line,#d6d2c6);margin-top:16px;text-align:left;min-width:0}
.wallet-connections-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.wallet-connections-heading h3{font-size:18px;line-height:1.3;margin:0;overflow-wrap:anywhere}
.wallet-connections-total{font-size:12px;color:var(--muted,#625f56)}
.wallet-connections-profile{font-size:13px;margin:7px 0 3px;overflow-wrap:anywhere}
.wallet-connections-identity{font-size:13px;margin:0 0 12px}
.wallet-connections-note,.wallet-connections-status{font-size:13px;line-height:1.5;margin:10px 0}
.wallet-connections-status:empty,.wallet-connections-profile:empty{display:none}
.wallet-connections-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.wallet-connections-actions .btn{min-height:44px;max-width:100%;white-space:normal}
.wallet-connections-history{margin-top:16px}
.wallet-connections-history .wallet-connections-manage{background:none;color:var(--ink,#26251f);padding:6px 0;min-height:36px;font-size:12px;text-decoration:underline;text-underline-offset:3px;border:0;box-shadow:none}
.profile-link-review{border:1px solid var(--line,#d6d2c6);padding:18px;margin:12px 0 18px;text-align:left}
.profile-link-review h3{font-size:18px;line-height:1.3;margin:0 0 12px}
.profile-link-review p{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.profile-link-review .profile-link-warning{font-weight:700;margin:8px 0 16px}
.profile-link-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font-size:13px;line-height:1.45;margin:0 0 16px;padding:12px 0;border-top:1px solid #cbd0df;border-bottom:1px solid #cbd0df}
.profile-link-details dt{color:var(--muted,#625f56)}.profile-link-details dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.profile-link-review .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.profile-link-review .btn{min-height:44px;white-space:normal}
@media(max-width:440px){.wallet-connections-actions{display:grid;grid-template-columns:minmax(0,1fr)}.wallet-connections-actions .btn{width:100%}.profile-link-review{padding:14px}.profile-link-review .actions{display:grid;grid-template-columns:minmax(0,1fr)}.profile-link-review .actions .btn{width:100%}}
/* Estimated skill-prize ladder. Display only, separate from score and payout state. */
.weekly-prize-native{margin:18px 0;padding:18px;background:#f6f3ed;color:#263449;border:1px solid #c8c5bc;border-radius:8px}.weekly-prize-native h3{margin:0 0 8px}.weekly-prize-native p{font-size:13px;line-height:1.6}.weekly-prize-top{padding:0;margin:14px 0;list-style:none;display:grid;gap:8px}.weekly-prize-top li{display:flex;align-items:center;gap:14px;padding:12px;background:#fffdf8;border:1px solid #d6d0c4;border-radius:5px}.weekly-prize-top li>span{color:#285aa7;font-size:18px;font-weight:700;min-width:28px}.weekly-prize-top strong{display:block;font-size:19px;font-variant-numeric:tabular-nums}.weekly-prize-top small{display:block;margin-top:3px;color:#586478;font-size:12px}.weekly-prize-native summary{padding:12px 0;min-height:44px;cursor:pointer;font-weight:600}.weekly-prize-native summary:focus-visible{outline:3px solid #285aa7;outline-offset:2px}.weekly-prize-native table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:12px}.weekly-prize-native caption{text-align:left;margin-bottom:8px;font-weight:700;font-size:14px}.weekly-prize-native th,.weekly-prize-native td{padding:8px 4px;border-bottom:1px solid #d6d0c4;text-align:right;white-space:normal}.weekly-prize-native th:first-child{text-align:left}.weekly-prize-native th{font-weight:600}.weekly-prize-native td{font-variant-numeric:tabular-nums}
.weekly-prize-native>label{display:block;font-size:12px;font-weight:600;margin-bottom:16px}.weekly-prize-native select{display:block;max-width:100%;width:100%;min-height:44px;margin-top:6px}.weekly-prize-funding{padding:10px 12px;background:#f4e7cb;border-left:3px solid #9a6b24}.weekly-prize-entry-list{padding:0;list-style:none}.weekly-prize-entry-list li{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(80px,1fr);align-items:start;gap:8px;border-bottom:1px solid #d6d0c4;padding:12px 0;font-size:12px}.weekly-prize-entry-list li>div:last-child{text-align:right}.weekly-prize-entry-list strong,.weekly-prize-entry-list small{display:block;overflow-wrap:anywhere}.weekly-prize-entry-list small{margin-top:4px;color:#586478}.weekly-prize-top li>div{min-width:0}.weekly-prize-top strong{overflow-wrap:anywhere}

/* POLISH-UI (November 5): the HUD shows once, one loading look, fades over every control, the map dock under open
   panels, the welcome card's Create account. */
body.pw-hud-pending #app .hud, body.pw-hud-pending #app .touch, body.pw-hud-pending #labels { opacity: 0 !important; pointer-events: none !important; }
body.pw-hud-reveal #app .hud, body.pw-hud-reveal #app .touch, body.pw-hud-reveal #labels { transition: opacity .45s ease; }
#loading { z-index: 9; background: radial-gradient(120% 90% at 50% 0%, #f7efdc 0%, #e9e2d0 60%, #d9cfb8 100%); }
.fv { animation: none; }
body:has(#fv:not([hidden])) #loading .loader { visibility: hidden; }
body:has(#fv:not([hidden])) .gate:not(.fv) { background: rgba(233, 226, 208, .55); }
#fade { z-index: 8; }
body.map-docked:has(#sheet:not([hidden])) #app .map-dock { z-index: 3; }
.fv .fv-actions { display: grid; gap: 8px; }
.fv .fv-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
.fv .fv-create { font-weight: 700; }
body.pw-hud-pending #rail, body.pw-arriving #rail { opacity: 0 !important; pointer-events: none !important; }
body.pw-hud-reveal #rail, body.pw-arrive-fade #rail { transition: opacity .45s ease; }
/* POLISH-UI: the desktop Menu shows every entry at once: three even columns, icon over label, words never break inside */
@media (min-width: 641px) and (pointer: fine) {
  body.map-docked .pm-panel { width: min(420px, calc(100vw - var(--left) - var(--right))); }
  body.sp-hud .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.sp-hud .pm-tile, body.sp-hud .pm-tile[data-menu="settings"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; align-content: center; text-align: center; min-height: 70px; padding: 8px 6px; row-gap: 3px; }
  body.sp-hud .pm-ic { grid-row: auto; width: 28px; height: 28px; }
  body.sp-hud .pm-tile strong { grid-column: 1; grid-row: auto; font-size: 13px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  body.sp-hud .pm-tile small { grid-column: 1; grid-row: auto; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.sp-hud .pm-tile:is([data-menu="profile"], [data-menu="settings"]) { grid-column: 1 / -1; grid-template-columns: 32px minmax(0, 1fr); justify-items: start; text-align: left; min-height: 54px; column-gap: 10px; padding: 8px 12px; }
  body.sp-hud .pm-tile:is([data-menu="profile"], [data-menu="settings"]) .pm-ic { grid-row: 1 / span 2; }
  body.sp-hud .pm-tile:is([data-menu="profile"], [data-menu="settings"]) :is(strong, small) { grid-column: 2; }
}
.pm-tile strong { overflow-wrap: normal; }
@media (min-width: 641px) and (pointer: fine) {
  body.map-docked.sp-hud .pm-tile[data-menu="photo"] { grid-column: auto; }
  body.map-docked.sp-hud .pm-tile[data-menu="settings"] { grid-column: span 2; }
  body.map-docked.sp-hud .pm-grid:has(> [data-menu="voice"]) > .pm-tile[data-menu="settings"] { grid-column: 1 / -1; }
}
/* POLISH-UI: on a phone every panel opens the same way the Menu does: from under the top bar to the bottom edge, the map
   dock tucked away while it is open (before: the Menu under the top bar, most panels under the minimap, three heights) */
@media (max-width: 640px), (pointer: coarse) {
  body.map-docked:has(#sheet:not([hidden])) { --mobile-panel-top: var(--mobile-top); }
  body.map-docked:has(#sheet:not([hidden])) #app :is(.map-dock, #visits, .lb-dock, .st-coach) { visibility: hidden; pointer-events: none; }
  body.map-docked #app #sheet:not(.commerce-sheet):not(:has(> #sheet-body > .mint-gift-desk)) { height: var(--corner-room) !important; }
}
/* POLISH-BOTS: the Owner panel's All games card across the top of the Bots tab */
.ctl-bots .ctl-bots-all { grid-column: 1 / -1; box-shadow: inset 0 0 0 1px #3d6bff66; }
@media (min-width: 900px) { .ctl-bots-all .ctl-bots-body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
/* POLISH-UI (audit CSS-10): phone notices read at 12.5 px, not 11 */
@media (max-width: 640px), (pointer: coarse) {
  body.map-docked #rail .consent, body.map-docked #rail .consent-ok, body.map-docked #rail :is(.event-pill, #toast, .brrr-arrow, .game-hud, .arcade-hud, .fish-hud) { font-size: 12.5px; }
}
/* POLISH-ROOMS: the rooms' hosts (games/room-hosts.js): the greeting bubble over a host's head, and the talk sheet */
.room-host-say{position:fixed;z-index:60;transform:translate(-50%,calc(-100% - 10px));border:0;border-radius:16px;padding:8px 14px;min-height:36px;max-width:min(240px,70vw);background:#fffdf6;color:#3e3428;font:500 13px/1.3 var(--font-ui);box-shadow:0 3px 12px #0003;text-align:center;white-space:normal;cursor:pointer}
.room-host-say::after{content:'';position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fffdf6}
.room-host-say:focus-visible{outline:2px solid var(--cobalt,#2f4bff);outline-offset:2px}
.room-host-say[hidden]{display:none}
body:has(#sheet:not([hidden]),.pp-panel:not([hidden]),dialog[open]) .room-host-say{visibility:hidden}
.room-host-sheet .room-host-can{margin:6px 0 10px;padding-left:20px;font-size:14px;line-height:1.45}
.room-host-sheet .room-host-can li{margin:4px 0}
.room-host-sheet .room-host-step{display:grid;gap:2px;margin:8px 0;padding:9px 12px;border-radius:12px;background:rgba(47,75,255,.06)}
.room-host-sheet .room-host-step strong{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt,#2f4bff)}
.room-host-sheet .actions .btn{min-height:44px}
@media (max-width:640px){.room-host-say{font-size:12px;padding:7px 12px;max-width:62vw}}
/* POLISH-UI: the helicopter tour's Land button (games/city-market.js) */
.tour-land { position: fixed; z-index: 7; left: 50%; bottom: calc(var(--safe-b) + 24px); transform: translateX(-50%); min-height: 48px; padding: 0 28px; border-radius: var(--r-pill); box-shadow: var(--shadow); }
/* POLISH-UI: on a phone the casino's chip pill sits in the narrow notice column: two tidy rows, never a letter per line */
@media (max-width: 640px), (pointer: coarse) {
  body.map-docked #rail .casino-hud { height: auto; min-height: 40px; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; }
  body.map-docked #rail .casino-hud-main { flex: 1 1 100%; min-width: 0; justify-content: flex-start; padding: 2px 6px; }
  body.map-docked #rail .casino-hud-main { flex-wrap: wrap; row-gap: 0; text-align: left; }
  body.map-docked #rail .casino-hud :is(strong, .casino-hud-buy, .casino-hud-music) { white-space: nowrap; }
  body.map-docked #rail .casino-hud :is(.casino-hud-buy, .casino-hud-music) { flex: 1 1 0; min-height: 36px; }
}
/* POLISH-PRESS: the Dead Press difficulty (the pad's sheet, the start card, the HUD, the end card) and the reload bar. Scoped to zm-. */
.zm-dtag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: rgba(243, 234, 215, .16); color: var(--zm-paper, #f3ead7); font: 800 10px/1.5 ui-monospace, 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; text-shadow: none; }
.zm-dtag.hard, .zm-beta.zm-hard { background: #b3261e; color: #fff4e8; }
.zm-round strong .zm-hard { margin-left: 6px; -webkit-text-stroke: 0; }   /* beside the round's digit, clear of the dead-left chip under it */
.zm-ammo .zm-second .dim { opacity: .75; }   /* Empty slot read faint over the light floor */
.zm-lobby .zm-dtag, .zm-over .zm-dtag { background: var(--paper-2, #efe9dc); color: var(--ink, #1d2126); border: 1px solid var(--line, #d6cfc0); }
.zm-lobby .zm-dtag.hard, .zm-over .zm-dtag.hard { background: #b3261e; color: #fff4e8; border-color: #b3261e; }
.zm-over h2 .zm-dtag { font-size: 11px; vertical-align: 6px; }
.zm-live .zm-dtag { margin-left: 4px; }
.zm-diffs button[data-d="hard"][aria-pressed="true"] { background: #b3261e; border-color: #b3261e; }
.zm-diff-line { margin: -2px 0 2px; color: var(--muted); font-size: var(--t-sm); }
.zm-over .zm-diff-line { color: inherit; opacity: .8; }
.zm-ammo .zm-bar b { width: 100%; transform-origin: 0 50%; }   /* the bar is scaled in place every frame of a reload (games/zombies.js ammoFrame) */
/* POLISH-SPEEDWAY: kart racing. The countdown says what the race is and who is on the grid; the results list every kart with
   its time, then Race again or Exit kart; during your race the notification rail waits (it covered the count on a desktop and the
   lap clock, the Garage and Exit buttons and your place on a phone). karts/kart.js intro, showResults. */
.kart-count { display: grid; justify-items: center; gap: 10px; text-align: center; }
.kart-count .kc-num { font: inherit; line-height: .9; }
.kart-count .kc-sub { font: 700 15px/1.4 var(--font-ui); color: #fff; text-shadow: none; background: rgba(20, 23, 28, .86); padding: 8px 14px; border-radius: 14px; max-width: min(520px, calc(100vw - 32px)); white-space: pre-line; box-shadow: var(--shadow); }
.kart-count .kc-sub:empty { display: none; }
.kart-results { top: 128px; left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); background: rgba(20, 23, 28, .95); color: #fff; border-radius: 18px; padding: 14px 16px 12px; box-shadow: var(--shadow); font-family: var(--font-ui); z-index: 5; animation: pop .18s ease-out; }
.kart-results[hidden] { display: none; }
.kart-results p { margin: 0; }
.kart-results .kr-kick { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9fb4ff; }
.kart-results .kr-title { font-size: 26px; font-weight: 900; margin-top: 2px; }
.kart-results.gold .kr-title { color: #ffd23a; }
.kart-results .kr-sub { font-size: 14px; color: #d8dde4; font-variant-numeric: tabular-nums; }
.kart-results ol { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 3px; max-height: 40vh; overflow-y: auto; }
.kart-results li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.kart-results li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kart-results li.bot > span:nth-child(2) { color: #aeb6c0; }
.kart-results li.me { background: rgba(47, 75, 255, .55); font-weight: 800; }
.kart-results li b { font-variant-numeric: tabular-nums; font-weight: 700; }
.kart-results .kr-acts { display: flex; gap: 8px; }
.kart-results .kr-acts .btn { flex: 1; justify-content: center; min-height: 44px; }
body.kart-race #rail { visibility: hidden; }   /* from the countdown to the results: the rail sat over the count (desktop) and the lap clock (phone) */
/* driving on a phone outside a race: the rail starts under the lap clock, the kart buttons and your place, and stops above the pedals
   (the kart HUD's own .driving .rail rule lost to body.map-docked #rail) */
@media (max-width: 640px) { body.map-docked.driving #rail { top: calc(var(--notice-top) + 148px); max-height: calc(100dvh - var(--notice-top) - var(--safe-b) - 430px); overflow: hidden; } }
@media (max-width: 640px) {
  .kart-count { top: 42%; font-size: 84px; }
  .kart-count .kc-sub { font-size: 13px; }
  .kart-place { top: 166px; }
  .kart-results { top: 168px; }
}
/* POLISH-SPEEDWAY: the Garage marks the ride you drive; a lap split never covers your place or the kart buttons */
.gar-card.current { box-shadow: inset 0 0 0 2px #3fbf6a; }
.gar-card.current small { color: #1f8a46; font-weight: 800; }
.gar-acts .gar-now { background: #e3f4e8; color: #1f6b3a; font-weight: 800; padding: 10px 14px; }
@media (min-width: 761px) and (min-height: 501px) { .gar-list { max-height: min(640px, calc(100dvh - 250px)); } }   /* the cards use the sheet's height, not a 420 px box */
body.driving .pw-split { top: 172px; }
@media (max-width: 640px) { body.driving .pw-split { top: 206px; font-size: 16px; } }
/* POLISH-BUILD: the build bar's block in hand (its colour, its shape, its name), Undo beside Redo on a phone, the folded bar's swatch and Undo */
.build-bar .land-current{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 5px;border-radius:999px;max-width:min(46vw,300px);text-align:left;font-family:var(--font-ui)}
.build-bar .land-current .lc-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.build-bar .land-current .lc-text b,.build-bar .land-current .lc-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build-bar .land-current .lc-text b{font-size:var(--t-sm)}
.build-bar .land-current .lc-text small{font-size:var(--t-xs);color:var(--muted);font-weight:600}
.build-bar .lc-swatch{position:relative;flex:none;width:32px;height:32px;border-radius:9px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.build-bar .lc-swatch::before{content:'';position:absolute;inset:4px;border-radius:4px;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(0,0,0,.16)}
.build-bar .lc-swatch[data-shape=slab]::before{clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}
.build-bar .lc-swatch[data-shape=stairs]::before{clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,0 100%)}
.build-bar .lc-swatch[data-shape=slope]::before{clip-path:polygon(0 0,100% 100%,0 100%)}
.build-bar .lc-swatch[data-shape=pane]::before{clip-path:polygon(38% 0,62% 0,62% 100%,38% 100%)}
.build-bar .lc-swatch[data-shape=post]::before{clip-path:polygon(32% 0,68% 0,68% 100%,32% 100%)}
.build-bar .lc-swatch[data-kind=glass]::before,.build-bar .lc-swatch[data-kind=water]::before{opacity:.6}
.build-bar .lc-swatch[data-kind=glow]::before{box-shadow:0 0 8px var(--c),inset 0 0 0 1px rgba(0,0,0,.16)}
.build-bar .lc-swatch[data-kind=remove]::before{background:repeating-linear-gradient(45deg,#c8574f 0 4px,#e9958e 4px 8px)}
.build-bar .tb-break{display:none}
.build-bar.is-minimized .lc-swatch{width:30px;height:30px}
.build-bar.is-minimized .land-undo{border-radius:999px;padding:0 12px;font-size:13px}
.build-bar .land-undo:disabled,.build-bar .land-redo:disabled{opacity:.45}
@media(max-width:600px){
  .build-bar:not(.is-minimized) .tb-lead{display:flex;flex-wrap:wrap;gap:6px}
  .build-bar:not(.is-minimized) .tb-lead>.land-bar-toggle{order:0}
  .build-bar:not(.is-minimized) .tb-lead>.land-current{order:1;flex:1 1 auto;max-width:none;min-width:0}
  .build-bar:not(.is-minimized) .tb-lead>.done{order:2;margin-left:0}
  .build-bar:not(.is-minimized) .tb-lead>.tb-break{display:block;order:3;flex-basis:100%;height:0}
  .build-bar:not(.is-minimized) .tb-lead>button:not(.land-bar-toggle):not(.done):not(.land-current){order:4;flex:1 1 0;min-width:0;min-height:40px;padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.build-bar.is-minimized .land-undo[data-icon]{width:44px;padding:0;font-size:20px;line-height:1}
.build-bar.is-minimized .land-undo[data-icon] i{font-style:normal}
@media(max-width:600px){
  .build-bar.is-minimized .tb-min-row{flex-wrap:nowrap;gap:6px}
  .build-bar.is-minimized .tb-min-title{flex:1 1 auto;max-width:none}
  .build-bar.is-minimized .jet-up span,.build-bar.is-minimized .jet-down span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .build-bar.is-minimized .jet-up,.build-bar.is-minimized .jet-down{width:44px;padding:0;position:relative}
}
/* POLISH-BUILD: Place (pieces with their pictures, the NFT display pieces and your NFTs, Select) and what is selected */
.build-bar .tb-place-group{flex-direction:column;align-items:stretch}
.build-bar .tb-place-group>.tb-cap{flex-basis:auto}
.build-bar .tb-place-group .tb-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.build-bar .tb-place-group .tb-row>*{flex:none}
.build-bar .tools .tb-place .tb-pic{width:34px;height:34px;border-radius:8px;background:var(--paper-2)}
.build-bar .tools .tb-place .tb-car{display:inline-block;width:34px;height:20px;border-radius:6px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25)}
.build-bar .tools .tb-place[disabled]{opacity:.5}
.build-bar .tools .tb-select{border-color:var(--cobalt)}
.build-bar .tools .tb-select[aria-pressed="true"]{background:var(--cobalt);color:#fff}
.build-bar .tools .tb-select[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.build-bar .tb-sub{font-size:var(--t-xs);font-weight:800;color:var(--muted);padding:0 4px 0 2px;white-space:nowrap}
.build-bar .tools .tb-kind{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.1;padding:5px 9px;border-radius:10px}
.build-bar .tools .tb-kind small{font-size:10px;color:var(--muted);font-weight:600}
.build-bar .tools .tb-kind[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.build-bar .tools .tb-kind[aria-pressed="true"] small{color:rgba(255,255,255,.8)}
.build-bar .tools .tb-nft{width:46px;height:46px;padding:2px;border-radius:9px;overflow:hidden;display:inline-grid;place-items:center}
.build-bar .tools .tb-nft img{width:100%;height:100%;object-fit:cover;border-radius:7px;image-rendering:pixelated}
.build-bar .tools .tb-nft[aria-pressed="true"]{box-shadow:0 0 0 3px var(--cobalt)}
.build-bar .tb-empty{font-size:var(--t-xs);color:var(--muted);white-space:nowrap}
.build-bar .tb-selected{background:rgba(47,75,255,.07);border-radius:12px;padding:6px 8px;border-top:0}
.build-bar .tb-selected .tb-cap{color:var(--cobalt)}
.build-bar .tb-selected .tb-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.build-bar .tb-selected .tb-row>*{flex:none}
.build-bar .tb-sel-name{font-size:var(--t-sm);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px}
.build-bar .tools .sel-move{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.build-bar .tools .sel-remove{color:#b3261e}
.build-bar .tools .sel-done{width:40px;padding:0}
@media(max-width:640px){
  .build-bar.compact .tb-selected .tb-cap{display:none}
  .build-bar .tb-sel-name{max-width:110px}
}
/* a phone upright: the Jump button and the stick stay above the bar (folded or open), never under it */
@media (max-width:640px) and (pointer:coarse){
  body.building.map-docked .touch .jump,body.building .touch .jump{bottom:calc(var(--bb-gap,320px) + 26px)}
  body.building.map-docked .joy{bottom:calc(var(--bb-gap,320px) + 14px)}
}
.build-bar .tb-place-group,.build-bar .tb-selected{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.build-bar .tb-place-group .tb-row,.build-bar .tb-selected .tb-row{width:100%;min-width:0;max-width:100%}

/* POLISH-CHECKOUT: the purchase sheets on a short screen (a phone in landscape, under 500 px tall). While the checkout's
   approve step waits (the preview stand-in or a purchase PIN), the steps and the line above them fold away so Approve, Decline
   and the PIN sit in view with the price; the steps sit closer the rest of the time. Get $Printer keeps its amounts and its buy
   in view: a slimmer head (its grid on a phone keeps the mark), Get a price and Buy in my wallet held at the foot while the
   amounts show, and no second Close at the foot (the X, Escape and a tap outside still close it). */
@media (max-height: 500px) {
  .checkout:has(> .tx-wallet:not([hidden])) > .steps, .checkout:has(> .tx-wallet:not([hidden])) > p.muted { display: none; }
  .checkout .steps { margin: 10px 0 4px; }
  .checkout .steps li { padding: 5px 0; }
  .checkout .steps li:not(:last-child)::after { top: 27px; bottom: -5px; }
  .checkout .done-mark { width: 40px; height: 40px; margin: 2px 0; }
  .checkout .done-mark::after { left: 14px; top: 7px; width: 9px; height: 18px; border-width: 0 3px 3px 0; }
  .checkout .tx-wallet { margin-top: 8px; padding: 10px 12px 2px; }
  .checkout .qp-confirm h3 { margin: 0 0 6px; }
  .checkout .qp-confirm-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
  .lb-head { padding: 8px 10px 4px 16px; }
  .lb-titles h2 { font-size: var(--t-lg); }
  .lb-foot { display: none; }
  .ln2-buy > .lb-actions { position: sticky; bottom: -12px; z-index: 2; margin: 0 -14px; padding: 8px 14px 8px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }
  .lb-body p.lb-lead { font-size: 14px; margin: 0 0 6px; }
}
/* POLISH-STANDS: a market stand as visitors read it (ui/stand-sheet.js standCard), its renter's form with links checked as
   typed and a preview, the warning before a link leaves Printer World (ui/leave-site.js) and the Owner panel's Stand links
   tab (ui/standlinks-panel.js) */
.stand-sheet { font-family: var(--font-ui); }
.stand-card { --stand-accent: var(--cobalt); position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: inset 0 4px 0 var(--stand-accent); }
.stand-card.is-preview { background: #fffdf8; border-style: dashed; }
.stand-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
.stand-sheet > .stand-card .stand-top { grid-template-columns: 1fr; }
.stand-sheet > .stand-card .stand-art { width: min(100%, 280px); justify-self: center; }
.stand-art { width: 112px; aspect-ratio: 1; display: block; object-fit: contain; border-radius: 12px; background: #efe6d3; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--line); }
.stand-art.is-photo { image-rendering: auto; object-fit: cover; }
.stand-art.empty { display: grid; place-items: center; background: var(--stand-accent); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .02em; image-rendering: auto; }
.stand-head { min-width: 0; display: grid; gap: 4px; align-content: start; }
.stand-head .eyebrow { overflow-wrap: anywhere; }
.sheet-inner .stand-name, .stand-name { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--ink); text-transform: none; }
.sheet-inner h3.stand-name, h3.stand-name { font-size: 17px; letter-spacing: 0; }
.stand-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0 !important; }
.stand-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--paper-2); font-size: 12px; font-weight: 700; color: var(--ink); }
.stand-left { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stand-nft-name { margin: 0 !important; font-size: 12px !important; color: var(--muted); overflow-wrap: anywhere; }
.stand-pitch { margin: 0 !important; font-size: 15px !important; line-height: 1.5; overflow-wrap: anywhere; }
.stand-links { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 10px; }
.stand-link { display: grid; gap: 2px; }
.stand-visit { width: 100%; min-height: 50px; justify-content: space-between; gap: 12px; text-align: left; }
.stand-visit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-visit-site { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; opacity: .85; }
.stand-visit:disabled { opacity: .6; cursor: default; }
.stand-report { justify-self: start; min-height: 32px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.stand-report:disabled { text-decoration: none; cursor: default; }
.stand-state { justify-self: start; display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.stand-state.is-wait { background: #fff1d1; color: #6b4700; }
.stand-state.is-ok { background: #e3f4e8; color: #1f6b3a; }
.stand-state.is-off { background: #fde4e1; color: #8f1d14; }
.stand-link-set { border: 0; margin: 14px 0 0; padding: 0; min-width: 0; }
.stand-link-set legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.stand-link-rows { display: grid; gap: 12px; margin-top: 6px; }
.stand-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 10px; border-radius: 12px; background: var(--paper-2); }
.stand-link-inputs { display: grid; gap: 6px; min-width: 0; }
.stand-link-inputs input { width: 100%; min-width: 0; }
.stand-link-inputs input[type="url"] { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.stand-link-drop { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.stand-link-note { grid-column: 1 / -1; margin: 2px 0 0 !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 500; color: var(--muted); }
.stand-link-note.good { color: #1f6b3a; }
.stand-link-note.wait { color: #6b4700; }
.stand-link-note.bad { color: #b3261e; font-weight: 600; }
.stand-link-add { justify-self: start; }
.stand-preview { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.stand-preview-label { margin: 0 0 8px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stand-edit .sheet-back { margin-bottom: 6px; }
.market-sheet { padding: 22px 22px 26px; }   /* the plot markets sheet had 4 px at its sides: the text touched the sheet edge */
@media (pointer: coarse) { .stand-report { min-height: 44px; } .stand-link-drop { width: 44px; height: 44px; } }
@media (max-width: 380px) { .stand-top { grid-template-columns: 84px minmax(0, 1fr); } .stand-art { width: 84px; } }
/* the warning before a stand's link opens another website */
.pw-leave { width: min(460px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-ui); overflow: visible; }
.pw-leave::backdrop { background: rgba(24, 18, 8, .55); backdrop-filter: blur(2px); }
.pw-leave-card { max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 22px 20px; border-radius: 18px; background: var(--paper); box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.pw-leave-card h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.pw-leave-dest { display: grid; gap: 4px; margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--gold); }
.pw-leave-site { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pw-leave-full { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; max-height: 4.4em; overflow: hidden; }
.pw-leave-why p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.pw-leave-rules { margin: 0; padding: 12px 14px 12px 30px; border-radius: 12px; background: #fff1d1; color: #4d3300; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.pw-leave-rules li + li { margin-top: 6px; }
.pw-leave-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pw-leave-acts .btn { flex: 1 1 180px; justify-content: center; min-height: 48px; }
.pw-leave-go { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pw-leave { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; }
  .pw-leave-card { max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .pw-leave-acts { flex-direction: column; }
  .pw-leave-acts .btn { flex: none; width: 100%; }
}
/* the Owner panel's Stand links tab */
.sl-toolbar { justify-content: space-between; }
.sl-group { margin: 0 0 18px; }
.sl-head { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 8px; font-size: var(--t-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.sl-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.sl-main { display: grid; gap: 4px; min-width: 0; }
.sl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sl-site { font-size: var(--t-lg); overflow-wrap: anywhere; }
.sl-state { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 800; background: var(--c-panel-2); color: var(--c-muted); }
.sl-state.is-wait { color: var(--c-amber); }
.sl-state.is-ok { color: var(--c-green); }
.sl-state.is-rep { color: var(--c-red); }
.sl-url { display: block; font-size: var(--t-sm); color: var(--c-text); overflow-wrap: anywhere; user-select: all; }
.sl-warn { margin: 0; color: var(--c-red); font-size: var(--t-sm); font-weight: 700; }
.sl-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sl-foot { margin-top: 8px; }
@media (max-width: 640px) { .sl-row { grid-template-columns: 1fr; } .sl-acts { justify-content: flex-start; } }

/* POLISH-LOOP: Loop City's open beta line on the gate's travel card, the land lines on a Loop City plot's sheet, the Loop
   Phone's land note and the Owner panel's open beta switch */
.cw-beta{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;background:rgba(255,248,234,.18);box-shadow:inset 0 0 0 1px rgba(255,248,234,.45);font:600 13px/1.2 var(--font-ui);letter-spacing:.04em}
.cw-beta[hidden]{display:none}
.ik-claim .ik-loop-line{color:#2a3140}
.ik-claim .ik-loop-free{display:grid;gap:6px}
.ik-claim .ik-loop-free p{color:#ffe7a8}
.ik-free.ik-loop-free{background:linear-gradient(135deg,#1d2b5c,#2f4bff)}
.cw-land-note{margin:4px 0 10px;padding:8px 10px;border-radius:10px;background:rgba(47,75,255,.08);font:500 13px/1.45 var(--font-ui)}
.pl-beta{flex-wrap:wrap;margin:6px 0 4px}
@media (max-width:767px){body:has(#sheet:not([hidden]),.pp-panel:not([hidden]),dialog[open]) .cw-phone-btn{visibility:hidden;pointer-events:none}}   /* POLISH-LOOP: the Loop Phone's button sat over a phone's open sheet */
/* POLISH: a room host just off a narrow screen greets you from that edge, an arrow pointing their way (games/room-hosts.js) */
.room-host-say.edge-left::before { content: '\2190  '; font-weight: 700; }
.room-host-say.edge-right::after { content: '  \2192'; font-weight: 700; position: static; border: 0; }
/* POLISH (owner, November 5): the stand's first link says "Post your DEX Screener or pump.fun link here": the hint in the UI
   font, and on a phone the address gets the full width (the remove button moves beside the label) so the line reads in full */
.stand-link-inputs input[type="url"]::placeholder { font-family: var(--font-ui); }
@media (max-width: 640px) {
  .stand-link-inputs { display: contents; }
  .stand-link-row input[type="url"] { grid-column: 1 / -1; }
  .stand-link-row .stand-link-drop { grid-row: 2; grid-column: 2; align-self: center; }
  .stand-link-row .stand-link-note { grid-column: 1 / -1; }
}
/* POLISH-PRESS-PHONE (owner, November 5: "i couldnt play on mobile due to hud layout"): on a phone held upright the night's
   cards sat across the upper middle of the view (the hint at 25% of the height, Night School down to 40%, and in a wallet
   app's shorter browser right on the crosshair). Now the round reads on one line, the vitals and Power sit closer under it,
   and the hint and Night School are compact strips in the top band; the middle of the view stays clear. */
body.zm-on.zm-port .zm-round { display: flex; align-items: flex-end; gap: 8px; }
body.zm-on.zm-port .zm-round strong { font-size: 34px; }
body.zm-on.zm-port .zm-left { top: calc(var(--zt) + 42px); }
body.zm-on.zm-port .zm-vitals { top: calc(var(--zt) + 68px); }
body.zm-on.zm-port .zm-perks { top: calc(var(--zt) + 130px); }
body.zm-on.zm-port .zm-hint { top: calc(var(--zt) + 156px); padding: 6px 10px; gap: 8px; border-radius: 9px; font-size: 13px; line-height: 1.25; z-index: 2; }
body.zm-on.zm-port .zm-hint kbd { min-width: 0; padding: 2px 6px; font-size: 11px; }
body.zm-on.zm-port .zm-school:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; top: calc(var(--zt) + 156px); max-width: calc(100vw - var(--zl) - var(--zr)); padding: 5px 10px 6px; border-radius: 9px; transition: top .25s, transform .25s, opacity .25s; }
body.zm-on.zm-port .zm-hud:has(.zm-hint.on) .zm-school { top: calc(var(--zt) + 212px); }   /* both at once: Night School under the hint */
body.zm-on.zm-port .zm-school small { font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
body.zm-on.zm-port .zm-school-line { margin-top: 0; gap: 6px; }
body.zm-on.zm-port .zm-school-line kbd { min-width: 0; padding: 1px 6px; font-size: 11px; }
body.zm-on.zm-port .zm-school-line strong { font-size: 13px; line-height: 1.2; }
/* landscape: the same compact strips along the top middle, clear of the round on the left and the team on the right */
body.zm-on.zm-land .zm-hint { padding: 6px 10px; gap: 8px; font-size: 13px; line-height: 1.25; }
body.zm-on.zm-land .zm-hint kbd { min-width: 0; padding: 2px 6px; font-size: 11px; }
body.zm-on.zm-land .zm-school:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; padding: 5px 10px 6px; }
body.zm-on.zm-land .zm-school small { font-size: 10px; white-space: nowrap; }
body.zm-on.zm-land .zm-school-line { margin-top: 0; }
body.zm-on.zm-land .zm-school-line strong { font-size: 13px; }
/* a short portrait screen (a wallet app's own browser, about 660 px tall): the ammo sits lower, just over the stick, so it
   stays out of the middle of the view */
@media (max-height: 720px) { body.zm-on.zm-port .zm-ammo { bottom: calc(var(--zb) + 142px); } }

/* Release review: advice follows its measured text height, leaving the score and the view clear. */
.zm-advice { display: contents; }
body.zm-on:is(.zm-port, .zm-land) #place-hud { display: none; }
body.zm-on:is(.zm-port, .zm-land) .zm-advice { position: absolute; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
body.zm-on.zm-port .zm-advice { top: calc(var(--zt) + 156px); left: var(--zl); right: var(--zr); }
body.zm-on.zm-land .zm-advice { top: var(--zt); left: calc(var(--zl) + 186px); right: calc(var(--zr) + 196px); }
body.zm-on:is(.zm-port, .zm-land) .zm-hud .zm-advice > :is(.zm-hint, .zm-school),
body.zm-on.zm-port .zm-hud:has(.zm-hint.on) .zm-advice .zm-school { position: static; inset: auto; transform: none; width: auto; max-width: none; flex-shrink: 0; }
body.zm-on:is(.zm-port, .zm-land) .zm-advice .zm-hint:not(.on) { display: none; }

/* PERFECT-LAUNCHDROP: the Launch Site airdrop (games/launch-airdrop.js: the rail's pill and its sheet; ui/owner-launchdrop.js: the
   owner's section). The pill is an .event-pill (the rail places it); only its accents are set here. */
.event-pill.airdrop-pill strong { color: #ffd25a; }
.event-pill.airdrop-pill .live-dot { background: #ff916f; }
.airdrop-sheet .airdrop-row { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(47, 75, 255, .07); border: 1px solid rgba(47, 75, 255, .18); }
.airdrop-sheet .airdrop-row p { margin: 4px 0 0; }
.airdrop-sheet .airdrop-mine { font-weight: 700; color: #2f4bff; }
.owner-launchdrop .owner-launchdrop-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: end; margin: 8px 0; }
.owner-launchdrop .owner-launchdrop-form .ctl-check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.owner-launchdrop .ctl-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.owner-launchdrop .ctl-field input { width: 100%; min-height: 36px; box-sizing: border-box; }
.owner-launchdrop .owner-launchdrop-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.owner-launchdrop .owner-launchdrop-row .btn { margin-left: auto; }
@media (pointer: coarse) { .owner-launchdrop .ctl-field input, .owner-launchdrop .btn.small { min-height: 44px; } }

/* PERFECT-REWARDS: Your rewards (ui/rewards.js), the Dead Press reward note (games/zombies.js) and the owner's reward controls (ui/owner-rewards.js) */
.rw h2 { margin: 0 0 6px; }
.rw h3 { margin: 16px 0 6px; font-size: 14px; letter-spacing: .02em; }
.rw .rw-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.rw .rw-who p { margin: 0; }
.rw .rw-who.ok { color: #2f7a3a; font-weight: 600; }
.rw .rw-delivery, .rw .rw-fine { font-size: 12px; opacity: .78; margin: 4px 0 8px; }
.rw .rw-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rw .rw-totals > div { background: rgba(127, 127, 127, .1); border-radius: 10px; padding: 8px; min-width: 0; }
.rw .rw-totals small { display: block; font-size: 11px; opacity: .75; }
.rw .rw-totals strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.rw .rw-prog { border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; padding: 8px 10px; margin: 0 0 8px; }
.rw .rw-prog.off { opacity: .55; }
.rw .rw-prog header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rw .rw-prog header span { font-size: 12px; opacity: .8; white-space: nowrap; }
.rw .rw-prog p { margin: 6px 0 0; font-size: 12.5px; }
.rw .rw-pool { color: #b8473c; font-weight: 600; }
.rw .rw-bar { display: block; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, .2); margin-top: 6px; overflow: hidden; }
.rw .rw-bar i { display: block; height: 100%; background: #e8b23a; }
.rw .rw-tasks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.rw .rw-tasks li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: baseline; font-size: 12.5px; }
.rw .rw-tasks li.done { opacity: .6; }
.rw .rw-tasks li b { color: #2f7a3a; }
.rw .rw-tasks em, .rw .rw-days em { font-style: normal; font-size: 12px; opacity: .8; white-space: nowrap; }
.rw .rw-days, .rw .rw-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rw .rw-days li, .rw .rw-events li { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; font-size: 12.5px; }
.rw .rw-days li.rw-paid em { color: #2f7a3a; }
.rw .rw-days li.rw-void { text-decoration: line-through; opacity: .6; }
.rw .rw-events time { opacity: .7; min-width: 44px; }
.zm-beta-note .zm-prize-note { display: block; margin-top: 4px; font-weight: 600; }
.rw-owner { display: grid; gap: 10px; }
.rw-owner .rw-o-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.rw-owner .rw-o-kpi { background: rgba(127, 127, 127, .1); border-radius: 10px; padding: 8px; }
.rw-owner .rw-o-kpi small, .rw-owner .rw-o-kpi span { display: block; font-size: 11px; opacity: .75; }
.rw-owner .rw-o-kpi strong { display: block; font-size: 16px; }
.rw-owner .rw-o-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.rw-owner .rw-o-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.rw-owner .rw-o-prog.off { opacity: .7; }
.rw-owner .rw-o-prog header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rw-owner .rw-o-fields, .rw-owner .rw-o-tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-top: 6px; }
.rw-owner .rw-o-field { display: grid; gap: 2px; font-size: 12px; min-width: 0; }
.rw-owner .rw-o-field input, .rw-owner .rw-o-field select { width: 100%; box-sizing: border-box; }
.rw-owner .rw-o-today { font-size: 12px; margin: 4px 0; }
.rw-owner .rw-o-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.rw-owner .rw-o-days { grid-column: 1 / -1; overflow-x: auto; }
.rw-owner .rw-o-people { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 12.5px; }
.rw-owner .rw-o-people li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.rw-owner .rw-o-people small, .rw-owner .rw-o-recent small { opacity: .7; }
.rw-owner .rw-o-recent li { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; align-items: baseline; }
.rw-owner .linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.rw-owner .rw-o-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rw-owner .rw-o-table th, .rw-owner .rw-o-table td { text-align: left; padding: 3px 4px; border-bottom: 1px solid rgba(127, 127, 127, .2); vertical-align: top; }
.rw-owner .rw-o-found { overflow-x: auto; }
.rw-owner .rw-o-void { display: inline-flex; gap: 4px; }
.rw-owner .rw-o-void input { width: 110px; }
/* /PERFECT-REWARDS */

/* PERFECT-ADMIN: the Owner panel's Plots and land, Ads and billboards, Games, Test mode and the chest override (ui/admin-perfect.js) */
.px-scroll { display: flex; flex-direction: column; gap: 12px; }
.px-detail, .px-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.px-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.px-label { min-width: 72px; color: var(--c-muted); font-size: var(--t-sm); font-weight: 700; }
.px-input { height: 34px; min-width: 0; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-panel-2); color: var(--c-text); font: inherit; font-size: var(--t-sm); color-scheme: dark; }
.px-input[type="search"], .px-input[type="text"] { flex: 1 1 160px; }
.px-input[type="datetime-local"] { flex: 0 1 220px; }
.px-input.px-color { width: 44px; flex: 0 0 44px; padding: 2px; }
.px-said { margin: 0; min-height: 0; font-size: var(--t-sm); color: var(--c-muted); }
.px-said:empty { display: none; }
.px-said.ok { color: var(--c-green); } .px-said.no { color: var(--c-red); }
.px-facts { margin: 0; color: var(--c-text); }
.ctl-row.px-plot { grid-template-columns: minmax(0, 1fr) auto; padding: 0; }
.px-plot-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; }
.px-plot-pick small { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ctl-row.px-plot .ctl-tags { padding-right: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ctl-row.px-plot.on { box-shadow: inset 0 0 0 2px var(--c-cobalt); }
.px-ad { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--c-panel-2); box-shadow: inset 0 0 0 1px var(--c-line); min-width: 0; }
.px-ad.paused { box-shadow: inset 0 0 0 1px var(--c-amber); }
.px-ad p { margin: 0; overflow-wrap: anywhere; }
.px-ad-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.px-ad-sub { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--c-line); }
.px-hist h4 { margin: 8px 0 4px; font-size: var(--t-sm); color: var(--c-muted); }
.px-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); color: var(--c-text); }
.px-log li { overflow-wrap: anywhere; line-height: 1.4; }
.px-log time { display: block; color: var(--c-dim); font-size: var(--t-xs); }
.px-retired summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 700; }
.ctl-row.px-chest .ctl-who small { display: block; }
.ctl-row.px-chest .ctl-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.px-badge { position: fixed; z-index: 60; left: 50%; top: calc(var(--safe-t, 0px) + 6px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #3a2f12; color: #ffe2a0; box-shadow: 0 0 0 1px #e9bb4d, 0 6px 18px rgba(0, 0, 0, .35); font: 600 12px/1.2 Geist, "Segoe UI", system-ui, sans-serif; pointer-events: auto; }
.px-badge span { opacity: .85; }
.px-badge .ctl-btn { height: 26px; padding: 0 10px; background: #e9bb4d; color: #241500; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .px-line { gap: 6px; }
  .px-label { min-width: 0; flex-basis: 100%; }
  .px-line .ctl-select, .px-input[type="datetime-local"] { flex: 1 1 140px; min-height: 40px; }
  .px-line .ctl-btn { min-height: 40px; }
  .ctl-row.px-plot { grid-template-columns: minmax(0, 1fr); }
  .ctl-row.px-plot .ctl-tags { justify-content: flex-start; padding: 0 12px 10px; }
  .ctl-row.px-chest { grid-template-columns: minmax(0, 1fr); }
  .ctl-row.px-chest .ctl-acts { justify-content: flex-start; }
  .px-badge span { display: none; }
}
/* /PERFECT-ADMIN */
/* PERFECT-BUILD: the quick row at the build bar's foot (world/land.js quickRow): Place, Remove, Rotate, Undo, Clear all and Done,
   each a big target with its sign and its name (and its key on a computer); why a spot will not take a block, on the status line */
.build-bar .tb-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;padding-top:7px;border-top:1px solid var(--line);overflow:visible;flex-wrap:nowrap}
.build-bar .tb-quick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;min-width:0;margin:0;padding:5px 4px;border-radius:12px;font-size:12px;line-height:1.1}
.build-bar .tb-quick button i{font-style:normal;font-size:18px;font-weight:800;line-height:1}
.build-bar .tb-quick button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build-bar .tb-quick kbd{font:inherit;font-size:9.5px;font-weight:700;line-height:14px;padding:0 4px;border-radius:4px;color:var(--muted);background:var(--paper-2)}
.build-bar .tb-quick button[aria-pressed="true"] kbd,.build-bar .tb-quick .done kbd{color:#fff;background:rgba(255,255,255,.2)}
.build-bar .tb-quick .tq-remove[aria-pressed="true"]{background:#c8574f;border-color:#c8574f;color:#fff}
.build-bar .tb-quick .tq-clear{color:#b3261e}
.build-bar .tb-quick .done{width:auto;height:auto;min-width:0;margin-left:0;padding:5px 4px;border-radius:12px;display:flex;font-size:12px}
.build-bar .tb-quick .done::before{content:none;display:none}
@media (pointer:fine){   /* a computer: one line a button (its sign, its name, its key), so the bar stays low */
  .build-bar .tb-quick button{flex-direction:row;gap:6px;min-height:40px;padding:5px 8px}
  .build-bar .tb-quick button i{font-size:16px}
}
.build-bar .land-status .land-why{color:#b3261e;font-weight:700}
/* while you build, name tags (yours sits right where you aim) let the click through to the plot; Done gives them back */
body.building #labels .tag.player,body.building #labels .tag.you{pointer-events:none}
@media (max-width:640px),(pointer:coarse){   /* a phone: big thumbs; Rotate is on the quick row, so Flip sits beside the shapes */
  .build-bar.compact .tb-quick button{min-height:52px;font-size:11.5px}
  .build-bar.compact .land-shape-row{flex-wrap:nowrap}
  .build-bar.compact .land-shapes{flex:1 1 auto;min-width:0}
  .build-bar.compact .land-turns{flex:0 0 auto;margin-left:0}
  .build-bar.compact .land-turns .land-rotate{display:none}
  .build-bar.compact .land-turns .land-flip{min-width:56px;flex:none}
}
/* /PERFECT-BUILD */

/* PERFECT-SETTINGS (November 6): Settings' keys, voice and interface rows, and what the interface choices change.
   ui/prefs.js sets --hud-zoom, --touch-btn-scale, html[data-chat-size], html[data-names] and html.pw-cb; ui/motion.js html.pw-calm. */
#app > .hud, #app > .rail { zoom: var(--hud-zoom, 1); }
@media (min-width: 641px) and (pointer: fine) {
  html[data-chat-size="medium"] #app > .chat { zoom: calc(var(--hud-zoom, 1) * 1.15); }
  html[data-chat-size="large"] #app > .chat { zoom: calc(var(--hud-zoom, 1) * 1.3); }
}
html[data-names="off"] #labels .tag.player { visibility: hidden !important; }
html.pw-calm *, html.pw-calm *::before, html.pw-calm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
@media (max-width: 640px), (pointer: coarse) {
  .touch .jump, .touch .autorun-btn, .touch .view-btn, .touch .talk-btn, .pb-fire, .roadster-controls button, .kart-hud button, .fish-prompt button { scale: var(--touch-btn-scale, 1); }
}
/* the phone's Talk button (ui/voice.js): above Jump, on Jump's side */
.touch .talk-btn { position: fixed; z-index: 3; right: var(--jump-right, calc(var(--safe-r) + 24px)); bottom: calc(var(--jump-bottom, calc(var(--safe-b) + 20px)) + var(--jump, 68px) + 16px); width: 64px; height: 64px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 251, 242, .7); background: rgba(29, 33, 38, .35); color: #fffaf0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 700 12px/1 Geist, system-ui, sans-serif; text-shadow: 0 1px 3px #111827; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.touch .talk-btn .ic, .touch .talk-btn .ic svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.touch .talk-btn.on { background: #1f9d55; border-color: #fff; box-shadow: 0 0 0 5px rgba(31, 157, 85, .28); }
body.map-docked .touch .talk-btn { right: calc(var(--safe-r) + 36px); bottom: calc(var(--safe-b) + 160px); }
body[data-joystick-side='right'] .touch .talk-btn { left: var(--jump-right, calc(var(--safe-l) + 24px)); right: auto; }
body.map-docked[data-joystick-side='right'] .touch .talk-btn { left: calc(var(--safe-l) + 36px); right: auto; }
body.building .touch .talk-btn { bottom: calc(var(--bb-gap, 320px) + 110px); }
body.zm-on .touch .talk-btn, body.brrr-full .touch .talk-btn { display: none !important; }
/* Controls: the keys */
.st2 .st-keys2 { display: grid; margin-top: 6px; }
.st2 .kb-group { margin: 12px 0 2px; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.st2 .kb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.st2 .kb-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st2 .kb-name strong { font-size: var(--t-md); }
.st2 .kb-name small { font-size: var(--t-xs); color: var(--muted); line-height: 1.3; }
.st2 .kb-keys { display: flex; gap: 6px; flex: none; }
.st2 .kb-key { min-width: 62px; min-height: 36px; padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); box-shadow: 0 2px 0 var(--paper-3); font: inherit; font-size: var(--t-sm); font-weight: 800; color: var(--ink); cursor: pointer; white-space: nowrap; }
.st2 .kb-key:hover { border-color: var(--cobalt); }
.st2 .kb-key.empty { color: var(--muted); font-weight: 600; border-style: dashed; box-shadow: none; }
.st2 .kb-key.listening { background: var(--cobalt); border-color: var(--cobalt); color: #fff; box-shadow: 0 0 0 4px rgba(47, 75, 255, .22); }
.st2 .kb-none .kb-name strong { color: #b3261e; }
.st2 .st-keynote { color: var(--cobalt-ink); font-weight: 700; }
.st2 .st-keynote:empty { display: none; }
.st2 .st-keyfold { margin: 8px 0; }
.st2 .st-keyfold > summary { padding: 6px 0; }
.st2 .st-device { margin: 0 0 8px; }
/* Voice: the microphone and its level */
.st2 .st-select { display: block; width: 100%; margin-top: 8px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font: inherit; font-size: var(--t-sm); color: var(--ink); }
.st2 .st-levelrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.st2 .st-level { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.st2 .st-level i { display: block; width: 0; height: 100%; border-radius: inherit; background: #1f9d55; transition: width .08s linear; }
.voice-panel .voice-people li { gap: 8px; }
.voice-panel .vp-vol { width: 84px; flex: none; accent-color: var(--cobalt); }
/* colour-blind friendly highlights: blue and orange (Okabe-Ito) for the greens and reds that say something */
html.pw-cb .tag.speaking { box-shadow: 0 0 0 2px #0072b2, 0 0 12px rgba(0, 114, 178, .55); }
html.pw-cb .tag.speaking::after { background: linear-gradient(#0072b2, #0072b2) 0 100% / 2px 60% no-repeat, linear-gradient(#0072b2, #0072b2) 4px 100% / 2px 100% no-repeat, linear-gradient(#0072b2, #0072b2) 8px 100% / 2px 45% no-repeat; }
html.pw-cb .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; }
html.pw-cb #labels .tag.in-voice:not(.xt-sig):not(.xt-col)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230072b2' 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='%230072b2' stroke-width='2.5' stroke-linecap='round'/></svg>"); }
html.pw-cb .voice-row.talking .voice-mic, html.pw-cb .touch .talk-btn.on, html.pw-cb .st2 .st-level i { background: #0072b2; }
html.pw-cb .touch .talk-btn.on { box-shadow: 0 0 0 5px rgba(0, 114, 178, .3); }
html.pw-cb .live-dot { background: #0072b2; box-shadow: 0 0 0 4px rgba(0, 114, 178, .18); }
html.pw-cb .event-pill .live-dot { background: #e69f00; }
html.pw-cb .tv-opt.right { background: #e1eef7; box-shadow: inset 0 0 0 2px #0072b2; }
html.pw-cb .tv-opt.wrong { background: #fbeee0; box-shadow: inset 0 0 0 2px #d55e00; }
html.pw-cb .quest-list li.done .check, html.pw-cb .quest-list li.done .q-bar span, html.pw-cb .saved-line.on::before { background: #0072b2; }
html.pw-cb .chat-list .who.team { color: #d55e00; }
html.pw-cb .st2 .kb-none .kb-name strong { color: #d55e00; }
/* /PERFECT-SETTINGS */

/* PERFECT-GAPS (November 6): the gaps audit's layout fixes (W:/Crypto/pw2-perfect-notes-20261106/audit/GAPS.md) */
/* the Loop City job and race HUD never floats over an open sheet (audit UI-16) */
body:has(#sheet:not([hidden])) .cj-hud { visibility: hidden; }
/* its notices in the HUD's own font, as the rest of the HUD (sign list 24) */
.cj-hud b, .cj-hud strong { font-family: var(--font-ui); }
/* a room message that waits while a sheet is open (ui/sheet-later.js): Open and Not now */
.sheet-later-no { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: var(--t-md); cursor: pointer; }
@media (pointer: coarse) { .sheet-later-no { min-height: 44px; } }
@media (max-width: 640px), (pointer: coarse) { body.map-docked #rail .sheet-later-no { min-height: 44px; width: 100%; font-size: 11px; } }
/* a dock or toolbar button marked hidden stays hidden (interaction-release.css display:grid !important beat [hidden]; audit CSS-08) */
body.map-docked #app .mobile-toolbar .md-action[hidden], body.map-docked #app .map-dock .md-action[hidden] { display: none !important; }
/* a guest's Sign in joins the phone toolbar as a sixth column (audit SEE-09) */
@media (max-width: 640px), (pointer: coarse) {
  body.map-docked #app .mobile-toolbar:has(.md-signin:not([hidden])) { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
}
.consent.sheet-later { flex-wrap: wrap; padding: 10px 12px; max-width: min(380px, calc(100vw - 24px)); }
.consent.sheet-later p { margin: 0 0 2px; flex: 1 1 100%; }
/* on a wide screen the open sheet covers the rail's middle: while a line waits, the rail moves into the free space left of it */
@media (min-width: 1100px) and (pointer: fine) {
  body:has(#sheet:not([hidden])):has(.rail > .sheet-later) .rail { left: calc((100vw - 680px) / 2); }
}
/* Dead Press lobby: the line shown until the room answers (games/zombies.js) */
.zm-checking { margin: 12px 0; color: var(--muted); font-weight: 600; }
/* /PERFECT-GAPS */
/* PERFECT-PRESS2 (owner, November 6: "the chat in the zombies game made it difficult to play"): the World's chat in a Dead
   Press night (games/zombies-chat.js). The panel opens only on purpose (the chat button, Enter) and sits clear of the
   crosshair, the stick, Fire, Aim, Reload and the ammo: on a computer at the left over the Bills and perks, upright on a phone
   across the top under the buttons, sideways at the top right beside Pause. New lines come in as a small see-through feed in
   a corner that takes no touch, click or key and fades; lines from the people in the night with you, the Printer team or
   naming you stay longer and stronger. */
.zm-feed { position: absolute; left: var(--left); bottom: calc(var(--bottom) + 160px); display: grid; gap: 3px; justify-items: start; max-width: min(380px, 34vw); pointer-events: none; user-select: none; -webkit-user-select: none; }
.zm-feed[hidden] { display: none; }
.zm-fl { margin: 0; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: rgba(20, 23, 28, .42); color: rgba(243, 234, 215, .9); font: 600 12px/1.3 Geist, system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); opacity: .78; transition: opacity .7s; overflow: hidden; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; animation: zm-flin .2s ease-out; }
.zm-fl b { font-weight: 800; color: #f3d98a; margin-right: 1px; white-space: nowrap; }
.zm-fl em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: 1px; padding: 0 4px; border-radius: 3px; background: var(--zm-gold); color: #2a2008; text-shadow: none; }
.zm-fl.keep { opacity: .96; background: rgba(20, 23, 28, .66); box-shadow: inset 2px 0 0 var(--zm-gold); -webkit-line-clamp: 3; line-clamp: 3; }
.zm-fl.mine { opacity: .66; }
.zm-fl.out { opacity: 0; }
@keyframes zm-flin { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .zm-fl { animation: none; transition: none; } }
/* the chat button: a small pill with Enter on a computer (left, under the feed), a round button by Pause on a phone */
.zm-chatbtn { position: absolute; left: var(--left); bottom: calc(var(--bottom) + 118px); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 8px; border-radius: 15px; border: 1px solid rgba(243, 234, 215, .32); background: rgba(20, 23, 28, .55); color: #f3ead7; font: 700 11px Geist, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.zm-chatbtn[hidden] { display: none !important; }
.zm-chatbtn .zm-ic svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.zm-chatbtn kbd { font: 800 10px ui-monospace, 'Courier New', monospace; padding: 1px 5px; border: 0; border-radius: 4px; background: rgba(243, 234, 215, .16); color: inherit; box-shadow: none; }
.zm-chatbtn[aria-expanded="true"] { background: var(--zm-gold); border-color: var(--zm-gold); color: #1d2126; }
.zm-chatbadge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--zm-red); color: #fff; font: 800 10px/16px Geist, system-ui, sans-serif; text-align: center; }
.zm-chatbadge[hidden] { display: none; }
body.zm-on.zm-port .zm-chatbtn { --s: 42px; left: auto; bottom: auto; right: calc(var(--zr) + 52px); top: var(--zt); padding: 0; }
body.zm-on.zm-port .zm-talk { right: calc(var(--zr) + 104px); }
body.zm-on.zm-land .zm-chatbtn { --s: 40px; left: auto; bottom: auto; right: var(--zr); top: calc(var(--zt) + 48px); padding: 0; }
body.zm-on.zm-land .zm-talk { top: calc(var(--zt) + 96px); }
body.zm-on:is(.zm-port, .zm-land) .zm-chatbtn .zm-ic svg { width: calc(var(--s) * .44); height: calc(var(--s) * .44); }
/* the feed on a phone: upright at the left over the ammo (lower on a short screen), never reaching the middle; sideways under the perks, left of the second Fire */
body.zm-on.zm-port .zm-feed { left: var(--zl); bottom: calc(var(--zb) + 304px); max-width: calc(50vw - var(--zl) - 34px); }
@media (max-height: 720px) { body.zm-on.zm-port .zm-feed { bottom: calc(var(--zb) + 242px); } }
body.zm-on.zm-land .zm-feed { left: var(--zl); bottom: auto; top: calc(var(--zt) + 194px); max-width: min(168px, 20vw); max-height: 60px; overflow: hidden; align-content: end; }   /* between the perks and the stick's ring: the newest lines, one line each */
body.zm-on.zm-land .zm-fl { -webkit-line-clamp: 1; line-clamp: 1; }
body.zm-on.zm-land .zm-fl.keep { -webkit-line-clamp: 2; line-clamp: 2; }
body.zm-on.zm-land .zm-fl:nth-last-child(n+3) { display: none; }   /* sideways: the two newest */
body.zm-on:is(.zm-port, .zm-land) .zm-fl { padding: 2px 7px; font-size: 11.5px; }
/* the panel, opened on purpose: a computer at the left over the Bills (the ammo is bottom right); a phone at the top */
body.zm-on.zm-chat #chat.chat { left: var(--left) !important; right: auto !important; top: auto !important; bottom: calc(var(--bottom) + 156px) !important; width: 340px !important; height: auto !important; max-height: 250px !important; }   /* #chat: over the map-docked panel places (an id in their :is() list, and !important) */
body.zm-on.zm-chat.zm-port #chat.chat { top: calc(var(--zt) + 52px) !important; bottom: auto !important; left: var(--zl) !important; right: var(--zr) !important; width: auto !important; height: min(300px, calc(50dvh - var(--zt) - 100px)) !important; max-height: none !important; }
body.zm-on.zm-chat.zm-land #chat.chat { top: var(--zt) !important; bottom: auto !important; left: auto !important; right: calc(var(--zr) + 52px) !important; width: min(340px, 38vw) !important; height: min(170px, calc(100dvh - 240px)) !important; max-height: none !important; }
body.zm-on.zm-chat:is(.zm-port, .zm-land) #chat.chat { background: #f3ead7; }   /* opaque over the HUD while it is open on a phone */
body.zm-on.zm-chat #chat.chat .discord-btn { display: none; }   /* the Discord link waits for the World's own chat (paused) */
body.zm-on.zm-chat.zm-land #chat.chat > .voice-row { display: none; }   /* sideways the lines need the room: Talk is the round button, voice is joined from the World's chat when paused */
body.zm-on.zm-chat.zm-land #chat.chat > .chat-body { height: 100%; flex: 1 1 100%; min-height: 0; }
/* /PERFECT-PRESS2 */

/* PERFECT-SPOTS: a join spot's floating tag (world/spots.js): a place tag with the game's colour as a dot and an edge, gold
   while it starts, quieter while a game is on; the dot breathes while someone waits in it */
#labels .tag.place.spot-tag { --spot: #38d9ff; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; background: rgba(15, 18, 24, .86); color: #fff; box-shadow: inset 0 0 0 2px var(--spot); }
#labels .tag.place.spot-tag::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--spot); box-shadow: 0 0 8px var(--spot); flex: none; }
#labels .tag.place.spot-tag.is-count { color: #ffd86a; background: rgba(40, 28, 4, .92); box-shadow: inset 0 0 0 2px #ffc93a, 0 0 14px rgba(255, 201, 58, .55); }
#labels .tag.place.spot-tag.is-count::before { background: #ffc93a; box-shadow: 0 0 10px #ffc93a; }
#labels .tag.place.spot-tag.is-busy { color: #c9d1da; background: rgba(15, 18, 24, .72); }
@keyframes spot-dot { 50% { transform: scale(1.45); opacity: .7; } }
@media (prefers-reduced-motion: no-preference) {
  #labels .tag.place.spot-tag.is-wait::before { animation: spot-dot 1.4s ease-in-out infinite; }
  #labels .tag.place.spot-tag.is-count::before { animation: spot-dot .6s ease-in-out infinite; }
}
/* /PERFECT-SPOTS */
/* PERFECT-WALK: the launch airdrop section in the dark owner panel (its Rewards tab, ui/admin-perfect.js renderLaunchDrops): the
   number fields read like the panel's other fields instead of white boxes with pale text */
#ctl-pane-launchdrops .ctl-input { background: var(--c-panel-2); color: var(--c-text); border: 1px solid var(--c-line); border-radius: 10px; color-scheme: dark; }
#ctl-pane-launchdrops .owner-launchdrop-row { border-bottom-color: var(--c-line); }
/* /PERFECT-WALK */
/* PERFECT-ONBOARD (owner, November 6: the Daily check-in card covered the launch crate card and the fishing "Bite!" line, and HUD
   toasts and pills stacked over each other at the top of a phone): the top band is one tidy stack (ui/rail.js band). Urgent game
   prompts come first, then the usual lines, the daily check-in card last; it folds to one line (no week, the button beside the
   title) while a prompt, a pill or the tour shows, and always on a phone (the week waits in the Games sheet). The gold card of the
   moment is placed under the band by ui/rail.js. */
#rail > :is(.fish-hud, .game-hud, .arcade-hud, .arcade-banner, .bp-replay, .casino-hud) { order: -1; }
#rail > .ck-card { order: 9; }
#rail > .ck-card.ck-fold { padding: 6px 6px 6px 12px; gap: 8px; }
#rail > .ck-card.ck-fold > .ck-week { display: none; }
#rail > .ck-card.ck-fold small { display: none; }
#rail > .ck-card.ck-fold > .close { width: 30px; height: 30px; }
body.map-docked #rail > .ck-card.ck-fold { grid-template-columns: minmax(0, 1fr) auto 36px; align-items: center; gap: 6px; padding: 5px 4px 5px 10px; }
body.map-docked #rail > .ck-card.ck-fold > div { grid-column: 1; grid-row: 1; }
body.map-docked #rail > .ck-card.ck-fold strong { font-size: 12px; line-height: 1.2; }
body.map-docked #rail > .ck-card.ck-fold > [data-checkin] { grid-column: 2; grid-row: 1; width: auto; min-height: 36px; padding: 0 12px; white-space: nowrap; }
body.map-docked #rail > .ck-card.ck-fold > .close { grid-column: 3; grid-row: 1; align-self: center; width: 36px; height: 36px; }
/* a pill's parts wrap as words on a phone (they broke inside words: "Air / dro / p") and the pill grows to fit */
body.map-docked #rail > .event-pill { height: auto; min-height: 36px; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
body.map-docked #rail > .event-pill > * { flex: 0 1 auto; min-width: 0; overflow-wrap: normal; word-break: normal; }
body.map-docked #rail > .event-pill > strong { white-space: nowrap; }
/* the World Tour guide: a step this player cannot do yet says why (ui/tour.js) */
.tour-step .tour-lock { margin: 4px 0 0; font-size: var(--t-sm); font-weight: 700; color: #8a5a00; }
/* /PERFECT-ONBOARD */
/* PERFECT-ROOMS: a room host's greeting near the screen's edge squeezed into a column a word wide (a fixed box shrinks to the
   room left of its left edge, and the bubble measured itself at that width): it keeps its own width and the page clamps it in */
.room-host-say { width: max-content; }
/* in a Dead Press round on a phone the staff's visits pill sat on the Bills counter (top left): it waits until the round is over */
@media (max-width: 640px), (pointer: coarse) { body.zm-on #visits, body.zm-on.map-docked.sp-hud #visits.door:not([hidden]) { display: none !important; } }
/* /PERFECT-ROOMS */

/* PERFECT-SPEED: a name tag or place label out of view (src/ui.js Labels): the class instead of [hidden], the same display none */
.tag.pw-off { display: none !important; }

/* PERFECT-FIX: the Daily check-in card in the rail steps away while a side sheet is open (the sheet cut it on a computer, and the
   Games sheet shows its own Check in: one at a time); it comes back when the sheet closes (ui/checkin.js, shared/topband.js) */
body:has(#sheet:not([hidden])) #rail > .ck-card { display: none; }
/* a Menu tile's line under its name wraps to two lines on a computer instead of being cut ("Fishing and Go Brrr m..."); the tiles
   sit a little tighter so the whole Menu still fits above the map without scrolling (it overflowed by 9 px before, Settings cut) */
@media (min-width: 641px) and (pointer: fine) {
  body.sp-hud .pm-tile small { white-space: normal; overflow-wrap: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.15; }
  body.sp-hud .pm-tile, body.sp-hud .pm-tile[data-menu="settings"] { row-gap: 1px; padding-top: 6px; padding-bottom: 6px; }
  body.sp-hud .pm-grid { row-gap: 5px; }
}
/* /PERFECT-FIX */

/* PERFECT-FIX: every Owner panel section's own fields read on the dark panel (the Rewards tab's were white boxes with pale text;
   PERFECT-WALK fixed only Launch airdrops). Wholly :where (no weight): only a field nobody styled takes it, and the panel's
   .ctl input rule gives it the panel's light text; a light box with its own field look (Admin's world tools) keeps that look. */
:where(.ctl .ctl-pane) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"]), select, textarea) { background-color: var(--c-panel-2); border: 1px solid var(--c-line); border-radius: 10px; color-scheme: dark; }
:where(.ctl .ctl-pane) :where(input, textarea)::placeholder { color: var(--c-dim); opacity: 1; }
:where(.ctl .ctl-pane) :where(select) option { background: #151a22; color: #eef1f6; }
.ctl .ctl-pane .ctl-input:not(:is(.world-tools, .market-sheet, .supply-order) *) { border-color: var(--c-line); }
.ctl .ctl-pane .ctl-input:not(:is(.world-tools, .market-sheet, .supply-order) *):focus { border-color: var(--c-cobalt); }
/* the launch airdrop list's Test chip sits in its row */
.owner-launchdrop .owner-launchdrop-row .ctl-tag { flex: none; }
/* Your rewards: a Loop City reward closed to this player, and the launch airdrop crates taken (ui/rewards.js) */
.rw .rw-prog.rw-shut header span { white-space: normal; text-align: right; }
.rw .rw-tasks li.shut { opacity: .6; }
.rw .rw-prog p.rw-how { font-weight: 600; opacity: .8; }
.rw .rw-crates small.rw-test { font-weight: 600; opacity: .7; }
/* the New launch card's airdrop line (ui/launchin.js) */
.ln-card small.ln-drop { margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 700; color: #ffd25a; }
/* /PERFECT-FIX */

/* PERFECT-FIX (fix B, audit 5 and 22): the phone's own control settings reach the Dead Press (games/zombies.js touchPad).
   Joystick size: the night's floating stick follows Settings' Small, Medium and Large (--touch-stick-size, ui.js configure),
   Medium as before. Button size: the round buttons and Fire grow or shrink with --touch-btn-scale, each with its offsets, so
   the arc keeps its shape round the thumb. Joystick side: on the right, the stick and the ammo go right and the arc mirrors
   to the left (Pause, Talk and the chat stay up top). A button's word is sized to its circle (--n from wordWidth), so a
   long word in any language stays inside. */
body.zm-on.zm-port { --ss: calc(var(--touch-stick-size, 104px) + 12px); }
body.zm-on.zm-land { --ss: calc(var(--touch-stick-size, 104px) + 8px); }
@media (max-width: 370px) { body.zm-on.zm-port { --ss: min(calc(var(--touch-stick-size, 104px) - 4px), 104px); } }
body.zm-on.zm-port .zm-stick { left: calc(var(--zl) + var(--ss) / 2 + 6px); top: calc(100% - var(--zb) - var(--ss) / 2 - 12px); }
@media (max-width: 370px) { body.zm-on.zm-port .zm-stick { left: calc(var(--zl) + var(--ss) / 2 + 2px); } }
body.zm-on.zm-land .zm-stick { left: calc(var(--zl) + var(--ss) / 2 + 14px); top: calc(100% - var(--zb) - var(--ss) / 2 - 10px); }
body.zm-on:is(.zm-port, .zm-land) .zm-stick i { width: calc(var(--ss) * .41); height: calc(var(--ss) * .41); margin: calc(var(--ss) * -.205) 0 0 calc(var(--ss) * -.205); }
body.zm-on:is(.zm-port, .zm-land) :is(.zm-tb, .zm-fire) { zoom: var(--touch-btn-scale, 1); }
body.zm-on:is(.zm-port, .zm-land) .zm-tb:not(.zm-use) small { font-size: min(9px, calc(var(--s, 50px) / var(--n, 5))); letter-spacing: .03em; max-width: 84%; overflow: hidden; white-space: nowrap; }
body.zm-on:is(.zm-port, .zm-land) .zm-fire small { font-size: min(10px, calc(var(--fs, 80px) * .95 / var(--n, 5))); max-width: 84%; overflow: hidden; white-space: nowrap; }
body.zm-on[data-joystick-side='right']:is(.zm-port, .zm-land) .zm-move { left: auto; right: 0; }
body.zm-on[data-joystick-side='right'].zm-port .zm-stick { left: calc(100% - var(--zr) - var(--ss) / 2 - 6px); }
@media (max-width: 370px) { body.zm-on[data-joystick-side='right'].zm-port .zm-stick { left: calc(100% - var(--zr) - var(--ss) / 2 - 2px); } }
body.zm-on[data-joystick-side='right'].zm-land .zm-stick { left: calc(100% - var(--zr) - var(--ss) / 2 - 14px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-fire { right: auto; left: calc(var(--zl) + 6px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-aim { right: auto; left: calc(var(--zl) + 100px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-reload { right: auto; left: calc(var(--zl) + 92px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-jump { right: auto; left: calc(var(--zl) + 18px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-crouch { right: auto; left: calc(var(--zl) + 172px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-swap { right: auto; left: calc(var(--zl) + 160px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-nade { right: auto; left: calc(var(--zl) + 96px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-knife { right: auto; left: calc(var(--zl) + 22px); }
body.zm-on[data-joystick-side='right'].zm-port .zm-use { right: auto; left: var(--zl); }
body.zm-on[data-joystick-side='right'].zm-port .zm-ammo { left: auto; right: var(--zr); justify-items: end; text-align: right; }
body.zm-on[data-joystick-side='right'].zm-land .zm-fire { right: auto; left: calc(var(--zl) + 16px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-fire2 { left: auto; right: calc(var(--zr) + 170px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-aim { right: auto; left: calc(var(--zl) + 114px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-reload { right: auto; left: calc(var(--zl) + 104px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-jump { right: auto; left: calc(var(--zl) + 30px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-crouch { right: auto; left: calc(var(--zl) + 186px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-swap { right: auto; left: calc(var(--zl) + 172px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-nade { right: auto; left: calc(var(--zl) + 100px); }
body.zm-on[data-joystick-side='right'].zm-land .zm-knife { right: auto; left: calc(var(--zl) + 30px); }
/* the Keys card's line under the keys (audit 4: they are the player's own now) */
.zm-keys-note { margin: 8px 0 0; font-size: var(--t-xs); color: var(--muted); }
/* /PERFECT-FIX (fix B) */
/* PERFECT-SOLO (round four, owner: "the games shouldnt glow like that", and the spots where you walk up to play a game solo easy to
   find and use; world/spots.js): a join spot's tag is still (no glow round it, no breathing dot), gold while a game starts; a solo
   spot's tag is the same dark place tag with the game's colour as a dot: its name and how to start ("Printer Putt: E to play");
   the door prompt at a solo spot shows a play mark (world/places.js adds it) instead of the door */
#labels .tag.place.spot-tag::before { box-shadow: none; }
#labels .tag.place.spot-tag.is-wait::before, #labels .tag.place.spot-tag.is-count::before { animation: none; box-shadow: none; }
#labels .tag.place.spot-tag.is-count { box-shadow: inset 0 0 0 2px #ffc93a; }
#labels .tag.place.solo-tag { --spot: #2f4bff; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; background: rgba(15, 18, 24, .86); color: #fff; box-shadow: inset 0 0 0 2px var(--spot); }
#labels .tag.place.solo-tag::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--spot); flex: none; }
.door-prompt .play-ic { display: none; width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; }
.door-prompt.solo:not(.locked) .play-ic { display: block; }
.door-prompt.solo:not(.locked) .door-ic { display: none !important; }
@media (pointer: coarse) { .door-prompt .play-ic { width: 28px; height: 28px; margin-left: 3px; } }
/* /PERFECT-SOLO */
/* PERFECT-ADS: the in-game ad editor (ui/ad-studio.js), an ad's Visit buttons and the owner's review of ad looks (ui/admin-perfect.js) */
.ads-form { display: grid; gap: 4px; }
.ads-preview { margin: 6px 0 4px; padding: 10px; border-radius: 14px; background: var(--paper-2); }
.ads-preview-canvas { display: block; width: 100%; height: auto; aspect-ratio: 500 / 240; border-radius: 8px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .12); background: #fff; }
.ads-tpls button { min-height: 40px; }
.ads-swatches { flex-wrap: wrap; gap: 6px; }
.ads-swatches button { width: 30px; height: 30px; }
.ads-look-why { min-height: 1.2em; margin: 0 0 4px; color: #b3261e; font-size: 13px; font-weight: 600; }
.ads-look-why:empty { min-height: 0; margin: 0; }
.ads-pic { display: grid; gap: 8px; }
.ads-pics .btn { min-height: 40px; }
.ads-state { margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.ads-state.wait { background: #fff1d1; color: #4d3300; }
.ads-state.bad { background: #fde3e1; color: #8a1c14; }
.ads-mine { display: grid; gap: 8px; margin: 6px 0 14px; padding: 12px; border-radius: 14px; background: var(--paper-2); }
.ads-mine .muted { margin: 0; }
.ads-visit { margin: 10px 0 4px; }
.ads-up { display: grid; gap: 10px; }
.ads-up > li { display: grid; gap: 6px; }
.ads-up-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ads-up-row b { min-width: 0; overflow-wrap: anywhere; }
.ads-up-row .btn { margin-left: auto; }
.px-adx-canvas { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 320 / 154; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); background: #fff; }
@media (pointer: coarse) { .ads-swatches button { width: 36px; height: 36px; } .ads-tpls button, .ads-pics .btn { min-height: 44px; } }
/* /PERFECT-ADS */

/* PERFECT-REVIEW: keep notices readable beside a desktop sheet and make available key slots look actionable. */
.st2 .kb-key.empty { opacity: 1; color: var(--ink); background: var(--paper-2); }
.st2 h3 + .st-line { margin-bottom: 12px; }
@media (min-width: 1001px) and (pointer: fine) {
  body.map-docked #app:has(#sheet:not([hidden])) #rail { left: calc(var(--left) + (100vw - 740px) / 2); max-width: calc(100vw - 740px); }
  body.map-docked #app:has(#sheet:not([hidden])) .brrr-arrow { top: calc(var(--top) + 180px); }
  body.map-docked .brrr-arrow { max-width: 230px; white-space: nowrap; }
}
/* /PERFECT-REVIEW */

/* FV2 (owner, November 8, 2026: "the create account and create wallet create link wallet should be so fucking clean and nice"):
   the welcome screen over the town, one white card with a brand row, two tall ways to play side by side on a computer, a
   calm form, Create account's three steps ticked off, and one line while a wallet or X signs in (ui/welcome.js FV2). */
.fv { background: #0f1830 url('world-front/img/town-blur.webp') center / cover no-repeat; backdrop-filter: none; -webkit-backdrop-filter: none; }
.fv::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: rgba(10, 16, 34, .42); }
.fv .fv-card { position: relative; width: min(472px, 100%); padding: 20px 26px 16px; border-radius: 28px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(15, 24, 48, .05), 0 40px 90px -28px rgba(5, 10, 25, .8); }
.fv[data-path="pick"] .fv-card { width: min(780px, 100%); padding: 22px 28px 16px; }
.fv-brand { display: flex; align-items: center; gap: 10px; min-height: 38px; margin-bottom: 16px; }
.fv-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.fv-brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.fv-dots { display: flex; gap: 6px; margin-left: 8px; }
.fv-dots i { width: 22px; height: 5px; border-radius: 99px; background: #e8e0cf; }
.fv-dots i.on { background: var(--cobalt); }
.fv-back { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 9px; border: 1px solid #e3dac6; border-radius: 99px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fv-back:hover { border-color: #cbbf9f; }
.fv-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fv .fv-head { display: block; margin: 0 0 4px; }
.fv .fv-head h2 { font-size: 27px; line-height: 1.12; letter-spacing: -.028em; }
.fv .fv-head p { margin-top: 7px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.fv[data-path="pick"] .fv-head { text-align: center; }
.fv[data-path="pick"] .fv-head h2 { font-size: 32px; }
.fv[data-path="pick"] .fv-head p { max-width: 520px; margin-inline: auto; }
/* the two ways */
.fv .fv-paths { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.fv .fv-path { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 22px 20px; border: 1px solid #e6dcc7; border-radius: 22px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 30px -20px rgba(15, 24, 48, .4); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.fv .fv-path:hover, .fv .fv-path:focus-visible { transform: translateY(-2px); border-color: #c4ccf7; box-shadow: 0 20px 44px -22px rgba(47, 75, 255, .5); outline: none; }
.fv .fv-path:focus-visible { box-shadow: 0 0 0 4px rgba(47, 75, 255, .22), 0 20px 44px -22px rgba(47, 75, 255, .5); }
.fv .fv-path-rewards { background: #eef1ff; border-color: #d2d9ff; }
.fv .fv-path-icon { width: 50px; height: 50px; border-radius: 15px; align-self: flex-start; background: #f3eee2; }
.fv .fv-path-rewards .fv-path-icon { background: #fff1c9; color: #8a5a00; }
.fv .fv-path-icon svg { width: 26px; height: 26px; }
.fv .fv-path-text { gap: 5px; }
.fv .fv-path-text strong { font-size: 20px; letter-spacing: -.02em; }
.fv .fv-path-lead { font-size: 14.5px; }
.fv .fv-path-points { gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.4; }
.fv .fv-path-points > span { display: flex; gap: 9px; align-items: flex-start; padding-left: 0; }
.fv .fv-path-points span::before { display: none; }
.fv .fv-path-points span { padding-left: 0; }
.fv .fv-path-points svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: #1f9d55; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.fv .fv-path-go { margin-top: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 99px; font-size: 15.5px; background: var(--cobalt); box-shadow: 0 10px 22px -12px rgba(47, 75, 255, .8); }
.fv .fv-path-fun .fv-path-go { background: var(--ink); box-shadow: 0 10px 22px -12px rgba(15, 24, 48, .8); }
.fv .fv-path-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.fv .fv-path:hover .fv-path-go svg { transform: translateX(3px); }
/* the form */
.fv .fv-form .field { margin-top: 18px; }
.fv .fv-form .field > span, .fv .fv-label { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.fv .fv-namebox { gap: 8px; margin-top: 8px; }
.fv .fv-namebox input { min-height: 52px; padding: 0 16px; border: 1px solid #ddd2ba; border-radius: 15px; font-size: 17px; transition: border-color .15s ease, box-shadow .15s ease; }
.fv .fv-namebox input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(47, 75, 255, .16); }
.fv .fv-dice { width: 52px; border: 1px solid #ddd2ba; border-radius: 15px; background: #fff; }
.fv .fv-dice:hover { border-color: #c6b993; }
.fv .fv-hint { margin-top: 6px; font-size: 12.5px; }
.fv .fv-section { margin-top: 16px; }
.fv .fv-looks { gap: 10px; margin-top: 8px; }
.fv .fv-look { width: 80px; padding: 8px 4px 6px; border: 1.5px solid #e6dcc6; border-radius: 16px; background: #fff; transition: border-color .15s ease, transform .15s ease; }
.fv .fv-look:hover { transform: translateY(-1px); }
.fv .fv-look[aria-checked="true"] { border-color: var(--cobalt); background: #f4f6ff; box-shadow: 0 0 0 3px rgba(47, 75, 255, .14); }
.fv .fv-actions { margin-top: 18px; }
.fv .fv-actions .btn, .fv .fv-wait + .actions .btn { min-height: 54px; border-radius: 99px; font-size: 16px; }
.fv .fv-create, .fv .fv-go { background: var(--cobalt); color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(47, 75, 255, .85); }
.fv .fv-go { background: var(--ink); box-shadow: 0 12px 26px -12px rgba(15, 24, 48, .8); }
.fv .fv-create:hover, .fv .fv-go:hover { filter: brightness(1.06); }
.fv .fv-form > .fv-fine { margin-top: 10px; text-align: center; }
.fv .fv-or { margin: 20px 0 10px; font-size: 12.5px; font-weight: 600; color: #7b8496; }
.fv .fv-or::before, .fv .fv-or::after { background: #ece4d3; }
.fv .fv-links { gap: 10px; }
.fv .fv-links .btn { min-height: 50px; gap: 9px; border: 1px solid #ddd2ba; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 6px 16px -12px rgba(15, 24, 48, .45); }
.fv .fv-links .btn:hover { border-color: #c6b993; background: #fffdf8; }
.fv .fv-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fv-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.fv .fv-center { text-align: center; }
.fv .fv-foot { display: flex; justify-content: center; gap: 6px 22px; margin-top: 14px; }
.fv-foot-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.fv-foot-link:hover { color: var(--ink); }
.fv-foot-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fv .fv-load { justify-content: center; margin-top: 10px; border-top-color: #f0e9da; }
.fv-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 24px 0 8px; text-align: center; }
.fv-spin { width: 42px; height: 42px; border: 3px solid #dfe4ff; border-top-color: var(--cobalt); border-radius: 50%; animation: fvspin .8s linear infinite; }
.fv-wait .sign-in { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.fv-wait .sign-in > :not(.status) { display: none !important; }
.fv-wait .status { margin: 0; min-height: 1.4em; color: var(--ink); font-weight: 600; }
@keyframes fvspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fv-spin { animation-duration: 2.4s; } .fv .fv-path, .fv .fv-look { transition: none; } }
@media (max-width: 640px) {
  .fv .fv-card, .fv[data-path="pick"] .fv-card { padding: 16px 18px 12px; border-radius: 24px; }
  .fv .fv-paths { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .fv .fv-path { padding: 18px; gap: 12px; }
  .fv .fv-head h2, .fv[data-path="pick"] .fv-head h2 { font-size: 24px; }
  .fv .fv-head p { font-size: 14.5px; }
  .fv-brand { margin-bottom: 12px; }
}
@media (max-width: 420px) { .fv .fv-links { grid-template-columns: 1fr; } }

/* FV2: the wallet picker in the welcome's language: one white card, big wallet rows with a chevron, a quiet Cancel */
.world-wallet-picker { width: min(420px, calc(100vw - 32px)); padding: 26px 24px 20px; border: 0; border-radius: 26px; background: var(--paper); color: var(--ink, #16213a); box-shadow: 0 0 0 1px rgba(15, 24, 48, .06), 0 40px 90px -28px rgba(5, 10, 25, .8); }
.world-wallet-picker::backdrop { background: rgba(10, 16, 34, .58); }
.world-wallet-picker h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.025em; }
.world-wallet-note { margin: 0 0 18px; color: var(--muted, #4b586c); font-size: 14px; line-height: 1.45; }
.world-wallet-options { gap: 10px; margin-bottom: 14px; }
.world-wallet-options button, .world-wallet-options a { position: relative; min-height: 60px; padding: 10px 44px 10px 14px; border: 1px solid #e6dcc7; border-radius: 16px; background: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 8px 20px -16px rgba(15, 24, 48, .5); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.world-wallet-options button::after, .world-wallet-options a::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #8a92a3; border-right: 2px solid #8a92a3; transform: translateY(-50%) rotate(45deg); }
.world-wallet-options button:hover, .world-wallet-options a:hover { border-color: #b9c3ff; transform: translateY(-1px); box-shadow: 0 14px 28px -18px rgba(47, 75, 255, .55); }
.world-wallet-options img { width: 34px; height: 34px; border-radius: 10px; }
.world-wallet-options p { margin: 0; padding: 14px 16px; border-radius: 16px; background: #f3f5ff; border: 1px solid #dfe4ff; color: #3d4a63; font-size: 14px; line-height: 1.5; }
.world-wallet-picker > button { width: 100%; justify-content: center; min-height: 50px; border: 1px solid #e3dac6; border-radius: 99px; background: #fff; color: var(--ink, #16213a); font-weight: 700; }
.world-wallet-picker > button:hover { border-color: #cbbf9f; }

/* GUIDE PANEL (ui/guide-panel.js): the player guide over the game, a big window on a computer, the whole screen on a phone */
.guide-panel { width: min(1240px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 24px; overflow: hidden; display: none; flex-direction: column; background: #0f1830; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
.guide-panel[open] { display: flex; }
.guide-panel::backdrop { background: rgba(10, 16, 34, .55); }
.guide-panel.gp-lite { width: 100vw; height: 100dvh; border-radius: 0; }
.guide-panel.gp-lite::backdrop { background: #0f1830; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.pw-guide-cover #scene { visibility: hidden; }
.gp-head { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 10px 8px 18px; color: #fff; background: var(--ink); }
.gp-title { font-size: 16px; white-space: nowrap; }
.gp-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #26344f; border: 1px solid rgba(255, 255, 255, .12); }
.gp-tab { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: rgba(255, 255, 255, .8); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.gp-tab[aria-selected="true"] { color: #16213a; background: #fff; }
.gp-out { margin-left: auto; color: rgba(255, 255, 255, .8); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gp-out:hover { color: #fff; text-decoration: underline; }
.gp-x { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #34425e; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.gp-x[hidden] { display: none; }
.gp-x:hover { background: #465578; }
.gp-content { position: relative; flex: 1; min-height: 0; background: #fffdf8; }
.gp-frame { display: block; width: 100%; height: 100%; border: 0; }
.gp-frame[data-waiting] { visibility: hidden; }
.gp-status { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: var(--ink); }
.gp-status[hidden] { display: none; }
.gp-status p { margin: 0; }
.gp-status button { min-height: 44px; }
:is(.gp-head, .gp-status, .gd-box, .fv-account-action, .pm-panel) button:enabled:active { filter: brightness(.89); }
@media (max-width: 700px) {
  .guide-panel { width: 100vw; height: 100dvh; border-radius: 0; }
  .gp-head { gap: 8px; padding: max(8px, env(safe-area-inset-top)) 8px 8px 12px; }
  .gp-title, .gp-out { display: none; }
  .gp-tabs { flex: 1; min-width: 0; }
  .gp-tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 3px 5px; font-size: 13px; line-height: 1.1; white-space: normal; }
  .gp-x { min-width: 44px; min-height: 44px; }
}

/* FIRST STEPS (ui/first-steps.js): a new player's first moment in town is one thing at a time. While body.pw-first is on, the
   extras wait (event pills and banners, Go Brrr, the Menu's dot, the World Tour pill, the rail's tips and the terms line), then
   fade in once the player has chosen. The welcome card: hello by name, this device's controls, the World Tour as the way in. */
body.pw-first .brrr-arrow, body.pw-first .game-hud, body.pw-first .menu-dot, body.pw-first .tour-pill, body.pw-first .brrr-entry,
body.pw-first #rail > .ck-card, body.pw-first #rail #toast, body.pw-first #rail .consent, body.pw-first #rail .arcade-feed, body.pw-first .map-dock .dot { visibility: hidden !important; opacity: 0 !important; }
.brrr-arrow, .game-hud, .tour-pill, .brrr-entry { transition: opacity .45s ease; }
.fs-card { position: fixed; left: max(24px, var(--safe-l, 0px)); top: 50%; z-index: 36; width: min(468px, calc(100vw - 24px)); padding: 20px 22px 18px; border-radius: 24px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(15, 24, 48, .06), 0 30px 70px -24px rgba(5, 10, 25, .65);
  opacity: 0; transform: translate(-16px, -50%); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.fs-card.in { opacity: 1; transform: translate(0, -50%); }
.fs-card.out { opacity: 0; transform: translate(-12px, -50%); pointer-events: none; }
.fs-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.fs-card h2 { margin: 4px 0 12px; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.fs-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.fs-keys li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.3; color: #3d4a63; }
.fs-keys-k { display: inline-flex; gap: 3px; flex: none; }
.fs-keys kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid #ddd2ba; border-bottom-width: 2px; border-radius: 7px; background: #fff; font: 700 11.5px/1 inherit; color: var(--ink); }
.fs-touch { grid-template-columns: 1fr; }
.fs-stick, .fs-map { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c9c0aa; background: radial-gradient(circle at 50% 50%, #e9e2d0 0 34%, transparent 36%); }
.fs-map { border-color: #9fb4ff; background: radial-gradient(circle at 50% 50%, #2f4bff 0 18%, #dfe6ff 20%); }
.fs-jump { display: grid; place-items: center; min-width: 44px; height: 26px; padding: 0 8px; border-radius: 99px; border: 2px solid #c9c0aa; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); }
.fs-tour { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #fff6dc; border: 1px solid #f1dfa6; }
.fs-tour .tour-cap { flex: none; margin-top: 2px; }
.fs-tour p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #4a3d1c; }
.fs-tour strong { color: var(--ink); }
.fs-next { font-weight: 600; }
.fs-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-top: 14px; }
.fs-actions .btn { justify-content: center; min-height: 48px; border-radius: 99px; font-size: 15px; }
.fs-go { color: #fff; border: 0; background: var(--cobalt); box-shadow: 0 12px 24px -12px rgba(47, 75, 255, .85); }
.fs-go:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  .fs-card { left: 50%; top: calc(var(--safe-t, 0px) + 200px); padding: 14px 16px 12px; border-radius: 20px; transform: translate(-50%, -10px); }
  .fs-card h2 { font-size: 20px; margin: 2px 0 8px; }
  .fs-keys { gap: 5px; margin-bottom: 10px; }
  .fs-tour { padding: 10px 12px; }
  .fs-actions { grid-template-columns: 1.25fr 1fr; margin-top: 10px; }
  .fs-actions .btn { font-size: 14px; padding: 0 10px; }
  .fs-card.in { transform: translate(-50%, 0); }
  .fs-card.out { transform: translate(-50%, -8px); }
  .fs-actions .btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .fs-card { transition: opacity .2s ease; } }

/* FIRST STEPS: the first screen on a phone shows both ways to play without scrolling: icon beside the title, tighter cards */
@media (max-width: 640px) {
  .fv[data-path="pick"] .fv-head h2 { font-size: 23px; }
  .fv[data-path="pick"] .fv-head p { font-size: 13.5px; line-height: 1.4; }
  .fv .fv-paths { gap: 10px; margin-top: 12px; }
  .fv .fv-path { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; padding: 14px 14px 12px; border-radius: 18px; }
  .fv .fv-path-icon { width: 42px; height: 42px; border-radius: 13px; }
  .fv .fv-path-icon svg { width: 22px; height: 22px; }
  .fv .fv-path-text strong { font-size: 18px; }
  .fv .fv-path-lead { font-size: 13.5px; }
  .fv .fv-path-points { margin-top: 6px; gap: 4px; font-size: 13px; }
  .fv .fv-path-go { grid-column: 1 / -1; min-height: 46px; margin-top: 8px; }
  .fv-brand { margin-bottom: 8px; }
  .fv .fv-foot { margin-top: 6px; }
}
.fv .fv-terms { margin-top: 6px; text-align: center; }
.fv .fv-terms .linkish { padding: 0; border: 0; background: none; color: var(--cobalt-ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* GUIDE NPC (games/guide-npc.js): Lil Printer's dialogue box, beside your character on a computer (left, middle), under the round map
   on a phone; Lil Printer's face, the full line, the answers as pills. Skip the intro sits in its corner. */
.gd-box { position: fixed; left: max(24px, var(--safe-l, 0px)); top: 50%; z-index: 62; width: min(440px, calc(100vw - 24px)); padding: 16px 18px 16px; border-radius: 24px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(15, 24, 48, .06), 0 30px 70px -24px rgba(5, 10, 25, .65);
  opacity: 0; transform: translate(-14px, -50%); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.gd-box.in { opacity: 1; transform: translate(0, -50%); }
.gd-box[hidden] { display: none; }
.gd-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.gd-head strong { display: block; font-size: 16px; line-height: 1.1; }
.gd-head small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cobalt); }
.gd-face { flex: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: #ede4d2 url('./home-assets/assets/crew.png') center / 40px no-repeat; }
.gd-skip { margin-left: auto; min-height: 44px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gd-skip[hidden] { display: none; }
.gd-line { margin: 0; min-height: 3em; font-size: 16.5px; line-height: 1.5; color: var(--ink); cursor: default; }
.gd-status { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--cobalt-ink); }
.gd-status:empty { display: none; }
.gd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gd-acts:empty { display: none; }
.gd-acts .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; border-radius: 99px; font-size: 15px; }
.gd-acts .gd-main { color: #fff; border: 0; background: var(--cobalt); box-shadow: 0 12px 24px -12px rgba(47, 75, 255, .85); }
.gd-acts.gd-choice .btn { flex: 1 1 42%; border-radius: 12px; }
.gd-acts .gd-main:hover { filter: brightness(1.06); }
.guide-near.say { background: #fff; color: var(--ink); }
body:has(.gd-box.in) .room-host-say, body:has(.gd-box.in) .granny-near:not(.guide-near) { display: none !important; }   /* while Lil Printer talks, other characters wait their turn */
@media (max-width: 640px) {
  .gd-box { left: 50%; top: calc(var(--safe-t, 0px) + 200px); padding: 14px 15px 14px; border-radius: 20px; transform: translate(-50%, -10px); }
  .gd-box.in { transform: translate(-50%, 0); }
  .gd-line { font-size: 15.5px; min-height: 2.6em; }
  .gd-acts .btn { min-height: 46px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .gd-box { transition: opacity .2s ease; } }

/* WELCOME GIFT (games/guide-npc.js printGift): a little printer in Lil Printer's box prints the bill while the room books it */
.gd-printer { position: relative; height: 104px; margin: 12px 0 2px; border-radius: 16px; overflow: hidden; background: #eef1ff; border: 1px solid #dfe4ff; }
.gd-slot { position: absolute; left: 50%; top: 10px; width: 180px; height: 14px; margin-left: -90px; border-radius: 7px; background: #1f2a4a; z-index: 2; }
.gd-bill { position: absolute; left: 50%; top: 17px; width: 160px; height: 76px; margin-left: -80px; display: grid; place-content: center; gap: 2px; text-align: center; border-radius: 6px;
  background: #fff4d0; border: 2px solid #a76a00; box-shadow: 0 8px 16px -10px rgba(15, 24, 48, .5);
  transform: translateY(-100%); z-index: 1; }
.gd-bill strong { font-size: 20px; letter-spacing: -.01em; color: #684505; }
.gd-bill small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3d4a63; }
.gd-printer.printing .gd-bill { animation: gdprint 1.5s steps(9, end) forwards; }
.gd-printer.done .gd-bill { transform: translateY(0); animation: gdpop .45s ease; }
@keyframes gdprint { to { transform: translateY(0); } }
@keyframes gdpop { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(0) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .gd-printer.printing .gd-bill, .gd-printer.done .gd-bill { animation: none; transform: translateY(0); } }

/* A single entry action. Lil Printer presents the play options in town. */
.fv-account-action { margin-top: 14px; }
.fv .fv-account { width: 100%; min-height: 52px; border-radius: 12px; background: var(--cobalt); font-size: 16px; box-shadow: none; }
.fv-account-action p { margin: 8px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.fv[data-path='one'] .fv-terms { margin-top: 10px; text-align: center; }
@media (max-width: 420px) {
  .fv[data-path="one"] .fv-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fv[data-path="one"] .fv-links .btn { min-height: 44px; padding-inline: 7px; font-size: 13px; gap: 5px; white-space: normal; }
  .fv[data-path="one"] .fv-looks { margin-top: 6px; }
  .fv[data-path="one"] .fv-look img { width: 48px; height: 60px; }
  .fv[data-path="one"] .fv-or { margin: 14px 0 8px; }
  .fv[data-path="one"] .fv-foot { margin-top: 6px; }
  .fv[data-path="one"] .fv-load { margin-top: 4px; }
}

/* ONE SCREEN on a computer: a wide card, who you are on the left, how you play on the right */
@media (min-width: 900px) and (min-height: 560px) {
  .fv[data-path='one'] .fv-card { width: min(860px, calc(100vw - 48px)); padding: 24px 32px 16px; }
  .fv-form.fv-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .fv-form.fv-one .fv-account-action { margin-top: 0; }
  .fv-form.fv-one .fv-col + .fv-col { padding-top: 26px; }
}

/* The Menu shares one layout at every viewport. Only its middle scrolls. */
#pw-menu.pm-panel { display: flex; flex-direction: column; gap: 0; width: min(380px, calc(100vw - var(--left) - var(--right))); padding: 0; overflow: hidden; }
#pw-menu .pm-head { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 52px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--line); font-size: 18px; }
#pw-menu .pm-head .close { position: static; float: none; width: 44px; height: 44px; margin: 0; }
#pw-menu .pm-trial { flex: none; min-height: 44px; }
#pw-menu .pm-grid { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 12px 12px; }
#pw-menu .pm-group + .pm-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#pw-menu .pm-group h3 { margin: 0 0 5px 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
#pw-menu .pm-list, #pw-menu .pm-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#pw-menu .pm-footer { flex: none; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--paper); }
#pw-menu .pm-footer:has([data-menu="sign-in"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pw-menu .pm-tile { grid-column: auto; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto; grid-auto-flow: row; align-content: normal; align-items: center; justify-items: stretch; min-height: 44px; gap: 7px; padding: 5px 7px; border: 0; border-radius: 8px; background: var(--paper-2); color: var(--ink); text-align: left; }
#pw-menu .pm-tile .pm-ic { grid-column: 1; grid-row: auto; width: 26px; height: 26px; background: transparent; box-shadow: none; }
#pw-menu .pm-ic svg { width: 20px; height: 20px; }
#pw-menu .pm-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
#pw-menu .pm-caption strong { align-self: stretch; font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
#pw-menu .pm-caption small { display: block; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pw-menu .pm-caption .pm-gift-mark { max-width: 100%; padding: 2px 5px; border-radius: 4px; background: #f9eac3; color: #623e14; font-weight: 700; white-space: normal; }
#pw-menu .pm-tile:hover, #pw-menu .pm-tile:active { background: var(--paper-3); transform: none; }
#pw-menu .pm-tile[data-menu="sign-in"] { background: var(--cobalt); color: #fff; }
#pw-menu :is(button, a):focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
#pw-menu .pm-tile[data-menu="sign-in"]:focus-visible { outline-color: #fff; }
body.sp-menu-open :is(#link-wallet, .md-signin, .touch, .touch .joy, .touch .jump) { visibility: hidden; }
@media (max-width: 360px) {
  #pw-menu .pm-footer:has([data-menu="sign-in"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pw-menu .pm-tile[data-menu="sign-in"] { grid-column: 1 / -1; }
}