/* Big, brief, easy to read: art leads and copy gets room to breathe. */
:root{--page-gutter:clamp(28px,6vw,120px);font-size:20px}
.section-pad{padding-inline:var(--page-gutter)}
.eyebrow,.development-label{font-size:14px;line-height:1.5;letter-spacing:.12em}
.site-header nav>a,.games-menu>summary{font-size:13px}
.button,.nav-play{font-size:15px;letter-spacing:.06em;min-height:60px}
.button-icon{flex-shrink:0}
.hero-description,.game-hero p,.game-description>p,.studio-copy>p:not(.eyebrow){font-size:clamp(22px,1.9vw,28px);line-height:1.4}
.fusion-story p:not(.eyebrow),.mobile-copy>p:not(.eyebrow),.symbol-trail-intro,.section-heading>p,.field-notes>div>p:not(.eyebrow){font-size:clamp(20px,1.7vw,25px);line-height:1.45}
.game-description>p:not(.eyebrow):not(.practice-note){font-size:22px;line-height:1.45}
.game-description .practice-note{font-size:13px;line-height:1.5}
.visitor-copy p{font-size:18px}.visitor-copy small{font-size:14px}.visitor-actions .button,.visitor-leave{font-size:14px}
.cast-grid article{padding-inline:clamp(26px,2.6vw,40px);padding-bottom:32px}
.cast-grid p,.mechanic-stories p,.journey-grid p,.field-notes p,.principles p,.feature-notes p{font-size:clamp(20px,1.6vw,23px);line-height:1.5}
.cast-grid .eyebrow,.journey-grid .eyebrow,.journey-grid strong,.device-facts,.chapter-nav a{font-size:14px;line-height:1.5}
.hero-game-note,.practice-note,.last-call small,.fusion-win-kicker,.fusion-win-label{font-size:13px;line-height:1.6;letter-spacing:.065em}
.journey-trigger{font-size:22px}
.journey-note{font-size:18px!important;line-height:1.5!important;max-width:60ch;margin-inline:auto}
.field-notes summary,.field-questions summary{font-size:22px;line-height:1.4}
.field-questions details p{font-size:20px;line-height:1.5}
.game-capture figcaption{font-size:12px}
.site-footer{padding-inline:var(--page-gutter)}
.site-footer .footer-meta p{font-size:13px;line-height:1.6}
.capture-controls button{font-size:16px}
@media(min-width:1700px){.section-pad{--page-gutter:max(100px,calc((100vw - 1560px)/2))}}
@media(max-width:760px){
 :root{font-size:18px}
 .game-description>p:not(.eyebrow):not(.practice-note){font-size:20px}
 .visitor-copy p{font-size:18px}.visitor-copy small{font-size:13px}
 .section-pad{--page-gutter:clamp(24px,6vw,36px)}
 .button{font-size:13px;min-height:56px}.site-header .nav-play{font-size:11px;min-height:42px}
 .cast-grid p,.mechanic-stories p,.journey-grid p,.field-notes p,.principles p,.feature-notes p{font-size:18px;line-height:1.5}
 .eyebrow,.cast-grid .eyebrow{font-size:13px}
 .game-hero p,.hero-description{font-size:21px}
 .hero-game-note,.practice-note,.last-call small{font-size:12px}
 .chapter-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center;gap:6px 18px;padding:16px 24px}.chapter-nav a{font-size:13px}
 .device-facts{font-size:13px;gap:16px;flex-wrap:wrap}
 .visitor-notice .button{min-height:54px}
 .field-notes summary,.field-questions summary{font-size:20px}
 .capture-controls button{font-size:14px}
 .field-questions details p{font-size:18px}
 .game-capture figcaption{font-size:11px}
 .game-hero .button,.fusion-story .button{font-size:13px;padding:16px 20px;min-height:56px}
}
@media(orientation:landscape) and (max-height:520px){.section-pad{--page-gutter:28px}.site-header nav>a,.games-menu>summary{font-size:12px}}

/* The homepage card lets the game art and logo do the talking. */
.game-description { align-items:center; text-align:center; padding:32px; }
.game-description .game-card-title { width:min(260px,90%); margin:0 0 22px; }
.game-card-title img { display:block; width:100%; height:auto; filter:drop-shadow(0 5px 8px #0005); }
.game-description > p:not(.practice-note) { max-width:24ch; text-wrap:balance; }
.game-description > .button, .game-description .game-story-link { align-self:center; }
.game-description > .button { font-size:14px; padding:10px 14px 10px 22px; }
.game-description .game-story-link { margin-top:12px!important; font-size:12px; }
.game-description .practice-note { text-align:center; }
.feature-notes { margin-top:32px; gap:28px; }
.feature-notes article { justify-content:center; }
.feature-notes h3 { margin:0; }
@media(max-width:760px){
 .game-description { padding:26px 22px; }
 .game-description .game-card-title { width:220px; }
 .feature-notes { gap:14px; }
 .feature-notes article { justify-content:flex-start; padding-bottom:14px; }
 .feature-art, .feature-art img { width:64px; height:72px; }
 .feature-art.dragon img { height:72px; }
}

/* Keep the About link available beside Games, including small phones. */
.site-header nav > .nav-about { display:inline-flex; }
.site-header nav > .nav-play { display:inline-flex; align-items:center; text-decoration:none; }
.site-header .nav-about[aria-current] { color:var(--teal); }
@media(max-width:760px){
 .site-header nav > a:not(.nav-about):not(.nav-play) { display:none; }
 .site-header nav { gap:12px; }
 .site-header .wordmark img { width:150px; }
 .site-header nav > .nav-about,.games-menu > summary { font-size:11px; }
}
@media(max-width:380px){
 .site-header { padding-inline:14px; }
 .site-header .wordmark img { width:112px; }
 .site-header nav { gap:10px; }
 .site-header nav > .nav-play { min-width:34px; }
}

/* A central reading lane leaves room for the two travelling characters. */
.game-page main > .section-pad:not(.game-hero) {
 padding-inline:max(44px, calc((100vw - min(980px, 66vw)) / 2));
}
.game-page :is(.section-heading,.mechanic-heading) { justify-content:center; text-align:center; }
.game-page .section-heading { flex-direction:column; gap:16px; }
.game-page :is(.game-hero-content,.cast-grid article,.mechanic-panel,.fusion-story,.mobile-copy,.field-notes,.last-call,.game-progress) { text-align:center; }
.game-page :is(.game-hero-content p,.section-heading p,.symbol-trail-intro,.mechanic-footnote,.fusion-story p,.mobile-copy p,.field-notes p) { margin-inline:auto; max-width:48ch; text-wrap:pretty; }
.game-page .mechanic-heading { justify-content:center; }
.game-page :is(.cast-grid,.journey-grid) { gap:20px; }
.game-page .cast-grid article { padding-inline:18px; }
.game-page .cast-grid p,.game-page .journey-grid p { font-size:20px; }
.game-page .device-facts { justify-content:center; }
.game-page .field-notes { grid-template-columns:1fr; gap:28px; }
.game-page .field-questions { width:100%; max-width:760px; margin-inline:auto; }
.game-page .mechanic-steps { gap:24px; }
.game-page .mechanic-steps li { padding-inline:14px; }
.game-page .mechanic-steps li:not(:last-child)::after { right:-23px; }
.game-page .mechanic-footnote { max-width:52ch; }
.game-page .game-progress { background:#071914; padding-block:80px 100px; }
.game-progress h2 { font:clamp(42px,5vw,64px)/1.1 'Oceanfoot Display',sans-serif; margin:12px 0 38px; }
.progress-steps { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.progress-steps li { padding:26px 16px; border-top:2px solid #647c733b; color:#81948b; }
.progress-steps .is-current { border-color:#e1bd78; color:#ffe4a7; background:radial-gradient(ellipse at top,#e1bd7818,transparent 75%); }
.progress-mark { display:block; font-size:30px; margin-bottom:18px; }
.progress-steps h3 { font:clamp(22px,2vw,29px)/1.2 'Oceanfoot Display',sans-serif; margin:0 0 12px; }
.progress-steps p { font-size:16px; margin:0; }
@media(max-width:1100px){
 .game-page main > .section-pad:not(.game-hero) { padding-inline:max(44px, 14vw); }
 .game-page .cast-grid,.game-page .journey-grid { grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
 .game-page .cast-grid { row-gap:120px; }
 .game-page .cast-portrait { height:330px; }
 .game-page .fusion-story,.game-page .mobile-play { grid-template-columns:1fr; }
 .game-page .fusion-story > div { min-width:0; }
 .game-page .mechanic-steps { grid-template-columns:1fr; }
 .game-page .mechanic-steps li { display:block; text-align:center; padding:22px; }
 .game-page .mechanic-art { margin:0 auto 14px; height:140px; }
 .game-page .mechanic-art img { width:140px; height:140px; }
 .game-page .mechanic-steps li:not(:last-child)::after { content:'↓'; top:auto; bottom:-25px; right:calc(50% - 12px); }
}
@media(max-width:700px){
 .game-page main > .section-pad:not(.game-hero) { padding-inline:44px; }
 .game-page .cast-grid p,.game-page .journey-grid p { font-size:18px; }
 .game-page .progress-steps { grid-template-columns:1fr; gap:12px; }
 .game-page .progress-steps li { padding:22px 12px; }
 .game-page .game-progress { padding-block:60px; }
 .game-page .guide-token span { font-size:14px; }
}
@media(max-height:520px) and (orientation:landscape){
 .game-page main > .section-pad:not(.game-hero) { padding-inline:max(60px,12vw); }
}

.hero-ocean-loop,.hero-sea-haze{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-ocean-loop{opacity:0;transition:opacity 1s;z-index:-3}
.hero-ocean-loop.playing{opacity:1}
.hero-sea-haze{z-index:-2;background:radial-gradient(ellipse 70% 8% at 45% 47%,#99d8e30b,transparent);animation:sea-haze 5.6s ease-in-out infinite}
@keyframes sea-haze{50%{transform:translateX(1%);opacity:.45}}
@media(prefers-reduced-motion:reduce){.hero-ocean-loop{display:none}.hero-sea-haze{animation:none}}
.hero-ocean-loop{z-index:-2;object-position:center 53%}
@media(max-width:760px){.site-header .wordmark{width:150px}.game-page .section-heading h2{font-size:clamp(28px,10vw,60px)}}
@media(max-width:380px){.site-header .wordmark{width:112px}}
.game-page .fusion-story h2{font-size:clamp(26px,11.9cqw,88px)}
@media(max-width:760px){.game-page .story-cast .section-heading h2{font-size:clamp(27px,8.4vw,58px)}}
@media(max-width:1100px){
 .game-page .fusion-story{gap:32px}
 .game-page .fusion-story > div{padding-bottom:0}
 .game-page .fusion-story > img{width:min(100%,500px);justify-self:center}
}