/* =========================================================
   NeverPlayAlone · Subnet Dashboard
   cream paper · candy ink · Minecraft HUD
   (continues the neverplayalone_landing design language)
   ========================================================= */

:root {
  --bg:      #f5f0e6;
  --paper:   #fffaf0;
  --elev:    #ebe5d6;
  --elev2:   #e2dbc9;
  --ink:     #0e0e10;
  --mute:    #6b6760;
  --orange:  #ff5c2b;
  --orange-d:#c43b14;
  --cyan:    #2bc7ff;
  --cyan-d:  #0e8ec0;
  --lime:    #b9e54a;
  --lime-d:  #7fa629;
  --gold:    #f5d05a;
  --diamond: #5be6e6;
  --emerald: #2a8f3c;
  --redstone:#e0473b;
  --line:    rgba(14,14,16,0.10);
  --line2:   rgba(14,14,16,0.22);
  --sb-w:    248px;
  --radius:  10px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--mute); }

.font-display { font-family: "Bricolage Grotesque", sans-serif; }
.font-mono    { font-family: "DM Mono", monospace; }
.font-pixel   { font-family: "Silkscreen", "DM Mono", monospace; }

/* ===== Texture overlays (from landing) ==================== */
.grain {
  pointer-events: none; position: fixed; inset: 0; z-index: 60;
  background-image:
    radial-gradient(rgba(14,14,16,0.16) 1px, transparent 1px),
    radial-gradient(rgba(14,14,16,0.10) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply; opacity: .3;
}
.vignette {
  pointer-events: none; position: fixed; inset: 0; z-index: 55;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 62%, rgba(14,14,16,0.08) 100%),
    radial-gradient(90% 60% at 50% 100%, transparent 62%, rgba(14,14,16,0.08) 100%);
}

/* ===== Shell layout ====================================== */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w);
  background: var(--paper);
  border-right: 2px solid var(--ink);
  display: flex; flex-direction: column;
  z-index: 40;
  box-shadow: 4px 0 0 rgba(14,14,16,.06);
}
.main {
  margin-left: var(--sb-w);
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

/* ===== Brand ============================================= */
.sb-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 18px;
  border-bottom: 2px solid var(--ink);
}
.brand-mark-lg {
  width: 34px; height: 34px; position: relative; flex-shrink: 0;
  background: linear-gradient(to bottom, #8b5a2b 0 100%);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 3px; overflow: hidden; image-rendering: pixelated;
}
.brand-mark-lg::before {
  content:""; position:absolute; left:0; right:0; top:0; height:11px;
  background: linear-gradient(to bottom, #6dbe3e 0 8px, #5a8f24 8px 10px, transparent 10px);
}
.brand-mark-lg::after {
  content:""; position:absolute; inset: 12px 2px 2px 2px;
  background:
    radial-gradient(circle at 22% 22%, #6e441e 0 2px, transparent 2px),
    radial-gradient(circle at 72% 42%, #6e441e 0 2px, transparent 2px),
    radial-gradient(circle at 38% 66%, #a47045 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 82% 80%, #6e441e 0 2px, transparent 2px);
}
.sb-brand .name { font-family:"Bricolage Grotesque",sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.03em; line-height: 1; }
.sb-brand .name b { color: var(--orange); font-weight: 800; }
.sb-brand .sub { font-family:"Silkscreen",monospace; font-size: 8px; letter-spacing: .18em; color: var(--mute); text-transform: uppercase; margin-top: 5px; }

/* ===== Nav =============================================== */
.sb-nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.sb-group { font-family:"Silkscreen",monospace; font-size: 8.5px; letter-spacing: .2em; color: var(--mute); text-transform: uppercase; padding: 14px 10px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all .14s ease; position: relative;
}
.nav-item:hover { background: var(--elev); }
.nav-item.active {
  background: var(--paper); border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px,-1px);
}
.nav-item.active .nav-ico { background: var(--orange); }
.nav-ico {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--ink); background: var(--elev);
  display: grid; place-items: center;
  box-shadow: 1.5px 1.5px 0 var(--ink);
  font-size: 12px; line-height: 1;
}
.nav-item .count {
  margin-left: auto; font-family:"DM Mono",monospace; font-size: 11px;
  color: var(--mute); background: var(--elev); border:1.5px solid var(--line2);
  border-radius: 999px; padding: 1px 8px;
}
.sb-foot { padding: 14px 16px; border-top: 2px solid var(--ink); font-size: 11px; color: var(--mute); }
.sb-foot .live { display:flex; align-items:center; gap:8px; font-family:"Silkscreen",monospace; font-size:8.5px; letter-spacing:.15em; text-transform:uppercase; }

/* ===== Topbar =========================================== */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 26px;
  background: rgba(245,240,230,.82); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.tb-title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tb-title .crumb { font-family:"Silkscreen",monospace; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--mute); }
.tb-title h1 { margin:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:24px; letter-spacing:-.03em; line-height:1; }
.tb-spacer { flex: 1; }
.tb-live {
  display:flex; align-items:center; gap:9px; padding:7px 13px;
  background: var(--paper); border:1.5px solid var(--ink); border-radius:999px;
  box-shadow: 2px 2px 0 var(--ink); font-size:12.5px; font-weight:600;
}
.tb-king {
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px;
  background: var(--gold); border:1.5px solid var(--ink); border-radius:999px;
  box-shadow: 2px 2px 0 var(--ink); font-size:12.5px; font-weight:700;
}
.tb-king .crown { display:grid; place-items:center; width:22px; height:22px; background:var(--ink); border-radius:50%; font-size:12px; flex-shrink:0; }
.tb-king .ktag { font-family:"Silkscreen",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.75; }
.tb-king .kname { font-weight:800; }
.tb-king .kreward { font-family:"DM Mono",monospace; font-size:11.5px; background:var(--ink); color:var(--bg); border-radius:999px; padding:2px 8px; }

/* ===== Content ========================================== */
.content { padding: 26px 28px; width: 100%; }
.view { animation: fade .35s ease both; }
@keyframes fade { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ===== Sticker chips ==================================== */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Silkscreen","DM Mono",monospace; font-weight:700;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px 3px; border:1.5px solid var(--ink); border-radius:999px;
  background: var(--paper); box-shadow: 1.5px 1.5px 0 var(--ink); line-height:1; white-space:nowrap;
}
.chip.orange { background: var(--orange); } .chip.cyan { background: var(--cyan); }
.chip.lime { background: var(--lime); } .chip.gold { background: var(--gold); }
.chip.ink { background: var(--ink); color: var(--bg); }
.chip.ghost { background: transparent; box-shadow:none; border-color: var(--line2); color: var(--mute); }
.chip.live { background: var(--lime); }

.dot-pulse { width:7px; height:7px; border-radius:50%; background: var(--lime-d); display:inline-block; box-shadow:0 0 0 0 rgba(127,166,41,.6); animation:pulse 1.8s infinite ease-out; flex-shrink:0; }
.blink-dot { width:9px; height:9px; border-radius:50%; background: var(--lime-d); display:inline-block; flex-shrink:0; animation: blink 1.05s steps(1,end) infinite; box-shadow:0 0 0 3px rgba(127,166,41,.18); }
@keyframes blink { 0%,55%{opacity:1; background:var(--lime-d);} 56%,100%{opacity:.2; background:var(--mute);} }
.tb-live b.font-pixel { color: var(--lime-d); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(127,166,41,.55);} 70%{box-shadow:0 0 0 8px rgba(127,166,41,0);} 100%{box-shadow:0 0 0 0 rgba(127,166,41,0);} }

/* ===== Panels / cards =================================== */
.panel {
  background: var(--paper); border:1.5px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
}
.panel-h {
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1.5px dashed var(--line2);
}
.panel-h h2 { margin:0; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:17px; letter-spacing:-.02em; }
.panel-h .sub { font-size:12px; color: var(--mute); }
.panel-b { padding: 18px; }

.grid { display:grid; gap:18px; }

/* ===== KPI cards ======================================== */
.kpi {
  position: relative; overflow: hidden;
  background: var(--paper); border:1.5px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 16px 16px 15px; transition: transform .16s ease, box-shadow .16s ease;
}
.kpi:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--ink); }
.kpi .kpi-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi .kpi-lab { font-family:"Silkscreen",monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute); }
.kpi .kpi-val { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:38px; letter-spacing:-.04em; line-height:1; margin-top:12px; }
.kpi .kpi-val small { font-size:18px; color: var(--mute); font-weight:700; }
.kpi .kpi-sub { font-size:12px; color: var(--mute); margin-top:7px; display:flex; align-items:center; gap:6px; }
.kpi .kpi-glyph {
  width: 34px; height: 34px; border:1.5px solid var(--ink); border-radius:7px;
  box-shadow: 2px 2px 0 var(--ink); display:grid; place-items:center; font-size:16px; flex-shrink:0;
}
.kpi.accent-king::after, .kpi.accent-orange::after { content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; opacity:.14; }
.kpi.accent-king::after { background: var(--gold); }
.kpi.accent-orange::after { background: var(--orange); }
.kpi.accent-cyan::after { content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; opacity:.14; background:var(--cyan); }
.kpi.accent-lime::after { content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; opacity:.16; background:var(--lime); }

/* ===== Material blocks (task kinds) ===================== */
.blk {
  width: 20px; height: 20px; border:1.5px solid var(--ink); border-radius:3px; flex-shrink:0;
  box-shadow: inset -2px -2px 0 rgba(14,14,16,.22), inset 2px 2px 0 rgba(255,255,255,.28), 1.5px 1.5px 0 var(--ink);
  image-rendering: pixelated;
}
.blk.lg { width:30px; height:30px; }
.blk-wood    { background: repeating-linear-gradient(to bottom,#a06f3a 0 4px,#864f24 4px 6px,#b07a3e 6px 10px); }
.blk-cobble  { background:#6a6e78; }
.blk-iron    { background:#d4d6da; }
.blk-gold    { background:#f5d05a; }
.blk-diamond { background:#5be6e6; }
.blk-emerald { background:#2a8f3c; }
.blk-redstone{ background:#c0392b; }
.blk-obsidian{ background:#2b2440; }
.blk-grass   { background: linear-gradient(to bottom,#6dbe3e 0 30%,#5a8f24 30% 38%,#8b5a2b 38% 100%); }

/* ===== Progress bar ===================================== */
.bar { display:block; width:100%; height: 9px; background: var(--bg); border:1.5px solid var(--ink); border-radius:3px; position:relative; overflow:hidden; }
.bar > span { position:absolute; inset:0; width:var(--p,0%); background: var(--ink); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.bar > span.orange { background: var(--orange); } .bar > span.cyan { background: var(--cyan); }
.bar > span.lime { background: var(--lime); } .bar > span.gold { background: var(--gold); }
.bar > span.emerald { background: var(--emerald); } .bar > span.diamond { background: var(--diamond); }

/* ===== Tables =========================================== */
.tbl { width:100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th {
  font-family:"Silkscreen",monospace; font-size:8.5px; letter-spacing:.13em; text-transform:uppercase;
  color: var(--mute); text-align:left; padding:11px 14px; border-bottom:1.5px solid var(--ink); white-space:nowrap;
}
.tbl tbody td { padding:12px 14px; border-bottom:1.5px dashed var(--line); vertical-align:middle; }
.tbl tbody tr { transition: background .12s ease; cursor: pointer; }
.tbl tbody tr:hover { background: var(--elev); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl .num { font-family:"DM Mono",monospace; }
.tbl .rankcell { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:15px; }

/* ===== Avatars (miner skins) ============================ */
.ava { width:28px; height:28px; border:1.5px solid var(--ink); border-radius:6px; box-shadow:1.5px 1.5px 0 var(--ink); display:grid; place-items:center; font-family:"Silkscreen",monospace; font-size:11px; font-weight:700; flex-shrink:0; position:relative; }
.ava.lg { width:46px; height:46px; font-size:16px; border-radius:8px; box-shadow:2.5px 2.5px 0 var(--ink); }
.ava.king::after { content:"👑"; position:absolute; top:-12px; right:-8px; font-size:14px; transform:rotate(12deg); }
.minerline { display:flex; align-items:center; gap:10px; }
.minerline .mn { font-weight:700; }
.minerline .uid { font-family:"DM Mono",monospace; font-size:11px; color:var(--mute); }

/* ===== Activity feed ==================================== */
.feed { display:flex; flex-direction:column; }
.feed-row { display:flex; gap:13px; padding:13px 0; border-bottom:1.5px dashed var(--line); }
.feed-row:last-child { border-bottom:none; }
.feed-ico { width:30px; height:30px; border-radius:7px; border:1.5px solid var(--ink); box-shadow:1.5px 1.5px 0 var(--ink); display:grid; place-items:center; font-size:14px; flex-shrink:0; background: var(--paper); }
.feed-msg { font-size:13.5px; font-weight:600; line-height:1.35; }
.feed-meta { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; align-items:center; }
.feed-time { margin-left:auto; font-family:"DM Mono",monospace; font-size:11px; color:var(--mute); white-space:nowrap; }

/* ===== Chart ============================================ */
.chart-wrap { position:relative; width:100%; }
.chart-wrap svg { width:100%; display:block; overflow:visible; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:11.5px; color:var(--mute); }
.chart-legend i { display:inline-block; width:14px; height:7px; border:1.5px solid var(--ink); border-radius:2px; margin-right:6px; vertical-align:middle; }
.chart-tip {
  position:absolute; pointer-events:none; background:var(--ink); color:var(--bg);
  border-radius:7px; padding:9px 11px; font-size:11.5px; line-height:1.5; z-index:5;
  box-shadow:3px 3px 0 rgba(14,14,16,.25); transform:translate(-50%,-120%); white-space:nowrap; opacity:0; transition:opacity .1s;
}
.chart-tip b { font-family:"Bricolage Grotesque",sans-serif; }
.range-btns { display:flex; gap:6px; }
.range-btns button {
  font-family:"DM Mono",monospace; font-size:11px; padding:4px 10px; border:1.5px solid var(--ink);
  background:var(--paper); border-radius:6px; cursor:pointer; box-shadow:1.5px 1.5px 0 var(--ink); transition: all .12s ease;
}
.range-btns button:hover { background: var(--elev); }
.range-btns button.active { background: var(--ink); color: var(--bg); }

/* ===== Status badges ==================================== */
.status { display:inline-flex; align-items:center; gap:6px; font-family:"Silkscreen",monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px 2px; border:1.5px solid var(--ink); border-radius:5px; }
.status.active { background: var(--lime); }
.status.finished { background: var(--elev); color: var(--mute); }
.status.dethrone { background: var(--redstone); color:#fff; }

/* ===== King banner ===================================== */
.king-banner {
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(245,208,90,.35), transparent 55%),
    var(--paper);
  border:1.5px solid var(--ink); border-radius: var(--radius); box-shadow:4px 4px 0 var(--ink);
  padding: 20px 22px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.king-banner .crown-badge { width:58px; height:58px; border-radius:12px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--gold); display:grid; place-items:center; font-size:28px; }
.king-banner .meta { min-width:0; }
.king-banner .lab { font-family:"Silkscreen",monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
.king-banner .nm { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px; letter-spacing:-.03em; line-height:1; margin-top:4px; }
.king-banner .stat-row { display:flex; gap:26px; margin-left:auto; flex-wrap:wrap; }
.hotkey-chip { font-family:"DM Mono",monospace; font-size:11px; padding:5px 9px; border:1.5px solid var(--line2); border-radius:6px; background: var(--paper); color: var(--mute); }
.king-banner .btn svg { display:block; }
.king-banner .st .v { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:22px; }
.king-banner .st .k { font-family:"Silkscreen",monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:3px; }

/* ===== Dethrone gauge =================================== */
.gauge-row { display:flex; align-items:center; gap:10px; font-size:12px; }
.gauge { flex:1; height:14px; background:var(--bg); border:1.5px solid var(--ink); border-radius:4px; position:relative; overflow:hidden; }
.gauge .fill { position:absolute; inset:0; background: var(--orange); }
.gauge .king-mark { position:absolute; top:-3px; bottom:-3px; width:3px; background: var(--ink); }
.gauge .king-mark::after { content:"👑"; position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:11px; }

/* ===== Buttons ========================================== */
.btn {
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; cursor:pointer;
  color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); padding:8px 14px; border-radius:7px;
  box-shadow:3px 3px 0 var(--ink); transition: all .14s ease;
}
.btn:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn.orange { background:var(--orange); } .btn.cyan{ background:var(--cyan);} .btn.ghost{ box-shadow:none; }
.btn.sm { padding:5px 10px; font-size:12px; box-shadow:2px 2px 0 var(--ink); }

.back-link { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--mute); font-weight:600; cursor:pointer; margin-bottom:14px; }
.back-link:hover { color: var(--ink); }

/* ===== Misc ============================================= */
.muted { color: var(--mute); }
.mono { font-family:"DM Mono",monospace; }
.skeleton { background: linear-gradient(90deg, var(--elev) 25%, var(--elev2) 37%, var(--elev) 63%); background-size:400% 100%; animation: shimmer 1.4s infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.empty { text-align:center; padding:42px 18px; color:var(--mute); }
.empty .blk { margin:0 auto 14px; }

/* clickable per-validator reward cell in round standings */
td.vcell { cursor:pointer; white-space:nowrap; }
.vchip { display:inline-flex; align-items:center; gap:5px; font-family:"DM Mono",monospace; font-size:12.5px; padding:3px 9px; border:1.5px solid var(--line2); border-radius:6px; transition: all .12s ease; }
td.vcell:hover .vchip { border-color: var(--ink); background: var(--paper); box-shadow:2px 2px 0 var(--ink); transform: translate(-1px,-1px); }
.vchip.best { border-color: var(--ink); background: var(--lime); }
.vdot { width:8px; height:8px; border-radius:2px; border:1px solid var(--ink); flex-shrink:0; }

/* big outcome verdict badge */
.verdict { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--ink); border-radius:10px; box-shadow:3px 3px 0 var(--ink); }
.verdict .big { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:24px; letter-spacing:-.03em; line-height:1; }
.verdict.yes { background: var(--redstone); color:#fff; }
.verdict.yes .big { color:#fff; }
.verdict.no { background: var(--lime); }
.verdict .vico { font-size:26px; }

/* leaderboard podium — ordered #1 → #3 left to right */
.podium { position:relative; overflow:visible; cursor:pointer; }
.podium-gold   { background: linear-gradient(180deg,#fdf3d2,#fffaf0) !important; }
.podium-silver { background: linear-gradient(180deg,#edf0f3,#fffaf0) !important; }
.podium-bronze { background: linear-gradient(180deg,#f6e3cf,#fffaf0) !important; }
.podium.winner { border-color: var(--ink); animation: winnerglow 2.6s ease-in-out infinite; }
@keyframes winnerglow {
  0%,100% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(245,208,90,0); }
  50%     { box-shadow: 4px 4px 0 var(--ink), 0 0 20px 1px rgba(245,208,90,.6); }
}
.podium.winner:hover { transform: translate(-1px,-1px); }
.crown-float {
  position:absolute; top:-15px; left:14px; font-size:22px; z-index:3;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink));
  animation: crownbob 2.2s ease-in-out infinite; transform-origin:bottom center;
}
@keyframes crownbob {
  0%,100% { transform: translateY(0) rotate(-7deg); }
  50%     { transform: translateY(-5px) rotate(7deg); }
}

.tier-pips { display:inline-flex; gap:2px; }
.tier-pips i { width:5px; height:5px; background:var(--ink); border-radius:1px; }
.tier-pips i.off { background:var(--line2); opacity:.4; }

.hud-strip {
  display:flex; gap:8px; align-items:center; padding:10px 12px; background:var(--ink); border-radius:9px;
  border:1.5px solid var(--ink); box-shadow: 3px 3px 0 rgba(14,14,16,.25);
}
.hud-slot { width:38px; height:38px; border:1.5px solid rgba(255,255,255,.25); border-radius:5px; background:rgba(255,255,255,.06); display:grid; place-items:center; position:relative; }
.hud-slot .blk { box-shadow:none; }
.hud-slot .cnt { position:absolute; bottom:1px; right:3px; font-family:"Silkscreen",monospace; font-size:8px; color:#fff; }

.world-card { transition: transform .16s ease, box-shadow .16s ease; cursor:pointer; }
.world-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.world-sky { height:88px; border-bottom:1.5px solid var(--ink); position:relative; overflow:hidden; border-radius:9px 9px 0 0; }
.world-sky .sun { position:absolute; top:14px; right:18px; width:20px; height:20px; background:var(--gold); border:1.5px solid var(--ink); border-radius:3px; box-shadow:2px 2px 0 rgba(14,14,16,.2); }
.world-ground { position:absolute; left:0; right:0; bottom:0; height:26px; background: linear-gradient(to bottom,#6dbe3e 0 7px,#5a8f24 7px 11px,#8b5a2b 11px 100%); }

/* ===== Responsive ======================================= */
.sb-toggle { display:none; }
@media (max-width: 940px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .sb-toggle { display:grid; place-items:center; width:38px; height:38px; border:1.5px solid var(--ink); border-radius:7px; background:var(--paper); box-shadow:2px 2px 0 var(--ink); cursor:pointer; }
}

.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2,1fr);} .cols-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 720px) { .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } .content{ padding:18px 16px;} }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .span-2 { grid-column: span 1; } }