:root {
  color-scheme: dark;
  --wall: #0b0e24;
  --wall-2: #151a3d;
  --star: #fef3a3;
  --ui: #ffe9c2;
  --pink: #ff9ab1;
  --wood: #8a5a2b;
  --wood-hi: #b07a3e;
  --wood-lo: #4e3014;
  --pix: 'Press Start 2P', monospace;
  --sans: 'Noto Sans JP', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  color: var(--ui);
  font-family: var(--sans);
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 154, 177, 0.16), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
  background-color: var(--wall);
  padding: 0 16px 70px;
  overflow-x: hidden;
}

/* ---------- marquee ---------- */
header.marquee { text-align: center; padding: 54px 0 18px; position: relative; }
.marquee .mark { width: 64px; height: 64px; margin: 0 auto 18px; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.marquee h1 {
  font-family: var(--pix);
  font-size: clamp(30px, 8vw, 66px);
  letter-spacing: 3px;
  color: #fff6d8;
  text-shadow: 0 3px 0 #ff9ab1, 0 6px 0 #c2456a, 0 9px 0 #6a1d3a, 0 14px 22px rgba(0,0,0,.6);
}
.marquee .sub {
  display: inline-block; margin-top: 22px; padding: 9px 16px 8px;
  font-family: var(--pix); font-size: clamp(10px, 2.4vw, 14px); letter-spacing: 3px;
  color: #12152e; background: var(--star); border-radius: 4px;
  box-shadow: 0 4px 0 #c19a40;
}
.marquee .how {
  margin-top: 22px; font-family: var(--pix); font-size: clamp(8px, 2vw, 11px); line-height: 1.8;
  color: rgba(255, 233, 194, .75);
}
.marquee .how .blink { color: var(--star); animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
body.touch .how .mouse, body:not(.touch) .how .tap { display: none; }

#sound-btn {
  position: fixed; top: 12px; right: 12px; z-index: 30;
  font-family: var(--pix); font-size: 9px; letter-spacing: 1px;
  padding: 9px 10px 8px; border-radius: 6px; cursor: pointer;
  color: #12152e; background: var(--ui); border: 0; box-shadow: 0 3px 0 #9b7c4a;
}
#sound-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9b7c4a; }
#sound-hint {
  position: fixed; left: 50%; bottom: 18px; z-index: 30; transform: translate(-50%, 140%);
  font-family: var(--pix); font-size: 10px; line-height: 1.6; text-align: center;
  padding: 12px 16px; border-radius: 8px; color: #12152e; background: var(--star);
  box-shadow: 0 6px 0 #c19a40, 0 12px 30px rgba(0,0,0,.5);
  transition: transform .25s ease; pointer-events: none; max-width: calc(100vw - 32px);
}
#sound-hint.show { transform: translate(-50%, 0); }

/* ---------- aisles ---------- */
main { max-width: 1280px; margin: 0 auto; }
.aisle { margin-top: 58px; }
.aisle h2 {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--pix); font-size: clamp(13px, 3vw, 18px); letter-spacing: 2px;
  color: var(--star); text-shadow: 0 0 12px rgba(254, 243, 163, .45);
  margin: 0 0 26px 4px;
}
.aisle h2 .native { font-family: var(--sans); font-weight: 900; font-size: 1.25em; letter-spacing: 1px; color: #fff; text-shadow: 0 0 14px rgba(255,154,177,.6); }
.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 44px 40px;
}

/* ---------- the box ---------- */
.box {
  --ry: 26deg; --depth: 30px;
  display: block; position: relative; text-decoration: none; color: inherit;
  perspective: 1100px; outline: none; -webkit-tap-highlight-color: transparent;
}
.case {
  position: relative; transform-style: preserve-3d;
  transform: rotateY(var(--ry)) translateZ(0);
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.2);
  margin-left: var(--depth);
}
.box:nth-child(even) .case { --ry: 22deg; }
.box.on .case, .box:focus-visible .case { transform: rotateY(2deg) translateY(-14px) translateZ(46px); }
.box.inserting .case { transform: rotateY(0) translateY(-40px) translateZ(120px); transition-duration: .5s; }

.spine {
  position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--depth)); width: var(--depth);
  transform-origin: right center; transform: rotateY(-90deg);
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 40%), var(--accent);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0;
  overflow: hidden; border-radius: 2px 0 0 2px;
}
.spine .sp-brand { font-family: var(--pix); font-size: 7px; color: #12152e; background: var(--star); padding: 3px 2px; border-radius: 2px; }
.spine .sp-title { writing-mode: vertical-rl; font-family: var(--pix); font-size: 9px; letter-spacing: 2px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.5); white-space: nowrap; }

.front {
  container-type: inline-size;
  position: relative; overflow: hidden; border-radius: 3px;
  background: #0d0d10;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 18px 22px 30px rgba(0,0,0,.55);
}
.front::after { /* plastic shrink-wrap sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.08) 100%);
  transition: opacity .3s;
}
.box.on .front::after { opacity: .35; }

.band {
  display: flex; align-items: center; gap: 2.4cqw;
  height: 10cqw; padding: 0 3.6cqw;
  background: linear-gradient(180deg, #1b1b20, #08080a);
  border-bottom: 1.4cqw solid var(--accent);
}
.band .brand { font-family: var(--pix); font-size: 3.4cqw; letter-spacing: .3cqw; color: #fff; font-style: italic; }
.band .dots { display: inline-flex; gap: .9cqw; }
.band .dots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #ff5a6e; }
.band .dots i:nth-child(2) { background: var(--star); }
.band .dots i:nth-child(3) { background: #3ef0ff; }
.band .dots i:nth-child(4) { background: #7dff6a; }
.band .sys { margin-left: auto; font-family: var(--pix); font-size: 2.3cqw; color: #9a9aa8; letter-spacing: .2cqw; }

.art { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #000; }
.art img, .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art img { object-fit: cover; transition: transform 6s ease-out, opacity .35s; }
.box.on .art img { transform: scale(1.08); opacity: 0; }
.art canvas { opacity: 0; transition: opacity .35s; }
.box.on .art canvas { opacity: 1; }
.art::before { /* scrim so the logo reads on any art */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 44%; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0));
}
.art::after { /* CRT scanlines while the demo runs */
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  transition: opacity .35s;
}
.box.on .art::after { opacity: 1; }
.demo-tag {
  position: absolute; z-index: 5; right: 3cqw; bottom: 3cqw;
  font-family: var(--pix); font-size: 3cqw; color: #fff; background: #e63b2e; padding: 1.2cqw 1.6cqw 1cqw;
  border-radius: 1cqw; opacity: 0; transform: scale(.6); transition: .25s;
}
.box.on .demo-tag { opacity: 1; transform: none; animation: blink 1s steps(2, start) infinite .3s; }

/* logo block */
.logo {
  position: absolute; z-index: 3; left: 0; right: 0; top: 3.2cqw;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 4cqw; pointer-events: none;
  transition: transform .35s ease;
}
.box.on .logo { transform: translateY(-1cqw) scale(.94); }
.logo .kicker { font-family: var(--pix); font-size: 2.8cqw; letter-spacing: .4cqw; color: #fff; text-shadow: 0 .5cqw 0 rgba(0,0,0,.7); }
.logo b { display: block; font-weight: 400; line-height: 1; }
.logo em {
  margin-top: 2cqw; font-style: normal; font-family: var(--pix); font-size: 2.9cqw; letter-spacing: .3cqw;
  color: #12152e; background: var(--star); padding: 1.2cqw 2.4cqw 1cqw; border-radius: 1cqw;
  box-shadow: 0 .8cqw 0 rgba(0,0,0,.45);
}

.foot {
  display: flex; align-items: center; gap: 2.4cqw;
  height: 13cqw; padding: 0 3.4cqw;
  background: linear-gradient(180deg, #121216, #050506);
  border-top: .8cqw solid #2a2a33;
}
.seal {
  flex: none; width: 11cqw; height: 11cqw; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #ffe9a0, #d4a52a 60%, #8a6414);
  color: #3a2808; font-family: var(--pix); font-size: 1.2cqw; line-height: 1.25; overflow: hidden;
  box-shadow: 0 0 0 .5cqw #2a2108;
}
.seal b { display: block; font-size: 3.2cqw; line-height: 1; font-weight: 400; }
.foot .genre { font-family: var(--pix); font-size: 2.6cqw; line-height: 1.5; color: #e9e6f5; letter-spacing: .2cqw; }
.foot .lang {
  margin-left: auto; font-weight: 900; font-size: 3.4cqw; color: #12152e; background: #fff; padding: .8cqw 1.8cqw; border-radius: 1cqw;
}

.sticker {
  position: absolute; z-index: 8; right: -10px; top: 13%;
  width: 56px; height: 56px; display: grid; place-items: center;
  font-family: var(--pix); font-size: 9px; color: #fff; transform: rotate(14deg) translateZ(2px);
  background: #e63b2e;
  clip-path: polygon(50% 0, 61% 14%, 79% 9%, 82% 27%, 98% 35%, 89% 50%, 98% 65%, 82% 73%, 79% 91%, 61% 86%, 50% 100%, 39% 86%, 21% 91%, 18% 73%, 2% 65%, 11% 50%, 2% 35%, 18% 27%, 21% 9%, 39% 14%);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: rotate(14deg) translateZ(2px) scale(1.1); } }

/* shelf plank + price tag */
.plank {
  position: relative; height: 18px; margin: 6px -20px 0;
  background: linear-gradient(180deg, var(--wood-hi) 0 3px, var(--wood) 3px 11px, var(--wood-lo) 11px);
  box-shadow: 0 10px 18px rgba(0,0,0,.45);
}
.tag {
  position: relative; margin: -2px 6px 0; padding: 12px 12px 11px;
  background: #fff8e8; color: #2a2438; border-radius: 0 0 6px 6px;
  box-shadow: 0 5px 0 rgba(0,0,0,.3);
}
.tag::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.tag p { font-size: 12.5px; line-height: 1.5; }
.tag .press { display: inline-block; margin-top: 9px; font-family: var(--pix); font-size: 9px; color: #2e7d4f; letter-spacing: 1px; }
.box.on .tag .press { color: #e63b2e; animation: blink .8s steps(2, start) infinite; }

/* coming-soon ghost cartridge */
.ghost { pointer-events: none; }
.ghost .front { background: transparent; border: 3px dashed rgba(255, 233, 194, .35); box-shadow: none; }
.ghost .art { background: rgba(255,255,255,.03); display: grid; place-items: center; }
.ghost .art::before, .ghost .front::after { display: none; }
.ghost .soon { font-family: var(--pix); font-size: 3.6cqw; line-height: 2; text-align: center; color: rgba(255, 233, 194, .6); }
.ghost .spine { background: rgba(255, 233, 194, .1); }

/* boot flash after picking a game */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: #fff; opacity: 0; transition: opacity .45s ease .1s;
}
body.booting::after { opacity: 1; }

footer { text-align: center; margin-top: 70px; font-family: var(--pix); font-size: 10px; line-height: 2; color: rgba(255, 233, 194, .5); }
footer a { color: inherit; }

/* ---------- per-game logos ---------- */
.l-yokocho .kanji { font-family: 'Dela Gothic One', var(--sans); font-size: 21cqw; line-height: 1; color: #fff4e0; -webkit-text-stroke: 1.6cqw #b0281a; paint-order: stroke fill; text-shadow: 0 1.6cqw 0 #2a0e08; }
.l-yokocho b { margin-top: 1cqw; font-family: 'Bungee', var(--pix); font-size: 8.6cqw; color: #ffd34d; text-shadow: .6cqw .6cqw 0 #7a1e12, 0 0 3cqw rgba(255, 122, 176, .8); }

.l-sukiyaki .kicker { font-family: var(--sans); font-weight: 900; font-size: 4.2cqw; letter-spacing: .6cqw; }
.l-sukiyaki b { margin-top: 1.2cqw; font-family: 'Dela Gothic One', var(--sans); font-size: 14cqw; letter-spacing: .4cqw; color: #fff; -webkit-text-stroke: 1.4cqw #e63b2e; paint-order: stroke fill; text-shadow: 0 1.4cqw 0 #1a1f3a; }

.l-lapiazza b { font-family: 'Abril Fatface', serif; font-size: 16cqw; color: #fff4dc; -webkit-text-stroke: 1cqw #8a3a24; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #5a2414, 0 0 4cqw rgba(0,0,0,.4); }
.l-lapiazza .kicker { margin-bottom: 1cqw; }

.l-bellafigura b { font-family: 'Pacifico', cursive; font-size: 13cqw; line-height: 1.25; color: #fff1d0; -webkit-text-stroke: 1.2cqw #1f3f28; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #0e1f13; }

.l-volare b { font-family: 'Lobster', cursive; font-size: 19cqw; color: #fff; -webkit-text-stroke: 1.2cqw #0f4fa8; paint-order: stroke fill; text-shadow: 0 1.4cqw 0 #082a5c, 0 0 5cqw rgba(255, 243, 160, .6); }
.l-volare .kicker { text-shadow: 0 .5cqw 0 #082a5c; }

.l-vocabquest b {
  font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 11.4cqw; line-height: 1.05;
  background: linear-gradient(180deg, #fff7c2 0%, #ffd34d 45%, #b8741a 55%, #ffe58a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .5cqw 0 #2a1238) drop-shadow(0 0 .3cqw #2a1238) drop-shadow(0 0 3cqw rgba(255, 211, 77, .45));
}

.l-wordrunway b { font-family: 'Fredoka', var(--sans); font-weight: 700; font-size: 14.4cqw; line-height: 1; color: #ff4f9e; -webkit-text-stroke: 1.6cqw #fff; paint-order: stroke fill; text-shadow: 0 1.4cqw 0 #b02a6a, 0 0 4cqw rgba(255,255,255,.8); }

.l-wordrunner .kicker { font-family: 'Audiowide', var(--pix); font-size: 4cqw; color: #3ef0ff; letter-spacing: 1.4cqw; text-shadow: 0 0 2cqw #3ef0ff; }
.l-wordrunner b {
  font-family: 'Audiowide', var(--pix); font-size: 12.4cqw; letter-spacing: .4cqw;
  background: linear-gradient(180deg, #ffffff 0%, #c8d6ff 45%, #3a2a8a 50%, #ff7ad0 75%, #ffd34d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .25cqw #12062e) drop-shadow(0 .7cqw 0 #12062e) drop-shadow(0 0 3cqw rgba(255, 77, 141, .8));
}

.l-sixthgrademath .kicker { color: #ffd34d; }
.l-sixthgrademath b { font-family: 'Bangers', cursive; font-size: 19cqw; letter-spacing: .8cqw; color: #ffd34d; -webkit-text-stroke: 1.4cqw #3a1670; paint-order: stroke fill; text-shadow: 0 1.6cqw 0 #1a0838, 0 0 5cqw rgba(255, 211, 77, .5); transform: rotate(-4deg); }

/* ---------- phones ---------- */
@media (max-width: 520px) {
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .box { --depth: 16px; --ry: 20deg; }
  .box:nth-child(even) .case { --ry: 16deg; }
  .plank { margin: 4px -9px 0; height: 12px; }
  .tag { margin: -2px 2px 0; padding: 9px 8px 8px; }
  .tag p { font-size: 11.5px; }
  .tag .press { font-size: 8px; }
  .sticker { width: 44px; height: 44px; font-size: 7px; right: -6px; }
  .spine .sp-title { font-size: 7px; }
  .spine .sp-brand { display: none; }
  #sound-btn { position: absolute; }
}
@media (prefers-reduced-motion: reduce) {
  .case, .art img, .logo { transition: none; }
  .marquee .mark, .sticker, .how .blink, .box.on .demo-tag, .box.on .tag .press { animation: none; }
}


/* ---------- patina: shelf-worn, sun-faded store stock ---------- */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .3  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --scratch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='400'><g stroke='white' stroke-linecap='round' fill='none' opacity='.5'><path d='M20 60 l90 40' stroke-width='.6'/><path d='M200 30 l60 -14' stroke-width='.5'/><path d='M40 300 l120 -30' stroke-width='.7'/><path d='M230 250 l40 60' stroke-width='.5'/><path d='M120 180 l70 8' stroke-width='.4'/><path d='M10 370 l50 -12' stroke-width='.6'/><path d='M260 120 l-30 70' stroke-width='.4'/></g></svg>");
}
/* faded inks: a little sun-bleached, warmer, softer contrast */
.art img { filter: saturate(.78) sepia(.24) contrast(.94) brightness(.97); }
.logo { filter: saturate(.85) sepia(.12); }
.band { background: linear-gradient(180deg, #2a2724, #141210); }
.foot { background: linear-gradient(180deg, #1f1c19, #0e0c0a); }
/* the wear layer sits on top of everything on the front */
.front::before {
  content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(255,246,220,.55), rgba(255,246,220,0) 7%),
    radial-gradient(circle at 100% 0, rgba(255,246,220,.4), rgba(255,246,220,0) 6%),
    radial-gradient(circle at 0 100%, rgba(255,246,220,.45), rgba(255,246,220,0) 6%),
    radial-gradient(circle at 100% 100%, rgba(255,246,220,.55), rgba(255,246,220,0) 8%),
    var(--scratch) center / 100% 100% no-repeat,
    var(--grain);
  mix-blend-mode: screen; opacity: .72;
  box-shadow: inset 0 0 0 1px rgba(255,240,210,.18), inset 0 0 26px rgba(120,80,20,.45);
  transition: opacity .35s;
}
.front { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 18px 24px 34px rgba(0,0,0,.6); }
.box.on .front::before { opacity: .22; }
/* hand-placed: no two boxes sit perfectly straight */
.box:nth-child(3n+1) .case { rotate: z -0.8deg; }
.box:nth-child(3n+2) .case { rotate: z 0.6deg; }
.box:nth-child(4n+3) .case { rotate: z -0.3deg; }
.box.on .case { rotate: none; }
/* price-gun sticker */
.price {
  position: absolute; z-index: 8; left: 4cqw; bottom: 15.5cqw;
  padding: 1.4cqw 2.6cqw 1.2cqw; transform: rotate(-7deg);
  font-family: var(--pix); font-size: 3.4cqw; line-height: 1.2; color: #c2271c;
  background: #fff4d6; border-radius: .8cqw;
  box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.45);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 88% 100%, 0 100%);
}
.price small { display: block; font-size: 1.9cqw; color: #6a5a40; letter-spacing: .2cqw; }
.price::after { /* tiny barcode */
  content: ''; display: block; margin-top: .8cqw; height: 2.2cqw;
  background: repeating-linear-gradient(90deg, #2a2420 0 .4cqw, transparent .4cqw .7cqw, #2a2420 .7cqw .9cqw, transparent .9cqw 1.5cqw);
}
.box.on .price { opacity: 0; transition: opacity .2s; }
/* aged shelf + yellowed tags */
.plank { background: linear-gradient(180deg, #a57444 0 3px, #7a4f26 3px 12px, #452a12 12px), var(--grain); background-blend-mode: multiply; }
.tag { background: #f4e6c4; background-image: var(--grain); background-blend-mode: multiply; }
.tag p { color: #3a3024; }
/* store pegboard behind the shelves */
body {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 154, 177, 0.14), transparent 70%),
    radial-gradient(circle, rgba(0,0,0,.45) 2px, transparent 2.6px) 0 0 / 26px 26px,
    linear-gradient(180deg, #17182e 0%, #1d1f38 100%);
  background-color: #17182e;
}
@media (max-width: 640px) {
  .row { grid-template-columns: minmax(0, 340px); justify-content: center; gap: 40px; }
  .box { --depth: 20px; --ry: 18deg; }
  .box:nth-child(even) .case { --ry: 14deg; }
  .plank { margin: 4px -16px 0; height: 14px; }
  .tag p { font-size: 13px; }
  .tag .press { font-size: 9px; }
}