/* Shared screen and touch layout for all five Whisperleaf pages. */
:root{--forest-screen:100vh}
@supports(height:100svh){:root{--forest-screen:100svh}}
@supports(height:100dvh){:root{--forest-screen:100dvh}}
body[data-forest-page]{-webkit-text-size-adjust:100%;overflow-x:hidden}
.forest-job{
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  height:var(--forest-screen);min-height:0;overflow:hidden;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
.forest-job .forest-top{min-height:0;padding:9px 16px;gap:10px;flex-wrap:nowrap}
.forest-job-title{min-width:0;gap:8px}
.forest-job-title h1{font-size:clamp(1.05rem,2vw,1.5rem);overflow-wrap:anywhere}
.forest-job-title button{width:44px;height:44px;min-width:44px;min-height:44px;margin:0}
.forest-job .job-order{min-height:0;max-height:24vh;max-height:calc(var(--forest-screen) * .24);overflow:auto;width:calc(100% - 24px);padding:8px 14px;margin:0 auto 8px;gap:12px}
.job-order>div:nth-child(2){min-width:0;flex:1}
.forest-job .job-order>img{height:58px;width:54px}
.forest-job .job-order h2{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.3;overflow-wrap:anywhere}
.forest-job .job-order .shift-counter{flex:0 0 auto;font-size:1rem;min-width:120px}
.forest-job .job-surface{width:calc(100% - 24px);min-width:0;min-height:0;height:auto;margin:0 auto;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.forest-job .job-footer{position:relative;bottom:auto;z-index:12;min-height:0;width:calc(100% - 24px);margin:8px auto 0;padding:10px 14px;gap:12px;flex-direction:row;align-items:center}
.job-footer p{min-width:0;max-width:none;flex:1;max-height:4.2em;overflow:auto;overscroll-behavior:contain;font-size:1rem}
.job-footer #job-submit{min-height:48px;max-width:46%;flex-shrink:0;overflow-wrap:anywhere}
.forest-job .order-success{margin:12px auto;padding:20px;max-width:600px}
.order-success img{height:110px}.order-success h2{margin:12px 0}.order-success p{margin:12px 0}

/* Tools scroll without moving the board or the submit/payday bar. */
.forest-job .canopy-surface{display:grid;grid-template-columns:320px minmax(0,1fr);gap:12px;overflow:hidden}
.canopy-surface .build-tools{display:block;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px;scroll-padding-block:10px}
.dig-grid{grid-template-columns:repeat(6,minmax(44px,1fr));gap:4px}
.dig-tile{min-width:44px;min-height:44px}
.dig-panel{min-width:0}.inventory{font-size:1rem;gap:8px;margin:10px 0 12px}
.materials{grid-template-columns:repeat(2,minmax(0,1fr))}
.material{font-size:1rem;min-height:64px;overflow-wrap:anywhere}
.build-controls{flex-wrap:wrap}.build-controls label{font-size:1rem}.build-controls select{font-size:1rem;min-height:44px;min-width:0}
.build-tools .forest-button{font-size:1rem;min-height:44px}
.canopy-surface .build-board{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0;min-width:0;overflow:hidden}
.build-board .build-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#183f32db}
.build-board .build-view-label{position:static;min-width:0;text-align:left;font-size:1rem;line-height:1.3;margin:0}
.build-board .build-rotate{position:static;min-width:44px;min-height:44px;padding:8px 12px;flex-shrink:0;font-size:1.25rem}
.build-board #tower-grid{width:100%;height:100%;min-height:0;touch-action:manipulation}
.tower-viewport{min-width:0;min-height:0;height:100%;overflow:hidden}

.forest-job .timber-surface{display:block;padding:28px 26px 16px;min-height:0}
.timber-surface .measure-caption{margin-bottom:12px}.timber-surface .measure-pay{margin-top:12px}
.timber-surface .measuring-area{height:190px}.measure-buttons button{min-width:48px;min-height:48px}

/* The hidden picture yields space to the shared action bar, even in Safari landscape. */
body[data-forest-job="salvage"] .forest-job{display:grid;min-height:0;height:var(--forest-screen)}
body[data-forest-job="salvage"] .job-surface{min-height:0;overflow:hidden}
body[data-forest-job="salvage"] .job-footer{position:relative;bottom:auto;margin-top:8px}
body[data-forest-job="salvage"] .job-order{min-height:0;margin-bottom:8px}
.search-picture{min-height:0}.search-tools button{min-height:44px}.search-tools #search-clue{font-size:1rem}

/* Keep the map and its doors on the same uncropped 3:2 painting in either orientation. */
.forest-hub{display:grid;place-items:center;height:var(--forest-screen);min-height:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.forest-map{position:relative;isolation:isolate;width:100%;max-width:calc((var(--forest-screen) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 1.5);aspect-ratio:3/2;overflow:hidden}
.forest-hub .forest-background{object-fit:contain;object-position:center}
.forest-map .door-timber{left:4%;right:auto;top:27%;bottom:29%;width:25%}
.forest-map .door-salvage{left:35%;right:auto;top:37%;bottom:29%;width:25%}
.forest-map .door-canopy{right:2%;left:auto;top:7%;bottom:30%;width:30%}
.forest-map .forest-player{left:47%;bottom:15%;width:12%;min-width:64px;max-width:165px}
.forest-hub .forest-quiet-top{padding-top:max(12px,env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));flex-wrap:nowrap}
.forest-journal-button{left:max(14px,env(safe-area-inset-left,0px));bottom:max(14px,env(safe-area-inset-bottom,0px))}

.forest-trail-scene{height:var(--forest-screen);min-height:0}
.forest-dialog{max-height:calc(var(--forest-screen) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);max-width:calc(100vw - 24px);padding:24px;overflow:hidden}
.forest-dialog[open]{display:flex;flex-direction:column}
.forest-dialog #dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:4px;scroll-padding-block:12px}
.dialog-close{width:44px;height:44px;z-index:5;right:8px;top:8px}
.forest-dialog h2{margin-right:32px}.dialog-actions{position:sticky;bottom:0;padding:12px 2px 2px;background:var(--paper);z-index:3}
.dialog-actions .forest-button{min-height:48px;max-width:100%;overflow-wrap:anywhere}
.saved-tower{height:min(390px,calc(var(--forest-screen) * .45))}
.forest-toast{bottom:max(14px,env(safe-area-inset-bottom,0px));max-height:25vh;overflow:auto}
body[data-forest-page="story"] .forest-dialog{max-height:calc(var(--forest-screen) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);bottom:max(16px,env(safe-area-inset-bottom,0px));padding:24px}

@media(max-width:719px){
  .forest-job .forest-top{padding:7px 12px;flex-wrap:wrap}
  .forest-job-title{order:-1;width:100%}.forest-job-title h1{width:auto;order:0}
  .forest-job .job-order{padding:8px;gap:8px;flex-wrap:wrap}
  .forest-job .job-order .shift-counter{width:100%;min-width:0;padding:3px 0 0;border:0;display:flex;justify-content:center;align-items:center;gap:10px}
  .shift-counter strong{margin:0;font-size:1rem}
  .forest-job .job-footer{padding:8px 10px;gap:8px}.job-footer #job-submit{max-width:50%;font-size:1rem}
  .forest-job .canopy-surface{display:flex;flex-direction:column;overflow:auto}
  .canopy-surface .build-board{order:-1;flex:none;height:380px;min-height:380px}
  .canopy-surface .build-tools{flex:none;overflow:visible}
  .dig-panel{overflow:auto;padding-bottom:4px}.materials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build-board .build-toolbar{padding:8px}.build-view-label{font-size:1rem}
  .forest-job .timber-surface{padding:26px 18px 16px}
  .forest-dialog{padding:22px}.dialog-portrait{float:none;width:120px;height:120px;display:block;margin:0 auto 12px}
}
@media(orientation:portrait) and (max-width:1100px){
  .story-visitor{left:20%;top:3%;bottom:auto;width:60%;height:43%}
  .story-player{left:5%;top:32%;bottom:auto;width:14%;max-width:135px}
  body[data-forest-page="story"] .forest-dialog{width:94%;right:3%;bottom:max(12px,env(safe-area-inset-bottom,0px));max-height:calc(var(--forest-screen) * .51)}
}
@media(orientation:landscape) and (max-height:650px){
  .forest-job .forest-top{padding-block:6px}.forest-job .job-order>img{height:46px;width:42px}
  .forest-job .job-order{padding-block:5px;margin-bottom:6px}.forest-job .job-footer{margin-top:6px;padding-block:7px}
  .forest-dialog .dialog-portrait{width:110px;height:110px}
  .story-visitor{left:5%;top:8%;bottom:auto;width:43%;height:80%}.story-player{left:3%;top:auto;bottom:5%;width:13%}
  body[data-forest-page="story"] .forest-dialog{width:49%;right:2%;padding:22px}
}

/* Each repair is painted in the same coordinate space as its doorway. */
.forest-repairs{position:absolute;inset:0;z-index:1;pointer-events:none}
.forest-repair{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.repair-timber{clip-path:inset(19% 67% 21% 0)}
.repair-salvage{clip-path:inset(34% 33.5% 29% 34%)}
.repair-canopy{clip-path:inset(0 0 25% 67%)}
.forest-lookout-growth{position:absolute;left:70%;top:24%;width:26%;height:40%;pointer-events:none;z-index:3}
.forest-lookout-growth svg{width:100%;height:100%}
.forest-goal-progress{position:absolute;left:80px;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:24;max-width:calc(100% - 170px);background:#fff8e4e8;font-size:.9rem;min-height:44px}
.forest-certificate{text-align:center;border:2px solid #bc9a52;border-radius:20px;background:#fff7df;padding:20px;margin:10px 0}
.forest-certificate .certificate-star{font-size:2.5rem;color:#9b7729}.forest-certificate h3{font:700 1.7rem Georgia,serif;color:#2c563c;margin:6px 0}
.forest-certificate ul{text-align:left;line-height:1.5;margin:14px auto;max-width:430px}
.forest-path-lights{position:absolute;inset:0;pointer-events:none;z-index:3}
.forest-path-lights span{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff4b4;box-shadow:0 0 8px 3px #ffde7a88;animation:path-light 4s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes path-light{0%,100%{opacity:.45;translate:0 0}50%{opacity:1;translate:3px -7px}}
.journal-work{padding-left:24px;line-height:1.5;font-size:1.0625rem}
.journal-work li+li{margin-top:8px}
.journal-next{padding:12px 14px;background:#e4e9c6;border-radius:12px}
.journal-keepsakes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.journal-keepsake{display:flex;align-items:center;gap:12px;padding:12px;min-height:80px;background:#fffcf0;border:1px solid #b9be98;border-radius:14px;color:var(--ink);text-align:left;font-size:1rem;line-height:1.3}
.journal-keepsake img{width:64px;height:64px;flex-shrink:0}
.journal-keepsake:hover{background:#f0edcf}
.forest-journal-button.has-new-memory{box-shadow:0 0 0 5px #ffe09c66,0 0 28px #ffe48ccc}
.story-keepsake{display:flex;align-items:center;gap:14px;border-block:1px solid #c9c5a3;padding:10px 0;font-size:1rem;font-weight:700}
.story-keepsake img{width:70px;height:70px;flex-shrink:0}
.forest-finale{position:absolute;z-index:26;bottom:max(16px,env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;width:min(620px,calc(100% - 144px));max-height:40%;overflow:auto;background:#fff8e6f5;border:2px solid #bb974e;border-radius:24px;padding:18px 24px;text-align:center;box-shadow:0 8px 36px #132d2b66}
.forest-finale h2{font-family:Georgia,serif;font-size:clamp(1.25rem,2.5vw,1.8rem);margin:0 0 8px;color:#27533e}
.forest-finale p{font-size:1.0625rem;line-height:1.45;margin:0 0 14px}
.finale-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.finale-actions button{min-height:48px}
.forest-gathering .forest-celebration{background:radial-gradient(ellipse at 50% 52%,#ffe9a847,transparent 65%)}
.forest-gathering .crowd-member{width:var(--crowd-width,12%);height:24%;bottom:calc(24% + var(--crowd-depth,0%))}
.forest-gathering .forest-map .forest-player{bottom:25%;left:44%}
.cut-comparison{max-width:620px;margin:16px auto 0;padding:14px 16px;border:1px solid #bdad7c;background:#fff8e8;border-radius:14px}
/* One continuous measurement strip; repeating bundles look like separate pieces. */
.timber-surface .measure-board{background:#bb925d;box-shadow:inset 0 4px 0 #d8b37b,inset 0 -5px 0 #976d40,0 8px 7px #50361e33}
.cut-comparison figcaption{font-weight:800;color:#814329;margin-bottom:10px;font-size:1rem}
.cut-compare-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;margin:7px 0;font-size:1rem}
.cut-compare-track{height:30px;position:relative;border-left:2px solid #74613e}
.cut-compare-track>span{display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:0;bottom:0;white-space:nowrap;min-width:0;font-weight:800;font-size:.875rem}
.cut-needed{background:#dce8c5;border:2px dashed #4d7153;color:#23432f}
.cut-actual{background:#c49661;border:1px solid #78512f;color:#241b13}
.payday-impact{clear:both;padding:12px 14px;background:#e6eccb;border-radius:12px}
@media(max-width:719px){
  .journal-keepsakes{grid-template-columns:1fr}
  .forest-finale{width:calc(100% - 28px);bottom:76px;padding:16px;max-height:45%}
  .cut-comparison{padding:12px;margin-top:12px}.cut-compare-row{grid-template-columns:82px minmax(0,1fr);font-size:.875rem}
}
@media(orientation:landscape) and (max-height:700px){
  .forest-finale{padding:12px 18px;max-height:42%;bottom:12px}
  .forest-finale p{font-size:1rem;margin-bottom:10px}
  .forest-finale h2{margin-bottom:5px}
  .forest-gathering .crowd-member{height:22%;bottom:calc(28% + var(--crowd-depth,0%))}
  .forest-gathering .forest-map .forest-player{bottom:29%}
}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .forest-path-lights span{animation:none}}
html[data-motion="reduced"] .forest-path-lights span{animation:none}