/* BukuNet — CRYO (Halo icy-blue, OG-Xbox console-OS). Theme = CSS vars, swappable. */

/* Font kit (from AWESOME FONTS!). Math Donuts = the BukuNet title face; others are
   available for per-game branding (used sparingly). */
@font-face { font-family: 'MathDonuts'; src: url('../assets/fonts/mathdonuts.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JimThorpe'; src: url('../assets/fonts/jimthorpe.ttf') format('truetype'); font-display: swap; }

:root, [data-theme="cryo"] {
  --bg:        #000000;
  --bg2:       #05070B;
  --panel:     rgba(10, 16, 24, 0.55);
  --panel-solid:#05070B;
  --edge:      #163346;
  --edge-hot:  #2E7FB0;
  --glow:      #5BC8FF;
  --glow-hot:  #BFEEFF;
  --accent:    #3AA8F0;
  --text:      #DCEEFF;
  --dim:       #6F93AE;
  --online:    #46D17A;
  --danger:    #FF5A4A;
  --scan:      rgba(91,200,255,0.04);
}
[data-theme="xbox"] { /* Xbox 360 lime-green blade skin */
  --bg:#06120A; --bg2:#0C1E10; --panel:rgba(40,110,30,0.24); --panel-solid:#0A1A0C;
  --edge:#234A14; --edge-hot:#4F9E22; --glow:#6FD41F; --glow-hot:#D6FF9C;
  --accent:#57B81C; --text:#E2FFCB; --dim:#8DBE7A; --online:#9BFF6A;
  --danger:#FF5A4A; --scan:rgba(111,212,31,0.05);
}
[data-theme="bios"] { /* OG Xbox green skin */
  --bg:#050A06; --bg2:#0A140C; --panel:rgba(30,90,40,0.26); --panel-solid:#0C1A10;
  --edge:#1E3A24; --edge-hot:#3DA050; --glow:#3DF07A; --glow-hot:#BFFFC8;
  --accent:#46D17A; --text:#CFFFE0; --dim:#7FB890; --online:#9BFF6A;
  --danger:#FF5A4A; --scan:rgba(61,240,122,0.04);
}
[data-theme="ember"] {
  --bg:#150B06; --bg2:#23120A; --panel:rgba(120,60,20,0.26); --panel-solid:#1E120A;
  --edge:#4A3020; --edge-hot:#C5601E; --glow:#FF8A3A; --glow-hot:#FFD8B0;
  --accent:#FF7A1A; --text:#FFE8D6; --dim:#C0997A; --online:#9BD86A;
  --danger:#FF4A4A; --scan:rgba(255,138,58,0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; } /* terminal: square everything */
/* JimThorpe is the display face everywhere; long sentences + inputs stay mono for legibility */
.hero-sub, .stub p, .card .muted, .err, .field, input, textarea { font-family: "Space Mono", ui-monospace, monospace !important; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Space Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ── smooth gradient background ── */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* ── app shell ── */
#app {
  position: fixed; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 52px 1fr;
  grid-template-areas: "topbar topbar" "rail stage";
}
#topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--edge);
  background: rgba(3, 6, 11, 0.72);
}
#brand {
  display: flex; align-items: baseline; gap: 2px; margin-right: 8px;
  font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: 15px; letter-spacing: 3px;
}
.brand-buku { color: var(--text); }
.brand-net { color: var(--glow); text-shadow: 0 0 12px var(--glow); }
#topbar-spacer { flex: 1; }
.topbar-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 1px; color: var(--dim);
  padding: 5px 10px; border: 1px solid transparent; border-radius: 2px;
  background: var(--panel);
}
.topbar-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }
#bb-chip { color: var(--glow-hot); }
.bb-coin { color: var(--glow); }
#clock { color: var(--text); }

/* ── left nav rail (blades / orb) ── */
#rail {
  grid-area: rail;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 0;
  border-right: 1px solid var(--edge);
  background: rgba(3, 6, 11, 0.6);
}
.rail-btn {
  width: 44px; height: 44px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid transparent; border-radius: 3px;
  font-size: 16px; transition: all .12s ease;
}
.rail-btn:hover, .rail-btn:focus, .rail-btn.sel { color: var(--text); border-color: var(--edge-hot); outline: none; }
.rail-btn.active {
  color: var(--glow-hot); border-color: var(--glow);
  box-shadow: 0 0 14px rgba(91,200,255,.35), inset 0 0 10px rgba(91,200,255,.12);
}

/* ── stage / views ── */
#stage { grid-area: stage; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; padding: 24px 32px; overflow-y: auto; animation: viewIn .25s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── library: hero (featured game as a hologram) ── */
.hero {
  position: relative; height: 44%; min-height: 232px; border-radius: 8px; overflow: hidden;
  border: 1px solid transparent; margin-bottom: 24px;
  background: rgba(5, 8, 13, 0.5);
  display: flex; align-items: center;
}
.hero-body { position: relative; padding: 0 44px; z-index: 2; max-width: 58%; }
.hero-tag { font-size: 10px; letter-spacing: 4px; color: var(--glow); margin-bottom: 10px; }
.hero-title { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: 46px; letter-spacing: 0; line-height: 1.05; color: var(--glow-hot); text-shadow: 0 0 18px rgba(91,200,255,.5); }
.hero-sub { margin: 14px 0 18px; color: var(--dim); font-size: 13px; max-width: 56ch; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; }
/* projected hologram on the right */
.hero-holo { position: absolute; right: 7%; top: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.hero-holo .emblem { font-family: "Space Mono", ui-monospace, monospace; font-size: 58px; color: var(--g, var(--glow)); text-shadow: 0 0 26px var(--g, var(--glow)), 0 0 64px var(--g, var(--glow)); opacity: .9; animation: holoFloat 5s ease-in-out infinite; }
.hero-holo .cone { width: 210px; height: 70px; margin-top: 18px; opacity: .22; background: linear-gradient(to bottom, var(--g, var(--glow)), transparent 80%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.hero-holo .base { width: 140px; height: 2px; margin-top: -2px; background: var(--g, var(--glow)); box-shadow: 0 0 16px var(--g, var(--glow)); border-radius: 2px; }

.btn {
  font-family: "Space Mono", monospace; font-weight: 700; cursor: pointer;
  font-size: 13px; letter-spacing: 2px;
  padding: 11px 22px; border-radius: 3px; transition: all .12s ease;
  background: var(--panel); color: var(--text); border: 1px solid transparent;
}
.btn:hover, .btn:focus, .btn.sel { border-color: var(--edge-hot); color: var(--glow-hot); outline: none; }
.btn-primary {
  background: var(--accent); color: #04121e;
  border-color: var(--glow);
  box-shadow: 0 0 18px rgba(91,200,255,.4);
}
.btn-primary:hover { color: #04121e; box-shadow: 0 0 26px rgba(91,200,255,.6); }

/* ── library: section + holographic tile grid ── */
.shelf-title { font-size: 11px; letter-spacing: 3px; color: var(--dim); margin: 0 0 14px; }
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding-bottom: 30px; }
.tile {
  position: relative; aspect-ratio: 4/3; cursor: pointer; border-radius: 8px; overflow: hidden;
  border: 1px solid transparent;
  background: rgba(5, 8, 13, 0.45);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tile:hover, .tile.lit, .tile.lit { transform: translateY(-5px); border-color: var(--g, var(--glow)); box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 22px var(--g, var(--glow)); outline: none; }
.tile:hover .holo-emblem, .tile.lit .holo-emblem, .tile.lit .holo-emblem { opacity: 1; }
/* hologram: emitter base → projection cone → floating emblem */
.holo-cone { position: absolute; left: 50%; bottom: 44px; width: 80%; height: 54%; transform: translateX(-50%); z-index: 1; pointer-events: none; opacity: .18; background: linear-gradient(to top, var(--g, var(--glow)), transparent 78%); clip-path: polygon(36% 100%, 64% 100%, 100% 0, 0 0); }
.holo-emblem { position: absolute; top: 28%; left: 0; right: 0; text-align: center; z-index: 2; font-family: "Space Mono", ui-monospace, monospace; font-size: 22px; letter-spacing: 1px; color: var(--g, var(--glow)); text-shadow: 0 0 12px var(--g, var(--glow)), 0 0 30px var(--g, var(--glow)); opacity: .88; animation: holoFloat 4.5s ease-in-out infinite; }
.holo-base { position: absolute; bottom: 42px; left: 24%; width: 52%; height: 2px; z-index: 2; background: var(--g, var(--glow)); box-shadow: 0 0 12px var(--g, var(--glow)); border-radius: 2px; }
.holo-tile-anim { position: absolute; top: 44%; left: 50%; z-index: 2; animation: holoFloatC 4.8s ease-in-out infinite; }
/* keeps the -50%/-50% centering while floating (plain holoFloat's transform would clobber it) */
@keyframes holoFloatC { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-5px); } }
.tile-label { position: relative; z-index: 3; padding: 10px; width: 100%; text-align: center; }
.tile-name { font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.tile-meta { font-size: 10px; color: var(--dim); letter-spacing: 1px; margin-top: 4px; }
.tile-meta .live { color: var(--online); }
.tile.soon { opacity: .45; cursor: default; }
.tile.soon:hover { transform: none; border-color: var(--edge); box-shadow: none; }
@keyframes holoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ── stub views ── */
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; gap: 14px; color: var(--dim); }
.stub-icon { font-size: 48px; color: var(--glow); text-shadow: 0 0 20px var(--glow); }
.stub h2 { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: 18px; letter-spacing: 3px; color: var(--text); }
.stub p { max-width: 44ch; font-size: 13px; line-height: 1.6; }

/* ── onboarding / modal ── */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(4,8,15,.86); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.card { width: min(420px, 92vw); background: var(--panel-solid); border: 1px solid var(--glow); border-radius: 6px; padding: 28px; box-shadow: 0 0 40px rgba(91,200,255,.25); }
.card h2 { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: 18px; letter-spacing: 3px; color: var(--glow-hot); margin-bottom: 6px; }
.card .muted { color: var(--dim); font-size: 12px; margin-bottom: 18px; }
.field { display: block; width: 100%; margin-bottom: 12px; padding: 11px 12px; background: var(--bg); border: 1px solid var(--edge); border-radius: 3px; color: var(--text); font-family: inherit; font-size: 13px; }
.field:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 10px rgba(91,200,255,.3); }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.link { color: var(--glow); cursor: pointer; font-size: 12px; }
.err { color: var(--danger); font-size: 12px; min-height: 16px; margin-bottom: 8px; }

/* detail / launch panel */
#detail-frame { position: fixed; inset: 0; z-index: 70; background: #000; display: none; } /* above reticle(60) + toast(40): no chrome can ever paint over a running game */
#detail-frame iframe { width: 100%; height: 100%; border: 0; }
#detail-frame .close { position: absolute; top: 12px; left: 12px; z-index: 2; opacity: .55; transition: opacity .15s; }
#detail-frame .close:hover { opacity: 1; }

/* IN-GAME: the launched game owns the screen — hide every BukuNet overlay that would
   otherwise paint over it (the reticle is z-index 60, above the frame's 30). */
body.in-game .reticle,
body.in-game #topbar,
body.in-game #rail { display: none !important; }
body.in-game .deck.launching { display: none; }

@media (max-width: 640px) {
  .hero-title { font-size: 22px; }
  #app { grid-template-columns: 52px 1fr; }
}

/* ── TITLES ──────────────────────────────────────────────────────────────────
   House title face = aquifer (clean). Per-game fonts come from catalog game.font
   as inline styles (which override this). ParadiZe is pinned to Math Donuts via
   its own game.font. Placed last so it beats the element-level Space Mono decls. */
#brand, .hero-title, .tile-name, .shelf-title, .stub h2, .card h2 {
  font-family: 'K_aquifer', 'MathDonuts', 'Space Mono', monospace;
}

/* ── spotlight removed + bigger centered holograms + rebucked logo ── */
.holo-cone, .holo-base, .hero-holo .cone, .hero-holo .base { display: none !important; }
.holo-tile-anim { top: 50% !important; }
#brand { font-family: 'K_rebucked', 'Space Mono', monospace; font-size: 17px; letter-spacing: 1px; }

/* ============================================================================
   CRYO CONTAINMENT DECK — Forerunner hard-light command OS (redesign blueprint)
   Appended last so it overrides earlier .hero/.tile rules.
   ============================================================================ */
/* .deck is also .view (absolute; inset:0; overflow-y:auto) — never override position or it stops scrolling */
.deck { padding: 20px 30px 44px; }
/* HUD hairline rails (one projected panel) */
.deck::before, .deck::after { content: ''; position: absolute; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, var(--edge), transparent); opacity: .6; pointer-events: none; }
.deck::before { top: 6px; } .deck::after { bottom: 16px; }

/* ── BAND 1: HERO CONTAINMENT BAY ── */
.bay { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); align-items: center; gap: 20px; min-height: 300px; height: 44vh; margin-bottom: 16px; overflow: hidden; }
.bay-copy { position: relative; z-index: 3; padding: 0 4px; }
.eyebrow { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 3px; color: var(--glow); text-transform: uppercase; margin-bottom: 10px; opacity: .9; }
.bay .hero-title { font-size: clamp(40px, 6vw, 70px); margin: 0; }
.bay .hero-sub { max-width: 52ch; }
.bay .hero-actions { margin-top: 6px; }
.ribbon { margin-top: 16px; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ribbon::first-letter { color: var(--online); }
.bay-core { position: relative; height: 100%; z-index: 2; }

/* cradle (crisp hard-light, NOT fuzzy neon) */
.cradle { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cradle::before { content: ''; position: absolute; width: min(440px, 92%); aspect-ratio: 1; left: 50%; top: 47%; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 2 92 26 92 74 50 98 8 74 8 26' fill='none' stroke='%235BC8FF' stroke-width='0.5'/%3E%3Cpolygon points='50 14 80 31.5 80 68.5 50 86 20 68.5 20 31.5' fill='none' stroke='%235BC8FF' stroke-width='0.3'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .4; animation: cradleSpin 44s linear infinite; }
.cradle::after { content: ''; position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); width: 150px; height: 2px; background: var(--glow); box-shadow: 0 0 18px var(--glow); }
.cradle .holo-host { position: relative; z-index: 2; }
@keyframes cradleSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* attract sheen (hero only) */
.sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(91,200,255,.05) 48%, transparent 64%); background-size: 250% 100%; animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -50% 0; } }

/* ── BAND 2: SECTOR HEADER ── */
.sector { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--edge); padding: 9px 2px 13px; margin-bottom: 16px; }
.sector-title { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 3px; color: var(--dim); }
.incoming-title { margin-top: 20px; border-top: 1px solid var(--edge); padding-top: 12px; }
.ticks { display: flex; gap: 8px; align-items: center; }
.tick { width: 18px; height: 3px; background: var(--g, var(--glow)); opacity: .3; transition: opacity .2s, box-shadow .2s; }
.tick.on { opacity: 1; box-shadow: 0 0 8px var(--g); }
.tick.hollow { background: transparent; border: 1px solid var(--dim); opacity: .4; }

/* ── BAND 3: CONTAINMENT CELLS ── */
.tile .holo-host { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.tile.lit .holo-host { animation: holoFloatC 4.8s ease-in-out infinite; }
.holo-host .holo-anim, .holo-host .holo-still { opacity: .72; transition: opacity .2s; }
.tile.lit .holo-host .holo-anim { opacity: 1; }
/* corner brackets — hidden at rest, snap bright on hover/focus (borders only on select) */
.tile .cb { position: absolute; width: 15px; height: 15px; border: 0 solid var(--g, var(--glow)); opacity: 0; transition: opacity .16s, width .16s, height .16s; z-index: 4; pointer-events: none; }
.cb-tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.cb-tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.cb-bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.cb-br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.tile:hover .cb, .tile.lit .cb, .tile.lit .cb { opacity: 1; width: 22px; height: 22px; box-shadow: 0 0 8px var(--g); }
/* plinth emitter line */
.tile .plinth { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); width: 46%; height: 2px; background: var(--g, var(--glow)); opacity: .22; transition: opacity .2s, box-shadow .2s; z-index: 3; }
.tile:hover .plinth, .tile.lit .plinth, .tile.lit .plinth { opacity: .9; box-shadow: 0 0 14px var(--g); }
/* one-shot scan-wipe on power-up */
.tile .scan { position: absolute; left: 0; right: 0; top: 0; height: 26%; z-index: 5; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(191,238,255,.45), transparent); }
.tile:hover .scan, .tile.lit .scan { animation: scanwipe .45s ease forwards; }
@keyframes scanwipe { 0% { transform: translateY(-110%); opacity: .85; } 100% { transform: translateY(420%); opacity: 0; } }
/* power-up in place: no card-lift (override earlier translateY), keep border+glow */
.tile:hover, .tile.lit, .tile.lit { transform: none; }
/* depth-of-field: when a cell is focused (gamepad), siblings recede */
.tile-grid:has(.tile.lit) .tile:not(.lit) { opacity: .5; filter: saturate(.65); }

/* sealed / coming-soon cores */
.sealed { font-family: "Space Mono", monospace; font-size: 56px; color: var(--dim); opacity: .35; display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; }
.tile.soon { opacity: .55; }
.tile.soon .tile-meta { color: var(--dim); }

/* ── THE FLYING RETICLE ── */
.reticle { position: fixed; z-index: 60; pointer-events: none; --r: var(--glow); opacity: 0;
  transition: left .13s cubic-bezier(.2,.85,.25,1), top .13s cubic-bezier(.2,.85,.25,1), width .13s cubic-bezier(.2,.85,.25,1), height .13s cubic-bezier(.2,.85,.25,1), opacity .2s; }
.reticle.no-anim { transition: opacity .2s; }
.reticle i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--r); filter: drop-shadow(0 0 4px var(--r)); }
.reticle .r-tl { top: -3px; left: -3px; border-top-width: 2px; border-left-width: 2px; }
.reticle .r-tr { top: -3px; right: -3px; border-top-width: 2px; border-right-width: 2px; }
.reticle .r-bl { bottom: -3px; left: -3px; border-bottom-width: 2px; border-left-width: 2px; }
.reticle .r-br { bottom: -3px; right: -3px; border-bottom-width: 2px; border-right-width: 2px; }
.reticle .r-lock { position: absolute; top: -15px; left: 0; font-family: "Space Mono", monospace; font-size: 8px; letter-spacing: 2px; color: var(--r); opacity: .85; }

/* ── STEP-INTO-CONTAINMENT LAUNCH ── */
.deck.launching { transform: scale(.93); opacity: 0; transition: transform .4s ease, opacity .4s ease; transform-origin: center 42%; }

/* ── perf / reduced-motion gates ── */
[data-perf="low"] .cradle::before, [data-perf="low"] .sheen, [data-perf="low"] .tile.lit .holo-host { animation: none; }
[data-perf="low"] .tile-grid:has(.tile.lit) .tile:not(.lit) { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .cradle::before, .sheen, .tile.lit .holo-host, .tile .scan { animation: none !important; }
  .reticle { transition: opacity .2s !important; }
}

/* responsive: 1-up grid on narrow */
@media (max-width: 720px) {
  .bay { grid-template-columns: 1fr; height: auto; }
  .bay-core { min-height: 240px; }
  .tile-grid { grid-template-columns: 1fr; }
}

/* ── SOCIAL: friends list manager ── */
.shelf-title.sub { margin-top: 22px; }
.friends-add { display: flex; gap: 10px; margin-bottom: 8px; max-width: 540px; }
.friends-add .field { flex: 1; margin: 0; }
.friends-list { display: flex; flex-direction: column; gap: 8px; max-width: 540px; }
/* friends — holographic roster rows with avatar discs */
.friend-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin-bottom: 6px; background: linear-gradient(90deg, color-mix(in srgb,var(--glow) 6%,rgba(5,8,13,.55)), rgba(5,8,13,.4)); border: 1px solid var(--edge); border-radius: 10px !important; transition: border-color .12s, box-shadow .12s; }
.friend-row:hover { border-color: var(--glow); box-shadow: 0 0 14px color-mix(in srgb,var(--glow) 25%,transparent); }
.friend-row.online { border-color: color-mix(in srgb,var(--online) 45%,var(--edge)); }
.friend-av { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50% !important; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: "K_rebucked","Space Mono",monospace; font-weight: 700; font-size: 15px; color: #061018; background: var(--edge); border: 1px solid var(--edge); }
.friend-av img { width: 100%; height: 100%; object-fit: cover; }
.friend-av.on { border-color: var(--online); box-shadow: 0 0 10px color-mix(in srgb,var(--online) 60%,transparent); }
.friend-av.on::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50% !important; background: var(--online); border: 2px solid var(--panel-solid); box-shadow: 0 0 6px var(--online); }
.friend-mid { flex: 1; min-width: 0; }
.friend-name { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-sub { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row.online .friend-sub { color: var(--online); }
.friend-acts { display: flex; align-items: center; gap: 5px; flex: none; }
.friend-act { padding: 5px 9px; font-size: 12px; min-width: 30px; border-radius: 8px !important; }
.friend-act.add { color: var(--online); border-color: color-mix(in srgb,var(--online) 45%,var(--edge)); }
.friend-act.accept { color: #061018; background: var(--online); border-color: var(--online); }
.friend-act.danger:hover { color: #ff8a8a; border-color: #ff6a6a; }
.friend-pending { font-family: "Space Mono", monospace; font-size: 9px; letter-spacing: 1px; color: var(--dim); padding: 0 6px; }
.friend-empty { color: var(--dim); font-size: 13px; padding: 12px 2px; }
.friend-sub.arcade { color: #6a9cff !important; }
.friend-sub.paradise { color: var(--glow) !important; }
.friend-sub.game { color: var(--glow-hot) !important; }

/* ── SOCIAL: chat + friends two-pane ── */
.social { height: 100%; display: flex; flex-direction: column; }
/* unified hub header: current server + switch */
.social-head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px 96px; border-bottom: 1px solid var(--edge); }
.social-server-ic { opacity: .7; }
.social-server { flex: 1; font-family: "K_rebucked","Space Mono",monospace; font-size: 17px; letter-spacing: 1px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-switch { font-size: 11px; padding: 6px 12px; white-space: nowrap; }
/* 3 panes: channels | chat/voice | friends */
.social-grid { display: grid; grid-template-columns: 190px minmax(0,1fr) 260px; gap: 0; flex: 1; min-height: 0; }
.social-channels { overflow-y: auto; border-right: 1px solid var(--edge); padding: 10px 8px; }
.social-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px 12px; }
.social-center .chat-log { flex: 1; }
.social-friends { border-left: 1px solid var(--edge); padding: 10px 10px 10px 14px; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; background: rgba(5,8,13,.5); border: 1px solid var(--edge); }
.chat-head { padding: 11px 15px; border-bottom: 1px solid var(--edge); font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 2px; color: var(--dim); flex: none; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 7px; }
.chat-msg { font-size: 13px; line-height: 1.45; }
.chat-user { font-weight: 700; margin-right: 7px; }
.chat-text { color: var(--text); word-break: break-word; }
.chat-msg.me .chat-text { color: var(--glow-hot); }
.chat-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--edge); flex: none; }
.chat-composer .field { flex: 1; margin: 0; }
.friends-pane { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.friends-pane .friends-add { margin-bottom: 4px; }
.friends-pane .friend-act { padding: 4px 10px; font-size: 13px; min-width: 30px; }
@media (max-width: 760px) {
  .social-grid { grid-template-columns: 1fr; grid-auto-rows: auto; overflow-y: auto; }
  .social-channels { border-right: none; border-bottom: 1px solid var(--edge); display: flex; flex-wrap: wrap; gap: 4px; }
  .social-center { min-height: 300px; }
  .social-friends { border-left: none; border-top: 1px solid var(--edge); max-height: 300px; }
  .social-head { padding-left: 88px; }
}

/* ── LIBRARY: 3D HOLOGRAM WHEEL ── */
.library3d { position: absolute; inset: 0; }
.wheel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wheel-booting { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 3px; color: var(--dim); }

/* info panel — lower-left overlay, reads over the wheel */
.wheel-info { position: absolute; left: 40px; bottom: 44px; max-width: 40%; z-index: 3; pointer-events: none; }
.wheel-info .btn { pointer-events: auto; }
.wheel-eyebrow { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 3px; color: var(--dim); margin-bottom: 10px; }
.wheel-title { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: 1px; text-shadow: 0 0 26px var(--g, var(--glow)); margin-bottom: 12px; }
.wheel-blurb { font-size: 14px; line-height: 1.5; color: var(--text); opacity: .82; max-width: 30ch; margin-bottom: 14px; }
.wheel-ribbon { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 2px; color: var(--online); margin-bottom: 16px; text-shadow: 0 0 10px var(--online); }
.wheel-actions .btn-primary { --g: var(--glow); border-color: var(--g); color: #02060c; background: var(--g); box-shadow: 0 0 24px color-mix(in srgb, var(--g) 55%, transparent); }
.wheel-actions .btn-primary:hover { filter: brightness(1.12); }

/* nav hint — lower-right */
.wheel-hint { position: absolute; right: 30px; bottom: 26px; z-index: 3; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); opacity: .65; }

@media (max-width: 760px) {
  .wheel-info { left: 18px; bottom: 22px; max-width: 64%; }
  .wheel-title { font-size: 30px; }
  .wheel-hint { display: none; }
}

/* ── NATIVE GAME SHELL ── */
.game-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--g, var(--glow)) 12%, #02060c) 0%, #02060c 60%, #000 100%);
  animation: gameIn .22s ease both; }
@keyframes gameIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.game-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 26px; border-bottom: 1px solid color-mix(in srgb, var(--g, var(--glow)) 35%, transparent); flex: none; }
.game-id { display: flex; flex-direction: column; gap: 3px; }
.game-title { font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--g, var(--glow)); text-shadow: 0 0 18px color-mix(in srgb, var(--g, var(--glow)) 60%, transparent); }
.game-status { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); min-height: 14px; }
.game-head-right { display: flex; align-items: center; gap: 16px; }
.game-balance { font-family: "Space Mono", monospace; font-size: 15px; color: var(--online); display: flex; align-items: center; gap: 5px; }
.game-balance .bb-coin { opacity: .85; }
.game-exit { font-size: 11px; padding: 7px 14px; }
.game-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }

/* focus ring (d-pad / gamepad selection) */
.game-overlay .gf { outline: 2px solid var(--g, var(--glow)); outline-offset: 2px; box-shadow: 0 0 22px color-mix(in srgb, var(--g, var(--glow)) 55%, transparent); }

/* ── BukuArcade (cloud PS2) ── */
.friend-status.arcade { color: var(--g, #2a52c8); }
.friend-status.paradise { color: var(--glow); }
.friend-join { padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #fff; background: #2a52c8; border-color: #2a52c8; }
.arcade-boot { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.arcade-boot-glyph { font-family: "Press Start 2P", monospace; font-size: 30px; letter-spacing: 4px; color: #2a52c8; text-shadow: 0 0 24px #2a52c8; }
.arcade-boot-msg { font-size: 15px; letter-spacing: 1px; }
.arcade-boot-sub { font-size: 11px; color: var(--dim); letter-spacing: 1px; }
.arcade-video { width: 100%; height: 100%; object-fit: contain; background: #000; image-rendering: pixelated; }
.game-overlay .game-body:has(.arcade-video) { padding: 0; }
.arcade-pick { width: 100%; max-width: 560px; }
.arcade-pick-head { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); margin-bottom: 10px; }
.arcade-pick-list { display: flex; flex-direction: column; gap: 8px; }
.arcade-pick-item { padding: 16px; font-size: 14px; text-align: left; }

/* ── RPS ── */
.rps-lobby { width: 100%; max-width: 560px; }
.rps-section { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); margin: 18px 2px 10px; }
.rps-section:first-child { margin-top: 0; }
.rps-stakes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rps-stake { padding: 18px 0; font-size: 16px; font-weight: 700; }
.rps-matchlist { display: flex; flex-direction: column; gap: 8px; }
.rps-join { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 14px; }
.rps-join-name { font-weight: 700; }
.rps-join-stake { font-family: "Space Mono", monospace; font-size: 12px; color: var(--online); }
.rps-empty { color: var(--dim); font-size: 13px; text-align: center; padding: 18px; border: 1px dashed var(--edge); }
.rps-waiting { text-align: center; margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rps-waiting-txt { font-family: "Space Mono", monospace; letter-spacing: 2px; color: var(--g, var(--glow)); animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.rps-play { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.rps-score { display: flex; align-items: center; gap: 26px; }
.rps-score-col { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .8; }
.rps-score-col.me { opacity: 1; }
.rps-score-name { font-size: 12px; letter-spacing: 2px; color: var(--dim); }
.rps-score-col.me .rps-score-name { color: var(--text); }
.rps-pips { display: flex; gap: 6px; }
.rps-pip { width: 12px; height: 12px; border: 1px solid var(--edge); border-radius: 50%; }
.rps-pip.on { background: var(--g, var(--glow)); border-color: var(--g, var(--glow)); box-shadow: 0 0 12px var(--g, var(--glow)); }
.rps-vs { font-family: "Space Mono", monospace; font-size: 26px; font-weight: 700; color: var(--text); }
.rps-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.rps-move { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 0; }
.rps-move.dim { opacity: .4; }
.rps-move-emoji { font-size: 52px; line-height: 1; }
.rps-move-label { font-size: 12px; letter-spacing: 2px; color: var(--dim); }

.rps-round, .rps-result { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rps-duel { display: flex; align-items: center; gap: 30px; }
.rps-throw { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 26px; border: 1px solid var(--edge); border-radius: 6px; transition: all .2s; }
.rps-throw.winner { border-color: var(--g, var(--glow)); box-shadow: 0 0 28px color-mix(in srgb, var(--g, var(--glow)) 45%, transparent); }
.rps-throw-emoji { font-size: 64px; line-height: 1; }
.rps-throw-name { font-size: 11px; letter-spacing: 2px; color: var(--dim); }
.rps-duel-x { font-family: "Space Mono", monospace; font-size: 16px; color: var(--dim); }
.rps-round-verdict { font-size: 26px; font-weight: 700; letter-spacing: 2px; }
.rps-round-verdict.win { color: var(--online); text-shadow: 0 0 18px var(--online); }
.rps-round-verdict.lose { color: #ff6b8a; }
.rps-round-verdict.tie { color: var(--dim); }
.rps-round-score { font-family: "Space Mono", monospace; font-size: 13px; color: var(--dim); letter-spacing: 2px; }

.rps-result-banner { font-size: 52px; font-weight: 700; letter-spacing: 4px; }
.rps-result-banner.win { color: var(--online); text-shadow: 0 0 34px var(--online); }
.rps-result-banner.lose { color: #ff6b8a; text-shadow: 0 0 30px rgba(255,107,138,.5); }
.rps-result-score { font-family: "Space Mono", monospace; color: var(--text); letter-spacing: 2px; }
.rps-result-payout { font-family: "Space Mono", monospace; font-size: 22px; color: var(--online); }
.rps-result-acts { display: flex; gap: 12px; margin-top: 8px; }

/* ── SNAKE ── */
.snake-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.snake-canvas { border: 1px solid color-mix(in srgb, var(--g, var(--glow)) 30%, transparent); background: rgba(2,8,5,.5); border-radius: 4px; }
.snake-intro, .snake-over { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.snake-intro-title, .snake-over-title { font-size: 40px; font-weight: 700; letter-spacing: 2px; color: var(--g, var(--glow)); text-shadow: 0 0 26px color-mix(in srgb, var(--g, var(--glow)) 55%, transparent); }
.snake-intro-sub { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--dim); }
.snake-over { position: absolute; inset: 0; background: rgba(2,6,12,.82); justify-content: center; }
.snake-over-score { font-family: "Space Mono", monospace; font-size: 22px; color: var(--text); }
.snake-over-best { font-family: "Space Mono", monospace; font-size: 13px; color: var(--dim); }
.snake-over-acts, .snake-intro .btn { margin-top: 6px; }
.snake-over-acts { display: flex; gap: 12px; }
.snake-wrap { position: relative; }

/* ── HANGMAN ── */
.hm-wrap { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hm-top { display: flex; gap: 24px; align-items: center; justify-content: center; }
.hm-figure { flex: none; }
.hm-info { display: flex; flex-direction: column; gap: 7px; }
.hm-hint { font-size: 16px; color: var(--text); font-style: italic; }
.hm-lives { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 2px; color: var(--dim); }
.hm-wrong { font-family: "Space Mono", monospace; font-size: 13px; color: #ff6b8a; letter-spacing: 2px; }
.hm-players { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); }
.hm-word { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hm-slot { width: 30px; height: 40px; border-bottom: 3px solid var(--edge); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--text); }
.hm-slot.on { border-color: var(--g, var(--glow)); color: var(--g, var(--glow)); text-shadow: 0 0 14px color-mix(in srgb, var(--g, var(--glow)) 50%, transparent); }
.hm-slot.missed { color: #ff6b8a; border-color: #ff6b8a; }
.hm-kb { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; width: 100%; max-width: 480px; }
.hm-key { padding: 10px 0; font-size: 14px; font-weight: 700; font-family: "Space Mono", monospace; background: rgba(5,8,13,.6); border: 1px solid var(--edge); color: var(--text); cursor: pointer; border-radius: 3px; }
.hm-key:hover:not(:disabled) { border-color: var(--g, var(--glow)); }
.hm-key.k-right { background: color-mix(in srgb, var(--online) 22%, transparent); color: var(--online); border-color: var(--online); }
.hm-key.k-wrong { background: rgba(255,107,138,.16); color: #ff6b8a; border-color: #ff6b8a; }
.hm-key:disabled { cursor: default; opacity: .8; }
.hm-banner { font-size: 30px; font-weight: 700; letter-spacing: 2px; }
.hm-banner.win { color: var(--online); text-shadow: 0 0 22px var(--online); }
.hm-banner.lose { color: #ff6b8a; }
.hm-note { font-family: "Space Mono", monospace; font-size: 12px; color: var(--dim); }
.hm-acts { display: flex; gap: 12px; }
.hm-lobby { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hm-lobby-title { font-size: 40px; font-weight: 700; letter-spacing: 2px; color: var(--g, var(--glow)); text-shadow: 0 0 24px color-mix(in srgb, var(--g, var(--glow)) 50%, transparent); }
.hm-lobby-players { font-family: "Space Mono", monospace; font-size: 13px; color: var(--dim); }
.game-overlay .hm-key.gf { outline: 2px solid var(--g, var(--glow)); outline-offset: 1px; }

/* ════════ MOBILE / PORTRAIT (phones — shareable link) ════════ */
.wheel-hint.touch { display: block !important; }   /* always show the swipe/tap hint on touch */

@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  /* wheel info → centered card pinned to the bottom, full width */
  .wheel-info { left: 50%; right: auto; transform: translateX(-50%); bottom: 92px; max-width: 90%; width: 90%; text-align: center; }
  .wheel-info .wheel-actions { justify-content: center; display: flex; }
  .wheel-title { font-size: 34px; }
  .wheel-blurb { max-width: 100%; margin-left: auto; margin-right: auto; }
  .wheel-hint { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; text-align: center; }
  .wheel-actions .btn-primary { padding: 13px 26px; font-size: 14px; }   /* fat finger target */

  /* topbar/rail trim for narrow screens */
  #topbar { padding: 0 12px; }
  #brand { font-size: 16px; }
  .topbar-chip { font-size: 10px; padding: 4px 7px; }

  /* native game shell fits the phone */
  .game-head { padding: 12px 14px; }
  .game-title { font-size: 18px; }
  .game-exit { font-size: 13px; padding: 8px 14px; }     /* tappable */
  .game-body { padding: 14px; }
  .rps-stakes { grid-template-columns: repeat(2, 1fr); }
  .rps-move { padding: 20px 0; }
  .rps-move-emoji { font-size: 44px; }
  .hm-kb { grid-template-columns: repeat(7, 1fr); max-width: 340px; }
  .hm-key { padding: 12px 0; }                            /* bigger tap targets */
  .hm-top { flex-direction: column; gap: 12px; }
  .rps-result-banner, .snake-over-title, .snake-intro-title { font-size: 40px; }
}

/* very small phones */
@media (max-width: 380px) {
  .wheel-title { font-size: 27px; }
  .rps-stakes { gap: 7px; }
  .hm-kb { grid-template-columns: repeat(6, 1fr); }
}

/* ════════ CARDS (Blackjack + Poker shared) ════════ */
.bj-card { width: 42px; height: 60px; background: linear-gradient(160deg,#fdfdff,#dfe6ee); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #11161d; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.45); position: relative; }
.bj-card.sm { width: 34px; height: 48px; }
.bj-card.red { color: #d62b45; }
.bj-card.back { background: repeating-linear-gradient(45deg,#0a2740,#0a2740 4px,#0e3354 4px,#0e3354 8px); border: 1px solid var(--g,var(--glow)); }
.bj-rank { font-size: 18px; line-height: 1; }
.bj-card.sm .bj-rank { font-size: 14px; }
.bj-suit { font-size: 15px; line-height: 1; }

/* ════════ BLACKJACK ════════ */
.bj-table { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 720px; }
.bj-dealer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bj-label { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 2px; color: var(--dim); }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bj-cards { display: flex; gap: 5px; min-height: 60px; }
.bj-total { font-family: "Space Mono", monospace; font-size: 13px; color: var(--text); }
.bj-seats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.bj-seat { flex: 1; min-width: 110px; max-width: 150px; padding: 10px; border: 1px solid var(--edge); border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; }
.bj-seat.me { border-color: var(--g,var(--glow)); box-shadow: 0 0 18px color-mix(in srgb,var(--g,var(--glow)) 30%,transparent); }
.bj-seat.active { background: color-mix(in srgb,var(--g,var(--glow)) 10%,transparent); }
.bj-seat-name { font-size: 11px; letter-spacing: 1px; color: var(--text); text-align: center; }
.bj-seat-meta { display: flex; gap: 6px; align-items: center; font-family: "Space Mono", monospace; font-size: 11px; }
.bj-bet { color: var(--online); }
.bj-outcome.win, .bj-outcome.blackjack { color: var(--online); font-weight: 700; }
.bj-outcome.lose, .bj-outcome.bust { color: #ff6b8a; }
.bj-outcome.push { color: var(--dim); }
.bj-wait { color: var(--dim); }
.bj-empty { color: var(--edge); font-size: 22px; }
.bj-sit { font-size: 12px; padding: 8px 14px; }
.bj-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 20px; }
.bj-betlabel, .bj-note { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--dim); width: 100%; text-align: center; }
.bj-chips { display: flex; gap: 8px; }
.bj-chip { padding: 12px 16px; font-weight: 700; }
.bj-act { min-width: 84px; }
.bj-lobby, .pk-lobby { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.bj-lobby-title, .pk-lobby-title { font-size: 40px; font-weight: 700; letter-spacing: 2px; color: var(--g,var(--glow)); text-shadow: 0 0 24px color-mix(in srgb,var(--g,var(--glow)) 50%,transparent); }
.bj-lobby-sub { font-size: 14px; color: var(--text); opacity: .8; }
.bj-acts { display: flex; gap: 12px; margin-top: 6px; }

/* ════════ POKER ════════ */
.pk-felt { width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pk-board { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 26px; background: radial-gradient(120% 120% at 50% 30%, color-mix(in srgb,var(--g,var(--glow)) 14%, #04130b), #04120a); border: 1px solid color-mix(in srgb,var(--g,var(--glow)) 30%,transparent); border-radius: 90px/60px; }
.pk-community { display: flex; gap: 6px; }
.pk-pot { font-family: "Space Mono", monospace; font-size: 14px; letter-spacing: 2px; color: var(--online); }
.pk-seats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.pk-seat { position: relative; min-width: 118px; padding: 9px 11px; border: 1px solid var(--edge); border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pk-seat.me { border-color: var(--g,var(--glow)); box-shadow: 0 0 16px color-mix(in srgb,var(--g,var(--glow)) 28%,transparent); }
.pk-seat.active { background: color-mix(in srgb,var(--g,var(--glow)) 12%,transparent); border-color: var(--g,var(--glow)); }
.pk-seat.folded { opacity: .42; }
.pk-dealer { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #11161d; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pk-name { font-size: 12px; color: var(--text); }
.pk-chips { font-family: "Space Mono", monospace; font-size: 12px; color: var(--online); }
.pk-pstate { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 1px; color: var(--amber,#ffb04a); }
.pk-hole { display: flex; gap: 4px; margin-top: 3px; min-height: 48px; }
.pk-sit { font-size: 12px; padding: 16px 12px; min-width: 118px; border-style: dashed; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 18px; }
.pk-fold { color: #ff6b8a; border-color: #ff6b8a55; }
.pk-allin { color: var(--online); border-color: var(--online); font-weight: 700; }
.pk-note { font-family: "Space Mono", monospace; font-size: 12px; color: var(--dim); width: 100%; text-align: center; }
.pk-showdown { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; padding: 16px 28px; border: 1px solid var(--g,var(--glow)); border-radius: 8px; background: rgba(4,16,10,.7); }
.pk-sd-title { font-size: 24px; font-weight: 700; letter-spacing: 3px; color: var(--g,var(--glow)); }
.pk-sd-win { font-family: "Space Mono", monospace; font-size: 14px; color: var(--online); }
.pk-section { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); margin-top: 6px; }
.pk-levels { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.pk-level { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pk-level-name { font-size: 16px; font-weight: 700; }
.pk-level-meta { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); }
@media (max-width: 720px) {
  .bj-card { width: 36px; height: 52px; } .bj-rank { font-size: 15px; }
  .bj-seat { min-width: 92px; } .pk-seat { min-width: 100px; }
  .pk-board { border-radius: 16px; }
}

/* ── ONBOARDING: phone-link login ── */
.qr-box { display: flex; justify-content: center; margin: 16px 0 10px; }
.qr-img { width: 188px; height: 188px; image-rendering: pixelated; border: 8px solid #fff; border-radius: 8px; background: #fff; }
.ob-or { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); margin-top: 6px; }
.ob-code { font-size: 32px; font-weight: 800; letter-spacing: 8px; color: var(--glow); text-shadow: 0 0 16px color-mix(in srgb, var(--glow) 55%, transparent); margin: 6px 0 12px; }
.ob-status { font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: 1px; color: var(--dim); margin-top: 8px; }
.ob-status.ok { color: var(--online); text-shadow: 0 0 10px var(--online); }
.ob-status.err { color: #ff6b8a; }
#onboarding .card .btn { font-size: 14px; }
#onboarding .card .field { padding: 14px; font-size: 16px; }   /* big touch targets for the keyboard fallback */

/* ── ONBOARDING: gamepad on-screen keyboard ── */
.card.ob2 { max-width: 540px; width: 94%; }
.ob-field { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 7px 0; background: #04101c; border: 1px solid #1d3a52; border-radius: 8px; cursor: pointer; }
.ob-flabel { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); width: 84px; flex: none; }
.ob-fval { font-size: 16px; color: var(--text); word-break: break-all; }
.ob-btn { width: 100%; margin-top: 8px; font-size: 13px; }
.ob-btn.ob-sm { font-size: 11px; opacity: .8; padding: 8px; }
.ob-focus { outline: 2px solid var(--glow); outline-offset: 2px; box-shadow: 0 0 18px color-mix(in srgb, var(--glow) 45%, transparent); }
.ob-hint { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); text-align: center; margin-top: 14px; }
.ob-kbd-label { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); margin-top: 4px; }
.ob-kbd-disp { font-size: 22px; color: var(--glow); min-height: 30px; padding: 8px 4px; word-break: break-all; text-shadow: 0 0 12px color-mix(in srgb, var(--glow) 40%, transparent); }
.ob-kbd { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ob-krow { display: flex; gap: 6px; justify-content: center; }
.ob-key { flex: 1; min-width: 0; padding: 12px 0; font-size: 16px; font-weight: 700; font-family: "Space Mono", monospace; background: rgba(8,16,26,.85); border: 1px solid #1d3a52; color: var(--text); border-radius: 6px; cursor: pointer; }
.ob-key.wide { flex: 6; }
.ob-key.done { flex: 4; background: color-mix(in srgb, var(--online) 22%, transparent); border-color: var(--online); color: var(--online); }
.ob-key.on { background: color-mix(in srgb, var(--glow) 28%, transparent); border-color: var(--glow); color: var(--glow); }
.ob-key.ob-focus { outline: 2px solid var(--glow); outline-offset: 1px; background: color-mix(in srgb, var(--glow) 18%, transparent); }
@media (max-width: 560px) { .ob-key { padding: 10px 0; font-size: 14px; } .card.ob2 { padding: 16px; } }

/* ── APPS DRAWER (native launcher) ── */
.apps-view { position: absolute; inset: 0; overflow-y: auto; padding: 18px 22px 40px; }
.apps-title { font-size: 26px; font-weight: 700; letter-spacing: 2px; color: var(--glow); text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 45%, transparent); margin-bottom: 6px; }
.apps-section { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--dim); margin: 18px 2px 12px; }
.apps-empty { white-space: pre-line; color: var(--dim); font-size: 14px; line-height: 1.6; text-align: center; padding: 40px 20px; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 14px; }
.app-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; background: rgba(5,12,20,.5); border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.app-tile:hover { border-color: var(--edge); }
.app-tile.sel { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 10%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--glow) 35%, transparent); }
.app-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--glow); background: rgba(255,255,255,.04); border-radius: 14px; overflow: hidden; }
.app-icon img { width: 56px; height: 56px; object-fit: contain; }
.app-label { font-size: 11px; color: var(--text); text-align: center; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.app-star { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; background: rgba(2,6,12,.6); border: 0; border-radius: 50%; color: var(--dim); font-size: 15px; cursor: pointer; line-height: 1; }
.app-star.on { color: #ffd24a; text-shadow: 0 0 10px rgba(255,210,74,.6); }
.apps-hint { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); text-align: center; margin-top: 26px; }
.rom-sys { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; opacity: .8; }
/* BIG cover-art cards — ~3 per row on the RG (≈689px stage); cover fills the column width */
.roms-view .apps-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.rom-tile { padding: 12px 10px 14px; gap: 10px; }
.rom-tile .app-icon { width: 100%; height: auto; aspect-ratio: 5 / 7; border-radius: 10px; background: rgba(255,255,255,.04); }
.rom-tile .app-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
/* always show the FULL game name in the Games tab — no 2-line clamp / ellipsis — and bigger */
.rom-tile .app-label { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; font-size: 15px; line-height: 1.3; }
/* roms-view: when the per-row count is set inline, override the auto-fill default */
.roms-view .apps-grid[style*="grid-template-columns"] { grid-template-columns: inherit; }
@media (max-width: 720px) {
  .rom-tile .app-label { font-size: 14px; }
}
@media (max-width: 720px) { .apps-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 10px; } .app-icon, .app-icon img { width: 48px; height: 48px; } }

/* ── Games-tab header controls: GRID/WHEEL toggle + per-row density ── */
.roms-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.roms-controls { display: flex; align-items: center; gap: 14px; }
.roms-modes { display: flex; gap: 0; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.rm-mode { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; padding: 7px 13px; background: transparent; color: var(--dim); border: 0; cursor: pointer; }
.rm-mode.on { background: var(--glow); color: #02060c; font-weight: 700; }
.roms-cols { display: flex; align-items: center; gap: 8px; }
.rc-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--edge); background: rgba(5,12,20,.5); color: var(--glow); font-size: 18px; line-height: 1; cursor: pointer; }
.rc-btn:active { background: color-mix(in srgb, var(--glow) 18%, transparent); }
.rc-count { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); min-width: 54px; text-align: center; }

/* ── Games-tab WHEEL mode: per-console hologram wheel (centred, full-view screenshot backdrop) ── */
.roms-view.wheel-mode { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
/* full-view game-screenshot backdrop (z0) + bottom black scrim for legible text (z1) */
.roms-wheel-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  filter: blur(13px) saturate(1.2) brightness(.62); transform: scale(1.1); opacity: 0; transition: opacity .5s ease; }
.roms-wheel-bg.on { opacity: 1; }
.roms-wheel-bg.snap { filter: saturate(1.12) brightness(.72); transform: none; }   /* real screenshot → no blur, sharp */
.roms-wheel-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(2,6,12,.55) 0%, rgba(2,6,12,.1) 20%, transparent 44%, rgba(2,6,12,.8) 84%, rgba(0,0,0,.96) 100%); }
/* keep all content above the backdrop */
.roms-view.wheel-mode .roms-head,
.roms-view.wheel-mode .roms-console-tabs,
.roms-view.wheel-mode .roms-wheel,
.roms-view.wheel-mode .roms-wheel-info,
.roms-view.wheel-mode .wheel-hint-roms { position: relative; z-index: 2; }
.roms-console-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; flex: none; }
.rct { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(5,12,20,.55); color: var(--dim); cursor: pointer; }
.rct.on { border-color: var(--g, var(--glow)); color: var(--text); background: color-mix(in srgb, var(--g, var(--glow)) 20%, rgba(2,6,12,.6)); box-shadow: 0 0 14px color-mix(in srgb, var(--g, var(--glow)) 30%, transparent); }
.roms-wheel { flex: 1 1 auto; min-height: 0; margin: 0 -22px; }
.roms-wheel .wheel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.roms-wheel-info { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 18px 6px; text-align: center; }
.rw-title { font-family: 'K_rebucked', 'Space Mono', monospace; font-size: clamp(24px, 4.8vw, 44px); line-height: 1.05; color: var(--g, var(--glow)); text-shadow: 0 0 24px var(--g, var(--glow)), 0 2px 14px rgba(0,0,0,.95); }
.rw-blurb { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--text); opacity: .85; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.rw-play { margin-top: 6px; --g: var(--glow); border-color: var(--g); color: #02060c; background: var(--g); box-shadow: 0 0 22px color-mix(in srgb, var(--g) 45%, transparent); }
.wheel-hint-roms { flex: none; margin: 2px 0 8px; }

/* ── WHEEL: legibility scrim behind the info text (tasteful, holo stays clean) ── */
.wheel-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(2,6,12,.92) 0%, rgba(2,6,12,.6) 14%, rgba(2,6,12,.14) 32%, transparent 48%),
    radial-gradient(130% 80% at 16% 96%, rgba(2,6,12,.62) 0%, transparent 56%);
}
/* extra contrast on the text itself (dark halo under the accent glow) */
.wheel-title { text-shadow: 0 0 26px var(--g, var(--glow)), 0 2px 10px rgba(0,0,0,.85); }
.wheel-blurb { opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.wheel-eyebrow, .wheel-hint { text-shadow: 0 1px 5px rgba(0,0,0,.9); }
@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  /* phones: info is bottom-centered → center the radial darkening too */
  .wheel-scrim { background:
    linear-gradient(to top, rgba(2,6,12,.95) 0%, rgba(2,6,12,.68) 18%, rgba(2,6,12,.2) 38%, transparent 54%),
    radial-gradient(150% 60% at 50% 100%, rgba(2,6,12,.6) 0%, transparent 60%); }
}

/* ── WHEEL LAYOUT v2: text gets its OWN zone, holograms get theirs (no overlap) ── */
.library3d { position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(250px, 33%) 1fr; grid-template-areas: "info wheel"; }
.wheel-canvas { position: relative; inset: auto; grid-area: wheel; width: 100%; height: 100%; display: block; }
.wheel-info { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none;
  grid-area: info; max-width: none; width: auto; align-self: center; justify-self: stretch;
  padding: 0 16px 0 clamp(20px, 4vw, 46px); text-align: left; z-index: 3; }
.wheel-info .wheel-actions { justify-content: flex-start; }
.wheel-scrim { position: relative; inset: auto; grid-area: info; z-index: 2; align-self: stretch; justify-self: stretch;
  background: linear-gradient(to right, rgba(2,6,12,.55) 0%, rgba(2,6,12,.2) 72%, transparent 100%); }
.wheel-hint { grid-area: wheel; position: absolute; right: 24px; left: auto; bottom: 16px; transform: none; }

@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  .library3d { grid-template-columns: 1fr; grid-template-rows: 1.4fr auto; grid-template-areas: "wheel" "info"; }
  .wheel-info { align-self: end; justify-self: stretch; text-align: center; max-width: none; width: auto;
    padding: 6px 18px max(16px, env(safe-area-inset-bottom)); }
  .wheel-info .wheel-actions { justify-content: center; }
  .wheel-scrim { grid-area: info; background: linear-gradient(to top, rgba(2,6,12,.6) 0%, rgba(2,6,12,.12) 82%, transparent 100%); }
  .wheel-hint { grid-area: wheel; right: 50%; transform: translateX(50%); bottom: 10px; }
  .wheel-title { font-size: 30px; }
}

/* ── WHEEL LAYOUT v3: corner zones (no clip) — title TL big · holo TR big · desc BL · INITIATE BR ── */
.library3d { position: absolute; inset: 0; overflow: hidden; display: grid;
  grid-template-columns: minmax(220px, 0.95fr) 1.3fr; grid-template-rows: 1fr auto;
  grid-template-areas: "title wheel" "desc action"; }
.wheel-canvas { position: relative; inset: auto; grid-area: wheel; width: 100%; height: 100%; display: block; }
.wheel-scrim { display: none; }                       /* zones don't overlap the holo → no scrim */
.wheel-zone { position: relative; z-index: 3; min-width: 0; }
.wheel-title-zone { grid-area: title; align-self: center; justify-self: start; padding: 0 8px 0 clamp(18px, 3.5vw, 46px); }
.wheel-desc-zone { grid-area: desc; align-self: end; justify-self: start; padding: 0 12px 24px clamp(18px, 3.5vw, 46px); max-width: 44ch; }
.wheel-action-zone { grid-area: action; align-self: end; justify-self: end; padding: 0 clamp(18px, 3vw, 40px) 24px 0; }
.wheel-title { font-size: clamp(34px, 5.6vw, 70px); line-height: 1.02; margin-bottom: 0; }
.wheel-eyebrow { margin-bottom: 8px; }
.wheel-blurb { margin-bottom: 12px; }
.wheel-action-zone .btn-primary { --g: var(--glow); border-color: var(--g); color: #02060c; background: var(--g);
  box-shadow: 0 0 24px color-mix(in srgb, var(--g) 55%, transparent); padding: 14px 30px; font-size: 14px; white-space: nowrap; }
.wheel-action-zone .btn-primary:hover { filter: brightness(1.12); }
.wheel-hint { grid-area: wheel; position: absolute; right: 22px; left: auto; bottom: 14px; transform: none; }

@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
  .library3d { grid-template-columns: 1fr; grid-template-rows: 1.25fr auto auto auto;
    grid-template-areas: "wheel" "title" "desc" "action"; }
  .wheel-title-zone { align-self: start; justify-self: center; text-align: center; padding: 2px 16px 0; }
  .wheel-desc-zone { align-self: start; justify-self: center; text-align: center; padding: 6px 18px; max-width: 100%; }
  .wheel-action-zone { align-self: start; justify-self: center; padding: 2px 18px max(16px, env(safe-area-inset-bottom)); }
  .wheel-title { font-size: clamp(28px, 8vw, 42px); }
  .wheel-hint { grid-area: wheel; right: 50%; transform: translateX(50%); bottom: 8px; }
}

/* ── keep the corner-zone wheel layout on ALL landscape screens (incl. the narrow RG406V 640×480) ── */
@media (orientation: landscape) {
  .library3d { grid-template-columns: minmax(200px, 0.95fr) 1.3fr; grid-template-rows: 1fr auto; grid-template-areas: "title wheel" "desc action"; }
  .wheel-title-zone { align-self: center; justify-self: start; text-align: left; padding: 0 8px 0 clamp(16px, 3vw, 42px); }
  .wheel-desc-zone { align-self: end; justify-self: start; text-align: left; padding: 0 12px 18px clamp(16px, 3vw, 42px); max-width: 42ch; }
  .wheel-action-zone { align-self: end; justify-self: end; text-align: right; padding: 0 clamp(16px, 2.5vw, 36px) 18px 0; }
  .wheel-title { font-size: clamp(30px, 5vw, 64px); }
  .wheel-hint { right: 20px; left: auto; bottom: 12px; transform: none; }
}

/* ── WHEEL v4: kill the layout shift (FIXED bottom band + clamped description) ── */
.wheel-blurb { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (orientation: landscape) {
  .library3d { grid-template-rows: 1fr 86px; }   /* fixed → switching games never reflows the wheel/holo */
  .wheel-desc-zone { align-self: center; padding: 0 12px 0 clamp(16px, 3vw, 42px); }
  .wheel-action-zone { align-self: center; padding: 0 clamp(16px, 2.5vw, 36px) 0 0; }
}

/* ── WHEEL v5: FULL-BLEED canvas (holos never clip at a column) + corner text overlays ── */
.library3d { position: absolute; inset: 0; overflow: hidden; display: block; }   /* no grid → no "black box" column */
.wheel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.wheel-scrim { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; background:
  linear-gradient(100deg, rgba(2,6,12,.72) 0%, rgba(2,6,12,.28) 24%, transparent 48%),
  linear-gradient(to top, rgba(2,6,12,.6) 0%, rgba(2,6,12,.1) 18%, transparent 34%); }
.wheel-zone { position: absolute; z-index: 3; }
/* default = landscape corners */
.wheel-title-zone { left: clamp(18px,3.5vw,46px); top: clamp(16px,10vh,84px); transform: none; right: auto; bottom: auto; max-width: 42%; padding: 0; text-align: left; align-self: auto; justify-self: auto; }
.wheel-desc-zone  { left: clamp(18px,3.5vw,46px); bottom: 22px; top: auto; right: auto; max-width: 40%; padding: 0; text-align: left; align-self: auto; justify-self: auto; }
.wheel-action-zone{ right: clamp(18px,3vw,40px); bottom: 22px; left: auto; top: auto; padding: 0; text-align: right; align-self: auto; justify-self: auto; }
.wheel-hint { position: absolute; right: 22px; left: auto; bottom: 6px; transform: none; z-index: 3; }

@media (orientation: portrait), (max-width: 560px) {
  .wheel-title-zone { left: 0; right: 0; top: auto; bottom: 128px; transform: none; max-width: 100%; text-align: center; padding: 0 16px; }
  .wheel-desc-zone  { left: 0; right: 0; bottom: 82px; max-width: 100%; text-align: center; padding: 0 18px; }
  .wheel-action-zone{ left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); text-align: center; }
  .wheel-scrim { background: linear-gradient(to top, rgba(2,6,12,.78) 0%, rgba(2,6,12,.15) 30%, transparent 46%); }
  .wheel-hint { right: 50%; transform: translateX(50%); bottom: 4px; }
  .wheel-title { font-size: clamp(28px, 8vw, 40px); }
}

/* ── ROM PICKER ── */
.rom-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 580px; max-height: 70vh; overflow-y: auto; }
.rom-item { text-align: left; justify-content: flex-start; padding: 13px 16px; font-size: 15px; }
.rom-name { font-weight: 600; }
.rom-empty { color: var(--dim); text-align: center; padding: 30px; }
.rom-back { margin-top: 14px; align-self: center; }

/* ── HOME dashboard (horizontal section wheel) — replaces the left rail ── */
#app { grid-template-columns: 1fr; grid-template-areas: "topbar" "stage"; }
#rail { display: none !important; }
.home-view { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.home-brand { text-align: center; font-family: 'K_rebucked', 'Space Mono', monospace; font-size: clamp(20px, 4.2vw, 36px); letter-spacing: 3px; padding: 14px 0 0; flex: none; }
.home-brand .brand-buku { color: var(--text); }
.home-brand .brand-net { color: var(--glow); text-shadow: 0 0 16px var(--glow); }
.home-wheel { position: relative; flex: 1 1 auto; min-height: 0; }
.home-wheel .wheel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-info { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 18px 8px; text-align: center; }
.home-title { font-family: 'K_rebucked', 'Space Mono', monospace; font-size: clamp(26px, 5.6vw, 52px); line-height: 1.04; color: var(--g, var(--glow)); text-shadow: 0 0 26px var(--g, var(--glow)), 0 2px 12px rgba(0,0,0,.85); }
.home-blurb { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--dim); }
.home-enter { margin-top: 6px; --g: var(--glow); border-color: var(--g); color: #02060c; background: var(--g); box-shadow: 0 0 22px color-mix(in srgb, var(--g) 45%, transparent); }
.home-hint { flex: none; margin: 2px 0 10px; }

/* desktop "back to menu" button (hidden on the handheld, which uses Ⓑ) */
#home-btn { position: fixed; top: 60px; left: 16px; z-index: 30; display: none; align-items: center; gap: 6px;
  font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 2px; padding: 9px 16px;
  background: var(--panel, rgba(7,16,26,.8)); color: var(--glow); border: 1px solid var(--edge); border-radius: 8px;
  cursor: pointer; backdrop-filter: blur(6px); transition: background .12s, box-shadow .12s; }
#home-btn:hover { background: color-mix(in srgb, var(--glow) 16%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--glow) 35%, transparent); }

/* BukuPad tool tile (Apps ▸ Buku Tools) — a glowing standout card */
.bukupad-tile { position: relative; border-color: color-mix(in srgb, var(--glow) 55%, transparent) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 16%, transparent), rgba(7,16,26,.6)) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--glow) 22%, transparent); }
.bukupad-tile:hover, .bukupad-tile:focus, .bukupad-tile.sel {
  box-shadow: 0 0 34px color-mix(in srgb, var(--glow) 45%, transparent); transform: translateY(-2px); }
.bukupad-icon { font-size: 38px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--glow) 60%, transparent)); }
.app-sublabel { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: color-mix(in srgb, var(--glow) 80%, #8fb6cc); margin-top: 2px; opacity: .85; }

/* ── NETPLAY hub ─────────────────────────────────────────────────────────── */
.np-sub { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: color-mix(in srgb, var(--glow) 70%, #8fb6cc); opacity: .8; margin-top: 4px; }
.np-tile .np-badge { position: absolute; top: 6px; left: 6px; font-family: "Space Mono", monospace; font-size: 9px;
  letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; background: rgba(2,8,14,.72);
  color: var(--g, var(--glow)); border: 1px solid color-mix(in srgb, var(--g, var(--glow)) 55%, transparent);
  text-shadow: 0 0 8px var(--g, var(--glow)); }
.apps-section { --g: var(--glow); }
/* host/join overlay */
.np-session { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.np-via { font-family: "Space Mono", monospace; font-size: 13px; letter-spacing: 1px; color: var(--g, var(--glow));
  text-shadow: 0 0 10px var(--g, var(--glow)); }
.np-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.np-steps li { font-family: "Space Mono", monospace; font-size: 12px; line-height: 1.45; color: #cfe6f4; opacity: .9; }
.np-actions { display: flex; gap: 12px; margin-top: 4px; }
.np-act { flex: 1; font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: 2px; padding: 12px 0;
  border-radius: 8px; cursor: pointer; background: rgba(2,8,14,.55);
  border: 1px solid color-mix(in srgb, var(--g, var(--glow)) 50%, transparent); color: var(--g, var(--glow)); }
.np-act.primary { background: color-mix(in srgb, var(--g, var(--glow)) 20%, rgba(2,8,14,.55)); color: var(--glow-hot); }
.np-act:hover, .np-act:focus { border-color: var(--g, var(--glow)); box-shadow: 0 0 18px color-mix(in srgb, var(--g, var(--glow)) 45%, transparent); outline: none; }
.np-friends-h { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: #7fd88f;
  border-top: 1px solid rgba(91,200,255,.12); padding-top: 10px; }
.np-back { align-self: flex-start; margin-top: 6px; opacity: .7; }

/* Netplay grid — same responsive box-art sizing as the Games tab (not giant 3-col on desktop) */
.netplay-view .apps-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }

/* Netplay: desktop "Get BukuDolphin" note */
.np-getdolphin { margin-top: 12px; font-size: 12px; color: #8fb6cc; }
.np-getdolphin a { color: var(--glow); text-decoration: underline; }

/* Netplay: desktop "Get BukuDolphin" download panel */
.np-get { margin: 6px 2px 22px; padding: 20px; border: 1px solid color-mix(in srgb, var(--glow) 28%, transparent);
  border-radius: 14px; background: linear-gradient(160deg, rgba(8,20,30,.72), rgba(2,8,14,.5)); }
.np-get-h { font-family: "Space Mono", monospace; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--glow-hot); }
.np-get-sub { font-size: 12.5px; color: #a9c8da; margin-top: 6px; max-width: 60ch; }
.np-dl-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 4px; }
.np-dl { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1; padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--glow) 35%, transparent); border-radius: 11px; text-decoration: none;
  background: rgba(2,8,14,.55); transition: border-color .15s, box-shadow .15s, transform .1s; }
.np-dl:hover { border-color: var(--glow); box-shadow: 0 0 20px color-mix(in srgb, var(--glow) 40%, transparent); transform: translateY(-1px); }
.np-dl.primary { background: color-mix(in srgb, var(--glow) 18%, rgba(2,8,14,.55)); border-color: var(--glow); }
.np-dl.soon { opacity: .5; pointer-events: none; cursor: default; }
.np-dl-os { font-family: "Space Mono", monospace; font-weight: 700; font-size: 15px; letter-spacing: 1px; color: var(--glow-hot); }
.np-dl-sub { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #8fb6cc; }
.np-how { margin-top: 16px; }
.np-how-h { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--glow); margin-bottom: 6px; }
.np-how-steps { margin: 0; padding-left: 20px; font-size: 12.5px; color: #bcd6e6; line-height: 1.6; }
.np-how-steps li { margin-bottom: 3px; }
.np-legal { margin-top: 16px; padding: 11px 13px; border-radius: 9px; font-size: 11.5px; line-height: 1.55;
  color: #c7b78a; background: rgba(40,30,6,.32); border: 1px solid rgba(180,150,60,.28); }
.np-legal strong { color: #e8d49a; }

/* ── shared motion tokens (Xbox-Live snappiness; replaces scattered .12/.16/.25/.42s literals) ── */
:root { --t-snappy:.12s; --t-focus:.16s; --t-glide:.25s; --t-launch:.42s; }

/* ── DMs blade ── */
.rail-btn { position: relative; }
.rail-btn[data-unread]:not([data-unread=""])::after {
  content: attr(data-unread); position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 9px; line-height: 15px;
  text-align: center; box-shadow: 0 0 8px rgba(255,90,74,.6);
}
.dm-grid { grid-template-columns: 1fr 300px; }
.dm-convo { cursor: pointer; flex-wrap: wrap; transition: border-color var(--t-snappy); }
.dm-convo.sel { border-color: var(--glow); box-shadow: inset 0 0 10px rgba(91,200,255,.12); }
.dm-convo .friend-status { flex: 1; color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger);
  color: #fff; font-size: 10px; line-height: 16px; text-align: center; box-shadow: 0 0 8px rgba(255,90,74,.5); }
.chat-head { font-size: 11px; letter-spacing: 2px; color: var(--dim); padding: 11px 14px; border-bottom: 1px solid var(--edge); flex: none; }

/* ═══ Xbox-360 guide-blade CALLING ═══ */
@keyframes callpulse { 0%,100% { box-shadow: 0 0 18px rgba(91,200,255,.3); } 50% { box-shadow: 0 0 30px rgba(91,200,255,.6); } }
@keyframes talkring  { 0%,100% { box-shadow: 0 0 14px rgba(70,209,122,.5); } 50% { box-shadow: 0 0 34px rgba(70,209,122,.95); } }
@keyframes guideIn   { from { opacity: 0; transform: translateY(-26px) scale(.985); } to { opacity: 1; transform: none; } }

/* cinematic incoming/outgoing takeover (dashboard) */
.guide-overlay { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 30%, rgba(8,20,32,.55), rgba(2,6,12,.86));
  backdrop-filter: blur(3px); animation: guideIn var(--t-glide, .25s) ease; }

/* the gamercard — one card, state skins */
.gamercard { position: relative; overflow: hidden; background: var(--panel-solid);
  border: 1px solid var(--glow); border-radius: 12px;
  box-shadow: 0 0 40px rgba(91,200,255,.28), inset 0 0 26px rgba(91,200,255,.06);
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gc-media { width: 100%; display: flex; justify-content: center; position: relative; }
.gc-glow { width: 96px; height: 96px; border-radius: 10px; box-shadow: 0 0 22px rgba(91,200,255,.4); }
.gc--ringing .gc-glow, .gc--calling .gc-glow { animation: callpulse 1.6s ease-in-out infinite; }
.gc-glow.talking { animation: talkring .45s ease-in-out infinite; }
.gc-av { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: flex;
  align-items: center; justify-content: center; font-size: 40px; color: #fff;
  font-family: 'K_rebucked','Space Mono',monospace; }
.gc-info { text-align: center; }
.gc-name { font-size: 18px; letter-spacing: 1px; color: var(--text); font-family: 'K_rebucked','Space Mono',monospace; }
.gc-status { font-size: 12px; letter-spacing: 2px; color: var(--dim); margin-top: 3px; text-transform: uppercase; }
.call-timer { font-size: 14px; color: var(--glow); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.gc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gc-tile { min-width: 52px; }
.gc-tile.on { border-color: var(--glow); color: var(--glow-hot); box-shadow: 0 0 12px rgba(91,200,255,.4); }
.call-danger { border-color: var(--danger) !important; color: var(--danger) !important; }
.call-danger:hover, .call-danger.sel { background: rgba(255,90,74,.14) !important; }
.btn.call-on { border-color: var(--danger); color: var(--danger); }
.gc-accept { border-color: var(--online) !important; color: var(--online) !important; }
.gc-accept:hover, .gc-accept.sel { background: rgba(70,209,122,.16) !important; }
.gamercard .btn.sel { outline: 2px solid var(--glow); outline-offset: 2px; }

/* ringing/outgoing card size (centered in overlay) */
.gc--ringing, .gc--calling { width: min(340px, 92vw); }
.gc--ringing .gc-glow, .gc--calling .gc-glow { width: 120px; height: 120px; }

/* active call — docked bottom-right */
.gc--active { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 280px;
  animation: viewIn var(--t-glide, .25s) ease; }
.gc--active.video { width: 360px; }
.call-remote { width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 8px; object-fit: cover; }
.call-local { position: absolute; right: 8px; bottom: 8px; width: 84px; aspect-ratio: 4/3;
  background: #000; border-radius: 6px; object-fit: cover; border: 1px solid var(--edge-hot); }

/* expanded — fullscreen video stage */
.gc--expanded { position: fixed; inset: 0; z-index: 85; width: auto; border: 0; border-radius: 0;
  padding: 0; justify-content: center; background: #000; }
.gc--expanded .gc-media { width: 100%; height: 100%; }
.gc--expanded .call-remote { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.gc--expanded .call-local { right: 18px; bottom: 96px; width: 180px; }
.gc--expanded .gc-info { position: absolute; top: 22px; left: 24px; text-align: left; }
.gc--expanded .gc-actions { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); }

/* minimized pill — sits over a running game */
.gc--pill { position: fixed; right: 18px; bottom: 18px; z-index: 80; flex-direction: row;
  width: auto; padding: 8px 14px; gap: 10px; cursor: pointer; border-radius: 30px;
  align-items: center; animation: viewIn var(--t-snappy, .12s) ease; }
.gc--pill .gc-glow { width: 30px; height: 30px; box-shadow: 0 0 10px rgba(91,200,255,.4); }
.gc--pill .gc-av { font-size: 14px; }
.gc--pill .gc-name { font-size: 13px; }
.gc--pill .call-timer { margin: 0; font-size: 12px; }

/* incoming pull-up banner over a running game (non-modal) */
.call-banner { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 30px;
  background: var(--panel-solid); border: 1px solid var(--glow);
  box-shadow: 0 0 30px rgba(91,200,255,.35); animation: guideIn var(--t-glide, .25s) ease; }
.call-banner .gc-glow { width: 34px; height: 34px; animation: callpulse 1.6s ease-in-out infinite; }
.call-banner .gc-av { font-size: 15px; }
.call-banner .cb-name { font-size: 13px; color: var(--text); }
.call-banner .cb-sub { font-size: 10px; letter-spacing: 2px; color: var(--dim); }

/* the gloss sweep (reuse the existing .sheen primitive); gamercards opt in via .sheen child */

/* Calls blade */
.call-blade-status { font-size: 13px; color: var(--dim); margin-bottom: 16px; }
.recent-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  background: rgba(5,8,13,.55); border: 1px solid transparent; cursor: pointer; transition: border-color var(--t-snappy, .12s); }
.recent-row:hover, .recent-row.sel { border-color: var(--edge-hot); }
.recent-dir { font-size: 13px; color: var(--dim); width: 16px; text-align: center; }
.recent-row.miss .recent-dir, .recent-row.miss .recent-name { color: var(--danger); }
.recent-name { flex: 1; font-size: 13px; color: var(--text); }
.recent-meta { font-size: 11px; color: var(--dim); }

/* ── chat/DM drawings ── */
.chat-draw { display: block; max-width: 230px; max-height: 200px; margin-top: 4px;
  border: 1px solid var(--edge); border-radius: 6px; background: #fff; cursor: zoom-in; }
.chat-msg.me .chat-draw { margin-left: auto; }
.draw-overlay { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center;
  background: rgba(2,6,12,.78); backdrop-filter: blur(3px); animation: viewIn var(--t-glide,.25s) ease; }
.draw-card { background: var(--panel-solid); border: 1px solid var(--glow); border-radius: 12px;
  box-shadow: 0 0 40px rgba(91,200,255,.28); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.draw-head { font-size: 11px; letter-spacing: 2px; color: var(--dim); }
.draw-canvas { background: #fff; border-radius: 8px; width: 360px; height: 270px; max-width: 86vw; cursor: crosshair; touch-action: none; }
.draw-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── login: real inputs (PC keyboard-first) ── */
.ob-field { cursor: default; }
.ob-inwrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.ob-input { flex: 1; min-width: 0; background: #02080f; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--text); font-family: "Space Mono", monospace; font-size: 16px; padding: 9px 11px; outline: none; }
.ob-input:focus { border-color: var(--glow); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 35%, transparent); }
.ob-field:has(.ob-input:focus) { outline: none; box-shadow: none; }
.ob-kbtoggle { flex: none; padding: 7px 10px; font-size: 14px; }

/* ═══ CASINO FX — dramatic poker/blackjack animations ═══ */
/* card deal: flip+drop in from the dealer (only NEW cards get .dealing, staggered via inline delay) */
@keyframes cardDeal { from { opacity: 0; transform: translateY(-44px) rotateY(95deg) scale(.86); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.bj-card.dealing { animation: cardDeal .42s cubic-bezier(.2,.8,.25,1) backwards; transform-style: preserve-3d; backface-visibility: hidden; }
.bj-card { transition: box-shadow .2s; }
.bj-card.win-card { box-shadow: 0 0 0 2px #ffd24a, 0 0 22px rgba(255,210,74,.8); }

/* active turn — dramatic gold breathing ring on whoever's up */
@keyframes turnPulse { 0%,100% { box-shadow: 0 0 14px color-mix(in srgb,var(--g,var(--glow)) 40%,transparent); } 50% { box-shadow: 0 0 30px color-mix(in srgb,var(--g,var(--glow)) 90%,transparent), 0 0 6px var(--g,var(--glow)) inset; } }
.pk-seat.active, .bj-seat.active { animation: turnPulse 1.1s ease-in-out infinite; border-color: var(--g,var(--glow)); }
.pk-seat.me.active, .bj-seat.me.active { animation: turnPulse .8s ease-in-out infinite; }

/* pot grows → pop + glint */
@keyframes potPop { 0% { transform: scale(1); } 35% { transform: scale(1.4); text-shadow: 0 0 18px var(--online); } 100% { transform: scale(1); } }
.pk-pot.pop { animation: potPop .5s ease-out; }

/* chip fly to pot */
@keyframes chipToPot { from { opacity: 1; transform: translate(var(--cx,0), var(--cy,0)) scale(1); } to { opacity: 0; transform: translate(0,0) scale(.5); } }

/* dealing badge / "YOUR TURN" cinematic banner */
@keyframes turnBanner { 0% { opacity: 0; transform: translateY(-12px) scale(.9); } 12%,82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.casino-turn { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8; font-family: "K_rebucked","Space Mono",monospace;
  font-size: 16px; letter-spacing: 3px; color: #ffd24a; text-shadow: 0 0 16px rgba(255,210,74,.7); padding: 6px 18px;
  border: 1px solid #ffd24a; border-radius: 4px; background: rgba(20,14,2,.7); animation: turnBanner 2.4s ease forwards; pointer-events: none; }

/* CINEMATIC SHOWDOWN (poker) + resolve flourish */
@keyframes sdIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.pk-showdown.cinematic { position: fixed; inset: 0; z-index: 72; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: radial-gradient(120% 90% at 50% 40%, rgba(20,16,2,.55), rgba(2,4,2,.9)); border: 0; border-radius: 0; animation: sdIn .4s ease; }
.pk-sd-title { font-family: "K_rebucked","Space Mono",monospace; font-size: 40px; letter-spacing: 8px; color: #ffd24a;
  text-shadow: 0 0 30px rgba(255,210,74,.8), 0 0 70px rgba(255,180,40,.4); animation: sdIn .5s ease; }
.pk-sd-win { font-size: 18px; color: #fff7e0; letter-spacing: 1px; text-shadow: 0 0 14px rgba(255,210,74,.5); }

/* gold burst / chip rain particles */
.fx-burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 80; }
.fx-particle { position: absolute; left: 50%; top: 45%; font-size: 22px; color: #ffd24a; text-shadow: 0 0 12px rgba(255,210,74,.9);
  animation: fxFly 1.5s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes fxFly { from { opacity: 1; transform: translate(-50%,-50%) scale(.4) rotate(0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 120px)) scale(1.1) rotate(var(--rot)); } }

/* blackjack outcome flourishes */
@keyframes bjWin { 0% { transform: scale(.6); opacity: 0; } 50% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bjBust { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.bj-outcome { animation: bjWin .5s ease backwards; font-weight: 700; }
.bj-outcome.win, .bj-outcome.blackjack { color: #ffd24a; text-shadow: 0 0 14px rgba(255,210,74,.7); }
.bj-outcome.blackjack { font-size: 13px; }
.bj-outcome.bust { color: var(--danger); animation: bjBust .4s ease; text-shadow: 0 0 12px rgba(255,90,74,.6); }
.bj-outcome.lose { color: var(--dim); }

.friend-status.game { color: var(--online); }

/* ═══ HOLOGRAPHIC CARD GAMES ═══ */
/* holographic foil cards (poker + blackjack share .bj-card) */
.bj-card { background: linear-gradient(160deg, rgba(244,250,255,.96), rgba(204,223,240,.9));
  border: 1px solid color-mix(in srgb, var(--g,var(--glow)) 55%, #ffffff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--g,var(--glow)) 35%, transparent), 0 4px 10px rgba(0,0,0,.55);
  overflow: hidden; }
.bj-card::before { content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; z-index:0;
  background: linear-gradient(115deg, transparent 28%, rgba(120,220,255,.5) 46%, rgba(255,120,220,.32) 54%, rgba(120,255,200,.32) 60%, transparent 74%);
  background-size: 260% 100%; animation: holoSheen 3.6s linear infinite; }
@keyframes holoSheen { from { background-position: 150% 0; } to { background-position: -90% 0; } }
.bj-rank, .bj-suit { position: relative; z-index: 1; text-shadow: 0 0 6px rgba(120,200,255,.4); }
.bj-card.back { background: linear-gradient(135deg, color-mix(in srgb, var(--g,var(--glow)) 30%, #04141f), #06243a);
  border: 1px solid var(--g,var(--glow)); box-shadow: 0 0 16px color-mix(in srgb, var(--g,var(--glow)) 55%, transparent), inset 0 0 16px color-mix(in srgb, var(--g,var(--glow)) 24%, transparent); }
.bj-card.back::after { content:''; position:absolute; inset:3px; border-radius:3px; opacity:.45;
  background-image: linear-gradient(color-mix(in srgb,var(--g,var(--glow)) 85%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,var(--g,var(--glow)) 85%, transparent) 1px, transparent 1px);
  background-size: 7px 7px; }

/* POKER — holographic OVAL table with seats around the rim */
.pk-felt { position: relative; width: min(780px, 95vw); height: 470px; margin: 6px auto 0; }
.pk-rim { position: absolute; inset: 5% 1%; border-radius: 50%;
  background: radial-gradient(110% 120% at 50% 36%, color-mix(in srgb, var(--g,var(--glow)) 17%, #03140c), #02100a 78%);
  border: 2px solid color-mix(in srgb, var(--g,var(--glow)) 55%, transparent);
  box-shadow: 0 0 55px color-mix(in srgb, var(--g,var(--glow)) 30%, transparent), inset 0 0 80px color-mix(in srgb, var(--g,var(--glow)) 13%, transparent), inset 0 0 0 9px rgba(0,0,0,.32); }
.pk-rim::before { content:''; position:absolute; inset:16px; border-radius:50%; border:1px solid color-mix(in srgb, var(--g,var(--glow)) 28%, transparent); }
.pk-rim::after { content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--g,var(--glow)) 7%, transparent) 3px 4px); }
.pk-board { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
  background: none; border: 0; padding: 0; gap: 12px; }
.pk-pot { z-index: 2; text-shadow: 0 0 16px var(--online); font-size: 15px; }
.pk-seat { z-index: 3; min-width: 104px;
  background: linear-gradient(160deg, rgba(10,30,24,.88), rgba(4,14,10,.82)); backdrop-filter: blur(2px);
  border: 1px solid color-mix(in srgb, var(--g,var(--glow)) 42%, transparent); border-radius: 9px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--g,var(--glow)) 18%, transparent); }
.pk-openseat { z-index: 3; width: 76px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 9px;
  border: 1px dashed color-mix(in srgb, var(--g,var(--glow)) 38%, transparent); color: color-mix(in srgb, var(--g,var(--glow)) 70%, transparent);
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 2px; background: rgba(4,14,10,.4); }
.pk-sit { z-index: 3; box-shadow: 0 0 14px color-mix(in srgb, var(--g,var(--glow)) 22%, transparent); }
.pk-dealer { box-shadow: 0 0 10px rgba(255,255,255,.6); }

/* BLACKJACK — holographic curved felt */
.bj-table { position: relative; padding: 26px 18px 20px; border-radius: 220px 220px 20px 20px;
  background: radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--g,var(--glow)) 15%, #03140c), #02100a 76%);
  border: 1px solid color-mix(in srgb, var(--g,var(--glow)) 40%, transparent);
  box-shadow: 0 0 45px color-mix(in srgb, var(--g,var(--glow)) 22%, transparent), inset 0 0 55px color-mix(in srgb, var(--g,var(--glow)) 11%, transparent); }
.bj-seat { background: linear-gradient(160deg, rgba(10,30,24,.82), rgba(4,14,10,.76)); backdrop-filter: blur(2px);
  border: 1px solid color-mix(in srgb, var(--g,var(--glow)) 38%, transparent); border-radius: 9px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--g,var(--glow)) 15%, transparent); }
@media (max-width: 720px) { .pk-felt { height: 380px; width: 96vw; } .pk-seat, .pk-openseat { transform: translate(-50%,-50%) scale(.82); } }

/* ═══ BLACKJACK — curved holographic DEALER table (the crown jewel) ═══ */
.bj-table { position: relative; width: min(800px, 96vw); height: 480px; margin: 6px auto 0; padding: 0;
  border-radius: 280px 280px 24px 24px;
  background: radial-gradient(130% 100% at 50% 0%, color-mix(in srgb,var(--g,var(--glow)) 18%, #03140c), #02100a 72%);
  border: 2px solid color-mix(in srgb,var(--g,var(--glow)) 52%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb,var(--g,var(--glow)) 28%, transparent), inset 0 0 80px color-mix(in srgb,var(--g,var(--glow)) 13%, transparent); overflow: hidden; }
.bj-table::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb,var(--g,var(--glow)) 6%, transparent) 3px 4px); }
.bj-decor { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bj-arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bj-arc-text { fill: #ffd24a; font-family: "Space Mono", monospace; font-size: 15px; font-weight: 700; letter-spacing: 3px; filter: drop-shadow(0 0 6px rgba(255,210,74,.7)); }
.bj-dealer { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3; gap: 8px; }
.bj-seat { position: absolute; z-index: 3; min-width: 92px; max-width: 150px; min-height: auto; padding: 8px; }
.bj-betspot { margin-top: 7px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb,var(--g,var(--glow)) 45%, transparent); display: flex; align-items: center; justify-content: center;
  font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 1px; color: color-mix(in srgb,var(--g,var(--glow)) 65%, transparent); }
.bj-betspot.filled { border-style: solid; border-color: #ffd24a; color: #ffd24a; background: radial-gradient(circle, rgba(255,210,74,.28), transparent 72%); box-shadow: 0 0 16px rgba(255,210,74,.55); }
.bj-shoe { position: absolute; top: 18px; right: 20px; z-index: 3; width: 56px; padding: 6px 4px 3px;
  background: linear-gradient(160deg, color-mix(in srgb,var(--g,var(--glow)) 24%, #041520), #06243a); border: 1px solid var(--g,var(--glow)); border-radius: 5px;
  box-shadow: 0 0 16px color-mix(in srgb,var(--g,var(--glow)) 45%, transparent); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bj-shoe-cards { width: 38px; height: 22px; border-radius: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb,var(--g,var(--glow)) 65%, transparent) 0 1px, transparent 1px 4px); }
.bj-shoe-label { font-family: "Space Mono", monospace; font-size: 7px; letter-spacing: 2px; color: color-mix(in srgb,var(--g,var(--glow)) 75%, transparent); }
@media (max-width: 720px) { .bj-table { height: 400px; } .bj-arc-text { font-size: 12px; } }

/* casino tables opt OUT of the global "square everything" rule (rounded felt, circular chips) */
.pk-rim, .pk-rim::before, .pk-rim::after { border-radius: 50% !important; }
.bj-betspot { border-radius: 50% !important; }
.bj-card, .pk-community .bj-card { border-radius: 6px !important; }
.bj-card.back::after { border-radius: 3px !important; }
.pk-seat, .pk-openseat, .pk-sit, .bj-seat, .bj-shoe, .bj-shoe-cards { border-radius: 9px !important; }
.bj-table { border-radius: 280px 280px 24px 24px !important; }

/* ═══ BALATRO-JUICE BLACKJACK ═══ */
/* slower, more dramatic deal on the blackjack felt (builds tension) */
.bj-table .bj-card.dealing { animation-duration: .62s; }
/* idle card wobble (Balatro) — on a wrapper so it doesn't fight the deal animation */
@keyframes cardWobble { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.bj-cards .bj-card:not(.dealing):not(.back) { animation: cardWobble 2.6s ease-in-out infinite; }
.bj-cards .bj-card:nth-child(even):not(.dealing):not(.back) { animation-delay: -1.3s; }
/* juicy total — pops + bounces when a new card lands */
@keyframes juicePop { 0% { transform: scale(1); } 28% { transform: scale(1.55); color: var(--glow-hot); } 60% { transform: scale(.88); } 100% { transform: scale(1); } }
.bj-total { font-size: 15px; font-weight: 700; }
.bj-total.juice { animation: juicePop .5s cubic-bezier(.2,1.5,.4,1); }
/* BIG outcome callouts (squash-stretch overshoot) */
@keyframes calloutIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-9deg); } 55% { opacity: 1; transform: translate(-50%,-50%) scale(1.28) rotate(3deg); } 76% { transform: translate(-50%,-50%) scale(.9) rotate(-1deg); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } }
@keyframes calloutOut { to { opacity: 0; transform: translate(-50%,-52%) scale(1.15); } }
.bj-callout { position: fixed; left: 50%; top: 42%; z-index: 74; pointer-events: none; text-align: center;
  font-family: "K_rebucked","Space Mono",monospace; font-weight: 700; font-size: clamp(34px, 9vw, 66px); letter-spacing: 4px; white-space: nowrap;
  animation: calloutIn .55s cubic-bezier(.2,1.5,.35,1) backwards; }
.bj-callout .sub { display: block; font-size: 22px; letter-spacing: 3px; margin-top: 8px; }
.bj-callout.win { color: #ffd24a; text-shadow: 0 0 32px rgba(255,210,74,.85), 0 0 78px rgba(255,180,40,.5); }
.bj-callout.blackjack { color: #7cff9b; font-size: clamp(38px, 11vw, 76px); text-shadow: 0 0 36px rgba(124,255,155,.9), 0 0 84px rgba(255,210,74,.5); }
.bj-callout.bust, .bj-callout.lose { color: #ff5a4a; text-shadow: 0 0 32px rgba(255,90,74,.85); }
.bj-callout.push { color: #9fc0d8; text-shadow: 0 0 20px rgba(140,180,220,.6); }
/* screen shake + gold flash */
@keyframes fxShake { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-7px,5px); } 30% { transform: translate(7px,-4px); } 45% { transform: translate(-6px,3px); } 60% { transform: translate(6px,-3px); } 75% { transform: translate(-4px,2px); } 90% { transform: translate(3px,-1px); } }
.fx-shake { animation: fxShake .42s ease; }
.fx-shake-big { animation: fxShake .64s ease; }
@keyframes winFlash { 0% { opacity: 0; } 18% { opacity: .55; } 100% { opacity: 0; } }
.fx-flash { position: fixed; inset: 0; z-index: 73; pointer-events: none; background: radial-gradient(circle at 50% 44%, rgba(255,210,74,.55), transparent 62%); animation: winFlash .65s ease forwards; }
/* winning seat glow */
.bj-seat.won { box-shadow: 0 0 30px #ffd24a, inset 0 0 20px rgba(255,210,74,.3) !important; border-color: #ffd24a !important; }

/* ═══ LOCKER — 3D ParadiZe avatar ═══ */
.locker3d { display: flex; flex-direction: column; align-items: center; }
.av-stage { position: relative; width: 100%; max-width: 620px; height: 62vh; max-height: 560px; margin-top: 8px;
  border: 1px solid var(--edge); border-radius: 10px;
  background: radial-gradient(120% 90% at 50% 18%, color-mix(in srgb,var(--glow) 12%, #030a12), #02060c);
  box-shadow: inset 0 0 60px color-mix(in srgb,var(--glow) 10%, transparent); overflow: hidden; }
.av-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.av-canvas:active { cursor: grabbing; }
.av-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 2px; }
.av-note { margin-top: 12px; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--dim); }

/* ═══ LOCKER skins (pattern-seeded) ═══ */
.skin-panel { width: 100%; max-width: 620px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.skin-fams { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.skin-fam.on { border-color: var(--glow); color: var(--glow-hot); box-shadow: 0 0 12px color-mix(in srgb,var(--glow) 40%,transparent); }
.skin-info { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-family: "Space Mono", monospace; font-size: 12px; }
.skin-name { color: var(--text); font-weight: 700; letter-spacing: 1px; }
.skin-pat { color: var(--dim); }
.skin-tier { padding: 2px 9px; border-radius: 4px !important; font-weight: 700; letter-spacing: 1px; font-size: 11px; border: 1px solid currentColor; }
.skin-pct { color: var(--dim); }
.skin-price { color: var(--online); font-weight: 700; }
.skin-ctrls { display: flex; justify-content: center; }
.skin-market { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.skin-cell { border: 1px solid var(--edge); border-radius: 8px !important; padding: 6px; cursor: pointer; text-align: center; transition: border-color .12s; }
.skin-cell:hover { border-color: var(--glow); }
.skin-swatch { width: 100%; aspect-ratio: 1; border-radius: 6px !important; image-rendering: pixelated; display: block; }
.skin-cell-tier { font-family: "Space Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: 1px; margin-top: 4px; }
.skin-cell-price { font-family: "Space Mono", monospace; font-size: 9px; color: var(--dim); }
.tier-BLUEGEM, .tier-FULLFADE { color: #2e6bff !important; text-shadow: 0 0 8px rgba(46,107,255,.6); }
.tier-TOPTIER { color: #ffd24a !important; }
.tier-CLEAN { color: var(--online) !important; }
.tier-MIXED { color: var(--dim) !important; }
.tier-SCUFFED { color: #9a8a6a !important; }

/* ═══ LOCKER economy (cases / inventory / reveal) ═══ */
.skin-tabs { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.skin-tab.on { border-color: var(--glow); color: var(--glow-hot); box-shadow: 0 0 12px color-mix(in srgb,var(--glow) 40%,transparent); }
.skin-body { width: 100%; max-width: 640px; margin: 12px auto 0; }
.case-card { border: 1px solid var(--glow); border-radius: 12px !important; padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--glow) 12%, #04121a), #03080f); box-shadow: 0 0 30px color-mix(in srgb,var(--glow) 20%,transparent); }
.case-title { font-family: "K_rebucked","Space Mono",monospace; font-size: 26px; letter-spacing: 3px; color: var(--glow-hot); text-shadow: 0 0 16px color-mix(in srgb,var(--glow) 60%,transparent); }
.case-sub { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); }
.case-strip { display: flex; gap: 6px; }
.case-mini { width: 44px; height: 44px; border-radius: 6px !important; image-rendering: pixelated; border: 1px solid var(--edge); }
.case-open { font-size: 14px; padding: 12px 26px; }
.case-note { text-align: center; font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); margin-top: 12px; }
.skin-cell.equipped { border-color: var(--glow) !important; box-shadow: 0 0 16px color-mix(in srgb,var(--glow) 45%,transparent); }
/* case reveal */
@keyframes revealIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-6deg); } 60% { opacity: 1; transform: translate(-50%,-50%) scale(1.12) rotate(2deg); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.skin-reveal { position: fixed; left: 50%; top: 46%; z-index: 78; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 30px; border-radius: 14px !important; background: rgba(3,6,12,.92); border: 2px solid currentColor;
  box-shadow: 0 0 50px currentColor; animation: revealIn .5s cubic-bezier(.2,1.5,.35,1) backwards; cursor: pointer; }
.skin-reveal-swatch { width: 150px; height: 150px; border-radius: 12px !important; image-rendering: pixelated; box-shadow: 0 0 24px currentColor; }
.skin-reveal-fam { font-family: "K_rebucked","Space Mono",monospace; font-size: 22px; letter-spacing: 2px; color: var(--text); }
.skin-reveal-tier { font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: 3px; font-size: 15px; }
.skin-reveal-pat { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); }
/* tiers */
.tier-SOLARSTORM, .tier-DEEPGLEAM, .tier-WHITEHOT, .tier-FULLSPECTRUM, .tier-APPARITION { color: #ffd24a !important; text-shadow: 0 0 10px rgba(255,210,74,.7); }
.tier-PRISTINE { color: #b06bff !important; }
.tier-CLEAN { color: var(--online) !important; }
.tier-FADED { color: var(--dim) !important; }
.tier-SCUFFED { color: #9a8a6a !important; }
/* rarity categories (skin cat colours) */
.tier-common { color: #9a8a6a !important; }
.tier-uncommon { color: var(--online) !important; }
.tier-rare { color: #b06bff !important; text-shadow: 0 0 8px rgba(176,107,255,.55); }
.tier-gem { color: #ffd24a !important; text-shadow: 0 0 10px rgba(255,210,74,.7); }
.tier-outfit { color: #4ad2ff !important; text-shadow: 0 0 8px rgba(74,210,255,.55); }
.tier-mythic { color: #fff2a8 !important; text-shadow: 0 0 14px rgba(255,224,120,.9), 0 0 26px rgba(255,180,60,.5); }
.tier-corrupted { color: #ff2fbf !important; text-shadow: 0 0 10px rgba(255,47,191,.8), 0 0 20px rgba(0,255,200,.4); }
/* keep the character pinned while you scroll/pick skins */
.locker3d .av-stage { position: sticky; top: 0; z-index: 3; background: var(--bg); }
/* inventory grouping + variant picker */
.skin-cell { position: relative; }
.skin-count { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.72); color: #fff; font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px !important; border: 1px solid var(--edge); }
.variant-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.variant-back { font-family: "Space Mono", monospace; font-size: 11px; padding: 4px 10px; }
.variant-title { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 1px; color: var(--text); }
.variant-equip { width: 100%; margin-top: 12px; }
/* unusual effect tags (TF2-style rare aura) */
.skin-fx-tag { font-family: "Space Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .5px; color: #ff8adf; text-shadow: 0 0 6px rgba(255,90,200,.7); margin-top: 2px; }
.skin-cell.has-fx { border-color: #ff5ac8 !important; box-shadow: 0 0 12px rgba(255,90,200,.4); }
.skin-reveal-fx { font-family: "Space Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #ff8adf; text-shadow: 0 0 10px rgba(255,90,200,.85); }

/* ===== ROOMS / SERVERS ===== */
.room-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--edge); }
.room-chip:hover { border-color: var(--glow); }
.room-chip-ic { opacity: .7; }
#room-chip-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-chip-ca { opacity: .6; font-size: 9px; }
.rooms-ov { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.72); display: flex; align-items: flex-start; justify-content: center; padding: 40px 14px; overflow-y: auto; }
.rooms-panel { width: 100%; max-width: 520px; background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 14px !important; padding: 16px; box-shadow: 0 0 40px rgba(0,0,0,.6); }
.rooms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rooms-title { font-family: "K_rebucked","Space Mono",monospace; font-size: 18px; letter-spacing: 2px; color: var(--text); }
.rooms-close { padding: 2px 10px; }
.rooms-join { display: flex; gap: 8px; margin-bottom: 14px; }
.rooms-sec-title { font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--dim); margin: 12px 0 8px; }
.rooms-list { display: flex; flex-direction: column; gap: 8px; }
.room-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px !important; }
.room-row.current { border-color: var(--glow); box-shadow: 0 0 14px color-mix(in srgb,var(--glow) 35%,transparent); }
.room-row-name { font-family: "Space Mono", monospace; font-weight: 700; color: var(--text); font-size: 14px; }
.room-row-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-family: "Space Mono", monospace; font-size: 10px; color: var(--dim); }
.room-code { color: var(--glow); }
.room-badge { padding: 1px 6px; border-radius: 6px !important; font-weight: 700; font-size: 9px; }
.room-badge.own { background: color-mix(in srgb,var(--glow) 22%,transparent); color: var(--glow-hot); }
.room-badge.pub { border: 1px solid var(--edge); color: var(--online); }
.room-badge.priv { border: 1px solid var(--edge); color: var(--dim); }
.room-join { padding: 6px 16px; }
.rooms-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--edge); }
.room-input, .room-chans { width: 100%; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px !important; color: var(--text); font-family: "Space Mono", monospace; font-size: 13px; padding: 9px 11px; margin-bottom: 8px; box-sizing: border-box; }
.room-chans { resize: vertical; line-height: 1.5; }
.room-toggle { display: flex; align-items: center; gap: 8px; font-family: "Space Mono", monospace; font-size: 12px; color: var(--dim); margin-bottom: 8px; cursor: pointer; }
.room-sub { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); margin: 4px 0 6px; }
.room-create-btn { width: 100%; margin-top: 4px; }
.ref-box { background: color-mix(in srgb,#ff5ac8 8%,transparent); border-color: #ff5ac8 !important; border-radius: 10px !important; padding: 12px; }
.ref-code-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ref-code { flex: 1; font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: 3px; font-size: 18px; color: #ff8adf; background: rgba(0,0,0,.35); border-radius: 8px !important; padding: 6px 12px; text-align: center; }
.ref-copy { white-space: nowrap; }
.ref-bar { height: 8px; background: rgba(0,0,0,.4); border-radius: 6px !important; overflow: hidden; margin-bottom: 6px; }
.ref-bar-fill { height: 100%; background: linear-gradient(90deg,#ff5ac8,#ffd24a); border-radius: 6px !important; transition: width .3s; }
.ref-note { font-family: "Space Mono", monospace; font-size: 12px; color: var(--text); }
.ref-fine { font-family: "Space Mono", monospace; font-size: 10px; color: var(--dim); margin-top: 4px; }

/* ===== ROOM HUB (Discord-like channels) ===== */
.hub-view { display: flex; gap: 0; height: 100%; min-height: 420px; }
.hub-side { width: 210px; flex: 0 0 210px; overflow-y: auto; border-right: 1px solid var(--edge); padding: 48px 8px 60px; }
.hub-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 8px 10px; }
.hub-room { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 6px 10px; border-bottom: 1px solid var(--edge); margin-bottom: 8px; }
.hub-room-name { font-family: "K_rebucked","Space Mono",monospace; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-switch { font-size: 9px; padding: 3px 8px; white-space: nowrap; }
.hub-sec { display: flex; align-items: center; justify-content: space-between; font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--dim); margin: 12px 4px 4px; }
.hub-add { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.hub-add:hover { color: var(--glow); }
.hub-chan { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: none; border: none; color: var(--dim); font-family: "Space Mono", monospace; font-size: 13px; padding: 6px 8px; border-radius: 7px !important; cursor: pointer; }
.hub-chan:hover { background: var(--panel); color: var(--text); }
.hub-chan.on { background: color-mix(in srgb,var(--glow) 18%,transparent); color: var(--glow-hot); }
.hub-chan-h { opacity: .6; font-weight: 700; }
.hub-chan-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-chan-ct { font-size: 10px; background: rgba(0,0,0,.4); border-radius: 8px !important; padding: 0 6px; color: var(--online); }
.hub-vchan.joined { color: var(--online); }
.hub-occ { font-family: "Space Mono", monospace; font-size: 11px; color: var(--dim); padding: 1px 8px 1px 24px; }
.hub-manage { width: calc(100% - 8px); margin: 14px 4px 0; font-size: 11px; }
.hub-main-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 10px; border-bottom: 1px solid var(--edge); margin-bottom: 8px; }
.hub-main-h { opacity: .5; font-weight: 700; font-size: 18px; }
.hub-main-t { font-family: "Space Mono", monospace; font-weight: 700; font-size: 15px; color: var(--text); }
.hub-chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 4px; min-height: 120px; }
.hub-msg { font-family: "Space Mono", monospace; font-size: 13px; line-height: 1.4; }
.hub-msg-u { color: var(--glow); font-weight: 700; margin-right: 7px; }
.hub-msg-x { color: var(--text); word-break: break-word; }
.hub-chat-form { display: flex; gap: 8px; padding-top: 8px; }
.hub-chat-input { margin-bottom: 0; }
.hub-voice-grid { flex: 1; display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; padding: 10px 4px; overflow-y: auto; }
.hub-voice-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; }
.hub-voice-av { width: 56px; height: 56px; border-radius: 50% !important; background: color-mix(in srgb,var(--glow) 22%,transparent); border: 2px solid var(--glow); display: flex; align-items: center; justify-content: center; font-family: "K_rebucked",monospace; font-size: 24px; color: var(--glow-hot); box-shadow: 0 0 14px color-mix(in srgb,var(--glow) 40%,transparent); }
.hub-voice-nm { font-family: "Space Mono", monospace; font-size: 12px; color: var(--text); text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 90px; white-space: nowrap; }
.hub-voice-ctl { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--edge); }
.hub-vbtn { flex: 1; }

/* voice status bar (floating, persists across views) */
.voice-bar { position: fixed; left: 12px; bottom: 12px; z-index: 70; width: 230px; background: var(--panel-solid); border: 1px solid var(--online); border-radius: 12px !important; padding: 10px 12px; box-shadow: 0 0 24px rgba(0,0,0,.5); }
.voice-bar-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.voice-bar-ch { font-family: "Space Mono", monospace; font-weight: 700; font-size: 13px; color: var(--online); }
.voice-bar-who { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; }
.voice-bar-name { font-family: "Space Mono", monospace; font-size: 11px; color: var(--text); }
.voice-bar-ctl { display: flex; gap: 6px; }
.voice-btn { flex: 1; font-size: 11px; padding: 5px 6px; }
.voice-btn.on { border-color: #ff5a5a !important; color: #ff9a9a; }

/* channel manager / builder */
.chan-mgr { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.chan-row { display: flex; align-items: center; gap: 8px; }
.chan-type { width: 40px; flex: 0 0 40px; height: 38px; border-radius: 8px !important; border: 1px solid var(--edge); background: var(--panel); cursor: pointer; font-size: 15px; color: var(--text); }
.chan-type.text { color: var(--glow); }
.chan-type.voice { color: var(--online); }
.chan-name { margin-bottom: 0 !important; }
.chan-del { flex: 0 0 auto; background: none; border: 1px solid var(--edge); border-radius: 8px !important; color: var(--dim); cursor: pointer; height: 38px; width: 38px; }
.chan-del:hover { color: #ff7a7a; border-color: #ff7a7a; }
.chan-add { width: 100%; font-size: 12px; }
.chan-save { width: 100%; margin-top: 10px; }

/* ===== DICE (shared, server-rolled) ===== */
.dice-card { align-self: flex-start; max-width: 88%; background: color-mix(in srgb,var(--glow) 8%,rgba(5,8,13,.6)); border: 1px solid var(--edge); border-left: 3px solid var(--glow); border-radius: 10px !important; padding: 8px 12px; margin: 2px 0; }
.dice-head { font-family: "Space Mono", monospace; font-size: 12px; color: var(--dim); }
.dice-verb { color: var(--dim); }
.dice-notation { color: var(--glow); font-weight: 700; }
.dice-dies { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 5px; }
.die { min-width: 26px; height: 26px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-family: "Space Mono", monospace; font-weight: 700; font-size: 13px; color: var(--text); background: rgba(0,0,0,.35); border: 1px solid var(--edge); border-radius: 6px !important; }
.die-max { color: #061; background: #ffd24a; border-color: #ffd24a; box-shadow: 0 0 10px rgba(255,210,74,.7); }
.die-min { color: #fff; background: #c0392b; border-color: #ff6a5a; box-shadow: 0 0 10px rgba(255,90,90,.6); }
.die-mod { color: var(--dim); background: none; border-style: dashed; }
.dice-total { font-family: "K_rebucked","Space Mono",monospace; font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--text); }
.dice-total.crit { color: #ffd24a; text-shadow: 0 0 12px rgba(255,210,74,.8); }
.dice-total.fail { color: #ff7a6a; text-shadow: 0 0 12px rgba(255,90,90,.7); }
.dice-tray { position: absolute; bottom: 54px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 10px !important; padding: 10px; box-shadow: 0 -6px 24px rgba(0,0,0,.5); z-index: 5; }
.dice-quick { padding: 6px 10px; font-size: 13px; }
.dice-custom { flex: 1; min-width: 90px; margin: 0; }
.chat-composer { position: relative; }

/* ===== INITIATIVE TRACKER ===== */
.init-toggle { font-size: 15px; padding: 5px 11px; }
.init-toggle.combat { border-color: #ff8a3a !important; color: #ffb072; box-shadow: 0 0 12px rgba(255,138,58,.55); }
.init-panel { position: fixed; right: 12px; top: 60px; z-index: 72; width: 280px; max-height: 78vh; overflow-y: auto; background: var(--panel-solid); border: 1px solid #ff8a3a; border-radius: 12px !important; padding: 12px; box-shadow: 0 0 30px rgba(0,0,0,.6); }
.init-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.init-title { font-family: "K_rebucked","Space Mono",monospace; font-size: 15px; letter-spacing: 1px; color: #ffb072; flex: 1; }
.init-round { font-family: "Space Mono", monospace; font-size: 10px; color: var(--dim); }
.init-x { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 14px; }
.init-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.init-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid var(--edge); border-radius: 8px !important; font-family: "Space Mono", monospace; font-size: 12px; }
.init-row.turn { border-color: #ff8a3a; background: color-mix(in srgb,#ff8a3a 14%,transparent); box-shadow: 0 0 10px rgba(255,138,58,.35); }
.init-row.npc { opacity: .95; }
.init-mark { width: 12px; color: #ff8a3a; }
.init-iv { min-width: 22px; text-align: center; font-weight: 700; color: var(--glow); background: rgba(0,0,0,.35); border-radius: 5px !important; padding: 1px 3px; }
.init-nm { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.init-hp { display: inline-flex; align-items: center; gap: 3px; }
.init-hp.down .init-hpv { color: #ff6a5a; }
.init-hpv { font-size: 10px; color: var(--online); min-width: 40px; text-align: center; }
.init-hpb { background: rgba(0,0,0,.4); border: 1px solid var(--edge); color: var(--text); cursor: pointer; width: 18px; height: 18px; border-radius: 5px !important; line-height: 1; padding: 0; }
.init-rm { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 11px; }
.init-rm:hover { color: #ff7a7a; }
.init-add { display: flex; gap: 4px; margin-bottom: 6px; }
.init-in { margin: 0; flex: 1; min-width: 0; padding: 6px 7px; font-size: 12px; }
.init-in.sm { flex: 0 0 46px; width: 46px; }
.init-addbtn { flex: 0 0 auto; padding: 6px 8px; font-size: 12px; }
.init-quick { width: 100%; font-size: 11px; margin-bottom: 8px; }
.init-ctl { display: flex; gap: 6px; }
.init-next { flex: 1; }
.init-clr { flex: 0 0 auto; }

/* ===== CHARACTER SHEET ===== */
.sheet-toggle, .init-toggle { font-size: 15px; padding: 5px 10px; }
.sheet-panel { position: fixed; right: 12px; top: 60px; z-index: 72; width: 300px; max-height: 82vh; overflow-y: auto; background: var(--panel-solid); border: 1px solid var(--glow); border-radius: 12px !important; padding: 12px; box-shadow: 0 0 30px rgba(0,0,0,.6); }
.sheet-head { display: flex; align-items: center; margin-bottom: 10px; }
.sheet-title { flex: 1; font-family: "K_rebucked","Space Mono",monospace; font-size: 15px; letter-spacing: 1px; color: var(--glow); }
.sheet-row { display: flex; gap: 6px; margin-bottom: 6px; }
.sheet-field { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.sheet-field.grow { flex: 1; }
.sheet-lab { font-family: "Space Mono", monospace; font-size: 9px; letter-spacing: 1px; color: var(--dim); }
.sheet-in { margin: 0; padding: 6px 7px; font-size: 13px; width: 56px; }
.sheet-field.grow .sheet-in { width: 100%; }
.sheet-sec { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: 1px; color: var(--dim); margin: 12px 0 6px; }
.sheet-abils { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.abil { display: flex; align-items: center; gap: 6px; border: 1px solid var(--edge); border-radius: 8px !important; padding: 5px 7px; }
.abil-lab { font-family: "Space Mono", monospace; font-weight: 700; font-size: 11px; color: var(--text); width: 28px; }
.abil-score { margin: 0; width: 42px; padding: 4px 5px; font-size: 13px; text-align: center; }
.abil-mod { font-family: "K_rebucked","Space Mono",monospace; font-size: 14px; color: var(--glow); width: 26px; text-align: center; }
.abil-roll { padding: 3px 6px; font-size: 13px; }
.sheet-save { width: 100%; margin-top: 10px; font-size: 11px; color: var(--online); }

/* ===== BATTLE MAP ===== */
.map-toggle { font-size: 15px; padding: 5px 10px; }
.map-overlay { position: fixed; inset: 0; z-index: 76; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.map-panel { background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 14px !important; padding: 12px; width: min(88vh, 92vw); max-width: 720px; }
.map-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.map-title { font-family: "K_rebucked","Space Mono",monospace; font-size: 16px; letter-spacing: 1px; color: var(--text); }
.map-hint { flex: 1; font-family: "Space Mono", monospace; font-size: 10px; color: var(--dim); }
.map-clr { font-size: 11px; padding: 4px 10px; }
.map-foot { font-family: "Space Mono", monospace; font-size: 10px; color: var(--dim); margin-top: 8px; text-align: center; }
/* holographic grid board (over optional terrain image) */
.map-board { position: relative; width: 100%; aspect-ratio: 1; background-color: #060b10; background-size: cover; background-position: center;
  border: 1px solid var(--edge); border-radius: 10px !important; overflow: hidden; touch-action: none; cursor: crosshair;
  box-shadow: inset 0 0 40px rgba(91,200,255,.12), 0 0 20px rgba(0,0,0,.5); }
.map-board::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(91,200,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(91,200,255,.16) 1px, transparent 1px);
  background-size: 5% 5%; }
.map-board.has-bg::before { background-image: linear-gradient(rgba(91,200,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(91,200,255,.10) 1px, transparent 1px); }
.map-board.has-bg { background-color: #0a0f14; }
.map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "Space Mono", monospace; font-size: 12px; color: color-mix(in srgb,var(--glow) 60%,var(--dim)); pointer-events: none; text-align: center; padding: 0 20px; }
.map-token { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; user-select: none; }
.map-tok-disc { width: 30px; height: 30px; border-radius: 50% !important; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-family: "Space Mono", monospace; font-weight: 700; font-size: 12px; box-shadow: 0 0 12px currentColor, 0 2px 6px rgba(0,0,0,.6); }
.map-tok-name { font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700; color: #eaf6ff; text-shadow: 0 0 4px #000, 0 1px 2px #000; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-token.mine { cursor: grab; }
.map-token.mine:active { cursor: grabbing; }
.map-token.mine .map-tok-disc { box-shadow: 0 0 16px currentColor, 0 0 4px #fff; }
/* paint + token layers */
.map-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map-tokens { position: absolute; inset: 0; z-index: 2; }
.map-board.painting { cursor: crosshair; }
.map-empty { z-index: 2; }
/* map toolbar */
.map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.map-tool { font-size: 11px; padding: 5px 10px; }
.map-tool.on { border-color: var(--glow) !important; color: var(--glow-hot); box-shadow: 0 0 10px color-mix(in srgb,var(--glow) 40%,transparent); }
.map-swatches { display: flex; gap: 4px; padding: 0 4px; }
.map-sw { width: 20px; height: 20px; border-radius: 50% !important; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.map-sw.on { border-color: #fff; box-shadow: 0 0 8px currentColor; transform: scale(1.15); }

/* server-type picker (create form) */
.room-types { display: flex; gap: 8px; margin-bottom: 10px; }
.room-type-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px !important; cursor: pointer; color: var(--dim); }
.room-type-btn.on { border-color: #c8a24a; color: #ffe6a6; background: color-mix(in srgb,#c8a24a 14%,transparent); box-shadow: 0 0 14px rgba(200,162,74,.35); }
.rt-ic { font-size: 22px; }
.rt-nm { font-weight: 700; font-size: 12px; }
.rt-sub { font-size: 9px; opacity: .8; }
.room-badge.dnd { background: color-mix(in srgb,#c8a24a 22%,transparent); color: #ffe6a6; }


/* ===== DM chip + picker ===== */
.dm-chip { font-family: "Space Mono", monospace; font-size: 11px; padding: 5px 11px; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px !important; color: var(--dim); cursor: default; white-space: nowrap; }
.dm-chip.me { color: #ffe6a6; border-color: #c8a24a; cursor: pointer; box-shadow: 0 0 10px rgba(200,162,74,.3); }
.dm-pick .dm-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.dm-open { width: 100%; margin-top: 6px; font-size: 12px; }

/* ===== perfected character sheet ===== */
.sheet-panel { width: 320px; }
.sheet-statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 4px; }
.sheet-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--edge); border-radius: 8px !important; background: rgba(5,8,13,.4); }
.sheet-stat-v { font-family: "K_rebucked","Space Mono",monospace; font-size: 16px; color: var(--glow-hot); }
.sheet-stat-l { font-family: "Space Mono", monospace; font-size: 8px; letter-spacing: 1px; color: var(--dim); }
.sheet-stat-in { margin: 0; width: 46px; padding: 2px 4px; font-size: 15px; text-align: center; background: none; border: none; color: var(--glow-hot); font-family: "K_rebucked","Space Mono",monospace; }
.sheet-stat.hp .hp-wrap { display: flex; align-items: center; gap: 3px; }
.hp-btn { width: 16px; height: 16px; line-height: 1; padding: 0; border: 1px solid var(--edge); background: rgba(0,0,0,.4); color: var(--text); border-radius: 5px !important; cursor: pointer; }
.sheet-abils { grid-template-columns: 1fr; }
.abil { gap: 6px; }
.abil-lab { width: 30px; }
.abil-mod { width: 26px; }
.abil-roll.sv.on { color: var(--online); border-color: color-mix(in srgb,var(--online) 45%,var(--edge)); }
.prof-dot { width: 14px; height: 14px; flex: none; border-radius: 50% !important; border: 1px solid var(--dim); background: transparent; cursor: pointer; padding: 0; }
.prof-dot.on { background: var(--online); border-color: var(--online); box-shadow: 0 0 6px var(--online); }
.sheet-skills { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; padding-right: 2px; }
.skill-row { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px !important; }
.skill-row:hover { background: rgba(91,200,255,.06); }
.skill-mod { font-family: "K_rebucked","Space Mono",monospace; font-size: 12px; color: var(--glow); width: 26px; text-align: center; }
.skill-nm { flex: 1; font-family: "Space Mono", monospace; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-ab { font-family: "Space Mono", monospace; font-size: 8px; letter-spacing: 1px; color: var(--dim); }
.skill-roll { padding: 2px 6px; font-size: 12px; }

/* ===== spellcasting (character sheet) ===== */
.spell-cast { display: flex; align-items: center; gap: 5px; margin: 4px 0 8px; flex-wrap: wrap; }
.spell-ab { padding: 4px 9px; font-size: 11px; }
.spell-ab.on { border-color: var(--glow) !important; color: var(--glow-hot); box-shadow: 0 0 8px color-mix(in srgb,var(--glow) 35%,transparent); }
.spell-derived { flex: 1; font-family: "Space Mono", monospace; font-size: 11px; color: var(--glow); text-align: right; }
.spell-slots { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin-bottom: 6px; }
.slot-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 1px; border: 1px solid var(--edge); border-radius: 6px !important; opacity: .4; }
.slot-cell.active { opacity: 1; border-color: color-mix(in srgb,var(--glow) 45%,var(--edge)); }
.slot-lv { font-family: "Space Mono", monospace; font-size: 8px; color: var(--dim); }
.slot-pips { font-family: "K_rebucked","Space Mono",monospace; font-size: 12px; color: var(--glow-hot); cursor: pointer; }
.slot-edit { display: flex; gap: 1px; }
.slot-b { width: 13px; height: 13px; line-height: 1; padding: 0; font-size: 10px; border: 1px solid var(--edge); background: rgba(0,0,0,.4); color: var(--text); border-radius: 3px !important; cursor: pointer; }
.spell-rest { width: 100%; font-size: 11px; margin-bottom: 8px; }
.spellbook { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
.spell-row { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px !important; }
.spell-row:hover { background: rgba(91,200,255,.06); }
.spell-lv { font-family: "Space Mono", monospace; font-size: 10px; font-weight: 700; color: var(--glow); width: 22px; text-align: center; background: rgba(0,0,0,.35); border-radius: 4px !important; }
.spell-nm { flex: 1; font-family: "Space Mono", monospace; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spell-cast-btn { padding: 3px 10px; font-size: 11px; color: #b06bff; border-color: color-mix(in srgb,#b06bff 45%,var(--edge)); }
.spell-del { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 11px; }
.spell-del:hover { color: #ff7a7a; }
.spell-add { display: flex; gap: 4px; margin-top: 6px; }
.spell-in { margin: 0; flex: 1; min-width: 0; padding: 6px 7px; font-size: 12px; }
.spell-lvl { margin: 0; flex: 0 0 auto; padding: 6px 4px; font-size: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--edge); border-radius: 6px !important; }
.spell-addbtn { flex: 0 0 auto; padding: 6px 10px; }