* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:#8ec9e8; }
body { font-family:"Arial Rounded MT Bold","Trebuchet MS",Verdana,sans-serif; color:#fff; }
canvas#game { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; }

/* ---------- screens ---------- */
.screen {
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 35%, rgba(40,90,50,.35), rgba(10,25,40,.72));
}
.titlebox { text-align:center; animation:pop .5s ease; }
.logo {
  font-size: clamp(56px,10vw,110px); letter-spacing:4px; color:#ffe9a8;
  text-shadow: 0 5px 0 #b06a20, 0 10px 0 #7c4a12, 0 16px 24px rgba(0,0,0,.5);
}
.logo span { color:#ffd23e; }
.subtitle { font-size:22px; color:#eafff0; text-shadow:0 2px 6px rgba(0,0,0,.6); margin-top:2px; }
.titlesheep { margin:18px auto 4px; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.menu { margin-top:18px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.toggles { display:flex; gap:10px; }
.tog {
  background:#3d2c1c; color:#ffe9a8; border:3px solid #ffe9a8; border-radius:20px;
  padding:6px 14px; font-size:14px;
}
.bigbtn {
  display:block; margin:10px auto 0; padding:14px 42px; font-size:24px; letter-spacing:2px;
  background:linear-gradient(#ffd23e,#ffaa22); color:#5a3210; border:none; border-radius:32px;
  box-shadow:0 6px 0 #b06a20, 0 10px 18px rgba(0,0,0,.4); transition:transform .08s;
}
.bigbtn:hover { transform:scale(1.06); }
.bigbtn:active { transform:translateY(4px); box-shadow:0 2px 0 #b06a20; }

.panelbox {
  background:linear-gradient(#5b8c3e,#3f6b2c); border:5px solid #8a5a2b; border-radius:24px;
  padding:28px 40px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.55);
  max-width:min(92vw,860px); animation:pop .35s ease;
}
.panelbox.wide { max-width:min(94vw,980px); }
.panelbox h2 { font-size:36px; color:#ffe9a8; text-shadow:0 3px 0 #2c4a1c; margin-bottom:14px; }
@keyframes pop { from { transform:scale(.7); opacity:0 } to { transform:scale(1); opacity:1 } }

/* ---------- help ---------- */
.helpgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; text-align:left; margin-bottom:14px; }
.helpgrid div { display:flex; gap:10px; align-items:baseline; }
.helpgrid b { color:#ffe9a8; min-width:120px; }
.helps { text-align:left; font-size:16px; line-height:1.45; color:#f2ffe8; }
.helps p { margin:6px 0; }

/* ---------- breed select ---------- */
#breedGrid { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.breedcard {
  width:190px; background:#fdf6e4; border:4px solid #8a5a2b; border-radius:18px; padding:10px 8px 12px;
  color:#5a3210; cursor:pointer; transition:transform .1s; text-align:center;
}
.breedcard:hover { transform:scale(1.07); }
.breedcard.sel { border-color:#ffd23e; box-shadow:0 0 0 3px #ffd23e; }
.breedcard.locked { opacity:.55; cursor:not-allowed; }
.breedcard h3 { font-size:18px; margin-bottom:2px; }
.breedcard .tag { font-size:12px; color:#8a5a2b; margin-bottom:6px; min-height:16px; }
.breedcard svg { filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.statrow { display:flex; align-items:center; gap:6px; font-size:11px; margin-top:3px; }
.statrow label { width:52px; text-align:right; color:#7c4a12; }
.statbar { flex:1; height:9px; background:#e0d3b8; border-radius:5px; overflow:hidden; }
.statbar i { display:block; height:100%; background:#6cb33c; border-radius:5px; }
.locknote { margin-top:14px; color:#eaffd8; font-size:14px; }

/* ---------- complete / victory ---------- */
#completeStars { font-size:54px; letter-spacing:14px; color:#5a3210; text-shadow:0 3px 0 #2c4a1c; }
#completeStars span { color:#8a7a55; transition:color .3s; }
#completeStars span.on { color:#ffd23e; text-shadow:0 0 18px #ffdf6e, 0 3px 0 #b06a20; }
#completeStats { margin:12px 0; font-size:18px; color:#f2ffe8; }
#victoryStars { font-size:28px; color:#ffe9a8; margin-bottom:8px; }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
#panel {
  position:absolute; top:14px; left:14px; background:rgba(20,40,15,.55); border:2px solid rgba(255,233,168,.6);
  border-radius:16px; padding:8px 14px; min-width:150px; backdrop-filter:blur(2px);
}
#levelName { font-size:17px; color:#ffe9a8; }
#timer { font-size:26px; color:#fff; }
.pillrow { display:flex; align-items:center; gap:5px; font-size:16px; margin-top:2px; }
.sheepdot { width:12px; height:12px; border-radius:50%; background:#f4f1ea; border:2px solid #4a445c; display:inline-block; }
#bossPanel { margin-top:6px; }
#bossName { font-size:13px; color:#ff9c8a; }
#bossBar { width:150px; height:10px; background:#3a1a1a; border-radius:6px; overflow:hidden; }
#bossFill { height:100%; width:0%; background:linear-gradient(#ff7a59,#c92f2f); border-radius:6px; transition:width .2s; }

#minimap {
  position:absolute; top:14px; right:14px; border-radius:14px;
  background:rgba(20,40,15,.55); border:2px solid rgba(255,233,168,.6);
}

#bottombar { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:18px; }
.meterwrap { text-align:center; }
.meterlabel { font-size:11px; color:#ffe9a8; text-shadow:0 1px 2px #000; margin-bottom:2px; }
.meter { width:130px; height:12px; background:rgba(10,20,8,.6); border:2px solid rgba(255,233,168,.6); border-radius:8px; overflow:hidden; }
.meter > div { height:100%; width:100%; border-radius:6px; }
#barkFill { background:#ffd23e; width:0%; }
#staminaFill { background:#6cc7ff; }

#toast {
  position:absolute; top:18%; left:50%; transform:translateX(-50%);
  background:rgba(20,40,15,.75); border:2px solid rgba(255,233,168,.7); border-radius:22px;
  padding:9px 22px; font-size:19px; color:#ffe9a8; opacity:0; transition:opacity .3s; max-width:80vw; text-align:center;
}
#banner { position:absolute; top:26%; left:50%; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .5s; }
#bannerTitle { font-size:44px; color:#ffe9a8; text-shadow:0 4px 0 #2c4a1c, 0 8px 18px rgba(0,0,0,.6); }
#bannerHint { font-size:19px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.8); margin-top:4px; }
#pauseHint { position:absolute; bottom:6px; right:12px; font-size:12px; color:rgba(255,255,255,.75); text-shadow:0 1px 2px #000; }

#loading {
  position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:#2c4a1c; color:#ffe9a8; font-size:30px; letter-spacing:2px;
}