/*
 * 大厅对局卡片样式（B 方案「战报新闻」）
 *
 * 作用域刻意限定在 .gamesList 内：
 *   - 局内棋盘（board.php）也用 .gamePanel，但不在 .gamesList 里，
 *     所以这里的规则不会影响局内。
 *   - 落地页的预览卡片在 .landing-games 里，同样不受影响。
 *
 * 本文件只改外观，不改任何 PHP 逻辑。类名沿用 gamepanel.php 已有的
 * 输出（titleBar / occupationBar / membersList / enterBar 等）。
 *
 * 深色模式说明：css/darkMode/ 是整套替换，本文件不参与，因此用户开启
 * 深色模式时这些样式不会生效 —— 这是刻意的，避免与深色配色打架。
 */

/*
 * 大厅外层是 global.css 里的 div.content —— 750px 窄框 + 白底 + 圆角边框。
 * 卡片本身已是浅色卡片，再套一层白框会显得双重边框。
 * 用负边距让 .gamesList 脱框，比改 div.content 更安全：
 * :has() 的浏览器兼容性不够稳，而 div.content 还被 gamecreate.php 等
 * 多个页面共用，改它会波及那些页面。
 *
 * tab 栏与筛选行必须用同一套负边距，否则三者宽度不一致 ——
 * 它们都是 div.content 的直接子元素，只有这里脱了框。
 */
/*
 * 大厅的三个块（卡片列表 / tab 栏 / 筛选行）与版心对齐。
 *
 * 此前是 max-width:820px + margin:0 -24px，净宽 868px 且左边界比正文
 * 更靠左 24px —— 截图里三屏卡片、tab、筛选行三者的左边界各不相同，
 * 是「排版不齐」的直接来源。负边距原本用来脱框对齐容器内边距，
 * 但既然版心宽度已经统一，直接对齐即可，不需要负边距。
 */
div.gamesList,
.gamelistings-tabsNew,
.gamelistings-filters{
	max-width: var(--content-max);
}
div.gamesList{
	margin-top: 10px;
	margin-bottom: 0;
}

/* ---------- 卡片外壳 ---------- */
.gamesList .gamePanel{
	background: var(--paper-raised);
	border: 1px solid var(--rule-strong);
	border-radius: 6px;
	color: var(--ink);
	overflow: hidden;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.gamesList .gamePanel:hover{
	border-color: var(--rule-double);
	box-shadow: 0 2px 10px rgba(58,48,32,.08);
}

/* ---------- 头部：标题 + 时间 ---------- */
.gamesList .gamePanel div.titleBar{
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rule);
	padding: 13px 16px;
	text-align: left;
	line-height: 1.4;
}
.gamesList .gamePanel div.titleBar a{
	color: inherit;
	text-decoration: none;
}

/* 对局名：全卡片的视觉锚点 */
.gamesList .gamePanel span.gameName{
	display: block;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	color: var(--ink);
	letter-spacing: -.01em;
	margin-bottom: 4px;
}

/* 图标（私密锁、featured 星） */
.gamesList .gamePanel div.titleBarLeftSide img{
	vertical-align: baseline;
	margin-right: 2px;
}

/* 时间：距下阶段 */
.gamesList .gamePanel span.gameTimeRemaining{
	font-size: 12.5px;
	color: var(--ink-soft);
}
.gamesList .gamePanel span.gameTimeRemainingNextPhase{
	color: var(--seal);
	font-weight: bold;
}
.gamesList .gamePanel span.timestampGamesWrapper{
	color: var(--ink-faint);
}

/* 阶段时长 / 切换信息 */
.gamesList .gamePanel span.gameHoursPerPhase{
	font-size: 12.5px;
	color: var(--ink-soft);
}
.gamesList .gamePanel .phaseSwitchInfo{
	font-size: 12px;
	color: var(--ink-faint);
}

/* 奖池 / 日期 / 阶段 */
.gamesList .gamePanel span.gamePot{
	font-weight: bold;
	color: var(--brass);
}
.gamesList .gamePanel span.gameDate,
.gamesList .gamePanel span.gamePhase{
	color: var(--ink-soft);
	font-size: 13px;
}

/* 变体名 */
.gamesList .gamePanel .gameVariants{
	font-size: 12px;
	color: var(--ink-faint);
}

/* ---------- 席位占用条（上下两条） ---------- */
.gamesList .gamePanel div.panelBarGraph{
	background: transparent;
	padding: 0 16px;
	line-height: 0;
}
.gamesList .gamePanel table.occupationBarTable{
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.gamesList .gamePanel td.occupationBar{
	padding: 0;
	height: 7px;
	border: 0;
}
.gamesList .gamePanel td.occupationBarJoined{
	/*
	 * 苔绿而非印章红。
	 *
	 * 这里是「已加入席位」的状态指示，属于语义色而非主色：红色在 B 主题里
	 * 是「当前页/可点击」的信号，用在这里会让人误以为可点。而 --moss 在
	 * 令牌里的定义就是「进行中/成功」，与「这局有人了」完全对位。
	 *
	 * （此前这里被批量替换成了 var(--seal) —— 替换时按色值匹配，没区分
	 * 同一色值在不同位置的不同语义。这类语义错配只能靠逐处核对发现。）
	 */
	background: var(--moss);
	height: 7px;
}
.gamesList .gamePanel td.occupationBarNotJoined{
	background: var(--paper-deep);
	height: 7px;
}

/* ---------- 成员列表 ---------- */
.gamesList .gamePanel div.membersList{
	background: transparent;
	padding: 10px 16px 12px;
	border: 0;
}
.gamesList .gamePanel table{
	width: 100%;
	border-collapse: collapse;
}
.gamesList .gamePanel tr.member{
	background: transparent !important;
}
.gamesList .gamePanel tr.member td{
	padding: 3px 0;
	border: 0;
	font-size: 13px;
	color: var(--ink-soft);
	text-align: left;
}

/* 国名：颜色来自变体样式表的 .country0-6 */
.gamesList .gamePanel span.country0,
.gamesList .gamePanel span.country1,
.gamesList .gamePanel span.country2,
.gamesList .gamePanel span.country3,
.gamesList .gamePanel span.country4,
.gamesList .gamePanel span.country5,
.gamesList .gamePanel span.country6{
	font-weight: bold;
}

/* 玩家名 */
.gamesList .gamePanel span.memberName{
	color: var(--ink-body);
}

/* 空席位提示：未占用的国家会显示 Unassigned */
.gamesList .gamePanel .memberLeftSide{
	color: var(--ink-faint);
}

/* ---------- 底部操作区 ---------- */
.gamesList .gamePanel div.enterBar{
	background: var(--paper-raised);
	border: 0;
	border-top: 1px solid var(--rule);
	padding: 11px 16px;
	text-align: right;
}
.gamesList .gamePanel div.enterBarJoin,
.gamesList .gamePanel div.enterBarOpen{
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 6px;
}

/* 按钮：改掉全宽通栏的旧样式 */
.gamesList .gamePanel input.form-submit,
.gamesList .gamePanel button.form-submit{
	min-height: 38px;
	padding: 0 18px;
	width: auto;
	display: inline-block;
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	/* 覆盖 global.css 里的 width:100% 通栏样式 */
	width: auto !important;
	/*
	 * 清掉 global.css 的旧版立体按钮效果。
	 *
	 * 原版 .form-submit 有一串五段 linear-gradient + inset 阴影 +
	 * text-shadow + 0.5px 边框，那是为**蓝灰渐变**调的：靠明暗两段
	 * 制造凸起感。整套换到印章红之后，50% 处的 var(--seal-deep) 分界
	 * 会形成一条明显的深色横带，加上为深底写的 text-shadow（灰影），
	 * 按钮看起来像一块脏污的塑料 —— 这是「加入/观战按钮颜色很奇怪」
	 * 的直接原因。
	 *
	 * 扁平化处理：B 主题的按钮靠留白与边框区分层级，不靠拟物阴影。
	 */
	background-color: var(--seal);
	background-image: none;
	border: 1px solid var(--seal-deep);
	box-shadow: none;
	color: var(--paper-pure);
	text-shadow: none;
	transition: background 150ms ease-out, border-color 150ms ease-out;
}
.gamesList .gamePanel input.form-submit:hover,
.gamesList .gamePanel button.form-submit:hover{
	background-color: var(--seal-bright);
	background-image: none;
	border-color: var(--seal-bright);
}

/* 次要按钮（观战/存档类） */
.gamesList .gamePanel .bar a{
	color: var(--ink-soft);
	text-decoration: none;
	margin-left: 10px;
	font-size: 13.5px;
}
.gamesList .gamePanel .bar a:hover{
	color: var(--seal);
	text-decoration: underline;
}

/* 不可用（积分不足 / 可靠性不够） */
.gamesList .gamePanel input.form-submit:disabled,
.gamesList .gamePanel input[disabled]{
	/* 与 .spaced-button:disabled 同一套扁平禁用态：
	   纸面凹陷底 + 弱化墨色字，不做拟物阴影。禁用态该「退后」，
	   而原版的深灰底比正常按钮更重，视觉上反而更突出。 */
	background-color: var(--paper-sink);
	background-image: none;
	border: 1px solid var(--rule-strong);
	box-shadow: none;
	color: var(--ink-faint);
	text-shadow: none;
	cursor: not-allowed;
}

/*
 * 次要按钮（订阅/ 取消订阅）。
 *
 * 卡片右下角同时有「加入」和「订阅」两个按钮。它们不是同一优先级：
 * 加入是主行动（开始下这局），订阅只是把它加进关注列表。因此订阅
 * 用描边样式而不填色 —— 两个实心红按钮并排会让人以为是重复操作，
 * 也让主次关系消失。
 */
.gamesList .gamePanel input.form-submit-secondary,
.gamesList .gamePanel button.form-submit-secondary{
	/*
	 * background-image 也要显式清掉：global.css 的 .form-submit 用了一串
	 * linear-gradient 做旧版的立体按钮效果，而 background-image 的优先级
	 * 高于 background-color —— 只设 transparent 会被渐变盖住，
	 * 按钮看起来还是实心红。连带 text-shadow（为旧版深底写的立体感）
	 * 也要去掉，否则描边按钮上的字会有灰影。
	 */
	background-color: transparent;
	background-image: none;
	border: 1px solid var(--seal-line);
	color: var(--seal);
	text-shadow: none;
}
.gamesList .gamePanel input.form-submit-secondary:hover,
.gamesList .gamePanel button.form-submit-secondary:hover{
	background-color: var(--seal-wash);
	background-image: none;
	border-color: var(--seal);
	color: var(--seal);
}

/* ---------- 状态条（满员 / 开始提示） ---------- */
.gamesList .gamePanel div.gameNoticeBar{
	background: var(--paper-raised);
	border: 0;
	border-bottom: 1px solid var(--rule);
	padding: 8px 16px;
	font-size: 13px;
	color: var(--ink-soft);
	text-align: left;
}

/* 末条空白 */
.gamesList .gamePanel div.lastBar{
	background: transparent;
	border: 0;
	height: 0;
	padding: 0;
}

/* ---------- 移动端 ---------- */
@media (max-width: 620px){
	div.gamesList{ padding: 0 12px; }
	.gamesList .gamePanel span.gameName{ font-size: 17px; }
	.gamesList .gamePanel div.titleBar{ padding: 12px 13px; }
	.gamesList .gamePanel div.membersList{ padding: 9px 13px 11px; }
	.gamesList .gamePanel div.enterBar{ padding: 10px 13px; }
	/* 触控目标不小于 44px */
	.gamesList .gamePanel input.form-submit,
	.gamesList .gamePanel button.form-submit{
		min-height: 44px;
		padding: 0 16px;
	}
}

/* ---------- 筛选行 ---------- */
/*
 * 筛选行是页级控件，不在 .gamesList 内（它位于对局列表之上）。
 * 做成 segmented control：与设计稿一致，且比下拉少一次点击。
 */
/* 宽度与负边距在上面与 tab 栏、卡片列表统一设置，此处不再重复 */
.gamelistings-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 0 12px;
}
.gamelistings-filter{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	font-size: 14px;
	color: var(--ink-soft);
	text-decoration: none;
	background: var(--paper-raised);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.gamelistings-filter:hover{
	border-color: var(--seal);
	color: var(--seal);
}
.gamelistings-filterActive,
.gamelistings-filterActive:hover{
	background: var(--seal);
	border-color: var(--seal);
	/*
	 * !important 是有意为之，不是权宜之计。
	 *
	 * 这一条被覆盖过两次：
	 * 1. 原版`a:link`（特异性 0,1,1）压过单类选择器 (0,1,0)；
	 * 2. 改成 `a`（0,0,1）后仍被浏览器缓存的旧样式命中过一次。
	 *
	 * 后果都是一样的：印章红底 + 印章红字，激活态变成一个「看不懂的
	 * 红方块」。而全局链接色随时可能再调整（换主色、加下划线等），
	 * 每次都要重新排查一遍特异性并不划算 —— 这里是全站唯一一个
	 * 「深底反白」的组件，可读性就是它的全部价值，不容妥协。
	 */
	color: var(--paper-pure) !important;
	font-weight: bold;
}

@media (max-width: 620px){
	.gamelistings-filters{ padding-bottom: 10px; }
	.gamelistings-filter{ min-height: 44px; padding: 0 12px; font-size: 14px; }

	/*
	 * 窄屏取消负边距。
	 *
	 * 负边距是为了让筛选行与下方卡片、脱框 tab 栏左对齐（820px 网格）。
	 * 但在 375px 这类窄屏上，父容器本来就没富余宽度，再往左推 24px 会把
	 * 行首那一项推到屏幕外 —— 激活态是个印章红底的白字块，于是表现为
	 * 「左边有个看不懂的红方块」，字被裁在屏幕外。
	 */
	.gamelistings-filters{
		margin-left: 0;
		margin-right: 0;
	}
}

/* ---------- Tab 栏改色 ----------
 *
 * global.css:845 给 .gamelistings-tabsNew 的是 background-color:#333
 * （近黑），激活态是 #4CAF50（亮绿）。这套配色属于 webDiplomacy 原版，
 * 与本站的纸面 + 印章红基调冲突 —— 截图里那条黑边就是这个。
 * 这里改为主色红，浅色底，与下方卡片同一套语言。
 *
 * 只改颜色和边框，不动 flex 布局与交互。
 */
.gamelistings-tabsNew{
	background: transparent;
	border-bottom: 2px solid var(--rule-strong);
	border-radius: 0;
	overflow: visible;
	/*
	 * space-between：tab靠左成组，「创建对局」按钮贴右端。
	 * 之前是 flex-start，开局入口只能藏在导航的下拉菜单里；而
	 * 正在浏览可加入对局的人正是最可能想开新局的人。
	 * 按钮本身 margin-left:auto 也够用，但 space-between 语义更清楚：
	 * 两端对齐，中间自然留白。
	 */
	justify-content: space-between;
	gap: 2px;
}
.gamelistings-tabsNew a{
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-size: 15px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--r-sm) 3px 0 0;
	margin-bottom: -2px;
	transition: background 150ms ease-out, color 150ms ease-out;
}
.gamelistings-tabsNew a:hover{
	color: var(--seal);
	background: var(--paper-raised);
}
.gamelistings-tabsNew .gamelistings-tabsNewActive,
.gamelistings-tabsNew .gamelistings-tabsNewActive:hover{
	background: var(--paper-raised);
	/* 同.filterActive：这是浅底上的主色字，一旦被全局链接色覆盖就
	 * 变成「纸底纸字」，当前页位置完全消失。全站唯一依赖自身
	 * 可读性的两个组件，这里一并锁死。 */
	color: var(--seal) !important;
	font-weight: bold;
	border-color: var(--rule-strong);
}
.gamelistings-tabsNew .gamelistings-tabsNewActive a{
	background: transparent;
	color: var(--seal) !important;
}

/* ---------- 「创建对局」按钮（tab 栏右端） ----------
 *
 * 用实心印章红，与 tab 的「浅底红字」形成主次：tab 是导航（当前在哪），
 * 按钮是行动（去做一件事）。描边款在这个位置会被误认成又一个 tab。
 * 高度与 tab 对齐（9px padding + 15px 字��），贴着下边框落在同一基线上。
 */
.gamelistings-sideLinks{
	display: flex;
	align-items: center;
	gap: var(--s2);
	/* 不设 margin-left:auto —— tab 栏已是 space-between，
	   右侧这一组自然被推到末端 */
}
.gamelistings-newGame{
	background: var(--seal) !important;
	color: var(--paper-pure) !important;
	border: 1px solid var(--seal) !important;
	border-radius: var(--r-sm);
	font-family: var(--font-body) !important;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	align-self: center;
	transition: background 150ms ease-out;
}
.gamelistings-newGame:hover{
	background: var(--seal-bright) !important;
	border-color: var(--seal-bright) !important;
	color: var(--paper-pure) !important;
}

/*
 * 「人机对战」入口：描边 + 墨色，与旁边实心的「创建新对局」区分主次。
 * 理由是它与公共对局不同的性质 —— 点完即开局、不计分，属于「练习」，
 * 不该和正式建局抢同一个视觉权重。
 */
.gamelistings-botGame{
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	color: var(--ink-soft) !important;
	font-family: var(--font-body);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	align-self: center;
	padding: 9px 16px;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}
.gamelistings-botGame:hover{
	border-color: var(--seal-line);
	color: var(--seal) !important;
	text-decoration: none;
}

/*
 * 「军功榜」入口：描边 + 墨色。
 *
 * 与旁边的「创建新对局」区分开：那个是实心主色（行动），这个是描边
 * （浏览）。颜色刻意用墨色而非印章红 —— 印章红在这个位置已被 tab
 * 激活态占用，再用红色会让入口和「当前所在页」混为一谈。
 */
.gamelistings-rankLink{
	background: transparent;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	color: var(--ink-soft) !important;
	font-family: var(--font-body);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	align-self: center;
	padding: 9px 16px;
	transition: border-color 150ms ease-out, color 150ms ease-out;
}
.gamelistings-rankLink:hover{
	border-color: var(--seal-line);
	color: var(--seal) !important;
	text-decoration: none;
}

@media (max-width: 620px){
	/* 同上：窄屏取消负边距，否则第一个 tab 被推到屏幕左外侧 */
	.gamelistings-tabsNew{
		overflow-x: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.gamelistings-tabsNew a{ padding: 8px 12px; font-size: 14px; }
	/* 窄屏 tab 已占满整行，按钮改为独立一行右对齐，避免挤掉最后一个 tab */
	.gamelistings-newGame{
		font-size: 13px;
		padding: 6px 12px;
	}
	.gamelistings-botGame{
		font-size: 13px;
		padding: 6px 12px;
	}
}