/* Game page layout (website play.html and the Android app): scaling canvas and touch controls (positions and sizes are set by Input.layout) */
html, body { margin: 0; width: 100%; height: 100%; background: #0d1020; overflow: hidden; overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; font-family: "Trebuchet MS", Verdana, sans-serif; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; }
#game { position: absolute; display: block; background: #000; }
/* hidden probe: its padding is the safe area (notch / rounded corners), read by fitCanvas() */
#safe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }

/* touch controls: only on touch screens, only while playing */
#touch { display: none; }
body.touch.playing #touch { display: block; }
#dpad, .tbtn { position: fixed; box-sizing: border-box; touch-action: none; }
#dpad { left: 18px; bottom: 18px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 3px solid rgba(255,255,255,0.4); }
#dpad::before, #dpad::after { content: ""; position: absolute; background: rgba(255,255,255,0.35); border-radius: 6px; pointer-events: none; }
#dpad::before { left: 41%; top: 9%; width: 18%; height: 82%; }
#dpad::after { top: 41%; left: 9%; height: 18%; width: 82%; }
#dpad.on { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.6); }
.tbtn { border-radius: 50%; border: 3px solid rgba(255,255,255,0.6); color: #fff; font-weight: bold; text-align: center;
  display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.tbtn.on { filter: brightness(1.35); transform: scale(0.93); }
#btn-bomb { right: 24px; bottom: 40px; width: 96px; height: 96px; background: rgba(220,60,40,0.55); font-size: 20px; }
#btn-det { right: 40px; bottom: 148px; width: 60px; height: 60px; background: rgba(224,138,32,0.6); font-size: 15px; display: none; }
body.has-remote #btn-det { display: flex; }
#btn-bush { right: 140px; bottom: 24px; width: 66px; height: 66px; background: rgba(50,170,60,0.55); font-size: 15px; }
#btn-pause { right: 14px; top: 8px; width: 48px; height: 48px; background: rgba(0,0,0,0.45); font-size: 18px; border-radius: 14px; }
/* in the gutters the controls can be solid; over the canvas they stay see-through */
body.tc-side #btn-bomb, body.tc-bottom #btn-bomb { background: rgba(220,60,40,0.8); }
body.tc-side #btn-bush, body.tc-bottom #btn-bush { background: rgba(50,170,60,0.8); }
body.tc-side #btn-det, body.tc-bottom #btn-det { background: rgba(224,138,32,0.85); }
body.tc-side #btn-pause, body.tc-bottom #btn-pause { background: rgba(255,255,255,0.12); }
body.tc-over #dpad, body.tc-over .tbtn { opacity: 0.7; }
/* website only: link back to the home page in the page corner */
#home-link { position: fixed; left: 8px; top: 8px; z-index: 5; padding: 3px 9px; font-size: 13px; line-height: 18px; color: #cfd6ee; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; text-decoration: none; opacity: 0.6; }
#home-link:hover, #home-link:focus { opacity: 1; color: #fff; }
body.home-hide #home-link { display: none; } /* set by fitCanvas() when the corner would cover the game HUD */