/* FlowGrid v0.106 UI foundation.
   This file is intentionally loaded LAST. It is the canonical layout/safety layer
   for shared spacing, responsive containment, safe areas, and modal behavior. */
:root{
  --fg-space-1:4px;
  --fg-space-2:8px;
  --fg-space-3:12px;
  --fg-space-4:16px;
  --fg-space-5:20px;
  --fg-page-pad-desktop:14px;
  --fg-page-pad-tablet:10px;
  --fg-page-pad-mobile:8px;
  --fg-card-radius:16px;
  --fg-control-height:42px;
  --fg-mobile-nav-reserve:88px;
  --fg-content-max:1600px;
}

/* Universal containment: no page or game surface may create accidental x-scroll. */
html,body,#app{width:100%;max-width:100%}
html,body{overflow-x:clip}
.fg-app-shell,.fg-content-shell,.fg-home-shell,.fg-home-hero,.fg-home-hero-copy,
.fg-home-scene,.fg-player-strip,.fg-mode-grid,.fg-mode-panel,.fg-info-page,
.fg-journey-page,.journey-current-card,.journey-history,.journey-history-grid,
.game-shell,.game-frame,.game-topbar,.puzzle-layout,.arcade-layout,.mini-layout,
.turn-battle-layout,.turn-battle-stage,.turn-battle-rail,.battle-lobby,.battle-setup,
.board-wrap,.game-board,.mode-rail,.rail-card{min-width:0;max-width:100%}
img,svg,canvas{max-width:100%}

/* Shared component rhythm. Existing mode-specific colors and dimensions remain intact. */
.rail-card,.journey-current-card,.journey-progress-card>div,.journey-history-node,
.fg-how-card,.fg-guide-tip{overflow-wrap:anywhere}
.primary-btn,.secondary-btn,.ma-primary,.ma-secondary{touch-action:manipulation}
.modal-layer{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.result-card,.auth-card,.leaderboard-modal,.support-modal,.achievement-modal{max-width:min(94vw,760px);overscroll-behavior:contain}

/* Desktop contract: generous page padding, fixed central game hierarchy, no viewport overflow. */
@media(min-width:1001px){
  .fg-app-shell{width:min(100%,var(--fg-content-max));margin-inline:auto;padding:var(--fg-page-pad-desktop)}
  .game-shell{padding:10px}
  .game-frame{max-width:calc(100vw - 20px)}
  .game-topbar{flex:0 0 auto}
  .board-wrap,.game-board{max-width:min(var(--board-size),calc(100vw - 20px))}
  .fg-home-hero-copy .fg-top-actions{align-items:stretch}
  .fg-home-hero-copy .fg-top-actions>button{min-height:var(--fg-control-height)}
}

/* Tablet / phone contract: one safe-area-aware page gutter and one bottom-nav reserve. */
@media(max-width:1000px){
  .fg-app-shell{padding:var(--fg-page-pad-tablet) var(--fg-page-pad-tablet) calc(var(--fg-mobile-nav-reserve) + env(safe-area-inset-bottom))!important}
  .fg-content-shell,.fg-home-shell{width:100%;max-width:100%}
  .fg-mobile-nav{left:var(--fg-page-pad-tablet)!important;right:var(--fg-page-pad-tablet)!important;bottom:max(8px,env(safe-area-inset-bottom))!important}

  body.game-active,body.game-active #app{width:100%;max-width:100%;overflow-x:clip}
  body.game-active .game-shell{width:100%;max-width:100%;padding:max(6px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));overflow-x:clip}
  body.game-active .game-frame{width:100%;max-width:100%;margin-inline:auto!important}
  body.game-active .board-wrap,body.game-active .game-board{max-width:100%}
  .turn-battle-frame,.turn-battle-layout,.turn-battle-stage,.turn-battle-board,.turn-battle-status,.turn-battle-rail,
  .puzzle-frame,.puzzle-layout,.puzzle-stage,.puzzle-left-rail,.puzzle-right-rail,
  .arcade-frame,.arcade-layout,.arcade-stage,.mini-frame,.mini-layout,.mini-stage{min-width:0;max-width:100%}

  /* Journey pages always keep breathing room even when generic mobile styles change later. */
  .fg-journey-page{padding-left:var(--fg-page-pad-tablet)!important;padding-right:var(--fg-page-pad-tablet)!important}
  .journey-pagination{max-width:100%}
  .journey-page-btn,.journey-page-status{min-width:0}
}

@media(max-width:700px){
  .fg-app-shell{padding-left:var(--fg-page-pad-mobile)!important;padding-right:var(--fg-page-pad-mobile)!important}
  .fg-mobile-nav{left:var(--fg-page-pad-mobile)!important;right:var(--fg-page-pad-mobile)!important}
  .fg-content-top,.fg-section-title,.journey-history-head{min-width:0}
  .fg-home-hero,.fg-player-strip,.fg-mode-panel{width:100%;max-width:100%}
  .fg-journey-page{padding-left:var(--fg-page-pad-mobile)!important;padding-right:var(--fg-page-pad-mobile)!important}
  .journey-pagination{grid-template-columns:34px minmax(0,1fr) minmax(84px,auto) minmax(0,1fr) 34px}
  .modal-layer{padding:max(9px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .result-card,.auth-card,.leaderboard-modal,.support-modal,.achievement-modal{width:100%;max-width:calc(100vw - 16px);max-height:calc(100dvh - 18px)}
  .leader-filter{-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .leader-filter::-webkit-scrollbar{display:none}
}

/* Installed iOS/Android PWA: keep the same CSS-width cap as browser tabs. */
@media(display-mode:standalone) and (max-width:1000px){
  body.game-active .game-shell{padding-left:max(var(--fg-page-pad-mobile),env(safe-area-inset-left));padding-right:max(var(--fg-page-pad-mobile),env(safe-area-inset-right))}
  .turn-battle-frame,.turn-battle-layout,.turn-battle-stage,.turn-battle-board{max-width:100%!important}
}

/* v0.106 Battle hardening: exact mobile containment, readable controls, saved-pipe bank. */
.battle-fallback-note{margin:4px 0 0;text-align:center;color:#365c6d;font-size:.78rem}
.battle-fallback-note strong{display:inline-block;min-width:3.3em;color:#0c8e9d;font-size:1.05rem;font-variant-numeric:tabular-nums}
.battle-fallback-sub,.battle-resume-note{display:block;max-width:390px;text-align:center;color:var(--muted);font-size:.62rem;line-height:1.35}
.battle-bank{display:grid;gap:5px;min-width:0;padding-top:2px;border-top:1px solid var(--line)}
.battle-bank-head{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#168b9b;font-size:.52rem;font-weight:900;letter-spacing:.08em}
.battle-bank-head b{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#e8f6f8;color:#167e8e;font-size:.58rem}
.battle-bank-scroll{display:flex;gap:6px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 1px 5px;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.battle-bank-item{flex:0 0 68px;min-width:68px;height:70px;padding:3px;border:1px solid var(--line);border-radius:10px;background:#f7fbfc;color:#355768;display:grid;grid-template-rows:48px auto;place-items:center;gap:1px;scroll-snap-align:start}
.battle-bank-item span{width:48px;height:48px;display:grid;place-items:center;overflow:hidden}.battle-bank-item svg{width:46px;height:46px}
.battle-bank-item b{max-width:62px;font-size:.46rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-bank-item.selected{background:#fff3bc;border-color:#d5aa2b;box-shadow:inset 0 0 0 1px #d5aa2b}.battle-bank-item:disabled{opacity:.56}
.battle-bank-empty{flex:1 0 100%;padding:8px 4px;color:var(--muted);font-size:.56rem;text-align:center}
.turn-draw-piece.saved-draw{grid-template-columns:1fr;max-width:100%;text-align:center}.turn-draw-piece.saved-draw small{max-width:180px;font-size:.52rem;line-height:1.25;color:var(--muted)}
.turn-battle-status small{white-space:normal;line-height:1.25}

@media(max-width:1000px){
  /* Do not let iOS standalone layout viewport or a stale --board-size push Battle wider than the real content box. */
  body.game-active .battle-shell{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .turn-battle-frame{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .turn-battle-layout{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;overflow-x:hidden!important}
  .turn-battle-stage{width:min(var(--board-size),100%)!important;max-width:100%!important;min-width:0!important}
  .turn-battle-board{width:100%!important;height:auto!important;max-width:100%!important;min-width:0!important;aspect-ratio:1/1!important}
  .turn-battle-status,.turn-battle-rail,.battle-mobile-strip{width:100%!important;max-width:100%!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important}
  .turn-battle-rail{grid-template-columns:minmax(0,1fr)!important}
  .turn-card{width:100%;min-width:0}
  .turn-actions{width:100%;min-width:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .turn-actions [data-turn-rotate]{grid-column:1/-1}
  .turn-actions button{min-width:0!important;min-height:38px;padding:0 8px!important;font-size:.62rem!important;line-height:1.1;white-space:nowrap}
  .battle-bank-scroll{width:100%;max-width:100%}
  .battle-bank-item{flex-basis:64px;min-width:64px}
}
@media(display-mode:standalone) and (max-width:1000px){
  .turn-battle-stage{width:100%!important}
  .turn-battle-board{width:100%!important;height:auto!important;max-width:100%!important}
}

/* Battle client/server release mismatch guard. */
.battle-server-warning{margin:8px 10px 0;padding:9px 12px;border-radius:10px;background:#fff3cd;color:#6b4f00;font-weight:800;font-size:.78rem;text-align:center}