:root {
  --arcade-ink: #14171d;
  --arcade-paper: #fbfcf7;
  --arcade-muted: #617070;
  --arcade-green: #42d66f;
  --arcade-coral: #ff6b5b;
  --arcade-gold: #ffd04c;
  --arcade-blue: #3d7eff;
}

.arcade-page {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 208, 76, 0.2), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(61, 126, 255, 0.2), transparent 26%),
    linear-gradient(135deg, #101820 0%, #123027 52%, #17181f 100%);
  color: var(--arcade-ink);
  min-height: 100vh;
}

.arcade-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 3vw, 34px);
}

.arcade-brand,
.arcade-home {
  align-items: center;
  color: #fff;
  display: inline-flex;
  gap: 12px;
  text-decoration: none;
}

.arcade-logo {
  align-items: center;
  background: linear-gradient(135deg, #fff2a5, var(--arcade-gold));
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  color: #172017;
  display: inline-flex;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  width: 52px;
}

.arcade-brand small,
.arcade-stat span {
  color: rgba(255, 255, 255, 0.68);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.arcade-brand strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.arcade-home {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  font-weight: 900;
  min-height: 44px;
  padding: 0 16px;
}

.site-nav-link {
  min-height: 44px;
}

.ad-slot {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 243, 235, 0.92));
  border: 2px dashed rgba(97, 112, 103, 0.5);
  border-radius: 8px;
  color: var(--muted, var(--arcade-muted));
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 92px;
  text-align: center;
}

.ad-slot span {
  color: var(--ink, var(--arcade-ink));
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.ad-slot small {
  font-size: 12px;
  font-weight: 800;
}

.home-view.hidden ~ .home-only {
  display: none;
}

.ad-slot-wide {
  margin: 26px auto;
  max-width: 970px;
  width: min(100%, 970px);
}

.arcade-ad {
  margin-bottom: 18px;
  margin-top: 0;
}

.site-footer {
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1480px;
  padding: 16px clamp(16px, 3vw, 34px) 28px;
}

.site-footer span {
  font-weight: 900;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  text-decoration: none;
}

.arcade-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(250px, 0.72fr) minmax(360px, 1.5fr) minmax(250px, 0.72fr);
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 clamp(16px, 3vw, 34px) 30px;
}

.arcade-panel,
.arcade-stage {
  background: rgba(251, 252, 247, 0.96);
  border: 4px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(2, 8, 10, 0.42);
}

.arcade-panel {
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.arcade-title p {
  color: var(--arcade-coral);
  font-size: 12px;
  font-weight: 900;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.arcade-title h1,
.arcade-title h2 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 0.96;
  margin: 0;
}

.arcade-title h2 {
  font-size: 30px;
}

.arcade-stage {
  overflow: hidden;
  padding: 14px;
  position: relative;
}

.arcade-canvas-wrap {
  background: #0c1218;
  border-radius: 8px;
  min-height: 560px;
  overflow: hidden;
  position: relative;
}

.arcade-canvas-wrap canvas {
  display: block;
  height: 100%;
  min-height: 560px;
  width: 100%;
}

.arcade-score-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arcade-stat {
  background: #14202a;
  border-radius: 8px;
  color: #fff;
  min-height: 72px;
  padding: 12px;
}

.arcade-stat strong {
  color: var(--arcade-gold);
  display: block;
  font-size: 24px;
  margin-top: 6px;
}

.arcade-button,
.arcade-choice,
.arcade-pad button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0;
}

.arcade-button {
  background: linear-gradient(180deg, #ffe88a, var(--arcade-gold) 58%, #e7a821);
  box-shadow: 0 7px 0 #b98319;
  color: #1d2018;
  min-height: 46px;
  padding: 0 16px;
}

.arcade-button.secondary,
.arcade-choice {
  background: linear-gradient(180deg, #fff, #e9efe8);
  box-shadow: none;
  color: #243024;
}

.arcade-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arcade-choice {
  min-height: 42px;
}

.arcade-choice.active {
  background: linear-gradient(180deg, #57e081, #22b653);
  color: #102017;
}

.arcade-message {
  background: #fff;
  border: 2px solid #dde7df;
  border-radius: 8px;
  padding: 14px;
}

.arcade-message strong {
  display: block;
  font-size: 18px;
}

.arcade-message p {
  color: var(--arcade-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  margin: 6px 0 0;
}

.snake-art,
.memory-art,
.meteoro-art {
  background: #101820;
}

.snake-art {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 208, 76, 0.22), transparent 24%),
    linear-gradient(90deg, rgba(114, 217, 255, 0.12) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(114, 217, 255, 0.12) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(145deg, #10202a, #111821);
}

.snake-grid-art,
.snake-body-art,
.snake-head-art,
.snake-food-art,
.memory-orbit,
.memory-card-art,
.meteor-lane-art,
.meteor-starfield-art,
.meteor-rock-art,
.meteor-ship-art,
.meteor-boost-art {
  position: absolute;
}

.snake-grid-art {
  border: 3px solid rgba(114, 217, 255, 0.3);
  border-radius: 8px;
  inset: 38px;
}

.snake-body-art,
.snake-head-art {
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(66, 214, 111, 0.5);
  height: 42px;
  width: 42px;
}

.snake-body-art {
  background: linear-gradient(180deg, #49df73, #1d9f55);
}

.snake-head-art {
  background:
    radial-gradient(circle at 35% 38%, #101820 0 4px, transparent 5px),
    radial-gradient(circle at 65% 38%, #101820 0 4px, transparent 5px),
    linear-gradient(180deg, #74f093, #2ab95d);
  left: 58%;
  top: 42%;
}

.snake-body-art.s1 { left: 48%; top: 42%; }
.snake-body-art.s2 { left: 38%; top: 42%; }
.snake-body-art.s3 { left: 38%; top: 54%; }
.snake-body-art.s4 { left: 28%; top: 54%; }

.snake-food-art {
  background: #ffd04c;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 208, 76, 0.72);
  height: 34px;
  right: 22%;
  top: 25%;
  width: 34px;
}

.memory-art {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 208, 76, 0.28), transparent 20%),
    radial-gradient(circle at 74% 62%, rgba(66, 214, 111, 0.18), transparent 26%),
    linear-gradient(150deg, #3b276f, #111821 72%);
}

.memory-orbit {
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  height: 310px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  width: 310px;
}

.memory-card-art {
  align-items: center;
  background: linear-gradient(180deg, #fff, #e7efe8);
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28);
  color: #172017;
  display: flex;
  font-size: 28px;
  font-weight: 900;
  height: 82px;
  justify-content: center;
  width: 66px;
}

.memory-card-art.c1 { left: 18%; top: 18%; transform: rotate(-12deg); }
.memory-card-art.c2 { right: 24%; top: 15%; transform: rotate(10deg); }
.memory-card-art.c3 { left: 34%; top: 45%; transform: rotate(8deg); }
.memory-card-art.c4 { right: 16%; top: 48%; transform: rotate(-8deg); }
.memory-card-art.c5 { left: 20%; bottom: 16%; transform: rotate(14deg); }
.memory-card-art.c6 { right: 34%; bottom: 14%; transform: rotate(-14deg); }

.meteoro-art {
  background:
    radial-gradient(circle at 16% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 64% 20%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 46%, #fff 0 2px, transparent 3px),
    linear-gradient(180deg, #091221, #102b2b);
}

.meteor-lane-art {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border-left: 4px dashed rgba(255, 208, 76, 0.6);
  border-right: 4px dashed rgba(255, 208, 76, 0.6);
  bottom: 0;
  left: 24%;
  top: 0;
  width: 52%;
}

.meteor-starfield-art {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 2px, transparent 3px) 0 0 / 48px 62px,
    radial-gradient(circle, rgba(114, 217, 255, 0.8) 0 2px, transparent 3px) 18px 24px / 66px 54px;
  inset: 0;
  opacity: 0.62;
}

.meteor-rock-art {
  background: linear-gradient(135deg, #8c7475, #44383d);
  border-radius: 46% 54% 42% 58%;
  box-shadow: 0 18px 24px rgba(0, 0, 0, 0.28);
  height: 58px;
  width: 66px;
}

.meteor-rock-art.r1 { left: 20%; top: 18%; transform: rotate(18deg); }
.meteor-rock-art.r2 { right: 18%; top: 34%; transform: rotate(-22deg); }
.meteor-rock-art.r3 { left: 32%; bottom: 22%; transform: rotate(8deg); }

.meteor-ship-art {
  border-bottom: 82px solid #72d9ff;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  bottom: 58px;
  filter: drop-shadow(0 0 20px rgba(114, 217, 255, 0.58));
  left: 50%;
  transform: translateX(-50%);
}

.meteor-boost-art {
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 72px solid #ffd04c;
  bottom: 8px;
  filter: drop-shadow(0 0 22px rgba(255, 208, 76, 0.72));
  left: 50%;
  transform: translateX(-50%);
}

.snake-tile .tile-action {
  background: linear-gradient(180deg, #62ee82, #23b759);
}

.memory-tile .tile-action {
  background: linear-gradient(180deg, #93b7ff, #3d7eff);
  color: #fff;
}

.meteoro-tile .tile-action {
  background: linear-gradient(180deg, #ff9587, #ff6b5b);
  color: #fff;
}

.arcade-pad {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 54px);
  justify-content: center;
}

.arcade-pad button {
  background: #14202a;
  color: #fff;
  font-size: 24px;
  height: 48px;
}

.arcade-pad .up {
  grid-column: 2;
}

.arcade-pad .left {
  grid-column: 1;
}

.arcade-pad .down {
  grid-column: 2;
}

.arcade-pad .right {
  grid-column: 3;
}

.memory-stage {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
    #111820;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--memory-cols, 4), minmax(74px, 1fr));
  min-height: 560px;
  padding: clamp(12px, 2vw, 22px);
}

.memory-card {
  aspect-ratio: 1 / 1.22;
  background: linear-gradient(145deg, #28313f, #101720);
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: clamp(26px, 4vw, 50px);
  font-weight: 900;
  min-height: 82px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.memory-card::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 208, 76, 0.75) 0 18%, transparent 19%),
    linear-gradient(135deg, #3d7eff, #0fdd8b);
  border-radius: 6px;
  content: "";
  inset: 8px;
  position: absolute;
}

.memory-card span {
  align-items: center;
  background: linear-gradient(180deg, #fff, #e9efe8);
  border-radius: 6px;
  color: #16202a;
  display: flex;
  inset: 8px;
  justify-content: center;
  opacity: 0;
  position: absolute;
}

.memory-card.open,
.memory-card.matched {
  border-color: var(--arcade-gold);
  transform: rotateY(180deg);
}

.memory-card.open span,
.memory-card.matched span {
  opacity: 1;
  transform: rotateY(180deg);
}

.memory-card.matched span {
  background: linear-gradient(180deg, #75ea98, #2ec35f);
}

.meteoro-wrap {
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 208, 76, 0.16), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(114, 217, 255, 0.18), transparent 20%),
    #080d18;
}

@media (max-width: 1040px) {
  .arcade-layout {
    grid-template-columns: 1fr;
  }

  .arcade-canvas-wrap,
  .arcade-canvas-wrap canvas,
  .memory-stage {
    min-height: min(640px, 76vh);
  }
}

@media (max-width: 620px) {
  .arcade-header {
    align-items: stretch;
    flex-direction: column;
  }

  .arcade-home {
    justify-content: center;
  }

  .arcade-score-grid,
  .arcade-row {
    grid-template-columns: 1fr;
  }

  .memory-stage {
    gap: 8px;
    grid-template-columns: repeat(var(--memory-cols-mobile, 3), minmax(0, 1fr));
    min-height: 420px;
  }
}