@import url(/ui/scroll.css);
/* Cozy pixel UI: warm dark wood, a nail in each window corner, buttons that
   stick out on a 2 px lip and sink in while held. Pixel pieces are in
   ui/pixel/*.png (1 art pixel = 2 screen pixels).
   Fonts: Press Start 2P for titles (same as the pier's name font), only at
   8/16/24/32 px so it stays crisp. Body text is Space Grotesk for
   readability. The game is always dark regardless of the Windows theme.
   Sizes scale from text.js (LAYOUT.uiScale). */
@font-face { font-family: "Press Start 2P"; src: url(/ui/fonts/PressStart2P.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Space Grotesk"; src: url(/ui/fonts/SpaceGrotesk.ttf) format("truetype"); font-weight: 300 700; font-display: block; }

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  color-scheme: dark;
  --bg: #120c08; --panel: #2e1f16; --panel2: #3f2a1c; --well: #241810;
  --ink: #f6ead2; --sub: #dcc8a6; --micro: #b4966c; --faint: #7d6448; --hair: rgba(246,234,210,.14);
  --accent: #72b3d8; --accent-ink: #10202b; --ok: #8fca5c; --bad: #e6705a; --gold: #f2c04c;
  --wood: #7a4c2a; --wood-hi: #a2703f; --wood-lo: #56341c; --line: #22140c;
  --shadow: rgba(20,10,4,.55); --scrim: rgba(14,8,4,.6); --glass: rgba(36,24,16,.92);
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --tiny: "Space Grotesk", system-ui, sans-serif;
  --read: "Space Grotesk", system-ui, sans-serif;
  --s: var(--ui-scale, 1);
  /* the pixel pieces' edges, 2 screen px per art px */
  --px2: calc(2px * var(--s)); --e6: calc(6px * var(--s)); --e10: calc(10px * var(--s)); --e12: calc(12px * var(--s));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--read); font-size: calc(15px * var(--s)); overflow: hidden;
  font-variant-numeric: tabular-nums; image-rendering: pixelated; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
button, input, select { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
[hidden] { display: none !important; }
img { image-rendering: pixelated; }

.micro { font-family: var(--read); font-size: calc(12px * var(--s)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--micro); }
.dim { color: var(--faint); }
.prose { font-size: calc(16px * var(--s)); line-height: 1.5; color: var(--sub); margin: 0; }
.sub { font-size: calc(16px * var(--s)); }
.err { color: var(--bad); font-size: calc(14px * var(--s)); margin: 0; }
/* Press Start 2P only at multiples of 8 px, otherwise it blurs. */
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; margin: 0; letter-spacing: 0; line-height: 1.3; -webkit-font-smoothing: none;
  text-shadow: 0 2px 0 var(--line); }
h1 { font-size: calc(32px * var(--s)); }
h2 { font-size: calc(16px * var(--s)); }
h3 { font-size: calc(16px * var(--s)); }

/* --- pixel frames ------------------------------------------------------------ */
.panel, .modal-box, .dlg-box, .win, .ask, .ctx, .toast, .pk-tip, .trade-pop {
  border: var(--e12) solid transparent;
  border-image: url(/ui/pixel/panel.png) 6 fill / var(--e12) stretch;
  background: none;
  filter: drop-shadow(0 calc(4px * var(--s)) 0 var(--shadow));
}
.chip, .tabs, .seatinfo, .dock, .hint, input, select, .wd-item, .pk-hat, .wd-stage, iframe.site, .bootlog {
  border: var(--e6) solid transparent;
  border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch;
  background: none;
}

/* Buttons stick out of the wood on a lip; while held they sink in (lip gone,
   text shifts down). */
.btn { font-family: var(--read); font-size: calc(15px * var(--s)); font-weight: 700; letter-spacing: .03em;
  color: var(--ink); cursor: pointer; white-space: nowrap; padding: calc(3px * var(--s)) calc(10px * var(--s)) calc(3px * var(--s));
  border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10); background: none;
  border-image: url(/ui/pixel/btn.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch;
  text-shadow: 0 2px 0 rgba(34,20,12,.7); }
.btn:hover { filter: brightness(1.12); }
.btn:active, .btn.down { border-width: var(--e10) var(--e6) var(--e6); border-image-slice: 5 3 3 3 fill; border-image-width: var(--e10) var(--e6) var(--e6);
  border-image-source: url(/ui/pixel/btn_pressed.png); }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn:disabled:active { border-width: var(--e6) var(--e6) var(--e10); border-image-slice: 3 3 5 3 fill; border-image-width: var(--e6) var(--e6) var(--e10); border-image-source: url(/ui/pixel/btn.png); }
.btn.primary { border-image-source: url(/ui/pixel/btn_blue.png); color: #fff; }
.btn.primary:active { border-image-source: url(/ui/pixel/btn_blue_pressed.png); }
.btn.ok { border-image-source: url(/ui/pixel/btn_green.png); color: #fff; }
.btn.ok:active { border-image-source: url(/ui/pixel/btn_green_pressed.png); }
.btn.bad { border-image-source: url(/ui/pixel/btn_red.png); color: #fff; }
.btn.bad:active { border-image-source: url(/ui/pixel/btn_red_pressed.png); }
.btn.ghost { opacity: .85; }
.btn.small { font-size: calc(13px * var(--s)); padding: 0 calc(6px * var(--s)) calc(1px * var(--s)); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

input, select { font-family: var(--read); font-size: calc(17px * var(--s)); padding: calc(3px * var(--s)) calc(6px * var(--s));
  color: var(--ink); min-width: 0; flex: 1; outline: 0; }
input::placeholder { color: var(--faint); }
.row { display: flex; gap: calc(12px * var(--s)); align-items: center; }
.row.end { justify-content: flex-end; }
.row.wrap { flex-wrap: wrap; }
.waitbox { display: grid; gap: calc(8px * var(--s)); justify-items: start; border-left: calc(4px * var(--s)) solid var(--accent); padding: calc(4px * var(--s)) 0 calc(4px * var(--s)) calc(14px * var(--s)); }

/* --- setup screens --- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: calc(24px * var(--s));
  background: radial-gradient(ellipse at 50% 30%, #16203a 0%, var(--bg) 70%); }
.panel { width: min(540px, 100%); padding: calc(22px * var(--s)); display: grid; gap: calc(16px * var(--s)); }
.panel .foot { display: flex; justify-content: space-between; margin-top: calc(6px * var(--s)); color: var(--faint); }
.who { display: flex; gap: calc(14px * var(--s)); align-items: center; }
.who img { width: calc(48px * var(--s)); height: calc(48px * var(--s)); object-fit: cover; image-rendering: auto; }
.who .name { font-weight: 700; font-size: calc(20px * var(--s)); }
.who .btn { margin-left: auto; }
.bootlog { margin: 0; max-height: calc(240px * var(--s)); overflow: auto; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace;
  font-size: calc(12px * var(--s)); color: var(--sub); padding: calc(6px * var(--s)); }

/* --- the game --- */
/* Room sign: the whole sign is the button, CHANGE in yellow */
.roomchip .chg { font-size: calc(11px * var(--s)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-left: calc(4px * var(--s)); }
/* master volume, left of Settings */
.volchip { gap: calc(6px * var(--s)); }
.volchip input[type=range] { width: calc(110px * var(--s)); flex: none; }
.volicon { width: calc(24px * var(--s)); height: calc(24px * var(--s)); padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.volicon img { width: calc(20px * var(--s)); height: calc(20px * var(--s)); image-rendering: pixelated; display: block; }
.volicon .vol-off { display: none; }
.volicon.muted .vol-on { display: none; }
.volicon.muted .vol-off { display: block; }
/* Ctrl+O: hide the UI, just the game */
body.no-overlay .hud, body.no-overlay .pend, body.no-overlay .chatlog, body.no-overlay .toasts, body.no-overlay .hint,
body.no-overlay .dock, body.no-overlay .mydrops, body.no-overlay .win, body.no-overlay .trade-pop, body.no-overlay .pk-tip, body.no-overlay .ctx { display: none !important; }
.screen.game { display: block; padding: 0; background: #05070b; }
#pier { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#race { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chip { display: flex; gap: calc(8px * var(--s)); align-items: center; padding: calc(2px * var(--s)) calc(6px * var(--s));
  font-family: var(--read); font-size: calc(15px * var(--s)); color: var(--ink); }
.chip img { width: calc(22px * var(--s)); height: calc(22px * var(--s)); object-fit: cover; image-rendering: auto; }
.btnchip { cursor: pointer; }
.btnchip:hover { filter: brightness(1.25); }
.dot { width: calc(8px * var(--s)); height: calc(8px * var(--s)); background: var(--faint); display: inline-block; flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 2px rgba(95,208,104,.25); }
.dot.warn { background: var(--gold); box-shadow: 0 0 0 2px rgba(255,210,63,.25); }

.hud { position: absolute; top: var(--hud-margin, calc(12px * var(--s))); display: grid; gap: calc(8px * var(--s)); z-index: 20; }
.hud-left { left: var(--hud-margin, calc(12px * var(--s))); justify-items: start; }
.hud-right { right: var(--hud-margin, calc(12px * var(--s))); justify-items: end; }
/* Centre with layout, not translateX(-50%): the transform put buttons on
   half pixels and left 1px seams in the frame. */
/* Profile sits in the middle with two buttons on each side (1fr|auto|1fr).
   app.js fitTopRow() shrinks them (--ts) or wraps the row when the window is
   too narrow. */
.hud-top { left: 0; right: 0; pointer-events: none; --ts: 1; }
.toprow { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(6px * var(--s)); align-items: stretch; }
.toprow .side { display: flex; gap: calc(6px * var(--s)); align-items: stretch; }
.toprow .side.l { justify-content: flex-end; }
.toprow .btn { pointer-events: auto; font-size: calc(15px * var(--s) * var(--ts));
  padding: calc(4px * var(--s) * var(--ts)) calc(10px * var(--s) * var(--ts)) calc(6px * var(--s) * var(--ts)); }
.row.tight { gap: calc(6px * var(--s)); }
/* Items in a HUD row match the tallest one (Watch Stream = room sign,
   Settings = volume). */
.hud .row.tight { align-items: stretch; }
.hud .row.tight > .chip { align-items: center; }
/* Your profile button, with your face. */
.mebtn { display: inline-flex; align-items: center; gap: calc(6px * var(--s)); }
.mebtn img { width: calc(20px * var(--s) * var(--ts, 1)); height: calc(20px * var(--s) * var(--ts, 1)); object-fit: cover; image-rendering: auto; }
.stack { display: grid; gap: calc(6px * var(--s)); justify-items: start; }
.tabs { display: flex; gap: 0; }
.tab { font-family: var(--read); font-size: calc(14px * var(--s)); font-weight: 600; background: transparent; color: var(--micro);
  border: 0; padding: calc(2px * var(--s)) calc(10px * var(--s)); cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); box-shadow: inset 0 calc(-3px * var(--s)) 0 var(--accent); }
.btn.join { min-width: calc(190px * var(--s)); font-size: calc(20px * var(--s)); padding: calc(4px * var(--s)) calc(16px * var(--s)) calc(7px * var(--s));
  border-image-source: url(/ui/pixel/btn_green.png); color: #fff; }
.btn.join:active { border-image-source: url(/ui/pixel/btn_green_pressed.png); }
.btn.join.leave { border-image-source: url(/ui/pixel/btn_red.png); }
.btn.join.leave:active { border-image-source: url(/ui/pixel/btn_red_pressed.png); }
/* While on the pier the button splits: blue Refresh (new timer) on the
   left, red Leave on the right, together as wide as Join. */
.joinrow { display: flex; gap: calc(6px * var(--s)); min-width: calc(190px * var(--s)); justify-content: flex-end; }
.joinrow.split .btn.join { min-width: 0; flex: 1 1 0; }
.btn.join.refresh { border-image-source: url(/ui/pixel/btn_blue.png); }
.btn.join.refresh:active { border-image-source: url(/ui/pixel/btn_blue_pressed.png); }
.btn.join.refresh.cooling { filter: grayscale(1) brightness(.75); cursor: default; }
.seatinfo { padding: calc(2px * var(--s)) calc(8px * var(--s)); text-align: right; min-width: calc(190px * var(--s)); }
.seatinfo .big, .seat .big { font-family: var(--read); font-weight: 700; font-size: calc(22px * var(--s)); font-variant-numeric: tabular-nums; }
.btnchip.tester { filter: sepia(.6) saturate(2.4) hue-rotate(5deg); }
.btnchip.tester .micro { color: var(--gold); }

.dock { position: absolute; left: 50%; bottom: calc(12px * var(--s)); transform: translateX(-50%); display: flex; gap: calc(8px * var(--s)); align-items: center;
  padding: calc(2px * var(--s)) calc(6px * var(--s)); max-width: calc(100% - 24px); justify-content: center; z-index: 10; }
.dock .sep { width: 2px; align-self: stretch; background: var(--hair); margin: 0 calc(4px * var(--s)); }
.seat { min-width: calc(150px * var(--s)); padding-right: calc(6px * var(--s)); white-space: nowrap; }
.cmdbox { display: flex; }
.cmdbox input { width: calc(200px * var(--s)); font-size: calc(16px * var(--s)); }

.toasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--hud-margin, 12px) + 64px * var(--s)); z-index: 40; display: grid; gap: calc(6px * var(--s));
  width: min(480px, calc(100% - 520px)); min-width: calc(300px * var(--s)); pointer-events: none; }
.toast { padding: 2px calc(6px * var(--s)); font-size: calc(16px * var(--s)); line-height: 1.4; pointer-events: auto; animation: tin .18s steps(3); color: var(--ink); }
.toast.bad { color: #ffd0cc; }
.toast a { color: var(--accent); cursor: pointer; text-decoration: underline; }
@keyframes tin { from { transform: translateY(calc(-8px * var(--s))); opacity: 0; } }

.hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(78px * var(--s)); padding: 0 calc(6px * var(--s)); pointer-events: none;
  transition: opacity 1.2s; white-space: nowrap; z-index: 5; letter-spacing: .03em; }
.hint.fade { opacity: 0; }
.hint b { color: var(--ink); font-weight: 400; }

/* --- chat log: bot lines shown as plates --- */
.chatlog { position: absolute; left: calc(12px * var(--s)); bottom: calc(78px * var(--s)); width: min(var(--chat-width, 460px), calc(100% - 24px)); display: flex; flex-direction: column;
  gap: calc(4px * var(--s)); pointer-events: none; z-index: 5; }
.chatlog .cl { align-self: flex-start; max-width: 100%; background: rgba(8,11,17,.84); color: #dfe7f1;
  box-shadow: inset calc(3px * var(--s)) 0 0 #6fc3ff, 0 2px 0 rgba(0,0,0,.45);
  padding: calc(5px * var(--s)) calc(11px * var(--s)) calc(6px * var(--s)) calc(12px * var(--s)); font-size: calc(14px * var(--s)); line-height: 1.38; letter-spacing: .01em; pointer-events: auto;
  animation: clin .25s steps(4); transition: opacity 3s; }
.chatlog .cl.me { box-shadow: inset calc(3px * var(--s)) 0 0 var(--gold), 0 2px 0 rgba(0,0,0,.45); background: rgba(34,27,8,.9); }
.chatlog .cl.old { opacity: .45; }
/* Name the same size as the text. */
.chatlog .cl-who { font-family: var(--read); font-size: calc(14px * var(--s)); font-weight: 700; color: #6fc3ff; margin-right: calc(5px * var(--s)); }
.chatlog .cl.me .cl-who { color: var(--gold); }
.chatlog .cl a { color: #6fc3ff; text-decoration: underline; cursor: pointer; }
@keyframes clin { from { transform: translateX(calc(-12px * var(--s))); opacity: 0; } }

/* --- pop-ups --- */
.modal { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 95; }
.modal-box { position: relative; width: min(480px, calc(100% - 32px)); padding: calc(16px * var(--s)); display: grid; gap: calc(12px * var(--s)); }
.modal-box.wide { width: min(660px, calc(100% - 32px)); }
.modal-x { position: absolute; top: 2px; right: 2px; width: calc(30px * var(--s)); height: calc(30px * var(--s)); font-family: var(--read); font-size: calc(22px * var(--s)); line-height: 1;
  cursor: pointer; background: transparent; color: var(--sub); border: 0; }
.modal-x:hover { color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--s)) calc(14px * var(--s)); }
.fields label { display: grid; gap: calc(4px * var(--s)); }
.fields input { font-size: calc(16px * var(--s)); }
.check { display: flex; align-items: center; gap: calc(10px * var(--s)); cursor: pointer; }
.check input { flex: none; width: calc(18px * var(--s)); height: calc(18px * var(--s)); accent-color: var(--accent); border: 0; border-image: none; }
.obsrow { display: flex; align-items: center; gap: calc(4px * var(--s)); padding: calc(4px * var(--s)) calc(6px * var(--s)); background: var(--well); box-shadow: inset 0 0 0 2px var(--hair); }
.obs-url { flex: 1; min-width: 0; font-size: calc(14px * var(--s)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sub);
  -webkit-user-select: text; user-select: text; }
.obs-url.full { white-space: normal; word-break: break-all; color: var(--ink); }
.iconbtn { flex: none; width: calc(34px * var(--s)); height: calc(34px * var(--s)); padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: none;
  border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10);
  border-image: url(/ui/pixel/btn.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; }
.iconbtn:hover { filter: brightness(1.12); }
.iconbtn:active { border-width: var(--e10) var(--e6) var(--e6); border-image: url(/ui/pixel/btn_pressed.png) 5 3 3 3 fill / var(--e10) var(--e6) var(--e6) stretch; }
.iconbtn.done { color: var(--ok); }
.iconbtn img { width: calc(16px * var(--s)); height: calc(16px * var(--s)); image-rendering: pixelated; display: block; }
.iconbtn .eye-off { display: none; }
.iconbtn.on .eye-on { display: none; }
.iconbtn.on .eye-off { display: block; }
/* Settings tabs */
.modal-box.prefs-box { width: min(620px, calc(100% - 32px)); }
.prefs-tabs { justify-self: start; }
.pref-pane { display: grid; gap: calc(10px * var(--s)); min-height: calc(220px * var(--s)); align-content: start; }
.pref-pane .check span { font-size: calc(15px * var(--s)); }
.sliders { display: grid; gap: calc(10px * var(--s)); }
.sliders label { display: grid; grid-template-columns: calc(130px * var(--s)) 1fr 36px auto; align-items: center; gap: calc(10px * var(--s)); font-size: calc(15px * var(--s)); }
.stop-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(14px * var(--s)); }
.stop-vol { display: grid; grid-template-columns: auto 1fr 36px; align-items: center; gap: calc(10px * var(--s)); font-size: calc(15px * var(--s)); }
.stop-vol:has(input:disabled) { opacity: .45; }
.stop-vol input:disabled { cursor: default; }
.sliders .vnum, .stop-vol .vnum { text-align: right; font-size: calc(14px * var(--s)); color: var(--sub); }
.keys { font-size: calc(14px * var(--s)); line-height: 1.7; color: var(--sub); }
.keys b { color: var(--ink); }
.pausebox { display: flex; align-items: center; gap: calc(10px * var(--s)); padding: calc(8px * var(--s)) calc(10px * var(--s)); background: var(--well); box-shadow: inset 0 0 0 2px var(--hair); }
.pausebox .prose { flex: 1; }
.pref-sec { display: grid; gap: calc(8px * var(--s)); padding: calc(10px * var(--s)) 0; border-top: 2px solid var(--hair); border-bottom: 2px solid var(--hair); }
.pref-sec + .pref-sec { border-top: 0; }
.pfp-show { display: flex; align-items: center; gap: calc(14px * var(--s)); flex-wrap: wrap; }
.pfp-num { display: flex; align-items: center; gap: calc(8px * var(--s)); }
.pfp-num input { width: calc(72px * var(--s)); flex: none; font-size: calc(16px * var(--s)); }
.pfp-num input:disabled { opacity: .4; }
.check input[type=radio] { accent-color: var(--accent); }
.dlg { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 100; }
.dlg-box { width: min(460px, calc(100% - 32px)); padding: calc(16px * var(--s)); display: grid; gap: calc(12px * var(--s)); }
#dlg-in { font-size: calc(17px * var(--s)); }
.roomlist { display: flex; flex-wrap: wrap; gap: calc(6px * var(--s)); }
.roomlist .btn.here { border-image-source: url(/ui/pixel/btn_blue.png); color: #fff; }

/* test bench */
.bench-sec { display: grid; gap: calc(8px * var(--s)); padding: calc(10px * var(--s)) 0; border-top: 2px solid var(--hair); }
#bench-in { flex: 1; min-width: calc(180px * var(--s)); }
.cmdchips { display: flex; flex-wrap: wrap; gap: calc(4px * var(--s)); max-height: calc(200px * var(--s)); overflow-y: auto; }
.cmdchips .btn { font-size: calc(12px * var(--s)); }

/* --- floating windows: drag by title, resize from edges/corners --- */
.win { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: calc(320px * var(--s)); min-height: calc(240px * var(--s)); }
.win-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(12px * var(--s)); padding: 2px calc(4px * var(--s)) calc(8px * var(--s));
  border-bottom: 2px solid var(--hair); cursor: move; user-select: none; }
.win-head .modal-x { position: static; flex: none; }
.win-body { flex: 1; min-height: 0; overflow: auto; padding: calc(10px * var(--s)) calc(4px * var(--s)) calc(4px * var(--s)); display: grid; gap: calc(10px * var(--s)); align-content: start; }
.win-body.flush { padding: calc(8px * var(--s)) 0 0; overflow: hidden; display: block; }
.win-edge { position: absolute; z-index: 2; }
.win-edge.n, .win-edge.s { left: calc(6px * var(--s)); right: calc(6px * var(--s)); height: calc(10px * var(--s)); cursor: ns-resize; }
.win-edge.e, .win-edge.w { top: calc(6px * var(--s)); bottom: calc(6px * var(--s)); width: calc(10px * var(--s)); cursor: ew-resize; }
.win-edge.n { top: calc(-12px * var(--s)); } .win-edge.s { bottom: calc(-12px * var(--s)); } .win-edge.e { right: calc(-12px * var(--s)); } .win-edge.w { left: calc(-12px * var(--s)); }
.win-edge.ne, .win-edge.nw, .win-edge.se, .win-edge.sw { width: calc(18px * var(--s)); height: calc(18px * var(--s)); }
.win-edge.ne { top: calc(-12px * var(--s)); right: calc(-12px * var(--s)); cursor: nesw-resize; } .win-edge.sw { bottom: calc(-12px * var(--s)); left: calc(-12px * var(--s)); cursor: nesw-resize; }
.win-edge.nw { top: calc(-12px * var(--s)); left: calc(-12px * var(--s)); cursor: nwse-resize; } .win-edge.se { bottom: calc(-12px * var(--s)); right: calc(-12px * var(--s)); cursor: nwse-resize; }
/* Resize grip lines (windows and the My drops drawer). */
.win-edge.se::after, .md-grip::after { content: ""; position: absolute; right: calc(12px * var(--s)); bottom: calc(12px * var(--s)); width: calc(10px * var(--s)); height: calc(10px * var(--s));
  background: linear-gradient(135deg, transparent 50%, var(--micro) 50% 60%, transparent 60% 75%, var(--micro) 75% 85%, transparent 85%); }
iframe.site { width: 100%; height: 100%; display: block; background: #0a0a0a; }
body.dragging iframe { pointer-events: none; }
body.dragging { user-select: none; }
body[data-cursor="n"], body[data-cursor="s"] { cursor: ns-resize; }
body[data-cursor="e"], body[data-cursor="w"] { cursor: ew-resize; }
body[data-cursor="ne"], body[data-cursor="sw"] { cursor: nesw-resize; }
body[data-cursor="nw"], body[data-cursor="se"] { cursor: nwse-resize; }
body[data-cursor="move"] { cursor: move; }

/* wardrobe: character on the left, items on the right */
.modal-box.wardrobe-box { width: min(var(--wardrobe-width, 1040px), calc(100% - 32px)); height: min(var(--wardrobe-height, 720px), calc(100% - 48px));
  grid-template-rows: auto auto 1fr; }
.wd-body { display: grid; grid-template-columns: minmax(260px, 42%) 1fr; gap: calc(14px * var(--s)); min-height: 0; }
.wd-left { display: grid; grid-template-rows: 1fr auto; gap: calc(8px * var(--s)); min-height: 0; }
.wd-right { display: grid; grid-template-rows: auto 1fr; gap: calc(8px * var(--s)); min-height: 0; }
.wd-stage { position: relative; min-height: calc(220px * var(--s)); overflow: hidden; background: #070a12; }
.wd-stage iframe { position: absolute; left: 0; top: 0; width: calc(1920px * var(--s)); height: calc(1080px * var(--s)); border: 0; transform-origin: 0 0; pointer-events: none; }
.wd-hook { position: absolute; right: calc(6px * var(--s)); bottom: calc(6px * var(--s)); padding: calc(3px * var(--s)); background: rgba(8,11,17,.72); line-height: 0; }
.wd-hook img { width: calc(34px * var(--s)); height: calc(34px * var(--s)); object-fit: contain; }
.wd-note { margin: 0; letter-spacing: .03em; text-transform: none; }
.wd-tabs { justify-self: start; }
.wd-list { overflow: auto; min-height: 0; display: grid; gap: calc(10px * var(--s)); align-content: start; padding-right: calc(4px * var(--s)); }
.wd-row { display: flex; gap: calc(6px * var(--s)); align-items: center; }
.wd-row .micro { margin-right: calc(6px * var(--s)); }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(112px * var(--s)), 1fr)); gap: calc(6px * var(--s)); }
.wd-item { position: relative; display: grid; justify-items: center; gap: 2px; padding: calc(4px * var(--s)) 2px; cursor: pointer;
  color: var(--ink); font-family: var(--read); text-align: center; }
.wd-item:hover { filter: brightness(1.3); }
.wd-item.on { border-image-source: url(/ui/pixel/slot_on.png); border-image-slice: 3 3 5 3 fill; }
.wd-item.next { border-image-source: url(/ui/pixel/slot_next.png); border-image-slice: 3 3 5 3 fill; }
.wd-item.dim { opacity: .55; }
.wd-item .pic { width: calc(64px * var(--s)); height: calc(52px * var(--s)); display: grid; place-items: center; }
.wd-item .pic img { max-width: calc(60px * var(--s)); max-height: calc(50px * var(--s)); }
.wd-item .pic.txt { font-family: var(--read); font-size: calc(22px * var(--s)); color: var(--micro); }
.wd-item .nm { font-size: calc(13px * var(--s)); font-weight: 600; line-height: 1.2; }
.wd-item .sub { font-size: calc(11px * var(--s)); color: var(--micro); }
.wd-item .badge { position: absolute; top: calc(-4px * var(--s)); right: calc(-4px * var(--s)); font-family: var(--tiny); font-size: calc(9px * var(--s)); text-transform: uppercase;
  background: var(--gold); color: #16181b; padding: 1px calc(4px * var(--s)); }
.wd-item .badge.on { background: var(--accent); color: var(--accent-ink); }

/* hat picker (sacrifice / gift) and the trade window */
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(104px * var(--s)), 1fr)); gap: calc(6px * var(--s)); }
.pk-hat { display: grid; justify-items: center; gap: 2px; padding: calc(4px * var(--s)) 2px; cursor: pointer; font-family: var(--read); color: var(--ink); }
.pk-hat:hover { filter: brightness(1.3); }
.pk-hat.no { opacity: .35; cursor: not-allowed; filter: none; }
.pk-hat.picked { border-image-source: url(/ui/pixel/slot_on.png); border-image-slice: 3 3 5 3 fill; }
.pk-hat img { width: calc(60px * var(--s)); height: calc(44px * var(--s)); object-fit: contain; }
.pk-hat .nm { font-size: calc(13px * var(--s)); font-weight: 600; text-align: center; line-height: 1.2; }
.pk-hat .pct { font-family: var(--tiny); font-size: calc(11px * var(--s)); color: var(--ok); }
.pk-tip { position: fixed; z-index: 200; max-width: calc(300px * var(--s)); padding: 2px calc(6px * var(--s)); font-size: calc(14px * var(--s)); line-height: 1.45; pointer-events: none; }
/* trade window: two avatars, a 3x3 grid under each */
.tr-body { align-content: start; }
.tr-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(12px * var(--s)); align-items: start; }
.tr-mid { align-self: center; font-size: calc(28px * var(--s)); color: var(--micro); }
.tr-side { display: grid; justify-items: center; gap: calc(6px * var(--s)); }
.tr-av { width: calc(120px * var(--s)); height: calc(128px * var(--s)); }
.tr-avc { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tr-name { font-weight: 700; font-size: calc(17px * var(--s)); }
.tr-grid { display: grid; grid-template-columns: repeat(3, calc(76px * var(--s))); grid-auto-rows: calc(76px * var(--s)); gap: calc(6px * var(--s)); }
.tr-cell { border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; position: relative; }
.tr-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.tr-cell.edit, .tr-cell[data-pick] { cursor: pointer; }
.tr-cell.edit:hover, .tr-cell[data-pick]:hover { filter: brightness(1.3); }
.tr-cell.picked { border-image-source: url(/ui/pixel/slot_on.png); border-image-slice: 3 3 5 3 fill; }
.tr-cell.no { opacity: .3; cursor: not-allowed; filter: none; }
.tr-pick { display: grid; gap: calc(6px * var(--s)); border-top: 2px solid var(--hair); padding-top: calc(10px * var(--s)); }
.tr-pick[hidden] { display: none; }
.tr-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, calc(62px * var(--s))); grid-auto-rows: calc(62px * var(--s)); gap: calc(5px * var(--s)); max-height: calc(210px * var(--s)); overflow: auto; }
.tr-foot { display: grid; gap: calc(8px * var(--s)); border-top: 2px solid var(--hair); padding-top: calc(10px * var(--s)); }
.tr-foot .row.end { align-items: center; }
.trade-pop { position: fixed; left: 50%; top: 42%; transform: translateX(-50%); z-index: 88;
  display: grid; justify-items: center; gap: calc(8px * var(--s)); padding: calc(6px * var(--s)) calc(30px * var(--s)) calc(8px * var(--s)); min-width: calc(340px * var(--s)); animation: tpin .2s steps(3); }
@keyframes tpin { from { transform: translate(-50%, -8px); opacity: 0; } }
.trade-pop[hidden] { display: none; }
.trade-pop .modal-x { position: absolute; top: calc(-4px * var(--s)); right: calc(-4px * var(--s)); }
.trade-pop .micro { color: var(--gold); }
.trade-pop p { margin: 0; font-size: calc(18px * var(--s)); font-weight: 700; text-align: center; }

/* inventory: character (wardrobe) on the left, items on the right */
.inv-body { grid-template-columns: minmax(240px, 36%) 1fr; gap: calc(14px * var(--s)); height: 100%; align-content: stretch; }
.inv-left { display: grid; grid-template-rows: 1fr auto auto auto; gap: calc(8px * var(--s)); min-height: 0; }
.inv-left select { flex: 1; font-size: calc(15px * var(--s)); }
.inv-right { display: flex; flex-direction: column; gap: calc(8px * var(--s)); min-height: 0; }
.inv-right > .tabs { align-self: flex-start; }
.inv-right > .inv-grid { flex: 1 1 0; }
.subtabs { justify-self: start; }
.subtabs .tab { font-size: calc(13px * var(--s)); }
.inv-group { grid-column: 1 / -1; font-weight: 700; font-size: calc(13px * var(--s)); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid var(--hair); padding: calc(6px * var(--s)) 2px 2px; }
.inv-group .dim { color: var(--faint); font-weight: 400; }
.inv-item.dim { opacity: .55; }
/* 0.188.0 (his ask): an item only points, lights up or presses when a click does something (.can / .act) */
.found { border-bottom: 1px dotted var(--micro); cursor: help; }
.tip-live { pointer-events: auto; }
/* Latest drops */
.dr-body { grid-template-rows: auto 1fr; height: 100%; }
.dr-sort { gap: calc(6px * var(--s)); }
/* All drop cards the same size: equal rows, names on one line with an
   ellipsis. */
.dr-grid { min-height: 0; grid-template-columns: repeat(auto-fill, minmax(calc(108px * var(--s)), 1fr)); grid-auto-rows: 1fr; }
.dr-item { align-content: start; min-width: 0; }
.dr-item .nm, .dr-item .dr-who { display: block; width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-who { font-size: calc(12px * var(--s)); color: #6fc3ff; text-align: center; }
.dr-ago { font-size: calc(11px * var(--s)); color: var(--micro); }
/* recap player */
.pl-body { grid-template-rows: 1fr auto; height: 100%; padding: calc(8px * var(--s)) 0 0; }
.pl-screen { background: #000; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.pl-screen video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.pl-bar { display: flex; align-items: center; gap: calc(10px * var(--s)); }
.pl-bar input[type=range] { flex: 1; min-width: calc(60px * var(--s)); }
.pl-btn { min-width: calc(44px * var(--s)); }
.pl-time { font-size: calc(13px * var(--s)); color: var(--sub); min-width: calc(38px * var(--s)); text-align: center; }
.pl-vol { display: flex; align-items: center; gap: calc(6px * var(--s)); width: calc(150px * var(--s)); flex: none; }
/* rooms window has a fixed size */
.win.fixed { width: calc(var(--rooms-width, 480px) * var(--s)); min-height: 0; }
.win.fixed .win-body { overflow: visible; }
/* Inventory slots: square wooden buttons that press in while held.
   Worn = blue, "next cast" = yellow. All the same size. */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, calc(96px * var(--s))); grid-auto-rows: calc(96px * var(--s));
  justify-content: start; gap: calc(6px * var(--s)); align-content: start; overflow: auto; min-height: 0; padding: 2px 2px calc(6px * var(--s)); }
.inv-grid > .inv-group, .inv-grid > .inv-sec, .inv-grid > .inv-wide { align-self: end; }
.inv-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 2px; cursor: default; min-width: 0;
  border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10);
  border-image: url(/ui/pixel/slot.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; }
.inv-item:is(.can, .act):active { border-width: var(--e10) var(--e6) var(--e6); border-image: url(/ui/pixel/slot_pressed.png) 5 3 3 3 fill / var(--e10) var(--e6) var(--e6) stretch; }
.inv-item:is(.can, .act) { cursor: pointer; }
.inv-item:is(.can, .act):hover { filter: brightness(1.14); }
.inv-item.on { border-image-source: url(/ui/pixel/slot_on.png); }
.inv-item.on:is(.can, .act):active { border-image-source: url(/ui/pixel/slot_on_pressed.png); }
.inv-item.next { border-image-source: url(/ui/pixel/slot_next.png); }
.inv-item.next:is(.can, .act):active { border-image-source: url(/ui/pixel/slot_next_pressed.png); }
.inv-item .nm { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 var(--line); }
.inv-pic { width: calc(54px * var(--s)); height: calc(42px * var(--s)); display: grid; place-items: center; }
.inv-pic img { max-width: calc(50px * var(--s)); max-height: calc(40px * var(--s)); image-rendering: pixelated; }
.inv-pic .txt { font-size: calc(22px * var(--s)); color: var(--micro); }
.inv-cv { width: calc(54px * var(--s)); height: calc(42px * var(--s)); image-rendering: pixelated; }
.inv-item .nm { font-size: calc(12px * var(--s)); font-weight: 600; line-height: 1.2; text-align: center; }
.inv-n { position: absolute; left: 2px; top: calc(-4px * var(--s)); font-family: var(--read); font-size: calc(16px * var(--s)); font-weight: 700; color: var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.7); }
.inv-item .badge { position: absolute; top: calc(-4px * var(--s)); right: calc(-4px * var(--s)); font-family: var(--read); font-size: calc(10px * var(--s)); font-weight: 700; text-transform: uppercase; background: var(--gold); color: #16181b; padding: 1px calc(4px * var(--s)); }
.inv-item .inv-num { position: absolute; left: 2px; top: calc(-4px * var(--s)); font-family: var(--read); font-size: calc(11px * var(--s)); font-weight: 700; color: var(--micro); text-shadow: 0 2px 0 rgba(0,0,0,.7); font-variant-numeric: tabular-nums; }
.inv-item .badge.on { background: var(--accent); color: var(--accent-ink); }
.inv-item .badge.hook { top: auto; bottom: calc(-4px * var(--s)); background: var(--bad); color: #fff; }
.inv-wide { grid-column: 1 / -1; }
.inv-note { margin: 0; }
[data-itab]::after { content: " " attr(data-n); color: var(--faint); }
.ctx button:disabled { opacity: .4; cursor: not-allowed; }
.pk-tip .dim { color: var(--micro); font-size: calc(12px * var(--s)); }

/* Recaps */
.rc-body { align-content: start; }
.rc-body > .row { justify-content: space-between; align-items: center; }
.rc-body > .row p { margin: 0; }
.rc-list { display: grid; gap: calc(8px * var(--s)); }
.rc-row { display: grid; grid-template-columns: calc(176px * var(--s)) 1fr auto; gap: calc(12px * var(--s)); align-items: center; padding: calc(4px * var(--s));
  border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.rc-row.playing { border-image-source: url(/ui/pixel/slot_next.png); border-image-slice: 3 3 5 3 fill; }
.rc-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-dur { position: absolute; right: calc(3px * var(--s)); bottom: calc(3px * var(--s)); font-family: var(--tiny); font-size: calc(10px * var(--s)); background: rgba(0,0,0,.75); padding: 1px calc(4px * var(--s)); }
.rc-text { display: grid; gap: calc(3px * var(--s)); min-width: 0; }
.rc-kind { color: var(--gold); }
.rc-what { font-size: calc(16px * var(--s)); line-height: 1.25; }
.rc-meta { display: flex; gap: calc(10px * var(--s)); font-size: calc(13px * var(--s)); }
.rc-who { color: #6fc3ff; }
.rc-acts { display: grid; gap: calc(6px * var(--s)); justify-items: end; }

/* sacrifice / gift prompt, centred */
.askc { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; background: var(--scrim); }
.askc[hidden] { display: none; }
.askc-box { width: min(560px, calc(100% - 32px)); display: grid; gap: calc(10px * var(--s)); padding: calc(12px * var(--s)) calc(16px * var(--s));
  border: calc(12px * var(--s)) solid transparent; border-image: url(/ui/pixel/panel.png) 6 fill / var(--e12) stretch;
  filter: drop-shadow(0 calc(4px * var(--s)) 0 var(--shadow)); animation: tin .2s steps(3); }
.askc-box.gift { width: min(720px, calc(100% - 32px)); }
.askc-box > .micro { color: var(--gold); }
.askc-body { display: grid; grid-template-columns: calc(190px * var(--s)) 1fr; gap: calc(16px * var(--s)); align-items: center; }
.askc-hat { height: calc(150px * var(--s)); border: var(--e6) solid transparent;
  border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.askc-hat canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.askc-info { display: grid; gap: calc(6px * var(--s)); }
.askc-info p { margin: calc(4px * var(--s)) 0 0; }
.askc-name { font-size: calc(20px * var(--s)); }
.askc-row { display: flex; justify-content: space-between; gap: calc(10px * var(--s)); border-bottom: 2px solid var(--hair); padding-bottom: calc(3px * var(--s)); }
.askc-box .row.end { align-items: center; gap: calc(10px * var(--s)); }
.askc-box .row.end .micro { margin-right: auto; }
.btn.hold { position: relative; overflow: hidden; min-width: calc(170px * var(--s)); user-select: none; }
.btn.hold { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; }
.hold-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #b8ff7a; mix-blend-mode: screen; opacity: .85; pointer-events: none; }
.hold-label { position: relative; }

/* bottom right: things waiting for the cast */
.pend { position: absolute; right: var(--hud-margin, calc(12px * var(--s))); bottom: calc(var(--hud-margin, calc(12px * var(--s))) + calc(8px * var(--s))); z-index: 30; display: grid; gap: calc(4px * var(--s));
  min-width: calc(220px * var(--s)); padding: 2px calc(6px * var(--s)); animation: tin .2s steps(3);
  border: calc(12px * var(--s)) solid transparent; border-image: url(/ui/pixel/panel.png) 6 fill / var(--e12) stretch; }
.pend[hidden] { display: none; }
.pend-row { display: flex; justify-content: space-between; gap: calc(12px * var(--s)); font-size: calc(14px * var(--s)); }
.pend-row .micro { color: var(--gold); }
.pend-time { font-weight: 700; font-size: calc(22px * var(--s)); text-align: right; font-variant-numeric: tabular-nums; }

/* No text selection or dragging, except in inputs. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, .bootlog { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }

/* yes/no questions, under Join */
.asks { display: grid; gap: calc(8px * var(--s)); justify-items: end; width: calc(330px * var(--s)); }
.ask { width: 100%; padding: 2px calc(6px * var(--s)); display: grid; gap: calc(6px * var(--s)); animation: tin .2s steps(3); }
.ask .micro { color: var(--gold); }
.ask-row { display: flex; gap: calc(8px * var(--s)); align-items: center; }
.ask-pics { display: flex; align-items: center; gap: 2px; flex: none; }
.ask-pics img { width: calc(44px * var(--s)); height: calc(40px * var(--s)); object-fit: contain; }
.ask-arrow { color: var(--micro); font-size: calc(16px * var(--s)); }
.ask-text { margin: 0; font-size: calc(16px * var(--s)); line-height: 1.35; color: var(--ink); }
.ask-text b { color: var(--gold); font-weight: 600; }
.ask-bar { height: calc(6px * var(--s)); background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); }
.ask-bar i { display: block; height: 100%; background: var(--gold); transition: width .25s steps(2); }
.ask .row { gap: calc(6px * var(--s)); }
.ask-secs { margin-left: auto; }
.ask.wait { display: flex; align-items: center; gap: calc(8px * var(--s)); opacity: .9; }
.ask.wait .ask-text { flex: 1; font-size: calc(13px * var(--s)); color: var(--sub); }

/* right-click menu */
.ctx { position: fixed; z-index: 85; display: grid; min-width: calc(170px * var(--s)); padding: 0; }
.ctx-head { font-family: var(--tiny); font-size: calc(10px * var(--s)); text-transform: uppercase; color: var(--micro); padding: 0 calc(6px * var(--s)) calc(4px * var(--s)); border-bottom: 2px solid var(--hair); }
.ctx-sub { font-size: calc(12px * var(--s)); color: var(--micro); padding: calc(6px * var(--s)) calc(6px * var(--s)) 2px; border-top: 2px solid var(--hair); margin-top: 2px; }
.ctx button { font-family: var(--read); font-size: calc(15px * var(--s)); text-align: left; background: transparent; color: var(--ink); border: 0; padding: calc(5px * var(--s)) calc(6px * var(--s)); cursor: pointer; }
.ctx button:hover { background: var(--accent); color: var(--accent-ink); }

/* radial menus: a ring of slices with a thin X in the middle */
.radial-back { position: fixed; inset: 0; z-index: 80; cursor: crosshair; }
.radial { position: absolute; width: 0; height: 0; }
.radial-svg { position: absolute; transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 calc(4px * var(--s)) 0 rgba(0,0,0,.5)); }
.radial-svg .rs { fill: rgba(16,20,30,.93); stroke: #3c465c; stroke-width: 1.5; transition: fill .06s; }
.radial-svg .rs.hot { fill: #2f79e0; stroke: #8cc4ff; }
.radial-svg .rs.off { fill: rgba(16,20,30,.7); }
.radial-svg .rmid { fill: rgba(8,11,17,.94); stroke: #3c465c; stroke-width: 1.5; }
.radial-svg .rx { stroke: #c9d2e3; stroke-width: 1.5; fill: none; stroke-linecap: square; }
.radial-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; pointer-events: none;
  font-family: var(--read); font-size: calc(14px * var(--s)); font-weight: 600; color: #eef1f7; text-align: center; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.radial-label.off { color: #5c667c; text-shadow: none; }
.radial-label.hot { color: #fff; }
.radial-label.pic img { width: calc(46px * var(--s)); height: calc(46px * var(--s)); object-fit: contain; }
.radial-label.pic span { font-size: calc(12px * var(--s)); }

/* emotes over the game */
.fxlayer { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.emote { position: absolute; left: 0; top: 0; width: calc(64px * var(--s)); height: calc(64px * var(--s)); object-fit: contain; will-change: transform, opacity;
  filter: drop-shadow(0 calc(3px * var(--s)) 0 rgba(0,0,0,.35)); }

input[type=range] { padding: 0; border: 0; border-image: none; background: transparent; accent-color: var(--accent); }

@media (max-width: 1240px) {
  .dock { flex-wrap: wrap; }
  .dock .sep { display: none; }
  .seat { min-width: 0; }
}
.fields label.check { display: flex; align-self: end; padding-bottom: calc(8px * var(--s)); }

/* --- wear under the name, the loot book, the background grid --- */
.inv-item .inv-wear { font-family: var(--read); font-size: calc(11px * var(--s)); color: var(--micro); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.inv-item.missing .inv-pic img { filter: grayscale(1) brightness(.55); opacity: .5; }
.inv-item.missing .nm { color: var(--micro) !important; opacity: .7; }
.inv-item.unknown .inv-pic .txt { font-size: calc(30px * var(--s)); color: var(--micro); opacity: .7; }
.inv-item.unknown .nm { color: var(--micro); opacity: .6; }
.bg-row { flex-direction: column; align-items: stretch; gap: calc(6px * var(--s)); }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(96px * var(--s)), 1fr)); gap: calc(6px * var(--s)); }
.bg-tile { position: relative; height: calc(54px * var(--s)); border: 2px solid rgba(255,255,255,.14); background-color: #0d1a2a; background-size: cover, cover; background-position: center bottom, center; image-rendering: pixelated; cursor: pointer; padding: 0; }
.bg-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px calc(4px * var(--s)); font-size: calc(10px * var(--s)); background: rgba(6,10,16,.72); color: #e8eef6; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-tile:hover { border-color: rgba(255,255,255,.4); }
.bg-tile.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,215,106,.35); }
.player-link { cursor: pointer; }
.player-link:hover { text-decoration: underline; }
.tr-cell { position: relative; }
.tr-cell .tr-wear { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-family: var(--read); font-size: calc(9px * var(--s)); color: var(--micro); pointer-events: none; font-variant-numeric: tabular-nums; }
.pk-hat .inv-wear { font-family: var(--read); font-size: calc(11px * var(--s)); color: var(--micro); font-variant-numeric: tabular-nums; }

/* Extra test bench sections. */
.dev-only { display: none !important; }
body.is-dev .dev-only { display: inline-flex !important; }
body.is-dev .bench-sec.dev-only { display: grid !important; }
body.is-dev #bench-reset { display: none; }
#w-bench .bench-sec.dev-only select { flex: 1 1 calc(200px * var(--s)); min-width: calc(200px * var(--s)); }
#w-bench .bench-sec.dev-only #dev-item { flex-basis: 100%; }

/* Showcase tab: the profile's three display windows, large. */
.sc-slots { display: grid; grid-template-columns: repeat(3, minmax(0, calc(150px * var(--s)))); justify-content: center; gap: calc(10px * var(--s)); padding: calc(4px * var(--s)) 0 2px; }
/* The three windows stay pinned at the top while the list scrolls, so you
   can drag items up from further down. */
.inv-grid > .sc-slots { position: sticky; top: 0; z-index: 3; background: var(--panel); padding: calc(6px * var(--s)) 0 calc(8px * var(--s));
  box-shadow: 0 2px 0 var(--hair), 0 calc(10px * var(--s)) calc(12px * var(--s)) calc(-8px * var(--s)) rgba(0,0,0,.7); }
.sc-slot { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: calc(120px * var(--s)); padding: calc(6px * var(--s)) calc(4px * var(--s)); cursor: default;
  border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10);
  border-image: url(/ui/pixel/slot_next.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; }
.sc-slot.empty { border-width: var(--e6); border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.sc-slot.picked { border-image-source: url(/ui/pixel/slot_on.png); }
.sc-slot .inv-cv { width: calc(84px * var(--s)); height: calc(64px * var(--s)); }
.sc-slot .nm { font-size: calc(12px * var(--s)); font-weight: 600; text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-slot .txt { font-size: calc(13px * var(--s)); color: var(--micro); letter-spacing: .12em; text-transform: uppercase; }
.sc-slot .inv-num { position: absolute; left: calc(4px * var(--s)); top: 0; font-size: calc(11px * var(--s)); color: #16181b; font-weight: 700; }
.sc-x { position: absolute; right: 2px; top: 0; border: 0; background: none; color: #16181b; font: 700 calc(14px * var(--s))/1 var(--read); cursor: pointer; padding: 2px calc(4px * var(--s)); }
.sc-x:hover { color: var(--bad); }

/* Test bench scrolls internally. */
#w-bench .bench-body { display: block; }

/* Inventory | Showcase tabs on top, sub-tabs below. */
.inv-sec { grid-column: 1 / -1; font-weight: 700; font-size: calc(14px * var(--s)); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink, #e8eef6); border-bottom: 1px solid rgba(255,255,255,.12); padding: calc(10px * var(--s)) 0 calc(4px * var(--s)); margin-top: calc(4px * var(--s)); }
.inv-sec .dim { color: var(--faint); font-weight: 400; }
.inv-item[draggable="true"], .sc-slot[draggable="true"] { cursor: grab; }
.sc-slot.over { border-image-source: url(/ui/pixel/slot_on.png); transform: scale(1.04); }
.sc-dragging .sc-slot.empty { outline: 2px dashed rgba(120,190,255,.55); outline-offset: -6px; }
.sc-slot .sc-pic { width: calc(64px * var(--s)); height: calc(64px * var(--s)); image-rendering: pixelated; object-fit: contain; }
.sc-help { text-align: center; }
.sc-slot:not(.empty) .nm { color: #16181b; }

/* --- My drops: drawer on the left edge. Only the tab shows until you hover;
   the pin keeps it open. --- */
.mydrops { position: absolute; left: 0; top: calc(210px * var(--s)); bottom: calc(96px * var(--s)); width: calc(310px * var(--s)); z-index: 50;
  transform: translateX(-100%); transition: transform .22s steps(6); pointer-events: auto; }
.mydrops.out { transform: none; }
.mydrops[hidden] { display: none; }
.md-panel { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; padding: calc(10px * var(--s)) calc(8px * var(--s)) calc(8px * var(--s));
  border: calc(12px * var(--s)) solid transparent; border-image: url(/ui/pixel/panel.png) 6 fill / var(--e12) stretch; image-rendering: pixelated;
  box-shadow: calc(6px * var(--s)) 0 0 rgba(0,0,0,.35); }
.md-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(8px * var(--s)); padding: 0 2px calc(8px * var(--s)); border-bottom: 2px solid var(--hair); }
.md-head h3 { margin: 2px 0 0; }
.md-count { color: var(--micro); font-size: .7em; }
.md-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(4px * var(--s)); padding: calc(8px * var(--s)) 2px 2px; }
.md-row { display: grid; grid-template-columns: calc(52px * var(--s)) minmax(0, 1fr); gap: calc(8px * var(--s)); align-items: center; padding: calc(4px * var(--s)) calc(6px * var(--s)) calc(4px * var(--s)) calc(4px * var(--s));
  background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); }
.md-row.gone { opacity: .55; }
.md-pic { display: grid; place-items: center; width: calc(52px * var(--s)); height: calc(42px * var(--s)); }
.md-pic img { max-width: calc(40px * var(--s)); max-height: calc(40px * var(--s)); image-rendering: pixelated; }
.md-cv { width: calc(52px * var(--s)); height: calc(40px * var(--s)); image-rendering: pixelated; }
.md-tag { font: 700 calc(14px * var(--s))/1 var(--read); color: var(--gold); }
.md-text { display: grid; min-width: 0; line-height: 1.25; }
.md-text b { font-size: calc(14px * var(--s)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-xp { color: #ffd76a; font-weight: 600; }
.md-sub { font-size: calc(12px * var(--s)); color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-wear { font-size: calc(11px * var(--s)); color: var(--micro); }
.md-note { margin: calc(8px * var(--s)) calc(4px * var(--s)); color: var(--micro); font-size: calc(13px * var(--s)); }
.md-tab { position: absolute; left: 100%; top: calc(8px * var(--s)); width: calc(28px * var(--s)); padding: calc(14px * var(--s)) 0; cursor: pointer;
  background: var(--panel2); box-shadow: inset -2px 0 0 var(--gold), calc(4px * var(--s)) 0 0 rgba(0,0,0,.35); display: grid; place-items: center; }
.md-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 calc(12px * var(--s))/1 var(--read); letter-spacing: .16em; color: var(--gold); }
.mydrops.out .md-tab { box-shadow: inset -2px 0 0 var(--hair); }

/* Adjust fit: three sliders under the preview. */
.inv-fit { display: flex; flex-direction: column; gap: calc(6px * var(--s)); padding: calc(8px * var(--s)) calc(10px * var(--s)); border: 1px solid var(--line, #33404f); background: rgba(0, 0, 0, .25); }
.inv-fit .wd-row { display: grid; grid-template-columns: calc(96px * var(--s)) 1fr; align-items: center; gap: calc(8px * var(--s)); }
.inv-fit input[type=range] { width: 100%; }
.inv-fit .row { justify-content: flex-end; }

/* My drops: click the tab to toggle, drag the bottom-right corner to resize. */
.md-grip { position: absolute; right: calc(-12px * var(--s)); bottom: calc(-12px * var(--s)); width: calc(26px * var(--s)); height: calc(26px * var(--s)); cursor: nwse-resize; z-index: 2; }
.mydrops:not(.out) .md-grip { display: none; }
.mydrops.sizing { transition: none; }

/* =========================================================================
   Pixel look for the HUD, tabs, windows and the Profile / Scoreboard / hat
   windows. Anything clickable sticks out and sinks in when held; anything
   read-only sits in a recessed well.
   ========================================================================= */
.screen { background: linear-gradient(180deg, #1c2a3a 0%, #2a2230 45%, var(--bg) 100%); }
.screen.game { background: #0c1420; }

/* Pixel icons: "1-bit Pixel Icons" by Nikoichu (CC0), 16x16, recoloured
   (see ICONS-LICENSE.txt). */
.ico { width: calc(18px * var(--s) * var(--ts, 1)); height: calc(18px * var(--s) * var(--ts, 1)); flex: none; display: block; image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(34,20,12,.7)); }
.toprow .btn { display: inline-flex; align-items: center; gap: calc(7px * var(--s) * var(--ts)); }
.toprow .btn .ico { color: #f6e2b8; }

/* Clickable HUD chips are buttons too (room sign, Watch, Settings). */
.btnchip { border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10);
  border-image: url(/ui/pixel/btn.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; }
.btnchip:hover { filter: brightness(1.12); }
.btnchip:active { border-width: var(--e10) var(--e6) var(--e6); border-image: url(/ui/pixel/btn_pressed.png) 5 3 3 3 fill / var(--e10) var(--e6) var(--e6) stretch; }
.btnchip .micro { color: var(--ink); }
.btnchip .ico { width: calc(16px * var(--s)); height: calc(16px * var(--s)); color: #f6e2b8; }
.roomchip b { font-weight: 700; }
.dot { width: calc(8px * var(--s)); height: calc(8px * var(--s)); box-shadow: 0 0 0 2px var(--line); }
.dot.on { background: var(--ok); box-shadow: 0 0 0 2px var(--line); }
.dot.warn { background: var(--gold); box-shadow: 0 0 0 2px var(--line); }

/* Tabs: small wooden buttons; the active one stays pressed. */
.tabs { border: 0; border-image: none; gap: calc(4px * var(--s)); flex-wrap: wrap; }
.tab { font-family: var(--read); font-size: calc(14px * var(--s)); font-weight: 700; color: var(--sub); cursor: pointer; white-space: nowrap;
  padding: 0 calc(9px * var(--s)) calc(1px * var(--s)); background: none; text-shadow: 0 2px 0 rgba(34,20,12,.7);
  border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10);
  border-image: url(/ui/pixel/btn.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; box-shadow: none; }
.tab:hover { color: var(--ink); filter: brightness(1.1); }
.tab.on, .tab:active { color: var(--gold); box-shadow: none;
  border-width: var(--e10) var(--e6) var(--e6); border-image: url(/ui/pixel/btn_pressed.png) 5 3 3 3 fill / var(--e10) var(--e6) var(--e6) stretch; }
.subtabs .tab { font-size: calc(13px * var(--s)); }
.hud-left .tabs { padding: 0; }

/* Window titles: pixel font on a darker wood strip. */
.win-head { margin: -2px -2px 0; padding: calc(4px * var(--s)) calc(6px * var(--s)) calc(8px * var(--s)); border-bottom: 0; background: linear-gradient(var(--panel2), var(--panel2)) padding-box;
  box-shadow: 0 2px 0 var(--line), 0 calc(4px * var(--s)) 0 rgba(162,112,63,.35); }
.win-head h3, .modal-box h3, .dlg-box h3 { color: #fbe7bd; }
.win-head .micro { color: var(--micro); margin-bottom: calc(4px * var(--s)); }
.win-body { padding-top: calc(12px * var(--s)); }
.modal-x { width: calc(28px * var(--s)); height: calc(28px * var(--s)); font-size: 0; color: transparent; }
.modal-x::before { content: ""; display: block; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath fill='%2322140c' d='M1 0h12v1h1v12h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23b8503c' d='M1 1h12v12H1z'/%3E%3Cpath fill='%23e0826a' d='M1 1h12v1H1z'/%3E%3Cpath fill='%23f6ead2' d='M4 4h2v1h2V4h2v2H9v2h1v2H8V9H6v1H4V8h1V6H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated; }
.modal-x:hover::before { filter: brightness(1.15); }
.modal-x:active::before { transform: translateY(2px); }

/* Inputs, checkboxes and sliders in matching wood. */
input:not([type=range]):not([type=checkbox]):not([type=radio]) { color: var(--ink); }
.check input[type=checkbox], input[type=checkbox] { -webkit-appearance: none; appearance: none; width: calc(20px * var(--s)); height: calc(20px * var(--s)); flex: none; margin: 0; cursor: pointer;
  border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; padding: 0; }
input[type=checkbox]:checked { border-image-source: url(/ui/pixel/btn_green_pressed.png); border-image-slice: 5 3 3 3 fill; }
input[type=checkbox]:checked::after { content: ""; display: block; width: calc(8px * var(--s)); height: calc(8px * var(--s)); margin: -2px 0 0 0; background: #f6ead2;
  clip-path: polygon(0 50%, 25% 50%, 25% 75%, 75% 0, 100% 0, 100% 25%, 50% 100%, 25% 100%, 0 75%); }
input[type=range] { -webkit-appearance: none; appearance: none; height: calc(20px * var(--s)); background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: calc(8px * var(--s)); background: var(--well); box-shadow: inset 0 2px 0 #140c07, 0 2px 0 #6a4629, 0 0 0 2px var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(14px * var(--s)); height: calc(20px * var(--s)); margin-top: calc(-6px * var(--s)); background: #c99434;
  box-shadow: inset 0 2px 0 #efc664, inset 0 calc(-4px * var(--s)) 0 #6c4a15, 0 0 0 2px var(--line); }
input[type=range]:active::-webkit-slider-thumb { box-shadow: inset 0 2px 0 #6c4a15, 0 0 0 2px var(--line); }

/* Chat plates, toasts and the right-click menu. */
.chatlog .cl { background: rgba(36,24,16,.9); color: #f1e3c6; box-shadow: inset calc(3px * var(--s)) 0 0 var(--accent), 0 2px 0 rgba(20,10,4,.5); }
.chatlog .cl-who { color: var(--accent); }
.chatlog .cl-rar { font-family: var(--read); font-size: calc(11px * var(--s)); font-weight: 700; letter-spacing: .06em; color: #2a1a0c; background: var(--gold); padding: 0 calc(4px * var(--s)); }
.chatlog .cl-res { color: #c9b48f; }
.chatlog .cl a { color: var(--accent); }
.chatlog .cl.me { background: rgba(58,40,14,.92); }
.ctx button:hover { background: var(--wood-hi); color: #fff; }
.ctx-head { font-family: var(--read); font-size: calc(11px * var(--s)); font-weight: 700; letter-spacing: .1em; }

/* Slot badges: small painted labels. */
.inv-item .badge { background: var(--gold); color: #2a1a0c; box-shadow: 0 0 0 2px var(--line); }
.inv-item .badge.on { background: var(--accent); color: #0e1f2a; }
.inv-item .badge.hook { background: var(--bad); color: #fff; }
.inv-item .inv-num { color: #e8cfa0; }
.inv-group { border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 rgba(162,112,63,.25); }
.inv-sec { border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 rgba(162,112,63,.25); color: var(--ink); }
.found { border-bottom-color: var(--micro); }

/* wardrobe preview: a view of the pier in a recessed frame */
.wd-stage { background: #0c1420; }
.bg-tile { border: 2px solid var(--line); box-shadow: 0 0 0 2px rgba(162,112,63,.4); }
.bg-tile.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--line); }

/* Radial menus in wood, one fixed colour for everyone. Opaque so nothing
   behind tints it, and not affected by Windows contrast themes. */
.radial, .radial * { forced-color-adjust: none; }
.radial-svg .rs, .radial-svg .rs.off { fill: #2e1f16; stroke: #22140c; stroke-width: 2; }
.radial-svg .rs.hot { fill: #8a5a33; stroke: #efc664; }
.radial-svg .rmid { fill: #241810; stroke: #22140c; stroke-width: 2; }
.radial-svg .rx { stroke: #e8cfa0; }
.radial-label { color: #f1e3c6; }
.radial-label.off { color: #7a6450; }
.radial-label.hot { color: #fff; }

/* My drops drawer tab */
.md-tab { background: var(--wood); box-shadow: inset -2px 0 0 var(--gold), inset 0 2px 0 var(--wood-hi), 0 0 0 2px var(--line), calc(4px * var(--s)) 0 0 rgba(20,10,4,.35); }
.md-row { background: var(--well); box-shadow: inset 0 2px 0 #140c07, 0 2px 0 rgba(106,70,41,.5); }

/* --- in-game pages ------------------------------------------------ */
.pg-body { display: block; padding: calc(12px * var(--s)) calc(6px * var(--s)) calc(8px * var(--s)); }
.pg-wait { padding: calc(20px * var(--s)) calc(4px * var(--s)); }
.pg-empty { display: grid; gap: calc(10px * var(--s)); padding: calc(12px * var(--s)) calc(4px * var(--s)); }
.pg-top { display: grid; grid-template-columns: calc(150px * var(--s)) minmax(0, 1fr) auto; gap: calc(16px * var(--s)); align-items: center; margin-bottom: calc(14px * var(--s)); }
.pg-stage { width: calc(150px * var(--s)); height: calc(150px * var(--s)); border: var(--e6) solid transparent;
  border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch;
  background: linear-gradient(#7fb6d9 0 58%, #4f86a8 58% 70%, #6b4226 70% 76%, #3f2a1c 76%) padding-box; }
.pg-stage canvas { width: 100%; height: 100%; display: block; }
.pg-stage.hat { background: linear-gradient(#2a1c13, #2a1c13) padding-box; }
.pg-id { display: grid; gap: calc(8px * var(--s)); min-width: 0; }
.pg-id h2 { font-size: calc(24px * var(--s)); color: #fbe7bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rank { color: var(--gold); }
.pg-lv { display: grid; grid-template-columns: auto 1fr; gap: calc(4px * var(--s)) calc(12px * var(--s)); align-items: center; max-width: calc(340px * var(--s)); }
.pg-lv .micro { grid-column: 2; }
.pg-lvnum { font: calc(16px * var(--s))/1 var(--pixel); color: var(--gold); text-shadow: 0 2px 0 var(--line); }
.pg-xp { height: calc(14px * var(--s)); background: var(--well); box-shadow: inset 0 2px 0 #140c07, 0 0 0 2px var(--line), 0 calc(4px * var(--s)) 0 #6a4629; }
.pg-xp i { display: block; height: 100%; background: var(--ok); box-shadow: inset 0 2px 0 #b8e886, inset 0 calc(-3px * var(--s)) 0 #467a2b; }
.pg-lines { display: flex; flex-wrap: wrap; gap: calc(4px * var(--s)) calc(14px * var(--s)); color: var(--sub); font-size: calc(14px * var(--s)); }
.pg-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--s)), 1fr)); gap: calc(8px * var(--s)); margin-bottom: calc(6px * var(--s)); }
.pg-stat { padding: calc(4px * var(--s)) calc(8px * var(--s)) calc(6px * var(--s)); border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.pg-v { font-weight: 700; font-size: calc(20px * var(--s)); color: var(--ink); line-height: 1.3; }
.pg-h { margin: calc(22px * var(--s)) 0 calc(10px * var(--s)); padding-bottom: calc(8px * var(--s)); color: #fbe7bd; border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 rgba(162,112,63,.25); }
.pg-n { font: 700 calc(14px * var(--s))/1 var(--read); color: var(--micro); margin-left: calc(6px * var(--s)); text-shadow: none; }
.pg-grid { overflow: visible; }
.pg-slot .inv-wear { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-slot.empty { border-width: var(--e6); border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.pg-slot.empty:active { border-width: var(--e6); border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.pg-arrow { align-self: center; justify-self: center; font-size: calc(24px * var(--s)); color: var(--micro); }
.pg-cases { display: grid; grid-template-columns: repeat(3, calc(128px * var(--s))); gap: calc(12px * var(--s)); }
.pg-case .pg-slot { width: calc(128px * var(--s)); height: calc(128px * var(--s)); }
.pg-case .inv-pic, .pg-case .inv-cv { width: calc(84px * var(--s)); height: calc(64px * var(--s)); }
.pg-case .inv-pic img { max-width: calc(76px * var(--s)); max-height: calc(60px * var(--s)); }
.pg-chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--s)); }
.pg-chip { padding: 2px calc(8px * var(--s)); font-weight: 700; border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.pg-chip.on { border-image-source: url(/ui/pixel/slot_on.png); border-image-slice: 3 3 5 3 fill; }
.pg-chip b { color: var(--gold); font-size: calc(11px * var(--s)); letter-spacing: .1em; text-transform: uppercase; }
.pg-achv { display: grid; gap: calc(6px * var(--s)); }
.pg-ach { display: grid; grid-template-columns: auto 1fr auto auto; gap: calc(10px * var(--s)); align-items: center; padding: 2px calc(6px * var(--s));
  border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.pg-star { width: calc(12px * var(--s)); height: calc(12px * var(--s)); background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 81% 100%, 50% 76%, 19% 100%, 31% 60%, 0 38%, 38% 38%); }
.pg-ach-t { min-width: 0; }

/* Scoreboard: toolbar (tabs, search, pages), then the list */
.sb-body { display: flex; flex-direction: column; gap: calc(10px * var(--s)); padding: calc(12px * var(--s)) calc(4px * var(--s)) calc(4px * var(--s)); height: 100%; overflow: hidden; }
.sb-bar { display: flex; flex-wrap: wrap; gap: calc(8px * var(--s)) calc(12px * var(--s)); align-items: center; }
.sb-bar input { flex: 0 1 calc(220px * var(--s)); font-size: calc(15px * var(--s)); }
.sb-pager { display: flex; gap: calc(8px * var(--s)); align-items: center; margin-left: auto; }
.sb-list { flex: 1; min-height: 0; overflow: auto; padding-right: calc(4px * var(--s)); }
.pg-board { width: 100%; border-collapse: separate; border-spacing: 0 calc(4px * var(--s)); font-size: calc(15px * var(--s)); }
.pg-board th { position: sticky; top: 0; z-index: 2; background: var(--panel); text-align: left; padding: 0 calc(8px * var(--s)) calc(4px * var(--s)); font-weight: 700; box-shadow: 0 2px 0 var(--line); }
.pg-board th button { font: 700 calc(12px * var(--s))/1.6 var(--read); letter-spacing: .1em; text-transform: uppercase; color: var(--micro); background: none; border: 0; padding: 0; cursor: pointer; }
.pg-board th.on button, .pg-board th button:hover { color: var(--gold); }
.pg-board th.num, .pg-board td.num { text-align: right; }
.pg-board .arr { display: inline-block; width: calc(8px * var(--s)); height: calc(5px * var(--s)); margin-left: calc(4px * var(--s)); background: currentColor; vertical-align: middle; }
.pg-board .arr.up { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pg-board .arr.down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pg-board td { padding: 2px calc(8px * var(--s)); background: var(--well); box-shadow: inset 0 2px 0 #140c07, 0 2px 0 rgba(106,70,41,.45); white-space: nowrap; }
.pg-board td:first-child { box-shadow: inset 2px 2px 0 #140c07, 0 2px 0 rgba(106,70,41,.45); }
.pg-board tbody tr[data-player] { cursor: pointer; }
.pg-board tbody tr[data-player]:hover td { background: #3a2819; }
.pg-board tbody tr[data-player]:active td { background: #2a1c12; transform: translateY(1px); }
.pg-board tr.me td { background: #3d2e12; }
.pg-board .rk { color: var(--micro); width: calc(44px * var(--s)); }
.pg-board tr.top1 .rk { color: var(--gold); } .pg-board tr.top2 .rk { color: #dfe6ee; } .pg-board tr.top3 .rk { color: #e0a36a; }
.pg-board td.face { width: calc(44px * var(--s)); padding: 0 2px; }
.pg-board td.face canvas { width: calc(40px * var(--s)); height: calc(40px * var(--s)); display: block; }
.pg-board td.face img { width: calc(36px * var(--s)); height: calc(36px * var(--s)); display: block; margin: 2px auto; image-rendering: pixelated; object-fit: contain; }
/* Scoreboard > Tournaments (0.185.0): one bar per tournament, click to open. */
.pg-tn { margin-bottom: calc(8px * var(--s)); }
.pg-tn-head { display: flex; align-items: center; gap: calc(14px * var(--s)); width: 100%; padding: calc(10px * var(--s)) calc(12px * var(--s)); cursor: pointer;
  background: var(--well); border: 0; box-shadow: inset 0 2px 0 #140c07, 0 2px 0 rgba(106,70,41,.45); color: #fbe7bd; font: 700 calc(15px * var(--s))/1.3 var(--read); text-align: left; }
.pg-tn-head:hover, .pg-tn.open .pg-tn-head { color: var(--gold); }
.pg-tn-head .arr { display: inline-block; width: calc(8px * var(--s)); height: calc(8px * var(--s)); background: currentColor; flex: none; }
.pg-tn-head .arr.right { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pg-tn-head .arr.down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pg-tn-n { flex: none; }
.pg-tn-when, .pg-tn-meta { color: var(--micro); font-weight: 400; flex: none; }
.pg-tn-win { flex: 1 1 auto; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tn-body { padding: 0 calc(6px * var(--s)) calc(10px * var(--s)); }
/* 0.195.0: the pedestal (top 3, centred) and the place tiles. */
.pg-tn-body { --tn1: var(--gold); --tn2: #dfe6ee; --tn3: #e0a36a; --tnn: #9d9184; }
.tn-pod { display: flex; justify-content: center; align-items: flex-end; gap: calc(10px * var(--s)); padding: calc(14px * var(--s)) 0 calc(4px * var(--s)); }
.tn-pod-col { display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--s)); width: calc(150px * var(--s)); min-width: 0; cursor: pointer; --c: var(--tnn); }
.tn-pod-col.r1 { --c: var(--tn1); --h: 96px; } .tn-pod-col.r2 { --c: var(--tn2); --h: 70px; } .tn-pod-col.r3 { --c: var(--tn3); --h: 52px; }
.tn-pod-face canvas { width: calc(56px * var(--s)); height: calc(56px * var(--s)); display: block; }
.tn-pod-col.r1 .tn-pod-face canvas { width: calc(72px * var(--s)); height: calc(72px * var(--s)); }
.tn-pod-nm { color: var(--c); font: 700 calc(15px * var(--s))/1.2 var(--read); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-pod-hat { display: flex; align-items: center; gap: calc(4px * var(--s)); max-width: 100%; font-size: calc(12px * var(--s)); }
.tn-pod-step { width: 100%; height: calc(var(--h) * var(--s)); margin-top: calc(4px * var(--s)); display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 30%, var(--well)); box-shadow: inset 0 calc(4px * var(--s)) 0 var(--c), inset 0 -2px 0 #140c07, 0 2px 0 rgba(106,70,41,.45); }
.tn-pod-step span { font: calc(26px * var(--s))/1 var(--pixel); color: var(--c); text-shadow: 0 2px 0 #140c07; }
.tn-pod-col:hover .tn-pod-nm { text-decoration: underline; }
.tn-note { text-align: center; margin: calc(6px * var(--s)) 0 0; }
.tn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(236px * var(--s)), 1fr)); gap: calc(6px * var(--s)); margin-top: calc(12px * var(--s)); }
.tn-tile { display: flex; align-items: center; gap: calc(8px * var(--s)); padding: calc(6px * var(--s)) calc(8px * var(--s)); min-width: 0; cursor: pointer; --c: var(--tnn);
  background: var(--well); box-shadow: inset calc(4px * var(--s)) 0 0 var(--c), inset 0 2px 0 #140c07, 0 2px 0 rgba(106,70,41,.45); }
.tn-tile.r1 { --c: var(--tn1); } .tn-tile.r2 { --c: var(--tn2); } .tn-tile.r3 { --c: var(--tn3); }
.tn-tile:hover { background: #3a2819; } .tn-tile:active { background: #2a1c12; transform: translateY(1px); }
.tn-rk { flex: none; min-width: calc(26px * var(--s)); text-align: center; font: calc(13px * var(--s))/1 var(--pixel); color: var(--c); }
.tn-face { flex: none; } .tn-face canvas { width: calc(40px * var(--s)); height: calc(40px * var(--s)); display: block; }
.tn-face img { width: calc(36px * var(--s)); height: calc(36px * var(--s)); display: block; margin: 2px; image-rendering: pixelated; object-fit: contain; }
.tn-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tn-nm { font: 700 calc(14px * var(--s))/1.25 var(--read); color: #fbe7bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-tile.r1 .tn-nm, .tn-tile.r2 .tn-nm, .tn-tile.r3 .tn-nm { color: var(--c); }
.tn-how { color: var(--micro); font-size: calc(12px * var(--s)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-xp { color: var(--ok); font-size: calc(12px * var(--s)); font-weight: 700; }
.tn-hat { display: flex; align-items: center; gap: calc(4px * var(--s)); min-width: 0; font-size: calc(12px * var(--s)); }
.tn-hatpic { flex: none; } .tn-hatpic canvas { width: calc(26px * var(--s)); height: calc(26px * var(--s)); display: block; }
.tn-hatnm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-loot .tn-tile { cursor: pointer; }
.pg-board .nmcell { font-weight: 700; max-width: calc(260px * var(--s)); overflow: hidden; text-overflow: ellipsis; }
.pg-board .cel { color: #c9a7ff; font-weight: 700; }
.pg-board tr.sac td { opacity: .6; }
.pg-sac { font-size: calc(11px * var(--s)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bad); margin-left: calc(6px * var(--s)); }
.inv-grid > p { grid-column: 1 / -1; }
/* Settings > Emotes: your eight, then the full list */
.modal-box.prefs-box { width: min(760px, calc(100% - 32px)); }
.em-wheel { display: grid; grid-template-columns: repeat(8, calc(64px * var(--s))); grid-auto-rows: calc(64px * var(--s)); gap: calc(6px * var(--s)); }
.em-slot .inv-pic, .em-slot .inv-pic img { width: calc(40px * var(--s)); height: calc(40px * var(--s)); max-width: calc(40px * var(--s)); max-height: calc(40px * var(--s)); }
.em-all { max-height: min(320px, 42vh); grid-template-columns: repeat(auto-fill, calc(76px * var(--s))); grid-auto-rows: calc(76px * var(--s)); }
.em-pick .inv-pic { width: calc(40px * var(--s)); height: calc(36px * var(--s)); }
.em-pick .inv-pic img { max-width: calc(36px * var(--s)); max-height: calc(36px * var(--s)); }
.em-pick .nm { font-size: calc(11px * var(--s)); }
.pref-pane[data-pane=emotes] .row { justify-content: space-between; }
.em-slot, .em-pick { background: none; font: inherit; color: var(--ink); }

/* Slot numbers: bright with a 1 px dark outline so they read over any
   hat art. */
.inv-item .inv-num, .inv-n { color: #fff4da; font-weight: 700;
  text-shadow: 1px 0 0 #1a0f08, -1px 0 0 #1a0f08, 0 1px 0 #1a0f08, 0 -1px 0 #1a0f08, 0 2px 0 #1a0f08; }
.inv-item .inv-num { font-size: calc(12px * var(--s)); }
.inv-item .inv-wear { color: #e6d3ad; }
.inv-item .badge.on { background: #f4e4be; color: #2a1a0c; }
.pg-chip.on { border-image-source: url(/ui/pixel/slot_on.png); }

/* Sliders (volume, hat fit, emotes...): Firefox needs the -moz-range-*
   rules or only the knob shows. */
input[type=range]::-moz-range-track { height: calc(8px * var(--s)); background: var(--well); border: 0;
  box-shadow: inset 0 2px 0 #140c07, 0 2px 0 #6a4629, 0 0 0 2px var(--line); }
input[type=range]::-moz-range-progress { height: calc(8px * var(--s)); background: #c99434; }
input[type=range]::-moz-range-thumb { width: calc(14px * var(--s)); height: calc(20px * var(--s)); border: 0; border-radius: 0; background: #c99434;
  box-shadow: inset 0 2px 0 #efc664, inset 0 calc(-4px * var(--s)) 0 #6c4a15, 0 0 0 2px var(--line); }
input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(var(--well), var(--well)); }
.inv-fit input[type=range], .sliders input[type=range], .volchip input[type=range], .pl-bar input[type=range] { min-width: calc(80px * var(--s)); }
/* Headings in a slot grid only take their own height; slots stay
   square. */
.inv-grid { grid-auto-rows: auto; }
.inv-grid > .inv-item { height: calc(96px * var(--s)); }
.em-all > .inv-item { height: calc(76px * var(--s)); }
.em-wheel > .inv-item { height: calc(64px * var(--s)); }
.pg-case .pg-slot { height: calc(128px * var(--s)); }
/* Volume box and pier-time box use the same wood as the buttons around
   them. */
.volchip, .seatinfo { border-style: solid; border-color: transparent; border-width: var(--e6) var(--e6) var(--e10);
  border-image: url(/ui/pixel/btn.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; }
.seatinfo .micro { color: #f1dcb4; }
.seatinfo .big { text-shadow: 0 2px 0 rgba(34,20,12,.7); }
.volchip input[type=range]::-webkit-slider-runnable-track { background: #3a2414; }
.volchip input[type=range]::-moz-range-track { background: #3a2414; }
/* Interface size Auto: blue while on, never greyed out. */
#pref-scale-auto.on { border-image-source: url(/ui/pixel/btn_blue.png); color: #fff; }
/* A section heading directly above a rarity row drops its own underline
   and gap. */
.inv-sec:has(+ .inv-group) { border-bottom: 0; box-shadow: none; padding-bottom: 0; }
.inv-sec + .inv-group { padding-top: calc(2px * var(--s)); }
/* Latest drops cards are bigger than inventory slots so the hat isn't
   cut off, and long names wrap to a second line. */
.dr-grid { grid-template-columns: repeat(auto-fill, minmax(calc(132px * var(--s)), 1fr)); grid-auto-rows: auto; }
.inv-grid > .dr-item { height: auto; min-height: calc(150px * var(--s)); padding: calc(8px * var(--s)) calc(6px * var(--s)); gap: calc(2px * var(--s)); justify-content: start; }
.dr-item .inv-pic, .dr-item .inv-cv { width: calc(72px * var(--s)); height: calc(56px * var(--s)); flex: none; }
.dr-item .nm, .dr-item .dr-who { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; text-align: center; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Settings at large interface sizes: the box grows with the scale (up to
   the screen size), scrolls inside, and the emote wheel wraps. */
.modal-box.prefs-box { width: min(calc(760px * var(--s)), calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; }
.em-wheel { grid-template-columns: repeat(auto-fill, calc(64px * var(--s))); }
.pref-pane[data-pane=emotes] .row { flex-wrap: wrap; gap: calc(6px * var(--s)); }
.em-all { max-height: none; overflow: visible; }
.modal-box { width: min(calc(480px * var(--s)), calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; }
.modal-box.wide { width: min(calc(660px * var(--s)), calc(100% - 32px)); }
/* Name tags (Inventory + Profile): two slots wide, drawn 1:1 like on the pier (nametags.js). */
.inv-grid > .inv-item.inv-tag { grid-column: span 2; }
.inv-tag .inv-pic { width: calc(180px * var(--s)); height: calc(56px * var(--s)); }
.nt-cv { width: calc(180px * var(--s)); height: calc(56px * var(--s)); image-rendering: pixelated; }

/* Profile showcase: lit brass display cases like on the website, three in
   a row next to the level, no title. Hard pixel edges: stepped corners,
   stepped light, flat offset shadow. */
.pg-sc {
  --sc-frame: #1a1f28; --sc-rim: #2c3442; --sc-brass: #d3a447; --sc-brass-hi: #f0cf78; --sc-brass-lo: #6f4e17;
  --sc-in-1: #231a3d; --sc-in-2: #170f2b; --sc-in-3: #110b20; --sc-plinth: #3a3450; --sc-plinth-top: #5a5278;
  display: grid; grid-template-columns: repeat(3, calc(118px * var(--s))); gap: calc(12px * var(--s)); align-self: center;
}
.pg-sc .sc-win {
  --rc: var(--sc-brass); --st: calc(4px * var(--s));
  position: relative; padding: calc(7px * var(--s)) calc(7px * var(--s)) calc(6px * var(--s)); background: var(--sc-frame);
  filter: drop-shadow(calc(4px * var(--s)) calc(4px * var(--s)) 0 var(--line));
  clip-path: polygon(0 calc(var(--st) * 2), var(--st) calc(var(--st) * 2), var(--st) var(--st), calc(var(--st) * 2) var(--st), calc(var(--st) * 2) 0,
    calc(100% - var(--st) * 2) 0, calc(100% - var(--st) * 2) var(--st), calc(100% - var(--st)) var(--st), calc(100% - var(--st)) calc(var(--st) * 2), 100% calc(var(--st) * 2),
    100% calc(100% - var(--st) * 2), calc(100% - var(--st)) calc(100% - var(--st) * 2), calc(100% - var(--st)) calc(100% - var(--st)), calc(100% - var(--st) * 2) calc(100% - var(--st)), calc(100% - var(--st) * 2) 100%,
    calc(var(--st) * 2) 100%, calc(var(--st) * 2) calc(100% - var(--st)), var(--st) calc(100% - var(--st)), var(--st) calc(100% - var(--st) * 2), 0 calc(100% - var(--st) * 2));
  box-shadow: inset 0 0 0 3px var(--sc-rim), inset 0 3px 0 3px var(--sc-rim);
}
.pg-sc .sc-glass {
  position: relative; aspect-ratio: 5 / 6; overflow: hidden;
  background: linear-gradient(to bottom, var(--sc-in-1) 0 34%, var(--sc-in-2) 34% 72%, var(--sc-in-3) 72%);
  box-shadow: inset 0 0 0 2px var(--sc-brass), inset 0 0 0 4px var(--sc-brass-lo), inset 0 0 0 6px color-mix(in srgb, var(--rc) 30%, transparent);
}
.pg-sc .sc-lamp { position: absolute; top: 4px; left: 36%; right: 36%; height: calc(5px * var(--s)); background: var(--sc-brass-hi); box-shadow: 0 2px 0 var(--sc-brass-lo); z-index: 3; }
.pg-sc .sc-beam {
  position: absolute; top: calc(9px * var(--s)); bottom: 16%; left: 0; right: 0; z-index: 1; pointer-events: none;
  clip-path: polygon(38% 0, 62% 0, 84% 100%, 16% 100%);
  background: linear-gradient(to bottom, rgba(255,232,170,.20) 0 30%, rgba(255,232,170,.13) 30% 62%, rgba(255,232,170,.07) 62%);
}
.pg-sc .sc-plinth {
  position: absolute; left: 20%; right: 20%; bottom: 0; height: 17%; z-index: 1;
  background: linear-gradient(to bottom, var(--sc-plinth-top) 0 14%, var(--sc-plinth) 14% 60%, color-mix(in srgb, var(--rc) 70%, #111) 60% 70%, var(--sc-plinth) 70%);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.08), inset -3px 0 0 rgba(0,0,0,.25);
}
.pg-sc .sc-plinth::before { content: ""; position: absolute; left: -6%; right: -6%; top: calc(-5px * var(--s)); height: calc(5px * var(--s)); background: var(--sc-plinth-top); box-shadow: inset 0 2px 0 rgba(255,255,255,.14); }
.pg-sc .sc-hat { position: absolute; left: 12%; right: 12%; top: 16%; bottom: 18%; z-index: 2; display: grid; place-items: end center; }
.pg-sc .sc-hat canvas { width: 100%; height: 100%; display: block; }
.pg-sc .sc-hat.sc-thing { left: 24%; right: 24%; top: 26%; bottom: 22%; place-items: center; }
.pg-sc .sc-hat img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.pg-sc .sc-sheen {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 22%; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.07) 0 40%, rgba(255,255,255,.14) 40% 60%, rgba(255,255,255,.07) 60%);
  transform: skewX(-18deg); animation: pgScSheen 7s steps(14) infinite;
}
.pg-sc .sc-win:nth-child(2) .sc-sheen { animation-delay: 2.3s; }
.pg-sc .sc-win:nth-child(3) .sc-sheen { animation-delay: 4.6s; }
@keyframes pgScSheen { 0%, 70% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .pg-sc .sc-sheen { animation: none; display: none; } }
.pg-sc .sc-plate {
  margin: calc(6px * var(--s)) calc(3px * var(--s)) 0; padding: calc(4px * var(--s)) calc(4px * var(--s)) calc(3px * var(--s)); text-align: center;
  background: linear-gradient(to bottom, var(--sc-brass-hi) 0 2px, var(--sc-brass) 2px calc(100% - 2px), var(--sc-brass-lo) calc(100% - 2px));
}
.pg-sc .sc-nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: calc(7px * var(--s))/1.5 var(--pixel); color: #2b1d07; }
.pg-sc .sc-foot { display: flex; justify-content: space-between; gap: 4px; padding: calc(4px * var(--s)) 2px 0; font-size: calc(10px * var(--s)); letter-spacing: .1em; text-transform: uppercase; color: #9aa6b6; min-height: calc(18px * var(--s)); }
.pg-sc .sc-rar { font-weight: 700; }
.pg-sc .sc-win.empty .sc-glass { background: linear-gradient(to bottom, var(--sc-in-2) 0 34%, var(--sc-in-3) 34%); }
.pg-sc .sc-win.empty .sc-plinth { opacity: .6; }
.pg-sc .sc-win.empty .sc-lamp { background: var(--sc-brass-lo); box-shadow: none; }
.pg-sc .sc-win.empty .sc-plate { filter: saturate(.3) brightness(.7); }
.pg-sc .sc-hint { position: absolute; left: 0; right: 0; top: 42%; text-align: center; color: #6b7690; letter-spacing: .2em; text-transform: uppercase; font-size: calc(10px * var(--s)); }
.pg-sc .sc-win.can { cursor: pointer; }
.pg-sc .sc-win.can:hover .sc-glass { box-shadow: inset 0 0 0 2px var(--sc-brass-hi), inset 0 0 0 4px var(--sc-brass-lo), inset 0 0 0 6px color-mix(in srgb, var(--rc) 55%, transparent); }
/* Name tags window: who owns the selected tag, above the grid. */
.pg-tagwho { margin: 0 0 calc(12px * var(--s)); line-height: 1.6; }
.pg-tagwho .player-link { color: #6fc3ff; }
/* Inventory tiles don't press or light up on hover; Showcase ones still press. */
.inv-grid.inv-still .inv-item:hover { filter: none; }
.inv-grid.inv-still .inv-item:active { border-width: var(--e6) var(--e6) var(--e10); border-image: url(/ui/pixel/slot.png) 3 3 5 3 fill / var(--e6) var(--e6) var(--e10) stretch; }
.inv-grid.inv-still .inv-item.on:active { border-image-source: url(/ui/pixel/slot_on.png); }
.inv-grid.inv-still .inv-item.next:active { border-image-source: url(/ui/pixel/slot_next.png); }
/* Every heading can fold (remembered per player). */
.inv-fold { display: flex; align-items: baseline; gap: calc(6px * var(--s)); width: 100%; text-align: left; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.inv-fold:hover { color: var(--gold); }
.inv-fold .fold-caret { display: inline-block; width: 0; height: 0; border-left: calc(5px * var(--s)) solid transparent; border-right: calc(5px * var(--s)) solid transparent; border-top: calc(7px * var(--s)) solid currentColor; transform: translateY(calc(-2px * var(--s))); }
.inv-fold.shut .fold-caret { transform: rotate(-90deg) translateX(calc(2px * var(--s))); }
.inv-fold.inv-place { font-size: calc(12px * var(--s)); letter-spacing: .1em; color: var(--sub); border-bottom-width: 1px; box-shadow: none; padding-left: calc(10px * var(--s)); }
.inv-fold.inv-place:hover { color: var(--gold); }
/* Pencil button, top right of the preview: toggles the fit sliders. */
.wd-pencil { position: absolute; top: calc(6px * var(--s)); right: calc(6px * var(--s)); z-index: 2; width: calc(34px * var(--s)); height: calc(34px * var(--s)); padding: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(8,11,17,.72); border: 2px solid var(--line); box-shadow: inset 0 0 0 1px var(--wood-hi); }
.wd-pencil img { width: calc(20px * var(--s)); height: calc(20px * var(--s)); image-rendering: pixelated; }
.wd-pencil:hover { background: var(--wood); }
.wd-pencil.on { background: var(--gold); box-shadow: inset 0 0 0 1px #fff4da; }
.wd-pencil.on img { filter: brightness(.2); }
.wd-pencil:active { transform: translateY(1px); }
.inv-fit-top { display: flex; flex-direction: column; gap: calc(4px * var(--s)); }
.inv-fit .fit-tabs { justify-content: flex-start; }
.inv-fit .fit-dirty { color: var(--gold); font-weight: 700; margin-left: calc(4px * var(--s)); }
/* s6 (2026-10-01): mirror + layer buttons, drag the hat on the preview */
.inv-fit .fit-flags { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.inv-fit .fit-flags .micro { margin-left: calc(8px * var(--s)); }
.inv-fit .fit-drag { margin: 0; }
.wd-stage:has(+ .inv-fit:not([hidden])) { cursor: grab; }
.wd-stage.dragging { cursor: grabbing; }

/* Loot (0.177.0): the Maps drop-down at the right of the heading, and room between the rarity groups. */
.inv-headrow { display: flex; align-items: end; gap: calc(8px * var(--s)); border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 rgba(162,112,63,.25); }
.inv-headrow > .inv-sec { flex: 1 1 auto; border-bottom: 0; box-shadow: none; }
.pg-hrow { display: flex; align-items: end; gap: calc(8px * var(--s)); border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 rgba(162,112,63,.25); margin: calc(22px * var(--s)) 0 calc(10px * var(--s)); }
.pg-hrow > .pg-h { flex: 1 1 auto; margin: 0; border-bottom: 0; box-shadow: none; }
.map-pick { position: relative; flex: none; margin-bottom: calc(4px * var(--s)); }
.map-btn { display: inline-flex; align-items: center; gap: calc(6px * var(--s)); }
.map-btn .dim { color: var(--faint); font-weight: 400; }
.map-caret { display: inline-block; width: 0; height: 0; border-left: calc(4px * var(--s)) solid transparent; border-right: calc(4px * var(--s)) solid transparent; border-top: calc(6px * var(--s)) solid currentColor; }
.map-btn[aria-expanded="true"] .map-caret { transform: rotate(180deg); }
.map-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: calc(6px * var(--s)); min-width: calc(190px * var(--s));
  padding: calc(10px * var(--s)) calc(12px * var(--s)); background: var(--panel); border: 2px solid var(--line); box-shadow: 0 4px 0 rgba(0,0,0,.35); text-transform: none; letter-spacing: 0; }
.map-menu .check span { font-size: calc(14px * var(--s)); font-weight: 400; color: var(--ink); white-space: nowrap; }
.map-menu .check .dim { color: var(--faint); }
.inv-grid > .inv-group.loot-g { margin-top: calc(18px * var(--s)); }
.inv-grid > .inv-group.loot-g.first { margin-top: calc(4px * var(--s)); }

/* Glowing-hat drops (0.177.0): Latest drops cards and My drops rows get the glow's own light behind
   them. Drawn in pseudo-elements: the slot's border-image fill would paint over a plain background. */
.dr-item.glow-card, .md-row.glow-card { isolation: isolate; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 75%, transparent), 0 0 calc(10px * var(--s)) color-mix(in srgb, var(--gc) 45%, transparent); }
.md-row.glow-card { position: relative; }
.dr-item.glow-card::before, .md-row.glow-card::before { content: ""; position: absolute; inset: calc(3px * var(--s)); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--gc) 75%, transparent) 0%, color-mix(in srgb, var(--gc) 30%, transparent) 42%, transparent 78%),
    linear-gradient(#1c120b, #0f0906); }
.md-row.glow-card::before { inset: 0; background: radial-gradient(ellipse at 12% 50%, color-mix(in srgb, var(--gc) 70%, transparent) 0%, color-mix(in srgb, var(--gc) 18%, transparent) 55%, transparent 90%), linear-gradient(#1c120b, #0f0906); }
.dr-item.glow-card::after, .md-row.glow-card::after { content: ""; position: absolute; inset: calc(3px * var(--s)); z-index: -1; pointer-events: none; opacity: .6;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--gc) 45%, #fff) 50%, transparent 65%) no-repeat; background-size: 250% 100%;
  animation: gc-sweep 3.2s linear infinite; }
.md-row.glow-card::after { inset: 0; }
.dr-item.glow-card.god, .md-row.glow-card.god { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 calc(12px * var(--s)) rgba(255,190,255,.55); }
.dr-item.glow-card.god::before, .md-row.glow-card.god::before {
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--gc) 70%, transparent) 0%, transparent 60%),
    linear-gradient(90deg, #6b1f2c, #6b5317, #1f5a2c, #1b4d6b, #43256b, #6b1f2c); background-size: 100% 100%, 300% 100%; animation: gc-sweep 6s linear infinite; }
@keyframes gc-sweep { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .glow-card::after, .glow-card::before { animation: none; } }

/* 0.187.0: the Inbox button (only while there are messages), its window, and new hats */
.ibbtn { position: relative; }
.ib-count { position: absolute; top: calc(-7px * var(--s)); right: calc(-7px * var(--s)); min-width: calc(18px * var(--s)); height: calc(18px * var(--s)); padding: 0 calc(4px * var(--s));
  background: var(--gold); color: #2a1a0c; font: 700 calc(11px * var(--s))/calc(18px * var(--s)) var(--read); text-align: center; pointer-events: none; }
/* 0.188.0 (his ask): the glow follows the button's own pixel edge (drop-shadows, not a box), nothing over its face */
.hud-top [data-open="inventory"].has-new { --nw: calc(3px * var(--s));
  --ring: drop-shadow(var(--nw) 0 0 var(--new-col)) drop-shadow(calc(0px - var(--nw)) 0 0 var(--new-col)) drop-shadow(0 var(--nw) 0 var(--new-col)) drop-shadow(0 calc(0px - var(--nw)) 0 var(--new-col));
  filter: var(--ring) drop-shadow(0 0 calc(10px * var(--s)) var(--new-col)); animation: inv-new 1.4s ease-in-out infinite; }
.hud-top [data-open="inventory"].has-new:hover { filter: brightness(1.12) var(--ring) drop-shadow(0 0 calc(10px * var(--s)) var(--new-col)); }
@keyframes inv-new { 50% { filter: var(--ring) drop-shadow(0 0 calc(3px * var(--s)) var(--new-col)); } }
.inv-new { position: absolute; top: calc(-5px * var(--s)); right: calc(-5px * var(--s)); z-index: 2; pointer-events: none; padding: calc(2px * var(--s)) calc(4px * var(--s));
  font: calc(8px * var(--s))/1 var(--pixel); color: #fff; background: #d8412f; box-shadow: 0 0 0 2px var(--line); }
.inv-item.fresh .badge:not(.hook) { top: calc(12px * var(--s)); }
.ib-list { display: flex; flex-direction: column; gap: calc(8px * var(--s)); }
.ib-row { display: grid; grid-template-columns: 1fr auto; gap: calc(10px * var(--s)); align-items: start; padding: calc(8px * var(--s)) calc(10px * var(--s)); background: rgba(0, 0, 0, .2); }
.ib-row.new { box-shadow: inset calc(3px * var(--s)) 0 0 var(--gold); }
.ib-row .prose { margin: calc(4px * var(--s)) 0 0; white-space: pre-wrap; }
.ib-kind { color: var(--gold); }
.ib-reply { margin-top: calc(6px * var(--s)); display: flex; flex-direction: column; gap: calc(6px * var(--s)); }
.ib-reply textarea { width: 100%; box-sizing: border-box; resize: none; font: inherit; color: inherit; background: rgba(0, 0, 0, .35); border: calc(2px * var(--s)) solid var(--gold); padding: calc(6px * var(--s)); }
.ib-acts { display: flex; gap: calc(6px * var(--s)); align-items: center; }
/* Pier Racer is gone: a lone Fishing tab is no tab at all (a room's extra tabs still show) */
.hud-left .tabs:has(> .tab:only-child) { display: none; }

/* Locked out for missing emote checks (0.193.0): over everything, takes every click */
#lockout { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(22px * var(--s)); padding: 16px; background: rgba(14, 8, 4, .9); text-align: center; cursor: not-allowed; user-select: none; }
#lockout[hidden] { display: none; }
#lockout .lo-time { font-family: var(--pixel); color: var(--bad); font-size: clamp(18px, 3.4vw, 54px); line-height: 1.5; text-shadow: 4px 4px 0 #000; }
#lockout .lo-why { font-family: var(--pixel); color: var(--gold); font-size: clamp(12px, 1.8vw, 28px); line-height: 1.5; text-shadow: 3px 3px 0 #000; }

/* --- 0.199.0: My drops' Avg exp (level with the title), and what a hat cost as a sacrifice --- */
.md-avg { align-self: flex-end; white-space: nowrap; font-size: calc(13px * var(--s)); color: var(--sub); margin-bottom: 2px; }
.md-avg b { color: #ffd76a; }
.md-sac i { font-style: normal; font-weight: 700; }

/* --- 0.199.0: the dev room's bottom bar (devfoot.js), laid out like Legends of IdleOn:
   [you + room controls] [seat, time left, two drop lists] [menu buttons over Join] --- */
:root { --df-h: calc(176px * var(--s)); }
#devfoot { position: absolute; left: 0; right: 0; bottom: 0; height: var(--df-h); z-index: 30; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(12px * var(--s)); align-items: stretch;
  padding: calc(10px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s));
  background: linear-gradient(var(--wood-hi), var(--wood) calc(4px * var(--s)), var(--panel) calc(10px * var(--s)), var(--bg));
  box-shadow: 0 calc(-4px * var(--s)) 0 var(--line), 0 calc(-10px * var(--s)) calc(18px * var(--s)) rgba(0,0,0,.45); }
#devfoot[hidden] { display: none; }
body.devfoot #pier { height: calc(100% - var(--df-h)); }
body.devfoot .hud-top { display: none; }
body.devfoot .mydrops { bottom: calc(var(--df-h) + 12px * var(--s)); }
body.devfoot .hint { bottom: calc(var(--df-h) + 16px * var(--s)); }
body.devfoot .pend { bottom: calc(var(--df-h) + 16px * var(--s)) !important; }
body.no-overlay #devfoot { display: none !important; }
.df-slot { display: contents; }
/* Moved-in HUD pieces drop their floating placement. */
#devfoot .hud { position: static; top: auto; left: auto; right: auto; }
#devfoot .btn { pointer-events: auto; }

/* left: you, then the room controls */
.df-char { display: grid; grid-template-columns: auto auto; gap: calc(12px * var(--s)); align-items: start; min-height: 0; }
.df-who { display: grid; gap: calc(6px * var(--s)); width: calc(220px * var(--s)); }
#devfoot #btn-me { width: 100%; justify-content: flex-start; font-size: calc(15px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(6px * var(--s)); }
#devfoot #btn-me img { width: calc(44px * var(--s)); height: calc(44px * var(--s)); }
.df-bars { display: grid; gap: calc(4px * var(--s)); padding: calc(6px * var(--s)) calc(8px * var(--s));
  border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.df-lv { font-size: calc(14px * var(--s)); }
.df-lv b { color: var(--gold); }
.df-bar { height: calc(10px * var(--s)); background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); }
.df-bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .5s linear; }
#devfoot .hud-left { display: flex; flex-wrap: wrap; gap: calc(6px * var(--s)); align-items: stretch; align-content: flex-start; max-width: calc(380px * var(--s)); max-height: 100%; overflow: hidden; }

/* middle: the seat line, then My recent drops | lucky drops */
.df-mid { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(6px * var(--s)); min-width: 0; min-height: 0; }
#devfoot .seatinfo { display: flex; align-items: baseline; gap: calc(12px * var(--s)); text-align: left; min-width: 0; padding: calc(2px * var(--s)) calc(10px * var(--s)); }
#devfoot .seatinfo .big { font-size: calc(20px * var(--s)); }
.df-feeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px * var(--s)); min-height: 0; }
.df-feed { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; padding: calc(2px * var(--s)) calc(6px * var(--s));
  border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; }
.df-fh { color: var(--gold); padding-bottom: calc(2px * var(--s)); }
.df-list { overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; }
.df-row { display: grid; grid-template-columns: calc(34px * var(--s)) minmax(0, 1fr); gap: calc(6px * var(--s)); align-items: center; padding: 2px calc(4px * var(--s)) 2px 1px; cursor: default; }
.df-row[data-hat] { cursor: pointer; }
.df-row:hover { background: rgba(246,234,210,.06); }
.df-pic { display: grid; place-items: center; width: calc(34px * var(--s)); height: calc(26px * var(--s)); }
.df-pic img { max-width: calc(26px * var(--s)); max-height: calc(26px * var(--s)); image-rendering: pixelated; }
.df-cv { width: calc(34px * var(--s)); height: calc(26px * var(--s)); image-rendering: pixelated; }
.df-t { display: grid; min-width: 0; white-space: nowrap; line-height: 1.15; }
.df-t b { font-size: calc(13px * var(--s)); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.df-t > span { font-size: calc(11px * var(--s)); color: var(--micro); overflow: hidden; text-overflow: ellipsis; }
.df-none { margin: calc(4px * var(--s)) 0; }

/* right: the menu grid, Join in the bottom right corner */
.df-right { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(6px * var(--s)); min-height: 0; }
.df-menu { display: grid !important; grid-template-columns: repeat(3, calc(128px * var(--s))); grid-auto-rows: minmax(0, 1fr); gap: calc(4px * var(--s)); min-height: 0; }
.df-menu .side { display: contents; }
.df-menu .btn { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(5px * var(--s)); min-width: 0;
  font-size: calc(12px * var(--s)); padding: calc(2px * var(--s)) calc(4px * var(--s)) calc(4px * var(--s)); white-space: nowrap; overflow: visible; }
.df-menu .btn .ico { width: calc(18px * var(--s)); height: calc(18px * var(--s)); }
.df-menu .btn > span { overflow: hidden; text-overflow: ellipsis; }
.df-glyph { font: 400 calc(16px * var(--s))/1 var(--pixel); color: var(--gold); text-shadow: 0 2px 0 var(--line); }
.df-badge { position: absolute; top: calc(-6px * var(--s)); right: calc(-6px * var(--s)); min-width: calc(18px * var(--s)); height: calc(18px * var(--s)); padding: 0 calc(4px * var(--s));
  display: grid; place-items: center; background: var(--bad); color: #fff; font: 700 calc(11px * var(--s))/1 var(--read); box-shadow: 0 0 0 2px var(--line); }
.df-badge[hidden] { display: none; }
#devfoot .joinrow { min-width: 0; }
#devfoot .joinrow .btn.join { flex: 1 1 auto; }
@media (max-width: 1500px) {
  .df-who { width: calc(150px * var(--s)); }
  #devfoot .hud-left { max-width: calc(300px * var(--s)); }
  .df-menu { grid-template-columns: repeat(3, calc(100px * var(--s))); }
  .df-menu .btn .ico { display: none; }
}

/* launch (2026-10-03): volume + Settings on top of the right side; the game tabs are the Change game button now */
/* (his follow-up) Change game, volume and Settings sit bottom left with the room controls */
.df-ctl { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(6px * var(--s)); min-height: 0; }
.df-ctl-row { display: flex; flex-wrap: nowrap; gap: calc(6px * var(--s)); align-items: center; }
#devfoot .df-ctl-row .volchip input { width: calc(80px * var(--s)); }
#devfoot .df-sys > .row { display: flex; gap: calc(6px * var(--s)); align-items: center; margin: 0; }
#devfoot .df-games[hidden] { display: none; }
#devfoot .hud-left .tabs { display: none; }
.df-menu .btn[hidden] { display: none; }
.gm-body { overflow-y: auto; }
.gm-list { display: grid; gap: calc(10px * var(--s)); }
.gm-game { display: grid; grid-template-columns: calc(64px * var(--s)) 1fr; gap: calc(14px * var(--s)); align-items: center; text-align: left; padding: calc(10px * var(--s)) calc(14px * var(--s));
  background: var(--panel); color: var(--ink, #eef1f7); cursor: pointer; border: var(--e6) solid transparent; border-image: url(/ui/pixel/inlay.png) 3 fill / var(--e6) stretch; font: inherit; }
.gm-game:hover:not([disabled]) { filter: brightness(1.15); }
.gm-game.on { cursor: default; box-shadow: 0 0 0 2px var(--gold); }
.gm-game img { width: calc(64px * var(--s)); height: calc(64px * var(--s)); object-fit: contain; image-rendering: pixelated; }
.gm-nm { font-size: calc(22px * var(--s)); font-weight: 700; }
.gm-st { color: var(--gold); margin-top: calc(4px * var(--s)); }

/* --- 0.199.0: the personal quest window --- */
.pq-body { display: grid; gap: calc(12px * var(--s)); align-content: start; overflow-y: auto; }
.pq-odds { display: grid; gap: calc(4px * var(--s)); padding: calc(8px * var(--s)) calc(10px * var(--s)); background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); }
.pq-odd { display: flex; justify-content: space-between; font-size: calc(15px * var(--s)); }
.pq-odd span { font-weight: 700; color: var(--ink); }
.pq-act { align-items: center; gap: calc(12px * var(--s)); }
.pq-got { display: flex; gap: calc(12px * var(--s)); align-items: center; padding: calc(8px * var(--s)); background: var(--well); box-shadow: inset 0 0 0 1px var(--hair); }
.pq-got b { font-size: calc(16px * var(--s)); }
.pq-cv { width: calc(80px * var(--s)); height: calc(62px * var(--s)); image-rendering: pixelated; }

/* 0.199.0: the game version, bottom right of Settings */
.prefs-ver { justify-self: end; margin-top: calc(-4px * var(--s)); font-size: calc(11px * var(--s)); letter-spacing: .06em; color: var(--faint); }
.prefs-ver:empty { display: none; }