/* =========================================================
   霓虹街機 neon — 午夜街機廳
   深紫夜色 × 霓虹燈管描邊 × 透視網格地平線 × CRT 掃描線
   ========================================================= */

:root {
  color-scheme: dark;
  --bg: #0b0820;
  --bg-pattern:
    radial-gradient(120% 60% at 50% -10%, rgba(162, 89, 255, .22), transparent 60%),
    radial-gradient(60% 40% at 100% 30%, rgba(255, 43, 214, .08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
  --bg-size: auto;
  --surface: #130e30;
  --surface-2: #1b1442;
  --text: #f6f0ff;
  --text-2: #cfc4f5;
  --muted: #a497d6;
  --line: rgba(176, 140, 255, .28);
  --shadow-c: rgba(0, 0, 0, .7);
  --inv: #2b1866;
  --hl: #2a1d5c;
  --on-primary: #16002b;
  --scrim: rgba(5, 3, 18, .78);
  --header-bg: rgba(11, 8, 32, .86);
  --footer-bg: #07051a;
  --footer-fg: #b9add9;
  --footer-title: #21e6ff;
  --footer-logo: #fff;
  --bw: 1.5px;
  --bw-sm: 1.5px;
  --border: var(--bw) solid var(--line);
  --border-sm: var(--bw-sm) solid var(--line);
  /* 陰影改成光暈 */
  --pop-press: 0 0 0 1px rgba(176, 140, 255, .2);
  --pop-xs: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 10px rgba(162, 89, 255, .18);
  --pop-sm: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 14px rgba(162, 89, 255, .22);
  --pop: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 20px rgba(162, 89, 255, .22), 0 14px 30px -14px rgba(0, 0, 0, .9);
  --pop-lg: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 28px rgba(162, 89, 255, .28), 0 18px 40px -16px rgba(0, 0, 0, .9);
  --pop-xl: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 36px rgba(162, 89, 255, .34), 0 22px 46px -16px rgba(0, 0, 0, .9);
  --tpop-xs: 0 0 6px rgba(255, 43, 214, .7);
  --tpop-sm: 0 0 8px rgba(255, 43, 214, .75), 0 0 18px rgba(255, 43, 214, .4);
  --tpop: 0 0 10px rgba(255, 43, 214, .85), 0 0 26px rgba(255, 43, 214, .5);
  --tpop-lg: 0 0 14px rgba(255, 43, 214, .9), 0 0 40px rgba(255, 43, 214, .55);
  --tstroke: transparent;
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --tilt: 0;
  --font-display: "Orbitron", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-hud: "Orbitron", "Noto Sans TC", system-ui, sans-serif;
  --body-weight: 400;
  --heading-weight: 900;
  --heading-spacing: .02em;
  /* 霓虹色盤 */
  --coral: #ff3b8d;
  --sun: #c6ff3d;
  --teal: #21e6ff;
  --grape: #a259ff;
  --sky: #3d7bff;
  --pink: #ff2bd6;
  --mint: #3dffb5;
  --doodle: transparent;
  /* 依主色計算的光暈 */
  --gp: color-mix(in srgb, var(--c-primary) 55%, transparent);
  --gp2: color-mix(in srgb, var(--c-primary) 22%, transparent);
  --gs: color-mix(in srgb, var(--c-secondary) 50%, transparent);
  --gs2: color-mix(in srgb, var(--c-secondary) 18%, transparent);
  --ga: color-mix(in srgb, var(--c-accent) 50%, transparent);
  --ga2: color-mix(in srgb, var(--c-accent) 16%, transparent);
  --grid-line: 2px;
}

.tone-coral { --tone: var(--coral); --tone-a: rgba(255, 59, 141, .4); --tone-soft: rgba(255, 59, 141, .14); --tone-fg: #0b0820; }
.tone-sun { --tone: var(--sun); --tone-a: rgba(198, 255, 61, .36); --tone-soft: rgba(198, 255, 61, .12); --tone-fg: #0b0820; }
.tone-teal { --tone: var(--teal); --tone-a: rgba(33, 230, 255, .38); --tone-soft: rgba(33, 230, 255, .12); --tone-fg: #0b0820; }
.tone-grape { --tone: var(--grape); --tone-a: rgba(162, 89, 255, .45); --tone-soft: rgba(162, 89, 255, .16); --tone-fg: #0b0820; }
.tone-sky { --tone: var(--sky); --tone-a: rgba(61, 123, 255, .45); --tone-soft: rgba(61, 123, 255, .16); --tone-fg: #0b0820; }
.tone-pink { --tone: var(--pink); --tone-a: rgba(255, 43, 214, .42); --tone-soft: rgba(255, 43, 214, .14); --tone-fg: #0b0820; }
.tone-mint { --tone: var(--mint); --tone-a: rgba(61, 255, 181, .36); --tone-soft: rgba(61, 255, 181, .12); --tone-fg: #0b0820; }

::selection { background: var(--c-primary); color: #16002b; }
:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 3px; }
h1, h2, h3 { text-shadow: 0 0 18px rgba(200, 160, 255, .18); }

/* 霓虹燈管共用：--nc 為燈管顏色 */
.btn, .slide-btn, .hdr-btn, .sec-more, .search-go, .sc-act, .share-btn, .rail-more, .sheet-close {
  --nc: var(--c-primary);
  background: color-mix(in srgb, var(--nc) 12%, transparent);
  color: #fff; border: 1.5px solid var(--nc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc) 25%, transparent), 0 0 16px color-mix(in srgb, var(--nc) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--nc) 25%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--nc) 80%, transparent);
  font-family: var(--font); font-weight: 800; letter-spacing: .06em;
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn:hover, .slide:hover .slide-btn, .hdr-btn:hover, .sec-more:hover, .search-go:hover, .sc-act:hover, .share-btn:hover, .rail-more:hover, .sheet-close:hover {
  background: var(--nc); color: #12001f; text-shadow: none; transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc) 40%, transparent), 0 0 26px color-mix(in srgb, var(--nc) 70%, transparent), 0 0 60px color-mix(in srgb, var(--nc) 30%, transparent);
}
.btn:active { transform: translateY(1px); }
.btn-ghost { --nc: var(--c-secondary); }
.sec-more, .sc-act, .share-btn, .rail-more { --nc: var(--c-secondary); }

.badge { height: 20px; padding: 0 7px; border: 1.5px solid currentColor; border-radius: 4px; background: rgba(11, 8, 32, .88); font: 800 10.5px/1 var(--font-hud); letter-spacing: .12em; box-shadow: 0 0 10px color-mix(in srgb, currentColor 55%, transparent); text-shadow: 0 0 6px currentColor; }
.badge-hot { background: rgba(11, 8, 32, .88); color: var(--pink); }
.badge-new { background: rgba(11, 8, 32, .88); color: var(--sun); }

.chip, .tag, .rail-tab, .sc-pill, .pg-btn, .sc-panel-meta a, .sc-panel-meta > span:not(.badge) {
  background: rgba(19, 14, 48, .9); color: var(--text-2); border: 1.5px solid var(--line); box-shadow: none; font-family: var(--font); font-weight: 700;
}
.chip:hover, .tag:hover, .pg-btn:hover, .sc-pill:hover, .sc-panel-meta a:hover { background: rgba(33, 230, 255, .08); color: #fff; border-color: var(--c-secondary); box-shadow: 0 0 12px var(--gs); transform: none; }
.chip.active, .rail-tab.active, .pg-btn.active {
  background: color-mix(in srgb, var(--c-primary) 16%, transparent); color: #fff; border-color: var(--c-primary);
  box-shadow: 0 0 14px var(--gp), inset 0 0 10px var(--gp2); text-shadow: 0 0 8px var(--gp);
}
.chip small { color: var(--muted); font-family: var(--font-hud); }

/* =========================================================
   頂部：深色半透明 + 漸層霓虹底線
   ========================================================= */
.hdr { border-bottom: 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--c-primary) 18%, var(--c-secondary) 82%, transparent); box-shadow: 0 0 14px var(--gp), 0 0 4px var(--gs); }
.hdr-in { height: 74px; }
.logo-en { font: 800 27px/1 var(--font-hud); letter-spacing: .06em; color: #fff; text-shadow: 0 0 2px #fff, 0 0 10px var(--c-secondary), 0 0 26px var(--gs); }
.logo-zh { background: transparent; color: #fff; border: 1.5px solid var(--c-primary); border-radius: 6px; box-shadow: 0 0 12px var(--gp), inset 0 0 8px var(--gp2); text-shadow: 0 0 8px var(--c-primary); font-weight: 800; }
.logo-badge { background: transparent; color: var(--c-accent); border: 1.5px solid var(--c-accent); box-shadow: 0 0 8px var(--ga); }

.nav-link { font: 700 15.5px var(--font); color: var(--text-2); border: 1.5px solid transparent; }
.nav-link:hover { background: rgba(33, 230, 255, .06); color: #fff; border-color: var(--gs); box-shadow: 0 0 12px var(--gs2); }
.nav-link.active { background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: #fff; border-color: var(--c-primary); box-shadow: 0 0 14px var(--gp), inset 0 0 8px var(--gp2); text-shadow: 0 0 8px var(--gp); }
.nav-dot { width: 24px; height: 24px; background: transparent; color: var(--tone); border: 1.5px solid var(--tone); box-shadow: 0 0 8px var(--tone-a), inset 0 0 6px var(--tone-a); }

.drop-card { background: #110b2c; border: 1.5px solid var(--tone); border-radius: var(--r); box-shadow: 0 0 26px var(--tone-a), 0 24px 50px rgba(0, 0, 0, .7); }
.drop-head { background: linear-gradient(90deg, var(--tone-soft), transparent); color: #fff; border-bottom: 1px solid var(--tone-a); }
.drop-head strong { font-family: var(--font); font-weight: 900; text-shadow: 0 0 10px var(--tone-a); }
.drop-head a { color: var(--tone); }
.drop-game { background: #0b0820; border: 1px solid var(--line); }
.drop-game:hover { border-color: var(--tone); box-shadow: 0 0 12px var(--tone-a); }
.drop-game img { border-bottom: 1px solid var(--line); }
.drop-game span { font-family: var(--font); color: var(--text); }

.hdr-search { background: rgba(33, 230, 255, .06); color: #d6fbff; border: 1.5px solid var(--gs); box-shadow: 0 0 12px var(--gs2); font-family: var(--font); }
.hdr-search:hover { border-color: var(--c-secondary); box-shadow: 0 0 16px var(--gs); transform: none; }
.hdr-btn { --nc: var(--c-accent); }
.hdr-btn + .hdr-btn { --nc: var(--c-primary); }
.hdr-icon { background: transparent; color: var(--c-accent); border: 1.5px solid var(--c-accent); box-shadow: 0 0 10px var(--ga); }

.search-box-big { background: #120c2e; border: 1.5px solid var(--c-secondary); box-shadow: 0 0 0 1px var(--gs2), 0 0 40px var(--gs), 0 30px 60px rgba(0, 0, 0, .6); color: var(--c-secondary); }
.search-box-big input { color: #fff; }
.search-box-big input::placeholder { color: var(--muted); }
.search-close { color: var(--text-2); }

.appbar { background: #150e36; border-bottom: 1px solid var(--gp); }
.appbar-icon { border: 1px solid var(--line); }
.appbar-btn { background: var(--c-primary); color: #16002b; box-shadow: 0 0 12px var(--gp); }

/* =========================================================
   首頁主視覺：合成波夕陽 + 透視網格地板
   ========================================================= */
.hero { background: #0d0828; border: 1.5px solid var(--c-primary); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--gp2), 0 0 34px var(--gp2), 0 0 70px rgba(162, 89, 255, .18); }
.theme-neon { --tone: #ff2bd6; --tone-a: rgba(255, 43, 214, .5); }
.theme-ocean { --tone: #21e6ff; --tone-a: rgba(33, 230, 255, .42); }
.theme-sunset { --tone: #ff6a3d; --tone-a: rgba(255, 106, 61, .45); }
.theme-forest { --tone: #3dffb5; --tone-a: rgba(61, 255, 181, .36); }
.theme-candy { --tone: #ff5ad9; --tone-a: rgba(255, 90, 217, .45); }
.slide:not(.has-bg) { background: radial-gradient(70% 55% at 72% 62%, var(--tone-a), transparent 70%), linear-gradient(180deg, #0a0622 0%, #1a0b40 58%, #2a0c4c 62%, #0b0620 100%); }
/* 夕陽：條紋切口的漸層圓 */
.slide:not(.has-bg)::before {
  content: ""; position: absolute; z-index: 0; right: 13%; top: 9%; width: 290px; height: 290px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe45c 0%, #ff8a3d 38%, var(--tone) 78%);
  -webkit-mask: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
  mask: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
  opacity: .9; filter: saturate(1.1);
}
/* 地平線網格（覆寫塗鴉層） */
.slide:not(.has-bg)::after, .cat-art::before, .page-hero > .container::before, .showcase::before {
  inset: auto -60% 0; height: 40%;
  background:
    linear-gradient(to top, var(--gc, var(--tone)) var(--grid-line), transparent var(--grid-line)) 0 100% / 100% 26px,
    linear-gradient(to right, var(--gc, var(--tone)) var(--grid-line), transparent var(--grid-line)) 50% 0 / 34px 100%;
  transform: perspective(160px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(to top, #000 10%, transparent 92%);
  mask: linear-gradient(to top, #000 10%, transparent 92%);
  opacity: .6;
}
.slide:not(.has-bg)::after { z-index: 1; background-color: rgba(11, 6, 32, .55); box-shadow: 0 -2px 0 var(--tone); }
.slide-eyebrow { background: rgba(11, 8, 32, .6); color: var(--c-secondary); border: 1.5px solid var(--c-secondary); border-radius: 4px; box-shadow: 0 0 12px var(--gs), inset 0 0 8px var(--gs2); font: 800 14px/1.2 var(--font-hud); letter-spacing: .24em; text-shadow: 0 0 8px var(--gs); }
.slide-title { font-family: var(--font); font-weight: 900; letter-spacing: .04em; -webkit-text-stroke: 0; text-shadow: 0 0 4px rgba(255, 255, 255, .7), 0 0 14px var(--tone), 0 0 36px var(--tone); }
.slide-sub { color: #e9e2ff; font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.slide-btn { --nc: var(--c-accent); border-radius: var(--r-pill); }
.art-free img { filter: drop-shadow(0 0 22px rgba(33, 230, 255, .35)) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.art-card img { background: #05030f; border: 2px solid var(--tone); border-radius: 8px; box-shadow: 0 0 24px var(--tone-a), inset 0 0 0 4px #05030f; }
.hero-arrow { background: rgba(11, 8, 32, .7); color: var(--c-secondary); border: 1.5px solid var(--gs); box-shadow: 0 0 10px var(--gs2); }
.hero-arrow:hover { border-color: var(--c-secondary); box-shadow: 0 0 16px var(--gs); transform: none; }
.hero-bars button { width: 22px; height: 6px; background: rgba(255, 255, 255, .18); border: 0; }
.hero-bars button.active { width: 44px; }
.hero-bars .active i::after { background: var(--c-secondary); box-shadow: 0 0 10px var(--c-secondary); }

/* 側欄：投幣機台 + 高分榜 */
.tile { background: linear-gradient(180deg, #170f3a, #0e0a26); border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--pop); }
.tile-random { background: linear-gradient(135deg, rgba(198, 255, 61, .1), transparent 60%), #120c2e; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--ga2), 0 0 24px var(--ga2), inset 0 0 22px var(--ga2); }
.tile-random:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ga), 0 0 34px var(--ga), inset 0 0 22px var(--ga2); }
.tile-text strong { font-family: var(--font); font-weight: 900; color: #fff; text-shadow: 0 0 12px var(--ga); }
.tile-go { background: transparent; color: var(--c-accent); border: 1.5px solid var(--c-accent); box-shadow: 0 0 10px var(--ga); }
.dice { background: #0b0820; border: 1.5px solid var(--c-accent); border-radius: 12px; box-shadow: 0 0 14px var(--ga), inset 0 0 10px var(--ga2); transform: rotate(-8deg); }
.dice i { background: var(--c-accent); box-shadow: 0 0 6px var(--c-accent); }
.dice i:nth-child(3) { background: var(--c-primary); box-shadow: 0 0 6px var(--c-primary); }
.tile-top { border-color: var(--gs); }
.tile-title { font-family: var(--font); font-weight: 900; }
.tile-title .ic { color: var(--c-accent); filter: drop-shadow(0 0 5px var(--c-accent)); }
.tile-title::after { content: "HI-SCORE"; margin-left: auto; font: 600 10.5px var(--font-hud); letter-spacing: .22em; color: var(--c-secondary); text-shadow: 0 0 8px var(--gs); }
.top3 a:hover { background: rgba(33, 230, 255, .07); }
.rank { background: transparent !important; border: 1.5px solid currentColor; font: 800 14px var(--font-hud); box-shadow: 0 0 10px color-mix(in srgb, currentColor 45%, transparent); text-shadow: 0 0 8px currentColor; }
.rank-1 { color: var(--c-accent); } .rank-2 { color: var(--c-secondary); } .rank-3 { color: var(--c-primary); }
.top3 img { border: 1px solid var(--line); }
.top3-t strong { font-family: var(--font); }

/* 公告：霓虹跑馬燈 */
.ticker { background: #0e0927; border-top: 1.5px solid var(--c-primary); border-bottom: 1.5px solid var(--c-primary); box-shadow: 0 0 18px var(--gp2), inset 0 0 18px var(--gp2); }
.ticker-label { background: var(--c-primary); color: #16002b; font: 900 15px var(--font); letter-spacing: .1em; box-shadow: 0 0 18px var(--gp); }
.marquee-track { color: #f1eaff; font-weight: 700; }
.marquee-track span::before { content: "◆"; color: var(--c-secondary); text-shadow: 0 0 8px var(--c-secondary); }

/* =========================================================
   區塊標題：燈管圖示 + 延伸地平線
   ========================================================= */
.sec-head h2 { font-family: var(--font); font-size: 26px; color: #fff; }
.sec-head::after { content: ""; order: 1; flex: 1; height: 2px; min-width: 20px; margin: 0 6px; background: linear-gradient(90deg, var(--c-primary), var(--c-secondary) 60%, transparent); box-shadow: 0 0 10px var(--gp); opacity: .8; }
.sec-head > a { order: 2; }
.sec-head h2 > .ic { color: var(--c-secondary); filter: drop-shadow(0 0 6px var(--c-secondary)); }
.sec-head > a:not(.sec-more) { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--c-secondary); }
.sec-mark { background: transparent; color: var(--tone); border: 1.5px solid var(--tone); border-radius: 10px; box-shadow: 0 0 12px var(--tone-a), inset 0 0 8px var(--tone-a); }
.sec-more { height: 36px; padding: 0 14px; font-size: 13.5px; }
.h-sm { font-family: var(--font); }

/* 分類卡：站在霓虹網格上的機台 */
.cat-tile { background: #0f0a28; border: 1.5px solid var(--tone-a); border-radius: var(--r-lg); box-shadow: 0 0 18px -4px var(--tone-a); }
.cat-tile:hover { transform: translateY(-5px); border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone-a), 0 0 30px var(--tone-a); }
.cat-art { background: radial-gradient(90% 60% at 50% 72%, var(--tone-a), transparent 72%), linear-gradient(180deg, #0a0622, #1a0d3e 70%, #0b0620); }
.cat-art::before { --gc: var(--tone); height: 34%; opacity: .55; }
.cat-art img { height: 84%; margin-bottom: 4%; filter: drop-shadow(0 0 16px var(--tone-a)) drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); }
.cat-big { color: var(--tone); filter: drop-shadow(0 0 12px var(--tone)); }
.cat-meta { border-top: 1px solid var(--tone-a); background: #0d0924; }
.cat-ico { background: transparent; color: var(--tone); border: 1.5px solid var(--tone); box-shadow: 0 0 10px var(--tone-a); }
.cat-txt strong { font-family: var(--font); font-weight: 800; color: #fff; }
.cat-txt small { color: var(--tone); font: 600 10px var(--font-hud); letter-spacing: .14em; }
.cat-count { background: transparent; color: var(--tone); border: 1.5px solid var(--tone-a); font: 800 12.5px var(--font-hud); text-shadow: 0 0 6px var(--tone-a); }

/* 遊戲卡：街機機台（頂部燈箱標題 + CRT 螢幕） */
.gcard { --nc: var(--c-secondary); background: linear-gradient(180deg, #181040, #0e0a26 70%); border: 1.5px solid color-mix(in srgb, var(--nc) 35%, transparent); border-radius: 14px 14px 10px 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 14px 26px -16px rgba(0, 0, 0, .95); }
.gcard:nth-child(3n + 1) { --nc: var(--c-primary); }
.gcard:nth-child(3n) { --nc: var(--c-accent); }
.gcard:hover { transform: translateY(-4px); border-color: var(--nc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc) 40%, transparent), 0 0 28px color-mix(in srgb, var(--nc) 45%, transparent); }
.gcard-link { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 0 12px; }
.gcard-body { display: contents; }
.gcard-title {
  order: -1; height: 40px; padding: 0 12px; line-height: 39px; text-align: center; font: 800 15.5px/39px var(--font); color: #fff; letter-spacing: .06em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nc) 30%, transparent), color-mix(in srgb, var(--nc) 6%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--nc) 60%, transparent); border-radius: 12px 12px 0 0;
  text-shadow: 0 0 6px color-mix(in srgb, var(--nc) 90%, transparent), 0 0 16px color-mix(in srgb, var(--nc) 60%, transparent);
}
.gcard-media { margin: 10px 10px 0; border-radius: 8px; border: 2px solid #05030f; background: #05030f; box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc) 35%, transparent); }
.gcard-media::after, .mcard-img::after, .pcard-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0, 0, 0, .45)); }
.gcard-play { background: var(--nc); color: #12001f; border: 0; box-shadow: 0 0 20px var(--nc); z-index: 2; }
.gcard-desc { padding: 0 12px; margin-top: 9px; color: var(--muted); }
.gcard-cat { justify-self: start; margin: 9px 12px 0; background: transparent; color: var(--nc); border: 1px solid color-mix(in srgb, var(--nc) 55%, transparent); font-family: var(--font); }
.badges { left: 16px; top: 56px; z-index: 3; }
.fav-btn { right: 16px; top: 56px; background: rgba(11, 8, 32, .8); color: var(--text-2); border: 1.5px solid var(--line); box-shadow: none; }
.fav-btn:hover { color: #fff; border-color: var(--c-primary); box-shadow: 0 0 12px var(--gp); }
.fav-btn[aria-pressed="true"] { background: var(--c-primary); color: #16002b; border-color: var(--c-primary); box-shadow: 0 0 16px var(--gp); }

/* 文章卡 */
.pcard { background: #120c2e; border: 1.5px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); }
.pcard:hover { transform: translateY(-4px); border-color: var(--tone); box-shadow: 0 0 26px var(--tone-a); }
.pcard-media { position: relative; border-bottom: 1px solid var(--tone-a); box-shadow: 0 1px 10px var(--tone-a); }
.pcard-tag { background: transparent; color: var(--tone, var(--c-secondary)); border: 1.5px solid var(--tone, var(--c-secondary)); border-radius: 4px; box-shadow: 0 0 8px var(--tone-a, var(--gs)); font-family: var(--font); }
.pcard-title { font-family: var(--font); font-weight: 800; }

/* 首頁底部 */
.intro-card { background: radial-gradient(80% 90% at 100% 0%, rgba(255, 43, 214, .22), transparent 60%), linear-gradient(160deg, #1d0c47, #0e0a29); border: 1.5px solid var(--c-primary); box-shadow: 0 0 30px var(--gp2), inset 0 0 40px rgba(255, 43, 214, .08); }
.intro-card .tape { display: none; }
.intro-card h2 { font-family: var(--font); text-shadow: var(--tpop-sm); }
.intro-card .prose { color: var(--text-2); }
.intro-card .prose strong { color: var(--c-accent); text-shadow: 0 0 8px var(--ga); }
.intro-stats div { background: rgba(11, 8, 32, .7); color: var(--text-2); border: 1.5px solid var(--tone); box-shadow: 0 0 14px var(--tone-a), inset 0 0 12px var(--tone-soft); border-radius: 12px; }
.intro-stats strong { font: 800 30px/1.1 var(--font-hud); color: var(--tone); text-shadow: 0 0 10px var(--tone); }
.faq-card { background: #120c2e; border: 1.5px solid var(--gs); box-shadow: 0 0 24px var(--gs2); }
.faq-card h2, .faq-group h2 { font-family: var(--font); }
.faq-item { background: #0d0925; border: 1px solid var(--line); }
.faq-item summary { font-family: var(--font); font-weight: 700; }
.faq-item summary .ic { background: transparent; color: var(--c-secondary); border: 1.5px solid var(--gs); }
.faq-item[open] { background: #150f36; border-color: var(--c-secondary); box-shadow: 0 0 16px var(--gs2); }

/* =========================================================
   內頁標題：霓虹看板
   ========================================================= */
.page-hero > .container { background: radial-gradient(60% 120% at 88% 110%, var(--gp), transparent 60%), linear-gradient(180deg, #170c3d, #0d0828); border: 1.5px solid var(--c-primary); box-shadow: 0 0 0 1px var(--gp2), 0 0 30px var(--gp2); }
.page-hero > .container::before { --gc: var(--c-primary); left: 30%; height: 70%; opacity: .45; }
.page-hero-cat > .container { background: radial-gradient(60% 120% at 88% 110%, var(--gs), transparent 60%), linear-gradient(180deg, #0c1640, #0b0828); border-color: var(--c-secondary); box-shadow: 0 0 30px var(--gs2); }
.page-hero-cat > .container::before { --gc: var(--c-secondary); }
.page-hero h1 { font-family: var(--font); text-shadow: var(--tpop-sm); }
.page-hero-cat h1 { text-shadow: 0 0 10px var(--gs), 0 0 24px var(--gs2); }
.page-hero-sub { color: var(--text-2); font-weight: 500; }
.page-hero-icon { background: transparent; color: var(--c-secondary); border: 1.5px solid var(--c-secondary); box-shadow: 0 0 14px var(--gs), inset 0 0 10px var(--gs2); }
.page-hero .crumbs { color: var(--muted); }
.crumbs a:hover, .page-hero .crumbs a:hover { color: var(--c-secondary); }
.sorts { background: #120c2e; border: 1.5px solid var(--line); box-shadow: none; }
.sorts a { font-family: var(--font); }
.sorts a.active { background: var(--c-secondary); color: #04131a; box-shadow: 0 0 14px var(--gs); }
.cat-intro, .info-card, .article, .doc, .aside-card, .form-card { background: #120c2e; border: 1.5px solid var(--line); box-shadow: var(--pop); }
.empty > .ic { background: transparent; color: var(--c-secondary); border: 1.5px solid var(--c-secondary); box-shadow: 0 0 18px var(--gs); }

/* =========================================================
   遊戲展示區：夜色舞台 + 地板網格
   ========================================================= */
.showcase { background: radial-gradient(60% 50% at 50% 100%, var(--sc-glow), transparent 70%), linear-gradient(180deg, #0b0820 0%, var(--sc-bg) 100%); border-bottom: 1px solid var(--line); }
.showcase::before { --gc: var(--sc-main); height: 34%; opacity: .5; background-size: 100% 44px, 64px 100%; }
.sc-sakura { --sc-bg: #2b0b3d; --sc-main: #ff5ad9; --sc-fg: #1a0020; --sc-glow: rgba(255, 90, 217, .3); }
.sc-sky { --sc-bg: #0a1d48; --sc-main: #21e6ff; --sc-fg: #001a22; --sc-glow: rgba(33, 230, 255, .26); }
.sc-mint { --sc-bg: #07302f; --sc-main: #3dffb5; --sc-fg: #00231a; --sc-glow: rgba(61, 255, 181, .22); }
.sc-lavender { --sc-bg: #1f1152; --sc-main: #b07bff; --sc-fg: #160a33; --sc-glow: rgba(176, 123, 255, .3); }
.sc-sunset { --sc-bg: #3a0e2b; --sc-main: #ff7a3d; --sc-fg: #2a0b00; --sc-glow: rgba(255, 122, 61, .28); }
.sc-night { --sc-bg: #0e0a30; --sc-main: #c6ff3d; --sc-fg: #0b0820; --sc-glow: rgba(198, 255, 61, .18); }
.sc-pill.active { background: var(--sc-main); color: var(--sc-fg); border-color: var(--sc-main); box-shadow: 0 0 16px var(--sc-main); text-shadow: none; }
.sc-title { font-family: var(--font); font-weight: 900; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 4px rgba(255, 255, 255, .8), 0 0 16px var(--sc-main), 0 0 44px var(--sc-main); }
.sc-tagline { background: rgba(11, 8, 32, .7); color: #fff; border: 1.5px solid var(--sc-main); box-shadow: 0 0 14px var(--sc-glow); font-family: var(--font); font-weight: 700; }
.sc-panel { background: rgba(12, 8, 32, .84); border: 1.5px solid var(--sc-main); border-radius: var(--r-lg); box-shadow: 0 0 30px var(--sc-glow), inset 0 0 30px rgba(255, 255, 255, .03); }
.sc-panel .tape { display: none; }
.sc-panel-text { color: var(--text); font-weight: 500; }
.sc-start, .sc-night .sc-start {
  background: var(--c-primary); color: #16002b; border: 0; font-family: var(--font); font-weight: 900; letter-spacing: .12em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 0 26px var(--gp), 0 0 60px var(--gp2);
}
.sc-start:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 0 36px var(--c-primary), 0 0 80px var(--gp); }
.sc-start:active { transform: translateY(1px); box-shadow: 0 0 16px var(--gp); }
.sc-act { height: 38px; padding: 0 16px; font-size: 14px; }
.sc-act.fav-btn { --nc: var(--c-primary); background: color-mix(in srgb, var(--nc) 12%, transparent); color: #fff; border-color: var(--nc); box-shadow: 0 0 14px color-mix(in srgb, var(--nc) 40%, transparent); }
.sc-act.fav-btn[aria-pressed="true"] { background: var(--c-primary); color: #16002b; text-shadow: none; }
.sc-side img { filter: drop-shadow(0 0 24px var(--sc-glow)) drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.sc-card img { background: #05030f; border: 2px solid var(--sc-main); border-radius: 10px; padding: 8px; box-shadow: 0 0 30px var(--sc-glow); filter: none; }

.info-how { background: linear-gradient(180deg, rgba(33, 230, 255, .07), transparent 60%), #120c2e; border-color: var(--gs); }
.info-card h2 { font-family: var(--font); }
.info-card h2 .ic { background: transparent; color: var(--c-secondary); border: 1.5px solid var(--gs); box-shadow: 0 0 10px var(--gs2); }
.game-lead { color: var(--text); font-weight: 700; }
.side-game:hover, .top3 a:hover { background: rgba(33, 230, 255, .07); }
.side-game img { border: 1px solid var(--line); }
.side-game strong, .post-list a, .aside-title, .toc-title { font-family: var(--font); }
.side-play { color: var(--c-primary); filter: drop-shadow(0 0 6px var(--gp)); }
.post-list a { background: #120c2e; border: 1px solid var(--line); box-shadow: none; }
.post-list a:hover { background: rgba(255, 43, 214, .08); border-color: var(--c-primary); box-shadow: 0 0 14px var(--gp2); transform: none; }
.post-list a .ic { color: var(--c-primary); }

/* 全螢幕播放頁 */
.page-play, .pw-stage { background: #05030f; }
.pw-bar { background: #0e0927; border-bottom: 1.5px solid var(--c-primary); box-shadow: 0 0 16px var(--gp2); }
.pw-title { font-family: var(--font); font-weight: 900; text-shadow: 0 0 10px var(--gp); }
.pw-actions button, .pw-actions a { background: transparent; color: #fff; border: 1.5px solid var(--gs); box-shadow: 0 0 10px var(--gs2); font-family: var(--font); }
.pw-actions button:hover, .pw-actions a:hover { background: var(--c-secondary); color: #04131a; }
.pw-exit { background: #0e0927; color: #fff; border: 1.5px solid var(--c-primary); box-shadow: 0 0 14px var(--gp); }

/* =========================================================
   文章、頁面、表單
   ========================================================= */
.prose a { color: var(--c-secondary); text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; }
.prose a:hover { background: rgba(33, 230, 255, .1); }
.prose h2, .prose h3 { font-family: var(--font); }
.prose h2::after { height: 3px; width: 64px; border: 0; border-radius: 2px; background: linear-gradient(90deg, var(--c-primary), var(--c-secondary)); box-shadow: 0 0 10px var(--gp); }
.prose li::marker { color: var(--c-secondary); }
.prose blockquote { background: rgba(255, 43, 214, .06); border: 0; border-left: 3px solid var(--c-primary); box-shadow: -4px 0 14px -6px var(--gp); }
.prose code { background: rgba(198, 255, 61, .1); color: var(--c-accent); }
.prose pre { background: #05030f; border: 1px solid var(--line); }
.prose th { background: var(--surface-2); }
.prose img, .prose th, .prose td { border: 1px solid var(--line); }
.article-head h1 { font-family: var(--font); }
.article-cover img { border: 1.5px solid var(--line); }
.article-lead { background: rgba(33, 230, 255, .06); border: 0; border-left: 3px solid var(--c-secondary); color: var(--text); font-weight: 500; }
.toc { background: rgba(11, 8, 32, .6); border: 1px dashed var(--gs); }
.toc-side { border-style: solid; box-shadow: none; }
.toc a:hover { color: var(--c-secondary); background: none; }
.article-foot { border-top: 1px dashed var(--line); }
.cta-card { background: linear-gradient(90deg, var(--ga2), transparent 70%), #120c2e; border: 1.5px solid var(--c-accent); box-shadow: 0 0 26px var(--ga2); }
.cta-card strong { font-family: var(--font); font-weight: 900; color: #fff; }
.cta-card .btn { --nc: var(--c-accent); }
.faq-group h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 10px var(--c-primary); vertical-align: .15em; }
.form label { display: block; font-family: var(--font); }
.form label > input, .form label > select, .form label > textarea { display: block; margin-top: 8px; }
.form label b { color: var(--c-primary); }
.form input, .form select, .form textarea { background: #0b0820; border: 1.5px solid var(--line); color: var(--text); }
.form input:focus, .form select:focus, .form textarea:focus { background: #0e0a28; border-color: var(--c-secondary); box-shadow: 0 0 0 1px var(--gs2), 0 0 16px var(--gs); }
.alert-ok { background: rgba(61, 255, 181, .1); border-color: var(--mint); color: #d9fff0; }
.alert-err { background: rgba(255, 59, 141, .12); border-color: var(--coral); color: #ffe1ee; }
.contact-line a { text-decoration-color: var(--c-primary); }
.socials-dark a { background: transparent; color: var(--c-secondary); border: 1.5px solid var(--gs); box-shadow: 0 0 10px var(--gs2); }
.big-search { background: #0e0a28; border: 1.5px solid var(--c-secondary); box-shadow: 0 0 22px var(--gs2); color: var(--c-secondary); }
.big-search .btn { height: 42px; }
.error-code { font: 800 150px/1 var(--font-hud); color: #fff; -webkit-text-stroke: 0; text-shadow: -4px 0 var(--c-secondary), 4px 0 var(--c-primary), 0 0 30px var(--gp), 0 0 80px var(--gp2); letter-spacing: .04em; }
.error-hero h1 { font-family: var(--font); }

/* =========================================================
   頁尾：地平線光暈
   ========================================================= */
.footer { background: radial-gradient(70% 140px at 50% 0, rgba(255, 43, 214, .16), transparent), #07051a; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-primary) 20%, var(--c-secondary) 80%, transparent); box-shadow: 0 0 16px var(--gp), 0 0 4px var(--gs); }
.footer-wave { display: none; }
.f-title { font: 800 15px var(--font); letter-spacing: .18em; text-shadow: 0 0 10px var(--gs); }
.socials a { background: transparent; border: 1.5px solid var(--gs); color: var(--c-secondary); }
.socials a:hover { background: transparent; color: #fff; border-color: var(--c-primary); box-shadow: 0 0 14px var(--gp); }
.footer-bottom { border-top: 1px solid rgba(176, 140, 255, .14); }
.to-top { background: #0e0927; color: var(--c-secondary); border: 1.5px solid var(--c-secondary); box-shadow: 0 0 16px var(--gs); }
.toast { background: #0e0927; color: #fff; border: 1.5px solid var(--c-secondary); box-shadow: 0 0 20px var(--gs); font-family: var(--font); }

@media (max-width: 1200px) {
  .hdr-btn { padding: 0; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .logo-en { font-size: 22px; letter-spacing: .03em; }
  .hdr-in { gap: 14px; }
}

/* =========================================================
   手機版
   ========================================================= */
@media (max-width: 899.98px) {
  .hdr-in { height: 60px; }
  .logo-en { font-size: 19px; letter-spacing: .04em; }
  .logo-zh { font-size: 12px; padding: 4px 6px; border-width: 1.5px; box-shadow: 0 0 8px var(--gp); }
  .hdr-search { box-shadow: 0 0 10px var(--gs2); }
  .hero { border-radius: var(--r); box-shadow: 0 0 22px var(--gp2); }
  .slide:not(.has-bg)::before { width: 150px; height: 150px; right: 8%; top: 12%; }
  .slide:not(.has-bg)::after { height: 36%; }
  .slide-eyebrow { font-size: 10.5px; padding: 3px 8px; border-width: 1.5px; letter-spacing: .18em; }
  .slide-title { font-size: 24px; text-shadow: 0 0 3px rgba(255, 255, 255, .6), 0 0 10px var(--tone), 0 0 24px var(--tone); }
  .slide-btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .tile-random { padding: 14px 16px; border-radius: var(--r); }
  .dice { width: 46px; height: 46px; border-radius: 10px; }
  .ticker-label { font-size: 13.5px; }

  .rail { background: rgba(11, 8, 32, .92); box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .9); }
  .rail-tab { font-family: var(--font); }
  .mcard { background: #120c2e; border: 1.5px solid var(--line); border-radius: 12px; box-shadow: none; }
  .mcard:nth-child(3n + 1) { border-color: var(--gp); }
  .mcard:nth-child(3n + 2) { border-color: var(--gs); }
  .mcard:nth-child(3n) { border-color: var(--ga); }
  .mcard:active { transform: scale(.98); box-shadow: 0 0 16px var(--gp); }
  .mcard-img { border-bottom: 1px solid var(--line); }
  .mcard-label strong { font-family: var(--font); font-weight: 800; }
  .rail-more { height: 44px; }

  .sec-head h2 { font-size: 21px; }
  .sec-head::after { display: none; }
  .sec-more { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .gcard { border-radius: 12px; box-shadow: none; }
  .gcard:hover { transform: none; box-shadow: none; }
  .gcard-link { padding: 0 0 10px; }
  .gcard-title { height: 34px; font-size: 14px; line-height: 33px; border-radius: 10px 10px 0 0; }
  .gcard-media { margin: 7px 7px 0; }
  .gcard-cat { margin: 7px 8px 0; }
  .badges { left: 11px; top: 46px; }
  .fav-btn { right: 11px; top: 46px; }
  .pcard { box-shadow: none; }
  .pcard-media { border-bottom: 0; border-right: 1px solid var(--tone-a); box-shadow: none; }
  .intro-card, .faq-card { box-shadow: 0 0 18px var(--gp2); }
  .intro-stats strong { font-size: 22px; }

  .page-hero > .container { box-shadow: 0 0 20px var(--gp2); }
  .sc-title { font-size: 40px; }
  .sc-panel { box-shadow: 0 0 20px var(--sc-glow); }
  .sc-start { box-shadow: 0 0 22px var(--gp); }
  .sc-card img { padding: 5px; transform: none; }
  .info-card, .article, .doc, .form-card, .cta-card { box-shadow: none; }
  .error-code { font-size: 96px; }

  .tabbar { background: rgba(14, 10, 38, .94); border: 1.5px solid var(--gp); border-radius: 18px; box-shadow: 0 0 22px var(--gp2), 0 12px 30px rgba(0, 0, 0, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .tab { font-family: var(--font); color: var(--muted); }
  .tab .ic { border-width: 1.5px; }
  .tab.active { color: #fff; }
  .tab.active .ic { background: rgba(33, 230, 255, .1); border-color: var(--c-secondary); color: var(--c-secondary); box-shadow: 0 0 12px var(--gs); }
  .sheet-panel { background: #0f0a29; border-top: 1.5px solid var(--c-primary); box-shadow: 0 -10px 40px var(--gp2); }
  .sheet-grip { background: var(--c-secondary); opacity: .6; box-shadow: 0 0 8px var(--gs); }
  .sheet-title { font-family: var(--font); font-weight: 900; color: var(--c-secondary); letter-spacing: .12em; }
  .sheet-cat { font-family: var(--font); }
  .sheet-cat span, .sheet-cat:nth-child(n) span { --nc: var(--c-primary); background: transparent; color: var(--nc); border: 1.5px solid var(--nc); border-radius: 14px; box-shadow: 0 0 12px color-mix(in srgb, var(--nc) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--nc) 20%, transparent); }
  .sheet-cat:nth-child(5n + 2) span { --nc: var(--c-accent); }
  .sheet-cat:nth-child(5n + 3) span { --nc: var(--c-secondary); }
  .sheet-cat:nth-child(5n + 4) span { --nc: var(--grape); }
  .sheet-cat:nth-child(5n + 5) span { --nc: var(--sky); }
  .sheet-links a { background: #150f36; border: 1px solid var(--line); font-family: var(--font); }
  .sheet-links a .ic { color: var(--c-secondary); }
  .sheet-close { --nc: var(--c-primary); border-radius: var(--r-pill); }
}

/* 減少動態：跑馬燈改為直排，避免文字被截斷 */
@media (prefers-reduced-motion: reduce) {
  .ticker-in { height: auto; min-height: 48px; align-items: stretch; }
  .ticker-label { height: auto; }
  .marquee { display: flex; align-items: center; }
  .marquee-track { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; }
}