body.forest-game { background:#eaf1e7 url('assets/forest-cover.png') center/cover fixed; color:#2c4d47; }
.forest-game > header,.forest-game > footer { display:none; }
.forest-game #app { width:min(1100px,100%); max-width:1100px; min-height:100dvh; margin:auto; padding:0 18px 18px; background:#fbfcf2; }
.ft-shell { font-family:Library,'Trebuchet MS',sans-serif; letter-spacing:0; }
.ft-shell * { box-sizing:border-box; }
.ft-shell button,.ft-shell input,.ft-shell a { font:inherit; }
.ft-shell button,.ft-shell .button { min-height:48px; min-width:48px; border-radius:8px; padding:10px 14px; font-weight:800; cursor:pointer; line-height:1.2; }
.ft-shell button:disabled { opacity:1; cursor:default; }
.ft-shell :focus-visible { outline:3px solid #b55b86; outline-offset:3px; }
.ft-primary { background:#327b70; border:2px solid #27665f; color:white; box-shadow:0 3px 0 #245c54; }
.ft-primary:hover { background:#28695f; }
.ft-secondary { background:#fffef6; border:1px solid #a8bfb0; color:#3f5f54; text-decoration:none; }
.ft-secondary:hover { background:#edf4e5; }
.ft-toolbar { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #d1ddc9; }
.ft-toolbar > div { flex:1; min-width:0; }
.ft-toolbar h1 { font:800 18px/1.2 Library,'Trebuchet MS',sans-serif; margin:0 0 3px; }
.ft-toolbar span { font-size:12px; }
.ft-toolbar > a { font-size:14px; white-space:nowrap; }
.ft-sound { width:48px; padding:5px!important; font-size:24px!important; }
.ft-effects { display:flex; gap:5px; align-items:center; font-size:12px; min-height:48px; }
.ft-effects input { width:18px; height:18px; accent-color:#328174; }
.ft-heading { display:flex; align-items:baseline; gap:12px; margin:10px 0 8px; }
.ft-heading > span { font-size:13px; color:#8b638d; font-weight:800; }
.ft-heading h2 { margin:0; font-size:24px; line-height:1.25; }
.ft-heading > button { margin-left:auto; min-height:48px; font-size:13px; }
.ft-intro { text-align:center; padding:22px 0 12px; }
.ft-intro > span { font-size:14px; color:#8a658e; font-weight:800; }
.ft-intro h2 { font-size:34px; line-height:1.25; margin:9px 0; }
.ft-intro p { max-width:650px; margin:12px auto 16px; line-height:1.5; }
.ft-intro .ft-cover-image { display:block; width:min(100%,660px); height:auto; aspect-ratio:3/2; object-fit:contain; margin:20px auto 0; border-radius:8px; }
.ft-intro > p:last-child { font-size:13px; font-weight:800; }
.ft-cover-image { width:100%; height:100%; object-fit:cover; }
.ft-clearing { position:relative; height:550px; }
.ft-meadow-art { display:block; width:100%; height:100%; }
.ft-clearing > .ft-meadow-art { position:absolute; inset:0; }
.ft-stations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr 1fr; gap:10px 24px; position:absolute; inset:6px 35px 14px; }
.ft-station { display:flex!important; flex-direction:column; align-items:center; gap:2px!important; background:none; border:2px solid transparent; padding:6px!important; color:#304e46; }
.ft-station:hover { border-color:#5f9f82; background:#ffffef4a; }
.ft-station .ft-animal { width:120px; height:150px; }
.ft-station strong,.ft-station > span { background:#fffdf4; padding:2px 10px; }
.ft-station strong { font-size:17px; }
.ft-station > span { font-size:13px; }
.ft-station > b { background:#f1ce68; color:#534c31; padding:4px 12px; border-radius:4px; font-size:12px; }
.ft-station-done > b { background:#c5e7b6; color:#325e43; }
.ft-hub-tools { display:flex; gap:10px; align-items:center; margin-top:8px; }
.ft-hub-tools > span { flex:1; font-size:14px; }
.ft-condition { background:#fffdf5; border-left:4px solid #ddbe69; padding:9px 13px; font-size:17px; line-height:1.4; margin-bottom:12px; }
.ft-condition p { margin:0 0 4px; }
.ft-condition strong { color:#355d50; }
.ft-workspace { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:16px; align-items:start; }
.ft-workspace > * { min-width:0; }
.ft-schemes { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); align-items:stretch; }
.ft-diagram { background:#fffdf5; border-top:3px solid #c7b4d5; padding:10px; min-width:0; }
.ft-diagram-active { border-color:#63a997; }
.ft-diagram h3 { display:flex; align-items:center; gap:6px; font-size:14px; line-height:1.3; margin:0 0 8px; }
.ft-diagram h3 > span { display:grid; place-items:center; background:#e9e0f0; width:25px; height:25px; flex-shrink:0; border-radius:50%; color:#775d88; }
.ft-diagram > p { font-size:15px; line-height:1.35; min-height:41px; margin:0 0 10px; }
.ft-connection { align-self:center; font-size:23px; transform:rotate(-90deg); color:#8ba482; text-align:center; }
.ft-sum-groups { display:flex; align-items:center; justify-content:center; gap:6px; }
.ft-sum-groups > div { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; min-height:62px; background:#e9f3e4; padding:6px; }
.ft-sum-groups > div:last-child { background:#f5e5d6; }
.ft-sum-groups > div > span { font-size:12px; text-align:center; }
.ft-sum-groups strong { font-size:24px; }
.ft-brace { border:solid #aebba4; border-width:0 2px 2px; padding:8px 4px 2px; text-align:center; font-size:13px; margin-top:5px; }
.ft-brace strong { font-size:20px; }
.ft-bar-row { margin:6px 0; }
.ft-bar-row > span { display:block; font-size:12px; font-weight:700; margin-bottom:3px; }
.ft-bar-track { width:100%; }
.ft-bar { min-height:31px; display:flex; align-items:center; justify-content:center; border:1px solid #7aaf9e; background:#c8e7dd; color:#315b50; }
.ft-bar strong { font-size:18px; }
.ft-bar-lilac { background:#e4d5ee; border-color:#b49bc9; color:#6f4e88; }
.ft-bar-coral { background:#f4c9b7; border-color:#d39c8a; color:#775347; }
.ft-difference { font-size:13px; padding:5px 0; border-top:1px dashed #c7b6d1; margin-top:6px; }
.ft-difference strong { font-size:20px; }
.ft-gap-brace { height:9px; border:solid #9277ac; border-width:0 2px 2px; margin-top:3px; }
.ft-result-label { display:flex!important; flex-direction:column; gap:3px!important; text-align:center; width:100%; min-height:82px!important; margin-top:12px; border:2px dashed #b38f4c; color:#685424; background:#fff1bc; padding:7px!important; }
.ft-result-label > span { font-size:10px; font-weight:600; }
.ft-result-label strong { font-size:18px; }
.ft-result-label small { font-size:11px; }
.ft-result-label:not(:disabled):hover,.ft-label-selected { background:#f9db7d; border-style:solid; }
.ft-label-used { background:#e2efda; border-color:#8db481; }
.ft-slot { display:flex!important; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:70px!important; border:2px dashed #a89abe; background:#f7f1fb; color:#7d638f; padding:7px!important; font-size:14px!important; }
.ft-slot span { font-size:12px; }
.ft-slot strong { font-size:25px; }
.ft-slot-target { border-color:#3a8b73; background:#e6f3dc; box-shadow:0 0 0 2px #bad8a9; }
.ft-slot-filled { border-style:solid; border-color:#7cac8b; background:#e5efdc; color:#355f48; }
.ft-whole { text-align:center; border:2px solid #abc5b0; padding:5px; }
.ft-whole > span { display:block; font-size:12px; }
.ft-whole > strong { font-size:24px; }
.ft-remainder { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.ft-remainder > div { background:#edf3e8; padding:6px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.ft-remainder > div:first-child { background:#f5e8d4; }
.ft-remainder > div > span { font-size:12px; }
.ft-remainder > div > strong { font-size:24px; }
.ft-remainder .ft-slot { font-size:12px!important; padding:4px!important; }
.ft-part-bar { display:flex; height:13px; margin-top:8px; border:1px solid #a0b9a0; }
.ft-part-bar > span { background:#e9be83; }
.ft-part-bar > i { flex:1; background:#b9d6b0; }
.ft-known-fact { padding:10px; background:#f3e6dc; font-weight:700; font-size:15px; }
.ft-desk { display:grid; grid-template-columns:minmax(0,1fr) 165px; gap:10px; align-items:start; }
.ft-host { grid-column:1; grid-row:2; text-align:center; }
.ft-host .ft-animal { width:130px; height:165px; max-width:100%; }
.ft-host p { font-size:13px; font-weight:700; margin:4px 0 0; }
.ft-calculation,.ft-guided,.ft-transfer-prompt,.ft-desk > .ft-primary { grid-column:1/-1; grid-row:1; }
.ft-calculation { padding:9px 0 0; }
.ft-equation { display:flex; justify-content:center; align-items:center; gap:7px; min-height:62px; font-size:25px; margin:3px 0 10px; }
.ft-equation label { display:flex; flex-direction:column; position:relative; }
.ft-equation label > span { position:absolute; top:-15px; font-size:10px; font-weight:600; }
.ft-equation input { width:70px; height:52px; font-size:27px; font-weight:800; text-align:center; padding:4px; border:2px solid #80a489; background:white; color:#305f4c; border-radius:6px; }
.ft-signs { display:flex; gap:5px; }
.ft-sign { font-size:27px!important; padding:0!important; width:48px; height:48px; background:#fff5d7; border:2px solid #d3b36b; color:#706039; }
.ft-sign-selected { border-color:#468a72; background:#dcefd7; color:#2f614a; }
.ft-calculation > .ft-primary { width:100%; }
.ft-keypad { display:grid; grid-template-columns:repeat(3,minmax(48px,1fr)); gap:5px; grid-column:2; grid-row:2; }
.ft-key { height:48px; font-size:22px!important; padding:5px!important; border:1px solid #aec0aa; background:#fffef6; color:#416654; }
.ft-key:hover { background:#e5efdc; }
.ft-guided { display:flex; flex-direction:column; gap:8px; background:#f0e6f6; padding:12px; }
.ft-guided > strong { font-size:14px; }
.ft-transfer-prompt { background:#e9f2e0; padding:14px; text-align:center; font-weight:800; font-size:17px; }
.ft-feedback { display:flex; align-items:center; min-height:80px; padding:10px 14px; margin:10px 0 8px; background:#e5efe2; border-left:4px solid #8ab387; font-size:16px; line-height:1.4; }
.ft-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ft-tools button { font-size:14px; }
.ft-work-result { height:175px; margin:15px 0 0; }
.ft-help { width:calc(100% - 30px); max-width:620px; background:#fffdf4; color:#345346; border:2px solid #b5c3a8; border-radius:8px; padding:24px; line-height:1.6; }
.ft-help::backdrop { background:#24473566; }
.ft-finish { padding:14px 0; text-align:center; }
.ft-finish h2 { font-size:30px; margin:10px 0 3px; }
.ft-finish > p { margin:6px 0 15px; }
.ft-celebration { position:relative; height:290px; }
.ft-party-friends { position:absolute; inset:auto 14% 6px; display:flex; align-items:flex-end; justify-content:center; }
.ft-party-friends svg { width:16.66%; height:135px; }
.ft-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }
.ft-stats > div { display:flex; align-items:center; gap:12px; border-top:2px solid #c4b1d3; padding:10px; text-align:left; }
.ft-stats strong { font-size:36px; color:#477b59; }
.ft-stats span { font-size:14px; }
.ft-finish-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.ft-finish details { text-align:left; border-bottom:1px solid #d1ddc9; padding:14px 0; }
.ft-finish summary { cursor:pointer; font-weight:800; min-height:30px; }
.ft-bonus-options { display:flex; gap:10px; flex-wrap:wrap; }
@keyframes ft-wave { 50% { transform:rotate(-5deg) translateY(-4px); } }
@keyframes ft-hand-wave { 50% { transform:rotate(7deg); } }
@keyframes ft-light { from { opacity:.4; } to { opacity:1; filter:drop-shadow(0 0 4px #ffe9a0); } }
@keyframes ft-open { from { transform:scale(.7); } to { transform:scale(1); } }
.ft-waving { animation:ft-wave .65s ease 3; transform-origin:center bottom; }
.ft-waving .ft-arms { animation:ft-hand-wave .45s ease 4; transform-origin:72px 116px; }
.ft-party-art .ft-lantern { animation:ft-light .8s ease both; }
.ft-party-art .ft-bloom { animation:ft-open .8s ease both; transform-box:fill-box; transform-origin:center bottom; }
.ft-paused * { animation:none!important; }
@media (min-width:801px) and (max-height:760px) {
  .ft-toolbar { padding:5px 0; }
  .ft-heading { margin:6px 0; }
  .ft-condition { padding:6px 11px; margin-bottom:9px; }
  .ft-desk { grid-template-columns:minmax(0,1fr) 207px; }
  .ft-keypad { grid-template-columns:repeat(4,48px); }
  .ft-host .ft-animal { height:130px; }
  .ft-diagram { padding:8px; }
  .ft-diagram > p { margin-bottom:7px; }
  .ft-feedback { margin:7px 0; }
  .ft-clearing { height:515px; }
  .ft-station .ft-animal { height:137px; }
}
@media (max-width:1000px) {
  .ft-toolbar { flex-wrap:wrap; }
  .ft-workspace { grid-template-columns:minmax(0,1fr) 300px; gap:12px; }
  .ft-desk { grid-template-columns:minmax(0,1fr) 155px; }
  .ft-equation { gap:5px; font-size:23px; }
  .ft-equation input { width:62px; }
  .ft-signs { gap:3px; }
  .ft-host .ft-animal { width:120px; }
  .ft-stations { inset:8px 15px 10px; gap:8px; }
}
@media (max-width:800px) {
  .forest-game #app { padding:0 12px 18px; }
  .ft-toolbar > div { flex-basis:100%; order:-1; padding:3px 0; }
  .ft-toolbar h1 { font-size:17px; }
  .ft-toolbar > a { flex:1; }
  .ft-heading { flex-wrap:wrap; }
  .ft-heading h2 { font-size:22px; }
  .ft-heading > button { margin-left:auto; }
  .ft-workspace { grid-template-columns:1fr; }
  .ft-schemes { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); }
  .ft-desk { grid-template-columns:minmax(0,1fr) 180px; }
  .ft-host .ft-animal { width:125px; height:150px; }
  .ft-calculation { max-width:360px; width:100%; justify-self:center; }
  .ft-guided { width:100%; }
  .ft-desk > .ft-primary { width:100%; }
  .ft-feedback { min-height:94px; }
  .ft-intro h2 { font-size:28px; }
  .ft-intro p { font-size:16px; }
  .ft-clearing { height:620px; }
  .ft-stations { grid-template-columns:repeat(3,1fr); }
  .ft-station .ft-animal { width:115px; height:155px; }
  .ft-station > span { font-size:12px; }
  .ft-stats { grid-template-columns:1fr; gap:0; }
  .ft-celebration { height:250px; }
}
@media (max-width:560px) {
  body.forest-game { background:#fbfcf2; }
  .ft-toolbar { gap:6px; }
  .ft-toolbar > button { font-size:13px; }
  .ft-effects { font-size:12px; }
  .ft-heading { gap:5px 10px; }
  .ft-heading > span { flex-basis:100%; }
  .ft-heading h2 { font-size:22px; }
  .ft-condition { font-size:17px; padding:10px; }
  .ft-schemes { grid-template-columns:1fr; gap:8px; }
  .ft-connection { transform:none; }
  .ft-diagram { padding:12px; }
  .ft-diagram > p { min-height:0; font-size:16px; }
  .ft-diagram h3 { font-size:15px; }
  .ft-result-label strong { font-size:20px; }
  .ft-desk { grid-template-columns:minmax(0,1fr) 165px; }
  .ft-host .ft-animal { width:110px; height:140px; }
  .ft-calculation { max-width:100%; }
  .ft-equation { gap:5px; font-size:24px; }
  .ft-equation input { width:66px; }
  .ft-stations { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); inset:0; gap:7px; }
  .ft-clearing { height:890px; }
  .ft-station .ft-animal { width:110px; height:165px; }
  .ft-station strong { font-size:16px; }
  .ft-station > span { font-size:12px; padding:2px 4px; }
  .ft-station > b { font-size:11px; }
  .ft-finish h2 { font-size:27px; }
  .ft-party-friends { inset:auto 3% 10px; }
  .ft-party-friends svg { height:100px; }
  .ft-celebration { height:230px; }
  .ft-bonus-options { flex-direction:column; }
  .ft-bonus-options button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .ft-shell * { animation:none!important; scroll-behavior:auto!important; } }