/* Display and UI fonts are acquired during build, then served by this site.
 * Original binaries and license notices are installed by scripts/prepare_fonts.py.
 */
@font-face {
  font-family:'Banana Chips';
  src:url('../assets/fonts/banana-chips.regular.otf') format('opentype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Manrope';
  src:url('../assets/fonts/manrope-variable.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}
:root {
  --sans:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Banana Chips','Manrope',system-ui,sans-serif;
  --serif:var(--display);
  --mono:var(--sans);
  --page:#0b1914;
  --surface:#172d23;
  --ui-text:#edf3e4;
  --ui-muted:#b4c7b7;
}
/* All non-title screens are opaque pages, including Success, Pause and Help.
 * Do not fade the page itself: an opacity animation would expose the puzzle
 * during its first frame. Stars, blossoms and other content still animate.
 * Default to opaque for future screens rather than maintaining an allowlist.
 */
body:not([data-screen=title]) #screen {
  position:fixed;inset:0;width:100%;height:100dvh;
  background:var(--page);opacity:1;animation:none;transition:none;
  backdrop-filter:none;border:0;border-radius:0;box-shadow:none;
}
/* Hide the actual board synchronously on every menu, including the title.
 * CSS visibility keeps its measured size and the saved/animated state intact.
 * Returning to Play or an intentional level transition restores it normally.
 */
body:not([data-screen=play]):not([data-screen=transition]) #field {
  visibility:hidden;opacity:0;transition:none;pointer-events:none;
}
/* Only the title keeps its own ambient artwork; no game backdrop leaks through
 * a results page, nested settings, hints, score rules or campaign navigation.
 */
body:not([data-screen=title]):not([data-screen=play]):not([data-screen=transition]) :is(#heroArt,#atmosphere) {
  visibility:hidden;opacity:0;transition:none;pointer-events:none;
}
/* Buttons share a real hit area. Only display headings use Banana Chips. */
#screen :is(.primary,.secondary,.action-pill) {
  min-height:52px;padding:13px 20px;gap:12px;
  font:650 16px/1.4 var(--sans);letter-spacing:0;
}
#screen :is(.secondary,.action-pill) {
  background:#1b3227;border:1px solid #4d6c54;color:var(--ui-text);
}
#screen :is(.secondary,.action-pill):hover {background:#274732;border-color:#90b17b}
#screen :is(.primary,.secondary,.action-pill,.text-btn):focus-visible {
  outline:3px solid #daefb4;outline-offset:4px;
}
#screen .text-btn {min-height:44px;font:550 15px/1.5 var(--sans);padding:10px 12px;color:var(--ui-muted)}
#screen :is(.primary,.secondary,.action-pill,.text-btn) svg {width:21px;height:21px;flex-shrink:0}
#screen :is(.fine,.music-note,.guide-row,.rating-guide p) {font:400 14px/1.65 var(--sans);color:var(--ui-muted);letter-spacing:0}
#screen :is(.eyebrow,.section-label,.hint-count) {font:650 12px/1.5 var(--sans);letter-spacing:1.5px;color:#bfd2b5}
#screen :is(.pause-level,.lead,.completion) {font:400 16px/1.6 var(--sans);color:var(--ui-muted)}
#screen .hint-copy {font:500 20px/1.65 var(--sans)}
#screen .help-tabs {gap:20px;flex-wrap:wrap}
#screen .help-tabs button {font:600 16px/1.4 var(--sans);min-height:48px;padding:10px 2px}
#screen .wrap.pause {width:min(480px,100%)}
#screen .pause .stack {max-width:380px}
#screen .pause .action-cluster {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#screen h2 {font-family:var(--display);font-weight:400;font-synthesis:none;letter-spacing:0;line-height:1.2}
/* Three equally sized home actions; no more small links below the main button. */
body[data-screen=title] #screen {padding:76px max(24px,env(safe-area-inset-right)) 72px max(24px,env(safe-area-inset-left))}
#screen .title-wrap {width:min(1120px,100%);padding:0;transform:none;min-width:0}
#screen .title-copy {width:min(420px,100%)}
#screen .title-copy h2 {
  font:400 clamp(84px,8vw,132px)/1.05 var(--display);
  font-synthesis:none;letter-spacing:0;white-space:nowrap;margin:18px 0 14px;
}
#screen .title-copy .subtitle {font:450 22px/1.5 var(--sans);letter-spacing:0;margin:0 0 28px;color:#bfceb5}
#screen .home-actions>.primary,
#screen .home-actions>.secondary {
  display:flex;align-items:center;justify-content:center;width:100%;height:60px;min-width:0;
  min-height:60px;margin:0;padding:12px 22px;border-radius:18px;
  font:700 18px/1.4 var(--sans);gap:12px;box-sizing:border-box;
}
#screen .home-actions>.primary {position:relative;box-shadow:none}
#screen .home-actions>button:not(.next-campaign) {position:relative}
#screen .home-actions>button:not(.next-campaign) svg {position:absolute;right:22px;width:22px;height:22px}
#screen .home-actions {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:0;width:100%}
#screen .home-actions>.secondary {background:#1a3226;border:1px solid #557450;color:#e9f0df;transition:background .14s,transform .14s}
#screen .home-actions>.secondary:hover {background:#274830;border-color:#a9c68d;transform:translateY(-1px)}
#screen .home-actions>.secondary:active {transform:translateY(1px)}
/* Optional continuation for an unfinished attempt also remains a full-size action. */
#screen .title-progress {font:500 14px/1.5 var(--sans);letter-spacing:0;color:#b3c7b1;margin-top:22px;padding:0;background:none}
#screen .title-copy .eyebrow {font-size:12px;letter-spacing:2px}
.title-rating {font-size:15px;color:#beceb9;bottom:26px}
.title-meta {font:550 12px/1.5 var(--sans);letter-spacing:2px;color:#a0b69e}
.title-corner .round {width:48px;height:48px;background:#172e23;border:1px solid #425c47}
/* Settings is a page, with an anchored back bar and content starting at the top. */
body[data-screen=settings] #screen {
  display:block;overflow-y:auto;overflow-x:hidden;
  padding:104px max(24px,env(safe-area-inset-right)) 40px max(24px,env(safe-area-inset-left));
  scroll-padding-top:94px;
}
body:is([data-screen=settings],[data-screen=map]) #screen>.back {
  position:fixed;z-index:4;left:max(24px,env(safe-area-inset-left));top:max(18px,env(safe-area-inset-top));
  min-height:48px;padding:10px 18px;gap:10px;background:#1b3026;border:1px solid #47624b;border-radius:14px;
  font:600 16px/1.5 var(--sans);color:var(--ui-text);
}
body[data-screen=settings] #screen::before {
  content:'';position:fixed;inset:0 0 auto;height:88px;background:var(--page);z-index:3;pointer-events:none;
}
body[data-screen=settings] #screen>.panel {width:min(660px,100%);margin:0 auto;padding:0;max-height:none;overflow:visible}
body[data-screen=settings] #screen h2 {font-size:56px;margin:12px 0 30px}
#screen .settings-row {min-height:68px;padding:12px 0;gap:20px;font:550 17px/1.5 var(--sans);color:var(--ui-text)}
#screen .settings-row label {cursor:pointer;min-width:0;overflow-wrap:anywhere}
#screen .settings-row input[type=checkbox] {
  position:relative;appearance:none;flex:0 0 56px;width:56px;height:44px;
  margin:0;border:0;border-radius:8px;background:none;cursor:pointer;
}
#screen .settings-row input[type=checkbox]::before {
  content:'';position:absolute;left:0;top:7px;width:56px;height:30px;
  border-radius:30px;background:#3c5445;border:1px solid #728e73;box-sizing:border-box;
}
#screen .settings-row input[type=checkbox]::after {
  content:'';position:absolute;left:5px;top:11px;width:22px;height:22px;border-radius:50%;background:#d0ddcc;
  transform:none;transition:transform .15s;
}
#screen .settings-row input[type=checkbox]:checked {background:none}
#screen .settings-row input[type=checkbox]:checked::before {background:#b1d68c;border-color:#d1e9b5}
#screen .settings-row input[type=checkbox]:checked::after {transform:translateX(24px);background:#203522}
#screen .settings-row input:disabled {opacity:.4;cursor:not-allowed}
#screen .volume-line {gap:16px;padding:0 0 14px}
#screen .volume-line input {height:44px;cursor:pointer}
#screen .volume-line output {font:650 16px/1.5 var(--sans);width:54px;color:#d2dfc4;text-align:right}
#screen .section-label {margin:24px 0 12px;font-size:13px}
#screen .segmented {padding:5px;gap:6px;background:#13271d;border:1px solid #3c5541;border-radius:17px}
#screen .segmented button {min-height:48px;font:650 16px/1.4 var(--sans);padding:10px 5px;color:#bcccb7;border-radius:12px}
#screen .segmented button.active {background:#314d35;color:#f1f7e7}
#screen .settings-foot {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 12px}
#screen .settings-foot .text-btn {min-height:52px;padding:10px 12px;font-size:16px;border:1px solid #4b6549;background:#182e22;border-radius:14px}
/* Tree fills the page. Its central content width stays bounded, not the backdrop. */
body[data-screen=map] #screen {padding:max(86px,calc(env(safe-area-inset-top) + 74px)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
body[data-screen=map] .journey-wrap {width:min(1220px,100%);border:0;border-radius:0;background:var(--page);box-shadow:none}
body[data-screen=map] .journey-head,
body[data-screen=map] .journey-banner {padding:20px 20px 22px;background:var(--page);border-bottom:1px solid #314a38;box-shadow:none;border-radius:0}
#screen :is(.journey-head,.journey-banner) h2 {font:400 46px/1.2 var(--display);font-synthesis:none;letter-spacing:0;margin:7px 0 0}
#screen :is(.journey-head,.journey-banner) .eyebrow {font-size:12px}
#screen .journey-pill strong {font-size:26px}
#screen .journey-pill span {font-size:14px;line-height:1.4;color:#b8cbb6}
#screen .journey-banner .stackline {margin-top:18px;gap:12px}
#screen .journey-banner .stackline :is(.primary,.secondary) {min-height:52px;font-size:16px;padding:12px 18px}
#screen .chapter-core {background:var(--page)}
#screen .chapter-core h3 {font:700 21px/1.35 var(--sans);letter-spacing:-.3px}
#screen .chapter-core .eyebrow {font-size:12px}
#screen .chapter-badges span {font-size:13px;line-height:1.5;color:#b9cdb2;background:var(--page)}
#screen .blossom-name {font-size:19px;line-height:1.4}
#screen .blossom-kicker {font-size:12px;line-height:1.5;color:#bbcfac}
#screen .blossom-sub {font-size:14px;line-height:1.5;color:#b5c9b4}
#screen .blossom-status {font-size:14px;line-height:1.5;color:#c2d7b4}
#screen .blossom.locked .blossom-name {color:#b5c4b4}
#screen .blossom.locked .blossom-status {color:#a5baa7}
#screen .blossom .rating-star {width:19px;height:19px}
#screen .journey-foot {min-height:64px;background:var(--page);border-top:1px solid #314a38}
#screen .journey-foot .text-btn {font-size:16px;min-height:48px;padding:10px 14px}
#screen .tree-score-footer {font-size:16px}
/* No tiny controls in help or results either. */
#screen .success-buttons :is(.primary,.secondary) {font-size:16px;min-height:52px}
#screen .success-links .text-btn {font-size:15px;min-height:44px}
#screen .run-stats span,#screen .rating-caption,#screen .next-star-goal,#screen .global-score-line {font-size:14px;line-height:1.6}
#screen .rating-guide>div {font-size:16px}
@media(max-width:959px) {
  #screen .journey-head,#screen .journey-banner {gap:16px;padding-inline:12px}
  #screen .chapter-core {background:transparent}
  #screen .chapter-core h3 {font-size:21px}
  #screen .journey-pill {padding-inline:10px}
}
@media(max-width:600px) {
  body[data-screen=title] #screen {padding:76px 22px 74px;display:flex;align-items:safe center}
  #screen .title-wrap {align-self:auto;text-align:center;width:100%;margin:0}
  #screen .title-copy {width:min(360px,100%);margin:auto}
  #screen .title-copy h2 {font-size:88px;margin:12px 0;letter-spacing:0}
  #screen .title-copy .subtitle {font-size:18px;margin-bottom:24px}
  #screen .home-actions>.primary,#screen .home-actions>.secondary {height:56px;min-height:56px;border-radius:16px;font-size:18px;padding:12px 14px}
  #screen .home-actions>button:not(.next-campaign) {position:relative}
#screen .home-actions>button:not(.next-campaign) svg {right:15px}
  #screen .title-progress {justify-content:center;margin-top:18px;font-size:14px}
  #screen .title-copy .eyebrow {font-size:12px;letter-spacing:1.3px}
  .title-meta {display:none}.title-rating {bottom:18px;font-size:14px}
  .title-corner {top:16px;right:18px;gap:10px}.title-corner .round {width:46px;height:46px}
  body:is([data-screen=settings],[data-screen=map]) #screen>.back {left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));min-height:46px}
  body[data-screen=settings] #screen {padding:90px 22px 30px}
  body[data-screen=settings] #screen h2 {font-size:46px;margin:12px 0 22px}
  #screen .settings-row {font-size:16px;min-height:66px;gap:15px}
  #screen .settings-foot {grid-template-columns:minmax(0,1fr)}
  body[data-screen=map] #screen {padding:76px 10px max(8px,env(safe-area-inset-bottom))}
  #screen :is(.journey-head,.journey-banner) {padding:12px 10px 15px;gap:14px}
  #screen :is(.journey-head,.journey-banner) h2 {font-size:36px;line-height:1.25;margin:4px 0 0}
  #screen .journey-summary {gap:0}
  #screen .journey-pill {padding:0 8px}
  #screen .journey-pill strong {font-size:21px}
  #screen .journey-pill span {font-size:13px}
  #screen .journey-banner .stackline {margin-top:12px;gap:8px}
  #screen .journey-tree {padding-inline:8px}
  #screen .blossom {grid-template-columns:40px minmax(0,1fr);padding:14px 12px;gap:12px;min-height:132px}
  #screen .blossom-flower {width:40px;height:40px}
  #screen .blossom-name {font-size:18px;line-height:1.4;letter-spacing:0}
  #screen .blossom-kicker {font-size:12px;letter-spacing:.4px}
  #screen .chapter-core h3 {font-size:20px}
  #screen .journey-foot {padding:6px 10px;min-height:58px;justify-content:space-between}
  #screen .tree-score-footer {font-size:14px;gap:5px}
  #screen .pause .action-cluster {gap:10px}
}
@media(max-height:560px) and (min-width:601px) {
  body[data-screen=title] #screen {align-items:flex-start;padding-top:62px;padding-bottom:55px}
  #screen .title-copy {width:360px}#screen .title-copy h2 {font-size:76px;margin:6px 0}
  #screen .title-copy .subtitle {font-size:18px;line-height:1.4;margin-bottom:14px}
  #screen .home-actions>.primary,#screen .home-actions>.secondary {height:52px;min-height:52px}
  #screen .home-actions {gap:8px;margin-top:0}
  .title-meta {display:none}.title-rating {right:24px;left:auto;bottom:20px;transform:none}
  body[data-screen=map] #screen {padding-top:72px;padding-bottom:6px}
  #screen .journey-head,#screen .journey-banner {padding:10px 12px;gap:10px}
  #screen :is(.journey-head,.journey-banner) h2 {font-size:32px;margin:0}
  #screen .journey-head .eyebrow,#screen .journey-banner .eyebrow {display:none}
  #screen .journey-banner .stackline {margin:0}
  #screen .journey-foot {min-height:54px;padding:3px 12px}
}
@media(prefers-reduced-motion:reduce) {#screen .home-actions>.secondary {transition:none}}

@media(max-width:600px){body[data-screen=title] #heroArt{opacity:.25}}