/* ===================== Шашки ===================== */
#page-checkers #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;
}
#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 #5a3a1a;
  border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
.cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cell.light{background:#f0d9a8}
.cell.dark{background:#8b5a2b}

.cell.move-hl::after,
.cell.capture-hl::after{
  content:'';
  position:absolute;
  inset:32%;
  border-radius:50%;
  background:rgba(60,180,80,.85);
  box-shadow:0 0 10px rgba(0,255,100,.6);
  pointer-events:none;
}
.cell.capture-hl::after{
  background:rgba(220,60,60,.85);
  box-shadow:0 0 10px rgba(255,80,80,.7);
}
.cell.selected{box-shadow:inset 0 0 0 4px #ffd400}

.piece{
  position:relative;
  width:78%;
  height:78%;
  border-radius:50%;
  z-index:1;
  box-shadow:
    inset -3px -3px 6px rgba(0,0,0,.35),
    inset 3px 3px 6px rgba(255,255,255,.35),
    0 4px 8px rgba(0,0,0,.35);
  transition:transform .1s ease;
}
.piece.w{
  background:radial-gradient(circle at 32% 28%,#ffffff,#cfcfcf 70%,#9c9c9c);
  border:2px solid #8a8a8a;
}
.piece.b{
  background:radial-gradient(circle at 32% 28%,#6a6a6a,#1a1a1a 70%,#000000);
  border:2px solid #000;
}
.piece.king::after{
  content:'♛';
  position:absolute;
  top:48%;left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(18px,3.4vw,30px);
  color:#ffd34d;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.6);
  line-height: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);
}

/* Подсветка последнего хода */
.cell.last-from::before,
.cell.last-to::before{
  content:'';
  position:absolute;
  inset:6%;
  border-radius:8px;
  pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(255,180,0,.95);
  animation:lastPulse 1.4s ease-out 1;
}
.cell.last-to::before{box-shadow:inset 0 0 0 4px rgba(255,120,0,.95)}
.cell.last-capture::before{
  content:'';
  position:absolute;
  inset:6%;
  border-radius:8px;
  pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(220,40,40,.95);
  animation:captureFlash .9s ease-out 1;
}
@keyframes lastPulse{
  0%{background:rgba(255,200,0,.55)}
  100%{background:transparent}
}
@keyframes captureFlash{
  0%{background:rgba(255,0,0,.55)}
  100%{background:transparent}
}
.piece.just-moved{animation:pieceBounce .45s ease-out 1}
@keyframes pieceBounce{
  0%{transform:scale(.7)}
  60%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

/* Панель утки-соперника */
.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}

/* Обязанные бить */
.piece.must-capture{
  box-shadow:
    inset -3px -3px 6px rgba(0,0,0,.35),
    inset 3px 3px 6px rgba(255,255,255,.35),
    0 0 0 3px #ff2d2d,
    0 0 16px 4px rgba(255,60,60,.85),
    0 4px 8px rgba(0,0,0,.35);
  animation:mustCapturePulse 1.1s ease-in-out infinite;
}
@keyframes mustCapturePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.must-capture-badge{
  display:inline-block;
  margin-bottom:8px;
  padding:6px 14px;
  border-radius:12px;
  background:#ffe0e0;
  color:#8a1414;
  font-size:14px;
  font-weight:700;
  box-shadow:0 3px 10px rgba(180,0,0,.25);
  animation:badgeBlink 1.6s ease-in-out infinite;
}
@keyframes badgeBlink{
  0%,100%{opacity:1}
  50%{opacity:.6}
}

/* ===================== Адаптив ===================== */
@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}
}