.sg-game{--sg-cream:#f4e8c9;--sg-muted:#aab3c4;box-sizing:border-box;width:100%;max-width:480px;margin:0 auto;padding:0 9px 10px;background:linear-gradient(150deg,#232a3d,#121624 70%);border:1px solid #b9a17a70;border-radius:22px;color:#e9ecf3;font-family:inherit;box-shadow:0 12px 32px #04081440,inset 0 1px #e8d9b02e}
.sg-game *{box-sizing:border-box}.sg-heading{text-align:center;padding:11px 8px 5px}.sg-kicker{color:#c9b98f;font-size:8px;font-weight:800;letter-spacing:2px}.sg-title{margin:3px 0 2px!important;font-size:28px!important;line-height:1.2;color:var(--sg-cream);font-weight:800;letter-spacing:-.8px;text-shadow:0 2px 0 #02050c80}.sg-subtitle{font-size:10px;color:var(--sg-muted);margin:0!important}
.sg-hud{display:flex;justify-content:space-between;gap:6px;padding:9px 6px;font-size:10px;font-weight:800;color:#e4e8f0}.sg-hud span:nth-child(2){color:#f3c76a}
.sg-stage{position:relative;overflow:hidden;border:1px solid #d8c4987a;border-radius:16px;background:#141a28;box-shadow:0 4px 18px #02060f66}.sg-canvas{display:block;width:100%;height:auto;aspect-ratio:420/570;touch-action:none;cursor:crosshair;outline:none}.sg-canvas:focus-visible{outline:3px solid #f3d38f;outline-offset:-4px}
.sg-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 0 6px}.sg-swatch{appearance:none;min-height:44px;border:2px solid #ffffff1f;border-radius:12px;background:linear-gradient(#ffffff14,#00000026),var(--glass);color:#fff;font-family:inherit;font-size:12px;font-weight:800;text-shadow:0 1px 2px #0008;cursor:pointer;touch-action:manipulation;opacity:.62;transition:opacity .15s,transform .15s}.sg-swatch.sg-picked{opacity:1;border-color:#fff3d0;transform:translateY(-1px);box-shadow:0 0 14px var(--glass)}.sg-swatch:focus-visible{outline:2px solid #ffe3a6;outline-offset:3px}.sg-swatch:disabled{opacity:.3;cursor:default}
.sg-aim{display:grid;grid-template-columns:52px 1fr 52px;gap:6px;margin-bottom:6px}.sg-fire{font-size:13px}
.sg-controls{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}.sg-button{appearance:none;min-height:42px;border:1px solid #a9b4c854;border-radius:10px;padding:9px 8px;background:linear-gradient(#384259,#283046);color:#eef1f7;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;touch-action:manipulation;box-shadow:inset 0 1px #ffffff14,0 2px 0 #050a1688}.sg-button:hover:not(:disabled){background:#435072}.sg-button:focus-visible{outline:2px solid #ffe3a6;outline-offset:3px}.sg-button:disabled{opacity:.44;cursor:default}.sg-primary{background:linear-gradient(#f6dfa6,#e2be72);color:#2b2516;border-color:#fff0bf;box-shadow:inset 0 1px #fff8da,0 3px 0 #92703a}.sg-primary:hover:not(:disabled){background:#fbe8bb}
.sg-status{min-height:18px;margin:9px 4px 0!important;font-size:11px;color:#d7dce7;text-align:center}.sg-results{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--sg-muted)}.sg-results:empty{display:none}.sg-result-score{font-size:30px;color:var(--sg-cream)}.sg-result-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:6px;width:100%}.sg-share{width:100%;min-height:70px;font:11px monospace;border-radius:8px}
.sg-help{margin-top:9px;font-size:11px;color:#c9cfdb;line-height:1.5}.sg-help summary{cursor:pointer;font-weight:800;color:#e8ddc0}.sg-help p{margin:6px 0!important}
@media (prefers-reduced-motion:reduce){.sg-swatch{transition:none}}