@charset "UTF-8";
:root {
  color-scheme: light;
  --ink: #354536;
  --muted: #687666;
  --quiet: #87917f;
  --paper: #fffaf0;
  --paper-deep: #f3ead5;
  --line: #d9d1b8;
  --green: #719454;
  --green-deep: #426443;
  --sun: #e3b95e;
  --water: #4c9c9c;
  --shadow: 0 10px 25px #4c52321b;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(ellipse at 50% -10%, #fffdf7 0, transparent 45%), repeating-linear-gradient(0deg, #d3c7a512 0 1px, transparent 1px 5px), #f4eedf; padding: env(safe-area-inset-top) max(24px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(24px, env(safe-area-inset-left)); }
button, a { font: inherit; } button { color: inherit; }
.site-header, main, .site-footer { width: min(1440px, 100%); margin-inline: auto; }
.site-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #8c8c6826; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; flex: none; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid #71855a; border-radius: 16px 16px 13px 13px; background: linear-gradient(145deg, #b7d47d, #779a60); box-shadow: inset 0 2px #ffffff9c; }
.brand-mark span { width: 21px; height: 26px; border-radius: 100% 0 100% 0; background: #365c3b; transform: rotate(-35deg); position: relative; }
.brand-mark span::after { content: ""; position: absolute; width: 2px; height: 20px; left: 10px; top: 5px; background: #e5edc0; transform: rotate(35deg); }
.brand strong { display: block; font: 900 19px/1 Georgia, serif; letter-spacing: -.04em; }
.brand small { display: block; margin-top: 5px; color: #75806a; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.header-life { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.readout { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #d8d0b9; border-radius: 999px; background: #fffaf0c9; color: #586854; font-size: 12px; font-weight: 750; white-space: nowrap; }
.readout > span:first-child { color: #b38b40; font-size: 15px; }
.phase-chip { display: inline-flex; min-height: 30px; align-items: center; padding: 6px 11px; border: 1px solid #b9c69e; border-radius: 999px; background: #edf1df; color: #4f6847; font-size: 11px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.phase-chip.is-paused { border-color: #d3b264; background: #fff1cf; color: #785a26; }.phase-chip.is-terminal { background: #e2eed2; }
main { padding-block: 18px 28px; }
.eyebrow { margin: 0 0 6px; color: #81905f; font-size: 10px; font-weight: 950; letter-spacing: .14em; }
h1,h2,h3,p { overflow-wrap: anywhere; }
.start-panel { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 16px; margin: 0 0 17px; padding: 17px 21px; border: 1px solid #d8cda9; border-radius: 18px; background: linear-gradient(115deg,#fff9e8,#f5e9cf); box-shadow: var(--shadow); }
.letter-stamp { width: 48px; height: 48px; display: grid; place-items: center; border: 1px dashed #a78b4c; border-radius: 50%; color: #a77f38; background: #fff5d9; font-size: 25px; }
.letter-copy h1 { margin: 0; color: #415841; font: 700 clamp(21px,2.7vw,31px)/1.1 Georgia,serif; letter-spacing: -.035em; }
.letter-copy > p:last-child { max-width: 760px; margin: 6px 0 0; color: #68715e; font-size: 13px; line-height: 1.5; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 850; cursor: pointer; transition: transform .15s ease, filter .15s ease, background .15s ease; }
.button:hover:not(:disabled), .action-button:hover:not(:disabled), .move-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
.button:active:not(:disabled), .action-button:active:not(:disabled), .move-button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled, .action-button:disabled, .move-button:disabled { opacity: .48; cursor: not-allowed; }
.button-primary { color: #fffdf3; background: linear-gradient(145deg,#799959,#557a4d); box-shadow: inset 0 1px #ffffff68,0 3px 0 #476643; }
.button-end { width: 100%; margin-top: 9px; color: #fffdf1; background: #638653; }
.button-secondary { border-color: #c8c5a8; background: #eff0df; }.button-quiet { border-color: #d7cfb8; color: #6c7565; background: transparent; }
.button kbd { font-size: 10px; }.button-journal { grid-column: 1/-1; width: 100%; border-color: #d6c9a9; color: #59664d; background: #f8efd9; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(300px, .78fr); align-items: stretch; gap: 16px; }
.world-panel { min-width: 0; padding: 17px 19px 14px; border: 1px solid #d7cfb6; border-radius: 21px; background: #fffaf0; box-shadow: var(--shadow); }
.world-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 11px; }
.world-heading h2 { margin: 0; color: #405a42; font: 700 clamp(21px,2vw,28px)/1 Georgia,serif; letter-spacing: -.03em; }.world-heading h2 span { color: #99a17f; font: 15px system-ui; }
.north-indicator { width: 39px; height: 39px; display: grid; align-content: center; justify-items: center; border: 1px solid #ded6be; border-radius: 13px; color: #638254; background: #f6f2e3; font-weight: 900; }.north-indicator span { font-size: 17px; line-height: 16px; }.north-indicator small { font-size: 9px; }
.scene-frame { position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px,3.2vw,42px) clamp(13px,2.2vw,29px) 16px; border: 5px solid #876e4b; border-radius: 20px; background-color: #77a767; background-image: radial-gradient(ellipse at 45% 38%,#a8c77980,transparent 48%), repeating-linear-gradient(25deg,#ffffff0b 0 2px,transparent 2px 9px), linear-gradient(#84b776,#6e9d61); box-shadow: inset 0 0 0 2px #d5b982,inset 0 0 0 6px #725c40,0 4px 0 #66543f; }
.scene-sky { position: absolute; z-index: -1; inset: 0 0 46%; overflow: hidden; background: linear-gradient(#a9d2cb 0%,#d6e2bd 71%,#9dbb78 100%); }
.sun-disc { position: absolute; top: 12%; right: 10%; width: 49px; aspect-ratio: 1; border-radius: 50%; background: #f8d982; box-shadow: 0 0 0 9px #f9e6a239,0 0 30px #f9e6a255; }
.cloud { position: absolute; width: 61px; height: 15px; border-radius: 30px; background: #f9f7e2c4; }.cloud::before,.cloud::after { position: absolute; bottom: 5px; width: 25px; height: 22px; border-radius: 50%; background: inherit; content: ""; }.cloud::before { left: 9px; }.cloud::after { left: 25px; width: 20px; height: 18px; }.cloud-one { top: 28%; left: 15%; }.cloud-two { top: 12%; left: 54%; transform: scale(.7); }
.distant-ridge { position: absolute; inset: auto -3% -2px; height: 48%; background: linear-gradient(145deg,#86ad70,#64945e); clip-path: polygon(0 63%,18% 33%,31% 62%,49% 14%,67% 61%,84% 31%,100% 61%,100% 100%,0 100%); opacity: .85; }
.map-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: clamp(3px,.55vw,7px); padding: 7px; border: 2px solid #d9cb9c; border-radius: 14px; background-color: #87a96d; background-image: repeating-linear-gradient(35deg,#fff1 0 1px,transparent 1px 11px); box-shadow: 0 3px 10px #30472b28; }
.tile { position: relative; display: flex; min-width: 0; min-height: clamp(60px,8.4vw,105px); aspect-ratio: 1.12/1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; padding: 3px; border: 1px solid #fff6c982; border-radius: 9px; color: #304834; background: linear-gradient(145deg,#96b96e,#80a75e); box-shadow: inset 0 2px #ffffff5c,inset 0 -4px #49663b20; cursor: pointer; transition: filter .15s ease, transform .15s ease, outline .15s ease; }
.tile::before { position: absolute; inset: 0; background: repeating-linear-gradient(145deg,transparent 0 8px,#ffffff12 8px 9px); content: ""; pointer-events: none; }.tile:hover { z-index: 2; filter: brightness(1.09); transform: translateY(-2px); }.tile[aria-pressed="true"],.tile-selected { z-index: 3; outline: 3px solid #fff1b3; outline-offset: -4px; box-shadow: 0 0 0 2px #55744b,inset 0 0 0 2px #fff9; }.tile:focus-visible { z-index: 4; outline: 3px dashed #253e31; outline-offset: -5px; }
.tile-mark { position: relative; z-index: 1; color: #eff2c9; font-size: clamp(15px,2.4vw,24px); font-weight: 900; line-height: 1; text-shadow: 1px 2px #294c3655; }.tile-name { position: relative; z-index: 1; max-width: 100%; overflow: hidden; color: #fffce7; font-size: 10px; font-weight: 900; line-height: 1.1; text-shadow: 0 1px 3px #233f2c; text-overflow: ellipsis; white-space: nowrap; }.tile-status { position: relative; z-index: 1; max-width: 100%; overflow: hidden; color: #fff5cc; font-size: 10px; font-weight: 900; letter-spacing: .02em; line-height: 1.1; text-shadow: 0 1px 3px #263d26; text-overflow: ellipsis; white-space: nowrap; }
.tile-forest,.tile-habitat { background: radial-gradient(ellipse at 55% 30%,#bbcf76 0 7%,transparent 8%),radial-gradient(ellipse at 30% 56%,#456f43 0 22%,transparent 23%),radial-gradient(ellipse at 72% 58%,#527e47 0 25%,transparent 26%),linear-gradient(145deg,#8dab62,#668c53); }.tile-forest .tile-mark,.tile-habitat .tile-mark { color:#d7e795; }
.tile-wetland,.tile-river { border-color:#c8e3bd; background:repeating-linear-gradient(165deg,#4d9890 0 9px,#6eb0a3 10px 13px,#3f8887 14px 22px); }.tile-river { border-radius:13px; }.tile-community,.tile-home { background:linear-gradient(160deg,#e6c983 0 19%,#986a46 20% 49%,#d1aa67 50% 60%,#769b5d 61%); }.tile-community-nursery,.tile-nursery { background:repeating-linear-gradient(90deg,#719e5e 0 8px,#c2ce78 9px 12px,#719e5e 13px 21px); }.tile-cabin { background:linear-gradient(165deg,#a7c5b0 0 30%,#a57c4d 31% 72%,#668b55 73%); }.tile-peat,.tile-parcel { background:linear-gradient(145deg,#a9ad6f,#818e58); }.tile-palm { background:repeating-linear-gradient(135deg,#819b50 0 8px,#b0b566 9px 13px,#758d4e 14px 21px); }.tile-charred { background:repeating-linear-gradient(130deg,#625d4f 0 7px,#776653 8px 11px,#514f45 12px 19px); }.tile-restoration,.tile-garden-plot { background:repeating-linear-gradient(0deg,#916b44 0 7px,#bb9864 8px 11px,#789759 12px 17px); }.tile-community .tile-name,.tile-community .tile-status,.tile-home .tile-name,.tile-home .tile-status { color:#fffbe5; }
.tile-fire { border-color:#d77945; background:radial-gradient(circle at 50% 30%,#ffe49a 0 8%,transparent 9%),linear-gradient(145deg,#d78c4e,#a85c3b); animation: ember 1.8s ease-in-out infinite alternate; }.tile-risk:not(.tile-fire) { border-style:dashed; border-color:#bb704c; }.tile-clue:not(.tile-fire) { box-shadow:inset 0 0 0 2px #f4dc8c; }.tile-cared { border-bottom:4px solid #f3dd94; }.tile-rescued .tile-mark { color:#fff1b0; }.tile-restored,.tile-restoration { box-shadow:inset 0 -5px #55926466; }.tile-player-here { outline:2px solid #f4d978; outline-offset:-3px; }
/* New generated scene vocabulary: all decorative scene parts stay inside the native tile buttons. */
.tile-scenery { position:absolute; z-index:0; inset:0; pointer-events:none; }
.scenery-forest,.scenery-habitat { background:radial-gradient(ellipse at 24% 38%,#477447 0 14%,transparent 15%),radial-gradient(ellipse at 72% 31%,#537f45 0 17%,transparent 18%),linear-gradient(0deg,#6f9858 0 28%,transparent 29%); }
.scenery-river { background:repeating-linear-gradient(165deg,#3b8b8a 0 7px,#72b5aa 8px 10px,#4a9992 11px 17px); }.scenery-home,.scenery-cabin,.scenery-community { background:linear-gradient(150deg,transparent 0 35%,#875936 36% 62%,transparent 63%),linear-gradient(180deg,transparent 0 54%,#d6af6e 55% 79%,#759857 80%); }.scenery-garden-plot,.scenery-nursery,.scenery-restoration { background:repeating-linear-gradient(0deg,#b58a56 0 6px,#6f995c 7px 12px); }.scenery-charred { background:repeating-linear-gradient(130deg,#565044 0 7px,#806549 8px 11px); }.scenery-palm { background:repeating-linear-gradient(135deg,#829a4c 0 8px,#627c45 9px 16px); }
.tile-label { position:relative; z-index:1; color:#fffce7; font-size:10px; font-weight:900; text-shadow:0 1px 3px #233f2c; }.actor { position:absolute; z-index:5; bottom:10%; left:50%; width:27px; height:40px; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(1px 2px 1px #263a3544); }.actor-head { position:absolute; top:0; left:6px; width:16px; height:16px; border:2px solid #f5e8c9; border-radius:50%; background:#c98556; box-shadow:inset 0 -3px #995f43; }.actor-head::before { position:absolute; inset:-3px -2px 8px; border-radius:11px 11px 3px 3px; background:#443c2f; content:""; }.actor-body { position:absolute; bottom:0; left:2px; width:24px; height:24px; border:2px solid #f5e8c9; border-radius:8px 8px 6px 6px; background:#688c5c; }.player-sprite .actor-head { background:#c88158; }.player-sprite .actor-body { background:#d89c4f; border-radius:8px 8px 5px 5px; }.npc-lela { left:32%; transform:translateX(-50%) scale(.91); }.npc-lela .actor-head { background:#a96d4f; }.npc-lela .actor-head::before { background:#342d2b; }.npc-lela .actor-body { background:#b9756c; }.npc-pak { left:70%; transform:translateX(-50%) scale(.91); }.npc-pak .actor-head { background:#bd825e; }.npc-pak .actor-head::before { inset:5px -1px -1px; border-radius:0 0 9px 9px; background:#55443a; }.npc-pak .actor-body { background:#547d77; }.crop-sprite { position:absolute; z-index:2; bottom:18%; left:25%; width:12px; height:20px; border-radius:80% 5% 80% 5%; background:#48804b; transform:rotate(-35deg); box-shadow:9px 4px #77a951,-5px 7px #5e9a4d; }.crop-sprite.stage-0 { transform:scale(.45) rotate(-35deg); transform-origin:bottom; }.crop-sprite.stage-2,.crop-sprite.stage-3 { height:26px; background:#477b44; }.hotspot-sprite { position:absolute; z-index:3; top:14%; right:18%; width:18px; height:22px; border-radius:50% 50% 40% 40%; background:radial-gradient(ellipse at 50% 70%,#ffe78e 0 23%,#f28b44 24% 55%,transparent 57%); filter:drop-shadow(0 0 5px #f08847); }.clue-sparkle { position:absolute; z-index:3; top:12%; right:16%; color:#fff5ad; font-size:18px; text-shadow:0 0 7px #fff; animation:sparkle 1.7s ease-in-out infinite alternate; }
.player-token { position:absolute; z-index:6; top:4px; left:4px; width:24px; height:24px; display:grid; place-items:center; border:2px solid #fff5ce; border-radius:50%; color:#4e563b; background:#f3d879; box-shadow:0 2px 4px #37463266; font-size:10px; font-weight:950; }
.scene-caption { display:flex; align-items:center; gap:8px; margin:11px 4px 0; color:#edf2d2; font-size:12px; font-weight:800; text-shadow:0 1px 2px #304a30; }.scene-caption > span:first-child { color:#f5db88; }.caption-birds { margin-left:auto; color:#e7f0cf; letter-spacing:.2em; }
.walk-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; }.map-caption { max-width:450px; margin:0; color:#6b7563; font-size:13px; line-height:1.45; }.move-tools { display:flex; align-items:center; gap:9px; }.move-hint,.key-hint { color:#838b78; font-size:10px; font-weight:900; letter-spacing:.08em; white-space:nowrap; }.move-pad { display:grid; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,42px); gap:3px; }.move-button { min-width:44px; min-height:42px; border:1px solid #c8cba9; border-radius:11px; color:#4d6947; background:#f0f0df; font-size:20px; font-weight:900; cursor:pointer; }.move-button.north { grid-column:2; grid-row:1; }.move-button.west { grid-column:1; grid-row:2; }.move-button.south { grid-column:2; grid-row:2; }.move-button.east { grid-column:3; grid-row:2; }
.scene-legend { display:flex; gap:16px; margin:11px 3px 0; color:#79806f; font-size:11px; }.scene-legend span { display:flex; align-items:center; gap:6px; }.legend-tree,.legend-water,.legend-flower { width:11px; height:11px; border-radius:4px; background:#64894f; }.legend-water { background:#58a2a1; }.legend-flower { color:#b98468; background:none; font-size:14px; }
.life-panel { min-width:0; padding:16px; border:1px solid #d7cfb6; border-radius:21px; background:linear-gradient(160deg,#fffcf4,#f4eedf); box-shadow:var(--shadow); }
.place-note { display:flex; gap:11px; min-height:91px; padding:12px; border:1px solid #e1d7bc; border-radius:15px; background:#faf3df; }.note-pin { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:50%; color:#b17d57; background:#f0e0b9; }.place-note .eyebrow { margin-bottom:3px; }.place-note h2 { margin:0; color:#465c43; font:700 18px/1.15 Georgia,serif; }.place-note p:last-child { margin:4px 0 0; color:#737969; font-size:12px; line-height:1.4; }
.activities { padding:14px 1px 11px; border-bottom:1px dashed #d8cfb9; }.section-title,.friendship h2,.pocket-inventory h2 { display:flex; align-items:center; justify-content:space-between; margin:0 2px 9px; color:#52644c; font:700 18px/1.2 Georgia,serif; }.section-title span { color:#c09a50; }.action-list { display:grid; gap:7px; }.action-button { display:flex; width:100%; min-height:56px; align-items:center; gap:9px; padding:8px 9px; border:1px solid #d4d0b6; border-radius:13px; background:linear-gradient(100deg,#f3f2df,#fbf7e9); text-align:left; cursor:pointer; }.action-icon { width:35px; height:35px; flex:none; display:grid; place-items:center; border-radius:11px; color:#5b764b; background:#e1e9cf; font-size:18px; }.action-copy { min-width:0; flex:1; }.action-copy strong,.action-copy small { display:block; }.action-copy strong { font-size:13px; line-height:1.3; }.action-copy small { margin-top:2px; color:#788071; font-size:11px; line-height:1.35; }.action-cost { flex:none; padding:5px 7px; border-radius:99px; color:#795f2e; background:#f1e3bb; font-size:10px; font-weight:900; white-space:nowrap; }.action-cost.no-cost { color:#667460; background:#e8ebdb; }.empty-actions { margin:0; padding:12px; border:1px dashed #d5ceb5; border-radius:12px; color:#6b7666; font-size:12px; line-height:1.5; }.action-note { margin:8px 2px 0; color:#838778; font-size:11px; line-height:1.45; }
.pocket-inventory { padding:12px 1px 10px; border-bottom:1px dashed #d8cfb9; }.pocket-inventory h2,.friendship h2 { margin-bottom:8px; font-size:16px; }.inventory-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.inventory-item { display:flex; min-width:0; align-items:center; gap:5px; padding:7px 6px; border-radius:10px; background:#f1eddd; color:#6c7565; font-size:11px; }.inventory-item i { color:#779455; font-style:normal; font-size:14px; }.inventory-item b { color:#455b43; }.friendship { padding:12px 1px 9px; }.friendship h2 span { color:#bd7b69; }.friend-row { display:flex; align-items:center; gap:9px; min-height:42px; }.friend-portrait { width:32px; height:32px; display:grid; place-items:center; border:2px solid #fff8e4; border-radius:50%; color:#fff9e7; background:#b67e67; box-shadow:0 1px 3px #4a503222; font:800 13px Georgia,serif; }.friend-portrait.pak { background:#628678; }.friend-name { flex:1; color:#485a46; font-size:12px; font-weight:850; }.friend-name small { display:block; margin-top:2px; color:#879080; font-size:10px; font-weight:500; }.hearts { color:#c17669; font-size:12px; letter-spacing:.04em; white-space:nowrap; }.life-buttons { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.life-buttons .button { min-height:44px; padding:7px; font-size:12px; }
.journal-panel,.outcome { margin-top:16px; padding:19px 21px; border:1px solid #d5c8a7; border-radius:19px; background:#fffaf0; box-shadow:var(--shadow); }.journal-heading { display:flex; align-items:center; justify-content:space-between; }.journal-heading h2,.outcome h2 { margin:0; color:#465d45; font:700 24px/1.15 Georgia,serif; }.log-count { color:#78806e; font-size:12px; }.journal-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:13px; }.journal-columns h3 { margin:0 0 8px; color:#59654e; font:700 16px Georgia,serif; }.evidence-list,.radio-log { display:grid; gap:7px; margin:0; padding:0; list-style:none; }.evidence-list li,.radio-log li { padding:9px 11px; border-radius:10px; background:#f4f0e2; color:#606b5a; font-size:12px; line-height:1.45; }.evidence-list strong,.evidence-list small { display:block; }.evidence-list small { color:#858c7a; font-size:11px; }.evidence-empty { color:#78806e!important; }.objective-list { display:flex; flex-wrap:wrap; gap:8px 15px; margin:15px 0 0; padding:0; list-style:none; }.objective { display:flex; align-items:flex-start; gap:7px; max-width:260px; color:#57644e; }.objective-mark { width:20px; height:20px; flex:none; display:grid; place-items:center; border:1px solid #bac49e; border-radius:50%; color:#64824d; font-size:12px; }.objective.is-done .objective-mark { color:white; background:#779658; }.objective strong,.objective small { display:block; }.objective strong { font-size:12px; }.objective small { margin-top:2px; color:#858b7b; font-size:11px; }
.outcome { text-align:center; }.outcome-flower { color:#a38153; font-size:32px; }.outcome > p:not(.eyebrow) { max-width:650px; margin:9px auto; color:#677261; line-height:1.6; }.outcome-list { display:inline-grid; gap:5px; text-align:left; color:#62705b; }.outcome .button { margin-top:8px; }
.site-footer { display:flex; justify-content:space-between; gap:14px; padding:13px 2px 18px; color:#818676; font-size:11px; line-height:1.5; }.footer-brand { flex:none; color:#647450; font-size:10px; font-weight:950; letter-spacing:.12em; }.footer-brand i { color:#a38054; font-style:normal; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
button:focus-visible,a:focus-visible { outline:3px solid #345d46; outline-offset:3px; box-shadow:0 0 0 5px #fff6d8; }.tile:focus-visible { outline:3px dashed #283c31; outline-offset:-5px; }
@keyframes ember { from { filter:saturate(.94); } to { filter:saturate(1.16) brightness(1.06); } }@keyframes sparkle { from { transform:scale(.8) rotate(-8deg); opacity:.7; } to { transform:scale(1.12) rotate(9deg); opacity:1; } }
@media (min-width:1100px) { .game-layout { grid-template-columns:minmax(0,2.18fr) minmax(320px,.78fr); } .world-panel { min-height:650px; } .scene-frame { min-height:478px; display:flex; flex-direction:column; justify-content:center; } .map-grid { width:100%; } }
@media (max-width:950px) { body { padding-inline:max(17px,env(safe-area-inset-left)); }.site-header { align-items:flex-start; padding-block:13px; }.header-life { gap:6px; }.readout { padding-inline:8px; font-size:11px; }.game-layout { grid-template-columns:minmax(0,1.55fr) minmax(275px,.9fr); gap:11px; }.world-panel { padding:14px; }.life-panel { padding:13px; }.scene-frame { padding:25px 13px 13px; }.move-tools { gap:5px; }.key-hint { display:none; } }
@media (max-width:700px) { body { padding-inline:max(12px,env(safe-area-inset-left)); }.site-header { display:grid; grid-template-columns:1fr; gap:10px; }.header-life { justify-content:flex-start; }.start-panel { grid-template-columns:42px minmax(0,1fr); gap:11px; padding:14px; }.letter-stamp { width:40px; height:40px; font-size:20px; }.start-panel > .button { grid-column:1/-1; width:100%; }.daily-note { grid-column:1/-1; margin:0; color:#787e6b; font-size:12px; }.game-layout { grid-template-columns:minmax(0,1fr); }.world-panel { order:0; }.life-panel { order:1; }.scene-frame { padding:25px 12px 13px; }.tile { min-height:clamp(54px,12vw,83px); }.walk-bar { align-items:flex-start; flex-direction:column; }.move-tools { width:100%; justify-content:space-between; }.scene-legend { flex-wrap:wrap; }.world-panel { padding:13px; }.life-panel { padding:15px; }.place-note { min-height:76px; }.button-journal { grid-column:1/-1; }.site-footer { flex-direction:column; gap:5px; }.journal-panel { padding:15px; } }
@media (max-width:420px) { body { padding-inline:max(9px,env(safe-area-inset-left)); }.site-header { min-height:0; }.brand-mark { width:39px; height:39px; }.header-life { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.header-life .phase-chip { justify-content:center; }.readout { justify-content:center; min-width:0; font-size:11px; }.readout.deadline { grid-column:1/-1; }.start-panel { margin-bottom:11px; }.letter-copy h1 { font-size:23px; }.letter-copy > p:last-child { font-size:12px; }.world-panel { padding:10px; border-radius:17px; }.world-heading { margin:1px 1px 9px; }.world-heading h2 { font-size:22px; }.scene-frame { padding:19px 7px 10px; border-width:4px; border-radius:16px; }.map-grid { gap:2px; padding:4px; grid-template-columns:repeat(7,minmax(0,1fr)); }.tile { min-height:clamp(43px,13.6vw,57px); aspect-ratio:1/1; padding:1px; border-radius:6px; }.tile-mark { font-size:16px; }.tile-name,.tile-status,.tile-label { font-size:9px; }.player-token { width:20px; height:20px; top:2px; left:2px; }.actor { transform:translateX(-50%) scale(.72); transform-origin:bottom center; }.actor.npc-lela { transform:translateX(-50%) scale(.65); }.actor.npc-pak { transform:translateX(-50%) scale(.65); }.hotspot-sprite { transform:scale(.8); }.map-caption { font-size:12px; }.move-hint { display:none; }.key-hint { display:none; }.move-tools { justify-content:flex-end; }.scene-caption { font-size:11px; }.scene-legend { gap:8px 13px; font-size:11px; }.life-panel { padding:12px; }.inventory-items { gap:4px; }.inventory-item { justify-content:center; flex-direction:column; gap:1px; padding:6px 2px; text-align:center; font-size:10px; }.inventory-item i { font-size:14px; }.friend-row { gap:7px; }.hearts { font-size:11px; }.journal-columns { grid-template-columns:1fr; gap:12px; }.journal-heading h2 { font-size:21px; }.site-footer { font-size:11px; } }
@media (max-width:350px) { .tile-name,.tile-status,.tile-label { font-size:8px; }.header-life { gap:4px; }.readout { padding-inline:5px; }.friend-name { font-size:11px; }.hearts { font-size:10px; } }
@media (max-height:540px) and (orientation:landscape) { .site-header { min-height:58px; }.start-panel { padding-block:10px; }.game-layout { grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr); }.scene-frame { padding-block:12px; }.tile { min-height:56px; }.life-panel { padding:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (forced-colors:active) { :root { color-scheme:light; }.tile,.button,.move-button,.action-button,.readout,.phase-chip { forced-color-adjust:auto; border:1px solid ButtonText; }.tile[aria-pressed="true"],.tile-selected { outline:3px solid Highlight; }.tile:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid Highlight; outline-offset:3px; }.tile-scenery,.scene-sky,.sun-disc,.cloud,.distant-ridge { forced-color-adjust:none; } }


/* Keep live story feedback readable, and let sprites carry the map on narrow phones. */
.daily-note {
  min-height: 40px;
  margin: 10px 3px 0;
  padding: 9px 12px;
  border-left: 3px solid #b99a58;
  border-radius: 0 11px 11px 0;
  color: #596851;
  background: #f6f0dd;
  font-size: 13px;
  line-height: 1.45;
}
.phase-chip, .readout, .eyebrow, .button kbd, .move-hint, .key-hint,
.scene-legend, .inventory-item, .friend-name small, .action-copy small,
.action-cost, .evidence-list small, .radio-log li, .objective strong,
.objective small, .site-footer {
  font-size: 12px;
}
.tile-label {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
}
@media (max-width: 950px) {
  .readout { font-size: 12px; }
}
@media (max-width: 420px) {
  .readout { font-size: 12px; }
  .inventory-item { font-size: 12px; }
  .tile-label { display: none; }
}
@media (max-width: 350px) {
  .tile-label { display: none; }
}

.move-pad { grid-template-rows: repeat(2, 44px); }
.move-button { min-height: 44px; }

.readout.is-hazy { border-color: #c9925e; color: #735332; background: #fff0d7; }
.tile-hazy:not(.tile-fire) { border-color: #d1a568; }
.haze-badge {
  position: absolute;
  z-index: 4;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #cfaa69;
  border-radius: 50%;
  color: #765a35;
  background: #fff4dc;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
@media (forced-colors: active) {
  .readout.is-hazy, .haze-badge { color: CanvasText; background: Canvas; border: 1px solid Highlight; }
  .tile-hazy:not(.tile-fire) { border: 2px dashed Highlight; }
}

.animal-sprite {
  position: absolute;
  z-index: 4;
  bottom: 13%;
  left: 50%;
  width: clamp(27px, 4vw, 42px);
  height: clamp(19px, 3vw, 29px);
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(1px 2px 1px #263a3544);
  animation: animal-bob 2.7s ease-in-out infinite alternate;
}
.bird {
  position: absolute;
  bottom: 2px;
  width: 64%;
  height: 58%;
  border-radius: 55% 55% 35% 45%;
  background: #364f3a;
  box-shadow: inset 0 -2px #203829;
}
.bird-one { left: 0; }
.bird-two { right: 0; transform: scale(.82); transform-origin: bottom right; }
.bird::before {
  position: absolute;
  top: 40%;
  left: 8%;
  width: 74%;
  height: 38%;
  border-radius: 50%;
  background: #e4d8b1;
  content: "";
}
.bird::after {
  position: absolute;
  top: 25%;
  right: -8px;
  width: 10px;
  height: 5px;
  background: #dfa94a;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}
.animal-eye {
  position: absolute;
  z-index: 1;
  top: 19%;
  right: 27%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff8df;
}
.ape-body {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 61%;
  height: 62%;
  border-radius: 55% 50% 40% 45%;
  background: #b96338;
}
.ape-head {
  position: absolute;
  top: 0;
  left: 40%;
  width: 38%;
  height: 49%;
  border-radius: 50%;
  background: #d47c49;
}
.ape-head::before {
  position: absolute;
  top: 48%;
  left: 25%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #3f3026;
  box-shadow: 7px 0 #3f3026;
  content: "";
}
.ape-arm {
  position: absolute;
  bottom: 2%;
  width: 22%;
  height: 69%;
  border-radius: 999px;
  background: #a95432;
}
.arm-left { left: 8%; transform: rotate(-16deg); }
.arm-right { right: 8%; transform: rotate(16deg); }
.ape-child {
  position: absolute;
  right: 1%;
  bottom: 0;
  width: 42%;
  height: 50%;
  border: 1px solid #99512f;
  border-radius: 55% 50% 40% 45%;
  background: #d07b49;
}
.ape-child::before {
  position: absolute;
  top: -5px;
  left: 22%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d78350;
  content: "";
}
.animal-sprite.is-rescued::after {
  position: absolute;
  z-index: 7;
  top: -6px;
  right: -5px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #87a66b;
  border-radius: 50%;
  color: #38603b;
  background: #eff6df;
  font-size: 11px;
  font-weight: 800;
  content: "✓";
}
@keyframes animal-bob { from { translate: 0 1px; } to { translate: 0 -1px; } }
@media (forced-colors: active) {
  .animal-sprite, .bird, .ape-body, .ape-head, .ape-arm, .ape-child { forced-color-adjust: none; }
  .animal-sprite.is-rescued::after { color: Highlight; background: Canvas; border-color: Highlight; }
}

/* Farming-week map and time-allocation HUD additions. */
.clock-status { border-color:#b9c99b; color:#36563d; background:#edf3df; font-size:14px; font-variant-numeric:tabular-nums; }
.day-status { border-color:#b9c99b; background:#edf3df; color:#426443; font-weight:900; }
.clock-used { gap:7px; padding-inline:10px; }
.clock-used label { color:#586854; font-size:11px; font-weight:800; }
.clock-used progress { width:76px; height:10px; accent-color:#719454; }
.legend-market,.legend-square { color:#755b37; font-size:13px; font-style:normal; font-weight:900; }
.legend-square { color:#69834d; }
.tile-market { background:linear-gradient(145deg,#e2c484 0 35%,#b8794c 36% 58%,#d6b36e 59% 70%,#76965c 71%); }
.tile-coop { background:linear-gradient(150deg,#d5dfb0 0 34%,#8b6748 35% 62%,#d0ad70 63% 73%,#76945c 74%); }
.tile-square,.tile-gathering { background:radial-gradient(ellipse at center,#d7bf83 0 27%,transparent 28%),linear-gradient(145deg,#93aa69,#77955c); }
.plot-overgrown { background:repeating-linear-gradient(135deg,#667e4d 0 5px,#9bad5b 6px 9px,#735d42 10px 14px); }
.plot-cleared { background:linear-gradient(145deg,#a4a96b,#8b9561); }
.plot-tilled { background:repeating-linear-gradient(0deg,#825f43 0 5px,#bc9360 6px 9px); }
.crop-sprite.stage-1 { height:17px; transform:scale(.72) rotate(-35deg); transform-origin:bottom; }
.crop-sprite.stage-2 { height:23px; }
.crop-sprite.stage-3 { height:29px; background:#568744; box-shadow:9px 4px #94b34d,-5px 7px #75a650; }
.animal-sprite.hen { width:30px; height:24px; border-radius:55% 55% 45% 45%; background:#d9bd80; }
.animal-sprite.hen::before { content:""; position:absolute; top:-5px; left:18px; width:10px; height:12px; border-radius:50%; background:#d9bd80; box-shadow:4px -4px 0 -2px #bf684c; }
.animal-sprite.hen::after { content:""; position:absolute; right:-5px; top:1px; border-left:7px solid #d79143; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.inventory-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
.inventory-item { min-height:39px; }
@media (max-width:700px) {
  .header-life { align-items:stretch; }
  .clock-used { justify-content:center; }
}
@media (max-width:420px) {
  .header-life { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clock-used { grid-column:1/-1; justify-content:flex-start; }
  .clock-used progress { flex:1; max-width:120px; }
  .clock-status { font-size:14px; }
}
@media (max-width:350px) {
  .clock-used label { font-size:10px; }
  .clock-used progress { width:54px; }
}
@media (forced-colors:active) {
  .clock-status,.day-status,.clock-used { border:1px solid ButtonText; color:CanvasText; background:Canvas; }
  .plot-overgrown,.plot-cleared,.plot-tilled,.tile-market,.tile-coop,.tile-square { forced-color-adjust:auto; border:1px solid ButtonText; }
}


/* Nov 12 response outlook and sector-watch state. */
.night-outlook { display:flex; align-items:flex-start; gap:10px; margin:10px 4px 0; padding:11px 13px; border:1px solid #c6d5bf; border-radius:14px; color:#314a39; background:#edf4e7; }
.night-outlook .eyebrow { margin-bottom:3px; color:#506e4a; }
.night-outlook p:last-child { margin:0; font-size:12px; line-height:1.45; }
.outlook-mark { flex:none; display:grid; width:31px; height:31px; place-items:center; border:1px solid #7c9d70; border-radius:50%; color:#315e49; background:#fffaf0; font-size:19px; font-weight:900; }
.night-outlook.is-risk { border-color:#d6a16d; background:#fff0dc; }
.night-outlook.is-risk .outlook-mark { border-color:#b97648; color:#7a492e; }
.night-outlook.is-watched { border-color:#6a9ca0; background:#e7f3f0; }
.night-outlook.is-rain { border-color:#88b7b1; background:#e8f5f3; }
.night-outlook.is-contained { border-color:#c7d4bd; background:#f1f4e8; }
.tile-watched { box-shadow:inset 0 0 0 3px #397a78, inset 0 -5px #397a7833; }
.watch-badge { position:absolute; z-index:6; top:3px; left:3px; padding:2px 4px; border:1px solid #d5efde; border-radius:6px; color:#fff; background:#245f59; font-size:8px; font-weight:950; letter-spacing:.04em; text-shadow:none; }
.legend-watch { color:#245f59; font-size:14px; font-style:normal; font-weight:950; }
@media (max-width:420px) {
  .night-outlook { margin-inline:1px; padding:9px 10px; }
  .night-outlook p:last-child { font-size:11px; }
}
@media (forced-colors: active) {
  .tile-watched { outline:2px solid Highlight; outline-offset:-4px; }
  .watch-badge { color:HighlightText; background:Highlight; border-color:Highlight; }
  .night-outlook { border-color:CanvasText; }
}

/* Nov 13: point the game-only night outlook back to its map sector. */
.scene-legend { flex-wrap:wrap; }
.tile-outlook-target:not(.tile-selected) { outline:3px solid #f0d26b; outline-offset:-5px; }
.outlook-badge { position:absolute; z-index:7; top:3px; left:3px; padding:2px 4px; border:1px solid #fff5cb; border-radius:6px; color:#344a37; background:#f0d26b; font-size:8px; font-weight:950; letter-spacing:.04em; line-height:1.2; text-shadow:none; pointer-events:none; }
.legend-next { flex:none; padding:2px 4px; border:1px solid #a58a36; border-radius:5px; color:#344a37; background:#f0d26b; font-size:8px; font-style:normal; font-weight:950; letter-spacing:.04em; line-height:1.2; }
@media (forced-colors:active) {
  .tile-outlook-target:not(.tile-selected) { outline:3px dashed Highlight; outline-offset:-5px; }
  .outlook-badge,.legend-next { color:HighlightText; background:Highlight; border-color:Highlight; }
}