/* Reserve direction controls for the whole directional session. The plot keeps
   its original area and does not move when a correct or wrong call is selected. */
:root:has(#app.direction-row-reserved){--direction-reserve:44px;--live-effective-plot:calc(var(--live-plot) + var(--direction-reserve))}
.primary-mobile-field:has(#app.direction-row-reserved){--direction-reserve:50px}
@media(max-width:900px){:root:has(#app.direction-row-reserved){--direction-reserve:50px;--live-effective-plot:calc(min(var(--live-plot),150px) + var(--direction-reserve))}#app.direction-row-reserved #directionDeck.direction-deck{padding:2px 5px;grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px) and (orientation:landscape){:root:has(#app.direction-row-reserved){--live-effective-plot:calc(min(var(--live-plot),116px) + var(--direction-reserve))}}
#app.direction-row-reserved #directionDeck{position:static!important;inset:auto!important;z-index:auto!important;display:grid!important;grid-row:5;width:auto;height:var(--direction-reserve);min-height:var(--direction-reserve);margin:0;padding:5px 8px;box-sizing:border-box}
#app.direction-row-reserved #directionDeck.inactive{visibility:hidden!important;pointer-events:none!important}
.primary-mobile-field #app.direction-row-reserved #directionDeck{grid-template-columns:minmax(0,1fr);padding:2px 5px}
.primary-mobile-field #app.direction-row-reserved #directionDeck .direction-buttons{height:44px;min-height:44px}
.primary-mobile-field #app.direction-row-reserved #directionDeck .direction-buttons button{height:44px;min-height:44px}