*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#16301f;color:#fff;font:15px/1.35 Georgia,'Times New Roman',serif;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none}
#top{position:absolute;left:10px;top:max(10px,env(safe-area-inset-top));text-shadow:0 2px 5px #000}
#lvl{font-weight:700;font-size:16px;color:#f0d78a}
#stats{font-size:14px;opacity:.95}
#bpause{position:absolute;right:10px;top:max(10px,env(safe-area-inset-top));pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid #f0d78a;background:rgba(22,48,31,.8);color:#f0d78a;font:700 16px Georgia}
#announce{position:absolute;left:50%;top:22%;transform:translateX(-50%);text-align:center;font-size:26px;font-weight:700;color:#fff;text-shadow:0 3px 8px #000;max-width:90vw;opacity:0;transition:opacity .4s}
#toasts{position:absolute;left:50%;top:max(60px,calc(env(safe-area-inset-top) + 50px));transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;align-items:center;width:92vw}
.toast{background:rgba(22,48,31,.88);border:1px solid #f0d78a;color:#fff;padding:5px 14px;border-radius:14px;font-size:15px;text-shadow:0 1px 2px #000;animation:tin .25s}
.toast.bad{border-color:#e46a5a;background:rgba(70,22,18,.9)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#gait{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);font-weight:700;color:#f0d78a;text-shadow:0 2px 5px #000;font-size:17px;letter-spacing:1px}
#fieldbar{position:absolute;left:50%;top:max(56px,calc(env(safe-area-inset-top) + 46px));transform:translateX(-50%);width:min(70vw,420px);height:16px}
#fbline{position:absolute;left:0;right:0;top:7px;height:3px;background:rgba(255,255,255,.35);border-radius:2px}
#fieldbar i{position:absolute;top:1px;width:12px;height:14px;border-radius:3px;margin-left:-6px}
#fbH{background:#f4f1e8}#fbM{background:#c0262d}#fbY{background:#f0d78a;box-shadow:0 0 6px #f0d78a}
#fbL{position:absolute;left:0;right:0;top:15px;text-align:center;font-size:11px;opacity:.85;text-shadow:0 1px 3px #000}
#touch{position:fixed;inset:0;pointer-events:none}
#stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.18);pointer-events:auto}
#knob{position:absolute;left:41px;top:41px;width:50px;height:50px;border-radius:50%;background:rgba(240,215,138,.75);border:2px solid #fff}
#tbtns{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;gap:10px;align-items:end;pointer-events:none}
#tbtns button{pointer-events:auto;border:2px solid #f0d78a;background:rgba(22,48,31,.82);color:#f0d78a;font:700 13px Georgia;border-radius:50%;width:62px;height:62px}
#bjump{grid-column:1/3;width:104px!important;height:104px!important;font-size:19px!important;justify-self:end;background:rgba(179,32,42,.85)!important;color:#fff!important}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(22,48,31,.55),rgba(10,22,14,.88));z-index:5;overflow:auto;padding:12px;touch-action:pan-y}
.card{width:min(560px,100%);background:rgba(18,38,26,.94);border:1px solid #f0d78a;border-radius:16px;padding:18px 18px 16px;box-shadow:0 10px 40px rgba(0,0,0,.6);max-height:94vh;overflow:auto}
.card h1{margin:0 0 2px;font-size:25px;color:#f0d78a;letter-spacing:.5px}.card h2{margin:0 0 8px;color:#f0d78a;font-size:20px}
.sub{margin:0 0 12px;opacity:.85;font-size:14px}
.btns{display:flex;flex-direction:column;gap:9px;margin-top:8px}
button.big,.btns button{font:700 16px Georgia;color:#fff;background:rgba(240,215,138,.14);border:1px solid #f0d78a;border-radius:12px;padding:12px 14px;text-align:left;pointer-events:auto}
button.go{background:#b3202a!important;text-align:center!important}
button.lock{opacity:.45}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lv small{display:block;font-weight:400;opacity:.85;font-size:13px;margin-top:2px}
.rib{display:inline-flex;flex-direction:column;align-items:center;margin:4px 5px;font-size:11px;width:76px;text-align:center}
.rosette{width:38px;height:38px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.5)}
.rosette:before,.rosette:after{content:'';position:absolute;top:30px;width:11px;height:20px;background:inherit;z-index:-1}
.rosette:before{left:6px;transform:rotate(12deg)}.rosette:after{right:6px;transform:rotate(-12deg)}
.rosette.big{width:84px;height:84px;margin:6px auto 22px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.35),0 4px 10px rgba(0,0,0,.6);animation:pop .6s}
.rosette.big:before,.rosette.big:after{top:68px;width:22px;height:44px}.rosette.big:before{left:12px}.rosette.big:after{right:12px}
@keyframes pop{0%{transform:scale(.2) rotate(-40deg)}70%{transform:scale(1.15)}100%{transform:none}}
.coats{display:flex;gap:8px;flex-wrap:wrap}.coats button{padding:8px 11px;font-size:14px}.coats button.sel{background:#b3202a}
.res{text-align:center}.res .st{margin:10px 0;text-align:left;font-size:14px}.res .st div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(240,215,138,.2);padding:3px 0}
input[type=text]{font:16px Georgia;padding:8px;border-radius:8px;border:1px solid #f0d78a;background:rgba(0,0,0,.3);color:#fff;width:100%}
.note{font-size:12px;opacity:.7;margin-top:10px}
@media (max-height:480px){#stick{width:108px;height:108px}#knob{left:29px;top:29px}#bjump{width:84px!important;height:84px!important}#tbtns button{width:52px;height:52px}}

#cmap{position:absolute;left:10px;top:max(64px,calc(env(safe-area-inset-top) + 54px));width:150px;height:102px;background:rgba(22,48,31,.62);border:1px solid #f0d78a;border-radius:8px;display:none;pointer-events:none}

#cmap{position:absolute;left:10px;top:max(82px,calc(env(safe-area-inset-top) + 72px));width:60px;height:118px;background:rgba(22,48,31,.62);border:1px solid #f0d78a;border-radius:8px;pointer-events:none}
#score{font-weight:700;font-size:22px;color:#fff;letter-spacing:.5px}
#stam{position:absolute;left:50%;bottom:max(42px,calc(env(safe-area-inset-bottom) + 30px));transform:translateX(-50%);width:min(46vw,230px);height:12px;background:rgba(0,0,0,.45);border:1px solid #f0d78a;border-radius:7px;overflow:hidden}
#stam i{display:block;height:100%;width:100%;background:#4fb35a;transition:background .2s}
#stam span{position:absolute;left:0;right:0;top:-1px;text-align:center;font-size:9px;line-height:12px;letter-spacing:2px;color:#fff;text-shadow:0 1px 2px #000}