/* Keep the opening actions visible on phones and short laptop screens. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
body.has-dialog { overflow:hidden; }
button,a { touch-action:manipulation; }
.city-title-short { display:none; }
.topbar { padding-top:env(safe-area-inset-top,0px); height:calc(104px + env(safe-area-inset-top,0px)); }
.game-layout { min-height:560px; }
.site-footer { padding-bottom:env(safe-area-inset-bottom,0px); height:calc(46px + env(safe-area-inset-bottom,0px)); }
.toast { bottom:max(20px,env(safe-area-inset-bottom,0px)); }
.close-btn,.deck-controls button { min-width:44px; min-height:44px; }
.deck-controls { flex-wrap:wrap; }
.deck-controls a { min-height:44px; display:inline-flex; align-items:center; }
.deck-controls a:last-child { margin-left:12px; }
.deck-dots button { position:relative; height:32px; background:transparent; }
.deck-dots button::before { content:''; position:absolute; left:0; right:0; top:13px; height:6px; border-radius:5px; background:#d7dccb; }
.deck-dots button.active { background:transparent; }
.deck-dots button.active::before { background:var(--green); }
dialog { max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch; }
.deck-frame img { object-fit:contain; max-height:calc(100dvh - 240px); }
.deck-controls #slide-full { margin-left:auto; }
.sources { margin-top:8px; }

@media(min-width:761px) and (max-height:850px) {
  .topbar { height:82px; }
  .game-layout { height:calc(100svh - 126px); min-height:548px; padding-top:12px; }
  .story { min-height:340px; padding:20px 24px 16px; }
  .story h2 { font-size:35px; margin-top:12px; }
  .session-bar { padding:16px 24px; }
  .impact-bar { padding:12px 24px; }
  .city-heading { top:14px; }
  .city-heading h1 { font-size:40px; }
  .city-heading p { font-size:12px; }
  .city-canvas-wrap,.map-actions { inset:80px -8% 20px; }
  .city-status { bottom:50px; }
  .city-caption { bottom:16px; }
  .zoom-controls { bottom:15px; }
  .site-footer { height:44px; }
}

@media(max-width:760px) {
  .topbar { height:calc(64px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 14px 0; gap:8px; }
  .brand { gap:7px; flex-shrink:0; }
  .brand strong { font-size:23px; }
  .brand small { font-size:9px; margin-top:3px; }
  .brand-mark { width:28px; height:34px; font-size:27px; }
  .topbar nav { gap:4px; }
  .desktop-word { display:none; }
  .nav-btn,.sound-btn,.share-btn { min-height:44px; }
  .nav-btn { padding:8px 5px; font-size:11px; }
  .sound-btn { min-width:38px; padding:8px; }
  .share-btn { padding:8px 12px; }
  .game-layout { min-height:0; height:auto; padding:0 12px; }
  .city-panel { height:clamp(180px,28svh,242px); margin:0 -12px; }
  .city-heading { top:12px; left:18px; }
  .city-heading .eyebrow,.city-heading p { display:none; }
  .city-heading h1 { font-size:12px; letter-spacing:1.1px; margin:0; line-height:1.2; font-family:var(--font); font-weight:600; text-transform:uppercase; }
  .city-title-long { display:none; }
  .city-title-short { display:block; }
  .city-canvas-wrap,.map-actions { inset:14px -10% 9px; }
  .city-status { font-size:10px; left:18px; bottom:0; right:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .map-pin { min-width:44px; min-height:44px; padding:7px; font-size:8px; gap:5px; }
  .map-pin small { display:none; }
  .map-pin:after { bottom:-3px; }
  .map-hq { display:none; }
  .zoom-controls { right:11px; bottom:16px; }
  .zoom-controls button { width:44px; height:44px; font-size:21px; }
  .play-panel { margin:12px 0 5px; scroll-margin-top:12px; }
  .session-bar { padding:9px 18px; min-height:47px; }
  .session-bar>span { font-size:8px; letter-spacing:1px; }
  .session-bar #pause { min-width:44px; min-height:44px; font-size:14px; margin:-7px 0; }
  .session-bar strong { font-size:22px; }
  .story { padding:18px; min-height:0; }
  .story .eyebrow { font-size:8px; letter-spacing:1px; }
  .story h2 { font-size:31px; margin:10px 0; letter-spacing:-.8px; }
  .story p { font-size:14px; line-height:1.5; margin-bottom:12px; }
  .intro-screen .story h2 br { display:none; }
  .intro-screen .story h2 { font-size:30px; }
  .intro-screen .story>.eyebrow { display:none; }
  .intro-screen .intro-people { margin:0 0 12px!important; }
  .intro-screen .intro-people .avatar { width:28px; height:28px; font-size:15px; border-width:2px; }
  .intro-screen .intro-people .avatar:nth-child(2),.intro-screen .intro-people .avatar:nth-child(3) { margin-left:-17px; }
  .intro-screen .impact-bar { display:none; }
  .primary,.secondary { min-height:48px; font-size:14px; }
  .story .tiny { font-size:10px; margin-top:9px; margin-bottom:0; }
  .mission-brief { margin-top:12px!important; font-size:14px!important; }
  .need-line { font-size:12px; padding:9px 10px; margin-bottom:14px; }
  .mission-top .avatar { width:39px; height:39px; }
  .story .mission-top h2 { font-size:23px; margin:0; }
  .option { padding:12px; min-height:70px; }
  .option strong { font-size:14px; }
  .option span { font-size:12px; }
  .evidence p { font-size:13px; }
  .deck-link { min-height:44px; display:inline-flex; align-items:center; margin-top:5px; font-size:11px; }
  .impact-bar { padding:10px 18px; gap:36px; }
  .impact-bar strong { font-size:24px; }
  .impact-bar small { font-size:10px; }
  .simulation-note { font-size:9px; padding:8px 12px; }
  .site-footer { height:auto; min-height:42px; padding:12px 16px max(12px,env(safe-area-inset-bottom,0px)); font-size:7px; }
  .deck-dialog { padding:14px; width:calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); }
  .dialog-top { margin-bottom:12px; gap:8px; }
  .dialog-top h2 { font-size:18px; }
  .dialog-top .eyebrow { font-size:7px; letter-spacing:1px; }
  .deck-controls { gap:6px; margin:9px 0 0; }
  .deck-controls>span { font-size:11px; }
  .deck-controls a { font-size:11px; }
  .deck-controls #slide-full { margin-left:auto; }
  .deck-controls a:last-child { flex-basis:100%; margin:0; justify-content:center; background:#edf0e3; border-radius:6px; }
  .deck-dots button { height:40px; }
  .deck-dots button::before { top:17px; }
  .sources { margin-top:0; }
  .sources summary { min-height:40px; padding-top:12px; }
  .pause-overlay { inset:50px 0 0; }
}
@media(max-width:360px) {
  .topbar #sound { display:none; }
  .intro-screen .story h2 { font-size:27px; }
  .story { padding:15px; }
  .intro-screen .intro-people { display:none; }
  .city-panel { height:170px; }
  .site-footer { letter-spacing:0; }
}
@media(max-width:760px) and (max-height:650px) and (orientation:portrait) {
  .intro-screen .intro-people { display:none; }
  .city-panel { height:160px; }
  .intro-screen .story h2 { font-size:28px; }
  .intro-screen .story { padding-top:13px; padding-bottom:13px; }
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  .topbar { height:58px; padding-top:0; }
  .brand strong { font-size:23px; }
  .topbar nav { gap:12px; }
  .game-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,46%); padding:12px 16px; gap:16px; min-height:0; height:auto; max-height:none; align-items:start; }
  .city-panel { position:sticky; top:12px; height:calc(100svh - 80px); min-height:220px; margin:0; }
  .city-heading { top:0; left:4px; }
  .city-heading h1 { font-size:26px; }
  .city-heading p,.city-heading .eyebrow { display:none; }
  .city-canvas-wrap,.map-actions { inset:20px -10% 12px; }
  .city-status { left:4px; bottom:0; font-size:10px; }
  .city-caption { display:none; }
  .play-panel { align-self:start; margin:0; }
  .story { padding:18px; min-height:0; }
  .story h2 { font-size:30px; }
  .session-bar { padding:12px 18px; }
  .intro-screen .impact-bar { display:none; }
  .intro-screen .intro-people,.intro-screen .story>.eyebrow,.intro-screen .story>.tiny { display:none; }
  .intro-screen .story h2 { font-size:28px; margin:6px 0 10px; }
  .intro-screen .story h2 br { display:none; }
  .intro-screen .story p { margin-bottom:12px; }
  .deck-frame img { max-height:calc(100dvh - 180px); }
  .deck-controls { margin:6px 0 0; }
  .deck-dots { display:none; }
  .sources { margin-top:0; }
  .dialog-top { margin-bottom:10px; }
}
@media(pointer:coarse) {
  .topbar button { min-height:44px; }
  .session-bar #pause { min-width:44px; min-height:44px; }
  .zoom-controls button { min-width:44px; min-height:44px; }
}