/* Arcade pages: console-dashboard look (big tiles, layered parallax art, near-fullscreen stage).
   Pure CSS. Always dark, like a living-room screen. Per-game colors and emblems come from /arcade/games.css. */

body.arcade {
  color-scheme: dark;
  --base: #07090d; --mantle: #0d1118; --crust: #05070b;
  --surface0: #1a2030; --surface1: #2a3347; --overlay0: #6b7691;
  --text: #eef1f8; --subtext1: #c3cadb; --subtext0: #97a1b8; --hint: #8791aa;
  --accent: #7ee13a; --on-accent: #06110a; --link: #8bd5ff;
  --green: #7ee13a; --blue: #4cc9f0; --yellow: #ffd166; --peach: #ff9f43; --red: #ff6b81;
  background:
    radial-gradient(60rem 28rem at 10% -8rem, rgba(126, 225, 58, .16), transparent 65%),
    radial-gradient(50rem 26rem at 95% 0, rgba(76, 170, 255, .13), transparent 60%),
    var(--base);
}
body.arcade main { max-width: none; padding: 0 0 3.5rem; }
.wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

kbd {
  display: inline-block; padding: .12rem .55rem; border-radius: 7px;
  border: 1px solid var(--surface1); border-bottom-width: 3px; background: var(--mantle);
  font: 600 .78rem var(--mono); color: var(--text); white-space: nowrap;
}
.or { color: var(--subtext0); font-size: .8rem; margin: 0 .15rem; }

.chips { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.chips b {
  padding: .1rem .6rem; border-radius: 99px; font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------- hub hero */

.arc-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.4rem, 7vw, 5rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.arc-hero h1 {
  margin: .3rem 0 .8rem; font-size: clamp(3.2rem, 11vw, 8rem); font-weight: 800; line-height: .88; letter-spacing: -.05em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 15%, #a8f36b 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rays i { position: absolute; inset: -40% -15% -10%; z-index: -1; pointer-events: none; }
.rays .r1 { background: conic-gradient(from 198deg at 80% 118%, transparent 0 22%, rgba(126, 225, 58, .26) 27%, transparent 33%, rgba(76, 201, 240, .18) 45%, transparent 53%); }
.rays .r2 { background: conic-gradient(from 208deg at 18% 125%, transparent 0 25%, rgba(183, 148, 246, .2) 30%, transparent 37%, rgba(126, 225, 58, .14) 52%, transparent 60%); }
.rays .r3 { background: radial-gradient(40rem 14rem at 70% 0, rgba(255, 255, 255, .06), transparent 70%); }

/* ---------------------------------------------------------------------- tiles */

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); grid-auto-rows: minmax(13rem, auto); margin: 1.2rem 0 1.4rem; }
.tile {
  position: relative; isolation: isolate; overflow: hidden; display: block; min-height: 13rem;
  border-radius: 16px; color: #fff; text-decoration: none; background: var(--g1, #1a2030);
  box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.tile .art, .tile .art i { position: absolute; inset: 0; }
.tile .art { z-index: -2; }
.tile .l-bg {
  inset: -6%;
  background:
    radial-gradient(70% 90% at 82% 18%, color-mix(in srgb, var(--g2) 75%, transparent), transparent 62%),
    linear-gradient(135deg, var(--g1), color-mix(in srgb, var(--g1) 50%, #000));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.tile .l-mid {
  inset: -8%;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 22px);
  -webkit-mask-image: linear-gradient(200deg, #000 5%, transparent 70%); mask-image: linear-gradient(200deg, #000 5%, transparent 70%);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.tile .l-em {
  inset: auto -4% -10% auto; width: 74%; aspect-ratio: 1; height: auto;
  background: var(--emblem) center / contain no-repeat;
  filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .45));
  transition: translate .5s cubic-bezier(.2, .8, .2, 1), scale .5s cubic-bezier(.2, .8, .2, 1);
}
.tile.feature .l-em { width: 66%; right: 2%; bottom: -4%; }
.tile .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .12) 58%, transparent); }
.tile .info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1.1rem 1.25rem 1.2rem; }
.tile .name { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; line-height: 1; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .5); }
.tile.feature .name { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); }
.tile .tag { max-width: 24rem; color: rgba(255, 255, 255, .86); font-size: .95rem; line-height: 1.35; }
.tile .go {
  margin-top: .35rem; padding: .22rem .95rem; border-radius: 99px; background: var(--accent); color: var(--on-accent);
  font: 800 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: transform .25s, box-shadow .25s;
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .55), 0 0 0 3px var(--accent), 0 0 2.4rem color-mix(in srgb, var(--accent) 35%, transparent);
}
.tile:focus-visible { outline: none; }
.tile:hover .l-bg { transform: scale(1.1) translate(1.5%, 1.5%); }
.tile:hover .l-mid { transform: translate(-2.5%, -2%) scale(1.06); }
.tile:hover .l-em, .tile:focus-visible .l-em { translate: -5% -5%; scale: 1.1; }
.tile:hover .go { transform: translateX(.2rem); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 60%, transparent); }
.tile.ask { background: repeating-linear-gradient(135deg, var(--mantle) 0 14px, #0f141d 14px 28px); box-shadow: inset 0 0 0 2px var(--surface1); }
.tile.ask .name { font-size: 1.3rem; }
.tile.ask .go { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.tile.ask .shade { display: none; }

@media (min-width: 62rem) {
  .tiles { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 13rem; }
  .tile.feature { grid-column: span 2; grid-row: span 2; }
  .tile.ask { grid-column: span 2; }
  .tiles.mini { grid-template-columns: repeat(4, 1fr); }
}
.tiles.mini { grid-auto-rows: 11rem; }
.tiles.mini .tile { min-height: 11rem; }

/* ------------------------------------------------------------------ game page */

.play { position: relative; isolation: isolate; overflow: hidden; padding: .8rem clamp(.5rem, 2vw, 1.6rem) 0; }
.backdrop i { position: absolute; z-index: -1; pointer-events: none; }
.backdrop .b1 { inset: -10%; background: radial-gradient(60% 70% at 50% 30%, color-mix(in srgb, var(--g2) 38%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--g1) 80%, #000), var(--base) 85%); }
.backdrop .b2 { right: -8%; top: 4%; width: min(60rem, 80vw); aspect-ratio: 1; background: var(--emblem) center / contain no-repeat; opacity: .16; filter: blur(2px); }
.backdrop .b3 { inset: 0; background: radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }

.play-top { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; padding: .2rem .3rem .85rem; }
.play-top h1 { margin: 0; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.back {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .85rem .3rem .65rem; border-radius: 99px;
  color: var(--text); text-decoration: none; font: 600 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14);
}
.back::before { content: ""; width: .5rem; height: .5rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; margin-left: .25rem; }
.back:hover { background: rgba(255, 255, 255, .17); }

.stage {
  position: relative; overflow: hidden; border-radius: 18px; background: var(--crust);
  height: clamp(24rem, calc(100vh - 11.5rem), 72rem); height: clamp(24rem, calc(100dvh - 11.5rem), 72rem);
  border: 1px solid color-mix(in srgb, var(--g2) 50%, transparent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 1.6rem 4rem rgba(0, 0, 0, .6), 0 0 6rem color-mix(in srgb, var(--g2) 26%, transparent);
}
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--crust); }
.stage:focus-within { border-color: var(--g2); }
.hint {
  position: absolute; left: 50%; bottom: .9rem; translate: -50% 0; margin: 0; padding: .4rem 1rem; border-radius: 99px; max-width: 92%;
  background: rgba(0, 0, 0, .66); color: #eef1f8; font: 600 .8rem var(--mono); text-align: center; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .25s;
}
.stage:focus-within .hint { opacity: 0; }

.cue { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .8rem 0 1rem; color: var(--subtext1); text-decoration: none; font: 600 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cue:hover { color: var(--text); }
.cue i { width: .65rem; height: .65rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); rotate: 45deg; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 .4rem; } }

.details { padding-top: clamp(1.4rem, 4vw, 2.6rem); scroll-margin-top: 4rem; }

/* ------------------------------------------- scroll-driven parallax (progressive) */

@supports (animation-timeline: scroll()) {
  @keyframes drift-slow { to { transform: translateY(5rem); } }
  @keyframes drift-fast { to { transform: translateY(11rem); } }
  @keyframes drift-up { to { transform: translateY(-4rem); } }
  .rays .r1 { animation: drift-slow linear both; animation-timeline: scroll(root); animation-range: 0 60rem; }
  .rays .r2 { animation: drift-fast linear both; animation-timeline: scroll(root); animation-range: 0 60rem; }
  .backdrop .b2 { animation: drift-up linear both; animation-timeline: scroll(root); animation-range: 0 70rem; }
  .backdrop .b1 { animation: drift-slow linear both; animation-timeline: scroll(root); animation-range: 0 70rem; }
}
@supports (animation-timeline: view()) {
  @keyframes tile-em { from { transform: translateY(9%); } to { transform: translateY(-9%); } }
  @keyframes tile-mid { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
  .tile .l-em { animation: tile-em linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .tile .l-mid { animation: tile-mid linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

@media (max-width: 40rem) {
  .stage { border-radius: 12px; height: clamp(22rem, calc(100dvh - 10.5rem), 60rem); }
  .tile.feature .name { font-size: 2.1rem; }
}