/* Phone and touch refinements, loaded last on every page. */

/* Keep text at the intended size in landscape on iOS; remove the double-tap zoom delay on controls. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,[role="tab"]{touch-action:manipulation}

/* Touch screens: hover-only lifts would otherwise stick after a tap. */
@media(hover:none){
 .game-card:hover,.study-card:hover,.brand-link:hover,.store-button:hover,.studio-mini:hover,.devlog-teaser:hover,.panel-step:hover,.top-profiles a[lang]:hover{transform:none}
 .game-card::after,.study-card::after,.brand-link::before{display:none}
 .cover-link:hover .game-visual img,.promo-gallery a:hover img,.astral-menu-gallery figure:hover img{scale:1}
}

@media(max-width:700px){
 /* Readable small print: nothing under 10px. */
 .eyebrow,.poster-heading{font-size:10px!important;letter-spacing:1.2px}
 .poster-platform,.poster-index{font-size:10px!important}
 .poster-status,.release-status,.platform-tag{font-size:11px!important}
 .timeline-seg em{font-size:10px!important}
 footer{font-size:12px}
 /* Comfortable tap targets (about 44px). */
 nav>a:not(.brand){display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
 .brand{display:inline-flex;align-items:center;min-height:44px}
 .mini-game-tabs button,.mini-game-modes button{min-height:40px;padding:8px 12px}
 .timeline-track{min-width:0} /* lets the game names shrink to an ellipsis instead of widening the page */
 .timeline-seg{padding:14px 0 6px}
 .timeline-toggle{width:44px;height:44px}
 .studio-mini-link,.about-cv{display:inline-flex;align-items:center;min-height:44px}
 .contact-email{display:inline-flex;align-items:center;min-height:44px}
 .copy-email{min-height:44px}
 .poster-actions a,.poster-actions button{min-height:44px}
 /* Lighter rendering on phones: no large blurred layers, no drifting background. */
 .about-card{backdrop-filter:none;background:var(--soft)}
 .reveal{filter:none}
 body::before{animation:none}
 .poster-lights{filter:blur(14px)}
}

/* The intro card opens the landing page, so "About" can go on narrow phones. */
@media(max-width:480px){nav>a[href="#about"]{display:none}}

@media(max-width:380px){
 nav{gap:8px;padding:0 12px}
 .brand{font-size:16px}
 nav>a:not(.brand){font-size:11px}
 .mini-game-tabs button{padding:8px 9px;font-size:11px}
 .mini-game-canvas{height:240px}
}