/* ============================================================
   101 OKEY — FUN MASA KATMANI (game-table.css)
   Yatay (landscape) mobil masa arayüzü.
   style.css'ten SONRA yüklenir; tüm yeni sınıflar "ft-" önekli.
   ============================================================ */

:root {
    --ft-tw: 40px;
    --ft-th: 56px;
    --ft-wood-1: #7a4a22;
    --ft-wood-2: #5a3116;
    --ft-wood-3: #3d1f0c;
    --ft-brass: #f2c14e;
    --ft-felt-1: #12693a;
    --ft-felt-2: #0a4425;
    --ft-felt-3: #062f19;
    --ft-ink: #f6f3e8;
    --ft-glass: rgba(6, 24, 14, .72);
    --ft-line: rgba(242, 193, 78, .38);
    --ft-topbar-h: 34px;
    --ft-cue-h: 31%;
    --ft-side-w: 84px;
}

/* ---------- Temel ---------- */
html, body.ft-body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: #07240f;
}

body.ft-body.page-game {
    overflow: hidden !important;
    height: 100vh;
}

.hidden { display: none !important; }
.ft-legacy { display: none !important; }

/* Oyun kabı: tüm sahne sabit konumlu olduğu için kabı görünür tut */
#gameContainer.game-container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ------------------------------------------------------------
   NOT: Masa ARTIK DÖNDÜRÜLMEZ.
   Eski `body.ft-rotating` + `rotate(90deg)` yapay döndürmesi ve ona bağlı
   koordinat düzeltmeleri tamamen kaldırıldı. Yerleşim doğal viewport'a göre
   çalışır; dikey ekranda yönlendirme katmanı gösterilir (aşağıda).
   ------------------------------------------------------------ */

/* Dikey ekranda gösterilen yönlendirme katmanı */
.ft-portrait-hint {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-family: "Outfit", system-ui, -apple-system, sans-serif;
    color: #ffe9b0;
    background: radial-gradient(circle at 50% 42%, #0f4527 0%, #062f19 58%, #04190e 100%);
}
body.ft-portrait .ft-portrait-hint { display: flex; }

.ft-ph-icon {
    font-size: 52px;
    line-height: 1;
    display: inline-block;
    animation: ftPhTilt 2.6s ease-in-out infinite;
}
@keyframes ftPhTilt {
    0%, 35% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
}
.ft-ph-title { font-size: 19px; font-weight: 700; }
.ft-ph-text { font-size: 13px; line-height: 1.5; opacity: .85; max-width: 300px; }
.ft-ph-note { font-size: 11px; opacity: .6; max-width: 300px; }
.ft-ph-btn {
    margin-top: 6px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--ft-brass);
    border-radius: 999px;
    background: transparent;
    color: var(--ft-brass);
    font: 600 14px/1 "Outfit", system-ui, sans-serif;
    touch-action: manipulation;
}

/* Dikeyde masa etkileşime kapalı olsun (katman zaten üstünü kapatır) */
body.ft-portrait #ftStage { pointer-events: none; }

/* ---------- ESKİ style.css TAŞ KURALLARINI NÖTRLE ----------
   style.css'te .tile-slot .tile-sprite absolute + translate(-50%,-50%) ile
   konumlanıyor, .tile-sprite:hover ise rotateX ile döndürüyor; seçili taş
   bu yüzden yuvasından kayıyordu. Yeni masa katmanında taşlar normal akışta. */
.ft-cue-row .tile-slot {
    position: relative;
}
.ft-cue-row .tile-slot .tile-sprite {
    position: static;
    top: auto;
    left: auto;
    margin: 0;
    transform: none;
    z-index: 2 !important;
    cursor: grab;
}
.ft-cue-row .tile-slot .tile-sprite:hover {
    transform: none;
}
.ft-cue-row .tile-slot .tile-sprite.selected {
    transform: translateY(-8px);
    z-index: 5 !important;
}
.ft-lastbox .tile-sprite,
.ft-zone-body .tile-sprite,
.ft-ind-tile .tile-sprite,
.ft-discardpile-tile .tile-sprite,
.ft-group-row .tile-sprite {
    position: static;
    transform: none !important;
    z-index: 1 !important;
    box-shadow: none;
}
.tile-sprite.ft-ghost {
    z-index: 9999 !important;
}

/* ---------- Sahne sarmalayıcı (döndürme YOK: doğal viewport) ---------- */
.ft-rotate-wrap {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Lobi sarmalayıcı: yatayda normal akış (içerik kaydırılabilir kalsın) */
.ft-lobby-wrap {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Eski "telefonu yan çevirin" katmanı ve döndürme şeridi kaldırıldı:
   dikey ekranda artık .ft-portrait-hint katmanı gösterilir. */

/* Dokunmatik taşlar: tarayıcı jestleri (kaydırma/zoom) kapalı, metin seçimi kapalı */
.ft-cue-row .tile-slot .tile-sprite {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
#drawPile,
#discardPile,
.ft-seat,
.ft-meseat {
    touch-action: manipulation;
}

/* ---------- Sahne ---------- */
.ft-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Outfit", system-ui, -apple-system, sans-serif;
    color: var(--ft-ink);
    background:
        radial-gradient(ellipse 74% 68% at 50% 48%, var(--ft-felt-1) 0%, var(--ft-felt-2) 58%, var(--ft-felt-3) 100%),
        #062f19;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
}
.ft-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 5px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 5px);
}

/* ---------- ÜST BAR ---------- */
.ft-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ft-topbar-h);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.ft-menu-btn {
    width: 26px;
    height: 24px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    border: 1px solid var(--ft-line);
    border-radius: 7px;
    background: rgba(0, 0, 0, .35);
}
.ft-menu-btn span {
    display: block;
    height: 2px;
    background: var(--ft-brass);
    border-radius: 2px;
}
.ft-turn {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--ft-line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    max-width: 46%;
    overflow: hidden;
}
.ft-turn-label {
    font-size: 8px;
    letter-spacing: .12em;
    opacity: .7;
}
.ft-turn-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-turn.my-turn {
    border-color: #6ef2a2;
    background: rgba(20, 90, 45, .7);
    box-shadow: 0 0 10px rgba(110, 242, 162, .45);
    animation: ft-turn-pulse 1.4s ease-in-out infinite;
}
@keyframes ft-turn-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(110, 242, 162, .35); }
    50% { box-shadow: 0 0 16px rgba(110, 242, 162, .75); }
}
.ft-topbar-right {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.ft-chip {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--ft-line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
}
.ft-chip-label { font-size: 8px; letter-spacing: .1em; opacity: .7; }
.ft-chip-value { font-size: 12px; font-weight: 700; color: var(--ft-brass); }

/* ---------- RAKİP KOLTUKLARI ---------- */
.ft-seat {
    position: absolute;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border: 1px solid var(--ft-line);
    border-radius: 12px;
    background: var(--ft-glass);
    backdrop-filter: blur(3px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
}
.ft-seat--left { left: 3px; top: 50%; transform: translateY(-50%); flex-direction: column; width: 58px; }
.ft-seat--top { left: 50%; top: calc(var(--ft-topbar-h) + 2px); transform: translateX(-50%); }
.ft-seat--right { right: 3px; top: calc(var(--ft-topbar-h) + 2px); flex-direction: column; width: 58px; }
.ft-seat--left .ft-seat-meta, .ft-seat--right .ft-seat-meta { align-items: center; min-width: 0; }
.ft-seat--left .ft-seat-name, .ft-seat--right .ft-seat-name { max-width: 54px; text-align: center; }
.ft-seat.current-turn {
    border-color: #6ef2a2;
    box-shadow: 0 0 12px rgba(110, 242, 162, .6);
}
.ft-seat-name {
    font-size: 10px;
    font-weight: 600;
    max-width: 74px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-seat-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 42px;
}
.ft-seat-score { font-size: 9px; color: var(--ft-brass); opacity: .9; }

/* avatar + süre halkası */
.ft-seat-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}
.ft-avatar, .ft-avatar-fallback {
    position: absolute;
    inset: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.ft-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}
.ft-ring {
    position: absolute;
    inset: 0;
    width: 34px;
    height: 34px;
    transform: rotate(-90deg);
}
.ft-ring-bg, .ft-ring-fg {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}
.ft-ring-bg { stroke: rgba(255, 255, 255, .16); }
.ft-ring-fg {
    stroke: var(--ft-brass);
    stroke-dasharray: 119.4;
    stroke-dashoffset: 119.4;
    transition: stroke-dashoffset .35s linear, stroke .3s;
}
.ft-seat.current-turn .ft-ring-fg { stroke: #6ef2a2; }
.ft-seat-avatar--me .ft-ring-fg { stroke: #7fd4ff; }

.ft-tilecount {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #1b2a1f;
    border: 1px solid var(--ft-brass);
    color: var(--ft-brass);
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* son atılan taş kutusu */
.ft-lastbox {
    width: 24px;
    height: 33px;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px dashed rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ft-lastbox .tile-sprite { --ft-tw: 22px; --ft-th: 31px; }
.ft-lastbox--me { border-style: solid; border-color: var(--ft-line); }

.ft-opened-dot {
    position: absolute;
    top: -7px;
    right: -4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #b8860b;
    color: #fffbe8;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    box-shadow: 0 0 8px rgba(242, 193, 78, .7);
}
.ft-dropzone {
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color .15s, box-shadow .15s;
}
.ft-seat.ft-dz-active .ft-dropzone {
    border-color: #ffd166;
    box-shadow: 0 0 14px rgba(255, 209, 102, .75) inset, 0 0 12px rgba(255, 209, 102, .5);
}

/* ---------- MASA ORTASI ---------- */
.ft-center {
    position: absolute;
    left: var(--ft-side-w);
    right: var(--ft-side-w);
    top: calc(var(--ft-topbar-h) + 46px);   /* üst koltuğun ALTINDA başlar */
    bottom: calc(max(var(--ft-cue-h), calc(var(--ft-th) * 2 + 34px)) + 42px);
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 108px 1fr;
    gap: 6px;
    align-items: stretch;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(242, 193, 78, .22);
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, .08));
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .45);
}

.ft-zone {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .22);
    overflow: hidden;
}
.ft-zone-head {
    flex: 0 0 auto;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    color: #ffe9b0;
    background: linear-gradient(180deg, rgba(184, 134, 11, .45), rgba(0, 0, 0, .1));
    border-bottom: 1px solid rgba(242, 193, 78, .25);
}
.ft-zone--cift .ft-zone-head {
    background: linear-gradient(180deg, rgba(120, 60, 160, .45), rgba(0, 0, 0, .1));
}
.ft-zone-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 3px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
}
.ft-zone-body::-webkit-scrollbar { width: 3px; }
.ft-zone-body::-webkit-scrollbar-thumb { background: rgba(242, 193, 78, .4); border-radius: 3px; }
.ft-zone-empty {
    margin: auto;
    font-size: 9px;
    opacity: .45;
    text-align: center;
}

/* açılmış grup satırı */
.ft-group-row {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 3px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}
.ft-group-row.ft-group-row--cift { border-color: rgba(180, 130, 230, .35); }
.ft-group-owner {
    font-size: 8px;
    font-weight: 700;
    color: var(--ft-brass);
    max-width: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}
.ft-group-tiles { display: flex; gap: 1px; flex-wrap: wrap; }
.ft-group-row .tile-sprite { --ft-tw: 20px; --ft-th: 28px; }
.ft-group-row.ft-drop-ok { outline: 1px solid #6ef2a2; box-shadow: 0 0 8px rgba(110, 242, 162, .5); }
.ft-group-row.ft-drop-bad { outline: 1px solid #ff6b6b; }
.ft-group-row.ft-işle-target { cursor: pointer; }

/* orta sütun: yığın + gösterge (yatay) + atılan */
.ft-pilecol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 3px 5px;
    min-width: 0;
    padding: 2px;
}
.ft-pile {
    position: relative;
    width: 42px;
    height: 58px;
    cursor: pointer;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55));
}
.ft-pile-layer, .ft-pile-back {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .5);
    background: linear-gradient(160deg, #f3ead3, #d9c9a4);
}
.ft-pile-layer.l3 { transform: translate(-4px, -4px); opacity: .5; }
.ft-pile-layer.l2 { transform: translate(-2px, -2px); opacity: .75; }
.ft-pile-layer.l1 { transform: translate(-1px, -1px); opacity: .9; }
.ft-pile-back {
    background:
        repeating-linear-gradient(45deg, #2f6b3f 0 5px, #24552f 5px 10px);
    border: 1px solid #10240f;
}
.ft-pile-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 6px #000, 0 2px 3px #000;
}
.ft-pile.ft-pile-ready {
    animation: ft-pile-glow 1.2s ease-in-out infinite;
}
@keyframes ft-pile-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(110, 242, 162, .5)); }
    50% { filter: drop-shadow(0 0 12px rgba(110, 242, 162, .95)); }
}

.ft-indicator { display: flex; gap: 4px; }
.ft-ind-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.ft-ind-label {
    font-size: 7px;
    letter-spacing: .08em;
    opacity: .75;
    color: #ffe9b0;
}
.ft-ind-tile {
    width: 26px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .4);
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ft-ind-tile .tile-sprite { --ft-tw: 24px; --ft-th: 34px; }

.ft-discardpile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .18);
}
.ft-discardpile.ft-dp-ready { border-color: #6ef2a2; box-shadow: 0 0 8px rgba(110, 242, 162, .4); }
.ft-discardpile-tile {
    width: 22px;
    height: 30px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ft-discardpile-tile .tile-sprite { --ft-tw: 20px; --ft-th: 28px; }
.ft-discardpile-hint { font-size: 7px; opacity: .5; }

/* ---------- SAĞ AKSİYON ŞERİDİ (ıstakanın hemen üstü, sağda) ---------- */
.ft-actions {
    position: absolute;
    right: 6px;
    bottom: calc(max(var(--ft-cue-h), calc(var(--ft-th) * 2 + 34px)) + 8px);
    z-index: 18;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
}
.ft-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 58px;
    padding: 5px 8px;
    border-radius: 10px;
    border: 1px solid var(--ft-line);
    background: linear-gradient(180deg, rgba(28, 60, 38, .95), rgba(10, 32, 20, .95));
    color: var(--ft-ink);
    font: 700 10px/1.1 "Outfit", system-ui, sans-serif;
    letter-spacing: .03em;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
    transition: transform .12s, box-shadow .12s, opacity .2s;
}
.ft-act:active { transform: scale(.96); }
.ft-act:disabled { opacity: .38; }
.ft-act-ico { font-size: 11px; line-height: 1; }
.ft-act-txt { white-space: nowrap; }
.ft-act-sub { font-size: 8px; opacity: .85; color: var(--ft-brass); }
.ft-act--open:not(:disabled) {
    border-color: #6ef2a2;
    background: linear-gradient(180deg, #1c7a45, #0f5130);
    box-shadow: 0 0 12px rgba(110, 242, 162, .45);
}
.ft-act--process.ft-act--armed {
    border-color: #7fd4ff;
    background: linear-gradient(180deg, #1d5f86, #103f5c);
    box-shadow: 0 0 12px rgba(127, 212, 255, .55);
}

/* ---------- ISTAKA ---------- */
.ft-cue-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* 2 katlı ıstaka + tutamaklar her zaman sığsın */
    height: max(var(--ft-cue-h), calc(var(--ft-th) * 2 + 34px));
    z-index: 16;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px calc(2px + env(safe-area-inset-bottom, 0px));
}
.ft-cue {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ft-cue-wood {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 12px;
    border: 2px solid var(--ft-wood-3);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .28)),
        url('../asset/istaka.jpg');
    background-size: cover, cover;
    background-position: center, center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ft-cue-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    min-height: var(--ft-th);
    touch-action: none;
}
.ft-cue-shelf {
    height: 3px;
    margin: 0 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .1), rgba(0, 0, 0, .45));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ft-cue-grip {
    height: 2px;
    margin: 0 10px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 6px, transparent 6px 12px);
}
.ft-cue-badge {
    position: absolute;
    right: 6px;
    top: 2px;
    font-size: 8px;
    color: #ffe9b0;
    background: rgba(0, 0, 0, .45);
    border-radius: 999px;
    padding: 1px 6px;
    opacity: .9;
}
.ft-cue-side {
    flex: 0 0 auto;
    width: 34px;
    height: 58px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: .12em;
    border-radius: 10px;
    border: 1px solid var(--ft-line);
    background: linear-gradient(180deg, #8a5624, #4d2a10);
    color: #ffe9b0;
    font: 700 11px/1 "Outfit", system-ui, sans-serif;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.ft-cue-side:active { transform: scale(.96); }
.ft-cue-side--cift { background: linear-gradient(180deg, #6a3f92, #38205a); }
.ft-cue-side.ft-sort-active {
    box-shadow: 0 0 12px rgba(255, 209, 102, .8);
    border-color: #ffd166;
}

/* canlı el toplamı göstergesi (ıstakanın sol ÜST köşesi) */
.ft-handtotal {
    position: absolute;
    left: 4px;
    top: -6px;
    z-index: 22;
    min-width: 84px;
    padding: 4px 7px 5px;
    border-radius: 10px;
    border: 1px solid var(--ft-line);
    background: linear-gradient(180deg, rgba(14, 40, 26, .96), rgba(6, 22, 14, .96));
    box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}
.ft-ht-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    line-height: 1.15;
}
.ft-ht-lbl { font-size: 8px; letter-spacing: .1em; opacity: .75; }
.ft-ht-val { font-size: 12px; font-weight: 800; color: var(--ft-brass); }
.ft-ht-bar {
    height: 3px;
    margin-top: 2px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}
.ft-ht-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #f2c14e, #6ef2a2);
    transition: width .25s ease;
}
.ft-ht-val.ft-ht-ok { color: #6ef2a2; text-shadow: 0 0 8px rgba(110, 242, 162, .7); }
.ft-handtotal.ft-ht-ready {
    border-color: #6ef2a2;
    animation: ft-ht-pulse 1.3s ease-in-out infinite;
}
@keyframes ft-ht-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(110, 242, 162, .35); }
    50% { box-shadow: 0 0 20px rgba(110, 242, 162, .85); }
}

/* benim bilgim (ıstakanın sağında) */
.ft-meseat {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 21;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 3px;
    border-radius: 999px;
    border: 1px solid var(--ft-line);
    background: var(--ft-glass);
}
.ft-meseat .ft-seat-name { font-size: 10px; }
.ft-meseat .ft-lastbox { width: 20px; height: 28px; }
.ft-meseat .ft-lastbox .tile-sprite { --ft-tw: 18px; --ft-th: 26px; }

/* ---------- TAŞLAR (sprite) ---------- */
.tile-sprite {
    position: relative;
    flex: 0 0 auto;
    width: var(--ft-tw);
    height: var(--ft-th);
    border-radius: 5px;
    background-image: url('../asset/Taslar.png');
    background-repeat: no-repeat;
    background-size: calc(var(--ft-tw) * 13) calc(var(--ft-th) * 5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    border: 1px solid rgba(0, 0, 0, .35);
    will-change: transform;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
    touch-action: none;
}
.ft-cue-row .tile-slot {
    width: var(--ft-tw);
    height: var(--ft-th);
    flex: 0 0 auto;
    border-radius: 5px;
    background: rgba(0, 0, 0, .16);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.ft-cue-row .tile-slot.ft-slot-hot {
    background: rgba(255, 209, 102, .28);
    box-shadow: inset 0 0 6px rgba(255, 209, 102, .6);
}

/* seçili (kalkan) taş */
.tile-sprite.selected {
    transform: translateY(-9px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .6), 0 0 12px rgba(127, 212, 255, .85);
    border-color: #7fd4ff;
    z-index: 4;
}
/* 101 barajı geçildi → per taşlarına parlama */
.tile-sprite.ft-glow {
    animation: ft-glow-pulse 1.5s ease-in-out infinite;
    border-color: #ffd166;
}
@keyframes ft-glow-pulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px 1px rgba(255, 209, 102, .8);
        filter: brightness(1.02);
    }
    50% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 0 16px 4px rgba(255, 176, 32, .95);
        filter: brightness(1.12);
    }
}
.tile-sprite.ft-in-group { border-color: rgba(110, 242, 162, .9); }
.tile-sprite.okey { border-color: #ff4d6d; box-shadow: 0 0 8px rgba(255, 77, 109, .8); }
.tile-sprite.ft-ghost {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    transform: scale(1.12);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .65);
    opacity: .95;
}
.tile-sprite.ft-picked { filter: brightness(1.15); }
.ft-cue-row.ft-reorder-active .tile-slot { background: rgba(255, 255, 255, .1); }

/* atma hedef ipucu */
.ft-discard-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px dashed #ffd166;
    background: rgba(0, 0, 0, .78);
    color: #ffd166;
    font: 700 10px/1.2 "Outfit", system-ui, sans-serif;
    letter-spacing: .05em;
    pointer-events: none;
}

/* ---------- HAMBURGER MENÜ / ÇEKMECE ---------- */
.ft-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 64;
    background: rgba(0, 0, 0, .55);
}
.ft-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 66;
    width: min(300px, 78vw);
    padding: 8px 10px 12px;
    background: linear-gradient(180deg, #0c2b18, #071a0e);
    border-right: 1px solid var(--ft-line);
    box-shadow: 8px 0 24px rgba(0, 0, 0, .6);
    overflow-y: auto;
    animation: ft-drawer-in .18s ease-out;
    font-family: "Outfit", system-ui, sans-serif;
    color: var(--ft-ink);
}
@keyframes ft-drawer-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.ft-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #ffe9b0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ft-line);
}
.ft-drawer-close {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--ft-line);
    background: transparent;
    color: #ffe9b0;
    font-size: 12px;
}
.ft-score-list { margin: 6px 0 2px; }
.ft-drawer-sec { margin-top: 10px; }
.ft-drawer-title {
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--ft-brass);
    margin-bottom: 4px;
}
.ft-drawer-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .08);
}
.ft-drawer-help p {
    margin: 3px 0;
    font-size: 10px;
    line-height: 1.35;
    opacity: .85;
}
.ft-drawer-leave {
    margin-top: 12px;
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #ff6b6b;
    background: rgba(255, 107, 107, .12);
    color: #ff9d9d;
    font: 700 11px/1 "Outfit", system-ui, sans-serif;
}

/* ---------- AÇ / ÇİFT SEÇİM BALONU ---------- */
.ft-choice {
    position: fixed;
    right: 84px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 62;
    width: 176px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--ft-line);
    background: linear-gradient(180deg, #0e3220, #071c10);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: "Outfit", system-ui, sans-serif;
}
.ft-choice-title {
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--ft-brass);
    text-align: center;
}
.ft-choice-btn {
    padding: 7px 6px;
    border-radius: 9px;
    border: 1px solid var(--ft-line);
    background: linear-gradient(180deg, #1b5c36, #0d3a22);
    color: var(--ft-ink);
    font: 600 10px/1.2 "Outfit", system-ui, sans-serif;
}
.ft-choice-btn[disabled] { opacity: .4; }
.ft-choice-btn--cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #ffb3b3;
}

/* ---------- TAŞ İŞLEME MODU ---------- */
body.ft-processing .ft-group-row {
    cursor: pointer;
    outline: 1px dashed rgba(127, 212, 255, .7);
}
body.ft-processing .ft-zone-body { box-shadow: inset 0 0 12px rgba(127, 212, 255, .25); }

/* ---------- LOBİ (yatay uyum) ---------- */
.ft-lobby {
    max-height: 94vh;
    overflow-y: auto;
}
@media (orientation: landscape) {
    .ft-lobby {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "head code"
            "players players"
            "wait wait"
            "leave leave";
        gap: 6px 12px;
        align-items: center;
        padding: 10px 14px;
        max-width: 96vw;
    }
    .ft-lobby .lobby-header { grid-area: head; }
    .ft-lobby .lobby-header h1 { font-size: 20px; }
    .ft-lobby .lobby-header p { font-size: 11px; margin: 2px 0 0; }
    .ft-lobby .lobby-room-code { grid-area: code; padding: 6px 9px; }
    .ft-lobby .lobby-players { grid-area: players; }
    .ft-lobby .lobby-players h3 { font-size: 11px; margin: 2px 0; }
    .ft-lobby .lobby-players-grid { gap: 6px; }
    .ft-lobby .lobby-player-slot { padding: 6px 4px; font-size: 10px; }
    .ft-lobby .lobby-waiting { grid-area: wait; font-size: 10px; }
    .ft-lobby .lobby-leave-btn { grid-area: leave; padding: 7px; font-size: 11px; }
    .ft-lobby .spinner { width: 14px; height: 14px; }
}

/* ---------- DOMATES BUTONU (sol üst, taşların üstünü kapatmaz) ---------- */
.ft-body .tomato-btn {
    position: absolute;
    top: calc(var(--ft-topbar-h) + 4px);
    left: 6px;
    bottom: auto;
    right: auto;
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    z-index: 24;
    box-shadow: 0 3px 10px rgba(239, 68, 68, .45);
}
.ft-body .tomato-counter {
    width: 16px;
    height: 16px;
    font-size: 9px;
    line-height: 16px;
}

/* ---------- GENİŞ EKRAN (tablet / masaüstü yatay) ---------- */
@media (orientation: landscape) and (min-width: 820px) {
    :root { --ft-tw: 46px; --ft-th: 64px; --ft-side-w: 84px; }
}
@media (orientation: landscape) and (min-width: 1100px) {
    :root { --ft-tw: 52px; --ft-th: 73px; --ft-side-w: 92px; }
}
@media (orientation: landscape) and (max-height: 380px) {
    :root { --ft-tw: 34px; --ft-th: 48px; --ft-topbar-h: 30px; }
}

/* ============================================================
   🌴 ATMOSFER — tropik marina (soft-blur) + koyu lacivert kumaş masa
   ============================================================ */
:root {
    /* Masa yüzeyi: koyu lacivert kumaş (yeşil çuha kaldırıldı) */
    --ft-felt-1: #1d2c5e;
    --ft-felt-2: #16224a;
    --ft-felt-3: #0b1230;
}

/* Tropik deniz/marina fonu: katmanlı degrade + blur (masa kenarından görünür) */
.ft-marina {
    position: fixed;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 34% at 20% 14%, rgba(255, 240, 190, .95), rgba(255, 240, 190, 0) 62%),
        radial-gradient(ellipse 34% 26% at 34% 22%, rgba(180, 255, 214, .55), rgba(180, 255, 214, 0) 60%),
        radial-gradient(ellipse 70% 40% at 82% 24%, rgba(125, 205, 255, .60), rgba(125, 205, 255, 0) 64%),
        linear-gradient(180deg,
            #86cdf3 0%,
            #bfe8f8 26%,
            #6fc3dd 42%,
            #2f9fc2 55%,
            #1c6f9f 72%,
            #10416e 88%,
            #0a2a4d 100%);
    filter: blur(26px) saturate(1.08);
    transform: scale(1.04);
}

/* Masa: hafif içe çekilmiş, yuvarlatılmış "cam kenarlı" koyu lacivert kumaş.
   Kumaş yarı saydam: tropik marina atmosferi masanın içinden de hafifçe sızar. */
body.ft-body .ft-stage {
    inset: 4px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 76% 70% at 50% 44%,
            rgba(38, 62, 122, .90) 0%,
            rgba(24, 40, 86, .93) 52%,
            rgba(9, 16, 42, .96) 100%),
        radial-gradient(ellipse 60% 32% at 50% 6%, rgba(150, 220, 255, .18), rgba(150, 220, 255, 0) 70%),
        #0a1330;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow:
        inset 0 0 70px rgba(0, 0, 0, .60),
        inset 0 0 120px rgba(90, 180, 230, .10),
        0 0 0 1px rgba(140, 210, 255, .18),
        0 12px 34px rgba(0, 0, 0, .5);
}
/* Kumaş dokusu (ince çapraz dokuma) — mevcut ::before'un üzerine yoğunluk ekler */
body.ft-body .ft-stage::before {
    opacity: .85;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 5px);
}

/* ============================================================
   🪵 ISTAKA — YEKPARÇE AHŞAP (boş yuva çizgileri gizli)
   ============================================================ */
.ft-cue-row .tile-slot {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}
.ft-cue-row .tile-slot.ft-slot-hot {
    background: none !important;
    box-shadow: inset 0 0 0 2px rgba(255, 214, 102, .85) !important;
    border-radius: 6px;
}
.ft-cue-row.ft-reorder-active .tile-slot { background: none !important; }
/* Orta raf/ayırıcı çizgiler kaldırıldı: yekpare ahşap görünüm */
.ft-cue-shelf { display: none !important; }
.ft-cue-grip { display: none !important; }
.ft-cue-wood {
    border: 1px solid rgba(255, 226, 180, .28);
    background-image:
        linear-gradient(180deg, rgba(255, 236, 200, .16), rgba(0, 0, 0, .30)),
        url('../asset/istaka.jpg');
    background-size: cover, cover;
    background-position: center, center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ============================================================
   ⏱️ SÜRE: son 5 sn kırmızı yanıp sönme + son 3 sn uyarı
   ============================================================ */
.ft-ring-fg.ft-ring-warn {
    stroke: #ff5a5a !important;
    animation: ftRingBlink .7s steps(1, end) infinite;
}
@keyframes ftRingBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: .25; }
}
/* NOT: Koltuk uyarı durumu ayrı sınıftır (.ft-turn-critical).
   Etiketin (.ft-turn-warn) arka plan/padding stilleri koltuğa BULAŞMAZ —
   aksi halde tüm koltuk kutusu kırmızıya boyanıyordu. */
.ft-seat.current-turn.ft-turn-critical .ft-seat-name,
.ft-meseat.ft-turn-critical .ft-seat-name { color: #ff8f8f; }

.ft-turn-warn {
    position: absolute;
    left: 50%;
    top: calc(var(--ft-topbar-h) + 3px);
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(180, 30, 30, .88);
    border: 1px solid rgba(255, 140, 140, .7);
    color: #fff;
    font: 700 11px/1.5 "Outfit", system-ui, sans-serif;
    white-space: nowrap;
    animation: ftWarnPulse .6s ease-in-out infinite;
    z-index: 6;
}
@keyframes ftWarnPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.06); }
}

/* ============================================================
   🪙 ÇİP BAKİYESİ (avatar altında, altın çip ikonu ile)
   ============================================================ */
.ft-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 1px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 236, 180, .18), rgba(0, 0, 0, .28));
    border: 1px solid rgba(212, 175, 55, .55);
    color: #ffe9b0;
    font: 700 7.5px/1.3 "Outfit", system-ui, sans-serif;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* Yan koltuklar dar ve ekran kenarında: çip etiketi kırpılmasın */
.ft-seat .ft-chips { max-width: 92px; padding: 1px 4px; gap: 2px; }
.ft-seat--left .ft-chips,
.ft-seat--right .ft-chips { font-size: 7px; padding: 1px 3px; letter-spacing: -.02em; }
.ft-seat--right .ft-chips { transform: translateX(-9px); }  /* kenarda kırpılmasın */
.ft-meseat .ft-chips { font-size: 8.5px; }
.ft-chips b { font-weight: 700; letter-spacing: .01em; }
.ft-coin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: radial-gradient(circle at 34% 30%, #fff3c4, #f5c542 45%, #b8860b 100%);
    box-shadow: 0 0 0 1px rgba(120, 84, 0, .75), 0 0 4px rgba(255, 214, 102, .5);
    display: inline-block;
}
.ft-chips--me {
    background: linear-gradient(180deg, rgba(255, 236, 180, .24), rgba(0, 0, 0, .32));
    border-color: rgba(255, 214, 102, .8);
}

/* Kazanç/kayıp renkleri (el sonu modalı) */
.he-chip { font: 600 10px/1.4 "Outfit", system-ui, sans-serif; opacity: .95; }
.he-chip.win { color: #ffe08a; }
.he-chip.loss { color: #ffb4a2; }

/* ============================================================
   🔧 DOKUNMATİK BLOKAJ DÜZELTMESİ (kritik)
   ------------------------------------------------------------
   ESKİ HATA 1: body.ft-portrait #ftStage { pointer-events: none }
     → dikey ekranda TÜM masa dokunuşa kapalıydı.
   ESKİ HATA 2: .ft-portrait-hint tam ekran, opak, z-index:90 ve
     pointer-events:auto → dikeyde ekranın TAMAMINI kaplayıp
     bütün dokunuşları yutuyordu ("taşa dokunulmuyor" şikâyeti).
   ÇÖZÜM: dikeyde de etkileşim açık; uyarı katmanı ince bir şerit
   olarak üstte durur ve dokunuşu ASLA engellemez.
   ============================================================ */

/* Dekoratif katmanlar dokunuşu asla yiyemez */
#ftMarina,
.ft-marina,
.ft-stage::before,
.ft-stage::after,
.ft-toast-wrap,
.ft-portrait-hint,
.ft-ph-icon,
.ft-ph-title,
.ft-ph-text,
.ft-ph-note {
    pointer-events: none !important;
}

/* Etkileşimli alanlar: kesin dokunma + tarayıcı jestleri kapalı
   (Telegram'ın yukarı/aşağı kaydırma jesti sürüklemeyi çalmasın) */
.ft-rotate-wrap,
.ft-stage,
.ft-cue-wrap,
.ft-cue,
.ft-cue-wood,
.ft-cue-row,
.ft-cue-row .tile-slot,
.ft-cue-row .tile-sprite,
#drawPile,
#discardPile,
.ft-pile,
.ft-seat,
.ft-meseat,
.ft-actions button,
.ft-topbar button {
    pointer-events: auto;
    touch-action: none;
    -webkit-touch-callout: none;
}

/* Sahne kenarları dışında kalan alan (viewport) da dokunuşa açık kalsın */
body.ft-body,
#gameContainer {
    pointer-events: auto;
}

/* Dikeyde masa AKTİF (eski "pointer-events:none" kuralını geçersiz kılar) */
body.ft-portrait #ftStage,
body.ft-portrait .ft-rotate-wrap {
    pointer-events: auto;
}

/* Dikey uyarı: artık tam ekran DEĞİL — üstte ince, yarı saydam şerit */
.ft-portrait-hint {
    inset: auto;
    left: 8px;
    right: 8px;
    top: 8px;
    z-index: 90;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 12px;
    max-height: 62px;
    border-radius: 14px;
    border: 1px solid rgba(242, 193, 78, .45);
    background: linear-gradient(180deg, rgba(10, 34, 21, .95), rgba(6, 22, 14, .9));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    text-align: center;
    overflow: hidden;
}
body.ft-portrait .ft-portrait-hint { display: flex; }
.ft-portrait-hint .ft-ph-icon { font-size: 20px; animation: none; }
.ft-portrait-hint .ft-ph-title { font-size: 12px; }
.ft-portrait-hint .ft-ph-text { font-size: 10.5px; max-width: none; opacity: .85; }
.ft-portrait-hint .ft-ph-note,
.ft-portrait-hint .ft-ph-btn { display: none; }

/* Dikey yerleşim: masa ekrana sığsın (taşlar ve ıstaka kırpılmasın) */
@media (orientation: portrait) {
    :root {
        --ft-tw: 16px;
        --ft-th: 23px;
        --ft-side-w: 54px;
        --ft-cue-h: 25%;
        --ft-topbar-h: 30px;
    }
    .ft-cue-wrap { left: 2px !important; right: 2px !important; }
    .ft-cue-row .tile-slot { border-radius: 3px; }
    .ft-seat .ft-chips,
    .ft-meseat .ft-chips { font-size: 7px; }
    .ft-per-zone { min-height: 52px; }
    .ft-topbar { padding: 0 6px; }
    .ft-btn,
    .ft-actions button { min-height: 34px; font-size: 11px; padding: 0 8px; }
}

/* ============================================================
   🧠 AKILLI ISTAKA: per rozeti + dizme butonları
   ============================================================ */
.ft-rack-bar {
    position: absolute;
    top: 2px;
    left: 4px;
    right: 4px;
    z-index: 22;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    pointer-events: none;          /* şerit dokunuşu yutmasın */
}
.ft-rack-bar > * { pointer-events: auto; }

/* Canlı per rozeti — ıstakanın ÜST-ORTASINDA (sol üstteki SERİ/ÇİFT paneliyle
   ve sağdaki dizme butonlarıyla çakışmaz) */
.ft-per-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid rgba(242, 193, 78, .5);
    background: rgba(8, 26, 16, .9);
    color: #ffe9b0;
    font: 700 11px/1.15 "Outfit", system-ui, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
    transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.ft-per-badge .ft-pb-lbl { font-size: 9px; opacity: .8; letter-spacing: .06em; }
.ft-per-badge .ft-pb-max { font-size: 9.5px; opacity: .8; }
.ft-per-badge b { font-size: 14px; line-height: 1; }
.ft-per-badge.ft-per-badge--ready {
    background: linear-gradient(180deg, #1c7a45, #0f5a30);
    border-color: #7ce7a3;
    color: #eafff1;
    box-shadow: 0 0 0 1px rgba(124, 231, 163, .55), 0 0 18px rgba(80, 230, 140, .5);
    animation: ftPerPulse 1.4s ease-in-out infinite;
}
@keyframes ftPerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* Dizme butonları (sağ üst) */
.ft-rack-btns { display: flex; gap: 5px; }
.ft-rack-btn {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(242, 193, 78, .55);
    background: linear-gradient(180deg, rgba(46, 32, 14, .95), rgba(28, 18, 8, .95));
    color: #ffe9b0;
    font: 700 10.5px/1 "Outfit", system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.ft-rack-btn:active,
.ft-rack-btn.ft-rack-btn--active {
    background: linear-gradient(180deg, #6b4a12, #3f2a08);
    border-color: #f2c14e;
    color: #fff6dc;
}

/* Dikey uyarı şeridi: TEK SATIR, ince ve bilgilendirici (dokunuşu engellemez) */
.ft-portrait-hint { max-height: 44px; }
.ft-portrait-hint .ft-ph-text { display: none; }   /* uzun metin şeridi şişiriyordu */
.ft-portrait-hint .ft-ph-title { font-size: 11.5px; white-space: nowrap; }

/* Düzeltme: rozet absolute olduğu için dizme butonları SOLA kayıyordu
   (üstteki SERİ/ÇİFT panelinin altına girip tıklamayı engelliyordu). */
.ft-rack-btns { margin-left: auto; }
/* El toplamı paneli sadece GÖSTERGE: dokunuşu yutmamalı */
.ft-handtotal { pointer-events: none !important; }