/* ============================================================
   lane-theme.css — 「球道」殼（2.6.0，首頁 C 版抽出來給 members.html / games.html 共用）
   純容器＋背景：木板紋（repeating-linear-gradient）、左右深色溝、油面反光、七支箭頭、
   標題列（＋可選球瓶）、紅色犯規線。⛔ 不碰卡片內部 —— 各頁既有 markup／JS 一行不動，
   只在外面包 <div class="lane-wrap"><div class="lane">…</div></div>。
   用法（三頁一致）：
     <div class="lane-wrap"><div class="lane">
       <div class="lane__arrows" aria-hidden="true"><i></i>×7</div>
       <div class="lane__hd container"><h1 class="lane__h1"><small>英文小標</small><span id="…">標題句</span></h1>
            <div class="lane__pins">…</div>(可省)</div>
       <div class="lane__foul" aria-hidden="true"></div>
       …頁面內容…
     </div></div>
   ⛔ 不動 style.css；載入這支＝這頁是球道頁（body 底色隨之變深藍夜色，footer 本來就深色）。
   ============================================================ */

/* body 底色:深藍夜色(球館現場)。歷程:第一版 #1a1f3a → 淺色 → 回深 → 使用者「太深,再亮一點點」⇒
   基色提到 #272e55,再疊兩層氛圍光:上方一盞暖色投射燈(像球館照著球道那盞)+ 兩側偏藍的環境光,
   讓深底有層次而不是一片死黑。fixed 讓光不隨捲動跑。 */
body {
  background:
    radial-gradient(ellipse 62% 42% at 50% -6%, rgba(240,163,10,.16), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(12,14,32,.75), transparent 65%),
    radial-gradient(ellipse 40% 60% at 8% 30%, rgba(90,105,190,.14), transparent 70%),
    radial-gradient(ellipse 40% 60% at 92% 30%, rgba(90,105,190,.14), transparent 70%),
    #272e55;
  background-attachment: fixed;
}

/* navbar 右側身分鈕（.hm-nav-btn 住在 style.css）：球道頁改琥珀色，跟木色／紅線同一家。
   使用者(2.6.0):外框太大、圓角太圓 → 縮 padding、圓角 999px→8px(不做藥丸)。 */
.navbar__nav .hm-nav-btn { border-radius: 8px; padding: .28rem .7rem; }
.navbar__nav .hm-nav-btn--solid { background: #f0a30a; border-color: #f0a30a; color: #14162b; }
.navbar__nav .hm-nav-btn--solid:hover { background: #ffc043; color: #14162b; }

.lane-wrap { padding: 0 1.5rem 2rem; }
@media (max-width: 768px) { .lane-wrap { padding: 0 .35rem 1.25rem; } }
.lane {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  background:
    repeating-linear-gradient(90deg, #e9d3a3 0 22px, #e3c890 22px 24px, #ecd8ad 24px 46px, #dfc48b 46px 48px);
  /* 兩側的「溝」:原本 14px 純黑(#0e1024)在深底上是兩條生硬黑條(使用者:太明顯)。
     改 10px、顏色靠近夜色底,木紋交界只留一條細的內緣暗線,遠看還是溝、近看不搶眼。 */
  border-left: 10px solid #20264a; border-right: 10px solid #20264a;
  box-shadow: inset 0 0 60px rgba(120,80,20,.25),
              inset 3px 0 3px -1px rgba(10,12,26,.5), inset -3px 0 3px -1px rgba(10,12,26,.5),
              0 30px 60px rgba(0,0,0,.4);
}
@media (max-width: 768px) { .lane { border-left-width: 4px; border-right-width: 4px; } }
.lane::before { /* 油面反光：上亮下暗 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%, rgba(60,30,0,.12) 100%);
}
.lane > * { position: relative; }

/* 七支箭頭標記（真球道 7 支、中間最遠） */
.lane__arrows { display: flex; justify-content: center; gap: 2.1rem; padding: 1.4rem 0 .4rem; }
.lane__arrows i { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 26px solid #14162b; opacity: .75; }
.lane__arrows i:nth-child(2), .lane__arrows i:nth-child(6) { transform: translateY(-8px); }
.lane__arrows i:nth-child(3), .lane__arrows i:nth-child(5) { transform: translateY(-16px); }
.lane__arrows i:nth-child(4) { transform: translateY(-24px); }
@media (max-width: 600px) { .lane__arrows { gap: 1rem; } .lane__arrows i:nth-child(1), .lane__arrows i:nth-child(7) { display: none; } }

/* 標題列（＋可選球瓶） */
.lane__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 0; padding-bottom: 1.1rem; }
.lane__h1 { margin: 0; font: 900 clamp(1.7rem, 3.4vw, 2.75rem)/1.05 'Noto Sans TC', 'Chakra Petch', sans-serif; letter-spacing: -.01em; color: #14162b; text-wrap: balance; }
.lane__h1 small { display: block; font: 600 .72rem 'Chakra Petch', sans-serif; letter-spacing: .24em; color: #6b4e1a; margin-bottom: .5rem; }
.lane__pins { display: flex; gap: .4rem; align-items: flex-end; flex: none; min-height: 54px; }
.lane__pin { width: 22px; height: 54px; border-radius: 11px 11px 8px 8px; background: linear-gradient(#fff, #e8e8ee); position: relative; box-shadow: 0 4px 8px rgba(0,0,0,.25); transition: transform .4s ease; }
.lane__pin::after { content: ''; position: absolute; top: 16px; left: 0; right: 0; height: 5px; background: #c8372d; box-shadow: 0 8px 0 #c8372d; }
.lane__pin--down { transform: rotate(70deg) translate(10px, 6px); opacity: .7; }
@media (max-width: 600px) { .lane__pins { display: none; } }

/* 犯規線 */
.lane__foul { height: 6px; background: #c8372d; box-shadow: 0 0 12px rgba(200,55,45,.6); }

/* 球道上的 .container 兩側留白：style.css ≤768 把 .container 縮成 .15rem，木紋上會貼溝 */
@media (max-width: 768px) { .lane .container { padding-inline: .75rem; } }