@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@font-face { font-family: "Symbols Nerd Font"; src: url("/static/vendor/fonts/SymbolsNerdFont-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: light-dark(#f1f2f4, #0d0e10);
  --surface: light-dark(#ffffff, #1a1b1e);
  --surface-2: light-dark(#f7f8f9, #212226);
  --ink: light-dark(#1b1c1f, #f2f2f3);
  --muted: light-dark(#75787f, #909399);
  --line: light-dark(#e2e3e7, #2a2c31);
  --shadow: light-dark(0 10px 30px rgba(25, 28, 34, .10), 0 12px 34px rgba(0, 0, 0, .5));
  --shadow-big: light-dark(0 30px 80px rgba(25, 28, 34, .18), 0 34px 90px rgba(0, 0, 0, .65));
  --dot-free: #2fbf71;
  --danger: light-dark(#d43f52, #ff7789);
  --rainbow: conic-gradient(from var(--ring), #ff5964, #ffb347, #ffe74c, #59cd90, #3fa7ff, #b06bff, #ff5964);
  --radius: 18px;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; background: var(--bg); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--ink); }
button { color: inherit; }

:focus-visible { outline: 3px solid #3fa7ff; outline-offset: 3px; animation: focus-rainbow 1.6s linear infinite; }
@keyframes focus-rainbow {
  0%, 100% { outline-color: #ff5964; }
  18% { outline-color: #ffb347; }
  33% { outline-color: #ffe74c; }
  50% { outline-color: #59cd90; }
  68% { outline-color: #3fa7ff; }
  85% { outline-color: #b06bff; }
}

.eyebrow { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; }

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .1em; }
.brand > span { position: relative; display: grid; place-items: center; width: 2.2rem; aspect-ratio: 1; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 900; }

.theme-toggle { display: grid; place-items: center; width: 2.4rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1rem; cursor: pointer; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), background .25s; }
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle .nf-ico { color: inherit; }
.theme-ico::before { content: "\f186"; }
:root[data-theme="dark"] .theme-ico::before { content: "\f185"; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-ico::before { content: "\f185"; } }

.auth-screen { display: grid; place-items: center; padding: 2rem 1rem; }
.auth-screen .theme-toggle { position: fixed; top: 1rem; right: 1rem; }
.auth-card { width: min(100%, 28rem); padding: clamp(1.6rem, 5vw, 2.8rem); border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-big); animation: card-in .5s cubic-bezier(.2, 1.2, .35, 1) backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.auth-card .brand { margin-bottom: 2.6rem; }
.auth-card h1 { font-size: clamp(2rem, 8vw, 2.9rem); }

form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
label small { font-weight: 500; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; background: var(--surface-2); color: var(--ink); transition: border-color .2s; }
input:hover, select:hover { border-color: var(--muted); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 3rem; }
.password-toggle { position: absolute; top: 50%; right: .45rem; transform: translateY(-50%); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 1.05rem; cursor: pointer; transition: color .2s, background .2s; }
.password-toggle:hover { color: var(--ink); background: var(--surface); }

.primary, .quiet, .filter { border: 0; border-radius: 999px; padding: .8rem 1.4rem; cursor: pointer; font-weight: 800; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), background .2s, opacity .2s; }
.primary { color: var(--bg); background: var(--ink); }
.primary:hover { transform: scale(1.04); }
.quiet, .filter { color: var(--muted); background: transparent; }
.quiet:hover { color: var(--ink); }
.primary:disabled { opacity: .45; cursor: default; transform: none; }
.button-link { display: inline-block; text-decoration: none; text-align: center; }
.form-error { min-height: 1.3em; margin-bottom: 0; color: var(--danger); font-size: .85rem; }
.auth-switch { margin: 1.6rem 0 0; color: var(--muted); text-align: center; }
.auth-switch a { font-weight: 700; }
.notice { padding: .8rem 1rem; border-radius: 12px; font-weight: 600; }
.notice.success { background: color-mix(in srgb, var(--dot-free) 14%, transparent); color: light-dark(#1c7a49, #7fe0ae); }

.topbar { --bg: light-dark(#17181b, #f6f6f7); --surface: light-dark(#1b1c1f, #ffffff); --surface-2: light-dark(#27282d, #ececef); --ink: light-dark(#f2f2f3, #1b1c1f); --muted: light-dark(#9b9ea6, #75787f); --line: light-dark(#303237, #e0e1e5); position: sticky; top: 0; z-index: 20; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem clamp(1rem, 4vw, 3rem); color: var(--ink); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.bar-cluster { display: flex; align-items: center; gap: .6rem; }
.topbar .player-chip, .topbar .theme-toggle, .topbar .quiet, .pill-nav { background: var(--surface-2); border: 1px solid var(--line); box-shadow: none; }
.topbar .quiet { border-radius: 999px; padding: .6rem 1.1rem; color: var(--ink); font-size: .85rem; }
.guest-auth { display: flex; align-items: center; gap: .25rem; }
.guest-auth .primary { padding: .65rem 1rem; font-size: .85rem; }
.account-email { color: var(--muted); font-size: .8rem; }
.pill-nav { display: flex; align-items: center; gap: .25rem; padding: .3rem; border-radius: 999px; }
.player-menu { position: relative; }
.player-menu summary { list-style: none; cursor: pointer; user-select: none; }
.player-menu summary::-webkit-details-marker { display: none; }
.player-chip .chevron { color: var(--muted); font-size: .7rem; transition: transform .2s; }
.player-menu[open] .chevron { transform: rotate(180deg); }
.menu-pop { position: absolute; right: 0; top: calc(100% + .55rem); z-index: 40; min-width: 13rem; display: grid; gap: .2rem; padding: .45rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 4px 12px light-dark(rgba(25, 28, 34, .16), rgba(0, 0, 0, .55)), 0 22px 60px light-dark(rgba(25, 28, 34, .3), rgba(0, 0, 0, .75)); animation: menu-in .2s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .avatar { width: 1.9rem; border: 0; }
.menu-item .avatar::before { font-size: .95rem; }
.menu-item.current::after { content: "✓"; margin-left: auto; color: var(--muted); }
.menu-manage { justify-content: center; margin-top: .2rem; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; color: var(--muted); }

.profiles-page { width: min(64rem, 100%); margin: 0 auto; padding: clamp(2.5rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem); text-align: center; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 10.5rem)); justify-content: center; gap: 1.1rem; margin-top: 2.6rem; }
.profile-card { position: relative; min-height: 11.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.profile-card:hover { transform: translateY(-6px) scale(1.03); }
.profile-card small { color: var(--muted); }
.add-profile { border-style: dashed; background: transparent; box-shadow: none; }
.add-profile > span { font-size: 2.6rem; color: var(--muted); line-height: 1; }
.avatar { display: inline-grid; place-items: center; width: 4.2rem; aspect-ratio: 1; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); }
.avatar::before { font-size: 1.9rem; }
.avatar-rocket::before { content: "🚀"; }.avatar-robot::before { content: "🤖"; }.avatar-dragon::before { content: "🐉"; }.avatar-cat::before { content: "🐈"; }.avatar-fox::before { content: "🦊"; }.avatar-ghost::before { content: "👻"; }.avatar-planet::before { content: "🪐"; }.avatar-star::before { content: "⭐"; }
.player-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 700; white-space: nowrap; }
.player-chip .avatar { width: 1.9rem; border: 0; }
.player-chip .avatar::before { font-size: .95rem; }

.settings-page { width: min(44rem, 100%); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 4rem; }
.settings-tabs { display: inline-flex; margin-bottom: 1.4rem; background: var(--surface); border: 1px solid var(--line); }
.settings-card { padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.avatar-picker { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; border: 0; }
.avatar-picker legend { padding: 0; margin-bottom: .45rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.avatar-option { position: relative; display: inline-grid; cursor: pointer; }
.avatar-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.avatar-option .avatar { width: 3.4rem; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1), border-color .2s; }
.avatar-option:hover .avatar { transform: scale(1.08); }
.avatar-option input:checked + .avatar { border: 3px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, conic-gradient(from var(--ring), #ff5964, #ffb347, #ffe74c, #59cd90, #3fa7ff, #b06bff, #ff5964) border-box; animation: ring-spin 2.4s linear infinite; }
.avatar-option input:focus-visible + .avatar { outline: 3px solid #3fa7ff; outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.data-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.data-info { display: grid; gap: .15rem; }
.data-info small { color: var(--muted); }
.data-empty { margin: 0; color: var(--muted); font-weight: 600; }
.data-footer { display: flex; justify-content: flex-end; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.quiet.danger { color: var(--danger); }
.quiet.danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.danger-solid { border: 0; border-radius: 999px; padding: .8rem 1.4rem; color: #fff; background: var(--danger); font-weight: 800; cursor: pointer; transition: transform .2s cubic-bezier(.2, 1.4, .4, 1); }
.danger-solid:hover { transform: scale(1.04); }
#confirm-dialog { width: min(92vw, 24rem); }
.confirm-copy { color: var(--muted); font-weight: 600; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }

dialog { border: 1px solid var(--line); border-radius: 24px; padding: 2rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-big); }
dialog[open] { animation: dialog-pop .34s cubic-bezier(.2, 1.3, .35, 1); }
@keyframes dialog-pop { from { opacity: 0; transform: translateY(18px) scale(.93); } }
dialog::backdrop { background: light-dark(rgba(28, 30, 36, .35), rgba(0, 0, 0, .6)); backdrop-filter: blur(10px); }
#profile-dialog { width: min(92vw, 26rem); }
.dialog-close { position: absolute; z-index: 2; top: .8rem; right: .9rem; display: grid; place-items: center; width: 2.2rem; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; transition: background .2s, color .2s; }
.dialog-close:hover { background: var(--surface-2); color: var(--ink); }

.hub-main { width: min(80rem, 100%); margin: auto; padding: 1.4rem clamp(1rem, 4vw, 3rem) 4rem; }
.shelf-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter-count { color: var(--muted); font-size: .8rem; font-weight: 600; }
.filter-menu { position: relative; }
.filter-menu summary { list-style: none; cursor: pointer; user-select: none; }
.filter-menu summary::-webkit-details-marker { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: .88rem; box-shadow: var(--shadow); }
.filter-chip .chevron { color: var(--muted); font-size: .7rem; transition: transform .2s; }
.chip-clear { display: grid; place-items: center; width: 1.35rem; aspect-ratio: 1; margin-left: .1rem; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .95rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.chip-clear:hover { background: var(--line); color: var(--ink); }
.filter-menu[open] .chevron { transform: rotate(180deg); }
.filter-menu .menu-pop { left: 0; right: auto; }
.menu-scroll { display: grid; gap: .2rem; max-height: 18rem; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; padding-right: .2rem; border-radius: 11px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.nf-ico { font-family: "Symbols Nerd Font", system-ui, sans-serif; font-weight: 400; color: var(--muted); }
.menu-item .nf-ico { width: 1.2rem; text-align: center; }
.genre-ico::before { content: "\f11b"; }
.genre-ico[data-genre="action"]::before { content: "\f0e7"; }
.genre-ico[data-genre="adventure"]::before { content: "\f14e"; }
.genre-ico[data-genre="arcade"]::before { content: "\f11b"; }
.genre-ico[data-genre="casual"]::before { content: "\f118"; }
.genre-ico[data-genre="creative"]::before { content: "\f1fc"; }
.genre-ico[data-genre="flying"]::before { content: "\f072"; }
.genre-ico[data-genre="platformer"]::before { content: "\f1ae"; }
.genre-ico[data-genre="puzzle"]::before { content: "\f12e"; }
.genre-ico[data-genre="racing"]::before { content: "\f11e"; }
.genre-ico[data-genre="relaxing"]::before { content: "\f06c"; }
.genre-ico[data-genre="simulation"]::before { content: "\f085"; }
.genre-ico[data-genre="strategy"]::before { content: "\f0eb"; }
.genre-ico[data-genre="time-management"]::before { content: "\f017"; }
.filter { padding: .55rem 1.1rem; font-size: .85rem; }
.filter.active { color: var(--bg); background: var(--ink); }

.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 28vw), 1fr)); gap: 1.1rem; }
.game-slot { position: relative; display: block; animation: tile-in .5s cubic-bezier(.2, 1.3, .4, 1) backwards; animation-delay: calc(min(var(--i, 0) * 1ms, 14ms) * 30); }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.game-card { position: relative; width: 100%; }
.box-front { position: absolute; inset: 0; border: 0; padding: 0; background: none; opacity: 0; cursor: pointer; }
.box-front:focus-visible { outline: none; }
.box-back { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.box3d { display: block; position: relative; aspect-ratio: 1 / 1.13; }


.profile-card:focus-visible { outline: none; }
.game-slot:has(.box-front:focus-visible)::before, .game-slot:has(.box-front:focus-visible)::after,
.profile-card:focus-visible::before, .profile-card:focus-visible::after { content: ""; position: absolute; inset: -6px; z-index: 2; border-radius: 22px; padding: 3px; background: conic-gradient(from var(--ring), #ff5964, #ffb347, #ffe74c, #59cd90, #3fa7ff, #b06bff, #ff5964); -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, linear-gradient(#000 0 0); mask-composite: exclude; animation: ring-spin 2.4s linear infinite; pointer-events: none; }
.profile-card:focus-visible::before, .profile-card:focus-visible::after { border-radius: 24px; }
.game-slot:has(.box-front:focus-visible)::before, .game-slot:has(.box-front:focus-visible)::after { border-radius: 9px; }
:is(.primary, .quiet, .filter, .theme-toggle, .dialog-close, .player-chip, .menu-item, .brand):focus-visible { outline: none; }
:is(.primary, .quiet, .filter, .theme-toggle, .player-chip, .menu-item, .brand):focus-visible { position: relative; }
:is(.primary, .quiet, .filter, .theme-toggle, .dialog-close, .player-chip, .menu-item, .brand):focus-visible::before, .cart-close:focus-visible::before,
:is(.primary, .quiet, .filter, .theme-toggle, .dialog-close, .player-chip, .menu-item, .brand):focus-visible::after, .cart-close:focus-visible::after { content: ""; position: absolute; inset: -4px; z-index: 2; border-radius: 999px; padding: 2.5px; background: conic-gradient(from var(--ring), #ff5964, #ffb347, #ffe74c, #59cd90, #3fa7ff, #b06bff, #ff5964); -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, linear-gradient(#000 0 0); mask-composite: exclude; animation: ring-spin 2.4s linear infinite; pointer-events: none; }
:is(.primary, .quiet, .filter, .theme-toggle, .dialog-close, .player-chip, .menu-item, .brand):focus-visible::before, .cart-close:focus-visible::before { filter: blur(7px); opacity: .8; }
@keyframes ring-spin { to { --ring: 360deg; } }


.toast { position: fixed; top: 5.6rem; left: 50%; z-index: 230; display: flex; align-items: center; gap: .65rem; padding: .7rem 1.25rem; border-radius: 999px; background: light-dark(rgba(23, 24, 27, .94), rgba(255, 255, 255, .95)); color: light-dark(#f2f2f3, #1b1c1f); font-weight: 700; box-shadow: var(--shadow-big); opacity: 0; transform: translate(-50%, -1.2rem); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .nf-ico { color: inherit; }

@media (max-width: 720px) {
  .account-email, .topbar .brand strong, .topbar .player-chip > span:nth-child(2) { display: none; }
  .topbar { flex-wrap: wrap; }
  .pill-nav { order: 3; margin-inline: auto; }
  .game-grid { gap: .6rem; }
}
.gl-required { margin: 3rem auto; max-width: 34rem; padding: 1.2rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font-weight: 600; text-align: center; }
.shelf-gl { display: none; }
body.gl .shelf-gl { display: block; position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.shelf-gl-overlay { display: none; }
body.gl.cart-open .shelf-gl-overlay { display: block; position: fixed; inset: 0; z-index: 65; pointer-events: auto; }
.cart-close { position: fixed; z-index: 70; top: max(.75rem, calc(50% - min(46.33vw, 198.88px) - 3.75rem)); right: calc(50% - min(41vw, 232px)); display: grid; place-items: center; width: 3rem; aspect-ratio: 1; padding: 0 0 .18rem; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font: 400 2rem/1 system-ui, sans-serif; box-shadow: var(--shadow-big); cursor: pointer; transition: transform .2s, background .2s; }
.cart-close:hover { transform: scale(1.06); background: var(--surface-2); }
.cart-close:focus-visible { outline: none; }
.cart-close[hidden] { display: none; }

.shot-zoom { position: fixed; z-index: 80; top: 50%; left: 50%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-big); opacity: 0; transform: translate(-50%, -50%) scale(.55); pointer-events: none; transition: opacity .22s ease, transform .3s cubic-bezier(.2, 1.15, .3, 1); }
.shot-zoom.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.shelf-veil { position: fixed; inset: 0; z-index: 60; background: light-dark(rgba(28, 30, 36, .55), rgba(0, 0, 0, .72)); backdrop-filter: blur(22px) saturate(.65); opacity: 0; pointer-events: none; transition: opacity .3s ease-out; }
body.cart-open .shelf-veil { opacity: 1; pointer-events: auto; }
@media (pointer: coarse) { .shelf-veil { backdrop-filter: blur(10px) saturate(.65); } }
body.cart-open { overflow: hidden; }

/* Faded repeating sparkle texture behind the shelf; multiply hides the tile's
   white base in light mode, invert+screen turns the stars into faint light
   dots in dark mode. */
body.hub-screen::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url("/static/art/shelf-texture.jpg") repeat center / 256px; opacity: .05; mix-blend-mode: multiply; }
:root[data-theme="dark"] body.hub-screen::before { filter: invert(1); mix-blend-mode: screen; opacity: .06; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.hub-screen::before { filter: invert(1); mix-blend-mode: screen; opacity: .06; }
}

@property --iris-r { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
.iris-wipe { position: fixed; inset: 0; z-index: 240; pointer-events: none; --iris-r: 0px; background: radial-gradient(circle at 50% 50%, transparent var(--iris-r), #000 calc(var(--iris-r) + 1px)); transition: --iris-r .5s cubic-bezier(.45, 0, .2, 1); }
.iris-wipe.is-open { --iris-r: 155vmax; }
.iris-wipe[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}