/* Programmatic page-heading focus is retained for screen readers, without a frame. */
#commander-table .ct-navigation-heading:focus{outline:none!important}
#commander-table #ct-messages .op-chat-composer{flex-wrap:nowrap;align-items:flex-end}
#commander-table #ct-messages .op-chat-composer textarea{flex:1 1 0;box-sizing:border-box;min-height:44px;height:44px;max-height:88px;font-size:16px;line-height:22px;padding:10px;outline-offset:-2px;overflow-y:auto;overscroll-behavior:contain}
#commander-table #ct-messages .op-chat-composer button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:10px}
#commander-table #ct-messages .op-chat-timeline{padding-block:0}
#commander-table #ct-messages .op-message-list{gap:12px;justify-content:flex-start;padding-block:12px}
#commander-table #ct-messages .op-message-list>li{margin:0!important}
#commander-table .ct-app-nav button:not(#ct-nav-play)[aria-current=page]>svg{border-radius:50%;overflow:visible;box-sizing:content-box;padding:5px;margin:-5px;background-clip:padding-box}
/* Measure the actual fixed viewport, independently of stale iOS window metrics. */
.op-viewport-bounds{position:fixed;inset:0;visibility:hidden;pointer-events:none;z-index:-1}
/* Only the content scrolls; the bar is anchored to the viewport edge. */
html:has(#commander-table[data-device-view=smartphone]:not([data-screen=tracker]) .ct-app-nav),
body:has(#commander-table[data-device-view=smartphone]:not([data-screen=tracker]) .ct-app-nav){overflow:hidden;height:100%;overscroll-behavior:none}
#commander-table[data-device-view=smartphone]{--op-nav-height:calc(76px + env(safe-area-inset-bottom,0px));--op-content-bottom:calc(var(--op-nav-height) + 10px - var(--op-nav-lower,0px))}
#commander-table[data-device-view=smartphone]:has(.ct-app-nav):not([data-screen=tracker]){position:fixed;inset:0;box-sizing:border-box;width:100%;height:auto!important;min-height:0!important;padding:env(safe-area-inset-top,0px) 0 0!important;overflow:hidden}
/* Paint the scrolling content behind the free navigation contour. Reserve the
   same space INSIDE the scroll pane, so its final controls can scroll clear of
   the raised New Game button without creating a rectangular black cut-off. */
#commander-table[data-device-view=smartphone]:has(.ct-app-nav):not([data-screen=tracker]) #ct-lobby{height:100%!important;min-height:0!important;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:0 max(16px,env(safe-area-inset-right,0px)) var(--op-content-bottom) max(16px,env(safe-area-inset-left,0px))!important;scroll-padding-bottom:var(--op-content-bottom)}
#commander-table[data-device-view=smartphone] .ct-app-nav{position:fixed;inset:auto 0 0;height:var(--op-nav-height);padding:6px max(6px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));box-sizing:border-box;background:transparent;box-shadow:none;pointer-events:none}
#commander-table[data-device-view=smartphone] .ct-nav-items{grid-template-rows:68px;padding:0 0 env(safe-area-inset-bottom,0px);border-radius:24px;box-sizing:border-box;pointer-events:auto}
/* One clipped pane covers the rail and raised New Game contour. The buttons
   retain their measured bounds; no overlapping circle can double the glass. */
#commander-table .ct-nav-surface{display:none;pointer-events:none}
#commander-table[data-device-view=smartphone] .ct-nav-surface{display:block;position:absolute;inset:-24px 0 0;z-index:0;background:var(--ct-button);}
#commander-table[data-device-view=smartphone] .ct-nav-items{z-index:1;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
#commander-table[data-device-view=smartphone] .ct-app-nav #ct-nav-play{background:transparent!important;box-shadow:none!important;}
#commander-table[data-device-view=smartphone] .ct-app-nav #ct-nav-play::before,#commander-table[data-device-view=smartphone] .ct-app-nav #ct-nav-play::after{display:none!important;}
#commander-table[data-device-view=smartphone] .ct-app-nav button:not(#ct-nav-play){height:68px;min-height:68px;grid-template-rows:36px 18px;gap:2px;padding:5px 2px;font-size:10px}
#commander-table[data-device-view=smartphone] .ct-app-nav button:not(#ct-nav-play)>svg{width:36px;height:36px;padding:5px;margin:0}
#commander-table[data-device-view=smartphone] .ct-app-nav button:not(#ct-nav-play)[aria-current=page]>svg{box-sizing:border-box;padding:5px;margin:0;overflow:hidden;box-shadow:none}
#commander-table[data-device-view=smartphone] .ct-app-nav #ct-nav-play{width:64px;height:64px;min-height:64px;transform:translateY(-10px);padding:5px 0;font-size:9px;gap:2px}
#commander-table[data-device-view=smartphone] .ct-app-nav #ct-nav-play svg{width:42px;height:35px}
#commander-table[data-device-view=smartphone] .ct-profiles-page.op-own-profile{min-height:0}
#commander-table[data-device-view=smartphone] #ct-lobby:has(#ct-messages){overflow:hidden}
#commander-table[data-device-view=smartphone] .ct-profiles-page:has(#ct-messages){height:100%;padding:0}
#commander-table[data-device-view=smartphone] #ct-messages.op-messages-layout{height:100%;min-height:0;box-sizing:border-box;padding-bottom:16px}
/* The directory scrolls behind the floating navigation. Reserve its clearance
   once inside the list, so the last contact can still scroll fully above it. */
#commander-table[data-device-view=smartphone] #ct-lobby:has(#ct-messages[data-chat-view=directory]){padding-bottom:0!important;scroll-padding-bottom:0}
#commander-table[data-device-view=smartphone] #ct-messages.op-messages-layout[data-chat-view=directory]{padding-bottom:0}
#commander-table[data-device-view=smartphone] #ct-messages[data-chat-view=directory] .op-chat-list{box-sizing:border-box;padding-bottom:var(--op-content-bottom);scroll-padding-bottom:var(--op-content-bottom)}
/* Keep the composer clear of the raised navigation button and the keyboard's
   accessory edge. This is internal chat spacing, not a second shell inset. */
#commander-table[data-device-view=smartphone][data-keyboard=true] #ct-messages.op-messages-layout{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
#commander-table[data-device-view=smartphone][data-viewport-editing=true] .ct-app-nav{top:calc(var(--op-shell-height) - var(--op-nav-height));bottom:auto}
#commander-table[data-device-view=smartphone][data-keyboard=true]:not([data-screen=tracker]){--op-content-bottom:0px;inset:var(--op-visible-top,0px) 0 auto;height:var(--op-visible-height)!important;padding-bottom:8px!important}
#commander-table[data-device-view=smartphone][data-keyboard=true] .ct-app-nav{visibility:hidden;pointer-events:none}

/* Native builder dialogs live outside the app shell. Fit their search/results
   to the visual viewport too, leaving room above the keyboard accessory edge. */
.ct-builder-quick-add[data-keyboard=true]{--quick-room:calc(var(--quick-visible-height) - max(12px,env(safe-area-inset-top,0px)) - max(24px,env(safe-area-inset-bottom,0px)));top:calc(var(--quick-visible-top) + max(12px,env(safe-area-inset-top,0px)));bottom:auto;margin:0 auto;display:flex;flex-direction:column;height:var(--quick-room);max-height:var(--quick-room);padding:12px;overflow:hidden}
.ct-builder-quick-add[data-keyboard=true]>h2{flex:none;min-height:40px;margin:0 40px 6px 0;display:flex;align-items:center;font-size:18px;line-height:1.2}
.ct-builder-quick-add[data-keyboard=true] .ct-build-quick-hint{display:none}
.ct-builder-quick-add[data-keyboard=true]>label{flex:none;gap:4px}
.ct-builder-quick-add [data-quick-name]{font-size:16px}
.ct-builder-quick-add[data-keyboard=true] :is(.ct-build-quick-state,.ct-build-dialog-message){flex:none;margin:6px 0;font-size:12px}
.ct-builder-quick-add[data-keyboard=true] .ct-build-quick-results{flex:1;min-height:0;max-height:none;margin:8px 0 0;grid-auto-rows:max-content;align-content:start;scroll-padding:4px}
.ct-builder-quick-add[data-keyboard=true]>[data-quick-retry]{flex:none}

/* Installed iOS: fixed roots and percentage-sized ancestors can clip painting
   at WebKit's shortened viewport even when the child's rectangle is correct.
   Keep the document and app in normal flow at the full screen height. Only
   the content pane scrolls; the rail is absolute inside that complete shell.
   Account gates retain their own document scrolling and sizing. */
html[data-op-standalone-screen=true]:not(.orbunity-session-locked):not(:has(#orbunity-content[hidden])):has(#commander-table[data-device-view=smartphone]),
html[data-op-standalone-screen=true]:not(.orbunity-session-locked):not(:has(#orbunity-content[hidden])):has(#commander-table[data-device-view=smartphone]) body{height:var(--op-document-height,100vh)!important;min-height:var(--op-document-height,100vh)!important;margin:0;overflow:hidden;overscroll-behavior:none}
#commander-table[data-device-view=smartphone][data-standalone-screen=true]:has(.ct-app-nav){position:relative!important;inset:auto!important;height:var(--op-shell-height)!important}
#commander-table[data-device-view=smartphone][data-standalone-screen=true][data-keyboard=true]:not([data-screen=tracker]){inset:var(--op-visible-top,0px) 0 auto!important;height:var(--op-visible-height)!important}
#commander-table[data-device-view=smartphone][data-standalone-screen=true] .ct-app-nav{position:absolute}
/* The former 32px cloud strip also shifted iOS's normal-flow shell. Keep the
   rail's visible position without shifting the app or extending its controls
   past the screen. Reclaim no more than the bottom inset in short landscape;
   browser tabs, Android, desktop and the tracker keep their existing layout. */
#commander-table[data-device-view=smartphone][data-standalone-screen=true]:not([data-screen=tracker]){--op-nav-lower:min(32px,env(safe-area-inset-bottom,0px))}
#commander-table[data-device-view=smartphone][data-standalone-screen=true]:not([data-screen=tracker]) .ct-nav-items{height:calc(100% - var(--op-nav-lower));padding-bottom:max(0px,calc(env(safe-area-inset-bottom,0px) - var(--op-nav-lower)))}

#orbunity-content:has(#commander-table[data-device-view=smartphone]:not([data-screen=tracker]) .ct-app-nav){min-height:100dvh}
/* Status markers face the table centre; tax faces the outer edge. */
#commander-table[data-tableau=commander] .ct-panel[data-status-edge=left]>.ct-head>.ct-name-status{order:0;margin-left:0;margin-right:auto}
#commander-table[data-tableau=commander] .ct-panel[data-status-edge=left]>.ct-head>.ct-shared-tax{order:2;margin-left:auto}
#commander-table[data-tableau=commander] .ct-panel[data-status-edge=right]>.ct-head>.ct-name-status{order:2;margin-left:auto;margin-right:0}
#commander-table[data-tableau=commander] .ct-panel[data-status-edge=right]>.ct-head>.ct-shared-tax{order:0;margin-left:0}
#commander-table .ct-panel .ct-head>.ct-damage-strip{height:calc(var(--ct-top-control-size)*.75);gap:3px}
#commander-table .ct-damage-strip>.ct-damage-seat{width:calc(var(--ct-top-control-size)*.75);height:calc(var(--ct-top-control-size)*.75)}
#commander-table .ct-damage-strip::before{inset:-4px;border-radius:8px}
/* Tracker popups share one translucent window; the tableau behind stays clear. */
#commander-table[data-screen=tracker] .ct-overlay:not(:has(.ct-counter-dialog)){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#commander-table[data-screen=tracker] .ct-dialog:not(.ct-counter-dialog){background:rgba(16,22,46,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #929ab477;padding:16px;text-align:center;box-sizing:border-box}
#commander-table[data-screen=tracker] .ct-player-dialog:not(.ct-counter-dialog){display:flex;flex-direction:column;justify-content:center;gap:8px}
#commander-table[data-screen=tracker] .ct-dialog:not(.ct-counter-dialog)>:is(h3,p){text-align:center;margin:4px 24px}
#commander-table[data-screen=tracker] .ct-dialog:not(.ct-counter-dialog) .ct-row{justify-content:center}
#commander-table[data-screen=tracker] .ct-overlay{z-index:100;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#commander-table[data-screen=tracker] .ct-counter-dialog{background:rgba(16,22,46,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #929ab477;border-radius:18px}
/* A game owns the full phone viewport, including the camera/home safe areas. */
#commander-table[data-screen=tracker] #ct-lobby{display:none!important}
html:has(#commander-table[data-device-view=smartphone][data-screen=tracker]),body:has(#commander-table[data-device-view=smartphone][data-screen=tracker]){background:#000!important;overflow:hidden;overscroll-behavior:none}
#commander-table[data-device-view=smartphone][data-screen=tracker]{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;background:#000!important;background-image:none!important;border:0;border-radius:0;z-index:100;isolation:isolate;overflow:hidden}
#commander-table[data-device-view=smartphone][data-screen=tracker] .ct-phone-table{background:#000}
#commander-table .ct-seat .ct-panel{--ct-damage-height:var(--ct-top-control-size,58.667px)}
#commander-table[data-phone-table] .ct-player-menu-trigger .ct-menu-six{grid-template-columns:repeat(3,calc(var(--ct-top-control-size)*.14));grid-template-rows:repeat(2,calc(var(--ct-top-control-size)*.14));gap:calc(var(--ct-top-control-size)*.055)}
#commander-table[data-phone-table] .ct-menu-six>span{width:100%;height:100%}
#commander-table[data-phone-table] .ct-panel>.ct-head .ct-name-status svg{width:calc(var(--ct-top-control-size)*.65);height:calc(var(--ct-top-control-size)*.65)}
#commander-table .ct-panel>.ct-life .ct-number{display:flex;align-items:center;justify-content:center}
/* All opponent damage controls fit the owning tableau without scrolling. */
#commander-table .ct-player-dialog:has(.ct-damage-editor){display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:5px;padding:8px!important;overflow:hidden}
#commander-table .ct-player-dialog:has(.ct-damage-editor)>h3{font-size:clamp(10px,calc(18px*var(--editor-unit)),18px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 24px!important}
#commander-table .ct-damage-editor{display:grid;grid-template-columns:repeat(var(--editor-columns,3),minmax(0,1fr));grid-template-rows:repeat(var(--editor-rows,1),minmax(0,1fr));gap:5px;margin:0;min-height:0;min-width:0}
#commander-table .ct-damage-editor section{display:flex;flex-direction:column;gap:3px;min-height:0;min-width:0;padding:4px;overflow:hidden}
#commander-table .ct-damage-editor h4{font-size:clamp(9px,calc(16px*var(--editor-unit)),16px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;flex:none}
#commander-table .ct-damage-correction{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
#commander-table .ct-damage-correction+.ct-damage-correction{margin-top:0}
#commander-table .ct-damage-correction>span{font-size:clamp(8px,calc(12px*var(--editor-unit)),12px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
#commander-table .ct-damage-correction>div{grid-template-columns:minmax(18px,1fr) minmax(0,1fr) minmax(18px,1fr);gap:2px;margin:0;min-height:0}
#commander-table .ct-damage-correction button{width:100%;min-width:0;height:clamp(18px,calc(36px*var(--editor-unit)),36px);min-height:0;padding:0;font-size:clamp(14px,calc(24px*var(--editor-unit)),24px);line-height:1}
#commander-table .ct-damage-correction output{font-size:clamp(13px,calc(26px*var(--editor-unit)),26px);line-height:1}
#commander-table .ct-player-dialog .ct-damage-coupling{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;line-height:1.2;margin:0}
#commander-table .ct-damage-coupling input{width:16px;height:16px;min-height:0;margin:0}
#commander-table .ct-damage-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;min-width:0}
#commander-table .ct-damage-options .ct-damage-coupling{font-size:clamp(9px,calc(12px*var(--editor-unit,1)),12px)}
#commander-table .ct-damage-editor section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);gap:3px}
#commander-table .ct-damage-editor section>h4{grid-column:1/-1}
#commander-table .ct-damage-editor section>.ct-damage-correction:only-of-type{grid-column:1/-1}
#commander-table .ct-damage-correction>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}

/* Equal status, damage and player-menu controls; rail icons retain their phone size. */
#commander-table .ct-panel .ct-head>.ct-damage-strip{height:var(--ct-top-control-size)}
#commander-table .ct-damage-strip>.ct-damage-seat{width:var(--ct-top-control-size);height:var(--ct-top-control-size)}
/* Main menu only: content may scroll beneath clear, untinted status-area glass.
   Count the device inset once, then leave a separate 16px content gap below it.
   Desktop without a system inset keeps its existing layout. */
#commander-table:has(.ct-app-nav):not([data-screen=tracker]){--op-page-top-gap:clamp(0px,env(safe-area-inset-top,0px),16px);padding-top:calc(env(safe-area-inset-top,0px) + var(--op-page-top-gap))}
#commander-table[data-device-view=smartphone]:has(.ct-app-nav):not([data-screen=tracker]){--op-page-top-gap:16px}
#commander-table[data-device-view=smartphone][data-keyboard=true]:has(.ct-app-nav):not([data-screen=tracker]){--op-page-top-gap:0px}
#commander-table[data-device-view=smartphone]:has(.ct-app-nav):not([data-screen=tracker]){padding-top:0!important}
#commander-table[data-device-view=smartphone]:has(.ct-app-nav):not([data-screen=tracker]) #ct-lobby{padding-top:calc(env(safe-area-inset-top,0px) + var(--op-page-top-gap))!important;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--op-page-top-gap))}
/* The absolute 44px Back button must be centred in a real 44px title row,
   rather than projecting above a shorter heading into the device clearance. */
#commander-table:has(.ct-app-nav):not([data-screen=tracker]) #ct-lobby .ct-collection-folder-title{display:flex;align-items:center;justify-content:center;min-height:44px}