body[data-page="quirky-ball"] {
  --qb-bg: #f8f9fa;
  --qb-surface: #eef0f3;
  --qb-panel: #fff;
  --qb-text: #202124;
  --qb-muted: #60646c;
  --qb-line: rgba(32, 33, 36, .16);
  --qb-cyan: #59f1dc;
  --qb-pink: #ff5c7d;
  --qb-yellow: #ffd84d;
  --qb-lime: #a9ed55;
  --qb-cyan-text: #00796f;
  --qb-pink-text: #b1264e;
  --qb-yellow-text: #8a5d00;
  --qb-lime-text: #4e7012;
  --qb-ink: #111318;
  color: var(--qb-text);
  background:
    linear-gradient(rgba(32, 33, 36, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 33, 36, .035) 1px, transparent 1px),
    var(--qb-bg);
  background-size: 32px 32px;
}

body[data-page="quirky-ball"]::before { display: none; }

body[data-page="quirky-ball"] .site-header {
  border-color: var(--qb-line);
  background: color-mix(in srgb, var(--qb-bg) 88%, transparent);
}

body[data-page="quirky-ball"] .brand-lockup,
body[data-page="quirky-ball"] .site-nav a,
body[data-page="quirky-ball"] .language-picker summary { color: var(--qb-text); }

body[data-page="quirky-ball"] .site-nav a::after { background: var(--qb-cyan); }
body[data-page="quirky-ball"] .site-nav .nav-featured { color: var(--qb-yellow-text); }

body[data-page="quirky-ball"] .site-nav a:hover,
body[data-page="quirky-ball"] .site-nav a:focus-visible {
  background: color-mix(in srgb, var(--qb-text) 8%, transparent);
}

body[data-page="quirky-ball"] .language-picker summary,
body[data-page="quirky-ball"] .language-menu {
  border-color: var(--qb-line);
  background: var(--qb-panel);
}

body[data-page="quirky-ball"] main { overflow: clip; }

.game-hero {
  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  min-height: calc(100svh - 64px);
  margin: 0;
  overflow: clip;
  align-items: center;
  padding: clamp(44px, 7vw, 90px) var(--gutter);
  isolation: isolate;
}

.game-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 76% 46%, color-mix(in srgb, var(--qb-cyan) 20%, transparent), transparent 29%),
    radial-gradient(circle at 13% 85%, color-mix(in srgb, var(--qb-pink) 16%, transparent), transparent 34%);
}

.game-hero::after {
  position: absolute;
  right: -7vw;
  bottom: -15vw;
  z-index: -1;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  content: "";
  border: 2px solid color-mix(in srgb, var(--qb-cyan) 32%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px color-mix(in srgb, var(--qb-cyan) 5%, transparent),
    0 0 0 92px color-mix(in srgb, var(--qb-pink) 4%, transparent);
}

.game-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 1220px);
  margin-inline: auto;
  grid-template-columns: minmax(0, .9fr) minmax(360px, .62fr);
  align-items: center;
  gap: clamp(38px, 7vw, 110px);
}

.game-hero-grid > * { min-width: 0; }

.game-hero-copy { max-width: 680px; }

.game-hero .status-pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--qb-cyan) 55%, var(--qb-line));
  border-radius: 999px;
  color: var(--qb-cyan-text);
  background: color-mix(in srgb, var(--qb-cyan) 9%, transparent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-hero .status-pill::before {
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--qb-cyan);
  box-shadow: 0 0 14px var(--qb-cyan);
}

.game-logo {
  width: min(260px, 67%);
  height: auto;
  margin: 20px 0 12px;
  object-fit: contain;
  filter: drop-shadow(7px 10px 0 color-mix(in srgb, var(--qb-pink) 28%, transparent));
}

.game-title {
  margin: 0 0 22px;
  color: var(--qb-text);
  font-family: "Do Hyeon", "Montserrat", sans-serif;
  font-size: clamp(3.4rem, 6.8vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .87;
  text-wrap: balance;
}

.game-title .accent {
  color: var(--qb-yellow-text);
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--qb-pink) 78%, transparent);
}

.game-hero .lead {
  max-width: 620px;
  margin: 0;
  color: var(--qb-muted);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.72;
  word-break: keep-all;
}

html[lang="ja"] .game-hero .lead { word-break: normal; }

.game-hero .button-row { margin-top: 28px; }

.game-hero .button {
  border-color: var(--qb-line);
  color: var(--qb-text);
  background: var(--qb-panel);
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--qb-cyan) 45%, transparent);
}

.game-hero .button:hover,
.game-hero .button:focus-visible {
  border-color: var(--qb-cyan);
  transform: translate(-2px, -2px);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--qb-cyan) 55%, transparent);
}

.game-visual {
  position: relative;
  display: grid;
  min-height: 650px;
  padding: 20px 0 0;
  border: 0;
  place-items: center;
  background: transparent;
  box-shadow: none;
  perspective: 1200px;
}

.hero-video-tag {
  position: absolute;
  top: 7%;
  left: -8%;
  z-index: 5;
  padding: 9px 15px;
  transform: rotate(-5deg);
  border: 2px solid var(--qb-ink);
  color: var(--qb-ink);
  background: var(--qb-yellow);
  box-shadow: 4px 5px 0 var(--qb-ink);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.hero-device {
  position: relative;
  width: min(326px, 76vw);
  aspect-ratio: 9 / 19.5;
  overflow: visible;
  transform: rotateY(-10deg) rotateZ(2.6deg);
  border: 9px solid #08090c;
  border-radius: 54px;
  background: #08090c;
  box-shadow:
    28px 38px 70px rgba(0, 0, 0, .52),
    0 0 0 2px #4b4e57,
    0 0 42px color-mix(in srgb, var(--qb-cyan) 26%, transparent);
  transition: transform 280ms cubic-bezier(.2, .75, .2, 1), box-shadow 280ms ease;
}

.game-visual:hover .hero-device {
  transform: rotateY(-4deg) rotateZ(1deg) translateY(-7px);
  box-shadow: 25px 44px 80px rgba(0, 0, 0, .55), 0 0 0 2px #5b5f69, 0 0 54px color-mix(in srgb, var(--qb-pink) 28%, transparent);
}

.hero-device video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 43px;
}

.hero-device::before {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 4;
  width: 34%;
  height: 24px;
  content: "";
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050507;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .13);
}

.hero-device::after {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 4;
  width: 34%;
  height: 5px;
  content: "";
  transform: translateX(-50%);
  border-radius: 99px;
  background: rgba(255, 255, 255, .86);
}

.device-side {
  position: absolute;
  left: -10px;
  z-index: 2;
  width: 7px;
  border-radius: 6px 0 0 6px;
  background: #555963;
}

.video-toggle {
  position: absolute;
  right: 15px;
  bottom: 24px;
  z-index: 5;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 9, 12, .78);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .34);
  cursor: pointer;
  place-items: center;
}

.video-toggle::before { content: "Ⅱ"; font-size: .86rem; font-weight: 950; }
.video-toggle[data-paused="true"]::before { content: "▶"; padding-left: 2px; }
.video-toggle:hover,
.video-toggle:focus-visible { border-color: var(--qb-cyan); background: #08090c; }

.device-side-top { top: 92px; height: 34px; }
.device-side-bottom { top: 139px; height: 64px; }

.game-visual > .hero-quirky {
  position: absolute;
  right: -8%;
  bottom: 10%;
  z-index: 6;
  width: 116px;
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .32)) drop-shadow(0 0 15px color-mix(in srgb, var(--qb-pink) 48%, transparent));
  animation: qb-quirky-hover 3.6s ease-in-out infinite;
}

.marble-rain {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.falling-marble {
  position: absolute;
  top: -16vh;
  left: var(--left);
  width: var(--size);
  aspect-ratio: var(--ratio, 1);
  opacity: 0;
  border: 3px solid var(--qb-ink);
  border-radius: 50%;
  background: var(--color);
  box-shadow: inset -10px -12px 0 rgba(0, 0, 0, .09), 6px 8px 0 rgba(0, 0, 0, .22);
  animation: qb-marble-drop 1.15s var(--delay) cubic-bezier(.2, .72, .2, 1) both;
}

.falling-marble::after {
  position: absolute;
  top: 16%;
  left: 20%;
  width: 30%;
  height: 22%;
  content: "";
  transform: rotate(-22deg);
  border-radius: 50%;
  background: rgba(255, 255, 255, .48);
}

@keyframes qb-marble-drop {
  0% { opacity: 0; transform: translateY(-12vh) rotate(0); }
  10% { opacity: 1; }
  72% { opacity: 1; transform: translateY(66vh) rotate(var(--spin)); }
  84% { opacity: 1; transform: translateY(61vh) rotate(calc(var(--spin) * .88)); }
  100% { opacity: 0; transform: translateY(78vh) rotate(var(--spin)); }
}

@keyframes qb-quirky-hover {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

.dark-section {
  border-block: 1px solid var(--qb-line);
  color: var(--qb-text);
  background: var(--qb-surface);
}

.dark-section::before {
  top: auto;
  right: 3%;
  bottom: -220px;
  width: 440px;
  height: 440px;
  border-color: color-mix(in srgb, var(--qb-pink) 25%, transparent);
  box-shadow: 0 0 0 62px color-mix(in srgb, var(--qb-pink) 4%, transparent);
}

.loop-grid { gap: 16px; }

.loop-step {
  min-height: 278px;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid var(--qb-line);
  border-radius: 8px 32px 8px 8px;
  background: var(--qb-panel);
  box-shadow: inset 5px 0 0 var(--step-color, var(--qb-yellow));
}

.loop-step:nth-child(2) { --step-color: var(--qb-cyan); transform: translateY(18px); }
.loop-step:nth-child(3) { --step-color: var(--qb-pink); }

.loop-index {
  margin-bottom: 26px;
  color: color-mix(in srgb, var(--step-color, var(--qb-yellow)) 32%, transparent);
  font-size: clamp(4.2rem, 8vw, 7rem);
}

.loop-step:nth-child(2) .loop-index,
.loop-step:nth-child(3) .loop-index { color: color-mix(in srgb, var(--step-color) 32%, transparent); }

.loop-step h2 { color: var(--qb-text); }
.loop-step p { color: var(--qb-muted); }

body[data-page="quirky-ball"] .section { padding-block: clamp(70px, 9vw, 126px); }

body[data-page="quirky-ball"] .section-heading { margin-bottom: clamp(38px, 6vw, 72px); }

body[data-page="quirky-ball"] .section-kicker {
  color: var(--qb-cyan-text);
  letter-spacing: .17em;
}

body[data-page="quirky-ball"] .section-title {
  color: var(--qb-text);
  font-family: "Do Hyeon", "Montserrat", sans-serif;
  font-weight: 400;
}

body[data-page="quirky-ball"] .section-heading .lead { color: var(--qb-muted); }

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.feature-card {
  --card-text: var(--qb-yellow-text);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--qb-line);
  border-radius: 8px 32px 8px 8px;
  color: var(--qb-text);
  background: var(--qb-panel);
  box-shadow: 8px 9px 0 color-mix(in srgb, var(--card-color, var(--qb-yellow)) 28%, transparent);
}

.feature-card:nth-child(2) { --card-color: var(--qb-cyan); --card-text: var(--qb-cyan-text); }
.feature-card:nth-child(3) { --card-color: var(--qb-pink); --card-text: var(--qb-pink-text); }
.feature-card:nth-child(4) { --card-color: var(--qb-lime); --card-text: var(--qb-lime-text); }

.feature-card:hover,
.feature-card:focus-within {
  transform: translate(-3px, -5px) rotate(-.35deg);
  border-color: color-mix(in srgb, var(--card-color, var(--qb-yellow)) 54%, var(--qb-line));
  box-shadow: 12px 15px 0 color-mix(in srgb, var(--card-color, var(--qb-yellow)) 34%, transparent);
}

.feature-symbol {
  width: 66px;
  height: 66px;
  margin-bottom: 38px;
  border: 3px solid var(--qb-ink);
  border-radius: 50%;
  color: var(--qb-ink);
  background: var(--card-color, var(--qb-yellow));
  box-shadow: inset -7px -8px 0 rgba(0, 0, 0, .1), 5px 6px 0 var(--qb-ink);
}

.feature-card:nth-child(2) .feature-symbol,
.feature-card:nth-child(3) .feature-symbol,
.feature-card:nth-child(4) .feature-symbol { color: var(--qb-ink); background: var(--card-color); }

.feature-symbol img { width: 54px; height: 54px; object-fit: contain; }
.feature-card h3 { color: var(--qb-text); }
.feature-card p { color: var(--qb-muted); }
.feature-meta { border-color: var(--qb-line); color: var(--card-text, var(--qb-yellow-text)); }

#gallery {
  width: min(100% - (var(--gutter) * 2), 1280px);
  padding-bottom: clamp(100px, 12vw, 160px);
  perspective: 1600px;
}

.gallery {
  display: grid;
  overflow: visible;
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 34px);
  padding: 50px 10px 64px;
  scrollbar-color: var(--qb-pink) rgba(255, 255, 255, .08);
}

.shot {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  overflow: visible;
  border: 8px solid #08090c;
  border-radius: 42px;
  background: #08090c;
  box-shadow: 20px 28px 55px rgba(0, 0, 0, .4), 0 0 0 2px #4b4e57;
  transition: transform 260ms cubic-bezier(.2, .75, .2, 1), box-shadow 260ms ease;
}

.shot:nth-child(1) { transform: rotateY(12deg) rotateZ(-4deg) translateY(12px); }
.shot:nth-child(2) { transform: rotateY(6deg) rotateZ(2.4deg) translateY(-22px); }
.shot:nth-child(3) { transform: rotateY(-7deg) rotateZ(-2deg) translateY(4px); }
.shot:nth-child(4) { transform: rotateY(-13deg) rotateZ(4deg) translateY(-12px); }

.shot:hover,
.shot:focus-within {
  z-index: 3;
  transform: translateY(-16px) rotateY(0) rotateZ(0) scale(1.035);
  box-shadow: 24px 38px 70px rgba(0, 0, 0, .5), 0 0 0 2px #626773, 0 0 42px color-mix(in srgb, var(--qb-cyan) 28%, transparent);
}

.shot::before {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 2;
  width: 35%;
  height: 20px;
  content: "";
  transform: translateX(-50%);
  border-radius: 99px;
  background: #050507;
}

.shot::after {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  width: 34%;
  height: 4px;
  content: "";
  transform: translateX(-50%);
  border-radius: 99px;
  background: rgba(255, 255, 255, .86);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
}

.shot figcaption {
  position: absolute;
  right: 0;
  bottom: -55px;
  left: 0;
  padding: 0;
  color: var(--qb-muted);
  background: transparent;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

body[data-page="quirky-ball"] .studio-note {
  border-color: var(--qb-line);
  border-radius: 8px 34px 8px 8px;
  color: var(--qb-text);
  background: var(--qb-panel);
  box-shadow: 9px 10px 0 color-mix(in srgb, var(--qb-cyan) 34%, transparent);
}

body[data-page="quirky-ball"] .studio-note h2 { color: var(--qb-text); }
body[data-page="quirky-ball"] .studio-note p { color: var(--qb-muted); }
body[data-page="quirky-ball"] .studio-note .text-link { color: var(--qb-text); }
body[data-page="quirky-ball"] .studio-note > img { width: 86px; height: 86px; object-fit: contain; }

body[data-page="quirky-ball"] .closing-card {
  border: 1px solid var(--qb-line);
  border-radius: 8px 42px 8px 8px;
  color: var(--qb-text);
  background:
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--qb-pink) 22%, transparent), transparent 30%),
    var(--qb-panel);
  box-shadow: 12px 14px 0 color-mix(in srgb, var(--qb-yellow) 42%, transparent);
}

body[data-page="quirky-ball"] .closing-card p { color: var(--qb-muted); }
body[data-page="quirky-ball"] .closing-card .status-pill {
  border-color: color-mix(in srgb, var(--qb-yellow) 55%, var(--qb-line));
  color: var(--qb-yellow-text);
  background: color-mix(in srgb, var(--qb-yellow) 9%, transparent);
}
body[data-page="quirky-ball"] .closing-card .status-pill::before { background: var(--qb-yellow); box-shadow: 0 0 14px var(--qb-yellow); }

body[data-page="quirky-ball"] .site-footer {
  border-color: var(--qb-line);
  color: var(--qb-muted);
  background: var(--qb-surface);
}

body[data-page="quirky-ball"] .footer-links a { color: var(--qb-text); }
body[data-page="quirky-ball"] .footer-links a:hover { color: var(--qb-cyan-text); }
body[data-page="quirky-ball"] .footer-brand-images { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
body[data-page="quirky-ball"] .footer-brand-images .brand-duck-image { width: 34px; height: 34px; object-fit: contain; }
body[data-page="quirky-ball"] .footer-wordmark-image { width: 116px; height: auto; object-fit: contain; }

@media (max-width: 900px) {
  .game-hero { min-height: auto; padding-block: 62px 86px; }
  .game-hero-grid { grid-template-columns: 1fr; }
  .game-hero-copy { max-width: 760px; }
  .game-visual { min-height: 590px; }
  .hero-video-tag { left: calc(50% - 220px); }
  .loop-step:nth-child(2) { transform: none; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 76px 34px; }
  .shot:nth-child(3), .shot:nth-child(4) { margin-top: 18px; }
}

@media (max-width: 720px) {
  body[data-page="quirky-ball"] .site-nav {
    border-color: var(--qb-line);
    background: var(--qb-panel);
  }

  .game-hero { padding: 42px 20px 76px; }
  .game-logo { width: 210px; }
  .game-title { font-size: clamp(3.15rem, 15vw, 4.8rem); }
  .game-hero .button-row { align-items: stretch; }
  .game-visual { min-height: 560px; }
  .hero-device { width: min(300px, 77vw); transform: rotateY(-6deg) rotateZ(2deg); }
  .hero-video-tag { top: 5%; left: 3%; }
  .game-visual > .hero-quirky { right: 2%; bottom: 8%; width: 94px; }
  .loop-step { display: block; min-height: 0; }
  .loop-index { margin: 0 0 22px; }
  .feature-grid { grid-template-columns: 1fr; }
  #gallery { width: 100%; }
  .gallery {
    display: grid;
    grid-auto-columns: min(72vw, 310px);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 28px;
    overflow-x: auto;
    padding: 38px var(--gutter) 82px;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
  }
  .shot,
  .shot:nth-child(1),
  .shot:nth-child(2),
  .shot:nth-child(3),
  .shot:nth-child(4) {
    margin-top: 0;
    transform: rotateY(-4deg) rotateZ(-1.5deg);
    scroll-snap-align: center;
  }
  .shot:nth-child(even) { transform: rotateY(4deg) rotateZ(1.5deg); }
  body[data-page="quirky-ball"] .studio-note { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .game-hero .status-pill { font-size: .62rem; }
  .game-title { font-size: clamp(2.9rem, 14.5vw, 4.15rem); }
  .game-hero .lead { font-size: .94rem; }
  .game-visual { min-height: 500px; }
  .hero-device { width: min(264px, 76vw); border-radius: 46px; }
  .hero-device video { border-radius: 35px; }
  .game-visual > .hero-quirky { width: 82px; }
  .falling-marble { border-width: 2px; }
  .feature-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .marble-rain { display: none; }
  .game-visual > .hero-quirky { animation: none; }
  .hero-device,
  .game-visual:hover .hero-device,
  .shot,
  .shot:nth-child(1),
  .shot:nth-child(2),
  .shot:nth-child(3),
  .shot:nth-child(4),
  .shot:hover { transform: none; }
}