:root{--paper:#142d23;--ink:#f0e3c5;--muted:#b6b99d;--line:#49614a;--accent:#e1b56c;--gold:#e1b56c;--red:#ed967e;--green:#a1ce9c;color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--ink);background:#251b14}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 0,#c7863724,transparent 65%),repeating-linear-gradient(90deg,#251b14 0,#32241a 3px,#2a1e17 7px,#332419 48px,#20170f 51px);background-attachment:fixed}button,select,input{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45}.hidden{display:none!important}
#app{max-width:720px;min-height:100svh;margin:auto;padding:env(safe-area-inset-top) 28px 0;background:radial-gradient(ellipse at 50% -100px,#ca963b12,transparent 600px),linear-gradient(90deg,#10251d,#173327 20%,#173327 80%,#10251d);box-shadow:inset 3px 0 #75542c,inset -3px 0 #75542c,0 0 55px #0007}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px double #9b7c46;gap:12px}.brand{display:flex;flex-direction:column;gap:5px;font:29px/1 Georgia,"Times New Roman",serif;color:#e6c48a;text-decoration:none;letter-spacing:1.2px;text-shadow:0 2px #0008}.brand span{font:8px/1.2 Georgia,serif;letter-spacing:3px;color:#cbb382}.plain-button{background:#10261c;border:1px solid #71805c;padding:10px 12px;min-height:44px;font-size:11px;border-radius:3px;box-shadow:inset 0 1px #f8d4990a}.plain-button span{font-variant-numeric:tabular-nums;margin-left:5px}.plain-button:active{background:#2c4734}
.list-heading{display:flex;justify-content:space-between;align-items:center;margin:23px 0 13px}.list-heading h1{font-size:15px;letter-spacing:2px;font-weight:500;margin:0}.list-heading>span{font:11px Georgia,serif;color:var(--muted)}.seg{display:flex;border-bottom:1px solid var(--line)}.seg button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:13px 4px;font-size:12px;color:var(--muted);margin-bottom:-1px;min-height:46px}.seg button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.song-mode{margin:0 0 16px}
.tunes{border-top:1px solid var(--line);max-height:min(48svh,420px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#8e794d #142d23}.tune{border:0;border-bottom:1px solid #3b5742;background:none;text-align:left;width:100%;display:flex;align-items:center;padding:14px 10px;min-height:65px;gap:13px;position:relative}.tune.selected{background:#2d4431}.tune.selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}.tune-number{font:11px Georgia,serif;color:#c1a978;width:17px;flex-shrink:0}.tune-name{flex:1;min-width:0}.tune-name strong{font:20px/1.3 Georgia,"Times New Roman",serif;display:block;font-weight:400;color:#f0e3c5}.tune-name small{font-size:10px;color:#b6b99d;display:block;margin-top:4px}.tune-meter{text-align:right;flex-shrink:0;color:#c5b385;font-size:10px;line-height:1.65}.tune-meter span{display:block}
.controls{padding:18px 0 7px}.guide-control{margin-bottom:17px}.check-label{display:flex;align-items:center;gap:10px;font-size:13px;min-height:44px}.check-label input{width:19px;height:19px;accent-color:var(--accent)}.control-info{font-size:11px;color:var(--muted);line-height:1.75;margin:8px 0 0}.tempo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0}.tempo-row label{font-size:12px;color:var(--muted)}select{border:1px solid #6d7b58;border-radius:3px;color:var(--ink);background:#10251c;padding:11px 28px 11px 11px;font-size:12px;min-height:44px}.chart-info{font-size:11px;color:var(--muted);line-height:1.6;margin:10px 0 12px;min-height:18px}
.primary{display:block;width:100%;background:linear-gradient(#e4c48b,#b89557);color:#1e2e20;font-size:14px;font-weight:700;padding:16px;border:1px solid #f1d5a0;border-radius:3px;min-height:52px;box-shadow:inset 0 1px #fff3,0 2px #08190f}.primary:active{background:#b99c64}.start-row{padding:0 0 13px}.start-row>p{text-align:center;color:var(--muted);font-size:11px;line-height:1.8;margin:10px 0 0}.text-btn{display:block;width:100%;padding:16px 10px;min-height:44px;background:none;border:0;color:var(--muted);font-size:12px}
.how{border-top:1px solid var(--line);font-size:12px}.how summary{padding:17px 0;cursor:pointer;color:#cfcaad;min-height:48px}.how-content{padding-bottom:17px}.how p{line-height:1.9;color:var(--muted);margin:5px 0 15px}.how label{display:flex;justify-content:space-between;padding-top:10px}.how input{width:100%;accent-color:var(--accent);margin:14px 0 4px;min-height:30px}.tiny{font-size:10px}.how a{color:var(--accent);text-underline-offset:3px}.source-line{font-size:10px;line-height:1.8;padding-bottom:10px;color:var(--muted)}.practice-button{padding:9px 0 5px;background:none;border:0;color:var(--accent);font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px;margin-bottom:12px}footer{border-top:1px solid #6b653e;padding:20px 0 max(25px,env(safe-area-inset-bottom));font-size:10px;color:var(--muted);line-height:1.7}
.set-editor{border-bottom:1px solid var(--line);padding:0 0 17px}.set-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px 16px;margin:5px 0 12px}.set-toolbar>label{white-space:nowrap;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.queue-actions{display:flex;gap:7px;flex:1 0 100%;justify-content:flex-end;min-width:206px}.queue-actions .plain-button{flex:1;padding-left:8px;padding-right:8px;white-space:nowrap}.set-choice{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 66px;gap:5px;align-items:center;margin:0;padding:8px 0;border-bottom:1px solid var(--line);background:#173327}.set-choice select{width:100%;min-width:0;padding-left:7px;padding-right:18px;font-size:11px;height:44px}.drag-handle{touch-action:none;user-select:none;-webkit-user-select:none;background:none;border:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:3px;color:#cbb382;cursor:grab}.drag-handle>span{font-size:24px}.drag-handle small{font:10px Georgia}.queue-arrows{display:flex}.queue-arrows button{width:33px;height:44px;background:none;border:0;color:#d4bd8c;font-size:16px}.queue-arrows button:disabled{opacity:.25}.set-choice.dragging{z-index:4;box-shadow:0 5px 13px #0008;outline:1px solid var(--accent);pointer-events:none;opacity:.97}.set-choice.drop-target{box-shadow:inset 0 -2px var(--accent)}.set-editor #setTypeNotice{margin:8px 0;color:var(--accent)}
.playing{overflow:hidden;overscroll-behavior:none}.playing .topbar{height:60px}.playing .brand{font-size:24px;gap:3px}.playing .brand span{font-size:7px}.play{height:calc(100svh - 60px - env(safe-area-inset-top));min-height:400px;display:flex;flex-direction:column;padding:15px 0 max(10px,env(safe-area-inset-bottom));touch-action:none;user-select:none;-webkit-user-select:none}.play-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.play-top>div{min-width:0}.play h2{font:22px/1.2 Georgia,serif;margin:6px 0 0;color:#f0e3c5}.small-label{font-size:10px;color:#bfc19f;letter-spacing:.5px}.pause-button{white-space:nowrap;font-size:10px;padding:10px;min-width:65px;min-height:44px}.stats{display:flex;justify-content:space-between;text-align:center;padding:16px 0 12px}.stats>div{min-width:62px}.stats>div:first-child{text-align:left}.stats>div:last-child{text-align:right}.stats span{display:block;font-size:9px;color:var(--muted);margin-bottom:4px}.stats b{font-size:23px;font-weight:500;font-variant-numeric:tabular-nums;color:#ebd5a5}.progress{height:3px;background:#3a4d37}.progress i{display:block;width:0;height:100%;background:#cbaa65}
.stage{--hit-line-y:93%;position:relative;flex:1;min-height:150px;overflow:hidden;border-left:1px solid #697349;border-right:1px solid #697349;background:#10271e;box-shadow:inset 0 14px 22px #05160c55,inset 0 -8px 15px #050f0844}.stage:before{display:none}canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.lane-caption{position:absolute;top:11px;left:0;right:0;display:flex;z-index:2;pointer-events:none}.lane-caption span{flex:1;font:9px Georgia,serif;text-align:center;color:#a6b68e}.hit-line{position:absolute;top:var(--hit-line-y);height:2px;left:0;right:0;background:#e1b56c;box-shadow:0 2px 6px #d39a333d;pointer-events:none}.hit-line:before,.hit-line:after{display:none}.beatlights{position:absolute;right:9px;bottom:6px;display:flex;justify-content:center;gap:7px}.beatlights i{width:4px;height:4px;border-radius:50%;background:#586a45}.beatlights i.on{background:#e1b56c;box-shadow:0 0 4px #d2a25355}.count-in{position:absolute;top:29%;left:0;right:0;text-align:center;font:48px Georgia;color:#f1d39c;z-index:3;pointer-events:none;text-shadow:0 2px 5px #000}.count-in small{display:block;font:11px sans-serif;margin-top:10px;color:#d4d3b5}.feedback{position:absolute;top:8%;left:0;right:0;text-align:center;font:14px Georgia;color:var(--accent);letter-spacing:1.5px;pointer-events:none;z-index:3;opacity:0;text-shadow:0 1px 4px #000}.feedback small{display:block;font:10px sans-serif;margin-top:6px;letter-spacing:0}.play-hint{text-align:center;font-size:10px;color:#c3c6a9;line-height:1.5;margin:9px 0 0;min-height:28px}
/* The six thumb targets are one brass whistle, mounted just under the stave. */
.hole-pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 10px repeat(3,minmax(0,1fr));gap:3px;padding:0 4px;margin-top:8px;border:1px solid #b59a61;border-radius:16px;background:linear-gradient(180deg,#685335 0%,#b79a5e 10%,#ead393 24%,#b49d65 49%,#7c6c43 77%,#baa06a 94%,#625131 100%);box-shadow:inset 0 1px #ffedb780,inset 0 -2px 4px #17170b88,0 3px 5px #0007;position:relative;touch-action:none}.hole-pad{height:86px;min-width:0;padding:7px 0;background:transparent;border:0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;touch-action:none;-webkit-user-select:none;user-select:none;color:#17271c}.hole-pad:nth-child(4){grid-column:5}.hole-pad:nth-child(5){grid-column:6}.hole-pad:nth-child(6){grid-column:7}.hole-pad>span{font-size:10px;color:#26331c;text-shadow:0 1px #ffe2a34d}.hole-pad i{width:27px;height:27px;border:2px solid #756840;background:radial-gradient(circle at 50% 65%,#1e2c1c,#07110b 65%,#5f6240 78%);border-radius:50%;display:block;box-shadow:0 1px 1px #eadca280,inset 0 2px 3px #0009;outline:1px solid #ead8a066}.hole-pad.held{background:#ffe1a633;box-shadow:inset 0 0 13px #fff2b744}.hole-pad.held i{background:radial-gradient(circle,#cdb174 0%,#7b6b3a 60%,#e2c686 73%);border-color:#f5d79d;box-shadow:0 0 0 2px #30291b80,inset 0 2px 3px #0006}.hole-pad:focus-visible{outline-color:#fff0c5;outline-offset:0}
.modal{position:fixed;inset:0;background:#06130dc9;z-index:20;display:flex;align-items:center;justify-content:center;padding:25px}.modal-card{max-width:380px;width:100%;background:#163224;border:1px solid #b6995e;box-shadow:inset 0 0 0 5px #1d3b2b,0 12px 40px #0008;padding:30px;text-align:left}.modal h2{font-size:21px;font-weight:500;margin:0 0 15px;color:#f0e3c5}.modal p{font-size:12px;color:var(--muted);margin-bottom:25px}.toast{position:fixed;bottom:25px;left:20px;right:20px;max-width:500px;margin:auto;padding:16px;background:#e0c38a;color:#193023;border:1px solid #f1d5a0;font-size:12px;z-index:40;text-align:center;box-shadow:0 4px 18px #0007}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.result{max-width:500px;margin:auto}.result>p{font-size:12px;line-height:1.8;color:var(--muted)}.result-grid{display:grid}.result-grid span{color:var(--muted)}.result-grid b{color:var(--ink)}.judgments{color:var(--muted)}.judgments b{display:block;color:var(--ink)}.best{color:var(--ink)!important}.tune-results{border-top:1px solid var(--line)}.tune-result{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px}.tune-result strong{font:15px Georgia;font-weight:400}.tune-result span{color:var(--muted)}
@media(min-width:700px){.home{padding-top:4px}.play{max-width:540px;margin:auto}.tune{padding:15px 13px}.tune-name strong{font-size:22px}.tune-meter{display:flex;gap:12px;align-items:center}.controls{display:grid;grid-template-columns:2fr 1fr;gap:0 24px}.guide-control{grid-column:1/3}.tempo-row{align-self:center}.chart-info{grid-column:1/3}.play .stage{max-height:650px}}
@media(max-width:480px){#app{padding-left:16px;padding-right:16px}.topbar{height:72px}.brand{font-size:28px}.tune{padding:12px 8px;gap:10px;min-height:63px}.tune-name strong{font-size:18px}.tune-name small{font-size:9px}.tune-meter{font-size:9px}.tune-number{font-size:10px;width:14px}.play{padding-top:13px}.play h2{font-size:20px}.play .small-label{font-size:9px}.stats{padding:13px 0 10px}.stats b{font-size:22px}}
@media(max-width:340px){#app{padding-left:12px;padding-right:12px}.hole-pads{padding-left:2px;padding-right:2px;gap:2px;grid-template-columns:repeat(3,minmax(0,1fr)) 6px repeat(3,minmax(0,1fr))}.hole-pad i{width:23px;height:23px}.set-choice{grid-template-columns:38px minmax(0,1fr) 62px;gap:3px}.queue-arrows button{width:31px}.set-choice select{font-size:10px}.queue-actions .plain-button{font-size:10px}.play-hint{font-size:9px}}
@media(max-height:650px){.playing .topbar{height:50px}.play{height:calc(100svh - 50px - env(safe-area-inset-top));min-height:350px;padding-top:8px}.playing .brand{font-size:22px}.stats{padding:8px 0}.play h2{font-size:18px}.stats b{font-size:19px}.stage{min-height:130px}.hole-pad{height:66px}.hole-pad i{width:23px;height:23px}.hole-pads{margin-top:7px}.play-hint{margin-top:6px;min-height:26px}.pause-button{min-height:38px}}
@media(max-height:500px){.playing .topbar{height:43px}.play{height:calc(100svh - 43px - env(safe-area-inset-top));min-height:0;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.playing .brand{font-size:20px}.playing .brand span{font-size:6px}.play h2{font-size:16px;margin-top:4px}.play .small-label{font-size:8px}.stats{padding:5px 0}.stats span{font-size:8px;margin-bottom:2px}.stats b{font-size:16px}.stage{min-height:80px}.hole-pad{height:50px}.hole-pads{margin-top:6px}.hole-pad i{width:18px;height:18px}.hole-pad>span{font-size:8px}.play-hint{display:none}.play-hint.has-next{display:block;min-height:18px;font-size:8px;margin-top:4px}.pause-button{min-height:32px;padding:7px}.count-in{font-size:30px}.count-in small{font-size:9px}.feedback{font-size:11px}}
/* Result sheet: stamped rank, a brass score plate, and a single earned flourish. */
.result{max-width:500px;padding:24px 0 30px}.result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px}.result-heading p{margin:0;font-size:9px;letter-spacing:1.7px}.record-flag{font:700 10px Georgia,serif;letter-spacing:1px;color:var(--accent);border-bottom:2px solid currentColor;padding-bottom:3px;white-space:nowrap}.result h1{font-size:21px;margin:13px 0 8px;font-weight:500}.result h1:focus{outline:none}.result .result-song{font:17px/1.45 Georgia,serif!important;color:var(--ink)!important;margin:0 0 20px;overflow-wrap:anywhere}.result-plate{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:23px;padding:20px 0;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);position:relative}.rank-seal{width:104px;height:104px;border:2px solid var(--ink);outline:1px solid var(--line);outline-offset:4px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:var(--ink);transform:rotate(-5deg)}.rank-seal small{font:8px Georgia,serif;letter-spacing:3px;margin-top:7px;padding-left:3px}.rank-seal b{font:75px/.95 Georgia,serif;font-weight:400}.seal-rule{width:29px;border-top:1px solid currentColor;margin:1px 0 10px}.result[data-rank="S"] .rank-seal{color:var(--accent);border-color:var(--accent);outline-color:#b9a382;background:#cbbd8f14}.score-block{min-width:0}.score-label{font-size:9px;letter-spacing:2px;color:var(--muted)}.result .big-score{border:0;padding:6px 0 5px;display:flex;align-items:baseline;gap:5px;white-space:nowrap}.result .big-score>span{font-family:Georgia,serif;font-size:clamp(31px,10vw,49px);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-1.3px}.result .big-score>small{font-size:9px;margin-left:0}.score-max{font-size:9px;letter-spacing:.6px;color:var(--muted);font-variant-numeric:tabular-nums}.achievement{position:relative;min-height:46px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);font:12px Georgia,serif;letter-spacing:3px;color:var(--muted);overflow:hidden}.result[data-achievement="combo"] .achievement,.result[data-achievement="perfect"] .achievement{color:var(--accent);font-size:18px;font-weight:700;letter-spacing:2px}.result[data-achievement="perfect"] .achievement{background:#cbbd8f1a}.result .result-grid{padding:17px 0 16px;border-bottom:0;grid-template-columns:1fr 1fr;gap:12px}.result-grid>div+div{border-left:1px solid var(--line);padding-left:20px}.result .result-grid span{font-size:10px}.result .result-grid b{font:28px/1.15 Georgia,serif;font-variant-numeric:tabular-nums;margin-top:6px;display:inline-block}.result .result-grid>div>span{display:block}.result-grid small{font-size:9px;color:var(--muted);white-space:nowrap}.judgment-track{display:flex;width:100%;height:5px;overflow:hidden;background:var(--line)}.judgment-track i{display:block;min-width:0}#perfectBar,.perfect-dot{background:var(--accent)}#goodBar,.good-dot{background:#60725d}#missBar,.miss-dot{background:#b9bdb2}.result .judgments{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 0 14px;border-bottom:1px solid var(--line);gap:8px}.judgments>div{min-width:0}.judgments>div+div{padding-left:12px;border-left:1px solid var(--line)}.judgments>div>span{font-size:8px;letter-spacing:.5px;display:flex;align-items:center;gap:4px}.judgment-dot{display:inline-block;width:5px;height:5px;border-radius:50%;flex-shrink:0}.result .judgments b{font:25px/1.1 Georgia,serif;font-variant-numeric:tabular-nums;margin:8px 0 3px}.judgments small{font-size:8px;color:var(--muted)}.result .result-note{font-size:11px!important;line-height:1.7!important;min-height:0;margin:12px 0 5px}.result .best{font-size:10px!important;line-height:1.6!important;margin:7px 0 17px;padding-left:9px;border-left:2px solid var(--line)}.result-actions{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:9px}.result-actions .primary,.result-actions .text-btn{padding:14px 8px;min-height:50px;font-size:12px}.result-actions .text-btn{border:1px solid var(--line);border-radius:2px;color:var(--ink)}.result .tune-results{margin-top:8px}.result .tune-result{align-items:center;gap:14px}.result .tune-result strong{font-size:14px;line-height:1.4}.result .tune-result span{font-size:9px;white-space:normal;text-align:right;flex-shrink:0;max-width:42%}.result-sparks{display:none;position:absolute;inset:0;pointer-events:none}.result-sparks i{position:absolute;left:50%;top:50%;width:3px;height:6px;background:#a0804a;opacity:0;--x:0px;--y:0px;--r:0deg}.result-sparks i:nth-child(1){--x:-124px;--y:-19px;--r:-40deg}.result-sparks i:nth-child(2){--x:-100px;--y:16px;--r:30deg}.result-sparks i:nth-child(3){--x:-73px;--y:-20px;--r:-15deg}.result-sparks i:nth-child(4){--x:73px;--y:20px;--r:40deg}.result-sparks i:nth-child(5){--x:100px;--y:-18px;--r:20deg}.result-sparks i:nth-child(6){--x:124px;--y:13px;--r:-30deg}.result-enter .rank-seal{animation:rank-stamp .43s cubic-bezier(.17,.8,.25,1) both}.result-enter[data-achievement="combo"] .result-sparks,.result-enter[data-achievement="perfect"] .result-sparks{display:block}.result-enter .result-sparks i{animation:result-spark .9s ease-out .15s both}.result-enter[data-achievement="combo"] #achievementText,.result-enter[data-achievement="perfect"] #achievementText{animation:achievement-stamp .5s ease-out .12s both}.result-enter .record-flag{animation:record-reveal .6s ease-out .4s both}
@keyframes rank-stamp{from{transform:scale(1.16) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(-5deg);opacity:1}}@keyframes achievement-stamp{from{opacity:0;transform:translateY(7px);letter-spacing:5px}to{opacity:1;transform:translateY(0);letter-spacing:2px}}@keyframes result-spark{0%{opacity:0;transform:translate(calc(var(--x)*.55),0) rotate(0deg)}20%{opacity:.7}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}@keyframes record-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px){.result-plate{grid-template-columns:83px minmax(0,1fr);gap:17px;padding:18px 0}.rank-seal{width:83px;height:83px}.rank-seal b{font-size:59px}.rank-seal small{font-size:7px;margin-top:6px}.seal-rule{margin-bottom:7px;width:23px}.result .big-score>span{font-size:32px;letter-spacing:-1px}.result .result-song{font-size:16px!important}.result .result-grid b{font-size:25px}.result-grid>div+div{padding-left:14px}.result-actions{gap:7px}.result-actions .primary,.result-actions .text-btn{font-size:11px}.judgments>div+div{padding-left:8px}.judgments>div>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.result-enter .rank-seal,.result-enter #achievementText,.result-enter .record-flag,.result-enter .result-sparks i{animation:none!important}.result-sparks{display:none!important}}
/* Result medals inherit the pub sign's brass and warm ivory. */
.rank-seal{border-color:#c6ae78;outline-color:#677c55}.result[data-rank="S"] .rank-seal{background:#c59c3f14}.result .result-song{color:#f0e3c5!important}.result-actions .text-btn{background:#10251c;border-color:#71805c}.result #goodBar,.result .good-dot{background:#a1ce9c}.result #missBar,.result .miss-dot{background:#637965}.result .judgments>div>span{color:#c6c8ad}.result .record-flag{color:#ecc47a}.result .result-sparks i{background:#ecc47a}.result .achievement{border-bottom-color:#63764f}.result .result-plate{border-color:#b99e67}.result .big-score>small{color:#c7b788}
.topbar{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;background:repeating-linear-gradient(90deg,#30251a 0,#382a1c 3px,#2e2318 7px,#3a2b1d 71px,#271e15 73px);border-left:1px solid #65522f;border-right:1px solid #65522f;box-shadow:inset 0 1px #90744255,0 3px 9px #0003}.tunes{background:#10281e;box-shadow:inset 0 1px 5px #06150e55}

/* Instructions live in the tune-book help page. Reserve next-tune space only for sets. */
.play-hint{display:none}.play.has-set .play-hint{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:30px;min-height:30px;line-height:15px;margin-top:6px}
.hole-pad{justify-content:center;gap:9px}
.home-help{display:flex;flex-direction:column;align-items:flex-start;padding:6px 0 14px;gap:0;border-top:1px solid var(--line)}
.help-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--accent);font-size:12px;text-underline-offset:4px}
.home-help .practice-button{margin:0;padding:8px 0;font-size:11px}
.help-top-return{font-size:11px;color:var(--accent);text-decoration:none;border:1px solid #71805c;border-radius:3px;padding:12px;min-height:44px;display:flex;align-items:center}
.help-page{max-width:550px;margin:auto;padding:28px 0 35px}.help-page h1{font-size:22px;font-weight:500;margin:0 0 22px;letter-spacing:.4px;line-height:1.5}.help-page h2{font-size:15px;color:#ecc47a;font-weight:500;margin:0 0 12px}.help-page section{border-top:1px solid var(--line);padding:22px 0 20px}.help-page p,.help-page li,.help-page dd{font-size:13px;line-height:1.9;color:var(--ink);margin:0 0 12px}.help-page ul{margin:0;padding-left:19px}.help-page li{margin-bottom:7px}.help-page strong{color:#f3dbab;font-weight:600}.help-page dl{margin:0}.help-page dt{font-size:11px;color:var(--muted);margin-top:12px}.help-page dd{margin:4px 0 0}.help-page .help-small{font-size:11px;color:var(--muted)}.help-page .primary{text-align:center;text-decoration:none;margin-top:14px}
.help-demo{position:relative;height:128px;background:#10271e;border:1px solid #697349;margin:12px 0 16px;overflow:hidden}.help-demo-line{position:absolute;left:0;right:0;bottom:26px;height:2px;background:var(--gold)}.help-demo-note{position:absolute;width:20px;height:20px;border:1px solid #f1e4c8;border-radius:50%;background:#eee3bf;left:calc(35% - 10px);bottom:17px}.help-demo-note:before{content:"";position:absolute;bottom:19px;left:4px;width:10px;height:49px;border:1px solid #eee3bf;border-bottom:0;background:#eee3bf66}.help-demo-label{position:absolute;left:48%;bottom:37px;font-size:11px;color:#e1b56c}.help-page .pad-map{font-size:13px;letter-spacing:1px;color:#f0d6a0}
@media(max-width:480px){.help-page{padding-top:23px}.help-page h1{font-size:20px}.help-page section{padding-top:19px}.help-page p,.help-page li,.help-page dd{font-size:13px}}
@media(max-height:500px){.play.has-set .play-hint{height:24px;min-height:24px;line-height:12px;font-size:8px;margin-top:3px}.hole-pad{gap:5px}}

/* Extra controls are confined to the real-fingering view. */
.control-mode{grid-column:1/-1;margin-bottom:14px}.real-options{padding:4px 0 5px}.real-options .check-label{font-size:12px}.real-options a{color:var(--accent)}
.real-toolbar{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:7px;flex-shrink:0}.real-toolbar button{min-height:44px;border:1px solid #9a895f;border-radius:4px;background:#172e22;color:var(--ink);font-size:12px;touch-action:none;user-select:none;-webkit-user-select:none}.real-toolbar button.held{background:#675d39;color:#fff0c5;box-shadow:inset 0 0 8px #e7c88644}
.hole-pad.half-held i{background:linear-gradient(90deg,#d8bc7b 0 50%,#0b1c12 50% 100%);border-color:#f5d79d}.real-toolbar.hidden{display:none}
@media(max-height:650px){.real-toolbar{margin-top:5px;gap:6px}.real-toolbar button{min-height:40px}.play.real-play .hole-pad{height:58px}}
@media(max-height:500px){.real-toolbar button{min-height:35px;font-size:10px}.play.real-play .hole-pad{height:44px}.play.real-play .stage{min-height:65px}}

.help-page h3{font-size:14px;color:var(--accent);font-weight:500;margin:22px 0 8px}.help-page a{color:var(--accent)}

/* Real mode only: orient the horizontal control like a whistle laid on its side. */
.whistle-orientation{display:none;flex-shrink:0;pointer-events:none;user-select:none}
.play.real-play .whistle-orientation{display:block;margin-top:7px;color:#d5c493}
.whistle-ends{display:flex;align-items:center;gap:8px;font-size:10px;line-height:15px}
.whistle-ends>span:first-child,.whistle-ends>span:last-child{display:flex;align-items:center;gap:4px;white-space:nowrap}
.mouthpiece{width:28px;height:13px;flex-shrink:0}.whistle-foot{width:12px;height:13px;flex-shrink:0}
.direction-rule{flex:1;height:1px;background:#85764c;position:relative}
.direction-rule:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-top:1px solid #b7a06a;border-right:1px solid #b7a06a;transform:rotate(45deg)}
.whistle-hands{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:3px;font-size:10px;line-height:14px;text-align:center;color:#c2c4a5}
.whistle-hands span{border-top:1px solid #657350;padding-top:2px}.whistle-hands small{font-size:8px;margin-left:3px;color:#abb394}
.play.real-play .hole-pads{margin-top:3px}
@media(max-height:650px){.play.real-play .whistle-orientation{margin-top:4px}.whistle-hands{margin-top:1px;line-height:12px}.whistle-ends{line-height:13px}}
@media(max-width:340px){.whistle-ends{font-size:9px;gap:5px}.mouthpiece{width:23px}.whistle-hands{font-size:9px}}

/* Adopted Lane view. These rules are common to both input modes. */
.modal-card{max-height:calc(100svh - 40px);overflow-y:auto}
body.playing .topbar{height:48px;background:#142b20;border-bottom:1px solid #7e714a;box-shadow:none}
body.playing .brand{font-size:22px;letter-spacing:.4px}
body.playing .brand span{display:none}
body.playing #sound{min-height:44px;padding:9px 10px;background:transparent;border-color:transparent;font-size:10px}
body.playing .play{height:calc(100svh - 48px - env(safe-area-inset-top));min-height:0;padding-top:7px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
body.playing .play>*:not(.stage){flex-shrink:0}
body.playing .play-top{height:60px;min-height:60px;gap:8px}
body.playing .play h2{font-size:19px;line-height:1.2;margin-top:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body.playing .play .small-label{display:block;font-size:8px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.playing .pause-button{min-height:44px;min-width:64px;padding:8px;font-size:10px;background:#10271d;border-color:#566449}
body.playing .stats{padding:6px 0 7px;align-items:baseline}
body.playing .stats>div{min-width:0;display:flex;align-items:baseline;gap:6px}
body.playing .stats>div:last-child{justify-content:flex-end}
body.playing .stats span{font-size:8px;margin:0}
body.playing .stats b{font:18px/1 Georgia,serif;font-variant-numeric:tabular-nums}
body.playing .stage{min-height:100px;max-height:none;background:#10291f;border-color:#4e6247;box-shadow:inset 0 12px 16px #03140b33}
body.playing .lane-caption{top:8px}
body.playing .hole-pads{margin-top:5px;border-radius:5px;border-color:#7e794f;background:#1e3627;box-shadow:inset 0 1px #c9bd8222}
body.playing .hole-pad{height:72px;min-height:44px;gap:8px;border-radius:3px;position:relative}
body.playing .hole-pad>span{font-size:9px;color:#c8cbb0;text-shadow:none}
body.playing .hole-pad i{width:27px;height:27px;border:1px solid #afab79;outline:0;background:#0c2016;box-shadow:inset 0 2px 3px #0005}
body.playing .hole-pad.held{background:#c6af6326;box-shadow:none}
body.playing .hole-pad.held i{background:#d8c18a;border-color:#efe0b2;box-shadow:0 0 0 3px #d0b87919}
body.playing .hole-pad.half-held i{background:linear-gradient(90deg,#d8c18a 0 50%,#0c2016 50% 100%);border-color:#efe0b2}
body.playing .real-toolbar{gap:6px;margin-top:6px}
body.playing .real-toolbar button{min-height:44px;border-radius:3px;background:#1c3527;border-color:#687052;font-size:11px}
body.playing .real-toolbar button:last-child{background:#2a402d}
body.playing .real-toolbar button.held{background:#675d39}
body.playing .play.real-play .whistle-orientation{margin-top:5px}
body.playing .whistle-ends{font-size:9px;line-height:13px}
body.playing .whistle-hands{font-size:9px;line-height:12px;margin-top:2px}
body.playing .play.real-play .hole-pads{margin-top:3px}
/* Judgment and combo stay close to the runtime-measured low hit line. */
body.playing .feedback{top:calc(var(--hit-line-y) - 68px);font-size:17px;letter-spacing:1.4px;text-shadow:0 1px 4px #04120b,0 0 9px #04120b}
body.playing .feedback small{font-size:9px;margin-top:3px}
.lane-combo{display:block;position:absolute;top:calc(var(--hit-line-y) - 30px);left:0;right:0;z-index:3;text-align:center;font:19px/1 Georgia,serif;color:#f0e3c5;pointer-events:none;text-shadow:0 1px 4px #04120b,0 0 9px #04120b;font-variant-numeric:tabular-nums}
.lane-combo:after{content:"COMBO";font:7px/1 sans-serif;letter-spacing:1.5px;color:#d4c7a2;margin-left:6px;vertical-align:2px}
/* Real-only read-only targets: fixed strip height keeps the chart stable at rests
   and across pitch labels. The original six lower pads remain the only inputs. */
.tutor-panel{display:none;flex-shrink:0;height:78px;margin:5px 0;padding:7px 9px;border:1px solid #67744e;background:#243d2b;grid-template-rows:minmax(0,1fr) 14px;gap:4px;pointer-events:none}
.play.real-play .tutor-panel{display:grid}
.tutor-panel.hidden{display:none!important}
.tutor-study-heading{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:8px;min-width:0;min-height:0}
.tutor-current-title{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0}
#tutorCurrentLabel{font-size:9px;line-height:12px;white-space:nowrap;color:#d4d5b6}
#tutorCurrentPitch{font:26px/1 Georgia,serif;font-weight:400;color:#f2ead0;white-space:nowrap}
.tutor-next{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px;border-left:1px solid #63714c;padding-left:8px;min-width:0}
.tutor-next>span{font-size:8px;line-height:10px;color:#c3caac}
#tutorNextPitch{grid-column:1/-1;grid-row:2;font:19px/1 Georgia,serif;text-align:left;font-weight:400;white-space:nowrap}
.tutor-holes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:2px;min-width:0;pointer-events:none}
.tutor-holes>[data-study-hole]{display:block;justify-self:center;width:20px;height:20px;border:1.5px solid #c7ceae;border-radius:50%;background:transparent;position:relative}
.tutor-holes.empty>[data-study-hole]{visibility:hidden}
.tutor-holes>[data-study-hole].closed{background:#e4dfc0;border-color:#f0e9cc}
.tutor-holes>[data-study-hole].half{background:linear-gradient(90deg,#e4dfc0 0 50%,transparent 50% 100%);border-color:#f0e9cc}
.tutor-current-holes{padding:0 0 12px}
.tutor-current-holes>[data-study-hole]:after{position:absolute;top:calc(100% + 4px);left:0;right:0;text-align:center;font:8px/1 sans-serif;color:#bfc8aa}
.tutor-current-holes>[data-study-hole="0"]:after{content:"1"}
.tutor-current-holes>[data-study-hole="1"]:after{content:"2"}
.tutor-current-holes>[data-study-hole="2"]:after{content:"3"}
.tutor-current-holes>[data-study-hole="3"]:after{content:"4"}
.tutor-current-holes>[data-study-hole="4"]:after{content:"5"}
.tutor-current-holes>[data-study-hole="5"]:after{content:"6"}
.tutor-mini-holes{grid-column:1/-1;grid-row:3;gap:2px}
.tutor-mini-holes>[data-study-hole]{width:7px;height:7px;border-width:1px}
.tutor-study-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;line-height:14px;white-space:nowrap}
#tutorCurrentNote{font-size:9px;min-width:0;color:#d0d4b4}
#tutorModeLabel{font-size:8px;color:#b5c29f;white-space:nowrap;flex-shrink:0}
@media(min-width:700px){body.playing .play{max-width:540px}}
@media(max-width:340px){
 body.playing .play h2{font-size:17px}
 body.playing .stats>div{gap:4px}
 body.playing .stats span{font-size:7px}
 #tutorCurrentPitch{font-size:25px}
}
@media(max-height:650px){
 body.playing .topbar{height:44px}
 body.playing .brand{font-size:20px}
 body.playing .play{height:calc(100svh - 44px - env(safe-area-inset-top));padding-top:4px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
 body.playing .play-top{height:44px;min-height:44px}
 body.playing .play h2{font-size:17px;margin-top:3px;-webkit-line-clamp:1}
 body.playing .stats{padding:5px 0}
 body.playing .stats b{font-size:17px}
 body.playing .stage{min-height:60px}
 body.playing .hole-pad{height:58px;gap:6px}
 body.playing .hole-pad i{width:23px;height:23px}
 body.playing .real-toolbar{margin-top:5px}
 .tutor-panel{height:72px;margin:4px 0;padding-top:5px;padding-bottom:5px;gap:2px}
 body.playing .play.has-set .play-hint{height:24px;min-height:24px;line-height:12px;font-size:8px;margin-top:4px}
}
@media(max-height:500px){
 body.playing .play{padding-top:2px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
 body.playing .play h2{font-size:15px}
 body.playing .play .small-label{font-size:7px}
 body.playing .stats{padding:4px 0;align-items:center}
 body.playing .stats>div{gap:5px}
 body.playing .stats span{font-size:7px}
 body.playing .stats b{font-size:15px}
 body.playing .stage,body.playing .play.real-play .stage{min-height:48px}
 body.playing .hole-pad{height:44px;gap:4px;padding:3px 0}
 body.playing .hole-pad i{width:19px;height:19px}
 body.playing .hole-pad>span{font-size:8px}
 body.playing .real-toolbar{margin-top:4px}
 body.playing .real-toolbar button{min-height:44px}
 body.playing .whistle-hands{margin-top:0;font-size:8px;line-height:11px}
 body.playing .play.real-play .whistle-orientation{margin-top:3px}
 body.playing .feedback{top:calc(var(--hit-line-y) - 45px);font-size:12px}
 body.playing .feedback small{font-size:7px;margin-top:1px}
 .lane-combo{top:calc(var(--hit-line-y) - 17px);font-size:13px}
 .lane-combo:after{font-size:6px}
 body.playing .play.has-set .play-hint{height:18px;min-height:18px;line-height:9px;font-size:7px;margin-top:3px}
 .modal{padding:14px}
 .modal-card{padding:20px;max-height:calc(100svh - 28px)}
}

/* Title-inspired sleeves in a compact record crate. The bounded list still scrolls. */
.home .tunes{border-top:2px solid #8a784e;border-bottom:2px solid #8a784e;background:#112b20;scroll-padding:8px}
.home .tune{gap:13px;padding:12px 11px;min-height:90px;border-bottom-color:#3d513d}
.home .tune.selected{background:#294431;box-shadow:inset 0 0 0 1px #bdab75}
.home .tune.selected:before{width:3px;background:#e0c389}
.record-art{position:relative;display:block;flex:0 0 74px;width:74px;height:64px;pointer-events:none;user-select:none;-webkit-user-select:none}
.record-art img{position:absolute;inset:0 auto auto 0;width:64px;height:64px;display:block;object-fit:contain;border:1px solid #bca875;box-shadow:1px 2px 3px #06150e99;background:#dcd4ad}
.record-disc{position:absolute;width:58px;height:58px;left:12px;top:3px;border-radius:50%;border:1px solid #4c5544;background:radial-gradient(circle,#e2c990 0 3%,#15241a 4% 11%,#a88d51 12% 22%,#122219 23% 29%,#2b392b 30% 31%,#101b14 32% 46%,#33402e 47% 48%,#102017 49% 66%,#2a3828 67% 68%,#101c13 69%);box-shadow:1px 1px 2px #020d0899}
.home .tune.selected .record-disc{left:16px;border-color:#b8a66d}
.home .record-art .tune-number{position:absolute;bottom:2px;left:2px;display:block;width:auto;min-width:17px;padding:2px 3px;background:#163121;color:#ead9af;border:1px solid #9e935e;font:8px/1 Georgia,serif}
.home .tune-name strong{font-size:19px;line-height:1.28}
.home .tune-name small{margin-top:5px;font-size:10px}
.home .tune-meter{min-width:33px;color:#d0c494;font-size:9px;letter-spacing:.4px}
@media(min-width:700px){.home .tune{padding:12px 13px}.home .tune-name strong{font-size:21px}.home .tune-meter{gap:8px}}
@media(max-width:480px){.home .tune{padding:10px 9px;gap:11px;min-height:86px}.home .tune-name strong{font-size:17px}.home .tune-name small{font-size:9px}.home .tune-meter{font-size:8px;min-width:29px}}
@media(max-width:340px){.home .tune{padding:9px 7px;gap:8px;min-height:80px}.record-art{width:65px;height:58px;flex-basis:65px}.record-art img{width:58px;height:58px}.record-disc{width:52px;height:52px;left:11px}.home .tune.selected .record-disc{left:13px}.home .tune-name strong{font-size:15px}.home .tune-name small{font-size:8px}.home .tune-meter{min-width:26px;font-size:8px}}

/* Fixed-size sleeve beside the current title, outside the playing board. */
.play-heading{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.play-title-copy{min-width:0;flex:1}
.play-artwork{display:block;width:36px;height:36px;flex:0 0 36px;object-fit:contain;border:1px solid #aa9864;background:#183729;pointer-events:none;user-select:none;-webkit-user-select:none}
@media(max-width:340px){.play-heading{gap:7px}}

/* Séis title sign. Only the tune menu expands; play geometry stays unchanged. */
.brand{min-width:0;text-shadow:none;letter-spacing:.5px}
.brand span{font-family:inherit;letter-spacing:1.2px;white-space:nowrap}
.brand-art{display:none;pointer-events:none;user-select:none}
body.home-screen .topbar{height:126px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:44px minmax(0,1fr);column-gap:14px;row-gap:0;padding:8px 12px;background:#173c30;border:1px solid #c7a365;border-bottom:3px double #c7a365;box-shadow:inset 0 0 0 4px #173c30,inset 0 0 0 5px #41674f}
body.home-screen .brand{grid-column:1;grid-row:1/3;align-self:center;font-size:58px;line-height:1.1;color:#f1e6c9;gap:8px;letter-spacing:0}
body.home-screen .brand span{font-size:10px;letter-spacing:1px;color:#d4b982}
body.home-screen .brand-art{display:block;grid-column:2/4;grid-row:2;width:100%;max-width:330px;height:100%;min-width:0;object-fit:contain;object-position:right center;justify-self:end}
body.home-screen #sound{grid-column:3;grid-row:1;align-self:start;justify-self:end;background:none;border-color:transparent;font-size:10px;padding:8px;min-height:36px;color:#d4c6a7;box-shadow:none}
@media(max-width:480px){body.home-screen .topbar{height:116px;padding:7px 10px;column-gap:8px;grid-template-rows:36px minmax(0,1fr)}body.home-screen .brand{font-size:49px;gap:7px}body.home-screen .brand span{font-size:8px;letter-spacing:.6px}body.home-screen .brand-art{max-width:220px}body.home-screen #sound{padding:7px 2px}}

/* Keep instruction prose in the help accordions; labels remain on the controls. */
.result .result-note.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.result-help{display:inline-block;margin-top:15px;padding:10px 0;font-size:10px;color:var(--muted);text-underline-offset:3px}
.help-page details{border-top:1px solid var(--line);padding:0}
.help-page details>summary{min-height:48px;padding:15px 0;color:var(--accent);font-size:14px;cursor:pointer}
.help-page details>div{padding:0 0 14px}
.help-page details p:last-child{margin-bottom:0}
.help-page details:target{outline:1px solid var(--line);outline-offset:5px}

/* Small clock-driven count markers, with no independent animation. */
.count-pips{display:flex;justify-content:center;gap:10px;margin-top:14px}
.count-pips i{display:block;width:7px;height:7px;border:1px solid #d6be88;border-radius:50%;background:transparent;box-shadow:none}
.count-pips i.on{background:#e5cb91}
.count-in{line-height:1}
@media(max-height:500px){.count-in{top:10%;font-size:24px}.count-pips{margin-top:5px;gap:7px}.count-pips i{width:5px;height:5px}}
.help-page a.primary{color:#1e2e20;text-decoration:none;text-align:center}