*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	background:#0b0d12;
	color:#d7dbe0;
	font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	-webkit-tap-highlight-color:transparent;
	user-select:none;
	-webkit-user-select:none;
	min-height:100vh;
	background-image:radial-gradient(circle at 20% 0%,rgba(84,58,183,.14),transparent 45%),
		radial-gradient(circle at 85% 15%,rgba(226,90,120,.10),transparent 40%);
}
.app{max-width:860px;margin:0 auto;padding:14px 10px 28px}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.brand{font-size:16px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.brand i{font-style:normal;color:#ff5d6c}
.brand em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:2px;color:#5c6470;
	border:1px solid #262c34;border-radius:4px;padding:2px 5px}
.hud{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:11px;line-height:1;padding:6px 8px;border-radius:6px;background:#171c22;
	border:1px solid #262c34;color:#cfd6de;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.dim{color:#79828e}
.chip.warn{color:#e8b339;border-color:#3d3418;background:#1d1a10}

/* ---------- 游戏区 ---------- */
.gameArea{display:flex;gap:14px;align-items:flex-start;justify-content:center}
.boardCol{flex:1;max-width:520px;min-width:0}

.stats{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px;padding:6px 12px;border-radius:8px;
	background:#141a21;border:1px solid #222a33;min-width:64px}
.stat span{font-size:10px;color:#79828e;letter-spacing:1px}
.stat b{font-size:16px;color:#eef2f6;font-variant-numeric:tabular-nums}
.stat.warn b{color:#ff5d6c}
.iconBtn{margin-left:auto;font-family:inherit;font-size:12px;padding:7px 10px;border-radius:8px;cursor:pointer;
	border:1px solid #2a323c;background:#181e25;color:#cdd5de;transition:.15s}
.iconBtn + .iconBtn{margin-left:0}
.iconBtn:hover{background:#1f262f;border-color:#364150}
.iconBtn.off{color:#5c6470}

.timerWrap{height:6px;border-radius:3px;background:#141a21;overflow:hidden;margin-bottom:10px;border:1px solid #1e252e}
.timerBar{height:100%;width:100%;background:#4ed17c;border-radius:3px;transition:width .3s linear,background .4s}

.stage{position:relative;width:100%;border-radius:12px;overflow:hidden;
	border:1px solid #232932;box-shadow:0 10px 30px rgba(0,0,0,.5);background:#101623}
#board{display:block;width:100%;height:auto;touch-action:none;cursor:pointer}

/* 连击闪现 */
.comboFlash{position:absolute;left:0;right:0;top:18%;text-align:center;pointer-events:none;
	font-size:30px;font-weight:800;color:#ffd54a;opacity:0;
	text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 24px rgba(255,180,40,.5)}
.comboFlash.show{animation:comboPop .9s ease-out}
@keyframes comboPop{
	0%{opacity:0;transform:scale(.5)}
	25%{opacity:1;transform:scale(1.15)}
	60%{opacity:1;transform:scale(1)}
	100%{opacity:0;transform:scale(1) translateY(-18px)}
}

/* ---------- 对手面板 ---------- */
.oppWrap{width:180px;flex-shrink:0}
.oppPanel{background:#141a21;border:1px solid #222a33;border-radius:12px;padding:14px;text-align:center}
.opp-head{font-size:10px;letter-spacing:2px;color:#79828e;margin-bottom:8px}
.opp-name{font-size:13px;color:#cfd6de;margin-bottom:6px;word-break:break-all}
.opp-score{font-size:34px;font-weight:800;color:#e8b339;font-variant-numeric:tabular-nums;line-height:1.1}
.opp-status{font-size:11px;color:#79828e;margin-top:6px;padding:3px 8px;display:inline-block;
	border-radius:5px;background:#1a2029}
.opp-status.done{color:#5fb87a;background:#152219}
.opp-hint{font-size:11px;color:#4d545e;line-height:1.8;margin:14px 0 0}

/* ---------- 遮罩层 ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:rgba(8,10,15,.92);backdrop-filter:blur(4px);padding:14px;overflow:auto;z-index:5}
.overlay.hidden{display:none}
.panel{width:100%;max-width:400px;text-align:center}
.panel h1{font-size:21px;margin:0 0 6px;letter-spacing:1px}
.panel h1 span{color:#ff5d6c}
.panel .sub{font-size:11.5px;color:#7b838f;margin:0 0 16px;line-height:1.8}

.field{display:flex;align-items:center;gap:8px;margin-bottom:10px;text-align:left}
.field span{font-size:12px;color:#8b939f;white-space:nowrap;width:40px}
input{flex:1;min-width:0;background:#10151b;border:1px solid #262d36;color:#dde3ea;border-radius:8px;
	padding:10px 12px;font-size:14px;outline:none;font-family:inherit}
input:focus{border-color:#3d6fa8;box-shadow:0 0 0 2px rgba(61,111,168,.18)}
input::placeholder{color:#4d545e}
#codeInput{text-transform:uppercase;letter-spacing:4px;text-align:center;font-weight:700;font-size:16px}

.actions{display:flex;flex-direction:column;gap:8px}
.singleRow{display:flex;gap:8px}
.singleRow .btn{flex:1}
.divider{display:flex;align-items:center;gap:10px;margin:8px 0 2px;color:#4d545e;font-size:10.5px;letter-spacing:2px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#222a33}
.joinRow{display:flex;gap:8px}
.joinRow input{flex:1}

.btn{font-family:inherit;font-size:13.5px;font-weight:600;border-radius:8px;padding:10px 16px;cursor:pointer;
	border:1px solid #2a323c;background:#181e25;color:#cdd5de;transition:.15s;white-space:nowrap}
.btn:hover{background:#1f262f;border-color:#364150}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#ff5d6c;border-color:#ff5d6c;color:#2a0508}
.btn.primary:hover{background:#ff7683}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:#262d36;color:#8b939f}
.btn.ghost:hover{color:#cdd5de;border-color:#39424f}
.btn.tiny{padding:7px 10px;font-size:11.5px}
.hidden{display:none !important}
.msg{font-size:12px;color:#7b838f;min-height:18px;margin-top:10px;line-height:1.5}
.msg.err{color:#e0655a}
.msg.ok{color:#5fb87a}

/* 房间 */
.codeBox{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.codeBox span{font-size:11px;color:#79828e}
.codeBox strong{font-size:26px;letter-spacing:6px;color:#ff8d98;font-family:Consolas,monospace}
.seats{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.seat{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:#11161c;
	border:1px solid #202730;font-size:13px;text-align:left}
.seat b{font-size:10px;letter-spacing:1px;color:#0e1114;background:#7d8794;border-radius:4px;padding:3px 5px}
.seat.taken b{background:#ff5d6c;color:#2a0508}
.seat.empty{color:#4d545e;border-style:dashed}
.seat.empty b{background:#2a323c;color:#6b7480}
.hint{font-size:11.5px;color:#79828e;margin:10px 0 12px;line-height:1.6;word-break:break-all}

/* 结算 */
.res-title{font-size:24px;margin:4px 0 16px}
.res-title.ok{color:#5fb87a}
.res-title.err{color:#e0655a}
.resScore{display:flex;flex-direction:column;gap:8px}
.res-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;
	background:#141a21;border:1px solid #222a33;font-size:14px}
.res-row b{font-size:22px;color:#eef2f6;font-variant-numeric:tabular-nums}
.res-row.me{border-color:#4a3f1d;background:#1d1a10}
.res-row.me b{color:#ffd54a}
.res-sub{font-size:11.5px;color:#79828e;margin-top:8px}

.foot{text-align:center;font-size:11px;color:#4d545e;line-height:1.9;margin:16px 0 0}
.foot b{color:#98a2ae}

/* ---------- 移动端 ---------- */
@media (max-width:700px){
	.app{padding:10px 8px calc(18px + env(safe-area-inset-bottom))}
	body{min-height:100dvh}

	/* 顶栏紧凑 */
	.topbar{margin-bottom:8px}
	.brand{font-size:14px}

	/* 计分栏一行铺满， tapping 更大 */
	.stats{gap:5px;margin-bottom:6px}
	.stat{flex:1;min-width:0;padding:7px 6px;text-align:center;align-items:center}
	.stat span{font-size:9px;letter-spacing:0}
	.stat b{font-size:13px}
	.iconBtn{padding:9px 11px;font-size:13px}

	/* 竖排布局 */
	.gameArea{flex-direction:column;align-items:stretch}
	.boardCol{max-width:none}
	.oppWrap{width:100%}
	.oppPanel{display:flex;align-items:center;gap:14px;padding:10px 14px;text-align:left}
	.opp-head,.opp-hint{display:none}
	.opp-name{margin:0;flex:1}
	.opp-score{font-size:24px}
	.boardCol .stage{margin-bottom:10px}

	/* 大厅/房间/结算：全屏铺开，不再挤在棋盘上方 */
	.overlay{position:fixed;border-radius:0;
		padding:calc(20px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
		align-items:flex-start;
		background:rgba(8,10,15,.96)}
	.overlay .panel{max-width:420px;margin:0 auto}

	/* 触控目标加大 */
	.btn{padding:12px 16px;font-size:14.5px}
	.btn.tiny{padding:9px 12px;font-size:12.5px}
	input{padding:12px 14px;font-size:15.5px}

	.foot{font-size:10.5px;padding-bottom:env(safe-area-inset-bottom)}
}

/* 横屏矮屏：限制棋盘高度，避免上下滚动 */
@media (max-height:600px) and (orientation:landscape){
	.boardCol{max-width:min(520px,74vh)}
	.app{padding-top:8px}
	.foot{display:none}
}