/* skarm.css — tematiska wireframe-skärmobjekt (skarm.js).
   Exakt samma visuella familj som browserfönstret i bwin.css:
   panel #0a1518 · kant rgba(79,227,212,.28) · radius 14px · samma glöd ·
   SVG-stroke 1.5 mint · skelett rgba(232,244,242,.2) · inre block som .bblk. */
.skarm{margin:0 0 1.6rem;max-width:520px}
/* ── glaskortet (2026-07-26): frostat glas + LEVANDE ljus ──
   · glas: gradient-tonad translucent botten + backdrop-blur → världen skymtar
     genom kortet · toppens inset-linje = glasets ljusfång
   · roterande ljuskant: conic-gradient maskad till 1px-ringen (ett varv/9 s,
     @property-animerad vinkel; utan stöd/reduced → stilla gradientkant)
   · inre andningsglöd + pekar-sheen (—mx/—my sätts av stegteater.js)
   · stegbyte → .blom: kort ljusblomning. Inga nya färgvärden. */
@property --gv{syntax:'<angle>';initial-value:0deg;inherits:false}
.skarm-panel{position:relative;border-radius:16px;padding:12px;
  background:linear-gradient(160deg,rgba(8,20,24,.58),rgba(5,10,12,.34));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(79,227,212,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(79,227,212,.10),
    inset 0 1px 0 rgba(232,244,242,.07)}
.skarm-panel::before{content:"";position:absolute;inset:-1px;border-radius:17px;padding:1px;
  background:conic-gradient(from var(--gv,0deg),transparent 0deg,rgba(79,227,212,.8) 40deg,
    transparent 110deg,transparent 240deg,rgba(79,227,212,.3) 300deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;animation:skarmljus 9s linear infinite}
@keyframes skarmljus{to{--gv:360deg}}
.skarm-panel::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:
    radial-gradient(240px 240px at var(--mx,72%) var(--my,18%),rgba(232,244,242,.06),transparent 70%),
    radial-gradient(70% 60% at 50% 28%,rgba(79,227,212,.05),transparent 75%);
  animation:skarmandning 6.5s ease-in-out infinite alternate}
@keyframes skarmandning{from{opacity:.55}to{opacity:1}}
.skarm-panel.blom::after{animation:skarmandning 6.5s ease-in-out infinite alternate,
  skarmblom .7s ease-out}
@keyframes skarmblom{from{opacity:1;filter:brightness(2.4)}to{filter:brightness(1)}}
@media (prefers-reduced-motion: reduce){
  .skarm-panel::before{animation:none}
  .skarm-panel::after{animation:none;opacity:.7}
}
/* NEONRÖR (2026-07-26, Williams val): linjerna är tända glasrör — vit-varm
   kärna (husets --text, 232,244,242) med mint-halo + mjuk bloom i tre lager.
   Ritningsanimationen är orörd: dash-draget ser nu ut att TÄNDA röret.
   Skeletten (.sk-skel) hålls släckta — de är platshållare, inte neon. */
.skarm svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 1.5px rgba(79,227,212,.95))
         drop-shadow(0 0 7px rgba(79,227,212,.5))
         drop-shadow(0 0 20px rgba(79,227,212,.25))}
.skarm svg *{stroke:var(--text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.skarm .sk-skel{stroke:rgba(232,244,242,.2)}
.skarm .sk-fyll{fill:var(--teal);stroke:none}
.skarm .sk-panelbg{fill:rgba(8,20,24,.6);stroke:rgba(79,227,212,.3)}
.skarm .sk-rit{stroke-dasharray:1}
@media (max-width:600px){.skarm{max-width:100%}}

/* ── RUM I GLASET (A): perspektivgolv som driver långsamt djupt inne i kortet,
   svag parallax mot pekaren (—mx/—my från stegteater). Klipps i egen ram så
   den roterande ljuskanten (::before, inset -1px) inte klipps. ── */
.sk-rum-klipp{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none;display:block}
.sk-rum{position:absolute;left:-28%;right:-28%;bottom:-12%;height:74%;display:block;
  transform:perspective(620px) rotateX(60deg)
    translate(calc((var(--mx,50%) - 50%)*.10),calc((var(--my,50%) - 50%)*.14));
  transform-origin:50% 100%;opacity:.5;
  background:
    linear-gradient(rgba(79,227,212,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,227,212,.07) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(transparent 4%,#000 46%);
          mask-image:linear-gradient(transparent 4%,#000 46%);
  animation:rumdrift 26s linear infinite}
@keyframes rumdrift{to{background-position:0 36px,0 0}}
/* ── HUD-RAM (D): hörnmarkörer utanför glaskanten — instrumentspråk ── */
.sk-hud{position:absolute;inset:-8px;pointer-events:none;display:block;opacity:.55;
  background:
    linear-gradient(var(--teal),var(--teal)) left 0 top 0/14px 1px,
    linear-gradient(var(--teal),var(--teal)) left 0 top 0/1px 14px,
    linear-gradient(var(--teal),var(--teal)) right 0 top 0/14px 1px,
    linear-gradient(var(--teal),var(--teal)) right 0 top 0/1px 14px,
    linear-gradient(var(--teal),var(--teal)) left 0 bottom 0/14px 1px,
    linear-gradient(var(--teal),var(--teal)) left 0 bottom 0/1px 14px,
    linear-gradient(var(--teal),var(--teal)) right 0 bottom 0/14px 1px,
    linear-gradient(var(--teal),var(--teal)) right 0 bottom 0/1px 14px;
  background-repeat:no-repeat}
/* ── REAKTIV LJUSKANT (E): när pekaren är i sektionen slutar kanten rotera
   fritt och ljuset DRAS mot pekarens vinkel (stegteater tweenar --gv) ── */
.skarm-panel.lyssnar::before{animation:none}
@media (prefers-reduced-motion: reduce){
  .sk-rum{animation:none}
}