/* One library: featured games, a compact house scoreboard, then complete shelves. */
.shell.storefront {
  --bg: #101116; --bg-lift: #17191f; --bg-lift-2: #22242e;
  --line: #2d303c; --text: #f2f0fa; --muted: #a5a6b7; --accent: #aa94ff;
  display: block; height: 100dvh; overflow: auto; background: var(--bg);
  color: var(--text); scroll-behavior: smooth; scrollbar-gutter: stable;
}
.storefront .topbar { min-height: 70px; padding: 14px max(24px, calc((100% - 1400px) / 2)); gap: 14px; }
.storefront .logo.small { font-size: 23px; letter-spacing: -.8px; white-space: nowrap; }
.store-nav { display: flex; gap: 26px; margin-left: auto; }
.store-nav a { color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap; }
.store-nav a:hover { color: var(--accent); }
.storefront .topbar > .spacer { flex: .4; }
.storefront .coins { border: 0; background: none; padding-inline: 3px; font-size: 13px; white-space: nowrap; }
.storefront .who { border-color: var(--line); background: none; }
.store-main { max-width: 1456px; margin: auto; padding: 26px 28px 32px; }
.store-intro { text-align: center; margin-bottom: 24px; }
.store-intro h1 { margin: 0 0 6px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.15; letter-spacing: -1.3px; }
.store-lead { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
.store-main [id] { scroll-margin-top: 24px; }
.store-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
.store-features { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; min-width: 0; }
.store-features:has(> :only-child) { grid-template-columns: 1fr; }
.store-top:has(.store-features:empty) { display: none; }
.storefront .game-card { --accent: #aa94ff !important; min-width: 0; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; background: #15171d; }
.storefront .game-art { background: #20222c; aspect-ratio: 1.9; }
.storefront .game-art::after { display: none; }
.storefront .game-art-badges { top: 10px; left: 10px; }
.storefront .rating-badge { font-size: 11px; padding: 5px 8px; }
.storefront .game-body { padding: 14px; gap: 5px; }
.storefront .game-name { position: static; white-space: normal; overflow: visible; text-shadow: none; font-size: 18px; line-height: 1.25; margin: 0; letter-spacing: -.3px; }
.storefront .game-body .game-tagline { font-size: 12px; line-height: 1.45; min-height: 2.9em; }
.storefront .game-stats { display: grid; gap: 3px; margin-top: 4px; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.storefront .game-leader { order: -1; color: #e6d6a5; font-size: 12px; font-weight: 550; }
.storefront .game-personal { color: #c0bed1; }
.storefront .game-players { color: var(--muted); font-size: 10px; }
.storefront .game-actions { padding-top: 9px; gap: 8px; grid-template-columns: 1fr auto auto; }
.storefront .primary { border: 0; background: var(--accent); color: #181129; padding: 9px 20px; border-radius: 6px; font-size: 13px; font-weight: 650; margin: 0; box-shadow: none; }
.storefront .primary:hover { background: #bfacff; }
.storefront .game-actions .icon-button { padding: 8px 12px; font-size: 14px; border-radius: 6px; }
.storefront .featured-game { min-height: 412px; position: relative; justify-content: end; background: #101217; border-color: #414553; }
.storefront .featured-game .game-art { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.storefront .featured-game .game-art::after { display: block; inset: 30% 0 0; height: auto; background: linear-gradient(transparent, rgb(9 11 15 / .95)); }
.storefront .featured-game .game-body { position: relative; z-index: 1; flex: 0; padding: 20px; pointer-events: none; }
.storefront .featured-game .game-body button { pointer-events: auto; }
.storefront .featured-game .game-name { font-size: clamp(23px, 2.05vw, 31px); line-height: 1.13; letter-spacing: -.7px; }
.storefront .featured-game .game-tagline { font-size: 13px; color: #c4c1d0; min-height: 0; margin-top: 4px; }
.storefront .featured-game .game-personal, .storefront .featured-game .game-players { display: none; }
.storefront .featured-game .game-leader { margin-top: 5px; }
.storefront .featured-game .game-actions { grid-template-columns: auto auto auto; justify-content: start; padding-top: 10px; }
.store-rankings { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #15171e; min-width: 0; }
.store-vote-pulse { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 16px; }
.store-vote-kicker { margin: 0 0 5px; color: #c7b4f7; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.store-vote-leaders { padding: 0; margin: 0; list-style: none; }
.store-vote-leaders li { display: grid; grid-template-columns: 16px 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 31px; padding: 4px 0; font-size: 12px; }
.store-vote-place, .store-vote-total { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.store-vote-first { margin: 2px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.store-vote-total { margin: 8px 0 0; }
.store-vote-pulse .store-vote-icon { width: 24px; height: 24px; font-size: 14px; }
.store-vote-pulse .store-vote-game { font-size: 12px; }
.store-vote-pulse .store-link { margin-top: 10px; }
.store-vote-sheet { min-width: 0; }
.store-vote-sheet h2 { margin: 0 0 6px; }
.store-vote-search { width: min(250px, 100%); margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #111218; color: var(--text); }
.store-vote-sheet .store-vote-search { width: 100%; margin-top: 13px; }
.store-vote-categories { display: grid; gap: 18px; }
.store-vote-category h3 { margin: 0 0 8px; color: #d2c4ff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.store-vote-sheet .store-vote-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.store-vote-status { margin: 16px 0 10px; color: #c7b4f7; font-size: 12px; font-weight: 600; }
.store-vote-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.store-vote-option { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; min-width: 0; padding: 10px 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #111218; color: var(--text); }
.store-vote-option:hover:not(:disabled) { border-color: #8673bd; background: #1e1b28; }
.store-vote-option.selected { border-color: #8069c4; background: #211d2c; }
.store-vote-option:disabled { cursor: default; opacity: .62; }
.store-vote-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: #242331; font-size: 18px; }
.store-vote-game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.store-vote-meter { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: #2b2b35; }
.store-vote-meter > span { display: block; height: 100%; border-radius: inherit; background: #a995e5; }
.store-vote-result { grid-column: 3; grid-row: 1; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.store-vote-result strong { display: block; font-size: 14px; }
.store-vote-result small { color: var(--muted); font-size: 10px; }
.store-vote-mark { grid-column: 2 / span 2; color: var(--muted); font-size: 10px; }
.store-vote-option.selected .store-vote-mark { color: #d2c4ff; }
.store-vote-empty { grid-column: 1 / -1; margin: 12px 0; color: var(--muted); font-size: 13px; }
.store-board + .store-board { border-top: 1px solid var(--line); margin-top: 17px; padding-top: 16px; }
.store-board h2 { font-size: 18px; letter-spacing: -.3px; margin: 0 0 4px; }
.store-board-note { color: var(--muted); font-size: 11px; margin: 0 0 8px; line-height: 1.5; }
.store-standings { padding: 0; margin: 0; list-style: none; }
.store-standings li { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--line, #2d303c); }
.store-standings li:last-child { border-bottom: 0; }
.store-rank { min-width: 16px; color: var(--muted, #a5a6b7); font-size: 11px; }
.store-standings .profile-avatar { width: 25px; height: 25px; flex-shrink: 0; border-radius: 8px; font-size: 15px; }
.store-player { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.store-player small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.store-score { color: #e8cf89; font-variant-numeric: tabular-nums; font-size: 12px; flex-shrink: 0; }
.store-standings .is-you .store-player { color: #d2c4ff; }
.store-link { display: inline-flex; background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; font-weight: 550; }
.store-link:hover { color: #d2c4ff; background: none; }
.store-board > .store-link { margin-top: 9px; }
.store-board-message { min-height: 108px; display: grid; align-content: center; font-size: 12px; line-height: 1.6; }
.store-board-message p { margin: 0; }
.store-board-message button { justify-self: start; padding: 5px 9px; margin-top: 6px; }
.store-standings-sheet .store-standings li, .store-hall-sheet .store-standings li { padding: 12px 0; }
.house-game-boards { display: grid; gap: 6px; }
.house-game-board { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 5px 16px; padding: 13px; border: 1px solid var(--line); font-size: 12px; }
.house-game-board strong { grid-column: 1 / -1; font-size: 14px; }
.house-game-board span { color: var(--muted); overflow-wrap: anywhere; }
.storefront .gallery-bar { padding: 18px 0; margin: 0 0 4px; display: flex; flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.storefront .game-search-box { margin: 0; max-width: 420px; flex: 1 1 210px; }
.storefront input.game-search { border-radius: 7px; padding: 10px 14px; font-size: 13px; background: #181a22; }
.library-sort { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; }
.storefront select.game-sort { width: 140px; margin: 0; border: 0; background: #101116; padding: 9px; font-size: 12px; }
.storefront .gallery-actions { margin-left: auto; gap: 4px; }
.storefront .gallery-actions button { font-size: 12px; border: 0; padding: 8px; }
.library-results { font-size: 13px; color: var(--muted); }
.library-results[hidden] { display: none; }
.storefront .games { padding: 0; overflow: visible; display: flex; flex-direction: column; gap: 34px; }
.storefront .shelf-section { gap: 14px; margin-top: 20px; }
.store-section-heading { display: block; }
.storefront .shelf-heading { font-size: 27px; line-height: 1.2; letter-spacing: -.5px; text-transform: none; color: var(--text); gap: 14px; }
.storefront .shelf-heading::after { display: none; }
.storefront .shelf-count { color: var(--muted); font-size: 12px; padding: 0; border: 0; background: none; font-weight: 400; }
.storefront .shelf-note { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.storefront .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.game-stage { display: inline-block; padding: 6px 10px; border: 1px solid #766448; border-radius: 6px; background: #201c16eb; color: #f1d9a6; font-size: 11px; font-weight: 650; }
.storefront .mmo-section { border-top: 1px solid #484054; padding-top: 30px; }
.storefront .mmo-section .shelf-note { color: #c7b4f7; font-weight: 600; }
.storefront .mmo-section .games-grid { grid-template-columns: 1fr; }
.storefront .mmo-section .game-card { display: grid; grid-template-columns: 1.1fr 1fr; border-color: #514466; background: #1a1722; }
.storefront .mmo-section .game-art { aspect-ratio: auto; min-height: 340px; }
.storefront .mmo-section .game-body { padding: 30px; justify-content: center; gap: 12px; }
.storefront .mmo-section .game-name { font-size: 32px; }
.storefront .mmo-section .game-tagline { font-size: 16px; min-height: 0; }
.game-development-note { margin: 0; color: #c0b8ce; font-size: 14px; line-height: 1.7; max-width: 52ch; }
.storefront .mmo-section .game-actions { grid-template-columns: auto auto auto; justify-content: start; margin-top: 0; }
.storefront .shelf-section:has(#early-development) { border-top: 1px solid var(--line); padding-top: 30px; }
.store-footer { display: flex; gap: 24px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 24px; color: var(--muted); font-size: 12px; }
.store-footer > span:first-child { color: var(--text); font-weight: 650; }
.store-footer a { color: var(--muted); margin-left: auto; }
.storefront :focus-visible { outline: 2px solid #c6b6ff; outline-offset: 3px; }
@media (max-width: 1150px) {
  .storefront .topbar { flex-wrap: wrap; padding: 14px 24px; }
  .store-nav { order: 2; width: 100%; justify-content: center; padding-top: 12px; border-top: 1px solid var(--line); }
  .storefront .topbar > .spacer { flex: 1; }
  .store-top { grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
  .store-features { grid-template-columns: 1fr 1fr; }
  .storefront .featured-game .game-body { padding: 16px; }
  .storefront .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .store-top { grid-template-columns: 1fr; }
  .store-rankings { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .store-board + .store-board { border-top: 0; border-left: 1px solid var(--line); margin: 0; padding: 0 0 0 24px; }
  .store-vote-pulse { grid-column: 1 / -1; border-top: 1px solid var(--line) !important; border-left: 0 !important; margin: 0; padding: 16px 0 0 !important; }
  .storefront .featured-game { min-height: 350px; }
  .storefront .gallery-actions { margin-left: 0; }
}
@media (max-width: 620px) {
  .storefront .mmo-section .game-card { grid-template-columns: 1fr; }
  .storefront .mmo-section .game-art { aspect-ratio: 1.9; min-height: 0; }
  .storefront .mmo-section .game-body { padding: 20px; }
  .storefront .mmo-section .game-name { font-size: 27px; }
  .storefront .mmo-section .game-actions { grid-template-columns: 1fr auto auto; }
  .storefront .mmo-section .primary { padding-inline: 10px; font-size: 12px; }
  .store-main { padding: 24px 16px; }
  .store-intro { text-align: left; }
  .store-lead { font-size: 15px; }
  .storefront .topbar { padding: 12px 16px; gap: 8px; }
  .storefront .logo.small { font-size: 19px; }
  .storefront .topbar .coins.laurels { display: none; }
  .store-nav { gap: 10px 16px; justify-content: center; flex-wrap: wrap; }
  .store-nav a { font-size: 11px; }
  .storefront .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .storefront .game-body { padding: 12px; }
  .storefront .game-actions { gap: 5px; }
  .storefront .game-actions .icon-button { padding: 8px; }
  .storefront .game-name { font-size: 16px; }
  .storefront .game-leader { font-size: 11px; }
  .storefront .shelf-heading { font-size: 24px; }
  .storefront .gallery-bar { gap: 12px; }
  .storefront .game-search-box { max-width: none; flex-basis: 100%; }
  .storefront .gallery-actions { margin-left: auto; }
  .storefront .gallery-actions .label { display: none; }
}
@media (max-width: 480px) {
  .store-vote-options { grid-template-columns: 1fr; }
  .store-features { grid-template-columns: 1fr; }
  .storefront .featured-game { min-height: 300px; }
  .storefront .featured-game + .featured-game { min-height: 245px; }
  .storefront .featured-game .game-name { font-size: 27px; }
  .store-rankings { grid-template-columns: 1fr; gap: 16px; }
  .store-board + .store-board { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0 0; }
  .store-vote-pulse { grid-column: auto; }
  .storefront .games-grid { grid-template-columns: 1fr; }
  .storefront .game-name { font-size: 19px; }
  .storefront .game-leader { font-size: 12px; }
  .store-footer > span:nth-child(2) { display: none; }
  .storefront .topbar .friends-button, .storefront .topbar .chat-bar-button { padding: 8px; }
}
/* The phone chat button (styles.css) costs the bar a button; the smallest phones win it back from the logo and the gaps. */
@media (max-width: 400px) {
  .storefront .topbar { gap: 6px; }
  .storefront .logo.small { font-size: 17px; letter-spacing: -.6px; }
}
@media (prefers-reduced-motion: reduce) {
  .shell.storefront { scroll-behavior: auto; }
  .storefront *, .storefront *::before, .storefront *::after { transition: none !important; }
}