/* Carcade store: it looks like a game hub. Chunky tiles with a pressable bottom edge, an
   extruded logo, stickers, a slow glowing background. Sized for the 1920×720 center display. */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("fonts/bungee-latin.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root {
  --bg: #0a0b1d;
  --bg-2: #0e1220;
  --tile-top: #2b3466;
  --tile-bottom: #1a2045;
  --tile-edge: #0b0e24;
  --panel: rgba(20, 25, 42, .78);
  --line: rgba(255, 255, 255, .1);
  --ink: #f2f4ff;
  --ink-2: #a9b1d6;
  --accent: #7fb8ff;
  --gold: #ffd166;
  --go: #2ad37f;
  --go-dark: #0f7a45;
  --pink: #ff5c8a;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bungee", "Manrope", system-ui, sans-serif;
  --vh: 100vh;
  color-scheme: dark;
}
/* On phones 100vh includes the browser's address bar; 100dvh is the visible height. */
@supports (height: 100dvh) { :root { --vh: 100dvh; } }

/* The app box. All sizes below use --app-w / --app-h, so they stay right when the box is turned. */
:root { --app-w: 100vw; --app-h: var(--vh); }
.app { position: fixed; left: 0; top: 0; width: var(--app-w); height: var(--app-h); overflow: hidden; }
/* Forced landscape: in portrait, turn the whole app (store and running game) by 90°. */
@media (orientation: portrait) {
  :root { --app-w: var(--vh); --app-h: 100vw; }
  .app { transform-origin: 0 0; transform: translateX(100vw) rotate(90deg); }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% -20%, #2a2f6e 0%, transparent 60%), linear-gradient(180deg, #121433 0%, var(--bg) 70%);
  color: var(--ink); font: 700 18px/1.35 var(--font);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---- Background: big soft color glows that drift slowly (calm in a moving car).
   Radial gradients, not filter: blur, so weak head-unit GPUs only move finished layers. ---- */
.glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glow i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; animation: drift 38s ease-in-out infinite alternate; }
.glow i:nth-child(1) { left: -20vmax; top: -32vmax; background: radial-gradient(circle, rgba(75, 91, 255, .34), rgba(75, 91, 255, 0) 65%); }
.glow i:nth-child(2) { right: -25vmax; top: 5vmax; background: radial-gradient(circle, rgba(255, 79, 154, .24), rgba(255, 79, 154, 0) 65%); animation-duration: 46s; }
.glow i:nth-child(3) { left: 25vmax; bottom: -42vmax; background: radial-gradient(circle, rgba(35, 211, 160, .2), rgba(35, 211, 160, 0) 65%); animation-duration: 54s; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.12); } }

/* ---- Store ---- */
.store { position: relative; height: 100%; display: flex; flex-direction: column; }
.topbar { position: relative; z-index: 2; flex: 0 0 auto; height: 104px; display: flex; align-items: center; gap: 16px; padding: 0 32px; }
.logo { position: relative; margin: 0; font: 400 46px/1 var(--display); letter-spacing: .02em; transform: rotate(-2deg); }
.logo .ol { position: absolute; inset: 0; color: #120a24; -webkit-text-stroke: .16em #120a24; text-shadow: 0 .1em 0 #5a1d4a, 0 .22em .35em rgba(0, 0, 0, .55); }
.logo .fg {
  position: relative; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #ffe58f 0%, #ffb547 30%, #ff6fa6 60%, #9f8bff 85%, #6fd2ff 100%);
}
.spacer { flex: 1; }
.round-btn {
  width: 68px; height: 68px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #5d64ad, #3f4580); color: #fff;
  box-shadow: 0 6px 0 #1d2046, 0 12px 24px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .28);
  transition: transform .07s ease, box-shadow .07s ease;
}
.round-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #1d2046, inset 0 2px 0 rgba(255, 255, 255, .28); }
.round-btn svg { width: 32px; height: 32px; fill: currentColor; }
.round-btn .off, .round-btn.muted .on, .round-btn.full .on { display: none; }
.round-btn.muted .off, .round-btn.full .off { display: block; }
.topbar .round-btn + .round-btn { margin-left: 4px; }
.round-btn.muted { background: linear-gradient(180deg, #6b5a7e, #4c3f5e); box-shadow: 0 6px 0 #241c30, 0 12px 24px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .25); }

.shelf { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cards {
  /* Room around the tiles, so the featured tile's gold glow is not cut off by the scroll area. */
  flex: 1; min-height: 0; display: flex; gap: 30px; padding: 46px 36px 34px; margin-top: -38px; align-items: center; /* the row sits in the middle of the free space */
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 36px; scrollbar-width: none; touch-action: pan-x;
}
.cards::-webkit-scrollbar { display: none; }
.cards.dragging { scroll-snap-type: none; cursor: grabbing; }
.cards.dragging .tile { pointer-events: none; }

/* A tile: a chunky panel with a bottom edge it presses onto, like a game button. */
.tile {
  /* Cover height from the app height, but at most so wide that 3.5 tiles are visible: the
     half tile at the edge shows that the row scrolls (36px padding, 3 gaps of 30px). */
  --tile-w: calc((var(--app-w) - 126px) / 3.5);
  --cover-h: min(clamp(90px, calc(var(--app-h) - 372px), 380px), calc((var(--tile-w) - 24px) * 9 / 16));
  container-type: inline-size;
  --edge: var(--tile-edge);
  position: relative; flex: 0 0 auto; width: calc(var(--cover-h) * 16 / 9 + 24px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; text-align: left; border: 0;
  border-radius: 30px; background: linear-gradient(180deg, var(--tile-top), var(--tile-bottom));
  box-shadow: 0 10px 0 var(--edge), 0 26px 50px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 0 0 3px rgba(255, 255, 255, .07);
  transition: transform .08s ease, box-shadow .08s ease;
  animation: tile-in .55s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes tile-in { from { transform: translateY(40px) scale(.85); opacity: 0; } }
.tile:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--edge), 0 10px 20px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 0 0 3px rgba(255, 255, 255, .07); }
.tile.featured {
  --tile-top: #4a3a1c; --tile-bottom: #2a2112; --edge: #1a1306;
  box-shadow: 0 10px 0 var(--edge), 0 0 0 4px var(--gold), 0 0 40px rgba(255, 209, 102, .35), 0 26px 50px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .2);
}
.tile.featured:active { box-shadow: 0 2px 0 var(--edge), 0 0 0 4px var(--gold), 0 0 30px rgba(255, 209, 102, .3), inset 0 2px 0 rgba(255, 255, 255, .2); }
.cover { position: relative; width: 100%; height: var(--cover-h); border-radius: 20px; overflow: hidden; background: #0b0e1d; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stickers on the cover, like in casual games. */
.sticker {
  position: absolute; top: 14px; right: 14px; padding: 7px 14px; border-radius: 14px; transform: rotate(4deg);
  font: 400 17px/1 var(--display); letter-spacing: .03em; color: #fff;
  background: linear-gradient(180deg, #ff8fb1, var(--pink)); box-shadow: 0 4px 0 #a3244d, 0 8px 16px rgba(0, 0, 0, .35);
  animation: sticker 2.6s ease-in-out infinite;
}
.sticker.continue { color: #3a2200; background: linear-gradient(180deg, #ffe7a1, #ffb53f); box-shadow: 0 4px 0 #a35f00, 0 8px 16px rgba(0, 0, 0, .35); }
@keyframes sticker { 50% { transform: rotate(4deg) scale(1.06); } }

.tile-body { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.tile-name { font: 400 25px/1.1 var(--display); letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-desc { font-size: 18px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-foot { display: flex; align-items: center; gap: 14px; margin-top: 6px; min-height: 48px; }
.meter { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.meter svg { width: 26px; height: 26px; flex: 0 0 auto; fill: var(--gold); filter: drop-shadow(0 2px 0 #8a5a00); }
.meter .bar { flex: 1; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(180deg, #ffe58f, #ffb547); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); min-width: 14px; }
.meter .bar i.zero { min-width: 0; }
.meter b { font: 400 18px/1 var(--display); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.meter.new b { color: var(--ink-2); font-family: var(--font); font-weight: 700; font-size: 18px; }
.play {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; height: 48px; border-radius: 16px;
  font: 400 19px/1 var(--display); color: #04351c;
  background: linear-gradient(180deg, #7dffb9, var(--go)); box-shadow: 0 5px 0 var(--go-dark), inset 0 2px 0 rgba(255, 255, 255, .55);
}
.play svg { width: 18px; height: 18px; fill: currentColor; }
.tile.featured .play { animation: go-pulse 1.8s ease-in-out infinite; }
@keyframes go-pulse { 50% { transform: scale(1.06); } }

.empty {
  margin: 30px 32px; padding: 28px 32px; max-width: 760px; border-radius: 26px; font-size: 20px; color: var(--ink-2);
  background: linear-gradient(180deg, var(--tile-top), var(--tile-bottom)); box-shadow: 0 8px 0 var(--tile-edge);
}
.empty b { display: block; margin-bottom: 8px; font: 400 26px/1.1 var(--display); color: var(--ink); }

/* ---- Frame ---- */
.frame { position: absolute; inset: 0; background: #000; }
.game-slot, .game-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.platform-button {
  position: absolute; left: 12px; top: 12px; width: 64px; height: 64px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .38); background: rgba(16, 20, 32, .38);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.platform-button:active { transform: scale(.92); }
.platform-button svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.platform-menu {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 6, 12, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fade .2s ease-out;
}
@keyframes fade { from { opacity: 0; } }

/* The platform menu looks like a game menu: a solid panel with depth, chunky colored buttons
   with a darker bottom edge they press down onto, icons, and a bouncy entrance. */
.platform-panel {
  display: flex; flex-direction: column; gap: 16px; width: min(520px, 92vw); padding: 26px 28px 30px;
  border-radius: 34px; border: 2px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, #252d52 0%, #161b33 100%);
  box-shadow: 0 10px 0 #0a0d1b, 0 34px 90px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .14);
  animation: pop .42s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
.pm-head { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.pm-cover {
  width: 132px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 6px 0 #0a0d1b;
}
.pm-heading { min-width: 0; }
.pm-kicker { font-size: 34px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.pm-title { margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-btn {
  --top: #5d64ad; --bottom: #3f4580; --edge: #1d2046; --text: #fff;
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 78px; padding: 0 26px; border: 0; border-radius: 24px;
  font-size: 24px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text);
  background: linear-gradient(180deg, var(--top), var(--bottom));
  box-shadow: 0 7px 0 var(--edge), 0 14px 26px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .28);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  transition: transform .07s ease, box-shadow .07s ease, filter .15s;
}
.pm-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--edge), 0 4px 10px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .28); }
.pm-btn svg { width: 30px; height: 30px; fill: currentColor; flex: 0 0 auto; }
.pm-btn.go { --top: #7dffb9; --bottom: #2ad37f; --edge: #0f7a45; --text: #04351c; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); min-height: 92px; font-size: 30px; }
.pm-btn.go svg { width: 36px; height: 36px; }
.pm-btn.quiet { --top: #4b5274; --bottom: #343a58; --edge: #191c2e; }
.pm-btn.sound .off, .pm-btn.sound.muted .on { display: none; }
.pm-btn.sound.muted .off { display: block; }
.pm-btn.sound.muted { --top: #6b5a7e; --bottom: #4c3f5e; --edge: #241c30; }

/* ---- Small screens ----
   Short screens (older head units at 800×480, a phone held sideways): a compact header,
   no description line, a smaller footer, so a whole tile always fits. */
@media (max-height: 540px), (orientation: portrait) and (max-width: 540px) {
  .topbar { height: 76px; padding: 0 24px; }
  .logo { font-size: 34px; }
  .round-btn { width: 58px; height: 58px; }
  .round-btn svg { width: 28px; height: 28px; }
  .cards { gap: 22px; padding: 40px 28px 26px; margin-top: -34px; scroll-padding-inline: 28px; }
  .tile {
    --tile-w: calc((var(--app-w) - 94px) / 3.5); /* 3.5 tiles, 3 gaps of 22px, 28px padding */
    --cover-h: min(clamp(80px, calc(var(--app-h) - 236px), 380px), calc((var(--tile-w) - 20px) * 9 / 16));
    gap: 8px; padding: 10px 10px 12px; border-radius: 24px;
  }
  .cover { border-radius: 16px; }
  .tile-desc { display: none; }
  .tile-name { font-size: 21px; }
  .tile-foot { margin-top: 2px; min-height: 42px; gap: 10px; }
  .play { height: 44px; padding: 0 18px; font-size: 17px; }
  .sticker { top: 10px; right: 10px; font-size: 15px; padding: 6px 11px; }
  /* The pause menu: smaller buttons, no cover, so it fits in about 400 px. */
  .platform-panel { gap: 10px; padding: 18px 22px 22px; }
  .pm-cover { display: none; }
  .pm-kicker { font-size: 26px; }
  .pm-head { margin-bottom: 2px; }
  .pm-btn { min-height: 60px; font-size: 20px; }
  .pm-btn.go { min-height: 68px; font-size: 24px; }
}

/* Narrow tiles (small screens with 3 tiles side by side): a round play button, smaller text. */
@container (max-width: 340px) {
  .play { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .play svg { width: 20px; height: 20px; margin-left: 3px; }
  .play-label { display: none; }
  .tile-name { font-size: 18px; }
  .tile-desc { display: none; }
  .meter { gap: 6px; }
  .meter svg { width: 20px; height: 20px; }
  .meter .bar { height: 10px; }
  .meter b, .meter.new b { font-size: 15px; }
  .sticker { font-size: 13px; padding: 5px 9px; top: 8px; right: 8px; }
  .tile-foot { min-height: 44px; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-menu, .platform-panel, .tile, .sticker, .glow i, .tile.featured .play { animation: none; }
  .tile, .pm-btn, .round-btn { transition: none; }
}