/* ===== 101 Okey masası (okey101-table.js). Ortak iskelet okey.css'teki .ok-* sınıfları; burada yalnızca 101'e özel parçalar. ===== */
#toast{pointer-events:none}
.o1-screen{background:radial-gradient(ellipse at 50% 40%,#1d5f8a 0%,#124566 55%,#0a2c45 100%)}
.o1-screen .ok-row{width:calc(var(--tw) * 15)}
.o1-screen .ok-seat.mate{border-color:#2f9be0}
.o1-screen .ok-seat .ssub{overflow:hidden;text-overflow:ellipsis;min-width:0}
.o1-screen .ok-seat .ssub.op{color:#9ff0b8}
.o1-screen .ok-seat .spt{flex:0 0 auto}
.o1-screen .ok-center{justify-content:flex-start;gap:6px;padding-top:4px}
.o1-screen .ok-tiles .otile.took{box-shadow:0 0 0 2px #2f9be0,0 2px 4px #0007}
.o1-screen .ok-tiles .otile.sel{box-shadow:0 0 0 3px #f2c230,0 2px 4px #0007;transform-origin:center}
.o1-screen .ok-disc.mine.can{box-shadow:0 0 0 3px #f2c230,0 0 12px #f2c230aa;cursor:pointer}
.o1-screen .ok-acts .oka{padding:0 8px}

/* Yerdeki perler: oyuncuya göre satırlar, kaydırılabilir */
.o1-melds{flex:1 1 auto;min-height:0;width:100%;overflow:auto;display:flex;flex-direction:column;gap:5px;padding:2px 4px;box-sizing:border-box;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.o1-melds.none{flex:0 0 auto}
.o1-own{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px}
.o1-own > b{font-size:11px;color:#cfe0f2;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o1-meld{display:flex;gap:1px;padding:2px;border-radius:6px;background:#00000038;--tw:var(--mw,22px);--th:calc(var(--mw,22px) * 1.4);cursor:default}
.o1-meld.pair{background:#3a1d5c66}
.o1-meld .otile{position:relative;flex:0 0 auto}
.o1-meld.can{box-shadow:0 0 0 2px #6ee08b,0 0 10px #6ee08baa;background:#6ee08b2a;cursor:pointer}
.o1-meld.drop{box-shadow:0 0 0 3px #6ee08b,0 0 14px #6ee08b;background:#6ee08b55}

/* Kurallar penceresi ve sonuç tablosu */
.o1-help{text-align:left;max-width:min(520px,96%)}
.o1-help ul{margin:6px 0;padding-left:18px;font-size:13px;line-height:1.45}
.o1-help li{margin:3px 0}
.o1-screen .ok-result th{font-size:11px;color:#cfe0f2;font-weight:normal;padding:2px 6px}
.o1-screen .ok-result th.n{text-align:right}
.o1-screen .ok-result tr.me td{color:#ffe08a}
.o1-note{display:block;margin-top:4px;color:#cfe0f2}
@media(max-width:620px){
  .o1-screen .ok-result{font-size:12px}
  .o1-screen .ok-result td,.o1-screen .ok-result th{padding:2px 4px}
  .o1-screen .ok-acts{gap:4px}
  .o1-screen .ok-acts .oka{min-width:40px;height:34px;padding:0 6px;font-size:12px}
}
/* Alçak ekran (yatay telefon): koltuklar yatay ve küçük, 4 koltuk üstte tek sıra; ortada perler daha çok yer alır */
@media(max-height:520px){
  .o1-screen .ok-top{min-height:0}
  .o1-screen .ok-seat{padding:2px 6px}
  .o1-screen .ok-seat .sav{width:24px;height:24px;flex-basis:24px;font-size:14px}
  .o1-screen .ok-seat.v{flex-direction:row;justify-content:flex-start;width:auto;min-height:0;max-width:100%;padding:2px 6px;gap:6px}
  .o1-screen .ok-seat.v .stx{writing-mode:horizontal-tb;align-items:flex-start;max-height:none}
  .o1-screen .ok-seat.v .snm{max-height:none}
  .o1-screen .ok-seat.v .spt{margin:0 0 0 auto;font-size:12px;padding:1px 5px}
  .o1-screen .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:3px 6px}
  .o1-screen .ok-mid,.o1-screen .ok-side{display:contents}
  .o1-screen .ok-bar{grid-area:bar;min-height:36px}
  .o1-screen .ok-top{grid-area:t;justify-content:center;gap:6px}
  .o1-screen .ok-side:first-child{grid-area:l}
  .o1-screen #o1SeatL{grid-area:l;justify-self:start}
  .o1-screen #o1DiscL{grid-area:l;justify-self:end}
  .o1-screen #o1SeatR{grid-area:r;justify-self:end}
  .o1-screen #o1DiscR{grid-area:r;justify-self:start}
  .o1-screen .ok-center{grid-area:c;flex-direction:row;align-items:stretch;gap:8px;padding-top:0}
  .o1-screen .ok-cwrap{flex:0 0 auto;align-items:center}
  .o1-screen .ok-okey{display:none}
  .o1-screen .ok-msg{position:absolute;left:0;right:0;bottom:0;pointer-events:none;text-shadow:0 1px 3px #000}
  .o1-screen .ok-bottom{grid-area:b;flex-direction:row;align-items:stretch;gap:6px}
  .o1-screen .ok-rack{flex:1 1 58%;min-width:0;order:1}
  .o1-screen .ok-me{flex:1 1 42%;min-width:0;min-height:0;flex-wrap:wrap;align-content:center;justify-content:center;gap:4px;order:2}
  .o1-screen .ok-me .ok-seat{max-width:100%;flex:1 1 100%}
  .o1-screen .ok-acts{gap:4px}
  .o1-screen .ok-acts .oka{min-width:36px;height:30px;padding:0 6px;font-size:12px}
}