:root{
  --m-dark:#213A8F;   /* moderatblå  */
  --m-blue:#93D5F6;   /* ljusblå     */
  --m-ice:#E4F4FD;    /* isblå       */
  --m-pink:#F5B5D2;   /* rosa accent */
  --m-purple:#702283; /* lila accent */
  --off-white:#F8F8F8;
  --radius:22px;
  --gap:clamp(14px,1.5vw,30px);
  --pad:clamp(20px,2.4vw,52px);
  --glass:rgba(16,28,74,.46);
  --glass-line:rgba(147,213,246,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:#eaf4fd;background:#101a3a;cursor:none;
  -webkit-font-smoothing:antialiased;
}

/* ============ AURORA / MESH ============ */
/* Långsamt morfande färgmoln - djup utan foto, och inga statiska bakgrundspixlar */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(140% 120% at 50% -10%, #1b2e6e 0%, #131f47 55%, #0d1530 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  will-change:transform;mix-blend-mode:screen}
.b1{width:46vw;height:46vw;left:-6vw;top:-8vh;
  background:radial-gradient(circle at 50% 50%, var(--m-blue), transparent 68%);
  animation:floatA 54s ease-in-out infinite}
.b2{width:40vw;height:40vw;right:-8vw;top:-6vh;
  background:radial-gradient(circle at 50% 50%, #3a5fc8, transparent 66%);
  animation:floatB 67s ease-in-out infinite}
.b3{width:52vw;height:52vw;right:-10vw;bottom:-16vh;opacity:.5;
  background:radial-gradient(circle at 50% 50%, var(--m-purple), transparent 64%);
  animation:floatC 73s ease-in-out infinite}
.b4{width:30vw;height:30vw;left:8vw;bottom:-10vh;opacity:.42;
  background:radial-gradient(circle at 50% 50%, var(--m-pink), transparent 62%);
  animation:floatD 61s ease-in-out infinite}
.b5{width:34vw;height:34vw;left:34vw;top:24vh;opacity:.4;
  background:radial-gradient(circle at 50% 50%, var(--m-ice), transparent 60%);
  animation:floatA 80s ease-in-out infinite reverse}
@keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,9vh) scale(1.18)}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-9vw,7vh) scale(.9)}}
@keyframes floatC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-8vh) scale(1.2)}}
@keyframes floatD{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(10vw,-6vh) scale(1.15)}}
/* subtil korn-textur dämpar banding i gradienterna */
.grain{position:absolute;inset:-50%;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ SCEN (pixel-orbit mot inbränning) ============ */
.stage{position:relative;z-index:1;height:100vh;width:100vw;padding:var(--pad);
  animation:orbit 97s ease-in-out infinite;will-change:transform}
@keyframes orbit{0%{transform:translate(0,0)}25%{transform:translate(10px,6px)}
  50%{transform:translate(5px,12px)}75%{transform:translate(-8px,5px)}100%{transform:translate(0,0)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.9}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ============ BENTO ============ */
.bento{height:100%;display:grid;gap:var(--gap);
  grid-template-columns:1.72fr 1.05fr 1.05fr;
  grid-template-rows:0.82fr 1.02fr 1.7fr;
  grid-template-areas:
    "board brand brand"
    "board clock clock"
    "board wifi  qr";
}
.cell{position:relative;border-radius:var(--radius);padding:clamp(16px,1.8vw,36px);
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 18px 50px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;min-height:0}
/* fackens topp får en svag ljusrand - editorial detalj */
.cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(147,213,246,.10), transparent 30%)}

.board{grid-area:board}
.brand{grid-area:brand}
.clock{grid-area:clock}
.wifi{grid-area:wifi}
.qr{grid-area:qr}

/* ---------- Board (hero) ---------- */
.board{display:flex;flex-direction:column}
.board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;
  border-bottom:2px solid rgba(147,213,246,.26);padding-bottom:.5em;margin-bottom:.25em}
.board-title{display:flex;align-items:baseline;gap:.6em}
.board-title h2{font-weight:900;letter-spacing:-.015em;font-size:clamp(26px,2.7vw,52px)}
.board-title .stop{color:var(--m-blue);font-weight:700;font-size:clamp(17px,1.7vw,32px)}
.board-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.25em;
  font-size:clamp(12px,1.05vw,20px);color:rgba(234,244,253,.7)}
.source{display:inline-flex;align-items:center;gap:.5em;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.source::before{content:"";width:.65em;height:.65em;border-radius:50%;background:var(--m-blue);
  animation:beacon 2.6s ease-out infinite}
.source.sim::before{background:var(--m-pink);animation:none}
@keyframes beacon{0%{box-shadow:0 0 0 0 rgba(147,213,246,.5)}100%{box-shadow:0 0 0 1.2em rgba(147,213,246,0)}}

.departures{list-style:none;display:flex;flex-direction:column;justify-content:space-between;flex:1;min-height:0}
.dep{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:clamp(12px,1.3vw,26px);padding:clamp(7px,.7vw,14px) 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.dep:last-child{border-bottom:none}
.mode{width:clamp(32px,2.7vw,54px);height:clamp(32px,2.7vw,54px);flex:none;color:var(--m-blue)}
.mode svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.line{font-weight:900;color:var(--m-dark);text-align:center;font-size:clamp(20px,2vw,38px);
  min-width:clamp(54px,4.2vw,92px);padding:.1em .38em;border-radius:12px}
.line.TRAM{background:var(--m-blue)}
.line.BUS{background:var(--m-ice)}
.line.BOAT{background:var(--m-pink)}
.line.TRAIN{background:#cdebfb}
.dest{font-weight:500;font-size:clamp(20px,2vw,38px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eta{font-weight:900;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:clamp(22px,2.2vw,42px)}
.eta .unit{font-weight:500;color:var(--m-ice);font-size:.5em;margin-left:.18em}
.eta.soon{color:var(--m-pink);animation:pulse 2.2s ease-in-out infinite}
.dep.cancel .dest{text-decoration:line-through;opacity:.55}
.dep.cancel .eta{color:var(--m-pink);font-size:clamp(16px,1.5vw,28px)}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:clamp(14px,1.5vw,28px);animation:breathe 300s ease-in-out infinite}
.logo-chip{flex:none;background:var(--off-white);border-radius:18px;
  width:clamp(64px,5.6vw,108px);height:clamp(64px,5.6vw,108px);padding:clamp(8px,.8vw,14px);
  display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.30)}
.logo-chip img{width:100%;height:100%;object-fit:contain;display:block}
.brand-text h1{font-weight:900;letter-spacing:-.025em;font-size:clamp(26px,2.7vw,52px);line-height:1}
.brand-text .region{font-weight:500;color:var(--m-blue);font-size:clamp(16px,1.5vw,28px);margin-top:.25em}

/* ---------- Clock ---------- */
.clock{display:flex;flex-direction:column;justify-content:center}
.clock .time{font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-size:clamp(48px,5.6vw,118px);line-height:.9}
.clock .date{font-weight:500;color:var(--m-ice);text-transform:capitalize;
  font-size:clamp(18px,1.8vw,34px);margin-top:.2em}

/* ---------- WiFi ---------- */
.wifi{display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1vw,18px);
  animation:breathe 360s ease-in-out infinite}
.wifi h2{font-weight:900;font-size:clamp(22px,2.3vw,42px)}
.wifi-creds{display:grid;grid-template-columns:auto 1fr;gap:.25em clamp(10px,1vw,20px);align-items:baseline}
.wifi-creds dt{color:var(--m-blue);font-weight:500;font-size:clamp(14px,1.3vw,24px)}
.wifi-creds dd{font-weight:900;font-size:clamp(19px,1.9vw,34px);word-break:break-all}
.wifi-creds dd.mono{letter-spacing:.03em}

/* ---------- QR ---------- */
.qr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em;
  animation:breathe 360s ease-in-out infinite}
.qr-frame{background:#fff;border-radius:18px;padding:clamp(8px,.9vw,16px);
  box-shadow:0 12px 32px rgba(0,0,0,.32);line-height:0}
.qr-frame img{width:clamp(130px,12vw,230px);height:auto;display:block}
.qr p{color:var(--m-ice);font-weight:500;font-size:clamp(14px,1.3vw,24px)}

@media (prefers-reduced-motion:reduce){
  .stage,.blob,.brand,.wifi,.qr,.eta.soon,.source::before{animation:none}
}