.chess-page {
  --board-shadow: 0 1.2rem 2.8rem rgb(32 32 29 / 18%);
}

.chess-workspace {
  display: grid;
  grid-template-columns: minmax(18rem, 2.2fr) minmax(16rem, 1fr);
  gap: clamp(1.2rem, 3vw, 2.25rem);
  align-items: start;
}

.board-frame {
  position: relative;
  width: min(100%, 44rem);
  min-width: 0;
  overflow: hidden;
  border-radius: 0.45rem;
  box-shadow: var(--board-shadow);
  background:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 13%), transparent 42%),
    #25301b;
}

.flip-debris {
  position: absolute;
  z-index: 22;
  inset: 0;
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.flip-debris-piece {
  position: absolute;
  left: calc(var(--flip-file, 0) * 12.5%);
  top: calc(var(--flip-rank, 0) * 12.5%);
  width: 12.5%;
  height: 12.5%;
  overflow: visible;
  transform-origin: 50% 58%;
  filter: drop-shadow(0 0.25rem 0.22rem rgb(0 0 0 / 45%));
  will-change: transform, opacity;
}

.flip-debris[data-active="true"] .flip-debris-piece {
  animation: flip-piece-scatter 720ms cubic-bezier(0.2, 0.68, 0.32, 1)
    var(--flip-delay, 0ms) both;
}

.flip-gag {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  box-sizing: border-box;
  place-items: center;
  max-width: 100%;
  overflow: hidden;
  padding: clamp(0.75rem, 5vw, 2rem);
  background: rgb(19 24 14 / 88%);
}

.flip-gag[hidden] {
  display: none;
}

.flip-gag-card {
  box-sizing: border-box;
  width: min(100%, 21rem);
  max-width: 100%;
  padding: clamp(1rem, 6vw, 1.75rem);
  border: 1px solid #d9c888;
  border-radius: 0.65rem;
  background: #f5edcf;
  color: #20201d;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 35%);
  animation: flip-gag-shake 320ms ease-out both;
}

.flip-gag-card h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.15rem, 6vw, 1.7rem);
}

.flip-gag-card button {
  max-width: 100%;
  min-height: 2.75rem;
  white-space: normal;
}

.surprise-control {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  cursor: pointer;
}

.surprise-control input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: #315fba;
}

.surprise-control span,
.surprise-control small {
  display: block;
}

.surprise-control small {
  margin-top: 0.15rem;
  color: var(--muted);
}

.surprise-control:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.surprise-result {
  margin-top: 0.8rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #b89338;
  border-radius: 0.5rem;
  background: #101b3a;
  color: #f7e1a0;
  box-shadow: 0 0.7rem 1.8rem rgb(8 21 55 / 18%);
}

.surprise-result p {
  margin: 0.3rem 0 0;
  color: #e9edf9;
  font-size: 0.82rem;
  line-height: 1.55;
}

.surprise-result small {
  display: block;
  margin-top: 0.45rem;
  color: #c7d3f5;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.opening-card {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.8rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.opening-card[hidden] {
  display: none;
}

.opening-card span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opening-card strong {
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1.4;
}

.opening-card[data-opening-state="recognized"] {
  border-color: #8ca45d;
  background: #eef3dd;
  color: #20201d;
}

.opening-card[data-opening-state="recognized"] span {
  color: #56623c;
}

.opening-card[data-opening-state="unavailable"] strong {
  color: var(--muted);
  font-family: inherit;
  font-weight: 500;
}

.achievement-toast {
  --achievement-x: 0;
  position: fixed;
  z-index: 40;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  display: grid;
  width: min(calc(100% - 1.5rem), 25rem);
  padding: 1rem 1rem 1rem 0.85rem;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.85rem;
  overflow: hidden;
  border: 1px solid #b89338;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #101b3a, #081027);
  color: #f7e1a0;
  box-shadow: 0 1.2rem 3rem rgb(8 15 36 / 42%);
  pointer-events: none;
  transform: translateX(var(--achievement-x));
  animation: achievement-toast-life 5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.achievement-icon {
  position: relative;
  display: grid;
  width: 3.4rem;
  aspect-ratio: 1;
  place-items: center;
  align-self: center;
  border: 1px solid #d0a944;
  border-radius: 50%;
  background: radial-gradient(circle, #233b71, #0a1533 72%);
}

.achievement-crown {
  font-family: Georgia, serif;
  font-size: 1.9rem;
  line-height: 1;
}

.achievement-bolt {
  position: absolute;
  right: 0.12rem;
  bottom: -0.18rem;
  color: #fff3b7;
  font-size: 1.25rem;
  font-weight: 900;
  transform: rotate(11deg);
  text-shadow: 0 0 0.45rem #f3c24f;
}

.achievement-copy,
.achievement-kicker,
.achievement-title,
.achievement-description {
  display: block;
}

.achievement-copy {
  min-width: 0;
}

.achievement-kicker {
  color: #c7d3f5;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.achievement-title {
  margin-top: 0.18rem;
  color: #fff3b7;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.achievement-description {
  margin-top: 0.3rem;
  color: #e9edf9;
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.achievement-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.18rem;
  background: linear-gradient(90deg, #7e6320, #f0cb65 55%, #7e6320);
}

@keyframes achievement-toast-life {
  0% {
    opacity: 0;
    transform: translate(var(--achievement-x), 1rem) scale(0.97);
  }

  8%,
  88% {
    opacity: 1;
    transform: translate(var(--achievement-x), 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(var(--achievement-x), 0.4rem) scale(0.99);
  }
}

.minor-event {
  position: absolute;
  z-index: 21;
  inset: 0;
  max-width: 100%;
  overflow: hidden;
  background: rgb(19 24 14 / 48%);
  pointer-events: none;
  isolation: isolate;
}

.minor-event[hidden] {
  display: none;
}

.minor-event-scene {
  position: absolute;
  inset: 0;
}

.minor-event-piece {
  position: absolute;
  z-index: 2;
  left: calc(var(--piece-file, 0) * 12.5%);
  top: calc(var(--piece-rank, 0) * 12.5%);
  width: 12.5%;
  height: 12.5%;
  overflow: visible;
  filter: drop-shadow(0 0.2rem 0.2rem rgb(0 0 0 / 35%));
}

.pawn-leave-traveler {
  position: absolute;
  z-index: 2;
  left: calc(var(--piece-file, 0) * 12.5%);
  top: calc(var(--piece-rank, 0) * 12.5%);
  width: 12.5%;
  height: 12.5%;
  animation: pawn-leave-travel 780ms cubic-bezier(0.3, 0.05, 0.65, 0.95) both;
}

.pawn-leave-traveler .pawn-leave-piece {
  inset: 0;
  width: 100%;
  height: 100%;
}

.pawn-leave-suitcase {
  position: absolute;
  z-index: 3;
  left: 72%;
  top: 70%;
  width: 36%;
  aspect-ratio: 1.18;
  border: max(1px, 0.16vw) solid #302314;
  border-radius: 0.12rem;
  background: #9a6b34;
  box-shadow: inset 0 0 0 max(1px, 0.1vw) #d6a866;
}

.pawn-leave-suitcase::before {
  position: absolute;
  right: 22%;
  bottom: 100%;
  left: 22%;
  height: 35%;
  border: max(1px, 0.16vw) solid #302314;
  border-bottom: 0;
  border-radius: 0.12rem 0.12rem 0 0;
  content: '';
}

.pawn-leave-trail {
  position: absolute;
  left: calc((var(--piece-file, 0) + 0.5) * 12.5%);
  top: calc((var(--piece-rank, 0) + 0.65) * 12.5%);
  width: 22%;
  border-top: max(2px, 0.28vw) dotted rgb(255 245 202 / 82%);
  transform: rotate(var(--trail-angle, 0deg));
  transform-origin: left center;
  animation: minor-route-fade 780ms ease-out both;
}

.knight-gps-event {
  background: rgb(7 19 52 / 52%);
}

.knight-gps-piece {
  animation: knight-gps-recalculate 920ms ease-in-out both;
}

.knight-gps-route {
  position: absolute;
  inset: 11%;
  width: 78%;
  height: 78%;
  overflow: visible;
  fill: none;
  stroke: #f7dd8a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
  filter: drop-shadow(0 0 0.18rem #315fba);
  animation: knight-route-fail 920ms ease-out both;
}

.minor-event-title {
  position: absolute;
  z-index: 4;
  right: 5%;
  bottom: 5%;
  left: 5%;
  box-sizing: border-box;
  max-width: 90%;
  padding: clamp(0.45rem, 2vw, 0.75rem);
  border: 1px solid #d7b85b;
  border-radius: 0.35rem;
  background: rgb(7 19 52 / 94%);
  color: #f7dd8a;
  font-size: clamp(0.72rem, 2.5vw, 1rem);
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 35%);
  animation: minor-route-fade 780ms ease-out both;
}

.obelisk-event {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  background: rgb(2 7 22 / 68%);
  pointer-events: none;
  isolation: isolate;
}

.obelisk-event[hidden] {
  display: none;
}

.obelisk-rays {
  position: absolute;
  inset: -35%;
  background: repeating-conic-gradient(
    from 8deg,
    rgb(71 137 255 / 24%) 0deg 5deg,
    transparent 5deg 18deg
  );
  animation: obelisk-rays 2.4s ease-out both;
}

.obelisk-giant {
  position: absolute;
  inset: 10% 13% 19%;
  filter: drop-shadow(0 0 0.35rem #3183ff) drop-shadow(0 0 1.1rem #114ba7);
  animation: obelisk-assemble 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.obelisk-pawn {
  position: absolute;
  width: 24%;
  height: 24%;
  overflow: visible;
}

.obelisk-pawn use {
  filter: saturate(0.6) brightness(0.78) sepia(1) hue-rotate(170deg) saturate(5);
}

.pawn-1 { left: 38%; top: 0; transform: scale(1.12); }
.pawn-2 { left: 26%; top: 18%; transform: rotate(-28deg); }
.pawn-3 { left: 50%; top: 18%; transform: rotate(28deg); }
.pawn-4 { left: 12%; top: 28%; transform: rotate(62deg); }
.pawn-5 { left: 64%; top: 28%; transform: rotate(-62deg); }
.pawn-6 { left: 38%; top: 24%; transform: scale(1.25); }
.pawn-7 { left: 38%; top: 39%; transform: rotate(180deg) scale(1.05); }
.pawn-8 { left: 29%; top: 52%; transform: rotate(15deg); }
.pawn-9 { left: 47%; top: 52%; transform: rotate(-15deg); }
.pawn-10 { left: 18%; top: 67%; transform: rotate(72deg); }
.pawn-11 { left: 58%; top: 67%; transform: rotate(-72deg); }
.pawn-12 { left: 38%; top: 52%; transform: scale(0.82); }

.obelisk-target-flash {
  position: absolute;
  left: calc(var(--target-file, 0) * 12.5%);
  top: calc(var(--target-rank, 0) * 12.5%);
  width: 12.5%;
  height: 12.5%;
  border: max(2px, 0.35vw) solid #ff645f;
  box-shadow: inset 0 0 1rem #ff271f, 0 0 1.2rem #ff271f;
  animation: obelisk-target 2.4s ease-in both;
}

.obelisk-banner {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 5%;
  left: 5%;
  padding: clamp(0.45rem, 2vw, 0.85rem);
  border: 1px solid #d7b85b;
  border-radius: 0.35rem;
  background: rgb(7 19 52 / 94%);
  color: #f7dd8a;
  text-align: center;
  box-shadow: 0 0.7rem 1.8rem rgb(0 0 0 / 35%);
  animation: obelisk-banner 2.4s ease-out both;
}

.obelisk-banner strong,
.obelisk-banner span {
  display: block;
}

.obelisk-banner strong {
  font-size: clamp(0.8rem, 2.5vw, 1.15rem);
}

.obelisk-banner span {
  margin-top: 0.2rem;
  color: #e9edf9;
  font-size: clamp(0.62rem, 1.8vw, 0.82rem);
}

@keyframes obelisk-assemble {
  0% { opacity: 0; transform: scale(0.25) rotate(-8deg); }
  28% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.82) translateY(8%); }
}

@keyframes obelisk-rays {
  0% { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  32%, 75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1) rotate(7deg); }
}

@keyframes obelisk-target {
  0%, 48% { opacity: 0; transform: scale(0.7); }
  60%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes obelisk-banner {
  0%, 12% { opacity: 0; transform: translateY(0.8rem); }
  24%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes pawn-leave-travel {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  58% { opacity: 1; transform: translate(var(--travel-x-mid, 0%), var(--travel-y-mid, 0%)) rotate(8deg); }
  100% { opacity: 0; transform: translate(var(--travel-x, 0%), var(--travel-y, 0%)) rotate(-12deg); }
}

@keyframes minor-route-fade {
  0% { opacity: 0; }
  20%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes knight-gps-recalculate {
  0% { opacity: 0; transform: rotate(0) scale(0.86); }
  22% { opacity: 1; transform: rotate(-28deg) scale(1); }
  46% { transform: rotate(36deg) scale(1.05); }
  70% { transform: rotate(-14deg) scale(1); }
  100% { opacity: 0; transform: rotate(0) scale(1); }
}

@keyframes knight-route-fail {
  0% { opacity: 0; stroke-dashoffset: 22; }
  24%, 75% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes flip-piece-scatter {
  0%, 12% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
  48% {
    opacity: 1;
    transform: translate3d(var(--flip-apex-x, 0%), var(--flip-dy, -300%), 0)
      rotate(var(--flip-apex-rotation, 0deg)) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--flip-dx, 0%), 760%, 0)
      rotate(var(--flip-rotation, 0deg)) scale(0.84);
  }
}

@keyframes flip-board-upend {
  0% {
    opacity: 1;
    transform: perspective(46rem) translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
  52% {
    opacity: 1;
    transform: perspective(46rem) translate3d(0, 4%, 0) rotateX(68deg) scale(0.985);
  }
  82% {
    opacity: 0.82;
    transform: perspective(46rem) translate3d(0, 13%, 0) rotateX(86deg) scale(0.96);
  }
  100% {
    opacity: 0;
    transform: perspective(46rem) translate3d(0, 30%, 0) rotateX(94deg) scale(0.93);
  }
}

@keyframes flip-board-settle {
  0% { opacity: 0; transform: translate3d(0, 4%, 0) scale(0.985); }
  68% { opacity: 1; transform: translate3d(0, -1%, 0) scale(1.01); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes flip-gag-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.35rem) rotate(-1deg); }
  50% { transform: translateX(0.3rem) rotate(1deg); }
  75% { transform: translateX(-0.15rem); }
}

#chessboard[data-flip-gag-state="departing"] {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  animation: flip-board-upend 900ms cubic-bezier(0.46, 0.04, 0.66, 0.2) both;
  pointer-events: none;
}

#chessboard[data-flip-gag-state="departing"] .pieces-layer {
  opacity: 0;
}

#chessboard[data-flip-gag-state="away"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

#chessboard[data-flip-gag-state="returning"] {
  animation: flip-board-settle 480ms cubic-bezier(0.22, 0.78, 0.28, 1) both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .obelisk-rays,
  .obelisk-giant,
  .obelisk-target-flash,
  .obelisk-banner,
  .pawn-leave-traveler,
  .pawn-leave-trail,
  .knight-gps-piece,
  .knight-gps-route,
  .minor-event-title,
  .flip-debris-piece,
  .flip-gag-card,
  #chessboard[data-flip-gag-state="departing"],
  #chessboard[data-flip-gag-state="returning"] {
    animation: none;
  }

  .achievement-toast {
    animation: none;
  }
}

#chessboard {
  width: 100%;
  aspect-ratio: 1;
  background: #ecdab9;
}

.chess-panel {
  min-width: 0;
}

.move-history {
  margin-top: 1.25rem;
  border-block: 1px solid var(--line);
  padding-block: 1rem;
}

.move-history h2 {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#move-list {
  max-height: 15rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-gutter: stable;
}

#move-list .move-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1fr;
  gap: 0.5rem;
  padding-block: 0.22rem;
  font-variant-numeric: tabular-nums;
}

#move-list .history-event {
  margin-block: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #b89338;
  border-radius: 0.4rem;
  background: #101b3a;
  color: #f7e1a0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.move-number,
.empty-history {
  color: var(--muted);
}

.empty-history {
  font-size: 0.86rem;
}

.chess-controls {
  margin-top: 1.25rem;
}

.chess-controls button:last-child {
  grid-column: 1 / -1;
}

.control-row button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.attribution {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.cm-chessboard.default .board .square.white {
  fill: #f0d9b5;
}

.cm-chessboard.default .board .square.black {
  fill: #8ca45d;
}

.cm-chessboard.default .coordinates .coordinate.black,
.cm-chessboard.default .coordinates .coordinate.white {
  fill: #36451f;
}

@media (max-width: 48rem) {
  .chess-workspace {
    grid-template-columns: 1fr;
  }

  .board-frame {
    width: 100%;
  }

  .achievement-toast {
    --achievement-x: -50%;
    right: auto;
    bottom: 0.75rem;
    left: 50%;
  }
}

@media (forced-colors: active) {
  .opening-card,
  .achievement-toast,
  .achievement-icon {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .achievement-accent {
    background: Highlight;
  }
}