/* Controls follow the available input devices, including tablets with a keyboard attached. */
.game-page :is(.game-shell,.bm-machine) {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
@media (any-pointer: coarse), (max-width: 700px) {
  .game-page :is(.game-key-help,.bm-keyboard) { display:none }
  .game-page :is(.game-controls,.bm-controls) {
    display:flex; justify-content:space-between; align-items:center; gap:6px;
    padding:8px; touch-action:none; user-select:none; -webkit-user-select:none;
    -webkit-touch-callout:none;
  }
  .game-page :is(.touch-dpad,.game-action-controls) { display:flex; gap:4px }
  .game-page :is(.touch-dpad button,.touch-jump,.bm-dpad button,.bm-drop,.game-explore) {
    display:grid; place-items:center; box-sizing:border-box; min-width:44px; height:48px;
    padding:0 5px; border:1px solid #719282; border-bottom:3px solid #111c1a;
    border-radius:9px; background:#324842; color:#fff; touch-action:none;
    font:700 10px/1 system-ui; user-select:none; -webkit-user-select:none;
  }
  .game-page :is(.touch-dpad,.bm-dpad) button {font-size:22px}
  .game-page .touch-jump[data-game-input="jump"],.game-page .bm-drop {background:#c0dc85;color:#1f301b}
  .game-page :is(.touch-jump span,.game-sound span,.bm-sound span) {display:none}
  .game-page :is(.touch-dpad button,.touch-jump,.bm-dpad button,.bm-drop):active {background:#fff1a8;color:#1a2320}
  .game-page .bm-dpad {display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,48px);gap:3px}
  .game-page .bm-dpad button:first-child {grid-area:1/2}
  .game-page .bm-dpad button:nth-child(2) {grid-area:2/1}
  .game-page .bm-dpad button:nth-child(3) {grid-area:2/2}
  .game-page .bm-dpad button:nth-child(4) {grid-area:2/3}
  .game-page .bm-drop {margin-left:auto;display:flex;align-items:center;gap:6px;padding-inline:12px}
  .game-page .bm-drop span {display:inline}
  .game-page :is(.game-sound,.bm-sound,.game-pause,.bm-hud button,[data-fullscreen]) {min-width:44px;min-height:44px}
  .game-page .world-options select {min-height:44px;max-width:48vw}
}
.bm-machine .world-options {display:flex;justify-content:flex-end;background:#202825;padding:4px 10px}
.bm-machine [data-fullscreen] {background:#293933;color:#fff;border:1px solid #667e72;padding:5px 10px}
html:has(.expanded-game),body:has(.expanded-game) {overflow:hidden;overscroll-behavior:none}
.game-page :is(.game-shell,.bm-machine):is(:fullscreen,.expanded-game) {
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  position:fixed;inset:0;z-index:9999;box-sizing:border-box;margin:0;border:0;
  width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:#101819;overflow:hidden;overscroll-behavior:none;
}
.game-page :is(:fullscreen,.expanded-game) .game-progress {position:absolute;bottom:0;left:0;right:0}
.game-page :is(:fullscreen,.expanded-game) :is(.game-stage,.bm-stage) {min-height:0;min-width:0;height:100%;width:100%;position:relative}
.game-page :is(:fullscreen,.expanded-game) canvas {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;touch-action:none}
.game-page :is(:fullscreen,.expanded-game) :is(.game-overlay,.bm-overlay) {overflow:auto}
.game-page :is(:fullscreen,.expanded-game) :is(.game-start-card,.bm-start,.bm-end,.game-info-card) {max-height:100%;overflow:auto}
@media (orientation:landscape) and (max-height:650px) {
  .game-page :is(.game-shell,.bm-machine):is(:fullscreen,.expanded-game) {
    grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  }
  .game-page :is(:fullscreen,.expanded-game) :is(.game-stage,.bm-stage,.game-controls,.bm-controls) {grid-column:1/-1}
  .game-page :is(:fullscreen,.expanded-game) :is(.game-hud,.bm-hud,.world-options) {padding:2px 6px;gap:10px}
  .game-page :is(:fullscreen,.expanded-game) .world-options label {display:none}
  .game-page :is(:fullscreen,.expanded-game) :is(.game-controls,.bm-controls) {padding:2px 8px}
  .game-page :is(:fullscreen,.expanded-game) .bm-dpad {grid-template-rows:repeat(2,44px)}
  .game-page :is(:fullscreen,.expanded-game) .bm-dpad button {height:44px}
  .game-page :is(:fullscreen,.expanded-game) .bm-bomb-icon {display:none}
}
.bm-remote {border:1px solid #625158;background:#40383b;color:white;padding:8px;border-radius:4px}
.bm-remote:disabled {opacity:.55}
.game-page .world-options .viewport-key {
  display:inline-grid;place-items:center;box-sizing:border-box;width:48px;height:44px;
  padding:0;border:1px solid #686961;border-radius:8px;background:#292b29;
  color:#ede9dc;box-shadow:inset 0 1px #ffffff24,inset 0 -3px #151715;
  cursor:pointer;touch-action:manipulation;
}
.viewport-key .restore-mark,.viewport-key[aria-pressed="true"] .expand-mark {display:none}
.viewport-key[aria-pressed="true"] .restore-mark {display:inline}
.game-page .world-options .viewport-key:focus-visible {outline:3px solid #ffdd90;outline-offset:2px}
.game-page .world-options .viewport-key:active {color:#fff0ae;box-shadow:inset 0 2px #121412}
.game-page .world-options .viewport-key:disabled {opacity:.5;cursor:wait}
@media (any-pointer:coarse),(max-width:700px) {
  .game-page :is(.game-shell,.bm-machine):is(:fullscreen,.expanded-game) .world-options {
    padding:0;background:transparent;height:auto;
  }
}
.game-explore small {display:block}
@media (any-pointer:coarse), (max-width:700px) {
  .game-page :is(.game-shell,.bm-machine):is(:fullscreen,.expanded-game) {display:block;padding:0}
  .game-page :is(:fullscreen,.expanded-game) :is(.bm-stage,.game-stage) {position:absolute;inset:0;isolation:auto}
  .game-page :is(:fullscreen,.expanded-game) :is(.game-hud,.bm-hud,.world-options) {
    position:absolute;top:max(4px,env(safe-area-inset-top));z-index:2;background:#161a1ddd;
    border:0;border-radius:8px;padding:2px 6px;height:46px;box-sizing:border-box;
  }
  .game-page :is(:fullscreen,.expanded-game) .world-options {right:max(5px,env(safe-area-inset-right))}
  .game-page :is(:fullscreen,.expanded-game) .world-options label {display:none}
  .game-page :is(:fullscreen,.expanded-game) :is(.game-hud,.bm-hud) {left:max(5px,env(safe-area-inset-left));gap:8px;max-width:calc(100% - 75px)}
  .game-page :is(:fullscreen,.expanded-game) :is(.coast-player,.coast-level) {display:none}
  .game-page :is(:fullscreen,.expanded-game) .bm-hud small {font-size:8px}
  .game-page :is(:fullscreen,.expanded-game) :is(.game-controls,.bm-controls) {
    position:absolute;z-index:2;inset:auto max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    background:transparent;border:0;padding:0;pointer-events:none;
  }
  .game-page :is(:fullscreen,.expanded-game) :is(.game-controls,.bm-controls) button {pointer-events:auto}
  .game-page :is(.bm-dpad,.touch-dpad) {position:relative;isolation:isolate;align-items:center;justify-content:center}
  .game-page .touch-dpad {gap:0;width:116px;height:100px}
  .game-page .touch-dpad::before {content:"";position:absolute;z-index:-1;width:38px;height:94px;background:#24252aeb;border:2px solid #b3aca2;border-radius:6px}
  .game-page :is(.bm-dpad,.touch-dpad) button {background:#26272bef;color:#d2cdc5;border:2px solid #b3aca2;border-bottom:4px solid #585456;border-radius:4px}
  .game-page .touch-dpad button {width:54px;height:46px}
  .game-page .bm-dpad {grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px 44px;gap:0}
  .game-page .bm-dpad button {height:44px}
  .game-page .bm-dpad button:nth-child(3){grid-area:3/2}
  .game-page .bm-dpad::before {content:"";position:absolute;inset:44px;background:#25262b;z-index:-1}
  .game-page :is(.touch-jump[data-game-input="attack"],.touch-jump[data-game-input="jump"],.game-explore,.bm-remote,.bm-drop) {
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    width:54px;height:54px;margin:0;padding:0;border-radius:50%;background:#b51836;
    border:3px solid #d2c6b9;box-shadow:inset 0 -4px #78162d,0 2px 4px #17182099;
    color:white;font:bold 18px/1 system-ui;touch-action:none;
  }
  .game-page :is(.touch-jump,.bm-remote,.game-explore) small,.game-page .bm-drop span {font:700 8px/1 system-ui}
  .game-page .bm-remote {margin-left:auto}
  .game-page [data-game-input="run"] {order:-1;align-self:end;background:#302d31;border-radius:16px;font-size:9px}
  .game-page :is(.bm-sound,.game-sound) {border-radius:50%;background:#29292bbd;color:#fff}
  .game-page .game-message {bottom:clamp(100px,17vh,146px)}
  .game-page :is(:fullscreen,.expanded-game) :is(.game-overlay,.bm-overlay) {z-index:3}
  .game-page :is(:fullscreen,.expanded-game):has(.game-overlay,.bm-overlay) :is(.game-controls,.bm-controls) {visibility:hidden}
  .game-page :is(:fullscreen,.expanded-game) .world-options {z-index:4}
  .game-page :is(:fullscreen,.expanded-game) [data-fullscreen]{min-width:48px}
  @media(max-width:370px){.game-page .touch-dpad{width:92px}.game-page .touch-dpad button{width:45px}.game-page :is(.touch-jump,.game-explore){max-width:46px}}
}