@import url("data:text/css,");

:root {
  color-scheme: dark;
  --ink: #f8f3df;
  --muted: #b9c9bd;
  --deep: #102c30;
  --deep-2: #173b3a;
  --panel: rgba(24, 60, 57, 0.88);
  --panel-line: rgba(244, 238, 206, 0.13);
  --gold: #f4cd69;
  --coral: #ef8c79;
  --mint: #71c8a1;
  --shadow: 0 18px 50px rgba(2, 17, 18, 0.35);
  --ease-out: cubic-bezier(.2, .75, .2, 1);
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
  background: #092427;
}

body {
  min-height: 100dvh;
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(248, 219, 123, .9);
  outline-offset: 3px;
}

.is-hidden { display: none !important; }

.app-shell {
  position: relative;
  width: 100%;
  max-width: 620px;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(94, 170, 132, .28), transparent 36%),
    linear-gradient(165deg, #1d4a45 0%, #123437 54%, #0b292d 100%);
  box-shadow: 0 0 90px rgba(0, 0, 0, .5);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 15%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 27%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 72%, #fff 0 1px, transparent 1.5px);
  background-size: 90px 90px, 130px 130px, 170px 170px;
}

.ambient {
  position: absolute;
  width: 280px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .12;
  pointer-events: none;
}
.ambient-one { background: #f2a885; top: 15%; left: -180px; }
.ambient-two { background: #6bb9c8; bottom: 5%; right: -180px; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.99);
  transition: opacity .32s ease, transform .32s var(--ease-out), visibility .32s;
}
.screen.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }

.glass-panel {
  background: linear-gradient(145deg, rgba(42, 86, 77, .9), rgba(20, 54, 53, .92));
  border: 1px solid var(--panel-line);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 12px 30px rgba(4, 24, 25, .22);
  backdrop-filter: blur(18px);
}

.eyebrow {
  margin: 0 0 7px;
  color: #9fd1b4;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  color: #f7eecf;
  background: rgba(8, 37, 38, .4);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .15s ease, background .15s;
}
.icon-button:active { transform: scale(.9); background: rgba(244, 205, 105, .2); }

.primary-button {
  position: relative;
  min-height: 50px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 217, .48);
  border-radius: 18px;
  color: #183736;
  background: linear-gradient(180deg, #ffe7a0, #efbe58);
  box-shadow: 0 8px 0 #9f6631, 0 14px 26px rgba(5, 23, 23, .34), inset 0 2px rgba(255,255,255,.7);
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.primary-button:hover { filter: brightness(1.04); }
.primary-button:active { transform: translateY(5px) scale(.98); box-shadow: 0 3px 0 #9f6631, 0 8px 16px rgba(5,23,23,.3); }
.primary-button--large { min-height: 60px; width: 100%; font-size: 1.05rem; }
.button-glint { position: absolute; inset: 3px 16% auto; height: 2px; border-radius: 9px; background: rgba(255,255,255,.65); }

.text-button {
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  color: #d8e3d3;
  background: transparent;
  font-weight: 750;
  cursor: pointer;
}

/* Start */
.screen--start { padding: max(24px, env(safe-area-inset-top)) 28px max(20px, env(safe-area-inset-bottom)); justify-content: space-between; }
.settings-button { position: absolute; top: max(22px, env(safe-area-inset-top)); right: 22px; }
.hero { display: flex; flex-direction: column; align-items: center; margin: auto 0 0; text-align: center; }
.brand-mark { position: relative; width: 150px; height: 150px; margin-bottom: 25px; filter: drop-shadow(0 18px 22px rgba(4, 21, 21, .35)); }
.brand-mark::before { content: ""; position: absolute; inset: 20px; border-radius: 48% 52% 44% 56%; background: radial-gradient(circle at 38% 34%, #fff8c9 0 9%, #f6d16f 30%, #eb917a 72%); box-shadow: 0 0 36px rgba(248,211,107,.28), inset -10px -14px rgba(154,71,65,.15); }
.brand-mark span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff9df; font-size: 50px; text-shadow: 0 0 20px #fff4a6; }
.brand-mark i { position: absolute; width: 46px; height: 82px; border-radius: 70% 10% 70% 15%; background: linear-gradient(145deg, #83d0a3, #438b73); transform-origin: 80% 100%; }
.brand-mark i:nth-child(1) { left: 0; top: 50px; transform: rotate(-58deg); }
.brand-mark i:nth-child(2) { right: 0; top: 50px; transform: scaleX(-1) rotate(-58deg); }
.brand-mark i:nth-child(3) { left: 23px; top: 6px; transform: rotate(-5deg) scale(.8); }
.brand-mark i:nth-child(4) { right: 23px; top: 6px; transform: scaleX(-1) rotate(-5deg) scale(.8); }
.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 14vw, 4.8rem); line-height: .78; font-weight: 500; text-shadow: 0 7px 24px rgba(3,20,21,.35); }
.hero h1 span { display: block; color: #f9d276; font-style: italic; font-size: 1.08em; }
.hero-copy { max-width: 410px; margin: 27px auto 0; color: #c9d7c9; font-size: .98rem; line-height: 1.58; }
.start-actions { width: min(100%, 390px); margin: 44px auto auto; text-align: center; }
.start-footer { display: flex; justify-content: space-between; margin-top: 24px; color: rgba(220,232,220,.55); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.version-tap { user-select: none; }

/* Map */
.screen--map { overflow-y: auto; scrollbar-width: none; padding-bottom: max(50px, env(safe-area-inset-bottom)); }
.screen--map::-webkit-scrollbar { display: none; }
.map-header { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 12px; border-width: 0 0 1px; }
.map-header h2 { margin: 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.map-header .eyebrow { margin: 0 0 1px; font-size: .57rem; }
.star-total { display: flex; align-items: center; gap: 5px; height: 38px; padding: 0 12px; border-radius: 18px; background: rgba(6,31,32,.38); color: #fff4cb; }
.star-total span { color: var(--gold); }

.restoration-card { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; margin: 18px 18px 8px; padding: 16px; border: 1px solid rgba(244,223,163,.15); border-radius: 24px; background: linear-gradient(135deg, rgba(93,132,101,.3), rgba(30,64,60,.65)); box-shadow: var(--shadow); }
.restoration-card h3 { margin: 0 0 9px; font-family: Georgia, serif; font-weight: 500; font-size: 1.08rem; }
.garden-vignette { position: relative; height: 88px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(246,205,105,.28), transparent 40%), linear-gradient(#224b48, #163736); }
.garden-vignette::after { content:""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 25px; border-radius: 50%; background: #315d4f; box-shadow: inset 0 6px 12px rgba(0,0,0,.18); }
.garden-orb { position: absolute; z-index: 2; left: 39px; top: 21px; color: #ffe891; text-shadow: 0 0 16px #ffc957; }
.garden-vignette i { position: absolute; z-index: 2; bottom: 22px; width: 18px; height: 32px; border-radius: 80% 5%; background: #75b47f; transform-origin: bottom; }
.garden-vignette i:nth-of-type(1){left:23px;transform:rotate(-24deg)} .garden-vignette i:nth-of-type(2){left:50px;height:39px}.garden-vignette i:nth-of-type(3){right:18px;transform:rotate(27deg)}
.progress-track { height: 6px; border-radius: 8px; overflow: hidden; background: rgba(2,23,24,.45); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #67c19d, #f3d374); transition: width .5s var(--ease-out); }
.restoration-card small { display: block; margin-top: 6px; color: #a9c1b1; font-size: .68rem; }

.campaign-map { position: relative; padding: 18px 22px 80px; }
.chapter-section { position: relative; padding: 28px 0 18px; }
.chapter-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 25px; }
.chapter-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; }
.chapter-heading p { margin: 3px 0 0; color: #9eb8aa; font-size: .78rem; }
.chapter-badge { display: grid; place-items: center; min-width: 54px; height: 29px; padding: 0 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(8,36,36,.35); color: #d7e5d5; font-size: .7rem; font-weight: 800; }
.level-path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px 0; }
.level-path::before { content: ""; position: absolute; top: 38px; bottom: 38px; left: 50%; width: 4px; margin-left: -2px; border-radius: 4px; background: repeating-linear-gradient(to bottom, rgba(123,177,147,.45) 0 10px, rgba(123,177,147,.12) 10px 18px); }
.level-row { position: relative; z-index: 1; display: flex; width: 100%; padding: 0 12%; }
.level-row:nth-child(odd) { justify-content: flex-start; }
.level-row:nth-child(even) { justify-content: flex-end; }
.level-node { position: relative; display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 3px solid rgba(255,255,255,.3); border-radius: 50% 48% 52% 46%; color: #1d3937; background: linear-gradient(155deg, #fae6a6, #e7b55b); box-shadow: 0 6px 0 #85603d, 0 12px 20px rgba(3,22,23,.35), inset 0 2px rgba(255,255,255,.8); font-size: 1.18rem; font-weight: 950; cursor: pointer; transition: transform .18s var(--ease-out); }
.level-node:hover { transform: scale(1.06); }
.level-node:active { transform: translateY(4px); }
.level-node.is-current { animation: nodePulse 1.8s ease-in-out infinite; }
.level-node.is-current::after { content: "Hier"; position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); padding: 4px 8px; border-radius: 10px; color: #f8efcf; background: #315f57; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; }
.level-node.is-locked { color: #779188; border-color: rgba(255,255,255,.08); background: linear-gradient(145deg,#31524e,#213e3e); box-shadow: 0 5px 0 #142d2d; cursor: default; }
.node-stars { position: absolute; bottom: -12px; display: flex; gap: 0; color: #695e48; font-size: .72rem; letter-spacing: -2px; text-shadow: 0 1px rgba(255,255,255,.18); }
.node-stars .lit { color: #ffe38a; text-shadow: 0 1px 4px rgba(238,173,53,.8); }
.chapter-landmark { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin: 32px 8px 0; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(12,42,42,.45); }
.landmark-icon { display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(0,0,0,.16);font-size:1.5rem;filter:grayscale(1);opacity:.65}.chapter-landmark.is-restored .landmark-icon{filter:none;opacity:1;color:#ffe186;text-shadow:0 0 14px #efb757}.chapter-landmark b{display:block;font-family:Georgia,serif;font-weight:500}.chapter-landmark small{color:#9eb9ab}

/* Game */
.screen--game { padding: max(10px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
.game-header { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; padding: 2px 0 8px; }
.level-identity { text-align: center; }
.level-identity span { color: #99c4ab; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.level-identity h2 { margin: 1px 0 0; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.game-status { display: grid; grid-template-columns: 64px 1fr 72px; align-items: center; gap: 7px; min-height: 64px; padding: 8px; border-radius: 20px; }
.moves-counter, .score-counter { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;border-radius:14px;background:rgba(7,32,33,.3); }
.moves-counter span,.score-counter span { color:#9db5a8;font-size:.54rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em }
.moves-counter strong { font-size:1.55rem;line-height:1.05;color:#fff0bd }.score-counter strong{font-size:.86rem;margin-top:4px}.moves-counter.is-low{animation:lowMoves 1s ease-in-out infinite}.moves-counter.is-low strong{color:#ffab98}
.objective-list { display:flex;justify-content:center;gap:5px;min-width:0; }
.objective-chip { position:relative;display:flex;align-items:center;gap:4px;height:42px;min-width:52px;padding:4px 7px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.055); }
.objective-chip.is-complete { background:rgba(101,192,148,.18); }
.objective-chip.is-complete::after{content:"✓";position:absolute;right:-3px;top:-5px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#77c99c;color:#123a34;font-size:.65rem;font-weight:900}
.objective-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:rgba(0,0,0,.15);font-size:.92rem}.objective-chip b{font-size:.78rem}.objective-chip small{display:none}

.board-stage { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; margin: 8px 0; }
.board-stage.is-shaking { animation:stageShake .24s ease-out; }
.board-stage::before { content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(114,194,158,.12),transparent 67%);filter:blur(14px); }
.board { --gap: 3px; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: var(--gap); width: min(94vw, 560px, calc((100dvh - 235px) * var(--ratio))); aspect-ratio: var(--ratio); padding: 7px; border: 1px solid rgba(210,236,216,.13); border-radius: 23px; background: linear-gradient(145deg,rgba(7,31,34,.7),rgba(22,56,54,.65)); box-shadow: 0 21px 45px rgba(3,20,22,.38), inset 0 1px rgba(255,255,255,.08); touch-action: none; user-select: none; }
.board.is-locked { pointer-events: none; }
.board-cell { position:relative;min-width:0;min-height:0;padding:3px;border:0;border-radius:14%;background:rgba(123,171,145,.09);cursor:pointer;isolation:isolate;transition:filter .15s,transform .15s; }
.board-cell::before { content:"";position:absolute;inset:2px;border-radius:13%;border:1px solid rgba(255,255,255,.025);pointer-events:none; }
.board-cell.is-void { visibility:hidden;pointer-events:none }.board-cell.is-wall{cursor:default;background:linear-gradient(145deg,#49645e,#283f3e);box-shadow:inset 2px 2px rgba(255,255,255,.1),inset -3px -4px rgba(3,20,21,.3)}.board-cell.is-wall::after{content:"";position:absolute;inset:25%;border-radius:30%;background:rgba(10,34,34,.25)}
.board-cell.is-selected { z-index:4;transform:scale(1.1);filter:brightness(1.18) drop-shadow(0 0 8px rgba(255,237,164,.7)); }
.board-cell.is-hint { animation:hintBounce .75s ease-in-out 2; z-index:4; }
.board-cell.is-clearing .tile { animation:matchPop .2s var(--ease-out) forwards; }
.board-cell.is-damaged { animation:damageShake .22s ease; }
.board-cell.is-falling .tile { animation:fallIn .24s var(--ease-out); }
.board-cell.is-invalid { animation:invalidShake .32s ease; }

.cell-underlay { position:absolute;inset:3px;border-radius:13%;pointer-events:none; }
.cell-underlay.jelly-1 { background:rgba(148,225,244,.19);box-shadow:inset 0 0 0 2px rgba(191,243,250,.38),inset 0 0 12px rgba(103,196,221,.3); }
.cell-underlay.jelly-2 { background:rgba(148,225,244,.28);box-shadow:inset 0 0 0 3px rgba(221,250,255,.55),inset 0 0 15px rgba(103,196,221,.4); }
.cell-underlay.slime { background:radial-gradient(circle at 35% 32%,rgba(187,216,116,.75) 0 8%,transparent 9%),linear-gradient(145deg,rgba(87,133,64,.62),rgba(42,85,52,.72));box-shadow:inset 0 0 9px rgba(29,52,28,.55); }
.cell-underlay.exit::after { content:"⌄";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);color:#ffe27d;font-weight:900;text-shadow:0 0 8px #f4c859; }
.cell-underlay.generator::before { content:"✦";position:absolute;left:50%;top:-4px;transform:translateX(-50%);color:#9ae1cd;font-size:.7em; }

.tile { position:absolute;z-index:2;inset:7%;display:grid;place-items:center;filter:drop-shadow(0 4px 3px rgba(2,17,18,.35));transition:transform .16s var(--ease-out);pointer-events:none; }
.tile-core { position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.27);box-shadow:inset 0 3px 4px rgba(255,255,255,.28),inset 0 -5px 7px rgba(57,24,38,.22); }
.tile-core::after { content:"";position:absolute;left:18%;right:28%;top:10%;height:20%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.43),transparent);transform:rotate(-17deg); }
.shape-glyph { position:relative;z-index:2;color:rgba(255,255,255,.78);font-size:clamp(.7rem,4vw,1.35rem);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.24); }
.tile[data-color="rose"] .tile-core { border-radius:48% 52% 42% 58%;background:linear-gradient(145deg,#ffab95,#db6670); }
.tile[data-color="sun"] .tile-core { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(145deg,#ffe47d,#e9a83f); }
.tile[data-color="dew"] .tile-core { border-radius:54% 46% 58% 42% / 67% 40% 60% 33%;background:linear-gradient(145deg,#75d5cc,#319c9d);transform:rotate(-4deg); }
.tile[data-color="leaf"] .tile-core { border-radius:65% 12% 65% 15%;background:linear-gradient(145deg,#9dd878,#53a262);transform:rotate(-6deg); }
.tile[data-color="violet"] .tile-core { border-radius:50%;background:linear-gradient(145deg,#c99fe6,#8668bd); }
.tile[data-color="violet"] .tile-core::before { content:"";position:absolute;width:58%;height:58%;border-radius:50%;background:rgba(58,43,105,.32);transform:translate(22%,-10%); }
.tile[data-color="sky"] .tile-core { clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%);background:linear-gradient(145deg,#82c9ea,#4a83c4); }

.tile.is-item { inset:4%;filter:drop-shadow(0 0 7px rgba(255,229,126,.75)); }
.tile.is-item .tile-core { clip-path:none!important;border-radius:50%!important;background:radial-gradient(circle,#fffbe7 0 18%,#f5d76e 20% 39%,rgba(240,178,78,.7) 42%,transparent 66%)!important;border:0;box-shadow:none;animation:wispFloat 1.5s ease-in-out infinite; }
.tile.is-item .tile-core::before,.tile.is-item .tile-core::after{content:"";position:absolute;width:31%;height:47%;border-radius:80% 10%;background:#8bd0a6;top:45%}.tile.is-item .tile-core::before{left:14%;transform:rotate(-40deg)}.tile.is-item .tile-core::after{right:14%;transform:scaleX(-1) rotate(-40deg)}.tile.is-item .shape-glyph{color:white;font-size:1.15em;text-shadow:0 0 8px #fff}

.special-mark { position:absolute;z-index:3;inset:5%;border-radius:inherit;overflow:hidden; }
.tile[data-special="hline"] .special-mark { background:repeating-linear-gradient(to bottom,transparent 0 34%,rgba(255,255,255,.85) 35% 48%,rgba(71,49,79,.55) 49% 62%,transparent 63%); }
.tile[data-special="vline"] .special-mark { background:repeating-linear-gradient(to right,transparent 0 34%,rgba(255,255,255,.85) 35% 48%,rgba(71,49,79,.55) 49% 62%,transparent 63%); }
.tile[data-special="bomb"] .special-mark { inset:16%;border:3px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 3px rgba(63,37,71,.42),0 0 11px rgba(255,244,190,.8); }
.tile[data-special="color"] .tile-core { clip-path:none;border-radius:50%;border-color:rgba(255,255,255,.62);background:conic-gradient(#ed7f79,#efc64e,#69bb7d,#56b6c6,#8d75cd,#ed7f79);box-shadow:inset 0 0 0 7px rgba(23,51,52,.36),inset 0 0 14px #fff,0 0 9px rgba(255,238,157,.62);animation:prismSpin 4s linear infinite; }
.tile[data-special="color"] .shape-glyph{font-size:1.25em;color:#fff;text-shadow:0 0 8px #fff}

.blocker { position:absolute;z-index:3;inset:6%;display:grid;place-items:center;pointer-events:none; }
.blocker.crate { border:3px solid #9a633e;border-radius:15%;background:linear-gradient(35deg,transparent 42%,#b97e4d 43% 57%,transparent 58%),linear-gradient(-35deg,transparent 42%,#b97e4d 43% 57%,transparent 58%),linear-gradient(#d79d5e,#9d633f);box-shadow:inset 0 0 0 3px rgba(251,190,112,.35),0 4px 4px rgba(0,0,0,.25)}
.blocker.stone { border:2px solid #66716a;border-radius:32% 45% 38% 48%;background:radial-gradient(circle at 31% 27%,#9aa59b 0 8%,transparent 9%),linear-gradient(145deg,#7d8982,#4a5955);box-shadow:inset 0 3px rgba(255,255,255,.14),0 4px 4px rgba(0,0,0,.28)}
.blocker::after { content:attr(data-layers);position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#163c3a;color:#fff1c7;font-size:.61rem;font-weight:900;box-shadow:0 2px 4px rgba(0,0,0,.3) }.blocker[data-layers="1"]::after{display:none}
.chain-overlay { position:absolute;z-index:5;inset:10%;pointer-events:none;background:linear-gradient(45deg,transparent 43%,#d5ded2 44% 49%,#61746d 50% 57%,transparent 58%),linear-gradient(-45deg,transparent 43%,#d5ded2 44% 49%,#61746d 50% 57%,transparent 58%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }

.effect-layer { position:absolute;z-index:8;inset:0;pointer-events:none;overflow:visible; }
.spark { --tx:0px;--ty:-30px;position:absolute;width:7px;height:7px;margin:-3px;border-radius:50%;background:#ffe9a1;box-shadow:0 0 9px #ffd567;animation:sparkFly .52s ease-out forwards; }
.score-pop { position:absolute;color:#fff4c4;font-size:.85rem;font-weight:950;text-shadow:0 2px 4px rgba(0,0,0,.7);animation:scoreRise .7s ease-out forwards; }
.line-flash { position:absolute;border-radius:9px;background:linear-gradient(90deg,transparent,rgba(255,247,193,.9),transparent);box-shadow:0 0 16px #fff1a5;animation:lineFlash .32s ease-out forwards; }
.cascade-banner { position:absolute;z-index:12;left:50%;top:45%;transform:translate(-50%,-50%) scale(.7);opacity:0;white-space:nowrap;color:#fff4c6;font-family:Georgia,serif;font-size:clamp(1.5rem,8vw,2.7rem);font-style:italic;text-shadow:0 3px 0 #8f583b,0 7px 20px rgba(0,0,0,.55);pointer-events:none; }
.cascade-banner.show { animation:bannerPop .7s var(--ease-out); }

.booster-bar { display:flex;justify-content:center;gap:9px;min-height:58px; }
.booster-button { position:relative;display:grid;grid-template-columns:36px auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;min-width:91px;height:54px;padding:5px 9px 5px 6px;border:1px solid rgba(255,255,255,.1);border-radius:17px;color:#dce9dc;background:rgba(9,37,38,.56);box-shadow:inset 0 1px rgba(255,255,255,.06);cursor:pointer; }
.booster-button:active,.booster-button.is-active{transform:scale(.95);background:rgba(244,205,105,.2)}.booster-button:disabled{opacity:.38;filter:grayscale(1)}
.booster-icon { grid-row:1/3;display:grid;place-items:center;width:35px;height:35px;border-radius:12px;background:linear-gradient(145deg,#5a8f78,#2d5a51);color:#fff0b3;font-size:1.2rem;box-shadow:inset 0 1px rgba(255,255,255,.14) }
.booster-button>span:nth-child(2){align-self:end;font-size:.65rem;font-weight:800}.booster-button b{align-self:start;color:#9fb9a9;font-size:.61rem}

/* Dialogs */
.modal { width:min(calc(100% - 30px),450px);max-height:calc(100dvh - 32px);padding:27px;border:1px solid rgba(255,255,255,.14);border-radius:30px;color:var(--ink);background:linear-gradient(155deg,#28584f,#163c3c 58%,#123536);box-shadow:0 28px 80px rgba(0,13,15,.65),inset 0 1px rgba(255,255,255,.11);text-align:center;overflow:auto; }
.modal::backdrop { background:rgba(3,18,20,.7);backdrop-filter:blur(10px); }
.modal[open] { animation:modalIn .25s var(--ease-out); }
.modal h2 { margin:0 0 8px;font-family:Georgia,serif;font-size:2rem;font-weight:500; }
.modal-copy { margin:0 auto 19px;max-width:340px;color:#b8cbbd;line-height:1.5;font-size:.9rem; }
.modal-close { position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;color:#c6d6c9;background:rgba(4,27,28,.3);font-size:1.4rem;cursor:pointer; }
.goal-preview { display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px 0; }
.goal-card { display:flex;align-items:center;gap:8px;min-width:112px;padding:9px 12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(7,31,32,.35);text-align:left; }
.goal-card span { display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.08);font-size:1.1rem}.goal-card b{display:block;font-size:.77rem}.goal-card small{color:#9eb6a7;font-size:.66rem}
.best-row { display:flex;justify-content:space-between;margin:0 0 18px;padding:10px 4px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);color:#b8cabe;font-size:.76rem }.best-row span:last-child{color:#f4db91;font-weight:800}
.section-label { display:block;margin-bottom:9px;color:#a8c0b1;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.preboost-list { display:flex;justify-content:center;gap:8px;margin-bottom:23px; }
.preboost { position:relative;display:flex;flex-direction:column;align-items:center;width:31%;min-height:79px;padding:8px 4px;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#d7e5d7;background:rgba(8,33,34,.3);cursor:pointer; }.preboost>span{display:grid;place-items:center;width:34px;height:34px;margin-bottom:3px;border-radius:12px;background:#326258;color:#ffe9a0;font-size:1.05rem}.preboost b{font-size:.61rem}.preboost small{position:absolute;right:4px;top:4px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#102f30;color:#fff1bb;font-size:.59rem;font-weight:900}.preboost.is-selected{border-color:#f2d072;background:rgba(242,208,114,.13);box-shadow:0 0 0 2px rgba(242,208,114,.16)}.preboost:disabled{opacity:.35}

.result-modal { overflow:hidden; }.result-halo{position:absolute;width:280px;height:280px;left:50%;top:-150px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,226,132,.32),transparent 69%);pointer-events:none}.result-stars{display:flex;justify-content:center;gap:8px;margin:19px 0;color:#435b51;font-size:2.8rem;text-shadow:0 4px 7px rgba(0,0,0,.35)}.result-stars span.is-earned{color:#ffe078;animation:starIn .5s var(--ease-out) both;text-shadow:0 0 18px rgba(255,214,100,.65),0 4px 0 #a16d38}.result-stars span:nth-child(2){transform:translateY(-8px);animation-delay:.13s}.result-stars span:nth-child(3){animation-delay:.26s}.result-score{display:flex;flex-direction:column;margin:0 0 13px;color:#9fb6a9;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}.result-score strong{margin-top:3px;color:#fff1c2;font-size:1.7rem;letter-spacing:-.03em}.result-modal .text-button{display:block;width:100%;margin-top:12px}
.guide-sprout{position:relative;width:76px;height:76px;margin:0 auto 15px;border-radius:50%;background:radial-gradient(circle,#fff9d4 0 7%,#f2cc68 10% 25%,rgba(242,204,104,.14) 28% 57%,transparent 58%);color:#fff;display:grid;place-items:center;text-shadow:0 0 8px white}.tutorial-gesture{display:flex;align-items:center;justify-content:center;gap:13px;height:55px;margin:3px 0 18px}.tutorial-gesture i{width:34px;height:34px;border-radius:45% 55%;background:linear-gradient(145deg,#ffad91,#d96b72);box-shadow:inset 0 2px rgba(255,255,255,.3)}.tutorial-gesture span{color:#f7d47d;font-size:1.4rem;animation:gestureMove 1s ease-in-out infinite}

.settings-list { margin:20px 0;text-align:left; }.settings-list label{display:flex;align-items:center;justify-content:space-between;min-height:68px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer}.settings-list label>span{display:flex;flex-direction:column}.settings-list b{font-size:.88rem}.settings-list small{margin-top:2px;color:#94aea0;font-size:.7rem}.settings-list input{position:absolute;opacity:0}.settings-list i{position:relative;width:48px;height:28px;border-radius:16px;background:#173331;box-shadow:inset 0 2px 4px rgba(0,0,0,.25);transition:background .2s}.settings-list i::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#819c8d;box-shadow:0 2px 3px rgba(0,0,0,.3);transition:transform .2s,background .2s}.settings-list input:checked+i{background:#4d8d70}.settings-list input:checked+i::after{transform:translateX(20px);background:#f6dc8b}.accessibility-note{padding:11px 13px;border-radius:13px;color:#a9c0b2;background:rgba(6,30,31,.3);font-size:.68rem;line-height:1.45;text-align:left}

.toast { position:fixed;z-index:100;left:50%;bottom:max(20px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 40px);padding:11px 16px;border:1px solid rgba(255,255,255,.14);border-radius:18px;color:#f9f1d7;background:rgba(12,42,42,.94);box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.78rem;font-weight:750;opacity:0;transform:translate(-50%,15px);pointer-events:none;transition:.25s var(--ease-out)}.toast.show{opacity:1;transform:translate(-50%,0)}

/* Dev tools */
.dev-panel { position:fixed;z-index:120;right:12px;top:12px;display:none;width:min(340px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:14px;border:1px solid #658f7d;border-radius:16px;color:#e7f0e7;background:#102d2e;box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:auto;font-size:.75rem}.dev-panel.is-open{display:block}.dev-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#f3d274;font-size:1rem}.dev-panel header button{border:0;color:white;background:transparent;font-size:1.3rem}.dev-panel label{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:8px;margin:7px 0}.dev-panel input,.dev-panel select{min-width:0;padding:7px;border:1px solid #507167;border-radius:8px;color:white;background:#1c4340}.dev-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.dev-actions button{padding:7px;border:1px solid #507167;border-radius:8px;color:#e9f0e8;background:#235047}.dev-panel a{color:#f1d67e}.dev-panel pre{max-height:180px;padding:9px;border-radius:9px;background:#092122;white-space:pre-wrap;overflow:auto;font-size:.63rem}

/* Animation */
@keyframes nodePulse{0%,100%{box-shadow:0 6px 0 #85603d,0 0 0 0 rgba(245,210,113,.3)}50%{box-shadow:0 6px 0 #85603d,0 0 0 12px rgba(245,210,113,0)}}
@keyframes lowMoves{50%{transform:scale(1.05)}}
@keyframes hintBounce{0%,100%{transform:none}40%{transform:scale(1.12) translateY(-3px);filter:brightness(1.2)}}
@keyframes matchPop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(.1);opacity:0;filter:brightness(2)}}
@keyframes damageShake{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-2deg)}70%{transform:translateX(3px) rotate(2deg)}}
@keyframes fallIn{0%{transform:translateY(-35%);opacity:.45}75%{transform:translateY(5%)}100%{transform:none;opacity:1}}
@keyframes invalidShake{0%,100%{transform:none}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes wispFloat{0%,100%{transform:translateY(2px) scale(.96)}50%{transform:translateY(-3px) scale(1.04)}}
@keyframes prismSpin{to{filter:hue-rotate(360deg)}}
@keyframes sparkFly{to{transform:translate(var(--tx),var(--ty)) scale(.15);opacity:0}}
@keyframes scoreRise{to{transform:translateY(-38px) scale(1.08);opacity:0}}
@keyframes lineFlash{0%{opacity:0;transform:scale(.4)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}68%{opacity:1;transform:translate(-50%,-60%) scale(1)}100%{opacity:0;transform:translate(-50%,-85%) scale(.92)}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes starIn{from{opacity:0;transform:translateY(12px) scale(.2) rotate(-25deg)}to{opacity:1}}
@keyframes gestureMove{50%{transform:translateX(5px)}}
@keyframes stageShake{0%,100%{transform:none}25%{transform:translate(-3px,1px)}55%{transform:translate(3px,-1px)}80%{transform:translate(-1px,0)}}

@media (min-width: 700px) {
  body { padding:20px 0;background:radial-gradient(circle at 50% 20%,#1d4d49,#071f23 70%); }
  .app-shell { min-height:calc(100dvh - 40px);max-height:900px;border:1px solid rgba(255,255,255,.1);border-radius:34px; }
  .screen { min-height:100%; }
  .modal { border-radius:32px; }
}

@media (max-height: 700px) {
  .brand-mark{width:105px;height:105px;margin-bottom:15px}.brand-mark::before{inset:14px}.brand-mark i{transform:scale(.72)}.hero h1{font-size:3rem}.hero-copy{margin-top:18px}.start-actions{margin-top:24px}.game-status{min-height:57px}.booster-bar{min-height:50px}.booster-button{height:49px}.board{width:min(82vw,490px,calc((100dvh - 210px)*var(--ratio)))}
}

@media (max-width: 370px) {
  .game-status{grid-template-columns:55px 1fr 62px}.objective-chip{min-width:45px;padding:3px}.objective-chip:nth-child(n+4){display:none}.booster-button{min-width:82px;padding-right:5px}.booster-button>span:nth-child(2){font-size:.59rem}.board{--gap:2px;padding:5px;border-radius:18px}.tile{inset:5%}.restoration-card{grid-template-columns:80px 1fr}.garden-vignette{height:78px}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.05s!important;animation-iteration-count:1!important;transition-duration:.05s!important}