/* ============================================================
   プレゼント抽選あみだくじ 専用スタイル（style.css を補完）
   ============================================================ */

#lottery-head { text-align: center; }
.handwritten { font-family: "Yomogi", cursive; color: #ccc; }

/* ---- ツールバー ---- */
#ladder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.zoom-group { display: flex; gap: 0.4rem; }
.zoom-group button {
  background: transparent;
  border: 1px solid var(--neon-yellow);
  color: var(--neon-yellow);
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.zoom-group button:hover {
  background: var(--neon-yellow);
  color: #111;
  box-shadow: 0 0 12px rgba(234, 255, 0, 0.4);
}
.rung-counter { color: #ccc; font-size: 0.9rem; font-weight: 700; }
.rung-counter .full { color: var(--neon-pink); }

/* ---- 全体俯瞰ミニマップ（横方向の現在位置インジケータ）---- */
#ladder-mini {
  position: relative;
  height: 34px;
  margin: 0 0 0.6rem;
  border: 1px solid #2a2a2a;
  background: #0b0b0b;
  overflow: hidden;
  cursor: pointer;
  /* タップ/ドラッグで本体スクロールを移動。既定のスクロールは抑止 */
  touch-action: none;
}
#ladder-mini[hidden] { display: none; }
/* くじ全体を縦に潰して帯いっぱいに描く（preserveAspectRatio=none）*/
#ladder-mini-svg { display: block; width: 100%; height: 100%; }
/* 現在見えている表示範囲を示すハイライト枠（帯の中で縦横とも反映）*/
#ladder-mini-window {
  position: absolute;
  border: 1px solid var(--neon-yellow);
  background: rgba(234, 255, 0, 0.12);
  box-shadow: 0 0 8px rgba(234, 255, 0, 0.3);
  pointer-events: none;
}
/* ミニマップ内の棒・横線（細線・拡縮で太さが歪まないよう non-scaling-stroke）*/
.mini-leg  { stroke: #3a3a3a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mini-rung { stroke: #8a8a8a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mini-rung.has-msg { stroke: var(--neon-yellow); }

/* ---- ラダー描画領域 ---- */
/* 枠：固定ストリップと吹き出しのクリッピング基準（はみ出しは隠す） */
#ladder-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid #2a2a2a;
  background: #0b0b0b;
  max-height: 78vh;
  /* タッチは自前で処理（1本指=線, 2本指=移動, ピンチ=拡大縮小） */
  touch-action: none;
}
#ladder-scroll {
  overflow: auto;
  background: #0b0b0b;
  -webkit-overflow-scrolling: touch;
  max-height: 78vh;
  touch-action: none;
  /* スクロールは1本指/2本指パン＋ミニマップで行うため、バーは隠す */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#ladder-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 操作説明 */
.ladder-help {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  background: #141414;
  border: 1px solid #2a2a2a;
  color: #bbb;
  font-size: 0.8rem;
  line-height: 1.6;
}
.ladder-help b { color: var(--neon-yellow); font-weight: 700; }
#ladder-svg { display: block; }

/* スクロールしても上端/下端をあみだ領域の上下に固定する複製レイヤ */
.pin-strip {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;       /* 横スクロール追従時に枠外をクリップ */
  background: #0b0b0b;
  z-index: 20;
}
.pin-strip svg { display: block; will-change: transform; }
#ladder-head { top: 0; }
#ladder-foot { bottom: 0; }
/* 上下に隠れた続きがあるとき（スクロール中）は影を出して「省略」を示す */
#ladder-head.has-more { box-shadow: 0 7px 12px rgba(0,0,0,0.6); }
#ladder-foot.has-more { box-shadow: 0 -7px 12px rgba(0,0,0,0.6); }

/* 横線メッセージの吹き出し（#ladder-wrap 基準・枠でクリップ） */
#rung-tip {
  position: absolute;
  z-index: 30;
  max-width: 220px;
  transform: translate(-50%, -100%);
  background: #1a1a1a;
  border: 1px solid var(--neon-yellow);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(234, 255, 0, 0.35);
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}
#rung-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--neon-yellow);
}
/* チップ等で下向きに出す場合（枠上端での見切れ防止） */
#rung-tip.below { transform: translate(-50%, 0); }
#rung-tip.below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--neon-yellow);
}

/* SVG 内要素 */
.leg-line   { stroke: #3a3a3a; stroke-width: 2; }
.rung-line  { stroke: #8a8a8a; stroke-width: 3; stroke-linecap: round; }
/* メッセージ付きの横線は色を変えて目印を出す */
.rung-line.has-msg { stroke: var(--neon-yellow); }
.rung-msg-dot { fill: var(--neon-yellow); filter: drop-shadow(0 0 5px var(--neon-yellow)); }
.rung-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.leg-label  {
  fill: var(--neon-yellow);
  font: 700 16px "Noto Sans JP", sans-serif;
  text-anchor: middle;
}
/* 先端：ID＋投票先2番組の番号入りカラーチップ */
.leg-id {
  fill: #888;
  font: 700 9px "Noto Sans JP", sans-serif;
  text-anchor: middle;
}
.leg-chip { stroke: #000; stroke-width: 0.5; }
.leg-chip-num {
  fill: #111;
  font: 700 11px "Noto Sans JP", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.leg-chip-hit { fill: transparent; cursor: pointer; }
.leg-cap {
  fill: #141414;
  stroke: var(--neon-yellow);
  stroke-width: 2;
}
.slot-cap {
  fill: #141414;
  stroke: var(--neon-pink);
  stroke-width: 2;
}
/* 管理プレビュー：当たりの下端スロット */
.win-slot {
  fill: var(--neon-yellow);
  stroke: var(--neon-yellow);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 7px var(--neon-yellow));
}
/* 下端スロットの番号（1始まり）。当たりは金色キャップ上に濃色で表示 */
.slot-num {
  fill: var(--neon-pink);
  font: 700 11px "Noto Sans JP", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.slot-num.win-num { fill: #111; }
/* 追加期間中：まだ横線が1本も繋がっていない棒の上端キャップを点滅で強調 */
.leg-cap.leg-empty {
  fill: #2a0d1c;
  stroke: var(--neon-pink);
  animation: pulse-pink 1.1s ease-in-out infinite;
}

/* reveal 時のクリック可能キャップ */
.clickable { cursor: pointer; }
.clickable:hover { stroke-width: 3.5; filter: drop-shadow(0 0 6px currentColor); }

/* トレース始点／終点のキャップ（点滅して位置を示す） */
.trace-start {
  fill: var(--neon-yellow);
  stroke: var(--neon-yellow);
  stroke-width: 3;
  animation: pulse-yellow 0.8s ease-in-out infinite;
}
.trace-end {
  fill: var(--neon-pink);
  stroke: var(--neon-pink);
  stroke-width: 3;
  animation: pulse-pink 0.8s ease-in-out infinite;
}
@keyframes pulse-yellow {
  0%, 100% { filter: drop-shadow(0 0 3px var(--neon-yellow)); }
  50%      { filter: drop-shadow(0 0 12px var(--neon-yellow)); }
}
@keyframes pulse-pink {
  0%, 100% { filter: drop-shadow(0 0 3px var(--neon-pink)); }
  50%      { filter: drop-shadow(0 0 13px var(--neon-pink)); }
}

/* 追加プレビュー（候補位置） */
.rung-preview { stroke: var(--neon-pink); stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--neon-pink)); }
.rung-ghost  { stroke: rgba(255,255,255,0.12); stroke-width: 3; stroke-linecap: round; }

/* トレース経路（アニメ） */
.trace-path {
  fill: none;
  stroke: var(--neon-pink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--neon-pink));
}
.trace-head {
  fill: #fff;
  filter: drop-shadow(0 0 8px var(--neon-pink));
}

/* ---- 追加確認の吹き出し（線の付近・ビューポート基準で必ず画面内） ---- */
#add-confirm {
  position: fixed;          /* 枠の overflow:hidden に切られない */
  z-index: 60;
  width: 230px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--neon-pink);
  background: #161616;
  box-shadow: 0 0 16px rgba(255, 0, 127, 0.35);
  --arrow-x: 50%;           /* 線を指す矢印の横位置（JSが設定）*/
}
#add-confirm[hidden] { display: none; }   /* display 指定で hidden が無効化されるのを防ぐ */
#add-confirm::after {  /* 下向き矢印（上に出すとき）*/
  content: "";
  position: absolute;
  left: var(--arrow-x);
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--neon-pink);
}
#add-confirm.below::after {  /* 上向き矢印（下に出すとき）*/
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--neon-pink);
}
#add-confirm-text { font-weight: 700; color: #fff; font-size: 0.9rem; }
#add-confirm .cta-btn { padding: 0.5rem 1.1rem; font-size: 0.95rem; }
#add-msg {
  width: 100%;
  min-width: 0;
  background: #141414;
  border: 1px solid #555;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
}
#add-msg:focus { outline: none; border-color: var(--neon-yellow); }
.add-confirm-actions { display: flex; gap: 0.7rem; align-items: center; }
#add-cancel-btn {
  background: transparent;
  border: 1px solid #666;
  color: #ccc;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
}
#add-cancel-btn:hover { border-color: #aaa; color: #fff; }

.ladder-msg { margin-top: 0.8rem; min-height: 1.4em; color: var(--neon-pink); font-weight: 700; }
.ladder-msg.ok { color: var(--neon-yellow); }

.center { text-align: center; }