/* Noos Skyguard */
body.sg-body { font-family: 'Quicksand', sans-serif; margin: 0; background: #070b1a; color: #e8ecff; }
[hidden] { display: none !important; }
#beta-report-trigger { display: none !important; }
.sg-page { display: flex; flex-direction: column; align-items: center; padding: 6px 8px 10px; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.sg-hud, .sg-bar, .sg-power { width: var(--sw, 360px); box-sizing: border-box; }
.sg-hud { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 4px 4px; }
.sg-stat { display: flex; flex-direction: column; min-width: 80px; }
.sg-stat.sg-mid { align-items: center; }
.sg-stat.sg-right { align-items: flex-end; }
.sg-lab { font-size: 10px; letter-spacing: .14em; color: #7f8bb8; font-weight: 700; }
.sg-val { font-size: clamp(18px, 4.4vw, 26px); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sg-power { min-height: 20px; display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; padding-bottom: 3px; }
.sg-pw { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #1b2550; color: #9fe8ff; white-space: nowrap; }
.sg-pw.rush { background: #3a1a30; color: #ffb3c7; }
.sg-pw.low { background: #5a1830; color: #ff8aa5; }
.sg-stage { position: relative; width: var(--sw, 360px); height: var(--sh, 504px); border-radius: 14px; overflow: hidden; background: #0b1230; box-shadow: 0 8px 30px rgba(0,0,0,.45); touch-action: none; }
#sgCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sg-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,8,22,.78); backdrop-filter: blur(3px); padding: 12px; box-sizing: border-box; }
.sg-opts { background: #070b1a; backdrop-filter: none; align-items: flex-start; overflow-y: auto; justify-content: flex-start; flex-direction: column; }
.sg-opts > :first-child { margin-top: auto; }
.sg-opts > :last-child { margin-bottom: auto; }
.sg-card, .sg-optcard { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.sg-optcard { text-align: left; }
.sg-kicker { font-size: 11px; letter-spacing: .3em; color: #7f8bb8; font-weight: 700; text-align: center; }
.sg-title { margin: 0; font-size: clamp(34px, 9vw, 48px); letter-spacing: .08em; background: linear-gradient(180deg, #fff, #7fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.sg-tag { margin: 0 0 4px; color: #b4bfe6; font-size: 14px; }
.sg-h2 { margin: 0 0 4px; text-align: center; letter-spacing: .12em; font-size: 22px; }
.sg-modes { display: flex; gap: 6px; }
.sg-mode { flex: 1; padding: 10px 4px; border-radius: 12px; border: 2px solid #26336b; background: #101a42; color: #cdd6ff; font: 700 13px 'Quicksand', sans-serif; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.sg-mode[aria-checked="true"] { border-color: #5fe1ff; background: #14306a; color: #fff; box-shadow: 0 0 14px rgba(95,225,255,.35); }
.sg-mode small { display: block; font-weight: 600; font-size: 10px; color: #8fa0d8; letter-spacing: .04em; margin-top: 2px; }
.sg-mdesc { margin: 2px 0 0; min-height: 36px; font-size: 13px; color: #b4bfe6; text-align: center; }
.sg-mbest { margin: 0; font-size: 12px; color: #7fe3ff; font-weight: 700; text-align: center; }
.sg-btn { padding: 13px 16px; border-radius: 14px; border: 0; font: 700 15px 'Quicksand', sans-serif; letter-spacing: .1em; background: #1a2557; color: #fff; cursor: pointer; }
.sg-btn.sg-play { background: linear-gradient(180deg, #38d6ff, #1b8fe0); color: #04112a; font-size: 17px; }
.sg-btn.sg-ghost { background: transparent; border: 2px solid #2c3a7a; color: #aab6e6; }
.sg-btn:active, .sg-chip:active, .sg-mode:active { transform: scale(.97); }
.sg-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #16204a; font-size: 14px; }
.sg-optlabel { font-size: 11px; letter-spacing: .16em; color: #7f8bb8; font-weight: 700; }
.sg-chip { padding: 7px 12px; border-radius: 999px; border: 2px solid #26336b; background: #101a42; color: #dfe6ff; font: 700 12px 'Quicksand', sans-serif; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.sg-bar { display: flex; gap: 8px; justify-content: space-between; padding-top: 8px; }
.sg-barbtn { flex: 1; padding: 9px 4px; }
.sg-ready { background: rgba(5,8,22,.35); backdrop-filter: none; cursor: pointer; }
.sg-readycard { text-align: center; }
.sg-readymode { font-size: 13px; letter-spacing: .3em; color: #7fe3ff; font-weight: 700; }
.sg-readytap { font-size: 28px; font-weight: 700; letter-spacing: .1em; animation: sgPulse 1.2s ease-in-out infinite; }
@keyframes sgPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.sg-count { background: rgba(5,8,22,.6); }
.sg-countnum { font-size: 96px; font-weight: 700; color: #fff; text-shadow: 0 0 30px #38d6ff; }
.sg-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #14306a; color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#trophy-list { text-align: left; max-height: 46vh; overflow-y: auto; margin: 6px 0; }
.sg-page.tight .sg-title { font-size: 30px; }
.sg-page.tight .sg-btn { padding: 10px 12px; }
.sg-page.land { display: grid; grid-template-columns: auto 200px; grid-template-rows: auto auto 1fr; justify-content: center; column-gap: 14px; align-items: start; }
.sg-page.land .sg-stage { grid-column: 1; grid-row: 1 / span 3; }
.sg-page.land .sg-hud, .sg-page.land .sg-power, .sg-page.land .sg-bar { grid-column: 2; width: 200px; }
.sg-page.land .sg-hud { flex-direction: column; align-items: stretch; grid-row: 1; gap: 4px; }
.sg-page.land .sg-stat, .sg-page.land .sg-stat.sg-mid, .sg-page.land .sg-stat.sg-right { align-items: flex-start; }
.sg-page.land .sg-power { grid-row: 2; flex-wrap: wrap; justify-content: flex-start; }
.sg-page.land .sg-bar { grid-row: 3; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .sg-readytap { animation: none; } }