*{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:#101a2d}
html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none}
body{background:#101a2d}
#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(#07101b99,#07101be8);backdrop-filter:blur(4px)}
.card{width:min(92vw,520px);padding:26px;border-radius:26px;background:#15243eef;border:1px solid #ffffff20;box-shadow:0 22px 80px #0008;text-align:center}
.logo{font-size:58px}
h1{margin:.15em 0;font-size:clamp(28px,6vw,44px);line-height:1}
h2{margin:.4em 0 1em}
p{line-height:1.5}
button{display:block;width:100%;margin:9px 0;padding:14px 16px;border:0;border-radius:15px;font:800 17px inherit;cursor:pointer;color:#142033;background:#f1f5f9}
button.primary{background:#ffd84a}
button.danger{background:#ff7b7b}
.small{font-size:13px;opacity:.78}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud-panel{position:absolute;top:12px;left:12px;display:flex;gap:14px;align-items:center;padding:10px 14px;border-radius:17px;background:#07101bcc;font-weight:900}
.objective{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:min(64vw,620px);padding:10px 16px;border-radius:17px;background:#07101bcc;text-align:center;font-weight:800}
.bark-meter{position:absolute;right:12px;top:12px;padding:10px 14px;border-radius:17px;background:#07101bcc;font-size:13px;font-weight:800}
#barkStatus{color:#a9ffb4}
.toast{position:fixed;z-index:40;left:50%;top:18%;transform:translateX(-50%);max-width:80vw;padding:12px 18px;border-radius:16px;background:#07101be6;color:white;font-weight:900;text-align:center}
#mobileControls{position:fixed;z-index:20;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;pointer-events:none}
.joystick{width:145px;height:145px;position:relative;pointer-events:auto;touch-action:none}
.joystick-ring{position:absolute;inset:15px;border-radius:50%;background:#ffffff22;border:2px solid #ffffff44}
.stick{position:absolute;width:62px;height:62px;border-radius:50%;left:41px;top:41px;background:#ffffffbb;box-shadow:0 4px 20px #0004}
.actions{display:grid;grid-template-columns:64px 64px;gap:9px;pointer-events:auto}
.actions button{width:64px;height:64px;margin:0;padding:0;border-radius:50%;font-size:25px;background:#ffffffd9}
.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:#07101bd9;border-radius:14px;font-size:13px;text-align:center}
.high-contrast .objective,.high-contrast .hud-panel,.high-contrast .bark-meter{background:#000;border:2px solid #fff}
@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}}
@media (min-width:851px){#mobileControls{display:none!important}}
@media (orientation:portrait) and (max-width:850px){.rotate-hint{display:block}}