@font-face{font-family:Fraunces;src:url('assets/fraunces-regular.ttf') format('truetype');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fraunces-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito-sans.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--ink:#22151c;--deep:#190d13;--cream:#f3e8dd;--lime:#d7b3c6;--muted:#c8b7c0;--line:rgba(226,235,205,.22);--serif:Fraunces,Georgia,serif;--sans:Nunito,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--deep);color:var(--cream);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:6px}a{color:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.icon-definitions{position:absolute;width:0;height:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:12px;left:12px;padding:12px 20px;background:var(--cream);color:var(--deep);z-index:1000;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}
#experience{position:relative;width:100%;height:100svh;isolation:isolate;background:#27161f}#forest{position:absolute;inset:0;width:100%;height:100%;z-index:0;touch-action:none;cursor:crosshair}.scene-shade,.scene-vignette{position:absolute;inset:0;pointer-events:none;z-index:1}.scene-shade{background:linear-gradient(90deg,rgba(5,21,17,.82),rgba(6,23,18,.6) 29%,rgba(6,24,19,.11) 66%,rgba(5,18,15,.06));transition:opacity 1.2s}.scene-vignette{background:linear-gradient(180deg,rgba(4,19,15,.5),transparent 20%,transparent 57%,rgba(5,20,15,.85)),radial-gradient(ellipse at 56% 45%,transparent 40%,rgba(0,13,9,.27) 100%)}
.site-header{position:absolute;z-index:20;left:24px;right:24px;top:22px;display:flex;align-items:center;gap:18px}.wordmark{display:flex;align-items:center;gap:7px;padding:0;font:400 32px/.9 var(--serif);letter-spacing:-1.5px;white-space:nowrap}.wordmark-i{font-style:italic}.brand-leaf{height:25px;width:25px;color:var(--lime);transform:rotate(-15deg)}.brand-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);margin:15px 0 0 -3px}.brand-note{display:none;font-size:9px;text-transform:uppercase;line-height:1.6;letter-spacing:1.7px;border-left:1px solid var(--line);padding-left:22px}.primary-nav{display:none;align-items:center;gap:28px;margin-left:auto}.primary-nav button{position:relative;font-size:13px;padding:12px 0;transition:color .2s}.primary-nav button::after{content:'';height:1px;background:var(--lime);position:absolute;bottom:5px;left:0;right:0;transform:scaleX(0);transition:transform .2s}.primary-nav button:hover::after{transform:scaleX(1)}.header-actions{display:flex;gap:10px;align-items:center;margin-left:auto}.map-button{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:50px;min-height:44px;background:#2f192545;backdrop-filter:blur(8px)}.map-button span{display:none}.map-button svg{width:18px;height:18px}.icon-button{height:44px;width:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:#2f192545;backdrop-filter:blur(8px)}.icon-button svg{width:18px;height:18px}.sound-button{position:relative}.sound-button .sound-on,.sound-button[aria-pressed=true] .sound-off{display:none}.sound-button[aria-pressed=true] .sound-on{display:inline}
.intro{position:absolute;left:26px;right:22px;top:19%;z-index:5;pointer-events:none;transition:opacity .6s,transform .8s;max-width:600px}.eyebrow{font-size:9px;line-height:1.6;letter-spacing:2.1px;font-weight:400;text-transform:uppercase;display:flex;align-items:center;gap:10px}.intro .eyebrow{color:var(--lime);margin:0 0 22px}.tiny-star{font-size:20px;line-height:1}.intro h1{font:400 clamp(41px,9.7vw,72px)/1.11 var(--serif);letter-spacing:-2px;margin:0 0 22px;text-wrap:balance}.intro h1 em{font-weight:400;color:var(--lime)}.intro-copy{font-size:14px;line-height:1.8;color:#e4dad0;margin:0;max-width:370px}.desktop-break{display:none}.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px;pointer-events:auto}.enter-button{display:flex;align-items:center;gap:10px;color:#35242d;background:var(--cream);border:1px solid var(--cream);border-radius:3px;min-height:53px;padding:0 17px;font-size:13px;font-weight:600;box-shadow:0 5px 30px #0e080b25;transition:background .2s,transform .2s}.enter-button:hover{background:var(--lime);transform:translateY(-2px)}.enter-button svg{width:18px;height:18px}.enter-button .enter-arrow{width:17px;margin-left:12px}.text-button{font-size:12px;padding:13px 0;color:var(--cream);border-bottom:1px solid var(--line)}.text-button span{padding-left:8px}.intro-hint{font-size:10px;letter-spacing:.2px;color:#c4b4bd;margin-top:20px;display:flex;align-items:center;gap:7px}.mouse-indicator{height:14px;width:9px;display:inline-block;border:1px solid #baa5b0;border-radius:5px;position:relative}.mouse-indicator::before{content:'';position:absolute;top:2px;width:1px;height:4px;background:#baa5b0;left:3px}
#mew{position:absolute;z-index:4;width:245px;height:245px;pointer-events:none;will-change:transform;filter:drop-shadow(0 10px 20px #32192660)}#mew img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.mew-glow{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,rgba(186,240,128,.22),transparent 69%);transform:scale(1.45);filter:blur(8px)}.character-note{display:none;position:absolute;left:73%;top:64%;z-index:4;gap:12px;align-items:start;font-size:10px;line-height:1.7;letter-spacing:.5px;color:#f3e8ddd9;pointer-events:none;transition:opacity .5s}.character-note b{font-size:9px;text-transform:uppercase;letter-spacing:2px;font-weight:400;color:var(--lime)}.note-line{height:1px;width:45px;margin-top:9px;background:#ecdbc980;transform-origin:right;transform:rotate(-35deg)}
.forest-footer{position:absolute;z-index:10;bottom:57px;left:24px;right:24px;display:flex;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:21px}.forest-coordinate{display:none;align-items:center;gap:13px;min-width:225px}.forest-coordinate>svg{width:25px;height:25px;color:var(--lime)}.forest-coordinate .eyebrow{font-size:8px;letter-spacing:1.7px;color:#c4b3bc}.coordinate-title{font:400 17px/1.8 var(--serif)}.journey-nav{display:flex;position:relative;width:100%;gap:4px;justify-content:space-between}.journey-nav::before{content:'';position:absolute;left:9%;right:9%;height:1px;background:var(--line);top:13px;z-index:-1}.journey-nav button{display:flex;flex-direction:column;align-items:center;gap:11px;padding:8px 0 4px;min-width:50px;min-height:44px;font-size:8px;color:#c0aeb8;white-space:nowrap;flex:1;transition:color .25s}.journey-node{width:9px;height:9px;border-radius:50%;background:#402f38;border:1px solid #a68597;box-shadow:0 0 0 5px #2a1721}.journey-nav button.is-current{color:var(--cream)}.journey-nav button.is-current .journey-node{background:#e0bdd0;box-shadow:0 0 0 5px #2a1721,0 0 0 6px #b0829b}.journey-nav button.is-visited .journey-node{background:#a58295}.journey-nav button:hover{color:white}.discovery{display:none;align-items:center;gap:10px;text-align:left;white-space:nowrap}.discovery svg{color:var(--lime);width:22px;height:22px}.discovery b{font-size:12px;letter-spacing:1px;font-weight:400}.discovery small{display:block;font-size:9px;line-height:1.8;color:#c0aeb8}.bottom-meta{position:absolute;z-index:10;left:24px;right:24px;bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:1.7px;color:#af9ca6}.bottom-meta .flight-tip{display:none}.flight-tip>span{margin:0 9px}.credits-link{font-size:8px;letter-spacing:.5px;padding:7px 0;color:#bfaab5}.credits-link>span{margin-left:6px}
.explore-status{position:absolute;top:110px;left:26px;z-index:5;display:flex;flex-direction:column;gap:5px;opacity:0;pointer-events:none;transition:opacity .6s}.explore-status .eyebrow{font-size:8px;color:var(--lime)}#location-name{font:400 30px/1.4 var(--serif)}.location-caption{font-size:12px;color:#d5c3cd}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}.time-button{position:absolute;z-index:12;right:24px;bottom:167px;display:flex;align-items:center;gap:9px;text-align:left;opacity:0;visibility:hidden;transition:opacity .6s;color:var(--cream);padding:0}.time-orbit{display:grid;place-items:center;width:46px;height:46px;border:1px solid #ecdbc952;border-radius:50%;background:#351e2a77;backdrop-filter:blur(10px)}.time-orbit svg{width:23px;height:23px}.time-button b{font-weight:400;display:block;font-size:11px}.time-button small{font-size:9px;line-height:1.7;color:var(--muted)}.time-button kbd{display:none;font-family:var(--sans);font-size:9px;color:var(--muted);margin-left:10px;border:1px solid var(--line);padding:4px 6px}.time-button[aria-pressed=true] .time-orbit{background:#906d8070;border-color:var(--lime)}
#world-hotspots{position:absolute;inset:0;z-index:6;pointer-events:none}.world-hotspot{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;background:#281720c9;backdrop-filter:blur(8px);border:1px solid #dfc0d155;border-radius:30px;white-space:nowrap;font-size:11px;box-shadow:0 6px 25px #10070c40;min-height:42px;transition:background .2s,border-color .2s}.world-hotspot:hover,.world-hotspot:focus-visible{background:#4e3a45;border-color:#dfc0d1}.hotspot-number{height:24px;width:24px;display:grid;place-items:center;border:1px solid #d4b2c470;border-radius:50%;font-size:8px;color:var(--lime)}.world-hotspot.is-near{border-color:#daaec5}.joystick{display:none;position:absolute;left:24px;bottom:165px;width:78px;height:78px;border:1px solid var(--line);background:#33192755;border-radius:50%;z-index:9;touch-action:none}#joystick-thumb{position:absolute;width:30px;height:30px;left:23px;top:23px;border-radius:50%;background:#cfadbf80;border:1px solid #ecdbc870}.loading-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;border:1px solid var(--line);background:#24141de6;padding:14px 24px;border-radius:3px;font:400 14px var(--serif);transition:opacity .3s}.loading-message[hidden]{display:none}
body[data-mode=explore] .intro{opacity:0;transform:translateY(15px);visibility:hidden;pointer-events:none}body[data-mode=explore] .intro-actions{pointer-events:none}body[data-mode=explore] .intro-only{opacity:0}body[data-mode=explore] .scene-shade{opacity:.18}body[data-mode=explore] .explore-status,body[data-mode=explore] .time-button{opacity:1;visibility:visible}body[data-mode=intro] #world-hotspots{visibility:hidden}body[data-era=past] .scene-vignette{background:linear-gradient(180deg,#210f1966,transparent 20%,transparent 57%,#24111bc9)}body:has(dialog[open]) #joystick{display:none}
/* Reading surfaces stay quiet while the world carries the detail. */
#archive-dialog{width:calc(100% - 24px);max-width:1060px;max-height:calc(100svh - 28px);margin:auto;padding:0;border:1px solid #c0a3b25e;border-radius:7px;background:#f0e7de;color:var(--ink);box-shadow:0 25px 150px #0009;overflow:auto;overscroll-behavior:contain;scrollbar-color:#a48f9a transparent}#archive-dialog::backdrop{background:#13080ed0;backdrop-filter:blur(9px)}.archive-close{position:sticky;z-index:5;top:15px;margin:15px 15px -59px auto;display:grid;place-items:center;background:#e9e1d8ee;border:1px solid #baa9b2;color:#37262f;height:44px;width:44px;border-radius:50%;backdrop-filter:blur(6px)}.archive-close svg{width:19px;height:19px}#archive-content{padding:39px 24px 34px;min-height:300px}.archive-eyebrow{display:block;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:#6c5461;margin:0 55px 14px 0}.archive-title{font:400 clamp(34px,6vw,59px)/1.1 var(--serif);letter-spacing:-1.5px;margin:0 40px 18px 0}.archive-intro{font-size:16px;line-height:1.8;color:#5f5058;max-width:650px;margin:0 0 28px}.archive-layout{display:grid;gap:26px;align-items:center}.archive-art{width:100%;max-height:280px;object-fit:contain;display:block;filter:drop-shadow(0 12px 20px #4f354326)}.archive-layout p{font-size:16px;line-height:1.85}.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #49313e24;border-bottom:1px solid #49313e24;margin:20px 0 26px}.fact{padding:16px 10px 16px 0}.fact dt,.fact small,.fact-label{display:block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#7e6a75;margin:0 0 6px}.fact dd{margin:0;font-size:15px}.fact b,.fact strong{font-weight:400;font-size:17px}.source-link{display:inline-block;font-size:12px;color:#633c51;text-underline-offset:4px;margin-top:16px;line-height:1.7}.archive-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.archive-tabs button,.archive-action{padding:11px 18px;background:#3b2933;border:1px solid #3b2933;border-radius:3px;color:#f2e8dd;font-size:13px;min-height:44px}.timeline{display:grid;gap:0;padding:0;margin:25px 0}.timeline-item{list-style:none;padding:23px 0;border-top:1px solid #5e3d4f29;display:grid;gap:10px}.timeline-item h3,.film-item h3{font:400 26px/1.25 var(--serif);margin:0 0 12px}.timeline-item p,.film-item p{font-size:15px;line-height:1.8;margin:0;color:#62515a}.timeline-year,.timeline-item time{font:400 27px/1.2 var(--serif);color:#794f65}.timeline-item .source-link,.film-item .source-link{margin-top:10px}.film-list{display:grid;gap:15px}.film-item{position:relative;padding:24px 0;border-top:1px solid #5e3d4f29;display:grid;gap:16px}.film-year,.film-number{font:400 38px var(--serif);color:#a58b99}.film-meta,.film-item small{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#836e79;margin-bottom:8px}.film-subtitle,.film-place{font-size:12px;color:#765768}.card-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.tcg-card{padding:0;text-align:left;color:var(--ink);transition:transform .25s;display:block}.tcg-card:hover{transform:translateY(-7px)}.tcg-card img{display:block;width:100%;border-radius:8px;box-shadow:0 9px 19px #35252e23;transition:box-shadow .25s}.tcg-card:hover img{box-shadow:0 13px 25px #35252e3b}.card-caption{margin-top:15px;font-size:12px;line-height:1.6}.card-caption strong,.card-caption b{font:400 18px/1.3 var(--serif);display:block;margin-bottom:5px}.card-caption small{display:block;font-size:10px;color:#74616b}.card-detail{display:grid;gap:26px;align-items:center}.card-detail img,.card-focus-art{max-width:100%;max-height:64svh;display:block;border-radius:12px;box-shadow:0 16px 30px #35252e23;margin:auto}.back-link{display:inline-flex;align-items:center;gap:8px;color:#664456;font-size:13px;padding:8px 0;margin-bottom:20px;text-decoration:underline;text-underline-offset:5px;min-height:44px}.map-grid{display:grid;gap:10px;margin-top:26px}.map-destination{display:flex;align-items:center;gap:15px;padding:18px;text-align:left;border:1px solid #79596a44;border-radius:3px;min-height:74px;background:#e9e1d8;color:#37242e;transition:background .2s}.map-destination:hover{background:#dbc8d2}.map-destination strong{display:block;font:400 23px var(--serif)}.map-destination small{display:block;font-size:12px;color:#76646e;margin-top:4px}.map-number{font-size:12px;color:#876477}.map-destination>span:last-child{margin-left:auto}.archive-content-note,.archive-note{font-size:12px;color:#83727b;line-height:1.7;margin-top:26px}.credits-list{padding-left:18px;font-size:14px;line-height:1.9}.noscript-message{position:fixed;z-index:100;inset:20%;padding:30px;background:#f0e7de;color:#22131b}
@media(min-width:650px){.site-header{left:40px;right:40px;top:30px;gap:23px}.wordmark{font-size:36px}.brand-note{display:block}.primary-nav{display:flex}.header-actions{margin-left:14px}.map-button{padding:11px 16px}.map-button span{display:block;font-size:11px}.intro{left:7%;top:25%;max-width:600px;right:auto}.intro h1{font-size:67px}.intro-copy{font-size:15px}.intro .eyebrow{font-size:9px;letter-spacing:2.2px}.desktop-break{display:block}.intro-actions{gap:24px;margin-top:30px}.enter-button{min-height:57px;padding:0 22px;font-size:13px}.text-button{font-size:12px}.intro-hint{font-size:10px;margin-top:24px}.character-note{display:flex}.forest-footer{left:40px;right:40px;bottom:65px;padding-top:23px}.journey-nav{max-width:530px;margin:auto;gap:18px}.journey-nav button{font-size:10px;min-width:65px}.journey-nav::before{left:7%;right:7%}.discovery{display:flex}.bottom-meta{left:40px;right:40px;bottom:22px;font-size:8px}.bottom-meta .flight-tip{display:inline}.credits-link{font-size:9px}.time-button{right:43px;bottom:183px}.time-button b{font-size:12px}.time-button small{font-size:10px}.time-button kbd{display:block}.explore-status{left:43px;top:126px}#location-name{font-size:37px}#archive-content{padding:52px 52px 45px}#archive-dialog{width:calc(100% - 70px);max-height:calc(100svh - 70px)}.archive-close{top:22px;margin:22px 22px -66px auto}.archive-layout{grid-template-columns:.85fr 1.15fr;gap:35px}.archive-art{max-height:360px}.timeline-item{grid-template-columns:120px 1fr;gap:25px}.film-item{grid-template-columns:90px 1fr}.card-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.card-caption strong{font-size:19px}.card-detail{grid-template-columns:1fr 1fr;gap:40px}.map-grid{grid-template-columns:1fr 1fr}.map-destination:last-child{grid-column:1 / -1}}
@media(min-width:1100px){.site-header{left:54px;right:54px;top:35px}.primary-nav{gap:35px}.header-actions{margin-left:27px;gap:15px}.intro{top:26%;left:7.8%}.intro h1{font-size:clamp(70px,5.7vw,93px);letter-spacing:-3.7px;margin-bottom:27px}.intro .eyebrow{margin-bottom:25px}.intro-copy{font-size:15px;line-height:1.85}.intro-actions{margin-top:32px}.intro-hint{margin-top:24px}.forest-footer{left:54px;right:54px;bottom:68px}.forest-coordinate{display:flex}.journey-nav{max-width:540px}.discovery{min-width:135px;margin-left:35px}.bottom-meta{left:54px;right:54px;bottom:24px}.time-button{right:57px;bottom:186px}.explore-status{left:57px;top:145px}.character-note{top:61%;left:74%}.world-hotspot{font-size:12px;padding:9px 15px 9px 9px;min-height:45px}}
@media(max-height:690px) and (min-width:650px){.intro{top:23%}.intro h1{font-size:55px;margin-bottom:17px}.intro .eyebrow{margin-bottom:15px}.intro-copy{font-size:13px;line-height:1.6}.intro-actions{margin-top:20px}.intro-hint{margin-top:15px}.forest-footer{bottom:46px;padding-top:15px}.bottom-meta{bottom:9px}.site-header{top:22px}.time-button{bottom:143px}}
@media(max-width:649px){.scene-shade{background:linear-gradient(90deg,#170a11b5,#1c0c1570 70%,#200e1720)}.scene-vignette{background:linear-gradient(180deg,#180a11a8,transparent 17%,transparent 50%,#180a11db 100%)}.character-note{display:none}.intro-copy{max-width:275px;font-size:13px}.intro h1{font-size:clamp(39px,10.4vw,61px)}.intro-actions .text-button{font-size:11px}.intro{top:20%}.intro .eyebrow{font-size:7px;letter-spacing:1.7px;gap:6px}.intro-hint{font-size:9px}.time-button>span:nth-child(2){max-width:100px}.world-hotspot{font-size:10px;max-width:180px}.journey-nav button{font-size:8px}.explore-status{top:108px}body[data-mode=explore] .bottom-meta .flight-tip{display:block;font-size:6px;letter-spacing:1px}body[data-mode=explore] .bottom-meta>span:first-child{display:none}}
.archive-art img{display:block;width:100%;height:auto;max-height:inherit;object-fit:contain}.tcg-card{margin:0}.tcg-card>button{padding:0;width:100%;display:block}.card-caption h3{font:400 21px/1.2 var(--serif);margin:8px 0}.card-caption p{font-size:10px;color:#7d6270;margin:0}.card-caption .archive-eyebrow{font-size:8px;letter-spacing:1px;margin:0}.card-detail .archive-art{max-height:none}.card-detail .archive-art img{max-height:62svh;width:auto;max-width:100%;margin:auto}.map-destination{display:grid;grid-template-columns:1fr auto;gap:6px}.map-destination .archive-eyebrow{grid-column:1 / -1;margin:0;font-size:8px}.map-destination h3{font:400 25px var(--serif);margin:3px 0}.map-destination p{grid-column:1;font-size:12px;line-height:1.5;margin:0}.map-destination .source-link{grid-column:2;grid-row:2 / 4;margin:0;font-size:10px}.world-hotspot{transform:translateX(-50%)}#mew{transition:width .6s,height .6s}#mew img{transform:scaleX(var(--facing,1));transition:transform .28s}body[data-mode=explore] #mew{width:160px;height:160px}.archive-close:focus-visible,#archive-dialog button:focus-visible,#archive-dialog a:focus-visible{outline-color:#634053}
@media(max-width:649px){#mew{width:160px;height:160px}.intro-copy{max-width:min(240px,calc(100vw - 175px));font-size:13px}body[data-mode=explore] #mew{width:140px;height:140px}.archive-title{font-size:35px}.map-destination h3{font-size:23px}}
@media(prefers-reduced-motion:no-preference){.intro{animation:arrive 1.25s .1s both}.site-header{animation:arrive 1s both}.forest-footer,.bottom-meta{animation:arrive 1.25s .25s both}@keyframes arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.tcg-card img{height:auto}
.pose-menu{--moves-bottom:223px;position:absolute;z-index:15;left:54px;bottom:var(--moves-bottom);font-size:11px;color:var(--cream);display:none}.pose-menu summary{cursor:pointer;min-height:44px;padding:13px 18px;border:1px solid var(--line);border-radius:35px 4px 35px 4px;background:#3f2c36e6;backdrop-filter:blur(10px)}.pose-menu>div{display:flex;gap:5px;padding:10px 0}.pose-menu button{min-width:50px;min-height:44px;border:1px solid var(--line);border-radius:20px;background:#2e1a25e8;font-size:11px}.pose-menu button[aria-pressed=true]{color:#2a1922;background:var(--lime)}body[data-mode=explore] .pose-menu{display:block}@media(max-width:649px){.pose-menu{--moves-bottom:318px;left:24px;bottom:var(--moves-bottom)}.pose-menu summary{font-size:9px;padding:12px}.pose-menu>div{position:absolute;bottom:44px}.pose-menu button{min-width:45px}}
.explore-status{visibility:hidden}body[data-mode=explore] .explore-status{visibility:visible}#archive-title:focus{outline:none}.archive-tabs:has([data-collection]){margin:0 0 24px}
.live-3d #mew,.live-3d #world-hotspots,.live-3d .character-note{display:none}.live-3d .scene-shade{background:linear-gradient(90deg,#1a0b13cf,transparent 78%)}.live-3d[data-mode=explore] .scene-shade{opacity:0}.magic-controls{position:absolute;z-index:14;bottom:160px;right:54px;display:flex;gap:10px;opacity:0;visibility:hidden;transition:opacity .5s}.magic-button{display:flex;align-items:center;gap:10px;background:#381e2cc9;border:1px solid #d8b9ca47;border-radius:30px 8px 30px 8px;padding:12px 16px;min-height:60px;backdrop-filter:blur(12px);text-align:left;color:var(--cream)}.magic-button>svg{width:25px;height:25px;color:var(--lime)}.magic-button b{display:block;font-size:12px;font-weight:400}.magic-button small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.magic-button kbd{font:9px var(--sans);color:var(--muted);padding:3px;border:1px solid var(--line);margin-left:8px}.magic-controls .time-button{position:static;opacity:1;visibility:inherit;padding:12px 16px;gap:10px}.magic-button:hover{background:#563b49e6;border-color:#e2c2d3}.magic-button:active{transform:scale(.97)}.flight-altitude{position:absolute;z-index:14;left:54px;bottom:160px;display:flex;gap:8px;opacity:0;visibility:hidden}.flight-altitude button{border:1px solid var(--line);background:#381e2cab;backdrop-filter:blur(10px);border-radius:50%;width:44px;height:44px;font-size:22px;color:var(--lime)}body[data-mode=explore] .magic-controls,body[data-mode=explore] .flight-altitude{opacity:1;visibility:visible}.interact-button{position:absolute;z-index:15;left:50%;bottom:245px;translate:-50% 0;display:flex;gap:10px;align-items:center;min-height:44px;padding:10px 20px;color:#f0e2d4;background:#472d3bc9;border:1px solid #e0b7cd77;border-radius:3px 35px 3px 35px;backdrop-filter:blur(8px);white-space:nowrap;font-size:12px}.interact-button[hidden]{display:none}.interact-button svg{width:16px;height:16px}.interact-button kbd{font:9px var(--sans);color:var(--lime)}.forest-notice{position:absolute;z-index:14;left:50%;bottom:295px;translate:-50% 0;width:min(440px,calc(100% - 48px));text-align:center;color:#f0e2d4;font:italic 16px/1.6 var(--serif);text-shadow:0 2px 9px #1d1017;pointer-events:none;opacity:0;transition:opacity .5s}.forest-notice.is-visible{opacity:1}.world-transition{position:absolute;inset:0;z-index:25;background:#ecdbc8;opacity:0;pointer-events:none;transition:opacity .5s}.travelling .world-transition{opacity:1}.live-3d .loading-message{display:none}
@media(min-width:650px) and (max-height:800px){.intro{top:21%}.intro h1{font-size:60px;margin-bottom:18px}.intro .eyebrow{margin-bottom:17px}.intro-copy{font-size:14px;line-height:1.7}.intro-actions{margin-top:22px}.intro-hint{margin-top:16px}}
@media(max-width:649px){.magic-controls{bottom:142px;left:24px;right:24px;gap:7px}.magic-button,.magic-controls .time-button{flex:1;min-width:0;padding:10px 8px;gap:6px;min-height:58px}.magic-button>svg{width:19px;min-width:19px}.magic-button b{font-size:10px}.magic-button small{font-size:8px;line-height:1.4}.magic-button kbd{display:none}.flight-altitude{left:24px;bottom:216px;flex-direction:column;gap:7px}.flight-altitude button{width:40px;height:44px}.interact-button{bottom:220px;left:auto;right:24px;translate:0 0;max-width:calc(100% - 100px);font-size:10px;padding:10px 12px}.interact-button kbd{display:none}.forest-notice{top:205px;bottom:auto;font-size:14px}.live-3d .scene-shade{background:linear-gradient(90deg,#1a0b13c4,transparent 95%)}.live-3d .intro-copy{max-width:215px}}

.site-header .header-actions{margin-left:auto}.site-header{pointer-events:none}.site-header button{pointer-events:auto}.map-button span{display:block;font-size:10px}.map-button{padding:10px 12px}.archive-toolbar{position:sticky;top:15px;z-index:6;display:flex;align-items:center;justify-content:space-between;margin:15px 15px -59px;pointer-events:none}.archive-toolbar button{pointer-events:auto}.archive-toolbar .archive-close{position:static;margin:0}.archive-map{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;background:#e9e1d8ee;border:1px solid #ab919f66;border-radius:24px;color:#3f2d37;font-size:11px}.archive-map svg{width:16px;height:16px}#archive-content{padding-top:76px}@media(min-width:650px){.archive-toolbar{top:22px;margin:22px 22px -66px}#archive-content{padding-top:82px}}

/* Keep the live scene controls clear of device edges and home indicators. */
:root { --ui-edge: 24px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
.site-header { left: calc(var(--ui-edge) + var(--safe-left)); right: calc(var(--ui-edge) + var(--safe-right)); top: max(22px, var(--safe-top)); }
.wordmark { min-height: 44px; }
.flight-altitude button { min-width: 44px; min-height: 44px; }
.pose-menu button { white-space: nowrap; padding-inline: 12px; }
.pose-menu summary { list-style-position: inside; }
.bottom-meta { left: calc(var(--ui-edge) + var(--safe-left)); right: calc(var(--ui-edge) + var(--safe-right)); bottom: calc(20px + var(--safe-bottom)); }
.forest-footer { left: calc(var(--ui-edge) + var(--safe-left)); right: calc(var(--ui-edge) + var(--safe-right)); bottom: calc(57px + var(--safe-bottom)); }
@media (min-width: 650px) { :root { --ui-edge: 40px; } }
@media (min-width: 1100px) { :root { --ui-edge: 54px; } .site-header { top: max(35px, var(--safe-top)); } }
@media (pointer: coarse) {
  .credits-link { min-height: 44px; padding-block: 12px; }
  .bottom-meta { bottom: calc(4px + var(--safe-bottom)); }
  .magic-button kbd, .interact-button kbd, .bottom-meta .flight-tip { display: none !important; }
  .pose-menu summary { font-size: 12px; }
}
@media (max-width: 649px) {
  .flight-altitude { left: calc(24px + var(--safe-left)); bottom: calc(216px + var(--safe-bottom)); }
  .magic-controls { left: calc(24px + var(--safe-left)); right: calc(24px + var(--safe-right)); bottom: calc(142px + var(--safe-bottom)); }
  .pose-menu { --moves-bottom: calc(318px + var(--safe-bottom)); left: calc(24px + var(--safe-left)); bottom: var(--moves-bottom); }
  .interact-button { right: calc(24px + var(--safe-right)); bottom: calc(220px + var(--safe-bottom)); white-space: normal; text-align: left; }
  .pose-menu > div { max-width: calc(100vw - 48px - var(--safe-left) - var(--safe-right)); flex-wrap: wrap; }
}
@media (max-width: 380px) {
  :root { --ui-edge: 14px; }
  .site-header { gap: 8px; }
  .wordmark { font-size: 28px; gap: 5px; }
  .brand-leaf { width: 22px; }
  .header-actions { gap: 6px; }
  .map-button { gap: 6px; padding-inline: 10px; }
  .map-button span { font-size: 9px; }
  .intro { left: 20px; right: 18px; }
  .intro h1 { font-size: 35px; letter-spacing: -1.4px; }
  .intro-actions { gap: 14px; }
  .enter-button { padding-inline: 12px; }
  .journey-nav button { min-width: 0; font-size: 7px; }
  .explore-status { left: 20px; }
}
@media (max-width: 649px) and (max-height: 650px) {
  .intro { top: max(95px, 17%); }
  .intro .eyebrow { margin-bottom: 13px; }
  .intro h1 { font-size: 35px; margin-bottom: 14px; }
  .live-3d .intro-copy { max-width: 250px; font-size: 12px; line-height: 1.6; }
  .intro-actions { margin-top: 15px; }
  .enter-button { min-height: 46px; }
  .intro-hint { margin-top: 13px; }
  .explore-status { top: 86px; }
  #location-name { font-size: 26px; }
  .location-caption { font-size: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --ui-edge: 20px; }
  .site-header { top: max(10px, var(--safe-top)); }
  .wordmark { font-size: 29px; }
  .brand-note, .forest-footer, .intro .eyebrow, .intro-hint { display: none; }
  .intro { top: 76px; left: calc(26px + var(--safe-left)); right: auto; width: min(58%, 460px); max-width: calc(100% - 70px); }
  .intro h1 { font-size: clamp(29px, 4.8vw, 39px); line-height: 1.05; letter-spacing: -1.3px; margin-bottom: 12px; }
  .live-3d .intro-copy, .intro-copy { max-width: 370px; font-size: 12px; line-height: 1.55; }
  .intro-actions { gap: 16px; margin-top: 13px; }
  .enter-button { min-height: 44px; padding-inline: 14px; font-size: 12px; }
  .text-button { min-height: 44px; font-size: 11px; }
  .bottom-meta { bottom: max(2px, var(--safe-bottom)); }
  .bottom-meta > span { display: none !important; }
  .credits-link { margin-left: auto; min-height: 44px; }
  .explore-status { top: 70px; left: calc(22px + var(--safe-left)); gap: 3px; }
  #location-name { font-size: 24px; line-height: 1.2; }
  .explore-status .eyebrow { font-size: 7px; }
  .location-caption { font-size: 10px; }
  .magic-controls { left: auto; right: calc(22px + var(--safe-right)); bottom: calc(54px + var(--safe-bottom)); gap: 8px; }
  .magic-button { min-height: 46px; padding: 10px 13px; gap: 7px; }
  .magic-button > svg { width: 20px; min-width: 20px; }
  .magic-button b { font-size: 11px; }
  .magic-button small, .magic-button kbd { display: none; }
  .flight-altitude { left: calc(22px + var(--safe-left)); bottom: calc(54px + var(--safe-bottom)); flex-direction: row; }
  .pose-menu { --moves-bottom: calc(111px + var(--safe-bottom)); left: calc(22px + var(--safe-left)); bottom: var(--moves-bottom); }
  .pose-menu summary { padding: 11px 14px; font-size: 11px; }
  .pose-menu > div { position: absolute; bottom: 44px; }
  .interact-button { left: 50%; right: auto; translate: -50% 0; bottom: calc(55px + var(--safe-bottom)); max-width: min(250px, 34vw); white-space: normal; text-align: center; padding: 10px 12px; font-size: 10px; }
  .forest-notice { top: 68px; bottom: auto; width: min(310px, 45vw); left: 63%; font-size: 12px; }
}

@media (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .interact-button { left: auto; right: calc(22px + var(--safe-right)); translate: 0 0; bottom: calc(112px + var(--safe-bottom)); max-width: calc(100% - 220px); }
}

@media (max-width: 380px) {
  .site-header .wordmark { height: 44px; min-height: 44px; flex-shrink: 0; font-size: 26px; }
  .site-header .brand-dot { display: none; }
  .site-header .header-actions, .site-header .icon-button { flex-shrink: 0; }
  .site-header .icon-button { width: 44px; height: 44px; }
  .intro-actions { display: grid; grid-template-columns: max-content max-content; gap: 12px; }
  .intro-actions .enter-arrow { display: none; }
  .intro-actions .text-button { min-height: 44px; }
}

.forest-tools { position: absolute; z-index: 16; top: max(90px, calc(var(--safe-top) + 62px)); right: calc(var(--ui-edge) + var(--safe-right)); display: none; gap: 8px; }
body[data-mode="explore"] .forest-tools { display: flex; }
.forest-tools button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 10px 13px; color: var(--cream); background: #381e2cd9; border: 1px solid #d8b9ca4d; border-radius: 24px; backdrop-filter: blur(10px); font-size: 17px; }
.forest-tools button span { font-size: 11px; }
.forest-tools button svg { width: 18px; height: 18px; flex: none; }
.forest-tools button:hover { background: #503744e6; border-color: #e2c2d3; }
@media (max-width: 649px) and (orientation: portrait) {
  .forest-tools { flex-direction: column; right: calc(18px + var(--safe-right)); }
  .forest-tools button { width: 44px; height: 44px; padding: 10px; }
  .forest-tools button span { display: none; }
  .explore-status { max-width: calc(100% - 108px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .forest-tools { top: max(66px, calc(var(--safe-top) + 56px)); right: calc(22px + var(--safe-right)); gap: 6px; }
  .forest-tools button { padding-inline: 10px; }
  .forest-tools button span { font-size: 10px; }
  .forest-notice { top: 126px; }
}

.forest-unavailable #experience { background: #27161f radial-gradient(ellipse at 70% 40%, #b6829e33, transparent 65%) no-repeat; }

@media (max-width: 649px), (max-height: 500px) and (orientation: landscape) {
  .pose-menu > div { width: max-content; flex-wrap: nowrap; }
}

/* A quiet, branded arrival while the real forest assets load. */
#loading-message { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; transform: none; padding: max(28px, var(--safe-top)) 24px max(64px, var(--safe-bottom)); background: #1e0d16; color: var(--cream); text-align: center; font: 14px/1.6 var(--sans); letter-spacing: 0; overflow: hidden; }
#loading-message[hidden] { display: none; }
.loading-canopy { position: absolute; inset: 0; background: linear-gradient(#1c0c15d9, #1f0d17e6), radial-gradient(ellipse at 70% 40%, #b6829e33, transparent 65%); opacity: .58; pointer-events: none; }
.loading-story { position: relative; width: min(100%, 520px); }
.loading-brand { display: inline-flex; align-items: center; gap: 10px; color: #dbbdcd; font: 29px var(--serif); letter-spacing: -1px; }
.loading-brand svg { width: 22px; height: 27px; }
.loading-guardian { position: relative; width: 190px; height: 190px; margin: 26px auto 20px; display: grid; place-items: center; }
.loading-guardian::before { content: ''; position: absolute; inset: 24px; border-radius: 50%; background: #cf92b340; filter: blur(28px); }
.loading-guardian img { position: relative; width: 145px; height: 145px; object-fit: contain; filter: drop-shadow(0 10px 20px #0008); animation: guardian-arrival 3s ease-in-out infinite; }
.loading-orbit { position: absolute; inset: 2px; border: 1px solid #d6b9c82a; border-radius: 50%; transform: rotate(-30deg) scaleY(.8); }
.loading-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ddb0c8; box-shadow: 0 0 13px 3px #d59dbb55; top: 25%; left: 3%; animation: leaf-light 2.4s ease-in-out infinite; }
.loading-mote:nth-of-type(3) { top: 77%; left: 80%; animation-delay: -.7s; }
.loading-mote:nth-of-type(4) { top: 12%; left: 75%; animation-delay: -1.3s; }
.loading-eyebrow { font-size: 9px; letter-spacing: 2.6px; text-transform: uppercase; color: #bf9fb0; margin: 0 0 12px; }
.loading-story h2 { font: 400 clamp(29px, 5vw, 43px)/1.2 var(--serif); letter-spacing: -1px; margin: 0 0 23px; text-wrap: balance; }
.loading-story h2 em { color: #d6b5c7; }
#loading-label { margin: 0 auto; max-width: 34ch; color: #bfabb6; font-size: 12px; }
/* Loading bar: a thin rose track that fills with real download progress, a soft shimmer on the fill and a
   little bubble riding its edge. Reduced motion stills the shimmer and bubble (global rule). */
.loading-progress { --progress: 0; display: flex; align-items: center; gap: 12px; width: min(300px, 78vw); margin: 20px auto 0; }
.loading-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #f0bdd71a; box-shadow: inset 0 0 0 1px #f0bdd72e; }
.loading-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--progress) * 100%); overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, #a8618c, #e7a9cb 62%, #fbe1ee); box-shadow: 0 0 12px #f0bdd759; transition: width .4s cubic-bezier(.2,.7,.3,1); }
.loading-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, #fff7fb73 50%, transparent 100%) no-repeat; background-size: 45% 100%; animation: loading-shimmer 1.9s ease-in-out infinite; }
.loading-bubble { position: absolute; top: 50%; left: calc(var(--progress) * 100%); width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fffefe 0 16%, #ffe3f0c7 30%, #f0bdd740 60%, #f0bdd70d 72%); box-shadow: 0 0 10px #f7d3e5a6, inset 0 0 0 1px #fff4f975; transition: left .4s cubic-bezier(.2,.7,.3,1); animation: loading-bubble 2.4s ease-in-out infinite; }
.loading-percent { min-width: 4ch; color: #e7cad9; font: 400 12px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .5px; text-align: right; }
@keyframes loading-shimmer { from { background-position: -120% 0; } to { background-position: 220% 0; } }
@keyframes loading-bubble { 50% { transform: translateY(-2px) scale(1.07); } }
.loading-footnote { position: absolute; bottom: max(20px, var(--safe-bottom)); left: 24px; right: 24px; color: #97868f; font: italic 13px var(--serif); }
.loading-recovery { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.loading-recovery[hidden], .has-error .loading-progress { display: none; }
.loading-recovery button { min-height: 44px; border: 1px solid #c8adbb66; padding: 10px 18px; border-radius: 8px 20px 8px 20px; color: #ece1d5; }
.loading-recovery button:first-child { background: #d5b6c7; color: #351d2a; }
@keyframes guardian-arrival { 50% { transform: translateY(-9px) rotate(-4deg); } }
@keyframes leaf-light { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-height: 560px) { .loading-guardian { width: 115px; height: 115px; margin: 12px auto; } .loading-guardian img { width: 95px; height: 95px; } .loading-story h2 { font-size: 28px; margin-bottom: 12px; } .loading-brand { font-size: 23px; } .loading-progress { margin-top: 12px; } .loading-footnote { display: none; } #loading-message { padding-block: 16px; } }
@media (prefers-reduced-motion: reduce) { .loading-guardian img, .loading-mote, .loading-fill::after, .loading-bubble { animation: none; } .loading-fill, .loading-bubble { transition: none; } }
/* Very short screens (small phones in landscape): a smaller Mew and no eyebrow, so the bar stays in view. */
@media (max-height: 380px) { .loading-eyebrow { display: none; } .loading-guardian { width: 96px; height: 96px; margin: 6px auto; } .loading-guardian img { width: 80px; height: 80px; } }

/* Compact devices use one kit instead of several floating control clusters. */
.forest-kit, .sound-button > span, .flight-altitude button span { display: none; }
body[data-compact=true] .site-header { left: calc(20px + var(--safe-left)); right: calc(20px + var(--safe-right)); top: max(16px, var(--safe-top)); gap: 12px; }
body[data-compact=true] .wordmark { font-size: 30px; }
body[data-compact=true] .brand-note, body[data-compact=true] .forest-tools, body[data-compact=true] .forest-footer, body[data-compact=true] .bottom-meta { display: none; }
body[data-compact=true] .header-actions { gap: 0; }
body[data-compact=true] .map-button { padding: 10px 15px; min-height: 44px; background: #28141fa8; border-color: #d0b4c345; }
body[data-compact=true] .map-button span { font-size: 11px; }
body[data-compact=true][data-mode=explore] .forest-kit { display: block; }
body[data-compact=true] .forest-kit { position: absolute; z-index: 22; left: calc(20px + var(--safe-left)); bottom: calc(22px + var(--safe-bottom)); color: var(--cream); }
.forest-kit > summary { display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; gap: 9px; height: 54px; min-width: 112px; padding: 0 17px; border: 1px solid #d0b4c355; background: #331a27e8; border-radius: 27px; backdrop-filter: blur(12px); font-size: 12px; }
.forest-kit > summary::-webkit-details-marker { display: none; }
.forest-kit > summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.forest-kit > summary svg { width: 19px; color: var(--lime); }
.kit-toggle { font-size: 18px; line-height: 1; color: #c5a8b7; transition: transform .2s; }
.forest-kit[open] .kit-toggle { transform: rotate(45deg); }
.forest-kit-panel { position: absolute; bottom: 66px; left: 0; width: min(340px, calc(100vw - 40px - var(--safe-left) - var(--safe-right))); max-height: calc(100svh - 165px - var(--safe-top) - var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 20px; background: #291520f5; border: 1px solid #c9aabb4a; border-radius: 20px 20px 20px 5px; box-shadow: 0 14px 48px #12080d66; backdrop-filter: blur(18px); }
.kit-heading { margin-bottom: 16px; }
.kit-heading > span { display: block; font: 23px/1.2 var(--serif); color: #f0e5d9; }
.kit-heading small { display: block; margin-top: 6px; color: #baa4b0; font-size: 11px; }
.kit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kit-actions button { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-width: 0; height: auto; min-height: 48px; border: 1px solid #c6a3b630; border-radius: 10px; padding: 10px 12px; color: #ece0d3; background: #bb98ab0c; font: 12px var(--sans); text-align: left; }
.kit-actions button:hover { background: #c69bb220; }
.kit-actions svg { width: 18px; height: 18px; flex: none; color: #d1afc1; }
.kit-actions button > span { display: block; font-size: 12px; }
.kit-actions #sound-toggle { aspect-ratio: auto; border-radius: 10px; }
.kit-actions #portal-button { backdrop-filter: none; }
.kit-actions #portal-button b { font-size: 12px; }
.kit-actions #portal-button small { display: inline; font-size: 10px; color: #c0a7b4; }
.kit-actions kbd { display: none; }
.kit-movement { border-top: 1px solid #c6a3b625; margin-top: 14px; padding-top: 10px; }
body[data-compact=true] .forest-kit .pose-menu { position: static; display: block; margin-bottom: 7px; font-size: 12px; }
.forest-kit .pose-menu summary { min-height: 44px; border: 0; background: none; padding: 12px 0; border-radius: 0; backdrop-filter: none; color: #dcc7d2; font-size: 12px; }
.forest-kit .pose-menu > div { position: static; bottom: auto; width: 100%; max-width: 100%; display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 10px; }
.forest-kit .pose-menu button { flex: 1; border-radius: 8px; min-height: 44px; font-size: 11px; padding-inline: 8px; }
body[data-compact=true] .forest-kit .flight-altitude { position: static; display: flex; flex-direction: row; gap: 8px; opacity: 1; visibility: visible; }
.forest-kit .flight-altitude button { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; width: auto; height: 44px; border-radius: 8px; font-size: 20px; backdrop-filter: none; }
.forest-kit .flight-altitude button span { display: inline; font-size: 11px; }
body[data-compact=true] .magic-controls { left: auto; right: calc(20px + var(--safe-right)); bottom: calc(22px + var(--safe-bottom)); }
body[data-compact=true] #bloom-button { min-height: 54px; padding: 10px 20px; gap: 9px; border-radius: 27px; background: #472e3be8; }
body[data-compact=true] #bloom-button b { font-size: 13px; }
body[data-compact=true] #bloom-button small, body[data-compact=true] #bloom-button kbd { display: none; }
body[data-compact=true] #bloom-button > svg { width: 21px; height: 21px; }
body[data-compact=true] .interact-button { left: 50%; right: auto; bottom: calc(92px + var(--safe-bottom)); translate: -50% 0; max-width: calc(100% - 40px); padding: 12px 20px; font-size: 12px; text-align: center; white-space: normal; }
body[data-compact=true] .explore-status { left: calc(22px + var(--safe-left)); top: max(88px, calc(var(--safe-top) + 70px)); max-width: calc(100% - 44px); gap: 3px; }
body[data-compact=true] .explore-status .eyebrow { font-size: 7px; letter-spacing: 1.6px; }
body[data-compact=true] #location-name { font-size: 27px; line-height: 1.3; }
body[data-compact=true] .location-caption { font-size: 11px; }
body[data-compact=true] .forest-notice { top: auto; bottom: calc(154px + var(--safe-bottom)); left: 50%; width: min(360px, calc(100% - 52px)); padding: 11px 16px; border-radius: 18px; background: #28121ea3; backdrop-filter: blur(5px); font-size: 14px; }
@media (max-height: 500px) and (orientation: landscape) { body[data-compact=true] .explore-status { top: 72px; } body[data-compact=true] .location-caption { display: none; } body[data-compact=true] .forest-notice { bottom: 96px; left: 65%; width: min(330px, 48vw); } .forest-kit-panel { max-height: calc(100svh - 102px); padding: 14px 18px; } .kit-heading { display: none; } }

#realm-name { text-transform: uppercase; }

/* Mew: warm ivory, rose controls and a quiet plum frame around the living scene. */
:root { --ink: #443141; --deep: #201b29; --cream: #fff4ed; --lime: #f0bdd7; --muted: #dbc6d2; --line: rgba(246,219,234,.24); }
.wordmark { letter-spacing: -2px; }
.brand-leaf { color: #efb0cc; }
.brand-mark { width: 25px; height: 25px; display: block; flex: 0 0 25px; }
.loading-brand .brand-mark { width: 28px; height: 28px; }
@media (max-width: 380px) { .wordmark .brand-mark { width: 24px; height: 24px; flex-basis: 24px; } }
.brand-note { color: #e1cbd8; }
.intro h1 em { color: #f0bdd7; }
.enter-button { background: #efd0dd; color: #442c40; border-color: #fae2eb; border-radius: 30px; }
.enter-button:hover { background: #ffe3ef; }
.map-button, .icon-button, .magic-button, .flight-altitude button { background-color: #392c3ddc; border-color: #dbb2cd66; }
.magic-button:hover { background: #584055ed; }
.magic-controls .magic-button, .interact-button { border-radius: 24px; }
.pose-menu summary { display: flex; align-items: center; gap: 20px; background: #392c3dee; border-radius: 24px; }
/* Reserve header space above the moves button; compact Tools scrolls as a whole. */
.pose-menu > .motion-panel { position: absolute; bottom: 54px; left: 0; width: 310px; max-width: calc(100vw - 44px); max-height: min(540px, calc(100svh - var(--moves-bottom) - 54px - max(88px, calc(var(--safe-top) + 60px)))); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 16px; background: #332639f5; border: 1px solid #c49ab45e; border-radius: 18px; box-shadow: 0 18px 50px #160e2060; backdrop-filter: blur(16px); }
.pose-menu .motion-group-label { grid-column: 1 / -1; color: #ddbacf; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; padding: 10px 2px 3px; }
.pose-menu .motion-group-label:first-child { padding-top: 0; }
.pose-menu button { background: #49364e; border-color: #d5b6c930; border-radius: 10px; min-height: 44px; white-space: normal; padding: 8px; }
.pose-menu button:hover { background: #654761; }
.pose-menu button[aria-pressed=true] { background: #efc3d9; color: #3f2940; }
.forest-kit-panel { background: #302435f7; border-color: #cba6bd5c; }
.forest-kit > summary { background: #362b3bea; border-color: #caa7bb77; }
.forest-kit .pose-menu > .motion-panel { box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0 0 10px; display: grid; max-height: none; }
.forest-kit .pose-menu summary { color: #f0d2e1; }
#archive-dialog { background: #f7f0e8; border-color: #d2bacbaa; scrollbar-color: #c0a2b6 transparent; }
#archive-dialog::backdrop { background: #181020c9; }
.archive-title, .archive-layout h3, .film-item h3, .timeline-item h3 { color: #493344; }
.archive-eyebrow { color: #8b5e79; }
.archive-intro, .archive-layout p, .timeline-item p, .film-item p { color: #6c5b66; }
.source-link { color: #8e456e; }
.archive-tabs button { background: #59394f; border-color: #59394f; color: #fff4ed; border-radius: 22px; }
.archive-map, .archive-close { color: #573a50; background: #f7f0e8ed; border-color: #cdb6c6; }
.mew-portrait { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: none; }
.mew-portrait img { position: relative; z-index: 1; width: 100%; padding: 2%; filter: drop-shadow(0 14px 16px #8e587d18); }
.portrait-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid #daa9c04f; background: radial-gradient(circle at 35% 25%, #fffaf2, #f0d7e2 60%, #d9bad240); box-shadow: inset -10px -8px 35px #ca9ab324; }
.portrait-ring::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border-top: 3px solid #fff8f0; transform: rotate(-35deg); }
.portrait-caption { text-align: center; font-size: 10px!important; letter-spacing: 1.1px; color: #947488!important; }
.form-leaf { border-radius: 50%!important; transform: none!important; }
.form-leaf-pink { background: #e4a6c4!important; }
.form-leaf-blue { background: #79b7d5; }
.mew-card-portrait { margin: 0; padding: 16px 38px; text-align: center; }
.mew-card-portrait img { max-width: 260px; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 24px #64475929; }
.mew-card-portrait figcaption { font-size: 10px; line-height: 1.6; margin-top: 16px; color: #8c6d7f; }
.mew-film .film-number { display: grid; place-items: center; width: 68px; height: 68px; color: #ad7797; border: 1px solid #d8bed0; border-radius: 50%; font-size: 26px; }
.mew-film .film-subtitle { color: #94657f; font-style: italic; margin-bottom: 12px; }
/* Mew's world, painted, behind the plum tint (the celeb-i.com recipe). The tiny inline copy shows at once;
   portrait phones get a tall crop centred on the light. */
.loading-canopy { background: radial-gradient(ellipse at 60% 45%, #ad739c24, transparent 65%), linear-gradient(#241f2ba6, #2b2131c4), url('assets/loading/mew-world-wide.webp?v=1') center / cover, url('data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAADQBQCdASogABIAPtFcqU4oJSQiKAqpABoJYgC2yDT1rviFIOijctzH46zjr5M29dxaQQrl0gyAAP70Uvre6OElRTCUJRG/7TwdOT1Afi/6FrMAJQzfEfsarpxE5H6Z0OkZhXDzY8lUHE26vqiS9L7xFmNWoX+H+HvktckcQRBw0wPo40ncHAbK8hNtpAAA') center / cover; opacity: .66; }
@media (orientation: portrait) and (max-width: 700px) { .loading-canopy { background: radial-gradient(ellipse at 60% 45%, #ad739c24, transparent 65%), linear-gradient(#241f2ba6, #2b2131c4), url('assets/loading/mew-world-tall.webp?v=1') center / cover, url('data:image/webp;base64,UklGRnYAAABXRUJQVlA4IGoAAAAQBACdASoMABYAPtFUo0uoJKMhsAgBABoJaAB3AAQEUZ1f8q+2ONPwxAD+TPvIOP5xug8+WCOARdLzCEcrskhD1J0E4So1UR+3Uqxa5CrMvFtRYEcX3997Oediv8/4mZxAafXOmKewAAAA') center / cover; } }
#loading-message { background: #261f2b; }
.loading-guardian img { filter: drop-shadow(0 9px 18px #efa6d24d); }
.world-transition { background: radial-gradient(circle at 50% 56%, #fff7fb 0%, #f6d3ea 26%, #dc9ccb 58%, #85507d 100%); }
/* The warp between worlds takes the colour of the Mew being played: pink Mew or blue Shiny Mew. */
body[data-form=shiny] .world-transition { background: radial-gradient(circle at 50% 56%, #f5fbff 0%, #c9e8fc 26%, #74bdf0 58%, #1c4d85 100%); }
.world-transition::after { content: ''; position: absolute; left: 50%; top: 56%; width: 18vmax; height: 18vmax; margin: -9vmax 0 0 -9vmax; border-radius: 50%; border: 2px solid #fff; opacity: 0; box-shadow: 0 0 40px #fff9, inset 0 0 30px #fff7; }
@media (prefers-reduced-motion: no-preference) { .travelling .world-transition::after { animation: warp-ring 1.1s ease-out both; } }
/* A world built behind the passage cover (forest3d warm): the same ring keeps pulsing until the cover has faded. */
@media (prefers-reduced-motion: no-preference) { .world-warming .world-transition::after { animation: warp-ring 1.1s ease-out infinite both; } }
@keyframes warp-ring { 0% { opacity: .9; transform: scale(.2); } 70% { opacity: .35; } 100% { opacity: 0; transform: scale(4.5); } }
@media (max-width: 649px) { .mew-card-portrait img { max-width: 200px; } .mew-film .film-number { width: 44px; height: 44px; font-size: 20px; } .mew-film { grid-template-columns: 44px 1fr; gap: 14px; } .intro-copy { max-width: 225px!important; } .intro h1 { font-size: clamp(39px,10vw,54px); } }

/* Phones keep Mew's moves inside Tools: shape it as a button. */
.forest-kit .pose-menu > summary { justify-content: space-between; padding-inline: 14px; border-radius: 10px; background: #bb98ab0c; box-shadow: inset 0 0 0 1px #c6a3b630; }
/* Every move glows until it has been tried once, and Mew's moves glows non stop, open or closed,
   while it shows a move that is still new. Reduced motion keeps a steady glow instead of a pulse.
   Separate rules, so a browser without :has still lights the moves themselves. */
.motion-panel [data-action].is-new { box-shadow: inset 0 0 0 1px #f0bdd7b3, 0 0 14px 1px #f0bdd74d; }
.pose-menu:has(.motion-panel .is-new:not([hidden])) > summary { box-shadow: inset 0 0 0 1px #f0bdd7b3, 0 0 14px 1px #f0bdd74d; }
@media (prefers-reduced-motion: no-preference) {
  .motion-panel [data-action].is-new { animation: moves-glow 2.4s ease-in-out infinite; }
  .pose-menu:has(.motion-panel .is-new:not([hidden])) > summary { animation: moves-glow 2.4s ease-in-out infinite; }
}
@keyframes moves-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px #f0bdd773, 0 0 4px 0 #f0bdd71f; }
  50% { box-shadow: inset 0 0 0 1px #f7d3e5e6, 0 0 16px 2px #f0bdd766; }
}

/* Intro credit: a quiet bottom-right pill that leaves with the intro. */
.dev-credit { position: absolute; z-index: 18; right: calc(var(--ui-edge) + var(--safe-right)); bottom: calc(145px + var(--safe-bottom)); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 7px 17px; color: var(--cream); text-decoration: none; background: #392c3dcc; border: 1px solid #dbb2cd59; border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .6s, visibility .6s, background-color .2s, border-color .2s; }
.dev-credit-label { font-size: 7px; line-height: 1.3; letter-spacing: 1.6px; text-transform: uppercase; color: #cdb3c2; }
.dev-credit-site { font: 400 13px/1.2 var(--serif); white-space: nowrap; }
.dev-credit-site span { margin-left: 4px; font: 10px var(--sans); color: #e7c3d6; }
.dev-credit:hover { background-color: #584055ed; border-color: #f0bdd799; }
.dev-credit:focus-visible { outline-offset: 4px; }
body[data-mode=explore] .dev-credit { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-height: 690px) and (min-width: 650px) { .dev-credit { bottom: calc(116px + var(--safe-bottom)); } }
@media (max-height: 500px) and (orientation: landscape) { .dev-credit { bottom: calc(52px + var(--safe-bottom)); } }
body[data-compact=true] .dev-credit { right: calc(20px + var(--safe-right)); bottom: calc(27px + var(--safe-bottom)); }

/* Tools panel: one plain, opaque scroll surface. Blur layers nested inside a scroller can leave
   whole regions unpainted in iOS WebKit; a fully opaque plum keeps the old look without them. */
#forest-kit .forest-kit-panel { max-height: var(--kit-room, calc(100svh - 165px - var(--safe-top) - var(--safe-bottom))); background-color: #2f2334; backdrop-filter: none; -webkit-backdrop-filter: none; }
#forest-kit .forest-kit-panel * { backdrop-filter: none; -webkit-backdrop-filter: none; will-change: auto; }
#forest-kit .forest-kit-panel .motion-panel { overflow: visible; overscroll-behavior: auto; max-height: none; }
/* Tools and Mew's moves open by a plain display change. iOS hides closed <details> content with
   content-visibility, and a real iPhone can leave the nested moves list unpainted when it is
   revealed inside the scrolling panel, so neither collapsible uses that switch here. */
#forest-kit::details-content { content-visibility: visible; }
#forest-kit .pose-menu::details-content { content-visibility: visible; }
#forest-kit:not([open]) > .forest-kit-panel, #forest-kit .pose-menu:not([open]) > .motion-panel { display: none; }
#forest-kit .forest-kit-panel button:active { transform: none; }
/* The play area is a game surface: a long press never starts text selection or the iOS callout, which would
   cancel a held Rise or Lower. Dialogs (archive, account, photo booth) sit outside it and stay selectable. */
#experience, #experience *, button, button *, summary, summary *, [role="button"] {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;
}
/* Allow tray scrolling, but reserve pinch and repeated taps for the game, never page zoom. */
#experience, #experience button, #experience summary, dialog button, dialog summary, #tutorial-overlay button { touch-action: pan-y; }
#experience { overscroll-behavior: none; }
/* Rise and Lower are hold buttons: a drag that starts on them never scrolls the panel instead. */
#forest-kit [data-altitude] { touch-action: none; }
/* Holding Rise or Lower in Tools: the panel steps aside so Mew can be watched; only the held button stays. */
#forest-kit .forest-kit-panel.is-peeking { background-color: transparent; border-color: transparent; box-shadow: none; }
#forest-kit .forest-kit-panel.is-peeking * { visibility: hidden; }
#forest-kit .forest-kit-panel.is-peeking [data-altitude].is-held, #forest-kit .forest-kit-panel.is-peeking [data-altitude].is-held * { visibility: visible; }
/* Landscape phones: a wider panel with actions and movement side by side, still scrolling as one. */
@media (max-height: 500px) and (orientation: landscape) {
  #forest-kit .forest-kit-panel { width: min(620px, calc(100vw - 40px - var(--safe-left) - var(--safe-right))); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: start; }
  #forest-kit .kit-movement { margin-top: 0; padding: 0 0 0 18px; border-top: 0; border-left: 1px solid #c6a3b625; }
  #forest-kit .kit-actions button { padding-inline: 10px; gap: 7px; }
}
/* Wide enough landscape phones keep "Bubble passage" on one line; narrower ones let it wrap inside. */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 620px) {
  #forest-kit .kit-actions #portal-button b { white-space: nowrap; }
}
/* Short landscape phones: the portrait phone headline (max-width 649px) must not apply, or the intro
   grows under the Tools button. The very shortest screens keep the headline and actions only. */
@media (max-height: 500px) and (orientation: landscape) {
  .intro h1 { font-size: clamp(29px, 4.8vw, 39px); }
  .live-3d .intro-copy, .intro-copy { max-width: 370px !important; }
}
@media (max-height: 350px) and (orientation: landscape) {
  .intro .intro-copy { display: none; }
}