/* ============================================================
   OBBYCRAFT  ·  a k10k homage
   ------------------------------------------------------------
   Dark olive-charcoal palette, dense bordered "lunchbox" grid,
   tiny pixel display fonts + period Verdana body, multi-accent
   colour coding. Built light, in the spirit of Kaliber10000.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:        #181a16;   /* near-black olive charcoal */
  --bg2:       #1f221b;   /* page panel behind columns  */
  --ink:       #0e100c;   /* darkest, hard shadows      */
  --panel:     #262a21;   /* box background             */
  --panel-hi:  #2f3429;   /* title bar / hover          */
  --line:      #3c4234;   /* hairline borders           */
  --line-soft: #2c3026;
  --text:      #cfd2c4;   /* main text                  */
  --text-dim:  #8d9380;   /* muted                      */
  --text-faint:#646a55;   /* metadata                   */
  --white:     #eef0e6;

  /* accents — k10k multi-accent system × minecraft blocks */
  --orange: #ff7a18;
  --green:  #8ec63f;
  --cyan:   #3fc7c0;
  --pink:   #ef5a9c;
  --yellow: #ffcf3f;
  --red:    #e8503a;

  --pixel: 'Press Start 2P', 'Silkscreen', monospace;
  --bit:   'Silkscreen', 'Courier New', monospace;
  --body:  'Trebuchet MS', 'Fira Sans', 'Segoe UI', Tahoma, Verdana, sans-serif;   /* Windows-XP UI font (real Trebuchet MS where available, self-hosted fallback) */

  --shadow: 3px 3px 0 var(--ink);
  /* Windows-95 3D bevel edges, tuned for the dark palette */
  --w-light: #4c5341;   /* raised highlight edge (top-left) */
  --w-dark:  #090b07;   /* raised shadow edge (bottom-right) */
  --maxw: 940px;
}

/* Headings/labels/nav stay pixel (--bit/--pixel); body, inputs, hero and
   long-form copy use the Windows-95 UI font (--body). */

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:
    /* simple colorless pixel texture (crisp 1px dots on a grid) */
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 9px 9px,
    radial-gradient(rgba(0,0,0,.22) 1px, transparent 1px) 4px 4px / 18px 18px,
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 2px),
    radial-gradient(1200px 600px at 50% -10%, #23271f 0%, var(--bg) 60%);
  color:var(--text);
  font-family:var(--body);
  font-size:11px;
  line-height:1.55;
  image-rendering:pixelated;
}
img,svg{ image-rendering:pixelated }
a{ color:var(--cyan); text-decoration:none }
a:hover{ color:var(--white); text-decoration:underline; text-decoration-style:dotted }
code{ font-family:var(--bit); font-size:10px; color:var(--green); background:var(--ink); padding:1px 4px; border:1px solid var(--line-soft) }
b{ color:var(--white) }
h1,h2,h3{ margin:0; font-weight:400 }
p{ margin:.4em 0 }
::selection{ background:var(--orange); color:var(--ink) }

/* faint CRT/scanline overlay */
.crt{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.5;
}

/* ---------- shell ---------- */
.wrap{
  max-width:var(--maxw);
  margin:14px auto;
  background:var(--bg2);
  /* big container follows the Win95 box design: raised bevel (light top-left, dark bottom-right) */
  border:2px solid;
  border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow:0 0 0 4px var(--ink), 0 0 40px rgba(0,0,0,.6);
  padding:0;
}

/* ============================ MASTHEAD ============================ */
.masthead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  padding:12px 16px;
  background:
    linear-gradient(180deg, #23281f, #1b1e17);
  border-bottom:1px solid var(--line);
}
/* right column: slime in the top-right corner, status/IP/language stacked under it,
   so a long (translated) subtitle on the left can't shove the controls around */
.masthead-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto }
.logo{ display:flex; align-items:center; gap:12px; color:inherit; flex:1 1 auto; min-width:0 }
.logo:hover{ text-decoration:none }
.logo-mark{
  display:block; border:2px solid var(--ink);
  box-shadow:var(--shadow);
}
.logo-type{ display:flex; flex-direction:column; gap:6px }
.logo-word{
  font-family:var(--pixel); font-size:24px; color:var(--white); line-height:1;
  text-shadow:2px 2px 0 var(--ink), 4px 4px 0 rgba(142,198,63,.25);
  letter-spacing:1px;
}
.logo-sub{ font-family:var(--bit); font-size:9px; color:var(--green); letter-spacing:.5px }

.masthead-status{ display:flex; align-items:center; justify-content:flex-end; gap:9px 12px; flex-wrap:wrap; flex:0 0 auto }
.statline{ font-family:var(--bit); font-size:9px; color:var(--text-dim); display:flex; align-items:center; gap:6px; text-transform:uppercase }
.dot{ width:8px; height:8px; background:var(--green); display:inline-block; box-shadow:0 0 6px var(--green); animation:blink 1.6s steps(2) infinite }
.dot.off{ background:var(--red); box-shadow:0 0 6px var(--red); animation:none }
.dot-sm{ width:7px; height:7px }
@keyframes blink{ 50%{ opacity:.35 } }

.statbig{ font-family:var(--pixel); font-size:16px; color:var(--white); line-height:1; display:flex; align-items:baseline; gap:2px }
.players-sep{ color:var(--text-faint) }
.players-max{ color:var(--text-dim) }
.statbig-label{ font-family:var(--bit); font-size:9px; color:var(--text-dim); margin-left:4px; text-transform:uppercase }

.ip-pill{ display:flex; align-items:center; gap:6px; background:var(--ink); border:1px solid var(--line); padding:5px 6px }
.ip-label{ font-family:var(--bit); font-size:8px; color:var(--text-faint); text-transform:uppercase }
.ip-addr{ background:none; border:none; color:var(--green); padding:0 2px }

/* ============================ NAV ============================ */
.mainnav{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  padding:7px 10px; background:var(--ink);
  /* top & bottom edges are matching engraved pixel-rules (see the <hr> around the nav) */
}
.mainnav a{
  font-family:var(--bit); font-size:9px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-dim); padding:6px 10px;
  display:inline-flex; align-items:center; gap:5px;
  /* each option is a raised Win95 button (light top-left, dark bottom-right) */
  background:var(--panel);
  border:2px solid; border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
}
.nav-ico{ width:16px; height:16px; image-rendering:pixelated; flex:none; opacity:.75; transition:opacity .1s }
.mainnav a:hover .nav-ico, .mainnav a.active .nav-ico{ opacity:1 }
.mainnav a:hover{ color:var(--white); text-decoration:none; background:var(--panel-hi) }
/* pressed / current tab → sunken bevel (button pushed in) */
.mainnav a:active{ border-color:var(--w-dark) var(--w-light) var(--w-light) var(--w-dark) }
.mainnav a.active{
  color:var(--green); background:var(--panel-hi);
  border-color:var(--w-dark) var(--w-light) var(--w-light) var(--w-dark);
}
.nav-spacer{ flex:1; border:0; background:none }
.nav-cta{ color:var(--cyan)!important }
.nav-cta:hover{ background:var(--panel-hi)!important; color:var(--white)!important }

/* ============================ COLUMNS ============================ */
.columns{
  display:grid;
  grid-template-columns:200px 1fr 220px;
  gap:0;
  align-items:start;
}
.col{ padding:12px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.col-left{ border-right:1px solid var(--line-soft) }
.col-right{ border-left:1px solid var(--line-soft) }
.col-main{ background:rgba(0,0,0,.12) }

/* ============================ BOX MODULE ============================ */
.box{
  /* raised Win95 panel: light top-left edge, dark bottom-right edge */
  border:2px solid;
  border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  background:var(--panel);
  box-shadow:var(--shadow);
  position:relative;
}
.box-title{
  font-family:var(--bit); font-size:9px; text-transform:uppercase; letter-spacing:1px;
  color:var(--white);
  background:var(--panel-hi);
  border-bottom:2px solid var(--w-dark);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.10);   /* raised title-bar highlight */
  padding:5px 8px;
  display:flex; align-items:center; justify-content:space-between;
  position:relative;
}
.box-title::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--text-dim) }
.title-link{ font-size:8px; color:var(--text-dim) }
.box-body{ padding:9px 10px }
.box-body.center{ text-align:center }
.box-body > p:first-child{ margin-top:0 }
.box-body > p:last-child{ margin-bottom:0 }

/* accent colouring per box */
.acc-orange .box-title::before{ background:var(--orange) }
.acc-green  .box-title::before{ background:var(--green) }
.acc-cyan   .box-title::before{ background:var(--cyan) }
.acc-pink   .box-title::before{ background:var(--pink) }
.acc-yellow .box-title::before{ background:var(--yellow) }
.acc-red    .box-title::before{ background:var(--red) }
.acc-orange .box-title{ color:var(--orange) }
.acc-green  .box-title{ color:var(--green) }
.acc-cyan   .box-title{ color:var(--cyan) }
.acc-pink   .box-title{ color:var(--pink) }
.acc-yellow .box-title{ color:var(--yellow) }
.acc-red    .box-title{ color:var(--red) }

/* Win95 raised bevel on the inner cards/tiles so everything matches the panels.
   (Inset areas — inputs, chat log — keep their sunken bevel.) */
.mode, .feature, .shop-item, .thread-row, .wiki-item, .crate-card, .admin-user, .daily-card, .reply{
  border:2px solid;
  border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
}

/* ---------- helpers ---------- */
.muted{ color:var(--text-dim) }
.tiny{ font-size:10px }
.center{ text-align:center }

/* ---------- pixel buttons ---------- */
.pixbtn{
  display:inline-block; cursor:pointer;
  font-family:var(--bit); font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink); background:var(--green);
  border:2px solid var(--ink); padding:7px 12px; margin-top:6px;
  /* raised Win95 button bevel (highlight top-left, shadow bottom-right) */
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.42), inset -2px -2px 0 rgba(0,0,0,.34);
  text-align:center;
}
.pixbtn:hover{ text-decoration:none; color:var(--ink); filter:brightness(1.08) }
.pixbtn:active{ box-shadow:inset 2px 2px 0 rgba(0,0,0,.34), inset -2px -2px 0 rgba(255,255,255,.26) }   /* pressed → sunken */
.pixbtn-green{ background:var(--green) }
.pixbtn-cyan{ background:var(--cyan) }
.pixbtn-pink{ background:var(--pink); color:var(--ink) }
.pixbtn-yellow{ background:var(--yellow) }
.pixbtn-red{ background:var(--red); color:var(--white) }
.pixbtn-ghost{ background:transparent; color:var(--text); border-color:var(--line) }
.pixbtn-ghost:hover{ color:var(--white); border-color:var(--text-dim) }
.pixbtn-lg{ font-size:11px; padding:10px 14px }
.pixbtn[hidden]{ display:none }   /* the [hidden] attr must win over .pixbtn's display:inline-block */

/* small copy button in masthead */
.copy-btn{
  cursor:pointer; font-family:var(--bit); font-size:8px; text-transform:uppercase;
  color:var(--ink); background:var(--green); border:2px solid var(--ink); padding:3px 6px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.42), inset -2px -2px 0 rgba(0,0,0,.34);   /* raised, like .pixbtn */
}
.copy-btn:hover{ filter:brightness(1.1) }
.copy-btn:active{ box-shadow:inset 2px 2px 0 rgba(0,0,0,.34), inset -2px -2px 0 rgba(255,255,255,.26) }
.copy-btn.copied{ background:var(--cyan) }

/* ============================ HERO ============================ */
/* hero is a normal raised panel like every other box — only the cover art is themed */
.hero{
  border:2px solid; border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  background:var(--panel);
  box-shadow:var(--shadow); overflow:hidden;
}
.hero-art{ position:relative; border-bottom:2px solid var(--w-dark); background:#181820; line-height:0 }
.hero-art svg{ display:block; width:100%; height:auto }
/* hero mini-game canvas (pixel cave runner) */
.dino-canvas{ display:block; width:100%; height:auto; image-rendering:pixelated; cursor:pointer; touch-action:manipulation; outline:none }
.dino-canvas:focus-visible{ outline:2px solid var(--green); outline-offset:-2px }
/* OBBYRUN start / game-over cards — themed overlay with the blue play / restart button + score submission / sign-up prompt */
.dino-over{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:10px; line-height:normal; background:rgba(8,10,8,.72) }
.dino-over[hidden]{ display:none }
.dino-over-card{
  position:relative;
  text-align:center; max-width:86%; padding:8px 12px;
  background:var(--panel); border:2px solid;
  border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);
  box-shadow:var(--shadow);
}
/* close (X) button — top-right; dismissing the card counts as declining to submit */
.dino-over-x{
  position:absolute; top:3px; right:3px; width:18px; height:18px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--bit); font-size:10px; line-height:1; cursor:pointer; color:var(--white);
  background:var(--line); border:2px solid var(--ink);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.25), inset -1px -1px 0 rgba(0,0,0,.4);
}
.dino-over-x:hover{ filter:brightness(1.15); color:var(--white) }
.dino-over-x:active{ box-shadow:inset 1px 1px 0 rgba(0,0,0,.4), inset -1px -1px 0 rgba(255,255,255,.2) }
.dino-over-x:focus-visible{ outline:2px solid var(--cyan); outline-offset:1px }
.dino-over-title{ font-family:var(--pixel); font-size:15px; color:var(--cyan); text-shadow:2px 2px 0 var(--ink); margin:0 0 5px }
.dino-over-score{ font-family:var(--bit); font-size:10px; color:var(--text); margin:0 0 4px }
.dino-over-score b{ color:var(--white) }
.dino-over-msg{ font-family:var(--bit); font-size:8px; line-height:1.5; color:var(--text-dim); margin:0 auto 7px; max-width:34ch; min-height:1.1em }
.dino-over-actions{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap }
.dino-over-actions .pixbtn{ margin-top:0 }
/* start screen: title, then a small controls tutorial, then the play button — over the (lightly dimmed) cover art */
#dino-ready{ background:rgba(8,10,8,.5); flex-direction:column; gap:8px }
.dino-ready-title{ font-family:var(--pixel); font-size:18px; letter-spacing:1px; color:var(--cyan); text-shadow:2px 2px 0 var(--ink); margin:0 }
#dino-play{ margin:0; font-size:13px; padding:11px 22px }
.dino-controls{ display:flex; flex-direction:column; gap:3px; text-align:center; font-family:var(--bit); font-size:9px; line-height:1.4; color:var(--text-dim); text-shadow:1px 1px 0 var(--ink) }
.dino-controls b{ color:var(--cyan); font-weight:normal }

/* lofi radio player — a little retro "tape deck" control bar */
.music-controls{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 8px; margin:2px 0 9px;
  background:rgba(0,0,0,.22); border:2px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5), inset -2px -2px 0 rgba(255,255,255,.06);   /* recessed tray */
}
.music-btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  /* equal squares that share the bar width and stay square (aspect-ratio) so all
     five are identical regardless of the column width */
  flex:1 1 0; min-width:0; aspect-ratio:1; max-width:40px; padding:0; color:var(--white);
  background:var(--line); border:2px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(0,0,0,.40);   /* raised key */
}
.music-btn svg{ width:60%; height:60%; display:block; fill:currentColor; pointer-events:none }
.music-btn:hover{ filter:brightness(1.12) }
.music-btn:active{ box-shadow:inset 2px 2px 0 rgba(0,0,0,.40), inset -2px -2px 0 rgba(255,255,255,.20) }   /* pressed → sunken */
.music-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }
/* the centre play/pause key: same square as the rest, accented so it stands out */
.music-btn-play{ color:var(--ink); background:var(--cyan) }
/* the play/pause icon is wrapped in a span (it gets swapped at runtime) — make the
   span fill the key and centre the glyph, exactly like the other icon buttons */
#music-toggle-ico{ display:flex; align-items:center; justify-content:center; width:100%; height:100% }
/* engaged toggles (shuffle / repeat on) read as pressed-in + lit */
.music-btn.is-active{
  color:var(--ink); background:var(--cyan);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.40), inset -2px -2px 0 rgba(255,255,255,.22);
}
/* track progress: a recessed groove that fills as the current track plays */
.music-progress{
  height:6px; margin:9px 0 2px; overflow:hidden;
  background:rgba(0,0,0,.35); border:2px solid var(--ink);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5);
}
.music-progress > span{ display:block; height:100%; width:0; background:var(--cyan); transition:width .12s linear }
/* track header: generated pixel-art cover (left) + name & author (right), above the keys */
.music-meta{ display:flex; align-items:center; gap:9px; margin:2px 0 9px }
.music-art{
  flex:0 0 46px; width:46px; height:46px; image-rendering:pixelated; image-rendering:crisp-edges;
  border:2px solid var(--ink); box-shadow:inset 1px 1px 0 rgba(255,255,255,.14), 2px 2px 0 rgba(0,0,0,.35);
}
.music-info{ min-width:0; flex:1 1 auto }
.music-name, #music-name{ color:var(--cyan); font-family:var(--bit); font-size:10px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.music-author{ color:var(--text-dim); font-family:var(--bit); font-size:8px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* volume: a small speaker glyph + a retro grooved slider with a square cyan thumb */
.music-vol{ display:flex; align-items:center; gap:8px; margin:10px 0 2px }
.music-vol-ico{ flex:0 0 15px; width:15px; height:15px; fill:var(--text-dim) }
.music-vol input[type=range]{ flex:1; min-width:0; height:16px; cursor:pointer; background:transparent; -webkit-appearance:none; appearance:none }
.music-vol input[type=range]::-webkit-slider-runnable-track{ height:6px; background:rgba(0,0,0,.35); border:2px solid var(--ink); box-shadow:inset 1px 1px 0 rgba(0,0,0,.55) }
.music-vol input[type=range]::-moz-range-track{ height:6px; background:rgba(0,0,0,.35); border:2px solid var(--ink) }
.music-vol input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:10px; height:14px; margin-top:-6px; background:var(--cyan); border:2px solid var(--ink); box-shadow:inset 1px 1px 0 rgba(255,255,255,.4) }
.music-vol input[type=range]::-moz-range-thumb{ width:10px; height:14px; border-radius:0; background:var(--cyan); border:2px solid var(--ink) }
.music-vol input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--cyan); outline-offset:2px }
.hero-copy{ padding:14px 16px }
.hero-title{
  font-family:var(--pixel); font-size:20px; line-height:1.45; color:var(--white);
  text-shadow:2px 2px 0 var(--ink); margin-bottom:8px;
}
.hero-title .hl{ color:var(--green); text-shadow:2px 2px 0 var(--ink), 0 0 14px rgba(142,198,63,.4) }
.hero-text{ max-width:48ch; color:var(--text) }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.hero-ip{ margin-top:8px }

/* ============================ NEWS ============================ */
.news{ display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line-soft) }
.news:last-of-type{ border-bottom:none }
.news-side{ display:flex; flex-direction:column; align-items:center; gap:5px; width:34px; flex:none }
.avatar{ border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink) }
.news-tag{ font-family:var(--bit); font-size:7px; text-transform:uppercase; padding:2px 3px; color:var(--ink); white-space:nowrap }
.tag-orange{ background:var(--orange) } .tag-cyan{ background:var(--cyan) } .tag-pink{ background:var(--pink) } .tag-green{ background:var(--green) }
.news-body{ min-width:0 }
.news-title{ font-family:var(--bit); font-size:13px; line-height:1.3; margin-bottom:3px }
.news-title a{ color:var(--white) }
.news-title a:hover{ color:var(--green) }
.news-meta{ font-size:10px; color:var(--text-faint); margin-bottom:4px }
.news-meta .author{ color:var(--text-dim) }
.news-meta .comments{ color:var(--orange) }
.loadmore{ text-align:center; margin-top:10px }

/* ============================ GAMEMODES ============================ */
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.mode{
  display:flex; flex-direction:column; gap:3px; padding:10px;
  background:var(--ink); border:1px solid var(--line); color:var(--text);
}
.mode:hover{ text-decoration:none; border-color:var(--green); background:#14160f }
.mode-icon{ border:1px solid var(--line-soft); margin-bottom:3px }
.mode-name{ font-family:var(--bit); font-size:11px; color:var(--white); text-transform:uppercase }
.mode-desc{ font-size:10px; color:var(--text-dim) }

/* ============================ SIDEBAR BITS ============================ */
/* how-to */
.howto{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.howto li{ display:flex; gap:8px; align-items:flex-start }
.step{ font-family:var(--pixel); font-size:9px; color:var(--ink); background:var(--green); padding:4px 5px; flex:none; line-height:1 }
.step-text{ flex:1; min-width:0; line-height:1.5; overflow-wrap:break-word }
.step-text code{ white-space:nowrap }
.bedrock-note{ margin-top:9px; padding-top:8px; border-top:1px dashed var(--line-soft); color:var(--text-dim); font-size:10px }

/* generic link lists */
.linklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.linklist a{ color:var(--text) }
.linklist a:hover{ color:var(--green) }

.big-icon{ border:2px solid var(--ink); box-shadow:var(--shadow); margin-bottom:4px }

/* status box */
.stats{ margin:0; display:flex; flex-direction:column; gap:4px }
.stats div{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px dotted var(--line-soft); padding-bottom:3px }
.stats dt{ font-family:var(--bit); font-size:9px; text-transform:uppercase; color:var(--text-dim); margin:0 }
.stats dd{ margin:0; color:var(--white); font-size:11px }
.loadbar{ height:8px; background:var(--ink); border:1px solid var(--line); margin:9px 0 6px }
.loadbar-fill{ display:block; height:100%; background:repeating-linear-gradient(90deg,var(--green) 0 4px, #6f9e2e 4px 6px) }

.ip-big{ display:block; font-size:11px; padding:6px; margin-bottom:2px; word-break:break-all }

/* online list */
.online{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; font-family:var(--bit); font-size:11px }
.online li{ color:var(--text) }
.rank{ display:inline-block; width:30px; font-size:8px; color:var(--ink); background:var(--text-dim); text-align:center; padding:1px 0; margin-right:5px }
.online li .rank{ background:var(--cyan) }

/* leaderboard — rank + name + all four stats (level · faction · wealth · playtime) */
.leaderboard{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; font-family:var(--bit); font-size:11px }
.leaderboard li{ display:flex; align-items:flex-start; gap:6px; padding:5px 0; border-bottom:1px dotted var(--line-soft) }
.leaderboard li:last-child{ border-bottom:none }
.lb-rank{ width:16px; height:16px; line-height:16px; text-align:center; font-size:9px; color:var(--ink); background:var(--text-faint); flex:none; margin-top:1px }
.lb-rank.gold{ background:var(--yellow) } .lb-rank.silver{ background:#c8ccd4 } .lb-rank.bronze{ background:#c8843f }
.lb-main{ flex:1; min-width:0 }
.lb-name{ display:block; color:var(--white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lb-stats{ display:flex; flex-wrap:wrap; gap:3px; margin-top:3px }
.lb-stat{ display:inline-flex; align-items:center; gap:2px; font-size:9px; color:var(--text-dim); background:var(--ink); border:1px solid var(--line-soft); padding:1px 4px; white-space:nowrap; line-height:1.5 }
.lb-stat b{ font-weight:400; color:var(--text-faint) }
.lb-stat-lvl, .lb-stat-lvl b{ color:var(--green) }
.lb-stat-fac, .lb-stat-fac b{ color:var(--cyan) }
.lb-stat-coin{ color:var(--yellow) }
.lb-stat-time{ color:var(--text-dim) }
.lb-score{ color:var(--green) }

/* poll */
.poll-q{ font-family:var(--bit); font-size:11px; color:var(--white); margin-top:0 }
.poll{ display:flex; flex-direction:column; gap:6px; margin:6px 0 }
.poll-opt{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; cursor:pointer; font-size:10px }
.poll-opt input{ accent-color:var(--pink); margin:0 }
.poll-label{ color:var(--text) }
.poll-bar{ grid-column:1 / -1; height:6px; background:var(--ink); border:1px solid var(--line) }
.poll-bar > span{ display:block; height:100%; background:var(--pink) }
.poll-pct{ color:var(--text-dim); font-family:var(--bit); font-size:9px }

/* staff + rank colours */
.staff{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-family:var(--bit); font-size:11px }
.rank-owner{ background:var(--red) } .rank-admin{ background:var(--orange) } .rank-mod{ background:var(--cyan) } .rank-build{ background:var(--yellow) }

/* rules */
.rules{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px }
.rules li{ color:var(--text) }

/* ============================ FOOTER ============================ */
.foot{ border-top:1px solid var(--line); background:var(--ink) }
.foot-cols{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:16px; align-items:start }
.foot-col h3{ font-family:var(--bit); font-size:10px; text-transform:uppercase; color:var(--green); margin-bottom:6px; letter-spacing:.5px }
/* "connect" mirrors the "obbycraft" block on the opposite (right) edge */
.foot-col-connect{ text-align:right }
.foot-bar{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:9px 16px; border-top:1px solid var(--line); color:var(--text-faint);
}
.foot-bar a{ color:var(--text-dim) }

/* ============================ RESPONSIVE ============================ */
@media (max-width:880px){
  .columns{ grid-template-columns:1fr 1fr }
  .col-left{ border-right:none; border-bottom:1px solid var(--line-soft) }
  .col-right{ border-left:none; border-top:1px solid var(--line-soft); grid-column:1 / -1; }
  .col-main{ grid-column:1 / -1; order:-1 }
}
@media (max-width:620px){
  body{ font-size:11px }
  .wrap{ margin:6px; box-shadow:0 0 0 3px var(--ink) }
  .columns{ grid-template-columns:1fr }
  .col-left, .col-right, .col-main{ grid-column:auto; order:0 }
  .col-right{ border-top:1px solid var(--line-soft) }
  .masthead{ justify-content:center; text-align:center }
  .masthead-status{ justify-content:center }
  .logo-word{ font-size:20px }
  .hero-title{ font-size:16px }
  .modes{ grid-template-columns:1fr }
  .foot-cols{ grid-template-columns:1fr }
  .foot-col-connect{ text-align:left }   /* stacked on phones → align like the rest */
  .mainnav{ justify-content:center }
  .nav-spacer{ display:none }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .dot{ animation:none }
  .pixbtn{ transition:none }
  .crt{ display:none }
}

/* ============================================================
   v2 components — features grid, avatars, dynamic status
   ============================================================ */

/* features grid */
.features{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.feature{ display:flex; flex-direction:column; gap:3px; padding:9px; background:var(--ink); border:1px solid var(--line); color:var(--text) }
.feature:hover{ text-decoration:none; border-color:var(--orange); background:#14160f }
.feat-icon{ border:1px solid var(--line-soft); margin-bottom:3px }
.feat-name{ font-family:var(--bit); font-size:11px; color:var(--white); text-transform:uppercase }
.feat-desc{ font-size:10px; color:var(--text-dim); line-height:1.5 }
.feat-desc b{ color:var(--text) }

/* pixel head avatars (Minecraft skins) */
.head{ display:inline-block; line-height:0; background:var(--panel-hi); border:1px solid var(--ink); flex:none; vertical-align:middle }
.head img{ display:block; image-rendering:pixelated }
.head-fallback{ background:repeating-conic-gradient(var(--line) 0% 25%, var(--panel-hi) 0% 50%) 50%/8px 8px }

/* currently-online grid */
.online-grid{ display:flex; flex-wrap:wrap; gap:4px; min-height:8px }
.ohead{ line-height:0 }

/* staff rows + online dots */
.staff{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.staff-row{ display:flex; align-items:center; gap:6px; font-family:var(--bit); font-size:11px }
.staff-name{ color:var(--text) }
.staff-row .rank{ width:auto; padding:1px 4px; margin:0 }
.sdot{ width:7px; height:7px; background:var(--text-faint); flex:none }
.sdot.on{ background:var(--green); box-shadow:0 0 5px var(--green) }

/* uptime strip (recent status checks) */
.uptime-strip{ display:flex; gap:1px; margin:8px 0 6px; height:10px }
.uptime-strip:empty{ display:none }
.uptime-strip .cell{ flex:1; min-width:2px; height:100% }
.uptime-strip .cell.up{ background:var(--green) }
.uptime-strip .cell.down{ background:var(--red) }

/* extra news tag colour */
.tag-purple{ background:#b14aef }

/* live chat / shoutbox */
.chat-tr{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:11px; color:var(--text-dim); flex-wrap:wrap }
.chat-tr-lbl{ letter-spacing:.04em }
.chat-tr-lang{ font-family:var(--body); font-size:11px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:4px 6px }
.chat-tr-lang:focus{ outline:none; border-color:var(--pink) }
/* sliding on/off toggle — Win95: a sunken track with a raised sliding key.
   Shared by chat auto-translate and "stay logged in". */
.switch{ position:relative; display:inline-block; box-sizing:border-box; width:34px; height:16px; flex:none; cursor:pointer }
.switch input{ position:absolute; opacity:0; width:0; height:0 }
.slider{ position:absolute; inset:0; box-sizing:border-box; background:var(--ink);
  border:2px solid; border-color:var(--w-dark) var(--w-light) var(--w-light) var(--w-dark);   /* sunken channel */
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5); transition:background .12s }
.slider::before{ content:""; position:absolute; left:0; top:0; box-sizing:border-box; width:12px; height:12px;
  background:var(--line); border:2px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(0,0,0,.40);   /* raised key, like .music-btn */
  transition:transform .12s, background .12s }
.switch input:checked + .slider{ background:#0c2a16 }
.switch input:checked + .slider::before{ transform:translateX(18px); background:var(--green) }   /* on: lit key slid right */
.switch input:focus-visible + .slider{ outline:2px solid var(--green); outline-offset:1px }
.chat-tr .switch{ margin-left:auto }
.chat-tr .switch input:focus-visible + .slider{ outline-color:var(--pink) }
/* live roster: who's in the chatroom + current/max counter */
.chat-roster{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 8px; font-size:11px; color:var(--text-dim) }
.chat-roster-head{ display:inline-flex; align-items:center; gap:5px; color:var(--text) }
.chat-roster-count{ font-family:var(--bit); font-size:9px; color:var(--green); background:var(--ink); border:1px solid var(--line); padding:1px 5px }
.chat-roster-list{ display:flex; flex-wrap:wrap; gap:4px }
.chat-user{ font-size:10px; color:var(--text-dim); background:var(--ink); border:1px solid var(--line); padding:1px 5px; cursor:pointer }
.chat-user:hover{ color:var(--white); border-color:var(--cyan); text-decoration:none }
.chat-kicked{ color:var(--red); font-size:12px; margin:0 0 8px }
.chat-log{ height:230px; overflow-y:auto; background:var(--ink); border:1px solid var(--line); padding:8px; display:flex; flex-direction:column; gap:4px; font-size:11px; line-height:1.5 }
.chat-msg{ overflow-wrap:anywhere }
.chat-sys{ color:var(--text-faint); font-style:italic }
.chat-src{ display:inline-block; width:14px; text-align:center }
.src-mc{ color:var(--green) } .src-web{ color:var(--cyan) } .src-dc{ color:#b14aef } .src-sys{ color:var(--text-faint) }
.chat-who{ color:var(--white) }
.chat-body{ color:var(--text) }
.chat-body.tr-on::after{ content:" 🌐"; font-size:8px; opacity:.7 }   /* translated-message indicator */
.chat-report{ font-family:var(--bit); font-size:10px; line-height:1; color:var(--text-faint); background:none; border:none; cursor:pointer; padding:0 3px; margin-left:3px; opacity:0; transition:opacity .12s }
.chat-msg:hover .chat-report{ opacity:.55 }
.chat-report:hover{ opacity:1; color:var(--red) }
.chat-report:disabled{ cursor:default; color:var(--green); opacity:.8 }
.chat-form{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.chat-name{ width:84px; flex:none }
.chat-input{ flex:1; min-width:120px }
.chat-name, .chat-input{ font-family:var(--body); font-size:11px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:6px 7px }
.chat-name:focus, .chat-input:focus{ outline:none; border-color:var(--pink) }
.chat-send{ margin-top:0; flex:none }
.chat-input:disabled, .chat-name:disabled{ opacity:.5 }
#chat-status{ color:var(--text-dim) }
#chat-note.warn{ color:var(--yellow) }

/* account box */
.acct-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px }
.acct-name{ font-family:var(--bit); font-size:13px; color:var(--white); overflow:hidden; text-overflow:ellipsis }
.acct-bal{ margin:2px 0 6px; font-size:12px }
.acct-linked{ display:flex; flex-direction:column; gap:3px; margin:0 0 8px; font-size:10px }
.acct-linked .lk-on{ color:var(--green) }
.acct-linked .lk-off{ color:var(--text-faint) }
.acct-tabs{ display:flex; gap:4px; margin-bottom:8px }
.acct-tab{ flex:1; cursor:pointer; text-align:center; font-family:var(--bit); font-size:9px; letter-spacing:.5px; text-transform:uppercase; color:var(--white); background:var(--line); border:2px solid var(--ink); padding:7px 4px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(0,0,0,.40) }   /* raised key, like .pixbtn / .music-btn */
.acct-tab:hover{ filter:brightness(1.12) }
.acct-tab.active{ color:var(--ink); background:var(--cyan);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.40), inset -2px -2px 0 rgba(255,255,255,.22) }   /* pressed-in + lit = selected */
.acct-input{ display:block; width:100%; font-family:var(--body); font-size:11px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:6px 7px; margin-bottom:6px }
.acct-input:focus{ outline:none; border-color:var(--cyan) }
.acct-btn{ width:100%; margin-top:4px }
.acct-form{ display:block }
.acct-stay{ display:flex; align-items:center; gap:7px; font-family:var(--bit); font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); cursor:pointer; user-select:none; margin:4px 0 2px }
.acct-subhead{ font-family:var(--bit); font-size:10px; color:var(--white); text-transform:uppercase; margin-bottom:6px }
.linklike{ display:inline-block; background:none; border:none; color:var(--cyan); font-family:var(--bit); font-size:9px; text-transform:uppercase; cursor:pointer; padding:5px 2px 2px; text-align:left }
.linklike:hover{ color:var(--white); text-decoration:underline }
.acct-err{ color:var(--red); margin-top:4px; min-height:1em }
.acct-err:empty{ min-height:0 }
.linkcode{ font-size:10px; color:var(--text-dim); margin-top:8px; line-height:1.7 }
.linkcode:empty{ display:none }
.linkcode b{ color:var(--green); letter-spacing:1px }
/* account danger zone (self-delete) */
.acct-danger{ margin-top:14px; padding-top:10px; border-top:1px dashed var(--red) }
.acct-delpanel{ margin-top:6px; padding:8px; border:1px solid var(--red); background:rgba(232,80,58,.08); border-radius:2px }
.acct-delpanel[hidden]{ display:none }
.acct-delpanel .warn{ color:var(--red); margin:0 0 7px }

/* coin shop */
.shop-items{ display:flex; flex-direction:column; gap:6px; margin:8px 0 }
.shop-item{ display:flex; align-items:center; gap:9px; background:var(--ink); border:1px solid var(--line); padding:7px }
.shop-ic{ border:1px solid var(--line-soft); flex:none }
.shop-info{ flex:1; min-width:0 }
.shop-name{ font-family:var(--bit); font-size:12px; color:var(--white) }
.shop-desc{ color:var(--text-dim) }
.shop-buy{ margin-top:0; flex:none; white-space:nowrap }
.shop-item.sold-out{ opacity:.55 }
.shop-item.sold-out .shop-name{ text-decoration:line-through }
.shop-stock{ color:var(--yellow) }
#shop-balance{ color:var(--yellow) }
#shop-note:empty, #shop-note{ min-height:1em }
#shop-note.warn{ color:var(--red) }
.donate{ margin-top:10px; padding-top:9px; border-top:1px dashed var(--line-soft); color:var(--text-dim); font-size:11px }
.donate b{ color:var(--pink) }

/* language selector */
.lang-select{ font-family:var(--body); font-size:10px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:4px 6px; cursor:pointer }
.lang-pick{ display:inline-flex; align-items:center; gap:5px }
.lang-flag{ display:inline-flex; flex:none }
.lang-flag svg{ display:block; width:20px; height:14px; image-rendering:pixelated; border:1px solid var(--ink); box-shadow:1px 1px 0 var(--ink) }
.lang-select:focus{ outline:none; border-color:var(--green) }

/* tabbed views */
.view{ display:flex; flex-direction:column; gap:12px }
.view[hidden]{ display:none }

/* forums */
.forum-cats{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px }
.cat-chip{ font-family:var(--bit); font-size:9px; letter-spacing:.5px; text-transform:uppercase; color:var(--white); background:var(--line); border:2px solid var(--ink); padding:6px 8px; cursor:pointer;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(0,0,0,.40) }   /* raised key, like .acct-tab */
.cat-chip:hover{ filter:brightness(1.12) }
.cat-chip.active{ color:var(--ink); background:var(--orange);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.34), inset -2px -2px 0 rgba(255,255,255,.30) }   /* pressed-in + lit = selected */
/* coin champions tabs */
.clb-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px }
.clb-tabs .cat-chip.active{ background:var(--cyan) }
/* in-game leaderboard pointer (home → chat page) */
.lb-redirect-q{ font-family:var(--bit); font-size:12px; color:var(--white); letter-spacing:.5px; line-height:1.5; margin:0 0 6px }
.lb-redirect .pixbtn{ margin-top:8px }
/* server stats graphs */
.stats-summary{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 6px }
.stats-chip{ font-family:var(--bit); font-size:9px; color:var(--text-dim); background:var(--ink); border:1px solid var(--line-soft); padding:1px 5px }
.stats-chip b{ font-weight:400; color:var(--green) }
.stats-label{ font-family:var(--bit); font-size:8px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin:8px 0 3px }
.stats-chart{ background:var(--ink); border:1px solid var(--line); padding:2px; line-height:0 }
.stats-chart:empty{ display:none }
.stats-chart svg{ display:block }
.forum-actions{ display:flex; gap:6px; margin-bottom:9px; flex-wrap:wrap }
.thread-row{ display:flex; align-items:center; gap:8px; padding:8px; background:var(--ink); border:1px solid var(--line); margin-bottom:5px; cursor:pointer }
.thread-row:hover{ border-color:var(--orange) }
.thread-row.is-news{ border-left:3px solid var(--orange) }
.thread-main{ flex:1; min-width:0 }
.thread-title{ font-family:var(--bit); font-size:12px; color:var(--white) }
.thread-title .pin{ color:var(--orange); margin-right:4px }
.thread-meta{ font-size:10px; color:var(--text-faint); margin-top:2px }
.thread-replies{ font-size:10px; color:var(--text-dim); flex:none; white-space:nowrap }
.thread-h{ font-family:var(--bit); font-size:15px; color:var(--white); margin-bottom:3px }
.thread-body{ white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0 }
.replies{ margin-top:12px; display:flex; flex-direction:column; gap:6px }
.reply{ background:var(--ink); border:1px solid var(--line-soft); padding:7px }
.reply-meta{ font-size:10px; color:var(--text-faint); margin-bottom:3px }
.reply-body{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere }
.reply-form{ display:flex; flex-direction:column; gap:6px; margin-top:12px }
.compose-form{ display:flex; flex-direction:column; gap:6px; margin-bottom:11px; padding:9px; background:var(--ink); border:1px solid var(--line) }
.compose-actions{ display:flex; gap:6px }
.forum-textarea{ font-family:var(--body); font-size:11px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:6px 7px; min-height:84px; resize:vertical }
.forum-textarea:focus, .forum-select:focus{ outline:none; border-color:var(--orange) }
.forum-select{ font-family:var(--body); font-size:11px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:6px }
#forum-back{ color:var(--text-dim) }

/* auto-translate button */
.tr-btn{ display:inline-block; font-family:var(--bit); font-size:8px; text-transform:uppercase; color:var(--cyan); background:var(--ink); border:2px solid var(--ink); padding:3px 6px; margin-top:5px; cursor:pointer;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.18), inset -2px -2px 0 rgba(0,0,0,.40) }   /* raised key */
.tr-btn:hover{ color:var(--white); filter:brightness(1.18) }
.tr-btn:active{ box-shadow:inset 2px 2px 0 rgba(0,0,0,.40), inset -2px -2px 0 rgba(255,255,255,.18) }
.tr-btn.del{ color:var(--red); margin-left:6px }

@media (max-width:620px){
  .features{ grid-template-columns:1fr }
  .chat-input{ flex:1 1 100% }
  .shop-item{ flex-wrap:wrap }
}

/* ============================================================
   v3 components — social portal/page, themed pagers, retro scrollbars
   ============================================================ */

/* ---------- retro pixelated scrollbars (chunky, hard bevel + grip) ---------- */
/* Only Firefox (which lacks ::-webkit-scrollbar) gets the standard scrollbar-color — on
   Chromium/Safari setting it makes modern Chrome IGNORE the ::-webkit-scrollbar pixel
   styling below, so we leave it unset there and let the pixel rules take over. */
@supports not selector(::-webkit-scrollbar) {
  *{ scrollbar-width:auto; scrollbar-color:var(--green) var(--ink) }
}
::-webkit-scrollbar{ width:16px; height:16px }
::-webkit-scrollbar-track{
  background-color:var(--ink);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  border:1px solid var(--line);
}
::-webkit-scrollbar-thumb{
  background-color:var(--text-faint);   /* olive — visible against the dark track */
  border:2px solid var(--ink);
  /* hard 3D bevel — light top/left, near-black bottom/right */
  box-shadow:inset 2px 2px 0 var(--text-dim), inset -2px -2px 0 #14160f;
}
::-webkit-scrollbar-thumb:hover{ background-color:var(--green) }
::-webkit-scrollbar-thumb:active{ background-color:var(--green); box-shadow:inset 2px 2px 0 #14160f, inset -2px -2px 0 var(--text-dim) }

/* beveled arrow buttons at each end of the bar (one per end) */
::-webkit-scrollbar-button:single-button{
  display:block; width:16px; height:16px;
  background-color:var(--text-faint); border:2px solid var(--ink);
  box-shadow:inset 2px 2px 0 var(--text-dim), inset -2px -2px 0 #14160f;
  background-repeat:no-repeat; background-position:center;
}
::-webkit-scrollbar-button:single-button:hover{ background-color:var(--green) }
::-webkit-scrollbar-button:single-button:active{ box-shadow:inset 2px 2px 0 #14160f, inset -2px -2px 0 var(--text-dim) }
::-webkit-scrollbar-button:single-button:vertical:decrement{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M8,5l4,6H4z' fill='%23cfd2c4'/></svg>") }
::-webkit-scrollbar-button:single-button:vertical:increment{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M8,11L4,5h8z' fill='%23cfd2c4'/></svg>") }
::-webkit-scrollbar-button:single-button:horizontal:decrement{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M5,8l6,-4v8z' fill='%23cfd2c4'/></svg>") }
::-webkit-scrollbar-button:single-button:horizontal:increment{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M11,8L5,4v8z' fill='%23cfd2c4'/></svg>") }
::-webkit-scrollbar-corner{ background:var(--ink) }

/* ---------- themed page navigator (forums + leaderboard) ---------- */
.pager{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:10px }
.pager[hidden]{ display:none }
.pager-btn{
  cursor:pointer; font-family:var(--bit); font-size:10px; line-height:1; min-width:24px;
  color:var(--text); background:var(--line); border:2px solid var(--ink); padding:5px 8px; text-align:center;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.30), inset -2px -2px 0 rgba(0,0,0,.40);   /* raised key */
}
.pager-btn:hover:not(:disabled){ color:var(--ink); background:var(--green) }
.pager-btn:active:not(:disabled){ box-shadow:inset 2px 2px 0 rgba(0,0,0,.40), inset -2px -2px 0 rgba(255,255,255,.22) }   /* pressed */
.pager-btn.cur{ color:var(--ink); background:var(--yellow);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.34), inset -2px -2px 0 rgba(255,255,255,.30) }   /* current page = pressed + lit */
.pager-btn:disabled{ opacity:.4; cursor:default; box-shadow:inset 2px 2px 0 rgba(255,255,255,.10), inset -2px -2px 0 rgba(0,0,0,.25) }
.pager-gap{ font-family:var(--bit); font-size:10px; color:var(--text-faint); padding:0 2px }
.pager-info{ font-family:var(--bit); font-size:10px; color:var(--text-dim); padding:0 4px }
.pager-compact{ justify-content:center; gap:6px; margin-top:8px }

/* ---------- themed select (per-page, etc.) ---------- */
.pixsel{
  font-family:var(--body); font-size:11px; color:var(--text);
  background:var(--ink); padding:6px; cursor:pointer;
  /* sunken Win95 inset, matching the other <select> controls */
  border:2px solid; border-color:var(--w-dark) var(--w-light) var(--w-light) var(--w-dark);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5);
}
.pixsel:focus{ outline:none; border-color:var(--green) }
/* dropdown options must stay readable on the dark theme (some browsers render them black-on-dark) */
.pixsel option, .forum-select option, .lang-select option{ background:var(--panel); color:var(--text); }
.forum-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:9px }
.forum-toolbar .forum-cats{ margin-bottom:0 }
.perpage{ display:flex; align-items:center; gap:5px; font-family:var(--bit); font-size:9px; text-transform:uppercase; color:var(--text-dim); white-space:nowrap }

/* ---------- social: compact left-column portal ---------- */
.social-portal{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:6px 0 9px }
.soc-chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; line-height:0;
}
.soc-chip:hover{ transform:translateY(-1px); filter:brightness(1.12) }
.soc-chip-soon{ opacity:.5; cursor:default }
.soc-chip-soon:hover{ transform:none; filter:none }
.soc-ic{ display:block; image-rendering:pixelated }

/* ---------- social: full page card grid ---------- */
.social-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px }
.soc-card{
  display:flex; align-items:center; gap:10px; padding:10px;
  background:var(--ink); border:1px solid var(--line); border-left:3px solid var(--cyan);
  color:var(--text); box-shadow:var(--shadow);
}
a.soc-card:hover{ text-decoration:none; border-color:var(--cyan); background:#14160f }
.soc-card-ic{ flex:none; line-height:0 }
.soc-card-body{ flex:1; min-width:0 }
.soc-card-name{ font-family:var(--bit); font-size:13px; color:var(--white) }
.soc-card-handle{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.soc-card-go{ font-family:var(--bit); font-size:8px; text-transform:uppercase; color:var(--ink); background:var(--cyan); padding:3px 5px; flex:none }
.soc-card.soc-soon{ opacity:.6 }
.soc-card.soc-soon .soc-card-go{ background:var(--text-faint); color:var(--ink) }

/* per-platform accent (left border + go-badge tint) */
.soc-discord{ border-left-color:#5865f2 } .soc-discord .soc-card-go{ background:#5865f2; color:#fff }
.soc-youtube{ border-left-color:#ff0000 } .soc-youtube .soc-card-go{ background:#ff0000; color:#fff }
.soc-instagram{ border-left-color:#e1306c } .soc-instagram .soc-card-go{ background:#e1306c; color:#fff }
.soc-tiktok{ border-left-color:#25f4ee } .soc-tiktok .soc-card-go{ background:#25f4ee }
.soc-twitter{ border-left-color:#c8ccd4 }
.soc-whatsapp{ border-left-color:#25d366 } .soc-whatsapp .soc-card-go{ background:#25d366 }
.soc-telegram{ border-left-color:#229ed9 } .soc-telegram .soc-card-go{ background:#229ed9; color:#fff }
.soc-qq{ border-left-color:#12b7f5 } .soc-qq .soc-card-go{ background:#12b7f5; color:#fff }
.soc-wechat{ border-left-color:#09b83e } .soc-wechat .soc-card-go{ background:#09b83e; color:#fff }
.soc-reddit{ border-left-color:#ff4500 } .soc-reddit .soc-card-go{ background:#ff4500; color:#fff }
.soc-facebook{ border-left-color:#1877f2 } .soc-facebook .soc-card-go{ background:#1877f2; color:#fff }
/* keep the "soon" badge muted even with a platform accent */
.soc-card.soc-soon .soc-card-go{ background:var(--text-faint); color:var(--ink) }

@media (max-width:620px){
  .social-grid{ grid-template-columns:1fr }
  .forum-toolbar{ flex-direction:column; align-items:stretch }
}

/* ============================================================
   v4 — clickable player names + profile modal
   ============================================================ */
.js-profile{ cursor:pointer }
.js-profile:hover{ color:var(--white); text-decoration:underline; text-decoration-style:dotted }
.ohead.js-profile:hover{ outline:1px solid var(--cyan); outline-offset:-1px }
.chat-who.js-profile:hover{ color:var(--white) }

.modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px }
.modal[hidden]{ display:none }
.modal-backdrop{ position:absolute; inset:0; background:rgba(8,10,7,.72) }
.modal-card{ position:relative; z-index:1; width:100%; max-width:340px; max-height:88vh; overflow:auto }
.modal-close{ background:none; border:none; color:var(--text-dim); font-family:var(--bit); font-size:12px; cursor:pointer; padding:0 2px; line-height:1 }
.modal-close:hover{ color:var(--white) }

.profile-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px }
.profile-headtext{ min-width:0 }
.profile-name{ font-family:var(--bit); font-size:15px; color:var(--white); display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis }
.profile-rank{ color:var(--yellow); margin-top:2px }
.profile-stats{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:9px }
.profile-acc{ border-top:1px dashed var(--line-soft); padding-top:8px; color:var(--text-dim); display:flex; flex-direction:column; gap:5px }
.profile-subhead{ font-family:var(--bit); font-size:10px; color:var(--white); text-transform:uppercase; margin:9px 0 4px }
.profile-posts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; font-size:11px }
.profile-posts a{ color:var(--cyan) }
.profile-posts a:hover{ color:var(--white) }

/* ---- daily reward card (account panel) ---- */
.daily-card{ border:1px solid var(--line-soft); background:rgba(255,255,255,.02); padding:8px; margin:9px 0; border-radius:2px }
.daily-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; flex-wrap:wrap }
.daily-title{ font-family:var(--bit); font-size:11px; color:var(--yellow); text-transform:uppercase; white-space:nowrap }
.daily-streak{ font-size:11px; color:var(--orange); white-space:nowrap }
.daily-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(36px,1fr)); gap:3px; margin-bottom:8px }
.daily-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px; border:1px solid var(--line-soft); background:rgba(0,0,0,.18); font-size:9px; color:var(--text-dim); border-radius:2px }
.daily-cell-day{ font-family:var(--bit); font-size:8px; color:var(--text-faint); text-transform:uppercase }
.daily-cell-amt{ white-space:nowrap }
.daily-cell.active{ border-color:var(--yellow); background:rgba(255,207,63,.14); color:var(--white); box-shadow:inset 0 0 0 1px var(--yellow) }
.daily-cell.done{ border-color:var(--green); color:var(--green) }
.daily-cell.done .daily-cell-amt::after{ content:" ✓" }
.daily-btn{ width:100% }
.daily-msg{ margin-top:6px }
.daily-msg.ok{ color:var(--green) }
.daily-msg.warn{ color:var(--red) }
.daily-note{ margin-bottom:7px; font-style:italic }

/* ---- admin control panel (modal) ---- */
.admin-search{ width:100%; margin-bottom:9px }
.admin-input{ font-family:var(--bit); font-size:9px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:4px 6px; min-width:0 }
.admin-input.num{ width:70px }
.admin-list{ display:flex; flex-direction:column; gap:8px }
.admin-user{ border:1px solid var(--line-soft); background:rgba(255,255,255,.02); padding:8px; border-radius:2px }
.admin-user-head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:5px }
.admin-user-name{ font-family:var(--bit); font-size:12px; color:var(--white); overflow:hidden; text-overflow:ellipsis }
.admin-badge{ font-family:var(--bit); font-size:8px; text-transform:uppercase; padding:1px 4px; border:1px solid var(--ink) }
.badge-admin{ background:var(--cyan); color:var(--ink) }
.badge-banned{ background:var(--red); color:var(--white) }
.admin-links{ display:flex; gap:10px; color:var(--text-dim); margin-bottom:6px; flex-wrap:wrap }
.admin-row{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:5px }
.admin-row-label{ color:var(--yellow); min-width:54px }
.admin-btn{ font-size:8px; padding:4px 7px }
.admin-status{ margin-top:3px; min-height:12px }
.admin-status.ok{ color:var(--green) }
.admin-status.warn{ color:var(--red) }
.admin-protected{ font-style:italic }
.admin-subhead{ font-family:var(--bit); font-size:10px; color:var(--white); text-transform:uppercase; margin:12px 0 5px; border-top:1px dashed var(--line-soft); padding-top:8px }
.admin-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; font-size:10px; color:var(--text-dim) }
.admin-log-act{ color:var(--cyan); font-family:var(--bit); font-size:8px; text-transform:uppercase }
/* ---- chat report queue (admin panel) ---- */
.admin-reportswrap{ display:flex; flex-direction:column; gap:6px }
.admin-report{ border:1px solid var(--line-soft); border-left:3px solid var(--red); background:rgba(232,80,58,.06); padding:7px 9px; border-radius:2px }
.admin-report.handled{ border-left-color:var(--green); background:rgba(255,255,255,.02); opacity:.7 }
.admin-report-msg{ font-size:11px; color:var(--white); word-break:break-word; margin-bottom:4px }
.admin-report-meta{ display:flex; gap:8px; flex-wrap:wrap }
.badge-ok{ background:var(--green); color:var(--ink); float:right }

/* ---- shop: missing-MC-link warning ---- */
.shop-nomc{ border:1px solid var(--red); background:rgba(232,80,58,.12); color:var(--red); padding:7px 9px; margin-bottom:9px; font-size:11px; border-radius:2px }

/* ---- loot crates ---- */
.shop-subhead{ font-family:var(--bit); font-size:10px; color:var(--white); text-transform:uppercase; margin:12px 0 6px; border-top:1px dashed var(--line-soft); padding-top:9px }
.shop-crates{ display:flex; flex-direction:column; gap:8px }
.crate-card{ border:1px solid var(--line-soft); background:rgba(255,255,255,.02); padding:9px; border-radius:2px }
.crate-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px }
.crate-name{ font-family:var(--bit); font-size:12px; color:var(--pink) }
.crate-price{ font-size:11px; color:var(--yellow); white-space:nowrap }
.crate-odds{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:2px }
.crate-odds li{ display:flex; justify-content:space-between; gap:8px; color:var(--text-dim) }
.crate-odds-pct{ color:var(--text-faint); white-space:nowrap }
.crate-open{ width:100% }
.crate-result{ margin-top:6px; min-height:12px }
.crate-result.ok{ color:var(--green) }
.crate-result.warn{ color:var(--red) }

/* ---- coin ledger (account panel) ---- */
.ledger-slot{ margin-top:2px }
.ledger-list{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; font-size:10px }
.ledger-list li{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; border-bottom:1px solid var(--line-soft); padding-bottom:3px }
.ledger-reason{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ledger-delta{ font-family:var(--bit); font-size:9px; white-space:nowrap }
.ledger-delta.pos{ color:var(--green) }
.ledger-delta.neg{ color:var(--red) }
.ledger-bal{ white-space:nowrap }

/* ============================ PIXEL DECOR (k10k) ============================ */
/* dashed pixel rule used as a section ornament */
.pixel-rule{
  height:2px; margin:0; border:0; opacity:1;
  /* Win95 etched separator: a dark line over a light line = an engraved groove */
  background:linear-gradient(180deg, var(--w-dark) 0 1px, var(--w-light) 1px 2px);
}
.pixel-rule.alt{ background:linear-gradient(180deg, var(--w-dark) 0 1px, var(--w-light) 1px 2px) }

/* sunken Win95 inset for text controls (dark top-left, light bottom-right) */
.acct-input, .chat-input, .chat-name, .chat-tr-lang, .lang-select,
.forum-textarea, .forum-select, .admin-input, .wiki-search{
  border:2px solid;
  border-color:var(--w-dark) var(--w-light) var(--w-light) var(--w-dark);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5);
}

/* little pixel sprites (inline SVG) — crisp, never blurry */
.psprite{ display:block; image-rendering:pixelated; border:2px solid var(--ink); box-shadow:var(--shadow); background:var(--ink) }
.masthead-mascot{ display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0 }
.masthead-mascot .psprite{ width:30px; height:30px }
.mascot-say{ font-family:var(--bit); font-size:8px; color:var(--text-dim); background:var(--ink); border:1px solid var(--line); padding:3px 5px; white-space:nowrap; position:relative }
.mascot-say::before{ content:""; position:absolute; left:-4px; top:50%; transform:translateY(-50%); width:0; height:0; border:3px solid transparent; border-right-color:var(--line) }
@media (max-width:560px){ .mascot-say{ display:none } }   /* drop the quip on small phones; keep the slime */

/* footer pixel sprite row */
.footer-sprites{ display:flex; gap:8px; align-items:center; justify-content:center; margin-bottom:8px; opacity:.9 }

/* ============================ BROADCAST TICKER ============================ */
.broadcast{ display:flex; align-items:center; gap:8px; background:var(--ink); border-bottom:1px solid var(--line); padding:5px 10px; overflow:hidden }
.broadcast[hidden]{ display:none }
.bc-mic{ flex:none; display:flex; align-items:center }
.bc-mic svg{ display:block; image-rendering:pixelated }
.bc-viewport{ flex:1 1 auto; min-width:0; overflow:hidden }
.bc-track{ display:inline-flex; align-items:center; gap:30px; white-space:nowrap; will-change:transform; animation:bc-scroll 40s linear infinite }
.broadcast:hover .bc-track{ animation-play-state:paused }
.bc-item{ font-family:var(--bit); font-size:10px; color:var(--text-dim) }
.bc-item.joke{ color:var(--text-faint); font-style:italic }
.bc-track.bc-static{ animation:none }
.bc-item.bc-idle{ color:var(--text-faint); font-style:italic; opacity:.8 }
@keyframes bc-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .bc-track{ animation:none } }

/* ============================ WIKI / GUIDES ============================ */
.wiki-search{ width:100%; font-family:var(--bit); font-size:10px; color:var(--text); background:var(--ink); border:1px solid var(--line); padding:6px 8px; margin-bottom:10px }
.wiki-search:focus{ outline:none; border-color:var(--green) }
.wiki-layout{ display:grid; grid-template-columns:190px 1fr; gap:12px; align-items:start }
@media (max-width:680px){ .wiki-layout{ grid-template-columns:1fr } }
.wiki-list{ display:flex; flex-direction:column; gap:4px }
.wiki-item{ text-align:left; background:var(--ink); border:1px solid var(--line-soft); color:var(--text-dim); padding:6px 8px; cursor:pointer; display:flex; flex-direction:column; gap:2px }
.wiki-item:hover{ border-color:var(--green); color:var(--white) }
.wiki-item.active{ border-color:var(--green); color:var(--white); background:var(--panel-hi) }
.wiki-item-title{ font-family:var(--bit); font-size:10px }
.wiki-item-cat{ color:var(--text-faint) }
.wiki-content{ min-width:0; border-left:1px solid var(--line-soft); padding-left:12px }
@media (max-width:680px){ .wiki-content{ border-left:0; padding-left:0; border-top:1px dashed var(--line-soft); padding-top:10px } }
.wiki-cat{ color:var(--green); text-transform:uppercase; letter-spacing:.5px }
.wiki-h{ font-family:var(--pixel); font-size:14px; color:var(--white); margin:3px 0 9px }
.wiki-body h3{ font-family:var(--bit); font-size:13px; color:var(--white); margin:12px 0 4px }
.wiki-body h4{ font-family:var(--bit); font-size:11px; color:var(--green); text-transform:uppercase; margin:11px 0 3px }
.wiki-body p{ margin:5px 0 }
.wiki-body ul{ margin:5px 0 5px 16px; padding:0 }
.wiki-body li{ margin:2px 0 }
.wiki-body a{ color:var(--cyan) }