.mobile-close,.mobile-dock,.mobile-panel-backdrop{display:none}

@media(max-width:760px){
  html,body{overscroll-behavior:none}
  .app-shell{grid-template-columns:1fr;grid-template-rows:60px minmax(0,1fr);height:100dvh}
  .topbar{height:60px;gap:7px;padding:7px 8px;padding-top:max(7px,env(safe-area-inset-top));z-index:24}
  .brand{flex:0 0 40px;min-width:40px}
  .brand img{width:38px;height:38px}
  .brand span,.world-name,.top-actions{display:none}
  .timeline-controls{display:grid;grid-template-columns:minmax(0,1fr) 84px 40px;gap:6px;min-width:0;width:100%;margin:0}
  .timeline-controls select,.timeline-controls input,.timeline-controls button{display:block!important;width:100%;height:42px;min-width:0;padding:0 9px;border-radius:11px;font-size:13px}
  .timeline-controls button{position:relative;padding:0;font-size:0}
  .timeline-controls button::before{content:"✓";display:grid;place-items:center;font-size:18px;font-weight:900}
  .map-workspace{grid-column:1;grid-row:2;inset:auto;min-height:0;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .canvas-stage{inset:0 0 calc(64px + env(safe-area-inset-bottom))}
  .tool-rail{left:8px;right:8px;top:8px;transform:none;display:flex;gap:3px;overflow-x:auto;padding:5px;border-radius:13px;scrollbar-width:none}
  .tool-rail::-webkit-scrollbar{display:none}
  .tool-rail button{flex:0 0 42px;width:42px;height:42px;font-size:18px}
  .tool-rail button span,.tool-rail button:hover span{display:none}
  .tool-rail>i{flex:0 0 1px;width:1px;height:32px;margin:5px 2px}
  .map-hud-left{left:8px;right:auto;top:62px;max-width:calc(100% - 16px);padding:8px 10px}
  .map-hud-left strong,.map-hud-left span{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .map-hud-right{right:8px;top:auto;bottom:12px}
  .map-hud-right button{min-width:36px;height:36px}
  .map-hud-right span{min-width:42px}
  .map-hud-bottom{left:8px;right:auto;bottom:12px;transform:none;max-width:calc(100% - 190px);gap:6px;padding:6px 8px}
  .map-hud-bottom label{gap:5px}
  .map-hud-bottom input{width:min(100px,24vw)}
  .map-hud-bottom>span{display:none}
  .map-hint{top:54%;width:calc(100% - 48px);padding:16px 18px}
  .map-hint>span{font-size:29px}
  .map-hint p{font-size:11px}
  .countries-panel,.story-panel{position:fixed;top:60px;bottom:calc(64px + env(safe-area-inset-bottom));z-index:32;width:min(88vw,350px);transition:transform .22s ease;box-shadow:0 0 50px rgba(0,0,0,.5)}
  .countries-panel{left:0;grid-template-rows:auto minmax(0,1fr) auto;transform:translateX(-105%);border-right:1px solid var(--line)}
  .story-panel{right:0;width:min(92vw,380px);transform:translateX(105%);border-left:1px solid var(--line)}
  body.mobile-countries-open .countries-panel{transform:translateX(0)}
  body.mobile-story-open .story-panel{transform:translateX(0)}
  .countries-panel>header{padding:14px 14px 10px}
  .countries-panel>header>div{display:flex;gap:7px}
  .countries-panel>header button{width:40px;height:40px}
  .tabs{grid-template-columns:1fr 1fr 40px;gap:4px;padding:8px}
  .mobile-close{display:grid!important;place-items:center;border:1px solid var(--line)!important;background:var(--panel-2)!important;color:var(--text)!important;font-size:20px!important}
  .tab-panel{height:calc(100% - 55px);padding:16px}
  .structure-card{min-height:92px;padding:12px}
  .mobile-panel-backdrop{position:fixed;inset:60px 0 calc(64px + env(safe-area-inset-bottom));z-index:30;display:block;background:rgba(4,6,10,.58);opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
  body.mobile-countries-open .mobile-panel-backdrop,body.mobile-story-open .mobile-panel-backdrop{opacity:1;pointer-events:auto}
  .mobile-dock{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:repeat(4,1fr);height:calc(64px + env(safe-area-inset-bottom));padding:5px 6px max(5px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(16,18,25,.97);backdrop-filter:blur(18px)}
  .mobile-dock button{display:grid;place-items:center;align-content:center;gap:2px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:9px;font-weight:800;cursor:pointer}
  .mobile-dock button span{font-size:19px;line-height:1}
  .mobile-dock button.is-active{background:color-mix(in srgb,var(--accent) 18%,var(--panel-2));color:var(--text)}
  .country-dialog{max-height:calc(100dvh - 24px);overflow:auto;border-radius:18px}
  .country-dialog form{gap:12px;padding:16px}
  .country-form-grid{grid-template-columns:1fr 110px}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom));width:calc(100% - 28px);text-align:center}
}

@media(max-width:380px){
  .timeline-controls{grid-template-columns:minmax(0,1fr) 72px 38px}
  .timeline-controls select,.timeline-controls input{font-size:12px;padding:0 7px}
  .map-hud-bottom{display:none}
  .map-hud-left strong,.map-hud-left span{max-width:210px}
}