/* Board and icon controls use the same shell as the mating exercises. */
/* Reuse the themed collectibles from Sweet Hunt. */
[data-adventure="pawn"] g-chess-board::part(piece-wc) { background-image: var(--sweet1-img); }
[data-adventure="pawn"] g-chess-board::part(piece-wd) { background-image: var(--sweet2-img); }
[data-adventure="pawn"] g-chess-board::part(piece-wg) { background-image: var(--sweet3-img); }
[data-adventure="pawn"] g-chess-board::part(piece-wc),
[data-adventure="pawn"] g-chess-board::part(piece-wd),
[data-adventure="pawn"] g-chess-board::part(piece-wg) {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.board-wrap { width: min(1000px, 95vw, calc(100dvh - 10rem)); }
.quest-status { width: min(1000px, 95vw, 90vh); margin: .8rem auto 0; text-align: center; font-size: .85rem; line-height: 1.5; }
.quest-summary { margin: 0; font-weight: 650; }
.quest-feedback { margin: .4rem 0; min-height: 3em; }
.quest-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin: .25rem 0; font-size: .75rem; }
chess-toolbar .icon-btn:focus-visible, .promotion-choices button:focus-visible { outline: 3px solid var(--annotation-green); outline-offset: 3px; }
#danger-btn[pressed="true"] .icon-btn { background: linear-gradient(180deg, #c65b4c, #a8382c); border-color: #882020; }
.promotion-picker:not([hidden]), .outcome-banner:not([hidden]) { display: flex; }
.outcome-banner { pointer-events: none; }
.promotion-card p { margin: 0 0 1rem; }
[hidden] { display: none !important; }
.quest-overlay { position: absolute; pointer-events: none; z-index: 26; }
.quest-mouse-lane { position: absolute; width: 12.5%; height: 12.5%; overflow: hidden; pointer-events: none; }
.quest-mouse-runner { position: absolute; left: 11%; top: 24%; width: 78%; height: 52%; opacity: 0; transform: translate(var(--mouse-start-x), var(--mouse-start-y)); animation: quest-mouse-cross var(--mouse-duration, 1.8s) linear both; animation-delay: var(--mouse-delay, 0s); }
.quest-mouse-facing { display: block; width: 100%; height: 100%; }
.quest-mouse-art { display: block; width: 100%; height: 100%; background: var(--mouse-frames, url("adventure-mouse-walk.svg")) 0 0 / 600% 100% no-repeat; animation: quest-mouse-walk .48s steps(6) infinite; }
.quest-mouse-lane[data-direction="right"] { --mouse-frames: url("adventure-mouse-walk-right.svg"); }
@keyframes quest-mouse-cross {
  0% { opacity: 1; transform: translate(var(--mouse-start-x), var(--mouse-start-y)); }
  99% { opacity: 1; transform: translate(var(--mouse-end-x), var(--mouse-end-y)); }
  100% { opacity: 0; transform: translate(var(--mouse-end-x), var(--mouse-end-y)); }
}
@keyframes quest-mouse-walk { to { background-position: 120% 0; } }
@media (prefers-reduced-motion: reduce) { .quest-mouse-lane { display: none; } }
.quest-mark { position: absolute; width: 12.5%; height: 12.5%; display: grid; place-items: center; box-sizing: border-box; }
.quest-mark--goal { border: 3px solid #9f711e; border-radius: 16%; background: #fff2a540; font-size: clamp(1.1rem, 3vw, 2.4rem); color: #75520d; text-shadow: 0 1px 1px white; }
.quest-mark--capture { align-items: start; justify-items: end; padding: 2px 4px; font-size: clamp(.7rem, 1.8vw, 1.3rem); color: #fff3b0; text-shadow: 0 1px 3px #543706, 0 0 2px #543706; }
[data-adventure="pawn"] .quest-mark--goal { border: 0; border-radius: 0; background: transparent; text-shadow: none; }
[data-adventure="king"] .quest-mark--goal { border: 0; border-radius: 0; background: transparent; text-shadow: none; }
.quest-home { display: block; width: 88%; height: 88%; background: url("adventure-home.svg") center / contain no-repeat; }
.quest-goal-magic { position: absolute; inset: 0; pointer-events: none; }
.quest-fairy-star {
  --fairy-color: #ffda4b;
  --fairy-drift: -8px;
  position: absolute;
  left: 26%;
  top: 18%;
  width: clamp(5px, 1.1vw, 10px);
  aspect-ratio: 1;
  background: var(--fairy-color);
  clip-path: polygon(50% 0, 62% 34%, 98% 38%, 71% 61%, 80% 97%, 50% 78%, 20% 97%, 29% 61%, 2% 38%, 38% 34%);
  opacity: 0;
  animation: quest-fairy-rise 3s ease-in-out infinite;
}
.quest-fairy-star:nth-child(2) { left: 58%; top: 22%; --fairy-color: #ff8cce; --fairy-drift: 9px; animation-delay: -.5s; }
.quest-fairy-star:nth-child(3) { left: 42%; top: 8%; --fairy-color: #84e9ff; --fairy-drift: -4px; animation-delay: -1s; }
.quest-fairy-star:nth-child(4) { left: 72%; top: 28%; --fairy-color: #c2a0ff; --fairy-drift: 6px; animation-delay: -1.5s; }
.quest-fairy-star:nth-child(5) { left: 16%; top: 30%; --fairy-color: #a4ef8a; --fairy-drift: -6px; animation-delay: -2s; }
.quest-fairy-star:nth-child(6) { left: 50%; top: 19%; --fairy-color: #fff1a0; --fairy-drift: 5px; animation-delay: -2.5s; }
@keyframes quest-fairy-rise {
  0% { opacity: 0; transform: translate(0, 5px) scale(.35) rotate(-15deg); }
  20% { opacity: 1; }
  45% { opacity: .55; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fairy-drift), -24px) scale(.85) rotate(65deg); }
}
@media (prefers-reduced-motion: reduce) {
  .quest-fairy-star { animation: none; opacity: .8; }
}
.quest-star { display: block; width: 70%; height: 70%; background: url("adventure-star.svg") center / contain no-repeat; }
.quest-mark--capture .quest-star { width: 36%; height: 36%; }
[data-adventure="pawn"] .quest-mark--goal .quest-star {
  transform-origin: center;
  animation: quest-star-feint 8s ease-in-out infinite;
}
@keyframes quest-star-feint {
  0%, 68%, 100% { transform: rotate(0deg) scale(1); }
  72% { transform: rotate(-18deg) scale(.96); }
  75% { transform: rotate(12deg) scale(1.04); }
  79% { transform: rotate(-10deg) scale(1); }
  88% { transform: rotate(360deg) scale(1.08); }
  94% { transform: rotate(360deg) scale(1); }
  94.01% { transform: rotate(0deg) scale(1); }
}
.quest-star-burst { position: absolute; inset: 0; pointer-events: none; }
.quest-burst-star {
  --burst-x: -32px;
  --burst-y: -28px;
  position: absolute;
  left: 50%; top: 45%;
  width: clamp(5px, 1.1vw, 10px); aspect-ratio: 1;
  background: #ffe878;
  clip-path: polygon(50% 0, 62% 34%, 98% 38%, 71% 61%, 80% 97%, 50% 78%, 20% 97%, 29% 61%, 2% 38%, 38% 34%);
  opacity: 0;
  animation: quest-star-scatter 8s ease-out infinite;
}
.quest-burst-star:nth-child(2) { --burst-x: 0px; --burst-y: -42px; background: #ff9ddb; }
.quest-burst-star:nth-child(3) { --burst-x: 32px; --burst-y: -28px; background: #99efff; }
.quest-burst-star:nth-child(4) { --burst-x: 43px; --burst-y: 0px; background: #cab0ff; }
.quest-burst-star:nth-child(5) { --burst-x: 32px; --burst-y: 28px; background: #a4ef8a; }
.quest-burst-star:nth-child(6) { --burst-x: 0px; --burst-y: 40px; background: #fff1a0; }
.quest-burst-star:nth-child(7) { --burst-x: -32px; --burst-y: 28px; background: #ff9ddb; }
.quest-burst-star:nth-child(8) { --burst-x: -43px; --burst-y: 0px; background: #99efff; }
@keyframes quest-star-scatter {
  0%, 79% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  81% { opacity: 1; }
  88% { opacity: .9; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.15) rotate(150deg); }
  95%, 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x) * 1.4), calc(-50% + var(--burst-y) * 1.4)) scale(.3) rotate(240deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-adventure="pawn"] .quest-mark--goal .quest-star { animation: none; }
  .quest-burst-star { animation: none; opacity: 0; }
}
.quest-mark--hint { border: 4px solid #15781b; border-radius: 50%; color: #15781b; background: #a7d67a55; font-size: 2rem; }
.quest-mark--danger {
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 100%, #ff70294d, #b51d3030 60%, #74162a12);
}
.quest-mark--danger::before {
  content: ''; position: absolute; inset: 5%; border: 2px solid #f75250;
  border-radius: 15%; box-shadow: inset 0 0 12px #ef30484d, 0 0 8px #ff503438;
  animation: quest-danger-pulse 1.8s ease-in-out var(--danger-delay) infinite;
}
.quest-danger-warning {
  position: absolute; right: 8%; bottom: 7%; width: 28%; aspect-ratio: 1;
  filter: drop-shadow(0 2px 2px #4b0c20aa);
}
.quest-danger-warning svg { display: block; width: 100%; height: 100%; fill: #ffcb66; stroke: #9b2631; stroke-width: 1.4; }
.quest-danger-exclamation { fill: none; stroke: #631628; stroke-width: 2.5; stroke-linecap: round; }
.quest-danger-ember {
  position: absolute; bottom: 12%; left: calc(18% + var(--ember-index) * 25%);
  width: 4%; height: 9%; border-radius: 60% 40% 50% 50%;
  background: #ffd270; box-shadow: 0 0 5px #ff683b;
  animation: quest-danger-embers 2.2s ease-out infinite;
  animation-delay: calc(var(--danger-delay) - var(--ember-index) * .6s);
}
@keyframes quest-danger-pulse {
  0%, 100% { opacity: .5; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1); box-shadow: inset 0 0 18px #ff493760, 0 0 9px #ff503450; }
}
@keyframes quest-danger-embers {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-360%) scale(.2) rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .quest-mark--danger::before { animation: none; }
  .quest-danger-ember { display: none; }
}
g-chess-board::part(piece-bx) { background-image: url('adventure-obstacle.svg'); }
@media (max-width: 700px) {
  body { justify-content: flex-start; padding-top: 4rem; padding-bottom: 1rem; }
  chess-toolbar { max-width: 420px; margin-inline: auto; gap: .5rem; }
  chess-toolbar .icon-btn { width: 44px; height: 44px; }
  .board-wrap { width: min(95vw, 70dvh); }
  .quest-status { width: min(95vw, 90vh); font-size: .8rem; }
  .promotion-card { max-width: 94%; padding: .9rem; }
  .promotion-choices { gap: .35rem; }
  .promotion-choices button { width: clamp(44px, 15vw, 64px); height: clamp(44px, 15vw, 64px); }
}
@media (min-width: 701px) and (max-height: 650px) {
  chess-toolbar { gap: .35rem; }
  chess-toolbar .icon-btn { width: 44px; height: 44px; }
}
@media (min-width: 701px) and (max-height: 600px) {
  body { padding-right: 7rem; }
  chess-toolbar { display: grid; grid-template-columns: repeat(2, 44px); }
}

/* A magical hint follows the legal pawn route all the way to the goal. */
.quest-magic-route { position: absolute; inset: 0; pointer-events: none; }
.quest-magic-route svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.quest-route-glow { stroke: #fff3a3; stroke-width: 2.8; opacity: .4; filter: drop-shadow(0 0 1px #ffd12b); }
.quest-route-trail { stroke: #ffe65a; stroke-width: .8; stroke-dasharray: .2 2.4; animation: quest-route-flow 2.5s linear infinite; }
.quest-route-star { position: absolute; width: 3.4%; aspect-ratio: 1; background: var(--route-color, #ffe878); clip-path: polygon(50% 0, 62% 34%, 98% 38%, 71% 61%, 80% 97%, 50% 78%, 20% 97%, 29% 61%, 2% 38%, 38% 34%); transform: translate(-50%, -50%); animation: quest-route-twinkle 1.8s ease-in-out infinite; animation-delay: var(--route-delay, 0s); }
@keyframes quest-route-flow { to { stroke-dashoffset: -10.4; } }
@keyframes quest-route-twinkle {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.7) rotate(-10deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .quest-route-trail, .quest-route-star { animation: none; }
}

.quest-goal-firework { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.quest-firework-particle {
  position: absolute; width: 13px; height: 13px;
  background: var(--firework-color); border-radius: 2px;
  box-shadow: 0 0 9px var(--firework-color);
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 72% 62%, 80% 100%, 50% 78%, 20% 100%, 28% 62%, 0 38%, 37% 35%);
  animation: quest-goal-explode 1.6s cubic-bezier(.1,.6,.2,1) .15s both;
}
@keyframes quest-goal-explode {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  20% { opacity: 1; }
  65% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--firework-x)), calc(-50% + var(--firework-y) + 22px)) rotate(180deg) scale(.15); }
}
@media (prefers-reduced-motion: reduce) {
  .quest-firework-particle { animation-duration: .01ms; }
}

.quest-goal-firework::before {
  content: ''; position: absolute; width: 58px; height: 58px;
  background: url("adventure-star.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 16px #fff9aa);
  animation: quest-collection-flash .55s ease-out both;
}
.quest-goal-firework::after {
  content: ''; position: absolute; width: 28px; height: 28px;
  border: 5px solid #ffe79a; border-radius: 50%;
  box-shadow: 0 0 22px #ffd34d, inset 0 0 12px #fff6b4;
  animation: quest-collection-ring .8s ease-out both;
}
@keyframes quest-collection-flash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.7) rotate(20deg); filter: brightness(2) drop-shadow(0 0 25px #fff9aa); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3) rotate(45deg); }
}
@keyframes quest-collection-ring {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}
@media (prefers-reduced-motion: reduce) {
  .quest-goal-firework::before, .quest-goal-firework::after { animation-duration: .01ms; }
  .quest-firework-particle { animation-delay: 0s; }
}

/* Adventure boards use the viewport space left by its controls. */
body[data-adventure] { padding: .75rem 6rem .75rem .75rem; }
body[data-adventure] .layout { flex-wrap: nowrap; }
body[data-adventure] .board-wrap { width: min(calc(100vw - 6.75rem), calc(100dvh - 1.5rem)); flex-shrink: 0; }
@media (max-width: 700px) {
  body[data-adventure] { padding: 3.5rem .4rem .5rem; }
  body[data-adventure] .layout { gap: .75rem; }
  body[data-adventure] .board-wrap { width: min(calc(100vw - .8rem), calc(100dvh - 11rem)); }
}