:root {
  font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  color:#573324;
  --cream:#fff3d4;
  --ink:#573324;
  --purple:#63416e;
  --focus:#1a5774;
  --motion:1;
  color-scheme:light;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-height:100svh;
  background:#a4d5df;
}
button,input {
  font:inherit;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
  color:inherit;
}
button:disabled {
  cursor:default;
  opacity:.55;
}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px;
}
button {
  touch-action:manipulation;
}
button svg {
  pointer-events:none;
}
button:active:not(:disabled) {
  transform:translateY(2px);
}
.scenery {
  position:fixed;
  inset:0;
  z-index:-1;
  background:url('assets/forest.svg') center bottom/cover no-repeat;
}
.scenery:after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 25%,#223a3e22);
}
.cloud {
  position:absolute;
  background:#fffbe1;
  opacity:.28;
  width:130px;
  height:30px;
  border-radius:50%;
  filter:blur(3px);
}
.cloud-one {
  top:20%;
  left:4%;
}
.cloud-two {
  top:34%;
  right:3%;
  width:210px;
}
.game-shell {
  width:min(100%,600px);
  margin:auto;
  padding:18px 24px 16px;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:88px;
}
.round-button {
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid #d99c4e;
  background:linear-gradient(#fff9e5,#ffe5aa);
  box-shadow:inset 0 0 0 3px #fff5ce,0 3px 0 #ab763a,0 4px 7px #45334b30;
  font-size:27px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.round-button svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:#774832;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.profile-button svg {
  stroke-width:2.3;
}
.brand {
  text-decoration:none;
  position:relative;
  display:block;
  padding:0 10px;
  transform:rotate(-3deg);
  font-size:clamp(45px,9vw,67px);
  font-weight:1000;
  letter-spacing:-4px;
  line-height:1.2;
  color:#ffedbe;
  text-shadow:0 3px 0 #d3a364,0 5px 0 #5b326a,3px 0 #5b326a,-3px 0 #5b326a,0 -3px #5b326a,0 8px 9px #42265255;
  -webkit-text-stroke:1px #e1b878;
}
.brand-bird {
  position:absolute;
  width:29px;
  height:36px;
  left:32%;
  top:-17px;
  transform:rotate(10deg);
}
.brand-s {
  letter-spacing:-5px;
  margin-left:5px;
}
.eyebrow {
  margin:2px 0 18px;
  text-align:center;
  font-size:10px;
  letter-spacing:1.65px;
  font-weight:bold;
  color:#355c52;
}
.text-button {
  display:block;
  margin:7px auto 0;
  background:#fffae0b8;
  border:1px solid #b0b990;
  border-radius:20px;
  padding:5px 12px;
  font-size:12px;
  letter-spacing:0;
  color:#486541;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.level-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 7px;
  margin-bottom:12px;
}
h1 {
  font-size:24px;
  line-height:1.1;
  margin:3px 0 0;
  font-weight:900;
  color:#443528;
  text-shadow:0 1px #f9f5d2;
}
.small-label {
  margin:0;
  font-size:10px;
  letter-spacing:1.1px;
  font-weight:900;
}
.score-label {
  text-align:right;
  color:#405644;
  font-size:9px;
  letter-spacing:1px;
}
.score-label strong {
  display:block;
  font-size:23px;
  letter-spacing:-.5px;
  margin-top:1px;
}
.dashboard {
  display:flex;
  align-items:stretch;
  gap:9px;
  margin:0 3px 12px;
}
.goal-card,.moves-card {
  background:linear-gradient(#fffae6,#ffe8b9);
  border:2px solid #d49c53;
  border-radius:22px;
  box-shadow:inset 0 0 0 3px #fff5d6,0 3px 0 #b88545,0 4px 6px #47314225;
}
.goal-card {
  flex:1;
  padding:10px 13px 7px;
  min-width:0;
}
.goal-card>.small-label {
  color:#936841;
  font-size:9px;
}
.moves-card {
  width:89px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:9px 8px;
  font-weight:900;
  font-size:10px;
  letter-spacing:1px;
}
.moves-card strong {
  font-size:38px;
  line-height:1;
  letter-spacing:-1px;
  color:#643b29;
}
.moves-card.low strong {
  color:#b44046;
}
#goals {
  display:flex;
  align-items:center;
  gap:13px;
  min-height:36px;
  flex-wrap:wrap;
}
.goal {
  display:flex;
  align-items:center;
  gap:4px;
  font-size:23px;
  font-weight:900;
  line-height:1;
}
.goal svg {
  width:31px;
  height:36px;
}
.goal.goal-done {
  opacity:.5;
}
.goal strong {
  min-width:15px;
}
.empty-goals {
  font-size:12px;
  font-weight:normal;
  color:#956f4d;
}
.goal-obstacle {
  width:29px;
  height:29px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.goal-obstacle svg {
  height:30px;
  width:30px;
}
.board-surround {
  position:relative;
  padding:14px;
  border-radius:29px;
  background:linear-gradient(110deg,#ffdc86 0%,#eab85e 8%,#c98a3f 18%,#edbc6a 21%,#f4ca80 48%,#d59848 80%,#ffdf8c 97%);
  box-shadow:inset 0 2px 0 3px #fff0b0,inset 0 -3px 0 4px #b47839,0 5px 0 #75552e,0 8px 18px #293e3550;
  border:2px solid #b67a3b;
}
.board-surround:before {
  content:'';
  position:absolute;
  inset:6px;
  border:2px solid #9b673035;
  border-radius:24px;
  pointer-events:none;
}
.wood-stud {
  position:absolute;
  top:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#bb8c47;
  box-shadow:inset 0 1px 2px #70411e55,0 1px #ffe6a2;
  z-index:2;
}
.stud-one {
  left:30px;
}
.stud-two {
  right:30px;
}
.board {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  padding:7px;
  background:linear-gradient(#402747,#593655);
  border:3px solid #7d4b59;
  border-radius:16px;
  box-shadow:inset 0 3px 8px #261b31b3;
  aspect-ratio:1;
  position:relative;
  touch-action:none;
}
.cell {
  position:relative;
  aspect-ratio:1;
  min-width:0;
  padding:0;
  border:1.5px solid #d9c6a3;
  border-radius:13px;
  background:radial-gradient(at 35% 15%,#fff9e9,#f3e8ce 85%);
  box-shadow:inset 0 1px 0 #fffdf4,inset 0 -1px 0 #dfcfaa55;
  display:grid;
  place-items:center;
  overflow:visible;
  touch-action:none;
}
.cell:focus-visible {
  outline:3px solid #6b8050;
  outline-offset:1px;
  z-index:4;
}
.cell.selected:not(.placeholder) {
  border:2px solid #9a6488;
  box-shadow:0 0 0 2px #f3d482,inset 0 0 0 1px #9a648855;
  z-index:3;
}
.bird-art {
  width:102%;
  height:108%;
  position:absolute;
  left:-1%;
  bottom:-2%;
  filter:drop-shadow(0 2px 1px #3020393d);
  pointer-events:none;
}
.helper-art {
  position:absolute;
  width:100%;
  height:110%;
  inset:-5% 0;
  filter:drop-shadow(0 0 3px #fff0aa);
  pointer-events:none;
}
.cell.helper {
  background:radial-gradient(at 50% 35%,#fffbed,#f4e8ca 80%);
  border-color:#c2a977;
}
.cell.helper:before {
  content:'';
  position:absolute;
  inset:5%;
  border-radius:50%;
  border:1px dotted #af916755;
}
.cell.twig {
  background:linear-gradient(135deg,#fff6df,#f0e0bf);
  border-color:#cdb895;
}
.twig-art,.cloud-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.twig-art {
  z-index:2;
}
.cloud-art {
  z-index:3;
  opacity:.72;
  filter:drop-shadow(0 2px 1px #2537513a);
}
.cell.clouded .bird-art {
  opacity:.55;
}
.cell.placeholder {
  opacity:.5;
  cursor:default;
  background:#f0e4cd;
}
.cell.pop .bird-art {
  animation:pop .18s ease-out both;
}
.cell.fall .bird-art {
  animation:fall .34s cubic-bezier(.2,.75,.3,1.2) both;
  animation-delay:var(--delay,0ms);
}
.cell.shake {
  animation:shake .24s ease-in-out;
}
.combo-banner {
  position:absolute;
  top:30%;
  left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:max-content;
  max-width:95%;
  padding:12px 22px;
  background:linear-gradient(#fff7b2,#ffd76a);
  border:3px solid #e9a13c;
  border-radius:12px;
  color:#70362c;
  text-shadow:0 2px #fff1ae;
  box-shadow:0 5px 0 #b57634,0 8px 14px #3b22516b;
  font-size:clamp(21px,5vw,32px);
  font-weight:1000;
  opacity:0;
  z-index:8;
  pointer-events:none;
  text-align:center;
}
.combo-banner.show {
  animation:combo 1.15s ease-in-out both;
}
.status-line {
  min-height:29px;
  text-align:center;
  color:#3b5b44;
  font-size:12px;
  margin:14px 0 10px;
  font-weight:bold;
  line-height:1.4;
}
.status-line.error {
  color:#863c3c;
  background:#fff0d6cc;
  border-radius:10px;
  padding:6px;
}
.game-tools {
  display:flex;
  justify-content:center;
  gap:24px;
  margin:8px 0 20px;
}
.tool-button {
  background:none;
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:bold;
  min-width:82px;
}
.tool-button>svg {
  width:58px;
  height:58px;
  padding:13px;
  background:linear-gradient(#fff9e3,#ffdf9c);
  border:2px solid #d8a259;
  border-radius:50%;
  box-shadow:inset 0 0 0 3px #fff4c8,0 3px 0 #b78040,0 5px 8px #47344230;
  fill:none;
  stroke:#8c638f;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tool-button:nth-child(2)>svg {
  stroke:#62874e;
}
.tool-button:nth-child(3)>svg {
  stroke:#498ba1;
}
.tool-button>span {
  padding:4px 10px;
  background:linear-gradient(#fff8e3,#ffe2af);
  border:1px solid #d2a16a;
  border-radius:10px;
  box-shadow:0 2px 0 #ac7d49;
  color:#6e4830;
  white-space:nowrap;
}
.tool-button[aria-pressed=true]>svg {
  opacity:.65;
}
footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-weight:900;
  font-size:14px;
  color:#3f6541;
  text-shadow:0 1px #ecf4b6;
}
.leaf {
  width:14px;
  height:22px;
  border-radius:0 90% 0 90%;
  background:linear-gradient(120deg,#b7d75f,#528e48);
  transform:rotate(-20deg);
  border:1px solid #6f9b4d;
}
.leaf.reverse {
  transform:rotate(100deg);
}
dialog {
  color:var(--ink);
}
.panel {
  width:min(94vw,480px);
  max-height:88svh;
  border:2px solid #d29c57;
  border-radius:25px;
  background:linear-gradient(#fff8e7,#fff0cd);
  box-shadow:inset 0 0 0 4px #fffbe9,0 15px 65px #1e243759;
  padding:20px;
  overflow-y:auto;
}
.panel::backdrop {
  background:#243f3e85;
  backdrop-filter:blur(4px);
}
.panel-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  margin-bottom:13px;
}
.panel-header h2 {
  font-size:clamp(20px,5.7vw,24px);
  line-height:1.2;
  min-width:0;
  overflow-wrap:anywhere;
  margin:0;
  color:#633e37;
}
#panel-title:focus { outline:none; }
.panel-header .round-button {
  width:44px;
  height:44px;
  min-width:44px;
  font-size:25px;
}
#close-panel[hidden] { display:none; }
.panel-header:has(#close-panel[hidden]) { grid-template-columns:minmax(0,1fr); }
.panel p {
  font-size:14px;
  line-height:1.5;
  margin:8px 0 15px;
}
.panel .muted {
  font-size:12px;
  color:#876e54;
}
.primary-button,.secondary-button {
  padding:12px 18px;
  border-radius:14px;
  font-weight:bold;
  font-size:15px;
  border:2px solid #779d50;
  box-shadow:inset 0 1px #dceda8,0 3px 0 #51733b;
  background:linear-gradient(#a4c668,#88af53);
  color:#fffbea;
  min-height:46px;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
.secondary-button {
  border-color:#d2a062;
  box-shadow:inset 0 1px #fff7da,0 3px 0 #b48149;
  background:linear-gradient(#fff7e2,#f7ddab);
  color:#71472d;
}
.action-stack {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  margin:18px 0 8px;
}
.upgrade-actions { gap:15px; }
.action-row {
  display:flex;
  gap:10px;
  margin:16px 0;
  flex-wrap:wrap;
}
.action-row>* {
  flex:1;
}
.profile-list {
  display:grid;
  gap:8px;
  margin:14px 0;
}
.profile-choice {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:9px 12px;
  background:#fffaf0;
  border:1px solid #e0c39a;
  border-radius:14px;
  width:100%;
  min-height:56px;
}
.profile-choice svg {
  width:33px;
  height:37px;
  flex-shrink:0;
}
.profile-copy {
  flex:1;
  min-width:0;
}
.profile-copy strong {
  display:block;
  overflow-wrap:anywhere;
}
.profile-copy small {
  display:block;
  font-size:11px;
  color:#99704b;
  margin-top:4px;
}
.profile-arrow {
  font-size:25px;
  color:#af8b61;
}
.profile-choice:hover {
  background:#fff4d6;
}
.profile-note {
  padding:11px 13px;
  background:#eadfc5;
  border-radius:12px;
  border:1px solid #dbcdad;
  font-size:12px!important;
  color:#725e42;
}
.profile-form {
  border-top:1px solid #e2cda9;
  padding-top:16px;
  margin-top:20px;
}
.profile-form label {
  display:block;
  font-size:13px;
  font-weight:bold;
  margin-bottom:7px;
}
.profile-form input {
  width:100%;
  border:2px solid #d3b88e;
  background:#fffdf4;
  color:#644334;
  padding:12px;
  border-radius:12px;
  margin-bottom:10px;
  font-size:16px;
}
.profile-form button {
  width:100%;
}
.form-status {
  font-size:12px!important;
  margin:8px 0!important;
  color:#9e4242;
  min-height:18px;
}
.map-grid {
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin:18px 0;
}
.map-level {
  flex:1 0 max(44px,calc((100% - 33px)/4));
  position:relative;
  border:2px solid #d4ad70;
  border-radius:17px;
  padding:9px 3px;
  background:linear-gradient(#fffdf0,#f4dcaa);
  box-shadow:0 3px 0 #bc9051;
  min-height:75px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.map-level strong {
  font-size:26px;
}
.map-level small {
  font-size:9px;
  color:#8f7754;
}
.map-level.completed {
  border-color:#8ea765;
  background:linear-gradient(#eaf2bd,#bdd58a);
  box-shadow:0 3px 0 #748e51;
}
.map-level.current {
  outline:3px solid #7e5999;
  outline-offset:2px;
}
.map-level.locked {
  opacity:.55;
  filter:saturate(.45);
}
.help-intro {
  background:#ede4cf;
  border-radius:12px;
  padding:12px;
}
.helper-guide {
  display:grid;
  gap:10px;
}
.helper-rule {
  display:flex;
  gap:12px;
  align-items:center;
  background:#fff9e9;
  border:1px solid #e4ceac;
  border-radius:14px;
  padding:9px;
}
.helper-icon {
  position:relative;
  flex-shrink:0;
  width:55px;
  height:60px;
  background:#9874ac;
  border-radius:13px;
}
.helper-icon svg {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
}
.helper-rule strong {
  font-size:14px;
}
.helper-rule p {
  font-size:12px;
  margin:3px 0 0;
  line-height:1.4;
}
.helper-rule-copy { min-width:0; }
.recipe-diagrams { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin:7px 0 3px; }
.recipe-diagram { display:inline-flex; flex-direction:column; align-items:center; gap:2px; vertical-align:middle; }
.recipe-grid { --recipe-size:22px; display:grid; grid-template-columns:repeat(var(--recipe-cols),var(--recipe-size)); grid-template-rows:repeat(var(--recipe-rows),var(--recipe-size)); gap:2px; }
.recipe-space { width:var(--recipe-size); height:var(--recipe-size); position:relative; border-radius:5px; }
.recipe-bird { background:#eee4cc; border:1px solid #d7c5a1; }
.recipe-bird .bird-art { position:absolute; width:100%; height:110%; left:0; top:-7%; filter:none; }
.recipe-label { font-size:10px; font-weight:bold; color:#76596a; }
.recipe-availability { font-size:11px; color:#70576a; }
.cluster-reward-tier .cluster-diagram { flex:0 0 auto; }
.cluster-tier-icons { display:flex; flex-wrap:wrap; gap:3px; margin:4px 0; }
.cluster-tier-icon { position:relative; flex:0 0 30px; width:30px; height:33px; }
.cluster-tier-icon .helper-art { width:100%; height:100%; inset:0; filter:none; }
.cell.recipe-preview-helper { outline:2px solid #a27139; outline-offset:-5px; }
.cell.earned-helper { box-shadow:inset 0 0 0 2px #6b8e58,0 0 0 1px #fff3c4; }
.saved-rules-note { background:#ede4cf; border-left:3px solid #b38b51; padding:9px 11px; border-radius:8px; font-size:12px; line-height:1.4; }
.help-subtitle {
  font-size:16px;
  margin:21px 0 9px;
}
.combo-list {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.combo-list li {
  padding:8px 10px;
  background:#f4e8d3;
  border-radius:9px;
  font-size:12px;
  line-height:1.45;
}
.combo-list strong {
  display:block;
  color:#69447a;
}
.settings-row {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:13px 0;
  border-top:1px solid #e0cda8;
  font-size:13px;
}
.settings-row input {
  width:21px;
  height:21px;
  accent-color:#7b8f46;
}
.result-art {
  width:100px;
  height:110px;
  margin:5px auto;
  display:block;
  filter:drop-shadow(0 5px 2px #67454322);
}
.result-score {
  text-align:center;
  padding:17px;
  background:#f4e3ba;
  border-radius:16px;
  margin-bottom:12px;
}
.result-score span {
  font-size:10px;
  letter-spacing:1px;
  display:block;
  color:#997548;
}
.result-score strong {
  font-size:36px;
  color:#6b426e;
}
.panel .centered {
  text-align:center;
}
.loading-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#916549;
  border-radius:50%;
  animation:pulse 1s infinite;
  margin-right:6px;
}
.no-script {
  position:fixed;
  bottom:20px;
  left:5%;
  right:5%;
  padding:20px;
  background:#fff5da;
  border-radius:20px;
  text-align:center;
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.cell.chorus .bird-art {
  filter:drop-shadow(0 0 5px #ffd66c);
}
@keyframes pop {
  to {
    transform:scale(.1);
    opacity:0;
  }
}
@keyframes fall {
  0% {
    transform:translateY(-65%) scale(.86);
    opacity:0;
  }
  70% {
    transform:translateY(3%) scale(1.06,.95);
    opacity:1;
  }
  100% {
    transform:none;
    opacity:1;
  }
}
@keyframes shake {
  25% {
    transform:translateX(-3px);
  }
  75% {
    transform:translateX(3px);
  }
}
@keyframes combo {
  0% {
    opacity:0;
    transform:translate(-50%,-30%) scale(.75);
  }
  15%,75% {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  100% {
    opacity:0;
    transform:translate(-50%,-75%) scale(.95);
  }
}
@keyframes pulse {
  50% {
    opacity:.3;
  }
}
@media(min-width:850px) {
  .game-shell {
    padding-top:24px;
    width:590px;
  }
  .topbar {
    min-height:95px;
  }
  .scenery {
    background-size:cover;
  }
  .game-tools {
    gap:40px;
  }
  .eyebrow {
    margin-bottom:20px;
  }
  .board-surround {
    padding:16px;
  }
  .board {
    gap:6px;
  }
  .status-line {
    margin-top:16px;
  }
  .game-shell footer {
    padding:0 0 12px;
  }
}
@media(max-width:450px) {
  .game-shell {
    padding:12px 14px 15px;
  }
  .topbar {
    min-height:73px;
  }
  .brand {
    font-size:55px;
  }
  .brand-bird {
    top:-13px;
    width:25px;
    height:31px;
  }
  .round-button {
    width:39px;
    height:39px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.1px;
    margin:1px 0 14px;
  }
  .level-row {
    margin-bottom:10px;
  }
  h1 {
    font-size:21px;
  }
  .score-label strong {
    font-size:21px;
  }
  .dashboard {
    gap:7px;
    margin-bottom:10px;
  }
  .goal-card {
    padding:8px 10px 6px;
    border-radius:18px;
  }
  .moves-card {
    width:75px;
    border-radius:18px;
  }
  .moves-card strong {
    font-size:33px;
  }
  #goals {
    gap:9px;
    min-height:34px;
  }
  .goal {
    font-size:21px;
  }
  .goal svg {
    width:27px;
    height:32px;
  }
  .board-surround {
    padding:10px;
    border-radius:23px;
  }
  .board {
    padding:5px;
    gap:4px;
    border-radius:13px;
    border-width:2px;
  }
  .cell {
    border-radius:10px;
  }
  .game-tools {
    gap:17px;
    margin:2px 0 17px;
  }
  .tool-button {
    min-width:75px;
    font-size:11px;
  }
  .tool-button>svg {
    width:52px;
    height:52px;
    padding:12px;
  }
  .tool-button>span {
    padding:4px 8px;
  }
  .status-line {
    font-size:11px;
    margin:12px 0 7px;
    min-height:30px;
  }
  footer {
    font-size:13px;
  }
  .panel {
    padding:17px;
  }
}
@media(max-width:350px) {
  .game-shell {
    padding:9px;
  }
  .brand {
    font-size:46px;
  }
  .topbar {
    min-height:67px;
  }
  .dashboard {
    margin-left:0;
    margin-right:0;
  }
  .board-surround {
    padding:8px;
  }
  .board {
    gap:3px;
  }
  .cell {
    border-radius:8px;
  }
  .goal-card>.small-label {
    font-size:8px;
  }
  .goal-card {
    padding-left:8px;
    padding-right:8px;
  }
  .moves-card {
    width:65px;
  }
  .game-tools {
    gap:9px;
  }
  .goal {
    font-size:18px;
  }
  .goal svg {
    width:24px;
  }
  #goals {
    gap:6px;
  }
  .map-grid {
    gap:8px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
html.reduce-motion *,html.reduce-motion *:before,html.reduce-motion *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
.color-badge {
  position:absolute;
  bottom:2px;
  left:3px;
  z-index:4;
  display:grid;
  place-items:center;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#fff5d9e8;
  color:#5e3f51;
  font-family:Arial,sans-serif;
  font-size:8px;
  line-height:1;
  font-weight:900;
  border:1px solid #67456c55;
  pointer-events:none;
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:30;
  background:#fff6d5;
  color:#59376a;
  padding:10px 18px;
  border-radius:12px;
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:none;
}
.board:focus {
  outline:3px solid #fff3ac;
  outline-offset:3px;
}
.board-row {
  display:contents;
}
.token-art {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.cell.trading {
  z-index:5;
}
.cell:is(.effect-sweep,.effect-puff,.effect-flutter,.effect-chorus):after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:6;
  animation:helper-glow 240ms ease-out both;
}
.cell.effect-sweep:after {
  background:linear-gradient(transparent 35%,#fff5ad99 45%,#fffbedbb 50%,#fff5ad99 55%,transparent 65%);
  box-shadow:0 0 10px #ffed9d66;
}
.cell.effect-sweep-column:after {
  background:linear-gradient(90deg,transparent 35%,#fff5ad99 45%,#fffbedbb 50%,#fff5ad99 55%,transparent 65%);
}
.cell.effect-puff:after {
  background:radial-gradient(circle,#fff2c777,#ffc96d44,transparent 70%);
  border:2px solid #ffdfaa;
  box-shadow:0 0 15px #ffe5a177;
}
.cell.effect-flutter:after {
  background:radial-gradient(circle at 70% 20%,#fffaf3cc,transparent 45%);
  border:2px solid #eae0ff;
  box-shadow:0 0 12px #eee2ff99;
}
.cell.effect-chorus:after {
  background:radial-gradient(circle,transparent 30%,#ffd7aa55 70%);
  border:2px solid #ffdc8b;
  box-shadow:0 0 10px #ffd872aa;
}
@keyframes helper-glow {
  from { opacity:.25; transform:scale(.92); }
  60% { opacity:1; transform:scale(1.04); }
  to { opacity:.4; transform:scale(1); }
}
@media(max-width:650px) {
  .scenery {
    background-image:url('assets/forest-mobile.svg');
    background-size:100% 100%;
  }
  .scenery:after {
    background:linear-gradient(transparent 60%,#3454370c);
  }
  footer {
    color:#385b3d;
    text-shadow:0 1px 0 #f2f3c9;
    font-weight:900;
  }
}

/* One viewport, one game: the square uses whichever space is smaller. */
html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body {
  height:100vh;
  height:100dvh;
}
.game-shell {
  display:flex;
  flex-direction:column;
  width:min(100%,700px);
  height:100vh;
  height:100dvh;
  margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  overflow:hidden;
}
.topbar {
  flex:0 0 auto;
  height:76px;
  min-height:0;
}
.brand {
  font-size:clamp(43px,9vw,72px);
  white-space:nowrap;
}
.eyebrow {
  flex:0 0 auto;
  margin:0 0 10px;
  font-size:9px;
}
.text-button {
  min-height:27px;
  margin-top:5px;
  padding:4px 12px;
}
.play-area {
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
}
.level-row {
  flex:0 0 auto;
  margin:0 5px 9px;
}
h1 {
  font-size:clamp(21px,4vw,26px);
}
.dashboard {
  flex:0 0 auto;
  margin:0 3px 10px;
  min-height:67px;
}
.goal-card {
  padding:8px 12px 6px;
}
.moves-card {
  padding:8px;
}
.board-space {
  position:relative;
  display:grid;
  place-items:center;
  flex:1 1 0;
  min-height:0;
  min-width:0;
  container-type:size;
}
.board-surround {
  width:min(100%,calc(100vh - 340px));
  aspect-ratio:1;
  max-width:100%;
  max-height:100%;
  padding:clamp(7px,1.7vmin,15px);
}
@supports(width:1cqh) {
  .board-surround {
    width:min(100cqw,100cqh);
    height:min(100cqw,100cqh);
  }
}
.board {
  width:100%;
  height:100%;
  aspect-ratio:1;
  padding:clamp(3px,.9vmin,7px);
  gap:clamp(2px,.9vmin,6px);
}
.cell {
  border-radius:clamp(7px,2vmin,13px);
}
.status-line {
  flex:0 0 auto;
  min-height:30px;
  margin:9px 2px 5px;
  font-size:11px;
  line-height:1.35;
}
.game-tools {
  flex:0 0 auto;
  gap:clamp(15px,5vw,40px);
  margin:3px 0 9px;
}
.tool-button {
  min-width:75px;
  gap:6px;
}
.tool-button > svg {
  width:54px;
  height:54px;
}
footer {
  flex:0 0 auto;
  font-size:12px;
  line-height:18px;
  padding:0!important;
}
.leaf {
  width:11px;
  height:17px;
}
.panel {
  max-height:calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media(max-height:760px) {
  .game-shell {
    padding-top:max(7px,env(safe-area-inset-top));
    padding-bottom:max(7px,env(safe-area-inset-bottom));
  }
  .topbar { height:57px; }
  .brand { font-size:clamp(43px,9vw,58px); }
  .brand-bird { width:23px; height:28px; top:-12px; }
  .eyebrow { margin-bottom:8px; }
  .eyebrow > span { display:none; }
  .text-button { margin-top:0; min-height:26px; }
  .level-row { margin-bottom:7px; }
  h1 { font-size:21px; }
  .dashboard { min-height:61px; margin-bottom:8px; }
  .goal-card { padding:7px 10px 5px; border-radius:17px; }
  .moves-card { width:74px; border-radius:17px; }
  .moves-card strong { font-size:31px; }
  .goal { font-size:21px; }
  .goal svg { width:26px; height:31px; }
  #goals { gap:9px; min-height:31px; }
  .tool-button > svg { width:46px; height:46px; padding:10px; }
  .tool-button { gap:5px; font-size:11px; }
  .game-tools { margin-bottom:7px; }
  .status-line { margin-top:7px; min-height:29px; }
}
@media(max-height:700px) {
  .game-shell {
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
    padding-top:max(5px,env(safe-area-inset-top));
    padding-bottom:max(5px,env(safe-area-inset-bottom));
  }
  .topbar { height:40px; }
  .brand { font-size:40px; line-height:1; }
  .brand-bird { width:20px; height:24px; top:-9px; }
  .round-button { width:36px; height:36px; }
  .round-button svg { width:19px; height:19px; }
  .eyebrow { margin-bottom:4px; }
  .text-button { min-height:22px; padding:2px 10px; font-size:11px; }
  .level-row { margin-bottom:4px; }
  h1 { font-size:17px; margin-top:2px; }
  .small-label { font-size:8px; }
  .score-label strong { font-size:19px; }
  .dashboard { min-height:52px; margin-bottom:7px; }
  .goal-card { padding:5px 8px 4px; border-radius:16px; }
  .goal-card > .small-label { font-size:8px; }
  .moves-card { width:64px; padding:5px; font-size:9px; }
  .moves-card strong { font-size:26px; }
  .goal { font-size:17px; gap:2px; }
  .goal svg { width:22px; height:26px; }
  .goal-obstacle,.goal-obstacle svg { width:22px; height:22px; }
  #goals { gap:6px; min-height:26px; flex-wrap:nowrap; }
  .board-surround { border-radius:20px; padding:5px; }
  .board-surround:before { inset:4px; border-radius:16px; }
  .board { border-radius:11px; padding:2px; gap:2px; border-width:2px; }
  .color-badge { width:11px; height:11px; font-size:7px; left:2px; bottom:1px; }
  .status-line { font-size:10px; margin:4px 2px 2px; min-height:24px; line-height:1.2; }
  .tool-button > svg { width:36px; height:36px; padding:7px; }
  .tool-button { font-size:10px; gap:3px; }
  .tool-button > span { padding:2px 8px; }
  .game-tools { margin:2px 0 5px; }
  footer { display:none; }
  .leaf { width:8px; height:12px; }
}

/* Board-local presentation: no viewport flashes or extra layout tracks. */
.score-label { position:relative; }
.speed-bonus {
  position:absolute;
  right:calc(100% + 8px);
  bottom:3px;
  white-space:nowrap;
  background:#fff0b5;
  border:1px solid #d6b765;
  color:#62723c;
  padding:3px 5px;
  border-radius:8px;
  font-size:9px;
  letter-spacing:0;
  font-weight:bold;
}
.speed-bonus[hidden] { display:none; }
.motion-layer {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  z-index:9;
  contain:strict;
}
.motion-sprite,.drag-ghost {
  position:absolute;
  pointer-events:none;
  transform-origin:center;
  filter:drop-shadow(0 3px 2px #3c264c40);
}
.drag-clip {
  position:fixed;
  z-index:15;
  overflow:hidden;
  pointer-events:none;
  border-radius:12px;
  contain:strict;
}
.drag-ghost { left:0; top:0; will-change:transform; }
.cell.drag-origin .token-art { opacity:.25; }
.cell.preview-neighbor { outline:2px solid #759151; outline-offset:0; }
.cell.preview-invalid { outline:2px dashed #ba6e79; outline-offset:0; }
.cell.preview-impact { box-shadow:inset 0 0 0 2px #bf944e; }
.cell.preview-matched { box-shadow:inset 0 0 0 3px #8d773a; }
.cell.preview-target { outline:2px dashed #9977b8; outline-offset:-2px; }
.cell.hint-cell {
  outline:2px solid #73934e;
  outline-offset:1px;
  z-index:3;
  animation:hint-breathe 1800ms ease-in-out 3;
}
@keyframes hint-breathe {
  0%,100% { box-shadow:inset 0 0 0 1px #78965333; }
  50% { box-shadow:inset 0 0 0 2px #78965399; }
}
.motion-path {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.motion-path path { stroke-width:5px; }
.path-flutter path { stroke:#a385c5; stroke-dasharray:5 7; }
.path-chorus path { stroke:#aa7c9b; stroke-width:3px; }
.motion-ring {
  position:absolute;
  border-radius:50%;
  border:5px solid #c69b57;
  background:radial-gradient(transparent 35%,#fff2b633,transparent 70%);
  box-shadow:0 0 15px #ffe2a955;
}
.ring-puff { border-color:#c28b60; }
.ring-chorus { border-color:#ad79ad; }
.motion-area {
  position:absolute;
  border:3px solid #c28b60;
  border-radius:18%;
  background:radial-gradient(#ffe8bf33,transparent);
  box-shadow:inset 0 0 8px #ffeec955;
}
.motion-beam {
  position:absolute;
  border-radius:50%;
  background:linear-gradient(transparent,#e6ba69aa,transparent);
  box-shadow:0 0 8px #ffeaa555;
}
.beam-column { background:linear-gradient(90deg,transparent,#e6ba69aa,transparent); }
.motion-feather {
  position:absolute;
  width:8px;
  height:13px;
  border-radius:80% 0 70% 0;
  background:#ffe384;
  border:1px solid #fff0c7;
}
.feather-red { background:#fc9b78; }
.feather-blue { background:#93d6fb; }
.feather-green { background:#b2dc73; }
.cell.motion-sweep { box-shadow:inset 0 0 0 2px #bd914b; }
.cell.motion-puff { box-shadow:inset 0 0 0 2px #c28b60; }
.cell.motion-flutter { box-shadow:inset 0 0 0 2px #a385c5; }
.cell.motion-chorus { box-shadow:inset 0 0 0 2px #aa7c9b; }
.cell.motion-source { outline:1px solid #bd914b; outline-offset:-3px; }
.cell.motion-match { box-shadow:inset 0 0 0 2px #bd9d58; }
.cell.motion-converted { outline:2px solid #ad79ad; outline-offset:-2px; }
.cell.empty { background:#eadfc8; border-color:#d6c8ac; box-shadow:inset 0 1px 2px #c8b79533; }
.helper-primary { width:94%; height:104%; inset:-2% 3%; filter:drop-shadow(0 2px 1px #30203966); }
.cell.sweep { border-style:double; border-width:3px; }
.cell.puff { border-radius:35%; border-color:#c5a487; }
.cell.flutter { border-color:#b4a1c7; }
.cell.chorus { border-color:#c2a977; }
.goal-name { font-size:11px; color:#70546e; }
.goal-flock { position:relative; }
.goal-flock:after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:3px; border-radius:2px; background:linear-gradient(90deg,#d6a741 var(--goal-progress),#d6a74133 var(--goal-progress)); }
.helper-teaching {
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  z-index:16;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 6px 5px 9px;
  border:2px solid #e2b75f;
  border-radius:12px;
  background:#fff8e8f5;
  color:#644567;
  box-shadow:0 2px 6px #3e2a4d33;
  pointer-events:none;
  font-size:11px;
  line-height:1.3;
}
.helper-teaching[hidden] { display:none; }
.teaching-recipe { flex:0 0 auto; }
.teaching-recipe .recipe-grid { --recipe-size:16px; gap:1px; }
#teaching-message { min-width:0; }
.helper-teaching button { flex:0 0 auto; min-width:44px; min-height:44px; border:1px solid #d9bb70; border-radius:9px; padding:4px; background:#f4e4b9; color:#664754; font-size:10px; font-weight:bold; pointer-events:auto; }
.path-home path { stroke:#c09a50; stroke-width:3px; }
@media (max-height:700px) { .helper-teaching { font-size:10px; gap:4px; padding:3px 4px 3px 7px; top:6px; left:6px; right:6px; } .goal-name { font-size:9px; } }
.motion-combo-label {
  position:absolute;
  left:50%;
  top:8%;
  transform:translateX(-50%);
  max-width:95%;
  width:max-content;
  border:2px solid #d5a350;
  border-radius:10px;
  padding:5px 10px;
  background:#fff1be;
  color:#774761;
  font-size:clamp(12px,3vw,20px);
  font-weight:900;
  text-align:center;
  text-transform:capitalize;
  box-shadow:0 3px 0 #ad7e48;
}
.earned-reveal-label { font-size:clamp(11px,2.8vw,16px); background:#fff7d9; }
.earned-reveal-sprite { filter:drop-shadow(0 0 4px #ffe9a0); }
@media(max-height:700px) {
  .speed-bonus { font-size:8px; right:calc(100% + 5px); padding:2px 4px; }
}
/* Status updates scroll within one stable row instead of resizing the puzzle. */
.status-line {
  flex:0 0 36px;
  height:36px;
  min-height:0;
  max-height:36px;
  margin:4px 2px 2px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  align-content:safe center;
}
.status-line:focus-visible { outline:3px solid #4e728f; outline-offset:1px; border-radius:6px; }
.cell:active:not(:disabled) { transform:none; }

/* Optional layers share the existing goal row; only the flock is required. */
.optional-bonus-goals { display:flex; align-items:center; gap:6px; margin-left:auto; }
.optional-bonus-label { font-size:8px; font-weight:900; color:#70546e; writing-mode:vertical-rl; }
@media (max-height:700px) { .optional-bonus-goals { gap:4px; } .optional-bonus-label { font-size:7px; } }

/* The loaded-client label shares the existing nickname row without resizing it. */
.eyebrow { position:relative; }
.eyebrow-tagline { visibility:hidden; }
#client-version { position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:12px; line-height:1; letter-spacing:0; white-space:nowrap; }
.eyebrow .text-button { margin-left:auto; margin-right:0; max-width:calc(100% - 96px); }