/* The world reaches the viewport edge. The retained IDs are game anchors,
   not a device frame. Home and shared minigame chrome use the same scenery. */
.world-scene {position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;isolation:isolate;background:var(--world-base,#087c9c)}
.world-scene > div {position:absolute;inset:0;pointer-events:none}
.world-backdrop {background-size:cover;background-position:center 50%;transform:scale(var(--world-art-scale,1));transform-origin:center bottom;filter:brightness(var(--world-light,1)) hue-rotate(var(--world-temperature,0deg)) saturate(var(--world-saturation,1)) sepia(var(--world-warmth,0));transition:filter 1.8s ease}
.world-depth,.world-foreground {filter:brightness(max(.55,var(--world-light,1)));transition:filter 1.8s ease}
.world-light {background:linear-gradient(180deg,color-mix(in srgb,var(--world-tint) 28%,transparent),transparent 55%,#03273522);mix-blend-mode:soft-light}
.world-light::after {content:"";position:absolute;inset:-10% -20%;background:repeating-conic-gradient(from 155deg at 52% 0%,transparent 0deg 9deg,#cdfafa25 12deg 15deg,transparent 18deg 32deg);opacity:var(--world-light,1);animation:world-rays 16s ease-in-out infinite alternate;transform-origin:50% 0}
.world-scene[data-time="night"] .world-light {background:linear-gradient(#12224a4d,#13376826 60%,#07163333);mix-blend-mode:multiply}
.world-scene[data-authored-light="true"] .world-light {background:none;mix-blend-mode:normal}
.world-scene[data-habitat="indoor"]::after {background:linear-gradient(#512c1310,transparent 40%,#34221822)}
.world-scene[data-rays="false"] .world-light::after {display:none}
.world-scene[data-habitat="abyss"] .world-light,.world-scene[data-habitat="sky"] .world-light {background:none}
.world-scene[data-mist="true"] .world-atmosphere {background:linear-gradient(transparent,#cbdce029 24%,transparent 65%)}
.world-scene[data-frost="true"] .world-foreground::after {content:"";position:absolute;inset:60% 0 0;box-shadow:inset 0 -28px 50px #edf6ff4a;pointer-events:none}
.world-branch {width:clamp(140px,32vw,380px);left:-30px;top:-30px;transform-origin:0 0;animation:world-branch 8s ease-in-out infinite}
.world-fern {width:clamp(140px,31vw,330px);left:-55px;bottom:-35px;transform-origin:50% 100%;animation:world-kelp 8s ease-in-out infinite}
.world-reeds {width:clamp(80px,19vw,200px);right:-20px;bottom:6%;transform-origin:50% 100%;animation:world-kelp 8s ease-in-out infinite}
.world-scene[data-foliage-season="autumn"] .world-branch,.world-scene[data-foliage-season="autumn"] .world-fern {filter:sepia(.55) saturate(1.5) hue-rotate(-28deg)}
.world-scene[data-foliage-season="winter"] .world-reeds {filter:saturate(.2) brightness(1.2)}
.world-bioluminescent {opacity:.8;filter:drop-shadow(0 0 12px #5bebfc88)}
.world-particle {position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);animation-duration:var(--duration);animation-delay:var(--delay);animation-timing-function:linear;animation-iteration-count:infinite}
.world-mote,.world-plankton,.world-firefly,.world-spark,.world-dust {border-radius:50%;background:#fffed773;animation-name:world-drift}
.world-firefly,.world-spark,.world-plankton {background:#deffe8;box-shadow:0 0 6px 2px #b4f8ec7d;animation-name:world-twinkle}
.world-spark {width:2px;height:2px}
.world-dust {opacity:.3;background:#fce5bf}
.world-rain {width:1px;height:14px;background:linear-gradient(transparent,#dcf4ffa0);animation-name:world-rain}
.world-snow {border-radius:50%;background:#f7fcff;box-shadow:0 0 2px #fff;animation-name:world-fall}
.world-leaf,.world-petal {width:14px;height:14px;background:center/contain no-repeat;animation-name:world-fall}
.world-leaf {background-image:url('assets/world/leaf-v1.webp')}
.world-petal {background-image:url('assets/world/blossom-v1.webp')}
.world-water {position:absolute;width:22%;height:3%;border:1px solid #e6ffff5e;border-radius:50%;box-shadow:0 0 0 5px #e6ffff18;animation:world-ripple 7s ease-out infinite;transform:translate(-50%,-50%)}
.world-scene[data-frost="true"] .world-water {animation:none;opacity:.25}
@keyframes world-branch {0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes world-breeze {0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes world-drift {0%,100%{transform:translate(-8px,0);opacity:.1}50%{transform:translate(12px,-14px);opacity:.5}}
@keyframes world-twinkle {0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(9px,-8px);opacity:.7}}
@keyframes world-rain {from{transform:translate(-25px,-40vh);opacity:0}25%,80%{opacity:.55}to{transform:translate(25px,40vh);opacity:0}}
@keyframes world-fall {from{transform:translate(-12px,-40vh) rotate(0deg);opacity:0}20%,75%{opacity:.7}to{transform:translate(20px,45vh) rotate(150deg);opacity:0}}
@keyframes world-ripple {0%{transform:translate(-50%,-50%) scale(.5);opacity:0}25%{opacity:.5}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.world-prop {position:absolute;object-fit:contain;user-select:none}
.world-kelp {height:clamp(130px,25vh,330px);width:auto;left:-28px;top:calc(var(--world-stage-bottom,52vh) - 180px);transform-origin:50% 100%;animation:world-kelp 6s ease-in-out infinite}
.world-fan {height:clamp(110px,18vh,220px);width:auto;right:-34px;top:calc(var(--world-stage-bottom,52vh) - 130px);transform-origin:50% 100%;animation:world-kelp 7s ease-in-out infinite reverse;opacity:.84}
.world-coral {width:clamp(100px,20vw,240px);right:-20px;bottom:-24px}
.world-fish {width:74px;top:22%;left:0;opacity:.64;animation:world-swim 48s linear infinite}
.world-jelly {width:45px;top:35%;right:14%;opacity:.5;animation:world-jelly 12s ease-in-out infinite}
.world-bubble {border:1px solid #e3fcff85;border-radius:50%;box-shadow:inset 1px 1px #fff7;animation-name:world-rise}
.world-atmosphere {opacity:.7}
.world-scene::after {content:"";position:absolute;inset:0;background:linear-gradient(#042d491f,transparent 22% 55%,#04233736);pointer-events:none}
@keyframes world-rays {to{transform:translateX(3%) rotate(4deg);opacity:calc(var(--world-light,1)*.6)}}
@keyframes world-kelp {0%,100%{transform:skewX(-3deg)}50%{transform:skewX(3deg)}}
@keyframes world-rise {from{transform:translate(0,25vh);opacity:0}20%,75%{opacity:.7}to{transform:translate(18px,-60vh);opacity:0}}
@keyframes world-swim {from{transform:translateX(-100px)}to{transform:translateX(calc(100vw + 100px))}}
@keyframes world-jelly {0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}}
/* The existing cast solver reserves 16px for reactions. Keep idle vertical
   travel within its original 1px budget, including during a shared jump. */
@keyframes world-float {0%,100%{transform:translate(-5px,0)}25%,75%{transform:translate(0,-.6px)}50%{transform:translate(5px,-1px)}}
@keyframes world-care-pulse {0%,100%{opacity:.45;transform:scale(.98)}50%{opacity:.8;transform:scale(1.015)}}

/* Tint only the glass surfaces; text, icons and meter fills stay fully opaque. */
body.world-mode {--world-press-transform:translateY(1px) scale(.98);--world-glass-rgb:245 253 255;--world-glass:rgb(245 253 255 / .24);--world-detail-glass:rgb(245 253 255 / .28);--world-ink:#0b2028;--world-glass-blur:2px;--world-text-halo:0 1px 2px #ffffffdd,0 0 5px #ffffffaa;padding:0;display:flex;align-items:flex-start;justify-content:center;background:var(--world-base);color:var(--world-ink)}
/* Match the ink and glass to the rendered light, including always-dark habitats.
   Only presentation tokens change; saved themes, time and climate stay intact. */
body.world-mode:has(.world-scene:is([data-time="night"],[data-habitat="abyss"],[data-habitat="sky"])) {
  --world-glass-rgb:4 20 31;--world-glass:rgb(4 20 31 / .24);--world-detail-glass:rgb(4 20 31 / .28);--world-ink:#f3fbff;
  --world-text-halo:0 1px 2px #00101fee,0 0 5px #00101fbb;
  --world-speech-glass:rgb(4 20 31 / .40);
  --world-good-glass:rgb(18 54 38 / .38);--world-good-ink:#e5f9df;
  --world-caution-glass:rgb(63 49 7 / .42);--world-caution-ink:#fff3c4;
  --world-warning-glass:rgb(66 36 8 / .46);--world-warning-ink:#ffe7ba;
  --world-critical-glass:rgb(73 21 29 / .52);--world-critical-ink:#ffebdf;
  --world-social-glass:rgb(61 25 49 / .38);--world-social-ink:#ffe7f3;
  --world-affection-glass:rgb(96 37 66 / .18);
  --world-play-glass:rgb(9 47 62 / .38);
  --world-toast-glass:rgb(4 20 31 / .42);
  --world-retry-glass:rgb(63 49 7 / .32);
  --world-farewell-glass:rgb(66 36 8 / .32);
  --world-farewell-button-glass:rgb(82 46 8 / .30);
}
/* Game-managed neutral glass. Only surface alpha is customizable, never ink or borders. */
.world-mode .device {
  --world-button-glass:rgb(var(--world-glass-rgb,245 253 255) / var(--ui-button-alpha,.28));
  --world-button-pressed:rgb(var(--world-glass-rgb,245 253 255) / calc(var(--ui-button-alpha,.28) + .16));
  --world-info-haze:rgb(var(--world-glass-rgb,245 253 255) / var(--ui-info-alpha,.48));
}
/* A narrow light halo protects small glyphs without whitening the whole pane. */
.world-mode :is(.name-plate,.header-button,.status-row,.sub-status-row,.cast-names,.world-care-state,.speech-bubble,.home-meters,.message,.ending-badge-tip,.birthday-toast,.mg-result-toast,.farewell-bar),.world-mode :is(.buttons,.life-actions) button {text-shadow:var(--world-text-halo)}
body.world-mode .season-tint,body.world-mode .time-tint,body.world-mode .region-decor,body.world-mode .season-bg-fx,body.world-mode .season-front-fx,body.world-mode .weather-fx {display:none!important}
/* The world already accounts for safe areas in its padding. Do not inherit
   the retired device frame's viewport-minus-40px height cap. */
.world-mode .device.surface-device {width:min(100%,620px);max-height:none;min-height:var(--app-height);padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;isolation:auto;z-index:2;--home-action-height:50px}
.world-mode .device.surface-device::before,.world-mode .screen.surface-screen::before,.world-mode .screen-frame::before,.world-mode .device::after {display:none}
.world-mode .device.ui-home-active {height:var(--app-height);min-height:0;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px}
.world-mode .device.ui-home-active:has(#screenNormal:not(.hidden)) {grid-template-rows:auto auto minmax(0,1fr) auto auto}
.world-mode .device.ui-home-active:has(#screenNormal:not(.hidden)) > #message {grid-row:2}
.world-mode .device.ui-home-active:has(#screenNormal:not(.hidden)) > .screen-frame {grid-row:3}
/* Keep controls visible when large text, warnings or badges need extra room. */
.world-mode .device.ui-home-active .screen-frame {min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
/* Definite heights let the cast give back spare space. Clear the legacy
   min-content flex minimums; any genuinely excessive content scrolls here. */
.world-mode .device.ui-home-active:has(#screenNormal:not(.hidden)) .screen-frame {display:block}
.world-mode .device.ui-home-active:has(#screenNormal:not(.hidden)) #screen {height:100%;min-height:0}
.world-mode .device.ui-home-active:has(#screenNormal:not(.hidden)) #screenNormal {min-height:0}
/* The living home is a fixed viewport. Detail/record screens retain their own
   scrolling, as do long narration and dialogue text. home-touch.js blocks
   one-finger overscroll only here and leaves enlarged views usable. */
html:has(.world-mode .device[data-home-fixed="true"]) {overflow:hidden;overscroll-behavior:none}
body.world-mode:has(.device[data-home-fixed="true"]) {height:var(--app-height);overflow:hidden;overscroll-behavior:none}
.world-mode .device.ui-home-active[data-home-fixed="true"] {position:fixed;inset:0;margin-inline:auto}
.world-mode .device.ui-home-active[data-home-fixed="true"] .screen-frame {overflow:clip;overscroll-behavior:none}
.world-mode .device[data-home-fixed="true"] #screenNormal {container:home-content / size}
.world-mode .device[data-home-fixed="true"] #petArea {min-height:0}
.world-mode .device[data-home-fixed="true"] .cast-stage {min-height:152px}
.world-mode .device-top {display:none}
.world-mode .device-header {display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:44px;padding:0;gap:8px;z-index:5}
.world-mode .header-title,.world-mode .cast-badges,.world-mode .cast-badges > div {min-width:0;max-width:100%}
.world-mode .name-plate {overflow-wrap:anywhere}
.world-mode .header-title,.world-mode .device:not(.theme-default) .header-title {padding:5px 9px;background:none;border:0;border-radius:0;box-shadow:none}
.world-mode .name-plate {font-size:18px;color:var(--world-ink);letter-spacing:.07em}
.world-mode .header-button {min-width:52px;min-height:48px;background:var(--world-button-glass);border:1px solid #f4ffffd9;color:var(--world-ink);box-shadow:0 0 0 1px #143b4b80,0 3px 10px #052f3d26}
.world-mode .header-actions {flex-shrink:0}
.world-mode .header-button span {font-size:12px;white-space:nowrap}
.world-mode .screen-frame {padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;min-width:0}
.world-mode .screen.surface-screen {padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--world-ink);overflow:visible;isolation:auto}
.world-mode .screen-normal {gap:5px}
.world-mode .status-row {align-items:center;font-size:14px;line-height:1.35;gap:4px;padding:5px 10px;background:none;border:0;border-radius:0;color:var(--world-ink)}
.world-mode #ageLabel,.world-mode #sodachiLabel,.world-mode #moneyLabel {font-size:13px;color:var(--world-ink)}
.world-mode .sub-status-row {padding:4px 9px;margin:0;background:none;border:0;border-radius:0;font-size:12px;line-height:1.4;color:var(--world-ink);opacity:1}
.world-mode .cast-heading {padding:4px 0 0;gap:5px;flex-direction:column;z-index:3}
.world-mode .cast-names {flex:initial;padding:4px 10px;border:0;border-radius:0;background:none;color:var(--world-ink)}
.world-mode .device.ui-home-compact .cast-names {flex-direction:column;flex-wrap:nowrap;gap:2px}
.world-mode #mainNameLabel {font-size:15px}
.world-mode #partnerLabel {font-size:13px}
.world-mode .partner-affection {display:inline-block;white-space:nowrap;margin-left:5px;padding:0 4px;background:none;color:var(--world-social-ink,#702747);font-size:12px;font-weight:600}
.world-mode .stage-name-row {font-size:12px;opacity:1}
.world-description {display:none}
.world-mode .world-description {display:block;margin:0;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.world-care-state {display:none}
.world-mode .world-care-state {display:flex;align-items:center;justify-content:center;gap:4px;min-height:23px;padding:2px 8px;border:0;border-radius:0;background:none;color:var(--world-good-ink,#173825);font-size:12px;font-weight:600;line-height:1.3}
.world-mode .world-care-state .care-icon {width:19px;height:19px;flex-basis:19px}
.world-mode [data-world-care="none"] .world-care-state {visibility:hidden}
.world-mode [data-world-care="caution"] .world-care-state {color:var(--world-caution-ink,#684308)}
.world-mode [data-world-care="warning"] .world-care-state {color:var(--world-warning-ink,#78350c)}
.world-mode [data-world-care="critical"] .world-care-state {color:var(--world-critical-ink,#871e25);font-weight:700}
.world-mode #petArea {flex:1;gap:0;min-height:200px;position:relative}
.world-mode .cast-stage {min-height:146px;background:none!important}
.world-mode .cast-stage::before {display:none!important}
.world-mode .cast-stage::after {content:"";position:absolute;inset:30% 18% 22px;z-index:-1;border-radius:50%;opacity:0;pointer-events:none}
.world-mode [data-world-care="warning"] .cast-stage::after {opacity:.5;box-shadow:0 0 28px 10px #fff0b099}
.world-mode [data-world-care="critical"] .cast-stage::after {background:radial-gradient(ellipse,transparent 42%,#ffe2c68c 68%,transparent 74%);box-shadow:0 0 25px 8px #fff0c65e;animation:world-care-pulse 2.8s ease-in-out infinite}
.world-mode .cast-sway {animation:world-float 6s ease-in-out infinite}
.world-mode[data-world-motion="breeze"] .cast-sway {animation:world-breeze 8s ease-in-out infinite}
.world-mode[data-world-motion="still"] .cast-sway {animation:none}
.world-mode .screen.sleeping .cast-sway {animation-duration:10s}
.world-mode .screen.dying>.screen-normal {filter:none}
.world-mode .speech-slot {position:absolute;left:var(--home-speech-x,32px);top:var(--home-speech-y,100%);width:var(--home-speech-width,calc(100% - 64px));height:44px;font-size:14px;padding:0;align-items:flex-start;z-index:4}
.world-mode .speech-slot .speech-bubble {width:100%;max-width:100%;font-size:14px;border:0;background:rgb(250 253 250 / .82);box-shadow:0 3px 10px #133d4e18;padding:2px 8px;color:#142e36;text-shadow:none;border-radius:13px;cursor:default}
.world-mode .speech-slot .speech-bubble::before {left:var(--speech-tail-x,50%);width:14px;height:6px;top:-5px;background:rgb(250 253 250 / .82);border:0;transform:translateX(-50%);clip-path:polygon(var(--speech-tail-tip,50%) 0,100% 100%,0 100%)}
.world-mode .speech-slot.is-asking {z-index:6}
.world-mode .speech-choice {background:rgb(250 253 250 / .96);border:0;box-shadow:0 3px 10px #133d4e33;color:#142e36;text-shadow:none}
/* Keep the portrait size, but let the column fit the complete speaker name.
   The adjacent scrollable dialogue owns the remaining width. */
.world-mode #speechSpeaker {display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;width:max-content;min-width:52px;flex:0 0 auto;gap:1px;font-size:18px}
.world-mode #speechSpeaker::after {content:attr(data-label);display:block;white-space:nowrap;font-size:10px;line-height:1.2;font-weight:600}
.world-mode #poopRow {inset:0;height:auto;text-align:left}
.world-mode #poopRow > .care-icon {position:absolute;left:calc(var(--home-poop-x) + var(--poop-column,0)*var(--home-poop-step,14px));top:var(--home-poop-top);width:var(--home-poop-size,12px);height:var(--home-poop-size,12px);margin:0;font-size:var(--home-poop-size,12px);line-height:1}
.world-mode #poopRow > .care-icon:nth-child(2) {--poop-column:1}
.world-mode #poopRow > .care-icon:nth-child(3) {--poop-column:2}
.world-mode #poopRow > .care-icon:nth-child(4) {--poop-column:3}
.world-mode .home-meters {position:relative;isolation:isolate;padding:9px 11px;margin:0;border:0;border-radius:0;gap:7px;background:none;color:var(--world-ink);box-shadow:none;z-index:4}
/* Local information support feathers away without a card-shaped edge. */
.world-mode :is(.header-title,.status-row,.sub-status-row,.cast-names,.world-care-state,.world-information) {position:relative;isolation:isolate}
.world-mode :is(.header-title,.status-row,.sub-status-row,.cast-names,.world-care-state,.home-meters,.world-information)::before,
.world-mode :is(.ending-badge-tip,.birthday-toast,.mg-result-toast,.farewell-bar)::before,
.world-mode .device #message::after,.world-mode .design-preview-narration::after {
  content:"";position:absolute;inset:-8px -8px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--world-info-haze) 12% 88%,transparent);
  mask-image:linear-gradient(transparent,#000 28% 72%,transparent);
  -webkit-mask-image:linear-gradient(transparent,#000 28% 72%,transparent);
}
.world-mode .home-meters::after,.world-mode .buttons button>span::before {display:none}
/* The meters end the central panel; their haze must not add scroll height. */
.world-mode .home-meters::before {bottom:0}
/* Narration scrolls for long text: its support must stay inside the scroll box. */
.world-mode .device #message::after {inset:0;mask-image:linear-gradient(transparent,#000 15% 85%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 15% 85%,transparent)}
.world-mode .home-meters .care-meters {grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.world-mode .home-meters .care-meters .bar-line {grid-template-columns:1fr auto;grid-template-rows:auto 7px;gap:4px 3px}
.world-mode .home-meters .bar-label {font-size:13px;color:var(--world-ink);font-weight:500}
.world-mode .home-meters .bar-value {font-size:12px;color:var(--world-ink);font-weight:600}
.world-mode .care-meters .bar-label {grid-column:1;grid-row:1}
.world-mode .care-meters .bar-value {grid-column:2;grid-row:1}
.world-mode .care-meters .bar {grid-column:1/-1;grid-row:2}
.world-mode .home-meters .bars.meters {grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 12px;border:0;margin:0;padding-top:7px}
.world-mode .home-meters .meters .bar-line {grid-column:span 2;grid-template-columns:1fr auto;grid-template-rows:auto 6px;gap:3px}
.world-mode .home-meters .meters .bar-line:nth-child(n+4) {grid-column:span 3}
.world-mode .home-meters .meters .bar-label {grid-column:1;grid-row:1;font-size:12px}
.world-mode .home-meters .meters .bar-value {grid-column:2;grid-row:1;font-size:11px}
.world-mode .home-meters .meters .bar {grid-column:1/-1;grid-row:2}
.world-mode .home-meters .bar {height:7px;background:#e9f4f5c2!important;box-shadow:inset 0 0 0 1px #33566266;border-radius:10px}
.world-mode .screen.surface-screen .home-meters .bar-fill:not(.low):not(.critical):not(.high) {background:#37836b}
.world-mode .screen.surface-screen .home-meters .bar-fill.happiness:not(.low):not(.critical) {background:#a65e82}
.world-mode .screen.surface-screen .home-meters .bar-fill.energy:not(.low):not(.critical) {background:#467d9d}
.world-mode .screen.surface-screen .home-meters .bar-fill.death:not(.low):not(.critical) {background:#37836b}
.world-mode .screen.surface-screen .home-meters .bar-fill.devo:not(.high):not(.critical) {background:#a77e3f}
.world-mode .screen.surface-screen .home-meters .bar-fill.transform:not(.high):not(.low):not(.critical),.world-mode .screen.surface-screen .home-meters .bar-fill.goal:not(.high):not(.low):not(.critical) {background:#7b68a1}
/* Narration is text on the world; icon and wording retain the urgency signal. */
.world-mode .device #message {position:relative;isolation:isolate;height:calc(2.8em + 4px);min-height:calc(2.8em + 4px);font-size:13px;line-height:1.4;padding:2px 8px;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--world-ink);z-index:4}
.world-mode .device[data-text-size="large"] #message {font-size:14px}
.world-mode .device #message[data-care-kind="change"] {color:var(--world-good-ink,#183319)}
.world-mode .device #message[data-care-severity="warning"],.world-mode .device #message[data-care-tone="loss"],.world-mode .device #message[data-care-tone="mixed"] {color:var(--world-warning-ink,#78350c)}
.world-mode .device #message[data-care-severity="critical"] {color:var(--world-critical-ink,#871e25);font-weight:700}
.world-mode .device #message[data-care-icon]::before {margin-right:4px}
.world-mode :is(.ending-badge-tip,.birthday-toast,.mg-result-toast) {isolation:isolate;border:0;border-radius:0;background:none;box-shadow:none;color:var(--world-ink)}
.world-mode :is(.birthday-toast,.mg-result-toast) {max-width:calc(100% - 16px);white-space:normal;overflow-wrap:anywhere}
.world-mode .birthday-toast {width:max-content}
.world-mode .mg-result-toast {width:min(360px,calc(100% - 16px));display:grid;grid-template-columns:auto minmax(0,1fr) auto}
.world-mode .mg-result-toast.hidden {display:none}
.world-mode .mg-result-body {min-width:0}
.world-mode .mg-result-toast .mg-result-score {white-space:nowrap}
.world-mode .mg-result-toast .mg-retry-btn {flex-shrink:0;min-height:44px;white-space:nowrap}
.world-mode .mg-result-toast .mg-result-sub {opacity:1}
.world-mode .mg-result-toast .mg-result-sub.new-best {color:var(--world-caution-ink,#61420b)}
.world-mode .mg-result-toast .mg-retry-btn {background:var(--world-button-glass);color:var(--world-ink);border:1px solid #f4ffffd9;box-shadow:0 0 0 1px #143b4b80}
/* These fills encode state, independently of the design collection palette. */
.world-mode .screen.surface-screen .home-meters .bar-fill.low {background:#b35415}
.world-mode .screen.surface-screen .home-meters .bar-fill.critical,
.world-mode .screen.surface-screen .home-meters .bar-fill.death.low {background:#be2939}
.world-mode .screen.surface-screen .home-meters .bar-fill.devo.high {background:#b35415;box-shadow:0 0 6px #b3541580}
.world-mode .buttons,.world-mode .device.ui-home-compact .buttons {grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0;padding:0;z-index:5}
.world-mode .buttons button,.world-mode .device.ui-home-compact .buttons button {grid-column:auto;min-height:50px;padding:6px 3px;border:1px solid #f4ffffd9;border-radius:17px;color:var(--world-ink);background:var(--world-button-glass);box-shadow:0 0 0 1px #143b4b80,0 4px 12px #153b4924;gap:5px;isolation:isolate;transition:transform .12s,background .12s,box-shadow .12s}
/* The legacy travel/menu ID rules outrank the shared button class above. */
.world-mode .buttons :is(#travelBtn,#menuBtn) {background:var(--world-button-glass);color:var(--world-ink);border-color:#f4ffffd9;box-shadow:0 0 0 1px #143b4b80,0 4px 12px #153b4924}
.world-mode .life-actions button {background:var(--world-button-glass);color:var(--world-ink);border-color:#f4ffffd9;box-shadow:0 0 0 1px #143b4b80,0 4px 12px #153b4924}
.world-mode .farewell-bar {position:relative;isolation:isolate;font-size:13px;flex-shrink:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--world-warning-ink,#78350c)}
.world-mode .farewell-bar button {min-height:44px;padding:8px 12px;font-size:13px;background:linear-gradient(#ffd88433,#ffd88433),var(--world-button-glass);color:var(--world-warning-ink,#78350c);border:1px solid #fff0c9;box-shadow:0 0 0 1px #a4772d}
.world-mode .buttons button::before {display:none}
.world-mode .buttons button span,.world-mode .device.ui-home-compact .buttons button span {font-size:14px;color:inherit}
.world-mode .buttons #playBtn {background:linear-gradient(#43acd221,#43acd221),var(--world-button-glass);color:var(--world-ink);border-color:#c6f1ff;box-shadow:0 0 0 1px #22607ecc,0 4px 12px #153b4924}
.world-mode .buttons #courtBtn,.world-mode .buttons #playWithBtn {background:linear-gradient(#ef91b529,#ef91b529),var(--world-button-glass);color:var(--world-social-ink,#702747);border-color:#ffdfec;box-shadow:0 0 0 1px #a44c7a99,0 4px 12px #153b4924}
.world-mode .buttons button:disabled {opacity:1;filter:none;border-style:dashed}
.world-mode .buttons button:disabled .care-icon {opacity:.65;filter:grayscale(.6)}
.world-mode .buttons button[data-care-recommended="true"] {box-shadow:inset 0 0 0 2px #b47735,0 3px 12px #17374738}
/* A double light/dark edge remains recognizable on both snow and night. */
.world-mode .ending-badge {min-width:32px;min-height:32px;border:1px solid #f4ffffd9;border-radius:10px;background:var(--world-button-glass);box-shadow:0 0 0 1px #143b4b80}
.world-mode .ending-badges {flex-wrap:wrap;gap:4px}
.world-mode :is(.header-button,.ending-badge,.life-actions button,.world-glass-button,.farewell-bar button,.mg-retry-btn):active:not(:disabled),
.world-mode .device .buttons button:active:not(:disabled),
.world-mode .buttons :is(#travelBtn,#menuBtn,#playBtn,#courtBtn,#playWithBtn):active:not(:disabled) {
  background:var(--world-button-pressed);transform:var(--world-press-transform);box-shadow:inset 0 0 0 1px #ffffffb3,0 0 0 1px #143b4b80;
}
.world-mode :is(.header-button,.ending-badge,.buttons button,.life-actions button,.world-glass-button,.farewell-bar button,.mg-retry-btn):focus-visible {outline:3px solid var(--world-ink);outline-offset:3px}
.world-mode .screen:not(:has(.screen-normal:not(.hidden))) {background:#f4faf7f5;color:#0b2028;border-radius:20px;padding:10px}
.world-mode .device.ui-game-active {max-width:620px;height:var(--app-height);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.world-mode .device.ui-game-active .screen-frame {min-height:0;overflow:auto;overscroll-behavior:contain;display:block}
.world-mode .device.ui-game-active .screen {min-height:100%;background:transparent;color:#0b2028;border-radius:20px;padding:10px}
.world-mode .device.ui-game-active .life-actions {display:none}
/* Keep the world visible through the game shell. Board/Canvas palettes retain
   their own ink and opaque pieces; only shared HUD and controls use world ink.
   Inset outlines preserve the existing button sizes and pointer coordinates. */
.world-mode .minigame-overlay {background:transparent}
.world-mode .minigame-overlay :is(.mg-header,.mg-title,.mg-hint,.mg-climb-choice) {
  background:var(--world-detail-glass);color:var(--world-ink);
  text-shadow:var(--world-text-halo);border-radius:10px;opacity:1;
}
.world-mode .minigame-overlay .mg-timer.low {color:var(--world-critical-ink,#871e25)}
.world-mode .minigame-overlay .mg-intro {
  background:var(--world-glass);color:var(--world-ink);
  text-shadow:var(--world-text-halo);box-shadow:inset 0 0 0 1px #ffffff70;
}
.world-mode .minigame-overlay .mg-intro-controls {background:var(--world-detail-glass)}
.world-mode .minigame-overlay .mg-intro-demo {background:rgb(245 253 255 / .70)}
.world-mode .minigame-overlay :is(.mg-intro-genre,.mg-intro-note) {opacity:1}
.world-mode .minigame-overlay .mg-intro-badge {
  background:var(--world-caution-glass,rgb(255 248 217 / .42));
  color:var(--world-caution-ink,#49320b);box-shadow:inset 0 0 0 1px #b88740;
}
.world-mode .minigame-overlay :is(.mg-tap-btn,.mg-choice-btn,.mg-hold-btn) {
  background:var(--world-button-glass,var(--world-detail-glass));color:var(--world-ink);
  text-shadow:var(--world-text-halo);
  box-shadow:inset 0 0 0 1px #ffffffad,0 3px 9px #052e4440;
}
.world-mode .minigame-overlay :is(.mg-intro-start,.mg-launch-btn,.mg-tap-btn.primary) {
  background:var(--world-button-glass,var(--world-play-glass,rgb(207 241 250 / .38)));
  box-shadow:inset 0 0 0 2px #80cde0,0 3px 9px #052e4440;
}
.world-mode .minigame-overlay :is(.mg-tap-btn,.mg-choice-btn,.mg-hold-btn):is(:active,.mg-held,.mg-holding) {
  background:var(--world-button-pressed,var(--world-speech-glass,rgb(250 255 255 / .42)));
  box-shadow:inset 0 0 0 2px #80cde0,0 1px 4px #052e4440;
}
/* The legacy guard uses an ID selector; cover its resting and held palettes. */
.world-mode .minigame-overlay #sfGuard {background:var(--world-button-glass,var(--world-detail-glass));color:var(--world-ink)}
.world-mode .minigame-overlay #sfGuard:is(:active,.mg-held,.mg-holding) {background:var(--world-button-pressed,var(--world-speech-glass,rgb(250 255 255 / .42)))}
.world-mode .minigame-overlay .mg-tap-btn.sel {box-shadow:inset 0 0 0 3px #ffd23f,0 3px 9px #052e4440}
.world-mode .minigame-overlay :is(.mg-tap-btn,.mg-choice-btn,.mg-hold-btn):disabled {
  opacity:1;filter:grayscale(.5);outline:1px dashed #75949d;outline-offset:-2px;
  box-shadow:inset 0 0 0 1px #75949d70;
}
/* Answer feedback remains distinct and readable on its existing light fills. */
.world-mode .minigame-overlay :is(.mg-reveal-correct,.mg-reveal-incorrect,.mg-mistake-flash) {color:#0b2028;text-shadow:none}
/* The shared footer keeps its height when confirmation replaces the controls.
   Only the game content scrolls; opening confirmation never shifts a Canvas. */
.world-mode .device.ui-game-active .mg-quit {height:50px;min-height:50px;margin-top:0}
.world-mode .device.ui-game-active .mg-quit-inner {position:relative;inset:auto;transform:none;height:50px;align-items:center;gap:8px}
.world-mode .device.ui-game-active .mg-quit button {min-height:44px;min-width:44px;white-space:nowrap}
.world-mode .device.ui-game-active .mg-help-btn {margin:0}
.world-mode .device.ui-game-active .mg-quit-confirm:not(.hidden) {position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;max-width:100%;padding:3px 6px;white-space:normal}
.world-mode .device.ui-game-active .mg-quit-ask {min-width:0;line-height:1.3}
.world-mode .device.ui-game-active .mg-quit-inner:has(.mg-quit-confirm:not(.hidden)) .mg-help-btn {visibility:hidden}
.world-mode .mg-quit :is(.mg-quit-btn,.mg-quit-confirm,.mg-quit-no) {
  background:var(--world-button-glass,var(--world-speech-glass,rgb(250 255 255 / .42)));
  color:var(--world-ink);text-shadow:var(--world-text-halo);
  box-shadow:inset 0 0 0 1px #ffffffad,0 3px 9px #052e4440;
}
.world-mode .mg-quit .mg-quit-yes {
  background:var(--world-critical-glass,rgb(255 240 233 / .52));
  color:var(--world-critical-ink,#582024);text-shadow:var(--world-text-halo);
  box-shadow:inset 0 0 0 1px #b24949;
}
.world-mode .minigame-overlay :is(.mg-header,.mg-title,.mg-hint,.mg-climb-choice,.mg-intro-controls,.mg-tap-btn,.mg-choice-btn,.mg-hold-btn),
.world-mode .mg-quit :is(.mg-quit-btn,.mg-quit-confirm) {
  backdrop-filter:blur(var(--world-glass-blur));-webkit-backdrop-filter:blur(var(--world-glass-blur));
}
.world-mode .device[data-text-size="large"] .home-meters .bar-label,.world-mode .device[data-text-size="large"] .home-meters .bar-value {font-size:14px}
.world-mode .device[data-text-size="large"] .care-meters {grid-template-columns:repeat(2,minmax(0,1fr))}
.world-mode .device[data-text-size="large"] .meters .bar-line {grid-column:span 3;grid-template-columns:1fr auto}
/* Explicitly replace both the regular and the pre-existing compact meter grid.
   Labels keep their own row, so Japanese text cannot collide with a value. */
.world-mode .device .home-meters {margin-top:0}
.world-mode .device .home-meters .care-meters .bar-line,.world-mode .device .home-meters .meters .bar-line {grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:2px 4px}
.world-mode .device .home-meters .bar-label {grid-column:1/-1;grid-row:1;white-space:nowrap}
.world-mode .device .home-meters .bar {grid-column:1;grid-row:2}
.world-mode .device .home-meters .bar-value {grid-column:2;grid-row:2}
.world-mode :is(.header-button,.ending-badge,.speech-bubble,.world-glass-button),.world-mode :is(.buttons,.life-actions) button {backdrop-filter:blur(var(--world-glass-blur));-webkit-backdrop-filter:blur(var(--world-glass-blur))}
@media(min-width:800px){.world-mode .device.surface-device{padding-left:max(26px,env(safe-area-inset-left));padding-right:max(26px,env(safe-area-inset-right))}.world-mode .world-kelp{left:calc(50% - 400px)}.world-mode .world-fan{right:calc(50% - 390px)}}
@media(max-width:360px){.world-mode .device.surface-device{padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right))}.world-mode .home-meters{padding:8px}.world-mode .home-meters .care-meters{gap:6px}.world-mode .care-meters .bar-value{font-size:11px}.world-mode .home-meters .bars.meters{column-gap:7px}.world-mode .buttons button{gap:3px}.world-mode .buttons .care-icon{width:23px;height:23px;flex-basis:23px}}
@media(max-height:700px){
  .world-mode .device.surface-device{padding-top:max(6px,env(safe-area-inset-top));gap:3px}
  .world-mode .screen-normal{gap:2px}
  .world-mode .cast-stage{min-height:132px}
  .world-mode #petArea{min-height:186px}
  .world-mode .header-title{padding:3px 7px}
  .world-mode .device .device-header{padding-bottom:0}
  .world-mode .status-row{padding-block:1px}
  .world-mode .sub-status-row{padding-block:1px}
  /* Reserve room for warnings and the complete care row on short screens. */
  .world-mode .cast-names{padding-block:1px}
  .world-mode .world-care-state{min-height:19px;padding-block:0}
  .world-mode [data-world-care="normal"] .world-care-state,.world-mode [data-world-care="none"] .world-care-state{display:none}
  .world-mode .home-meters{padding-block:3px;gap:4px}
  .world-mode .device .home-meters .bars.meters{padding-top:4px;gap:4px 7px}
  .world-mode .buttons,.world-mode .device.ui-home-compact .buttons{grid-template-columns:repeat(20,minmax(0,1fr));gap:6px}
  .world-mode .buttons button,.world-mode .device.ui-home-compact .buttons button{grid-column:span 4;flex-direction:column;min-height:48px;padding:3px 1px;gap:1px;border-radius:13px}
  .world-mode .buttons button:nth-child(n+6),.world-mode .device.ui-home-compact .buttons button:nth-child(n+6){grid-column:span 5}
  .world-mode .buttons .care-icon{width:22px;height:22px;flex-basis:22px}
  .world-mode .buttons button span{white-space:nowrap;line-height:1.25}
}
.world-mode[data-world-paused="true"] .world-scene *,.world-mode[data-world-paused="true"] .world-scene *::after,.world-mode[data-world-paused="true"] .cast-sway,.world-mode[data-world-paused="true"] .cast-stage::after {animation-play-state:paused!important}
.world-mode[data-world-tier="2"] .world-light::after {display:none}
.world-mode[data-world-tier="2"] {--world-glass-blur:0px}
.world-mode[data-world-reduced="true"] .world-scene *,.world-mode[data-world-reduced="true"] .world-scene *::after,.world-mode[data-world-reduced="true"] .cast-sway,.world-mode[data-world-reduced="true"] .cast-stage::after {animation:none!important;transition:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){.world-mode .world-scene *,.world-mode .world-scene *::after,.world-mode .cast-sway,.world-mode .cast-stage::after{animation:none!important;transition:none!important;will-change:auto}.world-mode [data-world-care="critical"] .cast-stage::after{opacity:.65}}
@media(forced-colors:active){.world-mode .home-meters,.world-mode .buttons button,.world-mode .world-care-state{background:Canvas;border:1px solid CanvasText;color:CanvasText}.world-mode .world-scene{display:none}.world-mode .home-meters .bar{border:1px solid CanvasText}.world-mode .screen.surface-screen .home-meters .bar-fill{background:Highlight!important}}

/* Let badges use the whole narrow header instead of stacking under the name.
   This keeps the existing badge sizes and every care key on the screen. */
@media(max-width:460px), (max-height:500px) {
  .world-mode .device[data-home-fixed="true"] .device-header:has(.ending-badges:not(:empty)) {row-gap:3px;position:relative}
  .world-mode .device[data-home-fixed="true"] .header-title:has(.ending-badges:not(:empty)) {display:contents}
  .world-mode .device[data-home-fixed="true"] .header-title:has(.ending-badges:not(:empty))::before {display:none}
  .world-mode .device[data-home-fixed="true"] .ending-badge-tip {max-width:100%}
  .world-mode .device[data-home-fixed="true"] .header-title:has(.ending-badges:not(:empty)) .name-plate {grid-column:1;grid-row:1}
  .world-mode .device[data-home-fixed="true"] .device-header:has(.ending-badges:not(:empty)) .header-actions {grid-column:2;grid-row:1}
  .world-mode .device[data-home-fixed="true"] .header-title:has(.ending-badges:not(:empty)) .cast-badges {grid-column:1/-1;grid-row:2;gap:3px}
  .world-mode .device[data-home-fixed="true"] .header-title:has(.ending-badges:not(:empty)) :is(.badges,.ending-badges) {display:contents}
}

/* Adapt to the actual space below Safari's bars and the header, rather than
   the nominal device height. Dialogue keeps its own compact floor below the
   cast; names and narration remain readable while any character speaks. */
@container home-content (max-height:460px) {
  .world-mode .status-row {padding-block:0}
  .world-mode .sub-status-row {padding-block:0}
  .world-mode .cast-heading {min-height:0;padding:0;gap:0}
  .world-mode .cast-names {padding-block:0;gap:1px}
  .world-mode .cast-title-line {line-height:1.2}
  .world-mode .world-care-state {display:none}
  .world-mode .device[data-home-fixed="true"] #petArea {min-height:152px}
  .world-mode .device .home-meters {padding-block:1px;gap:2px}
  .world-mode .device .home-meters .care-meters {grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .world-mode .device .home-meters .bars.meters {grid-template-columns:repeat(6,minmax(0,1fr));padding-top:2px;gap:2px 7px}
  .world-mode .device .home-meters .meters .bar-line {grid-column:span 2}
  .world-mode .device .home-meters .meters .bar-line:nth-child(n+4) {grid-column:span 3}
  .world-mode .device .home-meters :is(.bar-label,.bar-value) {line-height:1.15}
}

/* At SE height, two name rows can consume the last meter row. Share one
   line while retaining both names and the full speaker label in dialogue. */
@container home-content (max-height:360px) {
  /* Keep every meter visible with large text and short visual viewports. */
  .world-mode .device .home-meters {gap:0}
  .world-mode .device .home-meters :is(.care-meters,.meters) .bar-line {row-gap:0}
  .world-mode .device.ui-home-compact .cast-names:has(#partnerLabel:not(:empty)) {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px}
  .world-mode .cast-names:has(#partnerLabel:not(:empty)) .cast-title-line {min-width:0;flex-wrap:nowrap}
  .world-mode .cast-names:has(#partnerLabel:not(:empty)) #mainNameLabel {flex-shrink:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .world-mode .cast-names:has(#partnerLabel:not(:empty)) .stage-name-row,
  .world-mode .cast-names #partnerLabel {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Keep large labels readable on an SE-size viewport. Reclaim padding around
   the controls, retaining at least a 44px touch target and every badge. */
@media(max-width:360px) {
  .world-mode .device.ui-home-compact[data-home-fixed="true"][data-text-size="large"] {gap:2px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .world-mode .device.ui-home-compact[data-home-fixed="true"][data-text-size="large"] .header-button {min-height:44px;padding-block:2px;gap:1px}
  .world-mode .device.ui-home-compact[data-home-fixed="true"][data-text-size="large"] .device-header:has(.ending-badges:not(:empty)) {row-gap:1px}
  .world-mode .device.ui-home-compact[data-home-fixed="true"][data-text-size="large"] .buttons button {min-height:44px;padding-block:1px}
}

/* A short landscape viewport has room beside the cast. Put the header and
   controls in that space instead of leaving a shallow strip for the world. */
@media(max-height:500px) and (min-width:640px) {
  .world-mode .device.ui-home-active[data-home-fixed="true"]:has(#screenNormal:not(.hidden)) {
    width:100%;max-width:1100px;grid-template-columns:minmax(0,1fr) 250px;
    grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px 12px;
  }
  .world-mode .device.ui-home-active[data-home-fixed="true"]:has(#screenNormal:not(.hidden)) > .screen-frame {grid-column:1;grid-row:1/-1}
  .world-mode .device[data-home-fixed="true"] .device-header {grid-column:2;grid-row:1}
  .world-mode .device[data-home-fixed="true"] #message {grid-column:2;grid-row:2;align-self:end}
  .world-mode .device[data-home-fixed="true"] .buttons {grid-column:2;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr))}
  .world-mode .device.ui-home-active[data-home-fixed="true"] .buttons button {grid-column:auto;min-height:48px}
  .world-mode .device[data-home-fixed="true"] .life-actions {grid-column:2;grid-row:4}
}

/* Preview uses the same controls and information tokens against today's scenery. */
.design-preview {position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;gap:10px;padding:12px 18px 16px;min-height:175px;margin-bottom:16px;color:var(--world-ink);background:#b5d9d6}
.design-preview-world {position:absolute;inset:0;z-index:-2;background:var(--world-preview-image) center 65%/cover;filter:var(--world-preview-filter)}
.design-preview-caption {justify-self:start;color:#fff;font-size:11px;text-shadow:0 1px 3px #00101f,0 0 5px #00101f}
.design-preview-info,.design-preview-narration {position:relative;isolation:isolate;margin:0;font-size:13px;line-height:1.4;text-align:center;text-shadow:var(--world-text-halo);color:var(--world-ink)}
.world-glass-button {min-height:44px;min-width:150px;padding:8px 18px;border:1px solid #f4ffffd9;border-radius:15px;background:var(--world-button-glass);box-shadow:0 0 0 1px #143b4b80,0 4px 12px #153b4924;color:var(--world-ink);text-shadow:var(--world-text-halo)}
@media(prefers-reduced-motion:reduce){body.world-mode{--world-press-transform:none}.world-mode .buttons button{transition:none}}

/* Current location is a separate visible choice from the indoor home. */
#currentLocationBtn.selected {border:2px solid var(--accent,#437765);box-shadow:0 0 0 2px #47756833;font-weight:700}