/* ============================================================================
   lobby.css — 游戏大厅匹配页面样式 (Apple 设计语言; 色值全部走 app.css token)
   ========================================================================== */

/* ---- 页面布局 ---- */
.lobby-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 60px);
	padding: 24px 16px;
	position: relative;
	overflow: hidden;
}

/* ---- 大厅卡片 (Apple sheet: 18px 圆角 + 分层阴影, 无可见描边) ---- */
.lobby-card {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--surface);
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* ---- 内容区 ---- */
.lobby-content {
	position: relative;
	padding: 40px 36px;
	z-index: 1;
}

.lobby-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--fg);
	margin: 0 0 6px;
	text-align: center;
}

.lobby-subtitle {
	font-size: 14px;
	color: var(--fg-muted);
	margin: 0 0 32px;
	text-align: center;
}

/* ---- 表单 ---- */
.lobby-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lobby-select-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Apple 分区标签: 句首大写, 无字距 */
.lobby-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-muted);
	letter-spacing: 0;
}

.select-wrapper {
	position: relative;
}

.lobby-select {
	width: 100%;
	padding: 12px 40px 12px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-fluid),
		box-shadow var(--dur-fast) var(--ease-fluid);
	font-family: inherit;
}

.lobby-select:hover {
	border-color: var(--border-strong);
}

.lobby-select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: var(--shadow-active);
}

.select-arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	color: var(--fg-muted);
	pointer-events: none;
}

.lobby-hint {
	font-size: 12px;
	color: var(--fg-subtle);
	margin: 0;
}

/* ---- 按钮 (胶囊 + 按压反馈) ---- */
.lobby-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-fluid),
		color var(--dur-fast) var(--ease-fluid),
		border-color var(--dur-fast) var(--ease-fluid),
		box-shadow var(--dur-fast) var(--ease-fluid),
		transform var(--dur-fast) var(--ease-fluid);
	font-family: inherit;
	letter-spacing: 0;
}

.lobby-btn:active {
	transform: scale(0.97);
}

.lobby-btn--primary {
	background: var(--primary);
	color: var(--primary-fg);
	box-shadow: var(--shadow-sm);
}

.lobby-btn--primary:hover {
	background: var(--primary-hover);
	box-shadow: var(--shadow);
}

.lobby-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

.lobby-btn--cancel {
	background: transparent;
	color: var(--fg-muted);
	border: 1px solid var(--border);
	font-size: 13px;
	padding: 10px 20px;
}

.lobby-btn--cancel:hover {
	background: var(--bg-subtle);
	color: var(--fg);
	border-color: var(--border-strong);
}

/* 按钮 spinner */
.btn-spinner {
	display: inline-flex;
	align-items: center;
}

.spin-icon {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---- 匹配状态 ---- */
.match-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 0 8px;
}

.match-status-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--primary-soft);
	color: var(--primary);
}

/* 柔和呼吸: 幅度 1 → 1.06 (reduced-motion 由 app.css 全局规则关闭动画) */
.match-pulse {
	animation: pulse 2s var(--ease-fluid) infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 0.7;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.06);
	}
}

.match-status-text {
	font-size: 16px;
	font-weight: 600;
	color: var(--fg);
	margin: 0;
}

.match-status-detail {
	font-size: 13px;
	color: var(--fg-muted);
	margin: 0;
}

/* ---- 游戏房间 iframe ---- */
.game-room {
	width: 100%;
	max-width: 900px;
	height: calc(100vh - 80px);
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.game-room-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}

.game-room-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--fg);
}

.game-room-id {
	font-size: 12px;
	color: var(--fg-muted);
	font-family: var(--mono);
	background: var(--bg-subtle);
	padding: 4px 12px;
	border-radius: 999px;
}

.game-room-frame-wrap {
	flex: 1;
	position: relative;
}

/* 游戏画布底色必须为白 (功能性的, 非主题色) */
.game-iframe {
	width: 100%;
	height: 100%;
	border: none;
	background: #fff;
}

.game-room-footer {
	display: flex;
	justify-content: center;
	padding: 12px 20px;
	background: var(--bg);
	border-top: 1px solid var(--border);
}

/* ---- Toast 通知 (与 app.css 深色 HUD 胶囊对齐) ---- */
.toast {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translate(-50%, 12px);
	background: rgba(29, 29, 31, 0.92);
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	box-shadow: var(--shadow);
	opacity: 0;
	transition:
		opacity var(--dur-med) var(--ease-fluid),
		transform var(--dur-med) var(--ease-fluid);
	z-index: 1000;
	pointer-events: none;
}

.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

:root[data-theme="dark"] .toast {
	background: rgba(0, 0, 0, 0.85);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .toast {
		background: rgba(0, 0, 0, 0.85);
	}
}

/* ---- 响应式 ---- */
@media (max-width: 480px) {
	.lobby-content {
		padding: 28px 20px;
	}

	.lobby-title {
		font-size: 22px;
	}

	.lobby-card {
		max-width: 100%;
		border-radius: var(--radius);
	}
}