*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#79c7dd;font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif}
#game-wrap{position:fixed;inset:0}
canvas#game{width:100%;height:100%;display:block}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 52%,rgba(8,28,8,.42) 100%);z-index:2}
.dialog h1{text-shadow:0 3px 0 #ffb300, 0 6px 14px rgba(0,0,0,.25)}
#hud{position:absolute;top:0;left:0;right:0;padding:10px 14px;pointer-events:none;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.45)}
.brand{font-weight:900;font-size:22px;letter-spacing:.5px}
.brand small{display:block;font-size:11px;letter-spacing:2px;opacity:.9}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.stats span{background:rgba(20,40,20,.55);border:2px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 12px;font-weight:700;font-size:15px}
#status{margin-top:8px;display:inline-block;background:rgba(20,40,20,.65);border-radius:10px;padding:5px 12px;font-size:15px;font-weight:600}
#bossbar{margin-top:8px;max-width:420px;background:rgba(60,10,10,.65);border-radius:10px;padding:6px 12px}
#bossbar .bar{height:12px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden;margin-top:4px}
#bossfill{height:100%;width:100%;background:linear-gradient(90deg,#ff5252,#ff9800);transition:width .25s}
#bossname{font-weight:900;letter-spacing:1px;font-size:14px}
#banner{position:absolute;top:22%;left:50%;transform:translateX(-50%);background:rgba(20,40,20,.8);color:#ffe082;font-size:30px;font-weight:900;letter-spacing:1px;padding:12px 28px;border-radius:16px;border:3px solid #ffe082;text-align:center;pointer-events:none;z-index:5}
.overlay{position:absolute;inset:0;background:rgba(10,30,15,.55);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.hidden{display:none!important}
.dialog{background:linear-gradient(180deg,#fff8e1,#ffecb3);border:4px solid #6d4c41;border-radius:20px;max-width:520px;width:100%;padding:26px 28px;text-align:center;color:#3e2723;box-shadow:0 18px 50px rgba(0,0,0,.5);max-height:92vh;overflow:auto}
.dialog .eyebrow{font-size:12px;letter-spacing:3px;font-weight:800;color:#8d6e63}
.dialog h1{font-size:44px;letter-spacing:1px;color:#4e342e;margin:6px 0}
.dialog h2{font-size:28px;color:#4e342e;margin:6px 0 12px}
.dialog .story{font-size:16px;line-height:1.45;margin:8px 0 14px}
.dialog label{display:block;font-weight:700;margin-bottom:4px;text-align:left}
.dialog input{width:100%;padding:10px 12px;font-size:17px;border:2px solid #a1887f;border-radius:10px;margin-bottom:14px;font-family:inherit}
.dialog button{background:linear-gradient(180deg,#66bb6a,#388e3c);color:#fff;border:none;border-bottom:5px solid #1b5e20;font-size:19px;font-weight:900;letter-spacing:1px;padding:12px 26px;border-radius:12px;cursor:pointer}
.dialog button:active{transform:translateY(3px);border-bottom-width:2px}
.dialog .small{font-size:12.5px;color:#6d4c41;margin-top:12px;line-height:1.4}
#upgrade-cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.upcard{background:#fff;border:3px solid #ffb300;border-radius:14px;padding:14px 12px;width:150px;cursor:pointer;font-family:inherit;transition:transform .1s}
.upcard:hover{transform:scale(1.05)}
.upcard .ico{font-size:34px}
.upcard .t{display:block;font-weight:900;font-size:16px;color:#4e342e;margin:6px 0 4px}
.upcard .d{display:block;font-size:12.5px;color:#6d4c41;line-height:1.35}
#controls{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:14px;justify-content:center;color:#fff;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;flex-wrap:wrap}
#mobile-controls{display:none;position:absolute;bottom:44px;left:0;right:0;justify-content:space-between;padding:0 12px;z-index:6}
#mobile-controls .pad{display:grid;grid-template-columns:repeat(3,52px);gap:4px}
#mobile-controls .pad button:nth-child(1){grid-column:1;grid-row:2}
#mobile-controls .pad button:nth-child(2){grid-column:2;grid-row:1}
#mobile-controls .pad button:nth-child(3){grid-column:2;grid-row:2}
#mobile-controls .pad button:nth-child(4){grid-column:3;grid-row:2}
#mobile-controls button{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(20,40,20,.5);color:#fff;font-size:15px;font-weight:800}
#mobile-controls .actions{display:flex;flex-direction:column;gap:6px}
#mobile-controls .actions button{width:64px;height:44px;border-radius:12px;font-size:12px}
@media (pointer:coarse){#mobile-controls{display:flex}#controls{display:none}}