.hp-main { flex: 1; display: flex; justify-content: center; padding: 12px 16px 24px; }
.hp-wrap { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; }
.hp-stage { width: 100%; border-radius: 20px; overflow: hidden; background: #0d0212; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 6px 18px rgba(0,0,0,.4); }
.hp-hint { font-size: 13px; color: rgba(255,255,255,.75); text-align: center; margin: 4px 0 0; line-height: 1.45; position: relative; max-width: 640px; }
.sn-wrap { max-width: 980px; }
.sn-stage { position: relative; }
.sn-cv { display: block; width: 100%; aspect-ratio: 16 / 10; touch-action: none; cursor: crosshair; }
@media (max-width: 700px) { .sn-cv { aspect-ratio: auto; height: calc(100svh - 190px); min-height: 380px; } }
.sn-go { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px; background: rgba(18,3,26,.7); color: #fff; pointer-events: none; animation: sn-bob 1.2s ease-in-out infinite; text-align: center; }
.sn-go b { font-size: 17px; } .sn-go span { font-size: 13px; opacity: .8; }
.sn-go[hidden], .sn-boost[hidden] { display: none; }
@keyframes sn-bob { 50% { transform: translateX(-50%) translateY(-6px); } }
.sn-boost { position: absolute; right: 16px; bottom: 16px; width: 84px; height: 84px; border-radius: 50%; border: 2px solid rgba(253,230,138,.7); background: radial-gradient(circle at 35% 30%, #6ee7b7, #047857 70%); color: #fff; font: 800 14px/1 -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); touch-action: none; user-select: none; -webkit-user-select: none; }
.sn-boost.on { transform: scale(.94); box-shadow: 0 0 0 6px rgba(52,211,153,.35), 0 0 30px rgba(52,211,153,.6); }