/* Rammer rundt avataren og detaljene på figurene fra Butikken.
   Lastes globalt: avatarer finnes i toppen, Kroken, Profilen og på pallen.
   Geometri: .ramme stikker 14 % utenfor avataren, så skivekanten ligger på
   ca. 78 % av radien. Ringene tegnes fra ca. 80 % og ut. Bare transform og
   opacity animeres. Størrelser følger --av (avatarens størrelse). */

.ramme { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; }
.ramme > i { position: absolute; inset: 0; border-radius: 50%; }

/* felles ringmaske: synlig mellom --r0 og --r1 av radien */
.rs-ticks::before, .rs-ticks::after, .rf-ring, .rk-ring, .rr-ring,
.rm-mortar, .rm-inner, .rm-outer, .rm-merlons, .rq-ring, .rq-shine {
  -webkit-mask: radial-gradient(farthest-side, transparent var(--r0, 80%), #000 calc(var(--r0, 80%) + .8%), #000 var(--r1, 100%), transparent calc(var(--r1, 100%) + .6%));
  mask: radial-gradient(farthest-side, transparent var(--r0, 80%), #000 calc(var(--r0, 80%) + .8%), #000 var(--r1, 100%), transparent calc(var(--r1, 100%) + .6%));
}
@keyframes rammeSpin { to { transform: rotate(360deg); } }

/* ---------- Gradeskive: presise streker som går rundt ---------- */
.ramme-skive .rs-ticks { animation: rammeSpin 60s linear infinite; will-change: transform; }
.ramme-skive .rs-ticks::before, .ramme-skive .rs-ticks::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.ramme-skive .rs-ticks::before { --r0: 86%; --r1: 96%; background: repeating-conic-gradient(var(--ink-3, oklch(53% .01 262)) 0 1.3deg, transparent 1.3deg 6deg); opacity: .7; }
.ramme-skive .rs-ticks::after { --r0: 81%; --r1: 99%; background: repeating-conic-gradient(var(--ink, oklch(19% .012 262)) 0 1.9deg, transparent 1.9deg 30deg); }
.ramme-skive .rs-mark {
  inset: auto; left: 50%; top: -1%; width: max(2px, calc(var(--av, 48px) * .05)); height: calc(var(--av, 48px) * .13);
  translate: -50% 0; border-radius: 999px; background: var(--accent, oklch(57% .23 22));
}

/* ---------- Glød: pulserer rolig i spillerens farge ---------- */
.ramme-glod .rg-halo {
  inset: -8%;
  background: radial-gradient(closest-side, transparent 64%, color-mix(in oklch, var(--pc, var(--p0)) 75%, transparent) 75%, color-mix(in oklch, var(--pc, var(--p0)) 22%, transparent) 88%, transparent 100%);
  animation: glodPulse 2.6s ease-in-out infinite; will-change: transform, opacity;
}
.ramme-glod .rg-ring { inset: 7%; border: max(1.5px, calc(var(--av, 48px) * .032)) solid var(--pc, var(--p0)); }
@keyframes glodPulse { 0%, 100% { opacity: .45; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- Frost: iskrystaller som glitrer ---------- */
.ramme-frost .rf-ring {
  --r0: 82%; --r1: 99%;
  background: conic-gradient(from 10deg, oklch(97% .015 220), oklch(83% .07 228), oklch(98% .01 210), oklch(77% .09 236), oklch(95% .03 216), oklch(86% .06 230), oklch(97% .015 220));
  animation: rammeSpin 40s linear infinite; will-change: transform;
}
.ramme-frost .rf-edge { inset: 1%; border: max(1px, calc(var(--av, 48px) * .012)) solid oklch(100% 0 0 / .85); }
.ramme-frost .rf-c { transform: rotate(var(--a)); }
.ramme-frost .rf-c::after {
  content: ''; position: absolute; left: 50%; top: 0; width: calc(var(--av, 48px) * .16); aspect-ratio: 1; translate: -50% -22%;
  background: oklch(99.5% .01 215);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: frostTwinkle 2.8s ease-in-out infinite var(--d, 0s);
}
@keyframes frostTwinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .4; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ---------- Gnistring: gnister i bane ---------- */
.ramme-gnister { --spark: var(--gold, oklch(80% .15 85)); }
.ramme-gnister .rk-ring {
  --r0: 85%; --r1: 93%;
  background: repeating-conic-gradient(color-mix(in oklch, var(--spark) 85%, transparent) 0 2deg, transparent 2deg 9deg);
  opacity: .6; animation: rammeSpin 30s linear infinite reverse;
}
.ramme-gnister .rk-orb { inset: 3%; animation: rammeSpin var(--t, 6s) linear infinite var(--dir, normal); animation-delay: var(--d, 0s); will-change: transform; }
.ramme-gnister .rk-orb b {
  position: absolute; left: 50%; top: 0; width: calc(var(--av, 48px) * .17); aspect-ratio: 1; translate: -50% -38%; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(98% .05 95), color-mix(in oklch, var(--spark) 65%, transparent) 42%, transparent);
  animation: sparkTwinkle 1.3s ease-in-out infinite;
}
.ramme-gnister .rk-orb b::after {
  content: ''; position: absolute; inset: 14%; background: oklch(99.5% .03 95);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
@keyframes sparkTwinkle { 0%, 100% { transform: scale(.7); opacity: .75; } 50% { transform: scale(1.15); opacity: 1; } }

/* ---------- Neon: elektrisk kant som flimrer ---------- */
.ramme-neon { --neon: oklch(70% .26 345); }
.ramme-neon .rn-glow {
  inset: 6.5%; border: max(1.5px, calc(var(--av, 48px) * .03)) solid var(--neon);
  box-shadow: 0 0 calc(var(--av, 48px) * .05) var(--neon), 0 0 calc(var(--av, 48px) * .14) color-mix(in oklch, var(--neon) 55%, transparent), inset 0 0 calc(var(--av, 48px) * .05) color-mix(in oklch, var(--neon) 70%, transparent);
  animation: neonFlicker 5.2s linear infinite;
}
.ramme-neon .rn-line { inset: 7.7%; border: max(1px, calc(var(--av, 48px) * .011)) solid oklch(97% .05 345); animation: neonFlicker 5.2s linear infinite -1.7s; }
@keyframes neonFlicker {
  0%, 7%, 9%, 46%, 51%, 80%, 82%, 100% { opacity: 1; }
  8% { opacity: .35; } 47% { opacity: .2; } 48% { opacity: .9; } 49% { opacity: .15; } 50% { opacity: .85; } 81% { opacity: .55; }
}

/* ---------- Regnbue: hele spekteret, alltid i bevegelse ---------- */
.ramme-regnbue { --rainbow: conic-gradient(from 0deg, oklch(70% .21 25), oklch(80% .16 75), oklch(87% .16 100), oklch(78% .17 150), oklch(72% .14 220), oklch(62% .2 280), oklch(66% .22 330), oklch(70% .21 25)); }
.ramme-regnbue .rr-ring { --r0: 83%; --r1: 99%; background: var(--rainbow); animation: rammeSpin 4.5s linear infinite; will-change: transform; }
.ramme-regnbue .rr-glow {
  inset: -7%; background: var(--rainbow); opacity: .45;
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 82%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 70%, #000 82%, transparent 100%);
  animation: rammeSpin 7s linear infinite reverse; will-change: transform;
}

/* ---------- Murverk: steinmur fra Age of War ---------- */
.ramme-murverk { --stein: oklch(71% .025 72); --stein2: oklch(63% .03 62); --fuge: oklch(38% .02 50); }
.ramme-murverk .rm-mortar { --r0: 79%; --r1: 95.5%; background: var(--fuge); }
.ramme-murverk .rm-inner { --r0: 80%; --r1: 87%; background: repeating-conic-gradient(from 6deg, var(--stein2) 0 10.6deg, transparent 10.6deg 12deg, var(--stein) 12deg 22.6deg, transparent 22.6deg 24deg); }
.ramme-murverk .rm-outer { --r0: 88.5%; --r1: 95%; background: repeating-conic-gradient(from 0deg, var(--stein) 0 10.6deg, transparent 10.6deg 12deg, var(--stein2) 12deg 22.6deg, transparent 22.6deg 24deg); }
.ramme-murverk .rm-merlons { --r0: 94.5%; --r1: 100%; background: repeating-conic-gradient(from -4deg, var(--stein) 0 8deg, transparent 8deg 24deg); }
.ramme-murverk .rm-flag { inset: auto; left: 50%; top: -9%; width: calc(var(--av, 48px) * .26); height: calc(var(--av, 48px) * .26); border-radius: 0; }
.ramme-murverk .rm-flag::before { content: ''; position: absolute; left: 0; bottom: 0; width: max(1.5px, calc(var(--av, 48px) * .022)); height: 100%; border-radius: 2px; background: var(--fuge); }
.ramme-murverk .rm-flag b {
  position: absolute; left: max(1.5px, calc(var(--av, 48px) * .022)); top: 0; width: 82%; height: 48%;
  background: var(--pc, var(--p0)); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%;
  animation: flagWave 1.5s ease-in-out infinite;
}
@keyframes flagWave { 0%, 100% { transform: scaleX(1) skewY(6deg); } 50% { transform: scaleX(.8) skewY(-7deg); } }

/* ---------- Kongelig og Gylden krok: gull med glans som går rundt ---------- */
.ramme-kongelig, .ramme-gull { --gold-a: oklch(88% .11 92); --gold-b: oklch(70% .14 76); --gold-c: oklch(94% .07 97); --gold-d: oklch(63% .13 70); }
.rq-ring { --r0: 81%; --r1: 98%; background: conic-gradient(from 20deg, var(--gold-a), var(--gold-b), var(--gold-c), var(--gold-d), var(--gold-a), var(--gold-b), var(--gold-c), var(--gold-d), var(--gold-a)); }
.rq-ring.rq-smooth { --r0: 84%; --r1: 97%; }
.rq-shine { --r0: 81%; --r1: 98%; background: conic-gradient(from 0deg, transparent 0 290deg, oklch(100% 0 0 / .9) 325deg, transparent 352deg); animation: rammeSpin 3.4s linear infinite; will-change: transform; }
.ramme-kongelig { --gem-0: oklch(58% .22 25); --gem-1: oklch(55% .18 262); --gem-2: oklch(64% .17 155); --gem-3: oklch(58% .2 305); }
.ramme-kongelig .rq-gem { transform: rotate(var(--a)); }
.ramme-kongelig .rq-gem::after {
  content: ''; position: absolute; left: 50%; top: 5.5%; width: calc(var(--av, 48px) * .095); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(100% 0 0 / .85) 0 14%, var(--g) 46%, color-mix(in oklch, var(--g) 70%, black) 100%);
  box-shadow: 0 0 0 max(.75px, calc(var(--av, 48px) * .01)) var(--gold-d);
  animation: gemGlint 2.4s ease-in-out infinite;
}
.ramme-kongelig .rq-gem:nth-child(even)::after { animation-delay: -1.2s; }
@keyframes gemGlint { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.18; opacity: 1; } }
.ramme-gull .rgk-medal {
  inset: auto; left: 1%; bottom: 1%; z-index: 2; width: calc(var(--av, 48px) * .36); height: calc(var(--av, 48px) * .36);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(97% .06 95), oklch(84% .14 88) 50%, oklch(64% .14 72));
  box-shadow: 0 0 0 max(1px, calc(var(--av, 48px) * .012)) oklch(55% .12 70), 0 calc(var(--av, 48px) * .02) calc(var(--av, 48px) * .05) oklch(40% .08 70 / .35);
}
.ramme-gull .rgk-krok { width: 72%; height: 72%; fill: none; stroke: oklch(40% .1 66); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ramme-gull .rgk-krok .rgk-dot { fill: oklch(58% .2 25); stroke: none; }

/* ---------- figurdetaljer (nye former) ---------- */
.fig .deco-dark { fill: color-mix(in oklch, var(--pc, var(--p0)) 50%, oklch(20% .01 262)); }
.fig .deco-stroke { fill: none; stroke: var(--fig-eye, oklch(17% .01 262)); stroke-width: 2.2; stroke-linecap: round; }
.fig .deco-led { fill: oklch(82% .17 150); animation: figLed 2.6s steps(1, end) infinite; }
@keyframes figLed { 0%, 58% { opacity: 1; } 60%, 72% { opacity: .2; } 74%, 100% { opacity: 1; } }
.fig .deco-grille { fill: none; stroke: oklch(100% 0 0 / .6); stroke-width: 1.4; stroke-linecap: round; }
.fig .deco-ear { fill: oklch(85% .08 10); }
.fig .deco-nose { fill: oklch(68% .15 10); }
.fig .deco-whisker { fill: none; stroke: var(--fig-eye, oklch(17% .01 262)); stroke-width: 1; stroke-linecap: round; opacity: .5; }
.fig .deco-cream { fill: oklch(95.5% .025 85); }
.fig .deco-under { fill: oklch(25% .03 60 / .2); }
.fig .deco-spot { fill: oklch(99% 0 0); }
.fig .deco-tint { fill: color-mix(in oklch, var(--pc, var(--p0)) 55%, oklch(99% 0 0)); }
.fig .deco-pot { fill: oklch(63% .13 45); }
.fig .deco-pot-rim { fill: oklch(56% .13 40); }
.fig .deco-spine { fill: none; stroke: oklch(98% .02 95); stroke-width: 1.1; stroke-linecap: round; }
.fig .deco-rib { fill: none; stroke: color-mix(in oklch, var(--pc, var(--p0)) 65%, oklch(10% 0 0)); stroke-width: 1.3; stroke-linecap: round; opacity: .3; }

/* ---------- nytt tilbehør ---------- */
.fig .acc-dark { fill: var(--fig-eye, oklch(17% .01 262)); }
.fig .acc-petal { fill: oklch(91% .07 350); }
.fig .acc-pistil { fill: oklch(84% .16 88); }
.fig .acc-gap { fill: oklch(20% .02 262 / .35); }
.fig .acc-strap { fill: none; stroke: var(--acc-2); stroke-width: 1.4; stroke-linecap: round; }
.fig .acc-seam { fill: none; stroke: oklch(0% 0 0 / .18); stroke-width: 1; stroke-linecap: round; }
.fig .acc-white { fill: oklch(98.6% .003 255); stroke: oklch(84% .006 262); stroke-width: .8; }
.fig .acc-fold { fill: none; stroke: oklch(84% .006 262); stroke-width: 1; stroke-linecap: round; }
.fig .acc-horn { fill: oklch(94% .03 85); stroke: oklch(72% .05 75); stroke-width: .9; }
.fig .acc-metal { fill: oklch(76% .02 250); }
.fig .acc-metal-line { fill: none; stroke: oklch(58% .02 250); stroke-width: 1.6; stroke-linecap: round; }
.fig .acc-metal-dark { fill: oklch(57% .025 250); }
.fig .acc-rivet { fill: oklch(90% .01 250); }
.fig .acc-gold { fill: oklch(84% .15 86); stroke: oklch(56% .12 70); stroke-width: 1.1; stroke-linejoin: round; }
.fig .acc-gold-dark { fill: oklch(70% .14 76); }
.fig .acc-gem-r { fill: oklch(58% .22 25); }
.fig .acc-gem-b { fill: oklch(56% .18 262); }
.fig .acc-gem-g { fill: oklch(64% .17 155); }

@media (prefers-reduced-motion: reduce) {
  .ramme, .ramme *, .ramme ::before, .ramme ::after, .ramme *::before, .ramme *::after, .fig .deco-led { animation: none !important; }
}