/* /system/style.css (lägg överst i filen) */
@font-face{
  font-family:"BloodVictimZombie";
  src:url("/system/blood.victim.zombie.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* /system/style.css */
.orbit-pill{
  font-family:"BloodVictimZombie",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;
  font-size:clamp(104px,9.0vw,180px);
}


/* /system/style.css */
:root{
  --bg:#070a10;
  --fg:#ffffff;
  --shadow:rgba(0,0,0,.55);
  --accent:#ff2e2e;

  --line:#2c2f36;
  --line-glow:rgba(255,255,255,.06);
  --line-glow-strong:rgba(255,255,255,.10);

  --view-w:clamp(280px,70vw,760px);
  --view-h:clamp(220px,48vw,520px);

  --menu-gap:2px;
  --menu-top-shift:-20px; //*Höj*//
  --menu-bottom-shift:12px; //*Höj*//

  --pill:clamp(12px,1.6vw,15px);
  --corner:clamp(18px,2.2vw,28px);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 50% 45%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(900px 500px at 60% 60%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

.wrap{height:100%;display:grid;place-items:center;padding:clamp(10px,3vw,28px)}

.orbit{
  position:relative;
  width:min(98vw,1100px);
  height:min(92vh,760px);
  display:grid;
  place-items:center;
  user-select:none;
}

.circle{
  width:var(--view-w);
  height:var(--view-h);
  border-radius:var(--corner);
  overflow:hidden;
  position:relative;
  background:url("/system/back.png") center/60% no-repeat;
  background-position:50% -30%;
  border:3px solid var(--line);
  box-shadow:0 18px 60px var(--shadow), 0 0 26px var(--line-glow);
  --dim:.65;
}

.circle::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--corner);
  background:rgba(0,0,0,1);
  opacity:var(--dim);
  transition:opacity .12s ease;
  z-index:2;
  pointer-events:none;
}

.circle.has-overlay{--dim:.92}
.circle.is-loading{--dim:.95}

.circle-glow{
  position:absolute;
  inset:-3px;
  border-radius:var(--corner);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 0 70px var(--line-glow);
  mix-blend-mode:screen;
  z-index:5;
}

.circle-content{
  position:absolute;
  inset:0;
  z-index:4;
  overflow:auto;
  padding:clamp(20px,3.2vw,28px);
  background:transparent;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.circle-content,.circle-content *{color:#fff}
.circle-content::-webkit-scrollbar{width:10px}
.circle-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.circle-content::-webkit-scrollbar-track{background:transparent}

.panel{max-width:100%}
.panel h1{margin:0 0 10px;font-size:clamp(18px,2.2vw,26px);letter-spacing:.2px}
.panel p{margin:10px 0 0;line-height:1.45;font-size:clamp(13px,1.7vw,15px)}
.panel .badge{
  display:inline-block;
  margin-top:12px;
  padding:8px 10px;
  border-radius:999px;
  border:2px solid var(--line-glow-strong);
  background:rgba(0,0,0,.35);
  font-size:12px;
  color:#fff;
}

/* MENY: BARA TEXT (ingen pill/ram/bakgrund) */
.orbit-item{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(calc(var(--x,0)*1px), calc(var(--y,0)*1px)) translate(-50%,-50%);
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  outline:none;
  z-index:20;
}

.orbit-pill{
  display:inline-flex;
  align-items:center;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-size:var(--pill);
  color:var(--fg);
  white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.orbit-pill .pill-text{
  display:inline-block;
  transform:scale(1);
  transform-origin:center;
  transition:transform .12s ease, filter .12s ease;
  will-change:transform;
}

.orbit-item:hover .orbit-pill .pill-text{transform:scale(1.12);filter:brightness(1.08)}
.orbit-item.is-active .orbit-pill .pill-text{filter:brightness(1.10)}

@media (max-width:560px){
  :root{
    --view-w:clamp(260px,90vw,620px);
    --view-h:clamp(220px,62vw,420px);
    --pill:12px;
  }
}