/* Crazy Arrows — the "arrows" theme (sky blue and sunny yellow) and the game
   itself: tabs, level map, the board and its pieces, animations, results and
   leaderboards. The class comes from `theme` in config/crazy_arrows.php. */
.arrows {
  --blue: #1687ff;
  --blue-deep: #0b63c9;
  --line: #7fb2f5;
  --soft: #cfe0f7;
}
body.arrows {
  background-color: #dcefff;
  background-image: url("../shared/sky.svg"), linear-gradient(180deg, #c6e3ff 0%, #e2f1ff 40%, #f5faff 100%);
}
.ca-hero .note h1 { font-size: clamp(40px, 12vw, 58px); }

/* — tabs — */
.ca-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; background: #fff; border: 3px solid var(--soft); border-radius: 999px; }
.ca-tab {
  padding: 11px 10px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-toon); font-weight: 700; font-size: 17px; color: var(--ink-soft); background: transparent;
}
.ca-tab.is-on { color: #fff; background: var(--blue); box-shadow: 0 4px 0 var(--blue-deep); }
.ca-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ca-panel { display: flex; flex-direction: column; gap: 14px; }

/* — level map — */
.ca-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ca-level {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 1; padding: 4px; cursor: pointer;
  font-family: var(--font-toon); color: var(--ink);
  background: #fff; border: 3px solid var(--soft); border-radius: 16px; box-shadow: 0 4px 0 var(--soft);
  transition: transform .12s ease;
}
.ca-level strong { font-size: 22px; line-height: 1; }
.ca-level-stars { font-size: 11px; font-weight: 700; color: #e6a400; letter-spacing: 1px; min-height: 13px; }
.ca-level:not(.is-locked):hover { transform: translateY(-3px); border-color: var(--line); }
.ca-level.is-done { background: #fffbea; border-color: var(--yellow); box-shadow: 0 4px 0 var(--yellow-deep); }
.ca-level.is-locked { cursor: default; opacity: .55; background: #eef4fb; }
.ca-level:not(.is-done):not(.is-locked) { border-color: var(--blue); box-shadow: 0 4px 0 var(--blue-deep); }
.ca-level:not(.is-done):not(.is-locked) .ca-level-stars { color: var(--blue-deep); text-transform: uppercase; }

.ca-difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ca-difficulty .tbtn { flex-direction: column; gap: 2px; padding: 14px 8px; font-size: 18px; }
.ca-difficulty small { font-size: 13px; font-weight: 600; opacity: .85; }

/* — status bar — */
.ca-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 10px 16px; background: #fff; border: 3px solid var(--soft); border-radius: 20px;
}
.ca-title { font-size: 18px; }
.ca-hearts { font-size: 18px; letter-spacing: 2px; }
.ca-time { font-weight: 700; font-size: 18px; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.ca-moves { font-size: 15px; color: var(--ink-soft); }
.ca-left { align-self: center; margin: -4px 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* — the board — */
.ca-board {
  --n: 6;
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 22px; border: 4px solid #fff;
  background-color: #eef6ff;
  background-image:
    linear-gradient(to right, rgba(29, 39, 71, .07) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(29, 39, 71, .07) 2px, transparent 2px);
  background-size: calc(100% / var(--n)) calc(100% / var(--n));
  box-shadow: 0 0 0 3px var(--soft), 0 10px 0 rgba(40, 90, 170, .14);
  touch-action: manipulation;
}
/* Pieces live in one SVG in grid units (a cell is 1 × 1). */
.ca-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ca-arrow { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.ca-arrow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ca-arrow .ca-hit { stroke: transparent; stroke-width: 0.9; pointer-events: stroke; }
.ca-arrow .ca-outline { stroke: var(--ink); stroke-width: 0.34; }
.ca-arrow .ca-body { stroke-width: 0.22; }
.ca-arrow .ca-head { stroke: var(--ink); stroke-width: 0.06; stroke-linejoin: round; pointer-events: all; }
.ca-arrow:hover .ca-outline, .ca-arrow:focus-visible .ca-outline { stroke-width: 0.42; }
.ca-arrow:focus-visible .ca-head { stroke-width: 0.1; }
.ca-arrow.is-hint { animation: ca-hint 1s ease-in-out infinite; }
.ca-arrow.is-bump { animation: ca-bump .35s ease-in-out; }
.ca-arrow, .ca-wall, .ca-bomb { transform-box: fill-box; transform-origin: center; }
.ca-wall path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ca-wall .ca-wall-edge { stroke: var(--ink); stroke-width: 0.84; }
.ca-wall .ca-wall-face { stroke-width: 0.72; }
.ca-fixed .ca-wall-face { stroke: #8f99b1; }
.ca-mirror .ca-wall-face { stroke: #c9ecff; }
.ca-chevron { stroke: #fff; stroke-width: 0.11; }
.ca-shine { stroke: #fff; stroke-width: 0.08; }
.ca-bomb .ca-spark { animation: ca-spark .6s ease-in-out infinite alternate; }
.is-gone { animation: ca-gone .45s ease-in forwards; }
.ca-blast {
  position: absolute; z-index: 6; width: calc(300% / var(--n)); height: calc(300% / var(--n));
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6b0 0%, #ffb020 35%, rgba(255, 92, 60, .7) 60%, transparent 72%);
  animation: ca-blast .65s ease-out forwards;
}
@keyframes ca-hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 .12px #ffd84d) drop-shadow(0 0 .2px #ffd84d); } }
@keyframes ca-bump { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes ca-spark { from { opacity: .4; } to { opacity: 1; } }
@keyframes ca-gone { to { transform: scale(0) rotate(90deg); opacity: 0; } }
@keyframes ca-blast { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }

.ca-message:empty { display: none; }
.ca-message { font-weight: 600; text-align: center; }
.ca-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ca-tools .tbtn { padding: 10px 8px; }
.ca-share { gap: 8px; }

/* — results and leaderboards — */
.ca-result { align-items: center; text-align: center; animation: pop .3s ease-out; }
.ca-result h2 { font-size: 26px; }
.ca-result-stars { font-size: 42px; line-height: 1; letter-spacing: 4px; color: #f4b62a; text-shadow: 0 3px 0 var(--yellow-deep); }
.ca-result-emoji { font-size: 52px; line-height: 1; }
.ca-result-stats { font-weight: 700; color: var(--blue-deep); }
.ca-result .actions { width: 100%; }
.ca-save { display: flex; gap: 8px; width: 100%; }
.ca-save .input { flex: 1; min-width: 0; }
.ca-leaders { width: 100%; text-align: left; }
.ca-leader-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ca-leader-list li {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 8px;
  padding: 8px 12px; background: #f4f9ff; border: 2px solid var(--soft); border-radius: 14px;
}
.ca-leader-list li.is-you { background: #fffbea; border-color: var(--yellow); }
.ca-rank { font-weight: 700; text-align: center; }
.ca-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-stat { font-size: 14px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ca-stat:first-of-type { color: #e6a400; letter-spacing: 1px; }

/* — how to play — */
.ca-legend { gap: 14px; }
.ca-legend-row { display: flex; gap: 14px; align-items: flex-start; }
.ca-legend-row p { font-size: 16px; line-height: 1.5; }
.ca-legend-icon { flex: none; width: 46px; height: 46px; }
.ca-legend-icon svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .ca-arrow.is-hint, .ca-arrow.is-bump, .ca-bomb .ca-spark, .is-gone, .ca-blast, .ca-result { animation: none; }
  .is-gone { opacity: 0; }
}