/* ===== SELECT — flèche grise cassé vivante ===== */
.panel__field select,
.lobby__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(135deg, transparent 50%, #9a9388 50%),
    linear-gradient(225deg, #9a9388 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) center,
    calc(100% - 0.75rem) center;
  background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem !important;
  transition: background-position 0.25s ease, border-color 0.2s, box-shadow 0.2s;
}
.panel__field select:hover,
.lobby__select:hover {
  background-image:
    linear-gradient(135deg, transparent 50%, #e0b96f 50%),
    linear-gradient(225deg, #e0b96f 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) center,
    calc(100% - 0.65rem) center;
}
.panel__field select:focus,
.lobby__select:focus {
  background-image:
    linear-gradient(135deg, transparent 50%, #e0b96f 50%),
    linear-gradient(225deg, #e0b96f 50%, transparent 50%);
}
.lobby__select {
  background-color: rgba(0,0,0,0.3);
  border-radius: 12px;
}
.lobby__select:focus { outline: none; border-color: #e0b96f; }

/* ===== HORLOGES ===== */
.clock-row { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem 0; }
.clock {
  display: inline-flex;  gap: 0.5rem;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(224,185,111,0.2);
  border-radius: 10px; padding: 0.4rem 0.95rem; font-variant-numeric: tabular-nums;
}
.clock i { font-style: normal; opacity: 0.7; }
.clock b { font-size: 1.15rem;  font-weight: 700; }
.clock.is-active { border-color: #e0b96f; box-shadow: 0 0 0 2px rgba(224,185,111,0.25); }
.clock.is-active b { color: #e0b96f; }
.clock.is-low b { color: #f0746e; }

/* ===== PROMOTION ===== */
.promo-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
.promo-choice {
  display: flex; flex-direction: column;  gap: 0.3rem;
  background: rgba(0,0,0,0.3);  
  border-radius: 12px; padding: 0.9rem 0.4rem; cursor: pointer;
  font-size: 2rem; transition: all 0.18s;
}
.promo-choice span { font-size: 0.72rem; color: rgba(250,246,238,0.82); }
.promo-choice:hover { border-color: #e0b96f; color: #e0b96f; transform: translateY(-3px); }

/* ===== ANALYSE ===== */
.modal__card--wide { max-width: 600px; }
.analysis__summary { display: flex; flex-wrap: wrap; gap: 0.6rem;  margin: 0 0 1.2rem; justify-content: center; }
.analysis__pill { display: flex; align-items: center; gap: 0.4rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.18); border-radius: 100px; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; }
.analysis__pill b { font-size: 1rem; color: #e0b96f; }
.analysis__pill.is-best b { color: #7cc59a; }
.analysis__pill.is-inacc b { color: #e0c46f; }
.analysis__pill.is-mistake b { color: #f0a86f; }
.analysis__pill.is-blunder b { color: #f0746e; }
.analysis__list { max-height: 48vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; padding-right: 0.3rem; text-align: left; }
.analysis__move { display: grid; grid-template-columns: 2.8rem 1fr auto auto;  gap: 0.6rem; align-items: center; padding: 0.5rem 0.7rem; background: rgba(0,0,0,0.22); border-radius: 9px; font-size: 0.88rem; }
.analysis__move-no { color: rgba(250,246,238,0.45); font-variant-numeric: tabular-nums; }
.analysis__move-san { font-weight: 600; color: #faf6ee; }
.analysis__move-tag { font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.analysis__move-eval { font-variant-numeric: tabular-nums; color: rgba(250,246,238,0.76); font-size: 0.8rem; }

.tag-best { color: #7cc59a; }
.tag-great { color: #9ad0b0; }
.tag-good { color: rgba(250,246,238,0.8); }
.tag-inacc { color: #e0c46f; }
.tag-mistake { color: #f0a86f; }
.tag-blunder { color: #f0746e; }

/* ===== PUZZLES ===== */
.puzzles__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1.1rem; }
.puzzle-card { background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18); border-radius: 14px; padding: 1.2rem; transition: transform 0.2s, border-color 0.2s; }
.puzzle-card:hover { transform: translateY(-3px); border-color: rgba(224,185,111,0.4); }
.puzzle-card__rating { display: inline-block; background: rgba(224,185,111,0.16); color: #e0b96f; border-radius: 100px; padding: 0.2rem 0.7rem; font-size: 0.74rem; font-weight: 700; margin-bottom: 0.6rem; }
.puzzle-card h4 { font-family: 'Fraunces', serif;  margin: 0 0 0.4rem; font-size: 1.1rem; }
.puzzle-card p { color: rgba(250,246,238,0.8); font-size: 0.85rem; margin: 0 0 1rem; }
.puzzle-card__btn { width: 100%; background: linear-gradient(135deg,#e0b96f,#b8924f); color: #1a1206; border: 0; padding: 0.7rem; border-radius: 10px;  }
.puzzle-card__btn:hover { transform: translateY(-2px); }
.puzzle__head { display: flex;  justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
.puzzle__rating { background: rgba(224,185,111,0.16); color: #e0b96f; border-radius: 100px; padding: 0.2rem 0.7rem; font-size: 0.78rem; font-weight: 700; }
.puzzle__desc { color: rgba(250,246,238,0.86); font-size: 0.9rem; line-height: 1.5; }
.puzzle__feedback { margin: 0; padding: 0.9rem 1.2rem;  font-family: 'Fraunces', serif; font-size: 1.05rem; min-height: 1.4em; color: rgba(250,246,238,0.8); border-top: 1px solid rgba(224,185,111,0.18); background: rgba(0,0,0,0.3); }
.puzzle__feedback.is-ok { color: #7cc59a; }
.puzzle__feedback.is-bad { color: #f0746e; }
.puzzle__feedback.is-hint { color: #e0b96f; }

.room__cadence { display: inline-block; background: rgba(224,185,111,0.16); color: #e0b96f; border-radius: 100px; padding: 0.25rem 0.8rem; font-size: 0.78rem; font-weight: 600; margin: 0.4rem 0; }