:root {
  --ink: #3b2f24;
  --coral: #e8603c;
  --paper: #fff7e4;
  --board-a: #e9bd7e;
  --board-b: #cf9559;
  --edge: #8f5d2d;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #1b2030; overflow: hidden; }
body { font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif; color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }

#app { display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: minmax(0, 1fr); height: 100%; }

/* ---- 上方 1/3：教練群看板 ---- */
#board {
  background: linear-gradient(180deg, var(--board-a), var(--board-b));
  border-bottom: 6px solid var(--edge);
  padding: 6px 4px 3px; display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden;
}
#title {
  align-self: flex-start; background: var(--paper); border-radius: 16px; padding: 4px 16px 6px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
#title b { color: var(--coral); font-size: 24px; letter-spacing: 1px; line-height: 1.1; }
#title span { font-size: 15px; font-weight: 800; }

/* 教練卡片（照官網的排版：照片、紅色名字職位帶、三項專長），依職位高低由左到右；
   卡片大小跟著看板實際高度走：js/map.js 的 fitCards() 會覆蓋 --cw */
#cardsWrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
#cards { --cw: 110px; flex: 1; min-height: 0; display: flex; gap: 4px; overflow-x: auto; padding: 0 0 3px; scrollbar-width: none; align-items: flex-start; }
#cards::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 auto; width: var(--cw); padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #fff; text-align: left;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22); display: flex; flex-direction: column; font-size: calc(var(--cw) * 0.1);
}
.card:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
.card.sel { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--coral); }
.card .ph { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #ecd9b4; display: block; }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.card .band { background: #c8102e; color: #fff; padding: .4em .6em; line-height: 1.2; }
.card .band .nm { display: block; font-size: 1.3em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .band .tt { display: block; font-size: .95em; font-weight: 800; white-space: nowrap; }
.card .sk { list-style: none; margin: 0; padding: .45em .6em .55em; }
.card .sk li { display: flex; gap: .4em; align-items: center; font-size: .88em; line-height: 1.55; color: var(--ink); white-space: nowrap; }
.card .sk li::before { content: ''; flex: none; width: .75em; height: .75em; border: 2px solid #ff8a00; border-radius: 50%; }

/* 電腦版（有滑鼠）：左右箭頭；滾輪與按住拖曳也能左右捲（js/map.js）。手機用手指滑，不顯示箭頭 */
.nav { display: none; position: absolute; top: 38%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; padding: 0 0 3px; }
.nav.prev { left: 6px; }
.nav.next { right: 6px; }
.nav[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) { .nav { display: block; } #cards { cursor: grab; } }

/* ---- 下方 2/3：地圖 ---- */
#map { position: relative; overflow: hidden; background: #efe6cf; touch-action: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pill { position: absolute; display: flex; gap: 4px; padding: 5px; background: rgba(255, 255, 255, .88); border-radius: 999px; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.pill button { border: 0; background: transparent; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; }
.pill button.on { background: #2a2f3b; color: #fff; }
#timeBar { left: 8px; top: 8px; }
#viewBar { right: 8px; top: 8px; }
#tools { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, .85); border-radius: 12px; padding: 6px 10px; font-size: 12px; }
#tools label { display: flex; gap: 6px; align-items: center; }
#hud { position: absolute; left: 8px; bottom: 8px; background: rgba(255, 255, 255, .85); border-radius: 10px; padding: 3px 10px; font-size: 12px; }
#err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(27, 32, 48, .92); color: #fff; }

/* ---- 點教練卡片跳出的小視窗：放大的正面全身人偶（會揮手）、名字職位專長、到地圖上找 TA ---- */
#tip { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(20, 15, 10, .55); padding: 12px; }
#tip[hidden] { display: none; }
#tip .sheet { width: min(360px, 100%); max-height: 100%; overflow: auto; background: var(--paper); border-radius: 20px; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
#tip .stage { height: min(46vh, 380px); flex: none; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, #f4e1ba, #e9bd7e); padding-top: 8px; }
#tip .stage img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 4px rgba(60, 35, 10, .25)); }
#tip .band { background: #c8102e; color: #fff; padding: .5em .9em; line-height: 1.25; }
#tip .band b { display: block; font-size: 22px; font-weight: 600; }
#tip .band span { font-size: 14px; font-weight: 800; }
#tip ul { list-style: none; margin: 0; padding: 10px 14px 4px; }
#tip li { display: flex; gap: 8px; align-items: center; font-size: 15px; line-height: 1.7; }
#tip li::before { content: ''; flex: none; width: 11px; height: 11px; border: 2px solid #ff8a00; border-radius: 50%; }
#tip .btns { display: flex; gap: 8px; padding: 8px 14px 14px; }
#tip .btns button { flex: 1; border: 0; border-radius: 12px; padding: 10px; font-weight: 800; font-size: 15px; background: #2a2f3b; color: #fff; }
#tip .btns button.ghost { flex: 0 0 auto; padding: 10px 18px; background: #ecd9b4; color: var(--ink); }
#tip .btns button:disabled { opacity: .45; }