/* Hallmark · macrostructure: Photographic · tone: cinematic utility · anchor hue: coral */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */

.v215-drama-card .poster{position:relative}
.v215-cover-badge{position:absolute;z-index:2;inset-block-start:var(--space-2);inset-inline-start:50%;max-width:calc(100% - var(--space-3));min-height:22px;transform:translateX(-50%);overflow:hidden;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);background:var(--color-accent);color:var(--color-accent-ink);font-family:var(--font-display);font-size:clamp(.56rem,2.4vw,.7rem);font-weight:900;line-height:1.15;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 6px 18px color-mix(in oklab,var(--color-paper) 58%,transparent)}
.v215-like{display:grid;justify-items:center;gap:var(--space-1);min-width:48px;min-height:52px;border:0;padding:var(--space-1);background:transparent;color:var(--color-ink);font-family:var(--font-body);font-weight:800;line-height:1;text-shadow:0 2px 10px var(--color-paper)}
.v215-like svg{width:29px;height:29px;fill:transparent;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v215-like span{color:inherit;font-size:.72rem;white-space:nowrap}
.v215-like.is-liked svg{fill:var(--color-accent);stroke:var(--color-accent)}
.v215-like.is-compact{position:absolute;z-index:2;inset-inline-end:var(--space-1);inset-block-end:var(--space-1);display:flex;align-items:center;gap:var(--space-1);min-width:0;min-height:28px;padding:var(--space-1)}
.v215-like.is-compact svg{width:15px;height:15px;fill:var(--color-ink);stroke:var(--color-ink)}
.v215-like.is-compact.is-liked svg{fill:var(--color-accent);stroke:var(--color-accent)}
.v215-like.is-compact span{font-size:.68rem}
.v215-like[data-state=loading]{cursor:wait;opacity:.62}
.v215-like[data-state=error]{color:var(--color-error)}
.v215-like[data-state=success]{color:var(--color-success)}
.v215-like:disabled,.v215-recent button:disabled,.v215-ranking-row:disabled,.v215-feed-item button:disabled{cursor:not-allowed;opacity:.5}
.v215-like:focus-visible,.v215-recent button:focus-visible,.v215-ranking-row:focus-visible,.v215-feed-item button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.v215-like:active,.v215-recent button:active,.v215-ranking-row:active,.v215-feed-item button:active{opacity:.74}

.v215-ranking{width:min(100% - var(--space-6),1180px);margin:var(--space-5) auto var(--space-7);padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-paper-raised);color:var(--color-ink);box-shadow:0 20px 60px color-mix(in oklab,var(--color-paper) 72%,transparent)}
.v215-ranking>header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-block-end:var(--space-3)}
.v215-ranking h2{min-width:0;margin:0;font-family:var(--font-display);font-size:clamp(1.35rem,5vw,2rem);line-height:1;overflow-wrap:anywhere}
.v215-ranking header p{margin:var(--space-1) 0 0;color:var(--color-muted);font-size:.78rem}
.v215-live{display:flex;align-items:center;gap:var(--space-1);color:var(--color-accent);font-family:var(--font-mono);font-size:.64rem;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.v215-live i{width:7px;height:7px;border-radius:50%;background:var(--color-accent)}
.v215-ranking-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
.v215-ranking-row{display:grid;grid-template-columns:28px 54px minmax(0,1fr) auto;align-items:center;gap:var(--space-2);min-width:0;min-height:78px;border:0;border-radius:var(--radius-sm);padding:var(--space-2);background:transparent;color:var(--color-ink);cursor:pointer;text-align:start}
.v215-ranking-row img{width:54px;height:70px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-paper-soft)}
.v215-rank-number{font-family:var(--font-display);font-size:1.2rem;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}
.v215-ranking-row:nth-child(-n+3) .v215-rank-number{color:var(--color-accent)}
.v215-ranking-row>div{min-width:0}
.v215-ranking-row h3{margin:0;overflow:hidden;font-family:var(--font-display);font-size:.86rem;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.v215-ranking-row p{display:-webkit-box;margin:var(--space-1) 0 0;overflow:hidden;color:var(--color-muted);font-size:.68rem;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.v215-rank-score{display:flex;align-items:center;gap:var(--space-1);color:var(--color-ink);font-size:.8rem;white-space:nowrap}
.v215-rank-score svg{width:18px;height:18px;fill:var(--color-accent);stroke:var(--color-accent)}

.v215-recent{position:fixed;z-index:calc(var(--z-nav) + 2);inset-inline-start:max(var(--space-3),env(safe-area-inset-left));inset-block-end:calc(78px + env(safe-area-inset-bottom));width:116px;border-radius:var(--radius-md);background:var(--color-paper-raised);color:var(--color-ink);box-shadow:0 18px 46px color-mix(in oklab,var(--color-paper) 62%,transparent)}
.v215-recent-close{position:absolute;z-index:2;inset-block-start:-18px;inset-inline-end:-8px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;padding:var(--space-2);background:transparent;color:var(--color-ink)}
.v215-recent-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.v215-recent-open{display:block;width:100%;border:0;border-radius:inherit;padding:0;background:transparent;color:var(--color-ink);overflow:hidden;text-align:start}
.v215-recent-poster{position:relative;display:block;aspect-ratio:2/3;background:var(--color-paper-soft) center/cover}
.v215-recent-poster i{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:var(--color-ink);color:var(--color-paper)}
.v215-recent-poster svg{width:20px;height:20px;fill:currentColor;stroke:currentColor}
.v215-recent-label{display:grid;justify-items:center;gap:var(--space-1);padding:var(--space-2);background:var(--color-accent);color:var(--color-accent-ink);text-align:center}
.v215-recent-label b,.v215-recent-label small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v215-recent-label b{font-size:.76rem}.v215-recent-label small{font-size:.6rem}

.v215-discover{position:relative;height:calc(100svh - 128px);min-height:420px;background:var(--color-paper);color:var(--color-ink);overflow:hidden}
.v215-discover-title{position:absolute;z-index:5;inset-block-start:var(--space-3);inset-inline:var(--space-4);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);pointer-events:none}
.v215-discover-title h1{min-width:0;margin:0;font-family:var(--font-display);font-size:1.22rem;line-height:1;overflow-wrap:anywhere;text-shadow:0 2px 12px var(--color-paper)}
.v215-discover-title span{color:var(--color-muted);font-size:.67rem;white-space:nowrap;text-shadow:0 2px 12px var(--color-paper)}
.v215-feed{height:100%;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none}
.v215-feed::-webkit-scrollbar{display:none}
.v215-feed-item{position:relative;isolation:isolate;height:100%;min-height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--color-paper-soft) var(--feed-poster) center/cover;color:var(--color-ink)}
.v215-feed-item video{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;opacity:0;transition:opacity var(--duration-standard) var(--ease-standard)}
.v215-feed-item.is-active[data-source-state=ready] video{opacity:1}
.v215-feed-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(to bottom,color-mix(in oklab,var(--color-paper) 20%,transparent),transparent 36%,color-mix(in oklab,var(--color-paper) 90%,transparent));color:var(--color-ink)}
.v215-feed-item>header{position:absolute;z-index:2;inset-block-start:var(--space-7);inset-inline:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.v215-feed-item>header>span{max-width:70%;overflow:hidden;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);background:var(--color-accent);color:var(--color-accent-ink);font-family:var(--font-display);font-size:.66rem;font-weight:900;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}
.v215-feed-item>header button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:color-mix(in oklab,var(--color-paper) 60%,transparent);color:var(--color-ink)}
.v215-feed-item>header button{margin-inline-start:auto}
.v215-feed-item>header svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v215-feed-copy{position:absolute;z-index:2;inset-inline:var(--space-4) 76px;inset-block-end:var(--space-4);min-width:0}
.v215-feed-copy h2{min-width:0;margin:0;font-family:var(--font-display);font-size:clamp(1.35rem,7vw,2.35rem);line-height:1.02;letter-spacing:-.025em;overflow-wrap:anywhere;text-shadow:0 2px 14px var(--color-paper)}
.v215-feed-copy>span{display:block;margin-block-start:var(--space-2);color:var(--color-muted);font-size:.72rem;font-weight:800}
.v215-feed-copy p{display:-webkit-box;max-width:58ch;margin:var(--space-2) 0 var(--space-3);overflow:hidden;color:var(--color-ink);font-size:.82rem;line-height:1.38;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-shadow:0 2px 12px var(--color-paper)}
.v215-full-series{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:min(100%,360px);min-height:44px;border:0;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);background:var(--color-ink);color:var(--color-paper);font-family:var(--font-display);font-size:.78rem;font-weight:900;white-space:nowrap}
.v215-full-series svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.v215-feed-actions-actions{position:absolute;z-index:3;inset-inline-end:var(--space-2);inset-block-end:var(--space-5);display:grid;justify-items:center;gap:var(--space-2)}
.v215-feed-actions-actions>button:not(.v215-like){display:grid;justify-items:center;gap:var(--space-1);min-width:48px;min-height:52px;border:0;padding:var(--space-1);background:transparent;color:var(--color-ink);font-size:.62rem;font-weight:800;text-shadow:0 2px 10px var(--color-paper)}
.v215-feed-actions-actions svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v215-feed-toggle{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;color:transparent}
.v215-feed-toggle svg{display:none}
.v215-feed-skeleton{display:grid;place-items:center;height:100%;background:var(--color-paper-soft)}
.v215-feed-skeleton i{position:absolute;width:42%;height:10px;border-radius:var(--radius-pill);background:var(--color-rule);animation:v215-pulse 1.2s var(--ease-standard) infinite alternate}
.v215-feed-skeleton i:nth-child(2){width:66%;transform:translateY(28px)}.v215-feed-skeleton i:nth-child(3){width:54%;transform:translateY(56px)}
@keyframes v215-pulse{to{opacity:.38}}

@media (hover:hover) and (pointer:fine){
  .v215-ranking-row:hover{background:var(--color-paper-soft);color:var(--color-ink)}
  .v215-like:hover,.v215-feed-item button:not(.v215-feed-toggle):hover{transform:translateY(-1px)}
}

@media (min-width:40rem){
  .v215-ranking{padding:var(--space-5)}
  .v215-ranking-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-4)}
  .v215-discover{width:min(100%,620px);height:calc(100svh - 70px);margin-inline:auto;border-inline:1px solid var(--color-rule)}
  .v215-feed-copy{inset-inline-start:var(--space-5);inset-block-end:var(--space-5)}
  .v215-recent{inset-inline-start:auto;inset-inline-end:var(--space-5);inset-block-end:var(--space-5);width:136px}
}

@media (min-width:70rem){.v215-ranking-list{grid-template-columns:repeat(2,minmax(0,1fr))}.v215-ranking-row{grid-template-columns:32px 60px minmax(0,1fr) auto}.v215-ranking-row img{width:60px;height:78px}}

@media (prefers-reduced-motion:reduce){
  .v215-feed-item video,.v215-like,.v215-ranking-row,.v215-recent button,.v215-feed-item button{transition-duration:var(--duration-fast)!important;transform:none!important}
  .v215-feed-skeleton i{animation:none}
}