/* ── GOBLIN PLAYER ─────────────────────────────────────────────────────────
   The three skins chosen from the review lab (static/goblin-lab.html):
     sk-gold   — Froocan's own palette, glowing time fill   (lab variant 2)
     sk-glass  — frosted, near-invisible                    (lab variant 3, DEFAULT)
     sk-clay   — light strip, warm and earthy               (lab variant 5)
   Lab variants 1 (Slate) and 4 (Arcade) were not taken forward.

   The video is always the platform's OWN embed: nothing is re-hosted or
   re-encoded, and the creator keeps their view count. We only hide YouTube's
   chrome (controls:0) and drive the same player through its published API. */

.gp{display:flex;background:#000;overflow:hidden;border:1px solid var(--line);
    position:relative}

/* stage keeps 16:9; the strip stretches to whatever height that produces.
   The strip is a flex COLUMN BESIDE the video, never an overlay on top of it,
   so the controls can never sit over a face or a caption. */
.gstage{position:relative;flex:1 1 auto;aspect-ratio:16/9;min-width:0}
.gstage>div,.gstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.strip{flex:0 0 62px;display:flex;flex-direction:column;align-items:center;
       gap:9px;padding:11px 0 9px;user-select:none}

/* ── AUTO-HIDE ──────────────────────────────────────────────────────────────
   With auto-hide on, the strip leaves the flex flow and OVERLAYS the right
   edge. It deliberately does not just collapse its width: that would re-lay-out
   the stage every time the pointer entered or left, and a video that resizes as
   you reach for the controls is horrible to use. */
.gp.ah .strip{position:absolute;right:0;top:0;bottom:0;z-index:3;
              opacity:0;transform:translateX(10px);pointer-events:none;
              box-shadow:-14px 0 26px #00000059;
              transition:opacity .18s ease,transform .18s ease}
.gp.ah:hover .strip,
.gp.ah.peek .strip,
/* focus-within matters: a strip reachable only by hovering is a strip a
   keyboard user can never open. Tabbing into it must reveal it. */
.gp.ah:focus-within .strip{opacity:1;transform:none;pointer-events:auto}

/* ⚠ On a touch screen there IS no hover, so auto-hide would put the controls
   permanently out of reach. Tapping reveals them (.peek), but belt and braces:
   where the device has no hover at all, the strip simply stays. */
@media (hover:none){
  .gp.ah .strip{opacity:1;transform:none;pointer-events:auto;position:static}
}

.gp .btn{width:38px;height:32px;display:grid;place-items:center;cursor:pointer;
         border:0;background:transparent;color:inherit;font:inherit;
         font-size:.72rem;font-weight:700;padding:0;
         /* ◠ NAETH curve on every control, same diagonal pair as the big play */
         border-radius:0 11px 0 11px}
.gp .btn:hover{background:#ffffff18}
.gp .btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.gp .btn svg{width:17px;height:17px;fill:currentColor}

/* the vertical TIME FILL takes the slack, so it is always the tallest element
   in the strip and reads as the timeline */
.fill{flex:1 1 auto;width:9px;min-height:60px;border-radius:6px;
      position:relative;cursor:pointer;overflow:hidden}
.fill i{position:absolute;left:0;right:0;top:0;height:0;display:block}
.vol{width:9px;height:56px;border-radius:6px;position:relative;
     cursor:pointer;overflow:hidden;flex:0 0 auto}
.vol i{position:absolute;left:0;right:0;bottom:0;height:70%;display:block}
.tt{font-size:.6rem;color:var(--mut);font-variant-numeric:tabular-nums;
    letter-spacing:-.02em}
/* the goblin always sits at the BOTTOM of the right strip */
.gob{width:34px;height:34px;margin-top:2px;flex:0 0 auto;opacity:.95}

/* ── GOLD RAIL ───────────────────────────────────────────────────────────── */
.gp.sk-gold{border-radius:16px 5px 16px 5px;border-color:#4a3a1e}
.gp.sk-gold .strip{background:linear-gradient(#1d1710,#120f0b);
                   border-left:1px solid #4a3a1e;color:var(--gold2)}
.gp.sk-gold .fill,.gp.sk-gold .vol{background:#3a2f1a}
.gp.sk-gold .fill i{background:linear-gradient(var(--gold2),var(--gold));
                    box-shadow:0 0 9px #e0a83c88}
.gp.sk-gold .vol i{background:var(--gold)}
.gp.sk-gold .btn:hover{background:#e0a83c22}

/* ── GLASS (default) ─────────────────────────────────────────────────────── */
.gp.sk-glass{border-radius:18px;border-color:#ffffff1f}
.gp.sk-glass .strip{background:#0b0908cc;backdrop-filter:blur(9px);
                    border-left:1px solid #ffffff1a;color:#fff}
.gp.sk-glass .fill,.gp.sk-glass .vol{background:#ffffff26}
.gp.sk-glass .fill i{background:#fff}
.gp.sk-glass .vol i{background:#ffffffcc}
.gp.sk-glass .gob{opacity:.85}

/* ── CLAY (light strip) ──────────────────────────────────────────────────── */
.gp.sk-clay{border-radius:14px 4px 14px 4px;border-color:#6b5a3c}
.gp.sk-clay .strip{background:linear-gradient(#efe4cf,#ded0b4);color:#3a2f1f;
                   border-left:1px solid #6b5a3c}
.gp.sk-clay .fill,.gp.sk-clay .vol{background:#00000024}
.gp.sk-clay .fill i{background:var(--clay)}
.gp.sk-clay .vol i{background:#7a6340}
.gp.sk-clay .btn:hover{background:#00000014}
.gp.sk-clay .tt{color:#6b5a3c}

/* ── poster façade ──────────────────────────────────────────────────────────
   The embed is NOT created until you press play. An idle embed paints its own
   title bar, channel name and "Watch on YouTube" badge over the frame, which
   makes the strip look like a decoration on someone else's player. */
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
        cursor:pointer;display:block}
.scrim{position:absolute;inset:0;cursor:pointer;
       background:radial-gradient(60% 60% at 50% 50%,#0000 0%,#000000a8 100%)}
/* ◠ NAETH CURVE, not a circle: top-left and bottom-right stay SQUARE,
   top-right and bottom-left are rounded — the estate-wide 0 R 0 R shape. */
.bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
         width:72px;height:72px;border-radius:0 26px 0 26px;border:0;
         cursor:pointer;display:grid;place-items:center;background:#0d0b09cc;
         box-shadow:0 0 0 2px #e0a83c99;color:var(--gold2);
         transition:background .15s,color .15s,box-shadow .15s}
.bigplay svg{width:27px;height:27px;fill:currentColor;margin-left:2px}
.bigplay:hover{background:var(--gold);color:#1a1200;box-shadow:0 0 0 2px var(--gold2)}
.bigplay:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* ── a video the owner will not let us embed ────────────────────────────────
   Silence here is indistinguishable from a broken player, so say what happened
   and keep a way through to the video. */
.blocked{position:absolute;inset:0;display:flex;flex-direction:column;
         align-items:center;justify-content:center;gap:6px;text-align:center;
         padding:18px;background:#100d0a}
.blocked .btitle{margin:0;color:var(--clay);font-weight:700;font-size:.95rem}
.blocked .bmsg{margin:0;color:var(--dim);font-size:.84rem;max-width:34ch}
.blocked .bcode{margin:0;color:var(--mut);font-size:.7rem;
                font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.blocked .blink{margin-top:4px;color:var(--gold2);font-size:.82rem;
                font-weight:600;text-decoration:none}
.blocked .blink:hover{text-decoration:underline}

/* ── skin + auto-hide controls ───────────────────────────────────────────── */
.pbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;
      font-size:.8rem;color:var(--mut)}
.skins{display:flex;gap:6px}
.skinb{border:1px solid var(--line);background:var(--card);color:var(--dim);
       font:inherit;font-size:.76rem;font-weight:700;padding:5px 11px;
       border-radius:0 10px 0 10px;cursor:pointer}
.skinb:hover{border-color:var(--gold)}
.skinb:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.skinb[aria-pressed="true"]{background:#4a3a1e;border-color:var(--gold);
                            color:var(--gold2)}
.ahsw{display:flex;align-items:center;gap:8px;cursor:pointer;margin-left:auto}
.ahsw input{position:absolute;opacity:0;width:0;height:0}
.ahsw .track{width:40px;height:22px;border-radius:999px;background:#2a241c;
             position:relative;transition:background .16s;flex:0 0 auto;
             border:1px solid var(--line)}
.ahsw .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;
            border-radius:50%;background:var(--mut);transition:.16s}
.ahsw input:checked + .track{background:#4a3a1e;border-color:var(--gold)}
.ahsw input:checked + .track .knob{left:20px;background:var(--gold2)}
.ahsw input:focus-visible + .track{outline:2px solid var(--sky);outline-offset:2px}

@media(max-width:560px){
  .strip{flex-basis:52px}
  .gp .btn{width:34px}
  .ahsw{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .gp.ah .strip,.bigplay,.skinb{transition:none}
}