/* GO ARENA Phase 9 — single final layout layer; intentionally scoped to play panels. */
:root{--p9-bg:#f3f8f7;--p9-ink:#102c35;--p9-accent:#087f79;--p9-gold:#c9a064}
#gamePanel,#trainingPanel,#scenarioPanel{color:var(--p9-ink);background:linear-gradient(145deg,#ffffff 0%,#f7faf9 100%);border:1px solid #dce9e5;border-radius:24px;box-shadow:0 18px 55px rgba(11,44,52,.09);min-width:0}
#gamePanel .gameTop,#trainingPanel .gameTop,#scenarioPanel .gameTop{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
#gamePanel .gameTopActions,#trainingPanel .gameTopActions,#scenarioPanel .gameTopActions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#gamePanel .gameTopActions button,#trainingPanel .gameTopActions button,#scenarioPanel .gameTopActions button{width:auto;min-height:42px;white-space:nowrap;margin:0}
#gamePanel .gameLayout,#trainingPanel .gameLayout,#scenarioPanel .gameLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(255px,315px);gap:clamp(12px,2vw,24px);align-items:start;min-width:0}
#gamePanel .gameLayout>div,#trainingPanel .gameLayout>div,#scenarioPanel .gameLayout>div{min-width:0}
#gamePanel .boardOuter,#trainingPanel .boardOuter,#scenarioPanel .boardOuter{width:min(100%,690px);max-width:100%;aspect-ratio:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin-inline:auto;padding:clamp(7px,1.2vw,14px);background:linear-gradient(135deg,#b98a56,#e6c292 22%,#dab27c 75%,#ad7946);border:1px solid #b1895f;border-radius:20px;box-shadow:0 12px 24px rgba(79,55,27,.16);min-height:0}
#gamePanel canvas,#trainingPanel canvas,#scenarioPanel canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-width:100%;touch-action:manipulation;cursor:crosshair}
#gamePanel .gameLayout aside,#trainingPanel .gameLayout aside,#scenarioPanel .gameLayout aside{min-width:0;box-sizing:border-box;background:#fff;border:1px solid #ddeae7;border-radius:19px;padding:clamp(12px,1.7vw,22px);box-shadow:0 8px 26px rgba(22,55,62,.06)}
#gamePanel aside button,#trainingPanel aside button,#scenarioPanel aside button{min-height:43px}
#gamePanel .fullscreenBtn,#trainingPanel .fullscreenBtn,#scenarioPanel .fullscreenBtn{background:#0d5655;color:#fff;border:1px solid #0d5655;border-radius:12px;font-weight:700}
#gamePanel .fullscreenBtn:hover,#trainingPanel .fullscreenBtn:hover,#scenarioPanel .fullscreenBtn:hover{background:#087f79}
/* Fullscreen: the panel uses the viewport, only long information in the sidebar scrolls. */
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen){--p9-safe-top:env(safe-area-inset-top,0px);--p9-safe-bottom:env(safe-area-inset-bottom,0px);position:fixed!important;inset:0!important;box-sizing:border-box!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:calc(8px + var(--p9-safe-top)) clamp(8px,1.2vw,18px) calc(8px + var(--p9-safe-bottom))!important;border:0!important;border-radius:0!important;z-index:9999!important;display:flex!important;flex-direction:column!important;gap:6px!important;overflow:hidden!important;background:#f1f7f5!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameTop{flex:0 0 auto!important;padding:0 0 4px!important;margin:0!important;min-height:0!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameTop h1{font-size:clamp(16px,2vw,23px);margin:0}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameTop p{margin:0;font-size:11px}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,295px)!important;grid-template-rows:minmax(0,1fr)!important;flex:1 1 0!important;width:100%!important;min-height:0!important;height:auto!important;overflow:hidden!important;margin:0!important;gap:10px!important;align-items:stretch!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout>div{min-height:0!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .boardOuter{width:min(var(--p9-fit,500px),100%)!important;max-width:100%!important;max-height:100%!important;height:auto!important;aspect-ratio:1!important;flex:0 1 auto!important;margin:auto!important;padding:clamp(4px,1vh,10px)!important;overflow:hidden!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) canvas{width:100%!important;height:auto!important;max-height:100%!important;object-fit:contain!important;flex:0 1 auto!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout aside{max-height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;padding:12px!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout aside button{margin:3px 0!important;min-height:35px!important;padding:7px 10px!important}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout aside p{font-size:12px;line-height:1.4}
:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .hint{font-size:11px;line-height:1.3;margin:3px 0}
#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseOverview{flex:0 0 auto!important;padding:5px 8px!important;margin:0!important}
#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseOverview p{display:none}
#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseMeter{flex:0 0 4px!important;margin:0!important}
#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseLessons{flex:0 0 auto!important;display:flex!important;max-height:46px!important;min-height:0!important;overflow-x:auto!important;overflow-y:hidden!important;gap:4px!important;padding:2px!important}
#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseLesson{min-width:40px!important;min-height:32px!important;flex:0 0 auto!important;padding:4px!important}
#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseLesson small{display:none}
#scenarioPanel:is(:fullscreen,.pseudoFullscreen) .settingsGrid{display:flex!important;flex:0 0 auto!important;gap:8px!important;margin:0!important}
#scenarioPanel:is(:fullscreen,.pseudoFullscreen) .settingsGrid select{padding:5px!important}
@media(max-width:850px){#gamePanel .gameLayout,#trainingPanel .gameLayout,#scenarioPanel .gameLayout{grid-template-columns:minmax(0,1fr)}#gamePanel .gameLayout aside,#trainingPanel .gameLayout aside,#scenarioPanel .gameLayout aside{width:100%}}
@media(max-width:850px) and (orientation:portrait){:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) minmax(112px,26dvh)!important;gap:5px!important}:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameLayout aside{width:100%!important;max-height:100%!important;padding:7px 10px!important}:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameTop p{display:none}}
@media(max-height:580px) and (orientation:landscape){:is(#gamePanel,#trainingPanel,#scenarioPanel):is(:fullscreen,.pseudoFullscreen) .gameTop p{display:none}#trainingPanel:is(:fullscreen,.pseudoFullscreen) .courseOverview{display:none!important}}
@media(max-width:490px){#gamePanel .gameTop,#trainingPanel .gameTop,#scenarioPanel .gameTop{flex-wrap:wrap}#gamePanel .gameTopActions,#trainingPanel .gameTopActions,#scenarioPanel .gameTopActions{width:100%;justify-content:flex-start}}