/* God Save Our Ping — custom video player (retro 2000s vibes) */
.gsop-player{
  position:relative; background:#0f2019; border-radius:14px; overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.gsop-player video{ display:block; width:100%; height:auto; background:#0d1a14; }

.gsop-controls{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  color:#e7f3e7; user-select:none;
  background: linear-gradient(to bottom, rgba(28,48,38,.85), rgba(12,24,18,.85));
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

/* buttons */
.gsop-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:26px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(to bottom, rgba(220,255,210,.25), rgba(220,255,210,0)) ,
    linear-gradient(to bottom, #274332, #1a3427);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 0 rgba(0,0,0,.35);
}
.gsop-btn:hover{ filter:brightness(1.06); }
.gsop-btn svg{ width:16px; height:16px; fill:#e7f3e7; opacity:.95 }

.gsop-time{ font: 600 12px/1 ui-monospace,SFMono-Regular,Consolas,Monaco,monospace; opacity:.9; white-space:nowrap }

/* timeline */
.gsop-timeline{
  position:relative; flex:1 1 auto; height:8px; border-radius:999px; cursor:pointer;
  background: linear-gradient(to bottom, #1e3a2b, #15281f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35);
  overflow:hidden;
}
.gsop-buffered{ position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(to bottom, rgba(180,220,180,.8), rgba(120,170,140,.6));
}
.gsop-progress{ position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(to bottom, #cfeaa7, #9ccc8a); box-shadow: inset 0 0 12px rgba(0,0,0,.2);
}
.gsop-handle{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:999px; background:#e7f3e7; opacity:.95;
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
  pointer-events:none;
}

/* volume */
.gsop-vol{ display:flex; align-items:center; gap:6px; min-width:120px }
.gsop-slider{
  -webkit-appearance:none; appearance:none; width:90px; height:6px; border-radius:999px;
  background: linear-gradient(to bottom, #1e3a2b, #15281f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.35);
}
.gsop-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#e7f3e7; box-shadow:0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
}

/* download button */
.gsop-dl{ text-decoration:none; }
.gsop-dl .label{ display:none }
@media (min-width: 1100px){ .gsop-dl .label{ display:inline; font-weight:700; font-size:12px; margin-left:6px } }

/* controls visibility on hover for desktop */
@media (hover: hover){
  .gsop-player:not(:hover) .gsop-controls{ opacity:.0; pointer-events:none; transition:opacity .25s ease }
  .gsop-player:hover .gsop-controls{ opacity:1; transition:opacity .18s ease }
}

/* small screens: controls shown below the video (original behavior) */
@media (max-width: 640px){
  .gsop-controls{ position:static; padding:10px; gap:8px }
  .gsop-btn{ width:36px; height:30px }
  .gsop-slider{ width:80px }
}

/* loop on state */
.gsop-btn.is-on{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 0 2px rgba(170, 230, 170, .25),
    0 1px 0 rgba(0,0,0,.35);
  filter: brightness(1.08);
}