/* ============================================================
   LottoSync · Cyberpunk Enhancement Layer
   共用視覺增強：背景網格 / CRT 掃描線 / 暈影 / HUD 角框 /
   霓虹閃爍 / glitch / 動態邊框 / 表格滑動提示 / RWD 修正
   ============================================================ */

/* ── 0. iOS 安全區：頂部 nav 不被瀏海/狀態列擋住 ── */
@supports (padding-top: env(safe-area-inset-top)) {
  nav { padding-top: env(safe-area-inset-top) !important; height: auto !important; min-height: 58px; }
}

/* 分頁沒在看時暫停所有動畫（省效能，避免電腦變鈍）*/
html.anim-paused *,
html.anim-paused *::before,
html.anim-paused *::after { animation-play-state: paused !important; }

/* ── 1. 透視網格背景（固定，最底層，向上漸隱）── */
.cyber-grid{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,45,120,.04) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 110% 70% at 50% 0%,#000 25%,transparent 72%);
          mask-image:radial-gradient(ellipse 110% 70% at 50% 0%,#000 25%,transparent 72%);
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{0%{background-position:0 0,0 0}100%{background-position:0 44px,44px 0}}

/* ── 2. 暈影（邊緣壓暗，聚焦中央）── */
.cyber-vignette{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 50% 40%,transparent 52%,rgba(4,2,10,.6) 100%);
}

/* ── 3. CRT 掃描線疊層（極淡水平線）── */
.cyber-crt{
  position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
/* 緩慢移動的水平光帶 */
.cyber-crt::after{
  content:'';position:absolute;left:0;right:0;height:160px;
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.04),transparent);
  animation:crtSweep 7s linear infinite;
}
@keyframes crtSweep{0%{top:-160px}100%{top:100%}}

/* ── 4. HUD 角框（雙色 L 型角標，由 JS 自動套用）── */
.hud{position:relative}
.hud::before,.hud::after{
  content:'';position:absolute;width:15px;height:15px;pointer-events:none;z-index:2;
}
.hud::before{
  top:-1px;left:-1px;
  border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);
  box-shadow:-3px -3px 10px rgba(0,212,255,.35);
}
.hud::after{
  bottom:-1px;right:-1px;
  border-bottom:2px solid var(--pink);border-right:2px solid var(--pink);
  box-shadow:3px 3px 10px rgba(255,45,120,.35);
}

/* ── 5. 霓虹閃爍（logo / 重點霓虹）── */
@keyframes neonFlicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1}
  20%,24%,55%{opacity:.55}
}
.nav-logo{animation:neonFlicker 7s infinite}

/* ── 6. Glitch 標題（hover 觸發 RGB 分裂）── */
.glitch{position:relative;display:inline-block}
.glitch:hover::before,.glitch:hover::after{
  content:attr(data-text);position:absolute;inset:0;
  background:var(--bg);clip-path:inset(0 0 0 0);
}
.glitch:hover::before{left:2px;text-shadow:-2px 0 var(--pink);animation:glitchTop .4s steps(2) infinite}
.glitch:hover::after{left:-2px;text-shadow:-2px 0 var(--cyan);animation:glitchBot .4s steps(2) infinite}
@keyframes glitchTop{0%,100%{clip-path:inset(0 0 60% 0)}50%{clip-path:inset(0 0 40% 0)}}
@keyframes glitchBot{0%,100%{clip-path:inset(60% 0 0 0)}50%{clip-path:inset(45% 0 0 0)}}

/* ── 7. 動態漸層邊框光掃（重點卡片可加 .neon-edge）── */
.neon-edge{position:relative}
.neon-edge::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(0,212,255,.6) 45%,rgba(255,45,120,.6) 55%,transparent 80%);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:edgeSweep 4s linear infinite;opacity:.7;
}
@keyframes edgeSweep{0%{background-position:0% 0}100%{background-position:300% 0}}

/* ── 8. 終端機裝飾標籤（區塊小標）── */
.term-label{
  font-family:'Orbitron','Courier New',monospace;font-size:.62rem;letter-spacing:.18em;
  color:var(--cyan);opacity:.55;text-transform:uppercase;margin-bottom:6px;display:block;
}
.term-label::before{content:'▚ ';color:var(--pink)}

/* ── 9. 表格左右滑動提示（RWD）── */
.t-scroll{position:relative}
.t-scroll.is-scrollable::before{
  content:'⟷ 左右滑動查看';position:absolute;top:-26px;right:0;
  font-size:.68rem;color:var(--cyan);letter-spacing:.05em;opacity:.75;
  display:flex;align-items:center;gap:4px;pointer-events:none;
  animation:hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(-3px);opacity:.9}}

/* ── 10. 號碼球進場閃爍（更有科技感）── */
.ball{transition:transform .15s,box-shadow .2s}
.ball:hover{transform:scale(1.12) translateY(-2px)}
.ball-n:hover{box-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,212,255,.4)}
.ball-s:hover{box-shadow:0 0 12px var(--pink),0 0 24px rgba(255,45,120,.4)}

/* ── 11. RWD 修正 ──────────────────────────────── */

/* 首頁倒數：小螢幕改 4 欄等寬一行，不再 3+1 換行 */
@media(max-width:460px){
  .countdown-wrap{display:grid !important;grid-template-columns:repeat(4,1fr);gap:8px !important}
  .countdown-wrap .cd-item{min-width:0 !important;padding:12px 4px !important}
  .countdown-wrap .cd-num{font-size:1.6rem !important}
  .countdown-wrap .cd-label{font-size:.62rem !important}
}

/* 賽事預測卡：超窄螢幕勝率字級縮一階，避免兩隊擠壓 */
@media(max-width:380px){
  .gc-team-prob{font-size:1.15rem !important}
  .gc-team-name{font-size:.82rem !important}
}

/* 號碼頻率圖：手機縮小格子，一行多塞幾個 */
@media(max-width:520px){
  .freq-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr)) !important;gap:7px !important}
  .freq-bar-wrap{height:48px;width:20px}
  .freq-wrap{padding:18px 14px !important}
}

/* HUD 角框在極小螢幕略縮，避免壓到圓角內容 */
@media(max-width:420px){
  .hud::before,.hud::after{width:11px;height:11px}
}

/* 終端標籤在手機隱藏避免干擾 */
@media(max-width:520px){.term-label{font-size:.58rem;letter-spacing:.12em}}

/* CRT/grid 在低效能裝置上尊重 reduce-motion */
@media(prefers-reduced-motion:reduce){
  .cyber-grid,.cyber-crt::after,.neon-edge::after,.nav-logo{animation:none}
}

/* ── 13. 手機底部 App 導覽列（取代漢堡）────────── */
.appbar{display:none}
@media(max-width:720px){
  .appbar{
    display:flex !important;position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:200;
    background:rgba(13,13,26,.96);backdrop-filter:blur(16px);
    border-top:1px solid var(--border);border-bottom:none;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 24px rgba(0,0,0,.4);
  }
  .appbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);text-decoration:none;font-size:.64rem;font-weight:700;
    padding:3px 0;position:relative;transition:color .2s;-webkit-tap-highlight-color:transparent;
  }
  .appbar a svg{width:22px;height:22px}
  .appbar a.active{color:var(--cyan)}
  .appbar a.active svg{filter:drop-shadow(0 0 5px rgba(0,212,255,.6))}
  .appbar a.active::before{content:'';position:absolute;top:-7px;width:26px;height:2px;background:var(--cyan);border-radius:2px;box-shadow:0 0 7px var(--cyan)}
  .appbar a.cta{color:var(--pink)}
  .appbar a.cta svg{filter:drop-shadow(0 0 5px rgba(255,45,120,.6))}
  /* 內容底部留空間，避免被導覽列遮住 */
  body{padding-bottom:62px}
  /* 手機改用底部列：隱藏漢堡與展開選單 */
  .nav-toggle{display:none !important}
  .nav-links{display:none !important}
}

/* ── 14. 加入主畫面提示條（手機，浮在底部列上方）── */
.a2hs{display:none}
@media(max-width:720px){
  .a2hs{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:210;
    background:rgba(20,13,38,.97);backdrop-filter:blur(14px);
    border:1px solid rgba(0,212,255,.35);border-radius:14px;
    padding:10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 16px rgba(0,212,255,.15);
    animation:a2hsIn .4s ease;
  }
  @keyframes a2hsIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
  .a2hs-ico{width:38px;height:38px;border-radius:9px;flex-shrink:0}
  .a2hs-txt{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
  .a2hs-txt b{font-size:.86rem;color:var(--text)}
  .a2hs-txt span{font-size:.7rem;color:var(--muted)}
  .a2hs-tip{font-size:.72rem;color:var(--cyan);white-space:nowrap}
  .a2hs-tip b{color:#fff}
  .a2hs-btn{background:linear-gradient(90deg,var(--pink),var(--cyan));color:#fff;border:none;font-weight:700;font-size:.8rem;padding:8px 16px;border-radius:99px;cursor:pointer;flex-shrink:0;box-shadow:0 0 12px rgba(255,45,120,.3)}
  .a2hs-x{background:none;border:none;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px;flex-shrink:0}
}

/* ── 12. SVG Icon 系統（取代 emoji）────────────── */
.i{width:1em;height:1em;display:inline-block;vertical-align:-0.13em;flex-shrink:0}
.i-c{color:var(--cyan)}
.i-p{color:var(--pink)}
.i-glow-c{filter:drop-shadow(0 0 4px rgba(0,212,255,.6))}
.i-glow-p{filter:drop-shadow(0 0 4px rgba(255,45,120,.6))}

/* logo 六邊形 */
.logo-hex{width:1.05em;height:1.05em;vertical-align:-0.16em;margin-right:4px;color:var(--cyan);filter:drop-shadow(0 0 6px rgba(0,212,255,.55))}
/* nav logo 圖（取代簡易 SVG）*/
.nav-logo .logo-img{width:32px;height:32px;vertical-align:middle;margin-right:7px;border-radius:7px;filter:drop-shadow(0 0 6px rgba(0,212,255,.35))}

/* 漢堡 / nav-cta 內 svg */
.nav-toggle svg{width:18px;height:18px;display:block}
.nav-cta .i{vertical-align:-0.12em;margin-right:3px}

/* 區域識別 chip（取代國旗 emoji）*/
.rgn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:21px;padding:0 7px;font-family:'Orbitron',monospace;font-size:.6rem;font-weight:700;letter-spacing:.04em;border-radius:5px;border:1px solid var(--cyan);color:var(--cyan);box-shadow:0 0 7px rgba(0,212,255,.3);vertical-align:middle;background:rgba(0,212,255,.05)}
.rgn-p{border-color:var(--pink);color:var(--pink);box-shadow:0 0 7px rgba(255,45,120,.3);background:rgba(255,45,120,.05)}

/* 圖例色塊（取代 ■）*/
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:3px}
.sw-hot{background:var(--pink);box-shadow:0 0 5px var(--pink)}
.sw-warm{background:var(--cyan);box-shadow:0 0 5px var(--cyan)}
.sw-cold{background:#3a3060}

/* 命中 / 未中 icon */
.td-hit svg{width:18px;height:18px;vertical-align:middle}
.td-hit.yes svg{color:var(--cyan);filter:drop-shadow(0 0 4px rgba(0,212,255,.6))}
.td-hit.no svg{color:var(--pink);filter:drop-shadow(0 0 4px rgba(255,45,120,.6))}

/* 方法論大圖示 */
.method-icon svg{width:38px;height:38px;color:var(--cyan);filter:drop-shadow(0 0 8px rgba(0,212,255,.4))}

/* 箭頭 icon */
.i-arrow{width:.95em;height:.95em;vertical-align:-0.1em;margin-left:3px}

/* ── Google 登入按鈕（全站，cyber.js 注入 nav）── */
.auth-slot{display:flex;align-items:center;gap:8px;margin-left:4px}
.auth-btn{display:inline-flex;align-items:center;gap:7px;background:var(--card,#1a1035);border:1px solid var(--border,#2a1f4a);color:var(--text,#e2e8f0);padding:6px 13px;border-radius:20px;font-size:.82rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s}
.auth-btn:hover{border-color:var(--cyan,#00D4FF);box-shadow:0 0 12px rgba(0,212,255,.25)}
.auth-btn svg{width:16px;height:16px;flex-shrink:0}
.auth-user{display:inline-flex;align-items:center;gap:8px}
.auth-avatar{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,212,255,.5);box-shadow:0 0 8px rgba(0,212,255,.25);object-fit:cover}
.auth-name{font-size:.82rem;color:var(--text,#e2e8f0);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-logout{font-size:.76rem;color:var(--muted,#a0aec0);text-decoration:none;border:1px solid var(--border,#2a1f4a);padding:4px 10px;border-radius:14px;transition:all .2s}
.auth-logout:hover{color:var(--text,#e2e8f0);border-color:var(--cyan,#00D4FF)}
@media(max-width:720px){.auth-slot{display:none}}

/* ── 預測卡「跟 AI 下這場」代理 CTA ── */
.bet-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:10px 12px;border-radius:10px;background:linear-gradient(90deg,var(--pink),var(--cyan));color:#0d0d1a;font-weight:800;font-size:.88rem;letter-spacing:.02em;text-decoration:none;box-shadow:0 0 14px rgba(255,45,120,.22);transition:.2s}
.bet-cta:hover{filter:brightness(1.08);box-shadow:0 0 22px rgba(255,45,120,.45);transform:translateY(-1px)}
.bet-cta.hot{animation:betPulse 1.8s ease-in-out infinite}
@keyframes betPulse{0%,100%{box-shadow:0 0 14px rgba(255,45,120,.25)}50%{box-shadow:0 0 26px rgba(255,45,120,.55)}}

/* ── 預測卡：點擊展開/收合（手風琴）── */
.game-card.pcollapse{padding:0;overflow:hidden}
.gc-head{display:flex;align-items:center;gap:10px;width:100%;padding:15px 18px;background:none;border:none;color:var(--text,#e2e8f0);font-family:inherit;cursor:pointer;text-align:left}
.gc-head:hover{background:rgba(0,212,255,.03)}
.gc-hbadge{font-size:.64rem;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:99px;flex-shrink:0;background:rgba(0,212,255,.1);color:var(--cyan,#00D4FF);border:1px solid rgba(0,212,255,.25)}
.game-card[data-league="nba"] .gc-hbadge,.game-card[data-league="NBA"] .gc-hbadge{background:rgba(255,45,120,.1);color:var(--pink,#FF2D78);border-color:rgba(255,45,120,.25)}
.gc-hsum{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gc-hmatch{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-hmatch i{color:var(--muted,#a0aec0);font-style:normal;font-size:.74rem;margin:0 5px}
.gc-hpick{font-size:.76rem;color:var(--muted,#a0aec0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-hpick b{color:var(--cyan,#00D4FF)}
.gc-chevron{width:18px;height:18px;color:var(--muted,#a0aec0);transition:transform .25s;flex-shrink:0}
.game-card.pcollapse.open .gc-chevron{transform:rotate(180deg)}
.gc-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.game-card.pcollapse.open .gc-body{max-height:940px}
.gc-body-inner{padding:2px 18px 18px}
/* 電腦版：賽事預測卡不收合，全部展開、隱藏箭頭、head 不可點外觀（彩票 .lotto-item 不受影響）*/
@media(min-width:721px){
  .game-card.pcollapse .gc-body,
  .game-card.pcollapse.open .gc-body{max-height:none !important}
  .game-card.pcollapse .gc-chevron{display:none !important}
  .game-card.pcollapse .gc-head{cursor:default !important}
}

/* ── 戰績頁：手機收合卡片（桌機維持表格）── */
.record-cards{display:none}
@media(max-width:720px){
  .t-scroll.rec-desktop{display:none}
  .record-cards{display:flex;flex-direction:column;gap:9px}
  .rec-card{background:var(--card2,#120d2a);border:1px solid var(--border,#2a1f4a);border-radius:12px;overflow:hidden}
  .rec-head{display:flex;align-items:center;gap:8px;width:100%;padding:13px 14px;background:none;border:none;color:var(--text,#e2e8f0);font-family:inherit;cursor:pointer;text-align:left}
  .rec-date{font-family:'Orbitron',sans-serif;font-size:.72rem;color:var(--muted,#a0aec0);flex-shrink:0}
  .rec-match{flex:1;min-width:0;font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rec-match i{color:var(--muted,#a0aec0);font-style:normal;font-size:.72rem;margin:0 4px}
  .rec-hit{flex-shrink:0;display:inline-flex}
  .rec-hit svg,.rec-hit .i{width:16px;height:16px}
  .rec-hit.yes{color:var(--cyan,#00D4FF)}
  .rec-hit.no{color:var(--pink,#FF2D78)}
  .rec-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .rec-card.open .rec-body{max-height:240px}
  .rec-card.open .gc-chevron{transform:rotate(180deg)}
  .rec-body-inner{padding:2px 14px 13px;border-top:1px solid rgba(0,212,255,.08)}
  .rec-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:.84rem;border-bottom:1px solid rgba(0,212,255,.06)}
  .rec-row:last-child{border-bottom:none}
  .rec-row span{color:var(--muted,#a0aec0)}
  .rec-row b{display:inline-flex;align-items:center;gap:5px}
  .rec-row b svg,.rec-row b .i{width:14px;height:14px}
  .rc-yes{color:var(--cyan,#00D4FF)}
  .rc-no{color:var(--pink,#FF2D78)}
}

/* ── 足球聯賽徽章配色（WC/EPL/UCL/LALIGA）── */
.gc-league-wc{background:rgba(255,200,0,.1);color:#ffc800;border:1px solid rgba(255,200,0,.3)}
.gc-league-epl{background:rgba(124,58,237,.12);color:#a78bfa;border:1px solid rgba(124,58,237,.35)}
.gc-league-ucl{background:rgba(0,212,255,.08);color:var(--cyan,#00D4FF);border:1px solid rgba(0,212,255,.2)}
.gc-league-laliga{background:rgba(255,45,120,.08);color:var(--pink,#FF2D78);border:1px solid rgba(255,45,120,.2)}

/* ── 隊徽 logo ── */
.team-logo{width:30px;height:30px;object-fit:contain;display:block;margin:0 auto 5px;filter:drop-shadow(0 0 3px rgba(0,0,0,.35))}
.team-logo.sm{width:17px;height:17px;display:inline-block;margin:0 5px -3px 0;vertical-align:middle;filter:none}
/* 首頁預測卡 .gc-top（賽事頁已有，這裡讓首頁也有）*/
.game-card .gc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
/* 桌面登入後頭像可點連到 /me */
.auth-user{text-decoration:none;color:var(--text,#e2e8f0);cursor:pointer}
.auth-user:hover .auth-name{color:var(--cyan,#00D4FF)}

/* ── 彩票開獎：下拉展開列 ── */
.lotto-list{display:flex;flex-direction:column;gap:8px}
.lotto-item{background:var(--card2,#120d2a);border:1px solid var(--border,#2a1f4a);border-radius:12px;overflow:hidden}
.lotto-item.open{border-color:rgba(0,212,255,.35)}
.lotto-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:none;color:var(--text,#e2e8f0);font-family:inherit;cursor:pointer;text-align:left}
.lotto-head:hover{background:rgba(0,212,255,.03)}
.lt-period{font-family:'Orbitron',sans-serif;font-weight:900;font-size:.95rem;color:var(--cyan,#00D4FF);flex:1;min-width:0}
.lt-new{font-family:'Noto Sans TC',sans-serif;font-size:.62rem;font-weight:700;color:var(--pink,#FF2D78);border:1px solid rgba(255,45,120,.4);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.lt-date{font-size:.84rem;color:var(--muted,#a0aec0);white-space:nowrap}
.lt-wd{color:var(--muted,#a0aec0);opacity:.7;font-size:.78rem;margin-left:2px}
.lt-chev{width:18px;height:18px;color:var(--muted,#a0aec0);transition:transform .25s;flex-shrink:0}
.lotto-item.open .lt-chev{transform:rotate(180deg)}
.lotto-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.lotto-item.open .lotto-body{max-height:240px}
.lotto-body-inner{padding:4px 16px 16px}
.lt-balls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.lt-meta{text-align:center;font-size:.82rem;color:var(--muted,#a0aec0)}
.lt-meta b{color:var(--text,#e2e8f0);font-family:'Orbitron',sans-serif}

/* ── 戰績：最終比分標籤 ── */
.rec-score{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;color:var(--cyan,#00D4FF);background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.25)}

/* ── 預測登入閘門（訪客只看部分，登入解鎖全部）── 賽博龐克風 */
.pred-gate{grid-column:1/-1;position:relative;overflow:hidden;text-align:center;padding:40px 24px 34px;border:1px solid rgba(0,212,255,.28);border-radius:16px;margin-top:4px;
  background:radial-gradient(ellipse 90% 70% at 50% -10%,rgba(255,45,120,.10),transparent 60%),linear-gradient(180deg,var(--card,#1a1035),var(--card2,#120d2a));
  box-shadow:0 0 26px rgba(0,212,255,.08),inset 0 0 36px rgba(0,212,255,.04)}
.pred-gate .pg-scan{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan,#00D4FF),transparent);opacity:.6;animation:pgScan 3.2s linear infinite;pointer-events:none}
@keyframes pgScan{0%{top:0;opacity:0}12%{opacity:.7}88%{opacity:.7}100%{top:100%;opacity:0}}
.pred-gate .pg-lock{width:62px;height:62px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--cyan,#00D4FF);
  border:1px solid rgba(0,212,255,.4);background:rgba(0,212,255,.06);box-shadow:0 0 16px rgba(0,212,255,.25),inset 0 0 14px rgba(0,212,255,.12)}
.pred-gate .pg-lock svg{width:30px;height:30px;filter:drop-shadow(0 0 5px rgba(0,212,255,.6))}
.pred-gate .pg-title{font-size:1.2rem;font-weight:900;color:var(--text,#e2e8f0);margin-bottom:8px;letter-spacing:.01em}
.pred-gate .pg-title em{font-style:normal;font-family:'Orbitron',sans-serif;background:linear-gradient(90deg,var(--cyan,#00D4FF),var(--pink,#FF2D78));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:0 3px}
.pred-gate .pg-sub{font-size:.88rem;color:var(--muted,#a0aec0);margin:0 auto 22px;line-height:1.6;max-width:340px}
.pred-gate .pg-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:99px;font-weight:800;font-size:.95rem;text-decoration:none;color:#fff;
  background:linear-gradient(90deg,var(--pink,#FF2D78),var(--cyan,#00D4FF));box-shadow:0 0 20px rgba(255,45,120,.3);transition:transform .15s,box-shadow .15s}
.pred-gate .pg-btn:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(0,212,255,.5)}
.pred-gate .pg-g{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;flex-shrink:0}
.pred-gate .pg-g svg{width:16px;height:16px}
.pred-gate .pg-foot{margin-top:14px;font-size:.74rem;color:var(--muted,#a0aec0);opacity:.7;letter-spacing:.03em}

/* ── 精選預測標記 ── */
.feat-tag{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 8px;border-radius:99px;font-size:.66rem;font-weight:800;letter-spacing:.03em;color:#0d0d1a;background:linear-gradient(90deg,#ffc800,#ff9d00);box-shadow:0 0 8px rgba(255,200,0,.4);vertical-align:middle}
.gc-hbadges{display:flex;flex-direction:column;gap:4px;align-items:center;flex-shrink:0}
.gc-hbadges .feat-tag{margin-left:0}
.gc-hbadges .gc-hbadge{width:100%;text-align:center}
.game-card.is-featured{border-color:rgba(255,200,0,.45)!important;box-shadow:0 0 18px rgba(255,200,0,.12)}

/* ── 近5場狀態（form）── */
.gc-form{margin:10px 0 4px;padding:9px 12px;background:rgba(0,212,255,.04);border:1px solid var(--border,#2a1f4a);border-radius:9px;font-size:.74rem}
.gc-form-lbl{display:block;color:var(--muted,#a0aec0);font-size:.66rem;letter-spacing:.08em;margin-bottom:6px}
.gc-form-side{display:flex;align-items:center;gap:5px;color:var(--text,#e2e8f0);margin:3px 0;flex-wrap:wrap}
.gc-form-side .fm{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;font-size:.6rem;font-weight:800;color:#0d0d1a}
.fm-w{background:linear-gradient(135deg,#00D4FF,#00a0c0)}
.fm-d{background:#5a5570;color:#e2e8f0}
.fm-l{background:linear-gradient(135deg,#FF2D78,#c0005a);color:#fff}

/* ── 讓分試算器 ── */
.gc-hcap{margin:10px 0 4px;padding:10px 12px;background:rgba(255,45,120,.04);border:1px solid var(--border,#2a1f4a);border-radius:9px}
.gc-hcap-lbl{font-size:.74rem;font-weight:700;color:var(--text,#e2e8f0);margin-bottom:8px}
.gc-hcap-lbl span{font-weight:400;font-size:.64rem;color:var(--muted,#a0aec0);margin-left:4px}
.gc-hcap-hint{font-size:.7rem;color:var(--muted,#a0aec0);line-height:1.5;margin:2px 0 8px;opacity:.85}
/* 🔒 精選賽事鎖定卡 */
.lockcard{padding:16px 18px}
.lk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lk-top .gc-time{margin-left:auto;font-size:.74rem;color:var(--muted,#a0aec0)}
.lk-teams{font-weight:700;font-size:1rem;text-align:center;margin-bottom:14px;color:var(--text,#e2e8f0)}
.lk-teams i{color:var(--muted,#a0aec0);font-style:normal;margin:0 4px;font-size:.85rem}
.lk-mask{background:rgba(13,13,26,.6);border:1px dashed rgba(255,200,0,.4);border-radius:14px;padding:18px 16px;text-align:center}
.lk-lock{font-size:1.8rem;margin-bottom:4px}
.lk-ttl{font-weight:800;color:#ffc800;margin-bottom:8px}
.lk-steps{font-size:.78rem;color:var(--muted,#a0aec0);line-height:1.7;margin-bottom:14px}
.lk-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.lk-btns a{flex:1;min-width:130px;text-decoration:none;font-weight:800;font-size:.86rem;padding:11px;border-radius:11px;text-align:center}
.lk-b1{background:linear-gradient(90deg,#ffc800,#ff9d00);color:#0d0d1a}
.lk-b2{background:rgba(0,212,255,.1);color:var(--cyan,#00D4FF);border:1px solid rgba(0,212,255,.4)}
.lk-more{display:inline-block;margin-top:10px;font-size:.78rem;color:var(--muted,#a0aec0);text-decoration:underline}
.lk-more:hover{color:var(--cyan,#00D4FF)}
a.gc-tlink{text-decoration:none;color:inherit;cursor:pointer;border-radius:12px;transition:background .15s}
a.gc-tlink:hover{background:rgba(0,212,255,.05)}
a.gc-tlink:hover .gc-team-name{color:var(--cyan,#00D4FF);text-decoration:underline;text-underline-offset:3px}
.gc-detail{display:block;text-align:center;margin-top:9px;padding:9px;border:1px dashed rgba(0,212,255,.35);border-radius:10px;color:var(--cyan,#00D4FF);text-decoration:none;font-size:.82rem;font-weight:700;transition:.2s}
.gc-detail:hover{background:rgba(0,212,255,.06);border-style:solid}
.gc-hcap-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:.8rem}
.gc-hcap-team{color:var(--cyan,#00D4FF);font-weight:700}
.gc-hcap-in{width:68px;padding:5px 8px;border-radius:7px;border:1px solid rgba(0,212,255,.4);background:rgba(13,13,26,.6);color:var(--text,#e2e8f0);font-family:'Orbitron',sans-serif;font-size:16px;text-align:center;-webkit-appearance:none}
.gc-hcap-in:focus{outline:none;border-color:var(--cyan,#00D4FF);box-shadow:0 0 8px rgba(0,212,255,.35)}
.gc-hcap-unit{color:var(--muted,#a0aec0)}
.gc-hcap-sep{color:var(--muted,#a0aec0);margin-left:2px}
.gc-hcap-pct{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1rem;margin-left:2px}
.gc-hcap-pct.hi{color:var(--cyan,#00D4FF);text-shadow:var(--glow-c)}
.gc-hcap-pct.mid{color:#ffc800;text-shadow:0 0 6px rgba(255,200,0,.4)}
.gc-hcap-pct.lo{color:var(--pink,#FF2D78);text-shadow:var(--glow-p)}
.gc-hcap-note{font-size:.66rem;color:#ffc800;margin-top:5px;min-height:0}

/* ── 全站浮動 TG 按鈕 ── */
.tg-float{position:fixed;right:16px;bottom:22px;z-index:205;display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px;border-radius:99px;text-decoration:none;font-weight:800;font-size:.86rem;color:#fff;
  background:linear-gradient(90deg,#229ED9,#00D4FF);box-shadow:0 4px 18px rgba(0,212,255,.45),0 0 0 1px rgba(255,255,255,.1) inset;
  animation:tgPulse 2.6s ease-in-out infinite;transition:transform .15s}
.tg-float svg{width:20px;height:20px;flex-shrink:0}
.tg-float:hover{transform:translateY(-2px)}
@keyframes tgPulse{0%,100%{box-shadow:0 4px 18px rgba(0,212,255,.4)}50%{box-shadow:0 4px 26px rgba(0,212,255,.75)}}
@media(max-width:720px){.tg-float{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:12px;padding:10px 14px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.tg-float{animation:none}}
/* 登入閘門裡的 TG 次要連結 */
.pred-gate .pg-tg{display:inline-block;margin-top:12px;font-size:.82rem;color:#00D4FF;text-decoration:none;font-weight:700}
.pred-gate .pg-tg:hover{text-decoration:underline}
/* 大小分/賠率價值 輸出(沿用過盤配色) */
.gc-ou-pct,.gc-val{font-family:'Orbitron',sans-serif;font-weight:900;font-size:.95rem;margin-left:2px;white-space:nowrap}
.gc-hcap-pct{white-space:nowrap}
.gc-ou-pct.hi,.gc-val.hi{color:var(--cyan,#00D4FF);text-shadow:var(--glow-c)}
.gc-ou-pct.mid,.gc-val.mid{color:#ffc800;text-shadow:0 0 6px rgba(255,200,0,.4)}
.gc-ou-pct.lo,.gc-val.lo{color:var(--pink,#FF2D78);text-shadow:var(--glow-p)}
.gc-val{font-size:.82rem}
.gc-hcap-row{margin:5px 0}
/* 波膽 最可能比分 */
.gc-bd{margin:2px 0 8px;padding:8px 11px;background:rgba(255,200,0,.05);border:1px solid rgba(255,200,0,.25);border-radius:8px}
.gc-bd-lbl{font-size:.72rem;font-weight:700;color:#ffc800;margin-bottom:5px}
.gc-bd-lbl span{font-weight:400;font-size:.64rem;color:var(--muted,#a0aec0);margin-left:4px}
.gc-bd-row{display:flex;gap:8px;flex-wrap:wrap}
.gc-bd-sc{font-size:.78rem;color:var(--text,#e2e8f0);padding:2px 8px;border-radius:6px;background:rgba(255,200,0,.08)}
.gc-bd-sc b{font-family:'Orbitron',sans-serif;color:#ffc800}