.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: #071a10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 6px 18px rgba(0,0,0,.4); }
.hp-cv { display: block; width: 100%; aspect-ratio: 1; touch-action: none; cursor: grab; }
.hp-cv:active { cursor: grabbing; }
.hp-pts { height: 26px; margin-top: 8px; font-size: 17px; font-weight: 700; color: #fde047; text-shadow: 0 2px 8px rgba(0,0,0,.4); opacity: 0; transition: opacity 0.2s; position: relative; }
.hp-pts.show { opacity: 1; }
.hp-hint { font-size: 13px; color: rgba(255,255,255,.75); text-align: center; margin: 4px 0 0; line-height: 1.45; position: relative; }