/* ===== 體育競猜 · 玩家端 =====
   風格：iOS 毛玻璃（Glassmorphism）+ 電競奢華
   重點回合(highlight) 用奢華金；一般用電光藍/青。
*/
[v-cloak] { display: none; }

.sg {
  --ink: #eaf0f7;
  --muted: #93a0b4;
  --c1: #38bdf8;            /* 電光藍（主） */
  --c2: #22d3ee;            /* 青（次） */
  --gold: #fbbf24;          /* 奢華金（重點） */
  --gold-d: #f59e0b;
  --rose: #fb7185;          /* 警示紅（資格未達） */
  --glass: rgba(255, 255, 255, 0);     /* 玻璃填充：全透明（純模糊） */
  --line: rgba(255, 255, 255, .12);
  --line-soft: rgba(255, 255, 255, .07);
  --fill-1: rgba(255, 255, 255, .05);  /* 互動填充 */
  --fill-2: rgba(255, 255, 255, .10);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 16px 90px;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sg * { box-sizing: border-box; }
.sg .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* 電競午夜光暈背景 */
body {
  background-color: #020617;
  background-image:
    radial-gradient(900px 600px at 15% 6%, rgba(56, 189, 248, .18), transparent 60%),
    radial-gradient(820px 620px at 88% 16%, rgba(124, 58, 237, .17), transparent 55%),
    radial-gradient(760px 720px at 50% 112%, rgba(251, 191, 36, .08), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* iOS 毛玻璃基底 */
.sg .glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------- Hero ---------- */
.sg-hero {
  position: relative; overflow: hidden;
  padding: 34px 24px; text-align: center; border-radius: 26px;
}
.sg-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%);
}
.sg-hero__tag {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 2.5px; color: var(--c1);
  border: 1px solid rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .08);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.sg-hero__tag i { color: var(--gold); }
.sg-hero__title {
  position: relative; z-index: 1;
  font-size: 30px; font-weight: 900; margin: 0 0 10px; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.sg-hero__titletext {
  background: linear-gradient(96deg, #fff 0%, #ffe9a8 38%, #f8c44e 62%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(248, 196, 78, .22));
}
.sg-hero__ball {
  color: var(--c1); -webkit-text-fill-color: var(--c1); font-size: .82em;
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, .55));
}
.sg-hero__slogan { position: relative; z-index: 1; font-size: 14.5px; color: var(--ink); opacity: .82; margin: 0 0 10px; }
.sg-hero__period { position: relative; z-index: 1; font-size: 12.5px; color: var(--muted); }

/* ---------- 賽事切換（iOS 分段控制） ---------- */
.sg-events { display: flex; gap: 8px; margin-top: 14px; padding: 6px; border-radius: 18px; flex-wrap: wrap;
  background: var(--fill-1); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sg-event {
  flex: 1 1 auto; min-width: 140px; cursor: pointer; color: var(--muted);
  border: none; background: transparent; border-radius: 13px;
  padding: 11px 16px; font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .18s ease;
}
.sg-event i { color: var(--muted); }
.sg-event:hover { color: var(--ink); }
.sg-event.active {
  color: #fff; background: var(--fill-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sg-event.active i { color: var(--c1); }

/* ---------- 參加條件 ---------- */
.sg-cond { margin-top: 14px; padding: 18px 20px; border-radius: 20px; }
.sg-cond__title { font-size: 15px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--c1); }
.sg-cond__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sg-cond__list li {
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink);
  padding: 11px 14px; border-radius: 13px; background: var(--fill-1); border: 1px solid var(--line-soft);
}
.sg-cond__list li i { width: 18px; text-align: center; color: var(--c1); flex: none; }
.sg-cond__list li b { color: #fff; }
.sg-cond__list li.is-amber { border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .07); }
.sg-cond__list li.is-amber i, .sg-cond__list li.is-amber b { color: var(--gold); }

/* ---------- 回合切換（iOS 分段控制） ---------- */
.sg-tabs { display: flex; gap: 6px; margin-top: 14px; padding: 6px; border-radius: 18px;
  background: var(--fill-1); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sg-tab {
  flex: 1; cursor: pointer; color: var(--muted); border: none; background: transparent;
  border-radius: 13px; padding: 12px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px; transition: .18s ease;
}
.sg-tab:hover { color: var(--ink); }
.sg-tab__name { font-size: 15px; font-weight: 800; }
.sg-tab__state { font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; opacity: .9; }
.sg-tab.active { color: #fff; background: var(--fill-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .12); }
.sg-tab.is-highlight.active { box-shadow: 0 6px 20px rgba(251, 191, 36, .22), inset 0 1px 0 rgba(255, 255, 255, .14); }
.sg-tab.is-highlight .sg-tab__name { color: var(--gold); }
.sg-tab.is-done .sg-tab__state { color: var(--c2); }

/* ---------- 回合面板 ---------- */
.sg-panel { margin-top: 14px; padding: 22px; border-radius: 24px; }
.sg-panel.is-highlight { border-color: rgba(251, 191, 36, .3); }
.sg-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.sg-panel__lead { flex: 1 1 280px; min-width: 0; }
.sg-panel__title { font-size: 21px; font-weight: 900; margin: 0 0 6px; }
.sg-panel__desc { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.6; }
.sg-panel__recharge { font-size: 13px; color: var(--gold); margin: 9px 0 0; display: flex; align-items: center; gap: 6px; }

/* 獎勵（無外框） */
.sg-reward { flex: none; text-align: right; }
.sg-reward__label { display: block; font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.sg-reward__amt { display: block; font-size: 30px; font-weight: 800; color: var(--c2); line-height: 1.15; text-shadow: 0 2px 16px rgba(56, 189, 248, .3); }
.sg-reward.is-highlight .sg-reward__amt { color: var(--gold); text-shadow: 0 2px 18px rgba(251, 191, 36, .42); }
.sg-reward__wash { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* 進度條 */
.sg-progress { margin: 18px 0 4px; }
.sg-progress__meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.sg-progress__cd { color: var(--c1); font-weight: 700; }
.sg-progress__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sg-progress__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width 1s linear; }
.sg-progress__fill.is-highlight { background: linear-gradient(90deg, var(--gold-d), var(--gold)); }

/* 已參加 / 未開放 */
.sg-done {
  margin-top: 18px; padding: 16px 18px; border-radius: 16px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .08);
}
.sg-done > i { font-size: 24px; color: var(--c1); }
.sg-done b { display: block; font-size: 15px; color: #fff; margin-bottom: 2px; }
.sg-done span { font-size: 13px; color: var(--muted); }
.sg-done em { color: var(--c2); font-style: normal; font-weight: 700; }
.sg-upcoming {
  margin-top: 18px; padding: 38px 20px; border-radius: 18px; text-align: center;
  border: 1px dashed var(--line); background: rgba(255, 255, 255, .025);
}
.sg-upcoming__ico { font-size: 28px; color: var(--muted); opacity: .7; }
.sg-upcoming b { display: block; font-size: 16px; color: var(--ink); margin: 13px 0 8px; }
.sg-upcoming span { font-size: 13px; color: var(--muted); line-height: 1.7; }
.sg-upcoming em { color: var(--c1); font-style: normal; }

/* ---------- 隊伍格 ---------- */
.sg-teams { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sg-team {
  position: relative; cursor: pointer; color: var(--ink); border-radius: 18px;
  padding: 16px 10px 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: .16s ease;
  background: rgba(255, 255, 255, .045);
}
.sg-team:hover { transform: translateY(-3px); border-color: rgba(56, 189, 248, .45); background: var(--fill-1); }
.sg-team__flag { width: 46px; height: 32px; object-fit: cover; border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.sg-team__name { font-size: 15px; font-weight: 700; color: #fff; }
.sg-team__group { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); }
.sg-team__check {
  position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; color: #04121f;
  background: var(--c2); opacity: 0; transform: scale(.5); transition: .16s ease;
}
.sg-team.selected { border-color: var(--c1); background: rgba(56, 189, 248, .15); box-shadow: 0 12px 28px rgba(56, 189, 248, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
.sg-team.selected .sg-team__check { opacity: 1; transform: scale(1); }
.sg-panel.is-highlight .sg-team:hover { border-color: rgba(251, 191, 36, .5); }
.sg-panel.is-highlight .sg-team.selected { border-color: var(--gold); background: rgba(251, 191, 36, .15); box-shadow: 0 12px 28px rgba(251, 191, 36, .26); }
.sg-panel.is-highlight .sg-team__check { background: var(--gold); }

/* 內嵌小國旗 */
.sg-flag-sm { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; vertical-align: -3px; margin-right: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* ---------- 動作列 ---------- */
.sg-actionbar {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.sg-actionbar__info { font-size: 14px; color: var(--muted); }
.sg-actionbar__info b { color: #fff; font-size: 15px; }
.sg-submit {
  border: none; cursor: pointer; border-radius: 14px; padding: 14px 28px; font-size: 15px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 10px; color: #04121f;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 12px 28px rgba(56, 189, 248, .32); transition: .16s ease;
}
.sg-submit.is-highlight { color: #2b1d00; background: linear-gradient(135deg, var(--gold-d), var(--gold)); box-shadow: 0 12px 28px rgba(251, 191, 36, .32); }
.sg-submit:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.sg-submit:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.sg-submit.locked { color: var(--rose); background: rgba(244, 63, 94, .12); border: 1px solid rgba(244, 63, 94, .45); box-shadow: none; }
.sg-submit.locked:not(:disabled):hover { background: rgba(244, 63, 94, .2); filter: none; }

/* ---------- 我的競猜 ---------- */
.sg-mine { margin-top: 14px; padding: 18px 20px; border-radius: 20px; }
.sg-mine__title { font-size: 15px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--c1); }
.sg-mine__empty { text-align: center; color: var(--muted); font-size: 14px; padding: 14px 0; }
.sg-mine__list { list-style: none; margin: 0; padding: 0; }
.sg-mine__item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.sg-mine__item:last-child { border-bottom: none; }
.sg-mine__round { font-weight: 700; color: #fff; min-width: 86px; }
.sg-mine__team { flex: 1; min-width: 120px; }
.sg-mine__prize { color: var(--gold); }
.sg-mine__st { font-size: 12px; padding: 3px 12px; border-radius: 999px; }
.sg-mine__st.is-pending { background: rgba(255, 255, 255, .08); color: var(--muted); }
.sg-mine__st.is-win { background: rgba(56, 189, 248, .2); color: var(--c2); }
.sg-mine__st.is-lose { background: rgba(244, 63, 94, .18); color: var(--rose); }

/* ---------- RWD ---------- */
@media (max-width: 720px) {
  .sg { padding: 12px 12px 90px; }
  .sg-hero { padding: 26px 16px; }
  .sg-hero__title { font-size: 24px; }
  .sg-tabs { gap: 4px; padding: 5px; }
  .sg-tab { padding: 10px 4px; }
  .sg-tab__name { font-size: 13.5px; }
  .sg-panel__head { flex-direction: column; }
  .sg-panel__lead { flex: 1 1 auto; }
  .sg-reward { text-align: left; align-self: stretch; }
  .sg-teams { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .sg-team__name { font-size: 13px; }
  .sg-team__flag { width: 40px; height: 28px; }
  .sg-actionbar { flex-direction: column; align-items: stretch; }
  .sg-submit { width: 100%; justify-content: center; }
}
@media (max-width: 440px) {
  .sg-teams { grid-template-columns: repeat(2, 1fr); }
  .sg-events .sg-event { min-width: 0; }
}