/*
 * Narrow-viewport, touch, and reduced-motion overrides. Loaded last so
 * these win in the cascade.
 */
@media (max-width:640px){
  .brand-name{font-size:30px}
  .skyswitch span{display:none}
  .skyswitch button{padding:6px 9px}
  .dock{gap:12px}
  .dock-text strong{font-size:22px}
  .stats{flex-direction:column;align-items:flex-end}
  .rs-line{grid-template-columns:1fr}
  .scroll{--sw:min(330px,calc(100vw - 48px));position:fixed;left:0;right:0;margin:0 auto;top:calc(max(16px,env(safe-area-inset-top)) + 196px);z-index:7}
  .scroll.rolled{--sw:112px;position:relative;left:auto;right:auto;top:auto;margin:8px 9px 0 0;z-index:auto}
  body.map-open .dock,body.map-open .joystick,body.map-open .toast{visibility:hidden}
  .rs-right{text-align:left}
  .brand-role{font-size:14px;margin-bottom:10px}
  .chipbtn{font-size:13px;padding:6px 12px}
  .toast{top:auto;bottom:calc(120px + env(safe-area-inset-bottom))}
  .panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:84dvh;border-radius:20px 20px 0 0;padding:22px 20px calc(30px + env(safe-area-inset-bottom));transform:translateY(105%)}
  .panel.open{transform:none}
  .p-work{grid-template-columns:1fr;gap:16px}
  .p-work .cover{aspect-ratio:5/3}
  .sheet{padding:30px 20px 36px;margin:0 0 40px;border-radius:0;font-size:14px}
  .rs-head h1{font-size:42px}
}
.touch .dock{bottom:calc(166px + env(safe-area-inset-bottom))}
.touch .toast{top:auto;bottom:calc(272px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion: reduce){
  .panel,.plain,.resume,.dock,.toast,.hint,.intro,.scroll-body{transition-duration:.01s !important}
  .smap .is-target .sm-ring{animation:none}
}