@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Inter:wght@400;500;600&display=swap');

/* CHESS — Complete responsive redesign */

:root {
    --bsz: min(500px, calc(100vw - 132px));
    --bpad: 5px;
    --bgap: 2px;
    --coord: 20px;

    --surface:   linear-gradient(145deg,#6a472d,#2a180d);
    --panel-bg:  linear-gradient(160deg,rgba(43,28,18,.97),rgba(26,15,8,.97));
    --border:    #8c6339;
    --sq-lt:     #f3dfbd;
    --sq-dk:     #a77444;
    --sq-rim:    rgba(20,12,6,.88);
    --txt:       #24160a;
    --accent:    #f5d060;
    --gold:      rgba(212,160,23,.46);
    --btn-bg:    linear-gradient(180deg,#3b2618,#24150c);
    --btn-txt:   #f0c968;
    --btn-act:   linear-gradient(180deg,#e2b748,#b8860b);
    --btn-act-c: #1a0f05;
    --shadow:    0 20px 48px rgba(15,7,2,.26);
}
[data-theme="dark"] {
    --bg:        #140c07;
    --sq-lt:     #ceb07b;
    --sq-dk:     #8d5e34;
    --sq-rim:    rgba(8,5,3,.94);
    --txt:       #f5d060;
    --surface:   linear-gradient(145deg,#3e2b1f,#120b08);
    --panel-bg:  linear-gradient(160deg,rgba(28,18,11,.98),rgba(14,8,4,.98));
    --border:    #5d4028;
    --shadow:    0 24px 70px rgba(0,0,0,.52);
}

#chess-app {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(1rem,3vw,1.6rem) clamp(.8rem,3vw,1.3rem) 3rem;
    font-family: 'Inter',sans-serif;
    background: #ffffff;
    color: var(--txt);
    min-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}
[data-theme="dark"] #chess-app {
    background: linear-gradient(180deg, rgba(18,12,7,.9), rgba(9,6,4,.72));
}
        [data-theme="dark"] body {
    background: #0D1425; /* veya istediğiniz koyu ton */
}
    
#chess-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(212,160,23,.1), transparent 28%);
    pointer-events: none;
}
.ch-layout {
    background: #ffffff;
    border-radius: clamp(24px, 3vw, 34px);
    padding: clamp(.9rem, 2.4vw, 1.4rem);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .ch-layout {
    background: linear-gradient(160deg, rgba(35, 22, 12, 0.96), rgba(19, 11, 6, 0.94));
    box-shadow: 0 20px 48px rgba(0,0,0,.32);
    border-color: rgba(212,160,23,.18);
}
.ch-layout::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;
}

.ch-title {
    text-align: center;
    font-family: 'Cinzel',serif;
    font-size: clamp(1.8rem,5vw,3.2rem);
    color: #8d5d15;
    margin: 0 0 .25rem;
    letter-spacing: .06em;
}
.ch-subtitle {
    text-align: center;
    font-size: clamp(.72rem,2vw,.88rem);
    color: rgba(212,168,67,.88);
    margin: 0 0 clamp(.9rem,3vw,1.5rem);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Layout */
.ch-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .9rem;
}
@media(min-width:1180px) {
    .ch-layout { flex-direction: row; align-items: flex-start; gap: 1.2rem; }
    .ch-side { flex: 0 0 240px; }
}
@media(min-width:960px) and (max-width:1179px) {
    :root {
        --bsz: min(540px, calc(100vw - 340px));
    }
    .ch-layout {
        display: grid;
        grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
        grid-template-areas:
            "left board"
            "right right";
        align-items: start;
        gap: 1rem;
    }
    .ch-side:first-of-type {
        grid-area: left;
    }
    .ch-board-wrap {
        grid-area: board;
        justify-self: center;
    }
    .ch-side:last-of-type {
        grid-area: right;
        display: block;
        width: 100%;
    }
}

/* Board shell */
.ch-board-wrap {
    background: var(--surface);
    padding: clamp(10px,2.2vw,16px);
    border-radius: clamp(14px,3vw,22px);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    display: inline-block;
    line-height: 0;
    align-self: center;
    max-width: 100%;
    overflow: hidden;
}
.ch-board-wrap::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: clamp(10px,2vw,16px);
    border: 2px solid var(--border);
    pointer-events: none;
    z-index: 0;
}

   
    
/* Coordinate grid — ranks LEFT of board, files BELOW board */
.ch-coord-area {
    display: inline-grid;
    grid-template-columns: var(--coord) var(--bsz);
    grid-template-rows: var(--bsz) var(--coord);
    gap: 4px 5px;
    max-width: 100%;
}
.ch-ranks {
    grid-row: 1; grid-column: 1;
    display: grid;
    grid-template-rows: repeat(8,1fr);
    padding: var(--bpad) 2px var(--bpad) 0;
    gap: var(--bgap);
    box-sizing: border-box;
    font-size: clamp(.54rem,1.5vw,.8rem);
    color: #e3bd66;
    font-weight: 700;
    user-select: none;
    line-height: 1;
}
.ch-ranks span { display:flex; align-items:center; justify-content:flex-end; }
.ch-board {
    grid-row: 1; grid-column: 2;
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(8,1fr);
    gap: var(--bgap);
    width: var(--bsz); height: var(--bsz);
    padding: var(--bpad);
    background: var(--sq-rim);
    border-radius: clamp(8px,1.5vw,13px);
    box-sizing: border-box;
    box-shadow: inset 0 10px 22px rgba(255,255,255,.03), inset 0 -14px 22px rgba(0,0,0,.26);
    position: relative; z-index: 1;
}
.ch-files {
    grid-row: 2; grid-column: 2;
    display: grid;
    grid-template-columns: repeat(8,1fr);
    padding: 2px var(--bpad) 0;
    gap: var(--bgap);
    box-sizing: border-box;
    font-size: clamp(.54rem,1.5vw,.8rem);
    color: #e3bd66;
    font-weight: 700;
    user-select: none;
    line-height: 1;
}
.ch-files span { display:flex; align-items:center; justify-content:center; }

/* Squares */
.ch-sq {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative;
    border-radius: clamp(3px,.6vw,6px);
    overflow: hidden;
    transition: transform .12s ease, filter .12s ease;
}
.ch-sq.light { background: linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,0)),var(--sq-lt); }
.ch-sq.dark  { background: linear-gradient(135deg,rgba(0,0,0,.07),rgba(0,0,0,0)),var(--sq-dk); }
.ch-sq:hover { transform:scale(.982); filter:brightness(1.06); }
.ch-sq.sel {
    box-shadow: inset 0 0 0 3px #ffeb3b, 0 0 14px rgba(255,235,59,.28);
    background: rgba(255,235,59,.36) !important;
}
.ch-sq.movable::after {
    content: ''; position: absolute;
    width: 28%; height: 28%;
    background: rgba(72,214,117,.84); border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(72,214,117,.14);
    pointer-events: none;
}
.ch-sq.movable.has-piece::after {
    width: 80%; height: 80%;
    background: transparent;
    border: 3px solid rgba(72,214,117,.96);
}

/* Pieces */
.white-p, .black-p {
    display: flex; align-items: center; justify-content: center;
    width: 88%; height: 88%;
    pointer-events: none;
    transition: transform .14s ease;
}
.ch-sq:hover .white-p,
.ch-sq:hover .black-p { transform: scale(1.09); }

/* Side panels */
.ch-side {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.ch-actions {
    display: grid;
    gap: .55rem;
}
@media(max-width:959px) {
    .ch-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        align-items: start;
    }
    .ch-side > :first-child { grid-column: 1 / -1; }
    .ch-side:last-child { grid-template-columns: 1fr; }
    .ch-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }
    .ch-actions .ch-btn:last-child {
        grid-column: 1 / -1;
    }
}
@media(max-width:400px) {
    .ch-side { grid-template-columns: 1fr; }
    .ch-side > :first-child { grid-column: 1; }
    .ch-actions { grid-template-columns: 1fr; }
    .ch-actions .ch-btn:last-child { grid-column: 1; }
}
@media(min-width:960px) {
    .ch-side { display: flex; flex-direction: column; gap: .7rem; }
}
@media(max-width:959px) {
    .ch-layout {
        padding: .85rem;
        border-radius: 24px;
    }
}
@media(max-width:640px) {
    :root {
        --coord: 14px;
        --bpad: 3px;
        --bgap: 1px;
        --bsz: calc(100vw - 96px);
    }
    #chess-app {
        padding-inline: 4px;
    }
    .ch-side {
        grid-template-columns: 1fr;
        gap: .55rem;
    }
    .ch-side > :first-child {
        grid-column: 1;
    }
    .ch-layout {
        padding: .55rem;
        gap: .65rem;
    }
    .ch-board-wrap {
        padding: 6px;
        width: fit-content;
        max-width: calc(100vw - 24px);
    }
    .ch-coord-area {
        width: auto;
        max-width: 100%;
        justify-content: center;
        gap: 2px 3px;
    }
    .ch-actions {
        grid-template-columns: 1fr;
        gap: .45rem;
    }
    .ch-actions .ch-btn,
    .ch-actions .ch-btn:last-child {
        grid-column: 1;
    }
    .ch-btn {
        min-height: 46px;
    }
    .ch-panel {
        padding: .75rem;
    }
    .ch-ranks,
    .ch-files {
        font-size: .58rem;
    }
}

/* Panel card */
.ch-panel {
    background: var(--panel-bg);
    padding: clamp(.65rem,2vw,.95rem);
    border-radius: 15px;
    border: 1px solid var(--gold);
    color: var(--accent);
    box-shadow: var(--shadow);
    min-width: 0;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
}
.ch-panel-title {
    font-size: clamp(.6rem,1.5vw,.72rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(212,168,67,.82);
    margin-bottom: .55rem;
}
.ch-status-main {
    font-family: 'Cinzel',serif;
    font-size: clamp(.88rem,2.4vw,1.2rem);
    letter-spacing: .04em;
    display: block;
    line-height: 1.3;
}
.ch-status-sub {
    margin-top: .45rem;
    font-size: clamp(.62rem,1.7vw,.75rem);
    color: rgba(245,208,96,.76);
    line-height: 1.4;
}

/* Buttons */
.ch-btn {
    width: 100%;
    padding: clamp(.52rem,1.5vw,.72rem) clamp(.6rem,2vw,.9rem);
    background: var(--btn-bg);
    color: var(--btn-txt);
    border: 1px solid var(--gold);
    border-radius: 11px;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(.72rem,1.8vw,.86rem);
    font-family: inherit;
    transition: all .16s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    min-width: 0;
}
.ch-btn:hover { background: var(--btn-act); color: var(--btn-act-c); transform: translateY(-1px); }
.ch-btn.active { background: var(--btn-act); color: var(--btn-act-c); }

/* Match overview chips */
.ch-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}
.ch-chip {
    padding: clamp(.45rem,1.5vw,.7rem) clamp(.5rem,1.5vw,.8rem);
    border-radius: 11px;
    border: 1px solid rgba(212,160,23,.14);
    background: rgba(255,255,255,.04);
    min-width: 0; overflow: hidden;
    box-sizing: border-box;
}
.ch-chip span {
    display: block;
    font-size: clamp(.54rem,1.4vw,.67rem);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(212,168,67,.7);
    margin-bottom: 3px;
    white-space: nowrap;
}
.ch-chip strong {
    display: block;
    font-size: clamp(.78rem,2vw,.9rem);
    color: var(--accent);
    overflow-wrap: break-word;
}

/* Move history */
#history-list {
    height: clamp(140px,28vh,270px);
    overflow-y: auto;
    background: rgba(0,0,0,.2);
    padding: 6px;
    border-radius: 11px;
    border: 1px solid rgba(212,160,23,.1);
    scrollbar-width: thin;
    scrollbar-color: var(--gold) transparent;
}
#history-list::-webkit-scrollbar { width: 3px; }
#history-list::-webkit-scrollbar-thumb { background: var(--gold); }
.history-empty {
    text-align: center;
    color: rgba(245,208,96,.46);
    padding: 1.4rem .5rem;
    font-size: clamp(.68rem,1.8vw,.82rem);
}
.history-row {
    display: grid;
    grid-template-columns: 28px 1fr 1fr;
    gap: 6px;
    align-items: center;
    padding: 5px 7px;
    border-radius: 7px;
    margin-bottom: 4px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.04);
}
.history-row:last-child {
    box-shadow: inset 0 0 0 1px rgba(212,160,23,.26);
    background: rgba(212,160,23,.07);
}
.history-no { font-size: clamp(.56rem,1.4vw,.7rem); color: rgba(212,168,67,.74); font-weight: 700; }
.history-move {
    padding: 3px 6px; border-radius: 6px;
    background: rgba(0,0,0,.18); color: #fff1bf;
    font-family: ui-monospace,monospace;
    font-size: clamp(.62rem,1.6vw,.78rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}

/* States */
.game-over { background:#b71c1c !important; color:#fff !important; animation:pulse 1.5s infinite; }
.winner    { background:#1b5e20 !important; color:#fff !important; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.72} }
.disabled  { opacity:.4; pointer-events:none; }