*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#5da84f;
 font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 user-select:none;-webkit-user-select:none;touch-action:none}
#game{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.hud{position:fixed;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;z-index:10;
 display:flex;align-items:center;gap:8px;pointer-events:none}
.pill{background:rgba(255,255,255,.95);border-radius:999px;padding:8px 13px;font-weight:800;font-size:14px;
 color:#2b2113;box-shadow:0 6px 16px rgba(0,0,0,.3);display:flex;align-items:center;gap:6px}
.pill.gold{background:linear-gradient(180deg,#fff7d6,#fcd34d);border:2px solid #fff}
.pill.bump{animation:bump .28s}
@keyframes bump{40%{transform:scale(1.12)}}
.ic{width:20px;height:20px;flex:none}
.dot{opacity:.4;font-weight:900}
.cap{width:52px;height:8px;background:#e7dcc0;border-radius:99px;overflow:hidden;display:inline-block}
.cap i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4ade80,#15803d)}
.sp{flex:1}
.tbtn{pointer-events:auto;border:0;width:38px;height:38px;border-radius:12px;font-size:17px;font-weight:900;cursor:pointer;
 background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.3);color:#444}
.tbtn:active{transform:scale(.9)}
.hint{position:fixed;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:10;
 background:rgba(15,20,8,.8);color:#fef9c3;padding:8px 15px;border-radius:16px;font-size:12.5px;font-weight:700;line-height:1.4;
 border:1px solid rgba(253,224,71,.5);max-width:92vw;text-align:center;transition:opacity .5s;pointer-events:none}
@media(max-width:560px){
 .hud{flex-wrap:wrap;gap:6px}
 .pill{font-size:12.5px;padding:6px 10px}
 .ic{width:17px;height:17px}
 .tbtn{width:34px;height:34px}
 .toasts{bottom:300px}
 .hint{font-size:11.5px;top:calc(96px + env(safe-area-inset-top))}
}
.hint.hide{opacity:0}
.hint b{color:#fde047}
.mini{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:10;
 display:flex;gap:7px;background:rgba(10,15,8,.58);padding:7px 11px;border-radius:999px;backdrop-filter:blur(4px);pointer-events:none}
.mini .m{display:flex;flex-direction:column;align-items:center;gap:2px}
.mini svg{width:22px;height:22px}
.mini .bar{width:26px;height:3px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden}
.mini .bar i{display:block;height:100%;background:#fde047}
.joy{position:fixed;left:16px;bottom:calc(46px + env(safe-area-inset-bottom));width:158px;height:158px;border-radius:50%;z-index:11;
 background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.34),rgba(255,255,255,.07));
 border:2px solid rgba(255,255,255,.6);box-shadow:0 10px 26px rgba(0,0,0,.35);touch-action:none;transition:transform .12s,box-shadow .12s}
.joy.on{transform:scale(1.05);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.stick{position:absolute;left:50%;top:50%;width:70px;height:70px;border-radius:50%;transform:translate(-50%,-50%);
 background:radial-gradient(circle at 35% 28%,#fff,#fde68a 45%,#f59e0b 80%);box-shadow:0 8px 18px rgba(0,0,0,.45)}
@media(min-width:800px){.joy{opacity:.9}.mini{bottom:14px}}
@media(max-width:760px){.mini{bottom:calc(218px + env(safe-area-inset-bottom))}}
.modal-back{position:fixed;inset:0;background:rgba(20,15,5,.6);display:none;place-items:center;z-index:50;padding:16px}
.modal-back.open{display:grid}
.modal{background:linear-gradient(180deg,#fffef5,#fff3cf);border-radius:20px;max-width:420px;width:100%;padding:18px;
 box-shadow:0 30px 70px rgba(0,0,0,.45);border:3px solid #fde047}
.modal-title{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:18px}
.sub{color:#78716c;font-size:13px;margin:4px 0 8px}
.modal ol{line-height:1.6;color:#4b3f26;font-size:13.5px;margin:0 0 10px;padding-left:20px}
.btn{border:0;border-radius:12px;padding:12px;font-weight:900;cursor:pointer;font-size:14px;width:100%;margin-top:8px}
.btn.primary{background:linear-gradient(180deg,#4ade80,#15803d);color:#fff;box-shadow:0 5px 0 #14532d}
.btn.primary:active{transform:translateY(3px);box-shadow:none}
.btn.ghost{background:#fff;border:2px solid #e5d5a0;color:#78716c}
.toasts{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:60;align-items:center;pointer-events:none}
.toast{background:rgba(20,25,35,.92);color:#fff;padding:8px 15px;border-radius:999px;font-weight:800;font-size:12.5px;border:1px solid rgba(255,255,255,.2)}
#helpClose{border:1px solid #e5d5a0;background:#fff;border-radius:10px;width:32px;height:32px;cursor:pointer}