/* Navoj Studios. The page is dressed as the HUD of a +1 game on ice: a deep
   blue scene, glossy panels with a navy outline and a bottom lip, white
   lettering with a navy stroke. Shape rule: panels 30px, cards 20px,
   buttons 16px, chips fully round. */

@font-face {
  font-family: "Lilita One";
  src: url("/fonts/lilita-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin.woff2") format("woff2-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --navy: #06103a;
  --sky-1: #4391ff;
  --sky-2: #1b56ea;
  --sky-3: #1240c8;
  --sky-4: #0a2288;
  --sky-5: #071558;

  --ice: #eaf6ff;
  --ice-2: #bfe0ff;
  --ice-3: #8cc8ff;
  --dim: #cfe0ff;
  --dim-2: #a9c6ff;
  --gold: #ffd84a;
  --live: #3be37c;

  --sun: linear-gradient(#ffec86, #ffcb2e 52%, #ff9d1c);
  --go: linear-gradient(#a2f76d, #44cf2c 52%, #1fa514);
  --blue: linear-gradient(#5aabff, #2a74f6 52%, #1a52e0);
  --panel: linear-gradient(#2a6ff5, #1848d6);
  --well: linear-gradient(#1238b4, #0c2794);

  --r-panel: 30px;
  --r-card: 20px;
  --r-btn: 16px;
  --nav-h: 66px;
  --gap: clamp(14px, 1.6vw, 22px);
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1280px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);

  /* z scale: scene -2, snow -1, page 0, floaters 5, nav 20, skip link 30 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* the tilted ticker band is wider than the page on purpose */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--sky-4);
  color: #fff;
  font: 700 1rem/1.5 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* The scene: a light high up, falling off to deep water. Fixed, so it costs
   one paint and every screenful has the same bright top and dark floor. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.026) 0 28px, transparent 28px 56px),
    radial-gradient(880px 560px at 50% 6%, var(--sky-1), transparent 70%),
    linear-gradient(180deg, var(--sky-2), var(--sky-3) 42%, var(--sky-4) 78%, var(--sky-5));
}

/* Snow: three sheets of dots at different sizes and speeds. Each sheet is one
   tile taller than the screen and falls exactly one tile, so the loop is
   seamless. Only transform moves. */
.snow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.snow i {
  --tile: 340px;
  --dot: 2px;
  position: absolute;
  inset: calc(var(--tile) * -1) 0 0;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle at 71% 9%, #fff 0 var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle at 43% 52%, #fff 0 var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle at 88% 64%, #fff 0 var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle at 22% 83%, #fff 0 var(--dot), transparent calc(var(--dot) + 1px)),
    radial-gradient(circle at 60% 93%, #fff 0 var(--dot), transparent calc(var(--dot) + 1px));
  background-size: var(--tile) var(--tile);
  animation: fall 15s linear infinite;
}

.snow i:nth-child(2) {
  --tile: 520px;
  --dot: 3px;
  opacity: 0.4;
  animation-duration: 24s;
}

.snow i:nth-child(3) {
  --tile: 250px;
  --dot: 1.4px;
  opacity: 0.38;
  animation-duration: 10s;
}

@keyframes fall {
  to {
    transform: translate3d(0, var(--tile), 0);
  }
}

img {
  max-width: 100%;
}

/* the attribute has to win over every display rule below */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

::selection {
  background: var(--gold);
  color: var(--navy);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 10px 14px;
  background: var(--gold);
  color: var(--navy);
  border: 3px solid var(--navy);
  border-radius: var(--r-btn);
  font-weight: 900;
  translate: 0 -200%;
}

.skip:focus-visible {
  translate: 0 0;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* ---------- lettering ---------- */

/* Game lettering: white, a navy stroke painted under the fill, and a hard
   shadow that reads as the letter's thickness. Sizes are in em so the
   outline scales with the text. */
.ink {
  font-family: "Lilita One", "Nunito", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.04;
  color: #fff;
  -webkit-text-stroke: 0.2em var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 0.1em 0 var(--navy);
}

/* Logo lettering in two stacked copies: the first is the outline and the
   extruded depth, the second carries the gradient. A gradient fill and a
   stroke cannot share one element, the stroke would eat into the fill. */
.gold {
  display: inline-grid;
  font-family: "Lilita One", "Nunito", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.96;
}

.gold > span {
  grid-area: 1 / 1;
}

.gold > span:first-child {
  color: var(--navy);
  -webkit-text-stroke: 0.17em var(--navy);
  text-shadow:
    0 0.04em 0 var(--navy),
    0 0.08em 0 var(--navy),
    0 0.12em 0 #040b2b,
    0 0.2em 0.14em rgb(0 0 30 / 0.45);
}

.gold > span:last-child {
  background: linear-gradient(#fff6b0, #ffd43b 46%, #ff9a16);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h2 {
  font-size: clamp(2rem, 4.7vw, 3.7rem);
  text-wrap: balance;
}

.sec-head {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-bottom: clamp(26px, 3.6vw, 44px);
}

.sec-sub {
  max-width: 54ch;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  color: var(--dim);
}

.js .rise {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.6s ease,
    translate 0.8s var(--out);
}

.js .rise.is-in {
  opacity: 1;
  translate: 0 0;
}

/* Four hard shadows trace the logo, turning it into a sticker. */
.sticker {
  --edge: 3px;
  filter: drop-shadow(var(--edge) 0 0 var(--navy)) drop-shadow(calc(var(--edge) * -1) 0 0 var(--navy))
    drop-shadow(0 var(--edge) 0 var(--navy)) drop-shadow(0 calc(var(--edge) * -1) 0 var(--navy));
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.6em 1.15em 0.66em;
  background: var(--sun);
  border: 3px solid var(--navy);
  border-radius: var(--r-btn);
  /* a highlight along the top, a shade along the bottom, then the lip */
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.55),
    inset 0 -5px 0 rgb(0 0 0 / 0.16),
    0 5px 0 var(--navy);
  font: 400 1.2rem/1 "Lilita One", "Nunito", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-text-stroke: 0.24em var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 0.1em 0 var(--navy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.14s var(--ease),
    box-shadow 0.14s var(--ease),
    filter 0.2s ease;
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 24;
  stroke-linejoin: round;
  paint-order: stroke;
  overflow: visible;
}

/* the Roblox mark is drawn on a 24 unit grid, the rest on 256 */
.btn svg.i24 {
  stroke-width: 2.3;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.55),
    inset 0 -5px 0 rgb(0 0 0 / 0.16),
    0 7px 0 var(--navy);
}

.btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.55),
    inset 0 -3px 0 rgb(0 0 0 / 0.16),
    0 1px 0 var(--navy);
}

.btn-go {
  background: var(--go);
}

.btn-blue {
  background: var(--blue);
}

.btn-sm {
  padding: 0.5em 0.9em 0.56em;
  font-size: 1.02rem;
  border-radius: 13px;
}

.live {
  display: inline-flex;
  align-items: center;
}

.live i {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgb(59 227 124 / 0.6);
  animation: ping 2.2s ease-out infinite;
}

@keyframes ping {
  70%,
  100% {
    box-shadow: 0 0 0 0.55em transparent;
  }
}

/* ---------- panels ---------- */

.panel {
  position: relative;
  padding: clamp(26px, 4vw, 56px);
  background: var(--panel);
  border: 4px solid var(--navy);
  border-radius: var(--r-panel);
  box-shadow:
    inset 0 4px 0 rgb(255 255 255 / 0.26),
    inset 0 -8px 0 rgb(4 12 60 / 0.26),
    0 8px 0 var(--navy),
    0 30px 44px -16px rgb(2 8 45 / 0.65);
}

/* Snow settled on the top edge: a white band with two rows of drips. */
.snowcap::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 22px;
  right: 22px;
  height: 36px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, #fff 0 13px, transparent 14px) 0 17px / 38px 16px repeat-x,
    radial-gradient(circle at 50% 0, #fff 0 9px, transparent 10px) 19px 17px / 58px 12px repeat-x,
    linear-gradient(#fff, var(--ice)) 0 0 / 100% 18px no-repeat;
  border-radius: 14px 14px 0 0;
  filter: drop-shadow(0 3px 0 var(--navy)) drop-shadow(0 -3px 0 var(--navy)) drop-shadow(3px 0 0 var(--navy))
    drop-shadow(-3px 0 0 var(--navy));
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 20;
  translate: -50% 0;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px 0 14px;
  background: linear-gradient(rgb(24 62 196 / 0.92), rgb(12 36 150 / 0.95));
  border: 3px solid var(--navy);
  border-radius: 22px;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.16),
    0 5px 0 var(--navy),
    0 18px 30px -14px rgb(2 8 45 / 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  text-decoration: none;
}

.brand img {
  --edge: 2px;
  display: block;
  transition: rotate 0.6s var(--out);
}

.brand:hover img {
  rotate: 90deg;
}

.nav-links {
  display: flex;
  gap: 6px;
}

.nav-links a {
  padding: 7px 14px 8px;
  border: 3px solid transparent;
  border-radius: 12px;
  font-size: 1.1rem;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.nav-links a:hover {
  background: rgb(255 255 255 / 0.1);
}

/* the section on screen lights its button, the way a game tab does */
.nav-links a[aria-current="true"] {
  background: var(--well);
  border-color: var(--navy);
  color: var(--gold);
  box-shadow: inset 0 3px 0 rgb(0 0 0 / 0.2);
}

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

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h) + 30px) 0 22px;
  overflow: hidden;
}

.hero-stack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.2vh, 12px);
  text-align: center;
}

.title {
  display: grid;
  justify-items: center;
  gap: 0.04em;
}

/* the lesser of a width share and a height share, so a short window scales
   the headline down instead of pushing the stats off screen */
.title-top {
  font-size: clamp(1.55rem, min(3.7vw, 5.4vh), 3.1rem);
}

.title-big {
  font-size: clamp(4.4rem, min(12vw, 15.5vh), 9rem);
}

.hero-sub {
  max-width: 64ch;
  margin-top: 2px;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  color: var(--dim);
}

/* Games frozen into blocks, adrift at the sides of the scene. */
.floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float {
  --w: 100px;
  --r: 0deg;
  position: absolute;
  width: var(--w);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ice-3);
  border: 4px solid var(--navy);
  border-radius: 24%;
  box-shadow:
    0 6px 0 var(--navy),
    0 24px 30px -10px rgb(2 8 45 / 0.6);
  rotate: var(--r);
  animation: drift var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate;
}

.float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.float::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 26% at 28% 20%, rgb(255 255 255 / 0.82) 0 58%, transparent 61%),
    linear-gradient(150deg, rgb(233 245 255 / 0.44), rgb(140 200 255 / 0.28) 60%, rgb(90 160 255 / 0.4));
}

@keyframes drift {
  to {
    translate: 0 -16px;
    rotate: calc(var(--r) + 4deg);
  }
}

.float:nth-child(1) {
  --w: 112px;
  --r: -13deg;
  left: 5.5%;
  top: 21%;
}

.float:nth-child(2) {
  --w: 78px;
  --r: 11deg;
  --t: 7s;
  --d: -2s;
  left: 14.5%;
  top: 49%;
  filter: blur(1.2px);
  opacity: 0.86;
}

.float:nth-child(3) {
  --w: 96px;
  --r: -7deg;
  --t: 5.4s;
  --d: -1s;
  left: 3.5%;
  top: 64%;
}

.float:nth-child(4) {
  --w: 92px;
  --r: 12deg;
  --t: 6.6s;
  --d: -3s;
  right: 6%;
  top: 19%;
}

.float:nth-child(5) {
  --w: 118px;
  --r: -9deg;
  --t: 5.8s;
  right: 12%;
  top: 45%;
}

.float:nth-child(6) {
  --w: 74px;
  --r: 16deg;
  --t: 7.4s;
  --d: -4s;
  right: 3.5%;
  top: 66%;
  filter: blur(1.2px);
  opacity: 0.86;
}

/* ---------- the cube ---------- */

.rig {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
}

.rig-stage {
  --s: clamp(140px, min(14.5vw, 22vh), 200px);
  position: relative;
  width: min(100%, 460px);
  /* tall enough for the card a broken cube leaves behind */
  min-height: max(calc(var(--s) * 1.6), 312px);
  display: grid;
  place-items: center;
}

/* a pool of cold light, then the turning rays a game puts behind a prize */
.rig-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 2.4);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(150 220 255 / 0.5), transparent 72%);
}

.rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 3.2);
  aspect-ratio: 1;
  margin: calc(var(--s) * -1.6) 0 0 calc(var(--s) * -1.6);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / 0.13) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 16%, transparent 76%);
  mask: radial-gradient(closest-side, #000 16%, transparent 76%);
  animation: spin 50s linear infinite;
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

.cube-btn {
  position: relative;
  width: var(--s);
  height: var(--s);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 20%;
  perspective: 1500px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  animation: bob 4.2s ease-in-out infinite alternate;
  transition: opacity 0.3s ease;
}

.cube-btn:active {
  cursor: grabbing;
}

.cube-btn:focus-visible {
  outline-offset: calc(var(--s) * 0.24);
}

@keyframes bob {
  to {
    translate: 0 -12px;
  }
}

.cube {
  --h: calc(var(--s) / 2);
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(38deg);
  will-change: transform;
}

.core {
  --h: calc(var(--s) * 0.27);
  position: absolute;
  inset: 23%;
  display: block;
  transform-style: preserve-3d;
  transition:
    transform 0.6s var(--out),
    opacity 0.4s ease 0.15s;
}

.face,
.core-face {
  position: absolute;
  inset: 0;
  display: block;
}

.f-front {
  transform: translateZ(var(--h));
}
.f-back {
  transform: rotateY(180deg) translateZ(var(--h));
}
.f-right {
  transform: rotateY(90deg) translateZ(var(--h));
}
.f-left {
  transform: rotateY(-90deg) translateZ(var(--h));
}
.f-top {
  transform: rotateX(90deg) translateZ(var(--h));
}
.f-bottom {
  transform: rotateX(-90deg) translateZ(var(--h));
}

.core-face {
  background: var(--icon, none) center / cover, var(--ice-3);
  border: 3px solid var(--navy);
  border-radius: 14%;
}

/* Back faces are culled, so the frozen game is only ever seen through the
   walls facing the viewer. --frost thins as the ice cracks. */
.face {
  --frost: 0.76;
  backface-visibility: hidden;
  border: 5px solid var(--navy);
  border-radius: 9%;
  background:
    radial-gradient(34% 22% at 27% 20%, rgb(255 255 255 / 0.95) 0 58%, transparent 61%),
    radial-gradient(11% 8% at 74% 78%, rgb(255 255 255 / 0.75) 0 58%, transparent 62%),
    linear-gradient(
      150deg,
      rgb(240 250 255 / var(--frost)),
      rgb(160 214 255 / var(--frost)) 56%,
      rgb(104 172 255 / var(--frost))
    );
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.4);
  transition:
    transform 0.75s var(--out),
    opacity 0.45s ease 0.2s;
}

.face.f-top {
  filter: brightness(1.08);
}

.face.f-left,
.face.f-back {
  filter: brightness(0.92);
}

.cube[data-crack="1"] .face {
  --frost: 0.66;
}
.cube[data-crack="2"] .face {
  --frost: 0.56;
}
.cube[data-crack="3"] .face {
  --frost: 0.44;
}

.crack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crack use {
  opacity: 0;
}

.cube[data-crack="1"] .c1,
.cube[data-crack="2"] .c1,
.cube[data-crack="2"] .c2,
.cube[data-crack="3"] use {
  opacity: 1;
}

.cube-shadow {
  position: absolute;
  top: calc(50% + var(--s) * 0.8);
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: 20px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(2 8 45 / 0.5), transparent);
  animation: shadow 4.2s ease-in-out infinite alternate;
  transition: opacity 0.4s ease;
}

@keyframes shadow {
  to {
    scale: 0.86;
    opacity: 0.7;
  }
}

/* Shattered: each wall leaves along its own normal, the game is let go. */
.rig[data-state="shattered"] .face.f-front {
  transform: translateZ(calc(var(--s) * 1.5)) rotate(22deg) scale(0.7);
}
.rig[data-state="shattered"] .face.f-back {
  transform: rotateY(180deg) translateZ(calc(var(--s) * 1.5)) rotate(-26deg) scale(0.7);
}
.rig[data-state="shattered"] .face.f-right {
  transform: rotateY(90deg) translateZ(calc(var(--s) * 1.6)) rotate(30deg) scale(0.7);
}
.rig[data-state="shattered"] .face.f-left {
  transform: rotateY(-90deg) translateZ(calc(var(--s) * 1.6)) rotate(-18deg) scale(0.7);
}
.rig[data-state="shattered"] .face.f-top {
  transform: rotateX(90deg) translateZ(calc(var(--s) * 1.7)) rotate(16deg) scale(0.7);
}
.rig[data-state="shattered"] .face.f-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--s) * 1.3)) rotate(-20deg) scale(0.7);
}

.rig[data-state="shattered"] .face {
  opacity: 0;
}

.rig[data-state="shattered"] .core {
  transform: scale(1.7);
  opacity: 0;
}

.rig[data-state="shattered"] .cube-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* stay visible while the walls fly off; refreezing has no such wait */
  transition:
    opacity 0.3s ease 0.35s,
    visibility 0s linear 0.7s;
}

.rig[data-state="shattered"] .cube-shadow {
  opacity: 0;
}

.freed {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
}

.freed-card {
  width: min(100%, 286px);
  display: grid;
  gap: 7px;
  padding: 8px 8px 10px;
  background: var(--panel);
  color: #fff;
  border: 4px solid var(--navy);
  border-radius: 22px;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.28),
    0 7px 0 var(--navy),
    0 26px 34px -14px rgb(2 8 45 / 0.7);
  text-align: left;
  text-decoration: none;
  rotate: -2deg;
  animation: pop 0.7s var(--out) both;
  transition: rotate 0.3s var(--out);
}

.freed-card:hover {
  rotate: 0deg;
}

@keyframes pop {
  from {
    opacity: 0;
    scale: 0.5;
    rotate: -14deg;
  }
}

.freed-shot {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sky-4);
  border: 3px solid var(--navy);
  border-radius: 14px;
}

.freed-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.freed-name {
  padding: 2px 4px 0;
  font-size: 1.16rem;
}

.freed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 0 4px;
}

.freed-meta {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dim);
}

.floaters {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.plus {
  position: absolute;
  translate: -50% -50%;
  font: 400 2.5rem/1 "Lilita One", sans-serif;
  color: var(--gold);
  -webkit-text-stroke: 8px var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--navy);
  white-space: nowrap;
}

.shard {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -7px 0 0 -7px;
  background: var(--ice);
  border: 2.5px solid var(--navy);
  border-radius: 4px;
}

.pips {
  display: flex;
  gap: 7px;
}

.pips i {
  width: 16px;
  height: 16px;
  background: rgb(255 255 255 / 0.16);
  border: 2.5px solid var(--navy);
  border-radius: 5px;
  transition:
    background 0.2s ease,
    scale 0.3s var(--out);
}

.pips i.is-on {
  background: var(--sun);
  scale: 1.14;
}

.rig-hint {
  min-height: 1.2em;
  font-size: 1.16rem;
}

/* ---------- hud ---------- */

.hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: min(100%, 1100px);
  margin-top: clamp(4px, 1vh, 10px);
  padding: 0;
  list-style: none;
}

.hud-tile {
  position: relative;
  flex: 1 1 220px;
  max-width: 270px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px 13px 12px;
  background: linear-gradient(rgb(14 44 170 / 0.9), rgb(9 28 124 / 0.94));
  border: 3px solid var(--navy);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.14),
    0 5px 0 var(--navy);
  text-align: left;
}

.hud-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--blue);
  border: 3px solid var(--navy);
  border-radius: 14px;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.45),
    inset 0 -4px 0 rgb(0 0 0 / 0.16);
}

.hud-icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 20;
  stroke-linejoin: round;
  paint-order: stroke;
  overflow: visible;
}

.hud-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.hud-text b {
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  font-variant-numeric: tabular-nums;
}

.hud-text small {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim-2);
  white-space: nowrap;
}

.hud-pop {
  position: absolute;
  top: -16px;
  right: 10px;
  font-size: 1.25rem;
  color: var(--gold);
  opacity: 0;
}

.hud-pop.is-on {
  animation: floatup 2.6s var(--out) both;
}

@keyframes floatup {
  0% {
    opacity: 0;
    translate: 0 20px;
    scale: 0.6;
  }
  18% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -26px;
  }
}

.stamp {
  min-height: 1.4em;
  font-size: 0.84rem;
  color: var(--dim-2);
}

/* ---------- ticker ---------- */

.ticker {
  position: relative;
  width: 104%;
  margin-left: -2%;
  rotate: -1.3deg;
  background: linear-gradient(#fff, var(--ice) 40%, var(--ice-2));
  color: var(--navy);
  border-block: 4px solid var(--navy);
  overflow-x: clip;
}

/* Icicles, drawn as two rows of wedges hanging off the band. */
.ticker::after {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  background:
    conic-gradient(from 345deg at 50% 100%, var(--ice) 0 30deg, transparent 0) 0 0 / 58px 100% repeat-x,
    conic-gradient(from 342deg at 50% 100%, var(--ice-2) 0 36deg, transparent 0) 23px 0 / 37px 58% repeat-x;
  filter: drop-shadow(0 3px 0 var(--navy));
}

.ticker-track {
  display: flex;
  width: max-content;
  min-height: 62px;
  align-items: center;
  animation: slide 46s linear infinite;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes slide {
  to {
    translate: -50% 0;
  }
}

.tick {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 24px;
  color: inherit;
  font: 400 1.14rem/1 "Lilita One", sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.tick img {
  width: 38px;
  height: 38px;
  background: var(--ice-2);
  border: 2.5px solid var(--navy);
  border-radius: 11px;
}

.tick span {
  font: 800 0.95rem/1 "Nunito", sans-serif;
  text-transform: none;
  color: #2b3f8a;
  font-variant-numeric: tabular-nums;
}

/* ---------- sections ---------- */

.lineup,
.studio,
.contact {
  padding: clamp(84px, 10vw, 136px) 0 0;
  scroll-margin-top: 10px;
}

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--well);
  border: 3px solid var(--navy);
  border-radius: var(--r-btn);
  box-shadow: inset 0 3px 0 rgb(0 0 0 / 0.22);
}

.seg button {
  padding: 0.46em 0.9em 0.52em;
  background: none;
  border: 3px solid transparent;
  border-radius: 10px;
  font-size: 1.02rem;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

.seg button:hover {
  opacity: 1;
}

.seg button.is-on {
  background: var(--sun);
  border-color: var(--navy);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.5);
  opacity: 1;
}

/* ---------- lineup ---------- */

/* A wrapping row rather than a fixed grid: whatever the number of games, the
   last row sits centred instead of leaving a hole. */
.grid {
  --cols: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.g-card,
.g-skel {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}

.g-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 8px 8px 12px;
  background: var(--panel);
  color: #fff;
  border: 3px solid var(--navy);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.26),
    0 6px 0 var(--navy),
    0 22px 28px -16px rgb(2 8 45 / 0.7);
  text-decoration: none;
  transition:
    transform 0.26s var(--ease),
    box-shadow 0.26s var(--ease),
    filter 0.26s ease;
}

.g-card:hover {
  transform: translateY(-6px) rotate(-0.8deg);
  filter: brightness(1.08);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.26),
    0 12px 0 var(--navy),
    0 30px 34px -16px rgb(2 8 45 / 0.75);
}

.g-card:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.26),
    0 3px 0 var(--navy);
}

.g-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sky-4);
  border: 3px solid var(--navy);
  border-radius: 13px;
}

.g-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--out);
}

.g-card:hover .g-shot img {
  scale: 1.07;
}

/* A streak of light crossing the art, the way it crosses wet ice. */
.g-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 38%, rgb(255 255 255 / 0.45) 50%, transparent 62%);
  translate: -110% 0;
  transition: translate 0.8s var(--out);
}

.g-card:hover .g-shot::after {
  translate: 110% 0;
}

.g-ccu {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 5px 8px;
  background: rgb(6 16 58 / 0.86);
  border-radius: 999px;
  font: 400 0.95rem/1 "Lilita One", sans-serif;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.g-name {
  padding: 0 4px;
  font-size: clamp(0.98rem, 1.25vw, 1.14rem);
  -webkit-text-stroke-width: 0.24em;
}

.g-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-top: auto;
  padding: 0 4px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.g-sold {
  padding: 2px 8px;
  background: rgb(6 16 58 / 0.5);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ice-2);
}

.g-skel {
  aspect-ratio: 1 / 0.92;
  border: 3px solid rgb(6 16 58 / 0.5);
  border-radius: var(--r-card);
  background:
    linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.14) 50%, transparent 70%) 0 0 / 300% 100%,
    rgb(255 255 255 / 0.08);
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 150% 0, 0 0;
  }
  to {
    background-position: -150% 0, 0 0;
  }
}

.grid-note {
  flex: 1 1 100%;
  padding: 26px;
  background: var(--well);
  border: 3px solid var(--navy);
  border-radius: var(--r-card);
  box-shadow: 0 6px 0 var(--navy);
}

/* ---------- studio ---------- */

.studio-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}

.studio-lead {
  display: grid;
  gap: 16px;
}

.fan {
  position: relative;
  height: clamp(170px, 18vw, 240px);
  margin-top: 14px;
}

.fan img {
  position: absolute;
  width: 58%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--navy);
  transition: rotate 0.5s var(--out), translate 0.5s var(--out);
}

.fan img:nth-child(1) {
  left: 0;
  top: 14%;
  rotate: -8deg;
}

.fan img:nth-child(2) {
  left: 21%;
  top: 0;
  z-index: 1;
  rotate: 3deg;
}

.fan img:nth-child(3) {
  left: 42%;
  top: 24%;
  rotate: 10deg;
}

.fan:hover img:nth-child(1) {
  rotate: -13deg;
  translate: -5% 0;
}

.fan:hover img:nth-child(3) {
  rotate: 15deg;
  translate: 5% 0;
}

.ways {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.ways li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px 16px 15px;
  background: var(--well);
  border: 3px solid var(--navy);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.1),
    0 5px 0 var(--navy);
}

.way-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  background: var(--sun);
  border: 3px solid var(--navy);
  border-radius: 16px;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / 0.55),
    inset 0 -4px 0 rgb(0 0 0 / 0.15);
  font-size: 1.55rem;
  rotate: -5deg;
}

.ways h3 {
  margin-bottom: 4px;
  font-size: clamp(1.22rem, 1.9vw, 1.55rem);
}

.ways p {
  color: var(--dim);
}

/* ---------- contact ---------- */

.rink {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding-block: clamp(40px, 6vw, 84px);
}

.rink .sec-sub {
  max-width: 42ch;
}

.rink-links {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

/* The cube slides in across the ice and coasts to a stop. */
.rink-cube {
  position: absolute;
  right: clamp(10px, 6vw, 96px);
  bottom: clamp(-30px, -1.6vw, -14px);
  width: clamp(104px, 17vw, 220px);
  height: auto;
  rotate: -10deg;
}

.js .rink-cube {
  translate: -90vw 0;
  rotate: -200deg;
  transition:
    translate 1.5s var(--out) 0.25s,
    rotate 1.5s var(--out) 0.25s;
}

.js .rink.is-in .rink-cube {
  translate: 0 0;
  rotate: -10deg;
}

/* ---------- footer ---------- */

.foot {
  padding: clamp(80px, 10vw, 140px) 0 30px;
  overflow: hidden;
  text-align: center;
}

.foot-mark {
  font-size: clamp(5rem, 27vw, 21rem);
  line-height: 0.9;
}

/* at this size the usual outline would close up the letters */
.foot-mark > span:first-child {
  -webkit-text-stroke-width: 0.085em;
  text-shadow:
    0 0.025em 0 var(--navy),
    0 0.05em 0 var(--navy),
    0 0.075em 0 #040b2b,
    0 0.12em 0.1em rgb(0 0 30 / 0.45);
}

.foot-mark > span:last-child {
  background-image: linear-gradient(#fff, #d6ecff 50%, #8cc8ff);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: clamp(30px, 4vw, 56px);
  padding-top: 22px;
  border-top: 3px solid rgb(6 16 58 / 0.6);
  font-size: 0.92rem;
  color: var(--dim-2);
  text-align: left;
}

.foot-row nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.foot-row a {
  font-weight: 900;
  color: #fff;
  text-decoration: none;
}

.foot-row a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- sort transition ---------- */

::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: var(--out);
}

/* ---------- 404 ---------- */

.lost {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  padding: 40px var(--gutter);
  text-align: center;
}

.lost img {
  rotate: 14deg;
}

.lost h1 {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
}

/* ---------- smaller screens ---------- */

@media (max-width: 1180px) {
  .floats {
    display: none;
  }

  .grid {
    --cols: 4;
  }
}

@media (max-width: 900px) {
  .grid {
    --cols: 3;
  }

  .studio-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .fan {
    height: clamp(170px, 40vw, 300px);
  }

  .hero {
    padding-top: calc(var(--nav-h) + 48px);
  }

  .rig-stage {
    --s: clamp(140px, 34vw, 190px);
  }
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
  }

  .grid {
    --cols: 2;
  }

  /* two by two; a flex row would let one long label claim a whole line */
  .hud {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hud-tile {
    max-width: none;
    gap: 10px;
    padding: 10px;
  }

  .hud-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .hud-icon svg {
    width: 24px;
    height: 24px;
  }

  .hud-text small {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    white-space: normal;
  }

  .way-badge {
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
  }

  .rink {
    padding-bottom: clamp(120px, 34vw, 170px);
  }

  .snowcap::before {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .snow i,
  .rays,
  .ticker-track {
    animation: none;
  }

  .ticker {
    overflow-x: auto;
  }
}