:root { --navy:#102b5b; --sky:#dff7ff; --yellow:#ffd557; --coral:#f26b5b; --cream:#fff9e9; --blue:#1689d4; --green:#55aa5a; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(180deg,#9be2fa 0%,#e5faff 72%); color:var(--navy); font-family:Nunito, "Arial Rounded MT Bold", system-ui, sans-serif; }
button { font:inherit; cursor:pointer; }
.game-shell { max-width:1500px; min-height:100vh; margin:auto; padding:18px clamp(14px,3vw,40px) 24px; }
.topbar { min-height:76px; display:flex; align-items:center; gap:20px; padding:8px 6px 18px; }
.back-link { color:var(--navy); text-decoration:none; font-size:34px; line-height:1; font-weight:900; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-paw { width:40px; height:40px; display:grid; place-items:center; color:#fff; background:var(--coral); border-radius:50% 50% 45% 45%; box-shadow:inset 0 -4px rgba(0,0,0,.1); }
h1 { margin:0; font-size:clamp(28px,4vw,52px); line-height:1; letter-spacing:-1.5px; }
.goal { margin:0; font-size:clamp(16px,2vw,23px); font-weight:800; color:#194781; }
.restart { margin-left:auto; padding:10px 17px; border:2px solid #8ccbe3; border-radius:13px; background:#fff; color:var(--navy); font-weight:800; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px, .38fr); gap:18px; align-items:stretch; }
.map-frame { min-width:0; border:5px solid #fff; border-radius:27px; overflow:hidden; box-shadow:0 9px 0 rgba(27,102,136,.16), 0 20px 35px rgba(32,102,135,.18); background:#61b552; }
.map { position:relative; aspect-ratio:1.65/1; background:#61b552 url("assets/town-map.png") center/cover no-repeat; overflow:hidden; }
.place { position:absolute; z-index:2; padding:5px 11px; border:2px solid #fff; border-radius:10px; background:rgba(16,43,91,.9); color:white; font-size:clamp(11px,1.3vw,16px); font-weight:900; box-shadow:0 3px 0 rgba(0,0,0,.15); }
.bank { left:48%; top:48%; }.park { left:14%; top:25%; }.cinema { left:48%; top:14%; }.shop { left:78%; top:26%; }.bridge { left:13%; top:61%; }.tunnel { left:51%; top:77%; }
.route-guide { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; }.route-guide path { fill:none; stroke:#f35e5c; stroke-width:1.35; stroke-linecap:round; stroke-dasharray:2 1.25; filter:drop-shadow(0 1px 1px rgba(95,0,0,.25)); animation:route-dash .55s linear infinite; }@keyframes route-dash{to{stroke-dashoffset:-3.25}}
.checkpoint-dot { position:absolute; z-index:3; display:none; width:15px; aspect-ratio:1; border:3px solid #fff; border-radius:50%; background:#258ee5; box-shadow:0 2px 0 rgba(5,44,100,.35); transform:translate(-50%,-50%); }
.explorer { position:absolute; z-index:3; left:52%; top:64%; width:clamp(23px,3.5vw,43px); height:auto; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 2px rgba(0,0,0,.32)); transition:left .38s linear, top .38s linear; pointer-events:none; }
.puppy { position:absolute; z-index:3; left:19%; top:14%; font-size:clamp(20px,3vw,38px); filter:drop-shadow(0 3px 1px rgba(0,0,0,.28)); animation:wag 1.3s ease-in-out infinite; }
@keyframes wag { 50% { transform:rotate(-8deg) scale(1.08); } }
.location-toast { position:absolute; z-index:4; bottom:14px; left:50%; transform:translateX(-50%); max-width:75%; padding:8px 14px; border-radius:999px; background:rgba(16,43,91,.9); color:#fff; font-size:14px; font-weight:800; text-align:center; }
.map-footer { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; background:var(--cream); }
.map-footer p { margin:0; font-size:16px; font-weight:800; }.compass { position:relative; display:grid; grid-template-columns:20px 24px 20px; grid-template-rows:18px 24px 18px; place-items:center; width:66px; height:58px; color:var(--navy); font-family:Georgia,serif; font-weight:bold; }.compass b{grid-column:2;grid-row:1;color:#dc3e3e}.compass span:first-of-type{grid-column:1;grid-row:2}.compass span:nth-of-type(2){grid-column:3;grid-row:2}.compass em{grid-column:2;grid-row:3;font-style:normal}.needle{grid-column:2;grid-row:2;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:20px solid #2581be;transform:translateY(-3px)}
.instruction-panel { position:relative; display:flex; flex-direction:column; padding:24px clamp(18px,2vw,32px); border:5px solid #fff; border-radius:27px; background:var(--cream); box-shadow:0 9px 0 rgba(27,102,136,.16), 0 20px 35px rgba(32,102,135,.18); }
.guide-icon { width:62px; height:62px; display:grid; place-items:center; margin-bottom:8px; border-radius:20px; background:#dff4ff; font-size:37px; }.step-label { margin:0 0 7px; color:#4d6d92; font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.08em; } h2 { margin:0 0 15px; font-size:clamp(23px,2.5vw,36px); line-height:1.13; letter-spacing:-.8px; }.listen-button { align-self:flex-start; padding:10px 15px; margin-bottom:17px; border:2px solid #86c9ed; border-radius:13px; background:#e1f6ff; color:var(--navy); font-weight:900; }.choices { display:grid; gap:11px; }.choice { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:2px solid #ead9a4; border-radius:16px; background:#fff; color:var(--navy); text-align:left; font-size:clamp(17px,1.8vw,22px); font-weight:900; transition:transform .15s, border-color .15s, background .15s; }.choice:hover,.choice:focus-visible { transform:translateY(-2px); border-color:#57acd6; outline:none; }.choice-icon { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:11px; color:#fff; background:var(--green); font-size:26px; }.choice[data-choice="left"] .choice-icon{background:#f4a62a}.choice[data-choice="through"] .choice-icon{background:#4bb7a0}.feedback { margin-top:16px; padding:14px; border-radius:15px; background:#fff0d5; color:#714512; font-weight:800; line-height:1.4; }.feedback strong { display:block; color:#d95e3d; margin-bottom:5px; }.feedback button { width:100%; margin-top:10px; padding:10px; border:0; border-radius:10px; background:var(--coral); color:#fff; font-weight:900; }.controls { display:flex; align-items:center; justify-content:center; gap:26px; padding:16px 0 0; }.controls p { margin:0; font-weight:800; }.dpad { display:grid; grid-template-columns:44px 44px 44px; grid-template-rows:40px 40px 40px; gap:3px; }.dpad button { border:0; border-radius:11px; background:#176fbb; color:#fff; font-size:22px; font-weight:900; box-shadow:inset 0 -4px rgba(0,0,0,.16); }.dpad button:hover,.dpad button:focus-visible { background:#0e5b9d; outline:3px solid #ffd557; }.dpad button[data-direction="up"]{grid-column:2}.dpad button[data-direction="left"]{grid-row:2;grid-column:1}.dpad-center{grid-row:2;grid-column:2;background:#74c6f2!important}.dpad button[data-direction="right"]{grid-row:2;grid-column:3}.dpad button[data-direction="down"]{grid-row:3;grid-column:2}
@media (max-width:800px){.game-shell{padding:10px 10px 18px}.topbar{min-height:54px;gap:10px;padding:6px 2px 12px}.back-link{font-size:27px}.brand-paw{width:31px;height:31px}.goal{display:none}.restart{padding:8px 11px}.game-layout{grid-template-columns:1fr;gap:12px}.map-frame,.instruction-panel{border-radius:20px;border-width:3px}.instruction-panel{padding:18px;order:2}.guide-icon{display:none}.step-label{font-size:12px}h2{font-size:24px}.map-footer{min-height:69px;padding:7px 12px}.map-footer p{font-size:13px}.controls{gap:10px;padding-top:12px}.controls p{font-size:13px}.dpad{transform:scale(.88);transform-origin:right center;margin-right:-9px}.place{padding:3px 6px;border-radius:7px;font-size:10px}.location-toast{bottom:7px;font-size:11px;padding:5px 9px}.choice{font-size:17px;padding:9px}.choice-icon{width:35px;height:35px;font-size:21px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.choice[data-choice="right"] .choice-icon { background:#b777d5; }