/* Kambana OS - Chess */
.app-chess { display: flex; flex-direction: column; background: var(--surface-2); outline: none; position: relative; }
.app-chess .ch-main { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 18px; }
.app-chess .ch-main.stacked { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 10px; overflow-y: auto; }
.app-chess .ch-boardcol { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }

/* players */
.app-chess .ch-player { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px; }
.app-chess .ch-avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); flex: 0 0 auto; transition: box-shadow .2s; }
.app-chess .ch-player.turn .ch-avatar { box-shadow: 0 0 0 2px var(--accent); }
.app-chess .ch-player.thinking .ch-avatar { animation: ch-think 1.2s ease-in-out infinite; }
@keyframes ch-think { 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .25); } }
.app-chess .ch-dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .55); }
.app-chess .ch-dot.w { background: #fbfaf7; }
.app-chess .ch-dot.b { background: #2b3038; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.app-chess .ch-pname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.app-chess .ch-pname b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-chess .ch-caps { display: flex; align-items: center; height: 17px; }
.app-chess .ch-caps .pc.mini { width: 17px; height: 17px; margin-right: -5px; }
.app-chess .ch-caps em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-2); margin-left: 9px; }
.app-chess .ch-clock { font-family: var(--font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 4px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); min-width: 84px; text-align: center; }
.app-chess .ch-clock[hidden] { display: none; }
.app-chess .ch-clock.run { background: var(--text); color: var(--surface); box-shadow: none; }
.app-chess .ch-clock.low.run { background: #e5484d; color: #fff; }

/* board */
.app-chess .ch-board {
  --light: #e8e4c9; --dark: #7a9a6a; --last: rgba(255, 213, 79, .55); --sel: rgba(255, 213, 79, .75); --hint: rgba(20, 30, 20, .28);
  position: relative; width: 480px; height: 480px; border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .12);
}
.app-chess .ch-board[data-theme="walnut"] { --light: #ecd8b4; --dark: #a97c55; }
.app-chess .ch-board[data-theme="ocean"] { --light: #dfe7ee; --dark: #6f8fae; --last: rgba(125, 211, 252, .55); --sel: rgba(125, 211, 252, .8); }
.app-chess .ch-board[data-theme="rose"] { --light: #f3e3e1; --dark: #bd8189; }
.app-chess .ch-board[data-theme="slate"] { --light: #d4d9e0; --dark: #5e6a7b; --last: rgba(165, 180, 252, .55); --sel: rgba(165, 180, 252, .8); }
.app-chess .ch-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.app-chess .ch-sq { position: relative; background: var(--dark); }
.app-chess .ch-sq.light { background: var(--light); }
.app-chess .ch-sq::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.app-chess .ch-sq.last::before { background: var(--last); }
.app-chess .ch-sq.sel::before { background: var(--sel); }
.app-chess .ch-sq.check::before { background: radial-gradient(circle, rgba(255, 40, 40, .95) 0, rgba(240, 30, 30, .6) 35%, rgba(200, 0, 0, 0) 72%); }
.app-chess .ch-sq.dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; border-radius: 50%; transform: translate(-50%, -50%); background: var(--hint); }
.app-chess .ch-sq.ring::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 62%, var(--hint) 64% 72%, transparent 74%); }
.app-chess .ch-sq.hover { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .75); }
.app-chess .ch-sq i { position: absolute; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; }
.app-chess .ch-sq .ch-rank { left: 4px; top: 4px; }
.app-chess .ch-sq .ch-file { right: 4px; bottom: 3px; }
.app-chess .ch-sq.light i { color: var(--dark); }
.app-chess .ch-sq.dark i { color: var(--light); }
.app-chess .ch-board.no-coords .ch-sq i { display: none; }
.app-chess .ch-board.reviewing .ch-squares { filter: saturate(.75); }

.app-chess .ch-pieces { position: absolute; inset: 0; pointer-events: none; }
.app-chess .ch-piece {
  position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; display: grid; place-items: center;
  transition: transform .2s cubic-bezier(.3, .8, .3, 1); will-change: transform; z-index: 2;
}
.app-chess .ch-piece.instant { transition: none; }
.app-chess .ch-piece.dragging { transition: none; z-index: 20; cursor: grabbing; }
.app-chess .ch-piece.dragging .pc { transform: scale(1.14); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.app-chess .ch-piece.captured { animation: ch-captured .25s ease-in both; }
@keyframes ch-captured { to { opacity: 0; transform: scale(.4); } }
.app-chess .ch-piece .pc { width: 88%; height: 88%; transition: transform .15s; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, .28)); }
.app-chess .ch-piece.promoted .pc { animation: ch-promo .45s var(--ease); }
@keyframes ch-promo { 0% { transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.2); } 100% { transform: none; } }
.app-chess .ch-piece.nope .pc { animation: ch-nope .3s; }
@keyframes ch-nope { 25%, 75% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.app-chess .ch-piece.winner .pc { animation: ch-win 1.2s var(--ease) 2; filter: drop-shadow(0 0 10px rgba(250, 204, 21, .95)); }
@keyframes ch-win { 30% { transform: translateY(-18%) scale(1.12); } 60% { transform: none; } }
.app-chess .ch-piece.loser .pc { transform: rotate(80deg) translate(10%, 5%); transition: transform .8s cubic-bezier(.5, 0, .7, .4) .3s; }

/* piece art */
.app-chess .pc path, .app-chess .pc circle { stroke-linejoin: round; stroke-width: 3.2; }
.app-chess .pc-w path, .app-chess .pc-w circle { fill: #fbfaf7; stroke: #20242b; }
.app-chess .pc-b path, .app-chess .pc-b circle { fill: #2b3038; stroke: #0e1013; }
.app-chess .pc .pc-line { fill: none !important; stroke-width: 3; stroke-linecap: round; }
.app-chess .pc-b .pc-line { stroke: #d9d6cf; }
.app-chess .pc-w .pc-eye { fill: #20242b !important; stroke: none; }
.app-chess .pc-b .pc-eye { fill: #e8e6e1 !important; stroke: none; }
.app-chess .pc.mini path, .app-chess .pc.mini circle { stroke-width: 5; }

.app-chess .ch-arrows { position: absolute; inset: 0; pointer-events: none; color: rgba(255, 170, 0, .85); z-index: 15; }
.app-chess .ch-arrows svg { width: 100%; height: 100%; display: block; animation: ch-fade .3s both; }
@keyframes ch-fade { from { opacity: 0; } }

.app-chess .ch-promo {
  position: absolute; width: 12.5%; z-index: 30; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); transform: scale(.9); opacity: 0; transition: transform .15s, opacity .15s;
}
.app-chess .ch-promo.up { flex-direction: column-reverse; }
.app-chess .ch-promo.show { transform: none; opacity: 1; }
.app-chess .ch-promo[hidden] { display: none; }
.app-chess .ch-promo-btn { aspect-ratio: 1; border: 0; background: none; display: grid; place-items: center; padding: 6%; }
.app-chess .ch-promo-btn:hover { background: var(--tile-hover); }
.app-chess .ch-promo-btn .pc { width: 100%; height: 100%; }
.app-chess .ch-promo-x { border: 0; background: var(--surface-2); height: 22px; color: var(--text-2); display: grid; place-items: center; }

.app-chess .ch-result { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .25s; }
.app-chess .ch-result.show { opacity: 1; }
.app-chess .ch-result[hidden] { display: none; }
.app-chess .ch-result-card {
  width: min(300px, 86%); padding: 18px 16px 16px; border-radius: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--glass-border);
  transform: translateY(10px) scale(.96); transition: transform .3s var(--ease);
}
.app-chess .ch-result.show .ch-result-card { transform: none; }
.app-chess .ch-result-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--tile); }
.app-chess .ch-result-card.win .ch-result-ic { background: linear-gradient(140deg, #fde68a, #f59e0b); }
.app-chess .ch-result-ic .pc { width: 48px; height: 48px; }
.app-chess .ch-result-card h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 24px; }
.app-chess .ch-result-card p { margin: 0; color: var(--text-2); font-size: 13px; }
.app-chess .ch-result-actions { display: flex; gap: 6px; margin-top: 12px; }

/* side panel */
.app-chess .ch-side { width: 290px; flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: 100%; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.app-chess .ch-main.stacked .ch-side { width: 100%; max-width: 640px; align-self: center; max-height: none; flex: 0 0 auto; }
.app-chess .ch-side-head { display: flex; align-items: center; gap: 4px; }
.app-chess .ch-side-head .btn .ic { display: inline; }
.app-chess .ch-side-head .icon-btn.on { color: #e5484d; }
.app-chess .ch-status { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
.app-chess .ch-status .spinner { width: 15px; height: 15px; flex: 0 0 auto; }
.app-chess .ch-status .ic { color: var(--accent); }
.app-chess .ch-moves { flex: 1; min-height: 90px; overflow-y: auto; display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; }
.app-chess .ch-main.stacked .ch-moves { max-height: 160px; }
.app-chess .ch-moves-empty { color: var(--text-3); font-size: 12.5px; padding: 8px 6px; }
.app-chess .ch-mrow { display: grid; grid-template-columns: 34px 1fr 1fr; align-items: center; min-height: 28px; border-radius: 7px; }
.app-chess .ch-mrow:nth-child(odd) { background: var(--surface-2); }
.app-chess .ch-mno { color: var(--text-3); padding-left: 8px; font-size: 12px; }
.app-chess .ch-mv { border: 0; background: none; text-align: left; padding: 3px 8px; border-radius: 6px; font-weight: 600; color: var(--text); font-family: var(--font); font-size: 13px; }
.app-chess .ch-mv:hover { background: var(--tile-hover); }
.app-chess .ch-mv.on { background: rgba(var(--accent-rgb), .22); }
.app-chess .ch-mres { text-align: center; font-weight: 800; padding: 8px; color: var(--text-2); }
.app-chess .ch-nav { display: flex; justify-content: center; gap: 4px; }
.app-chess .ch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.app-chess .ch-actions .btn { justify-content: flex-start; }
.app-chess .ch-actions .btn .ic { display: inline; }
.app-chess .ch-actions .btn:last-child { grid-column: 1 / -1; justify-content: center; }
.app-chess .ch-main.stacked .ch-actions { grid-template-columns: repeat(5, 1fr); }
.app-chess .ch-main.stacked .ch-actions .btn { justify-content: center; padding: 0 6px; }
.app-chess .ch-main.stacked .ch-actions .btn:last-child { grid-column: auto; }

/* sheets */
.app-chess .ch-sheet-layer { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .16s; }
.app-chess .ch-sheet-layer.show { opacity: 1; }
.app-chess .ch-sheet-layer[hidden] { display: none; }
.app-chess .ch-sheet { width: min(460px, 100%); max-height: 100%; overflow: auto; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); transform: scale(.96); transition: transform .2s var(--ease); }
.app-chess .ch-sheet-layer.show .ch-sheet { transform: none; }
.app-chess .ch-sheet h2 { margin: 0 0 14px; font-size: 17px; }
.app-chess .ch-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.app-chess .ch-form { display: flex; flex-direction: column; gap: 14px; }
.app-chess .ch-form-ai { display: flex; flex-direction: column; gap: 14px; }
.app-chess .ch-form-ai[hidden] { display: none; }
.app-chess .ch-field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.app-chess .ch-field b { color: var(--text); }
.app-chess .ch-field .seg { align-self: flex-start; flex-wrap: wrap; }
.app-chess .ch-field .select { align-self: flex-start; min-width: 180px; }
.app-chess .ch-stats { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.app-chess .ch-stats-row { display: grid; grid-template-columns: 1.6fr .8fr .7fr .7fr .7fr .9fr; gap: 6px; padding: 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.app-chess .ch-stats-row:nth-child(even):not(.head) { background: var(--surface-2); }
.app-chess .ch-stats-row.head { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.app-chess .ch-stats small { margin-top: 8px; padding: 0 8px; }

.reduce-motion .app-chess .ch-piece, .reduce-motion .app-chess .ch-piece .pc { transition: none !important; animation: none !important; }

@media (max-width: 759px) {
  .app-chess .ch-player { height: 38px; }
  .app-chess .ch-clock { font-size: 17px; min-width: 70px; padding: 3px 8px; }
  .app-chess .ch-actions .btn span { display: none; }
  .app-chess .ch-sq i { font-size: 9px; }
}