/* ═══════════════════════════════════════════
   CURSOR.CSS — Custom Cursor · Snake Game
   LOCAL CORE
═══════════════════════════════════════════ */

/* ── Hide default cursor on pointer devices ── */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}

/* ── Cursor Elements ── */
.cur-dot {
  position: fixed;
  z-index: 9999;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FDFCFA;
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width .2s ease,
    height .2s ease,
    opacity .3s ease;
  will-change: left, top;
}
.cur-ring {
  position: fixed;
  z-index: 9998;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid #FDFCFA;
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width .35s var(--ease-out),
    height .35s var(--ease-out),
    opacity .3s ease;
  will-change: left, top;
  opacity: 0.7;
}

/* Hover state */
body.cur-hover .cur-dot {
  width: 14px; height: 14px;
}
body.cur-hover .cur-ring {
  width: 48px; height: 48px;
  opacity: 0.5;
}

/* Click state */
body.cur-click .cur-dot { width: 5px; height: 5px; }
body.cur-click .cur-ring { width: 18px; height: 18px; opacity: 0.9; }

/* Hide on touch devices */
@media (hover: none) {
  .cur-dot, .cur-ring { display: none; }
}

/* ═══════════════════════════════════════════
   SNAKE GAME OVERLAY
═══════════════════════════════════════════ */
#game-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#game-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.game-close {
  position: absolute;
  top: 2rem; right: 2rem;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.game-close span {
  position: absolute;
  width: 20px; height: 1px;
  background: rgba(255,255,255,0.35);
  transition: background 0.2s;
}
.game-close span:first-child  { transform: rotate(45deg); }
.game-close span:last-child   { transform: rotate(-45deg); }
.game-close:hover span { background: rgba(255,255,255,0.9); }

.game-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.game-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.game-title em { font-style: italic; color: var(--accent); }

.game-score-row {
  display: flex;
  gap: 3rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.3);
}
.game-score-row span { color: var(--white); }

#game-canvas {
  border: 1px solid rgba(255,255,255,0.08);
  display: block;
}

.game-start-btn {
  margin-top: 1.4rem;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 2rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.game-start-btn:hover { border-color: var(--accent); color: var(--accent); }

.game-hint {
  margin-top: 1rem;
  font-family: var(--font-jp);
  font-size: 0.68rem;
  font-weight: 200;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.06em;
}