/* Glintwick card tables: a lantern-lit room, a wood-railed felt table and cards with real depth.
   Presentation only; every game keeps its own controls, rules and accessible buttons. */
body.ct-table{--ct-felt:#1d5a52;--ct-felt-dark:#0c2a27;--ct-brass:#e2b565;--ct-ink:#fff4dc;
 background:radial-gradient(ellipse 80% 70% at 50% 45%,#0000 30%,#0a0512e6 85%),var(--ct-room) center/cover fixed,#140b1d;min-height:100svh}
body.ct-table[data-ct-room=carnival]{--ct-room:url('assets/card-tables/room-carnival.webp');--ct-felt:#5a1f3a;--ct-felt-dark:#260a19}
body.ct-table[data-ct-room=gardens]{--ct-room:url('assets/card-tables/room-gardens.webp');--ct-felt:#1d5a52;--ct-felt-dark:#0b2723}
body.ct-table[data-ct-room=boardwalk]{--ct-room:url('assets/card-tables/room-boardwalk.webp');--ct-felt:#14524f;--ct-felt-dark:#06211f}
body.ct-table[data-ct-room=lane]{--ct-room:url('assets/card-tables/room-lane.webp');--ct-felt:#24506a;--ct-felt-dark:#0d2232}
body.ct-table[data-ct-room=starfall]{--ct-room:url('assets/card-tables/room-starfall.webp');--ct-felt:#2b3570;--ct-felt-dark:#10142e}
body.ct-table[data-ct-room=grove]{--ct-room:url('assets/card-tables/room-grove.webp');--ct-felt:#2d5a2c;--ct-felt-dark:#11260f}
body.ct-table[data-ct-room=hollow]{--ct-room:url('assets/card-tables/room-hollow.webp');--ct-felt:#4a3d22;--ct-felt-dark:#1f180b}
body.ct-table[data-ct-room=cog]{--ct-room:url('assets/card-tables/room-cog.webp');--ct-felt:#1f5c5c;--ct-felt-dark:#0b2525}
html[data-deck-felt]:not([data-deck-felt=classic]) body.ct-table{--ct-felt:var(--deck-felt);--ct-felt-dark:color-mix(in srgb,var(--deck-felt) 45%,#000)}
body.ct-table:before{display:none}
body.ct-table main{position:relative;z-index:1}

/* the table: felt (padding box) inside a carved walnut rail (border box) with a brass inlay */
body.ct-table .ct-felt{
 border:clamp(12px,1.6vw,22px) solid transparent!important;border-radius:clamp(22px,3vw,40px)!important;overflow:visible!important;
 background:
  radial-gradient(ellipse 70% 55% at 50% 40%,#fff5d62e,#0000 70%) padding-box,
  radial-gradient(ellipse 120% 100% at 50% 50%,#0000 55%,#0008) padding-box,
  url('assets/card-tables/felt.webp') padding-box,
  linear-gradient(var(--ct-felt),var(--ct-felt-dark)) padding-box,
  linear-gradient(180deg,#fff2,#0000 30%,#0004) border-box,
  url('assets/card-tables/wood.webp') 0 0/420px auto repeat border-box,
  #4a2814 border-box!important;
 background-blend-mode:normal,normal,multiply,normal,overlay,normal,normal!important;
 box-shadow:inset 0 0 0 2px var(--ct-brass),inset 0 0 0 4px #2a1308,inset 0 6px 24px #0009,inset 0 0 90px #0007,
  0 0 0 1px #1a0b04,0 2px 0 1px #8a5a2c55,0 30px 70px #000c,0 0 140px #f0a84a1f!important;
 color:var(--ct-ink)}

/* cards: soft contact shadow, a gentle lift when they can be picked up, a lantern glow when chosen */
body.ct-table .card{border-radius:clamp(5px,.55vw,9px);box-shadow:0 1px 1px #0007,0 3px 8px #0005,0 10px 20px #0002;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s,filter .16s}
body.ct-table .card:not(.back):not(:disabled):hover{transform:translateY(-4px);box-shadow:0 2px 2px #0006,0 10px 18px #0006,0 18px 30px #0003}
body.ct-table .card:is(.selected,[aria-pressed=true]){box-shadow:0 0 0 2px #ffe08a,0 0 18px 4px #ffc85acc,0 12px 24px #0007!important;transform:translateY(-8px)}
body.ct-table .card.back{box-shadow:0 1px 1px #0008,0 3px 7px #0006}
body.ct-table .card:disabled:not(.back){filter:brightness(.82) saturate(.75)}
body.ct-table .slot{border:2px dashed #ffe6b02e!important;background:#00000024!important;border-radius:clamp(6px,.7vw,10px)!important;color:#ffe6b04d!important;box-shadow:inset 0 2px 8px #0005}

/* table-native controls: brass-edged plaques that sit on the rail */
body.ct-table :is(.gamecontrols,.sp-actionbar,.sp-footer,.sp-bidding,.pack-toolbar,.pack-draw,.solo-toolbar,.rummy-actions,.rummy-toolbar) button,body.ct-table .ct-plaque{
 font:700 .95rem 'Roboto Slab',Georgia,serif;color:#ffe9bf;background:linear-gradient(#6b3d1f,#3d2112);border:2px solid #c8954a;border-radius:10px;
 box-shadow:inset 0 1px #ffffff2e,0 3px 6px #0007;text-shadow:0 1px 2px #000a;min-height:44px}
body.ct-table :is(.gamecontrols,.sp-actionbar,.sp-footer,.sp-bidding,.pack-toolbar,.pack-draw,.solo-toolbar,.rummy-actions,.rummy-toolbar) button:hover:not(:disabled){background:linear-gradient(#83502a,#4a2914)}
body.ct-table :is(.gamecontrols,.sp-actionbar,.sp-bidding,.pack-toolbar,.solo-toolbar,.rummy-actions) button.primary{color:#2a1206;background:linear-gradient(#ffe39a,#d9a145);border-color:#fff1c4}
body.ct-table :is(.gamecontrols,.sp-actionbar,.sp-footer,.sp-bidding,.pack-toolbar,.pack-draw,.solo-toolbar,.rummy-actions,.rummy-toolbar) button:disabled{opacity:.45}
body.ct-table .ct-readout{font:700 .9rem 'Roboto Slab',Georgia,serif;color:#ffe3a0;text-shadow:0 1px 3px #000c;letter-spacing:.02em}

/* sparkle layer */
.ct-fx{position:fixed;inset:0;width:100vw;height:100svh;pointer-events:none;z-index:50}

/* ---------------------------------------------------------------- Klondike */
body.ct-table[data-game-page=klondike] .game-shell{background-color:transparent}
body.ct-table[data-game-page=klondike] .board{background:none!important;max-width:1100px}
body.ct-table[data-game-page=klondike] .gamebar{background:linear-gradient(#0000,#0003)!important;border-bottom:1px solid #ffe6b01f!important}
body.ct-table[data-game-page=klondike] .gamebar :is(span,b){font-family:'Roboto Slab',Georgia,serif;color:#ffe3a0;text-shadow:0 1px 3px #000c}
body.ct-table[data-game-page=klondike] .gamecontrols{background:linear-gradient(#0002,#0004)!important;border-top:1px solid #ffe6b01f!important}
body.ct-table[data-game-page=klondike] .gamestatus{color:#ffe7b8;text-shadow:0 1px 3px #000;background:none!important;border:0!important}
body.ct-table[data-game-page=klondike] .tip{color:#e9d6b6;text-shadow:0 1px 3px #000}
body.ct-table[data-game-page=klondike] .toprow>.slot:nth-child(n+4){border-style:solid!important;border-color:#e2b56566!important;background:radial-gradient(circle,#ffe6b014,#0000 70%),#00000030!important}

/* ---------------------------------------------------------------- seated games (Spades, Hearts, Euchre, Pinochle, Cribbage,
   Crazy Eights, Rummy 500, Canasta): every opponent sits around one table; in trick games each card lands in front of its player */
body.ct-table.ct-seated .sp-layout{width:min(1400px,97%);margin:4px auto;grid-template-columns:200px minmax(0,1fr)}
body.ct-table.ct-seated .sp-score{padding-bottom:6px}
body.ct-table.ct-seated .sp-actionbar{margin:6px 0 0}
body.ct-table.ct-seated .sp-footer{margin-top:4px}
body.ct-table.ct-seated .sp-table{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2.2fr) minmax(120px,1fr);
 grid-template-areas:"score score score" "peg peg peg" "left top right" "left center right" "status status status" "bid bid bid" "hand hand hand" "action action action" "footer footer footer";
 align-items:center;padding:clamp(10px,1.4vw,22px)}
body.ct-table.ct-seated .sp-score{grid-area:score;border-bottom-color:#ffe6b026;font-family:'Roboto Slab',Georgia,serif;text-shadow:0 1px 3px #000c}
body.ct-table.ct-seated .sp-opponents{display:contents}
body.ct-table.ct-seated .sp-seat{border:0;background:none;padding:6px;font-family:'Roboto Slab',Georgia,serif}
body.ct-table.ct-seated .sp-seat[data-pos="1"]{grid-area:left}
body.ct-table.ct-seated .sp-seat[data-pos="2"]{grid-area:top}
body.ct-table.ct-seated .sp-seat[data-pos="3"]{grid-area:right}
body.ct-table.ct-seated .sp-seat strong{display:inline-block;padding:4px 14px;border-radius:999px;background:linear-gradient(#3d2112e6,#24130ae6);border:1px solid #c8954a;color:#ffe9bf;font-size:.85rem;box-shadow:0 3px 8px #0007}
body.ct-table.ct-seated .sp-seat.active strong{border-color:#ffe08a;box-shadow:0 0 0 2px #ffe08a55,0 0 18px #ffc85a99}
body.ct-table.ct-seated .sp-seat span{display:block;margin-top:4px;font-size:.75rem;color:#f3dcae;text-shadow:0 1px 2px #000}
body.ct-table.ct-seated .sp-fan{height:clamp(52px,5vw,74px);margin:6px 0 2px;align-items:flex-end;justify-content:center}
body.ct-table.ct-seated .sp-fan i{flex:0 0 auto;width:clamp(30px,3vw,44px);height:clamp(42px,4.1vw,60px);margin-left:clamp(-36px,-2.4vw,-22px);border:1px solid #c99c55;border-radius:5px;
 background:#3d1f56 url('assets/card-tables/cards/back.webp') center/100% 100%;box-shadow:0 2px 5px #0007;transform:rotate(calc(var(--i)*4deg));transform-origin:50% 160%}
body.ct-table.ct-seated .sp-fan i:first-child{margin-left:0}
body.ct-table.ct-seated :is(.sp-seat,[data-deck-back]) .sp-fan i{background:#3d1f56 url('assets/card-tables/cards/back.webp') center/100% 100%!important}
body.ct-table.ct-seated .sp-seat[data-pos]:not([data-deck-back=classic]) .sp-fan i{background-image:var(--deck-back-art,url('assets/card-tables/cards/back.webp'))!important}
body.ct-table.ct-seated .sp-center{grid-area:center;height:clamp(230px,29vh,290px)}
body.ct-table.ct-trick .sp-center>#stock{display:none}
body.ct-table.ct-seated .sp-lantern{font-size:clamp(90px,12vw,170px);opacity:.09}
body.ct-table.ct-trick .sp-trick{position:absolute;inset:0;display:block}
body.ct-table.ct-trick .sp-trick figure{position:absolute;left:50%;top:50%;width:clamp(56px,min(5.6vw,9.5vh),84px);margin:0;transform:translate(-50%,-50%)}
body.ct-table.ct-trick .sp-trick .card{width:100%;height:auto;aspect-ratio:.74}
body.ct-table.ct-trick .sp-trick figure[data-pos="0"]{transform:translate(-50%,6%) rotate(-2deg)}
body.ct-table.ct-trick .sp-trick figure[data-pos="1"]{transform:translate(-165%,-50%) rotate(-9deg)}
body.ct-table.ct-trick .sp-trick figure[data-pos="2"]{transform:translate(-50%,-108%) rotate(3deg)}
body.ct-table.ct-trick .sp-trick figure[data-pos="3"]{transform:translate(65%,-50%) rotate(8deg)}
body.ct-table.ct-trick .sp-trick figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body.ct-table.ct-trick .sp-center>#stock{width:clamp(44px,4vw,60px);height:auto;aspect-ratio:.74;opacity:.85}
body.ct-table.ct-seated .sp-status{grid-area:status;font-family:'Roboto Slab',Georgia,serif;color:#ffe7b8;text-shadow:0 1px 3px #000}
body.ct-table.ct-seated .sp-bidding{grid-area:bid}
body.ct-table.ct-seated .sp-hand{grid-area:hand;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(110px,9vw,140px);margin:6px 0 0;padding:0 clamp(10px,3vw,40px)}
body.ct-table.ct-seated .sp-hand .card{flex:0 0 auto;width:clamp(70px,min(7vw,12vh),100px);height:auto;aspect-ratio:.74;margin-left:clamp(-34px,-2.2vw,-22px)}
body.ct-table.ct-seated .sp-hand .card:first-child{margin-left:0}
body.ct-table.ct-seated .sp-hand .card:not(:disabled):hover{transform:translateY(-12px)}
body.ct-table.ct-seated .sp-hand .card.selected{transform:translateY(-22px)}
body.ct-table.ct-seated .sp-hand .card:disabled{opacity:1}
body.ct-table.ct-seated .sp-hand .card.unavailable{filter:brightness(.62) saturate(.5)}
body.ct-table.ct-seated .sp-actionbar{grid-area:action}
body.ct-table.ct-seated .sp-actionbar span{color:#f3dcae;font-family:'Roboto Slab',Georgia,serif}
body.ct-table.ct-seated .sp-footer{grid-area:footer}
body.ct-table.ct-seated #peg-board{grid-area:peg;margin:6px 0;width:100%;justify-self:stretch}
body.ct-table.ct-seated:not(.ct-trick) .sp-center{display:flex;gap:18px;align-items:center;justify-content:center;height:auto;min-height:clamp(150px,18vh,210px)}
body.ct-table.ct-seated:not(.ct-trick) .sp-center :is(#stock,#trick>.card,#upcard){width:clamp(60px,5.6vw,88px);height:auto;aspect-ratio:.74;position:relative;opacity:1}
body.ct-table.ct-seated:not(.ct-trick) .sp-trick{display:flex;gap:8px;min-height:0}
body.ct-table.ct-seated:not(.ct-trick) .sp-trick figure{width:clamp(56px,5vw,80px);margin:0}
body.ct-table.ct-seated:not(.ct-trick) .sp-trick .card{width:100%;height:auto;aspect-ratio:.74}
body.ct-table.ct-seated:not(.ct-trick) .sp-trick figcaption{font:700 .7rem 'Roboto Slab',Georgia,serif;color:#ffe7b8;text-shadow:0 1px 2px #000}
body.ct-table.ct-seated .sp-host img{height:min(420px,52vh)}
body.ct-table.ct-seated .sp-host p{font-family:Georgia,serif;color:#f6e3c0;text-shadow:0 1px 3px #000;background:#1c0f26cc;border:1px solid #c8954a66;border-radius:14px;padding:8px 12px}
body.ct-table.ct-seated #entry{background:linear-gradient(#2c1838f2,#1b0f24f2);border:2px solid #c8954a;box-shadow:0 30px 70px #000c}

/* below 1050px spades.css floats the host portrait, so the table takes the whole width */
@media (max-width:1050px){body.ct-table.ct-seated .sp-layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
 body.ct-table.ct-seated .sp-layout{grid-template-columns:1fr}
 body.ct-table.ct-seated .sp-host{display:none}
 body.ct-table.ct-seated .sp-actionbar{background:none!important;border:0!important;flex-wrap:wrap}
 body.ct-table.ct-seated .sp-table{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"score score score" "peg peg peg" "left top right" "center center center" "status status status" "bid bid bid" "hand hand hand" "action action action" "footer footer footer"}
 body.ct-table.ct-seated .sp-seat strong{font-size:.7rem;padding:3px 8px;max-width:100%}
 body.ct-table.ct-seated .sp-seat span{font-size:.62rem}
 body.ct-table.ct-seated .sp-fan{height:46px}
 body.ct-table.ct-seated .sp-fan i{width:24px;height:34px;margin-left:-17px}
 body.ct-table.ct-seated .sp-center{height:215px}
 body.ct-table.ct-trick .sp-trick figure{width:58px}
 body.ct-table.ct-seated .sp-hand{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0}
 body.ct-table.ct-seated .sp-hand .card{width:100%;margin:0}
 body.ct-table.ct-seated .sp-hand .card.selected{transform:translateY(-10px)}
 body.ct-table .ct-felt{border-width:10px!important;border-radius:20px!important}
 body.ct-table.ct-seated:is([data-game-page=crazy-eights],[data-game-page=rummy-500],[data-game-page=canasta]) .sp-hand{display:flex!important;overflow-x:auto;padding:14px 6px 4px}
 body.ct-table.ct-seated:is([data-game-page=crazy-eights],[data-game-page=rummy-500],[data-game-page=canasta]) .sp-hand .card{flex:0 0 58px;width:58px;margin-left:-14px}
 body.ct-table.ct-seated:is([data-game-page=crazy-eights],[data-game-page=rummy-500],[data-game-page=canasta]) .sp-hand .card:first-child{margin-left:0}
 body.ct-table :is(.gamecontrols,.sp-actionbar,.sp-footer,.sp-bidding,.pack-toolbar,.pack-draw,.solo-toolbar,.rummy-actions,.rummy-toolbar) button{font-size:.82rem;min-height:40px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){body.ct-table .card{transition:none}}
html[data-motion=reduced] body.ct-table .card{transition:none}
body.ct-table .card.hinted{box-shadow:0 0 0 2px #8ff3e6,0 0 18px 4px #5fd9c8aa,0 10px 20px #0006!important}

/* ---------------------------------------------------------------- per-game polish */

body.ct-table #peg-board svg{height:clamp(70px,9vh,96px);background:url('assets/card-tables/wood.webp') 0 0/420px auto,#4a2814;box-shadow:inset 0 0 0 2px #e2b565,inset 0 3px 10px #0009,0 4px 10px #0007}
/* Gin and Whiskertrail: the opponent's box becomes a seat on the felt */
body.ct-table .rummy-surface .opponent{background:none!important;border:0!important;text-align:center;font-family:'Roboto Slab',Georgia,serif;color:#f3dcae;text-shadow:0 1px 2px #000}
body.ct-table .rummy-surface .hand{border-color:#ffe6b01f!important}
body.ct-table .rummy-surface{max-width:1180px}
/* Spider and FreeCell: the 3D felt keeps its tilt, but the table and its room become ours */
body.ct-table .physical-table{background:radial-gradient(ellipse 70% 55% at 50% 30%,#fff5d626,#0000 70%),url('assets/card-tables/felt.webp'),linear-gradient(var(--ct-felt),var(--ct-felt-dark))!important;background-blend-mode:normal,multiply,normal!important;border-color:#5a3418 #3d220f #2a1608!important;border-image:url('assets/card-tables/wood.webp') 0 fill / 0 / 0 stretch}
body.ct-table .physical-table::after{border-color:#e2b56533!important}
body.ct-table .table-room{background:none!important;border:0!important;box-shadow:none!important}
body.ct-table .table-room .physical-table{box-shadow:inset 0 0 0 2px var(--ct-brass),inset 0 6px 24px #0009,0 30px 60px #000b!important}
/* tall hands must fit a laptop screen */
@media (max-height:960px) and (min-width:761px){
 body.ct-table.ct-seated .sp-center{height:clamp(200px,25vh,250px)}
 body.ct-table.ct-seated .sp-fan{height:clamp(46px,6vh,64px)}
 body.ct-table.ct-seated .sp-hand .card{width:clamp(64px,min(6.4vw,10.5vh),92px)}
 body.ct-table.ct-seated .sp-layout{margin-top:0}
}
body.ct-table .solo-toolbar{background:none!important;border:0!important}
body.ct-table .sp-bidding{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
body.ct-table .sp-bidding :is(input,select){font:700 .95rem 'Roboto Slab',Georgia,serif;padding:8px 10px;border-radius:8px;border:2px solid #c8954a;background:#fff4dc;color:#3b1d0d;min-height:42px}
body.ct-table .sp-bidding label{color:#ffe7b8;font-family:'Roboto Slab',Georgia,serif;display:inline-flex;gap:8px;align-items:center}
/* lifted cards: a playable card rises with a deeper shadow under the pointer; the chosen card stays lifted */
body.ct-table .card{transition:transform .16s ease,box-shadow .16s ease}
body.ct-table .card:not(:disabled):not(.back):hover{box-shadow:0 14px 20px #0007,0 2px 3px #0006}
body.ct-table .card.selected{box-shadow:0 0 0 3px #ffd16a,0 18px 24px #0008}
html[data-motion=reduced] body.ct-table .card{transition:none}

/* ---------------------------------------------------------------- ambience (table-ambience.js): the host's town drawn behind the table,
   a warm lamp pool, glowing motes and the host beside the table. Bold and lively; still in reduced motion. */
body.ct-ambient{background:#120a1a;isolation:isolate}
.ct-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ct-scene{position:absolute;inset:-4%;background:center/cover no-repeat;filter:blur(1.5px) saturate(1.2) brightness(.72);transform:scale(1.04);animation:ct-drift 48s ease-in-out infinite alternate}
.ct-backdrop:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 46%,#0000 35%,#07030ccc 100%),linear-gradient(#0a051033,#0000 30%,#0000 70%,#0a0510aa)}
.ct-lamp{position:absolute;left:50%;top:44%;width:min(1300px,110vw);height:min(900px,100vh);transform:translate(-50%,-50%);
 background:radial-gradient(ellipse 50% 46% at 50% 50%,color-mix(in srgb,var(--lamp) 34%,transparent),#0000 70%);mix-blend-mode:screen;animation:ct-flicker 6s ease-in-out infinite}
.ct-motes{position:absolute;inset:0;width:100%;height:100%}
@keyframes ct-drift{from{transform:scale(1.04) translate(-.8%,-.4%)}to{transform:scale(1.09) translate(.8%,.5%)}}
@keyframes ct-flicker{0%,100%{opacity:.85}42%{opacity:1}47%{opacity:.78}53%{opacity:.95}}
/* the host stands beside the table when the screen has room */
.ct-host{position:fixed;bottom:0;z-index:1;margin:0;width:var(--host-w,260px);pointer-events:none;display:flex;flex-direction:column;align-items:center}
.ct-host[hidden]{display:none}
.ct-host[data-side=left]{left:8px}
.ct-host[data-side=right]{right:8px}
.ct-host[data-side=right] img{transform-origin:50% 100%}
.ct-host img{width:100%;max-height:62vh;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 18px #ffd88a55) drop-shadow(0 18px 24px #000c);transform-origin:50% 100%;animation:ct-idle 5.5s ease-in-out infinite}
.ct-host figcaption{position:absolute;bottom:14px;padding:5px 16px;border-radius:999px;background:linear-gradient(#5a321a,#2c160a);border:2px solid #e2b565;
 font:700 .95rem 'Roboto Slab',Georgia,serif;color:#ffe9bf;text-shadow:0 1px 2px #000;box-shadow:0 4px 12px #000a,0 0 16px #f0b85a44}
@keyframes ct-idle{0%,100%{transform:rotate(-.6deg) translateY(0)}50%{transform:rotate(.7deg) translateY(-6px)}}
/* a brighter, warmer table: lamplight on the felt and a golden halo around the rail */
body.ct-ambient .ct-felt{box-shadow:inset 0 0 0 2px var(--ct-brass),inset 0 0 0 4px #2a1308,inset 0 6px 24px #0009,inset 0 0 80px #0006,
  0 0 0 1px #1a0b04,0 2px 0 1px #8a5a2c55,0 30px 70px #000d,0 0 90px #ffc06a44,0 0 220px #ffb04a26!important}
body.ct-ambient .ct-felt{--ct-orn:clamp(46px,6.5vw,96px);background:
  url('assets/card-tables/felt-corner-tl.svg') left 8px top 8px/var(--ct-orn) no-repeat padding-box,
  url('assets/card-tables/felt-corner-tr.svg') right 8px top 8px/var(--ct-orn) no-repeat padding-box,
  url('assets/card-tables/felt-corner-bl.svg') left 8px bottom 8px/var(--ct-orn) no-repeat padding-box,
  url('assets/card-tables/felt-corner-br.svg') right 8px bottom 8px/var(--ct-orn) no-repeat padding-box,
  url('assets/card-tables/felt-line.svg') center/calc(100% - 22px) calc(100% - 22px) no-repeat padding-box,
  url('assets/card-tables/felt-emblem.svg') center 55%/min(36%,300px) auto no-repeat padding-box,
  radial-gradient(ellipse 60% 48% at 50% 34%,#fff3cf4d,#0000 72%) padding-box,
  radial-gradient(ellipse 120% 100% at 50% 50%,#0000 55%,#0009) padding-box,
  url('assets/card-tables/felt.webp') padding-box,
  linear-gradient(color-mix(in srgb,var(--ct-felt) 88%,#fff),var(--ct-felt-dark)) padding-box,
  linear-gradient(180deg,#fff4,#0000 30%,#0005) border-box,
  url('assets/card-tables/wood.webp') 0 0/420px auto repeat border-box,
  #4a2814 border-box!important;
 background-blend-mode:normal,normal,normal,normal,normal,normal,normal,normal,multiply,normal,overlay,normal,normal!important}
body.ct-ambient .card{box-shadow:0 1px 1px #0008,0 4px 10px #0006,0 14px 26px #0003}
body.ct-ambient .card:not(.back):not(:disabled):hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 2px 2px #0006,0 14px 22px #0007,0 0 18px #ffd88a44}
@media (prefers-reduced-motion:reduce){.ct-scene,.ct-lamp,.ct-host img{animation:none}}
html[data-motion=reduced] :is(.ct-scene,.ct-lamp,.ct-host img),html[data-motion=flat] :is(.ct-scene,.ct-lamp,.ct-host img){animation:none}
@media (max-width:700px){.ct-scene{filter:blur(1px) saturate(1.15) brightness(.66)}}
body.ct-ambient[data-game-page=klondike] .gamebar{padding-left:calc(var(--ct-orn,60px)*.62)!important;padding-right:calc(var(--ct-orn,60px)*.5)!important}

/* ---------------------------------------------------------------- card size (setting; Large by default): your own hand is easy to read.
   Cards overlap by about half, so every rank and suit corner stays visible. */
html[data-card-size=large] body.ct-table.ct-seated .sp-hand{--hw:clamp(84px,min(9vw,15.5vh),126px)}
html[data-card-size=xl] body.ct-table.ct-seated .sp-hand{--hw:clamp(96px,min(10.5vw,19vh),152px)}
html:is([data-card-size=large],[data-card-size=xl]) body.ct-table.ct-seated .sp-hand{justify-content:safe center;overflow-x:auto;overflow-y:visible;padding-top:26px}
html:is([data-card-size=large],[data-card-size=xl]) body.ct-table.ct-seated .sp-hand .card{width:var(--hw)!important;flex:0 0 var(--hw)!important;margin-left:calc(var(--hw) * -.46)!important;--rank-size:calc(var(--hw) * .22)}
html:is([data-card-size=large],[data-card-size=xl]) body.ct-table.ct-seated .sp-hand .card:first-child{margin-left:0!important}
/* Gin and Whiskertrail: each card is wider than its slot, so the hand overlaps like a fan and keeps its drag-to-arrange grid */
html:is([data-card-size=large],[data-card-size=xl]) body.ct-table .hand{padding-right:clamp(30px,4%,60px);gap:0 4px}
html:is([data-card-size=large],[data-card-size=xl]) body.ct-table .hand .handcard{height:auto!important;aspect-ratio:.72;--rank-size:clamp(19px,2.2vw,27px)}
html[data-card-size=large] body.ct-table .hand .handcard{width:138%!important}
html[data-card-size=xl] body.ct-table .hand .handcard{width:165%!important}
html:is([data-card-size=large],[data-card-size=xl]) body.ct-table .hand .handcard.group-start{margin-left:6px}
@media (max-width:760px){
 /* phones: bigger cards in overlapping rows; each card's top corner shows above the next row */
 html[data-card-size=large] body.ct-table.ct-seated .sp-hand{--cols:5}
 html[data-card-size=xl] body.ct-table.ct-seated .sp-hand{--cols:4}
 html:is([data-card-size=large],[data-card-size=xl]) body.ct-table.ct-seated .sp-hand{--hw:calc((100vw - 56px) / var(--cols));display:grid!important;grid-template-columns:repeat(var(--cols),var(--hw));
  grid-auto-rows:calc(var(--hw) / .74 * .56);justify-content:center;column-gap:4px;row-gap:0;overflow:visible;padding:18px 0 calc(var(--hw) / .74 * .44)}
 html:is([data-card-size=large],[data-card-size=xl]) body.ct-table.ct-seated .sp-hand .card{flex:none!important;width:var(--hw)!important;margin:0!important;align-self:start}
 html[data-card-size=large] body.ct-table .hand{grid-template-columns:repeat(6,minmax(0,1fr))}
 html[data-card-size=xl] body.ct-table .hand{grid-template-columns:repeat(5,minmax(0,1fr))}
}
body.ct-table .ct-size-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;font-weight:700}body.ct-table .ct-size-setting select{min-height:40px;padding:4px 10px;border-radius:8px}
body.ct-table .ct-size-setting{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-weight:inherit}
/* Klondike's own cards follow the card size too */
html[data-card-size=large] body.ct-table[data-game-page=klondike] .board{--cw:clamp(42px,11.4vw,128px);--ch:calc(var(--cw)*1.4);--step:clamp(24px,3.7vw,36px);max-width:1080px}
html[data-card-size=xl] body.ct-table[data-game-page=klondike] .board{--cw:clamp(44px,12.6vw,146px);--ch:calc(var(--cw)*1.4);--step:clamp(26px,4.1vw,40px);max-width:1200px}