/* A single layout for the live arena. No information panel overlaps the canvas. */
body.arena-playing #app{width:100%;max-width:none;margin:0;min-height:100dvh;padding:0 max(24px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
body.arena-playing #app>header{height:48px;max-width:1100px;margin:0 auto;border-bottom-color:#ffffff12}
body.arena-playing #play.arena-ready{max-width:none;width:100%;margin:0;padding:10px 0 0;}
#play.arena-ready>.play-layout{display:grid;grid-template-columns:minmax(0,var(--arena-story-width)) var(--arena-width) minmax(0,var(--arena-rail-width));grid-template-rows:auto;grid-template-areas:'story board rail';gap:var(--arena-gap,16px);align-items:start;justify-content:center;width:100%;max-width:none;margin:0 auto;}
#play.arena-ready .play-board{grid-area:board;grid-row:auto;position:relative;display:block;width:var(--arena-width);height:var(--arena-height);max-width:none;min-width:0;min-height:0;margin:0;}
#play.arena-ready #stage{position:relative;width:100%;height:100%;max-width:none;min-height:0;aspect-ratio:2 / 3;container-type:normal;margin:0;border:1px solid #a4b89b35;border-radius:14px;background:#14231d;overflow:hidden;}
#play.arena-ready #canvas{display:block;width:100%;height:100%;}
#arena-side-stack{display:contents;}
#arena-story{grid-area:story;display:flex;flex-direction:column;gap:12px;min-width:0;max-height:var(--arena-height);overflow:auto;scrollbar-width:thin;scrollbar-color:#617456 transparent;}
#play.arena-ready[data-arena-columns=side]>.play-layout{grid-template-columns:minmax(0,var(--arena-rail-width)) var(--arena-width);grid-template-areas:'side board';}
/* Essential controls precede the story in a shared column. Let the page grow
   instead of clipping that column to a width-limited board's height. */
#play.arena-ready[data-arena-columns=side] #arena-side-stack{grid-area:side;display:flex;flex-direction:column;gap:12px;min-width:0;max-height:none;overflow:visible;}
#play.arena-ready[data-arena-columns=side] #arena-rail{order:0;}
#play.arena-ready[data-arena-columns=side] #arena-story{order:1;}
#play.arena-ready[data-arena-columns=side] #arena-story,#play.arena-ready[data-arena-columns=side] #arena-rail{max-height:none;overflow:visible;flex:0 0 auto;}
#arena-rail{grid-area:rail;display:flex;flex-direction:column;gap:12px;min-width:0;max-height:none;overflow:visible;padding:1px 2px 6px;}
#arena-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;min-width:0;}
#play.arena-ready .scorebar{position:static;inset:auto;grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 2px;margin:0;border:0;border-radius:0;background:none;pointer-events:auto;}
#play.arena-ready .scorebar strong{font-size:44px;letter-spacing:-1px;line-height:1;}
#play.arena-ready .scorebar .right b{font-size:28px;line-height:1;margin:4px 0;}
#play.arena-ready .scorebar small{font-size:10px;line-height:1.3;letter-spacing:0;}
#play.arena-ready .scorebar span{font-size:10px;line-height:1.3;}
#play.arena-ready .speedbar{position:static;inset:auto;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 9px;margin:0;min-height:32px;border:1px solid #b2c78c45;border-radius:8px;background:#19271c;pointer-events:auto;}
#play.arena-ready .speedbar strong{font-size:12px;line-height:1.3;}
#play.arena-ready .speedbar>span{display:none;}
#play.arena-ready #altitude-hud{position:relative;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;margin:0;min-height:52px;padding:8px 10px;border:1px solid #78abb54d;border-radius:10px;background:#14231f;}
#play.arena-ready #altitude-next-name{font-size:14px;line-height:1.2;}
#play.arena-ready #altitude-distance{font-size:12px;line-height:1.2;}
#play.arena-ready #altitude-caption{display:none;}
#play.arena-ready #altitude-track{grid-column:1/-1;height:3px;}
#arena-comment-panel{position:relative;min-width:0;padding:12px 13px;border:1px solid #c8b27166;border-radius:14px 14px 14px 4px;background:#e6d8a70c;}
#arena-comment-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;padding-top:8px;}
#arena-scene-canvas{display:block;width:100%;height:auto;aspect-ratio:5 / 4;max-width:100%;margin:0;touch-action:auto;border-radius:10px;pointer-events:none;}
#play.arena-ready[data-arena-columns=side] #arena-scene-canvas{max-width:200px;justify-self:center;}
#arena-speech{min-width:0;}
#arena-speaker{display:block;color:#e7c16c;font-size:10px;font-weight:850;letter-spacing:1.6px;margin:0 0 5px;}
#play.arena-ready #arena-comment-panel #comment{position:static;inset:auto;display:block;width:auto;max-width:none;min-height:0;max-height:none;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:#eff3e5;font-size:16px;font-weight:700;line-height:1.4;overflow:visible;pointer-events:auto;overflow-wrap:break-word;}
#play.arena-ready #arena-comment-panel #comment::before,#play.arena-ready #arena-comment-panel #comment::after{display:none;content:none;}
#play.arena-ready #incoming{position:static;display:block;min-height:0;width:100%;padding:0 0 8px;margin:0;border:0;border-bottom:1px solid #b6c39e28;border-radius:0;background:none;}
#play.arena-ready #incoming span:first-child{display:block;font-size:9px;color:#b7c5a9;line-height:1.3;margin-bottom:3px;}
#play.arena-ready #incoming strong{display:block;font-size:18px;line-height:1.2;overflow-wrap:anywhere;color:#f0d895;}
#play.arena-ready #incoming span:last-child{display:none;}
#play.arena-ready #arena-actions{position:static;grid-area:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;padding:0;margin:0;}
#play.arena-ready #shop-toggle.shop-toggle{position:static;inset:auto;order:0;flex:1 0 100%;width:100%;min-height:48px;margin:0;padding:10px 12px;box-shadow:0 3px 0 #627d1b;border-radius:10px;font-size:13px;}
#play.arena-ready #arena-actions .play-controls{position:static;order:1;display:flex;flex:1;justify-content:flex-start;gap:8px;min-height:44px;margin:0;padding:0;}
#play.arena-ready #arena-actions .play-controls>button{min-height:44px;padding:8px;font-size:12px;margin:0;border-radius:8px;background:#ffffff05;}
#arena-display-controls{order:2;display:flex;gap:6px;flex-wrap:wrap;}
#arena-display-controls .arena-display-button{min-height:44px;min-width:44px;padding:8px 10px;font-size:12px;font-weight:750;line-height:1.2;letter-spacing:0;margin:0;border:1px solid #8eae9355;border-radius:8px;background:#a6d0d510;color:#d4e8dd;}
#arena-display-controls .arena-display-button[aria-pressed=true]{color:#d0f45b;border-color:#d0f45b;}
#arena-display-status{flex-basis:100%;margin:0;font-size:11px;color:#e7c16c;}
#arena-details{min-width:0;border-top:1px solid #c2d6ae26;padding-top:4px;}
#arena-details-title{min-height:44px;cursor:pointer;padding:12px 2px;color:#aebda5;font-size:12px;line-height:1.4;}
#arena-details-body{display:grid;gap:8px;padding:0 2px 8px;}
#play.arena-ready #arena-details .play-context{position:static;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:0;margin:0;}
#play.arena-ready #arena-details .play-context>*{min-width:0;width:100%;margin:0;}
#play.arena-ready #arena-details #coin-goal{display:flex;min-height:0;padding:10px;}
#play.arena-ready #arena-details #coin-goal strong{font-size:14px;}
#play.arena-ready #arena-details #coin-goal p{display:block;font-size:11px;}
#play.arena-ready #arena-details #coin-goal>img{width:24px;height:24px;flex-basis:24px;}
#play.arena-ready #arena-details .tower-log{display:block;}
#play.arena-ready #arena-details #continues,#play.arena-ready #arena-details #ranked-note,#play.arena-ready #arena-details #run-goal{font-size:11px;line-height:1.4;margin:0;}
#play.arena-ready #play-intro{display:none;}
#play.arena-ready #tower-coach{position:static;inset:auto;min-width:0;width:100%;margin:0;}
#play.arena-ready #hint{font-size:8px;line-height:1.2;letter-spacing:0;left:8px;right:8px;bottom:5px;}
body.tower-fit-mode.arena-playing #app>header,body.arena-fullscreen.arena-playing #app>header{display:none;}
body.tower-fit-mode.arena-playing #play.arena-ready,body.arena-fullscreen.arena-playing #play.arena-ready{padding-top:max(8px,env(safe-area-inset-top));}
body.tower-fit-mode.arena-playing #app,body.arena-fullscreen.arena-playing #app{min-height:100dvh;}
#play.arena-ready :is(button,summary):focus-visible{outline:3px solid #d0f45b;outline-offset:3px;}
/* JavaScript owns the responsive choice, including tall portrait tablets and
   short landscape phones. CSS follows the chosen layout at every width. */
 body.arena-playing.arena-portrait #app{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));}
 #play.arena-ready[data-arena-layout=portrait]>.play-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'overview' 'coach' 'board' 'actions' 'details';gap:8px;}
 #play.arena-ready[data-arena-layout=portrait] #arena-side-stack,#play.arena-ready[data-arena-layout=portrait] #arena-story,#play.arena-ready[data-arena-layout=portrait] #arena-rail{display:contents;}
 #play.arena-ready[data-arena-layout=portrait] .play-board{justify-self:center;}
 #play.arena-ready[data-arena-layout=portrait] #arena-overview{grid-area:overview;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;width:100%;max-width:560px;justify-self:center;}
 #play.arena-ready[data-arena-layout=portrait] .scorebar{grid-column:1;}
 #play.arena-ready[data-arena-layout=portrait] .scorebar strong{font-size:28px;}
 #play.arena-ready[data-arena-layout=portrait] .scorebar .right b{font-size:22px;}
 #play.arena-ready[data-arena-layout=portrait] .scorebar span{font-size:9px;}
 #play.arena-ready[data-arena-layout=portrait] .scorebar small{font-size:9px;}
 #play.arena-ready[data-arena-layout=portrait] #combo{max-width:170px;}
 #play.arena-ready[data-arena-layout=portrait] .speedbar{grid-column:2;grid-row:1;width:auto;border:0;padding:4px 6px;background:none;}
 #play.arena-ready[data-arena-layout=portrait] .speedbar strong{font-size:11px;white-space:nowrap;}
 #play.arena-ready[data-arena-layout=portrait] #altitude-hud{min-height:44px;padding:6px 8px;}
 #play.arena-ready[data-arena-layout=portrait] #altitude-next-name{font-size:12px;}
 #play.arena-ready[data-arena-layout=portrait] #altitude-distance{font-size:11px;}
 #play.arena-ready[data-arena-layout=portrait] #tower-coach{grid-area:coach;}
 #play.arena-ready[data-arena-layout=portrait] #arena-actions{grid-area:actions;justify-content:space-between;flex-wrap:nowrap;gap:5px;max-width:560px;width:100%;justify-self:center;}
 #play.arena-ready[data-arena-layout=portrait] #shop-toggle.shop-toggle{flex:1 1 100px;width:auto;min-height:44px;padding:8px;font-size:11px;gap:5px;}
 #play.arena-ready[data-arena-layout=portrait] #arena-actions .play-controls{flex:0 0 auto;gap:3px;}
 #play.arena-ready[data-arena-layout=portrait] #arena-actions .play-controls>button{font-size:11px;padding:7px;}
 #play.arena-ready[data-arena-layout=portrait] #tower-play-help{width:44px;font-size:0!important;}
 #play.arena-ready[data-arena-layout=portrait] #tower-play-help::before{content:'?';font-size:18px;}
 #play.arena-ready[data-arena-layout=portrait] #arena-display-controls{flex-wrap:nowrap;gap:3px;}
 #play.arena-ready[data-arena-layout=portrait] .arena-display-button{width:44px;padding:0;font-size:0;}
 #play.arena-ready[data-arena-layout=portrait] .arena-fit-button::before{content:'↔';font-size:21px;}
 #play.arena-ready[data-arena-layout=portrait] .arena-fullscreen-button::before{content:'⛶';font-size:23px;}
 #play.arena-ready[data-arena-layout=portrait] #arena-comment-panel{grid-area:comment;max-width:560px;width:100%;justify-self:center;padding:10px 12px;}
 #play.arena-ready[data-arena-layout=portrait] #incoming{display:none;}
 #play.arena-ready[data-arena-layout=portrait] #arena-comment-row{grid-template-columns:minmax(110px,.42fr) minmax(0,.58fr);gap:10px;padding-top:0;align-items:center;}
 #play.arena-ready[data-arena-layout=portrait] #arena-scene-canvas{max-width:none;}
 #play.arena-ready[data-arena-layout=portrait] #arena-speaker{margin:0 0 4px;}
 #play.arena-ready[data-arena-layout=portrait] #altitude-fact-card{grid-area:fact;max-width:560px;width:100%;justify-self:center;}
 #play.arena-ready[data-arena-layout=portrait] #arena-comment-panel #comment{font-size:14px;}
 #play.arena-ready[data-arena-layout=portrait] #arena-details{grid-area:details;max-width:560px;width:100%;justify-self:center;}
 #play.arena-ready[data-arena-layout=portrait] #arena-details-body>*{grid-area:auto;}
@media(max-height:520px) and (min-width:560px){body.arena-playing #app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}#play.arena-ready #arena-rail{gap:8px;}#play.arena-ready .scorebar strong{font-size:30px;}#play.arena-ready #arena-comment-panel #comment{font-size:14px;}#play.arena-ready #arena-comment-panel{padding:9px;}#play.arena-ready #arena-actions{gap:5px;}#play.arena-ready #shop-toggle.shop-toggle{min-height:44px;}}

#play.arena-ready #shop-toggle.shop-toggle{min-width:0;}
#play.arena-ready #shop-toggle>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#play.arena-ready #shop-toggle>b{flex-shrink:0;}
@media(max-width:350px){#play.arena-ready[data-arena-layout=portrait] #arena-actions{flex-wrap:wrap;}#play.arena-ready[data-arena-layout=portrait] #shop-toggle.shop-toggle{flex-basis:calc(100% - 130px);}#play.arena-ready[data-arena-layout=portrait] #arena-display-controls{margin-left:auto;}}

@media(max-width:350px){#play.arena-ready[data-arena-layout=portrait] #arena-comment-row{grid-template-columns:100px minmax(0,1fr);gap:8px;}}

/* A phone held sideways keeps every live action within the visible rail.
   Narrative and optional display tools remain in its independently scrolling
   details drawer; the full scenic route is replaced by its textual goal. */
#play.arena-ready[data-arena-compact=true] #arena-side-stack{max-height:var(--arena-available-height);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
#play.arena-ready[data-arena-compact=true] #arena-story{display:none;}
#play.arena-ready[data-arena-compact=true] #arena-rail{gap:6px;}
#play.arena-ready[data-arena-compact=true] #arena-actions{order:-1;gap:6px;}
#play.arena-ready[data-arena-compact=true] #arena-overview{grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;}
#play.arena-ready[data-arena-compact=true] .scorebar{grid-column:1;gap:6px;}
#play.arena-ready[data-arena-compact=true] .scorebar>div:first-child>span{display:none;}
#play.arena-ready[data-arena-compact=true] .scorebar strong{font-size:25px;}
#play.arena-ready[data-arena-compact=true] .scorebar .right b{font-size:20px;margin:0;}
#play.arena-ready[data-arena-compact=true] .scorebar :is(small,span){font-size:9px;line-height:1.2;}
#play.arena-ready[data-arena-compact=true] .speedbar{grid-column:2;grid-row:1;min-height:32px;padding:3px 4px;border:0;background:none;}
#play.arena-ready[data-arena-compact=true] .speedbar strong{font-size:10px;white-space:nowrap;}
#play.arena-ready[data-arena-compact=true] #altitude-hud{grid-template-columns:minmax(0,1fr) auto;min-height:0;padding:4px 6px;gap:3px 6px;}
#play.arena-ready[data-arena-compact=true] #altitude-next-name{font-size:11px;line-height:1.2;}
#play.arena-ready[data-arena-compact=true] #altitude-distance{font-size:10px;line-height:1.2;white-space:normal;text-align:right;}
#play.arena-ready[data-arena-compact=true] #altitude-route{display:none;}
#play.arena-ready[data-arena-compact=true] #altitude-hud #altitude-track{display:block;}
#play.arena-ready[data-arena-compact=true] #shop-toggle.run-shop-toggle{grid-template-columns:30px minmax(0,1fr) auto;min-height:58px;padding:5px 6px;gap:2px 6px;}
#play.arena-ready[data-arena-compact=true] #shop-toggle .run-shop-icon{width:28px;height:36px;}
#play.arena-ready[data-arena-compact=true] #shop-toggle .run-shop-title{font-size:11px;}
#play.arena-ready[data-arena-compact=true] #shop-toggle .run-shop-benefit{display:none;}
#play.arena-ready[data-arena-compact=true] #shop-toggle .run-shop-offer{font-size:10px;padding-top:3px;}
#play.arena-ready[data-arena-compact=true] #arena-actions .play-controls{min-height:44px;gap:6px;}
#play.arena-ready[data-arena-compact=true] #arena-actions .play-controls>button{min-height:44px;}
#play.arena-ready[data-arena-compact=true] #arena-details-title{min-height:44px;padding:10px 2px;}
#play.arena-ready[data-arena-compact=true] #arena-details-body>*{grid-area:auto;}