@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}
.cg-wrap {
  box-sizing: content-box;
  position: relative;
  display: block;
}

cg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
}

cg-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 0;
  background-size: cover;
}

.cg-wrap.manipulable cg-board {
  cursor: pointer;
}

cg-board square {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
}

cg-board square.move-dest {
  pointer-events: auto;
}

cg-board square.last-move {
  will-change: transform;
}

.cg-wrap piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  background-size: cover;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}

cg-board piece.dragging {
  cursor: move;
  /* !important to override z-index from 3D piece inline style */
  z-index: 11 !important;
}

piece.anim {
  z-index: 8;
}

piece.fading {
  z-index: 1;
  opacity: 0.5;
}

.cg-wrap piece.ghost {
  opacity: 0.3;
}

.cg-wrap piece svg {
  overflow: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.cg-wrap cg-auto-pieces,
.cg-wrap .cg-shapes,
.cg-wrap .cg-custom-svgs {
  overflow: visible;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cg-wrap cg-auto-pieces {
  z-index: 2;
}

.cg-wrap cg-auto-pieces piece {
  opacity: 0.3;
}

.cg-wrap .cg-shapes {
  overflow: hidden;
  opacity: 0.6;
  z-index: 2;
}

.cg-wrap .cg-custom-svgs {
  /* over piece.anim = 8, but under piece.dragging = 11 */
  z-index: 9;
}

.cg-wrap .cg-custom-svgs svg {
  overflow: visible;
}

.cg-wrap coords {
  position: absolute;
  display: flex;
  pointer-events: none;
  opacity: 0.8;
  font-family: sans-serif;
  font-size: 9px;
}

.cg-wrap coords.ranks {
  left: 4px;
  top: -20px;
  flex-flow: column-reverse;
  height: 100%;
  width: 12px;
}

.cg-wrap coords.ranks.black {
  flex-flow: column;
}

.cg-wrap coords.ranks.left {
  left: -15px;
  align-items: flex-end;
}

.cg-wrap coords.files {
  bottom: -4px;
  left: 24px;
  flex-flow: row;
  width: 100%;
  height: 16px;
  text-transform: uppercase;
  text-align: center;
}

.cg-wrap coords.files.black {
  flex-flow: row-reverse;
}

.cg-wrap coords coord {
  flex: 1 1 auto;
}

.cg-wrap coords.ranks coord {
  transform: translateY(39%);
}

.cg-wrap coords.squares {
  bottom: 0;
  left: 0;
  text-transform: uppercase;
  text-align: right;
  flex-flow: column-reverse;
  height: 100%;
  width: 12.5%;
}

.cg-wrap coords.squares.black {
  flex-flow: column;
}

.cg-wrap coords.squares.left {
  text-align: left;
}

.cg-wrap coords.squares coord {
  padding: 6% 4%;
}

.cg-wrap coords.squares.rank2 {
  transform: translateX(100%);
}

.cg-wrap coords.squares.rank3 {
  transform: translateX(200%);
}

.cg-wrap coords.squares.rank4 {
  transform: translateX(300%);
}

.cg-wrap coords.squares.rank5 {
  transform: translateX(400%);
}

.cg-wrap coords.squares.rank6 {
  transform: translateX(500%);
}

.cg-wrap coords.squares.rank7 {
  transform: translateX(600%);
}

.cg-wrap coords.squares.rank8 {
  transform: translateX(700%);
}

/** Embedded SVGs for all chess pieces */
.cg-wrap piece.pawn.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==');
}
.cg-wrap piece.bishop.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.knight.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.rook.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy0zdi00aDIxdjRIMTJ6bS0xLTIyVjloNHYyaDVWOWg1djJoNVY5aDR2NSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMzQgMTRsLTMgM0gxNGwtMy0zIi8+PHBhdGggZD0iTTMxIDE3djEyLjVIMTRWMTciIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMxIDI5LjVsMS41IDIuNWgtMjBsMS41LTIuNSIvPjxwYXRoIGQ9Ik0xMSAxNGgyMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4=');
}
.cg-wrap piece.queen.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDEyYTIgMiAwIDEgMS00IDAgMiAyIDAgMSAxIDQgMHptMTYuNS00LjVhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAwek00MSAxMmEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTE2IDguNWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTMzIDlhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAweiIvPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi0xMi03IDExVjExbC01LjUgMTMuNS0zLTE1LTMgMTUtNS41LTE0VjI1TDcgMTRsMiAxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTkgMjZjMCAyIDEuNSAyIDIuNSA0IDEgMS41IDEgMSAuNSAzLjUtMS41IDEtMS41IDIuNS0xLjUgMi41LTEuNSAxLjUuNSAyLjUuNSAyLjUgNi41IDEgMTYuNSAxIDIzIDAgMCAwIDEuNS0xIDAtMi41IDAgMCAuNS0xLjUtMS0yLjUtLjUtMi41LS41LTIgLjUtMy41IDEtMiAyLjUtMiAyLjUtNC04LjUtMS41LTE4LjUtMS41LTI3IDB6IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPjxwYXRoIGQ9Ik0xMS41IDMwYzMuNS0xIDE4LjUtMSAyMiAwTTEyIDMzLjVjNi0xIDE1LTEgMjEgMCIgZmlsbD0ibm9uZSIvPjwvZz48L3N2Zz4=');
}
.cg-wrap piece.king.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTIyLjUgMjVzNC41LTcuNSAzLTEwLjVjMCAwLTEtMi41LTMtMi41cy0zIDIuNS0zIDIuNWMtMS41IDMgMyAxMC41IDMgMTAuNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTBWMzd6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.pawn.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==');
}
.cg-wrap piece.bishop.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48L2c+PC9zdmc+');
}
.cg-wrap piece.knight.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMjQuNTUgMTAuNGwtLjQ1IDEuNDUuNS4xNWMzLjE1IDEgNS42NSAyLjQ5IDcuOSA2Ljc1UzM1Ljc1IDI5LjA2IDM1LjI1IDM5bC0uMDUuNWgyLjI1bC4wNS0uNWMuNS0xMC4wNi0uODgtMTYuODUtMy4yNS0yMS4zNC0yLjM3LTQuNDktNS43OS02LjY0LTkuMTktNy4xNmwtLjUxLS4xeiIgZmlsbD0iI2VjZWNlYyIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.rook.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy41LTdsMS41LTIuNWgxN2wxLjUgMi41aC0yMHptLS41IDR2LTRoMjF2NEgxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTE0IDI5LjV2LTEzaDE3djEzSDE0eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTQgMTYuNUwxMSAxNGgyM2wtMyAyLjVIMTR6TTExIDE0VjloNHYyaDVWOWg1djJoNVY5aDR2NUgxMXoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTEyIDM1LjVoMjFtLTIwLTRoMTltLTE4LTJoMTdtLTE3LTEzaDE3TTExIDE0aDIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4=');
}
.cg-wrap piece.queen.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIHN0cm9rZT0ibm9uZSI+PGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMjIuNSIgY3k9IjgiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjkiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjEyIiByPSIyLjc1Ii8+PC9nPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi41LTEyLjVMMzEgMjVsLS4zLTE0LjEtNS4yIDEzLjYtMy0xNC41LTMgMTQuNS01LjItMTMuNkwxNCAyNSA2LjUgMTMuNSA5IDI2eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNOSAyNmMwIDIgMS41IDIgMi41IDQgMSAxLjUgMSAxIC41IDMuNS0xLjUgMS0xLjUgMi41LTEuNSAyLjUtMS41IDEuNS41IDIuNS41IDIuNSA2LjUgMSAxNi41IDEgMjMgMCAwIDAgMS41LTEgMC0yLjUgMCAwIC41LTEuNS0xLTIuNS0uNS0yLjUtLjUtMiAuNS0zLjUgMS0yIDIuNS0yIDIuNS00LTguNS0xLjUtMTguNS0xLjUtMjcgMHoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTExIDM4LjVhMzUgMzUgMSAwIDAgMjMgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMTEgMjlhMzUgMzUgMSAwIDEgMjMgMG0tMjEuNSAyLjVoMjBtLTIxIDNhMzUgMzUgMSAwIDAgMjIgMG0tMjMgM2EzNSAzNSAxIDAgMCAyNCAwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiLz48L2c+PC9zdmc+');
}
.cg-wrap piece.king.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjYiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41IiBmaWxsPSIjMDAwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjxwYXRoIGQ9Ik0xMS41IDM3YzUuNSAzLjUgMTUuNSAzLjUgMjEgMHYtN3M5LTQuNSA2LTEwLjVjLTQtNi41LTEzLjUtMy41LTE2IDRWMjd2LTMuNWMtMy41LTcuNS0xMy0xMC41LTE2LTQtMyA2IDUgMTAgNSAxMFYzN3oiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMyIDI5LjVzOC41LTQgNi4wMy05LjY1QzM0LjE1IDE0IDI1IDE4IDIyLjUgMjQuNWwuMDEgMi4xLS4wMS0yLjFDMjAgMTggOS45MDYgMTQgNi45OTcgMTkuODVjLTIuNDk3IDUuNjUgNC44NTMgOSA0Ljg1MyA5IiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiIHN0cm9rZT0iI2VjZWNlYyIvPjwvZz48L3N2Zz4=');
}

/* Scacchi — Carbon · App personali, profilo Analitico.
   Layout: una colonna fino a 560px; sopra i 900px scacchiera e pannello affiancati. */
:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --surface-1: #14181d;
  --surface-2: #1d232a;
  --line: #2a323b;
  --text: #f1f4f7;
  --text-reading: #dce1e7;
  --text-muted: #9aa4af;
  --accent: #ffb547;            /* accent-scacchi */
  --accent-soft: rgba(255, 181, 71, 0.14);
  --on-accent: #0b0d10;
  --board-light: #cbd2da;
  --board-dark: #5e6b79;
  --board-highlight: rgba(255, 181, 71, 0.55);
  --eval-white: #f2f2f2;
  --eval-black: #1a1a1a;

  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --densita: 12px;              /* densita-media */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --tocco: 44px;                /* tocco-min */
  --nav-h: 64px;
  /* safe areas: Capacitor injects --safe-area-inset-*, browsers use env() */
  --sa-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sa-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sa-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Keep content below the status bar in the APK (Capacitor) and in browsers. */
:root { padding-top: var(--sa-top); }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: var(--sa-top); z-index: 20;
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3);
  padding-left: max(16px, var(--sa-left));
  padding-right: max(16px, var(--sa-right));
  background: var(--bg); border-bottom: 1px solid var(--line);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--sa-top); z-index: 30; background: var(--bg); }
.chip-app {
  width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); flex: none;
}
.chip-app svg { width: 22px; height: 22px; }
.topbar h1 { margin: 0; font: 600 22px/28px var(--sans); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn {
  width: var(--tocco); height: var(--tocco); border-radius: var(--radius-pill); border: 0; background: transparent;
  display: grid; place-items: center; color: var(--text-muted); cursor: pointer; flex: none;
}
.iconbtn:hover, .iconbtn:focus-visible { background: var(--surface-2); color: var(--text); }
.iconbtn svg { width: 24px; height: 24px; }

main {
  flex: 1; width: 100%; max-width: 1180px; margin: 0 auto;
  padding-block: var(--space-4) calc(var(--nav-h) + var(--space-8) + var(--sa-bottom));
  padding-left: max(16px, var(--sa-left));
  padding-right: max(16px, var(--sa-right));
  display: flex; flex-direction: column; gap: var(--space-4);
}
main.full { padding-bottom: calc(var(--space-8) + var(--sa-bottom)); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface-1); border-top: 1px solid var(--line);
  padding-bottom: var(--sa-bottom);
  padding-left: var(--sa-left); padding-right: var(--sa-right);
}
.nav button {
  height: var(--nav-h); border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-muted); font: 500 13px/18px var(--sans);
}
.nav button svg { width: 24px; height: 24px; }
.nav button[aria-current="page"] { color: var(--text); }
.nav button[aria-current="page"] svg { color: var(--accent); }
.nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* ---------- type ---------- */
.titolo { font: 600 28px/34px var(--sans); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.sezione { font: 600 18px/24px var(--sans); margin: 0; }
.occhiello { font: 600 12px/16px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.occhiello.acc { color: var(--accent); }
.muted { color: var(--text-muted); }
.small { font: 400 13px/18px var(--sans); }
.didascalia { font: 400 12px/16px var(--sans); color: var(--text-muted); }
.numero-grande { font: 600 30px/36px var(--mono); font-variant-numeric: tabular-nums; }
.numero { font: 600 17px/24px var(--mono); font-variant-numeric: tabular-nums; }
.dato { font: 400 13px/20px var(--mono); font-variant-numeric: tabular-nums; }
p { margin: 0; }

/* ---------- blocks ---------- */
.card { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--densita); min-width: 0; }
.card.flat { background: var(--surface-1); border: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--densita); min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.grid3 .card, .grid4 .card { padding: var(--space-4); }
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 720px) { .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 380px) { .grid3 .numero-grande { font-size: 24px; line-height: 30px; } }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.kpi .delta { font: 500 13px/18px var(--mono); }
.up { color: var(--text); }
.down { color: var(--text-muted); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }

.btn {
  min-height: var(--tocco); padding: 0 var(--space-5); border-radius: var(--radius-lg); border: 0; cursor: pointer;
  font: 600 15px/20px var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--surface-2); color: var(--text); white-space: nowrap;
}
.card .btn:not(.primary) { background: var(--surface-1); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn svg { width: 20px; height: 20px; }
.btn:focus-visible, .chip:focus-visible, .list-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip {
  min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: transparent; color: var(--text-muted); font: 500 13px/18px var(--sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x .chips { flex-wrap: nowrap; }

.tag {
  font: 600 12px/16px var(--mono); padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-muted); white-space: nowrap;
}
.tag.inv { background: var(--text); color: var(--bg); }
.tag.acc { background: var(--accent); color: var(--on-accent); }

/* result glyph: shape encodes result, not hue */
.res { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; font: 600 13px/1 var(--mono); flex: none; }
.res.win { background: var(--text); color: var(--bg); }
.res.draw { background: var(--surface-1); color: var(--text); border: 1px solid var(--line); }
.res.loss { background: transparent; color: var(--text-muted); border: 1px dashed var(--text-muted); }

.list { display: flex; flex-direction: column; background: var(--surface-2); border-radius: var(--radius-lg); overflow: hidden; }
.list-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 56px;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; width: 100%;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: rgba(255, 255, 255, 0.03); }
.list-item .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-item .main .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }

.progress { height: 6px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font: 500 13px/18px var(--sans); color: var(--text-muted); }
.input, select.input {
  min-height: var(--tocco); padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface-1); color: var(--text); font: 400 16px/24px var(--sans); width: 100%;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.empty { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px + var(--sa-bottom));
  background: var(--text); color: var(--bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font: 500 14px/20px var(--sans); z-index: 50; max-width: calc(100% - 32px);
}

/* ---------- board ---------- */
.board-area { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-2); width: 100%; max-width: 560px; align-self: center; }
.board-area.noeval { grid-template-columns: 1fr; }
.evalbar { position: relative; border-radius: 4px; overflow: hidden; background: var(--eval-black); border: 1px solid var(--line); }
.evalbar > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--eval-white); transition: height .35s ease; }
.evalbar.flip > i { bottom: auto; top: 0; }
.boardwrap { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; }
.boardwrap .cg-wrap { width: 100%; height: 100%; position: absolute; inset: 0; }
.players { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); max-width: 560px; width: 100%; align-self: center; }
.players .p { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.players .p .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid var(--line); }
.dot.w { background: var(--eval-white); } .dot.b { background: var(--eval-black); }

.ctrls { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); max-width: 560px; width: 100%; align-self: center; }
.ctrls .btn { padding: 0; }

.movelist { display: grid; grid-template-columns: 36px 1fr 1fr; gap: 2px 4px; font: 400 13px/20px var(--mono); max-height: 260px; overflow-y: auto; }
.movelist .mn { color: var(--text-muted); padding: 4px 0; }
.movelist button { text-align: left; padding: 4px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: inherit; color: var(--text); display: flex; gap: 4px; align-items: center; min-height: 32px; }
.movelist button.cur { background: var(--accent); color: var(--on-accent); }
.movelist button .mk { font-weight: 600; }
.movelist button.me { }
.mk-blunder { color: var(--text); }
.glyph { font: 600 12px/16px var(--mono); padding: 0 4px; border-radius: 4px; }
.glyph.blunder { background: var(--text); color: var(--bg); }
.glyph.mistake { border: 1px solid var(--text); color: var(--text); }
.glyph.inaccuracy { border: 1px dashed var(--text-muted); color: var(--text-muted); }
button.cur .glyph.blunder { background: var(--on-accent); color: var(--accent); }
button.cur .glyph.mistake, button.cur .glyph.inaccuracy { border-color: var(--on-accent); color: var(--on-accent); }

.engine-line { display: flex; gap: var(--space-2); align-items: baseline; }
.evalchip { font: 600 13px/18px var(--mono); padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-1); flex: none; min-width: 58px; text-align: center; }
.evalchip.best { background: var(--accent); color: var(--on-accent); }
.engine-line .pv { font: 400 13px/20px var(--mono); color: var(--text-reading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.analysis-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 900px) {
  .analysis-layout { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: start; }
  .analysis-layout .side-panel { position: sticky; top: 80px; }
}

.feedback { min-height: 48px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.feedback.ok { background: var(--accent); color: var(--on-accent); }
.feedback.ko { background: var(--surface-1); border: 1px dashed var(--text-muted); }

/* charts */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--text-muted); font: 400 12px var(--mono); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--accent-soft); }
.chart .end { fill: var(--accent); }
.hbar { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(48px, 1.3fr) auto; gap: var(--space-2) var(--space-3); align-items: center; }
.hbar .lab { font: 500 13px/18px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 10px; background: var(--surface-1); border-radius: var(--radius-pill); overflow: hidden; display: flex; }
.hbar .track i { display: block; height: 100%; }
.hbar .track i.w { background: var(--text); } .hbar .track i.d { background: var(--board-dark); } .hbar .track i.l { background: transparent; }
.hbar .track i.a { background: var(--accent); }
.hbar .v { font: 400 13px/18px var(--mono); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font: 400 12px/16px var(--sans); color: var(--text-muted); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.insight { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.insight .n { font: 600 24px/28px var(--mono); color: var(--accent); min-width: 64px; }

.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 90%; overflow-y: auto; background: var(--surface-1); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-block: var(--space-6) calc(var(--space-6) + var(--sa-bottom));
  padding-left: max(20px, var(--sa-left)); padding-right: max(20px, var(--sa-right));
  display: flex; flex-direction: column; gap: var(--space-4); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* chessground overrides */
cg-board { background-color: var(--board-dark); background-image: repeating-conic-gradient(var(--board-dark) 0 25%, var(--board-light) 0 50%); background-size: 25% 25%; border-radius: 6px; }
cg-board square.last-move { background-color: var(--board-highlight); }
cg-board square.selected { background-color: rgba(255, 181, 71, 0.45); }
cg-board square.move-dest { background: radial-gradient(rgba(11, 13, 16, 0.38) 20%, transparent 22%); }
cg-board square.oc.move-dest { background: radial-gradient(transparent 0%, transparent 78%, rgba(11, 13, 16, 0.38) 80%); }
cg-board square.check { background: radial-gradient(ellipse at center, rgba(255, 181, 71, 1) 0%, rgba(255, 181, 71, 0.6) 30%, transparent 70%); }
.cg-wrap coords { font: 600 12px/1 var(--mono); opacity: 1; }
.cg-wrap coords.files { left: 0; bottom: 2px; height: 14px; text-transform: lowercase; text-align: right; }
.cg-wrap coords.files coord { padding-right: 3px; flex: 1 1 0; }
.cg-wrap coords.ranks { left: 3px; top: 0; }
.cg-wrap coords.ranks coord { transform: none; padding-top: 3px; flex: 1 1 0; }
.list-item > svg { width: 24px; height: 24px; flex: none; color: var(--text-muted); }
/* coordinate text takes the colour of the opposite square, so it reads on every board */
.cg-wrap coords coord { color: var(--board-dark) !important; opacity: 1; }
.cg-wrap coords.ranks:not(.black) coord:nth-child(odd), .cg-wrap coords.files:not(.black) coord:nth-child(odd),
.cg-wrap coords.ranks.black coord:nth-child(even), .cg-wrap coords.files.black coord:nth-child(even) { color: var(--board-light) !important; }

/* player switch */
.avatar-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tocco); padding: 0 var(--space-3) 0 6px;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; flex: none; }
.avatar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center; flex: none;
  font: 600 15px/1 var(--sans); background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.avatar.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.list-item .side svg { width: 22px; height: 22px; color: var(--accent); }

/* board look picker */
.look-preview { display: flex; justify-content: center; }
.mini-board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 240px); aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.mini-board span { position: relative; display: block; }
.mini-board span.l { background: var(--board-light); }
.mini-board span.d { background: var(--board-dark); }
.mini-board span.hl::after { content: ""; position: absolute; inset: 0; background: var(--board-highlight); }
.mini-board img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.pieceset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.swatch, .pieceset { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) 2px;
  border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); cursor: pointer; min-width: 0; }
.swatch[aria-checked="true"], .pieceset[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.swatch:focus-visible, .pieceset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-sq { width: 36px; height: 36px; border-radius: 8px; display: block; }
.sw-name { font: 500 12px/16px var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-imgs { display: flex; gap: 0; height: 36px; padding: 0 4px; border-radius: 8px; background: linear-gradient(90deg, var(--board-light) 0 50%, var(--board-dark) 50% 100%); }
.ps-imgs img { width: 36px; height: 36px; }
@media (max-width: 380px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pieceset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =================================================================
   Minimal & compact (standing rule for the personal apps):
   no boxes or cards, hairlines between sections, small actions on the right.
   Desktop: content in columns instead of stretched rows.
   ================================================================= */
main { max-width: 1240px; gap: var(--space-3); }
.card, .card.flat { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--space-4) 0 0; }
#jobcard { border-top: 0; padding-top: 0; }
.btn { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; border-radius: var(--radius-md); }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: auto; align-self: flex-end; }
.card .btn:not(.primary) { background: var(--surface-2); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.act-row { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.act-row > .dato { margin-right: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
p { max-width: 72ch; }

/* sections */
.sec { display: flex; align-items: center; gap: var(--space-4) var(--space-6); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.sec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sec-act { flex: none; display: flex; gap: var(--space-2); align-items: center; }
.sec-h { margin-top: var(--space-4); }
.inline-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); max-width: 420px; }
.inline-form .input { min-height: 40px; }
.themes { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.themes .occhiello { display: block; margin-bottom: 6px; }
.chart-box { max-width: 640px; margin-top: var(--space-2); }
.narrow { max-width: 720px; }

/* stat strip instead of tiles */
.kpis { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding-block: var(--space-2) var(--space-4); }
.kpis .kpi { min-width: 0; }
.kpis .numero-grande { font-size: 28px; line-height: 34px; }
.sec .kpis { padding-block: var(--space-1) 0; }

/* lists: hairline rows, no panel */
.list { background: none; border-radius: 0; border-top: 1px solid var(--line); }
.list-item { padding-inline: 0; min-height: 52px; }
.list-item:hover { background: rgba(255, 255, 255, 0.03); }

/* columns */
.cols { display: flex; flex-direction: column; gap: var(--space-6); }
.col { display: flex; flex-direction: column; min-width: 0; }
.col.side { gap: var(--space-6); }
.col.side > .sec:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1000px) {
  .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--space-10); align-items: start; }
  .col.side > .sec { border-top: 1px solid var(--line); padding-top: var(--space-4); }
  .col.side > .sec:first-child { border-top: 0; padding-top: 0; }
  .themes { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3) var(--space-6); }
  .themes > div:last-child { grid-column: 1 / -1; }
}
/* phone and narrow windows: text takes the full width, the action sits right below on the right */
@media (max-width: 760px) {
  .sec { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .sec-act { justify-content: flex-end; }
  .sec-act:empty { display: none; }
}

/* board screens: big board, panel beside it on wide screens */
.play-layout { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.play-panel { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--space-3); }
.board-area { max-width: min(560px, 100%); }
@media (min-width: 900px) {
  .play-layout { display: grid; grid-template-columns: minmax(0, min(calc(100vh - 160px), 680px)) minmax(280px, 380px); justify-content: center; align-items: start; gap: var(--space-8); }
  .play-layout .board-area { max-width: none; width: 100%; }
  .play-panel { max-width: none; padding-top: var(--space-2); }
  .analysis-layout { grid-template-columns: minmax(0, min(calc(100vh - 300px), 680px)) minmax(300px, 1fr); justify-content: center; gap: var(--space-8); }
  .analysis-layout .board-area, .analysis-layout .players, .analysis-layout .ctrls { max-width: none; }
  .analysis-layout .side-panel { max-width: 460px; }
}
.feedback { border-radius: var(--radius-md); }
.ctrls .btn { background: var(--surface-2); }

/* desktop: navigation as a left rail instead of a full-width bottom bar */
@media (min-width: 1000px) {
  .nav { top: 0; bottom: 0; right: auto; width: 88px; grid-template-columns: 1fr; grid-auto-rows: 76px; align-content: start;
    padding-top: calc(var(--sa-top) + 84px); border-top: 0; border-right: 1px solid var(--line); background: var(--bg); }
  .nav button { height: 76px; }
  #app:has(.nav) { padding-left: 88px; }
  #app:has(.nav) main { padding-bottom: var(--space-10); }
  .toast { bottom: 24px; }
}
.small-btn { align-self: flex-end; }
@media (max-width: 520px) {
  .kpis { gap: var(--space-3) var(--space-5); }
  .kpis .numero-grande { font-size: 24px; line-height: 30px; }
  .kpis .occhiello { letter-spacing: 0.08em; }
}

/* `hidden` must win over any display set by a class (the reset confirmation was always visible). */
[hidden] { display: none !important; }