/* =========================================================
   miniplayr — playable games (modal + 2048, Snake, Match-3)
   ========================================================= */

/* ---------- Modal shell ---------- */
.gm { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; }
.gm[hidden] { display: none; }
.gm__backdrop { position: absolute; inset: 0; background: rgba(4, 3, 10, 0.78); backdrop-filter: blur(10px); animation: gm-fade 0.3s ease; }
@keyframes gm-fade { from { opacity: 0; } }

.gm__panel {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 36px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: linear-gradient(160deg, #120f24, #0a0817);
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.8), 0 0 60px -20px rgba(123,47,247,0.6);
  animation: gm-pop 0.35s var(--ease);
}
@keyframes gm-pop { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
.gm__panel::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6; }

.gm__head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.gm__title { font-family: "Chakra Petch", sans-serif; font-size: 1.25rem; font-weight: 700; }
.gm__title span { font-size: 1.4rem; margin-right: 6px; }
.gm__spacer { margin-left: auto; }
.gm__close { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); font-size: 1.1rem; display: grid; place-items: center; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.gm__close:hover { transform: rotate(90deg); border-color: var(--magenta); box-shadow: 0 0 18px -6px var(--magenta); }

.gm__stage { padding: 20px 18px 8px; overflow: auto; display: flex; flex-direction: column; align-items: center; }
.gm__foot { padding: 12px 18px 16px; text-align: center; color: var(--muted); font-size: 0.85rem; }
.gm__foot kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,0.05); font-family: "Chakra Petch", sans-serif; font-size: 0.78rem; color: var(--text); }

/* ---------- Shared game HUD ---------- */
.g-hud { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; margin-bottom: 16px; }
.g-score { flex: 1; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); text-align: center; }
.g-score b { display: block; font-family: "Chakra Petch", sans-serif; font-size: 1.4rem; line-height: 1; color: #fff; }
.g-score small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.g-btn { padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); font-weight: 600; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.g-btn:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 0 18px -6px var(--cyan); }

.g-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,6,15,0.82); backdrop-filter: blur(4px); border-radius: inherit; z-index: 5; animation: gm-fade 0.3s ease;
  /* släpp igenom touch/klick till canvasen under (så start-overlayen kan tappas
     på mobil och spelet kan börja). Knappen i overlayen får tillbaka klick nedan. */
  pointer-events: none; }
.g-over .g-btn { pointer-events: auto; }
.g-over__inner { text-align: center; }
.g-over__inner h4 { font-family: "Chakra Petch", sans-serif; font-size: 1.7rem; margin-bottom: 6px; }
.g-over__inner p { color: var(--muted); margin-bottom: 16px; }

/* ---------- Laddningstillstånd (lazy-laddade spelmoduler) ---------- */
.gm__loader { display: grid; place-items: center; gap: 14px; min-height: 240px; padding: 30px; text-align: center; color: var(--muted); }
.gm__spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--cyan); animation: gm-spin 0.7s linear infinite; box-shadow: 0 0 22px -6px var(--cyan); }
@keyframes gm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gm__spinner { animation-duration: 1.6s; } }

/* =========================================================
   2048
   ========================================================= */
.g2048 { position: relative; }
.g2048__board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); width: min(360px, 84vw); aspect-ratio: 1; }
.g2048__cell { border-radius: 11px; background: rgba(255,255,255,0.04); display: grid; place-items: center; font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: clamp(1rem, 6vw, 1.9rem); color: #fff; }
.g2048__cell[data-v="0"] { color: transparent; }
.g2048__cell.is-new { animation: t-pop 0.2s var(--ease); }
.g2048__cell.is-merged { animation: t-merge 0.22s var(--ease); }
@keyframes t-pop { from { transform: scale(0.1); opacity: 0; } }
@keyframes t-merge { 50% { transform: scale(1.18); } }

.g2048__cell[data-v="2"]    { background: #2a2747; }
.g2048__cell[data-v="4"]    { background: #343063; }
.g2048__cell[data-v="8"]    { background: linear-gradient(135deg, #0090a8, #00e5ff); color: #06121a; }
.g2048__cell[data-v="16"]   { background: linear-gradient(135deg, #00b894, #aaff3c); color: #06180a; }
.g2048__cell[data-v="32"]   { background: linear-gradient(135deg, #aaff3c, #ffd84d); color: #1a1500; }
.g2048__cell[data-v="64"]   { background: linear-gradient(135deg, #ffd84d, #ff7a45); color: #1a0c00; }
.g2048__cell[data-v="128"]  { background: linear-gradient(135deg, #ff7a45, #ff2bd6); color: #1a0010; box-shadow: 0 0 22px -6px #ff7a45; }
.g2048__cell[data-v="256"]  { background: linear-gradient(135deg, #ff2bd6, #b14dff); color: #fff; box-shadow: 0 0 24px -6px #ff2bd6; }
.g2048__cell[data-v="512"]  { background: linear-gradient(135deg, #b14dff, #7b2ff7); color: #fff; box-shadow: 0 0 26px -6px #7b2ff7; }
.g2048__cell[data-v="1024"] { background: linear-gradient(135deg, #7b2ff7, #00e5ff); color: #fff; box-shadow: 0 0 30px -6px #7b2ff7; font-size: clamp(0.9rem, 5vw, 1.6rem); }
.g2048__cell[data-v="2048"], .g2048__cell.is-big { background: linear-gradient(135deg, #00e5ff, #ff2bd6, #ffd84d); color: #08060f; box-shadow: 0 0 40px -4px var(--cyan); font-size: clamp(0.9rem, 5vw, 1.6rem); }

/* =========================================================
   Snake
   ========================================================= */
.snake { position: relative; }
.snake__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: #0a0817; box-shadow: inset 0 0 60px -20px rgba(0,229,255,0.4); width: min(360px, 84vw); height: min(360px, 84vw); touch-action: none; }

/* =========================================================
   Void Shooter
   ========================================================= */
.void { position: relative; }
.void__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 80% at 50% 0%, #140a2e, #05040e 70%); box-shadow: inset 0 0 70px -22px rgba(123,47,247,0.6); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: crosshair; }

/* =========================================================
   Prism Crush (match-3 with custom neon gems + explosions)
   ========================================================= */
.cosmic { position: relative; }
.cosmic__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 100%, #1a0b33, #05040e 70%); box-shadow: inset 0 0 70px -22px rgba(123,47,247,0.6); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

.ninja { position: relative; }
.ninja__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, #14210e, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(170,255,60,0.45); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: crosshair; }

/* =========================================================
   Cosmic Free Kicks (VM-frisparkar i en neon-rymdstadion)
   ========================================================= */
.freekick { position: relative; }
.freekick__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, #0a0820, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Drift Kings (synthwave pseudo-3D driftracer)
   ========================================================= */
.drift { position: relative; }
.drift__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 30%, #190a33, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(255,43,214,0.45); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Tower Stack (stapla glidande neon-block)
   ========================================================= */
.tower { position: relative; }
.tower__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 100%, #2a160a, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(255,122,69,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Brick Buster (neon-breakout med power-ups)
   ========================================================= */
.brick { position: relative; }
.brick__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, #1c0f08, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(255,122,69,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Hoops Pro (neon-arkadbasket i porträtt)
   ========================================================= */
.hoops { position: relative; }
.hoops__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, #2a160a, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(255,122,69,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Laser Dash (neon-laserväjning med dash)
   ========================================================= */
.laserdash { position: relative; }
.laserdash__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 40%, #1a0a22, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(255,43,214,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: crosshair; }

/* =========================================================
   Bubble Pop (neon-bubbelskytt med hexgaller)
   ========================================================= */
.bpop { position: relative; }
.bpop__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 6%, #150a2e, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: crosshair; }

/* =========================================================
   Blockwave (neon-synthwave-tetris med våg-rensningar)
   ========================================================= */
.bwave { position: relative; }
.bwave__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 0%, #1a0a18, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(255,43,214,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

.megamaze { position: relative; }
.megamaze__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 75% 80%, #13082e, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(123,47,247,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Tank Battle (top-down neon-arena med fiende-vågor)
   ========================================================= */
.tank { position: relative; }
.tank__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 50%, #1a0f0a, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(255,122,69,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: crosshair; }

.crush { position: relative; }
.crush__board { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); width: min(380px, 88vw); aspect-ratio: 1; }
.crush__cell { border: none; background: rgba(255,255,255,0.035); border-radius: 12px; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background 0.15s, box-shadow 0.15s; }
.crush__cell:hover { background: rgba(255,255,255,0.08); }
.crush__cell.is-sel { box-shadow: 0 0 0 2px var(--cyan), 0 0 22px -2px var(--cyan); background: rgba(0,229,255,0.12); z-index: 2; }
.crush__cell.is-bad { animation: cr-shake 0.3s; }

/* the gems — handritade neon-prismor, ingen emoji */
.gem { width: 80%; height: 80%; display: block;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.9), transparent 44%),
    linear-gradient(150deg, var(--c1), var(--c2));
  filter: drop-shadow(0 0 7px var(--glow)) drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  transition: transform 0.12s var(--ease);
}
.crush__cell:hover .gem { transform: scale(1.06); }
.crush__cell.is-sel .gem { transform: scale(1.12) rotate(8deg); }

.gem--0 { border-radius: 50%;                                                             --c1:#9bfcff; --c2:#00acc8; --glow:#00e5ff; } /* orb */
.gem--1 { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);                            --c1:#ffb3ee; --c2:#cc0094; --glow:#ff2bd6; } /* diamant */
.gem--2 { clip-path: polygon(50% 4%, 96% 94%, 4% 94%);                                     --c1:#e4ffb0; --c2:#6abf00; --glow:#aaff3c; } /* triangel */
.gem--3 { clip-path: polygon(25% 4%, 75% 4%, 99% 50%, 75% 96%, 25% 96%, 1% 50%);           --c1:#dcc4ff; --c2:#7b2ff7; --glow:#b14dff; } /* hexagon */
.gem--4 { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); --c1:#fff0b0; --c2:#ffae00; --glow:#ffd84d; } /* stjärna */
.gem--5 { clip-path: polygon(50% 2%, 98% 38%, 80% 98%, 20% 98%, 2% 38%);                   --c1:#ffccb0; --c2:#ff4d1a; --glow:#ff7a45; } /* pentagon */

.gem.is-clear { animation: gem-burst 0.32s var(--ease) forwards; }
@keyframes gem-burst {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.32) rotate(20deg); filter: brightness(2.4) drop-shadow(0 0 20px var(--glow)); }
  100% { transform: scale(0) rotate(80deg); opacity: 0; }
}
.gem.is-drop { animation: gem-drop 0.36s var(--ease); }
@keyframes gem-drop {
  0%   { transform: translateY(-55%) scale(0.7); opacity: 0; }
  60%  { transform: translateY(7%) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* explosion particles */
.crush__particle { position: absolute; width: 9px; height: 9px; border-radius: 50%; margin: -4.5px 0 0 -4.5px; pointer-events: none; z-index: 6; background: currentColor; filter: drop-shadow(0 0 7px currentColor); animation: cr-particle 0.6s var(--ease) forwards; }
@keyframes cr-particle { 0% { transform: translate(0,0) scale(1.3); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }

/* shockwave ring */
.crush__ring { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid currentColor; pointer-events: none; z-index: 5; animation: cr-ring 0.5s var(--ease) forwards; }
@keyframes cr-ring { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(4.8); opacity: 0; } }

/* combo banner */
.crush__combo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 8vw, 2.4rem); color: #fff; letter-spacing: 1px; white-space: nowrap; pointer-events: none; z-index: 12; text-shadow: 0 0 18px var(--cyan), 0 0 34px var(--magenta); animation: cr-combo 0.85s var(--ease) forwards; }
@keyframes cr-combo {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  25%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  70%  { opacity: 1; transform: translate(-50%,-55%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-78%) scale(1); }
}

.crush__board.is-shake { animation: cr-shake 0.32s; }
@keyframes cr-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-5px,3px); } 40% { transform: translate(5px,-3px); } 60% { transform: translate(-4px,-2px); } 80% { transform: translate(4px,2px); } }

/* =========================================================
   Star Breaker (orbital-försvar — rotera paddeln runt kärnan)
   ========================================================= */
.starbreaker { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.starbreaker__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 50%, #170a2a, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(123,47,247,0.55); width: min(380px, 86vw); aspect-ratio: 1 / 1; touch-action: none; cursor: crosshair; }

/* =========================================================
   Pixel Golf (neon-minigolf ovanifrån — slingshot-putt)
   ========================================================= */
.pixel-golf { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.pixel-golf__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 100% at 50% 42%, #0f2a1e, #05040e 76%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.5); width: min(380px, 86vw); aspect-ratio: 4 / 5; touch-action: none; cursor: crosshair; }

/* =========================================================
   Astro Miner (neon-gripklo — gold-miner i asteroidgruva)
   ========================================================= */
.astrominer { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.astrominer__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 8%, #160a2a, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(123,47,247,0.55); width: min(380px, 86vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Neon Crossing (Frogger i neon — hoppa över vägar & floder)
   ========================================================= */
.neon-crossing { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.neon-crossing__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: #0a0913; box-shadow: inset 0 0 70px -22px rgba(170,255,60,0.4); width: min(330px, 80vw); aspect-ratio: 9 / 13; touch-action: none; cursor: pointer; }

/* =========================================================
   Match Mania (neon-juvelsmäll — tryck grupper, INTE swap)
   ========================================================= */
.match-mania { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.match-mania__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 0%, #2a0a24, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(255,43,214,0.5); width: min(360px, 84vw); aspect-ratio: 1; touch-action: none; cursor: pointer; }

/* =========================================================
   Color Fall (neon-färgfångare — fånga målfärgen, väj fel)
   ========================================================= */
.color-fall { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.color-fall__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, #1a0a2e, #05040e 72%); box-shadow: inset 0 0 70px -22px rgba(255,43,214,0.45); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Retro Racer (top-down neon-banracer + garage/progression)
   ========================================================= */
.retro-racer { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.retro-racer__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 45%, #12081f, #05040e 76%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.4); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* Garage / progression-meny (täcker canvasen före lopp) */
.rr-garage { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(360px, 84vw); aspect-ratio: 3 / 4; z-index: 6;
  display: flex; flex-direction: column; gap: 9px; padding: 14px; overflow: auto; border-radius: 16px;
  background: rgba(7,6,15,0.9); backdrop-filter: blur(5px); border: 1px solid var(--line); }
.rr-garage > * { width: 100%; max-width: 440px; margin-inline: auto; }
.rr-garage::-webkit-scrollbar { width: 6px; }
.rr-garage::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
.rr-g-top { display: flex; align-items: center; justify-content: space-between; }
.rr-g-top h4 { font-family: "Chakra Petch", sans-serif; font-size: 1.15rem; }
.rr-money { font-family: "Chakra Petch", sans-serif; font-size: 0.92rem; color: var(--muted); }
.rr-money b { color: #ffe08a; }
.rr-trk { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.rr-trk-info { flex: 1; min-width: 0; text-align: center; }
.rr-trk-name { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 1rem; color: #fff; }
.rr-stars { color: #ffd84d; font-size: 0.82rem; letter-spacing: 2px; }
.rr-trk-sub { color: var(--muted); font-size: 0.72rem; margin-top: 1px; }
.rr-nav { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s; }
.rr-nav:hover { border-color: var(--cyan); box-shadow: 0 0 14px -6px var(--cyan); }
.rr-shop { display: flex; flex-direction: column; gap: 8px; }
.rr-up { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.rr-up-i { font-size: 1.3rem; flex: none; }
.rr-up-main { flex: 1; min-width: 0; }
.rr-up-name { font-weight: 700; font-size: 0.9rem; color: #fff; }
.rr-up-desc { color: var(--muted); font-size: 0.66rem; }
.rr-pips { color: var(--cyan); letter-spacing: 3px; font-size: 0.82rem; margin-top: 2px; }
.rr-buy { flex: none; padding: 8px 12px; font-size: 0.8rem; white-space: nowrap; }
.rr-buy.rr-dis, .rr-race.rr-dis { opacity: 0.45; }
.rr-buy[disabled] { opacity: 0.4; }
.rr-race { margin-top: 2px; padding: 13px; font-family: "Chakra Petch", sans-serif; font-size: 1rem; border-color: var(--cyan); box-shadow: 0 0 20px -8px var(--cyan); }
.rr-prize { color: #ffe08a !important; margin-bottom: 12px !important; font-weight: 600; }
.rr-over-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   Neon Strike (arkad-fotbollsmatch ovanifrån — FIFA-klon)
   ========================================================= */
.neon-strike { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.neon-strike__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 50%, #0e2a18, #05040e 76%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.45); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Pixel Arena (neon-knockback-arena — dasha & ramma ut fiender)
   ========================================================= */
.pixel-arena { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.pixel-arena__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 45%, #0c0a1e, #05040e 78%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.4); width: min(380px, 86vw); aspect-ratio: 1 / 1; touch-action: none; cursor: crosshair; }

/* =========================================================
   Soccer Stars (flick-fysik-fotboll ovanifrån, turordning vs CPU)
   ========================================================= */
.soccer-stars { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.soccer-stars__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 50%, #0e2418, #05040e 76%); box-shadow: inset 0 0 70px -22px rgba(170,255,60,0.4); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Neon Angler (neon-djuphavsfiske — kroka & banka fångsten)
   ========================================================= */
.neon-angler { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.neon-angler__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 0%, #0a1830, #04040e 78%); box-shadow: inset 0 0 70px -22px rgba(0,229,255,0.5); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

/* =========================================================
   Star Sling (slungraket — kretsa, ladda, släpp mot nästa planet)
   ========================================================= */
.star-sling { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.star-sling__canvas { display: block; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(120% 95% at 50% 100%, #170a2e, #05040e 74%); box-shadow: inset 0 0 70px -22px rgba(255,216,77,0.45); width: min(360px, 84vw); aspect-ratio: 3 / 4; touch-action: none; cursor: pointer; }

@media (max-width: 480px) {
  .gm__panel { width: 100%; }
}