@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Josefin+Sans:wght@300;400;600;700&display=swap');

/* BACKGAMMON — Complete responsive redesign */

/* ── Tokens ── */
:root {
    /* Board: scales with viewport, no min-width trap */
    --bw: min(760px, calc(100vw - 1rem));   /* board total width    */
    --bar: clamp(34px, 4.8vw, 52px);        /* bar column width     */
    /* half-height: scales with board width so proportions hold */
    --hh: clamp(158px, calc(var(--bw) * 0.36), 260px);

    --bg:          #090d13;
    --txt:         #f0e0c0;
    --accent:      #d4a030;
    --dim:         #907050;
    --soft:        rgba(212,160,48,.14);
    --shell:       linear-gradient(145deg,#5c3a16,#1a1006);
    --board-bg:    linear-gradient(160deg,#241405,#100a02);
    --board-brd:   #6d4820;
    --panel-bg:    linear-gradient(160deg,rgba(17,25,37,.98),rgba(8,13,21,.98));
    --panel-brd:   rgba(212,160,48,.22);
    --muted:       rgba(255,255,255,.05);
    --pt-red:      linear-gradient(180deg,#8f1c1c,#520c0c);
    --pt-grn:      linear-gradient(180deg,#1e5b40,#0d3020);
    --ck-w:        radial-gradient(circle at 35% 35%,#fff8e8,#f4e5bc,#d8c48e);
    --ck-b:        radial-gradient(circle at 35% 35%,#5a3415,#1a0a00,#2a1500);
    --shadow:      0 20px 50px rgba(0,0,0,.46);
}

    body {
    background: #F1F5F9; 
}
[data-theme="light"] {
    --bg:          #f4ede2;
    --txt:         #2a1a0a;
    --accent:      #b08020;
    --dim:         #6a5a40;
    
    --shell:       linear-gradient(145deg,#d7c19a,#9d7347);
    --board-bg:    linear-gradient(160deg,#ccb58e,#9f7652);
    
    --board-brd:   #8a6a40;
    --panel-bg:    linear-gradient(160deg,rgba(232,224,208,.98),rgba(208,200,184,.98));
    --panel-brd:   rgba(160,120,40,.24);
    --muted:       rgba(0,0,0,.04);
    --pt-red:      linear-gradient(180deg,#c07070,#a05050);
    --pt-grn:      linear-gradient(180deg,#70a080,#508060);
    --ck-w:        radial-gradient(circle at 35% 35%,#fff,#f0e8d0,#e0d8c0);
    --ck-b:        radial-gradient(circle at 35% 35%,#5a3a20,#3a2a10,#2a1a08);
    --shadow:      0 18px 40px rgba(79,53,26,.18);
}
/* ── App shell ── */
.tavla-page {
    min-height: 100vh;
    background: #ffffff;
}
[data-theme="dark"] .tavla-page {
    background: linear-gradient(180deg, rgba(12, 16, 22, 0.88), rgba(8, 11, 15, 0.7));
}
    
           [data-theme="dark"] body {
    background: #0D1425; /* veya istediğiniz koyu ton */
}
    
#tavla-app {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(1rem,3vw,1.5rem) clamp(.6rem,3vw,1.1rem) 3rem;
    font-family: 'Josefin Sans',sans-serif;
    color: var(--txt);
    background: #ffffff;
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}
#tavla-app::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(circle at top,rgba(212,160,48,.12),transparent 30%);
}
[data-theme="dark"] #tavla-app {
    background: transparent;
}

/* ── Header ── */
#tavla-app h1 {
    text-align:center;
    font-family:'Amiri',serif;
    font-size: clamp(1.9rem,5vw,3.2rem);
    font-weight:700; color:var(--accent);
    filter:drop-shadow(0 4px 16px rgba(212,160,48,.26));
    margin-bottom:.15rem; letter-spacing:.04em;
}
#tavla-app .sub {
    text-align:center; font-size:clamp(.72rem,2vw,.8rem);
    color:var(--dim); font-style:italic;
    margin-bottom:clamp(.8rem,2vw,1.2rem);
    letter-spacing:.18em; text-transform:uppercase;
}

/* ── Mode bar ── */
.tv-mode-bar {
    display:flex; gap:.5rem; justify-content:center;
    margin-bottom:.9rem; flex-wrap:wrap;
    position:relative; z-index:1;
}
.tv-mode-btn {
    padding: clamp(.4rem,1.2vw,.55rem) clamp(.8rem,2vw,1.2rem);
    border-radius:999px; border:1px solid var(--panel-brd);
    background:rgba(212,160,48,.06); color:var(--dim);
    font-family:'Josefin Sans',sans-serif;
    font-size: clamp(.64rem,1.8vw,.72rem);
    letter-spacing:.12em; cursor:pointer;
    transition:all .18s ease; text-transform:uppercase;
}
.tv-mode-btn.active {
    background:rgba(212,160,48,.18); border-color:var(--accent);
    color:var(--accent); transform:translateY(-1px);
}

/* ── Main container ── */
.tv-main {
    display:flex;
    flex-direction:column;
    gap:.9rem;
    position:relative;
    z-index:1;
    background: #ffffff;
    border-radius: clamp(24px, 3vw, 34px);
    padding: clamp(.85rem, 2.2vw, 1.3rem);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    overflow: hidden;
}
[data-theme="dark"] .tv-main {
    background: linear-gradient(155deg, rgba(29, 18, 8, 0.94), rgba(13, 8, 3, 0.98));
    box-shadow: 0 20px 48px rgba(0,0,0,.32);
    border-color: rgba(212,160,48,.16);
}
.tv-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, .08), transparent 22%),
        radial-gradient(circle at bottom right, rgba(148, 163, 184, .08), transparent 24%);
    pointer-events: none;
}

/* ── Panel rows ── */
.tv-panels-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

/* ── Panel card ── */
.tv-panel {
    background:var(--panel-bg); border:1px solid var(--panel-brd);
    border-radius:16px; padding: clamp(.65rem,2vw,.95rem);
    box-shadow:var(--shadow); backdrop-filter:blur(6px);
    flex: 1 1 220px; min-width:0; max-width:320px;
    box-sizing:border-box; overflow:hidden;
}
.tv-pt {
    font-size:clamp(.58rem,1.5vw,.64rem); letter-spacing:.2em;
    text-transform:uppercase; color:var(--accent);
    margin-bottom:.6rem;
    border-bottom:1px solid var(--panel-brd); padding-bottom:.4rem; font-weight:700;
}

/* ── Status ── */
.tv-status {
    background:var(--panel-bg); border:1px solid var(--panel-brd);
    border-radius:14px; padding: clamp(.55rem,1.5vw,.75rem) clamp(.7rem,2vw,.95rem);
    text-align:center; font-size:clamp(.76rem,2vw,.86rem);
    margin-bottom:.6rem;
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    min-height:2.2rem; box-shadow:var(--shadow);
}
.tv-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.tv-dot.w{background:#f0e0c0;box-shadow:0 0 4px #fff;}
.tv-dot.b{background:#1a0800;border:2px solid #7a5a20;}
.tv-status-sub {
    margin-top:.35rem; font-size:clamp(.6rem,1.6vw,.68rem);
    color:var(--dim); text-align:center; line-height:1.4;
}

/* ── Score ── */
.tv-score { text-align:center; font-size:clamp(1.1rem,3vw,1.4rem); font-weight:700; color:var(--accent); font-family:'Amiri',serif; }
.tv-score-lbl { font-size:clamp(.44rem,1.2vw,.52rem); letter-spacing:.14em; color:#7a5a20; text-align:center; text-transform:uppercase; }

/* ── Metrics grid ── */
.tv-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.tv-chip {
    padding: clamp(.45rem,1.5vw,.65rem) clamp(.5rem,1.5vw,.75rem);
    border-radius:12px; background:var(--muted);
    border:1px solid rgba(212,160,48,.1);
    min-width:0; overflow:hidden; box-sizing:border-box;
}
.tv-chip span {
    display:block; font-size:clamp(.5rem,1.3vw,.58rem);
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--dim); margin-bottom:.2rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tv-chip strong {
    display:block; font-size:clamp(.8rem,2vw,.96rem);
    color:var(--accent); overflow-wrap:break-word;
}

/* ── Board container ── */
.tv-board-container {
    display:flex; flex-direction:column; align-items:center; width:100%;
}

/* ── Board shell ── */
.tv-board-outer {
    background:var(--shell); border:1px solid rgba(255,255,255,.06);
    border-radius: clamp(16px,3vw,28px);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
    padding: clamp(8px,2vw,16px);
    overflow:hidden; position:relative;
    width: var(--bw); box-sizing:border-box;
}
.tv-board-outer::before {
    content:''; position:absolute;
    inset: clamp(6px,1vw,10px);
    border-radius: clamp(12px,2vw,22px);
    border:2px solid var(--board-brd); pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.tv-board-inner {
    background:#0d3020; border-radius: clamp(6px,1vw,10px);
    position:relative; overflow:hidden; width:100%;
}

/* ── Board halves: 6+bar+6 column grid ── */
.tv-half {
    display:grid;
    grid-template-columns: repeat(6,minmax(0,1fr)) var(--bar) repeat(6,minmax(0,1fr));
    height: var(--hh);
}
.tv-half.bottom { border-top:1px solid rgba(74,48,16,.3); }

/* ── Bar ── */
.tv-bar {
    background:linear-gradient(180deg,#1e1205,#100a02);
    border-left:2px solid rgba(74,48,16,.4);
    border-right:2px solid rgba(74,48,16,.4);
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px;
    cursor:pointer; padding:4px 0; position:relative;
    transition:background .15s;
}
.tv-bar:hover { background:rgba(212,160,48,.07); }
.tv-bar-lbl {
    font-size: clamp(.32rem,1vw,.44rem);
    letter-spacing:.14em; color:#5a4020;
    text-transform:uppercase; writing-mode:vertical-rl;
}

/* ── Point cell ── */
.tv-pt-cell {
    display:flex; flex-direction:column; align-items:center;
    position:relative; cursor:pointer; overflow:hidden;
    transition:filter .15s, transform .15s;
}
.tv-pt-cell:hover { filter:brightness(1.12); transform:scale(.992); }
.tv-pt-cell.top { justify-content:flex-start; padding-top:5px; }
.tv-pt-cell.bot { justify-content:flex-end; padding-bottom:5px; }
.tv-pt-cell.valid-target { outline:2px solid rgba(212,160,48,.6); outline-offset:-2px; }

.tv-tri { position:absolute; left:0; right:0; width:100%; height:80%; pointer-events:none; }
.tv-pt-cell.top .tv-tri { top:0; clip-path:polygon(50% 0%,0% 100%,100% 100%); }
.tv-pt-cell.bot .tv-tri { bottom:0; clip-path:polygon(0% 0%,100% 0%,50% 100%); }
.tv-pt-cell.red .tv-tri { background:var(--pt-red); }
.tv-pt-cell.grn .tv-tri { background:var(--pt-grn); }
.tv-pt-cell.bot.red .tv-tri { background:linear-gradient(0deg,#7a1515,#4a0a0a); }
.tv-pt-cell.bot.grn .tv-tri { background:linear-gradient(0deg,#1a5038,#0d3020); }

.tv-pt-num {
    position:absolute;
    font-size: clamp(.3rem,1vw,.44rem);
    font-weight:600; color:rgba(212,160,48,.4); z-index:3;
}
.tv-pt-cell.top .tv-pt-num { bottom:2px; }
.tv-pt-cell.bot .tv-pt-num { top:2px; }

/* ── Checker ── */
.tv-ck {
    width:82%; max-width: clamp(24px,6vw,46px);
    aspect-ratio:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size: clamp(.52rem,1.4vw,.68rem);
    font-weight:700; z-index:2; position:relative;
    margin: clamp(1px,.2vw,2px) 0; flex-shrink:0;
    box-shadow:0 3px 8px rgba(0,0,0,.46), inset 0 1px 1px rgba(255,255,255,.12);
    transition:transform .1s;
}
.tv-ck.w { background:var(--ck-w); border:2px solid #c0a040; color:#5a3a0a; }
.tv-ck.b { background:var(--ck-b); border:2px solid #5a3a00; color:#d4a030; }
.tv-ck.sel { box-shadow:0 0 0 3px var(--accent),0 2px 5px rgba(0,0,0,.5); transform:scale(1.08); }

/* ── Mid strip ── */
.tv-mid {
    background:linear-gradient(90deg,#0d3020,#0a2018,#0d3020);
    border-top:1px solid rgba(74,48,16,.3);
    border-bottom:1px solid rgba(74,48,16,.3);
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr)) var(--bar) repeat(6,minmax(0,1fr));
    padding: clamp(2px,.5vw,4px) 0;
}
.tv-mid-n {
    text-align:center; font-size:clamp(.3rem,.9vw,.44rem);
    color:rgba(212,160,48,.35);
    display:flex; align-items:center; justify-content:center;
}

/* ── Buttons ── */
.tv-btn {
    width:100%; padding: clamp(.55rem,1.5vw,.72rem) clamp(.6rem,2vw,.8rem);
    border-radius:12px; border:1px solid var(--panel-brd);
    background:rgba(212,160,48,.07); color:var(--accent);
    font-family:'Josefin Sans',sans-serif;
    font-size: clamp(.68rem,1.8vw,.76rem);
    letter-spacing:.1em; cursor:pointer;
    transition:all .18s ease; margin-bottom:.4rem;
    text-transform:uppercase; box-shadow:0 8px 16px rgba(0,0,0,.14);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    box-sizing:border-box; min-width:0;
}
.tv-btn:hover { background:rgba(212,160,48,.16); border-color:var(--accent); transform:translateY(-1px); }
.tv-btn:disabled { opacity:.35; cursor:default; transform:none; }
.tv-btn:last-child { margin-bottom:0; }
.tv-btn.roll {
    background:linear-gradient(135deg,var(--accent),#b08020);
    color:#1a0a00; border:none; font-weight:700;
    font-size: clamp(.78rem,2vw,.88rem);
    padding: clamp(.65rem,1.8vw,.85rem);
    box-shadow:0 10px 22px rgba(212,160,48,.28);
}
.tv-btn.roll:hover:not(:disabled) { background:linear-gradient(135deg,#e0b040,#c09030); }
.tv-btn.roll:disabled { background:#3a3020; color:#5a4a30; box-shadow:none; }
.tv-btn.danger { color:#c04040; border-color:rgba(192,64,64,.24); }
.tv-btn.danger:hover { background:rgba(192,64,64,.1); border-color:#c04040; }

/* ── Dice ── */
.tv-dice-area {
    display:flex; gap:.4rem; justify-content:center;
    flex-wrap:wrap; margin:.35rem 0;
    min-height:clamp(44px,7vw,56px); align-items:center;
}
.tv-die {
    width: clamp(36px,6vw,44px); height: clamp(36px,6vw,44px);
    background:linear-gradient(135deg,#f5e8c0,#d4c090);
    border-radius:9px; border:2px solid #c0a040;
    box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);
    display:grid; grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    padding: clamp(3px,.6vw,5px); gap:2px;
}
.tv-die.used { opacity:.3; transform:scale(.88); }
.tv-die.roll-anim { animation:tvRoll .35s ease; }
@keyframes tvRoll{0%{transform:rotate(0)scale(1)}30%{transform:rotate(-14deg)scale(1.1)}65%{transform:rotate(8deg)scale(.94)}100%{transform:rotate(0)scale(1)}}
.tv-pip { width: clamp(4px,.9vw,6px); height: clamp(4px,.9vw,6px); background:#1a0a00; border-radius:50%; margin:auto; }
.tv-pip.h { visibility:hidden; }

/* ── AI level ── */
.tv-ai-row {
    display:flex; align-items:center; gap:.4rem;
    margin-bottom:.5rem;
    font-size:clamp(.56rem,1.5vw,.62rem); color:var(--dim);
}
.tv-ai-row select {
    flex:1; background:var(--panel-bg); border:1px solid var(--panel-brd);
    color:var(--accent); border-radius:6px; padding:4px 6px;
    font-size:clamp(.56rem,1.5vw,.62rem);
    font-family:'Josefin Sans',sans-serif; cursor:pointer;
}

/* ── Log ── */
.tv-log {
    max-height: clamp(120px,22vh,180px);
    overflow-y:auto; font-size:clamp(.6rem,1.6vw,.66rem);
    color:#7a5a20; scrollbar-width:thin;
    scrollbar-color:var(--accent) transparent;
}
.tv-log::-webkit-scrollbar{width:3px;}
.tv-log::-webkit-scrollbar-thumb{background:var(--accent);}
.tv-log-e {
    padding: clamp(.35rem,1vw,.45rem) .5rem;
    border-bottom:1px solid rgba(212,160,48,.06);
    background:var(--muted); border-radius:8px; margin-bottom:.25rem;
}
.tv-log-e.g { color:#70c080; }
.tv-log-e.w { color:#d08040; }
.tv-log-empty { padding:.9rem .4rem; text-align:center; color:var(--dim); font-size:clamp(.62rem,1.6vw,.7rem); }

/* ── Result overlay ── */
.tv-result-overlay {
    position:fixed;inset:0;background:rgba(0,0,0,.87);
    display:flex;align-items:center;justify-content:center;
    z-index:2000;backdrop-filter:blur(6px);animation:tvFade .3s ease;
}
@keyframes tvFade{from{opacity:0}to{opacity:1}}
.tv-result-box {
    background:var(--panel-bg);border:2px solid var(--accent);
    border-radius:22px;padding:clamp(1.4rem,4vw,2rem) clamp(1.6rem,5vw,2.4rem);
    text-align:center;
    box-shadow:0 0 60px rgba(212,160,48,.18),0 20px 60px rgba(0,0,0,.9);
    animation:tvPop .25s ease; max-width: min(320px,90vw);
}
@keyframes tvPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.tv-result-icon { font-size:2.4rem; margin-bottom:.35rem; }
.tv-result-title { font-family:'Amiri',serif; font-size:clamp(1.1rem,3vw,1.3rem); font-weight:700; color:var(--accent); margin-bottom:.3rem; }
.tv-result-sub { color:var(--dim); font-size:clamp(.74rem,2vw,.82rem); font-style:italic; margin-bottom:.9rem; }

/* ── Thinking dots ── */
.tv-thinking span { display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;margin:0 1px;animation:tvThink 1.2s infinite; }
.tv-thinking span:nth-child(2){animation-delay:.2s;}
.tv-thinking span:nth-child(3){animation-delay:.4s;}
@keyframes tvThink{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}

/* ═══════════════════════
   RESPONSIVE
   ═══════════════════════ */

/* Tablet */
@media(max-width:860px) {
    :root {
        --bar: clamp(34px,4.8vw,44px);
        --hh: clamp(158px,calc(var(--bw)*0.37),230px);
    }
    .tv-panel { max-width:260px; }
}
@media(min-width:641px) and (max-width:1100px) {
    :root {
        --bw: min(700px, calc(100vw - 2.2rem));
        --bar: clamp(30px, 4vw, 42px);
        --hh: clamp(150px, calc(var(--bw) * 0.36), 220px);
    }
    .tv-main {
        padding: .85rem;
        gap: .8rem;
    }
    .tv-panels-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
        justify-content: stretch;
    }
    .tv-panel {
        max-width: 100%;
    }
    .tv-panels-row .tv-panel:last-child {
        grid-column: 1 / -1;
    }
    .tv-board-outer {
        width: 100%;
        max-width: var(--bw);
        padding: 8px;
    }
}

/* Mobile */
@media(max-width:640px) {
    :root {
        --bw: calc(100vw - 2rem);
        --bar: clamp(30px,8vw,38px);
        --hh: clamp(150px,calc(var(--bw)*0.4),200px);
    }

    #tavla-app {
        padding-inline: .45rem;
    }
    .tv-main {
        padding: .7rem;
        gap: .7rem;
    }

    /* Panels: single column to remove empty gaps */
    .tv-panels-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: .55rem;
    }
    .tv-panel { flex:unset; max-width:100%; }
    .tv-panel:has(#tv-dice),
    .tv-panel:has(#tv-ai-row),
    .tv-panel:has(#tv-log) {
        max-width: 100%;
    }
    .tv-panel:has(#tv-ai-row) > :not(.tv-pt) {
        display:flex;
        flex-direction:column;
        gap:.45rem;
        align-items:stretch;
    }
    .tv-panel:has(#tv-ai-row) .tv-btn {
        width:100%;
        margin-bottom:0;
    }
    .tv-dice-area { margin:.2rem 0 .45rem; }

    /* Board */
    .tv-board-container { padding-inline: 0; }
    .tv-board-outer { width: 100%; padding: 6px; border-radius:16px; }
    .tv-board-outer::before { inset:5px; border-radius:12px; }
    .tv-board-inner { border-radius:8px; }

    /* Checkers */
    .tv-ck { border-width:1.5px; }
    .tv-pt-cell.top { padding-top:3px; }
    .tv-pt-cell.bot { padding-bottom:3px; }

    /* Buttons larger tap area */
    .tv-btn { padding:.62rem .7rem; font-size:.74rem; border-radius:14px; }
    .tv-btn.roll { padding:.75rem; font-size:.84rem; }
}

/* Very small (< 380px) */
@media(max-width:380px) {
    :root {
        --bw: calc(100vw - 1.2rem);
    }
}