/* ===== Okey masası (okey-table.js). Sitenin içinde, Lobi/Masa sekmelerinin altında (--ok-top = sekmelerin alt kenarı).
   Üst çubuk, menü, pencereler ve bildirimler üstte kalır (z-index 15 < .modal 20). Sayfa kaymaz/yakınlaşmaz. ===== */
html.ok-open,html.ok-open body{overflow:hidden;overscroll-behavior:none}
.ok-screen{position:fixed;top:var(--ok-top,0px);left:0;right:0;bottom:0;z-index:15;display:flex;flex-direction:column;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing:border-box;overflow:hidden;color:#fff;font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(ellipse at 50% 42%,#0f3a6b 0%,#0a2850 55%,#061a36 100%);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ok-screen.hidden{display:none}
.ok-in{flex:1;display:flex;flex-direction:column;width:100%;max-width:980px;margin:0 auto;min-height:0;padding:6px 8px 6px;box-sizing:border-box;gap:6px}

/* Üst araç çubuğu */
.ok-bar{display:flex;align-items:center;gap:6px;min-height:44px}
.okb{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid #ffffff55;border-radius:8px;background:#1c8a3f;color:#fff;font-size:20px;font-weight:bold;cursor:pointer;box-shadow:0 2px 5px #0007;padding:0}
.okb:active{filter:brightness(.9)}
.okb.hidden{display:none}
.ok-back{background:#078cc5}
.ok-leave{background:#b81d2c}
.ok-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.ok-info b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok-info small{font-size:12px;color:#cfe0f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok-ap{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:bold;padding:0 4px;cursor:pointer;white-space:nowrap}
.ok-ap.hidden{display:none}
.ok-ap.on{color:#6ee08b}
.ok-ap input{width:18px;height:18px}

/* Oyuncu kartları */
.ok-seat{position:relative;display:flex;align-items:center;gap:7px;background:linear-gradient(#1b1f27,#05070b);border:2px solid #8e1b2b;border-radius:10px;box-shadow:0 2px 8px #0008;padding:5px 8px;min-width:0}
.ok-seat.turn{border-color:#f2c230;box-shadow:0 0 0 3px #f2c23055,0 2px 8px #0008}
.ok-seat.empty{opacity:.6;border-style:dashed}
.ok-seat .sav{width:36px;height:36px;flex:0 0 36px;border-radius:6px;border:2px solid #fff;background:#c9d4de;object-fit:cover;display:grid;place-items:center;font-size:20px;overflow:hidden;color:#123}
.ok-seat .snm{font-weight:bold;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ok-seat .ssub{font-size:11px;color:#c9d6e6;white-space:nowrap}
.ok-seat .stx{display:flex;flex-direction:column;min-width:0}
.ok-seat .spt{margin-left:auto;font-weight:bold;font-size:13px;background:#05142d;border:1px solid #8e1b2b;border-radius:4px;padding:1px 6px}
.ok-seat.h{max-width:min(260px,70vw)}
.ok-seat.v{flex-direction:column;justify-content:flex-start;padding:7px 4px;width:54px;min-height:150px;max-height:100%;gap:6px}
.ok-seat.v .stx{writing-mode:vertical-rl;align-items:center;max-height:96px}
.ok-seat.v .snm{max-height:86px}
.ok-seat.v .spt{margin:auto 0 0;font-size:12px;padding:1px 4px}
.ok-seat .ap{color:#6ee08b;font-size:11px}

/* Atılan taş yerleri */
.ok-disc{position:relative;width:var(--dw,34px);height:calc(var(--dw,34px)*1.4);flex:0 0 auto;border-radius:6px;background:#00000033;box-shadow:inset 0 0 0 2px #ffffff22}
.ok-disc .otile{--tw:var(--dw,34px);--th:calc(var(--dw,34px)*1.4);position:absolute;inset:0}
.ok-disc .cnt{position:absolute;right:-6px;top:-7px;min-width:16px;height:16px;border-radius:8px;background:#05142d;border:1px solid #8fb3d9;font-size:10px;font-weight:bold;display:grid;place-items:center;padding:0 3px}
.ok-disc.can{box-shadow:0 0 0 3px #f2c230,0 0 12px #f2c230aa;cursor:pointer}
.ok-disc.mine{background:#ffffff18;box-shadow:inset 0 0 0 2px #ffffff55}
.ok-disc.mine.drop{box-shadow:0 0 0 3px #6ee08b,0 0 14px #6ee08b;background:#6ee08b33}
.ok-disc.mine::after{content:"AT";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:bold;color:#ffffff66;pointer-events:none}
.ok-disc.mine:has(.otile)::after{display:none}

/* Üst / orta / yanlar */
.ok-top{display:flex;justify-content:center;align-items:center;gap:10px;min-height:52px}
.ok-mid{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:stretch}
.ok-side{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:0}
.ok-center{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:0;border-radius:14px}
.ok-center.drop{box-shadow:inset 0 0 0 3px #6ee08b;background:#6ee08b22}
.ok-cwrap{display:flex;align-items:flex-end;justify-content:center;gap:14px}
.ok-ind,.ok-pile{display:flex;flex-direction:column;align-items:center;gap:3px;--tw:var(--cw,40px);--th:calc(var(--cw,40px)*1.4)}
.ok-ind small,.ok-pile small{font-size:12px;color:#cfe0f2;font-weight:bold}
.ok-pile{position:relative;cursor:default}
.ok-pile.can .otile{box-shadow:0 0 0 3px #f2c230,0 0 12px #f2c230aa;cursor:pointer}
.ok-pile b{position:absolute;top:calc(var(--th) / 2 - 11px);left:0;right:0;text-align:center;font-size:calc(var(--cw,40px) * .4);color:#c0182a;pointer-events:none}
.ok-okey{font-size:12px;color:#ffe08a;font-weight:bold;text-align:center}
.ok-msg{min-height:18px;font-size:13px;font-weight:bold;color:#ffe08a;text-align:center;padding:0 4px}

/* Süre sayacı */
.ok-clock{position:relative;width:var(--clk,52px);height:var(--clk,52px);border-radius:50%;background:#0b5fb8;display:grid;place-items:center;box-shadow:0 2px 8px #0008;transition:opacity .3s,background-color .3s}
.ok-clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ok-clock .bg{fill:none;stroke:#ffffff2e;stroke-width:8}
.ok-clock .ring{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.ok-clock b{position:relative;font-size:calc(var(--clk,52px)*.4);font-variant-numeric:tabular-nums}
.ok-clock.warn{background:#e07800}
.ok-clock.danger{background:#d0162a}
.ok-clock.pulse{animation:okPulse 1s ease-in-out infinite}
.ok-clock.dim{opacity:.45}
@keyframes okPulse{50%{transform:scale(1.08)}}

/* Alt: kendi kartım + işlemler + ıstaka */
.ok-bottom{display:flex;flex-direction:column;gap:6px}
.ok-me{display:flex;align-items:center;gap:6px;min-height:46px}
.ok-me .ok-seat{flex:0 1 auto;max-width:42%}
.ok-acts{flex:1;display:flex;gap:5px;justify-content:center;flex-wrap:wrap;min-width:0}
.oka{min-width:52px;height:38px;padding:0 10px;border:0;border-radius:8px;background:#1c8a3f;color:#fff;font-weight:bold;font-size:14px;cursor:pointer;box-shadow:0 2px 5px #0007}
.oka.hidden{display:none}
.oka.alt{background:#4a5563}
.oka.hot{background:#e5ad00;color:#241800}
.oka:disabled{opacity:.45}

/* Istaka: ahşap görünüm (görsel dosya yok), iki sıra × 13 taş, taşlar bitişik */
.ok-rack{position:relative;--tw:30px;--th:42px;--px:8px;--rg:9px;height:calc(var(--th) * 2 + var(--rg) + 16px);border-radius:10px;
  background:repeating-linear-gradient(90deg,#7a4a26 0 2px,#8b5a30 2px 46px,#7f4f2a 46px 48px,#93613a 48px 92px),linear-gradient(#a06a3c,#6b3f1f);
  background-blend-mode:multiply;box-shadow:inset 0 2px 0 #c58b5a,inset 0 -3px 0 #4a2a12,0 4px 12px #000a;touch-action:none;flex:0 0 auto}
.ok-rack::before,.ok-rack::after{content:"";position:absolute;left:4px;right:4px;height:5px;border-radius:3px;background:linear-gradient(#d9a26f,#5c3418);box-shadow:0 2px 3px #0008;pointer-events:none}
.ok-rack::before{top:calc(6px + var(--th) + 1px)}
.ok-rack::after{bottom:3px}
.ok-row{position:absolute;left:var(--px);width:calc(var(--tw) * 13);height:var(--th);border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--tw) - 1px),#00000022 calc(var(--tw) - 1px) var(--tw))}
.ok-row[data-row="top"]{top:6px}
.ok-row[data-row="bot"]{top:calc(6px + var(--th) + var(--rg))}
.ok-tiles{position:absolute;inset:0}
.ok-tiles .otile{position:absolute;left:0;top:0;transition:transform .16s ease-out;will-change:transform;cursor:grab;touch-action:none}
.ok-tiles .otile.drag{transition:none;z-index:50;cursor:grabbing;filter:drop-shadow(0 8px 10px #000a)}
.ok-tiles .otile.sel{box-shadow:0 0 0 3px #f2c230,0 2px 4px #0007}
.ok-tiles .otile.out{opacity:0;pointer-events:none}
.ok-ph{position:absolute;left:0;top:0;width:var(--tw);height:var(--th);border-radius:5px;border:2px dashed #fff;background:#ffffff33;box-sizing:border-box;pointer-events:none;transition:transform .12s ease-out;z-index:2}
.ok-ph.full{border-color:#ff6b6b;background:#ff6b6b33}
.ok-ph.hidden{display:none}
.otile.ok-ghost{position:fixed;left:0;top:0;z-index:2000;pointer-events:none;filter:drop-shadow(0 8px 10px #000a)}

/* El sonucu / oyun sonu paneli (yalnızca orta alanda) */
.ok-result{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:max-content;height:max-content;overflow:auto;background:#061633f2;border:2px solid #f2c230;border-radius:12px;padding:10px 12px;box-shadow:0 6px 20px #000c;z-index:20;text-align:center;font-size:13px;--tw:22px;--th:31px}
.ok-result.hidden{display:none}
.ok-result h3{margin:0 0 6px;font-size:15px;color:#ffe08a}
.ok-result .wh{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:6px 0}
.ok-result .wh .otile{position:relative}
.ok-result table{margin:6px auto 0;border-collapse:collapse;font-size:13px}
.ok-result td{padding:2px 8px;text-align:left}
.ok-result td.n{text-align:right;font-weight:bold}
.ok-result .oka{margin-top:8px}


/* ---- Taş (okey-tile.js): krem zemin, yuvarlak köşe, hafif gölge, büyük sayı + renkli nokta ---- */
.otile{width:var(--tw,30px);height:var(--th,42px);box-sizing:border-box;border-radius:calc(var(--tw,30px) * .14);background:linear-gradient(#fffdf5,#f1e9d2);
  border:1px solid #c9bd9b;box-shadow:0 2px 3px #0006,inset 0 -2px 0 #d8cca9;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:calc(var(--th,42px) * .1);color:#222;overflow:hidden}
.otile b{font-size:calc(var(--tw,30px) * .62);line-height:1;font-weight:bold;letter-spacing:-.04em;font-family:Arial,Helvetica,sans-serif}
.otile i{width:calc(var(--tw,30px) * .26);height:calc(var(--tw,30px) * .26);border-radius:50%;margin-top:calc(var(--th,42px) * .08);background:currentColor;box-shadow:inset 0 0 0 1px #0003}
.otile.c0{color:#e09a00}
.otile.c1{color:#1565c0}
.otile.c2{color:#1d1d1d}
.otile.c3{color:#d0202e}
.otile.fake{color:#0f7a3a}
.otile.fake b{font-size:calc(var(--tw,30px) * .7)}
.otile.joker::after{content:"OK";position:absolute;right:1px;top:1px;font-size:calc(var(--tw,30px) * .22);font-weight:bold;color:#fff;background:#0f7a3a;border-radius:3px;padding:0 2px;line-height:1.2}
.otile{position:relative}
.otile.back{background:linear-gradient(135deg,#f4ecd6,#e2d5b2);border-color:#bfae86}
.otile.back b,.otile.back i{display:none}
.otile.empty{background:#00000022;border:1px dashed #ffffff44;box-shadow:none}

/* Telefon (dikey): kartlar biraz küçülür */
@media(max-width:620px){
  .ok-in{padding:4px 6px 4px;gap:5px}
  .ok-seat .sav{width:30px;height:30px;flex-basis:30px;font-size:17px}
  .ok-seat.v{width:46px;min-height:130px}
  .ok-info b{font-size:14px}
  .oka{min-width:48px;height:36px;padding:0 8px;font-size:13px}
}
/* Kısa ekran (yatay telefon): orta alan sıkışır */
@media(max-height:520px){
  .ok-top{min-height:40px}
  .ok-seat.v{min-height:90px}
  .ok-seat.v .stx{max-height:60px}
  .ok-cwrap{gap:10px}
}
@media(prefers-reduced-motion:reduce){.ok-tiles .otile,.ok-ph,.ok-clock .ring{transition:none}.ok-clock.pulse{animation:none}}
html.ok-open #toast{z-index:1600;bottom:auto;top:30%;max-width:90vw;text-align:center}

/* Masa ayarları paneli ve Diz menüsü */
.ok-set{background:#4a5563}
.ok-setbox{max-width:min(320px,100%);text-align:left}
.ok-setbox small{display:block;color:#cfe0f2;font-size:12px;margin:6px 0 2px;line-height:1.35}
.ok-chk{display:flex;align-items:center;gap:8px;font-weight:bold;font-size:15px;cursor:pointer}
.ok-chk input{width:20px;height:20px}
.ok-setbtn{display:flex;justify-content:flex-end;gap:8px}
.ok-sortw{position:relative;display:inline-flex}
.ok-sortm{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;background:#061633f2;border:2px solid #f2c230;border-radius:10px;padding:6px;z-index:60;box-shadow:0 6px 16px #000c}
.ok-sortm.hidden{display:none}
.ok-sortm button{min-width:110px;height:40px;border:0;border-radius:8px;background:#1c8a3f;color:#fff;font-weight:bold;font-size:14px;cursor:pointer;white-space:nowrap}
.ok-sortm button+button{background:#0b5fb8}