:root {
  --page: #eef1f8;
  --panel: #ffffff;
  --ink: #22262d;
  --muted: #68707f;
  --line: #b9bdc5;
  --line-strong: #8d929d;
  --target: #aeb0b4;
  --target-soft: #f8f9fb;
  --green: #59e865;
  --green-deep: #269a36;
  --dark-block: #505050;
  --warn: #ff5c52;
  --blue: #2f6fed;
  --size: 6;
  --stage-max: min(calc(100vw - 32px), 640px);
  --rail: clamp(30px, 7vw, 42px);
  --gap: clamp(4px, 1.2vw, 8px);
  --cell: 38px;
  --board-size: calc(var(--cell) * 6);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--page);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
}

button {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 36px);
}

.game-panel {
  width: min(100%, 920px);
  display: grid;
  gap: clamp(18px, 3vw, 28px);
}

.top-bar,
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--panel);
}

.brand-mark span {
  width: 25px;
  height: 25px;
  display: block;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 42%, 69% 42%, 69% 100%, 31% 100%, 31% 42%, 0 42%);
}

h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 0.9;
  letter-spacing: 0;
}

#level-name {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.25;
}

.level-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  max-width: min(100%, 560px);
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: thin;
}

.level-tab,
.icon-button,
.primary-button,
.launcher {
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    color 160ms ease;
}

.level-tab {
  min-width: 40px;
  height: 40px;
  border-radius: 0;
  font-weight: 800;
}

.level-tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--green);
}

.stage-wrap {
  display: grid;
  place-items: center;
  overflow: visible;
}

.stage {
  --board-size: calc(var(--cell) * var(--size));
  --cell: clamp(28px, calc((var(--stage-max) - var(--rail) * 2 - var(--gap) * 2) / var(--size)), 58px);
  position: relative;
  width: calc(var(--board-size) + var(--rail) * 2 + var(--gap) * 2);
  height: calc(var(--board-size) + var(--rail) * 2 + var(--gap) * 2);
  display: grid;
  grid-template-columns: var(--rail) var(--board-size) var(--rail);
  grid-template-rows: var(--rail) var(--board-size) var(--rail);
  gap: var(--gap);
  isolation: isolate;
}

.stage.stage-shake {
  animation: stage-shake 340ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

.board {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--size), var(--cell));
  grid-template-rows: repeat(var(--size), var(--cell));
  background:
    linear-gradient(var(--line) 2px, transparent 2px),
    linear-gradient(90deg, var(--line) 2px, transparent 2px),
    var(--panel);
  background-size: var(--cell) var(--cell);
  border: 2px solid var(--line);
}

.board.complete-pulse {
  animation: complete-pulse 680ms ease;
}

.board.swipe-enabled {
  cursor: grab;
  touch-action: none;
}

.board.swipe-active {
  cursor: grabbing;
}

.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
}

.cell.impact-cell::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 3px solid rgba(34, 38, 45, 0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  animation: impact-ring 360ms ease-out;
}

.cell.swipe-line::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid rgba(34, 38, 45, 0.28);
  background: rgba(34, 38, 45, 0.06);
  pointer-events: none;
  z-index: 1;
}

.static-block {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: var(--dark-block);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.static-block.impact {
  animation: impact-bump 300ms cubic-bezier(0.24, 0.86, 0.35, 1.4);
}

.arrow-tile {
  --tile-color: var(--green);
  --tile-ink: var(--green-deep);
  position: relative;
  z-index: 2;
  width: calc(var(--cell) - 2px);
  height: calc(var(--cell) - 2px);
  display: grid;
  place-items: center;
  background: var(--target-soft);
  color: var(--target);
}

.arrow-tile.solved {
  background: var(--tile-color);
  color: var(--tile-ink);
}

.arrow-tile.color-outline {
  background: #ffffff;
  color: var(--tile-ink);
}

.arrow-tile.flash {
  animation: tile-land 520ms cubic-bezier(0.18, 0.9, 0.22, 1);
}

.arrow-tile.flash::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid var(--tile-color);
  opacity: 0;
  pointer-events: none;
  animation: tile-ring 520ms ease-out;
}

.arrow-tile.impact {
  animation: impact-bump 300ms cubic-bezier(0.24, 0.86, 0.35, 1.4);
}

.target-dot {
  --tile-color: var(--target);
  --tile-ink: var(--line-strong);
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.target-dot-core {
  width: clamp(12px, calc(var(--cell) * 0.28), 18px);
  height: clamp(12px, calc(var(--cell) * 0.28), 18px);
  display: block;
  border: 3px solid var(--tile-ink);
  background: var(--panel);
  box-shadow:
    0 2px 0 rgba(34, 38, 45, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.target-dot.color-dot .target-dot-core {
  border-color: var(--tile-ink);
  background: var(--tile-color);
}

.target-dot::after {
  content: "";
  position: absolute;
  width: clamp(20px, calc(var(--cell) * 0.48), 30px);
  height: clamp(20px, calc(var(--cell) * 0.48), 30px);
  border: 2px solid rgba(34, 38, 45, 0.1);
  opacity: 0.9;
  pointer-events: none;
}

.arrow-tile .arrow-icon,
.launcher .arrow-icon,
.flying-arrow .arrow-icon,
.brand-mark .arrow-icon {
  width: 62%;
  height: 62%;
  display: block;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 42%, 69% 42%, 69% 100%, 31% 100%, 31% 42%, 0 42%);
}

.arrow-outline-icon {
  width: 68%;
  height: 68%;
  display: block;
  fill: #ffffff;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linejoin: round;
}

.dir-down .arrow-icon {
  transform: rotate(180deg);
}

.dir-left .arrow-icon {
  transform: rotate(-90deg);
}

.dir-right .arrow-icon {
  transform: rotate(90deg);
}

.dir-down .arrow-outline-icon {
  transform: rotate(180deg);
}

.dir-left .arrow-outline-icon {
  transform: rotate(-90deg);
}

.dir-right .arrow-outline-icon {
  transform: rotate(90deg);
}

.launchers {
  display: grid;
  gap: 0;
}

.top-launchers,
.bottom-launchers {
  grid-template-columns: repeat(var(--size), var(--cell));
  grid-auto-rows: var(--rail);
}

.left-launchers,
.right-launchers {
  grid-template-rows: repeat(var(--size), var(--cell));
  grid-auto-columns: var(--rail);
}

.top-launchers {
  grid-column: 2;
  grid-row: 1;
}

.bottom-launchers {
  grid-column: 2;
  grid-row: 3;
}

.left-launchers {
  grid-column: 1;
  grid-row: 2;
}

.right-launchers {
  grid-column: 3;
  grid-row: 2;
}

.launcher {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: var(--target);
  background: rgba(255, 255, 255, 0.68);
  padding: 0;
}

.launcher.color-launcher {
  color: var(--tile-ink);
  border-color: var(--tile-ink);
  background: var(--tile-color);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

.launcher .arrow-icon {
  width: min(28px, 70%);
  height: min(28px, 70%);
}

.launcher:hover,
.launcher:focus-visible {
  z-index: 3;
  color: var(--ink);
  border-color: var(--ink);
  background: #ffffff;
  outline: none;
  transform: scale(1.04);
}

.launcher.color-launcher:hover,
.launcher.color-launcher:focus-visible {
  color: var(--tile-ink);
  border-color: var(--ink);
  background: var(--tile-color);
}

.launcher.launch-kick {
  animation: launcher-kick 330ms cubic-bezier(0.18, 0.9, 0.22, 1);
}

.launcher.swipe-preview {
  z-index: 3;
  color: #5c4300;
  border-color: #6b5200;
  background: #ffd85e;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.corner {
  background: transparent;
}

.corner-top-left {
  grid-column: 1;
  grid-row: 1;
}

.corner-top-right {
  grid-column: 3;
  grid-row: 1;
}

.corner-bottom-left {
  grid-column: 1;
  grid-row: 3;
}

.corner-bottom-right {
  grid-column: 3;
  grid-row: 3;
}

.shot-layer {
  position: absolute;
  left: calc(var(--rail) + var(--gap));
  top: calc(var(--rail) + var(--gap));
  width: var(--board-size);
  height: var(--board-size);
  pointer-events: none;
  z-index: 6;
}

.flying-arrow {
  --tile-color: var(--green);
  --tile-ink: var(--green-deep);
  --bump-x: 0px;
  --bump-y: 0px;
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  background: var(--tile-color);
  color: var(--tile-ink);
  border: 2px solid var(--tile-ink);
  box-shadow:
    0 8px 0 rgba(34, 38, 45, 0.14),
    inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  transform: translate(var(--from-x), var(--from-y));
  animation: fly-shot var(--flight-time, 330ms) cubic-bezier(0.18, 0.86, 0.22, 1) forwards;
}

.flying-arrow::before {
  content: "";
  position: absolute;
  inset: 12%;
  background: rgba(255, 255, 255, 0.28);
  transform: translate(var(--trail-x), var(--trail-y));
  opacity: 0.9;
  clip-path: polygon(50% 0, 100% 42%, 69% 42%, 69% 100%, 31% 100%, 31% 42%, 0 42%);
  filter: blur(1px);
}

.flying-arrow.miss {
  background: #fff3f1;
  color: var(--warn);
  border-color: var(--warn);
  animation: fly-miss 330ms cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

.flying-arrow.miss.wrong-color {
  background: var(--tile-color);
  color: var(--tile-ink);
  border-color: var(--warn);
}

.flying-arrow .arrow-icon {
  position: relative;
  z-index: 2;
  width: 62%;
  height: 62%;
}

.spark {
  position: absolute;
  width: clamp(5px, calc(var(--cell) * 0.14), 8px);
  height: clamp(5px, calc(var(--cell) * 0.14), 8px);
  border: 2px solid var(--spark-ink);
  background: var(--spark-color);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: spark-pop 520ms ease-out forwards;
}

@keyframes fly-shot {
  0% {
    transform: translate(var(--from-x), var(--from-y)) scale(0.86);
  }
  72% {
    transform: translate(
        calc(var(--to-x) + var(--bump-x)),
        calc(var(--to-y) + var(--bump-y))
      )
      scale(1.08);
  }
  88% {
    transform: translate(
        calc(var(--to-x) + var(--recoil-x)),
        calc(var(--to-y) + var(--recoil-y))
      )
      scale(0.96);
  }
  to {
    transform: translate(var(--to-x), var(--to-y)) scale(1);
  }
}

@keyframes fly-miss {
  0% {
    opacity: 1;
    transform: translate(var(--from-x), var(--from-y)) scale(0.86);
  }
  72% {
    opacity: 1;
    transform: translate(var(--to-x), var(--to-y)) scale(1.04) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translate(
        calc(var(--to-x) + var(--miss-x)),
        calc(var(--to-y) + var(--miss-y))
      )
      scale(0.72)
      rotate(16deg);
  }
}

@keyframes tile-land {
  0% {
    transform: scale(0.72) translateY(-8%);
    filter: brightness(1.16);
  }
  48% {
    transform: scale(1.16) translateY(0);
    filter: brightness(1.08);
  }
  72% {
    transform: scale(0.94);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes tile-ring {
  0% {
    opacity: 0.75;
    transform: scale(0.8);
  }
  to {
    opacity: 0;
    transform: scale(1.32);
  }
}

@keyframes impact-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.78);
  }
  to {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes impact-bump {
  0% {
    transform: scale(1);
  }
  44% {
    transform: scale(0.9);
  }
  74% {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@keyframes spark-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
  }
  72% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y)))
      scale(0.2);
  }
}

@keyframes launcher-kick {
  0% {
    transform: scale(1);
  }
  44% {
    transform: scale(0.86);
  }
  76% {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

@keyframes stage-shake {
  0%,
  to {
    transform: translate(0, 0);
  }
  18% {
    transform: translate(-5px, 0);
  }
  36% {
    transform: translate(5px, -2px);
  }
  54% {
    transform: translate(-4px, 2px);
  }
  72% {
    transform: translate(3px, 0);
  }
}

@keyframes complete-pulse {
  0%,
  to {
    box-shadow: none;
  }
  36% {
    box-shadow:
      0 0 0 4px rgba(89, 232, 101, 0.34),
      0 0 0 11px rgba(89, 232, 101, 0.16);
  }
}

.hud {
  min-height: 52px;
  flex-wrap: wrap;
}

.lives-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 78px;
}

.life-dot {
  width: 20px;
  height: 20px;
  border: 2px solid #a4332f;
  background: #ff665d;
  clip-path: polygon(50% 100%, 0 42%, 18% 8%, 50% 20%, 82% 8%, 100% 42%);
}

.life-dot.empty {
  background: transparent;
  border-color: #c9cdd6;
}

.life-dot.lost {
  animation: life-lost 520ms ease-out;
}

@keyframes life-lost {
  0% {
    background: #ff665d;
    transform: scale(1);
  }
  34% {
    background: #ff665d;
    transform: scale(1.28) rotate(-8deg);
  }
  72% {
    transform: scale(0.72) rotate(8deg);
  }
  to {
    background: transparent;
    transform: scale(1);
  }
}

.meter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(100%, 280px);
}

#progress-label {
  min-width: 54px;
  font-size: 15px;
  font-weight: 800;
}

.meter-track {
  width: min(220px, 42vw);
  height: 10px;
  background: #d7dbe5;
  border: 2px solid var(--line-strong);
}

.meter-fill {
  width: 0;
  height: 100%;
  background: var(--green);
  transition: width 220ms ease;
}

.status-line {
  flex: 1;
  min-height: 20px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.status-line.win {
  color: var(--green-deep);
  font-weight: 800;
  animation: status-pop 260ms ease;
}

.status-line.miss {
  color: var(--warn);
  font-weight: 800;
  animation: status-pop 260ms ease;
}

@keyframes status-pop {
  0% {
    transform: translateY(3px);
    opacity: 0.45;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.input-toggle {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  user-select: none;
}

.input-toggle:has(input:focus-visible) {
  border-color: var(--ink);
  outline: none;
}

.input-toggle:has(input:checked) {
  border-color: var(--ink);
  color: var(--ink);
  background: #ffffff;
}

.input-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  width: 36px;
  height: 20px;
  position: relative;
  display: block;
  border: 2px solid var(--line-strong);
  background: #d7dbe5;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--line-strong);
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.input-toggle input:checked + .toggle-track {
  border-color: var(--green-deep);
  background: var(--green);
}

.input-toggle input:checked + .toggle-track .toggle-thumb {
  background: var(--ink);
  transform: translateX(16px);
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-button {
  min-width: 104px;
  height: 42px;
  padding: 0 16px;
  font-weight: 800;
}

.icon-button:hover,
.icon-button:focus-visible,
.primary-button:hover,
.primary-button:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.primary-button:not(:disabled) {
  border-color: var(--ink);
  background: var(--green);
}

.primary-button.ready-pop {
  animation: ready-pop 520ms cubic-bezier(0.18, 0.9, 0.22, 1);
}

@keyframes ready-pop {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.12);
  }
  72% {
    transform: scale(0.96);
  }
  to {
    transform: scale(1);
  }
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 720px) {
  .app-shell {
    align-items: start;
  }

  .top-bar,
  .hud {
    align-items: stretch;
    flex-direction: column;
  }

  .level-tabs,
  .actions {
    justify-content: flex-start;
  }

  .status-line {
    text-align: left;
  }

  .stage-wrap {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}