/* 3B's Arcade visual kit. Loaded after the legacy stylesheets so the player shell can
   move forward without changing the data or route layer. */
:root {
  --arcade-bg: #0a0f1c;
  --arcade-bg-deep: #070b14;
  --arcade-amber: #ffbf3f;
  --arcade-cream: #fff4d6;
  --arcade-cyan: #53e0ff;
  --arcade-red: #ff3048;
  --arcade-red-bright: #ff4a5e;
  --arcade-muted: #8b9ab0;
  --arcade-felt: #07101d;
}

.loyalty-site { background: var(--arcade-bg); color: var(--arcade-amber); font-family: 'VT323', monospace; }
.loyalty-site a { color: var(--arcade-cyan); }
.loyalty-site button, .loyalty-site input, .loyalty-site select { font-family: inherit; }
.loyalty-main { padding-bottom: 6.5rem; }
.player-game-header { margin: 0; min-height: 0; padding: 0; border: 0; }
.player-shell-bar { align-items: center; background: transparent; border: 0; border-radius: 0; display: flex; height: 0; justify-content: flex-end; min-height: 0; overflow: visible; padding: 0 .75rem; position: relative; }
.player-shell-bar > .shell-brand, .player-shell-bar > .player-shell-username,
.player-shell-bar > .shell-primary-nav, .player-shell-bar > .shell-utility-nav { display: none; }
.player-shell-bar .arcade-legacy-link { display: none; }
.player-shell-bar .arcade-staff-link { background: rgba(6,9,16,.52); border: 0; color: var(--arcade-cyan); display: inline-flex; position: absolute; right: .75rem; top: .35rem; font-family: 'Silkscreen', monospace; font-size: .65rem; letter-spacing: .08em; min-height: 2.75rem; padding: .7rem .35rem; text-decoration: underline; }
.player-shell-bar .arcade-staff-link:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }

.arcade-scanlines { background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px); pointer-events: none; }
.arcade-neon-sign { font-family: 'Yellowtail', cursive; font-weight: 400; letter-spacing: 0; text-transform: none; color: #ffe6e9; text-shadow: 0 0 2px #ff9aa8, 0 0 8px var(--arcade-red), 0 0 20px rgba(255,46,77,.85), 0 0 42px rgba(255,46,77,.55); }
.arcade-pill-primary, .arcade-pill-secondary { align-items: center; border-radius: 999px; display: inline-flex; font-family: 'Silkscreen', monospace; font-size: .7rem; font-weight: 700; justify-content: center; min-height: 2.75rem; padding: 0 1rem; text-decoration: none; }
.arcade-pill-primary { background: var(--arcade-red); border: 0; box-shadow: 0 0 8px rgba(255,48,72,.8), 0 0 18px rgba(255,48,72,.45); color: #fff; text-shadow: 1px 1px 0 #6a0010; }
.arcade-pill-secondary { background: transparent; border: 1.5px solid var(--arcade-cyan); box-shadow: 0 0 7px rgba(83,224,255,.35); color: var(--arcade-cyan); }
.arcade-pill-primary:hover, .arcade-pill-primary:focus-visible { background: #ff5a6e; color: #fff; }
.arcade-pill-secondary:hover, .arcade-pill-secondary:focus-visible { background: rgba(83,224,255,.1); color: #d6f7ff; }
.arcade-pill-primary:focus-visible, .arcade-pill-secondary:focus-visible { outline: 2px solid var(--arcade-cream); outline-offset: 3px; }
.arcade-progress { display: flex; flex: 1; gap: 4px; height: 14px; min-width: 5rem; }
.arcade-progress > span { background: #2a1e08; flex: 1; }
.arcade-progress > span.is-filled { background: #ffcf5a; box-shadow: 0 0 6px var(--arcade-amber), 0 0 16px rgba(255,191,63,.8); }
.arcade-progress[data-tone='cyan'] > span.is-filled { background: #8ff0ff; box-shadow: 0 0 6px var(--arcade-cyan), 0 0 16px rgba(83,224,255,.8); }
.arcade-progress[data-tone='cyan'] > span { background: #082a30; }
.arcade-challenger { align-items: center; border: 2px solid var(--arcade-red-bright); box-shadow: 0 0 14px rgba(255,74,94,.45), inset 0 0 12px rgba(255,74,94,.12); display: flex; gap: .65rem; padding: .5rem .6rem; }
.arcade-challenger-avatar { flex: 0 0 46px; height: 46px; object-fit: cover; width: 46px; }
.arcade-challenger-copy { flex: 1; line-height: 1; min-width: 0; }
.arcade-challenger-kicker { color: #ff8a98; font-size: 1.3rem; text-shadow: 0 0 8px rgba(255,74,94,.9); }
.arcade-challenger-name { color: var(--arcade-cream); font-size: 1.15rem; overflow-wrap: anywhere; }

.arcade-player-home { margin: 0 auto; max-width: 30rem; overflow: hidden; padding: 0; }
.arcade-portrait-stage { height: min(95vw, 372px); max-height: 372px; overflow: hidden; position: relative; }
.arcade-portrait-stage::after { background: linear-gradient(180deg, transparent 45%, rgba(10,15,28,.75) 78%, var(--arcade-bg) 100%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.arcade-portrait-stage .dashboard-portrait, .arcade-portrait-stage .character-empty-art { border: 0; border-radius: 0; display: block; height: 100%; margin: 0; max-width: none; object-fit: cover; object-position: 50% 30%; width: 100%; }
.arcade-portrait-stage .character-empty-art { background: radial-gradient(circle, #192a4a, var(--arcade-bg)); }
.arcade-identity { bottom: .8rem; left: 1rem; position: absolute; right: 4rem; z-index: 2; }
.arcade-identity h1 { font-family: 'Yellowtail', cursive; font-size: clamp(2.8rem, 13vw, 3.35rem); font-weight: 400; line-height: 1; margin: 0; }
.arcade-identity p { color: var(--arcade-cyan); font-size: 1.25rem; margin: .25rem 0 0; text-shadow: 0 0 8px rgba(83,224,255,.8); }
.arcade-gear { background: rgba(6,9,16,.62); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); padding: .2rem .35rem .35rem; position: absolute; right: .6rem; top: .7rem; z-index: 3; }
.arcade-gear summary { cursor: pointer; font-size: 1.25rem; list-style: none; min-height: 2.75rem; padding: .55rem 0; text-align: center; text-shadow: 0 0 6px rgba(255,191,63,.8); }
.arcade-gear summary::-webkit-details-marker { display: none; }
.arcade-gear summary::after { content: '⌄'; font-size: .9rem; margin-left: .25rem; }
.arcade-gear[open] summary::after { content: '⌃'; }
.arcade-gear-items { display: flex; flex-direction: column; gap: .3rem; }
.arcade-gear-item { align-items: center; display: flex; gap: .3rem; min-height: 2.75rem; text-decoration: none; }
.arcade-gear-item img { height: 32px; object-fit: cover; width: 32px; }
.arcade-gear-item span { font-size: .9rem; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-gear-link { align-items: center; display: flex; justify-content: center; min-height: 2.75rem; }
.arcade-home-body { display: flex; flex-direction: column; gap: .85rem; padding: .5rem .85rem 1rem; position: relative; }
.arcade-home-body > * { position: relative; z-index: 2; }
.arcade-stats-row { display: flex; font-size: 1.15rem; gap: .35rem; justify-content: space-between; line-height: 1; }
.arcade-stats-row span { white-space: nowrap; }
.arcade-stats-row strong { color: var(--arcade-cream); text-shadow: 0 0 8px rgba(255,191,63,.8); }
.arcade-progress-list { display: flex; flex-direction: column; gap: .5rem; }
.arcade-progress-row { align-items: center; display: flex; font-size: 1.05rem; gap: .55rem; line-height: 1; }
.arcade-progress-label { min-width: 8.8rem; overflow-wrap: anywhere; }
.arcade-progress-value { color: var(--arcade-cream); min-width: 2.4rem; text-align: right; }
.arcade-feed { display: flex; flex-direction: column; font-size: 1.05rem; gap: .2rem; line-height: 1.05; }
.arcade-feed-line { display: flex; gap: .35rem; justify-content: space-between; }
.arcade-feed-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.arcade-feed-line strong { color: var(--arcade-cream); }
.arcade-feed-time { color: rgba(255,244,214,.55); flex: 0 0 auto; }
.arcade-section-heading { align-items: baseline; display: flex; justify-content: space-between; }
.arcade-section-heading h2 { color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .65rem; letter-spacing: .1em; margin: 0; }
.arcade-section-heading a { font-size: 1.1rem; text-decoration: none; }
.arcade-victims { display: grid; gap: .65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arcade-victim { aspect-ratio: 1; border: 0; border-radius: 6px; box-shadow: 0 0 0 2px var(--arcade-cyan), 0 0 12px rgba(83,224,255,.7); display: block; min-width: 0; object-fit: cover; width: 100%; }
.arcade-victim-missing { align-items: center; background: #13213b; color: var(--arcade-cyan); display: flex; font-size: 2rem; justify-content: center; }
.arcade-bottom-nav { bottom: 0; left: 0; position: fixed; right: 0; z-index: 20; }
.arcade-walnut-rail { background: linear-gradient(180deg, rgba(255,230,190,.25), rgba(0,0,0,0) 40%, rgba(0,0,0,.5)), url('/assets/walnut.jpg') center/cover; box-shadow: 0 -4px 12px rgba(0,0,0,.6); height: 10px; }
.arcade-felt-nav { align-items: center; background: linear-gradient(rgba(2,5,14,.76), rgba(2,5,14,.86)), url('/assets/felt.jpg') center/cover; box-shadow: inset 0 6px 12px rgba(0,0,0,.5); display: grid; grid-template-columns: 96px repeat(4, minmax(0,1fr)); height: 74px; padding: 0 8px 4px; }
.arcade-credits { align-items: center; background: transparent; border: 0; color: var(--arcade-cream); display: flex; flex-direction: column; gap: 4px; justify-self: center; min-height: 44px; padding: 0; }
.arcade-credits-capsule { align-items: center; background: rgba(20,2,2,.75); border: 2px solid #ff4a3a; border-radius: 21px; box-shadow: 0 0 8px #ff4a3a, 0 0 16px rgba(255,74,58,.55), inset 0 0 10px rgba(255,74,58,.35); display: flex; gap: 7px; height: 42px; padding: 0 12px 0 10px; }
.arcade-credits-capsule::before { background: #ff8a7a; border-radius: 2px; box-shadow: 0 0 8px #ff4a3a; content: ''; height: 20px; width: 4px; }
.arcade-credits-value { color: #ffe0da; font-size: 1.65rem; line-height: 1; text-shadow: 0 0 4px #ff4a3a, 0 0 10px #ff4a3a; }
.arcade-credits-label, .arcade-ball-label { color: #fff; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .02em; text-shadow: 0 0 6px currentColor; }
.arcade-nav-link { align-items: center; display: flex; flex-direction: column; gap: 4px; min-height: 44px; text-decoration: none; }
.arcade-ball { align-items: center; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 0 3px currentColor, 0 0 7px color-mix(in srgb, currentColor 33%, transparent), inset 0 -6px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35); display: flex; height: 42px; justify-content: center; overflow: hidden; width: 42px; }
.arcade-ball-bag { background: radial-gradient(circle at 50% 42%, #f0c21c 0%, #d9a70f 55%, #8f6a05 100%); color: #ffd23f; }
.arcade-ball-home { background: #264288; color: var(--arcade-cyan); }
.arcade-ball-games { background: radial-gradient(circle at 50% 42%, #24272c 0%, #121418 60%, #030304 100%); color: #d8dde6; }
.arcade-ball-tab { background: linear-gradient(180deg, #ece6d8 0 25%, #b01a2c 25% 75%, #ece6d8 75%); color: #e0303c; }
.arcade-ball img { border-radius: 50%; display: block; height: 82%; object-fit: cover; width: 82%; }
.arcade-ball-number { align-items: center; background: #f1ece0; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.5); color: #15120c; display: flex; font-size: .875rem; height: 15px; justify-content: center; letter-spacing: -.04em; line-height: 1; width: 15px; }
.arcade-nav-link[aria-current='page'] .arcade-ball { box-shadow: 0 0 3px currentColor, 0 0 12px currentColor, inset 0 -6px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.35); }
.arcade-nav-disabled { cursor: not-allowed; }
.arcade-nav-disabled .arcade-ball-label { color: #9b7180; }

@media (min-width: 48rem) { .arcade-player-home { max-width: 34rem; } }
@media (prefers-reduced-motion: reduce) { .arcade-pill-primary, .arcade-pill-secondary { transition: none; } }

.arcade-player-home { margin: 0 -.75rem; }

.dashboard-page .loyalty-main { max-width: 100%; padding: 0 .75rem 6.5rem; }

.arcade-more-routes { border-top: 1px solid rgba(83,224,255,.28); padding-top: .35rem; }
.arcade-more-routes summary { color: var(--arcade-cyan); cursor: pointer; font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .08em; min-height: 2.75rem; padding: .7rem 0; }
.arcade-more-routes nav { display: flex; flex-wrap: wrap; gap: .55rem 1rem; padding-bottom: .35rem; }
.arcade-more-routes nav a { min-height: 2.75rem; padding-top: .7rem; }
.arcade-identity-line { align-items: baseline; color: var(--arcade-cyan); display: flex; flex-wrap: wrap; gap: .45rem; text-shadow: 0 0 8px rgba(83,224,255,.8); text-transform: uppercase; }
.arcade-identity-line .character-archetype::after { content: "·"; margin-left: .45rem; }
.arcade-progress.is-continuous { background: #2a1e08; }
.arcade-progress.is-continuous > .arcade-progress-fill { flex: 0 0 auto; }
.arcade-progress-more { align-self: flex-end; color: var(--arcade-cyan); font-size: 1.05rem; text-decoration: none; }


/* Phase 2: Bag and arcade lobby */
/* The title glow spans the whole window (as on Top Shelf), not just the page's column, so it has no hard edge. */
body:has(.arcade-bag-page), body:has(.arcade-games-lobby) { background-image: radial-gradient(120% 20rem at 20% 0%, rgba(255,58,84,.14), transparent 70%); background-repeat: no-repeat; }
.arcade-bag-page, .arcade-games-lobby { margin: 0 auto; max-width: 30rem; min-height: calc(100vh - 6.5rem); padding: 1.1rem .1rem 1rem; position: relative; }
.arcade-bag-heading, .arcade-games-heading { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: .8rem; }
.arcade-bag-heading h1, .arcade-games-heading h1 { font-family: 'Yellowtail', cursive; font-size: clamp(2.5rem, 11vw, 3.1rem); font-weight: 400; line-height: 1; margin: 0; }
.arcade-bag-count, .arcade-games-lit { color: var(--arcade-cream); font-size: 1.25rem; }
.arcade-bag-count span { color: var(--arcade-amber); font-size: .85rem; }
.arcade-games-lit { color: var(--arcade-cyan); text-shadow: 0 0 6px rgba(83,224,255,.7); }
.arcade-equipped { margin-bottom: .8rem; }
.arcade-equipped-label { color: #8a6a2a; font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .1em; margin-bottom: .35rem; }
.arcade-equipped-grid { display: grid; gap: .35rem; grid-template-columns: repeat(6,minmax(0,1fr)); }
.arcade-equipped-slot { align-items: center; color: #8a6a2a !important; display: flex; flex-direction: column; font-size: .82rem; gap: .2rem; min-width: 0; text-decoration: none; }
.arcade-equipped-art { align-items: center; background: #101827; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); display: flex; height: 3rem; justify-content: center; overflow: hidden; width: 100%; }
.arcade-equipped-art img { display: block; height: 100%; object-fit: cover; width: 100%; }
.arcade-equipped-empty .arcade-equipped-art { border: 1px dashed rgba(255,191,63,.24); box-shadow: none; }
.arcade-filter-tabs { border-bottom: 1px solid rgba(255,191,63,.2); display: flex; justify-content: space-between; margin: .2rem 0 .55rem; }
.arcade-filter-tab { color: var(--arcade-amber) !important; font-size: 1.2rem; min-height: 2.75rem; padding: .35rem .05rem; text-decoration: none; }
.arcade-filter-tab:hover, .arcade-filter-tab:focus-visible, .arcade-filter-active { color: var(--arcade-cream) !important; text-decoration: underline; text-decoration-color: var(--arcade-red-bright); text-decoration-thickness: 2px; text-underline-offset: .35rem; }
.arcade-bag-page .help-button { background: transparent; border: 0; color: var(--arcade-muted); font-size: .85rem; margin: 0 0 .35rem auto; min-height: 2.75rem; }
.arcade-bag-routes { margin-top: .8rem; }

.arcade-games-lobby { display: flex; flex-direction: column; gap: .75rem; }
.arcade-cabinet { border: 2px solid; border-radius: 6px; box-shadow: 0 0 14px rgba(255,74,94,.3), inset 0 0 14px rgba(255,74,94,.08); padding: .65rem; }
.arcade-cabinet-slot { border-color: var(--arcade-red-bright); }
.arcade-cabinet-top, .arcade-cabinet-bottom, .arcade-small-cabinet-head { align-items: center; display: flex; justify-content: space-between; }
.arcade-cabinet h2 { color: #ffe6e9; font-family: 'Yellowtail',cursive; font-size: 2rem; font-weight: 400; line-height: 1; margin: 0; text-shadow: 0 0 8px var(--arcade-red); }
.arcade-cabinet h2 span { color: #8a6a2a; font-family: 'VT323',monospace; font-size: 1rem; text-shadow: none; }
.arcade-jackpot { align-items: baseline; background: #060202; border-radius: 3px; display: flex; gap: .35rem; padding: .25rem .4rem; }
.arcade-jackpot b { color: #ff8a98; font-family: 'Silkscreen',monospace; font-size: .46rem; }
.arcade-jackpot { color: #ff4a3a; font-size: 1.7rem; text-shadow: 0 0 8px rgba(255,74,58,.95); }
.arcade-reels { background: repeating-linear-gradient(90deg,#140c04 0 6px,#2b1908 6px 12px); border-radius: 7px; margin: .65rem 0; padding: .35rem; }
.arcade-reel-grid { background: #05070c; border: 1px solid #2a2d33; display: grid; gap: 2px; grid-template-columns: repeat(5,minmax(0,1fr)); padding: .2rem; position: relative; }
.arcade-reel-cell { align-items: center; background: linear-gradient(180deg,#030406,#141a26 50%,#030406); display: flex; height: 2.5rem; justify-content: center; }
.arcade-reel-cell img { filter: drop-shadow(0 0 2px var(--arcade-amber)) drop-shadow(0 0 5px rgba(255,191,63,.7)); height: 1.75rem; max-width: 90%; }
.arcade-reel-cell:nth-child(n+6):nth-child(-n+10) { box-shadow: inset 0 0 0 1px #ffd23f,inset 0 0 8px rgba(255,210,63,.35); }
.arcade-reel-payline { border-top: 2px solid #ffd23f; box-shadow: 0 0 5px #ffd23f; left: 0; position: absolute; right: 0; top: 50%; }
.arcade-cabinet-bottom { font-size: 1rem; line-height: 1.05; }
.arcade-cabinet-bottom strong { color: var(--arcade-cream); }
.arcade-cabinet-bottom .arcade-pill-primary { min-width: 5rem; }
.arcade-cabinet-status { color: var(--arcade-muted); font-size: .8rem; margin: .25rem 0 0; }
.arcade-cabinet-grid { display: grid; gap: .55rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.arcade-cabinet-grid .arcade-cabinet { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.arcade-cabinet-dice { border-color: var(--arcade-amber); box-shadow: 0 0 12px rgba(255,191,63,.3),inset 0 0 12px rgba(255,191,63,.08); }
.arcade-cabinet-pool { border-color: var(--arcade-cyan); box-shadow: 0 0 12px rgba(83,224,255,.3),inset 0 0 12px rgba(83,224,255,.08); }
.arcade-small-cabinet-head h2 { color: var(--arcade-cream); font-family: 'VT323',monospace; font-size: 1.65rem; text-shadow: 0 0 8px rgba(255,191,63,.8); }
.arcade-cabinet-pool h2 { color: #d6f7ff; text-shadow: 0 0 8px rgba(83,224,255,.8); }
.arcade-small-cabinet-head img { filter: drop-shadow(0 0 3px #b36bff) drop-shadow(0 0 8px #b36bffaa); height: 3.5rem; width: 3.5rem; }
.arcade-cabinet-grid .arcade-cabinet > span { font-size: 1.05rem; }
.arcade-cabinet-grid .arcade-cabinet > span strong { color: var(--arcade-cream); }
.arcade-cabinet-grid .arcade-pill-primary { font-size: .6rem; margin-top: auto; width: 100%; }
.arcade-coming-soon { border: 2px dashed rgba(255,191,63,.3); border-radius: 6px; color: #8a6a2a; font-size: 1.25rem; min-height: 2.75rem; padding: .45rem; text-align: center; }
.arcade-coming-soon span { color: var(--arcade-amber); margin-left: .3rem; }
#high_scores { display: contents; }
.arcade-high-scores { margin-top: .1rem; }
.arcade-score-heading { align-items: center; display: flex; justify-content: space-between; }
.arcade-score-heading > span { color: var(--arcade-cyan); font-family: 'Silkscreen',monospace; font-size: .6rem; letter-spacing: .1em; }
.arcade-score-boards { border: 1.5px solid var(--arcade-cyan); border-radius: 15px; box-shadow: 0 0 8px rgba(83,224,255,.3); display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; }
.arcade-score-board { align-items: center; color: var(--arcade-cyan) !important; display: flex; font-family: 'Silkscreen',monospace; font-size: .5rem; justify-content: center; min-height: 1.75rem; min-width: 3.2rem; padding: 0 .25rem; text-decoration: none; }
.arcade-score-board-active { background: var(--arcade-cyan); color: #06101a !important; }
.arcade-score-periods { border-bottom: 1px solid rgba(83,224,255,.2); display: flex; gap: 1.4rem; margin-bottom: .25rem; }
.arcade-score-period { color: var(--arcade-cyan) !important; font-size: 1.15rem; min-height: 2.25rem; padding: .35rem 0; text-decoration: none; }
.arcade-score-period-active { color: var(--arcade-cream) !important; text-decoration: underline; text-decoration-color: var(--arcade-cyan); text-underline-offset: .35rem; }
.arcade-score-list { display: flex; flex-direction: column; gap: .15rem; }
.arcade-score-row { align-items: center; display: grid; font-size: 1.1rem; gap: .35rem; grid-template-columns: 1.3rem 1fr auto; padding: .2rem .3rem; }
.arcade-score-row strong { font-weight: 400; overflow-wrap: anywhere; }
.arcade-score-row b { color: var(--arcade-cream); font-weight: 400; }
.arcade-score-you { background: var(--arcade-amber); color: #11151e; }
.arcade-score-you b { color: #11151e; }
.arcade-score-empty { color: var(--arcade-muted); margin: .25rem 0; }


@media (min-width: 40rem) { .arcade-bag-page, .arcade-games-lobby { max-width: 34rem; } }

.arcade-on-house { border: 1px solid var(--arcade-red-bright); box-shadow: inset 0 0 12px rgba(255,48,72,.12), 0 0 10px rgba(255,48,72,.25); margin-top: .8rem; padding: .55rem .7rem; }
.arcade-on-house > span { color: #ff8a98; font-family: 'Silkscreen',monospace; font-size: .6rem; letter-spacing: .08em; }
.arcade-on-house .item-honor { color: var(--arcade-cream); margin: .25rem 0 0; }

.arcade-equipped-slot > span:last-child { text-transform: uppercase; }
.arcade-equipped-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Secondary routes under the Bag: plain arcade text links, not pill buttons. */
.arcade-bag-routes { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1.25rem; }
.arcade-bag-routes a { background: none; border: 0; box-shadow: none; color: var(--arcade-cyan); font-family: 'VT323', monospace; font-size: 1.15rem; min-height: 44px; display: inline-flex; align-items: center; padding: 0; text-decoration: none; text-transform: uppercase; }
.arcade-bag-routes a::after { content: " >"; }
/* Phase 2: duel board and photo booth */
.challenge-page .loyalty-main, .avatar-page .loyalty-main { background: radial-gradient(120% 30% at 20% 0%, rgba(255,58,84,.14), transparent 70%); }
.arcade-challenge-board, .arcade-booth { margin: 0 auto; max-width: 30rem; padding: .75rem .85rem 6.5rem; position: relative; }
.arcade-challenge-board::before, .arcade-booth::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px); content: ''; inset: 0; pointer-events: none; position: absolute; }
.arcade-challenge-board > *, .arcade-booth > * { position: relative; z-index: 1; }
.arcade-back-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.25rem; text-decoration: none; }
.arcade-board-heading, .arcade-booth-heading { align-items: center; display: flex; gap: .5rem; justify-content: space-between; margin: -.2rem 0 .8rem; }
.arcade-board-tagline { color: #c9a55a; font-family: 'VT323', monospace; font-size: 1.25rem; line-height: 1.1; margin: -.5rem 0 .9rem; }
.arcade-board-heading h1, .arcade-booth-heading h1 { font-family: 'Yellowtail', cursive; font-size: clamp(2.5rem, 11vw, 3.1rem); font-weight: 400; line-height: 1; margin: 0; }
.arcade-record { background: #050608; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(83,224,255,.45); color: #d6f7ff; display: flex; flex-direction: column; line-height: .9; min-width: 3.9rem; padding: .3rem .55rem; text-align: center; }
.arcade-record small, .arcade-board-label, .arcade-booth-label { color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .58rem; letter-spacing: .08em; }
.arcade-record strong { font-size: 1.75rem; font-weight: 400; text-shadow: 0 0 8px rgba(83,224,255,.8); }
.arcade-challenge-section { margin-top: 1rem; }
.arcade-challenge-section h2 { align-items: baseline; display: flex; justify-content: space-between; gap: .35rem; color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .68rem; letter-spacing: .1em; margin: 0 0 .45rem; }
.arcade-bar-hint { color: #3f7d86; float: none; font-family: VT323, monospace; font-size: 1rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.arcade-bar-players { display: grid; gap: .55rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
.arcade-bar-player, .arcade-anyone { align-items: center; background: transparent; border: 0; color: #d6f7ff; display: flex; flex-direction: column; font-size: 1.05rem; gap: .2rem; min-height: 5rem; padding: 0; text-decoration: none; }
.arcade-bar-player img, .arcade-bar-avatar, .arcade-anyone span { border-radius: 50%; display: block; height: 3.45rem; object-fit: cover; width: 3.45rem; }
.arcade-bar-player img { box-shadow: 0 0 0 2px var(--arcade-cyan), 0 0 12px rgba(83,224,255,.6); }
.arcade-anyone span { align-items: center; border: 2px dashed rgba(83,224,255,.45); color: var(--arcade-cyan); display: flex; font-size: 2rem; justify-content: center; }
.arcade-challenger { margin-top: 1rem; }
.arcade-challenger form { flex: 0 0 auto; }
.arcade-text-action { background: transparent; border: 0; color: #8a6a2a; cursor: pointer; font: inherit; min-height: 2.75rem; padding: 0; text-decoration: underline; }
.arcade-challenger-copy .arcade-text-action { display: block; font-size: 1rem; min-height: 1.5rem; }
.arcade-live-card { border: 2px solid var(--arcade-amber); border-radius: 6px; box-shadow: 0 0 12px rgba(255,191,63,.3), inset 0 0 12px rgba(255,191,63,.08); padding: .65rem .7rem; }
.arcade-live-card header { align-items: baseline; display: flex; justify-content: space-between; }
.arcade-live-status { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .1em; }
.arcade-live-status::first-letter { text-shadow: 0 0 8px var(--arcade-amber); }
.arcade-live-duelists { align-items: center; display: grid; gap: .35rem; grid-template-columns: 1fr auto 1fr; margin: .7rem 0; }
.arcade-duelist { align-items: center; color: var(--arcade-cream); display: flex; font-size: 1.25rem; gap: .4rem; min-width: 0; }
.arcade-duelist:last-child { justify-content: flex-end; text-align: right; }
.arcade-duelist img, .arcade-duelist-fallback { border: 2px solid var(--arcade-amber); border-radius: 50%; flex: 0 0 2.75rem; height: 2.75rem; object-fit: cover; width: 2.75rem; }
.arcade-duelist-fallback { align-items: center; background: #192a4a; display: flex; justify-content: center; }
.arcade-vs { color: #ffe6e9; font-family: 'Yellowtail', cursive; font-size: 1.7rem; text-shadow: 0 0 8px var(--arcade-red); }
.arcade-result-actions { display: grid; gap: .55rem; grid-template-columns: 1fr 1fr; }
.arcade-result-actions form { display: flex; }
.arcade-result-actions button { width: 100%; }
.arcade-settlement-note { color: #8a6a2a; font-size: 1rem; line-height: 1; margin: .65rem 0 0; text-align: center; }
.arcade-sent-row { align-items: center; color: var(--arcade-cream); display: flex; font-size: 1.2rem; gap: .5rem; }
.arcade-sent-row img, .arcade-sent-fallback { border-radius: 50%; height: 1.9rem; object-fit: cover; opacity: .7; width: 1.9rem; }
.arcade-results { display: flex; flex-direction: column; gap: .2rem; }
.arcade-result-row { align-items: center; color: var(--arcade-cream); display: flex; font-size: 1.25rem; gap: .45rem; line-height: 1.25; }
.arcade-result-badge { align-items: center; border-radius: 3px; display: inline-flex; font-family: 'Silkscreen', monospace; font-size: .68rem; justify-content: center; min-width: 1.8rem; padding: .2rem .3rem; }
.arcade-result-badge.is-win { background: var(--arcade-amber); color: #211600; }
.arcade-result-badge.is-loss { border: 1px solid var(--arcade-red-bright); color: var(--arcade-red-bright); }
.arcade-result-meta { color: var(--arcade-amber); font-size: 1rem; margin-left: auto; }
.challenge-detail { margin-top: 1rem; }
.challenge-detail h2 { color: var(--arcade-cream); font-size: 2rem; font-weight: 400; margin: .3rem 0; }
.challenge-detail .arcade-challenge-copy { color: var(--arcade-muted); font-size: 1.15rem; }

.arcade-booth-heading { margin-bottom: .8rem; }
.arcade-token-count { align-items: center; color: var(--arcade-cream); display: flex; font-size: 1.55rem; gap: .3rem; line-height: .85; }
.arcade-token-count small { color: #8a6a2a; display: block; font-size: .8rem; }
.arcade-curtain { align-items: center; background: repeating-linear-gradient(90deg,#4a0710 0,#7a0f1c 7px,#9c1726 11px,#6a0b17 16px,#3a050c 22px); border-radius: 6px; box-shadow: inset 0 14px 20px rgba(0,0,0,.7), inset 0 -10px 16px rgba(0,0,0,.6), 0 0 0 2px #1a0306; display: flex; height: 18.1rem; justify-content: center; position: relative; }
.arcade-curtain::before { background: linear-gradient(180deg,#d9a74a,#7a5418); border-radius: 6px 6px 0 0; box-shadow: 0 3px 6px rgba(0,0,0,.6); content: ''; height: 14px; left: 0; position: absolute; right: 0; top: 0; }
.arcade-polaroid { background: #f3eee2; box-shadow: 0 10px 24px rgba(0,0,0,.7); color: #3a2a1a; height: 15.6rem; padding: .5rem .5rem 1.8rem; position: relative; transform: rotate(-1.5deg); width: 14.5rem; }
.arcade-polaroid-image { align-items: center; background: #111; display: flex; height: 13.25rem; justify-content: center; overflow: hidden; position: relative; }
.arcade-polaroid-image img { height: 100%; object-fit: cover; width: 100%; }
.arcade-polaroid-caption { align-items: baseline; bottom: .22rem; display: flex; gap: .35rem; justify-content: center; left: 0; position: absolute; right: 0; }
.arcade-polaroid-caption strong { font-family: 'Yellowtail', cursive; font-size: 1.25rem; font-weight: 400; }
.arcade-polaroid-caption span { color: #7a6a58; font-size: 1rem; }
.arcade-new-look { color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .58rem; letter-spacing: .1em; position: absolute; top: .6rem; }
.arcade-silhouette { align-items: flex-end; background: radial-gradient(90% 80% at 50% 30%,#1d2230,#0c0f16); display: flex; height: 100%; justify-content: center; width: 100%; }
.arcade-silhouette::after { color: #2a3140; content: '●'; font-size: 8rem; line-height: .8; text-shadow: 0 4rem 0 #2a3140; }
.arcade-looks-strip { background: #0b0b0c; background-image: radial-gradient(circle,#2a2a2e 0 3px,transparent 3.5px),radial-gradient(circle,#2a2a2e 0 3px,transparent 3.5px); background-position: 4px 0,4px 100%; background-repeat: repeat-x; background-size: 16px 10px,16px 10px; border-radius: 3px; display: flex; gap: .5rem; overflow-x: auto; padding: .5rem .6rem; }
.arcade-look-tile { border: 2px solid transparent; display: block; flex: 0 0 4.4rem; height: 5.7rem; padding: 0; position: relative; }
.arcade-look-tile.is-selected { border-color: var(--arcade-amber); box-shadow: 0 0 8px rgba(255,191,63,.8); }
.arcade-look-tile img { display: block; height: 100%; object-fit: cover; width: 100%; }
.arcade-look-tile .arcade-wearing-tag { background: rgba(10,15,28,.85); bottom: 0; color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .45rem; left: 0; line-height: 1.3rem; position: absolute; right: 0; text-align: center; }
.avatar-look-hide { background: rgba(10,15,28,.75); border: 0; color: var(--arcade-cream); cursor: pointer; font-size: 1rem; min-height: 1.8rem; min-width: 1.8rem; position: absolute; right: 0; top: 0; }
.arcade-look-new { align-items: center; border: 2px dashed rgba(83,224,255,.45); color: var(--arcade-cyan); display: flex; font-size: 2rem; justify-content: center; text-decoration: none; }
.arcade-booth-section { margin-top: .85rem; }
.arcade-booth-section h2 { color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .68rem; letter-spacing: .1em; margin: 0 0 .4rem; }
.arcade-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.arcade-chip-row label { cursor: pointer; }
.arcade-chip-row input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.arcade-chip-row span { align-items: center; border: 1px solid var(--arcade-cyan); border-radius: 999px; color: var(--arcade-cyan); display: inline-flex; font-size: 1rem; min-height: 2.3rem; padding: 0 .8rem; }
.arcade-chip-row input:checked + span { background: var(--arcade-cyan); color: #07101d; }
.arcade-chip-row input:focus-visible + span { outline: 2px solid var(--arcade-cream); outline-offset: 2px; }
.arcade-style-choice { margin-bottom: .5rem; }
.arcade-gear-strip { align-items: center; display: flex; gap: .4rem; overflow-x: auto; }
.arcade-gear-strip .avatar-slot { background: rgba(6,9,16,.7); border: 1px solid rgba(83,224,255,.45); color: var(--arcade-cyan); min-height: 3.3rem; min-width: 3.3rem; padding: .2rem; }
.arcade-gear-strip .avatar-slot img { height: 2.7rem; object-fit: cover; width: 2.7rem; }
.arcade-booth-actions { display: flex; gap: .55rem; margin-top: 1rem; }
.arcade-booth-actions > form { display: flex; }
.arcade-booth-actions button, .arcade-booth-actions input { min-height: 3.75rem; }
.arcade-booth-actions .arcade-pill-primary { flex-direction: column; gap: .1rem; min-width: 11rem; }
.arcade-booth-actions .arcade-pill-primary strong { font-family: 'Silkscreen', monospace; font-size: 1rem; letter-spacing: .08em; }
.arcade-booth-actions .arcade-pill-primary span { font-size: 1rem; }
.arcade-booth-actions .arcade-pill-secondary { min-width: 6.5rem; }
.avatar-page .avatar-picker { margin-top: .4rem; }
@media (min-width: 48rem) { .arcade-challenge-board, .arcade-booth { max-width: 34rem; } }

.arcade-booth > h1 { font-family: 'Yellowtail', cursive; font-size: clamp(2.5rem, 11vw, 3.1rem); font-weight: 400; line-height: 1; margin: -.35rem 0 .8rem; }
.arcade-anyone > span:first-child { border: 2px dashed rgba(83,224,255,.45); }
.arcade-anyone > span:last-child { border: 0; color: #3f7d86; display: block; font-size: 1.05rem; height: auto; width: auto; }
.arcade-look-wrap { flex: 0 0 4.4rem; height: 5.7rem; position: relative; }
.arcade-look-wrap .arcade-look-tile { height: 5.7rem; width: 4.4rem; }
.arcade-look-wrap > form { position: absolute; right: 0; top: 0; }
.arcade-look-wrap .avatar-look-hide { position: static; }
/* Page content never grows past the screen; wide rows (film strips, reels) scroll inside themselves. */
/* Zero-specificity default: a page root that sets its own display (grid, flex) keeps it. */
:where(.loyalty-main) > :not(style, script, template), :where(turbo-frame) { display: block; min-width: 0; max-width: 100%; }
.arcade-challenge-board, .arcade-booth { box-sizing: border-box; min-width: 0; width: 100%; }
.arcade-booth-section, .arcade-looks-strip { max-width: 100%; min-width: 0; }
/* Sound switch: a small neon speaker perched on the walnut rail. The 44px hit area is bigger than the dot. */
.arcade-sfx-toggle { align-items: center; background: transparent; border: 0; color: var(--arcade-cyan, #53e0ff); cursor: pointer; display: flex; height: 44px; justify-content: center; padding: 0; left: 4px; position: absolute; top: -40px; width: 44px; }
.arcade-sfx-toggle svg { background: rgba(4,8,20,.85); border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 0 6px currentColor; box-sizing: content-box; padding: 5px; }
.arcade-sfx-toggle .arcade-sfx-x { display: none; }
.arcade-sfx-toggle.is-muted { color: #7d8597; }
.arcade-sfx-toggle.is-muted svg { box-shadow: none; }
.arcade-sfx-toggle.is-muted .arcade-sfx-x { display: inline; }
.arcade-sfx-toggle.is-muted .arcade-sfx-waves { display: none; }

/* ---------- Bag tiles: 3 across, framed art, readable VT323 names ---------- */
.arcade-bag-grid { display: grid; gap: .6rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.arcade-bag-grid .item-grid-cell { background: linear-gradient(180deg, #121b2e, #0b1120); border: 1px solid color-mix(in srgb, var(--rarity-color, #c9e4f2) 45%, transparent); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.45); color: inherit; overflow: hidden; position: relative; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.arcade-bag-grid .item-grid-cell:hover, .arcade-bag-grid .item-grid-cell:focus-visible { box-shadow: 0 0 0 1px var(--rarity-color), 0 0 14px var(--rarity-glow); transform: translateY(-2px); }
.arcade-bag-grid .item-grid-cell:active { transform: scale(.97); }
.arcade-bag-grid .item-grid-cell::after { background: var(--rarity-color, var(--arcade-amber)); bottom: 0; box-shadow: 0 0 8px var(--rarity-glow); content: ''; height: 3px; left: 0; position: absolute; right: 0; }
.arcade-bag-grid .item-grid-summary { display: flex; flex-direction: column; gap: .2rem; min-height: 0; padding: .4rem .4rem .6rem; position: relative; }
.item-tile-frame { aspect-ratio: 1; border-radius: 7px; display: block; overflow: hidden; position: relative; }
.item-tile-frame::after { border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -18px 22px -14px rgba(0,0,0,.7); content: ''; inset: 0; pointer-events: none; position: absolute; }
.arcade-bag-grid .item-grid-artwork { aspect-ratio: 1; border: 0; border-radius: 0; display: block; height: 100%; margin: 0; object-fit: cover; width: 100%; }
.arcade-bag-grid .item-grid-name { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--arcade-cream); display: -webkit-box; font-family: 'VT323', monospace; font-size: 1.12rem; letter-spacing: .01em; line-height: .95; min-height: 1.9em; overflow: hidden; }
.arcade-bag-grid .item-grid-meta { align-items: center; display: flex; gap: .3rem; justify-content: space-between; position: static; }
.arcade-bag-grid .item-rarity { color: var(--rarity-color); font-family: 'VT323', monospace; font-size: .95rem; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.arcade-bag-grid .item-rarity::before { background: var(--rarity-color); box-shadow: 0 0 5px var(--rarity-color); content: ''; display: inline-block; height: 6px; margin-right: 4px; transform: rotate(45deg) translateY(-2px); width: 6px; }
.arcade-bag-grid .item-count { background: rgba(4,7,14,.82); border: 1px solid rgba(255,244,214,.35); border-radius: 999px; color: var(--arcade-cream); font-family: 'VT323', monospace; font-size: 1rem; line-height: 1; padding: .1rem .4rem; position: absolute; right: .65rem; text-shadow: none; top: .65rem; }
.arcade-bag-grid .item-count[aria-label="1 owned"] { display: none; }
.arcade-bag-grid .item-wearing { background: var(--arcade-cyan); border-radius: 4px; bottom: .3rem; box-shadow: 0 0 8px rgba(83,224,255,.8); color: #04121a; font-family: 'VT323', monospace; font-size: .95rem; left: .3rem; line-height: 1; padding: .1rem .35rem; position: absolute; text-transform: uppercase; }
.arcade-bag-grid .item-grid-cell[data-spent] .item-tile-frame img { filter: grayscale(.85) brightness(.55); }
.item-tile-stamp { border: 2px solid #ff5a6a; border-radius: 4px; color: #ff7a88; font-family: 'Silkscreen', monospace; font-size: .8rem; left: 50%; letter-spacing: .1em; padding: .05rem .35rem; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(-14deg); text-shadow: 0 0 6px rgba(255,48,72,.8); }

/* ---------- Item card page ---------- */
.arcade-item-screen { margin: 0 auto; max-width: 26rem; padding: .6rem .9rem 7rem; }
.arcade-item-nav { align-items: center; display: flex; justify-content: space-between; margin-bottom: .6rem; }
.arcade-item-nav .arcade-back-link, .arcade-item-nav-links a { align-items: center; color: var(--arcade-cyan); display: inline-flex; font-family: 'VT323', monospace; font-size: 1.25rem; min-height: 44px; text-decoration: none; text-shadow: 0 0 6px rgba(83,224,255,.6); }
.arcade-item-nav-links { display: flex; gap: 1rem; }
.arcade-item-nav-links a { color: var(--arcade-muted); font-size: 1.1rem; text-shadow: none; text-transform: uppercase; }

.arcade-item-card.item-detail { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; background: none; border: 0; box-shadow: none; display: block; margin: 0; padding: 0; perspective: 900px; }
.item-card-face { background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--rarity-color) 22%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #151e33, #0a0f1c 70%);
  border: 2px solid var(--rarity-color); border-radius: 20px;
  box-shadow: 0 0 0 4px #05080f, 0 0 0 5px color-mix(in srgb, var(--rarity-color) 50%, transparent), 0 0 28px var(--rarity-glow), 0 22px 40px rgba(0,0,0,.6);
  padding: .8rem .8rem 1rem; position: relative; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .25s ease-out; }
.arcade-item-card.is-tilting .item-card-face { transition: none; }
.item-card-top { align-items: center; display: flex; justify-content: space-between; margin-bottom: .55rem; }
.item-card-rarity { align-items: center; display: inline-flex; gap: .45rem; }
.item-card-rarity .item-rarity { color: var(--rarity-color); font-family: 'Silkscreen', monospace; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-shadow: 0 0 8px var(--rarity-glow); text-transform: uppercase; }
.item-card-gem { background: linear-gradient(135deg, #fff 0%, var(--rarity-color) 45%, color-mix(in srgb, var(--rarity-color) 40%, #000) 100%); box-shadow: 0 0 10px var(--rarity-color); height: 12px; transform: rotate(45deg); width: 12px; }
.item-card-serial { color: var(--arcade-muted); font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: .08em; }

.item-card-window { aspect-ratio: 1; background: #05080f; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--rarity-color) 60%, transparent); isolation: isolate; overflow: hidden; position: relative; }
.item-card-window .item-detail-artwork { border: 0; border-radius: 0; box-shadow: none; display: block; height: 100%; margin: 0; max-width: none; object-fit: cover; padding: 0; position: relative; width: 100%; z-index: 1; }
.item-card-window .item-artwork-missing { display: block; height: 100%; }
.is-flashy .item-card-window .item-detail-artwork { height: 86%; left: 7%; object-fit: contain; top: 7%; width: 86%; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rarity-color) 70%, #000), 0 0 30px var(--rarity-glow); }
.item-card-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rarity-color) 42%, transparent) 0deg 9deg, transparent 9deg 24deg); inset: -40%; mask-image: radial-gradient(circle, #000 20%, transparent 62%); position: absolute; z-index: 0; animation: item-rays 26s linear infinite; }
@keyframes item-rays { to { transform: rotate(360deg); } }
.item-card-shine { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 42%), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, color-mix(in srgb, var(--rarity-color) 22%, transparent) 50%, transparent 62%); background-size: 100% 100%, 250% 100%; inset: 0; mix-blend-mode: screen; pointer-events: none; position: absolute; z-index: 2; animation: item-sheen 5.5s ease-in-out infinite; }
@keyframes item-sheen { 0%, 55% { background-position: 0 0, 130% 0; } 100% { background-position: 0 0, -30% 0; } }
.item-card-stack { background: rgba(4,7,14,.85); border: 1.5px solid var(--arcade-cream); border-radius: 999px; color: var(--arcade-cream); font-family: 'VT323', monospace; font-size: 1.5rem; line-height: 1; padding: .1rem .55rem; position: absolute; right: .55rem; top: .55rem; z-index: 3; }
.item-card-ribbon { background: var(--arcade-cyan); box-shadow: 0 0 12px rgba(83,224,255,.9); color: #03121a; font-family: 'Silkscreen', monospace; font-size: .7rem; font-weight: 700; left: -2.4rem; letter-spacing: .12em; padding: .3rem 2.6rem; position: absolute; top: 1.1rem; transform: rotate(-38deg); z-index: 3; }
.item-card-stamp { border: 3px solid #ff5a6a; border-radius: 8px; color: #ff7a88; font-family: 'Silkscreen', monospace; font-size: 1.6rem; left: 50%; letter-spacing: .12em; padding: .2rem .8rem; position: absolute; text-shadow: 0 0 10px rgba(255,48,72,.9); text-transform: uppercase; top: 50%; transform: translate(-50%,-50%) rotate(-12deg); z-index: 3; }
.is-spent .item-card-window .item-detail-artwork { filter: grayscale(.9) brightness(.5); }

.item-card-name { color: #fff6e0; font-family: 'VT323', monospace; font-size: clamp(2.2rem, 10vw, 2.8rem); font-weight: 400; letter-spacing: .01em; line-height: .9; margin: .8rem 0 .15rem; text-shadow: 0 0 2px #fff, 0 0 10px var(--rarity-glow), 0 0 22px var(--rarity-glow); }
.item-card-kind { color: var(--rarity-color); font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: .12em; margin: 0; text-transform: uppercase; }
.arcade-item-card .item-flavor { border-left: 2px solid color-mix(in srgb, var(--rarity-color) 60%, transparent); color: #d9dfea; font-family: 'VT323', monospace; font-size: 1.25rem; line-height: 1.1; margin: .7rem 0 .8rem; padding: .1rem 0 .1rem .7rem; }
.item-card-stats { display: grid; gap: .4rem; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; }
.item-card-stats div { background: #03060c; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; box-shadow: inset 0 0 12px rgba(0,0,0,.8); padding: .3rem .45rem .35rem; text-align: center; }
.item-card-stats dt { color: var(--arcade-muted); font-family: 'VT323', monospace; font-size: .85rem; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.item-card-stats dd { color: #ff4a3a; font-family: 'VT323', monospace; font-size: 1.7rem; line-height: 1; margin: .15rem 0 0; text-shadow: 0 0 6px #ff4a3a; }
.arcade-item-card .item-appearance { margin-top: .7rem; }
.arcade-item-card .item-appearance h2 { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .7rem; letter-spacing: .1em; margin: 0 0 .3rem; text-transform: uppercase; }
.arcade-item-card .item-appearance dl { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.arcade-item-card .item-appearance dl div { border: 1px solid color-mix(in srgb, var(--rarity-color) 50%, transparent); border-radius: 999px; display: flex; font-family: 'VT323', monospace; font-size: 1.05rem; gap: .35rem; padding: .05rem .6rem; }
.arcade-item-card .item-appearance dt { color: var(--arcade-muted); }
.arcade-item-card .item-appearance dd { color: var(--arcade-cream); margin: 0; }
.arcade-item-card .item-provenance, .arcade-item-card .item-cooldown { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.1rem; margin: .7rem 0 0; }
.arcade-item-card .item-provenance::before { content: '★ '; color: var(--rarity-color); }

.arcade-item-dock, .arcade-item-send { background: none; border: 0; box-shadow: none; margin: 1.1rem 0 0; padding: 0; }
.arcade-dock-title { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; width: 1px; }
.arcade-item-dock .arcade-item-primary { align-items: center; border-radius: 999px; cursor: pointer; display: flex; font-family: 'Silkscreen', monospace; font-size: 1.1rem; font-weight: 700; justify-content: center; letter-spacing: .12em; margin: 0; min-height: 3.4rem; text-decoration: none; text-transform: uppercase; width: 100%; }
.arcade-item-dock .form-help { color: var(--arcade-muted); font-family: 'VT323', monospace; font-size: 1.15rem; text-align: center; }
.arcade-item-send h2 { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .75rem; letter-spacing: .12em; margin: 0 0 .5rem; text-transform: uppercase; }
.arcade-item-send .form-help { color: var(--arcade-muted); font-family: 'VT323', monospace; font-size: 1.1rem; }
.arcade-send-row { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.arcade-send-row > .arcade-pill-secondary, .arcade-gift > summary { align-items: center; border-radius: 999px; cursor: pointer; display: flex; font-family: 'Silkscreen', monospace; font-size: .9rem; font-weight: 700; justify-content: center; letter-spacing: .12em; list-style: none; min-height: 2.9rem; text-decoration: none; }
.arcade-gift > summary::-webkit-details-marker { display: none; }
.arcade-gift[open] { grid-column: 1 / -1; order: 2; }
.arcade-gift[open] > summary { background: rgba(83,224,255,.12); }
.arcade-gift form { background: #0b1222; border: 1px solid rgba(83,224,255,.35); border-radius: 12px; display: grid; gap: .4rem; margin-top: .6rem; padding: .7rem .8rem .9rem; }
.arcade-gift label { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.1rem; }
.arcade-gift input[type=text], .arcade-gift input[type=number] { background: #03060c; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: var(--arcade-cream); font-family: 'VT323', monospace; font-size: 1.4rem; min-height: 44px; padding: 0 .7rem; }
.arcade-gift input[type=submit] { border-radius: 999px; cursor: pointer; font-family: 'Silkscreen', monospace; font-size: .9rem; letter-spacing: .1em; margin-top: .3rem; min-height: 3rem; text-transform: uppercase; }
.arcade-item-screen .arcade-on-house { border-radius: 12px; margin-top: 1rem; }

/* The item's history, printed on a till receipt. */
.arcade-receipt { --paper: #f3eedf; background: var(--paper); color: #26221b; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); font-family: 'VT323', monospace; margin: 1.6rem .4rem 0; padding: 1.1rem 1rem 1.2rem; position: relative; transform: rotate(-.6deg); }
.arcade-receipt::before, .arcade-receipt::after { background: linear-gradient(-45deg, var(--paper) 6px, transparent 0), linear-gradient(45deg, var(--paper) 6px, transparent 0); background-size: 12px 12px; content: ''; height: 12px; left: 0; position: absolute; right: 0; }
.arcade-receipt::before { background-position: left top; top: -12px; transform: scaleY(-1); }
.arcade-receipt::after { bottom: -12px; }
.arcade-receipt-head { border-bottom: 2px dashed #8f877a; display: grid; justify-items: center; padding-bottom: .5rem; text-align: center; }
.arcade-receipt-head strong { font-size: 1.35rem; letter-spacing: .06em; }
.arcade-receipt-head span { color: #6b6457; font-size: 1rem; }
.arcade-receipt-head h2 { color: #26221b; font-family: 'VT323', monospace; font-size: 1.2rem; font-weight: 400; letter-spacing: .2em; margin: .4rem 0 0; text-transform: uppercase; }
.arcade-receipt ol { list-style: none; margin: .5rem 0; padding: 0; }
.arcade-receipt li { align-items: baseline; border: 0; display: flex; font-size: 1.15rem; gap: .5rem; padding: .1rem 0; }
.arcade-receipt li strong { color: #26221b; flex: 1 1 auto; font-weight: 400; min-width: 0; overflow: hidden; text-transform: uppercase; white-space: nowrap; }
.arcade-receipt li strong::after { color: #a39b8c; content: ' ........................................'; }
.arcade-receipt li { overflow: hidden; }
.arcade-receipt li span { color: #3d372e; flex: none; margin-left: auto; white-space: nowrap; }
.arcade-receipt-foot { border-top: 2px dashed #8f877a; font-size: 1.05rem; letter-spacing: .2em; margin: 0; padding-top: .5rem; text-align: center; }

@media (prefers-reduced-motion: reduce) { .item-card-rays, .item-card-shine { animation: none; } .item-card-face { transform: none; } }
.arcade-bottom-nav button.arcade-sfx-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.arcade-bag-page .help-button { background: none !important; border: 0; box-shadow: none; color: var(--arcade-muted); font-family: 'VT323', monospace; font-size: 1rem; letter-spacing: .08em; min-height: 44px; padding: 0 !important; text-decoration: underline dotted; }
.item-card-stats dt { white-space: nowrap; }

/* ---------- Top Shelf (spec: design/mockups/boards/Slot.dc.html) ---------- */
/* The pink sign glow spans the whole window, not just the cabinet's column. */
.top-shelf-page { background-image: radial-gradient(110% 22rem at 50% 0%, rgba(255,58,84,.16), transparent 70%); background-repeat: no-repeat; }
.top-shelf { background: radial-gradient(90% 30% at 50% 45%, rgba(255,190,60,.08), transparent 70%); box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; margin: 0 auto; max-width: 26rem; padding: 12px 7px 7rem; position: relative; }
.top-shelf-head { align-items: center; display: flex; justify-content: space-between; padding: 0 7px; }
.top-shelf-head .arcade-back-link { align-items: center; color: var(--arcade-amber); display: flex; font-size: 1.25rem; min-height: 44px; text-decoration: none; }
.top-shelf-head h1 { font-size: 2.6rem; line-height: 1; margin: 0; }
.top-shelf-settings { width: 70px; }
.top-shelf-jackpot { align-items: center; background: #060202; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(255,74,58,.55), 0 0 14px rgba(255,74,58,.25); display: flex; height: 44px; justify-content: space-between; margin: 0 7px; padding: 0 12px; }
.top-shelf-jackpot-label { color: #ff8a98; font-family: 'Silkscreen', monospace; font-size: 9px; line-height: 1.2; }
.top-shelf-jackpot-value { color: #ff4a3a; font-size: 2.4rem; line-height: 1; text-shadow: 0 0 8px rgba(255,74,58,.95), 0 0 20px rgba(255,74,58,.5); }
.top-shelf-jackpot-rule { color: #ff8a98; font-size: 1rem; line-height: 1; text-align: right; }

.top-shelf-cabinet { animation: ts-chase .9s steps(2) infinite; background-color: #140c04; background-image: radial-gradient(circle, #fff1c2 0, #ffc34a 2.2px, rgba(255,170,40,.35) 3.4px, transparent 4.6px); background-size: 14px 14px; border-radius: 12px; box-shadow: 0 0 24px rgba(255,180,60,.25), inset 0 0 0 1px rgba(0,0,0,.6); padding: 10px; position: relative; }
@keyframes ts-chase { to { background-position: 14px 0; } }
/* The marquee bulbs (Lights in top_shelf.js): fixed lamps, lit by class. The glow fades in on its own layer. */
.top-shelf-cabinet.has-lights { animation: none; background-image: none; }
.ts-bulbs { inset: 0; pointer-events: none; position: absolute; }
.ts-bulbs i { background: radial-gradient(circle at 40% 35%, #6a4c1a, #33230a 70%); border-radius: 50%; height: 7px; margin: -3.5px 0 0 -3.5px; position: absolute; width: 7px; }
.ts-bulbs i::after { background: radial-gradient(circle, #fff6dc 0 25%, #ffc34a 55%, #e08a10 100%); border-radius: 50%; box-shadow: 0 0 4px 1px rgba(255,180,50,.85), 0 0 10px rgba(255,170,40,.45); content: ""; inset: 0; opacity: 0; position: absolute; transition: opacity 45ms; }
.ts-bulbs i.is-lit::after { opacity: 1; }
/* A Break Shot run: 8-ball purple bulbs, every fourth one MAX BET blue. */
.top-shelf.is-free .ts-bulbs i { background: radial-gradient(circle at 40% 35%, #3d2660, #170d26 70%); }
.top-shelf.is-free .ts-bulbs i:not(.is-color)::after { background: radial-gradient(circle, #f6ecff 0 25%, #c38bff 55%, #7a3fd0 100%); box-shadow: 0 0 4px 1px rgba(159,76,255,.9), 0 0 10px rgba(159,76,255,.5); }
.top-shelf.is-free .ts-bulbs i:nth-child(4n) { background: radial-gradient(circle at 40% 35%, #1d4a57, #0a1d24 70%); }
.top-shelf.is-free .ts-bulbs i:nth-child(4n):not(.is-color)::after { background: radial-gradient(circle, #effcff 0 25%, #53e0ff 55%, #1688a8 100%); box-shadow: 0 0 4px 1px rgba(83,224,255,.85), 0 0 10px rgba(83,224,255,.45); }
/* The colored routines (Lights.rainbow, rainbowChase, colorSparkle) paint each bulb one of six neons. */
:is(.top-shelf, .top-shelf-takeover) .ts-bulbs i.is-color::after { background: radial-gradient(circle, #fff 0 25%, var(--c) 60%); box-shadow: 0 0 4px 1px var(--c), 0 0 11px var(--c); }
.ts-bulbs i.c1 { --c: #ff2e6e; }
.ts-bulbs i.c2 { --c: #ff8a2a; }
.ts-bulbs i.c3 { --c: #ffd23f; }
.ts-bulbs i.c4 { --c: #5fe0b0; }
.ts-bulbs i.c5 { --c: #53e0ff; }
.ts-bulbs i.c6 { --c: #c38bff; }
.top-shelf-glass { background: #05070c; border-radius: 6px; box-shadow: inset 0 0 0 2px #2a2d33, inset 0 0 0 3px #0a0b0e; display: flex; gap: 4px; padding: 4px; }
.top-shelf-marks { display: flex; flex: 0 0 16px; flex-direction: column; justify-content: space-between; }
.top-shelf-mark { align-items: center; border-radius: 3px; box-shadow: inset 0 0 0 1px #2a2d33; color: #3a3f48; display: flex; font-size: 15px; height: 20px; justify-content: center; line-height: 1; }
/* Payline lights: a played line sits at half-bright warm white, lights full while the payline map shows,
   and lights in its own line color when it wins. A Break Shot run turns them 8-ball purple, edged in MAX BET blue. */
.top-shelf-mark.is-on { background: #7d7666; box-shadow: none; color: #0a0f1c; }
.is-mapping .top-shelf-mark.is-on { background: #fff4dc; box-shadow: 0 0 10px rgba(255,236,190,.9); }
.top-shelf.is-free .top-shelf-mark.is-on { background: #61457f; box-shadow: inset 0 0 0 1px rgba(83,224,255,.7); }
.top-shelf.is-free.is-mapping .top-shelf-mark.is-on { background: #c38bff; box-shadow: inset 0 0 0 1px var(--arcade-cyan), 0 0 10px var(--arcade-cyan); }
.top-shelf .top-shelf-mark.is-won { animation: ts-blink .5s steps(1) infinite; background: var(--line); box-shadow: 0 0 10px var(--line); }
@keyframes ts-blink { 50% { opacity: .35; } }
.top-shelf-reels { aspect-ratio: 316 / 224; display: grid; flex: 1 1 auto; gap: 4px; grid-template-columns: repeat(5, minmax(0,1fr)); min-width: 0; position: relative; }
.top-shelf-reel { background: linear-gradient(180deg, #030406 0%, #121722 30%, #161c28 50%, #121722 70%, #030406 100%); border-radius: 4px; box-shadow: inset 0 12px 14px rgba(0,0,0,.85), inset 0 -12px 14px rgba(0,0,0,.85); display: grid; gap: 4px; grid-template-rows: repeat(3, minmax(0,1fr)); overflow: hidden; }
.top-shelf-cell { align-items: center; border-radius: 3px; contain: paint; display: flex; justify-content: center; min-height: 0; }
/* Every symbol keeps one compositor layer for good (will-change always on, not just while spinning):
   promoting a blurred symbol when a reel starts and dropping it when the reel stops left a stale
   sliver of a symbol's glow on some phones during auto-spin (Jesse, 2026-10-13, a line beside a
   BAR). `contain: paint` keeps any repaint inside its own cell. */
.top-shelf-cell img { backface-visibility: hidden; display: block; filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 8px var(--glow)); height: 72%; width: 72%; will-change: transform; }
.top-shelf-cell.is-spinning img { animation: ts-blur .12s linear infinite; filter: blur(1.6px); will-change: transform; }
@keyframes ts-blur { 0% { transform: translateY(-10px); } 100% { transform: translateY(10px); } }
.top-shelf-cell.is-hit { box-shadow: inset 0 0 0 2px var(--hit), inset 0 0 16px color-mix(in srgb, var(--hit) 35%, transparent); }
/* A winning symbol moves in its own way. Only transforms animate (the glow is a still filter), so a
   win on screen through hours of auto-spin doesn't keep the phone redrawing. */
.top-shelf-cell.is-hit img { animation: ts-swell .9s ease-in-out infinite; filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 12px var(--glow)) brightness(1.45); will-change: transform; }
.top-shelf-cell.is-hit[data-code="dice"] img { animation-name: ts-wiggle; animation-duration: .5s; }
.top-shelf-cell.is-hit[data-code="pint"] img { animation-name: ts-slosh; animation-duration: .7s; transform-origin: 50% 90%; }
.top-shelf-cell.is-hit[data-code="seven"] img, .top-shelf-cell.is-hit[data-code="wild"] img { animation-name: ts-swell; animation-duration: .8s; }
.top-shelf-cell.is-hit[data-code="eight"] img { animation: ts-spin-ball 1.3s linear infinite; }
.top-shelf-cell.is-hit[data-code="shoe"] img { animation-name: ts-swing; animation-duration: .9s; transform-origin: 50% 18%; }
.top-shelf-cell.is-hit[data-code="wing"] img { animation-name: ts-flap; animation-duration: .45s; transform-origin: 30% 80%; }
.top-shelf-cell.is-hit[data-code="bar"] img { animation-name: ts-bounce; animation-duration: .6s; }
@keyframes ts-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg) scale(1.06); } 75% { transform: rotate(13deg) scale(1.06); } }
@keyframes ts-slosh { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 70% { transform: rotate(9deg); } }
@keyframes ts-swell { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes ts-spin-ball { to { transform: rotate(360deg); } }
@keyframes ts-swing { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes ts-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg) scale(1.05); } }
@keyframes ts-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14%); } 60% { transform: translateY(-14%) scaleX(1.05); } }
.top-shelf-cell.is-dim img { opacity: .45; }
.top-shelf-lines { height: 100%; inset: 0; overflow: visible; pointer-events: none; position: absolute; width: 100%; }
.top-shelf-lines polyline { fill: none; filter: drop-shadow(0 0 4px var(--line)); stroke: var(--line); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }

.top-shelf-pays > summary { color: var(--arcade-amber); cursor: pointer; font-size: 1.25rem; list-style: none; margin-top: 8px; min-height: 44px; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 6px rgba(255,191,63,.7); }
.top-shelf-pays > summary::-webkit-details-marker { display: none; }
.top-shelf-pays[open] > summary { color: #fff4d6; }
.top-shelf-pays section { background: rgba(5,7,12,.97); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--arcade-amber); display: flex; flex-direction: column; gap: 1px; font-size: 1.15rem; line-height: 1.1; padding: 8px 10px; }
.top-shelf-pays-head { color: #8a6a2a; display: flex; font-family: 'Silkscreen', monospace; font-size: 8px; justify-content: space-between; }
.top-shelf-pay-row { align-items: center; display: flex; gap: 8px; }
.top-shelf-pay-row img { filter: drop-shadow(0 0 3px var(--glow)); height: 26px; width: 26px; }
.top-shelf-pay-row span:first-of-type { color: #fff4d6; flex: 1; }
.top-shelf-pays p { color: #c9b891; margin: 4px 0 0; }

.top-shelf-lcd { align-items: center; background: #050608; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,191,63,.35); display: flex; height: 38px; justify-content: space-between; margin: 0 7px; padding: 0 10px; }
.top-shelf-message { color: #8a6a2a; font-size: 1.25rem; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-shelf-message.is-hot { animation: ts-blink .8s steps(1) 3; color: #fff4d6; text-shadow: 0 0 8px rgba(255,191,63,.8); }
.top-shelf-win { align-items: baseline; display: flex; gap: 6px; }
.top-shelf-win > small, .top-shelf-stepper small, .top-shelf-total small { font-family: 'Silkscreen', monospace; font-size: 7px; }
.top-shelf-win > small { color: #8a6a2a; font-size: 8px; }
.top-shelf-win > span { color: #fff4d6; font-size: 1.9rem; line-height: 1; text-shadow: 0 0 8px rgba(255,191,63,.8); }

.top-shelf-wager { display: grid; gap: 8px; grid-template-columns: 1fr 1fr 78px; margin: 0 7px; }
.top-shelf-stepper, .top-shelf-total { align-items: center; background: #050608; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(83,224,255,.4); display: flex; height: 48px; justify-content: space-between; }
.top-shelf-stepper > a { align-items: center; color: var(--arcade-cyan); display: flex; font-size: 1.7rem; height: 48px; justify-content: center; text-decoration: none; width: 40px; }
.top-shelf-stepper > a:active { transform: translateY(2px); }
.top-shelf-stepper > span, .top-shelf-total { align-items: center; display: flex; flex-direction: column; line-height: .9; }
.top-shelf-stepper small { color: #3f7d86; }
.top-shelf-stepper b, .top-shelf-total b { color: #d6f7ff; font-size: 1.8rem; font-weight: 400; }
.top-shelf-total { box-shadow: inset 0 0 0 1px rgba(255,191,63,.4); justify-content: center; }
.top-shelf-total small { color: #8a6a2a; }
.top-shelf-total b { color: #fff4d6; }
.is-free .top-shelf-stepper { opacity: .45; }

.top-shelf-actions { align-items: center; display: grid; gap: 8px; grid-template-columns: 110px 1fr; margin: 0 7px; }
.top-shelf-max { border-radius: 22px; cursor: pointer; font-family: 'Silkscreen', monospace !important; font-size: 10px !important; font-weight: 700; height: 44px; padding: 0 !important; text-shadow: 0 0 6px var(--arcade-cyan); }
.top-shelf-spin { align-items: center; border-radius: 30px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; height: 60px; justify-content: center; padding: 0 !important; transition: transform 60ms, background 60ms; }
.top-shelf-spin:active { background: #ff5a6e; transform: scale(.96); }
.top-shelf-spin b { font-family: 'Silkscreen', monospace; font-size: 18px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.top-shelf-spin small { font-family: 'VT323', monospace; font-size: 17px; line-height: 1; opacity: .9; }
.is-spinning .top-shelf-spin { background: #7a1a26; box-shadow: none; }
.is-free .top-shelf-spin { background: #9f4cff; box-shadow: 0 0 10px rgba(159,76,255,.85), 0 0 24px rgba(159,76,255,.45); }

.top-shelf-ticker { color: #3f7d86; font-size: 1.15rem; margin: 2px 7px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; white-space: nowrap; }
.top-shelf-ticker { --pass: 30s; }
.top-shelf-ticker[hidden] { display: none; }
/* The Hall of Winners plaque under the marquee (docs/designs/polaroids/TopShelf.dc.html). */
.loyalty-main .top-shelf-hall { align-items: center; background: linear-gradient(180deg, #3a2414, #24160c); border: 2px solid #8a5a2e; border-radius: 10px; box-shadow: inset 0 0 0 1px #1a0f08, 0 4px 12px rgba(0,0,0,.6); box-sizing: border-box; color: #f4efe4; display: flex; gap: 10px; margin: 4px 0 0; min-height: 56px; padding: 4px 12px 4px 10px; text-decoration: none; }
.top-shelf-hall-thumbs { flex: none; height: 48px; position: relative; width: 52px; }
.top-shelf-hall-thumbs img { border: 3px solid #f4efe4; border-bottom-width: 9px; box-shadow: 0 2px 4px rgba(0,0,0,.5); height: 30px; left: 0; object-fit: cover; position: absolute; top: 4px; transform: rotate(-9deg); width: 30px; }
.top-shelf-hall-thumbs img + img { left: 16px; top: 2px; transform: rotate(7deg); }
.top-shelf-hall-copy { display: flex; flex: 1; flex-direction: column; line-height: 1; min-width: 0; }
.top-shelf-hall-copy b { color: #fff; font-family: 'Yellowtail', cursive; font-size: 28px; font-weight: 400; text-shadow: 0 0 6px #ff4a6e, 0 0 14px #ff4a6e; }
.top-shelf-hall-copy small { color: #d9b98a; font-family: 'Silkscreen', monospace; font-size: 9px; letter-spacing: .5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-shelf-hall-go { color: #ffbf3f; font-family: 'Silkscreen', monospace; font-size: 18px; }
.top-shelf-ticker > div { animation: ts-ticker var(--pass) linear infinite; display: inline-block; }
.top-shelf-ticker i { font-style: normal; }
/* A new BREAK SHOT total: neon for three passes, then the marquee's own color. */
.top-shelf-ticker i.is-new { animation: ts-ticker-new calc(var(--pass) * 3) steps(1, end) forwards; color: #f4e6ff; text-shadow: 0 0 6px #c38bff, 0 0 14px #9f4cff; }
@keyframes ts-ticker-new { to { color: #3f7d86; text-shadow: none; } }
@keyframes ts-ticker { to { transform: translateX(-50%); } }
.top-shelf[data-celebration="big_win"] .top-shelf-cabinet, .top-shelf[data-celebration="jackpot"] .top-shelf-cabinet { animation-duration: .25s; box-shadow: 0 0 40px rgba(255,190,60,.7); }
.top-shelf[data-celebration="break_shot"] .top-shelf-cabinet { animation-duration: .35s; box-shadow: 0 0 40px rgba(159,140,255,.8); }
.top-shelf-credit-pop { animation: ts-pop .9s ease-out forwards; color: #fff4d6; font-size: 1.4rem; pointer-events: none; position: absolute; right: 0; text-shadow: 0 0 8px #ff4a3a; top: -18px; }
.arcade-credits { position: relative; }
@keyframes ts-pop { 0% { opacity: 0; transform: translateY(4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .top-shelf-cabinet, .top-shelf-ticker > div, .top-shelf-cell.is-spinning img, .top-shelf-cell.is-hit img { animation: none; } }
/* Pills that are <button>s must beat the legacy `.loyalty-main button` rules. */
.loyalty-main button.arcade-pill-primary, .loyalty-main input.arcade-pill-primary { background: var(--arcade-red); border: 0; box-shadow: 0 0 8px rgba(255,48,72,.8), 0 0 18px rgba(255,48,72,.45); color: #fff; text-shadow: 1px 1px 0 #6a0010; }
.loyalty-main button.arcade-pill-secondary, .loyalty-main input.arcade-pill-secondary { background: transparent; border: 1.5px solid var(--arcade-cyan); box-shadow: 0 0 7px rgba(83,224,255,.35); color: var(--arcade-cyan); }
.loyalty-main button.top-shelf-max { border-width: 2px; box-shadow: 0 0 10px rgba(83,224,255,.35), inset 0 0 8px rgba(83,224,255,.2); color: #d6f7ff; }
.loyalty-main .is-spinning button.top-shelf-spin { background: #7a1a26; box-shadow: none; }
.loyalty-main .is-free button.top-shelf-spin { background: #9f4cff; box-shadow: 0 0 10px rgba(159,76,255,.85), 0 0 24px rgba(159,76,255,.45); text-shadow: 1px 1px 0 #3a0a6a; }
.top-shelf-pays section { inset: 10px 10px 58px; overflow: auto; position: absolute; z-index: 5; }
.top-shelf-pays p { font-size: 1rem; }

/* Live toasts: drop in under the top edge, neon card, one action. */
@keyframes toast-in { from { opacity: 0; transform: translateY(-20px) scale(.96); } }

/* ---------- The Bag: an RPG equip screen plus an inventory window ---------- */
.bag { margin: 0 auto; max-width: 26rem; padding: .7rem .75rem 11rem; }
.bag-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: .6rem; }
.bag-head h1 { font-family: 'Yellowtail', cursive; font-size: clamp(2.6rem, 12vw, 3.2rem); font-weight: 400; line-height: 1; margin: 0; }
.bag-lcd { align-items: baseline; background: #060202; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(255,74,58,.55), 0 0 12px rgba(255,74,58,.25); display: flex; gap: .5rem; padding: .25rem .7rem; }
.bag-lcd small { color: #ff8a98; font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .1em; }
.bag-lcd b { color: #ff4a3a; font-family: 'VT323', monospace; font-size: 1.9rem; font-weight: 400; line-height: 1; text-shadow: 0 0 8px rgba(255,74,58,.9); }

.bag-window { background: linear-gradient(180deg, #0b1122, #070b16); border: 2px solid rgba(83,224,255,.75); border-radius: 12px; box-shadow: 0 0 14px rgba(83,224,255,.28), inset 0 0 24px rgba(0,0,0,.6); margin-bottom: .9rem; overflow: hidden; position: relative; }
.bag-window::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 3; }
.bag-window-title { background: linear-gradient(90deg, rgba(83,224,255,.22), rgba(83,224,255,.04)); border-bottom: 1px solid rgba(83,224,255,.4); color: #b8f3ff; font-family: 'Silkscreen', monospace; font-size: .7rem; font-weight: 700; letter-spacing: .2em; margin: 0; padding: .4rem .7rem; text-shadow: 0 0 6px var(--arcade-cyan); }

.bag-loadout-body { display: grid; gap: .6rem; grid-template-columns: 7.2rem 1fr; padding: .65rem; }
.bag-portrait { background: #03050a; border-radius: 10px; box-shadow: 0 0 0 2px #1c2640, 0 0 0 3px rgba(255,191,63,.5), 0 0 14px rgba(255,191,63,.25); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.bag-portrait img, .bag-portrait > span:first-child { aspect-ratio: 1; display: block; object-fit: cover; width: 100%; }
.bag-portrait > span:first-child { align-items: center; color: #3a4866; display: flex; font-family: 'VT323', monospace; font-size: 3rem; justify-content: center; }
.bag-portrait-name { background: #0b1020; color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1.3; overflow: hidden; padding: 0 .35rem; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bag-gear { display: grid; gap: .45rem; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.bag-gear-slot { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #121a2e, #070b16 75%); border: 1px solid #2a3552; border-radius: 6px; box-shadow: inset 2px 2px 0 rgba(0,0,0,.8), inset -2px -2px 0 rgba(80,100,150,.25); color: #3a4866; display: flex; justify-content: center; overflow: hidden; position: relative; text-decoration: none; }
.bag-gear-slot svg { height: 46%; width: 46%; }
.bag-gear-slot img { height: 100%; object-fit: cover; width: 100%; }
.bag-gear-slot.is-filled { border-color: rgba(255,191,63,.7); box-shadow: 0 0 10px rgba(255,191,63,.35); }
.bag-gear-label { background: rgba(3,5,10,.85); bottom: 0; color: #7fd8ec; font-family: 'VT323', monospace; font-size: .9rem; left: 0; letter-spacing: .08em; line-height: 1.1; position: absolute; right: 0; text-align: center; }
.bag-gear-slot.is-filled .bag-gear-label { color: var(--arcade-amber); }

.bag-tabs { border-bottom: 1px solid rgba(83,224,255,.3); display: flex; justify-content: space-between; padding: 0 .4rem; }
.bag-tabs a { align-items: baseline; border-bottom: 3px solid transparent; color: #56708a; display: flex; font-family: 'VT323', monospace; font-size: 1.2rem; gap: .15rem; min-height: 44px; padding: .55rem .15rem .2rem; text-decoration: none; }
.bag-tabs a small { font-size: .8rem; }
.bag-tabs a[aria-current] { border-bottom-color: var(--arcade-amber); color: #fff4d6; text-shadow: 0 0 6px rgba(255,191,63,.8); }
.bag-grid { display: grid; gap: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .65rem; }
.bag-slot { aspect-ratio: 1; background: radial-gradient(circle at 50% 35%, #141d33, #070b16 80%); border: 1px solid color-mix(in srgb, var(--rarity-color, #c9e4f2) 40%, #1c2640); border-radius: 6px; box-shadow: inset 2px 2px 0 rgba(0,0,0,.8), inset -2px -2px 0 rgba(80,100,150,.22); display: block; position: relative; transition: transform .08s; }
.bag-slot img { border-radius: 4px; height: 84%; left: 8%; object-fit: cover; position: absolute; top: 8%; width: 84%; }
.bag-slot-blank { color: #3a4866; font-family: 'VT323', monospace; font-size: 2rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.bag-slot.rarity-epic, .bag-slot.rarity-legendary, .bag-slot.rarity-special { animation: bag-shine 2.4s ease-in-out infinite; }
@keyframes bag-shine { 50% { box-shadow: inset 2px 2px 0 rgba(0,0,0,.8), 0 0 12px var(--rarity-glow); } }
.bag-slot:active { transform: scale(.94); }
.bag-slot.is-selected { border-color: var(--arcade-amber); box-shadow: 0 0 0 2px var(--arcade-amber), 0 0 16px rgba(255,191,63,.6); z-index: 2; }
.bag-gem { background: var(--rarity-color, #c9e4f2); box-shadow: 0 0 6px var(--rarity-color, #c9e4f2); height: 7px; left: 5px; position: absolute; top: 5px; transform: rotate(45deg); width: 7px; z-index: 1; }
.bag-worn { background: var(--arcade-cyan); border-radius: 3px; box-shadow: 0 0 6px var(--arcade-cyan); color: #03121a; font-family: 'Silkscreen', monospace; font-size: .55rem; line-height: 1; padding: .15rem .2rem; position: absolute; right: 4px; top: 4px; z-index: 1; }
.bag-count { bottom: 1px; color: #fff; font-family: 'VT323', monospace; font-size: 1.35rem; font-weight: 400; line-height: 1; position: absolute; right: 5px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px #000; z-index: 1; }
.bag-slot.is-used img { filter: grayscale(1) brightness(.45); }
.bag-used { color: #ff7a88; font-family: 'Silkscreen', monospace; font-size: .5rem; left: 50%; letter-spacing: .08em; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); }
.bag-empty { color: #56708a; font-family: 'VT323', monospace; font-size: 1.3rem; padding: 1.6rem 1rem; text-align: center; }
.bag-used-drawer { border-top: 1px dashed rgba(83,224,255,.25); }
.bag-used-drawer summary { color: #56708a; cursor: pointer; font-family: 'VT323', monospace; font-size: 1.15rem; list-style: none; min-height: 44px; display: flex; align-items: center; padding: 0 .8rem; }
.bag-used-drawer summary::-webkit-details-marker { display: none; }
.bag-used-drawer summary::before { content: '▸ '; }
.bag-used-drawer[open] summary::before { content: '▾ '; }

.bag-info { align-items: center; animation: bag-info-in .18s ease-out; background: rgba(6,9,18,.97); border: 2px solid var(--arcade-amber); border-radius: 12px; bottom: 98px; box-shadow: 0 0 16px rgba(255,191,63,.35), 0 10px 24px rgba(0,0,0,.6); display: flex; gap: .7rem; left: 50%; max-width: calc(26rem - 1.5rem); padding: .5rem .5rem .5rem .8rem; position: fixed; transform: translateX(-50%); width: calc(100% - 1.5rem); z-index: 25; }
.bag-info[hidden] { display: none; }
@keyframes bag-info-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.bag-info div { display: grid; flex: 1; min-width: 0; }
.bag-info strong { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.5rem; font-weight: 400; line-height: 1; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bag-info span { color: var(--rarity-color, var(--arcade-amber)); font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .1em; margin-top: .2rem; }
.bag-info .arcade-pill-primary { flex: none; font-size: .75rem; min-height: 44px; padding: 0 1.1rem; text-decoration: none; }
.bag-links { display: flex; gap: .6rem; justify-content: center; }
.bag-links .arcade-pill-secondary { font-size: .65rem; min-height: 44px; padding: 0 1rem; text-decoration: none; }
.bag-gear-more { border-style: dashed; color: #7fd8ec; font-family: 'VT323', monospace; font-size: 1.1rem; line-height: 1; text-align: center; }
.bag-gear-more > span:first-child { margin-bottom: .8rem; }

/* ---------- Trader's store: the Bag's windows and tiles, with Trader at the counter ---------- */
.store-counter { align-items: end; display: grid; gap: .75rem; grid-template-columns: 6.5rem 1fr; margin-bottom: .8rem; }
.store-trader { aspect-ratio: 1; border-radius: 10px; box-shadow: 0 0 0 2px #1c2640, 0 0 0 3px rgba(255,191,63,.55), 0 0 16px rgba(255,191,63,.3); display: block; object-fit: cover; width: 100%; }
.store-counter-copy { display: grid; gap: .35rem; min-width: 0; }
.store-sign { font-family: 'Yellowtail', cursive; font-size: clamp(2.6rem, 12vw, 3.2rem); font-weight: 400; line-height: 1; margin: 0; }
.store-quip { background: #120d04; border: 1px solid rgba(255,191,63,.45); border-radius: 10px 10px 10px 2px; color: #ffe2a6; font-family: 'VT323', monospace; font-size: 1.15rem; line-height: 1.05; margin: 0; padding: .4rem .55rem; }
#store { display: contents; }
.store-tabs { justify-content: flex-start; gap: 1.4rem; padding: 0 .8rem; }
.store-banner { align-items: baseline; display: flex; flex-wrap: wrap; gap: .2rem .6rem; justify-content: space-between; margin: .65rem .65rem 0; padding: .35rem .6rem; border-radius: 6px; font-family: 'VT323', monospace; font-size: 1.1rem; line-height: 1; }
.store-banner b { font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .1em; }
.store-banner.is-sale { background: rgba(255,48,72,.12); border: 1px solid var(--arcade-red); box-shadow: 0 0 10px rgba(255,48,72,.3); color: #ff9aa6; }
.store-banner.is-sale b { color: #ffd6db; }
.store-banner.is-bonus { background: rgba(101,255,154,.1); border: 1px solid #65ff9a; box-shadow: 0 0 10px rgba(101,255,154,.25); color: #9ff3c0; }
.store-banner.is-bonus b { color: #dcffe9; }
.store-grid { row-gap: .35rem; }
.store-ware { color: inherit; display: grid; gap: .1rem; min-width: 0; text-decoration: none; }
.store-ware .bag-slot { display: block; position: relative; }
.store-ware:active .bag-slot { transform: scale(.94); }
.store-ware.is-picked .bag-slot { border-color: var(--arcade-amber); box-shadow: 0 0 0 2px var(--arcade-amber), 0 0 16px rgba(255,191,63,.6); z-index: 2; }
.store-price { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.25rem; line-height: 1; text-align: center; text-shadow: 0 0 6px rgba(255,191,63,.55); }
.store-price.is-deal { color: #65ff9a; text-shadow: 0 0 6px rgba(101,255,154,.6); }
.store-note { color: #56708a; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .08em; line-height: 1.6; text-align: center; }
.store-ware.is-refused img { filter: grayscale(1) brightness(.5); }
/* The buy/sell card: art, name and price across the top; the picker and button full width below. */
.bag-info.store-pick { align-items: start; display: grid; gap: .65rem .7rem; grid-template-columns: 4.25rem minmax(0, 1fr) auto; padding: .7rem .7rem .75rem; }
.bag-info .store-pick-art { aspect-ratio: 1; display: block; margin: 0; position: relative; width: 100%; }
.bag-info .store-pick-info { align-content: center; align-self: stretch; display: grid; gap: .3rem; min-width: 0; }
.bag-info .store-pick-info strong { font-size: 1.45rem; line-height: .95; white-space: normal; }
.bag-info .store-pick-meta { color: var(--rarity-color, var(--arcade-amber)); line-height: 1; margin: 0; }
.store-pick-price { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.5rem; font-style: normal; line-height: 1; }
.store-pick-price s { color: #56708a; }
.store-pick-price small { color: #8a7a5a; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .08em; }
.store-boost { color: #65ff9a; font-family: 'Silkscreen', monospace; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-shadow: 0 0 6px rgba(101,255,154,.7); }
.store-pick-close { color: #56708a; font-family: 'VT323', monospace; font-size: 1.7rem; line-height: 1; margin: -.35rem -.1rem 0 0; min-height: 36px; min-width: 32px; text-align: right; text-decoration: none; }
.loyalty-main .store-pick form.store-deal { display: grid; gap: .55rem; grid-column: 1 / -1; margin: 0; max-width: none; width: 100%; }
.bag-info .store-qty { display: grid; gap: .4rem; grid-template-columns: 3.3rem 2.9rem minmax(0, 1fr) 2.9rem 3.3rem; }
.loyalty-main button.store-qty-btn, .loyalty-main button.store-qty-btn:hover { background: #0b1122; border: 1.5px solid rgba(83,224,255,.55); border-radius: 8px; box-shadow: none; color: #b8f3ff; font-family: 'VT323', monospace; font-size: 1.9rem; height: 46px; line-height: 1; padding: 0; text-shadow: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; width: 100%; }
.loyalty-main button.store-qty-btn.store-qty-end { border-color: #2a3552; color: #7fd8ec; font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .06em; }
.bag-info .store-qty-zero { color: inherit; font-family: 'VT323', monospace; font-size: 1.8rem; letter-spacing: 0; margin: 0; }
.loyalty-main button.store-qty-btn:active { background: rgba(83,224,255,.18); transform: none; }
.loyalty-main button.store-qty-btn.is-on { border-color: var(--arcade-amber); color: var(--arcade-amber); box-shadow: 0 0 8px rgba(255,191,63,.35); }
.loyalty-main .store-qty input { -moz-appearance: textfield; appearance: textfield; background: #03050a; border: 1.5px solid #2a3552; border-radius: 8px; box-sizing: border-box; color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.8rem; height: 46px; min-width: 0; padding: 0; text-align: center; width: 100%; }
.store-qty input::-webkit-inner-spin-button, .store-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.loyalty-main .store-pick .store-go { font-size: .75rem; height: 46px; letter-spacing: .1em; padding: 0; width: 100%; }
.loyalty-main .store-pick .store-go:disabled { background: #3a1a22; box-shadow: none; color: #a0707a; }

/* ---------- Duels: new challenge and a single duel, as versus screens ---------- */
.duel-top { align-items: center; display: flex; justify-content: space-between; }
.duel-top .arcade-back-link { align-items: center; display: inline-flex; font-size: 1.2rem; min-height: 44px; text-decoration: none; }
.duel-credits { align-items: baseline; background: #060202; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(255,74,58,.55); display: flex; gap: .45rem; padding: .2rem .6rem; }
.duel-credits small { color: #ff8a98; font-family: 'Silkscreen', monospace; font-size: .55rem; }
.duel-credits b { color: #ff4a3a; font-family: 'VT323', monospace; font-size: 1.6rem; font-weight: 400; line-height: 1; text-shadow: 0 0 8px rgba(255,74,58,.8); }
.loyalty-main h1.duel-title { font-family: 'Yellowtail', cursive; font-size: clamp(2.4rem, 11vw, 3rem); font-weight: 400; letter-spacing: 0; line-height: 1; margin: .2rem 0 .8rem; text-transform: none; }
.duel-kicker, .loyalty-main h1.duel-kicker, .loyalty-main h2.duel-kicker { color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .16em; line-height: 1.3; margin: 0 0 .6rem; text-shadow: 0 0 6px rgba(83,224,255,.6); text-transform: uppercase; }
.duel-versus { background: radial-gradient(90% 60% at 50% 30%, rgba(255,48,72,.14), transparent 70%), #080c18; border: 2px solid var(--arcade-red-bright); border-radius: 14px; box-shadow: 0 0 16px rgba(255,48,72,.35); margin-bottom: 1rem; padding: .9rem .8rem 1rem; position: relative; }
.duel-versus::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); border-radius: inherit; content: ''; inset: 0; pointer-events: none; position: absolute; }
.duel-fighters { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; }
.duel-fighter { align-items: center; display: flex; flex-direction: column; gap: .3rem; min-width: 0; position: relative; }
.duel-fighter img, .duel-blank, .loyalty-main .duel-fighter img.gift-recipient-portrait { aspect-ratio: 1; border: 3px solid var(--arcade-cyan); border-radius: 50%; box-shadow: 0 0 12px rgba(83,224,255,.5); height: auto; max-width: none; object-fit: cover; width: 96px; }
.duel-fighter.is-them img, .duel-fighter.is-them .duel-blank { border-color: var(--arcade-red-bright); box-shadow: 0 0 12px rgba(255,48,72,.6); }
.duel-blank { align-items: center; background: #0b1020; color: #3a4866; display: flex; font-family: 'VT323', monospace; font-size: 2.6rem; justify-content: center; }
.duel-fighter strong { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.35rem; font-weight: 400; line-height: 1; max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.duel-fighter span:not(.duel-blank) { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1rem; }
.duel-fighter.is-loser img { filter: grayscale(.9) brightness(.6); }
.duel-fighter.is-winner img { border-color: var(--arcade-amber); box-shadow: 0 0 18px rgba(255,191,63,.8); }
.duel-vs { color: #fff; font-family: 'Yellowtail', cursive; font-size: 2.4rem; font-weight: 400; padding: 0 .3rem; text-shadow: 0 0 4px #ff9aa8, 0 0 12px var(--arcade-red), 0 0 24px rgba(255,46,77,.8); }
.duel-badge { border-radius: 6px; font-family: 'Silkscreen', monospace; font-size: .9rem; padding: .15rem .45rem; position: absolute; right: 12%; top: 0; }
.duel-badge.is-w { background: var(--arcade-amber); color: #1a1000; box-shadow: 0 0 10px rgba(255,191,63,.8); }
.duel-badge.is-l { border: 2px solid var(--arcade-red-bright); color: #ff8a98; }
.duel-stake { color: #c9b891; font-family: 'VT323', monospace; font-size: 1.1rem; line-height: 1.15; margin: .9rem 0 .8rem; text-align: center; }
.duel-stake b { color: var(--arcade-amber); font-weight: 400; }
.duel-note { color: #d9dfea; font-family: 'VT323', monospace; font-size: 1.2rem; line-height: 1.15; margin: 0 0 .8rem; text-align: center; }
.duel-winner { color: var(--arcade-amber); font-size: 1.4rem; text-shadow: 0 0 8px rgba(255,191,63,.6); }
.duel-actions { display: grid; gap: .6rem; grid-template-columns: 1fr 1.3fr; position: relative; z-index: 1; }
.duel-actions form { display: contents; }
.duel-actions button, .duel-fight { min-height: 52px; width: 100%; }
.loyalty-main button.duel-fight { display: flex; flex-direction: column; font-size: 1.1rem; gap: .2rem; letter-spacing: .14em; min-height: 60px; position: relative; z-index: 1; }
.duel-fight small { font-family: 'VT323', monospace; font-size: 1rem; letter-spacing: .04em; opacity: .9; }
.duel-reports { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin: 0 0 .8rem; }
.duel-reports div { background: #03060c; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: .35rem .5rem; text-align: center; }
.duel-reports dt { color: #8b9ab0; font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.duel-reports dd { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.25rem; margin: .15rem 0 0; }
.duel-trophy { align-items: center; border: 2px solid var(--arcade-amber); border-radius: 12px; box-shadow: 0 0 12px rgba(255,191,63,.35); display: flex; gap: .8rem; margin: 0 auto; max-width: 18rem; padding: .5rem; position: relative; text-decoration: none; z-index: 1; }
.duel-trophy img { border-radius: 8px; height: 80px; object-fit: cover; width: 80px; }
.duel-trophy span { color: var(--arcade-amber); display: grid; font-family: 'Silkscreen', monospace; font-size: .8rem; letter-spacing: .1em; }
.duel-trophy small { color: #c9b891; font-family: 'VT323', monospace; font-size: 1rem; letter-spacing: 0; }
.duel-status { border: 1.5px solid currentColor; border-radius: 999px; color: var(--arcade-cyan); font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .12em; padding: .3rem .7rem; }
.duel-status.is-on { color: var(--arcade-amber); }
.duel-status.is-settled { color: #5fe0b0; }
.duel-status.is-declined, .duel-status.is-expired { color: #8b9ab0; }
.duel-pick { margin-bottom: 1rem; }
.duel-roster { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.duel-roster a { align-items: center; color: #fff4d6; display: flex; flex-direction: column; gap: .3rem; text-decoration: none; }
.duel-roster img, .duel-roster .duel-blank { aspect-ratio: 1; border: 2px solid rgba(83,224,255,.6); border-radius: 50%; height: auto; object-fit: cover; width: 100%; }
.duel-roster .duel-blank { font-size: 2rem; }
.duel-roster span:last-child { font-family: 'VT323', monospace; font-size: 1rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.duel-roster a:active img { border-color: var(--arcade-red-bright); transform: scale(.95); }
.duel-search form { display: grid; gap: .5rem; grid-template-columns: 1fr auto; }
.duel-search input[type=text] { background: #03060c; border: 1.5px solid rgba(83,224,255,.5); border-radius: 999px; color: #fff; font-family: 'VT323', monospace; font-size: 1.4rem; min-height: 48px; padding: 0 1rem; }
.loyalty-main .duel-search button { min-height: 48px; padding: 0 1.4rem; }
.visually-hidden { clip: rect(0 0 0 0); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
/* Pill labels read at arm's length: never under 12px. */
.arcade-pill-primary, .arcade-pill-secondary { font-size: max(.8rem, 12px); }
.duel-badge { font-family: 'VT323', monospace; font-size: 1.5rem; line-height: 1; padding: .05rem .45rem; }
.duel-winner { text-transform: uppercase; }
/* Neon titles win over the legacy site h1/h2 (Oswald) everywhere. */
.loyalty-main h1.arcade-neon-sign, .loyalty-main h2.arcade-neon-sign { font-family: 'Yellowtail', cursive; font-weight: 400; letter-spacing: 0; text-transform: none; }
.loyalty-main h1.item-card-name { font-family: 'VT323', monospace; font-size: 2rem; font-weight: 400; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.arcade-item-card .arcade-item-dock { margin: .7rem 0 .2rem; position: relative; z-index: 1; }
.item-redeem-bar { align-items: center; background: rgba(255,191,63,.08); border: 1.5px solid var(--arcade-amber); border-radius: 12px; box-shadow: 0 0 12px rgba(255,191,63,.3); display: flex; gap: .7rem; margin: 0; padding: .55rem .55rem .55rem .8rem; }
.item-redeem-bar > div { flex: 1; min-width: 0; }
.item-redeem-bar span { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .12em; }
.item-redeem-bar .item-honor { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.3rem; line-height: 1.05; margin: .15rem 0 0; text-transform: uppercase; }
.arcade-item-dock .item-redeem-bar .arcade-item-primary { flex: none; font-size: .85rem; min-height: 48px; padding: 0 1.2rem; width: auto; }
.arcade-item-card .item-card-window { max-width: 17rem; margin: 0 auto; }
/* Top Shelf: PAYS sits in the action row (PAYS · MAX BET · SPIN) and opens as a sheet over the machine. */
.top-shelf-actions { grid-template-columns: 64px 104px 1fr; }
.top-shelf-actions .top-shelf-pays > summary { margin: 0; min-height: 44px; }
.top-shelf-actions .top-shelf-pays section { bottom: 96px; box-shadow: inset 0 0 0 2px var(--arcade-amber), 0 -10px 40px rgba(0,0,0,.8); inset: auto 10px 96px; max-height: 70vh; max-width: 26rem; margin: 0 auto; position: fixed; z-index: 40; }
.top-shelf-actions .top-shelf-pays[open] > summary { color: #fff4d6; text-shadow: 0 0 8px var(--arcade-amber); }
/* Games lobby polish from the audit */
.loyalty-main .arcade-cabinet-top h2.arcade-neon-sign { font-size: 2.3rem; line-height: 1; margin: 0; }
.arcade-cabinet-status.is-hot { animation: ts-blink .9s steps(1) infinite; color: #c38bff; font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .1em; }
.arcade-score-board { align-items: center; display: inline-flex; font-size: .75rem !important; justify-content: center; min-height: 44px; min-width: 4.2rem; }
.arcade-score-periods { gap: .4rem; justify-content: space-between; }
.arcade-score-period { align-items: center; display: inline-flex; font-size: 1.35rem !important; justify-content: center; min-height: 44px; min-width: 44px; }
.arcade-score-row.is-open { color: #3a4866; }
.arcade-score-row.is-open b { color: #3a4866; }
.arcade-score-row { min-height: 32px; }
/* Home: icon entry points instead of a MORE ROUTES link list */
.arcade-portrait-stage { position: relative; }
.home-icons { display: flex; gap: .2rem; position: absolute; right: .3rem; top: .3rem; z-index: 4; }
.home-icons a { align-items: center; background: rgba(4,7,14,.72); border: 1px solid rgba(83,224,255,.45); border-radius: 50%; color: var(--arcade-cyan); display: flex; height: 44px; justify-content: center; position: relative; width: 44px; }
.home-icons svg { height: 22px; width: 22px; }
.home-icons b { background: var(--arcade-red); border-radius: 999px; box-shadow: 0 0 6px var(--arcade-red); color: #fff; font-family: 'VT323', monospace; font-size: .95rem; font-weight: 400; line-height: 1; min-width: 1.1rem; padding: .05rem .25rem; position: absolute; right: -4px; text-align: center; top: -4px; }
.arcade-feed-line { text-transform: uppercase; }
.arcade-progress-label { text-transform: uppercase; }
.home-icons { left: .5rem; right: auto; top: .5rem; }

/* ---------- Progress: the quest log ---------- */
.quest-nights .nights-at-house { background: #080c18; border: 1px solid rgba(83,224,255,.35); border-radius: 10px; padding: .6rem .7rem; }
.quest-nights .section-heading { align-items: baseline; display: flex; justify-content: space-between; }
.quest-nights .eyebrow { display: none; }
.quest-nights h2, .quest-awards h2 { color: var(--arcade-cyan); font-family: 'Silkscreen', monospace !important; font-size: .7rem !important; letter-spacing: .14em; margin: 0 0 .5rem; text-shadow: 0 0 6px rgba(83,224,255,.6); text-transform: uppercase; }
.quest-nights .night-streak { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.1rem; font-weight: 400; text-transform: uppercase; }
.quest-nights .night-strip { display: grid; gap: .3rem; grid-template-columns: repeat(7, 1fr); list-style: none; margin: 0; padding: 0; }
.quest-nights .night-mark { align-items: center; background: none; border: 0; display: flex; flex-direction: column; gap: .15rem; }
.quest-nights .night-mark-dot { background: #101a2c; border: 1.5px solid #2a3552; border-radius: 50%; height: 18px; width: 18px; }
.quest-nights .night-mark-filled .night-mark-dot { background: #8ff0ff; border-color: var(--arcade-cyan); box-shadow: 0 0 8px var(--arcade-cyan), 0 0 16px rgba(83,224,255,.6); }
.quest-nights .night-mark-day { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1rem; text-transform: uppercase; }
.quest-nights .night-mark-date { color: #56708a; font-family: 'VT323', monospace; font-size: .9rem; }
.quest-awards ul { list-style: none; margin: 0; padding: 0; }
.quest-awards li { border-bottom: 1px dashed rgba(83,224,255,.2); display: flex; font-family: 'VT323', monospace; font-size: 1.15rem; justify-content: space-between; padding: .3rem 0; text-transform: uppercase; }
.quest-awards li strong { color: #fff4d6; font-weight: 400; }
.quest-awards li span { color: var(--arcade-amber); }
/* Duels lobby results: whole-row taps, uppercase, no web underlines */
.arcade-result-row { align-items: center; border-bottom: 1px solid rgba(83,224,255,.15); display: grid; gap: .6rem; grid-template-columns: auto 1fr auto; min-height: 44px; position: relative; }
.arcade-result-row a { color: #fff4d6 !important; font-family: 'VT323', monospace; font-size: 1.25rem; text-decoration: none; text-transform: uppercase; }
.arcade-result-row a::after { content: ''; inset: 0; position: absolute; }
.arcade-result-badge.is-loss, .arcade-result-badge.is-l { border: 2px solid var(--arcade-red-bright); color: #ff8a98; }
.arcade-result-meta { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1rem; text-transform: uppercase; }

/* The house alert popup, on the kit: a neon "ITEM GET" box instead of a navy web modal. */
.loyalty-main .notification-overlay-card input[type="submit"], .loyalty-main .notification-overlay-card button[type="submit"] { background: var(--arcade-red); border: 0; border-radius: 999px; box-shadow: 0 0 10px rgba(255,48,72,.7); color: #fff; font-family: 'Silkscreen', monospace; font-size: .85rem; font-weight: 700; letter-spacing: .14em; margin-top: .6rem; min-height: 52px; text-transform: uppercase; width: 100%; }
/* A Polaroid that just developed (polaroid_ready): the photo on its cream frame, tilted. */
.notification-polaroid-photo { background: #f4efe4; box-shadow: 0 10px 22px rgba(0,0,0,.6); display: block; margin: .5rem auto .9rem; padding: 8px 8px 26px; transform: rotate(-3deg); width: min(13rem, 70%); }
.notification-polaroid-photo img { aspect-ratio: 1; display: block; object-fit: cover; width: 100%; }
.loyalty-main .notification-polaroid-see { align-items: center; background: #ff4a6e; border-radius: 999px; box-shadow: 0 0 14px rgba(255,74,110,.6); color: #fff; display: flex; font-family: 'Silkscreen', monospace; font-size: .85rem; font-weight: 700; justify-content: center; letter-spacing: .14em; margin-top: .6rem; min-height: 52px; text-decoration: none; }
.arcade-result-badge { align-items: center; display: inline-flex; font-family: 'VT323', monospace !important; font-size: 1.3rem !important; justify-content: center; line-height: 1; min-width: 1.8rem; padding: .1rem .3rem; }
.arcade-victim-link { display: block; min-width: 0; }
.arcade-victim-link .arcade-victim { width: 100%; }
/* LCD boxes: the small label sits centered against the digits, not on their baseline. */
.bag-lcd, .duel-credits { align-items: center; }
.bag-lcd small, .duel-credits small { line-height: 1.2; }
.loyalty-main button.top-shelf-pays-close { align-self: center; font-size: .8rem; margin-top: 8px; min-height: 44px; padding: 0 2.2rem; }
/* Top Shelf win popups: a neon burst over the glass. */
.top-shelf-popup { align-items: center; animation: ts-popup .35s cubic-bezier(.2,1.7,.4,1); background: rgba(5,7,12,.88); border: 3px solid var(--arcade-amber); border-radius: 16px; box-shadow: 0 0 28px rgba(255,191,63,.7), inset 0 0 18px rgba(255,191,63,.25); cursor: pointer; display: flex; flex-direction: column; gap: 2px; left: 50%; padding: 10px 26px 12px; position: absolute; top: 44%; transform: translate(-50%, -50%); z-index: 6; }
.top-shelf-popup small { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .8rem; letter-spacing: .18em; text-shadow: 0 0 8px rgba(255,191,63,.9); }
.top-shelf-popup b { color: #fff4d6; font-family: 'VT323', monospace; font-size: 3.6rem; font-weight: 400; line-height: 1; text-shadow: 0 0 10px rgba(255,191,63,.9), 0 0 24px rgba(255,191,63,.6); white-space: nowrap; }
.top-shelf-popup em { color: #c9b891; font-family: 'VT323', monospace; font-size: 1rem; font-style: normal; letter-spacing: .06em; }
.top-shelf-popup small, .top-shelf-popup em { white-space: nowrap; }
.top-shelf-popup.is-big_win, .top-shelf-popup.is-jackpot { border-color: #ff4a5e; box-shadow: 0 0 34px rgba(255,48,72,.9), inset 0 0 18px rgba(255,48,72,.3); }
.top-shelf-popup.is-big_win b, .top-shelf-popup.is-jackpot b { font-size: 4.4rem; text-shadow: 0 0 12px #ff4a5e, 0 0 30px rgba(255,48,72,.8); }
.top-shelf-popup.is-break_shot, .top-shelf-popup.is-total { border-color: #c38bff; box-shadow: 0 0 34px rgba(159,76,255,.85), inset 0 0 18px rgba(159,76,255,.3); }
.top-shelf-popup.is-break_shot small, .top-shelf-popup.is-total small { color: #d9b8ff; text-shadow: 0 0 8px #9f4cff; }
.top-shelf-popup.is-break_shot b { font-size: 2.4rem; }
.top-shelf-popup.is-leaving { opacity: 0; transform: translate(-50%, -60%) scale(.9); transition: opacity .4s, transform .4s; }
@keyframes ts-popup { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
/* Home with no portrait yet: a glowing silhouette and one obvious next step. */
.home-portrait-empty { display: block; height: 100%; position: relative; text-decoration: none; }
.arcade-portrait-stage .home-portrait-empty .character-empty-art { align-items: center; background: radial-gradient(70% 60% at 50% 40%, #1b2a48, var(--arcade-bg)); display: flex; justify-content: center; }
.home-silhouette { fill: rgba(83,224,255,.07); height: 78%; stroke: var(--arcade-cyan); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(83,224,255,.8)) drop-shadow(0 0 18px rgba(83,224,255,.35)); animation: home-silhouette 2.4s ease-in-out infinite; }
@keyframes home-silhouette { 50% { filter: drop-shadow(0 0 10px rgba(83,224,255,1)) drop-shadow(0 0 26px rgba(83,224,255,.5)); } }
.home-portrait-cta { align-items: center; bottom: 26%; display: flex; flex-direction: column; gap: 6px; left: 0; position: absolute; right: 0; z-index: 3; }
.home-portrait-cta b { font-size: .85rem; letter-spacing: .12em; min-height: 52px; padding: 0 1.6rem; }
.home-portrait-cta small { color: #d6f7ff; font-family: 'VT323', monospace; font-size: 1.1rem; letter-spacing: .06em; text-shadow: 0 0 6px rgba(0,0,0,.9); }
.arcade-portrait-stage .home-portrait-empty .character-empty-art { align-items: flex-start; padding-top: 34px; }
.home-silhouette { height: 46%; }
.home-portrait-cta { bottom: auto; top: 50%; }
.arcade-player-home:has(.home-portrait-empty) .arcade-identity h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
/* Top Shelf BREAK SHOT tally: a small tag on the cabinet's top rail while free spins run. */
/* The Break Shot pot: big and gold, in the wager's place while a run is on. */
.top-shelf.is-run .top-shelf-wager { display: none; }
.top-shelf-bonus { align-items: center; background: linear-gradient(180deg, #170b26, #0b0614); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(195,139,255,.8), 0 0 18px rgba(159,76,255,.5); display: grid; gap: 10px; grid-template-columns: auto auto minmax(0, 1fr); margin: 0 7px; min-height: 64px; padding: 6px 14px; }
.top-shelf-bonus[hidden] { display: none; }
.top-shelf-bonus-title { color: #e2c8ff; font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .12em; line-height: 1.25; text-shadow: 0 0 8px rgba(195,139,255,.9); }
.top-shelf-bonus > span:not(.top-shelf-bonus-title) { display: grid; gap: 2px; }
.top-shelf-bonus small { color: #9d7fd1; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .1em; white-space: nowrap; }
.top-shelf-bonus b, .top-shelf-bonus i { color: #eadcff; font-family: 'VT323', monospace; font-size: 1.9rem; font-style: normal; font-weight: 400; line-height: .9; }
.top-shelf-bonus i { color: #6c5a8e; margin: 0 2px; }
.top-shelf-bonus-won { justify-items: end; }
.top-shelf-bonus-won b { color: #fff4d6; display: inline-block; font-size: 2.9rem; text-shadow: 0 0 8px rgba(255,191,63,.9), 0 0 22px rgba(255,191,63,.5); transform-origin: right center; }
.top-shelf-bonus-won b::before { content: "+"; }
.top-shelf-bonus.is-up .top-shelf-bonus-won b { animation: ts-bonus-up .9s cubic-bezier(.2,1.6,.4,1); }
.top-shelf-bonus.is-up { box-shadow: inset 0 0 0 2px rgba(255,191,63,.95), 0 0 22px rgba(255,191,63,.6); transition: box-shadow .2s; }
@keyframes ts-bonus-up { 30% { color: #fff; text-shadow: 0 0 12px #ffbf3f, 0 0 28px #ffbf3f; transform: scale(1.22); } }
.top-shelf-bonus.is-retrigger { animation: ts-bonus-retrigger 1.6s ease-out; }
.top-shelf-bonus.is-retrigger .top-shelf-bonus-run b { color: #b9ffe6; text-shadow: 0 0 8px #5fe0b0, 0 0 16px #53e0ff; }
@keyframes ts-bonus-retrigger { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(95,224,176,.9), 0 0 18px rgba(95,224,176,.6); } 15% { box-shadow: inset 0 0 0 3px #b9ffe6, 0 0 30px #5fe0b0, 0 0 56px rgba(83,224,255,.6); transform: scale(1.05); } 40% { transform: scale(1); } }
/* The drop: the pot pours into CREDITS under a shower of coins. */
/* The pot's photons (pourPhotons in top_shelf.js), as video poker's collect. */
.ts-photons { inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: 1100; }
.ts-photon { background: #ff4a3a; border-radius: 50%; box-shadow: 0 0 7px 2px #ff4a3a, 0 0 16px #ff3048; height: 5px; position: absolute; width: 5px; will-change: transform, opacity; }
.ts-photon-amount { position: absolute; text-align: right; transform-origin: right center; white-space: nowrap; will-change: transform, opacity; }
.top-shelf-bonus.is-flying .top-shelf-bonus-won b { visibility: hidden; }
.top-shelf.is-pot-drop .top-shelf-bonus { box-shadow: inset 0 0 0 3px #ffbf3f, 0 0 30px rgba(255,191,63,.8); }
.top-shelf-coins { inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: 15; }
.top-shelf-coins i { animation: ts-coin-fall var(--d, 1.2s) cubic-bezier(.45,0,.9,.6) forwards; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #fff6cf 0 18%, #ffd35a 30%, #c98a12 70%, #7a4e05 100%); border-radius: 50%; box-shadow: 0 0 8px rgba(255,191,63,.8); position: absolute; top: -24px; width: var(--s, 16px); }
@keyframes ts-coin-fall { to { opacity: .2; transform: translateY(var(--fall, 420px)) rotate(var(--r, 360deg)) scaleX(.6); } }
/* Retrigger: its own look, green-cyan, and a ring that bursts off the cabinet. */
.top-shelf[data-celebration="retrigger"] .top-shelf-cabinet { animation-duration: .18s; box-shadow: 0 0 44px rgba(95,224,176,.85), 0 0 90px rgba(83,224,255,.35); }
.top-shelf[data-celebration="retrigger"] .top-shelf-cabinet::after { animation: ts-ring 1s ease-out 2; border: 3px solid #5fe0b0; border-radius: 14px; content: ""; inset: 0; pointer-events: none; position: absolute; }
@keyframes ts-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
.top-shelf-popup.is-retrigger { border-color: #5fe0b0; box-shadow: 0 0 34px rgba(95,224,176,.9), inset 0 0 18px rgba(83,224,255,.3); }
.top-shelf-popup.is-retrigger small { color: #b9ffe6; text-shadow: 0 0 8px #5fe0b0; }
.top-shelf-popup.is-retrigger b { font-size: 2.4rem; text-shadow: 0 0 10px #5fe0b0, 0 0 24px rgba(83,224,255,.7); }
.top-shelf-popup.is-retrigger em { color: #b9ffe6; font-size: 1.3rem; }
.top-shelf-popup.is-retrigger em span { color: #fff; }
/* Payline map: shown while the LINES stepper moves (or LINES is tapped), fading after a beat. */
.top-shelf-map { inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .35s; z-index: 3; }
.top-shelf-map.is-on { opacity: 1; transition-duration: .12s; }
.top-shelf-map svg { height: 100%; inset: 0; overflow: visible; position: absolute; width: 100%; }
.top-shelf-map polyline { fill: none; filter: drop-shadow(0 0 3px var(--line)); stroke: var(--line); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.top-shelf-map.has-new polyline:not(.is-new) { opacity: .55; }
.top-shelf-map polyline.is-new { animation: ts-map-draw .5s ease-out, ts-map-glow .6s ease-in-out .5s infinite alternate; stroke-dasharray: 1000; stroke-width: 5; }
@keyframes ts-map-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes ts-map-glow { to { filter: drop-shadow(0 0 6px var(--line)) drop-shadow(0 0 12px var(--line)); } }
.top-shelf-map-badge { align-items: center; background: var(--line); border-radius: 50%; box-shadow: 0 0 0 1.5px #05070c, 0 0 6px var(--line); color: #0a0f1c; display: flex; font-family: 'VT323', monospace; font-size: 15px; height: 17px; justify-content: center; line-height: 1; position: absolute; transform: translate(-50%, -50%); width: 17px; }
.top-shelf-map-badge.is-left { left: 3px; }
.top-shelf-map-badge.is-right { left: calc(100% - 3px); }
.top-shelf-map-badge.is-new { animation: ts-badge .6s cubic-bezier(.2,1.8,.4,1); box-shadow: 0 0 0 2px #fff, 0 0 12px var(--line); z-index: 1; }
@keyframes ts-badge { from { transform: translate(-50%, -50%) scale(2.2); } }
.is-mapping .top-shelf-cell img { opacity: .28; transition: opacity .15s; }
.is-mapping .top-shelf-lines { opacity: 0; }
[data-ts-map-show] { cursor: pointer; }
/* THE JACKPOT takeover. Strobe stays under 3 flashes a second; reduced motion holds everything still. */
.top-shelf-takeover { align-items: center; background: radial-gradient(80% 60% at 50% 45%, rgba(120,10,30,.92), rgba(5,2,8,.97)); cursor: pointer; display: flex; inset: 0; justify-content: center; opacity: 0; overflow: hidden; position: fixed; transition: opacity .3s; z-index: 1000; }
.top-shelf-takeover.is-on { opacity: 1; }
.top-shelf-takeover.is-leaving { opacity: 0; }
.top-shelf-takeover-rays { animation: ts-rays 9s linear infinite; background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.20) 0deg 9deg, transparent 9deg 22.5deg); height: 220vmax; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%); width: 220vmax; }
@keyframes ts-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.top-shelf-takeover-strobe { animation: ts-strobe .8s steps(1) 5; inset: 0; mix-blend-mode: screen; position: absolute; }
@keyframes ts-strobe { 0% { background: rgba(255,240,200,.22); } 25% { background: rgba(255,46,110,.14); } 50% { background: transparent; } 75% { background: rgba(83,224,255,.12); } }
.top-shelf-takeover-fx { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.top-shelf-takeover-bulbs { animation: ts-chase .5s steps(2) infinite; background-image: radial-gradient(circle, #fff1c2 0, #ffc34a 2.6px, rgba(255,170,40,.4) 4px, transparent 5.5px); background-size: 18px 18px; inset: 6px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 12px; position: absolute; }
.top-shelf-takeover-bulbs.has-lights { animation: none; background: none; inset: 0; -webkit-mask: none; mask: none; padding: 0; }
.top-shelf-takeover-bulbs .ts-bulbs i { height: 10px; margin: -5px 0 0 -5px; width: 10px; }
.ts-photon.is-comet { background: radial-gradient(circle, #fff 0 30%, #ffd0c8 45%, #ff4a3a 75%); box-shadow: 0 0 8px 3px #ff4a3a, 0 0 22px 6px rgba(255,48,72,.75); height: 12px; margin: -6px 0 0 -6px; width: 12px; }
.ts-photon.is-comet::before { background: linear-gradient(90deg, transparent, rgba(255,74,58,.75)); border-radius: 3px; content: ""; height: 4px; position: absolute; right: 50%; top: 4px; width: 30px; }
.top-shelf-takeover-card { align-items: center; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; position: relative; text-align: center; z-index: 2; }
.top-shelf-takeover-card::before { background: radial-gradient(closest-side, rgba(10,2,8,.82), rgba(10,2,8,.55) 60%, transparent); content: ""; inset: -30% -10%; position: absolute; z-index: -1; }
.top-shelf-takeover-card small { color: #ffd23f; font-family: 'Silkscreen', monospace; font-size: .85rem; letter-spacing: .3em; text-shadow: 0 0 8px #ffbf3f; }
.top-shelf-takeover-card h2 { display: flex; font-family: 'Silkscreen', monospace; font-size: clamp(2.6rem, 14vw, 6rem); letter-spacing: .04em; line-height: 1; margin: 0; }
.top-shelf-takeover-card h2 span { animation: ts-letter 1.1s ease-in-out calc(var(--i) * .08s) infinite, ts-neon 1.4s steps(1) calc(var(--i) * .2s) infinite; color: #fff; display: inline-block; text-shadow: 0 0 6px #ff2e6e, 0 0 18px #ff2e6e, 0 0 40px #ff2e6e; }
@keyframes ts-letter { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-18%) scale(1.12); } }
@keyframes ts-neon { 0% { text-shadow: 0 0 6px #ff2e6e, 0 0 18px #ff2e6e, 0 0 40px #ff2e6e; } 33% { text-shadow: 0 0 6px #ffd23f, 0 0 18px #ffbf3f, 0 0 40px #ff8a2a; } 66% { text-shadow: 0 0 6px #53e0ff, 0 0 18px #53e0ff, 0 0 40px #9f4cff; } }
.top-shelf-takeover-card b { color: #fff4d6; font-family: 'VT323', monospace; font-size: clamp(4.5rem, 26vw, 11rem); font-variant-numeric: tabular-nums; font-weight: 400; line-height: .9; text-shadow: 0 0 10px #ffbf3f, 0 0 30px #ffbf3f, 0 0 70px rgba(255,138,42,.8); }
.top-shelf-takeover.is-landed .top-shelf-takeover-card b { animation: ts-landed .6s cubic-bezier(.2,1.8,.4,1); }
@keyframes ts-landed { 40% { color: #fff; transform: scale(1.18); } }
.top-shelf-takeover-card p { color: #ffb3c2; font-family: 'VT323', monospace; font-size: 1.35rem; letter-spacing: .06em; margin: 0; min-height: 1em; }
.top-shelf-takeover-card em { animation: ts-blink 1s steps(1) infinite; color: #d6f7ff; font-family: 'Silkscreen', monospace; font-size: .8rem; font-style: normal; letter-spacing: .2em; margin-top: 18px; text-shadow: 0 0 8px var(--arcade-cyan); }
.top-shelf-takeover.is-calm .top-shelf-takeover-rays, .top-shelf-takeover.is-calm .top-shelf-takeover-bulbs, .top-shelf-takeover.is-calm .top-shelf-takeover-card h2 span, .top-shelf-takeover.is-calm .top-shelf-takeover-card em { animation: none; }
.top-shelf-takeover.is-calm .top-shelf-takeover-strobe { animation: ts-calm-glow 3s ease-in-out infinite alternate; }
@keyframes ts-calm-glow { from { background: transparent; } to { background: rgba(255,191,63,.08); } }
@media (prefers-reduced-motion: reduce) {
  .top-shelf-bonus.is-up .top-shelf-bonus-won b, .top-shelf-bonus.is-retrigger, .top-shelf-map polyline.is-new, .top-shelf-map-badge.is-new, .top-shelf[data-celebration="retrigger"] .top-shelf-cabinet::after { animation: none; }
  .top-shelf-takeover.is-landed .top-shelf-takeover-card b { animation: none; }
}
/* The bump grows the number rightward, away from its BONUS label. */
/* "FREE SPIN" plus "12 LEFT" must fit one pill without wrapping. */
.loyalty-main .top-shelf-spin small { white-space: nowrap; }
.loyalty-main .is-free button.top-shelf-spin b { font-size: 15px; letter-spacing: .04em; }
/* The legacy `.loyalty-main button` rule (display: inline-block) outranked .top-shelf-spin, so SPIN and
   "45 CREDITS" ran inline from the top and overflowed narrow iPhones. Stack them, centered, as designed. */
.loyalty-main button.top-shelf-spin { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; overflow: hidden; }
.loyalty-main button.top-shelf-spin b, .loyalty-main button.top-shelf-spin small { max-width: 100%; }
.top-shelf-stepper small { white-space: nowrap; }
/* Narrow phones (320-359px, e.g. the first iPhone SE): let the wager and action rows shrink instead of overflowing. */
.top-shelf-wager { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 78px; }
.top-shelf-actions { grid-template-columns: 64px 104px minmax(0,1fr); }
@media (max-width: 359px) {
  .top-shelf-wager { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 60px; gap: 6px; }
  .top-shelf-stepper > a { width: 30px; }
  .top-shelf-actions { grid-template-columns: 52px 88px minmax(0,1fr); gap: 6px; }
}
/* Auto-spin: holding SPIN fills a ring; while on, the pill breathes cyan and says AUTO / TAP TO STOP. */
.loyalty-main button.top-shelf-spin { position: relative; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.top-shelf-spin::after { border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(255,244,214,.0); content: ""; inset: 0; pointer-events: none; position: absolute; }
.is-arming .top-shelf-spin::after { animation: ts-arm 1.2s linear forwards; }
@keyframes ts-arm { from { box-shadow: inset 0 0 0 0 rgba(255,244,214,.15); } to { box-shadow: inset 0 0 0 30px rgba(255,244,214,.35); } }
.loyalty-main .is-auto button.top-shelf-spin { animation: ts-auto 1.4s ease-in-out infinite; box-shadow: inset 0 0 0 3px #53e0ff, 0 0 14px 2px rgba(83,224,255,.7); }
@keyframes ts-auto { 50% { box-shadow: inset 0 0 0 3px #b8f3ff, 0 0 24px 6px rgba(83,224,255,.9); } }
@media (prefers-reduced-motion: reduce) { .loyalty-main .is-auto button.top-shelf-spin { animation: none; } }

/* Neon Nine: the golf cabinet (pages/golf.css styles the game itself). */
.arcade-cabinet-golf { align-items: center; border-color: #b36bff; box-shadow: 0 0 12px rgba(179,107,255,.35), inset 0 0 12px rgba(179,107,255,.08); display: grid; gap: .6rem; grid-template-columns: 3.6rem 1fr auto; }
.arcade-cabinet-golf img { height: 3.6rem; width: 3.6rem; }
.arcade-cabinet-golf h2 { color: #f1e6ff; font-size: 1.9rem; text-shadow: 0 0 8px #b36bff; white-space: nowrap; }
.arcade-golf-copy { min-width: 0; }
.arcade-golf-copy span { color: #c9b3ff; display: block; font-size: clamp(.66rem, 3.3vw, 1rem); white-space: nowrap; }
.arcade-score-caption { color: #7f93a8; font-family: "Silkscreen", monospace; font-size: .62rem; letter-spacing: .14em; margin: .2rem 0 .15rem; text-align: center; }

/* ---------- Character maker: crowd, basics, four takes, lock ---------- */
.maker-page .arcade-bottom-nav { display: none; }
.maker { display: grid; gap: 1rem; margin: 0 auto; max-width: 30rem; padding: .8rem .75rem 3rem; }
.maker-head { display: grid; gap: .3rem; }
.maker-step { color: #56708a; font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .14em; }
.maker-title { font-family: 'Yellowtail', cursive; font-size: clamp(2.4rem, 11vw, 3rem); font-weight: 400; line-height: 1; margin: 0; }
.maker-lede { color: #c9d4e2; font-family: 'VT323', monospace; font-size: 1.2rem; line-height: 1.15; margin: 0; }
.maker-lede a { color: var(--arcade-cyan); }
.loyalty-main form.maker-form { display: grid; gap: 1rem; max-width: none; }
.maker-group { border: 0; display: grid; gap: .45rem; margin: 0; min-width: 0; padding: 0; }
.maker-group legend { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .58rem; letter-spacing: .12em; margin-bottom: .45rem; padding: 0; }
.maker-group legend small { color: #56708a; font-size: .5rem; }
.maker-crowds { display: grid; gap: .4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.maker-crowd, .maker-chip { cursor: pointer; position: relative; }
.maker-crowd input, .maker-chip input, .maker-candidate input { opacity: 0; pointer-events: none; position: absolute; }
.maker-crowd span { background: #0f1628; border: 1.5px solid #2a3552; border-radius: 9px; display: grid; gap: .15rem; height: 100%; padding: .5rem .6rem; box-sizing: border-box; }
.maker-crowd b { color: #fff4d6; font-family: 'Silkscreen', monospace; font-size: .55rem; font-weight: 400; letter-spacing: .06em; }
.maker-crowd em { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1rem; font-style: normal; line-height: 1.05; }
.maker-crowd input:checked + span { border-color: var(--arcade-amber); box-shadow: 0 0 10px rgba(255,191,63,.35); }
.maker-crowd input:checked + span b { color: var(--arcade-amber); }
.maker-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.maker-chip span { background: #0b1122; border: 1.5px solid #2a3552; border-radius: 999px; color: #b8f3ff; display: inline-flex; align-items: center; font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .05em; min-height: 36px; padding: 0 .75rem; }
.maker-chip input:checked + span { border-color: var(--arcade-amber); color: var(--arcade-amber); box-shadow: 0 0 8px rgba(255,191,63,.3); }
.maker-crowd input:focus-visible + span, .maker-chip input:focus-visible + span, .maker-candidate input:focus-visible + .polaroid { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }
/* Lab experiments (rich_picker.js): rich dropdowns with a reference picture beside them; a plain select without JavaScript. */
.maker-ref-note { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1.1; margin: 0; }
.maker-rich { position: relative; }
.loyalty-main .maker-rich-select { background: #0f1628; border: 1.5px solid #2a3552; border-radius: 9px; color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.15rem; min-height: 52px; padding: 0 .6rem; width: 100%; }
.loyalty-main .maker-rich-select[multiple] { min-height: 8rem; }
.rich-pick-row { align-items: stretch; display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr) 76px; }
.loyalty-main button.rich-pick-button { align-items: center; align-content: center; background: #0f1628; border: 1.5px solid #2a3552; border-radius: 9px; box-shadow: none; color: inherit; column-gap: .6rem; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; min-height: 64px; padding: .55rem .7rem; row-gap: .2rem; text-align: left; text-transform: none; width: 100%; }
.rich-pick-button b { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .62rem; font-weight: 400; letter-spacing: .06em; }
.rich-pick-button span { color: #c7d2e2; font-family: 'VT323', monospace; font-size: 1.12rem; grid-column: 1; line-height: 1.05; }
.rich-pick-button.is-empty b { color: #fff4d6; }
.rich-pick-button.is-empty span { color: #8b9ab0; }
.rich-pick-button i { border-bottom: 2px solid var(--arcade-cyan); border-right: 2px solid var(--arcade-cyan); grid-column: 2; grid-row: 1 / span 2; height: 9px; transform: rotate(45deg) translateY(-3px); transition: transform .15s; width: 9px; }
.maker-rich.is-open .rich-pick-button { border-color: var(--arcade-cyan); }
.maker-rich.is-open .rich-pick-button i { transform: rotate(225deg) translateY(-3px); }
.loyalty-main button.rich-pick-button:focus-visible, .rich-pick-list:focus-visible, .loyalty-main button.rich-pick-done:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }
.rich-pick-ref { display: grid; gap: .2rem; justify-items: center; margin: 0; }
.rich-pick-ref-frame, .rich-pick-thumb { background: #0b1122; border: 1.5px solid #2a3552; border-radius: 8px; box-sizing: border-box; display: block; overflow: hidden; }
.rich-pick-ref-frame { aspect-ratio: 1; width: 76px; }
.rich-pick-ref-frame.is-empty, .rich-pick-thumb.is-empty { background: repeating-linear-gradient(135deg, #0b1122 0 6px, #0f1830 6px 12px); border-style: dashed; }
.rich-pick-ref img, .rich-pick-thumb img { display: block; height: 100%; object-fit: cover; object-position: 50% 22%; width: 100%; }
.rich-pick-ref figcaption { color: #56708a; font-family: 'Silkscreen', monospace; font-size: .42rem; letter-spacing: .1em; text-align: center; }
.rich-pick-pop { background: #0b1220; border: 1.5px solid var(--arcade-cyan); border-radius: 12px; box-shadow: 0 14px 30px rgba(0,0,0,.65), 0 0 14px rgba(83,224,255,.25); left: 0; margin-top: 6px; padding: 6px; position: absolute; right: 0; top: 100%; z-index: 20; }
.rich-pick-pop[hidden] { display: none; }
.rich-pick-list { display: grid; gap: 2px; list-style: none; margin: 0; max-height: min(58vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.rich-pick-option { align-items: center; border: 1.5px solid transparent; border-radius: 9px; cursor: pointer; display: grid; gap: .65rem; grid-template-columns: 52px minmax(0, 1fr); min-height: 60px; padding: .3rem .5rem .3rem .3rem; }
.rich-pick-thumb { height: 52px; width: 52px; }
.rich-pick-words { display: grid; gap: .15rem; }
.rich-pick-words b { color: #fff4d6; font-family: 'Silkscreen', monospace; font-size: .58rem; font-weight: 400; letter-spacing: .06em; }
.rich-pick-words span { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1.05; }
.rich-pick-option.is-active { background: #16223a; border-color: #2f4466; }
.rich-pick-option[aria-selected="true"] { border-color: var(--arcade-amber); }
.rich-pick-option[aria-selected="true"] b { color: var(--arcade-amber); }
.rich-pick-option[aria-selected="true"] b::after { content: " ✓"; }
.loyalty-main button.rich-pick-done { background: #05080d; border: 1.5px solid var(--arcade-cyan); border-radius: 999px; box-shadow: none; color: #b8f3ff; display: block; font-family: 'Silkscreen', monospace; font-size: .6rem; margin: 6px 0 0 auto; min-height: 44px; padding: 0 1.2rem; }
/* Hair color as swatches; Custom's color input covers its swatch, so a tap opens the native picker. */
.maker-swatches { display: grid; gap: .3rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.maker-swatch { align-content: start; align-items: center; cursor: pointer; display: grid; gap: .25rem; justify-items: center; position: relative; }
.maker-swatch input[type="radio"] { opacity: 0; pointer-events: none; position: absolute; }
.maker-swatch i { border: 2px solid #2a3552; border-radius: 50%; box-sizing: border-box; height: 2.4rem; width: 2.4rem; }
.maker-swatch span { color: #b8f3ff; font-family: 'VT323', monospace; font-size: .95rem; line-height: 1; text-align: center; }
.maker-swatch input:checked ~ i { border-color: var(--arcade-amber); box-shadow: 0 0 0 2px var(--arcade-amber), 0 0 10px rgba(255,191,63,.5); }
.maker-swatch input:checked ~ span { color: var(--arcade-amber); }
.maker-swatch input:focus-visible ~ i { outline: 2px solid var(--arcade-cyan); outline-offset: 3px; }
.hair-black i { background: #17171a; } .hair-brown i { background: #6b4428; } .hair-blond i { background: #e0bf72; }
.hair-red i { background: #b2432a; } .hair-gray i { background: #a3a3a6; }
.hair-dyed i { background: conic-gradient(#ff4fd8, #53e0ff, #7dff6b, #ffe600, #ff4fd8); }
.hair-custom i { background: radial-gradient(circle, var(--custom) 0 46%, transparent 47%), conic-gradient(#ff3048, #ffe600, #7dff6b, #53e0ff, #a24bff, #ff3048); }
.maker-swatch .maker-swatch-color { block-size: 100%; border: 0; cursor: pointer; inline-size: 100%; inset: 0; margin: 0; opacity: 0; padding: 0; position: absolute; }
.maker-swatch:has(.maker-swatch-color:focus-visible) i { outline: 2px solid var(--arcade-cyan); outline-offset: 3px; }
/* Skin chips show the tone, with the label for screen readers and a hover hint. */
.maker-chips.is-skin .maker-chip span { border-radius: 50%; color: transparent; font-size: 0; height: 2.4rem; min-height: 0; padding: 0; width: 2.4rem; }
.maker-chip.skin-1 span { background: #f6d7c3; } .maker-chip.skin-2 span { background: #e8b896; } .maker-chip.skin-3 span { background: #c98e66; }
.maker-chip.skin-4 span { background: #9a6440; } .maker-chip.skin-5 span { background: #6b4228; } .maker-chip.skin-6 span { background: #3f2616; }
.creator-skin-dot { border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: inline-block; height: 1.1rem; vertical-align: middle; width: 1.1rem; }
.creator-skin-dot.skin-1 { background: #f6d7c3; } .creator-skin-dot.skin-2 { background: #e8b896; } .creator-skin-dot.skin-3 { background: #c98e66; }
.creator-skin-dot.skin-4 { background: #9a6440; } .creator-skin-dot.skin-5 { background: #6b4228; } .creator-skin-dot.skin-6 { background: #3f2616; }
.maker-chips.is-skin .maker-chip input:checked + span { border-color: var(--arcade-amber); box-shadow: 0 0 0 2px var(--arcade-amber), 0 0 10px rgba(255,191,63,.5); }
/* The lab creator: Sex in the neon blue and pink; write-ins in the neon blue. */
.maker-chip.sex-man span { border-color: rgba(83,224,255,.45); color: var(--arcade-cyan); }
.maker-chip.sex-man input:checked + span { border-color: var(--arcade-cyan); box-shadow: 0 0 10px rgba(83,224,255,.45); color: var(--arcade-cyan); }
.maker-chip.sex-woman span { border-color: rgba(255,79,216,.45); color: #ff4fd8; }
.maker-chip.sex-woman input:checked + span { border-color: #ff4fd8; box-shadow: 0 0 10px rgba(255,79,216,.45); color: #ff4fd8; }
/* Outranks house.css's form-wide input color. */
.loyalty-main .creator-form .maker-extra:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]) { color: var(--arcade-cyan); }
.loyalty-main .maker-extra { background: #03050a; border: 1.5px solid #2a3552; border-radius: 8px; color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.2rem; padding: .55rem .7rem; width: 100%; box-sizing: border-box; }
.loyalty-main .maker-go { font-size: .75rem; min-height: 48px; width: 100%; }
.maker-group.is-missing { border-radius: 10px; outline: 1.5px dashed #ff6b7d; outline-offset: 3px; }
.maker-missing { color: #ff8a98; margin-left: .6em; }
.loyalty-main button.maker-link, .loyalty-main button.maker-link:hover { background: none; border: 0; box-shadow: none; color: #7fd8ec; font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: 0; padding: 0; text-decoration: underline; text-transform: none; }
.maker-candidates { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.maker-candidate { cursor: pointer; display: block; position: relative; }
.polaroid { background: #f4efe4; border-radius: 3px; box-shadow: 0 8px 18px rgba(0,0,0,.5); display: grid; gap: .3rem; padding: .4rem .4rem .7rem; }
.polaroid img, .polaroid .polaroid-blank { aspect-ratio: 1; display: block; width: 100%; }
.polaroid img { object-fit: cover; }
/* A developing polaroid: the frame with a dark, slowly brightening square. */
.polaroid .polaroid-blank { background: linear-gradient(135deg, #1b1712, #2c2418); }
.maker-candidate.is-queued .polaroid-blank, .maker-candidate.is-generating .polaroid-blank { animation: develop 2.4s ease-in-out infinite alternate; }
@keyframes develop { to { filter: brightness(1.7) sepia(.4); } }
@media (prefers-reduced-motion: reduce) { .maker-candidate .polaroid-blank { animation: none; } }
.polaroid em { color: #4a443a; font-family: 'Silkscreen', monospace; font-size: .45rem; font-style: normal; letter-spacing: .08em; text-align: center; }
.maker-candidate:nth-child(odd) .polaroid { transform: rotate(-1.5deg); }
.maker-candidate:nth-child(even) .polaroid { transform: rotate(1.2deg); }
.maker-candidate input:checked + .polaroid { box-shadow: 0 0 0 3px var(--arcade-amber), 0 0 18px rgba(255,191,63,.55); transform: rotate(0) scale(1.02); }
.maker-candidate.is-failed .polaroid { opacity: .5; }
.maker-welcome { justify-items: center; text-align: center; }
.maker-polaroid { transform: rotate(-2deg); width: min(80%, 18rem); }
.maker-gift { background: rgba(101,255,154,.08); border: 1px solid #65ff9a; border-radius: 10px; display: grid; gap: .3rem; padding: .7rem 1rem; width: 100%; box-sizing: border-box; }
.maker-gift b { color: #dcffe9; font-family: 'Silkscreen', monospace; font-size: .55rem; font-weight: 400; letter-spacing: .12em; }
.maker-gift span { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.4rem; line-height: 1.05; }
.maker-gift small { color: #9ff3c0; font-family: 'VT323', monospace; font-size: 1rem; }

/* ---------- Photo Booth polaroids: props for this shot, developing frame ---------- */
.booth-developing { aspect-ratio: 1; animation: develop 2.4s ease-in-out infinite alternate; background: linear-gradient(135deg, #1b1712, #2c2418); display: block; width: 100%; }
@media (prefers-reduced-motion: reduce) { .booth-developing { animation: none; } }
.booth-frame.is-developing { background: #f4efe4; padding: 3px 3px 9px; }
.booth-frame.is-developing span { background: linear-gradient(135deg, #1b1712, #2c2418); color: #8a7a5a; display: grid; height: 100%; place-items: center; }
.booth-props small { color: #56708a; font-size: .5rem; letter-spacing: .08em; }
.booth-prop-row { align-items: center; display: grid; gap: .5rem; grid-template-columns: 3.4rem minmax(0, 1fr); margin-top: .45rem; }
.booth-prop-slot { color: #7fd8ec; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .08em; }
.booth-prop-strip { display: flex; gap: .35rem; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.booth-prop-strip::-webkit-scrollbar { display: none; }
.booth-prop { cursor: pointer; flex: none; position: relative; }
.booth-prop input { opacity: 0; pointer-events: none; position: absolute; }
.booth-prop span { align-items: center; background: #070b16; border: 1.5px solid #2a3552; border-radius: 7px; color: #56708a; display: flex; font-family: 'Silkscreen', monospace; font-size: .45rem; height: 3.2rem; justify-content: center; overflow: hidden; width: 3.2rem; }
.booth-prop img { height: 100%; object-fit: cover; width: 100%; }
.booth-prop input:checked + span { border-color: var(--arcade-amber); box-shadow: 0 0 0 1px var(--arcade-amber), 0 0 10px rgba(255,191,63,.45); color: var(--arcade-amber); }
.booth-prop input:focus-visible + span { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }
.booth-newbase { margin: .2rem 0 0; text-align: center; }
.booth-newbase a { color: #7fd8ec; font-family: 'VT323', monospace; font-size: 1.1rem; }

/* Top Shelf's charm slot, under the spin button. */
.loyalty-main form.top-shelf-charm { align-items: center; background: #0b1122; border: 1.5px dashed #2a3552; border-radius: 10px; display: flex; gap: .6rem; justify-content: space-between; margin: .6rem 0 0; max-width: none; padding: .4rem .6rem; }
.loyalty-main form.top-shelf-charm.is-on { border: 1.5px solid #3fe0a0; box-shadow: 0 0 10px rgba(63,224,160,.25); }
.top-shelf-charm span { display: grid; min-width: 0; }
.top-shelf-charm small { color: #56708a; font-family: 'Silkscreen', monospace; font-size: .45rem; letter-spacing: .1em; }
.top-shelf-charm b { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.25rem; font-weight: 400; line-height: 1; }
.top-shelf-charm em { color: #8b9ab0; font-family: 'VT323', monospace; font-size: .95rem; font-style: normal; line-height: 1.05; }
.loyalty-main .top-shelf-charm button, .loyalty-main .top-shelf-charm button:hover { background: transparent; border: 1.5px solid #3fe0a0; border-radius: 999px; box-shadow: none; color: #3fe0a0; flex: none; font-family: 'Silkscreen', monospace; font-size: .5rem; min-height: 36px; padding: 0 .7rem; text-shadow: none; width: auto; }

/* Bag sheet: the tapped item, big enough to see, with its marks, flavor and what to do. */
.bag-info.bag-sheet { align-items: stretch; display: grid; gap: .7rem; max-width: calc(30rem - 1.5rem); padding: .8rem .8rem .75rem; }
.bag-info.bag-sheet[hidden] { display: none; }
.bag-sheet .bag-sheet-top { display: grid; gap: .75rem; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
.bag-sheet .bag-sheet-art { aspect-ratio: 1; background: #070b16; border: 1px solid #2a3552; border-radius: 10px; display: block; margin: 0; overflow: hidden; }
.bag-sheet .bag-sheet-art img { display: block; height: 100%; object-fit: cover; width: 100%; }
.bag-sheet .bag-sheet-copy { align-content: start; display: grid; gap: .3rem; min-width: 0; }
.bag-sheet .bag-sheet-copy strong { font-size: 1.6rem; line-height: .95; white-space: normal; }
.bag-sheet .bag-sheet-meta { margin: 0; }
.bag-sheet .bag-traits { display: flex; flex-wrap: wrap; gap: .25rem; }
.bag-sheet .bag-trait { align-items: center; background: #0b1122; border: 1px solid #2a3552; border-radius: 5px; color: #b8f3ff; cursor: help; display: inline-flex; font: 400 1rem/1 'VT323', monospace; font-style: normal; height: 1.45rem; justify-content: center; min-width: 1.45rem; padding: 0 .3rem; }
.bag-sheet .bag-trait.is-rarity { border-color: var(--rarity-color, #2a3552); color: var(--rarity-color, #b8f3ff); }
.bag-sheet .bag-tip { color: #b8f3ff; font: 400 1rem/1.1 'VT323', monospace; margin: 0; }
.bag-sheet em { color: #ffe2a6; font: italic 400 1.1rem/1.15 'VT323', monospace; }
.bag-sheet .bag-sheet-acts { display: grid; gap: .4rem; grid-auto-columns: 1fr; grid-auto-flow: column; }
.bag-sheet .bag-sheet-acts a { align-items: center; display: flex; font-size: .62rem; justify-content: center; min-height: 44px; padding: 0 .4rem; text-align: center; text-decoration: none; }
.bag-sheet .bag-sheet-acts a[hidden] { display: none; }
.bag-sheet .bag-sheet-close { background: none; border: 0; box-shadow: none; color: #8b9ab0; cursor: pointer; font-size: 1.6rem; height: 36px; line-height: 1; padding: 0; position: absolute; right: .3rem; top: .2rem; width: 36px; }
.bag-sheet .bag-sheet-close:hover { background: none; color: #fff4d6; }

/* Item card, round 3: name and trait marks share the top line; words sit in a text box. */
.arcade-item-card .item-card-top { align-items: center; gap: .6rem; margin-bottom: .5rem; }
.arcade-item-card .item-card-top .item-card-name { font-size: clamp(1.8rem, 8vw, 2.3rem); margin: 0; min-width: 0; }
.item-card-marks { display: flex; flex: none; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; max-width: 48%; }
.item-mark { align-items: center; background: rgba(4,7,14,.7); border: 1px solid rgba(255,255,255,.18); border-radius: 5px; color: #b8f3ff; cursor: help; display: inline-flex; font: 400 1.05rem/1 'VT323', monospace; font-style: normal; height: 1.5rem; justify-content: center; min-width: 1.5rem; padding: 0 .3rem; }
.item-mark.is-rarity { border-color: var(--rarity-color); color: var(--rarity-color); text-shadow: 0 0 6px var(--rarity-glow); }
.item-mark:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }
.item-mark-tip { color: #b8f3ff; font: 400 1.05rem/1.1 'VT323', monospace; margin: -.2rem 0 .4rem; text-align: right; }
.arcade-item-card .item-card-kind { border-bottom: 1px solid color-mix(in srgb, var(--rarity-color) 35%, transparent); margin: .6rem 0 0; padding-bottom: .3rem; }
.item-card-text { display: grid; gap: .45rem; margin: .55rem 0 .7rem; }
.item-card-text p { margin: 0; }
.item-description { color: #e8ecf4; font: 400 1.2rem/1.12 'VT323', monospace; }
.arcade-item-card .item-card-text .item-flavor { border-left: 0; color: #c9b98f; font-style: italic; margin: 0; padding: 0; }
.item-copy-line { background: rgba(255,191,63,.08); border-radius: 6px; color: #ffe2a6; font: 400 1.1rem/1.12 'VT323', monospace; padding: .35rem .5rem; }
.item-history-fold { margin-top: 1rem; }
.item-history-fold > summary { color: #7fd8ec; cursor: pointer; font: 400 .65rem 'Silkscreen', monospace; letter-spacing: .1em; list-style: none; padding: .6rem 0; text-align: center; }
.item-history-fold > summary::-webkit-details-marker { display: none; }
.item-history-fold > summary::after { content: " ▸"; }
.item-history-fold[open] > summary::after { content: " ▾"; }
.bag-sheet .bag-sheet-acts form { display: contents; }
.bag-sheet .bag-sheet-acts form[hidden] { display: none; }
.bag-sheet .bag-sheet-acts form button { font-size: .62rem; min-height: 44px; padding: 0 .4rem; width: 100%; }
.item-redeem-bar > form { flex: none; margin: 0; }
.item-redeem-bar > div { flex: 1; min-width: 0; }
.bag-sheet .bag-sheet-acts form button { font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .08em; }
.arcade-item-dock .item-redeem-bar > form .arcade-item-primary { font-size: .72rem; letter-spacing: .08em; min-width: 0; padding: 0 .9rem; white-space: nowrap; width: auto; }
.arcade-item-dock .item-redeem-bar > form { display: block; max-width: max-content; width: auto; }

/* The Lucky Horseshoe, set into the cabinet's bottom rail. Quiet until the charm glows. */
/* The Lucky Horseshoe sits just left of WIN, dark (but still tappable) until the charm glows. */
.top-shelf-clover { align-self: center; opacity: 0; position: relative; transition: opacity .3s; z-index: 5; }
.top-shelf-clover[open], .top-shelf-clover.is-shining, .top-shelf-clover.is-twinkling { opacity: 1; }
.top-shelf-clover summary { border-radius: 50%; cursor: pointer; display: grid; height: 24px; list-style: none; place-items: center; width: 24px; }
.top-shelf-clover summary::-webkit-details-marker { display: none; }
.top-shelf-clover svg { height: 16px; overflow: visible; width: 16px; }
.top-shelf-charm-shoe, .top-shelf-charm-nails { fill: none; opacity: .7; stroke: #2e7d55; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .3s; }
.top-shelf-charm-shoe { stroke-width: 2.6; }
.top-shelf-charm-nails { stroke-width: 1.4; }
.top-shelf-clover[open] .top-shelf-charm-shoe, .top-shelf-clover[open] .top-shelf-charm-nails { opacity: 1; }
.top-shelf-clover form { align-items: center; background: #0b1122; border: 1.5px solid #3fe0a0; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.6); display: flex; gap: .6rem; margin: 0; max-width: none; padding: .5rem .6rem; position: absolute; right: -4px; top: 30px; width: min(80vw, 18rem); }
.top-shelf-clover form span { display: grid; min-width: 0; }
.top-shelf-clover form b { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.2rem; font-weight: 400; line-height: 1; }
.top-shelf-clover form em { color: #8b9ab0; font-family: 'VT323', monospace; font-size: .95rem; font-style: normal; line-height: 1.05; }
.loyalty-main .top-shelf-clover button, .loyalty-main .top-shelf-clover button:hover { background: transparent; border: 1.5px solid #3fe0a0; border-radius: 999px; box-shadow: none; color: #3fe0a0; flex: none; font-family: 'Silkscreen', monospace; font-size: .5rem; min-height: 32px; padding: 0 .7rem; text-shadow: none; width: auto; }
.top-shelf-clover.is-twinkling .top-shelf-charm-shoe { animation: ts-clover-twinkle 1.2s ease-out; }
.top-shelf-clover.is-twinkling .top-shelf-charm-shoe, .top-shelf-clover.is-twinkling .top-shelf-charm-nails { opacity: 1; stroke: #8dffbf; }
.top-shelf-clover.is-shining summary { animation: ts-clover-shine 2.6s ease-out; }
.top-shelf-clover.is-shining .top-shelf-charm-shoe, .top-shelf-clover.is-shining .top-shelf-charm-nails { opacity: 1; stroke: #8dffbf; }
@keyframes ts-clover-twinkle { 30% { opacity: 1; stroke: #6fe8a6; } }
@keyframes ts-clover-shine { 0% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } 12% { box-shadow: inset 0 0 0 2px #b9ffd6, 0 0 18px #3fe0a0, 0 0 40px rgba(255,211,90,.7); transform: scale(1.6) rotate(-12deg); } 30% { transform: scale(1.35) rotate(8deg); } 60% { box-shadow: inset 0 0 0 2px #8dffbf, 0 0 14px #3fe0a0; transform: scale(1.2); } 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } }
/* The charm came good: the middle reel's horseshoes, wild for this spin, swell and pulse. */
.top-shelf-cell.is-lucky { animation: ts-lucky .65s ease-in-out 4; background: radial-gradient(circle, rgba(63,224,160,.45), rgba(255,211,90,.12) 55%, transparent 72%); border-radius: 8px; box-shadow: 0 0 0 2px rgba(141,255,191,.8), 0 0 22px rgba(63,224,160,.75); position: relative; z-index: 3; }
.top-shelf-cell.is-lucky img { filter: drop-shadow(0 0 4px #b9ffd6) drop-shadow(0 0 10px #3fe0a0) drop-shadow(0 0 18px rgba(255,211,90,.8)) brightness(1.35); }
@keyframes ts-lucky { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.28); } }
@media (prefers-reduced-motion: reduce) { .top-shelf-cell.is-lucky, .top-shelf-clover.is-shining summary { animation: none; } }

/* Games on the way (docs/upcoming-games.md): dark cabinets with their signs off. */
.arcade-soon { display: grid; gap: .45rem; margin: .2rem 0 .4rem; }
.arcade-soon-title { color: #56708a; font-family: 'Silkscreen', monospace; font-size: .55rem; font-weight: 400; letter-spacing: .16em; margin: 0; }
.arcade-soon-row { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.arcade-soon-cabinet { --soon: #56708a; align-items: center; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), #070b14; border: 1.5px dashed color-mix(in srgb, var(--soon) 55%, transparent); border-radius: 8px; display: grid; gap: .15rem; justify-items: center; min-height: 6.2rem; padding: .55rem .3rem; text-align: center; }
.arcade-soon-cabinet b { color: var(--soon); font-family: 'VT323', monospace; font-size: 2rem; font-weight: 400; line-height: 1; opacity: .75; text-shadow: 0 0 6px color-mix(in srgb, var(--soon) 40%, transparent); }
.arcade-soon-cabinet span { color: #8b9ab0; font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .08em; line-height: 1.3; }
.arcade-soon-cabinet small { border: 1px solid color-mix(in srgb, var(--soon) 60%, transparent); border-radius: 999px; color: var(--soon); font-family: 'Silkscreen', monospace; font-size: .42rem; letter-spacing: .12em; padding: .15rem .45rem; }
.arcade-soon-cabinet.is-poker { --soon: #53e0ff; }
.arcade-soon-cabinet.is-blackjack { --soon: #3fe0a0; }
.arcade-soon-cabinet.is-farkle { --soon: #ff4a5e; }
.arcade-cabinet-blackjack { align-items: center; border-color: #ff2e4d; box-shadow: 0 0 12px rgba(255,46,77,.35), inset 0 0 12px rgba(255,46,77,.08); display: grid; gap: .6rem; grid-template-columns: 3.6rem 1fr auto; }
.arcade-cabinet-blackjack h2 { color: #ffe6e9; font-family: 'Yellowtail', cursive; font-size: 2.1rem; font-weight: 400; text-shadow: 0 0 2px #ff9aa8, 0 0 8px #ff2e4d, 0 0 20px rgba(255,46,77,.8); white-space: nowrap; }
.arcade-cabinet-blackjack .arcade-golf-copy span { color: #ffb3bf; }
.arcade-bj-cards { display: flex; height: 3.6rem; position: relative; width: 3.6rem; }
.arcade-bj-cards i { align-items: center; background: radial-gradient(120% 90% at 30% 15%, #1b2133, #090b12 70%); border: 1px solid rgba(255,191,63,.4); border-radius: 4px; color: #5fe6ff; display: flex; flex-direction: column; font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-style: normal; font-weight: 700; height: 3.1rem; justify-content: center; line-height: 1; position: absolute; text-shadow: 0 0 6px rgba(83,224,255,.85); top: .25rem; width: 2.2rem; }
.arcade-bj-cards i:first-child { left: 0; transform: rotate(-8deg); }
.arcade-bj-cards i + i { left: 1.3rem; transform: rotate(7deg); }
.arcade-bj-cards i.is-red { color: #ff4d79; text-shadow: 0 0 6px rgba(255,46,110,.85); }
.arcade-bj-cards b { font-size: .9rem; font-weight: 400; }

/* Neon Deuces cabinet: blackjack's two-card layout in violet. */
.arcade-cabinet-vp { align-items: center; background: #0b0716; border-color: #b36bff; border-radius: 10px; box-shadow: 0 0 12px rgba(179,107,255,.35), inset 0 0 12px rgba(179,107,255,.08); display: grid; gap: .6rem; grid-template-columns: 4.75rem minmax(0, 1fr) auto; }
.arcade-cabinet-vp h2 { color: #f3e8ff; font-size: clamp(1.35rem, 7.5vw, 2rem); text-shadow: 0 0 8px #b36bff, 0 0 20px rgba(179,107,255,.7); white-space: nowrap; }
.arcade-vp-copy span { color: #c9b3ff; font-size: clamp(.8rem, 3.7vw, 1rem); line-height: 1; white-space: normal; }
.arcade-vp-cards { height: 4.125rem; width: 4.75rem; }
.arcade-vp-cards i { border-color: #b36bff; color: #b36bff; height: 3.69rem; text-shadow: 0 0 6px rgba(179,107,255,.85); width: 2.625rem; }
.arcade-vp-cards i:first-child { transform: rotate(-10deg); }
.arcade-vp-cards i + i { left: 1.625rem; top: .5rem; transform: rotate(8deg); }
.arcade-cabinet-vp .arcade-pill-primary { flex: none; font-size: .75rem; letter-spacing: .1em; padding: 0 .75rem; }

/* VIDEO POKER's chooser: the Games popup (a dialog) and /loyalty/video-poker/modes. Two big
   choices; a game waiting for its paytable OK is greyed and not a link. */
.vp-modes-dialog:not([open]) { display: none; }
.vp-modes-dialog { background: #0b0716; border: 1px solid #b36bff; border-radius: 12px; box-shadow: 0 0 18px rgba(179,107,255,.45), 0 12px 38px #03030de6; box-sizing: border-box; color: #f3e8ff; margin: auto; max-width: calc(100vw - 32px); padding: 14px; width: 360px; }
.vp-modes-dialog::backdrop { background: rgba(3,4,14,.78); }
.vp-modes-dialog header { align-items: center; display: flex; justify-content: space-between; }
.vp-modes-dialog h2, .vp-modes-title { color: #f3e8ff; font-family: 'Yellowtail', cursive; font-size: 2rem; font-weight: 400; margin: 0; text-shadow: 0 0 8px #b36bff, 0 0 20px rgba(179,107,255,.7); }
.vp-modes-dialog header { gap: .75rem; }
.vp-modes-dialog header h2 { white-space: nowrap; }
/* Beats the legacy `.loyalty-main button` pill. */
.loyalty-main button.vp-modes-close, .vp-modes-close { background: none; border: 1px solid rgba(83,224,255,.6); border-radius: 999px; box-shadow: none; color: #53e0ff; cursor: pointer; flex: none; font-family: 'VT323', monospace; font-size: 1.15rem; font-weight: 400; letter-spacing: .1em; min-height: 44px; padding: 0 .9rem; text-shadow: 0 0 6px rgba(83,224,255,.6); width: auto; }
.loyalty-main button.vp-modes-close:hover { background: rgba(83,224,255,.12); color: #c9f7ff; }
.vp-modes-pick { color: #c9b3ff; font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: .12em; margin: .2rem 0 .7rem; }
.vp-modes { display: grid; gap: .75rem; }
.vp-mode { --mode: #b36bff; align-items: center; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--mode) 18%, transparent), #0a0814 70%); border: 2px solid var(--mode); border-radius: 12px; box-shadow: 0 0 12px color-mix(in srgb, var(--mode) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--mode) 12%, transparent); color: #f3e8ff; display: grid; gap: .75rem; grid-template-columns: 4.25rem minmax(0, 1fr); min-height: 5.5rem; padding: .7rem .85rem; position: relative; text-decoration: none; }
.vp-mode-jacks { --mode: #53e0ff; }
a.vp-mode:active { transform: scale(.98); }
a.vp-mode:focus-visible { outline: 3px solid #fff0fb; outline-offset: 3px; }
.vp-mode-cards { display: block; height: 4rem; position: relative; width: 4.25rem; }
.vp-mode-cards i { align-items: center; background: radial-gradient(120% 90% at 30% 15%, #1b2133, #090b12 70%); border: 1px solid var(--mode); border-radius: 4px; color: var(--mode); display: flex; flex-direction: column; font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; font-style: normal; font-weight: 700; height: 3.4rem; justify-content: center; line-height: 1; position: absolute; text-shadow: 0 0 6px var(--mode); top: .2rem; width: 2.4rem; }
.vp-mode-cards i:first-child { left: 0; transform: rotate(-10deg); }
.vp-mode-cards i + i { left: 1.5rem; top: .5rem; transform: rotate(8deg); }
.vp-mode-cards b { font-size: .9rem; font-weight: 400; }
.vp-mode-copy { display: grid; gap: .2rem; min-width: 0; }
.vp-mode-copy b { font-family: 'Silkscreen', monospace; font-size: clamp(1.05rem, 5.4vw, 1.3rem); font-weight: 700; letter-spacing: .02em; line-height: 1.05; text-shadow: 0 0 8px var(--mode); }
.vp-mode-copy small { color: color-mix(in srgb, var(--mode) 55%, #fff); font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: .08em; line-height: 1; }
.vp-mode-copy em { color: #ffbf3f; font-family: 'VT323', monospace; font-size: 1.05rem; font-style: normal; line-height: 1.1; }
.vp-mode-last { background: var(--mode); border-radius: 999px; color: #0a0814; font-family: 'VT323', monospace; font-size: .95rem; letter-spacing: .08em; padding: 0 .5rem; position: absolute; right: .6rem; top: -.65rem; }
.vp-mode-last[hidden] { display: none; }
.vp-mode.is-waiting { --mode: #6b6680; box-shadow: none; cursor: not-allowed; filter: grayscale(1); opacity: .62; }
.vp-modes-page { box-sizing: border-box; display: grid; gap: .25rem; margin: 0 auto; max-width: 420px; padding: .5rem 16px 1.5rem; }
.vp-modes-page .arcade-back-link { color: #c9b3ff; font-family: 'VT323', monospace; }
.vp-modes-page h1.vp-modes-title { font-family: 'Yellowtail', cursive; font-size: 2.6rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Farkle cabinet: neon dice and a compact phone-first PLAY row. */
.arcade-cabinet-farkle { align-items: center; background: #100b13; border-color: var(--arcade-amber); border-radius: 10px; box-shadow: 0 0 12px rgba(255,191,63,.35), inset 0 0 12px rgba(255,74,94,.1); display: grid; gap: .5rem; grid-template-columns: 4.1rem minmax(0,1fr) auto; min-width: 0; }
.arcade-farkle-dice { display: block; filter: drop-shadow(0 0 3px var(--arcade-cyan)) drop-shadow(0 0 6px rgba(255,191,63,.7)); height: 4.1rem; width: 4.1rem; }
.arcade-farkle-copy { min-width: 0; }
.arcade-cabinet-farkle h2 { color: var(--arcade-cream); font-size: clamp(1.6rem, 7vw, 2.1rem); text-shadow: 0 0 3px var(--arcade-amber), 0 0 12px var(--arcade-red-bright); }
.arcade-farkle-copy span { color: var(--arcade-cyan); display: block; font-family: 'Silkscreen', monospace; font-size: .65rem; line-height: 1.3; overflow-wrap: normal; }
.arcade-cabinet-farkle .arcade-pill-primary { flex: none; min-height: 44px; padding: 0 .75rem; }

/* The lab's step-by-step creator (pages/character_lab.html, LAB_MODE only). */
.creator-steps { counter-reset: none; display: grid; gap: .3rem; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0 0 .4rem; padding: 0; }
.creator-steps li > a, .creator-steps li > b { text-decoration: none; }
.creator-steps li { min-width: 0; }
.creator-steps li a, .creator-steps li:not(:has(a)) { border-top: 3px solid #2a3552; color: #56708a; display: grid; gap: .15rem; padding-top: .35rem; }
.creator-steps li b { font-family: 'Silkscreen', monospace; font-size: .6rem; font-weight: 400; }
.creator-steps li span { font-family: 'Silkscreen', monospace; font-size: .42rem; letter-spacing: .06em; line-height: 1.3; }
.creator-steps li.is-done a { border-top-color: #7a6326; color: #c9a54a; min-height: 44px; }
.creator-steps li.is-on { border-top: 3px solid var(--arcade-amber); color: var(--arcade-amber); padding-top: .35rem; display: grid; gap: .15rem; }
.creator-steps li:not(.is-on):not(.is-done) a { color: #8fb5cf; min-height: 44px; }
.creator-at { align-items: center; display: grid; gap: .3rem; grid-template-columns: auto minmax(0, 1fr); }
.creator-at span { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.6rem; }
.creator-fixed { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.4rem; margin: 0; }
.creator-fixed small, .creator-hint, .creator-note { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1.1; }
.creator-note { color: #ffcf7a; margin: 0; }
.creator-pack { border: 1.5px dashed #34536b; border-radius: 9px; color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1.05rem; line-height: 1.1; margin: .2rem 0 0; padding: .45rem .6rem; }
.creator-pack b { color: #53e0ff; display: block; font-family: 'Silkscreen', monospace; font-size: .5rem; font-weight: 400; letter-spacing: .1em; margin-bottom: .2rem; }
.creator-section { background: #0b1122; border: 1.5px solid #2a3552; border-radius: 12px; }
.creator-section[open] { border-color: #34536b; }
.creator-hair-parts { display: grid; gap: .5rem; margin-bottom: .9rem; }
.creator-part { background: #0e1630; border: 1px solid #26314d; border-radius: 10px; }
.creator-part[open] { border-color: #34536b; }
.creator-part > summary { align-items: center; color: var(--arcade-amber); cursor: pointer; display: flex; font-family: 'Silkscreen', monospace; font-size: .56rem; gap: .6rem; justify-content: space-between; letter-spacing: .12em; list-style: none; min-height: 46px; padding: 0 .8rem; }
.creator-part > summary::-webkit-details-marker { display: none; }
.creator-part > summary .creator-summary { margin-left: auto; }
.creator-part > summary::after { border-bottom: 2px solid var(--arcade-cyan); border-right: 2px solid var(--arcade-cyan); content: ""; flex: none; height: 7px; transform: rotate(45deg) translateY(-3px); width: 7px; }
.creator-part[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.creator-part > .maker-group { margin: 0; padding: 0 .8rem .8rem; }
.creator-section > summary { align-items: center; color: var(--arcade-amber); cursor: pointer; display: flex; font-family: 'Silkscreen', monospace; font-size: .62rem; justify-content: space-between; letter-spacing: .12em; list-style: none; min-height: 52px; padding: 0 .9rem; }
.creator-section > summary::-webkit-details-marker { display: none; }
.creator-section > summary::after { border-bottom: 2px solid var(--arcade-cyan); border-right: 2px solid var(--arcade-cyan); content: ""; height: 8px; transform: rotate(45deg) translateY(-3px); width: 8px; }
.creator-section[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
.creator-section-body { display: grid; gap: 1rem; padding: .2rem .8rem 1rem; }
.creator-section:has(.is-missing) { border-color: #ff6b7d; }
.creator-draw { display: grid; gap: .7rem; scroll-margin-top: 1rem; }
.creator-face { justify-self: center; transform: rotate(-1.5deg); width: min(78%, 17rem); }
.creator-refresh { display: grid; gap: .45rem; }
.creator-list { gap: .5rem; }
.creator-item { display: grid; gap: .3rem .4rem; grid-template-columns: minmax(0, 1fr) 44px; }
.creator-description-text { max-width: 100%; min-height: 7.5rem; overflow-wrap: anywhere; resize: vertical; word-break: break-word; }
/* Long picks or a long description never widen the page (Jesse): the creator's sections and
   groups are as wide as the screen at most, and a collapsed line cuts off with an ellipsis. */
.creator-form > *, .creator-section, .creator-section-body, .creator-form .maker-group { box-sizing: border-box; max-width: 100%; min-width: 0; }
.creator-section > summary .creator-summary { flex: 1 1 0; text-align: right; }
.creator-count { color: var(--arcade-muted); display: block; font-family: 'VT323', monospace; font-size: 1rem; text-align: right; }
.creator-word-note { color: #ffcf7a; font-family: 'VT323', monospace; font-size: 1rem; grid-column: 1 / -1; line-height: 1.1; }
.creator-word-note[hidden] { display: none; }
.creator-refresh [data-item-add][aria-label] { border: 1.5px solid #34536b; border-radius: 8px; font-size: 1.5rem; min-width: 44px; text-align: center; text-decoration: none; }
.creator-section > summary small { color: #56708a; font-size: .5rem; margin-left: .5rem; margin-right: auto; }
.loyalty-main button.creator-remove { background: #05080d; border: 1.5px solid #34536b; border-radius: 8px; box-shadow: none; color: #8fb5cf; font-size: 1.3rem; margin: 0; min-height: 44px; padding: 0; }
.loyalty-main button.creator-add { justify-self: start; min-height: 44px; }
.creator-add[hidden] { display: none; }
.creator-nav { display: grid; gap: .6rem; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: .4rem; }
.creator-final { display: grid; gap: .8rem; justify-items: center; }
.creator-final .maker-form { width: 100%; }
/* Bigger samples in the creator: the pick's sample large under its button, and larger thumbnails in the lists. */
.creator .rich-pick-row { grid-template-columns: minmax(0, 1fr); }
.creator .rich-pick-ref { align-items: center; display: grid; gap: .7rem; grid-template-columns: 9.5rem minmax(0, 1fr); justify-items: start; }
.creator .rich-pick-ref[hidden] { display: none; }
.creator .rich-pick-ref-frame { width: 9.5rem; }
.creator .rich-pick-ref figcaption { color: #8b9ab0; font-family: 'VT323', monospace; font-size: 1.05rem; letter-spacing: 0; line-height: 1.1; text-align: left; }
.creator .rich-pick-option { grid-template-columns: 76px minmax(0, 1fr); min-height: 84px; }
.creator .rich-pick-thumb { height: 76px; width: 76px; }
.rich-pick-heading { color: #53e0ff; font-family: 'Silkscreen', monospace; font-size: .5rem; letter-spacing: .14em; padding: .6rem .5rem .2rem; }
/* A section with one picker already says what it is; keep its legend for screen readers only. */
.creator-section-body > .maker-group:only-child > legend { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
/* The step creator's accordion: a collapsed section shows its pick on one line. */
.creator-section > summary { gap: .6rem; }
.creator-section > summary b { flex: none; font-weight: 400; }
.creator-summary { color: #c7d2e2; font-family: 'VT323', monospace; font-size: 1.15rem; letter-spacing: 0; margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-section[open] > summary .creator-summary { color: #8b9ab0; }
/* A card: the big portrait on top, its selector right under it, one frame. */
.maker-rich.is-card > legend { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.creator .rich-pick-row.is-card { gap: 0; grid-template-columns: minmax(0, 1fr); }
.creator .rich-pick-row.is-card .rich-pick-ref { display: block; margin: 0; position: relative; }
.creator .rich-pick-row.is-card .rich-pick-ref-frame { border: 1.5px solid #34536b; border-bottom: 0; border-radius: 12px 12px 0 0; width: 100%; }
.creator .rich-pick-row.is-card .rich-pick-ref figcaption { background: rgba(5, 8, 13, .72); border-radius: 6px; color: #c7d2e2; font-size: .95rem; left: .55rem; padding: .05rem .45rem; position: absolute; top: .55rem; }
.loyalty-main .creator .rich-pick-row.is-card button.rich-pick-button { border-color: #34536b; border-radius: 0 0 12px 12px; border-top: 0; }
.creator .maker-rich.is-card.is-open .rich-pick-ref-frame, .loyalty-main .creator .maker-rich.is-card.is-open .rich-pick-row.is-card button.rich-pick-button { border-color: var(--arcade-cyan); }
.creator .maker-rich.is-card.is-missing { outline-offset: 4px; }
/* The build slider (step creator): the full-body sample, then a brass track with a stop per build. */
.creator-build > legend { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.build-ref { margin: 0; }
.build-frame { aspect-ratio: 1; background: #0b1122; border: 1.5px solid #34536b; border-radius: 12px; box-sizing: border-box; display: block; overflow: hidden; width: 100%; }
.build-frame.is-empty { background: repeating-linear-gradient(135deg, #0b1122 0 8px, #0f1830 8px 16px); border-style: dashed; }
.build-frame img { display: block; height: 100%; object-fit: contain; width: 100%; }
.build-track { align-items: center; display: grid; gap: .6rem; grid-template-columns: 22px minmax(0, 1fr) 34px; margin-top: .7rem; }
.build-icon { fill: #c9a54a; height: 30px; justify-self: center; opacity: .85; width: 100%; }
.build-icon.is-big { height: 30px; }
.build-rail { position: relative; }
.build-slider { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; display: block; height: 48px; margin: 0; width: 100%; --fill: 25%; }
.build-slider:disabled { cursor: not-allowed; opacity: .45; }
.build-slider::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ffbf3f 0 var(--fill), #2a1d0a var(--fill) 100%); border: 1.5px solid #7a6326; border-radius: 8px; height: 14px; }
.build-slider::-moz-range-track { background: #2a1d0a; border: 1.5px solid #7a6326; border-radius: 8px; height: 14px; }
.build-slider::-moz-range-progress { background: #ffbf3f; border-radius: 8px; height: 14px; }
.build-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: linear-gradient(#ffe29a, #d89a2b 55%, #9a6414); border: 3px solid #2a1a05; border-radius: 10px; box-shadow: 0 0 0 2px #ffbf3f, 0 4px 10px rgba(0, 0, 0, .6); height: 40px; margin-top: -15px; width: 30px; }
.build-slider::-moz-range-thumb { background: linear-gradient(#ffe29a, #d89a2b 55%, #9a6414); border: 3px solid #2a1a05; border-radius: 10px; box-shadow: 0 0 0 2px #ffbf3f, 0 4px 10px rgba(0, 0, 0, .6); height: 34px; width: 24px; }
.build-slider:focus-visible { outline: none; }
.build-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #ffbf3f, 0 0 0 5px var(--arcade-cyan); }
.build-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #ffbf3f, 0 0 0 5px var(--arcade-cyan); }
/* The ticks sit just under the thumb, each centered under where the thumb's center stops (its
   travel is inset by half the thumb's width), so the thumb never hides one. */
.build-rail { padding-bottom: 12px; }
.build-ticks { display: flex; justify-content: space-between; left: 13.5px; pointer-events: none; position: absolute; right: 13.5px; top: 48px; }
.build-ticks i { background: #c9a54a; border-radius: 1px; display: block; height: 8px; width: 3px; }
/* The house text-input look (house.css) is not for a slider. */
.loyalty-main input[type="range"].build-slider:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 0; padding: 0; }
/* The lab creator's control kinds (Jesse): one of several is a labeled slider (the build slider's
   track and thumb), any of several a list of switches, yes or no one switch. */
.creator-stops { margin: 0; position: relative; }
.creator-stops > legend { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .56rem; letter-spacing: .12em; padding: 0; }
.stops-label { color: var(--arcade-cyan); font-family: 'VT323', monospace; font-size: 1.3rem; line-height: 1; position: absolute; right: 0; top: -.2rem; }
.creator-stops > legend.visually-hidden + .stops-label { display: block; margin-bottom: .2rem; position: static; text-align: right; }
.creator-preview { margin: 0 0 .6rem; position: relative; }
.creator-preview-frame { aspect-ratio: 1; background: #0b1122; border: 1.5px solid #34536b; border-radius: 12px; box-sizing: border-box; display: block; overflow: hidden; width: 100%; }
.creator-preview.is-empty .creator-preview-frame { background: repeating-linear-gradient(135deg, #0b1122 0 8px, #0f1830 8px 16px); border-style: dashed; }
.creator-preview-frame img { display: block; height: 100%; object-fit: cover; width: 100%; }
.creator-preview figcaption { background: rgba(5, 8, 16, .75); border-radius: 6px; color: #c7d2e2; font-family: 'VT323', monospace; font-size: 1rem; left: .5rem; padding: .05rem .45rem; position: absolute; top: .5rem; }
.creator-toggles { margin: 0; }
.creator-toggles > legend { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .56rem; letter-spacing: .12em; padding: 0 0 .3rem; }
.creator-toggles > legend small { color: var(--arcade-muted); }
.toggle-list { display: grid; gap: .35rem; }
.creator-toggle { align-items: center; background: #0b1122; border: 1.5px solid #26314d; border-radius: 10px; cursor: pointer; display: flex; gap: .7rem; justify-content: space-between; min-height: 48px; padding: 0 .8rem; }
.creator-toggle > span { color: #dce6f2; font-family: 'VT323', monospace; font-size: 1.25rem; }
.creator-toggle > input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.creator-toggle > i { background: #1a2238; border: 1.5px solid #3a4766; border-radius: 999px; flex: none; height: 26px; position: relative; transition: background .15s, border-color .15s; width: 46px; }
.creator-toggle > i::after { background: #8b9ab0; border-radius: 50%; content: ""; height: 18px; left: 3px; position: absolute; top: 2.5px; transition: transform .15s, background .15s; width: 18px; }
.creator-toggle > input:checked ~ i { background: rgba(83, 224, 255, .25); border-color: var(--arcade-cyan); }
.creator-toggle > input:checked ~ i::after { background: var(--arcade-cyan); box-shadow: 0 0 8px rgba(83, 224, 255, .7); transform: translateX(19px); }
.creator-toggle:has(input:checked) { border-color: #34536b; }
.creator-toggle > input:focus-visible ~ i { box-shadow: 0 0 0 3px var(--arcade-cyan); }
.creator-toggle.is-solo { background: #0b1122; border-color: #2a3552; border-radius: 12px; min-height: 52px; }
.creator-toggle.is-solo > span { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .12em; }
.creator-switch { margin: 0; }
.creator-hair-parts, .creator-stops + .creator-stops { margin-top: .9rem; }
.creator-stops + .maker-group, .creator-stops + .creator-toggles { margin-top: .9rem; }

/* The lab's real-portrait mode: never mistaken for the free sample mode. */
.lab-real-badge { background: rgba(255, 48, 72, .14); border: 2px solid #ff3048; border-radius: 10px; color: #ffd9de; font-family: 'VT323', monospace; font-size: 1.1rem; line-height: 1.2; margin: .4rem 0; padding: .45rem .7rem; }
.lab-real-badge b { color: #ff5a6e; display: block; font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .12em; }

/* A revision: the new picture big, the look it came from smaller beside it. */
.maker-candidates.is-revision { grid-template-columns: 2fr 1fr; align-items: start; }
.maker-candidate.is-before .polaroid { opacity: .85; }
.creator-revise { display: grid; gap: .5rem; }

/* "Same as hair": the facial-hair swatch that follows the head hair. */
.maker-swatch.hair-match i { background: repeating-linear-gradient(135deg, #3a2a1c 0 5px, #6b4a2c 5px 10px); }
.creator-facial-color { margin-top: .9rem; }
.creator-facial-color[hidden] { display: none; }

/* The Store lives under Inventory now (the bottom bar's ball is INVENTORY): a clear way in from the Bag. */
.bag-head-side { align-items: center; display: flex; gap: .6rem; }
.bag-store { align-items: center; border: 1.5px solid var(--arcade-cyan); border-radius: 999px; color: #b8f3ff; display: inline-flex; font-family: 'Silkscreen', monospace; font-size: .6rem; gap: .3rem; letter-spacing: .1em; min-height: 40px; padding: 0 .9rem; text-decoration: none; }
.arcade-ball-label.is-long { font-size: .46rem; letter-spacing: 0; }

/* ---------- Home (Jesse's signed-off design, 2026-10-08) ----------
   Portrait clear and full width; name with the bell and tab icons; stats; five labeled buttons;
   folder tabs on a purple sheet. Amber is for numbers and highlights only. */
.hm { margin: 0 auto; max-width: 30rem; overflow: hidden; padding: 0; background: none; border: 0; box-shadow: none; color: var(--arcade-cream); }
@media (max-width: 31.5rem) { .hm { margin: 0 -.75rem; } }
.hm-lbl { font-family: 'Silkscreen', monospace; letter-spacing: .12em; }
.hm-portrait { height: min(95vw, 370px); overflow: hidden; position: relative; }
.hm-portrait.arcade-portrait-stage::after { display: none; }
.hm-portrait .dashboard-portrait-link { display: block; height: 100%; }
.hm-portrait .dashboard-portrait, .hm-portrait .character-empty-art { border: 0; border-radius: 0; display: block; height: 100%; margin: 0; max-width: none; object-fit: cover; object-position: 50% 30%; width: 100%; }
.hm-name { align-items: center; display: flex; gap: 8px; padding: 8px 14px 0; }
.hm-identity { flex: 1; min-width: 0; }
.loyalty-main .hm-identity h1.hm-neon { color: #ffe3f0; font-family: 'Yellowtail', cursive; font-size: 42px; font-weight: 400; letter-spacing: 0; line-height: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px #ff4f9a, 0 0 18px #ff2f7a; text-transform: none; white-space: nowrap; }
.hm-identity p { color: #8fdcf0; font-size: 9px; margin: 2px 0 0; overflow-wrap: anywhere; text-transform: uppercase; }
.hm-identity .hm-handle-line { color: var(--arcade-cyan); }
.hm-identity .character-archetype { background: none; border: 0; color: inherit; font: inherit; padding: 0; }
.hm-round { align-items: center; border: 1.5px solid #2a3a66; border-radius: 50%; color: #b8f3ff; display: grid; flex: none; height: 44px; place-items: center; position: relative; text-decoration: none; width: 44px; }
.loyalty-site a.hm-round { color: #b8f3ff; }
.hm-round svg { height: 22px; width: 22px; }
.hm-badge { background: #ff3048; border-radius: 9px; color: #fff; font-family: 'VT323', monospace; font-size: 15px; font-weight: 400; line-height: 18px; min-width: 18px; padding: 0 4px; position: absolute; right: -5px; text-align: center; top: -5px; }
.hm-badge.is-tab { background: var(--arcade-amber); color: #1a1306; padding: 0 5px; right: -12px; }
.hm-stats { border-bottom: 1px solid #1d2742; border-top: 1px solid #1d2742; display: grid; gap: 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 14px 0; padding: 6px 0; }
.hm-stats > div { min-width: 0; text-align: center; }
.hm-stats b { color: var(--arcade-amber); display: block; font-size: 24px; font-weight: 400; line-height: 1; }
.hm-stats .hm-lbl { color: var(--arcade-muted); font-size: 7px; }
.hm-buttons { display: grid; gap: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 14px 0; }
.hm-buttons a { align-items: center; background: #0e1630; border: 1.5px solid #26314d; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 52px; min-width: 0; text-decoration: none; }
.loyalty-site .hm-buttons a { color: #b8f3ff; }
.hm-buttons a:hover, .hm-buttons a:focus-visible { border-color: var(--arcade-cyan); }
.hm-buttons svg { height: 20px; width: 20px; }
.hm-buttons .hm-lbl { font-size: 7px; }
.hm-tabs { align-items: flex-end; display: flex; gap: 2px; margin-top: 16px; padding: 0 10px; scroll-margin-top: 8px; }
.hm-tabs [role="tab"] { align-items: center; background: transparent; border: 1.5px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; margin-bottom: -1.5px; min-height: 54px; min-width: 0; padding: 8px 4px 9px; position: relative; text-decoration: none; }
.loyalty-site .hm-tabs [role="tab"] { color: #8fa6cf; }
.loyalty-site .hm-tabs [role="tab"][aria-selected="true"] { background: #151239; border-color: #7b5cff; color: #fff; }
.hm-tabs [role="tab"][aria-selected="true"]::after { background: #ff4fd8; border-radius: 2px; bottom: 4px; box-shadow: 0 0 6px #ff4fd8; content: ''; height: 3px; left: 50%; margin-left: -9px; position: absolute; width: 18px; }
.hm-tabs svg { height: 16px; width: 16px; }
.hm-tabs .hm-lbl { align-items: center; display: inline-flex; font-size: 8px; gap: 3px; white-space: nowrap; }
.hm-count { background: #ff4fd8; border-radius: 8px; color: #1a0420; font-family: 'VT323', monospace; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 15px; min-width: 15px; padding: 0 3px; text-align: center; }
.hm-sheet { background: #151239; border-top: 1.5px solid #7b5cff; min-height: 14rem; padding-bottom: 14px; }
.hm-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 0; }
.hm-panel[hidden] { display: none; }
.hm-row { display: flex; gap: 10px; justify-content: space-between; }
.hm-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.hm-tab-open { color: #7dff6b; font-family: 'Silkscreen', monospace; font-size: 8px; letter-spacing: .12em; margin: 0; }
.hm-card { background: #1d1950; border: 1px solid #3a3380; border-radius: 12px; padding: 10px 12px; }
.hm-kitchen .hm-lbl { color: var(--arcade-muted); font-size: 8px; }
.hm-kitchen-what { font-size: 18px; text-align: right; }
.hm-steps { display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.hm-steps span { background: #2a1d0a; border-radius: 3px; height: 6px; }
.hm-steps span.is-on { background: var(--arcade-amber); }
.hm-step-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3px; }
.hm-kitchen .hm-step-labels { font-size: 7px; }
.hm-step-labels span:nth-child(2) { text-align: center; }
.hm-step-labels span:nth-child(3) { text-align: right; }
.hm-kitchen .hm-step-labels .is-now { color: var(--arcade-amber); }
.hm-lines { display: flex; flex-direction: column; font-size: 20px; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* MY TAB: drinks, then food by kitchen ticket (Jesse, 2026-10-11) */
.hm-sec { color: #8fa6cf; font-size: 8px; letter-spacing: .14em; margin: 4px 0 -4px; }
.hm-ticket-lines { border-top: 1px dashed #3a3380; margin-top: 8px; padding-top: 6px; }
.hm-kitchen.is-held { border-style: dashed; border-color: #6b5320; }
.hm-kitchen.is-held .hm-lbl:last-child { color: var(--arcade-amber); }
.hm-kitchen.is-done { opacity: .7; }
.hm-deal { color: #7dff6b; }
.hm-deal small { color: #c9a54a; font-size: 7px; }
.hm-sum { color: #b9c4d6; }
.hm-sum.is-first { border-top: 1px dashed #34536b; padding-top: 4px; }
.hm-sum small { color: var(--arcade-muted); font-size: 7px; }
.hm-total { align-items: center; background: #0c0a26; border: 1.5px solid var(--arcade-cyan); border-radius: 12px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
.hm-total > .hm-lbl { color: #fff; font-size: 10px; }
.hm-total b { color: var(--arcade-amber); font-size: 38px; font-weight: 400; line-height: 1; }
.hm-total.is-empty { background: #0d0f14; border-color: #34404f; }
.hm-total.is-empty .hm-lbl { color: var(--arcade-muted); display: block; font-size: 8px; overflow-wrap: anywhere; }
.hm-total.is-empty .hm-handle { color: #c9a54a; margin-top: 4px; }
.hm-total.is-empty b { color: #6b7686; }
.hm-foot { align-items: center; }
.hm-foot > span.hm-lbl { color: var(--arcade-muted); font-size: 7px; text-align: right; }
.hm-pill { align-items: center; border: 1.5px solid var(--arcade-cyan); border-radius: 999px; display: inline-flex; font-size: 9px; min-height: 44px; padding: 0 14px; text-decoration: none; }
.hm-explain { color: #b9c4d6; font-size: 19px; line-height: 1.2; margin: 0; }
.hm-news { gap: 0; padding-top: 4px; }
.hm-news .arcade-challenger { margin: 8px 0; }
.hm-news-line { border-bottom: 1px solid #2e2a66; display: grid; gap: 2px 10px; grid-template-columns: 10px minmax(0, 1fr) auto; padding: 10px 0; }
.hm-news-line > b { color: #b9c4d6; font-size: 21px; font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }
.hm-news-line.is-unread > b { color: var(--arcade-cream); }
.hm-dot { border-radius: 50%; height: 8px; margin-top: 8px; width: 8px; }
.hm-news-line.is-unread .hm-dot { background: #ff3048; }
.hm-time { color: var(--arcade-muted); font-size: 8px; padding-top: 4px; white-space: nowrap; }
.hm-news-body { color: var(--arcade-muted); font-size: 18px; grid-column: 2 / -1; line-height: 1.15; overflow-wrap: anywhere; }
.hm-news-line.is-unread .hm-news-body { color: #b9c4d6; }
.hm-news .hm-explain { padding: 10px 0; }
.hm-more { align-self: center; font-size: 9px; padding: 12px 10px; text-decoration: none; }
.hm-goals { align-items: stretch; gap: 10px; }
.hm-goal { align-items: center; display: grid; gap: 4px 10px; grid-template-columns: minmax(0, 1fr) auto; }
.hm-goal > span:first-child { font-size: 19px; overflow-wrap: anywhere; }
.hm-goal-count { color: var(--arcade-muted); font-size: 19px; }
.hm-bar { background: #2a1d0a; border-radius: 4px; display: block; grid-column: 1 / -1; height: 8px; overflow: hidden; }
.hm-bar > span { background: var(--arcade-amber); border-radius: 4px; display: block; height: 8px; }
.hm-victims { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-victims a { display: block; min-width: 0; }
.hm-victims img { aspect-ratio: 1; border: 2px solid var(--arcade-cyan); border-radius: 10px; display: block; object-fit: cover; width: 100%; }
.hm-victim-empty { align-items: center; aspect-ratio: 1; border: 2px dashed #34536b; border-radius: 10px; box-sizing: border-box; display: grid; font-size: 7px; padding: 6px; place-items: center; text-align: center; text-decoration: none; }
.loyalty-site a.hm-victim-empty { color: var(--arcade-muted); }
.hm-hall .hm-more { align-self: stretch; text-align: center; }

/* ---------- The Cashier: pulled up above the bottom bar by CREDITS ---------- */
a.arcade-credits { text-decoration: none; }
.arcade-ball-album { background: radial-gradient(circle at 50% 42%, #7a46c4 0%, #5b2c9a 55%, #2e1352 100%); color: #b48cff; }
html.cashier-open, html.cashier-open body { overflow: hidden; }
.cashier-layer { bottom: 84px; left: 0; position: fixed; right: 0; top: 0; z-index: 19; }
.cashier-dim { background: rgba(4, 6, 16, .74); inset: 0; position: absolute; }
.cashier { background: #151239; border-radius: 22px 22px 0 0; border-top: 2px solid #7b5cff; bottom: 0; box-shadow: 0 -12px 40px rgba(123,92,255,.35); box-sizing: border-box; color: var(--arcade-cream); display: flex; flex-direction: column; font-family: 'VT323', monospace; gap: 12px; left: 0; margin: 0 auto; max-height: calc(100% - 16px); max-width: 30rem; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 0; position: absolute; right: 0; }
.cashier.is-page { border-radius: 22px; margin: 12px auto 0; max-height: none; overflow: visible; position: relative; }
.cashier-grip { align-self: center; background: #4a4290; border-radius: 3px; flex: none; height: 5px; width: 44px; }
.cashier-head { align-items: center; display: flex; justify-content: space-between; }
.loyalty-site .cashier h2.cashier-neon, .cashier h2.cashier-neon { color: #ffe3f0; font-family: 'Yellowtail', cursive; font-size: 40px; font-weight: 400; letter-spacing: 0; line-height: 1.1; margin: 0; text-shadow: 0 0 6px #ff4f9a, 0 0 18px #ff2f7a; text-transform: none; }
.cashier-close { align-items: center; border: 1.5px solid #4a4290; border-radius: 50%; display: grid; font-size: 26px; height: 44px; place-items: center; text-decoration: none; width: 44px; }
.loyalty-site a.cashier-close { color: #c9c3ff; }
.cashier-balance { align-items: baseline; background: #0c0a26; border: 1.5px solid #ff4fd8; border-radius: 14px; display: flex; flex: none; gap: 10px; justify-content: space-between; padding: 10px 14px; }
.cashier-balance .hm-lbl { color: #ffb3ef; font-size: 9px; }
.cashier-balance b { color: #fff; font-size: 44px; font-weight: 400; line-height: 1; overflow-wrap: anywhere; text-shadow: 0 0 10px rgba(255,79,216,.5); }
.cashier-buy { display: flex; flex: none; flex-direction: column; gap: 8px; }
.cashier-buy > summary { align-items: center; background: #ff4fd8; border-radius: 14px; box-shadow: 0 0 14px rgba(255,79,216,.45); color: #1a0420; cursor: pointer; display: flex; font-size: 12px; justify-content: center; list-style: none; min-height: 56px; }
.cashier-buy > summary::-webkit-details-marker, .cashier-opt > summary::-webkit-details-marker { display: none; }
.cashier-buy > summary:focus-visible, .cashier-opt > summary:focus-visible { outline: 2px solid var(--arcade-cream); outline-offset: 3px; }
.cashier-buy[open] > summary { margin-bottom: 8px; }
.cashier-ways { display: flex; flex-direction: column; gap: 8px; }
.cashier-opt { background: #221d5c; border: 1.5px solid #7b5cff; border-radius: 14px; color: #fff; }
.cashier-opt > summary, .cashier-opt.is-locked { align-items: center; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px 10px; grid-template-columns: minmax(0, 1fr) auto; list-style: none; min-height: 58px; padding: 8px 14px; }
.cashier-opt .hm-lbl { font-size: 10px; }
.cashier-opt-copy { color: #c9c3ff; font-size: 17px; grid-column: 1 / -1; }
.cashier-chev { color: var(--arcade-cyan); font-size: 24px; line-height: 1; }
.cashier-opt[open] .cashier-chev { transform: rotate(90deg); }
.cashier-bonus { background: #7dff6b; border-radius: 8px; color: #062006; font-size: 8px; font-weight: 400; margin-left: 4px; padding: 1px 6px; }
.cashier-soon { border-top: 1px dashed #4a4290; color: #ffb3ef; font-size: 17px; margin: 0 14px; padding: 8px 0 10px; }
.cashier-opt.is-locked { background: #17142f; border: 1.5px dashed #3a3370; color: #6e6a99; cursor: not-allowed; }
.cashier-opt.is-locked svg { height: 18px; width: 18px; }
.cashier-opt.is-locked .cashier-opt-copy { color: #6e6a99; }
.cashier-store { align-items: center; background: #0c0a26; border: 1.5px solid #4a4290; border-radius: 14px; display: grid; flex: none; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 52px; padding: 0 14px; text-decoration: none; }
.loyalty-site a.cashier-store { color: var(--arcade-cream); }
.cashier-store svg { color: #c9c3ff; height: 22px; width: 22px; }
.cashier-store .hm-lbl { color: #fff; font-size: 9px; }
.cashier-history-head { align-items: baseline; display: flex; justify-content: space-between; margin-top: 2px; }
.cashier-history-head h3 { color: #c9c3ff; font-size: 10px; margin: 0; }
.cashier-history-head a { font-size: 8px; min-height: 0; padding: 6px 0; text-decoration: none; }
.cashier-history { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.cashier-history li { border-bottom: 1px solid #2e2a66; display: grid; gap: 0 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 7px 0; }
.cashier-history li > span:first-child { font-size: 20px; overflow-wrap: anywhere; }
.cashier-history b { font-size: 20px; font-weight: 400; }
.cashier-history b.is-plus { color: #7dff6b; }
.cashier-history b.is-minus { color: #ff8aa0; }
.cashier-history .hm-lbl { color: #8b84c9; font-size: 7px; }
.cashier-history li.is-empty span { color: #8b84c9; font-size: 18px; }
.cashier-tab { align-items: center; background: #0c0a26; border-top: 1.5px solid var(--arcade-cyan); bottom: 0; display: grid; flex: none; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto auto; margin: 4px -16px 0; min-height: 60px; padding: 0 30px; position: sticky; text-decoration: none; }
.cashier.is-page .cashier-tab { border-radius: 0 0 22px 22px; bottom: 84px; }
.loyalty-site a.cashier-tab { color: var(--arcade-cream); }
.cashier-tab svg { color: var(--arcade-cyan); height: 22px; width: 22px; }
.cashier-tab .hm-lbl { color: #fff; display: block; font-size: 9px; }
.cashier-tab .cashier-tab-state { color: #7dff6b; font-size: 7px; margin-top: 2px; }
.cashier-tab b { color: var(--arcade-amber); font-size: 28px; font-weight: 400; }
.cashier-tab.is-closed { border-top-color: #34404f; }
.cashier-tab.is-closed .cashier-tab-state { color: var(--arcade-muted); }
.cashier-tab.is-closed b { color: #6b7686; }
@media (prefers-reduced-motion: no-preference) { .cashier-layer .cashier { animation: cashier-up .22s ease-out; } }
@keyframes cashier-up { from { transform: translateY(40px); opacity: 0; } }
.loyalty-main .hm-identity h1.hm-neon { background: none; border: 0; box-shadow: none; padding: 0; }
.hm-identity p .character-archetype { color: inherit; display: inline; font-size: inherit; margin: 0; }
.loyalty-site .cashier .cashier-history-head h3 { color: #c9c3ff; font-family: 'Silkscreen', monospace; font-size: 10px; font-weight: 400; letter-spacing: .12em; margin: 0; text-transform: none; }

/* ---------- The Bag, 2026-10-08 (Jesse): STORE is an icon; EQUIPPED slots and game gear pop out ---------- */
.bag-store-icon { align-items: center; border: 1.5px solid var(--arcade-cyan); border-radius: 50%; box-shadow: 0 0 8px rgba(83,224,255,.4); display: flex; flex: none; height: 48px; justify-content: center; margin-left: auto; width: 48px; }
.loyalty-site a.bag-store-icon { color: #b8f3ff; }
.bag-store-icon svg { height: 24px; width: 24px; }
.bag-store-icon:hover, .bag-store-icon:focus-visible { background: rgba(83,224,255,.12); }
.bag-loadout-note { color: #7fd8ec; font-family: 'Silkscreen', monospace; font-size: .45rem; letter-spacing: .1em; margin: .55rem .7rem 0; opacity: .8; }
.bag-pick { border: 0; border-radius: 6px; }
.bag-pick > summary { cursor: pointer; list-style: none; }
.bag-pick > summary::-webkit-details-marker { display: none; }
.bag-pick > summary:focus-visible { outline: 2px solid var(--arcade-cream); outline-offset: 2px; }
.bag-pick > summary.bag-gear-slot:not(.is-filled) { color: #56708a; }
.bag-kits-title { color: #b8f3ff; font-family: 'Silkscreen', monospace; font-size: .6rem; letter-spacing: .18em; margin: .2rem .7rem .4rem; text-shadow: 0 0 6px var(--arcade-cyan); }
.bag-kits { display: grid; gap: .45rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 .65rem .75rem; }
.bag-kit { align-items: center; background: radial-gradient(circle at 50% 40%, #121a2e, #070b16 75%); border: 1.5px solid #2a3552; border-radius: 10px; box-sizing: border-box; color: #7fd8ec; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 64px; position: relative; }
.bag-kit svg { height: 26px; width: 26px; }
.bag-kit .bag-gear-label { background: none; position: static; }
.bag-kit-badge { background: var(--arcade-amber); border-radius: 8px; color: #1a1306; font-family: 'VT323', monospace; font-size: 15px; font-weight: 400; line-height: 16px; padding: 0 5px; position: absolute; right: 5px; top: 5px; }
.bag-pick[open] > summary.bag-kit, .bag-pick[open] > summary.bag-gear-slot { border-color: var(--arcade-cyan); }
.bag-pick-form { margin: 0; min-width: 0; }
.loyalty-site .loyalty-main button.bag-pick-item, .bag-pick-item { background: none; border: 0; box-shadow: none; color: inherit; cursor: pointer; display: flex; flex-direction: column; font: inherit; gap: 4px; margin: 0; min-height: 0; padding: 0; position: relative; text-align: center; width: 100%; }
.bag-pick-item .booth-gear-tile img { height: 100%; object-fit: cover; width: 100%; }
.bag-pick-item:has(img) .booth-gear-tile { padding: 0; }
.bag-pick-item.is-on .booth-gear-tile { border-color: var(--arcade-amber); box-shadow: 0 0 10px rgba(255,191,63,.7); }
.bag-pick-item.is-on .booth-gear-name { color: var(--arcade-amber); }
.bag-pick-item:focus-visible .booth-gear-tile { outline: 2px solid var(--arcade-cream); outline-offset: 2px; }
.bag-pick-on { align-self: center; background: #1c2a48; border-radius: 8px; color: #8fdcf0; font-family: 'Silkscreen', monospace; font-size: .45rem; font-weight: 400; letter-spacing: .08em; padding: 2px 6px; }
.bag-pick-item.is-on .bag-pick-on { background: var(--arcade-amber); color: #1a1306; }
.bag-kit-empty { font-size: 20px; line-height: 1.2; padding: 6px 2px 10px; }
.bag-pick-form, .bag-pick-item { min-width: 0; overflow: hidden; }
.bag-pick-item .booth-gear-name { max-width: 100%; }
.bag-gear .bag-gear-label { font-size: .8rem; letter-spacing: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.loyalty-site .loyalty-main button.bag-pick-item { border-radius: 0; text-transform: none; letter-spacing: 0; }
.bag-pick-item .booth-gear-name { display: block; width: 100%; }
/* EQUIPPED: the portrait is the first tile of a 3-across grid with the five slots. */
.bag-loadout .bag-loadout-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bag-loadout .bag-loadout-body > .bag-gear { display: contents; }
.bag-loadout .bag-portrait { aspect-ratio: 1; position: relative; }
.bag-loadout .bag-portrait img, .bag-loadout .bag-portrait > span:first-child { height: 100%; }
.bag-loadout .bag-portrait-name { bottom: 0; font-size: .8rem; left: 0; position: absolute; right: 0; }
.bag-loadout .bag-gear .bag-gear-label { font-size: .85rem; }

/* ---------- Progress (refreshed 2026-10-08) ---------- */
.pg { box-sizing: border-box; color: var(--arcade-cream); margin: 0 auto; max-width: 30rem; padding: .3rem .1rem 1rem; }
.loyalty-main h1.pg-title { font-size: clamp(2.6rem, 12vw, 3.2rem); line-height: 1.05; margin: 0 0 .5rem; }
.pg-section { margin-top: 1.1rem; }
.loyalty-main .pg .pg-label { color: #b8f3ff; font-family: 'Silkscreen', monospace; font-size: .62rem; font-weight: 400; letter-spacing: .18em; margin: 0 0 .5rem; text-shadow: 0 0 6px rgba(83,224,255,.6); text-transform: uppercase; }
.pg-label small { color: #56708a; font-size: .45rem; letter-spacing: .1em; margin-left: .4rem; text-shadow: none; }
.pg-empty { color: #56708a; font-family: 'VT323', monospace; font-size: 1.2rem; margin: 0; }
.pg-goals { display: grid; gap: 8px; }
.pg-goal { align-items: center; background: linear-gradient(180deg, #0b1122, #080c18); border: 1.5px solid color-mix(in srgb, var(--rarity-color, #53e0ff) 45%, #1c2640); border-radius: 12px; box-sizing: border-box; display: grid; gap: 12px; grid-template-columns: 52px minmax(0, 1fr); padding: 9px 12px 9px 9px; }
.pg-art, .pg-tile-art { align-items: center; background: #0e1630; border-radius: 10px; display: flex; justify-content: center; overflow: hidden; position: relative; }
.pg-art { height: 52px; width: 52px; }
.pg-art img, .pg-tile-art img { border: 0; border-radius: 0; height: 100%; margin: 0; max-width: none; object-fit: cover; width: 100%; }
.pg-art i, .pg-tile-art i { color: var(--arcade-amber); font-size: 1.6rem; font-style: normal; text-shadow: 0 0 8px rgba(255,191,63,.7); }
.pg-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pg-copy .progress-card-heading strong { color: #fff4d6; display: block; font-family: 'VT323', monospace; font-size: 1.25rem; font-weight: 400; line-height: 1; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pg-sr { clip: rect(0 0 0 0); height: 1px; margin: 0; overflow: hidden; position: absolute; width: 1px; }
.pg-bar-row { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.pg-bar { background: #2a1d0a; border-radius: 5px; display: block; height: 10px; overflow: hidden; }
.pg-bar > span { background: linear-gradient(90deg, #ffbf3f, #ffd97a); border-radius: 5px; box-shadow: 0 0 8px rgba(255,191,63,.7); display: block; height: 100%; min-width: 0; }
.pg-bar-row b { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1.15rem; font-weight: 400; line-height: 1; min-width: 2.6rem; text-align: right; }
.pg-earned { color: #56708a; font-family: 'Silkscreen', monospace; font-size: .45rem; letter-spacing: .1em; margin: 0; }
.pg-every { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.pg-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-tile-art { aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--rarity-color, #53e0ff) 55%, #1c2640); box-shadow: 0 0 8px color-mix(in srgb, var(--rarity-color, #53e0ff) 25%, transparent); box-sizing: border-box; }
.pg-tile-count { background: rgba(3,5,10,.85); border-radius: 8px; bottom: 4px; color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.05rem; font-weight: 400; line-height: 1; padding: 1px 5px; position: absolute; right: 4px; }
.pg-tile-name strong { color: #c9d6e8; display: block; font-family: 'VT323', monospace; font-size: .95rem; font-weight: 400; line-height: 1.05; overflow: hidden; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pg-awards { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.pg-awards li { align-items: baseline; border-bottom: 1px dashed rgba(83,224,255,.15); display: flex; font-family: 'VT323', monospace; gap: 10px; justify-content: space-between; min-height: 2.2rem; padding: .25rem 0; }
.pg-awards strong { color: #fff4d6; font-size: 1.2rem; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pg-awards span { color: var(--arcade-amber); flex: none; font-size: 1.1rem; }
.pg .progress-panel-actions { margin: 1.1rem 0 0; text-align: center; }
.pg .pg-stats { min-height: 44px; padding: 0 1.4rem; }
.pg-nights .nights-at-house { margin: 0; }
.pg-tile-art { width: 100%; }
.pg-nights .night-mark-dot { height: 20px; width: 20px; }
.pg .pg-art img.progress-card-artwork, .pg .pg-tile-art img.progress-card-artwork { aspect-ratio: auto; flex: none; height: 100%; max-height: none; max-width: none; min-height: 0; width: 100%; }
/* Progress gets the arcade screen's scanlines, like the Inbox (2026-10-08). */
.pg { position: relative; }
.pg-scanlines { inset: 0; position: absolute; z-index: 2; }
/* Item pictures always open their item: the Codex page for a reward (2026-10-08). */
a.pg-art { text-decoration: none; }
a.pg-art:focus-visible, .pg-tile-link:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }
.pg-tile-link { color: inherit; display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; }
/* Home's stats bar opens Full Stats (2026-10-08). */
a.hm-stats { color: inherit; text-decoration: none; }
a.hm-stats:hover, a.hm-stats:focus-visible { background: rgba(83,224,255,.06); }
a.hm-stats:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }

/* Hall of Winners plaque (Jesse, 2026-10-08): blue, white and purple instead of brown and amber,
   a thin purple border, and the cabinet's neon 8-ball, which spins during a BREAK SHOT run. */
.loyalty-main .top-shelf-hall { background: linear-gradient(180deg, #161046, #0b0a26); border: 1.5px solid #b36bff; box-shadow: 0 0 12px rgba(179,107,255,.4), inset 0 0 14px rgba(83,224,255,.08); }
.top-shelf-hall-copy b { color: #f4f0ff; text-shadow: 0 0 6px #b36bff, 0 0 16px #6f4cff; }
.top-shelf-hall-copy small { color: #b8f3ff; }
.top-shelf-hall-go { color: #53e0ff; text-shadow: 0 0 6px rgba(83,224,255,.7); }
.top-shelf-hall-ball { filter: drop-shadow(0 0 6px rgba(179,107,255,.8)); flex: none; height: 40px; margin-right: 2px; width: 40px; }
.top-shelf.is-run .top-shelf-hall-ball { animation: ts-hall-ball 1.1s linear infinite; filter: drop-shadow(0 0 8px #c38bff) drop-shadow(0 0 16px rgba(83,224,255,.7)); }
@keyframes ts-hall-ball { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .top-shelf.is-run .top-shelf-hall-ball { animation: none; } }

/* Top Shelf: the message display and TOTAL wear purple, like the Hall plaque (Jesse, 2026-10-08). */
.top-shelf-lcd { box-shadow: inset 0 0 0 1.5px rgba(179,107,255,.7), 0 0 8px rgba(179,107,255,.25); }
.top-shelf-total { box-shadow: inset 0 0 0 1.5px rgba(179,107,255,.7), 0 0 8px rgba(179,107,255,.25); }
.top-shelf-message { color: #9f8ad6; }
.top-shelf-total small, .top-shelf-win > small { color: #b89cff; }

/* Games tab cabinet borders (Jesse, 2026-10-08): no amber. Top Shelf purple, Hot Dice hot pink,
   Farkle neon green. */
.arcade-games-lobby .arcade-cabinet-slot { border-color: #b36bff; box-shadow: 0 0 14px rgba(179,107,255,.4), inset 0 0 14px rgba(179,107,255,.08); }
.arcade-games-lobby .arcade-cabinet-dice { border-color: #ff4fd8; box-shadow: 0 0 12px rgba(255,79,216,.35), inset 0 0 12px rgba(255,79,216,.08); }
.arcade-games-lobby .arcade-cabinet-farkle { border-color: #5dff8a; box-shadow: 0 0 12px rgba(93,255,138,.32), inset 0 0 12px rgba(93,255,138,.07); }

/* ---------- Player pick (the item card's GIFT; Jesse, 2026-10-08): search as you type by name or
   @username, results with portraits, the pick as a chip, SEND GIFT. ---------- */
.player-pick { position: relative; }
.player-pick-head { align-items: center; display: flex; gap: .6rem; justify-content: space-between; }
.arcade-gift .player-pick-label { color: #b8f3ff; font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .16em; }
.player-pick-switch { background: #03060c; border: 1.5px solid rgba(83,224,255,.45); border-radius: 999px; display: inline-flex; padding: 2px; }
.player-pick-switch label { cursor: pointer; margin: 0; position: relative; }
.player-pick-switch input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.arcade-gift .player-pick-switch span { border-radius: 999px; color: #7fd8ec; display: block; font-family: 'Silkscreen', monospace; font-size: .55rem; letter-spacing: .1em; min-height: 32px; line-height: 32px; padding: 0 12px; transition: background .15s, color .15s; }
.player-pick-switch input:checked + span { background: var(--arcade-cyan); box-shadow: 0 0 10px rgba(83,224,255,.6); color: #04202a; }
.player-pick-switch input:focus-visible + span { outline: 2px solid var(--arcade-cream); outline-offset: 2px; }
.player-pick-field { display: flex; }
.arcade-gift .player-pick-field input[type=text] { flex: 1; font-size: 1.35rem; min-height: 48px; }
.player-pick-results { background: #0b1122; border: 1.5px solid rgba(83,224,255,.5); border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.6), 0 0 12px rgba(83,224,255,.2); list-style: none; margin: 0; max-height: 18rem; overflow-y: auto; padding: 4px; }
.player-pick-results[hidden], .player-pick-chip[hidden], .player-pick-none[hidden] { display: none; }
.player-pick-option, .player-pick-chip { align-items: center; border-radius: 10px; display: flex; gap: 10px; min-height: 52px; padding: 6px 8px; }
.player-pick-option { cursor: pointer; }
.player-pick-option:hover, .player-pick-option[aria-selected="true"] { background: rgba(83,224,255,.14); }
.player-pick-option img, .player-pick-chip img, .player-pick-blank { border: 1.5px solid rgba(83,224,255,.5); border-radius: 50%; flex: none; height: 40px; object-fit: cover; width: 40px; }
.player-pick-blank { align-items: center; background: #0e1630; color: #7fd8ec; display: flex; font-family: 'VT323', monospace; font-size: 1.3rem; justify-content: center; text-transform: uppercase; }
.player-pick-words { display: flex; flex: 1; flex-direction: column; line-height: 1.05; min-width: 0; }
.player-pick-words b { color: var(--arcade-cream); font-family: 'VT323', monospace; font-size: 1.3rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-pick-words small { color: var(--arcade-cyan); font-family: 'VT323', monospace; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-pick-chip { background: rgba(83,224,255,.1); border: 1.5px solid var(--arcade-cyan); box-shadow: 0 0 10px rgba(83,224,255,.3); flex: 1; }
.loyalty-site .loyalty-main button.player-pick-clear { background: transparent; border: 1.5px solid rgba(83,224,255,.5); border-radius: 50%; box-shadow: none; color: #b8f3ff; flex: none; font-size: 22px; height: 40px; line-height: 1; margin: 0; min-height: 40px; padding: 0; width: 40px; }
.player-pick-none { color: #56708a; font-family: 'VT323', monospace; font-size: 1.1rem; margin: 0; }
.loyalty-site .loyalty-main button.player-pick-send { border-radius: 999px; font-family: 'Silkscreen', monospace; font-size: .9rem; letter-spacing: .1em; margin-top: .3rem; min-height: 48px; width: 100%; }
.loyalty-site .loyalty-main button.player-pick-send:disabled { background: #2a1820; box-shadow: none; color: #8a6a72; cursor: not-allowed; opacity: .75; }
/* Home's neon name: room under the line for script descenders (the J of Jesse) so they aren't cut
   off or crowded by the subtitle; a little side room for swashes. */
.loyalty-main .hm-identity h1.hm-neon { line-height: 1.2; margin: 0 0 0 -.1em; padding: 0 .1em .1em; }
.hm-identity p { margin-top: 0; }
/* The name's box clips (for the … on long names), so it's padded out far enough to hold the neon
   glow, with matching negative margins so nothing moves (Jesse, 2026-10-08). */
.loyalty-main .hm-identity h1.hm-neon { margin: -20px -20px -16px -24px; padding: 20px 20px 22px 24px; }
.hm-identity { position: relative; z-index: 1; }
.loyalty-main .hm-identity h1.hm-neon { pointer-events: none; }

/* The Bag's doors (2026-10-09): SEND, TRADES, CODEX, STORE as icons with their names. */
.bag-doors { display: flex; gap: 4px; margin-left: auto; }
.bag-doors a { align-items: center; border-radius: 12px; display: flex; flex-direction: column; gap: 3px; min-height: 52px; min-width: 52px; justify-content: center; padding: 4px 2px; text-decoration: none; }
.loyalty-site .bag-doors a { color: #b8f3ff; }
.bag-doors svg { border: 1.5px solid var(--arcade-cyan); border-radius: 50%; box-shadow: 0 0 8px rgba(83,224,255,.35); box-sizing: border-box; height: 38px; padding: 8px; width: 38px; }
.bag-doors span { font-family: 'Silkscreen', monospace; font-size: .45rem; letter-spacing: .08em; }
.bag-doors a:hover svg, .bag-doors a:focus-visible svg { background: rgba(83,224,255,.12); }
.bag-head { align-items: center; flex-wrap: wrap; gap: .4rem; }
.trade-window.is-off { opacity: .45; }
.trade-tile-art svg { color: #ffbf3f; height: 60%; width: 60%; }
.trade-find { display: grid; gap: .5rem; }
.trade-recent { margin-top: 1rem !important; }

/* Notices (Jesse, 2026-10-09; src/web/notices.rs, app/javascript/notices.js): one card for every
   confirmation, error, reward and notification, above the bottom nav (notices.js lifts it over any
   fixed bar too), one at a time. The shelf lets taps through; only the card takes them. */
.arcade-notices { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; display: grid; gap: .5rem; left: 0; margin: 0 auto; max-width: 30rem; padding: 0 12px; pointer-events: none; position: fixed; right: 0; z-index: 45; }
.loyalty-site:not(:has(.arcade-bottom-nav)) .arcade-notices { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.arcade-notice { align-items: center; animation: notice-in .24s cubic-bezier(.2,1.3,.4,1); background: #080c18; border: 2px solid var(--arcade-amber); border-radius: 14px; box-shadow: 0 0 16px rgba(255,191,63,.4), 0 14px 30px rgba(0,0,0,.7); box-sizing: border-box; color: #fff4d6; display: grid; gap: .45rem .7rem; grid-template-columns: auto minmax(0,1fr); max-height: 50vh; overflow: auto; padding: .7rem .75rem .7rem .8rem; pointer-events: auto; }
.arcade-notice[hidden] { display: none; }
.arcade-notice.is-done { border-color: var(--arcade-cyan); box-shadow: 0 0 14px rgba(83,224,255,.35), 0 14px 30px rgba(0,0,0,.7); }
.arcade-notice.is-error { border-color: var(--arcade-red-bright); box-shadow: 0 0 16px rgba(255,48,72,.5), 0 14px 30px rgba(0,0,0,.7); }
.arcade-notice.is-reward { background: radial-gradient(90% 80% at 50% 0%, rgba(255,191,63,.18), transparent 70%), #080c18; }
.arcade-notice-text { grid-column: 2; min-width: 0; }
.arcade-notice:not(:has(.arcade-notice-media)) .arcade-notice-text { grid-column: 1 / -1; }
.arcade-notice-eyebrow { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .62rem; letter-spacing: .14em; margin: 0 0 .2rem; text-transform: uppercase; }
.is-done .arcade-notice-eyebrow { color: var(--arcade-cyan); }
.is-error .arcade-notice-eyebrow { color: #ff8a98; }
.arcade-notice-count { color: #8fa6cf; }
.loyalty-site .arcade-notice h2 { color: #fff4d6; font-family: 'VT323', monospace; font-size: 1.45rem; font-weight: 400; letter-spacing: 0; line-height: 1.05; margin: 0; overflow-wrap: anywhere; text-shadow: none; text-transform: uppercase; }
.arcade-notice-body { color: #c9d6e8; font-family: 'VT323', monospace; font-size: 1.2rem; line-height: 1.1; margin: .2rem 0 0; overflow-wrap: anywhere; }
.arcade-notice-media { align-self: start; display: flex; gap: .25rem; grid-column: 1; grid-row: 1; }
.arcade-notice-media img { aspect-ratio: 1; background: #111a2e; border: 1.5px solid #26314d; border-radius: 8px; display: block; object-fit: cover; width: 4.2rem; }
.arcade-notice-media.is-pair img { width: 3rem; }
.arcade-notice-media.is-polaroid img { background: #f3eee2; border: 0; border-radius: 2px; box-shadow: 0 4px 10px rgba(0,0,0,.6); padding: 3px 3px 9px; transform: rotate(-2deg); width: 4.8rem; }
a.arcade-notice-media { border-radius: 8px; }
a.arcade-notice-media:focus-visible, .arcade-notice-choice:focus-visible { outline: 2px solid var(--arcade-cream); outline-offset: 3px; }
.arcade-notice-actions { align-items: center; display: flex; gap: .5rem; grid-column: 1 / -1; justify-content: flex-end; }
.arcade-notice-actions form { display: contents; margin: 0; }
.loyalty-site .arcade-notice-choice { align-items: center; border: 1.5px solid var(--arcade-cyan); border-radius: 999px; color: var(--arcade-cyan); display: inline-flex; font-family: 'Silkscreen', monospace; font-size: .66rem; letter-spacing: .12em; min-height: 44px; padding: 0 1rem; text-decoration: none; }
.loyalty-site button.arcade-notice-okay { background: var(--arcade-red); border: 0; border-radius: 999px; box-shadow: 0 0 8px rgba(255,48,72,.7); color: #fff; cursor: pointer; font-family: 'Silkscreen', monospace; font-size: .74rem; letter-spacing: .12em; margin: 0; min-height: 44px; min-width: 6.5rem; padding: 0 1.2rem; text-shadow: 1px 1px 0 #6a0010; text-transform: none; width: auto; }
.loyalty-site button.arcade-notice-okay:focus-visible { outline: 2px solid var(--arcade-cream); outline-offset: 3px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .arcade-notice { animation: none; } }
.arcade-notice-blank { align-items: center; aspect-ratio: 1; background: #111a2e; border: 1.5px solid #26314d; border-radius: 8px; color: #56708a; display: flex; font-family: 'VT323', monospace; font-size: 2rem; justify-content: center; width: 4.2rem; }

/* Desktop and tablet, the high notes (Jesse, 2026-10-09): the app stays a phone-width column; the
   bottom nav and fixed bars match it instead of spanning the screen; game machines fit above the
   nav (fit.js). */
@media (min-width: 700px) {
  .arcade-bottom-nav { border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.65); left: 50%; overflow: hidden; right: auto; transform: translateX(-50%); width: 34rem; }
  .loyalty-site .trade-send { border-left: 2px solid var(--arcade-amber); border-radius: 14px 14px 0 0; border-right: 2px solid var(--arcade-amber); left: 50%; padding: .55rem 16px; right: auto; transform: translateX(-50%); width: 34rem; }
  .loyalty-site .bj { min-height: 0; }
  .hm-portrait { height: min(370px, 42vh); }
  body.loyalty-site { background-attachment: fixed; }
}
/* A form holding the type-ahead player field (components/player_pick.html): the field full width,
   its button under it. */
.loyalty-site .loyalty-main form:has(> [data-player-pick]) { align-items: stretch; display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr); }
.loyalty-site .loyalty-main form:has(> [data-player-pick]) > button[type=submit] { justify-self: end; min-height: 44px; width: auto; }
.loyalty-site button.player-pick-active { background: transparent; border: 1.5px solid var(--arcade-amber); border-radius: 999px; box-shadow: none; color: #ffcf5a; cursor: pointer; font-family: 'Silkscreen', monospace; font-size: .58rem; letter-spacing: .12em; margin: 0 0 0 auto; min-height: 36px; padding: 0 .8rem; width: auto; }
.player-pick-head:has(.player-pick-active) { gap: .5rem; }

/* Coin Flip's small cabinet sits between Hot Dice and Pool Duel (2026-10-11): three across. */
.arcade-cabinet-grid:has(.arcade-cabinet-coin) { grid-template-columns: repeat(3,minmax(0,1fr)); }
/* Beer Pong (2026-10-13) joins them next to Coin Flip: four small cabinets, two by two. */
.arcade-cabinet-grid:has(.arcade-cabinet-pong) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.arcade-games-lobby .arcade-cabinet-pong { border-color: #ff5a6e; box-shadow: 0 0 12px rgba(255,90,110,.35), inset 0 0 12px rgba(255,90,110,.08); }
.arcade-cabinet-pong h2 { color: #ffe6ea; text-shadow: 0 0 8px rgba(255,90,110,.9); }
.arcade-pong-icon { filter: drop-shadow(0 0 3px #ff5a6e) drop-shadow(0 0 8px rgba(255,191,63,.45)); flex: none; height: 3.5rem; width: 3.5rem; }
.arcade-games-lobby .arcade-cabinet-coin { border-color: var(--arcade-amber); box-shadow: 0 0 12px rgba(255,191,63,.35), inset 0 0 12px rgba(255,191,63,.08); }
.arcade-cabinet-coin h2 { color: #fff4d6; text-shadow: 0 0 8px rgba(255,191,63,.85); }
.arcade-coin-icon { filter: drop-shadow(0 0 3px #ffbf3f) drop-shadow(0 0 8px rgba(255,79,216,.55)); flex: none; height: 3.5rem; width: 3.5rem; }
@media (max-width: 26rem) {
  .arcade-cabinet-grid:has(.arcade-cabinet-coin) .arcade-small-cabinet-head { align-items: flex-start; flex-direction: column-reverse; gap: .2rem; }
  .arcade-cabinet-grid:has(.arcade-cabinet-coin) .arcade-small-cabinet-head h2 { font-size: 1.45rem; line-height: .95; }
  .arcade-cabinet-grid:has(.arcade-cabinet-coin) .arcade-small-cabinet-head :is(img, svg) { height: 2.9rem; width: 2.9rem; }
  .arcade-cabinet-grid:has(.arcade-cabinet-coin) .arcade-cabinet > span { font-size: .95rem; line-height: 1.05; }
}
/* Plinko (2026-10-13) joins them after Beer Pong: five small cabinets, two by two, and the last
   (Pool Duel) runs the full width. */
.arcade-cabinet-grid:has(.arcade-cabinet-plinko) > .arcade-cabinet:last-child { grid-column: 1 / -1; }
.arcade-games-lobby .arcade-cabinet-plinko { border-color: #53e0ff; box-shadow: 0 0 12px rgba(83,224,255,.35), inset 0 0 12px rgba(83,224,255,.08); }
.arcade-cabinet-plinko h2 { color: #e6fbff; text-shadow: 0 0 8px rgba(83,224,255,.9); }
.arcade-plinko-icon { filter: drop-shadow(0 0 3px #53e0ff) drop-shadow(0 0 8px rgba(255,63,191,.45)); flex: none; height: 3.5rem; width: 3.5rem; }


/* ---------- The Games page: every game is one full-width banner (Jesse, 2026-10-13) ----------
   Art on the left in a 4rem box, a neon title and one line, the button on the right; Top Shelf too,
   at the same height (its reels preview is gone; the jackpot is its line). Per-game colours stay in
   the rules above. */
.arcade-games-lobby .arcade-cabinet { align-items: center; border-radius: 10px; box-sizing: border-box; display: grid; gap: .65rem; grid-template-columns: 4rem minmax(0, 1fr) auto; min-height: 5.6rem; padding: .55rem .7rem; width: 100%; }
.arcade-games-lobby .arcade-cabinet > :first-child { align-items: center; display: flex; height: 4rem; justify-content: center; overflow: visible; position: relative; width: 4rem; }
.arcade-games-lobby .arcade-cabinet > img:first-child, .arcade-games-lobby .arcade-banner-art > :is(img, svg) { height: 3.6rem; width: 3.6rem; }
.arcade-games-lobby .arcade-banner-art img { filter: drop-shadow(0 0 3px #b36bff) drop-shadow(0 0 8px #b36bffaa); }
.arcade-games-lobby .arcade-cabinet-slot .arcade-banner-art img { filter: drop-shadow(0 0 3px #ff4a5e) drop-shadow(0 0 9px rgba(255,74,94,.8)); }
.arcade-games-lobby .arcade-cabinet > :nth-child(2) { min-width: 0; }
/* The title's neon glow spills past its box: clipping it (overflow: hidden, for an ellipsis) drew hard
   edges round the glow and cut the descenders (Jesse, 2026-10-15). Titles fit; smoke checks it. */
.arcade-games-lobby .arcade-cabinet h2 { font-family: 'Yellowtail', cursive; font-size: clamp(1.55rem, 7.4vw, 2.1rem); font-weight: 400; letter-spacing: 0; line-height: 1.08; margin: 0; overflow: visible; padding: 0 .12em .05em 0; text-transform: none; white-space: nowrap; }
.arcade-games-lobby .arcade-cabinet h2 + span { -webkit-box-orient: vertical; display: -webkit-box; font-family: 'VT323', monospace; font-size: clamp(.9rem, 3.9vw, 1.08rem); -webkit-line-clamp: 2; letter-spacing: .02em; line-height: 1.05; overflow: hidden; white-space: normal; }
.arcade-games-lobby .arcade-cabinet-slot h2 + span { display: block; }
.arcade-games-lobby .arcade-cabinet h2 + span strong { color: var(--arcade-cream); font-weight: 400; }
.arcade-games-lobby .arcade-cabinet > .arcade-pill-primary { flex: none; font-size: .72rem; letter-spacing: .1em; margin: 0; min-height: 44px; min-width: 4.6rem; padding: 0 .8rem; width: auto; }
.arcade-games-lobby .arcade-cabinet-slot h2 { color: #ffe6ea; text-shadow: 0 0 2px #ff9aa8, 0 0 8px var(--arcade-red-bright), 0 0 20px rgba(255,74,94,.7); }
.arcade-games-lobby .arcade-cabinet-slot .arcade-jackpot { display: inline-flex; font-size: 1.25rem; line-height: 1; padding: .12rem .35rem; }
.arcade-games-lobby .arcade-cabinet-slot .arcade-cabinet-status { display: block; font-size: .55rem; margin: .2rem 0 0; white-space: nowrap; }
.arcade-games-lobby .arcade-cabinet-dice h2 { color: #ffe6fa; text-shadow: 0 0 8px rgba(255,79,216,.85); }
.arcade-games-lobby .arcade-cabinet-dice h2 + span { color: #ffb3ee; }
.arcade-games-lobby .arcade-cabinet-coin h2 + span { color: #ffd99a; }
.arcade-games-lobby .arcade-cabinet-pong h2 + span { color: #ffb3bd; }
.arcade-games-lobby .arcade-cabinet-plinko h2 + span, .arcade-games-lobby .arcade-cabinet-pool h2 + span { color: #9ff0ff; }
.arcade-games-lobby .arcade-vp-cards { transform: scale(.84); transform-origin: left center; }
.arcade-games-lobby .arcade-farkle-dice { height: 3.8rem; width: 3.8rem; }

/* Games list trim by kind (Jesse, 2026-10-15): one neon per group, amber only as a small accent.
     credit games (Top Shelf, Blackjack, Video Poker, Plinko): green, Farkle's old trim
     dice (Hot Dice, Farkle): pink
     casual (Coin Flip, Beer Pong, Neon Nine): purple, the coin's edge and glow too
     head-to-head (Pool Duel, Knight Shift): blue */
.arcade-games-lobby :is(.arcade-cabinet-slot, .arcade-cabinet-blackjack, .arcade-cabinet-vp, .arcade-cabinet-plinko) { border-color: #5dff8a; box-shadow: 0 0 12px rgba(93,255,138,.32), inset 0 0 12px rgba(93,255,138,.07); }
.arcade-games-lobby :is(.arcade-cabinet-dice, .arcade-cabinet-farkle) { border-color: #ff4fd8; box-shadow: 0 0 12px rgba(255,79,216,.35), inset 0 0 12px rgba(255,79,216,.08); }
.arcade-games-lobby :is(.arcade-cabinet-dice, .arcade-cabinet-farkle) h2 { color: #ffe6fa; text-shadow: 0 0 3px #ff9ae8, 0 0 10px rgba(255,79,216,.85); }
.arcade-games-lobby .arcade-cabinet-farkle h2 + span { color: #ffb3ee; font-family: 'VT323', monospace; }
.arcade-games-lobby .arcade-farkle-dice { filter: drop-shadow(0 0 3px #ff4fd8) drop-shadow(0 0 6px rgba(255,79,216,.55)); }
.arcade-games-lobby :is(.arcade-cabinet-coin, .arcade-cabinet-pong, .arcade-cabinet-golf) { border-color: #b36bff; box-shadow: 0 0 12px rgba(179,107,255,.38), inset 0 0 12px rgba(179,107,255,.08); }
.arcade-games-lobby :is(.arcade-cabinet-coin, .arcade-cabinet-pong) h2 { color: #f3e8ff; text-shadow: 0 0 8px rgba(179,107,255,.9), 0 0 18px rgba(179,107,255,.5); }
.arcade-games-lobby :is(.arcade-cabinet-coin, .arcade-cabinet-pong) h2 + span { color: #d9c4ff; }
.arcade-games-lobby .arcade-coin-icon { filter: drop-shadow(0 0 3px #b36bff) drop-shadow(0 0 8px rgba(179,107,255,.6)); }
.arcade-games-lobby :is(.arcade-cabinet-pool, .arcade-cabinet-chess) { border-color: #53e0ff; box-shadow: 0 0 12px rgba(83,224,255,.35), inset 0 0 12px rgba(83,224,255,.08); }

/* INBOX in the bottom bar (Jesse, 2026-10-15): the old ALBUM ball's purple, an envelope, and the
   unread count on the ball's shoulder. */
/* The 15-ball: a maroon stripe on white. */
.arcade-ball-inbox { background: radial-gradient(circle at 42% 30%, rgba(255,255,255,.35), transparent 45%), linear-gradient(180deg, #e9e3d4 0 24%, #7d1d2c 24% 76%, #d9d2c2 76%); color: #d0566a; }
.arcade-felt-nav .notification-bell { position: relative; }
.arcade-felt-nav .notification-bell .notification-bell-badge { background: #ff2e6e; border: 1.5px solid #12091f; border-radius: 999px; box-shadow: 0 0 8px rgba(255,46,110,.8); color: #fff; font: 700 .7rem/1 system-ui, sans-serif; left: calc(50% + 9px); min-width: 1.15rem; padding: .17rem .32rem; position: absolute; right: auto; text-align: center; top: -5px; }

/* The whole banner opens its game (Jesse, 2026-10-15): the PLAY link is stretched over the banner,
   so a tap anywhere is a tap on PLAY (Video Poker's opens its chooser the same way). */
.arcade-games-lobby .arcade-cabinet { cursor: pointer; position: relative; }
.arcade-games-lobby .arcade-cabinet > .arcade-pill-primary { position: static; }
.arcade-games-lobby .arcade-cabinet > .arcade-pill-primary::after { border-radius: 10px; content: ''; inset: 0; position: absolute; z-index: 1; }
.arcade-games-lobby .arcade-cabinet:active { transform: scale(.99); }

/* Tablet and desktop, the phone frame (Jesse, 2026-10-15: "artificially limit the size to look like a
   mobile viewport ... the center of the screen ... keep the bottom nav in the right spot, not wider
   than the games ... max height without scrolling down"). On a player page (one with the bottom bar)
   the page is a 430px column in the middle of the screen, at least the screen's height; the page
   scrolls as usual. Everything pinned to the screen (the bottom bar, notice cards, the Cashier, the
   trade bar) is pinned and centered at the column's width, so it stays put while the page scrolls.
   (A first try made the column its own scroller: pinned things then scrolled away with it.) */
@media (min-width: 600px) {
  body.loyalty-site:has(.arcade-bottom-nav) { background: radial-gradient(1200px 700px at 50% 0%, #161127, #05060b 70%) fixed; }
  body.loyalty-site:has(.arcade-bottom-nav) > .loyalty-main {
    background: var(--arcade-bg); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 0 60px rgba(0,0,0,.75), 0 0 120px rgba(123,92,255,.12);
    box-sizing: border-box; margin: 0 auto; max-width: 100%; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; width: 430px;
  }
  body.loyalty-site:has(.arcade-bottom-nav) :is(.arcade-bottom-nav, .cashier, .trade-send) { border-radius: 0; left: 50%; max-width: 100%; right: auto; transform: translateX(-50%); width: 430px; }
  body.loyalty-site:has(.arcade-bottom-nav) .cashier { border-radius: 22px 22px 0 0; }
  body.loyalty-site:has(.arcade-bottom-nav) .arcade-notices { max-width: 430px; }
}

/* LEADING! (Jesse, 2026-10-15): on a banner whose daily board you lead today (leaders.rs). It sits on
   the banner's top edge, above the stretched PLAY link, and doesn't take taps. */
.arcade-games-lobby .arcade-leading { background: #5dff8a; border-radius: 999px; box-shadow: 0 0 10px rgba(93,255,138,.75); color: #04140a; font: 400 .55rem/1 'Silkscreen', monospace; letter-spacing: .12em; padding: .28rem .55rem .24rem; pointer-events: none; position: absolute; right: 14px; top: -9px; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .arcade-games-lobby .arcade-leading { animation: arcade-leading 1.6s ease-in-out infinite; } }
@keyframes arcade-leading { 50% { box-shadow: 0 0 18px rgba(93,255,138,1); } }

/* Top Shelf's banner line (Jesse, 2026-10-15): "JACKPOT 5123" in the same plain words as every other
   banner's line, not the black LCD box (the live number still updates in data-live-jackpot). */
.arcade-games-lobby .arcade-cabinet-slot .arcade-jackpot { align-items: baseline; background: none; border: 0; border-radius: 0; box-shadow: none; color: #ffb3bd; display: inline-flex; font: inherit; gap: .35em; padding: 0; text-shadow: none; }
.arcade-games-lobby .arcade-cabinet-slot .arcade-jackpot b, .arcade-games-lobby .arcade-cabinet-slot .arcade-jackpot [data-live-jackpot] { color: inherit; font: inherit; letter-spacing: inherit; text-shadow: none; }
.arcade-games-lobby .arcade-cabinet-slot .arcade-jackpot [data-live-jackpot] { color: var(--arcade-cream); }

/* MY TAB's Tax: one line that opens into each tax (Jesse, 2026-10-16). */
.hm-tax summary { cursor: pointer; list-style: none; }
.hm-tax summary::-webkit-details-marker { display: none; }
.hm-tax summary span:first-child::after { color: var(--arcade-muted); content: " ▸"; }
.hm-tax details[open] summary span:first-child::after { content: " ▾"; }
.hm-tax-row { color: var(--arcade-muted); font-size: .92em; padding-left: 12px; }

/* LEAVING SOON (Jesse, 2026-10-20): cabinets on their way out sit together at the bottom of Games,
   powered down: grey art and trim at about half strength, no neon glow, while the titles and PLAY
   stay readable and full size. A cabinet retires by moving into .arcade-retiring. */
.arcade-games-lobby .arcade-retiring { border-top: 1px dashed rgba(201,184,145,.28); display: flex; flex-direction: column; gap: inherit; margin-top: 1.6rem; padding-top: 1.4rem; }
.arcade-retiring-head { align-items: center; display: flex; flex-direction: column; gap: .55rem; text-align: center; }
.arcade-retiring-ribbon { background: repeating-linear-gradient(-45deg, rgba(201,163,90,.16) 0 10px, rgba(201,163,90,.05) 10px 20px), #15130f; border-block: 1px solid rgba(201,163,90,.55); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); display: inline-flex; padding: .55rem 2.1rem .5rem; }
.arcade-retiring-ribbon span { color: #d9bb7a; font: 400 .78rem/1 'Silkscreen', monospace; letter-spacing: .32em; text-shadow: 0 0 6px rgba(217,187,122,.35); }
.arcade-retiring-head p { color: #8f97ab; font: 400 1.05rem/1.25 'VT323', monospace; margin: 0; max-width: 22rem; }
.arcade-games-lobby .arcade-retiring .arcade-cabinet.is-retiring { background: rgba(10,12,18,.55); border-color: rgba(150,158,178,.42); border-style: dashed; box-shadow: none; }
.arcade-retiring .is-retiring :is(.arcade-banner-art, .arcade-bj-cards, > svg, > img) { filter: grayscale(1); opacity: .5; }
.arcade-retiring .is-retiring h2 { color: #c4c9d6; text-shadow: none; }
.arcade-retiring .is-retiring :is(.arcade-banner-copy, .arcade-golf-copy) > span, .arcade-retiring .is-retiring .arcade-jackpot { color: #8f97ab; filter: grayscale(1); }
.arcade-retiring .is-retiring .arcade-pill-primary { background: transparent; border: 2px solid rgba(214,220,232,.7); box-shadow: none; color: #e6e9f2; text-shadow: none; }
.arcade-retiring .is-retiring .arcade-pill-primary:active { background: rgba(214,220,232,.12); }
.arcade-retiring .is-retiring .arcade-leading { filter: grayscale(.6); }
/* Jesse, 2026-10-20: keep them green, just dimmer; the section sits above HIGH SCORES. */
.arcade-games-lobby .arcade-retiring { margin-bottom: .4rem; }
.arcade-games-lobby .arcade-retiring .arcade-cabinet.is-retiring { border-color: rgba(93,255,138,.48); box-shadow: 0 0 8px rgba(93,255,138,.12); }
.arcade-retiring .is-retiring :is(.arcade-banner-art, .arcade-bj-cards, > svg, > img) { filter: saturate(.75); opacity: .62; }
.arcade-retiring .is-retiring h2 { color: #c9f2d6; text-shadow: 0 0 6px rgba(93,255,138,.25); }
.arcade-retiring .is-retiring :is(.arcade-banner-copy, .arcade-golf-copy) > span, .arcade-retiring .is-retiring .arcade-jackpot { color: #8fb79c; filter: none; }
.arcade-retiring .is-retiring .arcade-pill-primary { border-color: rgba(93,255,138,.7); color: #dfffe9; }
.arcade-retiring .is-retiring .arcade-leading { filter: none; }

/* NEW CHALLENGER on a phone (Jesse's screenshot, 2026-10-20): the site-wide `.loyalty-main form {
   width: 100% }` made FIGHT's form as wide as the card, so the name got no room (one letter a
   line) and FIGHT ran off the edge. FIGHT's form takes only its button; the name gets the rest. */
.loyalty-main .arcade-challenger form, .loyalty-main .inbox-card.is-challenge > form { flex: none; width: auto; }
.arcade-challenger-copy { flex: 1 1 auto; min-width: 0; }
.arcade-challenger-name { overflow-wrap: break-word; word-break: normal; }
.arcade-challenger .arcade-pill-primary { min-height: 44px; padding: 0 1rem; white-space: nowrap; }
.arcade-nowrap { white-space: nowrap; }