/* Coco vs Natty · shared look (matches the original Laberinto: sky-blue gradient, Geist, pills, soft shadows) */
:root {
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ink: #1d3b47; --ink2: #3a5561; --teal: #1f5f73; --red: #e0475b; --pink: #ff5f97; --pink-sh: #d9407a;
  --coco: #2b7a94; --natty: #b0436e;
  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-pill: 100px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans); color: var(--ink);
  background: linear-gradient(#cdeefd 0%, #eaf4f7 60%, #c3d9e2 100%) fixed;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, a { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { -webkit-user-drag: none; user-select: none; }

/* Natty: the same bird with a subtle teal tint (Coco is the plain sprite). Canvas code uses the same hue matrix. */
.natty-tint { }

/* top bar used by every new game */
.x-bar {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(var(--st) + 8px) calc(var(--sr) + 10px) 6px calc(var(--sl) + 10px);
}
.x-pill {
  border: 0; background: rgb(255 255 255 / 0.8); color: var(--teal); border-radius: var(--r-pill);
  padding: 9px 15px; min-height: 40px; font: 600 15px/1 var(--sans); box-shadow: 0 2px 10px #1f42371a;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums;
}
.x-pill:active { transform: scale(0.96); }
.x-pill--icon { width: 44px; padding: 0; justify-content: center; font-size: 19px; }
.x-pill--plain { cursor: default; }
.x-pill--plain:active { transform: none; }

.x-btn {
  border: 0; border-radius: var(--r-pill); padding: 14px 26px; min-height: 52px; font: 600 17px/1 var(--sans);
  background: var(--pink); color: #fff; box-shadow: 0 4px 0 var(--pink-sh); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.x-btn--soft { background: #fff; color: var(--teal); box-shadow: 0 4px 0 #b5d3de; }
.x-btn:active { transform: translateY(3px); box-shadow: none; }

/* full-screen overlays */
.x-ov {
  position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(var(--st) + 20px) calc(var(--sr) + 20px) calc(var(--sb) + 20px) calc(var(--sl) + 20px);
  text-align: center; background: rgb(232 243 248 / 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.x-ov.on { display: flex; animation: x-in 0.35s var(--ease-out); }
@keyframes x-in { from { opacity: 0; transform: scale(0.98); } }
.x-ov h1 { font: 600 clamp(34px, 10vw, 56px)/1.05 var(--sans); color: var(--teal); letter-spacing: -0.02em; }
.x-ov h1 em, .x-title em { font-style: normal; color: var(--red); }
.x-ov h2 { font: 600 clamp(24px, 7vw, 34px)/1.15 var(--sans); color: var(--teal); }
.x-ov p { font: 400 17px/1.4 var(--sans); color: var(--ink2); max-width: 30em; }
.x-eye { font: 600 13px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.x-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* level select grid */
.x-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(92vw, 420px); }
.x-levels button {
  aspect-ratio: 1; border: 0; border-radius: var(--r-m); background: #fff; color: var(--teal); font: 600 20px/1 var(--sans);
  box-shadow: 0 3px 0 #b5d3de, 0 4px 14px #1f42371a; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.x-levels button small { font-size: 10px; letter-spacing: 1px; color: #f5b800; min-height: 10px; }
.x-levels button.cur { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-sh); }
.x-levels button.cur small { color: #fff; }
.x-levels button:disabled { background: rgb(255 255 255 / 0.45); color: #9db4bd; box-shadow: none; cursor: default; }
.x-levels button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

/* birds */
.x-bird { display: block; height: auto; }
.bob { animation: x-bob 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.bob2 { animation-delay: -0.8s; }
@keyframes x-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(1.02, 0.98); } }
.hop { animation: x-hop 0.45s ease-out; }
@keyframes x-hop { 0% { transform: translateY(0) scale(1.1, 0.88); } 40% { transform: translateY(-14px) scale(0.94, 1.08); } 100% { transform: translateY(0); } }
.x-name { display: inline-block; background: #fff; border-radius: var(--r-pill); padding: 4px 10px; font: 600 13px/1 var(--sans); border: 2px solid currentColor; }
.x-name--coco { color: var(--coco); }
.x-name--natty { color: var(--natty); }