:root {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-card: #16213e;
  --accent: #e94560;
  --accent-hover: #ff6b81;
  --text-primary: #eee;
  --text-secondary: #a0a0b8;
  --border: #2a2a4a;
  --success: #4ecca3;
  --warning: #ffc107;
  --chess-light: #f0d9b5;
  --chess-dark: #b58863;
  --chess-blue: #4ea8ff;
  --chess-dot: rgba(30, 30, 30, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

.game-header {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--accent);
  padding: 18px 0;
}

.game-header .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-header h1 {
  font-size: 1.6rem;
  margin: 0;
  background: linear-gradient(135deg, var(--chess-light), var(--chess-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.back-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.back-link:hover { color: var(--accent); }

.game-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.mode-selector, .difficulty-selector, .time-control-selector, .controls-panel {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mode-selector { margin-bottom: 16px; }
.difficulty-selector { margin-bottom: 16px; }
.time-control-selector { margin-bottom: 16px; }
.time-control-label {
  color: var(--text-secondary);
  align-self: center;
  font-weight: 600;
}

.mode-btn, .diff-btn, .tc-btn, .btn, .promo-piece {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn, .diff-btn, .tc-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.mode-btn:hover, .diff-btn:hover, .tc-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mode-btn.active, .diff-btn.active, .tc-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-danger {
  background: transparent;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}
.btn-danger:hover { background: rgba(233, 69, 96, 0.15); }

.btn-helper-on {
  background: rgba(78, 168, 255, 0.12);
  color: var(--chess-blue);
  border: 2px solid var(--chess-blue);
}
.btn-helper-on:hover { background: rgba(78, 168, 255, 0.22); color: #6fbcff; }

.btn-sound {
  background: rgba(78, 204, 163, 0.12);
  color: var(--success);
  border: 2px solid var(--success);
}
.btn-sound:hover { background: rgba(78, 204, 163, 0.22); color: #6fefb5; }
.btn-sound-off {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 2px solid var(--border);
}
.btn-sound-off:hover { border-color: var(--text-secondary); color: var(--text-primary); }

/* PGN button — purple/violet accent to differentiate from sound/helper */
.btn-pgn {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 2px solid #a855f7;
}
.btn-pgn:hover { background: rgba(168, 85, 247, 0.22); color: #d8b4fe; }

/* Trophy button — gold accent to stand out as a meta-progression button */
.btn-trophy {
  background: rgba(255, 215, 0, 0.10);
  color: #ffd54a;
  border: 2px solid rgba(255, 215, 0, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-trophy:hover { background: rgba(255, 215, 0, 0.22); color: #ffe27a; }

.trophy-count {
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.32);
  padding: 2px 8px;
  border-radius: 8px;
  color: #ffd54a;
  letter-spacing: 0.4px;
}

.btn-helper-off {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 2px solid var(--border);
}
.btn-helper-off:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.hidden { display: none !important; }

/* ------------------ Clocks ------------------ */
.clocks-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 200px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: 'Courier New', monospace;
  transition: all 0.2s ease;
}

.clock.white { color: #eee; }
.clock.black { color: #eee; }

.clock.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px 2px rgba(233, 69, 96, 0.35);
  background: linear-gradient(135deg, var(--bg-card), rgba(233, 69, 96, 0.12));
}

.clock.low {
  border-color: #ff6b6b;
  color: #ff8a8a;
  animation: clock-flash 0.9s ease-in-out infinite;
}

.clock.expired {
  background: rgba(255, 107, 107, 0.25);
  border-color: #ff6b6b;
  color: #ff6b6b;
  font-weight: 800;
}

@keyframes clock-flash {
  0%, 100% { box-shadow: 0 0 0 1px #ff6b6b, 0 0 14px 2px rgba(255, 107, 107, 0.25); }
  50% { box-shadow: 0 0 0 1px #ff6b6b, 0 0 24px 6px rgba(255, 107, 107, 0.55); }
}

.clock-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.clock-time {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.clock.untimed .clock-time { color: var(--text-secondary); font-size: 1.1rem; }

.status {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  min-height: 1.6em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.turn-indicator {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-block;
}
.turn-indicator.white { background: #fff; }
.turn-indicator.black { background: #1a1a1a; border-color: #555; }

.status.check { color: var(--warning); }
.status.gameover { color: var(--success); }

.main-layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  gap: 22px;
  align-items: start;
}

.board-wrap { display: flex; justify-content: center; }

.board-area {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.file-labels, .rank-labels {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
}

.file-labels {
  display: flex;
  width: var(--board-size, 512px);
  padding: 0 4px;
}
.file-labels span { flex: 1; text-align: center; }
.file-labels.top { margin-bottom: 4px; }
.file-labels.bottom { margin-top: 4px; }

/* ------------------ Live Evaluation Bar ------------------ */
/* Horizontal sliding bar that visualises the current position's evaluation
   from White's perspective. Black side grows from the left when Black is
   winning, the marker slides right when White is winning. Centered marker
   means an equal position. */
.eval-bar-wrap {
  width: var(--board-size, 512px);
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: 'Courier New', monospace;
  user-select: none;
}

.eval-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #1a1a1a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.55);
}

/* Each half of the bar: Black filled on the left, White filled on the right.
   The visible "winning" side grows from its side toward the center, while
   the other half shrinks. The marker is a separate element on top. */
.eval-side {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.45s cubic-bezier(0.25, 0.85, 0.3, 1),
              background 0.3s ease;
}
.eval-black {
  left: 0;
  width: 50%;
  background: linear-gradient(90deg, #1a1a1a, #2a2a3a);
}
.eval-white {
  right: 0;
  width: 50%;
  background: linear-gradient(270deg, #f5f5f5, #d0d0d0);
}

/* Subtle vertical centerline so it reads as "0" exactly. */
.eval-center-line {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 50%;
  width: 1px;
  background: rgba(233, 69, 96, 0.55);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.eval-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 4px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateX(-2px);
  transition: left 0.45s cubic-bezier(0.25, 0.85, 0.3, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.eval-knob {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 0 6px 1px rgba(233, 69, 96, 0.55);
  transform: translateX(-50%);
}

/* When the eval is clearly winning for one side, the marker (and knob) take
   on that side's accent colour so a quick glance instantly tells who is up. */
.eval-marker.white-win {
  background: #4ecca3;
  box-shadow: 0 0 10px 2px rgba(78, 204, 163, 0.55);
}
.eval-marker.white-win .eval-knob {
  background: #4ecca3;
}
.eval-marker.black-win {
  background: #ff6b6b;
  box-shadow: 0 0 10px 2px rgba(255, 107, 107, 0.55);
}
.eval-marker.black-win .eval-knob {
  background: #ff6b6b;
}

/* Summary line under the bar: numeric score + short phrase + expand button. */
.eval-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.eval-summary-label {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 56px;
  text-align: center;
  font-size: 1.05rem;
}

.eval-summary-label.win-white { color: #4ecca3; }
.eval-summary-label.win-black { color: #ff6b6b; }

.eval-summary-detail {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-family: 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0;
}

.eval-summary-toggle {
  cursor: pointer;
  color: var(--chess-blue);
  font-size: 0.95rem;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.eval-summary-toggle:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Expanded material breakdown row — hidden by default. Toggled by the ⓘ
   button so it's always reachable but doesn't crowd the UI by default. */
.eval-detail {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  animation: eval-detail-in 0.2s ease;
}
@keyframes eval-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.eval-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.eval-detail-side {
  font-weight: 700;
  min-width: 90px;
}
.eval-detail-side.white-side { color: #eee; }
.eval-detail-side.black-side { color: #ccc; }
.eval-detail-row span:last-child {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}


.rank-labels {
  display: flex;
  flex-direction: column;
  width: 24px;
  height: var(--board-size, 512px);
}
.rank-labels span { flex: 1; display: flex; align-items: center; justify-content: center; }
.rank-labels.left { margin-right: 4px; }
.rank-labels.right { margin-left: 4px; }

.board-with-ranks { display: flex; align-items: center; }

.board {
  width: var(--board-size, 512px);
  height: var(--board-size, 512px);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 4px solid var(--bg-card);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  width: 100%; height: 100%;
}

.square.light { background: var(--chess-light); }
.square.dark { background: var(--chess-dark); }

.square.selected { box-shadow: inset 0 0 0 5px var(--accent); }
.square.last-move { box-shadow: inset 0 0 0 4px rgba(78, 204, 163, 0.65); }
.square.check { box-shadow: inset 0 0 18px 6px rgba(233, 69, 96, 0.55); }

@keyframes pulse-glow {
  0%, 100% { box-shadow: inset 0 0 20px 4px rgba(78, 168, 255, 0.3); }
  50% { box-shadow: inset 0 0 30px 8px rgba(78, 168, 255, 0.6); }
}

.square.best-piece {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.piece {
  font-size: calc(var(--board-size, 512px) / 8 * 0.84);
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 2;
  transition: transform 0.18s ease;
  pointer-events: none;
}
.piece.white { color: #fff; }
.piece.black { color: #1a1a1a; }

.hint-dot {
  position: absolute;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: var(--chess-dot);
  z-index: 1;
  pointer-events: none;
}

.hint-dot.best {
  background: var(--chess-blue);
  box-shadow: 0 0 10px 2px rgba(78,168,255,0.65), 0 0 16px 4px rgba(78,168,255,0.35);
  width: 32%; height: 32%;
}

.capture-ring {
  position: absolute;
  width: 86%; height: 86%;
  border-radius: 50%;
  border: 5px solid var(--chess-dot);
  z-index: 1;
  pointer-events: none;
}

.capture-ring.best {
  border-color: var(--chess-blue);
  box-shadow: 0 0 10px 1px rgba(78,168,255,0.55);
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-indicator {
  background: var(--warning);
  color: #1a1a1a;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  animation: review-pulse 1.6s ease-in-out infinite;
}

@keyframes review-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.review-controls {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.85rem;
  margin: 0 !important;
  min-width: 38px;
}

.move-history .move-pair {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.move-history .move-pair:hover {
  background: rgba(78, 168, 255, 0.15);
}
.move-history .move-pair.current {
  background: rgba(255, 193, 7, 0.25);
  box-shadow: inset 0 0 0 1px var(--warning);
}
.move-history .move-pair.current strong {
  color: var(--warning);
}
.move-history .move-clickable {
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.move-history .move-clickable:hover {
  background: rgba(78, 168, 255, 0.25);
  color: var(--chess-blue);
}
.move-history .move-clickable.current {
  background: rgba(255, 193, 7, 0.35);
  color: var(--warning);
  box-shadow: inset 0 0 0 1px var(--warning);
  font-weight: 700;
}
.move-history .move-num {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 700;
  margin-right: 2px;
}
.move-history .move-num:hover {
  color: var(--accent);
}

/* In review mode the board is read-only: keep squares clickable for the
   helper highlights but disable the pointer cursor. */
.board.review-mode .square {
  cursor: default;
}

.captured-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 32px;
}

.captured-piece {
  font-size: 1.55rem;
  line-height: 1;
}

.bottom-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  margin-top: 22px;
}

.history-panel {
  max-height: 220px;
  display: flex;
  flex-direction: column;
}

.move-history {
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  max-height: 160px;
  padding-right: 6px;
}

.move-pair {
  display: inline-block;
  margin-right: 12px;
}

.move-pair strong { color: var(--accent); margin-right: 4px; }

/* Scrollbar */
.move-history::-webkit-scrollbar { width: 6px; }
.move-history::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; }
.move-history::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.controls-panel {
  flex-direction: column;
  align-items: stretch;
  min-width: 160px;
}

.controls-panel .btn { margin-bottom: 8px; }

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.modal-content {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 32px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  min-width: 280px;
  animation: popIn 0.25s ease;
}

@keyframes popIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.modal-message { margin-bottom: 18px; color: var(--text-secondary); font-size: 1rem; }

.promo-options {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.promo-piece {
  font-size: 2.4rem;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 12px;
}
.promo-piece:hover { border-color: var(--accent); background: rgba(233,69,96,0.1); }

.promo-timer { color: var(--text-secondary); font-size: 0.85rem; }

/* PGN modal — slightly wider so textareas fit comfortably */
.pgn-modal-content {
  min-width: 480px;
  max-width: 640px;
  text-align: left;
}

.pgn-help {
  text-align: center;
  margin-bottom: 18px;
}

.pgn-section {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.pgn-section-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pgn-textarea {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Courier New', 'Menlo', monospace;
  font-size: 0.85rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}

.pgn-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.18);
}

.pgn-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pgn-status {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-left: 4px;
  transition: color 0.2s ease;
}
.pgn-status.ok    { color: var(--success); font-weight: 600; }
.pgn-status.error { color: #ff6b6b; font-weight: 600; }

@media (max-width: 560px) {
  .pgn-modal-content { min-width: 0; max-width: 92vw; padding: 18px 16px; }
  .pgn-textarea { font-size: 0.78rem; }
}

.game-footer {
  text-align: center;
  padding: 24px 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* Pieces in dark squares need lighter visibility actually; black pieces on dark squares need light border */
.square.dark .piece.black { text-shadow: 0 0 2px rgba(255,255,255,0.25), 0 2px 4px rgba(0,0,0,0.45); }

.flipped {
  transform: rotate(180deg);
}
.flipped .piece {
  transform: rotate(180deg);
}
.flipped .file-labels, .flipped .rank-labels {
  transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 900px) {
  .main-layout { grid-template-columns: 1fr; }
  .captured-panel { order: 2; }
  .board-wrap { order: 1; }
  .bottom-layout { grid-template-columns: 1fr; }
  .controls-panel { flex-direction: row; order: -1; }
}

@media (max-width: 560px) {
  :root { --board-size: 92vw !important; }
  .board { border-width: 3px; }
  .game-container { padding: 16px 12px 40px; }
  .panel { padding: 12px; }
  .file-labels { width: var(--board-size, 92vw); }
  .rank-labels { height: var(--board-size, 92vw); }
  .piece { font-size: calc(var(--board-size, 92vw) / 8 * 0.78); }
  .hint-dot { width: 24%; height: 24%; }
  .hint-dot.best { width: 28%; height: 28%; }
}

@media (max-width: 360px) {
  :root { --board-size: 94vw !important; }
  .mode-btn, .diff-btn, .btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* ------------------ Trophy Cabinet Modal ------------------ */
.trophy-modal-content {
  min-width: 520px;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
  padding: 26px 28px 22px;
}

.trophy-modal-message {
  text-align: center;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
}

.trophy-progress {
  margin-bottom: 22px;
}
.trophy-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.trophy-progress-count {
  font-weight: 700;
  color: var(--text-primary);
}
.trophy-progress-pct {
  font-weight: 700;
  color: #ffd54a;
}
.trophy-progress-track {
  width: 100%;
  height: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.trophy-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd54a 0%, #ffb300 50%, #ff8f00 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.trophy-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: trophyShimmer 2.4s linear infinite;
}
@keyframes trophyShimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.trophy-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.trophy-card.locked {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.trophy-card.unlocked {
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
  background: linear-gradient(160deg, rgba(255,215,0,0.06) 0%, var(--bg-card) 60%);
}
.trophy-card.unlocked::before {
  /* gold sparkle ribbon at the top */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #ffd54a 50%, transparent 100%);
  border-radius: 12px 12px 0 0;
}
.trophy-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.7);
}

.trophy-card-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
  line-height: 1;
  display: block;
}
.trophy-card.locked .trophy-card-icon {
  filter: grayscale(0.85);
  opacity: 0.7;
}
.trophy-card-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.trophy-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 6px;
  min-height: 32px;
}
.trophy-card-date {
  font-size: 0.72rem;
  color: #ffd54a;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.trophy-card.locked .trophy-card-date {
  color: var(--text-secondary);
  font-weight: 500;
}

.trophy-modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .trophy-modal-content {
    min-width: 0;
    max-width: 92vw;
    padding: 18px 16px;
  }
  .trophy-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .trophy-card-icon { font-size: 1.9rem; }
  .trophy-card-name { font-size: 0.85rem; }
  .trophy-card-desc { font-size: 0.74rem; }
}

/* ------------------ Achievement Toast Notifications ------------------ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 340px;
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.16) 0%, rgba(255, 143, 0, 0.08) 100%);
  border: 2px solid rgba(255, 215, 0, 0.65);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--text-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 215, 0, 0.25);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
  pointer-events: auto;
}
.achievement-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.achievement-toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

.achievement-toast-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
  animation: trophyPulse 1.4s ease-in-out infinite;
}
@keyframes trophyPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.achievement-toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.achievement-toast-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #ffd54a;
}
.achievement-toast-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .achievement-toast { padding: 10px 14px; }
  .achievement-toast-icon { font-size: 1.7rem; }
}