html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0b0e14; font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif; }
/* The whole game is one fixed 1600 x 900 stage, scaled to fit the window (letterbox), same game for everyone.
   The fixed, clipped frame keeps the unscaled stage size from widening the layout viewport on phones. */
#frame { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; background: #181c27; overflow: hidden; }
/* The real DexScreener embed: locked, it never receives input (the game layer on top takes it all). */
#embed { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; border: 0; z-index: 1; pointer-events: none; }
#legend { position: absolute; left: 14px; top: 10px; z-index: 2; color: #d1d4dc; font-size: 15px; pointer-events: none; white-space: nowrap; }
#legend b { color: #2962ff; margin-right: 10px; }
#legend #ohlc { margin-left: 14px; color: #9598a1; }
#legend .up { color: #089981; } #legend .dn { color: #f23645; }
/* Game layer on top takes all input: the chart never sees a pointer, wheel or key. */
#game { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; z-index: 3; touch-action: none; }
#ui { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; z-index: 4; pointer-events: none; }
.card { position: absolute; pointer-events: auto; background: rgba(19, 23, 34, 0.94); border: 1px solid #2a2e39; border-radius: 10px; padding: 18px 20px; color: #d1d4dc; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.hidden { display: none !important; }
.card .title { font-size: 22px; font-weight: 700; color: #ffb74d; margin-bottom: 4px; }
.card .sub { font-size: 14px; color: #9598a1; margin-bottom: 12px; }
#joinPanel { left: 24px; top: 48px; width: 320px; }
#walletRow { display: flex; gap: 8px; margin-bottom: 8px; }
#walletRow button { flex: 1; }
.addr { font: 12px monospace; color: #089981; min-height: 16px; margin-bottom: 8px; word-break: break-all; }
#nick { width: 100%; box-sizing: border-box; padding: 9px; background: #0b0e14; color: #d1d4dc; border: 1px solid #2a2e39; border-radius: 6px; margin-bottom: 10px; font-size: 15px; }
button { padding: 10px 12px; background: #2a2e39; color: #d1d4dc; border: 0; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; }
button:hover:not(:disabled) { background: #363a45; }
button:disabled { opacity: 0.45; cursor: default; }
#btnJoin, #btnBuyback { width: 100%; background: #ff5722; color: #fff; font-size: 16px; }
#btnJoin:hover:not(:disabled), #btnBuyback:hover:not(:disabled) { background: #ff7043; }
#joinStatus, #bbStatus { min-height: 18px; margin-top: 8px; font-size: 13px; color: #9598a1; }
#buyback { left: 610px; top: 330px; width: 340px; text-align: center; border-color: #ff5722; }
#buyback .count { font: bold 34px monospace; color: #ffdd55; margin-top: 10px; }
/* Touch controls (phones / tablets): big buttons at the bottom corners, over the lava. */
#touch { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; pointer-events: none; }
#touch button { position: absolute; bottom: 30px; width: 170px; height: 170px; border-radius: 50%; pointer-events: auto; background: rgba(19, 23, 34, 0.55); border: 3px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: 54px; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch button:focus { outline: none; }
#touch button { -webkit-tap-highlight-color: transparent; }
#touch button.on { background: rgba(255, 87, 34, 0.6); }
#tLeft { left: 40px; } #tRight { left: 240px; } #tJump { right: 40px; font-size: 34px !important; }