/* slotbox.fun v0.1
   Direction: a painted arcade cabinet, not a casino. Enamel teal body,
   pewter bezel, bone reel glass, one amber bulb colour for anything lit.
   Display type only on the marquee; everything a user must read carefully
   is set in plain sans. */

:root{
  --enamel:#12383F; --enamel-dk:#0A2126; --enamel-lt:#1B4E57;
  --pewter:#B4AC9C; --pewter-dk:#7C7466;
  --glass:#EDE5D3; --glass-dim:#DCD2BB;
  --bulb:#E8A33D; --ox:#9C3229;
  --good:#7FBF6A; --bad:#D97A6C;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(120% 80% at 50% -10%,var(--enamel-lt) 0%,var(--enamel) 42%,var(--enamel-dk) 100%);
  background-attachment:fixed;
  color:var(--glass);font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:calc(1rem * var(--type-scale));
  min-height:100vh;padding:18px 14px 60px;-webkit-font-smoothing:antialiased;line-height:1.5;
}
body.centred{display:flex;align-items:center;justify-content:center}
a{color:var(--bulb)}

.mk{font-family:'Bungee',system-ui,sans-serif;margin:0;letter-spacing:.02em;
  font-size:clamp(calc(1.375rem * var(--type-scale)),6vw,calc(2.125rem * var(--type-scale)));text-shadow:0 0 16px rgba(232,163,61,.45),0 2px 0 var(--enamel-dk)}

.top{max-width:860px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top nav{display:flex;align-items:center;gap:14px;font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.8438rem * var(--type-scale));flex-wrap:wrap}
.top nav a{color:var(--pewter);text-decoration:none;border-bottom:1px solid rgba(180,172,156,.35)}
.top nav a:hover,.top nav a.on{color:var(--bulb);border-color:var(--bulb)}
.top .who{color:var(--bulb)}

.wrap{max-width:860px;margin:0 auto}
.card{background:linear-gradient(178deg,#16434B,#0E2C33);border:1px solid rgba(180,172,156,.26);
  border-radius:13px;padding:20px;margin-bottom:16px;box-shadow:0 18px 44px rgba(0,0,0,.42)}
.card h2{margin:0 0 12px;font-size:calc(1.0312rem * var(--type-scale));font-family:ui-monospace,'Space Mono',monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pewter-dk)}
.panel{max-width:440px;width:100%}

label{display:block;margin-bottom:13px;font-family:ui-monospace,'Space Mono',monospace;
  font-size:calc(0.7812rem * var(--type-scale));letter-spacing:.1em;text-transform:uppercase;color:var(--pewter)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  display:block;width:100%;margin-top:5px;padding:10px 12px;border-radius:6px;
  border:1px solid rgba(180,172,156,.3);background:var(--enamel-dk);color:var(--glass);
  font-family:inherit;font-size:calc(1.0312rem * var(--type-scale))}
input:focus,select:focus,textarea:focus{outline:2px solid var(--bulb);outline-offset:1px}
textarea{min-height:90px}

button,.btn{appearance:none;border:0;cursor:pointer;padding:12px 20px;border-radius:7px;
  background:linear-gradient(180deg,var(--ox),#75241D);color:var(--glass);text-decoration:none;
  font-family:'Bungee',system-ui,sans-serif;font-size:calc(0.9062rem * var(--type-scale));letter-spacing:.04em;display:inline-block}
button.wide{width:100%}
button.quiet{background:transparent;border:1px solid rgba(180,172,156,.35);color:var(--pewter);
  font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7812rem * var(--type-scale));letter-spacing:.12em;padding:8px 14px}
button:disabled{opacity:.45;cursor:not-allowed}

.flash{padding:11px 14px;border-radius:7px;margin-bottom:15px;font-size:calc(0.9688rem * var(--type-scale))}
.flash.ok{background:rgba(127,191,106,.13);border:1px solid rgba(127,191,106,.4);color:var(--good)}
.flash.err{background:rgba(217,122,108,.13);border:1px solid rgba(217,122,108,.4);color:var(--bad)}

.note{font-size:calc(0.875rem * var(--type-scale));line-height:1.65;color:var(--pewter-dk)}
.mono{font-family:ui-monospace,'Space Mono',monospace}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:calc(0.7188rem * var(--type-scale));letter-spacing:.12em;
  text-transform:uppercase;font-family:ui-monospace,'Space Mono',monospace}
.pill.ok{background:rgba(127,191,106,.16);color:var(--good)}
.pill.warn{background:rgba(232,163,61,.16);color:var(--bulb)}
.pill.bad{background:rgba(217,122,108,.16);color:var(--bad)}

table{width:100%;border-collapse:collapse;font-size:calc(0.9062rem * var(--type-scale))}
th{text-align:left;font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7188rem * var(--type-scale));letter-spacing:.14em;
  text-transform:uppercase;color:var(--pewter-dk);padding:8px 10px;border-bottom:1px solid rgba(180,172,156,.22)}
td{padding:9px 10px;border-bottom:1px solid rgba(180,172,156,.1);vertical-align:top}
tr:hover td{background:rgba(232,163,61,.05)}
.scroll{overflow-x:auto}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.stat{background:rgba(10,33,38,.5);border:1px solid rgba(180,172,156,.16);border-radius:8px;padding:12px;text-align:center}
.stat b{display:block;font-family:ui-monospace,'Space Mono',monospace;font-size:calc(1.3125rem * var(--type-scale));color:var(--bulb)}
.stat span{font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.6562rem * var(--type-scale));letter-spacing:.14em;
  text-transform:uppercase;color:var(--pewter-dk)}

.preview-bar{background:var(--bulb);color:var(--enamel-dk);text-align:center;padding:7px 12px;
  font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7812rem * var(--type-scale));letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;margin:-18px -14px 18px}

pre{white-space:pre-wrap;word-break:break-word;background:var(--enamel-dk);padding:12px;
  border-radius:6px;font-size:calc(0.8438rem * var(--type-scale));max-height:320px;overflow:auto;color:var(--pewter)}
code{font-family:ui-monospace,'Space Mono',monospace;color:var(--bulb)}
footer{max-width:860px;margin:26px auto 0;text-align:center}

/* ── the machine ─────────────────────────────────────────────────────── */
/* ── type ────────────────────────────────────────────────────────────────
   Every size is a rem off a 16px root, multiplied by one variable. Before
   this there were 34 hardcoded pixel sizes and not a single rem, so the whole
   scale was pinned low with nowhere to lift it from.

   The uppercase monospace micro-labels rose least on purpose. They are most
   of what makes this read as a machine rather than a web dashboard, and past
   about 13px they stop looking like machine markings. */
/* The browser hides [hidden] elements with display:none from its own
   stylesheet, which any author rule setting display beats. .swaptray is
   display:flex, so hiding the swap tray did nothing and it stayed on screen in
   Hold mode. This is the standard guard, and it protects every element the
   scripts hide, not just the one that showed the problem. */
[hidden]{ display:none !important }

:root{ --type-scale:1 }
html{ font-size:16px }

:root{ --tile:88px }
@media (max-width:640px){ :root{ --tile:58px } }
@media (max-width:380px){ :root{ --tile:52px } }

.cabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cab{flex:1 1 auto;appearance:none;border:1px solid rgba(180,172,156,.3);cursor:pointer;
  background:rgba(10,33,38,.5);color:var(--pewter);border-radius:7px;padding:9px 14px;
  font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7812rem * var(--type-scale));letter-spacing:.14em;text-transform:uppercase}
.cab.on{background:var(--bulb);color:var(--enamel-dk);border-color:var(--bulb);font-weight:700}
.cab:disabled{opacity:.4;cursor:not-allowed}

.machine{background:linear-gradient(178deg,#16434B,#0E2C33);border:1px solid rgba(180,172,156,.28);
  border-radius:14px;padding:18px;box-shadow:0 26px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.bezel{background:linear-gradient(180deg,var(--pewter),var(--pewter-dk));padding:9px;border-radius:9px;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.4),inset 0 -2px 5px rgba(0,0,0,.35)}
.window{position:relative;background:#0A1119;border-radius:4px;height:calc(var(--tile)*3);
  overflow:hidden;display:flex;gap:2px;padding:0 2px}
.window::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 76%,rgba(0,0,0,.55) 100%)}
.payline{position:absolute;left:0;right:0;top:var(--tile);height:var(--tile);z-index:3;pointer-events:none;
  border-top:2px solid rgba(232,163,61,.85);border-bottom:2px solid rgba(232,163,61,.85)}
/* A dark reel, not a cream one. The old tile was the brightest thing on the
   page with a thin flat glyph on it, so the eye landed on empty paper instead
   of on the art. Everything else in the jewelled treatment depends on this. */
.reel{flex:1;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#16202E,#0C1622)}
.strip{position:absolute;top:0;left:0;right:0;will-change:transform}
.sym{height:var(--tile);display:flex;align-items:center;justify-content:center;position:relative;
  border-bottom:1px solid rgba(255,255,255,.05)}
/* Bigger. The symbol used to take about half the tile; it now fills it the way
   a slot symbol does. */
.sym svg{width:84%;height:84%;display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.sym.crown svg{width:90%;height:90%;
  filter:drop-shadow(0 0 10px rgba(245,197,66,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.sym .rk{position:absolute;top:3px;left:5px;font-family:ui-monospace,'Space Mono',monospace;
  font-size:calc(0.7188rem * var(--type-scale));font-weight:700;color:rgba(237,229,211,.34);z-index:2}

.deck{display:flex;align-items:center;gap:14px;margin-top:16px}
.readout{flex:1;background:var(--enamel-dk);border:1px solid rgba(180,172,156,.22);border-radius:7px;
  padding:9px 12px;min-height:56px;font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.8438rem * var(--type-scale));
  line-height:1.5;color:var(--pewter);display:flex;align-items:center}
.readout b{color:var(--bulb)}
.lever{width:104px;height:56px;padding:0;border-radius:7px;flex:none}
.lever:active:not(:disabled){transform:translateY(4px)}

.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
/* Chips match the reels — a cream chip beside a dark reel looked like two
   different games. */
.chip{width:34px;height:34px;border-radius:5px;position:relative;
  background:linear-gradient(180deg,#1B2637,#0E1826);
  border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;animation:drop .34s cubic-bezier(.2,1.4,.5,1) both}
.chip svg{width:86%;height:86%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.chip .rk{position:absolute;top:1px;left:3px;font-family:ui-monospace,'Space Mono',monospace;
  font-size:calc(0.625rem * var(--type-scale));font-weight:700;color:rgba(237,229,211,.42);z-index:2}
.chip .qty{position:absolute;bottom:0;right:2px;font-family:ui-monospace,'Space Mono',monospace;
  font-size:calc(0.6562rem * var(--type-scale));font-weight:700;color:var(--bulb);z-index:2}
.chip.held{outline:2px solid var(--bulb);outline-offset:1px}
@keyframes drop{from{transform:translateY(-11px) scale(.8);opacity:0}to{transform:none;opacity:1}}

/* ── win presentation ────────────────────────────────────────────────── */
.winbanner{max-width:860px;margin:14px auto 0;display:none}
.winbanner.live{display:block;animation:winin .3s ease-out both}
@keyframes winin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.wintally{background:linear-gradient(180deg,var(--bulb),#C4881B);color:var(--enamel-dk);
  border-radius:11px 11px 0 0;padding:14px 18px;text-align:center;
  font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.9062rem * var(--type-scale));letter-spacing:.14em;text-transform:uppercase}
.wintally b{font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.9375rem * var(--type-scale));letter-spacing:.02em;
  display:inline-block;min-width:2ch;vertical-align:-2px}

.winlist{background:rgba(10,33,38,.86);border:1px solid var(--bulb);border-top:0;
  border-radius:0 0 11px 11px;overflow:hidden}
.winrow{display:flex;align-items:center;gap:14px;padding:11px 16px;
  border-bottom:1px solid rgba(180,172,156,.12);opacity:.45;
  animation:rowin .25s ease-out both}
.winrow.counted{opacity:1}
.winrow:last-child{border-bottom:0}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}to{opacity:.45;transform:none}}

.winchips{display:flex;gap:4px;flex:none}
.winchips .chip{width:28px;height:28px}
.winwhat{flex:1;min-width:0}
.winwhat b{display:block;font-size:calc(0.9062rem * var(--type-scale));color:var(--glass)}
.winwhat span{font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7188rem * var(--type-scale));
  letter-spacing:.1em;text-transform:uppercase;color:var(--pewter-dk)}
.wincredits{font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.1562rem * var(--type-scale));color:var(--bulb);flex:none}

.winrow.tier-medium .wincredits{font-size:calc(1.25rem * var(--type-scale))}
.winrow.tier-big{background:rgba(232,163,61,.10)}
.winrow.tier-big .wincredits{font-size:calc(1.4375rem * var(--type-scale))}
.winrow.tier-huge{background:rgba(232,163,61,.18)}
.winrow.tier-huge .wincredits{font-size:calc(1.6875rem * var(--type-scale));text-shadow:0 0 14px rgba(232,163,61,.75)}

.chip.held{outline:2px solid var(--bulb);outline-offset:1px}
.chip.held::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--bulb);box-shadow:0 0 6px var(--bulb)}

/* ── the progressive ─────────────────────────────────────────────────── */
.jackpot{max-width:860px;margin:0 auto 12px;background:linear-gradient(180deg,rgba(232,163,61,.16),rgba(10,33,38,.6));
  border:1px solid rgba(232,163,61,.45);border-radius:11px;padding:12px 16px;text-align:center}
.jp-pot{display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap}
.jp-pot span{font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7188rem * var(--type-scale));letter-spacing:.18em;
  text-transform:uppercase;color:var(--pewter-dk)}
.jp-pot b{font-family:'Bungee',system-ui,sans-serif;font-size:clamp(calc(1.375rem * var(--type-scale)),5vw,calc(2.0rem * var(--type-scale)));color:var(--bulb);
  text-shadow:0 0 18px rgba(232,163,61,.5)}
.jp-meta{margin-top:5px;font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.75rem * var(--type-scale));
  letter-spacing:.06em;color:var(--pewter-dk)}
.jp-meta b{color:var(--bulb)}
.winrow.jackpot-row{background:linear-gradient(90deg,rgba(232,163,61,.3),rgba(232,163,61,.12))}
.winrow.jackpot-row .winwhat b{font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.0312rem * var(--type-scale));color:var(--bulb)}

/* ── coin migration notice ───────────────────────────────────────────── */
.coin-notice{background:linear-gradient(180deg,rgba(217,122,108,.2),rgba(10,33,38,.75));
  border:1px solid rgba(217,122,108,.6);border-radius:11px;padding:16px 18px;margin-bottom:16px}
.coin-notice > b{display:block;font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.0938rem * var(--type-scale));
  color:var(--bulb);margin-bottom:8px}
.coin-notice p{margin:0 0 9px;font-size:calc(0.9375rem * var(--type-scale));line-height:1.6;color:var(--glass)}
.coin-notice .coin-old{font-size:calc(0.8125rem * var(--type-scale));color:var(--pewter-dk);word-break:break-all}
.coin-notice .btn{margin-top:4px;font-size:calc(0.8438rem * var(--type-scale));padding:10px 16px}

/* ── cabinets are places ─────────────────────────────────────────────── */
.cab{display:flex;flex-direction:column;gap:3px;align-items:center;line-height:1.2}
.cab-name{font-size:calc(0.7812rem * var(--type-scale));letter-spacing:.14em}
.cab-sub{font-size:calc(0.6562rem * var(--type-scale));letter-spacing:.06em;text-transform:none;opacity:.75}
.cab.locked{opacity:.5}
.cab.theme-frontier.on{background:linear-gradient(180deg,#D9A441,#B07E27);border-color:#D9A441}
.cab.theme-deepspace.on{background:linear-gradient(180deg,#7FA9D9,#4E77A8);border-color:#7FA9D9;color:#0A2126}
.cab.theme-dragon.on{background:linear-gradient(180deg,#D96C6C,#9C3229);border-color:#D96C6C;color:#F6EEE0}

/* the cabinet you are at colours the machine around it */
body[data-theme="frontier"]{--bulb:#D9A441}
body[data-theme="deepspace"]{--bulb:#7FA9D9}
body[data-theme="dragon"]{--bulb:#E0574F}

/* ── the public front ────────────────────────────────────────────────── */
body.landing{padding-top:24px}
.top nav .btn{font-family:'Bungee',system-ui,sans-serif}

.hero{max-width:760px;margin:34px auto 30px;text-align:center;padding:0 8px}
.hero h2{font-family:'Bungee',system-ui,sans-serif;font-size:clamp(calc(1.625rem * var(--type-scale)),6.2vw,calc(2.875rem * var(--type-scale)));
  line-height:1.15;margin:0 0 14px;color:var(--glass);
  text-shadow:0 0 26px rgba(232,163,61,.35),0 3px 0 var(--enamel-dk)}
.hero-sub{font-size:clamp(calc(0.9375rem * var(--type-scale)),2.4vw,calc(1.1875rem * var(--type-scale)));color:var(--pewter);margin:0 auto 22px;max-width:560px;line-height:1.55}
.hero-cta .btn{font-size:calc(1.0312rem * var(--type-scale));padding:15px 30px}
.hero-fine{margin-top:14px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.step{background:rgba(10,33,38,.45);border:1px solid rgba(180,172,156,.16);border-radius:9px;padding:15px}
.step b{display:block;font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.4375rem * var(--type-scale));color:var(--bulb);margin-bottom:7px}
.step p{margin:0;font-size:calc(0.9375rem * var(--type-scale));line-height:1.6;color:var(--pewter)}

.cabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.cabcard{background:rgba(10,33,38,.5);border:1px solid rgba(180,172,156,.18);border-radius:9px;padding:15px}
.cabcard b{display:block;font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.0312rem * var(--type-scale));color:var(--bulb);margin-bottom:8px}
.cabcard p{font-size:calc(0.9062rem * var(--type-scale));line-height:1.6;color:var(--pewter);margin:9px 0 0}

.prose h1{font-family:'Bungee',system-ui,sans-serif;font-size:clamp(calc(1.375rem * var(--type-scale)),4.5vw,calc(1.875rem * var(--type-scale)));
  margin:0 0 18px;color:var(--glass)}
.prose h2{font-size:calc(1.0938rem * var(--type-scale));margin:22px 0 9px;color:var(--bulb);
  font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:0;text-transform:none}
.prose p, .prose li{font-size:calc(1.0rem * var(--type-scale));line-height:1.7;color:var(--glass);opacity:.92}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}
.prose em{color:var(--pewter-dk)}
.prose a{color:var(--bulb)}

.pubfoot{max-width:860px;margin:34px auto 0;text-align:center;
  border-top:1px solid rgba(180,172,156,.16);padding-top:20px}
.pubfoot nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:12px}
/* The footer links are signposts, not reading. They came up with everything
   else in the v1.5 type pass and ended up competing with the content above
   them, so they go back down on their own. */
.pubfoot nav a{font-family:ui-monospace,'Space Mono',monospace;
  font-size:calc(0.6562rem * var(--type-scale));letter-spacing:.1em;
  text-transform:uppercase;color:var(--pewter);text-decoration:none}
.pubfoot nav a:hover{color:var(--bulb)}

/* ── the demo machine on the front page ──────────────────────────────── */
.demo-wrap{max-width:660px;margin:0 auto 8px}
.demo-machine{position:relative}
.demo-deck{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.demo-tag{font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.7188rem * var(--type-scale));letter-spacing:.16em;
  text-transform:uppercase;color:var(--pewter-dk)}
.demo-lever{padding:13px 26px;font-size:calc(0.9688rem * var(--type-scale));text-decoration:none}

/* the hero splits around the machine */
.hero{margin-bottom:22px}
.hero-after{margin:20px auto 30px}
.hero-after .hero-cta .btn{font-size:calc(1.0312rem * var(--type-scale));padding:15px 30px}

@media (max-width:640px){
  .demo-deck{flex-direction:column;gap:10px}
  .demo-lever{width:100%;text-align:center}
}

/* ── advertising placements ──────────────────────────────────────────── */
/* An empty slot renders nothing at all, so these never reserve space they
   are not using. Centred and clipped so a wide tag cannot break the layout. */
/* Ad slots position the code and never touch it.
   The previous rules rewrote what operators pasted in: height:auto collapsed
   any iframe (an iframe has no intrinsic ratio, so there is nothing for auto
   to compute), max-width rescaled fixed-size creatives, and overflow:hidden
   silently clipped anything wider than the column — which is what "outsized"
   ads actually were. A banner is sold at a fixed size; resizing it is not ours
   to do. Wide content scrolls rather than being cut off. */
.adslot{margin:0 auto 14px;text-align:center;overflow-x:auto;overflow-y:visible}
.adslot:empty{display:none;margin:0}
.adslot-header{margin-top:0;margin-bottom:16px}
.adslot-popup{display:none}

/* ── standalone pages: sign in, sign up, verification, 404 ───────────── */
/* These used to be bare panels on the background with no way out. They now
   carry the same navigation and footer as everything else, so the panel is
   simply narrower content inside the normal shell. */
body.shell{padding-top:24px}
.shellwrap{max-width:520px;margin-top:34px}
.shellwrap .panel{padding:26px 24px}
.shellwrap .panel h1.mk{font-size:clamp(calc(1.375rem * var(--type-scale)),5vw,calc(1.875rem * var(--type-scale)))}

@media (max-width:640px){
  .shellwrap{margin-top:18px}
}
.panel-h{font-family:'Bungee',system-ui,sans-serif;font-size:calc(1.25rem * var(--type-scale));letter-spacing:.02em;
  color:var(--glass);margin:0 0 18px}

/* ── an acknowledged invitation ──────────────────────────────────────── */
.invited{background:linear-gradient(180deg,rgba(95,112,49,.24),rgba(10,33,38,.6));
  border:1px solid rgba(95,112,49,.55);border-radius:10px;padding:13px 16px;
  font-size:calc(0.9375rem * var(--type-scale));line-height:1.6;color:var(--glass);text-align:center;margin-bottom:6px}
.invited b{color:var(--bulb)}


/* ── the swap machine, linked to by anchor from the nav and the box note ── */
#swap{scroll-margin-top:18px}

/* ── the swap picker ─────────────────────────────────────────────────── */
.swaptray{display:flex;gap:10px;flex-wrap:wrap}
.swapslot{width:52px;height:52px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;border:2px dashed rgba(180,172,156,.32);background:rgba(10,33,38,.4)}
.swapslot.filled{border-style:solid;border-color:var(--bulb);cursor:pointer;
  background:linear-gradient(180deg,#1B2637,#0E1826)}
.swapslot .slotnum{font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.8438rem * var(--type-scale));color:var(--pewter-dk)}
.swapslot .chip{width:44px;height:44px;animation:none}

.swappick{gap:7px}
.chipbtn{padding:0;margin:0;background:none;border:0;border-radius:7px;cursor:pointer;
  line-height:0;box-shadow:none}
.chipbtn:hover:not(:disabled){transform:translateY(-2px)}
.chipbtn.chosen .chip{outline:2px solid var(--bulb);outline-offset:1px}
.chipbtn.spent{opacity:.32;cursor:not-allowed}
.chipbtn:disabled{cursor:not-allowed}
.chipbtn:disabled:not(.spent){opacity:.55}

/* which collection the box is showing */
.boxwhich{font-family:'Space Grotesk',system-ui,sans-serif;font-size:calc(0.8438rem * var(--type-scale));font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--pewter-dk);margin-left:8px}

/* ── the collection panel ────────────────────────────────────────────── */
.colhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.modes{display:flex;gap:0;border:1px solid rgba(180,172,156,.28);border-radius:8px;overflow:hidden}
.modes .mode{margin:0;border:0;border-radius:0;background:rgba(10,33,38,.5);
  font-family:ui-monospace,'Space Mono',monospace;
  font-size:calc(0.75rem * var(--type-scale));letter-spacing:.12em;text-transform:uppercase;
  padding:8px 16px;color:var(--pewter);box-shadow:none}
.modes .mode.on{background:linear-gradient(180deg,var(--bulb),#B07E27);color:var(--enamel-dk)}
.modes .mode + .mode{border-left:1px solid rgba(180,172,156,.28)}

.subhead{font-size:calc(0.8125rem * var(--type-scale));margin:22px 0 6px}

/* a held symbol says so, rather than a paragraph saying so */
.chipbtn{position:relative}
.chipbtn .pin{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  font-family:ui-monospace,'Space Mono',monospace;font-size:calc(0.5rem * var(--type-scale));
  letter-spacing:.1em;color:var(--enamel-dk);background:var(--bulb);
  padding:1px 4px;border-radius:3px;font-style:normal}

.setlist{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.setrow{display:flex;align-items:center;gap:14px;background:rgba(10,33,38,.45);
  border:1px solid rgba(180,172,156,.14);border-radius:8px;padding:9px 13px}
.setrow span{flex:1;font-size:calc(0.875rem * var(--type-scale))}
.setrow b{color:var(--bulb);font-family:ui-monospace,'Space Mono',monospace}
.setrow .quiet{margin:0;padding:7px 14px;font-size:calc(0.6875rem * var(--type-scale))}

/* bulk hold controls under the box, and the cash-all button under held sets */
.bulkhold{display:flex;gap:8px;margin-top:12px}
.bulkhold[hidden]{display:none}
.cashall{margin-top:11px;width:100%;border-color:rgba(214,171,90,.5);color:var(--bulb)}
.cashall:hover{border-color:var(--bulb)}

.rainrows{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.rainrow{display:flex;align-items:center;gap:12px;font-size:calc(0.8125rem * var(--type-scale))}
.rainrow .bar{flex:1;height:6px;border-radius:3px;background:rgba(10,33,38,.6);overflow:hidden}
.rainrow .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--bulb),#D96C6C)}

/* nothing in the panel responds while the reels are moving */
#collection.busy{opacity:.55;pointer-events:none}
#swapdeck{margin-top:12px}

/* 2FA enrolment QR — a white plate so scanners get the contrast they need
   even though the admin runs dark. */
.qr{display:inline-block;margin:12px 0;padding:10px;background:#fff;border-radius:8px;line-height:0}
.qr svg{display:block;width:196px;height:196px}

/* Admin → Live: the presence HUD. Auto-fit rather than flex-grow: a wrapped
   flex row stretches the odd tile out to full width, which reads as a headline
   when it is just the last one that did not fit. */
.hud-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.hud-tile{padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:10px;text-align:center}
.hud-stamp{margin:0 0 14px}
.hud-stamp b{color:var(--bulb)}
#hud-table{width:100%}
#hud-table td,#hud-table th{white-space:nowrap}
.hud-tile b{display:block;font-size:calc(1.5rem * var(--type-scale));color:var(--bulb);line-height:1.2}
.hud-tile span{font-size:calc(0.6875rem * var(--type-scale));opacity:.7;letter-spacing:.04em;text-transform:uppercase}
.hud-pages{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.hud-chip{padding:5px 11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:calc(0.75rem * var(--type-scale))}
.hud-chip b{color:var(--bulb)}
.hud-now{color:#5FBF7F}

/* Admin dashboard. A fixed auto-fit grid rather than flex-grow, so the last
   tile in a wrapped row does not stretch to full width and read as a headline. */
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:12px}
.dashgrid .stat{padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:10px;text-align:center}
.dashgrid .stat b{display:block;font-size:calc(1.4rem * var(--type-scale));color:var(--bulb);line-height:1.25}
.dashgrid .stat b.good{color:var(--good)}
.dashgrid .stat b.bad{color:var(--bad)}
.dashgrid .stat span{display:block;margin-top:3px;font-size:calc(0.6875rem * var(--type-scale));opacity:.75;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.5}
.dashgrid .stat span a{opacity:.9}
.up{color:var(--good)}
.down{color:var(--bad)}
.flat{opacity:.6}
.note.bad{color:var(--bad);opacity:1}
.sparkwrap{margin-top:16px}
.spark{display:block;width:100%;height:44px}

/* Admin settings: tabs, search and a labelled row per setting. */
.setbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.setbar input[type=search]{flex:1;margin:0}
.tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tab{padding:8px 14px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:none;
  color:inherit;cursor:pointer;font-size:calc(0.8125rem * var(--type-scale));font-family:inherit}
.tab:hover{border-color:rgba(255,255,255,.3)}
.tab.on{border-color:var(--bulb);color:var(--bulb)}
.tabn{opacity:.55;margin-left:5px;font-size:calc(0.6875rem * var(--type-scale))}
.tabpane{display:none}
.tabpane.on{display:block}
.setrow2{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.setrow2:last-child{border-bottom:none}
.setrow2 label{margin-bottom:4px}
.setrow2 .note{margin:0}
.setkey{margin:4px 0 0;opacity:.35;font-size:calc(0.6875rem * var(--type-scale))}

/* Multi-line settings — verification tags arrive several at a time. */
.bigbox{width:100%;min-height:150px;resize:vertical;line-height:1.55;
  font-size:calc(0.8125rem * var(--type-scale));white-space:pre;overflow-wrap:normal;overflow-x:auto}

/* The row a risk warning sent you to look at. */
tr.hit td{background:rgba(232,163,61,.08)}
.whylink{margin-left:6px;white-space:nowrap}

/* Operator notices, above the page. */
.notice{position:relative;padding:14px 16px;margin-bottom:14px;border-radius:9px;
  border:1px solid rgba(232,163,61,.35);background:rgba(232,163,61,.09)}
.notice-good{border-color:rgba(127,191,106,.4);background:rgba(127,191,106,.09)}
.notice-warn{border-color:rgba(217,122,108,.4);background:rgba(217,122,108,.09)}
.notice-t{display:block;color:var(--bulb);margin-bottom:5px}
.notice-good .notice-t{color:var(--good)}
.notice-warn .notice-t{color:var(--bad)}
.notice-b p{margin:0 0 7px;font-size:calc(0.9062rem * var(--type-scale))}
.notice-b p:last-child{margin-bottom:0}
.notice-x{margin-top:9px}
.notice-x button{margin:0}


/* The AdsLab task list on the Earn page. */
.tasklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px}
.task{display:flex;gap:11px;align-items:center;padding:11px 12px;border:1px solid rgba(255,255,255,.09);
  border-radius:10px;text-decoration:none;color:inherit;background:rgba(255,255,255,.02)}
.task:hover{border-color:var(--bulb)}
.task-i{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 44px;background:var(--enamel-dk)}
.task-i-blank{display:flex;align-items:center;justify-content:center;font-family:'Bungee',sans-serif;
  color:var(--bulb);font-size:calc(1rem * var(--type-scale))}
.task-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.task-t{font-size:calc(0.875rem * var(--type-scale));line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-d{font-size:calc(0.75rem * var(--type-scale));opacity:.65;line-height:1.35}
.task-m{font-size:calc(0.6875rem * var(--type-scale));opacity:.5;text-transform:uppercase;letter-spacing:.04em}
.task-r{flex:0 0 auto;text-align:center;font-family:'Bungee',sans-serif;color:var(--bulb);
  font-size:calc(1rem * var(--type-scale));line-height:1.1}
.task-r small{display:block;font-family:inherit;font-size:calc(0.625rem * var(--type-scale));opacity:.6}