:root {
  color-scheme: dark;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --ink: #080d1d;
  --navy: #121a33;
  --navy-light: #202c4b;
  --stone: #313a50;
  --stone-light: #566179;
  --paper: #fff7d7;
  --text: #fffaf0;
  --muted: #b8bed0;
  --slime: #61ddff;
  --slime-deep: #259fcf;
  --gold: #ffc84d;
  --gold-deep: #d98219;
  --green: #75e59a;
  --pink: #ff7289;
  --outline: #050918;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background-color: #0d1326;
  background-image:
    linear-gradient(90deg, rgba(113, 130, 163, 0.07) 2px, transparent 2px),
    linear-gradient(rgba(113, 130, 163, 0.07) 2px, transparent 2px),
    linear-gradient(135deg, #171f39, #0a1021 72%);
  background-size: 76px 42px, 76px 42px, auto;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(97, 221, 255, 0.13), transparent 22rem),
    radial-gradient(circle at 86% 66%, rgba(255, 200, 77, 0.09), transparent 25rem),
    linear-gradient(rgba(3, 6, 16, 0.08), rgba(3, 6, 16, 0.7));
}

a {
  color: inherit;
}

.dungeon-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.decor {
  position: absolute;
  color: rgba(255, 255, 255, 0.08);
  font-weight: 900;
}

.decor-die {
  top: 17%;
  left: 4%;
  width: 55px;
  height: 55px;
  border: 5px solid currentColor;
  border-radius: 14px;
  display: grid;
  place-items: center;
  rotate: -14deg;
}

.decor-coin {
  top: 8%;
  right: 8%;
  width: 48px;
  height: 48px;
  border: 8px double rgba(255, 200, 77, 0.13);
  border-radius: 50%;
  rotate: 17deg;
}

.decor-star {
  right: 4%;
  bottom: 28%;
  color: rgba(97, 221, 255, 0.1);
  font-size: 4rem;
  rotate: 12deg;
}

.decor-spikes {
  bottom: 15%;
  left: 2%;
  width: 90px;
  height: 60px;
  clip-path: polygon(0 100%, 15% 24%, 30% 100%, 50% 4%, 68% 100%, 84% 32%, 100% 100%);
  background: rgba(255, 114, 137, 0.07);
}

.slime-puddle {
  position: absolute;
  width: 270px;
  height: 80px;
  border-radius: 50%;
  background: rgba(71, 192, 230, 0.08);
  filter: blur(2px);
}

.slime-one {
  top: 31%;
  left: -150px;
  rotate: -8deg;
}

.slime-two {
  right: -160px;
  bottom: 8%;
  rotate: 12deg;
}

.site-header,
main,
footer {
  width: min(1160px, calc(100% - 34px));
  margin-inline: auto;
}

.site-header {
  min-height: 68px;
  padding-top: max(12px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transform: rotate(-1deg);
}

.brand-blob {
  position: relative;
  width: 47px;
  height: 43px;
  border: 4px solid var(--outline);
  border-radius: 55% 45% 48% 52% / 55% 55% 45% 45%;
  display: grid;
  place-items: center;
  color: #07334a;
  font-size: 1.35rem;
  font-weight: 1000;
  background: linear-gradient(#a4efff, var(--slime));
  box-shadow: 0 4px 0 var(--slime-deep);
}

.brand-blob::after {
  position: absolute;
  right: 4px;
  bottom: -10px;
  width: 11px;
  height: 15px;
  border: 3px solid var(--outline);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  content: "";
  background: var(--slime);
}

.brand-copy {
  display: grid;
  line-height: 0.9;
}

.brand-copy strong {
  font-size: 1.08rem;
}

.brand-copy small {
  color: var(--slime);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.header-tag {
  padding: 8px 12px;
  border: 3px solid var(--outline);
  border-radius: 10px 13px 9px 14px;
  color: #273049;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  box-shadow: 3px 4px 0 var(--outline);
  rotate: 1deg;
}

.hero {
  min-height: 500px;
  padding: 24px 0 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.72fr);
  align-items: center;
  gap: clamp(4px, 2vw, 18px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-left: clamp(0px, 3vw, 28px);
}

.hero-sticker {
  display: inline-block;
  margin: 0 0 12px 12px;
  padding: 7px 12px;
  border: 3px solid var(--outline);
  border-radius: 12px 10px 14px 9px;
  color: #3c2504;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--gold);
  box-shadow: 4px 5px 0 var(--outline);
  rotate: -3deg;
}

.title-lockup {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.title-lockup h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--paper);
  font-size: clamp(3.3rem, 7vw, 5.85rem);
  font-weight: 1000;
  line-height: 0.72;
  letter-spacing: -0.08em;
  text-shadow:
    -4px -4px 0 var(--outline),
    4px -4px 0 var(--outline),
    -4px 4px 0 var(--outline),
    4px 4px 0 var(--outline),
    6px 7px 0 #26324e;
  transform: rotate(-1.5deg);
}

.title-lockup h1 em {
  color: var(--slime);
  font-size: 0.75em;
  font-style: normal;
  letter-spacing: -0.05em;
}

.title-slime {
  position: absolute;
  z-index: 1;
  right: -22px;
  bottom: -24px;
  left: 3%;
  height: 65%;
  border: 4px solid var(--outline);
  border-radius: 48% 52% 45% 55% / 60% 44% 56% 40%;
  background: var(--slime-deep);
  transform: rotate(1deg);
  opacity: 0.96;
}

.title-sparkle {
  position: absolute;
  z-index: 3;
  top: -26px;
  right: -32px;
  color: var(--gold);
  font-size: 2.8rem;
  text-shadow: 3px 3px 0 var(--outline);
  rotate: 9deg;
}

.hero-subtitle {
  margin: 42px 0 7px;
  color: var(--text);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 1000;
  letter-spacing: -0.025em;
}

.hero-support {
  max-width: 520px;
  margin: 0 0 17px;
  color: var(--muted);
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  line-height: 1.55;
}

.hero-jump {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 3px solid var(--outline);
  border-radius: 13px 10px 14px 11px;
  color: #112037;
  font-size: 0.74rem;
  font-weight: 1000;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--slime);
  box-shadow: 3px 4px 0 var(--outline);
  rotate: -1deg;
}

.hero-jump span {
  font-size: 1.3rem;
}

.mascot-stage {
  position: relative;
  min-height: 395px;
  display: grid;
  place-items: end center;
}

.mascot-stage img {
  position: relative;
  z-index: 3;
  width: min(92%, 355px);
  filter: drop-shadow(0 22px 0 rgba(3, 7, 17, 0.35));
}

.mascot-blob {
  position: absolute;
  z-index: 1;
  right: 2%;
  bottom: 3%;
  width: 82%;
  height: 72%;
  border: 6px solid var(--outline);
  border-radius: 45% 55% 44% 56% / 53% 43% 57% 47%;
  background:
    radial-gradient(circle at 38% 25%, rgba(255, 255, 255, 0.45) 0 3%, transparent 4%),
    linear-gradient(150deg, #8eeaff, #30aed6);
  box-shadow: 12px 15px 0 rgba(3, 7, 17, 0.5);
  rotate: 3deg;
}


.speech-bubble {
  position: absolute;
  z-index: 5;
  top: 2%;
  right: 1%;
  max-width: 150px;
  padding: 12px 15px;
  border: 4px solid var(--outline);
  border-radius: 19px 18px 20px 8px;
  color: #1a2134;
  font-size: 0.8rem;
  font-weight: 1000;
  text-align: center;
  background: var(--paper);
  box-shadow: 5px 6px 0 var(--outline);
  rotate: 4deg;
}

.speech-bubble::after {
  position: absolute;
  bottom: -16px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-right: 4px solid var(--outline);
  border-bottom: 4px solid var(--outline);
  content: "";
  background: var(--paper);
  transform: rotate(45deg);
}

.floating-coin {
  position: absolute;
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 5px solid var(--outline);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 5px #ffdf7f, 4px 5px 0 rgba(3, 7, 17, 0.45);
}

.floating-coin::after {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  content: "J";
  color: #86500b;
  font-size: 0.75rem;
  font-weight: 1000;
}

.coin-a {
  top: 23%;
  left: 1%;
  rotate: -12deg;
}

.coin-b {
  right: 4%;
  bottom: 17%;
  scale: 0.78;
  rotate: 17deg;
}

.mascot-die {
  position: absolute;
  z-index: 4;
  bottom: 8%;
  left: 7%;
  width: 55px;
  height: 55px;
  border: 5px solid var(--outline);
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--outline);
  font-size: 1.7rem;
  font-weight: 1000;
  background: var(--pink);
  box-shadow: 5px 6px 0 rgba(3, 7, 17, 0.45);
  rotate: 15deg;
}

.game-library {
  padding: 10px 0 96px;
}

.section-sign {
  position: relative;
  width: min(760px, 96%);
  margin: 0 auto 36px;
  padding: 22px 30px 24px;
  border: 7px solid var(--outline);
  border-radius: 19px 24px 16px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  color: #172038;
  text-align: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14), transparent),
    var(--gold);
  box-shadow:
    8px 10px 0 rgba(3, 7, 17, 0.55),
    0 0 30px rgba(255, 200, 77, 0.22);
  rotate: -0.5deg;
}

.section-sign::before {
  position: absolute;
  inset: -16px 22px auto;
  height: 9px;
  border: 4px solid var(--outline);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  content: "";
  background: var(--slime);
}

.section-sign span:not(.sign-bolt) {
  display: block;
  color: #342302;
  font-size: 0.73rem;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-sign h2 {
  margin: 2px 0 0;
  color: #111a2f;
  font-size: clamp(2.35rem, 6vw, 4.15rem);
  font-weight: 1000;
  letter-spacing: -0.05em;
  text-shadow:
    2px 2px 0 #ffe89a,
    4px 5px 0 rgba(5, 9, 24, 0.24);
}

.sign-bolt {
  width: 14px;
  height: 14px;
  border: 3px solid var(--outline);
  border-radius: 50%;
  background: #fff2b4;
  box-shadow: inset 0 0 0 2px var(--gold-deep);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.game-machine {
  position: relative;
  min-width: 0;
  padding: 13px;
  border: 6px solid var(--outline);
  border-radius: 27px 27px 18px 18px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 7px),
    var(--stone);
  box-shadow:
    inset 4px 4px 0 rgba(255, 255, 255, 0.11),
    9px 12px 0 rgba(3, 7, 17, 0.5);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.dice-machine {
  rotate: -1.2deg;
}

.daily-six-machine {
  translate: 0 -6px;
  rotate: -0.85deg;
}

.lane-clash-machine {
  rotate: -0.7deg;
}

.dungeon-machine {
  translate: 0 18px;
  rotate: 0.7deg;
}

.late-machine {
  translate: 0 8px;
  rotate: -0.55deg;
}

.volley-machine {
  translate: 0 13px;
  rotate: 0.55deg;
}

.locked-machine {
  rotate: -0.3deg;
  filter: saturate(0.65);
}

.machine-top {
  min-height: 55px;
  padding: 8px 5px 12px;
  display: grid;
  grid-template-columns: 12px 1fr 12px;
  align-items: center;
  gap: 8px;
}

.machine-light {
  width: 11px;
  height: 11px;
  border: 3px solid var(--outline);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255, 200, 77, 0.7);
}

.machine-marquee {
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--outline);
}

.machine-screen {
  overflow: hidden;
  border: 6px solid var(--outline);
  border-radius: 18px 18px 12px 12px;
  display: grid;
  grid-template-rows: 190px 1fr;
  background: #10182d;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.68);
}

.clash-scene {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 62%, rgba(5, 16, 29, 0.32)),
    url("./lane-clash/assets/menu/jellykid-high-card-havoc-home.png") 64% center / cover no-repeat;
}

.clash-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 36px rgba(2, 5, 14, 0.5);
}

.daily-six-scene {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: end center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 244, 207, 0.2), transparent 37%),
    linear-gradient(150deg, #734cae, #263e70 58%, #16344c);
}

.daily-six-scene::after {
  position: absolute;
  z-index: 6;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(2, 5, 14, 0.63);
}

.daily-six-scene img {
  position: relative;
  z-index: 3;
  width: 142px;
  max-height: 184px;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 8px 0 rgba(3, 7, 17, 0.32));
}

.daily-six-burst {
  position: absolute;
  z-index: 1;
  width: 155px;
  height: 155px;
  border: 5px solid var(--outline);
  border-radius: 51% 49% 45% 55% / 58% 43% 57% 42%;
  background: var(--slime);
  box-shadow: 5px 6px 0 rgba(3, 7, 17, 0.37);
  rotate: 5deg;
}

.daily-six-tile {
  position: absolute;
  z-index: 4;
  width: 25px;
  height: 25px;
  border: 3px solid var(--outline);
  border-radius: 8px 6px 9px 7px;
  box-shadow: 2px 3px 0 rgba(3, 7, 17, 0.45);
}

.tile-one { top: 15px; left: 15px; background: var(--pink); rotate: -9deg; }
.tile-two { top: 17px; right: 17px; background: var(--gold); rotate: 8deg; }
.tile-three { top: 78px; left: 8px; background: var(--green); rotate: 7deg; }
.tile-four { top: 82px; right: 8px; background: #9a8cff; rotate: -6deg; }
.tile-five { bottom: 13px; left: 22px; background: var(--slime); rotate: -5deg; }
.tile-six { right: 24px; bottom: 12px; background: var(--gold); rotate: 7deg; }

.dice-scene,
.step-scene,
.beat-scene {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: #10172d;
  background-image:
    radial-gradient(circle at 50% 82%, rgba(255, 200, 77, 0.22), transparent 42%),
    linear-gradient(90deg, rgba(97, 221, 255, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(255, 114, 137, 0.09) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

.late-scene {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 244, 208, 0.12), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(97, 221, 255, 0.1) 40px 42px),
    linear-gradient(180deg, #25556a 0 54%, #73a752 55% 100%);
}

.late-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 45px rgba(2, 5, 14, 0.72);
}

.volley-scene {
  position: relative;
  overflow: hidden;
  background: #8ed0b7;
}

.volley-scene::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 42px rgba(2, 5, 14, 0.56);
}

.volley-castle {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 50%;
  width: 176px;
  height: 176px;
  object-fit: contain;
  filter: drop-shadow(4px 5px 0 rgba(3, 7, 17, 0.35));
  translate: -50% 0;
}

.volley-castle-front {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
}

.volley-monster {
  position: absolute;
  z-index: 4;
  width: 67px;
  height: 67px;
  object-fit: contain;
  filter: drop-shadow(3px 4px 0 rgba(3, 7, 17, 0.38));
}

.volley-monster-a {
  top: 9px;
  left: 7px;
  rotate: -8deg;
}

.volley-monster-b {
  right: 5px;
  bottom: 5px;
  rotate: 7deg;
}

.volley-shot {
  position: absolute;
  z-index: 4;
  top: 73px;
  left: 12px;
  color: #fff7c4;
  font-size: 2.2rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--outline);
  rotate: -4deg;
}

.late-road {
  position: absolute;
  z-index: 1;
  right: -8%;
  bottom: 20px;
  left: -8%;
  height: 58px;
  border: 5px solid var(--outline);
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, var(--gold) 29px 48px, transparent 49px 76px),
    #11182b;
  rotate: -4deg;
}

.late-clock {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 16px;
  padding: 5px 9px;
  border: 4px solid var(--outline);
  border-radius: 9px;
  color: var(--outline);
  font-size: 1rem;
  font-weight: 1000;
  background: var(--gold);
  box-shadow: 4px 5px 0 rgba(3, 7, 17, 0.42);
  rotate: -3deg;
}

.late-car {
  position: absolute;
  z-index: 3;
  width: 132px;
  height: auto;
  filter: drop-shadow(5px 7px 0 rgba(3, 7, 17, 0.45));
}

.late-car-red {
  left: 16px;
  bottom: 40px;
  rotate: 2deg;
}

.late-car-blue {
  right: 8px;
  bottom: 13px;
  width: 118px;
  rotate: -5deg;
}

.beat-board {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 150px;
  padding: 13px 13px 18px;
  border: 6px solid var(--outline);
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: linear-gradient(180deg, #1e2a4c, #0c1227);
  box-shadow: 7px 8px 0 rgba(3, 7, 17, 0.5), 0 0 24px rgba(97, 221, 255, 0.2);
  rotate: -3deg;
}

.beat-board::after {
  position: absolute;
  right: 12px;
  bottom: 19px;
  left: 12px;
  height: 5px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  content: "";
  background: var(--gold);
}

.beat-board strong {
  position: absolute;
  right: 12px;
  bottom: -16px;
  padding: 3px 7px;
  border: 3px solid var(--outline);
  border-radius: 9px;
  color: #102033;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  background: var(--slime);
  rotate: 4deg;
}

.beat-lane {
  position: relative;
  min-width: 0;
  border: 3px solid rgba(97, 221, 255, 0.25);
  border-radius: 999px 999px 10px 10px;
  background: rgba(8, 13, 29, 0.66);
  overflow: hidden;
}

.beat-lane::after {
  position: absolute;
  right: 5px;
  bottom: 9px;
  left: 5px;
  height: 16px;
  border: 3px solid var(--outline);
  border-radius: 8px;
  content: "";
  background: var(--slime);
}

.beat-lane b,
.beat-lane em {
  position: absolute;
  left: 50%;
  width: 23px;
  height: 18px;
  border: 3px solid var(--outline);
  border-radius: 10px;
  translate: -50% 0;
}

.beat-lane b {
  top: 14px;
  background: var(--pink);
}

.beat-lane em {
  top: 55px;
  background: var(--gold);
}

.lane-b b {
  top: 35px;
  background: var(--slime);
}

.lane-c b {
  top: 24px;
  background: #9a8cff;
}
.vat-scene {
  position: relative;
  display: grid;
  place-items: center;
  background-color: #172344;
  background-image:
    linear-gradient(rgba(97, 221, 255, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(97, 221, 255, 0.08) 2px, transparent 2px);
  background-size: 32px 32px;
}

.step-scene::after,
.vat-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 45px rgba(2, 5, 14, 0.82);
}

.dice-scene {
  background: #394340;
}

.dice-scene img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.step-scene {
  background-color: #2a2b39;
  background-image: none;
}

.step-grid {
  position: relative;
  z-index: 2;
  width: 145px;
  aspect-ratio: 1;
  padding: 8px;
  border: 6px solid var(--outline);
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #a59883;
  box-shadow: 7px 8px 0 rgba(3, 7, 17, 0.5);
  rotate: 5deg;
}

.step-grid i {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent),
    #4d5663;
}

.step-grid .coin::after {
  position: absolute;
  inset: 26%;
  border: 3px solid #9a5a0a;
  border-radius: 50%;
  content: "";
  background: var(--gold);
}

.step-grid .hero-dot::after {
  position: absolute;
  inset: 21%;
  border: 3px solid var(--outline);
  border-radius: 50% 50% 44% 44%;
  content: "";
  background: var(--slime);
}

.step-grid .spike::after {
  position: absolute;
  right: 14%;
  bottom: 14%;
  left: 14%;
  height: 66%;
  clip-path: polygon(0 100%, 18% 12%, 36% 100%, 57% 0, 76% 100%, 90% 20%, 100% 100%);
  content: "";
  background: var(--pink);
}

.step-grid .boulder::after {
  position: absolute;
  inset: 13%;
  border: 3px solid var(--outline);
  border-radius: 45% 55% 49% 51%;
  content: "";
  background: #8c7760;
}

.step-grid .door::after {
  position: absolute;
  inset: 13% 19% 8%;
  border: 3px solid var(--outline);
  border-radius: 50% 50% 4px 4px;
  content: "";
  background: #3cc877;
}


.beat-scene {
  background-color: #10172d;
  background-image:
    radial-gradient(circle at 50% 82%, rgba(255, 200, 77, 0.22), transparent 42%),
    linear-gradient(90deg, rgba(97, 221, 255, 0.11) 1px, transparent 1px),
    linear-gradient(rgba(255, 114, 137, 0.09) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

.beat-board {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 150px;
  padding: 13px 13px 18px;
  border: 6px solid var(--outline);
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: linear-gradient(180deg, #1e2a4c, #0c1227);
  box-shadow: 7px 8px 0 rgba(3, 7, 17, 0.5), 0 0 24px rgba(97, 221, 255, 0.2);
  rotate: -3deg;
}

.beat-board::after {
  position: absolute;
  right: 12px;
  bottom: 19px;
  left: 12px;
  height: 5px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  content: "";
  background: var(--gold);
}

.beat-board strong {
  position: absolute;
  right: 12px;
  bottom: -16px;
  padding: 3px 7px;
  border: 3px solid var(--outline);
  border-radius: 9px;
  color: #102033;
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  background: var(--slime);
  rotate: 4deg;
}

.beat-lane {
  position: relative;
  min-width: 0;
  border: 3px solid rgba(97, 221, 255, 0.25);
  border-radius: 999px 999px 10px 10px;
  background: rgba(8, 13, 29, 0.66);
  overflow: hidden;
}

.beat-lane::after {
  position: absolute;
  right: 5px;
  bottom: 9px;
  left: 5px;
  height: 16px;
  border: 3px solid var(--outline);
  border-radius: 8px;
  content: "";
  background: var(--slime);
}

.beat-lane b,
.beat-lane em {
  position: absolute;
  left: 50%;
  width: 23px;
  height: 18px;
  border: 3px solid var(--outline);
  border-radius: 10px;
  translate: -50% 0;
}

.beat-lane b {
  top: 14px;
  background: var(--pink);
}

.beat-lane em {
  top: 55px;
  background: var(--gold);
}

.lane-b b {
  top: 35px;
  background: var(--slime);
}

.lane-c b {
  top: 24px;
  background: #9a8cff;
}
.vat-scene {
  background-color: #192238;
  background-image:
    radial-gradient(circle, rgba(97, 221, 255, 0.1) 0 3px, transparent 4px);
  background-size: 25px 25px;
}

.vat {
  position: relative;
  z-index: 2;
  width: 125px;
  height: 130px;
  border: 6px solid var(--outline);
  border-top: 10px solid #818ba0;
  border-radius: 18px 18px 38px 38px;
  display: grid;
  place-items: center;
  color: var(--outline);
  background: linear-gradient(to bottom, transparent 20%, #4fcbe9 21%);
  box-shadow: inset 0 -15px 0 rgba(20, 111, 143, 0.32), 7px 8px 0 rgba(3, 7, 17, 0.5);
}

.vat strong {
  position: relative;
  z-index: 2;
  font-size: 3.7rem;
}

.vat-bubble {
  position: absolute;
  border: 4px solid var(--outline);
  border-radius: 50%;
  background: var(--slime);
}

.bubble-one {
  top: -34px;
  left: 12px;
  width: 22px;
  height: 22px;
}

.bubble-two {
  top: -50px;
  right: 16px;
  width: 30px;
  height: 30px;
}

.bubble-three {
  top: -25px;
  right: -14px;
  width: 16px;
  height: 16px;
}

.machine-copy {
  padding: 19px 18px 22px;
  display: flex;
  flex-direction: column;
}

.status-row {
  margin-bottom: 13px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #8f9ab0;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status {
  padding: 5px 8px;
  border: 3px solid var(--outline);
  border-radius: 9px 12px 8px 11px;
  color: #112037;
  box-shadow: 2px 3px 0 var(--outline);
  rotate: -1deg;
}

.status.playable {
  background: var(--green);
}

.status.playtest {
  background: var(--gold);
}

.status.beta {
  background: var(--slime);
}

.status.alpha {
  background: var(--pink);
}

.status.development {
  color: #292d3b;
  background: #9ca5b7;
}

.machine-copy h3 {
  margin: 0 0 10px;
  font-size: 1.7rem;
  font-weight: 1000;
  letter-spacing: -0.045em;
}

.machine-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.52;
}

.machine-copy .machine-disclaimer {
  margin-top: 12px;
  padding: 10px 11px;
  border: 2px solid rgba(255, 200, 77, 0.62);
  border-radius: 8px;
  color: #fff4cc;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.38;
  background: rgba(255, 200, 77, 0.12);
}

.machine-copy .machine-disclaimer strong {
  color: var(--gold);
}

.machine-controls {
  min-height: 83px;
  padding: 14px 4px 2px;
  display: grid;
  grid-template-columns: 55px 1fr;
  align-items: center;
  gap: 12px;
}

.joystick {
  position: relative;
  width: 41px;
  height: 20px;
  border: 4px solid var(--outline);
  border-radius: 50%;
  background: #171d2f;
}

.joystick::before {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 8px;
  height: 28px;
  border: 3px solid var(--outline);
  content: "";
  background: #c8ced9;
  translate: -50% 0;
}

.joystick::after {
  position: absolute;
  bottom: 31px;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 4px solid var(--outline);
  border-radius: 50%;
  content: "";
  background: var(--pink);
  translate: -50% 0;
}

.joystick.sleeping::after {
  background: #747d90;
}

.play-button {
  min-height: 53px;
  padding: 0 17px;
  border: 4px solid var(--outline);
  border-radius: 15px 12px 16px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #352002;
  font-size: 0.9rem;
  font-weight: 1000;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(#ffe184, var(--gold));
  box-shadow: 4px 5px 0 var(--outline);
  transition: filter 150ms ease, transform 150ms ease;
}

.play-button.locked {
  color: #3d4352;
  background: #929aab;
  box-shadow: 3px 4px 0 var(--outline);
}

.support-link,
.support-button {
  min-height: 48px;
  padding: 12px 16px;
  border: 3px solid var(--outline);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  background: var(--gold);
  box-shadow: 3px 4px 0 var(--outline);
}

.support-link {
  font-size: 0.8rem;
}

.support-panel {
  margin: 0 0 64px;
  padding: clamp(20px, 4vw, 42px);
  border: 5px solid var(--outline);
  border-radius: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  background: radial-gradient(circle at top right, #28526a, transparent 65%), var(--navy);
  box-shadow: 7px 9px 0 rgba(3, 7, 17, 0.5);
  scroll-margin-top: 24px;
}

.support-panel h2 {
  margin: 8px 0 14px;
  color: var(--paper);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.support-panel p {
  line-height: 1.6;
}

.support-panel .support-eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.support-details,
.support-actions small {
  color: var(--muted);
  font-size: 0.85rem;
}

.support-actions {
  display: grid;
  gap: 14px;
}

.support-actions small {
  text-align: center;
  line-height: 1.5;
}

.coffee-button {
  background: var(--slime);
}

.support-button:hover,
.support-link:hover {
  filter: brightness(1.1);
}

a:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 5px;
}

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

footer {
  position: relative;
  min-height: 110px;
  padding: 30px 50px max(30px, env(safe-area-inset-bottom));
  border: 5px solid var(--outline);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #222b40;
  text-align: center;
  background: var(--paper);
  box-shadow: 0 -8px 0 rgba(3, 7, 17, 0.35);
}

footer p {
  margin: 0;
  font-size: 0.86rem;
}

.footer-slime {
  position: absolute;
  top: -19px;
  left: 8%;
  width: 110px;
  height: 30px;
  border: 4px solid var(--outline);
  border-radius: 50% 50% 25% 25%;
  background: var(--slime);
}

.footer-coin {
  width: 27px;
  height: 27px;
  border: 4px solid var(--outline);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 3px #ffe48d;
}

@media (hover: hover) and (pointer: fine) {
  .game-machine:hover {
    transform: translateY(-9px) rotate(0deg);
    box-shadow:
      inset 4px 4px 0 rgba(255, 255, 255, 0.11),
      10px 17px 0 rgba(3, 7, 17, 0.55),
      0 0 26px rgba(97, 221, 255, 0.2);
  }

  .game-machine:hover .machine-light {
    background: var(--slime);
    box-shadow: 0 0 14px var(--slime);
  }

  .play-button:not(.locked):hover {
    filter: brightness(1.12) saturate(1.08);
    transform: translateY(-2px);
  }

  .brand:hover {
    transform: rotate(1deg) scale(1.03);
  }
}

@media (max-width: 1100px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-top: 24px;
  }

  .hero-copy {
    text-align: center;
  }

  .title-lockup {
    margin-inline: auto;
  }

  .hero-support {
    margin-inline: auto;
  }

  .mascot-stage {
    width: min(430px, 100%);
    min-height: 330px;
    margin: -8px auto 0;
  }

  .locked-machine {
    grid-column: 1 / -1;
    width: min(470px, 100%);
    justify-self: center;
  }

  .dungeon-machine,
  .volley-machine {
    translate: 0;
  }
}

@media (max-width: 620px) {
  .support-panel {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .site-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .site-header,
  main,
  footer {
    width: min(100% - 22px, 1160px);
  }

  .site-header {
    min-height: 72px;
  }

  .header-tag {
    display: none;
  }

  .hero {
    padding: 24px 0 34px;
    gap: 5px;
  }

  .hero-copy {
    padding-left: 0;
  }

  .hero-sticker {
    margin-left: 0;
  }

  .title-lockup h1 {
    font-size: clamp(3.15rem, 17vw, 4.55rem);
    text-shadow:
      -3px -3px 0 var(--outline),
      3px -3px 0 var(--outline),
      -3px 3px 0 var(--outline),
      3px 3px 0 var(--outline),
      6px 7px 0 #26324e;
  }

  .title-sparkle {
    top: -27px;
    right: -20px;
    font-size: 2.5rem;
  }

  .title-slime {
    bottom: -12px;
    height: 58%;
  }

  .hero-subtitle {
    margin-top: 38px;
  }

  .mascot-stage {
    min-height: 270px;
    margin-top: -2px;
  }

  .mascot-stage img {
    width: min(78%, 320px);
  }

  .speech-bubble {
    top: 2%;
    right: 0;
    max-width: 122px;
    padding: 9px 11px;
    font-size: 0.68rem;
  }

  .coin-a {
    left: 0;
  }

  .section-sign {
    margin-bottom: 28px;
    padding: 18px 14px 19px;
    gap: 10px;
  }

  .game-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .game-machine,
  .locked-machine {
    width: 100%;
    grid-column: auto;
    rotate: 0deg;
  }

  .machine-screen {
    grid-template-rows: 175px 1fr;
  }

  footer {
    padding-inline: 30px;
  }

  .footer-coin {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}