/* RootBet Arcade controller and layout repair — 30 October 2026.
   Board and touch controls remain visible together, even on short laptops and phones. */
#arcade-visual-falling{min-height:0;padding:14px 12px;background:radial-gradient(ellipse at 35% 18%,#9aff3d0c,transparent 68%),#070f11;overflow:visible}
.rb-fall-stage{width:max-content;max-width:100%;margin-inline:auto;display:grid;grid-template-columns:min(315px,35dvh) 210px;gap:clamp(9px,1.5vw,18px);align-items:start;justify-content:center}
#rb-falling-board{box-sizing:border-box;width:min(100%,315px,35dvh);max-width:100%;height:auto;aspect-ratio:10/18;margin:0 auto;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;padding:6px;touch-action:none;user-select:none;overscroll-behavior:contain;cursor:crosshair;border:2px solid #8c88b6;box-shadow:0 0 0 1px #baaaff36,0 14px 40px #0008}
#rb-falling-board:focus-visible{outline:3px solid #c4ff3d;outline-offset:4px}
#rb-falling-board .rb-fall-cell{min-width:0;min-height:0;pointer-events:none}
.rb-fall-controller{display:flex!important;position:relative;flex-direction:column;align-items:stretch;justify-content:center;gap:10px!important;width:100%;max-width:210px;padding:13px!important;margin:0!important;border-radius:13px;border:1px solid #465f4e;background:linear-gradient(165deg,#172a21,#0c1514);box-shadow:inset 0 1px #ffffff14,0 8px 26px #0005}
.rb-fall-controller >button{flex:none;width:100%;min-height:43px;font-size:11px;white-space:normal}
.rb-fall-controller #fall-pause{background:#26362e;color:#e4f6da;border-color:#719169}
.rb-fall-controller .arcade-mobile{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;justify-content:stretch;width:100%;margin:0!important}
.rb-fall-controller .arcade-mobile button{width:100%;min-width:0!important;min-height:54px;padding:7px 3px!important;display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;line-height:1.2;touch-action:manipulation;font-size:24px;background:#23372e;color:#e6f7d8;border-color:#527c5b}
.rb-fall-controller .arcade-mobile button::after{display:block;font-size:9px;font-family:system-ui,sans-serif;letter-spacing:.04em;color:#a6c3b1;margin-top:2px}
.rb-fall-controller [data-fall="left"]::after{content:"LEFT"}
.rb-fall-controller [data-fall="right"]::after{content:"RIGHT"}
.rb-fall-controller [data-fall="rotate"]::after{content:"ROTATE"}
.rb-fall-controller [data-fall="down"]::after{content:"DOWN"}
.rb-fall-controller [data-fall="drop"]::after{content:"DROP"}
.rb-fall-controller [data-fall="drop"]{grid-column:1/-1;background:#c4ff3d!important;color:#15240d!important;font-size:23px}
.rb-fall-controller [data-fall="drop"]::after{color:#244319!important}
.rb-fall-controller .arcade-help{font-size:10px;line-height:1.6;color:#a9bcab;order:5;max-width:100%;margin:0!important}
.rb-fall-touch-hint{text-align:center;font-size:10px;line-height:1.5;margin:11px auto 0;color:#8fbaa4;max-width:580px}
#arcade-falling .arcade-status{margin-top:10px;min-height:32px;font-size:12px}
#arcade-falling .arcade-stats{margin-bottom:10px}
#arcade-falling .arcade-game-head{margin-bottom:14px}
#arcade-falling .arcade-stat{padding:9px 12px}
#arcade-falling .arcade-stat strong{font-size:31px}
/* Reusable Snake control station: arrows remain next to the board on touch devices. */
#arcade-snake .arcade-visual-canvas{min-height:0;padding:12px 10px}
.rb-snake-stage{width:max-content;max-width:100%;margin-inline:auto;display:grid;grid-template-columns:min(410px,44dvh) 210px;gap:clamp(9px,1.5vw,18px);align-items:start}
#rb-snake-canvas{width:min(100%,410px,44dvh);max-width:100%;height:auto;aspect-ratio:1;touch-action:none}
.rb-snake-controller{width:100%;min-width:0;margin:0!important;display:flex!important;flex-direction:column;align-items:stretch;gap:9px!important;padding:12px!important;border:1px solid #466159;border-radius:13px;background:#10221f}
.rb-snake-controller>button{width:100%;min-height:43px;font-size:11px}
.rb-snake-controller .arcade-help{font-size:10px;line-height:1.5;margin:0}
.rb-snake-controller .arcade-directions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0!important}
.rb-snake-controller .arcade-directions button{width:100%;min-width:0;min-height:51px;padding:7px;font-size:23px;touch-action:manipulation}
#arcade-breaker .arcade-visual-canvas{min-height:0;padding:12px}
#arcade-breaker .arcade-controls{justify-content:center}
#arcade-memory .arcade-visual,#arcade-gems .arcade-visual,#arcade-burst .arcade-visual{min-height:0;padding:14px 10px}
#arcade-memory .rb-memory-board,#arcade-gems .rb-gems-board,#arcade-burst #rb-block-grid{max-width:min(100%,490px)}
#arcade-gems .rb-gem,#arcade-memory .rb-memory-tile{touch-action:manipulation}
@media(max-width:850px){
 .rb-fall-stage{max-width:100%;grid-template-columns:min(315px,35dvh) 210px}
 .rb-snake-stage{max-width:100%;grid-template-columns:min(410px,44dvh) 210px}
}
@media(max-width:575px){
 #arcade-visual-falling{padding:9px 7px}
 .rb-fall-stage{width:100%;grid-template-columns:minmax(0,1fr) minmax(110px,.6fr);gap:9px}
 #rb-falling-board{width:min(100%,29dvh);padding:4px;gap:1px;border-width:2px}
 .rb-fall-controller{padding:8px!important;gap:7px!important;border-radius:10px}
 .rb-fall-controller>button{min-height:39px;font-size:10px;padding:7px 3px}
 .rb-fall-controller .arcade-mobile{gap:5px!important}
 .rb-fall-controller .arcade-mobile button{min-height:48px;font-size:21px;padding:5px 1px!important}
 .rb-fall-controller .arcade-mobile button::after{font-size:8px}
 .rb-fall-controller .arcade-help{font-size:9px;line-height:1.4}
 .rb-fall-touch-hint{font-size:10px}
 #arcade-falling .arcade-stat{padding:8px 7px}
 #arcade-falling .arcade-stat strong{font-size:27px}
 #arcade-snake .arcade-visual-canvas{padding:8px}
 .rb-snake-stage{width:100%;grid-template-columns:minmax(0,1fr) minmax(104px,.6fr);gap:8px}
 #rb-snake-canvas{width:min(100%,31dvh)}
 .rb-snake-controller{padding:8px!important;gap:6px!important}
 .rb-snake-controller>button{min-height:40px;font-size:10px;padding:6px 2px}
 .rb-snake-controller .arcade-directions{gap:5px}
 .rb-snake-controller .arcade-directions button{min-height:49px;padding:5px;font-size:20px}
 #arcade-breaker .arcade-visual-canvas{padding:7px}
 #arcade-sequence .arcade-visual-canvas{min-height:0;padding:8px}
 #arcade-sequence .rb-sequence-board{max-width:min(100%,330px)}
}
@media(max-width:355px){
 .rb-fall-stage{grid-template-columns:minmax(0,1fr) 107px;gap:6px}
 .rb-fall-controller{padding:6px!important}
 .rb-fall-controller .arcade-help{font-size:8px}
 .rb-fall-controller .arcade-mobile button{min-height:43px}
 .rb-snake-stage{grid-template-columns:minmax(0,1fr) 108px}
}
@media(prefers-reduced-motion:reduce){.rb-fall-controller button,.rb-snake-controller button{transition:none!important}}

/* Game navigation should land below the fixed site header, not behind it. */
.arcade-game{scroll-margin-top:94px}
.arcade-game .arcade-visual{scroll-margin-top:92px}
@media(max-width:575px){.arcade-game{scroll-margin-top:76px}.arcade-game .arcade-visual{scroll-margin-top:112px}}

@media(min-width:576px) and (max-width:700px){.rb-fall-stage,.rb-snake-stage{width:100%;grid-template-columns:minmax(0,1fr) minmax(145px,.55fr);gap:12px}}