/* 展廳導覽 (Views/Tour/Index.cshtml)：觀眾聆聽次數最多的前10名
   取代原本內嵌於頁面的 Figma 匯出 Tailwind v4 全量樣式 (約 5,400 行)，僅保留實際用到的規則 */
.tour-rank { margin-bottom: 30px; }
.tour-rank-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 21px; color: #3f879b; }
.tour-rank-head svg { display: block; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.tour-rank-head h2 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5556; color: inherit; }

.tour-rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tour-rank-col > :not(:last-child) { margin-bottom: .5rem; }
/* 英文版：英文名稱長短不一，左右兩欄改為逐列對齊 (第 1 名與第 6 名同高、第 2 名與第 7 名同高…)；排列順序不變，中文版維持原樣 */
html[lang="en"] .tour-rank-grid { grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: .5rem 1rem; }
html[lang="en"] .tour-rank-col { display: contents; }
html[lang="en"] .tour-rank-col > :not(:last-child) { margin-bottom: 0; }

.tour-rank-card { display: block; padding: .5rem; background: #fff; border: 1px solid rgba(63, 135, 155, .125); border-radius: .625rem; color: inherit; text-decoration: none; transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.tour-rank-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.tour-rank-label { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
/* 英文版：窄螢幕放不下時，樓層標籤換行；中文版維持原樣 */
html[lang="en"] .tour-rank-label { flex-wrap: wrap; gap: .25rem .5rem; }
.tour-rank-no { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 3.4px; background: linear-gradient(to right, #3f879b, #358291); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.3333; }
/* 展廳名稱過長時以「…」截斷，樓層標籤不被擠出卡片 */
.tour-rank-hall { font-size: .75rem; font-weight: 500; line-height: 1.3333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: #3f879b; }
.tour-rank-floor { flex-shrink: 0; padding: .125rem .25rem; border: 1px solid rgba(63, 135, 155, .19); border-radius: .25rem; background: rgba(63, 135, 155, .063); color: #3f879b; font-size: .75rem; font-weight: 500; line-height: 1.3333; }
.tour-rank-arrow { display: block; flex-shrink: 0; width: .75rem; height: .75rem; color: rgba(63, 135, 155, .5); opacity: 0; transition: all .15s cubic-bezier(.4, 0, .2, 1); }
.tour-rank-title { font-size: 16px; font-weight: 700; line-height: 1.25; color: #2d5a66; transition: color .2s cubic-bezier(.4, 0, .2, 1); }

@media (hover: hover) {
    .tour-rank-card:hover .tour-rank-arrow { opacity: 1; translate: .25rem 0; }
}

/* 英文版手機前10名不顯示展廳名稱，只留樓層與單元名稱 (中文版維持顯示) */
@media (max-width: 767px) {
    html[lang="en"] .tour-rank-hall { display: none; }
}

/* 英文版「Digital Stamps」按鈕縮小，不超出螢幕右緣 (iPhone 字型較寬；中文版不變) */
/* 英文版「Current Occupancy:」較長，燈號被擠成橢圓；固定燈號大小維持圓形 (中文版不變) */
html[lang="en"] .stamp .people span { flex-shrink: 0; }
html[lang="en"] .stamp .hero-right .stamp-my-btn { max-width: 100%; box-sizing: border-box; gap: .375rem; padding: 0 .5rem; font-size: .75rem; }