/* Practice-specific outcome, promotion, profile and level UI. */



/* Auto-drawn "no escape" marks on the black king's blocked squares
   (outcome visuals) — an X shape, not just a color, so the
   checkmate/stalemate distinction never relies on color alone. */
.annotation-x {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
}


.annotation-x::before,
.annotation-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  width: 84%;
  height: 13%;
  border-radius: 2px;
}


.annotation-x::before { transform: translateY(-50%) rotate(45deg); }

.annotation-x::after { transform: translateY(-50%) rotate(-45deg); }


.annotation-x--checkmate::before,
.annotation-x--checkmate::after { background: var(--outcome-checkmate); }


.annotation-x--stalemate::before,
.annotation-x--stalemate::after { background: var(--outcome-stalemate); }


/* Soft glow behind the black king's own square (check vs. not-in-check) —
   a radial gradient so the piece itself stays fully visible. */


.annotation-fill--check {
  background: radial-gradient(circle, rgba(178, 58, 46, 0) 25%, rgba(178, 58, 46, 0.65) 100%);
}





.annotation-fill--safe {
  background: radial-gradient(circle, rgba(92, 103, 115, 0) 25%, rgba(92, 103, 115, 0.55) 100%);
}


.outcome-banner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(20, 18, 12, 0.32);
}


.outcome-banner.show {
  display: flex;
}


.outcome-badge {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffaf0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}


.outcome-badge svg {
  width: 3.2rem;
  height: 3.2rem;
}


/* Checkmate / stalemate / rook-lost are distinguished by both shape
   (solid vs. dashed border) and color, and each carries its own icon —
   never a color-only distinction. */
.outcome-banner[data-outcome="checkmate"] .outcome-badge,
.outcome-banner[data-outcome="won"] .outcome-badge {
  border: 5px solid var(--outcome-checkmate);
  color: var(--outcome-checkmate);
}


.outcome-banner[data-outcome="stalemate"] .outcome-badge {
  border: 5px dashed var(--outcome-stalemate);
  color: var(--outcome-stalemate);
}


.outcome-banner[data-outcome="rook-lost"] .outcome-badge,
.outcome-banner[data-outcome="lost"] .outcome-badge {
  border: 5px solid var(--outcome-rook-lost);
  color: var(--outcome-rook-lost);
}


/* "Missed" (1 Hamlede Mat): a non-mating move —
   double-ring border so it's never confused with rook-lost's plain solid
   ring at a glance, on top of the icon already being different. */
.outcome-banner[data-outcome="missed"] .outcome-badge {
  border: 5px double var(--outcome-missed);
  color: var(--outcome-missed);
}


/* Countdown (assets/js/chess-timer.js) ran out before the attempt ended —
   dotted border keeps it distinct from every outcome above at a glance. */
.outcome-banner[data-outcome="timeout"] .outcome-badge {
  border: 5px dotted var(--outcome-timeout);
  color: var(--outcome-timeout);
}


/* Promotion piece picker (1 Hamlede Mat): a centered modal — like the
   outcome banner and profile overlay — rather than a small popup anchored
   to a board square, so the four choices stay easy to read/tap for a young
   student regardless of which square the pawn landed on. */
/* Student-profile overlay (1 Hamlede Mat): "kim oynuyor?" prompt shown
   when there's no active profile yet, or via the switch-student button. */
.profile-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(20, 18, 12, 0.55);
}


.profile-overlay.show {
  display: flex;
}


.profile-card {
  width: min(320px, 86%);
  padding: 1.4rem;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 30px rgba(40, 30, 10, 0.3);
  box-sizing: border-box;
  text-align: center;
}


.profile-card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--ink);
}


.profile-card input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  font-size: 1rem;
  box-sizing: border-box;
  margin-bottom: 0.8rem;
}


.profile-card button.profile-start {
  width: 100%;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--accent-dark);
  background: linear-gradient(180deg, #dc9a4c, var(--accent));
  color: #fffaf0;
  font-size: 1rem;
  cursor: pointer;
}


.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: 0.8rem;
}


.profile-chip {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}


.profile-chip:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Taş Alma: captured and lost totals under the badge on the end screen. */
.outcome-banner:has(.capture-summary) { flex-direction: column; gap: 1rem; }
.capture-summary {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: .75rem 1.25rem;
  border-radius: 16px;
  background: #fffaf0;
  color: #2b2418;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.capture-summary:empty { display: none; }
.capture-summary__diff { font-size: 1.6rem; font-weight: 700; }

@media (pointer: coarse) {
  .profile-card button.profile-start, .profile-card input { min-height: 44px; }
}