.story-main { max-width:1140px; }
.story-workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); gap:24px; }
.story-performance,.story-director { min-width:0; }
.story-theater { position:relative; isolation:isolate; height:330px; margin:0; overflow:hidden; background:#0b1022; }
.story-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; opacity:.68; }
.story-theater::after { content:""; position:absolute; inset:50% 0 0; z-index:1; background:linear-gradient(transparent,#090d21e0); }
.story-scene-label { position:absolute; left:12px; top:12px; background:#0c1124ed; padding:5px 9px; color:var(--text); font-size:.8125rem; }
.story-actors { position:absolute; inset:0; z-index:2; }
.story-actor { position:absolute; left:var(--actor-x); bottom:26px; transform:translateX(-50%); width:calc(var(--story-actor-height,148px)*var(--pose-ratio)); aspect-ratio:var(--pose-aspect); max-width:42%; background-image:var(--pose-image); background-repeat:no-repeat; filter:drop-shadow(0 7px 6px #03071480); transition:left 1.2s cubic-bezier(.16,1,.3,1); image-rendering:pixelated; }
.story-actor[data-character=cat],.story-actor[data-character=lizard] { --story-actor-height:104px; }
.story-actor[data-active=true] { z-index:3; }
.story-actor[data-motion=dance] { animation:story-dance 1.1s cubic-bezier(.16,1,.3,1) 2; }
.story-actor[data-motion=admire] { animation:story-admire 1.5s cubic-bezier(.16,1,.3,1) 1; }
.story-prop { position:absolute; z-index:4; left:var(--prop-x,70%); bottom:38px; width:76px; transform:translateX(-50%); transition:left 1.2s cubic-bezier(.16,1,.3,1),bottom 1.2s cubic-bezier(.16,1,.3,1),opacity .4s; }
.story-prop[data-action=carry] { bottom:104px; }
.story-prop[data-action=hide] { bottom:-30px; opacity:.35; }
.story-prop[data-action=dance] { animation:story-prop-dance 1.1s cubic-bezier(.16,1,.3,1) 2; }
.story-line { margin:12px 0; min-height:3.6em; color:var(--text); font-size:1rem; line-height:1.65; }
.story-transport,.story-order-actions,.story-save-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.story-stage .game-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:7px 10px; font-size:.875rem; }
.story-stage svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.story-parent-prompt { font-size:.875rem; color:var(--muted); margin:14px 0 0; line-height:1.6; }
.story-edit-heading { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:12px; }
.story-edit-heading h2 { margin:0; font-size:1.1rem; }
.story-field { display:grid; gap:5px; color:var(--muted); font-size:.8125rem; min-width:0; }
.story-field select,.story-library-label select { min-height:44px; max-width:100%; width:100%; padding:6px 8px; border:1px solid #777493; background:#1d2137; color:var(--text); font:inherit; font-size:.875rem; }
.story-field select:focus-visible,.story-library-label select:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.story-cast-details { margin-top:10px; border-bottom:1px solid var(--line); }
.story-cast-details summary { display:flex; align-items:center; flex-wrap:wrap; gap:6px; cursor:pointer; min-height:44px; color:var(--text); font-size:.875rem; }
.story-cast-details summary:focus-visible { outline:2px solid var(--cyan); }
.story-cast-details summary::before { content:""; width:7px; height:7px; border-right:1.5px solid var(--cyan); border-bottom:1.5px solid var(--cyan); transform:rotate(-45deg); margin-right:3px; }
.story-cast-details[open] summary::before { transform:rotate(45deg); }
.story-cast-details summary span { color:var(--amber); font-size:.8125rem; }
.story-cast { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.story-cast-button { min-width:0; min-height:78px; background:#1d2137; color:var(--text); border:1px solid #777493; font-size:.75rem; padding:5px 2px; display:grid; justify-items:center; gap:4px; }
.story-cast-button .explore-portrait { height:42px; width:39px; }
.story-cast-button[aria-pressed=true] { border-color:var(--amber); background:#393044; }
.story-cast-details p { margin:6px 0 10px; font-size:.75rem; }
.story-order { margin:12px 0; }
.story-order > span { color:var(--muted); font-size:.8125rem; }
.story-moments { display:flex; gap:6px; margin:6px 0; }
.story-moment { flex:1; min-width:44px; min-height:44px; background:#1d2137; color:var(--text); border:1px solid #777493; font-size:1.1rem; }
.story-moment[aria-pressed=true] { background:#393044; color:var(--amber); border-color:var(--amber); }
.story-order-actions .game-button { flex:1; }
.story-field-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.story-props { border:0; padding:0; margin:12px 0 0; }
.story-props legend { color:var(--muted); font-size:.8125rem; margin-bottom:6px; }
.story-props > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.story-prop-choice { display:grid; justify-items:center; gap:2px; padding:4px; min-height:68px; min-width:44px; background:#1d2137; color:var(--text); border:1px solid #777493; font-size:.75rem; }
.story-prop-choice .learning-picture { width:40px; }
.story-prop-choice[aria-pressed=true] { border-color:var(--amber); background:#393044; }
.story-save-row { margin-top:20px; border-top:1px solid var(--line); padding-top:12px; }
.story-library-label { display:flex; align-items:center; flex:1; gap:8px; min-width:200px; color:var(--muted); font-size:.875rem; }
.story-library-label select { flex:1; min-width:0; width:auto; }
.story-stage button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.story-stage button:disabled { opacity:.45; cursor:default; }
.story-stage button:hover:not(:disabled) { background:#35304b; border-color:var(--amber); }
@keyframes story-dance { 0%,100% { transform:translateX(-50%) rotate(0); } 25% { transform:translateX(-50%) translateY(-14px) rotate(-5deg); } 60% { transform:translateX(-50%) translateY(-8px) rotate(5deg); } }
@keyframes story-admire { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(1.08); } }
@keyframes story-prop-dance { 0%,100% { transform:translateX(-50%) rotate(0); } 40% { transform:translateX(-50%) translateY(-30px) rotate(12deg); } }
.story-stage.is-immersive .story-workspace { width:100%; max-width:1200px; margin-inline:auto; }
.story-stage.is-immersive .story-heading { margin:10px 0 14px; }
.story-stage.is-immersive .story-theater { height:clamp(240px,44dvh,460px); }
.story-stage.is-immersive .story-save-row,.story-stage.is-immersive .learning-status { max-width:1200px; margin-inline:auto; }
@media(max-width:760px) {
  .story-workspace { grid-template-columns:minmax(0,1fr); gap:20px; }
  .story-theater { height:230px; }
  .story-actor { --story-actor-height:115px; bottom:20px; }
  .story-actor[data-character=cat],.story-actor[data-character=lizard] { --story-actor-height:80px; }
  .story-prop { width:62px; bottom:30px; }
  .story-prop[data-action=carry] { bottom:82px; }
  .story-line { min-height:3.2em; margin:10px 0; font-size:.9375rem; }
  .story-transport { flex-wrap:nowrap; gap:5px; }
  .story-transport .game-button { flex:1; padding-inline:5px; font-size:.8125rem; }
  .story-transport svg { width:17px; }
  .story-director { padding-top:16px; border-top:1px solid var(--line); }
  .story-parent-prompt { margin-top:10px; }
  .story-stage.is-immersive .story-theater { height:235px; }
}
@media(min-width:700px) and (max-height:600px) {
  .story-stage.is-immersive { display:block; }
  .story-stage.is-immersive .story-heading { display:none; }
  .story-stage.is-immersive .story-workspace { grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr); gap:16px; margin-top:10px; }
  .story-stage.is-immersive .story-performance { position:relative; }
  .story-stage.is-immersive .story-theater { height:max(140px,calc(var(--game-view-height,100dvh) - 235px)); }
  .story-stage.is-immersive .story-actor { --story-actor-height:108px; bottom:18px; }
  .story-stage.is-immersive .story-actor[data-character=cat],.story-stage.is-immersive .story-actor[data-character=lizard] { --story-actor-height:72px; }
  .story-stage.is-immersive .story-prop { width:58px; bottom:24px; }
  .story-stage.is-immersive .story-prop[data-action=carry] { bottom:72px; }
  .story-stage.is-immersive .story-line { min-height:0; margin:6px 0; font-size:.8125rem; line-height:1.5; }
  .story-stage.is-immersive .story-transport { flex-wrap:nowrap; }
  .story-stage.is-immersive .story-transport .game-button { padding:5px 7px; font-size:.8125rem; }
  .story-stage.is-immersive .story-parent-prompt { margin:6px 0 0; font-size:.75rem; }
  .story-stage.is-immersive .story-director { max-height:calc(var(--game-view-height,100dvh) - 120px); overflow:auto; padding:0 8px 8px 0; border:0; scrollbar-gutter:stable; }
  .story-stage.is-immersive .story-edit-heading { margin-bottom:8px; }
  .story-stage.is-immersive .story-edit-heading h2 { font-size:1rem; }
  .story-stage.is-immersive .story-save-row { margin-top:8px; padding-top:8px; }
  .story-stage.is-immersive .learning-status { margin-top:6px; font-size:.8125rem; }
  .story-stage.is-immersive .story-save-row .game-button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .story-actor,.story-prop { transition:none; animation:none!important; }
}