/* Hallmark · page: H5 player · genre: cinematic utility · macrostructure: immersive stage + episode rail · theme: Midnight · nav: contextual overlay · footer: none · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49–57) */
#player{inset:0;width:100%;height:100dvh;margin:0;overflow:hidden;background:var(--color-paper);color:var(--color-ink)}
#player::backdrop{background:var(--color-paper)}
#player .player-shell{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,22rem);background:var(--color-paper);isolation:isolate}
#player .player-stage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;background:color-mix(in oklab,var(--color-paper) 90%,var(--color-ink));touch-action:pan-y}
#player .player-stage::before{content:"";position:absolute;inset:0;background-image:var(--player-poster);background-position:center;background-size:cover;filter:blur(2rem);opacity:.14;transform:scale(1.08)}
#player video{position:relative;z-index:1;width:100%;height:100%;max-width:calc(100dvh * .67);object-fit:contain;background:var(--color-paper);box-shadow:0 0 4rem color-mix(in oklab,var(--color-paper) 76%,transparent)}
#player .player-scrim{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;background:linear-gradient(to bottom,color-mix(in oklab,var(--color-paper) 82%,transparent),transparent 24%,transparent 60%,color-mix(in oklab,var(--color-paper) 92%,transparent));transition:opacity var(--duration-standard) var(--ease-standard)}
#player .player-stage[data-controls="hidden"] .player-scrim{opacity:0}
#player .player-stage[data-controls="hidden"]{cursor:none}
#player .player-topbar,#player .player-controls,#player .player-center,#player .player-toast{pointer-events:auto}
#player .player-topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:max(var(--space-4),env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right)) var(--space-3) max(var(--space-4),env(safe-area-inset-left))}
#player .player-heading{min-width:0;display:grid;gap:2px}
#player .player-heading span{font-family:var(--font-mono);font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--color-accent)}
#player .player-heading #playerTitle{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:1rem;line-height:1.2}
#player .player-icon-button,#player .player-transport button,#player .player-center-play,#player .player-error button,#player .player-next-card button,#player .episode-drawer-close,#player #favoriteDrama{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border:1px solid color-mix(in oklab,var(--color-rule) 72%,transparent);border-radius:var(--radius-pill);background:color-mix(in oklab,var(--color-paper) 74%,transparent);color:var(--color-ink);backdrop-filter:blur(1rem);cursor:pointer}
#player .player-icon-button svg,#player .player-transport svg,#player .player-center-play svg,#player .episode-drawer-close svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#player .player-center-play svg{width:1.8rem;height:1.8rem}
#player #favoriteDrama{width:auto;padding:0 var(--space-4);font-size:.76rem;font-weight:800}
#player #favoriteDrama[data-favorite="1"]{border-color:var(--color-accent);color:var(--color-accent)}
#player .player-center{position:absolute;inset:18% 10% 23%;display:grid;place-items:center;pointer-events:none}
#player .player-center>*{grid-area:1/1}
#player .player-center-play{width:4.25rem;height:4.25rem;border-color:color-mix(in oklab,var(--color-ink) 44%,transparent);background:color-mix(in oklab,var(--color-paper) 62%,transparent);transform:scale(1);transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
#player [hidden]{display:none!important}
#player .player-loading{display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-paper) 72%,transparent);font-size:.78rem;color:var(--color-muted)}
#player .player-spinner{width:2rem;height:2rem;border:2px solid var(--color-rule);border-top-color:var(--color-accent);border-radius:50%;animation:cola-player-spin .8s linear infinite}
@keyframes cola-player-spin{to{transform:rotate(360deg)}}
#player .player-error,#player .player-next-card{width:min(25rem,100%);display:grid;justify-items:center;gap:var(--space-3);padding:var(--space-5);border:1px solid var(--color-rule);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--color-paper-raised) 92%,transparent);text-align:center;box-shadow:0 1.5rem 4rem color-mix(in oklab,var(--color-paper) 70%,transparent)}
#player .player-error b,#player .player-next-card b{font-family:var(--font-display);font-size:1.2rem}
#player .player-error span,#player .player-next-card span{color:var(--color-muted);font-size:.82rem}
#player .player-error-actions,#player .player-next-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
#player .player-error button,#player .player-next-card button{width:auto;padding:0 var(--space-4);border-radius:var(--radius-pill);font-weight:800}
#player .player-error button:first-child,#player .player-next-card button:first-child{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink)}
#player .player-toast{position:absolute;left:50%;top:50%;translate:-50% -50%;min-width:6.5rem;padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);background:color-mix(in oklab,var(--color-paper) 80%,transparent);text-align:center;font-weight:800}
#player .player-controls{display:grid;gap:var(--space-3);padding:var(--space-3) max(var(--space-5),env(safe-area-inset-right)) max(var(--space-5),env(safe-area-inset-bottom)) max(var(--space-5),env(safe-area-inset-left))}
#player .player-timeline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3)}
#player .player-timeline input{width:100%;height:44px;margin:0;accent-color:var(--color-accent);cursor:pointer}
#player .player-timeline input:disabled{cursor:not-allowed;opacity:.55}
#player #progressLabel{font-family:var(--font-mono);font-size:.68rem;color:var(--color-ink);font-variant-numeric:tabular-nums}
#player .player-control-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-3)}
#player .player-transport,#player .player-tools{display:flex;align-items:center;gap:var(--space-2)}
#player .player-transport{justify-content:center}
#player .player-tools{justify-content:flex-end}
#player .player-transport .player-play-toggle{width:3.25rem;height:3.25rem;background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
#player .player-source-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em}
#player .player-source-state[data-kind="backup"]{color:var(--color-focus)}
#player .player-speed{width:auto;padding:0 var(--space-3);font-family:var(--font-mono);font-size:.72rem;font-weight:800}
#player .player-meta{min-height:0;display:flex;flex-direction:column;padding:0;background:var(--color-paper-raised);border-left:1px solid var(--color-rule);overflow:hidden}
#player .episode-drawer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-3)}
#player .episode-drawer-head div{min-width:0;display:grid;gap:2px}
#player .episode-drawer-head span{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;color:var(--color-accent)}
#player .episode-drawer-head h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.35rem}
#player .episode-drawer-close{display:none}
#player .episodes{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--space-2);padding:var(--space-2) var(--space-4) var(--space-4);overflow-y:auto;overscroll-behavior:contain}
#player .episodes button{min-height:3.75rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--color-ink);text-align:left;cursor:pointer}
#player .episodes button:hover{background:var(--color-paper-soft)}
#player .episodes button.active{border-color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 13%,var(--color-paper-raised))}
#player .episodes button.locked{color:var(--color-muted)}
#player .episode-number{min-width:3.25rem;font-family:var(--font-mono);font-size:.72rem;font-weight:800;color:var(--color-accent)}
#player .episode-copy{min-width:0;display:grid;gap:2px}
#player .episode-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
#player .episode-copy small{color:var(--color-muted);font-size:.68rem}
#player .episode-state{font-size:.72rem;color:var(--color-muted)}
#player .episode-progress{grid-column:2/4;width:100%;height:2px;background:var(--color-rule);overflow:hidden}
#player .episode-progress i{display:block;height:100%;background:var(--color-accent)}
#player .player-tip{margin:auto var(--space-5) var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--color-rule);color:var(--color-muted);font-size:.72rem}
@media(max-width:47.5rem){#player .player-shell{grid-template-columns:minmax(0,1fr)}#player .player-meta{position:fixed;z-index:5;left:0;right:0;bottom:0;height:min(72dvh,38rem);border-left:0;border-top:1px solid var(--color-rule);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -1rem 4rem color-mix(in oklab,var(--color-paper) 72%,transparent);transform:translateY(105%);visibility:hidden;transition:transform var(--duration-standard) var(--ease-standard),visibility 0s linear var(--duration-standard)}#player .player-meta[data-open="true"]{transform:translateY(0);visibility:visible;transition-delay:0s}#player .episode-drawer-close{display:inline-grid}#player .player-tip{display:block}#player video{max-width:min(100%,calc(100dvh * .67))}}
@media(max-width:38rem){#player .player-topbar{padding-inline:var(--space-3)}#player #favoriteDrama{width:44px;padding:0;font-size:0}#player #favoriteDrama::before{content:"+";font-size:1.2rem}#player #favoriteDrama[data-favorite="1"]::before{content:"✓"}#player .player-controls{gap:var(--space-2);padding-inline:var(--space-3)}#player .player-timeline{gap:var(--space-2)}#player .player-control-row{grid-template-columns:auto auto;justify-content:space-between;gap:var(--space-1)}#player .player-source-state{display:none}#player .player-transport,#player .player-tools{gap:var(--space-1)}#player .player-tools .player-fullscreen{display:none}#player .player-icon-button,#player .player-transport button{min-width:44px;width:44px;min-height:44px;height:44px}#player .player-transport .player-play-toggle{width:48px;height:48px}#player .player-center-play{width:3.8rem;height:3.8rem}}
@media(max-width:22.5rem){#player .player-heading #playerTitle{max-width:8rem}#player .player-source-state{display:none}#player .player-tools{gap:var(--space-1)}#player .player-speed{padding:0 var(--space-2)}}
@media(orientation:landscape) and (max-height:34rem) and (max-width:47.5rem){#player video{max-width:calc(100dvh * .67)}#player .player-topbar{padding-block:var(--space-2)}#player .player-controls{padding-block:var(--space-2)}}
@media(prefers-reduced-motion:reduce){#player .player-spinner{animation:none}#player .player-meta,#player .player-scrim{transition:none}}