/* ===================== Шахматы ===================== */
#page-chess #chess-status{
  min-height:24px;
  margin-bottom:12px;
  font-size:17px;
  font-weight:700;
  text-align:center;
}

.game-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
  justify-content:center;
  width:100%;
}
.board-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#chess-board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  width:min(92vw,72vh,560px);
  height:min(92vw,72vh,560px);
  border:6px solid #4a2f14;
  border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  overflow:hidden;
  font-size:min(9vw,7.5vh,56px);
  user-select:none;
  -webkit-user-select:none;
}

.chess-cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.chess-cell.light{background:#f0d9b5}
.chess-cell.dark{background:#b58863}

.chess-piece{
  font-size:1em;
  line-height:1;
  pointer-events:none;
  transition:transform .1s ease;
}
.chess-piece.w{
  color:#fafafa;
  text-shadow:
    -1px -1px 0 #333,
     1px -1px 0 #333,
    -1px  1px 0 #333,
     1px  1px 0 #333,
     0 2px 3px rgba(0,0,0,.4);
}
.chess-piece.b{
  color:#1a1a1a;
  text-shadow:0 1px 2px rgba(255,255,255,.3);
}

/* ===== Подсветки ходов ===== */
.chess-cell.move-hl::after{
  content:'';
  position:absolute;
  inset:36%;
  border-radius:50%;
  background:rgba(60,180,80,.7);
  box-shadow:0 0 10px rgba(0,255,100,.6);
  pointer-events:none;
  animation:moveHint .8s ease-in-out infinite alternate;
}
@keyframes moveHint{
  0%{transform:scale(.9);opacity:.75}
  100%{transform:scale(1.05);opacity:1}
}

.chess-cell.capture-hl::after{
  content:'';
  position:absolute;
  inset:6%;
  border-radius:50%;
  border:4px solid rgba(220,60,60,.85);
  box-shadow:0 0 10px rgba(255,80,80,.7);
  pointer-events:none;
  animation:captureHint .8s ease-in-out infinite alternate;
}
@keyframes captureHint{
  0%{transform:scale(.96);opacity:.75}
  100%{transform:scale(1.03);opacity:1}
}

.chess-cell.selected{
  box-shadow:inset 0 0 0 4px #ffd400;
}

/* ===== Последний ход ===== */
.chess-cell.last-from::before,
.chess-cell.last-to::before{
  content:'';
  position:absolute;
  inset:4%;
  border-radius:8px;
  pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(255,190,60,.95);
  animation:chessLastPulse 1.4s ease-out 1;
}
.chess-cell.last-to::before{
  box-shadow:inset 0 0 0 4px rgba(255,130,20,.95);
  animation:chessLastToPulse 1.4s ease-out 1;
}
@keyframes chessLastPulse{
  0%{background:rgba(255,200,0,.55)}
  100%{background:transparent}
}
@keyframes chessLastToPulse{
  0%{background:rgba(255,150,0,.6)}
  100%{background:transparent}
}

/* ===== Вспышка на съеденной фигуре ===== */
.chess-cell.last-capture::before{
  content:'';
  position:absolute;
  inset:4%;
  border-radius:8px;
  pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(220,40,40,.95);
  animation:chessCaptureFlash .9s ease-out 1;
}
@keyframes chessCaptureFlash{
  0%{background:rgba(255,0,0,.65)}
  100%{background:transparent}
}

/* ===== Подскок переместившейся фигуры ===== */
.chess-piece.just-moved{
  animation:chessPieceBounce .45s ease-out 1;
}
@keyframes chessPieceBounce{
  0%{transform:scale(.65)}
  55%{transform:scale(1.20)}
  80%{transform:scale(.97)}
  100%{transform:scale(1)}
}

/* ===== Шах ===== */
.chess-cell.in-check::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle,rgba(255,40,40,.6) 0%,rgba(255,40,40,.05) 70%);
  pointer-events:none;
  animation:checkPulse 1s ease-in-out infinite;
}
@keyframes checkPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* ===== Управление ===== */
.controls{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.hint{
  margin-top:14px;
  font-size:13px;
  opacity:.7;
  text-align:center;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* ===== Сложность ===== */
.difficulty{
  display:flex;
  align-items:center;
  gap:8px;
  margin:14px auto 0;
  padding:8px 14px;
  background:rgba(255,255,255,.7);
  border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  flex-wrap:wrap;
  justify-content:center;
  width:fit-content;
  max-width:96vw;
}
.diff-label{
  font-size:14px;
  font-weight:700;
  opacity:.7;
  margin-right:2px;
}
.diff-btn{
  border:0;
  padding:8px 16px;
  border-radius:11px;
  background:rgba(255,255,255,.75);
  color:#333;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .1s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.diff-btn:active{transform:scale(.95)}
.diff-btn.active{
  background:linear-gradient(135deg,#ffb84d,#ff8a1e);
  color:#fff;
  box-shadow:0 4px 12px rgba(255,140,30,.5);
}

/* ===== Панель утки (локальная копия) ===== */
.duck-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:240px;
  padding:16px 14px 14px;
  background:rgba(255,255,255,.65);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  backdrop-filter:blur(6px);
}
.duck{
  font-size:96px;
  line-height:1;
  transition:filter .3s ease;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.25));
  animation:duckIdle 2.4s ease-in-out infinite;
}
@keyframes duckIdle{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}
.duck.react-happy{
  animation:duckHappy .55s ease-in-out 3;
  filter:drop-shadow(0 8px 14px rgba(0,220,90,.65));
}
@keyframes duckHappy{
  0%{transform:translateY(0) scale(1) rotate(0)}
  30%{transform:translateY(-24px) scale(1.18) rotate(-10deg)}
  60%{transform:translateY(-10px) scale(1.10) rotate(10deg)}
  100%{transform:translateY(0) scale(1) rotate(0)}
}
.duck.react-sad{
  animation:duckSad 1.1s ease-in-out 1;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25)) grayscale(.45) brightness(.85);
}
@keyframes duckSad{
  0%,100%{transform:rotate(0) translateY(0)}
  15%{transform:rotate(-12deg) translateY(8px)}
  35%{transform:rotate(9deg) translateY(12px)}
  55%{transform:rotate(-7deg) translateY(9px)}
  75%{transform:rotate(4deg) translateY(6px)}
}
.duck.react-thinking{
  animation:duckThink 1.1s ease-in-out infinite;
  filter:drop-shadow(0 8px 12px rgba(255,200,0,.55));
}
@keyframes duckThink{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(-14deg)}
}
.duck.react-win{
  animation:duckHappy .5s ease-in-out 6;
  filter:drop-shadow(0 0 22px rgba(255,215,0,.85));
}
.duck.react-lose{
  animation:duckSad 1.2s ease-in-out 3;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.3)) grayscale(.6) brightness(.75);
}
.duck-name{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  opacity:.65;
  letter-spacing:1px;
  text-transform:uppercase;
}
.speech{
  margin-top:12px;
  position:relative;
  padding:10px 14px;
  border-radius:14px;
  background:#fff;
  font-size:15px;
  font-weight:600;
  text-align:center;
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:background .25s ease,color .25s ease;
}
.speech::before{
  content:'';
  position:absolute;
  top:-8px;left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-top:0;
  border-bottom-color:#fff;
}
.speech.speech-happy{background:#e6ffe9;color:#0f6a1c}
.speech.speech-happy::before{border-bottom-color:#e6ffe9}
.speech.speech-sad{background:#ffe6e6;color:#7a1a1a}
.speech.speech-sad::before{border-bottom-color:#ffe6e6}
.speech.speech-thinking{background:#fff6d9;color:#7a5c00}
.speech.speech-thinking::before{border-bottom-color:#fff6d9}

.pieces-count{
  margin-top:12px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  opacity:.85;
  text-align:center;
}
.pieces-count b{font-size:15px}

@media (max-width:720px){
  .duck-panel{
    width:min(92vw,380px);
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .duck{font-size:56px}
  .duck-name{display:none}
  .speech{
    margin-top:0;
    flex:1 1 60%;
    min-height:52px;
    font-size:13px;
    padding:8px 10px;
  }
  .speech::before{
    top:50%;left:-8px;
    transform:translateY(-50%);
    border:8px solid transparent;
    border-left:0;
    border-right-color:#fff;
  }
  .speech.speech-happy::before{border-right-color:#e6ffe9}
  .speech.speech-sad::before{border-right-color:#ffe6e6}
  .speech.speech-thinking::before{border-right-color:#fff6d9}

  .pieces-count{
    display:flex;
    flex-direction:row;
    justify-content:center;
    width:100%;
    margin-top:6px;
    gap:14px;
    font-size:12px;
    opacity:.9;
  }
  .pieces-count b{font-size:14px}
  .pieces-count span{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }

  .difficulty{gap:6px;padding:8px 10px}
  .diff-btn{padding:7px 12px;font-size:13px}
  .diff-label{width:100%;text-align:center;margin-right:0}
}