/* FIKIK player: charcoal surfaces, mint selection and independent fullscreen. */
.player-stage { overflow: visible; }
.player-surface { --pm-height: 68px; position: relative; isolation: isolate; background: #000; border-radius: 10px 10px 0 0; }
.player-surface video { width: 100%; height: clamp(272px, 42vw, 420px); max-height: none; object-fit: contain; border-radius: inherit; }
.pm-controls { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) repeat(3,44px); grid-template-rows: minmax(0,1fr) 44px 20px; align-items: center; gap: 0 2px; padding: 0 8px 4px; color: #fff; background: linear-gradient(to top,#000d,transparent 78px); pointer-events: none; opacity: 1; transition: opacity .18s ease; }
.pm-controls[hidden], .pm-panel[hidden], .pm-panel [hidden] { display: none !important; }
.pm-controls button, .pm-heading button { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #fff; background: transparent; cursor: pointer; }
.pm-controls button, #pm-seek { pointer-events: auto; }
.pm-controls #pm-play { position: absolute; left: 50%; top: calc((100% - var(--pm-height)) / 2); transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: #ffffffe6; color: #111; }
.pm-controls #pm-play svg { width: 32px; height: 32px; stroke-width: 2.6; }
#pm-mute { grid-column: 2; grid-row: 2; }
#player-fullscreen { grid-column: 3; grid-row: 2; }
#player-settings-open { grid-column: 4; grid-row: 2; }
.pm-controls svg, .pm-panel svg { width: 24px; height: 24px; flex-shrink: 0; }
.pm-controls button:hover, .pm-heading button:hover { background: #ffffff1a; }
.pm-controls button[aria-expanded=true] { color: #53dfc0; background: #53dfc022; }
.pm-controls button:focus-visible, .pm-panel button:focus-visible, #pm-seek:focus-visible { outline: 2px solid #53dfc0; outline-offset: -2px; }
.pm-time { grid-column: 1; grid-row: 2; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#pm-seek { grid-column: 1 / -1; grid-row: 3; appearance: none; width: 100%; min-width: 0; height: 20px; margin: 0; background: transparent; cursor: pointer; }
#pm-seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right,#fff var(--pm-progress,0%),#ffffff66 var(--pm-progress,0%)); border-radius: 3px; }
#pm-seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; }
#pm-seek::-moz-range-track { height: 3px; background: #ffffff66; }
#pm-seek::-moz-range-progress { height: 3px; background: #53dfc0; }
#pm-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.pm-panel { position: absolute; z-index: 4; right: 12px; bottom: calc(var(--pm-height) + 8px); width: min(320px, calc(100% - 24px)); box-sizing: border-box; max-height: calc(100dvh - var(--pm-height) - 24px); overflow-y: auto; padding: 8px 12px; color: #f5f6f8; background: #1d2228fa; border: 1px solid #3b424a; border-radius: 20px; box-shadow: 0 12px 36px #0008; font-size: 14px; }
.pm-heading { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #ffffff1c; }
.pm-heading strong { flex: 1; font-size: 14px; }
.pm-heading .pm-brand { width: 30px; color: #53dfc0; }
.pm-heading button { flex-basis: 36px; width: 36px; }
.pm-row, .pm-choice { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 44px; padding: 8px 4px; border: 0; border-bottom: 1px solid #ffffff12; color: inherit; background: transparent; text-align: start; cursor: pointer; font: inherit; }
.pm-row:last-child, .pm-choice:last-child { border-bottom: 0; }
.pm-row > span:first-of-type, .pm-choice > span:first-of-type { flex: 1; }
.pm-row > svg:last-child { width: 16px; }
.pm-value { color: #aab3bd; white-space: nowrap; font-size: 12px; }
.pm-row:hover, .pm-choice:hover { background: #ffffff08; }
.pm-choice[aria-pressed=true] { color: #53dfc0; background: #53dfc01a; border-radius: 10px; }
.pm-check { width: 24px; visibility: hidden; }
.pm-choice[aria-pressed=true] .pm-check { visibility: visible; }
.pm-panel button:disabled { opacity: .45; cursor: default; }
.pm-speeds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 16px 0; }
.pm-speeds button { padding: 10px 0; min-height: 44px; border: 1px solid #454d56; border-radius: 12px; background: #282e35; color: #fff; font-size: 13px; cursor: pointer; }
.pm-speeds button[aria-pressed=true] { background: #53dfc0; border-color: #53dfc0; color: #07261e; font-weight: 700; }
#pm-status { margin: 6px 0; color: #c6cdd6; font-size: 12px; }
.player-surface:fullscreen, .player-surface.player-expanded { border-radius: 0; }
.player-surface:fullscreen video, .player-surface.player-expanded video { width: 100%; height: 100%; max-height: none; }
.player-surface.pm-idle .pm-controls { opacity: 0; pointer-events: none; }
.player-surface.player-expanded { position: fixed; z-index: 1000; inset: 0; width: 100%; height: 100dvh; }
body:has(.player-expanded) { overflow: hidden; }
@media (max-width: 600px) {
  .pm-controls { padding-inline: 6px; }
  .pm-time { font-size: 12px; }
  .pm-panel { right: 8px; width: min(310px, calc(100% - 16px)); padding: 6px 10px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pm-controls { transition: none; } }