/* Telegram supplies both device and app-control insets, updated by its SDK. */
:root{
 --game-safe-top:calc(max(env(safe-area-inset-top,0px), var(--app-device-top,0px), var(--tg-safe-area-inset-top,0px)) + max(var(--app-content-top,0px), var(--tg-content-safe-area-inset-top,0px)));
 --game-safe-bottom:calc(max(env(safe-area-inset-bottom,0px), var(--app-device-bottom,0px), var(--tg-safe-area-inset-bottom,0px)) + max(var(--app-content-bottom,0px), var(--tg-content-safe-area-inset-bottom,0px)));
 --game-safe-left:calc(max(env(safe-area-inset-left,0px), var(--app-device-left,0px), var(--tg-safe-area-inset-left,0px)) + max(var(--app-content-left,0px), var(--tg-content-safe-area-inset-left,0px)));
 --game-safe-right:calc(max(env(safe-area-inset-right,0px), var(--app-device-right,0px), var(--tg-safe-area-inset-right,0px)) + max(var(--app-content-right,0px), var(--tg-content-safe-area-inset-right,0px)));
}
.game-page .shell{padding-top:calc(10px + var(--game-safe-top));padding-left:calc(12px + var(--game-safe-left));padding-right:calc(12px + var(--game-safe-right))}
.game-page header{position:relative;gap:8px}
.game-menu{margin-left:auto;font-size:13px}
.game-menu>summary{display:flex;align-items:center;justify-content:center;min-width:60px;min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--raised);color:var(--text);cursor:pointer;list-style:none}
.game-menu>summary::-webkit-details-marker{display:none}
.game-menu[open]>summary{border-color:var(--accent)}
.game-menu-content{position:absolute;top:100%;right:0;left:0;z-index:30;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px #0006}
.game-menu-content nav{display:flex;flex-wrap:wrap;gap:8px;margin:0!important}
.game-menu-content nav a{display:flex;align-items:center;min-height:44px;padding:10px!important;margin:0!important}
.game-menu-content .experience-settings{margin:8px 0 0}
.fairness-details>summary{font-size:11px;color:var(--secondary);cursor:pointer;min-height:36px;padding:10px 12px}
@media(max-width:899px){
 .game-page .shell{padding-bottom:calc(var(--play-dock-height,140px) + 20px)}
 .game-page header{padding-bottom:6px}
 .game-page .brand .symbol{width:30px;height:30px;font-size:22px;border-radius:8px}
 .game-page .brand strong{font-size:16px;letter-spacing:.3px}
 .game-page .brand small{display:none}
 .game-page header>.pill{font-size:8px;padding:6px;letter-spacing:0}
 .game-page .top{padding:7px 10px;border-radius:10px;min-height:42px;margin-bottom:8px}
 .game-page .top>div{display:flex;align-items:baseline;gap:6px;min-width:0}
 .game-page .top>div:first-child>small{display:none}
 .game-page .top h3{font-size:12px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}
 .game-page .balance div{font-size:18px;white-space:nowrap}
 .game-page .top small{font-size:8px;letter-spacing:.3px}
 .game-page .arena{border-radius:12px}
 .game-page .bb-status{padding:6px 10px;font-size:11px}
 .game-page .bb-index{font-size:21px;padding:2px 10px 6px}
 .game-page .bb-index small{font-size:9px}
 .game-page .bb-graph{height:clamp(140px,22dvh,190px);margin:0 10px}
 .game-page .graph-labels{font-size:10px;padding:6px 10px;flex-wrap:wrap}
 .game-page #market-message{font-size:11px;line-height:1.35;margin:4px 0 6px}
 /* The dock already carries the same loss distance and cash-out action. */
 .game-page #risk-summary,.game-page #chart-position{display:none!important}
 .game-page .round-progress{margin-bottom:8px;gap:4px}
 .game-page .round-progress span{padding:5px;font-size:10px}
 .game-page .panel-title{margin-bottom:6px}
 .game-page .panel-title h2{font-size:12px}
 .game-page .direction-grid{margin:6px 0 8px}
 .game-page .team{min-height:48px;padding:6px;font-size:16px}
 .game-page .team small{font-size:9px}
 .game-page .stake-risk{margin:6px 0;font-size:10px}
 .game-page .play-dock{padding:8px calc(12px + var(--game-safe-right)) calc(8px + var(--game-safe-bottom)) calc(12px + var(--game-safe-left))}
 .game-page .play-dock .primary{height:48px;font-size:15px}
 .game-page .loss-distance{font-size:11px;margin-bottom:6px}
 .game-page .notice{font-size:11px;line-height:1.3;margin-top:5px}
}
@media(min-width:900px){.game-page .shell>.arena{top:calc(16px + var(--game-safe-top))}}

/* Safe areas also apply to the lobby, home, profile and rankings. */
body:not(.game-page) > .shell,body:not(.game-page) > .wrap{padding-top:calc(16px + var(--game-safe-top));padding-left:calc(14px + var(--game-safe-left));padding-right:calc(14px + var(--game-safe-right));padding-bottom:calc(40px + var(--game-safe-bottom))}
@media(max-width:899px){.game-page .play-dock .direction-grid{margin:0 0 8px;gap:8px}.game-page .play-dock .team{min-height:44px;font-size:15px}.game-page .play-dock .team small{display:none}.bullbear-page .bet-panel>.panel-title{display:none}}