/* 復古/像素主題(Cubic 11 俐方體)— 套在 */ @font-face { font-family: 'Cubic11'; src: url('./cubic11.woff2') format('woff2'); font-display: swap; } body.retro, body.retro * { font-family: 'Cubic11', 'Noto Sans TC', monospace !important; } /* 全站通用:方角 + 去陰影光暈(扁平像素感)*/ body.retro * { border-radius: 0 !important; text-shadow: none !important; box-shadow: none !important; } /* 方角、去光暈漸層 */ body.retro .card, body.retro .panel, body.retro .stats div, body.retro .big, body.retro .ghost, body.retro .orow, body.retro .stk, body.retro .pick, body.retro .relic-card, body.retro .medal, body.retro .pitchcv, body.retro .modebtns .big, body.retro .citem, body.retro .tipbox { border-radius: 0 !important; } body.retro .gtitle span, body.retro .bigscore { text-shadow: none !important; } body.retro .gtitle { letter-spacing: 1px; } /* 扁平方塊按鈕 */ body.retro .big { background: #1c6b32; color: #eafff0; border: 2px solid #54e06a; box-shadow: none; } body.retro .big.alt { background: #234a8f; border-color: #6f9bff; } body.retro .big:hover:not(:disabled) { transform: none; background: #247a3a; box-shadow: none; } body.retro .ghost { border: 2px solid #2a5234; } /* CRT 掃描線已移除(用戶要求) */ /* ── 統一頁首 .plbar(吉祥物 + 頁名 / 音樂+音效鈕)墨綠 ── */ body.retro .plbar { display: flex; align-items: center; justify-content: space-between; background: #0b1a11; border-bottom: 2px solid #1f3d29; padding: 8px clamp(12px, 3vw, 26px); position: relative; z-index: 10; } body.retro .pl-home { display: flex; align-items: center; gap: 11px; text-decoration: none; } body.retro .pl-mascot { image-rendering: pixelated; display: block; width: 34px; height: 34px; } body.retro .pl-name { font-size: 15px; color: #d3f0e0; letter-spacing: .03em; } body.retro .pl-ctrls { display: flex; align-items: center; gap: 8px; } body.retro .pl-chip { background: #102417; border: 1px solid #2a4a35; border-bottom-width: 2px; padding: 5px 7px; display: flex; align-items: center; cursor: pointer; } body.retro .pl-chip:hover { border-color: #4cc878; } body.retro .pl-chip svg { fill: #7fe0a0; shape-rendering: crispEdges; display: block; } body.retro .pl-chip.off { opacity: .42; } body.retro .pl-chip.off svg { fill: #5a7a64; } body.retro select.lang-sel { background: #102417; border: 1px solid #2a4a35; color: #bfe6cd; font-size: 12px; padding: 4px 6px; cursor: pointer; } body.retro .pl-sub { padding: 7px clamp(12px, 3vw, 26px); font-size: 12px; color: #7fae8f; display: flex; align-items: center; gap: 7px; } body.retro .pl-sub .dot { width: 7px; height: 7px; background: #4cc878; display: inline-block; } /* 墨綠底 */ body.retro { background: #07120c; } /* ▸ 游標選單 */ .cmenu { display: flex; flex-direction: column; gap: 8px; max-width: 440px; margin: 16px auto 0; } .cmenu .citem { position: relative; text-align: left; background: #0c1a10; border: 2px solid #214d2c; color: #cfe8d6; font: inherit; font-size: 16px; padding: 13px 14px 13px 36px; cursor: pointer; transition: none; } .cmenu .citem::before { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #54e06a; } .cmenu .citem.sel { border-color: #54e06a; background: #10271a; color: #eafff0; } .cmenu .citem.sel::before { content: '\25B8'; } /* ▸ */ .cmenu .citem:hover { border-color: #3a7a48; } .cmenu-hint { text-align: center; font-size: 12px; color: #5f7a66; margin-top: 12px; } body.retro #pitch, body.retro .pitchcv { image-rendering: pixelated; } /* 首頁主選單 */ .menu-screen { max-width: 480px; margin: 0 auto; padding: 9vh 16px 48px; text-align: center; } .menu-logo { font-size: 42px; color: #eafff0; line-height: 1; margin-bottom: 6px; } .menu-logo span { color: #5ef38c; } .menu-sub { font-size: 13px; color: #6f8a76; margin-bottom: 34px; } .menu-h { font-size: 15px; color: #8aa094; margin: 0 0 14px; } /* ===== 全站一致性(收斂到首頁的乾淨感)===== */ /* 頁首:精簡、低調 */ body.retro .topbar { padding: 12px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); margin-bottom: 8px; } body.retro .brand-mark { font-size: 18px; } body.retro .brand-gaia { font-size: 12px; } body.retro .topnav { font-size: 12px; gap: 16px; } body.retro .lang-sel { font-size: 12px; } /* Hero:大標題收斂到接近首頁 logo 的尺度,去掉巨大留白 */ body.retro .hero { padding: clamp(26px, 5vw, 48px) 0 clamp(18px, 3vw, 30px); text-align: center; } body.retro .hero-title { font-size: clamp(28px, 5vw, 46px) !important; line-height: 1.15; letter-spacing: 1px; } body.retro .hero-tag { font-size: 11px; letter-spacing: 0.3em; margin-bottom: 12px; color: #6f8a76; } body.retro .hero-sub { font-size: 14px; margin: 12px auto 0; max-width: 560px; } /* 內容容器:統一窄一點、置中 */ body.retro main { max-width: 760px; } /* 卡片/面板:統一扁平方塊 */ body.retro .feature-card, body.retro .setup-card, body.retro .group, body.retro .batch-box, body.retro .fixtures-box { border: 1px solid var(--line); background: #0c160e; } /* 選單像素圖示 */ .cmenu .citem { display: flex; align-items: center; gap: 10px; } .cmenu .citem .micon { fill: #5ef38c; shape-rendering: crispEdges; flex: 0 0 auto; } .cmenu .citem span { flex: 1; } /* ── 卡片式主選單(仿遊戲版型,墨綠)── */ .cmenu { max-width: 680px; gap: 12px; } body.retro .cmenu .citem { padding: 14px 18px; gap: 15px; background: #0b1a11; border: 1px solid #234d2c; align-items: center; } body.retro .cmenu .citem::before { content: none !important; } body.retro .cmenu .citem .ic-box { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: #0a160d; border: 1px solid #1f3d29; flex: 0 0 auto; } body.retro .cmenu .citem .ic-box .micon { width: 28px; height: 28px; fill: #5ef38c; } body.retro .cmenu .citem .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: left; } body.retro .cmenu .citem .txt span { flex: none; } body.retro .cmenu .citem .t-title { font-size: 17px; color: #d8f3e3; } body.retro .cmenu .citem .t-sub { font-size: 12px; color: #7fae8f; } body.retro .cmenu .citem.sel { border-color: #54e06a; background: #10271a; } body.retro .cmenu .citem.sel .t-title { color: #eafff0; } .cmenu-hint { text-align: center; color: #6f8a76; font-size: 12px; margin-top: 16px; } .menu-h { text-align: center; color: #d8f3e3; font-size: 18px; margin: 4px 0 14px; } /* 首頁吉祥物(畫面上那隻)*/ .menu-mascot { display: block; width: 72px; height: 72px; image-rendering: pixelated; margin: 8px auto 4px; } .menu-screen { padding-top: 18px; } /* 頁首不顯示頻道連結(頻道在頁尾;i18n 會 un-hide 它,這裡強制藏)*/ body.retro .plbar #tg-header { display: none !important; } /* 設定:音量滑桿 */ .vol-box { max-width: 680px; margin: 10px auto 0; display: flex; flex-direction: column; gap: 8px; } .vol-row { display: flex; align-items: center; gap: 12px; background: #0b1a11; border: 1px solid #234d2c; padding: 12px 16px; cursor: default; } .vol-row > span:first-child { font-size: 14px; color: #d8f3e3; width: 86px; flex: 0 0 auto; } .vol-row input[type=range] { flex: 1; accent-color: #4cc878; height: 4px; } .vol-row .vol-n { width: 34px; text-align: right; color: #7fae8f; font-size: 13px; } /* 首頁動畫吉祥物舞台 */ .menu-stage { display: block; width: 100%; max-width: 440px; height: auto; margin: 4px auto; image-rendering: pixelated; } /* ── 生存賽 Meta:研究點 / 檔案 / 強化 / 成就 ── */ .rpbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0 2px; font-size: 12px; } .rpbar .rptitle { color: #8ab8a0; } .rpbar .rpbal { color: #e8d27a; } .teambadge { background: #1c6b32; color: #eafff0; font-size: 11px; padding: 2px 6px; } .rpgain { margin: 12px auto 4px; color: #e8d27a; font-size: 15px; } .profile { text-align: left; } .profile .phd { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #234d2c; padding-bottom: 10px; } .profile .pid b { color: #eafff0; font-size: 15px; } .profile .pid span { display: block; font-size: 11px; color: #8aa896; } .profile .pbal { color: #e8d27a; font-size: 20px; text-align: right; } .profile .pbal small { font-size: 10px; color: #8aa896; display: block; } .psec { margin-top: 13px; } .plbl { font-size: 11px; color: #7fae8f; margin-bottom: 7px; } .teamline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #dfe9e2; } .ghost.sm { margin-left: auto; padding: 4px 10px; font-size: 12px; } .achwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .achcell { background: #0e1a13; border: 1px solid #233c2c; padding: 8px 4px; text-align: center; color: #6f8a76; } .achcell.on { border-color: #2f6b44; color: #cfe3d6; } .achcell .ae { display: block; font-size: 20px; opacity: .5; } .achcell.on .ae { opacity: 1; } .achcell b { font-size: 11px; font-weight: normal; } .uptree { display: flex; flex-direction: column; gap: 6px; } .uprow { display: flex; align-items: center; gap: 10px; background: #0e1a13; border: 1px solid #233c2c; padding: 9px 11px; } .uprow.done { border-color: #2f6b44; } .uptxt { flex: 1; } .uptxt b { color: #dfe9e2; font-size: 13px; } .uptxt span { display: block; font-size: 11px; color: #8aa896; } .uptag { color: #7fe0a0; font-size: 12px; } .buybtn { color: #e8d27a; } .teampicks { max-height: 340px; overflow: auto; display: flex; flex-direction: column; gap: 6px; } .pick.sm { padding: 8px 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; text-align: left; } /* PWA 安裝提示 */ .pwa-install { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 9999; background: #123018; border: 2px solid #4cc878; color: #eafff0; font-family: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer; display: flex; align-items: center; gap: 12px; max-width: 92vw; } .pwa-install .pwa-x { color: #8aa896; font-size: 16px; line-height: 1; } /* 閉環 CTA 按鈕 */ .loop-cta { display: block; text-align: center; margin: 18px auto 0; max-width: 560px; padding: 13px 16px; background: #1c6b32; color: #eafff0; text-decoration: none; border: 2px solid #4cc878; font-size: 14px; } .loop-cta:hover { background: #247a3a; } body.retro #see-odds-btn { background: #1c6b32; color: #eafff0; border: 2px solid #4cc878; } body.retro #see-odds-btn:hover { background: #247a3a; } /* 閉環 CTA 排列 */ .loop-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .loop-cta-row .loop-cta { margin: 8px 0 0; flex: 1; min-width: 240px; } .loop-cta.sec { background: #0e2114; color: #cfe8d6; border-color: #2a5234; } .loop-cta.sec:hover { background: #123018; border-color: #4cc878; } /* ── 首頁「你的戰隊」看板 ── */ .team-banner { max-width: 480px; margin: 0 auto 6px; } .tb-info { text-align: center; margin-top: 2px; min-height: 22px; } .tb-head { font-size: 15px; color: #eafff0; display: flex; gap: 8px; align-items: center; justify-content: center; } .tb-head .tb-mine { font-size: 10px; color: #7fae8f; border: 1px solid #2a4a35; padding: 1px 5px; } .tb-stats { display: flex; gap: 20px; justify-content: center; margin-top: 8px; } .tb-stat { display: flex; flex-direction: column; } .tb-stat b { font-size: 18px; color: #5ef38c; } .tb-stat i { font-style: normal; font-size: 10px; color: #8aa896; } .tb-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #7fae8f; text-decoration: none; } .tb-link:hover { color: #5ef38c; } .tb-pick { background: #0e2114; border: 1px solid #2a5234; padding: 11px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; margin: 2px auto 0; } .tb-pick .tb-name { color: #eafff0; font-size: 14px; } .tb-pick .tb-sub { color: #8aa896; font-size: 11px; } /* ===== UI 回饋修正輪 ===== */ /* ① 選隊改網格,去掉醜滾軸 */ .teampicks { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .pick.sm { flex-direction: column; text-align: center; gap: 5px; padding: 11px 6px; } /* ③ 首頁字放大 */ body.retro .cmenu .citem .t-title { font-size: 19px; } body.retro .cmenu .citem .t-sub { font-size: 13px; } .tb-head { font-size: 17px; } .tb-stat b { font-size: 21px; } .tb-stat i { font-size: 11px; } .tb-link { font-size: 13px; } .menu-sub { font-size: 14px; } /* ④ 選中:閃爍 > 取代亮框 */ @keyframes plblink { 50% { opacity: 0; } } body.retro .cmenu .citem { padding-left: 30px; } body.retro .cmenu .citem::before { content: none !important; } body.retro .cmenu .citem.sel { border-color: #234d2c; background: #0e1f14; } body.retro .cmenu .citem.sel::before { content: ">" !important; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #5ef38c; font-weight: bold; animation: plblink 1.05s steps(1, end) infinite; } /* ⑤ 桌面頁首集中(內容置中、底線仍滿版)*/ body.retro .plbar { padding: 8px max(14px, calc((100% - 800px) / 2)); } /* ② 統一左上返回鈕 */ .topback { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: #7fae8f; font: inherit; font-size: 13px; cursor: pointer; padding: 2px 0 12px; } .topback:hover { color: #eafff0; }