/* TJK-Chess online play beta */
.play-workspace { width:min(1480px,100%); margin:0 auto; padding:34px clamp(16px,4vw,56px) 70px; }
.play-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.play-heading h1 { margin:6px 0 0; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.045em; }
.play-heading p { max-width:680px; margin:8px 0 0; color:var(--tjk-muted); line-height:1.55; }
.play-layout { display:grid; grid-template-columns:minmax(290px,370px) minmax(520px,1fr); gap:22px; align-items:start; }
.play-card { border:1px solid var(--tjk-border); border-radius:17px; background:#fff; box-shadow:0 8px 26px rgba(17,35,74,.06); }
.play-setup { padding:22px; }
.play-setup h2 { margin:0 0 5px; font-size:1.25rem; }
.play-setup > p { margin:0 0 18px; color:var(--tjk-muted); line-height:1.5; }
.play-field { display:grid; gap:7px; margin-bottom:14px; font-weight:750; }
.play-field input, .play-field select { width:100%; min-height:44px; padding:9px 11px; border:1px solid #c7d2e1; border-radius:9px; background:#fff; color:var(--tjk-navy); }
.play-options { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.play-check { display:flex; align-items:center; gap:9px; min-height:44px; margin:4px 0 16px; color:#334155; font-weight:700; }
.play-check input { width:18px; height:18px; }
.play-primary { width:100%; min-height:48px; border:1px solid var(--tjk-blue); border-radius:10px; background:var(--tjk-blue); color:#fff; cursor:pointer; font-weight:850; box-shadow:0 10px 22px rgba(11,95,231,.2); }
.play-primary:hover { background:var(--tjk-blue-strong); }
.play-primary:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.play-secondary { min-height:40px; padding:8px 13px; border:1px solid var(--tjk-border); border-radius:9px; background:#fff; color:var(--tjk-navy); cursor:pointer; font-weight:750; }
.play-secondary:hover { background:#f5f8fc; }
.play-danger { color:#b42318; border-color:#f1c4bf; }
.play-note { margin-top:14px; padding:12px 13px; border-radius:10px; background:#f7f9fc; color:#64748b; font-size:.82rem; line-height:1.45; }
.play-note strong { color:#334155; }
.play-status { display:grid; gap:7px; margin-top:16px; padding:13px; border:1px solid #dce7f5; border-radius:10px; background:#f3f7fd; color:#36506f; }
.play-status.is-error { border-color:#f2c8c2; background:#fff5f4; color:#9f2f25; }
.play-searching { display:flex; align-items:center; gap:10px; }
.play-spinner { width:18px; height:18px; border:2px solid #b9cff0; border-top-color:var(--tjk-blue); border-radius:50%; animation:tjk-spin .8s linear infinite; }
@keyframes tjk-spin { to { transform:rotate(360deg); } }

.play-game-shell { min-height:670px; padding:18px; }
.play-empty { display:grid; place-items:center; align-content:center; min-height:610px; padding:30px; text-align:center; background:linear-gradient(145deg,#fff,#f4f8ff); border-radius:12px; }
.play-empty-icon { display:grid; place-items:center; width:90px; height:90px; border-radius:25px; background:var(--tjk-blue-soft); color:var(--tjk-blue); font-size:3.3rem; }
.play-empty h2 { margin:18px 0 8px; }
.play-empty p { max-width:520px; margin:0; color:var(--tjk-muted); line-height:1.55; }

.live-game-layout { display:grid; grid-template-columns:minmax(420px,680px) minmax(250px,340px); gap:18px; justify-content:center; }
.live-board-column { min-width:0; }
.live-player-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; min-height:62px; padding:9px 12px; border:1px solid var(--tjk-border); background:#fff; }
.live-player-card.top { border-radius:12px 12px 0 0; border-bottom:0; }
.live-player-card.bottom { border-radius:0 0 12px 12px; border-top:0; }
.live-player-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#102a56; color:#fff; font-weight:850; }
.live-player-card.is-opponent .live-player-avatar { background:#dce6f4; color:#294463; }
.live-player-name { display:grid; min-width:0; }
.live-player-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-player-name span { color:var(--tjk-muted); font-size:.78rem; }
.live-clock { min-width:106px; padding:8px 10px; border-radius:8px; background:#edf2f7; color:#16243c; text-align:center; font-variant-numeric:tabular-nums; font-size:1.45rem; font-weight:900; letter-spacing:.015em; }
.live-player-card.is-active .live-clock { background:#132d57; color:#fff; box-shadow:0 5px 14px rgba(16,42,86,.18); }
.live-player-card.is-low .live-clock { background:#b42318; color:#fff; }
.live-board-wrap { position:relative; width:100%; aspect-ratio:1; background:#789b59; box-shadow:0 12px 30px rgba(15,23,42,.16); }
.live-board { display:grid; grid-template-columns:repeat(8,1fr); width:100%; height:100%; touch-action:none; user-select:none; container-type:inline-size; }
.live-square { position:relative; display:grid; place-items:center; min-width:0; min-height:0; }
.live-square.light { background:#eeeecf; }
.live-square.dark { background:#789b59; }
.live-square.is-last { box-shadow:inset 0 0 0 999px rgba(245,196,66,.32); }
.live-square.is-selected { box-shadow:inset 0 0 0 4px rgba(11,95,231,.78); }
.live-square.is-legal::after { content:""; position:absolute; width:22%; aspect-ratio:1; border-radius:50%; background:rgba(9,31,67,.34); }
.live-square.is-capture::after { width:78%; border:5px solid rgba(9,31,67,.32); background:transparent; }
.live-piece, .live-drag-ghost { display:grid; place-items:center; width:100%; height:100%; font-family:"Segoe UI Symbol","DejaVu Sans",sans-serif; font-size:clamp(32px,10cqw,74px); line-height:1; filter:drop-shadow(0 1px 0 rgba(255,255,255,.45)); cursor:grab; }
.live-piece { position:relative; z-index:2; }
.live-piece.is-hidden { visibility:hidden; }
.live-drag-ghost { position:fixed; z-index:5000; top:0; left:0; pointer-events:none; }
.live-annotations { position:absolute; inset:0; z-index:6; width:100%; height:100%; pointer-events:none; }
.live-coordinate { position:absolute; z-index:3; font-size:clamp(.55rem,1vw,.72rem); font-weight:850; opacity:.75; pointer-events:none; }
.live-rank { top:3px; left:4px; }
.live-file { right:4px; bottom:2px; }
.live-square.light .live-coordinate { color:rgba(24,50,24,.72); }
.live-square.dark .live-coordinate { color:rgba(238,238,207,.82); }
.live-game-overlay { position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:rgba(7,20,46,.72); backdrop-filter:blur(2px); z-index:10; }
.live-result-card { width:min(390px,100%); padding:25px; border-radius:16px; background:#fff; text-align:center; box-shadow:0 25px 70px rgba(0,0,0,.3); }
.live-result-card h2 { margin:0 0 8px; }
.live-result-card p { margin:0 0 18px; color:var(--tjk-muted); }
.live-result-rating { margin-bottom:17px; font-weight:800; }
.live-result-rating.positive { color:#0a8a4b; }
.live-result-rating.negative { color:#b42318; }

.live-side-panel { display:grid; grid-template-rows:auto minmax(230px,1fr) auto; min-height:620px; overflow:hidden; border:1px solid var(--tjk-border); border-radius:12px; background:#fff; }
.live-game-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 14px; border-bottom:1px solid var(--tjk-border); background:#f8fafc; }
.live-game-head strong { font-size:.92rem; }
.live-game-head span { color:var(--tjk-muted); font-size:.78rem; }
.live-moves { overflow:auto; padding:10px 12px; }
.live-move-row { display:grid; grid-template-columns:34px 1fr 1fr; gap:5px; align-items:center; min-height:31px; border-radius:6px; }
.live-move-row:nth-child(odd) { background:#f8fafc; }
.live-move-row span { padding:5px 7px; }
.live-move-number { color:#94a3b8; font-size:.76rem; text-align:right; }
.live-game-message { min-height:48px; padding:12px 14px; border-top:1px solid var(--tjk-border); color:#475569; font-size:.88rem; line-height:1.4; }
.live-actions { display:flex; flex-wrap:wrap; gap:7px; padding:12px; border-top:1px solid var(--tjk-border); background:#f8fafc; }
.live-actions .play-secondary { flex:1; min-width:90px; }
.live-draw-alert { margin:0 12px 12px; padding:11px; border:1px solid #ecd38d; border-radius:9px; background:#fff9e8; color:#745407; }
.live-draw-alert div { display:flex; gap:7px; margin-top:9px; }
.live-first-move { margin-top:7px; color:#9a6500; font-weight:800; }

@media (max-width:1120px) {
  .play-layout { grid-template-columns:1fr; }
  .play-setup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
  .play-setup h2,.play-setup>p,.play-setup .play-primary,.play-setup .play-note,.play-setup .play-status { grid-column:1/-1; }
  .play-check { margin:0; }
}
@media (max-width:850px) {
  .live-game-layout { grid-template-columns:1fr; }
  .live-side-panel { min-height:360px; }
  .play-game-shell { padding:10px; }
}
@media (max-width:620px) {
  .play-workspace { padding:24px 10px 50px; }
  .play-heading { align-items:flex-start; flex-direction:column; padding-inline:7px; }
  .play-setup { display:block; padding:17px; }
  .play-options { grid-template-columns:1fr; }
  .play-game-shell { min-height:0; border-radius:12px; }
  .play-empty { min-height:420px; }
  .live-game-layout { gap:10px; }
  .live-player-card { min-height:54px; padding:7px 8px; }
  .live-clock { min-width:88px; font-size:1.18rem; }
  .live-piece, .live-drag-ghost { font-size:clamp(32px,10cqw,74px); }
  .live-side-panel { min-height:330px; }
}

/* v13.5 local Stockfish opponent */
.computer-layout { display:grid; grid-template-columns:minmax(280px,370px) minmax(500px,1fr); gap:18px; }
.computer-setup-card { display:grid; align-content:start; gap:14px; }
.computer-setup-card h2 { margin:0; font-size:1.65rem; }
.computer-setup-card p { margin:0 0 4px; color:#64748b; line-height:1.55; }
.computer-game-layout { display:grid; grid-template-columns:minmax(480px,650px) minmax(300px,1fr); gap:18px; align-items:start; }
.computer-board-card { width:min(100%,650px); margin:0 auto; }
.computer-board { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; aspect-ratio:1; overflow:hidden; border:2px solid #263246; border-radius:6px; container-type:inline-size; touch-action:none; user-select:none; }
.computer-square { position:relative; display:grid; place-items:center; min-width:0; min-height:0; overflow:hidden; }
.computer-square.is-light { background:#eeeecf; }
.computer-square.is-dark { background:#789b59; }
.computer-square.is-last { box-shadow:inset 0 0 0 999px rgba(238,224,72,.31); }
.computer-square.is-selected::after { content:""; position:absolute; inset:5%; border:4px solid rgba(241,196,25,.92); z-index:4; pointer-events:none; }
.computer-square.is-legal-target::before { content:""; position:absolute; width:24%; aspect-ratio:1; border-radius:50%; background:rgba(23,45,26,.34); z-index:4; pointer-events:none; }
.computer-piece,.computer-drag-ghost { display:grid; place-items:center; width:100%; height:100%; font-family:"Segoe UI Symbol","DejaVu Sans",sans-serif; font-size:clamp(32px,10cqw,74px); line-height:1; cursor:grab; filter:drop-shadow(0 1px 0 rgba(255,255,255,.45)); }
.computer-piece { position:relative; z-index:3; }
.computer-piece.is-hidden { visibility:hidden; }
.computer-drag-ghost { position:fixed; z-index:10000; pointer-events:none; }
.computer-coordinate { position:absolute; z-index:5; font-size:clamp(8px,1.4cqw,12px); font-weight:800; color:rgba(24,50,24,.72); pointer-events:none; }
.computer-rank { top:2px; left:4px; }.computer-file { right:4px; bottom:2px; }
.computer-player-row { display:flex; align-items:center; gap:10px; margin:8px 0; padding:8px 10px; border:1px solid #dbe3ef; border-radius:9px; background:#fff; }
.computer-player-row.is-active { border-color:#80a7f7; box-shadow:0 0 0 3px rgba(59,109,224,.12); }
.computer-player-row div { display:grid; }.computer-player-row small { color:#64748b; }
.computer-side-card { display:grid; gap:15px; }
.computer-side-card h2 { margin:5px 0 0; }
.computer-status { min-height:54px; padding:13px; border-radius:9px; background:#eef4ff; font-weight:800; }
.computer-moves { min-height:180px; max-height:420px; overflow:auto; padding:10px; border:1px solid #dbe3ef; border-radius:9px; background:#fbfcfe; }
.computer-move-grid { display:grid; grid-template-columns:30px 1fr 1fr; gap:5px; align-items:center; }
.computer-move-grid span { color:#64748b; }.computer-move-grid b { padding:5px 7px; font-weight:650; }
.computer-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.computer-actions .play-primary { grid-column:1/-1; }
@media(max-width:980px){.computer-layout,.computer-game-layout{grid-template-columns:1fr}.computer-board-card{width:min(100%,650px)}}

/* v13.7 compact, Lichess-inspired game workspace */
@media (min-width: 981px) {
  body.is-playing-game { overflow: hidden; }
  body.is-playing-game main { height: calc(100dvh - 70px); overflow: hidden; }
  body.is-playing-game [data-view="play"] { height: 100%; overflow: hidden; background:
    radial-gradient(circle at 72% 28%, rgba(42,83,145,.35), transparent 38%),
    linear-gradient(135deg,#17243a 0%,#0d1627 100%); }
  body.is-playing-game .play-workspace { width: 100%; max-width: none; height: 100%; padding: 8px 12px; }
  body.is-playing-game .play-heading { display: none; }
  body.is-playing-game [data-live-play-root],
  body.is-playing-game [data-live-play-root] > .computer-game-layout,
  body.is-playing-game [data-live-play-root] > .live-game-layout { height: 100%; min-height: 0; }

  body.is-playing-game .computer-game-layout,
  body.is-playing-game .live-game-layout {
    grid-template-columns: minmax(0, calc(100dvh - 86px)) minmax(330px, 430px);
    justify-content: center;
    align-items: stretch;
    gap: 12px;
  }
  body.is-playing-game .computer-board-card,
  body.is-playing-game .live-board-column {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
  }
  body.is-playing-game .computer-board,
  body.is-playing-game .live-board-wrap {
    width: min(100%, calc(100dvh - 86px));
    height: auto;
    max-height: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 18px 55px rgba(0,0,0,.38);
  }
  body.is-playing-game .computer-side-card,
  body.is-playing-game .live-side-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(5,12,25,.94);
    color: #eef4ff;
    box-shadow: 0 18px 55px rgba(0,0,0,.3);
  }
  body.is-playing-game .computer-side-card {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto auto;
    gap: 0;
    padding: 0;
  }
  body.is-playing-game .live-side-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto auto;
  }
  body.is-playing-game .computer-player-row,
  body.is-playing-game .live-player-card {
    min-height: 60px;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,.035);
    color: #f7f9fc;
  }
  body.is-playing-game .computer-player-row.is-active,
  body.is-playing-game .live-player-card.is-active {
    border: 0;
    box-shadow: inset 4px 0 0 #78a73d;
    background: rgba(120,167,61,.12);
  }
  body.is-playing-game .computer-player-row small,
  body.is-playing-game .live-player-name span { color: #aab8cc; }
  body.is-playing-game .computer-turn-dot {
    width: 11px;
    height: 11px;
    margin-left: auto;
    border-radius: 50%;
    background: #667085;
  }
  body.is-playing-game .computer-player-row.is-active .computer-turn-dot { background: #78a73d; box-shadow: 0 0 0 4px rgba(120,167,61,.14); }
  body.is-playing-game .computer-status,
  body.is-playing-game .live-game-message {
    min-height: 50px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    background: rgba(255,255,255,.025);
    color: #e8eef8;
  }
  body.is-playing-game .computer-moves,
  body.is-playing-game .live-moves {
    min-height: 0;
    max-height: none;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: rgba(0,0,0,.18);
    color: #e6edf7;
  }
  body.is-playing-game .computer-move-grid span,
  body.is-playing-game .live-move-number { color: #8090a8; }
  body.is-playing-game .computer-move-grid b,
  body.is-playing-game .live-move-row span { color: #eef4ff; }
  body.is-playing-game .live-move-row:nth-child(odd) { background: rgba(255,255,255,.035); }
  body.is-playing-game .live-game-head {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
  }
  body.is-playing-game .live-game-head span { color: #94a3b8; }
  body.is-playing-game .computer-actions,
  body.is-playing-game .live-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
  }
  body.is-playing-game .computer-actions .play-primary,
  body.is-playing-game .computer-actions .computer-analysis-button,
  body.is-playing-game .live-actions .play-primary { grid-column: 1 / -1; }
  body.is-playing-game .play-secondary {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #eef4ff;
  }
  body.is-playing-game .play-secondary:hover { background: rgba(255,255,255,.12); }
  body.is-playing-game .play-primary { box-shadow: none; }
  body.is-playing-game .live-clock {
    min-width: 96px;
    background: rgba(255,255,255,.10);
    color: #f8fafc;
  }
  body.is-playing-game .live-player-card.is-active .live-clock { background: #78a73d; color: #0c1608; }
  body.is-playing-game .live-side-footer { min-height: 0; }
}

@media (min-width: 981px) and (max-width: 1180px) {
  body.is-playing-game .computer-game-layout,
  body.is-playing-game .live-game-layout { grid-template-columns: minmax(0, calc(100dvh - 86px)) minmax(280px, 350px); }
}

/* v13.8 named humanized bots */
.bot-setup-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,390px); gap:18px; align-items:start; }
.bot-gallery-card,.bot-options-card { padding:20px; }
.bot-gallery-head { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:16px; }
.bot-gallery-head h2 { margin:4px 0 0; font-size:1.55rem; }
.bot-gallery-head>span { color:var(--tjk-muted); font-weight:750; }
.bot-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bot-card { display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; min-height:104px; padding:11px; border:2px solid transparent; border-radius:13px; background:#f6f8fc; color:var(--tjk-navy); text-align:left; cursor:pointer; transition:.16s ease; }
.bot-card:hover { transform:translateY(-2px); background:#eef4ff; }
.bot-card.is-selected { border-color:#6fa646; box-shadow:0 0 0 3px rgba(111,166,70,.14); background:#f3f8ee; }
.bot-avatar { display:grid; place-items:center; width:64px; height:64px; border-radius:14px; background:linear-gradient(145deg,#e6edf8,#cad7e8); font-size:2rem; }
.bot-card span:nth-child(2) { display:grid; min-width:0; }
.bot-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bot-card small { color:#64748b; }
.bot-card em { grid-column:1/-1; color:#52647c; font-size:.78rem; font-style:normal; font-weight:700; }
.bot-options-card { display:grid; gap:14px; position:sticky; top:88px; }
.bot-selected-profile { display:grid; grid-template-columns:88px 1fr; gap:15px; align-items:start; padding-bottom:15px; border-bottom:1px solid var(--tjk-border); }
.bot-profile-avatar { display:grid; place-items:center; width:88px; height:88px; border-radius:20px; background:linear-gradient(145deg,#e3ebf7,#c7d5e8); font-size:2.8rem; }
.bot-selected-profile h2 { margin:2px 0 1px; font-size:1.65rem; }
.bot-selected-profile strong { color:#36506f; }
.bot-selected-profile p { margin:7px 0 0; color:#64748b; line-height:1.45; }
.bot-game-avatar { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:10px; background:#dce6f4; color:#152b50; font-size:1.25rem; font-weight:900; }
.computer-clock { margin-left:auto; min-width:94px; padding:7px 9px; border-radius:8px; background:#e8eef6; color:#17263e; text-align:center; font-size:1.25rem; font-weight:900; font-variant-numeric:tabular-nums; }
.computer-clock.is-low { background:#b42318; color:#fff; }
.computer-player-row.is-active .computer-clock { background:#173461; color:#fff; }
@media(max-width:1120px){.bot-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:850px){.bot-setup-layout{grid-template-columns:1fr}.bot-options-card{position:static}.bot-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.bot-gallery{grid-template-columns:1fr}.bot-gallery-card,.bot-options-card{padding:14px}.bot-selected-profile{grid-template-columns:70px 1fr}.bot-profile-avatar{width:70px;height:70px}}
@media(min-width:981px){
  body.is-playing-game .computer-clock { background:rgba(255,255,255,.10); color:#f8fafc; }
  body.is-playing-game .computer-player-row.is-active .computer-clock { background:#78a73d; color:#0c1608; }
  body.is-playing-game .bot-game-avatar { background:rgba(255,255,255,.12); color:#fff; }
}

/* v14.2: custom bot starting positions and larger bot roster. */
.bot-start-position{
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid #d4dfed;
  border-radius:9px;
  background:#f7f9fc;
}
.bot-start-position>span{
  color:#6a788c;
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.bot-start-position>strong{color:#172842;font-size:12px}
.bot-start-position .play-secondary{width:100%;margin:0}

/* v14.4: premoves, board drawings and bot speech. */
.computer-board-wrap{position:relative;width:100%;aspect-ratio:1}
.computer-board-wrap .computer-board{position:absolute;inset:0;width:100%;height:100%}
.computer-annotations{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none}
.computer-square.is-premove-from::after,.computer-square.is-premove-to::after,
.live-square.is-premove-from::before,.live-square.is-premove-to::before{
  content:"";position:absolute;inset:0;z-index:5;box-sizing:border-box;border:3px solid rgba(124,58,237,.94);background:rgba(139,92,246,.24);pointer-events:none
}
.computer-square.is-premove-to::after,.live-square.is-premove-to::before{border-color:rgba(109,40,217,.98);background:rgba(139,92,246,.31)}
.computer-bot-speech{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:start;margin:0;padding:10px 13px;border-top:1px solid #dbe3ef;border-bottom:1px solid #dbe3ef;background:#f7faff;color:#34465f}
.computer-bot-speech>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#dfe9f7;font-size:1.1rem}
.computer-bot-speech strong{display:block;font-size:.74rem;color:#24466f}
.computer-bot-speech p{margin:2px 0 0;font-size:.82rem;line-height:1.35}
.computer-bot-speech.is-empty{display:none}
.bot-chat-toggle{margin:0;padding:9px 10px;border:1px solid #d8e2ef;border-radius:9px;background:#f8fafc}
.bot-gallery{max-height:min(680px,calc(100dvh - 180px));overflow:auto;padding-right:4px}
@media(min-width:981px){
  body.is-playing-game .computer-side-card{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
  body.is-playing-game .computer-bot-speech{border-color:rgba(255,255,255,.08);background:rgba(71,119,187,.10);color:#dce8f8}
  body.is-playing-game .computer-bot-speech>span{background:rgba(255,255,255,.10)}
  body.is-playing-game .computer-bot-speech strong{color:#9fc2f0}
}
@media(max-width:620px){.computer-bot-speech{grid-template-columns:30px 1fr;padding:8px 10px}.computer-bot-speech>span{width:28px;height:28px}}

/* v14.4: dragging uses the same yellow destination frame as the analysis board.
   Click-to-show legal moves keeps the smaller circular indicators. */
.computer-square.is-drop-target,.live-square.is-drop-target{box-shadow:inset 0 0 0 5px #f2c21a !important;}


/* v14.5: stable square grids, clickable history, and viewport-safe play. */
.live-board{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));}
.live-square,.computer-square{min-width:0;min-height:0;overflow:hidden;}
.live-move-button,.computer-move-button{
  width:100%;min-width:0;padding:5px 7px;border:0;border-radius:5px;background:transparent;color:inherit;text-align:left;font:inherit;font-weight:700;cursor:pointer;
}
.live-move-button:hover,.computer-move-button:hover{background:rgba(37,99,235,.12);}
.live-move-button.is-current,.computer-move-button.is-current{background:#2563eb;color:#fff;}
.computer-move-grid{align-items:center;}
.computer-move-grid .computer-move-button{padding:5px 7px;}
@media(min-width:981px){
  body.is-playing-game .computer-board-wrap,
  body.is-playing-game .live-board-wrap{width:min(100%,calc(100dvh - 86px));height:min(100%,calc(100dvh - 86px));aspect-ratio:1;}
  body.is-playing-game .computer-board{width:100%;height:100%;aspect-ratio:auto;}
}

/* v14.6 position matchmaking and rematch */
.play-mode-summary{display:grid;gap:3px;margin:0 0 15px;padding:11px 13px;border:1px solid #bfd2ee;border-radius:9px;background:#eef5ff}.play-mode-summary strong{color:#154a9d}.play-mode-summary span{color:#5f6f85;font-size:.82rem;line-height:1.4}.live-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.live-actions .play-primary{grid-column:1/-1}

/* TJK-Chess 14.6.7 — visible first-move countdown and cancel controls. */
.live-abort-x,
.computer-abort-x {
  position: absolute;
  z-index: 14;
  top: 9px;
  left: 9px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(123,28,28,.90);
  color: #fff;
  box-shadow: 0 5px 16px rgba(15,23,42,.28);
  cursor: pointer;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(3px);
}
.live-abort-x:hover,
.computer-abort-x:hover { background:#a51f1f; transform:scale(1.04); }
.live-clock.is-first-move-countdown,
.computer-clock.is-first-move-countdown {
  background:#b42318 !important;
  color:#fff !important;
  box-shadow:0 0 0 3px rgba(255,196,0,.45),0 7px 18px rgba(180,35,24,.26) !important;
  animation:tjk-first-move-pulse 1s ease-in-out infinite alternate;
}
@keyframes tjk-first-move-pulse { from{filter:brightness(1)} to{filter:brightness(1.16)} }
.live-move-button.is-intro,
.computer-move-button.is-intro {
  color:#31598f;
  background:#e9f1fc;
  font-style:italic;
}
.live-move-button.is-intro::after,
.computer-move-button.is-intro::after {
  content:"•";
  margin-left:4px;
  color:#7b94b6;
  font-size:.7em;
}

/* v15 private invitations and empty-queue alternatives */
.live-invite-join{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px}.live-invite-join input{min-width:0;border:1px solid var(--border,#cfd6e2);border-radius:10px;padding:10px 12px;background:var(--surface,#fff);color:inherit}.live-waiting-status{gap:10px}.live-queue-alternatives{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:7px;padding-top:10px;border-top:1px solid currentColor}.live-queue-alternatives small{width:100%;opacity:.75}.live-queue-alternatives button{border:1px solid currentColor;border-radius:8px;padding:7px 9px;background:transparent;color:inherit;cursor:pointer}@media(max-width:640px){.live-invite-join{grid-template-columns:1fr}.live-queue-alternatives button{flex:1 1 42%}}

/* v15 chess-first mobile game layout */
@media(max-width:760px){body.is-playing-game .site-header{display:none}body.is-playing-game main{height:100dvh}.play-workspace{padding-left:0;padding-right:0}body.is-playing-game .computer-game-layout,body.is-playing-game .live-game-layout{display:flex;flex-direction:column;gap:6px;height:100dvh;padding:4px}body.is-playing-game .computer-board-card,body.is-playing-game .live-board-column{width:100%;flex:0 0 auto}body.is-playing-game .computer-board-wrap,body.is-playing-game .live-board-wrap{width:min(100vw - 8px,calc(100dvh - 190px));height:auto;aspect-ratio:1;margin:auto}body.is-playing-game .computer-side-card,body.is-playing-game .live-side-panel{width:100%;min-height:0;max-height:175px;overflow:auto;border-radius:10px}body.is-playing-game .computer-player-row,body.is-playing-game .live-player-card{min-height:42px;padding:5px 8px}body.is-playing-game .computer-actions,body.is-playing-game .live-actions{position:sticky;bottom:0;background:inherit;padding:6px}.live-abort-x,.computer-abort-x{width:34px;height:34px;top:5px;left:5px}.live-clock,.computer-clock{font-size:1.25rem}.live-moves,.computer-moves{max-height:88px}}
@media(max-width:760px) and (orientation:landscape){body.is-playing-game .computer-game-layout,body.is-playing-game .live-game-layout{display:grid;grid-template-columns:minmax(0,calc(100dvh - 8px)) minmax(220px,1fr)}body.is-playing-game .computer-board-wrap,body.is-playing-game .live-board-wrap{width:calc(100dvh - 8px);height:calc(100dvh - 8px)}body.is-playing-game .computer-side-card,body.is-playing-game .live-side-panel{max-height:calc(100dvh - 8px)}}

/* v15.0.4 — locked best-defence training setup. */
.best-engine-training-copy{display:flex;align-items:flex-start;gap:18px;margin-top:22px;padding:22px;border:1px solid var(--line,#dbe2ec);border-radius:16px;background:rgba(46,148,91,.08)}
.best-engine-training-copy h3{margin:0 0 8px}.best-engine-training-copy p{margin:5px 0;color:var(--muted,#667085);line-height:1.5}.best-engine-training-copy .bot-profile-avatar{flex:0 0 auto}
@media(max-width:720px){.best-engine-training-copy{flex-direction:column}}


/* v15.0.9 — keep the complete board inside the desktop viewport. */
@media (min-width:981px){
  body.is-playing-game{
    --tjk-play-board-size:min(calc(100dvh - 102px),calc(100vw - 470px));
  }
  body.is-playing-game .site-footer{display:none}
  body.is-playing-game main{height:calc(100dvh - 70px);min-height:0;overflow:hidden}
  body.is-playing-game .play-workspace{height:100%;padding:8px 12px}
  body.is-playing-game .computer-game-layout,
  body.is-playing-game .live-game-layout{
    grid-template-columns:minmax(0,var(--tjk-play-board-size)) minmax(320px,430px);
    width:min(100%,calc(var(--tjk-play-board-size) + 442px));
    height:100%;
    margin:0 auto;
    align-items:center;
  }
  body.is-playing-game .computer-board-card,
  body.is-playing-game .live-board-column{
    width:var(--tjk-play-board-size);
    height:var(--tjk-play-board-size);
    max-width:100%;
    max-height:100%;
  }
  body.is-playing-game .computer-board-wrap,
  body.is-playing-game .live-board-wrap{
    width:var(--tjk-play-board-size);
    height:var(--tjk-play-board-size);
    max-width:100%;
    max-height:100%;
    aspect-ratio:1;
  }
  body.is-playing-game .computer-board{width:100%;height:100%;max-height:none}
  body.is-playing-game .computer-side-card,
  body.is-playing-game .live-side-panel{height:var(--tjk-play-board-size);max-height:100%}
}

/* v15.1.0 clock placement, countdown beam and critical-time warning */
.game-clock-block {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:4px;
  min-width:118px;
  margin-left:auto;
}
.game-clock-block.top .clock-beam { order:2; }
.game-clock-block.top .live-clock,
.game-clock-block.top .computer-clock { order:1; }
.game-clock-block.bottom .clock-beam { order:0; }
.game-clock-block.bottom .live-clock,
.game-clock-block.bottom .computer-clock { order:1; }
.clock-beam {
  width:100%;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(103,121,148,.23);
  box-shadow:inset 0 0 0 1px rgba(91,110,139,.15);
}
.clock-beam > span {
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:#75ad3f;
  transition:width .1s linear,background-color .16s ease;
}
.clock-beam > span.is-low { background:#d92d20; box-shadow:0 0 12px rgba(217,45,32,.52); }
.computer-player-identity { min-width:0; }
.computer-player-row .computer-clock,
.live-player-card .live-clock { width:100%; min-width:0; margin:0; }

@media (min-width:981px) {
  body.is-playing-game .computer-player-row,
  body.is-playing-game .live-player-card {
    margin:8px 10px;
    border-radius:9px;
  }
  body.is-playing-game .computer-player-row:first-child,
  body.is-playing-game .live-player-card.top { margin-top:10px; }
  body.is-playing-game .computer-player-row:last-child,
  body.is-playing-game .live-player-card.bottom { margin-bottom:10px; }
  body.is-playing-game .game-clock-block { margin-right:8px; min-width:128px; }
}
@media(max-width:760px){
  .game-clock-block{min-width:98px;gap:3px}
  .clock-beam{height:5px}
}


/* v15.1.1 — louder game presentation, long clock line, screenshot-style player blocks. */
.computer-player-row .bot-game-avatar,
.live-player-card .live-player-avatar{display:none}
.computer-player-row,
.live-player-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  align-items:stretch;
  gap:8px;
}
.computer-player-identity-stacked,
.live-player-name-stacked{display:grid;gap:3px;min-width:0}
.computer-player-line,
.live-player-line{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
}
.computer-player-line strong,
.live-player-line strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.computer-presence-dot{width:12px;height:12px;border-radius:999px;background:#70b437;box-shadow:0 0 0 4px rgba(112,180,55,.12)}
.computer-player-rating,
.live-player-line span:last-child{font-weight:800;color:inherit;opacity:.95}
.game-clock-panel{display:grid;gap:8px}
.game-clock-block{
  min-width:0;
  margin:0;
  align-items:flex-start;
}
.game-clock-block.top,.game-clock-block.bottom{display:flex;align-items:flex-start;justify-content:flex-start}
.computer-clock,
.live-clock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:170px;
  margin:0;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(0,0,0,.58) !important;
  color:#f8fafc !important;
  font-size:3rem;
  line-height:1;
  letter-spacing:.04em;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.computer-player-row.is-active .computer-clock,
.live-player-card.is-active .live-clock{
  background:rgba(0,0,0,.62) !important;
  color:#f8fafc !important;
}
.computer-clock.is-low,
.live-clock.is-low,
.computer-clock.is-first-move-countdown,
.live-clock.is-first-move-countdown{
  background:rgba(111,18,18,.82) !important;
  color:#fff !important;
}
.clock-beam{
  width:100%;
  height:4px;
  border-radius:999px;
  background:rgba(86,112,46,.22);
  box-shadow:inset 0 0 0 1px rgba(140,190,72,.14),0 0 0 1px rgba(0,0,0,.15);
}
.clock-beam>span{background:#6cc238;box-shadow:0 0 12px rgba(108,194,56,.32)}
.clock-beam>span.is-low{background:#ef3d2f;box-shadow:0 0 14px rgba(239,61,47,.55)}
body.is-playing-game .computer-player-row,
body.is-playing-game .live-player-card{
  padding:10px 12px;
  background:rgba(0,0,0,.40);
  border-top:1px solid rgba(114,184,54,.92);
  border-bottom:1px solid rgba(114,184,54,.92);
}
body.is-playing-game .computer-player-row:first-child,
body.is-playing-game .live-player-card.top{margin-top:0}
body.is-playing-game .computer-player-row:last-child,
body.is-playing-game .live-player-card.bottom{margin-bottom:0}
body.is-playing-game .computer-player-row small,
body.is-playing-game .live-player-name span{color:#d6dfec}
body.is-playing-game .computer-side-card,
body.is-playing-game .live-side-panel{gap:0}
body.is-playing-game .computer-moves,
body.is-playing-game .live-moves{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
@media (max-width:760px){
  .computer-clock,.live-clock{min-width:118px;font-size:2.2rem;padding:6px 10px}
  .clock-beam{height:3px}
}

/* v15.1.5 live-game chat */
.live-chat{display:grid;grid-template-rows:auto minmax(70px,1fr) auto;min-height:120px;max-height:180px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.24)}
.live-chat>header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;color:#d9e3f1;font-size:.78rem}
.live-chat-messages{overflow:auto;padding:7px 10px;display:grid;align-content:start;gap:5px}
.live-chat-messages>p{margin:8px 0;color:#8fa0b8;font-size:.78rem}
.live-chat-message{display:grid;grid-template-columns:auto 1fr;gap:7px;font-size:.78rem;line-height:1.35;color:#dce5f2}
.live-chat-message b{color:#8fc2ff;white-space:nowrap}
.live-chat-message.is-own b{color:#9bd05a}
.live-chat-form{display:grid;grid-template-columns:1fr 38px;border-top:1px solid rgba(255,255,255,.08)}
.live-chat-form input{min-width:0;border:0;padding:9px 10px;background:rgba(0,0,0,.28);color:#fff;outline:none}
.live-chat-form input::placeholder{color:#8794a8}
.live-chat-form button{border:0;border-left:1px solid rgba(255,255,255,.08);background:rgba(91,115,160,.22);color:#fff;cursor:pointer}
@media(min-width:981px){body.is-playing-game .live-side-panel{grid-template-rows:auto auto minmax(100px,1fr) minmax(120px,165px) auto auto}}
@media(max-width:760px){.live-chat{max-height:130px;min-height:100px}.live-chat-messages{max-height:75px}}


/* v15.1.68 — captured material on both player cards. */
.tjk-captured-material{display:flex;align-items:center;gap:5px;min-height:21px;margin-top:1px}
.tjk-captured-pieces{display:inline-flex;align-items:center;min-width:0;letter-spacing:-.16em;font-family:"Segoe UI Symbol","DejaVu Sans",sans-serif;font-size:1.08rem;line-height:1;color:#475569;white-space:nowrap}
.tjk-material-edge{display:inline-block;min-width:0;padding:0;border-radius:0;background:transparent;color:#4f6f39;font-size:.68rem;font-weight:850;line-height:1;box-shadow:none}
body.is-playing-game .tjk-captured-pieces{color:#dce5f2}
body.is-playing-game .tjk-material-edge{background:transparent;color:#bfe88f}
@media(max-width:760px){.tjk-captured-material{gap:5px;min-height:18px}.tjk-captured-pieces{font-size:.95rem}.tjk-material-edge{font-size:.66rem;padding:0}}

/* v15.1.69: material lead is a small number immediately to the right of captured pieces. */
@media(max-width:560px){.tjk-material-edge{font-size:.64rem}}

/* v15.1.74 — Lichess-like phone game layout: player/clock, board and the other
   player are visible as one page flow. The side panel is no longer a tiny
   independently scrolling window. */
@media(max-width:760px) and (orientation:portrait){
  body.is-playing-game{overflow-x:hidden!important}
  body.is-playing-game main{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  body.is-playing-game .play-workspace{width:100%!important;max-width:100vw!important;padding:0!important;overflow:visible!important}
  body.is-playing-game .play-heading{display:none!important}
  body.is-playing-game .computer-game-layout,
  body.is-playing-game .live-game-layout{
    display:flex!important;flex-direction:column!important;gap:0!important;
    width:100%!important;max-width:100vw!important;height:auto!important;min-height:100dvh!important;
    margin:0!important;padding:0!important;overflow:visible!important;align-items:stretch!important;
  }
  body.is-playing-game .computer-side-card,
  body.is-playing-game .live-side-panel{display:contents!important;max-height:none!important;height:auto!important;overflow:visible!important}
  body.is-playing-game .computer-board-card,
  body.is-playing-game .live-board-column{order:2!important;width:100%!important;max-width:100vw!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  body.is-playing-game .computer-board-wrap,
  body.is-playing-game .live-board-wrap{
    width:100%!important;max-width:100vw!important;height:auto!important;aspect-ratio:1!important;
    margin:0!important;border-radius:0!important;
  }
  body.is-playing-game .computer-player-row,
  body.is-playing-game .live-player-card{
    width:100%!important;min-height:56px!important;margin:0!important;padding:5px 8px!important;border-radius:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto!important;gap:8px!important;align-items:center!important;
  }
  body.is-playing-game .computer-player-row[data-player-position="top"],
  body.is-playing-game .live-player-card.top{order:1!important}
  body.is-playing-game .computer-player-row[data-player-position="bottom"],
  body.is-playing-game .live-player-card.bottom{order:3!important}
  body.is-playing-game .computer-player-identity,
  body.is-playing-game .live-player-name{grid-column:1!important;grid-row:1!important;align-self:center!important}
  body.is-playing-game .game-clock-panel{grid-column:2!important;grid-row:1!important;display:grid!important;gap:2px!important;width:clamp(92px,28vw,126px)!important;min-width:0!important;align-self:center!important}
  body.is-playing-game .game-clock-block{width:100%!important;min-width:0!important;align-items:stretch!important}
  body.is-playing-game .computer-clock,
  body.is-playing-game .live-clock{width:100%!important;min-width:0!important;padding:4px 7px!important;border-radius:7px!important;font-size:clamp(1.35rem,7vw,1.9rem)!important;line-height:1!important;box-shadow:none!important}
  body.is-playing-game .computer-player-line,
  body.is-playing-game .live-player-line{grid-template-columns:auto minmax(0,1fr) auto!important;gap:6px!important;font-size:.78rem!important}
  body.is-playing-game .computer-player-row small,
  body.is-playing-game .live-player-name span{font-size:.67rem!important}
  body.is-playing-game .tjk-captured-material{min-height:15px!important;margin-top:0!important}
  body.is-playing-game .tjk-captured-pieces{font-size:.83rem!important}
  body.is-playing-game .computer-status{order:4!important;margin:0!important;border-radius:0!important;padding:6px 9px!important;min-height:0!important}
  body.is-playing-game .bot-speech{order:5!important;margin:0!important;border-radius:0!important}
  body.is-playing-game .computer-moves{order:6!important;max-height:none!important;overflow:visible!important;border-radius:0!important}
  body.is-playing-game .computer-actions{order:7!important;position:static!important;padding:7px!important;display:flex!important;flex-wrap:wrap!important}
  body.is-playing-game .live-game-head{order:4!important;padding:6px 9px!important}
  body.is-playing-game .live-moves{order:5!important;max-height:none!important;overflow:visible!important}
  body.is-playing-game .live-chat{order:6!important;max-height:170px!important;min-height:90px!important}
  body.is-playing-game .live-side-footer{order:7!important}
  body.is-playing-game .live-actions{position:static!important;padding:7px!important}
  body.is-playing-game .live-abort-x,body.is-playing-game .computer-abort-x{width:31px!important;height:31px!important;top:4px!important;left:4px!important}
}
@media(max-width:380px) and (orientation:portrait){
  body.is-playing-game .computer-player-row,body.is-playing-game .live-player-card{padding-inline:6px!important;gap:5px!important}
  body.is-playing-game .game-clock-panel{width:88px!important}
  body.is-playing-game .computer-presence-dot{width:8px;height:8px}
}
@media(max-width:760px){body.is-playing-game .site-footer{display:none!important}}

/* v15.1.77 — real-opponent settings open as a modal over the site, like a chess lobby setup. */
.play-layout:has(.play-setup){min-height:calc(100dvh - 72px);grid-template-columns:1fr!important;place-items:center;background:linear-gradient(145deg,#eef3fa,#f8fafc)}
.play-layout:has(.play-setup) .play-game-shell{position:fixed;z-index:9800;inset:72px 0 0;border:0!important;border-radius:0!important;background:rgba(7,13,24,.62)!important;backdrop-filter:blur(3px);box-shadow:none!important;pointer-events:none}
.play-layout:has(.play-setup) .play-game-shell>.play-empty{display:none!important}
.play-layout:has(.play-setup) .play-setup{position:fixed;z-index:9810;left:50%;top:calc(50% + 34px);transform:translate(-50%,-50%);width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 96px);overflow:auto;margin:0!important;padding:22px!important;border-radius:15px!important;box-shadow:0 28px 80px rgba(0,0,0,.42)!important}
.live-setup-title{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;margin-bottom:14px}.live-setup-title h2{margin:0 0 5px!important}.live-setup-title p{margin:0!important}.live-setup-close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#e8edf4;color:#19283e;font-size:1.55rem;line-height:1;cursor:pointer}.live-setup-close:hover{background:#dce4ef}
html[data-theme="dark"] .play-layout:has(.play-setup){background:#111923}html[data-theme="dark"] .live-setup-close{background:#2a3442;color:#eef4fb}
@media(max-width:760px){.play-layout:has(.play-setup) .play-game-shell{inset:58px 0 0}.play-layout:has(.play-setup) .play-setup{top:50%;width:min(96vw,620px);max-height:calc(100dvh - 76px);padding:16px!important}.live-setup-title{gap:8px}.live-setup-title h2{font-size:1.25rem}.play-setup .play-options{grid-template-columns:1fr 1fr!important}}
@media(max-width:430px){.play-setup .play-options{grid-template-columns:1fr!important}.play-layout:has(.play-setup) .play-setup{padding:13px!important}}

/* v15.1.86 — completed games keep their notation interactive. */
.live-move-button{pointer-events:auto!important;cursor:pointer}


/* v15.1.98 — game notation remains usable after the game, compact flip control. */
body.is-playing-game .computer-side-card.is-game-over .computer-moves{
  min-height:180px;max-height:min(330px,38dvh);overflow:auto;
}
body.is-playing-game .computer-actions .computer-flip-icon{
  flex:0 0 auto;width:42px;min-width:42px;max-width:42px;height:38px;min-height:38px;padding:0;
  display:grid;place-items:center;font-size:1.35rem;line-height:1;
}
@media(max-width:760px) and (orientation:portrait){
  body.is-playing-game .computer-side-card.is-game-over .computer-moves{
    min-height:120px!important;max-height:210px!important;overflow:auto!important;
  }
  body.is-playing-game .computer-actions .computer-flip-icon{width:38px;min-width:38px;height:36px;min-height:36px}
}

/* v15.1.117 — standard human-game setup overlays the current view instead of replacing it. */
.standalone-view[data-view="play"].is-modal-active{display:block!important;position:fixed!important;inset:0!important;z-index:9700!important;background:transparent!important;pointer-events:none!important;overflow:visible!important}
.standalone-view[data-view="play"].is-modal-active .play-workspace{position:static!important;width:0!important;height:0!important;margin:0!important;padding:0!important;overflow:visible!important;pointer-events:none!important}
.standalone-view[data-view="play"].is-modal-active .play-heading{display:none!important}
.standalone-view[data-view="play"].is-modal-active [data-live-play-root]{position:static!important;pointer-events:auto!important}
.standalone-view[data-view="play"].is-modal-active .play-layout:has(.play-setup){min-height:0!important;background:transparent!important}
.standalone-view[data-view="play"].is-modal-active .play-layout:has(.play-setup) .play-game-shell{pointer-events:auto!important}
body.has-live-setup-overlay{overflow:hidden}

/* v15.1.137 — current board artwork for captured material and compact post-game tools. */
.tjk-captured-pieces{display:inline-flex!important;align-items:center;letter-spacing:0!important;font-family:inherit!important}
.tjk-captured-pieces .tjk-captured-piece{display:inline-block!important;flex:0 0 auto;width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;margin:0 0 0 -4px!important;object-fit:contain!important}
.tjk-captured-pieces .tjk-captured-piece:first-child{margin-left:0!important}
.computer-action-short{display:none}
@media(max-width:760px) and (orientation:portrait){
  body.is-playing-game .computer-moves{position:relative!important;z-index:1!important}
  body.is-playing-game .computer-actions{position:relative!important;inset:auto!important;transform:none!important;z-index:2!important;align-self:stretch!important;width:100%!important;margin:0!important}
  body.is-playing-game .computer-actions.is-result-actions{display:grid!important;grid-template-columns:42px minmax(0,1fr) minmax(0,1fr)!important;gap:6px!important;padding:6px 8px!important}
  body.is-playing-game .computer-actions.is-result-actions .computer-flip-icon{grid-column:1!important;width:42px!important;min-width:42px!important;height:36px!important;padding:0!important}
  body.is-playing-game .computer-actions.is-result-actions .computer-analysis-button{grid-column:2!important;min-width:0!important;height:36px!important;padding:5px 7px!important}
  body.is-playing-game .computer-actions.is-result-actions .computer-analysis-board-button{grid-column:3!important;min-width:0!important;height:36px!important;padding:5px 7px!important}
  body.is-playing-game .computer-actions.is-result-actions .play-primary{grid-column:1/-1!important;min-height:42px!important;margin:0!important}
  body.is-playing-game .computer-actions.is-result-actions .computer-action-long{display:none!important}
  body.is-playing-game .computer-actions.is-result-actions .computer-action-short{display:inline!important}
  body.is-playing-game .tjk-captured-pieces .tjk-captured-piece{width:15px!important;height:15px!important;max-width:15px!important;max-height:15px!important;margin-left:-3px!important}
}


/* v15.1.150 — more vertical space for played-move notation on desktop. */
@media(min-width:981px){
  body.is-playing-game .computer-side-card{grid-template-rows:auto auto auto minmax(220px,1fr) auto auto!important}
  body.is-playing-game .live-side-panel{grid-template-rows:auto auto minmax(220px,1fr) minmax(100px,145px) auto auto!important}
  body.is-playing-game .computer-moves,body.is-playing-game .live-moves{min-height:220px!important;overflow:auto!important}
  body.is-playing-game .computer-side-card.is-game-over .computer-moves{min-height:260px!important;max-height:min(440px,50dvh)!important}
}


/* v15.1.152 — prevent the post-game viewing status from colliding with the
   two-line bot identity on phones; keep clicked moves comfortably centered. */
@media(max-width:760px) and (orientation:portrait){
  body.is-playing-game .computer-player-row{
    min-height:72px!important;
    height:auto!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    overflow:visible!important;
  }
  body.is-playing-game .computer-player-identity-stacked{
    min-height:52px!important;
    align-content:center!important;
    gap:3px!important;
  }
  body.is-playing-game .computer-player-line{line-height:1.15!important}
  body.is-playing-game .computer-player-row small{
    display:block!important;
    min-height:14px!important;
    margin-top:2px!important;
    line-height:1.2!important;
  }
  body.is-playing-game .computer-status{
    position:relative!important;
    z-index:1!important;
    line-height:1.28!important;
    white-space:normal!important;
  }
  body.is-playing-game .computer-side-card.is-game-over .computer-moves{
    min-height:160px!important;
    max-height:min(300px,38dvh)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  body.is-playing-game .computer-actions.is-result-actions .computer-flip-icon{
    transform:translateY(6px)!important;
  }
}

/* v15.1.155 — post-game controls no longer overlap notation; short result toast. */
body.is-playing-game .computer-side-card.is-game-over .computer-moves{
  position:relative!important;
  z-index:3!important;
}
body.is-playing-game .computer-side-card.is-game-over .computer-move-button{
  position:relative!important;
  z-index:1!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
body.is-playing-game .computer-actions.is-result-actions{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  gap:7px!important;
}
body.is-playing-game .computer-actions.is-result-actions .computer-analysis-button{
  grid-column:1/-1!important;
  grid-row:auto!important;
  min-width:0!important;
}
body.is-playing-game .computer-actions.is-result-actions .computer-analysis-board-button{
  grid-column:1!important;
  grid-row:auto!important;
  min-width:0!important;
}
body.is-playing-game .computer-actions.is-result-actions .computer-flip-icon{
  grid-column:2!important;
  grid-row:auto!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  transform:none!important;
}
body.is-playing-game .computer-actions.is-result-actions .play-primary{
  grid-column:1/-1!important;
  grid-row:auto!important;
}

.tjk-result-feedback{
  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  padding:20px;
  pointer-events:none;
  opacity:0;
  transform:scale(.97);
  transition:opacity .18s ease,transform .18s ease;
}
.tjk-result-feedback.is-visible{opacity:1;transform:scale(1)}
.tjk-result-feedback-card{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:min(420px,calc(100vw - 32px));
  max-width:520px;
  padding:20px 24px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(8,16,30,.94);
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
}
.tjk-result-feedback-icon{
  display:grid;
  place-items:center;
  flex:0 0 64px;
  width:64px;
  height:64px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  font-size:2.25rem;
}
.tjk-result-feedback-card strong{display:block;font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.05;letter-spacing:-.025em}
.tjk-result-feedback-card small{display:block;margin-top:6px;color:#c7d2e1;font-size:.92rem}
.tjk-result-feedback.is-victory .tjk-result-feedback-card{box-shadow:0 24px 70px rgba(0,0,0,.42),inset 4px 0 0 #78a73d}
.tjk-result-feedback.is-draw .tjk-result-feedback-card{box-shadow:0 24px 70px rgba(0,0,0,.42),inset 4px 0 0 #c59a36}
.tjk-result-feedback.is-defeat .tjk-result-feedback-card{box-shadow:0 24px 70px rgba(0,0,0,.42),inset 4px 0 0 #b94a48}
@media(max-width:760px){
  body.is-playing-game .computer-actions.is-result-actions{
    grid-template-columns:minmax(0,1fr) 42px!important;
    padding:6px 8px!important;
  }
  body.is-playing-game .computer-actions.is-result-actions .computer-flip-icon{
    width:42px!important;min-width:42px!important;max-width:42px!important;height:36px!important;min-height:36px!important;
  }
  .tjk-result-feedback-card{min-width:0;width:min(92vw,430px);padding:17px 19px;border-radius:15px}
  .tjk-result-feedback-icon{flex-basis:52px;width:52px;height:52px;border-radius:14px;font-size:1.85rem}
}

/* v15.1.156 — compact Chess.com-like post-game card over the board. */
body.is-playing-game .computer-actions.is-result-actions{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  gap:7px!important;
  padding:8px!important;
}
body.is-playing-game .computer-actions.is-result-actions .computer-result-open{
  grid-column:1!important;
  min-width:0!important;
}
body.is-playing-game .computer-actions.is-result-actions .computer-flip-icon{
  grid-column:2!important;
  width:44px!important;min-width:44px!important;max-width:44px!important;
  height:40px!important;min-height:40px!important;padding:0!important;transform:none!important;
}
body.is-playing-game .computer-actions.is-result-actions .play-primary{
  grid-column:1/-1!important;
}
.computer-result-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(5,12,23,.30);
  backdrop-filter:blur(1.5px);
}
.computer-result-card{
  position:relative;
  width:min(410px,88%);
  padding:22px 22px 18px;
  border:1px solid #3a4657;
  border-radius:16px;
  background:#1c232d;
  color:#f5f7fb;
  text-align:center;
  box-shadow:0 22px 60px rgba(0,0,0,.48);
}
.computer-result-close{
  position:absolute;top:9px;right:9px;
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid #465265;border-radius:9px;background:#252e3a;color:#dbe4ef;
  font-size:1.35rem;line-height:1;cursor:pointer;
}
.computer-result-close:hover{background:#303b49}
.computer-result-icon{
  display:grid;place-items:center;width:58px;height:58px;margin:0 auto 10px;
  border-radius:15px;background:#2b3542;font-size:2rem;
}
.computer-result-card h2{margin:0;font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.025em}
.computer-result-card p{margin:7px 0 16px;color:#b8c3d1;font-weight:650}
.computer-result-card.is-victory,.computer-result-overlay.is-victory .computer-result-card{box-shadow:0 22px 60px rgba(0,0,0,.48),inset 4px 0 0 #78a73d}
.computer-result-overlay.is-draw .computer-result-card{box-shadow:0 22px 60px rgba(0,0,0,.48),inset 4px 0 0 #c59a36}
.computer-result-overlay.is-defeat .computer-result-card{box-shadow:0 22px 60px rgba(0,0,0,.48),inset 4px 0 0 #b94a48}
.computer-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.computer-result-actions .play-primary{grid-column:1/-1;min-height:44px}
.computer-result-actions .play-secondary{min-height:40px;background:#252e3a;color:#edf3fb;border-color:#465265}
.computer-result-actions .play-secondary:hover{background:#303b49}

@media(max-width:760px){
  body.is-playing-game .computer-actions.is-result-actions{grid-template-columns:minmax(0,1fr) 42px!important}
  body.is-playing-game .computer-actions.is-result-actions .computer-flip-icon{width:42px!important;min-width:42px!important;max-width:42px!important;height:36px!important;min-height:36px!important}
  .computer-result-overlay{padding:10px}
  .computer-result-card{width:min(390px,94%);padding:18px 16px 15px;border-radius:14px}
  .computer-result-icon{width:50px;height:50px;font-size:1.7rem}
}

/* v15.1.156 — live-game result card uses the same compact board overlay. */
.live-game-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  display:grid!important;
  place-items:center!important;
  padding:18px!important;
  background:rgba(5,12,23,.30)!important;
  backdrop-filter:blur(1.5px)!important;
}
.live-result-card{
  position:relative!important;
  width:min(410px,88%)!important;
  padding:22px 22px 18px!important;
  border:1px solid #3a4657!important;
  border-radius:16px!important;
  background:#1c232d!important;
  color:#f5f7fb!important;
  text-align:center!important;
  box-shadow:0 22px 60px rgba(0,0,0,.48)!important;
}
.live-result-card h2{margin:0!important;font-size:clamp(1.55rem,3vw,2.15rem)!important;letter-spacing:-.025em!important}
.live-result-card p{margin:7px 0 14px!important;color:#b8c3d1!important;font-weight:650!important}
.live-result-close{
  position:absolute;top:9px;right:9px;display:grid;place-items:center;width:34px;height:34px;
  border:1px solid #465265;border-radius:9px;background:#252e3a;color:#dbe4ef;font-size:1.35rem;line-height:1;cursor:pointer;
}
.live-result-close:hover{background:#303b49}
.live-result-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 10px;border-radius:15px;background:#2b3542;font-size:2rem}
.live-game-overlay.is-victory .live-result-card{box-shadow:0 22px 60px rgba(0,0,0,.48),inset 4px 0 0 #78a73d!important}
.live-game-overlay.is-draw .live-result-card{box-shadow:0 22px 60px rgba(0,0,0,.48),inset 4px 0 0 #c59a36!important}
.live-game-overlay.is-defeat .live-result-card{box-shadow:0 22px 60px rgba(0,0,0,.48),inset 4px 0 0 #b94a48!important}
.live-result-rating{display:flex;justify-content:center;gap:10px;align-items:baseline;margin:0 0 14px!important;color:#dbe5f1!important}
.live-result-rating strong{font-size:1.08rem}.live-result-rating span{font-weight:900}
.live-result-rating.positive span{color:#8bcf5c}.live-result-rating.negative span{color:#ff7d77}
.live-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.live-result-actions .play-primary{grid-column:1/-1;min-height:44px}
.live-result-actions .play-secondary{min-height:40px;background:#252e3a;color:#edf3fb;border-color:#465265}
.live-result-actions .play-secondary:hover{background:#303b49}
@media(max-width:760px){
  .live-game-overlay{padding:10px!important}
  .live-result-card{width:min(390px,94%)!important;padding:18px 16px 15px!important;border-radius:14px!important}
  .live-result-icon{width:50px;height:50px;font-size:1.7rem}
}

/* v15.1.162 — compact live-game controls and hard overflow guard. */
body.is-playing-game .live-actions.live-actions-compact{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  padding:7px 9px!important;
}
body.is-playing-game .live-actions.live-actions-compact .live-action-icon{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  font-size:1.35rem!important;
  line-height:1!important;
}
body.is-playing-game .live-actions.live-actions-compact .live-action-icon span{display:block;line-height:1!important}
@media(min-width:981px){
  body.is-playing-game .live-side-panel{
    grid-template-rows:auto auto minmax(0,1fr) minmax(86px,126px) auto auto!important;
    min-height:0!important;
    max-height:var(--tjk-play-board-size)!important;
    overflow:hidden!important;
  }
  body.is-playing-game .live-moves{
    min-height:0!important;
    max-height:none!important;
    overflow:auto!important;
  }
  body.is-playing-game .live-chat{
    min-height:0!important;
    max-height:126px!important;
    overflow:hidden!important;
  }
  body.is-playing-game .live-chat-messages{min-height:0!important;overflow:auto!important}
  body.is-playing-game .live-side-footer{min-height:0!important;overflow:hidden!important}
  body.is-playing-game .live-game-message{
    box-sizing:border-box!important;
    min-height:38px!important;
    padding:7px 10px!important;
    line-height:1.25!important;
  }
}
@media(min-width:981px) and (max-height:960px){
  body.is-playing-game .live-player-card{gap:5px!important;padding:7px 10px!important}
  body.is-playing-game .live-clock{min-width:132px!important;font-size:2.5rem!important;padding:6px 10px!important}
  body.is-playing-game .game-clock-panel{gap:5px!important}
  body.is-playing-game .live-game-head{padding:7px 10px!important}
  body.is-playing-game .live-chat{max-height:112px!important}
  body.is-playing-game .live-actions.live-actions-compact .live-action-icon{height:36px!important;min-height:36px!important}
}
@media(max-width:760px){
  body.is-playing-game .live-actions.live-actions-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important;padding:5px 6px!important;gap:5px!important}
  body.is-playing-game .live-actions.live-actions-compact .live-action-icon{height:36px!important;min-height:36px!important;font-size:1.2rem!important}
}