:root{color-scheme:dark;--night:#101c25;--gold:#e2c385;--cream:#f3ead8;--muted:#a7b9ba;--line:#d7c49629;--serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--night)}body{margin:0;color:var(--cream);font:15px/1.6 var(--sans);background:radial-gradient(ellipse at 5% 0%,#59645924,transparent 42%),radial-gradient(ellipse at 92% 30%,#885e3621,transparent 50%),linear-gradient(160deg,#14242c,#101a23 68%,#18202a);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid #f3d897;outline-offset:5px}button[hidden],[hidden]{display:none!important}a{color:inherit}button{color:inherit}.shop-light{position:fixed;pointer-events:none;inset:0;opacity:.22;background:linear-gradient(90deg,transparent 14%,#b7d4d10a 14.1%,transparent 14.3%,transparent 27%,#b7d4d10a 27.1%,transparent 27.3%),linear-gradient(0deg,transparent 32%,#b7d4d10a 32.1%,transparent 32.3%);z-index:-1}.shell{width:min(100% - 48px,880px);margin:auto;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.moon{font:44px/1 Georgia,serif;color:var(--gold);transform:rotate(-18deg)}.brand>span:last-child{display:flex;flex-direction:column;gap:3px}.brand small{font:9px/1.5 Arial,sans-serif;letter-spacing:2px;color:var(--gold)}.brand>span>span{font:18px/1.5 var(--serif);letter-spacing:2px}.tools{display:flex;gap:8px}.icon-button{width:42px;height:42px;background:transparent;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Georgia,serif;font-size:20px;padding:10px}.icon-button svg{width:19px;height:19px}.intro{text-align:center;padding:30px 0 24px}.overline{margin:0;font:10px/1.7 Arial,sans-serif;letter-spacing:2.7px;color:var(--gold)}.overline span{margin:0 9px;color:#748184}h1{font:400 clamp(32px,5.5vw,45px)/1.5 var(--serif);letter-spacing:.2em;margin:9px 0 4px;padding-left:.2em}.subtitle{color:#becac7;font:13px/1.6 var(--serif);letter-spacing:.15em;margin:0}.game-layout{display:grid;grid-template-columns:minmax(0,430px) minmax(0,310px);gap:54px;align-items:center;justify-content:center}.play-area{min-width:0}.hud{display:flex;justify-content:space-between;align-items:center;padding:0 15px 4px}.rounds{display:flex;align-items:center;gap:6px}.rounds i{font:12px/25px Georgia,serif;width:25px;height:25px;display:block;border:1px solid #74848855;border-radius:50%;text-align:center;font-style:normal;color:#849498}.rounds i.current{color:#19252b;background:var(--gold);border-color:var(--gold);box-shadow:0 0 15px #c5a26017}.rounds i.done{color:var(--gold);border-color:#c4ac7277}.rounds>span{height:1px;width:12px;background:#82939540}.score-label{font:10px/1.5 Arial,sans-serif;letter-spacing:1.4px;color:var(--muted);margin:0}.score-label strong{font:24px/1.5 Georgia,serif;letter-spacing:0;color:var(--cream);margin-left:7px;font-variant-numeric:tabular-nums}.dial-wrap{position:relative;isolation:isolate}.dial-wrap:before{content:"";position:absolute;inset:10%;border-radius:50%;background:#689aa50b;box-shadow:0 10px 55px #0004;z-index:-1}#dial{display:block;width:100%;height:auto;overflow:visible;user-select:none}#needle{filter:drop-shadow(0 2px 3px #0008)}#garment{transform-box:fill-box;transform-origin:50% 100%;transform:translateY(0);transition:transform 1s cubic-bezier(.2,.6,.2,1)}#stains{transition:opacity .5s}#drops{opacity:0}#sparkles{opacity:0;transform-origin:200px 200px}.lifted #garment{transform:translateY(-39px) rotate(-3deg)}.lifted #drops{animation:drops .8s .15s 2}.good #stains,.perfect #stains,.late #stains{opacity:0}.perfect #sparkles,.good #sparkles{animation:sparkle 1.2s ease-out both}.perfect #zone{stroke:#fff1b8}.playing .ripple{animation:ripple 2.8s linear infinite;transform-origin:200px 241px}.dial-footer{display:flex;justify-content:space-between;align-items:center;padding:0 17px;min-height:32px;color:#a1b7b8;font-size:11px;letter-spacing:.03em}.quiet-button{background:none;border:0;padding:7px 0;min-height:38px;font-size:12px;color:var(--muted)}.quiet-button:disabled{opacity:.35}.status{min-height:102px}.status-en{font:10px/1.6 Arial,sans-serif;letter-spacing:2.3px;color:var(--gold)}.status h2{font:400 25px/1.5 var(--serif);letter-spacing:.03em;margin:10px 0 8px}.status p{color:var(--muted);font-size:13px;margin:0;line-height:1.9}.action-button{display:flex;justify-content:center;align-items:center;gap:15px;width:100%;min-height:58px;margin-top:22px;padding:14px 16px;border:1px solid #e7ce9f;background:linear-gradient(110deg,#f1ddac,#d3b075);border-radius:5px;color:#192a31;font-size:16px;font-weight:600;letter-spacing:.07em;box-shadow:0 5px 18px #0003;position:relative}.action-button:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 7px #0003}.action-button:disabled{opacity:.6}.action-button #action-icon{position:absolute;right:18px;font-size:20px;font-weight:400}.action-note{min-height:20px;color:#acb9b7;font-size:11px;text-align:center;line-height:1.7;margin:10px 0 18px}.instructions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:17px;text-align:center}.instructions>div{flex:1}.instructions span{font:10px/1.5 Georgia,serif;letter-spacing:1.5px;color:var(--gold)}.instructions p{font-size:12px;margin:5px 0 0;color:#bccac6}.instructions i{font-style:normal;color:#84918c;font-size:12px}.best-mini{font:10px/1.5 Arial,sans-serif;color:#a7b7b6;letter-spacing:1.2px;text-align:center;margin:20px 0 0}.best-mini span{color:var(--gold);font-family:Georgia,serif;font-size:17px;margin-left:6px}.best-mini small{color:#728686;font-size:10px}.round-result{margin-top:9px;text-align:left;color:#adc2bf}.round-result strong{font:46px/1.2 Georgia,serif;color:var(--gold);font-variant-numeric:tabular-nums}.round-result>span{font:12px/1.5 Arial,sans-serif;letter-spacing:.05em}.game-note{font-size:10px;color:#8ea2a4;text-align:center;line-height:1.9;margin:30px 0 24px}footer{padding:16px 0 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#9cafae}footer a{text-decoration:none;padding:5px 0}.pause-layer{position:absolute;inset:16%;background:#10252dec;border:1px solid #c9b9853b;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(7px);z-index:2}.pause-symbol{color:var(--gold);font-size:28px}.pause-layer p{font-family:var(--serif);font-size:21px;margin:2px 0 8px}.pause-layer small{font-size:10px;color:var(--muted)}.small-button{border:1px solid var(--gold);background:#dbc087;color:#182b35;border-radius:4px;min-width:120px;min-height:42px;margin-top:16px;font-size:14px}.summary ol{list-style:none;padding:0;margin:17px 0 0;border-top:1px solid var(--line)}.summary li{display:flex;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px;color:#bac9c7}.summary li>span:first-child{color:var(--gold);font:11px Georgia,serif}.summary li>strong{margin-left:auto;font:16px Georgia,serif;color:var(--cream)}.summary .result-grade{font-size:10px;color:var(--gold);padding-left:6px}.personal-best{display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:11px;color:var(--muted);margin:15px 0 0}.personal-best strong{font:23px Georgia,serif;color:var(--gold)}.finished .status h2{font-size:28px}.finished #dial{opacity:.75}.finished .dial-wrap{transition:opacity .4s}.finished .hud .rounds i{background:transparent}.record .personal-best:before{content:"NEW";font:9px Arial,sans-serif;letter-spacing:1px;color:#152a31;background:var(--gold);padding:3px 5px}.result .status h2{color:#f2d69b}.early .status h2,.late .status h2{color:var(--cream)}dialog{width:min(calc(100% - 32px),430px);max-height:calc(100svh - 40px);padding:0;background:#152831;color:var(--cream);border:1px solid #d5bd7e66;border-radius:12px;box-shadow:0 20px 70px #0006}dialog::backdrop{background:#061015cc;backdrop-filter:blur(5px)}.help-content{padding:28px}.help-content h2{font:400 24px/1.6 var(--serif);margin:13px 0 16px}.help-content>p,.help-content li{font-size:13px;line-height:1.9;color:#c0cfcd}.help-content ul{padding-left:18px;margin:20px 0}.help-content li{padding-bottom:7px}.help-content .help-note{font-size:11px;color:#99b0b1;border-top:1px solid var(--line);padding-top:15px}.help-content .action-button{margin-top:18px}.pulse #status-title{animation:appear .3s ease-out}
@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes drops{0%{opacity:0;transform:translateY(-8px)}20%{opacity:.9}100%{opacity:0;transform:translateY(26px)}}@keyframes sparkle{0%{opacity:0;transform:scale(.8)}30%{opacity:1}100%{opacity:0;transform:scale(1.17)}}@keyframes ripple{0%{opacity:0;transform:scale(.75)}40%{opacity:.7}100%{opacity:0;transform:scale(1.5)}}
@media(max-width:720px){.shell{width:min(100% - 36px,440px);padding-top:max(13px,env(safe-area-inset-top))}.header{padding-bottom:12px}.brand{gap:8px}.brand small{font-size:8px;letter-spacing:1.5px}.brand>span>span{font-size:16px;letter-spacing:1.5px}.moon{font-size:37px}.tools{gap:6px}.icon-button{width:38px;height:38px;padding:9px}.intro{padding:17px 0 13px}.overline{font-size:9px;letter-spacing:2px}h1{font-size:34px;margin:5px 0 2px}.subtitle{font-size:12px}.game-layout{display:flex;flex-direction:column;gap:12px}.play-area,.control-area{width:100%}.play-area{max-width:350px}.hud{padding:0 13px}.score-label strong{font-size:20px}.rounds i{width:22px;height:22px;line-height:22px}.rounds{gap:4px}.rounds>span{width:11px}.dial-wrap{max-width:min(100%,38svh);margin:auto}.dial-footer{padding:0 17px;margin-top:-5px;min-height:24px}.quiet-button{min-height:32px;padding:3px 0}.control-area{text-align:center}.status{min-height:76px}.status h2{font-size:23px;margin:4px 0}.status-en{font-size:9px}.status p{font-size:12px}.action-button{min-height:54px;margin-top:11px}.action-note{font-size:10px;margin:8px 0 13px}.instructions{padding-top:12px}.instructions p{font-size:11px}.best-mini{margin:12px 0 0}.game-note{font-size:9px;margin:19px 0 17px}footer{font-size:10px;padding:12px 0 16px}.round-result{margin:4px 0 0;text-align:center}.round-result strong{font-size:36px}.result .status{min-height:73px}.finished .status h2{font-size:24px}.finished .dial-wrap{max-width:235px}.finished .intro{padding-bottom:10px}.summary ol{margin-top:12px}.summary li{padding:9px 0}.summary .personal-best{margin-top:12px}}
@media(max-width:359px){.shell{width:calc(100% - 26px)}.brand>span>span{font-size:14px}.brand small{font-size:7px}.moon{font-size:30px}.icon-button{width:35px;height:35px}h1{font-size:30px}.intro{padding:13px 0 10px}.status h2{font-size:21px}.status p{font-size:11px}.pause-layer small{font-size:9px}.pause-layer .small-button{min-width:100px;min-height:37px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.lifted #drops{display:none}}

.time-row{display:flex;justify-content:space-between;gap:10px;padding:8px 15px 5px;font-size:10px;color:var(--muted)}.time-row>span:first-child{color:var(--gold);letter-spacing:.06em}.time-row strong{font:16px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:var(--cream);display:inline-block;min-width:24px;text-align:right}.time-track{height:2px;background:#3b505b;margin:0 15px 4px;overflow:hidden}.time-track i{display:block;height:100%;background:var(--gold);transform-origin:left}.urgent .time-row strong{color:#ffbe9d}.urgent .time-track i{background:#ecb092}#ticks,#early-arc,#late-arc,#zone-glow,#zone,#perfect-zone,#target-marker{transition:opacity .22s ease}.memory-hidden #ticks,.memory-hidden #early-arc,.memory-hidden #late-arc,.memory-hidden #zone-glow,.memory-hidden #zone,.memory-hidden #perfect-zone,.memory-hidden #target-marker{opacity:0}.customer-active #dial{visibility:hidden}.customer-layer{position:absolute;inset:5%;background:radial-gradient(ellipse at top,#35484a,#142832 72%);border:1px solid #d4bc7c61;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 35px #0004;z-index:2}.door-icon{width:47px;height:54px;color:var(--gold);margin-bottom:10px}.customer-layer>p{font:400 23px/1.5 var(--serif);margin:7px 0}.customer-layer>small{font-size:10px;color:var(--muted);max-width:80%}.customer-layer .small-button{min-width:135px;margin-top:14px}.service-track{width:120px;background:#70878344;height:3px;margin-top:22px;overflow:hidden}.service-track i{height:100%;display:block;background:var(--gold);transform-origin:left;transform:scaleX(0)}.pause-layer{z-index:4}.timeout .status h2{color:#ebbe99}.time-row+#time-track{margin-bottom:0}
@media(max-width:720px){.time-row{padding-top:5px;font-size:9px}.time-row strong{font-size:14px}.dial-wrap{max-width:min(100%,36svh)}.door-icon{width:36px;height:42px;margin-bottom:7px}.customer-layer>p{font-size:21px}.customer-layer .small-button{margin-top:10px;min-height:38px}.customer-layer>small{font-size:9px}.customer-layer .status-en{font-size:9px}.instructions span{font-size:9px;letter-spacing:.8px}.finished .time-row,.finished .time-track{display:none}}
@media(max-height:680px) and (max-width:720px){.dial-wrap{max-width:255px}.customer-layer{inset:2%}.door-icon{width:26px;height:30px;margin-bottom:3px}.customer-layer>p{font-size:19px;margin:3px 0}.customer-layer .small-button{min-height:35px;margin-top:8px}}
