:root {
  color-scheme: dark;
  --bg: #0e1116;
  --text: #e7edf5;
  --muted: #9aa6b8;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(120, 160, 220, 0.16), transparent 62%),
    radial-gradient(700px 420px at 80% 90%, rgba(90, 70, 140, 0.12), transparent 60%),
    var(--bg);
}

.board {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 80px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 36px 22px;
  width: min(860px, 100%);
}

.tile {
  position: relative;
  z-index: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.tile:hover,
.tile:focus-visible {
  z-index: 3;
}

.icon-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.icon {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #12161c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
}

.snake {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  z-index: 1;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.tile:hover .snake,
.tile:focus-visible .snake,
.snake.play {
  opacity: 1;
}

.snake rect {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: #9ec4ff;
  stroke-width: 3;
  animation: glow 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px #8eb6ff);
}

@keyframes glow {
  50% { opacity: 0.25; }
}
@keyframes flicker {
  0%, 19%, 21%, 60%, 62%, 100% { opacity: 1; }
  20%, 61% { opacity: 0.05; }
  45% { opacity: 0.45; }
}
@keyframes glitch {
  0%, 78%, 100% { transform: none; opacity: 1; }
  80% { transform: translate(3px, 0); opacity: 0.7; }
  84% { transform: translate(-3px, 1px); opacity: 0; }
  88% { transform: translate(2px, -1px); opacity: 1; }
}
@keyframes hue {
  50% { filter: hue-rotate(160deg) drop-shadow(0 0 6px currentColor); }
}
@keyframes beat {
  0%, 40%, 100% { opacity: 0.35; }
  12% { opacity: 1; }
  24% { opacity: 0.4; }
  32% { opacity: 1; }
}

.s-flicker rect { stroke: #f4f8ff; animation: flicker 2.4s steps(1, end) infinite; filter: drop-shadow(0 0 6px #fff); }
.s-glitch rect { stroke: #7ef9ff; animation: glitch 2.2s steps(1, end) infinite; filter: drop-shadow(3px 0 0 #ff2bd6); }
.s-strobe rect { stroke: #fff; animation: flicker 1.1s steps(1, end) infinite; filter: drop-shadow(0 0 8px #7ef9ff); }
.s-static rect { stroke: #d5e6ff; animation: flicker 0.35s steps(2, end) infinite; }
.s-pulse rect { stroke: #9ec4ff; animation: glow 2.6s ease-in-out infinite; }
.s-breathe rect { stroke: #7ec4ff; animation: glow 4.8s ease-in-out infinite; filter: drop-shadow(0 0 10px #7ec4ff); }
.s-heartbeat rect { stroke: #ff8aa0; animation: beat 1.6s ease-in-out infinite; filter: drop-shadow(0 0 7px #ff5a78); }
.s-neon rect { stroke: #7ef9ff; animation: glow 2.2s ease-in-out infinite; filter: drop-shadow(0 0 8px #7ef9ff); }
.s-holo rect { stroke: #bffff8; animation: glitch 3s steps(1, end) infinite; filter: drop-shadow(0 0 6px #7ef) drop-shadow(4px 2px 0 #ff2bd6); }
.s-chroma rect { stroke: #fff; animation: hue 4s linear infinite; }
.s-rainbow rect { stroke: #7cff6b; animation: hue 6s linear infinite; filter: drop-shadow(0 0 5px #4cc9f0); }
.s-plasma rect { stroke: #d27cff; animation: hue 3.5s linear infinite; filter: drop-shadow(0 0 8px #72f); }
.s-violet rect { stroke: #c77dff; animation: glow 2.8s ease-in-out infinite; filter: drop-shadow(0 0 10px #a03cff); }
.s-ice rect { stroke: #e7f8ff; animation: glow 3.4s ease-in-out infinite; filter: drop-shadow(0 0 8px #bfefff); }
.s-ember rect { stroke: #ffb020; animation: glow 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px #ff5a14); }
.s-gold rect { stroke: #ffe7a3; animation: glow 3.6s ease-in-out infinite; filter: drop-shadow(0 0 7px #d4a017); }
.s-acid rect { stroke: #c6ff4a; animation: flicker 1.8s steps(1, end) infinite; filter: drop-shadow(0 0 8px #c6ff4a); }
.s-alert rect { stroke: #ff4d4d; animation: beat 1.3s ease-in-out infinite; filter: drop-shadow(0 0 8px #ff4d4d); }
.s-blush rect { stroke: #ffb3c7; animation: glow 3s ease-in-out infinite; filter: drop-shadow(0 0 8px #ff8aab); }
.s-ghost rect { stroke: #d7deea; animation: glow 5.5s ease-in-out infinite; filter: none; }
.s-soft rect { stroke: #9eb4d0; stroke-width: 6; animation: glow 6s ease-in-out infinite; filter: blur(1px) drop-shadow(0 0 6px #9eb4d0); }
.s-moon rect { stroke: #e8eef8; animation: glow 4.2s ease-in-out infinite; filter: drop-shadow(0 0 12px #fff); }
.s-storm rect { stroke: #8ec5ff; animation: flicker 2s steps(1, end) infinite; filter: drop-shadow(0 0 8px #4c7dff); }
.s-deep rect { stroke: #6d7cff; animation: glow 4s ease-in-out infinite; filter: drop-shadow(0 0 10px #2436ff); }
.s-toxic rect { stroke: #39ffb0; animation: glow 2s ease-in-out infinite; filter: drop-shadow(0 0 8px #39ffb0); }
.s-royal rect { stroke: #e6c36a; animation: glow 3.2s ease-in-out infinite; filter: drop-shadow(0 0 6px #8a6bff); }
.s-wire rect { stroke: #d7e8ff; stroke-width: 2; animation: none; opacity: 0.95; filter: drop-shadow(0 0 3px #9ec4ff); }
.s-spark rect { stroke: #fff; animation: flicker 1.4s steps(1, end) infinite; filter: drop-shadow(0 0 6px #fff); }
.s-aurora rect { stroke: #8ff; animation: hue 8s linear infinite; filter: drop-shadow(0 0 8px #39f); }
.s-wave rect { stroke: #78b4ff; animation: glow 2s ease-in-out infinite; filter: drop-shadow(0 0 14px #78b4ff); }

.icon img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.letter {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.label {
  margin-top: 12px;
  max-width: 200px;
  text-align: center;
  font-size: 15px;
  line-height: 1.3;
  color: #d7deea;
}

.empty { color: var(--muted); }

.gear {
  position: fixed;
  right: 18px;
  bottom: 14px;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  font-size: 18px;
}

.gear:hover { color: rgba(255, 255, 255, 0.7); }

.halo {
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.tile:hover .halo,
.tile:focus-visible .halo,
.halo.play {
  opacity: 1;
}

.halo-pulse {
  box-shadow: 0 0 0 0 rgba(140, 186, 255, 0.7);
  animation: pulse 1.5s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 14px rgba(140, 186, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(140, 186, 255, 0); }
}

.halo-breathe {
  box-shadow: 0 0 18px 4px rgba(126, 196, 255, 0.35);
  animation: breathe 2.2s ease-in-out infinite;
}
@keyframes breathe {
  50% { box-shadow: 0 0 28px 10px rgba(126, 196, 255, 0.75); }
}

.halo-laser,
.halo-trace,
.halo-wire {
  background: conic-gradient(from 0deg, transparent 0 62%, #8ec5ff 80%, #fff 90%, transparent 100%);
  animation: spin 1.5s linear infinite;
}
.halo-spin {
  inset: -3px;
  background: none;
  border: 2px solid rgba(190, 220, 255, 0.95);
  box-shadow: 0 0 8px rgba(142, 186, 255, 0.45);
  animation: ring-glow 2.6s ease-in-out infinite;
}
@keyframes ring-glow {
  50% { box-shadow: 0 0 16px 3px rgba(142, 186, 255, 0.95); border-color: #fff; }
}
.halo-rainbow {
  inset: -3px;
  background: none;
  border: 2px solid #ff5d73;
  animation: rainbow-edge 4.5s linear infinite;
}
@keyframes rainbow-edge {
  0% { border-color: #ff5d73; box-shadow: 0 0 12px #ff5d73; }
  20% { border-color: #ffd166; box-shadow: 0 0 12px #ffd166; }
  40% { border-color: #7cff6b; box-shadow: 0 0 12px #7cff6b; }
  60% { border-color: #4cc9f0; box-shadow: 0 0 12px #4cc9f0; }
  80% { border-color: #b388ff; box-shadow: 0 0 12px #b388ff; }
  100% { border-color: #ff5d73; box-shadow: 0 0 12px #ff5d73; }
}
.halo-gold {
  inset: -3px;
  background: none;
  border: 2px solid #ffe7a3;
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.55);
  animation: gold-glow 2.8s ease-in-out infinite;
}
@keyframes gold-glow {
  50% { border-color: #fff6d8; box-shadow: 0 0 18px 4px rgba(255, 210, 90, 0.95); }
}
.halo-plasma {
  inset: -3px;
  background: none;
  border: 2px solid #c77dff;
  animation: plasma-edge 1.8s steps(1, end) infinite;
}
@keyframes plasma-edge {
  0%, 100% { border-color: #c77dff; box-shadow: 3px 0 0 #4cf, 0 0 12px #72f; }
  40% { border-color: #4cf; box-shadow: -3px 0 0 #f6f, 0 0 14px #4cf; }
  70% { border-color: #f6f; box-shadow: 0 0 16px #f6f, 2px 0 0 #72f; opacity: 0.35; }
}
@keyframes spin { to { transform: rotate(1turn); } }

.halo-neon {
  border: 2px solid #7ef;
  box-shadow: 0 0 12px #7ef, inset 0 0 12px rgba(120, 255, 240, 0.35);
  animation: neon 1.3s ease-in-out infinite;
}
@keyframes neon {
  50% { box-shadow: 0 0 22px #7ef, 0 0 40px rgba(120, 255, 240, 0.45); }
}

.halo-flicker {
  border: 2px solid rgba(255, 255, 255, 0.85);
  animation: flicker 0.9s steps(2, end) infinite;
}
@keyframes flicker {
  0%, 40%, 100% { opacity: 1; }
  42%, 48% { opacity: 0.15; }
  70% { opacity: 0.4; }
}

.halo-ripple {
  border: 2px solid rgba(160, 200, 255, 0.9);
  animation: ripple 1.6s ease-out infinite;
}
@keyframes ripple {
  60% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.halo-double {
  border: 2px solid rgba(170, 205, 255, 0.95);
  box-shadow: 0 0 0 8px rgba(170, 205, 255, 0.28);
  animation: breathe 1.8s ease-in-out infinite;
}

.halo-orbit {
  inset: -4px;
  border-radius: 20px;
  background: none;
  animation: orbit-corners 2.8s steps(1, end) infinite;
}
@keyframes orbit-corners {
  0% { box-shadow: -10px -8px 12px #fff; }
  25% { box-shadow: 10px -8px 12px #8ec5ff; }
  50% { box-shadow: 10px 8px 12px #d7e8ff; }
  75% { box-shadow: -10px 8px 12px #8ec5ff; }
}

.halo-shimmer {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.halo-scan {
  overflow: hidden;
  border: 1px solid rgba(130, 220, 255, 0.4);
}
.halo-scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 8px;
  background: linear-gradient(transparent, #9ff, transparent);
  animation: scan 1.5s ease-in-out infinite;
}
@keyframes scan {
  0% { top: -8px; }
  100% { top: 100%; }
}

.halo-comet {
  inset: -3px;
  background: none;
  border: 2px solid transparent;
  animation: comet-edge 2.4s ease-in-out infinite;
}
@keyframes comet-edge {
  0%, 100% { border-top-color: #fff; box-shadow: 0 -10px 16px #9cf; }
  50% { border-top-color: transparent; border-bottom-color: #7eb6ff; box-shadow: 0 12px 18px #7eb6ff; }
}

.halo-spark {
  box-shadow:
    0 -12px 8px -4px #fff,
    12px 8px 8px -4px #cfe4ff,
    -12px 8px 8px -4px #9cf;
  animation: spark 1.1s ease-in-out infinite;
}
@keyframes spark {
  50% { filter: brightness(1.7); transform: rotate(12deg) scale(1.04); }
}

.halo-aurora {
  background: linear-gradient(120deg, #39f, #8f8, #f6f, #39f);
  background-size: 300% 300%;
  filter: blur(6px);
  opacity: 0.85;
  animation: aurora 3s ease infinite;
}
@keyframes aurora {
  50% { background-position: 100% 50%; }
}

.halo-heartbeat {
  border: 2px solid #ff8aa0;
  box-shadow: 0 0 12px rgba(255, 90, 120, 0.7);
  animation: heartbeat 1.15s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.08); }
  40% { transform: scale(0.98); }
  60% { transform: scale(1.05); }
}

.halo-ember {
  box-shadow: 0 0 16px 2px rgba(255, 120, 40, 0.65), 0 -8px 18px rgba(255, 200, 80, 0.45);
  animation: ember 1.4s ease-in-out infinite;
}
@keyframes ember {
  50% { box-shadow: 0 0 26px 6px rgba(255, 90, 20, 0.8), 0 -16px 22px rgba(255, 210, 90, 0.55); }
}

.halo-ice {
  border: 2px solid rgba(210, 245, 255, 0.9);
  box-shadow: 0 0 16px rgba(180, 230, 255, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.25);
  animation: ice 2s linear infinite;
}
@keyframes ice {
  50% { border-color: #fff; box-shadow: 0 0 24px rgba(220, 250, 255, 0.9); }
}

.halo-wave {
  border: 2px solid rgba(120, 180, 255, 0.2);
  animation: wave 1.8s ease-in-out infinite;
}
@keyframes wave {
  0% { box-shadow: 0 0 0 0 rgba(120, 180, 255, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(120, 180, 255, 0); }
}

.halo-laser {
  inset: -2px;
  background: conic-gradient(from 0deg, transparent 0 78%, #7ef9ff 88%, #fff 94%, transparent 100%);
  filter: drop-shadow(0 0 6px #29e7ff);
  animation-duration: 1.1s;
}
.halo-trace {
  inset: -2px;
  background: conic-gradient(from 120deg, transparent 0 70%, #ff2bd6 84%, #7af 94%, transparent 100%);
  filter: drop-shadow(0 0 8px #ff2bd6);
  animation-duration: 1.7s;
}
.halo-glitch {
  inset: -4px;
  border: 2px solid #7ef9ff;
  box-shadow: 4px 0 0 #ff2bd6, -4px 0 0 #7ef9ff;
  animation: glitch 0.7s steps(2, end) infinite;
}
@keyframes glitch {
  0% { transform: translate(0, 0); }
  30% { transform: translate(3px, -2px); }
  60% { transform: translate(-3px, 1px); }
  100% { transform: translate(0, 0); }
}
.halo-dash {
  inset: -3px;
  border: 2px dashed #7ef9ff;
  animation: spin 8s linear infinite;
  filter: drop-shadow(0 0 6px #29e7ff);
}
.halo-holo {
  inset: 0;
  box-shadow:
    0 0 0 2px rgba(120, 255, 250, 0.85),
    0 0 18px rgba(120, 255, 250, 0.45),
    6px 6px 0 rgba(255, 43, 214, 0.35);
  animation: holo 1.8s ease-in-out infinite;
}
@keyframes holo {
  50% { box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(120, 255, 250, 0.8), -6px 4px 0 rgba(255, 43, 214, 0.45); }
}
.halo-brackets {
  inset: -6px;
  background:
    linear-gradient(#7ef9ff, #7ef9ff) left top / 18px 2px no-repeat,
    linear-gradient(#7ef9ff, #7ef9ff) left top / 2px 18px no-repeat,
    linear-gradient(#ff2bd6, #ff2bd6) right top / 18px 2px no-repeat,
    linear-gradient(#ff2bd6, #ff2bd6) right top / 2px 18px no-repeat,
    linear-gradient(#7ef9ff, #7ef9ff) left bottom / 18px 2px no-repeat,
    linear-gradient(#7ef9ff, #7ef9ff) left bottom / 2px 18px no-repeat,
    linear-gradient(#ff2bd6, #ff2bd6) right bottom / 18px 2px no-repeat,
    linear-gradient(#ff2bd6, #ff2bd6) right bottom / 2px 18px no-repeat;
  animation: breathe 1.6s ease-in-out infinite;
}
.halo-violet {
  inset: 0;
  box-shadow: 0 0 0 2px #c77dff, 0 0 22px 4px rgba(160, 60, 255, 0.7);
  animation: violet 1.5s ease-in-out infinite;
}
@keyframes violet {
  50% { box-shadow: 0 0 0 2px #f0d8ff, 0 0 34px 8px rgba(180, 70, 255, 0.85); }
}
.halo-strobe {
  inset: -2px;
  border: 2px solid #e8fbff;
  animation: strobe 0.8s steps(1, end) infinite;
}
@keyframes strobe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px #7ef9ff); }
  45% { opacity: 0.15; }
  55% { opacity: 1; border-color: #ff2bd6; }
}
.halo-wire {
  inset: -2px;
  background: conic-gradient(#123, #123 30%, #7ef9ff 40%, #ff2bd6 48%, #123 58%, #123);
  animation-duration: 2.2s;
}
.halo-metro {
  inset: -14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 50%, #ff2bd6 0 3px, transparent 4px),
    radial-gradient(circle at 100% 50%, #7ef9ff 0 3px, transparent 4px),
    radial-gradient(circle at 50% 0, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 50% 100%, #ffe66d 0 3px, transparent 4px);
  animation: spin 3.2s linear infinite;
}

.halo-glitch {
  inset: -3px;
  background: none;
  border: 2px solid #7ef9ff;
  animation: glitch-edge 2.2s steps(1, end) infinite;
}
@keyframes glitch-edge {
  0%, 75%, 100% { transform: none; box-shadow: 3px 0 0 #ff2bd6; opacity: 1; }
  80% { transform: translate(3px, -1px); opacity: 0.7; }
  88% { transform: translate(-3px, 1px); opacity: 0.2; }
  94% { transform: none; box-shadow: -3px 0 0 #7ef9ff; }
}
.halo-strobe {
  inset: -3px;
  background: none;
  border: 2px solid #e8fbff;
  animation: strobe-edge 1.4s steps(1, end) infinite;
}
@keyframes strobe-edge {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px #7ef9ff; }
  45% { opacity: 0.08; }
  55% { opacity: 1; border-color: #ff2bd6; box-shadow: 0 0 14px #ff2bd6; }
}
.halo-violet {
  inset: -3px;
  background: none;
  border: 2px solid #c77dff;
  box-shadow: 0 0 10px rgba(160, 60, 255, 0.45);
  animation: violet-edge 2.6s ease-in-out infinite;
}
@keyframes violet-edge {
  50% { border-color: #f0d8ff; box-shadow: 0 0 20px 4px rgba(180, 70, 255, 0.9); }
}
.halo-ghost {
  inset: -3px;
  background: none;
  border: 2px solid rgba(230, 236, 245, 0.8);
  animation: ghost-edge 4.5s ease-in-out infinite;
}
@keyframes ghost-edge {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; box-shadow: 0 0 16px rgba(230, 236, 245, 0.7); }
}
.halo-acid {
  inset: -3px;
  background: none;
  border: 2px solid #c6ff4a;
  animation: acid-edge 1.7s steps(1, end) infinite;
}
@keyframes acid-edge {
  0%, 100% { box-shadow: 0 0 10px #c6ff4a; opacity: 1; }
  30% { opacity: 0.2; }
  55% { border-color: #f4ffe0; box-shadow: 0 0 18px #d6ff6a; }
}

.tile:not(:hover):not(:focus-visible) .halo {
  opacity: 0 !important;
  visibility: hidden;
  animation: none !important;
}

@media (max-width: 860px) {
  .grid { width: min(560px, 100%); }
}
@media (max-width: 520px) {
  .grid { width: min(320px, 100%); }
  .tile { width: min(320px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .halo, .halo-scan::after { animation: none !important; }
}