/* Insert Coin shell: design tokens, the top bar, buttons, the account menu, and its dialogs.
   Every arcade page links this and mounts the shell from shell.js. */
:root {
  --cyan: #22e6ff; --cyan-hi: #8ff4ff; --pink: #ff3df2; --violet: #9d7bff; --gold: #ffd76a; --ok: #39ff88; --red: #ff2e4d;
  --ink: #f1f6ff; --soft: #b9c4de; --dim: #7a86a6; --bg: #02010a;
  --line: rgba(160, 180, 255, .16); --line-hi: rgba(200, 215, 255, .32);
  --display: 'Orbitron', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--ink); font-family: var(--mono); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
iconify-icon { display: inline-block; vertical-align: -0.15em; }
a { color: inherit; }

/* ---------- top bar ---------- */
.topbar { position: fixed; top: calc(14px + var(--announce-h, 0px)); left: 16px; right: 16px; z-index: 20; display: flex; align-items: center; gap: 18px;
  height: 58px; padding: 0 10px 0 12px; border-radius: 16px; background: rgba(6, 5, 20, .5); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font: 900 15px var(--display); letter-spacing: .16em; white-space: nowrap; }
/* the dragon head: wider than tall, so it keeps its own width at the bar's height (its glow is in the art) */
.brand .mark { height: 40px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(34, 230, 255, .35)); }
.brand .mark img { width: auto; height: 100%; display: block; }
/* hover (or keyboard focus): a shine sweeps across the logo, a white glint over the dragon (masked to its shape)
   carrying on as a cyan glint across INSERT COIN */
.brand .mark { position: relative; }
.brand .mark::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url(/brand/nav-mark.png) center / contain no-repeat; mask: url(/brand/nav-mark.png) center / contain no-repeat; }
.brand .word { background: linear-gradient(105deg, currentColor 0 42%, var(--cyan-hi) 50%, currentColor 58% 100%) no-repeat; background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand:hover .mark::after, .brand:focus-visible .mark::after { animation: brandShine .6s ease-in-out; }
.brand:hover .word, .brand:focus-visible .word { animation: brandGlint .7s ease-in-out .18s; }
@keyframes brandShine { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0% 0; } }
@keyframes brandGlint { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .brand:hover .mark::after, .brand:hover .word { animation: none; } }
.links { display: flex; gap: 4px; margin-left: 10px; }
.links a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; font: 700 11px var(--display); letter-spacing: .18em; color: var(--soft); padding: 10px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.links a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.links a[aria-current="page"] { color: var(--cyan); background: rgba(34, 230, 255, .08); }
.links iconify-icon { font-size: 16px; width: 1em; height: 1em; flex-shrink: 0; } /* its room is kept before the icon loads, so the bar's width is right from the start */
.links svg.navico { width: 17px; height: 17px; flex-shrink: 0; } /* the Trollbox and Faucet icons are inline SVG (see troll.js, faucet.js) */
.spacer { flex: 1; }
/* a game's own menu (shell.setGameMenu): a button with the game's name, set apart from the site's pages by a divider */
.game-nav { position: relative; margin-left: 4px; padding-right: 14px; border-right: 1px solid var(--line-hi); }
.game-nav[hidden], .game-group[hidden] { display: none; }
.game-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; cursor: pointer; white-space: nowrap; font: 800 11px var(--display); letter-spacing: .14em; color: var(--ink);
  background: linear-gradient(90deg, rgba(34, 230, 255, .16), rgba(255, 61, 242, .16)); border: 1px solid rgba(255, 255, 255, .28); transition: border-color .2s, box-shadow .2s; }
.game-chip:hover, .game-chip[aria-expanded="true"] { border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 22px rgba(120, 90, 255, .4); }
.game-chip iconify-icon { font-size: 17px; color: var(--cyan); }
.game-chip .chev { font-size: 14px; color: var(--soft); }
.game-menu { position: absolute; left: 0; top: calc(100% + 12px); min-width: 230px; padding: 8px; border-radius: 14px; z-index: 30; background: rgba(8, 7, 24, .97); border: 1px solid var(--line-hi); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.game-menu[hidden] { display: none; }
.game-menu button, .game-group button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left;
  font: 600 12.5px var(--mono); letter-spacing: normal; color: var(--soft); }
.game-menu button:hover, .game-group button:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.game-menu button iconify-icon, .game-group button iconify-icon { font-size: 18px; color: var(--cyan); flex-shrink: 0; }
.nav-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font: 800 9.5px var(--display); letter-spacing: .22em; color: var(--dim); }
.nav-label.game-label { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--pink)); -webkit-background-clip: text; background-clip: text; }
.nav-label.game-label iconify-icon { font-size: 15px; color: var(--cyan); }
.links .game-group, .links .site-label { display: none; } /* these two are for the phone menu */
.online-pill { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); color: var(--soft); padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 900 13px var(--display); letter-spacing: .2em; padding: 16px 24px; border-radius: 14px; transition: transform .15s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-coin { color: #050414; background: linear-gradient(100deg, var(--cyan-hi), var(--cyan) 30%, var(--violet) 65%, var(--pink)); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(220, 250, 255, .55) inset, 0 10px 30px rgba(34, 230, 255, .3), 0 0 60px rgba(255, 61, 242, .3); }
.btn-coin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 3.2s ease-in-out infinite; }
@keyframes sheen { 55%, 100% { transform: translateX(120%); } }
.btn-coin:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(220, 250, 255, .8) inset, 0 14px 40px rgba(34, 230, 255, .45), 0 0 90px rgba(255, 61, 242, .5); transform: translateY(-2px); }
.btn-ghost { color: var(--ink); background: rgba(10, 10, 30, .45); border: 1px solid var(--line-hi); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 30px rgba(34, 230, 255, .25); transform: translateY(-2px); }
.btn-sm { padding: 11px 16px; font-size: 11px; border-radius: 11px; }
.btn iconify-icon { font-size: 18px; }

/* ---------- account ---------- */
.shell-account { position: relative; }
.acct { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 5px; border-radius: 12px; cursor: pointer; color: var(--ink);
  font: 700 12px var(--mono); background: rgba(10, 10, 30, .5); border: 1px solid var(--line-hi); transition: border-color .2s, box-shadow .2s; }
.acct:hover, .acct[aria-expanded="true"] { border-color: var(--cyan); box-shadow: 0 0 20px rgba(34, 230, 255, .2); }
.avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 900 13px var(--display); color: #050414;
  background: linear-gradient(135deg, var(--cyan-hi), var(--violet) 55%, var(--pink)); box-shadow: 0 0 14px rgba(157, 123, 255, .5); }
.acct .nm { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.acct .nm .bal { font: 700 10px var(--mono); color: var(--ok); letter-spacing: 0; text-transform: none; }
.acct-menu .who .balance { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(57, 255, 136, .07); border: 1px solid rgba(57, 255, 136, .25); }
.acct-menu .who .balance span { font-size: 10.5px; color: var(--dim); }
.acct-menu .who .balance b { margin: 0; font: 800 12.5px var(--mono); color: var(--ok); white-space: nowrap; }
.acct iconify-icon { font-size: 14px; color: var(--dim); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(260px, calc(100vw - 24px)); padding: 8px; border-radius: 14px; z-index: 30;
  background: rgba(8, 7, 24, .95); border: 1px solid var(--line-hi); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.acct-menu[hidden] { display: none; }
.acct-menu .who { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-size: 11px; color: var(--dim); }
.acct-menu .who b { display: block; margin: 4px 0 2px; font: 800 15px var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.acct-menu .who small { font-size: 10.5px; }
.acct-menu .who .addr-line { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 10.5px; line-height: 1.3; }
.acct-menu .who .addr-line span { font: 500 10.5px var(--mono); color: var(--dim); white-space: nowrap; }
/* the copy icon matches the address text: same size, same line */
.acct-menu .who .addr-line button { flex: none; width: auto; gap: 0; display: inline-flex; align-items: center; height: 1lh; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--dim); cursor: pointer; font-size: 10.5px; line-height: inherit; }
/* the menu's icons are 17px; this one is sized to the address text (it needs its own rule to beat that) */
.acct-menu .who .addr-line iconify-icon { font-size: 12px; color: inherit; }
.acct-menu .who .addr-line button:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.acct-menu a, .acct-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 9px; border: 0; background: transparent; cursor: pointer;
  color: var(--soft); text-decoration: none; font: 600 12px var(--mono); text-align: left; }
.acct-menu a:hover, .acct-menu button:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.acct-menu iconify-icon { font-size: 17px; color: var(--cyan); }
.acct-menu .hint, .acct-menu .hint iconify-icon { color: var(--gold); }
.acct-menu .price { margin-left: auto; font-size: 10.5px; color: var(--dim); }

/* ---------- dialogs ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(2, 1, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal .sheet { position: relative; width: min(480px, 100%); padding: 30px 28px 26px; border-radius: 22px; background: rgba(9, 8, 26, .96); border: 1px solid var(--line-hi);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 80px rgba(157, 123, 255, .2); }
.modal .sheet > img.logo { width: 64px; height: 64px; display: block; margin-bottom: 14px; filter: drop-shadow(0 0 16px rgba(34, 230, 255, .5)); }
.modal h2 { margin: 0 0 8px; font: 900 24px var(--display); letter-spacing: .08em; }
.modal p { margin: 0 0 16px; color: var(--soft); font-size: 13px; line-height: 1.7; }
.modal p b { color: var(--ink); }
.modal textarea { width: 100%; min-height: 86px; resize: vertical; padding: 12px; border-radius: 12px; font: 12px var(--mono); color: var(--ink); word-break: break-all;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-hi); }
.modal textarea:focus, .modal input[type=text]:focus, .modal input[type=email]:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 230, 255, .15); }
.modal input[type=text], .modal input[type=email] { width: 100%; padding: 13px 14px; border-radius: 12px; font: 700 15px var(--mono); color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--line-hi); }
.modal .file { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: 11.5px; color: var(--dim); }
.modal .file input { font: 11px var(--mono); color: var(--soft); max-width: 100%; }
.modal .err { min-height: 20px; margin: 8px 0; font-size: 12px; color: #ff8a97; }
.modal .safe { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--dim); margin: 14px 0 0; line-height: 1.6; }
.modal .safe iconify-icon { color: var(--ok); font-size: 16px; flex-shrink: 0; }
.modal .x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--soft); cursor: pointer; font-size: 15px; }
.modal .x:hover { color: var(--ink); border-color: var(--line-hi); }
.modal .new { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
.modal .new a { color: var(--cyan); }
.modal .warn { border: 1px solid rgba(255, 77, 94, .4); background: rgba(255, 77, 94, .08); border-radius: 12px; padding: 11px 13px; font-size: 12px; color: #ffc9cf; line-height: 1.6; margin: 0 0 14px; }
.modal .note { border: 1px solid rgba(255, 215, 106, .35); background: rgba(255, 215, 106, .07); border-radius: 12px; padding: 11px 13px; font-size: 12px; color: #ffe9b3; line-height: 1.6; margin: 14px 0 0; }
.modal .code { filter: blur(5px); transition: filter .2s; }
.modal .code.shown { filter: none; }
.modal .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* a price or balance line: label on the left, value on the right */
.modal .kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.modal .kv b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.modal .kv small { display: block; color: var(--dim); font-weight: 400; }
.modal .kvs { margin: 14px 0 6px; border-bottom: 1px solid var(--line); }
/* add BSV */
.fund { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; margin: 6px 0 4px; }
.fund .qr { background: #fff; padding: 10px; border-radius: 14px; width: 164px; height: 164px; box-shadow: 0 0 40px rgba(34, 230, 255, .25); }
.fund .qr img, .fund .qr canvas { width: 144px !important; height: 144px !important; display: block; }
.fund .addr { font: 600 12px var(--mono); color: var(--ink); word-break: break-all; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.fund .bal { margin-top: 12px; font: 800 22px var(--mono); font-variant-numeric: tabular-nums; }
.fund .bal small { font: 400 11px var(--mono); color: var(--dim); margin-left: 4px; }
.fund .usd { font-size: 12px; color: var(--dim); }
.fund-status { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 11px 13px; border-radius: 12px; font-size: 12.5px; color: var(--soft); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.fund-status.got { color: #c9ffe0; border-color: rgba(57, 255, 136, .45); background: rgba(57, 255, 136, .08); }

/* footer company line */
.legal { font: 700 11px var(--display); letter-spacing: .14em; color: var(--soft); }
.legal a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; }
.legal a:hover, .legal a:focus-visible { text-decoration: underline; }

#shell-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 70; padding: 12px 18px; border-radius: 12px; font-size: 13px; opacity: 0; pointer-events: none;
  background: rgba(9, 8, 26, .95); border: 1px solid var(--line-hi); transition: opacity .3s, transform .3s; max-width: calc(100vw - 32px); }
#shell-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* The bar never shrinks its pages to icons: it shows every page by name, and when that no longer fits (measured
   by shell.js, so it holds for the longest game name and account name) it first drops the online count, then
   switches to the hamburger menu below. Phones always get the hamburger. */
.topbar.no-online .online-pill { display: none; }
.nav-toggle { display: none; } /* the hamburger: phones, and any bar too narrow for every page's name */
/* ---------- phones, small tablets and any bar too narrow for every page's name: hamburger left, the full logo centered, the account right.
   The hamburger opens the links as a panel that slides down under the bar, each with its icon and name. ---------- */
.topbar.compact { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; height: 54px; padding: 0 8px; }
.topbar.compact.nav-open { z-index: 45; } /* above a game's own buttons while the menu is open */
.topbar.compact .nav-toggle { display: grid; place-items: center; justify-self: start; width: 40px; height: 40px; padding: 0; border-radius: 11px; font-size: 23px; color: var(--ink);
  background: rgba(10, 10, 30, .45); border: 1px solid var(--line); cursor: pointer; }
.topbar.compact.nav-open .nav-toggle { color: var(--cyan); border-color: var(--cyan); }
.topbar.compact .brand { justify-self: center; font-size: 13px; letter-spacing: .1em; gap: 8px; }
.topbar.compact .brand .mark { height: 34px; }
.topbar.compact .spacer, .topbar.compact .online-pill { display: none; }
.topbar.compact .shell-account { justify-self: end; min-width: 0; }
.topbar.compact .acct .nm { max-width: 84px; }
.topbar.compact .links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; flex-direction: column; gap: 2px; padding: 8px; border-radius: 16px;
  background: #0a0920; border: 1px solid var(--line-hi); box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .2s, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
.topbar.compact.nav-open .links { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.topbar.compact .links a { padding: 14px; gap: 14px; font-size: 12px; border-radius: 11px; }
.topbar.compact .links iconify-icon { font-size: 20px; }
.topbar.compact .links svg.navico { width: 20px; height: 20px; }
/* on a game page: the game's own section first, tinted and boxed, then the site's pages under INSERT COIN */
.topbar.compact .game-nav { display: none; }
.topbar.compact .links .game-group:not([hidden]) { display: block; margin-bottom: 6px; padding: 4px; border-radius: 12px; background: linear-gradient(135deg, rgba(34, 230, 255, .08), rgba(255, 61, 242, .08)); border: 1px solid rgba(255, 255, 255, .12); }
.topbar.compact.has-game .links .site-label { display: flex; }
.topbar.compact .links .nav-label { padding: 10px 14px 6px; }
.topbar.compact .links .game-group button { padding: 13px 14px; gap: 14px; font-size: 13px; color: var(--ink); }
.topbar.compact .links .game-group button iconify-icon { font-size: 20px; }
.topbar.compact .links { max-height: calc(100dvh - var(--announce-h, 0px) - 96px); overflow-y: auto; }
@media (min-width: 761px) { .topbar.compact .links { right: auto; width: 340px; } } /* on a wider screen, a panel under the button, not the whole bar */
@media (max-width: 760px) { .fund { grid-template-columns: 1fr; justify-items: center; } }
@media (max-width: 600px) { /* the logo keeps the middle, so the account shrinks to its icon before it can cover the wordmark */
  .acct .nm, .acct > iconify-icon:not(.lock) { display: none; } /* no name or down-arrow: just the icon (and the lock when locked) */
  .acct { padding: 0 6px 0 5px; gap: 6px; }
  .shell-account .btn-sm { padding: 9px 9px; font-size: 10px; letter-spacing: .08em; }
  .shell-account .btn-sm iconify-icon { display: none; } /* just the words LOG IN, so the button can't reach the wordmark */
}
@media (max-width: 440px) {
  .brand { font-size: 12px; letter-spacing: .06em; gap: 7px; }
}
@media (max-width: 350px) { .brand .mark { height: 28px; } .brand { font-size: 11px; letter-spacing: .03em; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
}

/* ---------- content pages (leaderboard, NFTs): the arcade world in CSS, page kicker, segmented tabs ---------- */
/* the arcade world, in CSS: stars, nebula glow, and the neon floor */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1000px 600px at 15% -5%, rgba(157, 123, 255, .22), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(255, 61, 242, .14), transparent 60%),
    radial-gradient(1200px 500px at 50% 110%, rgba(34, 230, 255, .10), transparent 60%),
    linear-gradient(#050316, #02010a 70%); }
.sky::before { content: ''; position: absolute; inset: 0; opacity: .8;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #cfe0ff, transparent), radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 38% 42%, #bcd0ff, transparent), radial-gradient(1px 1px at 86% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 24% 76%, #d8e4ff, transparent), radial-gradient(1px 1px at 58% 88%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 92% 30%, #e8f0ff, transparent), radial-gradient(1px 1px at 6% 52%, #fff, transparent);
  background-size: 420px 420px; animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.floor { position: fixed; left: -50%; right: -50%; bottom: -12vh; height: 48vh; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(106, 60, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 60, 255, .35) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(420px) rotateX(64deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%); animation: roll 3s linear infinite; }
@keyframes roll { to { background-position: 0 64px; } }

.kicker { display: inline-flex; align-items: center; gap: 10px; font: 700 11px var(--display); letter-spacing: .32em; color: var(--cyan); text-shadow: 0 0 12px rgba(34, 230, 255, .6); }
.kicker::before { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 13px; background: rgba(8, 8, 26, .6); border: 1px solid var(--line); }
.seg button { font: 800 10.5px var(--display); letter-spacing: .14em; color: var(--dim); background: transparent; border: 0; border-radius: 9px; padding: 11px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.seg button.on { color: #04040d; background: linear-gradient(180deg, var(--cyan-hi), var(--cyan)); box-shadow: 0 0 20px rgba(34, 230, 255, .45); }
.seg button iconify-icon { font-size: 15px; }

/* a player wearing an NFT: the pixel art as their avatar */
.avatar.nft { object-fit: cover; image-rendering: pixelated; padding: 0; }

/* tip jar */
.tip-heart { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 14px; font-size: 32px; color: #fff;
  background: linear-gradient(135deg, var(--pink), #ff8a5a); box-shadow: 0 0 30px rgba(255, 61, 242, .45); }
.tip-heart.big { width: 72px; height: 72px; font-size: 40px; animation: tip-beat 1.2s ease-in-out infinite; }
@keyframes tip-beat { 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } }
.tip-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tip-amounts .btn { flex-direction: column; gap: 3px; padding: 14px 8px; font-size: 18px; }
.tip-amounts .btn small { font: 600 10px var(--mono); letter-spacing: 0; color: var(--dim); }
.tip-amounts .btn:hover { border-color: var(--pink); box-shadow: 0 0 20px rgba(255, 61, 242, .3); }
.tip-note { margin: 8px 0 18px; font-size: 11.5px; color: var(--dim); }
.tip-qr { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.tip-label { font: 800 9px var(--display); letter-spacing: .18em; color: var(--dim); margin-bottom: 8px; }
.tip-custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-hi); }
.tip-custom span { font: 800 15px var(--mono); color: var(--dim); }
.tip-custom input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); font: 700 15px var(--mono); padding: 8px 0; }
.tip-custom input:focus { outline: none; }
.tip-custom:focus-within { border-color: var(--pink); }

/* the 12-word recovery phrase: blurred until SHOW (new accounts see it straight away) */
.modal .words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 12px; list-style: none; counter-reset: w;
  border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line-hi); filter: blur(6px); user-select: none; transition: filter .25s; }
.modal .words.shown { filter: none; user-select: text; }
.modal .words li { counter-increment: w; font: 700 13px var(--mono); color: var(--ink); padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.modal .words li::before { content: counter(w) '. '; color: var(--dim); font-weight: 400; }
.modal .confirm { display: flex; gap: 10px; align-items: center; margin: 6px 0 12px; font-size: 12.5px; color: var(--soft); cursor: pointer; }
.modal .confirm input { width: 18px; height: 18px; accent-color: var(--cyan); }
.acct .lock { color: var(--gold); font-size: 14px; }
@media (max-width: 420px) { .modal .words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* every dropdown: our own chevron, with room on the right so it never sits against the edge */
select { -webkit-appearance: none; appearance: none; padding-right: 38px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aeb6d6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 11px 7px !important; }
select option { background: #0c0a1f; color: #eef1ff; }

/* ---------- the site footer, the same on every page (the home page's): full width, a hairline on top, copyright on
   the left, "Built with" and the version on the right (shell.js fills it in). Pages never style
   it or add to it. */
.site-foot { position: relative; z-index: 1; box-sizing: border-box; width: 100%; margin: 0; padding: 40px clamp(18px, 6vw, 96px) 36px;
  font: 400 11.5px/1.9 var(--mono); letter-spacing: normal; text-align: left; color: var(--dim);
  border-top: 1px solid var(--line); background: linear-gradient(transparent, rgba(2, 1, 10, .8)); }
.site-foot .foot-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.site-foot .built { text-align: right; }
.site-foot .foot-docs { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 700 11px var(--display); letter-spacing: .14em; }
.site-foot .foot-docs a { color: var(--soft); text-decoration: none; text-underline-offset: 3px; text-transform: uppercase; }
.site-foot .foot-docs a:hover, .site-foot .foot-docs a:focus-visible { color: var(--ink); text-decoration: underline; }
.site-foot a { color: var(--soft); }
.site-foot .foot-nav { display: none; } /* the footer navigation: phones only */
@media (max-width: 760px) { /* phones: the pages again, centered, then the copyright and "Built with" centered under them */
  .site-foot { text-align: center; }
  .site-foot .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-bottom: 18px; }
  .site-foot .foot-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font: 700 10.5px var(--display); letter-spacing: .14em; color: var(--soft); }
  .site-foot .foot-nav a[aria-current="page"] { color: var(--cyan); }
  .site-foot .foot-nav iconify-icon { font-size: 16px; }
  .site-foot .foot-nav svg.navico { width: 16px; height: 16px; }
  .site-foot .foot-row { flex-direction: column; align-items: center; gap: 4px; }
  .site-foot .built { text-align: center; }
  .site-foot .foot-docs { justify-content: center; }
}
#shell-bug-email { margin-top: 10px; font-size: 13px; font-weight: 600; }