/* Game surfaces do not select text or show iOS long-press callouts. Reading and form fields stay native. */
#experience, #tutorial-overlay, :is(button, summary, [role="button"], .photo-choice), :is(button, summary, [role="button"], .photo-choice) * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
}
/* Allow vertical menu scrolling, but not browser pinch or double-tap zoom on controls.
   The forest canvas and leaf stick keep their own touch-action: none for camera and flight gestures. */
#experience, #tutorial-overlay, html body :is(button, summary, [role="button"], .photo-choice) { touch-action: pan-y; }
#experience [data-altitude] { touch-action: none; }

@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:#12251d;--deep:#0a1c17;--cream:#f3f0dd;--lime:#cfdfab;--muted:#c0cbb4;--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:#122b24}#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:#15332545;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:#15332545;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:#dee4d0;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:#243920;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 #06100a25;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:#b9c7b1;margin-top:20px;display:flex;align-items:center;gap:7px}.mouse-indicator{height:14px;width:9px;display:inline-block;border:1px solid #aebea1;border-radius:5px;position:relative}.mouse-indicator::before{content:'';position:absolute;top:2px;width:1px;height:4px;background:#aebea1;left:3px}
#celebi{position:absolute;z-index:4;width:245px;height:245px;pointer-events:none;will-change:transform;filter:drop-shadow(0 10px 20px #17371460)}#celebi img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.celebi-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:#eff5dbd9;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:#e3f2c380;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:#bfc8af}.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:#b8c4aa;white-space:nowrap;flex:1;transition:color .25s}.journey-node{width:9px;height:9px;border-radius:50%;background:#2b4432;border:1px solid #9ead7e;box-shadow:0 0 0 5px #132e21}.journey-nav button.is-current{color:var(--cream)}.journey-nav button.is-current .journey-node{background:#dae7b6;box-shadow:0 0 0 5px #132e21,0 0 0 6px #a6ba78}.journey-nav button.is-visited .journey-node{background:#9bad7a}.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:#b8c4aa}.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:#a4b398}.bottom-meta .flight-tip{display:none}.flight-tip>span{margin:0 9px}.credits-link{font-size:8px;letter-spacing:.5px;padding:7px 0;color:#b6c3a6}.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:#ced9bf}.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 #e3edc852;border-radius:50%;background:#193a2f77;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:#80986570;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:#132c21c9;backdrop-filter:blur(8px);border:1px solid #dbe5ba55;border-radius:30px;white-space:nowrap;font-size:11px;box-shadow:0 6px 25px #00170940;min-height:42px;transition:background .2s,border-color .2s}.world-hotspot:hover,.world-hotspot:focus-visible{background:#395335;border-color:#dce6b9}.hotspot-number{height:24px;width:24px;display:grid;place-items:center;border:1px solid #cbdbab70;border-radius:50%;font-size:8px;color:var(--lime)}.world-hotspot.is-near{border-color:#cce3a5}.joystick{display:none;position:absolute;left:24px;bottom:165px;width:78px;height:78px;border:1px solid var(--line);background:#14382855;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:#c4d6a680;border:1px solid #e2f0c470}.loading-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;border:1px solid var(--line);background:#11271fe6;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,#0b251b66,transparent 20%,transparent 57%,#0d281cc9)}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 #b6c69d5e;border-radius:7px;background:#f0edde;color:var(--ink);box-shadow:0 25px 150px #0009;overflow:auto;overscroll-behavior:contain;scrollbar-color:#9ba98a transparent}#archive-dialog::backdrop{background:#06150ed0;backdrop-filter:blur(9px)}.archive-close{position:sticky;z-index:5;top:15px;margin:15px 15px -59px auto;display:grid;place-items:center;background:#e9e9d8ee;border:1px solid #b3bea5;color:#233a29;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:#64714f;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:#58624d;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 #40552f26)}.archive-layout p{font-size:16px;line-height:1.85}.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #344e2c24;border-bottom:1px solid #344e2c24;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:#768266;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:#496b34;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:#253f2e;border:1px solid #253f2e;border-radius:3px;color:#f2f0dd;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 #49653629;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:#59654e}.timeline-year,.timeline-item time{font:400 27px/1.2 var(--serif);color:#668246}.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 #49653629;display:grid;gap:16px}.film-year,.film-number{font:400 38px var(--serif);color:#9cab85}.film-meta,.film-item small{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7a8869;margin-bottom:8px}.film-subtitle,.film-place{font-size:12px;color:#667d50}.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 #23392123;transition:box-shadow .25s}.tcg-card:hover img{box-shadow:0 13px 25px #2339213b}.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:#6b785d}.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 #23392123;margin:auto}.back-link{display:inline-flex;align-items:center;gap:8px;color:#536e3c;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 #6b805244;border-radius:3px;min-height:74px;background:#e6e9d8;color:#203b29;transition:background .2s}.map-destination:hover{background:#d6dfc4}.map-destination strong{display:block;font:400 23px var(--serif)}.map-destination small{display:block;font-size:12px;color:#6f7a60;margin-top:4px}.map-number{font-size:12px;color:#788e5d}.map-destination>span:last-child{margin-left:auto}.archive-content-note,.archive-note{font-size:12px;color:#7d866f;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:#f0edde;color:#10251e}
@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,#061b15b5,#07211870 70%,#08251920)}.scene-vignette{background:linear-gradient(180deg,#061c17a8,transparent 17%,transparent 50%,#061c17db 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:#71835c;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%)}#celebi{transition:width .6s,height .6s}#celebi img{transform:scaleX(var(--facing,1));transition:transform .28s}body[data-mode=explore] #celebi{width:160px;height:160px}.archive-close:focus-visible,#archive-dialog button:focus-visible,#archive-dialog a:focus-visible{outline-color:#4e6b38}
@media(max-width:649px){#celebi{width:160px;height:160px}.intro-copy{max-width:min(240px,calc(100vw - 175px));font-size:13px}body[data-mode=explore] #celebi{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}}

#celebi-sprite{display:none;position:absolute;inset:0;z-index:1;background:url("assets/celebi-hover.png") 0 0/400% 400% no-repeat;transform:scaleX(var(--facing,1));transition:transform .28s}.has-sprite #celebi-sprite{display:block}#celebi.has-sprite img{visibility:hidden}.world-hotspot[hidden]{display:none}
.tcg-card img{height:auto}
.pose-menu{position:absolute;z-index:15;left:54px;bottom:223px;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:#28432ce6;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:#163223e8;font-size:11px}.pose-menu button[aria-pressed=true]{color:#152e20;background:var(--lime)}body[data-mode=explore] .pose-menu{display:block}@media(max-width:649px){.pose-menu{left:24px;bottom:318px}.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 #celebi,.live-3d #world-hotspots,.live-3d .character-note{display:none}.live-3d .scene-shade{background:linear-gradient(90deg,#071e19cf,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:#183e2bc9;border:1px solid #d2dfb247;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:#355c3ae6;border-color:#dae9bb}.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:#183e2bab;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}.forest-notice{position:absolute;z-index:14;left:50%;bottom:295px;translate:-50% 0;width:min(440px,calc(100% - 48px));text-align:center;color:#f0ecd4;font:italic 16px/1.6 var(--serif);text-shadow:0 2px 9px #0d2019;pointer-events:none;opacity:0;transition:opacity .5s}.forest-notice.is-visible{opacity:1}.world-transition{position:absolute;inset:0;z-index:25;background:#e5ecc8;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}.forest-notice{top:205px;bottom:auto;font-size:14px}.live-3d .scene-shade{background:linear-gradient(90deg,#071e19c4,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:#e9e9d8ee;border:1px solid #a3b18b66;border-radius:24px;color:#29432f;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, .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 { left: calc(24px + var(--safe-left)); bottom: calc(318px + var(--safe-bottom)); }
  .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: 66px; 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 { left: calc(22px + var(--safe-left)); bottom: calc(111px + var(--safe-bottom)); }
  .pose-menu summary { padding: 11px 14px; font-size: 11px; }
  .pose-menu > div { position: absolute; bottom: 44px; }
  .forest-notice { top: 68px; bottom: auto; width: min(310px, 45vw); left: 63%; font-size: 12px; }
}

/* Portrait phones keep both entry actions in the text column, clear of Celebi. */
@media (max-width: 649px) and (orientation: portrait) {
  .intro .intro-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* The shortest phone screens on their side: the intro keeps its title and buttons, so Enter the forest stays clear of
   the Tools button below it (Tools holds Account and Music on the intro). */
@media (max-height: 360px) and (orientation: landscape) {
  .intro-copy, .live-3d .intro-copy { display: none; }
}

@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: #183e2bd9; border: 1px solid #d2dfb24d; 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: #31563ce6; border-color: #dae9bb; }
@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: #122b24 url('assets/loading/forest-wide.webp') center / cover 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: #0a211a; color: var(--cream); text-align: center; font: 14px/1.6 var(--sans); letter-spacing: 0; overflow: hidden; }
#loading-message[hidden] { display: none; }
/* The painting arrives as a light WebP (a tall crop on phones); a tiny built-in copy gives colour at once. */
.loading-canopy { position: absolute; inset: 0; background: linear-gradient(#082018d9, #092319e6), url('assets/loading/forest-wide.webp') center / cover, url('data:image/webp;base64,UklGRooAAABXRUJQVlA4IH4AAACwAwCdASoYAA4APu1iqU2ppaQiMAgBMB2JQAAIfn+8hB8ozGvAAAD+6+et6TEv2+FfpNEcoCE2++oaZiHa2Xony9gg5uozQfv6Xrf9uL5eLpLVXTXuJmKdEKJQFVmScZTV1GehqaZcYkcuHeRifnGAshMHThDLgDm2Wv6gAAA=') center / cover; opacity: .58; pointer-events: none; }
@media (orientation: portrait) and (max-width: 700px) { .loading-canopy { background-image: linear-gradient(#082018d9, #092319e6), url('assets/loading/forest-tall.webp'), url('data:image/webp;base64,UklGRooAAABXRUJQVlA4IH4AAACwAwCdASoYAA4APu1iqU2ppaQiMAgBMB2JQAAIfn+8hB8ozGvAAAD+6+et6TEv2+FfpNEcoCE2++oaZiHa2Xony9gg5uozQfv6Xrf9uL5eLpLVXTXuJmKdEKJQFVmScZTV1GehqaZcYkcuHeRifnGAshMHThDLgDm2Wv6gAAA='); } }
.loading-story { position: relative; width: min(100%, 520px); }
.loading-brand { display: inline-flex; align-items: center; gap: 10px; color: #d5e2b6; 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: #bddc8540; 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 #c9dcb32a; border-radius: 50%; transform: rotate(-30deg) scaleY(.8); }
.loading-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #d5eaa3; box-shadow: 0 0 13px 3px #c9ed8555; 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: #b2c698; 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: #caddae; }
/* Progress: a slim lime vine that fills from the left, a glowing mote at its tip, and the stage with its percentage. */
.loading-progress { position: relative; width: min(280px, 72vw); height: 4px; margin: 2px auto 0; border-radius: 2px; background: #cfdfab24; box-shadow: inset 0 0 0 1px #cfdfab14; }
.loading-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5f8a4b, #a9c784 60%, #dfeebb); box-shadow: 0 0 12px #cfdfab55; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.loading-progress-fill::after { content: ''; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #f2f8df; box-shadow: 0 0 10px 3px #cfdfab80; animation: leaf-light 1.8s ease-in-out infinite; }
/* Until the first file arrives, a soft light sweeps the empty track so the screen never looks stuck. */
.loading-progress::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, #cfdfab4d, transparent) no-repeat; background-size: 40% 100%; opacity: 0; transition: opacity .3s; animation: loading-sweep 1.6s ease-in-out infinite; }
.loading-progress[aria-valuenow="0"]::before { opacity: 1; }
@keyframes loading-sweep { from { background-position: -67% 0; } to { background-position: 167% 0; } }
.loading-meter { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 14px auto 0; max-width: 40ch; color: #afc3a7; font-size: 12px; }
.loading-percent { min-width: 4ch; text-align: left; color: #cfdfab; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.loading-footnote { position: absolute; bottom: max(20px, var(--safe-bottom)); left: 24px; right: 24px; color: #829b85; 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, .has-error .loading-percent { display: none; }
.loading-recovery button { min-height: 44px; border: 1px solid #bfcea766; padding: 10px 18px; border-radius: 8px 20px 8px 20px; color: #e7ecd5; }
.loading-recovery button:first-child { background: #cbdcaf; color: #183a29; }
@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-footnote { display: none; } #loading-message { padding-block: 16px; } }
@media (prefers-reduced-motion: reduce) { .loading-guardian img, .loading-mote, .loading-progress-fill::after, .loading-progress::before { animation: none; } }

/* 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: #102c22a8; border-color: #c4d6ae45; }
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 #c4d6ae55; background: #14392be8; 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: #b7cba2; 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: #102e24f5; border: 1px solid #bad0a34a; border-radius: 20px 20px 20px 5px; box-shadow: 0 14px 48px #02181066; backdrop-filter: blur(18px); }
.kit-heading { margin-bottom: 16px; }
.kit-heading > span { display: block; font: 23px/1.2 var(--serif); color: #f0efd9; }
.kit-heading small { display: block; margin-top: 6px; color: #aebf9f; 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 #b6cd9c30; border-radius: 10px; padding: 10px 12px; color: #e5ecd3; background: #acc3910c; font: 12px var(--sans); text-align: left; }
.kit-actions button:hover { background: #b5cf9220; }
.kit-actions svg { width: 18px; height: 18px; flex: none; color: #c4d8a8; }
.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: #b2c5a2; }
.kit-actions kbd { display: none; }
.kit-movement { border-top: 1px solid #b6cd9c25; 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: #acc3910c; box-shadow: inset 0 0 0 1px #b6cd9c30; padding: 12px 14px; border-radius: 10px; backdrop-filter: none; color: #d6e0c3; 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: #284d32e8; }
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] .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: #0e2c21a3; backdrop-filter: blur(5px); font-size: 14px; }
/* Edge lines get the phone caption's backing everywhere: flying outward puts pale fog behind the words. */
.forest-notice.is-backed { padding: 10px 16px; border-radius: 18px; background: #0e2c21a3; backdrop-filter: blur(5px); }
/* The Leaf passage as a Time Ripple: crystal shards in this Celebi's own colour (green, or pink for Shiny) open out over the cover,
   with one soft white flash as the map changes. Reduced motion keeps the plain cover, tinted the same way.
   Timings match forest3d (the map switches at .5 s, the cover lifts at 1.1 s). */
.world-transition { --ripple-edge: #8fd35ccc; --ripple-light: #e4fd97e6; --ripple-soft: #b5e57b99; }
body[data-form=shiny] .world-transition { background: #f4e3ea; --ripple-edge: #d06caacc; --ripple-light: #ffdef7e6; --ripple-soft: #f0cee499; }
@media (prefers-reduced-motion: no-preference) {
  .travelling .world-transition { overflow: hidden; }
  .travelling .world-transition::before,.travelling .world-transition::after { content: ""; position: absolute; inset: -25%; pointer-events: none; }
  .travelling .world-transition::before { background: repeating-conic-gradient(from 4deg, transparent 0 7deg, var(--ripple-edge) 7deg 8.5deg, var(--ripple-light) 8.5deg 9.3deg, transparent 9.3deg 16deg), repeating-conic-gradient(from 11deg, transparent 0 18deg, var(--ripple-soft) 18deg 20deg, transparent 20deg 23deg); -webkit-mask-image: radial-gradient(circle, transparent 10%, #000 24%, #000 42%, transparent 62%); mask-image: radial-gradient(circle, transparent 10%, #000 24%, #000 42%, transparent 62%); animation: time-ripple-shards 1.1s cubic-bezier(.3, .1, .3, 1) both; }
  .travelling .world-transition::after { background: radial-gradient(circle, #fff 0, #fffef0 35%, #fffef000 70%); opacity: 0; animation: time-ripple-flash 1.1s ease-in-out both; }
  @keyframes time-ripple-shards { 0% { transform: scale(1) rotate(0); opacity: 0; } 20% { opacity: 1; } 75% { opacity: .85; } 100% { transform: scale(2.6) rotate(10deg); opacity: 0; } }
  @keyframes time-ripple-flash { 0%, 25% { opacity: 0; } 45% { opacity: .6; } 70%, 100% { opacity: 0; } }
}
@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 { padding: 14px 18px; } .kit-heading { display: none; } }

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

/* Tools panel: one plain, opaque scroll surface. Blur layers nested inside a scroller can leave
   whole regions unpainted in iOS WebKit; a fully opaque green 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: #102e24; 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 button:active { transform: none; }
/* 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 #b6cd9c25; }
}

/* Readable floating controls over bright scenery, as on m-ew.com: more solid glass. */
.map-button, .icon-button, .magic-button, .flight-altitude button, .site-header .account-button { background-color: #183e2bdc; border-color: #d2dfb266; }
body[data-compact=true] .map-button { background-color: #102c22dc; }
/* Opening screen credit, as on m-ew.com: 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: #14392bcc; border: 1px solid #d2dfb259; 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: #b8c9a8; }
.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: var(--lime); }
.dev-credit:hover { background-color: #31563ce6; border-color: #dae9bb99; }
.dev-credit:focus-visible { outline-offset: 4px; }
body[data-mode=explore] .dev-credit { opacity: 0; visibility: hidden; pointer-events: none; }
@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)); }

/* Celebi's moves: a panel of groups, each its own two column grid, so every group keeps its role on iOS.
   --moves-bottom is where the button sits, so the panel measures its room above it. */
.pose-menu { --moves-bottom: 223px; bottom: var(--moves-bottom); }
@media (max-width: 649px) { .pose-menu { --moves-bottom: calc(318px + var(--safe-bottom)); } }
@media (max-width: 380px) { .pose-menu { --moves-bottom: calc(111px + var(--safe-bottom)); } }
.pose-menu > .motion-panel { position: absolute; bottom: 54px; left: 0; width: 310px; max-width: calc(100vw - 44px - var(--safe-left) - var(--safe-right)); 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; gap: 12px; padding: 16px; background: #102e24f5; border: 1px solid #bad0a34a; border-radius: 18px; box-shadow: 0 18px 50px #02181066; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.motion-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.motion-group[hidden], .pose-menu .motion-panel button[hidden] { display: none; }
.pose-menu .motion-group-label { grid-column: 1 / -1; color: #aebf9f; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; padding: 0 2px 1px; }
.pose-menu .motion-panel button { min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #b6cd9c30; border-radius: 10px; background: #1b4330; color: var(--cream); font-size: 11px; line-height: 1.25; white-space: normal; }
.pose-menu .motion-panel button:hover { background: #2a5238; }
.pose-menu .motion-panel button[aria-pressed=true] { background: var(--lime); color: #152e20; }
/* A here move (offered only where something answers it) spans the panel and says why on a second line. */
.pose-menu .motion-panel button.has-reason { grid-column: 1 / -1; display: grid; gap: 3px; justify-items: start; text-align: left; padding: 8px 10px; }
.pose-menu .motion-panel .move-label { font-size: 12px; font-weight: 600; }
.pose-menu .motion-panel .move-reason { font-size: 12px; line-height: 1.3; color: #cfdcbc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.forest-kit .pose-menu > .motion-panel { position: static; width: 100%; max-width: 100%; max-height: none; display: grid; padding: 4px 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* Every move glows until it has been tried once, and the moves button glows while it holds 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 #cfdfabb3, 0 0 14px 1px #cfdfab4d; }
.pose-menu:has(.motion-panel .is-new:not([hidden])) > summary,
.forest-kit:has(.motion-panel .is-new:not([hidden])) > summary { box-shadow: inset 0 0 0 1px #cfdfabb3, 0 0 14px 1px #cfdfab4d; }
@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,
  .forest-kit: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 #cfdfab73, 0 0 4px 0 #cfdfab1f; }
  50% { box-shadow: inset 0 0 0 1px #e4efcfe6, 0 0 16px 2px #cfdfab66; }
}
/* Tools and Celebi'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 tray, so neither collapsible uses that switch here. */
#forest-kit .forest-kit-panel .motion-panel { overflow: visible; overscroll-behavior: auto; max-height: none; }
#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; }
/* Bloom, Rise and Lower hide when they could not do anything (js/action-controls.js), but keep their place, so the
   Leaf passage button and the other arrow never jump. */
.magic-button[hidden], .flight-altitude button[hidden] { display: flex; visibility: hidden; }
/* The place name and its caption stay legible over a bright dusk sky or pale bark: a soft dark halo under the text and a faint
   scrim behind the block (never a box). */
.explore-status { text-shadow: 0 1px 2px #061b15f2, 0 0 8px #061b15cc, 0 0 18px #061b1599; }
.explore-status::before { content: ''; position: absolute; z-index: -1; inset: -16px -48px -16px -30px; pointer-events: none;
  background: radial-gradient(closest-side, #061b1580, #061b1540 60%, transparent); }

/* A set piece's soft cut (Trace the rings): a warm dusk vignette, darkest at the edges, over the scene and under every control. */
.stage-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 48%, #3b2416eb 0%, #2a180ff5 55%, #150b07 100%); }