/* Compact reservations let actual ad content grow in normal flow without cropping. */
.mobile-device #map-tooltip{display:none!important}
.mobile-device .controls-note{display:flex}
.map-stage{-webkit-tap-highlight-color:transparent}
@media(max-width:1024px){
  .site-layout{
    display:flex;flex-direction:column;gap:12px;max-width:none;width:100%;margin:0;
    padding:10px max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .site-layout>main{width:100%;min-width:0}
  .site-layout>.ad-rail{
    --ad-tall:clamp(50px,8vw,72px);--ad-short:var(--ad-tall);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    inline-size:100%;width:100%;min-width:0;padding:0;background:transparent;position:static;
  }
  .site-layout>.ad-rail>.ad-slot{
    width:100%;min-width:0;height:auto;min-height:var(--ad-reserved-height);flex:none;
    border-radius:10px;position:relative;
  }
  .site-layout>.ad-rail>.ad-slot>span{top:8px;font-size:9px;letter-spacing:1.4px;padding-inline:5px}
  .setup-screen{padding:24px 20px 43px;min-height:0}
  .setup-content>h1{font-size:clamp(31px,5vw,42px)}
  .setup-intro{margin-bottom:22px}
  .atlas-home-grid{grid-template-columns:1fr;gap:20px}
  .atlas-home-grid #home-progress{order:1}
  .setup-fields{gap:18px}
  .scene-bottom{left:20px;right:20px;bottom:14px}
  .game-toolbar{padding:12px;gap:10px}
  .workspace{display:flex;flex-direction:column;padding:10px;gap:12px}
  .map-card,.game-sidebar{width:100%;min-width:0}
  .game-sidebar{order:-1}
  .activity-card{min-height:0;padding:14px}
  .activity-card .eyebrow{margin-bottom:10px}
  .activity-card h2{font-size:24px;line-height:1.2}
  .activity-card p{margin:8px 0}
  .score{margin-top:12px}
  .score>div{padding:9px}
  .map-tools{padding:11px 12px;flex-direction:row;align-items:center}
  .map-tools strong{font-size:13px;max-width:64%}
  .map-bottom{padding:10px 11px}
  .map-card .map-stage{width:100%;min-width:0}
  .controls-note{margin:12px 4px}
  .scope{margin:10px 4px}
  footer{padding:15px 4px 2px;gap:9px}
}

/* Small portrait headers use two balanced rows; language and voice can both shrink. */
@media(max-width:760px){
  .site-header{
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;
    height:auto;min-height:76px;
    padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  }
  .site-header .header-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;min-width:0}
  .site-header .language{display:flex;gap:4px;min-width:0;margin:0;padding:0;border:0}
  .site-header .language-icon{width:18px;height:18px;flex-shrink:0}
  .site-header .language-control{flex:1;min-width:0}
  .site-header .language-toggle{max-width:none;width:100%;font-size:11px;gap:5px;padding:7px 8px}
  .site-header .language-chevron{width:13px;height:13px}
  .site-header .voice-control{display:flex;gap:4px;min-width:0;margin:0}
  .site-header .voice-control>svg{width:18px;height:18px;flex-shrink:0}
  .site-header .voice-control select{width:100%;max-width:none;min-width:0;font-size:11px;padding:7px 4px}
  .site-header .voice-control button{flex:0 0 24px;width:24px;padding:3px}
  .site-header .voice-control button svg{width:17px;height:17px}
  .site-header .header-profile{min-width:0;padding-inline-start:8px}
  .site-header .header-profile .atlas-account-button{padding:5px;min-width:42px}
  .setup-screen{padding:22px 16px 42px;border-radius:20px}
  .scene-bottom{left:17px;right:17px}
  .setup-content>.eyebrow{letter-spacing:1.2px}
  .mode-description{font-size:13px}
  .map-tools .check{font-size:10px}
}

/* A 320 px phone can host familiar short banner proportions without clipping. */
@media(max-width:349px) and (orientation:portrait){
  .site-layout>.ad-rail{grid-template-columns:minmax(0,1fr);gap:6px}
  .site-layout>.ad-rail>.ad-slot{height:auto}
  .site-layout>.ad-rail>.ad-slot>span{top:8px}
  .site-header .brand{gap:6px}
  .site-header .brand strong{font-size:23px}
  .site-header .brand-sub{font-size:8px;letter-spacing:1.2px}
  .setup-screen{padding-inline:14px}
  .setup-content>h1{font-size:31px}
  .atlas-progress{padding:13px}
  .atlas-progress-stats{gap:6px}
  .atlas-progress-stats>div{padding:8px 6px}
  .answer-legend{grid-template-columns:1fr 1fr;font-size:10px}
}

/* Wider landscape phones and tablets keep two compact rails beside the game. */
@media(min-width:700px) and (max-width:1024px) and (orientation:landscape){
  .site-layout{
    display:grid;grid-template-columns:clamp(100px,11vw,120px) minmax(0,1fr) clamp(100px,11vw,120px);
    align-items:start;gap:8px;
    padding:8px max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .site-layout>.ad-rail{--ad-tall:clamp(84px,23dvh,120px);--ad-short:var(--ad-tall);display:flex;flex-direction:column;gap:10px;width:100%;padding:0}
  .site-layout>.ad-rail>.ad-slot{height:auto;min-height:var(--ad-reserved-height)}
  .site-layout>.ad-rail>.ad-slot>span{top:9px;font-size:8px;letter-spacing:1px}
  .site-header{display:flex;flex-wrap:wrap;min-height:66px;height:auto;gap:9px;padding:9px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left))}
  .site-header .brand{gap:8px}
  .site-header .brand-symbol{display:block;width:32px;height:32px;border-radius:10px}
  .site-header .brand strong{font-size:25px}
  .site-header .brand-sub{font-size:8px;letter-spacing:1.3px}
  .site-header .atlas-header-actions{margin-inline-start:auto;gap:5px}
  .site-header .atlas-header-actions button{padding:8px;font-size:12px;min-height:40px}
  .site-header .header-note{display:flex;flex:0 1 auto;flex-wrap:nowrap;gap:7px;width:auto;margin:0;min-width:0}
  .site-header .language{margin:0;padding:0;border:0;gap:4px}
  .site-header .language-icon,.site-header .voice-control>svg{width:18px;height:18px}
  .site-header .language-toggle{max-width:150px;width:auto;font-size:11px;padding:7px 8px;gap:5px}
  .site-header .voice-control{margin:0;gap:4px}
  .site-header .voice-control select{width:auto;min-width:70px;max-width:115px;font-size:11px;padding:7px 5px}
  .site-header .voice-control button{width:24px;padding:3px}
  .site-header .header-profile{padding-inline-start:8px}
  .site-header .header-profile .atlas-account-button{padding:5px;min-width:42px;justify-content:center}
  .site-header .header-profile .atlas-account-name,.site-header .header-profile .atlas-save-status{display:none}
  .setup-screen{padding:22px 16px 39px;border-radius:20px}
  .setup-content>h1{font-size:clamp(28px,3.5vw,36px);letter-spacing:-1px}
  .setup-intro{font-size:13px;margin-bottom:19px}
  .atlas-home-grid{grid-template-columns:minmax(0,1fr) minmax(180px,34%);gap:12px}
  .setup-fields{gap:15px}
  .field label{font-size:12px}
  .atlas-map-choice,.select-wrap>.mode-dropdown-trigger{font-size:13px;min-height:48px}
  .atlas-map-choice{padding:11px 13px}
  .mode-description{font-size:12px}
  .play-button{padding:13px 16px;font-size:16px}
  .atlas-progress{padding:13px}
  .atlas-progress-heading{gap:8px;font-size:13px}
  .atlas-progress-level{font-size:11px;padding:4px 5px}
  .atlas-progress-xp{font-size:11px;gap:6px}
  .atlas-progress-stats{gap:6px}
  .atlas-progress-stats>div{padding:8px 5px}
  .atlas-progress-stats strong{font-size:21px}
  .atlas-progress-stats span{font-size:10px}
  .atlas-progress-storage{font-size:10px}
  .workspace{display:grid;grid-template-columns:minmax(0,1fr) clamp(155px,29%,185px);align-items:start;gap:9px;padding:9px}
  .game-sidebar{order:0}
  .activity-card{padding:12px 10px}
  .activity-card .eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:9px}
  .activity-card h2{font-size:21px;letter-spacing:-.4px}
  .activity-card p,.feedback{font-size:12px;line-height:1.5}
  .meta{font-size:10px}
  .score{gap:6px;margin-top:12px}
  .score>div{padding:8px 5px;font-size:9px}
  .score strong{font-size:20px}
  .activity-card .place-heading .place-flag{width:36px;height:27px}
  .answer-legend{grid-template-columns:1fr 1fr;gap:6px;font-size:9px}
  .game-toolbar{padding:10px;gap:9px}
  .back-button{font-size:11px}
  .game-mode-label{gap:7px;font-size:10px}
  .game-mode-label>.mode-dropdown-trigger{font-size:12px;max-width:190px;padding:8px 10px;min-height:40px}
  .map-tools{padding:10px;gap:8px}
  .map-tools strong{font-size:12px}
  .map-tools .check{font-size:9px;gap:4px}
  .map-bottom{padding:9px;gap:8px;font-size:10px}
  .zoom button{padding:5px 7px;min-height:34px;font-size:10px}
  .controls-note{font-size:10px;gap:7px;line-height:1.6}
  .scope{font-size:10px}
  footer{font-size:9px;padding:12px 3px 0}
}

/* Narrow landscape retains the banner bands instead of squeezing the map. */
@media(max-width:699px) and (orientation:landscape){
  .site-layout>.ad-rail{--ad-tall:clamp(50px,16dvh,64px);--ad-short:var(--ad-tall)}
  .workspace{display:flex;flex-direction:column}
  .game-sidebar{order:-1}
}

/* The advisory is dismissible; it never locks portrait play. */
.orientation-dialog{
  width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);
  overflow:auto;overscroll-behavior:contain;box-sizing:border-box;
  margin:auto;padding:26px 24px 24px;border:2px solid #B8DBF2;border-radius:23px;
  background:#FFFFFF;color:#173C59;box-shadow:0 18px 65px #1746B42B;
  text-align:center;font:inherit;
}
.orientation-dialog::backdrop{background:#17355B73}
.orientation-dialog .orientation-message{font-size:17px;line-height:1.55;font-weight:650;color:#254B6E;margin:0 0 21px}
.orientation-dialog .orientation-accept{
  width:100%;min-height:46px;padding:12px 18px;border:2px solid #2563EB;border-radius:12px;
  background:#2563EB;color:#FFFFFF;font:inherit;font-weight:750;cursor:pointer;box-shadow:0 4px 0 #1746B4;
}
.orientation-dialog .orientation-accept:hover{background:#2F6FED;border-color:#2F6FED}
.orientation-dialog .orientation-accept:active{transform:translateY(3px);box-shadow:0 1px 0 #1746B4}
.orientation-dialog .orientation-accept:focus-visible{outline:3px solid #2563EB;outline-offset:4px}
.orientation-phone{
  display:block;width:92px;height:92px;margin:2px auto 18px;overflow:visible;color:#2563EB;
  fill:none;stroke:#2563EB;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transform-origin:center;animation:aulix-phone-turn 2.6s ease-in-out infinite;
}
@keyframes aulix-phone-turn{
  0%,15%{transform:rotate(0deg)}
  45%,72%{transform:rotate(-90deg)}
  100%{transform:rotate(0deg)}
}
@media(max-width:349px){.orientation-dialog{padding:22px 18px}.orientation-dialog .orientation-message{font-size:16px}}
@media(prefers-reduced-motion:reduce){
  .orientation-phone{animation:none;transform:none}
  .orientation-dialog .orientation-accept:active{transform:none}
}