/* Minimal chess styles */
.chess-phone{padding:14px; width:100%; max-width:100%; box-sizing:border-box; --chess-max: 1280px; --chess-width: clamp(320px, 92vmin, var(--chess-max));} /* unified width var using viewport min */
/* Optional full width mode (enable with ?full=1) */
.chess-full{ --chess-max: 1800px; --chess-width: clamp(360px, 95vmin, var(--chess-max)); }
.ch-title{font-weight:700;text-align:center;margin:8px 0}
.ch-sub{color:#777;text-align:center;margin-bottom:10px}
.chess-menu{display:flex;gap:8px;justify-content:center;margin:8px 0}
.ch-btn,.ch-btn2{display:inline-block;padding:8px 10px;background:#eee;border-radius:6px}
.ch-btn-h{background:#dfefff}
.chess-list{margin:10px 0}
.chess-item{padding:10px;border:1px solid #eee;border-radius:8px;margin-bottom:8px}
.chess-board{width:100%;max-width:var(--chess-width);margin:12px auto;border:1px solid #2d2d2d;border-radius:14px;box-shadow:0 4px 14px -2px rgba(0,0,0,.18);display:grid;grid-template-columns:repeat(8,1fr);--light-color:#f0d9b5;--dark-color:#b58863;
/* Highlight palette (easy to theme) */
--hl-from: rgba(90,165,255,.34); /* soft azure */
--hl-to: rgba(255,206,78,.42); /* warm amber */
--hl-check: rgba(232,76,61,.24);
box-sizing:border-box; container-type:inline-size; background:#1f1f1f; position:relative; overflow:hidden}
/* subtle inner glow */
.chess-board::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);} /* removed inner glow gradient */
.chess-square{position:relative;padding-top:100%;}
.chess-square.dark{background:var(--dark-color)}
.chess-square.light{background:var(--light-color)}
.chess-piece{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--board-actual, var(--chess-width)) / 8 * 0.75);cursor:pointer;user-select:none}
/* Prefer container-query sizing when supported so glyphs track the actual board width */
@supports (width: 1cqw) {
.chess-board .chess-piece{ font-size: clamp(18px, calc(12.5cqw * 0.75), 48px); }
}
.chess-square:hover{filter:brightness(1.04)}
.chess-square.move-target{outline:none}
.chess-square.move-target::after{content:"";position:absolute;left:50%;top:50%;width:22%;height:22%;background:rgba(42,157,143,.85);border-radius:50%;transform:translate(-50%,-50%); z-index:3}
/* capture target: simple outline */
.chess-square.move-target .chess-piece::after{content:"";position:absolute;inset:18%;border:3px solid rgba(231,76,60,.9);border-radius:50%;}
.ch-controls{text-align:center;margin:8px 0}
.ch-by{color:#888;font-size:12px;margin-top:8px}
/* Themes */
.theme-blue{--light-color:#e6f0ff;--dark-color:#4a74c9}
.theme-green{--light-color:#e7f7e7;--dark-color:#4b9b5f}
.theme-gray{--light-color:#eee;--dark-color:#888}
/* Clocks and moves */
.ch-clocks{display:flex;justify-content:space-between;gap:12px;margin:10px auto;width:100%;max-width:100%;box-sizing:border-box}
/* Large, pill-shaped clocks */
.ch-clock{flex:1;background:#0f0f10;color:#fff;border-radius:10px;padding:8px 10px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;letter-spacing:.3px;box-shadow:inset 0 0 0 1px #0b0b0b, 0 1px 6px rgba(0,0,0,.18); font-size:clamp(14px, calc(var(--board-actual, var(--chess-width))/22), 22px); min-height:clamp(34px, calc(var(--board-actual, var(--chess-width))/22 + 8px), 48px)}
.ch-clock.white{background:#202124;color:#fff}
.ch-player-bar .clk-ico{opacity:.9;margin-right:6px}
/* Active teal glow like on screenshot */
.ch-clock.active{box-shadow:inset 0 0 0 1px rgba(15, 180, 160, .65), 0 0 0 2px rgba(86, 224, 211, .45), 0 6px 12px rgba(0,0,0,.16)}
.ch-role{margin:6px 0 8px; font-size:14px; color:#333}
.ch-role b{font-weight:800}
.ch-moves{width:100%;max-width:100%;margin:14px auto;border:1px solid #eee;border-radius:10px;padding:12px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.ch-moves h4{margin:0 0 8px 0;font-size:16px}
/* Pretty moves table */
.ch-moves-table{display:grid;grid-template-columns:repeat(1, 1fr);gap:6px}
.mv-row{display:grid;grid-template-columns:44px 1fr 1fr;align-items:center;gap:6px;padding:4px 6px;border-radius:8px}
.mv-row:nth-child(odd){background:rgba(0,0,0,0.02)}
.mv-no{color:#777;font-weight:700;text-align:right;padding-right:4px}
.mv{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:14px; line-height:1.5; border:0; background:#fafafa; border-radius:8px; padding:6px 8px; cursor:pointer; text-align:left; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mv:hover{background:#f0f3ff}
.mv:active{transform:translateY(1px)}
.mv-empty{background:transparent;border:0;height:100%}
.mv.active{outline:2px solid #2a9d8f; background:#eef9f8}
.chess-square.selected{outline:2px solid #2a9d8f; outline-offset:-2px; box-shadow:inset 0 0 0 9999px rgba(42,157,143,.2);}
/* From / to highlighting (flat, refined colors) */
.chess-square.last-move-from{ box-shadow: inset 0 0 0 9999px var(--hl-from); }
.chess-square.last-move-to{ box-shadow: inset 0 0 0 9999px var(--hl-to); }
.chess-square.last-move{ box-shadow: inset 0 0 0 9999px var(--hl-to); } /* legacy class fallback maps to destination */
/* removed pulse animation for flat design */
.chess-square.check-king{ box-shadow: inset 0 0 0 9999px var(--hl-check); }
/* Small badge in square (for check/mate) */
.sq-badge{ position:absolute; right:4px; top:4px; z-index:6; font-weight:900; line-height:1; color:#fff; background:#d33; border-radius:12px; padding:2px 6px; font-size:clamp(13px, calc(var(--board-actual, var(--chess-width))/8 * 0.28), 22px); box-shadow:0 2px 6px rgba(0,0,0,.35); pointer-events:none; border:2px solid rgba(255,255,255,.9); text-shadow:0 1px 1px rgba(0,0,0,.35) }
.sq-badge.badge-mate{ background:#b10e0e }
.sq-badge.badge-check{ background:#e43 }
/* Board-level badge (result 1-0 / 0-1 / 1/2) */
.board-badge{ position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:8; background:#202325; color:#fff; font-weight:800; padding:5px 14px; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.35); font-size:clamp(12px, calc(var(--board-actual, var(--chess-width))/32), 16px); letter-spacing:.5px; pointer-events:none }
.chess-square.highlight{box-shadow:inset 0 0 0 3px rgba(42,157,143,.4)}
.chess-square,.chess-piece{transition:background .2s ease, box-shadow .2s ease}
.chess-piece:hover{filter:brightness(1.08);}
/* In-square coordinates (lichess-style) */
.chess-square::before,.chess-square::after{position:absolute; z-index:1; pointer-events:none; color:rgba(0,0,0,.55); font-weight:600; font-size:clamp(10px, calc(var(--board-actual, var(--chess-width))/42), 13px);}
/* Show file letters only on the bottom (rank 1) */
.chess-square[data-rank="1"]::after{content:attr(data-file); left:4px; bottom:3px;}
/* Hide any other file-letter placement by default */
.chess-square[data-rank="8"]::after{content:none;}
/* Show rank numbers only on the left (file a) */
.chess-square[data-file="a"]::before{content:attr(data-rank); left:4px; top:3px;}
/* Hide numbers on the right by default */
.chess-square[data-file="h"]::before{content:none;}
.chess-square.dark::before,.chess-square.dark::after{ color:rgba(255,255,255,.7); text-shadow:0 1px 1px rgba(0,0,0,.35); }
/* Flip board for black's perspective: rotate board, counter-rotate pieces and keep labels readable */
.chess-board.chess-flip{ transform: rotate(180deg); transform-origin: 50% 50%; }
.chess-board.chess-flip .chess-piece{ transform: rotate(180deg); }
.chess-board.chess-flip .chess-square::before,
.chess-board.chess-flip .chess-square::after{ transform: rotate(180deg); }
/* Keep move target dot centered even when board is flipped (override rotate) */
.chess-board.chess-flip .chess-square.move-target::after{ transform: translate(-50%, -50%); }
/* When flipped: bottom is rank 8, left is file h */
/* Coordinates should remain visually constant (files at physical bottom, ranks at physical left) even when board flips.
We rotate only pieces & squares, but undo rotation for coordinate pseudo-elements and keep original placement logic. */
.chess-board.chess-flip .chess-square[data-rank="1"]::after{ content:attr(data-file); left:4px; bottom:3px; }
.chess-board.chess-flip .chess-square[data-rank="8"]::after{ content:none; }
.chess-board.chess-flip .chess-square[data-file="a"]::before{ content:attr(data-rank); left:4px; top:3px; }
.chess-board.chess-flip .chess-square[data-file="h"]::before{ content:none; }
/* Toolbar and info */
.chess-wrap{position:relative; width:100%; max-width:100%; box-sizing:border-box; margin:10px auto 8px;}
.ch-pbar{display:flex; align-items:center; gap:8px; width:100%; max-width:100%; box-sizing:border-box; padding:6px 8px; background:#f7f8fa; border:1px solid #eef0f3; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.04); margin:6px 0}
.ch-pbar.turn-now{border:0.5px solid #3b82f6; background:#f0f7ff}
.ch-pbar .p-ava{width:26px; height:26px; border-radius:6px; background:#e8ecf4; display:flex; align-items:center; justify-content:center; font-size:16px}
.ch-pbar .p-info{display:flex; flex-direction:column; gap:3px; min-width:0}
.ch-pbar .p-name{font-weight:800; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ch-pbar .p-name .gray{font-weight:600}
.ch-pbar .p-caps{display:flex; gap:4px; flex-wrap:wrap; color:#333}
.ch-pbar .p-time{margin-left:auto; display:flex; flex-direction:column; gap:4px; align-items:flex-end}
/* Compact timers inside player bars */
.ch-pbar .p-time .ch-clock{
flex: 0 0 auto;
min-width:64px;
padding:4px 8px;
font-size:12px;
min-height:26px; /* override global .ch-clock clamp */
}
.ch-pbar .p-time .ch-clock.small{
min-width:58px;
font-size:11px;
min-height:22px;
opacity:.9
}
.cap{font-size:14px; line-height:1; opacity:.95}
.coords{position:absolute; pointer-events:none; z-index:2; font-size:clamp(10px, calc(var(--board-actual, var(--chess-width))/28), 14px); color:#333; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
/* removed external coords strips */
.ch-toolbar{width:100%;max-width:100%;box-sizing:border-box;margin:8px auto;display:flex;align-items:center;gap:8px}
.ch-ctrl{border:0;background:#efefef;border-radius:10px;padding:8px 12px;cursor:pointer;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.ch-ctrl:hover{filter:brightness(0.97)}
.ch-ctrl.disabled{opacity:.5;cursor:not-allowed}
.ch-ctrl-space{flex:1}
.ch-info{width:100%;max-width:100%;box-sizing:border-box;margin:6px auto 6px;display:grid;grid-template-columns:1fr;gap:4px;color:#222;font-size:15px;line-height:1.35}
.ch-info b{font-weight:700}
/* inline variant under board */
.ch-info-inline{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.ch-info-inline .info-item{display:inline-flex;align-items:center;gap:6px;color:#333}
.ch-info-inline .info-item i,.ch-info-inline .info-item svg{opacity:.9}
/* Player bars (top/bottom like chess.com/lichess headers) */
/* New compact players header */
.ch-players{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:100%;box-sizing:border-box;margin:6px auto 6px}
.ch-card{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:10px;background:#f7f8fa;border:1px solid #eef0f3;box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden}
.ch-card .pl-title{font-weight:700;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.15}
.ch-card .ch-clock{min-width:140px;width:100%}
.ch-card.ch-black{background:#f7f8fa}
.ch-card.ch-white{background:#f7f8fa}
/* Topbar variant: a single bar with two sides */
.ch-topbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;width:100%;max-width:100%;box-sizing:border-box;margin:4px auto 2px}
.ch-topbar .ch-side{display:flex;flex-direction:column;gap:6px}
.ch-topbar .pl-line{font-weight:700;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.15}
.ch-topbar .ch-clock{width:100%}
/* Minimal variant: tiny names with clocks centered */
.ch-mini{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:10px;width:100%;max-width:100%;box-sizing:border-box;margin:4px auto}
.ch-mini .mini-name{font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-mini .mini-name.right{text-align:right}
.ch-mini .spacer{height:1px}
/* Sidebar variant: board and aside placed horizontally on wide screens */
.ch-section{display:grid;grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap:18px; align-items:start; width:100%; max-width:100%; margin:6px auto}
.ch-board-col{display:block}
.ch-aside{display:flex;flex-direction:column;gap:10px}
/* Info bar above the board */
.chess-info-bar{width:100%;max-width:100%;box-sizing:border-box;margin:0 auto 6px; padding:8px 12px; border-radius:10px; background:#f4f5f7; color:#222; font-weight:600; text-align:left; box-shadow:0 2px 6px rgba(0,0,0,.05)}
.chess-info-bar.is-check{ background:#fff2f2; color:#8a1f1f; box-shadow:0 2px 8px rgba(240, 60, 60, .08) }
.chess-info-bar.is-mate{ background:#ffe9e9; color:#7a0a0a; box-shadow:0 2px 8px rgba(240, 60, 60, .12) }
.ch-alert{ color:#b10e0e }
/* Board positioning context */
.chess-board{position:relative}
.chess-wrap{position:relative; width:100%; max-width:100%; margin:12px auto 8px;}
/* Keep board badge readable when flipped */
.chess-board.chess-flip .board-badge{ transform: translateX(-50%) rotate(180deg); }
.chess-board.chess-flip .sq-badge{ transform: rotate(180deg); }
/* Keep centered overlay readable when board flipped (counter-rotate) */
.chess-board.chess-flip .chess-overlay{ transform: rotate(180deg); }
/* Center overlay notification */
.chess-board .chess-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:30; pointer-events:none;}
.chess-overlay-box{max-width:70%; background:#1f1f1f; color:#fff; font-weight:700; border-radius:14px; padding:20px 24px; box-shadow:0 8px 24px rgba(0,0,0,.55); text-align:center; display:flex; flex-direction:column; gap:16px; pointer-events:auto; animation:chFade .2s ease;}
.chess-overlay-text{font-size:clamp(14px, calc(var(--board-actual, var(--chess-width))/22), 20px); line-height:1.3; word-wrap:break-word;}
.chess-overlay-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.chess-overlay-actions .btn{background:#2a9d8f; color:#fff; border:0; padding:8px 16px; border-radius:10px; font-weight:700; cursor:pointer; box-shadow:none; letter-spacing:.3px;}
.chess-overlay-actions .btn:active{filter:brightness(.92);}
.chess-overlay-actions .btn:hover{filter:brightness(1.05)}
@keyframes chFade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
/* Hide the pale info bar entirely as per new on-board badges UX */
.chess-info-bar{ display:none !important; }
/* Dim layer injected by game over script */
.board-dim{animation:dimIn .25s ease;background:rgba(0,0,0,.45)!important;}
@keyframes dimIn{from{opacity:0;}to{opacity:1;}}
/* Compact game list (one row per game) */
.ch-games{width:100%; margin:12px auto; border:1px solid #e4e7eb; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.05)}
.ch-games .gh-row{display:grid; grid-template-columns: 130px 1fr 80px 80px 140px 100px; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid #f0f1f3; font-size:14px; line-height:1.25}
.ch-games .gh-row:first-child{border-top:0; background:#f4f6f8; font-weight:700; color:#445; padding:10px 14px; text-transform:uppercase; letter-spacing:.02em; font-size:13px}
.ch-games .gh-row:not(:first-child):hover{background:#fafbfd}
.ch-games .gh-row.gh-win{background:#f0fff4; box-shadow: inset 4px 0 0 0 #31c48d}
.ch-games .gh-row.gh-loss{background:#fff5f5; box-shadow: inset 4px 0 0 0 #f05252}
.ch-games .gh-row.gh-win:hover{background:#e9fff0}
.ch-games .gh-row.gh-loss:hover{background:#fff0f0}
.gh-side{display:flex; flex-direction:column; gap:2px; min-width:0}
.gh-side .pl{display:flex; align-items:center; gap:6px; min-width:0}
.gh-side .pl b{color:#222; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gh-res{font-weight:700; text-align:center}
.gh-moves, .gh-date{color:#555}
.t-right{text-align:right}
.gh-open a{display:inline-block; padding:8px 12px; border-radius:10px; font-weight:700; text-decoration:none}
.gh-open .btn-open{background:#eef2f7; color:#223}
.gh-open .btn-join{background:#3d82f6; color:#fff}
.gh-open .btn-watch{background:#12b886; color:#fff}
.gh-open a:hover{filter:brightness(.98)}
/* tiny header icons */
.ico{display:inline-block; width:16px; height:16px; border-radius:4px; margin-right:6px; vertical-align:-3px; background:#dfe6ef}
.ico-clock{background:linear-gradient(145deg,#dfe6ef,#cfd8e6)}
.ico-users{background:linear-gradient(145deg,#e7e1ff,#d7d0ff)}
.ico-res{background:linear-gradient(145deg,#ffe0e0,#ffd0d0)}
.ico-moves{background:linear-gradient(145deg,#e0f4ff,#d0edff)}
.ico-date{background:linear-gradient(145deg,#e8ffe8,#d7ffd7)}
/* side dots */
.dot{display:inline-block; width:10px; height:10px; border-radius:3px}
.dot-w{background:#6cc24a}
.dot-b{background:#3d82f6}
.gh-open a:hover{filter:brightness(.98)}
@media (max-width: 680px){
.ch-games .gh-row{grid-template-columns: 110px 1fr 64px 64px 120px 84px; padding:8px 10px}
.gh-moves,.gh-date{font-size:13px}
.gh-side .pl b{max-width:200px}
}
/* Compact mobile layout: hide less-important columns (moves, date) to save space */
@media (max-width: 560px){
.ch-games .gh-row{grid-template-columns: 100px 1fr 64px 90px}
.ch-games .gh-row > :nth-child(4),
.ch-games .gh-row > :nth-child(5){ display:none; }
.gh-open a{ padding:6px 10px; font-size:13px }
.gh-side .pl b{max-width:160px}
}
@media (max-width: 420px){
.ch-games .gh-row{grid-template-columns: 90px 1fr 60px 84px}
.gh-side .pl b{max-width:130px}
.ico{display:none}
}
/* Responsive: players header stacks on narrow screens */
@media (max-width: 520px){
.ch-players{grid-template-columns:1fr}
.ch-topbar{grid-template-columns:1fr}
.ch-mini{grid-template-columns:1fr auto; grid-auto-rows:auto}
.ch-section{grid-template-columns:1fr}
}