/* Hihaho Floating Video — widget styles
   注: --hihaho-fw-thumb / --hihaho-fw-bar は #hihaho-fw の data-* 属性から
   widget.js が設定します（未設定時は下記 var() のフォールバック値を使用）。 */
    /* すべてのセレクタを #hihaho-fw 配下に限定し、他サイトのCSSと衝突させません */
    #hihaho-fw, #hihaho-fw *{box-sizing:border-box;}
    #hihaho-fw{
      position:fixed; inset:0; z-index:2147483000; pointer-events:none;
      font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    }

    /* 背景（全画面時のみ表示） */
    #hihaho-fw-backdrop{
      position:fixed; inset:0; background:rgba(10,14,28,.74);
      -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .4s ease, visibility .4s ease;
    }
    #hihaho-fw[data-state="open"] #hihaho-fw-backdrop{
      opacity:1; visibility:visible; pointer-events:auto;
    }

    /* ステージ：透明な位置決め枠。右下の小さな枠 → 全画面時は中央へ拡大（角丸・影は frame 側） */
    #hihaho-fw-stage{
      position:fixed;
      right:max(20px, env(safe-area-inset-right));
      bottom:max(20px, env(safe-area-inset-bottom));
      width:min(330px, 80vw);
      height:calc(min(330px, 80vw) * 9 / 16);
      transform:none;
      pointer-events:auto;
      transition:
        right .42s cubic-bezier(.22,1,.36,1),
        bottom .42s cubic-bezier(.22,1,.36,1),
        width .42s cubic-bezier(.22,1,.36,1),
        height .42s cubic-bezier(.22,1,.36,1),
        transform .42s cubic-bezier(.22,1,.36,1);
    }
    #hihaho-fw[data-state="open"] #hihaho-fw-stage{
      right:50%; bottom:50%; transform:translate(50%,50%);
      /* 上部48pxは閉じるボタン用の透明な帯。高さ＝帯 + 16:9動画(+バー) が画面内に収まるよう幅を算出 */
      --ow:min(92vw, 1140px, calc((92vh - 48px - var(--hihaho-fw-bar, 42px)) * 16 / 9));
      width:var(--ow);
      height:calc(48px + var(--ow) * 9 / 16 + var(--hihaho-fw-bar, 42px));
    }

    /* プレーヤー領域（再生成しないので拡大しても動画は途切れません）。全画面時は上部48pxの透明帯の下に配置 */
    #hihaho-fw-frame{
      position:absolute; top:0; left:0; right:0; bottom:0;
      border-radius:14px; overflow:hidden; background:#0b1020;
      box-shadow:0 12px 32px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18);
      transition:top .42s cubic-bezier(.22,1,.36,1), border-radius .42s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
    }
    #hihaho-fw[data-state="open"] #hihaho-fw-frame{top:48px; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5);}
    #hihaho-fw-frame iframe{width:100%; height:100%; border:0; display:block;}

    /* コーナーのポスター（サムネイル）：画像＋再生ボタン＋ラベル。全画面時は消えて動画を操作可能に */
    #hihaho-fw-poster{
      position:absolute; inset:0; z-index:2; margin:0; padding:0; border:0; cursor:pointer;
      border-radius:14px; overflow:hidden;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
      background:
        radial-gradient(120% 120% at 50% 45%, rgba(8,12,24,.22) 0%, rgba(8,12,24,.5) 70%, rgba(8,12,24,.68) 100%),
        var(--hihaho-fw-thumb, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20360%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%2313243f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%231e5ea8%27%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%27h%27%20cx%3D%270.28%27%20cy%3D%270.22%27%20r%3D%270.9%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%233a86d6%27%20stop-opacity%3D%270.55%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%233a86d6%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%27640%27%20height%3D%27360%27%20fill%3D%27url%28%23g%29%27%2F%3E%3Crect%20width%3D%27640%27%20height%3D%27360%27%20fill%3D%27url%28%23h%29%27%2F%3E%3Ccircle%20cx%3D%27535%27%20cy%3D%27312%27%20r%3D%27150%27%20fill%3D%27%230b7a68%27%20opacity%3D%270.20%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2762%27%20r%3D%2786%27%20fill%3D%27%23ffffff%27%20opacity%3D%270.05%27%2F%3E%3Ctext%20x%3D%27320%27%20y%3D%27338%27%20font-family%3D%27sans-serif%27%20font-size%3D%2715%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.45%27%20text-anchor%3D%27middle%27%20letter-spacing%3D%273%27%3ESAMPLE%20THUMBNAIL%3C%2Ftext%3E%3C%2Fsvg%3E")) center / cover no-repeat;
      transition:opacity .3s ease, filter .3s ease;
      -webkit-tap-highlight-color:transparent;
    }
    #hihaho-fw-poster:hover{filter:brightness(1.08);}
    #hihaho-fw[data-state="open"] #hihaho-fw-poster{opacity:0; pointer-events:none;}

    #hihaho-fw-play{
      position:relative; width:56px; height:56px; border-radius:50%;
      display:grid; place-items:center; background:rgba(255,255,255,.96);
      box-shadow:0 6px 18px rgba(0,0,0,.3);
      transition:transform .25s cubic-bezier(.34,1.56,.64,1);
    }
    #hihaho-fw-play svg{width:20px; height:20px; margin-left:3px; fill:#0b1020;}
    #hihaho-fw-play::after{
      content:""; position:absolute; inset:0; border-radius:50%;
      box-shadow:0 0 0 0 rgba(255,255,255,.5);
      animation:hihaho-fw-pulse 2.4s ease-out infinite;
    }
    @keyframes hihaho-fw-pulse{
      0%{box-shadow:0 0 0 0 rgba(255,255,255,.5);}
      70%{box-shadow:0 0 0 16px rgba(255,255,255,0);}
      100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
    }
    #hihaho-fw-poster:hover #hihaho-fw-play{transform:scale(1.08);}
    #hihaho-fw-label{
      color:#fff; font-size:13px; font-weight:600; letter-spacing:.02em;
      text-shadow:0 1px 3px rgba(0,0,0,.5);
    }

    /* サムネイルを丸ごと非表示にする ✕（右上・コーナー時のみ／枠の内側に配置） */
    #hihaho-fw-dismiss{
      position:absolute; top:8px; right:8px; z-index:5;
      width:28px; height:28px; border-radius:50%; cursor:pointer;
      margin:0; padding:0; line-height:0;
      border:1px solid rgba(255,255,255,.85);
      background:rgba(12,16,30,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
      display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.4);
      transition:transform .2s ease, opacity .2s ease, background .2s ease;
    }
    #hihaho-fw-dismiss svg{display:block; width:12px; height:12px; stroke:#fff; stroke-width:2.6;}
    #hihaho-fw-dismiss:hover{transform:scale(1.12); background:rgba(192,32,32,.9);}
    #hihaho-fw[data-state="open"] #hihaho-fw-dismiss{opacity:0; pointer-events:none;}

    /* 全画面を閉じる ✕（全画面時のみ・動画の上の帯に配置／動画には被りません） */
    #hihaho-fw-close{
      position:absolute; top:4px; right:10px; z-index:6;
      width:40px; height:40px; border-radius:50%; cursor:pointer;
      margin:0; padding:0; line-height:0;
      border:1px solid rgba(255,255,255,.55);
      background:rgba(20,24,38,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
      color:#fff; display:grid; place-items:center;
      opacity:0; transform:scale(.8); pointer-events:none;
      transition:opacity .3s ease .08s, transform .3s ease .08s, background .2s ease;
    }
    #hihaho-fw-close svg{display:block; width:16px; height:16px; stroke:#fff; stroke-width:2.6;}
    #hihaho-fw-close:hover{background:rgba(192,32,32,.95);}
    #hihaho-fw[data-state="open"] #hihaho-fw-close{opacity:1; transform:scale(1); pointer-events:auto;}

    @media (prefers-reduced-motion: reduce){
      #hihaho-fw-stage, #hihaho-fw-backdrop, #hihaho-fw-poster, #hihaho-fw-frame,
      #hihaho-fw-close, #hihaho-fw-play, #hihaho-fw-dismiss{transition:none !important;}
      #hihaho-fw-play::after{animation:none !important;}
    }