/* Identidad propia del Ajedrez San Juan: blanco mineral, azul institucional y celeste. */
:root {
  --bg-dark: #edf3f9;
  --panel-bg: rgba(255, 255, 255, 0.93);
  --panel-border: rgba(6, 27, 66, 0.15);
  --accent: #078fe1;
  --accent-hover: #0577bd;
  --gold: #087ac2;
  --text-main: #071d3d;
  --text-muted: #5b6f89;
  --radius: 16px;
  --brand-navy: #061b42;
  --brand-blue: #07386f;
  --brand-sky: #08a7ee;
  --brand-paper: #f5f8fc;
}

body {
  color: var(--text-main);
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 48% 42%, rgba(8, 167, 238, 0.12), transparent 43%),
    radial-gradient(ellipse at 85% 8%, rgba(6, 27, 66, 0.07), transparent 34%),
    linear-gradient(145deg, #f7f9fc 0%, #e8f0f8 100%);
}

#canvas-container {
  background: linear-gradient(145deg, #eef5fb, #dfeaf5);
}

#canvas-container canvas {
  touch-action: none;
}

#canvas-container canvas.is-dragging-piece {
  cursor: grabbing;
}

.top-bar,
.panel-card,
.mode-tabs,
.floating-help {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--panel-border);
  box-shadow: 0 14px 36px rgba(7, 29, 61, 0.12);
  backdrop-filter: blur(18px) saturate(1.2);
}

.top-bar {
  border-radius: 18px;
  border-top: 3px solid var(--brand-sky);
}

.brand {
  gap: 11px;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: clamp(112px, 13vw, 148px);
  height: auto;
  flex: 0 0 auto;
}

.brand-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(7, 56, 111, 0.34), transparent);
}

.brand h1 {
  color: var(--brand-navy);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.badge-stage,
.tag-elo,
.eval-score-text {
  color: #075e9d;
  background: rgba(8, 167, 238, 0.1);
  border-color: rgba(8, 143, 225, 0.25);
}

.view-switcher {
  background: #eef4fa;
  border: 1px solid rgba(6, 27, 66, 0.1);
}

.view-btn { color: #526984; }
.view-btn:hover { color: var(--brand-navy); background: #e1edf8; }
.view-btn.active,
.mode-tab.active,
.btn-start-challenge,
.btn-campaign-action {
  background: linear-gradient(120deg, #087ac2 0%, #08a7ee 100%);
  color: #fff;
  box-shadow: 0 5px 16px rgba(8, 143, 225, 0.22);
}

.view-btn.secondary { border-left-color: rgba(6, 27, 66, 0.13); }

.user-pill-btn,
.status-pill,
.btn-close-modal,
.promo-buttons button {
  color: var(--brand-navy);
  background: #f3f7fb;
  border-color: rgba(6, 27, 66, 0.12);
}

.user-pill-btn:hover,
.promo-buttons button:hover {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.ranking-pill-btn {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.ranking-pill-btn:hover {
  color: var(--brand-navy);
  background: #a8e2fb;
}

.status-pill.in-check {
  color: #9f2430;
  background: #fff0f0;
  border-color: rgba(190, 45, 58, 0.34);
}

.eval-bar-track {
  background: #d6e3ef;
  border-color: rgba(6, 27, 66, 0.16);
  box-shadow: 0 4px 14px rgba(7, 29, 61, 0.14);
}

.eval-bar-fill { background: linear-gradient(180deg, #fff 0%, #a9dff7 100%); }

.mode-tabs { border-radius: 14px; }
.mode-tab { color: #5b6f89; }
.mode-tab.active { color: #fff; }

.panel-card { border-radius: 18px; }

.ladder-step {
  background: #f2f6fa;
  border-color: rgba(6, 27, 66, 0.09);
}

.ladder-step .step-num {
  color: #5b6f89;
  background: #e0eaf4;
}

.ladder-step .step-name { color: #5b6f89; }
.ladder-step.active {
  background: linear-gradient(145deg, rgba(8, 167, 238, 0.12), rgba(7, 56, 111, 0.06));
  border-color: rgba(8, 143, 225, 0.42);
  box-shadow: inset 0 0 0 1px rgba(8, 167, 238, 0.1);
}

.ladder-step.active .step-num { color: #fff; background: var(--brand-blue); }
.ladder-step.active .step-name { color: var(--brand-navy); }

.avatar-box {
  background: linear-gradient(125deg, #f3f7fb, #fff);
  border-color: rgba(6, 27, 66, 0.1);
}

.avatar-portrait {
  background: #e2edf7;
  border-color: var(--brand-sky);
  box-shadow: 0 5px 16px rgba(7, 56, 111, 0.16);
}

.avatar-dialogue {
  color: #405a78;
  background: #eaf4fb;
  border-left-color: var(--brand-sky);
}

.campaign-rule-banner {
  color: #8f3b38;
  background: #fff4f1;
  border-color: rgba(190, 72, 55, 0.2);
}

.btn-resign {
  color: #a33f3b;
  background: #fff;
  border-color: rgba(190, 72, 55, 0.3);
}

.btn-resign:hover { color: #fff; background: #b94e48; }

.lvl-btn,
.ctrl-btn {
  color: #45607d;
  background: #f0f5fa;
  border-color: rgba(6, 27, 66, 0.1);
}

.lvl-btn.active,
.ctrl-btn.primary {
  color: #fff;
  background: var(--brand-blue);
}

.lvl-btn.extreme.active {
  color: #fff;
  background: linear-gradient(120deg, #07386f 0%, #078fe1 100%);
}

.btn-hint,
.btn-send {
  color: #075e9d;
  background: rgba(8, 167, 238, 0.1);
  border-color: rgba(8, 143, 225, 0.24);
}

#preset-select,
#quick-move-input {
  color: var(--brand-navy);
  background: #f7f9fc;
  border-color: rgba(6, 27, 66, 0.16);
}

#preset-select:focus,
#quick-move-input:focus,
.login-box input:focus,
.login-box select:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 3px rgba(8, 167, 238, 0.13);
}

.ctrl-btn.playing { color: #fff; background: #087ac2; }

.ai-options-row { border-top-color: rgba(6, 27, 66, 0.1); }

.captured-tray,
.move-history {
  background: #eef4f9;
  border: 1px solid rgba(6, 27, 66, 0.08);
}

.history-row { background: rgba(255, 255, 255, 0.7); }
.history-row:nth-child(even) { background: #e4eef7; }
.history-move.latest { color: #087ac2; }

.modal-backdrop {
  background: rgba(6, 27, 66, 0.3);
  backdrop-filter: blur(9px);
}

.welcome-card {
  position: relative;
  overflow: hidden;
  color: var(--brand-navy);
  background:
    radial-gradient(ellipse at 50% -22%, rgba(8, 167, 238, 0.13), transparent 45%),
    linear-gradient(160deg, #fff 0%, #f2f7fb 100%);
  border: 1px solid rgba(7, 56, 111, 0.14);
  box-shadow: 0 26px 72px rgba(6, 27, 66, 0.25);
}

.welcome-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, #061b42 0%, #078fe1 48%, #8bd8f6 100%);
}

.welcome-header { position: relative; gap: 5px; }

.welcome-brand-emblem {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(6, 27, 66, 0.16));
  margin-bottom: 2px;
}

.welcome-header .badge-stage {
  border-radius: 999px;
  letter-spacing: 0.13em;
  font-size: 0.64rem;
}

.welcome-header h2,
.welcome-header p,
.leaderboard-header h3,
.ranking-item,
.rank-player strong,
.btn-close-modal,
.campaign-result-box p,
.modal-box { color: var(--brand-navy); }

.welcome-header h2 {
  font-size: 1.7rem;
  letter-spacing: -0.045em;
}

.welcome-header p { color: #5b6f89; }

.mini-boss-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(6, 27, 66, 0.1);
  box-shadow: 0 3px 10px rgba(7, 29, 61, 0.05);
}

.mini-boss-card.final-boss {
  background: rgba(8, 167, 238, 0.07);
  border-color: rgba(8, 143, 225, 0.32);
}

.mini-boss-card img { border-color: rgba(7, 56, 111, 0.14); }
.mini-boss-card .mini-lvl { color: #087ac2; }
.mini-boss-card strong { color: var(--brand-navy); }

.login-box,
.welcome-Leaderboard {
  color: var(--brand-navy);
  background: #fff;
  border-color: rgba(6, 27, 66, 0.11);
  box-shadow: 0 4px 15px rgba(7, 29, 61, 0.05);
}

.login-box h3 { color: var(--brand-blue); }
.login-box label { color: #5b6f89; }

.login-box input,
.login-box select {
  color: var(--brand-navy);
  background: #f7f9fc;
  border-color: rgba(6, 27, 66, 0.15);
}

.btn-start-challenge { border-radius: 11px; }
.welcome-Leaderboard { min-height: 220px; }

.ranking-item {
  background: #f7f9fc;
  border-color: rgba(6, 27, 66, 0.08);
}

.ranking-item.top-1 {
  background: rgba(8, 167, 238, 0.1);
  border-color: rgba(8, 143, 225, 0.26);
}

.rank-pos { color: #087ac2; }
.rank-player span { color: #61738a; }
.rank-stats { color: #178253; }

.modal-box {
  background: linear-gradient(160deg, #fff 0%, #f2f7fb 100%);
  border-color: rgba(7, 56, 111, 0.14);
  box-shadow: 0 22px 58px rgba(6, 27, 66, 0.24);
}

.promo-buttons button { color: var(--brand-navy); }
.promo-buttons button:hover { color: #fff; }

button,
select,
input { font: inherit; }

:focus-visible {
  outline: 3px solid rgba(8, 143, 225, 0.42);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .top-bar,
  .side-panel { left: 10px; right: 10px; }
  .top-bar { top: 10px; }
  .side-panel { bottom: 10px; }
}

@media (max-width: 620px) {
  .top-bar { gap: 8px; padding: 8px 10px; border-radius: 14px; }
  .brand-logo { width: 104px; }
  .brand { gap: 7px; }
  .brand h1 { font-size: 0.78rem; }
  .view-switcher { padding: 3px; }
  .view-btn { padding: 6px 7px; font-size: 0.69rem; }
  .top-right-group { gap: 5px; }
  .user-pill-btn,
  .ranking-pill-btn,
  .status-pill { padding: 6px 8px; font-size: 0.68rem; }
  .welcome-card { max-height: calc(100vh - 16px); overflow-y: auto; padding: 18px 14px; gap: 12px; }
  .welcome-brand-emblem { width: 70px; height: 70px; }
  .welcome-header h2 { font-size: 1.35rem; }
  .welcome-header p { font-size: 0.78rem; }
  .welcome-bosses-strip { gap: 7px; }
  .mini-boss-card { padding: 7px 5px; }
  .mini-boss-card img { width: 54px; height: 54px; }
  .mini-boss-card strong { font-size: 0.73rem; }
  .mini-boss-card .mini-lvl { font-size: 0.6rem; }
  .welcome-body-grid { gap: 10px; }
  .login-box,
  .welcome-Leaderboard { padding: 12px; }
}