/* OwlCount — blackjackový stůl.
 *
 * Tvar je opsany od skutecneho stolu: rovna hrana nahore, kde stoji krupier,
 * a oblouk dole, kolem ktereho sedi hraci. Pole na zetony lezi na oblouku,
 * karty se kladou nad ne. Vpravo nahore je bota, vlevo odkladaci box —
 * stejne jako v kasinu, protoze podle odlozenych karet se odhaduje, kolik
 * balicku jeste zbyva.
 *
 * Cely stul je postaveny na PROCENTECH uvnitr kontejneru s pevnym pomerem
 * stran. Diky tomu se zmensuje sam a nepotrebuje prepocty — jen text a karty
 * skaluje --tk, ktere dopocita JS.
 */

.bjt{ --tk:1; --filc:#0f5132; }

/* ---------- Deska stolu ---------- */
.bjt-stul{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  /* Rovná hrana nahoře (krupiér), oblouk dole (hráči). */
  border-radius:calc(18px * var(--tk)) calc(18px * var(--tk)) 48% 48% / calc(18px * var(--tk)) calc(18px * var(--tk)) 62% 62%;
  /* Kožený mantinel kolem plsti. */
  background:linear-gradient(180deg,#3a2a1e,#241811);
  padding:calc(13px * var(--tk));
  box-shadow:0 calc(20px * var(--tk)) calc(46px * var(--tk)) rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  isolation:isolate;
}
/* Plst. */
.bjt-filc{
  position:absolute; inset:calc(13px * var(--tk));
  border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 6%, rgba(255,255,255,.09), transparent 46%),
    radial-gradient(ellipse at 50% 96%, rgba(0,0,0,.34), transparent 54%),
    linear-gradient(180deg,#12603b 0%, var(--filc) 46%, #0a3d26 100%);
  box-shadow:inset 0 0 calc(40px * var(--tk)) rgba(0,0,0,.45);
  overflow:hidden;
}
/* Jemná textura plsti. */
.bjt-filc::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px);
  pointer-events:none;
}

/* Oblouky natištěné na plsti — jako na skutečném stole. */
.bjt-oblouk{
  position:absolute; left:50%; transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  pointer-events:none;
}
.bjt-oblouk-1{ width:132%; height:150%; top:-46%; }
.bjt-oblouk-2{ width:106%; height:122%; top:-30%; border-color:rgba(255,255,255,.10); }

.bjt-napis{
  position:absolute; left:50%; transform:translateX(-50%);
  text-align:center; white-space:nowrap; pointer-events:none;
  color:rgba(255,255,255,.30);
  font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.bjt-napis-1{ top:31%; font-size:calc(12px * var(--tk)); color:rgba(255,236,170,.42); }
.bjt-napis-2{ top:38%; font-size:calc(8.5px * var(--tk)); letter-spacing:.13em; }

/* Sova jako vodoznak na plsti.
   Obrázek je čtvercový (384×384) a bj-table.js mu nastavuje atributy
   width/height. Atribut height se chová jako CSS výška, takže dokud tady
   stála jen šířka, výška zůstávala 384 px: na počítači z toho byla známka
   233×384 (poměr 0,61) a na užším okně přerostla plst o 148 px do výšky.
   height:auto to řeší, aspect-ratio a object-fit jsou pojistka.
   max-height drží sovu uvnitř plsti i tam, kde je stůl nízký a široký. */
.bjt-sova{
  position:absolute; left:50%; top:56%;
  transform:translate(-50%,-50%);
  width:34%; height:auto; max-height:62%;
  aspect-ratio:1 / 1; object-fit:contain;
  opacity:.11;
  filter:blur(.4px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 46%, transparent 84%);
          mask-image:radial-gradient(ellipse at 50% 50%, #000 46%, transparent 84%);
  pointer-events:none;
}

/* ---------- Bota a odkládací box ---------- */
.bjt-bota, .bjt-box{
  position:absolute; top:4%;
  width:calc(34px * var(--tk)); height:calc(46px * var(--tk));
  border-radius:calc(5px * var(--tk));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 calc(3px * var(--tk)) calc(8px * var(--tk)) rgba(0,0,0,.5);
}
.bjt-bota{ right:5%; background:linear-gradient(150deg,#2f2f4d,#1a1a30); }
.bjt-box{ left:5%; background:linear-gradient(150deg,#1d1d33,#141426); overflow:hidden; }
/* Karty v odkládacím boxu rostou podle penetrace — vodítko pro odhad balíčků. */
.bjt-box-karty{
  position:absolute; left:0; right:0; bottom:0;
  background:repeating-linear-gradient(0deg,#e8eaf4 0 2px,#c4c8dc 2px 3px);
  transition:height .4s ease;
}

/* ---------- Krupiér ---------- */
.bjt-krupier{
  position:absolute; left:50%; top:7%;
  transform:translateX(-50%);
  text-align:center; z-index:3;
}
.bjt-jmenovka{
  font-size:calc(9px * var(--tk) + 1px); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-weight:700; margin-bottom:calc(4px * var(--tk));
}

/* ---------- Místa hráčů (rozmisťuje JS po oblouku) ---------- */
.bjt-misto{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:calc(3px * var(--tk));
  z-index:2;
}
.bjt-misto.hraje .bjt-pole{
  border-color:rgba(255,236,170,.85);
  box-shadow:0 0 calc(14px * var(--tk)) rgba(255,220,130,.55);
}
/* Sázkové pole na plsti. */
.bjt-pole{
  width:calc(46px * var(--tk)); height:calc(46px * var(--tk));
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, box-shadow .2s;
  position:relative;
}
/* Žetony v poli.
   Skládají se ze tří vrstev, aby to byl kasinový žeton a ne kolečko:
     1. okrajové vsádky (světlé segmenty po obvodu) — to je ta věc, podle
        které žeton člověk pozná na první pohled,
     2. tmavý střed s prstencem,
     3. sova uprostřed jako ražba.
   Stoh tří kusů s odsazením dělá dojem hromádky, ne nálepky. */
.bjt-stoh{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:calc(30px * var(--tk)); height:calc(30px * var(--tk));
}
.bjt-zeton{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    url("logo.webp?v=3") center / 48% auto no-repeat,
    radial-gradient(circle closest-side, #171733 0 60%, transparent 61%),
    radial-gradient(circle closest-side, rgba(255,255,255,.34) 0 68%, transparent 69%),
    repeating-conic-gradient(from 11deg,
      #f1f2f8 0 14deg, #5a5ee0 14deg 45deg);
  box-shadow:
    inset 0 0 0 calc(1.5px * var(--tk)) rgba(255,255,255,.75),
    inset 0 calc(-2px * var(--tk)) calc(3px * var(--tk)) rgba(0,0,0,.45),
    0 calc(2px * var(--tk)) calc(4px * var(--tk)) rgba(0,0,0,.55);
}
/* Spodní kusy hromádky — jen okraj, střed překryje ten vrchní. */
.bjt-zeton:nth-child(1){ transform:translateY(calc(3px * var(--tk))); filter:brightness(.72); }
.bjt-zeton:nth-child(2){ transform:translateY(calc(1.5px * var(--tk))); filter:brightness(.86); }
.bjt-zeton:nth-child(3){ transform:translateY(0); }

/* ---------- Karty ---------- */
.bjt-ruce{ display:flex; gap:calc(6px * var(--tk)); align-items:flex-end; }
.bjt-ruka{ display:flex; gap:calc(-6px * var(--tk)); }
.bjt-karta{
  position:relative;
  width:calc(34px * var(--tk) * var(--kk,1)); height:calc(47px * var(--tk) * var(--kk,1));
  border-radius:calc(4px * var(--tk) * var(--kk,1));
  background:linear-gradient(165deg,#fdfdff,#e4e6f0);
  color:#14142a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; line-height:1;
  font-size:calc(14px * var(--tk) * var(--kk,1));
  box-shadow:0 calc(2px * var(--tk)) calc(7px * var(--tk)) rgba(0,0,0,.55);
  flex:0 0 auto;
  margin-left:calc(-9px * var(--tk));   /* karty se překrývají jako v ruce */
  animation:bjtLet .45s cubic-bezier(.18,.72,.28,1) both;
}
.bjt-karta:first-child{ margin-left:0; }
.bjt-karta .bjt-barva{ font-size:calc(9px * var(--tk)); font-weight:600; opacity:.75; }
.bjt-karta.cervena{ color:#c02034; }
.bjt-karta.rub{
  background:
    repeating-linear-gradient(45deg,#43436e 0 calc(3px * var(--tk)),#31314f 0 calc(6px * var(--tk)));
  color:transparent; border:1px solid rgba(255,255,255,.18);
}

@keyframes bjtLet{
  from{ transform:translate(var(--dx,140px), var(--dy,-120px)) rotate(18deg) scale(.8); opacity:0; }
  55% { opacity:1; }
  to  { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
}

/* Hodnota Hi-Lo nad kartou (jen ve škole). */
.bjt-hodnota{
  position:absolute; top:calc(-10px * var(--tk)); left:50%;
  transform:translateX(-50%);
  font-size:calc(10px * var(--tk)); font-weight:800;
  padding:calc(1px * var(--tk)) calc(5px * var(--tk));
  border-radius:calc(6px * var(--tk));
  background:#0d0d1c; border:1px solid currentColor;
  animation:bjtHodnota .3s ease both;
}
.bjt-hodnota.plus{ color:#4ade80; } .bjt-hodnota.nula{ color:#c3c7d6; } .bjt-hodnota.minus{ color:#f87171; }
@keyframes bjtHodnota{ from{ opacity:0; transform:translate(-50%,6px) scale(.7);} to{ opacity:1; transform:translate(-50%,0) scale(1);} }

/* ---------- Součty a bubliny ---------- */
.bjt-soucet{
  font-size:calc(10.5px * var(--tk) + 1px); font-weight:800;
  color:#fff; background:rgba(0,0,0,.42);
  padding:calc(1px * var(--tk)) calc(6px * var(--tk));
  border-radius:calc(6px * var(--tk));
  min-height:calc(13px * var(--tk));
}
.bjt-soucet:empty{ background:none; }
.bjt-soucet.bust{ background:rgba(190,30,45,.85); }
.bjt-soucet.bj{ background:rgba(212,160,23,.9); color:#1a1200; }
.bjt-bublina{
  font-size:calc(9px * var(--tk)); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.62); min-height:calc(11px * var(--tk)); font-weight:700;
}

@media(prefers-reduced-motion:reduce){
  .bjt-karta, .bjt-hodnota{ animation:none; }
}