:root{
    /* 帯(グラスモーフィズム)。夜=暗いガラス+生成りの文字 */
    --band-bg:linear-gradient(168deg, rgba(13,17,36,.52), rgba(13,17,36,.32));
    --band-edge:rgba(243,234,217,.20);
    --band-hi:rgba(255,255,255,.09);
    --band-ink:#f3ead9;
    --band-ink-dim:rgba(243,234,217,.70);
    --band-line:rgba(243,234,217,.38);
    --band-hover:rgba(255,255,255,.08);
    --band-ink-contrast:#131628;
    --band-fallback:rgba(12,16,34,.88);
    --ink:#f3ead9;
    --ink-dim:rgba(243,234,217,.62);
    --glass:rgba(10,12,30,.42);
    --glass-line:rgba(243,234,217,.2);
    --accent:#ff7a2e;
    --font-display:"Shippori Mincho",serif;
    --font-ui:"Zen Kaku Gothic New",sans-serif;
  }
  body[data-theme="day"]{
    --ink:#0d1830;
    --ink-dim:rgba(13,24,48,.72);
    --glass:rgba(255,255,255,.4);
    --glass-line:rgba(13,24,48,.24);
    /* 昼=明るいガラス+濃紺の文字 */
    --band-bg:linear-gradient(168deg, rgba(255,255,255,.40), rgba(255,255,255,.18));
    --band-edge:rgba(255,255,255,.55);
    --band-hi:rgba(255,255,255,.55);
    --band-ink:#101828;
    --band-ink-dim:rgba(16,24,40,.70);
    --band-line:rgba(16,24,40,.36);
    --band-hover:rgba(16,24,40,.06);
    --band-ink-contrast:#f6f8ff;
    --band-fallback:rgba(244,246,250,.92);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:var(--font-ui);color:var(--ink);overflow:hidden;
    background:#05070f;
  }
  /* ---- 空: 画面の主役。固定レイヤーに背景画とcanvas ---- */
  #sky-bg{
    position:fixed;inset:0;z-index:-1;
    background:linear-gradient(180deg,#05070f,#0a0e24 46%,#141a38 78%,#1e2547);
  }
  #sky-bg .bg{position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transition:opacity 1.4s ease}
  #sky-bg .bg.on{opacity:1}
  #sky{position:fixed;inset:0;width:100vw;height:100vh;display:block}

  /* ---- 野鳥観察ロゴ(左上) ---- */
  .brand{position:fixed;top:3.4vh;left:3.4vw;z-index:5;pointer-events:none}
  .brand h1{line-height:0}
  .brand .logo{
    display:block;width:clamp(190px,21vw,320px);height:auto;
    filter:drop-shadow(0 1px 3px rgba(8,12,26,.55)) drop-shadow(0 2px 14px rgba(8,12,26,.35));
  }

  /* ---- 空の切り替え: 文字なしスライドスイッチ(左=烏の空 / 右=夜鷹の空) ---- */
  .sky-switch{
    position:fixed;top:calc(3.4vh + 4px);right:3.4vw;z-index:5;
    width:60px;height:30px;border-radius:99px;cursor:pointer;
    background:var(--glass);border:1px solid var(--glass-line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:background .3s,border-color .3s;
  }
  .sky-switch .knob{
    position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
    background:#f6f8ff;box-shadow:0 1px 4px rgba(5,6,14,.4);
    transition:transform .35s cubic-bezier(.22,.9,.3,1),background .35s;
  }
  .sky-switch[aria-checked="true"] .knob{transform:translateX(30px);background:var(--accent)}
  .sky-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sky-switch:active .knob{width:26px}

  /* ---- 下部の帯(紙): 文字要素を集約 ---- */
  .band{
    position:fixed;left:0;right:0;bottom:0;z-index:4;
    background:var(--band-bg);color:var(--band-ink);
    backdrop-filter:blur(22px) saturate(1.5);
    -webkit-backdrop-filter:blur(22px) saturate(1.5);
    border-top:1px solid var(--band-edge);
    box-shadow:0 -10px 36px rgba(4,7,18,.22), inset 0 1px 0 var(--band-hi);
    display:grid;column-gap:2vw;align-items:center;
    /* copy列はリード文が1文=1行で収まる幅を確保(帯の高さ=コピー3行ぶんに保つ) */
    grid-template-columns:minmax(330px,1.1fr) auto minmax(200px,.9fr);
    grid-template-areas:"copy players share";
    padding:.6rem 4.6vw calc(env(safe-area-inset-bottom) + .55rem);
  }
  .band .seg{display:inline-block;margin-right:.4em}   /* 折り返しは文節境界のみ */

  .band-copy{grid-area:copy}
  .band-copy .main{
    font-family:var(--font-display);font-weight:700;color:var(--band-ink);
    font-size:clamp(1.2rem,1.9vw,1.65rem);letter-spacing:.26em;
  }
  .band-copy .lead{
    margin-top:.5em;font-size:.78rem;letter-spacing:.1em;line-height:1.72;
    color:var(--band-ink-dim);
  }

  /* プレイヤー(帯の中央) */
  .band-players{
    grid-area:players;
    display:grid;grid-template-columns:repeat(2,minmax(260px,320px));gap:12px;
  }
  .card .under{
    display:flex;justify-content:space-between;align-items:center;gap:.8em;
    margin-top:.3rem;min-height:20px;
  }
  .card .release{font-size:.55rem;letter-spacing:.16em;color:var(--accent);white-space:nowrap}
  .embed{min-height:80px;border-radius:12px;overflow:hidden}
  .applink{
    display:inline-block;
    text-decoration:none;border:none;
    color:var(--band-ink);                     /* テキストリンク(YouTubeで開く等)がUA既定の青にならないように */
    font-size:.72rem;letter-spacing:.1em;
  }
  .applink:hover{text-decoration:underline;text-underline-offset:3px}
  .applink:visited{color:var(--band-ink)}
  .applink:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .spotify-badge{height:20px;display:block;opacity:.9}
  body[data-theme="night"] .spotify-badge{filter:brightness(0) invert(1)}   /* 暗いガラス上は白 */
  .applink:hover .spotify-badge{opacity:1}
  .fallback-btn{
    width:100%;min-height:56px;height:auto;padding:1em 1.2em;border-radius:12px;cursor:pointer;
    border:1px solid var(--band-line);background:var(--band-hover);
    color:var(--band-ink);font-family:var(--font-ui);font-size:.8rem;letter-spacing:.14em;
    transition:background .25s;
  }
  .fallback-btn:hover{background:var(--band-edge)}
  .fallback-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* SHARE(帯の右) */
  .band-share{
    grid-area:share;justify-self:end;
    display:flex;align-items:center;gap:.7em;flex-wrap:wrap;justify-content:flex-end;
  }
  .band-share .share-label{
    font-size:.68rem;letter-spacing:.42em;color:var(--band-ink-dim);font-weight:600;
  }
  /* モノクローム枠線ピル: 塗り・ブランド色・発光なし(ミニマル方針) */
  .band-share button, .band-share a{
    font-family:var(--font-ui);font-size:.85rem;letter-spacing:.08em;
    border:1px solid var(--band-line);border-radius:999px;cursor:pointer;
    padding:.7em 1.5em;text-decoration:none;
    background:transparent;color:var(--band-ink);font-weight:500;
    transition:background .15s ease, transform .08s ease, opacity .2s;
  }
  .band-share button:hover, .band-share a:hover{background:var(--band-hover)}
  .band-share button:active, .band-share a:active{transform:translateY(1px) scale(.98)}
  #share-shot{border-width:1.5px;font-weight:600}   /* 主導線は枠の重みだけで示す */
  .sns-row{display:flex;gap:.6em}
  .band-share a.locked{
    border-style:dashed;opacity:.45;pointer-events:none;font-weight:400;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .band, .band-players{background:var(--band-fallback)}
  }

  /* 診断表示(通常は非表示、?debugで可視) */
  .diag{display:none}
  body.debug .diag{
    display:block;position:fixed;left:8px;bottom:8px;z-index:30;
    font-size:.6rem;color:var(--ink-dim);
  }

  /* ---- 野鳥観察モード: 帯の真上・中央のピクトグラム ---- */
  .scope-toggle{
    position:absolute;left:50%;top:0;transform:translate(-50%,calc(-100% - 14px));
    z-index:5;width:56px;height:56px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink);background:var(--glass);
    border:1px solid var(--glass-line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .08s ease, background .3s, color .3s, opacity .3s;
  }
  .scope-toggle svg{width:30px;height:30px;display:block}
  .scope-toggle .ic-on{display:none}                         /* OFF時=双眼鏡 */
  .scope-toggle[aria-pressed="true"] .ic-off{display:none}   /* ON時=目 */
  .scope-toggle[aria-pressed="true"] .ic-on{display:block}
  .scope-toggle:active{transform:translate(-50%,calc(-100% - 14px)) scale(.94)}
  .scope-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .scope-toggle[disabled]{opacity:.4;cursor:default;border-style:dashed;pointer-events:auto}
  .scope-toggle[aria-pressed="true"]{
    /* テーマ対応の反転: 夜=生成り地+黒目 / 昼=濃紺地+白目
       (旧: 昼で濃紺地+黒アイコン=真っ黒になる反転バグ) */
    background:var(--band-ink);color:var(--band-ink-contrast);border-color:transparent;
  }
  #scope{position:fixed;inset:0;z-index:2;pointer-events:none;display:none}
  body.scope-on #scope{display:block}

  /* 導線ガイド: 次に押すべきボタンがゆっくり明滅する */
  @keyframes guidePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,122,46,0)}
    50%{box-shadow:0 0 0 5px rgba(255,122,46,.28), 0 0 18px 4px rgba(255,122,46,.35)}
  }
  .guide-glow{animation:guidePulse 2.4s ease-in-out infinite}
  @media (prefers-reduced-motion: reduce){ .guide-glow{animation:none} }

  .update-pill{
    position:fixed;top:calc(env(safe-area-inset-top) + 2vh);left:50%;transform:translateX(-50%);
    z-index:20;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.1em;
    color:#fff;background:var(--accent);border:none;border-radius:999px;
    padding:.7em 1.4em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);
    white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  }
  .update-pill:active{transform:translateX(-50%) translateY(1px) scale(.97)}

  .demo-badge{
    position:fixed;top:calc(3.4vh + 4px);right:calc(3.4vw + 76px);z-index:5;
    font-size:.6rem;letter-spacing:.28em;color:var(--ink-dim);
    border:1px solid var(--glass-line);padding:.35em .8em;border-radius:99px;
    background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }

  /* デスクトップではドロワー機構は使わない */
  .drawer-handle,.drawer-close{display:none}

  /* ================================================================
     モバイル: 空が主役。プレイヤーは下端のドロワーに格納 ================ */
  @media (max-width:700px){
    .brand{top:2.6vh;left:5vw}
    .brand .logo{width:clamp(150px,44vw,210px)}
    .sky-switch{top:2.6vh;right:5vw;width:52px;height:27px}
    .sky-switch .knob{width:19px;height:19px;top:3px}
    .sky-switch[aria-checked="true"] .knob{transform:translateX(25px)}
    .demo-badge{top:calc(2.6vh + 40px);right:5vw}

    .band{
      display:flex;flex-direction:column;align-items:stretch;gap:.7rem;
      padding:.9rem 7vw calc(env(safe-area-inset-bottom) + .7rem);
    }
    .band-copy{text-align:center}
    .band-copy .main{font-size:1.1rem;letter-spacing:.18em}
    .band-copy .lead{margin-top:.5em;font-size:.68rem;line-height:1.85}

    /* 呼び出しボタン(帯の中) */
    .drawer-handle{
      display:block;width:100%;
      font-family:var(--font-ui);font-size:.78rem;letter-spacing:.14em;
      color:var(--band-ink-contrast);background:var(--band-ink);
      border:none;border-radius:99px;
      padding:.9em 1.6em;cursor:pointer;
      transition:opacity .3s;
    }
    .drawer-handle.mini{
      width:2.9em;height:2.9em;padding:0;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-size:.95rem;letter-spacing:0;margin:0 auto;
      animation:float-bob 2.6s ease-in-out infinite;
    }
    @keyframes float-bob{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-5px)}
    }
    @media (prefers-reduced-motion: reduce){ .drawer-handle.mini{animation:none} }
    .drawer-handle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

    .band-share{justify-self:auto;text-align:center;display:flex;align-items:center;justify-content:center;gap:.8em;flex-wrap:wrap}
    .band-share .share-label{margin:0;letter-spacing:.3em;width:100%;font-size:.66rem}
    .band-share button, .band-share a{font-size:.82rem}
    .sns-row{margin:0}

    /* ドロワー本体(帯の上に被さるシート) */
    .band-players{
      position:fixed;left:0;right:0;bottom:0;top:auto;z-index:8;
      display:grid;grid-template-columns:1fr;gap:0;
      padding:1.2rem 7vw calc(env(safe-area-inset-bottom) + 1.4rem);
      border-radius:22px 22px 0 0;
      background:var(--band-bg);color:var(--band-ink);
      backdrop-filter:blur(26px) saturate(1.5);
      -webkit-backdrop-filter:blur(26px) saturate(1.5);
      border-top:1px solid var(--band-edge);
      box-shadow:0 -12px 40px rgba(4,7,18,.3), inset 0 1px 0 var(--band-hi);
      max-height:82dvh;overflow-y:auto;      /* YouTube 2枚でも収まる(スクロール可) */
      transform:translateY(105%);
      transition:transform .45s cubic-bezier(.22,.9,.3,1);
    }
    body.drawer-open .band-players{transform:translateY(0)}
    body.drawer-open .drawer-handle{opacity:0;pointer-events:none}
    .card{padding:.6rem 0 .7rem}
    .card:last-child{border-top:1px solid var(--band-line)}
    .card .release{font-size:.52rem}
    .embed{margin-top:.5rem}
    .applink{margin-top:.4rem}
    .drawer-close{
      display:block;width:max-content;margin:0 auto .5rem;
      font-family:var(--font-ui);font-size:.8rem;letter-spacing:.22em;
      color:var(--band-ink);background:none;border:none;padding:.55em 1.4em;cursor:pointer;
    }
    .drawer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    /* スコープボタンは帯の真上・中央(共通ルールのまま少し小さく) */
    .scope-toggle{width:50px;height:50px}
    .scope-toggle svg{width:26px;height:26px}

  }