body[data-page="arrow-puzzle"] .ap-play {
  --ap-paper: #fcfcfa;
  --ap-paper-deep: #f3f6fb;
  --ap-frame: #e4e9f2;
  --ap-frame-strong: #cfd8e7;
  --ap-ink: #0a174a;
  --ap-blue: #2588f5;
  --ap-blue-soft: #dcecff;
  --ap-calm-text: #52617c;
  --ap-card-shine: rgba(255,255,255,.95);
  --ap-card-glow: rgba(213,226,243,.28);
}

body[data-page="arrow-puzzle"] .ap-stage {
  max-width: 590px;
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="1"] {
  --ap-paper: #f7fbf4;
  --ap-paper-deep: #e9f3e7;
  --ap-frame: #d4e5d8;
  --ap-frame-strong: #b9d2c0;
  --ap-ink: #244c3c;
  --ap-blue: #4a9b72;
  --ap-blue-soft: #dcefe3;
  --ap-calm-text: #587165;
  --ap-card-glow: rgba(179,214,188,.28);
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="2"] {
  --ap-paper: #fff9f1;
  --ap-paper-deep: #f9ebdc;
  --ap-frame: #efd8c4;
  --ap-frame-strong: #ddbda4;
  --ap-ink: #66371f;
  --ap-blue: #e8783f;
  --ap-blue-soft: #fde2d2;
  --ap-calm-text: #80604c;
  --ap-card-glow: rgba(237,183,143,.28);
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="3"] {
  --ap-paper: #fbf8ff;
  --ap-paper-deep: #eee8f8;
  --ap-frame: #dfd3ee;
  --ap-frame-strong: #c9b5df;
  --ap-ink: #432c6a;
  --ap-blue: #8a68d8;
  --ap-blue-soft: #e8def8;
  --ap-calm-text: #6c6080;
  --ap-card-glow: rgba(198,178,225,.3);
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="4"] {
  --ap-paper: #f2fbfb;
  --ap-paper-deep: #e0f2f3;
  --ap-frame: #cce6e8;
  --ap-frame-strong: #acd1d5;
  --ap-ink: #083f4c;
  --ap-blue: #1b9fb4;
  --ap-blue-soft: #d4f0f3;
  --ap-calm-text: #52747a;
  --ap-card-glow: rgba(159,212,218,.29);
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="5"] {
  --ap-paper: #151b2d;
  --ap-paper-deep: #0c1222;
  --ap-frame: #2d3954;
  --ap-frame-strong: #415171;
  --ap-ink: #edf4ff;
  --ap-blue: #65c2ff;
  --ap-blue-soft: #203c59;
  --ap-calm-text: #aab8cf;
  --ap-card-shine: rgba(91,117,159,.15);
  --ap-card-glow: rgba(63,108,151,.22);
}

body[data-page="arrow-puzzle"] .ap-play .stats-grid {
  gap: .72rem;
  max-width: 590px;
  margin-bottom: .9rem;
  margin-left: auto;
  margin-right: auto;
}

body[data-page="arrow-puzzle"] .ap-play .stat-card {
  color: var(--ap-ink);
  overflow: hidden;
  border: 1px solid rgba(207, 216, 231, .9);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.98), transparent 46%),
    linear-gradient(145deg, rgba(252,253,255,.97), rgba(235,241,249,.94));
  box-shadow:
    0 9px 25px rgba(25, 43, 78, .1),
    inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-page="arrow-puzzle"] .ap-play .stat-card.featured {
  border-color: rgba(37, 136, 245, .34);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.98), transparent 46%),
    linear-gradient(145deg, #f9fcff, #e4f1ff);
}

body[data-page="arrow-puzzle"] .ap-play .stat-card::before,
body[data-page="arrow-puzzle"] .ap-play .stat-card.featured::before {
  background: linear-gradient(90deg, #dce5f1, #b9d5f2, #dce5f1);
  opacity: .72;
}

body[data-page="arrow-puzzle"] .ap-play .stat-label {
  color: var(--ap-calm-text);
  text-shadow: none;
}

body[data-page="arrow-puzzle"] .ap-play .stat-value,
body[data-page="arrow-puzzle"] .ap-play .highlight-text {
  color: var(--ap-ink);
  text-shadow: none;
}

body[data-page="arrow-puzzle"] .ap-play .stat-card.featured .stat-value {
  color: var(--ap-blue);
}

body[data-page="arrow-puzzle"] .ap-play .arrow-btn {
  color: var(--ap-ink);
  border: 1px solid rgba(10, 23, 74, .12);
  background: rgba(255,255,255,.74);
  box-shadow: 0 3px 9px rgba(26, 49, 91, .08);
}

body[data-page="arrow-puzzle"] .ap-play .arrow-btn:hover:not(:disabled),
body[data-page="arrow-puzzle"] .ap-play .arrow-btn:focus-visible {
  color: var(--ap-blue);
  border-color: rgba(37, 136, 245, .35);
  background: #fff;
}

body[data-page="arrow-puzzle"] .ap-play .arrow-btn:focus-visible,
body[data-page="arrow-puzzle"] .ap-tool-btn:focus-visible {
  outline: 3px solid rgba(37, 136, 245, .72);
  outline-offset: 2px;
}

body[data-page="arrow-puzzle"] .ap-toolbar {
  direction: ltr;
  gap: .48rem;
  margin: .15rem 0 .7rem;
}

body[data-page="arrow-puzzle"] .ap-tool-btn {
  width: 42px;
  height: 42px;
  color: var(--ap-ink);
  border: 1px solid rgba(207, 216, 231, .9);
  border-radius: 14px;
  background: rgba(250,252,255,.94);
  box-shadow:
    0 7px 18px rgba(21, 42, 80, .1),
    inset 0 1px 0 #fff;
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}

body[data-page="arrow-puzzle"] .ap-tool-btn:hover,
body[data-page="arrow-puzzle"] .ap-tool-btn:focus-visible {
  color: var(--ap-blue);
  border-color: rgba(37, 136, 245, .32);
  background: #fff;
  transform: translateY(-1px);
}

body[data-page="arrow-puzzle"] .ap-tool-btn[aria-pressed="true"] {
  color: var(--ap-blue);
  background: #f7fbff;
}

body[data-page="arrow-puzzle"] .ap-theme-wrap {
  position: relative;
  display: flex;
}

body[data-page="arrow-puzzle"] .ap-theme-btn::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ap-theme-accent, var(--ap-blue));
  box-shadow: 0 1px 3px rgba(11, 24, 55, .2);
}

body[data-page="arrow-puzzle"] .ap-theme-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  right: 0;
  display: none;
  width: 196px;
  max-width: min(196px, calc(100vw - 20px));
  max-height: min(330px, calc(100vh - 110px));
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ap-frame-strong);
  border-radius: 16px;
  color: var(--ap-ink);
  background: var(--ap-paper);
  background: color-mix(in srgb, var(--ap-paper) 96%, transparent);
  box-shadow: 0 18px 38px rgba(18, 34, 68, .18);
  backdrop-filter: blur(14px);
}

@supports (height: 100dvh) {
  body[data-page="arrow-puzzle"] .ap-theme-menu {
    max-height: min(330px, calc(100dvh - 110px));
  }
}

body[data-page="arrow-puzzle"] .ap-theme-menu.open {
  display: grid;
  gap: 3px;
}

body[data-page="arrow-puzzle"] .ap-theme-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 39px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  font: 700 .84rem/1.1 var(--font-main, "Outfit"), sans-serif;
}

body[data-page="arrow-puzzle"] .ap-theme-opt:hover,
body[data-page="arrow-puzzle"] .ap-theme-opt:focus-visible {
  outline: 0;
  border-color: var(--ap-frame-strong);
  background: var(--ap-blue-soft);
}

body[data-page="arrow-puzzle"] .ap-theme-opt.active {
  color: var(--ap-blue);
  border-color: color-mix(in srgb, var(--ap-blue) 42%, transparent);
  background: var(--ap-blue-soft);
}

body[data-page="arrow-puzzle"] .ap-theme-swatch {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--ap-frame-strong);
  border-radius: 8px;
  background: var(--sw-paper);
}

body[data-page="arrow-puzzle"] .ap-theme-swatch::before,
body[data-page="arrow-puzzle"] .ap-theme-swatch::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

body[data-page="arrow-puzzle"] .ap-theme-swatch::before {
  width: 16px;
  height: 4px;
  left: 3px;
  top: 6px;
  background: var(--sw-ink);
}

body[data-page="arrow-puzzle"] .ap-theme-swatch::after {
  width: 8px;
  height: 8px;
  right: 3px;
  bottom: 3px;
  background: var(--sw-accent);
}

body[data-page="arrow-puzzle"] .ap-theme-swatch.auto {
  background: conic-gradient(#2588f5, #4a9b72, #e8783f, #8a68d8, #1b9fb4, #65c2ff, #2588f5);
}

body[data-page="arrow-puzzle"] .ap-theme-swatch.auto::before,
body[data-page="arrow-puzzle"] .ap-theme-swatch.auto::after {
  display: none;
}

body[data-page="arrow-puzzle"] .ap-card,
body[data-page="arrow-puzzle"] #ap-stage[data-th] .ap-card {
  --apcell: transparent;
  position: relative;
  overflow: hidden;
  padding: clamp(19px, 4.4vw, 29px);
  border: 1px solid rgba(207, 216, 231, .96);
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 8%, var(--ap-card-shine), transparent 36%),
    radial-gradient(circle at 88% 90%, var(--ap-card-glow), transparent 38%),
    linear-gradient(145deg, var(--ap-paper), var(--ap-paper-deep));
  box-shadow:
    0 24px 55px rgba(24, 45, 84, .15),
    0 6px 18px rgba(24, 45, 84, .08),
    inset 0 1px 0 rgba(255,255,255,.96);
  transition: background .9s ease, border-color .9s ease, box-shadow .9s ease;
}

body[data-page="arrow-puzzle"] .ap-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(115, 137, 173, .1);
  border-radius: 22px;
  box-shadow: inset 0 0 24px rgba(87, 112, 151, .045);
}

body[data-page="arrow-puzzle"] .ap-board {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  gap: 0;
  margin: 0 auto;
  overflow: visible;
  touch-action: manipulation;
}

body[data-page="arrow-puzzle"] .ap-cell {
  display: none;
}

body[data-page="arrow-puzzle"] .ap-route-layer {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px rgba(36, 55, 95, .07));
}

body[data-page="arrow-puzzle"] .ap-route-flight {
  color: var(--ap-ink);
  transform-box: view-box;
  transform-origin: 0 0;
  transition:
    transform .48s cubic-bezier(.2, .72, .24, 1),
    opacity .46s ease,
    color .16s ease,
    filter .18s ease;
  will-change: transform, opacity;
}

body[data-page="arrow-puzzle"] .ap-route-halo,
body[data-page="arrow-puzzle"] .ap-route-line,
body[data-page="arrow-puzzle"] .ap-route-hit {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="arrow-puzzle"] .ap-route-hit {
  stroke: transparent;
  stroke-width: var(--ap-hit-width, 18px);
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}

body[data-page="arrow-puzzle"] .ap-route-halo {
  stroke: var(--ap-paper);
  stroke-width: 11px;
  vector-effect: non-scaling-stroke;
}

body[data-page="arrow-puzzle"] .ap-route-line {
  stroke: currentColor;
  stroke-width: 5px;
  vector-effect: non-scaling-stroke;
}

body[data-page="arrow-puzzle"] .ap-route-flight.is-active {
  color: var(--ap-blue);
  filter: drop-shadow(0 0 .12px rgba(37, 136, 245, .6));
}

body[data-page="arrow-puzzle"] .ap-route-flight:hover,
body[data-page="arrow-puzzle"] .ap-route-flight.is-highlighted {
  color: var(--ap-blue);
  filter: drop-shadow(0 1px 2px rgba(37, 136, 245, .2));
}

body[data-page="arrow-puzzle"] .ap-route-flight.is-uncoiling .ap-route-hit,
body[data-page="arrow-puzzle"] .ap-route-flight.is-nudging .ap-route-hit {
  pointer-events: none;
}

body[data-page="arrow-puzzle"] .ap-route-flight.is-uncoiling,
body[data-page="arrow-puzzle"] .ap-route-flight.is-nudging {
  transform: none;
  transition: color .14s ease, filter .14s ease;
  will-change: opacity;
}

body[data-page="arrow-puzzle"] .ap-arrow {
  position: relative;
  z-index: 4;
  min-width: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 28%;
  outline: 0;
  background: transparent;
  box-shadow: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: var(--ap-ink);
  transition: background .16s ease, box-shadow .16s ease, transform .48s cubic-bezier(.2,.72,.24,1), opacity .46s ease;
}

body[data-page="arrow-puzzle"] .ap-arrow::before,
body[data-page="arrow-puzzle"] .ap-arrow::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  pointer-events: none;
  background: currentColor;
  clip-path: polygon(0 12%, 100% 50%, 0 88%, 16% 50%);
  transform: translate(-50%, -50%) rotate(var(--ap-head-rotation, 0deg));
  transform-origin: center;
}

body[data-page="arrow-puzzle"] .ap-arrow::after {
  z-index: 1;
  width: 25px;
  height: 25px;
  color: var(--ap-paper);
}

body[data-page="arrow-puzzle"] .ap-arrow.dir-up {
  --ap-head-rotation: -90deg;
}

body[data-page="arrow-puzzle"] .ap-arrow.dir-down {
  --ap-head-rotation: 90deg;
}

body[data-page="arrow-puzzle"] .ap-arrow.dir-left {
  --ap-head-rotation: 180deg;
}

body[data-page="arrow-puzzle"] .ap-arrow:hover {
  color: var(--ap-blue);
  background: rgba(37, 136, 245, .075);
  box-shadow: inset 0 0 0 1px rgba(37, 136, 245, .1);
  filter: none;
}

body[data-page="arrow-puzzle"] .ap-arrow:focus-visible {
  outline: 3px solid rgba(37, 136, 245, .72);
  outline-offset: 2px;
  background: rgba(37, 136, 245, .1);
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 5px rgba(37, 136, 245, .58);
}

body[data-page="arrow-puzzle"] .ap-arrow.is-active {
  color: var(--ap-blue);
  background: rgba(37, 136, 245, .08);
}

body[data-page="arrow-puzzle"] .ap-arrow.is-uncoiling,
body[data-page="arrow-puzzle"] .ap-arrow.is-nudging {
  pointer-events: none;
  transition: none;
  will-change: transform, opacity;
}

body[data-page="arrow-puzzle"] .ap-route-flight.bumped {
  animation: apBumped .3s ease;
}

body[data-page="arrow-puzzle"] .ap-arrow.bumped {
  animation: apHeadPulse .3s ease;
}

@keyframes apBumped {
  40% { color: #7891b8; filter: drop-shadow(0 0 .18px rgba(37,136,245,.4)); }
}

@keyframes apHeadPulse {
  42% { background: rgba(37,136,245,.13); }
}

body[data-page="arrow-puzzle"] .ap-flash {
  animation: apFlash .8s ease;
}

@keyframes apFlash {
  36% {
    border-color: rgba(37, 136, 245, .32);
    box-shadow:
      0 25px 60px rgba(37, 136, 245, .16),
      inset 0 0 0 999px rgba(231, 243, 255, .2);
  }
}

body[data-page="arrow-puzzle"] .ap-overlay {
  inset: 0;
  gap: .7rem;
  padding: 1.4rem;
  border-radius: 29px;
  color: var(--ap-ink);
  background: var(--ap-paper);
  background: color-mix(in srgb, var(--ap-paper) 92%, transparent);
  backdrop-filter: blur(9px) saturate(.9);
}

body[data-page="arrow-puzzle"] .ap-overlay h2 {
  color: var(--ap-ink);
  text-shadow: none;
}

body[data-page="arrow-puzzle"] .ap-overlay p {
  color: var(--ap-calm-text);
}

body[data-page="arrow-puzzle"] .ap-overlay .glow-btn {
  border: 1px solid rgba(37,136,245,.25);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #419af8, #227ce1);
  box-shadow: 0 8px 22px rgba(37,136,245,.22);
}

body[data-page="arrow-puzzle"] .ap-perfect {
  color: #287f68;
}

body[data-page="arrow-puzzle"] .ap-awarded {
  color: #9a6914;
}

body[data-page="arrow-puzzle"] .ap-float {
  color: var(--ap-blue);
  font-size: 1.25rem;
  text-shadow: 0 2px 10px rgba(255,255,255,.9), 0 0 16px rgba(37,136,245,.22);
  animation: apFloat 1.1s ease-out forwards;
}

body[data-page="arrow-puzzle"] .ap-float.big {
  font-size: 1.65rem;
  text-shadow: 0 2px 12px rgba(255,255,255,.94), 0 0 20px rgba(37,136,245,.28);
}

@keyframes apFloat {
  to { transform: translate(-50%, -48px); opacity: 0; }
}

body[data-page="arrow-puzzle"] .ap-confetti {
  border-radius: 29px;
}

body[data-page="arrow-puzzle"] .ap-confetti i {
  top: 42%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: apConf 1.25s ease-out forwards;
}

@keyframes apConf {
  to {
    transform: translate(var(--dx), 105px) scale(.35);
    opacity: 0;
  }
}

body[data-page="arrow-puzzle"] #ap-stage:fullscreen,
body[data-page="arrow-puzzle"] #ap-stage.ap-fs {
  --ap-calm-text: #52617c;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.9), transparent 38%),
    #edf3fa;
}

body[data-page="arrow-puzzle"] #ap-stage:fullscreen .ap-card,
body[data-page="arrow-puzzle"] #ap-stage.ap-fs .ap-card {
  max-width: min(92vw, 640px);
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="5"] .ap-tool-btn {
  border-color: rgba(119, 146, 188, .34);
  color: var(--ap-ink);
  background: rgba(24, 34, 56, .95);
  box-shadow: 0 7px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}

body[data-page="arrow-puzzle"] #ap-stage[data-th="5"] .ap-tool-btn:hover,
body[data-page="arrow-puzzle"] #ap-stage[data-th="5"] .ap-tool-btn:focus-visible {
  color: var(--ap-blue);
  background: #202d49;
}

@media (max-width: 768px) {
  body[data-page="arrow-puzzle"] .ap-play .stats-grid {
    gap: .48rem;
  }

  body[data-page="arrow-puzzle"] .ap-play .stat-card {
    min-width: 0;
    padding: .62rem .25rem;
  }

  body[data-page="arrow-puzzle"] .ap-toolbar {
    margin-bottom: .56rem;
  }

  body[data-page="arrow-puzzle"] .ap-tool-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}

@media (max-width: 520px) {
  body[data-page="arrow-puzzle"] .ap-card {
    padding: 15px;
    border-radius: 24px;
  }

  body[data-page="arrow-puzzle"] .ap-card::before {
    inset: 7px;
    border-radius: 18px;
  }

  body[data-page="arrow-puzzle"] .ap-overlay,
  body[data-page="arrow-puzzle"] .ap-confetti {
    border-radius: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="arrow-puzzle"] .ap-route-flight,
  body[data-page="arrow-puzzle"] .ap-arrow,
  body[data-page="arrow-puzzle"] .ap-card,
  body[data-page="arrow-puzzle"] .ap-tool-btn {
    transition-duration: .01ms !important;
  }

  body[data-page="arrow-puzzle"] .ap-route-flight.bumped,
  body[data-page="arrow-puzzle"] .ap-arrow.bumped,
  body[data-page="arrow-puzzle"] .ap-flash,
  body[data-page="arrow-puzzle"] .ap-float {
    animation: none !important;
  }

  body[data-page="arrow-puzzle"] .ap-confetti {
    display: none !important;
  }
}