/* Phone readability, touch targets, and Safari safe areas. Zoom remains enabled. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:180px;scroll-behavior:auto}
body{padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
button{touch-action:manipulation}
button,a,input{-webkit-tap-highlight-color:#cefa5233}
.button,.text-button,.music-dock button{min-height:44px}
.music-dock{-webkit-backdrop-filter:blur(12px);bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(18px + env(safe-area-inset-right,0px));max-width:calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
.music-system-volume{max-width:140px;color:#bcbac8;font-size:11px;line-height:1.5}
.has-background-music .site-shell{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))}
.choice-copy,.tie-note,.intro-desc,.panel-note{overflow-wrap:break-word}
.hero-copy,.result-title,.music-dock-copy>span{min-width:0}
@media(max-width:620px){
  .button{font-size:13px}
  .text-button{font-size:12px}
  .choice{min-height:72px}
  .choice-copy{font-size:14px;line-height:1.65}
  .question-card h1{font-size:clamp(25px,7.2vw,30px)}
  .intro-desc,.intro-note{font-size:13px}
  .intro-roster>span{font-size:12px;min-width:0}
  .intro-roster small{font-size:10px;margin-top:0}
  .result-title h1{font-size:clamp(36px,12vw,50px)}
  .result-reading{font-size:15px}
  .panel-note,.notice{font-size:12px}
  .score-label,.reason-name{font-size:12px}
  .score-ends,.reason-label{font-size:10px}
  .other-row{font-size:13px;grid-template-columns:24px minmax(0,1fr) auto}
  .other-row small{font-size:10px;max-width:130px;overflow-wrap:break-word}
  .quiz-kicker{font-size:10px}
  .topbar-note{max-width:62%;text-align:right;line-height:1.5}
  #music-dock{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:none}
  #music-dock .music-dock-controls{flex-wrap:wrap;row-gap:8px}
  .music-volume input{min-height:44px;font-size:16px}
  .has-background-music .site-shell{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:500px) and (orientation:landscape){
  #music-dock{padding:8px 12px;gap:8px}
  .has-background-music .site-shell{padding-bottom:calc(155px + env(safe-area-inset-bottom,0px))}
}
@media(hover:none){.button:hover:not(:disabled){transform:none}}