/* Board feedback occupies the existing board frame, never a layout track. */
.board-shell { position:relative; }
.board.finished { filter:saturate(.35) brightness(.67); pointer-events:none; }
.board-feedback { position:absolute; inset:5px; z-index:8; display:grid; justify-items:center; align-content:start; padding:12px; pointer-events:none; border-radius:inherit; }
.board-feedback[hidden] { display:none; }
.feedback-card { max-width:100%; padding:9px 16px; border:1px solid #b9d7df; border-radius:14px; background:#f6fbf7f5; color:#244959; box-shadow:0 3px 14px #112a4338; text-align:center; }
.feedback-card strong { font-size:15px; }
.feedback-card p { margin-top:4px; font-size:12px; line-height:1.5; }
.board-feedback.is-result { align-content:center; padding:clamp(12px,3vw,30px); background:#142b4938; pointer-events:auto; }
.is-result .feedback-card { width:min(430px,100%); max-height:100%; padding:clamp(18px,3vw,32px); overflow:auto; border:2px solid #d8bd7b; border-radius:22px; background:#fffaf0; box-shadow:0 12px 45px #12294555; }
.is-result h2 { font:normal clamp(27px,3.2vw,43px)/1.1 Georgia,serif; letter-spacing:-.6px; color:#284c64; }
.is-result .feedback-card p { margin-top:12px; font-size:14px; color:#526579; }
.feedback-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.feedback-actions button { flex:1; min-height:44px; padding:10px 14px; }
.feedback-actions .primary-button { flex-basis:100%; color:#fff8df; background:#2c576c; }
.feedback-actions .secondary-button { color:#29495e; background:#e2e9e5; }
.feedback-actions .primary-button:hover { background:#204052; }
.feedback-actions .secondary-button:hover { background:#d1e0da; }
.feedback-actions button:focus-visible { outline:3px solid #9d5821; outline-offset:3px; }
.board-feedback[data-state="lost"] .feedback-card { border-color:#adc3d2; }
@media(max-width:700px) {
  .board-feedback { inset:3px; padding:8px; }
  .feedback-card { padding:7px 12px; }
  .feedback-card p { font-size:11px; }
  .is-result .feedback-card { padding:18px; }
  .is-result .feedback-card p { font-size:12px; margin-top:9px; }
  .feedback-actions { gap:7px; margin-top:16px; }
  .feedback-actions button { padding:8px; font-size:12px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .board-feedback { padding:7px; }
  .is-result .feedback-card { padding:12px; max-height:100%; }
  .is-result h2 { font-size:24px; }
  .is-result .feedback-card p { margin-top:6px; font-size:11px; }
  .feedback-actions { margin-top:12px; gap:6px; }
  .feedback-actions .primary-button { flex-basis:auto; }
  .feedback-actions button { min-height:38px; padding:8px; font-size:11px; }
}