:root {
  color-scheme: dark;
  --plum: #2b1746;
  --plum-2: #4c2872;
  --violet: #7652bd;
  --magenta: #d854a8;
  --gold: #f4c66e;
  --cream: #fff6df;
  --ink: #231932;
  --glass: rgba(35, 22, 55, .84);
  --line: rgba(255, 246, 223, .22);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #130d20; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.game { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: linear-gradient(#9bd5d6, #e8d49b); }
#world { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.world-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 8%, rgba(255,248,204,.18), transparent 34%), linear-gradient(115deg, rgba(255,245,200,.05), transparent 50%, rgba(91,41,113,.08)); mix-blend-mode: screen; }
.hud { position: absolute; inset: 0; pointer-events: none; padding: max(18px, var(--safe-bottom)) max(20px, var(--safe-right)) max(18px, var(--safe-bottom)) max(20px, var(--safe-left)); }
.hud button, .hud .avatar-panel, .hud .zoom-control { pointer-events: auto; }

.avatar-button { position: absolute; z-index: 12; top: max(18px, var(--safe-bottom)); left: max(22px, var(--safe-left)); width: clamp(92px, 9vw, 132px); height: clamp(92px, 9vw, 132px); padding: 0; border: 0; border-radius: 50%; background: transparent; filter: drop-shadow(0 14px 22px rgba(30,12,40,.34)); cursor: pointer; transition: transform .25s ease; }
.avatar-button:hover { transform: translateY(-4px) scale(1.02); }
.avatar-button img { position: absolute; z-index: 2; width: 108%; height: 118%; left: -4%; bottom: 5%; object-fit: contain; object-position: center bottom; transition: opacity .08s ease; }
.avatar-halo { position: absolute; inset: 9% 5% 3%; border-radius: 50%; background: radial-gradient(circle at 38% 22%, rgba(255,255,255,.82), rgba(215,173,255,.38) 28%, rgba(80,42,119,.78) 70%); border: 2px solid rgba(255,255,255,.46); box-shadow: inset 0 8px 20px rgba(255,255,255,.28), 0 0 0 5px rgba(102,65,139,.18); }
.avatar-rim { position: absolute; z-index: 3; left: 11%; right: 11%; bottom: 4%; height: 7%; border-radius: 0 0 999px 999px; border: 0; border-bottom: 1px solid rgba(238,226,251,.36); background: transparent; box-shadow: inset 0 -2px 3px rgba(111,67,146,.2), 0 3px 6px rgba(34,15,47,.18); pointer-events: none; }

.avatar-panel { position: absolute; z-index: 11; top: clamp(106px, 10vw, 148px); left: max(40px, calc(var(--safe-left) + 28px)); width: min(280px, calc(100vw - 80px)); padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(70,40,103,.96), rgba(34,22,52,.95)); box-shadow: 0 20px 55px rgba(20,9,31,.42), inset 0 1px rgba(255,255,255,.22); backdrop-filter: blur(16px); }
.avatar-panel[hidden] { display: none; }
.avatar-panel button { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 5px 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(255,255,255,.08); text-align: left; cursor: pointer; }
.avatar-panel img { width: 42px; height: 42px; object-fit: contain; }

.notification-dock { position: absolute; z-index: 10; top: clamp(44px, 5vw, 76px); left: clamp(112px, 10vw, 150px); width: min(340px, 54vw); pointer-events: none; }
.notice-pill { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 18px 10px 12px; border-radius: 22px; color: var(--ink); background: linear-gradient(135deg, #fff9e8, #eadcff); border: 2px solid rgba(255,255,255,.8); box-shadow: 0 16px 38px rgba(43,23,70,.32); animation: notice-in .55s cubic-bezier(.2,.9,.25,1.2) both, notice-out .45s 4.6s ease-in both; }
.notice-pill img { width: 44px; height: 44px; object-fit: contain; }
.notice-pill small { display: block; opacity: .7; font-weight: 800; }
.notice-pill strong { display: block; font-size: 16px; }
@keyframes notice-in { from { opacity: 0; transform: translate(-80px, 30px) scale(.45) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes notice-out { to { opacity: 0; transform: translate(70px,-18px) scale(.72); } }

.location-chip { position: absolute; z-index: 4; top: 22px; left: 50%; transform: translateX(-50%); min-width: 210px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.42); border-radius: 20px; color: var(--cream); background: rgba(41,25,61,.62); box-shadow: 0 8px 28px rgba(30,13,42,.2); text-align: center; backdrop-filter: blur(13px); }
.location-chip span, .location-chip small { display: block; }
.location-chip span { font-weight: 900; letter-spacing: .01em; }
.location-chip small { margin-top: 1px; font-size: 12px; opacity: .82; }

.tablet-button { position: absolute; z-index: 10; top: max(20px, var(--safe-bottom)); right: max(24px, var(--safe-right)); width: clamp(74px, 7vw, 104px); height: clamp(74px, 7vw, 104px); padding: 6px; border: 0; border-radius: 26px; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), rgba(73,40,111,.52)); filter: drop-shadow(0 14px 20px rgba(32,13,46,.34)); cursor: pointer; animation: tablet-float 4.6s ease-in-out infinite; }
.tablet-button img { width: 100%; height: 100%; object-fit: contain; }
@keyframes tablet-float { 50% { transform: translateY(-5px) rotate(1.3deg); } }

.zoom-control { position: absolute; z-index: 8; right: max(22px, var(--safe-right)); bottom: max(22px, var(--safe-bottom)); display: flex; gap: 5px; padding: 6px; border-radius: 17px; background: rgba(37,22,55,.75); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.zoom-control button { min-width: 58px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: rgba(255,255,255,.76); font-size: 12px; font-weight: 900; cursor: pointer; }
.zoom-control button.selected { color: #2f1d43; background: linear-gradient(#fff6df,#e5d2ff); box-shadow: 0 5px 14px rgba(13,6,24,.22); }

.action-button { position: absolute; z-index: 9; left: 50%; bottom: max(26px, var(--safe-bottom)); transform: translateX(-50%); min-width: 190px; min-height: 52px; padding: 8px 18px 8px 9px; border: 2px solid rgba(255,255,255,.65); border-radius: 20px; color: var(--ink); background: linear-gradient(135deg, #fff8df, #ead6ff); box-shadow: 0 14px 34px rgba(30,12,42,.32); font-weight: 900; cursor: pointer; }
.action-key { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 8px; border-radius: 11px; color: white; background: var(--plum-2); }
.note-button { position: absolute; z-index: 50; right: max(24px, var(--safe-right)); top: clamp(100px, 9vw, 130px); min-height: 44px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.38); border-radius: 15px; color: var(--cream); background: rgba(43,23,70,.72); font-weight: 850; cursor: pointer; backdrop-filter: blur(9px); }

.touch-controls { display: none; }
.modal-layer { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.modal-layer:empty { display: none; }
.modal-layer > * { pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(22,11,32,.46); backdrop-filter: blur(9px) saturate(.9); }
.note-layer { position: absolute; z-index: 70; inset: 0; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.note-layer:empty { display: none; }
.note-layer > * { pointer-events: auto; }
.note-backdrop { position: absolute; inset: 0; background: rgba(22,11,32,.28); backdrop-filter: blur(3px); }
.note-card { position: relative; z-index: 1; width: min(560px, calc(100% - 36px)); max-height: calc(100% - 36px); overflow: auto; padding: clamp(22px, 4vw, 36px); border: 1px solid rgba(255,255,255,.5); border-radius: 28px; color: var(--ink); background: linear-gradient(145deg, rgba(255,249,232,.99), rgba(237,221,255,.99)); box-shadow: 0 30px 90px rgba(22,9,34,.5); animation: card-in .34s ease-out both; }
.story-card { position: relative; z-index: 1; width: min(760px, calc(100% - 40px)); max-height: calc(100% - 40px); overflow: auto; padding: clamp(22px, 4vw, 42px); border: 1px solid rgba(255,255,255,.42); border-radius: 34px; color: var(--ink); background: linear-gradient(145deg, rgba(255,249,232,.98), rgba(237,221,255,.98)); box-shadow: 0 38px 110px rgba(22,9,34,.5), inset 0 2px rgba(255,255,255,.9); animation: card-in .48s cubic-bezier(.2,.9,.25,1.12) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(32px) scale(.92); } }
.story-card.wide { width: min(1040px, calc(100% - 40px)); }
.story-card h1, .story-card h2, .story-card h3, .story-card p { margin-top: 0; }
.story-card h1 { font-size: clamp(27px, 4vw, 46px); line-height: 1.04; }
.story-card h2 { font-size: clamp(23px, 3vw, 34px); }
.story-card p { font-size: clamp(16px, 1.8vw, 21px); line-height: 1.48; }
.speaker-name { display: inline-block; margin-bottom: 8px; color: #79549d; font-weight: 950; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.narrator-badge { display: inline-flex; align-items: center; gap: 7px; }
.narrator-badge img { width: 26px; height: 26px; object-fit: contain; }
.dialogue-layout { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: clamp(18px, 4vw, 42px); align-items: end; }
.portrait-stage { position: relative; min-height: 310px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff7ce, #cdb3e4 58%, #704c91); box-shadow: inset 0 0 0 2px rgba(255,255,255,.52); }
.portrait-stage img { position: absolute; width: 110%; height: 110%; left: -5%; bottom: -8%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 16px rgba(47,27,57,.28)); }
.parallax-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.34), transparent 25%), linear-gradient(120deg, transparent 45%, rgba(255,239,184,.16) 62%, transparent 75%); animation: scene-light 7s ease-in-out infinite alternate; }
.parallax-stage img { width: 116%; height: 116%; left: -8%; bottom: -10%; object-fit: cover; animation: scene-drift 8s ease-in-out infinite alternate; }
.depth-parallax-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.parallax-stage.is-depth-ready .depth-parallax-canvas, .story-scene-stage.is-depth-ready .depth-parallax-canvas { opacity: 1; }
.parallax-stage.is-depth-ready > img, .story-scene-stage.is-depth-ready > img { opacity: 0; }
.parallax-stage > img { transition: opacity .45s ease; }
@keyframes scene-drift { from { transform: translate3d(calc(var(--scene-x, 0%) - 2%), -1%, 0) scale(1.02); } to { transform: translate3d(calc(var(--scene-x, 0%) + 2%), 1%, 0) scale(1.07); } }
@keyframes scene-light { from { opacity: .5; transform: translate3d(-2%, 0, 0); } to { opacity: .92; transform: translate3d(2%, 0, 0); } }

.modal-layer.scene-mode { padding: 18px max(18px,var(--safe-right)) max(18px,var(--safe-bottom)) max(18px,var(--safe-left)); }
.story-card.story-scene-card { width: min(1500px,100%); height: 100%; max-height: none; overflow: hidden; padding: 0; border-radius: clamp(22px,2.2vw,34px); color: var(--cream); background: #1d1428; box-shadow: 0 34px 110px rgba(13,6,23,.64), inset 0 1px rgba(255,255,255,.45); }
.story-scene-layout { display: grid; grid-template-rows: minmax(0,1fr) auto; width: 100%; height: 100%; background: #1b1426; transition: opacity .24s ease, transform .24s ease, filter .24s ease; animation: story-scene-arrive .52s cubic-bezier(.2,.78,.24,1) both; }
.story-scene-layout.from-back { animation-name: story-scene-arrive-back; }
.story-scene-card.is-changing .story-scene-layout { opacity: 0; transform: scale(1.018); filter: blur(3px); }
.story-scene-stage { position: relative; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 34%,#6d4b73,#21172d 72%); }
.story-scene-image { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: center; transition: opacity .45s ease; will-change: transform; }
.story-scene-light { position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(10,5,18,.08),transparent 25%,transparent 72%,rgba(10,5,18,.17)), radial-gradient(circle at 18% 10%,rgba(255,243,194,.13),transparent 29%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.story-scene-caption { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(190px,.65fr) minmax(330px,1.4fr) auto; grid-template-areas: "meta narration controls"; align-items: center; gap: clamp(18px,2.4vw,38px); min-height: clamp(145px,19vh,178px); padding: clamp(18px,2vw,30px) clamp(22px,3vw,46px); color: #2c2039; background: linear-gradient(112deg,rgba(255,249,230,.99),rgba(238,222,250,.99)); border-top: 1px solid rgba(255,255,255,.68); box-shadow: 0 -16px 34px rgba(20,10,31,.18); }
.story-scene-meta { grid-area: meta; align-self: center; min-width: 0; }
.story-scene-meta .speaker-name { margin: 0 8px 5px 0; }
.story-scene-meta .narrator-badge img { width: 23px; height: 23px; }
.story-scene-count { display: inline-block; color: #8b679d; font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.story-scene-meta h2 { margin: 4px 0 0; font-size: clamp(20px,2vw,30px); line-height: 1.08; }
.story-card .story-scene-narration { grid-area: narration; margin: 0; max-width: 760px; font-size: clamp(17px,1.55vw,22px); line-height: 1.45; text-wrap: pretty; }
.story-scene-controls { grid-area: controls; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.story-scene-controls button { min-height: 48px; white-space: nowrap; }
.story-scene-controls .secondary-button:disabled { opacity: .42; cursor: default; }
.story-note-button { min-width: 48px; border: 1px solid rgba(82,51,107,.18); border-radius: 14px; padding: 9px 12px; color: #674d76; background: rgba(255,255,255,.5); font-weight: 900; cursor: pointer; }
.game:has(.modal-layer.scene-mode) > .hud .note-button, .iphone-page:has(.modal-layer.scene-mode) > .note-button { visibility: hidden; }
@keyframes story-scene-arrive { from { opacity: 0; transform: translate3d(1.5%,0,0) scale(1.015); filter: blur(3px); } }
@keyframes story-scene-arrive-back { from { opacity: 0; transform: translate3d(-1.5%,0,0) scale(1.015); filter: blur(3px); } }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.choice-button, .primary-button, .secondary-button, .leave-button { min-height: 48px; border-radius: 16px; padding: 11px 16px; cursor: pointer; font-weight: 900; }
.choice-button { border: 2px solid rgba(105,71,139,.18); color: var(--ink); background: rgba(255,255,255,.72); text-align: left; }
.choice-button:hover { background: white; transform: translateY(-1px); }
.primary-button { border: 0; color: white; background: linear-gradient(135deg, #5a357f, #b23b8c); box-shadow: 0 8px 20px rgba(75,37,99,.26); }
.secondary-button { border: 2px solid rgba(75,45,102,.2); color: #4a315e; background: rgba(255,255,255,.62); }
.leave-button { border: 0; color: #684e78; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.button-row.end { justify-content: flex-end; }
.name-input, .note-input { width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid rgba(96,59,129,.24); border-radius: 16px; color: var(--ink); background: white; font-size: 18px; }
.note-input { min-height: 150px; resize: vertical; }

.puzzle-lock { display: grid; place-items: center; gap: 18px; padding: 24px; border-radius: 26px; color: var(--cream); background: linear-gradient(145deg, #754a2d, #2f2342); }
.lock-layout { display: grid; grid-template-columns: minmax(180px, .7fr) 1.3fr; gap: 22px; align-items: stretch; }
.lock-art { position: relative; min-height: 320px; overflow: hidden; border-radius: 26px; background: #3a2949; }
.lock-art img { width: 100%; height: 100%; object-fit: cover; }
.lock-slots, .key-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lock-slot, .symbol-key { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; font-size: 34px; }
.lock-slot { border: 3px solid rgba(255,236,176,.55); background: rgba(26,13,31,.35); }
.symbol-key { border: 2px solid rgba(255,255,255,.72); color: #4a315d; background: linear-gradient(#fff8d9,#d5b1ea); cursor: grab; box-shadow: 0 8px 15px rgba(0,0,0,.22); }
.symbol-key.used { opacity: .35; transform: scale(.85); pointer-events: none; }

.imagination-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.imagination-card { position: relative; min-height: 155px; overflow: hidden; padding: 14px; border: 2px solid rgba(255,255,255,.5); border-radius: 22px; color: white; background: var(--place-bg, linear-gradient(#72488e,#2d1c43)); box-shadow: inset 0 -40px 60px rgba(25,11,36,.28); cursor: pointer; font-weight: 950; text-align: left; display: flex; align-items: flex-end; }
.imagination-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imagination-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(20,10,31,.82)); }
.imagination-card span { position: relative; z-index: 1; }
.imagination-card:nth-child(1) { --place-bg: linear-gradient(155deg,#f4c579,#a66354); }
.imagination-card:nth-child(2) { --place-bg: linear-gradient(155deg,#87d9e5,#564baf); }
.imagination-card:nth-child(3) { --place-bg: linear-gradient(155deg,#f6c2d8,#5b9e62); }
.imagination-card:nth-child(4) { --place-bg: linear-gradient(155deg,#f7a66d,#704aa0); }
.imagination-card:nth-child(5) { --place-bg: radial-gradient(circle at 65% 30%,#8fd380,#1e244f 42%,#100f25); }

.tablet-shell { position: relative; z-index: 1; width: min(1120px, calc(100% - 28px)); aspect-ratio: 1672/941; max-height: calc(100% - 28px); border-radius: 6% / 10%; background: url('../assets/device/tablet.webp') center/100% 100% no-repeat; filter: drop-shadow(0 35px 65px rgba(16,7,26,.5)); animation: tablet-rise .62s cubic-bezier(.18,.88,.25,1.1) both; }
@keyframes tablet-rise { from { opacity: 0; transform: translateY(55%) scale(.82) rotate(3deg); } }
.tablet-screen { position: absolute; left: 15.37%; top: 9.99%; width: 69.14%; height: 69.39%; overflow: hidden; border-radius: 2.2%; color: var(--cream); background: radial-gradient(circle at 70% 4%, rgba(207,112,209,.2), transparent 35%), linear-gradient(145deg, #382351, #171526); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); }
.tablet-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; }
.tablet-head { position: relative; z-index: 3; height: 15%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2% 3.5%; border-bottom: 1px solid rgba(255,255,255,.12); }
.tablet-head h2 { margin: 0; font-size: clamp(16px, 2vw, 29px); }
.icon-button { min-width: 44px; min-height: 44px; padding: 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: white; background: rgba(255,255,255,.08); cursor: pointer; }
.icon-button img { width: 28px; height: 28px; object-fit: contain; }
.tablet-settings-button { position: absolute; z-index: 4; right: 10%; top: 2%; }
.tablet-content { height: 85%; overflow: auto; padding: 2.5% 3.5% 4%; }
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 18px); }
.app-tile { min-height: clamp(92px, 12vw, 145px); padding: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: clamp(15px, 2vw, 25px); color: var(--cream); background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045)); box-shadow: inset 0 1px rgba(255,255,255,.16); cursor: pointer; font-weight: 900; }
.app-tile img { display: block; width: clamp(42px, 5vw, 68px); height: clamp(42px, 5vw, 68px); margin: 0 auto 5px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(10,4,18,.24)); }
.tablet-list { display: grid; gap: 9px; }
.tablet-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; min-height: 66px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.07); }
.tablet-row img { width: 50px; height: 50px; object-fit: contain; }
.tablet-row > span { min-width: 0; }
.tablet-row strong, .tablet-row small { display: block; line-height: 1.25; }
.tablet-row small { margin-top: 3px; color: rgba(255,255,255,.7); font-size: 12px; }
.tablet-row button { min-height: 44px; border: 0; border-radius: 13px; padding: 8px 12px; color: #3c2750; background: var(--cream); font-weight: 900; cursor: pointer; }
  .settings-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(310px,.9fr); gap: 14px; align-items: start; }
.audio-settings { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.04)); }
.settings-title { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; margin-bottom: 2px; }
.settings-title img { width: 44px; height: 44px; object-fit: contain; }
.settings-title strong, .settings-title small, .audio-slider-row strong, .audio-slider-row small { display: block; }
.settings-title small, .audio-slider-row small { color: rgba(255,255,255,.67); font-size: 12px; }
.audio-slider-row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(120px,1.35fr) 45px; gap: 11px; align-items: center; min-height: 48px; padding: 5px 8px; border-radius: 14px; background: rgba(255,255,255,.055); }
.audio-slider-row input { width: 100%; min-height: 44px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.audio-slider-row output { color: var(--gold); font-size: 12px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
  .settings-actions .tablet-row { grid-template-columns: 44px minmax(105px,1fr) auto; min-height: 62px; }
.settings-actions .tablet-row img { width: 42px; height: 42px; }
.friends-layout { display: grid; grid-template-columns: 38% 1fr; gap: 18px; height: 100%; min-height: 0; overflow: hidden; }
.friend-rail { height: 100%; min-height: 0; overflow: auto; padding-right: 8px; border-right: 1px solid rgba(255,255,255,.13); }
.friend-category { margin: 10px 0 7px; color: #f1c7e9; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.friend-button { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; width: 100%; min-height: 66px; margin: 6px 0; padding: 5px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: white; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; }
.friend-button > span:last-child { min-width: 0; }
.friend-button strong, .friend-button small { display: block; line-height: 1.2; }
.friend-button small { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 12px; }
.friend-button.selected { background: linear-gradient(135deg, rgba(215,84,168,.32), rgba(118,82,189,.35)); border-color: rgba(255,225,174,.48); }
.friend-portrait-ring { position: relative; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(#f8dfaf,#725092); border: 2px solid rgba(255,255,255,.5); overflow: visible; }
.friend-portrait-ring img { position: absolute; width: 118%; height: 118%; left: -9%; bottom: 0; object-fit: contain; }
.friend-detail { position: relative; height: 100%; min-height: 0; overflow: auto; border-radius: 23px; padding: 18px; background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); }
.friend-detail .full-character { position: absolute; right: 10px; bottom: 10px; width: 42%; height: calc(100% - 20px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 15px rgba(0,0,0,.25)); }
.friend-copy { width: 58%; min-width: 0; padding-right: 10px; }
.friend-copy h2, .friend-copy h3 { margin: 5px 0 12px; }
.friend-copy p { margin: 0 0 12px; }
.friend-progress { height: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.friend-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--magenta)); }
.state-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.state-column { padding: 12px; border-radius: 19px; background: rgba(255,255,255,.055); }
.state-column.focus { box-shadow: inset 0 0 0 2px rgba(244,198,110,.55); }
.state-column.paused { box-shadow: inset 0 0 0 2px rgba(138,186,215,.4); }
.state-column.new { box-shadow: inset 0 0 0 2px rgba(204,147,227,.42); }
.goal-card { margin: 8px 0; padding: 12px; border-radius: 15px; background: rgba(255,255,255,.09); }
.goal-card small { display: block; opacity: .7; }
.look-layout { display: grid; grid-template-columns: 42% 1fr; gap: 20px; height: 100%; }
.hero-stand { display: grid; place-items: end center; min-height: 280px; border-radius: 24px; background: radial-gradient(ellipse at 50% 85%, rgba(255,221,138,.62), transparent 32%), linear-gradient(145deg,#684783,#29213e); }
.hero-stand img { max-width: 88%; max-height: 95%; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(0,0,0,.28)); }
.home-preview { position: relative; overflow: hidden; place-items: center; }
.home-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.home-preview > div { position: relative; z-index: 1; align-self: end; width: 100%; padding: 30px; text-align: center; background: linear-gradient(transparent, rgba(29,17,42,.9)); }
.item-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.item-card { min-height: 82px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; color: white; background: rgba(255,255,255,.08); cursor: pointer; }
.item-card.selected { box-shadow: inset 0 0 0 3px var(--gold); }
.look-item { display: grid; grid-template-rows: 58px auto; place-items: center; gap: 4px; padding: 7px; text-transform: capitalize; }
.look-item img { width: 100%; height: 58px; object-fit: contain; }
.tree-view { display: grid; place-items: center; min-height: 100%; background: radial-gradient(ellipse at 50% 95%,rgba(63,135,104,.35),transparent 55%); }
.tree-crown { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.tree-branch { display: grid; place-items: center; width: 130px; height: 160px; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 40% 35%,rgba(255,255,255,.35),var(--branch)); box-shadow: 0 18px 30px rgba(8,5,14,.2); font-size: 19px; font-weight: 950; }
.call-stage { display: grid; grid-template-columns: 45% 1fr; gap: 18px; min-height: 100%; }
.fred-video { position: relative; overflow: hidden; border-radius: 24px; background: radial-gradient(circle at 50% 40%,#f8d99b,#7f62a5 65%,#3a2753); }
.fred-video img { position: absolute; width: 95%; height: 95%; left: 2.5%; bottom: -5%; object-fit: contain; filter: drop-shadow(0 20px 16px rgba(0,0,0,.25)); animation: fred-live 4.8s ease-in-out infinite; }
@keyframes fred-live { 45% { transform: translateY(-4px) rotate(.6deg); } 50% { transform: translateY(-4px) scaleY(.985); } }
.mic-button.recording { background: #d64c78; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 12px rgba(214,76,120,.18); } }
.wonder-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.wonder-card { position: relative; min-height: 125px; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.08); }
.wonder-card img { width: 100%; height: 90px; object-fit: cover; }
.wonder-card strong { display: block; padding: 7px 9px; font-size: 12px; }
.unknown { filter: brightness(0) opacity(.48); }

.film-card { position: relative; z-index: 1; width: min(960px, calc(100% - 30px)); height: min(540px, calc(100% - 30px)); overflow: hidden; border-radius: 34px; color: white; background: #1f1530; box-shadow: 0 38px 100px rgba(0,0,0,.55); }
.film-shot { position: absolute; inset: 0; display: grid; place-items: end start; padding: 35px; background-position: center; background-size: cover; opacity: 0; animation-name: film-shot; animation-timing-function: linear; animation-fill-mode: both; }
.film-shot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%,rgba(18,9,27,.78)); }
.film-shot p { position: relative; z-index: 1; max-width: 680px; margin: 0; font-size: clamp(18px,3vw,32px); font-weight: 850; text-shadow: 0 3px 12px #000; }
@keyframes film-shot { 0% { opacity: 0; transform: scale(1.05); } 8% { opacity: 1; } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.film-skip { position: absolute; z-index: 5; right: 18px; top: 18px; }
.film-narrator { position: absolute; z-index: 6; left: 18px; top: 18px; padding: 7px 10px; border-radius: 14px; color: var(--cream); background: rgba(30,18,43,.72); }
.ending-spread { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; gap: 28px; align-items: center; }
.ending-spread > img { width: 100%; max-height: 58vh; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(28,12,39,.3)); }

.toast-layer { position: absolute; z-index: 80; left: 50%; bottom: max(96px,calc(var(--safe-bottom) + 68px)); transform: translateX(-50%); pointer-events: none; }
.toast { padding: 11px 18px; border-radius: 16px; color: white; background: rgba(38,22,55,.92); box-shadow: 0 12px 30px rgba(0,0,0,.28); animation: toast 3.2s ease both; white-space: nowrap; }
@keyframes toast { 0%,100% { opacity: 0; transform: translateY(12px); } 10%,84% { opacity: 1; transform: none; } }

/* The one-shot start of the game. It owns input until the existing opening begins. */
.start-flow { position: absolute; z-index: 140; inset: 0; overflow: hidden; color: var(--cream); background: #020204; pointer-events: auto; }
.start-flow[hidden] { display: none; }
.start-screen { position: absolute; inset: 0; overflow: hidden; }
.startup-active .hud { visibility: hidden; }
.iphone-page.startup-active > .note-button { visibility: hidden; }

.studio-splash { display: grid; place-items: center; isolation: isolate; background: radial-gradient(circle at 50% 52%, #17131f 0, #07070b 38%, #010102 72%); cursor: pointer; transition: opacity .48s ease, transform .48s ease; }
.studio-splash::before { content: ""; position: absolute; inset: -30%; z-index: -1; opacity: .18; background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(132,94,174,.12), transparent 28%, rgba(244,198,110,.08), transparent 56%); animation: studio-haze 12s linear infinite; }
.studio-splash:focus-visible { outline: 3px solid var(--gold); outline-offset: -8px; }
.studio-splash.is-leaving { opacity: 0; transform: scale(1.018); }
.studio-credit { position: absolute; z-index: 4; top: clamp(28px, 9vh, 86px); left: max(22px,var(--safe-left)); right: max(22px,var(--safe-right)); display: grid; gap: 5px; text-align: center; text-shadow: 0 2px 20px rgba(0,0,0,.8); animation: studio-credit-in 1.35s ease both; }
.studio-credit strong { font-size: clamp(17px, 2vw, 26px); letter-spacing: .08em; font-weight: 800; }
.studio-credit span { color: rgba(255,246,223,.7); font-family: Georgia, serif; font-size: clamp(14px, 1.5vw, 20px); font-style: italic; letter-spacing: .18em; }
.studio-emblem { position: relative; width: min(760px, 76vw); aspect-ratio: 900/580; margin-top: clamp(35px,7vh,74px); animation: studio-emblem-in 3.35s cubic-bezier(.18,.7,.2,1) both; }
.studio-rim { position: absolute; z-index: 0; left: 50%; top: 50%; width: 56%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(255,224,156,.8); border-radius: 50%; background: radial-gradient(circle, rgba(94,72,120,.16) 0 48%, rgba(17,13,24,.8) 69%, transparent 70%); box-shadow: 0 0 12px rgba(255,223,148,.45), 0 0 42px rgba(178,118,216,.28), inset 0 0 34px rgba(255,218,139,.15); animation: studio-rim 3.4s ease-in-out both; }
.studio-generated-art, #studioSilhouettes { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#studioSilhouettes { filter: drop-shadow(0 0 10px rgba(246,205,122,.16)) drop-shadow(0 0 17px rgba(151,92,202,.17)); }
.studio-generated-art[hidden] { display: none; }
.studio-generated-art.is-full { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-emblem.generated-active { opacity: 0; pointer-events: none; }
.studio-glint { display: none; }
.splash-hint { position: absolute; z-index: 4; left: 50%; bottom: max(22px,calc(var(--safe-bottom) + 12px)); transform: translateX(-50%); min-width: 230px; color: rgba(255,246,223,.58); font-size: 12px; letter-spacing: .08em; text-align: center; opacity: 0; animation: splash-hint 1s 1s ease forwards; }
.studio-splash.wait-flash .splash-hint { color: var(--gold); animation: splash-nudge .42s ease; opacity: 1; }
@keyframes studio-haze { to { transform: rotate(1turn); } }
@keyframes studio-credit-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes studio-emblem-in { 0% { opacity: 0; transform: scale(.9); } 32% { opacity: .18; } 100% { opacity: 1; transform: none; } }
@keyframes studio-rim { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.72); box-shadow: 0 0 0 transparent; } 58% { opacity: .75; } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes studio-glint { 0%,36% { opacity: 0; transform: translateX(-90%) rotate(-8deg) scaleX(.2); } 72% { opacity: .9; } 100% { opacity: .55; transform: translateX(-10%) rotate(-8deg) scaleX(1); } }
@keyframes splash-hint { to { opacity: 1; } }
@keyframes splash-nudge { 50% { transform: translateX(-50%) scale(1.04); } }

.title-screen { --parallax-x: 0px; --parallax-y: 0px; display: grid; place-items: center; isolation: isolate; background: #563c6c; animation: title-reveal .8s ease both; }
.title-art { position: absolute; z-index: -4; inset: -3%; width: 106%; height: 106%; object-fit: cover; object-position: center 52%; transform: translate(var(--parallax-x),var(--parallax-y)) scale(1.035); animation: title-breathe 13s ease-in-out infinite alternate; }
.title-screen::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(35,18,48,.35),transparent 34%,transparent 55%,rgba(31,15,42,.62)), radial-gradient(ellipse at 50% 34%,transparent 25%,rgba(42,20,54,.18) 82%); }
.title-sun { position: absolute; z-index: -2; left: 8%; top: 3%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,244,183,.5),rgba(255,197,98,.12) 38%,transparent 70%); mix-blend-mode: screen; animation: title-sun 5.5s ease-in-out infinite alternate; }
.title-cloud { position: absolute; z-index: -2; width: 42%; height: 18%; border-radius: 50%; opacity: .16; filter: blur(15px); background: radial-gradient(ellipse,white,transparent 67%); }
.title-cloud.one { left: -18%; top: 7%; animation: cloud-drift 24s linear infinite; }
.title-cloud.two { right: -24%; top: 20%; animation: cloud-drift 31s -13s linear infinite reverse; }
.title-logo { position: absolute; top: clamp(30px, 9vh, 84px); left: max(65px,var(--safe-left)); right: max(65px,var(--safe-right)); text-align: center; pointer-events: none; }
.title-logo h1 { margin: 0; color: #fff8e4; font-family: "Nunito", "Segoe UI", system-ui, sans-serif; font-size: clamp(58px, 8.4vw, 116px); font-weight: 1000; line-height: .88; letter-spacing: -.065em; text-shadow: 0 4px 0 #8d537f, 0 9px 24px rgba(41,18,48,.46), 0 0 42px rgba(255,221,147,.38); }
.title-logo i { display: block; width: min(360px,42vw); height: 4px; margin: 18px auto 0; border-radius: 50%; background: linear-gradient(90deg,transparent,#ffe8a9 25% 75%,transparent); box-shadow: 0 3px 12px rgba(91,45,100,.5); }
.title-actions { position: absolute; left: max(65px,var(--safe-left)); right: max(65px,var(--safe-right)); bottom: max(46px,calc(var(--safe-bottom) + 24px)); display: flex; align-items: center; justify-content: center; gap: clamp(12px,2vw,24px); }
.title-button { min-width: min(280px,38vw); min-height: 62px; padding: 12px 28px; border: 2px solid rgba(255,255,255,.7); border-radius: 23px; font-size: clamp(17px,2vw,24px); font-weight: 950; cursor: pointer; box-shadow: 0 17px 35px rgba(37,16,46,.32), inset 0 1px rgba(255,255,255,.65); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.title-button:hover { transform: translateY(-4px); box-shadow: 0 21px 42px rgba(37,16,46,.42), inset 0 1px rgba(255,255,255,.72); }
.title-button.child { color: #3f284d; background: linear-gradient(145deg,#fff8dc,#f3c778); }
.title-button.grown { position: relative; color: #fff8e8; background: linear-gradient(145deg,rgba(91,52,118,.9),rgba(50,31,68,.92)); backdrop-filter: blur(10px); }
.title-button.grown::after { content: "Soon"; position: absolute; right: 12px; bottom: -9px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #4a2b5e; background: #ffe8a9; box-shadow: 0 5px 12px rgba(31,14,42,.3); font-size: 11px; font-weight: 1000; letter-spacing: .04em; }
.soon-note { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 14px); width: min(520px,80vw); margin: 0; padding: 8px 14px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.42); border-radius: 14px; color: #fff8e6; background: rgba(42,24,55,.9); box-shadow: 0 9px 22px rgba(23,9,34,.28); font-size: 14px; font-weight: 900; text-align: center; text-shadow: 0 2px 10px rgba(20,9,29,.9); backdrop-filter: blur(9px); animation: soon-in .35s ease both; }
.soon-note[hidden] { display: none; }
@keyframes title-reveal { from { opacity: 0; } }
@keyframes title-breathe { to { transform: translate(calc(var(--parallax-x) * -.65),calc(var(--parallax-y) * -.65)) scale(1.065); } }
@keyframes title-sun { to { opacity: .72; transform: scale(1.08); } }
@keyframes cloud-drift { from { transform: translateX(-10%); } to { transform: translateX(160%); } }
@keyframes soon-in { from { opacity: 0; transform: translate(-50%,7px); } }

.album-loader { display: grid; place-items: center; isolation: isolate; background: radial-gradient(ellipse at 50% 42%,#8d6042,#3a2118 76%); transition: opacity .32s ease, transform .32s ease; }
.album-loader::after { content: ""; position: absolute; z-index: 30; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%,rgba(255,247,201,.92),rgba(246,190,91,.35) 34%,transparent 70%); }
.album-loader.is-leaving { opacity: 0; transform: scale(1.035); }
.album-stage { position: absolute; left: 50%; top: 50%; width: max(100%,calc(100vh * 1.7768)); aspect-ratio: 1672/941; transform: translate(-50%,-50%); transform-origin: center; }
.album-book { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: album-land 1.05s cubic-bezier(.18,.76,.22,1.06) both; }
.album-heading { position: absolute; z-index: 2; left: 19.7%; top: 10.2%; color: #3c1f57; text-shadow: 0 2px rgba(255,255,255,.46); }
.album-heading small { display: block; margin-bottom: .2em; color: #6f3f6b; font-size: clamp(12px,1.1vw,18px); font-weight: 950; letter-spacing: .26em; text-transform: uppercase; animation: album-title-in .5s 1.35s ease both; }
.album-heading strong { display: block; font-size: clamp(34px,4.7vw,78px); line-height: .95; letter-spacing: -.04em; animation: album-title-in .65s 1.5s cubic-bezier(.2,.9,.25,1.15) both; }
.album-heading i { display: block; width: 100%; height: 7px; margin-top: 7px; border-radius: 50%; background: #efa82c; transform-origin: left; animation: album-underline .6s 2.05s ease both; }
.album-photos { position: absolute; z-index: 3; inset: 0; }
.loader-photo { --turn: 0deg; position: absolute; width: 20%; margin: 0; padding: .75% .75% 2.25%; border-radius: 6px; background: #fffdf7; box-shadow: 0 12px 25px rgba(66,32,15,.32), inset 0 0 0 1px rgba(83,55,35,.12); transform: translate(-50%,-50%) rotate(var(--turn)); animation: photo-fall .92s cubic-bezier(.42,0,.2,1.05) both; }
.loader-photo img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.loader-photo.p1 { left: 66%; top: 35%; --turn: 8deg; animation-delay: .55s; }
.loader-photo.p2 { left: 79%; top: 33%; --turn: -7deg; animation-delay: .78s; }
.loader-photo.p3 { left: 67%; top: 62%; --turn: -10deg; animation-delay: 1.02s; }
.loader-photo.p4 { left: 80%; top: 64%; --turn: 6deg; animation-delay: 1.25s; }
.loader-photo.main { z-index: 5; left: 73%; top: 49%; width: 26%; --turn: -4deg; animation-delay: 1.62s; }
.loader-photo.main::before, .loader-photo.main::after { content: ""; position: absolute; z-index: 2; top: -3%; width: 25%; height: 8%; opacity: .82; background: repeating-linear-gradient(90deg,#f5abc9 0 10px,#ffd0df 10px 20px); box-shadow: 0 1px 2px rgba(80,30,40,.22); }
.loader-photo.main::before { left: -7%; transform: rotate(-36deg); }
.loader-photo.main::after { right: -6%; transform: rotate(33deg); background: repeating-linear-gradient(90deg,#bba8f4 0 10px,#d9d0ff 10px 20px); }
.loader-photo figcaption { position: absolute; left: 0; right: 0; bottom: .45em; color: #4a2c5e; font-size: clamp(12px,1.45vw,24px); font-weight: 950; text-align: center; }
.loader-path { position: absolute; z-index: 4; left: 13%; top: 33%; width: 36%; height: 54%; overflow: visible; }
.loader-path .path-base { fill: none; stroke: rgba(104,62,134,.42); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 1 6; }
.loader-path .path-progress { fill: none; stroke: rgba(239,168,44,.78); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 0 320; animation: path-walk 3.1s 1.5s ease-in-out forwards; }
.loader-courier { position: absolute; z-index: 6; left: 23%; top: 77%; width: 13%; height: auto; transform: translate(-50%,-82%); filter: drop-shadow(0 8px 7px rgba(56,29,15,.28)); opacity: 0; }
.album-status { position: absolute; z-index: 8; left: max(65px,var(--safe-left)); right: max(65px,var(--safe-right)); bottom: max(18px,var(--safe-bottom)); color: rgba(255,249,229,.78); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-align: center; text-shadow: 0 2px 10px rgba(42,21,12,.75); }
.album-loader.is-handoff .album-heading, .album-loader.is-handoff .loader-photo:not(.main), .album-loader.is-handoff .loader-path, .album-loader.is-handoff .loader-courier, .album-loader.is-handoff .album-status { opacity: 0 !important; transition: opacity .32s ease; }
.album-loader.is-handoff .loader-photo.main { z-index: 20; animation: album-photo-lift .72s cubic-bezier(.2,.72,.2,1) both; }
.album-loader.is-handoff::after { animation: album-warm-flash .72s ease both; }
@keyframes album-land { from { opacity: 0; transform: translateY(22%) rotate(2.5deg) scale(1.05); } 68% { transform: translateY(-1%) rotate(-.35deg); } }
@keyframes album-title-in { from { opacity: 0; transform: translateY(18px) rotate(-2deg); } }
@keyframes album-underline { from { transform: scaleX(0); } }
@keyframes photo-fall { from { opacity: 0; transform: translate(-50%,-330%) rotate(calc(var(--turn) + 18deg)) scale(1.14); } 72% { transform: translate(-50%,-47%) rotate(calc(var(--turn) - 1deg)); } }
@keyframes path-walk { to { stroke-dasharray: 320 0; } }
@keyframes album-photo-lift { 0% { left: 73%; top: 49%; transform: translate(-50%,-50%) rotate(-4deg) scale(1); } 58% { left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-1deg) scale(1.38); } 100% { left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(0) scale(3.9); filter: brightness(1.18) saturate(1.06); } }
@keyframes album-warm-flash { 0%,38% { opacity: 0; } 82% { opacity: .72; } 100% { opacity: .28; } }

.loading-card { position: absolute; z-index: 100; inset: 0; display: grid; place-content: center; gap: 7px; text-align: center; color: var(--cream); background: linear-gradient(145deg,#34204d,#171020); transition: opacity .5s ease; }
.loading-card.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-star { font-size: 48px; color: var(--gold); animation: spin 2.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.iphone-page { display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 35%,#4c315f,#100b18 65%); }
.phone-shell { position: relative; width: min(calc(100vw - 36px), 864px); aspect-ratio: 864/410; padding: 10px; border-radius: 48px; background: linear-gradient(145deg,#5c5a62,#0b0a0d 42%,#37343c); box-shadow: 0 32px 90px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.16); }
.phone-camera { position: absolute; z-index: 90; left: 15px; top: 50%; width: 25px; height: 92px; transform: translateY(-50%); border-radius: 15px; background: #09080b; box-shadow: inset 0 0 0 2px #1c1920; }
.phone-game { --safe-left: 59px; --safe-right: 59px; --safe-bottom: 21px; border-radius: 39px; }
.iphone-page > .note-button { position: fixed; z-index: 100; top: 2px; right: 18px; min-width: 92px; transform: none; }

@media (max-width: 900px), (pointer: coarse) {
  .touch-controls { display: block; }
  .joystick-zone { position: absolute; left: max(59px,var(--safe-left)); bottom: max(25px,var(--safe-bottom)); width: 104px; height: 104px; border-radius: 50%; pointer-events: auto; touch-action: none; background: radial-gradient(circle,rgba(255,255,255,.16),rgba(50,29,72,.28) 63%,transparent 65%); }
  .joystick-zone img { position: absolute; width: 72px; height: 72px; left: 16px; top: 16px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); }
  .touch-action { position: absolute; right: max(59px,var(--safe-right)); bottom: max(25px,var(--safe-bottom)); width: 84px; height: 84px; padding: 5px; border: 0; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.2),rgba(75,42,105,.36)); }
  .touch-action img { width: 100%; height: 100%; object-fit: contain; }
  .action-button { bottom: max(12px,var(--safe-bottom)); min-width: 150px; }
  .zoom-control { top: 74px; right: max(59px,var(--safe-right)); bottom: auto; }
  .zoom-control button { min-width: 50px; font-size: 12px; }
  .game .note-button { top: 50%; right: 7px; bottom: auto; width: 48px; min-width: 48px; padding: 7px 4px; transform: translateY(-50%); font-size: 12px; line-height: 1.05; white-space: normal; }
  .location-chip { top: 8px; padding-block: 6px; }
  .avatar-button { top: 8px; left: max(59px,var(--safe-left)); width: 82px; height: 82px; }
  .tablet-button { top: 8px; right: max(59px,var(--safe-right)); width: 66px; height: 66px; }
  .avatar-panel { top: 83px; left: max(59px,var(--safe-left)); width: 230px; padding: 9px; }
  .avatar-panel button { min-height: 48px; }
  .notification-dock { top: 57px; left: max(120px,calc(var(--safe-left) + 100px)); }
  .story-card { width: min(760px, calc(100% - var(--safe-left) - var(--safe-right) - 12px)); max-height: calc(100% - 18px); padding: 18px; border-radius: 24px; }
  .story-card.wide { width: calc(100% - var(--safe-left) - var(--safe-right) - 12px); }
  .modal-layer.scene-mode { padding: 8px max(59px,var(--safe-right)) max(8px,var(--safe-bottom)) max(59px,var(--safe-left)); }
  .story-card.story-scene-card, .story-card.story-scene-card.wide { width: 100%; height: 100%; max-height: none; padding: 0; border-radius: 22px; }
  .story-scene-caption { grid-template-columns: minmax(160px,.65fr) minmax(0,1.8fr); grid-template-rows: auto auto; grid-template-areas: "meta narration" "controls controls"; gap: 6px 14px; min-height: 148px; padding: 9px 14px 10px; }
  .story-scene-meta .speaker-name { margin-bottom: 2px; font-size: 12px; }
  .story-scene-meta .narrator-badge img { width: 20px; height: 20px; }
  .story-scene-count { font-size: 12px; }
  .story-scene-meta h2 { margin-top: 1px; font-size: 18px; line-height: 1.05; }
  .story-card .story-scene-narration { font-size: 15px; line-height: 1.27; }
  .story-scene-controls { justify-content: flex-end; flex-wrap: nowrap; gap: 7px; }
  .story-scene-controls button { min-height: 44px; padding: 7px 12px; font-size: 12px; }
  .dialogue-layout { grid-template-columns: 150px 1fr; gap: 16px; }
  .portrait-stage { min-height: 235px; }
  .story-card p { font-size: 16px; }
  .option-grid { margin-top: 10px; }
  .choice-button, .primary-button, .secondary-button, .leave-button { min-height: 44px; padding-block: 8px; }
  .ending-spread button { min-height: 48px; }
  .story-card:has(.ending-spread) { padding: 16px 22px; }
  .ending-spread { grid-template-columns: 180px minmax(0,1fr); gap: 14px; }
  .ending-spread > img { max-height: 210px; }
  .story-card .ending-spread h1 { margin-bottom: 9px; font-size: 30px; line-height: 1.05; }
  .story-card .ending-spread p { margin-bottom: 7px; font-size: 14px; line-height: 1.28; }
  .ending-spread .button-row { flex-wrap: nowrap; gap: 8px; margin-top: 9px; }
  .ending-spread .button-row button { padding-inline: 12px; }
  .tablet-shell { width: calc(100% - 8px); max-height: calc(100% - 8px); }
  .tablet-content { padding-top: 1.5%; }
  .settings-layout { grid-template-columns: minmax(0,1.25fr) minmax(230px,.75fr); gap: 8px; }
  .audio-settings { gap: 3px; padding: 7px; }
  .settings-title { grid-template-columns: 36px 1fr; }
  .settings-title img { width: 34px; height: 34px; }
  .audio-slider-row { grid-template-columns: minmax(92px,1fr) minmax(110px,1.2fr) 40px; min-height: 44px; padding-block: 1px; }
  .audio-slider-row small { display: none; }
  .settings-actions .tablet-row { grid-template-columns: 38px minmax(64px,1fr) auto; gap: 7px; padding-inline: 8px; }
  .settings-actions .tablet-row img { width: 36px; height: 36px; }
  .settings-actions .tablet-row small { display: none; }
  .app-grid { gap: 6px; }
  .app-tile { min-height: 74px; font-size: 12px; }
  .app-tile img { width: 37px; height: 37px; }
  .friends-layout { gap: 8px; grid-template-columns: 42% 1fr; }
  .friend-button { min-height: 54px; font-size: 12px; }
  .friend-portrait-ring { width: 45px; height: 45px; }
  .imagination-grid { grid-template-columns: repeat(5,1fr); }
  .imagination-card { min-height: 108px; font-size: 12px; }
  .studio-credit { top: 1px; }
  .studio-credit strong { font-size: 15px; }
  .studio-credit span { font-size: 12px; }
  .studio-emblem { top: -8px; width: min(590px,69vw); margin-top: 12px; }
  .splash-hint { bottom: max(9px,var(--safe-bottom)); }
  .title-logo { top: 22px; }
  .title-logo h1 { font-size: clamp(48px,8vw,68px); }
  .title-logo i { width: 220px; margin-top: 10px; }
  .title-actions { bottom: max(43px,calc(var(--safe-bottom) + 20px)); gap: 12px; }
  .title-button { min-width: 215px; min-height: 52px; padding: 8px 20px; border-radius: 18px; font-size: 16px; }
  .soon-note { bottom: calc(100% + 5px); padding: 5px 11px; font-size: 12px; }
  .album-heading { top: 9%; }
  .album-heading small { font-size: 12px; }
  .album-heading strong { font-size: 42px; }
  .album-stage { top: -2%; transform: translateX(-50%); }
  .album-status { bottom: max(5px,var(--safe-bottom)); font-size: 12px; }
}

@media (max-width: 650px) {
  .dialogue-layout { grid-template-columns: 1fr; }
  .portrait-stage { min-height: 180px; }
  .option-grid { grid-template-columns: 1fr; }
  .imagination-grid, .wonder-grid { grid-template-columns: repeat(2,1fr); }
  .state-columns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .12s !important; }
}