/* stol2d.css — wygląd stołu premium 2D (stol2d.mjs): zdjęcie salonu, portrety w złocie, mięta jako akcent ruchu.
   Paleta ze wzoru Ilyi 5.11: krem #efe6d2, złoto #c9a65c, mięta #8fe6c3, szkło rgba(10,22,18,.78). */
:root { --s2-krem: #efe6d2; --s2-krem2: rgba(239, 230, 210, .66); --s2-zloto: #c9a65c; --s2-mieta: #8fe6c3; --s2-mieta2: #5fcfa5;
  --s2-szklo: rgba(10, 22, 18, .78); --s2-linia: rgba(239, 230, 210, .12); --s2-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --s2-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.s2 { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b1712; color: var(--s2-krem); font-family: var(--s2-sans); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.s2-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; pointer-events: none; }
.s2--pion .s2-tlo { object-position: 46% 50%; transform: scale(1.02); }
.s2-winieta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(0, 0, 0, .38)), linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 16%, transparent 80%, rgba(0, 0, 0, .3)); }
.s2-kompas { position: absolute; color: #b9d8c4; opacity: .5; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.s2-karty { position: absolute; inset: 0; }
.s2-karta { position: absolute; border-radius: 7%/5%; box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .32); transform-origin: 50% 80%; will-change: transform; transition: top .22s cubic-bezier(.2, .8, .25, 1), left .22s cubic-bezier(.2, .8, .25, 1), filter .2s; -webkit-user-drag: none; }
.s2-karta[data-where="reka"], .s2-karta[data-where="dziadek"] { cursor: default; }
.s2-karta.s2-moze { cursor: pointer; box-shadow: 0 0 0 1.5px rgba(143, 230, 195, .75), 0 10px 22px rgba(0, 0, 0, .4); }
.s2-karta.s2-ciemna { filter: brightness(.62) saturate(.7); }
.s2-karta.s2-rada { box-shadow: 0 0 0 3px #ffd57a, 0 0 24px rgba(255, 213, 122, .7); }
@media (hover: hover) { .s2-karta.s2-moze:hover { filter: brightness(1.06); translate: 0 -6px; } }

/* miejsca graczy: portret w złotym kole, litera strony w kółku, imię, liczba kart */
.s2-miejsce { position: absolute; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; z-index: 80; }
.s2-portret { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex: none; background: #1d3a2f; box-shadow: 0 0 0 2px #b8924b, 0 0 0 4px rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .45); transition: box-shadow .3s; }
.s2-portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-portret:empty { display: none; }
.s2-txt { display: grid; gap: 3px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.s2-txt b { display: flex; align-items: center; gap: 9px; font: 500 19px/1.1 var(--s2-sans); color: var(--s2-krem); }
.s2-strona { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1.4px solid var(--s2-krem2); border-radius: 50%; font: 600 12px/1 var(--s2-sans); font-style: normal; color: var(--s2-krem); }
.s2-ile { font: 500 14px/1 var(--s2-sans); color: var(--s2-krem2); padding-left: 31px; }
.s2-ile:not(:empty)::before { content: ""; display: inline-block; width: 10px; height: 13px; margin-right: 7px; vertical-align: -2px; border: 1.4px solid currentColor; border-radius: 2px; box-shadow: -3px 2px 0 -1.4px currentColor; }
.s2-status { display: none; }
.s2-tag:empty { display: none; }
.s2-tag { justify-self: start; margin-left: 31px; padding: 3px 10px; border-radius: 999px; font: 700 13px/1 var(--s2-sans); color: #10231b; background: rgba(239, 230, 210, .9); }
.s2-tag .s2-czerw { color: #c41d34; }
.s2-ja .s2-tag { display: none; }
.s2-tura .s2-portret { box-shadow: 0 0 0 2px var(--s2-mieta), 0 0 0 5px rgba(143, 230, 195, .25), 0 0 26px rgba(143, 230, 195, .45); }
.s2-tura .s2-imie { color: var(--s2-mieta); }
/* ja: bez portretu, „S · TY · POŁUDNIE”, pod spodem miętowy status i kreska */
.s2-ja { flex-direction: column; gap: 2px; text-align: center; }
.s2-ja .s2-portret { display: none; }
.s2-ja .s2-txt b { font: 600 13px/1 var(--s2-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--s2-krem); }
.s2-ja .s2-strona { letter-spacing: 0; }
.s2-ja .s2-status { display: block; font: 500 17px/1.35 var(--s2-sans); font-style: normal; color: var(--s2-mieta); letter-spacing: .01em; min-height: 1.35em; }
.s2-ja.s2-tura .s2-status::after { content: ""; display: block; width: 52px; height: 3px; margin: 7px auto 0; border-radius: 2px; background: var(--s2-mieta); box-shadow: 0 0 12px rgba(143, 230, 195, .7); }
.s2-ja .s2-imie { color: var(--s2-krem) !important; }

/* dymek: odzywka / pas / kontra przy graczu */
.s2-dymek { position: absolute; left: 50%; top: -12px; transform: translate(-50%, -100%); padding: 7px 14px; border-radius: 999px; font: 700 16px/1 var(--s2-sans); color: #10231b; background: var(--s2-krem); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); animation: s2-dymek .28s cubic-bezier(.2, .8, .25, 1.3); }
.s2-miejsce--W .s2-dymek, .s2-miejsce--E .s2-dymek { left: 29px; }
.s2-dymek--gold { background: linear-gradient(180deg, #f6e2ad, #c9a65c); }
.s2-dymek--blue { background: rgba(239, 230, 210, .9); color: #2a3b34; }
.s2-dymek--red { background: linear-gradient(180deg, #ef8a8a, #b83a46); color: #fff; }
@keyframes s2-dymek { from { opacity: 0; transform: translate(-50%, -80%) scale(.8); } }

/* pastylka kontraktu nad różą: „1♣ · Marek” */
.s2-chip { position: absolute; transform: translate(-50%, -50%); padding: 8px 20px; border-radius: 999px; font: 500 15px/1 var(--s2-sans); color: var(--s2-krem); background: rgba(8, 26, 20, .55); border: 1px solid rgba(239, 230, 210, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 70; white-space: nowrap; }
.s2-chip b { font-weight: 700; }
.s2-chip .s2-czerw { color: #ef6b74; }

.s2--pion .s2-portret { width: 44px; height: 44px; }
.s2--pion .s2-miejsce { gap: 9px; }
.s2--pion .s2-chip { transform: none; padding: 6px 14px; font-size: 14px; }
.s2--pion .s2-ile { font-size: 13px; }
.s2--pion .s2-txt b { font-size: 17px; }
.s2--pion .s2-ja .s2-txt b { font-size: 12px; }
.s2--pion .s2-ja .s2-status { font-size: 16px; }
.s2--niski .s2-portret { width: 40px; height: 40px; }
.s2--niski .s2-miejsce { gap: 8px; }
.s2--niski .s2-txt b { font-size: 15px; }
.s2--niski .s2-ja .s2-txt { display: none; }
.s2--niski .s2-ja .s2-status { display: block; }
.s2--niski .s2-ja { display: block; }
.s2--niski .s2-ja .s2-portret { display: none; }
@media (max-width: 380px) { .s2-portret, .s2--pion .s2-portret { width: 44px; height: 44px; } .s2-txt b, .s2--pion .s2-txt b { font-size: 15px; } .s2-miejsce { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .s2-karta { transition: none; } .s2-dymek { animation: none; } }