/* World map and worlds screens (T6). Ported from the approved T2 review screens (docs/world-map/review/screen.css).
   Tokens and fonts are the stage screens' own files. Friend chip crops and the coming-soon silhouette are placeholders. */
@import url('../stage-screens/tokens.css');
@font-face{font-family:'DM Sans';src:url('../stage-screens/dm-sans.woff') format('woff');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../stage-screens/courier-prime-bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --cream:#FFF7EB;--charcoal:#262523;--leaf:#A9C797;--pink:#ED8796;--sky:#79A9BE;--butter:#F4D889;--soft:#E8F0D9;
  --courier:'Courier Prime','Courier New',Courier,monospace;--sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disc:clamp(52px,8.5vmin,84px);--row:calc(var(--disc)*2);--chip:max(24px,calc(var(--disc)*.43));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--cream);color:var(--charcoal);font-family:var(--sans);font-size:16px;line-height:1.4;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:4px}
button,a{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Game frame: same cream bar, charcoal border and blurred scene as the stage screens. */
.game{position:relative;width:100%;max-width:1080px;height:calc(100svh - 8px);max-height:780px;border:4px solid var(--charcoal);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:var(--sky)}
.bar{flex:none;height:56px;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--cream);border-bottom:2px solid var(--charcoal)}
.bar img{width:160px;height:auto;display:block;flex:none}
.bar .slogan{font:700 14px/1.05 var(--courier);white-space:nowrap}
@media(max-width:760px){.bar img{width:140px}}
@media(max-width:600px){.bar{padding:0 8px}.bar img{width:130px}.bar .slogan{font-size:12px;white-space:normal;width:120px}}
.scene{position:relative;flex:1;min-height:0;display:flex}
.scene:before{content:"";position:absolute;inset:-8px;background:url('../assets/landscape-v03-calm.png') center/cover;filter:blur(3px) saturate(.9)}
.scene:after{content:"";position:absolute;inset:0;background:rgba(121,169,190,.22)}
.panel{position:relative;z-index:1;flex:1;min-width:0;min-height:0;margin:10px;padding:10px 12px;background:var(--cream);border:2px solid var(--charcoal);border-radius:8px;box-shadow:4px 4px 0 var(--charcoal);overflow:auto;display:grid;gap:8px 12px;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "side";grid-template-rows:auto auto auto;align-content:start}
@media(min-width:640px) and (min-aspect-ratio:6/5) and (min-height:330px){
  .panel.has-side .main{min-height:0}
  .panel.has-side{grid-template-columns:minmax(0,1fr) var(--sidew,216px);grid-template-areas:"top side" "main side";grid-template-rows:auto minmax(0,1fr);align-content:stretch}
}
.panel.fill{grid-template-areas:"top" "main";grid-template-rows:auto minmax(0,1fr);align-content:stretch}
.top{grid-area:top;display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap}
.top h1{margin:0;font:700 22px/1.1 var(--courier);letter-spacing:-.02em}
.pill{display:inline-block;padding:3px 10px;background:var(--butter);border:2px solid var(--charcoal);border-radius:999px;font:700 12px/1.2 var(--courier);letter-spacing:.04em;white-space:nowrap}
.main{grid-area:main;min-width:0;position:relative}
.panel.fill .main{min-height:0}
.side{grid-area:side;min-width:0}

/* Buttons: pink primary with hard shadow as in the stage screens; secondary on cream. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 16px;border:2px solid var(--charcoal);border-radius:6px;background:var(--cream);font:700 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--charcoal);transition:transform var(--lucy-feedback-duration,150ms),box-shadow var(--lucy-feedback-duration,150ms)}
.btn.primary{background:var(--pink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--charcoal)}
.btn[disabled],.btn[aria-disabled=true]{background:var(--cream);border-style:dashed;box-shadow:none;cursor:not-allowed}
.btn svg{width:16px;height:16px;flex:none}
:is(a,button):focus-visible{outline:3px solid var(--charcoal);outline-offset:3px;box-shadow:0 0 0 3px var(--cream)}
.node:focus-visible{outline:none;box-shadow:none}
.node:focus-visible .disc,.force-focus .disc{outline:3px solid var(--charcoal);outline-offset:3px;box-shadow:3px 3px 0 var(--charcoal),0 0 0 3px var(--cream)}

/* ---- Stage trail ---- */
.trail{--cols:4;list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:minmax(var(--row),auto);gap:8px}
.trail svg.path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.trail li{position:relative;z-index:1;display:flex;justify-content:center;min-width:0}
.node{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;max-width:150px;padding:10px 2px 2px;text-decoration:none;background:none;border:0;cursor:pointer;color:inherit;text-align:center}
.disc{position:relative;width:var(--disc);height:var(--disc);flex:none;display:grid;place-items:center;border:2px solid var(--charcoal);border-radius:8px;background:var(--cream);box-shadow:3px 3px 0 var(--charcoal);font:700 24px/1 var(--courier);transition:transform var(--lucy-feedback-duration,150ms)}
.node:hover .disc{transform:translateY(-2px)}
.node:active .disc{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--charcoal)}
.label{font:600 14px/1.2 var(--sans);min-height:17px;max-width:100%;overflow-wrap:anywhere}
.slot{min-height:22px;display:flex;align-items:center;justify-content:center;gap:2px;font:600 14px/1.2 var(--sans)}
.slot .tag{padding:0 8px;border:2px solid var(--charcoal);border-radius:999px;background:var(--cream);font:700 13px/18px var(--sans)}
.is-completed .disc{background:var(--leaf)}
.is-next .disc,.is-open .disc{background:var(--pink)}
.is-next .tag{background:var(--charcoal);color:var(--cream)}
.is-locked .disc{border-style:dashed;box-shadow:none;background:var(--cream);align-content:center;gap:0}
.is-locked .disc svg{width:20px;height:20px}
.is-locked .disc b{font:700 14px/1 var(--courier)}
.is-soon .disc{background:var(--charcoal);color:var(--cream);box-shadow:none}
.is-unknown .disc{background:var(--cream)}
.is-loading .disc{background:repeating-linear-gradient(45deg,var(--cream) 0 6px,#EFE4D0 6px 12px);box-shadow:none}
.star{width:16px;height:16px}
.star path{fill:var(--butter);stroke:var(--charcoal);stroke-width:1.6;stroke-linejoin:round}
.star.empty path{fill:none}
.chip{position:absolute;width:var(--chip);height:var(--chip);border:2px solid var(--charcoal);border-radius:50%;display:grid;place-items:center;overflow:hidden;background-color:var(--sky);background-repeat:no-repeat}
.chip.friend{top:-9px;right:-9px}
.chip.rare{top:-9px;left:-9px;background:var(--butter)}
.chip.rare.off{background:var(--cream);border-style:dashed}
.chip.rare svg{width:14px;height:14px}
.chip.rare.off svg{opacity:.55}
.chip.friend.poppy{background-image:url('../../assets/poppy-static-v02-r02-candidate.png');background-size:104%;background-position:40% 55%}
.chip.friend.butterfly{background-image:url('../assets/butterfly-approved.png');background-size:170%;background-position:52% 55%}
/* Segment colors: walked path is solid, the rest is dashed. */
.seg{stroke:var(--charcoal);stroke-width:4;fill:none;stroke-linecap:square}
.seg.todo{stroke-dasharray:2 8;stroke-width:4;opacity:1}
.seg.done{stroke:#5B7651;stroke-width:6}

/* Details card */
.card{background:var(--soft);border:2px solid var(--charcoal);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-height:0}
.card .eyebrow{margin:0;font:700 13px/1.2 var(--courier);letter-spacing:.06em;text-transform:uppercase}
.card h2{margin:0;font:700 20px/1.15 var(--courier);letter-spacing:-.02em}
.card p{margin:0;font-size:14px}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:14px}
.card li{display:flex;gap:6px;align-items:center}
.card .stars{display:flex;gap:2px;align-items:center;font-size:14px}
.card .stars .star{width:18px;height:18px}
.card .btn{margin-top:auto;align-self:stretch}

/* Notices */
.notice{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:var(--butter);border:2px solid var(--charcoal);border-radius:8px;font-size:14px}
.notice p{margin:0;flex:1 1 200px}
.notice .btn{min-height:44px;box-shadow:none}

/* ---- Worlds screen ---- */
.worlds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:stretch;align-content:start;min-height:0;height:100%}
.wcard{display:flex;flex-direction:column;min-width:0;max-height:420px;border:2px solid var(--charcoal);border-radius:8px;background:#fff;overflow:hidden;box-shadow:3px 3px 0 var(--charcoal)}
.wcard .art{flex:1 1 60px;min-height:56px;background:url('../assets/landscape-v03-calm.png') center 60%/cover;border-bottom:2px solid var(--charcoal);position:relative}
.wcard .art .pill{position:absolute;left:8px;top:8px}
.wcard .body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px;min-height:128px}
.wcard h2{margin:0;font:700 20px/1.15 var(--courier);letter-spacing:-.02em}
.wcard .line{margin:0;font-size:14px}
.pips{display:flex;gap:3px;align-items:center;font-size:14px;flex-wrap:wrap}
.pips i{width:12px;height:12px;border:2px solid var(--charcoal);background:var(--cream);display:inline-block}
.pips i.on{background:var(--leaf)}
.wcard.is-locked{border-style:dashed;box-shadow:none;background:var(--cream)}
.wcard.is-locked .art{filter:grayscale(1) contrast(.9);opacity:.5}
.wcard.is-soon{box-shadow:none;background:var(--cream)}
.wcard.is-soon .art{background:var(--soft);border-bottom-style:solid;display:grid;place-items:end stretch;padding:0}
.wcard.is-soon .art svg{width:100%;height:100%;display:block}
.wcard.slot-style .art{display:grid;place-items:center;background:var(--cream);border-bottom-style:dashed;font:700 40px var(--courier)}
.wcard .btn{margin-top:4px;align-self:flex-start}
.wcard .noaction{min-height:44px;display:flex;align-items:center;font:700 14px var(--sans)}
.wbanner{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:44px;border:2px dashed var(--charcoal);border-radius:8px;font:700 16px var(--courier);padding:8px}
@media(max-width:560px){
  .worlds{grid-template-columns:1fr;height:auto}
  .wcard{flex-direction:row}
  .wcard .art{flex:none;width:96px;min-height:96px;border-bottom:0;border-right:2px solid var(--charcoal)}
  .wcard .art .pill{display:none}
}

/* ---- Finale and results mocks ---- */
.center{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center}
.modal{width:min(560px,100%);display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.modal h1{margin:0;font:700 24px/1.1 var(--courier);letter-spacing:-.02em}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fact{border:2px solid var(--charcoal);border-radius:8px;background:#fff;padding:6px 8px;text-align:center}
.fact b{display:block;font:700 20px/1.1 var(--courier)}
.fact span{font-size:14px}
.slotbox{border:2px dashed var(--charcoal);border-radius:8px;padding:8px 10px;font-size:14px;background:var(--cream);position:relative}
.slotbox .tag{position:absolute;right:8px;top:-11px;background:var(--charcoal);color:var(--cream);font:700 12px/18px var(--sans);padding:0 8px;border-radius:999px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.actions .left{display:flex;gap:8px;flex-wrap:wrap}

/* Orientation hints */
.hint{display:none;align-items:center;gap:10px;padding:6px 8px;background:var(--sky);border:2px solid var(--charcoal);border-radius:8px;font-size:14px}
.hint p{margin:0;flex:1}
.hint .dismiss{flex:none;min-width:44px;min-height:44px;padding:0 10px;border:2px solid var(--charcoal);border-radius:6px;background:var(--cream);font:700 14px var(--sans);cursor:pointer}
.hint[hidden]{display:none!important}
.hint svg{width:28px;height:28px;flex:none}
@media(orientation:portrait) and (max-width:600px){.hint.inline{display:flex}}

@media(min-width:900px) and (min-height:620px){.label,.slot{font-size:15px}.wcard h2{font-size:24px}.top h1{font-size:26px}.panel{padding:14px 16px}.card h2{font-size:22px}:root{--sidew:260px}}
@media(max-height:420px){.wcard .tagline{display:none}.panel{padding:8px 10px}.modal{gap:6px;padding:8px 12px}.modal h1{font-size:20px}.modal .lead{display:none}.fact{padding:4px 6px}.fact b{font-size:18px}}
@media(max-height:260px){.bar{height:40px}.bar .slogan{display:none}.panel{margin:4px;padding:6px 8px}.top{min-height:44px}.top h1{font-size:18px}}
.main.vc{display:flex;flex-direction:column;gap:8px}
.main.vc>.trail{margin-block:auto}
@media(orientation:portrait){.game{max-height:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
/* One-off unlock moment: a 240 ms scale-in on the newly opened node and its path segment. Not looped. */
@keyframes lucy-open{from{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:no-preference){.just-opened .disc{animation:lucy-open 240ms ease-out both}.seg.just-opened{animation:lucy-open 240ms ease-out both;transform-origin:center;transform-box:fill-box}}
.page-hidden,[hidden]{display:none!important}
.loading-note{margin:0;font-size:14px}

/* Exit to the Games hub (T11a wiring): a plain link, hidden during a run and in the installed app. */
.lucy-exit{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;margin-right:6px;color:var(--charcoal);background:var(--cream);border:2px solid var(--charcoal);border-radius:999px;font:700 12px/1 var(--courier);text-decoration:none;position:relative;flex:none}
.lucy-exit::before{content:"";position:absolute;inset:-10px -4px}
.lucy-exit__ic{width:14px;height:14px}
@media(max-width:600px){.lucy-exit span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.shell.playing .lucy-exit{display:none}
@media (display-mode: standalone){.lucy-exit{display:none}}
html.lucy-standalone .lucy-exit{display:none}
.bar .lucy-exit{margin-right:0}
.lucy-exit:focus-visible{outline:3px solid var(--charcoal);outline-offset:3px;box-shadow:0 0 0 3px var(--cream)}

/* Exact owner-approved v33 sign styling, at 1x. */
/* v32: same core art and dimensions, with one rare-find cue on the number face. */
.sign{--s:1;position:relative;display:block;flex:none;width:calc(60px * var(--s));height:calc(68px * var(--s))}
.core{position:absolute;left:calc(-12px * var(--s));top:0;width:calc(84px * var(--s));height:calc(84px * var(--s));display:block;image-rendering:pixelated;clip-path:inset(27.830941% 0 0)}
.discovery-mark{position:absolute;width:calc(8.615385px * var(--s));height:calc(5.6px * var(--s));display:block}
.rare-mark{left:calc(38px * var(--s));top:calc(29px * var(--s))}
.discovery-mark svg,.legend-symbol svg{display:block;width:100%;height:100%}
.is-missing .symbol-fill{fill:#FFF7EB}
.is-missing .lucy-heart{fill:none;stroke:#8C3D56;stroke-width:.5;stroke-linejoin:miter}
.is-missing .heart-shadow{display:none}
.is-missing .sparkle-satellite{display:none}
.legend-symbol[data-symbol="friend"]{width:14px}
.legend-symbol[data-symbol="rare"]{width:21.538462px}

/* Native UI content adapters for the other stage numbers and rating states. */
.number-repair{position:absolute;left:calc(23.57px * var(--s));top:calc(27.8px * var(--s));width:calc(12.6px * var(--s));height:calc(15.5px * var(--s));display:block}
.stage-digit{position:absolute;left:calc(24.05px * var(--s));top:calc(28.43px * var(--s));width:calc(11.7px * var(--s));height:calc(14.53px * var(--s));display:block}
.rating-tile{position:absolute;top:calc(48.498px * var(--s));width:calc(7.368px * var(--s));height:calc(7.435px * var(--s));display:block}
.rating-tile[data-slot="0"]{left:calc(17.675px * var(--s))}.rating-tile[data-slot="1"]{left:calc(26.25px * var(--s))}.rating-tile[data-slot="2"]{left:calc(34.825px * var(--s))}

/* S4 opt-in map: the existing trail remains the default until missing state art is approved. */
.art-mode .bar{height:44px}.art-mode .scene:before,.art-mode .scene:after{display:none}
.panel.illustrated{display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:var(--cream)}
.illustrated .top{position:absolute;top:4px;left:8px;right:8px;z-index:4;pointer-events:none;justify-content:space-between;min-height:44px}
.illustrated .top a{pointer-events:auto}.illustrated .top h1{font-family:'Courier New',Courier,monospace;font-size:18px;background:var(--cream);padding:2px 6px}.illustrated .top .pill{display:none}
.illustrated .main{height:100%;display:block}.garden-viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.garden-scene{position:relative;flex:none}.garden-art{display:block;width:100%;height:100%;visibility:hidden}.garden-buffer{position:absolute;pointer-events:none;image-rendering:pixelated}
.illustrated .trail{position:absolute;inset:0;display:block;margin:0;padding:0;min-height:0;list-style:none}
.illustrated .trail>li{position:static;display:contents}
.illustrated .stage-marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-65.45px);width:60px;height:68px;min-width:60px;min-height:68px;padding:0;border:0;background:transparent;border-radius:4px;z-index:1;touch-action:manipulation;cursor:pointer}
.sign-mount{display:block;pointer-events:none}.illustrated .stage-marker:focus-visible{outline:3px solid var(--charcoal);outline-offset:3px;box-shadow:0 0 0 6px var(--cream);z-index:3}
/* Existing state controls retained verbatim in meaning, compacted to the approved target footprint. */
.illustrated .node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.illustrated .node .disc{width:44px;height:44px;font-size:20px}.illustrated .node .label{display:none}.illustrated .node .slot{font-size:10px;height:20px;min-height:20px;line-height:20px}.illustrated .node .tag{font-size:10px;padding:0 3px}
.illustrated .art-details{position:absolute;z-index:5;right:12px;bottom:12px;width:236px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;background:var(--cream);border:2px solid var(--charcoal);border-radius:8px;padding:12px}
.art-details .card{border:0;box-shadow:none;padding:0}.close-details{display:block;margin-left:auto;width:44px;height:44px;background:transparent;border:0;font-size:26px;cursor:pointer}
.illustrated .hint{position:absolute;bottom:0;left:8px;z-index:4;max-width:calc(100% - 16px);background:var(--cream);font-size:12px}
.illustrated .notice{position:absolute;bottom:0;left:8px;right:8px;z-index:4;padding:4px 8px;font-size:12px;background:var(--cream)}
@media(orientation:landscape){.illustrated .hint{display:none}}

/* Owner accepted locked and NEXT sign overlays, 8 October 2026. */
.lock-mark{position:absolute;left:38px;top:29px;width:7px;height:9px;display:block}.lock-mark svg{display:block;width:7px;height:9px}
.next-word{position:absolute;left:15px;top:31px;width:30px;height:10px;display:block}

/* Keep the world heading clear of every approved sign anchor. */
.art-mode .bar .slogan{display:none}.map-world-title{margin:0 0 0 auto;font:700 18px/1.1 "Courier New",Courier,monospace;max-width:180px;text-align:right}
@media(max-width:600px){.map-world-title{font-size:16px;max-width:140px}.art-mode .bar{gap:8px}}

/* S4b runtime: accepted neutral sign variant (REMAINING_STATES_ACCEPTANCE_2026-10-08). Same sign, anchor and size. */
.neutral-rating{position:absolute;left:calc(17.675px * var(--s));top:calc(48.498px * var(--s));width:calc(24.518px * var(--s));height:calc(7.435px * var(--s));display:block}
.garden-scene.is-fitting .trail{opacity:0}
.illustrated .stage-marker[aria-disabled=true]{cursor:default}

/* Illustrated map refactor (12 October 2026, proposal). The map and an always visible stage panel share the screen:
   panel under the art by default, beside it on short landscape screens. Worlds sits in the bar, not over the art. */
.art-mode .bar-back{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px 0 6px;border:2px solid var(--charcoal);background:var(--cream);color:var(--charcoal);font:700 14px var(--sans);text-decoration:none;flex:none;position:relative}
.art-mode .bar-back:before{content:"";position:absolute;inset:-4px}
.art-mode .bar-back svg{width:14px;height:14px}
.art-mode .bar:has(.bar-back) .lucy-exit{display:none}
.panel.illustrated{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"map" "details"}
.illustrated>.top{display:none}
.illustrated .main{grid-area:map;min-height:0;height:auto}
.illustrated .art-details{grid-area:details;position:static;height:124px;box-sizing:border-box;width:auto;max-width:none;max-height:none;overflow:auto;border:0;border-top:2px solid var(--charcoal);border-radius:0;padding:8px 12px max(8px,env(safe-area-inset-bottom));background:var(--cream)}
.illustrated .art-details .card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;background:transparent}
.illustrated .art-details .card>*{grid-column:1;margin:0}
.illustrated .art-details .card>.btn{grid-column:2;grid-row:1 / span 8;align-self:center;min-width:120px;min-height:52px;justify-content:center;font-size:18px;border-radius:0}
.illustrated .art-details .eyebrow{font-size:11px}
.illustrated .art-details h2{font-size:18px;line-height:1.15}
.illustrated .art-details h2 br{display:none}
.illustrated .art-details .stars{margin:0}
.illustrated .art-details p,.illustrated .art-details li{font-size:13px}
.illustrated .art-details ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:2px 12px}
/* The art sits at the bottom of the map area and its own sky continues above it, so the top signs always have room. */
.illustrated .garden-viewport{align-items:flex-end;overflow:hidden}
@media(orientation:portrait){.illustrated .garden-viewport{align-items:flex-start;overflow:hidden auto;padding-top:28px}.illustrated .garden-scene:before{height:28px}}
.illustrated .garden-scene:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:#22A3FE}
.illustrated .stage-marker.is-selected{outline:3px solid var(--charcoal);outline-offset:2px;box-shadow:0 0 0 5px var(--cream);z-index:2}
@media(max-height:540px) and (orientation:landscape){
  .panel.illustrated{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:minmax(0,1fr);grid-template-areas:"map details"}
  .illustrated .art-details{height:auto;border-top:0;border-left:2px solid var(--charcoal);padding:10px max(12px,env(safe-area-inset-right)) 10px 12px;display:flex;flex-direction:column;justify-content:center;overflow:auto}
  .illustrated .art-details .card{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .illustrated .art-details .card>.btn{grid-column:1;grid-row:auto;width:100%;margin-top:6px}
  .illustrated .art-details h2 br{display:inline}
  .illustrated .art-details h2 span:before{content:none}
}

/* Worlds cards, owner accepted 8 October 2026 (WORLD_CARD_ACCEPTANCE): equal image frames, aligned title, copy and play rows,
   plain check or lock pinned to the far right of the name row, open names unmarked, icon-only 48 px play. */
.panel.worlds-art{display:block;padding:12px 16px;overflow:auto}
.worlds-art .top{margin-bottom:8px}
.world-cards{display:flex;gap:16px;flex-wrap:wrap;min-width:0}
.world-card{display:flex;flex-direction:column;align-self:stretch;flex:1;min-width:180px;max-width:400px;padding:16px;border:2px solid var(--charcoal);background:var(--cream)}
.world-art-wrap,.world-card .anonymous-silhouette{width:100%;height:auto;aspect-ratio:1844/853;flex:none}
.world-art-wrap .world-art{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.anonymous-silhouette{display:flex;align-items:center;justify-content:center;padding:12px;background:#A9C797}
.anonymous-silhouette svg{height:60px;width:90px;max-height:100%}
.anonymous-silhouette .symbol-fill,.anonymous-silhouette .sparkle-satellite{display:none}
.world-card-body{display:grid;grid-template-rows:52px 44px 48px;gap:12px;margin-top:auto;padding-top:16px}
.world-name{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin:0;align-self:end;font:700 24px/1.15 "Courier New",Courier,monospace}
.world-name>span:first-child{min-width:0}
.world-status-check,.world-status-lock{display:inline-flex;flex:none;margin-left:auto;color:var(--charcoal)}
.world-status-check svg{width:21px;height:21px}.world-status-lock svg{width:14px;height:18px}
.world-card-body>p{margin:0;align-self:end;font-size:16px}
.world-play{display:inline-grid;place-items:center;justify-self:start;align-self:end;width:48px;height:48px;padding:10px;border:2px solid var(--charcoal);border-radius:4px;background:var(--pink);color:var(--charcoal);cursor:pointer;text-decoration:none}
.world-play svg{display:block;width:24px;height:24px}
.world-play:disabled{background:var(--cream);border-style:dashed;cursor:default}
.world-action-space{display:block;height:48px}
@media(max-height:420px) and (orientation:landscape){.worlds-art{padding:8px 12px}.worlds-art .top{min-height:34px;margin-bottom:4px}.worlds-art .top h1{font-size:20px}.world-cards{gap:12px}.world-card{padding:8px}.world-card-body{grid-template-rows:auto auto 48px;gap:4px;padding-top:6px}.world-name{font-size:20px}.world-card-body>p{font-size:14px}.world-card .anonymous-silhouette{padding:6px}}

/* Worlds screen, phone first (12 October 2026, proposal). Replaces the equal-card row above on every size:
   the title moves to the bar, built worlds are large cards (the whole card opens the world), worlds that are not built
   yet are small tiles beside them (below them in portrait). Square corners and hard shadows, like the stage screens. */
.worlds-mode .panel.worlds-art{display:flex;flex-direction:column;gap:10px;margin:0;padding:12px;border:0;border-radius:0;box-shadow:none;background:var(--cream);overflow:auto}
.worlds-mode .world-cards{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:14px;flex:1;min-height:0}
.worlds-mode .world-cards:not(:has(.world-soon)){grid-template-columns:minmax(0,1fr)}
.world-built{display:flex;align-items:center;gap:14px;min-width:0;min-height:0}
.world-soon{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0;min-height:0}
.worlds-mode .world-built .world-card{position:relative;align-self:center;flex:1;min-width:0;max-width:none;max-height:100%;padding:0;background:#fff;box-shadow:4px 4px 0 var(--charcoal)}
.worlds-mode .world-built .world-art-wrap,.worlds-mode .world-built .anonymous-silhouette{aspect-ratio:1844/853;width:100%;flex:0 1 auto;min-height:48px;overflow:hidden;border-bottom:2px solid var(--charcoal)}
.worlds-mode .world-built .world-art{object-fit:cover;object-position:center 55%}
.worlds-mode .world-built .world-card-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 12px;align-items:center;margin:0;padding:10px 12px}
.worlds-mode .world-built .world-name{grid-column:1;grid-row:1;align-self:end;font-size:22px}
.worlds-mode .world-built .world-card-body>p{grid-column:1;grid-row:2;align-self:start;font-size:15px}
.worlds-mode .world-play{grid-column:2;grid-row:1 / 3;width:56px;height:56px;border-radius:0;box-shadow:3px 3px 0 var(--charcoal)}
.worlds-mode .world-play svg{width:28px;height:28px}
.worlds-mode .world-play:disabled{box-shadow:none}
.worlds-mode a.world-play:after{content:"";position:absolute;inset:0}
.worlds-mode .world-card:has(a.world-play):hover .world-play{background:#F29CA9}
.worlds-mode .world-card:has(a.world-play:active) .world-play{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--charcoal)}
.worlds-mode .world-soon .world-card{flex:0 1 auto;min-height:72px;flex-direction:row;align-items:center;gap:10px;min-width:0;max-width:none;padding:8px;border-style:dashed;background:transparent}
.worlds-mode .world-soon .anonymous-silhouette{flex:none;width:56px;height:56px;aspect-ratio:auto;padding:6px}
.worlds-mode .world-soon .anonymous-silhouette svg{width:36px;height:24px}
.worlds-mode .world-soon .world-card-body{display:block;margin:0;padding:0;min-width:0}
.worlds-mode .world-soon .world-name{font-size:16px}
.worlds-mode .world-soon .world-card-body>p{font-size:13px}
.worlds-mode .hint{border-radius:0}
@media(orientation:portrait){
  .worlds-mode .world-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;align-content:start}
  .world-built{flex-direction:column}
  .world-soon{flex-direction:row}
  .worlds-mode .world-soon .world-card{flex-direction:column;align-items:flex-start}
  .worlds-mode .world-cards{flex:none}
  .worlds-mode .world-built .world-card{flex:none;max-height:none;align-self:stretch}
  .worlds-mode .world-soon .world-card{flex:1}
}
/* Desktop worlds screen (owner feedback, 14 October 2026: the card floated in empty space). The built world fills the
   frame: its picture takes all the height left above the name row (cropped slightly, never letterboxed), and the coming-soon
   worlds share a narrow column of the same height. */
@media(min-width:900px) and (min-height:620px){.worlds-mode .panel.worlds-art{padding:24px}}
@media(min-width:900px) and (min-height:460px) and (orientation:landscape){
  .worlds-mode .world-cards{grid-template-columns:minmax(0,1fr) clamp(220px,24%,300px);gap:20px}
  .worlds-mode .world-built{align-items:stretch}
  .worlds-mode .world-built:has(.world-card+.world-card){flex-direction:column}
  .worlds-mode .world-built .world-card{align-self:stretch;max-height:none;display:flex;flex-direction:column}
  .worlds-mode .world-built .world-art-wrap,.worlds-mode .world-built .anonymous-silhouette{aspect-ratio:auto;flex:1 1 0;min-height:120px}
  .worlds-mode .world-built .world-art{width:100%;height:100%;object-fit:cover;object-position:20% 60%}
  .worlds-mode .world-built .world-card-body{padding:14px 16px}
  .worlds-mode .world-built .world-name{font-size:26px}
  .worlds-mode .world-built .world-card-body>p{font-size:16px}
  .worlds-mode .world-play{width:64px;height:64px}
  .worlds-mode .world-soon{justify-content:stretch;gap:20px}
  .worlds-mode .world-soon .world-card{flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center}
  .worlds-mode .world-soon .anonymous-silhouette{width:72px;height:72px}
  .worlds-mode .world-soon .world-name{font-size:18px}
  .worlds-mode .world-soon .world-card-body>p{font-size:14px}
}
@media(max-height:420px) and (orientation:landscape){.worlds-mode .world-built .world-name{font-size:19px}.worlds-mode .world-built .world-card-body{padding:6px 10px}.worlds-mode .world-built .world-card-body>p{font-size:13px}.worlds-mode .world-play{width:48px;height:48px}}

/* Phones: the frame fills the visible screen (no page padding, border or rounded corners), as on the stage pages. */
@media(max-height:540px) and (orientation:landscape),(max-width:600px) and (orientation:portrait){
  body{padding:0}
  .game{height:100vh;height:100dvh;max-height:none;max-width:none;border:0;border-radius:0}
}

/* World complete celebration, owner accepted revision 9 (CELEBRATION_ACCEPTANCE_2026-10-08). Values copied from the accepted
   celebration.css in the same cascade order, scoped to the runtime. The bar carries the brand and the world label. */
.game.celebrating .bar{height:44px}
.bar-note{font:700 13px "Courier New",monospace;max-width:none}
.panel.celebrate{display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:var(--cream)}
.celebrate .window-stage{isolation:isolate;position:relative;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;padding:80px 20px 20px;background:url(assets/d-landscape.png) center/cover;image-rendering:pixelated}
.celebrate .completion-window{position:relative;width:min(720px,100%);padding:74px 20px 16px;background:#FFF7EB;border:2px solid #262523;border-radius:8px;box-shadow:4px 4px 0 #262523;display:grid;gap:12px;image-rendering:auto;margin:auto}
.celebrate .heading{text-align:center}.celebrate .heading p{font:700 13px "Courier New",monospace;letter-spacing:.1em;margin:0 0 4px}.celebrate .heading h1{font:700 30px/1.1 "Courier New",monospace;margin:0}
.celebrate .friends{position:absolute;left:50%;top:-78px;transform:translateX(-50%);width:320px;height:150px;z-index:2;pointer-events:none}
.celebrate .party{position:relative;height:100%;display:flex;justify-content:center;align-items:flex-end}
.celebrate .party img{display:block;object-fit:contain;image-rendering:pixelated;flex:none}
.celebrate .lucy{width:150px;height:150px}.celebrate .poppy{width:122px;height:122px;margin-left:-12px}.celebrate .butterfly{position:absolute;left:30px;top:8px;width:64px;height:64px}
.celebrate footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
.celebrate .confetti{position:absolute;inset:12px;pointer-events:none;z-index:3}.celebrate .confetti i{position:absolute;width:6px;height:10px;background:var(--color)}
@media(orientation:portrait){.celebrate .window-stage{padding:90px 12px 24px}.celebrate .completion-window{padding:78px 12px 16px;gap:16px}.celebrate .heading h1{font-size:28px}.celebrate .friends{width:290px}}
@media(max-height:440px) and (orientation:landscape){.celebrate .window-stage{padding:74px 16px 8px}.celebrate .completion-window{padding:32px 14px 6px;gap:6px}.celebrate .friends{top:-74px;height:100px;width:280px}.celebrate .lucy{height:100px;width:100px}.celebrate .poppy{height:88px;width:88px}.celebrate .butterfly{width:48px;height:48px;left:40px;top:0}.celebrate .heading h1{font-size:25px}}
/* v03: friends and completion only, no collection display. */
.celebrate .completion-window{gap:24px;padding-bottom:20px}
@media(max-height:440px) and (orientation:landscape){.celebrate .completion-window{gap:18px;padding-bottom:14px}}
@keyframes party-pop{0%{transform:translateY(80px) scale(.82);opacity:0}18%{opacity:1}58%{transform:translateY(-12px) scale(1.04)}80%{transform:translateY(5px) scale(.99)}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes friend-pop{0%{transform:translateY(75px);opacity:0}20%{opacity:1}60%{transform:translateY(-14px)}100%{transform:translateY(0);opacity:1}}
@keyframes butterfly-pop{0%{transform:translateY(20px);opacity:0}20%{opacity:1}60%{transform:translateY(-6px)}100%{transform:translateY(0);opacity:1}}
@keyframes confetti-fall{0%{transform:translate(0,-80px);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translate(var(--drift),230px);opacity:0}}
@media(prefers-reduced-motion:no-preference){.is-celebrating .lucy{animation:party-pop 900ms cubic-bezier(.2,.8,.3,1) both;transform-origin:center bottom}.is-celebrating .poppy{animation:friend-pop 1000ms 100ms ease-out both}.is-celebrating .butterfly{animation:butterfly-pop 1100ms 180ms ease-out both}.is-celebrating .confetti i{animation:confetti-fall 2400ms var(--delay) ease-out both}}
/* Agreed folded-map icon button, 48 px, the only action as in the accepted revision 9. */
.celebrate-actions{display:flex;align-items:center;gap:10px}
.celebrate footer .map-action{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;padding:10px;background:#FFF7EB;border:2px solid #262523;border-radius:6px;color:#262523;box-shadow:2px 2px 0 #262523;text-decoration:none}
.celebrate footer .map-action svg{width:24px;height:24px}
/* v07 to v09: Butterfly in front, between Lucy and Poppy at chest height, final owner position. */
.celebrate .party{justify-content:flex-end}.celebrate .lucy{position:relative;z-index:1}.celebrate .poppy{position:relative;z-index:2}.celebrate .butterfly{left:170px;top:78px;width:52px;height:52px;z-index:3}
@media(orientation:portrait){.celebrate .lucy{width:130px;height:130px}.celebrate .poppy{width:106px;height:106px}.celebrate .butterfly{left:156px;top:88px;width:52px;height:52px}}
@media(max-height:440px) and (orientation:landscape){.celebrate .butterfly{left:166px;top:44px;width:48px;height:48px}}

/* Inside the website page (embed.js): the site header carries the brand and the way out, the page draws the frame. */
html.lucy-embed body{padding:0}
html.lucy-embed .game{height:100vh;height:100dvh;max-height:none;max-width:none;border:0;border-radius:0}
html.lucy-embed .bar>img,html.lucy-embed .bar .slogan,html.lucy-embed .lucy-exit{display:none}
html.lucy-embed .map-world-title{margin-left:0;text-align:left;max-width:none}