/* Karty partie: moderní tarot. Základ (--w, rádius, cqw) dědí z .card, nemají roh s hodnotou. */
.pcard{--pf:#fff;--pa:var(--a);--pk:#17171b;display:block;padding:0;text-align:center;background:
    radial-gradient(85% 58% at 50% 46%,color-mix(in srgb,var(--a) 34%,transparent),transparent 74%),
    linear-gradient(160deg,color-mix(in srgb,var(--a) 20%,#17171b),#0e0e11 62%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.45)}
/* rámeček je soustředný s kartou: rádius karty 16 minus odsazení 4,5 */
.pcard::before{content:'';position:absolute;inset:4.500cqw;border-radius:11.500cqw;border:max(1px,.7cqw) solid color-mix(in srgb,var(--a) 42%,transparent);pointer-events:none}
.pcard .pem{position:absolute;left:50%;top:50%;width:60cqw;height:60cqw;transform:translate(-50%,-54%);display:block}
.pcard .pcat{position:absolute;left:0;right:0;top:12cqw;font:500 6.200cqw/1 'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--a);white-space:nowrap}
.pcard .pname{position:absolute;left:8cqw;right:8cqw;bottom:12cqw;font:500 11.500cqw/1 'Geist',system-ui,sans-serif;letter-spacing:-.025em;color:#fff;white-space:nowrap}
.pcard .pname.long{font-size:10.200cqw}

/* druhá strana velké karty: celé pravidlo */
.pcard.prule{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:calc(var(--w,92px)*.1) calc(var(--w,92px)*.095);/* cqw by se na vlastním paddingu počítalo z okna */text-align:left;background:linear-gradient(160deg,color-mix(in srgb,var(--a) 18%,#17171b),#0e0e11 70%)}
.pcard.prule::before{display:none} /* rub je bez vnitřního rámečku */
.prule .pem{left:auto;right:9.500cqw;top:8.500cqw;width:13cqw;height:13cqw;transform:none}
.prule .pcat{position:static}
.prule h3{margin:4.500cqw 0 0;font:500 11cqw/1.05 'Geist',system-ui,sans-serif;letter-spacing:-.025em;color:#fff}
.prule p{margin-top:5cqw;font:400 8.600cqw/1.28 'Geist',system-ui,sans-serif;letter-spacing:-.01em;color:#ececf0;text-wrap:pretty}
.prule p.tm{font-size:9.600cqw}
.prule p.tb{font-size:11cqw}

/* malý odznak u ukazatele tahu */
.pbadge{--pf:#fff;--pa:var(--a);--pk:#17171b;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--a) 24%,#141418);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 62%,transparent)}
.pbadge .pem{width:28px;height:28px;display:block} /* sudé číslo jako kolečko, jinak leží na půl pixelu */

/* přepínač na úvodní obrazovce: všechny plující karty se otočí a barva režimu se prolne */
.wash{position:fixed;inset:0;background:radial-gradient(90% 60% at 50% 30%,rgba(120,84,220,.42),transparent 72%),radial-gradient(70% 40% at 80% 85%,rgba(255,127,209,.18),transparent 70%);opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
#home.premium .wash{opacity:1}
.in{position:relative;transform:perspective(900px) rotateY(0deg);transform-style:preserve-3d;transition:transform .3s var(--ease);transition-delay:calc(var(--i)*30ms)}
#home.premium .in{transform:perspective(900px) rotateY(180deg)}
.in .card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.in .rear{position:absolute;inset:0;transform:rotateY(180deg)}
/* iPhone neschová roh karty (má vlastní vrstvu) ani s backface-visibility: odvrácená strana se proto vypíná úplně, v půlce otočení */
.in>.card{transition:visibility 0s linear calc(var(--i)*30ms + 110ms)}
.in>.rear,#home.premium .in>.card:not(.rear){visibility:hidden}
#home.premium .in>.rear{visibility:visible}
.mode{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(0,0,0,.34)}
.mode i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:#f4f4f5;transition:transform .3s var(--ease),background-color .3s var(--ease)}
#home.premium .mode i{transform:translateX(100%);background:#d7c8ff}
.mode button{all:unset;position:relative;text-align:center;padding:10px 0;border-radius:999px;font-size:15px;color:#c9c9cf;transition:color .2s var(--ease);-webkit-tap-highlight-color:transparent;cursor:pointer}
.mode button[aria-pressed=true]{color:#0a0a0b}
.note{text-align:center;font-size:13px;color:#a6a6ad;height:18px;line-height:18px}
#home #create,#home #begin{transition:background-color .3s var(--ease),transform .16s var(--ease)}
#home #create:active,#home #begin:active{transform:scale(.97)}
#home.premium #create,#home.premium #begin:not(.wait){background:#d7c8ff}
/* název režimu vedle kódu místnosti */
.coderow{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.coderow .code{margin-top:0}
.modetag{flex:none;padding:5px 10px;border-radius:999px;font-size:13px;line-height:16px;background:rgba(255,255,255,.1);color:#c9c9cf}
.modetag.premium{background:#d7c8ff;color:#0a0a0b}

/* odznak u ukazatele tahu: dotyková plocha 48 px, odznak 40 px */
#badgeBtn{flex:none;display:grid;place-items:center;width:48px;height:48px;margin:0 -4px;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease)}
#badgeBtn[hidden]{display:none}
#badgeBtn:active{transform:scale(.94)}

/* velká karta partie: úvod před rozdáním a otevřené pravidlo */
#pOv{position:fixed;inset:0;z-index:12;display:grid;justify-items:center;align-items:center;grid-template-rows:1fr auto 1fr}
#pOv[hidden]{display:none}
#pScrim{position:absolute;inset:0;background:rgba(0,0,0,.84)}
#pMover{position:relative;grid-row:2;--w:min(86vw,350px,calc(76dvh*5/7));width:var(--w)}
#pOv.intro #pMover{--w:min(60vw,250px,calc(50dvh*5/7))}
#pFl{position:relative;width:var(--w);aspect-ratio:5/7;transform-style:preserve-3d;touch-action:none;cursor:pointer}
#pFl>.card{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#pFl>.pcard{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 34%,transparent),0 18px 50px rgba(0,0,0,.6)}
#pFl>:nth-child(2){transform:rotateY(180deg)}
#pHint{position:relative;grid-row:3;align-self:start;margin-top:14px;padding:0 20px;font-size:14px;line-height:1.35;color:#a6a6ad;text-align:center}
#pOv.intro #pHint{margin-top:20px;padding:0 32px;font-size:18px;color:#f4f4f5;text-wrap:balance}

/* karta v ruce: pravidlo s ní něco udělá (ikonka), nebo ji pustí jen pravidlo (roh). Jen na tahu. */
.rfx{position:absolute;z-index:2;left:35cqw;top:6cqw;width:21cqw;height:21cqw;border-radius:50%;display:grid;place-items:center;background:var(--ra,#d7c8ff);color:#0a0a0b;animation:rfxIn .22s var(--ease) both}
.rfx svg{width:72%;height:72%;fill:currentColor}
/* kartu pouští jen pravidlo: celý obrys karty, kolem kterého objíždí světlo. Zaoblení stejným výpočtem jako .card (cqw by vyšlo z vnitřku bez paddingu). */
.rfx.free{inset:0;left:0;top:0;width:auto;height:auto;box-sizing:border-box;display:block;overflow:hidden;pointer-events:none;background:color-mix(in srgb,var(--ra,#d7c8ff) 42%,transparent);border-radius:calc(var(--w,92px)*.16);padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.rfx.free::after{content:'';position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--ra,#d7c8ff) 82%,#fff 94%,transparent 100%);animation:rfxRun 2.4s linear infinite}
@keyframes rfxRun{to{transform:rotate(360deg)}}
@keyframes rfxIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* balíček s kartou lícem nahoru: pod ní je vidět hrana rubů, ať si ho nikdo nesplete s hromádkou */
#cards .card.deck.peeked{box-shadow:0 0 0 1px rgba(255,255,255,.1),2px 3px 0 #2a2b30,4px 6px 0 #17181b,0 8px 18px rgba(0,0,0,.45)}

/* Točka: šipka směru vedle balíčku */
#dirMark{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;transform:translateY(-50%);text-align:center;font-size:11px;line-height:1.2;color:#a6a6ad;pointer-events:none}
#dirMark[hidden]{display:none}
#dirMark svg{width:30px;height:30px;color:var(--ra,#ff7fd1);transition:transform .32s var(--ease)}
#dirMark.back svg{transform:scaleX(-1)}
#dirMark.off svg{color:#6c6c73}

#chip.wide span{font:500 13px 'Geist',system-ui,sans-serif;white-space:nowrap}

/* Premium v pravidlech */
.rh{margin-top:22px;font-size:17px;font-weight:500}
.prlist{list-style:none;padding:0;display:grid;gap:10px;margin-top:12px}
.prlist li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.3;color:#c4c4cb}
.prlist b{display:block;color:#fff;font-size:15px;font-weight:500}

@media (prefers-reduced-motion:reduce){.in,.in>.card,.wash,.mode i,#home #create,#home #begin,#dirMark svg{transition:none}.rfx{animation:none}.rfx.free{background:var(--ra,#d7c8ff)}.rfx.free::after{display:none}}

/* volba u stolu: Dostavník dvě karty, Mentalista karta dalšího hráče. Leží přes hromádku, ruka zůstává vidět. */
#pick2{position:absolute;z-index:5;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateY(-50%);pointer-events:none}
#pick2[hidden]{display:none}
#pick2 .plabel{padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.72);font-size:13px;line-height:18px;color:#f4f4f5}
#pick2 .prow{display:flex;justify-content:center;align-items:center;gap:14px}
/* popisek vedle karty, nad ní by se nevešel pod jméno soupeře */
#pick2 .plabel{flex:none;max-width:84px;text-align:left;border-radius:14px;padding:8px 10px}
#pick2 .pkside{padding-left:98px}
#pick2 .card{--w:var(--pick-w);box-shadow:0 0 0 1.5px var(--ra,#d7c8ff),0 12px 34px rgba(0,0,0,.65);animation:pickIn .26s var(--ease) both}
#pick2 button.card{pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease)}
#pick2 button.card:active{transform:scale(.97)}
@keyframes pickIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
/* Malíř: vybraná barva z dvojice */
.act.suit.on{background:#f4f4f5}
/* Malíř: dvojice u hromádky */
#chip.pair{max-width:calc(100vw - 24px);min-width:0}
#chip.pair svg{flex:none;width:20px;height:20px}
#chip.pair span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px 'Geist',system-ui,sans-serif}
.rfx svg.l{fill:none;stroke:currentColor;stroke-width:2.600;stroke-linecap:round;stroke-linejoin:round}
.pileFx svg.l{fill:none;stroke:var(--c,#fff);stroke-width:2.200;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){#pick2 .card{animation:none}}