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

/* ── 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;
}
.t-scroll.is-scrollable::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:34px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg));
  transition:opacity .3s;
}
.t-scroll.scrolled-end::after{opacity:0}
@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}
}

/* ── 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-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}