/* games.css — Study Break Zone. Loaded only on /games/.
   Uses design tokens; per-game colors via --gc. */

/* ── Hero ── */
.games-hero {
  padding: var(--space-16) 0 var(--space-10);
  background:
    radial-gradient(ellipse 60% 90% at 80% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 60%),
    var(--color-bg-alt);
  text-align: center;
  border-bottom: 1px solid var(--color-border-light);
}
@media (max-width: 640px) {
  .games-hero { padding: var(--space-10) 0 var(--space-8); }
}
.games-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.games-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 600;
  color: var(--color-brand-dark); line-height: 1.1;
  letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4);
}
.games-hero__sub {
  font-size: var(--text-base); color: var(--color-text-secondary);
  line-height: var(--leading-relaxed); max-width: 60ch; margin: 0 auto var(--space-5);
}
.games-hero__sub strong { color: var(--color-brand); }
.games-hero__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.games-hero__stat { font-size: var(--text-sm); color: var(--color-text-muted); }
.games-hero__stat b { color: var(--color-accent); font-weight: var(--font-bold); font-size: var(--text-base); }

/* ── Surprise-me button ── */
.games-surprise {
  position: relative; overflow: hidden;
  margin-top: var(--space-5);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 24px 12px 20px; border-radius: var(--radius-full);
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  color: #fff; font-size: var(--text-sm); font-weight: var(--font-bold);
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease, filter 0.15s ease;
}
/* sheen sweep on hover */
.games-surprise::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.6s ease;
}
.games-surprise:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 7px 22px color-mix(in srgb, var(--color-accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,0.3); filter: brightness(1.04); }
.games-surprise:hover::after { transform: translateX(120%); }
.games-surprise:active { transform: translateY(0) scale(0.98); }
.games-surprise__die {
  display: inline-block; font-size: 1.15rem; line-height: 1;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.games-surprise:hover .games-surprise__die { transform: rotate(360deg) scale(1.15); }

/* ── Section + filter ── */
.games-section { padding: var(--space-8) 0 var(--space-12); }
.games-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: var(--space-8);
}
.games-filter__btn {
  padding: 8px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--color-text-secondary); cursor: pointer;
  transition: all 0.15s ease;
}
.games-filter__btn:hover { border-color: var(--color-accent-light); color: var(--color-accent-dark); }
.games-filter__btn.is-active {
  background: var(--color-brand); border-color: var(--color-brand); color: #fff;
}

/* ── Game grid ── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.game-card {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.game-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--gc, var(--color-accent)); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--gc) 40%, var(--color-border)); }
.game-card:hover::before { transform: scaleX(1); }
.game-card__icon {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gc) 14%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--gc) 30%, transparent);
  transition: transform 0.2s ease;
}
.game-card:hover .game-card__icon { transform: scale(1.08) rotate(-4deg); }
.game-card__name { font-size: 1.05rem; font-weight: var(--font-bold); color: var(--color-brand); letter-spacing: -0.01em; }
.game-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); flex: 1; }
.game-card__tag {
  align-self: flex-start; margin-top: 4px;
  font-size: 0.62rem; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent);
  padding: 3px 9px; border-radius: var(--radius-full);
}
/* personal-best badge — only rendered by JS when a score exists */
.game-card__best {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--color-border-light);
  font-size: 0.78rem; font-weight: var(--font-bold); color: var(--color-brand);
  display: flex; align-items: baseline; gap: 5px;
}
.game-card__best::before { content: "🏆"; font-size: 0.8rem; }
.game-card__best-lbl {
  font-size: 0.58rem; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.games-note {
  margin-top: var(--space-8); text-align: center;
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed);
}
.games-note a { color: var(--color-accent); font-weight: var(--font-semibold); text-decoration: none; }
.games-note a:hover { text-decoration: underline; }

/* ── Modal player ── */
.game-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.game-modal__backdrop { position: absolute; inset: 0; background: rgba(12,10,9,0.7); backdrop-filter: blur(3px); }
.game-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 480px;
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
  display: flex; flex-direction: column; max-height: 92vh;
}
.game-modal__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand); color: #fff;
}
.game-modal__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin: 0; }
.game-modal__actions { display: flex; gap: 8px; }
.game-modal__btn {
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1);
  color: #fff; font-size: var(--text-xs); font-weight: var(--font-bold); cursor: pointer;
  transition: background 0.15s ease;
}
.game-modal__btn:hover { background: rgba(255,255,255,0.2); }
.game-modal__btn--close { padding: 6px 10px; }
.game-modal__stage {
  padding: var(--space-5); overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  background: var(--color-surface-alt);
}

/* ── Shared in-game UI ── */
.g-scorebar { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-4); width: 100%; }
.g-score {
  flex: 1; min-width: 68px; text-align: center; position: relative; overflow: hidden;
  padding: 9px 10px 10px; background: var(--color-surface);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
/* accent top bar tinted to the current game's colour */
.g-score::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gc, var(--color-accent)), color-mix(in srgb, var(--gc, var(--color-accent)) 50%, #fff));
  opacity: 0.85;
}
.g-score__lbl { display: block; font-size: 0.58rem; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-light); }
.g-score__val { display: block; font-size: 1.25rem; font-weight: var(--font-bold); color: var(--color-brand); line-height: 1.15; margin-top: 3px; letter-spacing: -0.01em; }
/* pop when a value updates (JS toggles .bump) */
.g-score__val.bump { animation: g-bump 0.28s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes g-bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); color: var(--gc, var(--color-accent)); } 100% { transform: scale(1); } }
.g-hint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-light); text-align: center; }

/* difficulty selector */
.g-levels { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: var(--space-3); width: 100%; }
.g-levels__lbl { font-size: 0.6rem; font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-light); }
.g-levels__seg { display: inline-flex; background: var(--color-bg-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-full); padding: 2px; }
.g-levels__btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 12px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.g-levels__btn.on { background: var(--color-brand); color: #fff; }
.g-btn {
  padding: 11px 22px; border: 0; border-radius: var(--radius-md);
  background: var(--gc, var(--color-accent)); color: #fff; font-weight: var(--font-bold); font-size: var(--text-sm);
  cursor: pointer; box-shadow: 0 3px 10px color-mix(in srgb, var(--gc, var(--color-accent)) 32%, transparent);
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.g-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 5px 16px color-mix(in srgb, var(--gc, var(--color-accent)) 42%, transparent); }
.g-btn:active { transform: translateY(1px) scale(0.98); }
.g-btn--ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); box-shadow: none; }
.g-btn--ghost:hover { background: var(--color-bg-alt); filter: none; }

.g-overlay {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(28,25,23,0.82); backdrop-filter: blur(3px); border-radius: var(--radius-lg);
  animation: g-fade 0.2s ease;
}
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
.g-overlay__card {
  position: relative; text-align: center; color: #fff; padding: var(--space-6) var(--space-6) var(--space-5); max-width: 320px;
  animation: g-pop 0.34s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes g-pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.g-overlay__card h3 { font-family: var(--font-heading); font-size: 1.7rem; margin: 0 0 6px; }
.g-overlay__card p { font-size: var(--text-sm); color: rgba(255,255,255,0.85); margin: 0 0 var(--space-4); line-height: 1.5; }
/* subtle accent ring behind the title */
.g-overlay__card::before {
  content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gc, var(--color-accent)) 45%, transparent), transparent 70%);
  left: 50%; transform: translateX(-50%); margin-top: -36px; z-index: -1; filter: blur(8px);
}
.g-overlay__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.g-overlay__share {
  background: rgba(255,255,255,0.12) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
.g-overlay__share:hover { background: rgba(255,255,255,0.2) !important; }

.g-dpad { margin-top: var(--space-3); display: none; flex-direction: column; align-items: center; gap: 6px; }
.g-dpad > div { display: flex; gap: 48px; }
.g-dpad button {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: 1.1rem; color: var(--color-brand); cursor: pointer;
}
.g-dpad button:active { background: var(--color-accent-pale); }
@media (hover: none) { .g-dpad { display: flex; } }

/* relative-positioning host so overlays anchor to the game */
.g2048, .gmem, .gsnake, .gbrk, .gind, .gscr, .gtype, .grx, .gttt, .gsim { position: relative; width: 100%; }

/* ── 2048 ── */
.g2048-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--color-border); padding: 8px; border-radius: var(--radius-md); aspect-ratio: 1; }
.g2048-cell {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-alt); border-radius: 6px;
  font-weight: var(--font-bold); font-size: 1.4rem; color: var(--color-brand);
  aspect-ratio: 1; transition: background 0.1s ease;
}
.g2048-cell.v2 { background: #fde9d0; } .g2048-cell.v4 { background: #fcdcb0; }
.g2048-cell.v8 { background: #fbb267; color: #fff; } .g2048-cell.v16 { background: #f99746; color: #fff; }
.g2048-cell.v32 { background: #f97c3f; color: #fff; } .g2048-cell.v64 { background: #ea580c; color: #fff; }
.g2048-cell.v128, .g2048-cell.v256, .g2048-cell.v512 { background: #d4a017; color: #fff; font-size: 1.2rem; }
.g2048-cell.v1024, .g2048-cell.v2048 { background: #ca8a04; color: #fff; font-size: 1.05rem; }

/* ── Memory ── */
.gmem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.gmem-card {
  aspect-ratio: 3/4; border: 0; border-radius: var(--radius-md); cursor: pointer;
  background: linear-gradient(150deg, var(--gc, var(--color-accent)), color-mix(in srgb, var(--gc, var(--color-accent)) 60%, #1c1917));
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.18s ease, box-shadow 0.18s ease;
}
.gmem-card.up {
  background: var(--color-surface); color: var(--color-brand);
  box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--gc, var(--color-accent)) 40%, transparent);
  animation: gmem-flip 0.26s ease;
}
@keyframes gmem-flip { 0% { transform: rotateY(80deg) scale(0.9); } 100% { transform: rotateY(0) scale(1); } }
.gmem-card.done {
  background: linear-gradient(150deg, #16a34a, #15803d); color: #fff; cursor: default;
  box-shadow: var(--shadow-sm); animation: gmem-match 0.4s ease;
}
@keyframes gmem-match { 0%,100% { transform: scale(1); } 35% { transform: scale(1.14); } 70% { transform: scale(0.96); } }
.gmem-card:not(.up):not(.done):hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.18); }

/* ── Snake / canvas games ── */
.gsnake-cv, .gbrk-cv { display: block; margin: 0 auto; border-radius: var(--radius-md); max-width: 100%; touch-action: none; }

/* ── India GK ── */
.gind-timer { height: 6px; background: var(--color-border-light); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-4); }
.gind-timer-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light)); width: 100%; transition: width 0.06s linear; }
.gind-q { font-size: 1.15rem; font-weight: var(--font-semibold); color: var(--color-brand); text-align: center; min-height: 3em; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.gind-opts { display: grid; gap: 8px; }
.gind-opt {
  padding: 13px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light); background: var(--color-surface);
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-brand);
  cursor: pointer; text-align: left; box-shadow: var(--shadow-xs);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease;
}
.gind-opt:hover:not(:disabled) {
  border-color: var(--gc, var(--color-accent));
  background: color-mix(in srgb, var(--gc, var(--color-accent)) 8%, var(--color-surface));
  transform: translateX(3px); box-shadow: var(--shadow-sm);
}
.gind-opt:active:not(:disabled) { transform: scale(0.99); }
.gind-opt.right { background: #16a34a; border-color: #16a34a; color: #fff; animation: g-bump 0.3s; }
.gind-opt.wrong { background: #dc2626; border-color: #dc2626; color: #fff; animation: g-shake 0.3s; }
@keyframes g-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ── Word Scramble ── */
.gscr-word { font-size: 2.2rem; font-weight: var(--font-bold); letter-spacing: 0.3em; text-align: center; color: var(--color-accent); margin-bottom: var(--space-3); text-indent: 0.3em; }
.gscr-hint { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-4); }
.gscr-input { width: 100%; padding: 12px 14px; font-size: 1.1rem; text-align: center; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.gscr-input:focus { outline: 2px solid var(--color-accent-light); border-color: var(--color-accent); }
.gscr-row { display: flex; gap: 8px; margin-top: var(--space-3); }
.gscr-row .g-btn { flex: 1; }
.gscr-fb { text-align: center; margin-top: var(--space-3); font-weight: var(--font-bold); min-height: 1.2em; }
.gscr-fb.ok { color: #16a34a; } .gscr-fb.no { color: #dc2626; }

/* ── Typing ── */
.gtype-text { font-size: 1.15rem; line-height: 1.7; color: var(--color-text-light); margin-bottom: var(--space-4); font-family: var(--font-body); letter-spacing: 0.01em; }
.gtype-text .ok { color: var(--color-brand); }
.gtype-text .bad { color: #fff; background: #dc2626; border-radius: 2px; }
.gtype-text .cur { background: var(--color-accent-pale); border-bottom: 2px solid var(--color-accent); }
.gtype-input { width: 100%; padding: 12px 14px; font-size: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); resize: none; font-family: var(--font-body); }
.gtype-input:focus { outline: 2px solid var(--color-accent-light); border-color: var(--color-accent); }

/* ── Reaction ── */
.grx-box {
  height: 240px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; transition: background 0.1s ease;
}
.grx-box.wait { background: #b91c1c; } .grx-box.go { background: #16a34a; }
.grx-box.early { background: #d97706; } .grx-box.done { background: var(--color-brand); }
.grx-msg { color: #fff; font-size: 1.3rem; font-weight: var(--font-bold); text-align: center; }
.grx-msg small { font-size: 0.8rem; font-weight: var(--font-normal); opacity: 0.85; }

/* ── Tic-Tac-Toe ── */
.gttt-status { text-align: center; font-weight: var(--font-bold); color: var(--color-brand); margin-bottom: var(--space-3); }
.gttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 280px; margin: 0 auto; }
.gttt-cell {
  aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); font-size: 2.2rem; font-weight: var(--font-bold);
  color: var(--color-brand); cursor: pointer; transition: background 0.1s ease;
}
.gttt-cell:hover:not(.f) { background: var(--color-accent-pale); }
.gttt-cell.f { cursor: default; }

/* ── Simon ── */
.gsim-status { text-align: center; font-weight: var(--font-bold); color: var(--color-brand); margin-bottom: var(--space-4); min-height: 1.4em; }
.gsim-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 280px; margin: 0 auto; }
.gsim-pad { aspect-ratio: 1; border: 0; border-radius: var(--radius-md); cursor: pointer; opacity: 0.55; transition: opacity 0.1s ease, transform 0.1s ease; }
.gsim-pad.on { opacity: 1; transform: scale(0.96); }
.gsim-g { background: #16a34a; } .gsim-r { background: #dc2626; } .gsim-y { background: #d4a017; } .gsim-b { background: #2563eb; }

/* ── Sudoku ── */
.gsud-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-width: 300px; margin: 0 auto; background: var(--color-border); padding: 3px; border-radius: var(--radius-md); }
.gsud-cell {
  aspect-ratio: 1; border: 0; background: var(--color-surface);
  font-size: 1.2rem; font-weight: var(--font-bold); color: var(--color-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gsud-cell.given { color: var(--color-brand); background: var(--color-surface-alt); cursor: default; }
.gsud-cell.sel { outline: 2px solid var(--color-accent); outline-offset: -2px; background: var(--color-accent-pale); }
.gsud-cell.bR { box-shadow: 2px 0 0 var(--color-brand-light); }
.gsud-cell.bB { box-shadow: 0 2px 0 var(--color-brand-light); }
.gsud-cell.bR.bB { box-shadow: 2px 0 0 var(--color-brand-light), 0 2px 0 var(--color-brand-light); }
.gsud-pad { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 300px; margin: var(--space-4) auto 0; }
.gsud-num { aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 1.1rem; font-weight: var(--font-bold); color: var(--color-brand); cursor: pointer; }
.gsud-num:hover { background: var(--color-accent-pale); border-color: var(--color-accent); }
.gsud-erase { color: var(--color-text-muted); }

/* ── Minesweeper ── */
.gms-flag { display: block; margin: 0 auto var(--space-3); padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-text-secondary); cursor: pointer; }
.gms-flag.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.gms-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; max-width: 320px; margin: 0 auto; }
.gms-cell {
  aspect-ratio: 1; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--color-brand-light); font-size: 0.85rem; font-weight: var(--font-bold);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.gms-cell.open { background: var(--color-surface-alt); }

/* ── Flag Match ── */
.gflag-flag { text-align: center; margin-bottom: var(--space-3); }
.gflag-img {
  width: 120px; height: 80px; object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: inline-block;
}

/* ── Hangman ── */
.ghang-lives { text-align: center; font-size: 1.3rem; letter-spacing: 2px; margin-bottom: var(--space-2); }
.ghang-word { text-align: center; margin: var(--space-3) 0 var(--space-4); }
.ghang-ltr { display: inline-block; font-size: 1.6rem; font-weight: var(--font-bold); color: var(--color-brand); width: 1.1em; border-bottom: 3px solid var(--color-border); margin: 0 2px; letter-spacing: 0; }
.ghang-kb { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; max-width: 360px; margin: 0 auto; }
.ghang-key { aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 0.85rem; font-weight: var(--font-bold); color: var(--color-brand); cursor: pointer; padding: 0; }
.ghang-key:hover:not(:disabled) { background: var(--color-accent-pale); border-color: var(--color-accent); }
.ghang-key.hit { background: #16a34a; border-color: #16a34a; color: #fff; }
.ghang-key.miss { background: var(--color-bg-alt); color: var(--color-text-light); opacity: 0.5; }

/* ── Whack-a-Mole ── */
.gwk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto; }
.gwk-hole {
  aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 70%, #6b4423 0%, #3d2817 70%);
  overflow: hidden; position: relative; box-shadow: inset 0 6px 12px rgba(0,0,0,0.4);
}
.gwk-mole { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; transform: translateY(110%); transition: transform 0.12s ease; }
.gwk-hole.up .gwk-mole { transform: translateY(8%); }

/* host wrappers for the new games */
.gc4, .gmath, .gp15, .gstroop, .ghilo { position: relative; width: 100%; }

/* ── Connect Four ── */
.gc4-status { text-align: center; font-weight: var(--font-bold); color: var(--color-brand); margin-bottom: var(--space-3); }
.gc4-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 330px; margin: 0 auto; background: #1d4ed8; padding: 8px; border-radius: var(--radius-md); }
.gc4-cell { aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--color-surface); cursor: pointer; transition: background 0.12s ease; }
.gc4-cell.p1 { background: #dc2626; } .gc4-cell.p2 { background: #fbbf24; }
.gc4-cell:hover:not(.p1):not(.p2) { background: var(--color-accent-pale); }

/* ── Math Sprint ── */
.gmath-q { font-size: 1.8rem; font-weight: var(--font-bold); color: var(--color-brand); }
.gmath-opts { grid-template-columns: 1fr 1fr; }
.gmath-opt { text-align: center; font-size: 1.1rem; }

/* ── 15-Puzzle ── */
.gp15-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 300px; margin: 0 auto; background: var(--color-border); padding: 6px; border-radius: var(--radius-md); }
.gp15-tile { aspect-ratio: 1; border: 0; border-radius: 6px; background: var(--color-accent); color: #fff; font-size: 1.4rem; font-weight: var(--font-bold); cursor: pointer; transition: transform 0.08s ease; }
.gp15-tile:hover:not(.blank) { transform: scale(1.04); }
.gp15-tile.blank { background: transparent; cursor: default; }

/* ── Colour Match (Stroop) ── */
.gstroop-prompt { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.gstroop-word { text-align: center; font-size: 3rem; font-weight: var(--font-bold); margin-bottom: var(--space-4); letter-spacing: -0.01em; }

/* ── Higher or Lower ── */
.ghilo-num { text-align: center; font-family: var(--font-heading); font-size: 4rem; font-weight: var(--font-bold); color: var(--color-accent); line-height: 1; margin-bottom: var(--space-3); }
.ghilo-status { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); min-height: 1.4em; margin-bottom: var(--space-4); }
.ghilo-row { display: flex; gap: 10px; max-width: 300px; margin: 0 auto; }
.ghilo-btn { flex: 1; }

/* hosts for the clever batch */
.gnm, .gpat, .glo, .ghan, .gcr { position: relative; width: 100%; }

/* ── Number Memory ── */
.gnm-num { text-align: center; font-family: var(--font-heading); font-size: 3rem; font-weight: var(--font-bold); color: var(--color-brand); letter-spacing: 0.08em; min-height: 1.4em; margin: var(--space-4) 0; transition: opacity 0.2s ease; }
.gnm-num.hide { color: var(--color-text-light); letter-spacing: 0.3em; }
.gnm-row { display: flex; gap: 8px; max-width: 340px; margin: 0 auto; }
.gnm-input { flex: 1; padding: 12px 14px; font-size: 1.3rem; text-align: center; letter-spacing: 0.15em; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.gnm-input:focus { outline: 2px solid var(--color-accent-light); border-color: var(--color-accent); }

/* ── Pattern Recall ── */
.gpat-status { text-align: center; font-weight: var(--font-bold); color: var(--color-brand); margin-bottom: var(--space-3); min-height: 1.4em; }
.gpat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 300px; margin: 0 auto; }
.gpat-cell { aspect-ratio: 1; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-surface-alt); cursor: pointer; transition: background 0.12s ease, transform 0.08s ease; }
.gpat-cell.on { background: var(--color-accent); border-color: var(--color-accent); }
.gpat-cell:active { transform: scale(0.95); }

/* ── Lights Out ── */
.glo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 300px; margin: 0 auto; }
.glo-cell { aspect-ratio: 1; border: 0; border-radius: var(--radius-md); cursor: pointer; background: var(--color-brand-light); box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2); transition: background 0.12s ease; }
.glo-cell.on { background: var(--color-highlight); box-shadow: 0 0 14px rgba(202,138,4,0.55), inset 0 -3px 6px rgba(0,0,0,0.15); }

/* ── Tower of Hanoi ── */
.ghan-status { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); min-height: 1.3em; margin-bottom: var(--space-3); }
.ghan-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 360px; margin: 0 auto; }
.ghan-peg { background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); cursor: pointer; padding: 8px 4px; min-height: 150px; display: flex; align-items: flex-end; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; }
.ghan-peg.sel { border-color: var(--color-accent); background: var(--color-accent-pale); }
.ghan-rod { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; width: 100%; }
.ghan-disc { height: 16px; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.2); }

/* ── Constitution Rush ── */
.gcr-q { font-size: 1.15rem; font-weight: var(--font-semibold); color: var(--color-brand); text-align: center; line-height: 1.45; min-height: 4em; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.gcr-row { display: flex; gap: 10px; max-width: 340px; margin: 0 auto; }
.gcr-btn { flex: 1; padding: 14px; border: 0; border-radius: var(--radius-md); font-size: 1.05rem; font-weight: var(--font-bold); color: #fff; cursor: pointer; transition: transform 0.1s ease, opacity 0.1s ease; }
.gcr-btn:active { transform: scale(0.97); }
.gcr-true { background: #16a34a; } .gcr-false { background: #dc2626; }

/* hosts for the engaging batch */
.gblk, .gaim, .gld, .gchimp, .grng, .gsort, .ghoop, .gpen { position: relative; width: 100%; }

/* ── Block Drop / canvas ── */
.gblk-cv, .ghoop-cv, .gpen-cv { display: block; margin: 0 auto; border-radius: var(--radius-md); max-width: 100%; touch-action: none; background: #1c1917; }

/* ── Aim Trainer ── */
.gaim-area { position: relative; height: 320px; background: var(--color-brand); border-radius: var(--radius-md); overflow: hidden; cursor: crosshair; }
.gaim-target { position: absolute; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 35%, #fb923c, #ea580c); box-shadow: 0 0 12px rgba(234,88,12,0.6); padding: 0; }

/* ── Word Ladder ── */
.gld-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.gld-word { font-size: 1.4rem; font-weight: var(--font-bold); letter-spacing: 0.2em; color: var(--color-brand); }
.gld-arrow { color: var(--color-text-light); font-size: 1.2rem; }
.gld-goal { font-size: 1.4rem; font-weight: var(--font-bold); letter-spacing: 0.2em; color: var(--color-accent); }

/* ── Chimp Test ── */
.gchimp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 320px; margin: 0 auto; }
.gchimp-cell { aspect-ratio: 1; border: 0; border-radius: var(--radius-md); background: transparent; font-size: 1.3rem; font-weight: var(--font-bold); cursor: default; color: var(--color-brand); }
.gchimp-cell.has { background: var(--color-accent); color: #fff; cursor: pointer; }
.gchimp-cell.hidden-num { background: var(--color-surface); border: 1px solid var(--color-border); color: transparent; }
.gchimp-cell.done { background: #16a34a; color: #fff; }

/* ── Ring Sort ── */
.grng-status { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); min-height: 1.2em; }
.grng-board { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.grng-peg { width: 46px; min-height: 150px; background: var(--color-surface-alt); border: 1px solid var(--color-border-light); border-radius: 0 0 8px 8px; border-top: 3px solid var(--color-brand-light); cursor: pointer; display: flex; align-items: flex-end; padding: 4px; transition: background 0.12s ease, border-color 0.12s ease; }
.grng-peg.sel { border-color: var(--color-accent); background: var(--color-accent-pale); }
.grng-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 100%; }
.grng-ring { width: 100%; height: 26px; border-radius: 999px; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.25); }

/* ── Quick Sort ── */
.gsort-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gsort-tile { width: 48px; height: 56px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 1.4rem; font-weight: var(--font-bold); color: var(--color-brand); cursor: pointer; transition: transform 0.1s ease; }
.gsort-tile.sel { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-4px); }

/* ── Penalty Shootout ── */
.gpen-aim { display: flex; gap: 8px; max-width: 340px; margin: var(--space-3) auto 0; }
.gpen-aim .g-btn { flex: 1; padding: 10px 6px; font-size: var(--text-sm); }

/* hosts for batch 34–51 */
.grps,.gcoin,.gbub,.gdodge,.gcatch,.godd,.gtap,.grg,.gct,.gpong,.gseq,.gguess,.gmtf,.gmaze,.gcps,.gem { position: relative; width: 100%; }

/* Rock Paper Scissors */
.grps-duel { display:flex; align-items:center; justify-content:center; gap:var(--space-5); margin-bottom:var(--space-3); }
.grps-hand { font-size:3rem; width:70px; text-align:center; }
.grps-vs { font-size:var(--text-sm); font-weight:700; color:var(--color-text-light); }
.grps-status { text-align:center; font-weight:700; color:var(--color-brand); margin-bottom:var(--space-4); min-height:1.4em; }
.grps-row { display:flex; gap:10px; justify-content:center; }
.grps-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 16px; font-size:1.6rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); cursor:pointer; transition:all .12s ease; }
.grps-btn span { font-size:.62rem; font-weight:700; text-transform:uppercase; color:var(--color-text-muted); }
.grps-btn:hover { border-color:var(--gc,var(--color-accent)); background:color-mix(in srgb,var(--gc,var(--color-accent)) 8%,var(--color-surface)); transform:translateY(-2px); }

/* Coin */
.gcoin-face { font-size:4rem; text-align:center; margin:var(--space-2) auto var(--space-3); transition:transform .5s; }
.gcoin-face.spin { animation:gcoin-spin .5s linear; }
@keyframes gcoin-spin { 0%{transform:rotateY(0)}100%{transform:rotateY(1080deg)} }

/* Bubble Pop */
.gbub-area { position:relative; height:340px; background:linear-gradient(180deg,#0c4a6e,#075985); border-radius:var(--radius-md); overflow:hidden; }
.gbub-b { position:absolute; border:0; border-radius:50%; cursor:pointer; box-shadow:inset 0 -3px 6px rgba(0,0,0,.2); padding:0; }
.gbub-b.pop { transform:scale(1.5)!important; opacity:0; transition:all .15s ease; }

/* Star Catch / Dodge / Pong / canvas */
.gblk-cv { display:block; margin:0 auto; border-radius:var(--radius-md); max-width:100%; touch-action:none; background:#1c1917; }

/* Odd / Spot grid */
.godd-grid { display:grid; gap:8px; max-width:300px; margin:0 auto; justify-content:center; }
.godd-cell { aspect-ratio:1; min-width:48px; border:1px solid var(--color-border-light); border-radius:var(--radius-md); background:var(--color-surface); font-size:1.6rem; cursor:pointer; transition:transform .1s ease, background .1s ease; }
.godd-cell:hover { transform:scale(1.05); background:var(--color-accent-pale); }
.godd-cell.wrong { animation:g-shake .3s; background:#fee2e2; }
.godd-cell.done { background:#dcfce7; }

/* Tap the numbers / reaction grid */
.gtap-grid,.grg-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:300px; margin:0 auto; }
.grg-grid { grid-template-columns:repeat(3,1fr); max-width:240px; }
.gtap-cell { aspect-ratio:1; border:1px solid var(--color-border-light); border-radius:var(--radius-sm); background:transparent; font-size:1rem; font-weight:700; color:var(--color-brand); cursor:default; }
.gtap-cell.on { background:var(--color-surface); border-color:var(--color-border); cursor:pointer; }
.gtap-cell.on:hover { background:var(--color-accent-pale); }
.gtap-cell.done { background:#16a34a; color:#fff; }
.grg-cell { aspect-ratio:1; border:1px solid var(--color-border-light); border-radius:var(--radius-md); background:var(--color-surface-alt); cursor:pointer; transition:background .05s; }
.grg-cell.on { background:#16a34a; box-shadow:0 0 14px rgba(22,163,74,.6); }

/* Colour Tap */
.gct-box { display:flex; align-items:center; justify-content:center; height:180px; width:100%; border:0; border-radius:var(--radius-lg); cursor:pointer; margin-bottom:var(--space-3); }
.gct-word { font-size:2.4rem; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35); }

/* Number Memory pads */
.gseq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:260px; margin:0 auto; }
.gseq-pad { aspect-ratio:1; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-alt); font-size:1.4rem; font-weight:700; color:var(--color-brand); cursor:pointer; transition:all .1s; }
.gseq-pad.on { background:var(--color-accent); color:#fff; transform:scale(.95); box-shadow:0 0 16px color-mix(in srgb,var(--color-accent) 50%,transparent); }

/* Number Guess */
.gguess-hist { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:var(--space-3); }
.gguess-chip { font-size:var(--text-xs); font-weight:700; padding:3px 9px; border-radius:var(--radius-full); }
.gguess-chip.low { background:#dbeafe; color:#1e40af; } .gguess-chip.high { background:#fed7aa; color:#9a3412; } .gguess-chip.hit { background:#16a34a; color:#fff; }

/* Math T/F + Emoji */
.gmtf-q { font-size:2rem; font-weight:800; text-align:center; color:var(--color-brand); margin-bottom:var(--space-4); font-family:var(--font-mono,monospace); }
.gem-q { text-align:center; margin-bottom:var(--space-4); }
.gem-line { display:block; font-size:1.6rem; line-height:1.4; }
.gem-key { display:block; font-size:var(--text-xs); color:var(--color-text-muted); margin-top:6px; }

/* Maze */
.gmaze-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:2px; max-width:288px; margin:0 auto; background:var(--color-border-light); padding:2px; border-radius:var(--radius-md); }
.gmaze-cell { aspect-ratio:1; background:var(--color-surface); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.gmaze-cell.wall { background:var(--color-brand); }
.gmaze-p { width:60%; height:60%; border-radius:50%; background:var(--color-accent); box-shadow:0 0 8px color-mix(in srgb,var(--color-accent) 60%,transparent); }

/* Click Speed */
.gcps-pad { width:100%; height:200px; border:0; border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--color-brand),var(--color-brand-dark)); color:#fff; font-size:1.6rem; font-weight:800; letter-spacing:.1em; cursor:pointer; margin-bottom:var(--space-3); transition:transform .05s; }
.gcps-pad:active { transform:scale(.98); }
.gcps-pad.live { background:linear-gradient(135deg,var(--color-accent),var(--color-accent-hover)); }

@media (max-width: 480px) {
  .games-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .game-card { padding: var(--space-4); }
  .game-card__icon { width: 44px; height: 44px; font-size: 1.4rem; }
  .game-card__name { font-size: 0.95rem; }
  .game-card__desc { font-size: var(--text-xs); }
  .game-modal__stage { padding: var(--space-4); }
}