/* ============================================================
   KMA Audio UI Fullscreen (Mobile) - base
   - 追記で増やさず、ここを土台として差し替えで育てる
============================================================ */

#global-audio-player .kma-fs-more-btn,
#kma-fs-more-panel{
  display: none;
}

@media (max-width: 767px){
  /* フルスクリーン基底（本文側の余計なスクロールを止める） */
  html.cplayer-fullscreen,
  html.cplayer-fullscreen body{
    background: #000;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* fullscreen は唯一の縦ジェスチャー面だけを残す */
  html.cplayer-fullscreen #global-audio-player{
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  html.kma-ios-safari.cplayer-fullscreen #global-audio-player{
    overflow-y: hidden;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-y: auto;
  }

  html.kma-ios-safari.cplayer-fullscreen,
  html.kma-ios-safari.cplayer-fullscreen body{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.cplayer-fullscreen #global-audio-player::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;
  }

  /* 本文側：余計な余白を減らす */
  html.cplayer-fullscreen #main .ct-container{
    padding-top: 12px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* メタ領域：中央寄せ + 間を詰める */
  html.cplayer-fullscreen #global-audio-player .audio-player-meta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: calc(50px + env(safe-area-inset-top)) 18px 0;
  }

  /* サムネ：一回り小さく、中央固定 */
  html.cplayer-fullscreen #global-audio-player .audio-player-thumb{
    width: min(72vw, 320px);
    aspect-ratio: 1 / 1;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 22px;
    margin: 48px auto 14px;
  }

  /* タイトル：中央、詰める */
  html.cplayer-fullscreen #global-audio-player .audio-player-title{
    text-align: center;
    font-size: 22px;
    line-height: 1.25;
    max-width: 22ch;
    margin: 0;
    color: rgba(255,255,255,0.96);
  }

  
/* ============================================================
   FS: Bottom actions 2026-03-06
   - 下段アクション列
   - 速度 / お気に入り / タイマー
   - TOCは当面非表示
============================================================ */

  html.cplayer-fullscreen #global-audio-player .ab-actions{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    width: min(calc(100vw - 24px), 420px);
    margin: 12px 0 0;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions button{
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    color: rgba(255,255,255,0.96);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    line-height: 1;
    text-align: center;
    width: 100%;
    height: auto;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions button .ab-ico{
    display:flex;
    align-items:center;
    justify-content:center;
    height:32px;
    font-size:24px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-speed .ab-ico{
    font-size:24px;
    font-weight:700;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-bookmark .ab-ico{
    font-size:34px;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-timer .ab-ico{
    font-size:30px;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions button .ab-lbl{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    height:22px;
    margin-top:8px;
    font-size:16px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    color: rgba(255,255,255,0.9);
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-speed{
    order: 1;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-bookmark{
    order: 2;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-timer{
    order: 3;
  }

  html.cplayer-fullscreen #global-audio-player .ab-actions .ab-toc{
    display: none;
  }

  /* 右上に出やすい補助表示は一旦消す */
  html.cplayer-fullscreen #global-audio-player .audio-player-sub{
    display: none;
  }

/* KMA Mobile Fullscreen Close Button */
  html.cplayer-fullscreen #global-audio-player .cplayer-fsbar{
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    pointer-events: auto;
}

  /* 中身が空なので、こちらで確実に記号を描画 */
  html.cplayer-fullscreen #global-audio-player .cplayer-fsbar__chev{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    color: transparent;
    position: relative;
  }

  html.cplayer-fullscreen #global-audio-player .cplayer-fsbar__chev::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    display: block;
    box-sizing: border-box;
    border-right: 3px solid rgba(255,255,255,0.98);
    border-bottom: 3px solid rgba(255,255,255,0.98);
    border-radius: 0;
    transform: translate(-50%, -50%) translateX(-2px) rotate(45deg) translate(0, -3px);
  }
  


  html.cplayer-fullscreen #global-audio-player .kma-fs-more-btn{
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 10px;
    z-index: 1000001;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    color: rgba(255,255,255,0.98);
  }

  html.cplayer-fullscreen #global-audio-player .kma-fs-more-btn span{
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  html.cplayer-fullscreen #kma-fs-more-panel{
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
  }

  html.cplayer-fullscreen #kma-fs-more-panel.is-open{
    display: block;
  }

  #kma-fs-more-panel .kma-fs-more-panel__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
  }

  #kma-fs-more-panel .kma-fs-more-panel__sheet{
    position: absolute;
    top: calc(66px + env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    background: rgba(58, 66, 74, 0.97);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  }

  #kma-fs-more-panel .kma-fs-more-panel__item{
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    padding: 0 26px;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.98);
    text-align: left;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }

  #kma-fs-more-panel .kma-fs-more-panel__item:first-child{
    border-top: 0;
  }
/* ============================================================
   フルスクリーン用コントロール（Audible風調整版）
   ・ボタン群を中央配置
   ・prev / -30 / play / +30 / next を order で強制
   ・30秒/再生ボタン拡大
   ・アイコン白化（青対策）
   ・中央は「白丸 + 黒アイコン」を強制（黒丸化を潰す）
   ・シークを長く・細く（端末差はWebKitで吸収）
============================================================ */

/* 進捗（時間＋バー） */

html.cplayer-fullscreen #global-audio-player .audible-bar .ab-progress{
  position: relative;
  width: min(calc(100vw - 24px), 560px);
  margin: 10px auto 0;

  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: center;
}


/* WebKit: 太く見える端末対策 */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-seek::-webkit-slider-runnable-track{
  height: 3px;
}
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-seek::-webkit-slider-thumb{
  margin-top: -6px;
}

/* 時間表示（Audible風：シーク下1行にまとめる） */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-seek{
  width: 100%;
  height: 3px;
  grid-column: 1 / -1;
  grid-row: 1;
  touch-action: pan-x;
}

/* 左：現在時間 */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-cur{
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  font-size: 13px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
}

/* 中央：残り（「残り …」系の要素がある場合） */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-rem,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-remaining,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-remain{
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  font-size: 13px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

/* 右：残り（-mm:ss） */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-dur{
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  font-size: 13px;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

/* コントロール全体 */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 24px), 420px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
  margin: 18px 0 0;
  padding: 0 8px;
}

html.cplayer-fullscreen #global-audio-player .audible-bar{
  flex: 0 0 auto;
  margin-top: 0;
  padding-bottom: 0;
}

html.cplayer-fullscreen #global-audio-player .kma-fs-actions-dock{
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom) + var(--kma-fs-bottom-ui, 0px));
  padding-left: 3px;
}

/* navをフラット化（並びをorderで固定するため） */
html.cplayer-fullscreen #global-audio-player .audio-player-nav{
  display: contents;
}

/* 並び順を強制 */
html.cplayer-fullscreen #global-audio-player .audio-prev{ order: 1; }
html.cplayer-fullscreen #global-audio-player .ab-back{   order: 2; }
html.cplayer-fullscreen #global-audio-player .ab-play{   order: 3; }
html.cplayer-fullscreen #global-audio-player .ab-fwd{    order: 4; }
html.cplayer-fullscreen #global-audio-player .audio-next{order: 5; }

/* ボタン基本（デフォは白） */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls button{
  background: none;
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.cplayer-fullscreen #global-audio-player .ab-actions button,
html.cplayer-fullscreen #global-audio-player .cplayer-fsbar,
html.cplayer-fullscreen #global-audio-player .kma-fs-more-btn{
  touch-action: manipulation;
}

/* SVG（デフォは線、currentColorで白） */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls svg{
  fill: none;
  stroke: currentColor !important;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 前後トラック */
html.cplayer-fullscreen #global-audio-player .audio-prev,
html.cplayer-fullscreen #global-audio-player .audio-next{
  width: 44px;
  height: 44px;
}
html.cplayer-fullscreen #global-audio-player .audio-prev svg,
html.cplayer-fullscreen #global-audio-player .audio-next svg{
  width: 28px;
  height: 28px;
}

/* 30秒ボタン */
html.cplayer-fullscreen #global-audio-player .audible-bar .seek-btn{
  position: relative;
  width: 60px;
  height: 60px;
}
html.cplayer-fullscreen #global-audio-player .audible-bar .seek-btn svg{
  width: 48px;
  height: 48px;
}
html.cplayer-fullscreen #global-audio-player .audible-bar .seek-btn .seek-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  color: #fff;
  user-select: none;
  pointer-events: none;
}

/* 中央再生ボタン：白丸 + 黒アイコン（フルスクリーン最優先）
   - ここは「塗り」前提（黒三角/黒ポーズ）に固定する */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .ab-play,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .play-btn{
  background-color: #fff;
  width: 64px;
  height: 64px;
  border-radius: 9999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 8px;
  padding: 0;

  /* ボタン共通の白指定を避け、中央だけ黒へ */
  color: #111;
  box-shadow: none;
}

/* 中央だけ「塗り」アイコン（黒三角/黒ポーズ）に統一 */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .ab-play svg,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .ab-play svg path,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .play-btn svg,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .play-btn svg path{
  fill: currentColor;
  stroke: none;
}

html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .ab-play svg,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .play-btn svg{
  width: 56px;
  height: 56px;
}

/* 視覚中心を少し補正 */
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .ab-play .play-svg,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .play-btn .play-svg,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .ab-play .pause-svg,
html.cplayer-fullscreen #global-audio-player .audible-bar .ab-controls .play-btn .pause-svg{
  margin-left: 2px;
}
/* いまは下段（目次/ブクマ/速度など）に触らない */
}

/* ============================================================
   KMA_AUDIO_FULLSCREEN_BG 2026-03-03
   Fullscreen background layers (mobile)
   CSS vars:
     --kma-bg-top : top color
     --kma-bg-img : silhouette image url()
   Safety:
   - does NOT touch mini open/close logic
============================================================ */

html.cplayer-fullscreen #global-audio-player{
  background: #000;
}

html.cplayer-fullscreen body{
  background: #000;
}

html.cplayer-fullscreen #global-audio-player::before,
html.cplayer-fullscreen #global-audio-player::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

html.cplayer-fullscreen #global-audio-player::before{
  z-index: 9997;
  background:
    /* 上を“面で”明るくする帯（少し長め） */
    linear-gradient(180deg,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.22) 16%,
      rgba(0,0,0,0.00) 42%
    ),
    /* 左右は補助（位置はCSS変数でランダム化） */
    radial-gradient(75% 55% at var(--kma-hi-x1, 0%) var(--kma-hi-y, 12%), rgba(255,255,255,var(--kma-hi-a,0.10)) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(75% 55% at var(--kma-hi-x2, 100%) var(--kma-hi-y, 12%), rgba(255,255,255,var(--kma-hi-a,0.10)) 0%, rgba(0,0,0,0) 62%),
    /* 本体：上明るい→下黒（暗転を後ろへ、段階を増やして滑らかに） */
    linear-gradient(180deg,
      var(--kma-bg-top, #e6f4ff) 0%,
      rgba(0,0,0,0.00) 58%,
      rgba(0,0,0,0.16) 74%,
      rgba(0,0,0,0.28) 86%,
      rgba(0,0,0,0.45) 94%,
      #000 100%
    );
}

html.cplayer-fullscreen #global-audio-player::after{
  z-index: 9998;
  background-image: var(--kma-bg-img, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 12%;
  opacity: 0.32;
}

html.cplayer-fullscreen #global-audio-player > *{
  position: relative;
  z-index: 10000;
}


/* ============================================================
   KMA_AUDIO_TOC_HIDE 2026-03-06
   フルスクリーン時のTOCボタン（.ab-toc）を非表示
   現在は単章プレイヤーのため不要
   将来Book構造実装時に再有効化予定
============================================================ */
html.cplayer-fullscreen #global-audio-player .ab-actions button.ab-toc{
  display: none;
}

@media (max-width: 767px){
  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .audio-player-meta{
    gap: 4px;
    padding: calc(36px + env(safe-area-inset-top)) 16px 0;
  }

  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .audio-player-thumb{
    width: min(62vw, 280px);
    margin: 32px auto 10px;
  }

  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .audio-player-title{
    font-size: 20px;
    line-height: 1.2;
  }

  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .audible-bar .ab-progress{
    margin-top: 6px;
  }

  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .audible-bar .ab-controls{
    margin-top: 16px;
  }

  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .kma-fs-actions-dock{
    margin-top: 10px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom) + var(--kma-fs-bottom-ui, 0px));
  }

  html.cplayer-fullscreen.kma-fs-compact #global-audio-player .ab-actions button .ab-lbl{
    margin-top: 6px;
    font-size: 15px;
  }

  html.kma-ios-safari.cplayer-fullscreen.kma-fs-compact #global-audio-player .audio-player-meta{
    padding-top: calc(46px + env(safe-area-inset-top));
  }

  html.kma-ios-safari.cplayer-fullscreen.kma-fs-compact #global-audio-player .audio-player-thumb{
    margin-top: 40px;
  }

}