body.ck-body { overflow-x: hidden; }

.ck-page {
  width: min(980px, calc(100% - 28px));
  margin-inline: auto;
  padding-bottom: 32px;
}
.ck-title {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--ms-title);
  font-weight: 600;
  color: var(--ms-ink);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.ck-status {
  min-height: 1.4em;
  margin: 4px 0 12px;
  text-align: center;
  font-family: var(--ms-text);
  color: #6e5646;
}

.ck-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.ck-board {
  width: min(560px, 100%, max(380px, calc(100svh - 310px)));
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  direction: ltr;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(196, 161, 90, 0.55);
  box-shadow: 0 8px 16px rgba(74, 58, 42, 0.08);
  flex: none;
}
.ck-cell {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.ck-cell.light { background: #f6ecdf; cursor: default; }
.ck-cell.dark { background: #7b5138; cursor: pointer; }
.ck-cell.is-selected { box-shadow: inset 0 0 0 3px #f8e7c4; }
.ck-cell.is-hint::before,
.ck-cell.is-take::before {
  content: "";
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: rgba(248, 231, 196, 0.92);
  position: absolute;
}
.ck-cell.is-take::before {
  width: 46%;
  height: 46%;
  background: transparent;
  border: 3px solid #f0d48a;
}
.ck-cell.shake { animation: ck-shake 0.28s ease; }
@keyframes ck-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}

.ck-piece {
  width: 74%;
  height: 74%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(40, 24, 16, 0.28);
}
.ck-piece.human {
  background: radial-gradient(circle at 35% 30%, #fffaf3, #e7d3b4 70%);
  border: 2px solid #c4a15a;
}
.ck-piece.ai {
  background: radial-gradient(circle at 35% 30%, #6a4636, #3a2418 72%);
  border: 2px solid #c9a86a;
}
.ck-piece.king i {
  width: 56%;
  height: 56%;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 10H5z' fill='%23d9b765' stroke='%238a6a2e' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='5' y='18.5' width='14' height='2' rx='1' fill='%23d9b765' stroke='%238a6a2e' stroke-width='1'/%3E%3C/svg%3E");
}
.ck-piece.king {
  box-shadow: 0 0 0 2px rgba(217, 183, 101, 0.75), 0 2px 4px rgba(40, 24, 16, 0.28);
}
.ck-piece.king.must { box-shadow: 0 0 0 3px #f0d48a, 0 2px 4px rgba(40, 24, 16, 0.28); }
.ck-piece.taken { opacity: 0.35; }
.ck-piece.must { box-shadow: 0 0 0 3px #f0d48a, 0 2px 4px rgba(40, 24, 16, 0.28); }

.ck-side {
  flex: none;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ck-hero {
  flex: none;
  pointer-events: none;
  transform-origin: 50% 76%;
  animation: ck-sway 3.6s ease-in-out infinite;
}
.ck-tim {
  --lean: -1;
  position: relative;
  transform-origin: 50% 76%;
  transition: rotate 0.3s ease, translate 0.3s ease;
}
.ck-hero img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Head and forearm are cut from the same PNG; percentages are pixel coordinates of the 372x876 image. */
.ck-tim-body {
  width: 148px;
  height: auto;
  clip-path: polygon(0% 42.69%, 100% 42.69%, 100% 100%, 0% 100%, 0% 62.21%, 36.83% 62.21%, 35.75% 56.85%, 39.25% 53.65%, 40.59% 51.26%, 0% 50.68%);
}
.ck-tim-arm,
.ck-tim-head {
  position: absolute;
  inset: 0;
}
.ck-tim-arm img,
.ck-tim-head img {
  width: 100%;
  height: 100%;
}
.ck-tim-arm {
  transform-origin: 37.63% 50.8%;
  transition: rotate 0.24s ease;
  animation: ck-arm 3.6s ease-in-out infinite;
}
.ck-tim-arm img {
  clip-path: polygon(0% 50.68%, 40.59% 51.26%, 39.25% 53.65%, 35.75% 56.85%, 36.83% 62.21%, 0% 62.21%);
}
.ck-tim-head {
  transform-origin: 50.3% 42.7%;
  transition: rotate 0.35s ease;
  animation: ck-nod 4.8s ease-in-out infinite;
}
.ck-tim-head img { clip-path: inset(0 0 57.31% 0); }
.ck-tim-head.blink img {
  -webkit-mask-image:
    radial-gradient(2.2% 1.9% at 53.9% 36.2%, transparent 98%, #000 100%),
    radial-gradient(2.1% 1.8% at 64.1% 35.9%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(2.2% 1.9% at 53.9% 36.2%, transparent 98%, #000 100%),
    radial-gradient(2.1% 1.8% at 64.1% 35.9%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
.ck-lid {
  position: absolute;
  width: 4.4%;
  height: 1.1%;
  border-bottom: 1.5px solid #1a1d3a;
  border-radius: 0 0 50% 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.ck-lid-l { left: 53.9%; top: 36.6%; }
.ck-lid-r { left: 64.1%; top: 36.3%; }
.ck-tim-head.blink .ck-lid { opacity: 1; }
.ck-tim-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ck-tim-fx path {
  fill: none;
  stroke: #1a1d3a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ck-tim-fx g {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ck-hero.is-watching .ck-tim { rotate: calc(var(--lean) * 3deg); }
.ck-hero.is-watching .ck-tim-head { rotate: calc(var(--lean) * 10deg); }

.ck-hero.is-thinking .ck-tim,
.ck-hero.is-moving .ck-tim {
  rotate: calc(var(--lean) * 6deg);
  translate: calc(var(--lean) * 6px) -2px;
}
.ck-hero.is-thinking .ck-tim-head { rotate: calc(var(--lean) * 7deg); }
.ck-hero.is-moving .ck-tim-head { rotate: calc(var(--lean) * 9deg); }
.ck-hero.is-moving .ck-tim-arm { animation: none; rotate: 22deg; }
.ck-hero.is-moving .fx-move { opacity: 1; }

.ck-hero.is-happy { animation: ck-hop 0.9s ease-out, ck-bounce 1.4s ease-in-out 0.9s infinite; }
.ck-hero.is-happy .ck-tim-head { rotate: -6deg; }
.ck-hero.is-happy .ck-tim-arm { animation: ck-wave 0.7s ease-in-out infinite alternate; }
.ck-hero.is-happy .fx-star { opacity: 1; }

.ck-hero.is-sad { animation: none; }
.ck-hero.is-sad .ck-tim {
  rotate: 4deg;
  translate: 0 8px;
}
.ck-hero.is-sad .ck-tim-head { animation: none; rotate: 12deg; }
.ck-hero.is-sad .ck-tim-arm { animation: none; rotate: -5deg; }
.ck-hero.is-sad .fx-sad { opacity: 1; }

html[dir="rtl"] .ck-tim { --lean: 1; }

@keyframes ck-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.4deg); }
}
@keyframes ck-nod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(4deg); }
  65% { transform: rotate(-3deg); }
}
@keyframes ck-arm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}
@keyframes ck-hop {
  0% { transform: translateY(0) rotate(0deg); }
  38% { transform: translateY(-22px) rotate(-6deg) scale(1.04); }
  68% { transform: translateY(-2px) rotate(2deg); }
  100% { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes ck-bounce {
  0%, 100% { transform: translateY(-6px) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(-3deg); }
}
@keyframes ck-wave {
  from { transform: rotate(38deg); }
  to { transform: rotate(56deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-hero,
  .ck-hero.is-happy,
  .ck-tim-head,
  .ck-tim-arm,
  .ck-hero.is-happy .ck-tim-arm { animation: none; }
  .ck-tim,
  .ck-tim-arm,
  .ck-tim-head { transition: none; }
}
.ck-side .ck-score { margin-top: 6px; }
.ck-side .ck-actions { margin-top: 8px; }

.ck-score {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 14px;
  font-family: var(--ms-text);
  color: #5a3828;
}
.ck-score b {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
}
.ck-score span { font-size: 0.95rem; }
.ck-actions { text-align: center; margin-top: 12px; }
.ck-btn {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(196, 161, 90, 0.55);
  border-radius: 999px;
  background: rgba(251, 246, 238, 0.92);
  color: #5a3828;
  font-family: var(--ms-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.ck-win {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 56, 40, 0.28);
  z-index: 5;
  padding: 20px;
}
.ck-win[hidden] { display: none; }
.ck-win-card {
  width: min(420px, 100%);
  padding: 22px 18px;
  text-align: center;
  border-radius: 22px;
  background: rgba(251, 246, 238, 0.96);
  border: 1px solid rgba(196, 161, 90, 0.55);
  box-shadow: 0 8px 16px rgba(74, 58, 42, 0.12);
}
.ck-win-card h2 {
  margin: 0 0 14px;
  font-family: var(--ms-title);
  font-size: 1.8rem;
  font-weight: 600;
  color: #5a3828;
}
@media (max-width: 820px) {
  .ck-page { width: min(980px, calc(100% - 12px)); }
  .ck-title { margin-top: 2px; }
  .ck-status { margin: 2px 0 8px; }
  .ck-stage { flex-direction: column; gap: 6px; }
  .ck-board { width: min(100%, 520px); }
  .ck-side {
    width: min(100%, 520px);
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }
  .ck-tim-body { width: auto; height: clamp(110px, calc(100svh - 632px), 170px); }
  .ck-tim { --lean: 1; }
  html[dir="rtl"] .ck-tim { --lean: -1; }
  .ck-side .ck-score { margin-top: 0; gap: 16px; flex: 1; }
  .ck-side .ck-actions { margin-top: 0; }
  .ck-cell.is-take::before { border-width: 2px; }
}