/* Alpine polish: local rounded fonts, consistent ink and ice accents. */
:root{font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',sans-serif;color:#193552}
button,input{font-family:inherit}h2,h3{letter-spacing:-.025em;text-wrap:balance}
.panel{background:linear-gradient(150deg,#fffffffa,#e9f6fffa);border:2px solid #fff;box-shadow:0 12px 38px #173b6126}
.panel p,.instructions span{line-height:1.5}
.panel:not(.hidden),.closet-panel:not(.hidden){animation:alpine-reveal .25s ease-out both}
.choice{transition:transform .16s,box-shadow .16s,background .16s}
.choice.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #239d91;background-color:#d7fff0}
.choice:active{transform:scale(.95)}
#timer,#resultTime{font-variant-numeric:tabular-nums;letter-spacing:-.035em}
#toast:not(:empty){color:#104b43;text-shadow:0 2px 0 white,0 -1px 0 white;animation:alpine-reveal .18s ease-out}
.progress i{background:linear-gradient(90deg,#328ed0,#43d3b1)}
@keyframes alpine-reveal{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panel,.closet-panel,#toast{animation:none!important}.choice{transition:none}}
#menu{--ink:#192e54;--wood:#956344;--menu-left:9%;--menu-width:clamp(240px,28vw,360px)}
#menu .menu-copy{display:contents}
#menu .menu-logo{position:absolute;left:calc(var(--menu-left) - 2%);top:9%;width:clamp(310px,38vw,490px);margin:0;line-height:1;pointer-events:none;filter:drop-shadow(0 7px 0 #153d6710);animation:menu-arrive .4s ease-out both}
#menu .menu-logo img{display:block;width:100%;height:auto;object-fit:contain;user-select:none}
#menu .rush-sign{position:absolute;left:calc(var(--menu-left) + 2%);top:46%;width:clamp(130px,16vw,205px);padding:9px 18px 12px;transform:rotate(-7deg);border:3px solid #68462f;border-radius:13px 8px 13px 8px;background:repeating-linear-gradient(0deg,transparent 0 28px,#68442d88 29px 31px,#c6926944 32px 34px),linear-gradient(110deg,#ac7955,#956243 65%,#b27c55);box-shadow:inset 0 3px 0 #d6a07b,0 5px 0 #63432f;color:#fff8e9;text-align:center;isolation:isolate}
#menu .rush-sign::before{content:'';position:absolute;width:17px;height:calc(100% + 32px);left:45%;top:-18px;background:linear-gradient(90deg,#80553a,#ac7955 55%,#80553a);border:2px solid #68462f;border-radius:4px;z-index:-2}
#menu .rush-sign::after,#menu .record::after{content:'';position:absolute;left:-5px;right:-4px;top:-7px;height:15px;border-radius:70% 65% 35% 25% / 90% 95% 40% 40%;background:#fff;box-shadow:0 4px 0 #d6eff7;pointer-events:none}
#menu .rush-sign span{display:block;font-size:clamp(23px,3vw,37px);font-weight:1000;line-height:.98;letter-spacing:.5px;text-shadow:0 2px 0 #754c34}
#menu #play{position:absolute;left:var(--menu-left);top:66%;width:var(--menu-width);height:clamp(65px,10vh,88px);margin:0;display:flex;align-items:center;justify-content:center;gap:22px;padding:8px 20px;border:5px solid var(--ink);border-radius:40px;background:linear-gradient(175deg,#ffe87f 0%,#ffd14e 35%,#ffc13f 100%);box-shadow:inset 0 4px 0 #fff5b6,inset 0 -7px 0 #e8a236,0 5px 0 #fff9,0 10px 20px #153d6718;transition:transform .12s,filter .12s,box-shadow .12s;transform-origin:center}
#menu #play svg{width:30px;height:34px;fill:var(--ink);stroke:var(--ink);stroke-linejoin:round;stroke-width:4;flex-shrink:0}
#menu #play span{font-family:'Arial Rounded MT Bold','Trebuchet MS',sans-serif;font-size:clamp(31px,4vw,46px);font-weight:1000;letter-spacing:1px;line-height:1;color:#fff;paint-order:stroke fill;-webkit-text-stroke:5px var(--ink);text-shadow:0 4px 0 var(--ink)}
#menu #play:hover{filter:brightness(1.06);transform:translateY(-2px)}
#menu #play:active{transform:translateY(5px) scale(.98);box-shadow:inset 0 3px 0 #ffeaaa,inset 0 -2px 0 #e8a236,0 2px 0 #fff9}
#menu .record{position:absolute;left:calc(var(--menu-left) + 1%);top:calc(66% + clamp(65px,10vh,88px) + 20px);width:calc(var(--menu-width) - 2%);min-height:64px;margin:0;padding:9px 13px;display:flex;justify-content:center;align-items:center;gap:17px;border:3px solid #68462f;border-radius:12px;background:repeating-linear-gradient(0deg,transparent 0 25px,#69483166 26px 28px),linear-gradient(100deg,#a97958,#8b6048);box-shadow:inset 0 3px 0 #bf906e,0 4px 0 #664831;color:white;line-height:1.15}
#menu .record .record-label{display:block;font-size:10px;font-weight:1000;letter-spacing:.6px;text-shadow:0 2px 0 var(--ink)}
#menu .record strong{display:block;margin-top:3px;font-size:29px;letter-spacing:.5px;line-height:1.1;font-variant-numeric:tabular-nums;paint-order:stroke fill;-webkit-text-stroke:4px var(--ink);text-shadow:0 2px 0 var(--ink)}
#menu .record-crown{width:36px;height:36px;fill:#ffdc55;stroke:#de9b25;stroke-width:2.5;stroke-linejoin:round;flex-shrink:0}
#app:has(#menu:not(.hidden)) #header .brand{visibility:hidden}
#header #sound{border:3px solid #fff;background:#edfaffdb;box-shadow:0 4px 0 #6aa7c15c;width:48px;height:48px;color:#192e54;transition:transform .12s}
#header #sound:active{transform:translateY(3px)}
#tabs{width:min(calc(100% - 24px),710px);bottom:max(14px,env(safe-area-inset-bottom));padding:6px;gap:3px;border:3px solid #fff;border-radius:27px;background:linear-gradient(#fff,#eef4ffed);box-shadow:0 7px 0 #6c9dc044,0 12px 28px #153d671c}
#tabs button,#tabs #accountOpen{min-height:60px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:7px 2px;border-radius:19px;font-size:11px;font-weight:900;line-height:1.1;color:#19365d;transition:background .15s,transform .12s}
#tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#tabs button[aria-current=page]{background:linear-gradient(145deg,#398fea,#1556bb);color:white;box-shadow:inset 0 2px 0 #7ac8ff,0 3px 0 #174988}
#tabs button:hover:not([aria-current=page]){background:#dceefb}
#tabs button:active{transform:translateY(2px)}
#inspectHint button{border:2px solid #fff;background:#f2fbffcc;box-shadow:0 3px 0 #7ba9bf55}
#app:has(#menu:not(.hidden)) #inspectHint{bottom:23%}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-9px) rotate(-2deg)}to{opacity:1;transform:none}}
@media(min-width:901px) and (min-height:760px){#menu .menu-logo{top:10%}#menu .rush-sign{top:45%}#menu #play{top:63%}#menu .record{top:calc(63% + 108px)}}
@media(max-width:600px){
 #menu{--menu-left:5%;--menu-width:55%}
 #menu .menu-logo{left:4%;top:max(52px,calc(env(safe-area-inset-top) + 35px));width:90%;max-width:440px}
 #menu .rush-sign{left:7%;top:43%;width:37%;padding:12px 10px 10px}
 #menu .rush-sign span{font-size:clamp(23px,7vw,32px)}
 #menu #play{top:62%;height:70px;border-width:4px;border-radius:35px;gap:15px;padding:6px 12px}
 #menu #play span{font-size:35px;-webkit-text-stroke-width:4px}
 #menu #play svg{width:23px;height:28px}
 #menu .record{top:calc(62% + 87px);width:calc(var(--menu-width) - 2%);min-height:58px;padding:8px;gap:9px;flex-wrap:nowrap}
 #menu .record .record-label{font-size:9px;letter-spacing:0}
 #menu .record strong{font-size:25px}
 #menu .record-crown{width:27px}
 #tabs{width:calc(100% - 16px);padding:5px;gap:1px;border-radius:23px}
 #tabs button,#tabs #accountOpen{font-size:clamp(8px,2.3vw,11px);min-height:56px;gap:5px;padding:6px 0;border-radius:16px}
 #tabs svg{width:22px;height:22px}
 #app:has(#menu:not(.hidden)) #inspectHint{left:62%;right:2%;bottom:23%}
}
@media(max-height:700px) and (max-width:600px){
 #menu .menu-logo{top:6%;width:78%;left:6%;max-height:29%}#menu .menu-logo img{max-height:200px}
 #menu .rush-sign{top:40%;padding:8px}#menu .rush-sign span{font-size:23px}
 #menu #play{top:58%;height:60px}#menu .record{top:calc(58% + 74px);min-height:51px}#menu .record strong{font-size:23px}
 #tabs button,#tabs #accountOpen{min-height:51px}#tabs{bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-height:560px) and (min-width:601px){
 #menu{--menu-left:7%;--menu-width:240px}#menu .menu-logo{top:4%;width:260px;left:5%}
 #menu .rush-sign{top:44%;left:calc(var(--menu-left) + 270px);width:115px;padding:8px}#menu .rush-sign span{font-size:24px}
 #menu #play{top:48%;height:60px}#menu .record{top:calc(48% + 75px);min-height:52px;padding:6px 10px}#menu .record strong{font-size:24px}
 #tabs{width:min(96%,660px);bottom:8px;padding:4px}#tabs button,#tabs #accountOpen{min-height:44px;flex-direction:row;gap:4px;font-size:10px}#tabs svg{width:18px;height:18px}
 #app:has(#menu:not(.hidden)) #inspectHint{bottom:19%;left:72%}
}
@media(prefers-reduced-motion:reduce){#menu .menu-logo{animation:none}#menu #play,#tabs button{transition:none}}