/* Welcome-only phone composition. Desktop and other game screens keep their layout. */
@media (max-width:600px){
 #shell.on-title{--hud-height:64px}
 .on-title #hud{height:var(--hud-height);padding:8px 14px}
 .on-title .game-brand .brand-mark{width:34px;height:42px;font-size:23px}
 .on-title #hud .game-brand>span:last-child{font-size:12px;line-height:1.5}
 .on-title #hud .game-brand small{font-size:8px;letter-spacing:.7px}
 .on-title #hud .sound-button{width:38px;height:38px;min-width:38px;font-size:22px}
 .on-title #screen{min-height:0}
 .time-gate{height:calc(100svh - var(--hud-height));height:calc(100dvh - var(--hud-height));min-height:0;container-type:size;padding:22px 22px calc(82px + env(safe-area-inset-bottom));box-sizing:border-box}
 .time-gate .title-content{width:min(100%,420px);height:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto clamp(150px,32cqh,240px) auto auto auto;grid-template-areas:'eyebrow' 'title' 'slogan' 'description' 'start';align-content:space-between;align-items:center;justify-items:center;gap:clamp(10px,1.8cqh,18px)}
 .time-gate .title-content .eyebrow{grid-area:eyebrow;max-width:100%;font-size:clamp(11px,3vw,13px);font-weight:600;letter-spacing:1.2px;line-height:1.6;margin:0;text-wrap:balance}
 .time-gate .title-content h1{grid-area:title;align-self:center;margin:0;padding:8px 0;font-size:clamp(58px,min(20vw,15cqh),88px);line-height:1.12;letter-spacing:0;max-width:100%}
 .time-gate .title-content h1 br{display:block}
 .time-gate .title-content h1 em{display:inline;margin:0}
 .time-gate .title-rule{display:none}
 .time-gate .title-content h2{grid-area:slogan;width:100%;max-width:24ch;font-size:clamp(19px,5vw,23px);line-height:1.45;margin:0;text-wrap:balance}
 .time-gate .title-content>p:not(.eyebrow){grid-area:description;width:100%;max-width:29ch;margin:0;font-size:clamp(15px,3.9vw,17px);line-height:1.65;text-wrap:balance;color:#dce5db}
 .time-gate .gate-start{grid-area:start;align-self:end;width:100%;max-width:355px;min-height:64px;margin:5px 0 0;padding:12px 25px;border-radius:14px;font-size:clamp(26px,7.1vw,31px);line-height:1.25;box-sizing:border-box}
 .time-gate .gate-start span{max-width:100%}
 .gate-depth{inset:10px 8px 58px}
 .gate-drum{top:40%;width:min(calc(100vw - 20px),410px,calc(100dvh - var(--hud-height) - 50px));opacity:.36}
 .time-gate:after{background:radial-gradient(ellipse at 50% 35%,#07191e22 5%,#07191e55 42%,#07191ed9 80%)}
 .time-gate>.welcome-music-status{left:18px;right:72px;width:auto;padding:0;min-height:28px;bottom:calc(20px + env(safe-area-inset-bottom));justify-content:center;text-align:center;font-size:10px;letter-spacing:.15px;line-height:1.5}
 .time-gate .gate-audio{right:16px;bottom:calc(14px + env(safe-area-inset-bottom));width:44px;min-width:44px;height:44px}
 /* Touch uses a clear pressed state rather than a lingering hover lift. */
 @media (hover:none){
  .time-gate .gate-start:hover:not(:active){transform:none;filter:none;box-shadow:0 3px 5px #49311b88,0 7px 20px #0005,inset 0 0 18px #88632433}
  .time-gate .gate-start:active{transform:translateY(2px) scale(.98);filter:brightness(1.12);box-shadow:0 0 20px #e5b75766,inset 0 2px 10px #88632444}
 }
}
@media (max-width:600px) and (max-height:680px){
 .time-gate{padding:14px 20px calc(72px + env(safe-area-inset-bottom))}
 .time-gate .title-content{gap:9px;grid-template-rows:auto clamp(130px,30cqh,190px) auto auto auto}
 .time-gate .title-content h1{font-size:clamp(54px,min(18vw,14cqh),70px);padding:4px 0}
 .time-gate .title-content h2{font-size:19px;line-height:1.4}
 .time-gate .title-content>p:not(.eyebrow){font-size:15px;line-height:1.55}
 .time-gate .gate-start{min-height:60px;font-size:27px;padding:10px 23px}
}
@media (max-width:600px) and (max-height:540px){
 /* Keep all copy reachable at extreme height / enlarged browser text. */
 .time-gate{height:auto;min-height:calc(100svh - var(--hud-height));container-type:normal;padding-top:18px}
 .time-gate .title-content{height:auto;grid-template-rows:auto 135px auto auto auto}
 .time-gate .title-content h1{font-size:56px}
}
@media (min-width:601px) and (max-width:950px) and (max-height:500px) and (pointer:coarse){
 #shell.on-title{--hud-height:60px}
 .on-title #hud{height:60px;padding:7px 16px}
 .time-gate{height:calc(100dvh - var(--hud-height));min-height:0;padding:14px 30px calc(62px + env(safe-area-inset-bottom));container-type:size}
 .time-gate .title-content{display:grid;width:100%;max-width:900px;height:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:'eyebrow slogan' 'title slogan' 'title description' 'title start';gap:8px 30px;align-items:center;justify-items:center;margin:0 auto}
 .time-gate .title-content .eyebrow{grid-area:eyebrow;font-size:10px;letter-spacing:1px;margin:0}
 .time-gate .title-content h1{grid-area:title;font-size:clamp(50px,min(9vw,29cqh),76px);line-height:1.05;margin:0}
 .time-gate .title-content h1 br{display:block}
 .time-gate .title-content h1 em{display:inline;margin:0}
 .time-gate .title-rule{display:none}
 .time-gate .title-content h2{grid-area:slogan;font-size:20px;line-height:1.4;margin:0}
 .time-gate .title-content>p:not(.eyebrow){grid-area:description;font-size:15px;line-height:1.5;margin:0}
 .time-gate .gate-start{grid-area:start;min-height:58px;width:100%;font-size:27px;margin:0;padding:8px 23px}
 .gate-drum{left:26%;top:48%;width:min(40vw,calc(100dvh - 90px));opacity:.36}
 .time-gate>.welcome-music-status{bottom:18px;padding:0 75px;font-size:10px}
 .time-gate .gate-audio{bottom:10px;right:16px;width:44px;min-width:44px;height:44px}
}
@media (min-width:601px) and (max-width:950px) and (max-height:340px) and (pointer:coarse){
 .time-gate{height:auto;min-height:calc(100svh - var(--hud-height))}
 .time-gate .title-content{height:auto;min-height:210px}
}
@media (prefers-reduced-motion:reduce) and (max-width:600px){.time-gate .gate-start:active{transform:none}}