@font-face {
  font-family: "KarmaticArcade";
  src: url("./ka1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f0f10;
  --panel: #151518;
  --line: #2a2b31;
  --text: #f5f5f6;
  --muted: #a9abb2;
  --accent: #FAB12F;      /* brand orange */
  --blue: #1E90FF;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Poppins", system-ui, sans-serif;
  background:
    radial-gradient(1000px 1000px at 20% -10%, rgba(250,177,47,.10), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, rgba(250,177,47,.08), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px;
}

/* --- Header + Music --- */
.arcade-header { position:relative; text-align:center; width:100%; max-width:960px; }

/* OPTION 2: pink→orange gradient neon with thin stroke for readability */
.arcade-header h1 {
  font-family: "KarmaticArcade", sans-serif;
  font-size: clamp(2.2rem, 7vw, 4rem);
  background: linear-gradient(180deg, #ff66cc 0%, #ffb21f 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 6px  rgba(255,105,180,0.50),  /* neon pink outer glow */
    0 0 12px rgba(255,153,  0,0.40),  /* soft orange mid glow */
    0 0 28px rgba(255, 20,147,0.25);  /* deep pink aura */
  -webkit-text-stroke: 1px #ff9b00;   /* thin darker edge for contrast */
  letter-spacing: 2px;
}

.neon-flicker { animation: flicker 2.4s infinite; }
@keyframes flicker { 0%,18%,22%,25%,53%,57%,100%{opacity:1} 20%,24%,55%{opacity:.35} }

.music-btn {
  position:absolute; right:0; top:0;
  background: transparent; border:1px solid var(--line);
  color: var(--accent); font-size:1.3rem; padding:8px 10px;
  border-radius:12px; cursor:pointer; box-shadow: var(--shadow);
}

/* --- Game Grid (Home) --- */
.game-grid {
  display:grid; gap:18px; width:100%; max-width:880px; margin-top:22px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.game-card {
  display:block; text-decoration:none; color:var(--text);
  background: linear-gradient(180deg, #1b1c20, #141417);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow: 0 0 10px rgba(250,177,47,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.game-card img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.game-card span { display:block; text-align:center; padding:10px; font-weight:700; letter-spacing:.5px; }
.game-card:hover { transform: translateY(-4px); box-shadow: 0 0 18px var(--accent); }

.footer { margin-top:24px; color:var(--muted); font-size:.9rem; }

/* --- Buttons / Pills --- */
.btn {
  background: var(--accent); color:#111; border:none;
  padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow: 0 10px 26px rgba(250,177,47,.25);
}
.btn.ghost { background:transparent; color:var(--muted); border:1px dashed var(--line); }
.btn.secondary { background: linear-gradient(180deg, #1d1e21, #16171a); color:var(--text); border:1px solid var(--line); }
.pill {
  background: var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:10px 14px; min-width:130px; text-align:center; box-shadow: var(--shadow);
}
.pill strong { display:block; font-size:.9rem; color:var(--muted) }
.pill span { display:block; font-size:1.3rem; margin-top:4px }

/* ================= MEMORY ================= */
.mem-wrap { width:100%; max-width:900px; margin-top:16px; }
.mem-header { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; max-width:900px; }
.mem-status { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:12px 0; }
.mem-grid {
  width:min(94vw, 820px); margin:10px auto 0;
  display:grid; gap:12px; grid-template-columns:repeat(6,1fr);
}
@media (max-width:780px){ .mem-grid{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:540px){ .mem-grid{ grid-template-columns:repeat(4,1fr) } }
.mem-card { position:relative; aspect-ratio:1/1; border-radius:16px; perspective:1000px; }
.mem-card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .35s ease; border-radius:16px; }
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
.mem-face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backface-visibility:hidden; border-radius:16px; box-shadow: var(--shadow); }
.mem-face.back { background:linear-gradient(180deg, #222326, #17181b); border:1px solid #2a2b31; color:#ff5757; font-size:clamp(1.4rem,4.6vw,2.4rem); }
.mem-face.front { transform:rotateY(180deg); font-size:clamp(1.8rem,5.4vw,2.6rem); background:linear-gradient(180deg, #1b1b1d, #141417); border:1px solid #232327; }
.mem-card.matched .mem-face.front { outline:2px solid var(--accent); box-shadow:0 0 0 6px rgba(250,177,47,.18), var(--shadow); }

/* ================= CONNECT 4 ================= */
.c4-board {
  display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(6,1fr);
  gap:6px; background:var(--panel); border-radius:18px; padding:6px; box-shadow:var(--shadow);
  width:min(92vw, 520px); aspect-ratio:7/6; margin:10px auto 0;
}
.c4-cell { background:#1c1d22; border-radius:50%; box-shadow: inset 0 0 12px #000, inset 0 0 0 2px var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .15s ease; }
.c4-cell:hover{ transform: translateY(-2px); }
.c4-disc { width:80%; height:80%; border-radius:50%; box-shadow: 0 0 16px rgba(0,0,0,.5); }
.c4-disc.orange { background:var(--accent); box-shadow:0 0 12px 4px rgba(250,177,47,.4); }
.c4-disc.blue   { background:var(--blue);   box-shadow:0 0 12px 4px rgba(30,144,255,.4); }

/* ================= TIC TAC TOE ================= */
.ttt-board {
  width:min(92vw,520px); margin:10px auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.ttt-cell {
  aspect-ratio:1/1; border-radius:16px; background:linear-gradient(180deg, #1b1c20, #141417);
  border:1px solid var(--line); box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(2.2rem, 12vw, 4.2rem); font-weight:900;
  cursor:pointer; user-select:none; transition: transform .12s ease;
}
.ttt-cell:hover { transform: translateY(-1px); }
.ttt-cell.X { color: var(--accent); }
.ttt-cell.O { color: #4FC3F7; }
.ttt-win { outline:3px solid var(--accent); box-shadow:0 0 0 6px rgba(250,177,47,.18), var(--shadow); }

.center { text-align:center; }
.bar { display:flex; gap:8px; justify-content:center; margin-top:12px; }

/* --- Confetti canvas (shared) --- */
.confetti {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* --- Desktop readability fixes for the header --- */
.arcade-header h1 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.05;
}

/* Mobile/tablet: keep the pink→orange gradient */
@media (max-width: 899px) {
  .arcade-header h1 {
    background: linear-gradient(180deg, #ff66cc 0%, #ffb21f 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
      0 0 6px  rgba(255,105,180,0.50),
      0 0 12px rgba(255,153,  0,0.40),
      0 0 28px rgba(255, 20,147,0.25);
    -webkit-text-stroke: 1px #ff9b00;
  }
}

/* Desktop: solid fill + tighter glow to avoid blur */
@media (min-width: 900px) {
  .arcade-header h1 {
    /* use solid color on desktop for crisper glyphs */
    -webkit-text-fill-color: #ffb21f;
    background: none;
    /* small, controlled glow */
    text-shadow:
      0 0 2px  rgba(255,140,0,0.55),
      0 0 6px  rgba(255,120,0,0.35),
      0 0 12px rgba(255, 90,0,0.22);
    /* slightly stronger edge to sharpen pixels */
    -webkit-text-stroke: 1.2px #a15b00;
    /* optional: tiny dark halo to increase contrast */
    box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); /* no layout shift */
    padding: 6px 14px;
    border-radius: 10px;
    display: inline-block;
  }
}

/* =========================
   MOBILE FIRST COMFORT
   (applies to all games)
   ========================= */

@media (max-width: 600px) {

  /* Header + global spacing */
  body { padding: 12px 14px; }
  .arcade-header h1 {
    font-size: clamp(1.8rem, 6.4vw, 3rem);
    line-height: 1.05;
    margin-bottom: 6px;
  }
  .music-btn { right: 6px; top: -4px; transform: scale(.92); }

  /* Home cards */
  .game-grid { gap: 14px; margin-top: 16px; }
  .game-card span { font-size: .95rem; padding: 8px 10px; }

  /* Shared control rows (Turn / Status / Back / Buttons) */
  .mem-header, .c4-header, .ttt-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .pill {
    min-width: 0;
    padding: 8px 10px;
    font-size: .9rem;
  }
  .btn { padding: 8px 12px; font-size: .95rem; margin-top: 6px; }

  /* ===== Memory ===== */
  /* show fewer columns on small screens, tighten gaps */
  .mem-grid {
    width: 100%;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
  }
  /* If you have 24 cards, this yields 6 rows of 4; looks balanced on phones */
  @media (max-width: 420px) {
    .mem-grid { gap: 7px; }
  }
  .mem-card { border-radius: 14px; }
  .mem-card-inner { border-radius: 14px; }
  .mem-face { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
  .mem-face.back { font-size: clamp(1.2rem, 5.2vw, 2rem); }
  .mem-face.front { font-size: clamp(1.5rem, 6vw, 2.2rem); }

  /* ===== Connect 4 ===== */
  .c4-board {
    width: min(95vw, 420px);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
  }
  .c4-cell { box-shadow: inset 0 0 8px #000, inset 0 0 0 1px var(--line); }
  .c4-disc { width: 78%; height: 78%; }

  /* ===== Tic Tac Toe ===== */
  .ttt-board {
    width: min(95vw, 420px);
    gap: 6px;
  }
  .ttt-cell {
    border-radius: 14px;
    font-size: clamp(1.8rem, 11vw, 3.6rem);
  }
}

/* Extra-small phones: compress a touch more */
@media (max-width: 380px) {
  .arcade-header h1 { font-size: clamp(1.6rem, 6.2vw, 2.7rem); }
  .pill { padding: 7px 9px; font-size: .85rem; }
  .btn  { padding: 7px 10px; font-size: .9rem; }

  .mem-grid { gap: 6px; }
  .c4-board { width: 96vw; gap: 3px; padding: 3px; }
  .ttt-board { width: 96vw; gap: 5px; }
}

/* Slightly larger phones: let boards grow a bit */
@media (min-width: 601px) and (max-width: 820px) {
  .mem-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .c4-board  { width: min(92vw, 520px); }
  .ttt-board { width: min(92vw, 520px); }
}

/* =====================================
   HEADER FONT COLOR — NEON PINK (LESS BRIGHT)
   ===================================== */
.arcade-header h1 {
  font-family: "KarmaticArcade", sans-serif;
  font-size: clamp(2rem, 7vw, 4rem);
  color: #ff66cc; /* neon pink base */
  text-shadow:
    0 0 3px rgba(255, 102, 204, 0.8),
    0 0 8px rgba(255, 102, 204, 0.6),
    0 0 18px rgba(255, 51, 153, 0.4);
  -webkit-text-stroke: 1px rgba(255, 120, 200, 0.3);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Add a subtle glow pulse only on mobile */
@media (max-width: 800px) {
  .arcade-header h1 {
    animation: softPulse 3.5s ease-in-out infinite;
  }

  @keyframes softPulse {
    0%, 100% {
      text-shadow:
        0 0 3px rgba(255, 102, 204, 0.8),
        0 0 8px rgba(255, 102, 204, 0.6),
        0 0 18px rgba(255, 51, 153, 0.4);
    }
    50% {
      text-shadow:
        0 0 5px rgba(255, 102, 204, 1),
        0 0 12px rgba(255, 102, 204, 0.7),
        0 0 22px rgba(255, 51, 153, 0.6);
    }
  }
}

/* Make sure other neon accents remain orange */
:root {
  --accent: #FAB12F;
}