/* ===== Pişti masası (pisti-table.js). Ortak iskelet okey.css'teki .ok-* sınıfları; burada yalnızca Pişti'ye özel parçalar. ===== */
.pi-screen{background:radial-gradient(ellipse at 50% 42%,#126b45 0%,#0b5236 55%,#063a26 100%)}
.pi-screen.pi-2 .pi-side{display:none}
.pi-screen.pi-2 .ok-mid{grid-template-columns:minmax(0,1fr)}
.pi-top{display:flex;justify-content:center;align-items:center;min-height:52px}
.pi-screen .ok-seat.mate{border-color:#2f9be0}
.pi-screen .ok-seat .ssub{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pi-screen .ok-seat .spt{flex:0 0 auto}
.pcard{display:block;width:var(--pcw,80px);height:calc(var(--pcw,80px) * 1.453);border-radius:calc(var(--pcw,80px) * .07);box-shadow:0 2px 6px #0008;background:#fff;-webkit-user-drag:none;user-select:none}

/* Orta: deste, yer, saat */
.pi-cwrap{display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,34px);width:100%}
.pi-deck{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.pi-deck .pcard{width:calc(var(--ccw,70px) * .8);height:calc(var(--ccw,70px) * .8 * 1.453);box-shadow:3px 3px 0 #e8e1d0,6px 6px 0 #d4ccb8,0 4px 10px #0009}
.pi-deck b{position:absolute;top:calc(var(--ccw,70px) * .8 * .72 - 12px);left:0;right:0;text-align:center;font-size:18px;color:#fff;text-shadow:0 1px 3px #000}
.pi-deck small,.pi-info{font-size:12px;color:#d6f0e2;font-weight:bold}
.pi-deck.empty .pcard{opacity:.25;box-shadow:none}
.pi-pile{position:relative;width:calc(var(--ccw,70px) * 1.7);height:calc(var(--ccw,70px) * 1.453 + 14px);flex:0 0 auto}
.pi-pile .pcard{position:absolute;left:calc(var(--i,0) * 7px);top:calc(var(--i,0) * 2px);width:var(--ccw,70px);height:calc(var(--ccw,70px) * 1.453)}
.pi-pile .pcard.top{box-shadow:0 0 0 2px #fff,0 4px 12px #000a}
.pi-pile .pcard.under{filter:brightness(.92)}
.pi-pile.flash .pcard.taken{left:calc(var(--i,0) * 22px);animation:piTake .85s ease-in forwards}
@keyframes piTake{0%{transform:none;opacity:1}55%{transform:scale(1.06);opacity:1}100%{transform:translateY(-30px) scale(.8);opacity:0}}
.pi-pile .cnt{position:absolute;right:0;top:-8px;min-width:22px;height:22px;border-radius:11px;background:#05142d;border:1px solid #8fd9b3;font-size:12px;font-weight:bold;display:grid;place-items:center;padding:0 5px;z-index:5}
.pi-empty{position:absolute;left:0;top:0;width:var(--ccw,70px);height:calc(var(--ccw,70px) * 1.453);border-radius:8px;border:2px dashed #ffffff55;display:grid;place-items:center;font-size:12px;color:#ffffffaa;text-align:center}
.pi-info{text-align:center;min-height:16px}

/* PİŞTİ! yazısı */
.pi-pop{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:25;pointer-events:none;text-align:center;background:#e5ad00;color:#241800;border:3px solid #fff;border-radius:16px;padding:10px 22px;box-shadow:0 8px 26px #000b}
.pi-pop b{display:block;font-size:clamp(24px,7vw,40px);letter-spacing:.02em}
.pi-pop small{display:block;font-size:14px;font-weight:bold}
.pi-pop.hidden{display:none}
.pi-pop.go{animation:piPop 1.7s ease-out forwards}
@keyframes piPop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}15%{transform:translate(-50%,-50%) scale(1.12);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}

/* Alt: el */
.pi-mine{flex:1;text-align:right;font-size:12px;color:#d6f0e2;font-weight:bold;min-width:0}
.pi-hand{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,14px);min-height:calc(var(--pcw,80px) * 1.453 + 12px);padding:6px 0 4px;touch-action:manipulation}
.pi-hand.hidden{display:none}
.pi-hand .pcard{transition:transform .14s ease-out,opacity .14s,box-shadow .14s}
.pi-hand .pcard.can{cursor:pointer}
.pi-hand .pcard.can:hover{transform:translateY(-6px)}
.pi-hand .pcard.takes{box-shadow:0 0 0 3px #6ee08b,0 0 14px #6ee08b,0 2px 6px #0008}
.pi-hand .pcard.pisti{box-shadow:0 0 0 3px #f2c230,0 0 16px #f2c230,0 2px 6px #0008;transform:translateY(-4px)}
.pi-hand .pcard.out{opacity:0;transform:translateY(-40px) scale(.9);pointer-events:none}
.pi-hand:not(:has(.can)) .pcard{filter:brightness(.88)}

/* Sonuç tablosu */
.pi-screen .ok-result th{font-size:11px;color:#cfe0f2;font-weight:normal;padding:2px 6px}
.pi-screen .ok-result th.n{text-align:right}
.pi-screen .ok-result tr.me td{color:#ffe08a}
.pi-note{display:block;margin-top:4px;color:#cfe0f2}
/* Alçak ekran (yatay telefon): kendi koltuğum elin solunda, el satırı inceltilir */
@media(max-height:520px){
  .pi-screen .ok-bottom{flex-direction:row;align-items:flex-end;gap:8px}
  .pi-screen .ok-me{flex-direction:column;align-items:stretch;justify-content:flex-end;min-height:0;flex:0 0 auto;max-width:34%}
  .pi-screen .ok-me .ok-seat{max-width:100%}
  .pi-screen .pi-mine{text-align:left;flex:0 0 auto}
  .pi-screen .pi-hand{flex:1;padding:2px 0;min-height:calc(var(--pcw,80px) * 1.453 + 4px)}
  .pi-top{min-height:0}
  /* Koltuklar yatay ve küçük; ortada yer, yanında bilgi */
  .pi-screen .ok-seat{padding:3px 8px}
  .pi-screen .ok-seat .sav{width:28px;height:28px;flex-basis:28px;font-size:16px}
  .pi-screen .ok-seat.v{flex-direction:row;justify-content:flex-start;width:auto;min-height:0;max-width:100%;padding:3px 8px;gap:7px}
  .pi-screen .ok-seat.v .stx{writing-mode:horizontal-tb;align-items:flex-start;max-height:none}
  .pi-screen .ok-seat.v .snm{max-height:none}
  .pi-screen .ok-seat.v .spt{margin:0 0 0 auto;font-size:13px;padding:1px 6px}
  .pi-screen .ok-center{flex-direction:row;gap:12px}
  .pi-screen .pi-cwrap{width:auto}
  .pi-screen .pi-info,.pi-screen .ok-msg{max-width:170px}
  /* 4 kişide: sol · karşı · sağ koltuk üstte tek sıra (ızgara; .ok-mid ve yan kutular saydam) */
  .pi-screen:not(.pi-2) .ok-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"bar bar bar" "l t r" "c c c" "b b b";gap:4px 8px}
  .pi-screen:not(.pi-2) .ok-mid,.pi-screen:not(.pi-2) .pi-side{display:contents}
  .pi-screen:not(.pi-2) .ok-bar{grid-area:bar}
  .pi-screen:not(.pi-2) .pi-top{grid-area:t;min-width:0}
  .pi-screen:not(.pi-2) #piSeatL{grid-area:l;justify-self:start}
  .pi-screen:not(.pi-2) #piSeatR{grid-area:r;justify-self:end}
  .pi-screen:not(.pi-2) .ok-center{grid-area:c}
  .pi-screen:not(.pi-2) .ok-bottom{grid-area:b}
}
@media(max-width:620px){.pi-screen .ok-result{font-size:12px}.pi-screen .ok-result td,.pi-screen .ok-result th{padding:2px 4px}}
@media(prefers-reduced-motion:reduce){.pi-pile.flash .pcard.taken,.pi-pop.go{animation:none}.pi-hand .pcard{transition:none}}