/* Karte za igranje (SVG simboli boja + CSS), zajedničke za sve kartaške igre. Preneto iz prototipa Klondike.
   Veličina dolazi iz --cw/--ch koje postavlja raspored igre. */
.board{position:absolute;touch-action:none;touch-action:pinch-zoom;isolation:isolate;-webkit-user-select:none;user-select:none}
/* vučenje jednim prstom ide igri, ali dva prsta uvek smeju da odzumiraju (none bi zarobio zum na telefonu) */
/* prazna mesta */
.slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.08);
  background:rgba(0,0,0,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),inset 0 2px 8px rgba(0,0,0,.25);
  display:grid;place-items:center;color:rgba(255,255,255,.16);transition:box-shadow .2s}
.slot .lbl{font-family:'Playfair Display',serif;font-weight:700;font-size:calc(var(--cw)*.42)}
.slot svg{width:42%;height:42%}
.slot[data-k=stock]{cursor:pointer}

/* karte */
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);perspective:1000px;
  transition:transform .4s cubic-bezier(.2,.75,.25,1);will-change:transform;touch-action:none;touch-action:pinch-zoom}
.lifter{position:absolute;inset:0}
.inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.card.down .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:calc(var(--cw)*.08);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 1px 1px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.2);transition:box-shadow .3s}
.front{background:linear-gradient(155deg,#fffdf8 0%,#f6f0e2 100%);box-shadow:0 1px 1px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.2),inset 0 0 0 1px rgba(0,0,0,.08)}
.card.up{cursor:grab}
.red{color:var(--red)} .black{color:var(--black)}
.card.fly .lifter{animation:hop .42s cubic-bezier(.3,.7,.3,1)}
.card.fly .face,.card.dragging .face{box-shadow:0 14px 28px rgba(0,0,0,.38),0 4px 8px rgba(0,0,0,.25)}
.card.dragging{transition:none;cursor:grabbing}
.card.dragging .lifter{transform:scale(1.05) rotate(-1.5deg);transition:transform .15s}
.instant .card,.instant .inner{transition:none!important}
@keyframes hop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.card.nope .lifter{animation:nope .38s}
@keyframes nope{20%{transform:translateX(-6px) rotate(-2deg)}45%{transform:translateX(5px) rotate(1.5deg)}70%{transform:translateX(-3px)}100%{transform:none}}
.card.hint .front,.slot.hint{animation:glow 1.1s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 2px rgba(242,201,100,.9),0 0 10px 2px rgba(242,201,100,.45)}50%{box-shadow:0 0 0 3px #ffd877,0 0 24px 8px rgba(255,214,110,.75)}}

.idx{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}
.tl{left:6%;top:5%} .br{right:6%;bottom:5%;transform:rotate(180deg)}
.r{font-family:'Libre Baskerville',Georgia,serif;font-weight:700;font-size:calc(var(--cw)*.2);letter-spacing:-.06em}
.is{width:calc(var(--cw)*.14);height:calc(var(--cw)*.14);margin-top:calc(var(--cw)*.03)}
.pips{position:absolute;left:33%;right:33%;top:18%;bottom:18%}
.pip{position:absolute;width:calc(var(--cw)*.175);height:calc(var(--cw)*.175);transform:translate(-50%,-50%)}
.pip.flip{transform:translate(-50%,-50%) rotate(180deg)}
.ace{position:absolute;inset:0;display:grid;place-items:center}
.ace svg{width:calc(var(--cw)*.46);height:calc(var(--cw)*.46);filter:drop-shadow(0 1px 0 rgba(0,0,0,.15))}
.court{position:absolute;left:21%;right:21%;top:15%;bottom:15%;border-radius:calc(var(--cw)*.04);
  border:1px solid #c19a52;box-shadow:inset 0 0 0 2px #fffaf0,inset 0 0 0 3px rgba(193,154,82,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%}
.red .court{background:linear-gradient(170deg,#fdf1ea,#f6dfd6)}
.black .court{background:linear-gradient(170deg,#f1f3f8,#dfe3ee)}
.crown{font-size:calc(var(--cw)*.24);line-height:1;color:#a8823a;font-variant-emoji:text}
.cl{font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:calc(var(--cw)*.4);line-height:.9}
.cs{width:calc(var(--cw)*.17);height:calc(var(--cw)*.17)}
.bigsuit{display:none}

/* male karte (telefon): krupan znak dole, kao u aplikacijama */
.small .tl{flex-direction:row;gap:2px;left:7%;top:4%;align-items:center}
.small .r{font-size:calc(var(--cw)*.36)}
.small .is{width:calc(var(--cw)*.26);height:calc(var(--cw)*.26);margin:0}
.small .br,.small .pips,.small .court,.small .ace{display:none}
.small .bigsuit{display:block;position:absolute;right:9%;bottom:8%;width:calc(var(--cw)*.52);height:calc(var(--cw)*.52)}
.small .bigl{position:absolute;left:8%;bottom:6%;font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:calc(var(--cw)*.42);line-height:1}

/* poleđina */
.back{transform:rotateY(180deg);border:calc(var(--cw)*.045) solid #fbf6ea;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,230,180,.2),transparent 62%),
    repeating-linear-gradient(45deg,rgba(226,190,120,.24) 0 1px,transparent 1px calc(var(--cw)*.075)),
    repeating-linear-gradient(-45deg,rgba(226,190,120,.24) 0 1px,transparent 1px calc(var(--cw)*.075)),
    linear-gradient(160deg,#8a1d29,#520d16)}
.back::before{content:'';position:absolute;inset:calc(var(--cw)*.035);border:1px solid rgba(232,200,130,.7);border-radius:calc(var(--cw)*.045)}
.back::after{content:'P';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--cw)*.38);height:calc(var(--cw)*.38);border-radius:50%;display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:calc(var(--cw)*.24);color:#5a1019;
  background:radial-gradient(circle at 35% 30%,#f6dea4,#c79a48 65%,#8e6526);box-shadow:0 0 0 2px rgba(82,13,22,.6),0 0 0 3px rgba(232,200,130,.6)}


.instant .card,.instant .inner{transition:none!important}
@media (prefers-reduced-motion:reduce){.card,.inner{transition-duration:.01s!important}.card.fly .lifter{animation:none}}

/* džoker (Canasta i druge igre sa džokerima) */
.jk .jw{font:700 calc(var(--cw)*.09)/1 var(--sans);letter-spacing:.02em;writing-mode:vertical-rl;text-orientation:upright;margin-top:calc(var(--cw)*.02)}
.joker{position:absolute;inset:18% 16%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  border-radius:calc(var(--cw)*.05);border:1px solid #c19a52;background:radial-gradient(circle at 50% 40%,#fff6dc,#f3e2b8)}
.joker span{font-size:calc(var(--cw)*.44);line-height:1;color:#c0392b}
.black .joker span{color:#2b2b3a}
.joker b{font:italic 700 calc(var(--cw)*.17) 'Playfair Display',serif}
.small .joker{display:none}
.small .jk.tl .jw{display:none}
.jk .r{font-family:var(--sans);letter-spacing:0}
.red .jk .r{color:#c0392b}
.jkb{display:none}
.small .jkb{display:block;left:auto;right:9%;bottom:6%;color:#c0392b;font-style:normal}
.small .black .jkb{color:#2b2b3a}