/* Frame fitting: phones stack the windows two by two, short frames trim words, tiny frames keep only names. */
@media(max-width:640px){
 .city{gap:14px;padding:max(20px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}
 .city h1{font-size:clamp(28px,9vw,38px)}
 .intro-line{font-size:12.5px;max-width:330px}
 .gates{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
 .gate{padding:12px}
 .gate strong{font-size:21px}
 .gate span{font-size:12px}
 .small{font-size:11px;max-width:300px}
 .hint{bottom:calc(112px + env(safe-area-inset-bottom))}
 .dock{gap:10px}
 .tally{gap:2px 14px}
}
@media(max-width:420px){.tally-all{display:none}}
@media(max-height:520px){
 .city{gap:10px;padding:12px 16px 10px}
 .eyebrow,.intro-line,.small{display:none}
 .city h1{font-size:clamp(22px,3.6vw,30px)}
 .place-note{display:none}
 .hint{bottom:calc(64px + env(safe-area-inset-bottom))}
 .experience::before{height:90px}
 .experience::after{height:110px}
}
@media(max-height:520px) and (max-width:640px){
 .hint{bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(max-width:360px),(max-height:380px){
 #top{padding:10px 10px 0}
 #scene-name{font-size:16px}
 #back{height:30px;padding:0 11px;font-size:11px;gap:6px}
 .city{gap:8px;padding:10px 10px 8px}
 .city h1{font-size:21px;letter-spacing:.04em}
 .gates{gap:8px}
 .gate{padding:9px}
 .gate strong{font-size:16px}
 .dock{gap:6px 8px;padding:0 10px 10px}
 .tally{font-size:8.5px;gap:0 10px}
 .tally strong{font-size:11.5px;margin-left:4px}
 .tally-all{display:none}
 .controls{gap:5px}
 .controls button,.options summary{height:30px;padding:0 10px;font-size:11px;gap:6px}
 .options-panel{padding:10px 12px;gap:7px;font-size:10px}
 .options-panel select{height:28px;min-width:96px;font-size:12px}
 .hint{bottom:78px;font-size:11.5px}
 .connection{font-size:11px;padding:6px 11px}
 body:not([data-scene=city]) .connection{top:46px}
 #link-dialog{padding:16px 16px 14px;max-height:calc(100dvh - 16px);overflow:auto}
 #link-dialog h2{font-size:19px}
 #link-dialog p{font-size:11.5px}
 #link-dialog label{margin-top:10px}
 #link-dialog input{height:36px}
 .dialog-actions{margin-top:14px}
 .dialog-actions button{height:34px;padding:0 13px;font-size:12px}
}
@media(max-height:380px) and (min-width:500px){.hint{bottom:56px}}