.slope-shot-icon{color:#185ac5;letter-spacing:.04em}
.slope-shot-panel{padding:clamp(16px,3vw,30px)}
.slope-shot-layout{display:grid;grid-template-columns:minmax(270px,310px) minmax(430px,1fr);align-items:start;gap:22px;margin-top:14px}
.slope-shot-controls{display:grid;gap:12px;padding:16px;border:2px solid #d7e2ef;border-radius:18px;background:#f7faff}
.slope-scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slope-score{display:grid;gap:2px;padding:10px;border:2px solid #d8e4f1;border-radius:12px;background:#fff;text-align:center}
.slope-score.active{border-color:#185ac5;background:#edf5ff;box-shadow:0 0 0 3px #185ac520}
.slope-score span{color:#526a84;font-size:.82rem;font-weight:850}.slope-score strong{font-size:1.45rem}
.slope-timer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:#12243a;color:#fff;font-weight:900}
.slope-timer strong{font-size:1.65rem;font-variant-numeric:tabular-nums}.slope-timer.urgent{background:#b3263f;animation:slope-timer-pulse .5s ease-in-out infinite alternate}
.slope-instruction{margin:0;color:#36516f;line-height:1.4}
.slope-shot-controls fieldset{margin:0;padding:12px;border:1px solid #cddbea;background:#fff}.slope-shot-controls legend{padding:0 5px}
.slope-number-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.slope-number-choices button{min-width:0;height:42px;border:2px solid #b9cee5;border-radius:9px;background:#fff;color:#174c96;font:inherit;font-weight:1000;cursor:pointer}
.slope-number-choices button:hover:not(:disabled){border-color:#185ac5;background:#edf5ff}.slope-number-choices button.selected{border-color:#10151c;background:#10151c;color:#fff}.slope-number-choices button:disabled{cursor:not-allowed;opacity:.42}
.slope-fraction-readout{min-height:45px;margin:0;padding:10px 12px;border-radius:11px;background:#e8f1fc;color:#173f88;text-align:center;font-size:1.08rem;font-weight:900}
.slope-fire-button{width:100%;min-height:46px}.slope-fire-button:disabled{opacity:.42;cursor:not-allowed}.slope-fire-button[hidden]{display:none}
.slope-shot-feedback{padding:13px;border-radius:14px;background:#eef9f2;text-align:center}.slope-shot-feedback.miss{background:#fff0f2}.slope-shot-feedback h2{margin:0 0 5px;font-size:1.35rem}.slope-shot-feedback p{margin:0 0 10px;line-height:1.4}.slope-shot-feedback .primary{width:100%}
.slope-board-wrap{display:grid;place-items:center;padding:10px;border:2px solid #d7e2ef;border-radius:20px;background:#fff}
.slope-shot-board{display:block;width:min(100%,560px);aspect-ratio:1;background:#fbfdff;border-radius:12px}
.slope-grid-line{stroke:#dbe6f2;stroke-width:1}.slope-grid-line.major{stroke:#abc1d9;stroke-width:1.5}.slope-axis{stroke:#12243a;stroke-width:4}.slope-axis-label,.slope-tick-label{fill:#526a84;font-family:Arial,sans-serif;font-weight:800}.slope-tick-label{font-size:13px}.slope-axis-label{font-size:19px}
.slope-target{fill:#10151c;stroke:#10151c;stroke-width:3;rx:2}.slope-target.hit{fill:#31b86a;stroke:#147c45;animation:slope-target-hit .45s ease-in-out 3}.slope-target.miss{fill:#e33f54;stroke:#9d1e31;animation:slope-target-miss .35s ease-in-out 4}
.slope-launcher{fill:#185ac5;stroke:#0b3a89;stroke-width:3}.slope-launcher-base{fill:#12243a}
.slope-arrow{fill:none;stroke:#185ac5;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 3px 3px #185ac540)}.slope-arrow.preview{stroke:#73a5e7;stroke-dasharray:12 9}.slope-arrow.fired{stroke-dasharray:900;stroke-dashoffset:900;animation:slope-arrow-fire .65s ease-out forwards}.slope-arrow.hit{stroke:#31a963}.slope-arrow.miss{stroke:#e33f54}
.slope-triangle{fill:#185ac50b;stroke:#185ac5;stroke-width:3;stroke-dasharray:8 6}.slope-triangle-label{fill:#12243a;font:900 17px Arial,sans-serif}.slope-shot-label{fill:#12243a;font:italic 900 19px Georgia,serif}
.slope-shot-result{grid-column:1/-1;margin-top:0}.slope-shot-result[hidden]{display:none}.slope-final-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px auto;max-width:560px}.slope-final-stat{padding:12px;border:1px solid #bcd5c5;border-radius:12px;background:#fff}.slope-final-stat strong{display:block;font-size:1.1rem}.slope-final-stat span{display:block;margin-top:4px;color:#526a84}
.slope-celebration{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none}.slope-firework{position:absolute;left:var(--burst-x);top:var(--burst-y);width:1px;height:1px}.slope-firework i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--spark-color);box-shadow:0 0 12px var(--spark-color);animation:slope-firework-spark 1.25s ease-out forwards}
@keyframes slope-arrow-fire{to{stroke-dashoffset:0}}@keyframes slope-target-hit{50%{transform:scale(1.12);filter:drop-shadow(0 0 12px #31b86a)}}@keyframes slope-target-miss{50%{filter:drop-shadow(0 0 14px #e33f54)}}@keyframes slope-timer-pulse{to{transform:scale(1.025)}}@keyframes slope-firework-spark{0%{opacity:1;transform:translate(0,0) scale(.4)}75%{opacity:1}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(1)}}
@media(max-width:850px){.slope-shot-layout{grid-template-columns:1fr}.slope-board-wrap{grid-row:1}.slope-shot-controls{grid-row:2}.slope-shot-result{grid-column:auto}.slope-shot-board{width:min(100%,520px)}}
@media(max-width:520px){.slope-shot-panel{padding:14px}.slope-board-wrap{padding:4px}.slope-shot-layout{gap:12px}.slope-final-stats{grid-template-columns:1fr}.slope-number-choices{gap:4px}.slope-number-choices button{height:39px}}
@media(prefers-reduced-motion:reduce){.slope-arrow.fired,.slope-target.hit,.slope-target.miss,.slope-timer.urgent,.slope-firework i{animation-duration:.01ms;animation-iteration-count:1}}