@font-face { font-family: Outfit; src: url('/fonts/Outfit.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { color-scheme: light; --ink: #352951; --purple: #865cc5; --blue: #c5eaff; --lavender: #ddc7fa; --muted: #70657e; --rule: #e8e1f0; --sans: Outfit, 'Avenir Next', 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height, 92px) + 20px); }
body { margin: 0; background: #fff; color: var(--ink); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
.site-header::before { content: ''; display: block; height: 6px; background: linear-gradient(90deg, #bda0e9 0 32%, #d2c0ee 32% 60%, #c5eaff 60% 85%, #e0f3ff 85%); }
::selection { background: var(--blue); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 6px; }
[hidden] { display: none !important; }
.wrap { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 10px 16px; color: var(--ink); background: white; border: 2px solid var(--purple); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 10; background: #fff; box-shadow: 0 1px 0 var(--rule); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 86px; }
.brand { display: block; flex-shrink: 0; padding-block: 8px; }
.brand img { width: 104px; }
.site-header nav { position: relative; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 30px; margin-left: auto; min-width: 0; }
.site-header nav > a, .games-dropdown > summary { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: .9375rem; font-weight: 550; padding: 9px 0; position: relative; }
.site-header nav > a::after, .games-dropdown > summary::after { content: ''; position: absolute; bottom: 5px; left: 0; right: 0; height: 4px; background: #c5eaff; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.site-header nav > a:hover::after, .site-header nav > a:focus-visible::after, .games-dropdown > summary:hover::after, .games-dropdown > summary:focus-visible::after, .games-dropdown[open] > summary::after { transform: scaleX(1); }
.games-dropdown { position: relative; }
.games-dropdown > summary { gap: 9px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.games-dropdown > summary::-webkit-details-marker { display: none; }
.nav-chevron { width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s; }
.games-dropdown[open] .nav-chevron { transform: translateY(2px) rotate(225deg); }
.games-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1; width: 220px; max-width: calc(100vw - 36px); max-height: max(48px, calc(100dvh - var(--header-height, 92px) - 24px)); overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--rule); border-radius: 6px; background: #fff; box-shadow: 0 10px 30px #3529511a; }
.games-menu a { display: flex; align-items: center; min-height: 48px; padding: 12px 14px; border-radius: 3px; font-size: .9375rem; font-weight: 550; overflow-wrap: anywhere; touch-action: manipulation; }
.games-menu a:hover, .games-menu a:focus-visible { background: #eff7ff; }
.games-menu a:focus-visible { outline-offset: -3px; }
.games-menu a[aria-current="page"] { background: #f1eafa; color: #664293; }
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding-block: 24px 42px; }
.hero-copy { padding: 14px 0 10px 25px; }
.hero h1 { font: 650 clamp(1.5rem, 2.65vw, 2.4rem)/1.18 var(--sans); letter-spacing: -.035em; overflow-wrap: anywhere; }
.hero-art { position: relative; height: 500px; isolation: isolate; }
.colour-panel { position: absolute; inset: 37px 14px 27px 18px; background: #d8efff; overflow: hidden; clip-path: polygon(0 10%, 94% 0, 100% 90%, 6% 100%); z-index: -1; }
.colour-panel::before { content: ''; position: absolute; width: 200px; height: 440px; right: -75px; top: -70px; background: #e9d9fb; transform: rotate(28deg); }
.hero-companion { position: absolute; z-index: 0; width: 50%; max-width: 260px; left: 4%; bottom: 16px; }
.hero-kori { position: absolute; z-index: 0; width: 39%; max-width: 214px; right: 8%; bottom: 24px; }
.hero-mouse { position: absolute; z-index: 1; width: 57%; max-width: 310px; left: 56%; bottom: 6px; transform: translateX(-50%); }
.mouse-jump { animation: mouse-hop 6.2s cubic-bezier(.35,0,.35,1) infinite; transform-origin: 50% 93%; }
.companion-sway { animation: companion-sway 7.8s ease-in-out -2.1s infinite; transform-origin: 50% 96%; }
.kori-sway { animation: kori-sway 6.7s ease-in-out -.9s infinite; transform-origin: 50% 95%; }
.mouse-sway { animation: mouse-sway 5.6s ease-in-out infinite; transform-origin: 50% 90%; }
.hero-mouse img, .hero-companion img, .hero-kori img { filter: drop-shadow(9px 10px 0 #ac91d342); }
.hero-character { display: block; width: 100%; padding: 0; border: 0; background: transparent; line-height: 0; touch-action: manipulation; }
.hero-character img { width: 100%; transform-origin: 50% 95%; user-select: none; }
.hero-character:active img { transform: scale(1.12, .82); }
.mouse-shadow { position: absolute; width: 170px; height: 15px; background: #b5cce6; bottom: 12px; left: calc(56% - 85px); border-radius: 50%; animation: mouse-shadow-sway 5.6s ease-in-out infinite; }
/* Rounded, slanted diamonds echo the four pieces of the Lavyndir mark. */
.hero-trail { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-step { --step-base: clamp(22px, 3.4vw, 42px); position: absolute; width: calc(var(--step-base) * var(--step-scale, 1)); aspect-ratio: 1; opacity: 0; animation: brand-footstep 7s ease-in-out infinite; animation-delay: calc(var(--step) * .42s); }
.hero-step::before { content: ''; position: absolute; inset: 0; border-radius: 15%; background: var(--step-colour); transform: skewY(-30deg); }
.hero-step:nth-child(odd)::before { transform: skewY(30deg); }
.hero-step:nth-child(1) { --step: 0; --step-scale: .90; --step-colour: #8e57c3; left: 3%; top: 75%; }
.hero-step:nth-child(2) { --step: 1; --step-scale: 1.07; --step-colour: #9963d0; left: 11%; top: 68%; }
.hero-step:nth-child(3) { --step: 2; --step-scale: .97; --step-colour: #a06bd6; left: 19%; top: 77%; }
.hero-step:nth-child(4) { --step: 3; --step-scale: 1.12; --step-colour: #a978dc; left: 27%; top: 67%; }
.hero-step:nth-child(5) { --step: 4; --step-scale: .88; --step-colour: #ad80df; left: 34%; top: 59%; }
.hero-step:nth-child(6) { --step: 5; --step-scale: 1.03; --step-colour: #b18be5; left: 40%; top: 49%; }
.hero-step:nth-child(7) { --step: 6; --step-scale: .94; --step-colour: #b598ec; left: 44%; top: 34%; }
.hero-step:nth-child(8) { --step: 7; --step-scale: 1.08; --step-colour: #b99cf0; left: 49%; top: 24%; }
@keyframes brand-footstep {
  0% { opacity: 0; transform: translateY(5px) scale(.94); }
  9%, 24% { opacity: .62; transform: translateY(0) scale(1); }
  48%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}
.section-heading { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.section-heading h2, .studio h2 { font: 650 1.875rem/1.2 var(--sans); letter-spacing: -.035em; }
.heading-rule { height: 7px; min-width: 38px; background: #eee5f9; flex: 1; position: relative; }
.heading-rule::before { content: ''; position: absolute; left: 0; width: 38px; height: 7px; background: #cdb1ef; }
.game-art { position: relative; height: 430px; isolation: isolate; contain: paint; overflow: hidden; background: #d3eaff; }
.game-cover-link { display: block; }
.game-cover-link:focus-visible { outline-offset: 5px; }
.game-colour { position: absolute; background: #e4d3fa; inset: 0 0 0 36%; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); z-index: -2; }
.game-art::after { content: ''; position: absolute; background: #a992cd; height: 7px; left: 0; right: 0; bottom: 0; z-index: 3; }
.game-logo { width: 41%; position: absolute; left: 3%; top: 22%; transform: rotate(-5deg); z-index: 2; transition: transform .3s cubic-bezier(.2,.7,.3,1.3); }
.game:hover .game-logo { transform: translateY(-4px) rotate(-8deg); }
.character-vexa { position: absolute; width: 53%; right: 0; top: -30px; animation: vexas-flight 8s ease-in-out infinite; z-index: 1; }
.character img { width: 100%; }
.game-cauliflower { position: absolute; z-index: 2; pointer-events: none; animation: cauliflower-hover var(--float-duration) ease-in-out var(--float-delay) infinite; }
.game-cauliflower img { width: 100%; user-select: none; }
.game-cauliflower-one { width: 9.4%; max-width: 106px; left: 44%; top: 10%; --float-angle: -22deg; --float-tilt: 7deg; --float-x: -6px; --float-y: -12px; --float-duration: 6.6s; --float-delay: -1.1s; }
.game-cauliflower-two { z-index: 0; width: 7%; max-width: 78px; right: 3%; top: 8%; --float-angle: 28deg; --float-tilt: -9deg; --float-x: 5px; --float-y: 10px; --float-duration: 8.4s; --float-delay: -4.3s; }
.game-cauliflower-three { width: 12%; max-width: 126px; left: 45%; bottom: 8%; --float-angle: -37deg; --float-tilt: 8deg; --float-x: 8px; --float-y: -16px; --float-duration: 7.3s; --float-delay: -2.7s; }
.game-cauliflower-four { width: 8.5%; max-width: 96px; right: 4%; bottom: 8%; --float-angle: 46deg; --float-tilt: -7deg; --float-x: -7px; --float-y: -9px; --float-duration: 9.6s; --float-delay: -6.5s; }
@keyframes cauliflower-hover {
  0%, 100% { transform: translate(0, 0) rotate(var(--float-angle)); }
  50% { transform: translate(var(--float-x), var(--float-y)) rotate(calc(var(--float-angle) + var(--float-tilt))); }
}
.speed-line { position: absolute; height: 5px; background: #c3a8e5; right: 80px; transform: rotate(-15deg); transform-origin: right; z-index: -1; animation: engine-lines 2.4s ease-out infinite; }
.speed-line-one { width: 165px; top: 68%; }
.speed-line-two { width: 220px; top: 74%; animation-delay: -.6s; }
.speed-line-three { width: 130px; top: 80%; animation-delay: -1.2s; }
.game-info { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 22px 0 38px; }
.game-info h3 { font: 650 1.75rem/1.3 var(--sans); letter-spacing: -.03em; margin-bottom: 9px; }
.game-category { color: var(--muted); font-size: .875rem; font-weight: 450; }
.game-category span { color: #9b79c4; padding: 0 9px; }
.game-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; color: var(--muted); font-size: .875rem; }
.platform-icons { display: inline-flex; align-items: center; gap: 12px; }
.platform-icon { display: inline-flex; flex: 0 0 32px; width: 32px; height: 32px; color: var(--purple); }
.platform-icon svg { width: 100%; height: 100%; fill: currentColor; }
.game-description { color: #63586f; }
.text-link { text-decoration: underline; text-decoration-color: #b493d9; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.text-link:hover { color: #8053b7; }
.game-description .text-link { display: inline-block; margin-top: 10px; }
.studio { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border-top: 2px solid var(--rule); padding-block: 40px 46px; }
.studio h2 { font-size: 1.5rem; margin-bottom: 18px; }
.studio section { min-width: 0; }
.studio p { color: #63586f; max-width: 390px; }
.contact-form { display: grid; gap: 17px; }
.contact-field { display: grid; gap: 6px; min-width: 0; }
.contact-field label { font-size: .9375rem; font-weight: 550; }
.contact-field input, .contact-field textarea { width: 100%; min-width: 0; max-width: 100%; border: 1px solid #cfc2e1; border-radius: 4px; background: #faf8fd; color: var(--ink); padding: 11px 13px; font: inherit; line-height: 1.5; transition: border-color .2s, background .2s; }
.contact-field textarea { min-height: 150px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { background: #f2f9ff; border-color: var(--purple); outline: 2px solid #bda0e9; outline-offset: 2px; }
.contact-field [aria-invalid='true'] { border-color: #a34568; }
.contact-submit { display: inline-flex; justify-self: start; align-items: center; justify-content: space-between; gap: 32px; max-width: 100%; border: 0; border-radius: 4px; padding: 12px 20px; color: var(--ink); background: var(--lavender); font-weight: 600; transition: background .2s, translate .2s; }
.contact-submit span { font-size: 1.25rem; line-height: 1; }
.contact-submit:hover:enabled { background: var(--blue); translate: 0 -2px; }
.contact-submit:disabled { cursor: default; opacity: .65; }
.studio .contact-status { max-width: none; padding: 14px 16px; margin-bottom: 20px; background: #f1f8ff; border-left: 3px solid #bda0e9; overflow-wrap: anywhere; }
.studio .contact-status:focus { outline: none; }
.studio .contact-error { color: #843452; background: #fff3f7; border-color: #b45f7e; }
.studio .field-error { color: #843452; font-size: .875rem; line-height: 1.4; }
.contact-captcha { min-width: 0; }
.contact-captcha .field-error:not(:empty) { margin-top: 8px; }
.contact-trap { display: none; }
.site-footer { border-top: 1px solid var(--rule); padding-block: 32px 26px; color: var(--muted); font-size: .8125rem; }
.footer-connect { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 28px; }
.footer-connect h2 { color: var(--ink); font-size: 1.5rem; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); transition: color .2s, translate .2s; }
.social-icon { width: 32px; height: 32px; fill: currentColor; }
a.social-link:hover { color: var(--purple); translate: 0 -2px; }
.social-link[aria-disabled='true'] { color: var(--muted); }
.footer-legal { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid var(--rule); padding-top: 22px; }
.error-page { padding-block: 100px; min-height: 60vh; }
.error-page h1 { font: 650 clamp(2rem, 5vw, 3rem)/1.3 var(--sans); margin: 14px 0 24px; }
.eyebrow { color: var(--purple); font-weight: 700; }
@keyframes mouse-hop {
  0%, 62%, 100% { transform: translateY(0) rotate(-7deg) scale(1); }
  69% { transform: translateY(5px) rotate(-7deg) scale(1.03,.97); }
  78% { transform: translateY(-28px) rotate(-1deg) scale(.99,1.01); }
  88% { transform: translateY(3px) rotate(-9deg) scale(1.025,.975); }
  94% { transform: translateY(0) rotate(-7deg) scale(1); }
}
@keyframes companion-sway {
  0%, 100% { transform: translateX(4px) rotate(2deg); }
  50% { transform: translateX(-4px) rotate(-4deg); }
}
@keyframes kori-sway {
  0%, 100% { transform: translate(2px, 0) rotate(-2deg); }
  50% { transform: translate(-3px, -3px) rotate(2.5deg); }
}
@keyframes mouse-sway {
  0%, 100% { transform: translate(-4px, 0) rotate(-6deg); }
  50% { transform: translate(6px, -5px) rotate(4deg); }
}
@keyframes mouse-shadow-sway {
  0%, 100% { transform: translateX(-4px) scaleX(1); opacity: .76; }
  50% { transform: translateX(6px) scaleX(.92); opacity: .62; }
}
@keyframes vexas-flight { 0%,100% { transform: translate(0,0) rotate(-2deg); } 50% { transform: translate(-10px,8px) rotate(1deg); } }
@keyframes engine-lines { 0% { translate: -16px 4px; opacity: 0; } 20% { opacity: .7; } 100% { translate: 60px -20px; opacity: 0; } }
@media (max-width: 900px) {
  .wrap { width: calc(100% - 64px); }
  .header-inner { gap: 20px; }
  .site-header nav { gap: 0 20px; }
  .hero { gap: 12px; padding-top: 12px; }
  .hero-copy { padding-left: 0; }
  .hero-art { height: 400px; }
  .hero-mouse { max-width: 280px; }
  .colour-panel { inset: 33px 0 22px; }
  .game-art { height: 345px; }
  .character-vexa { width: 58%; right: -5%; top: -3px; }
  .game-logo { width: 43%; top: 25%; }
  .studio { gap: 40px; }
}
@media (max-width: 600px) {
  html { --header-height: 82px; }
  .wrap { width: calc(100% - 36px); }
  .header-inner { min-height: 76px; flex-wrap: wrap; gap: 4px 12px; padding-block: 8px; }
  .brand { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .brand img { width: 76px; }
  .site-header nav { width: auto; justify-content: flex-end; margin-left: auto; gap: 0 12px; }
  .site-header nav > a, .games-dropdown > summary { font-size: .875rem; }
  .games-dropdown { position: static; }
  .games-menu { left: auto; right: 0; width: 240px; }
  .hero { grid-template-columns: 1fr; gap: 0; padding-block: 24px 28px; }
  .hero-copy { grid-column: 1; grid-row: 1; text-align: center; padding: 0; }
  .hero h1 { font-size: 1.65rem; letter-spacing: -.03em; line-height: 1.25; }
  .hero-art { grid-column: 1; grid-row: 3; height: clamp(280px, 85vw, 480px); width: 100%; margin-top: 8px; }
  .hero-companion { left: 6%; bottom: 8px; }
  .hero-kori { bottom: 20px; }
  .hero-mouse { max-width: 224px; bottom: 0; }
  .colour-panel { inset: 36px 16px 12px; }
  .hero-trail { position: relative; inset: auto; grid-column: 1; grid-row: 2; height: 44px; margin-top: 8px; }
  .hero-step { --step-base: 19px; }
  .hero-step:nth-child(1) { left: 5%; top: 29%; }
  .hero-step:nth-child(2) { left: 18%; top: 25%; }
  .hero-step:nth-child(3) { left: 31%; top: 31%; }
  .hero-step:nth-child(4) { left: 44%; top: 25%; }
  .hero-step:nth-child(5) { left: 57%; top: 27%; }
  .hero-step:nth-child(6) { left: 70%; top: 23%; }
  .hero-step:nth-child(7) { left: 82%; top: 26%; }
  .hero-step:nth-child(8) { left: 91%; top: 35%; }
  .mouse-shadow { width: 115px; left: calc(56% - 57px); bottom: 1px; height: 10px; }
  .section-heading { gap: 16px; margin-bottom: 17px; }
  .section-heading h2 { font-size: 1.5rem; }
  .heading-rule, .heading-rule::before { height: 5px; }
  .game-art { height: auto; aspect-ratio: .9; }
  .game-logo { width: 70%; top: 5%; left: 4%; }
  .character-vexa { width: 88%; top: 30%; right: -5%; }
  .game-cauliflower-one { width: 21%; left: 6%; top: 45%; }
  .game-cauliflower-two { width: 17%; right: 5%; top: 25%; }
  .game-cauliflower-three { width: 26%; left: 8%; bottom: 8%; }
  .game-cauliflower-four { width: 19%; right: 6%; bottom: 7%; }
  .game-colour { inset: 0; clip-path: polygon(100% 15%, 100% 100%, 0 100%, 0 95%); }
  .game-art::after { height: 5px; }
  .game-info { grid-template-columns: 1fr; gap: 16px; padding-block: 20px 30px; }
  .game-info h3 { font-size: 1.6rem; margin-bottom: 8px; }
  .game-category { font-size: .875rem; }
  .game-category span { padding: 0 6px; }
  .studio { grid-template-columns: 1fr; gap: 30px; padding-block: 29px 32px; }
  .studio h2 { font-size: 1.3rem; margin-bottom: 12px; }
  .site-footer { padding-block: 26px 20px; }
  .footer-connect { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 24px; }
  .footer-connect h2 { font-size: 1.3rem; }
  .social-links { gap: 8px 16px; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 13px; padding-top: 20px; }
}
/* Keep navigation readable at the narrowest phone width; allow rows when text is enlarged. */
@media (max-width: 359px) {
  .header-inner { column-gap: 10px; }
  .brand img { width: 64px; }
  .site-header nav { column-gap: 10px; }
  .hero h1 { font-size: 1.45rem; }
}
/* Short landscape screens need a compact header and a bounded artwork area. */
@media (min-width: 480px) and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  html { --header-height: 70px; }
  .header-inner { min-height: 64px; flex-wrap: wrap; gap: 4px 18px; padding-block: 6px; }
  .brand { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .brand img { width: 64px; }
  .site-header nav { width: auto; justify-content: flex-end; margin-left: auto; gap: 0 18px; }
  .site-header nav > a, .games-dropdown > summary { font-size: .875rem; }
  .hero { --landscape-art-height: clamp(230px, 70vh, 300px); grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 18px 28px; }
  .hero-copy { text-align: left; padding: 0; min-width: 0; }
  .hero h1 { font-size: clamp(1.3rem, 3vw, 1.65rem); }
  .hero-art { grid-column: 2; grid-row: 1; height: var(--landscape-art-height); margin-top: 0; }
  .hero-companion { max-width: calc((var(--landscape-art-height) - 24px) * .569); }
  .hero-kori { max-width: calc((var(--landscape-art-height) - 30px) * .45); }
  .hero-mouse { max-width: calc(var(--landscape-art-height) * .66); }
  .hero-trail { position: absolute; inset: 0 52% 0 0; grid-column: auto; grid-row: auto; height: auto; margin-top: 0; }
  .hero-step { --step-base: 17px; }
  .hero-step:nth-child(1) { left: 4%; top: 82%; }
  .hero-step:nth-child(2) { left: 17%; top: 75%; }
  .hero-step:nth-child(3) { left: 30%; top: 84%; }
  .hero-step:nth-child(4) { left: 43%; top: 77%; }
  .hero-step:nth-child(5) { left: 56%; top: 80%; }
  .hero-step:nth-child(6) { left: 69%; top: 72%; }
  .hero-step:nth-child(7) { left: 82%; top: 76%; }
  .hero-step:nth-child(8) { left: 91%; top: 68%; }
}
@media print {
  .site-header { position: static; }
  .contact-submit, .hero-art, .hero-trail { display: none !important; }
  .wrap { width: 100%; }
  .hero { grid-template-columns: 1fr; }
  .game-art { break-inside: avoid; }
}

/* Falling Out! detail page. */
.campaign-section { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: 460px; margin-block: 28px 12px; background: #291e48; }
.campaign-art { position: absolute; width: 70%; height: 100%; max-width: none; right: 0; top: 0; object-fit: cover; object-position: 50% 60%; image-rendering: pixelated; animation: campaign-drift 14s ease-in-out infinite; }
@keyframes campaign-drift {
  0%, 100% { transform: scale(1.03); }
  50% { transform: scale(1.09); }
}
.campaign-section::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #291e48 0%, #291e48 32%, #291e4899 52%, #291e4800 82%); }
.campaign-content { position: relative; z-index: 2; min-width: 0; padding: 48px; color: white; overflow-wrap: anywhere; }
.campaign-content h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 650; line-height: 1.04; letter-spacing: -.045em; margin-bottom: 28px; }
.campaign-content h2 span { color: #e1caff; }
.kickstarter-link { display: inline-flex; align-items: center; justify-content: space-between; max-width: 100%; gap: 24px; padding: 13px 22px; border: 0; border-radius: 3px; background: #c5eaff; color: #291e48; font: 600 1rem/1.5 var(--sans); transition: background .2s, translate .2s; }
.kickstarter-link span { font-size: 1.25rem; line-height: 1; }
a.kickstarter-link:hover { background: #e1caff; translate: 0 -2px; }
.kickstarter-link:disabled { cursor: default; background: #cbd8ec; }
.campaign-pending { color: #e4dbf3; font-size: .875rem; margin-top: 10px; }
.game-trailer { padding-block: 36px 16px; text-align: center; }
.game-trailer h2 { margin-bottom: 22px; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.video-page-dimmer { position: fixed; inset: 0; z-index: 30; background: #171020a6; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.video-page-dimmer.is-active { opacity: 1; }
.trailer-player { position: relative; z-index: 0; transition: z-index 0s .22s; width: min(960px, 100%); margin-inline: auto; overflow: hidden; border-radius: 6px; background: #171020; box-shadow: 0 0 0 1px var(--rule), 0 12px 32px #35295114; }
.trailer-player.is-playing { z-index: 31; transition-delay: 0s; }
@media print { .video-page-dimmer { display: none; } }
.video-stage { position: relative; aspect-ratio: 16 / 9; }
.video-stage video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.video-stage video:focus-visible { outline-offset: -4px; }
.showing-poster .video-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; background: #17102066; pointer-events: none; }
.video-overlay-play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(56px, 8vw, 80px); aspect-ratio: 1; padding: 0; border: 2px solid #ffffffb3; border-radius: 50%; color: #fff; background: #7550a8; box-shadow: 0 5px 24px #17102033; }
.video-overlay-play:hover { background: #664293; }
.video-overlay-play svg { width: 32px; height: 32px; fill: currentColor; }
.video-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.video-spinner { width: 40px; aspect-ratio: 1; border: 4px solid #ffffff66; border-top-color: #e1caff; border-radius: 50%; filter: drop-shadow(0 1px 3px #171020); animation: video-buffering-spin .8s linear infinite; }
.video-loading-label { position: absolute; top: calc(50% + clamp(28px, 4vw, 40px) + 10px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 12px; background: #171020cc; color: #fff; font-size: .875rem; white-space: nowrap; }
.is-buffering .video-overlay-play svg { visibility: hidden; }
@keyframes video-buffering-spin { to { transform: rotate(360deg); } }
.video-controls { position: absolute; inset: auto 0 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; background: linear-gradient(transparent, #0009); color: #fff; text-shadow: 0 1px 3px #000b; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility 0s .16s; }
.controls-visible .video-controls { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.video-button { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: inherit; touch-action: manipulation; }
.video-button:hover { background: #ffffff1f; }
.video-button:disabled { opacity: .45; cursor: default; background: transparent; }
.video-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #0009); }
.video-button:focus-visible { outline-color: #fff; outline-offset: -3px; }
.video-time { font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-seek, .video-volume { min-width: 0; height: 44px; margin: 0; background: transparent; color-scheme: dark; accent-color: #cdb1ef; cursor: pointer; }
.video-seek { flex: 1 1 120px; width: 120px; }
.video-volume { flex: 0 1 76px; width: 76px; }
.video-seek:focus-visible, .video-volume:focus-visible { outline-color: #fff; outline-offset: -3px; }
.video-seek:disabled { cursor: default; }
.video-feedback { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; background: #f4eefb; color: var(--ink); font-size: .875rem; }
.video-retry { min-height: 44px; border: 0; padding: 8px; color: #664293; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.trailer-player:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border-radius: 0; background: #171020; }
.trailer-player:fullscreen .video-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.trailer-player:fullscreen .video-feedback { flex-shrink: 0; }
@media (max-width: 600px) {
  .video-controls { gap: 0 8px; padding: 4px 10px 8px; }
  .video-seek { order: -1; flex-basis: 100%; width: 100%; }
  .video-time { margin-right: auto; }
  .video-volume { display: none; }
}
.game-intro { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 44px; padding-block: 35px 45px; }
.game-intro-copy { min-width: 0; }
.game-intro h1 { max-width: 340px; margin-bottom: 23px; }
.game-intro h1 img { width: 100%; }
.game-lead { font-size: 1.25rem; line-height: 1.55; max-width: 450px; }
.game-intro .game-platforms { margin-top: 20px; }
.external-game-link { display: inline-block; margin-top: 12px; }
.game-intro-art { position: relative; height: 440px; isolation: isolate; min-width: 0; }
.intro-colour { position: absolute; inset: 38px 4px 14px 9px; background: #d8efff; overflow: hidden; clip-path: polygon(0 10%, 94% 0, 100% 90%, 6% 100%); z-index: -1; }
.intro-colour::before { content: ''; position: absolute; inset: 0 0 0 20%; background: #e9d9fb; clip-path: polygon(80% 0, 100% 0, 100% 100%, 0 100%); }
.intro-vexa { position: absolute; width: 81%; right: 0; top: 0; animation: vexas-flight 8s ease-in-out infinite; }
.intro-mouse { position: absolute; width: 45%; left: 3%; bottom: 0; }
.intro-mouse img { filter: drop-shadow(7px 8px 0 #ac91d342); }
.game-page-notice { padding: 26px 20px; margin-bottom: 32px; background: #f4eefb; text-align: center; }
.game-page-notice h2 { margin-bottom: 8px; font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.game-page-notice p { color: var(--muted); }
.game-features { padding-bottom: 38px; }
.game-features .section-heading { margin-bottom: 10px; }
.game-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'art copy'; align-items: center; gap: 56px; padding: 36px 0; border-bottom: 1px solid var(--rule); }
.game-feature:nth-child(even) { grid-template-areas: 'copy art'; }
.feature-media { grid-area: art; min-width: 0; margin: 0; aspect-ratio: 8 / 5; overflow: hidden; background: #e7f3ff; }
.feature-media img { width: 100%; height: 100%; object-fit: contain; }
.feature-media-catching img { object-fit: cover; object-position: 50% 65%; image-rendering: pixelated; }
.feature-media-map { padding: 24px; background: #eee5fa; }
.feature-media-wide { aspect-ratio: 1112 / 430; }
.feature-media-wide img { image-rendering: pixelated; }
.feature-media-wardrobe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 24px; aspect-ratio: 2.5; background: #eee5fa; }
.feature-media-wardrobe img { height: auto; }
.feature-copy { grid-area: copy; min-width: 0; color: #63586f; overflow-wrap: anywhere; }
.game-feature h3 { color: var(--ink); font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; margin-bottom: 16px; }
.game-feature:nth-child(even) h3 { color: #7550a8; }
.feature-label { margin-bottom: 10px; color: #7550a8; font-size: .8125rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.feature-copy strong { color: var(--ink); font-weight: 600; }
.feature-modes { display: flex; flex-wrap: wrap; gap: 7px 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.feature-modes li { padding: 4px 10px; background: #f1eafa; color: #584276; font-size: .875rem; }
.feature-note { margin-top: 10px; font-size: .875rem; }
.full-game-note { margin-top: 24px; padding: 17px 20px; background: #eff7ff; color: #63586f; font-size: .875rem; }
.full-game-note strong { color: var(--ink); font-weight: 600; margin-right: 8px; }
@media (max-width: 900px) {
  .game-intro { gap: 25px; }
  .game-intro-art { height: 330px; }
  .game-intro h1 { max-width: 290px; }
  .game-lead { font-size: 1.125rem; }
  .game-feature { gap: 34px; }
}
@media (max-width: 600px) {
  .campaign-section { min-height: 330px; margin-block: 20px 0; }
  .campaign-art { width: 100%; object-position: 50% 0; }
  .campaign-section::after { background: linear-gradient(0deg, #291e48 0%, #291e48f2 28%, #291e4866 60%, #291e4800 84%); }
  .campaign-content { padding: 28px 22px; }
  .campaign-content h2 { font-size: clamp(2.15rem, 10vw, 3.25rem); margin-bottom: 22px; }
  .kickstarter-link { gap: 18px; padding: 12px 18px; }
  .game-intro { grid-template-columns: 1fr; gap: 12px; padding-block: 25px 30px; }
  .game-intro h1 { width: 250px; margin: 0 0 20px; }
  .game-intro-art { height: 315px; }
  .intro-vexa { width: 81%; }
  .intro-mouse { width: 45%; }
  .game-lead { font-size: 1.0625rem; }
  .game-feature, .game-feature:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: 'art' 'copy'; gap: 22px; padding-block: 26px; }
  .feature-media-map { padding: 16px; }
  .feature-media-wardrobe { padding: 16px; gap: 5px; }
  .game-feature h3 { font-size: 1.375rem; }
  .game-feature h3 br { display: none; }
  .full-game-note { padding: 16px; }
  .full-game-note strong { display: block; margin: 0 0 6px; }
}
@media print {
  .game-intro { grid-template-columns: 1fr; }
  .game-intro-art { display: none; }
  .game-feature { break-inside: avoid; }
}

/* Six 48px frames; the mouse runs beside the game page social heading. */
.footer-connect--with-mouse { display: grid; grid-template-columns: auto minmax(72px, 1fr) auto; }
.footer-mouse-track { position: relative; height: 72px; overflow: hidden; pointer-events: none; }
.footer-mouse-runner { position: absolute; left: 0; bottom: 0; width: 100%; height: 72px; animation: footer-mouse-crossing 6s linear infinite; }
.footer-running-mouse { display: block; width: 72px; height: 72px; margin-left: -72px; background: url('/images/Mouse_Run-Sheet.png') 0 0 / 432px 72px no-repeat; image-rendering: pixelated; animation: footer-mouse-stride .6s steps(6) infinite; }
@keyframes footer-mouse-crossing {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 72px)); }
}
@keyframes footer-mouse-stride {
  from { background-position-x: 0; }
  to { background-position-x: -432px; }
}
@media (max-width: 600px) {
  .footer-connect--with-mouse { grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 8px 10px; }
  .footer-connect--with-mouse .social-links { grid-column: 1 / -1; }
  .footer-mouse-runner { animation-duration: 3s; }
}
@media print {
  .footer-mouse-track { display: none; }
}

/* Shared white page fade and the brand's rounded diamond-petal trail. */
.page-transition { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s ease, visibility 0s .32s; }
.page-loading .page-transition, .page-leaving .page-transition { opacity: 1; visibility: visible; pointer-events: auto; }
.page-loading .page-transition { transition: none; }
.page-leaving .page-transition { transition: opacity .24s ease, visibility 0s; }
/* Original logo paths keep their positions; only opacity changes. */
.page-loader { width: 68px; height: 100px; overflow: visible; }
.page-loader > path { opacity: 0; animation: loading-petal 1.2s ease-in-out infinite; }
.page-loader > path[data-step="1"] { animation-delay: var(--loader-phase, -1.2s); }
.page-loader > path[data-step="2"] { animation-delay: calc(var(--loader-phase, -1.2s) + .3s); }
.page-loader > path[data-step="3"] { animation-delay: calc(var(--loader-phase, -1.2s) + .6s); }
.page-loader > path[data-step="4"] { animation-delay: calc(var(--loader-phase, -1.2s) + .9s); }
@keyframes loading-petal {
  0%, 70%, 100% { opacity: 0; }
  35% { opacity: 1; }
}
@media print { .page-transition { display: none; } }