/* Glow Match (DECISIONS.md 228–229, 232–236; docs/GLOW-MATCH-PLAN.md).
   Classified THEMEABLE (RULES.md): the stage is the brand's ground, the board its paper, the pieces its six wheel
   colours drawn as six product shapes (the shape keeps two close colours apart), the buttons its button pair. The
   material is the house toolkit (DESIGN-PRINCIPLES.md): one key light from the upper left, a broad soft highlight
   plus a small hard sparkle, colour ramps, a contact shadow. Every class is gm-* (the namespace rule). A piece's
   transform belongs to GSAP (its place on the board); anything else that moves lives on a child or a sibling. */

.gm-head{ padding:2px 0 10px 52px; min-height:50px; display:flex; flex-direction:column; justify-content:center; }
.gm-headline{ margin:0; font:600 19px/1.15 var(--t-font); letter-spacing:-.3px; color:var(--t-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-subline{ margin:2px 0 0; font:400 12.5px/1.35 var(--t-font); color:var(--t-ink2); }

.gm-fit{ flex:1; min-height:0; position:relative; margin-bottom:8px; }
.gm-canvas{ --gm-tap:calc(41px / var(--gm-s, 1)); position:absolute; left:0; top:0; width:343px; height:500px; border-radius:var(--t-r-card); overflow:hidden; isolation:isolate;
  background:var(--t-bg2); -webkit-user-select:none; user-select:none; box-shadow:0 10px 16px -10px rgba(0,0,0,.35); }
.gm-bg{ position:absolute; inset:0;
  background:radial-gradient(90% 60% at 18% 0%, color-mix(in srgb, #FFF3E4 60%, transparent) 0%, transparent 70%),
             linear-gradient(180deg, color-mix(in srgb, var(--t-bg) 70%, #FFF3E4) 0%, var(--t-bg) 55%, var(--t-bg2) 100%); }
.gm-floor{ position:absolute; left:50%; bottom:-80px; width:520px; height:200px; margin-left:-260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--t-floor) 85%, transparent), transparent); }
.gm-screen{ position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; padding:12px 12px 14px; z-index:2; }
.gm-fx{ position:absolute; inset:0; pointer-events:none; z-index:6; }

/* ---- buttons ---- */
.gm-cta{ position:relative; overflow:hidden; isolation:isolate; width:100%; height:52px; min-height:var(--gm-tap); flex:none; border:0; cursor:pointer;
  border-radius:var(--t-r-btn); color:var(--t-btn-ink); background:var(--t-btn); font:800 16.5px/1 var(--t-font);
  box-shadow:inset 0 1.5px 0 rgba(255,243,228,.28), 0 12px 20px -10px color-mix(in srgb, var(--t-btn) 70%, transparent);
  -webkit-tap-highlight-color:transparent; transition:transform .14s cubic-bezier(.23,1,.32,1); }
.gm-cta:active{ transform:scale(.97); }
.gm-cta-t{ position:relative; z-index:1; }
.gm-sheen{ position:absolute; top:0; bottom:0; left:-60%; width:45%; transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(100deg, rgba(255,243,228,0), rgba(255,243,228,.32), rgba(255,243,228,0)); }
.gm-ghost{ height:52px; min-height:var(--gm-tap); border:0; cursor:pointer; border-radius:var(--t-r-btn); font:700 15px/1.1 var(--t-font); color:var(--t-ink); background:var(--t-paper);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--t-ink) 22%, transparent), 0 8px 16px -10px rgba(0,0,0,.35); -webkit-tap-highlight-color:transparent;
  transition:transform .14s cubic-bezier(.23,1,.32,1); }
.gm-ghost:active{ transform:scale(.97); }
.gm-foot{ margin-top:auto; flex:none; }
.gm-foot.is-pair{ display:flex; gap:10px; }
.gm-foot.is-pair > *{ flex:1 1 0; min-width:0; }

/* ---- words on the stage ---- */
.gm-hero{ flex:none; text-align:center; padding:4px 6px 0; }
.gm-eyebrow{ margin:0; font:800 12px/1.3 var(--t-font); letter-spacing:1.4px; text-transform:uppercase; color:var(--gm-dim, var(--t-dim)); }
.gm-title{ margin:6px 0 6px; font:800 24px/1.12 var(--t-font); letter-spacing:-.5px; color:var(--t-ink); text-wrap:balance; }
.gm-rules{ margin:0 auto; max-width:290px; font:500 13px/1.42 var(--t-font); color:var(--gm-dim, var(--t-dim)); text-wrap:balance; }
.gm-small{ margin:0; font:800 10.5px/1.3 var(--t-font); letter-spacing:1.1px; text-transform:uppercase; color:var(--gm-dim, var(--t-dim)); }

/* ---- the map: the routine, step 1 at the bottom ---- */
.gm-path{ position:relative; flex:1 1 auto; min-height:0; margin:0; padding:0; list-style:none; display:flex; flex-direction:column-reverse; justify-content:center; gap:6px; }
.gm-path::before{ content:''; position:absolute; left:50%; top:12%; bottom:12%; width:0; border-left:3px dotted color-mix(in srgb, var(--t-ink) 18%, transparent); }
.gm-node{ position:relative; display:flex; align-items:center; gap:10px; width:182px; }
.gm-node:nth-child(odd){ margin-right:auto; margin-left:22px; }
.gm-node:nth-child(even){ margin-left:auto; margin-right:22px; flex-direction:row-reverse; text-align:right; }
.gm-node-b{ position:relative; width:52px; height:52px; min-width:var(--gm-tap); min-height:var(--gm-tap); flex:none; border:0; border-radius:50%; cursor:pointer; padding:0;
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--t-btn) 55%, #FFF3E4) 0%, var(--t-btn) 58%, color-mix(in srgb, var(--t-btn) 75%, #000) 100%);
  box-shadow:inset 0 -3px 4px rgba(255,243,228,.25), 0 8px 12px -6px rgba(0,0,0,.45); -webkit-tap-highlight-color:transparent;
  transition:transform .14s cubic-bezier(.23,1,.32,1); }
.gm-node-b:active{ transform:scale(.94); }
.gm-node-n{ font:900 20px/1 var(--t-font); color:var(--t-btn-ink); }
.gm-node.is-done .gm-node-b{ background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--t-coin) 50%, #FFF3E4) 0%, var(--t-coin) 58%, color-mix(in srgb, var(--t-coin) 72%, #000) 100%); }
.gm-node.is-done .gm-node-n{ color:#111114; }
.gm-node.is-locked .gm-node-b{ background:var(--t-paper); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--t-ink) 18%, transparent); cursor:default; }
.gm-node.is-locked .gm-node-n{ color:var(--gm-dim, var(--t-dim)); }
.gm-node.is-next .gm-node-b::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:2.5px solid var(--t-btn); animation:gmNext 1.2s ease-out infinite; }
@keyframes gmNext{ from{ opacity:.9; transform:scale(.92); } to{ opacity:0; transform:scale(1.25); } }
.gm-node-t{ font:800 15px/1.15 var(--t-font); color:var(--t-ink); }
.gm-node.is-locked .gm-node-t{ color:var(--gm-dim, var(--t-dim)); }
.gm-node .gm-stars{ position:absolute; top:-6px; left:4px; }
.gm-node:nth-child(even) .gm-stars{ left:auto; right:4px; }
.gm-node .gm-star{ width:14px; height:14px; }
/* Tara perches on the next step's button, never past the stage's edge */
.gm-tara-map{ position:absolute; width:40px; height:40px; top:-30px; left:32px; z-index:2; }
.gm-node:nth-child(even) .gm-tara-map{ left:auto; right:32px; }
.gm-tara{ pointer-events:none; }
.gm-tara svg{ display:block; width:100%; height:100%; }

/* stars */
.gm-stars{ display:inline-flex; gap:2px; }
.gm-star{ width:34px; height:34px; fill:color-mix(in srgb, var(--t-ink) 12%, transparent); }
.gm-star.is-on{ fill:var(--t-coin); filter:drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

/* ---- a level: the goal card, the moves, Tara ---- */
.gm-hud{ flex:none; display:flex; align-items:stretch; gap:8px; height:62px; }
.gm-goal{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:5px 10px; border-radius:14px; background:var(--t-paper);
  box-shadow:0 6px 12px -8px rgba(0,0,0,.35); }
.gm-goal-t{ margin:0; font:800 10.5px/1.2 var(--t-font); letter-spacing:.9px; text-transform:uppercase; color:var(--gm-dim, var(--t-dim)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gm-goal-row{ display:flex; gap:10px; }
.gm-gi{ display:flex; align-items:center; gap:3px; }
.gm-gi-i{ display:block; width:30px; height:30px; }
.gm-gi-i svg{ display:block; width:100%; height:100%; }
.gm-gi-n{ font:900 17px/1 var(--t-font); color:var(--t-ink); min-width:18px; }
.gm-gi.is-done .gm-gi-n{ color:var(--t-ink); }
.gm-moves{ width:62px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:14px; background:var(--t-paper); box-shadow:0 6px 12px -8px rgba(0,0,0,.35); }
.gm-moves-n{ font:900 24px/1 var(--t-font); color:var(--t-ink); }
.gm-moves-t{ font:700 10.5px/1.2 var(--t-font); color:var(--gm-dim, var(--t-dim)); text-transform:uppercase; letter-spacing:.8px; }
/* the last 5 moves: the number warms (the brand's button colour is always readable on its paper here, [I]) */
.gm-moves.is-late{ box-shadow:inset 0 0 0 2.5px var(--t-btn), 0 6px 12px -8px rgba(0,0,0,.35); }
.gm-tara-hud{ width:40px; height:40px; align-self:center; flex:none; }

/* ---- the board: the brand's paper as a tray, 7 x 8 pieces of 44 ---- */
.gm-boardwrap{ flex:none; align-self:center; padding:6px; border-radius:var(--t-r-card); margin:auto 0;
  background:color-mix(in srgb, var(--t-paper) 82%, var(--t-bg2)); box-shadow:inset 0 2px 6px rgba(0,0,0,.12), 0 14px 22px -16px rgba(0,0,0,.45); }
.gm-board{ position:relative; width:308px; height:352px; touch-action:none; cursor:pointer;
  background-image:linear-gradient(45deg, color-mix(in srgb, var(--t-ink) 4%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--t-ink) 4%, transparent) 75%),
                   linear-gradient(45deg, color-mix(in srgb, var(--t-ink) 4%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--t-ink) 4%, transparent) 75%);
  background-size:88px 88px; background-position:0 0, 44px 44px; border-radius:calc(var(--t-r-card) - 6px); }
.gm-defs{ position:absolute; width:0; height:0; }
.gm-layer, .gm-bfx{ position:absolute; inset:0; }
.gm-bfx{ pointer-events:none; z-index:3; }
.gm-p{ position:absolute; left:0; top:0; width:44px; height:44px; padding:2px; box-sizing:border-box; will-change:transform; pointer-events:none; }
.gm-p svg{ display:block; width:100%; height:100%; overflow:visible; }
.gm-p.is-spent svg{ animation:gmSpent .7s ease-in-out infinite alternate; transform-origin:50% 55%; }
@keyframes gmSpent{ from{ transform:scale(.94); } to{ transform:scale(1.06); } }
.gm-p.is-hint svg{ filter:drop-shadow(0 0 5px var(--t-btn)); }
.gm-sel{ position:absolute; left:0; top:0; width:44px; height:44px; border-radius:12px; opacity:0; z-index:2; pointer-events:none;
  box-shadow:0 0 0 2.5px var(--t-btn), 0 0 14px 2px color-mix(in srgb, var(--t-btn) 45%, transparent); transition:opacity .12s ease-out; }
.gm-sel.is-on{ opacity:1; }
.gm-tip{ flex:none; margin:0; text-align:center; font:600 12.5px/1.35 var(--t-font); color:var(--gm-dim, var(--t-dim)); text-wrap:balance; }

/* effects */
.gm-beam{ position:absolute; left:0; top:0; border-radius:7px; background:linear-gradient(90deg, transparent, #FFF3E4 18%, #FFFFFF 50%, #FFF3E4 82%, transparent);
  box-shadow:0 0 16px 4px rgba(255,243,228,.8); }
.gm-beam.is-h{ width:308px; height:14px; }
.gm-beam.is-v{ width:14px; height:352px; background:linear-gradient(180deg, transparent, #FFF3E4 18%, #FFFFFF 50%, #FFF3E4 82%, transparent); }
.gm-blast{ position:absolute; left:0; top:0; border-radius:50%; background:radial-gradient(closest-side, rgba(255,243,228,.95), rgba(255,200,61,.45) 55%, transparent); }
.gm-bolt{ position:absolute; left:0; top:0; height:3px; border-radius:2px; background:linear-gradient(90deg, #FFFFFF, #FFC83D); box-shadow:0 0 6px 1px rgba(255,243,228,.9); }
.gm-made{ position:absolute; left:0; top:0; width:44px; height:44px; border-radius:50%; border:3px solid #FFF3E4; box-shadow:0 0 10px rgba(255,243,228,.9); }
.gm-flash{ position:absolute; inset:0; background:#FFF3E4; }
.gm-spark{ position:absolute; width:12px; height:12px; }
.gm-fly{ position:absolute; width:44px; height:44px; padding:2px; box-sizing:border-box; z-index:8; }
.gm-fly svg{ display:block; width:100%; height:100%; }
/* chain words and the goal stamp: the brand's button pair, so they read on any board */
.gm-word, .gm-stamp{ position:absolute; left:0; right:0; margin:0 auto; width:max-content; padding:6px 16px; border-radius:999px; z-index:9;
  font:900 26px/1.1 var(--t-font); color:var(--t-btn-ink); background:var(--t-btn); box-shadow:0 10px 18px -8px rgba(0,0,0,.45); }
.gm-word{ top:46%; }
.gm-stamp{ top:40%; font-size:34px; padding:8px 22px; }

/* ---- the result ---- */
.gm-rcard{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px 16px; text-align:center;
  border-radius:var(--t-r-card); background:var(--t-paper); box-shadow:0 22px 30px -20px rgba(0,0,0,.5); perspective:600px; }
.gm-rtitle{ margin:0; font:900 30px/1.08 var(--t-font); letter-spacing:-.6px; color:var(--t-ink); }
.gm-rline{ margin:0; max-width:270px; font:500 14px/1.4 var(--t-font); color:var(--gm-dim, var(--t-dim)); text-wrap:balance; }
.gm-step{ width:100%; max-width:280px; padding:12px 14px; border-radius:16px; background:color-mix(in srgb, var(--t-bg) 70%, var(--t-paper)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t-ink) 8%, transparent); }
.gm-step-n{ margin:2px 0; font:900 22px/1.1 var(--t-font); color:var(--t-ink); }
.gm-step-l{ margin:0; font:500 13px/1.4 var(--t-font); color:var(--gm-dim, var(--t-dim)); }
/* the routine so far: five dots with their step names, the done ones in the coin colour */
.gm-prog-t{ margin-top:6px; }
.gm-prog{ display:flex; gap:6px; justify-content:center; }
.gm-pdot{ display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; }
.gm-pdot::before{ content:''; width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--t-ink) 22%, transparent); }
.gm-pdot.is-done::before{ background:var(--t-coin); box-shadow:inset 0 -2px 2px rgba(0,0,0,.2); }
.gm-pdot.is-now::before{ box-shadow:0 0 0 2.5px var(--t-btn); }
.gm-pdot.is-done.is-now::before{ box-shadow:inset 0 -2px 2px rgba(0,0,0,.2), 0 0 0 2.5px var(--t-btn); }
.gm-pdot-t{ font:650 10.5px/1.1 var(--t-font); color:var(--t-ink); white-space:nowrap; }
.gm-tara-end{ position:absolute; top:10px; right:10px; width:52px; height:52px; }
.gm-coin{ flex:none; margin:0; padding:8px 12px; border-radius:12px; text-align:center; font:500 12px/1.4 var(--t-font); color:var(--gm-dim, var(--t-dim));
  background:var(--t-paper); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t-ink) 10%, transparent); }
.gm-coin-t{ margin:0; }
/* a guest: the truth and the way to start earning, side by side in the same strip */
.gm-coin.is-guest{ display:flex; align-items:center; gap:10px; padding:6px 6px 6px 12px; text-align:left; }
.gm-coin.is-guest .gm-coin-t{ flex:1 1 auto; min-width:0; }
.gm-save{ flex:none; height:42px; min-height:var(--gm-tap); padding:0 14px; border:0; cursor:pointer; border-radius:var(--t-r-btn); font:700 13.5px/1.1 var(--t-font);
  color:var(--t-btn-ink); background:var(--t-btn); -webkit-tap-highlight-color:transparent; transition:transform .14s cubic-bezier(.23,1,.32,1); }
.gm-save:active{ transform:scale(.97); }

/* confetti */
.gm-cf{ position:absolute; left:50%; top:30%; width:9px; height:9px; }
.gm-cf.is-star{ width:14px; height:14px; }
.gm-cf.is-star svg{ width:100%; height:100%; fill:currentColor; }

@media (prefers-reduced-motion: reduce){
  .gm-sheen, .gm-node.is-next .gm-node-b::after{ display:none; }
  .gm-p.is-spent svg{ animation:none; }
  .gm-cta, .gm-ghost, .gm-save, .gm-node-b{ transition:opacity .15s ease; }
  .gm-cta:active, .gm-ghost:active, .gm-save:active, .gm-node-b:active{ transform:none; }
}