.std-root, .std-root * { margin: 0; padding: 0; box-sizing: border-box; }
.std-root { position: absolute; left: 0; top: 0; width: 670px; height: 532px; transform-origin: 0 0; overflow: hidden; background: radial-gradient(circle at 90% 90%, #647281 0%, #2C3239 60%, #647281 100%); font-family: Arial, sans-serif; font-size: 11px; color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
.std-root #GameRoot { position: absolute; left: 0; top: 0; width: 670px; height: 416px; display: none; }
.std-root #gameCanvas { display: block; }
.std-root #hud { position: absolute; left: 0; top: 416px; width: 670px; height: 116px; }
.std-root #hudLeft, .std-root #hudMiddle, .std-root #hudRight { position: absolute; top: 0; height: 116px; border: 1px solid #333366; border-top: none; }
.std-root #hudLeft { left: 0; width: 290px; }
.std-root #hudMiddle { left: 290px; width: 200px; }
.std-root #hudRight { left: 490px; width: 180px; overflow: hidden; }
.std-root .hud-header { position: absolute; left: 0; width: 100%; height: 26px; background: linear-gradient(to bottom, #A2CEEC 0%, #2D81CF 50%, #005DC3 50%, #005DC3 90%, #003DA3 100%); border-bottom: 1px solid #0E0F0F; display: flex; align-items: center; padding-left: 4px; }
.std-root .hud-credits { position: absolute; left: 0; top: 26px; width: 100%; padding-left: 4px; }
.std-root .hud-label { font-size: 10px; }
.std-root .hud-value-other { color: #ffff00; }
.std-root .game-button { position: relative; cursor: pointer; border: 2px solid transparent; border-image: none; border-radius: 10px; background: linear-gradient(to bottom, #A2CEEC 0%, #2D81CF 50%, #005DC3 50%, #005DC3 100%) padding-box, linear-gradient(to bottom, #82AECC 0%, #0D61AF 50%, #003DA3 50%, #003DA3 100%) border-box; background-size: 100% 100%; padding: 3px; font-family: Arial, sans-serif; font-size: 11px; color: #fff; }
.std-root .game-button:hover:not(:disabled) { background: linear-gradient(to bottom, #B2DEFC 0%, #3D91DF 50%, #006DD3 50%, #006DD3 100%) padding-box, linear-gradient(to bottom, #82AECC 0%, #0D61AF 50%, #003DA3 50%, #003DA3 100%) border-box; background-size: 100% 100%; }
.std-root .game-button:active:not(:disabled) { background: linear-gradient(to bottom, #B2DEFC 0%, #3D91DF 50%, #006DD3 50%, #006DD3 100%) padding-box, linear-gradient(to bottom, #82AECC 0%, #0D61AF 50%, #003DA3 50%, #003DA3 100%) border-box; background-size: 100% 100%; }
.std-root .game-button:disabled { opacity: .75; cursor: default; }
.std-root .game-button > div { color: #fff; }
.std-root #hud { z-index: 0; }
.std-root #hud.hud-locked, .std-root #hud.hud-locked * { pointer-events: none !important; }
.std-root #ElementBuildItemsPanel { position: absolute; top: 60px; left: 5px; width: 280px; height: 90px; }
.std-root #debugging { position: absolute; bottom: 0; left: 0; display: none; }
.std-root #ElementUnitName { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); }
.std-root #ElementSellButton { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.std-root #ElementSaleValue { display: block; text-align: center; width: 80px; }
.std-root #ElementUnitBuyStats { position: absolute; top: 26px; left: 4px; width: 192px; display: none; }
.std-root .std-stats { display: grid; grid-template-columns: 70px 1fr; gap: 2px; }
.std-root #ElementUnitViewStats { position: absolute; top: 26px; left: 4px; width: 192px; display: none; }
.std-root .std-unitbtns { position: absolute; right: 4px; top: 6px; width: 60px; }
.std-root #ElementUpgradeButton { width: 100%; margin-bottom: 4px; }
.std-root #ElementRepairButton { width: 100%; }
.std-root #ElementUpgradeButton > div, .std-root #ElementRepairButton > div { text-align: center; }
.std-root #ElementUpgradeCost, .std-root #ElementRepairCost { text-align: center; font-size: 10px; }
.std-root #ElementWaveFuture { width: 150px; height: 30px; overflow: hidden; }
.std-root #ElementWaveFuture > div { display: flex; align-items: center; justify-content: center; }
.std-root #ElementSendWaveButton, .std-root #ElementGameMenuButton { flex: 1; height: 18px; padding: 0; line-height: 14px; }
.std-root #ElementSendWaveButton { margin-right: 2px; }
.std-root #ElementGameMenuButton { margin-left: 2px; }
.std-root #ElementWaveNo { color: #ffffff; text-align: left; }
.std-root #ElementWaveFutureCountdown { color: #ffffff; text-align: right; }
.std-root .std-hr-score { position: relative; width: 100%; height: 26px; background: linear-gradient(to bottom, #A2CEEC 0%, #2D81CF 50%, #005DC3 50%, #005DC3 90%, #003DA3 100%); border-bottom: 1px solid #0E0F0F; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; }
.std-root .std-hr-future { position: relative; width: 100%; height: 30px; overflow: hidden; margin: 2px 4px; }
.std-root .std-hr-wavehead { position: relative; width: 100%; height: 18px; background: linear-gradient(to bottom, #A2CEEC 0%, #2D81CF 50%, #005DC3 50%, #005DC3 90%, #003DA3 100%); border-bottom: 1px solid #0E0F0F; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.std-root .std-hr-wavevals { position: relative; width: 100%; height: 18px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.std-root .std-hr-btns { position: relative; width: 100%; height: 20px; display: flex; align-items: center; justify-content: space-between; }
.std-root #GameFront { position: absolute; left: 0; top: 0; width: 670px; height: 532px; }
.std-root .std-front-bg { position: absolute; left: 0; top: 0; width: 670px; height: 532px; }
.std-root #RockFalls { position: absolute; left: 62px; top: 20px; width: 546px; height: 532px; overflow: visible; }
.std-root #LogoTopImage { position: absolute; top: 40px; left: 223px; opacity: 0; transform: scale(1.5); transform-origin: 112px 40px; }
.std-root #LogoBottomImage { position: absolute; top: 110px; left: 63px; opacity: 0; transform: scale(1.5); transform-origin: 283px 57px; }
.std-root #helpBubble { position: absolute; left: 0; top: 0; width: 320px; height: 60px; display: none; z-index: 5; filter: drop-shadow(4px 4px 3px rgba(0,0,0,.8)); }
.std-root #leftBubblePointer { position: absolute; left: 0; top: 0; width: 320px; height: 60px; }
.std-root #helpBubbleText { position: absolute; top: 7px; left: 27px; width: 280px; color: #000; font: 11px/1.25 Arial, sans-serif; text-align: left; }
.std-root #helpClose { position: absolute; top: 4px; left: 304px; cursor: pointer; }
.std-root #helpBubble.std-bubble-flip #leftBubblePointer { transform: scaleX(-1); }
.std-root #helpBubble.std-bubble-flip #helpBubbleText { left: 7px; }
.std-root #helpBubble.std-bubble-flip #helpClose { left: 283px; }

/* popups: sgpopup */
.std-root .std-rotate { display: none; position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; padding: 40px; color: #fff; font-size: 28px; text-align: center; }
@media (pointer:coarse) and (orientation:portrait) { .std-root .std-rotate { display: flex; } }
.sgp .std-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.sgp .std-map { display: flex; flex-direction: column; align-items: center; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 6px; color: inherit; font: inherit; }
.sgp .std-map img { width: 100%; max-width: 150px; height: auto; }
.sgp .std-map span { margin-top: 4px; font-size: 14px; text-align: center; }
.sgp .std-map .std-map-best { font-size: 12px; color: #ffff00; }
.sgp .std-map:hover, .sgp .std-map:focus { outline: 2px solid var(--sgp-accent, #4fb3ff); outline-offset: 2px; }
.sgp .std-help p { margin: 6px 0; font-size: 14px; text-align: left; }
.sgp .std-options label { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 6px 0; }
.sgp-dock .sgp-card.std-start { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sgp-dock .sgp-card.std-start .sgp-btn:not(.sgp-primary) { background: rgba(12,18,32,.78); border-color: rgba(255,255,255,.28); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sgp-dock .sgp-card.std-start .sgp-btn:not(.sgp-primary):hover { background: rgba(24,34,56,.9); }