:root{font-family:system-ui,"PingFang SC",sans-serif;color:#fff3df;background:#245b48;font-synthesis:none;--green:#367d60;--dark:#253b39;--red:#fe5f55;--blue:#009dff;--orange:#fda200;--cream:#fff3df;--gold:#f3b958}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #ffe1a0;outline-offset:4px}#game{height:100dvh;min-height:320px;position:relative;overflow:hidden;isolation:isolate;background:repeating-conic-gradient(from 14deg at 15% 110%,#36755c 0deg 16deg,#2d6b54 18deg 35deg,#326f57 38deg 55deg)}#game:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0b312418 0 1px,transparent 1px 3px);pointer-events:none;z-index:20}#game:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #123b2c4d;z-index:-1}.top{height:43px;display:flex;align-items:center;gap:12px;padding:4px max(14px,env(safe-area-inset-right));position:relative;z-index:6}.wordmark{font-family:ui-monospace,monospace;font-weight:950;letter-spacing:1px;color:#fff3df;font-size:17px;white-space:nowrap;text-shadow:2px 3px #214739}.room{font-size:11px;color:#e0e7c7;font-weight:650}.spacer{flex:1}.tiny,.game-switch{min-height:32px;border:0;background:#314b44;border-radius:4px;padding:5px 10px;font-size:11px;font-weight:750;box-shadow:0 4px #1c352e}.game-switch{background:#fda200;color:#fff7e8;box-shadow:0 4px #a56613;text-shadow:1px 1px #ab661a}.scene{position:absolute;inset:43px 0 0}.table,.spark{display:none}.center{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;z-index:2}.pot{color:#f3b958;font-size:28px;font-family:ui-monospace,monospace;font-weight:950;text-shadow:2px 3px #244537;font-variant-numeric:tabular-nums;white-space:nowrap}.pot small{font-family:system-ui,sans-serif;font-size:11px;font-weight:650;color:#f5edcf;display:block;margin-top:-2px;text-shadow:1px 2px #244537}.pot:before{content:"底池 ";font:750 11px system-ui,sans-serif;vertical-align:middle;color:#e6e7cb}.board{display:flex;gap:9px;margin-top:12px;justify-content:center}.playing{position:relative;width:55px;height:76px;border-radius:4px;background:#fff3df;color:#374244;font-family:Georgia,serif;font-size:26px;font-weight:800;padding:4px 7px;box-shadow:0 4px #b8b3a2,3px 7px #153f3066;display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0}.playing b{align-self:flex-end;font-size:31px;line-height:1}.playing.red{color:#ef544b}.playing.empty{border:3px solid #78a18450;background:#224b3a44;color:#a5c69c44;box-shadow:none;align-items:center;justify-content:center;font-size:25px}.phase{font-size:10px;color:#e0e5c3;margin-top:11px;font-weight:700;letter-spacing:3px}.seat{position:absolute;transform:translate(-50%,-50%);width:110px;text-align:center;z-index:3}.portrait{width:61px;height:64px;margin:auto;border:4px solid #e2d6b6;border-radius:3px;background:var(--avatar-color,#7f9b7b);display:flex;align-items:center;justify-content:center;font-size:39px;box-shadow:0 5px #244438,3px 7px #173b2c55;position:relative;transform:rotate(-3deg)}.seat:nth-child(even) .portrait{transform:rotate(4deg)}.seat.active .portrait{border-color:var(--orange);box-shadow:0 5px #aa651b}.badge{position:absolute;right:-8px;bottom:-6px;font:800 9px ui-monospace,monospace;background:#fda200;border:2px solid #fee0a9;color:#553a1a;border-radius:2px;padding:0 3px}.name{font-size:11px;margin-top:7px;text-shadow:1px 2px #234331;font-weight:750}.stack{font-size:12px;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:900;color:#f3b958;white-space:nowrap;text-shadow:1px 2px #234331}.seat.folded .portrait{filter:saturate(.35);opacity:.72}.backs{position:absolute;top:22px;left:79px;display:flex;transform:rotate(13deg)}.back{width:21px;height:30px;border:2px solid #fff3df;border-radius:2px;background:repeating-conic-gradient(#fe5f55 0 25%,#b4423e 0 50%) 0 0/6px 6px;box-shadow:0 3px #233f33}.back+.back{margin-left:-10px;transform:rotate(12deg)}.action-tag{font-size:10px;font-weight:750;position:absolute;top:0;left:78px;background:#31483f;padding:3px 5px;border-radius:3px;white-space:nowrap;color:#fff3df;box-shadow:0 3px #1b352b}.seat:nth-child(3) .action-tag{background:#fe5f55;box-shadow:0 3px #ab3d38}.speech{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) rotate(-3deg);background:#fff3df;color:#374244;border:0;border-radius:4px;padding:7px 10px;font-size:11px;font-weight:750;white-space:nowrap;box-shadow:0 4px #b9b39f;max-width:170px;z-index:5}.speech:after{content:"";position:absolute;top:-6px;left:43%;width:10px;height:8px;background:#fff3df;clip-path:polygon(0 100%,100% 100%,0 0)}.hero{position:absolute;left:18%;bottom:16px;display:flex;align-items:center;gap:19px;z-index:4}.self{text-align:center}.self .portrait{border-color:#f3b958;width:59px;height:62px;font-size:38px;cursor:pointer;background:#edaa64;box-shadow:0 5px #a46727}.self .name{margin-top:5px}.hand{display:flex;gap:8px;align-self:center;transform:rotate(-7deg);margin-top:-12px}.hand .playing{width:62px;height:85px;font-size:29px}.hand .playing:nth-child(2){transform:rotate(11deg) translateY(2px)}.hand .playing:nth-child(3){transform:rotate(17deg) translateY(7px)}.hand .playing.hidden-card{color:#fff3df;background:repeating-conic-gradient(#009dff 0 25%,#0875b7 0 50%) 0 0/8px 8px;border:3px solid #fff3df;align-items:center;justify-content:center;font:24px ui-monospace,monospace}.hand-label{position:absolute;left:87px;bottom:-10px;font-size:10px;color:#f1e9cb;white-space:nowrap;font-weight:750}.controls{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:23px;width:300px;z-index:6}.turn{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:#fff2d4;margin-bottom:9px;text-shadow:1px 2px #244735}.turn .timer{color:#f3b958}.actions{display:flex;gap:8px}.action{border:0;background:#009dff;border-radius:4px;min-height:53px;flex:1;font-size:17px;font-weight:850;box-shadow:0 6px #006ba9;padding:7px 9px;white-space:nowrap;text-shadow:1px 2px #006cab}.action small{display:block;font-size:10px;font-weight:700;margin-top:1px}.action.fold{background:#fe5f55;box-shadow:0 6px #a93e3c;color:#fff3df;text-shadow:1px 2px #ab3d38}.action.main{background:#fda200;color:#fff3df;box-shadow:0 6px #a96317;text-shadow:1px 2px #ad6818}.action:active{transform:translateY(3px);box-shadow:0 3px #254036}.quick{position:absolute;bottom:22px;left:15px;display:flex;gap:10px;z-index:7}.icon-button{width:39px;height:39px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:0;background:#314b44;box-shadow:0 4px #1c352e;font-size:18px}.toast{position:absolute;left:50%;top:37%;transform:translateX(-50%);background:#374244;color:#fff3df;box-shadow:0 4px #20322e;border-radius:4px;padding:8px 15px;font-size:12px;font-weight:750;z-index:10;white-space:nowrap}.popover{position:absolute;right:22px;bottom:108px;width:300px;padding:14px;background:#374244;border:4px solid #e2d6b6;border-radius:4px;box-shadow:0 6px #23332f;z-index:8}.popover strong{font-size:13px;color:#f3b958}.popover p{font-size:12px;margin:8px 0;color:#fff3df}.popover .close{float:right;background:transparent;border:0;font-size:17px}.amount{text-align:center;padding:8px 0;font-size:18px;font-weight:800;color:#f3b958}input[type=range]{width:100%;accent-color:#009dff;min-height:25px}.presets{display:flex;gap:6px;margin:8px 0}.presets button{flex:1;background:#4f6367;border:0;box-shadow:0 3px #26393b;border-radius:3px;padding:6px;font-size:11px}.confirm{width:100%;padding:9px;border:0;border-radius:3px;background:#fda200;box-shadow:0 3px #a56516;color:#fff3df;font-size:13px;font-weight:800}dialog{background:#374244;color:#fff3df;border:5px solid #e2d6b6;border-radius:4px;width:min(400px,90vw);padding:20px;box-shadow:0 7px #1e332d}dialog::backdrop{background:#122d26b3}dialog h2{margin:0 0 14px;font-size:17px}.avatars{display:flex;gap:12px;flex-wrap:wrap}.avatars button{font-size:32px;min-width:58px;min-height:58px;border-radius:3px;background:#4f6367;border:3px solid #d9d5bd;box-shadow:0 4px #243b35}.dialog-close{float:right;border:0;background:transparent;font-size:18px}.portrait:hover{rotate:-4deg}.portrait{transition:rotate .18s}.rotate-hint{display:none}[hidden]{display:none!important}.hero .speech{top:auto;bottom:calc(100% + 17px);left:26%}.hero .speech:after{top:auto;bottom:-6px;rotate:180deg}
@media(min-width:1100px){.top{height:55px;padding-left:2%;padding-right:2%}.scene{top:55px}.wordmark{font-size:23px}.tiny,.game-switch,.room{font-size:14px}.portrait{width:88px;height:94px;font-size:58px;border-width:5px}.seat{width:145px}.backs{left:106px;top:36px}.back{width:30px;height:42px}.back+.back{margin-left:-16px}.name,.stack{font-size:16px}.action-tag{left:108px;font-size:13px}.speech{font-size:15px;padding:10px 14px;top:calc(100% + 17px)}.playing{width:95px;height:130px;font-size:43px;border-radius:5px;padding:7px 12px;box-shadow:0 6px #b8b3a2,4px 9px #153f3066}.playing b{font-size:51px}.board{gap:14px;margin-top:20px}.pot{font-size:49px}.pot small{font-size:15px}.pot:before{font-size:16px}.phase{font-size:14px;margin-top:18px}.hero{left:21%;bottom:30px;gap:30px}.self .portrait{width:85px;height:92px;font-size:56px}.hand .playing{width:105px;height:146px;font-size:46px}.hand{gap:12px}.hand-label{left:120px;font-size:14px;bottom:-17px}.controls{width:420px;right:4%;bottom:40px}.action{min-height:76px;font-size:25px}.action small{font-size:14px}.turn{font-size:16px;margin-bottom:14px}.popover{width:380px;right:4%;bottom:153px}.popover p{font-size:15px}.quick{bottom:40px;left:2%}.icon-button{width:48px;height:48px;font-size:21px}}
@media(max-width:740px) and (orientation:landscape){.top{gap:8px}.room{font-size:10px}.wordmark{font-size:14px}.tiny,.game-switch{font-size:10px;padding:5px 8px}.portrait{width:52px;height:57px;font-size:33px}.seat{width:91px}.backs{left:67px;top:20px}.action-tag{left:65px;font-size:9px}.name{font-size:10px}.stack{font-size:11px}.playing{width:46px;height:65px;font-size:23px}.playing b{font-size:27px}.board{gap:7px}.controls{width:261px;bottom:18px;right:15px}.action{font-size:14px;min-height:49px}.turn{font-size:11px}.hero{left:17%;gap:14px;bottom:14px}.self .portrait{width:51px;height:56px;font-size:32px}.hand .playing{width:52px;height:73px;font-size:24px}.hand-label{left:72px}.quick{left:12px;bottom:18px;flex-direction:column;gap:8px}.icon-button{width:34px;height:34px;font-size:16px}.speech{font-size:10px;padding:6px 8px}.popover{width:261px;right:15px;bottom:99px}}
@media(max-height:355px) and (orientation:landscape){.top{height:35px}.scene{top:35px}.portrait{width:48px;height:50px;font-size:29px}.name{margin-top:4px}.playing{height:56px;width:41px;font-size:20px}.playing b{font-size:23px}.board{margin-top:8px;gap:6px}.pot{font-size:23px}.phase{margin-top:7px}.hand .playing{width:46px;height:64px}.hand-label{bottom:-10px}.hero{bottom:13px}.controls{bottom:15px}.speech{top:calc(100% + 5px)}.popover{bottom:92px}}
@media(orientation:portrait) and (max-width:700px){.rotate-hint{display:flex;position:absolute;inset:0;z-index:30;background:#245b48;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:30px;text-align:center}.rotate-hint .rotate{font-size:64px;transform:rotate(-25deg)}.rotate-hint strong{font-size:22px;color:#f3b958}.rotate-hint p{font-size:14px;color:#d6dfbf;margin:0}.rotate-hint button{margin-top:8px;border:0;border-radius:4px;background:#fda200;box-shadow:0 5px #a56516;padding:12px 20px;font-weight:750}.portrait-preview .rotate-hint{display:none}.portrait-preview .scene{width:760px;height:340px;transform-origin:top left;transform:scale(var(--preview-scale));top:calc(50% - 90px)}.portrait-preview .top{gap:5px}.portrait-preview .room{display:none}.portrait-preview .wordmark{font-size:11px}}
@media(prefers-reduced-motion:no-preference){.speech{animation:pop .2s steps(4)}.hand .playing{transition:translate .15s}.hand .playing:hover{translate:0 -7px}@keyframes pop{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Compact decorative pot cluster: irregular levels and stable offsets. */
.pot-display{display:flex;justify-content:center;align-items:center;gap:10px;height:49px}
.chip-pile{width:108px;height:49px;flex:none;filter:drop-shadow(2px 3px 0 #173b2c77)}
.chip-pile svg{display:block;width:100%;height:100%;overflow:visible}
@media(min-width:1100px){.pot-display{height:82px;gap:18px}.chip-pile{width:175px;height:78px}}
@media(max-height:355px) and (orientation:landscape){.pot-display{height:43px;gap:7px}.chip-pile{width:92px;height:42px}}

/* Exact-denomination chips; new nodes land above existing chips. */
.chip-pile{padding:0;border:0;background:transparent;cursor:pointer}
#chip-camera{transform-origin:0 0;transition:transform 240ms steps(6,end)}
.chip-land{animation:chip-land 360ms steps(6,end) both}
@keyframes chip-land{0%{transform:translate(23px,-47px) rotate(-14deg);opacity:0}16%{opacity:1}55%{transform:translate(0,1px) scale(1.13,.83)}77%{transform:translate(-1px,-6px) rotate(3deg)}100%{transform:translate(0,0) scale(1)}}
.chip-key{display:inline-block;width:12px;height:8px;border-radius:50%;background:var(--chip-color);margin-right:7px;box-shadow:0 2px #182e29}
#chip-breakdown{line-height:1.9}
.action:disabled{opacity:.5;cursor:default;transform:none}
@media(prefers-reduced-motion:reduce){.chip-land{animation:none}#chip-camera{transition:none}}
/* Keep the cluster clear of the upper-left speech bubble on compact screens. */
@media(max-width:740px) and (orientation:landscape){.pot-display{position:relative;left:6px}}
/* Zha Jin Hua: blue closed hands, orange opened hands; never reveal opponents' faces. */
.vision-icon{display:inline-block;position:relative;width:12px;height:8px;flex:none;vertical-align:middle;margin-right:4px;color:inherit}
.vision-icon.eye-open{border:1.5px solid currentColor;border-radius:65% 65% 60% 60%}
.vision-icon.eye-open:after{content:"";position:absolute;width:3px;height:3px;background:currentColor;left:3px;top:1px;border-radius:50%}
.vision-icon.eye-closed{border-bottom:1.5px solid currentColor;border-radius:0 0 60% 60%}
.vision-icon.eye-closed:after{content:"";position:absolute;width:15px;height:1.5px;background:currentColor;left:-2px;top:4px;transform:rotate(-40deg)}
#game[data-game="zjh"] .seat.is-blind .portrait{border-color:#76c9fa;box-shadow:0 5px #18658a,3px 7px #173b2c55}
#game[data-game="zjh"] .seat.is-blind .back{background:repeating-conic-gradient(#009dff 0 25%,#08649b 0 50%) 0 0/6px 6px;border-color:#b9e5fa}
#game[data-game="zjh"] .seat.is-blind .back+.back{margin-left:-15px;transform:rotate(3deg)}
#game[data-game="zjh"] .seat.is-blind .action-tag{background:#08649b;box-shadow:0 3px #174a61;color:#e2f3fc}
#game[data-game="zjh"] .seat.is-seen .portrait{border-color:#fda200;box-shadow:0 5px #a76612,3px 7px #173b2c55}
#game[data-game="zjh"] .seat.is-seen .back{border-color:#f3b958}
#game[data-game="zjh"] .seat.is-seen .backs{transform:rotate(-12deg)}
#game[data-game="zjh"] .seat.is-seen .back+.back{margin-left:-8px;transform:rotate(16deg)}
#game[data-game="zjh"] .seat.is-seen .back:nth-child(3){transform:rotate(29deg) translateY(3px)}
#game[data-game="zjh"] .seat.is-seen .action-tag{background:#fda200;box-shadow:0 3px #a76612;color:#302719}
.self{position:relative}
.self-vision{position:absolute;right:-7px;top:-5px;width:23px;height:20px;display:flex;align-items:center;justify-content:center;border:2px solid #fff3df;border-radius:3px}
.self-vision .vision-icon{margin:0}
.hero.is-blind .self-vision{background:#08649b;color:#e2f3fc}
.hero.is-seen .self-vision{background:#fda200;color:#302719}
.hero.is-blind .self .portrait{border-color:#76c9fa;box-shadow:0 5px #18658a}
.hero.is-seen .self .portrait{border-color:#fda200;box-shadow:0 5px #a76612}
.hero.is-blind .hand{gap:0;transform:rotate(-4deg)}
.hero.is-blind .hand .playing+.playing{margin-left:-26px;transform:rotate(3deg)}
.hero.is-blind .hand .playing:nth-child(3){transform:rotate(6deg)}
.hero.is-blind .hand-label{color:#b9e5fa}
.hero.is-seen .hand-label{color:#ffce77}
#game[data-game="zjh"] .look-action{background:#fff3df;color:#374244;text-shadow:none;box-shadow:0 6px #b0a68f}
.look-action .vision-icon{width:16px;height:10px;margin-right:7px;vertical-align:1px}
.look-action .vision-icon:after{left:5px;top:2px}
#game[data-game="zjh"]:has(.hero.is-blind) .action.main{background:#009dff;box-shadow:0 6px #006ba9;text-shadow:1px 2px #006cab}
@media(min-width:1100px){.hero.is-blind .hand .playing+.playing{margin-left:-42px}.self-vision{width:27px;height:24px}.vision-icon{width:14px;height:9px}.self-vision .vision-icon:after{left:4px;top:2px}}
@media(max-width:740px) and (orientation:landscape){#game[data-game="zjh"] .seat.is-seen .back+.back{margin-left:-12px}.hero.is-blind .hand .playing+.playing{margin-left:-23px}}
/* Each player's exact hand contribution surrounds one central pot total. */
.center{top:36%;width:76%;max-width:920px;transform:translateX(-50%)}
.pot-display{height:145px;width:100%;display:block;position:relative;left:0}
.pot-display>.pot{position:absolute;left:50%;top:17%;translate:-50% -50%;z-index:2}
.contribution-ring{position:absolute;inset:0}
.owner-pile{position:absolute;translate:-50% -50%;border:0;padding:0;background:transparent;min-width:76px;color:#fff3df;text-align:center;z-index:3}
.owner-pile .chip-pile{display:block;width:83px;height:38px;margin:auto}
.owner-caption{display:flex;justify-content:center;align-items:baseline;gap:4px;white-space:nowrap;font-size:10px;text-shadow:1px 2px #244537}
.owner-total{color:#f3b958;font:900 13px ui-monospace,monospace;display:inline-block}
.owner-name{color:#f0ecd5}
.own-contribution .owner-name{color:#f3b958}
.folded-contribution .owner-name{color:#b5c4b0}
.owner-pile:nth-child(1){left:20%;top:8%}
.owner-pile:nth-child(2){left:0;top:45%}
.owner-pile:nth-child(3){left:80%;top:8%}
.owner-pile:nth-child(4){left:100%;top:45%}
.owner-pile:nth-child(5){left:90%;top:82%}
.owner-pile:nth-child(6){left:10%;top:82%}
.center>.board{position:absolute;left:50%;top:55%;translate:-50% -50%;margin:0}
.center>.phase{position:absolute;left:50%;top:85%;translate:-50% 0;margin:0;white-space:nowrap}
.chip-camera{transform-origin:0 0;transition:transform 240ms steps(6,end)}
@media(max-width:740px) and (orientation:landscape){.center>.board .playing{height:56px;width:44px;font-size:22px}.center>.board .playing b{font-size:25px}.owner-pile .chip-pile{width:75px;height:35px}.owner-pile{min-width:70px}.owner-caption{font-size:9px}.owner-total{font-size:12px}.pot-display>.pot{font-size:25px}}
@media(min-width:1100px){.pot-display{height:280px}.owner-pile .chip-pile{width:150px;height:68px}.owner-pile{min-width:150px}.owner-caption{font-size:14px;gap:7px}.owner-total{font-size:20px}}
@media(max-height:355px) and (orientation:landscape){.center{top:35%}.pot-display{height:130px}.owner-pile .chip-pile{width:66px;height:30px}.center>.board .playing{width:39px;height:49px;font-size:19px}.center>.board .playing b{font-size:22px}}
@media(prefers-reduced-motion:reduce){.chip-camera{transition:none}}
.center>.board{top:53%}
@media(min-width:741px) and (max-height:500px) and (orientation:landscape){.center>.board .playing{height:60px;width:48px;font-size:24px}.center>.board .playing b{font-size:28px}}
@media(max-height:500px) and (orientation:landscape){.center{top:38%}.pot-display>.pot{top:4%}.center>.board{top:43%}}
@media(max-height:500px) and (orientation:landscape){.owner-pile:nth-child(5){left:78%;top:60%}.owner-pile:nth-child(6){left:22%;top:60%}.hero{left:25%}}
/* Pile anchors are computed on the center-to-avatar ray; only amounts remain visible. */
.owner-caption{min-height:14px}
.owner-pile{transform-origin:center;min-width:0;width:83px}
.owner-pile .chip-pile{width:100%}
@keyframes chip-land{0%{transform:translate(var(--chip-from-x,23px),var(--chip-from-y,-47px)) rotate(-14deg);opacity:0}16%{opacity:1}55%{transform:translate(0,1px) scale(1.13,.83)}77%{transform:translate(-1px,-6px) rotate(3deg)}100%{transform:translate(0,0) scale(1)}}
@media(min-width:1100px){.owner-pile{width:150px}.owner-caption{min-height:24px}}
@media(max-height:500px) and (orientation:landscape){.seat .portrait{width:48px;height:50px;font-size:32px}.seat .name{font-size:10px;margin-top:5px}.seat .stack{font-size:11px}.seat .backs{left:67px;top:19px}.seat .action-tag{left:65px;font-size:9px}.owner-pile{width:67px}.owner-pile .chip-pile{height:25px}.owner-caption{min-height:12px;line-height:12px}.owner-total{font-size:11px}.pot-display>.pot{top:11%}.center>.board{top:48%}}
@media(min-width:741px) and (max-height:500px) and (orientation:landscape){.center>.board .playing{height:50px;font-size:22px}.center>.board .playing b{font-size:25px}}
/* Keep numeric labels readable even when compact chip art is reduced. */
@media(max-height:500px) and (orientation:landscape){.hero{left:8%}}

/* Opponents follow the same left-to-right arc as their contribution piles. */
.seat:last-child .backs{left:auto;right:76px;transform:rotate(-13deg)}
.seat:last-child .action-tag{left:auto;right:75px}
.pot-display>.pot{top:78%}
.center>.board{top:24%}
.center>.phase{top:54%;left:50%}
@media(max-height:500px) and (orientation:landscape){
  .hero{left:28%}
  .pot-display>.pot{top:60%}
  .center>.board{top:25%}
  .center>.board .playing{height:44px;width:42px;font-size:20px}
  .center>.board .playing b{font-size:22px}
  .center>.phase{top:26%;left:6%;font-size:9px}
  .owner-pile{width:72px}
  .owner-pile .chip-pile{height:25px}
  .seat:last-child .backs{right:66px}
  .seat:last-child .action-tag{right:65px}
}
@media(min-width:1100px){.seat:last-child .backs{right:106px}.seat:last-child .action-tag{right:106px}}
@media(max-height:500px) and (orientation:landscape){.seat:nth-child(2) .speech{top:calc(100% + 3px)}}
@media(max-height:500px) and (orientation:landscape){#game[data-game="zjh"] .hero.is-seen{left:18%}}
/* Seat-attached chips: consistent inward offsets; reactions use the upper outside corner. */
.owner-pile{width:120px}
.owner-pile .chip-pile{height:54px}
.speech,.hero .speech,.seat:nth-child(2) .speech{transform:none;rotate:0deg;bottom:auto;max-width:min(150px,calc(100vw - 24px));white-space:normal;overflow-wrap:anywhere;width:max-content}
.speech:after,.hero .speech:after{top:auto;bottom:5px;left:-6px;rotate:0deg;clip-path:polygon(100% 0,100% 100%,0 100%)}
.speech[data-side="left"]:after{left:auto;right:-6px;clip-path:polygon(0 0,100% 100%,0 100%)}
@media(min-width:1100px){.owner-pile{width:140px}.owner-pile .chip-pile{height:63px}}
@media(max-height:500px) and (orientation:landscape){.owner-pile{width:64px}.owner-pile .chip-pile{height:24px}.owner-caption{line-height:12px;min-height:12px}.speech{max-width:min(130px,23vw)}.center>.board{top:28%}}
/* Lower the Hold'em focal group on taller screens to balance it with the local hand. */
@media(min-height:501px){#game[data-game="holdem"] .center{top:45%}}
/* Dollar amounts are the primary unit; chip quantities stay in the breakdown. */
.pot:before{content:none}
.action-label{display:block;font-size:12px;font-weight:650}
.action-money{display:block;font:850 17px/1.2 ui-monospace,monospace;margin-top:2px;white-space:nowrap}
@media(max-height:500px) and (orientation:landscape){.action-label{font-size:11px}.action-money{font-size:15px}.owner-total{font-size:11px}.seat .stack{font-size:11px}}
@media(min-width:1100px){.action-label{font-size:16px}.action-money{font-size:23px}}
/* Round wagers are separate from the already-collected central pot. */
.pot-cluster{position:absolute;left:50%;top:78%;translate:-50% -50%;display:flex;align-items:center;gap:18px}
.pot-cluster>.pot{position:static;translate:none;flex:none}
.central-pile{border:0;padding:0;background:transparent;color:#f3b958;width:150px;flex:none}
.central-pile .chip-pile{display:block;width:100%;height:68px}
.central-pile .owner-caption{gap:6px;align-items:center}
.collected-label{font-size:11px;color:#dbe1c5}
.empty-pile{opacity:0;pointer-events:none}
@media(max-height:500px) and (orientation:landscape){.pot-cluster{top:62%;gap:10px}.central-pile{width:83px}.central-pile .chip-pile{height:31px}.central-pile .owner-total{font-size:10px}.collected-label{font-size:9px}.central-pile .owner-caption{gap:3px}.hero{left:8%}.quick{left:43%}.pot-cluster>.pot{font-size:25px}}
@media(max-height:500px) and (orientation:landscape){.pot-cluster{top:58%}.center>.board{top:26%}.center>.board .playing{height:42px}.quick{left:15px;flex-direction:column}.quick .icon-button{width:34px;height:34px}}
/* Hand hints form a small colored arc above the player's cards. */
.hand-area{position:relative;display:flex;align-items:center;min-width:0}
.hand-tags{position:absolute;left:50%;bottom:calc(100% + 18px);translate:-50% 0;display:flex;align-items:flex-end;justify-content:center;gap:7px;width:max-content;z-index:5;white-space:nowrap;pointer-events:none}
.hand-tag{display:inline-block;padding:4px 9px;border-radius:4px;font-size:12px;font-weight:800;line-height:1.25;box-shadow:0 3px #183b30;transform-origin:center bottom}
.hand-tag:first-child:not(:last-child){transform:translateY(2px) rotate(-4deg)}
.hand-tag:last-child:not(:first-child){transform:translateY(2px) rotate(4deg)}
.hand-tag:only-child{transform:rotate(-3deg)}
.rank-tag{background:#fda200;color:#302719;box-shadow:0 3px #a76612}
.kicker-tag{background:#08649b;color:#fff3df;box-shadow:0 3px #16465a}
.blind-tag{background:#009dff;color:#102f3b;box-shadow:0 3px #08649b}
.state-tag{background:#70529a;color:#fff3df;box-shadow:0 3px #45335f}
@media(min-width:1100px){.hand-tags{bottom:calc(100% + 25px);gap:10px}.hand-tag{font-size:15px;padding:6px 12px}}
@media(max-height:500px) and (orientation:landscape){.hand-tags{bottom:calc(100% + 15px);gap:5px}.hand-tag{font-size:11px;padding:3px 7px}}
@media(max-height:355px) and (orientation:landscape){.hand-tags{bottom:calc(100% + 12px)}}
@media(max-height:500px) and (orientation:landscape){.hand-tags{bottom:calc(100% + 21px)}#game[data-game="zjh"] .pot-cluster{top:25%}}
@media(min-height:501px){.central-pile .chip-pile{height:78px}}
/* Central pile uses a tight, content-sized viewport rather than shrinking a fixed box. */
.pot-cluster{gap:8px}
#central-pile{min-width:0}
#central-pile .chip-camera{transition:none}
#central-pile .chip-pile{filter:drop-shadow(1px 2px 0 #173b2c66)}
@media(max-height:500px) and (orientation:landscape){.pot-cluster{gap:6px}.center>.board{top:20%}}
/* Balatro-like card inspection: raise the matching cards, soften the rest. */
.hand-tags{pointer-events:auto}
button.hand-tag{border:0;touch-action:manipulation;cursor:pointer;transition:filter 100ms steps(3,end),box-shadow 100ms steps(3,end)}
button.hand-tag:hover{filter:brightness(1.12)}
button.hand-tag[aria-pressed="true"]{outline:2px solid #fff3df;outline-offset:2px;box-shadow:0 5px #183b30;filter:brightness(1.08)}
#hand .playing,#board .playing{transition:translate 160ms steps(5,end),opacity 120ms steps(4,end),filter 120ms steps(4,end)}
#hand .playing.card-focused,#board .playing.card-focused{translate:0 -10px;outline:3px solid #fda200;outline-offset:2px;box-shadow:0 5px #a76612,0 8px #163f31;filter:brightness(1.04);z-index:3}
#hand .playing.card-muted,#board .playing.card-muted{opacity:.45;filter:saturate(.55)}
.hand-focus-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){button.hand-tag,#hand .playing,#board .playing{transition:none}}