:root {
      --gold: #e8b44a;
      --bar-h: 56px;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #000;
      overflow: hidden;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    #stage {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100dvh;
      background: #000;
      overflow: hidden;
    }
    video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
    }

    /* ---- controls ---- */
    #bar {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: calc(var(--bar-h) + env(safe-area-inset-bottom));
      padding: 0 14px env(safe-area-inset-bottom) 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: opacity .25s ease, transform .25s ease;
    }
    /* The scrim is its own layer, taller than the bar itself, and masked. The
       mask is what matters: backdrop-filter clips hard at the element's edge,
       so without it the blur ends in a straight seam across the picture no
       matter how softly the colour fades. Masking fades the blur out too. */
    #bar::before {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: calc(100% + 76px);
      background: linear-gradient(to top,
        rgba(0,0,0,.86) 0%,
        rgba(0,0,0,.70) 24%,
        rgba(0,0,0,.42) 50%,
        rgba(0,0,0,.16) 74%,
        rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, rgba(0,0,0,.45) 62%, transparent 100%);
      mask-image: linear-gradient(to top, #000 0%, #000 30%, rgba(0,0,0,.45) 62%, transparent 100%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      pointer-events: none;
      z-index: 0;
    }
    #bar > * { position: relative; z-index: 1; }
    #stage.idle #bar {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
    }
    button {
      background: none;
      border: 0;
      padding: 0;
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      transition: color .15s ease, background .15s ease;
    }
    button:hover { color: var(--gold); background: rgba(255,255,255,.1); }
    button svg { width: 20px; height: 20px; fill: currentColor; display: block; }

    #time {
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,.85);
      flex: 0 0 auto;
      letter-spacing: .02em;
    }

    /* ---- progress ---- */
    #prog {
      position: relative;
      flex: 1 1 auto;
      height: 24px;
      display: flex;
      align-items: center;
      cursor: pointer;
      touch-action: none;
    }
    #prog::before {
      content: "";
      position: absolute;
      left: 0; right: 0;
      height: 4px;
      border-radius: 4px;
      background: rgba(255,255,255,.28);
      transition: height .15s ease;
    }
    #fill {
      position: absolute;
      left: 0;
      height: 4px;
      width: 0;
      border-radius: 4px;
      background: var(--gold);
      transition: height .15s ease;
      pointer-events: none;
    }
    #knob {
      position: absolute;
      left: 0;
      width: 12px;
      height: 12px;
      margin-left: -6px;
      border-radius: 50%;
      background: var(--gold);
      transform: scale(0);
      transition: transform .15s ease;
      pointer-events: none;
      box-shadow: 0 0 0 4px rgba(232,180,74,.25);
    }
    #prog:hover::before, #prog:hover #fill, #prog.dragging::before, #prog.dragging #fill { height: 6px; }
    #prog:hover #knob, #prog.dragging #knob { transform: scale(1); }

    /* ---- unmute badge ---- */
    #unmute {
      position: absolute;
      top: calc(16px + env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      height: auto;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 18px;
      border-radius: 999px;
      background: rgba(20,20,20,.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(232,180,74,.55);
      color: var(--gold);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 4px 24px rgba(0,0,0,.5);
      animation: pulse 2.4s ease-in-out infinite;
    }
    #unmute:hover { background: rgba(30,30,30,.85); color: var(--gold); }
    #unmute[hidden] { display: none; }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 0 rgba(232,180,74,.4); }
      50%      { box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 10px rgba(232,180,74,0); }
    }

    /* ---- centre play/pause: the touch control, and the fallback when
           autoplay is refused outright ---- */
    #big {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background: rgba(20,20,20,.62);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(232,180,74,.5);
      color: var(--gold);
      /* Faded in, not toggled with [hidden]: display:none gives a transition
         nothing to animate from, so it would snap. */
      opacity: 0;
      transform: scale(.7);
      pointer-events: none;
      transition: opacity .2s ease, transform .3s cubic-bezier(.2,.9,.3,1.25),
                  background .15s ease;
    }
    #big svg { width: 32px; height: 32px; transition: opacity .12s ease; }
    #big.show { opacity: 1; transform: scale(1); pointer-events: auto; }
    #big.show:hover { transform: scale(1.06); background: rgba(30,30,30,.85); color: var(--gold); }
    #big.show:active { transform: scale(.93); }

    /* ---- rotate hint: a 16:9 clip only fills a phone held sideways ---- */
    #rotate {
      position: absolute;
      left: 50%;
      bottom: calc(var(--bar-h) + 28px + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      display: none;
      align-items: center;
      gap: 9px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(20,20,20,.6);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.8);
      font-size: 13px;
      font-weight: 500;
      white-space: nowrap;
      pointer-events: none;
      transition: opacity .4s ease;
    }
    #rotate svg { width: 17px; height: 17px; fill: var(--gold); animation: tilt 2.8s ease-in-out infinite; }
    @keyframes tilt {
      0%, 55%, 100% { transform: rotate(0deg); }
      75%, 90%      { transform: rotate(-90deg); }
    }
    @media (orientation: portrait) and (pointer: coarse) {
      #stage:not(.rotated) #rotate { display: flex; }
    }
    #stage.idle #rotate { opacity: 0; }

    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
    }