/* Removable local UI experiment. Existing theme tokens are never modified. */
.memories-play-prototype-nav .memories-bottom-nav-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.memories-play-prototype-nav .memories-nav-item { min-width: 0; font-size: 10px; }
.memories-play-prototype-nav .memories-play-nav-item {
    position: relative; align-content: end; gap: 0; padding: 0 0 3px;
    border: 0; background: transparent; box-shadow: none; color: var(--mem-espresso);
}
.memories-play-prototype-nav .memories-play-nav-item.is-active,
.memories-play-prototype-nav .memories-play-nav-item.is-active:hover {
    background: transparent; box-shadow: none; color: var(--mem-espresso); transform: none;
}
.memories-play-prototype-nav .memories-play-orb {
    position: absolute; left: 50%; top: -22px; display: grid; place-items: center;
    width: 58px; height: 58px; border-radius: 21px;
    border: 1px solid var(--mem-gold);
    background: linear-gradient(145deg, var(--mem-terracotta), var(--mem-clay));
    color: var(--mem-on-accent); transform: translateX(-50%);
    box-shadow: 0 8px 16px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.35), inset 0 -4px 7px rgba(0,0,0,.15);
    transition: transform .18s ease, box-shadow .18s ease;
}
.memories-play-prototype-nav .memories-play-orb i { font-size: 24px; color: var(--mem-on-accent); }
/* In these moods the main accent token is gold, not a dark button surface. */
html:is([data-memories-theme="royal-blue"], [data-memories-theme="wine-red"]) .memories-play-prototype-nav .memories-play-orb {
    background: linear-gradient(145deg, var(--mem-premium-burgundy), var(--mem-premium-burgundy-deep));
}
.memories-play-prototype-nav .memories-play-nav-item.is-active .memories-play-orb {
    outline: 3px solid var(--mem-surface-raised); outline-offset: 2px;
    box-shadow: 0 8px 18px rgba(0,0,0,.23), 0 0 0 5px var(--mem-gold), inset 0 1px 2px rgba(255,255,255,.35);
}
.memories-play-prototype-nav .memories-play-nav-item:active .memories-play-orb { transform: translateX(-50%) scale(.95); }
.memories-play-prototype-nav .memories-nav-item:focus-visible { outline: 2px solid var(--mem-gold); outline-offset: 3px; }
/* The existing shell already reserves 118px. Add only gesture-inset clearance. */
.memories-shell { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
.memories-toast { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
.memories-play-page { max-width: 660px; margin: 0 auto; padding: 26px 20px 16px; color: var(--mem-espresso); }
.memories-play-preview-label { display: inline-block; padding: 5px 9px; border: 1px solid var(--mem-border); border-radius: 8px; color: var(--mem-muted); background: var(--mem-surface-raised); font-size: 9px; letter-spacing: .12em; font-weight: 800; }
.memories-play-page h1 { margin: 14px 0 7px; font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(32px, 8vw, 42px); font-weight: 400; line-height: 1.15; }
.memories-play-intro { margin: 0 0 24px; color: var(--mem-muted); font-size: 13px; line-height: 1.6; }
.memories-play-feature { overflow: hidden; border: 1px solid var(--mem-border); border-radius: 26px; background: var(--mem-surface-raised); box-shadow: var(--mem-shadow); }
.memories-play-scene { position: relative; height: 225px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 70% 22%, #afbd93 0%, transparent 43%), linear-gradient(160deg, #1a514c, #173b36 60%, #102b25); }
.memories-play-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 65%, rgba(9,27,21,.75)); }
.memories-play-moon { position: absolute; width: 32px; height: 32px; border-radius: 50%; right: 20%; top: 27px; background: #f9e8b5; box-shadow: 0 0 35px rgba(246,220,150,.32); }
.memories-play-hill { position: absolute; width: 130%; height: 110px; left: -15%; bottom: 20px; border-radius: 60% 50% 0 0; background: #376357; transform: rotate(-7deg); }
.memories-play-hill.is-near { background: #24473a; bottom: -33px; transform: rotate(8deg); }
.memories-play-house { position: absolute; left: 50%; bottom: 51px; width: 158px; height: 103px; transform: translateX(-50%); filter: drop-shadow(0 15px 11px rgba(0,0,0,.3)); }
.memories-play-roof { position: absolute; left: -17px; top: 0; width: 192px; height: 48px; background: repeating-linear-gradient(0deg, #614533 0 5px, #382a22 6px 8px); clip-path: polygon(50% 0, 100% 90%, 97% 100%, 3% 100%, 0 90%); }
.memories-play-house-wall { position: absolute; inset: 44px 0 4px; display: flex; align-items: center; justify-content: space-around; padding: 4px 17px; border: 2px solid #94694a; background: repeating-linear-gradient(0deg, #644733 0 7px, #4c3426 8px 9px); box-shadow: inset 0 3px 14px #2b211b; }
.memories-play-house-wall::after { content: ''; position: absolute; left: 8px; right: 8px; top: 100%; height: 23px; border-left: 6px solid #493628; border-right: 6px solid #493628; }
.memories-play-house-wall i { width: 23px; height: 27px; border: 3px solid #332b20; background: linear-gradient(#d39546, #ffdd9b); box-shadow: 0 0 13px rgba(253,197,108,.4); }
.memories-play-house-wall i:nth-child(2) { height: 39px; align-self: end; }
.memories-play-house-steps { position: absolute; width: 44px; height: 25px; bottom: -24px; left: 57px; background: repeating-linear-gradient(0deg, #74553b 0 5px, #392e25 6px 8px); transform: perspective(100px) rotateX(25deg); }
.memories-play-palm { position: absolute; width: 9px; height: 114px; bottom: 30px; background: linear-gradient(90deg,#263f2c,#628154,#233926); transform: rotate(10deg); }
.memories-play-palm.is-left { left: 13%; }.memories-play-palm.is-right { right: 8%; height: 132px; transform: rotate(-12deg); }
.memories-play-palm i, .memories-play-palm::before, .memories-play-palm::after { content: ''; position: absolute; left: -40px; top: -9px; width: 86px; height: 32px; border-radius: 80% 10% 80% 10%; background: #254d36; transform: rotate(-20deg); }
.memories-play-palm::before { transform: rotate(48deg); }.memories-play-palm::after { transform: rotate(-64deg); }
.memories-play-scene-caption { position: absolute; bottom: 17px; left: 16px; right: 16px; z-index: 1; color: #f6ecd6; text-align: center; font-size: 10px; letter-spacing: .04em; }
.memories-play-feature-copy { padding: 22px; }
.memories-play-coming { display: inline-flex; align-items: center; gap: 6px; color: var(--mem-espresso); background: var(--mem-gold-soft); border: 1px solid var(--mem-border); padding: 6px 9px; font-size: 9px; font-weight: 800; letter-spacing: .08em; border-radius: 8px; }
.memories-play-feature h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 36px; margin: 13px 0 2px; line-height: 1.2; }
.memories-play-feature-subtitle { color: var(--mem-terracotta); font-size: 14px; font-weight: 800; margin: 0; }
.memories-play-description { color: var(--mem-muted); font-size: 12px; line-height: 1.6; margin: 12px 0 18px; }
.memories-play-features { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; color: var(--mem-espresso); font-size: 12px; font-weight: 700; }
.memories-play-features li { display: flex; gap: 10px; align-items: center; }.memories-play-features i { width: 16px; color: var(--mem-terracotta); text-align: center; }
.memories-play-preview-note { border-top: 1px solid var(--mem-border); margin: 19px 0 0; padding-top: 15px; color: var(--mem-muted); font-size: 11px; line-height: 1.65; }
.memories-play-home-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 15px; font-size: 12px; font-weight: 800; color: var(--mem-espresso); }
@media (max-width: 430px) {
    .memories-play-prototype-nav { padding-left: 8px; padding-right: 8px; }
    .memories-play-prototype-nav .memories-bottom-nav-inner { padding: 6px 4px; }
    .memories-play-prototype-nav .memories-nav-item { font-size: 9px; gap: 4px; }
    .memories-play-prototype-nav .memories-play-nav-item { gap: 0; }
    .memories-play-page { padding-left: 16px; padding-right: 16px; }
    .memories-play-feature-copy { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .memories-play-prototype-nav .memories-nav-item, .memories-play-prototype-nav .memories-play-orb { transition: none; }
    .memories-play-prototype-nav .memories-play-nav-item:active .memories-play-orb { transform: translateX(-50%); }
}