/* In-page highlight player (static/clip-player.js) */
.clipx[hidden]{display:none}
.clipx{position:fixed;inset:0;z-index:200;display:grid;place-items:center}
.clipx-scrim{position:absolute;inset:0;background:rgba(3,8,15,.78);backdrop-filter:blur(3px)}
.clipx-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head head" "stage list" "nav list";width:min(1100px,94vw);max-height:88vh;border:1px solid #2c4259;border-radius:14px;background:#0d1826;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;color:#e2ecf6}
.clipx-panel header{grid-area:head;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid #223449}
.clipx-panel header small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6ee0bd}
.clipx-panel h3{margin:3px 0 0;font-size:16px;line-height:1.35}
.clipx-x{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid #2c4259;background:#13243a;color:#e2ecf6;font-size:16px;cursor:pointer}
.clipx-stage{grid-area:stage;background:#000;display:grid;place-items:center;min-height:0;aspect-ratio:16/9}
.clipx-stage video,.clipx-stage iframe{width:100%;height:100%;max-height:70vh;border:0;background:#000}
.clipx-stage p{padding:24px;color:#b9ccdd}.clipx-stage p a{color:#8fd0ee}
.clipx-nav{grid-area:nav;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid #223449}
.clipx-nav[hidden]{display:none}
.clipx-nav button{min-height:40px;padding:0 16px;border-radius:9px;border:1px solid #2c4259;background:#13243a;color:#e2ecf6;font:inherit;font-weight:700;cursor:pointer}
.clipx-nav span{font-size:12px;color:#93a9bd}
.clipx-list{grid-area:list;list-style:none;margin:0;padding:6px;overflow:auto;border-left:1px solid #223449;min-height:0}
.clipx-list button{display:grid;gap:3px;width:100%;padding:8px 9px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.clipx-list button:hover{background:#142436}
.clipx-list li[aria-current=true] button{background:#17363f;box-shadow:inset 3px 0 #6ee0bd}
.clipx-list b{font-size:12.5px;font-weight:600;line-height:1.35}
.clipx-list small{font-size:11px;color:#8fa6ba}
.clipx-k{font-size:10px;font-weight:800;letter-spacing:.04em;color:#93a9bd}
.clipx-k-td{color:#f5c451}.clipx-k-play{color:#8ff0c8}
body.clipx-open{overflow:hidden}
@media (max-width:760px){
  .clipx{place-items:end stretch}
  .clipx-panel{grid-template-columns:1fr;grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"head" "stage" "nav" "list";width:100%;max-height:92vh;border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .clipx-list{border-left:0;border-top:1px solid #223449;max-height:34vh}
  .clipx-panel h3{font-size:14px}
}
@media (min-width:761px){.clipx-panel{grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"head head" "stage list" "nav list" ". list"}.clipx-stage video,.clipx-stage iframe{max-height:62vh}}
.clipx-stage{position:relative}
.clipx-unmute{position:absolute;top:10px;left:10px;z-index:2;min-height:36px;padding:6px 12px;border:0;border-radius:18px;background:rgba(255,69,0,.92);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.clipx-unmute[hidden]{display:none}
/* short landscape screens: keep Prev/Next on screen */
@media (max-height:500px){
  .clipx-panel{max-height:96vh}
  .clipx-panel header{padding:6px 10px}
  .clipx-panel h3{font-size:13px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
  .clipx-stage{aspect-ratio:auto}
  .clipx-stage video,.clipx-stage iframe{max-height:calc(96vh - 110px)}
  .clipx-nav{padding:4px 10px!important}
}