/* Practice-specific outcome, promotion, profile and level UI. */
:root {
  --outcome-checkmate: #1c7a34;
  --outcome-stalemate: #5c6773;
  --outcome-rook-lost: #b23a2e;
  --outcome-missed: var(--outcome-rook-lost);
}



/* 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 {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
}


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


.annotation-fill--hint {
  border: 3px solid var(--annotation-hint);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, rgba(15, 143, 131, 0.3) 100%);
  box-shadow: inset 0 0 12px var(--annotation-hint);
}


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


#restart-btn:hover svg {
  transform: rotate(-25deg);
}


.hint-btn svg,
.switch-btn svg {
  fill: #fffaf0;
  stroke: none;
}


.level-dot {
  fill: rgba(255, 250, 240, 0.35);
  transition: fill 0.15s ease;
}


/* Level 0 = all four dots empty; each level up fills one more, so level 4
   (the hardest, fully random) shows all four filled. */
.level-btn[data-level="1"] .level-dot:nth-of-type(-n + 1),
.level-btn[data-level="2"] .level-dot:nth-of-type(-n + 2),
.level-btn[data-level="3"] .level-dot:nth-of-type(-n + 3),
.level-btn[data-level="4"] .level-dot:nth-of-type(-n + 4) {
  fill: #fffaf0;
}


.piece-btn {
  padding: 0.45rem;
}


.piece-btn .piece-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  line-height: 1;
  color: #fffaf0;
  user-select: none;
}


/* Emoji theme icons render with more visual weight than the piece-art
   preview, so this button gets extra breathing room (ported from
   seker-avi.html's #theme-icon rule). */
#theme-btn {
  padding: 0.7rem;
}


/* Piece-set toggle icon: always previews the king art, since a fixed
   reference piece is easier to read at a glance than one that changes. */
#pieceset-btn .piece-glyph {
  background-image: var(--active-king);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: var(--piece-filter);
}


.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 {
  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 {
  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);
}


/* Mate-in-one refresh button also shows the side to move. */
.turn-refresh[data-color="w"],
.turn-refresh[data-color="w"]:hover {
  background: linear-gradient(180deg, #fff, #eeeae2);
  border-color: #948c7e;
}

.turn-refresh[data-color="w"] svg { stroke: #202020; }

.turn-refresh[data-color="b"],
.turn-refresh[data-color="b"]:hover {
  background: linear-gradient(180deg, #383838, #101010);
  border-color: #666;
}

.turn-refresh[data-color="b"] svg { stroke: #fff; }

/* The profile button shows an icon before selection and the rating after. */
.rating-badge {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fffaf0;
}


#profile-icon[hidden],
#profile-rating[hidden] {
  display: none;
}


/* 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. */
.promotion-picker {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(20, 18, 12, 0.5);
}


.promotion-picker.show {
  display: flex;
}


.promotion-card {
  padding: 1.2rem 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);
  text-align: center;
  box-sizing: border-box;
}


.promotion-choices {
  display: flex;
  gap: 0.6rem;
}


.promotion-choices button {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}


.promotion-choices button:hover {
  background-color: rgba(201, 118, 47, 0.25);
  transform: translateY(-2px);
}


/* Piece art per button, resolved here (not in JS) so the url() in each
   --active-... / --black-... token resolves relative to this stylesheet,
   matching every other piece in the app — see the JS comment at
   showPromotionPicker for why reading the same tokens out in JS breaks the
   image paths. */
.promotion-picker[data-color="w"] button[data-piece="q"] { background-image: var(--active-queen); }

.promotion-picker[data-color="w"] button[data-piece="n"] { background-image: var(--active-knight); }

.promotion-picker[data-color="w"] button[data-piece="r"] { background-image: var(--active-rook); }

.promotion-picker[data-color="w"] button[data-piece="b"] { background-image: var(--active-bishop); }

.promotion-picker[data-color="b"] button[data-piece="q"] { background-image: var(--black-queen); }

.promotion-picker[data-color="b"] button[data-piece="n"] { background-image: var(--black-knight); }

.promotion-picker[data-color="b"] button[data-piece="r"] { background-image: var(--black-rook); }

.promotion-picker[data-color="b"] button[data-piece="b"] { background-image: var(--black-bishop); }


.promotion-picker[data-color="w"] button[data-piece] {
  filter: var(--piece-filter);
}

.promotion-picker[data-color="b"] button[data-piece] {
  filter: var(--enemy-filter);
}


/* 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);
}