:root {
  color-scheme: dark;
  --ink: #f5f0fc;
  --ink-soft: #d5cfe1;
  --muted: #aaa2b8;
  --muted-2: #777187;
  --bg: #100d18;
  --bg-raised: #171321;
  --bg-soft: #1d1829;
  --line: rgba(255, 255, 255, 0.1);
  --purple: #a78bfa;
  --purple-dark: #7154cf;
  --lime: #d8fb7d;
  --coral: #ff9f82;
  --blue: #84d8f5;
  --max-width: 1180px;
  --radius-lg: 28px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 78% 6%, rgba(112, 76, 188, 0.13), transparent 34rem),
    radial-gradient(ellipse at 0% 54%, rgba(100, 69, 145, 0.08), transparent 28rem),
    var(--bg);
  line-height: 1.5;
}
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { color: #171020; background: var(--lime); }

.shell { width: min(var(--max-width), calc(100% - 64px)); margin-inline: auto; }
.skip-link {
  position: absolute;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #161020;
  background: var(--lime);
  border-radius: 8px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 2; border-bottom: 1px solid rgba(255,255,255,.055); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; }
.brand-word { color: var(--ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -.075em; }
.brand-word span { color: var(--purple); }
.main-nav { display: flex; align-items: center; gap: 36px; margin-left: auto; color: var(--muted); font-size: .9rem; font-weight: 550; }
.main-nav a { transition: color .18s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--ink); }
.header-cta { display: inline-flex; align-items: center; gap: 16px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: .84rem; font-weight: 650; transition: border-color .18s ease, background .18s ease; }
.header-cta span { color: var(--lime); font-size: 1.1rem; }
.header-cta:hover { border-color: rgba(216,251,125,.5); background: rgba(216,251,125,.06); }

.hero { position: relative; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 40px; min-height: 625px; padding-block: 74px 82px; }
.hero-copy { position: relative; z-index: 1; max-width: 590px; }
.eyebrow, .section-kicker, .shelf-number, .empty-label { margin: 0; color: var(--muted); font-size: .71rem; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #c9bfd9; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); letter-spacing: .1em; }
.status-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px rgba(216,251,125,.45); }
.hero h1 { margin: 28px 0 22px; font-size: clamp(3.4rem, 6.2vw, 5.9rem); font-weight: 750; letter-spacing: -.075em; line-height: .98; }
.hero h1 span { color: var(--purple); }
.hero-lede { max-width: 475px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.55vw, 1.16rem); line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; border: 0; border-radius: 999px; font-size: .88rem; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #181321; background: var(--lime); box-shadow: 0 8px 28px rgba(216,251,125,.11); }
.button-primary:hover { background: #e3ff9a; box-shadow: 0 12px 32px rgba(216,251,125,.17); }
.button span { font-size: 1.1rem; }
.hero-note { color: var(--muted-2); font-size: .78rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 48px; color: var(--muted-2); font-size: .78rem; }
.hero-points i { margin-right: 7px; color: var(--purple); font-style: normal; }

.hero-art { position: relative; min-height: 445px; display: grid; place-items: center; isolation: isolate; }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(194,166,255,.14); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 410px; height: 280px; }
.orbit-two { width: 500px; height: 350px; border-color: rgba(194,166,255,.08); transform: rotate(38deg); }
.arcade-window { position: relative; z-index: 1; width: min(100%, 436px); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 21px; background: #1a1526; box-shadow: 0 32px 90px rgba(0,0,0,.4), 0 0 70px rgba(139,92,246,.11); transform: rotate(2deg); }
.window-topbar { height: 41px; display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); color: #9289a2; font-size: .62rem; letter-spacing: .09em; }
.window-lights { display: inline-flex; gap: 5px; }
.window-lights i { width: 6px; height: 6px; border-radius: 50%; background: #877994; }
.window-lights i:first-child { background: var(--coral); }
.window-lights i:nth-child(2) { background: #f4d779; }
.window-lights i:nth-child(3) { background: var(--lime); }
.window-address { justify-self: center; }
.window-menu { justify-self: end; letter-spacing: .1em; }
.arcade-stage { position: relative; height: 287px; overflow: hidden; background: linear-gradient(145deg, #b5a1fc 0%, #9677ee 46%, #7253cf 100%); }
.arcade-stage::before { position: absolute; inset: 0; content: ""; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.stage-sun { position: absolute; top: 37px; right: 47px; width: 133px; height: 133px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 60px rgba(216,251,125,.28); }
.stage-ground { position: absolute; right: -12%; bottom: -84px; left: -12%; height: 155px; border-radius: 50% 50% 0 0; background: #2c2241; transform: rotate(-6deg); }
.stage-ribbon { position: absolute; z-index: 1; top: 91px; left: 36px; color: #221935; font-size: 1.14rem; font-weight: 900; letter-spacing: -.06em; line-height: 1.02; transform: rotate(-7deg); }
.stage-orb { position: absolute; z-index: 2; right: 102px; bottom: 27px; display: flex; width: 86px; height: 86px; align-items: center; justify-content: center; border: 7px solid rgba(255,255,255,.83); border-radius: 50%; color: #241a38; background: var(--coral); box-shadow: 0 10px 20px rgba(0,0,0,.23); font-size: .76rem; font-weight: 900; transform: rotate(-11deg); }
.stage-orb b { position: absolute; right: -16px; bottom: 1px; display: grid; width: 31px; height: 31px; place-items: center; border: 3px solid #2c2241; border-radius: 50%; color: var(--lime); background: #2c2241; font-size: 1rem; }
.stage-star { position: absolute; z-index: 1; color: #fff; }
.star-a { top: 47px; left: 51%; font-size: 1.8rem; }
.star-b { right: 35px; bottom: 40px; color: var(--lime); font-size: 1.3rem; }
.star-c { bottom: 42px; left: 38px; color: #e1d5ff; font-size: 2rem; }
.window-footer { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px 18px; }
.window-footer > div { display: grid; gap: 4px; }
.footer-overline { color: #a7a0b3; font-size: .57rem; font-weight: 750; letter-spacing: .11em; }
.window-footer strong { font-size: .92rem; letter-spacing: -.025em; }
.footer-counter { color: var(--lime); font-size: .8rem; font-weight: 750; }
.footer-counter span { color: #71677e; }
.float-tag, .float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: #e7e1ef; background: rgba(27,22,39,.88); box-shadow: 0 16px 38px rgba(0,0,0,.2); backdrop-filter: blur(14px); font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.tag-left { top: 59px; left: -5px; transform: rotate(-7deg); }
.tag-right { top: 93px; right: -5px; transform: rotate(7deg); }
.tag-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; font-size: 1rem; }
.tag-icon-sun { color: #2d233f; background: var(--lime); }
.tag-icon-wave { color: #23182f; background: var(--coral); font-size: 1.25rem; }
.float-card { right: 1px; bottom: 21px; padding: 12px 15px; font-size: .7rem; font-weight: 620; letter-spacing: 0; line-height: 1.4; transform: rotate(4deg); }
.card-spark { color: var(--lime); font-size: 1.15rem; }

.promise-strip { border-block: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.017); }
.promise-inner { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #aaa1b7; font-size: .64rem; font-weight: 750; letter-spacing: .14em; }
.promise-inner b { color: var(--purple); font-size: .8rem; }

.section { padding-block: 108px; }
.section-heading, .library-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.section-heading h2, .library-heading h2 { margin: 11px 0 0; font-size: clamp(2.3rem, 4vw, 3.55rem); font-weight: 730; letter-spacing: -.07em; line-height: 1; }
.section-aside { margin: 0 0 3px; color: var(--muted-2); font-size: .9rem; line-height: 1.7; text-align: right; }
.shelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.shelf-card { position: relative; min-height: 290px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 20px 21px; border: 0; border-radius: 18px; color: #1a1520; text-align: left; cursor: pointer; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; }
.shelf-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.shelf-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.shelf-lime { background: var(--lime); }
.shelf-lilac { background: #c3b3fb; }
.shelf-coral { background: var(--coral); }
.shelf-blue { background: var(--blue); }
.shelf-number { position: relative; z-index: 1; color: rgba(26,21,32,.67); font-size: .6rem; letter-spacing: .12em; }
.shelf-title { position: relative; z-index: 1; margin-top: auto; font-size: 2rem; font-weight: 820; letter-spacing: -.075em; line-height: .96; }
.shelf-caption { position: relative; z-index: 1; margin-top: 10px; color: rgba(26,21,32,.7); font-size: .78rem; }
.shelf-arrow { position: absolute; right: 17px; bottom: 17px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(26,21,32,.2); border-radius: 50%; font-size: 1.1rem; transition: transform .2s ease; }
.shelf-card:hover .shelf-arrow { transform: translate(2px,-2px); }
.shelf-art { position: absolute; top: 62px; right: 20px; display: grid; width: 97px; height: 97px; place-items: center; border: 1px solid rgba(25,20,32,.22); border-radius: 50%; font-size: 2rem; transform: rotate(-11deg); }
.shelf-art-ring::after { position: absolute; inset: 10px; content: ""; border: 1px dashed rgba(25,20,32,.36); border-radius: 50%; }
.shelf-art-blocks { display: grid; width: 100px; height: 100px; grid-template-columns: repeat(2, 29px); grid-template-rows: repeat(2, 29px); align-content: center; justify-content: center; gap: 5px; border: 0; border-radius: 0; transform: rotate(-13deg); }
.shelf-art-blocks i { border: 1px solid rgba(25,20,32,.3); border-radius: 7px; background: rgba(255,255,255,.42); }
.shelf-art-blocks i:first-child, .shelf-art-blocks i:last-child { background: rgba(25,20,32,.18); }
.shelf-art-bolt { border: 0; color: rgba(25,20,32,.82); font-size: 6.9rem; font-weight: 300; transform: rotate(7deg); }
.shelf-art-twins { width: 116px; height: 72px; border: 0; border-radius: 0; transform: rotate(-12deg); }
.shelf-art-twins i { display: grid; width: 54px; height: 54px; place-items: center; border: 5px solid rgba(25,20,32,.86); border-radius: 50%; color: rgba(25,20,32,.86); background: rgba(255,255,255,.4); font-size: 1.3rem; }
.shelf-art-twins i + i { margin-left: -15px; color: #fff; background: #6355bf; }

.library-section { padding-block: 94px 106px; border-block: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01)); }
.library-heading { align-items: center; margin-bottom: 28px; }
.library-heading h2 span { color: var(--purple); }
.library-status { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .76rem; }
.library-status .status-dot { width: 7px; height: 7px; }
.library-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.search-box { display: flex; width: min(290px, 100%); min-height: 45px; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.search-box svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #938ba2; stroke-width: 1.8; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .8rem; }
.search-box input::placeholder { color: #81798e; }
.search-box kbd { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: #8e8799; font-size: .69rem; }
.filter-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.filter-chip { min-height: 37px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.filter-chip:hover { color: var(--ink); border-color: var(--line); }
.filter-chip.is-active { color: #211a2a; background: var(--lime); font-weight: 750; }
.game-grid { min-height: 286px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: stretch; gap: 14px; }
.empty-state { grid-column: 1 / -1; display: grid; min-height: 286px; align-content: center; justify-items: center; padding: 34px 20px; border: 1px dashed rgba(255,255,255,.17); border-radius: 20px; background: radial-gradient(ellipse at 50% 0%, rgba(167,139,250,.08), transparent 55%); text-align: center; }
.empty-illustration { position: relative; display: grid; width: 62px; height: 62px; place-items: center; margin-bottom: 16px; border: 1px solid rgba(167,139,250,.38); border-radius: 18px; color: var(--purple); background: rgba(167,139,250,.09); font-size: 2rem; transform: rotate(-7deg); }
.empty-illustration b { position: absolute; top: -11px; right: -13px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--bg); border-radius: 50%; color: #17121e; background: var(--lime); font-size: .8rem; transform: rotate(7deg); }
.empty-illustration i { position: absolute; bottom: -9px; left: -11px; color: var(--coral); font-size: 1.2rem; font-style: normal; }
.empty-label { color: var(--purple); font-size: .59rem; }
.empty-state h3 { margin: 9px 0; font-size: 1.5rem; font-weight: 750; letter-spacing: -.05em; line-height: 1.1; }
.empty-state p:last-child { max-width: 390px; margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #191523; }
.game-cover { position: relative; display: grid; min-height: 150px; place-items: center; overflow: hidden; background: linear-gradient(140deg, #51418c, #a78bfa); }
.game-cover img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.game-cover span { position: relative; color: rgba(255,255,255,.85); font-size: 2.6rem; }
.game-card-body { padding: 15px; }
.game-card-category { color: var(--lime); font-size: .61rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.game-card h3 { margin: 7px 0 5px; font-size: 1rem; letter-spacing: -.03em; }
.game-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: .75rem; }
.game-card-play { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; margin-top: 13px; padding: 0 12px; border: 1px solid rgba(215,255,112,.27); border-radius: 10px; color: var(--lime); background: rgba(215,255,112,.07); cursor: pointer; font: inherit; font-size: .76rem; font-weight: 750; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.game-card-play:hover { transform: translateY(-1px); border-color: rgba(215,255,112,.55); background: rgba(215,255,112,.13); }
.catalog-pagination { display: grid; justify-items: center; gap: 9px; margin-top: 24px; }
.catalog-pagination[hidden], .load-more-button[hidden] { display: none; }
.catalog-note { margin: 0; color: var(--muted-2); font-size: .72rem; text-align: center; }
.load-more-button { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: rgba(255,255,255,.04); cursor: pointer; font: inherit; font-size: .79rem; font-weight: 700; }
.load-more-button:hover:not(:disabled) { border-color: rgba(167,139,250,.55); background: rgba(167,139,250,.12); }
.load-more-button:disabled { opacity: .6; cursor: wait; }
.library-footnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: var(--muted-2); font-size: .72rem; text-align: center; }
.library-footnote span { color: var(--purple); }

.game-player-dialog { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: var(--ink); background: #100d18; }
.game-player-dialog::backdrop { background: rgba(5,4,9,.84); backdrop-filter: blur(8px); }
.game-player-shell { display: grid; grid-template-rows: auto minmax(0,1fr); }
.game-player-header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; }
.game-player-category { margin: 0 0 4px; color: var(--lime); font-size: .59rem; font-weight: 800; letter-spacing: .13em; }
.game-player-header h2 { margin: 0; font-size: 1.13rem; letter-spacing: -.035em; }
.game-player-close { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: rgba(255,255,255,.04); cursor: pointer; font: inherit; font-size: .75rem; }
.game-player-close span { font-size: 1.2rem; line-height: 1; }
.game-player-frame { display: block; width: 100%; height: min(68vh, 700px); border: 0; background: #050408; }

.how-section { padding-bottom: 115px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { position: relative; min-height: 204px; padding: 25px 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.step-index { position: absolute; top: 23px; right: 22px; color: #746d81; font-size: .67rem; font-weight: 750; letter-spacing: .11em; }
.step-icon { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 13px; font-size: 1.35rem; font-weight: 800; }
.step-icon-purple { color: #221a32; background: var(--purple); }
.step-icon-lime { color: #222716; background: var(--lime); }
.step-icon-coral { color: #2a1d21; background: var(--coral); }
.step-card h3 { margin: 24px 0 5px; font-size: 1.05rem; letter-spacing: -.035em; }
.step-card p { max-width: 250px; margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.65; }

.closing-band { position: relative; overflow: hidden; padding-block: 88px 92px; background: var(--purple); color: #1b1529; text-align: center; }
.closing-band::before, .closing-band::after { position: absolute; width: 310px; height: 310px; border: 1px solid rgba(34,24,52,.17); border-radius: 50%; content: ""; }
.closing-band::before { top: -188px; left: 8%; box-shadow: 0 0 0 32px rgba(34,24,52,.04), 0 0 0 64px rgba(34,24,52,.035); }
.closing-band::after { right: 3%; bottom: -235px; width: 380px; height: 380px; box-shadow: 0 0 0 35px rgba(34,24,52,.04), 0 0 0 70px rgba(34,24,52,.035); }
.closing-inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.closing-mark { display: grid; width: 70px; height: 70px; place-items: center; margin-bottom: 23px; border: 1px solid rgba(30,20,45,.2); border-radius: 22px; background: rgba(255,255,255,.18); }
.closing-mark img { width: 48px; height: 48px; }
.closing-band .section-kicker { color: rgba(25,19,38,.67); }
.closing-band h2 { margin: 12px 0 26px; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.08em; line-height: .96; }
.closing-band h2 span { color: #f9f5ff; }
.button-light { color: #241c31; background: #f7f1ff; }
.button-light:hover { background: #fff; }

.site-footer { background: #0c0a12; }
.footer-inner { min-height: 89px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand .brand-mark { width: 31px; height: 31px; }
.footer-brand .brand-word { font-size: 1.08rem; }
.footer-inner p, .footer-copyright { margin: 0; color: var(--muted-2); font-size: .74rem; }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr .84fr; gap: 15px; min-height: 590px; }
  .hero-art { transform: scale(.9); transform-origin: center right; }
  .main-nav { gap: 20px; }
  .shelf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shelf-card { min-height: 260px; }
  .library-tools { align-items: flex-start; flex-direction: column; }
  .filter-list { justify-content: flex-start; }
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 650px) {
  .shell { width: min(var(--max-width), calc(100% - 36px)); }
  .header-inner { min-height: 70px; gap: 10px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-word { font-size: 1.17rem; }
  .main-nav { display: none; }
  .header-cta { gap: 8px; padding: 9px 11px; font-size: .74rem; }
  .hero { grid-template-columns: 1fr; gap: 0; padding-block: 59px 48px; }
  .hero h1 { margin-top: 23px; font-size: clamp(3rem, 13vw, 4.5rem); }
  .hero-lede { max-width: 510px; font-size: .98rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 25px; }
  .hero-note { margin: 0; }
  .hero-points { gap: 12px 18px; margin-top: 29px; font-size: .71rem; }
  .hero-art { min-height: 338px; margin: 8px -5px 0; transform: none; }
  .arcade-window { width: min(91%, 420px); }
  .arcade-stage { height: 218px; }
  .stage-sun { top: 28px; right: 32px; width: 104px; height: 104px; }
  .stage-ribbon { top: 73px; left: 27px; font-size: .98rem; }
  .stage-orb { right: 75px; bottom: 18px; width: 74px; height: 74px; }
  .tag-left { top: 31px; left: -3px; }
  .tag-right { top: 55px; right: -2px; }
  .float-tag { gap: 6px; padding: 7px 9px; font-size: .52rem; }
  .tag-icon { width: 22px; height: 22px; }
  .float-card { right: 0; bottom: -1px; font-size: .62rem; }
  .orbit-one { width: 310px; height: 215px; }
  .orbit-two { width: 390px; height: 275px; }
  .promise-inner { min-height: 55px; gap: 12px; overflow: hidden; white-space: nowrap; font-size: .56rem; letter-spacing: .11em; }
  .promise-inner span:nth-of-type(3), .promise-inner b:nth-of-type(2) { display: none; }
  .section { padding-block: 75px; }
  .section-heading, .library-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 23px; }
  .section-heading h2, .library-heading h2 { font-size: 2.55rem; }
  .section-aside { margin: 0; text-align: left; font-size: .8rem; }
  .shelf-grid { gap: 10px; }
  .shelf-card { min-height: 222px; padding: 15px; border-radius: 15px; }
  .shelf-number { font-size: .52rem; letter-spacing: .1em; }
  .shelf-title { font-size: 1.67rem; }
  .shelf-caption { max-width: 80%; font-size: .68rem; }
  .shelf-art { top: 48px; right: 13px; width: 72px; height: 72px; font-size: 1.5rem; }
  .shelf-art-blocks { width: 74px; height: 74px; grid-template-columns: repeat(2, 23px); grid-template-rows: repeat(2, 23px); gap: 4px; }
  .shelf-art-bolt { font-size: 5rem; }
  .shelf-art-twins { width: 83px; height: 58px; }
  .shelf-art-twins i { width: 43px; height: 43px; }
  .shelf-arrow { right: 11px; bottom: 11px; width: 29px; height: 29px; }
  .library-section { padding-block: 73px; }
  .library-heading { align-items: flex-start; }
  .library-status { font-size: .69rem; }
  .search-box { width: 100%; }
  .filter-list { gap: 4px; }
  .filter-chip { min-height: 34px; padding-inline: 10px; font-size: .68rem; }
  .game-grid { min-height: 265px; grid-template-columns: 1fr; }
  .empty-state { min-height: 265px; padding-inline: 17px; }
  .empty-state h3 { font-size: 1.35rem; }
  .library-footnote { align-items: flex-start; font-size: .67rem; line-height: 1.6; }
  .game-player-dialog { width: calc(100vw - 14px); max-height: calc(100vh - 14px); border-radius: 14px; }
  .game-player-frame { height: min(62vh, 600px); }
  .how-section { padding-bottom: 76px; }
  .steps-grid { grid-template-columns: 1fr; gap: 10px; }
  .step-card { min-height: 154px; padding: 19px; }
  .step-card h3 { margin-top: 16px; }
  .closing-band { padding-block: 72px; }
  .footer-inner { min-height: 120px; flex-wrap: wrap; justify-content: flex-start; gap: 7px 20px; padding-block: 22px; }
  .footer-inner p { order: 3; width: 100%; }
  .footer-copyright { margin-left: auto; }
}

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