/* Font is loaded via <link> in index.html (see notes), not @import, which blocks rendering. */
:root {
  color-scheme: dark;
  --bg: #101a2c;
  --panel: #1a2941;
  --text: #f7f8ff;
  --muted: #aab8d0;
  --yellow: #ffd45a;
  --mint: #9ce8c3;
  --line: rgba(255,255,255,.1);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text);
  background: radial-gradient(ellipse at 50% -10%, #2a4265 0, #17253c 38%, var(--bg) 76%);
  font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* viewport-fit=cover is set, so keep content clear of the notch and home indicator. */
.app {
  width: min(100%, 560px); margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark { display:grid; place-items:center; width:47px; height:47px; border-radius:16px; font-size:25px; background:linear-gradient(145deg,#ffe58b,#ffb84d); box-shadow:0 5px 0 #b97836; }
h1 { font-size:25px; line-height:1; letter-spacing:-.8px; margin:0 0 5px; font-weight:900; }
h1 span { color:var(--yellow); }
.brand p { color:var(--muted); margin:0; font-size:12px; font-weight:700; }
.icon-button { width:44px; height:44px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:white; font-size:18px; }
.scorebar { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.score-card { padding:10px 14px 11px; border:1px solid var(--line); background:linear-gradient(135deg,#223653,#1a2941); border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.score-card span { font-size:11px; color:var(--muted); letter-spacing:1.1px; font-weight:900; }
.score-card strong { font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; }
.best-card strong { color:var(--yellow); }
.game-shell { padding:11px; border:1px solid var(--line); border-radius:23px; background:rgba(26,41,65,.92); box-shadow:0 14px 35px rgba(0,0,0,.2); }
.game-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:2px 5px 10px; min-height:48px; }
.next-animal { display:flex; align-items:center; gap:8px; }
.tiny-label { color:var(--muted); font-size:11px; font-weight:900; letter-spacing:1px; }
.next-emoji { display:grid; place-items:center; width:37px; height:37px; border-radius:13px; background:#2a405f; font-size:25px; box-shadow:inset 0 0 0 1px var(--line); }
.hint { color:var(--muted); font-size:12px; text-align:right; line-height:1.5; }
.hint b { color:#fff; }

/* Merged duplicate .game-area rules. JS sizes the canvas from clientWidth (max 320). */
.game-area {
  position:relative; width:100%; max-width:320px; margin-inline:auto; overflow:hidden;
  border-radius:15px; border:2px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg,#8bd8f4 0%,#c4f0f6 56%,#e5f6d5 100%);
  touch-action:pan-y;
}
.game-area::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.4; background:radial-gradient(ellipse at 15% 20%,#fff 0 3%,transparent 3.5%),radial-gradient(ellipse at 85% 12%,#fff 0 4%,transparent 4.5%),linear-gradient(180deg,transparent 78%,rgba(67,150,105,.16) 78%); }
#gameCanvas { position:relative; z-index:1; display:block; touch-action:none; user-select:none; -webkit-user-select:none; }
.drop-line { position:absolute; z-index:2; top:0; left:0; width:100%; height:2px; background:rgba(255,255,255,.65); pointer-events:none; }
.drop-guide { position:absolute; z-index:2; top:0; bottom:0; left:50%; border-left:2px dashed rgba(255,255,255,.34); pointer-events:none; transform:translateX(-1px); }

.game-controls { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 2px 0; }
.legend { color:var(--muted); font-size:11px; font-weight:700; display:flex; align-items:center; gap:6px; }
.legend-dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(156,232,195,.12); }
.secondary-button { min-height:40px; border:1px solid var(--line); color:#edf3ff; background:#273b59; border-radius:11px; padding:8px 14px; font-size:12px; font-weight:900; }
.secondary-button:active { transform:translateY(1px); }
.progress-panel { margin-top:21px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:11px; }
.eyebrow { font-size:11px; color:var(--mint); letter-spacing:1.5px; font-weight:900; }
.section-heading h2 { font-size:18px; letter-spacing:-.4px; margin:2px 0 0; }
.count-pill { background:#273b59; border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--yellow); font-size:11px; font-weight:900; }
.animal-collection { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.animal-tile { min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px 7px; border:1px solid var(--line); background:rgba(26,41,65,.75); border-radius:13px; transition:opacity .25s; }
.animal-tile .animal-icon { font-size:27px; line-height:1.2; filter:drop-shadow(0 2px 0 rgba(0,0,0,.12)); }
.animal-tile .animal-name { color:#d8e3f4; font-size:11px; font-weight:800; text-align:center; }
.animal-tile.locked { opacity:.35; filter:grayscale(1); }
footer { display:flex; justify-content:space-between; gap:10px; color:#8fa1bd; font-size:11px; margin-top:22px; padding:0 3px; }
footer span:first-child { color:#c9d6e9; font-weight:900; }

.game-over { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:18px; background:rgba(12,24,41,.65); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.game-over.hidden { display:none; }
.game-over-card { width:min(100%,280px); padding:22px 18px; text-align:center; border-radius:23px; border:1px solid rgba(255,255,255,.18); background:#1b2c46; box-shadow:0 15px 45px rgba(0,0,0,.3); }
.game-over-animal { font-size:53px; margin-bottom:5px; }
.game-over-card h2 { font-size:21px; line-height:1.2; margin:0 0 8px; }
.game-over-card p { margin:0 0 17px; color:var(--muted); font-size:14px; }
.game-over-card p strong { color:var(--yellow); font-size:19px; }
.game-over-card .secondary-button { width:100%; }
.primary-button { width:100%; border:0; border-radius:13px; padding:12px 15px; color:#263047; background:linear-gradient(180deg,#ffe37b,#ffc83e); font-weight:900; box-shadow:0 4px 0 #b98424; }
.primary-button:active { transform:translateY(2px); box-shadow:0 2px 0 #b98424; }
.toast { position:fixed; z-index:10; left:50%; bottom:max(22px, env(safe-area-inset-bottom)); transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:10px 15px; border-radius:12px; background:#0d1929; border:1px solid var(--line); color:white; font-size:13px; font-weight:800; transition:opacity .2s, transform .2s; box-shadow:0 8px 25px #0004; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (min-width:520px) {
  .brand p { font-size:13px; }
  .game-shell { padding:14px; }
  .animal-collection { gap:9px; }
  .animal-tile { padding:10px 3px; }
  .animal-tile .animal-icon { font-size:31px; }
}
@media (max-width:360px) {
  .app { padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); }
  h1 { font-size:22px; }
  .brand-mark { width:42px; height:42px; }
  .score-card { padding:9px 10px; }
  .score-card strong { font-size:19px; }
  .animal-tile .animal-icon { font-size:23px; }
  .animal-tile .animal-name { font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Hand-drawn animal portraits */
.animal-icon img, .next-emoji img { display:block; width:1.3em; height:1.3em; pointer-events:none; user-select:none; -webkit-user-select:none; }
.next-emoji { font-size:25px; }

.hidden { display:none !important; }

html, body { overscroll-behavior:none; }