/* ======================================================
   101 Okey: masa, taşlar, ıstaka, başlangıç ekranı.
   Ortak oyun sayfası stilleri game.css içindedir.
   ====================================================== */
.okey-page {
    /* Taş boyu ekranın hem enine hem boyuna göre: kısa ekranda ıstaka masayla birlikte sığsın, taşlar okunur kalsın. */
    --tw: clamp(34px, min(3.4vw, 5.4vh), 50px);
    --th: calc(var(--tw) * 1.36);
    --tw-sm: calc(var(--tw) * .66);
    --tw-xs: 22px;
    --ok-red: #b3121f;
    --ok-yellow: #a35f00;
    --ok-blue: #1858a6;
    --ok-black: #1d1714;
    --team-a: var(--p-mustard);
    --team-b: #e2747d;
}
.ok-main { max-width: 1640px; }
.okey-page [hidden] { display: none !important; }

/* ---------- Üst çubuk ---------- */
.ok-handinfo {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    color: var(--p-cream);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Taş ---------- */
.ok-tile {
    position: relative;
    display: inline-block;
    width: var(--tw);
    height: var(--th);
    flex-shrink: 0;
    border-radius: calc(var(--tw) * .14);
    background: linear-gradient(180deg, #fffaf0 0%, #f4e7cb 100%);
    box-shadow: 0 2px 0 #c7b088, 0 3px 7px rgba(0,0,0,.35);
    color: var(--ok-black);
}
.ok-tile-sm { --tw: var(--tw-sm); --th: calc(var(--tw-sm) * 1.36); }
.ok-tile-xs { --tw: var(--tw-xs); --th: calc(var(--tw-xs) * 1.36); box-shadow: 0 1px 0 #c7b088, 0 1px 3px rgba(0,0,0,.3); }
.ok-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12%;
    pointer-events: none;
}
.ok-num {
    font: 700 calc(var(--tw) * .52)/1 var(--sans);
    letter-spacing: -.04em;
}
.ok-shape {
    width: calc(var(--tw) * .28);
    height: calc(var(--tw) * .28);
    margin-top: calc(var(--tw) * .1);
    fill: currentColor;
}
.ok-c-r { color: var(--ok-red); }
.ok-c-y { color: var(--ok-yellow); }
.ok-c-b { color: var(--ok-blue); }
.ok-c-k { color: var(--ok-black); }
.ok-okey-mark {
    position: absolute;
    top: 5%;
    right: 5%;
    width: calc(var(--tw) * .3);
    height: calc(var(--tw) * .3);
    fill: var(--p-mustard);
    stroke: #6b4300;
    stroke-width: 1.2;
}
.ok-okey { background: radial-gradient(circle at 50% 30%, rgba(229,169,59,.28), transparent 70%); border-radius: inherit; }
.ok-okey-placed .ok-num { opacity: .85; }
.ok-fake { justify-content: center; padding-top: 0; }
.ok-fake-mark { width: calc(var(--tw) * .56); height: calc(var(--tw) * .56); fill: currentColor; }
.ok-fake-val { font: 700 calc(var(--tw) * .24)/1 var(--sans); margin-top: 6%; }
.ok-fake-placed::after {
    content: "S";
    position: absolute;
    top: 4%;
    right: 8%;
    font: 700 calc(var(--tw) * .2)/1 var(--sans);
    color: var(--p-sage-dim);
}
.ok-back {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        repeating-linear-gradient(45deg, rgba(229,169,59,.25) 0 1.5px, transparent 1.5px 6px),
        linear-gradient(180deg, #2a6a43, var(--p-green-deep));
    border: 2px solid #f1e3c5;
}
.ok-ghost { position: fixed; display: block; will-change: transform; z-index: 41; }
/* Rakibin kapalı yığından çektiği taş: yüzü görünmeyen tek taş görseli (okey-tas-ustten.webp, 116×180). */
.ok-stock-tile { position: absolute; inset: 0; }
.ok-stock-tile img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.ok-ghost:has(> .ok-stock-tile) { background: none; box-shadow: none; }
.ok-sample { opacity: .9; outline: 2px dashed rgba(229,169,59,.6); outline-offset: 2px; }

/* ---------- Başlangıç ekranı ---------- */
.ok-lobby { display: grid; place-items: center; padding: 10px 0 30px; }
.ok-lobby-card {
    width: min(720px, 100%);
    padding: 28px clamp(18px, 4vw, 40px) 30px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(229,169,59,.12), transparent 60%),
        radial-gradient(ellipse at 50% 60%, var(--p-green) 0%, #164227 60%, var(--p-green-deep) 100%);
    box-shadow: 0 0 0 10px #4a2c18, 0 0 0 11px #24130a, 0 24px 60px rgba(0,0,0,.55);
    text-align: center;
}
.ok-lobby-card h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(38px, 6vw, 54px);
    color: var(--p-cream);
    line-height: 1.05;
}
.ok-lobby-sub { margin: 6px 0 22px; color: var(--p-sage); font-size: 17px; }
.ok-resume {
    margin: 0 auto 22px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(229,169,59,.35);
}
.ok-resume p { margin: 0 0 10px; color: var(--p-cream); }
.ok-resume strong { color: var(--p-mustard); }
.ok-resume-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ok-setup fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ok-setup legend {
    margin: 0 auto 10px;
    color: var(--p-sage);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ok-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px !important; }
.ok-modes legend { grid-column: 1 / -1; }
.ok-mode-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    border-radius: 16px;
    border: 2px solid rgba(246,231,208,.22);
    background: rgba(20, 11, 7, .55);
    color: var(--p-sage);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.ok-mode-card:hover { border-color: rgba(229,169,59,.6); }
.ok-mode-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ok-mode-card:has(input:focus-visible) { outline: 3px solid var(--p-mustard); outline-offset: 3px; }
.ok-mode-card.is-checked { border-color: var(--p-mustard); background: rgba(229,169,59,.14); }
.ok-mode-card.is-checked::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--p-mustard);
    color: var(--p-brown);
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 14px;
}
.ok-mode-icon svg { width: 48px; height: 48px; fill: var(--p-sage); }
.ok-mode-icon .ok-team-a { fill: var(--p-mustard); }
.ok-mode-icon .ok-team-line { stroke: var(--p-mustard); stroke-width: 2; stroke-dasharray: 3 3; fill: none; }
.ok-mode-text { display: flex; flex-direction: column; gap: 4px; }
.ok-mode-text strong { color: var(--p-cream); font-size: 20px; font-family: var(--serif); font-weight: 400; }
.ok-mode-text span { font-size: 14.5px; line-height: 1.35; }
.ok-seg { display: inline-flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(0,0,0,.3); }
.ok-seg label { position: relative; }
.ok-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ok-seg span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 9px;
    color: var(--p-cream);
    font-weight: 600;
    cursor: pointer;
}
.ok-seg input:checked + span { background: var(--p-mustard); color: var(--p-brown); }
.ok-seg input:focus-visible + span { outline: 3px solid var(--p-mustard); outline-offset: 2px; }
.ok-lobby-note { margin: 18px 0 6px; font-size: 14.5px; color: var(--p-sage); }
.ok-lobby-note strong { color: var(--p-cream); }
.ok-link {
    padding: 4px 2px;
    min-height: 32px;
    border: 0;
    background: none;
    color: var(--p-mustard);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ok-lobby-hint { min-height: 22px; margin: 0 0 12px; font-size: 14px; color: var(--p-cream); }
.ok-sit { min-width: 220px; min-height: 52px; font-size: 17px; }
.ok-sit[aria-disabled="true"] { background: rgba(229,169,59,.25); color: rgba(28,15,10,.65); cursor: not-allowed; }

/* ---------- Oyun ekranı: skor şeridi → masa (rakipler, gösterge şeridi, açılan taşlar, alt kontrol şeridi) → ıstaka ---------- */
/* Yan boşluk, masanın dışa taşan ahşap çerçevesinden (en fazla ~17px) geniş olmalı: yatay taşma olmasın. */
body.is-in-game .ok-main { padding: 8px 22px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 0; }
@media (max-width: 520px) { body.is-in-game .ok-main { padding-left: 14px; padding-right: 14px; } }
/* Uygun masaüstünde sayfa ekran yüksekliğine sabitlenir: açılan taşlar alanı kendi içinde kayar, masa ve ıstaka yerinde kalır. */
@media (min-width: 900px) and (min-height: 660px) {
    body.is-in-game { height: 100vh; height: 100dvh; }
    body.is-in-game .ok-main { min-height: 0; }
}
/* #game artık masa+ıstaka sütunu ve (varsa) sohbet panelini yan yana taşıyan bir satır; eski dikey düzen
   .ok-board-col'a taşındı. Panel kapalıyken (chat.css: .chat-panel:not(.is-open) { display:none }) sütun tüm
   genişliği geri alır. */
.ok-game:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: row; align-items: stretch; gap: 10px; }
.ok-board-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Skor şeridi: tek satır, koltuk sırası sabit ---------- */
.ok-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: stretch; }
.ok-scores[data-mode="pairs"] { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.ok-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    min-width: 0;
    min-height: 40px;
    padding: 4px 14px;
    border-radius: 10px;
    background: rgba(20, 11, 7, .78);
    border: 1px solid rgba(229,169,59,.2);
}
.ok-score.is-me { border-color: rgba(229,169,59,.55); }
.ok-score-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-cream); font-weight: 600; font-size: 14.5px; }
.ok-score-sub { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-sage-dim); font-size: 12px; }
.ok-score-total { grid-column: 2; grid-row: 1 / span 2; font: 400 24px/1 var(--serif); color: var(--p-mustard); font-variant-numeric: tabular-nums; }
.ok-score.ok-team-0 { border-color: rgba(229,169,59,.6); }
.ok-score.ok-team-1 { border-color: rgba(226,116,125,.55); }
.ok-score.ok-team-1 .ok-score-total { color: var(--team-b); }
.ok-score-note { align-self: center; max-width: 7em; font-size: 11px; line-height: 1.2; color: var(--p-sage-dim); }

/* ---------- Masa ---------- */
.ok-table {
    --side: clamp(156px, 15vw, 216px);
    flex: 1;
    min-height: 0;
    grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    /* Yan rakipler üst panel ve gösterge şeridinin yanında; açılan taşlar alanı tam genişlikte. */
    grid-template-areas:
        "left top right"
        "left pool right"
        "melds melds melds"
        "dock dock dock";
    align-items: start;
    gap: 8px 12px;
    padding: 10px 14px 8px;
}
@media (max-height: 820px) { .ok-table { --frame: 56px; } }
.ok-seat-top { grid-area: top; justify-self: center; width: min(560px, 100%); }
.ok-seat-left, .ok-seat-right { grid-row: 1 / span 2; align-self: center; }
.ok-seat-left { grid-area: left; }
.ok-seat-right { grid-area: right; }

/* Rakip ve kendi paneli: portre + bilgiler + atık. Ölçüler sabit: sıra, açılış ve durum değişince panel büyümez. */
.ok-seat {
    --pic: clamp(56px, 5vw, 76px);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "pic info" "discard discard";
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(10, 30, 18, .55);
    border: 1.5px solid rgba(195,210,189,.16);
    transition: border-color .2s, box-shadow .2s;
}
.ok-seat-top { --pic: clamp(48px, 4.4vw, 64px); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic info discard"; padding: 6px 10px; }
.ok-seat.is-turn { border-color: var(--p-mustard); box-shadow: 0 0 0 3px rgba(229,169,59,.22), 0 0 24px rgba(229,169,59,.2); }
.ok-seat.is-offline .ok-portrait { filter: grayscale(.8); }
.ok-seat[data-team="0"] { border-left-color: var(--team-a); }
.ok-seat[data-team="1"] { border-left-color: var(--team-b); }
.ok-seat .ok-portrait { grid-area: pic; }
.ok-seat-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ok-seat .ok-discard { grid-area: discard; }

.ok-portrait {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--pic);
    height: var(--pic);
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #4a2c18, #1c0f0a);
    box-shadow: 0 0 0 2px var(--p-mustard), 0 0 0 3px rgba(28,15,10,.8), 0 4px 10px rgba(0,0,0,.45);
}
.ok-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ok-portrait-initials { font: 600 calc(var(--pic) * .36)/1 var(--sans); color: var(--p-cream); letter-spacing: .02em; }

.ok-seat-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ok-seat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-cream); font-weight: 700; font-size: 15.5px; }
.ok-seat-tag { color: var(--p-sage-dim); font-size: 12px; white-space: nowrap; }
.ok-seat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; }
.ok-team-badge { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ok-team-badge.ok-team-0 { background: rgba(229,169,59,.2); color: var(--p-mustard); }
.ok-team-badge.ok-team-1 { background: rgba(226,116,125,.2); color: #f3aab0; }
.ok-turn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--p-mustard);
    color: var(--p-brown);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
/* Sırası olmayan panelde rozetin yeri korunur; sıra geçince hiçbir şey kaymaz. */
.ok-turn-pill.is-off { visibility: hidden; }
.ok-seat.is-thinking .ok-turn-pill::after {
    content: "";
    width: 18px;
    height: 6px;
    background: radial-gradient(circle, var(--p-brown) 2px, transparent 2.5px) 0 50% / 6px 6px repeat-x;
    animation: ok-think 1s steps(3) infinite;
}
@keyframes ok-think { from { width: 6px; } to { width: 18px; } }
.ok-count { color: var(--p-cream); font-weight: 600; white-space: nowrap; }
.ok-open { padding: 1px 7px; border-radius: 6px; background: rgba(0,0,0,.3); color: var(--p-sage); white-space: nowrap; }
.ok-open[data-open="series"] { background: rgba(134,215,166,.18); color: #cfeedd; }
.ok-open[data-open="pairs"] { background: rgba(120,170,230,.2); color: #cfe0f5; }
.ok-seat-status { padding: 1px 8px; border-radius: 999px; background: rgba(224,120,106,.2); color: #ffb4a8; font-size: 12px; white-space: nowrap; }

.ok-discard {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 10px;
    border: 1.5px dashed rgba(195,210,189,.22);
    background: rgba(0,0,0,.18);
    color: var(--p-sage);
    font: inherit;
    font-size: 12px;
    text-align: left;
}
.ok-discard-label { flex: 1; min-width: 0; line-height: 1.2; }
.ok-discard-slot { display: inline-flex; min-width: var(--tw-sm); min-height: calc(var(--tw-sm) * 1.36); }
.ok-discard-count { min-width: 1.8em; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.35); color: var(--p-cream); font-weight: 600; text-align: center; }
.ok-discard.is-takeable {
    cursor: pointer;
    border: 1.5px solid var(--p-mustard);
    background: rgba(229,169,59,.14);
    color: var(--p-cream);
    animation: ok-glow 1.6s ease-in-out infinite;
}
@keyframes ok-glow { 50% { box-shadow: 0 0 0 4px rgba(229,169,59,.25); } }

/* ---------- Gösterge şeridi ---------- */
.ok-pool {
    --tw: clamp(30px, min(2.6vw, 4.2vh), 38px);
    --th: calc(var(--tw) * 1.36);
    grid-area: pool;
    justify-self: center;
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 14px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(195,210,189,.12);
}
.ok-pool-item { display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.ok-pool-item + .ok-pool-item { border-left: 1px solid rgba(195,210,189,.16); }
.ok-pool-label { color: var(--p-sage); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
/* Kapalı taş yığını: okey-deste.webp (okeytaslari.png'den kırpılıp küçültüldü, 110×180). */
.ok-stock-stack { display: block; height: calc(var(--th) * 1.15); aspect-ratio: 110 / 180; }
.ok-stock-stack img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.ok-stock-count { color: var(--p-cream); font: 400 26px/1 var(--serif); min-width: 1.4em; font-variant-numeric: tabular-nums; }
.ok-stock.is-low .ok-stock-count { color: #ffb4ab; }

/* ---------- Açılan taşlar: sahibine göre gruplanır, alan kendi içinde kayar ---------- */
.ok-melds {
    --tw-sm: clamp(28px, min(2.5vw, 4.2vh), 36px);
    grid-area: melds;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
    border-radius: 14px;
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(195,210,189,.12);
}
.ok-melds-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ok-melds-head h3, .ok-zone-pairs h4 { margin: 0; color: var(--p-sage); font: 600 12.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.ok-pairs-badge { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(120,170,230,.3); color: #cfe0f5; font-size: 12px; white-space: nowrap; }
.ok-melds-scroll {
    flex: 1;
    min-height: 100px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
}
.ok-zone-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.ok-zone-pairs { padding-top: 8px; border-top: 1px dashed rgba(120,170,230,.25); }
/* Seri ve çift birlikteyse geniş ekranda yan yana: ikisi de kaydırmadan görünür ve işlenebilir. */
@media (min-width: 1100px) {
    .ok-melds-scroll:has(> .ok-zone-pairs:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: 12px; }
    .ok-melds-scroll:has(> .ok-zone-pairs:not([hidden])) > .ok-zone-pairs { padding: 0 0 0 12px; border-top: 0; border-left: 1px dashed rgba(120,170,230,.25); }
}
.ok-zone-pairs h4 { margin-bottom: 6px; color: #cfe0f5; }
.ok-zone-empty { margin: 4px 0; color: var(--p-sage-dim); font-size: 13px; }
.ok-meld-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 5px 8px 7px;
    border-radius: 12px;
    background: rgba(0,0,0,.14);
}
.ok-meld-group[data-team="0"] { box-shadow: inset 3px 0 0 var(--team-a); }
.ok-meld-group[data-team="1"] { box-shadow: inset 3px 0 0 var(--team-b); }
.ok-owner { align-self: flex-start; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 9px; border-radius: 999px; background: rgba(0,0,0,.35); color: var(--p-cream); font-size: 12px; font-weight: 600; }
.ok-group-melds { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ok-meld {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 5px 5px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: rgba(0,0,0,.12);
    color: inherit;
    font: inherit;
    text-align: left;
}
.ok-meld-label { color: var(--p-sage-dim); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ok-meld-tiles { display: flex; gap: 2px; }
.ok-meld.is-draft { border: 1.5px dashed var(--p-mustard); background: rgba(229,169,59,.1); }
.ok-meld.is-changed { border-style: dashed; border-color: rgba(229,169,59,.6); }
.ok-meld.can-target { cursor: pointer; border-color: #86d7a6; background: rgba(134,215,166,.12); box-shadow: 0 0 0 2px rgba(134,215,166,.25); }
.ok-meld.can-target:hover, .ok-meld.is-targeting { background: rgba(134,215,166,.22); box-shadow: 0 0 0 3px rgba(134,215,166,.45); }
.ok-meld.is-new { animation: ok-pop .5s ease; }
@keyframes ok-pop { from { transform: scale(.9); opacity: .3; } }
/* Hedef ipuçları: yeşil "İşle" (pere ekleme), sarı "Okeyi al" (okeyin yerine koyma). Rozet mutlak konumludur, per büyümez. */
.ok-meld { position: relative; }
.ok-meld.is-swap-target:not(.is-layoff-target) { border-color: var(--p-mustard); background: rgba(229,169,59,.14); box-shadow: 0 0 0 2px rgba(229,169,59,.3); }
.ok-meld.is-drop-over { box-shadow: 0 0 0 4px rgba(134,215,166,.65); }
.ok-zone-pairs.is-drop-over { outline: 2px dashed #86d7a6; outline-offset: 2px; border-radius: 8px; }
.ok-meld-cue { position: absolute; top: -9px; right: 6px; display: flex; gap: 3px; pointer-events: none; }
.ok-meld-cue span { padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 16px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ok-cue-layoff { background: #86d7a6; color: #0d2a19; }
.ok-cue-swap { background: var(--p-mustard); color: var(--p-brown); }
.ok-tile.is-swappable { outline: 2px solid var(--p-mustard); outline-offset: 1px; animation: ok-glow 1.6s ease-in-out infinite; }
/* Gruptaki okey: yalnızca sayısı belirli, rengi eksik renklerden sayılır. */
.ok-c-any { color: #7b5b25; }

/* Kalan taş uyarısı: portrenin altına asılı, sıfır genişlikli ızgara öğesi (panel ve masa kaymaz). */
.ok-left { grid-area: pic; align-self: center; justify-self: center; width: 0; height: 0; display: flex; justify-content: center; align-items: center; transform: translateY(calc(var(--pic) / 2 - 2px)); z-index: 2; pointer-events: none; }
.ok-left[hidden] { display: none; }
.ok-left span { white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: #f0c24b; color: #2a1609; font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 2px rgba(28,15,10,.85), 0 2px 6px rgba(0,0,0,.45); }
.ok-count.is-masked { visibility: hidden; }

/* Ceza bildirimi: açılan taşlar alanının üstünde süzülür, akışta yer kaplamaz. */
.ok-melds { position: relative; }
.ok-toast { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 999px; background: #b8402f; color: #fff4ec; font-weight: 700; font-size: 14px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); pointer-events: none; }
.ok-toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .ok-toast:not([hidden]) { animation: ok-toast-in .25s ease; } }
@keyframes ok-toast-in { from { opacity: 0; } }
.ok-result-pen { display: block; font-size: 12.5px; color: #ffc9c2; }
.ok-result-note { margin: 8px 0 0; font-size: 13px; color: var(--p-sage); }

/* ---------- Alt şerit: kendi panelim, hamleler, ıstaka düzeni, durum ---------- */
.ok-dock {
    grid-area: dock;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "tools buttons me"
        "status status status";
    align-items: center;
    gap: 6px 12px;
    padding: 8px 10px 4px;
    border-radius: 14px;
    background: rgba(10, 26, 16, .62);
    border: 1px solid rgba(229,169,59,.18);
}
.ok-seat-me {
    --pic: clamp(40px, 3.4vw, 48px);
    grid-area: me;
    grid-template-columns: auto auto auto;
    grid-template-areas: "pic info discard";
    padding: 4px 8px;
}
.ok-seat-me .ok-seat-info { min-width: 8.5em; }
.ok-seat-me .ok-discard-label { display: none; }
.ok-buttons { grid-area: buttons; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ok-btn {
    min-height: 44px;
    padding: 6px 13px;
    border-radius: 10px;
    border: 1.5px solid rgba(229,169,59,.7);
    background: rgba(20, 11, 7, .75);
    color: var(--p-cream);
    font: 600 14.5px/1.1 var(--sans);
    cursor: pointer;
    white-space: nowrap;
}
.ok-btn:hover:not([aria-disabled="true"]) { background: rgba(229,169,59,.2); }
/* Pasif: okunur kalır, ama etkin düğmeden açıkça ayrılır. */
.ok-btn[aria-disabled="true"] {
    border-style: dashed;
    border-color: rgba(195,210,189,.3);
    background: rgba(0,0,0,.18);
    color: rgba(195,210,189,.78);
    cursor: default;
}
.ok-btn-confirm.is-ready { background: #2f7d4f; border-color: #86d7a6; color: #fff; }
/* Görselli hamle düğmeleri (assets/img/101-okey-butonlar): aktif/deaktif görseli aria-disabled seçer.
   İki görsel de sayfada olduğundan durum değişince yeniden yükleme ve titreme olmaz. */
.ok-btn.ok-btn-img,
.ok-btn.ok-btn-img[aria-disabled="true"],
.ok-btn-confirm.ok-btn-img.is-ready,
.ok-btn-discard.ok-btn-img:not([aria-disabled="true"]) {
    --btn-h: 64px;
    position: relative;
    display: inline-grid;
    width: calc(var(--btn-h) * 252 / 230);
    height: var(--btn-h);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    box-shadow: none;
}
.ok-btn-img img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ok-btn-img .ok-btn-off, .ok-btn-img[aria-disabled="true"] .ok-btn-on { visibility: hidden; }
.ok-btn-img[aria-disabled="true"] .ok-btn-off { visibility: visible; }
.ok-btn-img:not([aria-disabled="true"]) { cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.ok-btn-img:not([aria-disabled="true"]):hover { filter: brightness(1.08); transform: translateY(-1px); }
.ok-btn-img:not([aria-disabled="true"]):active { transform: translateY(1px); }
.ok-btn-img:focus-visible { outline: 3px solid var(--p-mustard); outline-offset: 2px; }
.ok-btn-discard:not([aria-disabled="true"]) { background: var(--p-mustard); color: var(--p-brown); border-color: var(--p-mustard); }
/* Solda düzenleme sütunları; her sütunun altında otomatik açma düğmesinin yeri her zaman ayrılır (görünüp kaybolunca kayma olmaz). */
.ok-rack-tools { grid-area: tools; display: flex; justify-content: flex-start; align-items: start; gap: 6px; }
/* İki satır (düzen + otomatik açma) toplamı hamle düğmesinin yüksekliğini aşmaz: şerit uzamaz, masa kaymaz. */
.ok-tool-col { display: grid; grid-template-rows: auto auto; gap: 3px; }
.ok-rack-tools .ok-mini { min-height: 30px; padding: 3px 10px; }
.ok-rack-tools .ok-auto { min-height: 26px; }
.ok-auto { border-color: #86d7a6; color: #cfeedd; background: rgba(47,125,79,.35); }
.ok-auto:hover { border-color: #b7ecc9; color: #fff; }
.ok-auto[aria-disabled="true"] { border-style: dashed; border-color: rgba(195,210,189,.3); background: rgba(0,0,0,.18); color: rgba(195,210,189,.78); cursor: default; }
.ok-auto.is-off { visibility: hidden; }
.ok-auto-finish.is-active { background: var(--p-mustard); color: var(--p-brown); border-color: var(--p-mustard); }
.ok-seat-me { justify-self: end; }
.ok-rack-tile.is-finish-cand { outline: 3px solid var(--p-mustard); outline-offset: 1px; }
.ok-mini {
    min-height: 36px;
    padding: 4px 11px;
    border-radius: 8px;
    border: 1px solid rgba(246,231,208,.35);
    background: rgba(0,0,0,.25);
    color: var(--p-cream);
    font: 600 13px/1 var(--sans);
    cursor: pointer;
    white-space: nowrap;
}
.ok-mini:hover { border-color: var(--p-mustard); color: var(--p-mustard); }
/* Mesaj alanının yüksekliği ayrılmıştır: ipucu ve hata metinleri masa ile ıstakayı oynatmaz. */
.ok-status { grid-area: status; min-height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.ok-draft {
    max-width: 100%;
    padding: 2px 12px;
    border-radius: 8px;
    background: rgba(229,169,59,.12);
    color: var(--p-cream);
    font-size: 13.5px;
    font-weight: 500;
}
.ok-hint { margin: 0; max-width: 100%; font-size: 13.5px; line-height: 1.3; color: var(--p-sage); }
.ok-hint[data-tone="error"] { color: #ffc9c2; }

/* ---------- Istaka ---------- */
.ok-rack-wrap { position: relative; flex-shrink: 0; }
.ok-rack-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 0 4px; }
/* Istaka görseli (istaka.webp, 1800×452) üzerindeki ölçüler:
   üst rafın üst kenarı yüksekliğin %39,7'si, alt rafınki %83,3'ü; yan dikmeler arası %7–%93.
   Istaka genişliği taş boyundan hesaplanır, böylece taşların altı her boyutta raflara oturur. */
.ok-rack {
    --slot: calc(var(--tw) + 6px);
    --rack-w: calc(15 * var(--slot) / .86);
    --rack-h: calc(var(--rack-w) * .2511);
    display: grid;
    grid-template-columns: repeat(15, var(--slot));
    grid-template-rows: calc(var(--rack-h) * .397) calc(var(--rack-h) * .436);
    width: var(--rack-w);
    height: var(--rack-h);
    padding: 0 calc(var(--rack-w) * .07);
    margin: 0 auto;
    background: url("../img/istaka.webp") center / 100% 100% no-repeat;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
.ok-slot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ok-slot.is-reserved::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: var(--tw);
    height: var(--th);
    border-radius: calc(var(--tw) * .14);
    border: 1.5px dashed rgba(246,231,208,.35);
}
.ok-slot.is-drop::after {
    content: "";
    position: absolute;
    inset: 4px 1px 0;
    border-radius: 6px 6px 0 0;
    background: rgba(229,169,59,.28);
    pointer-events: none;
}
.ok-rack-tile {
    padding: 0;
    border: 0;
    cursor: grab;
    touch-action: pan-x;
    transition: transform .14s ease, box-shadow .14s ease;
}
.ok-rack-tile:hover { transform: translateY(-3px); }
.ok-rack-tile.is-selected { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--p-mustard), 0 8px 14px rgba(0,0,0,.45); }
.ok-rack-tile.is-must::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px dashed #ff9e94;
}
.ok-rack-tile.is-dragging { opacity: .3; }
.ok-rack-tile.is-new { animation: ok-pop .4s ease; }
.ok-rack.is-locked .ok-rack-tile { filter: saturate(.85); }
.ok-rack.is-dealing .ok-rack-tile { animation: ok-deal .4s cubic-bezier(.2,.7,.2,1) both; }
.ok-rack.is-dealing .ok-slot:nth-child(3n) .ok-rack-tile { animation-delay: 60ms; }
.ok-rack.is-dealing .ok-slot:nth-child(3n+1) .ok-rack-tile { animation-delay: 120ms; }
@keyframes ok-deal { from { opacity: 0; transform: translateY(-30px) scale(.85); } }
.ok-drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; box-shadow: 0 12px 24px rgba(0,0,0,.5); }

/* Kısayollar: ıstakanın sağ altında küçük yardım; açılınca ıstakanın üstünde balon. */
.ok-shortcuts { position: absolute; right: 0; bottom: 6px; z-index: 5; font-size: 13px; color: var(--p-sage); }
.ok-shortcuts summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(246,231,208,.3);
    background: rgba(20,11,7,.8);
    color: var(--p-cream);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.ok-shortcuts summary::-webkit-details-marker { display: none; }
.ok-shortcuts summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ok-shortcuts summary:focus-visible { outline: 3px solid var(--p-mustard); outline-offset: 2px; }
.ok-shortcuts p {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    width: min(320px, calc(100vw - 32px));
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #21130c;
    border: 1px solid rgba(229,169,59,.35);
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    line-height: 1.5;
}
.ok-shortcuts kbd { padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(246,231,208,.3); font: 600 12px/1.4 var(--sans); color: var(--p-cream); }
@media (hover: none) { .ok-shortcuts { display: none; } }

/* ---------- Pencereler ---------- */
.ok-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ok-choice { justify-content: flex-start; white-space: normal; text-align: left; }
.ok-rule-mode { margin-bottom: 8px; padding: 2px 14px 10px; border-radius: 12px; background: rgba(229,169,59,.1); border: 1px solid rgba(229,169,59,.35); }
.ok-dialog-result { width: min(760px, calc(100vw - 32px)); }
.ok-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ok-badge { padding: 3px 10px; border-radius: 999px; background: var(--p-mustard); color: var(--p-brown); font-size: 13px; font-weight: 700; }
.ok-result-table td { white-space: normal; }
.ok-result-table tr.is-finisher th, .ok-result-table tr.is-finisher td { color: var(--p-mustard); font-weight: 600; }
.ok-result-sum { display: block; font-size: 13px; }
.ok-result-tiles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-top: 3px; max-width: 260px; margin-left: auto; }
.ok-result-team p { margin: 8px 0 0; }
.ok-result-sub { margin-top: 14px !important; }

/* ---------- Duyarlı yerleşim ---------- */
/* Orta genişlik: hamle düğmeleri kendi satırına geçer, kendi panelim ve ıstaka düzeni üstte. */
@media (max-width: 1280px) {
    .ok-dock {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "tools me"
            "buttons buttons"
            "status status";
    }
}
/* Kısa masaüstü: önce boşluklar ve süs alanları azalır. */
@media (max-height: 800px) and (min-width: 861px) {
    .ok-table { gap: 6px 10px; padding-top: 6px; padding-bottom: 6px; }
    .ok-seat { padding: 5px 8px; gap: 6px 8px; }
    .ok-seat-left, .ok-seat-right { --pic: clamp(52px, 4.2vw, 60px); gap: 4px 8px; }
    .ok-seat .ok-discard { padding: 2px 6px; }
    .ok-seat-top { --pic: 48px; padding: 4px 8px; }
    .ok-dock { padding-top: 5px; gap: 4px 10px; }
    .ok-btn { min-height: 40px; }
    /* .ok-game ile özgüllük artırılır: pasif ([aria-disabled]) düğme de aynı boyda kalır, sıra değişince düğmeler büyüyüp küçülmez. */
    .ok-game .ok-buttons .ok-btn.ok-btn-img { --btn-h: 60px; }
    .ok-status { min-height: 34px; }
    .ok-score { min-height: 36px; }
    .ok-score-total { font-size: 21px; }
}
@media (max-width: 860px) {
    .ok-scores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ok-scores[data-mode="pairs"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ok-score-note { display: none; }
    .ok-table {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "left top right"
            "pool pool pool"
            "melds melds melds"
            "dock dock dock";
        gap: 8px;
        padding: 10px;
    }
    .ok-seat-left, .ok-seat-right { grid-row: auto; align-self: stretch; }
    .ok-seat, .ok-seat-top {
        --pic: 40px;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "pic info" "discard discard";
        width: auto;
        justify-self: stretch;
        align-self: stretch;
        padding: 6px 7px;
        gap: 5px 6px;
    }
    .ok-seat-name { font-size: 13.5px; }
    .ok-seat-tag { display: none; }
    .ok-seat-meta { font-size: 11.5px; gap: 3px 4px; }
    .ok-discard { gap: 4px; padding: 3px 5px; justify-content: space-between; }
    .ok-discard-label { display: none; }
    .ok-melds-scroll { max-height: 38vh; min-height: 64px; }
    .ok-dock { grid-template-columns: minmax(0, 1fr); grid-template-areas: "me" "buttons" "tools" "status"; }
    .ok-seat-me { --pic: 40px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic info discard"; justify-self: stretch; }
    .ok-rack-tools { justify-content: center; }
    .ok-seat-me { justify-self: stretch; }
}
@media (max-width: 520px) {
    .okey-page { --tw: 36px; --tw-sm: 25px; }
    .ok-lobby-card { box-shadow: 0 0 0 6px #4a2c18, 0 0 0 7px #24130a, 0 16px 40px rgba(0,0,0,.5); padding-top: 22px; }
    .ok-modes { grid-template-columns: 1fr; }
    .ok-mode-card { padding: 14px 12px; }
    .ok-scores { gap: 5px; }
    .ok-score { padding: 4px 8px; min-height: 34px; column-gap: 4px; }
    .ok-score-total { font-size: 19px; }
    .ok-score-name { font-size: 12.5px; }
    .ok-score-sub { display: none; }
    .ok-seat, .ok-seat-top { --pic: 32px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "info" "discard"; justify-items: center; text-align: center; }
    .ok-seat-me { --pic: 36px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic info discard"; justify-items: stretch; text-align: left; }
    .ok-seat-head, .ok-seat-meta { justify-content: center; }
    .ok-seat-me .ok-seat-head, .ok-seat-me .ok-seat-meta { justify-content: flex-start; }
    .ok-seat .ok-discard { justify-self: stretch; }
    .ok-team-badge { font-size: 11px; padding: 1px 6px; }
    .ok-turn-pill { font-size: 11px; padding: 1px 6px; }
    .ok-pool { --tw: 28px; padding: 3px 2px; }
    .ok-pool-item { padding: 0 8px; gap: 5px; }
    .ok-pool-label { font-size: 11px; }
    .ok-stock-count { font-size: 20px; }
    .ok-buttons { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 5px; }
    .ok-game .ok-buttons .ok-btn.ok-btn-img { --btn-h: min(64px, calc((100vw - 60px) / 4 * 230 / 252)); }
    .ok-btn { min-height: 44px; padding: 4px; font-size: 12.5px; white-space: normal; }
    .ok-draft { font-size: 12.5px; padding: 2px 8px; }
    .ok-hint { font-size: 12.5px; }
    .ok-status { min-height: 52px; }
    .ok-mini, .ok-rack-tools .ok-mini, .ok-rack-tools .ok-auto { min-height: 36px; padding: 4px 8px; font-size: 12px; }
    .ok-rack-wrap { margin: 0 -6px; }
    .ok-handinfo { font-size: 11.5px; padding: 3px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .ok-discard.is-takeable, .ok-tile.is-swappable { animation: none; }
    .ok-rack-tile:hover, .ok-rack-tile.is-selected { transform: none; }
    .ok-rack-tile.is-selected { box-shadow: 0 0 0 3px var(--p-mustard), 0 0 0 6px rgba(229,169,59,.35); }
}

/* Çok oyunculu masa: oyun ekranındaki bağlantı durumu (bekleme odası stilleri mp-room.css'te). */
.ok-seat.is-offline { opacity: .7; }
.ok-seat-status { padding: 1px 8px; border-radius: 999px; background: rgba(224,120,106,.2); color: #ffb4a8; font-size: 12px; }
.ok-seat-status[hidden] { display: none !important; }