/* ==========================================================================
   泡泡 · 猜拳对战（战斗页）
   视觉 1:1 复刻自 /game/caicom 的「猜拳对战」子页面：
     金黑赌场风 + 状态条 + 双方名牌 + 两只手（含倒计时遮罩）+ VS + 结果文字 + 三个大出拳键
   ⚠️ 所有选择器都挂在 .game-page 下：那套样式里 .player/.choice/.hand/.actions
      这类类名太通用，不限定作用域会污染其它页面（尤其中间还有 .status-bar）。
   ⚠️ 原版用的是赌场主题变量（--gold/--red-l/--green …），泡泡主题里没有，
      所以这里在 .game-page 上就地定义一份，不依赖、也不影响全局主题。
   ========================================================================== */

.game-page{
	--gold:      #d4af37;
	--gold-l:    #ffeab0;
	--gold-d:    #8a7327;
	--gold-lo:   #c9b267;
	--gold-glow: rgba(212,175,55,.55);
	--red-l:     #c24343;
	--red-lo:    #e8838f;
	--red-glow:  rgba(160,29,29,.55);
	--green:     #3cb371;
	--green-l:   #7fd8a8;
	--green-glow:rgba(60,179,113,.5);
	--felt-1:    #0d3a2b;
	--felt-2:    #08251b;
	--b-txt:     #f2efe6;
	--b-txt2:    #c9c2b2;
	--b-txt3:    #8d8579;
	--b-line:    rgba(212,175,55,.18);
	--b-line2:   rgba(212,175,55,.3);
	--b-serif:   Georgia, "Songti SC", "STSong", serif;
	--b-r-s: 8px; --b-r-m: 12px; --b-r-l: 16px; --b-r-xl: 18px;

	/* ② 把全局主题变量就地覆盖成固定值 ——
	   自定义主题 / 深色主题改的都是这些变量（--card / --text / --brand-blue / --chat-* / --bub*），
	   游戏页里一旦有元素用到 var(--xxx)，就会透出主题色。
	   这里直接重置成赌场风的深色值：骰子 / 猜拳页面固定这套配色，不跟随任何主题。 */
	--bg:#0b0a09;
	--card:#171310;
	--line:rgba(212,175,55,.18);
	--press:#241d13;
	--text:#f2efe6;
	--text-2:#c9c2b2;
	--text-3:#8d8579;
	--brand-blue:#d4af37;
	--brand-blue-d:#b8942c;
	--red:#c24343;
	/* 聊天 / 气泡类主题变量也一并压住（零星元素可能继承到） */
	--chat-bg:#0b0a09;
	--chat-head-bg:#0f1a15;
	--chat-body-bg:transparent;
	--chat-input-bg:#161310;
	--bubble-me-bg:#d4af37;
	--bubble-me-color:#1a1408;
	--bsender-bg:#d4af37;
	--bsender-fg:#1a1408;
	--bd-bg:#241d14;
	--bd-fg:#f2efe6;

	display:flex;flex-direction:column;
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(13,58,43,.9), transparent 70%),
		linear-gradient(180deg, #0b0a09, #120f0c 60%, #0b0a09);
	color:var(--b-txt);
	/* 字体也不跟随主题（主题若改过 body 字体，游戏页仍然用系统字体） */
	font-family:-apple-system,"PingFang SC","Helvetica Neue",Roboto,"Microsoft YaHei",sans-serif;
	/* 主题/皮肤如果给 body 换过字体或半透明前景色，也在游戏页里挡掉 */
	-webkit-text-fill-color:currentColor;
}

/* ⚠️ 装扮主题 / 自定义主题有一条全局规则会给**所有二级页**铺底色：
     html[data-deco-theme] .pub-page { background: var(--deco-page); }   ← 优先级 (0,2,1)
   它比 .game-page（0,1,0）高，所以进骰子 / 猜拳页会看到主题的背景图/背景色。
   这里用 ID 选择器 + !important 把两页背景钉死（ID 优先级最高，主题盖不动）。 */
#rpsPage.pub-page,
#dicePage.pub-page{
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(13,58,43,.9), transparent 70%),
		linear-gradient(180deg, #0b0a09, #120f0c 60%, #0b0a09) !important;
}
.game-page .rps-top-bar{
	position:relative;flex-shrink:0;
	display:flex;align-items:center;gap:10px;
	padding:calc(10px + var(--safe-top, 0px)) 12px 10px;
	background:linear-gradient(180deg, rgba(13,58,43,.92), rgba(8,37,27,.6));
	border-bottom:1px solid var(--b-line);
}
.game-page .rps-back-btn{
	width:auto;padding:6px 12px;border-radius:10px;
	background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(0,0,0,.25));
	border:1.5px solid var(--b-line2);
	color:var(--gold-l);font-size:13px;font-weight:800;font-family:var(--b-serif);
	cursor:pointer;outline:none;
	box-shadow:inset 0 1px 0 rgba(255,234,176,.2);
}
.game-page .rps-back-btn:active{transform:scale(.95);}
.game-page .rps-title{
	flex:1;text-align:center;
	font-family:var(--b-serif);font-size:16px;font-weight:900;letter-spacing:.14em;
	color:var(--gold-l);text-shadow:0 0 14px rgba(212,175,55,.6);
}
.game-page .rps-bet-tag{
	flex-shrink:0;font-size:11px;font-weight:800;font-family:var(--b-serif);
	color:var(--gold-lo);padding:4px 10px;border-radius:8px;
	background:rgba(212,175,55,.1);border:1px solid var(--b-line2);
}

.game-page .rps-main{
	flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
	display:flex;flex-direction:column;gap:10px;
	padding:12px 12px calc(18px + var(--safe-bottom, 0px));
	-webkit-overflow-scrolling:touch;
}
.game-page .rps-main::-webkit-scrollbar{width:4px;}
.game-page .rps-main::-webkit-scrollbar-thumb{background:rgba(212,175,55,.3);border-radius:8px;}

/* ---------------- 状态条 ---------------- */
.game-page .status-bar{
	display:flex;align-items:center;gap:9px;flex-shrink:0;
	padding:10px 14px;border-radius:var(--b-r-m);min-height:46px;overflow:hidden;
	background:linear-gradient(180deg, rgba(212,175,55,.06), rgba(0,0,0,.3));
	border:1.5px solid var(--b-line2);
	font-size:13px;font-weight:700;color:var(--b-txt2);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.1);
	transition:all .25s ease;
}
.game-page .status-bar .s-ico{font-size:15px;line-height:1;flex-shrink:0;}
.game-page .status-bar .s-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.game-page .status-meta{
	display:flex;align-items:center;gap:8px;flex-shrink:0;
	font-size:10.5px;font-weight:700;color:var(--b-txt3);
	font-variant-numeric:tabular-nums;letter-spacing:.02em;
	padding-left:10px;border-left:1px solid var(--b-line);white-space:nowrap;
}
.game-page .status-meta i{font-style:normal;}
.game-page .status-bar.state-playing{
	border-color:var(--gold);color:var(--gold-l);
	background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(0,0,0,.3));
	box-shadow:inset 0 1px 0 rgba(255,234,176,.2), 0 0 20px -6px rgba(212,175,55,.6);
}
.game-page .status-bar.state-playing .status-meta{color:rgba(255,234,176,.8);border-left-color:rgba(212,175,55,.28);}
.game-page .status-bar.state-battling{
	border-color:var(--red-l);color:var(--red-lo);
	background:linear-gradient(180deg, rgba(160,29,29,.22), rgba(0,0,0,.3));
	animation:rpsSoftPulse .65s ease-in-out infinite alternate;
	box-shadow:inset 0 1px 0 rgba(255,180,190,.2), 0 0 24px -6px rgba(160,29,29,.7);
}
.game-page .status-bar.state-battling .status-meta{color:rgba(255,180,190,.85);border-left-color:rgba(160,29,29,.3);}
.game-page .status-bar.state-result-win{
	border-color:var(--gold);color:var(--gold-l);
	background:linear-gradient(180deg, rgba(212,175,55,.22), rgba(0,0,0,.3));
}
.game-page .status-bar.state-result-lose{
	border-color:var(--red-l);color:var(--red-lo);
	background:linear-gradient(180deg, rgba(160,29,29,.16), rgba(0,0,0,.3));
}
.game-page .status-bar.state-result-draw{
	border-color:var(--b-txt3);color:var(--b-txt2);
	background:linear-gradient(180deg, rgba(122,106,72,.1), rgba(0,0,0,.3));
}
@keyframes rpsSoftPulse{from{opacity:.85}to{opacity:1;}}

/* ---------------- 双方名牌 ---------------- */
.game-page .players{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-shrink:0;}
.game-page .player{
	display:flex;align-items:center;gap:7px;min-width:0;
	padding:9px 11px;border-radius:var(--b-r-m);
	background:linear-gradient(180deg, rgba(212,175,55,.05), rgba(0,0,0,.25));
	border:1.5px solid var(--b-line2);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.08);
	transition:opacity .2s ease, visibility .2s ease, border-color .2s ease;
}
.game-page .player.empty{visibility:hidden;opacity:0;}
.game-page .player .p-avatar{
	width:30px;height:30px;border-radius:50%;flex-shrink:0;overflow:hidden;
	display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
	background:linear-gradient(180deg, rgba(212,175,55,.2), rgba(0,0,0,.3));
	border:1.5px solid var(--gold-d);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.25);
}
.game-page .player .p-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.game-page .player .p-name{
	flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--gold-l);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.game-page .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;}
.game-page .dot.on{background:var(--green);box-shadow:0 0 8px var(--green-glow);}
.game-page .dot.off{background:var(--b-txt3);}
.game-page .ready-badge{
	font-size:9px;padding:2px 8px;border-radius:8px;flex-shrink:0;white-space:nowrap;
	font-family:var(--b-serif);font-weight:800;letter-spacing:.06em;
	background:linear-gradient(180deg, rgba(60,179,113,.3), rgba(60,179,113,.1));
	color:#c9f5da;border:1px solid rgba(60,179,113,.55);
	box-shadow:inset 0 1px 0 rgba(150,240,190,.3);
}
.game-page .ready-badge.not-ready{
	background:rgba(0,0,0,.28);color:var(--b-txt3);border-color:var(--b-line);box-shadow:none;
}
.game-page .ready-badge.playing{
	background:linear-gradient(180deg, rgba(212,175,55,.3), rgba(212,175,55,.1));
	color:var(--gold-l);border-color:var(--gold);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.3), 0 0 12px -4px rgba(212,175,55,.8);
}

/* ---------------- 牌桌：两只手 ---------------- */
.game-page .arena{
	position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
	gap:8px;padding:22px 8px 18px;min-height:170px;border-radius:var(--b-r-xl);overflow:hidden;
	background:
		radial-gradient(ellipse 75% 95% at 50% 42%, rgba(212,175,55,.12), transparent 70%),
		linear-gradient(180deg, rgba(13,58,43,.6), rgba(8,37,27,.6));
	border:1px solid var(--b-line2);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.1);
}
.game-page .arena::before{
	content:'';position:absolute;inset:0;pointer-events:none;
	background-image:
		radial-gradient(circle at 30% 50%, rgba(160,29,29,.08), transparent 40%),
		radial-gradient(circle at 70% 50%, rgba(60,179,113,.08), transparent 40%);
}
.game-page .hand-box{
	position:relative;flex:1;min-width:0;
	display:flex;flex-direction:column;align-items:center;gap:8px;
	transition:opacity .2s ease, visibility .2s ease;
}
.game-page .hand-box.empty{visibility:hidden;opacity:0;}
.game-page .hand{
	position:relative;width:82px;height:82px;border-radius:50%;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;font-size:42px;
	background:
		radial-gradient(circle at 50% 40%, rgba(212,175,55,.15), transparent 60%),
		linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));
	border:2px solid var(--gold-d);
	box-shadow:
		inset 0 0 30px rgba(0,0,0,.6),
		inset 0 1px 0 rgba(255,234,176,.2),
		0 0 0 3px rgba(0,0,0,.4),
		0 0 20px -6px rgba(212,175,55,.5);
	transition:all .25s ease;
}
.game-page .hand .emoji{
	line-height:1;display:block;pointer-events:none;
	filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.game-page .hand.shaking{animation:rpsHandShake .8s ease-in-out;}
@keyframes rpsHandShake{
	0%,100%{transform:translateY(0)} 15%{transform:translateY(-12px)} 30%{transform:translateY(2px)}
	45%{transform:translateY(-10px)} 60%{transform:translateY(2px)} 75%{transform:translateY(-6px)} 90%{transform:translateY(0)}
}
.game-page .hand.winner{
	border-color:var(--gold-l);
	background:
		radial-gradient(circle at 50% 40%, rgba(212,175,55,.35), transparent 65%),
		linear-gradient(180deg, rgba(212,175,55,.2), rgba(0,0,0,.6));
	box-shadow:0 0 40px var(--gold-glow), inset 0 0 30px rgba(212,175,55,.3);
	animation:rpsWinGlow .55s ease-in-out 3;
}
@keyframes rpsWinGlow{
	0%,100%{box-shadow:0 0 40px var(--gold-glow), inset 0 0 30px rgba(212,175,55,.3);}
	50%{box-shadow:0 0 70px rgba(212,175,55,.9), inset 0 0 40px rgba(212,175,55,.4);}
}
.game-page .hand.loser{
	border-color:var(--red-l);
	background:
		radial-gradient(circle at 50% 40%, rgba(160,29,29,.25), transparent 65%),
		linear-gradient(180deg, rgba(160,29,29,.15), rgba(0,0,0,.6));
	box-shadow:0 0 28px var(--red-glow);
	animation:rpsLoseShake .42s ease;
}
@keyframes rpsLoseShake{
	0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)}
	50%{transform:translateX(6px)} 75%{transform:translateX(-3px)}
}
.game-page .hand.draw{
	border-color:var(--b-txt3);
	background:linear-gradient(180deg, rgba(122,106,72,.15), rgba(0,0,0,.6));
	box-shadow:0 0 18px rgba(122,106,72,.3);
}
.game-page .hand.hidden{background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.7));border-color:var(--b-line2);}

.game-page .hand-countdown{
	position:absolute;inset:0;border-radius:50%;z-index:3;
	display:none;align-items:center;justify-content:center;
	background:rgba(10,6,5,.9);
	color:var(--red-lo);font-size:36px;font-weight:900;font-family:var(--b-serif);
	font-variant-numeric:tabular-nums;letter-spacing:-.02em;
	border:2px solid var(--red-l);
	box-shadow:0 0 24px var(--red-glow), inset 0 0 20px rgba(160,29,29,.2);
	text-shadow:0 0 14px rgba(160,29,29,.7);
}
.game-page .hand-countdown.show{display:flex;animation:rpsCdPulse .9s ease-in-out infinite alternate;}
.game-page .hand-countdown.warn{
	color:#ff6b7a;border-color:#ff6b7a;
	box-shadow:0 0 34px rgba(255,77,109,.8), inset 0 0 24px rgba(255,77,109,.3);
}
@keyframes rpsCdPulse{from{transform:scale(.96)}to{transform:scale(1.04)}}

.game-page .vs{
	flex-shrink:0;width:48px;height:48px;border-radius:50%;z-index:2;
	display:flex;align-items:center;justify-content:center;
	font-family:var(--b-serif);font-weight:900;font-size:12px;letter-spacing:.06em;
	color:var(--gold-lo);
	background:radial-gradient(circle at 50% 40%, rgba(212,175,55,.15), rgba(0,0,0,.5));
	border:1.5px solid var(--b-line2);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.15);
	transition:all .2s ease;
}
.game-page .vs.battling{
	animation:rpsVsSpin .45s linear infinite;
	border-color:var(--gold-l);color:var(--gold-l);font-size:20px;
	background:radial-gradient(circle at 50% 40%, rgba(212,175,55,.35), rgba(0,0,0,.5));
	box-shadow:0 0 30px var(--gold-glow), inset 0 0 20px rgba(212,175,55,.3);
}
@keyframes rpsVsSpin{
	0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.1)} 100%{transform:rotate(360deg) scale(1)}
}
.game-page .vs.result-win{
	background:radial-gradient(circle,rgba(212,175,55,.4),rgba(0,0,0,.5));
	border-color:var(--gold);color:var(--gold-l);font-size:22px;
	animation:rpsVsPop .5s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 30px var(--gold-glow);
}
.game-page .vs.result-lose{
	background:radial-gradient(circle,rgba(160,29,29,.3),rgba(0,0,0,.5));
	border-color:var(--red-l);color:var(--red-lo);font-size:22px;
	animation:rpsVsPop .5s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 24px var(--red-glow);
}
.game-page .vs.result-draw{
	background:radial-gradient(circle,rgba(122,106,72,.25),rgba(0,0,0,.5));
	border-color:var(--b-txt3);color:var(--b-txt2);font-size:18px;
	animation:rpsVsPop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes rpsVsPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}

/* ---------------- 结果文字 ---------------- */
.game-page .result-text{
	text-align:center;font-size:17px;font-weight:800;letter-spacing:.05em;
	font-family:var(--b-serif);min-height:26px;flex-shrink:0;
	overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
	transition:color .2s ease;
}
.game-page .result-text.win{color:var(--gold-l);text-shadow:0 0 24px var(--gold-glow);}
.game-page .result-text.lose{color:var(--red-lo);text-shadow:0 0 20px var(--red-glow);}
.game-page .result-text.draw{color:var(--b-txt2);}
.game-page .result-text.waiting{color:var(--b-txt3);font-size:13.5px;font-weight:600;font-family:inherit;letter-spacing:.02em;}
.game-page .result-text.battling{color:var(--gold-l);animation:rpsTextPulse .42s ease-in-out infinite alternate;}
@keyframes rpsTextPulse{from{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.04)}}

/* ---------------- 三个出拳键 ---------------- */
.game-page .choices{display:flex;gap:9px;justify-content:center;flex-shrink:0;}
.game-page .choice{
	flex:1;max-width:112px;padding:13px 6px;border-radius:16px;
	border:1.5px solid var(--b-line2);
	background:linear-gradient(180deg, rgba(212,175,55,.05), rgba(0,0,0,.3));
	color:var(--b-txt);font-family:inherit;cursor:pointer;outline:none;
	display:flex;flex-direction:column;align-items:center;gap:3px;
	box-shadow:inset 0 1px 0 rgba(255,234,176,.08);
	transition:all .16s ease;
}
.game-page .choice .c-emoji{font-size:28px;line-height:1;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
.game-page .choice .c-label{font-size:11px;font-weight:800;letter-spacing:.08em;pointer-events:none;color:var(--gold-l);font-family:var(--b-serif);}
.game-page .choice:active:not(:disabled){transform:scale(.95);}
.game-page .choice:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(.5);}
.game-page .choice[data-pick="r"]{border-color:rgba(160,29,29,.45);}
.game-page .choice[data-pick="r"].selected{
	border-color:var(--red-l);background:linear-gradient(180deg, rgba(160,29,29,.18), rgba(0,0,0,.3));
	box-shadow:0 0 26px var(--red-glow), inset 0 1px 0 rgba(255,180,190,.25);
}
.game-page .choice[data-pick="p"]{border-color:rgba(60,179,113,.45);}
.game-page .choice[data-pick="p"].selected{
	border-color:var(--green);background:linear-gradient(180deg, rgba(60,179,113,.18), rgba(0,0,0,.3));
	box-shadow:0 0 26px var(--green-glow), inset 0 1px 0 rgba(150,240,190,.25);
}
.game-page .choice[data-pick="s"]{border-color:rgba(212,175,55,.45);}
.game-page .choice[data-pick="s"].selected{
	border-color:var(--gold);background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(0,0,0,.3));
	box-shadow:0 0 26px var(--gold-glow), inset 0 1px 0 rgba(255,234,176,.25);
}

/* ---------------- 底部操作 ---------------- */
.game-page .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;flex-shrink:0;}
.game-page .rps-btn{
	flex:1 1 44%;max-width:170px;padding:10px 8px;border-radius:12px;
	font-size:12.5px;font-weight:800;letter-spacing:.04em;font-family:var(--b-serif);
	cursor:pointer;outline:none;border:1.5px solid var(--b-line2);
	background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(0,0,0,.3));
	color:var(--gold-lo);box-shadow:inset 0 1px 0 rgba(255,234,176,.15);
	transition:all .16s ease;
}
.game-page .rps-btn:active:not(:disabled){transform:scale(.975);}
.game-page .rps-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5);}
.game-page .rps-btn-gold{
	border-color:var(--gold-d);color:var(--gold-l);
	background:linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.04));
	box-shadow:inset 0 1px 0 rgba(255,234,176,.18);
}
.game-page .rps-btn-danger{
	border-color:rgba(160,29,29,.45);color:var(--red-lo);
	background:linear-gradient(180deg, rgba(160,29,29,.15), rgba(160,29,29,.03));
	box-shadow:inset 0 1px 0 rgba(255,180,190,.15);
}
.game-page .tip-line{
	text-align:center;font-size:11.5px;color:var(--b-txt3);
	min-height:17px;flex-shrink:0;padding:0 8px;
	overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.game-page .tip-line .hl{
	color:var(--gold-l);font-weight:800;letter-spacing:.12em;font-family:var(--b-serif);
	text-shadow:0 0 10px rgba(212,175,55,.5);
}

/* ---------------- 比分 / 房内消息 / 改注（v2） ---------------- */
.game-page .player .p-score{
	color:var(--gold);font-weight:900;font-size:14px;flex-shrink:0;
	font-family:var(--b-serif);font-variant-numeric:tabular-nums;
	text-shadow:0 0 8px rgba(212,175,55,.6);
}
/* 房内消息：浮在牌桌中央，2.5 秒淡出（不挡操作：pointer-events:none） */
.game-page .battle-msg-panel{
	position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);z-index:40;
	pointer-events:none;display:flex;flex-direction:column;gap:6px;
	align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;
}
.game-page .battle-msg-panel.show{opacity:1;}
.game-page .battle-msg{
	display:inline-block;max-width:100%;padding:8px 16px;border-radius:20px;
	background:linear-gradient(180deg, rgba(20,12,8,.92), rgba(10,6,5,.92));
	border:1.5px solid var(--gold-d);color:var(--gold-l);
	font-size:13px;line-height:1.4;
	box-shadow:0 6px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,234,176,.15);
}
.game-page .battle-msg b{color:#ffeab0;font-weight:800;}

/* 右下角 FAB：打开房内快捷消息 */
.game-page .rps-fab{
	position:absolute;right:14px;bottom:calc(78px + var(--safe-bottom, 0px));z-index:50;
	width:52px;height:52px;border-radius:50%;padding:0;cursor:pointer;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
	border:1.5px solid var(--gold);color:var(--gold-l);font-family:var(--b-serif);
	background:radial-gradient(circle at 50% 30%, rgba(212,175,55,.2), rgba(10,6,5,.95));
	box-shadow:0 5px 18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,234,176,.3), 0 0 16px -4px rgba(212,175,55,.8);
}
.game-page .rps-fab:active{transform:scale(.92);}
.game-page .rps-fab .f-ico{font-size:20px;line-height:1;}
.game-page .rps-fab .f-lbl{font-size:9px;font-weight:800;line-height:1;}
.game-page .rps-fab .f-badge{
	position:absolute;top:-5px;right:-5px;display:none;min-width:20px;height:20px;line-height:20px;
	padding:0 6px;border-radius:20px;background:linear-gradient(180deg,#c24343,#a01d1d);color:#fff;
	font-size:10px;font-weight:800;text-align:center;box-shadow:0 0 12px var(--red-glow);
}
.game-page .rps-fab .f-badge.show{display:block;}

/* 快捷消息面板 */
.game-page .rps-qc{
	display:none;position:absolute;left:12px;right:12px;z-index:55;
	bottom:calc(84px + var(--safe-bottom, 0px));
	padding:12px;border-radius:var(--b-r-l);border:1.5px solid var(--gold-d);
	background:linear-gradient(180deg, rgba(13,58,43,.98), rgba(8,37,27,.98));
	box-shadow:0 12px 34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,234,176,.15), 0 0 22px -6px rgba(212,175,55,.6);
}
.game-page .rps-qc.show{display:block;animation:rpsQcSlide .22s cubic-bezier(.4,1.5,.5,1);}
@keyframes rpsQcSlide{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
.game-page .qc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.game-page .qc-title{
	font-family:var(--b-serif);font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--gold-l);
	text-shadow:0 0 8px rgba(212,175,55,.5);
}
.game-page .qc-close{
	width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	background:rgba(212,175,55,.08);border:1px solid var(--b-line2);color:var(--gold-lo);
	font-size:14px;line-height:1;cursor:pointer;
}
.game-page .qc-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.game-page .qc-btn{
	padding:10px 8px;border-radius:9px;border:1px solid var(--b-line2);
	background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(0,0,0,.35));
	color:var(--gold-l);font-family:inherit;font-size:12.5px;font-weight:700;line-height:1.35;
	text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	box-shadow:inset 0 1px 0 rgba(255,234,176,.1);
}
.game-page .qc-btn:active{transform:scale(.96);}
.game-page .qc-input-row{display:flex;gap:7px;margin-top:10px;}
.game-page .qc-custom-input{
	flex:1;min-width:0;padding:10px 14px;border-radius:9px;border:1.5px solid var(--b-line2);
	background:rgba(0,0,0,.45);color:var(--b-txt);font-size:13.5px;font-family:inherit;outline:none;
	box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.game-page .qc-custom-input::placeholder{color:var(--b-txt3);}
.game-page .qc-send-btn{
	flex-shrink:0;padding:0 20px;border-radius:9px;border:1.5px solid var(--gold);
	background:linear-gradient(180deg,#ffeab0,#d4af37 40%,#a88930);color:#1a1000;
	font-size:13px;font-weight:800;font-family:var(--b-serif);letter-spacing:.06em;cursor:pointer;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 12px rgba(212,175,55,.35);
}
.game-page .qc-send-btn:active{transform:scale(.95);}

/* 改注请求条：对方发起后显示「同意 / 拒绝」 */
.game-page .rps-betask{
	display:flex;align-items:center;gap:8px;flex-shrink:0;
	padding:9px 12px;border-radius:var(--b-r-m);
	background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(0,0,0,.3));
	border:1.5px solid var(--gold-d);
	box-shadow:inset 0 1px 0 rgba(255,234,176,.2), 0 0 18px -6px rgba(212,175,55,.6);
}
.game-page .rps-betask .ba-txt{
	flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--gold-l);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.game-page .rps-betask .rps-btn{flex:0 0 auto;max-width:none;padding:8px 14px;}

/* 小屏（窄机型）适当收一点手的大小，别把出拳键挤出屏幕 */
@media (max-height: 640px){
	.game-page .hand{width:68px;height:68px;font-size:34px;}
	.game-page .arena{min-height:146px;padding:16px 8px 14px;}
	.game-page .hand-countdown{font-size:30px;}
}

/* ==========================================================================
   ★ 主题隔离：游戏界面不受主题影响
   不管当前是「深色 / 个性装扮（换底色、背景图、自定义发色、字体）」，这一页永远
   用赌场金黑皮肤，和聊天、动态那些跟随主题的页面互不干扰。四层保险：
     ① 把主题变量在 .game-page 上钉死 —— 任何继承或同名规则引用 --card/--text/--line
        时拿到的都是游戏色，不会因为切主题而变色
     ② 背景 / 文字色用 !important（主题层对 .pub-page 的染色在 ID 选择器面前也压得住，
        这里再加一道，防止以后有人给主题加 !important）
     ③ 干掉主题可能加在这一页上的伪元素装饰（图案 / 暗角罩层）
     ④ color-scheme:dark：滚动条、表单控件也不会因为浅色主题变白
   ========================================================================== */
.game-page{
	--card:#140f0c; --bg:#0b0a09; --text:#f2efe6; --text-2:#c9c2b2; --text-3:#8d8579;
	--line:rgba(212,175,55,.18); --brand-blue:#d4af37;
	--deco-page:transparent; --deco-bar:transparent; --chat-bg:transparent;
	color-scheme:dark;
	color:#f2efe6 !important;
	font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(13,58,43,.9), transparent 70%),
		linear-gradient(180deg, #0b0a09, #120f0c 60%, #0b0a09) !important;
	isolation:isolate;              /* 独立层叠上下文：主题的罩层叠不进来 */
}
.game-page::before,
.game-page::after{content:none !important;display:none !important;background:none !important;}

/* 主题会给一批通用容器统一刷底色（.pub-body / .set-group / .game-card / .row …），
   万一游戏页里出现同名元素，也一律透明、不参与主题皮肤 */
.game-page .rps-main,
.game-page .players,
.game-page .player,
.game-page .arena,
.game-page .choices,
.game-page .actions{background-color:transparent;}

/* ⚠️ 别在这里给 .rps-title / .status-bar 这些写 color:inherit ——
   优先级和上面的金色规则一样、位置更靠后，会把金黑配色改成主题色。 */

/* ==========================================================================
   骰子比大小（复用上面的 .game-page 赌场风布局；骰子做成有体积感的真实骰子）
   --------------------------------------------------------------------------
   · 骰子白色圆角方块 + 顶部高光 + 底部内阴影 + 落桌投影 → 看起来像真的
   · 点数用 3×3 九宫格定位（.p1 ~ .p9），按面数拼点位，不用字体字符（⚀⚁⚂）
   · 未摇=暗色空骰子；保密=问号骰子；摇=抖动旋转；结算=赢的金光 / 输的压暗
   ========================================================================== */

/* 牌桌：中间放骰子托盘（.dice-board 避免和 style.css 里旧的 .dice-arena 规则打架） */
.game-page .dice-board{align-items:center;padding:18px 6px 14px;min-height:196px;}
.game-page .dice-tray{
	width:100%;min-height:66px;
	display:flex;align-items:center;justify-content:center;gap:10px;
	padding:10px 8px;border-radius:14px;
	/* 骰子直接摆在牌桌上：不画托盘底色/内阴影（原来那两块深色块就是它） */
	background:none;
	box-shadow:none;
	transition:opacity .2s ease, visibility .2s ease;
}
.game-page .dice-sum{
	margin-top:2px;font-family:var(--b-serif);font-size:11.5px;font-weight:800;
	color:var(--gold-lo);letter-spacing:.06em;text-align:center;white-space:nowrap;
}
.game-page .dice-sum.win{color:var(--gold-l);text-shadow:0 0 12px rgba(212,175,55,.7);}
.game-page .dice-sum.lose{color:var(--red-lo);}

/* 骰子本体 */
.game-page .cube{
	position:relative;width:50px;height:50px;flex:0 0 auto;border-radius:12px;
	background:radial-gradient(circle at 30% 24%, #ffffff 0%, #f5f2ea 46%, #d9d3c5 100%);
	border:1px solid rgba(255,255,255,.8);
	box-shadow:
		0 7px 13px rgba(0,0,0,.55),
		0 2px 3px rgba(0,0,0,.35),
		inset 0 2px 3px rgba(255,255,255,.95),
		inset 0 -4px 9px rgba(120,108,86,.35);
	transform:rotate(var(--rot,0deg));
	animation:cubeIn .24s ease;
}
@keyframes cubeIn{
	from{transform:rotate(var(--rot,0deg)) scale(.72);opacity:.35;}
	to{transform:rotate(var(--rot,0deg)) scale(1);opacity:1;}
}
/* 点数（3×3 九宫格） */
.game-page .cube .pip{
	position:absolute;width:9px;height:9px;border-radius:50%;
	background:radial-gradient(circle at 35% 30%, #6e6e6e, #131313 72%);
	box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 1px 1px rgba(255,255,255,.55);
}
.game-page .cube .p1{left:8px;top:8px;}
.game-page .cube .p2{left:50%;top:8px;margin-left:-4.5px;}
.game-page .cube .p3{right:8px;top:8px;}
.game-page .cube .p4{left:8px;top:50%;margin-top:-4.5px;}
.game-page .cube .p5{left:50%;top:50%;margin:-4.5px 0 0 -4.5px;}
.game-page .cube .p6{right:8px;top:50%;margin-top:-4.5px;}
.game-page .cube .p7{left:8px;bottom:8px;}
.game-page .cube .p8{left:50%;bottom:8px;margin-left:-4.5px;}
.game-page .cube .p9{right:8px;bottom:8px;}

/* 三种特殊状态 */
.game-page .cube.blank{opacity:.4;filter:grayscale(.25);box-shadow:0 4px 8px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.7);}
.game-page .cube.q{
	display:flex;align-items:center;justify-content:center;
	font-family:var(--b-serif);font-size:23px;font-weight:900;color:#9a8a68;
	text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.game-page .cube.rolling{animation:diceRoll .62s cubic-bezier(.35,.1,.3,1);}
@keyframes diceRoll{
	0%  {transform:rotate(0deg) translateY(0) scale(1);}
	18% {transform:rotate(-34deg) translateY(-15px) scale(1.07);}
	38% {transform:rotate(26deg) translateY(7px) scale(.95);}
	58% {transform:rotate(-19deg) translateY(-10px) scale(1.04);}
	78% {transform:rotate(11deg) translateY(4px) scale(.99);}
	100%{transform:rotate(var(--rot,0deg)) translateY(0) scale(1);}
}
.game-page .cube.win{
	box-shadow:
		0 0 0 2px var(--gold-l),
		0 7px 16px rgba(0,0,0,.55),
		0 0 28px rgba(212,175,55,.8),
		inset 0 2px 3px rgba(255,255,255,.95);
}
.game-page .cube.lose{filter:grayscale(.55) brightness(.82);}

/* ==========================================================================
   游戏 · 「设底注」弹窗（#dlg 上加 .dlg-game）
   --------------------------------------------------------------------------
   普通弹窗吃主题变量（--card / --text / --brand-blue），换自定义主题就会变白/变粉。
   这里整套换成赌场风，并且用 **#dlg.dlg-game** 前缀（ID 优先级）写死色值，
   主题 / 自定义主题的类选择器盖不动；遮罩也压暗，像牌桌。
   加/去类见 app.js 的 pickDiceBet / pickRpsBet 与 closeDialogUI。
   ========================================================================== */
#dlg.dlg-game{
	--gold:#d4af37; --gold-l:#ffeab0; --gold-d:#8a7327; --gold-lo:#c9b267;
	--b-txt:#f2efe6; --b-txt2:#c9c2b2; --b-txt3:#8d8579;
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(13,58,43,.85), transparent 72%),
		linear-gradient(180deg,#100d0a,#191410 60%,#0d0a08) !important;
	border:1.5px solid rgba(212,175,55,.35);
	border-radius:16px;
	box-shadow:0 20px 50px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,234,176,.12);
	color:var(--b-txt);
	font-family:-apple-system,"PingFang SC","Helvetica Neue",Roboto,"Microsoft YaHei",sans-serif;
}
#dlg.dlg-game .dlg-title{
	font-family:Georgia,"Songti SC","STSong",serif;
	font-size:16px;font-weight:900;letter-spacing:.1em;
	color:var(--gold-l);text-shadow:0 0 14px rgba(212,175,55,.5);
	margin-bottom:16px;
}
#dlg.dlg-game .dlg-text{text-align:left;color:var(--b-txt2);font-size:14px;line-height:1.6;}
#dlg.dlg-game .dlg-text b{color:var(--gold-l);}
#dlg.dlg-game .dlg-input{
	background:rgba(0,0,0,.45);
	border:1.5px solid rgba(212,175,55,.3);
	border-radius:12px;
	color:var(--gold-l);font-size:17px;font-weight:700;letter-spacing:.06em;
	box-shadow:inset 0 2px 8px rgba(0,0,0,.5);
}
#dlg.dlg-game .dlg-input::placeholder{
	color:rgba(201,178,103,.55);font-weight:400;letter-spacing:0;font-size:13.5px;
}
#dlg.dlg-game .dlg-input:focus{
	border-color:var(--gold);
	box-shadow:inset 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(212,175,55,.18);
}
#dlg.dlg-game .place-tip{
	margin-top:10px;font-size:11.5px;line-height:1.6;color:var(--b-txt3);
}
#dlg.dlg-game .dlg-foot{margin-top:18px;}
#dlg.dlg-game .dlg-btn{
	background:rgba(0,0,0,.35);
	border:1.5px solid rgba(212,175,55,.28);
	color:var(--b-txt2);border-radius:12px;font-weight:600;
}
#dlg.dlg-game .dlg-btn.primary{
	background:linear-gradient(180deg,#f0d98b,#d4af37 55%,#b8942c);
	border-color:rgba(255,234,176,.6);
	color:#241a05;font-weight:800;
	box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
#dlg.dlg-game .dlg-btn.primary:active{filter:brightness(1.06);}
#dlg.dlg-game .dlg-btn:disabled{opacity:.5;}
/* 弹窗遮罩：压暗，像牌桌 */
#dlgMask.game-mask{background:rgba(0,0,0,.72);}

/* ---- 游戏列表（同一个 #dlg.dlg-game 弹窗里的每一行）---- */
#dlg.dlg-game .game-row{
	background:linear-gradient(180deg, rgba(212,175,55,.07), rgba(0,0,0,.32));
	border:1.5px solid rgba(212,175,55,.28);
	border-radius:12px;
	box-shadow:inset 0 1px 0 rgba(255,234,176,.08);
}
#dlg.dlg-game .game-row:active{
	background:linear-gradient(180deg, rgba(212,175,55,.16), rgba(0,0,0,.32));
	transform:scale(.99);
}
#dlg.dlg-game .game-row .g-txt b{
	color:var(--gold-l);font-weight:800;letter-spacing:.04em;
	font-family:Georgia,"Songti SC","STSong",serif;
}
#dlg.dlg-game .game-row .g-txt i{color:var(--b-txt3);}
#dlg.dlg-game .game-row .g-tag{
	color:#241a05;font-weight:800;font-size:11px;
	padding:3px 9px;border-radius:8px;
	background:linear-gradient(180deg,#f0d98b,#d4af37 60%,#b8942c);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---- 状态条右侧的倒计时（每秒本地跳动；剩 10 秒变红）---- */
.game-page .status-meta i.warn{color:#ff8a8a;text-shadow:0 0 10px rgba(255,80,80,.45);}