/* Euchre-local card-table styles (rh5): the Rolling Hills rules that used to live in games/table.css (lines 253-637 at cba75a7), now game-local on top of Arcade's shared table.css. */
/* ---------- Rolling Hills port t8812 (Euchre, Pinochle on live tfLW7): house rules ----------
   Text 18px+, taps 48px+, nothing blinks or pulses, Pause sheet, dark / bright room, hidden 3D seam. Scoped to .ct pages only. */
.ct{font-size:18px}
.ct .gk-btn,.ct .gk-seg button,.ct .lvrow .gk-btn.icon,.ct .lvn,.ct .suitb,.ct .ptr button{min-height:48px;min-width:48px}
.ct .gk-chip{min-height:40px;font-size:18px}
.ct .gk-notices{font-size:18px}
.ct .gk-card p,.ct .gk-card li,.ct .gk-card h3,.ct .gk-set,.ct .gk-set small,.ct .gk-seg button,.ct .gk-host,.ct .gk-panel .lbl,.ct .gk-toast{font-size:18px}
.ct .gk-sw{width:64px;height:40px}
.ct .gk-set{min-height:56px}
.ct .gk-bar h1,.ct .gk-bar h2{font-size:20px}
.ct .gk-btn.icon{width:48px;height:48px}
.ct .hc{min-height:48px}
.ct *{animation-iteration-count:1!important}
/* pause sheet */
.ct #shPause .gk-card{text-align:center}
.ct #shPause .big{font-size:24px;color:var(--gold2);margin:4px 0 10px}
/* bright room (dark mode off): lighter vignette, warmer room; dark mode is the house default */
.ct.lite .gk-bg::after{background:radial-gradient(130% 90% at 50% 40%,rgba(255,240,210,.08),rgba(30,20,50,.45) 80%)}
.ct.lite .gk-card{background:linear-gradient(180deg,#3d2566,#2a1747)}
/* dark: deeper room for low light */
.ct.dark .gk-bg::after{background:radial-gradient(130% 90% at 50% 40%,rgba(6,8,24,.35),rgba(2,3,10,.92) 76%)}
/* 3D seam: hidden until approved 3D table art; the 2D table renders in both cases tonight */
.ct [data-3d-only]{display:none!important}
/* small phones: keep 18px text inside seats and the scoreboard */
@media (max-width:400px){.ct .seat .nm{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ct #sb .tm .nm{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.ct .lvr{min-height:48px}
@media (orientation:landscape) and (max-height:560px){.ct .lvrow{flex-wrap:wrap;row-gap:4px}.ct .lvrow .lvr{order:-1;flex:1 1 100%}.ct .lvrow .gk-btn.icon{flex:1 1 0}.ct .lvn{flex:1 1 0}}
@media (max-width:420px){.ct .trumpb .tl{display:none}.ct .seat.s2 .nm{max-width:46vw}}
@media (orientation:landscape) and (max-height:560px){.ct .sb{right:calc(var(--sar) + 222px)}.ct .trumpb .tl{display:none}}
.ct .gk-btn{font-size:18px}
/* landscape phones: side seats as a compact row (avatar beside name + tricks) so 18px text never collides with your bar */
@media (orientation:landscape) and (max-height:560px){
  .ct .seat.s1,.ct .seat.s3{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;row-gap:2px;width:auto;align-items:center;top:50px}
  .ct .seat.s1 .avw{grid-column:1;grid-row:1 / span 2}.ct .seat.s1 .nm,.ct .seat.s1 .chip{grid-column:2;justify-self:start}
  .ct .seat.s3 .avw{grid-column:2;grid-row:1 / span 2}.ct .seat.s3 .nm,.ct .seat.s3 .chip{grid-column:1;justify-self:end}
  .ct .seat.s1 .mini,.ct .seat.s3 .mini{display:none}
  .ct .infob{top:auto;bottom:8px;right:8px}
}
/* ===== rh2 art pass (t8849u, 5% check 1): lit felt, wood rail, portrait rings, name plates, card sheen, Us/Them pills ===== */
.ct .felt{border-width:14px;border-radius:34px;
  background:
    radial-gradient(52% 42% at 50% 46%,rgba(255,246,206,.30) 0,rgba(255,246,206,.10) 48%,rgba(255,246,206,0) 72%) padding-box,
    radial-gradient(120% 95% at 50% 44%,#2a9a66 0,#1a7a4d 38%,#0f5636 70%,#08341f 100%) padding-box,
    linear-gradient(180deg,rgba(255,226,170,.42) 0,rgba(255,226,170,.06) 16%,rgba(0,0,0,0) 45%,rgba(0,0,0,.38) 100%) border-box,
    url(../../img/table/wood.webp) center/300px border-box;
  box-shadow:0 18px 36px rgba(0,0,0,.7),0 2px 0 1px rgba(255,214,140,.35),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 3px 6px rgba(0,0,0,.55),inset 0 0 70px rgba(0,0,0,.55)}
.ct .felt::before{opacity:.34}
.ct .felt::after{inset:6px;border-radius:24px;border:1.5px solid rgba(255,222,150,.28);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
/* portrait ring: gold rim, rim light, team tint, name plate */
.ct .seat{width:auto;min-width:96px;gap:0}
.ct .seat .avw{width:66px;height:66px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,#fff2c0,#c9962f 22%,#7a5418 40%,#e8c66a 58%,#fff2c0 72%,#a7782a 88%,#fff2c0);box-shadow:0 6px 12px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5)}
.ct .seat .av{width:60px;height:60px;border:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);background:#14223f}
.ct .seat .avw::after{content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;background:radial-gradient(90% 60% at 30% 12%,rgba(255,255,255,.32),rgba(255,255,255,0) 55%),radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.45),rgba(0,0,0,0) 55%);box-shadow:inset 0 0 0 1.5px rgba(255,240,200,.35)}
.ct .seat.partner .avw{background:conic-gradient(from 200deg,#e9fff1,#3fbf7a 22%,#1b6b42 40%,#8fe3ad 58%,#e9fff1 72%,#2f9a5e 88%,#e9fff1)}
.ct .seat.turn .av{box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.ct .seat.turn .avw{box-shadow:0 0 0 3px rgba(255,229,138,.55),0 0 18px rgba(255,214,96,.8),0 6px 12px rgba(0,0,0,.6)}
.ct .seat .plate{position:relative;z-index:1;margin-top:-10px;display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 10px 3px;border-radius:12px;background:linear-gradient(180deg,#3a2560,#1b1030);border:1.5px solid #d9b25a;box-shadow:0 4px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.ct .seat .nm{font-size:18px;line-height:22px;max-width:none!important;overflow:visible!important;text-overflow:clip!important;color:#fff4dc}
.ct .seat.partner .nm::after{content:none}
.ct .seat.partner .plate{border-color:#6fd39a;background:linear-gradient(180deg,#1d4a36,#0d261b)}
.ct .seat .chip{min-height:0;padding:0;border:0;background:none;line-height:22px;color:#ffe58a}
.ct .seat .mini{margin-top:4px}
/* cards: soft shadow + paper sheen */
.ct .hand .hc .card,.ct .slot .card{border-radius:8px}
.ct .hand .hc .card{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.ct .slot .card{filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.ct .hand .hc::before,.ct .slot:not(:empty)::before{content:"";position:absolute;inset:0;z-index:2;border-radius:8px;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,.07) 100%);box-shadow:inset 0 0 0 1px rgba(120,96,60,.35)}
.ct .hand.myturn .hc.no{filter:brightness(.66) saturate(.75)}
/* Us / Them pills */
.ct .sb{gap:8px}
.ct .sb .tm.f{flex-direction:row;align-items:center;gap:8px;padding:4px 12px 4px 10px;min-height:48px;border-radius:16px;background:linear-gradient(180deg,#2e1d4f,#140b26);border:1.5px solid rgba(217,178,90,.75);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.ct .sb .tm.f.us{border-color:#6fd39a;background:linear-gradient(180deg,#1f4a37,#0c2219)}
.ct .sb .tm.f .lb{font-size:18px;font-weight:700;color:#e9dcc0}
.ct .sb .tm.f .fs{display:flex;margin-left:auto}
.ct .sb .tm.f .fa,.ct .sb .tm.f .fy{width:32px;height:32px;border-radius:50%;border:2px solid #d9b25a;object-fit:cover;background:#14223f;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.ct .sb .tm.f .fs>*+*{margin-left:-10px}
.ct .sb .tm.f .fy{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#ffe58a,#e2b23e)}.ct .sb .tm.f .fy svg{fill:#2a1a00}
.ct .sb .tm.f .sc{font-size:24px;line-height:1;min-width:24px;text-align:right}
.ct .sb .tm.f.lead .sc::after{content:none}
.ct .sb .tm.f.lead{box-shadow:0 0 0 2px rgba(255,229,138,.35),0 4px 10px rgba(0,0,0,.5)}
.ct .sb .tgt{flex-direction:row;gap:5px;min-height:48px;padding:4px 12px;border-radius:16px;background:linear-gradient(180deg,#2e1d4f,#140b26);border:1.5px solid rgba(217,178,90,.5);white-space:nowrap}
.ct .sb .tgt b{font-size:20px;color:#ffe58a}
/* felt badges: glassy pills in the lower corners so they never sit under a portrait */
.ct .trumpb,.ct .infob{top:auto;bottom:10px;background:linear-gradient(180deg,rgba(40,26,70,.92),rgba(14,8,28,.92));border:1.5px solid rgba(217,178,90,.7);box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);min-height:40px}
.ct .trumpb{left:10px}.ct .infob{right:10px;max-width:44%;line-height:1.15;display:flex;align-items:center;justify-content:center}
.ct .msg{bottom:58px}
@media (orientation:landscape) and (max-height:560px){
  .ct .seat.s1 .plate{grid-column:2;grid-row:1 / span 2;margin-top:0;justify-self:start}
  .ct .seat.s3 .plate{grid-column:1;grid-row:1 / span 2;margin-top:0;justify-self:end}
  .ct .seat .avw{width:56px;height:56px}.ct .seat .av{width:50px;height:50px}
  .ct .infob{bottom:10px}
}
/* rh2 portrait phones: partner row on top, side robots high on the rails, trick diamond in the open felt, badges in the lower corners */
.ct .seat .cnt{display:none}
@media (orientation:portrait) and (max-width:520px){
  .ct .felt{--tw:54px}
  .ct .seat .mini{display:none}
  .ct .seat .avw{width:58px;height:58px}.ct .seat .av{width:52px;height:52px}
  .ct .seat .plate{margin-top:-8px;padding:1px 8px 2px}
  .ct .seat.hascnt .plate .chip{display:none}
  .ct .seat.hascnt .cnt{display:flex;position:absolute;z-index:3;right:-6px;bottom:-2px;min-width:28px;height:28px;padding:0 5px;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(180deg,#ffe58a,#e2b23e);color:#2a1a00;font-size:18px;font-weight:800;line-height:1;border:2px solid #1b1030;box-shadow:0 2px 4px rgba(0,0,0,.5)}
  .ct .seat.s2{top:6px;flex-direction:row;align-items:center}
  .ct .seat.s2 .plate{margin:0 0 0 -12px;padding:2px 10px 2px 18px;z-index:0}
  .ct .seat.s2.hascnt .cnt{right:-4px}
  .ct .seat.s1,.ct .seat.s3{top:62px;min-width:0}
  .ct .seat.s1{left:4px}.ct .seat.s3{right:4px}
  .ct .seat .tag{top:calc(100% + 26px);right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}
  .ct .seat.s2 .tag{top:14px;left:auto;right:calc(100% + 8px);transform:none}
  .ct .seat.s2 .avw{position:relative}
  .ct .trick .slot.p2{left:50%;top:108px}
  .ct .trick .slot.p0{left:50%;top:calc(100% - 46px)}
  .ct .trick .slot.p1{left:calc(50% - 32px);top:calc(50% + 34px)}
  .ct .trick .slot.p3{left:calc(50% + 32px);top:calc(50% + 34px)}
  .ct .trick .slot.p1 .card{transform:rotate(-7deg)}.ct .trick .slot.p3 .card{transform:rotate(7deg)}
  .ct .trumpb{left:8px;bottom:8px;padding:3px 10px 3px 4px}.ct .infob{right:8px;bottom:8px;max-width:118px;padding:3px 10px}
  .ct .msg{bottom:auto;top:calc(100% - 70px);left:50%;right:auto;width:110px;margin-left:-55px;z-index:2;line-height:22px}
  .ct .sb .tm.f{min-height:44px}.ct .sb .tgt{min-height:44px}
}
/* rh2 5% check 2 (Pinochle 375x667): title never truncates, compact 'to' box, meld chips off the felt on phones */
@media (max-width:420px){
  .ct .gk-bar{gap:4px}
  .ct .gk-bar h1,.ct .gk-bar h2{font-size:18px;overflow:visible;text-overflow:clip;white-space:nowrap}
  .ct .sb{gap:6px}
  .ct .sb .tm.f{gap:6px;padding:4px 8px}
  .ct .sb .tgt{flex-direction:column;gap:0;padding:2px 8px;line-height:20px}
  .ct .sb .tgt b{font-size:18px}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .seat.meldc .plate .chip{display:none}
  .ct .infob{max-width:150px}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .felt{border-width:11px}
  .ct .sb .tm.f,.ct .sb .tgt{min-height:40px}
  .ct .gk-bar{min-height:48px}
  .ct .seat.s1 .tag,.ct .seat.s3 .tag{top:calc(100% + 24px)}
}
.ct .infob{white-space:pre-line}
@media (orientation:portrait) and (max-width:520px){
  .ct .trick .slot.p1{top:calc(50% + 22px)}.ct .trick .slot.p3{top:calc(50% + 22px)}
  .ct .msg{top:calc(100% - 50px)}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .msg{top:auto;bottom:56px;left:50%;right:auto;width:auto;max-width:200px;margin:0;transform:translateX(-50%);z-index:6;padding:2px 12px;border-radius:999px;background:rgba(14,8,28,.82);border:1.5px solid rgba(217,178,90,.55);white-space:nowrap;min-height:0}
  .ct .msg:empty{display:none}
  .ct .infob{max-width:164px;padding:3px 8px}
}
/* ===== rh2b art pass (5% check 1b): table surface, bigger character portraits, trick fan, arc hand ===== */
.ct input.ctv{-webkit-appearance:none;appearance:none;flex:1 1 160px;min-width:140px;height:48px;background:transparent;cursor:pointer}
.ct input.ctv::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#8a4ff0,#f5c542)}
.ct input.ctv::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,#8a4ff0,#f5c542)}
.ct input.ctv::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff4dc;border:3px solid #f5c542;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ct input.ctv::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff4dc;border:3px solid #f5c542}
.ct input.ctv:focus-visible{outline:3px solid #8fd3ff;outline-offset:2px;border-radius:10px}
/* the felt element is now only a layout box; the table surface is .tbl (perspective lives there, so seats, cards and text stay flat and sharp) */
.ct .felt{border:0!important;background:none!important;box-shadow:none!important;overflow:visible;border-radius:0}
.ct .felt::before,.ct .felt::after{content:none!important}
.ct .tbl{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:40px;transform:perspective(1100px) rotateX(9deg);transform-origin:50% 55%;
  background:
    linear-gradient(180deg,rgba(255,224,170,.55) 0,rgba(255,224,170,.10) 5%,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 86%,rgba(0,0,0,.45) 100%),
    radial-gradient(130% 90% at 50% 0%,rgba(255,200,140,.22),rgba(0,0,0,0) 60%),
    url(../../img/table/wood.webp) center/260px,#4a2412;
  box-shadow:0 22px 34px rgba(0,0,0,.75),0 6px 10px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,236,196,.55),inset 0 -3px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.6)}
.ct .tbl::before{content:"";position:absolute;inset:5px;border-radius:35px;pointer-events:none;box-shadow:inset 0 2px 1px rgba(255,232,190,.35),inset 0 -2px 1px rgba(0,0,0,.4);background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,0) 8%,rgba(0,0,0,0) 92%,rgba(0,0,0,.25))}
.ct .tbl-felt{position:absolute;inset:14px;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(46% 36% at 50% 42%,rgba(255,238,190,.34) 0,rgba(255,238,190,.12) 50%,rgba(255,238,190,0) 100%),
    radial-gradient(115% 90% at 50% 42%,#2fa46b 0,#1d8251 34%,#126038 64%,#073a21 100%);
  box-shadow:inset 0 8px 14px rgba(0,0,0,.62),inset 0 -4px 10px rgba(0,0,0,.45),inset 0 0 0 2px rgba(0,0,0,.35),inset 0 0 90px rgba(0,0,0,.62)}
.ct .tbl-felt::before{content:"";position:absolute;inset:0;background:url(../../img/table/felt-grain.webp) center/160px;opacity:.5;mix-blend-mode:overlay}
.ct .tbl-felt::after{content:"";position:absolute;inset:7px;border-radius:22px;border:1.5px solid rgba(255,222,150,.30)}
/* ring colours: Pinky pink-gold, Tommy blue-silver-gold, DJ purple-gold; the partner keeps a green name plate */
.ct .seat.k-pinky .avw{background:conic-gradient(from 210deg,#ffe3ec,#e88aa8 18%,#a8475f 34%,#f3c56a 52%,#ffe3ec 66%,#d06b88 82%,#ffe3ec)!important}
.ct .seat.k-tommy .avw{background:conic-gradient(from 210deg,#eef4ff,#8fa8d6 18%,#3d527f 34%,#e8c66a 52%,#eef4ff 66%,#6e86b8 82%,#eef4ff)!important}
.ct .seat.k-dj .avw{background:conic-gradient(from 210deg,#f3e8ff,#b48be6 18%,#5b3590 34%,#e8c66a 52%,#f3e8ff 66%,#8e63c9 82%,#f3e8ff)!important}
.ct .seat.turn .avw{box-shadow:0 0 0 3px rgba(255,229,138,.6),0 0 22px rgba(255,214,96,.85),0 8px 14px rgba(0,0,0,.6)!important}
.ct .mebar{position:relative;z-index:6}
.ct .infob{white-space:nowrap}
@media (orientation:portrait) and (max-width:520px){
  .ct .felt{--tw:64px}
  .ct .seat .avw{width:90px;height:90px;padding:4px}.ct .seat .av{width:82px;height:82px}
  .ct .seat .avw::after{inset:4px}
  .ct .seat .plate{margin-top:-12px}
  .ct .seat.hascnt .cnt{right:-2px;bottom:2px;min-width:30px;height:30px;border-radius:15px}
  .ct .seat.s2{top:-6px}
  .ct .seat.s2 .plate{margin:0 0 0 -16px;padding:2px 12px 2px 20px}
  .ct .seat.s1,.ct .seat.s3{top:96px}
  .ct .seat.s1{left:-2px}.ct .seat.s3{right:-2px}
  .ct .seat .tag{top:calc(100% + 22px)}
  .ct .seat.s2 .tag{top:30px;right:calc(100% + 6px)}
  /* the trick: a tidy fan, each card leaning toward the seat that played it */
  .ct .trick .slot.p2{left:50%;top:calc(50% - 4px)}
  .ct .trick .slot.p1{left:calc(50% - 38px);top:calc(50% + 34px)}
  .ct .trick .slot.p3{left:calc(50% + 38px);top:calc(50% + 34px)}
  .ct .trick .slot.p0{left:50%;top:calc(50% + 70px)}
  .ct .trick .slot.p2 .card{transform:rotate(-4deg)}.ct .trick .slot.p0 .card{transform:rotate(3deg)}
  .ct .trick .slot.p1 .card{transform:rotate(-14deg)}.ct .trick .slot.p3 .card{transform:rotate(14deg)}
  .ct .trumpb{left:16px;bottom:18px}.ct .infob{right:16px;bottom:18px;max-width:none}
  .ct .msg{bottom:66px}
  /* your plate sits on the near rail, so the band between table and hand closes up */
  .ct .me{margin-top:-22px;gap:0}
  .ct .mebar{min-height:34px;gap:6px;margin:0 auto;padding:2px 12px;border-radius:14px;background:linear-gradient(180deg,#3a2560,#1b1030);border:1.5px solid #d9b25a;box-shadow:0 4px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
  .ct .mebar .chip{border:0;background:none;padding:0}
  .ct .hand{margin-top:2px}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .trick .slot.p2{top:calc(50% - 16px)}
  .ct .trick .slot.p1{left:calc(50% - 50px);top:calc(50% + 30px)}
  .ct .trick .slot.p3{left:calc(50% + 50px);top:calc(50% + 30px)}
  .ct .trick .slot.p0{top:calc(50% + 66px)}
  .ct .hand{margin-top:14px}
}
@media (orientation:portrait) and (max-width:520px){.ct .trick .slot.p1{left:calc(50% - 44px);top:calc(50% + 34px)}.ct .trick .slot.p3{left:calc(50% + 44px);top:calc(50% + 34px)}.ct .seat.s1,.ct .seat.s3{z-index:5}}
.ct .infob{white-space:pre;line-height:1.15}
@media (orientation:portrait) and (max-width:520px){.ct .msg{bottom:auto;top:calc(50% + 74px)}.ct .seat.s1,.ct .seat.s3{z-index:4}}
.ct .infob{white-space:pre;line-height:1.15}
@media (orientation:portrait) and (max-width:520px){.ct .msg{bottom:auto;top:calc(50% + 74px)}.ct .seat.s1,.ct .seat.s3{z-index:4}}
@media (orientation:portrait) and (max-width:520px){
  .ct .trick .slot.p2{top:calc(50% - 24px)}
  .ct .trick .slot.p1{top:calc(50% + 22px)}.ct .trick .slot.p3{top:calc(50% + 22px)}
  .ct .seat.s1 .tag,.ct .seat.s3 .tag{top:-12px}
}
@media (orientation:portrait) and (max-width:520px){.ct .msg{top:min(calc(50% + 74px),calc(100% - 112px))}}
@media (orientation:portrait) and (max-width:520px){
  .ct .msg{top:calc(50% + 74px)}
  .ct .msg.mine{display:none}
  .ct .mebar.turn{border-color:#ffe58a;box-shadow:0 0 0 2px rgba(255,229,138,.35),0 0 16px rgba(255,214,96,.6),0 4px 8px rgba(0,0,0,.55)}
  .ct .mebar.turn .nm::after{content:" \00b7  your turn";color:#fff4dc}
}
/* ===== rh2c (5% check 1c): 3D table by default (2D toggle), padded rail, warm light pool, contact shadows, no glows,
   one score strip (scores + trump + maker), one status line, bigger trick cards clear of the portraits ===== */
/* -- no glows anywhere on the table: turn = solid gold ring + lift, win = lift only -- */
.ct .seat.turn .av{box-shadow:none}
.ct .seat.turn .avw{box-shadow:0 0 0 3px #ffe58a,0 3px 4px rgba(0,0,0,.45),0 12px 18px rgba(0,0,0,.5)!important}
.ct .slot.win .card,.ct .trick .slot.win{box-shadow:none}
.ct .trophy{animation:none!important;box-shadow:0 0 0 4px rgba(0,0,0,.25),0 8px 16px rgba(0,0,0,.5)}
.ct .bidgrid button.sug{box-shadow:0 0 0 2px #ffe58a}
.ct .sb .tm.f.lead{box-shadow:0 3px 4px rgba(0,0,0,.4),0 8px 14px rgba(0,0,0,.35)}
/* -- depth: layered contact + ambient shadows under portraits and cards -- */
.ct .seat .avw{box-shadow:0 2px 3px rgba(0,0,0,.5),0 10px 16px rgba(0,0,0,.45),0 22px 30px rgba(0,0,0,.25)}
.ct .slot .card{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 6px 6px rgba(0,0,0,.3)) drop-shadow(0 14px 16px rgba(0,0,0,.28))}
.ct .hand .hc .card{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 8px 10px rgba(0,0,0,.38))}
/* -- the table: padded leather rail on a wood lip, felt with ambient occlusion at the rail and a warm overhead light pool -- */
.ct .tbl{transform:perspective(900px) rotateX(14deg);transform-origin:50% 60%;border-radius:44px;
  background:
    linear-gradient(180deg,rgba(255,236,206,.30) 0,rgba(255,236,206,0) 7%,rgba(0,0,0,0) 84%,rgba(0,0,0,.40) 100%),
    radial-gradient(120% 80% at 50% 0%,rgba(255,206,150,.18),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#5a2f1d,#3a1c10);
  box-shadow:0 26px 34px rgba(0,0,0,.70),0 8px 12px rgba(0,0,0,.5),inset 0 0 0 3px #7a4a26,inset 0 0 0 4px rgba(0,0,0,.55)}
.ct .tbl::before{inset:4px;border-radius:40px;background:
    radial-gradient(140% 100% at 50% 0%,rgba(255,240,220,.20),rgba(255,240,220,0) 55%),
    linear-gradient(180deg,#43261c,#2a1712 60%,#1d0f0b);
  box-shadow:inset 0 3px 2px rgba(255,226,196,.28),inset 0 -4px 3px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5)}
.ct .tbl::after{content:"";position:absolute;inset:11px;border-radius:33px;pointer-events:none;border:2px solid rgba(214,166,92,.55);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.ct .tbl-felt{inset:16px;border-radius:28px;
  background:
    radial-gradient(52% 40% at 50% 44%,rgba(255,226,160,.30) 0,rgba(255,226,160,.12) 46%,rgba(255,226,160,0) 100%),
    radial-gradient(120% 95% at 50% 44%,#38ad70 0,#228a55 32%,#14683c 62%,#08402a 100%);
  box-shadow:inset 0 10px 12px rgba(0,0,0,.55),inset 0 3px 3px rgba(0,0,0,.5),inset 0 -6px 10px rgba(0,0,0,.42),inset 10px 0 14px rgba(0,0,0,.3),inset -10px 0 14px rgba(0,0,0,.3),inset 0 0 70px rgba(0,0,0,.45)}
.ct .tbl-felt::after{inset:9px;border-radius:21px;border:1.5px solid rgba(255,222,150,.26)}
body[data-view="2d"] .ct .tbl,.ct[data-view="2d"] .tbl{transform:none}
/* -- the 3D / 2D toggle row in Settings -- */
.ct #viewSeg button{min-height:48px;min-width:64px}
.ct #viewSeg button.on{background:#f5c542;color:#1b1030}
/* -- one score strip: Us, Them, trump + maker, target -- */
.ct .hud{display:flex;align-items:stretch;gap:6px}
.ct .hud .sb{flex:1 1 auto;min-width:0}
.ct .hud .trumpb{position:static!important;flex:0 0 auto;display:flex;align-items:center;gap:2px;min-height:48px;padding:4px 8px;border-radius:14px;
  background:linear-gradient(180deg,#3a2560,#1b1030);border:1.5px solid #d9b25a;box-shadow:0 3px 4px rgba(0,0,0,.4),0 8px 14px rgba(0,0,0,.3)}
.ct .hud .trumpb:empty{display:none}
.ct .hud .trumpb .tl{display:none}
.ct .hud .trumpb .mk img,.ct .hud .trumpb .mk .fy{width:32px;height:32px;border-radius:50%;margin-left:-6px;border:2px solid #d9b25a;background:#1b1030;display:inline-grid;place-items:center;object-fit:cover}
.ct .hud .trumpb .mk .fy svg{fill:#ffe58a}
/* -- status line: turn banner + need, then your small chip (tricks, dealer button) -- */
.ct .strow{display:none}
.ct .seat .dl{display:none}
.ct .seat.dealer .dl,.ct .mebar .dl{display:none}
@media (orientation:portrait) and (max-width:520px){
  .ct .hud .sb .tm.f .fs{display:none}
  .ct .hud .trumpb .tn{display:none}
  .ct .seat .tag{display:none!important}
  .ct .msg{display:none!important}
  .ct .seat.dealer .dl{display:grid}
  .ct .dl{position:absolute;left:-4px;bottom:2px;z-index:3;width:30px;height:30px;border-radius:50%;place-items:center;font:800 18px/1 inherit;font-family:inherit;color:#1b1030;
    background:radial-gradient(circle at 40% 35%,#fff8e6,#f2dcae);border:2px solid #b8913f;box-shadow:0 2px 3px rgba(0,0,0,.5)}
  .ct .strow{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0 12px;position:relative;z-index:6}
  .ct .stb{flex:0 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 10px;min-height:44px;padding:4px 16px;border-radius:14px;
    background:linear-gradient(180deg,#3a2560,#1b1030);border:1.5px solid rgba(217,178,90,.7);font-size:18px;font-weight:800;color:#fff4dc;line-height:1.2;text-align:center;
    box-shadow:0 3px 4px rgba(0,0,0,.45),0 8px 14px rgba(0,0,0,.3)}
  .ct .strow.mine .stb{background:linear-gradient(180deg,#ffe58a,#f0b93c);border-color:#fff2c0;color:#1b1030}
  .ct .strow.empty .stb{visibility:hidden}
  .ct .stb .tn2{font-weight:700;opacity:.92}
  .ct .stb .tt:not([hidden])+.tn2:not([hidden])::before{content:"\00b7";margin-right:10px}
  .ct .strow .mebar{position:relative;flex:0 0 auto;min-height:44px;padding:2px 8px;margin:0;gap:4px}
  .ct .strow .mebar .nm,.ct .strow .mebar .chip{display:none}
  .ct .strow .mebar:not(.hascnt):not(.dealer){display:none}
  .ct .mebar.turn{box-shadow:0 3px 4px rgba(0,0,0,.45)}
  .ct .mebar.turn .nm::after{content:none}
  .ct .strow .mebar .cnt{position:static;display:grid}
  .ct .strow .mebar .dl{position:static}
  .ct .mebar.dealer .dl{display:grid}
  .ct .me{margin-top:6px}
  .ct .hand{margin-top:6px}
  /* -- seats: partner centred on top with the plate under, side robots in the upper corners -- */
  .ct .felt{--tw:77px}
  .ct .seat .avw{width:84px;height:84px;padding:4px}.ct .seat .av{width:76px;height:76px}
  .ct .seat.s2{top:4px;flex-direction:column;align-items:center}
  .ct .seat.s2 .plate{margin:-10px 0 0 0;padding:2px 12px}
  .ct .seat.s1,.ct .seat.s3{top:26px}
  .ct .seat.s1{left:10px}.ct .seat.s3{right:10px}
  /* -- trick: 77px cards in the open lower felt -- */
  .ct .trick .slot.p2{left:50%;top:calc(50% - 6px)}
  .ct .trick .slot.p1{left:calc(50% - 58px);top:calc(50% + 34px)}
  .ct .trick .slot.p3{left:calc(50% + 58px);top:calc(50% + 34px)}
  .ct .trick .slot.p0{left:50%;top:calc(50% + 74px)}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .strow .mebar .cnt{position:static;display:none;min-width:30px;height:30px;padding:0 6px;place-items:center;border-radius:15px;font-size:18px;font-weight:800;color:#1b1030;background:linear-gradient(180deg,#ffe58a,#e2b23e);box-shadow:0 2px 3px rgba(0,0,0,.45)}
  .ct .strow .mebar.hascnt .cnt{display:grid}
}
@media not all and (orientation:portrait) and (max-width:520px){.ct .hud{display:contents}}
@media (orientation:portrait) and (max-width:520px){
  .ct .infob{display:none!important}
  .ct .strow .mebar .tag{display:none!important}
  .ct .stb{white-space:nowrap}
  .ct .seat.s2{top:0}
  .ct .seat.s2 .plate{margin-top:-16px}
  .ct .seat.s1,.ct .seat.s3{top:14px}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .trick .slot.p2{top:calc(50% + 12px)}
  .ct .trick .slot.p1{left:calc(50% - 60px);top:calc(50% + 42px)}
  .ct .trick .slot.p3{left:calc(50% + 60px);top:calc(50% + 42px)}
  .ct .trick .slot.p0{top:calc(50% + 70px)}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .seat.s2 .plate{margin-top:-22px;position:relative;z-index:2}
  .ct .trick .slot.p2{top:calc(50% + 18px)}
  .ct .trick .slot.p1,.ct .trick .slot.p3{top:calc(50% + 46px)}
  .ct .trick .slot.p0{top:calc(50% + 74px)}
}
@media (orientation:portrait) and (max-width:520px){
  .ct .seat.s2.hascnt .cnt{top:2px;bottom:auto;right:-10px}
}
/* rh2d: a clearly 3D table at every size. Only the table surface tilts (cards, portraits and text stay flat and crisp);
   the near rail gets a visible front edge and the far rail recedes. */
.ct .tbl{transform:perspective(720px) rotateX(20deg);transform-origin:50% 62%;
  box-shadow:0 7px 0 #2a150c,0 9px 0 #1b0d07,0 30px 36px rgba(0,0,0,.72),0 12px 14px rgba(0,0,0,.5),inset 0 0 0 3px #7a4a26,inset 0 0 0 4px rgba(0,0,0,.55)}
@media (orientation:portrait) and (max-width:520px){.ct .tbl{transform:perspective(560px) rotateX(22deg);transform-origin:50% 64%}}
@media (orientation:landscape) and (max-height:560px){.ct .tbl{transform:perspective(900px) rotateX(18deg)}}
body[data-view="2d"] .ct .tbl,.ct[data-view="2d"] .tbl{transform:none!important;box-shadow:0 22px 30px rgba(0,0,0,.7),inset 0 0 0 3px #7a4a26,inset 0 0 0 4px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.ct .tbl{transition:none}}
/* rh2d: every switch is a full 48px tap target */
.ct .gk-sw{width:80px;height:48px;min-height:48px}
.ct .gk-sw::after{top:4px;left:4px;width:37px;height:37px}
.ct .gk-sw[aria-checked="true"]::after{transform:translateX(32px)}
/* long table messages (pick-up, discard, bids) may wrap to two lines inside the status banner, never off screen */
@media (orientation:portrait) and (max-width:520px){
  .ct .stb{white-space:normal;max-width:100%}
  .ct .stb .tt,.ct .stb .tn2{overflow-wrap:anywhere}
  .ct .strow{min-width:0}
}
/* rh2d title hero: the same non-smiling og Tommy and og Pinky portraits as the table, in their rings */
.ct-hero img.rg{height:min(92%,132px);aspect-ratio:1/1;width:auto;bottom:4%;border-radius:50%;padding:5px;object-fit:cover;filter:none;box-shadow:0 3px 4px rgba(0,0,0,.5),0 12px 20px rgba(0,0,0,.45)}
.ct-hero img.rg-t{left:2%;background:conic-gradient(from 210deg,#eef4ff,#8fa8d6 18%,#3d527f 34%,#e8c66a 52%,#eef4ff 66%,#6e86b8 82%,#eef4ff)}
.ct-hero img.rg-p{right:2%;background:conic-gradient(from 210deg,#ffe3ec,#e88aa8 18%,#a8475f 34%,#f3c56a 52%,#ffe3ec 66%,#d06b88 82%,#ffe3ec)}
@media (orientation:portrait) and (max-width:520px){
  .ct .act{top:auto;bottom:12px;max-height:calc(100% - 124px);overflow:auto}
}
.ct .act .gk-btn,.ct .act button{min-height:48px}
/* rh2d: maker face in the trump chip at every size (desktop/landscape keep the chip on the felt) */
.ct .trumpb .mk{display:inline-flex}
.ct .trumpb .mk img,.ct .trumpb .mk .fy{width:32px;height:32px;border-radius:50%;margin-left:6px;border:2px solid #d9b25a;background:#1b1030;display:inline-grid;place-items:center;object-fit:cover;flex:none}
.ct .trumpb .mk .fy svg{fill:#ffe58a}
/* desktop: larger character portraits, matching the phone's presence */
@media (min-width:900px) and (min-height:640px){
  .ct .seat .avw{width:108px;height:108px;padding:5px}.ct .seat .av{width:98px;height:98px}
  .ct .seat.s2 .avw{width:100px;height:100px}.ct .seat.s2 .av{width:90px;height:90px}
}
/* landscape phones: sheets use the full height so their buttons are on screen; trick sits clear of the partner plate */
@media (orientation:landscape) and (max-height:560px){
  .ct .gk-sheet{padding-top:calc(var(--sat,0px) + 8px);padding-bottom:calc(var(--sab,0px) + 40px)}
  .ct .trick .slot.p2{top:calc(36% + 14px)}
}
@media (orientation:portrait) and (max-width:520px){.ct .act{bottom:6px;padding:8px 10px;background:rgba(14,8,30,.97)}.ct .act h3{margin-bottom:6px}}