:root{
  --panel:rgba(28,28,34,.9);
  --line:#111;
  --green:#5cb84a;
  --font:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#78c6ff;font-family:var(--font);color:#fff;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
[hidden]{display:none!important}
button{touch-action:manipulation;font-family:var(--font)}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* knapper og brikker */
.btn{font:800 17px var(--font);color:#fff;background:#6b6b75;border:3px solid var(--line);border-radius:8px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.22);
  padding:8px 14px;min-height:50px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-shadow:1px 2px 0 rgba(0,0,0,.35)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.btn:disabled{opacity:.4;transform:none}
.btn.green{background:var(--green)}
.btn.gold{background:#d99b1c}
.btn.red{background:#c9473b}
.btn.sq{width:50px;padding:0}
.btn svg{width:24px;height:24px;fill:currentColor;flex:none}
.chip{background:var(--panel);border:3px solid var(--line);border-radius:8px;padding:6px 12px;min-height:50px;
  font:800 18px var(--font);display:flex;align-items:center;gap:8px;white-space:nowrap}
.em{display:inline-block;width:15px;height:15px;transform:rotate(45deg);border:2px solid #0a3d1c;border-radius:2px;
  background:linear-gradient(135deg,#a6f5b8,#1fb357 55%,#0d6b30);flex:none}

/* spill-HUD */
.bar{position:fixed;top:0;left:0;right:0;display:flex;gap:8px;align-items:center;pointer-events:none;
  padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px) 0 calc(env(safe-area-inset-left) + 12px)}
.bar>*{pointer-events:auto}
.bar .grow{flex:1;pointer-events:none}
#hotbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);
  display:flex;gap:6px;padding:6px;background:var(--panel);border:3px solid var(--line);border-radius:10px;
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
#hotbar::-webkit-scrollbar{display:none}
.slot{position:relative;flex:0 0 auto;width:62px;height:62px;border:3px solid #4a4a52;background:rgba(140,140,150,.25);
  border-radius:6px;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.slot.sel{border-color:#fff;box-shadow:0 0 0 2px #000,0 0 14px rgba(255,255,255,.6)}
.slot canvas{width:40px;height:40px}
.slot .n{position:absolute;right:4px;bottom:1px;font:800 15px var(--font);color:#fff;text-shadow:2px 2px 0 #000}
canvas.ico{width:28px;height:28px;image-rendering:pixelated;vertical-align:middle;flex:none}
.slot canvas,.mat canvas,.shopi canvas{image-rendering:pixelated}

/* start */
#home{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  background:linear-gradient(#78c6ff,#c4e8ff 75%)}
#home::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(70px + env(safe-area-inset-bottom));pointer-events:none;
  background:linear-gradient(#5fae3e 0 18px,#4f9a33 18px 24px,#8a5a35 24px)}
.homein{max-width:920px;margin:0 auto;text-align:center;
  padding:calc(env(safe-area-inset-top) + 48px) 20px calc(env(safe-area-inset-bottom) + 120px)}
.logo{font:900 clamp(52px,10vw,104px)/1 var(--font);margin:0;color:#fff;letter-spacing:2px;
  text-shadow:5px 5px 0 #3b3b3b,9px 9px 0 rgba(0,0,0,.18)}
.tag{font:800 22px var(--font);color:#1f4d6b;margin:14px 0 34px}
#plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;text-align:left}
.pcard{background:#c6c6c6;color:#222;border:4px solid #111;border-radius:8px;padding:16px;cursor:pointer;
  box-shadow:inset 4px 4px 0 #fff,inset -4px -4px 0 #555;display:flex;flex-direction:column;gap:12px;font-family:var(--font)}
.pcard .top{display:flex;gap:12px;align-items:center}
.avatar{width:64px;height:64px;border:3px solid #111;border-radius:6px;display:grid;place-items:center;flex:none;
  font:900 34px var(--font);color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.4);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2)}
.pname{font:900 24px var(--font)}
.pmeta{font:700 15px var(--font);color:#444;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pcard .acts{display:flex;gap:8px}
.pcard .acts .btn{flex:1}
.pcard.new{align-items:center;justify-content:center;min-height:170px;font:900 22px var(--font);color:#2b5a1f}
.pcard.new .plus{font-size:56px;line-height:1}

/* modal */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.card{background:#c6c6c6;color:#222;border:4px solid #111;border-radius:8px;width:min(580px,100%);
  max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  box-shadow:inset 4px 4px 0 #fff,inset -4px -4px 0 #555;padding:20px}
.card.wide{width:min(760px,100%)}
.card h2{margin:0 0 14px;font:900 28px var(--font)}
.card p{font:600 18px/1.45 var(--font);margin:0 0 10px}
.card label{display:block;font:800 16px var(--font);margin:14px 0 6px;color:#333}
.card input{width:100%;font:800 24px var(--font);padding:12px 14px;border:3px solid #111;border-radius:6px;background:#fff;color:#111;
  -webkit-user-select:text;user-select:text;touch-action:manipulation}
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choices .btn{min-width:56px;background:#8b8b95}
.choices .btn.on{background:var(--green);box-shadow:0 0 0 3px #fff inset}
.swatch{width:50px;height:50px;border:3px solid #111;border-radius:6px;cursor:pointer;padding:0}
.swatch.on{box-shadow:0 0 0 3px #fff inset,0 0 0 3px #111}
.help li{font:600 18px/1.45 var(--font);margin:0 0 8px}

/* oppgaver */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.qt{font:900 20px var(--font);background:#3b3b44;color:#fff;padding:6px 12px;border-radius:6px}
.ql{font:800 16px var(--font);color:#444}
.qtext{font:800 clamp(24px,4.4vw,34px)/1.3 var(--font);text-align:center;margin:14px 4px 16px;color:#1b1b1b}
.ans{background:#fff;border:3px solid #111;border-radius:6px;min-height:66px;font:900 40px/58px var(--font);text-align:center;color:#111;margin-bottom:12px}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pad .btn{min-height:62px;font-size:28px;background:#7a7a85}
.pad .btn.zero,.pad .btn.ok{grid-column:span 2}
.pad .btn.ok{background:var(--green)}
.mc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mc .btn{min-height:72px;font-size:21px;background:#5b6fb0;white-space:normal}
.mc .btn.right{background:var(--green)}
.mc .btn.bad{background:#c9473b}
.fb{min-height:28px;font:800 19px/1.4 var(--font);text-align:center;margin-top:12px}
.card.right{box-shadow:inset 4px 4px 0 #b6f5a6,inset -4px -4px 0 #2f7a22;background:#cfe9c8}
.card.wrong{background:#ecd3cf}
.fb .good{color:#1e7a12}
.fb .bad{color:#9c2a1f}

/* verksted og butikk */
.mats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mat{display:flex;align-items:center;gap:6px;background:#8b8b8b;color:#fff;border:3px solid #111;border-radius:6px;padding:6px 10px;font:800 18px var(--font)}
.mat canvas{width:28px;height:28px}
.rec{display:flex;align-items:center;gap:10px;background:#b3b3b3;border:3px solid #555;border-radius:6px;padding:10px;margin-bottom:8px;flex-wrap:wrap}
.rin,.rout{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:800 16px var(--font)}
.rin{flex:1;min-width:180px}
.ing{display:inline-flex;align-items:center;gap:4px}
.ing.miss{color:#a12a1f}
.arrow{font:900 24px var(--font)}
.rout{min-width:150px}
.shopg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shopi{background:#b3b3b3;border:3px solid #555;border-radius:6px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;font:800 16px var(--font);text-align:center}
.shopi canvas{width:44px;height:44px}
.shopi .btn{width:100%;min-height:44px;font-size:16px}
.gemline{display:flex;align-items:center;gap:8px;font:900 22px var(--font);margin-bottom:12px}

#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 78px);transform:translate(-50%,-16px);opacity:0;transition:.25s;
  background:var(--panel);border:3px solid #111;border-radius:8px;padding:10px 18px;font:800 20px var(--font);
  pointer-events:none;z-index:20;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* styring */
#ctl{position:fixed;left:0;right:0;bottom:0;pointer-events:none}
#padR{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;gap:10px;pointer-events:auto;touch-action:none}
#stick{position:fixed;left:calc(env(safe-area-inset-left) + 22px);bottom:calc(env(safe-area-inset-bottom) + 22px);width:160px;height:160px;border-radius:50%;
  background:rgba(28,28,34,.35);border:3px solid rgba(0,0,0,.45);box-shadow:inset 0 0 0 10px rgba(255,255,255,.08);pointer-events:auto;touch-action:none;display:grid;place-items:center}
#knob{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.85);border:3px solid rgba(0,0,0,.5);box-shadow:0 4px 0 rgba(0,0,0,.25);pointer-events:none;transition:transform .06s}
#floaters{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.floater{position:absolute;left:0;top:0;font:900 22px var(--font);white-space:nowrap;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
#loading{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:linear-gradient(#78c6ff,#c4e8ff)}
.ld{text-align:center;font:900 30px var(--font);color:#1f4d6b}
.ldblock{width:64px;height:64px;margin:0 auto 18px;background:linear-gradient(#5fae3e 0 30%,#8a5a35 30%);border:4px solid #111;animation:spin 1.2s steps(8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#padR{right:calc(env(safe-area-inset-right) + 12px);flex-direction:column;align-items:flex-end}
#padR .pair,#padR .ctx{display:flex;gap:10px}
.cb{width:78px;height:78px;border-radius:16px;background:rgba(28,28,34,.5);border:3px solid rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;padding:0;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.15);font:800 17px var(--font);text-shadow:1px 2px 0 rgba(0,0,0,.4)}
.cb svg{width:40px;height:40px;fill:currentColor}
.cb.on{background:rgba(92,184,74,.85)}
.cb.turbo{position:relative;background:rgba(217,155,28,.75)}
.cb.turbo.on{background:rgba(255,120,30,.95);box-shadow:0 0 18px rgba(255,170,40,.9)}
.cb.turbo.empty{opacity:.5}
.cb.turbo .meter{position:absolute;right:6px;top:8px;bottom:8px;width:7px;border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden}
.cb.turbo .meter i{position:absolute;inset:0;background:#7cf27c;transform-origin:bottom}
.shopi small{font:600 13px/1.3 var(--font);color:#444}
.cb.small{width:auto;height:52px;padding:0 16px;background:rgba(217,155,28,.9);border-color:#111}
#hotbar{max-width:calc(100vw - 2 * (env(safe-area-inset-left) + 215px))}
.shoph{grid-column:1/-1;margin:10px 0 0;font:900 20px var(--font);color:#333}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge{background:#b3b3b3;border:3px solid #555;border-radius:6px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font:700 14px var(--font);color:#555}
.badge b{font:900 16px var(--font);color:#333}
.badge .bstar{font:900 30px var(--font);color:#888}
.badge.got{background:#f2d98a;border-color:#a87a10}
.badge.got .bstar{color:#d99b1c}

@media (max-width:980px){ .bar .lbl{display:none} .bar .btn:not(.sq){width:50px;padding:0} #who{max-width:34vw;overflow:hidden;text-overflow:ellipsis} }