*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff;background:#191a2b}
html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none}
body{background:#191a2b}#game{display:block;width:100vw;height:100vh}.hidden{display:none!important}
.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:linear-gradient(#08091699,#080916e8);backdrop-filter:blur(4px)}
.card{width:min(92vw,540px);max-height:92vh;overflow:auto;padding:24px;border-radius:24px;background:#20233eef;border:1px solid #ffffff20;box-shadow:0 22px 80px #0009;text-align:center}
.logo{font-size:54px}h1{margin:.1em 0;font-size:clamp(34px,7vw,52px)}h2{margin:.2em 0 1em}p{line-height:1.45}
button,.level-link{display:block;width:100%;margin:9px 0;padding:14px 16px;border:0;border-radius:15px;font:800 17px inherit;cursor:pointer;color:#171b29;background:#f1f5f9;text-decoration:none}
.primary{background:#ffd84a}.small{font-size:13px;opacity:.78}.howto{margin:14px 0;border:1px solid #ffffff26;border-radius:16px;background:#08091680;text-align:left;overflow:hidden}
.howto summary{padding:13px 15px;cursor:pointer;font-weight:900;text-align:center}.rules{padding:4px 15px 12px}.rules p{margin:8px 0;font-size:14px}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}.hud-panel{position:absolute;top:12px;left:12px;display:flex;gap:14px;padding:10px 14px;border-radius:17px;background:#090b18d8;font-weight:900}
.objective{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:min(64vw,640px);padding:10px 16px;border-radius:17px;background:#090b18d8;text-align:center;font-weight:800}
.bark-meter{position:absolute;top:12px;right:12px;padding:10px 14px;border-radius:17px;background:#090b18d8;font-size:13px;font-weight:800}#barkStatus{color:#a9ffb4}
.toast{position:fixed;z-index:40;left:50%;top:18%;transform:translateX(-50%);max-width:82vw;padding:12px 18px;border-radius:16px;background:#090b18eb;font-weight:900;text-align:center}
#mobileControls{position:fixed;z-index:20;left:14px;right:14px;bottom:max(10px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;pointer-events:none}
.joystick{width:145px;height:160px;position:relative;pointer-events:auto;touch-action:none}.joystick-ring{position:absolute;left:15px;right:15px;top:0;height:115px;border-radius:50%;background:#ffffff22;border:2px solid #ffffff44}
.stick{position:absolute;width:62px;height:62px;border-radius:50%;left:41px;top:26px;background:#ffffffcc;box-shadow:0 4px 20px #0005}.control-label,.action-wrap span{font-size:10px;font-weight:900;text-shadow:0 2px 6px #000;pointer-events:none}
.joystick-label{position:absolute;left:0;right:0;bottom:4px;text-align:center}.actions{display:grid;grid-template-columns:74px 74px;gap:8px;pointer-events:auto}.action-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.actions button{width:68px;height:68px;margin:0;padding:0;border-radius:50%;font-size:25px;background:#ffffffdf;touch-action:none}.actions button.bark{background:#ffd84ae8}
.rotate-hint{display:none;position:fixed;z-index:50;left:50%;top:10px;transform:translateX(-50%);padding:9px 13px;background:#090b18e6;border-radius:14px;font-size:13px}
@media(max-width:850px){#mobileControls:not(.hidden){display:flex}.objective{top:62px;max-width:90vw}.bark-meter{top:112px;right:auto;left:12px}.hud-panel{font-size:14px}.card{padding:20px}}
@media(min-width:851px){#mobileControls{display:none!important}}@media(orientation:portrait) and (max-width:850px){.rotate-hint{display:block}}