:root{--bg1:#10261c;--bg2:#1f4a35;--ink:#f6fbf4;--accent:#e9d98b}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
html,body{height:100%;height:100dvh;margin:0;background:#10261c;color:var(--ink);font-family:'Quicksand',sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud i{color:#fff;margin-right:4px}
#hud{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:0;right:0;text-align:center;font-size:15px;letter-spacing:.08em;pointer-events:none}
#bar{width:min(260px,70vw);height:6px;margin:8px auto 0;background:#ffffff22;border-radius:9px;overflow:hidden}
#fill{height:100%;width:100%;background:linear-gradient(90deg,#fff,var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .4s;will-change:transform}
#msg{position:fixed;left:0;right:0;top:22%;text-align:center;font-family:'Playfair Display',serif;font-size:clamp(18px,5vw,26px);font-style:italic;opacity:0;transition:opacity .5s;will-change:opacity;padding:0 24px;pointer-events:none;text-shadow:0 2px 12px #000a}
.ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#10261cee;padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:5;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ov .card{margin:auto}
.card{max-width:420px;width:100%;text-align:center;background:#fffdf6;color:#27392e;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px #0008}
.card h1{margin:0 0 8px;font-family:'Playfair Display',serif;font-weight:400;font-size:28px}
.card h1 i{color:#2f6b4c;font-size:.8em}
.card p{line-height:1.6;margin:10px 0}
input{-webkit-user-select:text;user-select:text;-webkit-appearance:none;font:inherit;font-size:18px;padding:10px 14px;border:1px solid #b9c8b8;border-radius:10px;width:80%;text-align:center;margin:8px 0;background:#fff;color:#27392e}
button{touch-action:manipulation;min-height:44px;font:inherit;font-size:17px;padding:11px 26px;border:0;border-radius:30px;background:#2f6b4c;color:#fff;cursor:pointer;margin-top:10px}
button:active{transform:scale(.97)}
.hide{display:none}
#mute{position:fixed;right:14px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:4;margin:0;padding:6px 10px;font-size:18px;background:#ffffff22;border-radius:20px}
@media(max-height:480px){.card{padding:16px}.card h1{font-size:22px}.card p{margin:6px 0;line-height:1.4}}
#mute{min-width:44px;right:calc(14px + env(safe-area-inset-right,0px))}