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-family: "Metal Mania", Impact, fantasy; font-size: 30px; font-weight: normal; letter-spacing: 1px; color: #ffb74d; margin-bottom: 4px; }
.card .sub { font-size: 14px; color: #9598a1; margin-bottom: 12px; }
#joinPanel { left: 24px; top: 176px; width: 320px; } /* below the fee widget (top 92) */
#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: 28px "Press Start 2P", "Courier New", ui-monospace, 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; }
/* Round info dock (bottom left, over the lava) and live creator-fee tracker (top left, just below the embed's own pair/OHLC line). */
#dock, #fees { position: absolute; z-index: 6; pointer-events: none; font-family: "Press Start 2P", "Courier New", ui-monospace, monospace; text-transform: uppercase; white-space: nowrap; }
#dock { left: 20px; bottom: 44px; padding: 10px 16px; background: rgba(11,14,20,.94); border: 3px solid #ffd54f; box-shadow: 0 0 22px rgba(255,145,0,.6), 4px 4px 0 #000; }
#dock .dk { font-family: "Metal Mania", Impact, fantasy; font-size: 22px; letter-spacing: 1px; color: #fff; text-shadow: 2px 2px 0 #000; }
#dock .dv { margin-top: 8px; font-size: 28px; color: #ffd54f; text-shadow: 2px 2px 0 #000; }
#dock.brk .dv { color: #90caf9; }
body.touch #dock { left: 440px; }
#fees { left: 14px; top: 96px; padding: 7px 12px 8px; background: rgba(11,14,20,.78); border: 2px solid #ff5722; box-shadow: 0 0 18px rgba(255,87,34,.55), 3px 3px 0 #000; }
#fees .fl { font-size: 10px; color: #ffb74d; }
#fees .fv { margin-top: 6px; font-size: 17px; color: #fff; text-shadow: 0 0 10px #ff9100, 2px 2px 0 #000; }
#fees .fv small { font-size: 11px; color: #ffd54f; text-shadow: none; }
#fees .fa { margin-top: 6px; font-size: 9px; color: #cfd8dc; }
#fees.flash { animation: feeflash .7s ease-out; }
@keyframes feeflash { 0% { box-shadow: 0 0 40px 8px rgba(255,213,79,.95), 3px 3px 0 #000; } 100% { box-shadow: 0 0 18px rgba(255,87,34,.55), 3px 3px 0 #000; } }
#feePops { position: absolute; left: 100%; margin-left: 12px; top: 0; }
#feePops .pop { position: absolute; left: 0; top: 14px; color: #8dff9a; font-size: 14px; text-shadow: 2px 2px 0 #000; animation: feefloat 2.1s ease-out forwards; }
@keyframes feefloat { 0% { transform: translateY(8px); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }