/* JabreeWorld UI kit v3 (docs/MASTER_SPEC.md section 4; replaces the Win98 / azure kit and docs/tokens.css).
   Loaded AFTER the inline <style> in index.html, so the reskin layer below wins over legacy rules.
   Style, not function: 44px tap targets, one orange main action, text on flat Paper or Ink, every icon labeled. */

:root {
  /* KIT V3 (MASTER_SPEC section 4, Nov 9 2026): PS2 pixels x photocopy zine. Paper + ink + one red. These six are the kit. */
  --paper: #F2EFE6; --ink: #111111; --concrete: #8C8A85; --red: #D7261E; --sky: #3A8FE0; --scrim: rgba(17,17,17,0.55);
  --tint-sand: #D9C7A3; --tint-gold: #C9A24A;   /* chat name tints only (spec: a few muted tints for readability) */
  /* type roles. Display face is TBD in the spec (Anton is the stand-in: drop Anton.woff2 into shared/ui/fonts and it wins);
     until then PP Supply Sans Bold, squeezed with .kit-display. UI + body = mono. */
  --font-display: 'Anton', 'PP Supply Sans', 'Arial Narrow', sans-serif; --font-ui: 'PP Supply Mono', monospace; --font-body: 'PP Supply Mono', monospace; --font-data: 'PP Supply Mono', monospace;
  --tap-min: 44px;
  /* the old names, pointed at the kit so every legacy rule follows (no greys-with-bevels, no azure, no yellow LCD) */
  --chrome: var(--paper); --chrome-shade: var(--concrete); --steel: var(--concrete); --graphite: var(--ink); --azure: var(--ink); --pale-azure: var(--paper);
  --signal-red: var(--red); --leaf: var(--ink); --mint: var(--paper); --yolk: var(--paper);
  --bliss-blue: var(--ink); --grass: var(--ink); --jab-orange: var(--red); --cherry: var(--red);
  --rail-yellow: var(--paper); --win-gray: var(--paper); --ink-k: var(--ink);
  /* bevels are gone: a raised thing is a 2 px ink outline, a sunk thing a hairline */
  --bevel-raised: inset 0 0 0 2px var(--ink); --bevel-sunk: inset 0 0 0 1px var(--ink); --titlebar: var(--ink);
  --accent: var(--red); --cream: var(--paper); --fog: var(--concrete); --panel: var(--ink); --panel2: #2a2a2a;
  --line: var(--concrete); --good: var(--paper); --gold: var(--tint-gold);
  /* textures (frames, big type, backgrounds only; never under small body text) */
  --tx-halftone: radial-gradient(circle, var(--ink) 30%, transparent 31%) 0 0 / 6px 6px;
  --torn: polygon(0 3%,4% 0,9% 2%,15% 0,22% 3%,30% 1%,37% 3%,45% 0,53% 2%,60% 0,68% 3%,76% 1%,83% 3%,90% 0,96% 2%,100% 0,100% 97%,95% 100%,89% 98%,82% 100%,74% 97%,66% 100%,58% 98%,50% 100%,42% 97%,34% 100%,26% 98%,18% 100%,10% 97%,4% 100%,0 98%);
}

/* ---------- textures: frames, headers, empty space only ---------- */
.tx-halftone { background-image: radial-gradient(rgba(255,255,255,.75) 1.6px, transparent 2px); background-size: 9px 9px; }
.tx-crt { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px); }
.tx-scan { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); }
.tx-plate { background-color: #9a9da3; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 18px), repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 4px, transparent 4px 18px); }

/* ---------- base components (new screens: phone, onboarding, game cards) ---------- */
.ui-window { background: var(--win-gray); box-shadow: var(--bevel-raised), 4px 4px 0 rgba(17,19,24,.35); padding: 3px; color: var(--ink-k); font-family: var(--font-body); }
.ui-titlebar { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 4px 3px 8px; background: var(--titlebar); color: #fff; font-family: var(--font-ui); font-size: 13px; letter-spacing: .5px; }
.ui-titlebar .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-titlebar .ctl { display: flex; gap: 2px; }
.ui-titlebar .ctl button { width: 26px; height: 24px; border: 0; background: var(--win-gray); box-shadow: var(--bevel-raised); font-family: var(--font-ui); font-size: 12px; color: var(--ink-k); cursor: pointer; padding: 0; }
.ui-body { background: var(--paper); margin-top: 3px; padding: 12px; box-shadow: var(--bevel-sunk); }
.ui-btn { min-height: var(--tap-min); padding: 0 16px; border: 0; font-family: var(--font-ui); font-size: 14px; letter-spacing: .5px; color: var(--ink-k); background: var(--win-gray); box-shadow: var(--bevel-raised); cursor: pointer; }
.ui-btn:active { box-shadow: var(--bevel-sunk); transform: translateY(1px); }
.ui-btn:focus-visible { outline: 3px solid var(--rail-yellow); outline-offset: 1px; }
.ui-btn--primary { background: var(--signal-red); color: #fff; }
.ui-input { min-height: var(--tap-min); padding: 0 10px; border: 0; background: #fff; box-shadow: var(--bevel-sunk); font-family: var(--font-body); font-size: 15px; color: var(--ink-k); outline: none; }
.ui-input:focus { box-shadow: var(--bevel-sunk), 0 0 0 3px var(--rail-yellow); }
.ui-lcd { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--ink-k); color: var(--rail-yellow); font-family: var(--font-ui); box-shadow: var(--bevel-sunk); text-shadow: 0 0 6px rgba(255,210,63,.45); }
.ui-blockbar { display: flex; gap: 3px; padding: 3px; background: #fff; box-shadow: var(--bevel-sunk); height: 22px; }
.ui-blockbar i { flex: 1; background: var(--bliss-blue); opacity: .12; }
.ui-blockbar i.on { opacity: 1; }
.ui-label { font-family: var(--font-ui); font-size: 12px; letter-spacing: .5px; }
.ui-title { font-family: var(--font-display); font-weight: 900; letter-spacing: -.5px; }
.ui-badge-new { display: inline-grid; place-items: center; width: 54px; height: 54px; color: #fff; background: var(--cherry); font-family: var(--font-ui); font-size: 12px; transform: rotate(-12deg);
  clip-path: polygon(50% 0,61% 14%,79% 6%,80% 25%,98% 30%,87% 46%,100% 62%,81% 68%,82% 88%,63% 82%,50% 100%,37% 82%,18% 88%,19% 68%,0 62%,13% 46%,2% 30%,20% 25%,21% 6%,39% 14%); }
.ui-bubble { position: relative; background: #fff; color: var(--ink-k); border: 2px solid var(--ink-k); border-radius: 12px; padding: 6px 10px; font-family: var(--font-body); font-size: 13px; max-width: 220px; }
.ui-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: #fff; border-right: 2px solid var(--ink-k); border-bottom: 2px solid var(--ink-k); transform: rotate(45deg); }

/* ================= RESKIN LAYER: existing lobby HUD onto the kit ================= */

/* top bar: no dark gradient over a bright sky */
#hud { background: none; padding: 12px 14px; }
.logo .star { background: var(--jab-orange); box-shadow: none; filter: drop-shadow(1px 1px 0 var(--ink-k)); }
.loc-name { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 0; color: #fff;
  text-shadow: 2px 2px 0 var(--ink-k), -1px -1px 0 var(--ink-k), 1px -1px 0 var(--ink-k), -1px 1px 0 var(--ink-k); }
.loc-url { font-family: var(--font-ui); font-size: 10px; color: #fff; text-shadow: 1px 1px 0 var(--ink-k); opacity: .9; }

/* HUD chips = LCD counters */
.chip { font-family: var(--font-ui); font-size: 12px; background: var(--ink-k); color: var(--paper); border: 0; box-shadow: var(--bevel-sunk); padding: 8px 11px; }
.chip .v { color: var(--rail-yellow); text-shadow: 0 0 6px rgba(255,210,63,.45); }
.chip.online .pulse { background: var(--grass); box-shadow: 0 0 6px var(--grass); animation: none; }
.tier-badge { font-family: var(--font-ui); font-size: 12px; background: var(--ink-k); border: 0; box-shadow: var(--bevel-sunk); padding: 8px 11px; }

/* name tags over heads: NAME / RANK on Ink */
.nlabel { font-family: var(--font-ui); font-size: 11px; background: var(--ink-k); border: 0; padding: 3px 7px; text-shadow: none; box-shadow: 2px 2px 0 rgba(17,19,24,.35); }

/* prompts + hints: Paper chips with a raised bevel */
#startHint, #hint { font-family: var(--font-ui); font-size: 12px; color: var(--ink-k); background: var(--paper); border: 0; box-shadow: var(--bevel-raised), 3px 3px 0 rgba(17,19,24,.3); padding: 10px 14px; }
#xhair { background: #fff; box-shadow: 0 0 0 2px var(--ink-k); }

/* chat: log on translucent Ink, sunken white input, orange send */
#chatLog { font-family: var(--font-body); font-size: 13px; line-height: 1.35; background: rgba(17,19,24,.72); border: 0; box-shadow: 3px 3px 0 rgba(17,19,24,.25); }
.cmsg .nm { font-family: var(--font-ui); font-size: 11px; }
#chatInput { font-family: var(--font-body); font-size: 14px; color: var(--ink-k); background: #fff; border: 0; box-shadow: var(--bevel-sunk); min-height: 40px; }
#chatInput::placeholder { color: #8a8d96; }
#chatInput:focus { box-shadow: var(--bevel-sunk), 0 0 0 3px var(--rail-yellow); }
#chatSend { font-family: var(--font-ui); font-size: 12px; color: var(--ink-k); background: var(--jab-orange); box-shadow: var(--bevel-raised); min-width: 64px; }
#chatSend:active { box-shadow: var(--bevel-sunk); }

/* points float-up + toasts */
.ptfx-item { font-family: var(--font-ui); font-size: 15px; color: var(--jab-orange); text-shadow: 2px 2px 0 var(--ink-k); }
.ptfx-item span { font-size: 10px; color: #fff; text-shadow: 1px 1px 0 var(--ink-k); }

/* rank-up banner */
#rankup { background: var(--paper); color: var(--ink-k); border: 0; box-shadow: var(--bevel-raised), 6px 6px 0 rgba(17,19,24,.35); }
#rankup .ru-k { color: #5b5f6a; font-family: var(--font-ui); }
#rankup .ru-name { font-family: var(--font-display); font-weight: 900; text-shadow: 2px 2px 0 var(--ink-k); }
#rankup .ru-perks { color: #2f7d17; font-family: var(--font-ui); }

/* mobile controls */
#joy { background: rgba(242,241,236,.28); border: 2px solid rgba(17,19,24,.55); }
#joyNub { background: var(--jab-orange); border: 2px solid var(--ink-k); }
#jumpBtn { background: var(--jab-orange); border: 2px solid var(--ink-k); color: var(--ink-k); font-family: var(--font-ui); box-shadow: 3px 3px 0 rgba(17,19,24,.35); }
#jumpBtn:active { background: #e55a0a; }
#menuBtn, #interactBtn { font-family: var(--font-ui); font-size: 13px; color: var(--ink-k); background: var(--paper); border: 0; box-shadow: var(--bevel-raised); min-height: var(--tap-min); }
#chatTab { background: var(--ink-k); border: 0; box-shadow: var(--bevel-raised); }

/* ---------- windows (Esc menu, online list, modals): Windows 98 frame, Paper content.
   Variables are remapped INSIDE windows so legacy content (written for dark panels) reads ink-on-paper. ---------- */
.win { --cream: #111318; --panel: #F2F1EC; --panel2: #e2e1da; --line: #8d8d8d; --fog: #5b5f6a; --ink: #C3C3C3; --gold: #a86f00; --good: #2f7d17;
  color: #111318; background: var(--win-gray); border: 0; padding: 3px; box-shadow: var(--bevel-raised), 6px 6px 0 rgba(17,19,24,.35); }
.win-bar { background: var(--titlebar); color: #fff; border: 0; padding: 4px 4px 4px 8px; min-height: 30px; }
.win-title { font-family: var(--font-ui); font-size: 13px; }
.win-dot { background: var(--jab-orange); }
.win-ctl .wc { width: 26px; height: 24px; background: var(--win-gray); border: 0; box-shadow: var(--bevel-raised); color: #111318; font-family: var(--font-ui); font-size: 12px; }
.win-ctl .wc.close:hover { background: var(--cherry); color: #fff; }
.win-tabs { background: var(--win-gray); border-bottom: 0; padding: 6px 4px 0; }
.win-tab { font-family: var(--font-ui); font-size: 11px; color: #111318; background: #d6d6d6; border: 0; box-shadow: inset 2px 2px 0 #fff, inset -2px 0 0 #808080; min-height: 34px; }
.win-tab.on { background: var(--paper); color: #111318; }
.win-content { background: var(--paper); box-shadow: var(--bevel-sunk); }
.win-foot { background: var(--win-gray); border-top: 0; }
.win-foot .footbtn { font-family: var(--font-ui); font-size: 11px; border: 0; min-height: var(--tap-min); background: var(--jab-orange); color: #111318; box-shadow: var(--bevel-raised); }
.win-foot .footbtn.alt { background: var(--win-gray); color: #111318; }
.win-foot .footbtn:active { box-shadow: var(--bevel-sunk); }
.win-rz { background: repeating-linear-gradient(135deg, #808080 0 2px, transparent 2px 4px); }

/* ---------- overlay modals (shop, coming soon): same Windows 98 frame as .win ---------- */
.shop-ov { background: rgba(17,19,24,.55); }
.shop-box { --cream: #111318; --panel: #F2F1EC; --panel2: #ffffff; --line: #b9b9b9; --fog: #5b5f6a; --gold: #a86f00;
  color: #111318; background: var(--win-gray); border: 0; padding: 3px; box-shadow: var(--bevel-raised), 6px 6px 0 rgba(17,19,24,.35); }
.shop-box .arc-bar { background: var(--titlebar); color: #fff; border: 0; min-height: 30px; padding: 4px 4px 4px 10px; }
.shop-box .arc-t { font-family: var(--font-ui); font-size: 13px; }
.shop-box .arc-x { width: 26px; height: 24px; display: grid; place-items: center; background: var(--win-gray); color: #111318; box-shadow: var(--bevel-raised); font-family: var(--font-ui); }
.shop-grid { background: var(--paper); box-shadow: var(--bevel-sunk); margin-top: 3px; }
.shop-card { background: #fff; border: 0; box-shadow: 0 0 0 1px #b9b9b9, 2px 2px 0 rgba(17,19,24,.15); }
.shop-thumb { background-color: #f6f5f0; border: 0; }
.shop-n { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: #111318; }
.shop-p { font-family: var(--font-ui); font-size: 14px; color: #111318; }
.shop-buy { font-family: var(--font-ui); font-size: 12px; color: #111318; background: var(--jab-orange); border: 0; box-shadow: var(--bevel-raised); min-height: 36px; display: grid; place-items: center; padding: 0 12px; }
.shop-foot { border-top: 0; background: var(--win-gray); }
.shop-foot .dbtn, .soon-body .dbtn { font-family: var(--font-ui); font-size: 12px; color: #111318; background: var(--win-gray); border: 0; box-shadow: var(--bevel-raised); min-height: var(--tap-min); display: grid; place-items: center; padding: 0 16px; }
.shop-foot .dbtn.accent, .soon-body .dbtn.accent { background: var(--jab-orange); }
.soon-body { background: var(--paper); box-shadow: var(--bevel-sunk); margin-top: 3px; }
.soon-big { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--jab-orange); text-shadow: 2px 2px 0 #111318; letter-spacing: 0; }
.soon-body p { font-family: var(--font-body); font-size: 14px; color: #3b3f4a; }

/* ---------- Nov 6 2026: UI caps + tracking, text treatments (shared/ui/fx.js installs the filters + grain) ---------- */
.ui-btn, .ui-titlebar, .ui-label { text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.ui-title { font-weight: 700; letter-spacing: 0; }
.ui-lcd { font-family: var(--font-data); }
.fx-ink { filter: url(#jb-ink); }
.fx-thresh { filter: url(#jb-thresh); }
.fx-grain { position: relative; }
.fx-grain::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); mix-blend-mode: multiply; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) text; }

/* pixel look (TJ Nov 6 2026): aliased text in the lobby UI so it matches the low-res game render (Chrome / Safari on Mac) */
body { -webkit-font-smoothing: none; font-smooth: never; }
canvas.pixel, .pixel canvas { image-rendering: pixelated; }

/* chat (Nov 7 2026): readable colours, level badges, 5-line condensed view that expands while typing or on the Esc menu */
.cmsg { color: #F2F1EC; }
.cmsg .tx { color: #F2F1EC; }
.cmsg.sys .tx { color: #F2C230; font-style: normal; }
.cmsg .nm { text-shadow: 1px 1px 0 #111318; }
#chatSend { color: #fff; background: var(--signal-red); }
#chat:not(.full) #chatLog { height: auto; max-height: none; min-height: 0; overflow: hidden; background: rgba(17,19,24,.42); box-shadow: none; }
#chat:not(.full) #chatLog .cmsg:not(:nth-last-child(-n+5)) { display: none; }
#chat:not(.full) #chatLog:empty { display: none; }
body.v3sys-on #chat #chatLog { height: 31vh !important; max-height: 31vh !important; overflow-y: auto !important; background: rgba(17,19,24,.72) !important; }
body.v3sys-on #chat #chatLog .cmsg { display: block !important; }
body.v3sys-on #chat { z-index: 76; }

/* chat wider (TJ Nov 7 2026) */
#chat { width: 440px; max-width: 46vw; }
@media (max-width: 700px) { #chat { width: 76vw; max-width: 300px; } }

/* chat line layout (TJ Nov 7 2026: balance it): [tags][badge][NAME] message, centred on one row, wrapped text hangs under
   the message (not under the badge), name and text the same size, badge a fixed compact size whatever the tier */
#chatLog { font-size: 14px; gap: 5px; padding: 8px 10px; }
.cmsg { display: flex; align-items: flex-start; gap: 7px; line-height: 24px; }
.cmsg .tagchip { flex: none; align-self: flex-start; margin-top: 3px !important; font-family: var(--font-ui); font-size: 9px; letter-spacing: .6px; padding: 2px 4px; margin: 0; border-width: 1px; }
.cmsg .lvb { flex: none; width: 23px; height: 24px; margin: 0; vertical-align: 0; align-self: flex-start; }
.cmsg .lvb b { font-size: 11px; margin-top: -3px; }
.cmsg .lvb.d3 b { font-size: 9px; }
.cmsg .lvb.t5 { width: 27px; } .cmsg .lvb.t6, .cmsg .lvb.t7 { width: 28px; height: 28px; margin: -2px 0 -2px; } .cmsg .lvb.t6 b, .cmsg .lvb.t7 b { margin-top: 0; }
.cmsg .nm { flex: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .4px; margin: 0; }
.cmsg .tx { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.cmsg.sys { display: block; }
.cmsg.sys .tx { font-size: 13px; }

/* name tags over heads (TJ Nov 7 2026): one compact row, small badge, same height whatever the tier */
.nlabel { display: flex; align-items: center; gap: 5px; padding: 2px 7px 2px 3px; line-height: 16px; }
.nlabel .lvb { width: 16px; height: 17px; margin: 0; vertical-align: 0; }
.nlabel .lvb i, .nlabel .lvb i:after { inset: 1.5px; }
.nlabel .lvb b { font-size: 8px; margin-top: -2px; }
.nlabel .lvb.d3 b { font-size: 6px; }
.nlabel .lvb.t5 { width: 19px; } .nlabel .lvb.t6, .nlabel .lvb.t7 { width: 20px; height: 20px; margin: -2px 0; } .nlabel .lvb.t6 b, .nlabel .lvb.t7 b { margin-top: 0; }
.nlabel .tagchip { margin: 0 !important; font-size: 8px; padding: 1px 3px; }


/* ================= KIT V3 LAYER (MASTER_SPEC section 4): last in the file, so it wins over the Win98-era rules above ================= */
.kit-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0; display: inline-block; transform: scaleX(.8); transform-origin: left center; }
.kit-tape { position: absolute; width: 74px; height: 22px; background: rgba(242,239,230,.55); box-shadow: inset 0 0 0 1px rgba(17,17,17,.08); transform: rotate(-3deg); pointer-events: none; }
.tx-halftone { background: var(--tx-halftone); }
body { -webkit-font-smoothing: antialiased; font-smooth: auto; }   /* rule 3: UI stays crisp (the world is the pixelated part) */

/* buttons: outline = secondary, ink = primary, red = the one main action. Key hints go in the label: LET'S GO [E] */
.ui-btn { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--font-ui); font-weight: 500; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; border-radius: 0; }
.ui-btn:hover { background: var(--ink); color: var(--paper); }
.ui-btn:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--ink); }
.ui-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.ui-btn--ink { background: var(--ink); color: var(--paper); }
.ui-btn--primary { background: var(--red); color: var(--paper); box-shadow: none; }
.ui-btn--primary:hover { background: var(--ink); }
.ui-window { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); padding: 2px; }
.ui-titlebar { background: var(--ink); color: var(--paper); font-family: var(--font-ui); font-weight: 500; }
.ui-titlebar .ctl button { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }
.ui-body { background: var(--paper); box-shadow: none; margin-top: 0; }
.ui-input { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--font-body); }
.ui-input:focus { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--red); }
.ui-lcd { background: var(--ink); color: var(--paper); text-shadow: none; box-shadow: none; }
.ui-blockbar { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); } .ui-blockbar i { background: var(--ink); }
.ui-badge-new { display: none; }   /* no stickers */
.ui-bubble { border-radius: 0; background: var(--paper); }

/* HUD top-left: zone name in display type, a thin rule, the domain in mono under it */
#hud { background: none; padding: 14px 16px; }
.logo { align-items: flex-start; gap: 0; }
.logo .star { display: none; }
.logo .loc-text { display: flex; flex-direction: column; align-items: flex-start; }
.loc-name { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 0 rgba(17,17,17,.55), 0 0 12px rgba(17,17,17,.35);
  transform: scaleX(.8); transform-origin: left center; padding-bottom: 6px; border-bottom: 2px solid var(--paper); min-width: 190px; }
.loc-url { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 0 rgba(17,17,17,.6); opacity: 1; margin-top: 6px; }
.chip, .tier-badge { background: var(--ink); color: var(--paper); box-shadow: none; font-family: var(--font-ui); } .chip .v { color: var(--paper); text-shadow: none; }
.chip.online .pulse { background: var(--paper); box-shadow: none; }

/* name tags: small ink label, name + level badge; role tags are a tiny red outlined tag */
.nlabel { font-family: var(--font-ui); font-size: 12px; letter-spacing: .5px; background: var(--ink); color: var(--paper); box-shadow: none; border: 0; text-transform: uppercase; }
.tagchip { --tc: var(--red) !important; border: 1px solid var(--red); color: var(--red); background: transparent; border-radius: 0; font-family: var(--font-ui); }

/* interaction prompt: small ink label, [E] TALK TO SAL */
#startHint, #hint { font-family: var(--font-ui); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--paper); background: var(--ink); box-shadow: none; border: 0; padding: 8px 12px; }
#xhair { background: var(--paper); box-shadow: 0 0 0 1px var(--ink); }

/* chat: bottom-left, 4 to 5 mono lines on the scrim, [T] chat */
#chat { right: auto; left: 14px; bottom: 14px; width: 440px; max-width: 40vw; }
#chatLog, #chat:not(.full) #chatLog { background: var(--scrim); box-shadow: none; border: 0; font-family: var(--font-body); font-size: 14px; }
body.v3sys-on #chat #chatLog { background: rgba(17,17,17,.8) !important; }
.cmsg, .cmsg .tx { color: var(--paper); } .cmsg .nm { font-family: var(--font-body); font-weight: 500; text-shadow: none; }
.cmsg.sys .tx { color: var(--tint-gold); }
#chatInput { background: var(--scrim); color: var(--paper); box-shadow: none; border: 0; font-family: var(--font-body); font-size: 14px; min-height: 36px; }
#chatInput::placeholder { color: var(--paper); opacity: .7; }
#chatInput:focus { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } #chatInput:focus::placeholder { color: var(--concrete); }
#chatSend { display: none; } body.chatting #chatSend { display: block; background: var(--ink); color: var(--paper); box-shadow: none; font-family: var(--font-ui); letter-spacing: 1px; }
#chatTab { background: var(--ink); box-shadow: none; border-radius: 0; }

/* toasts: top-center, red display type straight on the world ("+150 XP"); longer messages on a small ink label */
#toast { top: 118px; left: 50%; bottom: auto; transform: translateX(-50%); align-items: center; flex-direction: column; }
.toast { font-family: var(--font-ui); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 0; padding: 8px 12px; box-shadow: none; }
.ptfx-item { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--red); text-shadow: 0 1px 0 rgba(17,17,17,.35); transform: scaleX(.8); }
.ptfx-item span { font-family: var(--font-ui); font-size: 12px; color: var(--paper); text-shadow: 0 1px 0 rgba(17,17,17,.6); }

/* windows + modals (Esc menu shell, online list, shop): paper panel, ink frame, index-card tabs, ink buttons */
.win, .shop-box { --cream: #111111; --panel: #F2EFE6; --panel2: #e6e2d6; --line: #8C8A85; --fog: #8C8A85; --ink: #e6e2d6; --gold: #111111; --good: #111111;   /* legacy content uses --ink as a fill inside windows */
  background: var(--paper); color: #111111; padding: 0; box-shadow: inset 0 0 0 2px #111111; border-radius: 0; }
.win-bar, .shop-box .arc-bar { background: #111111; color: #F2EFE6; }
.win-title, .shop-box .arc-t { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.win-dot { display: none; }
.win-ctl .wc, .shop-box .arc-x { background: #111111; color: #F2EFE6; box-shadow: inset 0 0 0 1px #F2EFE6; font-family: var(--font-ui); }
.win-ctl .wc.close:hover { background: var(--red); }
.win-tabs { background: var(--paper); padding: 8px 8px 0; border-bottom: 2px solid #111111; gap: 4px; }
.win-tab { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #111111; background: var(--paper); box-shadow: inset 0 0 0 2px #111111; border-radius: 6px 6px 0 0; }
.win-tab.on { background: #111111; color: #F2EFE6; }
.win-content, .shop-grid, .soon-body { background: var(--paper); box-shadow: none; }
.win-foot, .shop-foot { background: var(--paper); border-top: 2px solid #111111; }
.win-foot .footbtn, .shop-foot .dbtn, .soon-body .dbtn, .shop-buy { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; background: var(--paper); color: #111111; box-shadow: inset 0 0 0 2px #111111; }
.win-foot .footbtn:not(.alt), .shop-foot .dbtn.accent, .soon-body .dbtn.accent, .shop-buy { background: #111111; color: #F2EFE6; }
.win-rz { background: none; }
.shop-ov { background: var(--scrim); }
.shop-card { background: var(--paper); box-shadow: inset 0 0 0 1px #111111; } .shop-thumb { background-color: #e6e2d6; }
.soon-big { font-family: var(--font-display); color: var(--red); text-shadow: none; }
#rankup { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } #rankup .ru-name { text-shadow: none; } #rankup .ru-perks, #rankup .ru-k { color: var(--concrete); }

/* mobile controls: ink outlines on paper, no colour */
#joy { background: rgba(242,239,230,.25); border: 2px solid var(--ink); } #joyNub { background: var(--ink); border: 0; }
#jumpBtn { background: var(--ink); color: var(--paper); border: 0; box-shadow: none; } #jumpBtn:active { background: var(--red); }
#menuBtn, #interactBtn { background: var(--ink); color: var(--paper); box-shadow: none; font-family: var(--font-ui); }

/* Esc menu (SYSTEM), J-Phone message plate + form controls: kit colours over the rules lobby/js/v3ui.js injects */
input[type=range], input[type=checkbox], input[type=radio] { accent-color: #111111; }
body #v3sys h4 { color: var(--ink); font-size: 14px; letter-spacing: 1.5px; border-bottom: 1px solid var(--concrete); padding-bottom: 4px; }
body #v3sys .row { font-size: 14px; }
body #v3sys .systabs { display: flex; gap: 4px; padding: 8px 8px 0; background: var(--paper); border-bottom: 2px solid var(--ink); }
body #v3sys .systabs button { clip-path: none; margin: 0; min-height: 34px; padding: 0 16px; border: 0; border-radius: 6px 6px 0 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-family: var(--font-ui); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
body #v3sys .systabs button.on { background: var(--ink); color: var(--paper); }
body #v3sys .seg .ui-btn.on { background: var(--ink); color: var(--paper); }
body #v3sys .keys b { background: var(--ink); color: var(--paper); }
body #v3notif { top: 262px; right: 16px; font-size: 13px; letter-spacing: 1px; padding: 6px 10px; }

/* ---------- J-PHONE (MASTER_SPEC section 4, TJ Nov 10 2026: replaces the ice-blue candybar): a black touch-screen phone, no
   keypad, so the screen is big. Slightly pixelated and styled (stepped pixel bezel, a faint pixel grid on the glass), but the
   UI inside stays kit v3: paper cards, ink type, one red. The selected row is a red bar. Overrides lobby/js/v3ui.js. ---------- */
body #v3phone { width: 300px; bottom: -860px; filter: drop-shadow(0 16px 18px rgba(17,17,17,.42)); font-family: var(--font-ui); }
body #v3phone.show { bottom: 14px; }
body #v3phone .lid { border: 0; border-radius: 38px 38px 0 0; padding: 18px 12px 8px; background: #111111;
  box-shadow: inset 0 0 0 2px #2b2b2b, inset 0 0 0 4px #111111, inset 0 0 0 6px #1d1d1d; image-rendering: pixelated; }
body #v3phone .speaker { position: relative; width: 52px; height: 6px; margin: 0 auto 10px; border-radius: 0; background: #2e2e2e;
  box-shadow: 2px 0 0 #2e2e2e, -2px 0 0 #2e2e2e; }
body #v3phone .speaker:after { content: ''; position: absolute; right: -22px; top: -1px; width: 8px; height: 8px; background: #26303a; box-shadow: inset 2px 2px 0 #4a5a6a; }
body #v3phone .screen { height: 452px; background: var(--paper); border: 0; border-radius: 4px; box-shadow: 0 0 0 2px #000; position: relative; }
body #v3phone .screen:after { display: block; content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(17,17,17,.045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(17,17,17,.03) 0 1px, transparent 1px 3px); }
body #v3phone .bar { background: var(--ink); color: var(--paper); border-bottom: 0; font-size: 12px; letter-spacing: 1px; font-weight: 500; padding: 5px 10px; }
body #v3phone .app { color: var(--ink); font-size: 14px; padding: 6px 0; }
body #v3phone .app > *:not(.grid):not(.mapbox) { margin-left: 8px; margin-right: 8px; }
body #v3phone .apphead { color: var(--ink); text-shadow: none; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 5px; }
body #v3phone .grid { display: block; padding-top: 4px; }
body #v3phone .tile { position: relative; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 4px 14px; background: none; border: 0; border-bottom: 1px solid rgba(17,17,17,.14); color: var(--ink); text-shadow: none; font-family: var(--font-ui); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
body #v3phone .tile:hover, body #v3phone .tile:focus-visible { background: var(--red); color: var(--paper); border-color: var(--red); outline: none; }
body #v3phone .tile svg { width: 20px; height: 20px; filter: grayscale(1) contrast(30) brightness(.6); }
body #v3phone .tile:hover svg, body #v3phone .tile:focus-visible svg { filter: brightness(0) invert(1); }
body #v3phone .tile .dot { position: static; margin: 0 0 0 auto; background: var(--ink); color: var(--paper); border-radius: 0; font-size: 12px; padding: 0 6px; }
body #v3phone .card { background: var(--paper); color: var(--ink); box-shadow: none; border-top: 1px solid var(--ink); margin-bottom: 0; padding: 8px 2px; font-size: 13px; }
body #v3phone .card b { font-size: 13px; letter-spacing: 1px; }
body #v3phone .av { border: 2px solid var(--ink); background: var(--paper) !important; color: var(--ink); }
body #v3phone .bubble { border-radius: 0; background: var(--paper); border: 1px solid var(--ink); font-size: 13px; } body #v3phone .bubble.me { background: var(--ink); color: var(--paper); }
body #v3phone .swr i { border: 2px solid var(--ink); } body #v3phone .swr i.on { outline: 3px solid var(--red); }
body #v3phone .sty button { border: 0; box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; }
body #v3phone .sty button.on, body #v3phone .tabs2 .ui-btn.on { background: var(--ink); color: var(--paper); }
body #v3phone .tabs2 { gap: 0; } body #v3phone .tabs2 .ui-btn { min-height: 34px; padding: 0 4px; font-size: 11px; box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); color: var(--ink); }
body #v3phone .app .ui-btn { min-height: 32px; font-size: 12px; }
body #v3phone .hinge, body #v3phone .keypad { display: none; }
body #v3phone .base { display: block; border: 0; border-radius: 0 0 38px 38px; padding: 6px 18px 16px; background: #111111;
  box-shadow: inset 0 0 0 2px #2b2b2b, inset 0 0 0 4px #111111, inset 0 0 0 6px #1d1d1d; margin-top: -6px; }
body #v3phone .base .soft { display: flex; justify-content: space-between; align-items: center; }
body #v3phone .base .ui-btn { min-height: 30px; min-width: 64px; padding: 0 10px; font-size: 11px; letter-spacing: 1.5px; color: var(--paper); background: transparent; box-shadow: inset 0 0 0 2px #3a3a3a; border: 0; border-radius: 0; }
body #v3phone .base .ui-btn:hover { background: var(--red); box-shadow: none; }
body #v3phone .dpad { width: 54px; height: 6px; border: 0; border-radius: 0; background: #5a5a5a; box-shadow: 2px 0 0 #5a5a5a, -2px 0 0 #5a5a5a; }
body #v3phone .dpad:after { display: none; }
/* GAMES app rows (TJ Nov 10): icon, name + sport, live count (or the bot-fill note), PLAY */
body #v3phone .gl { display: block; }
body #v3phone .grow { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--ink); }
body #v3phone .grow .gi svg { width: 36px; height: 36px; display: block; image-rendering: pixelated; }
body #v3phone .grow .gi img { width: 40px; height: 40px; display: block; image-rendering: pixelated; }
body #v3phone .grow .gi.art img { width: 46px; height: 46px; margin: -3px; image-rendering: auto; filter: drop-shadow(1px 1px 0 #111) drop-shadow(1px 1px 0 #111) drop-shadow(1px 2px 0 rgba(17,17,17,.35)); }   /* TJ Nov 11: drawn icon, no background, a thin card edge */
body #v3phone .grow .gx { height: 4px; background: rgba(17,17,17,.15); margin-top: 5px; max-width: 220px; } body #v3phone .grow .gx i { display: block; height: 100%; background: var(--red); }   /* daily XP cap bar (TJ Nov 10) */
body #v3phone .grow .sp { font-size: 11px; letter-spacing: 1px; background: var(--ink); color: var(--paper); padding: 1px 6px; }
body #v3phone .grow .gm { font-size: 12px; color: var(--concrete); letter-spacing: .5px; margin-top: 3px; }
body #v3phone .grow .gm .lv { color: var(--red); font-weight: 700; }
body #v3phone .grow.lock { opacity: .55; }
/* wardrobe (FITS) window: kit colours for the selected style + swatch */
body #v3ward .sty button { border: 0; box-shadow: inset 0 0 0 2px var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-ui); text-transform: uppercase; }
body #v3ward .sty button.on { background: var(--ink); color: var(--paper); }

/* ---------- login card (index.html #authOv): a paper card with an ink frame on the scrim, ink inputs, red main action ---------- */
body #authOv { background: var(--scrim); font-family: var(--font-body); } body #authOv::before { display: none; }
body #authCard { --cream: #111111; --fog: #8C8A85; --line: #111111; --panel: #F2EFE6; --accent: #D7261E; background: var(--paper); color: #111111; border: 0; box-shadow: inset 0 0 0 2px #111111; padding: 26px 24px; }
body #authLogo { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0; color: #111111; text-shadow: none; text-transform: uppercase; display: inline-block; transform: scaleX(.8); }
body #authUrl { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #8C8A85; }
body #authBanner { border-top: 2px solid #111111; border-bottom: 2px solid #111111; background: none; } body #bannerWord { font-family: var(--font-ui); color: #111111; text-shadow: none; }
body #authSub { color: #111111; opacity: 1; font-size: 15px; }
body .authInp { font-family: var(--font-body); font-size: 16px; color: #111111; background: var(--paper); border: 0; box-shadow: inset 0 0 0 2px #111111; } body .authInp:focus { box-shadow: inset 0 0 0 2px #111111, 0 0 0 2px #D7261E; }
body .authInp::placeholder { color: #8C8A85; }
body #authMsg, body #authMsg2 { color: #D7261E; font-size: 14px; }
body .authBtn { font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; background: #D7261E; color: #F2EFE6; min-height: 46px; }
body #authCard a, body #authCard .alink { color: #111111; }
body #authCard label, body #authCard small, body #authCard p { color: #111111; }

/* ---------- home screen (lobby/js/v3ui.js #v3home): the live world behind, kit type and cards on top ---------- */
body #v3home .title { -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(17,17,17,.45); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 8vw, 118px); line-height: .9; letter-spacing: 0; transform: scaleX(.8); transform-origin: left top; padding-bottom: 0; }
body #v3home .title [data-tt] { display: block; padding-bottom: 10px; border-bottom: 3px solid var(--paper); }
body #v3home .title small { font-family: var(--font-ui); color: var(--paper); text-shadow: 0 1px 0 rgba(17,17,17,.6); font-size: clamp(13px, 1.4vw, 18px); letter-spacing: 2px; margin-top: 12px; transform: scaleX(1.25); transform-origin: left top; }
body #v3home .online { background: var(--ink); color: var(--paper); font-size: 13px; letter-spacing: 1px; } body #v3home .online i { border-radius: 0; background: var(--paper); box-shadow: none; }
body #v3home .stats .row { font-size: 13px; letter-spacing: 1px; }
body #v3home .play { font-size: 22px; letter-spacing: 4px; }
body #v3home .ticker { background: var(--ink); color: var(--paper); letter-spacing: 2px; }
body #v3home:after { display: none; }


/* ================= TJ feedback round, Nov 9 2026 (late) ================= */
/* messages + errors: small, bottom right, stacked just above the [J] hint (was top centre) */
body #toast { top: auto; left: auto; right: 16px; bottom: 50px; transform: none; align-items: flex-end; flex-direction: column-reverse; gap: 4px; }
body .toast { font-size: 12px; letter-spacing: .8px; padding: 5px 9px; max-width: min(360px, 60vw); text-align: right; }
@media (pointer: coarse) { body #toast { bottom: 330px; } }

/* J-PHONE BIG SCREEN: opening an app zooms the phone up to the middle of the screen so quests, fits and rewards are
   readable; the game stays visible around it. Same black touch-screen body (TJ Nov 10 2026). */
body #v3phone { transition: bottom .28s cubic-bezier(.2,.9,.3,1.1), right .3s cubic-bezier(.2,.9,.3,1.1), width .3s cubic-bezier(.2,.9,.3,1.1), transform .3s cubic-bezier(.2,.9,.3,1.1); }
body #v3phone .screen { transition: height .3s cubic-bezier(.2,.9,.3,1.1); }
body #v3phone.big { right: 50%; transform: translateX(50%); width: min(860px, 92vw); }
body #v3phone.big.show { bottom: 5vh; }
body #v3phone.big .lid { border-radius: 40px 40px 0 0; padding: 20px 20px 10px; }
body #v3phone.big .screen { height: min(660px, 72vh); }
body #v3phone.big .base { border-radius: 0 0 40px 40px; padding: 8px 26px 18px; }
body #v3phone.big .base .ui-btn { min-height: 38px; min-width: 110px; font-size: 13px; }
body #v3phone.big .bar { font-size: 14px; padding: 6px 14px; }
body #v3phone.big .app { font-size: 16px; line-height: 1.45; padding: 12px 6px; }
body #v3phone.big .app > *:not(.grid):not(.mapbox) { margin-left: 18px; margin-right: 18px; }
body #v3phone.big .apphead { font-size: 22px; letter-spacing: 2px; padding-bottom: 8px; margin-bottom: 12px; border-bottom-width: 2px; }
body #v3phone.big .card { font-size: 15px; padding: 12px 4px; }
body #v3phone.big .card b { font-size: 15px; }
body #v3phone.big .bubble { font-size: 15px; padding: 9px 12px; max-width: 70%; }
body #v3phone.big .av { width: 40px; height: 40px; font-size: 16px; }
body #v3phone.big .app .ui-btn { min-height: 40px; font-size: 13px; padding: 0 16px; }
body #v3phone.big .tabs2 .ui-btn { font-size: 13px; }
body #v3phone.big .swr i { width: 32px; height: 32px; }
body #v3phone.big .sty button { min-height: 38px; font-size: 13px; padding: 4px 12px; }
body #v3phone.big .grow { grid-template-columns: 56px 1fr auto; padding: 14px 4px; }
body #v3phone.big .grow .gi svg { width: 48px; height: 48px; } body #v3phone.big .grow .gi.art img { width: 60px; height: 60px; }
body #v3phone.big .grow .gm { font-size: 14px; }
body #v3phone.big .ui-lcd { font-size: 13px !important; }
@media (max-width: 600px) { body #v3phone.big { width: 96vw; } body #v3phone.big .screen { height: 70vh; } }

/* HOME SCREEN: one-line title, a taped paper rider card, plain wording */
body #v3home .title { white-space: nowrap; font-size: clamp(64px, 10vw, 150px); left: 4vw; top: 3vh; }
body #v3home .title [data-tt] { border-bottom-width: 4px; }
body #v3home .stats { box-shadow: 0 10px 16px rgba(17,17,17,.3); transform: rotate(-1.4deg); padding: 0; }
body #v3home .stats:before { content: ''; position: absolute; left: 50%; top: -11px; width: 96px; height: 24px; margin-left: -48px; background: rgba(242,239,230,.62); box-shadow: inset 0 0 0 1px rgba(17,17,17,.08); transform: rotate(2deg); z-index: 2; }
body #v3home .stats .ui-titlebar { letter-spacing: 2px; }
body #v3home .stats .ui-body { padding: 14px; }
body #v3home .stats .ui-blockbar { height: 8px; padding: 0; gap: 2px; box-shadow: none; background: none; margin: 10px 0 8px; } body #v3home .stats .ui-blockbar i { background: var(--concrete); opacity: .35; } body #v3home .stats .ui-blockbar i.on { background: var(--red); opacity: 1; }
body #v3home .stats .row { border-top: 1px solid var(--ink); margin: 0; padding: 7px 0; }
body #v3home .stats .row:first-child { border-top: 0; }
body #v3home .play { min-width: 300px; min-height: 72px; font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: 2px; }

/* dialogs (shops, JAB AUTO, notice board): keeper name in display type, one red; quest strip sits under any open window */
body #v3qt { z-index: 17; }
.ui-window .who { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); text-transform: uppercase; display: inline-block; transform: scaleX(.8); transform-origin: left center; }
.ui-window .line { font-family: var(--font-body); font-size: 15px; line-height: 1.45; }

/* incoming message (lobby/js/v3ui.js #v3msg): portrait + the text typed out, under the minimap. Replaces the NEW TEXT plate. */
#v3msg { position: fixed; right: 16px; top: 274px; z-index: 38; width: 330px; max-width: 44vw; display: none; gap: 10px; align-items: flex-start; padding: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 12px rgba(17,17,17,.3); transform: rotate(.5deg); pointer-events: none; }
#v3msg.show { display: flex; animation: v3msgIn .22s cubic-bezier(.2,.8,.3,1); }
@keyframes v3msgIn { from { transform: translateX(110%) rotate(.5deg); } to { transform: rotate(.5deg); } }
#v3msg .pt { flex: none; width: 64px; height: 64px; box-shadow: inset 0 0 0 2px var(--ink); padding: 2px; display: grid; place-items: center; background: var(--paper); }
#v3msg .pt img { width: 100%; height: 100%; object-fit: cover; display: block; }
#v3msg .pt b { font-family: var(--font-display); font-size: 34px; }
#v3msg .tx { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.4; }
#v3msg .tx b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; margin-bottom: 4px; transform: scaleX(.8); transform-origin: left center; }
body #v3notif { display: none !important; }
body.v3home-on #v3msg, body.v3photo-on #v3msg, body.v3talk-on #v3msg, body.v3map-on #v3msg, body.v3phone-on #v3msg { visibility: hidden; }
@media (max-width: 700px) { #v3msg { top: 150px; width: 240px; } }

/* ---------- CHAT (TJ Nov 10 2026, MASTER_SPEC section 4 "Chat"): kit v3 mono on the scrim. One block per line, long lines and
   long words wrap (never run off or overlap), system lines (JABREE host, votes, trivia) and private messages styled apart from
   riders, an @mention of you in red, older lines fade out while the chat is closed. [T] opens it full height with the whole
   history; [/] opens it with the slash typed. ---------- */
#chatLog .cmsg { display: block; position: static; line-height: 20px; padding: 2px 0; margin: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-body); font-size: 14px; color: var(--paper); }
#chatLog .cmsg > * { vertical-align: middle; }
#chatLog .cmsg .lvb, #chatLog .cmsg .tagchip { display: inline-flex; margin-right: 5px; }
#chatLog .cmsg .nm { margin-right: 6px; font-weight: 700; }
#chatLog .cmsg .nm.click { cursor: pointer; } #chatLog .cmsg .nm.click:hover { text-decoration: underline; }
#chatLog .cmsg .tx { color: var(--paper); }
#chatLog .cmsg.sys .tx { color: #C9C6BD; }
#chatLog .cmsg.sys::before { content: 'JABREE'; display: inline-block; font-family: var(--font-ui); font-size: 10px; letter-spacing: 1.5px; line-height: 14px; padding: 0 5px; margin-right: 6px; background: var(--paper); color: var(--ink); vertical-align: middle; }
#chatLog .cmsg.sys.quiz .tx { color: var(--paper); font-weight: 700; }
#chatLog .cmsg.sys.dm::before { content: 'PM'; background: var(--red); color: var(--paper); }
#chatLog .cmsg.sys.dm .tx { color: var(--paper); }
#chatLog .cmsg.at { background: var(--red); box-shadow: -4px 0 0 var(--red), 4px 0 0 var(--red); }
#chatLog .cmsg.at .tx, #chatLog .cmsg.at .nm { color: var(--paper) !important; }
#chatLog .cmsg .tv.ok { background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; padding: 0 5px; margin-left: 6px; }
#chatLog .cmsg .tv.no { color: var(--concrete); font-size: 12px; }
/* closed: the last 5 lines, the older ones fading */
#chat:not(.full) #chatLog .cmsg:nth-last-child(5) { opacity: .3; } #chat:not(.full) #chatLog .cmsg:nth-last-child(4) { opacity: .5; } #chat:not(.full) #chatLog .cmsg:nth-last-child(3) { opacity: .72; }
/* open ([T]): almost full height, top to bottom, all history scrollable */
body #chat.full { top: 74px; bottom: 14px; display: flex; flex-direction: column; width: 480px; max-width: 46vw; z-index: 74; }
body #chat.full #chatLog { flex: 1 1 auto; height: auto !important; max-height: none !important; min-height: 0; overflow-y: auto !important; background: rgba(17,17,17,.78) !important; padding: 10px 12px; }
body #chat.full #chatLog .cmsg { display: block !important; opacity: 1 !important; }
/* name card (click a name): level, MSG, MUTE */
#v3ncard { position: fixed; z-index: 90; display: none; transform: translateY(-100%); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 6px 6px 0 rgba(17,17,17,.3); padding: 8px 10px; font-family: var(--font-body); font-size: 13px; min-width: 170px; }
#v3ncard.show { display: block; }
#v3ncard b { display: block; font-family: var(--font-ui); font-size: 15px; letter-spacing: 1px; }
#v3ncard span { display: block; color: var(--concrete); font-size: 12px; letter-spacing: 1px; margin: 2px 0 8px; }
#v3ncard div { display: flex; gap: 6px; } #v3ncard button { flex: 1; min-height: 32px; border: 0; cursor: pointer; font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px; background: var(--ink); color: var(--paper); }
#v3ncard button + button { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
/* quest done texts show what they paid (TJ Nov 10 2026): a red +N XP tag after the keeper's line */
#v3msg .xpc { display: inline-block; margin-top: 5px; font-style: normal; font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 1px; background: var(--red); color: var(--paper); padding: 1px 7px; }
/* J-Phone list (TJ Nov 10 2026): GAMES / QUESTS / MAP use the map key's colours; hover = red bar with the icon on a paper chip
   (so the colours keep their contrast), pressed = white */
body #v3phone .tile .ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; font-style: normal; }
body #v3phone .tile.kc svg { filter: none; width: 24px; height: 24px; }
body #v3phone .tile:hover .ic, body #v3phone .tile:focus-visible .ic { background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
body #v3phone .tile:hover svg, body #v3phone .tile:focus-visible svg { filter: grayscale(1) contrast(30) brightness(.6); }
body #v3phone .tile.kc:hover svg, body #v3phone .tile.kc:focus-visible svg { filter: none; }
body #v3phone .tile:active { background: #ffffff; color: var(--ink); }