@import url('../styles.css');
.vs-page{max-width:960px;padding:38px 0 76px}
.vs-page [hidden]{display:none!important}
.vs-page>.back-link{margin-bottom:27px}
.vs-heading{max-width:700px;margin-bottom:27px}
.vs-heading h1{margin:9px 0 10px;font-size:clamp(2.45rem,5vw,4rem)}
.vs-heading p{margin:0;color:#647e82;font-size:1.04rem}
.vs-section-title{display:flex;align-items:center;gap:12px}
.vs-section-title>span{width:30px;height:30px;display:grid;place-items:center;flex:none;border-radius:50%;background:#f8e9d5;color:#bb692e;font-size:.9rem;font-weight:900}
.vs-section-title h2{margin:0;font-size:1.25rem}
.vs-levels{margin-bottom:25px}
.vs-levels .vs-section-title{margin-bottom:13px}
.vs-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vs-level{display:grid;gap:4px;min-height:104px;padding:17px 20px;border:2px solid #e6ece5;border-radius:16px;background:#fff;color:#244452;text-align:left;box-shadow:0 4px 14px #1d435108;transition:border-color .18s,background .18s,transform .18s}
.vs-level:hover{transform:translateY(-2px);border-color:#eda366}
.vs-level.selected{border-color:#ed8d45;background:#fff4e7;box-shadow:0 5px 20px #de8e4024}
.vs-level strong{font:900 1.16rem Nunito,sans-serif}
.vs-level span{font-size:.8rem;font-weight:800;color:#2e745a}
.vs-level small{font-size:.72rem;color:#788e8c}
.vs-arena{overflow:hidden;padding:24px;border-radius:24px;background:#173a4a;color:#fff;box-shadow:0 20px 44px #173a4a28}
.vs-arena-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:4px;margin-bottom:20px}
.vs-arena-head>.vs-section-title{grid-column:1;align-self:end;min-width:0}
.vs-arena .vs-section-title>span{background:#f3a35c;color:#173a4a}
.vs-arena .vs-section-title h2{color:#fff}
.vs-attempts{grid-column:2;grid-row:1 / span 2;display:grid;justify-items:center;gap:2px;width:106px;padding:10px 8px 8px;border-radius:17px;background:#fff0d9;color:#7b4829;box-shadow:0 5px 14px #0b263b30;text-align:center}
.vs-attempts span{font-size:.68rem;line-height:1.3;font-weight:800}
.vs-attempts strong{font:1000 2.7rem/1 Nunito,sans-serif;color:#c86021;font-variant-numeric:tabular-nums}
.vs-hits{grid-column:1;align-self:start;margin-left:42px;color:#d6e6e6;font-size:.82rem}
.vs-hits b{color:#ffd48e;font-size:1rem}
.vs-stage{position:relative;min-height:282px;display:grid;align-content:center;justify-items:center;gap:27px;overflow:hidden;border:1px solid #ffffff25;border-radius:18px;background:radial-gradient(ellipse at 50% 0%,#426d73 0%,#254e5d 45%,#123546 100%)}
.vs-stage-glow{position:absolute;left:50%;bottom:-150px;width:650px;height:270px;transform:translateX(-50%);border-radius:50%;background:#eea36328;filter:blur(22px);pointer-events:none}
.vs-dice-area{--vs-die-size:clamp(88px,18vw,148px);position:relative;width:100%}
.vs-dice{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,30px);width:100%}
.vs-die{width:var(--vs-die-size);aspect-ratio:1;display:grid;place-items:center;flex:none;padding:16px;border:3px solid #ffffffa8;border-radius:25px;background:linear-gradient(135deg,#fff,#eaf1f2);box-shadow:0 9px 0 #a7bac2,0 20px 30px #09283890;color:#163948;transform:none}
.vs-face{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;justify-items:center}
.vs-pip{width:clamp(10px,2vw,19px);height:clamp(10px,2vw,19px);border-radius:50%;background:#204e5e;box-shadow:inset 2px 3px 2px #0b253b80}
.vs-pip.p1{grid-area:1/1}.vs-pip.p3{grid-area:1/3}.vs-pip.p4{grid-area:2/1}.vs-pip.p5{grid-area:2/2}.vs-pip.p6{grid-area:2/3}.vs-pip.p7{grid-area:3/1}.vs-pip.p9{grid-area:3/3}
.vs-stage-caption{position:relative;color:#c2d9d8;font-size:.72rem;font-weight:900;letter-spacing:.17em}
.vs-outcome{position:absolute;inset:0;z-index:2;display:none;width:var(--vs-die-size);height:var(--vs-die-size);margin:auto;padding:clamp(8px,2.3vw,18px);border:3px solid #fff;border-radius:50%;box-shadow:0 5px 20px #102d3b85;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.vs-stage[data-outcome="hit"]{border-color:#83e8ab}
.vs-stage[data-outcome="miss"]{border-color:#ffb4ae}
.vs-stage[data-outcome="hit"] .vs-stage-caption{color:#abf6c3}
.vs-stage[data-outcome="miss"] .vs-stage-caption{color:#ffd1cd}
.vs-stage[data-outcome="hit"] .vs-check{display:block;background:#abf6c3;color:#134832}
.vs-stage[data-outcome="miss"] .vs-cross{display:block;background:#ffd1cd;color:#7b252b}
.vs-instruction,.vs-feedback{min-height:72px;display:grid;align-content:center;justify-items:center;gap:3px;margin:18px auto 14px;text-align:center;color:#d8e8e8;font-size:.86rem}
.vs-feedback strong{font:900 1.28rem Nunito,sans-serif}
.vs-feedback.win strong{color:#ffd37c}.vs-feedback.miss strong{color:#fff}
.vs-feedback span{color:#d0e1e1}
.vs-controls{display:flex;justify-content:center}
.vs-start{min-width:230px;min-height:56px;font-size:1rem}
.vs-stop{min-width:225px;min-height:74px;display:grid;align-content:center;justify-items:center;gap:1px;padding:11px 30px;border:3px solid #ffd8a2;border-radius:19px;background:#f68643;color:#fff;font:1000 1.65rem Nunito,sans-serif;letter-spacing:.06em;box-shadow:0 7px 0 #bd5930,0 12px 20px #102c3990;transition:transform .1s,box-shadow .1s}
.vs-stop:hover{background:#ff9552}.vs-stop:active{transform:translateY(5px);box-shadow:0 2px 0 #bd5930,0 6px 12px #102c3990}
.vs-stop small{font:700 .67rem 'DM Sans',sans-serif;letter-spacing:0}
.vs-footnote{margin:12px 2px 0;color:#899b99;font-size:.75rem}
@media(max-width:720px){.vs-page{padding:26px 0 54px}.vs-heading p{font-size:.92rem}.vs-level{min-height:96px;padding:13px}.vs-level strong{font-size:1rem}.vs-arena{padding:17px}.vs-stage{min-height:244px}.vs-die{border-radius:18px;padding:11px}.vs-pip{width:clamp(9px,2.6vw,15px);height:clamp(9px,2.6vw,15px)}}
@media(max-width:480px){.vs-level-grid{gap:7px}.vs-level{padding:10px 7px;min-height:94px}.vs-level strong{font-size:.9rem}.vs-level span,.vs-level small{font-size:.64rem}.vs-stage{min-height:203px;gap:23px}.vs-dice-area{--vs-die-size:clamp(71px,23vw,100px)}.vs-dice{gap:8px}.vs-die{border-radius:16px;padding:9px}.vs-arena-head{column-gap:10px}.vs-arena-head .vs-section-title{gap:8px}.vs-arena-head h2{font-size:1.1rem;line-height:1.2}.vs-attempts{width:86px;padding:9px 6px 7px;border-radius:15px}.vs-attempts span{max-width:70px;font-size:.64rem}.vs-attempts strong{font-size:2.45rem}.vs-hits{margin-left:38px;font-size:.76rem}.vs-stop{min-width:200px}}
@media(prefers-reduced-motion:reduce){.vs-level,.vs-stop{transition:none}}

.vs-page{width:min(960px,calc(100% - 32px));min-height:100vh;margin:0 auto}
.vs-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:34px}
.vs-brand{display:inline-flex;align-items:center;gap:10px;color:#244452;text-decoration:none}
.vs-brand-mark{display:grid;width:50px;height:50px;flex:none;place-items:center;border-radius:14px;background:#f8e9d5;font-size:1.65rem}
.vs-brand-copy{display:grid;gap:3px}
.vs-brand-copy strong{font:900 1.35rem/1 Nunito,sans-serif}
.vs-brand-copy small{color:#527278;font-size:.78rem;font-weight:800}
.vs-brand:hover small{color:#ad5927}
.vs-navigation{position:relative;flex:none}
.vs-menu-toggle{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#e98643;cursor:pointer}
.vs-menu-toggle span{width:27px;height:3px;border-radius:3px;background:currentColor}
.vs-menu-toggle:hover{color:#b9652f}
.vs-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:250px;max-width:calc(100vw - 28px);padding:8px;border:1px solid #ede7dd;border-radius:18px;background:#fff;box-shadow:0 12px 32px #24445222}
.vs-menu[hidden]{display:none}
.vs-menu a{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border-radius:11px;color:#244452;font-size:.88rem;font-weight:800;text-decoration:none}
.vs-menu a:hover{background:#fff3e7}
.vs-menu-icon{flex:none;width:24px;height:24px;fill:currentColor;color:#e98643}
.vs-menu-toggle:focus-visible,.vs-menu a:focus-visible{outline:3px solid #f5a16a;outline-offset:3px}
#profiles-title,#leaderboard-title{scroll-margin-top:24px}
.vs-kicker{color:#e98643;font-size:.71rem;font-weight:900;letter-spacing:.15em}
.vs-message{min-height:72px;display:grid;align-content:center;justify-items:center;gap:3px;margin:18px auto 14px;text-align:center;color:#d8e8e8;font-size:.9rem}
.vs-message.win{color:#ffd37c;font-weight:900}
.vs-control{min-width:230px;min-height:56px;display:grid;align-content:center;justify-items:center;gap:2px;padding:11px 22px;border:0;border-radius:13px;background:#f38a46;color:#fff;font:900 1.04rem Nunito,sans-serif;cursor:pointer;box-shadow:0 8px 20px #0b263b44;transition:transform .18s,box-shadow .18s,background .18s}
.vs-control:hover{transform:translateY(-2px);background:#ff9655;box-shadow:0 12px 24px #0b263b55}
.vs-control.stopping{min-height:74px;border:3px solid #ffd8a2;border-radius:19px;background:#f68643;font-size:1.65rem;letter-spacing:.06em;box-shadow:0 7px 0 #bd5930,0 12px 20px #102c3990}
.vs-control.stopping:hover{background:#ff9552}
.vs-control small{font:700 .67rem 'DM Sans',sans-serif;letter-spacing:0}
.vs-level:focus-visible,.vs-control:focus-visible,.vs-brand:focus-visible{outline:3px solid #f5a16a;outline-offset:3px}
.vs-page footer{margin-top:35px}
@media(max-width:720px){.vs-top{margin-bottom:26px}.vs-page{width:calc(100% - 28px)}}
@media(max-width:390px){.vs-page{width:calc(100% - 20px)}}

.vs-leaderboard{margin:0 0 25px;padding:22px;border:1px solid #e3eae3;border-radius:22px;background:#fff;box-shadow:0 5px 24px #173a4a0c}
.vs-leaderboard>.vs-section-title{margin-bottom:8px}
.vs-leaderboard>p{margin:0 0 14px;color:#68817f;font-size:.88rem}
.vs-control:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.vs-leaderboard{margin-top:25px}
.vs-leaderboard h1{margin:0 0 16px;font-size:clamp(1.8rem,5vw,2.4rem)}
.vs-back-to-game{display:inline-block;color:#527278;font-size:.9rem;font-weight:800;text-decoration:none}
.vs-back-to-game:hover{color:#ad5927}
.vs-back-to-game:focus-visible{outline:3px solid #f5a16a;outline-offset:3px}
.vs-leaderboard .vs-personal-best{padding:10px 13px;border-radius:11px;background:#fff3e7;color:#92592e;font-weight:800}
.vs-leaderboard-list{display:grid;gap:5px;margin:13px 0;padding:0;list-style:none}
.vs-leaderboard-row{display:grid;grid-template-columns:35px minmax(0,1fr) 95px 120px;align-items:center;gap:10px;min-height:44px;padding:7px 12px;border-radius:9px;background:#f3f7f2;color:#365b55;font-size:.81rem}
.vs-leaderboard-row.current{outline:2px solid #e99554;background:#fff4e8}
.vs-leaderboard-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-leaderboard-row b{text-align:right;color:#286757}
.vs-leaderboard-row b small{display:block;margin-top:3px;font-size:.72rem;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.vs-rank{font-weight:900;color:#e88948}
.vs-leaderboard .vs-leaderboard-status{margin:11px 0;color:#66837d;font-size:.8rem}
.vs-leaderboard small{color:#819894;font-size:.7rem}
@media(max-width:600px){.vs-leaderboard{padding:16px}.vs-leaderboard-row{grid-template-columns:26px minmax(0,1fr) 112px;gap:7px}.vs-leaderboard-row>span:nth-child(3){display:none}}