/* MLG Deck skin v0.5 — "MLG / LAN-party 2000s" (the owner's two GPT mockups, mockup 2 primary).
   IE6 window chrome + XP-style taskbar around lime-on-green-black panels. Rules: 1 px bevels (dark line + light
   line), radius 0-2 px, 1 px hard offsets only, no blur, no glass, no soft shadows. Lime is ONLY: active tab,
   selected-tile ring, Play fill, section headings, links, the address text. Every picture is a crop of the
   mockups (assets/skin/, tools/cut-skin.py) or a game tile; icons are inline Lucide glyphs.
   Motion: transform + opacity only, 90-220 ms, no overshoot. */

:root {
  /* surfaces (sampled from mockup 2, then locked) */
  --bg: #0b0f0a;
  --panel: #121a12;
  --panel-2: #17201a;
  --panel-alt: #0f160f;
  --sunken: #070907;
  --raised: #1d281d;
  --hover: #223022;
  /* ink */
  --lime: #bdf231;          /* the Play button's upper face in mockup 2 */
  --lime-lo: #8fbf1c;
  --lime-ink: #0b0f0a;
  --ink: #e8f0e0;
  --muted: #8fa888;
  --disabled: #5c6b58;
  /* bevel lines */
  --dark: #050705;
  --light: #2a3a2a;
  /* window chrome (IE6 / XP classic greys) */
  --chrome: #2b2f29;
  --chrome-hi: #454a42;
  --chrome-lo: #1a1d18;
  --silver: #b6b7b0;
  --silver-hi: #e4e5df;
  --silver-lo: #7c7d77;
  --silver-ink: #121410;
  --title-a: #1d2a1d;
  --title-b: #0d120d;

  --ui: Tahoma, Verdana, "Segoe UI", sans-serif;
  --pix: "Press Start 2P", "Lucida Console", monospace;
  --term: "VT323", "Lucida Console", "Courier New", monospace;
  --wm: "Press Start 2P", Impact, sans-serif;   /* Pixelify Sans was tried: its C reads as O ("DEOK", "OS 1.6") */
  --mono: "Lucida Console", "Courier New", monospace;

  /* layout (phone first) */
  --gutter: 12px;
  --tile-w: 132px;
  --sel-mul: 1.3;
  --label-h: 18px;
  --gap: 8px;
  --wm-max: 34px;
  --wm-min: 18px;
  --band-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
@media (min-width: 900px) {
  :root {
    --gutter: 18px;
    --tile-w: clamp(118px, min(12vw, 15vh), 200px);
    --sel-mul: 1.4;
    --label-h: 20px;
    --gap: 10px;
    --wm-max: clamp(34px, 6.2vh, 64px);
    --wm-min: 22px;
    --band-h: clamp(70px, 9vh, 96px);
  }
}

@media (min-width: 900px) and (min-height: 950px) {
  /* tall / full-screen desktops: the shelf, the wordmark and the cards grow with the screen so nothing sits in a void */
  :root { --tile-w: clamp(140px, min(14vw, 24vh), 300px); --wm-max: clamp(48px, 9vh, 96px); }
  .cards .card { min-height: clamp(130px, 20vh, 260px); }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #050605;
  color: var(--ink);
  font: 12px/1.4 var(--ui);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }
[hidden] { display: none !important; }
.noscript { position: fixed; inset: 0; z-index: 99; margin: 0; padding: 24px; background: var(--bg); color: var(--ink); font-size: 14px; }
:focus-visible { outline: 1px dotted var(--lime); outline-offset: 2px; }
.mono { font-family: var(--mono); }

/* ---------- bevel helpers ---------- */
.raised, .panel, .card, .pop, .sheet, .dlg {
  background: var(--panel);
  border: 1px solid var(--dark);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 #0a0e0a;
}
.sunk, .field, .table-wrap, .bar {
  background: var(--sunken);
  border: 1px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 24px; padding: 2px 10px; border-radius: 2px;
  background: linear-gradient(#263326, #182118);
  border: 1px solid var(--dark);
  box-shadow: inset 1px 1px 0 #3a4d3a, inset -1px -1px 0 #0c110c;
  color: var(--ink); font-weight: bold; font-size: 12px; white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: linear-gradient(#2e3e2e, #1d281d); }
.btn:active, .btn.is-on, .btn[aria-pressed="true"] {
  background: linear-gradient(#141c14, #1f2a1f);
  box-shadow: inset 1px 1px 0 #0c110c, inset -1px -1px 0 #3a4d3a;
}
.btn:active > *, .btn:active { transform: translate(1px, 1px); }
.btn:disabled { color: var(--disabled); cursor: default; }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn { width: 30px; height: 28px; padding: 0; }
.link { color: var(--lime); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.link::after { content: " >>"; text-decoration: none; display: inline-block; margin-left: 2px; }
.link:hover { color: var(--ink); }
.field { height: 24px; padding: 0 6px; color: var(--ink); border-radius: 0; outline: none; }
.field:focus { border-color: var(--dark) var(--lime) var(--lime) var(--dark); }
.field::placeholder { color: var(--disabled); }
select.field { padding-right: 4px; }

/* ---------- the window (phone: full screen; desktop: a framed IE window on a dark desktop) ---------- */
.win {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
}
@media (min-width: 900px) {
  .win { border: 1px solid #000; box-shadow: inset 1px 1px 0 #3c463c; padding: 0; }
}
/* The maximize/restore button toggles .is-windowed: a floating 1600 px IE window on the dark desktop.
   Default is full screen (owner, 2026-10-14: "I want it full screen"). */
@media (min-width: 1440px) and (min-height: 880px) {
  .win.is-windowed { top: 12px; bottom: 12px; left: max(12px, calc((100vw - 1600px) / 2)); right: max(12px, calc((100vw - 1600px) / 2)); box-shadow: inset 1px 1px 0 #3c463c, 1px 1px 0 #000; }
}

/* title bar (also used by dialogs, the player and the sheet) */
.titlebar {
  flex: none; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 3px 0 6px;
  background: linear-gradient(var(--title-a), var(--title-b));
  border-bottom: 1px solid #000;
  font-weight: bold; color: var(--ink); user-select: none;
}
.tb-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-title { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#appTitle { letter-spacing: .06em; text-transform: none; }
.tb-sub { font-weight: normal; color: #c9d3c2; }
.tb-btns { display: flex; gap: 2px; flex: none; }
.tb-btn {
  width: 18px; height: 16px; display: grid; place-items: center;
  background: linear-gradient(var(--silver-hi), var(--silver)); border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--silver-lo);
}
.tb-btn:hover { background: linear-gradient(#fff, #cfd0c9); }
.tb-btn svg { width: 10px; height: 10px; fill: none; stroke: var(--silver-ink); stroke-width: 3; stroke-linecap: square; }

/* IE menu bar, toolbar, address bar */
.ie-menubar, .ie-toolbar { display: none; }
.ie-address {
  flex: none; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 6px;
  background: var(--chrome); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 var(--chrome-hi);
}
.ie-addr-k { font-size: 11px; color: #c9d3c2; flex: none; }
.ie-addr-box {
  flex: 1; min-width: 0; height: 20px; display: flex; align-items: center; gap: 4px; padding: 0 4px;
  background: #000; border: 1px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}
.ie-addr-box svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--lime-lo); stroke-width: 2; }
.ie-addr { flex: 1; min-width: 0; height: 18px; border: 0; padding: 0; background: transparent; color: var(--lime); font: 12px/18px var(--mono); outline: none; text-overflow: ellipsis; }
@media (min-width: 900px) {
  .ie-menubar {
    flex: none; display: flex; align-items: center; height: 22px; padding: 0 4px;
    background: linear-gradient(#5b5f57, #46493f); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #6f746a;
  }
  .ie-menu { padding: 2px 8px; font-size: 12px; color: #eef2ea; }
  .ie-menu u { text-underline-offset: 2px; }
  .ie-menu:hover:not([aria-disabled="true"]), .ie-menu[aria-expanded="true"] { background: var(--lime); color: var(--lime-ink); }
  .ie-menu[aria-disabled="true"] { color: #9a9e94; cursor: default; }
  .ie-toolbar {
    flex: none; display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 6px;
    background: linear-gradient(#3b3f37, var(--chrome)); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 var(--chrome-hi);
  }
  .ie-tool {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; font-size: 12px; color: #eef2ea;
    border: 1px solid transparent;
  }
  .ie-tool svg { width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  #ieStop svg { stroke: #e0705a; }
  #ieHome svg, #ieSearch svg { stroke: #d9e3d2; }
  #ieFav svg { stroke: #e6c94a; }
  .ie-tool:hover:not(:disabled) { border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); background: #353a32; }
  .ie-tool:active:not(:disabled), .ie-tool[aria-expanded="true"] { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); background: #22251f; }
  .ie-tool:disabled { cursor: default; color: #7b8075; }
  .ie-tool:disabled svg { stroke: #6a6f65; }
  .ie-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--chrome-lo); box-shadow: 1px 0 0 var(--chrome-hi); }
  .ie-address { height: 28px; }
  .ie-addr-box { height: 22px; }
}
/* the drop-down menus (menu bar, Favorites button, Start) */
.ie-pop {
  position: fixed; z-index: 80; min-width: 210px; max-width: min(340px, calc(100vw - 8px)); padding: 2px;
  background: #1a1f19; border: 1px solid #000; box-shadow: inset 1px 1px 0 #3c463c, 2px 2px 0 #000;
  display: grid;
}
.ie-item { display: flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px 2px 4px; text-align: left; font-size: 12px; color: var(--ink); }
.ie-item-ck { width: 14px; flex: none; text-align: center; color: var(--lime); }
.ie-item-l { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-item-n { margin-left: 14px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ie-item:hover:not(:disabled), .ie-item:focus-visible { background: var(--lime); color: var(--lime-ink); outline: none; }
.ie-item:hover:not(:disabled) .ie-item-n, .ie-item:focus-visible .ie-item-n, .ie-item:hover:not(:disabled) .ie-item-ck { color: var(--lime-ink); }
.ie-item:disabled { color: var(--disabled); cursor: default; }
.ie-pop-sep { height: 2px; margin: 3px 2px; border-top: 1px solid #000; border-bottom: 1px solid #333c33; }

/* ---------- the app area ---------- */
.app {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) 6px;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

/* header band: the LAN-party photo crop + wordmark */
.band {
  position: relative; flex: none; height: var(--band-h); margin: 0 calc(-1 * var(--gutter));
  display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter);
  overflow: hidden; background: #0d120d; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--light);
}
.band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .55; pointer-events: none; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 7, .82) 0%, rgba(7, 9, 7, .25) 45%, rgba(7, 9, 7, .55) 100%); pointer-events: none; }
.band > :not(.band-photo) { position: relative; z-index: 1; }
.band-brand { min-width: 0; }
.band-wm { font: calc(var(--band-h) * .36)/1 var(--wm); text-transform: none; letter-spacing: .02em; color: var(--ink); text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.band-tag { margin-top: 3px; font: calc(var(--band-h) * .22)/1 var(--term); letter-spacing: .32em; color: #c9d3c2; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.band-lines { margin-left: auto; font: 15px/1.02 var(--term); letter-spacing: .06em; color: #a9c58a; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.band-lan { height: calc(var(--band-h) * .8); width: auto; flex: none; transform: rotate(-4deg); opacity: .95; }
@media (max-width: 699px) { .band-lines, .band-lan { display: none; } }
/* header stickers (owner, 2026-10-14: "put more stickers up there"): spread across the photo between the wordmark
   and the >> lines; cut from the mockups (trollface, Doritos, MLG shield) or generated (Pepe, Mountain Dew) */
.band > .band-stks { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.bstk { position: absolute; bottom: -4%; height: 92%; width: auto; filter: drop-shadow(1px 1px 0 #000); }
.bstk-troll { left: 27%; transform: rotate(-6deg); }
.bstk-pepe { left: 37%; height: 96%; bottom: -8%; transform: rotate(4deg); }
.bstk-mlg { left: 46%; height: 70%; bottom: 14%; transform: rotate(-9deg); }
.bstk-doritos { left: 57%; height: 78%; bottom: 10%; transform: rotate(8deg); }
.bstk-dew { left: 66%; height: 94%; bottom: -6%; transform: rotate(-12deg); }
@media (min-width: 900px) { .band > .band-stks { display: block; } }
@media (min-width: 900px) and (max-width: 1279px) { .bstk-mlg { display: none; } .bstk-doritos { left: 52%; } .bstk-dew { left: 62%; } }
@media (min-width: 900px) { .band-lines { font-size: clamp(16px, 2.2vh, 21px); } }

/* ---------- nav row ---------- */
.topbar {
  display: grid; align-items: center; position: relative; z-index: 5; margin-top: 8px;
  grid-template-columns: 1fr auto; grid-template-areas: "who sys" "tabs tabs"; row-gap: 8px;
}
.who { grid-area: who; position: relative; min-width: 0; }
.who-btn { max-width: 100%; height: 30px; padding: 0 12px; }
.who-btn svg { width: 16px; height: 16px; }
.who-btn span { overflow: hidden; text-overflow: ellipsis; }
.sys { grid-area: sys; display: flex; align-items: center; gap: 4px; position: relative; }
.clock { margin-left: 4px; min-width: 52px; height: 28px; line-height: 26px; padding: 0 6px; text-align: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  background: var(--sunken); border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
#soundBtn .snd-off { display: none; }
#soundBtn.is-off .snd-on { display: none; }
#soundBtn.is-off .snd-off { display: block; }
#soundBtn[aria-pressed="true"] { background: var(--lime); color: var(--lime-ink); box-shadow: inset 1px 1px 0 #e4ff8a, inset -1px -1px 0 var(--lime-lo); }
.tabs { grid-area: tabs; display: flex; gap: 0; padding: 2px; background: var(--sunken); border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; padding: 5px 12px; font-size: 12px; color: var(--ink); white-space: nowrap;
  background: linear-gradient(#202b20, #161e16); border: 1px solid var(--dark); box-shadow: inset 1px 1px 0 #34453a;
}
.tab + .tab { margin-left: 2px; }
.tab:hover { background: var(--hover); }
.tab.is-active { color: var(--lime-ink); background: var(--lime); font-weight: bold; box-shadow: inset 1px 1px 0 #e4ff8a, inset -1px -1px 0 var(--lime-lo); }
.search { position: absolute; right: 100%; top: 0; margin-right: 4px; width: min(230px, 50vw); display: none; }
.search.open { display: block; }
.search .field { width: 100%; height: 28px; }

.pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  width: min(300px, calc(100vw - 24px)); padding: 10px; display: grid; gap: 6px;
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 #0a0e0a, 2px 2px 0 #000;
}
.pop-left { left: 0; right: auto; }
.pop-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pop-v { word-break: break-all; }
.pop-note { font-size: 11px; color: var(--muted); }
.pop-item { justify-content: flex-start; width: 100%; }
.pop-item.confirm { color: #ffe7c2; background: linear-gradient(#6d3a22, #4c2615); }
.nick-form { display: flex; gap: 4px; }
.nick-form .field { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.check input { accent-color: var(--lime); margin: 0; }
.about { display: grid; gap: 6px; font-size: 11px; color: var(--muted); line-height: 1.45; }
.about b { color: var(--ink); }

/* ---------- views ---------- */
.views { position: relative; flex: 1; display: flex; flex-direction: column; }
.view { position: relative; display: flex; flex-direction: column; flex: 1; }
.hero-bg {
  position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 0; height: 100%;
  width: calc(100% + 2 * var(--gutter)); object-fit: cover; object-position: 50% 30%;
  opacity: .18; image-rendering: pixelated; pointer-events: none; z-index: 0;
  transition: opacity .18s linear;
}
.hero-bg.swap { opacity: 0; }
/* the scanline photo crop from mockup 2 laid over the tile background */
.hero-scan {
  position: absolute; left: calc(-1 * var(--gutter)); top: 0; height: 100%;
  width: calc(100% + 2 * var(--gutter)); object-fit: cover; opacity: .32; mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.view-games > :not(.hero-bg):not(.hero-scan) { position: relative; z-index: 1; }

/* category chips */
.chips { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.chip {
  padding: 3px 11px; font-size: 11px; color: var(--ink);
  background: linear-gradient(#202b20, #161e16); border: 1px solid var(--dark); box-shadow: inset 1px 1px 0 #34453a;
}
.chip:hover { background: var(--hover); }
.chip.is-on { color: var(--lime); background: var(--sunken); border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--dark); font-weight: bold; }

/* ---------- tile row ---------- */
.row-band {
  height: calc((var(--tile-w) * .75 + var(--label-h)) * var(--sel-mul) + 14px);
  margin: 6px calc(-1 * var(--gutter)) 0;
  position: relative; overflow: hidden;
}
/* the rainbow light-leak strips from mockup 1, on the far left and right of the tile band */
.row-band::before, .row-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14px; z-index: 2; pointer-events: none;
  background: url("assets/skin/rainbow-edge.webp") center / 100% 100% no-repeat; mix-blend-mode: screen; opacity: .75;
}
.row-band::before { left: 0; }
.row-band::after { right: 0; transform: scaleX(-1); }
.row { position: absolute; inset: 0; outline: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.row.dragging { cursor: grabbing; }
.tile {
  position: absolute; left: 0; top: 0;
  width: calc(var(--tile-w) * var(--sel-mul));
  height: calc((var(--tile-w) * .75 + var(--label-h)) * var(--sel-mul));
  transform-origin: 0 0; will-change: transform, opacity;
  display: flex; flex-direction: column;
  background: var(--sunken); border: 1px solid #000;
  box-shadow: 1px 1px 0 #000, inset 0 0 0 1px #2c3a2c;
}
.tile img {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; flex: none;
  background: var(--sunken); -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.tile-label {
  flex: 1; display: flex; align-items: center; gap: 4px; padding: 0 6px; min-width: 0;
  background: var(--panel-2); border-top: 1px solid var(--light);
  font-size: calc(11px * var(--sel-mul)); font-weight: bold; color: var(--ink);
}
.tile-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tile-label em { font-style: normal; font-weight: normal; font-size: calc(9px * var(--sel-mul)); color: var(--muted); border: 1px solid var(--light); padding: 0 3px; }
.tile-tag {
  position: absolute; right: 4px; top: 4px; padding: 2px 3px 1px; font: calc(6px * var(--sel-mul))/1 var(--pix); letter-spacing: .04em;
  color: var(--lime-ink); background: var(--lime); border: 1px solid #000; pointer-events: none;
}
.tile .ring {
  position: absolute; inset: -4px; pointer-events: none; opacity: 0;
  border: 2px solid var(--lime); box-shadow: inset 0 0 0 1px var(--dark), 0 0 0 1px rgba(189, 242, 49, .35);
}
.tile.noart img { display: none; }
.tile.noart::before { content: attr(aria-label); flex: 1; display: grid; place-items: center; padding: 8px; text-align: center; color: var(--muted); }

/* ---------- hero ---------- */
.hero { margin-top: 6px; position: relative; }
.line { will-change: opacity; }
.wordmark {
  height: max(calc(var(--wm-max) * 1.08), calc(var(--wm-min) * 2.1));
  display: flex; align-items: flex-end; overflow: hidden;
  font-family: var(--wm); font-weight: normal; text-transform: uppercase; letter-spacing: 0; line-height: 1.08;
  font-size: var(--wm-max); color: var(--ink); text-shadow: 2px 2px 0 #000;
}
.wordmark span { display: block; white-space: nowrap; overflow: hidden; padding-right: 3px; padding-bottom: 2px; }
/* the crown crop from mockup 1 at the wordmark's top-right */
.wordmark span::after {
  content: ""; display: inline-block; width: .62em; height: .56em; margin-left: .08em; vertical-align: .55em;
  background: url("assets/skin/crown.webp") center / contain no-repeat; transform: rotate(12deg);
}
.wordmark.wrap span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wordmark.wrap span::after { display: none; }
.caption {
  margin-top: 4px; height: 1.5em; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caption .host { color: var(--lime); letter-spacing: .04em; text-transform: none; text-decoration: underline; text-underline-offset: 2px; }
.note { margin-top: 2px; min-height: 2.9em; font-size: 12px; color: var(--ink); line-height: 1.4; }
.note .tag { display: inline-block; margin-right: 6px; padding: 1px 4px; font: 8px/1.2 var(--pix); letter-spacing: .04em; text-transform: uppercase; color: var(--bg); background: var(--muted); vertical-align: 1px; }
.note .tag.warn { background: #e0a85a; }
.play-row { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }
.btn-play {
  min-height: 34px; min-width: 128px; padding: 0 24px; font-size: 16px; letter-spacing: .04em;
  color: var(--lime-ink); background: var(--lime); border-color: #000; box-shadow: inset 1px 1px 0 #e4ff8a, inset -1px -1px 0 var(--lime-lo), 1px 1px 0 #000;
}
.btn-play:hover { background: #ccff52; }
.btn-play:active { background: var(--lime-lo); box-shadow: inset 1px 1px 0 #5f8010, inset -1px -1px 0 #d6ff7a; }
.btn-play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
#popBtn { height: 34px; width: 36px; }
#frameBtn { height: 34px; padding: 0 10px; white-space: nowrap; }
.stats { font-size: 12px; color: var(--muted); }
.stats b { font-weight: normal; margin: 0 5px; color: var(--disabled); }
.stats strong { color: var(--ink); }
.hint {
  position: absolute; left: 0; bottom: -20px; font-size: 11px; color: var(--lime);
  opacity: 0; transition: opacity .18s linear;
}
.hint.show { opacity: 1; }

/* stickers: crops from the mockups, beside the hero text (never over it); hidden on narrow screens */
.stickers { display: none; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); column-gap: 16px; }
  .hero > * { grid-column: 1; }
  .hero > .stickers {
    grid-column: 2; grid-row: 1 / span 4; position: relative; min-width: 0;
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 18px; pointer-events: none; padding-right: 6px;
  }
  .stk { position: relative; display: block; flex: none; opacity: .92; }
  .stk img { display: block; height: auto; }
  .stk-doge { width: 150px; height: 100px; transform: rotate(-3deg); }
  .stk-doge img:first-child { position: absolute; left: 0; bottom: 0; width: 92px; }
  .stk-doge .stk-txt { position: absolute; right: 0; top: 2px; width: 72px; transform: rotate(-6deg); }
  .stk-pixel { width: 170px; height: 112px; }
  .stk-pixel .stk-px { position: absolute; left: 0; bottom: 18px; width: 108px; image-rendering: pixelated; transform: rotate(-2deg); }
  .stk-pixel .stk-txt { position: absolute; right: 0; top: 0; width: 64px; transform: rotate(-4deg); }
  .stk-pixel .stk-lag { position: absolute; left: 28px; bottom: 0; width: 88px; opacity: .85; }
  .stk-cs { display: none; width: 220px; }
  .stk-cs img { width: 220px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); opacity: .85; }
}
@media (min-width: 900px) and (max-width: 1099px) { .stk-pixel { display: none; } }
@media (min-width: 1440px) { .stk-cs { display: block; } }

/* ---------- cards ---------- */
.cards { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.card { min-width: 0; display: flex; flex-direction: column; border-color: #000; box-shadow: inset 1px 1px 0 #2f3f2f, inset -1px -1px 0 #0a0e0a, 0 0 0 1px #2a3a2a; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 8px;
  background: linear-gradient(#1f2b1f, #162016); border-bottom: 1px solid #000;
}
.card-head h2, .panel-head h2 { font: 9px/1.2 var(--pix); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); text-shadow: 1px 1px 0 #000; }
.card-body { padding: 6px; min-height: 84px; }
.empty-note { color: var(--muted); font-size: 12px; padding: 4px 2px; }
.recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: start; }
.recent .empty-note { grid-column: 1 / -1; }
.rc { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.rc img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #000; display: block; }
.rc span { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc span:nth-of-type(1) { color: var(--ink); }
.rc.live span:nth-of-type(2) { color: var(--lime); }
.mini { width: 100%; border-collapse: collapse; font-size: 11px; }
.mini td { padding: 3px 5px; white-space: nowrap; }
.mini tr:nth-child(odd) td { background: var(--panel-alt); }
.mini td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini td.nm { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nc { display: grid; gap: 6px; }
.nc-row { display: grid; gap: 2px; }
.nc-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.nc-top b { color: var(--ink); }
.nc-top span { color: var(--muted); white-space: nowrap; }

/* progress bar: sunken trough, bevelled lime fill */
.bar { position: relative; height: 12px; }
.bar i {
  position: absolute; left: 1px; top: 1px; bottom: 1px; display: block; max-width: calc(100% - 2px);
  background: linear-gradient(#cdf55a, var(--lime-lo)); box-shadow: inset 1px 1px 0 #e4ff8a, inset -1px -1px 0 #5f8010;
}
.bar u { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; line-height: 1; text-decoration: none; color: var(--ink); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.bar.big { height: 16px; }
.bar.big u { font-size: 10px; }

/* ---------- pages (leaderboard / challenges / rewards) ---------- */
.view-page { padding-top: 10px; }
.panel { padding: 0 0 8px; min-width: 0; }
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 8px; min-height: 30px;
  background: linear-gradient(#1f2b1f, #162016); border-bottom: 1px solid #000;
}
.panel-head h2 { font-size: 10px; }
.panel-sub { font-size: 11px; color: var(--muted); margin-left: auto; }
.panel-note { padding: 6px 8px 0; font-size: 11px; color: var(--muted); }
.panel-line { padding: 6px 8px 0; font-size: 12px; }
.panel-grid { display: grid; gap: 8px; }
.seg { display: inline-flex; gap: 0; }
.seg-opt { border-radius: 0; font-weight: normal; padding: 2px 9px; }
.seg-opt.is-on { font-weight: bold; color: var(--lime-ink); background: var(--lime); box-shadow: inset 1px 1px 0 #e4ff8a, inset -1px -1px 0 var(--lime-lo); }
#lbGame { max-width: 100%; }
.table-wrap { margin: 8px 8px 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th { padding: 0; background: var(--panel); text-align: left; }
.table th.num, .table td.num { text-align: right; }
.th {
  width: 100%; padding: 4px 6px; text-align: inherit; font-weight: bold; font-size: 11px;
  background: linear-gradient(#263326, #182118); color: var(--ink);
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #3a4d3a, inset -1px -1px 0 #0c110c;
}
.th[data-dir]::after { content: attr(data-dir); margin-left: 4px; color: var(--lime); }
.table td { padding: 3px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tbody tr:nth-child(odd) td { background: var(--panel); }
.table tbody tr:nth-child(even) td { background: var(--panel-alt); }
.table tbody tr.me td { background: #22301a; color: var(--lime); font-weight: bold; }
.table tbody tr.gap td { background: var(--sunken); color: var(--disabled); text-align: center; padding: 1px; }
.table td.w { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.empty { margin: 10px 8px 2px; padding: 14px 10px; text-align: center; color: var(--muted); }
.tier-chip {
  display: inline-block; padding: 0 5px; line-height: 14px; font-size: 10px; font-weight: bold; letter-spacing: .04em;
  color: var(--ink); background: #22301a; border: 1px solid #000; box-shadow: inset 1px 1px 0 #3a4d3a; border-radius: 2px;
}

.chal-group { margin: 8px 8px 0; }
.chal-group h3 { margin: 0 0 4px; font: 9px/1.4 var(--pix); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); display: flex; justify-content: space-between; }
.chal-group h3 span { font: 11px var(--ui); color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: normal; }
.chal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 5px 6px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--light); }
.chal:nth-child(even) { background: var(--panel-alt); }
.chal b { color: var(--ink); }
.chal .pts { color: var(--lime); font-weight: bold; white-space: nowrap; }
.chal .desc { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.chal .bar { grid-column: 1 / -1; margin-top: 2px; }
.chal .ok { grid-column: 1 / -1; color: var(--lime); font-size: 11px; }
.chal.done b { color: var(--lime); }

.kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 8px 0; }
.kv { padding: 6px; text-align: center; }
.kv p { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kv strong { display: block; margin-top: 4px; font: 20px/1.1 var(--wm); color: var(--ink); text-shadow: 2px 2px 0 #000; }
.tier-box { padding: 8px 8px 0; display: grid; gap: 4px; }
.tier-box .tb-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.tier-box .tb-top span:not(.tier-chip) { color: var(--muted); }
.pool { padding: 8px; display: grid; gap: 6px; }
.pool-big { font: 14px/1.5 var(--wm); color: var(--ink); text-shadow: 2px 2px 0 #000; }
.pool p { color: var(--muted); }
.pool .pool-big { color: var(--ink); }
.rules { margin: 8px 8px 0; width: calc(100% - 16px); }
.rules td:first-child { color: var(--muted); white-space: normal; }
.rules td:last-child { text-align: right; color: var(--ink); white-space: normal; }
.done-list { padding: 4px 8px 0; display: grid; }
.done-list div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 4px; font-size: 12px; border-bottom: 1px solid #000; }
.done-list span { color: var(--muted); white-space: nowrap; }

.foot { flex: none; margin-top: 10px; font-size: 10px; color: var(--disabled); text-align: center; }
.foot a { color: var(--muted); }

/* ---------- XP-style taskbar (replaces the status bar; same ids inside) ---------- */
.statusbar {
  flex: none; height: calc(30px + var(--safe-b)); padding: 0 2px var(--safe-b) 0;
  display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap;
  background: linear-gradient(var(--silver-hi), var(--silver) 30%, #a3a49d); border-top: 1px solid #fff; box-shadow: 0 -1px 0 #000;
  font-size: 11px; color: var(--silver-ink);
}
.tk-start {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; margin-left: 2px; padding: 0 9px 0 6px;
  font-weight: bold; font-size: 12px; color: var(--silver-ink);
  border: 1px solid; border-color: #fff #3b3c38 #3b3c38 #fff; box-shadow: inset -1px -1px 0 var(--silver-lo);
}
.tk-start svg { width: 13px; height: 13px; fill: #3c7a12; stroke: #1d3d06; stroke-width: 1.5; stroke-linejoin: round; }
.tk-start:active, .tk-start[aria-expanded="true"] { border-color: #3b3c38 #fff #fff #3b3c38; box-shadow: inset 1px 1px 0 var(--silver-lo); background: #c9cac3; }
.tk-task {
  display: none; flex: none; align-items: center; height: 24px; padding: 0 10px; font-weight: bold; color: var(--silver-ink); min-width: 140px; text-align: left;
  background: #d2d3cc; border: 1px solid; border-color: #3b3c38 #fff #fff #3b3c38; box-shadow: inset 1px 1px 0 var(--silver-lo);
}
.tk-line { display: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; color: #2b2d27; }
.tk-tray {
  margin-left: auto; flex: none; min-width: 0; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px;
  border: 1px solid; border-color: var(--silver-lo) #fff #fff var(--silver-lo); background: #b0b1aa;
}
.tray { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.statusbar b { font-weight: normal; color: #5b5d56; }
.statusbar #sbApi.up { color: #1d4a06; font-weight: bold; }
.statusbar .tier-chip { color: var(--silver-ink); background: #d9dad3; box-shadow: inset 1px 1px 0 #fff; border-color: #55574f; }
.tk-players { color: #1d4a06; font-weight: bold; }
.tk-clock { font-variant-numeric: tabular-nums; }
#sbVer, #sbToday { display: none; }
.tray > b:first-of-type { display: none; }
.tray > b:nth-of-type(2) { display: none; }
@media (min-width: 900px) {
  #sbVer, #sbToday { display: inline; }
  .tray > b:first-of-type, .tray > b:nth-of-type(2) { display: inline; }
  .tk-task { display: inline-flex; }
}
@media (min-width: 1180px) { .tk-line { display: block; } }

/* ---------- player (phone: full screen; desktop: inside the window, under the address bar) ---------- */
.player {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--sunken);
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
@media (min-width: 900px) {
  .player { top: var(--pl-top, 0); left: var(--pl-left, 0); right: var(--pl-right, 0); bottom: var(--pl-bottom, 0); padding: 0; border-left: 1px solid #000; border-right: 1px solid #000; }
}
.pl-bar { height: 30px; gap: 8px; font-weight: normal; padding: 0 3px 0 8px; }
.pl-name { font: 10px/1.2 var(--pix); color: var(--lime); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-transform: uppercase; }
.pl-host { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-time { font: 20px/1 var(--term); color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-min { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pl-start { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 2px 8px; font-size: 12px; color: var(--lime-ink);
  background: var(--lime); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 #e4ff8a; }
.pl-start-k { font: 8px/1.2 var(--pix); text-transform: uppercase; letter-spacing: .06em; color: var(--lime-ink); padding: 3px 5px; background: var(--lime-ink); color: var(--lime); }
.pl-start-x { margin-left: auto; width: 20px; height: 20px; line-height: 18px; text-align: center; color: var(--lime-ink); border: 1px solid #000; background: #d6ff7a; font-size: 13px; }
.pl-start-x:hover { background: #fff; }
.pl-sp { flex: 1; }
.pl-btn { min-height: 22px; padding: 1px 7px; font-size: 11px; }
.pl-stage { position: relative; flex: 1; min-height: 0; background: #000; }
.pl-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.pl-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: min(420px, calc(100% - 24px)); padding: 0 0 12px; display: grid; gap: 8px;
  background: var(--panel); border: 1px solid #000; box-shadow: inset 1px 1px 0 var(--light), 2px 2px 0 #000;
}
.pl-msg .titlebar { margin-bottom: 2px; }
.pl-msg p { padding: 0 12px; font-size: 12px; }
.pl-msg p.mute { color: var(--muted); font-size: 11px; }
.pl-msg .acts { padding: 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-msg .acts .btn:first-child { color: var(--lime-ink); background: var(--lime); box-shadow: inset 1px 1px 0 #e4ff8a, inset -1px -1px 0 var(--lime-lo); }
.pl-msg.corner { left: auto; right: 10px; top: auto; bottom: 10px; transform: none; width: min(320px, calc(100% - 20px)); }
@media (max-width: 899px) {
  .pl-lbl { display: none; }
  .pl-host { display: none; }
}

/* ---------- dialogs: connect sheet + help ---------- */
.sheet-back, .dlg-back { position: fixed; inset: 0; z-index: 70; background: rgba(3, 5, 3, .72); display: flex; align-items: flex-end; justify-content: center; }
.sheet, .dlg { width: 100%; max-height: 88svh; overflow-y: auto; padding-bottom: var(--safe-b); box-shadow: inset 1px 1px 0 var(--light), 2px 2px 0 #000; }
.sheet-head, .dlg .titlebar { position: sticky; top: 0; z-index: 1; }
.sheet-head span { flex: 1; }
.sheet-x { width: 18px; height: 16px; }
.sheet-body { padding: 10px 12px 14px; display: grid; gap: 10px; }
.sheet-sub { color: var(--muted); line-height: 1.5; }
.sheet-list { display: grid; gap: 4px; }
.wallet-opt { justify-content: flex-start; width: 100%; min-height: 38px; padding: 4px 8px; gap: 8px; font-size: 13px; }
.wallet-opt img, .wallet-opt .wi { width: 24px; height: 24px; flex: none; }
.wallet-opt .wi { display: grid; place-items: center; background: var(--sunken); color: var(--lime); }
.wallet-opt em { margin-left: auto; font-style: normal; font-weight: normal; font-size: 11px; color: var(--muted); }
.sheet-msg { margin: 0; padding: 8px; font: 11px/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; word-break: break-all; background: var(--sunken); border: 1px solid; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.sheet-status { min-height: 1.4em; color: var(--ink); }
.sheet-status.err { color: #f0b07a; }
.dlg-body { padding: 10px 12px 14px; display: grid; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.dlg-body b { color: var(--ink); }
.dlg-lead { font-size: 13px; color: var(--ink); }
.dlg-lead b { color: var(--lime); }
.dlg-h { margin: 6px 0 0; font: 9px/1.2 var(--pix); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.dlg-hosts td, .dlg-keys td { white-space: normal; }
.dlg-hosts td:first-child, .dlg-keys td.k { color: var(--ink); white-space: nowrap; }
.dlg-note { font-size: 11px; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .topbar { grid-template-columns: auto 1fr auto; grid-template-areas: "who tabs sys"; column-gap: 14px; margin-top: 8px; }
  .tabs { justify-self: start; }
  .tab { flex: 0 0 auto; padding: 5px 18px; }
  .chips { margin-top: 8px; }
  .row-band { margin-top: 6px; }
  .hero { margin-top: 2px; }
  .caption { font-size: 12px; margin-top: 4px; }
  .note { font-size: 12px; min-height: 1.6em; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .card-body { min-height: 84px; }
  .view-page { padding-top: 12px; }
  .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sheet-back, .dlg-back { align-items: center; }
  .sheet { width: min(420px, calc(100vw - 48px)); }
  .dlg { width: min(560px, calc(100vw - 48px)); max-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hint { transition: none !important; }
}