/* Remix Room - the doors (remix/ui/doors.js). Room tokens, room radius, no serif.
   One card, two placements: the deck in the Roll column and the strip under a finished save. */

.door { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; border-radius:14px;
        border:1px solid var(--line); background:var(--well); color:var(--ink); text-decoration:none;
        transition:border-color var(--t), transform 220ms cubic-bezier(.2,1.5,.4,1), box-shadow 300ms var(--ease); }
.door:hover { border-color:var(--pink); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.door:active { transform:translateY(0) scale(.985); transition-duration:80ms; }
.door:focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
.door-poster, .door-clip { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* the clip sits over the poster and is only there once it plays, so a still card is never a black box */
.door-clip { opacity:0; transition:opacity 180ms var(--ease); }
.door.playing .door-clip { opacity:1; }
.door-shade { position:absolute; inset:0; pointer-events:none;
              background:linear-gradient(180deg, rgba(20,20,43,0) 18%, rgba(20,20,43,.5) 46%, rgba(20,20,43,.86) 72%, rgba(20,20,43,.97) 100%); }
.door-tx { position:absolute; left:14px; right:48px; bottom:11px; display:flex; flex-direction:column; gap:2px; }
.door-ey { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--pink); }
.door-ti { font-size:16px; font-weight:700; line-height:1.15; }
.door-su { font-size:12px; color:var(--ink-dim); line-height:1.3; }
.door-chev { position:absolute; right:12px; bottom:13px; width:28px; height:28px; border-radius:50%; color:var(--pink);
             border:1px solid rgba(255,105,180,.5); background:rgba(20,20,43,.55);
             display:flex; align-items:center; justify-content:center; transition:background var(--t), border-color var(--t); }
.door:hover .door-chev { background:rgba(255,105,180,.16); border-color:var(--pink); }

/* ---- the deck: one door, three dots, the next one on every roll ---- */
.door-deck { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.door-slot { position:relative; aspect-ratio:16/9; border-radius:14px; }
.door-slot > .door { position:absolute; inset:0; }
.door-in { animation:doorin 200ms var(--ease); }
.door-out { animation:doorout 200ms var(--ease) forwards; pointer-events:none; }
@keyframes doorin { from { opacity:0; } to { opacity:1; } }
@keyframes doorout { from { opacity:1; } to { opacity:0; } }
.door-dots { display:flex; justify-content:center; gap:6px; }
.door-dots i { width:5px; height:5px; border-radius:50%; background:var(--line); transition:background var(--t), transform var(--t); }
.door-dots i.on { background:var(--pink); transform:scale(1.15); }

/* ---- the phone sheet: the clip, the words, one button ---- */
.door-sheet-box { border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--well); }
.door-sheet-clip { display:block; width:100%; height:auto; max-height:44dvh; object-fit:contain; background:var(--well); }
.door-sheet-line { font-size:14px; color:var(--ink-dim); line-height:1.45; }
.door-sheet-go { flex:0 0 auto; text-decoration:none; }

html.is-mobile .door-deck { margin-top:2px; }
html.is-mobile .door-ti { font-size:15px; }

@media (prefers-reduced-motion: reduce) {
  .door, .door-chev, .door-clip, .door-dots i { transition:none; }
  .door:hover { transform:none; }
  .door-in, .door-out { animation:none; }
  .door-out { display:none; }
}

/* ---- the after-save strip: the line, a quiet way out, three doors in a row ---- */
.door-after { display:flex; flex-direction:column; gap:8px; }
.door-after-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink-faint); }
.door-after-line { line-height:1.4; }
.door-notnow { flex:0 0 auto; min-height:32px; padding:0 6px; font-size:12px; white-space:nowrap; }
.door-row { display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; }
.door-row::-webkit-scrollbar { display:none; }
.door-row .door { flex:1 1 0; min-width:0; }
.door.compact { border-radius:12px; aspect-ratio:3/2; }
/* three small cards in a row: the words need more ground under them than a wide card does */
.door.compact .door-shade { background:linear-gradient(180deg, rgba(20,20,43,0) 6%, rgba(20,20,43,.6) 38%, rgba(20,20,43,.93) 68%, rgba(20,20,43,.99) 100%); }
.door.compact .door-tx { left:10px; right:32px; bottom:7px; gap:1px; }
.door.compact .door-ey { font-size:9px; letter-spacing:.1em; line-height:1.3; }
.door.compact .door-ti { font-size:13px; line-height:1.12; }
.door.compact .door-su { display:none; }
.door.compact .door-chev { right:8px; bottom:9px; width:22px; height:22px; }
.door.compact .door-chev svg { width:12px; height:12px; }
html.is-mobile .door-row { gap:8px; }
html.is-mobile .door-row .door { flex:0 0 158px; }
html.is-mobile .door-notnow { min-height:34px; }