/* ===== Robot mot Monstre - stilark ===== */
:root{
  --ink:#141a2e;
  --paper:#f4f7ff;
  --green:#39c26a;
  --green-d:#1f8746;
  --blue:#3aa0ee;
  --blue-d:#1f6bb0;
  --red:#ef4d5a;
  --red-d:#b32734;
  --yellow:#f7c33a;
  --yellow-d:#c08c0d;
  --panel:#1b2340;
  --panel-2:#252f55;
  --btn-h: clamp(54px, 9vh, 82px);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;width:100%;
  overflow:hidden;background:#080c18;color:var(--paper);
  font-family:"Verdana","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  font-weight:700;
  touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#app{position:fixed;inset:0;overflow:hidden;}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;}

.hide{display:none !important;}
.layer{position:absolute;inset:0;pointer-events:none;}
.layer button{pointer-events:auto;}
/* touch-action arves ikke, saa knappene maa si fra selv at de ikke skal
   starte scrolling/zoom paa nettbrettet. */
button{touch-action:none;-webkit-touch-callout:none;}

/* ===================== HUD ===================== */
#hud{padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));}
.hud-row{display:flex;align-items:center;gap:8px;}
.hud-box{
  background:rgba(12,18,38,.62);border:3px solid rgba(255,255,255,.22);
  border-radius:14px;padding:3px 10px;display:flex;align-items:center;gap:6px;
  font-size:clamp(16px,3.2vh,26px);line-height:1.25;
}
.hud-box .ico{font-size:1.05em;}
.hud-box.big{font-size:clamp(20px,4vh,34px);padding:6px 16px;}
/* Helse som skala, ikke tre hjerter */
.hpbox{gap:8px;}
.hpbar{
  width:clamp(92px,17vw,190px);height:clamp(13px,2.3vh,21px);
  border-radius:999px;background:rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.22);overflow:hidden;
}
#hpFill{
  height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#63e08a,#39c26a);
  transition:width .16s ease, background .3s ease;
}
#hpFill.mid{background:linear-gradient(90deg,#ffd93d,#f0a63c);}
#hpFill.low{background:linear-gradient(90deg,#ff8a8a,#ef4d5a);}
#hpNum{font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right;
  font-size:clamp(13px,2.5vh,21px);}
.shield-ico{font-size:1em;}

/* Aktive kraftpakker */
.boosts{display:flex;gap:6px;}
.boost{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(12,18,38,.62);border:3px solid rgba(255,255,255,.22);
  border-radius:12px;padding:2px 7px 4px;
}
.boost span{font-size:clamp(15px,2.9vh,24px);line-height:1;}
.boost i{display:block;height:4px;width:clamp(22px,4vw,40px);border-radius:999px;
  background:#f7c33a;transition:width .1s linear;}
.hud-grow{flex:1;min-width:40px;}
.progress{
  position:relative;height:clamp(14px,2.4vh,22px);border-radius:999px;
  background:rgba(12,18,38,.62);border:3px solid rgba(255,255,255,.22);
}
#progressFill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#63e0ff,#39c26a);transition:width .18s linear;}
.progress .flag{position:absolute;right:-4px;top:50%;transform:translateY(-55%);font-size:clamp(14px,2.4vh,22px);}
.icon-btn{
  font-size:clamp(20px,3.6vh,30px);width:clamp(42px,7vh,58px);height:clamp(42px,7vh,58px);
  border-radius:14px;border:3px solid rgba(255,255,255,.25);
  background:rgba(12,18,38,.62);color:var(--paper);cursor:pointer;
}
.bosswrap{display:flex;align-items:center;gap:8px;margin:8px auto 0;max-width:62%;}
.boss-face{font-size:clamp(20px,4vh,34px);}
.bossbar{flex:1;height:clamp(16px,3vh,26px);border-radius:999px;background:rgba(12,18,38,.72);border:3px solid rgba(255,255,255,.3);overflow:hidden;}
#bossFill{height:100%;width:100%;background:linear-gradient(90deg,#ff8a3d,#ef4d5a);transition:width .12s linear;}

/* ===================== TOUCH ===================== */
/* Venstre halvdel er styrespak: legg tommelen hvor som helst, saa dukker
   spaken opp der. Samme som i Brawl Stars. */
#stickZone{
  position:absolute;left:0;bottom:0;width:50%;height:78%;
  pointer-events:auto;touch-action:none;
}
#stick{
  position:absolute;left:clamp(96px,14vw,170px);bottom:clamp(86px,16vh,150px);
  width:clamp(130px,25vh,190px);height:clamp(130px,25vh,190px);
  transform:translate(-50%,50%);
  border-radius:50%;border:5px solid rgba(255,255,255,.3);
  background:rgba(30,42,78,.3);
  pointer-events:none;opacity:.4;transition:opacity .12s ease;
}
#stick.on{opacity:.95;transition:none;}
#stickKnob{
  position:absolute;left:50%;top:50%;
  width:46%;height:46%;border-radius:50%;
  background:rgba(58,160,238,.8);border:4px solid rgba(255,255,255,.6);
  box-shadow:0 4px 0 rgba(0,0,0,.3);
  transform:translate(-50%,-50%);
}
/* Hopp og skyt staar diagonalt fra hverandre, saa tommelen treffer
   den ene uten aa dra borti den andre. */
.pad{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:clamp(14px,3vw,34px);align-items:flex-end;}
.pad-right{right:calc(12px + env(safe-area-inset-right));
  display:grid;grid-template-areas:"hammer jet" "shoot jump";
  column-gap:clamp(14px,3vw,34px);row-gap:clamp(8px,2vh,18px);align-items:end;justify-items:center;}
.pad-right .shoot{grid-area:shoot;margin-bottom:clamp(44px,9vh,86px);}
.pad-right .jump{grid-area:jump;}
.pad-right .hammer{grid-area:hammer;}
.pad-right .jet{grid-area:jet;}
.tbtn{
  width:clamp(74px,15.5vh,124px);height:clamp(74px,15.5vh,124px);
  border-radius:50%;border:5px solid rgba(255,255,255,.45);
  font-size:clamp(28px,6vh,48px);line-height:1;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,42,78,.55);
  box-shadow:0 6px 0 rgba(0,0,0,.35);
  transition:transform .06s ease, box-shadow .06s ease, background .06s ease;
  cursor:pointer;
}
.tbtn.jump{background:rgba(57,194,106,.55);}
.tbtn.shoot{background:rgba(239,77,90,.55);width:clamp(84px,17.5vh,140px);height:clamp(84px,17.5vh,140px);}
.tbtn.down{transform:translateY(5px) scale(.95);box-shadow:0 1px 0 rgba(0,0,0,.35);background:rgba(255,255,255,.5);}

/* Hammer og jetpakke - litt mindre enn hopp og skyt, rett over dem */
.tbtn.hammer,.tbtn.jet{position:relative;width:clamp(62px,13vh,104px);height:clamp(62px,13vh,104px);font-size:clamp(24px,5vh,40px);}
.tbtn.hammer{background:rgba(240,166,60,.55);overflow:hidden;}
.tbtn.jet{background:rgba(58,160,238,.55);}
/* hammeren fylles opp nedenfra mens den lader, og blir helt lys naar den er klar */
.tbtn.hammer .klar{position:absolute;left:0;right:0;bottom:0;height:calc(var(--klar,1) * 100%);
  background:rgba(255,224,102,.35);pointer-events:none;}
.tbtn.hammer.venter{opacity:.6;}
/* tanken ved siden av jetknappen: gul naar den er full, roed naar den er nesten tom */
.tbtn.jet .tank{position:absolute;left:clamp(-20px,-2.2vh,-14px);bottom:10%;width:clamp(10px,1.6vh,14px);height:80%;
  border-radius:8px;background:rgba(12,18,38,.72);border:2px solid rgba(255,255,255,.6);overflow:hidden;pointer-events:none;}
.tbtn.jet .tank b{position:absolute;left:0;right:0;bottom:0;height:calc(var(--tank,1) * 100%);
  background:linear-gradient(#ffe066,#ff8a1e);}
.tbtn.jet.lav .tank b{background:#ef4d5a;}
.tbtn.jet.flyr{background:rgba(255,179,71,.7);}
.tbtn.jet.tom{opacity:.55;}

/* ===================== SCREENS ===================== */
#screens{position:absolute;inset:0;pointer-events:none;}
.screen{
  position:absolute;inset:0;pointer-events:auto;
  background:rgba(8,12,24,.78);
  display:flex;align-items:center;justify-content:center;
  padding:calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.screen.center{text-align:center;}

h1,h2{margin:0;}
h2{font-size:clamp(24px,5.6vh,46px);letter-spacing:2px;}

.big-btn{
  font-family:inherit;font-weight:900;color:#fff;cursor:pointer;
  border:none;border-radius:18px;
  font-size:clamp(18px,3.6vh,30px);letter-spacing:1px;
  padding:0 clamp(16px,3vw,32px);height:var(--btn-h);min-width:var(--btn-h);
  background:var(--blue);box-shadow:0 6px 0 var(--blue-d);
  transition:transform .06s ease, box-shadow .06s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.big-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--blue-d);}
.big-btn.green{background:var(--green);box-shadow:0 6px 0 var(--green-d);}
.big-btn.green:active{box-shadow:0 1px 0 var(--green-d);}
.big-btn.red{background:var(--red);box-shadow:0 6px 0 var(--red-d);}
.big-btn.red:active{box-shadow:0 1px 0 var(--red-d);}
.big-btn.yellow{background:var(--yellow);box-shadow:0 6px 0 var(--yellow-d);color:#3a2a00;}
.big-btn.yellow:active{box-shadow:0 1px 0 var(--yellow-d);}
.big-btn.small{padding:0;width:var(--btn-h);}
.big-btn.wide{width:100%;}
.big-btn[disabled]{filter:grayscale(.75) brightness(.7);box-shadow:none;transform:none;}

.btn-col{display:flex;flex-direction:column;gap:clamp(8px,1.8vh,16px);align-items:stretch;}
.btn-row{display:flex;gap:clamp(8px,1.8vw,16px);justify-content:center;}

/* --- Title --- */
.title-wrap{display:flex;align-items:center;gap:clamp(12px,4vw,48px);}
.bot-preview{width:clamp(110px,22vh,220px);height:auto;}
.title-text h1{display:flex;flex-direction:column;line-height:.92;margin-bottom:clamp(10px,3vh,26px);}
.t1{font-size:clamp(34px,9vh,78px);color:#8fd6ff;text-shadow:0 4px 0 #1b4a6b;letter-spacing:2px;}
.t2{font-size:clamp(16px,3.4vh,30px);color:#f7c33a;letter-spacing:6px;margin:2px 0;}
.t3{font-size:clamp(34px,9vh,78px);color:#8fffa8;text-shadow:0 4px 0 #1b6b3a;letter-spacing:2px;}
/* Logoen (art/grafikk/logo.png). Mangler den, vises teksten over i stedet. */
.logo{display:block;height:clamp(120px,38vh,330px);width:auto;max-width:min(62vw,560px);object-fit:contain;
      filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));align-self:center;}
#tittel:not(.uten-logo) .t1,#tittel:not(.uten-logo) .t2,#tittel:not(.uten-logo) .t3{display:none;}
#tittel.uten-logo .logo{display:none;}

/* Knappene paa startskjermen med egne bilder (art/grafikk/knapp-*.png).
   main.js setter .knappebilder paa <html> foerst naar bildene er lastet,
   ellers ser knappene ut som foer. */
.knappebilder .bildeknapp{background:transparent center/contain no-repeat;box-shadow:none;border-radius:0;
  color:transparent;font-size:0;padding:0;min-width:0;}
.knappebilder .bildeknapp:active{transform:translateY(3px);box-shadow:none;}
.knappebilder #btnPlay{background-image:url(../art/grafikk/knapp-spill.png);
  height:calc(var(--btn-h) * 1.3);width:calc(var(--btn-h) * 1.3 * 1.87);align-self:center;}
.knappebilder #btnPlay:active{background-image:url(../art/grafikk/knapp-spill-trykk.png);}
.knappebilder #btnScores{background-image:url(../art/grafikk/knapp-highscore.png);
  height:calc(var(--btn-h) * 1.05);width:calc(var(--btn-h) * 1.05 * 1.86);}
.knappebilder #btnScores:active{background-image:url(../art/grafikk/knapp-highscore-trykk.png);}
.knappebilder #btnSound{background-image:url(../art/grafikk/knapp-lyd.png);
  height:calc(var(--btn-h) * 1.05);width:calc(var(--btn-h) * 1.05 * 1.2);}
.knappebilder #btnSound:active{background-image:url(../art/grafikk/knapp-lyd-trykk.png);}
.knappebilder #btnSound.av{background-image:url(../art/grafikk/knapp-lyd-av.png);}
.knappebilder #btnFull{background-image:url(../art/grafikk/knapp-fullskjerm.png);
  height:calc(var(--btn-h) * 1.05);width:calc(var(--btn-h) * 1.05 * 1.18);}
.knappebilder #btnFull:active{background-image:url(../art/grafikk/knapp-fullskjerm-trykk.png);}
/* samme knapper paa de andre skjermene */
.knappebilder #btnShopGo{background-image:url(../art/grafikk/knapp-spill.png);
  height:calc(var(--btn-h) * 1.25);width:calc(var(--btn-h) * 1.25 * 1.87);align-self:center;}
.knappebilder #btnShopGo:active{background-image:url(../art/grafikk/knapp-spill-trykk.png);}
.knappebilder #btnResume{background-image:url(../art/grafikk/knapp-fortsett.png);height:calc(var(--btn-h) * 1.2);width:calc(var(--btn-h) * 1.2 * 1.29);}
.knappebilder #btnResume:active{background-image:url(../art/grafikk/knapp-fortsett-trykk.png);}
.knappebilder #btnSound2{background-image:url(../art/grafikk/knapp-lyd.png);height:calc(var(--btn-h) * 1.2);width:calc(var(--btn-h) * 1.2 * 1.2);}
.knappebilder #btnSound2:active{background-image:url(../art/grafikk/knapp-lyd-trykk.png);}
.knappebilder #btnSound2.av{background-image:url(../art/grafikk/knapp-lyd-av.png);}
.knappebilder #btnQuit,.knappebilder #btnScoresBack{background-image:url(../art/grafikk/knapp-hjem.png);
  height:calc(var(--btn-h) * 1.2);width:calc(var(--btn-h) * 1.2 * 1.28);align-self:center;}
.knappebilder #btnQuit:active,.knappebilder #btnScoresBack:active{background-image:url(../art/grafikk/knapp-hjem-trykk.png);}
.knappebilder #btnAgain{background-image:url(../art/grafikk/knapp-igjen.png);height:calc(var(--btn-h) * 1.2);width:calc(var(--btn-h) * 1.2 * 1.06);}
.knappebilder #btnHome{background-image:url(../art/grafikk/knapp-highscore.png);height:calc(var(--btn-h) * 1.05);width:calc(var(--btn-h) * 1.05 * 1.86);}
.knappebilder #btnHome:active{background-image:url(../art/grafikk/knapp-highscore-trykk.png);}
.knappebilder #btnPause{background-image:url(../art/grafikk/knapp-pause.png);background-color:transparent;border:none;
  width:clamp(48px,8.2vh,66px);height:clamp(44px,7.5vh,60px);}
/* ikoner i stedet for emoji: stjernen naar du vinner, hodeskallen naar du taper */
.knappebilder .bildeikon{background:center/contain no-repeat;color:transparent;
  width:clamp(64px,16vh,120px);height:clamp(60px,15vh,112px);margin:0 auto;}
.knappebilder .bildeikon.stjerne{background-image:url(../art/grafikk/ikon-stjerne.png);}
.knappebilder .bildeikon.hodeskalle{background-image:url(../art/grafikk/ikon-hodeskalle.png);}
/* Vinduene faar en ramme bygd av delene i art/grafikk/ramme/ (js/ramme.js).
   --ramme er hvor tykk steinkanten blir. Til delene er lastet ser vinduet ut som foer. */
.panel{--ramme:clamp(16px,3.4vh,26px);}
.panel.med-ramme{position:relative;isolation:isolate;background:none;border:none;box-shadow:none;
  padding:calc(var(--ramme) + clamp(8px,1.8vh,16px)) calc(var(--ramme) + clamp(12px,2.4vw,24px));}
.ramme-lerret{position:absolute;z-index:-1;pointer-events:none;}

/* bildefonten (js/skrift.js): hver bokstav er et lite utsnitt av art/font/spillfont.png */
.skrift{white-space:nowrap;}
.skrift-tegn{display:inline-block;vertical-align:baseline;background-repeat:no-repeat;}
.skrift-rom{display:inline-block;}
.skrift-mangler{font-weight:900;}

/* navnefeltet kan ikke bruke bildefonten - der brukes den vanlige fonten */
@font-face{font-family:'Spillfont';src:url(../art/font/Spillfont.ttf) format('truetype');font-display:swap;}
#nameInput{font-family:'Spillfont',Verdana,sans-serif;}

/* --- Level intro --- */
.level-card{animation:pop .3s ease;}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.lvl-label{font-size:clamp(18px,4vh,34px);letter-spacing:8px;color:#9fb2dd;}
.lvl-num{font-size:clamp(70px,22vh,190px);line-height:1;color:#f7c33a;text-shadow:0 6px 0 #8a5c00;}
.lvl-monsters{font-size:clamp(26px,6vh,52px);letter-spacing:6px;margin-top:6px;}

/* --- Panels --- */
.panel{
  background:var(--panel);border:5px solid rgba(255,255,255,.18);border-radius:26px;
  padding:clamp(12px,3vh,28px) clamp(16px,4vw,40px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,18px);
  max-width:92vw;
}
.wide-panel{min-width:min(560px,90vw);}
.big-emoji{font-size:clamp(40px,11vh,92px);line-height:1;}
.reward,.worth{
  display:flex;align-items:center;gap:10px;font-size:clamp(22px,5vh,42px);
  background:var(--panel-2);border-radius:16px;padding:4px 18px;
}
.name-row input{
  font-family:inherit;font-weight:900;text-align:center;letter-spacing:4px;
  font-size:clamp(22px,4.6vh,38px);width:clamp(160px,34vw,280px);
  padding:6px 10px;border-radius:14px;border:4px solid rgba(255,255,255,.25);
  background:#0e1428;color:#fff;text-transform:uppercase;
}

/* --- Score list --- */
.score-list{list-style:none;counter-reset:r;margin:0;padding:0;width:100%;
  max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.score-list li{
  counter-increment:r;display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border-radius:12px;padding:6px 12px;
  font-size:clamp(15px,3vh,26px);
}
.score-list li::before{content:counter(r);width:1.6em;color:#f7c33a;text-align:right;}
.score-list li .nm{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.score-list li .lv{opacity:.65;font-size:.8em;}
.score-list li.me{outline:3px solid var(--yellow);}
.score-empty{opacity:.6;font-size:clamp(15px,3vh,24px);}

/* --- Shop --- */
.shop{
  width:min(1100px,96vw);height:100%;
  display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);
  justify-content:center;
}
.shop-head{display:flex;align-items:center;justify-content:space-between;}
.shop-head h2{color:#f7c33a;}
.shop-body{display:flex;gap:clamp(8px,2vw,22px);align-items:center;}
.shop-bot{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;}
.shop-bot .worth{font-size:clamp(16px,3.2vh,28px);padding:2px 12px;}
.shop-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.4vh,14px);}
.card{
  background:var(--panel);border:4px solid rgba(255,255,255,.14);border-radius:18px;
  padding:clamp(4px,1vh,10px);display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;color:#fff;font-family:inherit;font-weight:900;
  transition:transform .06s ease,border-color .1s;
}
.card:active{transform:scale(.97);}
.card.max{border-color:var(--green);}
.card.poor{filter:grayscale(.6) brightness(.72);}
.card .c-ico{font-size:clamp(22px,4.6vh,40px);line-height:1;}
.card .c-name{font-size:clamp(11px,2.1vh,18px);letter-spacing:1px;color:#cfe0ff;}
.card .pips{display:flex;gap:3px;}
.card .pip{width:clamp(8px,1.5vh,13px);height:clamp(8px,1.5vh,13px);border-radius:50%;background:#3b4570;}
.card .pip.on{background:var(--green);box-shadow:0 0 6px var(--green);}
.card .price{
  display:flex;align-items:center;gap:5px;font-size:clamp(13px,2.5vh,22px);
  background:var(--yellow);color:#3a2a00;border-radius:999px;padding:1px 12px;
}
.card.max .price{background:var(--green);color:#03270f;}

/* --- Rotate hint --- */
#rotate{position:absolute;inset:0;background:#080c18;display:flex;align-items:center;justify-content:center;z-index:50;}
.rot-ico{font-size:24vw;animation:spin 2.4s ease-in-out infinite;}
@keyframes spin{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}

@media (max-height:420px){
  :root{--btn-h:48px;}
  .shop-grid{gap:5px;}
}