:root{color-scheme:dark;--gold:#d7b66d;--ink:#0b0c0f;--muted:#91959d;font:15px system-ui,sans-serif;color:#f5f2ea;background:var(--ink)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,a.button,input{font:inherit}button,a.button{border:1px solid #5a4e33;background:#1c1e24;color:#f8f4e9;border-radius:10px;padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible{outline:2px solid white;outline-offset:3px}button:hover:not(:disabled){border-color:var(--gold)}button.gold,a.gold{background:linear-gradient(135deg,#edd28c,#bd9850);color:#17130c;font-weight:800;border:0}header{height:75px;display:flex;align-items:center;justify-content:space-between;padding:12px 30px;border-bottom:1px solid #302c23;background:#101115}.wordmark{font-weight:950;font-size:32px;letter-spacing:4px;color:var(--gold)}.wordmark sup{font-size:10px;vertical-align:top;letter-spacing:0}.wordmark small{display:block;font-size:8px;letter-spacing:2px;color:#c2b18c}.header-right{display:flex;gap:10px;align-items:center}#playerName{color:#b0aba0;font-size:12px}.hidden{display:none!important}main{height:calc(100dvh - 75px);min-height:0;position:relative;display:grid;grid-template-columns:170px minmax(0,1fr) 170px;grid-template-rows:100px minmax(150px,1fr) minmax(195px,27%);padding:15px 24px 0;gap:6px;background:radial-gradient(ellipse at 50% 42%,#26312d 0%,#171d1c 45%,#0d1013 85%)}main:before{content:'';position:absolute;pointer-events:none;border:1px solid #76613c44;border-radius:45%;inset:8% 8% 25%}.seat{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;color:#b9b8b1;border-radius:18px;padding:10px;border:1px solid transparent}.seat.active-seat{border-color:#d7b66d77;background:#dbc17d0b;box-shadow:0 0 35px #d7b66d09}.seat strong{font-size:12px;letter-spacing:1px}.seat .count{font-size:11px;color:var(--muted);display:block}.seat-top{grid-column:2;grid-row:1;flex-wrap:wrap}.seat-left{grid-column:1;grid-row:2;flex-direction:column}.seat-right{grid-column:3;grid-row:2;flex-direction:column}.avatar{width:34px;height:34px;border:1px solid #63573e;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:13px}.backs{display:flex;max-width:155px;overflow:hidden;padding-left:20px}.backs img{width:48px;height:64px;object-fit:contain;margin-left:-22px;filter:brightness(.85)}.seat-top .backs{max-width:250px}.center{grid-column:2;grid-row:2;align-self:center;justify-self:center;text-align:center;z-index:1;min-width:0}.turnline{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:15px;font-size:12px;letter-spacing:1px;color:#c4c4ba}#clock{width:31px;height:31px;border:1px solid #87724a;border-radius:50%;display:grid;place-items:center;font-variant-numeric:tabular-nums}#clock.urgent{color:#ff8072;border-color:#ff8072}#direction{color:var(--gold);font-size:20px}.piles{display:flex;gap:28px;justify-content:center;align-items:center}.pile{width:clamp(95px,11vw,142px);aspect-ratio:1079/1457;border:0;padding:0;background:none;border-radius:10px;box-shadow:0 15px 25px #0008;position:relative}.pile img{width:100%;height:100%;object-fit:contain;border-radius:9px;pointer-events:none}.pile:disabled{opacity:.8}.discard{outline:1px solid #c5af732e;outline-offset:7px}.discard.drop-ready{outline-color:var(--gold);box-shadow:0 0 25px #d7b66d44}.color-badge{font-size:10px;letter-spacing:2px;margin-top:16px;display:inline-flex;align-items:center;gap:6px}.color-badge:before{content:'';width:8px;height:8px;background:var(--active-color);border-radius:50%}#message{height:30px;max-width:400px;font-size:12px;color:#d6c390;margin:7px auto 0}#penalty{font-size:12px;color:#e6b19f;min-height:17px}.human{grid-column:1/4;grid-row:3;min-width:0;min-height:0;z-index:2;display:flex;flex-direction:column;align-self:stretch;border-top:1px solid #d7b66d22;padding-top:10px}.human-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px}#handLabel{font-size:10px;letter-spacing:2px;color:#aaa798}.shouts{display:flex;gap:8px}.shouts button{font-size:11px;font-weight:800;letter-spacing:.5px;padding:11px 15px}#shoutStack.declared{color:#17130b;background:var(--gold)}#endTurn{font-size:11px;padding:9px}#hand{display:flex;align-items:flex-start;justify-content:safe center;overflow-x:auto;overflow-y:hidden;min-height:0;flex:1;gap:4px;padding:19px 10px 6px;scrollbar-width:thin;scrollbar-color:#786439 #16191b;touch-action:pan-x}#hand button{padding:0;background:none;border:2px solid transparent;border-radius:9px;flex:0 0 clamp(76px,7.6vw,110px);width:clamp(76px,7.6vw,110px);aspect-ratio:1079/1457;position:relative;transition:transform .16s,box-shadow .16s;user-select:none;touch-action:none}#hand img{width:100%;height:100%;object-fit:contain;display:block;border-radius:7px;pointer-events:none}#hand button.selected{transform:translateY(-14px);border-color:var(--gold);box-shadow:0 4px 20px #d7b66d22}#hand button.possible{box-shadow:0 0 0 1px #d7b66d66}#hand button.continuation{box-shadow:0 0 0 2px #d7b66daa}#hand button .order{position:absolute;right:2px;top:2px;background:var(--gold);border-radius:50%;color:#111;font-size:11px;font-weight:bold;width:20px;height:20px;display:grid;place-items:center}#hintLine{font-size:9px;color:#797f82;letter-spacing:1px;text-align:center;margin:5px 0 9px}.welcome{height:calc(100dvh - 75px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at 50% 60%,#39311f22,#0b0c0f)}.welcome h1{font-size:clamp(32px,6vw,65px);line-height:1.08;letter-spacing:-2px}.welcome h1 span{color:var(--gold)}.welcome p{color:#a5a4a0;line-height:1.8}.welcome small{margin-top:30px;color:#716f69;letter-spacing:3px;font-size:10px}dialog{border:1px solid #786441;background:#15181d;color:#f6f0e3;border-radius:20px;padding:28px;width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 20px 90px #000b}dialog::backdrop{background:#060709c9;backdrop-filter:blur(4px)}dialog h2{font-size:20px;color:var(--gold);letter-spacing:1px}dialog p{color:#bbbcb6;line-height:1.65;font-size:14px}dialog button,dialog a.button{margin:7px 4px 0 0}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head button{padding:4px 10px;font-size:24px;border:0;background:none;margin:0}label{display:block;font-size:12px;color:#b9b9b1;margin:12px 0}input:not([type=checkbox]){display:block;width:100%;margin-top:7px;background:#0d1014;border:1px solid #454638;border-radius:8px;color:white;padding:11px}input[type=checkbox]{accent-color:var(--gold)}.consent{display:flex;align-items:flex-start;gap:9px;line-height:1.5}.difficulty{display:flex;gap:7px}.difficulty button{flex:1;min-width:0;padding:16px 5px}.difficulty strong,.difficulty small{display:block}.difficulty small{color:#92948d;font-size:9px;margin-top:5px}.difficulty .chosen{border-color:var(--gold);background:#d7b66d1a}.fine{font-size:10px!important;color:#888e91!important}.result-mark{font-size:38px;letter-spacing:4px;font-weight:900;color:var(--gold)}#resultDialog{text-align:center}#resultTitle{font-size:40px}#choices{display:flex;flex-wrap:wrap;gap:10px}#choices button{min-width:100px}.tutorial{max-width:340px}.tutorial small{font-size:10px;color:#8a8d85}.flight,.drag-ghost{position:fixed;z-index:100;pointer-events:none;object-fit:contain;border-radius:7px}.drag-ghost{filter:drop-shadow(0 12px 12px #0009);opacity:.9}.shake{animation:shake .3s}.new-card{animation:deal .4s}.pulse{animation:pulse .6s}.reverse{animation:spin .4s}.register-only{display:none}body.registering .register-only{display:flex;flex-direction:column}body.registering label.consent{flex-direction:row}.error{color:#f28d83}#authError{font-size:12px;color:#f28d83}@keyframes shake{25%{translate:-5px}75%{translate:5px}}@keyframes deal{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{filter:brightness(1.7)}}@keyframes spin{to{transform:rotate(180deg)}}@media(max-width:700px){header{height:59px;padding:9px 12px}.wordmark{font-size:25px}.wordmark small{font-size:6px;letter-spacing:1px}header button{font-size:10px;padding:8px}#playerName{display:none}main{height:calc(100dvh - 59px);grid-template-columns:62px minmax(0,1fr) 62px;grid-template-rows:80px minmax(100px,1fr) minmax(160px,29%);padding:7px 6px 0;gap:3px}.seat{padding:4px;gap:5px}.seat-left,.seat-right{align-self:center}.seat strong{font-size:9px;letter-spacing:0}.seat .count{font-size:9px}.avatar{width:25px;height:25px;font-size:10px}.backs{max-width:48px;flex-direction:column;max-height:110px;padding-left:0;padding-top:13px}.backs img{width:41px;height:54px;margin:0 0 -34px}.seat-top .backs{flex-direction:row;padding-top:0;padding-left:18px;max-width:170px;max-height:60px}.seat-top .backs img{margin:0 0 0 -18px}.pile{width:clamp(70px,21vw,105px)}.piles{gap:17px}.turnline{gap:7px;font-size:9px;margin-bottom:10px}#clock{width:25px;height:25px}#direction{font-size:16px}.color-badge{margin-top:11px;font-size:8px}#message{font-size:10px;height:34px;max-width:210px}#penalty{font-size:10px}.human-top{gap:4px;padding:0 3px}#handLabel{font-size:8px;letter-spacing:0}.shouts{gap:4px}.shouts button{font-size:9px;letter-spacing:0;padding:10px 7px}#hand button{flex-basis:78px;width:78px}#hand{gap:2px;padding-top:19px}#hintLine{font-size:8px;letter-spacing:0}#endTurn{font-size:8px;padding:6px}.welcome{height:calc(100dvh - 59px)}}@media(max-height:570px){header{height:45px;padding:5px 15px}.wordmark{font-size:23px}.wordmark small{display:none}main{height:calc(100dvh - 45px);grid-template-rows:45px minmax(80px,1fr) 138px;grid-template-columns:100px minmax(0,1fr) 100px;padding-top:3px}.seat-top .backs{display:none}.seat-left,.seat-right{flex-direction:row;flex-wrap:wrap}.backs{display:none}.pile{width:68px}.turnline{margin-bottom:6px}.human{padding-top:4px}.shouts button{padding:7px 11px}#hand button{flex-basis:63px;width:63px}#hand{padding-top:15px}#hintLine{display:none}#message{height:16px;font-size:10px;margin-top:4px}.color-badge{margin-top:7px}#penalty{min-height:12px;font-size:9px}.seat strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Keep the hand inside the remaining viewport on short phones. */
#hand button{max-height:100%;height:100%;max-width:110px}#hand img{object-fit:contain}
[hidden]{display:none!important}

/* Revision: visible active player, thin visual frame, and explicit pause. */
.seat.active-seat,.human.active-seat{border-color:#d7b66d;box-shadow:0 0 22px #d7b66d66, inset 0 0 15px #d7b66d18;background:#d7b66d0e}
#clock{width:43px;height:43px;font-size:13px;font-weight:800;border:2px solid #947b46;background:conic-gradient(var(--gold) calc(var(--remaining,1)*1turn),#333 0);color:white;box-shadow:inset 0 0 0 4px #15181d}
#clock.running{box-shadow:0 0 14px #d7b66d55,inset 0 0 0 4px #15181d}
#hand button{border-width:1px;border-radius:7px}#hand img,.pile img{border-radius:6px}
#pauseGame{border-color:var(--gold);font-weight:800;position:relative;z-index:210}
.pause-overlay{position:fixed;inset:75px 0 0;z-index:180;background:#07080c30;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;pointer-events:all}.pause-overlay strong{font-size:clamp(30px,7vw,70px);color:var(--gold);letter-spacing:8px}.pause-overlay span{color:#ccc}
.steal-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;padding:18px 0}.steal-card{padding:0;border:1px solid var(--gold);background:transparent;width:68px;transition:transform .2s}.steal-card:hover{transform:translateY(-18px)}.steal-card img{width:100%;display:block;border-radius:7px}
.steal-reveal{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:#090b10dc;opacity:0;transition:opacity .25s;pointer-events:none}.steal-reveal.visible{opacity:1}.steal-reveal span{font-weight:800;color:var(--gold);letter-spacing:3px}.steal-reveal img{height:min(47vh,340px);max-width:75vw;object-fit:contain;filter:drop-shadow(0 8px 28px #000)}
@media(max-width:700px){.pause-overlay{inset:59px 0 0}#clock{width:33px;height:33px;font-size:11px}#pauseGame{padding:8px 6px;font-size:10px}.steal-card{width:55px}}
/* Trim only the outer image margin on-screen; the official source images remain untouched. */
#hand button{overflow:hidden}#hand button img{transform:scale(1.045)}.pile{overflow:hidden}.pile img{transform:scale(1.035)}
/* Stable shout positions reserve their own row; never cover the hand. */
.human-top{flex-wrap:wrap;position:relative;min-height:82px;align-content:flex-start}
.human-identity{display:flex;align-items:center;gap:10px;min-height:36px;font-size:12px;max-width:75%}
#humanName{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold)}
.shouts{order:4;flex:0 0 100%;display:flex;justify-content:space-between;gap:24px}
.shouts button{font-size:13px;min-height:44px;min-width:160px;font-weight:900}
#shoutCatch{margin-left:auto}#catchNotice{position:absolute;right:8px;top:-24px;max-width:100%;font-size:10px;color:#ffdb7c;background:#17130d;border:1px solid var(--gold);border-radius:5px;padding:4px 8px}

.seat-clock:empty,#humanClock:empty{display:none}.seat-clock{flex-shrink:0}.human.active-seat #humanName,.active-seat .avatar{filter:drop-shadow(0 0 6px #d7b66d)}
#activeColor{font-weight:900;font-size:12px;letter-spacing:1px;padding:7px 12px;border:2px solid var(--active-color);border-radius:9px;background:#111b;box-shadow:0 0 15px color-mix(in srgb,var(--active-color) 50%,transparent)}
.color-badge:before{width:15px;height:15px;border:1px solid white}
.active-tint{position:absolute;inset:0;pointer-events:none;mask-size:100% 100%;mask-repeat:no-repeat;mask-position:center;transition:background-color .65s;transform:scale(1.035);mix-blend-mode:color;animation:tint-reveal .65s}
@keyframes tint-reveal{from{opacity:0}to{opacity:1}}
#historyDialog{width:min(760px,calc(100vw - 24px))}#historyEntries ol{padding-left:24px;font-size:13px;line-height:1.65}#historyEntries li{border-bottom:1px solid #ffffff0a;padding:5px 0}#historyEntries h3{color:var(--gold);font-size:13px;letter-spacing:1px}
#exitDialog{width:min(700px,calc(100vw - 24px))}.edition-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edition-cards figure{margin:0;border:1px solid #6c5738;border-radius:10px;overflow:hidden;background:#090909}.edition-cards img{width:100%;height:auto;display:block}.edition-cards figcaption{font-size:12px;padding:10px;text-align:center;color:var(--gold)}.edition-cards strong{display:block;font-size:16px;margin-top:4px}
/* Trim white production margin uniformly without changing source pixels. */
#hand button img{transform:scale(1.12)}.pile img,.active-tint{transform:scale(1.12)}
@media(max-width:700px){main{grid-template-rows:80px minmax(100px,1fr) minmax(225px,32%)}.shouts{gap:12px}.shouts button{min-width:0;width:45%;font-size:11px;padding:10px 7px}.human-top{min-height:83px}#humanName{max-width:150px}.human-identity{font-size:11px;gap:7px}#activeColor{font-size:10px;padding:5px 8px}.seat-clock #clock{width:29px;height:29px}#catchNotice{font-size:8px;top:-21px}#message{height:45px}.seat-top{gap:6px}}
@media(max-height:570px){main{grid-template-rows:40px minmax(80px,1fr) 168px}.human-top{min-height:68px;padding-top:0}.human-identity{min-height:26px}.shouts button{min-height:34px;font-size:10px}.human-identity #clock{height:25px;width:25px;font-size:10px}#activeColor{margin-top:5px;font-size:9px;padding:3px 6px}#message{height:25px;max-width:340px}.seat-clock #clock{height:25px;width:25px}.human{padding-top:1px}}
/* 1.1.1: fixed card geometry and separate, reserved table regions. */
:root{--hand-card-width:clamp(118px,9vw,148px);--hand-card-height:calc(var(--hand-card-width)*1457/1079);--human-height:calc(var(--hand-card-height) + 126px)}
main{grid-template-columns:160px minmax(0,1fr) 160px;grid-template-rows:100px minmax(0,1fr) var(--human-height);gap:8px;padding:10px 24px 0}
#seat2.seat-top{grid-column:1/-1;justify-self:center;display:grid;grid-template-columns:36px minmax(110px,1fr) 43px 200px;align-items:center;gap:12px;width:min(490px,100%);padding:8px;flex-wrap:nowrap}
#seat2.seat-top .avatar{grid-column:1}#seat2.seat-top .seat-info{grid-column:2;text-align:left}#seat2.seat-top .seat-clock{grid-column:3}#seat2.seat-top .backs{grid-column:4}
.seat-info{display:flex;flex-direction:column;gap:5px;min-width:0}.seat-info strong{line-height:1.2}.seat .count{line-height:1.2}.seat-clock{min-height:43px;min-width:43px;display:grid;place-items:center}.seat-clock:empty{display:grid}
.backs{flex-shrink:0;gap:0;align-items:center}.backs img{flex-shrink:0;width:45px;height:61px;object-fit:contain}.seat-top .backs{display:flex;flex-direction:row;padding:0 0 0 20px;max-width:200px;max-height:65px;overflow:hidden}.seat-top .backs img{margin:0 0 0 -20px;flex:0 0 45px}
.seat-left,.seat-right{flex-direction:column;justify-content:center;align-self:center;gap:8px;max-height:100%;padding:8px}.seat-left .seat-info,.seat-right .seat-info{text-align:center}.seat-left .backs,.seat-right .backs{display:flex;flex-direction:column;max-height:126px;max-width:48px;padding:0;overflow:hidden}.seat-left .backs img,.seat-right .backs img{margin:0 0 -38px;flex:0 0 61px}
.center{width:100%;max-width:570px;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:center;min-height:0}.turnline{min-height:22px;margin:0;gap:12px;width:100%;justify-content:center}.piles{display:grid;grid-template-columns:132px 132px 98px;align-items:center;justify-content:center;gap:20px;width:100%}.pile{width:132px;aspect-ratio:1079/1457;flex-shrink:0}
#activeColor{width:98px;min-height:64px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;margin:0;padding:8px 6px;line-height:1.35;font-size:12px;letter-spacing:1px;white-space:normal;overflow-wrap:normal}
#message{flex:0 0 48px;height:48px;max-width:100%;width:100%;padding:4px 8px;margin:0;font-size:12px;line-height:1.4;display:flex;align-items:center;justify-content:center;overflow:hidden}#penalty{flex:0 0 18px;min-height:18px;line-height:18px;margin:0}
.human{display:grid;grid-template-rows:36px minmax(0,1fr) 13px 48px;gap:0;padding:5px 0 4px;align-self:stretch;overflow:hidden}.human-top{min-height:0;height:36px;flex-wrap:nowrap;align-content:normal;padding:0 12px;position:relative;justify-content:space-between}.human-identity{min-height:0;max-width:70%;gap:9px;white-space:nowrap}#humanName{max-width:200px}.human-identity #clock{width:31px;height:31px;font-size:11px}
#hand{display:flex;justify-content:safe center;align-items:flex-start;flex:none;width:100%;height:100%;min-height:0;gap:6px;padding:20px 12px 6px;overflow-x:auto;overflow-y:hidden;isolation:isolate}
#hand button{flex:0 0 var(--hand-card-width);width:var(--hand-card-width);height:var(--hand-card-height);min-height:var(--hand-card-height);max-height:none;max-width:none;aspect-ratio:1079/1457;border-width:1px;border-radius:7px;margin:0;overflow:hidden}
#hand button+button{margin-left:calc(-1 * var(--hand-overlap,0px))}#hand button.selected{transform:translateY(-16px)}#hand button .order{right:auto;left:2px;top:2px}#hand img{width:100%;height:100%;object-fit:contain}#hintLine{height:13px;margin:0;font-size:9px;line-height:13px}
.shouts{order:0;flex:none;width:100%;gap:24px;align-items:center;justify-content:space-between;padding:2px 12px}.shouts button{min-width:170px;min-height:44px;max-height:44px;font-size:13px;padding:10px 15px}#shoutCatch{margin-left:auto}#catchNotice{position:static;max-width:35%;font-size:9px;white-space:normal;text-align:center;padding:3px 5px;line-height:1.2}#endTurn{flex-shrink:0;font-size:10px;padding:7px}
@media(max-width:700px){
 :root{--hand-card-width:clamp(92px,25vw,108px);--human-height:calc(var(--hand-card-height) + 118px)}
 main{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:88px minmax(0,1fr) var(--human-height);padding:6px 8px 0;gap:6px}
 #seat2.seat-top{grid-template-columns:25px minmax(77px,1fr) 29px 128px;gap:7px;width:min(330px,100%);padding:5px}#seat2.seat-top .seat-info{gap:4px}.seat-info strong{font-size:10px;letter-spacing:0}.seat .count{font-size:10px}.seat-clock{min-width:29px;min-height:29px}.seat-clock #clock{width:29px;height:29px}
 .seat-top .backs{max-width:128px;padding-left:18px;max-height:54px}.seat-top .backs img{width:38px;height:51px;flex:0 0 38px;margin-left:-18px}.seat-left,.seat-right{padding:3px;gap:7px}.seat-left .backs,.seat-right .backs{max-height:93px;max-width:40px}.seat-left .backs img,.seat-right .backs img{width:36px;height:49px;flex-basis:49px;margin-bottom:-32px}
 .center{gap:5px;max-width:100%;min-width:0}.turnline{font-size:10px;min-height:20px;gap:7px}.piles{grid-template-columns:clamp(63px,19vw,83px) clamp(63px,19vw,83px) 66px;gap:10px}.pile{width:clamp(63px,19vw,83px)}#activeColor{width:66px;min-height:61px;font-size:10px;padding:6px 3px;letter-spacing:.4px}.color-badge:before{width:12px;height:12px}
 #message{height:48px;flex-basis:48px;font-size:10px;line-height:1.35;padding:2px 0}#penalty{height:15px;min-height:15px;flex-basis:15px;font-size:10px;line-height:15px}
 .human{grid-template-rows:32px minmax(0,1fr) 13px 48px;padding-top:4px}.human-top{height:32px;padding:0 4px}.human-identity{font-size:10px;gap:6px;max-width:70%}#humanName{max-width:130px}.human-identity #clock{width:27px;height:27px;font-size:10px}#handLabel{font-size:9px;white-space:nowrap}#hand{padding:20px 12px 5px}.shouts{padding:2px 4px;gap:12px}.shouts button{width:auto;min-width:140px;font-size:11px;padding:10px 9px}#catchNotice{max-width:33%;font-size:8px}#endTurn{font-size:9px;padding:6px}
}
@media(max-height:570px) and (orientation:portrait){
 main{grid-template-rows:72px minmax(0,1fr) var(--human-height)}:root{--hand-card-width:92px;--human-height:calc(var(--hand-card-height) + 112px)}#seat2.seat-top{padding:3px}.center{gap:3px}.piles{grid-template-columns:66px 66px 64px;gap:8px}.pile{width:66px}#activeColor{width:64px;min-height:50px}.seat-left .backs,.seat-right .backs{max-height:60px}#message{height:39px;flex-basis:39px}#hintLine{display:block}
}
@media(max-height:570px) and (orientation:landscape){
 :root{--hand-card-width:clamp(64px,8vw,82px);--human-height:calc(var(--hand-card-height) + 82px)}header{height:45px}main{height:calc(100dvh - 45px);grid-template-columns:90px minmax(0,1fr) 90px;grid-template-rows:38px minmax(0,1fr) var(--human-height);padding:2px 12px 0;gap:3px}
 #seat2.seat-top{width:250px;grid-template-columns:25px 1fr 25px;gap:7px;padding:2px}.seat-top .backs{display:none}#seat2.seat-top .seat-clock{grid-column:3}.seat-info strong{font-size:10px}.seat .count{font-size:9px}.seat-info{gap:2px}.seat-left .backs,.seat-right .backs{display:none}.seat-left,.seat-right{gap:3px}.seat-clock{min-width:25px;min-height:25px}.seat-clock #clock{width:25px;height:25px;font-size:10px}.avatar{height:25px;width:25px}
 .center{gap:1px}.turnline{min-height:15px;font-size:9px;line-height:15px}.piles{grid-template-columns:56px 56px 76px;gap:14px}.pile{width:56px}#activeColor{width:76px;min-height:43px;font-size:9px;gap:3px;padding:3px}#message{height:24px;flex-basis:24px;font-size:9px;line-height:1.25;max-width:460px}#penalty{min-height:12px;height:12px;flex-basis:12px;font-size:9px;line-height:12px}
 .human{grid-template-rows:25px minmax(0,1fr) 0 35px;padding:2px 0}.human-top{height:25px}.human-identity{font-size:10px}.human-identity #clock{height:23px;width:23px}#hintLine{display:none}#hand{padding-top:16px;padding-bottom:1px}.shouts{padding:0 10px}.shouts button{min-height:33px;max-height:33px;min-width:150px;font-size:10px;padding:6px 10px}#catchNotice{max-width:45%;font-size:8px}#humanName{max-width:180px}.pause-overlay{inset:45px 0 0}
}
/* Keep the footer in its own row even when the short-screen hint is hidden. */
.human-top{grid-row:1}#hand{grid-row:2}#hintLine{grid-row:3}.shouts{grid-row:4}
/* The hand remains readable while an opponent is playing. */
#hand button:disabled{opacity:.82}
/* Use the game's gold selection feedback, without the browser's transient blue tap overlay. */
#hand button{-webkit-tap-highlight-color:transparent}

/* Digital revision: shared image presentation and accessible centered actions. */
.shouts{justify-content:center}#shoutCatch{margin-left:0;border-color:#e77b64}#shoutStack{border-color:var(--gold)}#shoutStack.declared{background:#365339}
.edition-link{color:inherit;text-decoration:none;display:block;border-radius:10px}.edition-link:hover,.edition-link:focus-visible{outline:2px solid var(--gold);filter:brightness(1.1)}
.steal-target,.steal-actor{outline:none}
#historyEntries pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}#historyEntries summary{color:var(--gold);cursor:pointer}
.flight{overflow:hidden}.flight img{width:100%;height:100%;object-fit:contain;transform:scale(1.12);border-radius:6px}

#startSequence{flex-shrink:0;font-size:10px;padding:6px;border-color:var(--gold)}@media(max-width:700px){#startSequence{font-size:8px;padding:5px}.human-identity{max-width:58%}}

/* 1.2.1: neutral controls and bounded card fans. */
:root{--human-height:calc(var(--hand-card-height) + 142px)}
#hand{padding:24px 24px 14px}
#hand button{transform-origin:50% 100%;transform:translateY(var(--fan-lift,0px)) rotate(var(--fan-angle,0deg));transition:transform .16s,box-shadow .16s}
#hand button.selected{transform:translateY(calc(var(--fan-lift,0px) - 14px)) rotate(var(--fan-angle,0deg))}
#hand button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.backs img{transform-origin:50% 80%;transform:translateY(var(--back-lift,0px)) rotate(var(--back-angle,0deg))}
.seat-top .backs{padding-top:7px;max-height:74px}.seat-left .backs,.seat-right .backs{padding:4px;max-width:52px}
.shouts{justify-content:center;gap:18px}#shoutCatch{margin-left:0}.shouts button:active{transform:translateY(1px);filter:brightness(1.2)}
@media(max-width:700px){:root{--human-height:calc(var(--hand-card-height) + 134px)}.shouts{gap:12px}.shouts button{min-width:0;width:136px}}
@media(max-height:570px) and (orientation:portrait){:root{--human-height:calc(var(--hand-card-height) + 128px)}}
@media(max-height:570px) and (orientation:landscape){:root{--human-height:calc(var(--hand-card-height) + 100px)}#hand{padding-top:18px;padding-bottom:12px}#hand button{transform:translateY(var(--fan-lift,0px)) rotate(var(--fan-angle,0deg))}.shouts button{width:150px}}

@media(max-width:700px){.seat-left .backs,.seat-right .backs{padding:3px;max-width:42px}}
/* 1.2.3: readable official artwork and persistent opponent backs. */
#hand button img,.pile img,.flight img,.active-tint{transform:none}
#shoutStack{background:#286044;color:#fff5da;border-color:#65b58c}
#shoutStack.declared{background:#365339;border-color:#d7b66d}
#shoutCatch{background:#8a3434;color:#fff5da;border-color:#ed9494}
.shouts button:disabled{opacity:.58}
select{font:inherit;color:#fff;background:#20252b;border:1px solid #786441;border-radius:6px;padding:6px 10px;margin-left:10px}
:root{--table-card-width:clamp(136px,12vw,160px)}
.piles{grid-template-columns:var(--table-card-width) var(--table-card-width) 98px;gap:18px}.pile{width:var(--table-card-width)}
.backs{display:flex!important}.seat-top .backs{display:flex!important}
main[data-players="2"] .seat-left{grid-column:1/-1;grid-row:1;flex-direction:row;justify-self:center}
main[data-players="2"] .seat-left .backs{flex-direction:row;max-width:200px;max-height:70px;padding-left:20px}
main[data-players="2"] .seat-left .backs img{margin:0 0 0 -20px;flex-basis:45px}
main[data-players="5"] .seat-top,main[data-players="6"] .seat-top,main[data-players="7"] .seat-top,main[data-players="8"] .seat-top{
 position:absolute;top:4px;left:calc((var(--top-index) + .5)*100%/var(--top-count));transform:translateX(-50%);width:calc(100%/var(--top-count) - 8px);max-width:280px;display:flex!important;flex-wrap:wrap;justify-content:center;gap:4px;padding:3px
}
main[data-players="5"] .seat-top .backs,main[data-players="6"] .seat-top .backs,main[data-players="7"] .seat-top .backs,main[data-players="8"] .seat-top .backs{width:100%;justify-content:center;max-height:58px}
@media(max-width:700px){
 :root{--table-card-width:clamp(74px,21vw,94px)}
 .piles{grid-template-columns:var(--table-card-width) var(--table-card-width) 60px;gap:8px}#activeColor{width:60px}
 main[data-players="5"] .seat-top,main[data-players="6"] .seat-top,main[data-players="7"] .seat-top,main[data-players="8"] .seat-top{gap:2px}
 main[data-players="5"] .seat-top .avatar,main[data-players="6"] .seat-top .avatar,main[data-players="7"] .seat-top .avatar,main[data-players="8"] .seat-top .avatar{display:none}
 main[data-players="5"] .seat-top .backs,main[data-players="6"] .seat-top .backs,main[data-players="7"] .seat-top .backs,main[data-players="8"] .seat-top .backs{max-height:38px;padding-left:15px;padding-top:0}
 main[data-players="5"] .seat-top .backs img,main[data-players="6"] .seat-top .backs img,main[data-players="7"] .seat-top .backs img,main[data-players="8"] .seat-top .backs img{width:25px;height:34px;flex-basis:25px;margin-left:-15px}
}
@media(max-height:570px) and (orientation:portrait){:root{--table-card-width:72px}.piles{grid-template-columns:72px 72px 60px;gap:6px}}
@media(max-height:570px) and (orientation:landscape){
 :root{--hand-card-width:64px;--human-height:calc(var(--hand-card-height) + 96px);--table-card-width:72px}
 main{grid-template-rows:48px minmax(0,1fr) var(--human-height)}
 #seat2.seat-top{width:340px;grid-template-columns:25px 1fr 25px 104px}
 .seat-top .backs{max-width:104px;max-height:43px;padding-top:0}.seat-top .backs img{width:28px;height:38px;flex-basis:28px;margin-left:-18px}
 .seat-left .backs,.seat-right .backs{max-height:66px}.seat-left .backs img,.seat-right .backs img{width:32px;height:44px;flex-basis:44px;margin-bottom:-31px}
 .piles{grid-template-columns:72px 72px 70px;gap:10px}#activeColor{width:70px}
 .center{gap:1px}.turnline{min-height:13px;font-size:8px;line-height:13px}#message{height:18px;flex-basis:18px;font-size:8px}#penalty{height:10px;min-height:10px;flex-basis:10px;line-height:10px;font-size:8px}
}
/* Keep compact opponent fans inside their allocated seat, including empty clock slots. */
.seat-left,.seat-right{flex-wrap:nowrap}
.seat-left .seat-clock:empty,.seat-right .seat-clock:empty{display:none;min-height:0}
#game[data-players="5"] .seat-top,#game[data-players="6"] .seat-top,#game[data-players="7"] .seat-top,#game[data-players="8"] .seat-top{width:calc(100%/var(--top-count) - 8px);display:flex;flex-wrap:wrap;gap:4px;padding:3px}
@media(max-width:700px){
 #game[data-players="5"] .seat-top,#game[data-players="6"] .seat-top,#game[data-players="7"] .seat-top,#game[data-players="8"] .seat-top{gap:2px;padding:2px}
 #game[data-players="5"] .seat-top .backs,#game[data-players="6"] .seat-top .backs,#game[data-players="7"] .seat-top .backs,#game[data-players="8"] .seat-top .backs{width:100%;max-width:100%;height:38px;max-height:38px;padding:0 0 0 15px;justify-content:center}
 #game[data-players="5"] .seat-top .backs img,#game[data-players="6"] .seat-top .backs img,#game[data-players="7"] .seat-top .backs img,#game[data-players="8"] .seat-top .backs img{width:25px;height:34px;flex-basis:25px;margin-left:-17px}
}
@media(max-height:570px) and (orientation:portrait){.seat-left,.seat-right{gap:4px}.seat-left .backs,.seat-right .backs{max-height:55px}.seat-left .backs img,.seat-right .backs img{height:40px;width:29px;flex-basis:40px;margin-bottom:-31px}}
@media(max-height:570px) and (orientation:landscape){
 #game[data-players="5"] .seat-top,#game[data-players="6"] .seat-top,#game[data-players="7"] .seat-top,#game[data-players="8"] .seat-top{flex-wrap:nowrap;gap:3px;height:40px;top:0;padding:2px}
 #game[data-players="5"] .seat-top .avatar,#game[data-players="6"] .seat-top .avatar,#game[data-players="7"] .seat-top .avatar,#game[data-players="8"] .seat-top .avatar{display:none}
 #game[data-players="5"] .seat-top .seat-clock:empty,#game[data-players="6"] .seat-top .seat-clock:empty,#game[data-players="7"] .seat-top .seat-clock:empty,#game[data-players="8"] .seat-top .seat-clock:empty{display:none}
 #game[data-players="5"] .seat-top .backs,#game[data-players="6"] .seat-top .backs,#game[data-players="7"] .seat-top .backs,#game[data-players="8"] .seat-top .backs{width:70px;max-width:70px;max-height:34px;padding:0 0 0 14px;justify-content:center}
 #game[data-players="5"] .seat-top .backs img,#game[data-players="6"] .seat-top .backs img,#game[data-players="7"] .seat-top .backs img,#game[data-players="8"] .seat-top .backs img{width:21px;height:29px;flex-basis:21px;margin-left:-13px}
 #game[data-players="5"] .seat-top .seat-info strong,#game[data-players="6"] .seat-top .seat-info strong,#game[data-players="7"] .seat-top .seat-info strong,#game[data-players="8"] .seat-top .seat-info strong{font-size:8px}
}
/* 1.2.4: each seat owns a complete, unclipped fan and a compact identity. */
#game .backs{--back-width:45px;--back-height:61px;--back-step:23px;--back-padding:9px;overflow:visible;flex-shrink:0;max-height:none;max-width:none;box-sizing:content-box}
#game .backs img{width:var(--back-width);height:var(--back-height);flex:0 0 var(--back-height);margin:0;transform-origin:50% 50%;transform:translateY(var(--back-lift,0px)) rotate(var(--back-angle,0deg))}
#game .seat-left,#game .seat-right{min-width:0;max-height:none;flex-wrap:nowrap;gap:7px;justify-self:center;align-self:center;padding:9px}
#game .seat-left .backs,#game .seat-right .backs{flex-direction:column;align-items:center;width:var(--back-width);height:calc(var(--back-height) + (var(--back-count) - 1)*var(--back-step));padding:var(--back-padding)}
#game .seat-left .backs img+img,#game .seat-right .backs img+img{margin-top:calc(var(--back-step) - var(--back-height))}
#game .seat-top .backs{flex-direction:row;align-items:center;width:calc(var(--back-width) + (var(--back-count) - 1)*var(--back-step));height:var(--back-height);padding:var(--back-padding)}
#game .seat-top .backs img{flex-basis:var(--back-width)}
#game .seat-top .backs img+img{margin-left:calc(var(--back-step) - var(--back-width))}
#game[data-players="4"] #seat2.seat-top{display:flex!important;flex-wrap:nowrap;gap:10px;width:auto;max-width:100%;padding:8px;justify-content:center}
#game .seat-info{flex:none;gap:3px}
#game .seat-clock:empty{display:none;min-width:0;min-height:0}
@media(min-width:1000px) and (min-height:571px){
 #game{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:100px minmax(0,1fr) var(--human-height);column-gap:12px}
 #game .human{grid-column:2;grid-row:3}
 #game .human-top{justify-content:center;gap:14px}
 #game .human-identity{max-width:100%}
 #game .seat-left,#game .seat-right{width:100%;max-width:340px;min-height:200px;gap:7px}
 #game .seat-left .backs,#game .seat-right .backs{--back-width:56px;--back-height:76px;--back-step:27px;flex-direction:row;align-items:center;width:calc(var(--back-width) + (var(--back-count) - 1)*var(--back-step));height:var(--back-height)}
 #game .seat-left .backs img,#game .seat-right .backs img{flex-basis:var(--back-width)}
 #game .seat-left .backs img+img,#game .seat-right .backs img+img{margin-top:0;margin-left:calc(var(--back-step) - var(--back-width))}
 #game[data-players="2"] .human{grid-column:2}
}
@media(max-width:700px){
 #game .seat-left,#game .seat-right{padding:0;gap:5px}
 #game .seat-left .backs,#game .seat-right .backs{--back-width:30px;--back-height:41px;--back-step:9px;--back-padding:5px}
 #game .seat-top .backs{--back-width:34px;--back-height:46px;--back-step:16px;--back-padding:6px}
 #game[data-players="4"] #seat2.seat-top{gap:6px;padding:4px}
}
@media(max-height:650px) and (orientation:portrait){
 #game .seat-left,#game .seat-right{gap:4px}
 #game .seat-left .avatar,#game .seat-right .avatar{display:none}
 #game .seat-left .backs,#game .seat-right .backs{--back-width:26px;--back-height:35px;--back-step:6px;--back-padding:5px}
}
@media(max-height:570px) and (orientation:landscape){
 #game .seat-left,#game .seat-right{gap:3px;padding:0}
 #game .seat-left .avatar,#game .seat-right .avatar{display:none}
 #game .seat-left .backs,#game .seat-right .backs{--back-width:26px;--back-height:35px;--back-step:6px;--back-padding:5px}
 #game .seat-top .backs{--back-width:25px;--back-height:34px;--back-step:13px;--back-padding:4px}
 #game[data-players="4"] #seat2.seat-top{gap:6px;padding:1px}
}
/* Compact top seats for larger games retain the same complete-fan sizing. */
#game:is([data-players="5"],[data-players="6"],[data-players="7"],[data-players="8"]) .seat-top .backs{--back-width:28px;--back-height:38px;--back-step:14px;--back-padding:4px;width:calc(var(--back-width) + (var(--back-count) - 1)*var(--back-step));height:var(--back-height);max-width:none;max-height:none;padding:var(--back-padding)}
#game:is([data-players="5"],[data-players="6"],[data-players="7"],[data-players="8"]) .seat-top .backs img{width:var(--back-width);height:var(--back-height);flex-basis:var(--back-width);margin:0}
#game:is([data-players="5"],[data-players="6"],[data-players="7"],[data-players="8"]) .seat-top .backs img+img{margin-left:calc(var(--back-step) - var(--back-width))}
@media(max-width:700px){#game:is([data-players="5"],[data-players="6"],[data-players="7"],[data-players="8"]) .seat-top .backs{--back-width:20px;--back-height:27px;--back-step:7px;--back-padding:3px}}
@media(max-height:570px) and (orientation:landscape){#game:is([data-players="5"],[data-players="6"],[data-players="7"],[data-players="8"]) .seat-top .backs{--back-width:21px;--back-height:29px;--back-step:7px;--back-padding:3px}}
#game[data-players="2"] .seat-left{min-height:0;width:auto;max-width:100%;flex-direction:row;gap:10px;padding:4px}
#game[data-players="2"] .seat-left .backs{--back-width:34px;--back-height:46px;--back-step:16px;--back-padding:6px;flex-direction:row;width:calc(var(--back-width) + (var(--back-count) - 1)*var(--back-step));height:var(--back-height)}
#game[data-players="2"] .seat-left .backs img{flex-basis:var(--back-width)}
#game[data-players="2"] .seat-left .backs img+img{margin-top:0;margin-left:calc(var(--back-step) - var(--back-width))}
@media(min-width:1000px) and (min-height:571px) and (max-height:700px){
 :root{--hand-card-width:86px;--human-height:calc(var(--hand-card-height) + 112px);--table-card-width:86px}
 #game{grid-template-rows:80px minmax(0,1fr) var(--human-height);row-gap:6px;padding-top:6px}
 #game .center{gap:2px}.turnline{min-height:16px;font-size:10px}#message{height:20px;flex-basis:20px;font-size:10px}#penalty{height:10px;min-height:10px;flex-basis:10px;line-height:10px;font-size:9px}
 #game .human{grid-template-rows:28px minmax(0,1fr) 10px 40px;padding-top:3px}#game .human-top{height:28px}#game #hand{padding:15px 20px 7px}#game .shouts button{min-height:36px;max-height:36px;font-size:11px;padding:7px 12px}#game #hintLine{height:10px;line-height:10px;font-size:8px}
 #game .seat-left,#game .seat-right{min-height:0;gap:4px}#game .seat-left .avatar,#game .seat-right .avatar{display:none}
 #game .seat-left .backs,#game .seat-right .backs{--back-width:42px;--back-height:57px;--back-step:20px;--back-padding:7px}
}
#shoutCatch.catch-alert{animation:catch-alert .8s ease-in-out infinite;border-color:#ffe7a0;color:#fff}
@keyframes catch-alert{0%,100%{background:#8a3434;box-shadow:0 0 0 1px #ed9494}50%{background:#d95c38;box-shadow:0 0 18px #ffb256cc}}
/* Reserve space for rotated corners and the small fan lift as well as the PNG box. */
@media(max-width:700px){#game .seat-left .backs,#game .seat-right .backs{--back-padding:7px}}
@media(max-height:570px) and (orientation:landscape){#game .seat-left .backs,#game .seat-right .backs{--back-padding:7px}}
#game:is([data-players="5"],[data-players="6"],[data-players="7"],[data-players="8"]) .seat-top .backs{--back-padding:6px}
@media(max-height:570px) and (orientation:landscape){
 #game[data-players="2"] .seat-left{padding:0;gap:6px}
 #game[data-players="2"] .seat-left .backs{--back-width:25px;--back-height:34px;--back-step:13px;--back-padding:5px}
}

/* Official supplied logo, preserving the source PNG and its proportions. */
header .wordmark{--logo-width:200px;position:relative;flex:0 0 var(--logo-width);width:var(--logo-width);height:40px;overflow:hidden;font-size:0;line-height:0}
header .wordmark img{position:absolute;left:0;top:calc(var(--logo-width)*-.07);width:100%;height:auto;display:block}
@media(max-width:700px){header .wordmark{--logo-width:140px;height:28px}}
@media(max-width:360px){header .wordmark{--logo-width:110px;height:23px}}
@media(max-height:570px) and (orientation:landscape){header .wordmark{--logo-width:160px;height:32px}}

/* User-supplied table background, original PNG preserved. */
#game{background-color:#1b140f;background-image:linear-gradient(#090c101f,#090c103d),url('assets/stack-table-background.webp');background-size:cover;background-position:center;background-repeat:no-repeat}
#game:before{display:none}
#game .seat{background:#0b0e1499;backdrop-filter:blur(2px);border-radius:16px}
#game .seat.active-seat{background:#241b12bf}
#game .seat-info strong,#game .seat .count{color:#fff5df;text-shadow:0 1px 3px #000,0 0 6px #000}
#game .human{background:#0b0e1499;border-radius:14px 14px 0 0}
#game #turnLabel{background:#090c10b3;padding:3px 8px;border-radius:6px;color:#fff1cb;text-shadow:0 1px 2px #000}
#game #message:not(:empty){background:#090c10b3;border-radius:6px;color:#fff1cb}
#game #penalty:not(:empty){background:#090c10b3;border-radius:5px}
#game #hintLine{color:#ddd2bd;text-shadow:0 1px 2px #000}
/* 1.2.7: four bounded player zones at every desktop height, including browser zoom. */
.seat-identity{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;min-width:0}
.seat-top .seat-identity{flex-direction:row;gap:7px}
@media(min-width:701px){
 :root{--hand-card-width:clamp(76px,6.6vw,104px);--human-height:calc(var(--hand-card-height) + 98px);--player-top-zone:90px}
 #game[data-players="4"]{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:var(--player-top-zone) minmax(0,1fr) var(--human-height);gap:8px;padding:8px 18px 0}
 #game[data-players="4"] .human{grid-column:2;grid-row:3;width:100%;max-width:720px;justify-self:center;grid-template-rows:24px minmax(0,1fr) 10px 38px;padding:0 0 4px;background:none;border:0;border-radius:0;box-shadow:none;overflow:hidden}
 #game[data-players="4"] .human.active-seat{background:none;border:0;box-shadow:none}
 #game[data-players="4"] .human-top{height:24px;padding:0;justify-content:center;gap:8px}
 #game[data-players="4"] .human-identity{max-width:100%;background:#0b0e14b3;border-radius:8px;padding:3px 10px;gap:8px}
 #game[data-players="4"] .human.active-seat .human-identity{box-shadow:0 0 0 1px #d7b66d88}
 #game[data-players="4"] .human-identity #clock{width:23px;height:23px;font-size:10px}
 #game[data-players="4"] #hand{padding:15px 18px 8px}
 #game[data-players="4"] #hand button{transform:translateY(var(--fan-lift,0px)) rotate(calc(var(--fan-angle,0deg)*.5))}
 #game[data-players="4"] #hand button.selected{transform:translateY(calc(var(--fan-lift,0px) - 12px)) rotate(calc(var(--fan-angle,0deg)*.5))}
 #game[data-players="4"] .shouts{padding:0;gap:14px}
 #game[data-players="4"] .shouts button{min-height:34px;max-height:34px;min-width:142px;width:auto;font-size:11px;padding:7px 12px}
 #game[data-players="4"] #hintLine{font-size:8px;line-height:10px;height:10px}
 #game[data-players="4"] #seat2.seat-top{grid-column:2!important;grid-row:1!important;display:flex!important;width:max-content;max-width:100%;min-height:0;padding:6px 10px;gap:10px;justify-self:center;align-self:center}
 #game[data-players="4"] .seat-left,#game[data-players="4"] .seat-right{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;max-width:100%;min-height:0;max-height:100%;gap:10px;padding:8px;justify-self:center;align-self:center}
 #game[data-players="4"] .seat-left .seat-identity,#game[data-players="4"] .seat-right .seat-identity{width:76px;flex-direction:column;gap:5px}
 #game[data-players="4"] .seat-right .seat-identity{order:2}
 #game[data-players="4"] .seat-right .backs{order:1}
 #game[data-players="4"] .seat-left .avatar,#game[data-players="4"] .seat-right .avatar{display:grid;width:28px;height:28px}
 #game[data-players="4"] .seat-left .backs,#game[data-players="4"] .seat-right .backs{--side-face-width:64px;--side-face-height:87px;--side-step:20px;--side-pad:9px;position:relative;box-sizing:border-box;width:calc(var(--side-face-height) + 2*var(--side-pad));height:calc(var(--side-face-width) + (var(--back-count) - 1)*var(--side-step) + 2*var(--side-pad));padding:0;flex:none;overflow:visible}
 #game[data-players="4"] .seat-left .backs img,#game[data-players="4"] .seat-right .backs img{position:absolute;width:var(--side-face-width);height:var(--side-face-height);max-width:none;max-height:none;flex:none;margin:0;left:calc((var(--side-face-height) + 2*var(--side-pad) - var(--side-face-width))/2);top:calc(var(--side-pad) + var(--back-index)*var(--side-step) + (var(--side-face-width) - var(--side-face-height))/2);transform-origin:50% 50%;transform:rotate(calc(90deg + var(--back-angle,0deg)))}
 #game[data-players="4"] .seat-right .backs img{transform:rotate(calc(-90deg + var(--back-angle,0deg)))}
}
@media(min-width:701px) and (max-height:760px){
 :root{--hand-card-width:70px;--human-height:calc(var(--hand-card-height) + 88px);--player-top-zone:74px;--table-card-width:96px}
 #game[data-players="4"] .seat-left .backs,#game[data-players="4"] .seat-right .backs{--side-face-width:52px;--side-face-height:70px;--side-step:16px}
 #game[data-players="4"] .seat-left .seat-identity,#game[data-players="4"] .seat-right .seat-identity{width:68px}
 #game[data-players="4"] .seat-left .avatar,#game[data-players="4"] .seat-right .avatar{display:none}
 #game[data-players="4"] .human{grid-template-rows:22px minmax(0,1fr) 0 34px}
 #game[data-players="4"] .human-top{height:22px}
 #game[data-players="4"] #hintLine{display:none}
 #game[data-players="4"] .center{gap:2px}
 #game[data-players="4"] .turnline{min-height:18px;font-size:10px}
 #game[data-players="4"] #message{height:24px;flex-basis:24px;font-size:10px}
 #game[data-players="4"] #penalty{height:12px;min-height:12px;flex-basis:12px;font-size:9px;line-height:12px}
}
@media(min-width:701px) and (max-height:570px){
 :root{--hand-card-width:60px;--human-height:calc(var(--hand-card-height) + 84px);--player-top-zone:52px;--table-card-width:76px}
 #game[data-players="4"]{gap:4px;padding-top:2px}
 #game[data-players="4"] .seat-left,#game[data-players="4"] .seat-right{padding:5px;gap:5px}
 #game[data-players="4"] .seat-left .seat-identity,#game[data-players="4"] .seat-right .seat-identity{width:58px;gap:3px}
 #game[data-players="4"] .seat-left .backs,#game[data-players="4"] .seat-right .backs{--side-face-width:34px;--side-face-height:46px;--side-step:10px;--side-pad:7px}
 #game[data-players="4"] .human .shouts button{min-height:30px;max-height:30px;min-width:130px;font-size:10px;padding:6px 10px}
 #game[data-players="4"] .human{grid-template-rows:22px minmax(0,1fr) 0 32px}
 #game[data-players="4"] #seat2.seat-top{padding:1px 6px;gap:6px}
 #game[data-players="4"] .seat-top .backs{--back-width:25px;--back-height:34px;--back-step:13px;--back-padding:4px}
 #game[data-players="4"] .piles{grid-template-columns:76px 76px 70px;gap:10px}
}
@media(max-width:700px){#game[data-players="4"] .human{background:none;border-radius:0}#game[data-players="4"] .human-identity{background:#0b0e14b3;border-radius:6px;padding:2px 6px}.seat-identity{gap:4px}}
@media(min-width:701px) and (min-height:761px){#game[data-players="4"] .seat-left .backs,#game[data-players="4"] .seat-right .backs{--side-face-width:72px;--side-face-height:98px;--side-step:26px;--side-pad:10px}}
@media(min-width:701px) and (min-height:571px) and (max-height:760px){#game[data-players="4"] .seat-left .backs,#game[data-players="4"] .seat-right .backs{--side-face-width:60px;--side-face-height:81px;--side-step:21px}}
@media(min-width:1000px) and (max-height:570px){#game[data-players="4"] .seat-left .backs,#game[data-players="4"] .seat-right .backs{--side-face-width:48px;--side-face-height:65px;--side-step:17px;--side-pad:9px}}
@media(min-width:701px){#game[data-players="4"] .seat-identity .seat-info strong{font-size:11px;letter-spacing:.4px;white-space:nowrap}}
@media(min-width:701px) and (max-height:570px){#game[data-players="4"] .seat-identity .seat-info strong{font-size:10px;letter-spacing:.3px}}
/* Disabling a pile blocks input, without making printed cards translucent. */
#game .pile,#game .pile:disabled{opacity:1}
#game #pile{background:#000}

/* Keep the real hand unobscured while choosing a special-card color or target. */
dialog.hand-visible-choice{position:fixed;inset:auto;left:50%;bottom:var(--choice-bottom,240px);transform:translateX(-50%);margin:0;width:min(560px,calc(100vw - 24px));max-height:var(--choice-height,calc(100dvh - 260px));padding:18px;box-shadow:0 8px 28px #0009}
dialog.hand-visible-choice::backdrop{background:transparent;backdrop-filter:none}
dialog.hand-visible-choice h2{font-size:16px;margin:0 0 14px}
#choiceDialog.hand-visible-choice #choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
#choiceDialog.hand-visible-choice #choices button{min-width:0;margin:0;padding:14px 4px;font-size:12px}
#choiceDialog.hand-visible-choice #cancelChoice{margin-top:12px;padding:8px 12px;font-size:11px}
@media(max-width:560px){#choiceDialog.hand-visible-choice #choices{grid-template-columns:repeat(3,minmax(0,1fr))}dialog.hand-visible-choice{padding:14px}dialog.hand-visible-choice h2{font-size:14px;margin-bottom:10px}}

/* Shouts attach visually to the speaker and stay outside clipped seat containers. */
.player-shout{position:fixed;z-index:120;pointer-events:none;padding:9px 16px;border:2px solid #e7c26e;border-radius:15px;background:#f2d68e;color:#1b1409;font-size:17px;font-weight:950;letter-spacing:1px;line-height:1.1;box-shadow:0 5px 18px #0009;white-space:nowrap}
.player-shout:after{content:'';position:absolute;left:calc(50% - 6px);bottom:-8px;width:12px;height:12px;background:inherit;border-right:2px solid #e7c26e;border-bottom:2px solid #e7c26e;transform:rotate(45deg)}
.player-shout.shout-catch{background:#8a3434;color:#fff5da;border-color:#ffab83}
.player-shout.shout-catch:after{border-color:#ffab83}
@media(max-width:700px),(max-height:570px){.player-shout{font-size:13px;padding:7px 11px;border-radius:12px}}

.player-shout.shout-below:after{top:-8px;bottom:auto;transform:rotate(225deg)}

.pause-overlay strong,.pause-overlay span{text-shadow:0 2px 5px #000,0 0 12px #000}

/* 1.2.13: visible turn marker, consistent opponent panels and a separate clock. */
#game .seat{border:1px solid #b49a6366;background:#0b0e14b8;border-radius:16px;box-shadow:0 5px 18px #0005}
#game .seat.active-seat{border-color:#ffe29a;background:#302515c7;box-shadow:0 0 0 2px #ebc77966,0 0 27px #f5cf7b88,inset 0 0 18px #e9bd4e24}
#game[data-players="4"] .human-identity{max-width:70%;border:1px solid #b49a6366;padding:4px 12px}
#game[data-players="4"] .human.active-seat .human-identity{border-color:#ffe29a;background:#302515e0;box-shadow:0 0 0 2px #ebc77966,0 0 24px #f5cf7b99}
#game #handLabel,#game #humanClock{display:none}
#game #humanName{max-width:min(200px,40vw);overflow:hidden;text-overflow:ellipsis}
body > #clock{position:fixed;z-index:115;display:grid;place-items:center;width:48px;height:48px;font-size:19px;line-height:1;border-radius:50%;pointer-events:none;box-shadow:0 0 18px #d7b66d88,inset 0 0 0 5px #15181d}
body > #clock[hidden]{display:none}
#game #tableNotes{position:absolute;z-index:3;left:14px;bottom:14px;width:min(230px,23vw);padding:8px 10px;background:#090c10bf;border:1px solid #b49a633d;border-radius:10px;pointer-events:none;text-align:left}
#game #tableNotes .turnline{justify-content:flex-start;gap:8px;font-size:10px;min-height:0}
#game #tableNotes #turnLabel{padding:0;background:none}
#game #tableNotes #message{display:block;background:none;padding:0;margin:5px 0 0;height:auto;min-height:0;max-width:100%;font-size:11px;line-height:1.4;overflow:visible}
#game #tableNotes #penalty{background:none;height:auto;min-height:0;margin-top:3px;font-size:11px;line-height:1.4}
#game #tableNotes #message:empty,#game #tableNotes #penalty:empty{display:none}
@media(max-width:700px){body > #clock{width:39px;height:39px;font-size:16px}#game #tableNotes{left:8px;bottom:calc(var(--human-height) + 7px);width:min(200px,calc(100vw - 16px));padding:5px 7px}#game #tableNotes #message,#game #tableNotes #penalty{font-size:9px}#game #tableNotes .turnline{font-size:9px}}
@media(min-width:701px) and (max-height:570px){body > #clock{width:40px;height:40px;font-size:16px}#game #tableNotes{bottom:10px;left:10px;width:22vw;padding:5px 7px}#game #tableNotes #message,#game #tableNotes #penalty{font-size:9px}}

#game[data-players="4"] .human{overflow:visible}

/* 1.2.15: one-card interaction, clock controls together and matching horizontal hands. */
#turnControls{position:fixed;z-index:115;display:flex;align-items:center;gap:8px;width:max-content}
#turnControls[hidden]{display:none}
#turnControls #clock{position:static;display:grid;place-items:center;width:48px;height:48px;font-size:19px;line-height:1;border-radius:50%;pointer-events:none;box-shadow:0 0 18px #d7b66d88,inset 0 0 0 5px #15181d}
#turnControls #endTurn{position:static;flex:none;margin:0;min-height:36px;padding:8px 10px;font-size:11px;white-space:nowrap;border-color:var(--gold);background:#251e12}
#turnControls #endTurn[hidden]{display:none}
#fullscreenToggle{position:fixed;right:12px;bottom:12px;z-index:190;width:42px;height:40px;padding:0;display:grid;place-items:center;font-size:27px;line-height:1;background:#10131de6;border-color:#d7b66d;box-shadow:0 2px 10px #0007}
#game[data-players="4"]{--player-top-zone:126px}
#game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{--seat-face:48px;--seat-card-height:65px;--seat-step:18px;display:flex!important;flex-direction:column;flex-wrap:nowrap;width:min(230px,100%);max-width:100%;padding:8px;gap:7px;justify-self:center;align-self:center}
#game[data-players="4"] .seat .seat-identity{order:0;width:auto;flex-direction:row;gap:7px;justify-content:center}
#game[data-players="4"] .seat .avatar{display:grid;width:26px;height:26px}
#game[data-players="4"] .seat .seat-info{text-align:left;gap:2px}
#game[data-players="4"] .seat .backs{order:1;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:none;gap:0;width:calc(var(--seat-face) + (var(--back-count) - 1)*var(--seat-step) + 12px);height:calc(var(--seat-card-height) + 8px);max-width:100%;max-height:none;padding:4px 6px;overflow:visible}
#game[data-players="4"] .seat .backs img{position:relative;left:auto;top:auto;width:var(--seat-face);height:var(--seat-card-height);max-width:none;max-height:none;flex:0 0 var(--seat-face);margin:0;transform:rotate(var(--back-angle,0deg));transform-origin:center}
#game[data-players="4"] .seat .backs img+img{margin-left:calc(var(--seat-step) - var(--seat-face))}
@media(min-width:701px) and (max-width:1000px){#game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{--seat-face:36px;--seat-card-height:49px;--seat-step:12px}}
@media(min-width:701px) and (max-height:760px){#game[data-players="4"]{--player-top-zone:104px}#game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{--seat-face:38px;--seat-card-height:51px;--seat-step:14px;padding:6px;gap:5px}}
@media(min-width:701px) and (max-height:570px){#game[data-players="4"]{--player-top-zone:80px}#game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{--seat-face:28px;--seat-card-height:38px;--seat-step:11px;padding:4px;gap:4px}#game[data-players="4"] .seat .avatar{display:none}}
@media(max-width:700px){
 #game[data-players="4"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:104px minmax(0,1fr) var(--human-height);padding-top:6px}
 #game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{--seat-face:25px;--seat-card-height:34px;--seat-step:9px;grid-row:1!important;width:100%;padding:5px 2px;gap:5px}
 #game[data-players="4"] #seat1{grid-column:1!important}#game[data-players="4"] #seat2{grid-column:2!important}#game[data-players="4"] #seat3{grid-column:3!important}
 #game[data-players="4"] .seat .avatar{display:none}#game[data-players="4"] .seat .seat-info strong{font-size:9px}#game[data-players="4"] .seat .count{font-size:9px}
 #game[data-players="4"] .center{grid-column:1/-1;grid-row:2}#game[data-players="4"] .human{grid-column:1/-1;grid-row:3}
 #turnControls #clock{width:39px;height:39px;font-size:16px}#turnControls #endTurn{min-height:32px;font-size:10px;padding:7px 8px}
 #fullscreenToggle{right:7px;bottom:7px;width:33px;height:33px;font-size:23px}
}
@media(min-width:701px) and (max-height:570px){#turnControls #clock{width:40px;height:40px;font-size:16px}}

@media(max-width:700px){#game[data-players="4"]{grid-template-rows:132px minmax(0,1fr) var(--human-height)}#game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{align-self:end}}

@media(max-width:700px){
 #game[data-players="4"]{grid-template-rows:132px minmax(0,1fr) var(--human-height) 32px;gap:4px}
 #game #tableNotes{position:static;grid-column:1/-1;grid-row:4;align-self:stretch;justify-self:start;width:calc(100% - 44px);height:auto;max-height:30px;padding:3px 6px;margin:0 0 2px;overflow:hidden}
 #game #tableNotes:has(#message:not(:empty)) .turnline{display:none}
 #game #tableNotes #message{margin:0;font-size:9px;line-height:12px}
 #game .shouts{padding-left:4px;padding-right:44px;gap:8px}
 #game .shouts button{flex:1;min-width:0;width:auto;font-size:10px}
}

/* Identical sizing for all three opponent panels. */
#game[data-players="4"] .seat .backs{box-sizing:border-box}
#game[data-players="4"] #seat2.seat-top .seat-info{gap:2px}

#optionsDialog{width:min(360px,calc(100vw - 28px))}
.options-actions{display:flex;flex-direction:column;gap:7px;margin-top:18px}.options-actions button{margin:0;text-align:left}
#helpDialog{width:min(520px,calc(100vw - 28px))}#helpDialog details{border-bottom:1px solid #61533966;padding:12px 0}#helpDialog summary{cursor:pointer;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.4px}#helpDialog p,#helpDialog li{font-size:13px;line-height:1.55}#helpDialog ol{padding-left:22px;margin-bottom:8px}#helpDialog li{margin:7px 0}#helpDialog #helpBack{display:block;margin-top:15px}
@media(min-width:701px){#game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{width:min(230px,calc((100vw - 60px)/4))}}

/* The supplied table extends behind the transparent header during a match. */
body.playing{background-color:#1b140f;background-image:linear-gradient(#090c101f,#090c103d),url('assets/stack-table-background.webp');background-size:cover;background-position:center;background-repeat:no-repeat}
body.playing header{background:transparent;border-bottom-color:#d7b66d22;backdrop-filter:none}
body.playing #game{background:transparent}
body.playing #playerName{text-shadow:0 1px 3px #000,0 0 6px #000}
/* The player's name is shown once, beside their hand. */
header #playerName{display:none}

#game #hand button.stack-start{border-color:#ffe29a;box-shadow:0 0 0 2px #d7b66d,0 0 16px #d7b66d77}

/* Declarations stay visually neutral; only an actionable CATCH lights up. */
#game #shoutStack,#game #shoutStack.declared,#game #shoutStack:active{background:#1c1e24;color:#c9c6bc;border:1px solid #5a4e33;box-shadow:none;animation:none;filter:none}
#game #shoutCatch:not(.catch-alert){background:#1c1e24;color:#c9c6bc;border-color:#5a4e33;box-shadow:none;animation:none}
#game .shouts button:disabled{opacity:.45}

/* Only the human's completed declaration lights their STACK button. */
#game #shoutStack.declared,#game #shoutStack.declared:active{background:#365339;color:#fff5da;border-color:#d7b66d;box-shadow:0 0 12px #d7b66d66;opacity:1;animation:none;filter:none}

/* Large hands: expose every card edge; arrows and mouse wheel reach overflow. */
#handNavigation{display:flex;gap:6px;margin-left:auto}#handNavigation[hidden]{display:none}
#handNavigation button{padding:4px 12px;min-width:36px;font-size:18px;line-height:20px}
#game #hand.scrollable{justify-content:flex-start;scrollbar-width:thin;scrollbar-color:#d7b66d #16191d}

#game #hand::-webkit-scrollbar{height:7px}#game #hand::-webkit-scrollbar-thumb{background:#d7b66d;border-radius:5px}
@media(hover:hover){#game #hand button:not(:disabled):hover{z-index:200!important;transform:translateY(-12px);box-shadow:0 0 0 2px #d7b66d,0 5px 12px #0009}}

#startCountdown{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;background:#070b1238;color:#ffe1a0;font-size:clamp(100px,19vw,220px);font-weight:950;text-shadow:0 0 30px #d7b66d99,0 5px 12px #000;pointer-events:auto}#startCountdown[hidden]{display:none}

#startCountdown.countdown-welcome{flex-direction:column;gap:18px;text-align:center;padding:24px}#startCountdown.countdown-welcome strong{font-size:clamp(26px,5.5vw,70px);letter-spacing:2px}#startCountdown.countdown-welcome span{font-size:clamp(18px,2.5vw,30px);font-weight:600;color:#fff5da}


/* Complete hand track: scroll extent includes every card, including the last one. */
#game #hand{display:block;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto}
#game #hand .hand-track{display:flex;align-items:flex-start;justify-content:flex-start;gap:6px;margin-inline:auto;min-height:100%;position:relative}
#game #hand .hand-track>button{flex-shrink:0}

/* Keep a readable fan even when the complete hand needs scrolling. */
#game[data-players="4"] #hand .hand-track>button{transform:translateY(var(--fan-lift,0px)) rotate(calc(var(--fan-angle,0deg)*1.5))}
#game[data-players="4"] #hand .hand-track>button.selected{transform:translateY(calc(var(--fan-lift,0px) - 12px)) rotate(calc(var(--fan-angle,0deg)*1.5))}
@media(min-width:701px) and (max-width:1000px){#game[data-players="4"]{--human-height:calc(var(--hand-card-height) + 122px)}}

/* Name and current card count share the identity badge. */
#game .human-identity{display:flex;align-items:center;min-width:0;flex:0 1 auto;gap:7px;overflow:hidden}
#game #humanName{display:block;min-width:0;max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game #handLabel{display:inline-block;flex:none;white-space:nowrap;font-size:10px;letter-spacing:0;color:#fff1cb}

/* Wider, deeper human fan; reserve the box on the left and fullscreen on the right. */
@media(min-width:701px){
 #game[data-players="4"]{--human-height:calc(var(--hand-card-height) + 144px)}
 #game[data-players="4"] .human{grid-column:1 / -1;width:auto;max-width:none;margin-left:23%;margin-right:3%;justify-self:stretch;overflow:visible}
 #game[data-players="4"] #hand{padding:30px 30px 9px}
 #game[data-players="4"] .human-top{justify-content:flex-start;padding:0 30px}
 #game[data-players="4"] .shouts{justify-content:center}
}

/* Player identity sits after the two shout controls, below the cards. */
#game[data-players="4"] .shouts{gap:12px;justify-content:flex-end}
#game[data-players="4"] .shouts .human-identity{flex:0 1 auto;max-width:none;min-height:28px;font-size:10px;padding:4px 8px;gap:5px;margin-left:0}
#game[data-players="4"] #shoutCatch{margin-left:0}
#game[data-players="4"] .shouts #handLabel{font-size:9px}
@media(min-width:701px){#game[data-players="4"] .human{margin-right:5.5%}#game[data-players="4"] .shouts button{min-width:125px}}
@media(max-width:700px){#game[data-players="4"] .shouts{flex-wrap:wrap;justify-content:center;gap:5px 10px}#game[data-players="4"] .shouts .human-identity{flex-basis:100%;justify-content:center;background:none;border:0;padding:0;min-height:20px}#game[data-players="4"] .human{grid-template-rows:25px minmax(0,1fr) 0 64px;--human-height:calc(var(--hand-card-height) + 150px)}}

/* Raised card preview remains readable above a densely overlapped hand. */
#game[data-players="4"] #hand .hand-track>button.selected{z-index:500!important;transform:translateY(-22px) rotate(0deg);box-shadow:0 0 0 2px #d7b66d,0 7px 18px #000a}
/* Centre the human hand on the table, independently of the identity badge. */
@media(min-width:701px){#game[data-players="4"] #hand{position:relative;left:calc(-8.75vw + 3.15px)}}

/* Disabled hand cards stay opaque so overlapping artwork cannot show through. */
#game #hand button:disabled{opacity:1}

@media(max-width:700px){#game[data-players="4"] .shouts .human-identity{flex-basis:auto;width:auto;max-width:35%;font-size:9px}#game[data-players="4"] .shouts{flex-wrap:nowrap;gap:5px}#game[data-players="4"] .shouts button{min-width:0;flex:1;font-size:9px;padding:7px 4px}}

/* Lower only the draw/discard piles and active-colour badge slightly. */
#game .center .piles{transform:translateY(clamp(12px,3.5vh,34px))}

/* No extra rectangular frame outside the printed card artwork. */
#game #hand .hand-track>button{border-color:transparent!important;outline:none!important;box-shadow:none!important}
#game #hand .hand-track>button:focus-visible{filter:none!important}

/* Fullscreen stays clickable above the pre-game countdown overlay. */
#fullscreenToggle{z-index:260}

#optionsDialog .sound-volume{display:block;margin:8px 0 18px}#soundVolumeValue{float:right;color:var(--gold)}#optionsDialog input[type="range"]{width:100%;padding:0;margin-top:10px;accent-color:var(--gold);cursor:pointer}

#musicVolumeValue{float:right;color:var(--gold)}

/* Approved marked positions: panels stay fixed while cards and counts change. */
@media(min-width:701px){
 #game[data-players="4"] .seat,#game[data-players="4"] #seat2.seat-top{position:fixed;transform:none!important;transition:none!important;animation:none!important;margin:0;min-height:0;width:18.75vw;max-width:360px;height:15.3vh;max-height:165px;min-width:130px;justify-content:center}
 #game[data-players="4"] #seat1{left:4%;top:56%;right:auto;bottom:auto}
 #game[data-players="4"] #seat3{right:3.5%;top:57.5%;left:auto;bottom:auto}
 #game[data-players="4"] #seat2.seat-top{left:57%;top:1.1%;right:auto;bottom:auto;height:13vh;max-height:142px;width:16.75vw}
 #game[data-players="4"] .center{position:fixed;left:50%;top:var(--table-pile-top,45vh);width:max-content;max-width:none;transform:translateX(-50%);margin:0;padding:0;gap:0}
 #game[data-players="4"] .center .piles{width:auto;transform:none!important}
}
.invalid-move{position:fixed;z-index:200;pointer-events:none;padding:10px 18px;border:2px solid #e8b16d;border-radius:14px;background:#2b1b13f5;color:#ffe1ba;font-size:16px;font-weight:800;box-shadow:0 4px 16px #0009}
.invalid-move[hidden]{display:none}

/* Header actions remain available above countdown and pause overlays. */
body.playing .header-right{position:relative;z-index:270}
/* Clear button edges against the illustrated table. */
#game #shoutStack,#game #shoutCatch:not(.catch-alert){border:2px solid #d7b66d;background:#171a22ed;box-shadow:0 2px 7px #0009}
#game #shoutStack:disabled,#game #shoutCatch:disabled{border-color:#b59a62;opacity:.72}
#game #shoutStack.declared{border:2px solid #ffe1a0;background:#365339;box-shadow:0 0 12px #d7b66d66}

/* Card presentation has no interface rings, including theft and keyboard focus. */
#game .human.steal-target,#game .human.steal-actor,#game #hand,#game #hand .hand-track{outline:none!important;box-shadow:none!important;border-color:transparent!important}
#game #hand .hand-track>button:is(:hover,:focus,:focus-visible,.selected,.possible,.continuation,.stack-start){outline:none!important;box-shadow:none!important;border-color:transparent!important;filter:none!important}
#stolenFace,.steal-reveal img{border:0!important;outline:none!important;box-shadow:none!important;filter:none!important}
/* PASS owns its border; card and hand presentation stays ring-free. */
#turnControls #endTurn{border:2px solid #d7b66d;background:#171a22ed;color:#fff1cf;font-weight:800;box-shadow:0 2px 7px #0009}

/* Phone-only layout. Desktop panel positions and fullscreen control are preserved. */
html[data-layout="mobile"]{--mobile-header:48px;--hand-card-width:clamp(60px,12vw,92px);--hand-card-height:calc(var(--hand-card-width)*1457/1079);--mobile-opponents:90px;--human-height:calc(var(--hand-card-height) + 80px)}
html[data-layout="mobile"] body.playing header{height:var(--mobile-header);padding:5px 10px}
html[data-layout="mobile"] header .wordmark{--logo-width:140px;height:30px}
html[data-layout="mobile"] header button{padding:8px 10px;font-size:11px}
html[data-layout="mobile"] #game[data-players="4"]{height:calc(100dvh - var(--mobile-header));grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:var(--mobile-opponents) minmax(0,1fr) var(--human-height) 22px;padding:30px 7px 0;gap:5px}
html[data-layout="mobile"] #game[data-players="4"] .seat,html[data-layout="mobile"] #game[data-players="4"] #seat2.seat-top{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none!important;grid-row:1!important;align-self:stretch;justify-self:stretch;min-width:0;width:100%;max-width:none;height:100%;min-height:0;max-height:none;padding:5px 2px;gap:4px;--seat-face:26px;--seat-card-height:35px;--seat-step:9px;overflow:hidden}
html[data-layout="mobile"] #game[data-players="4"] #seat1{grid-column:1!important}html[data-layout="mobile"] #game[data-players="4"] #seat2{grid-column:2!important}html[data-layout="mobile"] #game[data-players="4"] #seat3{grid-column:3!important}
html[data-layout="mobile"] #game[data-players="4"] .seat .avatar{display:none}
html[data-layout="mobile"] #game[data-players="4"] .seat .seat-info strong{font-size:10px;line-height:12px;white-space:nowrap}html[data-layout="mobile"] #game[data-players="4"] .seat .count{font-size:10px;line-height:12px}
html[data-layout="mobile"] #game[data-players="4"] .center{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;grid-row:2;align-self:center;justify-self:center;width:100%;max-width:100%;gap:0}
html[data-layout="mobile"] #game[data-players="4"] .center .piles{transform:none!important;grid-template-columns:var(--mobile-pile,82px) var(--mobile-pile,82px) 72px;gap:12px;width:auto}
html[data-layout="mobile"] #game[data-players="4"] .pile{width:var(--mobile-pile,82px)}
html[data-layout="mobile"] #game #activeColor{width:72px;min-height:50px;padding:4px;font-size:10px;letter-spacing:.3px}
html[data-layout="mobile"] #game[data-players="4"] .human{position:relative;grid-column:1/-1;grid-row:3;grid-template-rows:14px minmax(0,1fr) 0 34px;margin:0;padding:0;width:100%;max-width:none;justify-self:stretch;height:var(--human-height);overflow:visible;background:none}
html[data-layout="mobile"] #game[data-players="4"] .human-top{height:14px;padding:0 40px 0 4px}
html[data-layout="mobile"] #game[data-players="4"] #hand{position:relative;left:auto;width:100%;padding:18px 5px 0}
html[data-layout="mobile"] #game[data-players="4"] #hintLine{display:none}
html[data-layout="mobile"] #game[data-players="4"] .shouts{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:7px;padding:0 36px 0 0;height:34px}
html[data-layout="mobile"] #game[data-players="4"] .shouts button{position:relative;left:auto;min-width:0;width:auto;max-width:145px;flex:1;min-height:32px;height:32px;max-height:32px;padding:5px;font-size:10px}
html[data-layout="mobile"] #game[data-players="4"] .shouts .human-identity{position:relative;left:auto;right:auto;bottom:auto;flex:0 1 auto;max-width:31%;font-size:9px;padding:3px;gap:3px}
html[data-layout="mobile"] #game #tableNotes{position:relative;left:auto;bottom:auto;grid-column:1/-1;grid-row:4;align-self:end;justify-self:stretch;width:calc(100% - 38px);max-height:22px;height:22px;margin:0;padding:3px 5px;overflow:hidden}
html[data-layout="mobile"] #game #tableNotes .turnline{display:none}html[data-layout="mobile"] #game #tableNotes #message{margin:0;font-size:9px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-layout="mobile"] #turnControls #clock{width:32px;height:32px;font-size:14px}html[data-layout="mobile"] #turnControls #endTurn{min-height:32px;padding:5px 8px;font-size:10px}
html[data-layout="mobile"] #fullscreenToggle{right:6px;bottom:6px;width:32px;height:32px}
.rotate-notice{position:fixed;top:50px;left:50%;transform:translateX(-50%);z-index:110;max-width:calc(100vw - 16px);white-space:nowrap;padding:4px 8px;border-radius:7px;background:#10131ded;color:#f0d494;font-size:10px;pointer-events:none}
body:not(.playing) .rotate-notice{display:none}
@media(orientation:landscape){html[data-layout="mobile"]{--mobile-header:40px;--hand-card-width:clamp(44px,12vh,72px);--mobile-opponents:clamp(56px,15vh,82px);--human-height:calc(var(--hand-card-height) + 74px);--mobile-pile:clamp(48px,15vh,80px)}html[data-layout="mobile"] #game[data-players="4"]{padding-top:5px;gap:4px}html[data-layout="mobile"] #game[data-players="4"] .seat,html[data-layout="mobile"] #game[data-players="4"] #seat2.seat-top{--seat-face:22px;--seat-card-height:30px;--seat-step:8px;padding:3px 2px;gap:2px}html[data-layout="mobile"] #game #activeColor{font-size:9px;min-height:42px}html[data-layout="mobile"] header .wordmark{--logo-width:130px;height:28px}}
/* Leave room for both ends of a phone hand without changing the desktop fan. */
html[data-layout="mobile"]{--human-height:calc(var(--hand-card-height) + 84px)}
html[data-layout="mobile"] #game[data-players="4"] #hand .hand-track>button{transform:translateY(calc(var(--fan-lift,0px)*.4)) rotate(var(--fan-angle,0deg))}
html[data-layout="mobile"] #game[data-players="4"] #hand .hand-track>button.selected{transform:translateY(-16px) rotate(0deg)}
@media(orientation:landscape) and (max-height:360px){html[data-layout="mobile"]{--mobile-header:34px;--mobile-opponents:44px;--hand-card-width:38px;--human-height:calc(var(--hand-card-height) + 62px);--mobile-pile:42px}html[data-layout="mobile"] #game[data-players="4"] .seat,html[data-layout="mobile"] #game[data-players="4"] #seat2.seat-top{--seat-face:16px;--seat-card-height:22px;--seat-step:6px;padding:1px;gap:1px}html[data-layout="mobile"] #game[data-players="4"] #hand{padding-top:7px}html[data-layout="mobile"] #game[data-players="4"] .seat .seat-info strong,html[data-layout="mobile"] #game[data-players="4"] .seat .count{font-size:8px;line-height:9px}html[data-layout="mobile"] #game[data-players="4"] .shouts,html[data-layout="mobile"] #game[data-players="4"] .shouts button{height:28px;min-height:28px;font-size:9px}html[data-layout="mobile"] #turnControls #clock{width:26px;height:26px;font-size:12px}}
html[data-layout="mobile"]{--mobile-human-height:calc(var(--hand-card-height) + 84px)}
html[data-layout="mobile"] #game[data-players="4"],html[data-layout="mobile"] #game[data-players="4"] .human{--human-height:var(--mobile-human-height)}
@media(orientation:landscape) and (max-height:360px){html[data-layout="mobile"]{--mobile-human-height:calc(var(--hand-card-height) + 62px)}}
/* The action pair is centred on the viewport; identity gets a separate bounded slot. */
html[data-layout] #game[data-players="4"] .human .shouts{position:fixed;left:0;right:0;bottom:5px;width:100%;height:36px;display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,38vw,280px) minmax(0,1fr);gap:8px;padding:0 8px;margin:0;pointer-events:none;flex-wrap:nowrap}
html[data-layout] #game[data-players="4"] .shouts .shout-buttons{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-width:0;pointer-events:auto}
html[data-layout] #game[data-players="4"] .shouts .shout-buttons>button{position:relative;left:auto;right:auto;grid-column:auto;grid-row:auto;flex:1;min-width:0;max-width:none;width:auto;margin:0;height:34px;min-height:34px;max-height:34px;padding:6px;font-size:11px}
html[data-layout] #game[data-players="4"] .shouts .human-identity{position:relative;grid-column:3;grid-row:1;left:auto;right:auto;bottom:auto;justify-self:start;display:flex;align-items:center;width:max-content;max-width:100%;min-width:0;margin:0;padding:4px;gap:4px;overflow:hidden;white-space:nowrap;font-size:10px;pointer-events:auto}
html[data-layout] #game .shouts #humanName{min-width:0;flex:0 1 auto;max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-layout] #game .shouts #handLabel{flex:0 0 auto;white-space:nowrap;letter-spacing:0;font-size:9px}
html[data-layout="mobile"] #game[data-players="4"] .human .shouts{bottom:25px;height:34px;grid-template-columns:minmax(0,1fr) clamp(150px,40vw,250px) minmax(0,1fr);gap:5px;padding:0 5px}
html[data-layout="mobile"] #game[data-players="4"] .shouts .shout-buttons>button{height:32px;min-height:32px;max-height:32px;font-size:10px;padding:4px}
html[data-layout="mobile"] #game[data-players="4"] .shouts .human-identity{font-size:9px;padding:3px;gap:2px}
#reportDialog{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
#reportForm{display:flex;flex-direction:column;gap:9px}#reportForm textarea{width:100%;resize:vertical;min-height:100px;font:inherit;color:#f4efe4;background:#0d1016;border:1px solid #786441;border-radius:8px;padding:10px}
#reportPreviews{display:flex;gap:8px;flex-wrap:wrap}#reportPreviews img{width:100px;height:80px;object-fit:contain;background:#090b0f;border-radius:5px}
#reportStatus{font-size:12px;line-height:1.4;min-height:18px;margin:4px 0}

/* Video advertisement, only before a match. */
.vast-dialog{width:min(92vw,860px);max-width:92vw;padding:16px;background:#0b0c0f;color:#fff;border:1px solid #d6b45d;text-align:center}.vast-dialog::backdrop{background:rgba(0,0,0,.92)}.vast-slot{position:relative;width:100%;height:min(64vh,460px);min-height:150px;background:#000}.vast-dialog p{margin:8px 0}.vast-dialog button{margin:8px auto}.vast-dialog button[hidden]{display:none}