/* =====================================================================
   SPOLEČNÝ LAYOUT STOLU pro všechny druhy online Lóry
   (kompletní zápas i jednotlivé hry Hráč/Rytíř).

   Jedno prostředí = jeden vzhled. Sem patří i budoucí reklama sponzorů
   na pozadí stolu (.stul-plocha / .stred).

   Tento soubor je IDENTICKÝ v obou aplikacích:
     src/lora_herna/static/css/stul-spolecny.css   (kompletní zápas)
     src/lora_game/static/css/stul-spolecny.css    (jednotlivé hry)
   Při úpravě je nutné změnit obě kopie stejně.
   ===================================================================== */

/* Plocha stolu — společný kontejner pro všechny hry. Bez výrazného pozadí,
   ať vypadá stejně jako kompletní zápas. Sem přijde reklama sponzorů
   (background-image) — pak se projeví ve všech hrách naráz. */
.stul-plocha {
  max-width: 980px;
  margin: 0 auto;
  /* Sem půjde reklama: background-image:url(...); background-size:cover;
     border-radius:16px; padding:14px; */
}

/* Čtvercový stůl — soupeři na stranách, hra (střed) uprostřed.
      .          soupeř-nahoře    .
   soupeř-vlevo    STŘED       soupeř-vpravo
   Ruka + akce jsou pod čtvercem. */
.ctverec {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr) minmax(120px, 1fr);
  grid-template-rows: auto auto;
  gap: 8px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto 12px;
}
.pozice-nahore { grid-column: 2; grid-row: 1; }
.pozice-vlevo  { grid-column: 1; grid-row: 2; }
.pozice-vpravo { grid-column: 3; grid-row: 2; }
.pozice-stred  { grid-column: 2; grid-row: 2; }

/* Široký režim pro vykládací hry (Desítky, Kvarty): 3 soupeři nahoře
   vedle sebe, hrací plocha přes celou šířku, ruka dole. */
.ctverec.siroka-hra { display: block; max-width: 960px; }
.ctverec.siroka-hra .souperi-radek {
  display: flex; justify-content: space-around; gap: 8px; margin-bottom: 10px;
}
.ctverec.siroka-hra .souperi-radek > .souper { flex: 1 1 0; min-width: 0; }
.ctverec.siroka-hra .stred {
  min-height: clamp(140px, 32vw, 220px); height: auto;
  flex-direction: column; align-items: stretch; gap: 6px; overflow: hidden;
}

/* Soupeři */
.souper { background: #0e2a1f; border: 1px solid #163a2c; border-radius: 10px;
          padding: 8px 10px; text-align: center; font-size: .85rem; }
.souper.tah, .souper.na-tahu { border-color: #ffd76a; }
.souper .jm { font-weight: 600; }
.souper.na-tahu .jm, .souper.tah .jm { color: #ffd76a; }
.souper-info { color: #bcd; font-size: .78rem; margin-top: 3px; }
.ruby { display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
        margin-top: 4px; min-height: 30px; }

/* Hrací plocha uprostřed */
.stred { min-height: clamp(240px, 60vw, 330px);
         display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
         align-items: center; background: #08231a; border: 1px dashed #1d4636;
         border-radius: 12px; padding: 14px; box-sizing: border-box; }

/* Zdvih ve 2×2 mřížce (fallback, pokud by křížové rozložení nešlo) */
.stred.zdvih-grid, .zdvih.zdvih-grid {
  display: grid; grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, 1fr);
  height: clamp(240px, 60vw, 330px);
  gap: 8px 14px; justify-content: center; align-content: center; flex-wrap: nowrap;
}

/* KŘÍŽOVÉ rozložení štychu: každý hráč vykládá kartu ze své strany stolu
   směrem do středu, karty se uprostřed z části překrývají. */
.stred.zdvih-kriz, .zdvih.zdvih-kriz {
  display: block; position: relative;
  height: clamp(240px, 60vw, 330px);
  padding: 6px; overflow: hidden;
}
.zdvih-kriz .kriz-karta { position: absolute; margin: 0; }
.zdvih-kriz .kriz-karta .karta { width: clamp(52px, 13vw, 84px); }
.zdvih-kriz .kriz-karta .jm {
  text-align: center; font-size: .7rem; color: #cde; margin-top: 2px; white-space: nowrap;
}
/* Kristina (seat 1) – vlevo, na střed výšky */
.zdvih-kriz .kriz-vlevo  { left: 0;  top: 50%; transform: translateY(-50%); }
/* Zuzi (seat 2) – nahoře, horní okraj karty na horní okraj stolu, střed šířky.
   Popisek jména je NAD kartou (column-reverse), ať netlačí kartu dolů. */
.zdvih-kriz .kriz-nahore {
  top: 0; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse;
}
.zdvih-kriz .kriz-nahore .jm { margin-top: 0; margin-bottom: 2px; }
/* Hanka (seat 3) – vpravo, na střed výšky */
.zdvih-kriz .kriz-vpravo { right: 0; top: 50%; transform: translateY(-50%); }
/* Lidský hráč (seat 0) – dole, spodní okraj karty na spodní okraj stolu, střed šířky */
.zdvih-kriz .kriz-dole   { bottom: 0; left: 50%; transform: translateX(-50%); }

/* Karty */
.karta { width: clamp(46px, 9vw, 70px); border-radius: 6px; display: block; }
.karta.legal { outline: 3px solid #ffd76a; cursor: pointer; }
.karta.zakaz { opacity: .72; }

/* Rubová karta = obrázek zadní strany */
.rub { width: clamp(20px, 5vw, 32px); height: clamp(30px, 7vw, 46px);
       background-image: url('/static/img/karty/_zadni_v2.png');
       background-size: cover; background-position: center;
       border-radius: 4px; margin-left: -9px; display: inline-block;
       box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

.misto { text-align: center; font-size: .78rem; color: #cde; }

/* Ruka lidského hráče */
.ruka { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
        margin-bottom: 10px; min-height: 60px; margin-top: 12px; }
.ruka .karta { cursor: default; border: 2px solid transparent; transition: transform .1s; }
.ruka .legal { cursor: pointer; box-shadow: 0 0 0 2px #ffd76a; }
.ruka .legal:hover { transform: translateY(-8px); }
.ruka .klik { cursor: pointer; }
.ruka .klik:hover { transform: translateY(-8px); }
.ruka .zakaz { filter: grayscale(.4) brightness(.85); opacity: .8; }

@media (max-width: 600px) {
  .ctverec { grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr) minmax(80px, 1fr); }
  .souper { font-size: .75rem; padding: 6px 7px; }
}

/* =====================================================================
   REKLAMA PARTNERŮ — mozaika na pozadí stolu (desktop) + logo pod
   stolem (mobil). Ovládá JS reklama.js.
   ===================================================================== */

/* Mozaika: vrstva pod obsahem stolu, poloprůhledná ať neruší hru. */
.reklama-mozaika {
  /* Nahoře vynech ~jednu řadu log; dole VÍC (dvě řady), ať mozaika
     nezasahuje pod ruku lidského hráče (jinak ztlumené karty mizí na bílém). */
  position: absolute;
  top: clamp(48px, 9vw, 78px); bottom: clamp(130px, 26vw, 210px);
  left: 0; right: 0; z-index: 0;
  display: grid; gap: 0;
  background: #ffffff;          /* bílý podklad, ať loga vyniknou */
  opacity: .92;                 /* výrazně viditelné */
  pointer-events: none;         /* kliky procházejí na hru… */
  border-radius: 12px; overflow: hidden;
}
.reklama-dlazdice {
  display: flex; align-items: center; justify-content: center;
  padding: 8px; pointer-events: auto;   /* …ale na logo kliknout lze */
  background: #ffffff;
}
.reklama-dlazdice img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
/* Stůl je pozicovaný, aby se mozaika (absolutní) vztáhla jen k němu. */
.stul-plocha { position: relative; }
/* VŠECHNY přímé prvky stolu (nadpis, info, čtverec, ruka, protokol, štychy…)
   musí být NAD mozaikou, ať bílý text nezaniká na bílém podkladu. */
.stul-plocha > *:not(.reklama-mozaika) { position: relative; z-index: 1; }

/* Mobil: jedno logo pod stolem. */
.reklama-mobil {
  text-align: center; margin: 14px auto; max-width: 320px;
}
.reklama-mobil img {
  max-width: 200px; max-height: 70px; object-fit: contain;
}
.reklama-popis {
  font-size: .72rem; color: #8aa; margin-top: 4px;
}