/* fonts are served from vendor/fonts, not Google (Google got every visitor's IP: GDPR) */
@font-face { font-family: 'Fredoka'; font-weight: 500; font-style: normal; font-display: swap; src: url(vendor/fonts/Fredoka-500.ttf) format('truetype'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-style: normal; font-display: swap; src: url(vendor/fonts/Fredoka-600.ttf) format('truetype'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-style: normal; font-display: swap; src: url(vendor/fonts/Fredoka-700.ttf) format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: normal; font-display: swap; src: url(vendor/fonts/Nunito-400.ttf) format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-style: normal; font-display: swap; src: url(vendor/fonts/Nunito-600.ttf) format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; font-display: swap; src: url(vendor/fonts/Nunito-700.ttf) format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-style: normal; font-display: swap; src: url(vendor/fonts/Nunito-800.ttf) format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-style: normal; font-display: swap; src: url(vendor/fonts/Nunito-900.ttf) format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 400; font-style: normal; font-display: swap; src: url(vendor/fonts/SourceSans3-400.ttf) format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 600; font-style: normal; font-display: swap; src: url(vendor/fonts/SourceSans3-600.ttf) format('truetype'); }
@font-face { font-family: 'Source Sans 3'; font-weight: 700; font-style: normal; font-display: swap; src: url(vendor/fonts/SourceSans3-700.ttf) format('truetype'); }

:root, [data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --raised: #f1f1ef;
  --hover: #e7e7e4;
  --line: #e4e4e0;
  --text: #121214;
  --muted: #5c5c64;
  --logo-back: #121214;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.07);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0b0b0d;
  --surface: #151518;
  --raised: #1e1f23;
  --hover: #28292e;
  --line: #26272c;
  --text: #f4f4f2;
  --muted: #a1a2a9;
  --logo-back: #f4f4f2;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark;
}
/* Classic look (a switch next to Light / Dark): the old blocky-site style. Blue top bar, flat boxes with thin borders, square corners */
[data-classic] {
  --bg: #e3e3e3; --surface: #ffffff; --raised: #f2f2f2; --hover: #e0e0e0; --line: #c3c3c3; --text: #343434; --muted: #6d6d6d;
  --logo-back: #ffffff; --shadow: none; --accent: #02b757; --accent-d: #029f4c; --r: 2px; --cbar: #2571d6; --cblue: #2571d6;
  --display: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif;
}
[data-classic][data-theme="dark"] {
  --bg: #1b1b1d; --surface: #26272a; --raised: #2f3033; --hover: #3a3b3f; --line: #3f4044; --text: #ececec; --muted: #a8a9ae;
  --cbar: #1e4a8f; --cblue: #4a90e2;
}
:root {
  --accent: #1f9d55;
  --accent-d: #178547;
  --r: 8px;
  --display: Fredoka, Nunito, system-ui, sans-serif;
  --body: Nunito, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ov: rgba(22, 23, 26, .88);
  --ov-line: rgba(255, 255, 255, .14);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 16px/1.5 var(--body); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
/* Playbrix cursor everywhere: white arrow, green over things you can click */
html, body, #view, canvas { cursor: url('icons/cursor.svg') 4 3, auto; }
a, button, label, select, summary, [role="button"], .item, .tab, .seg > *, .prompt { cursor: url('icons/cursor-hand.svg') 4 3, pointer !important; }
input[type="range"] { cursor: url('icons/cursor-hand.svg') 4 3, pointer; }
input:not([type="range"]), textarea { cursor: text; }
button { font: inherit; color: inherit; }
/* while the camera turns (right-drag) the real mouse is locked and hidden: this copy stays where it was */
#fake-cursor { position: fixed; z-index: 60; width: 22px; height: 22px; margin: -3px 0 0 -4px; pointer-events: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .2s var(--ease), outline-offset .2s var(--ease); }
body.mouse-nav :focus-visible { outline-color: transparent; outline-offset: 0; } /* the ring is for Tab users, not after a click or Esc */
/* menus: colors and borders ease instead of snapping (specific rules below can still set their own) */
button, a, .item, .person { transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease), box-shadow .22s var(--ease); }
/* phones: no double-tap-zoom wait on anything you press (touch-action is not inherited into scroll boxes) */
body.touch :is(button, a, label, input, select, textarea, [role="button"], .item, .pic) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.logo-back { fill: var(--logo-back); }
body.free-mouse #view { cursor: none; }
body.aim-ready #view { cursor: crosshair; }

/* ---------- auth ---------- */
#auth { position: fixed; inset: 0; background: #16171a; }
.auth-art { position: absolute; inset: 0; overflow: hidden; background: #16171a; }
.auth-art .collage { position: absolute; inset: -10% -20%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; transform: rotate(-8deg); }
.auth-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; opacity: .85; }
.auth-art .tag { position: absolute; left: 40px; bottom: 40px; color: #fff; max-width: 420px; background: rgba(22,23,26,.88); padding: 22px 24px; border-radius: 12px; }
.auth-art .tag h2 { font-size: 30px; margin-bottom: 4px; }
.auth-art .tag p { color: rgba(255,255,255,.75); }
.auth-side { position: relative; height: 100%; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 22px; background: var(--bg); padding: 32px; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.auth-card .logo { font-size: 30px; }
.auth-card .logo svg { width: 36px; height: 36px; }
.auth-tabs { display: flex; background: var(--raised); border-radius: var(--r); padding: 4px; }
.auth-tabs button { flex: 1; border: 0; background: none; padding: 9px 0; border-radius: 6px; font-weight: 800; color: var(--muted); }
.auth-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
#auth-form { display: flex; flex-direction: column; gap: 14px; }
#auth-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 14px; color: var(--muted); }
#auth-form input:not([type=checkbox]) { font-size: 16px; height: 46px; } /* the 46px text-box height made the Terms checkbox a tall grey bar */
.auth-hint { font-size: 13px; color: var(--muted); margin-top: -6px; }
.auth-hint:empty, .auth-err:empty { display: none; }
.auth-err { color: #d03a3a; font-weight: 700; font-size: 14px; }
.auth-foot { font-size: 13px; color: var(--muted); }
.auth-foot a, .agree a { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
#auth[data-mode="login"] .signup-only { display: none; }
.agree { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 600 !important; color: var(--text) !important; }
.agree input { width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 4px; accent-color: var(--accent); flex: none; } /* not the text-box padding */
#code-form { display: flex; flex-direction: column; gap: 14px; }
.code-input { font: 600 30px var(--display) !important; letter-spacing: .3em; text-align: center; height: 62px; }
.code-links { display: flex; justify-content: space-between; }
.link { border: 0; background: none; color: var(--accent); font-weight: 800; padding: 4px 0; }
.btn.big { height: 48px; font-size: 17px; }

/* ---------- shell ---------- */
#hub { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
#hub[data-page="avatar"] { background: transparent; }
.topbar { display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 16px 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.logo { font: 700 23px/1 var(--display); display: flex; align-items: center; gap: 9px; }
.logo svg { width: 28px; height: 28px; }
.search { flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; height: 38px; color: var(--muted); }
.search:focus-within { border-color: var(--muted); }
.search svg { width: 17px; height: 17px; flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; padding: 0; height: 100%; font-size: 15px; color: var(--text); }
.search input:focus { outline: none; }
.top-right { display: flex; align-items: center; gap: 8px; }
.me { display: flex; align-items: center; gap: 10px; font-weight: 800; padding: 4px 10px 4px 4px; border-radius: 999px; }
.me:hover { background: var(--raised); }
.me img { width: 32px; height: 32px; border-radius: 50%; background: var(--raised); }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: var(--r); background: none; display: grid; place-items: center; color: var(--text); }
.icon-btn:hover { background: var(--raised); }
.icon-btn svg { width: 22px; height: 22px; }
.gear-wrap { position: relative; }
.dropdown { position: absolute; right: 0; top: 46px; z-index: 20; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.dropdown a, .dropdown button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 6px; font-weight: 700; font-size: 15px; }
.dropdown a:hover, .dropdown button:hover { background: var(--raised); }

.hub-body { flex: 1; display: flex; min-height: 0; }
.side { width: 220px; flex: none; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--bg); }
.side a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r); font-weight: 800; font-size: 15px; color: var(--muted); transition: background .15s, color .15s; }
.side a svg { width: 21px; height: 21px; }
.side a:hover { color: var(--text); background: var(--raised); }
.side a.on { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.side .side-me { color: var(--text); margin-bottom: 8px; padding-bottom: 14px; border-radius: 0; border-bottom: 1px solid var(--line); }
.side .side-me:hover { background: none; }
.side-me img { width: 34px; height: 34px; border-radius: 50%; background: var(--raised); }
#page { flex: 1; overflow-y: auto; padding: 22px 36px 64px 20px; }
#hub[data-page="avatar"] #page { overflow: hidden; display: flex; }

h1 { font: 600 32px/1.15 var(--display); }
h2 { font: 600 21px/1.2 var(--display); }
h3 { font-size: 14px; font-weight: 800; color: var(--muted); }
.page-title { margin-bottom: 20px; }
.muted { color: var(--muted); }

/* ---------- rows + tiles ---------- */
.row { margin-bottom: 34px; }
.row-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.row-head .count { color: var(--muted); }
.row-head h2 { white-space: nowrap; min-width: 0; } /* "Friends 1 (0 online)" stays on one line on phones */
@media (max-width: 420px) { .row-head h2 .count { font-size: .8em; } }
.tiles { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 8px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 22px 16px; }
.tile { width: 176px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.tile-grid .tile { width: auto; }
.tile-img { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--raised); transition: transform .2s var(--ease); }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover .tile-img { transform: translateY(-3px); }
.tile-title { font-weight: 800; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { display: flex; gap: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tile-meta span { display: flex; align-items: center; gap: 4px; }
.tile-meta svg { width: 14px; height: 14px; }
.tile-meta .active.on { color: var(--accent); }

.friends { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 4px; }
.friend { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; flex: none; font-size: 14px; font-weight: 800; text-align: center; line-height: 1.25; }
.friend .ring { position: relative; width: 84px; height: 84px; }
.friend .pic { width: 84px; height: 84px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; overflow: hidden; }
.friend .pic img { width: 100%; height: 100%; }
.friend .pic svg { width: 28px; height: 28px; color: var(--muted); }
.friend .dot { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: #2fbf6a; border: 3px solid var(--bg); }
.friend .where { font-size: 12px; color: var(--accent); font-weight: 800; }

.empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; color: var(--muted); margin-bottom: 28px; }

/* ---------- game page ---------- */
.gp-top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 28px; margin-bottom: 26px; }
.gp-media { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--raised); }
.gp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-info { display: flex; flex-direction: column; gap: 8px; }
.gp-info h1 { font-size: 34px; }
.by { color: var(--muted); font-weight: 700; }
.by a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.facts { color: var(--muted); font-size: 15px; font-weight: 600; }
.play-big { margin-top: auto; height: 64px; border: 0; border-radius: var(--r); background: var(--accent); color: #fff; display: grid; place-items: center; transition: background .15s, transform .1s; }
.play-big:hover { background: var(--accent-d); }
.play-big:active { transform: scale(.98); }
.play-big svg { width: 34px; height: 34px; }
.votes { display: flex; gap: 8px; }
.vote { height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--muted); transition: color .15s, border-color .15s; }
.vote.fav { flex: 1; }
.vote svg { width: 18px; height: 18px; }
.vote:hover { color: var(--text); border-color: var(--muted); }
.vote.on { color: var(--text); border-color: var(--text); }
.vote.on.fav svg { fill: #f2b631; stroke: #c98f00; }
.vote.on[data-v="1"] svg { color: var(--accent); }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button { background: none; border: 0; padding: 10px 0; font-weight: 800; font-size: 16px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--text); border-color: var(--text); }
.about { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: 28px; margin-bottom: 26px; }
.about p { line-height: 1.65; max-width: 64ch; }
.about h2 { margin-bottom: 8px; font-size: 18px; }
.stats { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 34px; }
.stat { padding: 14px 22px; display: flex; flex-direction: column; min-width: 120px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat span { font-size: 13px; color: var(--muted); font-weight: 800; }
.stat b { font: 600 20px var(--display); font-variant-numeric: tabular-nums; }

/* ---------- avatar editor ---------- */
.av-stage { flex: 1; min-width: 0; position: relative; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.av-stage:active { cursor: grabbing; }
.av-stage .hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: var(--muted); background: var(--surface); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; }
.av-stage .page-title { position: absolute; left: 0; top: 0; }
.catalog { width: min(560px, 50%); flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cat-tabs { position: relative; display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cat-tabs button { border: 0; background: none; padding: 10px 12px 12px; font-weight: 800; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color .2s; }
.cat-tabs button:hover { color: var(--text); }
.cat-tabs button.on { color: var(--text); }
.cat-ink { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); pointer-events: none; }
.cat-ink.ready { transition: transform .28s var(--ease), width .28s var(--ease); }
.cat-body.swap > * { animation: rise .3s var(--ease) backwards; }
.cat-body.swap > :nth-child(2) { animation-delay: .04s; }
.cat-body.swap > :nth-child(n+3) { animation-delay: .08s; }
.item .thumb img { transition: opacity .25s; }
.item .thumb img.wait { opacity: 0; }
#hub[data-page="avatar"] #page > .catalog { animation: none; } /* category names stay put; only the items fade in */
.cat-body { flex: 1; overflow-y: auto; padding: 16px; }
.cat-body h3 { margin: 6px 0 10px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; margin-bottom: 18px; }
.item:active { transform: scale(.97); }
.item { position: relative; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); padding: 6px; display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 13px; font-weight: 800; line-height: 1.2; transition: border-color .15s, transform .1s; }
.item:hover { border-color: var(--muted); }
.item.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.item.on::after { content: '✓'; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; display: grid; place-items: center; }
.item .thumb { aspect-ratio: 1; border-radius: 6px; background: var(--raised); overflow: hidden; display: grid; place-items: center; }
.item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.item .thumb svg { width: 28px; height: 28px; color: var(--muted); }
.item span { padding: 2px 2px 4px; }
.colors { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); transition: transform .12s; }
.sw:hover { transform: scale(1.08); }
.sw.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }

/* ---------- profile ---------- */
.prof-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.prof-card > img { width: 128px; height: 128px; border-radius: 50%; background: var(--raised); flex: none; }
.prof-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.prof-id .name-row { display: flex; align-items: center; gap: 8px; }
.prof-id h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verified { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; margin-left: 0.25em; }
.prof-id h1 + .verified { width: 26px; height: 26px; margin: 0; }
.prof-id .handle { color: var(--muted); font-weight: 700; }
.prof-counts { display: flex; gap: 26px; margin-top: 10px; }
.prof-counts div { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); font-weight: 800; }
.prof-counts b { font: 600 20px var(--display); color: var(--text); }
.name-edit { display: flex; gap: 8px; align-items: center; }
.name-edit input { font: 600 24px var(--display); padding: 4px 10px; width: 260px; }
.wearing { display: grid; grid-template-columns: 300px 1fr; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 22px; }
.wearing .body { background: var(--bg); border-radius: var(--r); aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; }
.wearing .body img { width: 100%; height: 100%; object-fit: contain; }
.wearing .items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-content: start; margin: 0; }

/* ---------- settings page ---------- */
.settings-page { max-width: 720px; }
.set-section { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 20px; margin-bottom: 18px; }
.set-section h2 { font-size: 18px; padding: 14px 0 6px; }
.set { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 800; }
.set + .set { border-top: 1px solid var(--line); }
.set .sub { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.set.dim .range { opacity: .45; }
.set-note { font-size: 13px; margin: 6px 0 0; }
.seg { display: flex; background: var(--raised); border-radius: var(--r); padding: 3px; flex: none; }
.seg button { border: 0; background: none; padding: 6px 16px; border-radius: 6px; font-weight: 800; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.range { display: flex; align-items: center; gap: 12px; }
.range input { width: 200px; padding: 0; accent-color: var(--accent); background: none; border: 0; }
.range b { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

input { font: 16px var(--body); padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
input:focus { outline: none; border-color: var(--muted); }

.btn { font-weight: 800; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 20px; background: var(--surface); color: var(--text); transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-d); }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: default; }

/* ---------- in game ---------- */
#game-ui { position: fixed; inset: 0; pointer-events: none; color: #fff; }
#game-ui button, #menu, #overlay, #loading, #chat input { pointer-events: auto; }
#hud { position: absolute; inset: 0; }
.hud-top { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-big { font: 700 44px/1.1 var(--display); text-shadow: 0 2px 10px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.hud-small { font-size: 15px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hud-small.warn { color: #ffb08a; }
.hud-corner { position: absolute; top: 72px; left: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.chip { background: var(--ov); padding: 6px 12px; border-radius: var(--r); font-weight: 800; font-size: 15px; }
.bar { width: 260px; height: 6px; background: rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; margin: 10px auto 0; }
.bar > i { display: block; height: 100%; background: var(--accent); width: 0; }
#topleft { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
#topleft button { width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--ov); display: grid; place-items: center; color: #fff; }
#topleft button:hover { background: rgba(22,23,26,.96); }
#topleft button svg { width: 22px; height: 22px; }
#chat-btn svg path { fill: currentColor; fill-opacity: 0; transition: fill-opacity .2s var(--ease); } /* filled while chat is open, hollow while closed */
#chat-btn.on svg path { fill-opacity: 1; }
/* voice chat mic: grey with a slash when off, white and ringing green with your voice level when on, red when muted */
#vc-btn { --lvl: 0; color: rgba(255,255,255,.6) !important; }
#vc-btn.on { color: #fff !important; box-shadow: 0 0 0 calc(var(--lvl) * 5px) #3ccf7a; }
#vc-btn.on .slash { display: none; }
#vc-btn.muted { color: #ff6b6b !important; }
.player .mbtn.small { margin-left: auto; padding: 4px 10px; font-size: 13px; }
.hud-corner { left: auto; right: 16px; top: 16px; align-items: flex-end; }
#shift-chip { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; background: var(--ov); padding: 8px 14px; border-radius: var(--r); font-weight: 800; font-size: 14px; }
#shift-chip svg { width: 18px; height: 18px; color: #3ccf7a; }
/* shift lock cursor: a small ring in the middle of the screen */
#crosshair { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.45); }
#crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; }
#crosshair.ready { border-color: #3ccf7a; }
#crosshair.ready::after { background: #3ccf7a; }
/* health bar, top right like classic block games: green, yellow under half, red when low. The red edges show damage. */
#hp { position: absolute; top: 16px; right: 16px; width: 200px; height: 18px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; }
#hp i { position: absolute; inset: 0; transform-origin: left; background: #3ccf4e; transition: transform .25s ease-out, background-color .25s; }
#hp b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#game-ui.has-hp .hud-corner { top: 44px; }
#hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(210,0,0,.75)); transition: opacity .6s ease-out; }
#hurt.on { opacity: 1; transition: none; }
#toasts { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(560px, calc(100% - 32px)); }
.toast { background: var(--ov); padding: 8px 16px; border-radius: var(--r); font-weight: 800; animation: toast 2.6s forwards; text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#flash { position: absolute; inset: 0; background: #e23d3d; opacity: 0; transition: opacity .45s; }
#flash.on { opacity: .35; transition: none; }

/* chat: window top-left, like most platform games; fades when nobody is talking */
#chat { position: absolute; left: 16px; top: 68px; width: min(400px, calc(100% - 32px)); display: flex; flex-direction: column; background: rgba(22,23,26,.45); border-radius: var(--r); transition: background .4s, opacity .4s; }
#chat.idle { background: transparent; }
#chat.idle #chat-input { opacity: 0; }
#chat.hide { opacity: 0; pointer-events: none; }
#chat.hide * { pointer-events: none !important; }
#chat-log { display: flex; flex-direction: column; gap: 2px; height: 180px; overflow-y: auto; padding: 8px 10px 4px; scrollbar-width: thin; }
.msg { font-size: 15px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.8); overflow-wrap: anywhere; line-height: 1.35; }
.msg b { margin-right: 6px; }
.msg.sys { color: rgba(255,255,255,.75); font-weight: 600; }
#chat-input { margin: 4px 8px 8px; background: rgba(0,0,0,.35); border: 1px solid transparent; color: #fff; font-size: 14px; padding: 8px 10px; transition: opacity .4s; }
#chat-input::placeholder { color: rgba(255,255,255,.6); }
#chat.open #chat-input { background: rgba(0,0,0,.55); border-color: var(--ov-line); }

/* touch controls */
#touch { position: absolute; inset: 0; pointer-events: none; }
#stick { position: absolute; left: 28px; bottom: 28px; width: 140px; height: 140px; border-radius: 50%; background: rgba(22,23,26,.35); border: 2px solid rgba(255,255,255,.25); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 45px; top: 45px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.75); }
#t-jump, #t-act { position: absolute; right: 30px; bottom: 34px; width: 86px; height: 86px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(22,23,26,.45); color: #fff; pointer-events: auto; touch-action: none; display: grid; place-items: center; font-weight: 800; }
#t-jump svg { width: 40px; height: 40px; }
#t-act { right: 130px; bottom: 60px; width: 72px; height: 72px; }
#t-run { position: absolute; right: 130px; bottom: 60px; width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(22,23,26,.45); color: #fff; pointer-events: auto; touch-action: none; display: grid; place-items: center; font-weight: 800; }
#t-run.on { background: rgba(255,255,255,.85); color: #16171a; }
body.touch #chat { width: min(300px, 60%); }
body.touch #chat-log { height: 110px; }

/* in-game menu */
#menu { position: absolute; inset: 0; background: rgba(10,10,12,.55); display: grid; place-items: center; padding: 16px; }
.menu-card { width: min(760px, 100%); height: min(520px, 100%); background: var(--ov); border: 1px solid var(--ov-line); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.menu-tabs { display: flex; border-bottom: 1px solid var(--ov-line); }
.menu-tabs button { flex: 1; background: none; border: 0; padding: 16px 0 14px; font: 600 18px var(--display); color: rgba(255,255,255,.6); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.menu-tabs button:hover { color: #fff; }
.menu-tabs button.on { color: #fff; border-color: #fff; }
.menu-body { flex: 1; overflow-y: auto; padding: 18px 26px; }
.menu-head { font: 600 15px var(--display); color: rgba(255,255,255,.6); margin-bottom: 12px; display: flex; justify-content: space-between; }
.player { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r); background: rgba(255,255,255,.06); margin-bottom: 8px; }
.player img { width: 44px; height: 44px; border-radius: 50%; background: #3a3a40; }
.player span { color: rgba(255,255,255,.55); font-size: 14px; }
.player i { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 800; color: #3ccf7a; }
#menu .set + .set { border-color: var(--ov-line); }
#menu .seg { background: rgba(255,255,255,.08); }
#menu .seg button { color: rgba(255,255,255,.6); }
#menu .seg button.on { background: #fff; color: #18181b; }
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.help h3 { color: #fff; margin-bottom: 10px; font: 600 16px var(--display); }
.confirm { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.confirm p { color: rgba(255,255,255,.65); }
.confirm .btns { display: flex; gap: 10px; margin-top: 10px; }
.confirm .btns .mbtn { height: 56px; min-width: 150px; font-size: 18px; flex: none; }
.menu-actions { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--ov-line); }
.mbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 18px; border: 1px solid var(--ov-line); border-radius: var(--r); background: rgba(255,255,255,.06); font-weight: 800; font-size: 15px; color: #fff; }
.mbtn:hover { background: rgba(255,255,255,.12); }
.mbtn.primary { background: #fff; color: #18181b; border-color: #fff; }
.mbtn.primary:hover { background: #e9e9e6; }
.mbtn kbd { font: 800 12px var(--body); border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; opacity: .7; }
#game-ui .keys { color: rgba(255,255,255,.7); }
#game-ui .keys kbd { border-color: var(--ov-line); color: #fff; background: none; }

#overlay { position: absolute; inset: 0; background: rgba(10,10,12,.55); display: grid; place-items: center; }
.panel { background: var(--ov); border: 1px solid var(--ov-line); border-radius: 12px; padding: 28px; width: min(420px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 14px; }
.panel h2 { font-size: 30px; }
.panel .lines { color: rgba(255,255,255,.7); line-height: 1.6; }
.panel .lines b { color: #fff; }
.panel .btns { display: flex; gap: 10px; margin-top: 6px; }
.panel .btn { background: rgba(255,255,255,.08); border-color: var(--ov-line); color: #fff; }
.panel .btn.primary { background: var(--accent); border-color: var(--accent); }

#loading { position: absolute; inset: 0; background: #16171a; display: grid; place-items: center; }
.load-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.load-img { width: 200px; height: 200px; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.load-img img { width: 100%; height: 100%; object-fit: cover; }
.load-card p { color: rgba(255,255,255,.6); font-weight: 700; }
.load-bar { width: 200px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 16px; }
.load-bar i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 4px; animation: load 1s var(--ease) infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; align-items: center; color: var(--muted); justify-items: start; }
.keys kbd { font: 800 12px var(--body); border: 1px solid var(--line); color: var(--text); padding: 3px 9px; border-radius: 5px; background: var(--surface); }

/* ---------- friends / players list ---------- */
.row-head .seg { margin-left: auto; }
.row-head .h-link { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 14px; }
.seg.tabs { background: none; padding: 0; gap: 20px; margin-left: 0; }
.seg.tabs button { padding: 0 0 4px; border-radius: 0; font-size: 20px; color: var(--muted); border-bottom: 3px solid transparent; }
.seg.tabs button.on { background: none; box-shadow: none; color: var(--text); border-bottom-color: var(--text); }
.seg.tabs button { transition: color .15s, border-color .15s; }
.seg.tabs .count { font-size: 14px; font-weight: 600; color: var(--muted); }
.swap-in { animation: swapIn .18s ease-out; }
@keyframes swapIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.friend a { color: inherit; }
.friend .dot.game { background: #2fbf6a; }
.friend.off .dot { background: #8d8d94; }
.friend.off .pic img { opacity: .55; }
.friend.off .where { color: var(--muted); }
.friend .btn.small { padding: 4px 12px; font-size: 13px; }
.req-btns { display: flex; gap: 4px; }
.req-btns .btn.small { padding: 4px 8px; }
.status { font-weight: 800; }
.status.on { color: var(--accent); }
.about-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 22px; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
textarea { width: 100%; font: 15px/1.5 var(--body); padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--text); resize: vertical; margin-bottom: 8px; }
textarea:focus { outline: none; border-color: var(--muted); }
.small-note { font-size: 13px; margin-top: 6px; }
.icon-btn:disabled { opacity: .35; cursor: default; }
#auth[data-mode="signup"] .login-only { display: none; }
#reset-form { display: flex; flex-direction: column; gap: 14px; }
#reset-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 14px; color: var(--muted); }

/* ---------- servers tab on a game page ---------- */
.servers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.server { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.server-info { display: flex; flex-direction: column; gap: 2px; width: 150px; flex: none; font-size: 14px; color: var(--muted); }
.server-info b { color: var(--text); font-size: 15px; }
.server-info .bar { width: 100%; height: 4px; margin: 6px 0 0; background: var(--raised); }
.server-heads { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.server-heads img { width: 40px; height: 40px; border-radius: 50%; background: var(--raised); display: block; }

/* ---------- settings: category list on the left, one category at a time ---------- */
.settings-page { max-width: 920px; }
.set-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 2px; }
.set-nav button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: var(--r); font-weight: 800; font-size: 15px; color: var(--muted); transition: background .15s, color .15s; }
.set-nav button:hover { background: var(--raised); }
.set-nav button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.set-nav a { padding: 10px 12px; margin-top: 8px; border-top: 1px solid var(--line); font-weight: 800; font-size: 15px; color: var(--muted); }
.set-nav a:hover { color: var(--text); }

/* report / notice dialog and the Violations and Appeals page */
.dlg { margin: auto; border: 0; padding: 0; border-radius: 12px; background: var(--surface); color: var(--text); width: min(440px, calc(100% - 32px)); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.dlg::backdrop { background: rgba(10,10,12,.55); animation: fade .2s var(--ease); }
.dlg[open] { animation: pop .22s var(--ease); }
.dlg-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.dlg-card h2 { font-size: 24px; }
.btn-row.end { justify-content: flex-end; }
.rep-reasons { display: flex; flex-direction: column; gap: 2px; }
.rep-reasons label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); font-weight: 700; cursor: pointer; }
.rep-reasons label:hover { background: var(--raised); }
.rep-reasons input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.vio-intro { margin: -6px 0 18px; max-width: 640px; }
.vio-ban { background: #d03a3a; color: #fff; border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.vio { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.vio.gone { opacity: .65; }
.vio-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vio-head .muted { margin-left: auto; font-size: 14px; }
.vio-tag { align-self: flex-start; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: var(--r); background: var(--raised); color: var(--text); }
.vio-tag.warning { background: #e9a23b; color: #18181b; }
.vio-tag.ban { background: #d03a3a; color: #fff; }
.vio-lines { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.vio-lines q { background: var(--bg); border-radius: var(--r); padding: 8px 12px; quotes: none; }
.vio-appeal { font-size: 14px; }
.appeal-form { width: 100%; }
.nav-count { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 800; min-width: 22px; padding: 1px 7px; border-radius: 11px; background: #d03a3a; color: #fff; text-align: center; }
.btn.danger { background: #d03a3a; border-color: #d03a3a; color: #fff; }
.btn.danger:hover { background: #b83232; }
.decide { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.decide .ask { width: 100%; font-weight: 800; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); color: var(--text); font: inherit; font-weight: 800; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s; }
.pick button:hover { border-color: var(--muted); }
.pick button.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.pick button.bad.on { border-color: #d03a3a; color: #d03a3a; box-shadow: inset 0 0 0 1px #d03a3a; }
.decide [data-go] { margin-left: auto; min-height: 44px; transition: background .15s, opacity .15s; }
.decide [data-go]:disabled { opacity: .45; cursor: default; }
@media (max-width: 600px) { .decide [data-go] { width: 100%; margin-left: 0; } .pick { width: 100%; } .pick button { flex: 1; padding: 0 10px; } }
.vio .ask { font-weight: 800; margin-right: auto; }
.vio-head a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rep-log { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; background: var(--bg); border-radius: var(--r); padding: 6px; }
.rep-line { display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 6px; font-size: 14px; }
.rep-line .muted { font-size: 12px; }
.rep-line.mine { background: #f6dfb0; color: #18181b; }
.rep-line.mine .muted { color: #5f5f67; }
.set.col { flex-direction: column; align-items: stretch; gap: 8px; }
.set.col .btn { align-self: flex-start; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 14px; }
.inline-form input { flex: 1 1 180px; }
.inline-form .auth-err, .inline-form .muted { flex-basis: 100%; margin: 0; }
@media (max-width: 700px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { flex-direction: row; overflow-x: auto; }
  .set-nav button { white-space: nowrap; }
  .server { flex-wrap: wrap; }
  .name-edit input { width: 100%; }
}

/* ---------- startup loading screen (index.html #boot) ---------- */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--bg); transition: opacity .45s var(--ease), visibility .45s; }
#boot.done { opacity: 0; visibility: hidden; }
.boot-card { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.boot-logo { width: 56px; height: 56px; margin-bottom: 16px; }
.boot-logo rect { animation: bob 1.6s var(--ease) infinite; }
.boot-logo rect + rect { animation-delay: .2s; }
.boot-load b { font: 700 26px var(--display); }
#boot .load-bar { background: var(--raised); margin: 14px auto 0; }
.boot-err { display: none; width: 100%; }
#boot.failed .boot-load { display: none; }
#boot.failed .boot-err { display: block; animation: rise .4s var(--ease); }
#boot.failed .boot-logo rect { animation: none; }
.boot-err h2 { font-size: 22px; margin-bottom: 4px; }
.boot-err .muted { color: var(--muted); }
.boot-btns { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.boot-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.boot-err.open .boot-more { grid-template-rows: 1fr; }
.boot-more > div { overflow: hidden; }
.boot-more dl { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.boot-more dt { color: var(--muted); font-weight: 800; }
.boot-more dd { margin: 0; word-break: break-word; }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* ---------- smooth screen + popup entrances (re-run whenever .hidden is removed) ---------- */
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
#auth, #hub, #loading, #menu, #overlay { animation: fade .3s var(--ease); }
#page > * { animation: rise .35s var(--ease) backwards; }
#page.still > * { animation: none; }
#page > :nth-child(2) { animation-delay: .04s; }
#page > :nth-child(n+3) { animation-delay: .08s; }
.auth-card, .menu-card, .panel { animation: pop .3s var(--ease); }
.dropdown { animation: pop .16s var(--ease); transform-origin: top right; }
.btn, .mbtn, .vote { transition: border-color .15s, background .15s, color .15s, transform .1s var(--ease); }
.btn:active, .mbtn:active, .vote:active, .play-big:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01s !important; } }
@media (max-width: 1150px) { .auth-art .tag { display: none; } }
@media (max-width: 900px) {
  .side { width: 64px; }
  .side a { font-size: 0; justify-content: center; gap: 0; padding: 12px 0; }
  .side .side-me b { display: none; }
  .gp-top, .about, .help, .wearing { grid-template-columns: 1fr; }
  #page { padding: 20px 16px 60px; }
  #hub[data-page="avatar"] #page { flex-direction: column; overflow-y: auto; }
  .av-stage { min-height: 360px; }
  .catalog { width: 100%; }
  .menu-actions { flex-wrap: wrap; }
  .prof-card { flex-direction: column; text-align: center; }
  .prof-counts { justify-content: center; }
}
@media (max-width: 600px) {
  .me span, .logo span { display: none; }
}
.fps { position: fixed; left: 10px; top: 58px; z-index: 30; padding: 3px 8px; border-radius: 6px; background: rgba(20,20,24,.55); color: #fff; font: 700 12px/1.4 var(--body); pointer-events: none; }
/* classic ProximityPrompt: key + action, shown over the thing you can use */
.prompt { position: fixed; z-index: 25; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 8px;
  background: rgba(20,20,24,.72); color: #fff; font: 700 14px/1.2 var(--body); pointer-events: auto; white-space: nowrap; }
.prompt .key { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #fff; color: #18181b; font-weight: 800; font-size: 15px; overflow: hidden; }
.prompt .key i { position: absolute; left: 0; bottom: 0; height: 100%; background: rgba(34,164,93,.35); width: 0; }
.prompt .key b { position: relative; }
.prompt .txt small { display: block; font-weight: 600; font-size: 11px; opacity: .75; }
.prompt.hidden { display: none; }
body.click-hover canvas, body.click-hover #view { cursor: url('icons/cursor-hand.svg') 4 3, pointer !important; }

/* find people: button in the friends row + small window */
button.friend { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.friend.find .pic { background: var(--surface); border: 1px solid var(--line); }
.friend.find { pointer-events: none; } /* only the circle is the button, not the label under it */
.friend.find .pic { pointer-events: auto; cursor: pointer; box-shadow: 0 0 0 0 color-mix(in srgb, var(--muted) 0%, transparent); transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); }
.friend.find .pic:hover { border-color: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 35%, transparent); }
.friend .req-count { position: absolute; top: 0; right: 0; box-sizing: border-box; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #d03a3a; color: #fff; font-style: normal; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; border: 2px solid var(--bg); }
.people-reqs:empty { display: none; }
.people-reqs { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.people-reqs h3 { font-size: 15px; display: flex; gap: 6px; align-items: baseline; padding: 0 2px 4px; }
.people-reqs .count { color: var(--muted); }
.req-row { display: flex; align-items: center; gap: 6px; }
.req-row .person { flex: 1; min-width: 0; }
.people-modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; animation: fade .15s ease-out; }
.people-win { width: min(440px, 100%); max-height: min(560px, 85vh); display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.people-head { display: flex; align-items: center; justify-content: space-between; }
.people-head h2 { margin: 0; font-size: 18px; }
.people-head .icon-btn, .dm-x { width: 44px; height: 44px; font-size: 20px; flex: none; }
.people-q { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.people-q:focus { outline: none; border-color: var(--muted); }
.people-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.people-list .muted { font-size: 13px; padding: 4px 2px 8px; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r); color: inherit; text-decoration: none; }
.person:hover { background: var(--raised); }
.person img { width: 40px; height: 40px; border-radius: 50%; background: var(--raised); flex: none; }
.person span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.person b { font-weight: 800; display: flex; align-items: center; gap: 4px; }
.person b .verified { width: 15px; height: 15px; }
.person small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .dot { width: 10px; height: 10px; border-radius: 50%; background: #2fbf6a; flex: none; }
.person .dot.game { background: #2fbf6a; }
.person .dot.off { background: #8d8d94; }

.owner-thumb { width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); margin: 8px 0; background: rgba(255,255,255,.08); }

/* online/offline notes (shown on every screen, above the game too) */
.net-note { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 110; max-width: calc(100% - 32px); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px 16px; font-weight: 800; text-align: center; animation: toast 4.4s forwards; }

/* ---------- phones and tablets ---------- */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body.touch { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* no double-tap zoom */
body.touch.in-game { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch.in-game #chat-input { -webkit-user-select: text; user-select: text; font-size: 16px; } /* 16px stops iOS zooming into the field */
body.touch .mbtn kbd { display: none; }
body.touch .prompt { padding: 10px 14px 10px 10px; }
body.touch .prompt .key { width: 40px; height: 40px; font-size: 13px; }
/* keep game controls clear of notches and the home bar */
body.touch #topleft { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
body.touch #chat { left: max(12px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 52px); }
body.touch #stick { left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); }
body.touch #t-jump { right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); }
body.touch #t-act, body.touch #t-run { right: calc(max(22px, env(safe-area-inset-right)) + 100px); bottom: max(52px, env(safe-area-inset-bottom)); }
body.touch #t-act:not(.hidden) ~ #t-run { bottom: calc(max(52px, env(safe-area-inset-bottom)) + 84px); right: calc(max(22px, env(safe-area-inset-right)) + 60px); }
body.touch #t-act:active, body.touch #t-jump:active { background: rgba(255,255,255,.85); color: #16171a; }
body.touch .hud-corner, body.touch #hp { right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); }
/* phone portrait: HUD title under the buttons, smaller numbers, menu fills the screen */
@media (max-width: 600px) {
  .hud-top { top: 64px; width: calc(100% - 24px); }
  .hud-big { font-size: 24px; }
  .hud-small { font-size: 12px; }
  .chip { font-size: 13px; padding: 5px 10px; }
  .toast { font-size: 13px; padding: 6px 12px; }
  body.touch #chat { width: min(260px, calc(100% - 24px)); top: 150px; }
  body.touch #chat-log { height: 90px; }
  #menu { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .menu-card { height: auto; max-height: min(520px, 100%); }
  .menu-tabs button { font-size: 16px; padding: 14px 0 12px; }
  .menu-body { padding: 14px 16px; }
  .menu-actions { padding: 12px 16px; }
  .menu-actions .mbtn { flex: 1 1 40%; }
  .help { grid-template-columns: 1fr; }
  .panel { padding: 22px; }
  .panel h2 { font-size: 24px; }
  .load-img { width: 140px; height: 140px; }
}
/* phone landscape: short screen, so a shorter chat and menu */
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #chat { width: min(240px, 30%); }
  body.touch #chat-log { height: 70px; }
  body.touch #stick { width: 120px; height: 120px; }
  body.touch #knob { left: 35px; top: 35px; }
  .hud-big { font-size: 22px; }
  .hud-small { font-size: 12px; }
  .chip { font-size: 13px; padding: 4px 9px; }
  .toast { font-size: 13px; padding: 5px 12px; }
  #toasts { top: 70px; }
  .menu-tabs button { padding: 10px 0 8px; font-size: 16px; }
  .menu-body { padding: 10px 18px; }
  .menu-actions { padding: 10px 16px; }
  .mbtn { height: 44px; }
}
/* hub on a phone: tabs move to a bar along the bottom, the top bar keeps search, avatar and settings */
@media (max-width: 600px) {
  .topbar { gap: 10px; padding: 0 10px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .top-right { gap: 2px; }
  .me { padding: 2px; }
  .icon-btn { width: 44px; height: 44px; }
  .hub-body { flex-direction: column-reverse; }
  .side { width: auto; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .side .side-me { display: none; }
  .side a { min-width: 52px; min-height: 48px; padding: 0; }
  #page { padding: 16px 14px 28px; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 36px; }
}
@media (max-width: 600px) {
  .set { flex-wrap: wrap; gap: 8px 16px; }
  .set > span:first-child { flex: 1 1 160px; }
  .set .name-edit { width: 100%; }
  .name-edit input { width: auto; flex: 1; min-width: 0; font-size: 20px; }
  .set-section { padding: 4px 14px; }
}

/* ---------- phones: every menu control is a full finger-sized target ---------- */
@media (max-width: 600px) {
  .side { padding: 0 0 env(safe-area-inset-bottom); justify-content: stretch; }
  .side a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 6px 0; border-radius: 0; font-size: 11px; font-weight: 800; }
  .side a svg { width: 23px; height: 23px; }
  .side a.on { box-shadow: none; background: none; color: var(--accent); }
  .logo { padding: 8px; margin: -8px; }
  .me { width: 44px; height: 44px; display: grid; place-items: center; }
  .sw { width: 44px; height: 44px; }
  .seg > * { min-height: 42px; }
  .link { padding: 10px 8px; margin: -10px -8px; }
}
body.touch .tile:active .tile-img { transform: scale(.97); }
body.touch .side a:active, body.touch .btn:active, body.touch .icon-btn:active, body.touch .person:active { background: var(--raised); }


/* it's an app, not a document: no selecting text or long-press callouts, except where you type */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* phone bottom bar: Home, Avatar, Create (+ Reports for the owner). Profile and Settings are at the top */
@media (max-width: 600px) {
  .side a[data-nav="settings"], .side a[data-nav="profile"] { display: none; }
}

/* ---------- phone game buttons: run above jump, small shift lock beside it, joystick wherever the thumb lands ---------- */
#t-shift { display: none; }
body.touch #stick-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 65%; pointer-events: auto; touch-action: none; }
body.touch #stick { pointer-events: none; transition: opacity .15s; opacity: .7; }
body.touch #stick.live { opacity: 1; }
body.touch #t-jump { width: 96px; height: 96px; transition: transform .08s, background .08s; }
body.touch #t-jump.down { transform: scale(.92); background: rgba(255,255,255,.85); color: #16171a; }
body.touch #t-run { right: calc(max(22px, env(safe-area-inset-right)) + 12px); bottom: calc(max(26px, env(safe-area-inset-bottom)) + 108px); }
body.touch #t-act { right: calc(max(22px, env(safe-area-inset-right)) + 110px); bottom: calc(max(26px, env(safe-area-inset-bottom)) + 70px); }
body.touch #t-act:not(.hidden) ~ #t-run { right: calc(max(22px, env(safe-area-inset-right)) + 12px); bottom: calc(max(26px, env(safe-area-inset-bottom)) + 108px); }
body.touch #t-shift { position: absolute; display: grid; place-items: center; right: calc(max(22px, env(safe-area-inset-right)) + 110px); bottom: max(18px, env(safe-area-inset-bottom)); width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(22,23,26,.45); color: #fff; pointer-events: auto; touch-action: none; }
body.touch #t-shift svg { width: 22px; height: 22px; }
body.touch #t-shift.on { background: rgba(255,255,255,.85); color: #16171a; }
#shift-chip { display: none !important; } /* removed: the camera itself shows shift lock is on */

/* ---------- player list: Tab, or the button at the top right (phones too) ---------- */
#players-btn { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--ov); color: #fff; display: grid; place-items: center; pointer-events: auto; }
#players-btn svg { width: 22px; height: 22px; }
#players-btn.on { background: #fff; color: #16171a; }
#players { position: absolute; top: 68px; right: 16px; z-index: 5; width: 250px; max-height: calc(100% - 140px); overflow-y: auto; padding: 6px; border-radius: var(--r); background: rgba(20,20,24,.86); color: #fff; pointer-events: auto; }
.pl-head { display: flex; justify-content: space-between; padding: 6px 8px 8px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 4px; font-size: 14px; }
.pl-head span { color: rgba(255,255,255,.6); font-weight: 700; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 14px; font-weight: 700; }
.pl-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.pl-name .verified { width: 14px; height: 14px; }
.pl-user, .pl-you { font-size: 12px; color: rgba(255,255,255,.55); }
.pl-you { color: #3ccf7a; }
/* the right-hand HUD moves down under the players button */
.hud-corner, #hp { top: 68px; }
#game-ui.has-hp .hud-corner { top: 96px; }
#game-ui:has(#players:not(.hidden)) .hud-corner, #game-ui:has(#players:not(.hidden)) #hp { visibility: hidden; } /* the list sits where the chips are */
body.touch #players-btn { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
body.touch #players { top: calc(max(12px, env(safe-area-inset-top)) + 52px); right: max(12px, env(safe-area-inset-right)); width: min(220px, 56%); }
body.touch .hud-corner, body.touch #hp { top: calc(max(12px, env(safe-area-inset-top)) + 52px); }
body.touch #game-ui.has-hp .hud-corner { top: calc(max(12px, env(safe-area-inset-top)) + 80px); }

/* phone portrait: chat right under the top-left buttons; the game title moves below it while it's open */
@media (max-width: 600px) {
  body.touch #chat { top: calc(max(12px, env(safe-area-inset-top)) + 52px); width: min(230px, 58%); }
  body.touch #game-ui:has(#chat:not(.hide)) .hud-top { top: 200px; }
}
/* Hook (Grapple Park): left of jump, above the shift-lock button, easy to reach with the right thumb */
body.touch #t-act { right: calc(max(22px, env(safe-area-inset-right)) + 108px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px); width: 74px; height: 74px; }

/* show-password eye inside the password box */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 42px; height: 40px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; border-radius: var(--r); }
.pw-eye:hover { color: var(--text); }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye[aria-pressed="false"] .slash { display: none; }
.inline-form .pw-wrap { flex: 1 1 180px; }

/* chat and player list grow and shrink with the screen */
#chat { width: clamp(240px, 28vw, 420px); }
#chat-log { height: clamp(110px, 24vh, 230px); font-size: clamp(13px, 1.05vw, 15px); }
#players { width: clamp(200px, 21vw, 320px); }
.pl-row, .pl-head { font-size: clamp(13px, 1.05vw, 15px); }
body.touch #chat { width: clamp(200px, 34vw, 340px); }
body.touch #chat-log { height: clamp(70px, 18vh, 160px); }
body.touch #players { width: clamp(180px, 30vw, 300px); }
@media (max-width: 600px) { /* phone held upright */
  body.touch #chat { width: min(240px, 60vw); }
  body.touch #chat-log { height: clamp(70px, 13vh, 120px); }
  body.touch #players { width: min(230px, 58vw); }
  body.touch #game-ui:has(#chat:not(.hide)) .hud-top { top: calc(max(12px, env(safe-area-inset-top)) + 72px + clamp(70px, 13vh, 120px) + 50px); }
}
@media (max-height: 500px) and (orientation: landscape) { /* phone on its side */
  body.touch #chat { width: clamp(180px, 30vw, 280px); }
  body.touch #chat-log { height: clamp(56px, 20vh, 90px); }
  body.touch #players { width: clamp(170px, 26vw, 260px); max-height: calc(100% - 80px); }
}

/* phone bottom bar: Home, Avatar, You (+ Reports for the owner); Create and Settings live elsewhere */
@media (max-width: 600px) {
  .side a[data-nav="profile"] { display: flex; order: 3; }
  .side a[data-nav="home"] { order: 1; } .side a[data-nav="avatar"] { order: 2; } .side a[data-nav="reports"] { order: 4; }
  .side a[data-nav="create"], .side a[data-nav="settings"] { display: none; }
  .side a { font-size: 0; }
  .side a::after { content: attr(data-m); font-size: 11px; line-height: 1; }
  .side a { position: relative; }
  .side a .nav-count { position: absolute; top: 4px; right: calc(50% - 26px); font-size: 10px; padding: 0 5px; min-width: 16px; }
}

/* no white scrollbars: rows of tiles scroll by swipe/drag with no bar, pages get a thin bar in the theme colours */
.tiles { scrollbar-width: none; }
.tiles::-webkit-scrollbar { display: none; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
body.touch #t-run svg { width: 30px; height: 30px; }
.pl-row.tap { cursor: pointer; border-radius: 6px; }
.pl-row.tap:hover, .pl-row.tap:active { background: rgba(255,255,255,.08); }
.pl-acts { display: flex; gap: 6px; padding: 2px 8px 8px 26px; }
.pl-acts .mbtn { flex: 1; min-height: 34px; font-size: 13px; }

/* ---------- Nov 8 fixes ---------- */
/* error details can be selected and copied */
.boot-more, .boot-more *, .rep-log, .rep-log * { -webkit-user-select: text; user-select: text; }
/* chat: a send button like classic block games, scrollable history, comes back when you hover or touch it, darker while you use it */
#chat-log { pointer-events: auto; overscroll-behavior: contain; }
.chat-bar { display: flex; align-items: center; gap: 6px; margin: 4px 8px 8px; }
.chat-bar #chat-input { flex: 1; min-width: 0; margin: 0; }
#chat-send { flex: none; width: 36px; height: 36px; border: 0; border-radius: var(--r); background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; transition: opacity .4s, background .2s; }
#chat-send:hover { background: rgba(0,0,0,.6); }
#chat-send svg { width: 18px; height: 18px; }
#chat.idle #chat-send { opacity: 0; }
#chat.hover, #chat.open { background: rgba(22,23,26,.7); }
#chat.hover.idle #chat-input, #chat.hover.idle #chat-send { opacity: 1; }
body.touch #chat-send { width: 40px; height: 40px; }
/* leaderstats (player list): open by default, slides and fades open/closed, stat columns on the right */
#players { transition: opacity .22s var(--ease), transform .22s var(--ease); transform-origin: top right; }
#players.closed { opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; }
#players { width: clamp(220px, calc(15vw + var(--cols, 1) * 5.5vw), 460px); }
.pl-head { align-items: center; gap: 8px; }
.pl-head b { flex: 1; }
.pl-head b span { font-weight: 700; margin-left: 4px; }
.pl-stat { flex: none; width: clamp(48px, 5vw, 80px); text-align: right; font-variant-numeric: tabular-nums; }
.pl-head .pl-stat { color: rgba(255,255,255,.7); font-size: .85em; }
.pl-row.me { background: rgba(255,255,255,.08); border-radius: 6px; }
/* the list no longer hides the health bar and chips: they move down below it */
#game-ui:has(#players:not(.hidden)) .hud-corner, #game-ui:has(#players:not(.hidden)) #hp { visibility: visible; }
#game-ui #hp { top: calc(68px + var(--lbh, 0px)); transition: top .22s var(--ease); }
#game-ui .hud-corner { top: calc(68px + var(--lbh, 0px)); transition: top .22s var(--ease); }
#game-ui.has-hp .hud-corner { top: calc(96px + var(--lbh, 0px)); }
body.touch #game-ui #hp, body.touch #game-ui .hud-corner { top: calc(max(12px, env(safe-area-inset-top)) + 52px + var(--lbh, 0px)); }
/* under water: blue tint and a soft blur */
#underwater { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(ellipse at center, rgba(40,120,170,.28), rgba(10,50,90,.55)); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
body.underwater #underwater { opacity: 1; }
/* big screens: bigger Esc menu and top buttons */
@media (min-width: 1500px) and (min-height: 800px) {
  .menu-card { width: min(62vw, 1180px); height: min(68vh, 820px); }
  .menu-tabs button { font-size: clamp(18px, 1.15vw, 24px); padding: 20px 0 18px; }
  #menu-body { font-size: clamp(15px, 1vw, 19px); }
  #menu .mbtn { font-size: clamp(15px, .95vw, 18px); padding: 12px 20px; }
  #topleft button, #players-btn { width: clamp(44px, 2.9vw, 60px); height: clamp(44px, 2.9vw, 60px); }
  #topleft button svg, #players-btn svg { width: clamp(22px, 1.45vw, 30px); height: clamp(22px, 1.45vw, 30px); }
  #topleft { top: 20px; left: 20px; gap: 10px; }
  #players-btn { top: 20px; right: 20px; }
  #players, #chat { top: calc(32px + clamp(44px, 2.9vw, 60px)); }
  #game-ui #hp, #game-ui .hud-corner { top: calc(32px + clamp(44px, 2.9vw, 60px) + var(--lbh, 0px)); }
  .topbar { height: 68px; }
  .topbar .icon-btn { width: 44px; height: 44px; }
}
/* profile: 2D / 3D switch on the avatar picture */
.wearing .body { position: relative; }
.view-seg { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.view-seg button { border: 0; background: none; padding: 4px 10px; font-weight: 800; font-size: 13px; color: var(--muted); }
.view-seg button.on { background: var(--text); color: var(--surface); }
.av3d { width: 100%; aspect-ratio: 3 / 4; cursor: grab; }
.av3d canvas { width: 100% !important; height: 100% !important; display: block; }
.dl-steps { margin: 8px 0 12px; padding-left: 20px; line-height: 1.6; }
#download-app { white-space: nowrap; }
/* phones: no double-tap page zoom */
body.touch { touch-action: manipulation; }
/* Find people: the whole window scrolls (phones), requests get their own capped, scrollable box */
.people-win { max-height: min(640px, calc(100dvh - 32px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.people-reqs { max-height: 38dvh; overflow-y: auto; flex: none; }
.people-q { position: sticky; top: -16px; z-index: 1; flex: none; }
.people-list { flex: none; overflow: visible; }
/* profile on phones: name row centred like the rest of the card, stats wrap neatly */
@media (max-width: 900px) {
  .prof-id .name-row { justify-content: center; }
  .prof-id h1 { min-width: 0; }
  .prof-counts { flex-wrap: wrap; gap: 14px 22px; }
  .prof-counts b { white-space: nowrap; }
}
/* phones: the Esc menu is a card in the middle (never the whole screen), inside the safe area, so Leave / Reset / Resume are always tappable.
   Tablets and unfolded foldables are wider than 600 px and keep the roomier card below. */
@media (max-width: 600px), (max-height: 500px) {
  body.touch #menu { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  body.touch .menu-card { width: min(100%, 430px); height: auto; max-height: 100%; border-radius: 12px; border: 1px solid var(--ov-line); padding: 0; }
  body.touch .menu-body { min-height: 0; padding: 12px 14px; }
  body.touch .menu-tabs button { padding: 11px 0 9px; font-size: 15px; }
  body.touch .menu-actions { flex-wrap: nowrap; padding: 8px 10px; gap: 8px; }
  body.touch .menu-actions .mbtn { flex: 1; min-height: 42px; height: 42px; padding: 0 6px; font-size: 14px; white-space: nowrap; }
  body.touch .menu-actions kbd { display: none; }
  body.touch .confirm .btns .mbtn { min-height: 44px; min-width: 110px; }
  .menu-head { font-size: 14px; margin-bottom: 8px; }
  .player { flex-wrap: wrap; gap: 8px 10px; padding: 8px 10px; }
  .player img { width: 38px; height: 38px; }
  .player b { font-size: 15px; }
  .player span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .player .mbtn.small { margin-left: 0; flex: 1 1 30%; min-height: 36px; height: 36px; white-space: nowrap; }
}
@media (max-height: 500px) and (orientation: landscape) { body.touch .menu-card { width: min(100%, 560px); } }
.menu-card, .menu-body { min-height: 0; }
/* FPS counter at the bottom middle, out of the way of the chat */
.fps { left: 50%; top: auto; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
/* the Esc menu (and panels) sit above every in-game button, the chat and the player list, so nothing steals a tap on Leave */
#menu, #overlay { z-index: 40; }
/* avatar outfits: delete button on each saved look */
.item.outfit { cursor: pointer; }
.of-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; padding: 0; opacity: 0; transition: opacity .15s; }
.of-del svg { width: 16px; height: 16px; }
.item.outfit:hover .of-del, .item.outfit:focus-within .of-del, body.touch .of-del { opacity: 1; }
/* menus undo an accidental page zoom-out (--ui from main.js; 1 normally) */
#hub, #auth, .dlg, .people-modal > *, .net-note { zoom: var(--ui, 1); }
#req-more { align-self: flex-start; margin-top: 4px; }
.req-modal .people-list { gap: 4px; }
/* in-game top buttons smaller; chat and leaderstats a bit bigger (user tuning, Nov 8) */
#topleft button, #players-btn { width: 40px; height: 40px; }
#topleft button svg, #players-btn svg { width: 20px; height: 20px; }
#topleft { gap: 6px; }
#chat, #players { top: 64px; }
#chat { width: clamp(280px, 31vw, 500px); }
#chat-log { height: clamp(130px, 27vh, 270px); font-size: clamp(14px, 1.1vw, 17px); }
#players { width: clamp(240px, calc(17vw + var(--cols, 1) * 6vw), 520px); }
.pl-row, .pl-head { font-size: clamp(14px, 1.1vw, 17px); }
#game-ui #hp, #game-ui .hud-corner { top: calc(64px + var(--lbh, 0px)); }
@media (min-width: 1500px) and (min-height: 800px) {
  #topleft button, #players-btn { width: 44px; height: 44px; }
  #topleft button svg, #players-btn svg { width: 22px; height: 22px; }
  #players, #chat { top: 76px; }
  #game-ui #hp, #game-ui .hud-corner { top: calc(76px + var(--lbh, 0px)); }
}
body.touch #topleft button, body.touch #players-btn { width: 38px; height: 38px; }
body.touch #topleft button svg, body.touch #players-btn svg { width: 19px; height: 19px; }
body.touch #chat { width: clamp(220px, 36vw, 360px); top: calc(max(12px, env(safe-area-inset-top)) + 46px); }
body.touch #chat-log { height: clamp(80px, 20vh, 170px); }
body.touch #players { width: clamp(200px, 33vw, 330px); top: calc(max(12px, env(safe-area-inset-top)) + 46px); }
body.touch #game-ui #hp, body.touch #game-ui .hud-corner { top: calc(max(12px, env(safe-area-inset-top)) + 46px + var(--lbh, 0px)); }
#panel .load-bar { margin: 14px auto 4px; }
/* in-game top icons a touch smaller */
#topleft button, #players-btn { width: 36px; height: 36px; }
#topleft button svg, #players-btn svg { width: 18px; height: 18px; }
@media (min-width: 1500px) and (min-height: 800px) {
  #topleft button, #players-btn { width: 40px; height: 40px; }
  #topleft button svg, #players-btn svg { width: 20px; height: 20px; }
}
body.touch #topleft button, body.touch #players-btn { width: 35px; height: 35px; }
body.touch #topleft button svg, body.touch #players-btn svg { width: 18px; height: 18px; }
/* top icons: smaller on PC; on phones big enough for a thumb (Apple's 44 px guideline, a touch under) */
#topleft button, #players-btn { width: 32px; height: 32px; }
#topleft button svg, #players-btn svg { width: 16px; height: 16px; }
@media (min-width: 1500px) and (min-height: 800px) {
  #topleft button, #players-btn { width: 36px; height: 36px; }
  #topleft button svg, #players-btn svg { width: 18px; height: 18px; }
}
body.touch #topleft button, body.touch #players-btn { width: 42px; height: 42px; }
body.touch #topleft button svg, body.touch #players-btn svg { width: 20px; height: 20px; }
body.touch #topleft { gap: 8px; }
body.touch #chat, body.touch #players { top: calc(max(12px, env(safe-area-inset-top)) + 50px); }
body.touch #game-ui #hp, body.touch #game-ui .hud-corner { top: calc(max(12px, env(safe-area-inset-top)) + 50px + var(--lbh, 0px)); }
body.touch #chat-input { min-height: 40px; }
body.touch #chat-send { width: 42px; height: 42px; }
.restart-modal .people-win { text-align: center; align-items: center; }
.restart-modal .load-bar { margin: 6px auto 0; }
/* PC top icons: bigger (user tuning, Nov 9) */
body:not(.touch) #topleft button, body:not(.touch) #players-btn { width: 42px; height: 42px; }
body:not(.touch) #topleft button svg, body:not(.touch) #players-btn svg { width: 21px; height: 21px; }
@media (min-width: 1500px) and (min-height: 800px) {
  body:not(.touch) #topleft button, body:not(.touch) #players-btn { width: 46px; height: 46px; }
  body:not(.touch) #topleft button svg, body:not(.touch) #players-btn svg { width: 23px; height: 23px; }
}
/* loading screen on phones: centred in the part of the screen you can see (100dvh leaves out the browser bars),
   and the bouncing logo squares may go past the logo's box instead of being cut off */
#boot { inset: auto; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.boot-logo { overflow: visible; }
/* phones: nothing on a page may push it sideways */
html, body { overflow-x: hidden; }
#page { overflow-x: hidden; }
.set { flex-wrap: wrap; min-width: 0; }
.set > span { min-width: 0; flex: 1 1 180px; }
/* sliding switch highlight (placed by placeSegs in main.js) */
.seg { position: relative; isolation: isolate; }
.seg > button { position: relative; z-index: 1; transition: color .2s; }
.seg > button.on { background: none !important; box-shadow: none !important; }
.seg-ink { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); pointer-events: none;
  transition: transform .28s cubic-bezier(.3,.7,.2,1), width .28s cubic-bezier(.3,.7,.2,1), opacity .2s; }
#menu .seg-ink { background: #fff; }
@media (prefers-reduced-motion: reduce) { .seg-ink { transition: none; } }
/* profile: name exactly centred on phones, the badge and pencil sit beside it without pushing it over */
@media (max-width: 900px) {
  .prof-id .name-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .prof-id .name-row h1 { grid-column: 2; }
  .prof-id .name-row .name-side { grid-column: 3; justify-self: start; display: flex; align-items: center; gap: 6px; }
  .prof-id .name-row .name-edit { grid-column: 1 / -1; }
}
.name-side { display: inline-flex; align-items: center; gap: 6px; }
/* profile stats: small cards */
.prof-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; max-width: 560px; }
.prof-counts div { align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 10px 6px; background: var(--raised); border-radius: var(--r); font-size: 12px; }
.prof-counts b { font-size: 18px; white-space: nowrap; }
@media (max-width: 900px) { .prof-counts { margin-left: auto; margin-right: auto; width: 100%; grid-template-columns: repeat(3, 1fr); } }

/* ---------- friends chat ---------- */
.dm-root { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dm-page { height: calc(100dvh - 190px); min-height: 360px; max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.dm-head img { width: 34px; height: 34px; border-radius: 50%; background: var(--raised); }
.dm-title { font: 700 18px var(--display); padding: 4px 2px; }
.dm-who { display: flex; flex-direction: column; min-width: 0; }
.dm-who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-who span { font-size: 12px; color: var(--muted); font-weight: 700; }
.dm-search { margin: 10px 12px 4px; flex: none; }
.dm-list { flex: 1; overflow-y: auto; padding: 4px 6px 8px; }
.dm-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: none; border-radius: var(--r); text-align: left; color: var(--text); }
.dm-row { transition: background .15s var(--ease); }
.dm-row:hover { background: var(--raised); }
.dm-pic { position: relative; flex: none; }
.dm-pic img { width: 42px; height: 42px; border-radius: 50%; background: var(--raised); display: block; }
.dm-pic .dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); border: 2px solid var(--surface); }
.dm-pic .dot.on { background: #1f9d55; }
.dm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-txt b { font-size: 14px; }
.dm-txt span, .dm-meta time { font-size: 12px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.dm-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.dm-msg { max-width: 78%; align-self: flex-start; display: flex; flex-direction: column; }
.dm-msg p { margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: var(--raised); }
.dm-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dm-dot 1.1s ease-in-out infinite; }
.dm-typing i:nth-child(2) { animation-delay: .15s; } .dm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dm-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dm-typing i { animation: none; } }
.dm-msg.mine p { background: var(--accent); color: #fff; border-radius: 14px 14px 4px 14px; }
.dm-msg time { font-size: 11px; color: var(--muted); padding: 2px 4px; font-weight: 700; }
.dm-empty { margin: auto; color: var(--muted); font-weight: 700; padding: 24px; text-align: center; }
.dm-send { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; }
.dm-send input { flex: 1; min-width: 0; }
.dm-send .btn { padding: 0 14px; display: grid; place-items: center; }
.dm-send .btn svg { width: 18px; height: 18px; }
.dm-send .btn { transition: transform .12s var(--ease), background .15s; }
.dm-send .btn:active { transform: scale(.9); }
.dm-msg.fresh { animation: dm-in .28s var(--ease) both; transform-origin: bottom left; }
.dm-msg.mine.fresh { transform-origin: bottom right; }
.dm-msg.pending p { opacity: .55; }
.dm-msg p { transition: opacity .2s var(--ease); }
.dm-msg.err p { background: var(--raised); color: #d03a3a; }
.dm-typing { animation: dm-in .2s var(--ease) both; transform-origin: bottom left; }
.dm-typing.out { animation: dm-out .16s var(--ease) both; }
@keyframes dm-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes dm-out { to { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .dm-msg.fresh, .dm-typing, .dm-typing.out { animation: none; } }
body.touch .dm-send input { font-size: 16px; } /* no iOS zoom into the box */
/* PC dock bottom-right */
#dm-dock { position: fixed; right: 20px; bottom: 0; z-index: 30; width: 340px; display: flex; flex-direction: column; filter: drop-shadow(0 6px 24px rgba(0,0,0,.25)); }
#dm-dock .dm-bar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface); color: var(--text); font-weight: 800; font-size: 15px; }
#dm-dock .dm-chev { width: 18px; height: 18px; margin-left: auto; transition: transform .25s var(--ease); }
#dm-dock.open .dm-chev { transform: rotate(180deg); }
#dm-dock .dm-panel { height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 0; transition: height .28s var(--ease); }
#dm-dock.open .dm-panel { height: min(460px, calc(100vh - 140px)); }
#dm-dock .dm-list-head { display: none; } /* the dock's bar already says Chat */
/* phone side panel (Playbrix logo) */
#drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#drawer .drawer-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
#drawer .drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(280px, 80vw); background: var(--bg); padding: calc(14px + env(safe-area-inset-top)) 10px 14px; display: flex; flex-direction: column; gap: 2px; transform: translateX(-100%); transition: transform .28s cubic-bezier(.3,.7,.2,1); overflow-y: auto; }
#drawer.open { pointer-events: auto; }
#drawer.open .drawer-back { opacity: 1; }
#drawer.open .drawer-panel { transform: none; }
#drawer a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r); font-weight: 800; font-size: 16px; color: var(--muted); position: relative; }
#drawer a::after { content: none !important; }
#drawer a.on { color: var(--text); background: var(--surface); }
#drawer a svg { width: 22px; height: 22px; }
#drawer .side-me { color: var(--text); border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 8px; padding-bottom: 16px; }
#drawer .side-me img { width: 40px; height: 40px; border-radius: 50%; background: var(--raised); }
#drawer .nav-count { margin-left: auto; position: static; }
@media (max-width: 900px) { .side a[data-nav="chat"] { display: flex; order: 3; } .side a[data-nav="profile"] { order: 4; } .side a[data-nav="reports"] { order: 5; } }
/* pull to refresh */
#ptr { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: 40; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--muted); opacity: 0; transform: translate(-50%, -40px); transition: transform .25s var(--ease), opacity .25s; pointer-events: none; }
#ptr svg { width: 20px; height: 20px; }
#ptr.ready { color: var(--accent); }
#ptr.spin svg { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .dm-page { height: calc(100dvh - 150px - env(safe-area-inset-bottom)); border-radius: 0; border-left: 0; border-right: 0; margin: -22px -16px 0; max-width: none; } }
#hub[data-page="chat"] #page { padding-bottom: 0; }
@media (max-width: 900px) { .dm-page { height: calc(100dvh - 128px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); } }

/* profile: the badge and pencil sit on the name's middle line */
.prof-id .name-row h1 { margin: 0; line-height: 1.15; }
.prof-id .name-row .name-side { align-self: center; }
.name-side .icon-btn { margin: 0; width: 34px; height: 34px; display: grid; place-items: center; }
.name-side .verified { display: block; }

/* ---- Nov 9 2026 additions ---- */
#page { overscroll-behavior-y: none; } /* our pull-to-refresh, not the iPhone bounce on top of it */
#menu.closing { animation: fade-out .18s var(--ease) forwards; pointer-events: none; }
#menu.closing .menu-card { transition: transform .18s var(--ease); transform: scale(.96); }
@keyframes fade-out { to { opacity: 0; } }
#chat-menu { position: absolute; top: 68px; left: 68px; z-index: 30; min-width: 170px; padding: 6px; background: var(--ov); border: 1px solid var(--ov-line); border-radius: var(--r); display: flex; flex-direction: column; pointer-events: auto; }
#chat-menu button { border: 0; background: none; color: #fff; text-align: left; padding: 10px 12px; border-radius: 6px; font: inherit; font-weight: 700; }
#chat-menu button:hover { background: rgba(255,255,255,.08); }
body.touch #chat-menu { top: calc(max(12px, env(safe-area-inset-top)) + 52px); left: calc(max(12px, env(safe-area-inset-left)) + 52px); }
.dlg:has(.dm-dlg) { width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 24px); }
.dm-dlg { position: relative; padding: 0; gap: 0; height: min(640px, calc(100dvh - 24px)); }
.dm-dlg .dm-root { flex: 1; height: auto; }
.dm-dlg .dm-head { min-height: 60px; padding-right: 60px; }
.dm-x { position: absolute; top: 8px; right: 8px; z-index: 1; }
@media (max-width: 600px) { /* phones: the friends chat fills the screen, like a messaging app */
  .dlg:has(.dm-dlg) { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .dm-dlg { height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .dm-x { top: calc(8px + env(safe-area-inset-top)); }
}
.part-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.part-pick button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raised); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.part-pick button.on { border-color: var(--text); }
.part-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); }
.mod-msg { width: 100%; margin: 8px 0 4px; }
.mod-tools { margin-top: 8px; flex-wrap: wrap; }
.vio-msg { background: var(--raised); padding: 10px 12px; border-radius: var(--r); }
ul.changes { margin: 4px 0 12px; padding-left: 20px; line-height: 1.5; }
.log-pick { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; margin: 8px 0 4px; padding-bottom: 6px; scrollbar-width: thin; outline: none; -webkit-overflow-scrolling: touch; }
.log-pick .btn { flex: none; white-space: nowrap; }
.log-pick .btn { padding: 7px 12px; font-size: 14px; min-height: 0; }
.log-pick .btn { flex: none; }
.set-nav button#whats-new { text-align: left; }

.birth-field { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 14px; color: var(--muted); }
.birth-pick { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 8px; }
.bp { position: relative; min-width: 0; }
.bp-btn { width: 100%; font: 600 16px var(--body); padding: 10px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-btn.set { color: var(--text); }
.bp-btn[aria-expanded="true"] { border-color: var(--text); }
.bp-pop { animation: pop .16s var(--ease); transform-origin: top; position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 100%; min-width: 96px; max-height: 220px; scroll-snap-type: y proximity; overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.bp[data-k="by"] .bp-pop { left: auto; right: 0; }
.bp-grid { display: flex; flex-direction: column; gap: 2px; }
.bp-opt { border: 0; background: none; color: var(--text); font: 700 14px var(--body); padding: 9px 10px; border-radius: 6px; text-align: left; scroll-snap-align: center; }
.bp-opt:hover, .bp-opt:focus-visible { background: var(--raised); outline: none; }
.bp-opt.on { background: #22a45d; color: #fff; }
#birth-dlg, #birth-dlg .dlg-card { overflow: visible; }

/* the required birthday popup: the page behind it is dimmed and can't be used */
#birth-dlg::backdrop { background: rgba(0,0,0,.75); }

/* chat page: always fits the window (header and send box stay on screen); PC gets list + conversation side by side */
#hub[data-page="chat"] #page { overflow: hidden; display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
#hub[data-page="chat"] .dm-page { flex: 1; height: auto; min-height: 0; width: 100%; }
.dm-page.split { max-width: 1000px; display: grid; grid-template-columns: 300px 1fr; }
.dm-page.split > .dm-root { min-height: 0; }
.dm-page.split > .dm-root[data-mode="list"] { border-right: 1px solid var(--line); }
.dm-page.split [data-dm-back] { display: none; }
.dm-row.on { background: var(--raised); }
.dm-pick { margin: auto; }
/* layout sweep fixes: nothing in the top bar may push past the screen edge; the phone chat panel sits flush */
.search { min-width: 0; }
.top-right { flex: none; }
.topbar { min-width: 0; position: relative; z-index: 41; } /* above the pull-to-refresh circle, so it slides in under the bar */
@media (max-width: 900px) {
  #hub[data-page="chat"] #page { padding-left: 0; padding-right: 0; padding-top: 0; }
  #hub[data-page="chat"] .dm-page { margin: 0; }
}
.set-layout { grid-template-columns: 200px minmax(0, 1fr); }
.set-section { min-width: 0; }
.set .name-edit { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.set .name-edit input { min-width: 0; width: min(220px, 100%); }
@media (max-width: 760px) { .set-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { #download-app { display: none; } } /* it squeezed the search box to nothing on tablets */

/* backpack: hotbar along the bottom (numbered slots, white ring on the tool in your hand) + the full backpack above it */
#backpack { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#backpack.hidden { display: none; }
.bk-bar { display: flex; gap: 6px; }
.bk-slot { position: relative; width: 60px; height: 60px; border: 0; border-radius: var(--r); background: rgba(22,23,26,.62); color: #fff; display: grid; place-items: center; pointer-events: auto; touch-action: none; box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
  transition: background-color .18s var(--ease), box-shadow .22s var(--ease), opacity .18s var(--ease); }
.bk-slot:hover { background: rgba(44,45,50,.8); }
.bk-slot.on { background: rgba(44,45,50,.82); box-shadow: inset 0 0 0 2px #fff; }
.bk-slot.empty { background: rgba(22,23,26,.35); }
.bk-slot.lifted { opacity: .35; }
.bk-slot .bk-n { position: absolute; top: 3px; left: 6px; font-style: normal; font-size: 12px; font-weight: 800; opacity: .8; }
.bk-ic svg { display: block; width: 36px; height: 36px; }
.bk-name { padding: 0 4px; font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.bk-more svg { width: 22px; height: 22px; }
.bk-slot[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 6px; background: rgba(22,23,26,.88); font-size: 13px; font-weight: 800; white-space: nowrap; pointer-events: none; }
body.touch .bk-slot[data-tip]::after { content: none; }
body.touch .bk-slot { width: 52px; height: 52px; }
.bk-inv { width: min(560px, calc(100vw - 32px)); max-height: min(300px, 45vh); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r); background: rgba(22,23,26,.8); pointer-events: auto; animation: pop .18s var(--ease); }
.bk-inv[hidden] { display: none; }
.bk-head { display: flex; align-items: center; gap: 10px; }
.bk-head b { flex: 1; font-size: 16px; }
.bk-search { width: 180px; height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 14px; }
.bk-search:focus { outline: none; border-color: rgba(255,255,255,.5); }
.bk-grid { display: flex; flex-wrap: wrap; gap: 6px; min-height: 60px; overflow-y: auto; }
.bk-none { margin: auto; font-size: 13px; opacity: .7; }
.bk-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* chat bubbles: real text placed over the game (sharp on every screen), sized by the 3D distance in main.js */
#bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cbub, .cbub-tail { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; opacity: 0; }
.cbub { box-sizing: border-box; padding: 14px 22px; border-radius: 22px; background: #fff; color: #1b1b1f; font: 700 34px/42px var(--body); text-align: center; white-space: nowrap; }
.cbub > div { overflow: hidden; text-overflow: ellipsis; }
.cbub-tail { width: 32px; height: 16px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* chat button: unread messages while the chat is closed (white circle, top right) */
#topleft #chat-btn { position: relative; }
#chat-btn .cb-badge { position: absolute; top: -5px; right: -5px; box-sizing: border-box; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: #18181b; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none;
  opacity: 0; transform: scale(.6); transition: opacity .18s var(--ease), transform .22s var(--ease); }
#chat-btn .cb-badge.show { opacity: 1; transform: none; }
#chat-menu { animation: pop .16s var(--ease); transform-origin: top center; }

/* player card: click a name in the player list */
#pl-card { position: absolute; z-index: 31; width: 230px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r); background: rgba(20,20,24,.9); color: #fff; pointer-events: auto; animation: pop .16s var(--ease); transform-origin: top right; }
.plc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plc-head img { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); flex: none; }
.plc-head span { display: flex; flex-direction: column; min-width: 0; }
.plc-head b { display: flex; align-items: center; gap: 4px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plc-head small { color: rgba(255,255,255,.6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plc-acts { display: flex; flex-direction: column; gap: 6px; }
.plc-acts .mbtn { flex: none; height: 36px; font-size: 14px; }
#players .pl-row.tap { cursor: pointer; }

/* Examine avatar: in-game look (dark and see-through), avatar frame + wearing frame */
#examine { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(10,10,12,.3); pointer-events: auto; animation: fade .2s var(--ease); }
#examine.closing { animation: fade-out .18s var(--ease) forwards; pointer-events: none; }
.ex-win { width: min(720px, 100%); max-height: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--ov-line); border-radius: 12px; background: rgba(22,23,26,.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pop .22s var(--ease); }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-head span { display: flex; flex-direction: column; min-width: 0; }
.ex-head b { font-size: 20px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-head small { color: rgba(255,255,255,.6); font-size: 13px; }
.ex-x { width: 44px; height: 44px; font-size: 20px !important; flex: none; border: 0; border-radius: var(--r); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; }
.ex-x:hover { background: rgba(255,255,255,.16); }
.ex-body { display: grid; grid-template-columns: 260px 1fr; gap: 12px; min-height: 0; flex: 1; }
.ex-frame { border: 1px solid var(--ov-line); border-radius: var(--r); background: rgba(255,255,255,.04); min-height: 0; }
.ex-stage { height: 360px; overflow: hidden; cursor: grab; }
.ex-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.ex-wear { padding: 12px; overflow-y: auto; }
.ex-wear h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.ex-wear .items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0; }
.ex-wear .item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #fff; }
.ex-wear .item .thumb { background: rgba(255,255,255,.08); }
.ex-none { color: rgba(255,255,255,.6); font-size: 13px; }
@media (max-width: 620px), (max-height: 480px) and (orientation: landscape) {
  .ex-body { grid-template-columns: 1fr 1fr; }
  .ex-stage { height: auto; min-height: 220px; }
}

/* ---------- classic theme details ---------- */
html[data-classic], html[data-classic] body { font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif; }
[data-classic] .topbar { background: var(--cbar); border-bottom: 0; color: #fff; height: 44px; gap: 20px; }
[data-classic] .topbar .logo { font-size: 20px; }
[data-classic] .topbar .logo-back { fill: #fff; }
[data-classic] .topbar .me, [data-classic] .topbar .icon-btn { color: #fff; }
[data-classic] .topbar .me:hover, [data-classic] .topbar .icon-btn:hover { background: rgba(255,255,255,.18); border-radius: 2px; }
[data-classic] .topbar .search { background: var(--surface); border: 0; border-radius: 2px; height: 28px; color: #6d6d6d; max-width: 420px; margin-left: 0; }
[data-classic] .dropdown { background: var(--surface); color: var(--text); border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
[data-classic] .side { background: transparent; }
[data-classic] .side a { border-radius: 0; color: var(--text); font-weight: 600; }
[data-classic] .side a:hover { background: var(--hover); }
[data-classic] .side a.on { background: var(--surface); box-shadow: none; border-left: 4px solid var(--cblue); padding-left: 8px; }
[data-classic] .side .side-me { border-bottom-color: var(--line); }
[data-classic] h1, [data-classic] h2 { font-weight: 600; }
[data-classic] .row-head h2 { font-size: 20px; }
[data-classic] .tile-img, [data-classic] .prof-card, [data-classic] .set, [data-classic] .dlg-card, [data-classic] .btn { border-radius: 2px; }
[data-classic] .tile-img { border: 1px solid var(--line); }
[data-classic] .tile:hover .tile-img { transform: none; border-color: var(--cblue); }
[data-classic] .tile-title { font-weight: 600; }
[data-classic] .prof-card, [data-classic] .dlg-card { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
[data-classic] .btn { font-weight: 600; background: var(--surface); border-color: var(--line); }
[data-classic] .btn:hover { background: var(--raised); border-color: var(--muted); }
[data-classic] .btn.primary { background: #02b757; border-color: #02a14e; color: #fff; }
[data-classic] .btn.primary:hover { background: #029f4c; }
[data-classic] .seg { border-radius: 2px; }
[data-classic] .seg-ink { background: var(--cblue); border-radius: 2px; box-shadow: none; }
[data-classic] .seg button.on { color: #fff; }
[data-classic] #menu .seg-ink { background: var(--cblue); }
[data-classic] input:not([type="range"]), [data-classic] textarea, [data-classic] select { border-radius: 2px; }
/* generated: every big rounded box goes square */
[data-classic] .auth-card,
[data-classic] .catalog,
[data-classic] .dlg,
[data-classic] .dm-msg p,
[data-classic] .dm-msg.mine p,
[data-classic] .dm-page,
[data-classic] .ex-win,
[data-classic] .friend .req-count,
[data-classic] .menu-card,
[data-classic] .panel,
[data-classic] .prof-card,
[data-classic] .set-section,
[data-classic] .vio,
[data-classic] .vio-ban,
[data-classic] .wearing { border-radius: 2px; }
[data-classic] .set-nav button, [data-classic] .chat-box, [data-classic] #chat { border-radius: 2px; }
[data-classic] .set-nav button.on { border-left: 4px solid var(--cblue); box-shadow: none; }

/* the 3 lines button replaces the logo: it shows and hides the side menu (open by default on a computer, closed on a phone) */
#side-toggle { display: none; }
[data-classic] #side-toggle { display: grid; color: #fff; margin-left: -6px; }
[data-classic] #side-toggle:hover { background: rgba(255,255,255,.18); border-radius: 2px; }
[data-classic] .topbar .logo { display: none; }
[data-classic] body.side-shut .side { display: none; }
@media (max-width: 700px) {
  [data-classic] .hub-body { flex-direction: column; }
  [data-classic] .side { position: fixed; left: 0; top: 44px; bottom: 0; width: 250px; z-index: 40; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 14px 10px; background: var(--surface); border-top: 0; border-right: 1px solid var(--line);
    transform: translateX(-102%); transition: transform .2s var(--ease); box-shadow: 2px 0 8px rgba(0,0,0,.25); }
  [data-classic] body.side-open .side { transform: none; }
  [data-classic] body.side-shut .side { display: flex; }
  [data-classic] .side a { flex: none; min-height: 0; flex-direction: row; justify-content: flex-start; font-size: 15px; font-weight: 600; padding: 10px 12px; gap: 14px; }
  [data-classic] .side a::after { content: none !important; }
  [data-classic] .side a svg { width: 21px; height: 21px; }
  [data-classic] .side a.on { box-shadow: none; border-left: 4px solid var(--cblue); padding-left: 8px; }
  [data-classic] #page { padding-bottom: 24px; }
}

/* tablets: touch controls like a phone, roomier menus and bigger HUD like a computer */
@media (hover: none) and (pointer: coarse) and (min-width: 601px) {
  #menu { padding: 28px; }
  .menu-card { width: min(640px, 100%); height: auto; max-height: min(600px, 100%); }
  .hud-big { font-size: 40px; }
  body.touch #stick { width: 160px; height: 160px; }
  body.touch #chat { width: min(320px, 40%); }
}
/* foldables: the unfolded screen is almost square, so keep content in a centred column and out of the hinge */
@media (hover: none) and (pointer: coarse) and (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
  .menu-card { width: min(560px, 100%); }
  #page, #hub-main { margin-inline: auto; max-width: 900px; }
}
@media (horizontal-viewport-segments: 2) { #menu { padding-inline: calc(env(viewport-segment-right 0 0, 50%) + 16px) 16px; } }

/* ---- fixes for Update 3.5 ---- */
/* the verified tick is never tiny and never dropped under the name */
.verified { min-width: 14px; min-height: 14px; }
.player b { display: inline-flex; align-items: center; white-space: nowrap; }
.player b .verified { width: 18px; height: 18px; margin-left: 5px; }
.person b .verified, .dm-who .verified { width: 18px; height: 18px; }
.pl-name .verified { width: 16px; height: 16px; }
.name-side .verified, .prof-id h1 + .verified { width: 28px; height: 28px; flex: none; }
/* phones: smaller headings and text where a big size hid the game or the page */
@media (max-width: 600px) {
  .panel h2 { font-size: 20px; }
  .panel p { font-size: 14px; }
  .prof-id h1 { font-size: 26px; }
  .gp-info h1 { font-size: 26px; }
  h1 { font-size: clamp(22px, 7vw, 28px); }
}

/* Esc menu: see-through dark card (classic too), no blur so the game behind stays sharp */
.menu-card, [data-classic] .menu-card { background: rgba(20,20,24,.86); } /* same see-through level as the player list */
/* phone bottom bar follows the theme: classic used to make it transparent */
@media (max-width: 600px) { [data-classic] .side { background: var(--surface); } }
/* For You: game cards with the thumbnail on top and the title under it */
.fy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 18px; }
.fy-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fy-img { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--raised); transition: transform .2s var(--ease); }
.fy-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fy-card:hover .fy-img { transform: translateY(-3px); }
body.touch .fy-card:active .fy-img { transform: scale(.97); }
.fy-title { font-weight: 800; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ban screen: big heading, reason box, buttons */
.ban-screen { gap: 16px; padding: 28px; max-width: 520px; }
.ban-screen .ban-title { font-size: 32px; line-height: 1.1; }
.ban-screen .ban-sub { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ban-screen .ban-reason { background: var(--raised); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.ban-screen .ban-reason b { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ban-screen .ban-reason span { font-weight: 800; font-size: 17px; }
.ban-screen .ban-reason p { font-size: 15px; line-height: 1.45; }
.ban-screen .ban-reason small { font-size: 13px; }

/* Wallet + Marketplace (Update 4) */
.wallet { max-width: 880px; margin: 0 auto; padding: 8px 4px 40px; }
.wallet h2 { margin: 28px 0 10px; font-size: 18px; }
.w-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; text-align: left; color: var(--text); }
.w-card.on { border-color: var(--accent); }
.w-card h3 { margin: 0 0 4px; font-size: 16px; }
.w-card ul { margin: 10px 0 14px; padding-left: 18px; font-size: 14px; color: var(--muted); }
.w-num { display: block; font-size: 24px; font-weight: 800; }
.w-num small { font-size: 13px; font-weight: 600; color: var(--muted); }
.w-bal { display: flex; align-items: center; justify-content: space-between; }
.w-badge { font-weight: 800; font-size: 13px; padding: 4px 10px; border: 1px solid var(--accent); border-radius: var(--r); color: var(--accent); }
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.w-pack { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.w-pack:disabled { opacity: .5; cursor: default; }
.w-tx div { display: grid; grid-template-columns: 1fr auto 70px; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.w-tx div:last-child { border-bottom: 0; }
.w-tx .neg { color: #c4281c; text-align: right; } .w-tx .pos { color: #287f47; text-align: right; }
.av-tabs { display: flex; gap: 8px; padding: 0 0 10px; }
.av-tabs button { font-weight: 800; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); }
.av-tabs button.on { border-color: var(--accent); color: var(--accent); }
.m-top { display: flex; gap: 12px; align-items: baseline; margin-bottom: 10px; }
.m-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px; }
#wallet-pill { white-space: nowrap; }

.pix-i, .plus-i { vertical-align: -0.25em; margin-right: 4px; flex: none; }
#wallet-pill { display: inline-flex; align-items: center; }
#wallet-pill .pix-i { margin-right: 6px; }
.btn .pix-i { margin-right: 5px; }
.m-top b.pix { display: inline-flex; align-items: center; }

/* top-bar balance: plain icon + number, no box (icon follows the text colour: black in light mode, white in dark mode) */
#wallet-pill { color: var(--text); font-weight: 800; font-size: 15px; padding: 6px 4px; text-decoration: none; }
#wallet-pill:hover { color: var(--muted); }

/* Customize / Marketplace switch: top-left of the avatar stage, under the Avatar title */
.av-stage .av-tabs { position: absolute; left: 0; top: 56px; z-index: 2; padding: 0; cursor: default; }
.m-item .thumb { width: 100%; }
.m-item .btn { align-self: stretch; justify-content: center; }

/* ---------- friends page, game back button, Pix packs, liquid glass, phone landscape, foldables ---------- */
.h-link { color: inherit; }
.h-link:hover { text-decoration: underline; }
.friends.wrap { flex-wrap: wrap; overflow: visible; row-gap: 22px; }
#menu-back { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(0,0,0,.55); display: grid; place-items: center; cursor: pointer; }
#menu-back svg { width: 24px; height: 24px; }
#menu-back:hover { background: rgba(0,0,0,.75); }
.w-pack .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 22px; }
.w-pack .tags i { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--raised); color: var(--text); }
.w-pack .tags i.ltd { background: var(--accent); color: #fff; }
.w-pack.big { border-color: var(--accent); }

/* Liquid glass (Settings > Appearance): see-through blurred bars, tabs and menus */
body.glass .topbar, body.glass .side, body.glass #dm-dock .dm-bar, body.glass .menu-card, body.glass #topleft button, body.glass #menu-back, body.glass .w-card {
  background: color-mix(in srgb, var(--surface) 55%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-color: rgba(255,255,255,.22); }
body.glass .menu-card { background: rgba(20,20,24,.45); }
body.glass .side a.on { background: rgba(255,255,255,.22); box-shadow: none; }

/* a device widget (foldables): keep that edge clear when the player asks for it */
body[data-widget="left"] #hub { padding-left: 56px; }
body[data-widget="bottom"] #hub { padding-bottom: 56px; }
body[data-widget="left"] #topleft { left: calc(max(12px, env(safe-area-inset-left)) + 56px); }
body[data-widget="bottom"].touch #stick { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 56px); }

/* phones on their side: slim icon rail that clears the camera / Dynamic Island, smaller friends row */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .topbar { height: 46px; }
  .side { width: 60px; padding: 6px; gap: 0; overflow-y: auto; }
  .side .side-me { display: none; }
  .side a { padding: 9px 0; }
  #page { padding: 12px 16px 20px 14px; }
  .page-title { font-size: 22px; margin-bottom: 8px; }
  .friends { gap: 12px; }
  .friend, .friend .ring, .friend .pic { width: 60px; }
  .friend .ring, .friend .pic { height: 60px; }
  .friend { font-size: 12px; }
  .fy-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* smooth change when the phone turns or a foldable opens */
.side, .topbar, #page, .hub-body { transition: width .25s var(--ease), height .25s var(--ease), padding .25s var(--ease); }
@media (prefers-reduced-motion: reduce) { .side, .topbar, #page, .hub-body { transition: none; } }

/* camera / Dynamic Island on the side or top edge: the whole site stays inside the safe area (a notch on the left when the phone is on its side) */
#hub { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; }
#game-ui:has(#menu:not(.hidden)) #chat { opacity: 0; pointer-events: none; } /* chat text showed through the menu */
.vote { gap: 6px; }
.vote small { font-size: 13px; font-weight: 800; color: var(--muted); }
.vote-stat { align-self: center; font-size: 13px; font-weight: 800; color: var(--muted); margin-left: 6px; }

/* joystick dot: always centred, whatever size the stick is (it was hard-coded for 140px) */
#knob, body.touch #knob { left: calc(50% - 25px); top: calc(50% - 25px); }

/* download dialog */
.dl-h { margin: 14px 0 6px; font-size: 13px; color: var(--muted, #8e9099); font-weight: 600; }
.dl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 8px; background: rgba(127,127,127,.12); color: inherit; text-decoration: none; }
.dl-row:hover { background: rgba(127,127,127,.22); }
.dl-row b { font-weight: 600; white-space: nowrap; }
.dl-note { font-size: 12px; margin: 8px 0 0; }
.f-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.f-head .page-title { margin: 0; }
@media (max-width: 600px) {
  .side a[data-nav="friends"] { display: none; } /* phones: Friends lives in the side menu (logo button), not the bottom bar */
  .fy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}

/* ---- phones on their side (landscape, short screens) ---- */
@media (orientation: landscape) and (max-height: 500px) {
  /* Esc menu: nearly the full height, right of the back button, body scrolls, actions pinned */
  #menu { background: rgba(10,10,12,.78); place-items: stretch center; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) calc(max(12px, env(safe-area-inset-left)) + 56px); }
  #menu .menu-card { width: min(100%, 640px); height: 100%; max-height: none; }
  #menu .menu-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #menu .menu-actions { flex: none; }
  /* game page: two columns */
  #page:has(.gpl) { padding: 12px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
  .gpl { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 20px; align-items: start; }
  .gpl-l { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
  .gpl-l .play-big { margin: 0; height: 48px; }
  .gpl-r { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
  .gpl-r h1 { font-size: 24px; }
  .gpl-r .about { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #menu .menu-card { height: auto; min-height: min(60%, 420px); max-height: min(100%, 560px); }
  #menu .menu-body { flex: 1 1 auto; overflow-y: auto; }
}
@media (orientation: landscape) and (max-height: 500px) { .gpl-l .votes { flex-wrap: wrap; } .gpl-l .vote-stat { flex-basis: 100%; } }
@media (orientation: landscape) and (max-height: 500px) { body:not(.glass) #menu .menu-card { background: rgba(20,20,24,.95); } }
@media (max-width: 600px) and (orientation: portrait) { body:not(.glass) #menu .menu-card { background: rgba(20,20,24,.95); } }

/* like percentage sits under the like / dislike buttons; the counts and vote total are for big screens only */
.votes { flex-wrap: wrap; }
.vote-stat { flex-basis: 100%; margin: 2px 0 0; white-space: nowrap; }
@media (max-width: 900px), (max-height: 500px) { .vote small, .vc-n { display: none; } }

/* locked controls (e.g. buying with real money while payments are off): a flat grey look, no hover, press, sound or pointer */
button:disabled, .btn:disabled, .w-pack:disabled { cursor: default !important; transition: none; }
.btn:disabled:hover { border-color: var(--line); }
.btn:disabled:active, .w-pack:disabled:active { transform: none; }

.w-pack:disabled { opacity: 1; }



/* loading placeholders: soft blocks that pulse until the real content arrives */
@keyframes skel { 50% { opacity: .45; } }
.skel { display: grid; gap: 12px; margin-bottom: 18px; }
.skel i { display: block; height: 64px; border-radius: var(--r); background: var(--raised); animation: skel 1.1s ease-in-out infinite; }
.skel.grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.skel.grid i { height: auto; aspect-ratio: 1; }
.item .thumb:has(img.wait) { animation: skel 1.1s ease-in-out infinite; }

/* phone bottom bar: the You tab shows your own face */
.nav-head { display: none; width: 26px; height: 26px; border-radius: 50%; background: var(--raised); object-fit: cover; }
@media (max-width: 600px) {
  .side a[data-nav="profile"] svg { display: none; }
  .side a[data-nav="profile"] .nav-head { display: block; }
  .side a.on .nav-head { outline: 2px solid var(--accent); outline-offset: 1px; }
  #drawer .nav-head { display: none; }
  #drawer a[href="#/profile"]:not(.side-me) svg { display: block; }
}

.btn.primary:disabled { opacity: 1; }
.btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) { .side a[data-nav="wallet"] { display: none; } } /* on phones it lives in the side panel (tap the logo) */

/* Buy Pix: a price on the left, one green button with the amount on the right */
.w-intro { margin: 0 0 10px; }
.w-rows { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 12px; }
.w-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.w-row:first-child { border-top: 0; }
.w-usd { flex: 0 0 38%; text-align: center; font-size: 19px; font-weight: 800; }
.w-buy { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 14px; border: 0; border-radius: var(--r); background: var(--accent); color: #fff; font-weight: 800; }
.w-buy:hover { background: var(--accent-d); }
.w-buy:active { transform: scale(.98); }
.w-amt { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; }
.w-sub { font-size: 12px; font-weight: 700; opacity: .9; }
@media (max-width: 600px) { .w-row { padding: 12px 14px; } .w-usd { flex-basis: 34%; font-size: 17px; } }
.w-rows { max-width: 480px; }
.w-row { padding: 10px 16px; }
.w-usd { flex: 0 0 34%; font-size: 17px; }
.w-buy { flex: 0 0 auto; width: 220px; margin-left: auto; min-height: 42px; padding: 6px 12px; }
.w-amt { font-size: 16px; gap: 6px; }
.w-sub { font-size: 11px; }
@media (max-width: 600px) { .w-rows { max-width: none; } .w-buy { width: 60%; } }

.dl-main { display: block; text-align: center; margin: 12px 0; padding: 12px 16px; font-size: 15px; text-decoration: none; }
.dl-more { margin: 8px 0; } .dl-more summary { cursor: pointer; padding: 4px 0; }

/* ---------- iPhone Duo / foldables (Settings > Appearance > iPhone Duo layout) ----------
   body[data-fold] = fold-p / fold-l (folded, portrait / landscape) and open-p / open-l (unfolded).
   Tabs are always a glass pill: a side rail when folded (clear of the camera and Wi-Fi widget), a bottom bar when unfolded upright, a left rail when unfolded sideways. */
body[data-fold]:not([data-fold="off"]) .side {
  border: 1px solid rgba(255,255,255,.22); border-radius: 26px; box-sizing: border-box;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
}
body[data-fold]:not([data-fold="off"]) .side .side-me { display: none; }
body[data-fold]:not([data-fold="off"]) .side a.on { background: rgba(255,255,255,.22); box-shadow: none; color: var(--text); }
/* folded: vertical rail. Upright = right side under the camera, sideways = left side under the camera */
body[data-fold="fold-p"] .hub-body, body[data-fold="fold-l"] .hub-body, body[data-fold="open-l"] .hub-body { flex-direction: row; }
body[data-fold="fold-p"] .hub-body { flex-direction: row-reverse; }
body[data-fold="fold-p"] .side, body[data-fold="fold-l"] .side, body[data-fold="open-l"] .side {
  flex: none; width: 58px; height: auto; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 8px 6px; overflow-y: auto; align-self: flex-start; max-height: calc(100% - 72px);
}
body[data-fold="fold-p"] .side { margin: 64px 8px 8px 0; }
body[data-fold="fold-l"] .side { margin: 56px 0 8px 8px; }
body[data-fold="open-l"] .side { margin: 8px 0 8px 8px; }
body[data-fold="fold-p"] .side a, body[data-fold="fold-l"] .side a, body[data-fold="open-l"] .side a {
  flex: none; flex-direction: row; justify-content: center; gap: 0; min-width: 0; min-height: 46px; padding: 10px 0; font-size: 0; border-radius: 16px;
}
body[data-fold="fold-p"] .side a svg, body[data-fold="fold-l"] .side a svg, body[data-fold="open-l"] .side a svg { width: 24px; height: 24px; }
body[data-fold="fold-p"] .topbar { padding-right: 72px; } /* the camera / Wi-Fi pill sits in the top corner */
/* unfolded upright: tabs along the bottom */
body[data-fold="open-p"] .hub-body { flex-direction: column-reverse; }
body[data-fold="open-p"] .side {
  width: auto; flex-direction: row; justify-content: space-around; gap: 0; padding: 6px; margin: 0 16px calc(10px + env(safe-area-inset-bottom));
}
body[data-fold="open-p"] .side a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 6px 0; font-size: 0; border-radius: 18px; }
body[data-fold="open-p"] .side a svg { width: 23px; height: 23px; }
@media (prefers-reduced-motion: no-preference) { body[data-fold] .side { transition: margin .25s var(--ease), width .25s var(--ease), padding .25s var(--ease); } }
body[data-fold="fold-p"] .side a::after, body[data-fold="fold-l"] .side a::after, body[data-fold="open-l"] .side a::after { display: none; } /* rails are icons only */
body[data-fold]:not([data-fold="off"]) .side { box-shadow: 0 6px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35); }
body[data-fold="fold-l"] .topbar { padding-left: 72px; } /* sideways: the camera / Wi-Fi pill is on the left edge */
body[data-fold="fold-l"] .side a { min-height: 38px; padding: 6px 0; }

/* liquid glass for the Duo tabs: bright rim, light refraction, strong blur + colour boost */
body[data-fold]:not([data-fold="off"]) .side {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 62%, transparent), color-mix(in srgb, var(--surface) 28%, transparent));
  -webkit-backdrop-filter: blur(26px) saturate(1.9) brightness(1.04); backdrop-filter: blur(26px) saturate(1.9) brightness(1.04);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 26px rgba(0,0,0,.22), inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(255,255,255,.18), inset 0 0 14px rgba(255,255,255,.18);
}
/* unfolded upright: the bar floats over the page so what you scroll past shows through the glass */
body[data-fold="open-p"] .hub-body { position: relative; }
body[data-fold="open-p"] .side { position: absolute; left: 16px; right: 16px; bottom: 0; margin: 0 0 calc(10px + env(safe-area-inset-bottom)); z-index: 6; }
body[data-fold="open-p"] #page { padding-bottom: 104px; }
/* the tabs float ON the page (content runs the full width underneath, seen through the glass) */
body[data-fold]:not([data-fold="off"]) .hub-body { position: relative; }
body[data-fold="fold-p"] .side, body[data-fold="fold-l"] .side, body[data-fold="open-l"] .side { position: absolute; z-index: 6; margin: 0; }
body[data-fold="fold-p"] .side { right: 8px; top: 64px; left: auto; }
body[data-fold="fold-l"] .side { left: 8px; top: 56px; }
body[data-fold="open-l"] .side { left: 8px; top: 12px; }
body[data-fold="open-p"] .topbar { padding-right: 60px; } /* camera in the top corner */

/* iPhone Duo: EVERY tab is on the rail (phones normally keep some in the logo menu) */
body[data-fold]:not([data-fold="off"]) .side a:not(.hidden):not(.side-me) { display: flex; order: 0; }
/* camera = small dot in the top corner; the Wi-Fi + time widget sits left of it or under it (Settings > Appearance > Widget side) */
body[data-fold="fold-p"] .topbar, body[data-fold="open-p"] .topbar { padding-right: 130px; }
body[data-fold="fold-p"][data-wside="bottom"] .topbar, body[data-fold="open-p"][data-wside="bottom"] .topbar { padding-right: 96px; }
body[data-fold="fold-l"] .topbar { padding-left: 130px; }
body[data-fold="fold-l"][data-wside="bottom"] .topbar { padding-left: 96px; }
body[data-fold="fold-p"] .side { top: 56px; }
body[data-fold="fold-p"][data-wside="bottom"] .side { top: 92px; }
body[data-fold="fold-l"] .side { top: 56px; }
body[data-fold="fold-l"][data-wside="bottom"] .side { top: 92px; }

/* ---- Duo liquid glass v2: dark-tinted, clear rim, moves like liquid ---- */
body[data-fold]:not([data-fold="off"]) { --spring: cubic-bezier(.3,1.16,.5,1); }
body[data-fold]:not([data-fold="off"]) .side {
  background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 45%), rgba(16,18,24,.42);
  -webkit-backdrop-filter: blur(20px) saturate(1.9); backdrop-filter: blur(20px) saturate(1.9);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.1), inset 0 0 18px rgba(255,255,255,.08);
  transition: transform .5s var(--spring), margin .25s var(--ease), width .25s var(--ease);
  isolation: isolate;
}
body[data-fold]:not([data-fold="off"]) .side::after { /* light that follows the finger */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(110px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.32), transparent 65%); opacity: .9; transition: opacity .3s;
}
body[data-fold]:not([data-fold="off"]) .side:has(a:active) { transform: scale(1.05); }
body[data-fold]:not([data-fold="off"]) .side a { position: relative; z-index: 1; color: rgba(255,255,255,.78); background: none !important; transition: transform .35s var(--spring), color .2s; }
body[data-fold]:not([data-fold="off"]) .side a.on { color: #fff; }
body[data-fold]:not([data-fold="off"]) .side a:active { transform: scale(1.2); }
body[data-fold]:not([data-fold="off"]) .side a .nav-head { border-radius: 50%; }
body[data-fold]:not([data-fold="off"]) .side a::after { color: #fff; }
.lg-blob { position: absolute; left: 0; top: 0; z-index: 0; width: var(--bw, 0); height: var(--bh, 0); border-radius: 18px; pointer-events: none; opacity: 0;
  transform: translate(var(--bx, 0), var(--by, 0));
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 12px rgba(255,255,255,.25), 0 3px 10px rgba(0,0,0,.3);
  transition: transform .55s var(--spring), width .4s var(--spring), height .4s var(--spring), opacity .2s; }
.lg-blob.go { animation: lgStretch .55s var(--spring); }
@keyframes lgStretch { 0% { scale: 1; } 30% { scale: .94 1.14; } 100% { scale: 1; } }
body[data-fold="open-p"] .lg-blob.go { animation-name: lgStretchH; }
@keyframes lgStretchH { 0% { scale: 1; } 30% { scale: 1.14 .94; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .lg-blob, .side, .side a { transition: none !important; animation: none !important; } }
/* the top bar is glass too and the page runs underneath it, so the camera and the device's Wi-Fi/time widget sit over the page like in TikTok's update */
body[data-fold]:not([data-fold="off"]) .topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 8; background: color-mix(in srgb, var(--surface) 45%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7); border-bottom-color: transparent; }
body[data-fold]:not([data-fold="off"]) #page { padding-top: calc(56px + env(safe-area-inset-top) + 14px); }
body[data-fold="fold-p"] .side, body[data-fold="fold-l"] .side { top: 64px; }
body[data-fold="fold-p"][data-wside="bottom"] .side, body[data-fold="fold-l"][data-wside="bottom"] .side { top: 100px; }
body[data-fold="open-l"] .side { top: 68px; }

body.lens[data-fold]:not([data-fold="off"]) .side { -webkit-backdrop-filter: blur(2px) url(#lg-lens) blur(10px) saturate(1.9); backdrop-filter: blur(2px) url(#lg-lens) blur(10px) saturate(1.9); }

/* camera is a big punch-hole (about 40 pt); the device's Wi-Fi/time widget hugs it and reaches lower (time over Wi-Fi). Rails start under the widget. */
body[data-fold="fold-p"] .side, body[data-fold="fold-l"] .side { top: 84px; }
body[data-fold="fold-p"][data-wside="bottom"] .side, body[data-fold="fold-l"][data-wside="bottom"] .side { top: 126px; }

/* hold + drag the glass lens */
body[data-fold]:not([data-fold="off"]) .side a { touch-action: none; -webkit-user-drag: none; user-select: none; }
.lg-blob.hold { scale: 1.22; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 18px rgba(255,255,255,.3), 0 8px 22px rgba(0,0,0,.35); transition: transform .12s ease-out, width .25s, height .25s, scale .3s var(--spring), opacity .2s; animation: none; }
.side a.lg-over { color: #fff; transform: scale(1.12); }
/* unfolded sideways keeps the tabs on the right, like folded upright */
body[data-fold="open-l"] .hub-body { flex-direction: row-reverse; }
body[data-fold="open-l"] .side { left: auto; right: 8px; top: 72px; }
/* headings keep clear of the glass so "See all" stays visible (the thumbnails still run under it) */
body[data-fold="fold-p"] .row-head, body[data-fold="open-l"] .row-head { padding-right: 76px; }
body[data-fold="fold-l"] .row-head, body[data-fold="fold-l"] .page-title { padding-left: 76px; }
body[data-fold="fold-p"] .page-title, body[data-fold="open-l"] .page-title { padding-right: 76px; }
body[data-fold="fold-p"] .side, body[data-fold="fold-l"] .side { top: 80px; }
body[data-fold="fold-p"][data-wside="bottom"] .side, body[data-fold="fold-l"][data-wside="bottom"] .side { top: 132px; }
body[data-fold="open-l"] .topbar { padding-right: 88px; } /* the status widget sits in the top-right corner (no camera is visible when unfolded) */

/* Settings > Appearance > Font: Clean */
html[data-font="clean"] { --body: 'Source Sans 3', system-ui, sans-serif; --display: 'Source Sans 3', system-ui, sans-serif; }