/* Immersive table presentation, isolated from lobby and game rules. */
.is-playing{background:#d6ece4}
.is-playing .sidebar,.is-playing .topbar,.is-playing .demo-strip,.is-playing .app-footer{display:none}
.is-playing .main-shell{margin:0}
.is-playing .content{max-width:1800px;padding:10px 14px 16px}
.is-playing .game-heading{margin-bottom:8px;align-items:center}
.is-playing .game-heading h1{font-size:21px;color:#194f41}
.is-playing .game-heading .eyebrow{font-size:10px;margin:0;color:#4d7768}
.is-playing .game-heading .text-button{border:1px solid #9ebcb0;border-radius:20px;padding:7px 16px;background:#eff8ef}
.table-menu{display:flex;gap:8px;align-items:center}
.table-menu{flex-wrap:wrap;justify-content:flex-end}
.table-effects{position:absolute;inset:0;z-index:3;pointer-events:none}
.action-callout{position:absolute;left:calc(50% - 64px);top:30%;width:128px;text-align:center;color:#fff4cc;
  filter:drop-shadow(0 5px 9px #172e31aa);font-family:var(--serif);line-height:1.1}
.action-callout[data-seat="0"]{top:47%}
.action-callout[data-seat="1"]{left:calc(78% - 64px);top:32%}
.action-callout[data-seat="3"]{left:calc(22% - 64px);top:32%}
.action-callout span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px var(--sans,sans-serif);padding:5px 8px;border-radius:12px;background:#173e32dd}
.action-callout strong{display:block;font-size:82px;color:#fff1bb;-webkit-text-stroke:1px #925214;text-shadow:2px 3px 0 #a44d19,0 0 20px #f5c45888}
.action-callout small{display:inline-block;font:600 11px sans-serif;letter-spacing:.12em;border-top:1px solid #fff4b9aa;padding-top:5px}
.action-chi strong{color:#e6ffe5;-webkit-text-stroke-color:#287b46}
.action-peng strong{color:#dbf4ff;-webkit-text-stroke-color:#246d92}
.action-hu{width:168px;left:calc(50% - 84px)!important;top:28%!important}
.action-hu strong{font-size:86px;background:radial-gradient(ellipse,#dca83b44,transparent 70%)}
.arena:not(.three-ready) .action-callout{top:1px!important;left:calc(50% - 64px)!important;width:128px;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.arena:not(.three-ready) .action-callout strong{font-size:43px;grid-column:2;grid-row:1 / 3}
.arena:not(.three-ready) .action-callout small{font-size:9px}
@media(max-width:700px){.action-callout strong{font-size:58px}.action-hu strong{font-size:66px}.action-callout{width:104px;left:calc(50% - 52px)}.action-callout[data-seat="1"]{left:calc(77% - 52px)}.action-callout[data-seat="3"]{left:calc(23% - 52px)}.action-hu{width:144px;left:calc(50% - 72px)!important}.action-callout span{font-size:10px}.action-callout small{font-size:9px}}
/* Own action text has a separate lane beside the central paper doll. */
.three-ready .action-callout[data-seat="0"]{left:72%!important;top:48%!important;width:clamp(72px,22%,128px)}
.three-ready .action-callout[data-seat="0"] strong{font-size:clamp(30px,4.5vw,60px);white-space:nowrap}
@media(max-height:520px) and (min-width:701px){
  .three-ready .action-callout[data-seat="0"]{left:58%!important}
  .three-ready .action-callout[data-seat="0"] strong{font-size:32px}
  .three-ready .action-callout[data-seat="0"] small{display:none}
}
.is-playing .game-rules{margin-bottom:10px;gap:6px}
.is-playing .game-rules span{padding:3px 9px;background:#eaf6ed;color:#426b5a;font-size:10px}
.is-playing .prototype-note{font-size:10px;margin:12px 0 0;color:#547165}
.arena{border:1px solid #294c3c;border-radius:17px;overflow:hidden;background:#123e30;box-shadow:0 12px 30px #123f3426}
.arena-stage{height:clamp(440px,calc(100dvh - 204px),1050px);position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#b4f2e9 0%,#e2f9dd 35%,#78aa8a 56%,#244f3c 100%)}
.scene-mount{position:absolute;inset:0}
.table-canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.landscape{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.landscape i{position:absolute;background:#79ac8b;left:-8%;right:-8%;height:65%;top:20%;border-radius:50% 85% 0 0;transform:rotate(-8deg);opacity:.5}
.landscape i:nth-child(2){top:33%;background:#528e74;transform:rotate(10deg);left:-20%;opacity:.4}
.landscape i:nth-child(3){top:45%;background:#34765c;transform:rotate(-4deg);right:-30%;opacity:.3}
.seat-hud{position:absolute;inset:0;pointer-events:none}
.arena-seat{position:absolute;display:flex;align-items:center;gap:9px;max-width:240px;color:#173f35}
.seat-info{background:#f4fff0e8;border:1px solid #a2bea5;border-radius:9px;padding:6px 12px;min-width:100px;box-shadow:0 3px 8px #173b3520}
.seat-info strong{display:block;font-size:14px;max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.seat-info strong small{color:#6b7e65;font-size:10px}
.seat-info>span{display:block;font-size:12px}
.seat-info b{font-family:var(--serif);color:#9b5425;margin-right:5px}
.seat-info>small{font-size:9px;color:#5d7e64}
.arena-seat.current .seat-info{border-color:#d6ad35;background:#fff8d5}
.seat-2{top:1.5%;left:50%;transform:translateX(-50%)}
.seat-1{top:1.5%;right:1.5%;text-align:center}
.seat-3{top:1.5%;left:1.5%;text-align:center}
.arena-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:9px 18px;background:linear-gradient(#80362a,#532820);border-top:3px solid #ddb853;min-height:56px;color:#ffedbb}
.turn-caption{font-size:12px}
.arena-controls .game-actions{min-height:0;gap:8px}
.arena-controls .button{min-height:38px;padding:6px 20px;background:#ffe4a1;color:#653e21;border:1px solid #fff4d2;box-shadow:0 3px 0 #2d201c;font-size:15px}
.arena-controls .outline-light{background:#5b3028;color:#fff3d6}
.hand-access,.public-access{color:#e4efd7;border-top:1px solid #ffffff20;padding:7px 16px}
.hand-access summary,.public-access summary{cursor:pointer;font-size:12px;min-height:26px;padding:3px 0;width:fit-content}
.hand-access summary span{font-size:10px;color:#abc6ad;margin-left:10px}
.hand-access .hand{justify-content:flex-start;padding:12px 3px;gap:5px;margin:0;min-height:100px}
.hand-access .tile{width:49px;height:74px;flex:none;border-bottom-color:#e5e5e1}
.hand-access button.tile:focus-visible{outline:3px solid #ffe98c;outline-offset:3px;transform:translateY(-3px)}
.hand-access .drawn{outline:2px solid #ffe087;margin-left:8px}
.public-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:10px 0}
.public-grid p{font-size:10px;color:#a8c5ae;margin:6px 0 3px}
.public-tiles{display:flex;flex-wrap:wrap;gap:4px}
.public-tiles>.claimed{opacity:.45}
.public-tiles>span>small{display:block;font-size:8px}
.scene-message{position:absolute;left:50%;top:65%;transform:translateX(-50%);text-align:center;background:#fff9e8;color:#23533b;padding:9px 20px;border-radius:12px;font-size:12px}
.three-ready .scene-message,.three-ready .table-fallback{display:none}
.arena:not(.three-ready) .scene-mount,.arena:not(.three-ready) .seat-hud,.arena:not(.three-ready) .arena-status{visibility:hidden}
.arena:not(.three-ready) .arena-stage{height:90px;min-height:90px}
.arena:not(.three-ready) .scene-message{top:12px}
.arena:not(.three-ready)>.arena-controls,.arena:not(.three-ready)>.hand-access,.arena:not(.three-ready)>.public-access{display:none}
.table-fallback{padding:15px}
@media(max-width:1000px){
  .seat-info{min-width:82px;padding:5px 8px}
  .seat-info strong{font-size:12px;max-width:100px}
  .seat-info>span{font-size:10px}
}
@media(max-width:700px){
  .is-playing .content{padding:10px 8px}
  .is-playing .game-heading h1{font-size:18px}
  .is-playing .game-heading .text-button{font-size:11px;padding:6px 12px}
  .table-menu{gap:5px}
  .is-playing .game-rules span{font-size:9px;padding:2px 6px}
  .arena{border-radius:10px}
  .arena-stage{height:380px}
  .seat-info{min-width:60px;padding:3px 5px;border-radius:6px}
  .seat-info strong{font-size:10px;max-width:76px}
  .seat-info>span{font-size:9px}
  .seat-info>small{font-size:8px}
  .seat-1,.seat-3{top:2%}
  .seat-2{top:2%;gap:5px}
  .arena-controls{padding:9px;flex-wrap:wrap;min-height:46px}
  .turn-caption{font-size:11px}
  .arena-controls .game-actions{justify-content:flex-start}
  .arena-controls .button{min-height:44px;padding:6px 15px;font-size:14px}
  .hand-access,.public-access{padding:6px 10px}
  .hand-access .hand{justify-content:flex-start;min-height:88px}
  .hand-access .tile{width:44px;height:67px}
  .public-grid{grid-template-columns:1fr}
}
@media(max-height:520px) and (min-width:701px){
  .is-playing .content{padding:5px 10px}
  .is-playing .game-heading{margin:0}
  .is-playing .game-heading .eyebrow,.is-playing .game-rules{display:none}
  .arena-stage{height:calc(100dvh - 108px);min-height:250px}
  .arena-seat .seat-info>small{display:none}
  .seat-1,.seat-3{top:1.5%}
  .seat-2{left:62%}
  .arena-controls{padding:5px 12px;min-height:38px}
}
.self-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%;font-size:12px}
.self-info b{color:#ffe581;font-size:18px}.self-info strong{color:#ffe6a0;white-space:nowrap}
.self-name{max-width:140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dealer-badge{display:inline-grid;place-items:center;vertical-align:middle;min-width:22px;height:22px;padding:0 4px;border:1px solid #956719;border-radius:6px;background:#ffe29a;color:#754618;font:bold 15px var(--serif);line-height:1;flex-shrink:0;box-shadow:0 1px 2px #0002}
@media(max-width:700px){.self-info{font-size:11px}.self-name{max-width:125px}.arena-controls .turn-caption{flex-basis:100%;order:2}.arena-controls .game-actions:empty{display:none}}
.arena-status{display:flex;flex-wrap:wrap;align-items:center;min-width:0;max-width:100%;gap:12px;color:#fff9ce;font-size:11px}
.arena-status strong{font-size:12px;overflow-wrap:anywhere;min-width:0}.arena-status span{white-space:nowrap}.arena-status>b{font-size:23px;color:#ffe286;min-width:46px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:700px){.arena-status{gap:7px;font-size:10px}.arena-status strong{font-size:11px}.arena-status>b{font-size:19px}}

/* Voting overlays the existing stage; it never moves or recreates the camera. */
.session-vote{position:absolute;z-index:12;top:50%;left:50%;transform:translate(-50%,-50%);width:min(430px,88%);max-height:94%;overflow:auto;background:#fffbef;color:#193d32;border:2px solid #c7a24e;border-radius:16px;padding:18px;box-shadow:0 8px 32px #0006;font-size:14px}
.session-vote h2{font-size:20px;margin:0 0 8px;display:flex;justify-content:space-between;gap:12px}.session-vote h2 span{white-space:nowrap;color:#9d4728}.session-vote p{margin:8px 0;line-height:1.5}.session-vote ul{list-style:none;padding:0;margin:10px 0}.session-vote li{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.vote-actions{display:flex;gap:10px;flex-wrap:wrap}.session-notice{margin:0;min-height:26px;padding:4px 10px;background:#143b30;color:#f1dfaf;font-size:12px}.table-menu{flex-wrap:wrap}
@media(max-width:700px){.session-vote{padding:10px;font-size:12px}.session-vote h2{font-size:16px}.session-vote p{margin:5px 0}.session-vote li{padding:2px 0}.session-vote .button{padding:8px 12px}}

.arena:not(.three-ready):has(.session-vote) .arena-stage{height:360px}

/* Calls float above the right end of the hand; the status strip has no actions. */
.table-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:end;justify-content:center;margin:0;min-height:0}
.call-group,.call-choice{display:flex;gap:4px;align-items:center;list-style:none}.call-choice{cursor:pointer}.call-choice::-webkit-details-marker{display:none}
.call-targets,.call-combination{display:flex;gap:2px;align-items:center}.call-targets{pointer-events:none}.table-actions .call-targets .tile.small{width:28px;height:40px;margin:0;flex-shrink:0;border-bottom-width:3px;box-shadow:1px 2px 4px #0005}.call-targets:empty{display:none}
.table-actions .call-combination .tile.small{width:26px;height:36px;margin:0;flex-shrink:0}.call-combination .drawn{outline:2px solid #be8831}
.arena-stage>.table-actions{position:absolute;left:50%;transform:translateX(-50%);bottom:25%;z-index:8;width:max-content;max-width:94%}
.call-button{display:grid;place-content:center;position:relative;width:72px;height:72px;min-height:44px;padding:0;border-radius:50%;border:2px solid #f9eac3;background:radial-gradient(circle at 35% 25%,#5f9c73,#1b553c);color:#fffce2;font:bold 38px var(--serif);box-shadow:0 3px 0 #142e27,0 4px 13px #0004;list-style:none;user-select:none}
.call-button::-webkit-details-marker{display:none}.call-button small{position:absolute;right:-3px;top:-5px;background:#fff3cf;color:#34533c;border-radius:10px;font:11px var(--sans);padding:1px 5px}
.call-hu.call-button,.call-hu .call-button{background:radial-gradient(circle at 35% 25%,#db9645,#974127)}
.call-pass{background:radial-gradient(circle at 35% 25%,#68a1bd,#285678);font-size:30px}
.call-options{position:static}.call-menu{position:absolute;bottom:calc(100% + 12px);right:0;width:220px;max-height:190px;overflow:auto;padding:7px;background:#fff8e6;border:1px solid #b59b57;border-radius:12px;box-shadow:0 5px 18px #0004}
.call-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 10px;border:0;border-bottom:1px solid #dad9be;background:transparent;color:#234d39;text-align:left;font-size:13px}
.call-menu button:hover{background:#e0edd9}.call-options[open] .call-choice>.call-button{outline:2px solid #ebc565}
.arena:not(.three-ready) .arena-stage>.table-actions{display:none}
.game-table .table-actions{position:relative;margin:8px 0 12px}.game-table .call-menu{z-index:9}
.hand-access .hand{justify-content:safe center}
@media(max-width:700px){.arena-stage>.table-actions{bottom:18%;gap:6px}.call-button{width:56px;height:56px;font-size:30px}.call-group,.call-choice{gap:3px}.table-actions .call-targets .tile.small{width:22px;height:33px}.call-menu{max-height:140px;width:190px}.hand-access .hand{justify-content:safe center}}
@media(max-height:520px) and (min-width:701px){.arena-stage>.table-actions{bottom:29%}.call-button{width:60px;height:60px;font-size:32px}.call-menu{max-height:min(100px,25vh)}}

.session-vote .vote-actions{position:sticky;bottom:-10px;background:#fffbef;padding-top:6px}
@media(max-height:500px){.session-vote{padding:10px;font-size:12px}.session-vote h2{font-size:16px;margin-bottom:4px}.session-vote p{margin:4px 0;line-height:1.3}.session-vote ul{margin:4px 0}.session-vote li{padding:1px 0}.session-vote .button{padding:6px 12px}}
.arena-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;pointer-events:none}
.ting-badge{position:absolute;z-index:5;display:grid;place-items:center;transform:translate(-50%,-50%);width:46px;height:46px;border:3px solid #fffae5;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff5b0,#f6b855);box-shadow:0 3px 0 #bc793a,0 4px 12px #50320b44;color:#a45536;font:bold 27px var(--serif);pointer-events:none}
.ting-badge:after{content:'';position:absolute;right:0;bottom:-5px;width:10px;height:10px;border-radius:50%;background:#ffd376;border:2px solid #fffae5}
@keyframes ting-pop{from{transform:translate(-50%,-50%) scale(.5)}to{transform:translate(-50%,-50%) scale(1)}}
.opening-overlay{position:absolute;z-index:10;top:33%;left:50%;transform:translateX(-50%);width:min(650px,94%);background:#fff9e9f2;border:2px solid #d7ad57;border-radius:22px;text-align:center;padding:14px 20px;color:#4b4430;box-shadow:0 12px 40px #0004}
.opening-overlay h2{font:700 24px var(--serif);margin:0}.opening-overlay p{font-size:12px;margin:5px 0 16px}.opening-round{display:flex;justify-content:center;gap:22px}.opening-round[hidden]{display:none}.dice-player{min-width:0;flex:1}.dice-player>strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.dice-pair{display:flex;gap:8px;justify-content:center;padding:16px 2px;perspective:450px}.opening-die{display:block;width:36px;height:36px;flex:none;border-radius:8px;background:linear-gradient(145deg,#d5e8ed 0%,#b7d3df 48%,#abc9d6 100%);border:1px solid #92b5c4;box-shadow:inset 1px 1px 2px #ffffff90,inset -1px -1px 2px #7da3b040,3px 4px 0 #8baebc,5px 7px 9px #33596930;transform-style:preserve-3d;transform:rotate(-8deg)}.opening-die:nth-child(2){transform:rotate(12deg)}.die-front{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:6px;width:100%;height:100%}.die-front i{border-radius:50%}.die-front .pip{background:#fff9ef;box-shadow:inset .5px .8px 1px #7da3b0,0 .5px 0 #ffffff80}.rolling .opening-die{animation:dice-tumble .38s linear infinite}.rolling .opening-die:nth-child(2){animation-delay:-.19s}.rolling .dice-player>span{visibility:hidden}.opening-result{display:block;margin-top:13px;font-size:14px;color:#946229}
@keyframes dice-tumble{0%{transform:translateY(0) rotateX(0) rotateZ(0)}50%{transform:translateY(-14px) rotateX(180deg) rotateZ(130deg)}100%{transform:translateY(0) rotateX(360deg) rotateZ(360deg)}}
.continue-prompt{padding:10px 12px;border-radius:12px;background:#f4ecd6;text-align:left;font-size:12px}.continue-prompt[hidden]{display:none}.continue-prompt h3{margin:0 0 5px;font-size:17px}.continue-prompt p{margin:5px 0}.continue-actions{display:flex;flex-wrap:wrap;gap:8px}.continue-prompt ul{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:8px 0 0;font-size:11px}.hand-result-panel>footer{max-height:48vh;overflow:auto}
@media(max-width:700px){.ting-badge{width:35px;height:35px;font-size:22px}.opening-overlay{padding:12px 10px;top:30%}.opening-round{gap:8px}.opening-overlay h2{font-size:20px}.opening-die{width:27px;height:27px}.die-front{padding:4px;gap:1px}.dice-pair{gap:5px}.dice-player>strong{font-size:10px}.opening-result{font-size:12px}.continue-prompt h3{font-size:15px}.continue-prompt{font-size:11px}.continue-actions .button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.ting-badge,.rolling .opening-die{animation:none}}
.opening-table{top:auto;bottom:12%;width:min(570px,94%);padding:10px 16px;border-radius:16px}.opening-table h2{font-size:21px}.opening-table p{margin:4px 0}.opening-table .opening-result{margin-top:6px;font-size:13px}.dice-readout{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;font-size:13px}.dice-readout .opening-die{width:27px;height:27px;transform:none;box-shadow:inset 1px 1px 2px #ffffff90,inset -1px -1px 2px #7da3b040,1px 2px 0 #8baebc}.dice-readout .die-front{padding:4px;gap:1px}.dice-counted .seat-info{outline:3px solid #edba47;background:#fff1b7}
@media(max-width:700px),(max-height:520px){.opening-table{bottom:3%;padding:7px 9px}.opening-table h2{font-size:16px}.opening-table p,.opening-table .opening-result{font-size:10px}.opening-table .opening-result{margin-top:3px}.dice-readout{min-height:28px}.dice-readout .opening-die{width:23px;height:23px}}
.flower-notice{position:absolute;left:50%;top:39%;transform:translateX(-50%);max-width:min(580px,84%);padding:9px 16px;border:1px solid #ead891;border-radius:14px;background:#fff9e9f2;color:#4b612d;font-weight:700;font-size:clamp(11px,1.2vw,16px);line-height:1.65;text-align:center;box-shadow:0 4px 18px #14342d33;pointer-events:none}

.wind-draw-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(420px,80vw)}.wind-draw-results>div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.wind-draw-results strong{display:grid;place-items:center;width:48px;height:64px;border-radius:8px;background:#fff8e5;color:#254a3e;box-shadow:0 3px 0 #b9c8b5;font-size:30px}.wind-draw-results span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}