/* ==========================================================================
   Game: GemFusion (match-3)
   Self-contained — every class is prefixed .gf-. The game panel is always a
   dark "stage" in both site themes. Gems are DOM nodes positioned with
   translate(col*100%, row*100%) on an 8x8 board.
   ========================================================================== */

.gf {
  --gf-bg: #14122e;
  --gf-tray: #0e0d24;
  --gf-card: rgba(255, 255, 255, .06);
  --gf-card-hover: rgba(255, 255, 255, .11);
  --gf-line: rgba(255, 255, 255, .12);
  --gf-text: #fff;
  --gf-sub: rgba(255, 255, 255, .72);
  --gf-good: #19c28f;
  --gf-bad: #ff5c8a;
  --gf-accent: var(--hot);
  --gf-jelly: 255, 105, 180;

  position: relative;
  margin: 10px 0 40px;
  padding: 36px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(58, 141, 255, .28), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(180, 92, 255, .38), transparent 60%),
    var(--gf-bg);
  color: var(--gf-text);
  isolation: isolate;
  min-height: 520px;
}
:root[data-theme="dark"] .gf { border: 1px solid var(--line); }


.gf-screen[hidden] { display: none !important; }
.gf-screen { animation: gf-fade .35s var(--ease); }
@keyframes gf-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.gf-ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Shared buttons ---------- */
.gf-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gf-text);
  font: 600 .875rem/1.2 var(--font);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.gf-ghost:hover { background: var(--gf-card-hover); }
.gf-ghost--danger { color: var(--gf-sub); }
.gf-ghost--danger.is-confirm { border-color: var(--gf-bad); color: var(--gf-bad); }

.gf-ico--off { display: none; }
.is-off > .gf-ico--on { display: none; }
.is-off > .gf-ico--off { display: block; }

.gf-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--gf-line);
  border-radius: 50%;
  background: var(--gf-card);
  color: var(--gf-text);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.gf-icon-btn:hover { background: var(--gf-card-hover); }

.gf .btn-pill { min-height: 46px; padding: 11px 24px; }
.gf .btn-pill:not(.btn-pill--hot) { background: var(--brand-soft); color: var(--night); }

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

/* ==========================================================================
   Screen 1: level select
   ========================================================================== */
.gf-home__head { display: flex; align-items: flex-start; gap: 22px; max-width: 760px; }

.gf-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  flex: none;
  width: 78px;
  height: 78px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(145deg, #2a1f6b, #4a2a8a);
  box-shadow: 0 12px 30px rgba(91, 61, 245, .4);
}
.gf-logo img { display: block; width: 100%; height: 100%; animation: gf-bob 2.4s ease-in-out infinite alternate; }
.gf-logo img:nth-child(2) { animation-delay: -.6s; }
.gf-logo img:nth-child(3) { animation-delay: -1.2s; }
.gf-logo img:nth-child(4) { animation-delay: -1.8s; }
@keyframes gf-bob { to { transform: translateY(-3px) scale(1.06); } }

.gf-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 216, 77, .14);
  color: var(--gf-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gf-title { margin: 0 0 8px; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.035em; line-height: 1.05; }
.gf-lead { margin: 0; color: var(--gf-sub); }

.gf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 28px 0 22px;
}
.gf-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gf-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-pill);
  background: var(--gf-card);
}
.gf-chip__label { color: var(--gf-sub); font-size: .78rem; font-weight: 500; }
.gf-chip strong { color: var(--gf-accent); font-size: 1rem; }
.gf-toolbar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.gf-worlds { display: grid; gap: 22px; }
.gf-world {
  --gf-w: #3a8dff;
  padding: 18px;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(var(--gf-wrgb, 58, 141, 255), .16), rgba(255, 255, 255, .03) 60%);
}
.gf-world--0 { --gf-wrgb: 58, 141, 255; }
.gf-world--1 { --gf-wrgb: 255, 120, 40; }
.gf-world--2 { --gf-wrgb: 120, 220, 255; }
.gf-world--3 { --gf-wrgb: 180, 92, 255; }
.gf-world--4 { --gf-wrgb: 255, 216, 77; }

.gf-world__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.gf-world__name { margin: 0; font-size: 1.1rem; letter-spacing: -.01em; }
.gf-world__stars { color: var(--gf-accent); font-size: .85rem; font-weight: 700; }
.gf-world__blurb { margin: 2px 0 14px; color: var(--gf-sub); font-size: .85rem; }

.gf-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gf-level {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  background: rgba(10, 10, 30, .35);
  color: var(--gf-text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.gf-level:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255, 216, 77, .55); background: rgba(255, 255, 255, .08); }
.gf-level.is-cleared { border-color: rgba(25, 194, 143, .5); }
.gf-level.is-locked { cursor: not-allowed; opacity: .5; }

.gf-level__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--gf-accent);
  color: var(--night);
  font-size: 1rem;
  font-weight: 700;
}
.gf-level.is-locked .gf-level__num { background: rgba(255, 255, 255, .14); color: var(--gf-text); }
.gf-level__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.gf-level__name { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.gf-level__goal { color: var(--gf-sub); font-size: .78rem; line-height: 1.4; }
.gf-level__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gf-line);
}
.gf-level__best { color: var(--gf-sub); font-size: .74rem; font-weight: 600; }

.gf-star { color: rgba(255, 255, 255, .22); font-size: 1rem; line-height: 1; }
.gf-star.is-on { color: var(--gf-accent); text-shadow: 0 0 12px rgba(255, 216, 77, .5); }

.gf-noscript { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(255, 92, 138, .15); }

/* ==========================================================================
   Screen 2: playing
   ========================================================================== */
.gf-play { position: relative; }

.gf-hud { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gf-hud__level { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gf-hud__world { color: var(--gf-accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gf-hud__level strong { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-hud__actions { display: flex; gap: 8px; margin-left: auto; }

.gf-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 560px);
  justify-content: center;
  align-items: start;
  gap: 24px;
}

.gf-side { display: flex; flex-direction: column; gap: 12px; }
.gf-panel {
  padding: 14px 16px;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  background: var(--gf-card);
}
.gf-panel__label {
  display: block;
  color: var(--gf-sub);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gf-moves { display: block; font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gf-panel--moves.is-low .gf-moves { color: var(--gf-bad); animation: gf-throb 1s ease-in-out infinite; }
@keyframes gf-throb { 50% { opacity: .6; } }
.gf-score { display: block; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }

.gf-meter {
  position: relative;
  height: 10px;
  margin-top: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
}
.gf-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b45cff, #3a8dff, var(--gf-accent));
  transition: width .5s var(--ease);
}
.gf-meter__mark {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #2a2850;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.gf-meter__mark::after { content: "\2605"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .45); font-size: 10px; font-style: normal; }
.gf-meter__mark.is-hit { background: var(--gf-accent); box-shadow: 0 0 10px rgba(255, 216, 77, .7); }
.gf-meter__mark.is-hit::after { color: var(--night); }
.gf-meter__mark[hidden] { display: none; }

.gf-goals { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.gf-goal { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.gf-goal__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
}
.gf-goal__icon img { width: 24px; height: 24px; }
.gf-goal__icon--score { color: var(--gf-accent); font-size: 1rem; }
.gf-goal__icon--crates { background: linear-gradient(135deg, #b77a3e, #7a4a1f); box-shadow: inset 0 0 0 2px #5b3412; }
.gf-goal__icon--jelly { background: rgba(var(--gf-jelly), .55); box-shadow: inset 0 0 0 2px rgba(var(--gf-jelly), .9); }
.gf-goal__text { flex: 1; min-width: 0; }
.gf-goal__count { font-variant-numeric: tabular-nums; }
.gf-goal.is-done .gf-goal__count { color: var(--gf-good); }
.gf-goal.is-done .gf-goal__text { color: var(--gf-sub); }

/* ---------- Board ---------- */
.gf-stage { min-width: 0; }
.gf-board {
  --gf-cell: 12.5%;
  position: relative;
  width: 100%;
  width: min(100%, max(300px, calc(100vh - 230px)));
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gf-tray);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 50px rgba(0, 0, 0, .45);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;
}
.gf-board:focus-visible { box-shadow: 0 0 0 3px var(--gf-accent), 0 22px 50px rgba(0, 0, 0, .45); }
@supports not (aspect-ratio: 1 / 1) {
  .gf-board { height: 0; padding-bottom: 100%; }
}

.gf-layer { position: absolute; inset: 0; pointer-events: none; }
.gf-cells { z-index: 1; }
.gf-gems { z-index: 2; }
.gf-blocks { z-index: 3; }
.gf-fx { z-index: 4; }

.gf-cell, .gf-gem, .gf-void, .gf-crate, .gf-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--gf-cell);
  height: var(--gf-cell);
}
.gf-cell { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .05); }
.gf-cell--alt { background: rgba(255, 255, 255, .095); }
.gf-cell.is-void { background: transparent; box-shadow: none; }
.gf-cell::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 22%;
  opacity: 0;
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.gf-cell[data-jelly="1"]::after { opacity: 1; background: rgba(var(--gf-jelly), .32); box-shadow: inset 0 0 0 2px rgba(var(--gf-jelly), .6); }
.gf-cell[data-jelly="2"]::after { opacity: 1; background: rgba(var(--gf-jelly), .58); box-shadow: inset 0 0 0 3px rgba(var(--gf-jelly), .95), inset 0 0 12px rgba(255, 255, 255, .25); }
.gf-cell.is-splat::after { animation: gf-splat .4s var(--ease); }
@keyframes gf-splat { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }

.gf-void { background: var(--gf-tray); }

.gf-gem { transition-property: transform; transition-timing-function: cubic-bezier(.3, .1, .45, 1); will-change: transform; }
.gf-gem.is-falling { transition-timing-function: cubic-bezier(.55, .05, .75, .4); }
.gf-gem__svg {
  display: block;
  width: 86%;
  height: 86%;
  margin: 7%;
  overflow: visible;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35));
  transition: transform .15s var(--ease);
}
.gf-gem[data-t="6"] .gf-gem__svg { animation: gf-spin 6s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .6)); }
@keyframes gf-spin { to { transform: rotate(360deg); } }

/* Special gems: line (h / v) and blast (b) overlays */
.gf-gem[data-s="h"]::after, .gf-gem[data-s="v"]::after {
  content: "";
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow: 0 0 10px #fff;
  animation: gf-shimmer 1.2s ease-in-out infinite alternate;
}
.gf-gem[data-s="h"]::after { left: 4%; right: 4%; top: 45%; height: 10%; }
.gf-gem[data-s="v"]::after { top: 4%; bottom: 4%; left: 45%; width: 10%; background: linear-gradient(180deg, transparent, #fff 20%, #fff 80%, transparent); }
.gf-gem[data-s="h"]::before, .gf-gem[data-s="v"]::before {
  content: "";
  position: absolute;
  inset: 30%;
  border: solid #fff;
  border-width: 0;
  opacity: .9;
}
.gf-gem[data-s="h"]::before { inset: 38% 6%; border-left-width: 3px; border-right-width: 3px; }
.gf-gem[data-s="v"]::before { inset: 6% 38%; border-top-width: 3px; border-bottom-width: 3px; }
@keyframes gf-shimmer { from { opacity: .55; } to { opacity: 1; } }

.gf-gem[data-s="b"]::after {
  content: "";
  position: absolute;
  inset: 4%;
  border: 3px dashed rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 255, 255, .7), inset 0 0 10px rgba(255, 255, 255, .5);
  animation: gf-spin 4s linear infinite;
}

.gf-gem.is-selected .gf-gem__svg { transform: scale(1.12); filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 2px #fff); }
.gf-gem.is-selected::before { /* keep line overlays visible */ }
.gf-gem.is-hint .gf-gem__svg { animation: gf-wiggle 1s ease-in-out infinite; }
@keyframes gf-wiggle {
  0%, 60%, 100% { transform: none; }
  15% { transform: rotate(-12deg) scale(1.08); }
  30% { transform: rotate(12deg) scale(1.08); }
  45% { transform: rotate(-6deg); }
}
.gf-gem.is-nope .gf-gem__svg { animation: gf-nope .32s ease; }
@keyframes gf-nope { 25% { transform: translateX(-8%); } 50% { transform: translateX(8%); } 75% { transform: translateX(-4%); } }
.gf-gem.is-land .gf-gem__svg { animation: gf-land .22s ease-out; transform-origin: 50% 100%; }
@keyframes gf-land { 40% { transform: scale(1.08, .9); } 100% { transform: none; } }
.gf-gem.is-born .gf-gem__svg { animation: gf-born .5s var(--ease); }
@keyframes gf-born { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: none; } }
.gf-gem.is-pop { z-index: 2; animation: gf-pop .38s ease-in forwards; }
@keyframes gf-pop {
  0% { opacity: 1; filter: brightness(1); }
  35% { opacity: 1; filter: brightness(2.2); }
  100% { opacity: 0; filter: brightness(2.5); }
}
.gf-gem.is-pop .gf-gem__svg { animation: gf-pop-scale .38s ease-in forwards; }
@keyframes gf-pop-scale { 35% { transform: scale(1.2); } 100% { transform: scale(.1) rotate(40deg); } }

/* Crates */
.gf-crate { transition: opacity .3s, transform .3s; }
.gf-crate::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 14%;
  background:
    linear-gradient(45deg, transparent 44%, rgba(70, 36, 10, .7) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(70, 36, 10, .7) 44% 56%, transparent 56%),
    repeating-linear-gradient(180deg, #c98a4b 0 30%, #a86a33 30% 33.3%);
  box-shadow: inset 0 0 0 3px #6b3d14, 0 3px 4px rgba(0, 0, 0, .4);
}
.gf-crate[data-hp="2"]::before {
  background:
    linear-gradient(90deg, transparent 18%, #7c8aa3 18% 26%, transparent 26% 74%, #7c8aa3 74% 82%, transparent 82%),
    linear-gradient(45deg, transparent 44%, rgba(70, 36, 10, .7) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(70, 36, 10, .7) 44% 56%, transparent 56%),
    repeating-linear-gradient(180deg, #a26a35 0 30%, #82501f 30% 33.3%);
  box-shadow: inset 0 0 0 3px #b8c4d9, inset 0 0 0 5px #4b2a0b, 0 3px 4px rgba(0, 0, 0, .4);
}
.gf-crate.is-hit { animation: gf-nope .3s ease; }
.gf-crate.is-broken { opacity: 0; transform: scale(1.3) rotate(8deg); }

/* Keyboard cursor */
.gf-cursor {
  z-index: 5;
  border: 3px solid var(--gf-accent);
  border-radius: 14px;
  box-shadow: 0 0 12px rgba(255, 216, 77, .6);
  pointer-events: none;
  transition: transform .12s var(--ease);
}
.gf-cursor[hidden] { display: none; }

/* Effects */
.gf-beam {
  position: absolute;
  background: linear-gradient(var(--gf-dir, 180deg), transparent, rgba(255, 255, 255, .95) 35%, #fff 50%, rgba(255, 255, 255, .95) 65%, transparent);
  box-shadow: 0 0 24px #fff;
  animation: gf-beam .55s ease-out forwards;
}
.gf-beam--h { left: 0; right: 0; top: calc(var(--gf-pos) * 12.5%); height: 12.5%; }
.gf-beam--v { top: 0; bottom: 0; left: calc(var(--gf-pos) * 12.5%); width: 12.5%; --gf-dir: 90deg; }
@keyframes gf-beam {
  0% { opacity: 0; transform: scale(.2, 1); }
  20% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(1, .2); }
}
.gf-beam--v { animation-name: gf-beam-v; }
@keyframes gf-beam-v {
  0% { opacity: 0; transform: scale(1, .2); }
  20% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(.2, 1); }
}

.gf-blast {
  position: absolute;
  left: calc((var(--gf-c) - var(--gf-rad)) * 12.5%);
  top: calc((var(--gf-r) - var(--gf-rad)) * 12.5%);
  width: calc((var(--gf-rad) * 2 + 1) * 12.5%);
  height: calc((var(--gf-rad) * 2 + 1) * 12.5%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 216, 77, .9) 40%, rgba(255, 93, 122, .5) 60%, transparent 70%);
  animation: gf-blast .55s ease-out forwards;
}
@keyframes gf-blast { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.5); } }

.gf-prism-fx {
  position: absolute;
  left: calc(var(--gf-c) * 12.5% + 6.25%);
  top: calc(var(--gf-r) * 12.5% + 6.25%);
  width: 300%;
  aspect-ratio: 1;
  margin: -150% 0 0 -150%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, .7) 34%, rgba(180, 92, 255, .4) 40%, transparent 48%);
  animation: gf-ring .6s ease-out forwards;
}
@keyframes gf-ring { 0% { opacity: 1; transform: scale(.05); } 100% { opacity: 0; transform: scale(1); } }

.gf-pop {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(.85rem, 2.4vw, 1.1rem);
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .4);
  white-space: nowrap;
  animation: gf-rise .9s ease-out forwards;
}
.gf-pop.is-hot { color: var(--gf-accent); font-size: clamp(1rem, 2.8vw, 1.3rem); }
@keyframes gf-rise {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

.gf-combo {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #b45cff, #ff5d7a);
  box-shadow: 0 10px 30px rgba(180, 92, 255, .5);
  color: #fff;
  font-size: clamp(1.05rem, 3.6vw, 1.6rem);
  font-weight: 800;
  white-space: nowrap;
  animation: gf-combo 1s var(--ease) forwards;
}
@keyframes gf-combo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.95); }
}

.gf-banner {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: rgba(14, 13, 36, .9);
  box-shadow: 0 0 0 2px var(--gf-accent), 0 14px 40px rgba(0, 0, 0, .5);
  color: #fff;
  font-size: clamp(.95rem, 3vw, 1.25rem);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: gf-fade .3s var(--ease);
}
.gf-banner[hidden] { display: none; }

.gf-tip { margin: 12px 0 0; color: var(--gf-sub); font-size: .82rem; text-align: center; }

/* Pause overlay hides the board */
.gf-play.is-paused .gf-layout { filter: blur(12px); pointer-events: none; user-select: none; }
.gf-paused { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; }
.gf-paused[hidden] { display: none; }
.gf-paused__card {
  max-width: 400px;
  padding: 28px;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-md);
  background: rgba(20, 18, 46, .95);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  text-align: center;
}
.gf-paused__title { margin: 0 0 6px; font-size: 1.6rem; }
.gf-paused__card p { margin: 0 0 20px; color: var(--gf-sub); font-size: .9rem; }
.gf-paused__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ==========================================================================
   Screen 3: results
   ========================================================================== */
.gf-result { max-width: 640px; margin: 0 auto; padding: 10px 0; text-align: center; }
.gf-result__stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 8px; }
.gf-star--big { font-size: clamp(3rem, 9vw, 4.25rem); opacity: 0; animation: gf-star-in .5s var(--ease) forwards; }
@keyframes gf-star-in {
  from { opacity: 0; transform: scale(.3) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}
.gf-result__title { margin: 0 0 6px; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.gf-result__new {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--gf-accent);
  color: var(--night);
  font-size: .8rem;
  font-weight: 700;
}
.gf-result__new[hidden] { display: none; }
.gf-result__text { margin: 0 auto 24px; max-width: 480px; color: var(--gf-sub); }
.gf-result__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 26px; }
.gf-result__stats div { padding: 14px 8px; border: 1px solid var(--gf-line); border-radius: var(--radius-sm); background: var(--gf-card); }
.gf-result__stats dt { color: var(--gf-sub); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.gf-result__stats dd { margin: 2px 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gf-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gf-result__actions [hidden] { display: none; }

/* ==========================================================================
   How-to-play (site theme)
   ========================================================================== */
.gf-guide { margin: 0 0 56px; }
.gf-guide .section-head__title { margin-bottom: 22px; }
.gf-guide__item {
  height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.gf-guide__item h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.gf-guide__item p { margin: 0; color: var(--sub); font-size: .9rem; }
.gf-guide__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--onbrand);
  font-weight: 700;
}
.gf-guide__back { margin: 24px 0 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .gf-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf-layout { grid-template-columns: minmax(0, 560px); gap: 14px; }
  .gf-side { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; order: -1; }
  .gf-panel { padding: 10px 12px; }
  .gf-moves { font-size: 1.8rem; }
  .gf-score { font-size: 1.2rem; }
}

@media (max-width: 767.98px) {
  .gf { padding: 24px 20px; min-height: 0; }
  .gf-result__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .gf { margin-left: -4px; margin-right: -4px; padding: 20px 12px; border-radius: var(--radius-md); }
  .gf-home__head { flex-direction: column; gap: 16px; }
  .gf-logo { width: 64px; height: 64px; padding: 8px; border-radius: 16px; }
  .gf-toolbar { flex-direction: column; align-items: stretch; }
  .gf-toolbar__actions .gf-ghost { flex: 1; }
  .gf-world { padding: 14px 12px; }
  .gf-levels { gap: 8px; }
  .gf-level { padding: 11px; }
  .gf-hud { margin-bottom: 10px; gap: 8px; }
  .gf-hud__level strong { font-size: .98rem; }
  .gf-icon-btn { width: 40px; height: 40px; }
  .gf-side { grid-template-columns: auto minmax(0, 1fr); }
  .gf-panel--goals { grid-column: 1 / -1; }
  .gf-goals { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
  .gf-goal { font-size: .82rem; gap: 6px; }
  .gf-goal__icon { width: 24px; height: 24px; }
  .gf-goal__icon img { width: 20px; height: 20px; }
  .gf-board { border-radius: 12px; }
  .gf-cursor { border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .gf-logo img, .gf-gem[data-t="6"] .gf-gem__svg, .gf-gem[data-s="b"]::after,
  .gf-gem[data-s="h"]::after, .gf-gem[data-s="v"]::after, .gf-panel--moves.is-low .gf-moves { animation: none; }
  .gf-gem.is-hint .gf-gem__svg { animation: none; transform: scale(1.12); filter: drop-shadow(0 0 6px #fff); }
  .gf-gem.is-pop, .gf-gem.is-pop .gf-gem__svg { animation-duration: .12s; }
  .gf-beam, .gf-blast, .gf-prism-fx { animation-duration: .25s; }
  .gf-star--big { opacity: 1; animation: none; }
  .gf-screen { animation: none; }
}