/* ================================================================
   Birddoku - styles
   Palette: misty dawn greens, pine ink, a single warm beak-orange
   used only for things you can act on.
================================================================= */

:root {
  --mist: #E4EBE3;
  --mist-2: #D7E2D9;
  --card: #FFFDF8;
  --ink: #24382F;
  --ink-soft: #64786E;
  --beak: #E79B32;
  --beak-dark: #C87F1E;
  --berry: #CF5F5A;
  --line: rgba(36, 56, 47, .13);
  --shadow: 0 10px 26px -14px rgba(30, 52, 43, .55);

  /* region colours, up to 9 per board */
  --r0: #F3B9B3;
  --r1: #A6C9E2;
  --r2: #B6D7AE;
  --r3: #F2D383;
  --r4: #C7B7E0;
  --r5: #F0C29C;
  --r6: #9ED0C6;
  --r7: #DCC5A4;
  --r8: #E4A7C3;

  --board-bg: #F2F5EC;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 0%, #EFF4EC 0%, var(--mist) 45%, var(--mist-2) 100%);
  color: var(--ink);
  font-family: Nunito, "Segoe UI", system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* an ad is loading or showing: nothing in the game can be tapped */
body.ad-wait .app { pointer-events: none; }

body { display: flex; align-items: center; justify-content: center; }

.app {
  width: min(560px, 100vw);
  height: 100%;
  max-height: 100dvh;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* ---------- buttons ---------- */

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.btn {
  border-radius: 14px;
  padding: 11px 18px;
  font-weight: 700;
  background: var(--card);
  box-shadow: 0 3px 0 var(--line), var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn-main {
  background: var(--beak);
  color: #fff;
  box-shadow: 0 4px 0 var(--beak-dark), var(--shadow);
}
.btn-main:active { box-shadow: 0 1px 0 var(--beak-dark); }
.btn:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--beak); outline-offset: 3px; }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--line);
  font-size: 18px;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.level-name {
  font-family: Fredoka, Nunito, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .2px;
}
.level-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: -2px; }

.hearts { display: flex; gap: 4px; font-size: 19px; line-height: 1; }
.heart { color: var(--berry); transition: transform .25s ease, opacity .25s ease; }
.heart.gone { opacity: .25; transform: scale(.75); filter: grayscale(1); }
.heart.losing { animation: heartbreak .5s ease; }
@keyframes heartbreak {
  40% { transform: scale(1.45) rotate(-8deg); }
  100% { transform: scale(.75); }
}

/* ---------- rule chips ---------- */

.rules {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.rule {
  flex: 1 1 0;
  background: var(--card);
  border-radius: 12px;
  padding: 7px 6px;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-soft);
  box-shadow: 0 2px 0 var(--line);
}
.rule b { display: block; color: var(--ink); font-size: 12.5px; }

/* ---------- board ---------- */

.board-wrap {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

#board {
  display: grid;
  width: min(92vw, 520px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  background: var(--board-bg);
  border-radius: 18px;
  padding: 5px;
  gap: 3px;
  box-shadow: var(--shadow);
  overflow: hidden;
  user-select: none;
  touch-action: none;          /* so dragging across cells never scrolls */
}
#board.locked { pointer-events: none; }

.cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 9px;
  transition: filter .12s ease;
}
.cell img, .cell .mark { pointer-events: none; }

/* both children share one grid area, otherwise the cross and the bird
   stack in two rows and each only gets half the square */
.cell > * { grid-area: 1 / 1; align-self: center; justify-self: center; }

/* the cross fills the whole square, as a crossed-off cell should */
.cell .mark {
  width: 92%;
  height: 92%;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .14s ease;
}
.cell.marked .mark { opacity: .5; transform: scale(1); }

.cell img {
  width: 84%;
  height: 84%;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .16s ease, transform .22s cubic-bezier(.2, 1.6, .4, 1);
  filter: drop-shadow(0 2px 2px rgba(30, 50, 40, .25));
}
.cell.bird img { opacity: 1; transform: scale(1); }
.cell.bird.settled img { animation: bob 3.4s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6%) rotate(-2deg); }
}

.cell.clash { animation: shake .34s ease; }
.cell.clash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 3px var(--berry);
}
@keyframes shake {
  20% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

.cell.hinted::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 3px rgba(231, 155, 50, .9);
}

@media (hover: hover) {
  .cell:hover { filter: brightness(1.06); }
}

/* ---------- bottom bar ---------- */

.bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.count {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.count img { width: 22px; height: 22px; }
.tools { display: flex; gap: 8px; }
.tool {
  border-radius: 13px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--line);
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tool small { color: var(--ink-soft); font-weight: 700; }
.tool:disabled { opacity: .4; cursor: default; }
.tool:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

/* ---------- screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #F1F6EE 0%, var(--mist) 50%, var(--mist-2) 100%);
  z-index: 5;
}
.screen[hidden] { display: none; }

.home { align-items: center; justify-content: center; gap: 14px; text-align: center; }
.home h1 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(38px, 11vw, 58px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.5px;
}
.home p { margin: 0 0 6px; color: var(--ink-soft); max-width: 34ch; line-height: 1.5; }
.flock { display: flex; gap: 4px; margin-bottom: 4px; }
.flock img { width: 46px; height: 46px; }
.flock img:nth-child(2) { transform: translateY(-8px) scale(1.14); }

.home-actions { display: flex; flex-direction: column; gap: 10px; width: min(280px, 80vw); }
.toggles { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.toggle {
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  background: var(--card);
  box-shadow: 0 2px 0 var(--line);
  color: var(--ink-soft);
}
.toggle.on { color: var(--ink); box-shadow: 0 2px 0 var(--line), inset 0 0 0 2px var(--beak); }

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.screen-head h2 {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}

.levels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 9px;
  overflow-y: auto;
  padding-bottom: 20px;
}
.lv {
  aspect-ratio: 1;
  border-radius: 15px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--line);
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
  position: relative;
}
.lv .size { position: absolute; bottom: 5px; font-size: 9.5px; color: var(--ink-soft); font-weight: 700; }
.lv.done { background: #EAF3E6; box-shadow: 0 3px 0 var(--line), inset 0 0 0 2px #9BC58E; }
.lv.locked { opacity: .42; }
.lv.current { box-shadow: 0 3px 0 var(--beak-dark), inset 0 0 0 2px var(--beak); }

/* ---------- modal ---------- */

.modal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(28, 46, 39, .42);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.modal[hidden] { display: none; }
.sheet {
  background: var(--card);
  border-radius: 24px;
  padding: 26px 22px 22px;
  width: min(330px, 90vw);
  text-align: center;
  box-shadow: 0 24px 50px -20px rgba(25, 45, 35, .6);
  animation: rise .28s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes rise { from { transform: translateY(18px) scale(.96); opacity: 0; } }
.sheet h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 600;
  font-size: 24px;
  margin: 10px 0 4px;
}
.sheet p { color: var(--ink-soft); margin: 0 0 16px; font-size: 14px; }
.sheet .btn { width: 100%; margin-top: 8px; }
.sheet-bird { width: 84px; height: 84px; animation: bob 2.6s ease-in-out infinite; }

.loading-bird { width: 76px; height: 76px; animation: bob 2.2s ease-in-out infinite; }
.app-icon {
  width: 104px; height: 104px;
  border-radius: 26px;
  box-shadow: 0 12px 24px -12px rgba(30, 52, 43, .6);
}
.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 7;
  gap: 12px;
  grid-auto-flow: row;
  background: rgba(228, 235, 227, .92);
  font-weight: 700;
  color: var(--ink-soft);
}
.loading[hidden] { display: none; }

@media (max-height: 620px) and (orientation: portrait) {
  .rules { display: none; }
}

/* ---------- landscape ---------- */

@media (orientation: landscape) {
  .app {
    display: grid;
    width: min(920px, 100vw);
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "board top"
      "board rules"
      "board tools";
    column-gap: 16px;
    row-gap: 10px;
    align-items: start;
  }
  .topbar { grid-area: top; }
  .rules { grid-area: rules; flex-direction: column; }
  .board-wrap { grid-area: board; height: 100%; }
  .bottombar { grid-area: tools; align-self: end; flex-wrap: wrap; justify-content: flex-start; }
  .rule { padding: 8px 10px; text-align: left; }
  .loading { grid-area: 1 / 1 / -1 / -1; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .home { gap: 8px; }
  .home h1 { font-size: 34px; }
  .home p { display: none; }
  .app-icon { width: 64px; height: 64px; border-radius: 16px; }
  .rules { display: none; }
  .app {
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "board top"
      "board tools";
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}