html,body{background:#87ceeb;height:100%;margin:0;padding:0;overflow:hidden}canvas{display:block}#hud{text-align:center;color:#fff;text-shadow:0 0 6px #000c;pointer-events:none;font-family:system-ui,sans-serif;font-weight:700;position:absolute;top:20px;left:0;right:0}#hud #time{font-size:36px}#hud #ping{opacity:.9;margin-top:4px;font-size:22px}#ping-alert{text-align:center;color:#ff5050;text-shadow:0 0 10px #000000d9;opacity:0;pointer-events:none;font-family:system-ui,sans-serif;font-size:56px;font-weight:700;position:absolute;top:30%;left:0;right:0}#ping-alert.flash{animation:1.6s ease-out ping-flash}@keyframes ping-flash{0%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(1)}}#stamina{pointer-events:none;background:#0000008c;border:2px solid #fff;border-radius:12px;width:280px;height:18px;position:absolute;bottom:28px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 0 8px #00000080}body.touch-mode #stamina{width:160px;bottom:28px}#stamina-fill{background:linear-gradient(90deg,#6d6,#de4);width:100%;height:100%;transition:width 80ms linear}#hud #foxes{opacity:.9;margin-top:4px;font-size:22px}#start-menu{color:#fff;z-index:100;background:#000000bf;width:100vw;height:100vh;font-family:system-ui,sans-serif;position:fixed;top:0;left:0;overflow:hidden}#start-menu .menu-inner{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#start-menu h1{text-shadow:0 0 12px #000000b3;margin:0;font-size:48px}#start-menu p{opacity:.85;margin:0 0 8px;font-size:18px}#start-menu .role-buttons{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}#start-menu button{color:#16171d;cursor:pointer;background:#fff;border:none;border-radius:12px;flex-direction:column;gap:4px;min-width:180px;padding:14px 24px;font-family:inherit;transition:transform .1s ease-out,box-shadow .1s ease-out;display:flex}#start-menu button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000059}#start-menu .role-title{font-size:22px;font-weight:700}#start-menu .role-sub{opacity:.7;font-size:14px}#overlay{color:#fff;z-index:200;background:#000000a6;flex-direction:column;justify-content:center;align-items:center;gap:24px;font-family:system-ui,sans-serif;display:none;position:absolute;inset:0}#overlay.visible{display:flex}#overlay h1{text-shadow:0 0 8px #0009;margin:0;font-size:64px}#overlay button{color:#16171d;cursor:pointer;background:#fff;border:none;border-radius:10px;padding:14px 28px;font-size:22px;font-weight:700}#overlay button:hover{background:#e5e4e7}#rotate-device{color:#fff;text-align:center;z-index:300;box-sizing:border-box;background:#16171d;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:20px;font-family:system-ui,sans-serif;display:none;position:fixed;inset:0}#rotate-device .rotate-icon{transform-origin:50%;font-size:80px;animation:2s ease-in-out infinite rotate-hint}#rotate-device .rotate-text{font-size:22px;font-weight:700}#rotate-device .rotate-sub{opacity:.7;font-size:14px}@keyframes rotate-hint{0%,40%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}body.touch-mode #rotate-device.show{display:flex}