:root {
  --cream: #fff8df;
  --ink: #17231b;
  --green: #2d703e;
  --green-dark: #163c25;
  --red: #c84a32;
  --gold: #f2c452;
  --glass: rgba(17, 35, 24, 0.78);
  color-scheme: dark;
  font-family: Inter, ui-rounded, "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #172816;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

#gameShell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#9fc6df 0 26%, #568447 26% 100%);
}

#gameCanvas { display: block; width: 100%; height: 100%; }

#hud {
  position: absolute;
  z-index: 20;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  gap: 7px;
  pointer-events: none;
}

.iconButton {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 16px rgba(0,0,0,.25);
  pointer-events: auto;
  cursor: pointer;
}

.glass { background: var(--glass); backdrop-filter: blur(9px); }

#statusBar {
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 5px;
  pointer-events: none;
}

#statusBar > div {
  min-width: 84px;
  min-height: 42px;
  padding: 5px 12px 4px;
  display: flex;
  gap: 7px;
  align-items: baseline;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: var(--glass);
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  backdrop-filter: blur(9px);
}

#statusBar span { font-size: 9px; letter-spacing: .11em; color: #f6deb0; font-weight: 900; }
#statusBar strong { font-size: 17px; line-height: 1; color: #fff; }

#missionBanner {
  position: absolute;
  z-index: 18;
  top: 62px;
  left: 50%;
  min-width: 310px;
  max-width: 560px;
  padding: 9px 22px 10px;
  display: grid;
  text-align: center;
  color: white;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 16px;
  background: rgba(24, 45, 28, .86);
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  transform: translate(-50%, -150%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}

#missionBanner.show { transform: translate(-50%, 0); opacity: 1; }
#missionBanner small { color: var(--gold); font-weight: 900; letter-spacing: .13em; font-size: 10px; }
#missionBanner strong { font-family: Georgia, serif; font-size: clamp(20px, 3vw, 29px); line-height: 1.05; }
#missionBanner span { margin-top: 2px; font-size: 11px; color: #eef4df; }

#controls {
  position: absolute;
  z-index: 22;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(15px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

#joystick {
  position: relative;
  width: min(24vw, 150px);
  aspect-ratio: 1;
  min-width: 102px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  background: radial-gradient(circle, rgba(255,255,255,.04) 0 28%, rgba(10,20,14,.16) 29% 100%);
  box-shadow: inset 0 0 22px rgba(255,255,255,.04), 0 8px 26px rgba(0,0,0,.13);
  pointer-events: auto;
  touch-action: none;
}

#joystick::before, #joystick::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.13);
  border-radius: 10px;
}
#joystick::before { width: 56%; height: 2px; left: 22%; top: calc(50% - 1px); }
#joystick::after { width: 2px; height: 56%; top: 22%; left: calc(50% - 1px); }
#joystickRing { position: absolute; inset: 18%; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; }
#joystickKnob {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  left: 29%;
  top: 29%;
  border-radius: 50%;
  background: rgba(250,253,240,.32);
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 5px 13px rgba(0,0,0,.2);
  transform: translate(0,0);
}

#actionButtons { display: flex; align-items: flex-end; gap: 11px; pointer-events: auto; }
.actionButton {
  width: min(16vw, 108px);
  min-width: 82px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 21px rgba(0,0,0,.3), inset 0 4px 7px rgba(255,255,255,.18);
  color: white;
  font-weight: 1000;
  cursor: pointer;
  touch-action: none;
}
.actionButton span { font-size: clamp(15px, 2.6vw, 21px); }
.actionButton small { margin-top: 1px; font-size: 8px; letter-spacing: .09em; opacity: .85; }
.actionButton.bark { background: linear-gradient(#da7b35, #a94f1c); }
.actionButton.run { background: linear-gradient(#428a50, #235f33); transform: scale(1.08); }
.actionButton.run.running {
  background: linear-gradient(#68b85c, #237038);
  border-color: #fff0a8;
  box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 0 0 6px rgba(242,196,82,.2), inset 0 4px 7px rgba(255,255,255,.23);
}
.actionButton:active, .iconButton:active, .primaryButton:active, .secondaryButton:active { transform: scale(.95); }
.actionButton.run:active { transform: scale(1.02); }

#toast {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 20%;
  max-width: 74vw;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(17,34,22,.9);
  color: white;
  font-size: 13px;
  font-weight: 850;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: .22s ease;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

#edgeArrows { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.edgeArrow {
  position: absolute;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,248,223,.9);
  color: #a33927;
  box-shadow: 0 4px 13px rgba(0,0,0,.3);
  font-size: 23px;
  font-weight: 1000;
}

#buildBadge {
  position: absolute;
  z-index: 21;
  left: 50%;
  bottom: max(7px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 99px;
  background: rgba(9,20,12,.55);
  color: rgba(255,255,255,.75);
  font: 800 9px/1.2 ui-monospace, monospace;
  letter-spacing: .16em;
  pointer-events: none;
}

.gameOverlay {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: none;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(10,25,15,.7);
  backdrop-filter: blur(6px);
  overflow: auto;
  touch-action: pan-y;
}
.gameOverlay.visible { display: grid; }

.overlayCard, .mapCard {
  position: relative;
  width: min(92vw, 760px);
  max-height: 94vh;
  overflow: auto;
  padding: clamp(18px, 4vw, 34px);
  text-align: center;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 25px;
  background: linear-gradient(155deg, rgba(255,253,235,.98), rgba(232,224,187,.98));
  color: var(--ink);
  box-shadow: 0 22px 70px rgba(0,0,0,.42), inset 0 2px 0 white;
}
.overlayCard h2 { margin: 3px 0 8px; font: 900 clamp(27px,5vw,46px)/1 Georgia, serif; color: #21492c; }
.overlayCard p { margin: 8px auto 15px; max-width: 600px; color: #50604f; }
.compactCard { width: min(88vw, 430px); }
.eyebrow { margin: 0 !important; color: #a4492e !important; font-size: 10px; font-weight: 1000; letter-spacing: .15em; }

.primaryButton, .secondaryButton {
  min-width: 170px;
  min-height: 46px;
  padding: 11px 20px;
  margin: 6px 4px 0;
  border-radius: 13px;
  font-weight: 1000;
  letter-spacing: .02em;
  cursor: pointer;
}
.primaryButton { border: 2px solid #184226; background: linear-gradient(#428b4e,#256538); color: white; box-shadow: 0 5px 0 #173d24; }
.secondaryButton { border: 2px solid #88774a; background: rgba(255,250,225,.62); color: #394335; }

#mapScreen { background: radial-gradient(circle at 50% 30%, rgba(233,193,104,.15), transparent 45%), rgba(12,30,17,.84); }
.mapBackdrop { position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(30deg, transparent 0 42px, rgba(255,255,255,.05) 43px 45px); }
.mapCard { width: min(96vw, 1120px); padding: clamp(12px,2.4vw,25px); overflow: hidden; }
.mapBack {
  position: absolute;
  top: 12px;
  left: 13px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(40,67,39,.25);
  border-radius: 10px;
  background: rgba(255,252,229,.8);
  color: #274b30;
  text-decoration: none;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
}
.titleLockup p { margin: 0; font-size: 9px; font-weight: 1000; letter-spacing: .16em; color: #8b4b2b; }
.titleLockup h1 { margin: 2px 0 4px; font: 1000 clamp(25px,4.7vw,51px)/.92 Georgia, serif; color: #183b23; letter-spacing: -.03em; }
.titleLockup h1 span { color: #b7462d; }
.titleLockup .tagline { max-width: none; color: #52604d; letter-spacing: 0; font: 700 clamp(10px,1.6vw,14px)/1.25 Inter, sans-serif; }
.mapLayout { margin-top: 13px; display: grid; grid-template-columns: 1.55fr .7fr; gap: 15px; align-items: stretch; }
.farmMap {
  position: relative;
  min-height: 330px;
  padding: 18px;
  overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(110deg, transparent 0 53%, rgba(99,127,58,.42) 54% 65%, transparent 66%),
    repeating-linear-gradient(80deg, rgba(85,132,57,.09) 0 18px, transparent 19px 37px),
    #9bbc65;
  box-shadow: inset 0 0 0 2px rgba(56,80,39,.28), inset 0 -25px 50px rgba(55,85,42,.13);
}
.farmMap::before { content:""; position:absolute; left:4%; right:4%; bottom:8%; height:17%; background:#7aa7b4; border-radius:50%; transform:rotate(-3deg); box-shadow: inset 0 5px 12px rgba(255,255,255,.2); }
.mapTrail { position: absolute; inset: 9%; border: 16px solid rgba(218,190,129,.76); border-radius: 45% 54% 49% 51%; transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(83,62,39,.25); }
#levelGrid { position: relative; z-index: 2; height: 100%; min-height: 294px; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(3,1fr); gap: 8px; align-items: center; }
.levelPin {
  justify-self: center;
  width: clamp(39px,5vw,56px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 12%;
  border: 3px solid #fff5d3;
  background: #315f38;
  color: white;
  box-shadow: 0 4px 0 #17371f, 0 6px 10px rgba(0,0,0,.25);
  transform: rotate(-45deg);
  font-size: 0;
  cursor: pointer;
}
.levelPin > span { transform: rotate(45deg); font-size: clamp(13px,2vw,18px); font-weight: 1000; }
.levelPin.locked { background:#72786b; filter:saturate(.3); opacity:.76; }
.levelPin.selected { background:#c54d32; box-shadow:0 4px 0 #7d2e20,0 0 0 5px rgba(255,245,203,.55); }
.levelPin .pinStars { position:absolute; display:none; }
.mapDetails { padding: 12px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:20px; background:rgba(255,252,230,.7); box-shadow:inset 0 0 0 1px rgba(86,70,36,.14); }
.dogMedallion { width: 62px; height:62px; display:grid; place-items:center; border-radius:50%; background:#e5ba4e; border:5px solid #fff7d8; box-shadow:0 5px 0 #9a6827; font-size:30px; }
.mapDetails > small { margin-top:12px; color:#a34c30; font-weight:1000; letter-spacing:.14em; }
.mapDetails h2 { margin:3px 0 6px; font:900 clamp(22px,3vw,33px)/1 Georgia,serif; color:#20492c; }
.mapDetails p { margin:0 0 5px; font-size:12px; line-height:1.35; color:#526051; }
.bigStars { font-size:27px; letter-spacing:3px; color:#dda92d; text-shadow:0 2px 0 #9f681d; }

.howCard { width:min(92vw,830px); }
.howGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.howGrid article { padding:13px 10px; display:flex; flex-direction:column; align-items:center; border-radius:15px; background:rgba(255,255,255,.52); box-shadow:inset 0 0 0 1px rgba(45,70,40,.14); }
.howGrid b { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#bf4a31; color:white; }
.howGrid strong { margin-top:7px; color:#255632; }
.howGrid span { margin-top:5px; font-size:11px; line-height:1.32; color:#526051; }
.fairPlay { padding:8px 12px; border-radius:10px; background:#e2edc9; font-size:12px; font-weight:750; }

.resultStars { margin:8px 0; color:#e5ae26; font-size:clamp(40px,8vw,70px); letter-spacing:6px; text-shadow:0 4px 0 #ae7420; }
.resultStats { display:flex; justify-content:center; gap:12px; margin:10px auto; }
.resultStats > div { min-width:110px; padding:8px 14px; display:grid; border-radius:12px; background:rgba(45,97,54,.1); }
.resultStats span { font-size:9px; font-weight:900; letter-spacing:.13em; color:#7a6c48; }
.resultStats strong { font-size:22px; color:#255632; }
.failCard h2 { color:#9a3d2d; }

.endingCard { width:min(88vw,590px); }
.ribbon { width:90px; height:90px; margin:0 auto 5px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#75a9e8,#24599f); color:#f4cf54; border:8px double #d9eaff; box-shadow:0 7px 0 #153d76; font-size:43px; }
.winkChicken { position:relative; margin:3px auto 10px; font-size:54px; }
.winkChicken span { position:absolute; right:calc(50% - 51px); top:0; font-size:22px; }
#confettiCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

#rotateMessage {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 28px;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, #366a42, #142e1c 72%);
  color: white;
}
.rotatePhone { width:54px; height:86px; display:grid; place-items:center; border:4px solid #f5d267; border-radius:11px; font-size:30px; animation:turn 1.8s ease-in-out infinite; }
#rotateMessage strong { font:900 27px/1 Georgia,serif; }
#rotateMessage span { color:#dfead7; }
@keyframes turn { 0%,20%{transform:rotate(0)} 65%,100%{transform:rotate(90deg)} }

body.clean #hud > *:not(#screenButton), body.clean #missionBanner, body.clean #controls, body.clean #buildBadge { opacity:0; pointer-events:none; }
body.clean #screenButton { margin-left:auto; opacity:.4; }

@media (orientation: portrait) and (max-width: 900px) {
  #rotateMessage { display:grid; }
}

@media (max-height: 540px) {
  #hud { top:max(4px,env(safe-area-inset-top)); gap:4px; }
  .iconButton { width:34px; height:34px; min-width:34px; border-radius:9px; font-size:17px; }
  #statusBar > div { min-width:69px; min-height:34px; padding:3px 8px; border-radius:9px; }
  #statusBar span { font-size:7px; }
  #statusBar strong { font-size:14px; }
  #missionBanner { top:43px; padding:5px 15px 6px; }
  #missionBanner strong { font-size:20px; }
  #joystick { width:min(23vh,120px); min-width:92px; }
  .actionButton { width:min(20vh,96px); min-width:72px; }
  #controls { bottom:max(8px,env(safe-area-inset-bottom)); }
  .mapCard { max-height:96vh; padding:9px 14px; }
  .titleLockup .tagline { display:none; }
  .mapLayout { margin-top:5px; }
  .farmMap { min-height:270px; padding:10px; }
  #levelGrid { min-height:250px; }
  .mapDetails { padding:7px; }
  .dogMedallion { width:44px; height:44px; border-width:3px; font-size:21px; }
  .mapDetails > small { margin-top:6px; font-size:8px; }
  .mapDetails h2 { font-size:22px; }
  .mapDetails p { font-size:10px; }
  .bigStars { font-size:20px; }
  .primaryButton,.secondaryButton { min-height:38px; padding:7px 14px; font-size:12px; }
  .howGrid article { padding:7px; }
  .howGrid span { font-size:9px; }
  .overlayCard { padding:14px; }
  .overlayCard h2 { font-size:29px; }
  .overlayCard p { margin:5px auto 8px; }
  .resultStars { font-size:39px; margin:2px; }
}

@media (max-width: 760px) {
  #statusBar > div { min-width:64px; padding-inline:7px; }
  #statusBar span { display:none; }
  .mapLayout { grid-template-columns:1.5fr .75fr; gap:8px; }
  .farmMap { padding:9px; }
  .mapDetails { padding:7px; }
  .mapDetails p { font-size:10px; }
  .howGrid { grid-template-columns:repeat(2,1fr); }
}