@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fredoka:wght@500;600;700&display=swap');

:root{font-family:'DM Sans',Avenir,system-ui,sans-serif;color:#274634;background:#8fc5ae;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button{font:inherit;cursor:pointer}
#game,#scene{position:fixed;inset:0;overflow:hidden}
#scene canvas{display:block;width:100%;height:100%}
.sun-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 74% 10%,rgba(255,244,184,.28),transparent 36%),linear-gradient(to bottom,rgba(250,245,200,.09),transparent 30%)}
.hidden{display:none!important}
.hud{position:absolute;top:22px;left:25px;right:25px;z-index:5;display:flex;gap:10px;align-items:flex-start;pointer-events:none}
.hud-group,.icon-button,.mini-card,.breed-badge{background:rgba(255,254,239,.92);box-shadow:0 8px 28px rgba(32,73,51,.15),inset 0 1px rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.72);backdrop-filter:blur(12px)}
.hud-group{height:67px;border-radius:19px;padding:11px 17px;display:flex;align-items:center;gap:12px;min-width:122px}
.hud-group strong{display:block;font-family:Fredoka,system-ui,sans-serif;font-size:22px;line-height:1;color:#264a32;white-space:nowrap}
.hud-group small,.breed-badge small{display:block;margin-top:6px;font-size:9px;font-weight:800;letter-spacing:.13em;color:#7a947c;white-space:nowrap}
.hud-level{min-width:224px;gap:13px;padding-left:12px}
.hud-level .level-number{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#daedbd;color:#4b7c42;font-family:Fredoka,sans-serif;font-size:24px;font-weight:700}
.hud-level-text strong{font-size:18px}
.hud-icon{font-family:Fredoka,sans-serif;font-size:30px;line-height:1;color:#6ca557}
.sheep-icon{width:33px;height:33px;border:7px dotted #7aaa61;border-radius:50%;font-size:0}
.hud-hearts{min-width:104px;display:block;text-align:center}
.hud-hearts strong{font-family:inherit;font-size:19px;color:#e77865;letter-spacing:1px;margin-top:1px}
.icon-button{pointer-events:auto;border-radius:17px;width:54px;height:54px;color:#4e7355;font-family:Fredoka,sans-serif;font-size:27px;border:1px solid rgba(255,255,255,.8)}
.icon-button:hover{transform:translateY(-2px);background:white}
#sound-button{margin-left:auto}
.side-panel{position:absolute;z-index:4;right:26px;top:105px;width:194px;display:grid;gap:10px;pointer-events:none}
.mini-card{padding:11px;border-radius:21px}
.mini-heading,.mini-legend{display:flex;justify-content:space-between;align-items:center;color:#5d795d;font-size:9px;letter-spacing:.13em;font-weight:800}
.mini-heading{padding:4px 4px 9px}
.mini-compass{color:#94aa8d}
#minimap{display:block;width:100%;height:auto;border-radius:13px;background:#a9cc7a}
.mini-legend{padding:10px 1px 2px;gap:4px;letter-spacing:.02em;font-size:8px}
.mini-legend span{display:flex;align-items:center;gap:3px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%}.dog-dot{background:#ef7e55}.flock-dot{background:white;border:1px solid #c9c9b4}.pen-dot{background:#d9a360}
.breed-badge{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:17px}
.breed-badge>span:first-child{display:grid;place-items:center;background:#f6d299;border-radius:12px;width:35px;height:35px;color:#815332;font-size:22px}.breed-badge strong{font-family:Fredoka,sans-serif;font-size:14px}.breed-badge small{font-size:7px;margin-top:3px}
.bottom-hint{position:absolute;left:50%;bottom:23px;z-index:4;transform:translateX(-50%);display:flex;gap:24px;align-items:center;padding:9px 17px;background:rgba(34,64,45,.72);border:1px solid rgba(255,255,255,.2);border-radius:16px;color:#fff9dc;font-size:10px;font-weight:800;letter-spacing:.13em;white-space:nowrap;box-shadow:0 8px 25px #1d4c3440}
.bottom-hint span{display:flex;gap:4px;align-items:center}.bottom-hint kbd{font-family:inherit;font-size:12px;min-width:20px;line-height:21px;text-align:center;padding:0 5px;border-radius:5px;background:#f7f4d6;color:#4c6b4f;box-shadow:0 2px #b8c5a6}
.screen-overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:linear-gradient(90deg,rgba(20,48,42,.65),rgba(27,60,46,.32) 52%,rgba(22,50,42,.28));backdrop-filter:blur(5px);overflow:auto}
.menu-shell{width:min(710px,100%);text-align:center;color:#fff9e4;padding:24px 0 15px;filter:drop-shadow(0 10px 30px rgba(26,46,28,.12))}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:14px;color:#f9e3b2;font-size:10px;font-weight:800;letter-spacing:.24em}.eyebrow-line{width:37px;height:1px;background:#f7dca8;opacity:.75}
h1,h2{font-family:Fredoka,system-ui,sans-serif;margin:0;line-height:.84;letter-spacing:-.055em}
h1{font-size:clamp(72px,10vw,116px);font-weight:700;text-shadow:0 7px 0 rgba(47,94,54,.6),0 16px 25px rgba(19,43,30,.35);margin:17px 0 24px;color:#fff4c9;position:relative}
h1 span:not(.title-paw){font-size:.37em;letter-spacing:.01em;color:#ffd07b;vertical-align:20%;margin:0 3px}
.title-paw{font-size:.38em;color:#ffc479;display:inline-block;transform:rotate(-13deg) translate(2px,-30px);text-shadow:none}
.menu-lead{font-family:Fredoka,sans-serif;font-size:20px;line-height:1.28;margin:0 0 25px;color:#fffceb;text-shadow:0 2px 12px #25472f99}
.breed-picker{background:rgba(251,248,223,.96);border:1px solid #fffdf0;border-radius:27px;padding:19px 19px 20px;color:#31543a;box-shadow:0 15px 0 rgba(38,88,55,.33),0 25px 50px rgba(21,48,29,.25)}
.picker-title{display:flex;justify-content:space-between;align-items:center;margin:0 4px 13px;font-size:11px;letter-spacing:.16em;font-weight:800}.picker-hint{font-size:10px;letter-spacing:0;color:#809783;font-weight:600}
.breed-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.breed-card{text-align:left;border:2px solid #dce8d2;background:#fffdf1;color:#32533c;border-radius:17px;padding:14px 15px 12px;min-height:158px;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 4px 0 #dbe8d1}
.breed-card:hover{transform:translateY(-3px)}.breed-card.selected{border-color:#efab65;background:#fff8e6;box-shadow:0 5px 0 #e3ad76,0 8px 18px #efbd832c;transform:translateY(-2px)}
.breed-mark{font-size:29px;display:block;line-height:1;color:#a36d39;margin-bottom:5px}.collie-mark{color:#2e4542}.aussie-mark{color:#ce8e62}.guardian-mark{color:#ac723d}
.breed-card strong{font-family:Fredoka,sans-serif;display:block;font-size:18px;line-height:1.05}.breed-card small{display:block;font-size:8px;letter-spacing:.13em;font-weight:800;color:#8ea18b;margin:6px 0 10px}.trait{display:block;height:6px;background:#e4ebd7;border-radius:9px;overflow:hidden}.trait i{display:block;height:100%;background:#75aa6c;border-radius:9px}.breed-card em{display:block;font-style:normal;font-size:10px;color:#68806c;margin-top:7px}
.primary-button,.secondary-button{display:inline-flex;justify-content:center;align-items:center;gap:22px;border:0;border-radius:15px;height:53px;padding:0 29px;font-weight:800;font-size:13px;letter-spacing:.11em;transition:transform .15s,filter .15s}.primary-button{background:#ef9861;color:#fffaf0;box-shadow:0 6px 0 #b65e3d,0 13px 22px #2b442836}.primary-button:hover,.secondary-button:hover{transform:translateY(-3px);filter:brightness(1.04)}.primary-button:active,.secondary-button:active{transform:translateY(2px)}.primary-button span{font-size:22px;line-height:1}.menu-shell>.primary-button{margin-top:28px;min-width:226px}.menu-foot{display:flex;justify-content:center;gap:25px;margin-top:24px;font-size:9px;font-weight:700;letter-spacing:.1em;color:#e9e8d1}.menu-foot b{color:#fff;letter-spacing:.1em}
.modal-card{width:min(440px,95vw);border:1px solid white;background:#fffdf0;color:#35533c;text-align:center;border-radius:30px;padding:27px 29px 30px;box-shadow:0 15px 0 #3f7b5866,0 24px 70px #193e3066}
.modal-illustration{margin:-5px auto 6px;width:70px;height:70px;display:grid;place-items:center;background:#f7d78d;border-radius:50%;color:#b66b3f;font-size:40px;box-shadow:0 5px 0 #e5bb77}.modal-kicker{font-size:10px;letter-spacing:.2em;color:#e29a5e;font-weight:800;margin:19px 0 10px}.modal-card h2{font-size:46px;line-height:1;color:#385d3f}.modal-card>p:not(.modal-kicker){font-size:13px;color:#78907a;margin:12px 0 5px}.result-stars{font-size:36px;color:#efb650;letter-spacing:.08em;margin:10px 0}.result-stats{display:flex;justify-content:space-around;border-top:1px solid #e7eddd;border-bottom:1px solid #e7eddd;padding:16px 0;margin:13px 0 23px}.result-stats small{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;color:#9aaf98}.result-stats strong{display:block;font-family:Fredoka,sans-serif;font-size:18px;margin-top:5px}.modal-actions{display:flex;gap:10px}.modal-actions button{flex:1;white-space:nowrap}.secondary-button{background:#e6eddb;color:#557357;box-shadow:0 5px 0 #bbcdb6}.pause-card{padding:40px 28px}.pause-card h2{margin-bottom:15px}.pause-card .modal-actions{margin-top:27px}
.level-flash{position:absolute;z-index:7;left:50%;top:115px;transform:translateX(-50%);font-family:Fredoka,sans-serif;color:#fffbea;text-align:center;text-shadow:0 3px 15px #315e38;pointer-events:none;font-size:35px;white-space:nowrap;animation:flash-in 2.6s ease both}.level-flash small{display:block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.25em;font-weight:800;margin-bottom:3px}.toast,.danger-toast{position:absolute;z-index:6;left:50%;transform:translateX(-50%);top:116px;color:#365940;background:#fff9e6;border:1px solid white;border-radius:20px;padding:12px 20px;font-size:13px;font-weight:800;box-shadow:0 8px 22px #25463340;white-space:nowrap}.danger-toast{top:auto;bottom:78px;background:#fff1d7;color:#aa5e3f;animation:pulse-alert 1s ease infinite alternate}
@keyframes flash-in{0%{opacity:0;transform:translate(-50%,-16px) scale(.94)}15%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,12px)}}@keyframes pulse-alert{to{transform:translateX(-50%) scale(1.04)}}
.touch-controls{position:absolute;z-index:6;bottom:22px;left:20px;right:20px;display:none;justify-content:space-between;pointer-events:none}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;background:#fff9e4d9;color:#416749;border:2px solid #fff8;border-radius:13px;font-family:Fredoka,sans-serif;font-size:25px;box-shadow:0 4px 0 #42694766}.touch-pad{width:149px;height:132px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}.touch-pad button[data-direction="up"]{grid-column:2;grid-row:1}.touch-pad button[data-direction="left"]{grid-column:1;grid-row:2}.touch-pad button[data-direction="down"]{grid-column:2;grid-row:3}.touch-pad button[data-direction="right"]{grid-column:3;grid-row:2}.touch-bark{align-self:end;width:88px;height:64px;font-size:19px!important;background:#f1ab71e8!important;color:white!important}
@media(max-width:950px){.hud{gap:6px;left:12px;right:12px;top:12px}.hud-group{min-width:auto;padding:8px 10px;height:56px}.hud-level{min-width:175px}.hud-level-text strong{font-size:15px}.hud-group strong{font-size:18px}.hud-icon{font-size:23px}.hud-hearts strong{font-size:16px}.icon-button{height:46px;width:46px}.side-panel{right:12px;top:77px;width:155px}.mini-legend{font-size:7px}}
@media(max-width:690px){.menu-shell{padding:8px 0}h1{font-size:clamp(56px,12vw,82px);margin:15px 0 18px}.menu-lead{font-size:16px}.breed-picker{padding:13px}.picker-title{font-size:9px}.picker-hint{display:none}.breed-cards{gap:6px}.breed-card{padding:10px 7px;min-height:141px}.breed-mark{font-size:22px}.breed-card strong{font-size:14px}.breed-card small{font-size:7px;min-height:17px}.breed-card em{font-size:9px}.menu-foot{gap:8px;font-size:7px;flex-wrap:wrap}.hud{flex-wrap:wrap}.hud-group{height:46px}.hud-level{min-width:156px}.hud-level .level-number{width:34px;height:34px;font-size:18px}.hud-group small{display:none}.hud-count,.hud-timer{min-width:74px}.hud-hearts{min-width:64px}.hud-hearts strong{font-size:14px}.icon-button{height:42px;width:42px}.side-panel{top:auto;bottom:80px;width:130px}.breed-badge{display:none}.bottom-hint{display:none!important}.touch-controls:not(.hidden){display:flex}.level-flash{top:105px;font-size:26px}.toast{top:112px;font-size:11px;max-width:90vw;white-space:normal;text-align:center}.danger-toast{bottom:175px;font-size:10px;max-width:90vw;white-space:normal;text-align:center}}
@media(max-height:720px){.menu-shell{transform:scale(.84);transform-origin:center}.menu-lead{margin-bottom:15px}.menu-shell>.primary-button{margin-top:20px}.menu-foot{margin-top:16px}}