/* =====================================================================
   Chess Tricks & Traps  |  Author: Laxman  |  v8.2
   =====================================================================

   RESPONSIVE APPROACH — CSS Grid + vmin-based square size
   ─────────────────────────────────────────────────────────
   The board is a CSS Grid <div>, NOT a <table>.
   Themes cannot override div width/height the way they kill <td> sizing.

   Square size uses min(vw-based, px-cap):
     --sq: clamp(MIN, FLUID, MAX)
     FLUID = (100vw - page-padding - rank-col - border) / 8

   This auto-scales on every screen without JS or ResizeObserver.
   The board is centred and never overflows.

   THEME ISOLATION
   ───────────────
   All rules scoped under .ctt-game-wrap.
   Hard reset on table/td/button/span to kill theme overrides.
   Sizes in px or vw — immune to theme font-size hacks.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Scoped reset ────────────────────────────────────────────────────── */
.ctt-game-wrap,
.ctt-game-wrap *,
.ctt-game-wrap *::before,
.ctt-game-wrap *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* Kill theme table resets — these are the #1 cause of board breakage */
.ctt-game-wrap table    { width: auto; max-width: none; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; background: transparent; }
.ctt-game-wrap table td,
.ctt-game-wrap table th { padding: 0; border: none; vertical-align: middle; line-height: 1; font-weight: inherit; background: none; }
.ctt-game-wrap span     { display: inline; margin: 0; padding: 0; border: none; }
.ctt-game-wrap a        { color: inherit; text-decoration: none; }
.ctt-game-wrap button   { -webkit-appearance: none; appearance: none; font-family: inherit; }
.ctt-game-wrap div      { margin: 0; padding: 0; }

/* ── Outer wrapper ───────────────────────────────────────────────────── */
.ctt-game-wrap {
    display:     block;
    width:       100%;
    outline:     none;
    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
    font-size:   14px;
    line-height: 1.5;
    color:       #222;
    overflow:    hidden;
}

/* ── Collection ──────────────────────────────────────────────────────── */
.ctt-collection                 { margin: 0; padding: 0; }
.ctt-collection-item            { margin: 0 0 40px !important; padding-bottom: 36px !important; border-bottom: 1px solid #e2e6ed; }
.ctt-collection-item:last-child { border-bottom: none; }

.ctt-game-label {
    display:     block;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size:   1.1rem;
    font-weight: 600;
    color:       #111;
    margin:      0 0 14px !important;
    padding:     0 !important;
    line-height: 1.4;
}

/* ── Board + panel row ───────────────────────────────────────────────── */
.ctt-board-row {
    display:     flex;
    align-items: flex-start;
    gap:         22px;
    flex-wrap:   wrap;
}
.ctt-board-cell {
    flex-shrink: 0;
    /* Prevent board from overflowing parent on narrow screens */
    max-width:   100%;
    overflow:    visible;
}

/* ══════════════════════════════════════════════════════════════════════
   BOARD OUTER  — CSS custom property --sq drives all sizing
   ══════════════════════════════════════════════════════════════════════
   --sq  = one square's side length in px
   --rcw = rank-column width in px
   --bdr = board border total in px (5px × 2 sides)

   clamp(MIN, PREFERRED, MAX) explanation:
     • On wide screens: MAX (52px) — standard chess viewer size
     • On narrow screens: PREFERRED scales down with viewport
     • Never below MIN (32px) — pieces still readable

   PREFERRED formula:
     (100vw - 48px margins - 28px rank-col - 10px border) / 8
     = (100vw - 86px) / 8
     ≈ 12.5vw - 10.75px
   We use 11vw as a slightly conservative safe value.
   ══════════════════════════════════════════════════════════════════════ */

.ctt-board-outer {
    /* 1. Width-based: (100vw - labels - margins) / 8 
       2. Height-based: (100vh - nav-buttons - labels - margins) / 8
       The min() function picks the smaller one, ensuring no overflow.
    */
    --sq-vw: calc((100vw - 92px) / 8);
    --sq-vh: calc((100vh - 120px) / 8); /* 160px accounts for nav row + labels + padding */
    
    --sq: clamp(30px, min(var(--sq-vw), var(--sq-vh)), 52px);
    
    --rcw: 15px;
    --bdr: 10px;
    display: inline-block;
    line-height: 1;
}

/* Inner row: rank labels + board */
.ctt-board-inner-row {
    display:     flex;
    align-items: flex-start;
    gap:         0;
}

/* ── Rank numbers — left, outside the border ── */
.ctt-rank-col {
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
    width:          var(--rcw);
    gap:            0;
}

.ctt-rl {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    width:           var(--rcw);
    height:          var(--sq);
    padding-right:   5px !important;
    font-family:     'JetBrains Mono', monospace;
    font-size:       clamp(9px, 1.6vw, 13px);
    font-weight:     700;
    color:           #5a3a10;
    line-height:     1;
    user-select:     none;
    border:          none !important;
    background:      transparent !important;
    flex-shrink:     0;
}

/* ── Board wrap: holds grid + file labels ── */
.ctt-board-wrap {
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
}

/* ══════════════════════════════════════════════════════════════════════
   CSS GRID BOARD — 8×8 divs, theme-proof
   ══════════════════════════════════════════════════════════════════════
   Uses CSS Grid with repeat(8, var(--sq)) so every cell is exactly
   --sq × --sq. No table, no td, no theme interference.
   ══════════════════════════════════════════════════════════════════════ */

.ctt-grid {
    display:               grid;
    grid-template-columns: repeat(8, var(--sq));
    grid-template-rows:    repeat(8, var(--sq));
    border:                5px solid #b07840;
    box-shadow:            0 4px 24px rgba(120,70,20,.2), 0 1px 4px rgba(0,0,0,.1);
    line-height:           0; /* prevent font metrics gap under grid */
    font-size:             0;
    /* Exact board dimensions — grid + border */
    width:                 calc(var(--sq) * 8 + var(--bdr));
    height:                calc(var(--sq) * 8 + var(--bdr));
    flex-shrink:           0;
    overflow:              hidden; /* clip custom images at board edge */
}

/* ── Each square — a grid cell div ── */
.ctt-sq {
    width:           var(--sq);
    height:          var(--sq);
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    /* overflow:visible needed for the ▼ arrow ::after that sits above square */
    overflow:        visible;
    /* line-height:0 prevents font metrics from shifting unicode pieces */
    line-height:     0;
    font-size:       0; /* reset — actual size set on .ctt-p child */
    /* Hard-force size — prevent ANY theme from touching these */
    min-width:       var(--sq)  !important;
    min-height:      var(--sq)  !important;
    max-width:       var(--sq)  !important;
    max-height:      var(--sq)  !important;
    flex-shrink:     0          !important;
    padding:         0          !important;
    border:          none       !important;
    margin:          0          !important;
    box-sizing:      border-box !important;
}

.ctt-sq-l { background: #e8cfa0; }
.ctt-sq-d { background: #c0894e; }
.ctt-sq-from { background: rgba(255,220,50,.72) !important; }
.ctt-sq-to   { background: rgba(255,180,20,.82) !important; }

/* ── Pieces — scale with square ── */
.ctt-p {
    font-size:           calc(var(--sq) * 0.72);
    line-height:         1;
    display:             block;
    /* No explicit width/height — .ctt-sq is already a flex container
       that centres its children. Explicit sizing on .ctt-p caused
       the character to sit offset from true centre.                  */
    user-select:         none;
    -webkit-user-select: none;
    pointer-events:      none;
    /* Prevent any inherited margin from shifting the character */
    margin:              0 !important;
    padding:             0 !important;
}

.ctt-p-w {
    color:               #fff;
    -webkit-text-stroke: clamp(0.8px, 0.15vw, 0.3px) #fff;
    text-shadow:         0 1px 0 #777, 0 2px 5px rgba(0,0,0,.38);
}
.ctt-p-b {
    color:       #1c1c1c;
    text-shadow: 0 1px 4px rgba(0,0,0,.22);
}

/* Custom image piece */
.ctt-p img.ctt-piece-img {
    display:     block;
    width:       86%;
    height:      86%;
    object-fit:  contain;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* ── File letters — below grid ── */
.ctt-file-row {
    display:    flex;
    width:      calc(var(--sq) * 8 + var(--bdr));
    margin-top: 5px !important;
    flex-shrink: 0;
}

.ctt-fl {
    width:       var(--sq);
    flex-shrink: 0;
    text-align:  center;
    font-family: 'JetBrains Mono', monospace;
    font-size:   clamp(9px, 1.6vw, 13px);
    font-weight: 700;
    color:       #5a3a10;
    line-height: 1;
    user-select: none;
    background:  transparent !important;
    border:      none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RIGHT PANEL
   ══════════════════════════════════════════════════════════════════════ */
.ctt-panel {
    flex:           1;
    min-width:      180px;
    max-width:      270px;
    display:        flex;
    flex-direction: column;
    font-family:    'JetBrains Mono', 'Courier New', monospace;
    font-size:      13px;
}

@media (max-height: 500px) and (orientation: landscape) {
    .ctt-board-row {
        flex-wrap: nowrap !important; /* Keep panel next to board if height is small */
        align-items: stretch;
    }
    
    .ctt-panel {
        max-height: calc(var(--sq) * 8 + 60px); /* Match panel height to board */
    }

    .ctt-mvlist {
        max-height: 120px; /* Shrink move list so it doesn't scroll forever */
    }
    
    .ctt-game-label {
        font-size: 0.9rem; /* Smaller title to save vertical space */
        margin-bottom: 8px !important;
    }
    .ctt-panel {
    flex: 1;
    min-width: 520px !important;
    max-width: 270px;
    display: flex;
    flex-direction: row;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    flex-wrap: wrap;
    align-content: stretch;
}

.ctt-game-wra
}
/* Panel drops below board on narrow screens */
@media (max-width: 900px) {
    .ctt-board-row { flex-direction: column !important; gap: 14px; }
    .ctt-panel     { max-width: 100% !important; width: 100% !important; min-width: 0 !important; }
}

.ctt-pp-wrap { border: 1px solid #ccc; border-radius: 4px 4px 0 0; overflow: hidden; }

.ctt-pp {
    display:    flex !important;
    align-items:center !important;
    gap:        8px !important;
    padding:    9px 12px !important;
    transition: background .2s;
}
.ctt-pp-w { background: #fff    !important; border-bottom: 1px solid #ddd !important; color: #1a1a1a; }
.ctt-pp-b { background: #f4f5f7 !important; color: #1a1a1a; }

.ctt-pp-active                  { background: #eef4ff !important; border-left: 3px solid #1a4fa8 !important; }
.ctt-pp-w.ctt-pp-active,
.ctt-pp-b.ctt-pp-active         { padding-left: 9px !important; }

.ctt-dot {
    display:       inline-block !important;
    width:         14px !important;
    height:        14px !important;
    border-radius: 2px;
    border:        1.5px solid #aaa !important;
    flex-shrink:   0;
    transition:    box-shadow .2s;
}
.ctt-dot-w { background: #fff    !important; border-color: #888 !important; }
.ctt-dot-b { background: #1a1a1a !important; border-color: #000 !important; }
.ctt-pp-active .ctt-dot-w,
.ctt-pp-active .ctt-dot-b { box-shadow: 0 0 0 3px rgba(26,79,168,.25); border-color: #1a4fa8 !important; }

.ctt-pname { font-weight: 500; font-size: 12.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctt-turn-badge { font-size: 10px; font-weight: 600; color: #1a4fa8; background: #dce8ff; border-radius: 10px; padding: 2px 7px; white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; }

.ctt-ev-info { padding: 7px 12px !important; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: #fafbfc !important; font-size: 11.5px; color: #555; line-height: 1.65; }
.ctt-ev-name { font-weight: 600; color: #333; }
.ctt-ev-loc  { color: #777; }

.ctt-mvlist {
    border: 1px solid #ccc !important; border-top: none !important; border-radius: 0 0 4px 4px;
    padding: 8px 10px 10px !important; max-height: 260px; min-height: 60px;
    overflow-y: auto; background: #fff !important; font-size: 13px; line-height: 1.9;
    scrollbar-width: thin; scrollbar-color: #bcc8db #f0f2f5;
}
.ctt-mvlist::-webkit-scrollbar       { width: 5px; }
.ctt-mvlist::-webkit-scrollbar-track { background: #f0f2f5; }
.ctt-mvlist::-webkit-scrollbar-thumb { background: #bcc8db; border-radius: 3px; }

.ctt-mn  { color: #aaa; font-size: 11px; margin-right: 1px; user-select: none; }
.ctt-mv  { display: inline-block !important; padding: 1px 4px !important; border-radius: 3px; cursor: pointer; color: #222; font-weight: 500; transition: background .1s, color .1s; margin-right: 1px; }
.ctt-mv:hover { background: #ddeaff; color: #1a4fa8; }
.ctt-m-on { background: #1a4fa8 !important; color: #fff !important; border-radius: 3px; padding: 1px 6px !important; }
.ctt-m-on:hover { background: #163e8a !important; }
.ctt-result { display: inline-block !important; margin-left: 6px !important; font-weight: 700; font-size: 12px; color: #444; }

/* ══════════════════════════════════════════════════════════════════════
   NAV BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.ctt-nav-row {
    display:       flex !important;
    align-items:   center !important;
    gap:           5px;
    margin-top:    12px !important;
    /* Width = exact board outer total:
       rank-col(22px) + grid(8×--sq) + border(10px)
       This is identical to: .ctt-board-outer's natural width */
    width:         calc(var(--rcw) + var(--sq) * 8 + var(--bdr));
    /* On very narrow screens, never overflow */
    max-width:     100%;
    background:    #e4e4e4;
    border-radius: 12px;
    padding:       7px 10px !important;
}

.ctt-nb {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    line-height:     1;
    width:           40px !important;
    height:          40px !important;
    padding:         0 !important;
    flex-shrink:     0;
    background:      #2e3450 !important;
    color:           #c8d0e8 !important;
    border:          1.5px solid #3d4570 !important;
    border-radius:   8px !important;
    cursor:          pointer;
    outline:         none;
    transition:      background .14s, color .12s, border-color .14s, transform .1s, box-shadow .15s;
    -webkit-appearance: none;
    appearance:      none;
    font-family:     inherit;
}
.ctt-nb svg          { display: block !important; margin: auto !important; flex-shrink: 0; overflow: visible; }
.ctt-nb:hover        { background: #3a4e96 !important; color: #fff !important; border-color: #5c7aee !important; box-shadow: 0 3px 12px rgba(92,122,238,.38); transform: translateY(-1px); }
.ctt-nb:active       { transform: scale(.92) !important; box-shadow: none; }
.ctt-nb:disabled     { background: #252838 !important; color: #404660 !important; border-color: #2a2e48 !important; cursor: not-allowed; transform: none !important; box-shadow: none; opacity: .55; }

.ctt-nb-play {
    width:         48px !important;
    height:        40px !important;
    background:    linear-gradient(140deg,#197a45,#18b056) !important;
    color:         #fff !important;
    border-color:  #22d469 !important;
    border-radius: 10px !important;
    box-shadow:    0 2px 10px rgba(24,176,86,.28);
}
.ctt-nb-play:hover { background: linear-gradient(140deg,#18b056,#14d666) !important; border-color: #2afb72 !important; box-shadow: 0 4px 16px rgba(24,176,86,.52); color: #fff !important; transform: translateY(-1px); }

.ctt-ctr {
    flex:           1 !important;
    font-family:    'JetBrains Mono','Courier New',monospace;
    font-size:      12px;
    font-weight:    500;
    color:          #6a7aaa;
    text-align:     center;
    white-space:    nowrap;
    letter-spacing: .6px;
    user-select:    none;
}

/* ── Move arrow indicator ── */
.ctt-sq-to::after {
    content:        '▼';
    position:       absolute;
    top:            -18px;
    left:           50%;
    transform:      translateX(-50%);
    font-size:      clamp(9px, 1.5vw, 13px);
    color:          #ff9500;
    text-shadow:    0 0 6px rgba(255,149,0,.8);
    animation:      ctt-arrow-drop .55s ease-out forwards;
    pointer-events: none;
    z-index:        10;
    line-height:    1;
}
@keyframes ctt-arrow-drop {
    0%   { opacity:1; top:-22px; }
    60%  { opacity:1; top:-14px; }
    100% { opacity:0; top:-10px; }
}

/* ── No games ── */
.ctt-no-games { color:#888; font-style:italic; padding:20px; text-align:center; }

@media(min-width:1200px)
{
    .ctt-nav-row {
    width: 56%;
}
}