/* Level page, XP pops, level-up overlay, unlock effects, Settings → Orb & effects. Colours only from the theme tokens. */
/* ---------- XP bar + Home card ---------- */
.gm-bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--a1) 14%, transparent); overflow: hidden; border: 1px solid var(--edge-2); }
.gm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); box-shadow: 0 0 calc(12px * var(--glow-k)) var(--a1); transition: width .8s cubic-bezier(.2, .8, .2, 1); position: relative; }
.gm-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent); transform: translateX(-100%); animation: gm-shine calc(3.2s / max(var(--motion-k), .1)) ease-in-out infinite; }
@keyframes gm-shine { 60%, 100% { transform: translateX(100%); } }
.gm-home { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.gm-home:hover, .gm-home:focus-visible { border-color: var(--a1); box-shadow: var(--glow), var(--shadow); outline: none; }
.gm-title-txt { font: 700 calc(12px * var(--text-k)) var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--a3); text-shadow: 0 0 calc(10px * var(--glow-k)) var(--a1); }

/* ---------- "+XP" pop ---------- */
.gm-float { position: fixed; z-index: 96; right: 16px; top: calc(68px + env(safe-area-inset-top)); pointer-events: none; padding: 8px 14px; border-radius: 99px;
  font: 700 15px var(--mono); letter-spacing: .06em; color: var(--bg); background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: var(--glow), var(--shadow);
  animation: gm-float 1.8s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes gm-float { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

/* ---------- level-up overlay ---------- */
.gm-up { position: fixed; inset: 0; z-index: 98; display: flex; flex-direction: column; align-items: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--a2) 22%, rgb(0 0 0 / .7)), rgb(0 0 0 / .82) 70%); animation: rise .35s ease; transition: opacity .4s; }
.gm-up.gone { opacity: 0; pointer-events: none; }
.gm-up-rays { position: fixed; inset: -50vmax; pointer-events: none; opacity: .32;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--a1) 55%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 45%); mask-image: radial-gradient(circle, #000 8%, transparent 45%); animation: spin calc(40s / max(var(--motion-k), .1)) linear infinite; }
.gm-up-card { position: relative; width: min(420px, 100%); margin: auto 0; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: gm-zoom .6s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes gm-zoom { from { transform: scale(.6); opacity: 0; } }
.gm-up-ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-content: center; position: relative;
  background: radial-gradient(circle, color-mix(in srgb, var(--a1) 30%, transparent), transparent 70%); border: 2px solid var(--a1); box-shadow: var(--glow), inset 0 0 30px color-mix(in srgb, var(--a1) 40%, transparent); }
.gm-up-ring::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed var(--a2); animation: spin calc(10s / max(var(--motion-k), .1)) linear infinite; }
.gm-up-ring small { font: 600 11px var(--mono); letter-spacing: .3em; color: var(--muted); }
.gm-up-num { font: 700 64px / 1 var(--mono); color: var(--a3); text-shadow: 0 0 24px var(--a1), 0 0 60px var(--a2); }
.gm-up-title { position: relative; font: 700 clamp(22px, 7vw, 30px) var(--mono); letter-spacing: .28em; padding-left: .28em; color: var(--text); text-shadow: 0 0 calc(20px * var(--glow-k)) var(--a1); }
.gm-up-title::before, .gm-up-title::after { content: attr(data-text); position: absolute; inset: 0; padding-left: .28em; opacity: .7; mix-blend-mode: screen; animation: gm-glitch 2.4s steps(1) infinite; }
.gm-up-title::before { color: var(--a1); transform: translateX(-2px); }
.gm-up-title::after { color: var(--a2); transform: translateX(2px); animation-delay: -1.2s; }
@keyframes gm-glitch { 0%, 88%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } 90% { clip-path: inset(20% 0 55% 0); transform: translateX(-5px); } 93% { clip-path: inset(60% 0 10% 0); transform: translateX(5px); } 96% { clip-path: inset(40% 0 35% 0); transform: translateX(-3px); } }
.gm-up-got { width: 100%; text-align: left; }
.gm-up-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gm-up-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--edge-2); background: color-mix(in srgb, var(--a1) 7%, transparent); animation: rise .4s ease both; }
.gm-up-list li:nth-child(2) { animation-delay: .08s; } .gm-up-list li:nth-child(3) { animation-delay: .16s; } .gm-up-list li:nth-child(n+4) { animation-delay: .24s; }
.gm-ico { font-size: 20px; flex: none; }

/* ---------- Level page ---------- */
.gm-player { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; overflow: hidden; }
.gm-player::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--a2) 10%, transparent) 50%, transparent 70%); }
.gm-avatar { position: relative; width: 132px; flex: none; margin: 0 auto; }
.gm-lvl { position: absolute; right: -4px; bottom: 2px; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; font: 700 17px var(--mono); color: var(--bg); background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: var(--glow); }
.gm-player-main { min-width: min(260px, 100%); display: flex; flex-direction: column; gap: 6px; }
.gm-name { margin: 0; font: 700 calc(26px * var(--text-k)) var(--mono); letter-spacing: .12em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.gm-stats .stat { min-width: 0; }
.gm-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; margin-top: 12px; }
.gm-badge { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 10px 12px; border-radius: 16px; border: 1px solid var(--edge-2); background: color-mix(in srgb, var(--text) 3%, transparent); opacity: .62; min-width: 0; }
.gm-badge b { font-size: calc(13.5px * var(--text-k)); }
.gm-badge small { font-size: calc(11.5px * var(--text-k)); line-height: 1.3; }
.gm-badge-ico { font-size: 30px; line-height: 1.1; filter: grayscale(1); margin-bottom: 4px; }
.gm-badge.on { opacity: 1; border-color: var(--edge); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--a1) 22%, transparent), color-mix(in srgb, var(--a1) 4%, transparent) 70%); box-shadow: 0 0 calc(18px * var(--glow-k)) color-mix(in srgb, var(--a1) 22%, transparent); }
.gm-badge.on .gm-badge-ico { filter: drop-shadow(0 0 calc(10px * var(--glow-k)) var(--a1)); }
.gm-when { color: var(--a1); margin-top: 2px; }
.gm-mini { width: 100%; margin-top: 4px; }
.gm-mini .meter { margin: 0 0 3px; }
.gm-new { position: absolute; top: 8px; right: 8px; font: 700 9.5px var(--mono); letter-spacing: .1em; padding: 2px 6px; border-radius: 6px; color: var(--bg); background: var(--a2); box-shadow: 0 0 10px var(--a2); animation: blink 1.6s ease-in-out infinite; }
.gm-road { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.gm-road::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--a1), var(--edge-2)); }
.gm-road li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; position: relative; }
.gm-road .chip { font-size: calc(12px * var(--text-k)); padding: 4px 10px; }
.gm-road-lv { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--bg); border: 1.5px solid var(--edge); color: var(--muted); position: relative; }
.gm-road li.got .gm-road-lv { background: linear-gradient(135deg, var(--a1), var(--a2)); color: var(--bg); border-color: transparent; box-shadow: var(--glow); }
.gm-road li.next .gm-road-lv { border-color: var(--a1); color: var(--a1); box-shadow: var(--glow); animation: breathe 2.4s ease-in-out infinite; }
.gm-road li:not(.got) .chips { opacity: .65; }
.gm-break li, .gm-earn li { padding-bottom: 8px; }
.gm-break .meter { margin-top: 6px; }

/* ---------- Settings → Orb & effects ---------- */
.gm-set-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gm-prev { width: min(170px, 46vw); flex: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.gm-prev:focus-visible { outline: 2px solid var(--a1); outline-offset: 6px; }
.gm-tile small { font-size: 11.5px; line-height: 1.3; }
.gm-tile .tag { margin: 0; }
.gm-tile-ico { font-size: 20px; }
.gm-tile.gm-locked { opacity: .6; border-style: dashed; }
.gm-tile.gm-locked .gm-tile-ico, .gm-tile.gm-locked .swatch { filter: grayscale(.85); }

/* ---------- unlock effects (lock screen + previews) ---------- */
.lock > .gm-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.lock.gm-iris { -webkit-mask-image: radial-gradient(circle at var(--gm-cx, 50%) var(--gm-cy, 45%), transparent var(--gm-iris, 0px), #000 calc(var(--gm-iris, 0px) + 1px)); mask-image: radial-gradient(circle at var(--gm-cx, 50%) var(--gm-cy, 45%), transparent var(--gm-iris, 0px), #000 calc(var(--gm-iris, 0px) + 1px)); }
.gm-demo { z-index: 120; justify-content: center; }
.gm-demo .gm-demo-core .core { border-radius: 50%; background: radial-gradient(circle, var(--a3) 0 6%, color-mix(in srgb, var(--a1) 70%, transparent) 20%, transparent 62%); box-shadow: 0 0 60px color-mix(in srgb, var(--a1) 40%, transparent); }
.gm-demo .gm-demo-core.gm-pop .core { animation: gm-pop .9s ease-out forwards; }
@keyframes gm-pop { to { transform: scale(2.6); opacity: 0; } }

:root[data-motion="calm"] .gm-up-rays, :root[data-motion="calm"] .gm-up-ring::before, :root[data-motion="calm"] .gm-bar i::after,
:root[data-motion="calm"] .gm-up-title::before, :root[data-motion="calm"] .gm-up-title::after, :root[data-motion="calm"] .gm-new, :root[data-motion="calm"] .gm-road li.next .gm-road-lv { animation: none; }
:root[data-motion="calm"] .gm-up-card, :root[data-motion="calm"] .gm-float { animation-duration: .01s; }
:root[data-motion="calm"] .gm-float { animation: none; opacity: 1; }
@media (max-width: 520px) {
  .gm-player { justify-content: center; }
  .gm-name { font-size: calc(22px * var(--text-k)); }
  .gm-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-up-num { font-size: 54px; }
}