:root {
	--jw-bg: #070909;
	--jw-panel: rgba(7, 19, 25, 0.82);
	--jw-line: rgba(112, 187, 210, 0.45);
	--jw-text: #f3f7f4;
	--jw-muted: #9dc7d8;
	--jw-accent: #d9b455;
	--jw-blue: #4ed7ff;
	--jw-green: #50d68a;
	--jw-red: #ff705c;
}
html, body { background: var(--jw-bg); color: var(--jw-text); }
#jw-poker-app { height: 100%; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.jw-poker-stage { position: relative; width: min(1600px, 100%); height: 100%; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: radial-gradient(circle at 50% 43%, rgba(92,67,44,0.7), rgba(10,10,10,0.98) 68%); }
.jw-top-tools { position: absolute; top: 24px; right: 28px; z-index: 5; display: flex; gap: 14px; }
.jw-icon-btn { width: 56px; height: 56px; border: 2px solid rgba(92,215,255,0.65); border-radius: 50%; background: rgba(8,18,28,0.78); color: #fff; font-size: 26px; font-weight: 800; cursor: pointer; box-shadow: 0 0 18px rgba(78,215,255,0.25); }
.jw-table { position: absolute; left: 9%; right: 9%; top: 28%; height: 44%; border-radius: 50%; background: radial-gradient(circle, #b34839 0%, #9f3e32 52%, #4d281e 72%, #25160f 100%); box-shadow: inset 0 0 34px rgba(255,255,255,0.12), 0 24px 50px rgba(0,0,0,0.62); }
.jw-table::before { content: ""; position: absolute; inset: -24px; border-radius: 50%; border: 24px solid rgba(62,36,24,0.9); box-shadow: inset 0 0 18px rgba(0,0,0,0.9); pointer-events: none; }
.jw-board { position: absolute; left: 50%; top: 31%; z-index: 2; display: flex; gap: 10px; transform: translateX(-50%); }
.jw-board span { display: grid; place-items: center; width: 58px; height: 82px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); box-shadow: inset 0 0 10px rgba(0,0,0,0.35); }
.jw-pot-box { position: absolute; left: calc(50% + 400px); top: 51%; z-index: 3; display: grid; justify-items: center; transform: translate(-50%, -50%); color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.7); }
.jw-pot-box small { font-size: 15px; color: #d9eefe; }
.jw-pot-box strong { font-size: 28px; letter-spacing: 0; }
.jw-pot-box em { margin-top: 2px; color: rgba(217,238,254,0.82); font-size: 12px; font-style: normal; }
.jw-status-panel { position: absolute; left: 50%; bottom: 16%; z-index: 3; display: flex; gap: 12px; padding: 9px 18px; border: 1px solid var(--jw-line); border-radius: 999px; background: rgba(6,13,17,0.64); color: #dff6ff; font-size: 16px; transform: translateX(-50%); }
.jw-status-panel.is-flash { animation: jw-status-flash 0.7s ease-in-out 0s 4; }
.jw-seat { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px; width: 280px; }
.jw-seat-pc { left: 50%; top: 14%; width: 460px; min-height: 150px; justify-content: space-between; transform: translateX(-50%); }
.jw-seat-player { left: 50%; bottom: 9%; transform: translateX(-50%); }
.jw-seat-art { position: absolute; left: 50%; bottom: 0; z-index: -1; width: 390px; opacity: 1; pointer-events: none; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.jw-seat-pc .jw-seat-profile { z-index: 2; width: 150px; padding-bottom: 0; }
.jw-seat-pc .jw-seat-cards { z-index: 2; margin-top: 44px; }
.jw-seat-profile { position: relative; display: grid; justify-items: center; width: 118px; padding-bottom: 30px; }
#jw-poker-app .jw-avatar { display: block; width: 150px; height: 120px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#jw-poker-app .jw-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jw-seat-info { position: absolute; left: 50%; bottom: 0; min-width: 150px; padding: 6px 12px; border: 1px solid rgba(145,222,255,0.42); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(18,47,59,0.42)); text-align: center; transform: translateX(-50%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 18px rgba(0,0,0,0.35); backdrop-filter: blur(10px); }
.jw-seat-info strong { display: block; color: var(--jw-blue); font-size: 19px; line-height: 1.1; }
.jw-seat-info span { display: block; margin-top: 4px; color: #eaf6fb; font-size: 18px; font-weight: 800; }
.jw-seat-cards { display: flex; gap: 6px; }
.jw-seat-cards i { display: grid; place-items: center; width: 64px; height: 92px; border: 0; border-radius: 6px; background: url("../cards/Back_Clubs.png") center / contain no-repeat; color: #111; font-size: 0; transform: rotate(-7deg); box-shadow: 0 6px 12px rgba(0,0,0,0.35); }
.jw-seat-cards i + i { transform: rotate(8deg); }
.jw-player-cards i { width: 64px; height: 92px; color: #111; font-size: 32px; font-weight: 900; }
.jw-board span.is-front, .jw-seat-cards i.is-front { background-position: center; background-size: contain; background-repeat: no-repeat; color: transparent; font-size: 0; }
.jw-board span.is-red, .jw-seat-cards i.is-red { color: #c9232f; }
.jw-board span.is-empty { background-image: none; color: transparent; }
.jw-deal-card { position: absolute; z-index: 20; width: 64px; height: 92px; border-radius: 6px; background: url("../cards/Back_Clubs.png") center / contain no-repeat; pointer-events: none; transition: transform 0.42s ease, opacity 0.42s ease; box-shadow: 0 10px 22px rgba(0,0,0,0.45); }
.jw-action-btn.is-hidden { visibility: hidden; pointer-events: none; }
.jw-action-btn:disabled { opacity: 0.38; cursor: default; }
.jw-action-bar { position: absolute; right: 3%; bottom: 4%; z-index: 6; display: flex; gap: 18px; }
.jw-action-btn { min-width: 180px; height: 64px; border: 2px solid currentColor; border-radius: 999px; background: rgba(0,0,0,0.76); font-size: 24px; font-weight: 800; cursor: pointer; box-shadow: 0 0 18px currentColor; }
.jw-fold-btn { color: var(--jw-red); opacity: 0.72; }
.jw-check-btn { color: var(--jw-blue); }
.jw-call-btn { color: var(--jw-green); }
.jw-action-btn.is-active { background: rgba(255,255,255,0.12); }
@media (max-width: 640px) {
	#jw-poker-app { padding: 0; }
	.jw-poker-stage { width: 100vw; height: 100%; min-height: 0; }
	.jw-top-tools { top: 12px; right: 12px; gap: 8px; }
	.jw-icon-btn { width: 44px; height: 44px; font-size: 20px; }
	.jw-table { left: -22%; right: -22%; top: 31%; height: 36%; }
	.jw-board span { width: 42px; height: 60px; }
	.jw-status-panel { bottom: 10%; width: 84%; justify-content: center; gap: 8px; font-size: 12px; }
	.jw-seat { width: 220px; gap: 8px; }
	.jw-seat-pc { top: 14%; width: 330px; min-height: 120px; }
	.jw-seat-player { bottom: 20%; }
	.jw-seat-art { width: 280px; }
	.jw-seat-profile { width: 108px; padding-bottom: 28px; }
	#jw-poker-app .jw-avatar { width: 118px; height: 96px; }
	.jw-seat-info { min-width: 142px; padding: 7px 10px; }
	.jw-seat-info strong { font-size: 16px; }
	.jw-seat-info span { font-size: 15px; }
	.jw-seat-cards i, .jw-player-cards i { width: 54px; height: 78px; font-size: 26px; }
	.jw-action-bar { left: 12px; right: 12px; bottom: 18px; gap: 8px; }
	.jw-action-btn { min-width: 0; flex: 1; height: 52px; font-size: 15px; }
}
@keyframes jw-status-flash {
	0%, 100% { box-shadow: 0 0 0 rgba(78,215,255,0); color: #dff6ff; }
	50% { box-shadow: 0 0 18px rgba(78,215,255,0.95), 0 0 34px rgba(217,180,85,0.5); color: #fff; }
}
