/* ============================================================
   World Cup Predictor — 简洁清晰 UI
   ============================================================ */
:root {
  /* 现代配色：深靛蓝主色 + 活力青绿 + 暖金强调 */
  --green: #00b894;          /* 主强调（青绿）保留变量名以兼容 */
  --green-dark: #00997a;
  --primary: #1a1f4b;        /* 深靛蓝 */
  --primary-2: #2d3a8c;      /* 次靛蓝 */
  --accent: #00d6a4;         /* 活力青绿 */
  --accent-dark: #00b894;
  --gold: #ffc83d;
  --bg: #eef1f7;
  --bg-2: #f7f9fc;
  --card: #ffffff;
  --text: #161b33;
  --muted: #767f9c;
  --line: #e4e8f2;
  --blue: #3d6fe0;
  --red: #f0506e;
  --radius: 16px;
  --shadow: 0 4px 18px rgba(26, 31, 75, 0.07);
  --shadow-lg: 0 14px 40px rgba(26, 31, 75, 0.18);
  --grad-header: linear-gradient(120deg, #1a1f4b 0%, #2d3a8c 55%, #2b5fb3 100%);
  --grad-accent: linear-gradient(120deg, #00d6a4 0%, #00b8c4 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", "Noto Sans JP", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  background-image: radial-gradient(circle at 12% 0%, rgba(0,214,164,.06), transparent 40%), radial-gradient(circle at 100% 0%, rgba(45,58,140,.08), transparent 45%);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ===== Header ===== */
.site-header {
  background: var(--grad-header);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(26,31,75,.25);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand-icon { font-size: 1.6rem; color: var(--gold); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.05rem; font-weight: 800; }
.brand-text small { font-size: .7rem; opacity: .8; }

.main-nav { display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: none; color: rgba(255,255,255,.82);
  padding: 9px 14px; border-radius: 9px; font-size: .9rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .18s;
}
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-link.active { background: rgba(255,255,255,.2); color: #fff; }

.lang-switch { display: flex; background: rgba(255,255,255,.14); border-radius: 8px; padding: 3px; }
.lang-switch button {
  background: transparent; border: none; color: rgba(255,255,255,.8);
  padding: 5px 10px; border-radius: 6px; font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: .15s;
}
.lang-switch button.active { background: #fff; color: var(--primary); }

.mobile-nav-toggle { display: none; background: transparent; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; }

/* ===== User bar ===== */
.user-bar { background: var(--card); border-bottom: 1px solid var(--line); }
.user-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.user-field { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.user-field i { color: var(--accent-dark); }
.user-field input {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px;
  font-size: .9rem; font-family: inherit; min-width: 180px; color: var(--text);
}
.user-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,214,164,.15); }

/* ----- 名前未登録のときの説明バナー ----- */
.user-bar-inner { flex-wrap: wrap; }
.name-callout {
  display: none;            /* 既定は非表示。JSで .needs-name のとき表示 */
  align-items: center; gap: 10px;
  width: 100%;
  background: linear-gradient(90deg, rgba(255,184,0,.14), rgba(255,184,0,.05));
  border: 1px solid rgba(255,184,0,.45);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
}
.name-callout-icon { color: #f5a623; font-size: 1.2rem; flex-shrink: 0; }
.name-callout-text { display: flex; flex-direction: column; line-height: 1.35; }
.name-callout-text strong { font-size: .92rem; color: var(--text); }
.name-callout-text span { font-size: .8rem; color: var(--muted); }

/* 名前未登録のときだけ説明を出す */
.user-bar.needs-name .name-callout { display: flex; }

/* 名前未登録のとき入力欄を目立たせる（パルス枠） */
.user-bar.needs-name .user-field input {
  border-color: #f5a623;
  box-shadow: 0 0 0 0 rgba(245,166,35,.55);
  animation: name-attention 1.8s ease-out infinite;
}
@keyframes name-attention {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
.user-bar.needs-name #save-name-btn {
  background: var(--grad-accent, #00d6a4);
  color: #06251d; font-weight: 700;
}

/* ----- 名前登録済みのあいさつ ----- */
.user-greeting { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text); }
.user-greeting > i { color: #2ecc71; }
.user-greeting-text strong { color: var(--accent-dark, #009e78); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }

.update-info { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--muted); }
.auto-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(46,204,113,.5);} 70%{box-shadow:0 0 0 7px rgba(46,204,113,0);} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0);} }

/* ===== Main ===== */
.main-content { padding: 22px 16px 60px; }

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 22px; }
.stat-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; text-align: center; }
.stat-num { display: block; font-size: 1.7rem; font-weight: 800; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: .78rem; color: var(--muted); }

/* Views */
.view { display: none; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
.view-title { font-size: 1.25rem; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.view-title i { color: var(--gold); }

/* ===== Match Status Tabs (一级：按状态) ===== */
.match-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.match-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 13px 8px 11px;
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-family: inherit; transition: .18s;
  border-bottom: 3px solid transparent;
  position: relative;
}
.match-tab + .match-tab { border-left: 1px solid var(--line); }
.match-tab:hover { background: var(--bg); color: var(--text); }
.match-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: rgba(26,31,75,.04);
}
/* Live tab: 闪烁红色指示 */
.match-tab.has-live.active { color: var(--red); border-bottom-color: var(--red); }
.match-tab.has-live .mt-badge { background: var(--red); animation: pulse-badge 1.5s infinite; }
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.mt-label { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.mt-badge {
  min-width: 22px; height: 20px; padding: 0 6px;
  background: var(--primary-2); color: #fff;
  border-radius: 999px; font-size: .7rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .2s;
}
.mt-badge.zero { background: var(--line); color: var(--muted); }

/* ===== Stage filter bar (二级：按赛段) ===== */
.stage-filter-bar {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px;
  scrollbar-width: none;
}
.stage-filter-bar::-webkit-scrollbar { display: none; }
.stage-label {
  font-size: .74rem; font-weight: 700; color: var(--muted);
  white-space: nowrap; flex-shrink: 0;
}
/* 二级 filter chip（更小巧） */
.stage-filter-bar .filter-chip {
  flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
  padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .15s;
}
.stage-filter-bar .filter-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.stage-filter-bar .filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ===== Tab hint bar ===== */
.tab-hint {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,214,164,.08); border: 1px solid rgba(0,214,164,.2);
  border-radius: 10px; padding: 9px 14px;
  font-size: .82rem; color: var(--accent-dark); margin-bottom: 12px;
}
.tab-hint i { color: var(--accent-dark); flex-shrink: 0; }

/* Match card */
.matches-list { display: flex; flex-direction: column; gap: 12px; }
.match-group-label { font-size: .8rem; font-weight: 700; color: var(--muted); margin: 14px 0 2px; padding-left: 4px; }
.match-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 15px 16px 15px 19px; transition: .18s; position: relative; overflow: hidden;
  border-left: 4px solid var(--line);
}
.match-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.match-card.is-live { border-left-color: var(--red); }
.match-card.is-finished { border-left-color: var(--accent); }
.match-card.is-scheduled { border-left-color: var(--primary-2); }
.match-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.match-top {
  display: flex; flex-direction: column; gap: 8px;
  font-size: .74rem; color: var(--muted); margin-bottom: 12px;
}
.match-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===== 時刻ブロック ===== */
.time-block {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(26,31,75,.04);
  border-radius: 8px; padding: 7px 10px;
  border-left: 3px solid var(--primary-2);
}
.time-block.same-tz {
  border-left-color: var(--accent);
  background: rgba(0,214,164,.05);
}
.time-row {
  display: flex; align-items: center; gap: 6px;
  font-size: .76rem; line-height: 1.4;
}
.time-label {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  min-width: 92px; flex-shrink: 0;
}
.time-val {
  font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.local-row .time-val { color: var(--primary); }
.jst-row   .time-val { color: var(--accent-dark); }
.time-same-note {
  font-size: .68rem; color: var(--accent-dark); font-weight: 600;
  margin-left: 4px;
}
.tz-badge {
  font-size: .62rem; font-weight: 800; padding: 1px 5px;
  border-radius: 4px; background: rgba(26,31,75,.1); color: var(--primary-2);
  letter-spacing: .3px; flex-shrink: 0;
}
.jst-badge {
  background: rgba(0,184,148,.15); color: var(--accent-dark);
}
.status-badge { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.status-scheduled { background: #eef2f6; color: #5a6573; }
.status-live { background: #ffe9e9; color: var(--red); animation: blink 1.4s infinite; }
.status-finished { background: #e1f7f0; color: var(--accent-dark); }
@keyframes blink { 50% { opacity: .55; } }

.match-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.team { display: flex; align-items: center; gap: 10px; }
.team.home { justify-content: flex-end; text-align: right; }
.team.away { justify-content: flex-start; }
.team-flag { font-size: 1.7rem; line-height: 1; }
.team-name { font-weight: 600; font-size: .95rem; }
.match-center { text-align: center; min-width: 74px; }
.score-display { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.score-display .dim { color: var(--line); }
.vs-text { font-size: .85rem; color: var(--muted); font-weight: 700; }
.kickoff-time { font-size: .68rem; color: var(--muted); margin-top: 2px; }

.match-foot {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; min-height: 36px;
}
/* 已竞猜 pill */
.my-pred { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mypred-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26,31,75,.07); border-radius: 999px;
  padding: 5px 12px; font-size: .83rem; font-weight: 700; color: var(--primary);
}
.mypred-pill i { color: var(--accent-dark); font-size: .8rem; }
/* 未竞猜提示 */
.no-pred-tag {
  font-size: .78rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.no-pred-tag i { color: var(--muted); }
/* 需要竞猜的卡片左侧呼吸高亮 */
.match-card.needs-pred { border-left-color: var(--gold); }
/* 积分徽章 */
.pred-points { font-weight: 800; padding: 3px 10px; border-radius: 999px; font-size: .8rem; }
.pred-points.full { background: #e8f9f5; color: var(--accent-dark); border: 1px solid var(--accent); }
.pred-points.good { background: #e1f7f0; color: var(--accent-dark); }
.pred-points.zero { background: #eef2f6; color: var(--muted); }
/* 截止/TBD 标签 */
.locked-tag { font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tbd-tag { color: var(--muted); font-style: italic; }
/* 场地文字（小屏截断） */
.venue-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buttons */
.btn { border: none; border-radius: 9px; padding: 9px 16px; font-size: .88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: .15s; display: inline-flex; align-items: center; gap: 7px; }
.btn-sm { padding: 7px 13px; font-size: .82rem; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-accent { background: var(--grad-accent); color: #08313a; }
.btn-accent:hover { filter: brightness(1.05); }
.btn-ghost { background: #eef2f6; color: var(--muted); }
.btn-ghost:hover { background: #e2e8ee; }
.btn-outline { background: #fff; color: var(--accent-dark); border: 1.5px solid var(--accent); }
.btn-outline:hover { background: var(--accent); color: #08313a; }

/* Ranking */
.ranking-wrap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 13px 14px; text-align: left; font-size: .9rem; }
.ranking-table th { background: #f7f9fb; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; }
.ranking-table tbody tr { border-top: 1px solid var(--line); }
.ranking-table td.points { font-weight: 800; color: var(--accent-dark); }
.rank-medal { font-weight: 800; width: 30px; display: inline-block; text-align: center; }
.rank-1 { color: #ffc83d; } .rank-2 { color: #9aa6b2; } .rank-3 { color: #cd7f32; }
.ranking-table tbody tr.me-row { background: rgba(0,214,164,.08) !important; }
.empty-row td { text-align: center; color: var(--muted); padding: 30px; }

/* Rules */
.rules-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.rules-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.rules-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; }
.rules-list i { color: var(--accent-dark); margin-top: 3px; }
.pt-badge { flex-shrink: 0; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; color: #fff; }
.pt-5 { background: var(--accent-dark); } .pt-2 { background: var(--blue); } .pt-1 { background: var(--gold); color: #5a4500; } .pt-0 { background: #aeb7c0; }

/* Loading / empty */
.loading, .empty-state { text-align: center; color: var(--muted); padding: 40px; font-size: .95rem; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,25,35,.5); display: none; align-items: flex-end; justify-content: center; z-index: 100; padding: 0; }
.modal-overlay.open { display: flex; animation: fade .2s; }
.modal {
  background: #fff; border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 18px 32px;
  position: relative; box-shadow: var(--shadow-lg);
  max-height: 96dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* タブレット以上は中央配置に戻す */
@media (min-width: 600px) {
  .modal-overlay { align-items: center; padding: 16px; }
  .modal { border-radius: 18px; max-height: 90vh; }
}
.modal-close { position: absolute; top: 14px; right: 14px; background: #eef2f6; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--muted); font-size: .95rem; }
.modal-title { text-align: center; font-size: 1.1rem; margin-bottom: 4px; }
.modal-match { text-align: center; color: var(--muted); font-size: .82rem; margin-bottom: 10px; }
.score-input-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.score-side { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.score-team { font-size: .82rem; font-weight: 600; text-align: center; min-height: 2em; display: flex; align-items: center; }
.score-side input { width: 66px; height: 62px; border: 2px solid var(--line); border-radius: 12px; text-align: center; font-size: 1.8rem; font-weight: 800; font-family: inherit; color: var(--text); }
.score-side input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0,214,164,.15); }
.score-dash { font-size: 1.6rem; font-weight: 800; color: var(--muted); }
.modal-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}
.modal-actions .btn { justify-content: center; white-space: nowrap; min-width: 80px; }

/* Toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1c2430; color: #fff; padding: 12px 22px; border-radius: 10px; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; transition: .3s; z-index: 200; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Footer */
.site-footer { text-align: center; padding: 24px 16px; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); background: var(--card); }
.site-footer i { color: var(--accent-dark); }

/* ===== Group standings ===== */
.groups-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.group-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.group-card-title { padding: 12px 16px; font-size: .95rem; font-weight: 800; background: var(--primary); color: #fff; }
.group-table-wrap { overflow-x: auto; }
.group-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.group-table th { padding: 8px 8px; background: #f7f9fb; color: var(--muted); font-size: .7rem; text-align: center; font-weight: 700; border-bottom: 1px solid var(--line); }
.group-table td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--line); }
.group-table tbody tr:last-child td { border-bottom: none; }
.gs-team-h, .gs-team { text-align: left !important; }
.gs-team { display: flex; align-items: center; gap: 6px; min-width: 100px; font-weight: 600; }
.gs-pos { font-weight: 700; color: var(--muted); width: 20px; }
.gs-pts strong { color: var(--primary); font-size: .95rem; }
.qualify-row { background: rgba(0,214,164,.06); }
.qualify-row td:first-child::before { content: "↑"; color: var(--accent-dark); font-size: .7rem; display: block; }

/* ===== Knockout bracket ===== */
.bracket-container { overflow-x: auto; }
.bracket-scroll { display: flex; gap: 20px; padding-bottom: 16px; min-width: max-content; }
.bracket-col { display: flex; flex-direction: column; gap: 0; min-width: 160px; }
.bracket-col-title { font-size: .75rem; font-weight: 800; color: var(--muted); text-align: center; padding: 8px 4px; text-transform: uppercase; letter-spacing: .5px; }
.bracket-col-matches { display: flex; flex-direction: column; gap: 12px; }
.bracket-match {
  background: var(--card); border-radius: 10px; box-shadow: var(--shadow);
  overflow: hidden; border: 1px solid var(--line);
}
.bracket-match.status-live { border-color: var(--red); }
.bracket-match.status-finished { border-color: var(--line); }
.bm-team { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: .82rem; }
.bm-team + .bm-team { border-top: 1px solid var(--line); }
.bm-flag { font-size: 1.1rem; }
.bm-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-score { font-weight: 800; font-size: .95rem; min-width: 18px; text-align: right; color: var(--muted); }
.bm-win .bm-name { color: var(--primary); }
.bm-win .bm-score { color: var(--accent-dark); }

/* ===== My stats ===== */
.ms-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.ms-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; text-align: center; }
.ms-num { display: block; font-size: 1.6rem; font-weight: 800; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ms-label { font-size: .75rem; color: var(--muted); display: block; margin-top: 4px; }
.ms-history-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.ms-history-table td { vertical-align: middle; }
.msh-match { font-size: .82rem; }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .main-nav {
    position: absolute; top: 62px; right: 0; left: 0; background: var(--primary-2);
    flex-direction: column; padding: 8px; gap: 2px; display: none;
  }
  .main-nav.open { display: flex; }
  .nav-link { justify-content: flex-start; width: 100%; }
  .mobile-nav-toggle { display: block; order: 3; }
  .lang-switch { margin-left: auto; }
  .brand-text small { display: none; }
}
@media (max-width: 540px) {
  /* Tab 标签在小屏缩减 */
  .mt-label { font-size: .68rem; }
  .match-tab { padding: 10px 4px 8px; }
  .venue-text { display: none; }
  .mypred-pill { font-size: .76rem; padding: 4px 9px; }
}
@media (max-width: 480px) {
  .team-name { font-size: .82rem; }
  .team-flag { font-size: 1.4rem; }
  .stat-num { font-size: 1.35rem; }
  .ranking-table th:nth-child(4), .ranking-table td:nth-child(4),
  .ranking-table th:nth-child(5), .ranking-table td:nth-child(5) { display: none; }
  .groups-container { grid-template-columns: 1fr; }
  .ms-cards { grid-template-columns: repeat(2, 1fr); }
  .ms-num { font-size: 1.3rem; }
}

/* ===== Service Worker 更新バナー ===== */
#sw-update-banner {
  position: fixed;
  bottom: -80px;           /* 初期状態: 画面外（下）*/
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;

  background: linear-gradient(135deg, #1a1f4b 0%, #2d3a8c 100%);
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,200,61,.35);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;

  transition: bottom .4s cubic-bezier(.34,1.56,.64,1);  /* バネっぽい動き */
}

/* 表示状態 */
#sw-update-banner.sw-banner-visible {
  bottom: 82px;  /* Toast の上に重ならない高さ */
}

.sw-banner-icon {
  font-size: 1.2rem;
  animation: sw-spin 2.5s linear infinite;
}
@keyframes sw-spin {
  to { transform: rotate(360deg); }
}

.sw-banner-msg {
  flex: 1;
  font-size: .88rem;
}

.sw-banner-btn {
  background: #ffc83d;
  color: #1a1f4b;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .1s;
  font-family: inherit;
}
.sw-banner-btn:hover { background: #ffd966; }
.sw-banner-btn:active { transform: scale(.96); }

.sw-banner-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: color .2s;
  font-family: inherit;
}
.sw-banner-close:hover { color: #fff; }

@media (max-width: 540px) {
  #sw-update-banner {
    left: 12px;
    right: 12px;
    transform: none;
    white-space: normal;
    font-size: .82rem;
  }
  #sw-update-banner.sw-banner-visible { bottom: 16px; }
}