/* 足一把 —— 样式 美术方向:排版驱动的极简。不用纹理/渐变/发光/emoji 图标,层次全靠字号、字距、留白。 三套配色由 上的 class 切换(bg-sand / bg-mint / bg-green),默认暖米灰, 玩家在页面下方自己选,选择写进 localStorage(见 game.js 的 applyTheme)。 两条贯穿全局的规矩: 1) 强调色(--accent)只出现在「选中的 tab」和「主按钮」两处,所以每屏视线终点唯一。 暗色主题下它是象牙白,亮色主题下自动变成近黑 —— 主按钮因此在亮色下是黑底白字。 2) 答错的灰格(--x)始终只比底色差一点点。原来它比底色亮一大截,十格里七格在抢注意力; 压平之后绿和黄自己就浮出来了,一眼能看出进展。 3) 棋盘上一行里的字只有一个颜色(--cell-on),换状态只换底色。 ⚠️ 这条决定了填色的取值范围,别反过来先挑好看的绿黄再配字: 亮色主题统一深字 → 绿必须亮到深字也有 4.5:1(所以是 #5A9054 这种中绿,不是深绿); 墨绿主题统一浅字 → 黄必须压到浅字也有 4.5:1(所以是 #8A6624 这种暗赭,不是亮琥珀)。 改任何一个判定色之前,先跑一遍对比度再说。 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Segoe UI", "Microsoft YaHei", sans-serif; } /* ---------- 暖米灰(默认) ---------- 裸 html 选择器给默认值。bg-green / bg-mint 的特异性(0,1,1)高于它(0,0,1), 所以显式选了别的主题时不会被这里覆盖,与规则先后无关。 */ html, html.bg-sand { --ink:#EDE8DF; --panel:#F9F6F1; --panel-2:#F3EFE7; --line:#C9BFA9; --line-soft:#E5DFD3; --line-strong:#B4A88E; --text:#1C1A15; --muted:#535045; --faint:#676358; /* 判定色:高饱和亮色填充 + 统一深字(--cell-on)。见文件头第 3 条 */ --cell-on:#1C1A15; --x:#B8AE99; /* 中调暖灰,是一块实砖不是背景 */ --g:#6FBE5A; /* 草绿 */ --y:#EAB43C; /* 明黄 */ /* 球员名那块砖:整行最亮的一块 + 一圈描边,和右边九块填色砖区分开 */ --name-bg:#FFFFFF; --name-line:#CEC5B0; /* --surface:通用面板底(卡片/输入框/弹窗)。--name-bg 只给棋盘那块名字砖用 */ --surface:#FFFFFF; --btn-bg:#FFFFFF; --btn-on:#1C1A15; --accent:#6FBE5A; --accent-on:#14210E; /* 主按钮/选中 tab:亮绿,和"正确"同一个色 */ --warn:#C2521E; --shadow:rgba(90,80,60,.16); } /* ---------- 墨绿 ---------- */ html.bg-green { --ink:#0E100F; --panel:#151816; --panel-2:#1A1E1B; --line:#333A34; --line-soft:#1D211E; --line-strong:#414A42; --text:#EDEFEA; --muted:#9CA49D; --faint:#848C85; /* 近黑底上摆一排亮砖 —— 比暗砖更像记分牌,字也从 4.5 提到 7+ */ --cell-on:#12160E; --x:#7E877F; --g:#4FB56A; --y:#D9A63F; --name-bg:#DDE4DE; --name-line:#B4BEB6; --surface:#151816; /* 暗色主题:面板跟着变暗,字才看得见 */ --btn-bg:#313931; --btn-on:#EDEFEA; --accent:#4FB56A; --accent-on:#0E1A10; --warn:#E08A4E; --shadow:rgba(0,0,0,.55); } /* ---------- 浅草绿 ---------- */ html.bg-mint { --ink:#F0F4EF; --panel:#FFFFFF; --panel-2:#F8FAF7; --line:#C6CFC2; --line-soft:#E9EFE7; --line-strong:#B1BCAD; --text:#171A15; --muted:#525A4F; --faint:#5E655A; --cell-on:#171A15; --x:#B4BDB1; --g:#5FB86E; --y:#E3B03A; --name-bg:#FFFFFF; --name-line:#C1CBBE; --surface:#FFFFFF; --btn-bg:#FFFFFF; --btn-on:#171A15; --accent:#5FB86E; --accent-on:#0F1B0F; --warn:#BE521F; --shadow:rgba(40,60,40,.16); } html, body { background: var(--ink); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; line-height: 1.5; min-height: 100%; } body { padding-bottom: 40px; } body.view-home { padding-bottom: 0; } .hidden { display: none !important; } /* ============================================================ 顶栏 标题用宽字距 + 一行拉丁副题做识别度,图标按钮全部改成文字 (emoji 在各系统渲染不一致,是廉价感的主要来源)。 点标题回首页。 ============================================================ */ .topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1320px; margin: 0 auto; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); } .brand { display: flex; flex-direction: column; gap: 3px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--font); color: var(--text); } .brand .cn { font-size: 1.02rem; font-weight: 600; letter-spacing: .3em; } .brand .en { font-size: .6rem; font-weight: 500; letter-spacing: .26em; color: var(--faint); } .brand:hover .en { color: var(--muted); } .topbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; } /* 姊妹站入口(两个)。margin-right:auto —— auto 外边距先吃掉所有剩余空间, 所以它紧贴在标题右边,右侧那组文字按钮照样被推到最右,不受 space-between 影响。 */ .brand-links { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 12px; min-width: 0; } /* 姊妹站入口。这里破了「强调色只给选中 tab 和主按钮」的规矩(见文件头第 1 条)—— 顶栏本来没有强调色元素,这两块实心色在这里不和别处抢视线。 ⚠️ 两个入口分量相同(都是实心 + 呼吸圆点),这是项目所有者定的: 试过把老的降成描边款,被否掉了。别再改成一主一次。 小圆点会呼吸,把眼睛勾过来;prefers-reduced-motion 下停掉。 */ .brand-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--accent); color: var(--accent-on); font-size: .72rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap; text-decoration: none; box-shadow: 0 2px 10px var(--shadow); transition: transform .15s, box-shadow .15s, filter .15s; } .brand-link:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 4px 14px var(--shadow); } .brand-link:active { transform: translateY(0); } .bl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-on); opacity: .85; animation: bl-pulse 1.9s ease-in-out infinite; } @keyframes bl-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .bl-dot { animation: none; opacity: .85; } .brand-link:hover { transform: none; } } .topbar-side { display: flex; gap: 2px; } .icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--font); font-size: .76rem; letter-spacing: .08em; padding: 8px 10px; border-radius: 6px; transition: color .15s, background .15s; } .icon-btn:hover { color: var(--text); background: var(--panel-2); } /* ============================================================ 首页 桌面首屏采用纵向信息结构:主视觉 → 四个模式 → 身份与配色。 1440×900 下不滚动;窄屏按两列/单列自然向下展开。 ============================================================ */ .home { max-width: 1320px; margin: 0 auto; padding: 28px 20px 0; } .home-hero { min-height: 366px; border: 1px solid rgba(237,232,223,.16); border-radius: 12px; background-color: #073b2c; background-image: url("assets/home-hero-pitch-cards.webp"); background-size: cover; background-position: center bottom; color: #f7f3e9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 26px 28px; overflow: hidden; } .hero-score { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; color: rgba(247,243,233,.56); font-size: .64rem; letter-spacing: .1em; } .hero-score strong { color: #f7f3e9; border: 1px solid rgba(247,243,233,.14); border-radius: 5px; padding: 3px 10px 4px; font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: .14em; font-variant-numeric: tabular-nums; } .hero-kicker { color: #b8eb35; font-size: .66rem; font-weight: 600; letter-spacing: .2em; margin-bottom: 9px; } .home-hero h1 { font-size: clamp(2.75rem, 5vw, 4.8rem); line-height: 1.03; letter-spacing: .035em; font-weight: 800; text-wrap: balance; } .home-hero h1 em { color: #f7f3e9; font-style: normal; } .hero-copy { margin-top: 14px; color: rgba(247,243,233,.8); font-size: .86rem; letter-spacing: .035em; } .mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 18px; } .mode-card { display: grid; grid-template-columns: minmax(0, 1fr) 76px; text-align: left; background: var(--surface); border: 1px solid var(--line-strong); border-left: 6px solid var(--accent); min-height: 132px; border-radius: 7px; padding: 12px 15px 12px 20px; -webkit-mask: radial-gradient(circle at 100% 10px, transparent 0 3px, #000 3.6px) 0 0 / 100% 20px repeat-y; mask: radial-gradient(circle at 100% 10px, transparent 0 3px, #000 3.6px) 0 0 / 100% 20px repeat-y; cursor: pointer; font-family: var(--font); color: var(--text); box-shadow: none; transition: border-color .16s, transform .16s, background-color .16s; } .mode-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 3%, var(--surface)); transform: translateY(-2px); } .mode-card[disabled] { cursor: default; opacity: .5; } .mode-card[disabled]:hover { border-color: var(--line-strong); border-left-color: var(--accent); transform: none; } .mc-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 22px; } .mc-title { font-size: 1.16rem; font-weight: 760; letter-spacing: .045em; margin-bottom: 5px; } .mc-title .qual { font: inherit; color: inherit; letter-spacing: inherit; } .mc-desc { color: var(--muted); font-size: .72rem; line-height: 1.55; letter-spacing: .02em; } .mc-stub { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0; border-left: 1px dashed color-mix(in srgb, var(--line-strong) 75%, transparent); } .mc-arrow { color: var(--text); font-style: normal; font-size: 1.65rem; line-height: 1; transition: transform .18s; } .mode-card:hover .mc-arrow { transform: translateX(3px); } /* 配色选择(给玩家的开关) */ .theme-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 32px auto 0; padding: 0 16px; } .theme-lbl { font-size: .63rem; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; margin-right: 2px; } .sw { display: inline-flex; align-items: center; gap: 7px; background: var(--btn-bg); border: 1px solid var(--line-strong); color: var(--text); font-family: var(--font); font-size: .72rem; letter-spacing: .06em; padding: 6px 13px 6px 10px; border-radius: 99px; cursor: pointer; transition: all .15s; } .sw i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(140,140,140,.5); } .sw-sand i { background: #EDE8DF; } .sw-green i { background: #0E100F; } .sw-mint i { background: #F0F4EF; } .sw:hover { border-color: var(--muted); } /* 描边提重之后三个胶囊长得一样了,选中态改成"双线圈"(inset 再描一道), 不引入新颜色也能一眼看出选了哪个 */ .sw.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 600; } .mode-card:focus-visible, .mini-btn:focus-visible, .sw:focus-visible, .icon-btn:focus-visible, .brand-link:focus-visible, .brand:focus-visible { outline: 3px solid #b8eb35; outline-offset: 3px; } body.view-home > .game-theme-row { margin-top: 14px; } body.view-home .site-footer { margin-top: 6px; padding-top: 8px; } /* ============================================================ 模式切换 / 状态行 / 搜索 tab 从填色胶囊改成下划线 —— 更像栏目,安静得多 ============================================================ */ .mode-tabs { display: flex; justify-content: center; gap: 30px; max-width: 1000px; margin: 0 auto; border-bottom: 1px solid var(--line-soft); } .tab { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--font); font-size: .86rem; letter-spacing: .06em; padding: 15px 2px 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } .status-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; padding: 0 16px; color: var(--muted); font-size: .78rem; letter-spacing: .06em; min-height: 1.6em; } .mode-note { text-align: center; color: var(--faint); font-size: .72rem; letter-spacing: .06em; margin: 6px 0 0; } .mode-note strong { color: var(--muted); font-weight: 600; } /* 无限模式题库筛选。联赛模式只改变抽题和搜索范围,不进入现有总榜。 */ .league-filter { display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap; margin: 12px auto 0; padding: 0 16px; } .league-filter-label { color: var(--faint); font-size: .7rem; letter-spacing: .1em; margin-right: 2px; } .league-check { display: inline-flex; align-items: center; gap: 6px; background: var(--btn-bg); border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; padding: 6px 13px; font-family: var(--font); font-size: .72rem; letter-spacing: .05em; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; } .league-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; } .league-check:hover { color: var(--text); border-color: var(--accent); } .league-check.active { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; } /* 可交互控件用比容器更重的一级描边(--line-strong)+ 实底 + 深色文字。 原来是"透明底 + --line 描边(对底色只有 1.2)+ 灰字",读起来就是一行普通文字, 完全不像按钮 —— 放弃看答案 / 换一题 / 改名 / 看榜 都吃了这个亏。 */ .mini-btn { background: var(--btn-bg); border: 1px solid var(--line-strong); color: var(--btn-on); border-radius: 6px; padding: 6px 13px; font-family: var(--font); font-size: .76rem; font-weight: 500; letter-spacing: .06em; cursor: pointer; transition: all .15s; } .mini-btn:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* 棋盘上方的间距挂在 #main-area 上,不挂在搜索框下面 —— 本局结束时搜索框整条会收起来,间距不能跟着一起没了 */ .search-wrap { position: relative; max-width: 420px; margin: 22px auto 4px; padding: 0 16px; } #main-area { padding-top: 26px; } #search { width: 100%; padding: 13px 15px; font-size: .92rem; font-family: var(--font); background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 7px; outline: none; transition: border-color .15s; } #search::placeholder { color: var(--faint); } #search:focus { border-color: var(--muted); } #search:disabled { opacity: .6; cursor: not-allowed; } .suggestions { position: absolute; left: 16px; right: 16px; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; max-height: 290px; overflow-y: auto; z-index: 50; box-shadow: 0 10px 28px var(--shadow); } .suggestion { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .suggestion:hover, .suggestion.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); } .suggestion .cn { font-weight: 600; letter-spacing: .02em; } .suggestion .en { color: var(--faint); font-size: .78rem; } /* ============================================================ 棋盘 格子去边框、gap 收到 4px、圆角 6px —— 一行拼成整条,不再是十个独立方框。 首列 sticky:横滑时球员名钉在左边不动(右侧一道投影表示它浮在上层)。 绿格用浅字、黄格用深字 —— 两种状态除了色相还差一个明度,扫一眼就分得开。 ============================================================ */ .board-outer { position: relative; max-width: 1000px; margin: 0 auto; } .board-wrap { overflow-x: auto; padding: 0 16px 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .board-wrap::-webkit-scrollbar { height: 6px; } .board-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .scroll-hint { display: none; text-align: center; color: var(--faint); font-size: .74rem; letter-spacing: .08em; margin-bottom: 10px; } .scroll-fade { position: absolute; top: 0; right: 0; bottom: 6px; width: 44px; pointer-events: none; background: linear-gradient(to left, var(--ink) 8%, rgba(0,0,0,0)); } .board { min-width: 900px; } .row { display: grid; grid-template-columns: 184px repeat(9, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; } .header-row .cell { background: none; min-height: 0; padding: 0 4px 9px; font-size: .72rem; font-weight: 500; letter-spacing: .14em; color: var(--faint); } .header-row .name-cell { padding-left: 12px; text-align: left; align-items: flex-start; background: var(--ink); /* sticky 需要不透明底,否则横滑时会透出下面的格子 */ border: none; box-shadow: none; } .cell { background: var(--x); color: var(--cell-on); border-radius: 6px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: .85rem; padding: 5px 6px; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .cell .sub { font-size: .7rem; letter-spacing: .04em; opacity: .72; margin-top: 2px; } /* 球员名格:它是一块独立的砖,不是页面背景也不是"又一块灰砖"。 原来用 --panel-2,和答错的灰格只差几个色阶(墨绿主题下差 6 个),糊成一片。 现在给它整行最突出的底色 + 一圈描边 —— 右边九块是纯色填充、它是描边砖, 两种做法不同,所以一眼就分得出来;顺便满足 sticky 需要不透明底。 */ .name-cell { background: var(--name-bg); border: 1px solid var(--name-line); color: var(--cell-on); align-items: flex-start; text-align: left; padding-left: 11px; padding-right: 11px; gap: 1px; position: sticky; left: 0; z-index: 2; box-shadow: 14px 0 14px -13px var(--shadow); } .name-cell > span:first-child { font-size: .9rem; font-weight: 600; letter-spacing: .02em; } /* 英文名和其他格子的副行(大洲)用同一种做法:同一个文字色降透明度, 这样整行的字仍然只有一个颜色 */ .name-cell .sub { font-size: .7rem; letter-spacing: .02em; opacity: .72; margin-top: 0; } /* 三种状态只换底色,不换文字色 —— 一行里所有格子的字必须是同一个颜色 */ .cell.g { background: var(--g); } .cell.y { background: var(--y); } .cell.x { background: var(--x); } /* 猜中的那一行,名字砖也转绿(整行一片绿是"赢了"最直接的信号) */ .name-cell.g { background: var(--g); border-color: var(--g); } /* 对战:对手棋盘的球员名打码 */ .cell.masked { letter-spacing: .1em; font-size: .78rem; } /* 翻转揭示动画 */ .cell.reveal { animation: flipIn .45s ease both; } @keyframes flipIn { 0% { transform: rotateX(90deg); opacity: .4; } 100% { transform: rotateX(0deg); opacity: 1; } } /* 前庭敏感用户:关掉翻转和倒计时弹跳,内容照常显示 */ @media (prefers-reduced-motion: reduce) { .cell.reveal, .battle-countdown.pop { animation: none; } } /* ---------- 图例 ---------- */ .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 26px auto 0; color: var(--faint); font-size: .76rem; letter-spacing: .06em; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; } .dot.g { background: var(--g); } .dot.y { background: var(--y); } .dot.x { background: var(--x); } /* ============================================================ 联网对战面板 ============================================================ */ .battle-panel { max-width: 720px; margin: 20px auto 0; padding: 0 16px; } .battle-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 20px 18px; text-align: center; } .battle-card h3 { font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; margin-bottom: 14px; } .battle-card .muted-line { color: var(--muted); font-size: .78rem; line-height: 1.8; letter-spacing: .04em; margin: 6px 0; } .room-code { font-size: 2rem; font-weight: 600; letter-spacing: .34em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .battle-timer { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; } .battle-timer.urgent { color: var(--warn); } .battle-countdown { font-size: 3rem; font-weight: 600; margin: 8px 0; line-height: 1.1; font-variant-numeric: tabular-nums; } .battle-countdown.pop { animation: cdPop .32s cubic-bezier(.22, 1, .36, 1); } @keyframes cdPop { 0% { transform: scale(1.5); opacity: .25; } 100% { transform: scale(1); opacity: 1; } } .battle-sub { color: var(--faint); font-size: .78rem; letter-spacing: .06em; margin-top: 4px; } .battle-score-big { font-size: 1.5rem; font-weight: 600; letter-spacing: .1em; margin: 8px 0; font-variant-numeric: tabular-nums; } .battle-hist { font-size: .78rem; color: var(--muted); line-height: 1.9; margin: 8px 0; letter-spacing: .04em; } .battle-hist .win { color: var(--g); font-weight: 600; } /* 对战大厅的房间题库选择。和无限模式的 .league-check 同一套药丸视觉, 只是这里是单选、用按钮实现(选中态靠 .active) */ .battle-pool { margin-top: 16px; } .battle-pool .bp-label { color: var(--faint); font-size: .7rem; letter-spacing: .1em; margin-bottom: 8px; } .battle-pool .bp-tabs { display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap; } .bp-pill { background: var(--btn-bg); border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; padding: 6px 13px; font-family: var(--font); font-size: .72rem; letter-spacing: .05em; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; } .bp-pill:hover { color: var(--text); border-color: var(--accent); } .bp-pill.active { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; } .battle-row-buttons { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .battle-join-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; } #room-input { width: 132px; padding: 11px; text-align: center; text-transform: uppercase; letter-spacing: .3em; font-size: 1rem; font-family: var(--font); border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--text); outline: none; } #room-input:focus { border-color: var(--muted); } .opp-progress { margin-top: 12px; font-size: .76rem; color: var(--muted); letter-spacing: .06em; text-align: center; } .opp-area { max-width: 1000px; margin: 26px auto 0; } .opp-title { text-align: center; color: var(--faint); font-size: .76rem; letter-spacing: .1em; margin-bottom: 10px; } .opp-title span { color: var(--muted); font-weight: 600; } .battle-warn { color: var(--warn); font-size: .78rem; letter-spacing: .04em; margin-top: 8px; } .battle-down { border: 1px solid var(--warn); border-radius: 8px; padding: 11px 13px; margin: 12px 0; text-align: left; } .battle-down > strong { color: var(--warn); } .battle-down .muted-line { margin: 6px 0 0; text-align: left; } .battle-down .battle-row-buttons { margin-top: 10px; justify-content: flex-start; } .battle-error { color: var(--warn); font-size: .78rem; letter-spacing: .04em; margin-top: 10px; } /* ============================================================ 弹窗 ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .modal { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 26px 24px 22px; box-shadow: 0 14px 44px var(--shadow); } .modal h2 { margin-bottom: 14px; font-size: 1.05rem; font-weight: 600; letter-spacing: .1em; } .modal h3 { margin: 18px 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; } .modal p, .modal li { font-size: .84rem; line-height: 1.8; margin-bottom: 8px; color: var(--muted); } .modal li strong, .modal p strong { color: var(--text); font-weight: 600; } .modal ul { padding-left: 18px; margin-bottom: 8px; } .modal .muted { color: var(--faint); font-size: .8rem; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--faint); font-size: 1rem; cursor: pointer; line-height: 1; padding: 4px; } .modal-close:hover { color: var(--text); } .chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .76rem; } /* 帮助弹窗里的三个小色块,和棋盘同一套做法:只换底色,字色统一 */ .chip { color: var(--cell-on); } .chip.g { background: var(--g); } .chip.y { background: var(--y); } .chip.x { background: var(--x); } /* 统计 */ .stats-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .stat-box .num { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; } .stat-box .lbl { font-size: .68rem; color: var(--faint); letter-spacing: .1em; } .stats-dist .dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* 序号列定宽:不然两位数的"10"会把那一行的条子整体推右边一截 */ .stats-dist .dist-row > span:first-child { width: 20px; flex: 0 0 auto; text-align: right; color: var(--faint); } .dist-bar { background: var(--g); color: var(--cell-on); border-radius: 4px; height: 18px; min-width: 24px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: .7rem; } .dist-bar.zero { background: var(--x); color: var(--cell-on); } /* 结算 */ .result-answer { border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 12px 0 16px; font-size: .8rem; line-height: 1.9; color: var(--muted); } .result-answer .big { font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; color: var(--text); margin-bottom: 10px; } /* 属性排成两列的键值表:标签浅、值深,一眼能扫到自己猜岔的那一项 */ .result-answer .kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; line-height: 1.7; } .result-answer .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 3px 0; } /* 属性是奇数条,落单的最后一条铺满整行,免得右边空一格 */ .result-answer .kv:last-child:nth-child(odd) { grid-column: 1 / -1; } .result-answer .kv .k { color: var(--faint); letter-spacing: .06em; flex: 0 0 auto; } .result-answer .kv .v { color: var(--text); text-align: right; } .result-actions { display: flex; flex-wrap: wrap; gap: 9px; } .action-btn { flex: 1; padding: 11px 14px; font-size: .84rem; letter-spacing: .06em; font-family: var(--font); border-radius: 7px; border: 1px solid var(--line-strong); background: var(--btn-bg); color: var(--btn-on); cursor: pointer; white-space: nowrap; transition: all .15s; } .action-btn:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .action-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600; } .action-btn.primary:hover { filter: brightness(1.08); } .action-btn[disabled] { opacity: .5; cursor: default; filter: none; } .share-toast { margin-top: 10px; text-align: center; color: var(--g); font-size: .78rem; letter-spacing: .06em; } /* 更新公告 */ .news-date { color: var(--faint); font-size: .75rem; letter-spacing: .1em; margin: -8px 0 14px; } /* 刷新提示。必须写成 .modal .news-refresh(0-2-0)才压得过上面的 .modal p(0-1-1), 光写 .news-refresh 的话字号和颜色会被压回正文那一档,写在后面也没用 —— 权重不看先后。 */ .modal .news-refresh { margin: 0 0 14px; padding: 11px 14px; border-radius: 7px; text-align: center; font-size: .92rem; font-weight: 600; letter-spacing: .06em; color: var(--accent-on); background: var(--accent); animation: refresh-pulse 1.9s ease-out infinite; } @keyframes refresh-pulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .modal .news-refresh { animation: none; } } /* 常驻置顶块(新域名 / QQ 群)。 高亮靠左侧色条 + 浅底,不用 --accent 填充 —— 上面的刷新提示已经是整个弹窗里唯一的实心强调块, 再来一块同分量的就没有主次了。 */ .news-pin { margin: 0 0 14px; padding: 10px 14px; background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent); border-radius: 7px; } /* 写成 .modal .news-pin-row(0-2-0)才压得过 .modal p(0-1-1),同 .news-refresh 那条注释 */ .modal .news-pin-row { margin: 0; font-size: .88rem; line-height: 1.95; font-weight: 600; color: var(--text); } .news-pin-k { display: inline-block; min-width: 4.2em; color: var(--faint); font-weight: 400; font-size: .76rem; letter-spacing: .08em; } .news-pin a { color: inherit; } /* 3.2rem = .news-pin-k 的 4.2em × .76rem,和上一行的值对齐 */ .news-pin-note { display: block; margin-left: 3.2rem; color: var(--faint); font-size: .74rem; font-weight: 400; letter-spacing: 0; } .news-list { padding-left: 18px; margin: 0; } .news-list li { font-size: .84rem; line-height: 1.8; margin-bottom: 8px; } .news-link { margin-bottom: 16px; } /* 昵称 */ .name-edit-row { display: flex; gap: 8px; margin-top: 12px; } #name-input { flex: 1; min-width: 0; padding: 11px 13px; font-size: .95rem; font-family: var(--font); background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; outline: none; } #name-input:focus { border-color: var(--muted); } .name-edit-row .action-btn { flex: 0 0 auto; } /* 天梯排行榜 */ .rank-tabs { display: flex; gap: 26px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); } .rank-league-tabs { display: flex; gap: 16px; margin: -4px 0 14px; border-bottom: 1px solid var(--line-soft); } .rank-league-tabs .tab { font-size: .78rem; padding: 9px 2px 8px; } /* ============================================================ 对战历史 列表行是整行可点的按钮;详情里按局回看双方猜测,棋盘复用主棋盘样式。 modal-wide 只加宽弹窗,不碰其它弹窗的 460px 上限。 ============================================================ */ .modal-wide { max-width: 880px; } .history-toolbar { display: flex; align-items: center; margin-bottom: 10px; } .history-toolbar .action-btn { padding: 6px 12px; font-size: .78rem; } .history-summary { font-size: .86rem; } .history-list { display: flex; flex-direction: column; gap: 8px; } .history-item { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 12px; cursor: pointer; font-family: var(--font); font-size: .84rem; color: var(--text); text-align: left; transition: border-color .15s; } .history-item:hover { border-color: var(--accent); } .history-item .hi-time { color: var(--faint); font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .history-item .hi-opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 题库标签:只有小题库的场次才有,全部球员那些行不挂 */ .history-item .hi-pool { flex: none; font-size: .72rem; color: var(--muted); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .history-item .hi-score { font-variant-numeric: tabular-nums; font-weight: 600; } .history-item .chip { font-size: .74rem; } .history-item .hi-elo { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--muted); } .history-round-tabs { display: flex; gap: 8px; margin: 12px 0 4px; border-bottom: 1px solid var(--line-soft); } .history-round-tabs .tab { font-size: .78rem; padding: 8px 2px 7px; } .history-round-title { font-size: .86rem; } .history-side-title { margin: 12px 0 6px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; color: var(--muted); } .history-empty { padding: 4px 0 8px; } .history-board { min-width: 780px; } .rank-me { border: 1px solid var(--line); border-radius: 7px; padding: 11px 13px; font-size: .78rem; color: var(--muted); margin-bottom: 14px; line-height: 1.6; letter-spacing: .04em; } .rank-me strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); font-size: .82rem; } .rank-row:last-child { border-bottom: none; } .rank-row .rk { width: 24px; flex: 0 0 auto; color: var(--faint); font-size: .76rem; text-align: right; font-variant-numeric: tabular-nums; } .rank-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .rank-row .elo { flex: 0 0 auto; width: 48px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .rank-row .sub2 { flex: 0 0 auto; width: 96px; text-align: right; color: var(--faint); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .elo-line { text-align: center; margin: 10px 0; font-size: .82rem; color: var(--muted); letter-spacing: .04em; } .elo-line strong { color: var(--text); font-variant-numeric: tabular-nums; } .site-footer { text-align: center; color: var(--faint); font-size: .74rem; letter-spacing: .08em; line-height: 1.9; margin: 40px auto 0; padding-top: 22px; max-width: 940px; border-top: 1px solid var(--line-soft); } .site-footer a { display: inline-block; margin-top: 3px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); word-break: break-all; } .site-footer a:hover { color: var(--text); } /* 爱发电入口。胶囊直接复用顶栏姊妹站入口的 .brand-link + .bl-dot(实心绿 + 呼吸圆点), 这样两处观感一致,三套主题也自动跟着 --accent 走,不用另配一套颜色。 ⚠️ .site-footer a 的特异性是 (0,1,1),压得过 .brand-link 的 (0,1,0): 不显式覆盖的话胶囊会继承 display:inline-block + border-bottom, 变成"绿色块底下拖一条横线",而且圆点和文字不再居中对齐。 */ /* PC 端爱发电和两条署名并成一排(项目所有者定的)。窄屏靠 flex-wrap 自己折成三块, 别改成 nowrap —— 360px 下挤一行会把页脚撑出横向滚动。 row-gap 14px 就是原来 .credit-2 的 margin-top:折行后两条署名之间还是那个留白, 不隔开的话四行同字号同字距会糊成一坨,看不出是两个人。 */ .foot-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 34px; } /* 网址和胶囊是一个整体,折行时必须一起走,所以自己再包一层 inline-flex。 */ .afd-row { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; } .credit { display: block; } /* .site-footer a 给的 margin-top:3px 在 flex 行里会把网址顶得比胶囊低半格,清掉。 */ .site-footer .afd-url { margin-top: 0; } .site-footer .afd-pill { display: inline-flex; margin-top: 0; border-bottom: 0; color: var(--accent-on); } .site-footer .afd-pill:hover { color: var(--accent-on); } /* ============================================================ 移动端 ============================================================ */ @media (max-width: 640px) { .topbar { padding: 15px 14px 13px; } .brand .cn { font-size: .92rem; letter-spacing: .24em; } .brand .en { font-size: .55rem; letter-spacing: .14em; } .icon-btn { font-size: .74rem; padding: 8px 7px; } /* 姊妹站入口有两个之后,窄屏一行塞不下「标题+两个入口+四个按钮」了: 整组折到第二行占满宽度。第一行就还原成加入口之前的样子(标题 + 四个按钮)。 */ .topbar { flex-wrap: wrap; row-gap: 10px; padding-bottom: 11px; } .brand-links { order: 3; width: 100%; margin: 0; justify-content: center; gap: 7px; } .brand-link { font-size: .66rem; padding: 5px 10px; gap: 5px; letter-spacing: .02em; } .bl-dot { width: 5px; height: 5px; } .home { padding: 22px 14px 0; } .mode-grid { gap: 9px; } .mode-card { padding: 15px 14px 12px; border-radius: 9px; } .mc-top { margin-bottom: 12px; } .mc-title { font-size: .95rem; letter-spacing: .05em; } .mc-tag { font-size: .6rem; padding: 2px 6px; letter-spacing: .1em; } .mode-tabs { gap: 18px; } .tab { font-size: .8rem; padding: 13px 2px 11px; } .league-filter { gap: 6px; margin-top: 10px; padding: 0 12px; } .league-check { padding: 6px 10px; gap: 5px; } .search-wrap { margin: 16px auto 2px; padding: 0 14px; } #main-area { padding-top: 20px; } /* 俱乐部那列单独放宽:「非五大联赛」「皇家马德里」都是 5 个字, 等宽的话会被拆成 4+1 折行,一格里挤两行很难看 */ .board { min-width: 760px; } .row { grid-template-columns: 122px repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr) repeat(6, minmax(0, 1fr)); gap: 3px; margin-bottom: 3px; } .header-row .cell { font-size: .66rem; letter-spacing: .04em; } .cell { min-height: 46px; font-size: .76rem; border-radius: 5px; } .name-cell { padding-left: 10px; } .name-cell > span:first-child { font-size: .8rem; } .name-cell .sub { font-size: .66rem; } .board-wrap { padding: 0 12px 4px; } .scroll-hint { display: block; } .legend { font-size: .7rem; gap: 14px; margin-top: 20px; } .battle-panel { padding: 0 14px; } .stats-summary { gap: 6px; } .stat-box .num { font-size: 1.2rem; } } /* 手机竖屏。入口折到第二行以后,第一行只剩标题 + 四个按钮, FOOTBALL GUESS 那行(顶栏最宽的一块)不用再让位了。 */ @media (max-width: 460px) { .icon-btn { padding: 8px 5px; } } /* 340 以下(iPhone SE 那一档)再挤一次:两个入口并排要占满这一行 */ @media (max-width: 340px) { .brand .cn { letter-spacing: .12em; } .brand-links { gap: 6px; } .brand-link { font-size: .62rem; padding: 4px 8px; gap: 4px; } .icon-btn { font-size: .7rem; padding: 8px 4px; } } /* 首页在平板宽度改为两列。局内样式不受这组断点影响。 */ @media (max-width: 1050px) { .home { max-width: 920px; } .home-hero { min-height: 320px; } .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mode-card { min-height: 126px; grid-template-columns: minmax(0, 1fr) 72px; } } /* 常见 1280×720 / 1366×768 笔记本:仍保持四列与单屏,只收紧纵向节奏。 */ @media (min-width: 1051px) and (max-height: 820px) { .topbar { padding-top: 12px; padding-bottom: 10px; } .home { padding-top: 14px; } .home-hero { min-height: 255px; padding-top: 20px; padding-bottom: 19px; } .hero-score { margin-bottom: 5px; } .hero-kicker { margin-bottom: 5px; } .home-hero h1 { font-size: clamp(2.75rem, 4.2vw, 3.55rem); } .hero-copy { margin-top: 8px; } .mode-grid { margin-top: 10px; gap: 10px 12px; } .mode-card { min-height: 102px; grid-template-columns: minmax(0, 1fr) 68px; padding: 8px 12px 8px 15px; } .mc-main { padding-right: 13px; } .mc-title { margin-bottom: 2px; font-size: 1rem; } .mc-desc { font-size: .66rem; line-height: 1.35; } .mc-stub { padding: 0; } .mc-arrow { font-size: 1.4rem; } body.view-home > .game-theme-row { margin-top: 8px; } body.view-home .site-footer { margin-top: 6px; padding-top: 5px; } } @media (max-width: 640px) { .home { padding: 18px 14px 0; } .home-hero { min-height: 292px; padding: 24px 18px; border-radius: 9px; } .hero-score { margin-bottom: 8px; } .hero-kicker { font-size: .58rem; letter-spacing: .12em; } .home-hero h1 { font-size: clamp(2.15rem, 11vw, 3.1rem); line-height: 1.08; } .hero-copy { max-width: 29em; margin-top: 12px; font-size: .76rem; } .mode-grid { grid-template-columns: 1fr; margin-top: 12px; } .mode-card { min-height: 112px; grid-template-columns: minmax(0, 1fr) 58px; padding: 9px 10px 9px 13px; } .mc-main { padding-right: 10px; } .mc-stub { padding: 0; } .mc-title { font-size: 1.02rem; } .mc-desc { font-size: .7rem; } }