:root{font-family:Nunito,system-ui,sans-serif;color:#fff5d5;background:#123835;font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;width:100%}body{min-height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.game-shell{width:100vw;height:100vh;min-height:460px;position:relative;background:#123835;display:grid;place-items:center}canvas{display:block;width:min(100vw,1280px);height:min(100vh,720px);aspect-ratio:16 / 9;image-rendering:auto}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.topbar{position:absolute;top:0;left:50%;transform:translate(-50%);width:min(100%,1180px);display:grid;grid-template-columns:1fr 100px 1fr;gap:18px;padding:18px 22px 0}.team{background:#133632e6;border:2px solid rgba(255,245,213,.18);border-radius:18px;padding:10px 14px 12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;box-shadow:0 8px 24px #00000024}.team-cow{border-color:#76dae173}.team-sheep{border-color:#f6bd7673}.team-name{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;white-space:nowrap}.ai-difficulty{color:#ffe3a7;font-size:11px;font-weight:800}.team-sheep .team-name{justify-content:flex-end}.badge{width:28px;height:28px;display:inline-grid;place-items:center;border-radius:50%;color:#163d39;font-weight:900}.cow-badge{background:#84e2df}.sheep-badge{background:#f6bd76}.health{height:13px;border-radius:99px;overflow:hidden;background:#355d54;border:1px solid rgba(255,255,255,.18)}.health-fill{height:100%;transition:width .15s linear}[data-health=cow]{background:#72d9df}[data-health=sheep]{background:#f0a96f}.health-number{min-width:28px;text-align:right;font-size:15px;font-weight:900}.preview{grid-column:1 / -1;display:flex;justify-content:center;gap:6px;min-height:34px}.preview-item{min-width:63px;padding:4px 7px;border-radius:9px;background:#ffffff14;display:flex;align-items:center;gap:4px;font-size:11px;opacity:.7}.preview-item.next{opacity:1;background:#ffffff29;outline:2px solid rgba(255,245,213,.45)}.mini-animal{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:900}.mini-animal.cow{background:#84e2df;color:#173e3b}.mini-animal.sheep{background:#f6bd76;color:#4d3225}.mini-type{flex:1}.preview-item b{color:#fff4bd}.cooldown{grid-column:1 / -1;height:18px;display:flex;align-items:center;gap:8px;overflow:visible}.cooldown-track{flex:1;height:5px;border-radius:4px;overflow:hidden;background:#ffffff1f}.cooldown-track>div{height:100%;width:100%;transition:width .1s linear}[data-cooldown=cow]{background:#72d9df}[data-cooldown=sheep]{background:#f0a96f}.cooldown-state{min-width:52px;color:#fff5d5b8;font-size:10px;font-weight:900;text-align:right;opacity:0;transform:translate(3px);transition:opacity .16s ease,transform .16s ease;white-space:nowrap}.cooldown.ready .cooldown-state,.cooldown.queued .cooldown-state{opacity:1;transform:translate(0)}.cooldown.ready .cooldown-track{box-shadow:0 0 0 1px #9cffd35c,0 0 10px #76edc2e6;animation:cooldown-pulse 1.15s ease-in-out infinite}.cooldown.ready [data-cooldown]{background:#9dffd3}.cooldown.ready .cooldown-state{color:#b8ffdb;text-shadow:0 0 7px rgba(118,237,194,.9)}.cooldown.queued .cooldown-state{color:#ffe3a7}.cooldown.queued .cooldown-track{box-shadow:0 0 7px #ffd17e80}@keyframes cooldown-pulse{0%,to{opacity:.72}50%{opacity:1}}.center-controls{display:flex;align-items:flex-start;justify-content:center;gap:8px;pointer-events:auto}.icon-btn{width:40px;height:40px;border:0;border-radius:13px;color:#fff5d5;background:#133632db;font-size:19px;font-weight:900;cursor:pointer;box-shadow:0 5px 14px #00000024}.icon-btn:hover{background:#275d55}.bottom-hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);color:#fff5d5b8;font-size:12px;display:flex;gap:10px;align-items:center}.key-pill{border:1px solid rgba(255,255,255,.3);padding:3px 7px;border-radius:6px}.result{position:absolute;top:103px;left:50%;transform:translate(-50%);font-size:18px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.25)}.start-card{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);min-width:310px;padding:28px 36px 32px;border-radius:22px;text-align:center;background:#133632ed;border:1px solid rgba(255,245,213,.2);box-shadow:0 18px 50px #0000003d}.start-card h1{margin:0 0 20px;font-size:34px}.difficulty-picker{margin:0 0 20px;padding:0;border:0}.difficulty-picker legend{margin:0 auto 10px;font-size:13px;color:#fff5d5c2}.difficulty-picker label{display:inline-flex;align-items:center;gap:4px;margin:0 4px;color:#fff5d5;font-size:13px;cursor:pointer}.difficulty-picker input{accent-color:#72d9df}.difficulty-picker p{min-height:18px;margin:10px 0 0;color:#ffe3a7;font-size:12px}.start-card button{border:0;border-radius:12px;padding:12px 34px;background:#72d9df;color:#173e3b;font:inherit;font-weight:900;cursor:pointer}.start-card button:hover{transform:translateY(-1px)}@media(max-width:700px){.topbar{padding:8px 8px 0;grid-template-columns:1fr 58px 1fr;gap:5px}.team{padding:6px;border-radius:12px;gap:4px}.team-name{font-size:12px}.badge{width:22px;height:22px}.preview-item{min-width:43px;padding:3px;font-size:9px}.mini-animal{width:17px;height:17px;font-size:9px}.health-number{font-size:12px;min-width:20px}.center-controls{gap:3px}.icon-btn{width:27px;height:27px;border-radius:8px;font-size:13px}.result{top:78px;font-size:15px}.bottom-hint{display:none}}