/* Thura — video player */
.player {
  position: fixed; inset: 0; background: #000; z-index: 500; overflow: hidden;
  --ctl: rgba(255, 255, 255, .92);
}
.player video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.player.idle { cursor: none; }
.player.idle .p-chrome { opacity: 0; pointer-events: none; }

.p-chrome { position: absolute; inset: 0; opacity: 1; transition: opacity .22s; }
.p-chrome::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 130px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), transparent); pointer-events: none;
}
.p-chrome::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 210px;
  background: linear-gradient(0deg, rgba(0,0,0,.86), transparent); pointer-events: none;
}

.p-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.p-top .p-title { min-width: 0; }
.p-top .p-title b { display: block; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.p-top .p-title span { display: block; font-size: 13px; color: rgba(255,255,255,.62); }
.p-top .spacer { flex: 1; }

.p-center {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.p-center .big {
  width: 76px; height: 76px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: #fff; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s;
}
.p-center .big.show { opacity: 1; transform: scale(1); }
.p-center .big svg { width: 32px; height: 32px; }

.p-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px 18px; }

.p-scrub { position: relative; height: 26px; display: flex; align-items: center; cursor: pointer; }
.p-scrub .track { position: relative; height: 4px; width: 100%; border-radius: 3px; background: rgba(255,255,255,.24); transition: height .12s; }
.p-scrub:hover .track { height: 6px; }
.p-scrub .buffered { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.34); border-radius: 3px; }
.p-scrub .played { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.p-scrub .knob {
  position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.5); transform: scale(0); transition: transform .12s;
}
.p-scrub:hover .knob, .p-scrub.dragging .knob { transform: scale(1); }
.p-scrub .marker { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 2px; background: rgba(255,255,255,.7); }
.p-scrub .marker.intro { background: color-mix(in srgb, var(--accent) 80%, #fff); }
.p-scrub .marker.credits { background: rgba(150, 190, 255, .8); }

.p-preview {
  position: absolute; bottom: 34px; transform: translateX(-50%); pointer-events: none;
  background: #0b0c10; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.6); display: none;
}
.p-preview.show { display: block; }
.p-preview .shot { width: 200px; height: 112px; background-repeat: no-repeat; background-color: #16181f; }
.p-preview .t { text-align: center; font-size: 12px; padding: 4px 0 5px; color: #fff; font-variant-numeric: tabular-nums; }

.p-controls { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.p-controls .spacer { flex: 1; }
.p-time { font-size: 13px; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; padding: 0 6px; }
.p-time .total { color: rgba(255,255,255,.45); }

.p-btn {
  width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ctl);
  cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s;
}
.p-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.p-btn.big-play { width: 46px; height: 46px; }
.p-btn svg { width: 21px; height: 21px; }
.p-btn.big-play svg { width: 26px; height: 26px; }
.p-btn[disabled] { opacity: .3; pointer-events: none; }
.p-btn.on { color: var(--accent); }

.p-vol { display: flex; align-items: center; gap: 8px; }
.p-vol input { width: 0; opacity: 0; transition: width .16s, opacity .16s; }
.p-vol:hover input, .p-vol.open input { width: 82px; opacity: 1; }

.p-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px;
  background: rgba(255,255,255,.14); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

.p-skip {
  position: absolute; right: 26px; bottom: 108px; display: none;
  padding: 0 20px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,11,15,.82); backdrop-filter: blur(8px); color: #fff;
  font-size: 14.5px; font-weight: 650; cursor: pointer; align-items: center; gap: 9px;
}
.p-skip.show { display: inline-flex; animation: skipIn .2s ease-out; }
.p-skip:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@keyframes skipIn { from { transform: translateY(8px); opacity: 0; } }

.p-upnext {
  position: absolute; right: 26px; bottom: 104px; width: 372px; padding: 15px;
  background: rgba(12,13,17,.93); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  backdrop-filter: blur(12px); display: none; box-shadow: 0 18px 46px rgba(0,0,0,.6);
}
.p-upnext.show { display: block; animation: skipIn .22s ease-out; }
.p-upnext .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.55); font-weight: 700; }
.p-upnext .row2 { display: flex; gap: 12px; margin: 9px 0 12px; }
.p-upnext img { width: 122px; height: 69px; border-radius: 7px; object-fit: cover; flex: none; background: #16181f; }
.p-upnext .t { font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.p-upnext .s { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 3px; }
.p-upnext .acts { display: flex; gap: 8px; }
.p-upnext .ring { position: relative; width: 22px; height: 22px; }
.p-upnext .ring svg { transform: rotate(-90deg); }
.p-upnext .ring circle { fill: none; stroke-width: 3; }
.p-upnext .ring .bg { stroke: rgba(255,255,255,.2); }
.p-upnext .ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

.p-panel {
  position: absolute; right: 22px; bottom: 92px; width: 300px; max-height: 62vh; overflow-y: auto;
  background: rgba(14,15,20,.96); border: 1px solid rgba(255,255,255,.13); border-radius: 12px;
  padding: 8px; box-shadow: var(--shadow); display: none;
}
.p-panel.show { display: block; animation: skipIn .16s ease-out; }
.p-panel .head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); padding: 9px 10px 5px; font-weight: 700; }
.p-panel button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none;
  color: rgba(255,255,255,.82); padding: 9px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer;
}
.p-panel button:hover { background: rgba(255,255,255,.1); color: #fff; }
.p-panel button.on { color: var(--accent); }
.p-panel button .tick { width: 15px; flex: none; }
.p-panel button .sub { display: block; font-size: 11.5px; color: rgba(255,255,255,.42); }
.p-panel .sep { height: 1px; background: rgba(255,255,255,.1); margin: 5px 6px; }

.p-stats {
  position: absolute; left: 22px; top: 74px; width: 320px; padding: 14px 16px;
  background: rgba(10,11,15,.92); border: 1px solid rgba(255,255,255,.13); border-radius: 11px;
  font: 12px/1.65 var(--mono); color: rgba(255,255,255,.8); display: none;
}
.p-stats.show { display: block; }
.p-stats b { color: var(--accent); font-weight: 700; }
.p-stats .r { display: flex; justify-content: space-between; gap: 12px; }
.p-stats .r span:first-child { color: rgba(255,255,255,.5); }

.p-loading {
  position: absolute; inset: 0; display: none; place-items: center; pointer-events: none;
}
.p-loading.show { display: grid; }
.p-loading i {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--accent); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.p-error {
  position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px;
  text-align: center; padding: 30px; color: #fff;
}
.p-error.show { display: grid; }
.p-error h3 { margin: 0; font-size: 19px; }
.p-error p { margin: 0; color: rgba(255,255,255,.62); max-width: 460px; font-size: 14px; }
.p-error .acts { display: flex; gap: 10px; }

.p-toast {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
  background: rgba(10,11,15,.9); border: 1px solid rgba(255,255,255,.14); color: #fff;
  padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; opacity: 0;
  transition: opacity .2s; pointer-events: none;
}
.p-toast.show { opacity: 1; }

.p-sub-overlay {
  position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; pointer-events: none;
  padding: 0 8%; transition: bottom .2s;
}
.player:not(.idle) .p-sub-overlay { bottom: 17%; }

@media (max-width: 760px) {
  .p-upnext { right: 12px; left: 12px; width: auto; }
  .p-panel { right: 12px; left: 12px; width: auto; }
  .p-stats { display: none !important; }
  .p-bottom { padding: 0 12px 12px; }
  .p-top { padding: 12px; }
}