/* M4: capas históricas intactas; distribución y legibilidad de la aplicación. */
@media screen {
  html { scroll-behavior: auto; scroll-padding-top: 12px; }
  body.m4-layout { height:auto; min-height:100svh; overflow-x:hidden; font-size:16px; }
  body.m4-layout .topbar { position:relative; inset:auto; height:auto; min-height:64px; gap:12px; flex-wrap:wrap; padding: max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left)); background:#0c1729; }
  body.m4-layout .top-center { display:flex; font-size:12px; letter-spacing:0; }
  body.m4-layout .brand { font-size:13px; } body.m4-layout .brand small { font-size:10px; letter-spacing:1px; }
  body.m4-layout .scene-heading { position:relative; inset:auto; margin:14px 16px; }
  body.m4-layout .scene-heading h1 { font-size:clamp(24px,3vw,34px); margin:6px 0; }
  body.m4-layout .scene-heading>.eyebrow,body.m4-layout .scene-phase,body.m4-layout .round-tag { font-size:12px; letter-spacing:.5px; }
  body.m4-layout .game-hud { height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,350px); grid-template-areas:'map sidebar' 'party sidebar' 'mission sidebar' 'journal journal'; gap:16px; padding:0 max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); align-items:start; }
  body.m4-layout .game-hud>* { min-width:0; }
  body.m4-layout .game-hud>.map-panel { grid-area:map; position:relative; inset:auto; height:auto; min-height:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  body.m4-layout .map-stage { position:relative; inset:auto; height:clamp(360px,calc(100svh - 360px),600px); min-height:0; }
  body.m4-layout .map-toolbar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:12px; background:#102139; }
  body.m4-layout .camera-tools { position:static; inset:auto; transform:none; width:100%; display:flex; gap:8px; }
  body.m4-layout .camera-tools>span:not(.zoom-controls) { font-size:13px; line-height:1.5; order:2; }
  body.m4-layout .zoom-controls { display:flex; gap:8px; }
  body.m4-layout #quest-action { width:auto; flex:1; min-width:180px; }
  body.m4-layout .game-hud>.party-panel { grid-area:party; position:static; inset:auto; width:100%; }
  body.m4-layout .turn-sidebar>.action-panel { grid-area:action; position:static; inset:auto; width:100%; grid-template-columns:72px minmax(0,1fr); padding:16px; gap:12px; }
  body.m4-layout .game-hud>.mission-panel { grid-area:mission; position:static; inset:auto; width:100%; }
  body.m4-layout .turn-sidebar>.enemy-hud { grid-area:enemy; position:static; inset:auto; width:100%; }
  body.m4-layout .game-hud>.chronicle-button { grid-area:journal; position:static; inset:auto; justify-self:center; width:auto; }
  body.m4-layout .campaign-kicker { display:none; }
  body.m4-layout .story-details { border:1px solid var(--line); border-radius:8px; padding:12px; margin-top:12px; }
  body.m4-layout summary { cursor:pointer; padding:12px 6px; min-height:44px; font-size:16px; }
  body.m4-layout .objective h2 { font-size:24px; }
  body.m4-layout .objective p,body.m4-layout .objective-status,body.m4-layout .objective-chip,body.m4-layout .story-button,body.m4-layout .chapter-label { font-size:14px; line-height:1.6; }
  body.m4-layout .objective-meta { grid-template-columns:1fr 1fr; }
  body.m4-layout .eyebrow,body.m4-layout .panel-title h2,body.m4-layout .dock-heading h2,body.m4-layout .dock-heading span { font-size:12px; letter-spacing:.5px; }
  body.m4-layout .chapter-label small { font-size:11px; }
  body.m4-layout .enemy-name,body.m4-layout .enemy-name small,body.m4-layout .enemy-tag,body.m4-layout .turn-strip,body.m4-layout .counter { font-size:13px; }
  body.m4-layout .enemy { min-height:64px; }
  body.m4-layout .panel { background:#111f33; backdrop-filter:none; }
  body.m4-layout #party { gap:10px; }
  body.m4-layout .hero-card { transform:none; padding:10px 8px; box-shadow:none; }
  body.m4-layout .avatar { width:72px; height:72px; }
  body.m4-layout .hero-top,body.m4-layout .hero-content small,body.m4-layout .hp,body.m4-layout .muted { font-size:12px; }
  body.m4-layout .hero-content small { white-space:normal; }
  body.m4-layout .hero-detail-art { width:68px; height:76px; }
  body.m4-layout .hero-detail p,body.m4-layout .hero-detail .gold { font-size:12px; }
  body.m4-layout .action-title h2 { font-size:16px; }
  body.m4-layout .action-option { padding:10px 8px; min-height:72px; overflow-wrap:anywhere; }
  body.m4-layout .action-option span,body.m4-layout .action-option small { font-size:13px; line-height:1.45; }
  body.m4-layout .turn-phase { flex-direction:column; align-items:flex-start; text-align:left; gap:5px; }
  body.m4-layout .turn-phase strong,body.m4-layout .turn-phase span,body.m4-layout .turn-guide,body.m4-layout .turn-guide button { font-size:14px; line-height:1.5; text-align:left; }
  body.m4-layout .turn-sidebar>.action-panel .no-margin { font-size:12px!important; }
  body.m4-layout .professor-card p,body.m4-layout .professor-focus-info small { font-size:14px; }
  body.m4-layout button,body.m4-layout .secondary,body.m4-layout .primary { min-width:44px; min-height:44px; font-size:14px; touch-action:manipulation; }
  body.m4-layout .camera-tools .icon-button { width:44px; height:44px; font-size:20px; }
  body.m4-layout input,body.m4-layout select,body.m4-layout textarea { min-height:44px; font-size:16px!important; line-height:1.5; }
  body.m4-layout input[type=checkbox] { min-width:24px; min-height:24px; }
  body.m4-layout .actor-label { font-size:11px; max-width:110px; min-width:44px; min-height:44px; }
  body.m4-layout .world-hotspot { min-height:44px; font-size:13px; }
  body.m4-layout .world-hotspot small { font-size:11px; }
  body.m4-layout .fallback-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
  body.m4-layout .fallback-floor { fill:#19354b; stroke:#7096a8; stroke-width:.12; }
  body.m4-layout .fallback-grid .available { fill:#22c55e; fill-opacity:.32; stroke:#6eefa5; stroke-width:.12; }
  body.m4-layout .fallback-grid .blocked { fill:#ef4444; fill-opacity:.3; stroke-width:.08; stroke:#ed8b8b; }
  body.m4-layout .fallback-guide { font-size:14px; line-height:1.5; width:100%; color:#d1e7e9; }
  body.m4-layout .world-fallback #board { opacity:.3; }
  body.m4-layout .token,body.m4-layout .enemy-map-token { width:48px; height:48px; min-width:44px; min-height:44px; }
  body.m4-layout .token-label { top:48px; font-size:11px; }
  body.m4-layout dialog { position:fixed; inset:auto; left:50%; top:calc(var(--visual-top,0px) + var(--visual-height,100dvh)/2); transform:translate(-50%,-50%); margin:0; width:min(720px,calc(100% - 24px)); max-height:calc(var(--visual-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior:contain; scroll-padding-block:20px; }
  body.m4-layout .modal-body { padding:20px; }
  body.m4-layout .modal-body p,body.m4-layout .modal-body li,body.m4-layout .modal-body label,body.m4-layout .modal-head .eyebrow,body.m4-layout .utility-row button { font-size:16px; line-height:1.6; }
  body.m4-layout .modal-body h2 { font-size:clamp(24px,4vw,32px); }
  body.m4-layout .challenge-card .question { font-size:clamp(23px,4vw,30px); overflow-wrap:anywhere; }
  body.m4-layout .difficulty-label,body.m4-layout .card-footer,body.m4-layout .teacher-caption { font-size:12px; line-height:1.6; letter-spacing:.5px; }
  body.m4-layout .math-keys { display:flex; gap:8px; margin:8px 0; }
  body.m4-layout .math-keys button { font-size:20px; }
  body.m4-layout .rune-answer { flex-wrap:wrap; }
  body.m4-layout .rune-answer .math-keys { width:100%; }
  body.m4-layout .grade-row button { font-size:15px; }
  body.m4-layout #toast { bottom:max(16px,env(safe-area-inset-bottom)); font-size:16px; }
  body.m4-layout.cinema-mode .map-panel { position:fixed; inset:0; z-index:30; height:100dvh; border-radius:0; }
  body.m4-layout.cinema-mode .map-stage { height:100%; }
  body.m4-layout.cinema-mode .map-toolbar { display:none; }
  body.m4-layout.cinema-mode #leave-cinema { position:fixed; z-index:40; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }
  body.m4-layout.cinema-mode .cinema-caption { position:fixed; z-index:40; bottom:max(12px,env(safe-area-inset-bottom)); font-size:16px; }
  @media(max-width:1050px) { body.m4-layout .top-center { display:none; } body.m4-layout .game-hud { grid-template-columns:minmax(0,1fr) 300px; gap:12px; } }
  @media(max-width:900px) { body.m4-layout .game-hud { grid-template-columns:minmax(0,1fr); grid-template-areas:'map' 'party' 'sidebar' 'mission' 'journal'; } body.m4-layout .map-stage { height:clamp(320px,45svh,520px); } body.m4-layout .turn-sidebar>.action-panel { grid-template-columns:90px minmax(0,1fr); } body.m4-layout .avatar { height:64px; } body.m4-layout .topbar { gap:8px; } body.m4-layout .brand { font-size:12px; } body.m4-layout #enemies { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media(max-width:550px) { body.m4-layout .brand small { display:none; } body.m4-layout .brand-mark { display:none; } body.m4-layout #party { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; } body.m4-layout .avatar { height:48px; } body.m4-layout .hero-top { font-size:11px; } body.m4-layout .hero-content small { display:none; } body.m4-layout .scene-phase { flex-wrap:wrap; } body.m4-layout .header-actions { gap:4px; } body.m4-layout .game-hud { padding-inline:10px; } body.m4-layout .turn-sidebar>.action-panel { grid-template-columns:64px minmax(0,1fr); } }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
}
@media screen {
  body.m4-layout .camera-tools>.zoom-controls { width:auto; margin-top:0; order:0; }
  body.m4-layout .modal-body p[style*="font-size"],body.m4-layout #defense-instruction { font-size:14px!important; }
}

@media screen {
 body.m4-layout .turn-sidebar { grid-area:sidebar; min-width:0; display:flex; flex-direction:column; gap:16px; }
 body.m4-layout .turn-sidebar>.action-panel { display:flex; flex-direction:column; gap:12px; }
 body.m4-layout .turn-sidebar .hero-detail { flex-direction:row; justify-content:flex-start; align-items:center; gap:12px; }
 body.m4-layout .turn-sidebar .hero-detail p { text-align:left; }
 body.m4-layout .turn-sidebar .action-list { display:grid; grid-template-columns:1fr; gap:8px; }
 body.m4-layout .turn-sidebar .action-option { flex-direction:row; align-items:center; justify-content:space-between; min-height:48px; overflow-wrap:normal; }
 body.m4-layout .turn-sidebar .action-option>span { flex:1; font-size:14px; }
 body.m4-layout .turn-sidebar .action-option>small { text-align:right; }
 body.m4-layout .turn-sidebar .action-panel[data-turn-stage=movement] .turn-guide { order:-1; }
 body.m4-layout .turn-sidebar .action-panel[data-turn-stage=movement] .turn-phases { order:-2; }
 body.m4-layout .turn-sidebar .action-panel[data-turn-stage=movement] .turn-guide button { justify-content:center; }
}
@media screen {
 body.m4-layout .graphics-choice { display:flex; align-items:center; gap:8px; font-size:13px; }
 body.m4-layout .graphics-choice select { width:145px; padding:8px; }
 @media(max-width:1050px){body.m4-layout .graphics-choice>span { display:inline; }body.m4-layout .graphics-choice select { width:130px; }}
 @media(max-width:550px){body.m4-layout .graphics-choice select { width:130px; }body.m4-layout .header-actions { flex-wrap:wrap; }}
}
@media screen {
 body.m4-layout.cinema-mode .game-hud { opacity:1; pointer-events:none; }
 body.m4-layout.cinema-mode .game-hud>:not(.map-panel) { visibility:hidden; pointer-events:none; }
 body.m4-layout.cinema-mode #world-shell,body.m4-layout.cinema-mode #map-stage,body.m4-layout.cinema-mode #world-canvas canvas,body.m4-layout.cinema-mode #world-labels button,body.m4-layout.cinema-mode #tokens button { visibility:visible; pointer-events:auto; }
}
.mode-navigation {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.mode-navigation > a.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mode-navigation > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}