/* ==========================================================================
   game.css — Tavla: tahta, taşlar, zarlar, oyuncu satırları.
   Boyutlar JS (game.js -> layout) tarafından ayarlanır:
     --ph  : nokta (üçgen) yüksekliği     --ckd : taş çapı     --barh : orta bar yüksekliği     --die : zar boyutu
   Renkler / dokular şablon değişkenlerinden gelir (bkz. templates.js).
   Tahta dikey (portre) çizilir: sol sütun 12→1 (ev altta), sağ sütun 13→24; iki sütunun ortasında yatay bar.
   ========================================================================== */

#screen-game {
    --ph: 36px;
    --ckd: 32px;
    --barh: 30px;
    --die: 54px;
    color: #fff;
    touch-action: manipulation;
}

/* ---------- Üst çubuk ---------- */
.g-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; flex: 0 0 auto; }
.g-info {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.36);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    font-size: 13px; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden;
}
.g-info b { color: #fff; }
.dotsep { opacity: 0.4; }
.g-tag { padding: 1px 7px; border-radius: 6px; background: #16a34a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }
.g-tag.ranked { background: #d97706; }
#screen-game .icon-btn { background: rgba(0, 0, 0, 0.4); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
#screen-game .icon-btn.is-off { opacity: 0.55; }

/* ---------- Oyuncu satırı ---------- */
.seat-row {
    position: relative; display: flex; align-items: center; gap: 10px;
    margin: 3px 10px; padding: 6px 12px 8px; border-radius: 16px; flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.25s;
}
.seat-row.is-turn { box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.9), 0 0 18px rgba(251, 191, 36, 0.4); }
.seat-row.is-auto { opacity: 0.85; }
.s-avatar { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; padding: 2px; background: rgba(255, 255, 255, 0.18); font-size: 17px; }
.seat-row.is-turn .s-avatar { animation: turnPulse 1.2s ease-in-out infinite; }
@keyframes turnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); } 50% { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0); } }
.s-avatar .s-side { position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; }
.s-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s-name { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.s-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, 0.75); min-height: 16px; }
.s-chip { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); font-weight: 800; white-space: nowrap; }
.s-score { display: flex; flex-direction: column; align-items: center; min-width: 52px; line-height: 1; }
.s-score b { font-size: 24px; font-weight: 900; color: #fde047; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.s-score small { font-size: 9px; opacity: 0.65; margin-top: 2px; letter-spacing: 0.08em; text-transform: uppercase; }
.turn-bar { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; opacity: 0; }
.seat-row.is-turn .turn-bar { opacity: 1; }
.turn-bar i { display: block; height: 100%; width: 100%; background: #fbbf24; }

/* ---------- Tahta ---------- */
.board-wrap { flex: 0 0 auto; display: flex; justify-content: center; padding: 2px 8px; }
.board-frame {
    position: relative;
    padding: 7px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--frame, #7a4a22), var(--frame-2, #4f2d14));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 2px var(--edge, #2a1608), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.board-surface {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 9px 1fr;
    height: calc(var(--ph) * 12 + var(--barh));
    border-radius: 7px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--felt, #1f5a3e), var(--felt-2, #164832));
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
}
.board-surface::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, var(--gloss, rgba(255, 255, 255, 0.08)) 0%, transparent 38%, transparent 62%, var(--gloss, rgba(255, 255, 255, 0.08)) 100%);
}
.spine { background: linear-gradient(90deg, var(--frame-2, #4f2d14), var(--frame, #7a4a22), var(--frame-2, #4f2d14)); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }

.col { display: grid; grid-template-rows: repeat(6, var(--ph)) var(--barh) repeat(6, var(--ph)); min-width: 0; }
.col .gap { pointer-events: none; }

.pnt { position: relative; min-width: 0; cursor: pointer; color: var(--ptc); }
.pnt.a { --ptc: var(--pt-a, #ead9ae); }
.pnt.b { --ptc: var(--pt-b, #7d3a1a); }
.pnt::before {
    content: ""; position: absolute; inset: 0; background: var(--ptc);
    clip-path: polygon(0 4%, 100% 50%, 0 96%);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
    transition: filter 0.2s;
}
.col-r .pnt::before { clip-path: polygon(100% 4%, 0 50%, 100% 96%); }
.pnt.dest::before { filter: brightness(1.35) saturate(1.2); }
.pnt.dest-hit::before { filter: brightness(1.2) sepia(0.6) hue-rotate(-30deg) saturate(2.5); }

.stack { position: absolute; inset: 0; }
.stack .ck { position: absolute; top: 50%; margin-top: calc(var(--ckd) / -2); z-index: calc(1 + var(--i, 0)); }
.col-l .stack .ck { left: calc(3px + var(--i, 0) * var(--step, 30px)); }
.col-r .stack .ck { right: calc(3px + var(--i, 0) * var(--step, 30px)); }
.ck-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--ckd) * 0.42); font-weight: 900; color: var(--ct, #222); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    pointer-events: none;
}
.ck.b .ck-count, .ck.b > .ck-count { --ct: #fff; }

/* ---------- Taş ---------- */
.ck {
    --c1: var(--ck-a-1, #f8ecd2); --c2: var(--ck-a-2, #d4bb88); --ring: var(--ck-a-ring, rgba(120, 90, 40, 0.55));
    position: relative; flex: 0 0 auto;
    width: var(--ckd); height: var(--ckd); border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, var(--ck-shine, rgba(255, 255, 255, 0.45)) 0, transparent 34%),
        radial-gradient(circle at 50% 55%, var(--c1), var(--c2));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 2px var(--ring), inset 0 -3px 5px rgba(0, 0, 0, 0.25);
}
.ck::after {
    content: ""; position: absolute; inset: 24%; border-radius: 50%;
    border: 2px solid var(--ring); opacity: 0.55;
}
.ck.b { --c1: var(--ck-b-1, #7a4824); --c2: var(--ck-b-2, #3b2010); --ring: var(--ck-b-ring, rgba(255, 210, 150, 0.28)); }
.ck.sel { transform: scale(1.14); box-shadow: 0 0 0 3px #fde047, 0 0 14px rgba(253, 224, 71, 0.9), 0 3px 6px rgba(0, 0, 0, 0.5); z-index: 40 !important; }
.ck.can { animation: ckCan 1.4s ease-in-out infinite; }
@keyframes ckCan { 0%, 100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 2px var(--ring), 0 0 0 2px rgba(253, 224, 71, 0.35); } 50% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 2px var(--ring), 0 0 0 4px rgba(253, 224, 71, 0.85); } }
.ck.ghost {
    background: rgba(253, 224, 71, 0.18); box-shadow: none; border: 2px dashed #fde047;
    animation: ghostPulse 0.9s ease-in-out infinite; pointer-events: none;
}
.ck.ghost::after { display: none; }
.ck.ghost.hit { background: rgba(239, 68, 68, 0.25); border-color: #ef4444; }
.ck.hint { box-shadow: 0 0 0 3px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.9); }
@keyframes ghostPulse { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }

/* ---------- Orta bar ---------- */
.bar-strip {
    position: absolute; left: 0; right: 0; top: calc(var(--ph) * 6); height: var(--barh); z-index: 5;
    display: flex; align-items: center; justify-content: space-around;
    background: linear-gradient(180deg, var(--frame-2, #4f2d14), var(--frame, #7a4a22), var(--frame-2, #4f2d14));
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.bar-slot { position: relative; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bar-slot .ck { margin: 0 calc(var(--ckd) * -0.28); width: calc(var(--barh) * 0.86); height: calc(var(--barh) * 0.86); }
.bar-slot .bar-n { position: absolute; right: 8px; top: 2px; font-size: 11px; font-weight: 900; color: #fde68a; text-shadow: 0 1px 2px #000; }
.bar-slot.me.movable::after { content: ""; position: absolute; inset: 2px 10%; border-radius: 99px; box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.8); animation: ghostPulse 1s infinite; pointer-events: none; }

/* ---------- Toplama tepsileri ---------- */
.tray {
    display: flex; align-items: center; gap: 3px; flex: 0 0 auto;
    margin: 2px 14px; padding: 0 10px; height: 30px; border-radius: 10px;
    background: linear-gradient(180deg, var(--frame-2, #4f2d14), var(--frame, #7a4a22));
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--edge, #2a1608);
    transition: box-shadow 0.2s;
}
.tray .off-pill { flex: 0 0 auto; width: 13px; height: 20px; border-radius: 4px; --c1: var(--ck-a-1); --c2: var(--ck-a-2); background: linear-gradient(90deg, var(--c2), var(--c1), var(--c2)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.tray .off-pill.b { --c1: var(--ck-b-1); --c2: var(--ck-b-2); }
.tray .tray-n { margin-left: auto; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.8); }
.tray.dest { box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px #fde047, 0 0 14px rgba(253, 224, 71, 0.8); cursor: pointer; }

/* ---------- Zar alanı ---------- */
.dice-area {
    flex: 0 0 auto; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 4px 12px;
}
.dice-set { display: flex; gap: 12px; align-items: center; min-width: calc(var(--die) * 2 + 12px); justify-content: center; }
.die {
    position: relative; width: var(--die); height: var(--die); border-radius: 20%;
    display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(var(--die) * 0.15);
    background: linear-gradient(145deg, var(--die-1, #fff), var(--die-2, #e6e6ee));
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 2px var(--die-edge, #b5b5c4), inset 0 -4px 6px rgba(0, 0, 0, 0.12), var(--die-glow, 0 0 0 transparent);
    transition: transform 0.25s, opacity 0.25s;
}
.die i { visibility: hidden; align-self: center; justify-self: center; width: 78%; height: 78%; border-radius: var(--pip-r, 50%); background: var(--pip, #1b1b1f); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }
.die.v1 i:nth-child(5),
.die.v2 i:nth-child(1), .die.v2 i:nth-child(9),
.die.v3 i:nth-child(1), .die.v3 i:nth-child(5), .die.v3 i:nth-child(9),
.die.v4 i:nth-child(1), .die.v4 i:nth-child(3), .die.v4 i:nth-child(7), .die.v4 i:nth-child(9),
.die.v5 i:nth-child(1), .die.v5 i:nth-child(3), .die.v5 i:nth-child(5), .die.v5 i:nth-child(7), .die.v5 i:nth-child(9),
.die.v6 i:nth-child(1), .die.v6 i:nth-child(3), .die.v6 i:nth-child(4), .die.v6 i:nth-child(6), .die.v6 i:nth-child(7), .die.v6 i:nth-child(9) { visibility: visible; }
.die.used { opacity: 0.35; transform: scale(0.86); }
.die.rolling { animation: dieTumble 0.62s cubic-bezier(0.3, 0.7, 0.4, 1); }
@keyframes dieTumble {
    0% { transform: translateY(-30px) rotate(0deg) scale(1.1); }
    30% { transform: translateY(6px) rotate(220deg) scale(1.02); }
    55% { transform: translateY(-14px) rotate(430deg); }
    78% { transform: translateY(2px) rotate(590deg); }
    100% { transform: translateY(0) rotate(720deg); }
}
.die.empty { opacity: 0.18; }
.dice-times { font-size: 15px; font-weight: 900; color: #fde047; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); min-width: 30px; }
.roll-btn { min-width: 150px; min-height: 56px; font-size: 18px; letter-spacing: 0.08em; animation: btnPulse 1.4s ease-in-out infinite; }
.dice-status { flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.4); }
.dice-status b { color: #fde047; }
.dice-status button { margin-left: 8px; }

/* Emote */
.emote-layer { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.emote-pop { position: absolute; font-size: 34px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); animation: emotePop 2s ease-out forwards; }
@keyframes emotePop { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); } 80% { opacity: 1; transform: translate(-50%, -26px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(1); } }

.table-msg {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
    max-width: 78%; padding: 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); font-size: 15px; font-weight: 800;
    text-align: center; opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.table-msg.is-on { opacity: 1; }

/* ---------- Görünüm ekranı önizlemeleri ---------- */
.preview-board { width: 100%; height: 100%; }
.preview-board .pv-frame { height: 100%; padding: 6px; background: linear-gradient(145deg, var(--frame), var(--frame-2)); box-shadow: inset 0 0 0 2px var(--edge); }
.preview-board .pv-felt { position: relative; height: 100%; display: flex; align-items: flex-end; background: linear-gradient(180deg, var(--felt), var(--felt-2)); overflow: hidden; }
.preview-board .pv-pt { flex: 1; height: 82%; clip-path: polygon(0 100%, 50% 0, 100% 100%); background: var(--pt-a); }
.preview-board .pv-pt.b { background: var(--pt-b); }
.preview-board .pv-ck { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; justify-content: center; gap: 4px; --ckd: 24px; }
.preview-dice { display: flex; gap: 10px; align-items: center; justify-content: center; height: 100%; --die: 44px; background: linear-gradient(160deg, #1d4b3a, #0c2a20); }
.preview-checkers { display: flex; gap: 14px; align-items: center; justify-content: center; height: 100%; --ckd: 38px; background: linear-gradient(160deg, var(--felt, #1f5a3e), var(--felt-2, #164832)); }

@media (max-height: 700px) { .s-avatar { width: 32px; height: 32px; } .dice-area { min-height: 66px; } }