/* =========================================================================
   Indian Rummy — styles
   One bold element: the 3D card table (carved wood rim, brass studs, felt).
   Everything else stays quiet so the cards stay readable on small phones.
   ========================================================================= */

/* ---------- themes ---------- */
:root, :root[data-theme="classic"]{
  --felt:#12503a; --felt-2:#0c3a2a; --page-1:#0e3f2e; --page-2:#06231a;
  --wood-1:#7a4424; --wood-2:#4a2412; --wood-3:#a6683a;
  --brass:#d6a74a; --brass-2:#f3d48b; --on-brass:#2b1d05;
  --back-1:#8e2236; --back-2:#5f1424; --back-line:#f3d48b;
  --ink:#f5efe0; --muted:#a8c2b4; --sheet-1:#15503a; --sheet-2:#0b3324;
}
:root[data-theme="festive"]{
  --felt:#6e1532; --felt-2:#4c0c22; --page-1:#5a1029; --page-2:#260512;
  --wood-1:#8a4a1c; --wood-2:#4d230a; --wood-3:#c07a35;
  --brass:#f2a93b; --brass-2:#ffd27a; --on-brass:#3a1600;
  --back-1:#e0712a; --back-2:#a3195b; --back-line:#ffe2a1;
  --ink:#fff1df; --muted:#e8b9a8; --sheet-1:#6a1734; --sheet-2:#3e0a1e;
}
:root[data-theme="royal"]{
  --felt:#17407a; --felt-2:#0f2c58; --page-1:#143768; --page-2:#081831;
  --wood-1:#5b3a2a; --wood-2:#2e1a10; --wood-3:#8d6146;
  --brass:#d9b55c; --brass-2:#f4dc96; --on-brass:#231804;
  --back-1:#1f4f9a; --back-2:#0f2a5c; --back-line:#f4dc96;
  --ink:#eef3ff; --muted:#a9bddc; --sheet-1:#18427c; --sheet-2:#0d264d;
}
:root[data-theme="midnight"]{
  --felt:#1e2b33; --felt-2:#141d23; --page-1:#1a242b; --page-2:#0b1013;
  --wood-1:#3b3631; --wood-2:#1f1b18; --wood-3:#5a534c;
  --brass:#5fd3c4; --brass-2:#a8efe5; --on-brass:#062521;
  --back-1:#2a3c47; --back-2:#16222a; --back-line:#5fd3c4;
  --ink:#e9eef0; --muted:#93a7b0; --sheet-1:#22323b; --sheet-2:#141e24;
}
:root{
  --card:#fbf6ea; --card-2:#f1e8d2; --red:#b8262b; --black:#1d1a17;
  --pure:#3fb37f; --seq:#4f9be8; --set:#b07de8; --bad:#e2614f;
  --cw:clamp(44px, 11.4vw, 70px);
  --display:"Alegreya","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ui:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--page-2)}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--ui); color:var(--ink);
  background:radial-gradient(130% 80% at 50% 30%, var(--page-1) 0%, var(--page-2) 100%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
:root[data-theme="festive"] body{
  background:
    radial-gradient(circle at 12px 12px, rgba(255,210,122,.07) 2px, transparent 3px) 0 0/28px 28px,
    radial-gradient(130% 80% at 50% 30%, var(--page-1) 0%, var(--page-2) 100%);
  background-attachment:fixed;
}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:.6em 1.1em;font-weight:650;
  background:rgba(255,255,255,.1);color:var(--ink);transition:transform .08s,background .15s,opacity .15s}
button:hover{background:rgba(255,255,255,.17)}
button:active{transform:scale(.96)}
button:disabled{opacity:.35;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:2px solid var(--brass-2);outline-offset:2px}
button.primary{background:linear-gradient(180deg,var(--brass-2),var(--brass));color:var(--on-brass);
  box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.4)}
button.danger{background:rgba(226,97,79,.22);color:#ffd7cf}
button.small{padding:.38em .85em;font-size:.84rem}
button.icon{width:38px;height:38px;padding:0;display:grid;place-items:center;font-size:1.1rem}
input{font:inherit;padding:.75em 1em;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);color:var(--ink);width:100%;outline:none}
input:focus{border-color:var(--brass)}
.hidden{display:none!important}
.serif{font-family:var(--display)}

/* ---------- landing ---------- */
#landing{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.panel{background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:28px;
  width:min(420px,100%);box-shadow:0 30px 60px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.brand{text-align:center;margin-bottom:22px}
.brand h1{font-family:var(--display);font-weight:800;font-size:2.5rem;margin:.15em 0 0;line-height:1}
.brand p{color:var(--muted);margin:.45em 0 0;font-size:.95rem}
.fan{display:flex;justify-content:center;height:96px;margin-bottom:10px;perspective:600px}
.fan .card{--cw:56px;margin:0 -13px;transform-origin:50% 130%}
.fan .card:nth-child(1){transform:rotateX(18deg) rotate(-17deg) translateY(10px)}
.fan .card:nth-child(2){transform:rotateX(18deg) rotate(-6deg)}
.fan .card:nth-child(3){transform:rotateX(18deg) rotate(6deg)}
.fan .card:nth-child(4){transform:rotateX(18deg) rotate(17deg) translateY(10px)}
.field{margin:14px 0}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.row{display:flex;gap:10px;align-items:center}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
#codeInput{text-transform:uppercase;letter-spacing:.3em;font-weight:700;text-align:center}
.rules-link{display:block;text-align:center;margin-top:18px;color:var(--muted);font-size:.86rem;background:none;width:100%}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin-top:10px;opacity:.85}
.field-err{color:#ffb4a7;font-size:.82rem;margin-top:6px}
input.invalid{border-color:var(--bad);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- game shell ---------- */
#game{min-height:100vh;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;
  padding:calc(6px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom))}
header{display:flex;align-items:center;gap:8px;padding:2px 2px 6px}
header .logo{width:30px;height:30px;border-radius:8px;flex:0 0 auto}
.code-chip{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.28);border-radius:999px;padding:4px 4px 4px 12px;font-size:.84rem;margin-right:auto}
.code-chip b{letter-spacing:.18em;color:var(--brass-2);font-size:.95rem}
#playView{display:flex;flex-direction:column;flex:1}

/* ---------- seats around the table ---------- */
#seats{position:relative;height:118px;margin:2px 4px 0}
.seat{position:absolute;transform:translateX(-50%);width:64px;text-align:center;transition:left .4s,top .4s}
.av{--h:150;position:relative;width:46px;height:46px;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, hsl(var(--h) 55% 62%), hsl(var(--h) 50% 34%));
  display:grid;place-items:center;font-weight:800;font-size:1rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.2)}
.av .dot{position:absolute;right:-1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#59d38c;border:2px solid var(--page-2)}
.av .dot.off{background:#7a7a7a}
.av .cnt{position:absolute;left:-8px;bottom:-4px;font-size:.62rem;font-weight:800;background:var(--back-1);color:#fff;
  border:1.5px solid var(--back-line);border-radius:5px;padding:0 4px;line-height:1.5}
.ring{position:absolute;inset:-5px;width:56px;height:56px;transform:rotate(-90deg);pointer-events:none}
.ring circle{fill:none;stroke-width:3.5}
.ring .tr{stroke:rgba(255,255,255,.15)}
.ring .pg{stroke:var(--brass-2);stroke-linecap:round;stroke-dasharray:157.08;transition:stroke .3s}
.ring .pg.warn{stroke:#f0a33a}.ring .pg.urgent{stroke:#ef5b48}
.seat.turn .av{box-shadow:0 0 0 2px var(--brass),0 0 18px var(--brass),0 3px 8px rgba(0,0,0,.45)}
.seat .nm{font-size:.74rem;font-weight:700;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .sc{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.seat .sc.hot{color:#f0a33a}.seat .sc.danger{color:#ff8c7a}
.seat .tg{font-size:.58rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.seat.folded .av{filter:saturate(.25) brightness(.7)}
.seat.out .av{filter:grayscale(1) brightness(.55)}
.seat.out .av::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(115deg,transparent 46%,rgba(0,0,0,.7) 47%,rgba(0,0,0,.7) 50%,transparent 51%),
             linear-gradient(35deg,transparent 56%,rgba(0,0,0,.6) 57%,rgba(0,0,0,.6) 59%,transparent 60%)}
.seat.crack{animation:crack .9s ease-out}
@keyframes crack{0%{transform:translateX(-50%)}15%{transform:translateX(calc(-50% - 5px)) rotate(-4deg)}30%{transform:translateX(calc(-50% + 5px)) rotate(4deg)}
  45%{transform:translateX(calc(-50% - 3px))}100%{transform:translateX(-50%)}}
.seat .away{font-size:.6rem;color:#ffc2b6}

/* ---------- the table (signature element) ---------- */
#table{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 0 10px}
.table3d{perspective:900px;perspective-origin:50% 0%;width:100%;display:flex;justify-content:center}
.felt{position:relative;width:min(94%,560px);height:clamp(150px,40vw,210px);transform:rotateX(30deg);transform-style:preserve-3d;
  border-radius:50% / 46%;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(255,255,255,.10), transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.025) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-2) 100%);
  border:12px solid var(--wood-1);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.35), inset 0 10px 30px rgba(0,0,0,.45),
    0 0 0 2px var(--wood-2), 0 0 0 4px var(--wood-3),
    0 22px 30px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center}
/* carved rim highlight + brass studs */
.felt::before{content:"";position:absolute;inset:-12px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,255,255,.18), transparent 12%, rgba(0,0,0,.25) 25%, transparent 38%, rgba(255,255,255,.14) 50%,
    transparent 62%, rgba(0,0,0,.25) 75%, transparent 88%, rgba(255,255,255,.18));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 11px))}
.felt .stud{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7d6,var(--brass) 45%,#6b4a12);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.felt .stud.a{left:50%;top:-11px;transform:translateX(-50%)}
.felt .stud.b{left:50%;bottom:-11px;transform:translateX(-50%)}
.felt .stud.c{left:-11px;top:50%;transform:translateY(-50%)}
.felt .stud.d{right:-11px;top:50%;transform:translateY(-50%)}
.piles{display:flex;gap:clamp(16px,6vw,48px);align-items:flex-end;transform-style:preserve-3d;transform:translateZ(3px)} /* above the felt so taps reach the piles */
.pile{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.66rem;color:rgba(255,255,255,.55);letter-spacing:.04em;transform-style:preserve-3d}
.pile .slot{--cw:clamp(46px,12vw,72px);position:relative;transform-style:preserve-3d}
.pile.clickable .slot{cursor:pointer}
.pile.clickable .slot::after{content:"";position:absolute;inset:-6px;border-radius:12px;border:2px solid var(--brass-2);
  box-shadow:0 0 14px var(--brass);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.stack .card{box-shadow:0 1px 0 #d8cfb8,0 2px 0 #c7bea7,0 3px 0 #b5ac95,0 4px 0 #a39a84,0 5px 0 #91886f,0 12px 18px rgba(0,0,0,.45)}
.under{position:absolute;inset:0;transform:rotate(-7deg) translate(-3px,2px)}
.status{background:rgba(0,0,0,.32);padding:8px 16px;border-radius:999px;font-weight:650;text-align:center;font-size:.92rem;max-width:100%}
.status.go{background:linear-gradient(180deg,var(--brass-2),var(--brass));color:var(--on-brass)}
.tmr{font-variant-numeric:tabular-nums;font-weight:800}
.tmr.urgent{color:#ffb4a7}
.status.go .tmr.urgent{color:#9b1c10}

/* ---------- cards: two faces in 3D ---------- */
.card{width:var(--cw);height:calc(var(--cw) * 1.42);position:relative;flex:0 0 auto;user-select:none;-webkit-user-select:none;
  border-radius:calc(var(--cw)*.11);transform-style:preserve-3d;box-shadow:0 2px 5px rgba(0,0,0,.4);
  font-family:var(--display);color:var(--black);transition:transform .16s ease, box-shadow .16s}
.card > .fc, .card > .bk{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.fc{background:linear-gradient(165deg,var(--card) 0%,var(--card-2) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bk{transform:rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, var(--back-line) 0 6%, transparent 7%),
    repeating-conic-gradient(from 45deg at 50% 50%, var(--back-1) 0 25%, var(--back-2) 0 50%) 0 0 / calc(var(--cw)*.2) calc(var(--cw)*.2);
  box-shadow:inset 0 0 0 calc(var(--cw)*.05) var(--card), inset 0 0 0 calc(var(--cw)*.07) var(--back-line)}
.bk::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%)}
.card.down .fc{visibility:hidden}
.card.down .bk{transform:none}
.card.red{color:var(--red)}
.cr{position:absolute;top:calc(var(--cw)*.05);left:calc(var(--cw)*.08);line-height:.9;text-align:center;font-weight:800;font-size:calc(var(--cw)*.3)}
.cr small{display:block;font-size:calc(var(--cw)*.25);font-weight:500}
.pip{position:absolute;right:calc(var(--cw)*.07);bottom:calc(var(--cw)*.03);font-size:calc(var(--cw)*.56);line-height:1}
/* face cards: framed portrait panel with an original chess-piece emblem */
.art{position:absolute;right:calc(var(--cw)*.08);bottom:calc(var(--cw)*.08);width:58%;height:56%;border-radius:calc(var(--cw)*.06);
  background:linear-gradient(160deg,#f7e7bd,#e9c97c);box-shadow:inset 0 0 0 1.5px currentColor, inset 0 0 0 3px #fff6dc;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.art .g{font-size:calc(var(--cw)*.4);font-family:"Segoe UI Symbol","Apple Symbols",var(--display)}
.art .s{font-size:calc(var(--cw)*.18)}
/* jokers + wild cards get a slow holographic sheen */
.card.joker .fc{background:linear-gradient(160deg,#fffaf0 0%,#f3e3ff 100%);color:#6c2f95}
.jk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--cw)*.16);letter-spacing:.06em}
.jk b{font-size:calc(var(--cw)*.56);line-height:1}
.holo .fc::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,0,170,.35) 35%,rgba(0,220,255,.35) 45%,rgba(255,240,0,.35) 55%,transparent 70%) 0 0/300% 100%;
  animation:holo 4s linear infinite}
@keyframes holo{to{background-position:300% 0}}
.wild{position:absolute;top:calc(var(--cw)*.68);left:calc(var(--cw)*.06);font-size:calc(var(--cw)*.15);font-family:var(--ui);font-weight:800;
  background:#6c2f95;color:#fff;border-radius:4px;padding:1px 3px;line-height:1.1}
.card.empty{background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.card.new .fc{box-shadow:inset 0 0 0 3px #59d38c}
.card.sel{transform:translateY(calc(var(--cw)*-.3));box-shadow:0 0 0 3px var(--brass-2),0 14px 18px rgba(0,0,0,.45)}
.card.lift{animation:lift .18s ease-out}
@keyframes lift{from{transform:translateY(0)}}
.card.dragging{opacity:.25}

/* ---------- my hand ---------- */
#handWrap{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.3));border-radius:20px;padding:10px 8px 10px;border:1px solid rgba(255,255,255,.06)}
.handhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;font-size:.8rem;color:var(--muted)}
.mechip{display:flex;align-items:center;gap:8px;margin-right:auto}
.mechip .av{width:34px;height:34px;font-size:.8rem}
.mechip .ring{inset:-4px;width:42px;height:42px}
.mechip b{color:var(--ink);font-size:.9rem}
.checks{display:flex;gap:10px;flex-wrap:wrap}
.ok{color:#8fe3b4}.no{color:#ffb4a7}
#hand{display:flex;flex-wrap:wrap;gap:16px 14px;align-items:flex-end;justify-content:center;padding-top:calc(var(--cw)*.36);
  min-height:calc(var(--cw) * 1.42 + 44px);perspective:900px;touch-action:manipulation}
.group{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;border-radius:12px}
.group .cards{display:flex;padding:0 2px;transform-style:preserve-3d}
.hc{transform-origin:50% 120%;transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px));transform-style:preserve-3d}
.hc + .hc{margin-left:calc(var(--cw) * -.42)}
#hand .card{cursor:grab;touch-action:none}
.group.target{cursor:pointer}
.group.target .cards,.group.drop .cards{outline:2px dashed var(--brass-2);outline-offset:5px;border-radius:8px}
.group.drop{background:rgba(255,255,255,.06)}
.group.v-pure .cards{filter:drop-shadow(0 0 7px rgba(63,179,127,.75))}
.group.sparkle::after{content:"";position:absolute;left:50%;top:40%;width:10px;height:10px;pointer-events:none;
  background:radial-gradient(circle,#fff 0 30%,transparent 31%);
  box-shadow:0 -46px 0 -2px #fff6c0,32px -32px 0 -3px #c8ffe0,46px 0 0 -2px #fff6c0,32px 32px 0 -3px #c8ffe0,
             0 46px 0 -2px #fff6c0,-32px 32px 0 -3px #c8ffe0,-46px 0 0 -2px #fff6c0,-32px -32px 0 -3px #c8ffe0;
  border-radius:50%;animation:sparkle .9s ease-out forwards}
@keyframes sparkle{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.glabel{font-size:.68rem;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.glabel.pure{background:rgba(63,179,127,.22);color:#9cf0c6}
.glabel.seq{background:rgba(79,155,232,.22);color:#b9dcff}
.glabel.set{background:rgba(176,125,232,.22);color:#e1ccff}
.glabel.bad{background:rgba(226,97,79,.18);color:#ffb9ad}
#actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:12px}
#log{font-size:.76rem;color:var(--muted);text-align:center;min-height:1.2em;margin-top:8px}
.pile.droptarget .slot::after{content:"";position:absolute;inset:-8px;border-radius:12px;border:2px dashed #fff;background:rgba(255,255,255,.1)}

/* drag ghost + flying cards */
.ghost,.flyer{position:fixed;left:0;top:0;z-index:60;pointer-events:none;transform-style:preserve-3d;perspective:800px}
.ghost .card{transform:rotate(6deg) scale(1.08);box-shadow:0 18px 26px rgba(0,0,0,.5)}

/* ---------- celebration ---------- */
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.banner3d{position:fixed;left:50%;top:34%;z-index:71;pointer-events:none;text-align:center;perspective:700px;transform:translateX(-50%)}
.banner3d .b{font-family:var(--display);font-weight:800;font-size:clamp(3rem,15vw,6rem);line-height:1;
  color:var(--brass-2);text-shadow:0 1px 0 #b8862c,0 2px 0 #a4741f,0 3px 0 #8e6216,0 4px 0 #6f4a0e,0 10px 18px rgba(0,0,0,.6);
  animation:bannerIn 2.4s cubic-bezier(.2,.9,.2,1) forwards}
.banner3d .s{font-weight:700;font-size:1rem;margin-top:8px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7);animation:fadeOut 2.4s forwards}
@keyframes bannerIn{0%{transform:rotateX(85deg) scale(.4);opacity:0}25%{transform:rotateX(-12deg) scale(1.08);opacity:1}
  40%{transform:rotateX(0) scale(1)}80%{opacity:1}100%{transform:translateY(-30px) scale(.95);opacity:0}}
@keyframes fadeOut{0%,80%{opacity:1}100%{opacity:0}}
.trophy{font-size:4rem;text-align:center;line-height:1;margin:4px 0 6px;perspective:400px}
.trophy span{display:inline-block;animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotateY(360deg)}}
.reveal{animation:reveal .55s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0s)}
@keyframes reveal{from{transform:rotateY(180deg)}}
.floatmoji{position:fixed;z-index:65;pointer-events:none;font-size:2.1rem;left:0;top:0}


/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(2,10,8,.7);display:grid;place-items:center;padding:16px;z-index:20;backdrop-filter:blur(3px)}
.sheet{background:linear-gradient(180deg,var(--sheet-1),var(--sheet-2));border:1px solid rgba(255,255,255,.1);border-radius:22px;
  width:min(760px,100%);max-height:92vh;overflow:auto;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sheet h2{font-family:var(--display);font-weight:800;margin:0 0 4px;font-size:1.7rem}
.sheet .sub{color:var(--muted);margin:0 0 16px}
.res{display:grid;gap:10px}
.resrow{background:rgba(0,0,0,.22);border-radius:14px;padding:10px 12px}
.resrow .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.resrow .pts{font-weight:800;font-size:1.1rem}
.resrow.win{box-shadow:inset 0 0 0 2px var(--brass)}
.minihand{display:flex;flex-wrap:wrap;gap:8px;perspective:600px}
.minihand .group{gap:3px}
.minihand .card{--cw:32px}
.minihand .card + .card{margin-left:-12px}
table.scores{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:8px}
table.scores th,table.scores td{padding:7px 8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
table.scores th:first-child,table.scores td:first-child{text-align:left}
table.scores tfoot td{font-weight:800}
.rules h3{font-family:var(--display);margin:18px 0 6px;font-size:1.1rem;color:var(--brass-2)}
.rules p,.rules li{color:var(--ink);opacity:.9;line-height:1.55;font-size:.93rem}
.rules ul{padding-left:20px;margin:6px 0}
.sheet .foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.tag{display:inline-block;font-size:.66rem;font-weight:800;padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.tag.out{background:rgba(226,97,79,.25);color:#ffc2b6}
.tag.fold{background:rgba(255,255,255,.12);color:var(--muted)}
.tag.host{background:rgba(255,255,255,.12);color:var(--brass-2)}
.menu-sec{margin:16px 0}
.menu-sec h3{font-family:var(--display);font-size:1.05rem;margin:0 0 8px}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.themes button{border-radius:14px;padding:10px 4px 8px;display:grid;justify-items:center;gap:6px;font-size:.78rem;background:rgba(0,0,0,.2)}
.themes button.on{box-shadow:inset 0 0 0 2px var(--brass-2)}
.swatch{width:38px;height:28px;border-radius:50% / 46%;border:4px solid}
.kicklist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ---------- lobby ---------- */
.waiting{display:grid;place-items:center;flex:1;padding:16px 0}
.bigcode{font-family:var(--display);font-size:clamp(2.6rem,11vw,3.8rem);font-weight:800;letter-spacing:.22em;color:var(--brass-2);margin:6px 0 2px;text-align:center}
.plist{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}
.plist li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);padding:8px 10px;border-radius:12px}
.plist .av{width:30px;height:30px;font-size:.75rem;margin:0}
.settings{margin:12px 0;font-size:.82rem;color:var(--muted);text-align:center;display:grid;gap:12px}
.segs{display:inline-flex;background:rgba(0,0,0,.3);border-radius:999px;padding:3px;gap:2px}
.seg{padding:.35em .95em;font-size:.85rem;background:none;color:var(--muted)}
.seg.on{background:var(--brass);color:var(--on-brass)}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:#1d1d22;color:#fff;padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:80;max-width:90vw;text-align:center;font-size:.92rem}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#conn{position:fixed;top:0;left:0;right:0;z-index:40;background:#b5482f;color:#fff;text-align:center;font-weight:700;font-size:.88rem;
  padding:calc(6px + env(safe-area-inset-top)) 12px 6px;transform:translateY(-100%);transition:transform .25s}
#conn.show{transform:none}

@media (min-width:760px){
  #seats{height:150px}
  .seat{width:84px}
  .av{width:56px;height:56px;font-size:1.15rem}
  .seat .ring{inset:-5px;width:66px;height:66px}
  .seat .nm{font-size:.85rem}
  .seat .sc{font-size:.8rem}
}
@media (max-width:380px){
  #seats{height:108px}
  .seat{width:54px}
  .seat .av{width:40px;height:40px;font-size:.88rem}
  .seat .ring{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}
@media (max-width:400px){ .code-chip .lbl{display:none} header{gap:6px} }
/* short phones (iPhone SE and similar): tighten everything so the hand stays in view */
@media (max-height:740px) and (max-width:500px){
  :root{--cw:clamp(40px, 10.5vw, 60px)}
  #seats{height:96px}
  .seat .av{width:38px;height:38px;font-size:.82rem}
  .seat .ring{inset:-4px;width:46px;height:46px}
  .seat .nm{font-size:.66rem;margin-top:2px}
  .seat .sc{font-size:.62rem}
  .felt{height:118px;border-width:9px}
  .pile .slot{--cw:42px}
  #table{gap:6px;padding-bottom:6px}
  .status{padding:6px 12px;font-size:.84rem}
  #hand{gap:12px 10px}
}
@media (max-width:359px){
  header .logo{display:none}
  .code-chip{padding-left:10px}
  .code-chip b{letter-spacing:.08em}
  .seat .av{width:36px;height:36px;font-size:.8rem}
  .seat .ring{inset:-4px;width:44px;height:44px}
  .seat .nm{font-size:.62rem}
}

/* ---------- animated card art ----------
   Only transform/opacity are animated (cheap on phones). Every loop is 3.2s or 6.4s,
   and --ad (set per card from the clock) keeps cards out of sync and continuous across re-renders. */
.art{overflow:hidden}
.art .g{display:inline-block;transform-origin:50% 85%;animation:3.2s ease-in-out infinite;animation-delay:var(--ad,0s)}
.card[data-r="K"] .art .g{animation-name:kingSway}
.card[data-r="Q"] .art .g{animation-name:queenBreathe}
.card[data-r="J"] .art .g{animation-name:knightRear}
@keyframes kingSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-1px)}}
@keyframes queenBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12) translateY(-1px)}}
@keyframes knightRear{0%,55%,100%{transform:rotate(0)}20%{transform:rotate(-14deg) translateY(-2px)}35%{transform:rotate(4deg)}}
/* gold-foil sweep across the portrait panel */
.art::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:60%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);
  transform:translateX(-160%) skewX(-12deg);animation:foil 6.4s ease-in-out infinite;animation-delay:var(--ad,0s)}
@keyframes foil{0%,72%{transform:translateX(-160%) skewX(-12deg)}100%{transform:translateX(260%) skewX(-12deg)}}
/* jokers: turning star with twinkles */
.jk b{display:inline-block;animation:jokerStar 6.4s linear infinite;animation-delay:var(--ad,0s)}
@keyframes jokerStar{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.12)}50%{transform:rotate(180deg) scale(1)}
  75%{transform:rotate(270deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}
.card.joker .fc::before{content:"✦";position:absolute;top:12%;right:14%;font-size:calc(var(--cw)*.2);color:#c58bff;
  animation:twinkle 3.2s ease-in-out infinite;animation-delay:var(--ad,0s)}
.card.joker .jk::after{content:"✦";position:absolute;left:14%;bottom:12%;font-size:calc(var(--cw)*.15);color:#ffc95c;
  animation:twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--ad,0s) - 1.6s)}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}30%{transform:scale(1) rotate(45deg);opacity:1}60%{transform:scale(.4) rotate(90deg);opacity:0}}
/* wild tag pulse */
.wild{animation:wildPulse 3.2s ease-in-out infinite;animation-delay:var(--ad,0s)}
@keyframes wildPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* sheen across the stock pile's top card */
#deckPile .bk::after{width:60%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-170%) skewX(-12deg);animation:foil 6.4s ease-in-out infinite;animation-delay:-2s}
/* tiny cards (results, winner's hand) stay still to save battery */
.minihand .art .g,.minihand .art::after,.minihand .jk b,.minihand .wild,
.minihand .card.joker .fc::before,.minihand .card.joker .jk::after{animation:none}

/* =========================================================================
   Table talk (chat)
   ========================================================================= */
#chatBtn{position:relative}
.badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef5b48;color:#fff;
  font-size:.68rem;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--page-2);animation:badgePop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes badgePop{from{transform:scale(0)}}
#chatScrim{position:fixed;inset:0;z-index:34;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);animation:fadeIn .25s}
@keyframes fadeIn{from{opacity:0}}
#chat{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:35;height:min(70vh,560px);display:flex;flex-direction:column;
  background:var(--sheet-2);
  background:linear-gradient(180deg,color-mix(in srgb,var(--sheet-1) 78%,transparent),color-mix(in srgb,var(--sheet-2) 94%,transparent));
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:26px 26px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  padding-bottom:env(safe-area-inset-bottom);transform:translateY(105%);visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s .42s}
#chat.open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.2,.9,.25,1)}
.chat-grip{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:8px auto 0}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 8px 18px}
.chat-head h2{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:0;line-height:1.1}
.chat-sub{font-size:.76rem;color:var(--muted);margin-top:2px}
#chatList{flex:1;overflow-y:auto;padding:6px 14px 4px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain;
  -webkit-mask:linear-gradient(transparent,#000 18px);mask:linear-gradient(transparent,#000 18px)}
.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5;padding:20px}
.chat-empty b{display:block;font-family:var(--display);font-size:1.2rem;color:var(--ink);margin-bottom:4px}
.msg{display:flex;align-items:flex-end;gap:8px;max-width:86%;margin-top:8px}
.msg.cont{margin-top:0}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .mav{width:28px;flex:0 0 28px}
.msg .mav .av{width:28px;height:28px;font-size:.7rem;margin:0}
.msg .mav .av .dot{display:none}
.msg .who{font-size:.7rem;color:var(--muted);margin:0 0 3px 10px;font-weight:700}
.msg.me .who{display:none}
.msg.cont .who{display:none}
.bubble{padding:8px 13px;border-radius:19px 19px 19px 6px;font-size:.93rem;line-height:1.35;word-wrap:break-word;overflow-wrap:anywhere;
  background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.msg.cont:not(.me) .bubble{border-radius:6px 19px 19px 6px}
.msg.me .bubble{background:linear-gradient(140deg,var(--brass-2),var(--brass));color:var(--on-brass);border-radius:19px 19px 6px 19px;
  box-shadow:0 4px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.45)}
.msg.me.cont .bubble{border-radius:19px 6px 6px 19px}
.msg.big .bubble{background:none;box-shadow:none;font-size:2.4rem;padding:0 4px;line-height:1.1}
.msg time{font-size:.62rem;color:var(--muted);opacity:0;transition:opacity .2s;align-self:center;white-space:nowrap}
.msg:hover time,.msg:focus-within time,.msg.last time{opacity:.8}
.msg.enter{animation:msgIn .42s cubic-bezier(.2,1.3,.4,1)}
.msg.me.enter{animation-name:msgInMe}
@keyframes msgIn{from{transform:translate(-14px,10px) scale(.92);opacity:0}}
@keyframes msgInMe{from{transform:translate(14px,10px) scale(.92);opacity:0}}
.typing-line{min-height:22px;padding:0 20px;font-size:.76rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.dots{display:inline-flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:dot 1.1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.chat-quick{display:flex;gap:6px;overflow-x:auto;padding:4px 14px 8px;scrollbar-width:none}
.chat-quick::-webkit-scrollbar{display:none}
.chat-quick button{flex:0 0 auto;padding:.42em .8em;font-size:.84rem;font-weight:600;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);white-space:nowrap}
.chat-quick button.rx{font-size:1.2rem;padding:.2em .45em;background:none;border-color:transparent}
.chat-quick .sep{flex:0 0 1px;background:rgba(255,255,255,.15);margin:4px 2px}
#chatForm{display:flex;gap:8px;padding:6px 12px 12px}
#chatInput{border-radius:999px;padding:.72em 1.1em;background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.14);font-size:16px}
#chatSend{width:46px;height:46px;flex:0 0 46px;padding:0;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(140deg,var(--brass-2),var(--brass));color:var(--on-brass);box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .2s cubic-bezier(.3,1.6,.5,1),opacity .2s}
#chatSend:disabled{opacity:.35;transform:scale(.85)}
#chatSend:not(:disabled):active{transform:scale(.9) rotate(-8deg)}
@media (min-width:900px){
  #chat{left:auto;right:18px;bottom:18px;width:380px;height:min(640px,calc(100vh - 36px));border-radius:26px;border-bottom:1px solid rgba(255,255,255,.12);
    transform:translateX(calc(100% + 30px))}
  .chat-grip{display:none}
  #chatScrim{display:none}
}

/* speech bubbles over the table + typing dots on avatars */
.say{position:fixed;z-index:33;max-width:190px;padding:7px 11px;border-radius:14px;background:#fffdf7;color:#1d1a17;
  font-size:.8rem;font-weight:600;line-height:1.3;box-shadow:0 8px 22px rgba(0,0,0,.45);pointer-events:none;
  transform-origin:var(--ox,50%) 100%;animation:sayIn .35s cubic-bezier(.2,1.5,.4,1)}
.say::after{content:"";position:absolute;bottom:-6px;left:var(--ox,50%);margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fffdf7}
.say .n{display:block;font-size:.64rem;color:#8a6a2a;font-weight:800;margin-bottom:1px}
.say.big{font-size:1.7rem;padding:4px 10px}
.say.out{animation:sayOut .3s forwards}
@keyframes sayIn{from{transform:scale(.4) translateY(8px);opacity:0}}
@keyframes sayOut{to{transform:scale(.7) translateY(-6px);opacity:0}}
.av .typing{position:absolute;top:-8px;right:-12px;background:#fffdf7;color:#555;border-radius:10px;padding:3px 5px;line-height:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
.av .typing .dots i{width:4px;height:4px}
.say.below{transform-origin:var(--ox,50%) 0%}
.say.below::after{bottom:auto;top:-6px;border-top:0;border-bottom:7px solid #fffdf7;border-top-color:transparent}
@media (min-width:900px){
  body.chat-open #game{margin-right:414px;margin-left:max(12px,calc((100vw - 414px - 1100px) / 2));transition:margin .42s cubic-bezier(.2,.9,.25,1)}
  #game{transition:margin .42s cubic-bezier(.2,.9,.25,1)}
}

/* =========================================================================
   Card face styles (per viewer): classic | modern | bold
   ========================================================================= */
/* ---- classic: white face, two corner indices, real pip layouts, court portraits ---- */
.card[data-f="classic"] .fc,.card[data-f="bold"] .fc{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.card[data-f="classic"]{font-family:"Alegreya",Georgia,serif}
.ix{position:absolute;top:calc(var(--cw)*.045);left:calc(var(--cw)*.035);min-width:calc(var(--cw)*.18);text-align:center;
  font-weight:800;font-size:calc(var(--cw)*.22);line-height:.92;letter-spacing:-.08em}
.ix small{display:block;font-size:calc(var(--cw)*.19);font-weight:500;letter-spacing:0}
.ix.br{top:auto;left:auto;bottom:calc(var(--cw)*.045);right:calc(var(--cw)*.04);transform:rotate(180deg)}
.pips{position:absolute;left:30%;right:30%;top:9%;bottom:9%}
.pips span{position:absolute;transform:translate(-50%,-50%);font-size:calc(var(--cw)*.23);line-height:1}
.pips span.f{transform:translate(-50%,-50%) rotate(180deg)}
.ace{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.55);line-height:1}
.ace.fancy{font-size:calc(var(--cw)*.78)}
.ace.fancy::before{content:"";position:absolute;width:calc(var(--cw)*.62);height:calc(var(--cw)*.62);border-radius:50%;
  border:calc(var(--cw)*.015) solid #c9a24a;box-shadow:0 0 0 calc(var(--cw)*.03) #fff,0 0 0 calc(var(--cw)*.045) #c9a24a}
.court{position:absolute;left:24%;right:24%;top:8%;bottom:8%;border:1.5px solid currentColor;border-radius:calc(var(--cw)*.04);overflow:hidden;background:#fffaf0}
.court svg{display:block;width:100%;height:100%}
.court::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,236,170,.6) 50%,transparent);
  transform:translateX(-160%) skewX(-12deg);animation:foil 6.4s ease-in-out infinite;animation-delay:var(--ad,0s)}
.card[data-f="classic"] .wild{top:auto;bottom:calc(var(--cw)*.36);left:calc(var(--cw)*.03);font-size:calc(var(--cw)*.13)}
/* classic joker: vertical JOKER in two corners + jester */
.card[data-f="classic"].joker .fc{background:#fff;color:#2a1c14}
.jcorner{position:absolute;top:calc(var(--cw)*.06);left:calc(var(--cw)*.06);font-family:var(--ui);font-weight:900;font-size:calc(var(--cw)*.13);line-height:1.02;text-align:center;color:#c62b35}
.jcorner.br{top:auto;left:auto;bottom:calc(var(--cw)*.06);right:calc(var(--cw)*.06);transform:rotate(180deg);color:#2b4f9e}
.jester{position:absolute;left:22%;right:14%;top:16%;bottom:12%;display:grid;place-items:center}
.jester svg{width:100%;height:auto;animation:jesterNod 3.2s ease-in-out infinite;animation-delay:var(--ad,0s);transform-origin:50% 80%}
@keyframes jesterNod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-1px)}}

/* ---- bold / large print: huge index, four-colour suits ---- */
.card[data-f="bold"]{font-family:var(--ui)}
.card[data-f="bold"][data-s="D"]{color:#1d5fc4}
.card[data-f="bold"][data-s="C"]{color:#1d7f38}
.bix{position:absolute;top:calc(var(--cw)*.03);left:calc(var(--cw)*.06);font-weight:900;font-size:calc(var(--cw)*.44);line-height:1;letter-spacing:-.07em}
.bsuit{position:absolute;top:calc(var(--cw)*.48);left:calc(var(--cw)*.07);font-size:calc(var(--cw)*.36);line-height:1}
.bpip{position:absolute;right:calc(var(--cw)*.05);bottom:calc(var(--cw)*.03);font-size:calc(var(--cw)*.5);line-height:1;opacity:.85}
.card[data-f="bold"].joker .fc{background:#fff;color:#6c2f95}
.bjk{position:absolute;left:0;right:0;bottom:calc(var(--cw)*.12);text-align:center;font-weight:900;font-size:calc(var(--cw)*.17);letter-spacing:.04em}
.card[data-f="bold"] .wild{top:auto;bottom:calc(var(--cw)*.04);left:calc(var(--cw)*.05)}

/* ---- card backs (per viewer) ---- */
:root[data-back="red"] .bk,.pv[data-back="red"] .bk{
  background:repeating-linear-gradient(45deg,#b3202f 0 1.5px,transparent 1.5px 6px),repeating-linear-gradient(-45deg,#b3202f 0 1.5px,transparent 1.5px 6px),#fbeff0;
  box-shadow:inset 0 0 0 calc(var(--cw)*.06) #fff,inset 0 0 0 calc(var(--cw)*.075) #b3202f}
:root[data-back="blue"] .bk,.pv[data-back="blue"] .bk{
  background:repeating-linear-gradient(45deg,#1f4f9a 0 1.5px,transparent 1.5px 6px),repeating-linear-gradient(-45deg,#1f4f9a 0 1.5px,transparent 1.5px 6px),#eef3fb;
  box-shadow:inset 0 0 0 calc(var(--cw)*.06) #fff,inset 0 0 0 calc(var(--cw)*.075) #1f4f9a}
:root[data-back="royal"] .bk,.pv[data-back="royal"] .bk{
  background:
    radial-gradient(circle at 50% 50%,#e8c66a 0 9%,transparent 10% 15%,#e8c66a 16% 17%,transparent 18%),
    repeating-radial-gradient(circle at 50% 50%,rgba(232,198,106,.55) 0 1px,transparent 1.5px 5px),
    linear-gradient(160deg,#16306a,#0b1a3d);
  box-shadow:inset 0 0 0 calc(var(--cw)*.05) #0b1a3d,inset 0 0 0 calc(var(--cw)*.065) #e8c66a}
.pv[data-back="theme"] .bk{
  background:radial-gradient(circle at 50% 50%, var(--back-line) 0 6%, transparent 7%),
    repeating-conic-gradient(from 45deg at 50% 50%, var(--back-1) 0 25%, var(--back-2) 0 50%) 0 0 / calc(var(--cw)*.2) calc(var(--cw)*.2);
  box-shadow:inset 0 0 0 calc(var(--cw)*.05) var(--card), inset 0 0 0 calc(var(--cw)*.07) var(--back-line)}

/* settings previews */
.themes .pv{display:flex;justify-content:center;gap:2px;height:52px;align-items:center;perspective:300px}
.cards3{grid-template-columns:repeat(3,1fr)}
.cards3 .pv .card + .card{margin-left:-10px;transform:rotate(8deg) translateY(2px)}
.cards3 .pv .card:first-child{transform:rotate(-6deg)}
.themes .pv .card{box-shadow:0 2px 5px rgba(0,0,0,.45)}
/* tiny cards: classic pips get too small, so show the big index style instead */
.minihand .card[data-f="classic"] .pips,.minihand .card[data-f="classic"] .ix.br{display:none}
.minihand .card[data-f="classic"] .ix{font-size:calc(var(--cw)*.32)}
.minihand .court::after,.minihand .jester svg{animation:none}