:root{--s21-ink:#08394a;--s21-aqua:#dff9fc;--s21-cyan:#59c9df;--s21-deep:#087d99;--s21-well:#b5ebf3;--s21-gold:#f1c348;--s21-red:#c7243c}
.s21-shell{position:relative;margin:-1rem 0 0;padding:clamp(1rem,3vw,2.5rem);min-height:90vh;color:var(--s21-ink);background:linear-gradient(145deg,#edfdff,var(--s21-aqua) 52%,#caeff5);box-shadow:0 0 0 100vmax var(--s21-aqua);clip-path:inset(0 -100vmax);font-family:system-ui,sans-serif}
.s21-header{display:grid;grid-template-columns:minmax(18rem,1fr) minmax(20rem,34rem) auto;gap:1.25rem;align-items:end;margin-bottom:1rem}.s21-header nav{display:flex;gap:.5rem;font-size:.85rem}.s21-header h1{margin:.25rem 0 0;color:#04aee0;font-size:clamp(2.4rem,6vw,5.3rem);font-style:italic;font-weight:900;line-height:.9;letter-spacing:-.06em;text-shadow:0 3px #fff}.s21-header h1 span{font-size:.55em}.s21-header h1 em{color:#775090;font-family:cursive;font-size:.62em}.s21-header p{margin:.65rem 0 0}.s21-rules{max-width:34rem;padding:1rem 1.2rem;border-left:5px solid var(--s21-cyan);background:#fff9;border-radius:.25rem .8rem .8rem .25rem}.s21-sound{min-width:6.5rem;min-height:44px;border:1px solid #55aebd;border-radius:2rem;color:var(--s21-ink);background:#fff;font-weight:850}.s21-sound[aria-pressed=true]{color:#fff;background:#775090}
.s21-message,.s21-level-complete{padding:.8rem 1rem;border:1px solid #68b9c8;border-radius:.65rem;background:#fff;box-shadow:0 5px 15px #087d9914}.s21-message[role=alert]{border-color:#e3929f;color:#75192a}.s21-kicker{margin:0;color:var(--s21-deep);font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.s21-start,.s21-game-over,.s21-leaderboards{margin-top:1.2rem;padding:clamp(1rem,3vw,2rem);border:1px solid #8fd5e1;border-radius:1rem;background:#ffffffc7;box-shadow:0 12px 32px #075a7214}.s21-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,1.1fr);gap:2rem}.s21-start h2,.s21-leaderboards h2{margin:.2rem 0 .5rem}.s21-name-form label,.s21-start-form legend{display:block;margin-bottom:.35rem;font-weight:800}.s21-name-form>div{display:flex;gap:.5rem}.s21-name-form input{min-width:0;flex:1;padding:.7rem;border:1px solid #63afbd;border-radius:.45rem}.s21-name-form button,.s21-actions button,.s21-hand button{min-height:44px;border:0;border-radius:.5rem;color:#fff;background:var(--s21-deep);font-weight:800}.s21-name-form button{padding:.5rem 1rem}.s21-start-form{margin-top:1rem}.s21-start-form fieldset{padding:0;border:0}.s21-difficulties{display:flex;gap:.5rem}.s21-difficulties input{position:absolute;opacity:0}.s21-difficulties span{display:block;padding:.65rem .85rem;border:2px solid #8dccd7;border-radius:.55rem;background:#fff;font-weight:750}.s21-difficulties input:checked+span{border-color:var(--s21-deep);color:#fff;background:var(--s21-deep)}.s21-start-button{width:100%;min-height:50px;margin-top:.8rem;border:0;border-radius:.6rem;color:#173604;background:linear-gradient(#ffdf69,#edb92c);font-size:1.08rem;font-weight:900}.s21-start-button:disabled{opacity:.45}
.s21-game-over{text-align:center}.s21-game-over h2{font-size:1.5rem}.s21-game-over h2 strong{display:block;color:var(--s21-deep);font-size:clamp(3rem,9vw,6rem);line-height:1}.s21-game-over.is-qualified{border:2px solid #d5a61c;background:linear-gradient(135deg,#fffef5,#fff3b9)}.s21-game-over.is-qualified h2 strong{color:#9b6d00}.s21-submission{font-size:1.08rem;font-weight:900}.is-qualified .s21-submission{color:#765200}
.s21-dashboard{display:grid;grid-template-columns:repeat(6,1fr);gap:.65rem;padding:1rem;border-radius:1rem;background:#07576b;color:#fff;box-shadow:0 10px 25px #06465733}.s21-dashboard>div{display:flex;min-width:0;flex-direction:column}.s21-dashboard span{color:#bcecf3;font-size:.72rem;font-weight:800;text-transform:uppercase}.s21-dashboard strong{font-size:clamp(.9rem,1.8vw,1.2rem)}.s21-dashboard progress{grid-column:1/-1;width:100%;height:.55rem}.s21-clock strong{color:#ffe16f}.s21-clock strong.is-urgent{color:#ff9eac}
.s21-playfield{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;margin-top:1rem}.s21-next{display:flex;padding:1rem;border:2px solid #fff;border-radius:1rem;align-items:center;flex-direction:column;background:#7fd8e7;text-align:center;box-shadow:inset 0 0 24px #087d9924}.s21-next>span{font-weight:900;text-transform:uppercase}.s21-next p{margin:auto 0 0;font-size:.8rem}.s21-card{display:flex;width:3.55rem;aspect-ratio:5/7;padding:.3rem;border:1px solid #87939b;border-radius:.35rem;flex:0 0 auto;flex-direction:column;color:#101820;background:#fff;box-shadow:0 4px 8px #00334324;line-height:1}.s21-card b{font-size:1.15rem}.s21-card i{margin:auto;text-align:center;font-size:1.7rem;font-style:normal}.s21-card small{overflow:hidden;font-size:.48rem;text-overflow:ellipsis}.s21-card.is-red{color:var(--s21-red)}.s21-card-large{width:6.1rem;margin-top:.75rem;padding:.5rem}.s21-card-large b{font-size:1.7rem}.s21-card-large i{font-size:3rem}
.s21-rail-wrap{min-width:0}.s21-hand-rail{display:grid;grid-template-columns:repeat(5,minmax(8.6rem,1fr));gap:.7rem;min-width:0}.s21-rail-hint{display:none}.s21-hand{position:relative;display:flex;min-height:19rem;padding:.7rem;border:2px solid #82d6e4;border-radius:.85rem;overflow:hidden;flex-direction:column;background:linear-gradient(#cef4f8,#a9e6ef);box-shadow:inset 0 -25px 50px #28a9c128}.s21-hand header{display:flex;min-height:2.7rem;justify-content:space-between;gap:.25rem;align-items:start}.s21-hand header span{font-weight:900}.s21-hand header strong{max-width:6rem;color:#126076;font-size:.65rem;text-align:right;text-transform:uppercase}.s21-cards{display:flex;min-height:8rem;padding:.4rem 0;align-items:flex-start;flex-wrap:wrap}.s21-cards .s21-card{margin-right:-1.9rem}.s21-cards .s21-card:last-child{margin-right:0}.s21-hand-status{display:flex;margin-top:auto;padding:.5rem 0;justify-content:space-between;gap:.25rem;flex-wrap:wrap;font-size:.78rem}.s21-soft{padding:.1rem .35rem;border:2px solid #fff;border-radius:.25rem;color:#fff;background:#775090;letter-spacing:.08em}.s21-hand form{margin-top:.3rem}.s21-hand button{width:100%}.s21-hand.is-active:hover{border-color:#087d99;box-shadow:inset 0 -25px 50px #28a9c128,0 8px 20px #07677f24}.s21-hand.is-complete{border-color:#3a9a72;background:repeating-linear-gradient(135deg,#e6f8ec,#e6f8ec 12px,#d7f1df 12px,#d7f1df 24px)}.s21-hand.is-bust{border:3px solid #b71932;background:repeating-linear-gradient(135deg,#ffe8eb,#ffe8eb 12px,#ffd6dc 12px,#ffd6dc 24px)}.s21-hand.is-bust header strong{color:#a5122b;font-size:1rem}.s21-hand button:disabled{border:1px solid #59727a;color:#345;background:#ffffffd9}.s21-star{position:absolute;right:.45rem;bottom:3.8rem;color:var(--s21-gold);font-size:2.2rem;filter:drop-shadow(0 2px #8c6711)}
.s21-actions{display:flex;justify-content:center;gap:1rem;margin:1rem 0}.s21-actions button{min-width:11rem;padding:.7rem 1rem}.s21-actions button:disabled{opacity:.5}.s21-actions .s21-take-score{border:3px solid #fff1a8;color:#3c2a00;background:#eab830;box-shadow:0 4px 0 #9d7412}.s21-expiry-form{display:none}
.s21-leaderboards{margin-top:1.5rem}.s21-board-tabs{display:flex;gap:.5rem;margin:.8rem 0}.s21-board-tabs button{padding:.55rem 1rem;border:1px solid #6db9c7;border-radius:2rem;background:#fff;font-weight:800}.s21-board-tabs button[aria-selected=true]{color:#fff;background:var(--s21-deep)}.s21-board ol{margin:0;padding:0;list-style:none}.s21-board li{display:grid;grid-template-columns:3rem minmax(6rem,1fr) auto 5rem;gap:.5rem;padding:.55rem;border-top:1px solid #b9dde3;align-items:center}.s21-board li>b{color:var(--s21-deep)}.s21-board li>strong{text-align:right;font-variant-numeric:tabular-nums}.s21-board li>small{text-align:right}.s21-board li.is-new-score{border:1px solid #d8ae2c;border-radius:.45rem;background:#fff3b5;box-shadow:0 0 0 3px #ffe17233}.s21-board li.is-new-score>b::after{content:' ★';color:#a87800}.s21-how-to{margin-top:1.25rem;border:1px solid #8fd5e1;border-radius:.8rem;background:#ffffffc7}.s21-how-to summary{display:flex;padding:1rem 1.2rem;justify-content:space-between;cursor:pointer;list-style:none}.s21-how-to summary span{display:flex;flex-direction:column}.s21-how-to summary small{font-weight:400}.s21-how-to>div{padding:0 1.2rem 1rem;max-width:70rem}.s21-shortcuts{padding:.6rem;border-radius:.4rem;background:#daf3f7}.is-submitting{cursor:wait}.s21-shell button:focus-visible,.s21-shell input:focus-visible,.s21-hand-rail:focus-visible,.s21-how-to summary:focus-visible{outline:4px solid #ffba2f;outline-offset:2px}
@media(max-width:1100px){.s21-header{grid-template-columns:1fr auto}.s21-header>div:first-child{grid-column:1/-1}.s21-sound{grid-column:2;justify-self:end}.s21-dashboard{grid-template-columns:repeat(3,1fr)}.s21-playfield{grid-template-columns:8rem minmax(0,1fr)}.s21-hand-rail{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-padding-inline:.6rem;scroll-snap-type:x mandatory;padding:0 .6rem .65rem}.s21-hand{min-width:10.2rem;scroll-snap-align:center}.s21-rail-hint{display:block;margin:0;text-align:right;color:#17687a;font-size:.75rem;font-weight:800}.s21-rail-hint span{font-size:1.1rem}}
@media(max-width:700px){.s21-shell{margin-top:-1rem}.s21-header{grid-template-columns:1fr auto;align-items:start}.s21-header>div:first-child{grid-column:1/-1}.s21-rules{max-width:none}.s21-start{grid-template-columns:1fr;gap:1rem}.s21-playfield{grid-template-columns:1fr}.s21-next{position:sticky;z-index:4;top:.5rem;display:grid;grid-template-columns:1fr auto 1fr;padding:.6rem;text-align:left}.s21-next .s21-card{grid-row:1/3;grid-column:2;margin:0}.s21-next p{text-align:right}.s21-hand{min-width:11rem}.s21-actions{position:sticky;z-index:4;bottom:.5rem;padding:.5rem;border-radius:.7rem;background:#dff9fce8;backdrop-filter:blur(5px)}.s21-actions form{flex:1}.s21-actions button{width:100%;min-width:0}.s21-board li{grid-template-columns:2.5rem minmax(5rem,1fr) auto}.s21-board li small{display:none}}
@media(max-width:420px){.s21-dashboard{grid-template-columns:repeat(2,1fr)}.s21-difficulties{flex-wrap:wrap}.s21-difficulties label{flex:1}.s21-difficulties span{text-align:center}.s21-name-form>div{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.s21-shell *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.s21-breakdown{max-width:42rem;margin:1.25rem auto;padding:1.25rem;border:1px solid var(--s21-border,#cbd5e1);border-radius:1rem;background:var(--s21-panel,#fff)}
.s21-breakdown h2{margin:.15rem 0 .75rem}.s21-breakdown dl{margin:0}.s21-breakdown dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding:.35rem 0;border-bottom:1px dotted currentColor}.s21-breakdown dt{overflow:hidden}.s21-breakdown dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.s21-breakdown-total{margin-top:.35rem;padding-top:.65rem!important;border-bottom:0!important;font-weight:800;font-size:1.1rem}
@media(max-width:480px){.s21-breakdown{padding:1rem;margin-inline:0}.s21-breakdown dl div{gap:.5rem}.s21-breakdown dd{white-space:nowrap}}