/*!
 * A Game For The Nature - 3D Journey
 * Minigames modal + games. Every selector is scoped under .agftn3d-mg.
 */

/* ================================================================== *
 * 1. Root, tokens and a defensive reset (WordPress themes style
 *    buttons/headings aggressively, so we neutralise them here).
 * ================================================================== */

.agftn3d-mg {
  --mg-accent: var(--agftn-accent, #f7a41d);
  --mg-accent-soft: rgba(247, 164, 29, .18);
  --mg-accent-glow: rgba(247, 164, 29, .38);
  --mg-panel: rgba(10, 18, 28, .86);
  --mg-border: rgba(255, 255, 255, .12);
  --mg-surface: rgba(255, 255, 255, .06);
  --mg-surface-hi: rgba(255, 255, 255, .11);
  --mg-text: #f3f6fa;
  --mg-muted: #a9b6c6;
  --mg-success: #3ecf8e;
  --mg-danger: #ff5d5d;
  --mg-danger-text: #ff8f8f;
  --mg-o: #7cc6ff;
  --mg-radius: 18px;
  --mg-font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mg-ease: cubic-bezier(.22, .9, .32, 1);

  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  container-type: size;
  font-family: var(--mg-font);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--mg-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: agm-fade .25s ease both;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .agftn3d-mg {
    --mg-accent-soft: color-mix(in srgb, var(--mg-accent) 18%, transparent);
    --mg-accent-glow: color-mix(in srgb, var(--mg-accent) 38%, transparent);
  }
}

.agftn3d-mg.is-leaving {
  animation: agm-fade-out .2s ease forwards;
  pointer-events: none;
}

.agftn3d-mg *,
.agftn3d-mg *::before,
.agftn3d-mg *::after { box-sizing: border-box; }

.agftn3d-mg [hidden] { display: none !important; }

.agftn3d-mg button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.agftn3d-mg button:focus-visible {
  outline: 3px solid var(--mg-accent);
  outline-offset: 3px;
}

.agftn3d-mg h2,
.agftn3d-mg h3,
.agftn3d-mg p {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.35;
}

.agftn3d-mg svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.agftn3d-mg .agm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================================================== *
 * 2. Modal shell
 * ================================================================== */

.agftn3d-mg .agm-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(4, 10, 18, .42), rgba(2, 6, 12, .78));
}

.agftn3d-mg .agm-panel {
  /* Board size scales with the host (container units) or the viewport as a fallback. */
  --agm-size: clamp(190px, min(100vw - 56px, 100vh - 290px), 420px);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(640px, 100%);
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 16px;
  background: var(--mg-panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  animation: agm-pop .42s var(--mg-ease) both;
}

@supports (width: 1cqw) {
  .agftn3d-mg .agm-panel {
    --agm-size: clamp(190px, min(100cqw - 56px, 100cqh - 290px), 420px);
  }
}

.agftn3d-mg .agm-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--mg-accent), transparent);
  pointer-events: none;
}

/* Header */
.agftn3d-mg .agm-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agftn3d-mg .agm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.agftn3d-mg .agm-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mg-accent);
}

.agftn3d-mg .agm-badge {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--mg-muted);
  white-space: nowrap;
}

.agftn3d-mg .agm-badge--required {
  color: var(--mg-accent);
  border-color: var(--mg-accent-glow);
  background: var(--mg-accent-soft);
}

.agftn3d-mg .agm-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.agftn3d-mg .agm-desc {
  font-size: 14px;
  color: var(--mg-muted);
  max-width: 60ch;
}

/* Body */
.agftn3d-mg .agm-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.agftn3d-mg .agm-stage {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Footer */
.agftn3d-mg .agm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mg-border);
}

.agftn3d-mg .agm-foot__spacer { flex: 1 1 auto; }

.agftn3d-mg .agm-panel.is-result .agm-foot { display: none; }
.agftn3d-mg.is-required .agm-panel.is-fail .agm-foot { display: flex; }
.agftn3d-mg .agm-panel.is-result .agm-foot__restart { display: none; }

/* Buttons */
.agftn3d-mg .agm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease,
    box-shadow .2s ease, filter .2s ease, color .2s ease;
}

.agftn3d-mg .agm-btn--primary {
  background: var(--mg-accent);
  color: #1b1203;
  box-shadow: 0 8px 22px var(--mg-accent-glow);
}

.agftn3d-mg .agm-btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px var(--mg-accent-glow);
}

.agftn3d-mg .agm-btn--ghost {
  background: var(--mg-surface);
  border-color: var(--mg-border);
  color: var(--mg-text);
}

.agftn3d-mg .agm-btn--ghost:hover {
  background: var(--mg-surface-hi);
  border-color: rgba(255, 255, 255, .26);
}

.agftn3d-mg .agm-btn:active { transform: translateY(1px) scale(.98); }
.agftn3d-mg .agm-btn:disabled { opacity: .5; cursor: default; }

.agftn3d-mg .agm-link {
  display: inline-block;
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mg-muted);
  text-decoration: underline;
  text-decoration-color: rgba(169, 182, 198, .5);
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.agftn3d-mg .agm-link:hover { color: var(--mg-text); }

/* Result screen */
.agftn3d-mg .agm-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 8px;
  text-align: center;
  animation: agm-rise .45s var(--mg-ease) both;
}

.agftn3d-mg .agm-result__icon {
  width: 88px;
  height: 88px;
  margin-bottom: 4px;
  animation: agm-pop-icon .6s cubic-bezier(.2, 1.5, .4, 1) .05s both;
}

.agftn3d-mg .agm-result--success .agm-result__icon {
  color: var(--mg-success);
  filter: drop-shadow(0 0 20px rgba(62, 207, 142, .45));
}

.agftn3d-mg .agm-result--fail .agm-result__icon {
  color: var(--mg-danger);
  filter: drop-shadow(0 0 18px rgba(255, 93, 93, .35));
}

.agftn3d-mg .agm-result__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.agftn3d-mg .agm-result__score {
  font-size: 16px;
  font-weight: 600;
}

.agftn3d-mg .agm-result__note {
  font-size: 14px;
  color: var(--mg-muted);
}

.agftn3d-mg .agm-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

/* ================================================================== *
 * 3. Shared game UI: layout, HUD, stats, timer, status, intro card
 * ================================================================== */

.agftn3d-mg .agm-game {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.agftn3d-mg .agm-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, var(--agm-size));
}

.agftn3d-mg .agm-stat {
  display: flex;
  flex-direction: column;
  flex: none;
  min-width: 86px;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
}

.agftn3d-mg .agm-stat__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mg-muted);
}

.agftn3d-mg .agm-stat__value {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.agftn3d-mg .agm-stat__value.is-bump { animation: agm-bump .3s ease; }

.agftn3d-mg .agm-timer {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 110px;
}

.agftn3d-mg .agm-timer__track {
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

.agftn3d-mg .agm-timer__fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--mg-accent), #ffd27a);
  box-shadow: 0 0 12px var(--mg-accent-glow);
  will-change: transform;
}

.agftn3d-mg .agm-timer__label {
  min-width: 3ch;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.agftn3d-mg .agm-timer.is-low .agm-timer__fill {
  background: var(--mg-danger);
  box-shadow: 0 0 12px rgba(255, 93, 93, .5);
  animation: agm-blink 1s ease-in-out infinite;
}

.agftn3d-mg .agm-timer.is-low .agm-timer__label { color: var(--mg-danger-text); }

.agftn3d-mg .agm-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
  font-size: 14px;
  font-weight: 700;
}

.agftn3d-mg .agm-status__mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  color: #10161f;
}

.agftn3d-mg .agm-status__mark--x { background: var(--mg-accent); }
.agftn3d-mg .agm-status__mark--o { background: var(--mg-o); }

.agftn3d-mg .agm-status.is-thinking::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mg-o);
  animation: agm-blink .8s ease-in-out infinite;
}

/* "Ready?" overlay for timed games */
.agftn3d-mg .agm-intro {
  position: absolute;
  inset: -6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  background: rgba(10, 18, 28, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: agm-fade .3s ease both;
}

.agftn3d-mg .agm-intro__icon {
  width: 68px;
  height: 68px;
  animation: agm-float 2.6s ease-in-out infinite;
}

.agftn3d-mg .agm-intro__title { font-size: 20px; font-weight: 800; }

.agftn3d-mg .agm-intro__text {
  max-width: 34ch;
  font-size: 14px;
  color: var(--mg-muted);
  margin-bottom: 6px;
}

/* ================================================================== *
 * 4. Tic-Tac-Toe
 * ================================================================== */

.agftn3d-mg .agm-ttt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(100%, var(--agm-size), 380px);
  aspect-ratio: 1;
}

.agftn3d-mg .agm-ttt__cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 16px;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease, opacity .3s ease;
}

.agftn3d-mg .agm-ttt__grid:not(.is-over):not(.is-waiting) .agm-ttt__cell:not([aria-disabled]):hover {
  background: var(--mg-surface-hi);
  border-color: rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

.agftn3d-mg .agm-ttt__grid.is-waiting .agm-ttt__cell { cursor: wait; }
.agftn3d-mg .agm-ttt__cell[aria-disabled] { cursor: default; }

.agftn3d-mg .agm-ttt__cell svg {
  width: 68%;
  height: 68%;
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}

.agftn3d-mg .agm-ttt__cell svg path,
.agftn3d-mg .agm-ttt__cell svg circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: agm-draw .32s ease-out forwards;
}

.agftn3d-mg .agm-ttt__cell svg path:nth-child(2) { animation-delay: .12s; }
.agftn3d-mg .agm-ttt__cell.is-x svg { stroke: var(--mg-accent); filter: drop-shadow(0 0 8px var(--mg-accent-glow)); }
.agftn3d-mg .agm-ttt__cell.is-o svg { stroke: var(--mg-o); filter: drop-shadow(0 0 8px rgba(124, 198, 255, .4)); }

.agftn3d-mg .agm-ttt__grid.is-over .agm-ttt__cell:not(.is-win) { opacity: .45; }

.agftn3d-mg .agm-ttt__cell.is-win {
  border-color: var(--mg-success);
  background: rgba(62, 207, 142, .16);
  animation: agm-win .9s ease-in-out 2;
}

/* ================================================================== *
 * 5. Memory
 * ================================================================== */

.agftn3d-mg .agm-memory__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, var(--agm-size));
}

.agftn3d-mg .agm-card {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  perspective: 700px;
  animation: agm-deal .4s var(--mg-ease) both;
}

.agftn3d-mg .agm-card__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3, .8, .3, 1);
}

.agftn3d-mg .agm-card.is-open .agm-card__inner { transform: rotateY(180deg); }

.agftn3d-mg .agm-card__back,
.agftn3d-mg .agm-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.agftn3d-mg .agm-card__back {
  color: var(--mg-accent);
  border: 1px solid var(--mg-accent-glow);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .1) 0 1.5px, transparent 2.5px) 0 0 / 12px 12px,
    radial-gradient(circle at 50% 45%, var(--mg-accent-soft), transparent 65%),
    linear-gradient(145deg, #21486b, #10253b);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: filter .2s ease;
}

.agftn3d-mg .agm-card__back svg { width: 44%; height: 44%; opacity: .75; }

.agftn3d-mg .agm-card__face {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #fbf8f1, #e9e2d3);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}

.agftn3d-mg .agm-card__face svg { width: 64%; height: 64%; }

.agftn3d-mg .agm-card:not(.is-open):hover .agm-card__back { filter: brightness(1.2); }

.agftn3d-mg .agm-card.is-matched { cursor: default; }

.agftn3d-mg .agm-card.is-matched .agm-card__face {
  box-shadow: 0 0 0 3px var(--mg-success), 0 0 18px rgba(62, 207, 142, .5);
  animation: agm-match .5s ease .35s both;
}

.agftn3d-mg .agm-card:focus-visible { outline-offset: 2px; }

/* ================================================================== *
 * 6. Quick Quiz
 * ================================================================== */

.agftn3d-mg .agm-quiz {
  align-items: stretch;
  width: min(100%, 540px);
}

.agftn3d-mg .agm-quiz__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mg-muted);
}

.agftn3d-mg .agm-quiz__dots { display: flex; gap: 6px; }

.agftn3d-mg .agm-quiz__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  transition: width .3s ease, background-color .3s ease;
}

.agftn3d-mg .agm-quiz__dot.is-done { background: var(--mg-accent); }
.agftn3d-mg .agm-quiz__dot.is-current { width: 24px; background: var(--mg-accent); }

.agftn3d-mg .agm-quiz__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--mg-border);
  background: rgba(255, 255, 255, .04);
  animation: agm-slide .35s var(--mg-ease) both;
}

.agftn3d-mg .agm-quiz__q {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.agftn3d-mg .agm-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agftn3d-mg .agm-quiz__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease, opacity .25s ease;
}

.agftn3d-mg .agm-quiz__opt:not(:disabled):hover {
  border-color: var(--mg-accent);
  background: var(--mg-surface-hi);
  transform: translateX(3px);
}

.agftn3d-mg .agm-quiz__opt:disabled { cursor: default; }

.agftn3d-mg .agm-quiz__letter {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  font-size: 13px;
  font-weight: 800;
  transition: background-color .2s ease, color .2s ease;
}

.agftn3d-mg .agm-quiz__opt.is-correct {
  border-color: var(--mg-success);
  background: rgba(62, 207, 142, .16);
  animation: agm-bump .35s ease;
}

.agftn3d-mg .agm-quiz__opt.is-correct .agm-quiz__letter { background: var(--mg-success); color: #06281a; }

.agftn3d-mg .agm-quiz__opt.is-wrong {
  border-color: var(--mg-danger);
  background: rgba(255, 93, 93, .15);
  animation: agm-shake .4s ease;
}

.agftn3d-mg .agm-quiz__opt.is-wrong .agm-quiz__letter { background: var(--mg-danger); color: #2b0606; }
.agftn3d-mg .agm-quiz__opt.is-dim { opacity: .45; }

.agftn3d-mg .agm-quiz__feedback {
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 700;
}

.agftn3d-mg .agm-quiz__feedback.is-good { color: var(--mg-success); }
.agftn3d-mg .agm-quiz__feedback.is-bad { color: var(--mg-danger-text); }

.agftn3d-mg .agm-quiz__next {
  align-self: flex-end;
  animation: agm-rise .3s var(--mg-ease) both;
}

/* ================================================================== *
 * 7. Catch the Target (beach clean-up)
 * ================================================================== */

.agftn3d-mg .agm-catch__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(100%, var(--agm-size), 400px);
  padding: 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .25) 0 1px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(180deg, #ecd39a, #d8ad62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 -10px 24px rgba(120, 76, 20, .25), 0 12px 30px rgba(0, 0, 0, .35);
  outline: none;
}

.agftn3d-mg .agm-catch__grid::before {
  /* a strip of sea along the top edge */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #2f8fe0, #1bb6a6, #2f8fe0);
  opacity: .85;
}

.agftn3d-mg .agm-catch__grid.is-idle .agm-catch__cell { cursor: default; }

.agftn3d-mg .agm-catch__cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(ellipse 42% 16% at 50% 76%, rgba(70, 42, 12, .55) 0 70%, rgba(70, 42, 12, .18) 71% 100%, transparent 101%);
  transition: background-color .2s ease;
}

.agftn3d-mg .agm-catch__cell:hover { background-color: rgba(255, 255, 255, .12); }

.agftn3d-mg .agm-catch__cell:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.agftn3d-mg .agm-catch__key {
  position: absolute;
  top: 6px;
  left: 9px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(70, 42, 12, .45);
}

.agftn3d-mg .agm-catch__item {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 60%;
  height: 60%;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 4px rgba(60, 36, 10, .35));
  pointer-events: none;
  animation: agm-popup .22s cubic-bezier(.2, 1.4, .4, 1) both;
}

.agftn3d-mg .agm-catch__item.is-caught { animation: agm-caught .22s ease-out forwards; }
.agftn3d-mg .agm-catch__item.is-gone { animation: agm-sink .22s ease-in forwards; }

.agftn3d-mg .agm-catch__cell.is-hit { animation: agm-flash-good .45s ease; }
.agftn3d-mg .agm-catch__cell.is-miss { animation: agm-flash-bad .45s ease; }

/* ================================================================== *
 * 8. Sliding Puzzle
 * ================================================================== */

.agftn3d-mg .agm-puzzle__loading {
  padding: 48px 0;
  color: var(--mg-muted);
  animation: agm-blink 1.2s ease-in-out infinite;
}

.agftn3d-mg .agm-puzzle .agm-hud { justify-content: space-between; }

.agftn3d-mg .agm-puzzle__goal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border-radius: 12px;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
}

.agftn3d-mg .agm-puzzle__preview {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  transform-origin: right top;
  transition: transform .25s var(--mg-ease), box-shadow .25s ease;
}

@media (hover: hover) {
  .agftn3d-mg .agm-puzzle__goal:hover .agm-puzzle__preview {
    position: relative;
    z-index: 5;
    transform: scale(2.6);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 12px 30px rgba(0, 0, 0, .5);
  }
}

.agftn3d-mg .agm-puzzle__board {
  position: relative;
  width: min(100%, var(--agm-size));
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--mg-border);
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 12px 30px rgba(0, 0, 0, .35);
  transition: box-shadow .5s ease;
}

.agftn3d-mg .agm-tile {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 33.3333%;
  height: 33.3333%;
  padding: 3px;
  transition: transform .22s cubic-bezier(.3, .8, .3, 1), padding .4s ease;
  will-change: transform;
}

.agftn3d-mg .agm-tile__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: #1b2a3c;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 4px 10px rgba(0, 0, 0, .35);
  transition: border-radius .4s ease, box-shadow .4s ease, filter .2s ease;
}

.agftn3d-mg .agm-tile:not([aria-disabled]):hover .agm-tile__img { filter: brightness(1.12); }
.agftn3d-mg .agm-tile:focus-visible { outline: none; }

.agftn3d-mg .agm-tile:focus-visible .agm-tile__img {
  outline: 3px solid var(--mg-accent);
  outline-offset: -3px;
}

.agftn3d-mg .agm-tile__num {
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  opacity: .7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  transition: opacity .3s ease;
}

.agftn3d-mg .agm-tile.is-nudge .agm-tile__img { animation: agm-shake-sm .3s ease; }

.agftn3d-mg .agm-tile--last {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease .2s, padding .4s ease;
}

.agftn3d-mg .agm-puzzle__board.is-solved {
  box-shadow: 0 0 0 3px var(--mg-success), 0 0 30px rgba(62, 207, 142, .45);
}

.agftn3d-mg .agm-puzzle__board.is-solved .agm-tile { padding: 0; cursor: default; }
.agftn3d-mg .agm-puzzle__board.is-solved .agm-tile__img { border-radius: 0; box-shadow: none; }
.agftn3d-mg .agm-puzzle__board.is-solved .agm-tile__num { opacity: 0; }
.agftn3d-mg .agm-puzzle__board.is-solved .agm-tile--last { opacity: 1; }

/* ================================================================== *
 * 9. Match the Colour
 * ================================================================== */

.agftn3d-mg .agm-colour__target {
  --agm-swatch: #444;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(100%, var(--agm-size), 380px);
  aspect-ratio: 16 / 5;
  min-height: 78px;
  padding: 12px 18px;
  border-radius: 18px;
  background: var(--agm-swatch);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 30px rgba(0, 0, 0, .35);
  transition: background-color .25s ease, color .25s ease;
}

.agftn3d-mg .agm-colour__target.is-light { color: #1a1a1a; }
.agftn3d-mg .agm-colour__target.is-new { animation: agm-bump .35s ease; }

.agftn3d-mg .agm-colour__hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}

.agftn3d-mg .agm-colour__name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.agftn3d-mg .agm-colour__penalty {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mg-danger);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
}

.agftn3d-mg .agm-colour__penalty.is-on { animation: agm-penalty .9s ease both; }

.agftn3d-mg .agm-colour__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: min(100%, var(--agm-size), 380px);
}

.agftn3d-mg .agm-swatch {
  --agm-swatch: #56606c;
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  min-height: 56px;
  border-radius: 16px;
  background: var(--agm-swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .2s ease, background-color .25s ease;
}

.agftn3d-mg .agm-colour:not(.is-idle) .agm-swatch:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 10px 22px rgba(0, 0, 0, .35);
}

.agftn3d-mg .agm-swatch:active { transform: scale(.97); }

.agftn3d-mg .agm-swatch__key {
  position: absolute;
  top: 8px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.agftn3d-mg .agm-swatch.is-bad {
  box-shadow: 0 0 0 3px var(--mg-danger), 0 6px 16px rgba(0, 0, 0, .3);
  animation: agm-shake .35s ease;
}

.agftn3d-mg .agm-colour.is-idle .agm-swatch { cursor: default; }

/* ================================================================== *
 * 10. Compact layouts (small hosts / phones)
 * ================================================================== */

@container (max-height: 620px) {
  .agftn3d-mg .agm-panel { gap: 10px; padding: 14px 16px 12px; }
  .agftn3d-mg .agm-title { font-size: 19px; }
  .agftn3d-mg .agm-desc { font-size: 13px; }
  .agftn3d-mg .agm-game { gap: 10px; }
  .agftn3d-mg .agm-result { padding: 10px 6px; }
  .agftn3d-mg .agm-result__icon { width: 64px; height: 64px; }
  .agftn3d-mg .agm-result__title { font-size: 22px; }
}

@container (max-width: 460px) {
  .agftn3d-mg .agm-panel { padding: 16px 14px 12px; }
  .agftn3d-mg .agm-title { font-size: 20px; }
  .agftn3d-mg .agm-hud { gap: 8px; }
  .agftn3d-mg .agm-stat { min-width: 0; padding: 5px 10px; }
  .agftn3d-mg .agm-stat__value { font-size: 16px; }
  .agftn3d-mg .agm-ttt__grid,
  .agftn3d-mg .agm-catch__grid { gap: 6px; }
  .agftn3d-mg .agm-memory__grid { gap: 6px; }
  .agftn3d-mg .agm-quiz__card { padding: 14px; }
  .agftn3d-mg .agm-quiz__q { font-size: 16px; }
  .agftn3d-mg .agm-quiz__opt { font-size: 14px; padding: 10px 12px; }
  .agftn3d-mg .agm-colour__name { font-size: 19px; }
  .agftn3d-mg .agm-btn { padding: 10px 18px; }
}

/* ================================================================== *
 * 11. Keyframes
 * ================================================================== */

@keyframes agm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes agm-fade-out { to { opacity: 0; } }

@keyframes agm-pop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes agm-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes agm-slide {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes agm-pop-icon {
  from { opacity: 0; transform: scale(.4) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}

@keyframes agm-draw { to { stroke-dashoffset: 0; } }

@keyframes agm-deal {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to { opacity: 1; transform: none; }
}

@keyframes agm-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes agm-match {
  0% { transform: rotateY(180deg) scale(1); }
  45% { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}

@keyframes agm-win {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
  50% { box-shadow: 0 0 0 4px rgba(62, 207, 142, .35), 0 0 24px rgba(62, 207, 142, .35); }
}

@keyframes agm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@keyframes agm-shake-sm {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

@keyframes agm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@keyframes agm-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}

@keyframes agm-popup {
  from { opacity: 0; transform: translate(-50%, 60%) scale(.5); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes agm-caught {
  to { opacity: 0; transform: translate(-50%, -35%) scale(1.35) rotate(12deg); }
}

@keyframes agm-sink {
  to { opacity: 0; transform: translate(-50%, 70%) scale(.6); }
}

@keyframes agm-flash-good {
  0% { box-shadow: inset 0 0 0 4px var(--mg-success); background-color: rgba(62, 207, 142, .3); }
  100% { box-shadow: inset 0 0 0 0 transparent; background-color: transparent; }
}

@keyframes agm-flash-bad {
  0% { box-shadow: inset 0 0 0 4px var(--mg-danger); background-color: rgba(255, 93, 93, .3); transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  100% { box-shadow: inset 0 0 0 0 transparent; background-color: transparent; transform: none; }
}

@keyframes agm-penalty {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  20% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ================================================================== *
 * 12. Reduced motion
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .agftn3d-mg,
  .agftn3d-mg *,
  .agftn3d-mg *::before,
  .agftn3d-mg *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  /* Keep the essential state changes visible without motion. */
  .agftn3d-mg .agm-ttt__cell svg path,
  .agftn3d-mg .agm-ttt__cell svg circle { stroke-dashoffset: 0; }
}