/* tappgo.com/messages/drama. Generated by _build/pages.py; edit there.
   This block is only the world inside the phone; the shell is amb-story.css. */
/* Velvet Hour: a fictional series. Poster art: media/drama-poster.jpg (AI-generated, fictional person). */
.av{background:linear-gradient(160deg,#2A0812,#5C0F2A)}
.av svg{width:28px;height:28px}
.opt .gi{background:linear-gradient(160deg,#2A0812,#7A1634)}
.rich .media{height:168px;background:url(/messages/media/drama-poster.jpg) center 16%/cover #1A0509}
.rich .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,2,5,0) 45%,rgba(10,2,5,.82))}
.rich .media .ttl{position:absolute;left:12px;bottom:10px;z-index:1;font:600 24px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.04em;color:#FFE6C2;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.rich .media .kick{position:absolute;left:12px;bottom:38px;z-index:1;font:600 8.5px/1 var(--f);letter-spacing:.24em;color:#E9B07A}
.rich .media .ep{position:absolute;right:10px;top:10px;z-index:1;font:600 9.5px/1 var(--f);letter-spacing:.08em;color:#fff;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rich .media .play{position:absolute;left:50%;top:46%;z-index:1;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.rich .media .play::after{content:"";margin-left:3px;border-left:13px solid #B3163E;border-top:8px solid transparent;border-bottom:8px solid transparent}
/* The player: a full-screen vertical episode, the one place the page goes full color */
.app.player{color:#fff;font-family:var(--f);background:url(/messages/media/drama-poster.jpg) center 8%/cover #12040A}
.player::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,2,4,.55) 0,rgba(8,2,4,0) 22%,rgba(8,2,4,0) 52%,rgba(8,2,4,.85) 100%)}
.player .frame{position:absolute;inset:0;pointer-events:none}
.player .ptop{position:absolute;top:52px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center}
.player .ptop b{font:600 19px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.04em;color:#FFE6C2}
.player .ptop span{font:600 10px/1 var(--f);letter-spacing:.06em;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.16)}
.player .side{position:absolute;right:12px;bottom:150px;display:grid;gap:16px;justify-items:center;font:500 10px/1 var(--f)}
.player .side svg{width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.player .scene{position:absolute;left:16px;right:16px;bottom:62px;display:grid;justify-items:center;gap:10px;text-align:center}
.player .sub{font:italic 600 21px/1.2 "Cormorant Garamond",Georgia,serif;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.player .unl{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:500 11px/1 var(--f)}
.player .unl svg{width:14px;height:14px}
.player .bar{position:absolute;left:16px;right:16px;bottom:40px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.player .bar i{display:block;height:100%;width:6%;background:#fff;animation:prog 3s linear forwards}
@keyframes prog{to{width:28%}}
#states .player .bar i{animation:none;width:18%}
/* CSP: these replaced inline style="" attributes */
.foot .logo{font-size:19px}
.shop .thumbs i.t2{background-position:20% 50%}
.shop .thumbs i.t3{background-position:80% 50%}