/* Canlı (Lively) görünüm: kart oyunlarının ortak görsel katmanı. Kaynak: game/shared/live.css
 * sync.js yalnız GAMES listesinde live: true olan oyunlara kopyalar (css/live.css). Oyunun style.css'inden SONRA yüklenir.
 * Her kural html.live altında: sınıf yoksa (Klasik görünüm ya da "hareketi azalt") hiçbir şey değişmez.
 * Beklenen yapı: .felt > .table > .slot / .card (b = köşe değeri, i = köşe rengi, em = orta simge; .back = kapalı).
 * Oyun kartlara .face (J Q K, data-rk harfi) ve .ace sınıflarını verir. */

/* ---------- Masa: ahşap çerçeve, çuha dokusu ---------- */
html.live .felt, html.lpc .felt { position: relative; isolation: isolate; margin: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 2px 0 1px rgba(255, 255, 255, .07), inset 0 0 90px rgba(0, 0, 0, .42),
    0 0 0 5px #6f4627, 0 0 0 6px #35200f, 0 -1px 0 6px #8a5c36, 0 14px 28px rgba(40, 25, 10, .3); }
html.live .felt::before, html.lpc .felt::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Boş yuvalar: çuhaya gömülü */
html.live .slot { border: 2px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .13); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .3); }
html.live .slot.waste { border-color: transparent; background: none; box-shadow: none; }

/* ---------- Kart yüzü ---------- */
html.live .card:not(.back) { background: linear-gradient(165deg, #ffffff 0%, #fbf7ee 55%, #f0e8d6 100%); }
/* :where: oyunun kendi durum gölgeleri (.sel, .match, .hint, .drag) bu kuralın üstünde kalır */
:where(html.live) .card { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 1px rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .22);
  transition: transform .26s cubic-bezier(.22, .9, .3, 1.06), box-shadow .15s, translate .12s, scale .15s, rotate .18s ease-out; }
/* As: büyük tek simge */
html.live .card.ace:not(.back) em { font-size: 2.35em; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .16)); }
/* Vale, kız, papaz: ince çerçeve içinde büyük harf, altında renk */
html.live .card.face:not(.back)::after { content: ""; position: absolute; left: 11%; right: 11%; top: 33%; bottom: 7%; border-radius: calc(var(--cw, 80px) * .05);
  border: 1px solid currentColor; opacity: .2; background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 5px); pointer-events: none; }
html.live .card.face:not(.back)::before { content: attr(data-rk); position: absolute; z-index: 1; left: 50%; top: 51%; transform: translate(-50%, -50%);
  font: 700 1.75em/1 Georgia, "Times New Roman", serif; }
html.live .card.face:not(.back) em { z-index: 1; top: 79%; font-size: 1em; opacity: 1; }
/* Üstü örtülü kartta (Pyramid, TriPeaks) orta süs gizlenir: yalnız köşe değeri okunur */
html.live .card.face.blocked::before, html.live .card.face.blocked::after { display: none; }

/* ---------- Kart arkası: baklava kafes + ortada madalyon (renk oyunun data-back ayarından gelir) ---------- */
html.live .card.back::before { inset: 6%; border: 1.5px solid rgba(255, 225, 160, .6);
  background: repeating-linear-gradient(45deg, rgba(255, 225, 160, .17) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255, 225, 160, .17) 0 2px, transparent 2px 9px); }
html.live .card.back::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; border-radius: 16%;
  border: 1.5px solid rgba(255, 225, 160, .75); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), inset 0 0 0 4.5px rgba(255, 225, 160, .45); }
/* Deste kalın görünür. Yumuşak gölge yok: üst üste 24 kartın gölgesi birikip kara bir hale yapıyordu */
html.live .card.back[data-pile="s"], html.live .card.back[data-where*='"p":"s"'] { box-shadow: 0 1.5px 0 rgba(0, 0, 0, .6), 0 3px 0 rgba(255, 240, 210, .3), 0 4.5px 0 rgba(0, 0, 0, .6); }
html.live .slot.stock { box-shadow: 0 9px 14px rgba(0, 0, 0, .3); }
html.live .slot.stock.empty { box-shadow: inset 0 2px 7px rgba(0, 0, 0, .3); }
/* İpucu parıltısı yukarıdaki gölgelerin üstünde kalsın */
html.live .card.hint, html.live .slot.hint, html.live .card.back.hint[data-pile="s"] { box-shadow: 0 0 0 3px #f1c75b, 0 0 18px 4px rgba(241, 199, 91, .75); }
/* Destede kalan kart sayısı */
.stock-count { display: none; }
html.live .stock-count { display: block; position: absolute; left: 0; top: 0; z-index: 99; translate: -100% -100%; margin: -4px 0 0 -4px; min-width: 1.7em; padding: 1px 5px; border-radius: 999px;
  background: rgba(15, 10, 5, .72); color: #fff3d6; font: 700 12px/1.4 system-ui, sans-serif; text-align: center; pointer-events: none; }
html.live .stock-count:empty { display: none; }

/* ---------- Dokunma hissi ---------- */
@media (hover: hover) {
  /* .lift: her açık kartın oynanabildiği masalar (Klondike, FreeCell, Spider); diğerlerinde yalnız serbest kart kalkar */
  html.live .table.lift .card:not(.back):hover, html.live .card.free:hover, html.live .card.back[data-pile="s"]:hover { translate: 0 -2px; }
}
html.live .card.drag { translate: none; scale: 1.05; rotate: var(--tilt, 0deg); box-shadow: 0 18px 30px rgba(0, 0, 0, .38), 0 2px 4px rgba(0, 0, 0, .25);
  transition: box-shadow .15s, scale .15s, rotate .18s ease-out; }
/* Sürüklerken kartın gidebileceği yerler */
html.live .card.target, html.live .slot.target { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 18px 4px rgba(255, 255, 255, .45); }
/* Bitir düğmesi hazır olunca hafifçe nefes alır */
html.live #btnAuto:not([hidden]) { animation: liveBreath 1.6s ease-in-out infinite; }
@keyframes liveBreath { 50% { box-shadow: 0 0 0 5px rgba(31, 143, 66, .25); } }

/* ---------- Efekt parçaları (live.js) ---------- */
.fx-ring { position: absolute; z-index: 150; pointer-events: none; border: 3px solid #f6d77a; box-shadow: 0 0 14px 2px rgba(246, 215, 122, .6); }
.fx-spark { position: absolute; z-index: 2600; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; pointer-events: none; }

@media (max-width: 640px) {
  html.live .felt, html.lpc .felt { margin: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 50px rgba(0, 0, 0, .4), 0 0 0 3px #6f4627, 0 0 0 4px #35200f, 0 8px 18px rgba(40, 25, 10, .28); }
  html.live .card.ace:not(.back) em { font-size: 1.7em; }
  html.live .card.face:not(.back)::before { font-size: 1.45em; top: 53%; }
  html.live .card.face:not(.back) em { font-size: .85em; top: 81%; }
  html.live .card.face:not(.back)::after { top: 36%; left: 9%; right: 9%; }
  html.live .stock-count { font-size: 10px; margin: -2px 0 0 -2px; }
}
@media (prefers-contrast: more) { html.live .card.face:not(.back)::after { display: none; } }

/* =====================================================================================
 * Koltuklu kart oyunları (Spades ve benzerleri): kök sınıf html.lseat
 * Beklenen yapı (batak/public/css/table.css): .table > .opp / .trick-wrap > .trick > .tslot.t0-3 > .card, .hand > .card
 * Kart: b = köşe değeri, i = köşe rengi, em = ikinci simge. Oyun .face (data-rk) ve .ace sınıflarını verir.
 * Oyunun kendi css dosyalarından SONRA yüklenir (modern.css'teki açık masayı ezer).
 * ===================================================================================== */
/* Masa: ahşap çerçeveli, dokulu çuha */
html.lseat .table { background: radial-gradient(ellipse 70% 60% at 50% 45%, #2f8f5e 0%, #1f6a44 50%, #154a30 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 2px 0 1px rgba(255, 255, 255, .07), inset 0 0 90px rgba(0, 0, 0, .42),
    0 0 0 5px #6f4627, 0 0 0 6px #35200f, 0 -1px 0 6px #8a5c36, 0 12px 26px rgba(40, 25, 10, .28); margin: 6px 12px; }
html.lseat .table::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Çuhanın üstündeki düz yazılar açık renk (haplar ve plakalar kendi zeminini korur) */
html.lseat .status-line { color: #f6eeda; }
html.lseat .status-line .last-move, html.lseat .status-line .level-note { color: rgba(246, 238, 218, .78); }
/* El tepsisi: çerçeveyle aynı ahşap */
html.lseat .hand { background: linear-gradient(180deg, #8f5f34, #6f4627 60%, #5c391d); border-color: #35200f;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .18), inset 0 -3px 6px rgba(0, 0, 0, .35), 0 10px 22px rgba(40, 25, 10, .25); }
html.lseat .hand .card { opacity: .9; }
html.lseat .hand .card.legal { opacity: 1; }

/* Kart yüzü */
html.lseat .card:not(.back):not(.joker) { background: linear-gradient(165deg, #ffffff 0%, #fbf7ee 55%, #f0e8d6 100%); }
/* Masadaki ve uçan kart: ortada büyük simge, uzaktan okunur */
html.lseat .tslot .card:not(.joker) em, html.lseat .card.fly:not(.joker) em { right: 42%; bottom: 46%; transform: translate(50%, 50%); font-size: 2em; opacity: 1; }
html.lseat .tslot .card.ace em, html.lseat .card.fly.ace em { font-size: 2.5em; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .16)); }
/* Vale, kız, papaz: ince çerçeve içinde büyük harf, altında renk */
html.lseat .tslot .card.face::after, html.lseat .card.fly.face::after { content: ""; position: absolute; left: 31%; right: 9%; top: 11%; bottom: 9%; border-radius: 5px;
  border: 1px solid currentColor; opacity: .2; background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 5px); pointer-events: none; }
html.lseat .tslot .card.face::before, html.lseat .card.fly.face::before { content: attr(data-rk); position: absolute; z-index: 1; left: 61%; top: 43%; transform: translate(-50%, -50%);
  font: 700 1.9em/1 Georgia, "Times New Roman", serif; }
html.lseat .tslot .card.face em, html.lseat .card.fly.face em { z-index: 1; right: 39%; bottom: 24%; font-size: 1.05em; }
/* Masaya inen kart hafif yamuk durur (her koltuğun açısı ayrı), gölgesi derin */
html.lseat .tslot .card { rotate: var(--tilt, 0deg); box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(0, 0, 0, .38); transition: transform .35s ease-in, opacity .35s, scale .2s, box-shadow .2s; }
html.lseat .tslot.t0 { --tilt: -3deg; } html.lseat .tslot.t1 { --tilt: 4deg; } html.lseat .tslot.t2 { --tilt: 2deg; } html.lseat .tslot.t3 { --tilt: -4deg; }
/* Eli alan kart: toplanmadan önce altın çerçeveyle öne çıkar */
html.lseat .tslot .card.won { z-index: 2; scale: 1.08; box-shadow: inset 0 1px 0 #fff, 0 0 0 3px #f6d77a, 0 0 20px 5px rgba(246, 215, 122, .7); }
/* Ortada beliren kısa işaret (ör. maça kırıldı) */
.fx-pop { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none; translate: -50% -50%; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(15, 10, 5, .78); color: #fff3d6; font: 800 17px/1.3 system-ui, sans-serif; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
@media (max-width: 700px) {
  html.lseat .table { margin: 4px 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 50px rgba(0, 0, 0, .4), 0 0 0 3px #6f4627, 0 0 0 4px #35200f, 0 8px 18px rgba(40, 25, 10, .28); }
  .fx-pop { font-size: 14px; }
}

/* =====================================================================================
 * ".pc" kartlı masa oyunları (Hearts, Euchre, Cribbage, Pinochle, Gin Rummy, Durak, Klaverjassen, Conquián, Briscola, Scopa)
 * Kök sınıf html.lpc. Masa .felt (çerçeve ve doku yukarıdaki .felt kurallarından), kart .pc (b köşe değeri, i köşe rengi, em orta simge),
 * rakip elleri .back-card, masadaki el .tslot > .pc. J Q K A süsü SnugLive.deco() ile (.face + data-rk, .ace).
 * ===================================================================================== */
html.lpc .pc:not(.es):not(.it):not(.fr) { background: linear-gradient(165deg, #ffffff 0%, #fbf7ee 55%, #f0e8d6 100%); }
html.lpc .pc.ace em { font-size: 2.3em; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .16)); }
/* Vale, kız, papaz: ince çerçeve içinde büyük harf (tek sözde öğe: ::after oyunların koz işaretinde kullanılıyor).
 * Elde üst üste binen kartlarda süs yok (yarım harf kalabalık yapıyordu): yalnız tamamı görünen son kart süslenir. */
html.lpc .pc.face:not(.hand .pc:not(:last-child))::before { content: attr(data-rk); position: absolute; left: 27%; right: 8%; top: 30%; bottom: 7%; box-sizing: border-box; padding-bottom: 26%;
  display: flex; align-items: center; justify-content: center; border-radius: calc(var(--cw, 76px) * .05);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 9%, transparent) 0 1px, transparent 1px 5px);
  font: 700 1.6em/1 Georgia, "Times New Roman", serif; pointer-events: none; }
html.lpc .pc.face:not(.hand .pc:not(:last-child)) em { z-index: 1; left: 59.5%; top: 80%; font-size: .95em; opacity: 1; }
/* Rakip elleri: kafesli kart arkası */
html.lpc .back-card { background: repeating-linear-gradient(45deg, rgba(255, 225, 160, .2) 0 1.5px, transparent 1.5px 6px), repeating-linear-gradient(-45deg, rgba(255, 225, 160, .2) 0 1.5px, transparent 1.5px 6px), linear-gradient(135deg, #7a4a24, #4a2a12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 225, 160, .4), 0 1px 3px rgba(0, 0, 0, .4); }
/* Masaya inen kart hafif yamuk durur; eli alan kart öne çıkar */
html.lpc .tslot .pc { rotate: var(--tilt, 0deg); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 5px 12px rgba(0, 0, 0, .36); }
html.lpc .tslot.t0 { --tilt: -3deg; } html.lpc .tslot.t1 { --tilt: 4deg; } html.lpc .tslot.t2 { --tilt: 2deg; } html.lpc .tslot.t3 { --tilt: -4deg; }
html.lpc .tslot .pc.win { z-index: 2; scale: 1.07; box-shadow: 0 0 0 3px #f6d77a, 0 0 20px 5px rgba(246, 215, 122, .7); }
@media (prefers-contrast: more) { html.lpc .pc.face::before { border: 0; background: none; } }