/* Phone layouts use native touch scrolling, larger type and generous tap areas. */
.ui-icon{width:1em;height:1em;display:inline-block;vertical-align:-.13em;flex-shrink:0}
.arrow .ui-icon,.round-arrow .ui-icon{width:20px;height:20px}
.title-star .ui-icon{width:1em;height:1em}
.play-round .ui-icon,.guide-play .ui-icon,.film-card-play .ui-icon{width:24px;height:24px}
.symbol-film b .ui-icon{width:20px;height:20px}
.close-button .ui-icon{width:20px;height:20px}
.motion-indicator{display:inline-block;width:10px;height:10px;border:1px solid currentColor;border-radius:50%;margin-inline-start:8px;box-shadow:inset 0 0 0 2px var(--paper);background:currentColor}
[aria-pressed=true] .motion-indicator{background:transparent}
#puzzle-hearts{display:inline-flex;gap:5px;align-items:center;direction:ltr}
@media(max-width:760px){
  .header{padding-inline:22px;gap:14px}
  .menu-trigger{min-height:44px;font-size:13px;padding:12px 18px}
  .hero-intro p{font-size:15px;line-height:1.8;max-width:340px}
  .hero-intro{margin-top:24px}
  .hero-art{margin-block:4px -8px}
  .hero-film{min-height:80px;padding:12px;gap:14px;width:100%;justify-content:flex-start;border-radius:16px}
  .hero-film>span:last-child{font-size:15px}.hero-film small{font-size:9px}
  .button{min-height:48px;font-size:14px;padding:14px 20px}
  .text-button{min-height:44px;font-size:14px;gap:16px}
  .start-heading p,.library-heading p,.path-card p,.game-panel>p,.guide-copy>p,.sample-copy>p,.steps p,.studio-right>p.subtle,.help-copy>p,.faqs p{font-size:15px;line-height:1.85}
  .path-card{padding:24px;border-radius:18px}.path-card h3{font-size:25px}
  .path-top .label,.label{font-size:10px;letter-spacing:1px}
  .path-foot{padding-top:20px}.path-foot>span{font-size:12px}
  .game-panel{padding:28px 24px}.game-tags{gap:8px}.game-tags span{font-size:11px}
  .game-panel .fine,.sample-note,.fine{font-size:12px;line-height:1.8}
  .film-grid{display:flex;overflow-x:auto;gap:16px;margin-inline:-20px;padding:4px 20px 20px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:thin;scrollbar-color:#aa8fbd transparent}
  .film-card{flex:0 0 78%;min-width:0;scroll-snap-align:start}
  .film-card-image{height:auto;aspect-ratio:9/12}.film-card-image img{height:100%;width:100%;object-fit:cover}
  .film-card-caption strong{font-size:17px}.film-card-caption>span{font-size:12px}
  .tabs{width:100%;gap:5px;border-radius:16px;padding:5px}.tabs button{flex:1;min-height:48px;padding:10px 12px;font-size:12px;border-radius:12px;line-height:1.5}
  .guide-copy h3,.sample-copy h3{font-size:34px;line-height:1.15;letter-spacing:-1px}
  .steps h4{font-size:16px}.steps li{gap:14px;padding-block:20px}
  .tutorial-choices{gap:12px}.tutorial-choices>button{padding:15px;gap:13px;min-height:94px}
  .tutorial-choices strong{font-size:14px;line-height:1.55}.tutorial-choices small{font-size:12px;line-height:1.65}
  .puzzle-shell{padding:20px 16px;border-radius:20px}.puzzle-instructions{padding:16px 12px;gap:14px}
  .sample-panel{display:flex;flex-direction:column;gap:32px}.sample-panel .puzzle-shell{order:-1;width:100%}
  .puzzle-instructions strong{font-size:16px;line-height:1.6}.puzzle-instructions p>span{font-size:13px;line-height:1.7}
  .puzzle-shell .keyboard-help{display:none}.puzzle-shell #puzzle-response{font-size:14px;line-height:1.7;min-height:70px}
  .puzzle-bottom{gap:12px}.puzzle-bottom .button{padding-inline:14px}.puzzle-bottom .text-button{font-size:13px}
  .faqs summary{font-size:16px;line-height:1.6;padding-block:22px}
  .section-dock{width:calc(100% - 24px);max-width:460px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:5px;bottom:max(10px,env(safe-area-inset-bottom));overflow:visible;border-radius:23px;white-space:normal}
  .section-dock a{min-width:0;min-height:54px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:6px 0;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;border-radius:17px}
  .section-dock a svg{display:block;width:19px;height:19px;stroke-width:1.6;flex:none}
  .section-dock .dock-full{display:none}.section-dock .dock-short{display:block}
  .section-dock a.active{box-shadow:inset 0 0 0 1px #9a78b91a}
  .footer{padding-bottom:100px}.footer-bottom{gap:20px;font-size:12px}.footer-bottom button{min-height:44px}
  .legal-links{gap:12px 22px;padding-top:18px}.legal-links a{min-height:40px;display:inline-flex;align-items:center;font-size:12px}
  #section-menu{padding:24px;border-radius:24px}.menu-body>a{font-size:23px;min-height:65px}.menu-note{font-size:13px;line-height:1.8}
  .film-dialog-top{gap:16px}.film-dialog-top h2{font-size:18px;line-height:1.5;letter-spacing:0}
  .film-picker{align-items:flex-start;gap:8px}.film-picker select{min-height:44px;font-size:13px;max-width:100%}
  .film-feedback{font-size:13px;line-height:1.7;flex-wrap:wrap}.film-feedback a{min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:420px){.tabs{flex-direction:column}.tabs button{width:100%;font-size:14px}.contact-link{font-size:clamp(17px,5vw,23px)}}

/* The phone scene has its own composition, with scroll motion on every browser. */
.section-dock svg,.section-dock .dock-short{display:none}
@media(max-width:760px){
  html{scroll-padding-top:28px;scroll-padding-bottom:90px}
  .header{height:82px}
  .hero{padding-top:118px;padding-bottom:34px}
  .hero-title{margin-top:26px;transform:translate3d(0,var(--phone-title-y,0px),0);will-change:transform}
  .hero h1{font-size:clamp(29px,8.8vw,62px);line-height:1.12;letter-spacing:-2px}
  .hero-title .line{overflow:visible;transform:translate3d(var(--phone-line-x,0px),0,0)}
  .hero-title .line:nth-child(2){transform:translate3d(calc(var(--phone-line-x,0px) * -1),0,0)}
  .hero-intro{max-width:none;margin-top:26px}
  .hero-intro p{font-size:14px;line-height:1.85;max-width:350px}
  .hero-intro .button{margin-top:22px;padding:7px 7px 7px 22px;min-height:54px}
  .hero-art{width:calc(100% + 28px);margin:12px -14px -18px;transform:translate3d(0,var(--phone-art-y,0px),0) rotate(var(--phone-art-turn,0deg));transform-origin:50% 55%;will-change:transform}
  .hero-film{margin-inline:0;padding:12px 16px;min-height:82px}
  .hero-film small{font-size:9px;letter-spacing:1px}
  .scroll-cue{font-size:9px;letter-spacing:1px;margin-top:22px;gap:16px}
  .game-heading{display:block}.game-heading>p{margin-top:16px;font-size:14px}.game-heading>p br{display:none}
  .start-heading h2,.library-heading h2,.learn-heading h2,.studio-left h2,.help-copy h2{font-size:clamp(34px,9.6vw,52px);line-height:1.12;letter-spacing:-1.7px}
  .path-card{grid-template-columns:minmax(0,1fr) 62px;column-gap:12px}
  .path-card h3{font-size:24px}.path-card p{font-size:14px;line-height:1.7}
  .path-symbol{width:60px;height:60px}
  .tabs{flex-direction:row;width:100%;margin-top:24px}.tabs button{font-size:12px;line-height:1.5;padding:12px 8px;min-height:52px}
  .section-dock a svg{display:block}.section-dock .dock-short{display:block}
  .footer-bottom{grid-template-columns:1fr auto;align-items:center;gap:18px}
  .footer-bottom>span:nth-child(2){grid-column:1/-1;grid-row:1;text-align:start;font-size:10px;line-height:1.8;letter-spacing:.5px}
  .footer-bottom #motion-toggle{text-align:start}
  .legal-links{padding-bottom:12px}
  .footer{padding-bottom:calc(105px + env(safe-area-inset-bottom))}
  .paused .hero-title .line{transform:none!important}
}
@media(max-width:360px){.hero h1{font-size:29px;letter-spacing:-1.7px}.section-dock{width:calc(100% - 16px);padding:4px}.tabs button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-title,.hero-art,.hero-title .line{transform:none!important;will-change:auto!important}}

/* A wider-feeling phone layout, without changing browser zoom or tap targets. */
@media(max-width:760px){
  .header{height:72px}.wordmark{font-size:39px}
  .hero{padding-top:101px;padding-bottom:27px}
  .hero-title{margin-top:22px}
  .hero h1{font-size:clamp(28px,8.1vw,54px);line-height:1.12;letter-spacing:-1.8px}
  .hero-intro{margin-top:22px}.hero-intro p{font-size:13px;line-height:1.8;max-width:350px}
  .hero-intro .button{margin-top:18px;min-height:48px;font-size:12px;padding:5px 5px 5px 19px}
  .hero-art{width:88%;max-width:290px;margin:4px auto -12px}
  .hero-film{min-height:70px;padding:10px 13px;gap:12px;border-radius:14px}
  .hero-film .film-thumb{width:44px;height:44px;flex:none}
  .hero-film>span:last-child{font-size:13px}.hero-film small{font-size:8px;margin-bottom:6px}
  .scroll-cue{margin-top:20px;font-size:8px}
  .start,.learn,.help{padding:40px 0 48px}.game-section,.film-library{padding:40px 0 48px}
  .start-heading,.library-heading,.learn-heading{margin:27px 0 24px}
  .start-heading h2,.library-heading h2,.learn-heading h2,.studio-left h2,.help-copy h2{font-size:clamp(29px,8.4vw,44px);line-height:1.16;letter-spacing:-1.4px}
  .start-heading p,.library-heading p,.path-card p,.game-panel>p,.guide-copy>p,.sample-copy>p,.steps p,.studio-right>p.subtle,.help-copy>p,.faqs p{font-size:14px;line-height:1.8}
  .start-heading p,.library-heading p{margin-top:16px}
  .path-card{padding:20px;border-radius:16px}.path-card h3{font-size:22px;margin-top:18px}.path-card p{margin-bottom:18px}
  .path-foot{padding-top:14px}.path-symbol{width:52px;height:52px}
  .game-heading{margin:28px 0 24px}.game-heading>p{margin-top:10px}
  .game-image{min-height:300px}.game-panel{padding:24px 20px}.game-panel h3{font-size:34px}
  .film-card{flex-basis:72%}.film-card-caption strong{font-size:15px}.film-card-caption>span{font-size:11px}
  .guide-visual{height:350px;padding:22px}.guide-sticker{font-size:17px;padding:16px 12px;top:115px;right:18px}
  .guide-copy h3,.sample-copy h3{font-size:29px;line-height:1.2}
  .steps li{padding-block:16px}.steps h4{font-size:15px}
  .tutorial-choices>button{min-height:80px;padding:12px;gap:12px}
  .tutorial-choices strong{font-size:13px}.tutorial-choices small{font-size:11px}
  .studio-content{padding-top:34px;gap:28px}.studio-left h2{margin-block:22px}.studio{padding-bottom:44px}
  .help-layout{padding-top:28px;gap:28px}.faqs details{padding-block:12px}.faqs summary{font-size:15px;padding-block:14px}
}