/* ============================================================
   STORY — setup rows, host tiles, full-screen cinema, player overlay
   ============================================================ */

/* ---- setup: upload + sequence + rename ---- */
.story-setup { margin-top: .4rem; }
.story-err { color: hsl(var(--damage)); font-size: .74rem; margin: .3rem 0; }
.story-setup-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.story-srow { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px;
  background: hsl(var(--background) / .4); box-shadow: inset 0 0 0 1px hsl(var(--border) / .5); }
.story-seq { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: hsl(210 60% 75%);
  background: hsl(210 50% 40% / .18); box-shadow: inset 0 0 0 1px hsl(210 50% 50% / .4); }
.story-sthumb { flex: 0 0 auto; width: 64px; height: 38px; border-radius: 6px; overflow: hidden; background: #0b0f14;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px hsl(var(--border) / .6); }
.story-sthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-proc { font-size: 1rem; opacity: .7; }
.story-smeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.story-stitle { background: none; border: none; color: hsl(var(--foreground)); cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-pencil { opacity: .45; font-size: .8rem; }
.story-rename { font-size: .9rem; padding: .25rem .4rem; }
.story-sstatus { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(38 70% 64%); }
.story-sstatus.ok { color: hsl(var(--heal)); }
.story-sactions { flex: 0 0 auto; display: flex; gap: 4px; }

/* ---- run-game host panel ---- */
.story-host { display: flex; flex-direction: column; gap: .7rem; }
.story-host-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.story-host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.story-tile { position: relative; display: flex; flex-direction: column; gap: 5px; }
.story-tile-thumb { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: none; padding: 0; background: #0a0e13; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: box-shadow .15s, transform .1s; }
.story-tile-thumb:hover:not(:disabled) { box-shadow: inset 0 0 0 1px hsl(var(--primary) / .7), 0 0 14px hsl(var(--primary) / .25); }
.story-tile-thumb:active:not(:disabled) { transform: translateY(1px); }
.story-tile-thumb:disabled { opacity: .6; cursor: default; }
.story-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-play-ico { position: absolute; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.5); color: #fff; font-size: 1rem; box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .5); backdrop-filter: blur(2px); }
.story-tile.playing .story-tile-thumb { box-shadow: inset 0 0 0 2px hsl(var(--primary)), 0 0 18px hsl(var(--primary) / .5); }
.story-tile-foot { font-size: .76rem; }
.story-tile-title { font-family: var(--font-display); font-weight: 600; color: hsl(var(--foreground)); }
.story-tile.is-shown .story-tile-thumb img { filter: brightness(.6); }
.story-shown-tag { position: absolute; top: 5px; left: 5px; z-index: 3; font-size: .58rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .14rem .4rem; border-radius: 5px; color: hsl(140 70% 82%);
  background: hsl(150 50% 16% / .92); box-shadow: inset 0 0 0 1px hsl(150 60% 45% / .6); }
.story-dropdown { position: absolute; top: calc(56.25% - 6px); left: 4px; right: 4px; z-index: 5;
  background: hsl(206 30% 11%); border-radius: 8px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 0 0 1px hsl(var(--border)); }
.story-dd-btn { width: 100%; padding: .55rem; border-radius: 6px; cursor: pointer; font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .03em; border: none; }
.story-dd-btn.play { color: hsl(196 40% 10%); background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary) / .82)); box-shadow: 0 0 16px hsl(var(--primary) / .4); }
.story-dd-btn.stop { color: hsl(0 0% 92%); background: hsl(0 50% 32%); box-shadow: inset 0 0 0 1px hsl(0 55% 50% / .6); }
.story-stop-all { padding: .4rem .9rem; border-radius: 7px; cursor: pointer; font-family: var(--font-display); font-size: .82rem;
  color: hsl(0 0% 92%); background: hsl(0 50% 30%); border: 1px solid hsl(0 55% 48% / .6); }

/* ---- MAIN screen: full-screen movie ---- */
.story-cinema { position: fixed; inset: 0; z-index: 7000; background: #000; display: grid; place-items: center;
  animation: story-cine-in .5s ease-out; }
@keyframes story-cine-in { from { opacity: 0; } to { opacity: 1; } }
.story-cinema-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.story-cinema-title { position: absolute; bottom: clamp(16px, 5vh, 48px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.8rem); letter-spacing: .1em; color: hsl(var(--foreground));
  text-shadow: 0 2px 18px #000, 0 0 30px rgba(0,0,0,.8); opacity: .85; pointer-events: none;
  animation: story-title-fade 4.5s ease-out forwards; }
@keyframes story-title-fade { 0%,55% { opacity: .9; } 100% { opacity: 0; } }

/* ---- PLAYER: "look at the main screen" overlay ---- */
.story-focus { position: fixed; inset: 0; z-index: 6500; display: grid; place-items: center; text-align: center; padding: 2rem;
  background: radial-gradient(ellipse at 50% 42%, hsl(214 36% 12% / .96), hsl(220 30% 5% / .98)); }
.story-focus-inner { display: flex; flex-direction: column; align-items: center; gap: .7rem; max-width: 360px; }
.story-focus-ico { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff;
  background: radial-gradient(circle at 50% 38%, hsl(208 70% 60%), hsl(212 60% 34%)); box-shadow: 0 0 40px hsl(208 70% 55% / .55);
  animation: story-pulse 2s ease-in-out infinite; }
@keyframes story-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 32px hsl(208 70% 55% / .45); } 50% { transform: scale(1.08); box-shadow: 0 0 52px hsl(208 70% 55% / .75); } }
.story-focus-inner h2 { color: hsl(208 50% 86%); letter-spacing: .04em; }
.story-focus-inner p { color: hsl(208 18% 70%); font-size: .92rem; line-height: 1.5; }

@media (max-width: 430px){
  .story-host-grid { grid-template-columns: repeat(2, 1fr); }
}