/* Pinochle page layer (Nov 11 2026): bigger, closer robot faces and bigger trick cards than the poker table; readable contrast
   everywhere (no faded text); title screen invite UI. Loaded after kit/table.css + kit/ct-extras.css. */
.pn .felt{--tw:clamp(64px,19vw,112px)}
.pn .seat{width:116px}
.pn .seat .avw{width:84px;height:84px}
.pn .seat .av{width:84px;height:84px;border-width:3px}
@media (min-width:700px) and (min-height:640px){.pn .seat{width:150px}.pn .seat .avw,.pn .seat .av{width:112px;height:112px}.pn .felt{--tw:clamp(90px,10vw,130px)}}
.pn .seat .nm{color:#fff8e6;font-weight:800;font-size:17px;text-shadow:0 1px 3px #000,0 0 6px #000;line-height:1.1;text-align:center}
.pn .seat .chip{color:#ffe58a;background:rgba(6,4,16,.9)}
.pn .seat .chip:empty{display:none}
.pn .seat.turn .av{border-color:#ffe58a;box-shadow:0 0 0 4px rgba(255,229,138,.55),0 0 22px rgba(255,214,96,.9)}
.pn .pn-tk{display:block;margin-top:2px;padding:0 8px;border-radius:999px;background:rgba(6,4,16,.88);color:#fff;font-size:15px;font-weight:700}
.pn .mebar .pn-tk{display:inline-block;margin:0}
.pn .mebar .av{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #c9a24a;background:#2a1545}
.pn .msg{color:#fff8e6;text-shadow:0 1px 3px #000;font-weight:700}
.pn .infob,.pn .trumpb{color:#fff8e6}
.pn .act{background:rgba(14,8,30,.96);border:1.5px solid rgba(255,229,138,.55)}
.pn .act h3{color:#ffe58a}
.pn .act .note{color:#f2e6c9}
.pn .pn-bid .stepper{margin-top:8px;flex-wrap:wrap}
.pn .pn-bid .stepper .gk-btn.gold{flex:0 1 auto;min-width:96px}
.pn .suits{display:flex;gap:8px;justify-content:center}
.pn .suitb{flex-direction:column;gap:2px;color:#2a1545;font-size:16px;font-weight:800;min-height:84px;max-width:96px;background:#fff6dc}
.pn .gk-btn[disabled]{opacity:1;filter:none;background:#3a2b55;color:#f4ecff;border-color:#8f7bb5}
.pn .hc.no{filter:brightness(.62)}
.pn #hand .hc.no .card{opacity:1}
/* tfPN9e3: playable cards must be clearly bright and readable (unplayable
   may stay dim). !important beats the .no filter if classes ever collide. */
.pn #hand.playing .hc.ok,
.pn #hand.myturn .hc.ok,
.pn .hand.myturn .hc.ok,
.pn #hand .hc.ok{
  filter:none !important;
  opacity:1 !important;
}
.pn #hand.playing .hc.ok .card,
.pn #hand.myturn .hc.ok .card,
.pn #hand .hc.ok .card{
  opacity:1;
  background:#efe4cc;
}
.pn #btnJoin,.pn #codeIn,.pn #btnDeal,.pn #nameIn,.pn .gk-btn,.pn .hc{
  touch-action:manipulation;
}
/* meld + result sheets */
.pn .meldl .mr.us{border-color:rgba(159,231,184,.55)}
.pn .meldl .mr .hd span{color:#fff8e6}
.pn .meldl .mr .hd img.cut{width:40px;height:40px}
.pn .meldl .mr .its{color:#f2e6c9}
.pn .meldl .mr .its b{color:#ffe58a}
.pn .meldl .mr .cs .card{width:40px}
.pn .pn-sum{text-align:center;font-size:18px;color:#fff8e6}
.pn .hs th{color:#f2e6c9}
.pn .hs td{color:#fff8e6}
.pn .pn-wait{text-align:center;color:#f2e6c9;font-size:17px;margin:8px 0 0}
.pn .pn-how td{padding:3px 6px;color:#fff8e6;font-size:16px}
.pn .pn-how td:nth-child(even){color:#ffe58a;font-weight:800;text-align:right}
.pn .pn-mt{width:100%;border-collapse:collapse}
.pn .pn-mt tr{border-bottom:1px solid rgba(255,229,138,.15)}
/* title */
.pn .pn-hero{position:relative;height:112px;width:260px;margin:0 auto}
.pn .pn-hero img{position:absolute;top:8px;width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #c9a24a;background:#2a1545}
.pn .pn-hero .h1{left:0}.pn .pn-hero .h2{right:0}
.pn .pn-hero .fan{position:absolute;left:50%;top:6px;width:0;height:100px}
.pn .pn-hero .fan .pc{position:absolute;left:0;top:0;width:62px;transform-origin:50% 120%}
.pn .pn-hero .fan .card{width:62px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.pn .pn-panel .lbl{color:#fff8e6}
.pn .pn-panel .lbl small{color:#f2e6c9;font-weight:600}
.pn .pn-mode button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px}
.pn .pn-in{width:100%;min-height:48px;padding:8px 12px;margin:4px 0 10px;border-radius:12px;border:1.5px solid rgba(255,229,138,.5);background:#120a24;color:#fff;font-size:18px}
.pn .pn-in::placeholder{color:#c9bce0}
.pn .pn-in.code{text-transform:uppercase;letter-spacing:.12em;margin:0}
.pn .pn-join{display:flex;gap:8px;align-items:center}
.pn .pn-join .gk-btn{min-height:48px}
.pn .pn-or{text-align:center;color:#f2e6c9;margin:12px 0 6px;font-size:17px}
.pn .pn-err{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:#5a1420;color:#fff;font-size:17px}
.pn .pn-err.ok{background:#14503a}
.pn #btnCreate{width:100%}
.pn .onl-st{color:#fff8e6;font-size:18px;text-align:center}
.pn .onl-code{display:flex;align-items:center;justify-content:center;gap:10px;color:#f2e6c9;margin:8px 0}
.pn .onl-code b{font-size:30px;letter-spacing:.14em;color:#ffe58a}
.pn .pn-acts{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.pn .seatlist{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pn .seatlist li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:rgba(0,0,0,.35);color:#fff8e6;font-weight:700}
.pn .seatlist .sav{width:40px;height:40px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:#2a1545;border:2px solid #c9a24a;color:#ffe58a}
.pn .seatlist small{color:#f2e6c9;font-weight:600}
.pn .seatlist .dot{margin-left:auto;width:12px;height:12px;border-radius:50%;background:#8a8a8a}
.pn .seatlist .dot.on{background:#3ee07a}
.pn #btnCont small{display:block;font-size:14px;color:inherit}
.pn .rec,.pn .pn-wait{color:#f2e6c9}
.pn #btnLeaveRoom{width:100%;margin-top:8px}
/* the kit's 3D-era override hides the felt (expects a .tbl layer we do not use) - restore the green table */
.ct.pn .felt{border:10px solid transparent!important;border-radius:30px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 45%,#23845b 0,#12603f 52%,#0a4129 100%) padding-box,url(../../img/table/wood.webp) center/320px border-box!important;
  box-shadow:0 16px 40px rgba(0,0,0,.65),inset 0 0 0 2px rgba(255,229,138,.18),inset 0 0 60px rgba(0,0,0,.45)!important}
.ct.pn .seat .av{border-radius:50%}
.ct.pn .act:empty{display:none!important}
/* bigger, closer faces: beat the kit's per-breakpoint sizes */
.ct.pn .seat .avw{width:96px!important;height:96px!important;padding:4px!important;border-radius:50%}
.ct.pn .seat .av{width:88px!important;height:88px!important;border-radius:50%!important;object-fit:cover}
@media (min-width:700px) and (min-height:640px){.ct.pn .seat .avw{width:124px!important;height:124px!important;padding:5px!important}.ct.pn .seat .av{width:114px!important;height:114px!important}}
@media (orientation:landscape) and (max-height:520px){.ct.pn .seat .avw{width:64px!important;height:64px!important;padding:3px!important}.ct.pn .seat .av{width:58px!important;height:58px!important}}
.ct.pn .mebar .av,.ct.pn .seatlist img.sav{border-radius:50%}
/* 3-hand (t9052u): three seats (you, left, right), no partner across */
.pn #sGame.pn3 #seat2,.pn #sGame.pn3 .slot.p2{display:none!important}
.pn .pn-widow{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;padding:8px 10px;border-radius:14px;background:rgba(10,6,24,.92);border:1.5px solid rgba(255,229,138,.6);text-align:center;pointer-events:none;animation:pnW .3s ease-out}
.pn .pn-widow b{display:block;color:#ffe58a;font-size:17px;margin-bottom:4px}
.pn .pn-widow div{display:flex;gap:4px}
.pn .pn-widow .card{width:var(--tw);height:auto}
@keyframes pnW{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
.pn .pn-hint{margin:2px 0 8px;color:#f2e6c9;font-size:16px;line-height:1.3}
.pn .pn-widow{top:80%}
.pn .pn-widow .card{width:calc(var(--tw) * .78)}
.pn #sGame.pn3 #sb{display:grid!important;grid-template-columns:1fr 1fr 1fr auto;gap:4px}
.pn #sGame.pn3 #sb .tm{min-width:0;padding:3px 6px;flex-direction:column;align-items:flex-start}
.pn #sGame.pn3 #sb .tm .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn .seatlist .pn-seatlbl{color:#ffe58a;margin-right:4px}
.pn .seatlist .nm{flex:1;min-width:0}
.pn .pn-seatsel{flex:none;max-width:44%;font:700 16px/1.2 system-ui,sans-serif;padding:8px 6px;border-radius:10px;background:#f4f1ea;color:#1a1424;border:2px solid #c9a24a;min-height:44px}
.pn .pn-sit{flex:none;min-height:44px}
.pn .seatlist li.you{outline:2px solid #8fe3ad}
.pn .pn-tgt{margin:6px 0 4px}
.pn .pn-tgt .pn-in{margin:0;max-width:120px}
.pn .pn-tgtl{color:#fff8e6;font-weight:700;font-size:17px;white-space:nowrap}
/* ===================== Von'Voltz Pinochle (owner t9056u, Lobby Pro spec, Repair Two findings) =====================
   Gold + silver on deep charcoal-navy; purple only as a light accent. Portrait phones: players sit AROUND the table
   (avatars straddle the rail, never under a control), the action sheet + status + Next live in a dock above the hand. */
body.pn{--deep:#0E1420;--plum:#1A1F2B;--plum2:#2A313F;--line:rgba(192,198,204,.5);--gold:#D4AF37;--gold2:#F1D77A;--vv-silver:#C0C6CC;--vv-silver2:#8E979F;--vv-panel:#1A1F2B;--vv-accent:#B9A7E8}
body.pn,.pn .gk-screen{background:radial-gradient(120% 70% at 50% 0,#1b2433 0,#0E1420 60%) fixed,#0E1420}
.pn .gk-btn{background:linear-gradient(180deg,#323a48,#1A1F2B);border-color:rgba(192,198,204,.55);color:#F4F6F8}
.pn .gk-btn.gold{background:linear-gradient(180deg,#F1D77A,#D4AF37 55%,#B8932A);color:#1A1A1A;border-color:#F6E6A8;box-shadow:0 3px 0 #7a5f14}
.pn .gk-btn.icon{color:#C0C6CC}
.pn .gk-btn[disabled]{background:#2A313F;color:#E6E9EC;border-color:#8E979F}
.pn .gk-bar h1,.pn .gk-bar h2,.pn .gk-logo{color:#F1D77A}
.pn .gk-seg button[aria-pressed="true"]{background:linear-gradient(180deg,#F1D77A,#D4AF37);color:#1A1A1A;border-color:#F6E6A8}
.pn .sb .tm{background:rgba(26,31,43,.92);border-color:rgba(192,198,204,.45)}
.pn .sb .tm.us{border-color:#D4AF37}
.pn .sb .tm .nm{color:#E6E9EC}
.pn .sb .tm .sc{color:#F1D77A}
.pn .act{background:rgba(26,31,43,.97);border-color:rgba(212,175,55,.6)}
.pn .seatlist .sav,.pn .mebar .av,.pn .pn-hero img{background:#1A1F2B;border-color:#D4AF37}
.pn .pn-in{background:#141A26;border-color:rgba(192,198,204,.6)}
.pn .pn-in::placeholder{color:#AEB5BD}
.pn .seat .chip{color:#F1D77A;background:rgba(14,20,32,.92)}
.pn .seat.turn .av{border-color:#D4AF37;box-shadow:0 0 0 4px rgba(212,175,55,.55),0 0 22px rgba(241,215,122,.85)}
/* t9122u: gold selection (see also the block at the end) */
.pn .hc.sel .card{box-shadow:0 0 0 3px #ffd45a,0 0 18px 4px rgba(255,214,96,.95),0 10px 18px rgba(0,0,0,.45)}
.pn .gk-sheet .gk-card,.pn .gk-card{background:#141A26;border-color:rgba(192,198,204,.4)}
/* score strip: team names wrap to two lines instead of "You & Pinky …" (Repair P2); trump + bid live in the target cell */
.pn #sb .tm .nm{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:16px;line-height:1.1}
.pn #sb .tgt{display:flex;flex-direction:column;align-items:center;line-height:1.05;color:#E6E9EC;font-size:15px}
.pn #sb .tgt b{color:#F1D77A;font-size:18px}
.pn #sb .pn-tr{display:block;margin-top:2px;color:#F4F6F8;font-size:14px;font-weight:700;white-space:nowrap}
.pn #sb .pn-tr .sy svg{vertical-align:-3px}
/* bid log on the felt during the auction */
.pn .pn-log{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;max-width:min(64%,250px);display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px 8px;border-radius:12px;background:rgba(14,20,32,.88);border:1.5px solid rgba(212,175,55,.5);pointer-events:none}
.pn .pn-log[hidden]{display:none}
.pn .pn-log b{width:100%;text-align:center;color:#F1D77A;font-size:15px}
.pn .pn-log span{padding:1px 7px;border-radius:999px;font-size:15px;font-weight:700;color:#1A1A1A;background:#F1D77A}
.pn .pn-log span.p{background:#C0C6CC}
/* dock above the hand: status line, the action sheet, and Next */
.pn .pn-dock{display:flex;flex-direction:column;gap:6px;padding:0 6px;position:relative;z-index:12}
.pn .pn-dock:empty{display:none}
.pn .pn-next{min-height:48px;font-size:19px;width:100%}
.pn .pn-next[hidden]{display:none}
.ct.pn #sGame.pn-docked .pn-dock #msg{position:static!important;display:block;margin:0;min-height:26px;padding:3px 8px;border-radius:10px;background:rgba(14,20,32,.85);color:#F4F6F8;font-size:17px;text-align:center;visibility:visible!important;transform:none!important;left:auto;right:auto;top:auto;bottom:auto;width:auto}
.ct.pn #sGame.pn-docked .pn-dock #act{position:static!important;inset:auto!important;transform:none!important;max-height:none!important;max-width:none!important;width:auto!important;margin:0!important;overflow:visible!important;display:block!important;padding:8px 10px!important;border-radius:16px}
.ct.pn #sGame.pn-docked .pn-dock #act:empty{display:none!important}
.ct.pn #sGame.pn-docked .pn-dock:has(#act:not(:empty)) #msg{display:none}
.ct.pn #sGame.pn-docked .pn-dock #act h3{display:block!important;margin:0 0 6px;font-size:17px}
.ct.pn #sGame.pn-docked .pn-dock #act .note{display:none!important}
.ct.pn #sGame.pn-docked .pn-dock #act .row{flex-wrap:nowrap}
.ct.pn #sGame.pn-docked .pn-dock #act .row .gk-btn{flex:1 1 0;min-height:46px;padding:0 8px}
.ct.pn #sGame.pn-docked .pn-bid .stepper{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:6px;flex-wrap:nowrap}
.ct.pn #sGame.pn-docked .pn-bid .stepper b{min-width:40px;text-align:center;font-size:22px;color:#F1D77A}
.ct.pn #sGame.pn-docked .pn-bid .stepper .gk-btn.gold{flex:1 1 auto}
.ct.pn #sGame.pn-docked .suitb{min-height:64px}
.ct.pn #sGame.pn-docked #hudstrip,.ct.pn #sGame.pn-docked #tgDock{display:none!important}
/* the table: players sit around it, the felt only holds cards */
.ct.pn #sGame.pn-docked #felt{--tw:52px;flex:1 1 0!important;min-height:150px!important;height:auto!important;margin:44px 44px 6px!important;overflow:visible!important;position:relative;border-radius:34px}
@media (min-height:780px){.ct.pn #sGame.pn-docked #felt{--tw:60px;margin-top:52px!important}}
.ct.pn #sGame.pn-docked #felt .seat{position:absolute!important;width:96px!important;gap:0!important;z-index:6}
.ct.pn #sGame.pn-docked #felt .seat .avw{width:76px!important;height:76px!important;padding:3px!important}
.ct.pn #sGame.pn-docked #felt .seat .av{width:70px!important;height:70px!important}
@media (min-height:780px){.ct.pn #sGame.pn-docked #felt .seat .avw{width:86px!important;height:86px!important}.ct.pn #sGame.pn-docked #felt .seat .av{width:80px!important;height:80px!important}}
.ct.pn #sGame.pn-docked #felt .seat .nm{font-size:15px!important;padding:1px 6px;border-radius:8px;background:rgba(14,20,32,.92);max-width:96px;white-space:normal;line-height:1.1}
.ct.pn #sGame.pn-docked #felt .seat .mini{display:none!important}
.ct.pn #sGame.pn-docked #felt .seat.s2{left:50%!important;right:auto!important;top:-42px!important;transform:translateX(-50%)!important}
.ct.pn #sGame.pn-docked #felt .seat.s1{left:-48px!important;right:auto!important;top:50%!important;transform:translateY(-58%)!important}
.ct.pn #sGame.pn-docked #felt .seat.s3{right:-48px!important;left:auto!important;top:50%!important;transform:translateY(-58%)!important}
@media (min-height:780px){.ct.pn #sGame.pn-docked #felt .seat.s2{top:-48px!important}}
/* trick: a tight plus in the open centre of the felt (Repair P1: cards never reach a seat or the rail) */
.ct.pn #sGame.pn-docked #felt .trick .slot.p0{left:50%!important;top:calc(50% + var(--tw) * .62)!important}
.ct.pn #sGame.pn-docked #felt .trick .slot.p2{left:50%!important;top:calc(50% - var(--tw) * .62)!important}
.ct.pn #sGame.pn-docked #felt .trick .slot.p1{left:calc(50% - var(--tw) * .78)!important;top:50%!important}
.ct.pn #sGame.pn-docked #felt .trick .slot.p3{left:calc(50% + var(--tw) * .78)!important;top:50%!important}
.ct.pn #sGame.pn-docked .pn-widow{top:50%}
/* you sit on the near rail like everyone else */
.ct.pn #sGame.pn-docked .me{margin-top:-30px!important;z-index:9;pointer-events:auto}
.ct.pn #sGame.pn-docked .mebar{min-height:44px;justify-content:center!important;padding:0!important;pointer-events:none}
.ct.pn #sGame.pn-docked .mebar>*{pointer-events:auto}
.ct.pn #sGame.pn-docked .mebar .av{width:48px;height:48px}
/* compact strip + sheet so a 390x660 Safari view fits with nothing clipped */
.ct.pn #sGame.pn-docked #sb .tm{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;padding:4px 8px;min-height:36px}
.ct.pn #sGame.pn-docked #sb .tm .nm{width:auto!important;flex:1 1 auto;font-size:16px}
.ct.pn #sGame.pn-docked #sb .tm .sc{flex:none;font-size:20px}
.ct.pn #sGame.pn-docked .pn-dock #act .pn-bid h3{display:none!important}
.ct.pn #sGame.pn-docked .pn-dock #act{padding:6px 8px!important}
body.pn:has(#sGame.pn-docked:not([hidden])) .gk-notices{font-size:14px;padding-top:4px;padding-bottom:calc(var(--sab) + 4px)}
.ct.pn #sGame.pn-docked .gk-bar{min-height:44px}
.ct.pn #sGame.pn-docked .gk-bar .gk-btn.icon{width:42px;min-width:42px;min-height:42px}
.ct.pn #sGame.pn-docked .gk-bar h2{font-size:18px}
.pn .pn-log{top:auto;bottom:10px;transform:translateX(-50%);max-width:calc(100% - 92px);padding:4px 6px;gap:3px}
.pn .pn-log b{display:none}
.pn .pn-log span{white-space:nowrap;font-size:14px;padding:1px 6px}
.pn .mebar .chip,.pn .mebar{color:#F4F6F8}
.ct.pn .mebar{background:rgba(26,31,43,.95);border:1.5px solid rgba(212,175,55,.65);border-radius:999px;padding:2px 12px 2px 2px!important}
.ct.pn #sb .tgt{background:rgba(26,31,43,.92)!important;border:1.5px solid rgba(192,198,204,.45)!important;border-radius:10px;padding:2px 8px}
.pn #sb .pn-tr .sy{display:inline-flex;background:#F4F6F8;border-radius:5px;padding:1px 2px}
.ct.pn #sGame.pn-docked .trumpb{display:none}
.pn.tg .seat.turn .av{box-shadow:none!important}
.ct.pn #sGame.pn-docked .pn-dock #msg{display:block!important}
.ct.pn #sGame.pn-docked .pn-dock #msg:empty{display:none!important}
.ct.pn #sGame.pn-docked .pn-dock:has(#act:not(:empty)) #msg{display:none!important}
.ct.pn #sGame.pn-gate .pn-dock #msg{border:1.5px solid rgba(212,175,55,.7);font-weight:800}
.ct.pn #sGame.pn-docked .pn-dock #msg{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;height:auto!important;max-height:none!important;line-height:1.25}
.ct.pn #sGame.pn-docked.pn3 #felt .seat.s1,.ct.pn #sGame.pn-docked.pn3 #felt .seat.s3{top:34%!important}
/* ===== owner t9092u: landscape phones (e.g. 844x390, 915x412). Felt fills the height, hand along the bottom (never over a seat),
   side panel on the right holds the score, status, Next and the bid/trump/pass sheet. ===== */
.pn-side[hidden]{display:none!important}
.ct.pn #sGame.pn-land{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(190px,25vw,240px);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"felt side" "felt side" "me side";gap:2px 8px!important;min-height:0;width:100%!important}
.ct.pn #sGame.pn-land>.gk-bar{grid-area:bar;min-height:0!important;height:38px;padding:2px 0!important}
.ct.pn #sGame.pn-land>.gk-bar h2{visibility:visible!important;font-size:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct.pn #sGame.pn-land>.gk-bar .gk-btn.icon{width:36px!important;min-width:36px!important;min-height:36px!important;height:36px}
.ct.pn #sGame.pn-land #tgDock{display:none!important}
.ct.pn #sGame.pn-land #felt{grid-area:felt;--tw:clamp(40px,calc((100dvh - 190px) * .3),56px);min-height:0!important;height:auto!important;margin:0!important;border-width:5px!important;overflow:visible!important;position:relative}
.ct.pn #sGame.pn-land .me{grid-area:me;margin:0!important;z-index:9;pointer-events:auto;position:relative;display:block}
.ct.pn #sGame.pn-land .me .hand{margin:0 4px 0}
/* my seat: a small pill on the near rail of the felt (bottom-left corner), above the hand */
.ct.pn #sGame.pn-land .mebar{position:absolute!important;left:6px;bottom:calc(100% + 4px);min-height:0!important;padding:2px 10px 2px 2px!important;justify-content:flex-start!important;gap:6px;border-radius:999px;background:rgba(14,20,32,.9);border:1px solid #D4AF37;z-index:8;max-width:44%}
.ct.pn #sGame.pn-land .mebar .av,.ct.pn #sGame.pn-land .mebar .avw{width:30px!important;height:30px!important}
.ct.pn #sGame.pn-land .mebar .nm{font-size:15px!important}
.ct.pn #sGame.pn-land .mebar .chip,.ct.pn #sGame.pn-land .mebar .tag{font-size:13px!important}
/* seats sit on the felt edges, compact */
.ct.pn #sGame.pn-land #felt .seat{position:absolute!important;width:auto!important;max-width:150px;display:flex!important;flex-direction:row!important;align-items:center;gap:5px!important;z-index:6;padding:2px 8px 2px 2px;border-radius:999px;background:rgba(14,20,32,.82)}
.ct.pn #sGame.pn-land #felt .seat .avw{width:46px!important;height:46px!important;padding:2px!important;flex:none}
.ct.pn #sGame.pn-land #felt .seat .av{width:42px!important;height:42px!important}
.ct.pn #sGame.pn-land #felt .seat .nm{font-size:14px!important;line-height:1.1;white-space:nowrap;max-width:90px;overflow:hidden;text-overflow:ellipsis;order:2}
.ct.pn #sGame.pn-land #felt .seat .chip{font-size:13px!important;order:3;min-height:0!important}
.ct.pn #sGame.pn-land #felt .seat .mini,.ct.pn #sGame.pn-land #felt .seat .dots{display:none!important}
.ct.pn #sGame.pn-land #felt .seat.s2{left:50%!important;right:auto!important;top:4px!important;transform:translateX(-50%)!important}
.ct.pn #sGame.pn-land #felt .seat.s1{left:6px!important;right:auto!important;top:42%!important;transform:translateY(-50%)!important}
.ct.pn #sGame.pn-land #felt .seat.s3{right:6px!important;left:auto!important;top:42%!important;transform:translateY(-50%)!important}
.ct.pn #sGame.pn-land #felt .seat .bubble{display:none!important}
.ct.pn #sGame.pn-land #felt .trick .slot.p0{left:50%!important;top:calc(54% + var(--tw) * .55)!important}
.ct.pn #sGame.pn-land #felt .trick .slot.p2{left:50%!important;top:calc(54% - var(--tw) * .55)!important}
.ct.pn #sGame.pn-land #felt .trick .slot.p1{left:calc(50% - var(--tw) * .95)!important;top:54%!important}
.ct.pn #sGame.pn-land #felt .trick .slot.p3{left:calc(50% + var(--tw) * .95)!important;top:54%!important}
.ct.pn #sGame.pn-land .pn-widow{top:54%}
.ct.pn #sGame.pn-land #felt .pn-log{bottom:4px;font-size:13px;max-width:62%;right:8px;left:auto;transform:none}
.ct.pn #sGame.pn-land #felt>#msg,.ct.pn #sGame.pn-land #felt>#act{display:none!important}
.ct.pn #sGame.pn-land .trumpb{display:none}
/* side panel */
.ct.pn #sGame.pn-land .pn-side{grid-area:side;display:flex;flex-direction:column;gap:5px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 6px;-webkit-overflow-scrolling:touch}
.ct.pn #sGame.pn-land .pn-side #sb{position:static!important;inset:auto!important;transform:none!important;width:auto!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important;margin:0!important}
.ct.pn #sGame.pn-land .pn-side #sb .tm{flex:1 1 100%!important;max-width:none!important;flex-direction:row!important;align-items:center;justify-content:space-between;padding:3px 8px!important;min-height:0}
.ct.pn #sGame.pn-land .pn-side #sb .tm .nm{font-size:14px!important;white-space:normal!important;overflow:visible!important;width:auto!important;line-height:1.15}
.ct.pn #sGame.pn-land .pn-side #sb .tm .sc{font-size:18px!important;flex:none}
.ct.pn #sGame.pn-land .pn-side #sb .tgt{flex:1 1 100%!important;font-size:14px!important;padding:2px 8px!important;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.ct.pn #sGame.pn-land .pn-side #hudstrip{min-height:0!important;padding:0!important;flex-wrap:wrap;font-size:14px}
.ct.pn #sGame.pn-land .pn-side #hudstrip .infob{font-size:14px!important;padding:3px 8px!important}
.ct.pn #sGame.pn-land .pn-side .pn-dock{display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
.ct.pn #sGame.pn-land .pn-side .pn-next{width:100%;min-height:48px;font-size:18px}
.ct.pn #sGame.pn-land .pn-side #msg{position:static!important;display:block!important;margin:0;padding:4px 8px;border-radius:10px;background:rgba(14,20,32,.88);color:#F4F6F8;font-size:15px;line-height:1.25;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important;height:auto!important;visibility:visible!important;text-align:left}
.ct.pn #sGame.pn-land .pn-side #msg:empty{display:none!important}
.ct.pn #sGame.pn-land .pn-side .pn-dock:has(#act:not(:empty)) #msg{display:none!important}
.ct.pn #sGame.pn-land .pn-side #act{position:static!important;inset:auto!important;transform:none!important;max-height:none!important;max-width:none!important;width:auto!important;margin:0!important;padding:6px!important;overflow:visible!important;display:block}
.ct.pn #sGame.pn-land .pn-side #act:empty{display:none!important}
.ct.pn #sGame.pn-land .pn-side #act h3{display:block!important;margin:0 0 5px;font-size:15px!important;line-height:1.2}
.ct.pn #sGame.pn-land .pn-side #act .note{display:none!important}
.ct.pn #sGame.pn-land .pn-side #act .row{display:flex;flex-wrap:nowrap;gap:6px}
.ct.pn #sGame.pn-land .pn-side #act .row .gk-btn{flex:1 1 0;min-height:46px;padding:0 6px;font-size:16px}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:6px;flex-wrap:nowrap}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper .gk-btn.icon{width:44px;min-width:44px;min-height:44px}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper b{min-width:30px;text-align:center;font-size:20px;color:#F1D77A}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper .gk-btn.gold{flex:1 1 auto;min-height:44px;padding:0 6px}
.ct.pn #sGame.pn-land .pn-side .suits{display:grid!important;grid-template-columns:1fr 1fr;gap:5px}
.ct.pn #sGame.pn-land .pn-side .suitb{min-height:56px!important;padding:3px!important;font-size:13px}
body.pn:has(#sGame.pn-land:not([hidden])) .gk-notices{font-size:12px!important;padding:2px 8px calc(var(--sab) + 2px)!important;line-height:1.2}
.ct.pn #sGame.pn-land #felt .seat .chip{position:static!important;transform:none!important;margin:0!important;white-space:nowrap}
.ct.pn #sGame.pn-land #felt .seat .chip:empty{display:none!important}
.ct.pn #sGame.pn-land .pn-side #sb .tgt{flex-direction:row!important;min-height:0!important}
.ct.pn #sGame.pn-land .pn-side #sb .tgt b{font-size:16px!important}
.ct.pn #sGame.pn-land .pn-side #hudstrip .infob,.ct.pn #sGame.pn-land .pn-side #hudstrip .trumpb{position:static!important;width:100%;max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:left;border-radius:10px!important;margin:0!important;transform:none!important}
/* t9093u: seats AROUND the table in landscape — side robots outside the felt, partner straddles the top rail, my pill outside the bottom-left corner */
.ct.pn #sGame.pn-land>.gk-bar h2{visibility:hidden!important}
.ct.pn #sGame.pn-land #felt{margin:26px 94px 0!important}
.ct.pn #sGame.pn-land #felt .seat.s1,.ct.pn #sGame.pn-land #felt .seat.s3{flex-direction:column!important;width:90px!important;max-width:90px;padding:2px!important;gap:1px!important;background:none!important;top:46%!important}
.ct.pn #sGame.pn-land #felt .seat.s1{left:-97px!important}
.ct.pn #sGame.pn-land #felt .seat.s3{right:-97px!important}
.ct.pn #sGame.pn-land #felt .seat.s1 .nm,.ct.pn #sGame.pn-land #felt .seat.s3 .nm{max-width:90px;padding:1px 5px;border-radius:8px;background:rgba(14,20,32,.92)}
.ct.pn #sGame.pn-land #felt .seat.s1 .avw,.ct.pn #sGame.pn-land #felt .seat.s3 .avw{width:52px!important;height:52px!important}
.ct.pn #sGame.pn-land #felt .seat.s1 .av,.ct.pn #sGame.pn-land #felt .seat.s3 .av{width:48px!important;height:48px!important}
.ct.pn #sGame.pn-land #felt .seat.s2{top:-30px!important;max-width:none}
.ct.pn #sGame.pn-land .mebar{left:0;bottom:calc(100% + 2px);flex-wrap:wrap;max-width:90px!important;width:90px;padding:3px!important;border-radius:12px!important;justify-content:center!important;gap:2px 4px}
.ct.pn #sGame.pn-land #felt .pn-log{max-width:80%;left:50%;right:auto;transform:translateX(-50%);bottom:4px}
/* t9093u: the top bar (back, mute, help, settings) lives at the top of the side panel in landscape, so the felt gets the height */
.ct.pn #sGame.pn-land .pn-side>.gk-bar{height:auto;min-height:0!important;padding:0!important;margin:0!important;display:flex;justify-content:space-between;gap:4px;flex:none}
.ct.pn #sGame.pn-land .pn-side>.gk-bar h2{display:none!important}
.ct.pn #sGame.pn-land .pn-side>.gk-bar .gk-btn.icon{width:44px!important;min-width:44px!important;height:40px;min-height:40px!important}
.ct.pn #sGame.pn-land #felt{margin:32px 94px 4px!important}
.ct.pn #sGame.pn-land #felt .seat.s1,.ct.pn #sGame.pn-land #felt .seat.s3{top:38%!important}
.ct.pn #sGame.pn-land .pn-side #act .pn-bid h3{display:none!important}
.ct.pn #sGame.pn-land #felt .seat.s1,.ct.pn #sGame.pn-land #felt .seat.s3{top:-4px!important;transform:none!important}
.ct.pn #sGame.pn-land .pn-side:has(#act:not(:empty)) #hudstrip{display:none!important}
.ct.pn #sGame.pn-land .pn-side #sb .tm{padding:2px 8px!important}
/* very short landscape (Safari with bars): my pill moves into the hand row on the left so it never touches a side seat */
@media (orientation:landscape) and (max-height:370px){
  .ct.pn #sGame.pn-land .me{padding-left:94px}
  .ct.pn #sGame.pn-land .mebar{bottom:auto!important;top:6px;left:0}
}
.ct.pn #sGame.pn-land .me{padding-left:94px}
.ct.pn #sGame.pn-land .mebar{bottom:auto!important;top:6px;left:0}
/* t9092u/t9093u: landscape phones — title screen is brand on the left, options on the right (scrolls), Deal always on screen */
@media (orientation:landscape) and (max-height:560px){
  body.pn #sTitle{min-height:0}
  body.pn .gk-title.pn-title{display:grid!important;grid-template-columns:minmax(0,30%) minmax(0,1fr)!important;gap:12px!important;align-items:stretch!important;justify-content:stretch!important;flex:1 1 0!important;min-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important}
  body.pn .pn-title .gk-brand{position:static!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-width:0!important;max-width:none!important;width:auto!important;transform:none!important;flex:none!important;overflow:hidden}
  body.pn .pn-title .pn-hero{width:190px;height:84px;transform:none}
  body.pn .pn-title .pn-hero img{width:70px;height:70px}
  body.pn .pn-title .pn-hero .fan .pc,body.pn .pn-title .pn-hero .fan .card{width:46px}
  body.pn .pn-title .gk-logo{font-size:clamp(22px,4.2vh,34px)!important;line-height:1.05;text-align:center;margin:4px 0 2px!important}
  body.pn .pn-title .gk-host{font-size:14px!important;text-align:center;margin:0!important}
  body.pn .pn-title .pn-panel{min-height:0!important;max-height:100%!important;overflow-y:auto!important;overscroll-behavior:contain;max-width:none!important;width:auto!important;margin:0!important;padding-bottom:0!important;flex:none!important}
  body.pn .pn-title .pn-panel .ct-acts{position:sticky;bottom:0;z-index:3;margin:6px -4px 0;padding:6px 4px;background:linear-gradient(rgba(26,31,43,0),#1A1F2B 30%)}
}
@media (orientation:landscape) and (max-height:560px){
  body.pn .pn-title .gk-brand{justify-content:center!important;gap:4px}
  body.pn .pn-title #tTtl{position:static!important;inset:auto!important;width:auto!important;transform:none!important;display:block!important}
  body.pn .pn-title .gk-host{display:block!important}
}
/* ===== owner t9094u: one slim score bar under the header + the action panel in that top area (portrait, landscape, home-screen) ===== */
.pn-top{position:relative;display:flex;flex-direction:column;gap:5px;flex:none;z-index:20}
.pn-score{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:4px 12px;border-radius:999px;border:1px solid #D4AF37;background:linear-gradient(#1F2533,#141A26);color:#F4F6F8;font:600 15px/1.2 inherit;font-family:inherit;text-align:left;cursor:pointer}
.pn-score .pn-sl{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-score b{color:#F1D77A;font-size:17px}
.pn-score i{font-style:normal;color:#C0C6CC;padding:0 1px}
.pn-score .pn-str{flex:none;display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:999px;background:rgba(212,175,55,.16);color:#F1D77A;font-weight:700}
.pn-score .pn-car{flex:none;color:#D4AF37;font-size:14px}
.pn-score[aria-expanded="true"] .pn-car{transform:rotate(180deg)}
.pn-score:focus-visible{outline:3px solid #F1D77A;outline-offset:2px}
.pn-drop{position:absolute;left:0;right:0;top:44px;z-index:40;max-height:min(70vh,520px);overflow-y:auto;padding:10px 12px;border-radius:14px;border:1px solid #D4AF37;background:#121826;color:#F4F6F8;box-shadow:0 14px 30px rgba(0,0,0,.6);font-size:15px}
.pn-drop[hidden]{display:none!important}
.pn-drop .pn-drow{display:flex;justify-content:space-between;gap:10px;padding:5px 2px;border-bottom:1px solid rgba(192,198,204,.18)}
.pn-drop .pn-drow.us span{color:#F1D77A;font-weight:700}
.pn-drop .pn-drow b{color:#F1D77A;font-size:17px}
.pn-drop .pn-drow.tg{border-bottom:0;color:#C0C6CC}
.pn-drop .pn-dh{margin:10px 0 4px;color:#C0C6CC;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pn-drop .pn-dbids{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.pn-drop .pn-dbids span{padding:2px 8px;border-radius:999px;background:#F1D77A;color:#1A1A1A;font-weight:700;font-size:14px}
.pn-drop .pn-dbids span.p{background:#C0C6CC}
.pn-drop .pn-dcur{margin:8px 0 0}
.pn-drop .pn-dnone{margin:0;color:#C0C6CC}
.pn-drop .pn-dhist{margin:0;padding:0;list-style:none}
.pn-drop .pn-dhist li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid rgba(192,198,204,.14)}
.pn-drop em{font-style:normal;font-weight:800}.pn-drop em.ok{color:#3EE07A}.pn-drop em.set{color:#FF7A7A}
.ct.pn #sGame.pn-docked #sb,.ct.pn #sGame.pn-land #sb,.ct.pn #sGame.pn-docked #hudstrip,.ct.pn #sGame.pn-land #hudstrip{display:none!important}
.ct.pn #sGame.pn-docked .pn-top .pn-dock{margin:0!important;padding:0!important}
.ct.pn #sGame.pn-land .pn-top .pn-score{font-size:14px;padding:4px 10px}
.ct.pn #sGame.pn-land .pn-top .pn-drop{max-height:calc(100dvh - 110px)}
.ct.pn #sGame.pn-land .pn-top .pn-score{border-radius:14px;align-items:center}
.ct.pn #sGame.pn-land .pn-top .pn-score .pn-sl{white-space:normal;overflow:visible}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper{gap:4px}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper .gk-btn.icon{width:40px;min-width:40px;flex:none}
.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper .gk-btn.gold{min-width:0;flex:1 1 0}
.ct.pn #sGame.pn-land .pn-side #act{overflow:hidden!important}
/* t9092u: landscape phones — meld / hand-over / game-over sheets use the full height, two columns, and the button is always on screen */
@media (orientation:landscape) and (max-height:560px){
  body.pn #shMeld,body.pn #shHand,body.pn #shEnd{padding:calc(var(--sat) + 6px) calc(var(--sar) + 10px) calc(var(--sab) + 6px) calc(var(--sal) + 10px)!important}
  body.pn #shMeld .gk-card,body.pn #shHand .gk-card,body.pn #shEnd .gk-card{width:min(820px,100%)!important;max-width:none!important;max-height:100%!important;display:flex!important;flex-direction:column;overflow:hidden!important;padding:10px 14px!important}
  body.pn #shMeld h2,body.pn #shHand h2,body.pn #shEnd h2{margin:0 0 6px!important;font-size:20px!important;flex:none}
  body.pn #mdBody,body.pn #hrBody{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
  body.pn #mdBody>*,body.pn #hrBody>*{margin:0!important}
  body.pn #shMeld .row,body.pn #shHand .row,body.pn #shEnd .row{flex:none;margin-top:8px!important}
}
@media (orientation:landscape) and (max-height:560px){
  body.pn #mdBody{display:block!important}
  body.pn #mdBody .meldl{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  body.pn #mdBody .pn-sum,body.pn #mdBody .big-res{margin:0 0 6px!important}
  body.pn #hrBody{display:block!important}
}
.ct.pn #sGame.pn-land #felt .seat .tag{position:static!important;order:4;font-size:13px!important;padding:1px 6px!important;margin:0!important;white-space:nowrap}
.ct.pn #sGame.pn-land #felt .seat .tag{position:absolute!important;top:-6px!important;left:-10px!important;right:auto!important;z-index:3;font-size:12px!important;line-height:1.2}
.ct.pn #sGame.pn-land #felt .seat.s2 .tag{top:auto!important;bottom:-8px!important;left:-14px!important}
/* ===== tfPN3 (Repair Two P1a/P2): Deal always on screen, compact lobby, seat rows, settings Done, 3-hand score bar ===== */
body.pn .pn-title .pn-panel .ct-acts{position:sticky;bottom:0;z-index:4;margin-top:8px;padding:8px 0 6px;background:linear-gradient(rgba(26,31,43,0),#1A1F2B 26%)}
body.pn .pn-title #btnLeaveRoom{position:relative;z-index:4}
@media (orientation:portrait) and (max-height:900px){
  body.pn .pn-title .pn-hero{height:86px;width:220px}
  body.pn .pn-title .pn-hero img{width:76px;height:76px;top:4px}
  body.pn .pn-title .pn-hero .fan .pc,body.pn .pn-title .pn-hero .fan .card{width:50px}
  body.pn .pn-title .gk-logo{margin-top:0!important;margin-bottom:4px!important}
  body.pn .pn-title .pn-panel .lbl{margin-top:6px!important;margin-bottom:4px!important}
  body.pn .pn-title .pn-panel .gk-seg button{min-height:44px}
}
@media (max-width:440px){body.pn .gk-notices{font-size:13px!important;line-height:1.25!important;padding-top:4px!important;padding-bottom:calc(var(--sab) + 4px)!important}}
.pn .seatlist li{padding:5px 8px;gap:8px}
.pn .seatlist .nm{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.pn .seatlist .pn-seatlbl small{color:#C0C6CC;font-weight:600;font-size:13px}
.pn .seatlist .pn-who{font-size:15px}
.pn .seatlist .pn-who small{display:block;font-size:13px}
.pn .seatlist .sav{width:34px;height:34px;flex:none}
.pn .seatlist .pn-seatsel{max-width:46%;min-height:44px;font-size:15px}
/* t9470u: settings list scrolls in .gk-set-list; Done is a reserved footer
   (not sticky over the rows). Older sticky rule removed. */
body.pn #shSet .gk-card{max-height:100%;overflow:hidden;overscroll-behavior:contain}
body.pn #shSet{padding-bottom:calc(var(--sab) + 10px)!important}
/* 3-hand: three names + target wrap to two lines instead of cutting "to 150" */
.ct.pn #sGame.pn3 .pn-score{border-radius:14px}
.ct.pn #sGame.pn3 .pn-score .pn-sl{white-space:normal;overflow:visible;text-overflow:clip}
body.pn .pn-title .gk-logo{position:relative;z-index:2;margin-top:6px!important}
/* ===== tfPN4 (TestMu real iPhone/Galaxy + owner t9104u/t9105u) ===== */
/* iOS 26 Safari's floating toolbar sits over the bottom of a fixed full-height app: size the app to the SMALL viewport so nothing hides under it */
@supports (height:100svh){body.pn .gk-app{bottom:auto!important;height:100svh!important}}
/* bid history never sits on the felt or over a seat (owner item 6): seats show each bid, the score-bar dropdown lists them all */
.pn .pn-log{display:none!important}
/* portrait header: title never touches the sound button */
@media (orientation:portrait){.ct.pn #sGame .gk-bar h2{font-size:16px!important;padding:0 6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}}
/* meld / hand-over / end sheets: the list scrolls, the button is always on screen (all orientations) */
body.pn #shMeld,body.pn #shHand,body.pn #shEnd{padding-top:calc(var(--sat) + 10px)!important;padding-bottom:calc(var(--sab) + 10px)!important}
body.pn #shMeld .gk-card,body.pn #shHand .gk-card,body.pn #shEnd .gk-card{max-height:100%!important;display:flex!important;flex-direction:column;overflow:hidden!important}
body.pn #mdBody,body.pn #hrBody,body.pn #eBody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.pn #shMeld .gk-card>.row,body.pn #shHand .gk-card>.row,body.pn #shEnd .gk-card>.row{flex:none}
/* phone landscape: meld players side by side in ONE row so nothing hides behind the button */
@media (orientation:landscape) and (max-height:560px){
  body.pn #mdBody .meldl{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}
  body.pn #mdBody .meldl>*{padding:6px!important;font-size:13px}
  body.pn #mdBody .meldl .card,body.pn #mdBody .meldl svg{max-width:26px}
  body.pn #shMeld h2,body.pn #shHand h2{font-size:17px!important;margin-bottom:4px!important}
}
/* phone landscape side column: a bit wider, slim one-line score bar, dropdown floats over the table (never clipped) */
.ct.pn #sGame.pn-land:not(.pn-desk){grid-template-columns:minmax(0,1fr) clamp(206px,29vw,250px)}
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-top .pn-score{font-size:13px;padding:3px 8px;min-height:34px;gap:5px}
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-top .pn-score .pn-sl{white-space:nowrap!important;overflow:hidden!important}
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-top .pn-score b{font-size:15px}
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-top .pn-score .pn-str{padding:1px 5px}
.ct.pn #sGame.pn-land .pn-score .pn-to{color:#C0C6CC;font-size:12px}
.ct.pn #sGame.pn-land .pn-top .pn-drop{position:fixed!important;top:calc(var(--sat) + 8px)!important;right:calc(var(--sar) + 8px)!important;left:auto!important;width:min(340px,70vw);max-height:calc(100svh - var(--sat) - var(--sab) - 16px)!important;z-index:60}
/* phone landscape trump: all four suits in one row */
.ct.pn #sGame.pn-land .pn-side .suits{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
.ct.pn #sGame.pn-land .pn-side .suitb{min-height:52px!important;max-width:none!important;padding:2px!important;font-size:11px!important;line-height:1.1}
.ct.pn #sGame.pn-land .pn-side .suitb svg{width:20px;height:20px}
/* phone landscape "You" box: compact, never over the first card */
.ct.pn #sGame.pn-land:not(.pn-desk) .me{padding-left:92px!important}
.ct.pn #sGame.pn-land:not(.pn-desk) .mebar{width:86px!important;max-width:86px!important;top:2px!important;gap:1px 3px!important;padding:2px!important}
.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .av,.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .avw{width:24px!important;height:24px!important}
.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .nm{font-size:13px!important}
.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .chip,.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .tag,.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .pn-tk{font-size:11px!important;min-height:0!important;padding:0 5px!important;line-height:1.3}
/* very short phone landscape (Safari with toolbar, ~300 tall) */
@media (orientation:landscape) and (max-height:340px){
  .ct.pn #sGame.pn-land #felt{margin:28px 88px 2px!important;--tw:38px}
  .ct.pn #sGame.pn-land #felt .seat.s1,.ct.pn #sGame.pn-land #felt .seat.s3{width:84px!important}
  .ct.pn #sGame.pn-land #felt .seat.s1{left:-90px!important}.ct.pn #sGame.pn-land #felt .seat.s3{right:-90px!important}
  .ct.pn #sGame.pn-land #felt .seat .avw{width:40px!important;height:40px!important}
  .ct.pn #sGame.pn-land #felt .seat .av{width:36px!important;height:36px!important}
  .ct.pn #sGame.pn-land #felt .seat .nm{font-size:12px!important}
  .ct.pn #sGame.pn-land .pn-side>.gk-bar .gk-btn.icon{height:34px;min-height:34px!important;width:40px!important;min-width:40px!important}
  .ct.pn #sGame.pn-land .pn-side #act .row .gk-btn,.ct.pn #sGame.pn-land .pn-side .pn-bid .stepper .gk-btn{min-height:40px!important}
  .ct.pn #sGame.pn-land .pn-side .pn-next{min-height:42px}
  body.pn .gk-notices{font-size:11px!important;padding-top:1px!important;padding-bottom:calc(var(--sab) + 1px)!important}
}
/* ===== desktop / laptop (owner t9105u): full-width wide layout, big felt, big cards, roomy side panel ===== */
.ct.pn #sGame.pn-desk{width:100%!important;max-width:none!important;margin:0!important;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,380px)!important;gap:6px 18px!important}
.ct.pn #sGame.pn-desk #felt{margin:64px 170px 10px!important;--tw:clamp(72px,calc((100svh - 330px) * .26),120px);border-width:10px!important}
.ct.pn #sGame.pn-desk #felt .seat .avw{width:96px!important;height:96px!important}
.ct.pn #sGame.pn-desk #felt .seat .av{width:90px!important;height:90px!important}
.ct.pn #sGame.pn-desk #felt .seat .nm{font-size:18px!important;max-width:160px}
.ct.pn #sGame.pn-desk #felt .seat .chip{font-size:16px!important}
.ct.pn #sGame.pn-desk #felt .seat.s1,.ct.pn #sGame.pn-desk #felt .seat.s3{width:160px!important;max-width:160px;top:12%!important}
.ct.pn #sGame.pn-desk #felt .seat.s1{left:-168px!important}.ct.pn #sGame.pn-desk #felt .seat.s3{right:-168px!important}
.ct.pn #sGame.pn-desk #felt .seat.s1 .nm,.ct.pn #sGame.pn-desk #felt .seat.s3 .nm{max-width:160px}
.ct.pn #sGame.pn-desk #felt .seat.s2{top:-58px!important;padding:3px 14px 3px 3px}
.ct.pn #sGame.pn-desk #felt .seat.s2 .avw{width:84px!important;height:84px!important}.ct.pn #sGame.pn-desk #felt .seat.s2 .av{width:78px!important;height:78px!important}
.ct.pn #sGame.pn-desk #felt .seat .tag{font-size:15px!important}
.ct.pn #sGame.pn-desk .me{padding-left:180px!important}
.ct.pn #sGame.pn-desk .mebar{width:168px!important;max-width:168px!important;top:10px!important;padding:6px!important;gap:4px 6px!important}
.ct.pn #sGame.pn-desk .mebar .av,.ct.pn #sGame.pn-desk .mebar .avw{width:56px!important;height:56px!important}
.ct.pn #sGame.pn-desk .mebar .nm{font-size:18px!important}
.ct.pn #sGame.pn-desk .mebar .chip,.ct.pn #sGame.pn-desk .mebar .tag{font-size:15px!important}
.ct.pn #sGame.pn-desk .pn-side{gap:10px;padding-top:8px}
.ct.pn #sGame.pn-desk .pn-side>.gk-bar .gk-btn.icon{width:52px!important;min-width:52px!important;height:48px;min-height:48px!important}
.ct.pn #sGame.pn-desk .pn-top .pn-score{font-size:17px;min-height:48px;padding:6px 14px;border-radius:14px}
.ct.pn #sGame.pn-desk .pn-top .pn-score b{font-size:20px}
.ct.pn #sGame.pn-desk .pn-side #msg{font-size:18px!important;padding:8px 12px}
.ct.pn #sGame.pn-desk .pn-side .pn-next{min-height:60px;font-size:22px}
.ct.pn #sGame.pn-desk .pn-side #act{padding:10px!important}
.ct.pn #sGame.pn-desk .pn-side #act h3{font-size:18px!important}
.ct.pn #sGame.pn-desk .pn-side #act .row .gk-btn,.ct.pn #sGame.pn-desk .pn-side .pn-bid .stepper .gk-btn{min-height:56px!important;font-size:19px}
.ct.pn #sGame.pn-desk .pn-side .pn-bid .stepper .gk-btn.icon{width:56px!important;min-width:56px!important}
.ct.pn #sGame.pn-desk .pn-side .pn-bid .stepper b{font-size:26px}
.ct.pn #sGame.pn-desk .pn-side .suits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.ct.pn #sGame.pn-desk .pn-side .suitb{min-height:84px!important;font-size:15px!important}
.ct.pn #sGame.pn-desk .pn-side .suitb svg{width:30px;height:30px}
.ct.pn #sGame.pn-desk .pn-top .pn-drop{width:380px;font-size:16px}
body.pn.pn-deskb .gk-app{padding-left:calc(var(--sal) + 18px)!important;padding-right:calc(var(--sar) + 18px)!important}
.ct.pn #sGame.pn-land #hand:not(.two) .hc{bottom:12px}
.ct.pn #sGame.pn-desk #felt .seat.s1 .avw,.ct.pn #sGame.pn-desk #felt .seat.s3 .avw{width:104px!important;height:104px!important}
.ct.pn #sGame.pn-desk #felt .seat.s1 .av,.ct.pn #sGame.pn-desk #felt .seat.s3 .av{width:98px!important;height:98px!important}
.ct.pn #sGame.pn-desk #felt .seat.s1 .nm,.ct.pn #sGame.pn-desk #felt .seat.s3 .nm{font-size:18px!important}
.ct.pn #sGame.pn-land:not(.pn-desk) .mebar .bubble{display:none!important}
/* tfPN5: score dropdown is viewport-fixed (JS placeDrop), fully inside the safe area; clear close X */
.pn-drop{position:fixed;z-index:80;max-width:calc(100vw - var(--sal) - var(--sar) - 16px);box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pn-drop .pn-dhd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px -4px 8px 0;font-weight:800;color:#F1D77A;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.pn-drop .pn-dx{flex:none;width:44px;height:44px;margin:-6px -8px -6px 0;border:0;border-radius:10px;background:transparent;color:#F1D77A;font-size:28px;line-height:1;cursor:pointer;padding:0}
.pn-drop .pn-dx:focus-visible{outline:3px solid #F1D77A;outline-offset:2px}
.ct.pn #sGame.pn-land .pn-top .pn-drop{position:fixed!important;left:auto;right:auto;width:auto;max-width:calc(100vw - var(--sal) - var(--sar) - 16px)!important;max-height:none}

/* tfPN7: after Leave, the table must not paint over the lobby (fixed descendants, leftover flies). */
.ct.pn #sGame[hidden], .pn #sGame[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
.ct.pn #sGame[hidden] *, .pn #sGame[hidden] *{visibility:hidden!important;pointer-events:none!important}

/* ===== tfPN9 / owner t9118u: true full-screen desktop & laptop (≥1024 wide, landscape, height ≥560).
   Phone portrait and phone landscape are untouched — every rule in this block is gated on the media
   query and/or #sGame.pn-desk (which JS only sets when deskWide() is true). ===== */

/* --- Setup / title: wide two-column panel, Deal on screen with no scrolling at 1366×768 and 1440×900 --- */
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  body.pn{overflow:hidden}
  body.pn .gk-app{overflow:hidden;padding-left:calc(var(--sal) + 20px)!important;padding-right:calc(var(--sar) + 20px)!important}
  body.pn #sTitle{min-height:0;overflow:hidden;display:flex;flex-direction:column}
  body.pn .gk-title.pn-title{
    display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
    align-items:stretch!important;justify-content:flex-start!important;align-content:stretch!important;
    width:100%!important;max-width:1520px;margin:0 auto!important;
    flex:1 1 0!important;min-height:0!important;overflow:hidden!important;
    padding:4px 8px 8px!important;gap:10px!important;
  }
  body.pn .pn-title>:first-child,body.pn .pn-title>:last-child{margin-top:0!important;margin-bottom:0!important}
  /* compact brand: hero + title on one horizontal row, so the panel gets the height */
  body.pn .pn-title .gk-brand{
    flex:none!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap;
    align-items:center;justify-content:center;gap:18px;min-width:0!important;max-width:none!important;
    width:auto!important;transform:none!important;overflow:visible;margin:0 auto;
  }
  body.pn .pn-title .pn-hero{width:200px;height:88px;margin:0;flex:none;transform:none}
  body.pn .pn-title .pn-hero img{width:76px;height:76px;top:6px}
  body.pn .pn-title .pn-hero .fan{height:80px;top:4px}
  body.pn .pn-title .pn-hero .fan .pc,body.pn .pn-title .pn-hero .fan .card{width:50px}
  body.pn .pn-title .gk-logo,body.pn .pn-title #tTtl{
    position:static!important;inset:auto!important;width:auto!important;transform:none!important;display:block!important;
    font-size:clamp(32px,3.2vw,52px)!important;line-height:1.05;margin:0!important;text-align:left;
  }
  body.pn .pn-title .gk-host{display:block!important;font-size:clamp(15px,1.3vw,20px)!important;margin:4px 0 0!important;text-align:left;color:#f2e6c9}
  body.pn .pn-title .gk-brand{flex-wrap:wrap}
  /* the panel uses the full width — no 440px phone column */
  body.pn .pn-title .pn-panel,body.pn .gk-title .gk-panel{
    width:100%!important;max-width:none!important;flex:1 1 auto!important;min-height:0!important;
    max-height:none!important;overflow:hidden!important;margin:0!important;
    padding:18px 24px 16px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-auto-rows:auto;
    column-gap:36px;row-gap:8px;
    align-content:start;
    box-sizing:border-box;
  }
  /* cfgBox children join the same grid so Partner is left, Skill/Play-to/Deal are right */
  body.pn .pn-title #cfgBox{display:contents}
  body.pn .pn-title #pickBox{grid-column:1;grid-row:1}
  body.pn .pn-title #plyBlock{grid-column:1;grid-row:2}
  body.pn .pn-title #ptBlock{grid-column:1;grid-row:3}
  body.pn .pn-title #lvBox{grid-column:2;grid-row:1}
  body.pn .pn-title #tgtBlock{grid-column:2;grid-row:2}
  body.pn .pn-title #passBlock{display:none} /* pass is mandatory; the option is already hidden */
  body.pn .pn-title #meldBlock{grid-column:2;grid-row:3}
  body.pn .pn-title .ct-acts{grid-column:2;grid-row:4;align-self:end;margin-top:8px!important;position:static!important;background:none!important;padding:0!important}
  body.pn .pn-title #recLine{grid-column:1/-1;grid-row:5;margin:4px 0 0;text-align:left;font-size:16px}
  body.pn .pn-title #waitNote,body.pn .pn-title #btnLeaveRoom{grid-column:1/-1}
  /* invite: name/Players/Create fill the left column under Play with; Players stays above Create (tfPN8) */
  body.pn .pn-title #onlineBox:not([hidden]){grid-column:1;grid-row:2/span 3;display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}
  body.pn .pn-title:has(#onlineBox:not([hidden])) #ptBlock{grid-column:2;grid-row:3}
  body.pn .pn-title:has(#onlineBox:not([hidden])) #meldBlock{grid-column:2;grid-row:4}
  body.pn .pn-title:has(#onlineBox:not([hidden])) .ct-acts{grid-column:2;grid-row:5;align-self:start}
  body.pn .pn-title:has(#onlineBox:not([hidden])) #recLine{grid-row:6}
  body.pn .pn-title #roomBox:not([hidden]){grid-column:1;grid-row:1/span 4;min-height:0;overflow:auto}
  body.pn .pn-title:has(#roomBox:not([hidden])) #pickBox{display:none}
  body.pn .pn-title:has(#roomBox:not([hidden])) #ptBlock{grid-column:2;grid-row:3}
  body.pn .pn-title:has(#roomBox:not([hidden])) .ct-acts{grid-column:2;grid-row:4}
  body.pn .pn-title .pn-panel .lbl{margin:4px 0 6px!important;font-size:15px!important;letter-spacing:.08em;color:#fff8e6}
  body.pn .pn-title .pn-panel .gk-seg button{min-height:52px;font-size:17px}
  body.pn .pn-title .pn-panel .ptr button{min-height:96px;font-size:16px;padding:8px 6px}
  body.pn .pn-title .pn-panel .ptr button img{width:64px;height:64px}
  body.pn .pn-title .pn-panel .pn-hint,.pn .pn-title #oppsLine{font-size:15px;color:#f2e6c9;margin:4px 0 0}
  body.pn .pn-title .pn-panel .lvw{font-size:15px}
  body.pn .pn-title .pn-panel .lvn,.body.pn .pn-title .lvrow .gk-btn.icon{min-height:48px;font-size:18px}
  body.pn .pn-title .pn-panel .pn-in{font-size:18px;min-height:50px}
  body.pn .pn-title .ct-acts .gk-btn{min-height:60px;font-size:22px}
  body.pn .pn-title #btnDeal{min-height:64px;font-size:24px;font-weight:800}
  body.pn .pn-title #btnCreate{min-height:56px;font-size:20px}
  body.pn .gk-notices{flex:none}
}
/* short laptops (1024×600, 1024×640, 1280×720): tighten brand and gaps so everything still fits */
@media (min-width:1024px) and (min-height:560px) and (max-height:740px) and (orientation:landscape){
  body.pn .pn-title .pn-hero{width:150px;height:64px}
  body.pn .pn-title .pn-hero img{width:56px;height:56px;top:4px}
  body.pn .pn-title .gk-logo,body.pn .pn-title #tTtl{font-size:clamp(26px,2.8vw,36px)!important}
  body.pn .pn-title .gk-host{font-size:14px!important;margin:2px 0 0!important}
  body.pn .pn-title .pn-panel{padding:12px 16px 10px!important;column-gap:22px;row-gap:4px}
  body.pn .pn-title .pn-panel .ptr button{min-height:76px;font-size:14px;padding:4px}
  body.pn .pn-title .pn-panel .ptr button img{width:48px;height:48px}
  body.pn .pn-title .pn-panel .gk-seg button{min-height:44px;font-size:15px}
  body.pn .pn-title .ct-acts .gk-btn,body.pn .pn-title #btnDeal{min-height:52px;font-size:20px}
  body.pn .pn-title .gk-brand{gap:12px}
  body.pn .gk-title.pn-title{padding:2px 4px 4px!important;gap:6px!important}
}
@media (min-width:1600px) and (min-height:900px) and (orientation:landscape){
  body.pn .pn-title .pn-panel{padding:24px 32px 20px!important;column-gap:48px}
  body.pn .pn-title .pn-panel .ptr button{min-height:112px}
  body.pn .pn-title .pn-panel .ptr button img{width:80px;height:80px}
  body.pn .pn-title #btnDeal{min-height:72px;font-size:26px}
}

/* --- Table: felt fills the viewport; slim top chrome (no fat empty right column); big cards and avatars --- */
.ct.pn #sGame.pn-desk{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-areas:"chrome" "felt" "me"!important;
  gap:6px 0!important;
  width:100%!important;max-width:none!important;margin:0!important;
  min-height:0;height:100%;overflow:hidden!important;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-desk #pnChrome{
  grid-area:chrome;display:flex;flex-direction:row;align-items:center;gap:10px;
  min-height:48px;flex:none;z-index:20;min-width:0;
}
.ct.pn #sGame.pn-desk #pnChrome>.gk-bar{
  flex:none;display:flex;align-items:center;gap:6px;min-height:0!important;height:auto;padding:0!important;
  background:none;border:0;margin:0;width:auto;
}
.ct.pn #sGame.pn-desk #pnChrome>.gk-bar h2{display:none!important}
.ct.pn #sGame.pn-desk #pnChrome>.gk-bar .gk-btn.icon,
.ct.pn #sGame.pn-desk #pnChrome>.gk-bar #gBack{
  width:48px!important;min-width:48px!important;height:44px;min-height:44px!important;
}
.ct.pn #sGame.pn-desk #pnChrome #pnTop{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:center;gap:10px;
  position:relative;
}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-score{
  flex:0 1 460px;min-width:200px;min-height:46px;font-size:17px;padding:6px 14px;border-radius:14px;
}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-score b{font-size:20px}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-dock{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;padding:0;
}
.ct.pn #sGame.pn-desk #pnChrome #msg{
  position:static!important;display:block!important;flex:1 1 auto;min-width:0;
  margin:0;padding:6px 12px;border-radius:12px;
  background:rgba(14,20,32,.88);color:#F4F6F8;font-size:17px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none!important;height:auto!important;
  visibility:visible!important;text-align:left;inset:auto!important;transform:none!important;
}
.ct.pn #sGame.pn-desk #pnChrome #msg:empty{display:none!important}
.ct.pn #sGame.pn-desk #pnChrome .pn-next{
  flex:none;min-width:148px;min-height:48px;font-size:20px;width:auto;
}
.ct.pn #sGame.pn-desk #pnChrome #act{display:none!important} /* bid/trump/pass are on the felt */
.ct.pn #sGame.pn-desk #sb,.ct.pn #sGame.pn-desk #hudstrip,.ct.pn #sGame.pn-desk #tgDock{display:none!important}
.ct.pn #sGame.pn-desk #pnSide{display:none!important}

/* felt fills everything between the slim chrome and the hand */
.ct.pn #sGame.pn-desk #felt{
  grid-area:felt;
  margin:4px 8px 0!important;
  min-height:0!important;height:auto!important;width:auto!important;
  border-width:12px!important;overflow:hidden!important;position:relative;
  --tw:clamp(100px,min(13vw,calc((100svh - 280px) * .3)),200px);
}
.ct.pn #sGame.pn-desk #felt .seat{
  position:absolute!important;z-index:6;display:flex!important;flex-direction:column!important;
  align-items:center;gap:3px!important;padding:4px 8px;width:auto!important;max-width:200px;
  background:rgba(14,20,32,.55);border-radius:18px;
}
.ct.pn #sGame.pn-desk #felt .seat .avw{
  width:clamp(100px,9.2vw,168px)!important;height:clamp(100px,9.2vw,168px)!important;padding:4px!important;flex:none;
}
.ct.pn #sGame.pn-desk #felt .seat .av{
  width:clamp(92px,8.6vw,160px)!important;height:clamp(92px,8.6vw,160px)!important;
}
.ct.pn #sGame.pn-desk #felt .seat .nm{font-size:clamp(15px,1.2vw,20px)!important;max-width:180px;order:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct.pn #sGame.pn-desk #felt .seat .chip{font-size:clamp(14px,1.1vw,18px)!important;order:3;position:static!important;transform:none!important;margin:0!important}
.ct.pn #sGame.pn-desk #felt .seat .chip:empty{display:none!important}
.ct.pn #sGame.pn-desk #felt .seat .tag{position:static!important;order:4;font-size:14px!important;padding:1px 8px!important;margin:0!important}
.ct.pn #sGame.pn-desk #felt .seat .mini,.ct.pn #sGame.pn-desk #felt .seat .dots{display:none!important}
.ct.pn #sGame.pn-desk #felt .seat.s2{left:50%!important;right:auto!important;top:8px!important;transform:translateX(-50%)!important;flex-direction:row!important;max-width:none;padding:4px 14px 4px 4px;border-radius:999px}
.ct.pn #sGame.pn-desk #felt .seat.s1{left:10px!important;right:auto!important;top:42%!important;transform:translateY(-50%)!important}
.ct.pn #sGame.pn-desk #felt .seat.s3{right:10px!important;left:auto!important;top:42%!important;transform:translateY(-50%)!important}
/* turn breathing glow stays (beats any earlier override) */
.ct.pn #sGame.pn-desk #felt .seat.turn .av{border-color:#ffe58a;box-shadow:0 0 0 5px rgba(255,229,138,.55),0 0 28px rgba(255,214,96,.95)}
/* large trick in the center, clear of the side seats */
.ct.pn #sGame.pn-desk #felt .trick .slot.p0{left:50%!important;top:calc(56% + var(--tw) * .58)!important}
.ct.pn #sGame.pn-desk #felt .trick .slot.p2{left:50%!important;top:calc(56% - var(--tw) * .58)!important}
.ct.pn #sGame.pn-desk #felt .trick .slot.p1{left:calc(50% - var(--tw) * 1.02)!important;top:56%!important}
.ct.pn #sGame.pn-desk #felt .trick .slot.p3{left:calc(50% + var(--tw) * 1.02)!important;top:56%!important}
.ct.pn #sGame.pn-desk .pn-widow{top:56%}
.ct.pn #sGame.pn-desk #felt>#msg{display:none!important} /* message lives in the chrome */
.ct.pn #sGame.pn-desk .trumpb{display:none}

/* bid, trump, pass: centered over the felt, sized for a desktop */
.ct.pn #sGame.pn-desk #felt #act, .ct.pn #sGame.pn-desk #act{
  position:absolute!important;left:50%!important;right:auto!important;bottom:auto!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:min(680px,78%)!important;max-width:720px!important;max-height:78%!important;
  margin:0!important;padding:16px 18px!important;overflow:auto!important;
  z-index:16;display:block;box-sizing:border-box;
  background:rgba(14,8,30,.96)!important;border:2px solid rgba(255,229,138,.6);
  border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.65);
}
.ct.pn #sGame.pn-desk #act:empty{display:none!important}
.ct.pn #sGame.pn-desk #act h3{display:block!important;margin:0 0 10px;font-size:20px!important;line-height:1.25;color:#ffe58a;text-align:center}
.ct.pn #sGame.pn-desk #act .note{color:#f2e6c9;font-size:16px;text-align:center}
.ct.pn #sGame.pn-desk #act .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ct.pn #sGame.pn-desk #act .row .gk-btn{flex:1 1 160px;min-height:56px;padding:0 14px;font-size:20px}
.ct.pn #sGame.pn-desk #act .pn-bid .stepper{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}
.ct.pn #sGame.pn-desk #act .pn-bid .stepper .gk-btn.icon{width:56px;min-width:56px;min-height:56px}
.ct.pn #sGame.pn-desk #act .pn-bid .stepper b{min-width:48px;text-align:center;font-size:32px;color:#F1D77A}
.ct.pn #sGame.pn-desk #act .pn-bid .stepper .gk-btn.gold{flex:0 1 auto;min-width:140px;min-height:56px;font-size:20px}
.ct.pn #sGame.pn-desk #act .suits{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;justify-items:center}
.ct.pn #sGame.pn-desk #act .suitb{min-height:96px!important;max-width:140px!important;width:100%;padding:8px!important;font-size:16px!important}
.ct.pn #sGame.pn-desk #act .suitb svg{width:36px;height:36px}

/* hand: full width, large cards fanned across the bottom; You sits to the left */
.ct.pn #sGame.pn-desk .me{
  grid-area:me;margin:0!important;z-index:9;pointer-events:auto;position:relative;
  display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px;
  padding:0 10px 4px!important;min-width:0;
}
.ct.pn #sGame.pn-desk .mebar{
  position:static!important;inset:auto!important;transform:none!important;
  width:auto!important;max-width:140px!important;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 8px!important;gap:3px!important;border-radius:16px!important;
  background:rgba(14,20,32,.9);border:1px solid #D4AF37;z-index:8;
}
.ct.pn #sGame.pn-desk .mebar .av,.ct.pn #sGame.pn-desk .mebar .avw{
  width:clamp(56px,5.5vw,88px)!important;height:clamp(56px,5.5vw,88px)!important;
}
.ct.pn #sGame.pn-desk .mebar .nm{font-size:17px!important}
.ct.pn #sGame.pn-desk .mebar .chip,.ct.pn #sGame.pn-desk .mebar .tag,.ct.pn #sGame.pn-desk .mebar .pn-tk{font-size:14px!important}
.ct.pn #sGame.pn-desk .me .hand{margin:0;min-width:0;width:auto}
.ct.pn #sGame.pn-desk #hand:not(.two) .hc{bottom:8px}

/* score dropdown: wide, readable, still viewport-fixed with a close X */
.ct.pn #sGame.pn-desk .pn-drop,
.ct.pn #sGame.pn-desk #pnDrop{
  position:fixed!important;z-index:80;width:min(520px,70vw);font-size:17px;
  max-height:min(70vh,640px)!important;
  max-width:calc(100vw - var(--sal) - var(--sar) - 16px)!important;
}
body.pn.pn-deskb .gk-notices{font-size:13px!important;padding:3px 10px calc(var(--sab) + 3px)!important;line-height:1.2}

/* meld / hand-over / end: centered, wide, desktop type — button always on screen */
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  body.pn #shMeld,body.pn #shHand,body.pn #shEnd{padding:calc(var(--sat) + 24px) 24px calc(var(--sab) + 24px)!important}
  body.pn #shMeld .gk-card,body.pn #shHand .gk-card,body.pn #shEnd .gk-card{
    width:min(960px,88vw)!important;max-width:none!important;max-height:100%!important;
    padding:22px 26px 18px!important;
  }
  body.pn #shMeld h2,body.pn #shHand h2,body.pn #shEnd h2{font-size:28px!important}
  body.pn #mdBody .meldl{display:grid!important;grid-template-columns:1fr 1fr;gap:14px}
  body.pn #mdBody .meldl .mr .cs .card{width:48px}
  body.pn #shMeld .row .gk-btn,body.pn #shHand .row .gk-btn,body.pn #shEnd .row .gk-btn{min-height:56px;font-size:20px;flex:1 1 200px}
}

/* short desktop heights: slightly smaller chrome and seats so the felt and hand still fit with no scroll */
@media (min-width:1024px) and (max-height:700px) and (orientation:landscape){
  .ct.pn #sGame.pn-desk #pnChrome{min-height:42px;gap:8px}
  .ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-score{min-height:40px;font-size:15px}
  .ct.pn #sGame.pn-desk #pnChrome .pn-next{min-height:42px;font-size:17px;min-width:120px}
  .ct.pn #sGame.pn-desk #felt{--tw:clamp(84px,11vw,130px);border-width:8px!important;margin:2px 6px 0!important}
  .ct.pn #sGame.pn-desk #felt .seat .avw{width:clamp(72px,7vw,110px)!important;height:clamp(72px,7vw,110px)!important}
  .ct.pn #sGame.pn-desk #felt .seat .av{width:clamp(66px,6.5vw,104px)!important;height:clamp(66px,6.5vw,104px)!important}
  .ct.pn #sGame.pn-desk #act .suitb{min-height:72px!important}
}

/* t9119u / tfPN9: Pick up widow + Bury 3 panels */
.pn-widow-pick h3, .pn-bury h3{margin:0 0 10px;text-align:center;font-size:1.15em}
.pn-widow-faces{display:flex;justify-content:center;gap:8px;margin:8px 0 14px}
.pn-widow-faces .card{width:var(--hcw,72px)}

/* t9122u: selected cards are obvious on phone and desktop (pass AND 3-hand bury).
   Lift 18–24px, scale 1.12–1.18, bright glowing gold outline. Two-row hands and
   desk/land layout must not cancel the transform (an earlier rule used transform:none !important). */
.pn #hand, .pn .me, .pn .me .hand, .ct.pn #sGame.pn-desk .me, .ct.pn #sGame.pn-desk .me .hand,
.ct.pn #sGame.pn-land .me, .ct.pn #sGame.pn-docked .me{overflow:visible!important}
.pn #hand .hc.sel,
.pn .hand .hc.sel,
.pn .hand.two .hc.sel,
.ct.pn #sGame.pn-desk #hand .hc.sel,
.ct.pn #sGame.pn-desk #hand:not(.two) .hc.sel,
.ct.pn #sGame.pn-land #hand .hc.sel,
.ct.pn #sGame.pn-docked #hand .hc.sel{
  transform:translateY(-22px) scale(1.15) rotate(var(--rot,0deg))!important;
  z-index:40!important;
  transform-origin:50% 100%;
  bottom:auto;
}
.pn #hand .hc.sel .card,
.pn .hand .hc.sel .card{
  filter:drop-shadow(0 0 14px rgba(255,214,96,1));
  box-shadow:0 0 0 3px #ffd45a,0 0 20px 5px rgba(255,214,96,.95),0 12px 20px rgba(0,0,0,.5);
  outline:2px solid #ffe58a;
  outline-offset:1px;
}
.pn-pickn{
  margin:0 0 8px;text-align:center;font-size:1.15em;font-weight:800;
  color:#ffe58a;text-shadow:0 0 10px rgba(255,214,96,.8);
  letter-spacing:.02em;
}
.pn-pickn.go{color:#fff6c8}



/* t9126u / t9468u: after the pass swap, the 3 cards you RECEIVED — large glowing faces,
   labeled "From <partner>", shown only to you. Fits inside the felt band so the
   title and Got it are on-screen at 1366x768 and 1920x1080. Same gold glow on those
   cards in the hand. Stays until Got it or a backdrop tap; never auto-dismisses. */
.pn-got-layer{position:fixed;inset:0;z-index:80;pointer-events:auto}
.pn-got-back{position:absolute;inset:0;background:rgba(0,0,0,.4);pointer-events:auto}
.pn-got{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:81;padding:12px 20px 14px;border-radius:18px;background:rgba(10,6,24,.96);border:2px solid #ffd45a;box-shadow:0 0 32px 8px rgba(255,212,90,.5),0 16px 40px rgba(0,0,0,.6);text-align:center;pointer-events:auto;animation:pnGotIn .32s ease-out;max-width:min(94%,720px);max-height:58%;display:flex;flex-direction:column;align-items:center;gap:8px}
@keyframes pnGotIn{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.pn-got .pn-got-from{display:block;color:#ffd45a;font-size:clamp(1.05em,2.4vh,1.4em);font-weight:800;margin:0;text-shadow:0 0 14px rgba(255,212,90,.85);letter-spacing:.02em;flex:none}
.pn-got-cards{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.4vw,16px);margin:0;flex:none}
.pn-got-c{filter:drop-shadow(0 0 14px rgba(255,214,96,1))}
.pn-got-c .card{width:clamp(92px, min(16vw, 22vh), 168px);box-shadow:0 0 0 3px #ffd45a,0 0 22px 6px rgba(255,214,96,.95),0 12px 18px rgba(0,0,0,.5);outline:2px solid #ffe58a;outline-offset:2px;border-radius:10px;animation:pnGotPulse 1.2s ease-in-out infinite}
@keyframes pnGotPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.pn-got .row{justify-content:center;margin:4px 0 0;flex:none}
.pn-got #pnGotOk{min-width:108px;min-height:44px;font-size:1.08em}
/* short laptop: keep the whole panel (From + cards + Got it) above the hand */
@media (max-height:820px){
  .pn-got{top:36%;padding:8px 14px 10px;gap:6px;max-height:52%}
  .pn-got-c .card{width:clamp(84px, min(14vw, 18vh), 132px)}
  .pn-got #pnGotOk{min-height:40px;min-width:96px}
}
.ct.pn #sGame.pn-desk .pn-got{top:40%;z-index:80}
.ct.pn #sGame.pn-desk .pn-got-c .card{width:clamp(100px, min(12vw, 20vh), 168px)}
@media (max-height:820px){
  .ct.pn #sGame.pn-desk .pn-got{top:38%}
  .ct.pn #sGame.pn-desk .pn-got-c .card{width:clamp(88px, min(11vw, 17vh), 128px)}
}
.ct.pn #sGame.pn-docked .pn-got{top:42%;padding:10px 12px 12px;z-index:80}
.ct.pn #sGame.pn-docked .pn-got-c .card{width:clamp(72px, 22vw, 110px)}

/* received cards stay highlighted in the hand (~3s) with the same gold lift as a selection */
.pn #hand .hc.got,
.pn .hand .hc.got,
.pn .hand.two .hc.got,
.ct.pn #sGame.pn-desk #hand .hc.got,
.ct.pn #sGame.pn-desk #hand:not(.two) .hc.got,
.ct.pn #sGame.pn-land #hand .hc.got,
.ct.pn #sGame.pn-docked #hand .hc.got{
  transform:translateY(-22px) scale(1.15) rotate(var(--rot,0deg))!important;
  z-index:40!important;
  transform-origin:50% 100%;
  bottom:auto;
}
.pn #hand .hc.got .card,
.pn .hand .hc.got .card{
  filter:drop-shadow(0 0 14px rgba(255,214,96,1));
  box-shadow:0 0 0 3px #ffd45a,0 0 20px 5px rgba(255,214,96,.95),0 12px 20px rgba(0,0,0,.5);
  outline:2px solid #ffe58a;
  outline-offset:1px;
}


/* t9128u: live trick-points — running totals in a slim line under/beside the score,
   and a '+N' pop at the seat that just took the trick. */
.pn-prog{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-width:0;flex:1 1 auto;padding:2px 4px 0;font:600 14px/1.25 inherit;color:#F4F6F8;letter-spacing:.01em}
.pn-prog[hidden]{display:none!important}
.pn-prog .pn-prog-tr{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-prog .pn-prog-tr b{color:#F1D77A;font-size:1.08em}
.pn-prog .pn-prog-tr i{font-style:normal;color:#C0C6CC;padding:0 1px}
.pn-prog .pn-prog-bid{flex:none;color:#F1D77A;font-weight:800;white-space:nowrap;padding:2px 8px;border-radius:999px;background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.35)}
.ct.pn #sGame.pn-desk #pnChrome #pnTop{flex-wrap:wrap}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-prog{flex:1 1 100%;font-size:16px;padding:0 2px 2px;order:5}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-prog .pn-prog-bid{font-size:15px}
@media (max-height:820px){
  .ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-prog{font-size:14px}
  .ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-prog .pn-prog-bid{font-size:13px;padding:1px 7px}
}
.ct.pn #sGame.pn-docked #pnTop .pn-prog{flex:1 1 100%;font-size:13px;padding:0 2px 2px}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop .pn-prog{flex:1 1 100%;font-size:12px}
.ct.pn #sGame.pn3 .pn-prog .pn-prog-tr{white-space:normal}

.pn-ptspop{position:absolute;left:50%;top:-6px;z-index:25;transform:translate(-50%,-12px);padding:2px 10px;border-radius:999px;background:rgba(10,6,24,.94);border:2px solid #ffd45a;color:#ffd45a;font-weight:800;font-size:clamp(18px,2.2vh,26px);line-height:1.2;pointer-events:none;white-space:nowrap;text-shadow:0 0 10px rgba(255,212,90,.85);box-shadow:0 0 16px 4px rgba(255,212,90,.45);animation:pnPtsPop 1.25s ease-out forwards}
.ct .mebar{position:relative}
@keyframes pnPtsPop{
  0%{opacity:0;transform:translate(-50%,8px) scale(.8)}
  12%{opacity:1;transform:translate(-50%,-14px) scale(1.18)}
  65%{opacity:1;transform:translate(-50%,-24px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-40px) scale(.94)}
}
.ct.pn #sGame.pn-desk .seat .pn-ptspop{font-size:28px;top:0}
.ct.pn #sGame.pn-desk .mebar .pn-ptspop{font-size:28px;top:-8px;left:70%}
.pn .mebar .pn-ptspop{left:70%;top:-4px}


/* t9129u: one Last-trick button (dock, phone and desktop) and a small overlay of only the latest trick. */
.pn .pn-last{flex:none;align-self:flex-start;min-height:36px;height:auto;padding:0 12px;font-size:15px;font-weight:700;white-space:nowrap;width:auto;background:rgba(14,20,32,.88);color:#F4F6F8;border:1px solid rgba(212,175,55,.4)}
.pn .pn-last[hidden]{display:none!important}
.pn .pn-last:disabled,.pn .pn-last[aria-disabled="true"]{opacity:.42;cursor:default}
.ct.pn #sGame.pn-docked .pn-dock .pn-last{min-height:38px;font-size:15px;margin:0}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-last{min-height:40px;font-size:15px;border-radius:12px}
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-last{min-height:34px;font-size:13px;padding:0 10px}
.pn-lastov{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.4);pointer-events:auto}
.pn-lastov[hidden]{display:none!important}
.pn-lastov .pn-ltbox{min-width:0;max-width:min(560px,94vw);width:max-content;padding:14px 16px 16px;border-radius:18px;background:rgba(10,8,22,.96);border:2px solid rgba(241,215,122,.55);box-shadow:0 12px 40px rgba(0,0,0,.55);color:#F4F6F8;text-align:center}
.pn-lastov h3{margin:0 0 4px;font-size:clamp(18px,2.4vh,22px);color:#F1D77A;font-weight:800}
.pn-lastov .pn-ltsub{margin:0 0 10px;font-size:clamp(14px,1.9vh,17px);font-weight:700;color:#F4F6F8}
.pn-lastov .pn-ltsub small{font-weight:600;color:#C0C6CC}
.pn-ltcards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:0 0 12px}
.pn-ltfig{margin:0;padding:6px 6px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.pn-ltfig.won{border-color:#ffd45a;background:rgba(255,212,90,.12);box-shadow:0 0 14px 2px rgba(255,212,90,.35)}
.pn-ltfig figcaption{font-size:13px;font-weight:700;color:#F4F6F8;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-ltfig.won figcaption b{color:#ffd45a;font-weight:800}
.pn-ltcd .card,.pn-ltcd svg.card{width:clamp(64px,16vw,110px);height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.pn-ltpts{font-size:14px;font-weight:800;color:#F1D77A}
.pn-lastov .row{margin:0;justify-content:center}
.pn-lastov .row .gk-btn{min-width:96px;min-height:42px}
@media (max-height:820px){
  .pn-lastov .pn-ltbox{padding:10px 12px 12px}
  .pn-ltcd .card,.pn-ltcd svg.card{width:clamp(56px,14vw,90px)}
}
.ct.pn #sGame.pn-desk .pn-ltcd .card,.ct.pn #sGame.pn-desk .pn-ltcd svg.card{width:clamp(88px,10vw,128px)}


/* t9130u visual polish: trick clear of seats, bid badge never over a name,
   unmistakable selected-card gold + 1/2/3 badges, toast clear of seats. */

/* ---- (1) Trick well is inset from every seat plate. Cards are laid out
   inside that well, so they cannot sit under a nameplate. Desktop, phone, land. ---- */
.ct.pn #sGame.pn-desk #felt{
  --seat-top: clamp(124px, calc(9.2vw + 28px), 196px);
  --seat-side: clamp(128px, 15vw, 230px);
  --seat-bot: 10px;
  --tw: clamp(80px, min(10.5vw, calc((100svh - 340px) * .22)), 148px);
}
.ct.pn #sGame.pn-desk #felt .trick{
  inset: var(--seat-top) var(--seat-side) var(--seat-bot) var(--seat-side) !important;
  z-index: 4;
  pointer-events: none;
}
.ct.pn #sGame.pn-desk #felt .trick .slot.p0{left:50%!important;top:calc(100% - 0.72 * var(--tw) - 8px)!important}
.ct.pn #sGame.pn-desk #felt .trick .slot.p2{left:50%!important;top:calc(0.72 * var(--tw) + 8px)!important}
.ct.pn #sGame.pn-desk #felt .trick .slot.p1{left:calc(0.55 * var(--tw) + 8px)!important;top:50%!important}
.ct.pn #sGame.pn-desk #felt .trick .slot.p3{left:calc(100% - 0.55 * var(--tw) - 8px)!important;top:50%!important}

/* phone portrait: top seat sits in the felt margin; still inset the well */
.ct.pn #sGame.pn-docked #felt{
  --seat-top: 72px;
  --seat-side: 92px;
  --seat-bot: 6px;
}
.ct.pn #sGame.pn-docked #felt .trick{
  inset: var(--seat-top) var(--seat-side) var(--seat-bot) var(--seat-side)!important;
  z-index: 4;
}
.ct.pn #sGame.pn-docked #felt .trick .slot.p0{left:50%!important;top:calc(100% - 0.72 * var(--tw) - 6px)!important}
.ct.pn #sGame.pn-docked #felt .trick .slot.p2{left:50%!important;top:calc(0.72 * var(--tw) + 6px)!important}
.ct.pn #sGame.pn-docked #felt .trick .slot.p1{left:calc(0.55 * var(--tw) + 6px)!important;top:50%!important}
.ct.pn #sGame.pn-docked #felt .trick .slot.p3{left:calc(100% - 0.55 * var(--tw) - 6px)!important;top:50%!important}

/* landscape phones (not full desktop) */
.ct.pn #sGame.pn-land:not(.pn-desk) #felt{
  --seat-top: 56px;
  --seat-side: 86px;
  --seat-bot: 6px;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .trick{
  inset: var(--seat-top) var(--seat-side) var(--seat-bot) var(--seat-side)!important;
  z-index: 4;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .trick .slot.p0{left:50%!important;top:calc(100% - 0.72 * var(--tw) - 4px)!important}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .trick .slot.p2{left:50%!important;top:calc(0.72 * var(--tw) + 4px)!important}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .trick .slot.p1{left:calc(0.55 * var(--tw) + 4px)!important;top:50%!important}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .trick .slot.p3{left:calc(100% - 0.55 * var(--tw) - 4px)!important;top:50%!important}

/* short desktops (1366x768 etc.): keep the top seat compact enough that --seat-top clears it */
@media (min-width:1024px) and (max-height:820px) and (orientation:landscape){
  .ct.pn #sGame.pn-desk #felt{--seat-top: clamp(112px, 16vh, 148px); --seat-side: clamp(118px, 14vw, 190px)}
  .ct.pn #sGame.pn-desk #felt .seat.s2 .avw{width:clamp(72px,7vw,100px)!important;height:clamp(72px,7vw,100px)!important}
  .ct.pn #sGame.pn-desk #felt .seat.s2 .av{width:clamp(66px,6.5vw,94px)!important;height:clamp(66px,6.5vw,94px)!important}
}

/* ---- (1b) "Follow suit" toast: never over a seat. Desktop: under the chrome,
   in the open felt to the LEFT of the top seat. Phone: above the hand, centered. ---- */
body.pn .gk-toast{
  top: calc(var(--sat) + 58px)!important;
  left: max(12px, calc(var(--sal) + 12px))!important;
  right: auto!important;
  bottom: auto!important;
  transform: none!important;
  max-width: min(340px, 32vw);
  z-index: 90;
}
body.pn .gk-toast.on{opacity:1;transform:none!important}
body.pn:has(#sGame.pn-docked:not([hidden])) .gk-toast,
body.pn:has(#sGame.pn-land:not(.pn-desk):not([hidden])) .gk-toast,
body.pn:has(#sGame:not(.pn-desk):not(.pn-land):not(.pn-docked):not([hidden])) .gk-toast{
  top: auto!important;
  left: 50%!important;
  right: auto!important;
  bottom: calc(var(--sab) + 30vh)!important;
  transform: translateX(-50%)!important;
  max-width: min(92vw, 420px);
}
body.pn:has(#sGame.pn-docked:not([hidden])) .gk-toast.on,
body.pn:has(#sGame.pn-land:not(.pn-desk):not([hidden])) .gk-toast.on,
body.pn:has(#sGame:not(.pn-desk):not(.pn-land):not(.pn-docked):not([hidden])) .gk-toast.on{
  transform: translateX(-50%)!important;
}

/* ---- (2) Bid / Dealer badge: in the flex flow, never over the name.
   Beside the name on a row seat (partner), above the name on a column seat. ---- */
.ct .seat .avw,.ct.pn #sGame.pn-desk #felt .seat .avw{order:1}
.ct .seat .tag,
.ct.pn #sGame #felt .seat .tag,
.ct.pn #sGame.pn-desk #felt .seat .tag,
.ct.pn #sGame.pn-desk #felt .seat.s2 .tag,
.ct.pn #sGame.pn-docked #felt .seat .tag,
.ct.pn #sGame.pn-land #felt .seat .tag,
.ct.pn #sGame.pn-land #felt .seat.s2 .tag,
.ct.pn #sGame.pn-land #felt .seat .tag{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  margin:2px 0 0!important;
  flex:none;
  align-self:center;
  z-index:2;
  white-space:nowrap;
  max-width:100%;
  order:2;
}
.ct .seat .nm,
.ct.pn #sGame.pn-desk #felt .seat .nm{position:relative;z-index:2;order:3;overflow:hidden;text-overflow:ellipsis}
.ct .seat .chip,.ct.pn #sGame.pn-desk #felt .seat .chip{order:4}
.ct .seat .mini{order:5}
.ct .seat .pn-tk{order:6}
/* row partner seat: badge sits beside the name, after it */
.ct .seat.s2 .tag,
.ct.pn #sGame.pn-desk #felt .seat.s2 .tag,
.ct.pn #sGame.pn-docked #felt .seat.s2 .tag,
.ct.pn #sGame.pn-land #felt .seat.s2 .tag{order:3;margin:0 0 0 6px!important}
.ct .seat.s2 .nm,
.ct.pn #sGame.pn-desk #felt .seat.s2 .nm{order:2}

/* ---- (3) Selected cards: unmistakable gold. Thick bright ring with a gap
   from the card's own gold edge, strong outer glow, brightness, 1/2/3 badge. ---- */
.pn #hand .hc.sel,
.pn .hand .hc.sel,
.pn .hand.two .hc.sel,
.ct.pn #sGame.pn-desk #hand .hc.sel,
.ct.pn #sGame.pn-desk #hand:not(.two) .hc.sel,
.ct.pn #sGame.pn-land #hand .hc.sel,
.ct.pn #sGame.pn-docked #hand .hc.sel{
  overflow:visible!important;
  filter:brightness(1.14);
  outline:4px solid #ffe566;
  outline-offset:3px;
  border-radius:12px;
  box-shadow:0 0 0 2px #fff8c0, 0 0 18px 6px rgba(255,212,90,1), 0 0 32px 10px rgba(255,200,50,.75);
  z-index:40!important;
  transform:translateY(-22px) scale(1.15) rotate(var(--rot,0deg))!important;
  transform-origin:50% 100%;
}
.pn .hand.two .hc.sel,
.ct.pn #sGame.pn-desk #hand.two .hc.sel{
  transform:translateY(-22px) scale(1.15)!important;
}
.pn #hand .hc.sel .card,
.pn .hand .hc.sel .card,
.pn .hand.two .hc.sel .card{
  filter:brightness(1.08) drop-shadow(0 0 10px rgba(255,214,96,1));
  box-shadow:none;
  outline:none;
}
.pn-seln{
  position:absolute;top:-8px;right:-8px;z-index:6;
  width:1.55em;height:1.55em;border-radius:50%;
  background:linear-gradient(180deg,#ffe566,#f0b429);
  color:#1a1000;font-weight:900;
  font-size:clamp(14px,1.9vh,22px);line-height:1.55em;text-align:center;
  border:2px solid #fffef0;
  box-shadow:0 0 10px 2px rgba(255,212,90,.95),0 2px 6px rgba(0,0,0,.5);
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}


/* t9131u: end-of-hand score — bid reminder at the top, big and high-contrast,
   then this-hand points and running game totals, plus the play-to target. */
.pn-bidres{
  font-size:clamp(18px,2.8vh,28px)!important;font-weight:800;line-height:1.35;
  text-align:center;color:#FFF8E6;margin:0 0 14px!important;
  padding:12px 16px;border-radius:16px;
  background:rgba(10,8,22,.92);border:2px solid rgba(241,215,122,.65);
  letter-spacing:.01em;text-wrap:balance;
}
.pn-bidres.good{border-color:#6ee7a0;background:rgba(12,36,24,.94)}
.pn-bidres.bad{border-color:#ff8a8a;background:rgba(40,12,16,.94)}
.pn-bidres .pn-made{color:#7dff9a;font-weight:900}
.pn-bidres .pn-set{color:#ff9a9a;font-weight:900}
.pn .hs{width:100%;border-collapse:separate;border-spacing:0;font-size:clamp(16px,2.3vh,22px);font-weight:700;margin:0 0 12px}
.pn .hs th{color:#F1D77A;font-weight:800;text-align:left;padding:8px 10px;border-bottom:2px solid rgba(241,215,122,.45);background:rgba(20,14,36,.7)}
.pn .hs td{color:#FFF8E6;padding:10px;border-bottom:1px solid rgba(255,255,255,.1);font-variant-numeric:tabular-nums}
.pn .hs tr.bid-row td{background:rgba(241,215,122,.12)}
.pn .hs td.pos{color:#7dff9a;font-weight:900}
.pn .hs td.neg{color:#ff9a9a;font-weight:900}
.pn .pn-bidtag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:linear-gradient(180deg,#ffe58a,#f5c542);color:#2a1a00;font-size:.78em;font-weight:800;vertical-align:middle}
.pn .pn-buryhint{color:#F1D77A;font-weight:700;font-size:.85em}
.pn .pn-target{text-align:center;font-size:clamp(17px,2.3vh,22px)!important;font-weight:800;color:#FFF8E6;margin:4px 0 0!important;padding:8px 10px;border-radius:12px;background:rgba(14,20,32,.75);border:1px solid rgba(241,215,122,.35)}
.pn .pn-target b{color:#F1D77A;font-size:1.15em}
@media (max-width:520px){
  .pn-bidres{font-size:clamp(16px,4.4vw,20px)!important;padding:10px 12px;margin:0 0 10px!important}
  .pn .hs{font-size:15px}
  .pn .hs th,.pn .hs td{padding:7px 6px}
  .pn .pn-target{font-size:16px!important}
}
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  body.pn #shHand .pn-bidres{font-size:26px!important;padding:16px 20px}
  body.pn #shHand .hs{font-size:22px}
  body.pn #shHand .hs th,body.pn #shHand .hs td{padding:12px 14px}
  body.pn #shHand .pn-target{font-size:22px!important}
}



/* t9132u: prominent TRUMP + BID badge on the felt for the whole hand.
   Large suit (48–64px desk, ≥36px phone) in suit color, the word Trump,
   and "Bid 27 · Tommy Bot & You" — high contrast, clear of seats and trick cards. */
.pn-trbid{
  position:absolute;z-index:5;left:10px;top:10px;
  display:flex;align-items:center;gap:10px;
  padding:8px 14px 8px 8px;border-radius:18px;
  background:rgba(8,6,18,.94);border:2px solid rgba(241,215,122,.75);
  box-shadow:0 8px 22px rgba(0,0,0,.5);color:#FFF8E6;
  pointer-events:none;max-width:min(44%,440px);
  font-weight:800;letter-spacing:.01em;
}
.pn-trbid[hidden]{display:none!important}
.pn-trbid-suit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:none}
.pn-trbid-sy{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:14px;
  background:#FFF8E6;box-shadow:0 0 0 2px rgba(20,10,0,.2),0 2px 6px rgba(0,0,0,.35);
}
.pn-trbid-sy svg{width:48px!important;height:48px!important;display:block}
.pn-trbid-lbl{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#F1D77A;line-height:1.1}
.pn-trbid-bid{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;line-height:1.15;font-size:clamp(17px,2.2vh,26px)}
.pn-trbid-bid b{color:#FFE58A;font-size:1.15em;font-weight:900;margin:0}
.pn-trbid-bid i{display:none} /* stacked: Bid N on the first line, names on the second */
.pn-trbid-bid span{color:#FFF8E6;font-weight:800;font-size:.92em}

/* desktop: sit in the open band BETWEEN the left seat (Pinky) and the top seat (Tommy),
   never over a name plate or a trick card. 56–64px suit. */
.ct.pn #sGame.pn-desk #felt .pn-trbid{
  left:200px;top:10px;padding:10px 16px 10px 10px;gap:12px;border-radius:20px;
  max-width:min(300px, calc(50% - 290px));
  z-index:5;
}
.ct.pn #sGame.pn-desk #felt .pn-trbid-sy{width:64px;height:64px;border-radius:16px}
.ct.pn #sGame.pn-desk #felt .pn-trbid-sy svg{width:56px!important;height:56px!important}
.ct.pn #sGame.pn-desk #felt .pn-trbid-lbl{font-size:13px}
.ct.pn #sGame.pn-desk #felt .pn-trbid-bid{font-size:clamp(20px,2.4vh,28px)}

@media (min-width:1024px) and (max-height:820px) and (orientation:landscape){
  /* 1366x768 and other short laptops: still ≥48px suit */
  .ct.pn #sGame.pn-desk #felt .pn-trbid{top:8px;left:196px;padding:8px 14px 8px 8px;gap:10px;max-width:min(300px, calc(50% - 290px))}
  .ct.pn #sGame.pn-desk #felt .pn-trbid-sy{width:56px;height:56px}
  .ct.pn #sGame.pn-desk #felt .pn-trbid-sy svg{width:48px!important;height:48px!important}
  .ct.pn #sGame.pn-desk #felt .pn-trbid-bid{font-size:22px}
}
@media (min-width:1024px) and (max-width:1180px) and (orientation:landscape){
  /* 1024-wide: a tighter badge so it still clears Tommy at center */
  .ct.pn #sGame.pn-desk #felt .pn-trbid{left:176px;max-width:min(230px, calc(50% - 270px))}
  .ct.pn #sGame.pn-desk #felt .pn-trbid-bid{font-size:18px}
}

/* phone portrait: the badge is reparented as a sibling just above the felt
   (a full-width row, ≥36px suit, never over a seat or a trick card). */
.ct.pn #sGame.pn-docked > .pn-trbid,
.ct.pn #sGame.pn-docked #felt .pn-trbid{
  position:relative;left:auto;top:auto;right:auto;bottom:auto;
  transform:none;margin:0 10px 6px;padding:6px 12px 6px 6px;gap:10px;
  max-width:none;width:auto;align-self:stretch;border-radius:16px;
  z-index:8;
}
.ct.pn #sGame.pn-docked > .pn-trbid .pn-trbid-sy,
.ct.pn #sGame.pn-docked #felt .pn-trbid-sy{width:40px;height:40px;border-radius:10px}
.ct.pn #sGame.pn-docked > .pn-trbid .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked #felt .pn-trbid-sy svg{width:36px!important;height:36px!important}
.ct.pn #sGame.pn-docked > .pn-trbid .pn-trbid-lbl,
.ct.pn #sGame.pn-docked #felt .pn-trbid-lbl{font-size:10px}
.ct.pn #sGame.pn-docked > .pn-trbid .pn-trbid-bid,
.ct.pn #sGame.pn-docked #felt .pn-trbid-bid{font-size:17px;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.ct.pn #sGame.pn-docked > .pn-trbid .pn-trbid-bid i,
.ct.pn #sGame.pn-docked #felt .pn-trbid-bid i{display:inline;padding:0 4px;font-style:normal;color:#C0C6CC;font-weight:700}

/* phone landscape (not desk): compact chip, top-left of the felt; side seats sit in the margin. */
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .pn-trbid{
  left:8px;top:6px;padding:5px 10px 5px 5px;gap:7px;max-width:46%;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .pn-trbid-sy{width:40px;height:40px}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .pn-trbid-sy svg{width:36px!important;height:36px!important}
.ct.pn #sGame.pn-land:not(.pn-desk) #felt .pn-trbid-bid{font-size:15px}

/* t9147u: Pick your own meld — live names and points */
.pn-meld-pick h3{margin:0 0 8px;text-align:center;color:var(--gold2)}
.pn-meld-live{margin:4px 0 10px;text-align:center;font-size:20px;line-height:1.35;color:#ffe58a;font-weight:700;min-height:1.4em}
.pn-meld-live.go{color:#fff4c4}
.pn #meldHint{max-width:36em}
@media (max-width:520px){
  .pn-meld-live{font-size:17px}
  .pn #meldHint{font-size:14px}
}

/* t9155u / t9162u: aligned Bid | Meld | Points | Total | Need board */
.pn-prog.pn-board{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;min-width:0;padding:8px 8px 6px;border-radius:14px;background:rgba(10,12,18,.78);border:1px solid rgba(241,215,122,.32);box-shadow:0 6px 20px rgba(0,0,0,.28);color:#F4F6F8}
.pn-prog.pn-board[hidden]{display:none!important}
table.pn-bt{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;font-weight:650;color:#F4F6F8}
table.pn-bt th, table.pn-bt td{padding:5px 6px;text-align:center;vertical-align:middle;font-size:14px;font-weight:700;line-height:1.2;border-bottom:1px solid rgba(192,198,204,.16);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tfPN9h3: column headers and "0 tricks" are at least 11px with WCAG AA
   4.5:1 contrast (#F4F6F8 on the rgba(10,12,18,.78) panel). */
table.pn-bt thead th{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#F4F6F8;padding:2px 6px 6px;border-bottom:1.5px solid rgba(241,215,122,.35);text-align:center}
table.pn-bt th:first-child, table.pn-bt tbody th{text-align:left;font-weight:800;color:#F4F6F8;width:18%;padding-left:4px}
table.pn-bt td.sc{font-weight:900;color:#F1D77A;font-size:16px}
table.pn-bt td.pts b{display:block;font-weight:900;font-size:16px;color:#F4F6F8;line-height:1.1}
table.pn-bt td.pts small{display:block;font-size:11px;font-weight:700;color:#F4F6F8;letter-spacing:.01em;margin-top:1px}
table.pn-bt tr.us th, table.pn-bt tr.us td{color:#FFF8E6}
table.pn-bt tr.us{background:rgba(241,215,122,.1)}
table.pn-bt tbody tr:last-child th, table.pn-bt tbody tr:last-child td{border-bottom:0}
table.pn-bt col.c-side{width:14%}
table.pn-bt col.c-bid, table.pn-bt col.c-meld{width:11%}
table.pn-bt col.c-pts{width:16%}
table.pn-bt col.c-tot{width:13%}
table.pn-bt col.c-need{width:35%}
/* tfPN9h2: Need pill stays fully visible from 360 wide up; names may ellipsis, the pill does not. */
table.pn-bt{max-width:100%;box-sizing:border-box}
.pn-prog.pn-board{max-width:100%;width:100%;box-sizing:border-box;min-width:0}
table.pn-bt td.need{white-space:nowrap;overflow:visible!important;text-overflow:unset!important;width:35%;min-width:6.8em;padding-left:2px;padding-right:2px}
table.pn-bt td.need span{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:0;background:rgba(192,198,204,.14);color:#E8ECF0;overflow:visible!important;text-overflow:unset!important;max-width:100%;box-sizing:border-box;white-space:nowrap}
table.pn-bt td.need.need span{background:rgba(241,215,122,.18);color:#F1D77A}
table.pn-bt td.need.made span{background:rgba(46,180,96,.32);color:#B6F5C8}
table.pn-bt td.need.na span{background:transparent;color:#8B929A;padding:0;font-weight:650}
.pn-live-tools{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:2px}
.pn-live-tools .pn-last{margin:0!important;align-self:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ct.pn #sGame.pn-desk #pnChrome #pnTop .pn-prog.pn-board{flex:1 1 100%;order:5;padding:10px 12px 8px;max-width:520px;margin-left:auto}
.ct.pn #sGame.pn-desk #pnChrome #pnTop table.pn-bt,
.ct.pn #sGame.pn-desk #pnChrome #pnTop table.pn-bt th,
.ct.pn #sGame.pn-desk #pnChrome #pnTop table.pn-bt td{font-size:14px}
.ct.pn #sGame.pn-desk #pnChrome #pnTop table.pn-bt td.sc,
.ct.pn #sGame.pn-desk #pnChrome #pnTop table.pn-bt td.pts b{font-size:18px}
.ct.pn #sGame.pn-docked #pnTop .pn-prog.pn-board,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop .pn-prog.pn-board{padding:6px 6px 4px;border-radius:12px}
@media (max-width:520px){
  table.pn-bt, table.pn-bt th, table.pn-bt td{font-size:12px;padding:4px 2px}
  table.pn-bt thead th{
    font-size:11px;font-weight:800;letter-spacing:0;padding:2px 0 4px;color:#F4F6F8;
    overflow:visible!important;text-overflow:unset!important;white-space:nowrap;
  }
  table.pn-bt td.sc, table.pn-bt td.pts b{font-size:15px}
  table.pn-bt td.pts small{font-size:11px;font-weight:700;color:#F4F6F8;overflow:visible!important;text-overflow:unset!important}
  table.pn-bt th:first-child, table.pn-bt tbody th{width:13%;padding-left:2px}
  table.pn-bt col.c-side{width:13%}
  table.pn-bt col.c-bid{width:11%}
  table.pn-bt col.c-meld{width:13%}
  table.pn-bt col.c-pts{width:16%}
  table.pn-bt col.c-tot{width:15%}
  table.pn-bt col.c-need{width:32%}
  table.pn-bt thead th:nth-child(6), table.pn-bt td.need{width:32%;min-width:7em;overflow:visible!important;text-overflow:unset!important}
  table.pn-bt td.need span{font-size:11px;padding:2px 5px;overflow:visible!important;text-overflow:unset!important;letter-spacing:0}
}


/* ===== t9183u: phone portrait — more felt, large overlapping fan, slim collapsed
   score (Bid, trump, our / their totals), compact trump+bid chip, no overlaps.
   Desktop (.pn-desk) and landscape-desk rules are not changed. ===== */
@media (orientation: portrait) and (max-width: 520px) {
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-top{gap:3px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-score{
    min-height:34px;padding:3px 10px;font-size:14px;gap:6px;border-radius:14px;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-score b{font-size:16px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-score .pn-str{
    padding:1px 7px;font-size:13px;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-score .pn-sl{font-size:14px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .gk-bar{min-height:40px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .gk-bar h2{font-size:16px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .gk-bar .gk-btn.icon{width:40px;min-width:40px;min-height:40px}

  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt{
    --tw:48px !important;
    flex:1 1 0 !important;
    /* tfPN9e4: 200px was taller than a short visual viewport with a bid panel;
       the felt grows on tall phones via flex:1, and shrinks before the hand. */
    min-height:110px !important;
    margin:36px 36px 4px !important;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat{width:84px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat .avw{width:64px !important;height:64px !important;padding:3px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat .av{width:58px !important;height:58px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat .nm{font-size:13px !important;max-width:84px;padding:1px 5px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat.s2{top:-36px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat.s1{left:-40px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat.s3{right:-40px !important}

  /* compact chip in the open top-LEFT corner of the felt — clear of the
     partner (center-top), the side seats (mid-left / mid-right), and trick cards. */
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid{
    position:absolute;left:4px;top:4px;right:auto;bottom:auto;
    transform:none;
    margin:0;padding:2px 7px 2px 3px;gap:5px;
    max-width:44%;width:auto;
    border-radius:10px;z-index:5;
    pointer-events:none;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-sy{width:26px;height:26px;border-radius:7px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-sy svg{width:22px !important;height:22px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-lbl{font-size:8px;letter-spacing:.06em}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-bid{font-size:13px;flex-direction:row;flex-wrap:nowrap;align-items:baseline;gap:0 2px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-bid b{font-size:14px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-bid i,
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .pn-trbid-bid span{display:none !important} /* names live on the seats and the slim score */

  /* tfPN9h2: large labeled Trump badge in the header (#pnTop), not a tiny
     suit in the slim score bar. Suit ≥40px, the word Trump, Bid N and the
     bidder stay visible. Full-width row so it does not crowd the hand. */
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid{
    position:relative;left:auto;top:auto;right:auto;bottom:auto;
    transform:none;margin:0 0 4px;padding:5px 12px 5px 6px;gap:10px;
    max-width:none;width:100%;box-sizing:border-box;
    align-self:stretch;border-radius:14px;z-index:6;
    pointer-events:none;display:flex;align-items:center;
    background:rgba(8,6,18,.94);border:2px solid rgba(241,215,122,.75);
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-sy{
    width:44px;height:44px;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    background:#FFF8E6;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-sy svg{width:40px!important;height:40px!important;display:block}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-lbl{
    font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
    color:#F1D77A;line-height:1.1;display:block;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-suit{
    display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-bid{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    gap:0 8px;font-size:18px;min-width:0;line-height:1.15;font-weight:800;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-bid b{color:#FFE58A;font-size:1.1em;font-weight:900;margin:0}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-bid i{
    display:inline;padding:0 4px;font-style:normal;color:#C0C6CC;font-weight:700;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-bid span{
    display:inline!important;color:#FFF8E6;font-weight:800;font-size:.95em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  /* The slim score's 14px suit is no longer the trump badge. */
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-score .pn-str{display:none!important}

  .ct.pn #sGame.pn-docked:not(.pn-desk) > .pn-trbid{display:none !important}

  /* one "N of 3 picked" control, not a heading plus a copy of the same words.
     Hide the disabled "0 of 3 picked" button too — the mebar already says
     "You Passing 3". The gold Pass button appears only once 3 are chosen. */
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-pass-pick .pn-pickn{display:none}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-pass-pick{padding:0;margin:0}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #act:has(.pn-pass-pick [data-v="go"]:disabled){display:none !important}

  /* mid-hand chrome: smaller bid-progress, hide a disabled Last-trick button */
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-prog{font-size:11px;padding:0 2px;gap:2px 8px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #pnLast:disabled{display:none !important}

  .ct.pn #sGame.pn-docked:not(.pn-desk) .me{margin-top:0 !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .mebar{min-height:32px;padding:1px 8px 1px 2px !important;position:relative;z-index:6}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .mebar .av{width:36px;height:36px}

  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock{gap:4px;padding:0 6px 2px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock #act{padding:4px 6px !important;border-radius:12px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock #act .row .gk-btn{min-height:42px;font-size:15px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-bid .stepper b{font-size:20px;min-width:36px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .suitb{min-height:52px}
  .ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock #msg{font-size:15px;min-height:22px;padding:2px 6px}

  /* lift corridor above the fan so a selected card rises without covering the mebar
     or clipping off the left/right edge */
  .ct.pn #sGame.pn-docked:not(.pn-desk) .me .hand,
  .ct.pn #sGame.pn-docked:not(.pn-desk) #hand{
    overflow:visible !important;
    min-height:calc(var(--hcw, 76px) * 1.4 + 28px);
    /* 8px side pad (was 14) gives a 12-card fan at ~402px a few more px of
       peek so each rank is visible; legal cards also sit on top in table.js. */
    padding:18px 8px 2px;
    box-sizing:border-box;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #hand.playing .hc.ok,
  .ct.pn #sGame.pn-docked:not(.pn-desk) #hand.myturn .hc.ok{
    filter:none !important;
    opacity:1 !important;
    overflow:visible;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #hand.playing .hc.ok .card,
  .ct.pn #sGame.pn-docked:not(.pn-desk) #hand.myturn .hc.ok .card{
    opacity:1;
    background:#efe4cc;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #hand .hc.sel{
    transform:translateY(-14px) scale(1.10) rotate(var(--rot,0deg)) !important;
  }
}

@media (orientation: portrait) and (max-width: 520px) and (max-height: 860px) {
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt{
    --tw:46px !important;
    margin:32px 32px 4px !important;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat .avw{width:60px !important;height:60px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat .av{width:54px !important;height:54px !important}
  .ct.pn #sGame.pn-docked:not(.pn-desk) #felt .seat.s2{top:-32px !important}
}

/* ===== tfPN9e4: real-phone visual viewport — whole card faces, including the
   bottom index, sit fully above the 18+ footer. Bid panel collapses to one
   row on short screens; the felt shrinks before the hand does. Desktop
   (.pn-desk) and the landscape-desk branch are not changed. ===== */

body.pn:has(#sGame.pn-docked:not(.pn-desk):not([hidden])) .gk-app{
  top: var(--vv-off-top, 0px) !important;
  height: var(--vvh, 100dvh) !important;
  max-height: var(--vvh, 100dvh) !important;
  bottom: auto !important;
  overflow: hidden;
}
body.pn:has(#sGame.pn-docked:not(.pn-desk):not([hidden])) .gk-notices{
  flex: none !important;
  position: relative;
  z-index: 56;
}
.ct.pn #sGame.pn-docked:not(.pn-desk){
  min-height: 0 !important;
}

/* Shorter visual viewports: tighter felt well and smaller seats (felt shrinks first). */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #felt{
  --tw: 42px !important;
  min-height: 96px !important;
  margin: 26px 26px 2px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #felt{
  --tw: 38px !important;
  min-height: 88px !important;
  margin: 22px 22px 2px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat{width:72px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat .avw{width:52px !important;height:52px !important;padding:2px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat .av{width:46px !important;height:46px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat .nm{font-size:12px !important;max-width:72px}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat.s2{top:-28px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat.s1{left:-34px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #felt .seat.s3{right:-34px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #felt .seat .avw{width:46px !important;height:46px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #felt .seat .av{width:40px !important;height:40px !important}

/* One-row bid panel (Pass | Bid N | − N + | Bid N) on short visual viewports. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: stretch;
  gap: 4px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid .row{
  flex: 1 1 42%;
  min-width: 0;
  margin: 0;
  gap: 4px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid .stepper{
  flex: 1 1 58%;
  min-width: 0;
  margin-top: 0 !important;
  gap: 3px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-dock #act{
  padding: 3px 4px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-dock #act .row .gk-btn,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid .stepper .gk-btn{
  min-height: 40px;
  font-size: 14px;
  padding: 0 5px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid .stepper .gk-btn.icon{
  width: 36px;
  min-width: 36px;
  min-height: 40px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid .stepper b{
  font-size: 16px;
  min-width: 26px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .suitb{
  min-height: 44px;
  padding: 2px !important;
  font-size: 12px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .suits{
  gap: 4px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-dock #msg{
  font-size: 13px;
  min-height: 0;
  padding: 2px 6px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-dock .pn-last,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnLast{
  min-height: 32px;
  font-size: 13px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop .pn-prog{
  font-size: 10px;
  padding: 0 2px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .mebar{
  min-height: 28px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .gk-bar{
  min-height: 36px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-score{
  min-height: 28px;
  padding: 2px 8px;
  font-size: 13px;
}

/* Hand is flex-none so the felt takes the leftover height. Extra bottom pad
   keeps a rotated face's bottom index inside #hand, above the reserved footer. */
.ct.pn #sGame.pn-docked:not(.pn-desk) .me{
  flex: none !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) .me .hand,
.ct.pn #sGame.pn-docked:not(.pn-desk) #hand{
  overflow: visible !important;
  padding: 16px 8px 4px;
  box-sizing: border-box;
  flex: none;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #hand .hc{
  bottom: 12px;
}


/* ===== tfPN9h5: Galaxy S23 Chrome play-phase, visual viewport ~360x640
   (URL bar + Android nav, visualViewport smaller than innerHeight).
   With the score board expanded and Last trick showing, shrink the felt
   and compact the board first — never the hand. The whole fan, including
   each card's bottom index, sits above the 18+ footer. Cards stay at least
   as large as e5 bidding. Desktop (.pn-desk) is unchanged. ===== */

.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort.pn-play-tight #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short.pn-play-tight #felt{
  --tw: 36px !important;
  min-height: 48px !important;
  margin: 10px 18px 2px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat{width:64px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat .avw{width:42px !important;height:42px !important;padding:2px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat .av{width:36px !important;height:36px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat .nm{font-size:11px !important;max-width:64px}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat.s2{top:-22px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat.s1{left:-26px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .seat.s3{right:-26px !important}

.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop .pn-prog.pn-board{
  padding: 3px 4px 2px !important;
  gap: 2px !important;
  margin: 0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight table.pn-bt th,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight table.pn-bt td{
  padding: 1px 2px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight table.pn-bt thead th{
  padding: 1px 0 2px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop > .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight > .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .pn-trbid{
  margin: 0 8px 2px !important;
  padding: 3px 8px 3px 4px !important;
  gap: 6px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight > .pn-trbid .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .pn-trbid-sy{
  width: 32px !important;
  height: 32px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight > .pn-trbid .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #felt .pn-trbid-sy svg{
  width: 28px !important;
  height: 28px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight .pn-live-tools .pn-last,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnLast{
  min-height: 28px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight .mebar{min-height:24px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight .gk-bar{min-height:34px !important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight .me,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #hand{
  z-index: 60;
  position: relative;
}

/* If the hand still meets the footer after the first compact pass, shrink
   the felt further. Never touch --hcw. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight.pn-play-tighter #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort.pn-play-tight.pn-play-tighter #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short.pn-play-tight.pn-play-tighter #felt{
  --tw: 32px !important;
  min-height: 36px !important;
  margin: 6px 14px 0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight.pn-play-tighter #pnTop .pn-prog.pn-board{
  padding: 2px 3px 1px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight.pn-play-tighter #hand{
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}


/* Rejected-tap hint (above the hand) and shake of the card face. */
.pn-play-hint{
  flex: none;
  align-self: center;
  margin: 0 10px 4px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(20,16,8,.92);
  border: 1px solid rgba(241,215,122,.55);
  color: #F1D77A;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  z-index: 61;
  position: relative;
  max-width: calc(100% - 20px);
  box-sizing: border-box;
}
.pn-play-hint[hidden]{display:none !important}
@keyframes pn-rej-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
#hand .hc .card.pn-rej,
#hand .hc.pn-rej .card{
  animation: pn-rej-shake .45s ease;
}

/* Footer must not steal taps from a card whose lower half used to sit under it. */
body.pn:has(#sGame.pn-docked:not(.pn-desk):not([hidden])) .gk-notices{
  z-index: 4;
  pointer-events: none;
}

/* ===== tfPN9i2: phone play screen — collapsible score, slim trump/bid,
   no under-hand You/Meld/Bid bar, "Your lead." on the felt, bigger table,
   pass picks in the center. Desktop (.pn-desk) is unchanged. ===== */

/* Pass/bury picks sit in the middle of the felt, full size, upright, pick order. */
#pnOut.pn-out{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  z-index:28;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:clamp(8px,2vw,16px);pointer-events:none;max-width:94%;
}
#pnOut.pn-out[hidden],#pnOut.pn-out:empty{display:none!important}
#pnOut.pn-out .hc{
  position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;
  width:var(--outcw,96px);height:calc(var(--outcw,96px)*1.4);flex:none;pointer-events:auto;box-sizing:border-box;
  transform:none;--rot:0deg;z-index:50;
  overflow:visible!important;
  filter:brightness(1.08);
  outline:3px solid #ffe566;outline-offset:3px;border-radius:12px;
  box-shadow:0 0 0 2px #fff8c0,0 0 16px 5px rgba(255,212,90,.95),0 10px 18px rgba(0,0,0,.5);
}
#pnOut.pn-out .hc:not(.pn-fly){transform:none!important}
#pnOut.pn-out .hc .card,
#pnOut.pn-out .hc svg.card{
  width:100%!important;height:100%!important;max-width:none!important;
  display:block;
  filter:brightness(1.06) drop-shadow(0 0 8px rgba(255,214,96,.9));
  box-shadow:none;outline:none;
}
#pnOut.pn-out .hc .pn-seln{top:-8px;right:-8px}
.hc.pn-fly,.pn-fly{pointer-events:none!important}

.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnScore{display:none!important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #mebar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .mebar{display:none!important}

/* Slim ~44px trump/bid row: prominent badge + "Bid 28 · You & Pinky Bot". */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid{
  height:44px;min-height:44px;max-height:44px;
  margin:0 0 3px;padding:2px 10px 2px 4px;gap:8px;
  border-radius:12px;border-width:1.5px;
  box-sizing:border-box;overflow:hidden;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-sy{
  width:36px;height:36px;border-radius:10px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-sy svg{width:32px!important;height:32px!important}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-lbl{
  font-size:9px;letter-spacing:.06em;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-suit{gap:0}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-bid{
  flex-direction:row;flex-wrap:nowrap;align-items:center;gap:0 6px;font-size:16px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-bid b{font-size:17px;color:#FFE58A}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-trbid-bid span{
  display:inline!important;font-size:14px;color:#FFF8E6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Collapsed AND expanded header: one 48px in-flow row. The expanded table is an
   overlay sheet over the felt, so opening it never shrinks the table. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop{overflow:visible;z-index:30}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-shut,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-open{
  position:relative;
  display:flex;flex-direction:row;align-items:center;gap:4px;
  padding:0 4px 0 0;margin:0;
  min-height:48px;height:48px;max-height:48px;
  box-sizing:border-box;overflow:visible;
  border-radius:12px;background:rgba(10,12,18,.88);
  border:1px solid rgba(241,215,122,.4);
}
.pn-shutline{
  flex:1 1 auto;min-width:0;min-height:48px;height:48px;display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:transparent;border:0;color:#F4F6F8;font:700 15px/1.2 inherit;font-family:inherit;
  text-align:left;cursor:pointer;padding:4px 8px;border-radius:10px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto;
}
.pn-shutline > *{pointer-events:none}
.pn-shutline:focus-visible{outline:3px solid #F1D77A;outline-offset:2px}
.pn-shutline .pn-shut-txt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#F4F6F8}
.pn-shutline .pn-shut-txt b{color:#F1D77A;font-size:16px;font-weight:900}
.pn-shutline .pn-shut-txt i{font-style:normal;color:#C0C6CC;padding:0 1px;font-weight:700}
.pn-shutline .pn-car{flex:none;color:#F1D77A;font-size:16px;line-height:1}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog .pn-live-tools{
  margin:0;flex:none;position:relative;z-index:2;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog .pn-last{
  min-height:48px;min-width:44px;height:48px;padding:0 8px;font-size:12px;font-weight:800;
  border-radius:10px;margin:0!important;
}
/* Dropdown score sheet overlays the felt; hidden when collapsed. Also catch a bare table child (older paint). */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-open > table.pn-bt{
  display:none;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-open > table.pn-bt{
  display:block;
  position:absolute;left:0;right:0;top:100%;
  z-index:40;margin:2px 0 0;padding:8px 8px 10px;
  background:rgba(10,12,18,.96);
  border:1px solid rgba(241,215,122,.45);
  border-radius:0 0 14px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  max-height:min(46vh, 280px);overflow:auto;
  pointer-events:auto;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-shut #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop .pn-prog.pn-board.pn-shut > table.pn-bt{
  display:none!important;
}
/* Disabled Last trick is hidden; once a trick exists it is a compact 44px control. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnLast:disabled{display:none!important}

/* Felt messages sit below the north name tag, wrap to 2 lines, stay off the side seats. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #felt > #msg.pn-feltmsg,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #msg.pn-feltmsg{
  position:absolute!important;left:50%;top:72px;transform:translateX(-50%);
  z-index:6;width:max-content;max-width:min(70%, 240px);min-width:0;min-height:0!important;height:auto!important;
  margin:0;padding:5px 12px!important;border-radius:16px;
  background:rgba(14,20,32,.86)!important;color:#F4F6F8!important;
  font-size:15px!important;font-weight:700;line-height:1.25;text-align:center;
  pointer-events:none;display:-webkit-box!important;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  visibility:visible!important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #msg.pn-feltmsg:empty{display:none!important}
/* When the Pass/Bury action sheet is up, keep the message off — the button is enough. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnDock:has(#act:not(:empty)){gap:0}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .pn-dock:empty{display:none}

/* Reclaimed height goes to a much bigger felt and larger played cards. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #felt{
  --tw:clamp(84px, 26vw, 116px)!important;
  flex:1 1 auto!important;
  min-height:200px!important;
  margin:36px 32px 4px!important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tight #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-board-open #felt{
  min-height:140px!important;
}
@media (orientation: portrait) and (max-width: 520px){
  .ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #felt{
    --tw:clamp(84px, 26vw, 116px)!important;
    min-height:200px!important;
    margin:36px 32px 4px!important;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tight #felt{
    min-height:140px!important;
  }
}

/* Tight play-chrome (expanded board on a short visH) must not shrink --tw back to 48. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tight #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tighter #felt{
  --tw:clamp(72px, 22vw, 100px)!important;
}

/* Hide the dock's reserved message row — it lives on the felt now. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .pn-dock > #msg{display:none!important}

/* A little less pad above the hand now that mebar is gone. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .me{margin-top:0!important;padding-top:0}

/* ===== tfPN9i3: bid hit-targets, footer shrink on the table, no felt shrink from the overlay board ===== */

/* Each bid button owns its own hit box. Pass and Open/Bid never overlap. */
.ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock #act .pn-bid .row,
.ct.pn #sGame.pn-docked:not(.pn-desk) #act .pn-bid .row{
  display:flex;flex-wrap:nowrap;gap:8px;isolation:isolate;position:relative;margin:0;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock #act .pn-bid .row .gk-btn,
.ct.pn #sGame.pn-docked:not(.pn-desk) #act .pn-bid .row .gk-btn{
  flex:1 1 0;min-width:0;min-height:48px;position:relative;z-index:1;overflow:hidden;
  touch-action:manipulation;pointer-events:auto;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) .pn-dock #act .pn-bid .row .gk-btn > *,
.ct.pn #sGame.pn-docked:not(.pn-desk) #act .pn-bid .row .gk-btn > *{pointer-events:none}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-dock #act .row .gk-btn,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short .pn-bid .stepper .gk-btn{
  min-height:48px;
}

/* Shrink the 18+ footer on the table screen so the hand sits fully above it,
   including at 360x780 and 412x915 and on a short Chrome visual viewport.
   The line stays visible (layout tests require it) and the text stays in the DOM. */
body.pn:has(#sGame.pn-docked:not(.pn-desk):not([hidden])) .gk-notices{
  flex:none!important;
  font-size:10px!important;
  line-height:1.15!important;
  padding:1px 8px calc(var(--sab, env(safe-area-inset-bottom, 0px)) + 1px)!important;
  min-height:0!important;
  max-height:18px;
  overflow:hidden;
  z-index:8;
}


/* ===== tfPN9i5 (t9257u / t9258u): one compact play row + slim 48px header.
   Trump badge, Bid + bidder, Us · Need · Them, and Last trick share one 48px
   row. The Bid/Meld/Points table is an overlay, collapsed by default.
   Header buttons stay 48px. Desktop is unchanged. The :has() forms apply the
   same merged row when tests inject a shut/open board without .pn-slimtop.
   Layout tests that inject a bare in-flow board (no shut/open) stay stacked. */

/* Slim the title bar to a single 48px row; every control is a 48px target. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .gk-bar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 .gk-bar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 .pn-side > .gk-bar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-short .gk-bar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tight .gk-bar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5.pn-play-tight .gk-bar{
  min-height:48px !important;
  height:48px !important;
  max-height:48px !important;
  padding:0 4px !important;
  margin:0 !important;
  gap:0 2px !important;
  box-sizing:border-box;
  overflow:hidden;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .gk-bar h2,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 .gk-bar h2,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 .pn-side > .gk-bar h2{
  font-size:15px !important;
  line-height:1.15 !important;
  padding:0 4px !important;
  margin:0 !important;
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .gk-bar .gk-btn.icon,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 .gk-bar #gBack,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 .gk-bar .gk-btn.icon,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 .gk-bar #gBack,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 .pn-side > .gk-bar .gk-btn.icon,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tight .gk-bar .gk-btn.icon,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5.pn-play-tight .gk-bar .gk-btn.icon{
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  box-sizing:border-box;
  flex:none;
}

.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut),
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open),
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut),
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open){
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center;
  gap:4px;
  width:100% !important;
  min-height:48px;
  height:48px !important;
  max-height:48px !important;
  margin:0;
  padding:0 4px;
  box-sizing:border-box;
  overflow:visible;
  position:relative;
  z-index:30;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnDock,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnDock,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnScore,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnScore,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnDrop,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnDrop{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  flex:none;
  width:auto;
  order:0;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid{
  flex:0 1 auto;
  order:1;
  min-width:0;
  max-width:52%;
  width:auto;
  overflow:hidden;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:0 !important;
  padding:2px 6px 2px 2px !important;
  gap:4px !important;
  border-radius:12px !important;
  border-width:1.5px;
  box-sizing:border-box;
  overflow:hidden;
  cursor:pointer;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit{
  flex-direction:column;
  gap:0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy{
  width:36px !important;
  height:36px !important;
  border-radius:9px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy svg,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy svg,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy svg{
  width:36px !important;
  height:36px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl{
  font-size:8px !important;
  letter-spacing:.06em;
  line-height:1;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid{
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:0 5px !important;
  font-size:16px !important;
  min-width:0;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid b,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid b,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid b{
  font-size:17px !important;
  color:#FFE58A;
  font-weight:900;
  white-space:nowrap;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid i,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid i,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid i{
  display:inline !important;
  padding:0 2px;
  font-style:normal;
  color:#C0C6CC;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid span,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid span{
  display:inline !important;
  font-size:13px !important;
  color:#FFF8E6;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-shut,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-shut,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog.pn-board.pn-shut,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog.pn-board.pn-shut,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open{
  flex:1 1 0% !important;
  order:2;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  margin-left:0 !important;
  position:relative;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:2px;
  padding:0 2px 0 0 !important;
  margin:0 !important;
  min-height:48px !important;
  height:48px !important;
  max-height:48px !important;
  box-sizing:border-box;
  overflow:visible;
  border-radius:12px;
  background:rgba(10,12,18,.88);
  border:1px solid rgba(241,215,122,.4);
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-shutline,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-shutline{
  min-height:48px;
  height:48px;
  padding:4px 6px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline .pn-shut-txt,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline .pn-shut-txt,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-shutline .pn-shut-txt,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-shutline .pn-shut-txt{
  font-size:14px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline .pn-shut-txt b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline .pn-shut-txt b,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-shutline .pn-shut-txt b,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-shutline .pn-shut-txt b{
  font-size:16px;
  color:#F1D77A;
  font-weight:900;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog .pn-last,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog .pn-last,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog .pn-last,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog .pn-last,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) #pnLast{
  min-height:48px !important;
  height:48px !important;
  min-width:48px !important;
  padding:0 8px !important;
  font-size:12px !important;
  font-weight:800;
  border-radius:10px;
  margin:0 !important;
  box-sizing:border-box;
}

.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open #pnBtSheet{
  display:block;
  position:absolute;
  left:0; right:0; top:100%;
  z-index:40;
  margin:2px 0 0;
  padding:8px 8px 10px;
  background:rgba(10,12,18,.96);
  border:1px solid rgba(241,215,122,.45);
  border-radius:0 0 14px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  max-height:min(46vh, 280px);
  overflow:auto;
  pointer-events:auto;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-shut #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-shut #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog.pn-board.pn-shut #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog.pn-board.pn-shut #pnBtSheet{
  display:none !important;
}

.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 .pn-side{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop.pn-slimtop,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut),
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open){
  width:100%;
}

.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-play-tight .gk-bar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5.pn-play-tight .gk-bar{
  min-height:48px !important;
  height:48px !important;
}

/* ===== tfPN9i5 (t9259u): Settings rows must grow with their text.
   The kit min-height:48/56px on a column-flex card (max-height 100%) replaced
   the implicit min-height:auto, so long labels and <small> descriptions
   shrank and painted over the next row (Reduce motion / Pause after each
   robot move / Confirm before playing a card). Label+description stack on
   the left; the 48px toggle stays vertically centered on the right. The
   sheet scrolls. Descriptions stay visible even under 720px height. ===== */
body.pn #shSet .gk-card{
  display:flex;
  flex-direction:column;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:hidden;
  overscroll-behavior:contain;
}
body.pn #shSet .gk-set{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  flex-shrink:0;
  min-height:48px;
  height:auto !important;
  max-height:none;
  overflow:visible;
  position:relative;
  padding:8px 0;
  box-sizing:border-box;
}
body.pn #shSet .gk-set > span,
body.pn #shSet .gk-set > label{
  flex:1 1 auto;
  min-width:0;
  display:block;
  white-space:normal;
  overflow:visible;
  line-height:1.25;
}
body.pn #shSet .gk-set small{
  display:block !important;
  font-size:15px;
  line-height:1.25;
  margin-top:2px;
  color:#cdbfa3;
  white-space:normal;
  overflow:visible;
}
body.pn #shSet .gk-set .gk-sw,
body.pn #shSet .gk-set .gk-seg{
  flex:none;
  align-self:center;
}
body.pn #shSet .gk-set .gk-sw{
  min-width:48px;
  min-height:48px;
}
body.pn #shSet .gk-set.vol{
  flex-wrap:nowrap;
  align-items:center;
}
@media (max-height:720px){
  body.pn #shSet .gk-set small{display:block !important}
}

/* Last trick belongs in the slim play row, not in the dock over the partner seat. */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop ~ #pnDock > #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) ~ #pnDock > #pnLast,
.ct.pn #sGame.pn-i5 #pnDock > #pnLast,
.ct.pn #sGame.pn-i2 #pnDock > #pnLast{
  display:none !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-live-tools,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-live-tools{
  flex:none;
  display:flex;
  flex-wrap:nowrap !important;
  align-items:center;
  position:static !important;
  margin:0 !important;
  height:48px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog #pnLast{
  position:static !important;
  align-self:center;
  max-height:48px !important;
  overflow:hidden;
}
/* Hide a dock copy even when #pnDock is a child of #pnTop (not a sibling). */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop #pnDock #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop #pnDock #pnLast,
.ct.pn #sGame.pn-i5 #pnDock #pnLast,
.ct.pn #sGame.pn-i2 #pnDock #pnLast{
  display:none !important;
}

/* t9470u: Done is a reserved footer; no extra bottom gap on the last row. */
body.pn #shSet .gk-card > .row:last-child{
  flex:none;
  margin-top:8px;
}

.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span{
  max-width:6.5em;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid{
  max-width:48%;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span{
  display:none !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnLast{
  padding:0 6px !important;
  font-size:11px !important;
}

/* tfPN9i5 land: keep the 48px slim row readable and let the score sheet drop. */
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-side:has(#pnTop.pn-slimtop),
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-side:has(.pn-prog.pn-board){
  overflow:visible !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid{
  max-width:38% !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid i{
  display:none !important;
  max-width:0 !important;
  width:0 !important;
  overflow:hidden !important;
  font-size:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog{
  flex:1 1 0% !important;
  min-width:0 !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open #pnBtSheet{
  z-index:50;
  min-width:0;
  width:100%;
  max-width:100%;
  left:0;
  right:0;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shutline{
  min-width:0 !important;
  overflow:hidden;
  flex:1 1 auto !important;
  max-width:100%;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-live-tools{
  flex:0 1 auto;
  min-width:48px;
  margin-left:4px;
  overflow:hidden;
  z-index:2;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shut-txt,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shut-txt{
  min-width:4.5em;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* tfPN9i5 land: the side column is ~245px — Bid, Us/Need and Last trick
   cannot stay readable on one 48px row. Stack two 48px rows: trump/bid,
   then Us/Need + Last trick. The score sheet drops from the second row. */
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut),
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open){
  flex-wrap:wrap !important;
  height:auto !important;
  max-height:none !important;
  min-height:48px;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog{
  flex:1 0 100% !important;
  max-width:100% !important;
  width:100% !important;
  min-width:0 !important;
  height:48px !important;
}

.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shutline{
  max-width:calc(100% - 92px) !important;
  padding-right:8px;
  overflow:hidden !important;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnLast{
  flex:0 0 auto !important;
  margin-left:8px !important;
  max-width:none;
  overflow:visible;
}

/* ===== tfPN9i6: Settings breathing row stacks; turn-colour picks share one right column.
   Play row wraps to two compact lines (≤72px) with short bidder names and no ellipses. ===== */
body.pn #shSet .gk-set.tg-str{
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
  overflow:visible;
}
body.pn #shSet .gk-set.tg-str > span{
  flex:0 0 auto;
  width:100%;
  min-width:0;
  display:block;
  white-space:normal;
  overflow:visible;
  line-height:1.25;
}
body.pn #shSet .gk-set.tg-str .gk-seg{
  flex:0 0 auto;
  align-self:stretch;
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
}
body.pn #shSet .gk-set.tg-str .gk-seg button{
  flex:1 1 0;
  min-width:0;
  overflow:visible;
  white-space:nowrap;
  text-overflow:clip;
  font-size:16px;
}
body.pn #shSet .gk-set.tg-str input[type=range],
body.pn #shSet .gk-set.tg-str .gk-vol{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
  align-self:stretch;
  box-sizing:border-box;
}
body.pn #shSet .gk-set:has(.tg-pick){
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
}
body.pn #shSet .tg-pick{
  display:flex;
  flex:0 0 12.25rem;
  width:12.25rem;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  box-sizing:border-box;
}
body.pn #shSet .tg-pick select{
  flex:1 1 auto;
  width:8.25rem;
  min-width:0;
  box-sizing:border-box;
}
body.pn #shSet .tg-sw{flex:none}

/* ===== tfPN9i7: turn-colour dot+dropdowns share one right-aligned column;
   Breathing strength range thumb must travel with the value (i6 visual fails). ===== */
body.pn #shSet .tg-set{
  display:block;
  width:100%;
  box-sizing:border-box;
}
body.pn #shSet .gk-set:has(.tg-pick){
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) 12.25rem;
  align-items:center;
  justify-content:stretch;
  column-gap:12px;
  width:100%;
  box-sizing:border-box;
}
body.pn #shSet .gk-set:has(.tg-pick) > label{
  grid-column:1;
  flex:unset;
  min-width:0;
  width:auto;
  max-width:none;
}
body.pn #shSet .tg-pick{
  grid-column:2;
  display:flex !important;
  flex:0 0 12.25rem;
  width:12.25rem !important;
  min-width:12.25rem !important;
  max-width:12.25rem !important;
  justify-self:end;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  box-sizing:border-box;
}
body.pn #shSet .tg-pick select{
  flex:0 0 8.25rem;
  width:8.25rem !important;
  min-width:0 !important;
  max-width:8.25rem !important;
  box-sizing:border-box;
}
body.pn #shSet .tg-sw{flex:none}
body.pn #shSet .gk-set.tg-str input[type=range],
body.pn #shSet .gk-set.tg-str .gk-vol{
  flex:0 0 auto;
  display:block;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  align-self:stretch;
  box-sizing:border-box;
  height:48px;
}

/* 2-line slim play row, ≤72px, Last trick on the right (48px target). */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut),
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open),
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut),
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open){
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 36px 36px;
  align-items:center;
  justify-content:stretch;
  column-gap:6px;
  row-gap:0;
  width:100% !important;
  min-height:72px !important;
  height:72px !important;
  max-height:72px !important;
  overflow:visible !important;
  position:relative;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid{
  grid-column:1;
  grid-row:1;
  max-width:none !important;
  width:auto !important;
  min-width:0;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  overflow:visible !important;
  padding:0 6px 0 2px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy{
  width:32px !important;
  height:32px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy svg{
  width:32px !important;
  height:32px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid{
  flex-wrap:nowrap !important;
  min-width:0;
  overflow:visible !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid b,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid b{
  font-size:16px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid i{
  display:inline !important;
  max-width:none !important;
  width:auto !important;
  font-size:13px !important;
  overflow:visible !important;
  text-overflow:unset !important;
  white-space:nowrap;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog{
  grid-column:1;
  grid-row:2;
  flex:none !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  position:static !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shutline{
  min-height:36px !important;
  height:36px !important;
  max-width:none !important;
  overflow:visible !important;
  padding:0 4px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shut-txt,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shut-txt,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shut-txt{
  font-size:13px !important;
  min-width:0;
  overflow:visible !important;
  text-overflow:unset !important;
  white-space:nowrap;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-live-tools{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:end;
  flex:none !important;
  margin:0 !important;
  height:48px;
  position:static !important;
  overflow:visible;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnLast{
  height:48px !important;
  min-height:48px !important;
  min-width:48px !important;
  margin:0 !important;
  position:static !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open #pnBtSheet{
  position:absolute;
  left:4px;
  right:4px;
  top:100%;
  width:auto;
  min-width:0;
  max-width:none;
  z-index:50;
  box-sizing:border-box;
}
/* Header title must fit without an ellipsis on phone widths. */
.ct.pn #sGame.pn-docked:not(.pn-desk) .gk-bar h2,
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-side > .gk-bar h2{
  font-size:13px !important;
  letter-spacing:0 !important;
  overflow:visible !important;
  text-overflow:unset !important;
  white-space:nowrap;
}

/* tfPN9i6 tighten: children stay inside the 72px grid; land bidder stays visible; title fits. */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board),
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board){
  box-sizing:border-box !important;
  padding:0 4px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline{
  box-sizing:border-box !important;
  margin:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop.pn-slimtop .pn-trbid-bid span{
  display:inline !important;
  max-width:none !important;
  width:auto !important;
  font-size:12px !important;
  overflow:visible !important;
  text-overflow:unset !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shut-txt{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  font-size:12px !important;
  overflow:visible !important;
  text-overflow:unset !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnDock,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnScore,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnDrop,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnScore,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop #pnDrop{
  position:absolute !important;
  left:0;
  right:0;
  top:100%;
  grid-column:1 / -1;
  grid-row:3;
  width:auto !important;
  flex:none !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) .gk-bar h2,
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-side > .gk-bar h2{
  font-size:12px !important;
  letter-spacing:0 !important;
  padding:0 4px !important;
  margin:0 !important;
  overflow:visible !important;
  text-overflow:unset !important;
  white-space:nowrap;
  flex:1 1 0;
  min-width:0;
}

/* tfPN9i6 fit: title wraps instead of overflowing; land badge is in the grid
   (it was still position:absolute from the felt-chip rule); Last trick is a
   48px square; Us/Need uses a smaller label so the 2-line row stays ≤72px. */
.ct.pn #sGame.pn-docked:not(.pn-desk) .gk-bar h2,
.ct.pn #sGame.pn-land:not(.pn-desk) .pn-side > .gk-bar h2{
  font-size:12px !important;
  letter-spacing:0 !important;
  padding:0 2px !important;
  margin:0 !important;
  line-height:1.15 !important;
  text-align:center;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  flex:1 1 0;
  min-width:0;
  max-width:100%;
  hyphens:manual;
  word-break:normal;
}

/* Give the landscape side column enough width for Bid + You+Pinky + Us/Need + Last. */
.ct.pn #sGame.pn-land{
  grid-template-columns:minmax(0,1fr) clamp(230px,30vw,280px) !important;
}

.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  max-width:none !important;
  width:auto !important;
  min-width:0 !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:0 6px 0 2px !important;
  gap:4px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  grid-column:1;
  grid-row:1;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-lbl{
  display:none !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-suit,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-suit{
  flex-direction:row !important;
  gap:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy svg{
  width:28px !important;
  height:28px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid{
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:0 3px !important;
  min-width:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid b{
  font-size:13px !important;
  white-space:nowrap !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop.pn-slimtop .pn-trbid-bid span{
  display:inline !important;
  max-width:none !important;
  width:auto !important;
  font-size:11px !important;
  overflow:visible !important;
  text-overflow:unset !important;
  white-space:nowrap !important;
  padding:0 1px !important;
}

.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-live-tools,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-live-tools{
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) #pnLast{
  width:48px !important;
  max-width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 2px !important;
  font-size:10px !important;
  line-height:1.15 !important;
  white-space:normal !important;
  text-align:center;
  box-sizing:border-box !important;
}

.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shutline{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shut-txt,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shut-txt{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  font-size:11px !important;
  letter-spacing:0 !important;
  overflow:visible !important;
  text-overflow:unset !important;
  white-space:nowrap !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-shut-txt b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-shut-txt b{
  font-size:12px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-car,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-car{
  flex:none;
  width:10px;
  min-width:10px;
}

/* tfPN9i6 land typography: keep the TRUMP label readable under a compact
   suit, and shrink Bid/bidder just enough that 780-wide landscape does not
   clip "Bid 28 · You+Pinky". */
.ct.pn #sGame.pn-land{
  grid-template-columns:minmax(0,1fr) clamp(246px,32vw,286px) !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid{
  padding:0 4px 0 2px !important;
  gap:3px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-suit,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-suit{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-lbl{
  display:block !important;
  font-size:7px !important;
  letter-spacing:.04em;
  line-height:1;
  color:#F1D77A;
  text-transform:uppercase;
  font-weight:900;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy svg{
  width:22px !important;
  height:22px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid b,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid b{
  font-size:12px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid span,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid i,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop.pn-slimtop .pn-trbid-bid span{
  font-size:10px !important;
}

/* tfPN9i6 portrait fit vs existing suites: 36px trump suit in a 40px first
   row, Us/Need on a 32px second row (still 72px total). TRUMP sits beside
   the suit so the pill does not overflow onto the score line. Beats the
   older .pn-play-tight / .pn-short padding that stacked the two rows. */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop.pn-slimtop{
  grid-template-rows: 40px 32px !important;
  min-height:72px !important;
  height:72px !important;
  max-height:72px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop > .pn-trbid{
  grid-row:1;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  padding:0 6px 0 2px !important;
  gap:4px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  align-items:center !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-suit{
  flex-direction:row !important;
  align-items:center !important;
  gap:3px !important;
  height:36px !important;
  max-height:36px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop .pn-trbid-sy svg{
  width:36px !important;
  height:36px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl{
  display:block !important;
  font-size:8px !important;
  letter-spacing:.05em;
  line-height:1;
  margin:0;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-shutline,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop .pn-shutline{
  grid-row:2;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

/* tfPN9i6: same 40+32 grid and 36px suit even without .pn-slimtop (layout
   fixtures) and when .pn-play-tight is on (visH 640). The badge must not
   be taller than row 1 or it overlaps Us/Need. */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board),
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board),
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board),
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 40px 32px !important;
  min-height:72px !important;
  height:72px !important;
  max-height:72px !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop > .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop .pn-trbid{
  grid-column:1 !important;
  grid-row:1 !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  padding:0 6px 0 2px !important;
  gap:4px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  align-items:center !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  max-width:none !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy svg,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop .pn-trbid-sy svg{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-suit{
  flex-direction:row !important;
  align-items:center !important;
  gap:3px !important;
  height:36px !important;
  max-height:36px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-trbid-lbl{
  display:block !important;
  font-size:8px !important;
  letter-spacing:.05em;
  line-height:1;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-shutline,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-prog{
  grid-column:1 !important;
  grid-row:2 !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  position:static !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop .pn-live-tools{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
}

/* tfPN9i6: beat the i5 :has(.pn-board.pn-shut) 48px height (higher
   :has() specificity) so the 40+32 grid rows do not overlap. */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid{
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog.pn-board.pn-shut,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog.pn-board.pn-open,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-prog{
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}


/* tfPN9i7b: TRUMP sits on its own line above Bid, to the right of the 36px
   suit, with an 8px column gap. That stops the 8px label from sitting flush
   against the spade. These selectors match the i6 :has(.pn-board.pn-shut/open)
   + .pn-i2/.pn-i5 specificity so the 12px size actually wins. The 40+32 / 72px
   play row and 36px suit stay. Desktop felt badge is unchanged.
   Layout:  [♠] TRUMP
            [  ] Bid 28 · You+Pinky                          */
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop.pn-slimtop .pn-trbid{
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center !important;
  column-gap:8px !important;
  row-gap:0 !important;
  gap:8px 8px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-suit,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-suit,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-suit,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-suit,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-suit,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-suit{
  display:contents !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-sy,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-sy{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:center;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-lbl,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-lbl{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  line-height:1 !important;
  color:#F1D77A !important;
  flex:none;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:unset !important;
  align-self:end;
}
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i5 #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-short #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-vshort #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-play-tight #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid,
.ct.pn #sGame.pn-docked:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid-bid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid-bid{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start;
  min-width:0;
}

/* tfPN9i7b land: 4 extra px so WebKit at 780×360 does not clip "You+Pinky". */
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop.pn-slimtop .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-shut) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk) #pnTop:has(.pn-prog.pn-board.pn-open) .pn-trbid,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i5 #pnTop.pn-slimtop .pn-trbid{
  padding-right:2px !important;
  column-gap:6px !important;
  gap:6px 6px !important;
}

/* ========================================================================
   tfPN9i8 (t9300u / t9305u): one score chart in a single box; Last trick
   beside it; own avatar + nameplate at bottom center with the hand fanned
   just above; no second trump/bid box and no expand-arrow strip.
   ======================================================================== */

/* ----- One chart box + Last trick beside it ----- */
.ct.pn #sGame.pn-i8 #pnTrumpBid,
.ct.pn #sGame.pn-i8 #pnScore,
.ct.pn #sGame.pn-i8 #pnBoardTog,
.ct.pn #sGame.pn-i8 #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTrumpBid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnScore,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnBoardTog{
  display:none !important;
}
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTop.pn-haschart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart,
.ct.pn #sGame.pn-desk.pn-i8 #pnTop.pn-haschart{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap;
  align-items:stretch !important;
  gap:6px;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 0 4px !important;
  grid-template-rows:none !important;
  grid-template-columns:none !important;
}
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTop .pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-desk.pn-i8 #pnTop .pn-prog.pn-chart{
  flex:1 1 auto;
  min-width:0;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:5px 6px 6px !important;
  display:block !important;
  position:relative !important;
  inset:auto !important;
  overflow:visible !important;
  box-sizing:border-box;
  background:rgba(10,14,22,.96) !important;
  border:1.5px solid rgba(212,175,55,.78) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,229,138,.14), 0 2px 10px rgba(0,0,0,.4);
  color:#F4F6F8;
}
.ct.pn #sGame.pn-i8 #pnChartTools,
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart .pn-chart-tools{
  flex:0 0 auto;
  display:flex !important;
  align-items:stretch;
  align-self:stretch;
  margin:0 !important;
  position:static !important;
}
.ct.pn #sGame.pn-i8 #pnChartTools .pn-last,
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart #pnLast{
  display:flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:auto !important;
  min-height:48px !important;
  min-width:58px;
  max-width:76px;
  margin:0 !important;
  padding:6px 8px !important;
  font-size:12px !important;
  font-weight:800;
  line-height:1.15;
  white-space:normal;
  color:#1A1408 !important;
  background:linear-gradient(180deg,#FFE58A,#E2B23E) !important;
  border:1px solid #C9A24A !important;
  border-radius:12px !important;
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.ct.pn #sGame.pn-i8 #pnChartTools .pn-last[disabled]{
  display:none !important;
}

/* The chart table itself. */
.ct.pn #sGame.pn-i8 .pn-chart-tb{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-family:system-ui, "Segoe UI", sans-serif;
  font-size:12px;
  line-height:1.15;
  color:#F4F6F8;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th{
  font-size:12px !important;
  font-weight:800;
  letter-spacing:.04em;
  color:#F1D77A;
  text-align:right;
  padding:1px 4px 4px;
  border-bottom:1px solid rgba(212,175,55,.4);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  vertical-align:bottom;
  background:transparent !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th.side,
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(2){ /* TRUMP */
  text-align:center;
  padding-left:2px;
  padding-right:2px;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody th{
  font-size:12px !important;
  font-weight:800;
  color:#F4F6F8;
  text-align:left;
  padding:3px 6px 3px 4px;
  white-space:nowrap;
  vertical-align:middle;
  border-right:1px solid rgba(212,175,55,.28);
  background:transparent !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb td{
  font-size:12px !important;
  padding:3px 5px;
  text-align:right;
  vertical-align:middle;
  border-right:1px solid rgba(212,175,55,.22);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:#F1D77A;
  font-weight:800;
  background:transparent !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb td:last-child,
.ct.pn #sGame.pn-i8 .pn-chart-tb th:last-child{border-right:0}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.trump{
  text-align:center;
  vertical-align:middle;
  padding:2px;
  border-right:1px solid rgba(212,175,55,.4);
}
.ct.pn #sGame.pn-i8 .pn-chart-suit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-suit svg,
.ct.pn #sGame.pn-i8 .pn-chart-suit img{
  width:16px !important;
  height:16px !important;
  display:block;
  filter:none;
}
/* Bidding team's row: subtle gold wash, not a second box. */
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody tr.bid th,
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody tr.bid td{
  background:rgba(241,215,122,.12) !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody tr.bid th{
  box-shadow:inset 3px 0 0 #F1D77A;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.need{
  text-align:right;
  line-height:1.1;
  white-space:nowrap;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.need b{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#F1D77A;
  font-variant-numeric:tabular-nums;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.need small{
  display:block;
  font-size:12px !important;
  font-weight:700;
  letter-spacing:.01em;
  color:#E8E0C0;
  font-style:normal;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.need.made b,
.ct.pn #sGame.pn-i8 .pn-chart-tb td.need.set b{font-size:12px}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.need.na span{color:#C0C6CC;font-weight:700}
.ct.pn #sGame.pn-i8 .pn-chart-tb td.bidv:empty{color:transparent}

/* Column widths: side + trump tighter, numbers even. */
.ct.pn #sGame.pn-i8 .pn-chart-tb th.side,
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody th{width:14%}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-i8 .pn-chart-tb td.trump{width:11%}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(3){width:12%}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(4){width:13%}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(5){width:16%}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(6){width:18%}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(7){width:16%}

/* Desktop: a little more room, same one-box chart. */
@media (min-width:1024px){
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb{font-size:14px}
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb thead th,
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb tbody th,
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb td{font-size:14px !important;padding:6px 8px}
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb td.need b{font-size:16px}
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb td.need small{font-size:12px !important}
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-suit,
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-suit svg,
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-suit img{width:22px !important;height:22px !important}
  .ct.pn #sGame.pn-desk.pn-i8 #pnChartTools .pn-last{min-width:88px;max-width:120px;font-size:14px !important;padding:8px 12px !important}
}

/* Landscape phone: chart lives in the side column; keep it compact, one box. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart{
  flex-wrap:wrap;
  gap:4px;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnChartTools{
  flex:0 0 auto;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnChartTools .pn-last{
  min-width:52px;max-width:64px;min-height:44px !important;font-size:12px !important;
}

/* ----- Own avatar + name at bottom center; hand fanned directly above ----- */
.ct.pn #sGame.pn-i8 .me,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 .me,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i8 .me,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 .me,
.ct.pn #sGame.pn-desk.pn-i8 .me{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  margin:0 !important;
  margin-top:0 !important;
  padding:0 4px 2px !important;
  padding-left:4px !important;
  position:relative !important;
  grid-template-columns:none !important;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-i8 .me #hand,
.ct.pn #sGame.pn-i8 .me .hand,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #hand,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 .me .hand,
.ct.pn #sGame.pn-desk.pn-i8 .me .hand{
  order:1;
  width:100%;
  margin:0 !important;
  position:relative;
}
.ct.pn #sGame.pn-i8 #mebar,
.ct.pn #sGame.pn-i8 .mebar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 .mebar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 .mebar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 .mebar,
.ct.pn #sGame.pn-desk.pn-i8 .mebar{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  order:2;
  position:static !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 auto 2px !important;
  padding:3px 12px 3px 3px !important;
  gap:8px !important;
  border-radius:999px !important;
  background:rgba(14,20,32,.94) !important;
  border:1.5px solid #D4AF37 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,229,138,.16);
  z-index:10;
  pointer-events:auto;
}
/* Avatar + name only — never the rejected You/Meld/Bid/tricks chips. */
.ct.pn #sGame.pn-i8 #mebar .chip,
.ct.pn #sGame.pn-i8 #mebar .tag,
.ct.pn #sGame.pn-i8 #mebar .pn-tk,
.ct.pn #sGame.pn-i8 #mebar .bubble,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar .chip,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar .tag,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar .pn-tk{
  display:none !important;
}
.ct.pn #sGame.pn-i8 #mebar .av,
.ct.pn #sGame.pn-i8 #mebar .avw,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar .av,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar .avw{
  width:40px !important;
  height:40px !important;
  flex:0 0 auto;
  border-radius:50% !important;
  object-fit:cover;
  border:2px solid #D4AF37 !important;
  background:#1A1F2B !important;
  display:block !important;
}
.ct.pn #sGame.pn-i8 #mebar .nm,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #mebar .nm{
  display:block !important;
  font-size:15px !important;
  font-weight:800;
  color:#F4F6F8 !important;
  line-height:1.2;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
/* Compact on short landscape phones so the felt and cards stay big. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #mebar .av,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #mebar .avw{
  width:28px !important;
  height:28px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #mebar{
  padding:2px 10px 2px 2px !important;
  gap:6px !important;
  margin-bottom:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #mebar .nm{font-size:13px !important}
.ct.pn #sGame.pn-desk.pn-i8 #mebar .av,
.ct.pn #sGame.pn-desk.pn-i8 #mebar .avw{
  width:56px !important;
  height:56px !important;
}
.ct.pn #sGame.pn-desk.pn-i8 #mebar .nm{font-size:18px !important}
.ct.pn #sGame.pn-desk.pn-i8 #mebar{padding:4px 16px 4px 4px !important;gap:10px !important}

/* Don't let older land/desk padding shove the hand sideways off the avatar. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 .me,
.ct.pn #sGame.pn-desk.pn-i8 .me{
  padding-left:4px !important;
}


/* ----- tfPN9i8 fit: definite flex width so % columns don't explode to 1e6px ----- */
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTop .pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-desk.pn-i8 #pnTop .pn-prog.pn-chart{
  flex:1 1 0% !important;
  min-width:0 !important;
  width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb{
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th{
  letter-spacing:.015em;
  overflow:visible;
  text-overflow:clip;
}
/* Disabled Last trick stays hidden — beat display:flex !important on #pnLast. */
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart #pnLast[disabled],
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart #pnLast:disabled,
.ct.pn #sGame.pn-i8 #pnChartTools .pn-last[disabled],
.ct.pn #sGame.pn-i8 #pnChartTools .pn-last:disabled,
.ct.pn #sGame.pn-i8 #pnChartTools .pn-last[hidden],
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart #pnLast[hidden]{
  display:none !important;
}
/* Landscape: keep Last trick on the same row as the chart when it fits. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart{
  flex-wrap:nowrap;
  width:100%;
}


/* ----- tfPN9i8: headers must not collide (AH is a wide face). Auto columns
   follow the words TRUMP / BID / MELD / POINTS / NEED / SCORE; Last trick
   shrinks a little on a 360-wide phone; landscape parks Last under the chart
   so the side column can show every heading. ----- */
.ct.pn #sGame.pn-i8 .pn-chart-tb{
  table-layout:auto !important;
  width:100% !important;
  max-width:100% !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb th.side,
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th,
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(3),
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(4),
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(5),
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(6),
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(7),
.ct.pn #sGame.pn-i8 .pn-chart-tb td.trump{width:auto !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th{
  letter-spacing:0 !important;
  padding:1px 3px 3px !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font-size:12px !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody th{padding:3px 5px 3px 3px !important;min-width:2.4em}
.ct.pn #sGame.pn-i8 .pn-chart-tb td{padding:3px 3px !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(2){min-width:4.6em;padding-left:2px !important;padding-right:2px !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(5){min-width:4.5em} /* POINTS */
.ct.pn #sGame.pn-i8 .pn-chart-tb td.trump{min-width:2.2em}
.ct.pn #sGame.pn-i8 #pnChartTools .pn-last,
.ct.pn #sGame.pn-i8 #pnTop.pn-haschart #pnLast{
  min-width:48px;
  max-width:58px;
  padding:5px 6px !important;
}
@media (max-width:370px){
  .ct.pn #sGame.pn-i8 #pnChartTools .pn-last,
  .ct.pn #sGame.pn-i8 #pnTop.pn-haschart #pnLast{min-width:46px;max-width:52px;padding:4px 5px !important}
}
/* Landscape phone: Last trick under the chart so headings stay intact. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart{
  flex-wrap:wrap !important;
  gap:4px;
  width:100%;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart .pn-prog.pn-chart{
  flex:1 1 100% !important;
  width:100% !important;
  max-width:100% !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnChartTools{
  flex:1 0 auto;
  justify-content:flex-end;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnChartTools .pn-last{
  min-width:64px;max-width:88px;min-height:40px !important;
}
/* Desktop: keep comfortable even columns, 14px already set. */
@media (min-width:1024px){
  .ct.pn #sGame.pn-desk.pn-i8 .pn-chart-tb thead th{padding:6px 8px !important;letter-spacing:.03em !important;font-size:14px !important}
  .ct.pn #sGame.pn-desk.pn-i8 #pnChartTools .pn-last{min-width:88px;max-width:120px;padding:8px 12px !important}
}


/* ----- tfPN9i8: complete readable chart. On the phone the chart takes the
   full top row (Last trick just under, right-aligned) so TRUMP…SCORE all fit
   in Atkinson 12px. Landscape side column is widened to the same end.
   Desktop stays Last-trick-beside, which already had room. ----- */
.ct.pn #sGame.pn-i8 .pn-chart-tb{
  table-layout:fixed !important;
  width:100% !important;
  max-width:100% !important;
}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th,
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-i8 .pn-chart-tb td,
.ct.pn #sGame.pn-i8 .pn-chart-tb td.trump{min-width:0 !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb th.side,
.ct.pn #sGame.pn-i8 .pn-chart-tb tbody th{width:13% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-i8 .pn-chart-tb td.trump{width:14% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(3){width:10% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(4){width:12% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(5){width:16% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(6){width:18% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th:nth-child(7){width:17% !important}
.ct.pn #sGame.pn-i8 .pn-chart-tb thead th{
  padding:2px 3px 4px !important;
  letter-spacing:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i8 #pnTop.pn-haschart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart{
  flex-wrap:wrap !important;
  gap:4px;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i8 #pnTop.pn-haschart .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8 #pnTop .pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnTop.pn-haschart .pn-prog.pn-chart{
  flex:1 1 100% !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i8 #pnChartTools,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnChartTools{
  flex:1 0 auto;
  justify-content:flex-end;
  align-self:auto;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i8 #pnChartTools .pn-last,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8 #pnChartTools .pn-last{
  min-width:72px;
  max-width:110px;
  min-height:48px !important;
  padding:6px 10px !important;
}
/* Landscape: give the side column enough width for a complete 12px chart. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i8{
  grid-template-columns:minmax(0,1fr) clamp(300px,42vw,360px) !important;
}


/* ========================================================================
   tfPN9i9 (t9316u / t9132u): bold high-contrast trump badge; desktop table
   has real height and 60–65% card scale; partner name sits under the
   avatar with no overlap; Last trick is vertically centered on the desk
   chart; NEED number+label is one centered unit. Column logic is i8's.
   ======================================================================== */

/* ----- Trump badge: large glyph + suit name, gold-edged tile ----- */
/* Colors chosen to clear WCAG 4.5:1. #E53935 on cream is only 3.99:1, so
   red suits use #C62828 (#e53935-ish, slightly darker) on #FFF8E6 (5.31:1).
   Black suits: ivory #FFF8E6 on olive #2A3320 (12.44:1). Name on cream is
   #3A3220 (11.96:1). */
.ct.pn #sGame.pn-i9 .pn-chart-tb td.trump{
  width:17% !important;
  padding:4px 3px !important;
  vertical-align:middle !important;
  text-align:center !important;
  background:transparent !important;
}
.ct.pn #sGame.pn-i9 .pn-trump-badge{
  --pn-trump-glyph:#FFF8E6;
  --pn-trump-tile:#2A3320;
  --pn-trump-name:#FFF8E6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:100%;
  height:100%;
  min-height:3.2em;
  box-sizing:border-box;
  padding:5px 3px 4px;
  border-radius:10px;
  border:1.5px solid #D4AF37;
  background:var(--pn-trump-tile);
  color:var(--pn-trump-glyph);
  box-shadow:inset 0 1px 0 rgba(255,229,138,.35), 0 1px 3px rgba(0,0,0,.35);
}
.ct.pn #sGame.pn-i9 .pn-trump-badge.is-black{
  --pn-trump-glyph:#FFF8E6;
  --pn-trump-tile:#2A3320;
  --pn-trump-name:#FFF8E6;
}
.ct.pn #sGame.pn-i9 .pn-trump-badge.is-red{
  --pn-trump-glyph:#C62828;
  --pn-trump-tile:#FFF8E6;
  --pn-trump-name:#3A3220;
}
.ct.pn #sGame.pn-i9 .pn-trump-glyph{
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols","DejaVu Sans",Georgia,serif;
  font-size:2em; /* ~2× the 12px row text, fills the rowspan with the name */
  font-weight:800;
  line-height:1;
  color:var(--pn-trump-glyph);
  display:block;
  text-shadow:none;
}
.ct.pn #sGame.pn-i9 .pn-trump-name{
  font-family:system-ui,"Segoe UI",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.1;
  white-space:nowrap;
  color:var(--pn-trump-name);
}
.ct.pn #sGame.pn-i9 .pn-trump-badge.pn-trump-pending{
  --pn-trump-glyph:#FFF8E6;
  --pn-trump-tile:#2A3320;
  --pn-trump-name:#FFF8E6;
  min-height:3.2em;
}
.ct.pn #sGame.pn-i9 .pn-trump-pending-lbl{
  font-family:system-ui,"Segoe UI",sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.15;
  color:#FFF8E6;
}
@media (min-width:1024px){
  .ct.pn #sGame.pn-desk.pn-i9 .pn-trump-glyph{font-size:2.15em}
  .ct.pn #sGame.pn-desk.pn-i9 .pn-trump-name{font-size:12px}
  .ct.pn #sGame.pn-desk.pn-i9 .pn-trump-pending-lbl{font-size:15px}
}

/* TRUMP needs room for “Diamonds”; NEED needs room for “to make” (12px, no clip). */
.ct.pn #sGame.pn-i9 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-i9 .pn-chart-tb td.trump{width:16% !important}
.ct.pn #sGame.pn-i9 .pn-chart-tb thead th:nth-child(6){width:20% !important}
.ct.pn #sGame.pn-i9 .pn-chart-tb thead th:nth-child(7){width:16% !important}
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need,
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit,
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit small,
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit b{
  overflow:visible !important;
  text-overflow:clip !important;
  letter-spacing:0 !important;
}
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need{
  padding-left:2px !important;
  padding-right:2px !important;
}

/* ----- NEED: number + label center as a unit ----- */
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need{
  text-align:center !important;
}
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0 auto;
  width:auto;
  max-width:100%;
}
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit b,
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit small,
.ct.pn #sGame.pn-i9 .pn-chart-tb td.need .need-unit span{
  display:block;
  text-align:center;
  width:100%;
}

/* ----- Desktop: Last trick directly beside the chart, vertically centered ----- */
.ct.pn #sGame.pn-desk.pn-i9 #pnTop.pn-haschart{
  align-items:center !important;
  gap:8px !important;
}
.ct.pn #sGame.pn-desk.pn-i9 #pnChartTools,
.ct.pn #sGame.pn-desk.pn-i9 #pnTop.pn-haschart .pn-chart-tools{
  align-items:center !important;
  align-self:center !important;
  flex:0 0 auto;
}
.ct.pn #sGame.pn-desk.pn-i9 #pnChartTools .pn-last,
.ct.pn #sGame.pn-desk.pn-i9 #pnTop.pn-haschart #pnLast{
  align-self:center !important;
  height:auto !important;
}

/* ----- Desktop: felt has real height; hand stays in the bottom area ----- */
.ct.pn #sGame.pn-desk.pn-i9 #felt{
  min-height:max(280px, 42vh) !important;
  height:auto !important;
  flex-grow:1 !important;
  overflow:visible !important;
}

/* ----- Name pills never overlap avatars. Partner (s2) is a column, name below. ----- */
.ct.pn #sGame.pn-i9 #felt .seat{
  gap:6px !important;
}
.ct.pn #sGame.pn-i9 #felt .seat .nm{
  position:static !important;
  margin:0 !important;
  transform:none !important;
}
.ct.pn #sGame.pn-i9 #felt .seat .avw,
.ct.pn #sGame.pn-i9 #felt .seat .av{
  margin:0 !important;
  flex:0 0 auto;
}
.ct.pn #sGame.pn-desk.pn-i9 #felt .seat.s2,
.ct.pn #sGame.pn-docked.pn-i9 #felt .seat.s2,
.ct.pn #sGame.pn-land.pn-i9 #felt .seat.s2{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  padding:4px 8px 6px !important;
  border-radius:18px !important;
  max-width:200px;
  background:rgba(14,20,32,.55);
}
.ct.pn #sGame.pn-desk.pn-i9 #felt .seat.s2{
  top:8px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i9 #felt .seat.s2{
  top:-8px !important;
  background:rgba(14,20,32,.82);
}
.ct.pn #sGame.pn-i9 #felt .seat.s2 .nm{
  order:2;
  padding:2px 8px;
  border-radius:8px;
  background:rgba(14,20,32,.92);
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.ct.pn #sGame.pn-i9 #felt .seat.s2 .avw{order:1}
.ct.pn #sGame.pn-i9 #mebar{
  gap:8px !important;
}
.ct.pn #sGame.pn-i9 #mebar .nm{
  position:static !important;
  margin:0 !important;
}
.ct.pn #sGame.pn-i9 #mebar .av,
.ct.pn #sGame.pn-i9 #mebar .avw{
  margin:0 !important;
  flex:0 0 auto;
}

/* Hand never covers the table, robots, or a dialog. */
.ct.pn #sGame.pn-i9 .me #hand,
.ct.pn #sGame.pn-i9 #hand{
  z-index:9;
}
.ct.pn #sGame.pn-i9 #felt{z-index:6}
.ct.pn #sGame.pn-i9 #act,
.ct.pn #sGame.pn-i9 #felt #act{
  z-index:16 !important;
}

/* ========================================================================
   tfPN9i11 (t9322u): two-column laptop / Mac layout. ONLY when JS sets
   .pn-i11, which is deskWide() AND width >= 1100 (landscape, height >= 560).
   Phones and tablets keep the exact i10 rules — nothing in this block
   applies without .pn-i11.
   LEFT: squared play area (seats, trick, hand + avatar).
   RIGHT 30–35%: bigger i9/i10 scoreboard (upper) + framed official art (lower).
   ======================================================================== */

.ct.pn #sGame.pn-desk.pn-i11{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(330px, 33%) !important; /* 33% is inside 30–35% */
  grid-template-rows:auto minmax(0,1fr) !important;
  grid-template-areas:
    "chrome chrome"
    "play rail" !important;
  gap:8px 18px !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:0;
  overflow:hidden !important;
  box-sizing:border-box;
  padding:0 8px 4px;
}
.ct.pn #sGame.pn-desk.pn-i11 #pnChrome{
  grid-area:chrome;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  min-height:44px;
  z-index:20;
}
.ct.pn #sGame.pn-desk.pn-i11 #pnPlay{
  grid-area:play;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"felt" "me";
  justify-items:center;
  align-items:stretch;
  min-width:0;
  min-height:0;
  overflow:hidden;
  position:relative;
  z-index:6;
}
.ct.pn #sGame.pn-desk.pn-i11 #pnRail{
  grid-area:rail;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  min-height:0;
  overflow:hidden;
  z-index:12;
}

/* Squared felt, centered in the left column, seats around it. */
.ct.pn #sGame.pn-desk.pn-i11 #felt{
  grid-area:felt;
  justify-self:center;
  align-self:center;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  max-width:100%;
  max-height:100%;
  margin:8px auto 0 !important;
  border-width:12px !important;
  overflow:visible !important;
  position:relative;
  flex:none !important;
  /* --tw scales with the square; JS also sets explicit width/height */
  --tw:clamp(72px, 14%, 140px);
  --seat-top: clamp(96px, 18%, 168px);
  --seat-side: clamp(100px, 18%, 180px);
  --seat-bot: 8px;
}
.ct.pn #sGame.pn-desk.pn-i11 .me{
  grid-area:me;
  width:100%;
  max-width:100%;
  margin:0 !important;
  padding:4px 8px 6px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:10px;
  z-index:9;
  justify-self:stretch;
}

/* Bigger scoreboard — same i9/i10 chart, scaled up, easy to read. */
.ct.pn #sGame.pn-desk.pn-i11 #pnTop{
  flex:0 1 auto;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
  min-width:0;
  position:relative;
  background:rgba(14,20,32,.94);
  border:1.5px solid #D4AF37;
  border-radius:16px;
  padding:12px 14px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,229,138,.18);
}
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-score{display:none !important} /* the full chart is the scoreboard */
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-drop{ /* keep dropdown available if used */ }
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart .pn-prog.pn-chart{
  flex:1 1 auto !important;
  width:100% !important;
  max-width:100% !important;
  order:1;
  overflow:visible !important;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{
  width:100%;
  font-size:16px !important;
  line-height:1.25;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th{
  font-size:13px !important;
  letter-spacing:.04em !important;
  padding:6px 5px 8px !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td{
  font-size:16px !important;
  padding:8px 5px !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num b,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.sc,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num{
  font-size:18px !important;
}
/* Large trump badge in the bigger board. Contrast pairs unchanged (already ≥4.5). */
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge{
  min-height:4.6em;
  padding:8px 6px 7px;
  border-radius:12px;
  border-width:2px;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{font-size:2.7em !important}
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-name{font-size:13px !important}
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-pending-lbl{font-size:17px !important}
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.need .need-unit small{font-size:12px !important}
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.need .need-unit b{font-size:18px !important}

/* Last trick right under (or beside) the chart. */
.ct.pn #sGame.pn-desk.pn-i11 #pnChartTools,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart .pn-chart-tools{
  order:2;
  display:flex !important;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  align-self:stretch !important;
  flex:0 0 auto;
  width:100%;
  margin:0;
}
.ct.pn #sGame.pn-desk.pn-i11 #pnChartTools .pn-last,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart #pnLast{
  align-self:center !important;
  min-width:110px;
  min-height:48px !important;
  padding:8px 16px !important;
  font-size:16px !important;
  border-radius:12px;
}

/* 'You' turn status line, under the chart / Last. */
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-dock{
  order:3;
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  margin:0;
  padding:0;
  width:100%;
  flex:0 0 auto;
}
.ct.pn #sGame.pn-desk.pn-i11 #pnTop #msg,
.ct.pn #sGame.pn-desk.pn-i11 #msg{
  position:static !important;
  display:block !important;
  flex:none;
  margin:0;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(10,14,22,.9);
  color:#FFF8E6;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
  height:auto !important;
  visibility:visible !important;
  text-align:left;
  inset:auto !important;
  transform:none !important;
  border:1px solid rgba(212,175,55,.35);
}
.ct.pn #sGame.pn-desk.pn-i11 #pnTop #msg:empty{display:none !important}
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-next{
  min-height:48px;
  font-size:18px;
  min-width:120px;
  align-self:flex-start;
}

/* Framed official art, lower right. Decorative only: aria-hidden, no buttons. */
.ct.pn #sGame.pn-desk.pn-i11 #pnArt,
.ct.pn #sGame.pn-desk.pn-i11 .pn-art{
  flex:1 1 0;
  min-height:120px;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-frame{
  flex:1 1 auto;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
  background:#0b1520;
  border:3px solid #D4AF37;
  border-radius:14px;
  box-shadow:inset 0 0 0 5px #1a1408, 0 6px 20px rgba(0,0,0,.45);
  pointer-events:none;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-frame img{
  display:block;
  height:100%;
  width:50%;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  border:0;
}
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-tommy{object-position:60% bottom}
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-pinky{object-position:40% bottom}

/* Bid / trump / pass stay on the felt (already centered over the play area). */
.ct.pn #sGame.pn-desk.pn-i11 #felt #act,
.ct.pn #sGame.pn-desk.pn-i11 #act{
  z-index:16 !important;
  width:min(640px, 86%) !important;
}

/* Short laptops (1280×720): compact chrome and type so the square and art still fit. */
@media (max-height:760px){
  .ct.pn #sGame.pn-desk.pn-i11 #pnChrome{min-height:40px}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{font-size:15px !important}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td{padding:6px 4px !important;font-size:15px !important}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{font-size:2.3em !important}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge{min-height:3.8em;padding:6px 4px 5px}
  .ct.pn #sGame.pn-desk.pn-i11 #pnTop{padding:8px 10px 10px;gap:8px !important}
  .ct.pn #sGame.pn-desk.pn-i11 #felt{border-width:9px !important;margin:4px auto 0 !important}
}
@media (min-width:1800px){
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{font-size:18px !important}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th{font-size:14px !important}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{font-size:3em !important}
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num b,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.sc,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num{font-size:20px !important}
}

/* Meld, pass, end-of-hand, How to Play, settings: center over the PLAY area, not the art.
   Full-screen dim stays; the card sits in the left column. */
body.pn-i11 .gk-sheet:not([hidden]){
  display:grid !important;
  grid-template-columns:var(--pn-play-left, 0px) minmax(0, var(--pn-play-width, 100%)) 1fr;
  grid-template-rows:minmax(0,1fr);
  align-items:center;
  justify-items:center;
  padding:calc(var(--sat) + 24px) 16px calc(var(--sab) + 24px) !important;
}
body.pn-i11 .gk-sheet .gk-card{
  grid-column:2;
  grid-row:1;
  max-width:calc(var(--pn-play-width, 100%) - 40px) !important;
  width:min(720px, 100%) !important;
  max-height:90% !important;
  z-index:1;
}
body.pn-i11 .gk-sheet::before{grid-column:1 / -1;grid-row:1}
body.pn-i11 #shMeld .gk-card,
body.pn-i11 #shHand .gk-card,
body.pn-i11 #shEnd .gk-card{
  width:min(720px, calc(var(--pn-play-width, 88vw) - 40px)) !important;
}
body.pn-i11 .pn-lastov{
  display:grid !important;
  grid-template-columns:var(--pn-play-left, 0px) minmax(0, var(--pn-play-width, 100%)) 1fr;
  align-items:center;
  justify-items:center;
  padding:16px;
}
body.pn-i11 .pn-lastov .pn-ltbox{
  grid-column:2;
  max-width:calc(var(--pn-play-width, 94vw) - 40px);
}
body.pn-i11 .pn-got{
  /* received-cards panel is already on the table; keep it in the play column */
  left:50%;
}

/* 3-hand: still three seats on the squared felt. */
.ct.pn #sGame.pn-desk.pn-i11.pn3 #felt .seat.s1,
.ct.pn #sGame.pn-desk.pn-i11.pn3 #felt .seat.s3{top:36% !important}

/* ---- tfPN9i11 layout fixes: beat i8 #pnTop.pn-haschart (row + width:0)
        and keep the hand a full-width fan with You underneath. All
        selectors include .pn-desk.pn-i8.pn-i11 so they outrank i8. ---- */

/* Felt: explicit square, beats width:auto !important. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt,
.ct.pn #sGame.pn-desk.pn-i11 #felt{
  width: var(--pn-felt-side, 70%) !important;
  height: var(--pn-felt-side, 70%) !important;
  min-width: var(--pn-felt-side, 220px) !important;
  min-height: var(--pn-felt-side, 220px) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  flex:none !important;
  box-sizing:border-box !important;
  aspect-ratio:1 / 1 !important;
}

/* Seats scale with the square so they don't collide on short laptops. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat .avw,
.ct.pn #sGame.pn-desk.pn-i11 #felt .seat .avw{
  width: clamp(64px, calc(var(--pn-felt-side, 400px) * 0.20), 128px) !important;
  height: clamp(64px, calc(var(--pn-felt-side, 400px) * 0.20), 128px) !important;
  padding: 3px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat .av,
.ct.pn #sGame.pn-desk.pn-i11 #felt .seat .av{
  width: clamp(58px, calc(var(--pn-felt-side, 400px) * 0.18), 118px) !important;
  height: clamp(58px, calc(var(--pn-felt-side, 400px) * 0.18), 118px) !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat,
.ct.pn #sGame.pn-desk.pn-i11 #felt .seat{
  max-width: 36% !important;
  padding: 3px 6px !important;
  gap: 2px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat .nm,
.ct.pn #sGame.pn-desk.pn-i11 #felt .seat .nm{
  font-size: clamp(12px, calc(var(--pn-felt-side, 400px) * 0.04), 18px) !important;
  max-width: 100% !important;
}

/* Scoreboard column: beat i8 flex-direction:row on #pnTop.pn-haschart. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop.pn-haschart,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  position:relative !important;
  background:rgba(14,20,32,.94) !important;
  border:1.5px solid #D4AF37 !important;
  border-radius:16px !important;
  padding:12px 14px 14px !important;
  margin:0 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,229,138,.18);
}

/* Chart fills the rail; beat i8 width:0 !important (that is for a ROW flex). */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop .pn-prog,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop.pn-haschart .pn-prog.pn-chart,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart .pn-prog.pn-chart{
  display:block !important;
  flex:0 0 auto !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  order:1 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  position:relative !important;
  inset:auto !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{
  display:table !important;
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed !important;
  box-sizing:border-box;
}

/* Last trick sits under the chart, inside the framed board. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnChartTools,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop.pn-haschart .pn-chart-tools,
.ct.pn #sGame.pn-desk.pn-i11 #pnChartTools,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart .pn-chart-tools{
  order:2 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-self:stretch !important;
  flex:0 0 auto !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  position:static !important;
  inset:auto !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnChartTools .pn-last,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop.pn-haschart #pnLast,
.ct.pn #sGame.pn-desk.pn-i11 #pnChartTools .pn-last,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart #pnLast{
  position:static !important;
  align-self:center !important;
  min-width:110px !important;
  max-width:none !important;
  min-height:48px !important;
  padding:8px 16px !important;
  font-size:16px !important;
  border-radius:12px !important;
}

/* Turn status ('Your lead') under Last, inside the board — never off-screen. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop .pn-dock,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop .pn-dock{
  order:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:6px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto !important;
  position:static !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop #msg,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop .pn-dock #msg,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #msg,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop #msg,
.ct.pn #sGame.pn-desk.pn-i11 #msg{
  position:static !important;
  display:block !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  flex:none !important;
  margin:0 !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  background:rgba(10,14,22,.9) !important;
  color:#FFF8E6 !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  height:auto !important;
  visibility:visible !important;
  text-align:left !important;
  border:1px solid rgba(212,175,55,.35);
}

/* Hand: full-width fan in the left column, You centered under it.
   Beat the earlier i11 2-col grid and i8 align-items:center shrink. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .me,
.ct.pn #sGame.pn-desk.pn-i11 .me{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  grid-template-columns:none !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:4px 8px 6px !important;
  padding-left:8px !important;
  gap:4px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .me #hand,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .me .hand,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #hand,
.ct.pn #sGame.pn-desk.pn-i11 .me #hand,
.ct.pn #sGame.pn-desk.pn-i11 .me .hand,
.ct.pn #sGame.pn-desk.pn-i11 #hand{
  order:1 !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  align-self:stretch !important;
  flex:0 0 auto !important;
  margin:0 !important;
  position:relative !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #mebar,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .mebar,
.ct.pn #sGame.pn-desk.pn-i11 #mebar,
.ct.pn #sGame.pn-desk.pn-i11 .mebar{
  order:2 !important;
  align-self:center !important;
  position:static !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:auto !important;
  max-width:none !important;
}

/* Art: show both official portraits together, CSS crop/scale only.
   contain + bottom-align so faces and held cards stay visible at every size. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-art-frame,
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-frame{
  align-items:flex-end !important;
  justify-content:center !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-art-frame img,
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-frame img{
  object-fit:contain !important;
  object-position:center bottom !important;
  height:100% !important;
  width:50% !important;
  max-width:50%;
  flex:1 1 50%;
}

.ct.pn #sGame.pn-desk.pn-i11 #pnPlay{overflow:hidden}

/* Art frame hugs the two official portraits (~square each → ~2:1 together)
   and sits at the bottom of the rail, so tall screens don't leave a
   large empty navy area inside the gold frame. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnArt,
.ct.pn #sGame.pn-desk.pn-i11 #pnArt,
.ct.pn #sGame.pn-desk.pn-i11 .pn-art{
  flex:1 1 0 !important;
  min-height:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-art-frame,
.ct.pn #sGame.pn-desk.pn-i11 .pn-art-frame{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:2 / 1;
  max-height:100% !important;
  flex:0 1 auto !important;
  margin-top:auto !important;
  align-items:flex-end !important;
}

/* Side seats drop a little so Pinky's name never covers their rings. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat.s1,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat.s3,
.ct.pn #sGame.pn-desk.pn-i11 #felt .seat.s1,
.ct.pn #sGame.pn-desk.pn-i11 #felt .seat.s3{
  top:54% !important;
}
@media (min-height:900px){
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat.s1,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt .seat.s3,
  .ct.pn #sGame.pn-desk.pn-i11 #felt .seat.s1,
  .ct.pn #sGame.pn-desk.pn-i11 #felt .seat.s3{
    top:50% !important;
  }
}

/* Trump badge stays inside the TRUMP column so "Them"/"Us" never collide. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th{
  width:4.4em !important;
  min-width:4.4em !important;
  padding-right:12px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.trump,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.trump{
  width:22%;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-badge,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge{
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden;
}

/* 3-hand: two opponents (across + left). Hide the unused right seat
   so a blank gold disc never appears. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn3 #felt .seat.s3,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn3 #felt #seat3,
.ct.pn #sGame.pn-desk.pn-i11.pn3 #felt .seat.s3,
.ct.pn #sGame.pn-desk.pn-i11.pn3 #felt #seat3{
  display:none !important;
}

/* "Bidding" and "Diamonds" must fit inside the TRUMP column (beat i9 16%). */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.trump,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.trump{
  width:24% !important;
  min-width:5.2em !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-pending-lbl,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-pending-lbl{
  font-size:13px !important;
  letter-spacing:0.01em !important;
  white-space:normal !important;
  line-height:1.15 !important;
  overflow:visible !important;
  max-width:100%;
}

/* How to Play (native <dialog class="htp-panel">) also sits over the play column. */
body.pn-i11 dialog.htp-panel[open]{
  margin-left: calc(var(--pn-play-left, 0px) + (var(--pn-play-width, 100%) - min(40rem, calc(var(--pn-play-width, 100%) - 32px))) / 2) !important;
  margin-right: auto !important;
  width: min(40rem, calc(var(--pn-play-width, 100%) - 32px)) !important;
  max-width: calc(var(--pn-play-width, 100%) - 32px) !important;
}

/* t9336u: phone TRUMP badge — bigger glyph, smaller label, never clip Diamonds or Bidding at 360–430 */
@media (max-width:430px){
  .ct.pn #sGame.pn-i9 .pn-chart-tb thead th:nth-child(2),
  .ct.pn #sGame.pn-i9 .pn-chart-tb td.trump{
    width:22% !important;
    min-width:4.8em !important;
    max-width:28% !important;
    overflow:visible !important;
    padding:5px 2px !important;
  }
  .ct.pn #sGame.pn-i9 .pn-trump-badge{
    width:100%;
    box-sizing:border-box;
    min-height:4.1em;
    padding:6px 3px 5px;
    overflow:visible !important;
    gap:1px;
  }
  .ct.pn #sGame.pn-i9 .pn-trump-glyph{
    font-size:2.45em !important; /* bigger than the 2em default, ~1.22× */
    line-height:1 !important;
  }
  .ct.pn #sGame.pn-i9 .pn-trump-name{
    font-size:9.5px !important;
    letter-spacing:0 !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    max-width:100%;
    text-align:center;
  }
  .ct.pn #sGame.pn-i9 .pn-trump-pending-lbl{
    font-size:11px !important;
    letter-spacing:0.01em !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-align:center;
    max-width:100%;
  }
  .ct.pn #sGame.pn-i9 .pn-trump-badge.pn-trump-pending{min-height:4.1em}
}

/* t9339u: i11 desk scoreboard — Us/Them clear of trump badge, even headers, slightly larger.
   Desk .pn-i11 only. Phones, 1024, and 844×390 are unchanged. table-layout is fixed, so
   the thead first column (not only tbody th) must carry the label width. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{
  font-size:17px !important;
}
/* Label column wide enough for "Them" + padding; set on thead AND tbody so fixed layout honors it. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb th.side,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:first-child,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb th.side,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:first-child,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th{
  width:6.2em !important;
  min-width:6.2em !important;
  padding-left:12px !important;
  padding-right:14px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-align:left !important;
  letter-spacing:0 !important;
}
/* Trump cell contains the badge; slightly slimmer so it does not run into the labels. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.trump,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.trump{
  width:16% !important;
  min-width:4.4em !important;
  max-width:18% !important;
  overflow:hidden !important;
  padding-left:8px !important;
  padding-right:8px !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-badge,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge{
  max-width:100% !important;
  width:auto !important;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box !important;
  overflow:hidden !important;
  min-height:4.1em;
  padding:6px 6px 5px;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-glyph,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{
  font-size:2.3em !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-name,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-name{
  font-size:12px !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
/* BID / MELD / POINTS / NEED / SCORE — even columns, comfortable header padding. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(n+3),
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(n+3),
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody td:nth-child(n+3),
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody td:nth-child(n+3){
  width:13.2% !important;
  min-width:3.4em !important;
  padding-left:10px !important;
  padding-right:10px !important;
  text-align:center !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th{
  font-size:13px !important;
  letter-spacing:.05em !important;
  padding-top:8px !important;
  padding-bottom:10px !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
/* Slightly larger board: more padding and number type. There is room in the rail. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop.pn-haschart,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop,
.ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart{
  padding:16px 18px 16px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td{
  font-size:17px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.num b,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.sc,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.num,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num b,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.sc,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num{
  font-size:20px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.need .need-unit b,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.need .need-unit b{
  font-size:19px !important;
}
@media (min-width:1800px){
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{font-size:19px !important}
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th{font-size:14px !important}
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody th,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td{font-size:19px !important}
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.num b,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.sc,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.num,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num b,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.sc,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.num{font-size:22px !important}
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-glyph,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{font-size:2.55em !important}
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb th.side,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:first-child,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody th,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb th.side,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:first-child,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody th{
    width:6.6em !important;
    min-width:6.6em !important;
  }
}

/* t9339u: at 1366/1440, POINTS and NEED must not collide.
   Equal 13.2% columns left only ~48px; 13px type + .05em tracking + 10px pad
   overflowed. Shrink header type and pad, drop tracking, let the numbers
   keep even columns. 1920 (min-width 1800) is already clear and is left alone. */
@media (min-width:1100px) and (max-width:1799px) and (min-height:560px) and (orientation:landscape){
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop,
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 #pnTop.pn-haschart,
  .ct.pn #sGame.pn-desk.pn-i11 #pnTop,
  .ct.pn #sGame.pn-desk.pn-i11 #pnTop.pn-haschart{
    padding:12px 10px 14px !important;
  }
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb{
    width:100% !important;
  }
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th{
    font-size:11px !important;
    letter-spacing:0.02em !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(n+3),
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(n+3),
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb tbody td:nth-child(n+3),
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb tbody td:nth-child(n+3){
    padding-left:4px !important;
    padding-right:4px !important;
    width:14% !important;
    min-width:3.6em !important;
  }
}

/* t9339u: waiting-room team assignment — host sets partners */
.pn #seatList li.pn-teams-wrap{
  display:block;
  padding:12px 12px 14px;
  background:rgba(8,12,22,.55);
  border:1.5px solid rgba(212,175,55,.45);
  border-radius:16px;
}
.pn .pn-teams-lead{
  margin:0 0 12px;
  font-size:15px;
  font-weight:650;
  line-height:1.35;
  color:#fff8e6;
}
.pn .pn-feltmini{
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  grid-template-rows:auto 16px auto;
  grid-template-areas:
    ". north ."
    "west . east"
    ". south .";
  gap:6px 8px;
  max-width:360px;
  margin:0 auto 14px;
  padding:12px;
  background:radial-gradient(ellipse at center,#1a4a32 0%,#0e2a1c 70%);
  border:6px solid #5a3a1a;
  border-radius:18px;
  box-sizing:border-box;
}
.pn .pn-mini-north{grid-area:north}
.pn .pn-mini-south{grid-area:south}
.pn .pn-mini-west{grid-area:west}
.pn .pn-mini-east{grid-area:east}
.pn .pn-feltmini > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  color:#fff8e6;
}
.pn .pn-feltmini > div.team-0{background:rgba(212,175,55,.28);border:1.5px solid #D4AF37}
.pn .pn-feltmini > div.team-1{background:rgba(80,160,190,.28);border:1.5px solid #7ec8d8}
.pn .pn-feltmini > div.you{box-shadow:0 0 0 2px #fff8e6}
.pn .pn-feltmini small{font-weight:650;opacity:.9;font-size:11px}
.pn .pn-team-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:560px){
  .pn .pn-team-grid{grid-template-columns:1fr}
}
.pn .pn-team-col{
  border-radius:14px;
  padding:10px 10px 12px;
  min-width:0;
}
.pn .pn-team-col.team-0{background:rgba(212,175,55,.12);border:1.5px solid rgba(212,175,55,.55)}
.pn .pn-team-col.team-1{background:rgba(80,160,190,.12);border:1.5px solid rgba(126,200,216,.55)}
.pn .pn-team-col h3{
  margin:0 0 2px;
  font-size:18px;
  color:#ffe58a;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pn .pn-team-col.team-1 h3{color:#c8f0f8}
.pn .pn-across{
  margin:0 0 8px;
  font-size:13px;
  font-weight:650;
  color:#f2e6c9;
}
.pn .pn-team-ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pn .pn-team-ol > .pn-team-row, .pn .pn-team-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  margin:0;
}
.pn .pn-team-btns{
  flex:1 0 100%;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}
.pn .pn-team-btns .gk-btn{
  min-height:44px;
  font-size:15px;
  font-weight:800;
  padding:8px 12px;
  border-radius:10px;
}
.pn .pn-team-btns .pn-makepartner{order:0;flex:1 1 100%}
.pn .pn-team-btns .pn-toteam{order:1;flex:1 1 auto}
.pn .pn-team-btns .pn-toteam.is-on{
  opacity:.85;
  cursor:default;
  background:#1a1424;
  color:#c8f0c0;
  border-color:#3ee07a;
}
.pn .pn-team-btns .pn-swapseats{
  order:2;
  flex:1 1 auto;
  min-height:40px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,248,230,.08);
  color:#fff8e6;
  border:1px solid rgba(255,248,230,.3);
}
.pn .pn-ispartner{
  flex:1 1 100%;
  font-size:14px;
  font-weight:800;
  color:#9fe7b8;
}
.pn #seatList li.pn-teams-wrap .dot{margin-left:auto}

/* t9339u: waiting-room layout — team board readable, no overlap with setup controls */
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  /* When the team board is up, give it the left column and keep Deal/Play-to on the right.
     Do not share column 1 with Players — that was painting over the board. */
  body.pn .pn-title:has(#pnTeams){overflow:auto !important}
  body.pn .pn-title:has(#pnTeams) .pn-panel,
  body.pn .gk-title.pn-title:has(#pnTeams) .gk-panel{overflow:auto !important}
  body.pn .pn-title:has(#pnTeams) #roomBox:not([hidden]){
    grid-column:1 !important;
    grid-row:1 / span 7 !important;
    min-height:0;
    overflow:auto !important;
    z-index:2;
  }
  body.pn .pn-title:has(#pnTeams) #plyBlock{grid-column:2 !important;grid-row:1 !important}
  body.pn .pn-title:has(#pnTeams) #lvBox{grid-column:2 !important;grid-row:2 !important}
  body.pn .pn-title:has(#pnTeams) #tgtBlock{grid-column:2 !important;grid-row:3 !important}
  body.pn .pn-title:has(#pnTeams) #meldBlock{grid-column:2 !important;grid-row:4 !important}
  body.pn .pn-title:has(#pnTeams) .ct-acts{grid-column:2 !important;grid-row:5 !important;align-self:start}
  body.pn .pn-title:has(#pnTeams) #ptBlock{display:none !important} /* leftover robots fill empty seats; picker was overlapping the board */
  body.pn .pn-title:has(#pnTeams) #plyHint{display:none !important}
  body.pn .pn-title:has(#pnTeams) #recLine{grid-column:2 !important;grid-row:6 !important}
  body.pn .pn-title:has(#pnTeams) #waitNote,
  body.pn .pn-title:has(#pnTeams) #btnLeaveRoom{grid-column:1 / -1 !important;grid-row:auto}
}
.pn .pn-team-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border-radius:12px;background:rgba(0,0,0,.35);margin:0;color:#fff8e6;font-weight:700}
.pn .pn-team-ol{display:flex;flex-direction:column;gap:8px;min-height:2em}

/* t9339u: compact swap-seats bar + no clipped team rows */
.pn .pn-swapbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:10px;
  padding:10px 12px;
  background:rgba(0,0,0,.35);
  border-radius:12px;
  border:1px solid rgba(212,175,55,.35);
  color:#fff8e6;
  font-weight:700;
  font-size:14px;
}
.pn .pn-swapbar select{
  min-height:44px;
  font-size:15px;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  background:#1a1424;
  color:#fff8e6;
  border:1.5px solid rgba(212,175,55,.55);
  margin:0 4px;
}
.pn .pn-swapbar .gk-btn{min-height:44px;font-weight:800;padding:8px 16px}
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  .pn .pn-feltmini{max-width:300px;padding:8px;margin-bottom:10px;gap:4px 6px;border-width:5px}
  .pn .pn-feltmini > div{padding:4px 6px;font-size:12px}
  .pn .pn-feltmini small{font-size:10px}
  .pn .pn-teams-lead{font-size:14px;margin-bottom:8px}
  .pn .pn-team-col{padding:8px}
  .pn .pn-team-col h3{font-size:16px}
  .pn .pn-across{font-size:12px;margin-bottom:6px}
  .pn .pn-team-row{padding:6px 8px;gap:6px}
  .pn .pn-team-btns .gk-btn{min-height:40px;font-size:14px;padding:6px 10px}
  .pn .pn-swapbar{padding:8px 10px;margin-top:8px}
  .pn .pn-swapbar select,.pn .pn-swapbar .gk-btn{min-height:40px}
  /* Guest and host: never clip a player row; scroll the board if the screen is short. */
  body.pn .pn-title:has(#pnTeams) #roomBox:not([hidden]){
    overflow:auto !important;
    align-self:stretch;
  }
  body.pn .pn-title:has(#pnTeams) #seatList{overflow:visible}
}

/* t9339u: Leave and “waiting” sit BELOW the team board, never over a player row.
   On a phone, leave room to scroll the last rows above the sticky Deal button. */
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  body.pn .pn-title:has(#pnTeams) #roomBox:not([hidden]){
    grid-row:1 / 8 !important;
    overflow:auto !important;
    padding-bottom:8px;
    z-index:2;
  }
  body.pn .pn-title:has(#pnTeams) #waitNote{
    grid-column:1 / -1 !important;
    grid-row:8 !important;
    z-index:5;
    margin:6px 0 0 !important;
  }
  body.pn .pn-title:has(#pnTeams) #btnLeaveRoom{
    grid-column:1 / -1 !important;
    grid-row:9 !important;
    z-index:5;
    position:relative !important;
    margin-top:6px !important;
  }
  .pn .pn-swapbar{margin-top:6px;margin-bottom:8px}
}
@media (max-width:1023px), (orientation:portrait){
  body.pn .pn-title:has(#pnTeams),
  body.pn .pn-title:has(#pnTeams) .pn-panel{
    overflow-y:auto !important;
    max-height:none;
  }
  .pn #seatList li.pn-teams-wrap{padding-bottom:96px}
  .pn .pn-swapbar{margin:8px 0}
  .pn .pn-team-grid{margin-bottom:8px}
}

/* t9339u: tonight stays on the clean 2D table. The opt-in 3D standee preview
   had a 390×844 bug (bid dialog covering Tommy/Pinky/DJ, the south You
   standee dropping out of its slot, the HTML hand shifting from y=483 to
   y=602). This build does not load pn3d; hide the settings toggle so the
   family game cannot turn it on. table.js is unchanged. */
.pn .gk-set:has([data-pref="view3d"]),
.gk-sheet .gk-set:has([data-pref="view3d"]){
  display:none !important;
}


/* t9339u: badge contains Diamonds; team columns use empty desk space; phone Deal clearance */

/* 1) Trump badge fully contains its label (Diamonds is the longest) at every
   i11 desk breakpoint. Them stays clear (label column kept). Wider cell so
   "Diamonds" at 11px sits inside the badge with padding, not clipped.
   Number-col headers shrink a hair at ≤1799 so POINTS–NEED keep a gap. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.trump,
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(2),
.ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.trump{
  width:24% !important;
  min-width:88px !important;
  max-width:none !important;
  padding-left:5px !important;
  padding-right:5px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-badge,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge{
  width:100% !important;
  max-width:100% !important;
  min-width:0;
  box-sizing:border-box !important;
  padding:5px 6px 4px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-name,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-name{
  font-size:11px !important;
  letter-spacing:0 !important;
  font-weight:800 !important;
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:0 1px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-align:center !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-glyph,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{
  font-size:2.05em !important;
  line-height:1 !important;
}
@media (min-width:1100px) and (max-width:1799px){
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(n+3),
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(n+3){
    font-size:10px !important;
    letter-spacing:0 !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }
}
@media (min-width:1800px){
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-glyph,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-trump-glyph{font-size:2.35em !important}
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-trump-name,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-trump-name{font-size:12px !important}
  /* At 1920 the badge already has room for Diamonds; don't steal from POINTS–NEED. */
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(2),
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb td.trump,
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(2),
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb td.trump{
    width:20% !important;
    min-width:100px !important;
  }
  .ct.pn #sGame.pn-desk.pn-i8.pn-i11 .pn-chart-tb thead th:nth-child(n+3),
  .ct.pn #sGame.pn-desk.pn-i11 .pn-chart-tb thead th:nth-child(n+3){
    font-size:13px !important;
    letter-spacing:0.02em !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

/* 2) Desk waiting room: felt beside the two team columns so both names in
   each team are fully visible without scrolling. Guests (wait note showing)
   get the empty right half — roomBox spans the full panel. */
@media (min-width:1024px) and (min-height:560px) and (orientation:landscape){
  .pn #seatList li.pn-teams-wrap{
    display:grid !important;
    grid-template-columns:minmax(140px, 190px) minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "lead lead lead"
      "felt teamA teamB"
      "swap swap swap";
    gap:8px 10px;
    align-items:stretch;
    padding:8px 8px 10px;
  }
  .pn #seatList li.pn-teams-wrap:not(:has(.pn-swapbar)){
    grid-template-areas:
      "lead lead lead"
      "felt teamA teamB";
  }
  .pn .pn-teams-lead{grid-area:lead;margin:0 0 2px !important;font-size:13px !important}
  .pn .pn-feltmini{
    grid-area:felt;
    margin:0 !important;
    max-width:100% !important;
    width:100%;
    align-self:center;
    padding:6px !important;
  }
  .pn .pn-team-grid{display:contents}
  .pn .pn-team-col.team-0{grid-area:teamA;min-width:0;padding:6px 8px !important}
  .pn .pn-team-col.team-1{grid-area:teamB;min-width:0;padding:6px 8px !important}
  .pn .pn-team-col h3{font-size:14px !important;margin:0 0 2px !important}
  .pn .pn-across{font-size:11px !important;margin:0 0 4px !important}
  .pn .pn-swapbar{grid-area:swap;margin:0 !important;align-self:stretch;padding:6px 8px !important}
  .pn .pn-swapbar select,.pn .pn-swapbar .gk-btn{min-height:32px !important;font-size:13px !important;padding:4px 8px !important}
  .pn .pn-team-ol{min-height:0;gap:4px !important}
  .pn .pn-team-row{min-height:0;padding:4px 6px !important;gap:4px !important}

  /* Host: compact the stacked buttons so both names + actions fit. The
     "On Team A/B" pill is redundant with the column header — hide it.
     "This is you / your partner" sits on the name line, not a full row. */
  .pn .pn-team-row .pn-seatlbl{display:none}
  .pn .pn-team-btns{
    flex:1 1 auto !important;
    flex-wrap:wrap;
    gap:4px !important;
    margin-top:0 !important;
  }
  .pn .pn-team-btns .pn-makepartner{flex:1 1 auto !important;order:0}
  .pn .pn-team-btns .pn-toteam{flex:1 1 auto !important}
  .pn .pn-team-btns .pn-toteam.is-on{display:none !important}
  .pn .pn-ispartner{
    flex:0 1 auto !important;
    font-size:11px !important;
    font-weight:700 !important;
    padding:0 !important;
    margin:0 !important;
  }
  .pn .pn-team-btns .gk-btn{
    min-height:32px !important;
    font-size:12px !important;
    padding:4px 8px !important;
    border-radius:8px !important;
  }

  /* Guest: use the empty right half of the panel. */
  body.pn .pn-title:has(#pnTeams):has(#waitNote:not([hidden])) #roomBox:not([hidden]){
    grid-column:1 / -1 !important;
    grid-row:1 / 8 !important;
    overflow:visible !important;
    min-height:0;
  }
  body.pn .pn-title:has(#pnTeams):has(#waitNote:not([hidden])) #recLine{
    grid-column:1 / -1 !important;
    grid-row:8 !important;
    margin:4px 0 0 !important;
  }
  body.pn .pn-title:has(#pnTeams):has(#waitNote:not([hidden])) #waitNote{
    grid-column:1 / -1 !important;
    grid-row:9 !important;
    z-index:5;
    margin:4px 0 0 !important;
  }
  body.pn .pn-title:has(#pnTeams):has(#waitNote:not([hidden])) #btnLeaveRoom{
    grid-column:1 / -1 !important;
    grid-row:10 !important;
    z-index:5;
    position:relative !important;
    margin-top:4px !important;
  }
  /* Host and guest: panel grows to show the whole board; Leave stays below it. */
  body.pn .pn-title:has(#pnTeams) .pn-panel,
  body.pn .gk-title.pn-title:has(#pnTeams) .gk-panel{
    overflow:auto !important;
    align-content:start !important;
  }
  body.pn .pn-title:has(#pnTeams) #roomBox:not([hidden]){
    overflow:visible !important;
  }
}

/* 3) Phone 390 host: sticky Deal covers team rows. Make the panel the
   scroll container and add bottom padding equal to the sticky bar so
   every team row can scroll fully clear of Deal. */
@media (max-width:1023px), (orientation:portrait){
  body.pn .pn-title:has(#pnTeams){
    overflow:hidden !important;
    min-height:0;
  }
  body.pn .pn-title:has(#pnTeams) .pn-panel,
  body.pn .gk-title.pn-title:has(#pnTeams) .gk-panel{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    /* Sticky Deal is ~64–72px + ct-acts pad + home-bar. */
    padding-bottom:calc(108px + var(--sab, 0px)) !important;
  }
  body.pn .pn-title:has(#pnTeams) .ct-acts{
    position:sticky !important;
    bottom:0 !important;
    z-index:8;
    margin-top:8px !important;
    padding:8px 0 calc(8px + var(--sab, 0px)) !important;
    background:linear-gradient(rgba(26,31,43,0),#1A1F2B 28%) !important;
  }
  .pn #seatList li.pn-teams-wrap{padding-bottom:12px}
}

/* tfPN9i12: killer 2D — parlor, felt, brass seats, card polish, life */
/* Uses only already-shipped GOC textures (wood, felt-grain, room-wide) plus CSS.
   No new paid/CC0 art. table.js / room.js untouched. Phones keep existing sizes
   so 390 and 844 still fit 100dvh. prefers-reduced-motion kills motion. */

/* ---- Parlor: warm room instead of flat navy (existing room-wide.webp) ---- */
body.pn.ct,
body.pn{
  --pn-brass:#C9A24A;
  --pn-brass2:#F1D77A;
  --pn-brass3:#8A6A28;
  --pn-leather:#2A1810;
  --pn-felt:#1A7048;
}
body.pn:has(#sGame:not([hidden])),
.ct.pn #sGame.gk-screen,
.ct.pn #sGame{
  background:
    linear-gradient(180deg, rgba(10,8,6,.38) 0%, rgba(10,8,6,.22) 28%, rgba(8,6,4,.5) 100%),
    url(../../img/table/room-wide.webp) center 18% / cover no-repeat,
    #120e0a !important;
  background-attachment:fixed, fixed, scroll !important;
}

/* ---- Felt: weave, spotlight, vignette, thick polished wood rail, gold trim ---- */
.ct.pn .felt,
.ct.pn #felt{
  /* inner felt (padding-box) + wood rail (border-box) */
  background:
    radial-gradient(ellipse 72% 62% at 50% 40%, rgba(255,236,190,.22) 0%, rgba(255,236,190,.05) 38%, transparent 62%),
    radial-gradient(ellipse 100% 100% at 50% 55%, transparent 38%, rgba(0,12,4,.48) 100%),
    url(../../img/table/felt-grain.webp) 50% 50% / 168px 168px,
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 42%, #2ea56e 0%, #1c7a4e 42%, #0e4f32 76%, #083422 100%)
      padding-box,
    linear-gradient(180deg, rgba(255,228,170,.42), rgba(40,22,8,.08) 36%, rgba(0,0,0,.42)),
    url(../../img/table/wood.webp) center / 280px border-box !important;
  background-blend-mode:screen, multiply, multiply, overlay, overlay, normal, overlay, normal;
  box-shadow:
    0 22px 48px rgba(0,0,0,.72),
    0 2px 0 rgba(255,220,160,.18),
    0 0 0 1px #2a160a,
    inset 0 0 0 2px #D4AF37,
    inset 0 0 0 3px #6a4a18,
    inset 0 18px 36px rgba(255,236,200,.09),
    inset 0 -28px 48px rgba(0,0,0,.38),
    inset 0 0 90px rgba(0,8,0,.35) !important;
}
/* Desk: a thicker polished rail — the biggest visible jump at 1366/1920. */
.ct.pn #sGame.pn-desk.pn-i11 #felt,
.ct.pn #sGame.pn-desk.pn-i8.pn-i11 #felt{
  border-width:18px !important;
  border-style:solid !important;
  border-color:transparent !important;
  border-radius:38px !important;
}
/* Phone / 844: keep existing rail width so layout math is unchanged; just the richer paint. */
.ct.pn #sGame.pn-docked:not(.pn-desk) #felt,
.ct.pn #sGame.pn-land:not(.pn-desk) #felt{
  box-shadow:
    0 12px 28px rgba(0,0,0,.65),
    0 0 0 1px #2a160a,
    inset 0 0 0 2px #C9A24A,
    inset 0 0 0 3px #5a3c14,
    inset 0 12px 24px rgba(255,236,200,.08),
    inset 0 0 56px rgba(0,8,0,.38) !important;
}

/* A soft inner gold fillet drawn above the felt paint, under cards/seats. */
.ct.pn #felt.pn-i12-felt::before,
.ct.pn #sGame.pn-i12 #felt::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  box-shadow:
    inset 0 0 0 1.5px rgba(241,215,122,.7),
    inset 0 0 0 3px rgba(80,50,16,.45);
}

/* ---- Seats: brass frames, name plates, team accents, turn ring ---- */
.ct.pn #sGame.pn-i12 .seat .avw,
.ct.pn .pn-i12 .seat .avw,
.ct.pn #sGame.pn-i12 #felt .seat .avw{
  background:
    linear-gradient(160deg, #F6E6A8 0%, #D4AF37 42%, #8A6A28 78%, #F1D77A 100%) !important;
  padding:4px !important;
  box-shadow:
    0 2px 0 #3a280c,
    0 6px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,248,220,.75),
    inset 0 -1px 0 rgba(60,36,8,.5);
  position:relative;
  overflow:hidden;
}
.ct.pn #sGame.pn-i12 .seat .av,
.ct.pn #sGame.pn-i12 #felt .seat .av,
.ct.pn #sGame.pn-i12 #mebar .av{
  border-radius:50% !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
/* Name plates: brass plaques, dark lettering (AA on gold). */
.ct.pn #sGame.pn-i12 #felt .seat .nm,
.ct.pn #sGame.pn-i12 .seat .nm{
  background:linear-gradient(180deg,#F1D77A 0%,#D4AF37 55%,#B8932A 100%) !important;
  color:#1A1208 !important;
  font-weight:800 !important;
  border:1px solid #F6E6A8 !important;
  border-radius:5px !important;
  box-shadow:0 2px 0 #5a3e10, 0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,230,.55);
  text-shadow:none !important;
  padding:2px 8px !important;
}
/* Team color pips on the brass ring. */
.ct.pn #sGame.pn-i12 .seat.team-a .avw{
  box-shadow:
    0 0 0 2px #F1D77A,
    0 2px 0 #3a280c,
    0 6px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,248,220,.75);
}
.ct.pn #sGame.pn-i12 .seat.team-b .avw{
  box-shadow:
    0 0 0 2px #7ec8d8,
    0 2px 0 #3a280c,
    0 6px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,248,220,.75);
}
/* Active-turn ring: brighter gold glow (works, then beauty). */
.ct.pn #sGame.pn-i12 .seat.turn .avw,
.ct.pn #sGame.pn-i12 #mebar.turn .av{
  box-shadow:
    0 0 0 3px #F6E6A8,
    0 0 0 7px rgba(212,175,55,.55),
    0 0 28px 6px rgba(241,215,122,.85),
    inset 0 1px 0 rgba(255,248,220,.8) !important;
}

/* Desk only: slightly more substantial plates — not on phone, to protect 100dvh. */
@media (min-width:1100px) and (min-height:560px) and (orientation:landscape){
  .ct.pn #sGame.pn-desk.pn-i11.pn-i12 #felt .seat .avw{
    /* keep i11 sizes; the brass ring + plaque is the “larger plate” */
  }
  .ct.pn #sGame.pn-desk.pn-i11.pn-i12 #felt .seat .nm{
    font-size:14px !important;
    max-width:120px;
  }
}

/* You (mebar) brass frame. */
.ct.pn #sGame.pn-i12 #mebar .av,
.ct.pn #sGame.pn-i12 .mebar .av{
  box-shadow:
    0 0 0 3px #D4AF37,
    0 0 0 5px #6a4a18,
    0 6px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,248,220,.5);
}

/* ---- Cheap life: breathe, glance, blink. Tommy: blink+glance only, never a smile. ---- */
.ct.pn #sGame.pn-i12 #felt .seat .av{
  transform-origin:50% 70%;
  animation:pnI12Idle 5.6s ease-in-out infinite;
  will-change:transform;
}
.ct.pn #sGame.pn-i12 #felt .seat.s1 .av{animation-delay:-.8s}
.ct.pn #sGame.pn-i12 #felt .seat.s2 .av{animation-delay:-2.1s}
.ct.pn #sGame.pn-i12 #felt .seat.s3 .av{animation-delay:-3.6s}
@keyframes pnI12Idle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  22%{transform:translateY(-1.6px) rotate(-1.4deg)}
  48%{transform:translateY(.6px) rotate(0deg)}
  64%{transform:translateY(-1.2px) rotate(2.2deg)} /* glance */
  80%{transform:translateY(-1.6px) rotate(.2deg)}
}
/* Livelier bob + glow on that player's turn. */
.ct.pn #sGame.pn-i12 #felt .seat.turn .av,
.ct.pn #sGame.pn-i12 #mebar.turn .av{
  animation:pnI12Turn 1.45s ease-in-out infinite !important;
}
@keyframes pnI12Turn{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.04)}
}
/* Pinky and DJ: a tiny happy pulse on their turn (brightness only — no mouth). */
.ct.pn #sGame.pn-i12 #felt .seat.bot-pinky.turn .avw,
.ct.pn #sGame.pn-i12 #felt .seat.bot-dj.turn .avw{
  animation:pnI12Happy 1.8s ease-in-out infinite;
}
@keyframes pnI12Happy{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}
/* Blink: eyelid overlay on the eyes only. Positioned per robot. */
.ct.pn #sGame.pn-i12 #felt .seat[data-bot] .avw::after{
  content:"";
  position:absolute;
  left:24%;
  width:52%;
  top:44%;
  height:16%;
  background:rgba(18,12,10,.92);
  border-radius:50% 50% 40% 40%;
  opacity:0;
  transform:scaleY(.2);
  transform-origin:50% 0%;
  pointer-events:none;
  z-index:3;
  animation:pnI12Blink 5.2s ease-in-out infinite;
}
.ct.pn #sGame.pn-i12 #felt .seat.bot-tommy .avw::after{top:46%;left:26%;width:48%;height:14%;animation-delay:-.4s}
.ct.pn #sGame.pn-i12 #felt .seat.bot-pinky .avw::after{top:48%;left:25%;width:50%;height:15%;animation-delay:-1.7s}
.ct.pn #sGame.pn-i12 #felt .seat.bot-dj .avw::after{top:42%;left:22%;width:56%;height:22%;animation-delay:-2.9s}
@keyframes pnI12Blink{
  0%,88%,96%,100%{opacity:0;transform:scaleY(.15)}
  91%,93%{opacity:.95;transform:scaleY(1)}
}

@media (prefers-reduced-motion: reduce){
  .ct.pn #sGame.pn-i12 #felt .seat .av,
  .ct.pn #sGame.pn-i12 #felt .seat .avw,
  .ct.pn #sGame.pn-i12 #felt .seat .avw::after,
  .ct.pn #sGame.pn-i12 #mebar .av,
  .ct.pn #sGame.pn-i12 .slot.win .card::after,
  .ct.pn #sGame.pn-i12 .pn-glint .card::after,
  .ct.pn .flyc,
  .ct.pn #hand .hc.dealt{
    animation:none !important;
    transition:none !important;
    filter:none;
  }
}

/* ---- Cards: thickness, shadow, lift on playable, dim unplayable, trump-win glint ---- */
.ct.pn #sGame.pn-i12 #hand .hc .card,
.ct.pn #sGame.pn-i12 #trick .card,
.ct.pn #sGame.pn-i12 .flyc .card{
  box-shadow:
    1px 1px 0 #d8d0c4,
    2px 2px 0 #c4bcb0,
    3px 3px 0 #a89f90,
    3px 7px 12px rgba(0,0,0,.42);
  border-radius:6px;
}
.ct.pn #sGame.pn-i12 #hand.playing .hc.ok .card,
.ct.pn #sGame.pn-i12 #hand.myturn .hc.ok .card{
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));
}
@media (hover:hover) and (pointer:fine){
  .ct.pn #sGame.pn-i12 #hand.playing .hc.ok:hover .card,
  .ct.pn #sGame.pn-i12 #hand.myturn .hc.ok:hover .card{
    transform:translateY(-8px);
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.5));
  }
}
.ct.pn #sGame.pn-i12 #hand.playing .hc.no .card,
.ct.pn #sGame.pn-i12 #hand.myturn .hc.no .card{
  filter:brightness(.62) saturate(.7);
  box-shadow:1px 1px 0 #b0a898, 2px 3px 6px rgba(0,0,0,.3);
}
/* Winner glint on the taken trick (covers trump-win too). */
.ct.pn #sGame.pn-i12 #trick .slot.win .card,
.ct.pn #sGame.pn-i12 #trick .slot.win{
  filter:drop-shadow(0 0 10px rgba(241,215,122,.95));
}
.ct.pn #sGame.pn-i12 #trick .slot.win .card::after{
  content:"";
  position:absolute;
  inset:-4%;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,248,210,.85) 48%, transparent 62%);
  animation:pnI12Glint .7s ease-out 1;
}
@keyframes pnI12Glint{
  from{transform:translateX(-80%) skewX(-12deg);opacity:0}
  30%{opacity:1}
  to{transform:translateX(80%) skewX(-12deg);opacity:0}
}
.ct.pn #sGame.pn-i12 .seat.won .avw{
  box-shadow:
    0 0 0 3px #F6E6A8,
    0 0 24px 6px rgba(241,215,122,.7),
    0 6px 14px rgba(0,0,0,.45) !important;
}

/* ---- Scoreboard: brass / leather skin. Same layout, same type sizes, AA contrast. ---- */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12 #pnTop,
.ct.pn #sGame.pn-i12 #pnTop{
  background:
    linear-gradient(180deg, rgba(80,50,22,.35), rgba(20,12,6,.5)),
    repeating-linear-gradient(90deg, rgba(255,220,160,.04) 0 1px, transparent 1px 4px),
    #2A1810 !important;
  border:2px solid #D4AF37 !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,230,170,.4),
    inset 0 0 0 1px #5c3a14 !important;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12 .pn-chart-tb,
.ct.pn #sGame.pn-i12 .pn-chart-tb{
  background:transparent;
}
/* Keep Us/Them and numbers on a dark leather field with light gold text (already AA). */
.ct.pn #sGame.pn-i12 .pn-trump-badge{
  box-shadow:
    0 2px 0 #3a280c,
    0 6px 12px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,248,220,.45);
  border-color:#F1D77A;
}

/* Last-trick button: brass. */
.ct.pn #sGame.pn-i12 #pnLast,
.ct.pn #sGame.pn-i12 .pn-last{
  background:linear-gradient(180deg,#F1D77A,#D4AF37 55%,#B8932A) !important;
  color:#1A1208 !important;
  border-color:#F6E6A8 !important;
  font-weight:800;
  box-shadow:0 3px 0 #7a5f14;
}

/* Flying cards already exist in table.js; give them a bit of shadow while they travel. */
.ct.pn .flyc .card,
.ct.pn .flyc{
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
}

/* t9366u: phone 390 Tommy plate one line; Last trick clear of scoreboard frame */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12 #felt .seat .nm,
.ct.pn #sGame.pn-i12.pn-docked:not(.pn-desk):not(.pn-land) #felt .seat .nm,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12.pn-short #felt .seat .nm,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12.pn-play-tight #felt .seat .nm{
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
  width:max-content !important;
  font-size:13px !important;
  padding:2px 8px !important;
  line-height:1.15 !important;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnTop.pn-haschart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12.pn-short #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12.pn-play-tight #pnTop{
  padding-bottom:12px !important;
  box-sizing:border-box;
  overflow:visible !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnChartTools,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnTop.pn-haschart #pnChartTools{
  margin:6px 10px 6px auto !important;
  position:relative !important;
  align-self:flex-end;
  bottom:auto !important;
  right:auto !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnTop.pn-haschart #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12 #pnChartTools .pn-last,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12.pn-short #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12.pn-play-tight #pnLast{
  margin:0 4px 4px 0 !important;
  position:relative !important;
  bottom:auto !important;
  right:auto !important;
  box-shadow:0 2px 0 #7a5f14 !important;
}

/* t9366u: landscape 844 Last trick also clear of the frame (sGame is pn-land, not pn-docked) */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnTop,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnTop.pn-haschart{
  padding-bottom:14px !important;
  box-sizing:border-box;
  overflow:visible !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnChartTools,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnTop.pn-haschart #pnChartTools{
  margin:4px 8px 8px auto !important;
  position:relative !important;
  bottom:auto !important;
  right:auto !important;
  align-self:flex-end;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnTop.pn-haschart #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12 #pnChartTools .pn-last{
  margin:0 4px 8px 0 !important;
  position:relative !important;
  bottom:auto !important;
  right:auto !important;
  box-shadow:0 2px 0 #7a5f14 !important;
  transform:translateY(-4px);
}

/* tfPN9i12b: bigger table, seats off the felt, garage floor (desk only) */
/* Garage is desk-only full-bleed. Phones keep the i12 parlor. $0 art (provided). */

body.pn.pn-deskb.pn-i11:has(#sGame.pn-i12b),
body.pn:has(#sGame.pn-desk.pn-i12b),
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b{
  background-color:#120c08 !important;
  background-image:
    radial-gradient(ellipse 72% 68% at 36% 54%, rgba(0,0,0,.11) 0%, rgba(0,0,0,.27) 62%, rgba(6,3,1,.47) 100%),
    image-set(
      url("../../img/table/garage-1280.webp?v=malibu72f") 1x,
      url("../../img/table/garage-1920.webp?v=malibu72f") 1.5x
    ) !important;
  background-size:cover, cover !important;
  /* Table sits over the open lit floor; car and tool chest fall toward the right rail. */
  background-position:38% 72%, 38% 72% !important;
  background-repeat:no-repeat !important;
}

/* Play column: let seats on the rail stay visible. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #pnPlay,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #pnPlay{
  overflow:visible !important;
}

/* Bigger table: fill the left column. Drop the 1:1 square. Thick wood rail for seats. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt{
  --pn-rail:80px;
  width:var(--pn-felt-w, 98%) !important;
  height:var(--pn-felt-h, 90%) !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  flex:none !important;
  box-sizing:border-box !important;
  border-width:var(--pn-rail) !important;
  margin:6px auto 0 !important;
  justify-self:center;
  align-self:center;
  overflow:visible !important;
  /* Floor contact shadow — table sits on the garage concrete. No rotateX (optional faux-3D skipped to protect the 7:45 deadline). */
  box-shadow:
    0 22px 36px 4px rgba(0,0,0,.50),
    0 48px 70px 10px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,220,150,.28) !important;
}

/* Seats sit ON the wood rail, fully clear of the green felt. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt .seat.s2,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt .seat.s2{
  left:50% !important;
  right:auto !important;
  top:calc(-1 * var(--pn-rail, 80px) + 6px) !important;
  transform:translateX(-50%) !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  max-width:none !important;
  width:auto !important;
  padding:4px 10px 4px 4px !important;
  z-index:8;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt .seat.s1,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt .seat.s1{
  left:calc(-1 * var(--pn-rail, 80px) + 6px) !important;
  right:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  flex-direction:column !important;
  align-items:center !important;
  width:auto !important;
  max-width:calc(var(--pn-rail, 80px) + 24px) !important;
  padding:4px !important;
  z-index:8;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt .seat.s3,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt .seat.s3{
  right:calc(-1 * var(--pn-rail, 80px) + 6px) !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  flex-direction:column !important;
  align-items:center !important;
  width:auto !important;
  max-width:calc(var(--pn-rail, 80px) + 24px) !important;
  padding:4px !important;
  z-index:8;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt .seat .avw,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt .seat .avw{
  width:72px !important;
  height:72px !important;
  max-width:72px !important;
  max-height:72px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt .seat .av,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt .seat .av{
  width:66px !important;
  height:66px !important;
  max-width:66px !important;
  max-height:66px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b #felt .seat .nm,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt .seat .nm{
  font-size:12px !important;
  white-space:nowrap !important;
  max-width:110px !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.15 !important;
  padding:2px 7px !important;
}

/* Gold inner fillet stays at the inner edge of the thicker rail. */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12b #felt::before{
  inset:0;
}


/* ========================================================================
   tfPN9i12c (t9384u/t9385u, t9375u/t9376u): thinner glassy rail, 1.5:1
   table, minimize chips, garage on phones too. Desk + phone. Does not
   change the frozen i12b tree.
   ======================================================================== */

/* ---- Desk: thinner semi-transparent / glassy-gold rail (24–32px, ~55%) ---- */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt{
  --pn-rail:28px;
  width:var(--pn-felt-w, 90%) !important;
  height:var(--pn-felt-h, 80%) !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  flex:none !important;
  box-sizing:border-box !important;
  border-width:var(--pn-rail) !important;
  border-style:solid !important;
  border-color:transparent !important;
  margin:8px auto 0 !important;
  justify-self:center;
  align-self:center;
  overflow:visible !important;
  /* Inner felt stays opaque (cards stay readable). Every felt layer is
     clipped to padding-box so ONLY the glassy gold (~55%) paints the rail —
     the garage then shows through the border. */
  background:
    radial-gradient(ellipse 72% 62% at 50% 40%, rgba(255,236,190,.22) 0%, rgba(255,236,190,.05) 38%, transparent 62%) padding-box,
    radial-gradient(ellipse 100% 100% at 50% 55%, transparent 38%, rgba(0,12,4,.50) 100%) padding-box,
    url(../../img/table/felt-grain.webp) 50% 50% / 168px 168px padding-box,
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px) padding-box,
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px) padding-box,
    radial-gradient(120% 90% at 50% 42%, #2ea56e 0%, #1c7a4e 42%, #0e4f32 76%, #083422 100%) padding-box,
    linear-gradient(165deg,
      rgba(255,232,170,.60) 0%,
      rgba(201,162,62,.52) 28%,
      rgba(130,85,28,.48) 58%,
      rgba(201,162,62,.52) 82%,
      rgba(255,220,150,.55) 100%) border-box !important;
  background-blend-mode:screen, multiply, multiply, overlay, overlay, normal, normal !important;
  box-shadow:
    0 18px 32px 4px rgba(0,0,0,.48),
    0 40px 64px 8px rgba(0,0,0,.32),
    inset 0 0 0 2px rgba(255,226,150,.90),
    inset 0 0 0 4px rgba(80,50,14,.42) !important;
  /* Seats are off the felt: trick well can use almost the whole inner felt, big cards. */
  --tw:clamp(110px, 22%, 188px);
  --seat-top:10px;
  --seat-side:10px;
  --seat-bot:8px;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt::before{
  inset:0;
  box-shadow:none !important;
  border:0 !important;
  background:transparent !important;
}

/* Seats sit ON the thin rail, fully clear of the green felt, names hanging outside. */
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt .seat.s2,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt .seat.s2{
  left:50% !important;
  right:auto !important;
  top:auto !important;
  bottom:100% !important;
  margin:0 !important;
  transform:translateX(-50%) !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  max-width:none !important;
  width:auto !important;
  padding:2px 8px 2px 2px !important;
  z-index:8;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt .seat.s1,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt .seat.s1{
  left:auto !important;
  right:100% !important;
  top:50% !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
  flex-direction:row-reverse !important;
  align-items:center !important;
  width:auto !important;
  max-width:none !important;
  padding:2px !important;
  z-index:8;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt .seat.s3,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt .seat.s3{
  right:auto !important;
  left:100% !important;
  top:50% !important;
  margin:0 !important;
  transform:translateY(-50%) !important;
  flex-direction:row !important;
  align-items:center !important;
  width:auto !important;
  max-width:none !important;
  padding:2px !important;
  z-index:8;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt .seat .avw,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt .seat .avw{
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt .seat .av,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt .seat .av{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
}
.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12c #felt .seat .nm,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #felt .seat .nm{
  font-size:12px !important;
  white-space:nowrap !important;
  max-width:110px !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.15 !important;
  padding:2px 7px !important;
}

/* ---- Minimize buttons: 44px targets, labels Hide/Show scoreboard|picture ---- */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-minbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex:0 0 auto;
  z-index:14;
  pointer-events:auto;
  position:relative;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-minbtn{
  box-sizing:border-box;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 12px;
  margin:0;
  border-radius:12px;
  border:1.5px solid #D4AF37;
  background:linear-gradient(180deg, #3a2c18, #1a140c);
  color:#FFE9A8;
  font:700 15px/1 "Atkinson Hyperlegible", system-ui, sans-serif;
  cursor:pointer;
  pointer-events:auto !important;
  box-shadow:inset 0 1px 0 rgba(255,230,160,.28), 0 2px 0 #6a4a14;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-minbtn:focus-visible{
  outline:3px solid #ffe766;
  outline-offset:2px;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-minico{
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c:not(.pn-board-min) #pnMinBoardLbl,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c:not(.pn-art-min) #pnMinArtLbl{
  /* Expanded: the − is the visible control; the name is the accessible label (also in aria-label). */
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min #pnMinBoardLbl,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-art-min #pnMinArtLbl{
  position:static;
  width:auto;
  height:auto;
  margin:0;
  clip:auto;
  overflow:visible;
  white-space:nowrap;
  font-weight:800;
  font-size:14px;
}

/* Collapsed scoreboard → a small re-open chip. Chart and Last trick hide. */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min #pnTop{
  flex:0 0 auto !important;
  padding:4px 6px !important;
  gap:0 !important;
  background:rgba(14,20,32,.94);
  border:1.5px solid #D4AF37;
  border-radius:14px;
  width:auto !important;
  max-width:100%;
  align-self:flex-end;
  min-height:0;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min #pnTop > *:not(#pnMinBoardBar){
  display:none !important;
}

/* Collapsed picture → a small re-open chip. Frame hides. pointer-events on so the + works. */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #pnArt,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-art{
  pointer-events:auto !important;
  position:relative;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #pnArt .pn-art-frame{
  pointer-events:none;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #pnMinArtBar{
  position:absolute;
  top:6px;
  right:6px;
  z-index:15;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-art-min #pnArt,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-art-min .pn-art{
  flex:0 0 auto !important;
  min-height:0 !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-art-min #pnArt .pn-art-frame{
  display:none !important;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-art-min #pnMinArtBar{
  position:static;
}

/* When one or both panels collapse, the right rail shrinks and the table may grow. */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min:not(.pn-art-min),
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-art-min:not(.pn-board-min){
  grid-template-columns:minmax(0,1fr) minmax(200px, 26%) !important;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min.pn-art-min{
  grid-template-columns:minmax(0,1fr) minmax(52px, 7.5rem) !important;
}
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min.pn-art-min #pnRail{
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
}

/* ---- Phone garage (t9375u/t9376u). Landscape: full scene. Portrait: a crop
   that cuts the car at both edges — a hint to rotate. UI sits over it.
   Contrast: strong vignette + dark hand well; felt stays opaque green. ---- */

/* Landscape phones: full garage, same framing idea as the desk. */
body.pn.pn-i12c.pn-i5:not(.pn-deskb):not(.pn-i2):has(#sGame.pn-land),
body.pn:has(#sGame.pn-land:not(.pn-desk).pn-i12c),
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c{
  background-color:#120c08 !important;
  background-image:
    radial-gradient(ellipse 78% 70% at 40% 50%, rgba(0,0,0,.12) 0%, rgba(0,0,0,.32) 60%, rgba(6,3,1,.52) 100%),
    image-set(
      url("../../img/table/garage-1280.webp?v=malibu72f") 1x,
      url("../../img/table/garage-1920.webp?v=malibu72f") 1.5x
    ) !important;
  background-size:cover, cover !important;
  background-position:38% 72%, 38% 72% !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll, scroll !important;
}

/* Portrait phones: vertical crop of the 16:9 garage. auto 110% tall fills
   the height and spills wide, so the Chevy is cut on both sides — rotate
   to see the full bay. */
body.pn.pn-i12c.pn-i2:not(.pn-deskb):has(#sGame.pn-docked),
body.pn:has(#sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12c),
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12c{
  background-color:#120c08 !important;
  background-image:
    radial-gradient(ellipse 95% 72% at 50% 38%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.37) 58%, rgba(6,3,1,.56) 100%),
    image-set(
      url("../../img/table/garage-1280.webp?v=malibu72f") 1x,
      url("../../img/table/garage-1920.webp?v=malibu72f") 1.5x
    ) !important;
  background-size:cover, auto 112% !important;
  background-position:center, 58% 74% !important;
  background-repeat:no-repeat !important;
  background-attachment:scroll, scroll !important;
}

/* Hand / "You" well: dark backing so cards stay readable over the garage.
   Automatic fail if contrast is poor. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c .me,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c .me{
  background:rgba(8,5,3,.86) !important;
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.55);
  padding:6px 8px !important;
  box-sizing:border-box;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c #hand .hc,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c #hand .hc,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c #hand .card,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c #hand .card{
  /* cards themselves stay light; just make sure no transparent wash */
  filter:none;
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c #pnTop,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c #sb,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c #sb{
  background:rgba(10,8,6,.88);
  box-shadow:0 2px 12px rgba(0,0,0,.45);
}
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c .gk-bar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c .gk-bar{
  background:rgba(10,8,6,.82);
}
/* Felt stays the opaque green + wood of i12 — played cards sit on green, not the photo. */


/* ========================================================================
   tfPN9i12d (t9387u–t9391u): phone-portrait table fill, cards at seats,
   mid-trick lead highlight, stronger turn breathe, status off the felt.
   Desk and landscape rules are not rewritten — only additive overrides.
   ======================================================================== */

/* ---- Phone portrait: tall felt fills the gap between the scoreboard
   / Last-trick row and the hand. Hand stays just above the 18+ footer. ---- */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12.pn-i12d{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12.pn-i12d #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2.pn-play-tight #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2.pn-play-tighter #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-short #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-vshort #felt{
  flex:1 1 auto !important;
  flex-grow:1 !important;
  min-height:45vh !important;
  height:auto !important;
  max-height:none !important;
  width:auto !important;
  aspect-ratio:auto !important;
  /* Seats sit in this margin, on the rail, so the green is free for cards. */
  margin:56px 54px 6px !important;
  --tw:clamp(68px, 18vw, 86px) !important;
  --clear-top:14px;
  --clear-side:16px;
  --clear-bot:10px;
  --seat-top:0px;
  --seat-side:0px;
  --seat-bot:0px;
  overflow:visible !important;
}
/* Short phones (375x667): keep the 45vh floor, slightly smaller cards. */
@media (max-height:700px){
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-short #felt{
    margin:48px 48px 4px !important;
    --tw:clamp(60px, 16.5vw, 74px) !important;
    --clear-top:10px;
    --clear-side:12px;
    --clear-bot:8px;
  }
}

/* Trick well is the full felt — cards go toward each seat, not a tight plus. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #felt .trick{
  inset:0 !important;
  z-index:5;
  pointer-events:none;
}
/* You: near the bottom of the felt, in front of the hand. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p0{
  left:50% !important;
  top:calc(100% - var(--clear-bot) - 0.72 * var(--tw)) !important;
  z-index:5;
}
/* Partner: toward the top, just below the partner seat. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p2{
  left:50% !important;
  top:calc(var(--clear-top) + 0.72 * var(--tw)) !important;
  z-index:5;
}
/* Left seat: inward from the left rail. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p1{
  left:calc(var(--clear-side) + 0.56 * var(--tw)) !important;
  top:54% !important;
  z-index:5;
}
/* Right seat: inward from the right rail. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p3{
  left:calc(100% - var(--clear-side) - 0.56 * var(--tw)) !important;
  top:54% !important;
  z-index:5;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot{
  width:var(--tw) !important;
  height:calc(var(--tw) * 1.4) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot .card,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot svg.card{
  width:100% !important;
  height:100% !important;
}

/* Seats stay on the rail, in the felt margin, clear of played cards. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s2{
  top:-50px !important;
  z-index:7;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s1{
  left:-50px !important;
  top:50% !important;
  z-index:7;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s3{
  right:-50px !important;
  top:50% !important;
  z-index:7;
}

/* Status call strip: reserved row under the scoreboard, never on the felt. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:2px 10px 0;
  min-height:0;
  z-index:9;
  pointer-events:none;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall:empty,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall:has(#msg:empty){
  display:none !important;
  margin:0 !important;
  height:0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg.pn-feltmsg{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:auto !important;
  max-width:min(92%, 340px);
  min-height:0 !important;
  height:auto !important;
  margin:0;
  padding:5px 14px !important;
  border-radius:14px;
  background:rgba(14,20,32,.92) !important;
  color:#F4F6F8 !important;
  font-size:15px !important;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  pointer-events:none;
  display:block !important;
  visibility:visible !important;
  -webkit-line-clamp:unset;
  white-space:normal;
  overflow:visible;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt > #msg,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt > #msg.pn-feltmsg{
  display:none !important;
}

/* Tight leftover gap under the scoreboard: Last trick stays in the chart row. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop.pn-haschart{
  padding-bottom:4px !important;
  margin-bottom:0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnChartTools,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnLast{
  margin:0 2px 0 0 !important;
}

/* ---- Mid-trick lead highlight: persistent gold ring on the winning card.
   Applies on phone, landscape, and desk so everyone sees who has the lead. ---- */
.ct.pn #sGame.pn-i12d #trick .slot.lead,
.ct.pn #sGame.pn-i12d #trick .slot.lead .card,
.ct.pn #sGame.pn-i12d #trick .slot.win,
.ct.pn #sGame.pn-i12d #trick .slot.win .card{
  filter:drop-shadow(0 0 12px rgba(241,215,122,1)) drop-shadow(0 0 4px rgba(255,248,210,.95));
  z-index:8;
}
.ct.pn #sGame.pn-i12d #trick .slot.lead .card,
.ct.pn #sGame.pn-i12d #trick .slot.win .card{
  box-shadow:
    0 0 0 3px #F6E6A8,
    0 0 0 6px #6a4a18,
    0 0 18px 4px rgba(241,215,122,.95),
    3px 7px 12px rgba(0,0,0,.45) !important;
  outline:2px solid #fff6c0;
  outline-offset:1px;
}

/* ---- Strong turn breathe (1.8s). Beats kit `.ct *{animation-iteration-count:1}`.
   Seat + avatar pulse; on your turn the hand breathes too; playable cards
   get a brighter ring. Opponent card-backs (.mini) breathe if shown. ---- */
.ct.pn #sGame.pn-i12d #felt .seat.turn .avw,
.ct.pn #sGame.pn-i12d #felt .seat.turn .av,
.ct.pn #sGame.pn-i12d #mebar.turn .av,
.ct.pn #sGame.pn-i12d #mebar.turn{
  animation:pnI12dTurnGlow 1.8s ease-in-out infinite !important;
  animation-iteration-count:infinite !important;
  border-color:#F6E6A8;
}
.ct.pn #sGame.pn-i12d #felt .seat.turn{
  z-index:8;
}
@keyframes pnI12dTurnGlow{
  0%,100%{
    box-shadow:
      0 0 0 3px #F6E6A8,
      0 0 0 8px rgba(241,215,122,.50),
      0 0 22px 6px rgba(241,215,122,.75),
      0 0 0 1px #3a280c;
    filter:brightness(1);
    transform:translateY(0) scale(1);
  }
  50%{
    box-shadow:
      0 0 0 5px #fff6c0,
      0 0 0 13px rgba(255,229,138,.85),
      0 0 40px 12px rgba(255,230,140,.98),
      0 0 0 1px #3a280c;
    filter:brightness(1.14);
    transform:translateY(-2px) scale(1.05);
  }
}
/* Hand breathes on your turn; playable cards are emphasized. */
.ct.pn #sGame.pn-i12d #hand.myturn .hc,
.ct.pn #sGame.pn-i12d #hand.playing.myturn .hc{
  animation:pnI12dHandBreathe 1.8s ease-in-out infinite !important;
  animation-iteration-count:infinite !important;
}
.ct.pn #sGame.pn-i12d #hand.myturn .hc.ok,
.ct.pn #sGame.pn-i12d #hand.playing.myturn .hc.ok{
  animation:pnI12dHandPlayable 1.8s ease-in-out infinite !important;
  animation-iteration-count:infinite !important;
  z-index:3;
}
.ct.pn #sGame.pn-i12d #hand.myturn .hc.ok .card{
  box-shadow:
    0 0 0 2px #F6E6A8,
    0 6px 10px rgba(0,0,0,.4),
    1px 1px 0 #d8d0c4,
    2px 2px 0 #c4bcb0;
}
@keyframes pnI12dHandBreathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes pnI12dHandPlayable{
  0%,100%{transform:translateY(-2px) scale(1); filter:brightness(1)}
  50%{transform:translateY(-8px) scale(1.03); filter:brightness(1.08)}
}
/* Opponent face-down stacks, if shown, breathe with the turn seat. */
.ct.pn #sGame.pn-i12d #felt .seat.turn .mini,
.ct.pn #sGame.pn-i12d #felt .seat.turn .mini .bk,
.ct.pn #sGame.pn-i12d #felt .seat.turn .dots{
  animation:pnI12dHandBreathe 1.8s ease-in-out infinite !important;
  animation-iteration-count:infinite !important;
}

/* Reduced motion: no pulse, a static high-contrast gold ring so the turn
   and the lead are still unmistakable. */
@media (prefers-reduced-motion: reduce){
  .ct.pn #sGame.pn-i12d #felt .seat.turn .avw,
  .ct.pn #sGame.pn-i12d #felt .seat.turn .av,
  .ct.pn #sGame.pn-i12d #mebar.turn .av,
  .ct.pn #sGame.pn-i12d #mebar.turn,
  .ct.pn #sGame.pn-i12d #hand.myturn .hc,
  .ct.pn #sGame.pn-i12d #hand.myturn .hc.ok,
  .ct.pn #sGame.pn-i12d #hand.playing.myturn .hc.ok,
  .ct.pn #sGame.pn-i12d #felt .seat.turn .mini,
  .ct.pn #sGame.pn-i12d #felt .seat.turn .dots,
  .ct.pn #sGame.pn-i12d #trick .slot.win .card::after{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none;
  }
  .ct.pn #sGame.pn-i12d #felt .seat.turn .avw,
  .ct.pn #sGame.pn-i12d #mebar.turn .av{
    box-shadow:
      0 0 0 4px #fff6c0,
      0 0 0 9px #D4AF37,
      0 0 0 12px #3a280c,
      0 0 22px 4px rgba(241,215,122,.9) !important;
    border-color:#fff6c0 !important;
  }
  .ct.pn #sGame.pn-i12d #trick .slot.lead .card,
  .ct.pn #sGame.pn-i12d #trick .slot.win .card{
    box-shadow:
      0 0 0 3px #F6E6A8,
      0 0 0 6px #6a4a18,
      0 0 14px 3px rgba(241,215,122,.95) !important;
    outline:3px solid #fff6c0;
  }
  .ct.pn #sGame.pn-i12d #hand.myturn .hc.ok .card{
    box-shadow:0 0 0 3px #F6E6A8, 0 4px 8px rgba(0,0,0,.4);
  }
}

/* Landscape phone: keep status in the side dock, never over seats/cards. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt > #msg,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt > #msg.pn-feltmsg{
  display:none !important;
}


/* ---- tfPN9i12d video review (t9388/t9389): takes-it label, stronger
   playable/unplayable, follow-suit hint. After i12c so filter:none loses. ---- */
.ct.pn #sGame.pn-i12d #pnCall #msg.pn-takes,
.ct.pn #sGame.pn-i12d #msg.pn-takes,
.ct.pn #sGame.pn-i12d #pnTakes{
  background:linear-gradient(180deg,#F1D77A,#D4AF37 55%,#B8932A) !important;
  color:#1A1208 !important;
  font-weight:900 !important;
  font-size:16px !important;
  border:2px solid #fff6c0 !important;
  box-shadow:0 2px 0 #7a5f14, 0 6px 16px rgba(0,0,0,.45) !important;
  text-shadow:none !important;
}
.ct.pn #sGame.pn-i12d #pnTakes{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  z-index:9;
  padding:5px 14px;
  border-radius:14px;
  pointer-events:none;
  white-space:nowrap;
  max-width:90%;
}
.ct.pn #sGame.pn-i12d #pnTakes[hidden]{display:none !important}
/* Unplayable: clearly dim. Playable: lift + gold ring. Beats i12c filter:none. */
.ct.pn #sGame.pn-i12d #hand.myturn .hc.no .card,
.ct.pn #sGame.pn-i12d #hand.playing .hc.no .card,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c.pn-i12d #hand.myturn .hc.no .card,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c.pn-i12d #hand .hc.no .card{
  filter:brightness(.42) saturate(.55) !important;
  opacity:.72;
  box-shadow:1px 2px 4px rgba(0,0,0,.35) !important;
  transform:none !important;
  animation:none !important;
}
.ct.pn #sGame.pn-i12d #hand.myturn .hc.ok .card,
.ct.pn #sGame.pn-i12d #hand.playing.myturn .hc.ok .card,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12c.pn-i12d #hand.myturn .hc.ok .card{
  filter:brightness(1.06) !important;
  opacity:1;
  box-shadow:
    0 0 0 2px #F6E6A8,
    0 0 0 4px rgba(106,74,24,.85),
    0 8px 12px rgba(0,0,0,.45),
    1px 1px 0 #d8d0c4 !important;
}
/* Follow-suit hint: large, high-contrast, above the hand, never silent. */
.ct.pn #sGame.pn-i12d #pnPlayHint,
.ct.pn .pn-play-hint{
  display:block;
  position:relative;
  z-index:20;
  margin:4px auto 6px;
  padding:8px 14px;
  max-width:min(94%, 360px);
  text-align:center;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  color:#1A1208 !important;
  background:linear-gradient(180deg,#fff6c0,#F1D77A 60%,#D4AF37) !important;
  border:2px solid #6a4a18;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.ct.pn #sGame.pn-i12d #pnPlayHint[hidden],
.ct.pn .pn-play-hint[hidden]{display:none !important}


/* ---- tfPN9i12d-fit: compact phone chrome so a 45vh table AND the hand
   both fit above the 18+ footer; pull trick cards inward clear of seats;
   landscape + desk mid-trick spread; one takes-it label. ---- */

/* Last trick: take it out of document flow (it already looks like a
   floating chip). Recovers ~52px under the scoreboard. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnChartTools,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop.pn-haschart #pnChartTools{
  position:absolute !important;
  right:6px;
  top:100% !important;
  bottom:auto !important;
  margin-top:4px !important;
  margin:0 !important;
  height:auto !important;
  width:auto !important;
  flex:none !important;
  z-index:10;
  pointer-events:auto;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop.pn-haschart,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop.pn-slimtop{
  padding-bottom:2px !important;
  margin-bottom:0 !important;
  position:relative;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnLast,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnChartTools .pn-last{
  margin:0 !important;
  min-height:36px !important;
  height:36px !important;
  padding:0 10px !important;
  font-size:13px !important;
}

/* Hand just above the footer: smaller fan, no tall padding, compact mebar. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d .me{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  min-height:0 !important;
  max-height:none;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-short #hand{
  --hcw:clamp(54px, 15vw, 70px) !important;
  padding-top:2px !important;
  padding-bottom:0 !important;
  margin:0 !important;
  min-height:0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #hand .hc .card,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #hand .card{
  width:var(--hcw) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #mebar{
  min-height:28px !important;
  height:28px !important;
  padding:0 6px !important;
  margin:0 0 1px !important;
  gap:4px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #mebar .av,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #mebar .avw{
  width:24px !important;
  height:24px !important;
}

@media (max-height:700px){
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #hand,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-short #hand,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-vshort #hand{
    --hcw:clamp(48px, 13.5vw, 60px) !important;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #mebar{
    min-height:22px !important;
    height:22px !important;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #mebar .av,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #mebar .avw{
    width:18px !important;
    height:18px !important;
  }
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg{
    padding:3px 12px !important;
    font-size:14px !important;
  }
}

/* Felt: slightly tighter rail margins so seats sit outside the green;
   cards pulled inward so they don't cover avatars or names. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #felt{
  margin:52px 58px 2px !important;
  --tw:clamp(62px, 16.5vw, 80px) !important;
  --clear-top:18px;
  --clear-side:28px;
  --clear-bot:14px;
}
@media (max-height:700px){
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-short #felt{
    margin:40px 52px 2px !important;
    --tw:clamp(54px, 15vw, 68px) !important;
    --clear-top:14px;
    --clear-side:24px;
    --clear-bot:10px;
  }
}

/* Seats further off the green. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s2{
  top:-62px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s1{
  left:-62px !important;
  top:48% !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s3{
  right:-62px !important;
  top:48% !important;
}

/* Cards: diamond well inside the green, clear of each other and of seats.
   left/right sit at mid-height (not 54%, which collided with you). */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p0{
  left:50% !important;
  top:calc(100% - var(--clear-bot) - 0.62 * var(--tw)) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p2{
  left:50% !important;
  top:calc(var(--clear-top) + 0.62 * var(--tw)) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p1{
  left:calc(var(--clear-side) + 0.72 * var(--tw)) !important;
  top:48% !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p3{
  left:calc(100% - var(--clear-side) - 0.72 * var(--tw)) !important;
  top:48% !important;
}

/* ---- Landscape phone: spread the four cards, grow the felt a bit. ---- */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c.pn-i12d #felt{
  --tw:clamp(44px, 9vh, 58px) !important;
  min-height:42% !important;
  height:auto !important;
  overflow:visible !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c.pn-i12d #felt .trick{
  inset:0 !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot .card{
  width:var(--tw) !important;
  height:calc(var(--tw) * 1.4) !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot.p0{
  left:50% !important;
  top:calc(100% - 0.62 * var(--tw) - 2px) !important;
  transform:translate(-50%,-50%) !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot.p2{
  left:50% !important;
  top:calc(0.62 * var(--tw) + 2px) !important;
  transform:translate(-50%,-50%) !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot.p1{
  left:calc(0.62 * var(--tw) + 6px) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot.p3{
  left:calc(100% - 0.62 * var(--tw) - 6px) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
/* Partner seat stays on the top rail, name clear of the top card. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .seat.s2{
  top:-36px !important;
  z-index:8;
}

/* ---- Desk: more vertical separation of you vs partner (same 1.5:1 table). ---- */
.ct.pn #sGame.pn-desk.pn-i12c.pn-i12d #felt .trick,
.ct.pn #sGame.pn-desk.pn-i12d #felt .trick{
  inset:8px 8px 8px 8px !important;
}
.ct.pn #sGame.pn-desk.pn-i12c.pn-i12d #felt .trick .slot.p0,
.ct.pn #sGame.pn-desk.pn-i12d #felt .trick .slot.p0{
  left:50% !important;
  top:calc(100% - 0.58 * var(--tw) - 4px) !important;
  transform:translate(-50%,-50%) !important;
}
.ct.pn #sGame.pn-desk.pn-i12c.pn-i12d #felt .trick .slot.p2,
.ct.pn #sGame.pn-desk.pn-i12d #felt .trick .slot.p2{
  left:50% !important;
  top:calc(0.58 * var(--tw) + 4px) !important;
  transform:translate(-50%,-50%) !important;
}
.ct.pn #sGame.pn-desk.pn-i12c.pn-i12d #felt .trick .slot.p1,
.ct.pn #sGame.pn-desk.pn-i12d #felt .trick .slot.p1{
  left:calc(0.58 * var(--tw) + 10px) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}
.ct.pn #sGame.pn-desk.pn-i12c.pn-i12d #felt .trick .slot.p3,
.ct.pn #sGame.pn-desk.pn-i12d #felt .trick .slot.p3{
  left:calc(100% - 0.58 * var(--tw) - 10px) !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
}

/* Don't let a leftover felt #pnTakes cover the winning card. */
.ct.pn #sGame.pn-i12d #felt > #pnTakes{
  display:none !important;
}


/* ---- tfPN9i12d-fit2: kill the hand-box grow loop, park the call chip
   beside Last trick so Pinky has the center, seats clear of cards. ---- */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i2 #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-short #hand{
  height:auto !important;
  margin-bottom:0 !important;
  max-height:none !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d .me{
  height:auto !important;
  margin-bottom:0 !important;
  max-height:none !important;
}

/* Call chip + Last trick share the margin band, left and right, so Pinky
   sits in the middle and the row takes no column height. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall{
  position:absolute !important;
  left:auto !important;
  right:8px;
  top:auto;
  /* sit in the felt's top margin, opposite Last trick */
  width:auto !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:visible !important;
  z-index:11;
  pointer-events:none;
  display:block !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg.pn-takes{
  position:absolute !important;
  right:0;
  bottom:0;
  transform:translateY(100%);
  margin:4px 0 0 !important;
  white-space:nowrap !important;
  max-width:min(54vw, 220px);
}
/* Last trick already absolute at top:100% of pnTop (left via? it's in tools at right).
   Pin it to the LEFT of the margin band. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnChartTools,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnTop.pn-haschart #pnChartTools{
  left:6px !important;
  right:auto !important;
  top:100% !important;
  bottom:auto !important;
}

/* Pinky sits higher, name above the green, clear of the top card. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .seat.s2{
  top:-78px !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #felt .trick .slot.p2{
  top:calc(var(--clear-top) + 0.70 * var(--tw)) !important;
}

/* Landscape: Pinky fully above the felt; partner card lower. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .seat.s2{
  top:-58px !important;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot.p2{
  top:calc(0.78 * var(--tw) + 6px) !important;
}


/* ---- tfPN9i12d-fit3: put the takes-it / status chip back on screen
   (right of Last trick, in the band under the scoreboard). Landscape
   partner seat hangs fully above the felt so the name clears the card. ---- */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d{
  position:relative !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:2px 10px 0 !important;
  overflow:visible !important;
  display:flex !important;
  justify-content:flex-end;
  align-items:center;
  z-index:11;
  pointer-events:none;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg.pn-takes,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnCall #msg.pn-feltmsg{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 !important;
  white-space:nowrap !important;
  max-width:min(58vw, 230px);
  display:block !important;
}
/* Last trick stays a left-side chip in that same band, out of the flow. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d #pnChartTools{
  left:6px !important;
  right:auto !important;
}

/* Landscape: whole partner seat (avatar + name) sits above the felt. */
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .seat.s2{
  top:auto !important;
  bottom:100% !important;
  transform:translateX(-50%) !important;
  margin:0 0 2px 0 !important;
  z-index:8;
}
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12d #felt .trick .slot.p2{
  top:calc(0.70 * var(--tw) + 4px) !important;
}


/* ========================================================================
   tfPN9i12e (t9396u): short landscape phones (height <= 500px, e.g. 844x390,
   932x430, 667x375, and Safari-shrunk ~340px). Scoreboard is a Score pill
   by default (reuses i12c Hide/Show chip); bid/action never covers the hand;
   partner seat stays fully on screen. Desktop and portrait are untouched.
   ======================================================================== */

@media (orientation: landscape) and (max-height: 500px) {

  /* Room at the top for the partner seat; side column stays in its grid cell. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i8,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12d {
    grid-template-columns: minmax(0, 1fr) minmax(152px, 28vw) !important;
    overflow: hidden !important;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
  }

  /* Felt sits below a reserved partner band so the name is never clipped. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c.pn-i12d.pn-i12e #felt,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i8 #felt {
    margin: 58px 72px 4px !important;
    overflow: visible !important;
    min-height: 36% !important;
  }

  /* Partner: compact, fully above the felt, fully inside the viewport. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt .seat.s2,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i9 #felt .seat.s2,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12d #felt .seat.s2 {
    top: auto !important;
    bottom: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 0 2px 0 !important;
    padding: 1px 6px 2px !important;
    gap: 1px !important;
    max-width: 160px;
    z-index: 8;
    background: rgba(14, 20, 32, .88) !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt .seat.s2 .avw {
    width: 36px !important;
    height: 36px !important;
    padding: 2px !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt .seat.s2 .av {
    width: 32px !important;
    height: 32px !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt .seat.s2 .nm {
    font-size: 12px !important;
    line-height: 1.15;
    padding: 1px 6px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Side column stays in its cell and never paints over the hand. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-side {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    min-width: 0 !important;
    max-width: 100%;
    z-index: 20;
    position: relative;
    align-self: stretch;
  }

  /* #pnTop is a vertical stack (pill + optional overlay + bid), not a 48px row. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnTop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnTop.pn-slimtop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnTop:has(.pn-prog.pn-board.pn-shut),
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnTop:has(.pn-prog.pn-board.pn-open),
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i5 #pnTop.pn-slimtop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i8 #pnTop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 30;
  }

  /* Score pill — always visible, 44px target, reuses #pnMinBoard. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoardBar,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-minbar#pnMinBoardBar {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    position: relative !important;
    z-index: 45;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 2px !important;
    width: 100%;
    min-height: 44px;
    pointer-events: auto;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard.pn-scorepill,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-minbtn#pnMinBoard {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    width: auto !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(14, 20, 32, .96) !important;
    border: 1.5px solid #D4AF37 !important;
    color: #F1D77A !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard .pn-minlbl,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoardLbl {
    display: inline !important;
    color: #F1D77A !important;
    font-weight: 800;
    font-size: 15px;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard .pn-minico {
    display: none; /* pill reads "Score" */
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard:focus-visible {
    outline: 3px solid #F1D77A;
    outline-offset: 2px;
  }

  /* Collapsed: hide the full chart / score sheet. Keep dock (bid) and the pill. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop > .pn-prog,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop > .pn-prog.pn-chart,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop .pn-chart,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop #pnScore,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop #pnDrop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop #pnBtSheet,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop .pn-bt,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnTop .pn-trbid {
    display: none !important;
  }

  /* Open: chart is an overlay inside the SIDE column only — never over the hand. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e:not(.pn-board-min) #pnTop > .pn-prog,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e:not(.pn-board-min) #pnTop .pn-prog.pn-chart,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e:not(.pn-board-min) #pnTop .pn-chart,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e:not(.pn-board-min) #pnTop #pnBtSheet,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e:not(.pn-board-min) #pnTop .pn-prog.pn-board.pn-open #pnBtSheet {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 48px !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(58vh, calc(100dvh - 160px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 50 !important;
    margin: 0 !important;
    padding: 8px 8px 10px !important;
    background: rgba(10, 12, 18, .97) !important;
    border: 1.5px solid rgba(241, 215, 122, .55) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    box-sizing: border-box;
    pointer-events: auto;
    height: auto !important;
  }

  /* Last-trick chip stays compact in the side, not over the hand. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnChartTools,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnLast,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-board-min #pnChartTools {
    position: static !important;
    inset: auto !important;
    display: flex;
    justify-content: flex-end;
    margin: 0 !important;
    max-width: 100%;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnLast,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-last {
    min-height: 36px !important;
    height: 36px !important;
    min-width: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  /* Bid / action panel: compact in the side, never over .me / #hand. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnDock,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnTop #pnDock {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 16;
    flex: 0 1 auto;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-side #act,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnDock #act {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: visible !important;
    z-index: 16 !important;
    background: rgba(10, 12, 18, .94);
    border: 1px solid rgba(241, 215, 122, .4);
    border-radius: 12px;
    box-sizing: border-box;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act h3 {
    display: none !important; /* compact: the buttons are enough */
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .note {
    display: none !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .row .gk-btn,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .pn-bid .row .gk-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px !important;
    height: auto !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .stepper .gk-btn {
    min-height: 40px !important;
    min-width: 40px;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .suits {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .suitb {
    min-height: 44px !important;
    font-size: 11px !important;
    padding: 2px !important;
  }

  /* Status message in the side, compact. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-side #msg,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnDock #msg {
    position: static !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    max-width: 100% !important;
  }

  /* Hand lives only in the left column; 12-card fan must fit and stay tappable. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .me,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12c.pn-i12e .me,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i8.pn-i12e .me {
    grid-area: me;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2px 4px 2px 8px !important;
    padding-left: 8px !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
    z-index: 9;
    position: relative;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #hand,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .me .hand,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i8.pn-i12e .me .hand {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    --hcw: clamp(40px, 7.2vw, 58px) !important;
    z-index: 9;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #hand .hc,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #hand .card {
    pointer-events: auto;
  }
  /* "You" pill sits in-flow or compact, not covering cards. */
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .mebar {
    max-width: 72px !important;
    width: auto !important;
    padding: 2px 6px !important;
  }
}

/* Even shorter Safari-with-bars (~340px). */
@media (orientation: landscape) and (max-height: 360px) {
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i8 #felt {
    margin: 50px 62px 2px !important;
    --tw: clamp(36px, 8vh, 48px) !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt .seat.s2 .avw {
    width: 30px !important;
    height: 30px !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #felt .seat.s2 .av {
    width: 26px !important;
    height: 26px !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #hand,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .me .hand {
    --hcw: clamp(36px, 6.4vw, 50px) !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #act .row .gk-btn {
    min-height: 40px !important;
    font-size: 12px !important;
  }
}


/* ========================================================================
   tfPN9i12e (t9399u–t9401u): garage-reveal beat between hands.
   Fade the table, seats, hand and HUD so only the garage is visible,
   then pop them back before the deal. Reduced-motion is skipped in JS.
   ======================================================================== */
.ct.pn #sGame.pn-garage-reveal #felt,
.ct.pn #sGame.pn-garage-reveal #felt .seat,
.ct.pn #sGame.pn-garage-reveal #felt .trick,
.ct.pn #sGame.pn-garage-reveal .me,
.ct.pn #sGame.pn-garage-reveal #hand,
.ct.pn #sGame.pn-garage-reveal #mebar,
.ct.pn #sGame.pn-garage-reveal #pnTop,
.ct.pn #sGame.pn-garage-reveal #pnSide,
.ct.pn #sGame.pn-garage-reveal .pn-side,
.ct.pn #sGame.pn-garage-reveal #pnDock,
.ct.pn #sGame.pn-garage-reveal #pnChrome,
.ct.pn #sGame.pn-garage-reveal #pnRail,
.ct.pn #sGame.pn-garage-reveal #pnArt,
.ct.pn #sGame.pn-garage-reveal #pnCall,
.ct.pn #sGame.pn-garage-reveal #pnChartTools,
.ct.pn #sGame.pn-garage-reveal #act,
.ct.pn #sGame.pn-garage-reveal #msg,
.ct.pn #sGame.pn-garage-reveal .gk-bar,
.ct.pn #sGame.pn-garage-reveal #sb,
.ct.pn #sGame.pn-garage-reveal #hudstrip,
.ct.pn #sGame.pn-garage-reveal .pn-trbid,
.ct.pn #sGame.pn-garage-reveal #tgDock {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}
/* Pop-in after the beat (brief). */
.ct.pn #sGame.pn-garage-in #felt,
.ct.pn #sGame.pn-garage-in #felt .seat,
.ct.pn #sGame.pn-garage-in .me,
.ct.pn #sGame.pn-garage-in #hand,
.ct.pn #sGame.pn-garage-in #mebar,
.ct.pn #sGame.pn-garage-in #pnTop,
.ct.pn #sGame.pn-garage-in #pnSide,
.ct.pn #sGame.pn-garage-in .pn-side,
.ct.pn #sGame.pn-garage-in #pnDock,
.ct.pn #sGame.pn-garage-in #pnChrome,
.ct.pn #sGame.pn-garage-in #pnRail,
.ct.pn #sGame.pn-garage-in #pnArt,
.ct.pn #sGame.pn-garage-in .gk-bar {
  transition: opacity 0.25s ease;
  opacity: 1;
}

/* tfPN9i12f: Deal must not cover last night's seat dropdowns. Same phone
   padding as i11, keyed to the waiting-room list instead of #pnTeams. */
@media (max-width:1023px), (orientation:portrait){
  body.pn .pn-title:has(#roomBox:not([hidden])){
    overflow:hidden !important;
    min-height:0;
  }
  body.pn .pn-title:has(#roomBox:not([hidden])) .pn-panel,
  body.pn .gk-title.pn-title:has(#roomBox:not([hidden])) .gk-panel{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    padding-bottom:calc(108px + var(--sab, 0px)) !important;
  }
  body.pn .pn-title:has(#roomBox:not([hidden])) .ct-acts{
    position:sticky !important;
    bottom:0 !important;
    z-index:8;
    margin-top:8px !important;
    padding:8px 0 calc(8px + var(--sab, 0px)) !important;
    background:linear-gradient(rgba(26,31,43,0),#1A1F2B 28%) !important;
  }
}


/* tfPN9i12f (t9419u): "Shuffling…" on the garage after the 1.2s reveal,
   before the table pops back. High contrast, centered, not faded. */
.ct.pn #sGame #pnShuffle,
#pnShuffle{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:200;
  margin:0;
  padding:0.08em 0.28em;
  font:800 clamp(42px, 9vw, 112px)/1.05 system-ui,"Segoe UI",sans-serif;
  color:#FFE58A;
  -webkit-text-stroke:6px #140a04;
  paint-order:stroke fill;
  text-shadow:0 0 3px #140a04, 0 3px 0 #140a04, 0 10px 28px rgba(0,0,0,.8);
  letter-spacing:0.04em;
  pointer-events:none;
  text-align:center;
  white-space:nowrap;
}
#pnShuffle[hidden]{display:none !important}
/* Do not fade the word with the table. */
.ct.pn #sGame.pn-garage-reveal #pnShuffle{
  opacity:1 !important;
  pointer-events:none !important;
  transition:none;
}
/* tfPN9i12g (owner t9421u/t9422u): portrait phones — the Ace fan and the two robot faces sit fully ABOVE the title, never on it. Title flows under the art. */
@media (max-width:520px) and (orientation:portrait){
  body.pn .pn-title .pn-hero{height:70px;width:200px;margin:0 auto}
  body.pn .pn-title .pn-hero img{width:62px;height:62px;top:4px}
  body.pn .pn-title .pn-hero .fan{height:66px;top:2px}
  body.pn .pn-title .pn-hero .fan .pc,body.pn .pn-title .pn-hero .fan .card{width:42px}
  body.pn .pn-title .gk-logo,body.pn .pn-title #tTtl{position:static!important;inset:auto!important;transform:none!important;display:block;margin:2px 0 4px!important;line-height:1.05}
}
/* tfPN9i12g (owner t9423u): a hidden table never takes space, whatever layout classes it still carries */
.ct.pn #sGame#sGame[hidden]{display:none!important}
/* tfPN9i12g (matrix P0-3): short-landscape phone setup (844x390 etc). The options panel scrolls freely and Deal/Continue
   sit in the empty space under the title (left column), so Deal never covers the Robot partner row, Play to or Meld.
   Not used in a waiting room (i12f seat-list rules keep the sticky Deal there). */
@media (orientation:landscape) and (max-height:560px){
  body.pn .pn-title:not(:has(#roomBox:not([hidden]))) .pn-panel{padding-bottom:12px!important;scroll-padding-bottom:12px}
  body.pn .pn-title:not(:has(#roomBox:not([hidden]))) .pn-panel .ct-acts{
    position:fixed!important;left:calc(var(--sal,0px) + 14px);bottom:calc(var(--sab,0px) + 46px);top:auto;
    width:calc(30% - 22px);max-width:260px;margin:0!important;padding:0!important;background:none!important;
    display:flex;flex-direction:row;gap:6px;z-index:6}
  body.pn .pn-title:not(:has(#roomBox:not([hidden]))) .pn-panel .ct-acts .gk-btn{flex:1 1 0;min-width:0;min-height:48px!important;padding:2px 6px;font-size:17px}
  body.pn .pn-title:not(:has(#roomBox:not([hidden]))) .pn-panel .ct-acts #btnCont{font-size:14px;line-height:1.1}
  body.pn .pn-title:not(:has(#roomBox:not([hidden]))) .gk-brand{justify-content:flex-start!important;padding-top:4px;padding-bottom:64px}
}


/* ========================================================================
   tfPN9i12h (t9451u / t9452u): remove the Hide/Show scoreboard text pill.
   The chart sits flush under the header. A thin caret handle below it
   folds the board completely (only the handle remains). Chevron points
   UP when open (tap to fold up), DOWN when folded (tap to drop down).
   Visible line is thin; the tap target is 44px. Portrait now actually
   hides the chart on .pn-board-min (it previously had no hide CSS, so
   the board could not close). Contrast: #F8E6A0 on #0E1420 is 14.76:1.
   ======================================================================== */

/* ---- Shared caret handle (phone, land, desk) ---- */
.ct.pn #sGame #pnMinBoardBar,
.ct.pn #sGame.pn-i12h #pnMinBoardBar,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c #pnMinBoardBar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoardBar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-minbar#pnMinBoardBar {
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: relative !important;
  z-index: 45;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0;
  order: 2;
}
/* In-flow height is a thin strip when the board is open so we do not
   shove the bid panel down by 44px. The 44px target overlaps UP into
   the chart, not down onto the bids. When folded, the bar is a full
   44px under the header. */
.ct.pn #sGame:not(.pn-board-min) #pnMinBoardBar {
  height: 14px !important;
  overflow: visible !important;
}
.ct.pn #sGame.pn-board-min #pnMinBoardBar {
  height: 44px !important;
  overflow: visible !important;
}

.ct.pn #sGame #pnMinBoard,
.ct.pn #sGame #pnMinBoard.pn-minbtn,
.ct.pn #sGame #pnMinBoard.pn-caretbtn,
.ct.pn #sGame #pnMinBoard.pn-scorepill,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-minbtn#pnMinBoard,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard.pn-scorepill,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e .pn-minbtn#pnMinBoard {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #F8E6A0 !important;
  -webkit-text-fill-color: #F8E6A0 !important;
  font-size: 0 !important; /* no leftover text */
  line-height: 0 !important;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(248, 230, 160, 0.28);
  z-index: 46;
}
/* Folded: the 44px button fills the 44px bar (relative is fine). */
.ct.pn #sGame.pn-board-min #pnMinBoard,
.ct.pn #sGame.pn-board-min #pnMinBoard.pn-caretbtn,
.ct.pn #sGame.pn-board-min #pnMinBoard.pn-minbtn {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

.ct.pn #sGame #pnMinBoard:focus-visible,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard:focus-visible,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c .pn-minbtn#pnMinBoard:focus-visible {
  outline: 3px solid #F8E6A0 !important;
  outline-offset: 2px !important;
}

.ct.pn #sGame #pnMinBoard .pn-caret-hit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Thin gold handle line, vertically centered in the 44px target.
   When open, that center sits on the 14px strip at the bottom of the chart. */
.ct.pn #sGame #pnMinBoard .pn-caret-line {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #F8E6A0;
  box-shadow: 0 0 0 1px rgba(14, 20, 32, 0.7);
  pointer-events: none;
}

.ct.pn #sGame #pnMinBoard .pn-minico,
.ct.pn #sGame #pnMinBoard .pn-caret-ico,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard .pn-minico {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 30px !important;
  height: 20px !important;
  max-width: 30px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(14, 20, 32, 0.94) !important;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(248, 230, 160, 0.55);
  color: #F8E6A0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none;
}

/* Chevron: DOWN when folded, UP when open. CSS borders, not text. */
.ct.pn #sGame #pnMinBoard .pn-caret-ico::after,
.ct.pn #sGame #pnMinBoard .pn-minico::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border-right: 2.5px solid #F8E6A0;
  border-bottom: 2.5px solid #F8E6A0;
  transform: translateY(-2px) rotate(45deg); /* down */
}
.ct.pn #sGame #pnMinBoard[aria-expanded="true"] .pn-caret-ico::after,
.ct.pn #sGame #pnMinBoard[aria-expanded="true"] .pn-minico::after,
.ct.pn #sGame #pnMinBoard.pn-caret-open .pn-caret-ico::after,
.ct.pn #sGame #pnMinBoard.pn-caret-open .pn-minico::after {
  transform: translateY(3px) rotate(-135deg); /* up */
}

/* Any leftover "Hide/Show scoreboard" or "Score" text is gone. aria-label stays. */
.ct.pn #sGame #pnMinBoardLbl,
.ct.pn #sGame #pnMinBoard .pn-minlbl,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c:not(.pn-board-min) #pnMinBoardLbl,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-board-min #pnMinBoardLbl,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoard .pn-minlbl,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e #pnMinBoardLbl {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  display: block !important;
}

/* ---- Portrait: chart flush under the header; caret below; bid dock after.
   This is the layout the owner photographed (t9451u). ---- */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop.pn-haschart,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop.pn-slimtop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-board-min #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d #pnTop.pn-haschart,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d #pnTop.pn-slimtop {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
  gap: 0 !important;
  position: relative;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop > .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop .pn-chart {
  order: 1;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnMinBoardBar {
  order: 2;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnTop #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h #pnDock {
  order: 3;
  margin-top: 2px !important;
}

/* THE FIX for "won't go away": actually hide the chart on portrait when folded. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop > .pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnScore,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnDrop,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnBtSheet,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-bt,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-trbid,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnChartTools,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnLast,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop > .pn-prog,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-prog.pn-chart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-chart,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnScore,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnDrop,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop #pnBtSheet,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-bt,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12h.pn-board-min #pnTop .pn-trbid {
  display: none !important;
}

/* ---- Short landscape: caret instead of the "Score" text pill.
   Chart stays inside the side column (never over the hand). When open
   the chart is in-flow above the caret so the handle sits below it. ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h #pnTop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h #pnTop.pn-slimtop,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h.pn-board-min #pnTop {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h:not(.pn-board-min) #pnTop > .pn-prog,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h:not(.pn-board-min) #pnTop .pn-prog.pn-chart,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h:not(.pn-board-min) #pnTop .pn-chart,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h:not(.pn-board-min) #pnTop #pnBtSheet,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h:not(.pn-board-min) #pnTop .pn-prog.pn-board.pn-open #pnBtSheet {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(52vh, calc(100dvh - 150px)) !important;
    order: 1;
    z-index: 40 !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h #pnMinBoardBar,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h .pn-minbar#pnMinBoardBar {
    width: 100% !important;
    min-height: 0 !important;
    order: 2;
    justify-content: center !important;
  }
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h #pnDock,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h #pnTop #pnDock {
    order: 3;
  }
}

/* Desk rail: same caret, no "Show scoreboard" text chip. Chart still
   collapses to the handle via the existing i12c hide-siblings rule. */
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-i12h.pn-board-min #pnTop {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  align-self: stretch;
  background: transparent !important;
  border: none !important;
}

/* Beat i8's `.pn-i2.pn-i8 #pnTop .pn-prog.pn-board.pn-chart { display:block !important }`
   (2 IDs + 9 classes) which was keeping the portrait chart visible when folded. */
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop #pnProg,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop #pnProg.pn-prog,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop #pnProg.pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop #pnProg.pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop .pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop.pn-haschart .pn-prog.pn-chart,
.ct.pn #sGame.pn-docked:not(.pn-desk).pn-i2.pn-i8.pn-i12h.pn-board-min #pnTop.pn-haschart .pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-i8.pn-i12h.pn-board-min #pnTop.pn-haschart #pnProg.pn-prog.pn-chart,
.ct.pn #sGame.pn-i8.pn-i12h.pn-board-min #pnTop.pn-haschart #pnProg.pn-prog.pn-board.pn-chart,
.ct.pn #sGame.pn-i12h.pn-board-min #pnTop #pnProg[data-pn-folded="1"],
.ct.pn #sGame.pn-i12h.pn-board-min #pnTop #pnProg[data-pn-folded="1"].pn-prog.pn-board.pn-chart {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  position: absolute !important;
  inset: auto !important;
}


/* ========================================================================
   tfPN9i12i (t9454u / t9455u / t9456u):
   1) Scoreboard caret moves into the UPPER-LEFT empty cell of the chart
      (left of TRUMP, above Us). The full-width thin gold line under the
      chart is gone. When folded, only a small 44x44 caret remains in that
      same upper-left spot (under the header's back button), so folding
      reclaims the chart's height. Chevron UP when open (tap to fold),
      DOWN when folded (tap to open). Single-tap, contrast #F8E6A0 on
      #0E1420 (14.76:1).
   2) Phone portrait only: the felt is near-square (~1:1.1), centered
      between the bid panel and the hand. Extra height goes to bigger
      hand and trick cards (~25–35%). Landscape and desktop felt rules
      are not rewritten.
   ======================================================================== */

/* ---- Caret: no full-width line; 44x44 chip in the upper-left ---- */
.ct.pn #sGame.pn-i12i #pnMinBoard .pn-caret-line,
.ct.pn #sGame.pn-i12h.pn-i12i #pnMinBoard .pn-caret-line {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Open: bar is out of flow so it does not leave a strip under the chart.
   It sits on the scoreboard's top-left empty cell (left of TRUMP). */
.ct.pn #sGame.pn-i12i:not(.pn-board-min) #pnMinBoardBar,
.ct.pn #sGame.pn-i12h.pn-i12i:not(.pn-board-min) #pnMinBoardBar,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-i12i:not(.pn-board-min) #pnMinBoardBar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i:not(.pn-board-min) #pnMinBoardBar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i:not(.pn-board-min) .pn-minbar#pnMinBoardBar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 44px !important;
  z-index: 47 !important;
  overflow: visible !important;
  pointer-events: none;
  background: transparent !important;
  order: 0;
}
.ct.pn #sGame.pn-i12i:not(.pn-board-min) #pnMinBoard,
.ct.pn #sGame.pn-i12i:not(.pn-board-min) #pnMinBoard.pn-caretbtn,
.ct.pn #sGame.pn-i12i:not(.pn-board-min) #pnMinBoard.pn-minbtn,
.ct.pn #sGame.pn-i12h.pn-i12i:not(.pn-board-min) #pnMinBoard,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-i12i:not(.pn-board-min) .pn-minbtn#pnMinBoard,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i:not(.pn-board-min) #pnMinBoard,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i:not(.pn-board-min) #pnMinBoard.pn-scorepill,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i:not(.pn-board-min) .pn-minbtn#pnMinBoard {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 44px !important;
  max-width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  pointer-events: auto !important;
  z-index: 48 !important;
}

/* Give the empty "Side" header cell room so the chevron sits in it,
   left of TRUMP and above Us, without covering the labels. */
.ct.pn #sGame.pn-i12i:not(.pn-board-min) .pn-chart-tb thead th.side,
.ct.pn #sGame.pn-i8.pn-i12i:not(.pn-board-min) .pn-chart-tb thead th.side,
.ct.pn #sGame.pn-i8.pn-i12i:not(.pn-board-min) .pn-chart-tb thead th:first-child {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 48px !important;
  padding: 0 !important;
}

/* Folded: only a small caret under the back-button area. No full-width bar. */
.ct.pn #sGame.pn-i12i.pn-board-min #pnMinBoardBar,
.ct.pn #sGame.pn-i12h.pn-i12i.pn-board-min #pnMinBoardBar,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-i12i.pn-board-min #pnMinBoardBar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i.pn-board-min #pnMinBoardBar,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i.pn-board-min .pn-minbar#pnMinBoardBar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  align-self: flex-start !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: auto;
  z-index: 47 !important;
}
.ct.pn #sGame.pn-i12i.pn-board-min #pnMinBoard,
.ct.pn #sGame.pn-i12i.pn-board-min #pnMinBoard.pn-caretbtn,
.ct.pn #sGame.pn-i12i.pn-board-min #pnMinBoard.pn-minbtn,
.ct.pn #sGame.pn-i12h.pn-i12i.pn-board-min #pnMinBoard,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-i12i.pn-board-min .pn-minbtn#pnMinBoard,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i.pn-board-min #pnMinBoard,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i.pn-board-min .pn-minbtn#pnMinBoard {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 44px !important;
  max-width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* Portrait folded: caret and bid buttons share one row so folding
   reclaims the full scoreboard height (no leftover 44px strip). */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-board-min #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12i.pn-board-min #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d.pn-i12i.pn-board-min #pnTop,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d.pn-i12i.pn-board-min #pnTop.pn-haschart,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d.pn-i12i.pn-board-min #pnTop.pn-slimtop {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding-bottom: 0 !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-board-min #pnTop #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-board-min #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12i.pn-board-min #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-board-min #pnTop.pn-slimtop #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d.pn-i12i.pn-board-min #pnTop.pn-slimtop #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-board-min #pnTop:has(.pn-prog.pn-board) #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d.pn-i12i.pn-board-min #pnTop:has(.pn-prog.pn-board) #pnDock,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12h.pn-i12d.pn-i12i.pn-board-min #pnTop.pn-haschart #pnDock {
  /* Beat the slimtop/has-chart rule that parks the dock at top:100%
     (a leftover 44px row). Same row as the caret, full height reclaimed. */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  order: 3;
}

/* Short-landscape folded: small caret at the top of the side column,
   not a full-width line. Chart height is fully reclaimed. */
@media (orientation: landscape) and (max-height: 500px) {
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h.pn-i12i.pn-board-min #pnMinBoardBar,
  .ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12h.pn-i12i.pn-board-min .pn-minbar#pnMinBoardBar {
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
  }
}

/* Keep the 44x44 chevron chip visually small and high-contrast. */
.ct.pn #sGame.pn-i12i #pnMinBoard .pn-minico,
.ct.pn #sGame.pn-i12i #pnMinBoard .pn-caret-ico {
  width: 28px !important;
  height: 22px !important;
  max-width: 28px !important;
  max-height: 22px !important;
  background: rgba(14, 20, 32, 0.96) !important;
  box-shadow: 0 0 0 1.5px #F8E6A0, 0 1px 4px rgba(0, 0, 0, 0.55);
}


/* ---- Phone portrait: near-square felt, bigger cards. ---- */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-i2 #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-i2.pn-play-tight #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-i2.pn-play-tighter #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-short #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-vshort #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12.pn-i12d.pn-i12i #felt,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  /* Width leaves ~54px rails for seats; height follows 1:1.1.
     max-height keeps the square from colliding with the hand on short phones. */
  width: min(calc(100% - 108px), calc((var(--vvh, 100dvh) - 290px) / 1.1)) !important;
  max-width: calc(100% - 108px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(48vh, calc(var(--vvh, 100dvh) - 290px)) !important;
  aspect-ratio: 1 / 1.1 !important;
  align-self: center !important;
  margin: auto 54px !important;
  --tw: clamp(78px, 21vw, 102px) !important;
  --clear-top: 18px;
  --clear-side: 24px;
  --clear-bot: 26px;
  overflow: visible !important;
}

@media (max-height: 700px) {
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-i2 #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-short #felt,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt {
    width: min(calc(100% - 100px), calc((var(--vvh, 100dvh) - 270px) / 1.1)) !important;
    max-width: calc(100% - 100px) !important;
    max-height: min(44vh, calc(var(--vvh, 100dvh) - 270px)) !important;
    margin: auto 50px !important;
    --tw: clamp(64px, 18vw, 84px) !important;
    --clear-top: 14px;
    --clear-side: 20px;
    --clear-bot: 22px;
  }
}

/* Seats stay on the rail, clear of the (now shorter) green and of each other. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .seat.s2,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .seat.s2 {
  top: -72px !important;
  left: 50% !important;
  z-index: 7;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .seat.s1,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .seat.s1 {
  left: -58px !important;
  top: 50% !important;
  z-index: 7;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .seat.s3,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .seat.s3 {
  right: -58px !important;
  top: 50% !important;
  z-index: 7;
}

/* Trick cards sized up with the hand; still a diamond in front of each seat. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .trick .slot,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .trick .slot {
  width: var(--tw) !important;
  height: calc(var(--tw) * 1.4) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .trick .slot.p0,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .trick .slot.p0 {
  left: 50% !important;
  top: calc(100% - var(--clear-bot) - 0.72 * var(--tw)) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .trick .slot.p2,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .trick .slot.p2 {
  left: 50% !important;
  top: calc(var(--clear-top) + 0.68 * var(--tw)) !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .trick .slot.p1,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .trick .slot.p1 {
  left: calc(var(--clear-side) + 0.70 * var(--tw)) !important;
  top: 50% !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #felt .trick .slot.p3,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #felt .trick .slot.p3 {
  left: calc(100% - var(--clear-side) - 0.70 * var(--tw)) !important;
  top: 50% !important;
}

/* Hand: 25–35% bigger than the i12d 54–70 clamp. Indexes scale with the SVG. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-i2 #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-short #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i.pn-i2 #hand,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i.pn-short #hand {
  --hcw: clamp(72px, 22vw, 96px) !important;
  padding-top: 4px !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #hand .hc .card,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #hand .card,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #hand .hc .card,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #hand .card {
  width: var(--hcw) !important;
}
@media (max-height: 700px) {
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i #hand,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i.pn-short #hand,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i #hand,
  .ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i.pn-short #hand {
    --hcw: clamp(66px, 19vw, 84px) !important;
  }
}

/* Hand stays just above the footer; leftover column space is absorbed
   as equal gaps above and below the square felt (margin:auto on #felt).
   .me does not flex-grow, so cards don't stretch into the footer. */
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12i .me,
.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land).pn-i12d.pn-i12i .me {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}


/* t9469u: the open 44px caret is top-left of #pnTop, but its chip was
   vertically centered in that 44px, so it sat on the Us label. Keep the
   44px upper-left target; pin the visible chip in the header row (left
   of TRUMP) so Us and Them stay fully visible. No other scoreboard changes. */
.ct.pn #sGame.pn-i12i:not(.pn-board-min) #pnMinBoard .pn-caret-hit,
.ct.pn #sGame.pn-i12j:not(.pn-board-min) #pnMinBoard .pn-caret-hit,
.ct.pn #sGame.pn-i12h.pn-i12i:not(.pn-board-min) #pnMinBoard .pn-caret-hit,
.ct.pn #sGame.pn-desk.pn-i11.pn-i12c.pn-i12i:not(.pn-board-min) #pnMinBoard .pn-caret-hit,
.ct.pn #sGame.pn-land:not(.pn-desk).pn-i12e.pn-i12i:not(.pn-board-min) #pnMinBoard .pn-caret-hit {
  align-items: flex-start;
  justify-content: center;
  /* Board padding (~6px phone, ~8–12px desk) plus a few px into the header. */
  padding-top: 6px;
  padding-bottom: 0;
  box-sizing: border-box;
}


/* t9470u: one Settings Done, in a reserved footer under the scroll list.
   The list is never covered (Four-colour suits, Card faces, Breathing
   strength, Confirm before playing a card). Duplicate/sticky Done is gone. */
body.pn #shSet .gk-card{
  display:flex !important;
  flex-direction:column !important;
  max-height:100%;
  overflow:hidden !important;
  padding-bottom:10px !important;
}
body.pn #shSet .gk-set-list{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.pn #shSet .gk-card > .row:last-child,
body.pn #shSet .gk-card > .row{
  position:static !important;
  flex:0 0 auto !important;
  margin-top:8px !important;
  margin-bottom:0 !important;
  padding:8px 0 calc(var(--sab, 0px) + 4px) !important;
  background:transparent !important;
  z-index:auto !important;
  justify-content:center;
}
body.pn #shSet .gk-card > .row .gk-btn,
body.pn #shSet .gk-card > .row .gk-btn.gold{
  min-width:108px;
  min-height:44px;
}
body.pn #shSet .gk-set:last-of-type,
body.pn #shSet .gk-card > .gk-set:last-of-type,
body.pn #shSet .gk-set-list .gk-set:last-of-type,
body.pn #shSet .gk-set-list > .tg-set:last-child,
body.pn #shSet .gk-set-list .gk-set.tg-str{
  margin-bottom:0 !important;
}
body.pn #shSet .gk-set{scroll-margin-bottom:0}

/* ==== tfPL1 (owner pt9510u): phone-landscape table fit + near-square tablets/foldables + trump symbol only ====
   Scoped to body.pn-shortland (phone landscape, height <= 500) and body.pn-sq (non-desk, both sides >= 560).
   Phone portrait (< 560 wide) and laptops/desktops (.pn-desk) are untouched. */

/* -- Trump badge: suit symbol only (aria-label keeps the name). Red for hearts/diamonds, dark for clubs/spades, on cream. -- */
.ct.pn #sGame.pn-i9 .pn-trump-badge .pn-trump-name{display:none !important}
.ct.pn #sGame.pn-i9 .pn-trump-badge.is-black,
.ct.pn #sGame.pn-i9.pn-i11 .pn-trump-badge.is-black,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge.is-black{
  --pn-trump-glyph:#15171C !important;
  --pn-trump-tile:#FFF8E6 !important;
  background:#FFF8E6 !important;
  color:#15171C !important;
}
.ct.pn #sGame.pn-i9 .pn-trump-badge.is-red,
.ct.pn #sGame.pn-i9.pn-i11 .pn-trump-badge.is-red,
.ct.pn #sGame.pn-desk.pn-i11 .pn-trump-badge.is-red{
  --pn-trump-glyph:#C62828 !important;
  --pn-trump-tile:#FFF8E6 !important;
  background:#FFF8E6 !important;
  color:#C62828 !important;
}
.ct.pn #sGame.pn-i9 .pn-trump-badge.is-black .pn-trump-glyph{color:#15171C !important}
.ct.pn #sGame.pn-i9 .pn-trump-badge.is-red .pn-trump-glyph{color:#C62828 !important}
.ct.pn #sGame.pn-i9 .pn-trump-badge:not(.pn-trump-pending) .pn-trump-glyph{
  font-size:2.6em !important;
  line-height:1 !important;
  font-variant-emoji:text;
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Header row inside the left column: keep clear of the iPhone notch / rounded corners. */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt{
    margin:34px 92px 4px !important;
    min-height:0 !important;
    --tw:clamp(34px, calc((100dvh - 234px) / 2.9), 62px) !important;
    overflow:visible !important;
  }
  @supports (width: 1cqh) {
    html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt{
      container-type:size !important;
      --tw:max(32px, min(64px, calc((100cqh - 16px) / 2.85), calc((100cqw - 40px) / 3.4))) !important;
    }
  }
  /* Partner: one compact row (avatar | name | status) so the whole seat stays on screen. */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    top:auto !important;
    bottom:100% !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    margin:0 0 2px !important;
    padding:1px 6px 1px 2px !important;
    max-width:none !important;
    width:auto !important;
    white-space:nowrap !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .avw{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    margin:0 !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .avw .av{
    width:100% !important;
    height:100% !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .avw{padding:2px !important; box-sizing:border-box !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .nm,
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .chip{
    margin:0 !important;
    position:static !important;
  }
  /* Opponents: inside the column, beside the felt, never past the screen edge or into the side panel. */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1,
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3{
    width:86px !important;
    max-width:86px !important;
    padding:2px !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    box-sizing:border-box !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1{left:-90px !important; right:auto !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3{right:-90px !important; left:auto !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1 .nm,
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3 .nm{
    font-size:12px !important;
    max-width:84px !important;
    padding-left:4px !important;
    padding-right:4px !important;
    overflow:visible !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat .chip{font-size:12px !important}
  /* Played cards: each one in front of its player, never stacked. */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick{inset:0 !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot,
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot .card{
    width:var(--tw) !important;
    height:calc(var(--tw) * 1.4) !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p2{
    left:50% !important; top:calc(0.7 * var(--tw) + 3px) !important; transform:translate(-50%, -50%) !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p0{
    left:50% !important; top:calc(100% - 0.7 * var(--tw) - 3px) !important; transform:translate(-50%, -50%) !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p1{
    left:calc(0.5 * var(--tw) + 10px) !important; top:50% !important; transform:translate(-50%, -50%) !important;
  }
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p3{
    left:calc(100% - 0.5 * var(--tw) - 10px) !important; top:50% !important; transform:translate(-50%, -50%) !important;
  }
  /* The empty action box / status line drew as a stray empty bar. Hide them only while empty. */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnDock #act.act:not(:has(*)),
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnTop #pnDock #act.act:not(:has(*)),
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnDock #msg.msg:empty,
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnTop #pnDock #msg.msg:empty{display:none !important}
}
@media (orientation: landscape) and (max-height: 500px) {
  /* Winner glow never washes over a neighbour's card: the winning slot sits under the others. */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot{z-index:3 !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.win{z-index:2 !important}
}

/* -- Near-square tablets / foldables (non-desk, both sides >= 560: Galaxy Z Fold unfolded, iPad portrait).
      A real table that fills the screen: partner above the felt, opponents beside it, hand below it. -- */
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-short #felt,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-vshort #felt,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-i2 #felt{
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  align-self:stretch !important;
  margin:96px 124px 10px !important;
  --tw:clamp(56px, min(9vw, 10vh), 104px) !important;
  overflow:visible !important;
}
@supports (width: 1cqh) {
  html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt,
  html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-short #felt,
  html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-vshort #felt,
  html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-i2 #felt{
    container-type:size !important;
    /* card height fits two stacked cards + gaps in the felt's own height */
    --tw:max(40px, min(104px, calc((100cqh - 34px) / 2.85), calc((100cqw - 60px) / 3.4))) !important;
  }
}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #hand,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-i2 #hand,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-short #hand,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i.pn-vshort #hand{
  flex:0 0 auto !important;
  min-height:calc(var(--hcw, 80px) * 1.5 + 22px) !important;
}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2{
  top:auto !important; bottom:100% !important; left:50% !important; right:auto !important;
  transform:translateX(-50%) !important; margin:0 0 6px !important;
}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3{
  top:50% !important; bottom:auto !important; transform:translateY(-50%) !important;
  width:112px !important; max-width:112px !important; box-sizing:border-box !important;
}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1{left:-118px !important; right:auto !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3{right:-118px !important; left:auto !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat .nm{max-width:110px !important; overflow:visible !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick{inset:0 !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot,
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot .card{width:var(--tw) !important; height:calc(var(--tw) * 1.4) !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p2{left:50% !important; top:calc(0.7 * var(--tw) + 10px) !important; transform:translate(-50%, -50%) !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p0{left:50% !important; top:calc(100% - 0.7 * var(--tw) - 10px) !important; transform:translate(-50%, -50%) !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p1{left:calc(0.5 * var(--tw) + 16px) !important; top:50% !important; transform:translate(-50%, -50%) !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p3{left:calc(100% - 0.5 * var(--tw) - 16px) !important; top:50% !important; transform:translate(-50%, -50%) !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot{z-index:3 !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.win{z-index:2 !important}
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #act:not(:has(*)),
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #msg:empty{display:none !important}

/* -- Small desk widths only (1024–1199 landscape: Fold/iPad landscape, small laptops): keep the side robots' names on screen.
      >= 1200 (laptops/desktops) is untouched. -- */
@media (min-width: 1024px) and (max-width: 1199px) and (min-height: 560px) and (orientation: landscape) {
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i11.pn-i12b.pn-i12c.pn-i12d #felt,
  html body.ct.pn #sGame.pn-desk.pn-i11.pn-i12b.pn-i12c.pn-i12d #felt{
    width:min(var(--pn-felt-w, 90%), calc(100% - 216px)) !important;
  }
}

/* -- Owner (pt9510u follow-up): phones (portrait + landscape) and tablets/foldables — each seat shows ONLY the avatar and the
      name tag. No "Meld N", "N tricks", "Pass/Bid N", "Dealer" or card-count labels under/over the seats; the team score
      panel keeps meld and points, and bids still pop the short-lived speech bubble. Laptops/desktops (.pn-desk) unchanged. -- */
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #felt .seat .chip,
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #felt .seat .pn-tk,
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #felt .seat .mini,
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #felt .seat .avw .tag,
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #mebar .chip,
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #mebar .tag,
html body.ct.pn #sGame:not(.pn-desk).pn-i8.pn-i9.pn-i12 #mebar .pn-tk{display:none !important}

/* -- Desk widths 1024–1099 (single-column desk: small laptops, iPad / Fold landscape). The seat panels sat ON the felt
      and covered their own played cards. Seats move to the rail (partner above, opponents beside) and the played-card
      cross scales to the felt. >= 1100 (two-column laptop layout) is untouched. -- */
@media (min-width: 1024px) and (max-width: 1099px) and (min-height: 560px) and (orientation: landscape) {
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt{
    margin:52px 136px 8px !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2{
    display:flex !important; flex-direction:row !important; align-items:center !important; gap:6px !important;
    top:auto !important; bottom:100% !important; left:50% !important; right:auto !important;
    transform:translateX(-50%) !important; margin:0 0 4px !important; padding:2px 8px 2px 2px !important;
    width:auto !important; max-width:none !important; white-space:nowrap !important;
  }
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .avw{width:42px !important; height:42px !important; flex:0 0 42px !important; padding:2px !important; box-sizing:border-box !important; margin:0 !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s2 .avw .av{width:100% !important; height:100% !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1,
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3{
    top:50% !important; bottom:auto !important; transform:translateY(-50%) !important;
    width:128px !important; max-width:128px !important; box-sizing:border-box !important; padding:2px !important;
  }
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1{left:-132px !important; right:auto !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3{right:-132px !important; left:auto !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1 .avw,
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3 .avw{width:68px !important; height:68px !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s1 .avw .av,
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat.s3 .avw .av{width:100% !important; height:100% !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .seat .nm{max-width:126px !important; overflow:visible !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick{inset:0 !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot,
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot .card{width:var(--tw) !important; height:calc(var(--tw) * 1.4) !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p2{left:50% !important; top:calc(0.7 * var(--tw) + 8px) !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p0{left:50% !important; top:calc(100% - 0.7 * var(--tw) - 8px) !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p1{left:calc(0.5 * var(--tw) + 18px) !important; top:50% !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p3{left:calc(100% - 0.5 * var(--tw) - 18px) !important; top:50% !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot{z-index:3 !important}
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.win{z-index:2 !important}
}
@supports (width: 1cqh) {
  @media (min-width: 1024px) and (max-width: 1099px) and (min-height: 560px) and (orientation: landscape) {
    html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt{
      container-type:size !important;
      --tw:max(32px, min(120px, calc((100cqh - 30px) / 2.85), calc((100cqw - 60px) / 3.4))) !important;
    }
  }
}
@media (min-width: 1024px) and (max-width: 1099px) and (min-height: 560px) and (orientation: landscape) {
  /* Score header words ran together (TRUMPBIDMELD…): fit them in their cells. */
  html body.ct.pn #sGame.pn-desk:not(.pn-i11).pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d table.pn-chart-tb th{
    font-size:11px !important;
    letter-spacing:0 !important;
    padding:4px 3px !important;
    white-space:nowrap !important;
  }
}
@media (min-width: 1024px) and (max-width: 1099px) and (min-height: 560px) and (orientation: landscape) {
  /* "Not your turn" / "Follow suit" toast sat on the top-left buttons here; drop it below the header band. */
  html body.pn:has(#sGame.pn-desk:not(.pn-i11):not([hidden])) .gk-toast{top:calc(var(--sat, 0px) + 128px) !important}
}

/* Status line wraps inside its panel instead of running off the right edge (tablet portrait, phone landscape side column). */
html body.ct.pn.pn-sq #sGame.pn-docked.pn-sq:not(.pn-desk):not(.pn-land).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnDock #msg.msg,
html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnDock #msg.msg{min-width:0 !important; max-width:100% !important; white-space:normal !important; overflow-wrap:anywhere !important; box-sizing:border-box !important}
html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #pnSide{min-width:0 !important}

/* Very short phone landscape (Android Chrome with the URL bar: ~780x280). The "You" pill moves beside the hand
   instead of under it, so the felt keeps enough height for the played-card cross. */
@media (orientation: landscape) and (max-height: 330px) {
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i .me{position:relative !important; padding-left:84px !important; box-sizing:border-box !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i .me #mebar.mebar{position:absolute !important; left:4px !important; top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; margin:0 !important; z-index:5 !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt{margin-top:32px !important}
}
/* -- Laptops with a short window (e.g. Windows Chrome 1366x768 -> ~1290x605 viewport): the bid panel stacked its two
      buttons and ran past its 78% cap, so "Open 25" / "Bid N" was cut off inside an inner scroll box. Keep the panel
      compact (buttons side by side, tighter type) and let it use the felt's full height, so every button shows. -- */
@media (min-width: 1024px) and (max-height: 760px) and (orientation: landscape) {
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act{
    max-height:calc(100% - 8px) !important;
    width:calc(100% - 20px) !important;
    max-width:480px !important;
    padding:8px 12px !important;
    box-sizing:border-box !important;
  }
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act .pn-bid h3{font-size:16px !important; line-height:1.2 !important; margin:0 0 6px !important}
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act .pn-bid .note{font-size:12.5px !important; line-height:1.25 !important; margin:4px 0 !important}
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act .pn-bid .row{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:8px !important; margin:4px 0 !important;
  }
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act .pn-bid .row .gk-btn{
    flex:1 1 0 !important; min-width:0 !important; width:auto !important;
    min-height:40px !important; height:auto !important; padding:6px 8px !important; font-size:15px !important; line-height:1.15 !important; white-space:normal !important;
  }
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act .pn-bid .stepper{gap:6px !important; margin:4px 0 !important}
  html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9 #felt #act.act .pn-bid .stepper .gk-btn{min-height:40px !important; height:40px !important; padding-top:0 !important; padding-bottom:0 !important}
}

@media (orientation: landscape) and (max-height: 330px) {
  /* If the felt is still too short for two stacked cards, the partner's and my card step half a card apart sideways,
     so neither can ever hide the other (partner still top, mine still bottom). */
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p2{left:calc(50% - 0.56 * var(--tw)) !important; top:calc(0.7 * var(--tw) + 2px) !important}
  html body.ct.pn.pn-shortland #sGame.pn-land:not(.pn-desk).pn-i8.pn-i9.pn-i12.pn-i12d.pn-i12e.pn-i12h.pn-i12i #felt .trick .slot.p0{left:calc(50% + 0.56 * var(--tw)) !important; top:calc(100% - 0.7 * var(--tw) - 2px) !important}
}
/* -- Laptops with a short window (Windows Chrome 1366x768 maximized = 1366x577 viewport): the played-card size had an
      80px floor, too big for a ~250px felt, so all four played cards piled on top of each other. Size them from the
      felt's own height so the cross always fits. -- */
@supports (width: 1cqh) {
  @media (min-width: 1100px) and (max-height: 760px) and (orientation: landscape) {
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt{
      container-type:size !important;
      --tw:max(40px, min(148px, 10.5vw, calc((100cqh - 12px) / 2.95))) !important;
    }
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick{inset:0 !important; width:auto !important; height:auto !important; transform:none !important}
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick .slot,
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick .slot .card{width:var(--tw) !important; height:calc(var(--tw) * 1.4) !important}
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick .slot.p2{left:50% !important; top:calc(0.7 * var(--tw) + 4px) !important; transform:translate(-50%, -50%) !important}
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick .slot.p0{left:50% !important; top:calc(100% - 0.7 * var(--tw) - 4px) !important; transform:translate(-50%, -50%) !important}
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick .slot.p1{left:calc(50% - 1.25 * var(--tw)) !important; top:50% !important; transform:translate(-50%, -50%) !important}
    html body.ct.pn #sGame.pn-desk.pn-i8.pn-i9.pn-i12.pn-i12c.pn-i12d #felt .trick .slot.p3{left:calc(50% + 1.25 * var(--tw)) !important; top:50% !important; transform:translate(-50%, -50%) !important}
  }
}
/* Garage reveal + "Shuffling…" between hands play for everyone; under OS reduced motion they cut instead of fading. */
@media (prefers-reduced-motion: reduce){
  .ct.pn #sGame.pn-garage-reveal *, .ct.pn #sGame.pn-garage-in *{transition:none !important}
}

/* -- Phone portrait trick (owner t9533u): the played cards were tilted and piled on each other, so a card could hide
      under another. Each played card now sits flat in front of its player (partner top, opponents left/right, mine
      bottom), sized from the felt so the four never touch. Only the trick layout changes. -- */
@supports (width: 1cqh) {
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt{container-type:size !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick{inset:0 !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot{
    --tw:max(44px, min(110px, calc((100cqh - 14px - var(--pn-hov, 0px) - var(--pn-s2ov, 0px)) / 2.9), calc((100cqw - 16px - var(--pn-s1ov, 0px) - var(--pn-s3ov, 0px)) / 3.15))) !important;
    width:var(--tw) !important; height:calc(var(--tw) * 1.4) !important;
    rotate:none !important; z-index:3 !important;
  }
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot .card{width:100% !important; height:100% !important; rotate:none !important; transform:none !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot.p2{left:50% !important; top:calc(var(--pn-s2ov, 0px) + 0.7 * var(--tw) + 5px) !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot.p0{left:50% !important; top:calc(100% - var(--pn-hov, 0px) - 0.7 * var(--tw) - 5px) !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot.p1{left:calc(var(--pn-s1ov, 0px) + 0.5 * var(--tw) + 6px) !important; top:calc(50% + (var(--pn-s2ov, 0px) - var(--pn-hov, 0px)) / 2) !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot.p3{left:calc(100% - var(--pn-s3ov, 0px) - 0.5 * var(--tw) - 6px) !important; top:calc(50% + (var(--pn-s2ov, 0px) - var(--pn-hov, 0px)) / 2) !important; transform:translate(-50%, -50%) !important}
  html body.ct.pn #sGame.pn-docked:not(.pn-desk):not(.pn-land):not(.pn-sq).pn-i8.pn-i9.pn-i12.pn-i12d #felt .trick .slot.win{z-index:4 !important}
}
/* "Them" ran out of its 44px cell under the trump tile (padding ate the cell). Tighter side padding and type so the
   row labels fit their own cell in every layout. */
@media (max-width: 1599px){
  html body.ct.pn #sGame#sGame table.pn-chart-tb tbody th[scope="row"]{
    padding-left:3px !important; padding-right:1px !important;
    font-size:min(14px, 1em) !important; letter-spacing:-0.4px !important;
    white-space:nowrap !important; overflow:visible !important;
  }
}
/* "0 of 3 picked" showed twice (counter line + the button). The button keeps the count; the counter line stays for
   screen readers only. */
html body.ct.pn #pnPickN.pn-pickn{
  position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}
/* tfPL1 (owner t9534u): the deal (flying backs) and the hand fan-in play even with Reduce Motion / calm on. */
html body.ct.pn #sGame #hand .hc.dealt,
html body.ct.pn.calm #sGame #hand .hc.dealt{
  animation-name:dealIn !important; animation-duration:.42s !important; animation-iteration-count:1 !important;
  animation-timing-function:cubic-bezier(.2,1.2,.4,1) !important; animation-fill-mode:backwards !important;
}
/* -- Quick score (owner t9537u/t9538u): phones + Fold, scoreboard folded. The big caret chip becomes one thin
      always-visible line (trump symbol, Bid N, Need X, Us X · Them Y) with a small chevron; tapping it opens the chart. -- */
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min.pn-docked #pnTop{flex-wrap:wrap !important; row-gap:4px !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min.pn-docked #pnTop > #pnDock{flex:1 1 100% !important; min-width:0 !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min.pn-docked #pnTop #pnMinBoardBar,
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min.pn-land #pnTop #pnMinBoardBar{
  order:-1 !important; flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; position:relative !important;
}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min.pn-land #pnTop #pnMinBoardBar{order:0 !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs{
  width:100% !important; max-width:none !important; min-width:0 !important; flex:1 1 100% !important; height:26px !important; min-height:26px !important; max-height:26px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:6px !important;
  padding:0 8px !important; margin:0 !important; box-sizing:border-box !important;
  background:rgba(12,14,20,.86) !important; border:1px solid rgba(212,175,55,.55) !important; border-radius:8px !important;
  box-shadow:none !important; color:#F4F6F8 !important; overflow:hidden !important;
}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs{display:none}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs .pn-qs{
  display:flex !important; align-items:center !important; gap:6px !important; flex:1 1 auto !important; min-width:0 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:clip !important;
  font:700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; color:#F4F6F8 !important; letter-spacing:0 !important;
}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs b{color:#F1D77A !important; font-weight:900 !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-sep{width:1px; height:12px; background:rgba(244,246,248,.35); flex:none}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:none !important;
  width:20px; height:20px; border-radius:5px; background:#FFF8E6 !important; font-size:16px !important; line-height:1 !important; font-variant-emoji:text;
}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr.is-red{color:#C62828 !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr.is-black{color:#15171C !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs .pn-caret-hit{
  position:static !important; flex:none !important; width:14px !important; height:14px !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs .pn-caret-ico{
  width:12px !important; height:12px !important; min-width:0 !important; min-height:0 !important; transform:scale(.55) !important; transform-origin:center !important;
}
@media (orientation: landscape) and (max-height: 560px){
  html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs .pn-qs{font-size:11.5px !important; gap:4px !important}
  html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs{padding:0 5px !important; gap:4px !important; height:24px !important; min-height:24px !important; max-height:24px !important}
  html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr{width:18px; height:18px; font-size:14px !important}
}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs{-webkit-text-fill-color:#F4F6F8 !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs b{-webkit-text-fill-color:#F1D77A !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr.is-red{-webkit-text-fill-color:#C62828 !important}
html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr.is-black{-webkit-text-fill-color:#15171C !important}
@media (orientation: landscape) and (max-height: 560px){
  html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs .pn-qs{font-size:10.5px !important; gap:3px !important}
  html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnMinBoard .pn-qs .pn-qs-tr{width:16px; height:16px; font-size:13px !important}
}
@media (orientation: landscape) and (max-height: 330px){
  html body.ct.pn #sGame#sGame:not(.pn-desk).pn-board-min #pnTop #pnMinBoard.pn-hasqs .pn-qs{font-size:10px !important; gap:2px !important; letter-spacing:-0.2px !important}
}
/* -- Show 'Em (owner t9546u): claim button in the action dock + the reveal fan on the felt -- */
html body.ct.pn #sGame #pnClaimBtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:55;white-space:nowrap;animation:pnShowIn .25s ease-out both;}
html body.ct.pn #sGame #pnClaimBtn.pn-claim{min-height:44px;padding:8px 22px;font-size:17px;font-weight:800;color:#1A1405 !important;-webkit-text-fill-color:#1A1405 !important;
  background:linear-gradient(180deg,#F7DD7C,#E0B53C) !important;border:2px solid #FFF1B8;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 18px rgba(247,221,124,.55);letter-spacing:.2px}
html body.ct.pn #sGame #act .pn-claim-row{display:flex;justify-content:center}
html body.ct.pn #sGame .pn-showem{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(10,12,18,.62),rgba(10,12,18,.18) 70%);animation:pnShowIn .28s ease-out both}
html body.ct.pn #sGame .pn-showem.out{animation:pnShowOut .26s ease-in both}
html body.ct.pn #sGame .pn-showem-t{margin:0;font-weight:900;font-size:clamp(16px,4.2cqw,26px);color:#F7DD7C;-webkit-text-fill-color:#F7DD7C;text-shadow:0 2px 6px rgba(0,0,0,.8)}
html body.ct.pn #sGame .pn-showem-fan{--cw:min(64px,calc((100cqw - 24px) / (var(--n) * 0.62 + 0.6)),calc((100cqh - 40px) * 0.68));display:flex;justify-content:center;max-width:100%}
html body.ct.pn #sGame .pn-showem-c{display:block;width:var(--cw);margin-left:calc(var(--cw) * -0.38);animation:pnShowCard .42s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(var(--i) * 45ms)}
html body.ct.pn #sGame .pn-showem-c:first-child{margin-left:0}
html body.ct.pn #sGame .pn-showem-c > *{width:100% !important;height:auto !important;aspect-ratio:5/7;position:relative !important;left:auto !important;top:auto !important;transform:none !important;box-shadow:0 4px 10px rgba(0,0,0,.5)}
@keyframes pnShowIn{from{opacity:0}to{opacity:1}}
@keyframes pnShowOut{from{opacity:1}to{opacity:0}}
@keyframes pnShowCard{from{opacity:0;transform:translateY(18px) rotateY(80deg) scale(.8)}to{opacity:1;transform:none}}