/* ==========================================================================
   WIZKET — arcade-page.css · the Arcade hub (arcade.html). Prefix: arc-
   Game hub: two live games (each card shows an animated SVG scene from it) + two coming soon.
   ========================================================================== */
.arc {
  min-height: 100svh;
  padding: calc(var(--nav-top) + var(--nav-h) + clamp(3rem, 8vh, 5rem)) var(--gutter) clamp(4rem, 10vh, 6rem);
  max-width: 1240px; margin: 0 auto;
  background: var(--bg); color: var(--text);
  animation: arc-in 0.7s var(--ease-out) both;
}
@keyframes arc-in { from { opacity: 0; transform: scale(1.03); } }

.arc__bar {
  display: inline-flex; align-items: center; gap: 0.75rem; margin: 0 0 1.4rem;
  font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.arc__rule { width: 2.25rem; height: 1px; background: currentColor; opacity: 0.5; }

.arc__title {
  margin: 0; font: 400 clamp(3.6rem, 11vw, 10rem)/0.88 var(--font-display); text-transform: uppercase;
}
.arc__line { color: transparent; -webkit-text-stroke: max(1.5px, 0.012em) var(--text); }
.arc__title i { font-style: normal; color: var(--accent); }
.arc__lede { max-width: 34rem; margin: 1.4rem 0 0; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; color: var(--muted); }

.arc__grid {
  list-style: none; padding: 0; margin: clamp(2.6rem, 6vh, 4rem) 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
}

.arc-card {
  position: relative; padding: 14px 14px 20px; border-radius: 20px;
  background: linear-gradient(#1a2024, #0e1214); color: #f2f1ed;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 30px 50px -30px rgba(0,0,0,0.5);
  transition: transform 0.5s var(--ease-out);
}
.arc-card:hover { transform: translateY(-4px); }
.arc-card__no {
  position: absolute; z-index: 1; top: 24px; left: 26px;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; color: var(--accent);
}
.arc-card__screen {
  display: block; aspect-ratio: 4 / 3; border-radius: 12px;
  background:
    repeating-linear-gradient(rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 55%, rgba(253,95,7,0.22), transparent 60%),
    #07090a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.arc-card.is-locked .arc-card__screen { position: relative; }
.arc-card.is-locked .arc-card__screen::after {
  content: "?"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 4rem/1 var(--font-display); color: rgba(242,241,237,0.18);
}
.arc-card__name { margin: 16px 6px 4px; font: 400 1.7rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.arc-card__meta { margin: 0 6px; font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #8d9295; }

.arc__back { margin: clamp(2.4rem, 6vh, 3.6rem) 0 0; }
.arc__back a { font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 3px; }
.arc__back a:hover { color: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .arc { animation: none; } .arc-card { transition: none; } }

/* ---------- prize strip: coupon codes ---------- */
.arc-prize {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap;
  margin: clamp(2rem, 5vh, 3rem) 0 0; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.8rem);
  border-radius: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line2);
  border-left: 4px solid var(--accent);
}
.arc-prize__tag {
  margin: 0; padding: 6px 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent);
  font: 600 10px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase;
}
.arc-prize__body { flex: 1 1 18rem; }
.arc-prize__h { margin: 0; font: 400 clamp(1.4rem, 2.6vw, 2rem)/1 var(--font-display); text-transform: uppercase; }
.arc-prize__p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.arc-prize__code {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px;
  border: 1.5px dashed var(--line2);
  font: 700 1rem/1 ui-monospace, "Courier New", monospace; letter-spacing: 0.12em;
}
.arc-prize__code span { filter: blur(3.5px); }
.arc-prize__code i {
  font: 600 9px/1 var(--font-body); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent);
}

/* ---------- a playable game card ---------- */
.arc-card__link { display: block; color: inherit; text-decoration: none; border-radius: inherit; }
.arc-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.arc-card.is-live { box-shadow: inset 0 0 0 1px rgba(253,95,7,0.4), 0 30px 50px -30px rgba(0,0,0,0.5); }
.arc-card.is-live .arc-card__meta { color: var(--accent); }
/* ---------- game card art: an inline SVG scene from each game ---------- */
.arc-card__screen--art { position: relative; overflow: hidden; background: #07090a; }
.arc-art { display: block; width: 100%; height: 100%; transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out); }
.arc-card.is-live:hover .arc-art { transform: scale(1.04); filter: brightness(1.12); }
.arc-art__t { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em; }
.arc-art * { transform-box: fill-box; }
.arc-tw { transform-origin: center; animation: arc-tw 2.4s ease-in-out infinite; }
.arc-blink { transform-origin: center; animation: arc-blink 4.2s infinite; }
@keyframes arc-tw { 0%, 100% { opacity: 0.25; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes arc-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

/* Wiz Miner: the claw swings from the winch, a bug wanders the tunnel */
.arc-m-swing { transform-box: view-box; transform-origin: 202px 66px; animation: arc-swing 2.6s ease-in-out infinite alternate; }
.arc-m-swing * { transform-box: view-box; }
@keyframes arc-swing { from { transform: rotate(-34deg); } to { transform: rotate(34deg); } }
.arc-m-bug { transform-origin: center; animation: arc-crawl 7s linear infinite; }
@keyframes arc-crawl {
  0% { transform: translateX(0) scaleX(1); } 48% { transform: translateX(120px) scaleX(1); }
  50% { transform: translateX(120px) scaleX(-1); } 98% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); }
}

/* Bug Siege: turrets track, shots fly, the laser flickers, the road flows to the site */
.arc-s-flow { animation: arc-flow 1.2s linear infinite; }
@keyframes arc-flow { to { stroke-dashoffset: -14; } }
.arc-s-aim { transform-origin: 0 50%; }
.arc-s-aim--a { animation: arc-aim-a 3s ease-in-out infinite alternate; }
.arc-s-aim--b { animation: arc-aim-b 2.4s ease-in-out infinite alternate; }
.arc-s-aim--c { animation: arc-aim-c 3.4s ease-in-out infinite alternate; }
@keyframes arc-aim-a { from { transform: rotate(-60deg); } to { transform: rotate(10deg); } }
@keyframes arc-aim-b { from { transform: rotate(10deg); } to { transform: rotate(60deg); } }
@keyframes arc-aim-c { from { transform: rotate(40deg); } to { transform: rotate(160deg); } }
.arc-s-shot { animation: arc-shot 1.6s ease-in infinite; }
@keyframes arc-shot { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 60% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 61%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.arc-s-laser { animation: arc-laser 1.8s steps(1) infinite; }
.arc-s-hit { transform-origin: center; animation: arc-hit 1.8s ease-out infinite; }
@keyframes arc-laser { 0%, 45% { opacity: 0; } 50%, 70% { opacity: 1; } 75% { opacity: 0.3; } 80%, 100% { opacity: 0; } }
@keyframes arc-hit { 0%, 48% { opacity: 0; transform: scale(0.3); } 55% { opacity: 0.9; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(1.8); } }
.arc-s-shield { transform-origin: center; animation: arc-shield 2.6s ease-in-out infinite; }
@keyframes arc-shield { 0%, 100% { opacity: 0.3; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1); } }
.arc-s-live { animation: arc-live 1.4s ease-in-out infinite; }
@keyframes arc-live { 50% { opacity: 0.35; } }

/* coming soon: a flickering "?" and a blinking INSERT COIN */
.arc-card.is-locked .arc-card__screen { overflow: hidden; }
.arc-card.is-locked .arc-card__screen::after { animation: arc-flicker 5s steps(1) infinite; }
.arc-card.is-locked .arc-card__screen::before {
  content: "Insert coin"; position: absolute; left: 0; right: 0; bottom: 14%; text-align: center;
  font: 700 10px/1 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
  animation: arc-coin 1.6s steps(1) infinite;
}
.arc-card.is-locked:nth-child(4) .arc-card__screen::after { animation-delay: -2.3s; }
@keyframes arc-flicker { 0%, 100% { color: rgba(242,241,237,0.18); } 40% { color: rgba(253,95,7,0.55); text-shadow: 0 0 18px rgba(253,95,7,0.6); } 42% { color: rgba(242,241,237,0.1); } 44% { color: rgba(253,95,7,0.55); text-shadow: 0 0 18px rgba(253,95,7,0.6); } 60% { color: rgba(242,241,237,0.18); text-shadow: none; } }
@keyframes arc-coin { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {   /* only when the page turns FULL_MOTION off (arcade.html) */
  html:not(.wz-full-motion) .arc-art *, html:not(.wz-full-motion) .arc-card.is-locked .arc-card__screen::after, html:not(.wz-full-motion) .arc-card.is-locked .arc-card__screen::before { animation: none !important; }
  html:not(.wz-full-motion) .arc-m-swing { transform: rotate(-18deg); }
  html:not(.wz-full-motion) .arc-s-shot, html:not(.wz-full-motion) .arc-s-hit { opacity: 0; }
}