/* Device safe-area insets, in CSS pixels. Consume these -- never env() directly.
   Defined at :root so the launcher's device frames can override them to
   simulate a Dynamic Island on desktop, where env() always resolves to 0.

   These defaults assume a cutout and the query below takes it back for screens
   that demonstrably have none, rather than the other way round. A media query a
   browser cannot parse is dropped whole, and a minifier will happily rewrite
   this one into Level 4 range syntax that WebKit below 16.4 rejects -- so the
   failure has to leave a screen with clearance it may not need, never without
   clearance it does. env() cannot be the backstop: a WKWebView embedded as a
   Flutter platform view reports 0 on every edge, so in the app this floor is
   the only thing holding the cutout off.

   59px clears the deepest cutout in the band -- the Island on a 402- and
   440-wide body ends 50.7px down. The ear is the strip beside the cutout, for a
   control that wants the corner rather than a place in the band: put it at
   `top: 8px; left: var(--vo-ear-side)` (or `right:`) and hold it to
   `var(--vo-ear)` wide. Both are worst case across the band: the widest cutout
   is the 171.3px notch on a 390-wide body, and --vo-ear-side clears a 53px
   screen-corner radius at 8px down. Measured off Apple's own framebuffer masks
   and the OS's drawn Island, not a spec sheet. */
:root {
  --vo-safe-top: max(env(safe-area-inset-top, 0px), 59px);
  --vo-safe-right: env(safe-area-inset-right, 0px);
  --vo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vo-safe-left: env(safe-area-inset-left, 0px);
  --vo-cutout-bottom: 51px;
  --vo-ear-side: 22px;
  --vo-ear: max(0px, calc(50vw - 116px));
}
/* Wider than 1:2 has no cutout to clear: an SE, a tablet, a desktop window.
   501/1000 rather than 1/2 so an 18:9 Android -- exactly 1:2, and routinely
   notched -- keeps the clearance rather than losing it on the boundary. */
@media (min-aspect-ratio: 501 / 1000) {
  :root {
    --vo-safe-top: env(safe-area-inset-top, 0px);
    --vo-cutout-bottom: 0px;
    --vo-ear-side: 0px;
    --vo-ear: 50vw;
  }
}

@font-face {
  font-family: "nimpkish";
  src: url("./fonts/ed-nimpkish-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #17171b;
  --bg-deep: #101014;
  --ink: #1e1e1e;
  --fg: #f7f7f7;
  --fg-soft: rgba(247, 247, 247, 0.6);
  --fg-dim: rgba(247, 247, 247, 0.38);
  --surface: rgba(31, 31, 37, 0.96);
  --surface-2: #303036;
  --border: rgba(255, 255, 255, 0.14);
  --orange: #ff530c;
  --rose: #fd3382;
  --magenta: #fb13f8;
  --green: #28cf87;
  --blue: #2d9eff;
  --gradient: linear-gradient(135deg, var(--orange), var(--rose) 38%, var(--magenta) 65%, var(--blue));
  --board-size: min(calc(100vw - 28px - var(--vo-safe-left, 0px) - var(--vo-safe-right, 0px)), calc(100dvh - 294px - var(--vo-safe-top, 0px) - var(--vo-safe-bottom, 0px)), 430px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  color: var(--fg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(85% 50% at 5% -5%, rgba(255, 83, 12, 0.13), transparent 65%),
    radial-gradient(80% 55% at 105% 24%, rgba(251, 19, 248, 0.1), transparent 68%),
    radial-gradient(100% 50% at 50% 108%, rgba(45, 158, 255, 0.1), transparent 66%),
    linear-gradient(180deg, #1c1c21 0%, var(--bg) 54%, var(--bg-deep) 100%);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

button { font: inherit; }

button:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

.game-shell {
  position: relative;
  display: grid;
  grid-template-rows: 42px 43px 34px var(--board-size) 44px 29px;
  gap: 7px;
  width: min(100%, 480px);
  height: 100dvh;
  min-height: 100%;
  margin: 0 auto;
  padding:
    max(10px, var(--vo-safe-top, 0px))
    max(14px, var(--vo-safe-right, 0px))
    max(10px, var(--vo-safe-bottom, 0px))
    max(14px, var(--vo-safe-left, 0px));
  isolation: isolate;
}

.topbar,
.score-row,
.pressure-panel {
  width: var(--board-size);
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1,
h2,
p { margin: 0; }

h1,
.sheet h2 {
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

h1 { font-size: clamp(24px, 7vw, 31px); }

#game-title,
#start-title,
#gameover-title {
  font-family: "nimpkish", "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.top-actions { display: flex; gap: 7px; }

.icon-button,
.close-button {
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

.icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.score-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-inline: 5px;
}

.score-block { display: flex; flex-direction: column; }
.score-block-right { align-items: end; }

.eyebrow,
.sheet-kicker,
.result-label {
  color: var(--fg-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.score-block strong {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(22px, 6vw, 28px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pressure-panel {
  display: grid;
  grid-template-columns: 70px 1fr 44px;
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.pressure-copy { display: flex; flex-direction: column; gap: 2px; }

.pressure-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.pressure-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient);
  box-shadow: 0 0 16px rgba(253, 51, 130, 0.34);
  transition: width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pressure-number {
  font-family: ui-monospace, monospace;
  color: var(--fg-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board-wrap {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(21px, 6vw, 28px);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.055), transparent 57%),
    rgba(6, 6, 10, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -20px 50px rgba(0, 0, 0, 0.2),
    0 22px 48px rgba(0, 0, 0, 0.34);
}

.board-wrap::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: calc(clamp(21px, 6vw, 28px) - 7px);
  pointer-events: none;
}

.board-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--cascade-color, transparent) 38%, transparent), transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.board-wrap.cascade-hit {
  animation: cascadeBoardHit 0.46s ease-out;
}

.board-wrap.cascade-hit::after {
  animation: cascadeScreenFlash 0.46s ease-out;
}

#board-canvas,
.cell-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#board-canvas { display: block; z-index: 1; }

.cell-grid {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  padding: 9px;
  touch-action: none;
}

.cell-button {
  appearance: none;
  min-width: 0;
  min-height: 0;
  margin: 2px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 13px;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.cell-button:focus-visible {
  outline: none;
  border-color: rgba(247, 247, 247, 0.92);
  box-shadow: 0 0 0 2px rgba(23, 23, 27, 0.82), 0 0 0 4px rgba(247, 247, 247, 0.42);
}

.cell-grid[aria-disabled="true"] .cell-button { cursor: wait; }

.combo-burst {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 3;
  pointer-events: none;
  color: var(--cascade-color, var(--fg));
  font-size: clamp(26px, 8vw, 42px);
  font-weight: 800;
  letter-spacing: -0.05em;
  opacity: 0;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.65), 0 0 20px color-mix(in srgb, var(--cascade-color, transparent) 55%, transparent);
  transform: translate(-50%, -50%) scale(0.72) rotate(-5deg);
}

.combo-burst.show {
  animation: comboPop 0.72s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.tutorial-coach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--board-size);
  min-height: 40px;
  margin-inline: auto;
  padding: 6px 7px 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(31, 31, 37, 0.92);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.tutorial-coach[hidden] { display: none; }

.tutorial-coach p {
  color: rgba(247, 247, 247, 0.86);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.2;
}

.tutorial-coach button {
  appearance: none;
  flex: 0 0 auto;
  min-width: 54px;
  height: 28px;
  margin-left: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--fg);
  font-size: 11px;
  font-weight: 800;
  text-transform: lowercase;
  cursor: pointer;
}

.game-shell[data-pressure-mood="worried"] .pressure-panel {
  border-color: rgba(255, 83, 12, 0.38);
}

.game-shell[data-pressure-mood="panic"] .pressure-panel {
  border-color: rgba(253, 51, 130, 0.62);
  box-shadow: 0 0 20px rgba(253, 51, 130, 0.16);
}

.game-shell[data-pressure-mood="panic"] .board-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -20px 50px rgba(0, 0, 0, 0.2),
    0 22px 48px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(253, 51, 130, 0.1);
}

.primary-button,
.secondary-button {
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.07s ease, filter 0.16s ease, opacity 0.16s ease;
}

.icon-button:disabled { cursor: default; opacity: 0.38; }

.icon-button:not(:disabled):active,
.primary-button:active,
.secondary-button:active { transform: scale(0.96); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding:
    max(20px, var(--vo-safe-top, 0px))
    max(18px, var(--vo-safe-right, 0px))
    max(20px, var(--vo-safe-bottom, 0px))
    max(18px, var(--vo-safe-left, 0px));
  background: rgba(7, 7, 10, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.overlay[hidden] { display: none; }

.sheet {
  position: relative;
  width: min(100%, 390px);
  padding: 28px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(70% 50% at 96% 0%, rgba(251, 19, 248, 0.11), transparent 70%),
    var(--surface);
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: sheetIn 0.22s ease-out;
}

.sheet h2 {
  margin: 7px 0 16px;
  font-size: clamp(32px, 10vw, 44px);
}

.start-sheet h2 { margin-bottom: 27px; }

.mini-flock {
  width: min(100%, 344px);
  margin: -8px auto 5px;
}

.flock-portrait {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 9px 10px rgba(0, 0, 0, 0.3));
}

.mascot {
  transform-box: fill-box;
  transform-origin: 50% 75%;
  animation: flockBob 3.2s ease-in-out infinite alternate;
}

.mascot-pip { animation-delay: -1.7s; }
.mascot-pop { animation-delay: -0.8s; }
.mascot-bud { animation-delay: -2.4s; }
.mascot-bloop { animation-delay: -1.1s; }

.mascot-body {
  stroke: rgba(247, 247, 247, 0.94);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mascot-leaf { stroke-width: 4.2; }
.mascot-eye { fill: #222228; }
.mascot-eye-glint { fill: rgba(255, 255, 255, 0.82); }
.mascot-cheek { fill: rgba(91, 24, 68, 0.17); }
.mascot-pop-mouth { fill: #222228; }

.mascot-detail,
.mascot-leaf-vein {
  fill: none;
  stroke: rgba(34, 34, 40, 0.42);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.mascot-leaf-vein { stroke: rgba(255, 255, 255, 0.35); }
.mascot-freckle { fill: rgba(34, 34, 40, 0.34); }

.mascot-mouth {
  fill: none;
  stroke: #222228;
  stroke-width: 3;
  stroke-linecap: round;
}

.mascot-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 4;
  stroke-linecap: round;
}

.mascot-shadow { fill: rgba(0, 0, 0, 0.25); filter: blur(1.2px); }

.primary-button,
.secondary-button {
  min-height: 51px;
  padding: 0 25px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-transform: lowercase;
}

.primary-button {
  color: var(--fg);
  background: var(--gradient);
  box-shadow: 0 12px 30px rgba(253, 51, 130, 0.26);
  text-transform: none;
}

.secondary-button {
  width: 100%;
  margin-top: 20px;
  color: var(--ink);
  background: var(--fg);
}

.start-best {
  display: block;
  margin-top: 13px;
  color: var(--fg-soft);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-family: ui-sans-serif, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.info-sheet { text-align: left; }
.info-sheet h2 { max-width: 310px; }

.rule-list { display: grid; gap: 15px; }

.rule-list > div {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
}

.rule-list b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--ink);
  background: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 13px;
}

.rule-list p,
.fine-print,
.setting-row span {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.rule-list p { color: rgba(247, 247, 247, 0.78); font-size: 14px; line-height: 1.42; }

.fine-print {
  margin-top: 18px;
  color: var(--fg-soft);
  font-size: 11px;
  line-height: 1.45;
}

.info-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.info-actions .secondary-button { margin-top: 0; padding-inline: 12px; }
.info-actions .secondary-button:first-child {
  border: 1px solid var(--border);
  color: var(--fg);
  background: rgba(255, 255, 255, 0.055);
}

.setting-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}

.setting-row > div { display: flex; flex-direction: column; gap: 4px; }
.setting-row strong { font-size: 15px; text-transform: lowercase; }
.setting-row span { color: var(--fg-soft); font-size: 11px; }

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
}

.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 0.17s ease;
}

.switch[aria-checked="true"] { background: var(--gradient); }
.switch[aria-checked="true"] i { transform: translateX(22px); }

.result-label { display: block; margin-top: 4px; }

.result-score {
  display: block;
  margin: 2px 0;
  font-family: ui-monospace, monospace;
  font-size: clamp(52px, 17vw, 72px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.08em;
  line-height: 1;
}

.result-summary {
  min-height: 20px;
  color: var(--fg-soft);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0;
}

.result-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.result-stats span { color: var(--fg-soft); font-size: 9px; text-transform: uppercase; }
.result-stats strong { font-family: ui-monospace, monospace; font-size: 17px; font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(calc(0.6 * var(--cascade-label-scale, 1))) rotate(-7deg); }
  25% { opacity: 1; transform: translate(-50%, -55%) scale(calc(1.12 * var(--cascade-label-scale, 1))) rotate(2deg); }
  75% { opacity: 1; transform: translate(-50%, -64%) scale(var(--cascade-label-scale, 1)) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -82%) scale(calc(0.95 * var(--cascade-label-scale, 1))) rotate(0); }
}
@keyframes cascadeBoardHit {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  32% {
    transform: scale(calc(1 + var(--cascade-kick, 0)));
    filter: brightness(1.08);
    box-shadow: 0 0 var(--cascade-glow, 18px) var(--cascade-color, transparent);
  }
}
@keyframes cascadeScreenFlash {
  0%, 100% { opacity: 0; }
  28% { opacity: 0.2; }
}
@keyframes flockBob { to { transform: translateY(-3px) rotate(1deg); } }

@media (min-width: 700px) {
  body::before {
    content: "";
    position: fixed;
    top: 50%;
    right: calc(50% - 248px);
    left: calc(50% - 248px);
    height: min(calc(100dvh - 36px), 720px);
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 34px;
    background: rgba(12, 12, 16, 0.24);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
  }
  .game-shell {
    grid-template-rows: 42px 43px 34px var(--board-size) 44px 29px;
    align-content: center;
  }
}

@media (max-height: 700px) {
  :root { --board-size: min(calc(100vw - 28px), calc(100dvh - 244px), 366px); }
  .game-shell { grid-template-rows: 36px 34px 29px var(--board-size) 40px 25px; gap: 4px; }
  .icon-button { width: 32px; height: 32px; }
  .score-block strong { font-size: 20px; }
  .pressure-panel { padding-block: 4px; }
  .sheet { padding: 23px 20px 20px; }
  .mini-flock { width: min(100%, 292px); margin-bottom: 1px; }
  .tutorial-coach { min-height: 36px; padding-block: 4px; }
  .tutorial-coach p { font-size: 11px; }
}

@media (max-width: 340px) {
  :root { --board-size: calc(100vw - 20px); }
  .game-shell { padding-inline: 10px; }
}

/* Tall phones have enough vertical room to treat the whole HUD + board as one
   centred poster. Short phones keep the compact top-safe composition above. */
@media (min-height: 760px) and (max-width: 699px) {
  .game-shell { align-content: center; }
}


@media (prefers-contrast: more), (forced-colors: active) {
  .board-wrap,
  .pressure-panel,
  .icon-button,
  .sheet { border-color: rgba(255, 255, 255, 0.65); }
}