:root {
  --bg: #211f1c;
  --card: #2b2926;
  --line: #3a3732;
  --text: #bab7b1;
  --bright: #fff;
  --muted: #8a867e;
  --green: #81b64c;
  --green2: #a3d160;
  --light: #ebecd0;
  --dark: #779556;
  --gold: #f6cf58;
  --accent: #81b64c;
  --accent-soft: #a3d160
}

* {
  box-sizing: border-box
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle
}

button .material-symbols-rounded {
  margin-right: 5px
}

.noTextButton .material-symbols-rounded {
  margin-right: 0
}

html,
body,
* {
  scrollbar-width: none;
  -ms-overflow-style: none
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px "DM Sans", sans-serif;
  min-height: 100dvh
}

.page-footer {
  text-align: center;
  padding: 8px 16px 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}

button,
input,
select {
  font: inherit
}

button {
  cursor: pointer;
  border: 0
}

button:disabled {
  opacity: .4;
  cursor: not-allowed
}

main {
  display: grid;
  grid-template-columns: minmax(320px, min(calc(100dvh - 140px), calc(100vw - 440px))) 380px;
  gap: 24px;
  justify-content: center;
  padding: 16px
}

.board-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.player {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px
}

.player-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0
}

.player-chat-bubble {
  z-index: 8;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(320px, 50%);
  padding: 8px 15px;
  border: 1px solid #d1d5db;
  border-radius: 12px 12px 12px 0;
  background: #fff;
  color: #211f1c;
  box-shadow: 0 4px 14px #0008;
  font-size: 13px;
  overflow-wrap: anywhere;
  pointer-events: none
}

.player-chat-bubble[hidden] {
  display: none
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--card);
  padding: 2px
}

.who {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%
}

.clock {
  margin-left: auto
}

.name {
  font-weight: 700;
  color: var(--bright)
}

.cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 16px;
  font-size: 12px;
  color: var(--muted)
}

.cap .elo {
  margin-left: 8px;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap
}

.board-area {
  display: grid;
  grid-template-columns: minmax(68px, 84px) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  --material-rail-width: 84px;
  --board-area-gap: 8px;
  container-type: inline-size
}

.material-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 5px 0;
  overflow-y: auto;
  scrollbar-width: thin
}

.material-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 0 0 auto
}

.material-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center
}

.material-heading span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%
}

.material-total {
  color: var(--gold);
  font: 800 13px Manrope, sans-serif;
  white-space: nowrap
}

.material-pieces {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0
}

.material-piece-group {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.material-piece {
  width: calc(clamp(16px, calc((100cqw - var(--material-rail-width) - var(--board-area-gap)) / 16), 40px) - 5px);
  height: calc(clamp(16px, calc((100cqw - var(--material-rail-width) - var(--board-area-gap)) / 16), 40px) - 5px);
  object-fit: contain
}

.material-piece + .material-piece {
  margin-top: clamp(-20px, calc((var(--material-rail-width) + var(--board-area-gap) - 100cqw) / 32), -8px)
}

.material-piece-group-dense .material-piece + .material-piece {
  margin-top: clamp(-28px, calc((var(--material-rail-width) + var(--board-area-gap) - 100cqw) / 24), -10px)
}

.material-empty {
  color: var(--muted);
  font-size: 9px;
  opacity: .7
}

.clock {
  font: 700 18px Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--card);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  min-width: 98px;
  text-align: center
}

.clock.low-time {
  color: #ef4444
}

.clock.active {
  background: #fff;
  color: #1c1a17
}

.clock.active.low-time {
  background: #fee2e2;
  color: #b91c1c
}

.board-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 30px #0008;
  user-select: none;
  touch-action: manipulation
}

#board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr)
}

/* Estado de espera mientras el rival se conecta a la partida */
.board-loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(24, 23, 21, .78);
  color: #fff;
  text-align: center;
  backdrop-filter: grayscale(1) blur(1px);
}

.board-loading[hidden] {
  display: none;
}

.loading-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green2);
  animation: boardDot 1.1s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
  animation-delay: .15s;
}

.loading-dots span:nth-child(3) {
  animation-delay: .3s;
}

.board-loading strong {
  font: 700 15px Manrope, sans-serif;
}

.board-loading small {
  color: #d0ccc4;
  font-size: 12px;
}

@keyframes boardDot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .45;
  }

  30% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  outline: 0
}

.square.light {
  background: var(--light)
}

.square.dark {
  background: var(--dark)
}

.square.last:before,
.square.selected:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f5f56b66;
  pointer-events: none
}

.square.selected:before {
  background: #f6e85d99
}

.square.premove:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #8b5cf688;
  box-shadow: inset 0 0 0 4px #a78bfa;
  pointer-events: none;
  z-index: 1;
}

.square.premove-from:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #8b5cf655;
  box-shadow: inset 0 0 0 4px #a78bfa;
  pointer-events: none;
  z-index: 1;
}

.piece.premove-origin {
  opacity: .28
}

.premove-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .55;
  filter: drop-shadow(0 2px 3px #0008);
  pointer-events: none
}

.square.legal:after {
  content: "";
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: #0000002e;
  z-index: 1;
  pointer-events: none
}

.square.capture:after {
  content: "";
  position: absolute;
  inset: 3%;
  border: 6px solid #0000002e;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none
}

.piece {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: relative;
  cursor: grab;
  object-fit: contain
}

.coord {
  position: absolute;
  font-size: clamp(9px, 1.3vw, 13px);
  font-weight: 700;
  z-index: 3;
  pointer-events: none;
  line-height: 1
}

.coord.file {
  right: 4px;
  bottom: 3px
}

.coord.rank {
  left: 4px;
  top: 3px
}

.light .coord {
  color: var(--dark)
}

.dark .coord {
  color: var(--light)
}

#board {
  touch-action: none
}

.piece {
  -webkit-user-drag: none
}

.piece.hide {
  visibility: hidden
}

.square.over {
  box-shadow: inset 0 0 0 4px #ffffffaa
}

.drag-ghost {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 6px 8px #0006)
}

#overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4
}

.sidebar {
  position: relative;
  min-width: 0
}

.card {
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 15px;
  font: 700 15px Manrope, sans-serif;
  color: var(--bright);
  border-bottom: 1px solid var(--line)
}

.status-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px
}

.status-actions .gear {
  margin-left: 0
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--line)
}

.tab {
  flex: 1;
  background: none;
  color: var(--muted);
  padding: 11px;
  font-weight: 700;
  border-bottom: 2px solid transparent
}

.tab.active {
  color: var(--bright);
  border-color: var(--green)
}

.tab small {
  background: var(--line);
  color: var(--bright);
  border-radius: 9px;
  padding: 1px 7px;
  margin-left: 4px;
  font-size: 11px
}

.pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0
}

.pane[hidden] {
  display: none
}

.moves {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 34px 1fr 1fr;
  align-content: start;
  gap: 2px 6px
}

.move-no {
  color: var(--muted);
  padding: 6px 0;
  font-size: 12px
}

.move {
  padding: 6px 8px;
  border-radius: 5px;
  background: none;
  color: var(--bright);
  text-align: left;
  font-weight: 600
}

.move:hover {
  background: var(--line)
}

.move.current {
  background: rgba(129, 182, 76, .22)
}

.empty {
  color: var(--muted);
  padding: 8px 0;
  grid-column: 1/-1
}

.nav {
  display: grid;
  gap: 6px;
  padding: 8px 12px
}

.actions {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.nav {
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line)
}

.actions {
  grid-template-columns: 1fr 1fr;
  padding-top: 0
}

.wide {
  grid-column: 1/-1
}

.primary,
.secondary,
.primarySmall {
  border-radius: 6px;
  padding: 9px 12px;
  font-weight: 700;
  transition: background .15s;
}

.primary {
  background: var(--green);
  color: #141d0f;
  margin-top: 6px;
}

.primarySmall {
  background: var(--green);
  color: #141d0f;
}

.primary:hover:not(:disabled) {
  background: var(--green2)
}

.secondary {
  background: var(--card);
  color: var(--bright);
  border: 1px solid var(--line)
}

.secondary:hover:not(:disabled) {
  background: var(--line)
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  flex: 1;
  min-height: 0
}

.subtabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line)
}

.game-subtabs[hidden] {
  display: none
}

.subtab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  border-radius: 7px;
  font-weight: 700;
  border: 1px solid transparent
}

.subtab.active {
  background: var(--green);
  color: var(--bright);
  border-color: var(--green2)
}

.subpane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0
}

.subpane[hidden] {
  display: none
}

.move-subpane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto
}

.move-subpane[hidden] {
  display: none
}

#move-subpane-list .moves {
  flex: 1;
  min-height: 160px
}

.play-subpane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto
}

.play-subpane[hidden],
.online-subpane[hidden] {
  display: none
}

.play-subpane#subpane-bot .engine-panel {
  border-top: 0;
  flex: 1;
  overflow: auto
}

.play-subpane#subpane-bot #analyzeBtn,
.play-subpane#subpane-bot #stopAnalyzeBtn,
.play-subpane#subpane-bot #engineResults {
  display: none
}

.inner-subtabs {
  padding-top: 8px
}

.online-subpane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: auto
}

.friend-tools {
  flex: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px
}

.friend-tools summary {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  padding: 3px 0
}

.friend-profile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: none;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line)
}

.friend-profile-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bright);
  font-size: 12px;
  font-weight: 700
}

.profile-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  background: var(--card)
}

.friend-profile .row button {
  flex: 0 0 38px;
  padding: 8px
}

.friend-profile #nameInput {
  text-align: left;
  text-transform: none;
  letter-spacing: normal
}

.friend-tools summary::-webkit-details-marker {
  display: none
}

.friend-tools summary:after {
  content: "＋";
  float: right;
  color: var(--muted)
}

.friend-tools[open] summary:after {
  content: "−"
}

.friend-tools-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 9px
}

.room-details {
  border-top: 1px solid var(--line);
  padding-top: 10px
}

.room-details summary {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--bright);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  padding: 6px 2px
}

.room-details summary::-webkit-details-marker {
  display: none
}

.room-details summary:after {
  content: "＋";
  margin-left: auto;
  color: var(--muted)
}

.room-details[open] summary:after {
  content: "−"
}

.room-details-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px
}

.chat-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px
}

.section-title {
  font: 700 13px Manrope, sans-serif;
  color: var(--bright);
  display: flex;
  align-items: center;
  gap: 7px
}

.local-time {
  padding: 10px 12px 0
}

.local-time[hidden] {
  display: none
}

.local-time .field {
  margin: 0
}

.local-time select {
  background: var(--card);
  color: var(--bright)
}

.friend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.friend .tiny {
  white-space: nowrap
}

.friend button {
  white-space: nowrap
}

.friends {
  gap: 8px;
  scrollbar-width: none;

  -ms-overflow-style: none;
}

.friends::-webkit-scrollbar {
  display: none;
}

.friend-main {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
  gap: 3px
}

.friend-main .friend-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.friend-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0
}

.friend-status {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600
}

.friend-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.friend-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px
}

.friend-divider hr {
  flex: 1;
  min-width: 12px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line)
}

.friend-elo {
  color: var(--gold);
  font-weight: 700
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700
}

input,
select {
  background: var(--card);
  color: var(--bright);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  width: 100%;
  outline: none
}

input:focus,
select:focus {
  border-color: var(--green)
}

.row {
  display: flex;
  gap: 6px
}

.row>* {
  flex: 1
}

.row input {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  text-align: center
}

.conn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px
}

.chat-log {
  flex: 1;
  min-height: 110px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--card);
  border-radius: 8px;
  padding: 8px
}

.msg {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  overflow-wrap: anywhere
}

.msg.me {
  align-self: flex-end;
  background: #4b6b2f;
  color: #fff
}

.msg.them {
  align-self: flex-start;
  background: var(--line);
  color: var(--bright)
}

.msg.sys {
  align-self: center;
  color: var(--muted);
  font-size: 11px
}

.chat-form {
  display: flex;
  gap: 6px
}

.chat-form input {
  flex: 1
}

.chat-form .primary {
  flex: none
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--bright);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  font-weight: 700;
  z-index: 1100;
  display: none;
  max-width: calc(100vw - 32px);
  text-align: center
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  z-index: 10;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px
}

.modal h3 {
  margin: 0 0 10px;
  font: 700 16px Manrope;
  color: var(--bright)
}

.modal-buttons {
  display: flex;
  gap: 8px
}

.history-modal,
.watch-modal {
  width: min(520px, calc(100vw - 24px));
  max-height: 74vh;
  overflow: auto
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, background .12s ease
}

.history-item:hover {
  border-color: var(--green);
  background: rgba(88, 114, 69, 0.08)
}

.history-context-menu {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28)
}

.history-context-menu button {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  color: var(--bright);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left
}

.history-context-menu button:hover {
  border-color: var(--green);
  background: rgba(129, 182, 76, .12)
}

.history-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0
}

.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.history-vs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.history-vs strong {
  color: var(--bright);
  font-size: 14px
}

.history-vs span {
  color: var(--muted);
  font-size: 11px
}

.history-result {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  text-transform: uppercase
}

.history-result.win {
  background: rgba(97, 179, 103, 0.18);
  color: #a4ef8b
}

.history-result.loss {
  background: rgba(214, 91, 91, 0.18);
  color: #ff9d9d
}

.history-result.draw {
  background: rgba(164, 172, 192, 0.18);
  color: #dfe8ff
}

.history-pgn {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere
}

.history-mini-board {
  display: grid;
  grid-template-columns: repeat(8, 8px);
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0
}

.history-mini-square {
  width: 8px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.history-mini-square.light {
  background: #f0f0ee
}

.history-mini-square.dark {
  background: #8ea285
}

.history-mini-square img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
  pointer-events: none
}

.watch-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 0
}

.watch-meta {
  display: flex;
  justify-content: center;
  width: 100%
}

.watch-player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  width: min(620px, 100%);
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02)
}

.watch-player-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg)
}

.watch-player-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  flex: 1
}

.watch-player-name {
  color: var(--bright);
  font: 700 15px/1.1 "Manrope", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.watch-player-sub {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase
}

.watch-player-status {
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap
}

.watch-player.empty-status .watch-player-status {
  opacity: 0
}

.watch-board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 0
}

.watch-modal {
  width: min(860px, calc(100vw - 22px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 14px 14px 12px
}

#watchBoard {
  display: grid;
  grid-template-columns: repeat(8, minmax(30px, 1fr));
  width: min(62vh, 62vw, 560px);
  max-width: 62vw;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease
}

#watchBoard .square {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 30px
}

#watchBoard .square.light {
  background: #f0f0ee
}

#watchBoard .square.dark {
  background: #8ea285
}

#watchBoard .piece {
  width: 82%;
  height: 82%;
  object-fit: contain
}

.promo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px
}

.promo:hover {
  background: var(--line)
}

.promo img {
  width: 60px;
  height: 60px;
  display: block
}

.engine-panel {
  border-top: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.engine-panel .section-title {
  margin-bottom: 1px
}

.engine-row {
  display: flex;
  gap: 7px;
  align-items: center
}

.engine-row>* {
  min-width: 0;
  flex: 1
}

.bot-level-native {
  display: none !important
}

.bot-level-picker {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.bot-level-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--bright);
  padding: 2px 2px 4px;
  letter-spacing: -0.02em
}

.bot-level-summary strong {
  font-size: 18px;
  font-weight: 800
}

.bot-level-summary .bot-level-summary-elo {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-left: 4px
}

.bot-level-grid {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.bot-level-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  overflow: hidden
}

.bot-level-group-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0
}

.bot-level-group-title {
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 0 0 2px;
  margin: 0;
  white-space: nowrap
}

.bot-level-option {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  min-width: 64px;
  height: 82px;
  padding: 5px 2px 6px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease
}

.bot-level-option:hover,
.bot-level-option[aria-selected="true"] {
  color: var(--bright);
  background: rgba(129, 182, 76, 0.06);
  transform: translateY(-1px)
}

.bot-level-option:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px
}

.bot-level-option-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 9px;
  background: var(--bg);
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,0.08)
}

.bot-level-option-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  line-height: 1.1
}

.bot-level-option-name {
  font-size: 10px;
  font-weight: 800;
  color: inherit
}

.bot-level-option-elo {
  font-size: 9px;
  color: var(--muted);
  font-weight: 700
}

.engine-status {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4
}

.engine-results {
  max-height: 180px;
  overflow: auto;
  background: #171614;
  border-radius: 7px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.55
}

.engine-results:empty {
  display: none
}

.engine-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px
}

.engine-stat {
  background: #24221f;
  border: 1px solid #39352f;
  border-radius: 6px;
  padding: 7px 5px;
  text-align: center
}

.engine-stat strong {
  display: block;
  font-size: 18px;
  line-height: 1.2
}

.engine-stat span {
  display: block;
  font-size: 10px;
  color: #c0bbb2;
  margin-top: 3px
}

.engine-result {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 7px;
  padding: 4px 2px;
  border-bottom: 1px solid #302d29;
  cursor: pointer
}

.engine-result:last-child {
  border-bottom: 0
}

.engine-result.bad {
  color: #ff9b8d
}

.engine-result.good {
  color: #b9e58b
}

.engine-result.best {
  color: #a9d7ff
}

.engine-result.brilliant {
  color: #55e5b1
}

.engine-eval {
  font-weight: 700;
  text-align: right;
  white-space: nowrap
}

.engine-note {
  color: var(--muted);
  font-size: 11px
}

@media(max-width:900px) {
  main {
    grid-template-columns: minmax(0, 640px);
    padding: 10px
  }

  .board-area {
    grid-template-columns: 72px minmax(0, 1fr);
    --material-rail-width: 72px
  }

  .card {
    position: static;
    min-height: 560px
  }

  .moves {
    min-height: 120px;
    max-height: 220px
  }

  .sidebar {
    min-height: 560px
  }
}

.end {
  width: min(720px, 100%);
  max-height: 90dvh;
  overflow: auto;
  background: #262522;
  border-radius: 12px;
  box-shadow: 0 20px 60px #000a
}

.end-head {
  position: relative;
  text-align: center;
  padding: 20px 52px;
  background: #2b2926
}

.end-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  line-height: 1
}

.end-title {
  font: 800 24px Manrope, sans-serif;
  color: #fff
}

.end-sub {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px
}

.end-x {
  position: absolute;
  right: 10px;
  top: 8px;
  background: none;
  color: var(--muted);
  font-size: 18px;
  padding: 4px 8px
}

.end-x:hover {
  color: #fff
}

.end-body {
  padding: 18px 20px 20px
}

.end-msg {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 20px
}

.end-msg img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #3a3732;
  flex: none
}

.bubble {
  flex: 1;
  background: #fff;
  color: #262522;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 12px 12px 12px 2px
}

.end-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  text-align: center
}

.sv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 800 20px Manrope, sans-serif;
  color: #fff
}

.sv i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #1c1a17;
  font-style: normal;
  font-size: 12px;
  display: grid;
  place-items: center
}

.end-stats .b i {
  background: #7aa7d9
}

.end-stats span {
  font-size: 13px;
  font-weight: 600;
  color: var(--green)
}

.end-stats .b span {
  color: #7aa7d9
}

.end-pgn {
  width: 100%;
  background: var(--green);
  color: #17200f;
  font: 700 15px Manrope, sans-serif;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: none
}

.end-pgn:hover {
  background: var(--green2)
}

.end-pgn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #4a7a2c
}

.end-row {
  display: flex;
  gap: 8px
}

.end-row button {
  flex: 1;
  background: #2b2926;
  color: #fff;
  font-weight: 700;
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 3px 0 #1a1917
}

.end-row button:hover {
  background: #363330
}

/* ---- Notificaciones (invitaciones, revancha, tablas) ---- */
.notif-stack {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 32px)
}

.notif {
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: max-content;
  max-width: min(420px, 100%);
  padding: 12px 14px;
  background: var(--card);
  color: var(--bright);
  border: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: notifIn .22s ease-out
}

.notif[hidden] {
  display: none
}

.notif .notif-ico {
  color: var(--accent);
  font-size: 24px;
  margin: 0
}

.notif .notif-text {
  flex: 1 1 180px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bright)
}

.notif .notif-actions {
  display: flex;
  gap: 6px;
  margin-left: auto
}

.notif .primary,
.notif .secondary {
  padding: 7px 11px
}

@keyframes notifIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---- Nada de la UI se selecciona salvo códigos (y campos de escritura) ---- */
html,
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text
}

.selectable,
.selectable * {
  -webkit-user-select: text;
  user-select: text;
  cursor: text
}

img {
  -webkit-user-drag: none
}

/* ---- Selector de ritmo (estilo chess.com) ---- */
:root {
  --tcp-btn: var(--line);
  --tcp-btn: color-mix(in srgb, var(--bright) 8%, var(--card));
  --tcp-btn-h: var(--line);
  --tcp-btn-h: color-mix(in srgb, var(--bright) 14%, var(--card))
}

.tcp {
  position: relative;
  display: block;
  width: 100%
}

.tcp-trigger {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 42px;
  background: var(--tcp-btn);
  color: var(--bright);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 800 15px Manrope, "DM Sans", sans-serif;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  transition: background .15s, border-color .15s
}

.tcp-trigger:hover {
  background: var(--tcp-btn-h)
}

.tcp.open .tcp-trigger {
  border-color: var(--accent)
}

.tcp-trigger .tcp-ico {
  color: var(--accent);
  font-size: 22px;
  margin: 0
}

.tcp-trigger .tcp-chev {
  position: absolute;
  right: 12px;
  margin: 0;
  color: var(--muted);
  transition: transform .2s
}

.tcp.open .tcp-chev {
  transform: rotate(180deg)
}

.tcp-panel {
  margin-top: 6px;
  padding: 12px;
  display: flex;
  z-index: 100;
  position: absolute;
  width: 100%;
  max-height: 500px;
  overflow-y: scroll;
  flex-direction: column;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  animation: notifIn .16s ease-out;
  scrollbar-width: none;

  -ms-overflow-style: none;
}

/* 4. Oculta la barra en Chrome, Safari y Opera */
.tcp-panel::-webkit-scrollbar {
  display: none;
}

.tcp-panel[hidden] {
  display: none
}

.tcp-sec-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-weight: 800;
  font-size: 13px;
  color: var(--bright)
}

.tcp-sec-h .material-symbols-rounded {
  font-size: 18px;
  color: var(--accent);
  margin: 0
}

.tcp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px
}

.tcp-opt {
  padding: 11px 4px;
  background: var(--tcp-btn);
  color: var(--bright);
  border: 2px solid transparent;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  transition: background .15s
}

.tcp-opt:hover {
  background: var(--tcp-btn-h)
}

.tcp-opt.sel {
  border-color: var(--accent)
}

.tcp-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  background: none;
  color: var(--muted);
  font-weight: 700
}

.tcp-more:hover {
  color: var(--bright)
}

.tcp-more .material-symbols-rounded {
  margin: 0
}

.tcp-custom {
  display: flex;
  align-items: center;
  gap: 6px
}

.tcp-custom input {
  min-width: 0;
  text-align: center
}

.tcp-custom .tcp-plus {
  font-weight: 800;
  color: var(--muted)
}

.tcp-custom .primary {
  flex: none
}

.hcp {
  position: relative;
  width: 100%;
  z-index: 1
}

.hcp-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 1;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bright) 6%, var(--card));
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  font: 700 13px Manrope, "DM Sans", sans-serif;
  box-shadow: none;
  transition: background .15s, border-color .15s, color .15s
}

.hcp-trigger:hover {
  background: color-mix(in srgb, var(--bright) 10%, var(--card));
  color: var(--bright)
}

.hcp.open .hcp-trigger {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--bright)
}

.hcp-summary {
  flex: 1;
  text-align: left;
  color: inherit
}

.hcp-chev {
  color: var(--muted)
}

.hcp-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1;
  margin-top: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  animation: notifIn .16s ease-out;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(4px)
}

.hcp-panel[hidden] {
  display: none
}

.hcp-mode-row,
.hcp-target-row,
.hcp-piece-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px
}

.hcp-piece-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hcp-mode-btn,
.hcp-target-btn,
.hcp-opt,
.hcp-piece-btn,
.hcp-clear {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tcp-btn);
  color: var(--bright);
  font: 700 12px "DM Sans", sans-serif;
  transition: background .15s, border-color .15s
}

.hcp-mode-btn,
.hcp-target-btn,
.hcp-piece-btn,
.hcp-clear {
  padding: 8px 10px
}

.hcp-mode-btn.active,
.hcp-target-btn.active,
.hcp-opt.active,
.hcp-piece-btn.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--card))
}

.hcp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px
}

.hcp-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 8px;
  min-height: 120px;
  text-align: center
}

.hcp-opt.none {
  min-height: 70px
}

.hcp-preview {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02)
}

.hcp-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 220px);
  margin: 0 auto;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden
}

.hcp-square {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 15px;
  line-height: 1;
  user-select: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer
}

.hcp-square.custom {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5)
}

.hcp-square.light {
  background: #ebecd0;
  color: #000
}

.hcp-square.dark {
  background: #779556;
  color: #000
}

.hcp-square.active {
  background: color-mix(in srgb, var(--accent) 38%, #f8f8f8);
  color: #000;
  font-weight: 800
}

.hcp-square.inactive {
  opacity: .35;
  filter: grayscale(.2)
}

.hcp-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--bright)
}

@media (max-width: 760px) {
  .toast {
    bottom: auto;
    top: 16px
  }
}

.friends {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.friend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px
}

.friend-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.friend-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.fname {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.friend-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  background: var(--card)
}

.friend-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap
}

.friend-elo {
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap
}

.friend-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0
}

.friend button {
  padding: 7px 10px;
  border-radius: 7px
}

.friend .primary {
  padding: 7px 11px
}

.friend .secondary {
  min-width: 36px;
  padding: 7px 8px
}

.stack .tiny {
  font-size: 12px;
  color: var(--muted)
}

@media (max-width: 420px) {
  .board-area {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 5px;
    --material-rail-width: 58px;
    --board-area-gap: 5px
  }

  .friend {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .friend-actions {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    justify-content: flex-end
  }
}

/* ===== Informe de análisis en el modal ===== */
.rp-sec {
  margin: 0 0 16px
}

.rp-h {
  font: 800 13px Manrope, sans-serif;
  color: var(--bright);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 8px
}

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

.rp-table th {
  font: 700 11px Manrope, sans-serif;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 8px;
  text-align: center
}

.rp-table th:first-child {
  text-align: left
}

.rp-table td {
  padding: 5px 8px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-weight: 700;
  color: var(--bright);
  font-variant-numeric: tabular-nums
}

.rp-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text)
}

.rp-table td.zero {
  color: #5d5a54;
  font-weight: 500
}

.rp-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font: 800 10px Manrope, sans-serif;
  color: #17140f;
  margin-right: 8px;
  vertical-align: middle
}

.rp-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.rp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px
}

.rp-card .who {
  font: 700 12px Manrope, sans-serif;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px
}

.rp-card .who i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #0006
}

.rp-acc {
  font: 800 28px Manrope, sans-serif;
  color: var(--bright);
  line-height: 1
}

.rp-acc small {
  font-size: 14px;
  color: var(--muted);
  margin-left: 1px
}

.rp-mini {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted)
}

.rp-mini b {
  display: block;
  color: var(--bright);
  font-size: 14px
}

.rp-graph {
  width: 100%;
  height: 80px;
  display: block;
  border-radius: 7px;
  background: var(--card);
  cursor: pointer
}

/* ===== Modal compacto (sin scroll) ===== */
#endBox.analyzed .end-head {
  padding: 10px 52px
}

#endBox.analyzed .end-title {
  font-size: 20px
}

#endBox.analyzed .end-icon {
  font-size: 28px
}

#endBox.analyzed .end-sub {
  font-size: 12px;
  margin-top: 0
}

#endBox.analyzed .end-body {
  padding: 12px 16px 14px
}

#endBox.analyzed .end-msg {
  display: none
}

#endBox.analyzed .end-stats {
  margin-bottom: 10px
}

#endBox.analyzed .sv {
  font-size: 16px
}

#endBox.analyzed .end-stats span {
  font-size: 12px
}

#endBox.analyzed .end-row button {
  padding: 11px
}

#endAnalysis.done {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important
}

#endAnalysis.done .ea-head,
#endAnalysis.done #endAnalysisStatus,
#endAnalysis.done .ea-prog {
  display: none
}

.ea-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px
}

.ea-prog {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 8px
}

.ea-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width .15s
}

.rp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px
}

.rp-col {
  min-width: 0
}

.rp-h {
  margin: 0 0 6px !important
}

.rp-table {
  font-size: 12.5px
}

.rp-table th {
  padding: 2px 6px
}

.rp-table td {
  padding: 3px 6px
}

.rp-dot {
  width: 16px;
  height: 16px;
  font-size: 8px;
  margin-right: 7px
}

.rp-metrics {
  gap: 8px
}

.rp-card {
  padding: 8px 10px
}

.rp-card .who {
  margin-bottom: 4px
}

.rp-acc {
  font-size: 24px
}

.rp-mini {
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 11px
}

.rp-mini b {
  display: inline;
  font-size: 12px;
  margin-right: 4px
}

.rp-graph {
  height: 56px
}

#endReview {
  margin-bottom: 10px
}

#endReview[hidden],
#reviewBtn[hidden] {
  display: none !important
}

@media(max-width:640px) {
  .rp-grid {
    grid-template-columns: 1fr
  }
}

@media(max-height:620px) {
  .rp-table td {
    padding: 2px 6px
  }

  .rp-acc {
    font-size: 20px
  }

  .rp-graph {
    height: 40px
  }

  #endBox.analyzed .end-stats {
    display: none
  }
}

/* ===== Modo análisis en el tablero real ===== */
.rv {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.rv[hidden] {
  display: none
}

.rv-top {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bright)
}

.rv-top strong {
  flex: 1;
  font: 800 13px Manrope, sans-serif
}

.rv-top button {
  padding: 5px 10px
}

.rv-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px
}

.rv-move {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 17px Manrope, sans-serif;
  color: var(--bright)
}

.rv-move .rp-dot {
  margin: 0;
  width: 24px;
  height: 24px;
  font-size: 11px
}

.rv-eval {
  margin-left: auto;
  font: 800 14px Manrope, sans-serif;
  background: var(--line);
  padding: 3px 8px;
  border-radius: 6px
}

.rv-cat {
  font: 700 13px Manrope, sans-serif;
  margin-top: 3px
}

.rv-desc {
  font-size: 12.5px;
  color: var(--text);
  margin-top: 5px;
  line-height: 1.4
}

.rv-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle
}

.rv-badge {
  position: absolute;
  z-index: 3;
  top: 1px;
  right: 1px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font: 800 12px Manrope, sans-serif;
  color: #15120e;
  box-shadow: 0 1px 4px #000a;
  pointer-events: none
}

/* ===== Ajustes: piezas y tablero ===== */
.gear {
  margin-left: auto;
  background: var(--card);
  color: var(--bright);
  border: 1px solid var(--line);
  padding: 6px;
  border-radius: 8px;
  display: grid;
  place-items: center
}

.gear:hover {
  background: var(--line)
}

.gear .material-symbols-rounded {
  margin: 0
}

body.board-img .square.light,
body.board-img .square.dark,
body.board-img .pv-sq {
  background: transparent !important
}

body.board-img .coord {
  color: #fff !important;
  text-shadow: 0 0 3px #000, 0 0 2px #000
}

.st {
  width: min(680px, 100%);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.st-head {
  display: flex;
  align-items: center
}

.st-head h3 {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px
}

.st-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto
}

.st-head .material-symbols-rounded {
  margin: 0
}

.st-head-actions .end-x {
  position: static;
  right: auto;
  top: auto
}

.st-body {
  display: flex;
  gap: 16px;
  min-height: 0;
  flex: 1
}

.st-preview {
  flex: none;
  width: 236px
}

.pv-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden
}

.pv-sq {
  display: flex;
  align-items: center;
  justify-content: center
}

.pv-sq.light {
  background: var(--light)
}

.pv-sq.dark {
  background: var(--dark)
}

.pv-sq img {
  width: 94%;
  height: 94%
}

.st-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0
}

.st-tabs {
  display: flex;
  gap: 6px
}

.st-tab {
  flex: 1;
  background: var(--card);
  color: var(--muted);
  padding: 8px;
  border-radius: 7px;
  font-weight: 700;
  border: 1px solid var(--line)
}

.st-tab.active {
  color: var(--bright);
  border-color: var(--green)
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  overflow: auto;
  padding: 2px;
  max-height: min(340px, 52dvh);
  align-content: start
}

.st-grid[hidden] {
  display: none
}

.settings-general {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  padding: 8px 2px;
  color: var(--bright)
}

.settings-general[hidden] { display: none }
.settings-general input[type="color"] { width: 58px; height: 38px; padding: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 6px }
.settings-check { display: flex; align-items: center; gap: 9px; cursor: pointer }

.st-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 4px 6px;
  border-radius: 9px;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center
}

.st-card:hover {
  background: var(--line)
}

.st-card.sel {
  border-color: var(--green);
  background: rgba(129, 182, 76, .09);
  color: var(--bright)
}

.st-thumb {
  display: flex;
  justify-content: center;
  height: 40px
}

.st-thumb img {
  width: 40px;
  height: 40px
}

.st-thumb.bd {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  background-size: 100% 100%;
  background-color: #2f2c28
}

.st-thumb.theme {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  background: linear-gradient(135deg, #111827 0%, #f5f5f5 100%);
  position: relative;
  overflow: hidden
}

.st-thumb.theme::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  pointer-events: none
}

.st-theme-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%
}

.st-theme-page[hidden],
.st-grid[hidden] {
  display: none
}

.st-theme-section {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.st-theme-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.st-theme-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  grid-template-rows: repeat(1, auto);
  gap: 8px;
  width: 100%
}

.st-theme-option {
  min-width: 0;
  min-height: 82px;
  justify-content: center
}

.st-card[data-kind="accent"] {
  min-height: 86px
}

.st-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 20px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  background: var(--card)
}

.st-accent span {
  flex: 1;
  height: 100%
}

.st-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end
}

.st-foot button {
  padding: 9px 16px
}

@media(max-width:600px) {
  .st-body {
    flex-direction: column;
    overflow: auto
  }

  .st-preview {
    align-self: center;
    width: min(200px, 100%)
  }
}

/* ---- Informe de análisis rediseñado ---- */
.an-wrap{display:flex;flex-direction:column;gap:6px;text-align:left}
.an-players{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.an-pl{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.an-gauge{position:relative;width:62px;height:62px;flex:none}
.an-gauge svg{width:100%;height:100%}
.an-gauge circle{fill:none;stroke-width:6;stroke-linecap:round}
.an-gauge circle.bg{stroke:rgba(255,255,255,.1)}
.an-gauge b{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;color:var(--bright)}
.an-who{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--bright);font-size:14px}
.an-who i{width:11px;height:11px;border-radius:3px;border:1px solid #8a867e}
.an-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
.an-sub b{color:var(--bright)}
.an-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.an-cats{display:flex;flex-direction:column;gap:3px}
.an-row{display:grid;grid-template-columns:26px 1fr 128px 1fr 26px;align-items:center;gap:6px;font-size:12px}
.an-row.zero{opacity:.38}
.an-n{text-align:center;font-weight:700;color:var(--bright)}
.an-b{height:9px;border-radius:5px;background:rgba(255,255,255,.06);display:flex}
.an-b.w{justify-content:flex-end}
.an-b i{display:block;height:100%;border-radius:5px;min-width:0;transition:width .6s}
.an-lab{display:flex;align-items:center;gap:6px;justify-content:center;color:var(--text,#d6d3cc);white-space:nowrap}
.an-lab em{font-style:normal;font-size:9px;font-weight:800;color:#1b1a18;min-width:20px;height:18px;padding:0 3px;border-radius:9px;display:grid;place-items:center}
.an-chips{display:flex;flex-wrap:wrap;gap:6px}
.an-chip{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border-radius:16px;border:1px solid var(--c);background:rgba(255,255,255,.04);color:var(--bright);font-size:12px;cursor:pointer}
.an-chip em{font-style:normal;font-size:9px;font-weight:800;background:var(--c);color:#1b1a18;border-radius:10px;padding:2px 5px}
.an-chip small{color:var(--muted);font-size:10px}
.an-chip:hover{background:rgba(255,255,255,.1)}
.an-gwrap{position:relative;border-radius:10px;overflow:hidden}
.an-graph{display:block;width:100%;height:120px;cursor:pointer}
.an-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;border:1.5px solid #1b1a18;pointer-events:none}
.an-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);margin-top:4px}
.an-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
@media(max-width:560px){.an-players{grid-template-columns:1fr}.an-row{grid-template-columns:22px 1fr 104px 1fr 22px;font-size:11px}}

.rv-top button{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;font-size:12px;margin-left:0}
.rv-top button .material-symbols-rounded{font-size:16px}
.rv-top #rvStats{margin-left:auto}
.rv-bar{height:6px;border-radius:3px;background:#3b3a37;margin-top:9px;overflow:hidden}
.rv-bar i{display:block;height:100%;background:#f2f0ea;transition:width .35s}
.rv-jump{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.rv-jump button{font-size:12px;padding:6px}
.an-wrap{animation:anIn .35s ease both}
@keyframes anIn{from{opacity:0;transform:translateY(8px)}}
.an-gauge circle:not(.bg){transition:stroke-dasharray .8s ease}
.an-pl:hover{border-color:rgba(255,255,255,.22)}
.an-row:hover:not(.zero){background:rgba(255,255,255,.05);border-radius:6px}

.cat-ic{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.rv-badge{min-width:0!important;width:26px;height:26px;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;top:0;right:0;filter:drop-shadow(0 1px 2px #0008)}
.rv-move .rp-dot{width:26px;height:26px}
.an-lab .cat-ic{width:20px;height:20px;flex:none}
.an-chip .cat-ic{width:20px;height:20px;flex:none}
.an-chip{padding:4px 10px 4px 4px}
.an-legend .cat-ic{display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-3px}

.end-icon.svg{width:44px;height:44px;font-size:0}
#endBox.analyzed .end-icon.svg{width:32px;height:32px}