@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@600;700;800&display=swap');
:root{--paper:#f7f7ef;--ink:#293d32;--muted:#7b857a;--line:#dfe3d6;--green:#c8d59e;--font:'DM Sans',sans-serif;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,a,select,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #647e4a;outline-offset:5px}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.site-header{height:112px;max-width:1440px;margin:0 auto;padding:0 54px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:36px}.brand{display:flex;align-items:center;gap:13px;font-family:Manrope,var(--font);font-weight:800;font-size:18px;letter-spacing:-.7px;line-height:1.12}.brand-period{color:#97ab72}.brand-icon{display:flex;align-items:center;justify-content:center;width:49px;height:49px;background:#e8edd7;border-radius:50%}.brand-icon svg{width:37px;height:37px;stroke:none}.header-tagline{border-left:1px solid #d4dacb;padding-left:29px;font-size:12px;line-height:1.8;color:#4e5b50}.header-tagline span{color:#929889}.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.live-status{font-size:9px;font-weight:600;letter-spacing:1.4px;margin-right:22px;color:#667760;display:flex;gap:8px;align-items:center}.live-status i,.status-dot{width:6px;height:6px;border-radius:50%;background:#819864;display:inline-block;box-shadow:0 0 0 4px #8299620d}.icon-button{width:29px;height:34px;display:grid;place-items:center;position:relative}.icon-button svg{width:20px;height:20px}.icon-button:hover{color:#88a25b}.sound-slash{position:absolute;left:4px;top:16px;width:22px;height:1px;transform:rotate(-47deg);background:var(--ink);box-shadow:0 0 0 2px var(--paper)}.sound-toggle.enabled .sound-slash{display:none}main{max-width:1440px;margin:auto;padding:0 54px}.intro{padding:37px 2px 30px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:600;color:#7b866e}.intro .eyebrow{display:flex;align-items:center;gap:7px}.little-star{font-size:17px;color:#92a769;line-height:1}h1{font-family:var(--serif);font-size:40px;font-weight:400;letter-spacing:-1.8px;margin:10px 0 10px;line-height:1.15}.intro p{font-size:12px;color:var(--muted);margin:0}.year-stamp{border-left:1px solid var(--line);padding:0 2px 0 29px;min-width:146px;display:flex;flex-direction:column;gap:6px}.year-stamp>span{font-size:8px;letter-spacing:1.55px;color:#88917e}.year-stamp>strong{font-family:var(--serif);font-weight:400;font-size:29px;display:flex;align-items:center;gap:8px}.year-stamp b{font-weight:400}.year-stamp svg{width:24px;height:24px;color:#8a9b6d;margin-left:8px}.island-window{height:min(54vw,575px);min-height:450px;position:relative;overflow:hidden;border:1px solid #d2e0d6;border-radius:9px;background:#dcebe4;isolation:isolate}.island-window:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:9px;box-shadow:inset 0 0 60px #a9c9c215}.island-window canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.island-window canvas:active{cursor:grabbing}.island-heading{position:absolute;top:24px;left:26px;display:flex;align-items:center;gap:9px;color:#617669;font-size:11px;pointer-events:none}.weather{position:absolute;top:21px;right:25px;display:flex;align-items:center;gap:8px;font-size:10px;color:#71887a;pointer-events:none}.weather svg{width:21px;height:21px;stroke-width:1.2}.population-card{position:absolute;left:25px;top:69px;width:177px;padding:20px 19px 16px;border:1px solid #e1e6d6b8;background:#fafaf0e8;border-radius:5px;box-shadow:0 4px 13px #4b625105;pointer-events:none}.population-card .eyebrow{font-size:8px;letter-spacing:1.5px}.population-count{display:flex;align-items:center;justify-content:space-between;margin:8px 0 2px;font-family:var(--serif);font-size:43px;line-height:1.2}.population-count svg{width:32px;color:#95a17c;stroke-width:1.2}.population-card p{font-size:9px;color:#8e9484;margin:4px 0 17px}.card-rule{border-top:1px solid #dfe4d4;margin-bottom:13px}.mini-stat{display:flex;justify-content:space-between;font-size:9px;margin-top:11px;color:#8b9483}.mini-stat b{color:#536746;font-weight:500}.happiness-dot{width:4px;height:4px;display:inline-block;margin-right:4px;background:#9fb079;border-radius:50%}.map-coordinate{position:absolute;left:25px;bottom:22px;font-size:7px;letter-spacing:1.3px;color:#8da598;pointer-events:none}.map-controls{position:absolute;right:22px;bottom:20px;display:flex;padding:2px;background:#f7f9edb8;border:1px solid #cfddcf;border-radius:5px;gap:2px}.map-controls button{width:29px;height:30px;font-size:19px;display:grid;place-items:center}.map-controls button+button{border-left:1px solid #d8e1d3}.map-controls svg{width:16px;height:16px}.map-controls button:hover{background:#dee8d3;border-radius:3px}.instruction{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);text-align:center;font-family:var(--serif);font-size:20px;white-space:nowrap;pointer-events:none;color:#536a55}.instruction>span{display:block;font-size:18px;color:#93a579;margin-bottom:6px}.instruction small{display:block;font-family:var(--font);font-size:9px;color:#8fa18b;margin-top:6px;letter-spacing:.2px}.toast{position:absolute;left:50%;top:66px;transform:translate(-50%,-7px);background:#f7f8edf2;padding:12px 19px;border:1px solid #d6dfca;border-radius:6px;font-size:11px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:75%;text-align:center;box-shadow:0 4px 20px #344d3d0a}.toast.visible{opacity:1;transform:translate(-50%,0)}.project-overlay{position:absolute;left:25px;bottom:61px;width:200px;border:1px solid #d0ddc7;border-radius:5px;background:#f7f8eef2;padding:13px 14px}.project-overlay>div:first-child{display:flex;gap:7px;align-items:center;font-size:9px}.project-overlay b{font-weight:500}.project-overlay #project-percent{margin-left:auto;color:#8a987b}.project-overlay p{color:#8c9980;font-size:9px;margin:9px 0}.progress-track{height:3px;background:#dde6d5;border-radius:2px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:#8b9f6c;transition:width .5s}.dashboard{display:flex;align-items:center;padding:25px 2px 23px;border-bottom:1px solid var(--line);gap:32px}.terrain-summary{display:flex;gap:13px;align-items:center}.stat-icon{width:37px;height:37px;display:grid;place-items:center;background:#eaf0dc;border:1px solid #e0e7cf;border-radius:6px;flex-shrink:0}.stat-icon svg{width:21px;height:21px;color:#829268}.terrain-summary .eyebrow{font-size:8px;letter-spacing:1.2px;display:block;margin-bottom:6px}.terrain-summary strong{font-size:17px;font-weight:500;white-space:nowrap}.terrain-summary strong small{font-size:11px;font-weight:400;color:#64715e}.land-added{font-size:9px;font-weight:400;color:#99a184;margin-left:15px}.resources{display:flex;gap:22px;margin-left:auto}.resources>div{display:flex;align-items:center;gap:5px;color:#64775c;font-size:12px}.resources svg{width:18px;height:20px;color:#8e9c73}.resources small{font-size:9px;margin-left:-3px}.time-controls{display:flex;gap:13px;align-items:center;margin-left:3px;padding-left:26px;border-left:1px solid var(--line)}#pause{width:25px;height:31px;display:grid;place-items:center}#pause svg{width:15px;height:15px;stroke-width:2}.speed-buttons{display:flex;padding:3px;border:1px solid #dde3d0;border-radius:5px;background:#f0f2e7;gap:2px}.speed-buttons button{height:29px;min-width:33px;font-size:10px;color:#909980;border-radius:3px}.speed-buttons button.active{background:#e0e8ca;color:#465b3d;box-shadow:0 1px 2px #40553510}.time-caption{font-size:7px;letter-spacing:1px;color:#8d987e;max-width:73px;line-height:1.8}.history-section{padding:29px 2px 0}.history-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.history-heading h2{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.5px;margin:0}.history-heading h2>span{color:#9aaa7d}.history-heading>button{font-size:10px;color:#7f8c73;padding:8px 0 8px 12px;display:flex;gap:16px;align-items:center}.history-heading>button span{font-size:16px}.history-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:31px;min-height:80px}.history-item{display:flex;gap:13px;position:relative}.history-marker{width:29px;height:29px;border:1px solid #e1e6d7;background:#eff1e5;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#82956b;font-size:13px}.history-item time{font-size:8px;letter-spacing:.8px;color:#89977a;display:block;margin-bottom:7px;font-weight:600}.history-item p{font-size:11px;color:#697362;line-height:1.7;margin:0;max-width:280px}.history-item:not(:last-child):after{content:'';position:absolute;right:-15px;top:2px;height:48px;border-right:1px solid #e5e8dc}.history-empty{color:#a0a68f;font-size:11px;padding-top:8px;font-style:italic}footer{max-width:1440px;margin:27px auto 0;padding:20px 54px 23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#9aA18d;font-size:9px;letter-spacing:.15px}.footer-flower{font-size:14px;color:#8d9d71;margin-left:8px}dialog{border:1px solid #d9dfce;background:var(--paper);color:var(--ink);border-radius:12px;padding:43px;max-width:510px;width:calc(100% - 32px);box-shadow:0 20px 100px #213e3029;max-height:85vh;overflow:auto}dialog::backdrop{background:#26463555;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:15px;top:12px;font-size:26px;font-weight:400;color:#829173;width:30px;height:30px}dialog h2{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-1px;margin:16px 0}dialog>p{font-size:12px;color:#7a8571;line-height:1.9}.guide-steps{margin:25px 0}.guide-steps>div{display:flex;gap:16px;align-items:baseline;border-top:1px solid #e1e5d6;padding:13px 0}.guide-steps>div>span{color:#a0ac8a;font-size:10px}.guide-steps p{font-size:12px;color:#7d8873;line-height:1.7;margin:0}.guide-steps strong{color:#4d6244;font-weight:500}.dialog-note{font-size:10px!important;color:#8d9782!important;line-height:1.9}.primary-button{padding:13px 17px;background:#dce7c4;border:1px solid #cbd8ad;border-radius:5px;font-size:12px;margin-top:14px;display:flex;gap:24px;align-items:center;justify-content:space-between}.primary-button:hover{background:#d0dfb0}.secondary-button{font-size:11px;padding:14px 0}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}.setting-row strong{font-size:12px;font-weight:500;display:block}.setting-row small{display:block;font-size:10px;color:#87917c;line-height:1.5;margin-top:5px}.setting-row select{border:1px solid #d4ddc5;background:#edf0e2;padding:9px 7px;color:#657459;border-radius:4px;font-size:10px;max-width:173px}.setting-row input{accent-color:#7b935d;width:17px;height:17px;flex-shrink:0}.text-danger{font-size:11px;color:#a1795d;margin-top:22px;padding:0}.save-status{font-size:9px!important;margin-top:22px;color:#a1a990!important}.book-dialog{width:min(780px,calc(100% - 24px));max-width:780px;padding-top:0}.journal-page .history-item{padding:15px 0;border-bottom:1px solid var(--line)}.journal-page .history-item:after{display:none}.journal-page .history-item p{max-width:none}.journal-page>p{margin-bottom:25px}.ending-symbol{font-size:70px;text-align:center;color:#a4aa77;margin-top:20px}#ending-dialog{text-align:center}#ending-dialog .primary-button{width:100%}.ending-quote{font-family:var(--serif);font-size:19px!important;color:#5c6c4e!important}.ending-shortage{background:#eeecda;border:1px solid #dedcc2;border-radius:7px;padding:23px 10px;margin:27px 0 12px}.ending-shortage>span{display:block;font-size:8px;letter-spacing:1.4px;color:#a29c74}.ending-shortage strong{display:block;font-family:var(--serif);font-size:25px;font-weight:400;margin:12px 0;color:#89764f}.ending-shortage p{font-size:10px;color:#9b9379}body.is-paused .live-status i{background:#b4ab82}body.is-paused .live-status{color:#a89d78}
@media(min-width:1500px){.island-window{height:600px}.site-header{height:120px}.intro{padding-top:42px;padding-bottom:37px}}
@media(max-width:1100px){.site-header{padding:0 32px}main{padding:0 32px}.dashboard{gap:20px}.land-added{display:none}.resources{gap:15px}.time-controls{padding-left:18px}.time-caption{display:none}footer{padding-left:32px;padding-right:32px}.population-card{width:157px;padding:17px}.history-preview{gap:22px}.history-item p{font-size:10px}.header-actions{gap:10px}.live-status{margin-right:7px}}
@media(max-width:760px){.site-header{height:85px;padding:0 22px;gap:20px}.brand{font-size:15px;gap:9px}.brand-icon{width:40px;height:40px}.brand-icon svg{width:32px}.header-tagline{font-size:10px;padding-left:18px;line-height:1.7}.header-actions{gap:7px}.live-status{display:none}.icon-button{width:25px}.icon-button svg{width:18px}main{padding:0 22px}.intro{padding-top:28px;padding-bottom:26px}.intro .eyebrow{font-size:7px;letter-spacing:1.25px}h1{font-size:32px;letter-spacing:-1.1px}.intro p{font-size:10px}.year-stamp{min-width:100px;padding-left:19px}.year-stamp>span{font-size:6px;letter-spacing:.9px}.year-stamp>strong{font-size:23px;gap:5px}.year-stamp svg{width:18px;margin-left:2px}.island-window{height:520px;min-height:0}.population-card{top:62px;left:18px;width:140px;padding:14px}.population-count{font-size:34px}.population-count svg{width:26px}.population-card p{font-size:8px;margin-bottom:12px}.mini-stat{font-size:8px}.island-heading{top:21px;left:19px;font-size:9px}.weather{top:18px;right:18px;font-size:8px;gap:5px}.weather svg{width:17px}.map-coordinate{font-size:6px;left:18px;letter-spacing:.8px;bottom:18px}.map-controls{bottom:15px;right:15px}.instruction{font-size:18px;bottom:52px}.instruction small{font-size:8px}.instruction>span{font-size:16px}.dashboard{flex-wrap:wrap;padding:21px 1px 17px;gap:18px}.terrain-summary{gap:10px}.terrain-summary .eyebrow{font-size:7px;letter-spacing:.8px}.terrain-summary strong{font-size:16px}.resources{gap:16px}.resources>div{font-size:11px}.resources svg{width:17px}.time-controls{margin-left:0;padding-left:0;border-left:0;justify-content:center;width:100%;padding-top:14px;border-top:1px solid var(--line);gap:16px}.time-caption{display:block;max-width:180px;font-size:6px;letter-spacing:.8px}.speed-buttons button{height:27px;min-width:37px}.history-section{padding-top:23px}.history-heading h2{font-size:20px}.history-heading>button{font-size:9px;gap:8px}.history-preview{gap:15px;grid-template-columns:repeat(2,1fr)}.history-item:nth-child(3){display:none}.history-item:nth-child(2):after{display:none}.history-marker{width:24px;height:24px;font-size:12px}.history-item{gap:9px}.history-item p{font-size:10px;line-height:1.65}.history-item:not(:last-child):after{right:-8px}.history-item time{font-size:7px}footer{margin-top:20px;padding:16px 22px;font-size:8px}.project-overlay{bottom:91px;left:17px;width:171px;padding:12px}dialog{padding:33px 27px}}
@media(max-width:480px){.header-tagline{display:none}.header-actions{gap:9px}.site-header{height:79px}.intro{gap:9px}h1{font-size:27px;margin:10px 0}.intro p{font-size:9px;max-width:220px;line-height:1.7}.year-stamp{min-width:85px;padding-left:14px}.year-stamp>strong{font-size:21px}.year-stamp svg{width:15px}.intro .eyebrow{font-size:6px;letter-spacing:1px}.little-star{font-size:13px}.island-window{height:490px}.weather span{display:none}.population-card{width:126px;padding:13px}.population-card p{font-size:7px}.population-count{font-size:31px}.population-card .eyebrow{font-size:7px}.mini-stat{font-size:7px}.card-rule{margin-bottom:10px}.population-count svg{width:23px}.population-card{background:#fafaf0de}.map-coordinate{max-width:130px;line-height:1.8;bottom:15px;font-size:5px}.instruction{font-size:17px;bottom:57px}.resources{gap:10px}.resources svg{width:15px}.resources>div{gap:3px;font-size:10px}.terrain-summary strong small{font-size:9px}.stat-icon{width:32px;height:32px}.terrain-summary .eyebrow{font-size:6px}.terrain-summary{gap:8px}.dashboard{column-gap:9px}.history-heading{align-items:flex-start;gap:15px}.history-heading h2{font-size:20px;max-width:220px;line-height:1.3}.history-heading>button{white-space:nowrap;font-size:8px;padding-top:4px}.history-preview{grid-template-columns:1fr;gap:18px}.history-item:nth-child(2){display:flex}.history-item:after{display:none}.history-item p{max-width:none;font-size:10px}.history-item time{margin-bottom:4px}.history-section{padding-bottom:3px}footer{font-size:7px}.setting-row{align-items:flex-start}.setting-row select{max-width:140px;font-size:9px}.setting-row small{font-size:9px}.setting-row strong{font-size:11px}.toast{font-size:10px;top:48px;width:80%;max-width:80%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
.interference-tools{display:flex;align-items:center;gap:22px;padding:16px 2px;border-bottom:1px solid var(--line)}.tools-caption{display:flex;flex-direction:column;gap:5px;flex-shrink:0}.tools-caption .eyebrow{font-size:7px;letter-spacing:1.2px}.tools-caption small{font-size:9px;color:#939b84}.interference-buttons{display:flex;gap:5px}.interference-buttons button{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 11px;font-size:10px;border:1px solid transparent;border-radius:4px;color:#7b8a6b;white-space:nowrap}.interference-buttons button span{font-size:14px;line-height:1}.interference-buttons button.active{background:#e4ebd4;border-color:#d1ddbc;color:#50683f}.interference-buttons button:hover{background:#edf0e2}.interference-buttons button[data-interference=rumble].active{background:#eee2cf;border-color:#e0cdb2;color:#9b7954}#interaction-hint{font-size:10px;color:#8b967c;margin:0;line-height:1.6;max-width:220px}.pace-readout{margin-left:auto;display:flex;align-items:center;gap:7px;color:#81916d;font-size:8px;white-space:nowrap}.pace-readout i{height:5px;width:5px;border-radius:50%;background:#9cab7b}.civic-overview{position:absolute;right:25px;top:62px;display:flex;flex-direction:column;text-align:right;max-width:220px;gap:7px;pointer-events:none}.civic-overview>span:first-child{color:#6d8163;font-size:9px}.civic-overview>span:last-child{font-size:8px;line-height:1.7;color:#8b9e85}.population-card p{line-height:1.65;min-height:25px}.tile-inspector{position:absolute;left:50%;top:61px;transform:translateX(-50%);background:#f8f8ebed;border:1px solid #d7dfc9;border-radius:4px;padding:9px 12px;font-size:10px;color:#758567;line-height:1.6;max-width:340px;text-align:center;pointer-events:none;box-shadow:0 3px 18px #4b62510a}.intervention-result{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);width:360px;max-width:45%;text-align:center;padding:15px 19px;background:#f9f8eafa;border:1px solid #c9d8b1;border-radius:6px;box-shadow:0 5px 24px #6078470e;pointer-events:none}.intervention-result .eyebrow{font-size:7px;letter-spacing:1.6px;color:#91a176}.intervention-result strong{display:block;font-size:14px;font-weight:500;color:#5b7447;margin-top:7px}.intervention-result p{font-size:10px;line-height:1.7;color:#8b9579;margin:7px 0 0}.intervention-result[data-type=rumble]{border-color:#d8bea0;background:#f7efe1fa}.intervention-result[data-type=rumble] strong{color:#9e7853}.island-window:has(.intervention-result:not([hidden])) .instruction{visibility:hidden}.island-window:has(.intervention-result:not([hidden])) .project-overlay{opacity:.25}.toast{top:112px}canvas[data-mode=rumble]{cursor:crosshair}canvas[data-mode=rain]{cursor:crosshair}
@media(max-width:1100px){.interference-tools{gap:15px}.tools-caption{display:none}.pace-readout{font-size:7px}#interaction-hint{max-width:185px;font-size:9px}.interference-buttons button{padding:8px 10px}.time-controls{gap:9px}.population-card p{font-size:8px}.civic-overview{max-width:185px}.tile-inspector{max-width:280px;font-size:9px}}
@media(max-width:760px){.interference-tools{flex-wrap:wrap;column-gap:14px;row-gap:11px;padding:13px 0}.interference-buttons{gap:3px}.interference-buttons button{font-size:9px;padding:8px 9px;min-height:33px}.pace-readout{font-size:7px;order:2}#interaction-hint{max-width:none;order:3;width:100%;font-size:9px}.civic-overview{top:59px;right:18px;max-width:145px;gap:5px}.civic-overview>span:first-child{font-size:8px;line-height:1.7}.civic-overview>span:last-child{font-size:7px}.tile-inspector{top:auto;bottom:14px;left:18px;transform:none;font-size:8px;max-width:calc(100% - 133px);padding:7px 9px;text-align:left}.intervention-result{max-width:85%;width:315px;bottom:58px;padding:13px 15px}.intervention-result strong{font-size:12px}.intervention-result p{font-size:9px}.intervention-result .eyebrow{font-size:6px}.population-card p{font-size:8px;min-height:28px}.toast{top:230px;font-size:9px}.island-window:has(.tile-inspector:not([hidden])) .map-coordinate{visibility:hidden}}
@media(max-width:480px){.interference-tools{gap:9px}.interference-buttons button{padding:8px 9px;font-size:9px}.pace-readout{width:100%;margin:0;order:3;font-size:7px}#interaction-hint{order:2;font-size:8px}.civic-overview{max-width:122px;right:14px}.civic-overview>span:first-child{font-size:7px}.civic-overview>span:last-child{font-size:6px}.population-card p{font-size:7px}.intervention-result{bottom:60px}.tile-inspector{font-size:7px}}
.intro-actions{display:flex;align-items:center;gap:25px;flex-shrink:0}.reset-actions{display:flex;align-items:center;flex-direction:column;gap:7px}.new-island-button{display:flex;align-items:center;gap:8px;border:1px solid #d4dec2;background:#e9eeda;border-radius:5px;padding:11px 13px;font-size:10px;white-space:nowrap}.new-island-button:hover{background:#dce7c5}.new-island-button>span{font-size:19px;line-height:1;color:#819466}#undo-reset{font-size:8px;color:#869674;text-decoration:underline;text-underline-offset:3px;padding:0}#chapter-status{font-size:8px;line-height:1.6;letter-spacing:.3px;color:#93a17d}#chapter-status.final-age{color:#9c8b55;font-weight:600}
@media(max-width:760px){.intro-actions{flex-direction:column-reverse;align-items:flex-end;gap:11px}.intro-actions .year-stamp{align-self:stretch}.new-island-button{font-size:8px;padding:8px 9px;gap:5px}.new-island-button>span{font-size:15px}.reset-actions{align-items:flex-end}.intro{gap:12px}#chapter-status{font-size:7px}}
@media(max-width:480px){.intro-actions{min-width:88px}.intro .year-stamp{padding-left:10px}.new-island-button{font-size:7px;padding:7px 8px}#chapter-status{font-size:6px}}

.story-moment{display:flex;align-items:center;gap:24px;padding:20px 22px;margin-top:14px;background:#eeeedb;border:1px solid #d8d9ba;border-radius:6px}.story-moment>div:first-child{flex:1}.story-moment strong{display:block;font-family:var(--serif);font-size:22px;font-weight:400;margin-top:6px;color:#596d46}.story-moment p{font-size:12px;line-height:1.7;color:#7c886e;margin:7px 0 0}.moment-actions{display:flex;flex-direction:column;gap:9px;min-width:100px}.moment-actions button{padding:10px;background:#e0e7cb;border:1px solid #cdd7b7;border-radius:4px;font-size:10px;min-height:36px}.island-story{padding:17px 0;border-bottom:1px solid var(--line)}.story-health{display:flex;flex-wrap:wrap;gap:9px 23px;font-size:10px;line-height:1.6;color:#7b8c6c}.story-health span:first-child{color:#6f9695}.story-health span:last-child{color:#979d80}.explore-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.explore-controls button,.explore-controls label,.explore-controls select{background:#edf0e1;border:1px solid #dce2cc;color:#778967;border-radius:4px;padding:9px 11px;font-size:10px;min-height:36px}.explore-controls label{display:flex;align-items:center;gap:6px}.explore-controls input{accent-color:#86966b}.explore-controls select{max-width:230px}#history-legend{font-size:10px;color:#8d8d73;line-height:1.7}.ending-dialog{max-width:690px}.ending-maps{display:flex;gap:18px;margin:22px 0}.ending-maps figure{margin:0;flex:1}.ending-maps svg{display:block;width:100%;max-height:175px;border-radius:5px}.ending-maps figcaption{font-size:10px;color:#8d987f;margin-top:8px}#ending-causes,#ending-stats{font-size:11px;line-height:1.8;color:#7b886e}#ending-chronicle{text-align:left}#ending-chronicle .history-item{margin:12px 0}#ending-chronicle .history-item:after{display:none}.ending-dialog .secondary-button{margin:0 10px}.island-window .civic-overview{max-width:190px;font-size:9px;line-height:1.5}.island-window .civic-overview span:nth-child(3),.island-window .civic-overview span:nth-child(4){display:none}
@media(max-width:760px){.story-moment{padding:15px;gap:12px}.story-moment strong{font-size:19px}.story-moment p{font-size:11px}.story-health{font-size:9px;gap:7px 15px}.explore-controls button,.explore-controls label,.explore-controls select{font-size:9px;min-height:40px}.moment-actions{min-width:78px}.moment-actions button{font-size:9px;min-height:40px}.ending-maps{gap:10px}.ending-maps svg{max-height:145px}}
@media(max-width:480px){.story-moment{align-items:stretch;flex-direction:column}.moment-actions{flex-direction:row}.moment-actions button{flex:1}.explore-controls{gap:5px}.explore-controls button,.explore-controls label{padding:8px;font-size:8px}.story-health span{flex:1 1 45%}.island-window .civic-overview{max-width:112px;font-size:7px}.ending-dialog{padding:28px 20px}}

[hidden]{display:none!important}

/* Put the actual interaction in sight before the player reaches the island. */
.interference-tools{position:sticky;top:0;z-index:8;background:#f7f8eeed;border-top:1px solid var(--line);padding:12px 8px;backdrop-filter:blur(8px);margin-bottom:12px}.interference-buttons button{min-height:40px}.interference-buttons button[data-interference=fire].active{background:#efdec0;border-color:#d5b48d;color:#9e693e}.interference-buttons button[data-interference=help]{color:#929b84}#start-size{font-size:9px;line-height:1.5;color:#8c977c;max-width:210px;text-align:center}#find-beach{width:auto;padding:0 10px;font-size:10px}.cinema-caption{position:absolute;bottom:24px;left:5%;width:90%;text-align:center;pointer-events:none;color:#536648}.cinema-caption strong{font-family:var(--serif);font-size:28px;display:block;line-height:1.2;margin:10px 0;text-shadow:0 2px 16px #f9f8e7}.cinema-caption p{font-size:12px;margin:10px 0;color:#7d8567}.cinema-caption button{pointer-events:auto;font-size:10px;padding:9px 13px;background:#f7f1dce6;border:1px solid #d8ceb0;border-radius:4px;margin:3px}.cinema-playing .population-card,.cinema-playing .civic-overview,.cinema-playing .weather,.cinema-playing .tree-label,.cinema-playing .instruction,.cinema-playing .project-overlay,.cinema-playing .map-coordinate,.cinema-playing .island-heading,.cinema-playing .tile-inspector{visibility:hidden}.cinema-playing .map-controls{opacity:.2}.site-header{height:88px}.intro{padding-top:20px;padding-bottom:20px}.intro h1{font-size:34px}
@media(max-width:760px){.interference-tools{position:sticky;padding:8px 0;gap:7px;margin-bottom:9px}.interference-buttons{width:100%;justify-content:space-between;gap:3px}.interference-buttons button{min-height:40px;padding:8px 9px;font-size:10px}.pace-readout{display:none}.interference-tools #interaction-hint{font-size:10px;line-height:1.5}#start-size{font-size:7px;max-width:110px}.intro h1{font-size:27px}.site-header{height:76px}.cinema-caption strong{font-size:22px}.cinema-caption p{font-size:10px}.cinema-caption{bottom:23px}.cinema-caption button{font-size:9px}#find-beach{font-size:9px;padding:0 8px}.cinema-playing .map-controls{display:none}}
@media(max-width:480px){.interference-buttons button{font-size:9px;padding:8px 7px}.intro{padding-top:16px;padding-bottom:15px}.intro h1{font-size:24px}.cinema-caption strong{font-size:21px}#interaction-hint{min-height:30px}.cinema-caption p{font-size:9px}}

/* Controls stay with the island, including on a phone. */
.island-toolbar{position:absolute;z-index:5;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:7px 12px;border:1px solid #ccd8bf;border-radius:9px;background:#faf8e9f5;box-shadow:0 4px 22px #52653f12;max-width:calc(100% - 26px)}
.island-toolbar .time-controls{margin:0;padding:0;border:0;width:auto;flex-wrap:nowrap;gap:8px}.island-toolbar .time-caption{display:none}.island-toolbar>button{font-size:10px;white-space:nowrap;padding:8px;border-left:1px solid #d8dfca}
.island-window>.story-moment{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);z-index:4;width:460px;max-width:calc(100% - 32px);padding:10px 13px;margin:0;gap:12px;background:#f8f5e7f5;box-shadow:0 5px 22px #52653f0d}.island-window>.story-moment strong{font-size:17px;margin-top:3px}.island-window>.story-moment p{font-size:10px;line-height:1.45;margin:4px 0 0;max-height:58px;overflow:auto}.island-window .moment-actions{min-width:72px;gap:5px}.island-window .moment-actions button{font-size:9px;min-height:29px;padding:6px}.island-window .story-moment .eyebrow{font-size:7px}
.map-controls{bottom:75px}.instruction{bottom:76px}.map-coordinate{bottom:78px}.intervention-result{bottom:142px}.project-overlay{bottom:126px}.cinema-playing .island-toolbar,.cinema-playing .story-moment{visibility:hidden}
.tile-inspector{white-space:pre-line;text-align:left;right:16px;left:auto;transform:none;top:65px;width:280px;max-width:calc(100% - 32px);max-height:calc(100% - 205px);overflow:auto;pointer-events:auto;background:#faf8ecf5;font-size:10px;line-height:1.8;padding:14px 20px 14px 14px;z-index:6}.tile-inspector:not([hidden])~.civic-overview{visibility:hidden}#inspector-close{position:absolute;right:22px;top:69px;z-index:7;font-size:16px;background:#f7f5e8;border-radius:3px}.island-window:not(:has(.tile-inspector:not([hidden]))) #inspector-close{display:none}
.intro-dialog{width:min(500px,calc(100% - 32px));text-align:center;padding:34px;max-height:90vh}.intro-dialog h2{font-size:34px;line-height:1.2}.intro-dialog p{min-height:70px;line-height:1.8}.intro-island{font-size:77px;color:#819a64;background:#e4ead2;width:120px;height:100px;margin:24px auto;border-radius:50% 50% 45% 45%;box-shadow:0 11px 0 #c5ba94}.intro-dialog #intro-step{display:block;font-size:10px;color:#8b977b;margin-top:25px}.intro-buttons{display:flex;justify-content:center;align-items:center;gap:14px}.intro-buttons .primary-button{margin:10px 0}
.cinema-dialog{width:min(860px,calc(100% - 24px));max-width:860px;text-align:center;padding:26px;max-height:95vh}.cinema-dialog::backdrop{background:#354e41aa;backdrop-filter:blur(6px)}#finale-canvas{display:block;width:100%;height:clamp(210px,40vh,370px);border-radius:9px;margin:18px 0;background:#dfece0}.cinema-dialog .cinema-caption{position:static;width:100%;pointer-events:auto;transform:none;color:#536648}.cinema-dialog .cinema-caption strong{font-size:27px}.cinema-dialog progress{display:block;width:100%;height:5px;margin:18px 0 10px;accent-color:#87986b}.cinema-dialog>.eyebrow{font-size:9px}.cinema-dialog .dialog-note{margin-bottom:0}
.island-scores{padding:20px;background:#eef0df;border:1px solid #d8dec5;border-radius:8px;margin:20px 0}.island-scores>#ending-score{display:block;font-family:var(--serif);font-size:38px;font-weight:400;margin:8px}.score-row{display:grid;grid-template-columns:115px 1fr 30px;align-items:center;gap:12px;text-align:left;margin:11px 0;font-size:11px;text-transform:capitalize}.score-row progress{width:100%;height:7px;accent-color:#8d9f6c}.score-row strong{text-align:right;font-weight:500}.island-scores>p{font-size:10px;line-height:1.7;color:#839071;margin-bottom:0}
@media(max-width:600px){.island-toolbar{gap:5px;padding:5px 7px;bottom:10px}.island-toolbar .time-controls{gap:4px;padding:0}.island-toolbar .speed-buttons button{min-width:30px;height:29px}.island-toolbar>button{font-size:9px;padding:7px}.island-window>.story-moment{bottom:66px;flex-direction:row;align-items:center;padding:9px 10px;gap:7px}.island-window .moment-actions{flex-direction:column;min-width:63px}.island-window .story-moment strong{font-size:15px}.island-window .story-moment p{font-size:9px;max-height:42px}.map-controls{bottom:183px;right:12px}.instruction{bottom:83px}.tile-inspector{top:58px;bottom:auto;right:12px;font-size:9px;width:260px;max-height:250px;max-width:calc(100% - 24px)}#inspector-close{top:62px;right:16px}.intervention-result{bottom:185px;max-width:90%}.project-overlay{bottom:190px;left:12px;width:158px;padding:10px}.cinema-dialog{padding:18px 14px}.cinema-dialog .cinema-caption strong{font-size:21px}#finale-canvas{height:235px}.intro-dialog{padding:26px 22px}.intro-dialog h2{font-size:29px}.score-row{grid-template-columns:95px 1fr 25px;gap:7px;font-size:10px}}

/* Notifications are optional and every visible card can be dismissed. */
.card-close{position:absolute;top:4px;right:5px;z-index:2;display:grid;place-items:center;min-width:30px;min-height:30px;font-size:20px;color:#647653;pointer-events:auto;border-radius:4px}.card-close:hover{background:#e6ebd8}.island-window>.story-moment{padding-right:37px}.intervention-result{pointer-events:auto;padding-right:34px;max-width:min(360px,90%)}.intervention-result p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.toast{padding:10px 35px 10px 13px;max-width:min(400px,85%);font-size:10px;line-height:1.5}.toast button{pointer-events:auto;position:absolute;top:2px;right:2px;min-width:30px;min-height:30px;font-size:19px;display:grid;place-items:center}.dialog-close{position:sticky;top:0;float:right;right:auto;z-index:10;display:grid;place-items:center;min-width:36px;min-height:36px;background:#f7f7eff5;border:1px solid #d4dcc7;border-radius:50%;margin:-12px -10px 0 8px;line-height:1;font-size:26px}.intro-dialog .dialog-close,.cinema-dialog .dialog-close{margin:-10px -6px 0 8px}

.family-current{padding:15px 18px;background:#e7ecd7;border:1px solid #ccd7b8;border-radius:7px;line-height:1.7}.family-current strong{display:block;font-family:var(--serif);font-size:23px;font-weight:400}.family-current p{margin:6px 0 0;font-size:12px}.family-navigation{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.family-navigation button{font-size:10px;background:#edf0e2;border:1px solid #d8dfc9;border-radius:4px;padding:9px}.family-generations{list-style:none;padding:0 0 0 18px;margin:12px 0;max-height:340px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.family-generations li{position:relative;margin:0;padding:0 10px 22px 23px;border-left:2px solid #d6dec7;line-height:1.7}.family-generations li:before{content:'';position:absolute;left:-6px;top:6px;background:#91a574;border:2px solid #f7f7ef;border-radius:50%;width:8px;height:8px}.family-generations li:last-child{border-color:transparent;padding-bottom:0}.family-generations strong{display:block;font-size:14px;color:#526b43}.family-generations time{display:block;font-size:9px;color:#899577}.family-generations p{font-size:11px;margin:4px 0;color:#78866c}.family-generations li[aria-current=true]{background:#edf0e2;border-radius:0 5px 5px 0}.family-history-item{background:#edf0df;border-radius:4px;padding:8px}.family-history-item .history-marker{background:#dfe8cb}

.wish-bubble{position:absolute;left:18px;bottom:66px;width:224px;max-width:calc(100% - 36px);z-index:3;background:#faf9eef5;border:1px solid #c4d3b3;border-radius:12px 12px 12px 2px;box-shadow:0 3px 14px #3d55300d;padding:10px 32px 10px 12px}.wish-bubble #wish-open{display:block;text-align:left;width:100%;line-height:1.5}.wish-bubble small{display:block;font-size:8px;color:#60734e;margin-bottom:4px}.wish-bubble span{font-size:10px;color:#526547}.wish-bubble .card-close{top:1px;right:1px}.wish-history{padding-left:18px;max-height:220px;overflow:auto;font-size:11px;line-height:1.7}.wish-history p{margin:4px 0 15px;color:#728167}.island-window:has(.wish-bubble:not([hidden])) .project-overlay,.island-window:has(.wish-bubble:not([hidden])) .map-coordinate{visibility:hidden}.island-window:has(.story-moment:not([hidden])) .wish-bubble,.island-window:has(.tile-inspector:not([hidden])) .wish-bubble{visibility:hidden}

.challenge-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px}.challenge-list li{padding:17px;background:#edf0e1;border:1px solid #d7dfc6;border-radius:7px;line-height:1.7}.challenge-list strong{font-family:var(--serif);font-size:22px;font-weight:400}.challenge-list p{font-size:12px;margin:6px 0 12px;color:#687a59}.challenge-list span{display:block;font-size:10px;font-weight:600;color:#596f46}.challenge-list small{display:block;font-size:10px;margin-top:6px;color:#7d896e}.challenge-list li[data-status=completed]{background:#e1ebd0;border-color:#b9cba3}.challenge-list li[data-status=missed],.challenge-list li[data-status=unavailable]{background:#f0eee4;border-color:#dfdacb}

canvas[data-mode=help]{cursor:help}.wish-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

.collection-page h3{font-size:12px;font-weight:500;letter-spacing:.5px;margin:27px 0 12px}.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}.collection-grid li{padding:16px;border:1px solid #d5dec5;background:#eaf0db;border-radius:7px;line-height:1.7;overflow-wrap:anywhere}.collection-stamp{display:grid;place-items:center;width:42px;height:42px;margin-bottom:9px;border-radius:50%;background:#d5e2be;color:#748a54}.collection-stamp svg{width:28px;height:28px;fill:currentColor;stroke:none}.collection-grid strong{display:block;font-family:var(--serif);font-size:20px;font-weight:400}.collection-grid p{font-size:11px;color:#677756;margin:7px 0 10px}.collection-grid small{font-size:9px;color:#748464}.collection-grid li[data-found=false]{background:#f0efe6;border-color:#e0ddcf}.collection-grid li[data-found=false] .collection-stamp{color:#a4aa98;background:#e2e3d7}.collection-grid li[data-found=false] strong{font-family:var(--font);font-size:12px;color:#78826d}.collection-grid li[data-found=false] p{color:#8a907f;font-style:italic}@media(max-width:500px){.collection-grid{grid-template-columns:1fr}.book-dialog{padding:0 20px 25px}}

.away-summary{position:relative;display:flex;align-items:center;gap:18px;background:#e8edda;border:1px solid #ccd8bb;border-radius:7px;padding:16px 42px 16px 18px;margin-bottom:18px;line-height:1.7}.away-summary strong{display:block;font-family:var(--serif);font-size:22px;font-weight:400}.away-summary small{display:block;font-size:9px;color:#81916e}.away-summary p{font-size:11px;color:#657b54;margin:5px 0 0}.away-summary #away-show{flex-shrink:0;background:#d9e4c3;border:1px solid #bdcda4;border-radius:5px;padding:10px 12px;font-size:11px;margin-left:auto}@media(max-width:500px){.away-summary{align-items:flex-start;flex-direction:column;gap:8px}.away-summary #away-show{margin-left:0}}

.chronicle-legend{display:flex;gap:18px;font-size:10px;color:#6b7b57;margin:16px 0}.journal-chapters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.journal-chapters button{font-size:9px;line-height:1.5;padding:7px 9px;background:#e9eddb;border:1px solid #d1dbbe;border-radius:4px}.journal-chapters button[aria-current=true]{background:#dce7c8;border-color:#b6ca9d}.chronicle-chapter{margin:24px 0 32px;scroll-margin-top:24px}.chronicle-chapter>header{display:flex;align-items:center;gap:15px;border-bottom:1px solid #ccd6ba;padding-bottom:14px;margin-bottom:5px}.chapter-illustration{flex-shrink:0;width:90px;height:64px;border-radius:8px;background:#e8edda;display:grid;place-items:center}.chapter-illustration svg{width:84px;height:54px;fill:none;stroke:#7e8f66;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.chronicle-chapter h3{font-family:var(--serif);font-size:26px;line-height:1.2;font-weight:400;margin:6px 0}.chronicle-chapter header small{font-size:9px;color:#8a967c}.chronicle-show{font-size:10px;padding:7px 10px;margin-top:10px;border:1px solid #ced9bc;background:#ebefdf;border-radius:4px;color:#60754e}.chronicle-chapter .history-item>div{min-width:0;flex:1}.chronicle-chapter .history-item{padding:15px 8px}.chronicle-chapter .family-history-item{background:#edf0df;margin:5px 0}.interference-history-item{background:#f2e9d7;border-radius:4px;margin:5px 0}.interference-history-item .history-marker{background:#e9dbb7;border-color:#ded0ab;color:#927d51}.chapter-empty{font-size:11px;color:#8a967c;line-height:1.8;padding:12px 8px}@media(max-width:500px){.book-dialog{padding:0 20px 25px}.chapter-illustration{width:68px;height:54px}.chapter-illustration svg{width:64px;height:44px}.chronicle-chapter h3{font-size:23px}}

/* The island book: one place for the chronicle, the family, wishes, challenges and the collection. */
.book-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;margin:0 -6px 24px;padding:16px 6px 12px;background:var(--paper);border-bottom:1px solid var(--line)}
.book-tabs{display:flex;flex:1;gap:4px;flex-wrap:wrap;justify-content:center}
.book-tabs button{position:relative;font-size:11px;line-height:1.3;padding:8px 13px;border:1px solid transparent;border-radius:20px;background:none;color:#6f7f61;cursor:pointer}
.book-tabs button:hover{background:#eef1e3}
.book-tabs button[aria-selected=true]{background:#e2ead0;border-color:#cdd8b4;color:#3f5536}
.book-tabs button[data-pending=true]:after{content:'';position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:#c98f5a}
.book-close{position:static;flex:none}
.book-page[hidden]{display:none}
.family-moments{list-style:none;margin:6px 0 2px;padding:0}
.family-moments li{font-size:11px;line-height:1.55;color:#5f6f52;margin:3px 0;padding-left:14px;position:relative}
.family-moments li:before{content:'·';position:absolute;left:3px;color:#a6b38c}
.family-current .family-moments li{font-size:12px}
@media (max-width:600px){.book-bar{margin:0 -8px 18px;padding:12px 4px 10px}.book-tabs button{font-size:10px;padding:7px 9px}}
.family-lore{font-size:11px;font-style:italic;color:#6f7f61;margin-top:8px}
.island-heading,.weather,.map-coordinate,.civic-overview span{transition:color 1.2s ease}
.island-window.is-night .island-heading,.island-window.is-night .weather,.island-window.is-night .civic-overview span{color:#e9ecdf}
.island-window.is-night .map-coordinate{color:#c3cdbf}
.island-window.is-night .weather svg{stroke:#e9ecdf}
.island-window.is-night #chapter-status{color:#cdd6c2}
.island-window.is-night .instruction,.island-window.is-night .instruction small{color:#dfe5d6}

/* 2.8 The closing tour over the real island. */
.tour-caption{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);width:min(540px,calc(100% - 32px));z-index:6;background:#fbf8eef2;border:1px solid #dfe3d2;border-radius:10px;padding:16px 20px 12px;text-align:center;box-shadow:0 10px 40px #213e3022}
.tour-caption p{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink);margin:6px 0 10px}
.tour-actions{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#7b866e}
.tour-actions button{font-size:11px;padding:7px 12px;border-radius:16px;background:#e2ead0;border:1px solid #cdd8b4;color:#3f5536;cursor:pointer}
.island-window.touring:before,.island-window.touring:after{content:'';position:absolute;left:0;right:0;height:7%;background:#22372c;z-index:5;pointer-events:none}
.island-window.touring:before{top:0}.island-window.touring:after{top:auto;bottom:0;inset:auto 0 0 0;border-radius:0 0 9px 9px;box-shadow:none}
.island-window.touring .population-card,.island-window.touring .civic-overview,.island-window.touring .island-heading,.island-window.touring .weather,.island-window.touring .map-controls,.island-window.touring .instruction,.island-window.touring .island-toolbar,.island-window.touring .wish-bubble,.island-window.touring .project-overlay{opacity:0;pointer-events:none;transition:opacity .6s}
@media (max-width:600px){.tour-caption{bottom:60px;padding:12px 14px 10px}.tour-caption p{font-size:13px}}

/* 3.4 Age transitions */
.age-card{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;text-align:center;pointer-events:none;background:#fbf8eee8;border:1px solid #dfe3d2;border-radius:10px;padding:16px 28px;box-shadow:0 10px 40px #213e3022;animation:age-in 4.8s ease forwards}
.age-card strong{display:block;font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);margin:4px 0}
.age-card p{font-size:12px;color:#6f7f61;margin:0}
@keyframes age-in{0%{opacity:0;transform:translate(-50%,8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.island-window canvas{transition:filter 1.6s ease}
.island-window.age-shift canvas{filter:sepia(.35) saturate(1.15) brightness(1.04)}
@media (prefers-reduced-motion:reduce){.age-card{animation:none}.island-window canvas{transition:none}}

.island-flag{vertical-align:-2px;border-radius:2px;box-shadow:0 0 0 .5px #0002}

/* 3.6 Photo mode */
.photo-bar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:7;display:flex;gap:6px;background:#fbf8eef0;border:1px solid #dfe3d2;border-radius:24px;padding:6px;box-shadow:0 8px 30px #213e3022}
.photo-bar button{font-size:11px;padding:8px 13px;border-radius:18px;border:1px solid transparent;background:none;color:#4d6142;cursor:pointer}
.photo-bar .primary-photo{background:#dce7c4;border-color:#cbd8ad}
.island-window.photo-mode .population-card,.island-window.photo-mode .civic-overview,.island-window.photo-mode .island-heading,.island-window.photo-mode .weather,.island-window.photo-mode .map-controls,.island-window.photo-mode .instruction,.island-window.photo-mode .island-toolbar,.island-window.photo-mode .wish-bubble,.island-window.photo-mode .project-overlay,.island-window.photo-mode .map-coordinate,.island-window.photo-mode .tile-inspector,.island-window.photo-mode .toast,.island-window.photo-mode .away-summary{opacity:0;pointer-events:none;transition:opacity .4s}

/* 3.8 Numbers with feeling */
.resources{cursor:pointer}
.resources.feeling span{font-size:11px;line-height:1.3}
.resources.feeling small{display:none}

/* 3.9 Full-screen island on phones: a compact residents chip, thumb-friendly tools and pinch to zoom. */
@media (max-width:600px){
 .island-window{height:calc(100svh - 150px);min-height:420px;margin-left:-8px;margin-right:-8px;border-radius:0;border-left:0;border-right:0}
 .population-card{top:52px;left:10px;width:auto;padding:8px 12px;pointer-events:auto;cursor:pointer}
 .population-card:not(.expanded) .population-card-detail,.population-card:not(.expanded) #population-note,.population-card:not(.expanded) .card-rule,.population-card:not(.expanded) .mini-stat{display:none}
 .population-card:not(.expanded) .population-count{font-size:22px}
 .civic-overview{display:none}
 .interference-tools{position:sticky;bottom:0;z-index:30;background:var(--paper);margin:0 -16px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex-wrap:wrap;gap:6px}
 .interference-tools .tools-caption,.interference-tools #interaction-hint,.interference-tools .pace-readout{display:none}
 .interference-buttons{display:flex;width:100%;justify-content:space-between}
 .interference-buttons button{min-height:46px;min-width:54px;flex:1;font-size:12px}
}

/* 3.10 Contrast: muted text reaches at least 4.5:1 on the paper background. */
:root{--muted:#5f6a5e}
.eyebrow{color:#5f6b52}
.dialog-note,.save-status,#chapter-status,.time-caption,.pace-readout,.history-item time,.family-generations time,.collection-grid small{color:#5f6a5e}
.island-window canvas:focus-visible{outline:3px solid #8aa36c;outline-offset:-3px}

.score-row .score-note{grid-column:1/-1;margin-top:-6px;font-size:10px;color:#5f6a5e;text-transform:none;line-height:1.4}

.commission-box{background:#f1efe0;border:1px solid #d9d2b8;border-radius:8px;padding:12px 14px;margin:12px 0;text-align:left}
.commission-box h3{margin:0 0 4px;font-size:13px}
.commission-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.commission-choices button{font-size:11px;padding:7px 11px;border-radius:16px;border:1px solid #cdd8b4;background:#e2ead0;color:#3f5536;cursor:pointer}

/* Status lines on the island get a soft backing so they stay readable over busy streets. */
.civic-overview span,.island-heading,.weather{background:rgba(250,248,238,.78);padding:2px 7px;border-radius:10px;width:fit-content;margin-left:auto}
.island-heading{margin-left:0}
.island-window.is-night .civic-overview span,.island-window.is-night .island-heading,.island-window.is-night .weather{background:rgba(30,42,60,.55)}

.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:18px}.album-grid figure{margin:0;padding:8px 8px 12px;background:#fbfaf4;border:1px solid #dcd8c6;border-radius:4px;box-shadow:0 2px 6px #4a4a3016;transform:rotate(var(--tilt,0deg))}.album-grid img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;background:#dfe9e2}.album-grid figcaption{font-size:11px;line-height:1.5;margin-top:8px;color:#5d6b50}.album-grid figcaption strong{display:block;font-family:var(--serif);font-weight:400;font-size:15px;color:#3f4a36}
.keur-head{display:flex;gap:18px;align-items:center;margin:10px 0 16px}.keur-head h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0}.keur-head p{margin:4px 0 0;font-size:12px;color:#5f6a5e}.keur-medal{flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--medal,#e2b84a);box-shadow:inset 0 0 0 5px #ffffff55,0 3px 10px #4a4a3022;color:#293d32}.keur-medal strong{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1}.keur-medal small{font-size:9px;letter-spacing:.08em;text-transform:uppercase}.island-scores .keur-medal>#ending-score{margin:0;font-size:34px}.keur-count{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 8px;color:#596f46}.keur-list{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px;font-size:12px}.keur-list li{color:#9aa38e}.keur-list li::before{content:'○ ';}.keur-list li[data-done=true]{color:#3f4a36}.keur-list li[data-done=true]::before{content:'✓ ';color:#5d8a4c;font-weight:700}

/* A calmer island: bigger, with the details tucked away until you ask for them. */
@media(min-width:700px){.island-window{height:clamp(480px,calc(100vh - 130px),920px)}}
.island-window:not(.show-details) .civic-overview,.island-window:not(.show-details) .map-coordinate{display:none}
.island-window:not(.show-details) .population-card{width:auto;padding:10px 14px}
.island-window:not(.show-details) .population-card>:not(.eyebrow):not(.population-count){display:none}
.island-window.show-details #toggle-details{background:#e1ead2}
#instruction{animation:hint-fade 1.2s ease 60s forwards}
@keyframes hint-fade{to{opacity:0;visibility:hidden}}
.map-controls #toggle-details{width:auto;padding:0 10px;font-size:10px;border-right:1px solid #dfe4d4}

/* The timeline: five ages of equal width, a marker for now and dots for the big moments. */
.timeline{position:absolute;top:66px;left:50%;transform:translateX(-50%);width:min(46%,520px);z-index:2;pointer-events:none;font-size:8px;letter-spacing:.06em;color:#6f826f;text-align:center}
.timeline-track{position:relative;height:16px;display:flex;gap:2px;pointer-events:auto}
.timeline-track .age{flex:1;position:relative;border-bottom:3px solid #c9d6c4;padding-bottom:3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.55}
.timeline-track .age[data-state=past]{border-color:#9db48f;opacity:.8}.timeline-track .age[data-state=now]{border-color:#5d8a4c;opacity:1;font-weight:600;color:#3f5a35}
.timeline-track .moment{position:absolute;bottom:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#e2b84a;box-shadow:0 0 0 1px #fbf9f0}
.timeline-track .moment[data-kind=disaster]{background:#c86b55}.timeline-track .moment[data-kind=you]{background:#5c8fc0}
.timeline-track .marker{position:absolute;bottom:-6px;width:2px;height:11px;margin-left:-1px;background:#2f4a2a;border-radius:1px}
.timeline-now{display:block;margin-top:5px;font-size:9px;letter-spacing:0;color:#5f735f}
.island-window.is-night .timeline,.island-window.is-night .timeline-now{color:#e8ecdf}
@media(max-width:700px){.timeline{top:auto;bottom:118px;width:80%}}

/* Minimal mode: the island fills the screen, the controls are small, and depth comes only on a click. */
html,body{height:100%;overflow:hidden}
body>main{padding:0;margin:0;max-width:none}
.site-header{position:fixed!important;top:10px;right:12px;left:auto;z-index:20;padding:0!important;margin:0;background:none!important;border:0!important;width:auto;height:auto;min-height:0}
.site-header .brand,.header-tagline,.live-status{display:none!important}
.header-actions{gap:4px!important}
.header-actions .icon-button{width:30px;height:30px;background:rgba(250,249,240,.88);border:1px solid #dfe4d4;border-radius:8px}
.intro,.story-health,.explore-controls,#history-legend,.dashboard,.history-section,body>footer,main>footer,.tools-caption,#interaction-hint,.pace-readout,.island-heading,.instruction,.time-caption,#start-size{display:none!important}
.island-window{position:fixed!important;inset:0!important;height:auto!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;z-index:1}
.island-story{position:static!important;margin:0!important;padding:0!important}
.away-summary{position:fixed!important;left:56px;bottom:60px;z-index:16;max-width:340px;margin:0!important;padding:10px 34px 10px 12px!important;font-size:12px}
.interference-tools{position:fixed!important;left:10px;top:50%;transform:translateY(-50%);z-index:15;margin:0!important;padding:0!important;background:none!important;border:0!important;width:auto!important;display:block!important}
.interference-buttons{display:flex!important;flex-direction:column;gap:3px!important;padding:4px!important;background:rgba(250,249,240,.88);border:1px solid #dfe4d4;border-radius:10px;width:auto!important}
.interference-buttons button{font-size:0!important;width:32px!important;height:32px!important;padding:0!important;min-width:0!important;display:grid!important;place-items:center;border-radius:7px}
.interference-buttons button span{font-size:15px!important}
.island-toolbar{bottom:10px!important;padding:3px 6px!important;gap:3px!important;border-radius:10px!important}
.island-toolbar button,.island-toolbar .new-island-button{font-size:10px!important;padding:5px 8px!important;min-height:0!important;height:28px;border-radius:7px;white-space:nowrap}
.island-toolbar .speed-buttons button{min-width:26px!important;height:26px!important;padding:0 4px!important}
.island-toolbar .time-controls{gap:3px!important;padding:0!important}
#undo-reset[hidden],#open-ending[hidden]{display:none!important}
.map-controls{bottom:10px!important;right:10px!important;opacity:1!important;display:flex!important}
.map-controls button{height:28px;min-width:28px;font-size:10px}
.population-card{top:10px!important;left:10px!important;padding:6px 10px!important;min-width:0!important}
.population-card .eyebrow{font-size:7px}
.population-count{font-size:22px!important;margin:2px 0 0!important;gap:6px}
.population-count svg{width:18px!important}
.weather{top:48px!important;right:12px!important;font-size:9px!important}
.timeline{top:12px!important;width:min(42%,460px)!important}
.project-overlay{transform:scale(.85);transform-origin:left bottom}
@media(max-width:700px){.timeline{top:auto!important;bottom:52px!important;width:70%!important}.interference-tools{top:auto;bottom:52px;transform:none}.interference-buttons{flex-direction:row}.weather{display:none!important}.away-summary{left:10px;bottom:96px}}
.island-window:not(.show-details) #project-stage,.island-window:not(.show-details) .project-overlay p{display:none!important}
.project-overlay{padding:6px 10px!important;min-width:0!important;width:200px!important}
.interference-buttons button{margin:0!important}
@media(max-width:700px){.timeline{top:62px!important;bottom:auto!important;width:92%!important}.interference-tools{bottom:56px!important}}

/* The place label follows the pointer: one small line, the full story only in Help mode. */
.tile-inspector{left:0;top:0;bottom:auto!important;transform:none!important;max-width:220px!important;padding:4px 8px!important;font-size:10px!important;line-height:1.45!important;border-radius:6px!important;text-align:left!important;white-space:pre-line;background:rgba(250,249,240,.94)!important;box-shadow:0 2px 8px #3d4a3a1a!important;z-index:12}
/* The logo, small in the top left, with the residents just below it. */
.site-header .brand{display:flex!important;position:fixed;top:12px;left:12px;align-items:center;gap:6px;font-size:8px;line-height:1.1;letter-spacing:.08em;z-index:20}
.site-header .brand .brand-icon,.site-header .brand svg{width:22px;height:22px}
.population-card{top:46px!important}
@media(max-width:700px){.timeline{top:96px!important}}

.timeline-track .moment{width:3px!important;height:3px!important;margin-left:-1.5px!important;bottom:-2px!important;opacity:.45;box-shadow:none!important}
.tile-inspector{width:max-content!important;max-width:220px!important}
#inspector-close{display:none!important}
.site-header .brand{font-size:11px!important;gap:8px!important;top:12px!important;left:12px!important}
.site-header .brand .brand-icon,.site-header .brand svg{width:32px!important;height:32px!important}
.population-card{top:56px!important}

/* Tool icons with a tip that appears right away on hover. */
.interference-buttons .tool-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}
.interference-buttons button{position:relative;color:#4f6145}
.interference-buttons button.active{color:#2f4a2a}
.interference-buttons button::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);width:210px;padding:7px 10px;font-size:11px!important;line-height:1.45;letter-spacing:0;font-weight:400;text-align:left;color:#3f4a36;background:rgba(250,249,240,.97);border:1px solid #dfe4d4;border-radius:8px;box-shadow:0 3px 12px #3d4a3a1f;opacity:0;pointer-events:none;transition:opacity .12s;z-index:30;white-space:normal}
.interference-buttons button:hover::after,.interference-buttons button:focus-visible::after{opacity:1}
@media(max-width:700px){.interference-buttons button::after{left:50%;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%);width:200px}}

.interference-buttons button>span{display:grid!important;place-items:center;width:100%;height:100%;line-height:0!important;margin:0!important}
.island-window canvas[data-mode=look]{cursor:default}
.interference-buttons button{display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;width:34px!important;height:34px!important;min-height:0!important;min-width:0!important;padding:0!important;line-height:0!important}
.interference-buttons button>span{width:auto!important;height:auto!important}

/* A title card over the living island when you arrive; it fades away by itself and never blocks a click. */
.title-card{position:absolute;inset:0;z-index:25;display:grid;place-content:center;justify-items:center;gap:10px;pointer-events:none;background:radial-gradient(ellipse at center,rgba(250,249,240,.82),rgba(250,249,240,0) 62%);animation:title-fade 5.2s ease forwards}
.title-logo svg{width:88px;height:88px;filter:drop-shadow(0 6px 14px #3d4a3a22)}
.title-card strong{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,54px);letter-spacing:.06em;color:#2f4a2a}
.title-card strong span{color:#c98a3e}
.title-card small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#5f735f}
@keyframes title-fade{0%{opacity:0;transform:scale(.98)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.title-card{animation:title-fade 2.5s linear forwards}}

/* Phones: fewer and smaller things, and a timeline you can actually read. */
@media(max-width:700px){
 .site-header .brand>span:not(.brand-icon){display:none!important}
 .site-header .brand .brand-icon,.site-header .brand svg{width:26px!important;height:26px!important}
 .header-actions .icon-button{width:28px!important;height:28px!important}
 .population-card{top:10px!important;left:44px!important;padding:3px 8px!important}
 .population-card .eyebrow{display:none!important}
 .population-count{font-size:17px!important;margin:0!important}
 .population-count svg{width:14px!important}
 .timeline{top:46px!important;width:calc(100% - 24px)!important}
 .timeline-track{height:12px!important}
 .timeline-track .age{font-size:0!important;padding-bottom:0!important}
 .timeline-track .age[data-state=now]{font-size:10px!important}
 .timeline-track .moment{display:none!important}
 .timeline-now{display:inline-block!important;margin-top:6px!important;font-size:11px!important;color:#3f4a36!important;background:rgba(250,249,240,.88);padding:2px 8px;border-radius:9px}
 .interference-buttons button{width:30px!important;height:30px!important}
 .interference-buttons .tool-icon{width:17px;height:17px}
 #photo-mode,.island-toolbar [data-speed="3"]{display:none!important}
 .island-toolbar button,.island-toolbar .new-island-button{font-size:10px!important;padding:4px 7px!important;height:26px}
 .island-window:not(.show-details) .project-overlay{display:none!important}
 .wish-bubble{width:200px!important;font-size:11px!important;bottom:96px!important}
}

.timeline-now b{font-weight:600}
@media(max-width:700px){.timeline-track{display:none!important}.timeline-next{display:none}.timeline{top:12px!important;left:auto!important;right:110px!important;transform:none!important;width:auto!important;text-align:right}.timeline-now{margin-top:0!important}}

/* Phones: the tools and the time bar share one slim row at the bottom. */
@media(max-width:700px){
 .interference-tools{left:8px!important;right:auto!important;bottom:10px!important;top:auto!important;transform:none!important}
 .interference-buttons{flex-direction:row!important;padding:3px!important;gap:2px!important}
 .interference-buttons button{width:27px!important;height:27px!important}
 .interference-buttons .tool-icon{width:15px!important;height:15px!important}
 .island-toolbar{left:auto!important;right:8px!important;transform:none!important;bottom:10px!important;padding:3px 4px!important;gap:2px!important;max-width:calc(100% - 172px)!important}
 .island-toolbar button,.island-toolbar .new-island-button{height:27px!important;padding:0 6px!important}
 .island-toolbar [data-speed="2"],.map-controls{display:none!important}
 #canvas-journal,#new-island,#open-ending{font-size:0!important}
 #canvas-journal::before{content:'Boek';font-size:10px}
 #open-ending::before{content:'Einde';font-size:10px}
 #new-island span{font-size:13px!important}
}

/* The closing film fills the screen: the island and its words, with two small buttons in the corner. */
.cinema-dialog{width:100vw!important;max-width:none!important;height:100vh!important;max-height:none!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:#000!important;overflow:hidden}
.cinema-dialog::backdrop{background:#000}
.cinema-dialog #finale-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.cinema-dialog>.eyebrow,.cinema-dialog .dialog-note,.cinema-dialog progress,.cinema-dialog #cinema-title,.cinema-dialog #cinema-line,.cinema-dialog .cinema-caption>.eyebrow,#cinema-cheer{display:none!important}
.cinema-dialog .cinema-caption{position:absolute!important;right:16px;bottom:14px;width:auto!important;background:none}
.cinema-dialog .cinema-caption div{display:flex;gap:6px}
.cinema-dialog button#cinema-skip,.cinema-dialog #cinema-pause{position:relative;font-size:11px;padding:6px 12px;border-radius:16px;background:rgba(250,249,240,.16);color:#f3efe2;border:1px solid rgba(250,249,240,.3)}
.cinema-dialog #cinema-pause{position:absolute;right:16px;bottom:52px}
.cinema-dialog #cinema-close{z-index:3;color:#f3efe2;background:rgba(250,249,240,.12);border-color:rgba(250,249,240,.3)}

.keur-fold{margin:12px 0}.keur-fold summary{cursor:pointer;list-style:none}.keur-fold summary::-webkit-details-marker{display:none}.keur-fold summary::after{content:' ▾';color:#8a9a7c}.keur-fold[open] summary::after{content:' ▴'}
details.score-row{display:block}details.score-row>summary{display:grid;grid-template-columns:115px 1fr 30px;align-items:center;gap:10px;cursor:pointer;list-style:none}details.score-row>summary::-webkit-details-marker{display:none}details.score-row .score-note{margin:4px 0 6px!important}

/* Readability: a touch larger and darker, still calm. */
.timeline{font-size:10px!important;color:#34452f!important}.timeline-track .age{opacity:.8}.timeline-track .age[data-state=now]{color:#1f2f1b!important}
.timeline-now{font-size:11.5px!important;color:#24321f!important;background:rgba(250,249,240,.82);padding:2px 9px;border-radius:10px;display:inline-block}
.island-toolbar button,.island-toolbar .speed-buttons button,.map-controls button{color:#26321f!important;font-size:11.5px!important}
.weather{font-size:11px!important;color:#2f3d2b!important;background:rgba(250,249,240,.85)!important;padding:3px 10px!important;border-radius:12px!important}
.population-card .eyebrow{font-size:8.5px!important;color:#3f4f39!important}.population-count{color:#1f2f1b}
/* A story that surfaces on the island: a small note you can click. */
.story-chip{position:absolute;left:12px;bottom:62px;z-index:14;display:flex;gap:7px;align-items:flex-start;max-width:min(340px,calc(100% - 24px));padding:8px 12px;font-size:12px;line-height:1.45;text-align:left;color:#2f3d2b;background:rgba(250,249,240,.95);border:1px solid #d9dfcd;border-radius:12px 12px 12px 3px;box-shadow:0 3px 12px #3d4a3a1c;cursor:pointer;animation:chip-in .5s ease}
.story-chip[hidden]{display:none}@keyframes chip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:700px){.story-chip{bottom:52px;left:8px;font-size:11px}}
/* The ending page: the small green beginning set into the big, full island. */
.ending-maps{position:relative;display:block!important}.ending-maps figure:last-child{max-width:420px;margin:0 auto}.ending-maps figure:last-child svg{max-height:none!important;aspect-ratio:1;border-radius:10px;box-shadow:0 6px 22px #2f3d2b22}
.ending-maps figure:first-child{position:absolute;left:8px;top:8px;width:110px;z-index:2;background:#fbf8ee;padding:5px;border-radius:8px;box-shadow:0 3px 10px #2f3d2b22}.ending-maps figure:first-child svg{max-height:none!important}
.ending-maps figcaption{text-align:center}
.commission-auto{margin:6px 0 10px}

.version-line{margin-top:14px;font-size:11px;letter-spacing:.04em;color:#8a846e;}
.version-line strong{font-weight:600;color:#6f7a5d;}

.language-switch{font:inherit;font-size:11px;color:#526547;background:#f4f5e9;border:1px solid #ccd5bd;border-radius:6px;padding:7px 5px;max-width:96px}.language-switch:focus-visible{outline:2px solid #78936c;outline-offset:2px}

.mobile-language-setting{display:none}
@media(max-width:1024px),(pointer:coarse){.header-actions>.language-switch{display:none}.mobile-language-setting{display:flex}.mobile-language-setting .language-switch{font-size:14px;max-width:none;min-height:44px;padding:8px 10px}}