:root{--lime:#9be84f;--gold:#f6c23a;--ink:#efe8d2;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:#0b1208;overflow:hidden}
body{touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:relative;width:min(100%,calc(100vh*1672/941));aspect-ratio:1672/941;background:url(assets/bg.jpg) center/100% 100% no-repeat;container-type:inline-size;font-family:'Trebuchet MS',system-ui,sans-serif}
.num{position:absolute;top:6.6%;height:9.4%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:4.3cqw;line-height:1;text-shadow:0 0 .6cqw currentColor}
#sc{left:13.5%;width:6.5%;color:var(--lime)}
#hs{left:76.4%;width:8.6%;color:var(--gold)}
#cwrap{position:absolute;left:6.58%;top:27.1%;width:86.7%;height:54.2%}#c{display:block;width:100%;height:100%}
.btn{border:0;border-radius:50%;padding:0;cursor:pointer;width:var(--b);height:var(--b)}
.stone{background:radial-gradient(circle at 36% 28%,#62645d,#282926 55%,#10110f);border:max(3px,calc(var(--b)*.05)) solid #6c6f64;box-shadow:0 4px 10px #000a,inset 0 0 0 2px #0b0b0a;color:#ece8da;display:grid;place-items:center}.stone:active{filter:brightness(1.5);transform:scale(.94)}
.btn:focus-visible{outline:3px solid var(--lime)}
#msg{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;background:rgba(5,9,4,.62);color:var(--ink);font-size:3.4cqw;font-weight:800;text-align:center;text-shadow:0 .2cqw .6cqw #000;padding:2%}
#msg small{font-size:1.6cqw;font-weight:500;opacity:.85}
#app{width:100%;height:100%;display:grid;align-items:center;justify-items:center;gap:2vmin;padding:1.5vmin;--b:min(17vh,8vw,96px);grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pad stage side"}
#pad{grid-area:pad;display:grid;grid-template-columns:repeat(3,var(--b));grid-template-rows:repeat(2,var(--b));gap:calc(var(--b)*.08)}
.u{grid-column:2;grid-row:1}.l{grid-column:1;grid-row:2}.d{grid-column:2;grid-row:2}.r{grid-column:3;grid-row:2}
#side{grid-area:side;display:flex;flex-direction:column;gap:calc(var(--b)*.12)}
#stage{grid-area:stage}#hud{display:contents}#ttl{display:none}
.p{--b:min(16vw,10vh,74px);grid-template-columns:1fr auto;grid-template-areas:"stage stage" "pad side";align-content:center;gap:1.8vh 2vw}
.p #side{flex-direction:row}
.p #stage{background:none;aspect-ratio:auto;width:min(100%,calc((100vh - var(--b)*2.4 - 120px)*.8))}
.p #hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:2cqw;gap:2cqw}
.p #ttl{display:block;margin:0;font:900 9cqw Georgia,serif;letter-spacing:.04em;color:#d3ccb4;text-shadow:0 .5cqw 0 #000,0 0 3cqw #5d7a34}
.p .num{position:static;width:auto;height:auto;flex-direction:column;gap:.5cqw;font-size:6.5cqw;padding:1.2cqw 3cqw;min-width:21cqw;background:linear-gradient(#1c1d1a,#0d0e0c);border:.8cqw solid #4a4d46;border-radius:2cqw}
.p #sc,.p #hs{width:auto;left:auto}.p #sc::before{content:'SCORE'}.p #hs::before{content:'HIGH SCORE'}
.p .num::before{font:600 2.6cqw Georgia,serif;color:#d9d3bd;text-shadow:none}
.p #cwrap{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:4/5;border:2cqw solid #4b4e45;border-radius:2cqw;box-shadow:0 0 0 .6cqw #161714,0 2cqw 5cqw #000a,inset 0 0 6cqw #000}
.p #msg{font-size:7cqw}.p #msg small{font-size:3.6cqw}
.hit{position:absolute;height:auto;aspect-ratio:1;display:grid;place-items:center;color:#ece8da;opacity:.55;background:radial-gradient(circle at 36% 28%,#62645d,#282926 55%,#10110f);border:.4cqw solid #6c6f64;box-shadow:0 .3cqw .8cqw #0008;transition:opacity .1s}
.hit:active{opacity:.9;transform:scale(.95)}#pause{opacity:.85}
#app{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;gap:0}
#stage{width:min(100vw,calc(100vh*1672/941))}
#panel,#lb,#how{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,9,4,.7);z-index:5}
.card{width:min(92%,max(44%,300px));background:linear-gradient(#2a2c24,#12130f);border:max(3px,.5cqw) solid #6c6f64;border-radius:2cqw;padding:max(14px,2.4cqw) max(16px,3cqw);color:var(--ink);font-size:max(14px,2.1cqw);display:flex;flex-direction:column;gap:max(10px,1.6cqw);box-shadow:0 1cqw 3cqw #000}
.card h2{margin:0;font-size:1.3em;text-align:center}.card label{display:grid;grid-template-columns:7.5em 1fr;white-space:nowrap;align-items:center;gap:.5em}.card{max-height:96%;overflow:auto}.frl{font-weight:700;margin-top:.2em}.fruits{display:grid;grid-template-columns:repeat(5,1fr);gap:max(6px,1.2cqw)}.fb{width:100%;max-width:max(40px,5.2cqw);justify-self:center;min-width:0;aspect-ratio:1;padding:2px;background:#161714;border:2px solid #4a4d46;border-radius:10px;cursor:pointer;display:grid;place-items:center}.fb img{width:100%;height:100%;object-fit:contain}.fb.on{border-color:#8fe04a;box-shadow:0 0 10px #8fe04a99;background:#22271b}
.card input{width:100%;height:max(26px,3.4cqw);accent-color:#8fe04a;margin:0}
.rowb{display:flex;gap:2cqw}.pb{flex:1;padding:.6em;font:inherit;font-weight:700;color:var(--ink);background:radial-gradient(circle at 36% 28%,#62645d,#282926 70%);border:2px solid #6c6f64;border-radius:1.2cqw;cursor:pointer}.pb:active{filter:brightness(1.5)}
#menu{opacity:1;left:0;right:0;margin:0 auto;top:auto;bottom:2.2%;width:fit-content;min-width:92px;height:auto;aspect-ratio:auto;padding:.45em 1.6em;border-radius:999px;font:800 max(13px,2.3cqw) Georgia,serif;letter-spacing:.06em;white-space:nowrap;z-index:3;display:block;background:radial-gradient(circle at 36% 28%,#6e7068,#2c2d29 60%,#151613);border-color:#8d9084}
#app.rot{position:relative}
#app.rot #stage{position:absolute;left:50%;top:50%;width:min(100vh,calc(100vw*1.7778));transform:translate(-50%,-50%) rotate(-90deg)}
#app.p #stage{display:grid;grid-template-columns:repeat(5,1fr);column-gap:2.5%;row-gap:2.4cqw;width:min(calc(100vw - 16px),calc(100vh/1.95));background:none;aspect-ratio:auto;align-content:start}
.p #hud{grid-column:1/-1;grid-row:1}.p #cwrap{grid-column:1/-1;grid-row:2}
.p .hit{position:static!important;left:auto!important;top:auto!important;width:100%!important;aspect-ratio:1;height:auto;opacity:1;justify-self:center}
.p #up{grid-column:2;grid-row:3}.p #lf{grid-column:1;grid-row:4}.p #dn{grid-column:2;grid-row:4}.p #rt{grid-column:3;grid-row:4}
.p #pause{grid-column:4;grid-row:4}.p #restart{grid-column:5;grid-row:4}
.p #menu{grid-column:4/6;grid-row:3;width:auto!important;aspect-ratio:auto;align-self:center;margin:0;bottom:auto}
#app.pt #stage{display:block;aspect-ratio:1080/1800;width:min(100vw,calc(100vh*1080/1800));background:url(assets/comp.jpg) center/100% 100% no-repeat}
.pt #cwrap{left:6.48%;top:11.44%;width:87.04%;height:66.11%}
.pt .num{top:2.2%;height:3.3%;font-size:6.7cqw}
.pt .hit{opacity:1;width:15.74%!important}
.pt #up{left:23.61%!important;top:80.56%!important}.pt #lf{left:5.09%!important;top:90%!important}.pt #dn{left:23.61%!important;top:90%!important}
.pt #rt{left:42.13%!important;top:90%!important}.pt #pause{left:60.65%!important;top:90%!important}.pt #restart{left:79.17%!important;top:90%!important}
.pt #menu{left:57%!important;right:auto;margin:0;top:81.2%!important;bottom:auto;width:auto!important;font-size:4.2cqw;padding:.5em 1.4em}
.pt #msg{font-size:7cqw}.pt #msg small{font-size:3.6cqw}
.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:max(6px,1.2cqw)}
.sb{padding:.45em .2em;font:inherit;font-size:.9em;font-weight:700;color:var(--ink);background:#161714;border:2px solid #4a4d46;border-radius:10px;cursor:pointer}
.sb.on{border-color:#8fe04a;box-shadow:0 0 10px #8fe04a99;background:#22271b}
.cols{display:grid;grid-template-columns:repeat(7,1fr);gap:max(6px,1.2cqw)}
.cb{width:100%;max-width:max(34px,4.6cqw);justify-self:center;aspect-ratio:1;border-radius:50%;border:3px solid #4a4d46;cursor:pointer;padding:0}
.cb.on{border-color:#fff;box-shadow:0 0 10px #fffa}
.trk{display:flex;align-items:center;gap:max(8px,2cqw)}.trk .pb{flex:0 0 auto;width:max(46px,7cqw)}#tn{flex:1;text-align:center;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lbs{min-height:3em;max-height:34cqw;overflow:auto}.lr{display:flex;gap:.7em;padding:.25em 0;border-bottom:1px solid #35372f}.lr b{width:1.8em;color:#aaa}.lr span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lr em{font-style:normal;font-weight:800;color:var(--gold)}
.note{font-size:.85em;opacity:.8;min-height:1.1em}#nm{padding:.5em;font:inherit;border-radius:8px;border:2px solid #4a4d46;background:#161714;color:var(--ink);height:auto}
#joy{position:absolute;left:1.4%;bottom:0;width:calc(20% * var(--js,1));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(125,129,116,.6),rgba(34,35,31,.6) 62%,rgba(8,8,7,.65));border:.5cqw solid rgba(160,164,150,.65);box-shadow:0 .5cqw 1.2cqw #0008;touch-action:none;z-index:2}
#joy::before{content:'';position:absolute;inset:22%;border-radius:50%;border:.25cqw dashed rgba(220,224,210,.25)}
#knob{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;background:radial-gradient(circle at 36% 28%,#8a8d82,#3a3c36 60%,#161714);border:.35cqw solid #9a9d90;box-shadow:0 .4cqw 1cqw #000a;pointer-events:none}
.pt #joy{left:6%;bottom:.8%;width:calc(30.6% * var(--js,1))}
#app.lefty #joy{left:auto;right:1.4%}#app.pt.lefty #joy{left:auto;right:6%}
#app.lefty #restart{left:2%!important}#app.pt.lefty #restart{left:5.09%!important}#app.pt.lefty #pause{left:23.61%!important}#app.pt.lefty #menu{left:8%!important}
#hl{}.hr{display:flex;gap:.7em;align-items:center;padding:.25em 0}.hr img{width:2.5em;height:2.5em;flex:none}.hr b{display:block}.hr span{opacity:.85;font-size:.9em}
.ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,9,4,.78);z-index:6}
.ov .card{width:min(94%,max(46%,330px));text-align:center}.ov h1{margin:0;font:900 max(24px,5cqw) Georgia,serif;letter-spacing:.08em;color:#e6dfc4;text-shadow:0 .4cqw 0 #000,0 0 3cqw #5d7a34}
.ov h2{margin:0}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:max(6px,1cqw)}.pb.on{border-color:#8fe04a;box-shadow:0 0 10px #8fe04a99;background:#22271b}
.pb.big{font-size:1.4em;padding:.7em;border-color:#8fe04a;background:radial-gradient(circle at 36% 28%,#7bc040,#2c5a14 70%)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:max(6px,1cqw)}.grid2{display:grid;grid-template-columns:1fr auto;gap:.2em 1em;text-align:left}.big{font-size:3.2em;font-weight:900;color:#ffd75a}
#amb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#rays{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.18;background:repeating-linear-gradient(105deg,transparent 0 12%,rgba(255,240,170,.5) 14%,transparent 17% 30%);animation:ray 9s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes ray{from{transform:translateX(-3%);opacity:.1}to{transform:translateX(3%);opacity:.24}}