/* ── Shapey Wave runs its own theme: near-black ground, yellow UI trim,
        rainbow shapes drifting out of the middle distance toward you ── */
body:has(.swv) {
  --sw-ground: #0b0b0d; --sw-panel: #131317; --sw-line: #22232a; --sw-line-hot: #2f313b;
  --sw-yellow: #f2c744; --sw-yellow-hot: #ffd960;
  --sw-red: #ff5a5a; --sw-orange: #ff9f45; --sw-green: #4fd97a;
  --sw-cyan: #45c8e8; --sw-blue: #5b8cff; --sw-violet: #b57bff;
  --footer-from: #131317; --footer-to: #0b0b0d;
  /* the shared game parts and buttons in site.css */
  --game-line: var(--sw-line); --game-line-hot: var(--sw-line-hot); --game-panel: var(--sw-panel);
  --game-accent: var(--sw-yellow); --game-accent-alt: var(--sw-cyan);
  --btn-from: var(--sw-yellow); --btn-to: var(--sw-yellow); --btn-hover: var(--sw-yellow-hot);
  --btn-ink: #14140f; --btn-glow-rgb: 242 199 68;
  background: #0b0b0d; }
.swv { background: var(--sw-ground); --shell: 1240px; --gutter: 40px; }
@media (max-width: 560px) { .swv { --gutter: 20px; } }
body:has(.swv) ::selection { background: rgba(242,199,68,0.3); }

/* ── ambient: outlined shapes rushing out of the centre, the way a wave arrives ── */
.swv-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* each shape's colour, size, place and timing arrive as custom properties from index.php */
.swv-field i { position: absolute; display: block; margin: -6px 0 0 -6px;
  left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--c);
  border: 1px solid currentColor; opacity: 0.85;
  animation: sw-drift 16s ease-in-out infinite alternate;
  animation-duration: var(--t); animation-delay: var(--o); }
.swv-field i.tri, .swv-field i.hex { border: 0; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.swv-field i.cir { border-radius: 50%; }
.swv-field i.tri { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L95 95 H5 Z' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 L95 95 H5 Z' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); }
.swv-field i.hex { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M27 4 H73 L98 50 L73 96 H27 L2 50 Z' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M27 4 H73 L98 50 L73 96 H27 L2 50 Z' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); }
@keyframes sw-drift {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(var(--dx),var(--dy),0) rotate(var(--rot)); }
}
@media (prefers-reduced-motion: reduce) { .swv-field i { animation: none; } }

.swv-hero, .swv-band { position: relative; z-index: 2; }
.swv-band { padding: var(--space-6) 0; border-bottom: 1px solid var(--sw-line); }
.swv-band:last-of-type { border-bottom: 0; }
/* the roster runs straight on into the arsenal, so no rule between them */
.swv-band--open { border-bottom: 0; }
.swv-band--panel { background: rgba(19,19,23,0.9); }
/* the details band sits on a solid panel with extra room above and below */
.swv-band--solid { background: var(--sw-panel); border-top: 1px solid var(--sw-line-hot);
  padding-block: calc(30px + clamp(22px,2.6vw,32px)); }

/* ── hero ── */
.swv-hero { overflow: hidden; border-bottom: 1px solid var(--sw-line); }
.swv-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(11,11,13,0.15) 0%, rgba(11,11,13,0.6) 58%, rgba(11,11,13,0.8) 100%); }
.swv-hero__in { position: relative; z-index: 2; padding-top: clamp(96px,11vw,150px); padding-bottom: 40px; }
.swv-lockup { display: flex; align-items: center; justify-content: center;
  gap: clamp(16px,2vw,30px); margin-bottom: clamp(12px,1.6vw,20px);
  font-size: clamp(34px,5.4vw,76px); }
.swv-logo { flex: none; display: block; width: 2em; height: 2em; border-radius: 50%;
  background: var(--sw-panel);
  box-shadow: 0 0 0 1px var(--sw-line-hot), 0 0 30px rgba(91,140,255,0.28); }
.swv-title { display: flex; flex-direction: column; margin: 0; text-align: left;
  font-size: 1em; line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; }
@media (max-width: 560px) { .swv-lockup { flex-direction: column; gap: 16px; } .swv-title { text-align: center; align-items: center; } }
.swv-title em { font-style: normal; color: var(--sw-yellow); }
.swv-sub { max-width: 60ch; margin: 0 auto; text-align: center;
  font-size: clamp(15px,1.5vw,19px); line-height: var(--lh-copy); color: rgb(var(--text-rgb) / 0.74); text-wrap: pretty; }

/* The showcase build runs in the shared .game-video frame in place of a trailer.
   pointer-events:none keeps it decorative: a Godot canvas swallows wheel and click
   events, and in a hero that traps the page scroll. PLAY NOW underneath is the way
   into the real game. */
.game-video--showcase iframe { background: #000; pointer-events: none; }
/* Click-to-preview. The showcase is ~25MB, so the iframe is built on click:
   giving it a src here would pull the whole build on every page view. */
.swv-preview { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 20px; border: 0;
  background: radial-gradient(ellipse at center,#16161b,#0b0b0d 72%);
  font: inherit; color: var(--sw-yellow); cursor: pointer; text-align: center;
  transition: background var(--dur-fast) ease; }
.swv-preview:is(:hover, :focus-visible) { background: radial-gradient(ellipse at center,#1d1d24,#0b0b0d 72%); }
.swv-preview:focus-visible { outline: 2px solid var(--sw-yellow); outline-offset: -5px; }
.swv-preview__logo { width: clamp(56px,7vw,88px); height: auto; opacity: 0.92; }
.swv-preview__ring { display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid var(--sw-yellow);
  background: rgba(242,199,68,0.10); color: var(--sw-yellow);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) ease; }
.swv-preview:is(:hover, :focus-visible) .swv-preview__ring { transform: scale(1.08); background: rgba(242,199,68,0.20); }
.swv-preview__label { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--sw-yellow); }
.swv-preview__note { font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); }
.swv-preview.is-loading { cursor: progress; }
.swv-preview.is-loading .swv-preview__ring { animation: sw-pulse 1.1s ease-in-out infinite; }
@keyframes sw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .swv-preview.is-loading .swv-preview__ring { animation: none; } }

/* ── section headings ── */
.swv-h { margin-bottom: 34px; }
.swv-h h2 { font-size: var(--fs-heading-3); text-transform: uppercase; color: #fff; }
.swv-h p { margin-top: 10px; max-width: 70ch; font-size: 15px; line-height: var(--lh-copy);
  color: rgb(var(--text-rgb) / 0.62); text-wrap: pretty; }

/* how it plays */
.swv-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
@media (max-width: 820px) { .swv-steps { grid-template-columns: 1fr; } }
.swv-step { position: relative; border: 1px solid var(--sw-line); background: var(--sw-panel);
  padding: 20px var(--space-5) 18px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.swv-step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); }
.swv-step:hover { border-color: var(--c); transform: translateY(-2px); }
.swv-step h3 { font-size: clamp(17px,1.8vw,20px); text-transform: uppercase; color: #fff; }
.swv-step p { font-size: 14px; line-height: var(--lh-copy); color: rgb(var(--text-rgb) / 0.68); margin: 0; text-wrap: pretty; }

/* ── roster ── */
.swv-roster { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.swv-en { position: relative; border: 1px solid var(--sw-line); background: var(--sw-panel);
  padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.swv-en::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); }
.swv-en:hover { border-color: var(--c); transform: translateY(-2px); }
.swv-en__art { display: flex; align-items: center; justify-content: center; height: 132px;
  margin: 0 -20px; border-bottom: 1px solid var(--sw-line);
  background: radial-gradient(60% 70% at 50% 50%, color-mix(in oklab, var(--c) 16%, transparent) 0%, transparent 72%); }
.swv-en__sprite { display: block; width: 86px; height: 86px; background: var(--c);
  -webkit-mask-image: var(--sprite); mask-image: var(--sprite);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--c) 55%, transparent));
  transition: transform 420ms var(--ease); }
.swv-en:hover .swv-en__sprite { transform: scale(1.09) rotate(-4deg); }
.swv-en header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* names and paths are text, so the colour is lifted toward white: the darkest
   enemy colours (Wobbler, Durgler, Healer, Multi Shot) fail contrast at full strength */
.swv-en h3 { font-size: 18px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, #fff); }
.swv-en__w { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgb(var(--text-rgb) / 0.55); }
.swv-en p { font-size: 13px; line-height: var(--lh-copy); color: rgb(var(--text-rgb) / 0.66); margin: 0; flex: 1; text-wrap: pretty; }
.swv-en dl { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 0;
  border-top: 1px solid var(--sw-line); padding-top: 12px; }
.swv-en dt { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgb(var(--text-rgb) / 0.55); margin-bottom: 3px; }
.swv-en dd { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
/* The path an enemy takes runs the full width under the four figures: it is a word rather than
   a number, and a fifth 1fr column would squeeze the other four to fit it. */
.swv-en__path { grid-column: 1 / -1; }
.swv-en__path dd { font-size: 13px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--c) 60%, #fff); }

/* ── upgrades ── */
.swv-ups { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.swv-up { position: relative; border: 1px solid var(--sw-line); background: var(--sw-panel);
  padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 11px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.swv-up::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--c); }
.swv-up:hover { border-color: var(--c); transform: translateY(-2px); }
.swv-up header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.swv-up h3 { font-size: 18px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, #fff); }
.swv-up__tab { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgb(var(--text-rgb) / 0.55); }
.swv-up p { font-size: 13px; line-height: var(--lh-copy); color: rgb(var(--text-rgb) / 0.66); margin: 0; flex: 1; text-wrap: pretty; }