/* =========================================================
   ORDTOGET — felles stil for mobil og PC.
   Tema: jernbane i skumring. Varmt lampelys mot nattblå himmel.
   Layout ligger i mobil.css / pc.css.
   ========================================================= */

:root{
  --night-1:#131a2e;
  --night-2:#0b1020;
  --panel:rgba(255,255,255,.05);
  --line:#2c3a5c;
  --line-soft:#222e4a;

  --lamp:#ffc24d;
  --lamp-hot:#ffe08a;
  --lamp-deep:#d98b0e;
  --signal-green:#3ddb7f;
  --signal-red:#ff5f6b;
  --steam:#dce6ff;
  --steel:#8fa3c8;
  --brass:#e0a94a;
  --violet:#9b7bff;

  --ink:#f3f6ff;
  --muted:#9fb0d4;
  --dim:#6f80a6;

  --radius:16px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ height:100%; margin:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 500px at 50% -6%, #2a3757 0%, transparent 62%),
    linear-gradient(180deg, var(--night-1), var(--night-2) 78%);
  background-attachment:fixed;
  overflow-x:hidden;
}
button{ font-family:inherit; }
button:focus-visible, input:focus-visible, a:focus-visible{
  outline:3px solid var(--lamp); outline-offset:3px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* effektlag */
#bgCanvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#fxCanvas{ position:fixed; inset:0; width:100%; height:100%; z-index:60; pointer-events:none; }
#vignette{
  position:fixed; inset:0; pointer-events:none; z-index:55; opacity:0;
  box-shadow:inset 0 0 90px 22px rgba(255,60,70,.5);
  transition:opacity .3s ease;
}
#vignette.on{ opacity:1; animation:vig 1s ease-in-out infinite; }
@keyframes vig{ 50%{ opacity:.3; } }

/* fjerne åser i bakgrunnen */
.hills{
  position:fixed; left:0; right:0; bottom:0; height:34vh; z-index:0;
  pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 100% at 20% 100%, #1b2740 0 40%, transparent 41%),
    radial-gradient(120% 100% at 62% 100%, #17223a 0 46%, transparent 47%),
    radial-gradient(120% 100% at 95% 100%, #1b2740 0 38%, transparent 39%);
}

/* =========================================================
   LOGO
   ========================================================= */
.logo{
  font-weight:900; letter-spacing:.01em; line-height:1; margin:0;
  background:linear-gradient(180deg,var(--lamp-hot),var(--lamp) 58%,var(--lamp-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,194,77,.42));
}

/* =========================================================
   TOGET
   ========================================================= */
.train{
  display:flex; align-items:flex-end;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin;
  /* skinnegang: skinne øverst, sviller under */
  background:
    linear-gradient(180deg,#aebbd6,#6b7c9e) left bottom 8px / 100% 4px repeat-x,
    repeating-linear-gradient(90deg,#4a3826 0 12px, transparent 12px 34px)
      left bottom 1px / 34px 7px repeat-x;
}
.train::-webkit-scrollbar{ height:6px; }
.train::-webkit-scrollbar-thumb{ background:#3a4a72; border-radius:99px; }

.carriage{
  position:relative; flex:0 0 auto;
  padding-bottom:19px;         /* plass til hjul over skinna */
  transition:transform .2s ease;
}
.carriage .body{
  position:relative; display:block; z-index:2;
  /* Rikelig sidemarg: skiltplata ligger i midten, og pynten
     (stjerne, hodeskalle, planet …) må ha plass i endene. */
  padding:9px 24px;
  border-radius:5px 5px 3px 3px;
  border:2px solid rgba(0,0,0,.42);
  box-shadow:inset 0 -10px 16px rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.35);
}
/* Skiltplata: vognene har svært ulike farger, så ordet får sin egen
   mørke plate. Da er lesbarheten lik uansett vogntype. */
.carriage .plate{
  display:block; white-space:nowrap;
  padding:5px 10px; border-radius:4px;
  background:rgba(12,16,28,.84);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  color:#f6f9ff; font-weight:800; letter-spacing:.02em;
}
.carriage .plate .hl{ font-style:normal; color:var(--lamp); }
.carriage .roof{
  position:absolute; left:-3px; right:-3px; top:-5px; height:7px; z-index:1;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#5d6b8c,#3c4762);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.carriage .wheels{
  position:absolute; left:9%; right:9%; bottom:9px; z-index:3;
  display:flex; justify-content:space-between;
}
.carriage .wheels i{
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #7d8ba8 0 26%, #333c52 28% 66%, #1a2033 68%);
  border:2px solid #10141f;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.coupling{
  flex:0 0 auto; width:13px; height:4px; margin-bottom:27px;
  border-radius:2px; background:linear-gradient(90deg,#4a5878,#7d8ba8,#4a5878);
}

/* pipe på lokomotivet */
.carriage .chimney{
  position:absolute; left:11px; top:-17px; width:13px; height:14px; z-index:1;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#2c3448,#1b2130);
  border:2px solid rgba(0,0,0,.45); border-bottom:none;
}

/* gjeldende vogn framhevet */
.carriage.current{ transform:translateY(-2px); }
.carriage.current .body{
  box-shadow:inset 0 -10px 16px rgba(0,0,0,.28),
             0 3px 0 rgba(0,0,0,.35),
             0 0 26px rgba(255,194,77,.55);
}
.carriage.current .plate{
  border-color:rgba(255,194,77,.65);
  background:rgba(20,14,4,.86);
}
.carriage.current .plate .hl{
  color:var(--lamp-hot);
  text-shadow:0 0 10px rgba(255,224,138,.9);
}

/* ny vogn ruller inn */
.carriage.arriving{ animation:rollIn .38s cubic-bezier(.2,.85,.3,1.15); }
@keyframes rollIn{
  0%{ transform:translateX(46px); opacity:0; }
  70%{ transform:translateX(-4px); opacity:1; }
  100%{ transform:none; }
}

/* ---------- felles detaljer på alle vogner ---------- */
/* Metallrammer med nagler i hver ende – det er dette som løfter
   kassa fra «farget boks» til «togvogn». */
.carriage .body::before,
.carriage .body::after{
  content:''; position:absolute; top:0; bottom:0; width:9px; z-index:1;
  background:
    radial-gradient(circle 1.4px at 50% 16%, rgba(255,255,255,.5) 0 60%, transparent 62%),
    radial-gradient(circle 1.4px at 50% 50%, rgba(255,255,255,.5) 0 60%, transparent 62%),
    radial-gradient(circle 1.4px at 50% 84%, rgba(255,255,255,.5) 0 60%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.5));
  background-repeat:no-repeat;
}
.carriage .body::before{ left:0; border-right:1px solid rgba(0,0,0,.35); }
.carriage .body::after{ right:0; border-left:1px solid rgba(0,0,0,.35); }

.carriage .deco{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit; overflow:hidden;
}
.carriage .plate{ position:relative; z-index:2; }

/* ---------- vogntyper ---------- */

/* Damplokomotiv – mørk grønn kjele med lykt */
.type-loco .body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0 22%, transparent 23%),
    linear-gradient(180deg,#42604f,#1d2c24);
  border-color:#0d1712; padding-left:34px;
}
.type-loco .roof{ background:linear-gradient(180deg,#54705f,#233029); }
.type-loco .deco{
  background:radial-gradient(circle 5px at 17px 50%, #ffe08a 0 55%, rgba(255,224,138,.3) 60%, transparent 74%);
}

/* Klassisk godsvogn – rødt panel, hvit stjerne */
.type-freight .body{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 14px),
    linear-gradient(180deg,#c4453c,#7e211c);
  border-color:#4a100d;
}
.type-freight .roof{ background:linear-gradient(180deg,#5d6b7a,#333d49); }
.type-freight .deco::before{
  content:''; position:absolute; left:5px; top:50%; width:15px; height:15px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.92);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* Kjølevogn – rimfrost og snø på taket */
.type-frost .body{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 15px),
    linear-gradient(180deg,#f4fbff 0 40%, #b7d9ea 100%);
  border-color:#5d8296;
}
.type-frost .roof{ background:linear-gradient(180deg,#ffffff,#c3dced); }
.type-frost .deco{
  background:
    radial-gradient(circle 6px at 14% 2px, #fff 0 72%, transparent 74%),
    radial-gradient(circle 8px at 40% 1px, #fff 0 72%, transparent 74%),
    radial-gradient(circle 6px at 66% 2px, #fff 0 72%, transparent 74%),
    radial-gradient(circle 7px at 90% 1px, #fff 0 72%, transparent 74%);
}

/* Jungelvogn – overgrodd med slyngplanter */
.type-jungle .body{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 13px),
    linear-gradient(180deg,#5c8a3c,#2f4d20);
  border-color:#1d3214;
}
.type-jungle .roof{ background:linear-gradient(180deg,#6f9b4a,#37542a); }
.type-jungle .deco{
  background:
    radial-gradient(circle 5px at 12% 3px, #8bc34a 0 72%, transparent 74%),
    radial-gradient(circle 4px at 30% 5px, #558b2f 0 72%, transparent 74%),
    radial-gradient(circle 6px at 52% 2px, #8bc34a 0 72%, transparent 74%),
    radial-gradient(circle 4px at 74% 5px, #558b2f 0 72%, transparent 74%),
    radial-gradient(circle 5px at 92% 3px, #8bc34a 0 72%, transparent 74%),
    linear-gradient(180deg, rgba(124,179,66,.9) 0 4px, transparent 4px);
}

/* Industrivogn – varselstriper og tannhjul */
.type-industri .body{
  background:linear-gradient(180deg,#f0b429,#b07d0a);
  border-color:#4a3405;
}
.type-industri .roof{ background:linear-gradient(180deg,#4a4f57,#2a2e34); }
.type-industri .deco{
  background:
    repeating-linear-gradient(-45deg,
      rgba(20,20,24,.9) 0 6px, transparent 6px 12px) bottom / 100% 8px no-repeat,
    radial-gradient(circle 3px at 12px 44%, #f0b429 0 60%, transparent 62%),
    radial-gradient(circle 7px at 12px 44%, #2a2e34 0 62%, transparent 64%);
}

/* Tankvogn – blank sylinder med jernbånd */
.type-tank .body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0 14%, transparent 34%),
    linear-gradient(180deg,#d8443c 0 30%, #8e211b 75%, #b8352d 100%);
  border-radius:15px; border-color:#4a100d;
}
.type-tank .roof{ display:none; }
.type-tank .deco{
  background:
    linear-gradient(90deg, transparent 22%, rgba(0,0,0,.42) 22% 25%, transparent 25%),
    linear-gradient(90deg, transparent 74%, rgba(0,0,0,.42) 74% 77%, transparent 77%);
}

/* Godterivogn – sukkerstang og kuler */
.type-candy .body{
  background:repeating-linear-gradient(115deg,
    #ff5fa2 0 11px, #fff2f7 11px 22px);
  border-color:#a01f56;
}
.type-candy .roof{ background:linear-gradient(180deg,#4fd1c5,#2c9c92); }
.type-candy .deco{
  background:
    radial-gradient(circle 4px at 11px 30%, #ffd23f 0 72%, transparent 74%),
    radial-gradient(circle 4px at 11px 70%, #4fd1c5 0 72%, transparent 74%),
    radial-gradient(circle 4px at calc(100% - 11px) 30%, #a06bff 0 72%, transparent 74%),
    radial-gradient(circle 4px at calc(100% - 11px) 70%, #ff7a2b 0 72%, transparent 74%);
}

/* Piratvogn – værbitt tre og dødningflagg */
.type-pirate .body{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 1px, transparent 1px 12px),
    linear-gradient(180deg,#7a5636,#3f2b18);
  border-color:#241609;
}
.type-pirate .roof{ background:linear-gradient(180deg,#6a4a2e,#332111); }
.type-pirate .deco::before{
  content:''; position:absolute; left:4px; top:50%; width:17px; height:15px;
  transform:translateY(-50%); border-radius:2px;
  background:
    radial-gradient(circle 1.5px at 38% 40%, #14161c 0 70%, transparent 72%),
    radial-gradient(circle 1.5px at 62% 40%, #14161c 0 70%, transparent 72%),
    radial-gradient(circle 4px at 50% 42%, #f3f6ff 0 70%, transparent 72%),
    #14161c;
}

/* Dinosaurvogn – et egg i redet */
.type-dino .body{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 13px),
    linear-gradient(180deg,#6b8f4e,#31462a);
  border-color:#1c2a16;
}
.type-dino .roof{ background:linear-gradient(180deg,#7fa05c,#3b5232); }
.type-dino .deco::before{
  content:''; position:absolute; left:5px; top:50%; width:14px; height:17px;
  margin-top:-8px;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle 1.6px at 34% 40%, rgba(120,90,50,.85) 0 70%, transparent 72%),
    radial-gradient(circle 1.4px at 66% 62%, rgba(120,90,50,.85) 0 70%, transparent 72%),
    linear-gradient(180deg,#f5ead0,#cdb98d);
}

/* Spøkelsesvogn – grønt lys bak gardinene */
.type-ghost .body{
  background:linear-gradient(180deg,#3a2a52,#1a1029);
  border-color:#0d0718;
}
.type-ghost .roof{ background:linear-gradient(180deg,#4a3568,#251740); }
.type-ghost .deco{
  background:
    radial-gradient(ellipse 6px 9px at 12px 50%, rgba(93,255,163,.95) 0 48%, rgba(93,255,163,.3) 62%, transparent 78%),
    radial-gradient(ellipse 6px 9px at calc(100% - 12px) 50%, rgba(93,255,163,.95) 0 48%, rgba(93,255,163,.3) 62%, transparent 78%);
  animation:ghostGlow 2.6s ease-in-out infinite;
}
@keyframes ghostGlow{ 50%{ opacity:.5; } }

/* Vulkanvogn – glødende sprekker i svart stein */
.type-volcano .body{
  background:
    repeating-linear-gradient(62deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,#3a3336,#161113);
  border-color:#0a0708;
}
.type-volcano .roof{ background:linear-gradient(180deg,#4a4045,#221b1e); }
.type-volcano .deco{
  background:
    linear-gradient(74deg, transparent 26%, #ff6b1a 26% 28%, transparent 28%),
    linear-gradient(-68deg, transparent 52%, #ffb300 52% 54%, transparent 54%),
    linear-gradient(80deg, transparent 72%, #ff4d1a 72% 74%, transparent 74%);
  filter:drop-shadow(0 0 4px rgba(255,107,26,.9));
  animation:lavaPulse 2.2s ease-in-out infinite;
}
@keyframes lavaPulse{ 50%{ filter:drop-shadow(0 0 8px rgba(255,160,26,1)); } }

/* Romvogn – stjernehimmel bak glasset */
.type-space .body{
  background:
    radial-gradient(circle .9px at 18% 28%, #fff 0 60%, transparent 62%),
    radial-gradient(circle .8px at 42% 66%, #fff 0 60%, transparent 62%),
    radial-gradient(circle 1px at 66% 24%, #fff 0 60%, transparent 62%),
    radial-gradient(circle .8px at 88% 60%, #fff 0 60%, transparent 62%),
    linear-gradient(180deg,#3b2a6b,#160e2e);
  border-color:#0c0720;
}
.type-space .roof{
  background:linear-gradient(90deg,#7dd3fc,#c77dff);
  height:5px; top:-4px;
}
.type-space .deco::before{
  content:''; position:absolute; right:4px; top:50%; width:15px; height:15px;
  transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(circle at 34% 34%, #ffd08a 0 40%, #d97b3f 70%, #8a441c 100%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.25), 0 0 10px rgba(199,125,255,.6);
}

/* Gullvogn – ornamentert, kommer på gylne ord */
.type-gold .body{
  background:linear-gradient(180deg,#ffe89a,#f0b429 55%,#c98708);
  border-color:#8a5c07; overflow:hidden;
}
.type-gold .deco{
  background:
    radial-gradient(circle 3.5px at 12px 22%, rgba(255,255,255,.9) 0 62%, transparent 64%),
    radial-gradient(circle 3.5px at 12px 78%, rgba(255,255,255,.9) 0 62%, transparent 64%),
    radial-gradient(circle 3.5px at calc(100% - 12px) 22%, rgba(255,255,255,.9) 0 62%, transparent 64%),
    radial-gradient(circle 3.5px at calc(100% - 12px) 78%, rgba(255,255,255,.9) 0 62%, transparent 64%);
}
.type-gold .deco::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:shine 2.4s ease-in-out infinite;
}
@keyframes shine{ 0%,60%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
.type-gold .roof{ background:linear-gradient(180deg,#ffd45e,#b8860b); }

/* =========================================================
   SIGNAL (erstatter maskoten – reagerer på svar)
   ========================================================= */
.signal{
  flex:0 0 auto; width:26px; height:52px; border-radius:9px;
  background:linear-gradient(180deg,#232c44,#161d30);
  border:2px solid #35415f;
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-around; padding:5px 0;
}
.signal i{
  width:12px; height:12px; border-radius:50%;
  background:#2a3450; transition:background .18s, box-shadow .18s;
}
.signal[data-state="go"] i:first-child{
  background:var(--signal-green); box-shadow:0 0 14px var(--signal-green);
}
.signal[data-state="stop"] i:last-child{
  background:var(--signal-red); box-shadow:0 0 14px var(--signal-red);
}
.signal[data-state="wait"] i:first-child{
  background:var(--lamp); box-shadow:0 0 14px var(--lamp);
}

/* =========================================================
   FELLES KOMPONENTER
   ========================================================= */
.stat{ display:flex; flex-direction:column; line-height:1; }
.stat .k{
  font-size:.6rem; letter-spacing:.13em; color:var(--dim);
  font-weight:800; text-transform:uppercase;
}
.stat .v{ font-weight:900; font-variant-numeric:tabular-nums; color:var(--lamp); }
.stat .v.alt{ color:var(--steam); }
.stat.lives .v{ color:var(--signal-red); }

.heat-track{
  flex:1; height:14px; border-radius:99px; overflow:hidden;
  background:#151d33; border:1px solid var(--line);
}
.heat-fill{
  height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--lamp-deep),var(--lamp) 45%,var(--lamp-hot));
  transition:width .1s linear;
}
.heat-fill.low{ background:linear-gradient(90deg,#c81e2a,var(--signal-red)); }
.heat-fill.frozen{ background:linear-gradient(90deg,#2f6fd0,#7fd4ff); }
.time-val{ font-weight:900; font-variant-numeric:tabular-nums; text-align:right; }
.time-val.low{ color:var(--signal-red); animation:pulse .5s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:scale(1.16); } }

.combo{ display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .2s; }
.combo.on{ opacity:1; }
.combo-label{
  font-weight:900; font-size:.85rem; letter-spacing:.05em;
  color:var(--lamp-hot); white-space:nowrap;
}
.combo-track{
  flex:1; height:6px; border-radius:99px;
  background:#151d33; border:1px solid var(--line); overflow:hidden;
}
.combo-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--violet),var(--lamp-hot));
  transition:width .25s ease;
}
.combo.maxed .combo-label{ animation:pulse .7s ease-in-out infinite; }

.powerups{ display:flex; gap:7px; flex-wrap:wrap; }
.powerups:empty{ display:none; }
.pu{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  background:linear-gradient(180deg,#2d3a5e,#1e2842);
  border:2px solid var(--violet); border-radius:12px;
  color:var(--ink); font-weight:800;
  box-shadow:0 0 14px rgba(155,123,255,.24);
  animation:puIn .3s cubic-bezier(.2,.9,.3,1.5);
}
.pu:disabled{ opacity:.45; cursor:default; }
.pu .pc{ color:var(--violet); font-weight:900; }
@keyframes puIn{ from{ transform:scale(.5); opacity:0; } }

.preview{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:700; color:var(--dim);
}
.preview.good .preview-text{ color:var(--signal-green); }
.preview.bad .preview-text{ color:var(--signal-red); }
.preview-points{ font-weight:900; color:var(--lamp-hot); white-space:nowrap; }

.msg{ font-weight:800; line-height:1.3; }
.msg.ok{ color:var(--signal-green); }
.msg.bad{ color:var(--signal-red); }
.msg.info{ color:var(--muted); font-weight:600; }
.msg.gold{ color:var(--lamp-hot); }

input[type="text"]{
  background:#151d33; color:var(--ink);
  border:2px solid #3a4a72; border-radius:13px;
  font-weight:700;
  /* minst 16px hindrer at iOS zoomer inn ved fokus */
  font-size:16px;
}
input[type="text"]::placeholder{ color:var(--dim); font-weight:600; }
input[type="text"]:focus{ border-color:var(--lamp); }
input.shake{ animation:shake .3s; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); } 60%{ transform:translateX(8px); }
}

.btn{
  border:none; cursor:pointer; touch-action:manipulation;
  background:linear-gradient(180deg,var(--lamp-hot),var(--lamp) 58%,var(--lamp-deep));
  color:#3a2500; font-weight:900; letter-spacing:.05em;
  border-radius:99px; box-shadow:0 5px 0 #9c6208, 0 10px 24px rgba(255,194,77,.3);
}
.btn:active:not(:disabled){ transform:translateY(3px); box-shadow:0 2px 0 #9c6208; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn-ghost{
  background:transparent; border:2px solid var(--line); color:var(--muted);
  border-radius:99px; font-weight:700; cursor:pointer;
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--lamp); }
.btn-ghost[aria-pressed="true"]{ color:var(--ink); border-color:var(--signal-green); }

/* modusvalg */
.mode-card{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  background:var(--panel); border:2px solid var(--line);
  border-radius:15px; color:var(--ink);
  transition:border-color .16s, background .16s;
}
.mode-card:hover{ border-color:var(--violet); }
.mode-card[aria-checked="true"]{
  border-color:var(--lamp);
  background:linear-gradient(100deg, rgba(255,194,77,.18), rgba(255,194,77,.04));
  box-shadow:0 0 20px rgba(255,194,77,.2);
}
.mode-card .mi{ font-size:1.55rem; flex:0 0 auto; line-height:1; }
.mode-card .mname{ font-weight:900; display:block; }
.mode-card .mdesc{ color:var(--muted); font-size:.82rem; display:block; margin-top:2px; line-height:1.35; }

/* =========================================================
   TOGSTALLEN — oversikt over vogntyper
   ========================================================= */
.depot{ display:grid; gap:9px; }
.depot-item{
  display:flex; align-items:center; gap:11px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:13px; padding:9px 11px;
}
.depot-item .mini{ flex:0 0 auto; }
.depot-item .dt{ min-width:0; }
.depot-item .dn{ font-weight:900; font-size:.9rem; display:block; }
.depot-item .dd{ color:var(--muted); font-size:.76rem; display:block; margin-top:1px; line-height:1.3; }

/* tom plass i skjulet – vogna er ikke låst opp ennå */
.depot-item.empty{
  border-style:dashed; border-color:var(--line-soft);
  background:rgba(255,255,255,.02);
}
.depot-item.empty .dn{ color:var(--dim); }
.slot-ghost{
  width:52px; height:26px; border-radius:4px; flex:0 0 auto;
  border:2px dashed #3a4a72; position:relative;
  display:flex; align-items:center; justify-content:center;
  color:#3f5183; font-weight:900; font-size:.85rem;
}
.slot-ghost::after{
  content:''; position:absolute; left:6px; right:6px; bottom:-7px; height:8px;
  background:
    radial-gradient(circle 4px at 18% 50%, #2f3b5c 0 62%, transparent 64%),
    radial-gradient(circle 4px at 82% 50%, #2f3b5c 0 62%, transparent 64%);
  background-repeat:no-repeat;
}

/* kortet med det aktive oppdraget */
.mission-card{
  display:flex; flex-direction:column; gap:3px;
  border:2px solid var(--lamp); border-radius:15px;
  background:linear-gradient(100deg, rgba(255,194,77,.14), rgba(255,194,77,.03));
  padding:12px 14px;
}
.mission-card .mk{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lamp); font-weight:900;
}
.mission-card .mg{ font-weight:900; font-size:.98rem; line-height:1.3; }
.mission-card .mh{ color:var(--muted); font-size:.74rem; margin-top:4px; }
.mission-bar{
  height:6px; border-radius:99px; margin-top:6px;
  background:#151d33; border:1px solid var(--line); overflow:hidden;
}
.mission-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--lamp-deep),var(--lamp-hot));
  transition:width .3s ease;
}
.mission-count{ color:var(--dim); font-size:.72rem; font-weight:800; margin-top:3px; display:block; }

/* =========================================================
   PAKKE (loot crate)
   ========================================================= */
.crate-card{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 14px; text-align:center;
  border:2px solid var(--lamp); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,194,77,.16), rgba(255,194,77,.03));
  box-shadow:0 0 30px rgba(255,194,77,.3);
}
.crate-card .ck{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lamp); font-weight:900;
}
.crate-card .cs{ color:var(--muted); font-size:.82rem; }

.crate{
  width:104px; height:80px; position:relative; cursor:pointer;
  background:none; border:none; padding:0;
  animation:crateIdle 1.8s ease-in-out infinite;
}
.crate:disabled{ cursor:default; animation:none; }
/* Står stille når man sikter på den – lettere å treffe. */
.crate:hover, .crate:focus-visible{ animation-play-state:paused; }
@keyframes crateIdle{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%{ transform:translateY(-4px) rotate(1deg); }
}
.crate .box, .crate .lid{
  position:absolute; left:0; right:0;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 11px),
    linear-gradient(180deg,#a9713f,#7d4f28);
  border:2px solid #4d2f16; border-radius:4px;
}
.crate .box{ bottom:0; height:56px; }
.crate .lid{ top:0; height:22px; transform-origin:50% 100%; }
.crate .band{
  position:absolute; left:50%; top:0; bottom:0; width:15px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--lamp-hot),var(--lamp-deep));
  border-left:2px solid rgba(0,0,0,.3); border-right:2px solid rgba(0,0,0,.3);
}
.crate .glow{
  position:absolute; left:50%; top:26px; width:8px; height:8px;
  transform:translateX(-50%); border-radius:50%;
  background:var(--lamp-hot); box-shadow:0 0 22px 10px rgba(255,224,138,.75);
  opacity:0;
}
.crate.opening{ animation:crateShake .5s ease; }
@keyframes crateShake{
  0%,100%{ transform:translateX(0) rotate(0); }
  20%{ transform:translateX(-6px) rotate(-4deg); }
  45%{ transform:translateX(6px) rotate(4deg); }
  70%{ transform:translateX(-4px) rotate(-2deg); }
}
.crate.opening .lid{ animation:lidOff .55s .42s cubic-bezier(.3,-0.4,.6,1) forwards; }
@keyframes lidOff{
  to{ transform:translateY(-58px) rotate(-24deg); opacity:0; }
}
.crate.opening .glow{ animation:glowUp .5s .45s ease forwards; }
@keyframes glowUp{ to{ opacity:1; transform:translateX(-50%) scale(2.4); } }
.crate.opening .band{ animation:bandOff .3s .3s ease forwards; }
@keyframes bandOff{ to{ opacity:0; transform:translateX(-50%) scaleY(1.4); } }

.crate-reveal{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  animation:revealIn .5s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes revealIn{
  0%{ transform:scale(.4) translateY(14px); opacity:0; }
  100%{ transform:none; opacity:1; }
}
.crate-reveal .mini{ width:78px; height:38px; }
.crate-reveal .rn{ font-weight:900; font-size:1.15rem; color:var(--lamp-hot); }
.crate-reveal .rd{ color:var(--muted); font-size:.83rem; max-width:30ch; }

/* ---------- vognhjulet (slot machine) ---------- */
.reel-window{
  position:relative; width:100%; height:62px;
  overflow:hidden; border-radius:12px;
  background:linear-gradient(180deg,#0f1526,#161e33);
  border:2px solid var(--line);
  /* toner ut mot kantene så det ser ut som et hjul som ruller */
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.reel{ will-change:transform; }
.reel-item{
  height:62px; display:flex; align-items:center; gap:11px;
  padding:0 14px;
}
.reel-item .mini{ flex:0 0 auto; }
.reel-item .rl{ font-weight:900; font-size:.92rem; color:var(--ink); }
.reel-marker{
  position:absolute; inset:0; pointer-events:none;
  border-top:2px solid rgba(255,194,77,.5);
  border-bottom:2px solid rgba(255,194,77,.5);
  box-shadow:inset 0 0 22px rgba(255,194,77,.18);
}
.crate-card.spinning{ animation:none; }
.crate-card.landed .reel-marker{ border-color:var(--lamp-hot); }

/* merknad på knappen inn til vognskjulet */
.dot-badge{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--signal-red); box-shadow:0 0 10px var(--signal-red);
  animation:pulse 1.1s ease-in-out infinite;
  vertical-align:middle; margin-left:2px;
}
.crate-mini{ font-size:1.7rem; line-height:1; flex:0 0 auto; }
.crate-hint{
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:2px solid var(--lamp); border-radius:14px;
  background:linear-gradient(100deg, rgba(255,194,77,.16), rgba(255,194,77,.03));
  color:var(--ink); font-weight:800; font-size:.9rem;
  padding:11px 15px; cursor:pointer; width:100%;
  box-shadow:0 0 24px rgba(255,194,77,.28);
}

/* Liten vognbrikke – arver vogntypenes farger, men i mindre format. */
.mini{
  width:56px; height:28px; border-radius:4px; position:relative;
  border:2px solid rgba(0,0,0,.45); overflow:hidden;
  flex:0 0 auto;
}
.mini .deco{ position:absolute; inset:0; }
.mini::after{
  content:''; position:absolute; left:5px; right:5px; bottom:-1px; height:7px;
  background:
    radial-gradient(circle 3px at 20% 100%, #1a2033 0 62%, transparent 64%),
    radial-gradient(circle 3px at 80% 100%, #1a2033 0 62%, transparent 64%);
  background-repeat:no-repeat;
}

.mini.type-loco{ background:linear-gradient(180deg,#42604f,#1d2c24); }
.mini.type-loco .deco{
  background:radial-gradient(circle 3px at 9px 50%, #ffe08a 0 55%, transparent 70%);
}
.mini.type-freight{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 1px, transparent 1px 10px),
    linear-gradient(180deg,#c4453c,#7e211c);
}
.mini.type-freight .deco::before{
  content:''; position:absolute; left:8px; top:50%; width:10px; height:10px;
  transform:translateY(-50%); background:rgba(255,255,255,.92);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.mini.type-frost{ background:linear-gradient(180deg,#f4fbff 0 40%, #b7d9ea 100%); }
.mini.type-frost .deco{
  background:
    radial-gradient(circle 6px at 26% -3px, #fff 0 70%, transparent 72%),
    radial-gradient(circle 7px at 62% -3px, #fff 0 70%, transparent 72%);
}
.mini.type-jungle{ background:linear-gradient(180deg,#5c8a3c,#2f4d20); }
.mini.type-jungle .deco{
  background:
    radial-gradient(circle 4px at 20% 0, #7cb342 0 70%, transparent 72%),
    radial-gradient(circle 5px at 58% -1px, #7cb342 0 70%, transparent 72%),
    radial-gradient(circle 3px at 84% 1px, #558b2f 0 70%, transparent 72%);
}
.mini.type-industri{ background:linear-gradient(180deg,#f0b429,#b07d0a); }
.mini.type-industri .deco{
  background:repeating-linear-gradient(-45deg,
    rgba(20,20,24,.9) 0 5px, transparent 5px 10px) bottom / 100% 6px no-repeat;
}
.mini.type-tank{
  border-radius:13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0 16%, transparent 36%),
    linear-gradient(180deg,#d8443c 0 30%, #8e211b 100%);
}
.mini.type-tank .deco{
  background:
    linear-gradient(90deg, transparent 24%, rgba(0,0,0,.42) 24% 28%, transparent 28%),
    linear-gradient(90deg, transparent 70%, rgba(0,0,0,.42) 70% 74%, transparent 74%);
}
.mini.type-candy{ background:repeating-linear-gradient(115deg,#ff5fa2 0 9px,#fff2f7 9px 18px); }
.mini.type-pirate{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 1px, transparent 1px 9px),
    linear-gradient(180deg,#7a5636,#3f2b18);
}
.mini.type-pirate .deco::before{
  content:''; position:absolute; left:7px; top:50%; width:13px; height:11px;
  transform:translateY(-50%); border-radius:2px;
  background:
    radial-gradient(circle 3px at 50% 42%, #f3f6ff 0 70%, transparent 72%),
    #14161c;
}
.mini.type-dino{ background:linear-gradient(180deg,#6b8f4e,#31462a); }
.mini.type-dino .deco::before{
  content:''; position:absolute; left:8px; bottom:3px; width:11px; height:13px;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:linear-gradient(180deg,#f5ead0,#cdb98d);
}
.mini.type-ghost{ background:linear-gradient(180deg,#3a2a52,#1a1029); }
.mini.type-ghost .deco{
  background:
    radial-gradient(ellipse 5px 7px at 26% 52%, rgba(93,255,163,.95) 0 45%, transparent 72%),
    radial-gradient(ellipse 5px 7px at 72% 52%, rgba(93,255,163,.95) 0 45%, transparent 72%);
}
.mini.type-volcano{ background:linear-gradient(180deg,#3a3336,#161113); }
.mini.type-volcano .deco{
  background:
    linear-gradient(74deg, transparent 30%, #ff6b1a 30% 33%, transparent 33%),
    linear-gradient(-68deg, transparent 56%, #ffb300 56% 59%, transparent 59%);
  filter:drop-shadow(0 0 3px rgba(255,107,26,.9));
}
.mini.type-space{
  background:
    radial-gradient(circle .9px at 22% 30%, #fff 0 60%, transparent 62%),
    radial-gradient(circle .9px at 52% 70%, #fff 0 60%, transparent 62%),
    radial-gradient(circle 1px at 76% 26%, #fff 0 60%, transparent 62%),
    linear-gradient(180deg,#3b2a6b,#160e2e);
}
.mini.type-space .deco::before{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(circle at 34% 34%, #ffd08a 0 40%, #d97b3f 70%, #8a441c 100%);
}
.mini.type-gold{ background:linear-gradient(180deg,#ffe89a,#c98708); }

/* sjeldenhet – ramme rundt brikka i vognskjulet */
.rarity-1{ --rar:#9fb0d4; }
.rarity-2{ --rar:#5fc8ff; }
.rarity-3{ --rar:#c77dff; }
.rarity-4{ --rar:#ffc24d; }
.depot-item.rarity-2 .mini,
.depot-item.rarity-3 .mini,
.depot-item.rarity-4 .mini,
.reel-item.rarity-2 .mini,
.reel-item.rarity-3 .mini,
.reel-item.rarity-4 .mini{
  border-color:var(--rar);
  box-shadow:0 0 12px color-mix(in srgb, var(--rar) 55%, transparent);
}
.rar-tag{
  display:inline-block; font-size:.6rem; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--rar); margin-left:6px;
}

/* =========================================================
   OPPLÅSNING
   ========================================================= */
/* Plasseres av JS rett over toget – nederst ville den dekket
   skrivefeltet på mobil, øverst ville den dekket poengsummen. */
.unlock-toast{
  position:fixed; left:50%; top:12vh;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; z-index:70;
  background:linear-gradient(180deg,#2b3555,#1a2138);
  border:2px solid var(--lamp); border-radius:15px;
  padding:11px 16px; max-width:min(420px,92vw);
  box-shadow:0 0 34px rgba(255,194,77,.45);
  animation:toastIn .45s cubic-bezier(.2,.9,.3,1.4);
}
.unlock-toast .ut{ min-width:0; }
.unlock-toast .uk{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lamp); font-weight:900; display:block;
}
.unlock-toast .un{ font-weight:900; display:block; margin-top:1px; }
@keyframes toastIn{
  0%{ transform:translate(-50%,-26px); opacity:0; }
  100%{ transform:translate(-50%,0); opacity:1; }
}
.unlock-toast.leaving{ animation:toastOut .4s ease forwards; }
@keyframes toastOut{ to{ transform:translate(-50%,-26px); opacity:0; } }

/* =========================================================
   RESULTAT
   ========================================================= */
.rank{
  font-weight:900;
  background:linear-gradient(180deg,var(--lamp-hot),var(--lamp-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,194,77,.5));
}
.final-score{ font-weight:900; color:var(--lamp); line-height:1; }
.final-score .u{
  font-size:.9rem; color:var(--dim); letter-spacing:.16em;
  display:block; margin-top:5px;
}
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.stat-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:9px 8px;
}
.stat-card .k{
  font-size:.58rem; letter-spacing:.1em; color:var(--dim);
  font-weight:800; text-transform:uppercase; display:block;
}
.stat-card .v{
  font-size:1.1rem; font-weight:900; margin-top:3px;
  display:block; overflow-wrap:anywhere;
}
.best-line{ color:var(--muted); font-weight:700; font-size:.88rem; }
.best-line.new{ color:var(--lamp-hot); }

/* nullstilling – destruktiv, så den er dempet til den er «armert» */
.btn-danger{
  background:transparent; border:2px solid #4a2b3a; color:#b8899a;
  border-radius:99px; padding:9px 16px; min-height:44px;
  font-weight:700; font-size:.8rem; cursor:pointer;
  transition:border-color .16s, color .16s, background .16s;
}
.btn-danger:hover{ border-color:var(--signal-red); color:var(--signal-red); }
.btn-danger.armed{
  border-color:var(--signal-red); color:#fff;
  /* Pulser farge, ikke størrelse: en bekreftelsesknapp som hopper
     er vanskeligere å treffe – særlig med tommelen. */
  animation:dangerPulse 1s ease-in-out infinite;
}
@keyframes dangerPulse{
  0%,100%{ background:rgba(255,95,107,.16); box-shadow:0 0 0 rgba(255,95,107,0); }
  50%{ background:rgba(255,95,107,.34); box-shadow:0 0 16px rgba(255,95,107,.5); }
}

/* versjonsbytte */
.switch-link{
  color:var(--dim); font-size:.78rem; text-decoration:none;
  border-bottom:1px dotted var(--dim);
}
.switch-link:hover{ color:var(--lamp); border-color:var(--lamp); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}