/* 垃圾桶投票面板（#trash-votes）、popup 與送出後的成功畫面（.vs-*）；飄帶主色 #FF7A00 */

/* 點數條：橘色填已用點數 */
#trash-votes .tv-hand { margin: 0; }
#trash-votes .tv-meter {
  height: 12px;
  border-radius: 6px;
  background: #e2e8f0;
  overflow: hidden;
}
#trash-votes .tv-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #FF7A00;
  transition: width 0.2s ease;
}
#trash-votes .tv-meter-text {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#trash-votes .tv-left { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

#trash-votes .tv-submitted {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
}

#trash-votes .tv-toolbar { display: flex; gap: 8px; margin: 10px 0 0; }
#trash-votes .tv-toolbar button { flex: 1; min-width: 0; }

#trash-votes .tv-sub { margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
#trash-votes .tv-list { list-style: none; margin: 0; padding: 0; }
#trash-votes .tv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #cbd5e1;
}
#trash-votes .tv-name {
  min-width: 0;
  padding: 2px 0;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#trash-votes .tv-info {
  grid-column: 1;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* [−][+] 併排在右側，跨兩列 */
#trash-votes .tv-ctrl {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 4px;
}
#trash-votes .tv-ctrl button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
}
#trash-votes .tv-empty { margin: 4px 0; font-size: 13px; color: var(--muted); }

#trash-votes .tv-actions { display: flex; gap: 8px; margin-top: 10px; }
#trash-votes .tv-actions button { flex: 1; min-width: 0; }
#trash-votes .tv-source { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }

.tv-popup { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; }
.tv-popup strong { font-size: 14px; }
.tv-popup .tv-popup-district,
.tv-popup .tv-popup-note { color: var(--muted); }

/* ---------- 送出後的成功畫面（src/vote-success.js） ---------- */
.vs-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(15, 39, 71, 0.78); /* 半透明深藍 */
}
.vs-card {
  position: relative;
  overflow: hidden;
  width: min(340px, 100%);
  box-sizing: border-box;
  padding: 24px 20px 20px;
  border: 3px solid var(--btn-line);
  border-radius: 22px;
  background: #fff;
  color: #0f172a;
  text-align: center;
  box-shadow: 0 8px 0 var(--btn-line), 0 20px 50px rgba(0, 0, 0, 0.35);
}
.vs-content { position: relative; z-index: 1; }

/* 背景三條慢慢移動的波浪線：一小段重複的 SVG 背景圖（100px 一週期），平移一個週期就接回來 */
.vs-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
}
.vs-wave {
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'%3E%3Cpath d='M0 12 Q25 0 50 12 T100 12' fill='none' stroke='%2393c5fd' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100px 24px;
  background-repeat: repeat-x;
  animation: vs-wave-move 6s linear infinite;
}
.vs-wave-1 { bottom: 0; opacity: 0.35; animation-duration: 7s; }
.vs-wave-2 { bottom: 24px; opacity: 0.5; animation-duration: 5s; animation-direction: reverse; }
.vs-wave-3 { bottom: 48px; opacity: 0.7; animation-duration: 9s; }

/* 橘色到亮橘的水滴，輕微上下浮動 */
.vs-drop {
  display: block;
  width: 76px;
  height: auto;
  margin: 0 auto;
  animation: vs-float 3s ease-in-out infinite;
}
.vs-title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: #0b3b6f;
}
.vs-sub { margin: 0 0 12px; font-size: 15px; color: #334155; }
.vs-summary {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.95);
  text-align: left;
  font-size: 14px;
}
.vs-summary p { margin: 0; }
.vs-summary ol { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.vs-summary li { overflow-wrap: anywhere; }
.vs-close {
  width: 100%;
  min-height: 48px;
  font-size: 18px;
}

@keyframes vs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes vs-wave-move {
  from { background-position: 0 0; }
  to { background-position: -100px 0; }
}

/* 使用者偏好減少動態：不浮動、不移動波浪，點數條也不做過場 */
@media (prefers-reduced-motion: reduce) {
  .vs-drop,
  .vs-wave { animation: none; }
  #trash-votes .tv-meter-fill { transition: none; }
}

@media (max-width: 640px) {
  #trash-votes .tv-toolbar { flex-wrap: wrap; }
  #trash-votes .tv-toolbar button { flex: 1 1 45%; }
}

@media (max-width: 400px) {
  .vs-title { font-size: 21px; }
}

/* ---------- 遊戲化／手機版調整：按鈕外觀來自 style.css 的 button token ---------- */
#trash-votes .tv-intro { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
#trash-votes .tv-meter { height: 16px; border-radius: 8px; border: 2px solid var(--btn-line); }
#trash-votes .tv-meter-fill { background: repeating-linear-gradient(-45deg, #ff7a00 0 10px, #ff9a3c 10px 20px); }
#trash-votes .tv-toolbar button { height: 48px; border-radius: 14px; font-size: 17px; }
#trash-votes .tv-vote { flex: 2 !important; font-size: 18px; }
#trash-votes .tv-actions button { height: 48px; border-radius: 14px; font-size: 17px; }
#trash-votes .tv-send { font-size: 18px; }
/* 排行榜與名單裡的名字是文字連結，不要套按鈕的厚底樣式 */
#trash-votes .tv-name,
#trash-votes .tv-rank-btn {
  border: none;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-family: inherit;
  font-weight: 400;
  color: var(--ink);
}
#trash-votes .tv-name:active:not(:disabled),
#trash-votes .tv-rank-btn:active:not(:disabled) { transform: none; box-shadow: none; }
#trash-votes .tv-name:hover:not(:disabled),
#trash-votes .tv-rank-btn:hover:not(:disabled) { filter: none; }
#trash-votes .tv-name,
#trash-votes .tv-rank-btn { min-height: 44px; }

.tv-done-bar {
  position: fixed;
  z-index: 4;
  left: 12px;
  right: 12px;
  bottom: calc(var(--sheet-h, 70px) + 12px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 3px solid var(--btn-line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--btn-orange-top), var(--btn-orange-bottom));
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 0 var(--btn-line), 0 10px 24px rgba(184, 87, 0, 0.35);
}
.tv-done-bar[hidden] { display: none; }
.tv-done-left { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums; }
/* 浮動列左邊的圖例色塊：和地圖上「沒有垃圾桶」的橘紅格子同色 */
.tv-legend-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #e8630a;
  border: 2px solid #fff;
}
.tv-done {
  --btn-top: #ffffff;
  --btn-bottom: #fff3e6;
  --btn-fg: #8f3a00;
  --btn-text: none;
  height: 44px;
  padding: 0 18px;
  font-size: 18px;
}
@media (min-width: 720px) {
  .tv-done-bar { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); width: 360px; }
}
/* 綁飄帶時浮動列佔住下方，先藏起「回到角色」按鈕 */
body:has(.tv-done-bar:not([hidden])) .fab { display: none; }

/* ---------- 全市公開結果（排行、動態、更新時間） ---------- */
#trash-votes .tv-live { margin: 0 0 4px; }
#trash-votes .tv-rank { list-style: none; margin: 0; padding: 0; }
#trash-votes .tv-rank-item { border-bottom: 1px solid #cbd5e1; }
#trash-votes .tv-rank-btn {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  text-align: left;
  color: var(--ink);
  font-size: 14px;
}
#trash-votes .tv-rank-btn:focus-visible { outline: 3px solid #fdba74; outline-offset: -3px; }
#trash-votes .tv-rank-no {
  font-weight: 800;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}
#trash-votes .tv-rank-name {
  min-width: 0;
  overflow-wrap: anywhere; /* 路口名「A × B」可能較長，換行而不截斷 */
}
#trash-votes .tv-rank-votes { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#trash-votes .tv-rank-mine {
  grid-column: 2 / span 2;
  justify-self: start;
  padding: 0 6px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  line-height: 20px;
}
#trash-votes .tv-rank-empty { padding: 6px 4px; font-size: 13px; color: var(--muted); }
#trash-votes .tv-feed {
  margin: 8px 0 0;
  min-height: 1.4em;
  font-size: 13px;
  line-height: 1.4;
  color: #9a3412;
  overflow-wrap: anywhere;
}
#trash-votes .tv-updated { margin: 2px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 名字與留言（選填） */
#trash-votes .tv-profile { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#trash-votes .tv-profile input {
  height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px; /* 16px 以上 iOS 才不會自動放大 */
  color: var(--ink);
  background: #f7fafc;
  border: 3px solid var(--btn-line);
  border-radius: 14px;
  outline: none;
}
#trash-votes .tv-profile input:focus { box-shadow: 0 0 0 4px #b9d7f0; }
#trash-votes .tv-profile input:disabled { opacity: 0.6; }
#trash-votes .tv-profile-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 成功畫面的分享按鈕 */
.vs-share {
  width: 100%;
  min-height: 48px;
  margin-bottom: 4px;
  font-size: 18px;
}
.vs-share-note { margin: 0 0 10px; font-size: 12px; color: #64748b; }

/* 投票柱頂的「+1」飄字（位置由 src/vote-terrain.js 每幀設定） */
.vt-plus {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  color: #c45200;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* 手機：成功畫面是底部 sheet。把手在頂端，內容區捲動，按鈕固定在底部 */
@keyframes vs-sheet-in { from { transform: translateY(100%); } }
.vs-actions { position: relative; z-index: 1; }
@media (max-width: 719px) {
  .vs-overlay { align-items: flex-end; padding: 0; }
  .vs-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 80vh;
    padding: 22px max(16px, env(safe-area-inset-right, 0px)) calc(16px + var(--safe-b)) max(16px, env(safe-area-inset-left, 0px));
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -4px 0 var(--btn-line), 0 -8px 40px rgba(0, 0, 0, 0.3);
    animation: vs-sheet-in 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) backwards;
  }
  .vs-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .vs-actions { flex: none; margin-top: 12px; }
}