html { --sl: max(env(safe-area-inset-left, 0px), var(--fh-inset-left, 0px)); --sr: max(env(safe-area-inset-right, 0px), var(--fh-inset-right, 0px)); --st: max(env(safe-area-inset-top, 0px), var(--fh-inset-top, 0px)); --sb: max(env(safe-area-inset-bottom, 0px), var(--fh-inset-bottom, 0px)); --ts: 1; }
html, body { margin: 0; height: 100%; background: #04101c; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; font-family: sans-serif; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#wrap { position: fixed; inset: 0; box-sizing: border-box; padding: var(--st) var(--sr) var(--sb) var(--sl); overflow: hidden; }
/* image-rendering: pixelated — the canvas bitmap (640x360) is upscaled to the phone's native
   pixels by the browser compositor; "auto" blends that upscale across every tile border, which
   is where the "random white lines between tiles" and the soft look came from on phones */
#screen { position: absolute; max-width: none; max-height: none; image-rendering: pixelated; background: #06131f; display: block; }
.hide { display: none !important; }
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#touch .b { position: absolute; pointer-events: auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #1c3a50; border: 3px solid #e8f4f8; color: #fff; font: bold 15px sans-serif; touch-action: none; transform: scale(var(--ts)); }
/* the action button is relabelled per spot (SELL / ENTER / TALK...): gold marks a contextual
   action, so the bar never looks like a plain CAST while you are stood on something useful */
#touch .b.ctx { border-color: #ffe060; color: #ffe060; box-shadow: 0 0 0 2px rgba(255,224,96,0.25); }
#touch .b.on { background: #ffe060; color: #1a1206; }
/* floating joystick (touchstick.js) bottom-left, action buttons bottom-right.
   Every circle scales about its own bottom corner by --ts, so the offsets add the scaled sizes
   (CAST 92px, REEL 80px, BOX 70px — 16px gaps at the default size). */
#touch { --A: 92px; --Bz: 80px; --ab: 14px; --e: 10px; --bw: 108px; }
#ba, #bb { bottom: calc(var(--sb) + var(--ab)); transform-origin: bottom right; }
#ba { right: calc(var(--sr) + var(--e)); width: var(--A); height: var(--A); border-radius: 50%; font-size: 17px; background: #2c8c64; }
#bb { right: calc(var(--sr) + var(--bw)); bottom: calc(var(--sb) + var(--ab) - 6px); width: var(--Bz); height: var(--Bz); border-radius: 50%; font-size: 14px; background: #d8782c; }
body.lefty #ba, body.lefty #bb { right: auto; transform-origin: bottom left; }
body.lefty #ba { left: calc(var(--sl) + var(--e)); } body.lefty #bb { left: calc(var(--sl) + var(--bw)); }
#bx { right: calc(var(--sr) + var(--e) + 12px); bottom: calc(var(--sb) + var(--ab) + var(--A) * var(--ts) + 10px); width: 70px; height: 70px; border-radius: 50%; font-size: 13px; background: #4c74c8; transform-origin: bottom right; }
body.lefty #bx { right: auto; left: calc(var(--sl) + var(--e) + 12px); transform-origin: bottom left; }
/* PAUSE: a clear plate under the HUD's rank line, never faded */
#touch #bs { right: calc(max(var(--sr), 20px) + 0px); top: calc(max(var(--st), 20px) + 22px); width: 56px; height: 48px; border-radius: 12px; font-size: 22px; letter-spacing: -2px; background: #0c1c38; border: 3px solid #ffe060; color: #fff; opacity: 1; transform: none; transform-origin: top right; }
body.lefty #touch #bs { right: auto; left: calc(max(var(--sl), 20px) + 0px); transform-origin: top left; }
@media (max-height: 400px) { #touch { --A: 78px; --Bz: 68px; --bw: 92px; } }
/* menus, title, slots, map and dialogs have their own tap targets: the action circles and PAUSE only exist in the world and the reel */
#touch.menu .b { display: none; }
#rot { position: fixed; left: 50%; transform: translateX(-50%); top: 52%; z-index: 6; background: #0c1c38; color: #fff; font: 14px sans-serif; padding: 8px 14px; border-radius: 12px; border: 2px solid #7ad8ff; text-align: center; max-width: 80vw; }
noscript { color: #fff; }

/* the shared Back to Arcade button (backbtn.js): top left, only on menu screens */
#arcade-back { position: fixed; top: 10px; left: 10px; z-index: 20; }
#arcade-back.hide { display: none; }

#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #04101c; color: #ffd23a; font: bold 26px sans-serif; text-align: center; z-index: 30; letter-spacing: 1px; }
#loading small { color: #cfe8f5; font-size: 14px; font-weight: normal; margin-top: 8px; }
#loading.hide { display: none; }
/* the boot card: the studio shield and "RoodleSoft LLC" above the game's name */
#loading img { height: auto; max-height: 30vh; width: auto; margin-bottom: 6px; }
#loading .ld-by { color: #fff6e2; font: bold 16px sans-serif; letter-spacing: 0; margin-bottom: 14px; }