/* 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 */
.arcade-bag-page, .arcade-games-lobby { background: radial-gradient(120% 30% at 20% 0%, rgba(255,58,84,.14), transparent 70%); 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; }
.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-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. */
.loyalty-main > *, 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) ---------- */
.top-shelf { background: radial-gradient(110% 35% at 50% 0%, rgba(255,58,84,.16), transparent 70%), 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-kind { color: #8a6a2a; font-size: 1.1rem; line-height: 1; text-align: right; 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; } }
.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; }
.top-shelf-mark.is-on { background: var(--line); box-shadow: none; color: #0a0f1c; }
.top-shelf-mark.is-won { animation: ts-blink .5s steps(1) infinite; 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; display: flex; justify-content: center; min-height: 0; }
.top-shelf-cell img { display: block; filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 8px var(--glow)); height: 72%; width: 72%; }
.top-shelf-cell.is-spinning img { animation: ts-blur .12s linear infinite; }
@keyframes ts-blur { 0% { transform: translateY(-10px); filter: blur(1.6px); } 100% { transform: translateY(10px); filter: blur(1.6px); } }
.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); }
.top-shelf-cell.is-hit img { animation: ts-hit .7s ease-in-out infinite alternate; }
@keyframes ts-hit { to { filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 12px var(--glow)) brightness(1.6); } }
.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 > div { animation: ts-ticker 22s linear infinite; display: inline-block; }
@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 { 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. */
.arcade-toasts { display: grid; gap: .5rem; left: 50%; max-width: min(26rem, calc(100vw - 1.5rem)); pointer-events: none; position: fixed; top: .75rem; transform: translateX(-50%); width: 100%; z-index: 60; }
.arcade-toast { align-items: center; animation: toast-in .28s cubic-bezier(.2,1.4,.4,1); background: rgba(8,12,24,.96); border: 1.5px solid var(--arcade-amber); border-radius: 14px; box-shadow: 0 0 14px rgba(255,191,63,.45), 0 12px 28px rgba(0,0,0,.6); display: grid; gap: .6rem; grid-template-columns: 1fr auto auto; padding: .6rem .5rem .6rem .8rem; pointer-events: auto; }
.arcade-toast.is-challenger { border-color: var(--arcade-red-bright); box-shadow: 0 0 16px rgba(255,48,72,.6), 0 12px 28px rgba(0,0,0,.6); }
.arcade-toast.is-leaving { opacity: 0; transform: translateY(-12px); transition: opacity .5s, transform .5s; }
.arcade-toast-text { display: grid; line-height: 1.05; min-width: 0; }
.arcade-toast-text strong { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .75rem; letter-spacing: .08em; }
.is-challenger .arcade-toast-text strong { color: #ff8a98; }
.arcade-toast-text span { color: var(--arcade-cream); font-family: 'VT323', monospace; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-toast .arcade-pill-primary { font-size: .7rem; min-height: 40px; padding: 0 .9rem; text-decoration: none; }
.loyalty-site button.arcade-toast-close { background: none; border: 0; box-shadow: none; color: var(--arcade-muted); font-size: 1.4rem; height: 44px; padding: 0; width: 32px; }
@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; }

/* ---------- 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-log { margin: 0 auto; max-width: 26rem; padding: .6rem .8rem 7rem; }
.quest-log .duel-top { margin-bottom: .1rem; }
.loyalty-main h1.quest-title { font-size: clamp(2.4rem, 11vw, 3rem); line-height: 1; margin: 0 0 .7rem; }
.quest-list { display: grid; gap: .45rem; }
.quest-row { align-items: center; background: #080c18; border: 1px solid color-mix(in srgb, var(--rarity-color, #53e0ff) 35%, #1c2640); border-radius: 10px; display: grid; gap: .6rem; grid-template-columns: 40px 1fr; min-height: 52px; padding: .35rem .6rem .35rem .4rem; }
.quest-art { align-items: center; display: flex; height: 40px; justify-content: center; width: 40px; }
.quest-art img { border-radius: 6px; height: 40px; object-fit: cover; width: 40px; }
.quest-art i { color: var(--arcade-amber); font-style: normal; font-size: 1.4rem; text-shadow: 0 0 8px rgba(255,191,63,.7); }
.quest-copy { min-width: 0; }
.quest-copy .progress-card-heading strong { color: #fff4d6; display: block; font-family: 'VT323', monospace; font-size: 1.2rem; font-weight: 400; line-height: 1; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.quest-row:not(.is-instant) .progress-cycle { clip: rect(0 0 0 0); height: 1px; margin: 0; overflow: hidden; position: absolute; width: 1px; }
.quest-bar { align-items: center; display: grid; gap: .5rem; grid-template-columns: 1fr auto; margin-top: .25rem; }
.quest-bar b { color: var(--arcade-cream); font-family: 'VT323', monospace; font-size: 1.1rem; font-weight: 400; }
.quest-copy .progress-earned, .quest-copy .progress-cycle { color: var(--arcade-amber); font-family: 'VT323', monospace; font-size: 1rem; margin: .1rem 0 0; text-transform: uppercase; }
.quest-copy .progress-cycle strong { font-weight: 400; }
.quest-empty, .quest-awards p { color: #56708a; font-family: 'VT323', monospace; font-size: 1.2rem; text-transform: uppercase; }
.quest-log .progress-panel-actions { margin: .6rem 0 1rem; text-align: right; }
.quest-log .panel-link { background: none; border: 0; color: var(--arcade-cyan); font-family: 'VT323', monospace; font-size: 1.15rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; text-transform: uppercase; }
.quest-log .panel-link::after { content: ' >'; }
.quest-log .progress-supporting-data { display: grid; gap: 1rem; }
.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-site .notification-overlay-card { background: radial-gradient(90% 60% at 50% 0%, rgba(255,191,63,.16), transparent 70%), #080c18; border: 2px solid var(--arcade-amber); border-radius: 16px; box-shadow: 0 0 24px rgba(255,191,63,.45), 0 20px 40px rgba(0,0,0,.7); color: #fff4d6; max-width: 22rem; padding: 1.1rem 1.1rem 1.2rem; text-align: center; }
.loyalty-site .notification-overlay-card::backdrop { background: rgba(3,5,10,.8); }
.loyalty-site .notification-overlay-card .eyebrow { color: var(--arcade-amber); font-family: 'Silkscreen', monospace; font-size: .7rem; letter-spacing: .2em; margin: 0 0 .4rem; text-shadow: 0 0 8px rgba(255,191,63,.8); text-transform: uppercase; }
.loyalty-site .notification-overlay-card h2 { color: #fff; font-family: 'VT323', monospace; font-size: 2.2rem; font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 0 0 .4rem; text-shadow: 0 0 10px rgba(255,191,63,.7); text-transform: uppercase; }
.loyalty-site .notification-overlay-card p { color: #d9dfea; font-family: 'VT323', monospace; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; }
.loyalty-site .notification-overlay-celebration { color: var(--arcade-amber) !important; font-family: 'VT323', monospace !important; font-size: 2.6rem !important; text-shadow: 0 0 12px rgba(255,191,63,.9); }
.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%; }
.loyalty-site .notification-overlay-dismiss { background: none; border: 0; box-shadow: none; color: #8b9ab0; font-size: 1.6rem; height: 44px; position: absolute; right: .3rem; top: .2rem; width: 44px; }
.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. */
.top-shelf-bonus { align-items: center; background: #0b0614; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(195,139,255,.7), 0 0 10px rgba(159,76,255,.45); display: flex; gap: 12px; height: 20px; left: 50%; line-height: 1; padding: 0 10px; pointer-events: none; position: absolute; top: 0; transform: translate(-50%, -50%); white-space: nowrap; z-index: 4; }
.top-shelf-bonus[hidden] { display: none; }
.top-shelf-bonus > span { align-items: baseline; display: flex; gap: 4px; }
.top-shelf-bonus small { color: #9d7fd1; font-family: 'Silkscreen', monospace; font-size: 7px; letter-spacing: .08em; }
.top-shelf-bonus b, .top-shelf-bonus i { color: #eadcff; font-family: 'VT323', monospace; font-size: 1.25rem; font-style: normal; font-weight: 400; }
.top-shelf-bonus i { color: #6c5a8e; }
.top-shelf-bonus-won b { color: #fff4d6; display: inline-block; text-shadow: 0 0 6px rgba(255,191,63,.7); }
.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 1.5px rgba(255,191,63,.9), 0 0 14px rgba(255,191,63,.55); transition: box-shadow .2s; }
@keyframes ts-bonus-up { 30% { color: #fff; text-shadow: 0 0 10px #ffbf3f, 0 0 20px #ffbf3f; transform: scale(1.35); } }
.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 1.5px rgba(95,224,176,.9), 0 0 14px rgba(95,224,176,.6); } 15% { box-shadow: inset 0 0 0 2px #b9ffe6, 0 0 26px #5fe0b0, 0 0 50px rgba(83,224,255,.6); transform: translate(-50%, -50%) scale(1.18); } 40% { transform: translate(-50%, -50%) scale(1); } }
/* 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-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. */
.top-shelf-bonus-won b { margin-left: 2px; transform-origin: left center; }
/* "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; }