:root {
  --ink: #f6e7c8; --panel: rgba(18, 14, 9, .6); --line: rgba(255, 214, 150, .24);
  --gold: #ffcf4a; --red: #e2493b; --green: #3fcf6a; --orange: #f39c12;
  --card: #fbf3e2; --card-ink: #2a1d10;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b2a40; font-family: Nunito, system-ui, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas#c { display: block; cursor: grab; touch-action: none; }
.hidden { display: none !important; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
kbd { font-family: inherit; font-size: 10px; font-weight: 800; border: 1px solid rgba(255, 255, 255, .35); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; margin: 0 2px; }

/* ---------------------------------------------------------------- knapper */
.btn { font: inherit; font-weight: 800; color: #2a1a05; background: linear-gradient(#ffe08a, #f0b53a); border: 0; border-radius: 12px; padding: 12px 24px; font-size: 16px; cursor: pointer; box-shadow: 0 4px 0 #9a6a14, 0 8px 18px rgba(0, 0, 0, .3); transition: transform .08s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a6a14; }
.btn:disabled { filter: grayscale(1) brightness(.75); cursor: not-allowed; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btn.small { padding: 8px 14px; font-size: 14px; }
.btn.big { padding: 16px 34px; font-size: 20px; }
.btn.danger { background: linear-gradient(#ff8a7a, #d9453a); color: #fff; box-shadow: 0 4px 0 #8a1f18; }
.iconbtn { font-size: 22px; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; backdrop-filter: blur(6px); }

/* ---------------------------------------------------------------- HUD */
#stats { position: fixed; left: 16px; top: 16px; padding: 12px 16px; min-width: 230px; }
#stats .who { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; opacity: .9; }
#readlvl { background: rgba(255, 255, 255, .12); border-radius: 8px; padding: 0 8px; }
#stats .gold { font-size: 28px; font-weight: 900; color: var(--gold); display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.coinimg { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
#stats .words { font-size: 15px; font-weight: 800; margin: -4px 0 8px; opacity: .92; }
#stats .words b { font-size: 18px; color: #bfe8ff; display: inline-block; }
#stats .words b.pop { animation: wordpop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes wordpop { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: #fff27a; } 100% { transform: scale(1); } }
.profile .pwords { font-size: 16px; font-weight: 800; color: #bfe8ff; margin-top: 3px; }
.hp .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 5px; display: flex; justify-content: space-between; }
.bar { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .45); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
#hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, #3fcf6a, #9be15d); transition: width .2s; }
#hpfill[data-lvl=mid] { background: linear-gradient(90deg, #e8a33a, #f5d05a); }
#hpfill[data-lvl=low] { background: linear-gradient(90deg, #c9302c, #ef6b4f); }
.loot { margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--gold); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
#topright { position: fixed; right: 16px; top: 16px; display: flex; gap: 8px; }
#help { position: fixed; right: 16px; top: 74px; padding: 10px 14px; font-size: 12px; line-height: 1.9; }
#speed { position: fixed; left: 16px; bottom: 18px; padding: 10px 12px; width: 230px; }
#speed .lbl { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
#speed .lbl b { color: var(--gold); }
#speedsegs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
#speedsegs i { height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
#speedsegs i.on { background: linear-gradient(#9be15d, #3fcf6a); }
#speedsegs i.lock { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .4) 0 3px, rgba(255, 255, 255, .06) 3px 6px); }
#guns { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: stretch; gap: 8px; padding: 9px; }
.side { width: 150px; padding: 8px 12px; border-radius: 9px; border: 1px solid transparent; opacity: .55; transition: all .15s; }
.side.active { opacity: 1; border-color: rgba(255, 207, 74, .5); }
.side.target { background: rgba(255, 207, 74, .16); border-color: var(--gold); }
.side.empty { opacity: .3; }
.side .nm { font-weight: 900; letter-spacing: .1em; font-size: 13px; }
.side .cnt { font-size: 12px; opacity: .85; margin: 3px 0 6px; }
.rl { height: 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.rl > div { height: 100%; width: 100%; background: var(--gold); }
.rl > div.ready { background: #9be15d; }
#side-star { text-align: right; }
.mid { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; opacity: .85; padding: 0 6px; }
#mm-wrap { position: fixed; right: 16px; bottom: 16px; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
#minimap { width: 100%; height: 100%; }
#prompt { position: fixed; left: 50%; bottom: 124px; transform: translateX(-50%); padding: 9px 18px; font-weight: 700; display: none; white-space: nowrap; }
#prompt b { color: var(--gold); }
#hint { position: fixed; left: 50%; bottom: 172px; transform: translateX(-50%); font-weight: 800; font-size: 18px; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); white-space: nowrap; transition: opacity .3s; pointer-events: none; }
#toast { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); font-family: 'Pirata One', serif; font-size: 38px; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); pointer-events: none; opacity: 0; transition: opacity .4s; white-space: nowrap; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.ebar { position: absolute; width: 54px; height: 6px; margin-left: -27px; background: rgba(0, 0, 0, .55); border-radius: 3px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); }
.ebar.big { width: 86px; margin-left: -43px; height: 7px; }
.ebar { overflow: visible; }
.ebar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #e2493b, #ff8a5c); }
.ebar[data-rel=merchant] i { background: linear-gradient(90deg, #d9d2c0, #fff); }
.ebar[data-rel=neutral] i { background: linear-gradient(90deg, #3a8ad8, #7fc4ff); }
.ebar span { position: absolute; left: -22px; top: -6px; font-size: 11px; font-weight: 900; color: #fff; background: rgba(0,0,0,.6); border-radius: 4px; padding: 0 4px; line-height: 16px; }
.ebar.boss { width: 150px; margin-left: -75px; height: 10px; border-radius: 5px; border: 1.5px solid rgba(255, 210, 120, .7); box-shadow: 0 0 10px rgba(255, 90, 40, .5); }
.ebar.boss i { background: linear-gradient(90deg, #b3121f, #ff5a2a 60%, #ffb347); }
.ebar.boss.friend { border-color: rgba(170, 255, 170, .7); box-shadow: 0 0 10px rgba(80, 220, 120, .5); }
.ebar.boss.friend i { background: linear-gradient(90deg, #1f8a3a, #5fd46a 60%, #b8f5a0); }
.ebar.boss span { left: -30px; top: -9px; font-size: 20px; background: none; padding: 0; line-height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.float { position: absolute; font-family: 'Pirata One', serif; font-size: 32px; color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); transform: translate(-50%, -50%); white-space: nowrap; }
.float.small { font-size: 22px; }
#hurt { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(200, 20, 10, .6)); opacity: 0; }

/* berøringsknapper (iPad) */
#touch .pad-left, #touch .pad-right { position: fixed; bottom: 110px; display: flex; gap: 12px; }
#touch .pad-left { left: 20px; }
#touch .pad-right { right: 220px; flex-wrap: wrap; width: 170px; }
#touch button { width: 76px; height: 76px; border-radius: 50%; font-size: 30px; color: #fff; background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .45); touch-action: none; }
#touch button.on, #touch button:active { background: rgba(255, 207, 74, .5); }
#touch .fire { background: rgba(200, 60, 40, .55); }
body.touch #help { display: none; }

/* ---------------------------------------------------------------- overlegg / kort */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(5, 20, 35, .25), rgba(5, 15, 25, .72)); z-index: 10; }
.overlay.dim-red { background: radial-gradient(ellipse at center, rgba(40, 5, 5, .15), rgba(20, 5, 5, .6)); }
.card { padding: 28px 34px; max-width: 580px; width: calc(100% - 32px); text-align: center; max-height: calc(100% - 32px); overflow: auto; }
h1 { font-family: 'Pirata One', serif; font-size: 68px; line-height: 1; margin: 0 0 8px; color: var(--gold); text-shadow: 0 3px 18px rgba(0, 0, 0, .5); font-weight: 400; }
h2 { font-family: 'Pirata One', serif; font-size: 40px; margin: 0 0 6px; color: var(--gold); font-weight: 400; }
h3 { margin: 18px 0 6px; font-size: 16px; }
.card p { opacity: .9; line-height: 1.5; margin: 8px 0; }
.err { color: #ff9a8a; min-height: 1em; font-weight: 700; }
.note { font-size: 13px; opacity: .7 !important; }
.row { height: 12px; }
.card .btn + .btn { margin-left: 10px; }
.goldtxt { color: var(--gold); }
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 12px auto; max-width: 340px; font-weight: 800; font-size: 14px; }
.field input, .field select, input.pin { font: inherit; font-size: 20px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--ink); }
input.pin { width: 180px; text-align: center; letter-spacing: .5em; font-size: 28px; }
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.profile { font: inherit; color: var(--ink); background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 14px; padding: 18px 12px; cursor: pointer; transition: transform .1s, background .1s; }
.profile:hover { transform: translateY(-2px); background: rgba(255, 207, 74, .15); }
.profile .pname { font-size: 20px; font-weight: 900; }
.profile .pmeta { font-size: 13px; opacity: .8; margin-top: 4px; }
.profile.add { border-style: dashed; }
.stats-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; text-align: left; max-width: 360px; margin: 0 auto; font-size: 15px; }
.missed { font-size: 15px; }
.menu-card { max-width: 640px; }
/* konto: innlogging, forside, foreldreside, pause */
.field input { user-select: text; -webkit-user-select: text; }
.btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.btnrow:empty { display: none; }
.card .btnrow .btn + .btn { margin-left: 0; }
.okmsg { color: #9be9a8; font-weight: 800; min-height: 0; }
.okmsg:empty { display: none; }
.check { display: block; text-align: left; max-width: 400px; margin: 12px auto; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { width: 18px; height: 18px; vertical-align: -3px; accent-color: var(--gold); }
a.link { color: var(--gold); }
.captain { display: inline-block; min-width: 260px; margin: 10px auto 4px; padding: 16px 22px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); }
.captain .pname { font-size: 26px; font-weight: 900; }
.captain .pwords { font-size: 18px; font-weight: 800; color: #bfe8ff; margin-top: 4px; }
.captain .pmeta { font-size: 14px; opacity: .8; margin-top: 4px; }
.quota { font-weight: 800; color: #bfe8ff; }
.quota.premium { color: var(--gold); }
.paused { font-weight: 800; font-size: 17px; color: #ffd98a; }
.card p.big { font-size: 20px; font-weight: 800; }
.countdown { font-size: 22px; font-weight: 900; color: #bfe8ff; }
.subbox { max-width: 460px; margin: 0 auto; text-align: left; }
.subbox .btn { display: block; margin: 10px auto 0; }
.btn.vipps { background: linear-gradient(#ff7a45, #ff5b24); color: #fff; box-shadow: 0 4px 0 #b3380f, 0 8px 18px rgba(0, 0, 0, .3); }
.btn.card { background: linear-gradient(#8f86ff, #635bff); color: #fff; box-shadow: 0 4px 0 #3d35b8, 0 8px 18px rgba(0, 0, 0, .3); }
.subbox .btnrow .btn { display: inline-block; margin: 0; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline input { flex: 1; min-width: 140px; }
.legal { margin-top: 14px; }
.codeform { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.codeform .note { margin: 0 0 6px !important; }
.codeform input { font: inherit; font-size: 17px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--ink); text-transform: uppercase; }
#stats .words #quota { margin-left: 10px; font-size: 13px; font-weight: 800; padding: 1px 7px; border-radius: 8px; background: rgba(191, 232, 255, .15); color: #bfe8ff; vertical-align: 2px; }
#stats .words #quota.full { background: rgba(255, 154, 138, .2); color: #ffb3a6; }
@media (max-width: 480px) { h1 { font-size: 48px; } .card { padding: 22px 16px; } .captain { min-width: 0; width: 100%; } }

/* butikk */
.shop-items { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); text-align: left; }
.item img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex: none; }
.item img.flip { transform: scaleX(-1); }
.item .txt { flex: 1; }
.item .t { font-weight: 800; }
.item .s { font-size: 12px; opacity: .75; margin-top: 2px; }
.item .btn { padding: 9px 14px; font-size: 14px; min-width: 104px; }

/* ---------------------------------------------------------------- lesepanelet */
.lese { z-index: 20; background: radial-gradient(ellipse at center, rgba(5, 20, 35, .35), rgba(5, 15, 25, .78)); }
.lese-card { position: relative; background: var(--card); color: var(--card-ink); border-radius: 22px; padding: 22px 34px 26px; width: min(1100px, calc(100% - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 0 0 4px #e9d6ae; text-align: center; }
.lese-head { display: flex; justify-content: center; align-items: center; position: relative; }
.lese-title { font-size: 46px; line-height: 1; }
.lese-gear { position: absolute; right: -14px; top: -8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; font-size: 20px; opacity: .35; cursor: pointer; touch-action: none; }
.lese-gear:hover { opacity: .7; }
.lese-text { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vh, 58px); line-height: 1.55; margin: 18px 0 12px; word-spacing: .18em; }
.w { display: inline-block; padding: 0 .12em; border-radius: .25em; color: #2a1d10; transition: background .15s, color .15s; cursor: default; }
.w.pending { color: #2a1d10; }
.w.ok { background: #3fcf6a; color: #fff; }
.w.helped { background: #3fcf6a; color: #fff; box-shadow: inset 0 -4px 0 #5aa9ee; }
.w.miss1 { background: var(--orange); color: #fff; cursor: pointer; }
.w.miss2 { background: var(--red); color: #fff; cursor: pointer; }
.w.next { box-shadow: inset 0 -5px 0 rgba(138, 75, 18, .35); }
.w.focus { outline: 4px solid #5aa9ee; outline-offset: 2px; }
.w.parrotfocus { outline: 4px dashed #2ecc71; outline-offset: 2px; }
.lese-status { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; font-size: 20px; font-weight: 800; }
.lese-status[data-kind=go] .msg, .lese-status[data-kind=info] .msg, .lese-status[data-kind=warn] .msg { font-size: 30px; }
.lese-status[data-kind=error] .msg { color: #b3261e; }
.lese-status[data-kind=warn] .msg { color: #a35a00; }
.lese-status[data-kind=go] .msg { color: #1d7a3a; }
.mic { --lvl: 0; position: relative; width: 34px; height: 34px; border-radius: 50%; background: #d8cbb2; flex: none; }
.mic::after { content: '🎤'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.mic i { position: absolute; inset: 0; border-radius: 50%; background: rgba(63, 207, 106, .45); transform: scale(calc(1 + var(--lvl) * 0.9)); opacity: 0; transition: transform .1s; }
.mic.live { background: #3fcf6a; }
.mic.live i { opacity: 1; }
.mic[data-count]::after { content: attr(data-count); font-weight: 900; font-size: 20px; color: #8a4b12; }
.lese-actions { display: flex; justify-content: center; gap: 12px; margin-top: 10px; min-height: 8px; }
.btn.parrot { background: linear-gradient(#8ef0a8, #2ecc71); box-shadow: 0 4px 0 #1b8a48; font-size: 38px; width: 76px; height: 76px; padding: 0; border-radius: 50%; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.lese-reward { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; font-weight: 900; font-size: 34px; color: #b07a00; }
.lese-reward .coins { display: flex; }
.lese-reward .coins i { width: 34px; height: 34px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffcf4a 45%, #b8860b); box-shadow: 0 2px 0 #8a6200, 0 0 10px rgba(255, 200, 60, .5); }
.lese-reward .coins i:first-child { margin-left: 0; }
.lese-reward .icon { font-size: 40px; }
.lese-reward .rimg { width: 64px; height: 64px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.3); transform: rotate(-4deg); }
.lese-reward.pop { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.lese-reward.pop b { font-family: 'Pirata One', serif; font-size: 50px; font-weight: 400; text-shadow: 0 2px 0 #fff3b0; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lese-level { position: absolute; left: 18px; top: 16px; font-size: 14px; font-weight: 800; opacity: .6; }
.skip-bar { position: absolute; left: 22px; right: 22px; bottom: 8px; height: 4px; border-radius: 2px; overflow: hidden; }
.skip-bar i { display: block; height: 100%; width: 0; background: #8a4b12; }
.lese-test { margin-top: 14px; display: flex; gap: 8px; justify-content: center; }
.lese-test input { font: inherit; font-size: 16px; padding: 8px 12px; border-radius: 8px; border: 1px solid #c9b58f; width: 60%; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.testbadge { position: fixed; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 40; background: rgba(160, 20, 20, .85); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 6px; pointer-events: none; max-width: 60vw; text-align: center; }

@media (max-width: 820px) {
  #help { display: none; }
  #mm-wrap { width: 130px; height: 130px; }
  .side { width: 110px; }
  h1 { font-size: 48px; }
  #speed { width: 170px; }
  #touch .pad-right { right: 150px; }
}

/* ---------------------------------------------------------------- etappe 2 */
#enmity { position: fixed; left: 16px; top: 200px; display: flex; flex-direction: column; gap: 6px; }
.enm { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(40, 6, 4, .7); border: 1px solid rgba(255, 90, 60, .5); font-weight: 900; font-size: 13px; }
.enm .sw { font-size: 18px; }
.enm img { width: 38px; height: 28px; object-fit: cover; border-radius: 4px; border: 2px solid #ff3b2f; }
.enm[data-heat="1"] img { box-shadow: 0 0 6px 1px rgba(255, 60, 40, .55); }
.enm[data-heat="2"] img { box-shadow: 0 0 9px 2px rgba(255, 50, 30, .7); }
.enm[data-heat="3"] img { box-shadow: 0 0 12px 4px rgba(255, 40, 20, .8); animation: glow 1.4s infinite; }
.enm[data-heat="4"] img { box-shadow: 0 0 16px 6px rgba(255, 30, 10, .9); animation: glow 1s infinite; }
.enm[data-heat="5"] img { box-shadow: 0 0 22px 9px rgba(255, 20, 0, 1); animation: glow .7s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 4px 1px rgba(255, 40, 20, .5); } }
.enm .tl { width: 90px; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.enm .tl i { display: block; height: 100%; background: linear-gradient(90deg, #ff3b2f, #ffb03a); }
.enm b { min-width: 40px; text-align: right; }
#zonebadge { position: fixed; right: 16px; bottom: 214px; width: 190px; text-align: center; font-weight: 900; font-size: 15px; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); pointer-events: none; }
.shopflag { width: 44px; height: 32px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.kart { z-index: 15; }
.kart-card { background: rgba(10, 20, 30, .85); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.kart-head { display: flex; justify-content: space-between; align-items: baseline; }
.kart-hint { font-size: 13px; opacity: .7; }
.kart canvas { display: block; margin: 4px auto 8px; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.kart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13px; font-weight: 800; max-width: 760px; }
.kart-legend .lg { display: flex; align-items: center; gap: 5px; }
.kart-legend img { width: 26px; height: 19px; object-fit: cover; border-radius: 3px; }
@media (max-width: 820px) { #zonebadge { width: 130px; bottom: 150px; } #enmity { top: 190px; } }

/* ---------------------------------------------------------------- oppdrag */
#mission { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 40px; }
#mission img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: #f3efe6; box-shadow: 0 0 12px rgba(255, 207, 74, .5); }
#mission.flee img { border-color: #ff5a3a; box-shadow: 0 0 14px rgba(255, 70, 40, .7); animation: glow 1.2s infinite; }
#mission .mdest { font-weight: 900; font-size: 16px; }
#mission .mdest b { color: var(--gold); }
#mission .mmeta { font-size: 13px; font-weight: 800; opacity: .9; display: flex; align-items: center; gap: 5px; }
#mission .coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffcf4a 45%, #b8860b); }

/* ---------------------------------------------------------------- kartveggen (Svarteskjeggs skattekart) */
#mapwall { position: fixed; right: 16px; top: 300px; padding: 8px; cursor: pointer; transition: all .25s; transform-origin: right center; }
#mapwall .mw-head { font-size: 14px; font-weight: 900; text-align: center; margin-bottom: 6px; }
#mapwall .mw-head b { color: var(--gold); }
#mapwall-grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; }
#mapwall .slot { width: 40px; height: 40px; border-radius: 4px; border: 1.5px dashed rgba(255, 230, 180, .35); background: rgba(0, 0, 0, .25) center / cover no-repeat; display: grid; place-items: center; }
#mapwall .slot .znum { font-size: 11px; font-weight: 900; opacity: .45; }
#mapwall .slot.got { border: 0; opacity: .92; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
#mapwall .slot.got .znum { display: none; }
#mapwall .slot.new { animation: piecein 1.2s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes piecein { 0% { transform: scale(3) rotate(-20deg); opacity: 0; box-shadow: 0 0 30px 10px rgba(255, 207, 74, .9); } 60% { opacity: 1; } 100% { transform: none; } }
#mapwall.done { box-shadow: 0 0 18px 4px rgba(255, 207, 74, .6); animation: glow 1.6s infinite; }
#mapwall.done #mapwall-grid { gap: 0; }
#mapwall.found { animation: none; }
#mapwall.big { transform: scale(2.6); z-index: 12; }
body.touch #mapwall { top: 200px; }
@media (max-width: 820px) { #mapwall-grid { grid-template-columns: repeat(3, 30px); } #mapwall .slot { width: 30px; height: 30px; } }

#caminfo { position: fixed; left: 18px; bottom: 82px; font-size: 12px; font-weight: 800; opacity: .75; text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; }
#zonebadge { width: auto; white-space: nowrap; }

#help.off { display: none; }
.iconbtn.on { border-color: var(--gold); }
#fade { position: fixed; inset: 0; background: #07131f; opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 30; }
#fade.on { opacity: 1; }

.lese-speaker { position: absolute; left: -12px; bottom: 6px; height: 88%; max-height: 300px; transform: translateX(-72%); filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); animation: speakerin .45s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
@keyframes speakerin { from { transform: translateX(-40%) scale(.6); opacity: 0; } to { transform: translateX(-72%); opacity: 1; } }
.lese-card:has(.lese-speaker:not(.hidden)) { margin-left: 120px; width: min(1000px, calc(100% - 150px)); }
/* bilde på høyre side av lesekortet (fienden i tidsreise-oppdrag) */
.lese-speaker { max-width: 300px; object-fit: contain; }
.lese-speaker2 { position: absolute; right: -12px; bottom: 6px; height: 80%; max-height: 260px; max-width: 280px; object-fit: contain; transform: translateX(72%); filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); animation: speakerinR .45s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
@keyframes speakerinR { from { transform: translateX(40%) scale(.6); opacity: 0; } to { transform: translateX(72%); opacity: 1; } }
.lese-card:has(.lese-speaker2:not(.hidden)) { margin-right: 120px; width: min(1000px, calc(100% - 270px)); }
@media (max-width: 820px) { .lese-speaker { height: 130px; bottom: auto; top: -96px; left: 10px; transform: none; animation: none; } .lese-card:has(.lese-speaker:not(.hidden)) { margin-left: 0; width: calc(100% - 32px); }  .lese-speaker2 { height: 110px; bottom: auto; top: -84px; right: 10px; transform: none; animation: none; } .lese-card:has(.lese-speaker2:not(.hidden)) { margin-right: 0; width: calc(100% - 32px); } }

/* ---------------------------------------------------------------- ammolinja */
#ammobar { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%); display: flex; gap: 6px; }
#ammobar .ammo { position: relative; width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); backdrop-filter: blur(6px); cursor: pointer; padding: 0; color: var(--ink); overflow: hidden; touch-action: none; }
#ammobar .ammo .ai { font-size: 22px; line-height: 44px; }
#ammobar .ammo img.ai { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#ammobar .ammo { width: 50px; height: 50px; }
#ammobar .ammo .ak { z-index: 1; text-shadow: 0 0 3px #000; }
#ammobar .ammo .ak { position: absolute; left: 3px; top: 1px; font-size: 10px; font-weight: 900; opacity: .7; }
#ammobar .ammo .acd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.65) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
#ammobar .ammo.sel { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 207, 74, .6); }
#ammobar .ammo.locked { opacity: .35; filter: grayscale(1); }
#ammobar .ammo.locked::after { content: '🔒'; position: absolute; right: 1px; bottom: 0; font-size: 11px; }
#prompt { bottom: 158px; }
#hint { bottom: 206px; }
.shop-h { text-align: left; margin: 14px 0 4px; font-size: 15px; }
.shop-h span { font-weight: 600; opacity: .6; font-size: 12px; }
.item .bigicon { width: 58px; height: 58px; display: grid; place-items: center; font-size: 34px; background: rgba(255,255,255,.08); border-radius: 10px; flex: none; }
.item .bigicon img { width: 52px; height: 52px; object-fit: contain; }
#shop .card { max-height: calc(100% - 24px); }

/* ---------------------------------------------------------------- angrep på landsbyer */
#siege { position: fixed; inset: 0; z-index: 40; touch-action: none; user-select: none; cursor: crosshair; }
#siege .panel { position: absolute; }
.sg-title { left: 16px; top: 16px; padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; font-weight: 800; }
.sg-title b { font-size: 20px; }
.sg-title span { font-size: 14px; opacity: .85; }
#sg-flee { position: absolute; right: 16px; top: 16px; font-size: 20px; padding: 12px 22px; }
#sg-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font-weight: 900; font-size: 18px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); pointer-events: none; text-align: center; max-width: 60vw; }
.sg-ship { left: 16px; bottom: 16px; padding: 12px 16px; min-width: 240px; }
.sg-ship .lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 5px; display: flex; justify-content: space-between; }
#sg-hpfill { height: 100%; width: 100%; background: linear-gradient(90deg, #3fcf6a, #9be15d); transition: width .2s; }
#sg-hpfill[data-lvl=mid] { background: linear-gradient(90deg, #e6b422, #ffd35a); }
#sg-hpfill[data-lvl=low] { background: linear-gradient(90deg, #e2493b, #ff8a5c); }
.sg-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 900; font-size: 18px; }
.sg-reload { flex: 1; height: 8px; border-radius: 5px; background: rgba(0,0,0,.45); overflow: hidden; }
.sg-reload i { display: block; height: 100%; background: #c9a24a; }
.sg-reload i.ready { background: #ffd35a; box-shadow: 0 0 8px #ffd35a; }
#sg-fire { position: absolute; right: 24px; bottom: 24px; font-size: 24px; padding: 18px 30px; }
#sg-hurt { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(220, 30, 20, .8); opacity: 0; transition: opacity .15s; }
#sg-result { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 40px; font-weight: 900; color: #ffd35a; text-shadow: 0 3px 10px rgba(0,0,0,.8); }