:root {
  color-scheme: light;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  color: oklch(1 0 none);
  background: var(--backdrop);
  --backdrop: #000f3f;
  --ink: oklch(0.27 0.045 148);
  --green: oklch(0.42 0.11 148);
  --surface: oklch(0.995 0.006 105);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  overflow-wrap: break-word;
}
* { box-sizing: border-box; }
body { margin: 0; }
h1,h2,p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: 0.55; }
button:focus-visible { outline: 3px solid oklch(0.5 0.2 270); outline-offset: 4px; }
button:active:not(:disabled) { scale: 0.97; }
[hidden] { display: none !important; }
.page {
  --content: 32rem;
  --gutter: 0.75rem;
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter),1fr) [content-start] min(calc(100% - var(--gutter)*2),var(--content)) [content-end] minmax(var(--gutter),1fr) [full-end];
  grid-template-rows: auto auto minmax(0, 1fr);
  row-gap: 10px;
  column-gap: 0;
  padding-block: env(safe-area-inset-top, 0px) calc(12px + env(safe-area-inset-bottom, 0px));
  block-size: 100dvh;
  min-block-size: 560px;
  background: var(--backdrop);
}
.page > * { grid-column: content; }
.page > .game-nav { grid-column: full; }
.game-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 60px; padding-block: 8px; padding-inline: max(12px, env(safe-area-inset-left, 0px), calc((100% - 1000px) / 2)) max(12px, env(safe-area-inset-right, 0px), calc((100% - 1000px) / 2)); border-block-end: 1px solid oklch(1 0 none / .18); background: var(--backdrop); }
.game-nav h1 { flex: 1; min-inline-size: 0; text-align: center; font-size: clamp(12px, 2.4vw, 18px); line-height: 1.35; }
.game-nav h1 > span { display: inline-block; white-space: nowrap; }
.nav-button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding-inline: 10px; border: 1px solid oklch(.84 .025 255); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 0 oklch(.7 .03 255); }
.nav-button:active { scale: .97; box-shadow: none; }
.nav-button:focus-visible, #fullscreen:focus-visible { outline: 3px solid oklch(.86 .16 90); outline-offset: 3px; }
.back-link > span { font-size: 23px; line-height: 1; }
#fullscreen > span:last-child { font-size: 20px; }
.page.is-expanded #fullscreen-label { font-size: 10px; }
.game-expanded { overflow: hidden; }
.page.is-expanded { position: fixed; inset: 0; z-index: 1000; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
.page::backdrop { background: var(--backdrop); }
.heading { display: grid; gap: 3px; text-align: center; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; color: var(--green); }
.eyebrow a { color: inherit; text-underline-offset: 3px; }
.eyebrow a:focus-visible { outline: 3px solid oklch(0.5 0.2 270); outline-offset: 3px; }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; padding: 4px 12px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }
.site-nav :is(a,button) { display: inline-flex; align-items: center; min-block-size: 44px; color: oklch(1 0 none); }
.site-nav button { border: 0; padding: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.site-nav a:focus-visible { outline: 3px solid oklch(0.5 0.2 270); outline-offset: 3px; }
.site-nav a:active { opacity: .7; }
h1 { font-size: clamp(24px, 5vw, 32px); line-height: 1.2; letter-spacing: -0.04em; }
.instruction { font-size: 12px; line-height: 1.5; }
.level-controls { display: flex; gap: 8px; margin-block-start: 5px; }
.level-controls select { flex: 1; min-inline-size: 0; min-block-size: 44px; padding: 6px; border: 1px solid oklch(0.77 0.045 135); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.level-controls select:first-child { flex: 1.65; }
.level-controls select:focus-visible { outline: 3px solid oklch(0.5 0.2 270); outline-offset: 2px; }
.level-controls select:active { background: oklch(0.92 0.045 135); }
.game { display: grid; gap: 8px; justify-items: center; align-content: center; }
.hud { display: flex; gap: 8px; justify-content: space-between; inline-size: min(100%, 28rem); font-size: 14px; align-items: center; }
#record { font-size: 11px; font-variant-numeric: tabular-nums; color: oklch(.9 .12 95); }
.hud p:first-child { display: flex; align-items: center; gap: 6px; }
.hud strong { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; }
.hud span { font-size: 12px; }
.board {
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 28rem, max(232px, calc((100svh - 312px) * 0.8)));
  aspect-ratio: 4 / 5;
  border: 2px solid oklch(0.78 0.06 135);
  border-radius: 24px;
  overflow: clip;
  background: radial-gradient(ellipse at 100% 0%, oklch(0.98 0.075 108), transparent 60%), radial-gradient(ellipse at 0% 100%,oklch(0.88 0.075 148),transparent 75%), oklch(0.96 0.035 135);
  box-shadow: 0 6px 0 oklch(0.8 0.05 135), 0 16px 35px oklch(0.36 0.08 140 / 0.08);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  container-type: inline-size;
}
.definitions { position: absolute; inline-size: 0; block-size: 0; pointer-events: none; }
.branch { position: absolute; inset-inline-start: 9%; inset-block: 7% 7%; inline-size: 7%; border-radius: 100px; background: oklch(0.52 0.07 72); rotate: -3deg; box-shadow: inset 4px 0 0 oklch(0.65 0.07 72); }
#tongues { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.chameleon { position: absolute; inset-inline-start: 2.5%; inline-size: 32%; block-size: 24%; }
.chameleon-body { position: relative; inline-size: 100%; block-size: 100%; }
.mouth-cavity, .jaw-bridge { pointer-events: none; }
.reaction { position: absolute; inset-block-start: 2%; inset-inline-start: 52%; white-space: nowrap; color: var(--ink); background: oklch(0.995 0.01 105 / .95); border-radius: 8px; font-weight: 900; font-size: clamp(10px, 3.3cqi, 15px); line-height: 1.5; padding-inline: 4px; }
.reaction:empty { display: none; }
.chameleon svg, .fly svg { inline-size: 100%; block-size: 100%; display: block; overflow: visible; pointer-events: none; }
.badge { position: absolute; inset-inline-start: 12%; inset-block-end: 0; display: grid; place-items: center; inline-size: 24px; block-size: 24px; border: 2px solid var(--surface); border-radius: 50%; background: var(--tone); color: oklch(1 0 none); font-size: 13px; font-weight: 800; }
.board:is([data-count="5"],[data-count="6"]) .badge { inline-size: 19px; block-size: 19px; font-size: 11px; }
.fly {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  translate: -50% -50%;
  inline-size: 21%;
  aspect-ratio: 1;
  min-inline-size: 44px;
  padding: 2%;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
  box-shadow: none;
}
.fly .badge { inset-inline-start: auto; inset-inline-end: 0; inset-block-end: 0; }
.fly-body { position: relative; inline-size: 100%; block-size: 100%; scale: var(--stretch-x, 1) var(--stretch-y, 1); }
.fly-still { inline-size: 100%; block-size: 100%; }
.fly-moving { position: absolute; inset: 0; display: none !important; }
.wing { transform-box: view-box; transform-origin: 58% 46%; }
.wing-back { rotate: var(--wing-back, 0deg); }
.wing-front { rotate: var(--wing-front, 0deg); }
.panic { display: none; position: absolute; inset-block-start: -22%; inset-inline-start: 65%; color: oklch(0.45 0.2 20); font-size: clamp(14px, 5cqi, 22px); font-weight: 900; text-shadow: 1px 1px var(--surface); }
.board:is([data-meal="panic"],[data-meal="pull"],[data-meal="bite"]) .fly-still { display: none; }
.board:is([data-meal="panic"],[data-meal="pull"],[data-meal="bite"]) .fly-moving { display: block !important; }
.board:is([data-meal="panic"],[data-meal="pull"]) .panic { display: block; }
.fly.dragging { cursor: grabbing; z-index: 3; }
.fly.dragging .fly-body { filter: drop-shadow(0 0 3px color-mix(in oklch, var(--tone) 60%, transparent)); }
.fly:disabled { opacity: 1; }
.board:is([data-meal="panic"],[data-meal="pull"],[data-meal="bite"],[data-meal="chew"],[data-meal="happy"]) .fly { border-color: transparent; background: transparent; box-shadow: none; }
.board:is([data-meal="panic"],[data-meal="pull"],[data-meal="bite"],[data-meal="chew"],[data-meal="happy"]) .fly .badge { visibility: hidden; }
.board[data-phase="won"] .fly { visibility: hidden; }
.snack { position: absolute; inset-inline: 0; inset-block-start: 40%; text-align: center; font-weight: 900; font-size: clamp(24px, 10cqi, 42px); color: var(--green); text-shadow: 2px 2px var(--surface); }
.overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px; background: oklch(0.96 0.03 125 / 0.65); }
.message { display: grid; gap: clamp(8px, 3cqi, 14px); justify-items: center; padding: clamp(12px, 4cqi, 24px) clamp(8px, 3cqi, 16px); inline-size: 100%; border: 2px solid oklch(0.84 0.055 135); border-radius: 20px; background: var(--surface); color: var(--ink); text-align: center; box-shadow: 0 8px 30px oklch(0.25 0.05 140 / 0.12); }
.message .eyebrow { font-size: clamp(10px, 3.3cqi, 12px); }
.message h2 { font-size: clamp(20px, 6cqi, 27px); }
.message p:not(.eyebrow) { font-size: clamp(12px, 3.8cqi, 14px); line-height: 1.7; }
.primary { min-block-size: 48px; padding: 10px 28px; border: 0; border-radius: 14px; background: var(--green); color: oklch(1 0 none); font-weight: 800; box-shadow: 0 3px 0 oklch(0.3 0.07 148); }
.result-actions { display: flex; gap: 8px; inline-size: 100%; }
.result-actions button { flex: 1; min-inline-size: 0; padding-inline: 6px; font-size: 13px; }
.secondary { min-block-size: 48px; border: 1px solid var(--green); border-radius: 14px; background: var(--surface); font-weight: 700; }
.status { min-block-size: 21px; font-size: 13px; line-height: 1.6; text-align: center; }
.controls { display: flex; gap: 8px; inline-size: min(100%, 28rem); }
.controls button { flex: 1; min-inline-size: 0; min-block-size: 44px; padding: 8px 3px; border: 1px solid oklch(0.77 0.045 135); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; }
footer { text-align: center; font-size: 11px; line-height: 1.6; color: oklch(.88 .025 255); }
@media (any-pointer: coarse) { footer { display: none; } }
@media (max-height: 500px) and (orientation: landscape) {
  .page { grid-template-columns: minmax(170px, 1fr) minmax(200px, 310px) minmax(12px, 0.35fr); grid-template-rows: auto auto; gap: 12px; min-block-size: 320px; padding: 12px; align-content: center; }
  .page > .game-nav { grid-column: 1; grid-row: 1; align-self: end; flex-direction: column; border: 0; gap: 10px; padding: 0; }
  .game-nav h1 { order: -1; font-size: clamp(14px, 2.4vw, 20px); }
  .page > .heading { grid-column: 1; grid-row: 2; align-self: start; }
  .page > .game { grid-column: 2; grid-row: 1 / span 2; gap: 6px; }
  .heading h1 { font-size: clamp(20px, 3vw, 28px); }
  .fly .badge { inset-inline-end: 7px; inset-block-end: 7px; }
  .board { inline-size: min(100%, calc((100svh - 145px) * 0.8)); }
  .message { padding: 12px 8px; gap: 8px; }
  .message .eyebrow { display: none; }
  .message h2 { font-size: 18px; }
  .message p:not(.eyebrow) { font-size: 12px; line-height: 1.5; }
  .primary { min-block-size: 44px; padding: 8px 16px; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-button:hover { background: oklch(.94 .035 255); }
  .primary:hover:not(:disabled) { background: oklch(0.36 0.1 148); }
  .controls button:hover:not(:disabled) { background: oklch(0.92 0.045 135); }
  .fly:hover:not(:disabled) .badge { background: color-mix(in oklch, var(--tone) 80%, oklch(0.2 0 none)); }
}
@media (prefers-reduced-motion: no-preference) {
  button:not(.fly) { transition: scale 120ms var(--ease-out), background-color 160ms var(--ease-out); }
}