/* ════════════════════════════════════════════════════════════════════════
   JX – gemensam art direction för /jobs och alla jobb-minispel.
   Bygger på Adams Skarpskytten: Oswald, guld/röd noir, glaspaneler,
   stora 3D-knappar, pop/ring-animationer, flytande belöningstext, resultat-hero.
   ════════════════════════════════════════════════════════════════════════ */
.jx {
    --bg1: #0b0b0d; --bg2: #171310; --gold: #e8c15a; --gold-dim: #a3812f; --red: #c0392b; --red-dark: #7a1f18;
    --green: #67e26a; --panel: #15151aee; --text: #f1ece2; --muted: #9c9488; --line: #3a2f22; --blue: #5aa9e8;
    font-family: 'Oswald', 'Arial Narrow', sans-serif; color: var(--text); letter-spacing: .2px;
    -webkit-tap-highlight-color: transparent;
}
.jx * { box-sizing: border-box; }
.jx button { font-family: inherit; }

/* ── Sida ───────────────────────────────────────────────── */
.jx-page { max-width: 1120px; margin: 0 auto; padding: 14px 12px 60px; }
.jx-hero { position: relative; text-align: center; padding: 26px 16px 18px; border-radius: 22px; margin-bottom: 16px; overflow: hidden;
    background: radial-gradient(ellipse at 50% -10%, #3a2a1a88, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2));
    border: 1px solid var(--line); box-shadow: inset 0 0 90px 10px #000a; }
.jx-badge { display: inline-block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim);
    border-radius: 999px; padding: 3px 12px; background: #0008; font-weight: 600; }
.jx-h1 { font-size: clamp(30px, 6vw, 52px); margin: 8px 0 4px; font-weight: 700; text-transform: uppercase; color: var(--gold); letter-spacing: 2px;
    text-shadow: 0 0 18px #e8c15a66, 0 2px 0 #000; line-height: 1.05; }
.jx-sub { color: var(--muted); font-size: 15px; margin: 0 auto; max-width: 560px; font-family: Roboto, sans-serif; }
.jx-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jx-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; text-align: center; min-width: 92px;
    backdrop-filter: blur(6px); box-shadow: 0 6px 18px #0008; }
.jx-chip small { display: block; font-size: 10px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.jx-chip b { font-size: 18px; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.jx-chip.red b { color: #ff6b5b; } .jx-chip.green b { color: var(--green); }

/* ── Jobbkort ───────────────────────────────────────────── */
.jx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.jx-tierhead { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; color: var(--gold-dim);
    font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }
.jx-tierhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.jx-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; cursor: pointer;
    background: linear-gradient(180deg, #19140f, #0e0c0a); border: 1px solid var(--line);
    box-shadow: 0 10px 26px #000a; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s; }
.jx-card:hover { transform: translateY(-3px); border-color: var(--gold-dim); box-shadow: 0 14px 34px #000c, 0 0 22px #e8c15a22; }
.jx-card:active { transform: translateY(0) scale(.99); }
.jx-card.locked { cursor: default; filter: saturate(.25) brightness(.7); }
.jx-card.locked:hover { transform: none; border-color: var(--line); }
.jx-art { position: relative; height: 128px; overflow: hidden; background: #111; }
.jx-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #0e0c0aee); }
.jx-art .jx-art-ico { position: absolute; right: 14px; bottom: 8px; font-size: 64px; z-index: 1; filter: drop-shadow(0 6px 10px #000c) drop-shadow(0 0 16px #e8c15a44);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.jx-card:hover .jx-art-ico { transform: scale(1.1) rotate(-4deg); }
.jx-art .jx-lvl { position: absolute; left: 12px; top: 10px; z-index: 2; font-size: 11px; letter-spacing: 2px; font-weight: 700; color: var(--gold);
    background: #000b; border: 1px solid var(--gold-dim); border-radius: 999px; padding: 2px 10px; }
.jx-art .jx-stars { position: absolute; right: 12px; top: 10px; z-index: 2; color: var(--gold); font-size: 12px; letter-spacing: 1px; text-shadow: 0 0 8px #e8c15a88; }
.jx-card-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.jx-card h3 { margin: 0; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text); }
.jx-card .jx-game { font-size: 11px; color: var(--gold-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: -4px; }
.jx-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; font-family: Roboto, sans-serif; flex: 1; }
.jx-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 4px; }
.jx-meta span { background: #0009; border: 1px solid #2a231a; border-radius: 10px; padding: 4px 6px; text-align: center; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-meta span.money { color: var(--green); } .jx-meta span.low { color: #ff8a7a; }
.jx-card-btn { margin-top: 6px; }
.jx-lock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: #000a; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.jx-lock b { font-size: 38px; }
.jx-cd { font-variant-numeric: tabular-nums; }

/* Konst per jobb (CSS-scener – inga bilder behövs) */
.jx-art-street   { background: linear-gradient(180deg, #1b1430 0%, #3b1d2e 55%, #1a1411 56%, #120e0b 100%); }
.jx-art-street::before { content: ""; position: absolute; inset: 20% 0 44% 0; background:
    repeating-linear-gradient(90deg, #0d0a14 0 40px, #1e1628 40px 46px, #0d0a14 46px 90px),
    linear-gradient(#ff3d7f55, #ff3d7f00); box-shadow: 0 0 40px #ff3d7f44; }
.jx-art-door     { background: radial-gradient(circle at 70% 60%, #6b4a1f 0 18%, transparent 19%), linear-gradient(135deg, #2a1d12, #0d0907); }
.jx-art-door::before { content: ""; position: absolute; left: 12%; top: 18%; width: 34%; height: 100%; border-radius: 8px 8px 0 0;
    background: repeating-linear-gradient(0deg, #3b2716 0 16px, #33210f 16px 18px); box-shadow: inset 0 0 20px #000; }
.jx-art-vault    { background: radial-gradient(circle at 70% 55%, #4a4030 0 26%, #2a241c 27% 34%, transparent 35%), linear-gradient(170deg, #1a1612, #0d0b08); }
.jx-art-scrapyard{ background: linear-gradient(180deg, #2a1d14 0%, #3a2a1a 40%, #241c16 62%, #120e0b 100%); }
.jx-art-scrapyard::before { content: ""; position: absolute; inset: 0 0 50% 0; background: repeating-linear-gradient(45deg, transparent 0 9px, #0006 9px 10px), repeating-linear-gradient(-45deg, transparent 0 9px, #0006 9px 10px); }
.jx-art-alarm    { background: radial-gradient(circle at 30% 40%, #c0392b88 0 12%, transparent 30%), linear-gradient(160deg, #1d1210, #0b0908); }
.jx-art-alarm::before { content: ""; position: absolute; left: 8%; right: 38%; top: 30%; height: 60%; background:
    linear-gradient(#ff4d3a 0 0) 0 10%/100% 5px no-repeat, linear-gradient(#e8c15a 0 0) 0 40%/100% 5px no-repeat, linear-gradient(#5aa9e8 0 0) 0 70%/100% 5px no-repeat; opacity: .75; }
.jx-art-terminal { background: repeating-linear-gradient(0deg, #0a1a0e 0 3px, #0d2213 3px 4px); }
.jx-art-terminal::before { content: "> ACCESS_\A > ******** \A > TRACE 43%"; white-space: pre; position: absolute; left: 14px; top: 18px; color: #67e26a; font: 12px/1.5 monospace; text-shadow: 0 0 6px #67e26a; }
.jx-art-highway  { background: linear-gradient(90deg, #111 0 12%, #262626 12% 88%, #111 88%); }
.jx-art-highway::before { content: ""; position: absolute; inset: 0 40%; background: repeating-linear-gradient(180deg, #e8c15a 0 18px, transparent 18px 36px); width: 4px; left: calc(50% - 2px); }
.jx-art-alley    { background: radial-gradient(ellipse at 20% 0%, #5aa9e855, transparent 55%), linear-gradient(180deg, #14161c, #0b0b0d); }
.jx-art-press    { background: repeating-linear-gradient(135deg, #1a2a1a 0 12px, #152215 12px 24px), #142014; }
.jx-art-press::before { content: "500"; position: absolute; left: 14px; top: 26px; font-size: 44px; font-weight: 700; color: #3f6b3f; border: 2px solid #3f6b3f; border-radius: 8px; padding: 0 10px; }
.jx-art-convoy   { background: linear-gradient(180deg, #151a24 0 55%, #2a2a2a 55% 80%, #121212 80%); }
.jx-art-convoy::before { content: ""; position: absolute; left: 0; right: 0; top: 66%; height: 3px; background: repeating-linear-gradient(90deg, #e8c15a 0 20px, transparent 20px 40px); }
.jx-art-casino   { background: radial-gradient(circle at 25% 60%, #c0392b55 0 20%, transparent 45%), repeating-conic-gradient(from 0deg at 25% 60%, #0f3d22 0 15deg, #0b2e19 15deg 30deg); }
.jx-art-drone    { background: linear-gradient(90deg, transparent 0 30%, #2b2b2b 30% 36%, transparent 36%), linear-gradient(0deg, transparent 0 45%, #2b2b2b 45% 52%, transparent 52%),
    repeating-linear-gradient(90deg, #1b1f1b 0 40px, #141714 40px 80px); }
.jx-art-drone::before { content: ""; position: absolute; left: 34%; top: 30%; width: 44px; height: 44px; border: 2px solid var(--green); border-radius: 4px; box-shadow: 0 0 10px var(--green); }
.jx-art-laser    { background: linear-gradient(180deg, #0c0a14, #120c1c); }
.jx-art-laser::before { content: ""; position: absolute; inset: 0; background:
    linear-gradient(25deg, transparent 48%, #ff2d4d 49% 50%, transparent 51%), linear-gradient(-20deg, transparent 58%, #ff2d4d 59% 60%, transparent 61%),
    linear-gradient(8deg, transparent 30%, #ff2d4d 31% 31.6%, transparent 32.6%); filter: drop-shadow(0 0 4px #ff2d4d); }
.jx-art-mega     { background: radial-gradient(circle at 70% 50%, #e8c15a66 0 12%, transparent 40%), conic-gradient(from 200deg at 70% 50%, #2a1d0c, #0d0907, #2a1d0c, #0d0907, #2a1d0c); }

/* ── Knappar (stora 3D) ─────────────────────────────────── */
.jx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; user-select: none;
    border: none; border-radius: 14px; padding: 14px 22px; font-size: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff;
    background: linear-gradient(180deg, #e0503f, var(--red) 55%, #a52d21); box-shadow: 0 4px 0 #4a0f0d, 0 10px 24px #c0392b44;
    transition: transform .08s, box-shadow .08s, filter .15s; touch-action: manipulation; }
.jx-btn:hover { filter: brightness(1.08); }
.jx-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a0f0d, 0 4px 12px #c0392b44; }
.jx-btn:disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; transform: none; }
.jx-btn.gold { color: #1a1206; background: linear-gradient(180deg, #f5d98a, var(--gold) 55%, #c49a3a); box-shadow: 0 4px 0 #6b5018, 0 10px 24px #e8c15a44; }
.jx-btn.gold:active { box-shadow: 0 1px 0 #6b5018; }
.jx-btn.ghost { background: #0009; border: 1px solid var(--line); box-shadow: 0 4px 0 #000; color: var(--text); }
.jx-btn.small { padding: 9px 14px; font-size: 14px; border-radius: 12px; letter-spacing: 1px; }
.jx-btn.block { width: 100%; }
.jx-btn.huge { padding: 18px 26px; font-size: 22px; border-radius: 16px; }

/* ── Startskärm ─────────────────────────────────────────── */
.jx-start { position: relative; max-width: 760px; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
    background: radial-gradient(ellipse at 50% -10%, #3a2a1a55, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2));
    box-shadow: inset 0 0 140px 40px #000c, 0 20px 50px #000c; }
.jx-start .jx-art { height: 170px; }
.jx-start-body { position: relative; padding: 0 18px 20px; margin-top: -40px; text-align: center; z-index: 2; }
.jx-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; text-align: left; }
.jx-how div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-family: Roboto, sans-serif; font-size: 13px; line-height: 1.35; }
.jx-how div i { display: block; font-style: normal; font-size: 26px; margin-bottom: 4px; }
.jx-how div b { display: block; font-family: Oswald, sans-serif; color: var(--gold); letter-spacing: 1px; font-size: 13px; text-transform: uppercase; margin-bottom: 2px; }
.jx-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 12px; }
.jx-actions-top { margin-top: 16px; }
.jx-warn { color: var(--muted); font-size: 12px; margin-top: 10px; font-family: Roboto, sans-serif; }
.jx-err { color: #ff6b5b; font-weight: 600; margin-top: 8px; }

/* ── Spelarena ──────────────────────────────────────────── */
.jx-playhead { max-width: 980px; margin: 0 auto 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jx-playhead b { font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.jx-arena { position: relative; max-width: 980px; margin: 0 auto; height: min(74dvh, 620px); min-height: 420px; border-radius: 20px; overflow: hidden;
    border: 1px solid var(--line); background: linear-gradient(180deg, var(--bg1), var(--bg2)); touch-action: none; user-select: none; -webkit-user-select: none;
    box-shadow: 0 20px 50px #000c; contain: layout paint; }
.jx-arena::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px 40px #000c; z-index: 30; }
.jx-arena.shake { animation: jxShake .35s linear; }
@keyframes jxShake { 15% { transform: translate(-7px, 3px); } 30% { transform: translate(6px, -4px); } 45% { transform: translate(-5px, -2px); } 60% { transform: translate(4px, 3px); } 80% { transform: translate(-2px, 1px); } }
.jx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 29; animation: jxFlash .35s ease-out forwards; }
.jx-flash.red { background: radial-gradient(circle, transparent 30%, #c0392b88); }
.jx-flash.gold { background: radial-gradient(circle, transparent 30%, #e8c15a55); }
@keyframes jxFlash { from { opacity: 1; } to { opacity: 0; } }

.jx-hud { position: absolute; left: 0; right: 0; top: 10px; z-index: 25; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; pointer-events: none; padding: 0 8px; }
.jx-pill { background: #15151acc; border: 1px solid #3a3228; border-radius: 999px; padding: 4px 14px; font-size: 16px; font-weight: 600; letter-spacing: 1px;
    backdrop-filter: blur(6px); box-shadow: 0 4px 14px #0009; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jx-pill.money { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px #e8c15a55, 0 4px 14px #0009; }
.jx-pill.warn { color: #ff6b5b; border-color: #c0392b; animation: jxBlink .8s step-start infinite; }
.jx-pill.bump { animation: jxBump .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes jxBump { 50% { transform: scale(1.18); } }
@keyframes jxBlink { 50% { opacity: .45; } }
.jx-timebar { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 26; background: #0008; }
.jx-timebar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); box-shadow: 0 0 10px var(--gold); transform-origin: left; }
.jx-combo { position: absolute; left: 50%; top: 52px; z-index: 25; transform: translateX(-50%); font-size: 26px; font-weight: 700; color: var(--gold); letter-spacing: 2px;
    text-shadow: 0 0 16px #e8c15aaa, 0 2px 0 #000; pointer-events: none; opacity: 0; white-space: nowrap; }
.jx-combo.on { animation: jxCombo .6s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes jxCombo { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 40% { opacity: 1; transform: translateX(-50%) scale(1.15); } 100% { opacity: .9; transform: translateX(-50%) scale(1); } }

.jx-float { position: absolute; z-index: 27; pointer-events: none; font-weight: 700; font-size: 22px; white-space: nowrap; transform: translate(-50%, -50%);
    animation: jxFloat 1s ease-out forwards; text-shadow: 0 2px 0 #000, 0 0 12px currentColor; }
.jx-float.good { color: var(--green); } .jx-float.bad { color: #ff5b4b; } .jx-float.gold { color: var(--gold); font-size: 26px; }
@keyframes jxFloat { from { opacity: 1; transform: translate(-50%, -50%) scale(.8); } 20% { transform: translate(-50%, -70%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.jx-ring { position: absolute; z-index: 20; pointer-events: none; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--gold);
    animation: jxRing .5s ease-out forwards; }
.jx-ring.red { border-color: #ff4d3a; }
@keyframes jxRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.jx-spark { position: absolute; z-index: 21; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; background: var(--gold); box-shadow: 0 0 8px currentColor;
    animation: jxSpark .6s ease-out forwards; }
@keyframes jxSpark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

.jx-count { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #000a; pointer-events: none; }
.jx-count b { font-size: 120px; color: var(--gold); text-shadow: 0 0 30px #e8c15aaa, 0 4px 0 #000; animation: jxPopBig .9s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes jxPopBig { 0% { transform: scale(.3); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.jx-over { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000b;
    animation: jxFade .3s both; text-align: center; padding: 20px; }
.jx-over b { font-size: clamp(34px, 7vw, 64px); color: var(--gold); text-transform: uppercase; text-shadow: 0 0 24px #e8c15aaa; animation: jxPopBig 1.4s cubic-bezier(.34,1.56,.64,1) both; animation-name: jxPop; }
.jx-over.bad b { color: #ff5b4b; text-shadow: 0 0 24px #c0392baa; }
.jx-over small { color: var(--muted); font-size: 16px; margin-top: 6px; letter-spacing: 2px; text-transform: uppercase; }
@keyframes jxFade { from { opacity: 0; } }
@keyframes jxPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.jx-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 25; font-size: 13px; letter-spacing: 1px; color: var(--muted);
    background: #000a; border: 1px solid #2a231a; border-radius: 999px; padding: 4px 14px; pointer-events: none; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }

/* ── Resultat-hero ──────────────────────────────────────── */
.jx-result { position: relative; max-width: 640px; margin: 0 auto; text-align: center; border-radius: 22px; overflow: hidden; padding: 26px 18px 20px;
    background: radial-gradient(ellipse at 50% -10%, #3a2a1a88, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2)); border: 1px solid var(--line);
    box-shadow: inset 0 0 140px 30px #000c, 0 20px 50px #000c; animation: jxPop .45s cubic-bezier(.34,1.56,.64,1); }
.jx-result.lose { border-color: #5a1d17; }
.jx-result .jx-res-icon { font-size: 54px; filter: drop-shadow(0 0 16px #e8c15a55); }
.jx-money { font-size: clamp(44px, 11vw, 84px); font-weight: 700; color: var(--gold); line-height: 1; margin: 6px 0 2px; text-shadow: 0 0 30px #e8c15a88, 0 3px 0 #000;
    font-variant-numeric: tabular-nums; }
.jx-result.lose .jx-money { color: #ff5b4b; text-shadow: 0 0 30px #c0392b88; font-size: clamp(36px, 8vw, 60px); }
.jx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 8px; }
.jx-cards div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.jx-cards small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.jx-cards b { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.jx-cards b.good { color: var(--green); } .jx-cards b.bad { color: #ff6b5b; }
.jx-rewards { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 18px; margin: 6px 0; }
.jx-rewards .xp { color: var(--blue); } .jx-rewards .resp { color: var(--gold); }
.jx-note { color: var(--muted); font-size: 13px; font-family: Roboto, sans-serif; margin: 6px 0 0; }
.jx-perfect { color: var(--gold); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }

@media (max-width: 640px) {
    .jx-how { grid-template-columns: 1fr; }
    .jx-arena { height: calc(100dvh - 190px); min-height: 460px; border-radius: 16px; }
    .jx-pill { font-size: 14px; padding: 3px 10px; }
    .jx-grid { grid-template-columns: 1fr; }
    .jx-art { height: 110px; }
    .jx-actions { grid-template-columns: 1fr 1.6fr; }
}

/* ════════════════════ Spelspecifikt ════════════════════ */
.jx-stage, .jx-fx { position: absolute; inset: 0; }
.jx-fx { z-index: 24; pointer-events: none; }

/* Skarpskytten */
.jx-g-sniper { cursor: crosshair; }
.jxs-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.jxs-lane { position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 3; overflow: hidden;
    background: linear-gradient(180deg, #0d0b09ee, #1c1510ee); border-bottom: 2px solid #e8c15a55; box-shadow: 0 6px 24px #000a, inset 0 -10px 20px #0008; }
.jxs-lane > i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #e8c15a55 0 24px, transparent 24px 48px); }
.jxs-field { position: absolute; left: 0; right: 0; bottom: 0; top: 96px; z-index: 2; }
.jxs-target { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: crosshair;
    background: radial-gradient(circle, #e8c15a22, #0000 70%); animation: jxPopIn .28s cubic-bezier(.34,1.56,.64,1) both; }
.jxs-target span { filter: drop-shadow(0 6px 8px #000c); line-height: 1; pointer-events: none; }
.jxs-target::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 14px #e8c15a88; animation: jxPulse 1s ease-in-out infinite; }
.jxs-target.bad::before { border-color: #ff4d3a; box-shadow: 0 0 14px #ff4d3a88; }
.jxs-target i { position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(#e8c15acc var(--p, 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%);
    animation: jxTimer linear forwards; }
.jxs-target.bad i { background: conic-gradient(#ff4d3acc var(--p, 360deg), transparent 0); }
@property --p { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@keyframes jxTimer { from { --p: 360deg; } to { --p: 0deg; } }
.jxs-target.dead { animation: jxPopOut .25s ease-in forwards; pointer-events: none; }
.jxs-target.gone { animation: jxFadeOut .2s forwards; pointer-events: none; }
@keyframes jxPopIn { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes jxPopOut { to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes jxFadeOut { to { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
@keyframes jxPulse { 50% { transform: scale(1.1); opacity: .6; } }
.jxs-runner { position: absolute; left: 0; top: 50%; margin-top: -32px; width: 64px; height: 64px; font-size: 50px; line-height: 64px; text-align: center; cursor: crosshair; will-change: transform; }
.jxs-runner span { display: inline-block; animation: jxRun .32s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px #000); }
.jxs-runner.thief::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 12px #e8c15a99; }
.jxs-runner.cop::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px dashed #5aa9e8aa; }
.jxs-runner b { position: absolute; right: -6px; top: -4px; font-size: 20px; }
.jxs-runner.dead { opacity: 0; transition: opacity .25s; pointer-events: none; }
@keyframes jxRun { from { transform: translateY(-3px) rotate(-5deg); } to { transform: translateY(3px) rotate(5deg); } }
.jxs-cross { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; z-index: 26; pointer-events: none; opacity: 0; border-radius: 50%;
    border: 2px solid #ff4d3acc; box-shadow: 0 0 10px #ff4d3a88; }
.jxs-cross::before, .jxs-cross::after { content: ""; position: absolute; background: #ff4d3a; }
.jxs-cross::before { left: 50%; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; }
.jxs-cross::after { top: 50%; left: -8px; right: -8px; height: 2px; margin-top: -1px; }
@media (max-width: 640px) { .jxs-lane { height: 78px; } .jxs-field { top: 78px; } .jxs-runner { font-size: 40px; } }

/* Fickstölden */
.jxp-sky { position: absolute; inset: 0 0 40% 0; background: linear-gradient(180deg, #120d22, #2a1530 70%, #3b1d2e); }
.jxp-sky .moon { position: absolute; right: 12%; top: 12%; width: 54px; height: 54px; border-radius: 50%; background: #f1e4b8; box-shadow: 0 0 40px #f1e4b877; }
.jxp-city { position: absolute; left: 0; right: 0; top: 14%; height: 46%; display: flex; align-items: flex-end; gap: 1%; padding: 0 1%; }
.jxp-city b { flex: 0 0 var(--w); background: #0d0a14; position: relative;
    background-image: repeating-linear-gradient(0deg, transparent 0 14px, #0d0a14 14px 22px), repeating-linear-gradient(90deg, #e8c15a33 0 6px, transparent 6px 14px); }
.jxp-shops { position: absolute; left: 0; right: 0; top: 50%; height: 12%; display: flex; justify-content: space-around; align-items: center; background: #0b0810; border-top: 2px solid #231a2a; }
.jxp-shops span { font-size: clamp(12px, 2.2vw, 20px); letter-spacing: 3px; color: #ffd166; text-shadow: 0 0 8px #ffd166, 0 0 18px #ffd16688; animation: jxNeon 3s infinite; }
.jxp-shops span.pink { color: #ff5da2; text-shadow: 0 0 8px #ff5da2, 0 0 18px #ff5da288; animation-delay: 1s; }
.jxp-shops span.blue { color: #5ad1ff; text-shadow: 0 0 8px #5ad1ff, 0 0 18px #5ad1ff88; animation-delay: 2s; }
@keyframes jxNeon { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .35; } }
.jxp-walk { position: absolute; left: 0; right: 0; top: 62%; bottom: 14%; background: linear-gradient(180deg, #2a2320, #1d1816); z-index: 2;
    background-image: repeating-linear-gradient(90deg, #0003 0 2px, transparent 2px 80px), linear-gradient(180deg, #2a2320, #1d1816); }
.jxp-curb { position: absolute; left: 0; right: 0; bottom: 12%; height: 2%; background: #4a3f38; z-index: 2; }
.jxp-road { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #121212; z-index: 2; }
.jxp-victim { position: absolute; left: -40px; width: 80px; height: 110px; cursor: pointer; will-change: transform; }
.jxp-victim.lane0 { top: -46px; z-index: 1; }
.jxp-victim.lane1 { top: 8px; z-index: 2; }
.jxp-victim .jxp-body { font-size: 64px; text-align: center; line-height: 1; filter: drop-shadow(0 6px 8px #000c); transition: filter .2s; }
.jxp-victim.lane1 .jxp-body { font-size: 76px; }
.jxp-victim.rtl .jxp-body { transform: scaleX(-1); }
.jxp-victim .jxp-shadow { position: absolute; left: 14px; right: 14px; bottom: -4px; height: 10px; border-radius: 50%; background: #0008; filter: blur(3px); }
.jxp-bubble { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; font-size: 24px; line-height: 40px; text-align: center;
    background: #1b0f0fe6; border: 2px solid #ff4d3a; box-shadow: 0 0 14px #ff4d3a88; transition: border-color .15s, background .15s, transform .15s; }
.jxp-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: inherit; border-bottom: 0; }
.jxp-victim.open .jxp-bubble { border-color: var(--green); background: #0f1b10e6; box-shadow: 0 0 20px #67e26aaa; transform: translateX(-50%) scale(1.15); }
.jxp-victim.open .jxp-body { filter: drop-shadow(0 0 14px #67e26a) drop-shadow(0 6px 8px #000c); }
.jxp-victim.open.soon .jxp-bubble { animation: jxBlink .14s step-start infinite; }
.jxp-loot { position: absolute; right: 2px; top: 54px; font-size: 24px; filter: drop-shadow(0 0 8px #e8c15a); }
.jxp-loot.fly { animation: jxLootFly .6s ease-in forwards; }
@keyframes jxLootFly { to { transform: translate(0, -160px) scale(1.6); opacity: 0; } }
.jxp-victim.robbed { pointer-events: none; }
.jxp-victim.robbed .jxp-body { opacity: .75; }
.jxp-victim.alert-hit .jxp-body { animation: jxShake .3s; filter: drop-shadow(0 0 14px #ff4d3a); }

/* ═══ Låsdyrkning v2 – stiftlås i genomskärning (endast CSS) ═══ */
.jx-g-lockpick .jx-stage { background: radial-gradient(120% 70% at 50% 18%, #2b1512 0%, #120909 45%, #050404 80%); touch-action: none; user-select: none; -webkit-user-select: none; }
.jx-g-lockpick .jx-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); }
.jx-g-lockpick .jx-combo { top: 50px; font-size: 18px; }
.jx-float.warn { color: #ffb23d; }
.jxl-wrap { position: absolute; inset: 50px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 14px 14px; }
/* låskroppen */
.jxl-lock { position: relative; flex: 1 1 auto; width: min(520px, 100%); max-height: 540px; min-height: 230px; border-radius: 22px; padding: 16px 44px 18px 40px;
    background: linear-gradient(160deg, #3b3d42 0%, #1a1b1e 40%, #0f1012 100%);
    box-shadow: inset 0 1px 0 #ffffff26, inset 0 -2px 0 #0009, inset 0 0 0 1px #ffffff0d, 0 0 0 1px #000, 0 24px 50px #000e, 0 0 60px #7a1f1822; transition: box-shadow .5s; }
.jxl-lock::before { content: ""; position: absolute; inset: 6px; border-radius: 17px; pointer-events: none; box-shadow: inset 0 0 0 1px #e8c15a1f, inset 0 10px 24px #0008; }
.jxl-cols { position: relative; display: flex; gap: 2px; height: 100%; }
.jxl-housing { position: absolute; left: -14px; right: -14px; top: -6px; height: calc(var(--ys, 50%) + 6px); border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, #5b5f66 0%, #3a3d43 18%, #2a2c31 60%, #1e2024 100%);
    box-shadow: inset 0 1px 0 #ffffff40, inset 0 -3px 6px #0008, 0 2px 0 #000; }
.jxl-housing::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .5; background: repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 4px); }
.jxl-housing i { position: absolute; width: 9px; height: 9px; border-radius: 50%; top: 8px; background: radial-gradient(circle at 35% 30%, #d9dde2, #5f636a 60%, #2a2c30); box-shadow: 0 1px 2px #000; z-index: 1; }
.jxl-housing i:nth-child(1) { left: 6px; } .jxl-housing i:nth-child(2) { right: 6px; }
.jxl-housing i:nth-child(3), .jxl-housing i:nth-child(4) { display: none; }
.jxl-plug { position: absolute; left: -14px; right: -14px; top: var(--ys, 50%); bottom: -8px; border-radius: 0 0 48% 48% / 0 0 26% 26%;
    background: radial-gradient(120% 90% at 50% 0%, #f1d27e 0%, #c9a24a 30%, #946f25 65%, #5a4214 100%);
    box-shadow: inset 0 2px 0 #fff3c4aa, inset 0 -14px 26px #0009, inset 0 0 0 1px #3b2a0c; transition: transform .7s cubic-bezier(.34,1.56,.64,1), filter .5s; }
.jxl-plug::after { content: ""; position: absolute; left: 6%; right: 6%; top: calc(var(--yk, 87%) - var(--ys, 50%) - 5px); height: 12px; border-radius: 6px;
    background: linear-gradient(180deg, #000, #1a1206 70%, #3a2a0c); box-shadow: inset 0 3px 6px #000, 0 1px 0 #f1d27e55; }
.jxl-shear { position: absolute; left: -16px; right: -16px; top: var(--ys, 50%); height: 2px; margin-top: -1px; z-index: 4; pointer-events: none;
    background: linear-gradient(90deg, transparent, #f5d98a 8%, #fff2c2 50%, #f5d98a 92%, transparent); box-shadow: 0 0 8px #e8c15acc, 0 0 18px #e8c15a55; }
.jxl-shear::before, .jxl-shear::after { content: ""; position: absolute; top: -4px; width: 0; height: 0; border: 5px solid transparent; }
.jxl-shear::before { left: 0; border-left-color: #f5d98a; } .jxl-shear::after { right: 0; border-right-color: #f5d98a; }
/* kammare */
.jxl-col { position: relative; z-index: 2; flex: 1; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.jxl-col::before { content: ""; position: absolute; left: 22%; right: 22%; top: 3.5%; bottom: calc(100% - var(--yk, 87%)); border-radius: 8px 8px 3px 3px;
    background: linear-gradient(90deg, #020202, #16130f 30%, #0b0a08 70%, #020202); box-shadow: inset 0 6px 10px #000, inset 0 0 0 1px #0009, 0 0 0 1px #ffffff10; transition: box-shadow .2s; }
.jxl-col em { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 800 11px/1 system-ui; font-style: normal; color: #3b2a0c; text-shadow: 0 1px 0 #f1d27e88; z-index: 4; pointer-events: none; }
.jxl-col.sel::before { box-shadow: inset 0 6px 10px #000, 0 0 0 2px #e8c15a, 0 0 16px #e8c15a66; }
.jxl-col.sel em { color: #fff; text-shadow: 0 0 6px var(--gold); }
.jxl-col.bind::before { box-shadow: inset 0 6px 10px #000, 0 0 0 2px #fff2c2, 0 0 22px #e8c15acc; }
.jxl-col.spring::before { box-shadow: inset 0 6px 10px #000, 0 0 0 2px #8a939e, 0 0 10px #8a939e55; }
.jxl-col.set::before { box-shadow: inset 0 6px 10px #000, 0 0 0 1px #67e26a66; }
.jxl-col.set em { color: #1d6b20; }
.jxl-col.bind .jxl-stack { animation: jxlBind .09s steps(2) infinite; }
.jxl-col.false { animation: jxlFalse .5s; }
.jxl-col.over, .jxl-col.drop { animation: jxlOver .5s; }
.jxl-col.strain .jxl-drv, .jxl-col.strain .jxl-key { filter: drop-shadow(0 0 6px #ff4d3a); }
.jxl-col.strain::before { box-shadow: inset 0 6px 10px #000, 0 0 0 2px #ff4d3a, 0 0 18px #ff4d3a99; animation: jxlStrain .1s infinite; }
.jxl-tag { position: absolute; left: 50%; top: -2px; z-index: 6; transform: translate(-50%, -100%); pointer-events: none; font: 800 9px/1 system-ui; letter-spacing: .08em;
    padding: 3px 5px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .12s; }
.jxl-tag.b { opacity: 1; color: #1a1206; background: linear-gradient(180deg, #fff2c2, #e8c15a); box-shadow: 0 0 12px #e8c15a; }
.jxl-tag.s { opacity: 1; color: #d6dbe1; background: #3a3d43; box-shadow: 0 0 0 1px #6d7784; }
.jxl-band { position: absolute; left: 14%; right: 14%; z-index: 3; pointer-events: none; border-radius: 3px;
    background: linear-gradient(90deg, #e8c15a10, #e8c15a55 50%, #e8c15a10); box-shadow: inset 0 0 0 1px #e8c15a88; opacity: .45; transition: opacity .15s, box-shadow .15s; }
.jxl-col.sel .jxl-band, .jxl-col.lift .jxl-band { opacity: 1; }
.jxl-col.hot .jxl-band { background: linear-gradient(90deg, #e8c15a33, #fff2c2cc 50%, #e8c15a33); box-shadow: 0 0 18px 4px #e8c15acc, inset 0 0 0 1px #fff2c2; }
.jxl-col.set .jxl-band { opacity: 0; }
.jxl-spring { position: absolute; left: 32%; right: 32%; transform-origin: 50% 0; z-index: 2; pointer-events: none; will-change: transform;
    background: repeating-linear-gradient(165deg, transparent 0 3px, #555b62 3px 4px, #b9bfc6 4px 5px, #555b62 5px 6px, transparent 6px 9px); opacity: .85; }
.jxl-stack { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform; }
.jxl-col:not(.lift) .jxl-stack { transition: transform .32s cubic-bezier(.34,1.56,.64,1); }
.jxl-drv { position: absolute; left: 26%; right: 26%; border-radius: 5px 5px 3px 3px; transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    background: linear-gradient(90deg, #4b4f56 0%, #c9ced4 22%, #ffffff 38%, #aab0b8 60%, #5d6168 85%, #3a3d42 100%);
    box-shadow: inset 0 2px 0 #ffffff66, inset 0 -2px 0 #0006, 0 1px 2px #000; }
.jxl-key { position: absolute; left: 26%; right: 26%; border-radius: 3px 3px 0 0; clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .15s;
    background: linear-gradient(90deg, #6b4f18 0%, #d9b45c 22%, #fff0bd 38%, #d2a849 60%, #7c5b1c 85%, #4a360f 100%); }
.jxl-gap { position: absolute; left: 20%; right: 20%; height: 3px; border-radius: 2px; background: #000; transition: box-shadow .1s, background .1s; }
.jxl-col.hot .jxl-gap { left: 6%; right: 6%; height: 4px; background: #fffbe6; box-shadow: 0 0 12px 5px #f5d98a, 0 0 30px 10px #e8c15aaa; }
.jxl-col.hot::before { box-shadow: inset 0 6px 10px #000, 0 0 0 2px #fff2c2, 0 0 30px #f5d98a; }
.jxl-col.hot .jxl-key, .jxl-col.hot .jxl-drv { filter: brightness(1.18); }
.jxl-col.set .jxl-drv { box-shadow: inset 0 2px 0 #ffffff66, 0 0 8px #67e26a99; }
.jxl-col.setnow .jxl-drv { animation: jxlSet .5s ease-out; }
/* verktyg */
.jxl-pick { position: absolute; left: 0; top: var(--yk, 87%); width: 0; height: 0; z-index: 5; pointer-events: none; will-change: transform; transition: transform .16s cubic-bezier(.2,.8,.3,1); --gx: 200px; }
.jxl-col.lift ~ .jxl-pick { transition: none; }
.jxl-pick .hook { position: absolute; left: -3px; top: -9px; width: 6px; height: 11px; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #7d838b, #ffffff 45%, #9aa0a8); box-shadow: 0 0 4px #000; }
.jxl-pick .shaft { position: absolute; left: -3px; top: 0; width: var(--gx); height: 4px; border-radius: 2px; background: linear-gradient(180deg, #ffffff, #b9bfc6 40%, #5d6168); box-shadow: 0 2px 3px #000c; }
.jxl-pick .grip { position: absolute; left: var(--gx); top: -6px; width: 34px; height: 16px; border-radius: 4px 9px 9px 4px;
    background: linear-gradient(180deg, #d0352a, #8e1d15 55%, #4d0e09); box-shadow: inset 0 1px 0 #ff8a7a88, inset 0 -2px 0 #0008, 0 3px 6px #000c; }
.jxl-pick .grip::before { content: ""; position: absolute; inset: 4px 8px; border-radius: 3px; background: repeating-linear-gradient(90deg, #0004 0 2px, transparent 2px 5px); }
.jxl-pick.snap .hook { animation: jxlSnap .6s forwards; }
.jxl-wrench { position: absolute; left: -22px; top: var(--yk, 87%); width: 20px; height: 60px; z-index: 5; pointer-events: none; transform-origin: 100% 0; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.jxl-wrench i { position: absolute; left: 6px; top: -3px; width: 24px; height: 6px; border-radius: 2px; background: linear-gradient(180deg, #ffffff, #9aa0a8 50%, #4b4f56); box-shadow: 0 1px 2px #000; }
.jxl-wrench b { position: absolute; left: 4px; top: -3px; width: 7px; height: 64px; border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, #4d0e09, #c0392b 45%, #7a1f18); box-shadow: 0 2px 4px #000; }
/* status, fot, knapp */
.jxl-status { min-height: 38px; width: min(520px, 100%); display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 12px; border-radius: 10px;
    font-size: 13.5px; line-height: 1.3; color: var(--text); background: #0d0b0acc; border: 1px solid #2c261e; transition: color .2s, border-color .2s, background .2s; }
.jxl-status[data-tone="gold"] { color: #fff2c2; border-color: #e8c15a88; background: #2a200acc; }
.jxl-status[data-tone="good"] { color: #b8f5b9; border-color: #67e26a66; }
.jxl-status[data-tone="warn"] { color: #ffc56b; border-color: #ffb23d88; background: #2a1a06cc; }
.jxl-status[data-tone="bad"] { color: #ffb3aa; border-color: #c0392bcc; background: #2a0b08cc; }
.jxl-status.pop { animation: jxlPop .25s cubic-bezier(.34,1.56,.64,1); }
.jxl-foot { display: flex; align-items: center; gap: 12px; width: min(520px, 100%); }
.jxl-face { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #f1d27e, #b58c35 55%, #5a4214 75%, #1a1b1e 78%, #3a3d42 100%); box-shadow: 0 0 0 1px #000, 0 3px 8px #000a; }
.jxl-face i { position: absolute; left: 12px; top: 6px; width: 6px; height: 18px; border-radius: 3px 3px 1px 1px; background: #0b0908; box-shadow: inset 0 1px 2px #000; transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.jxl-tension { flex: 1; display: flex; align-items: center; gap: 8px; --p: 0; }
.jxl-tension span { font: 700 10px/1 system-ui; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.jxl-tension i { position: relative; flex: 1; height: 8px; border-radius: 4px; background: #000; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #3a3326; overflow: hidden; }
.jxl-tension i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--red-dark), var(--gold)); box-shadow: 0 0 10px var(--gold); transition: width .35s cubic-bezier(.34,1.56,.64,1); }
.jxl-tension b { font: 800 12px/1 system-ui; color: var(--gold); min-width: 26px; text-align: right; }
.jxl-picks { display: flex; gap: 5px; }
.jxl-picks i { position: relative; width: 26px; height: 6px; border-radius: 2px; background: linear-gradient(180deg, #fff, #9aa0a8); box-shadow: 0 1px 2px #000; transition: opacity .3s, transform .3s; }
.jxl-picks i::before { content: ""; position: absolute; left: 0; top: -5px; width: 4px; height: 6px; border-radius: 2px 2px 0 0; background: #d6dbe1; }
.jxl-picks i::after { content: ""; position: absolute; right: 0; top: -3px; width: 11px; height: 12px; border-radius: 2px 4px 4px 2px; background: linear-gradient(180deg, #d0352a, #7a1f18); }
.jxl-picks i.gone { opacity: .2; transform: rotate(-20deg) translateY(3px); filter: grayscale(1); }
.jxl-hold { flex: none; width: min(520px, 100%); height: 62px; border-radius: 16px; border: 1px solid #e8c15a66; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
    font: 800 17px/1 'Oswald', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff2c2;
    background: linear-gradient(180deg, #2a2118, #15110c); box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -3px 0 #0008, 0 6px 18px #000c; transition: transform .08s, box-shadow .12s; }
.jxl-hold.down { transform: translateY(2px) scale(.99); background: linear-gradient(180deg, #3a2c16, #1e170c); }
.jxl-hold[data-state="in"] { color: #140d02; text-shadow: 0 1px 0 #fff6; border-color: #fff2c2; background: linear-gradient(180deg, #ffe7a0, #e8b93e 50%, #a8771c); box-shadow: 0 0 28px #e8c15acc, inset 0 1px 0 #fff; animation: jxlPulse .3s infinite alternate; }
.jxl-hold[data-state="hi"] { color: #fff; background: linear-gradient(180deg, #d0352a, #7a1f18); box-shadow: 0 0 24px #c0392bcc; }
.jxl-hold:disabled { opacity: .6; }
/* guide */
.jxl-tut { position: absolute; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 16px; background: #000c; backdrop-filter: blur(3px); transition: opacity .3s; }
.jxl-tut.gone { opacity: 0; pointer-events: none; }
.jxl-tut-card { width: min(440px, 100%); padding: 18px 18px 14px; border-radius: 18px; background: linear-gradient(180deg, #1c1612, #0b0908); border: 1px solid #e8c15a77; box-shadow: 0 20px 60px #000, 0 0 40px #7a1f1844; animation: jxlPop .35s cubic-bezier(.34,1.56,.64,1); }
.jxl-tut-card h3 { margin: 0 0 12px; font: 700 20px/1.2 'Oswald', system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-align: center; }
.jxl-tut-card ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.jxl-tut-card li { display: flex; gap: 12px; align-items: center; counter-increment: s; }
.jxl-tut-card p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.jxl-tut-card .ic { flex: none; position: relative; width: 40px; height: 48px; border-radius: 8px; background: linear-gradient(180deg, #3a3d43 50%, #b58c35 50%); box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #e8c15a44; }
.jxl-tut-card .ic::before { content: counter(s); position: absolute; left: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font: 800 11px/18px system-ui; text-align: center; box-shadow: 0 0 0 2px #0b0908; }
.jxl-tut-card .ic::after { content: ""; position: absolute; left: 15px; width: 10px; border-radius: 3px; }
.jxl-tut-card .ic1::after { top: 10px; height: 30px; background: linear-gradient(180deg, #c9ced4 45%, #000 45% 50%, #e8c15a 50%); animation: jxlTutLift 1.6s ease-in-out infinite; }
.jxl-tut-card .ic2::after { top: 10px; height: 30px; background: linear-gradient(180deg, #c9ced4 45%, #000 45% 50%, #e8c15a 50%); box-shadow: 0 0 0 2px #fff2c2, 0 0 12px #e8c15a; animation: jxlBind .09s steps(2) infinite; }
.jxl-tut-card .ic3::after { top: 12px; height: 24px; background: linear-gradient(180deg, #c9ced4 45%, #fffbe6 45% 55%, #e8c15a 55%); box-shadow: 0 0 14px 3px #e8c15acc; }
.jxl-tut-btns { display: flex; gap: 10px; margin-top: 16px; }
.jxl-tut-btns button { flex: 1; height: 46px; border-radius: 12px; cursor: pointer; font: 700 14px/1 'Oswald', system-ui; letter-spacing: .08em; text-transform: uppercase; }
.jxl-tut-btns .skip { flex: .6; background: transparent; color: var(--muted); border: 1px solid #3a3326; }
.jxl-tut-btns .go { color: #1a1206; border: 0; background: linear-gradient(180deg, #fff2c2, #e8c15a 55%, #b58c35); box-shadow: 0 0 20px #e8c15a77; }
/* upplåst / förstörd */
.jxl-open .jxl-face i { transform: rotate(90deg); }
.jxl-open .jxl-plug { filter: brightness(1.25) saturate(1.2); }
.jxl-open .jxl-wrench { transform: rotate(-28deg); }
.jxl-open .jxl-lock { box-shadow: inset 0 1px 0 #ffffff26, 0 0 0 2px var(--gold), 0 0 70px #e8c15acc; }
.jxl-open .jxl-shear { height: 4px; margin-top: -2px; box-shadow: 0 0 24px 4px var(--gold); }
.jxl-open .jxl-col .jxl-key { animation: jxlDrop .5s cubic-bezier(.34,1.56,.64,1); }
.jxl-busted .jxl-lock { box-shadow: 0 0 0 2px var(--red), 0 0 60px #c0392bcc; }
@keyframes jxlBind { 50% { translate: 1px 0; } }
@keyframes jxlStrain { 50% { translate: 1px 0; } }
@keyframes jxlFalse { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 10px #ffb23d) sepia(1) saturate(3); } }
@keyframes jxlOver { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); filter: drop-shadow(0 0 10px #ff4d3a); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@keyframes jxlSnap { 0% { transform: none; opacity: 1; } 100% { transform: translate(-16px, 50px) rotate(-220deg); opacity: 0; } }
@keyframes jxlSet { 0% { filter: brightness(2.2) drop-shadow(0 0 10px #fff2c2); } 100% { filter: none; } }
@keyframes jxlDrop { 0% { transform: translateY(-6px); } 100% { transform: none; } }
@keyframes jxlPop { 0% { transform: scale(.94); opacity: .6; } 100% { transform: none; opacity: 1; } }
@keyframes jxlPulse { to { box-shadow: 0 0 40px #f5d98a, inset 0 1px 0 #fff; } }
@keyframes jxlTutLift { 0%, 100% { transform: none; } 50% { transform: translateY(-8px); } }
@media (min-width: 700px) { .jxl-wrap { gap: 12px; padding-bottom: 18px; } .jxl-hold { width: min(360px, 100%); } .jxl-status { font-size: 14px; } }

/* Flyktbilen */
.jx-g-getaway .jx-stage { background: #1b2a17; overflow: hidden; }
.jxg-side { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(180deg, #1d3019 0 60px, #1a2b16 60px 120px); }
.jxg-side.l { left: 0; } .jxg-side.r { right: 0; }
.jxg-road { position: absolute; top: 0; bottom: 0; z-index: 1; background: linear-gradient(90deg, #d8d8d8 0 6px, #2a2a2e 6px calc(100% - 6px), #d8d8d8 calc(100% - 6px)); overflow: hidden; box-shadow: 0 0 40px #000c; }
.jxg-marks { position: absolute; left: 0; right: 0; top: -120px; bottom: -120px; will-change: transform;
    background: linear-gradient(90deg, transparent calc(33.33% - 2px), #e8e2c8 calc(33.33% - 2px) calc(33.33% + 2px), transparent calc(33.33% + 2px) calc(66.66% - 2px), #e8e2c8 calc(66.66% - 2px) calc(66.66% + 2px), transparent calc(66.66% + 2px));
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 60px, transparent 60px 120px); mask: repeating-linear-gradient(180deg, #000 0 60px, transparent 60px 120px); }
.jxg-obj, .jxg-player { position: absolute; left: 0; top: 0; width: 54px; height: 100px; z-index: 3; will-change: transform; }
.jxg-player { z-index: 5; transition: transform .11s ease-out; }
.jxg-player .jxc-car { transform: rotate(var(--tilt, 0deg)); transition: transform .12s; }
.jxg-player.hurt { animation: jxHurt .8s steps(2) 1; }
@keyframes jxHurt { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.jxc-car { position: absolute; inset: 8px 6px; border-radius: 12px 12px 10px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c) 30% 70%, color-mix(in srgb, var(--c) 70%, #000));
    box-shadow: 0 8px 14px #000a, inset 0 0 0 2px #0004; }
.jxc-car .ws { position: absolute; left: 12%; right: 12%; top: 22%; height: 18%; border-radius: 6px 6px 2px 2px; background: #0d1b2a; box-shadow: inset 0 2px 0 #5aa9e855; }
.jxc-car .rw { position: absolute; left: 14%; right: 14%; bottom: 12%; height: 12%; border-radius: 2px 2px 5px 5px; background: #0d1b2a; }
.jxc-car .l1, .jxc-car .l2 { position: absolute; bottom: -2px; width: 10px; height: 5px; border-radius: 2px; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }
.jxc-car .l1 { left: 4px; } .jxc-car .l2 { right: 4px; }
.jxc-car.me { --c: #1a1a1a; background: linear-gradient(90deg, #000, #2b2b2b 30% 70%, #000); }
.jxc-car.me::after { content: ""; position: absolute; left: 44%; right: 44%; top: 0; bottom: 0; background: var(--gold); opacity: .9; }
.jxg-obj .jxc-car { transform: rotate(180deg); }
.jxg-obj .jxc-car .l1, .jxg-obj .jxc-car .l2 { background: #fff8d0; box-shadow: 0 0 10px #fff8d0; }
.jxc-car.cop::before { content: ""; position: absolute; left: 10%; right: 10%; top: 46%; height: 8%; border-radius: 3px; background: linear-gradient(90deg, #ff3b30 50%, #2e86de 50%); animation: jxSiren .4s steps(2) infinite; }
@keyframes jxSiren { 50% { filter: hue-rotate(180deg) brightness(1.6); box-shadow: 0 0 18px #2e86de; } }
.jxg-block { position: absolute; left: -6px; right: -6px; top: 36px; height: 26px; border-radius: 5px; background: repeating-linear-gradient(45deg, #e8c15a 0 10px, #1a1a1a 10px 20px); box-shadow: 0 6px 12px #000c; }
.jxg-block i { position: absolute; left: 4px; right: 4px; top: -8px; height: 8px; background: radial-gradient(circle, #ff9f1a 40%, transparent 42%) 0 0/14px 8px repeat-x; animation: jxBlink .5s step-start infinite; }
.jxg-bag { position: absolute; inset: 20px 0; font-size: 44px; text-align: center; line-height: 60px; filter: drop-shadow(0 0 12px #e8c15a); animation: jxPulse .8s infinite; }
.jxg-obj.hit { animation: jxFadeOut .4s forwards; }
.jxg-sirens { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 6; pointer-events: none; background: linear-gradient(90deg, #ff3b3055, transparent 40% 60%, #2e86de55); animation: jxSirenGlow .6s steps(2) infinite; }
@keyframes jxSirenGlow { 50% { background: linear-gradient(90deg, #2e86de55, transparent 40% 60%, #ff3b3055); } }
.jxg-tap { position: absolute; bottom: 14px; z-index: 28; width: 74px; height: 74px; border-radius: 50%; border: 2px solid #e8c15a66; background: #000a; color: var(--gold); font-size: 28px;
    box-shadow: 0 4px 0 #000; touch-action: manipulation; cursor: pointer; }
.jxg-tap:active { transform: translateY(3px); box-shadow: none; }
.jxg-tap.l { left: 14px; } .jxg-tap.r { right: 14px; }

/* Värdetransporten */
.jx-g-armored .jx-stage { overflow: hidden; }
.jxa-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0d1424 0%, #1f2638 45%, #3a2a24 62%); }
.jxa-sky i { position: absolute; left: 18%; top: 14%; width: 40px; height: 40px; border-radius: 50%; background: #f5e6b8; box-shadow: 0 0 50px #f5e6b8aa; }
.jxa-hills { position: absolute; left: -5%; right: -5%; top: 38%; height: 22%; background: radial-gradient(ellipse at 20% 100%, #121824 50%, transparent 51%), radial-gradient(ellipse at 70% 100%, #0f1420 55%, transparent 56%); }
.jxa-posts { position: absolute; left: 0; right: 0; top: 50%; height: 10%; background: repeating-linear-gradient(90deg, transparent 0 90px, #2b2b30 90px 96px); border-bottom: 3px solid #3a3a40; }
.jxa-road { position: absolute; left: 0; right: 0; top: 58%; height: 22%; background: linear-gradient(180deg, #2c2c30, #1c1c1f); border-top: 3px solid #555; }
.jxa-lines { position: absolute; left: 0; right: -80px; top: 50%; height: 4px; background: repeating-linear-gradient(90deg, #e8c15a 0 40px, transparent 40px 80px); will-change: transform; }
.jxa-zone { position: absolute; left: 0; top: -40px; bottom: 0; background: linear-gradient(180deg, #e8c15a00, #e8c15a33); border-left: 2px dashed var(--gold); border-right: 2px dashed var(--gold);
    box-shadow: inset 0 0 30px #e8c15a44; }
.jxa-zone span { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); color: var(--gold); font-size: 22px; text-shadow: 0 0 10px var(--gold); animation: jxRun .5s infinite alternate; }
.jxa-zone.pop { animation: jxFade .3s; }
.jxa-spikes { position: absolute; left: 0; right: 0; bottom: 18%; height: 10px; opacity: 0; background: repeating-linear-gradient(90deg, #aaa 0 4px, transparent 4px 10px); }
.jxa-spikes.go { animation: jxSpikes .7s ease-out; }
@keyframes jxSpikes { 0% { opacity: 1; transform: scaleY(2.6); } 100% { opacity: 0; transform: scaleY(1); } }
.jxa-veh { position: absolute; left: 0; bottom: 22%; height: 90px; will-change: transform; z-index: 3; }
.jxa-veh.truck { width: 190px; } .jxa-veh.van { width: 150px; }
.jxa-veh .body { position: absolute; inset: 0 0 18px 0; border-radius: 10px 22px 6px 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 20px #000a; }
.jxa-veh.truck .body { background: linear-gradient(180deg, #5b6068, #33373d); border: 2px solid #22252a; }
.jxa-veh.truck .body span { font-size: 18px; font-weight: 700; letter-spacing: 3px; color: var(--gold); text-shadow: 0 0 8px #e8c15a88; margin-right: 30px; }
.jxa-veh.truck .body em { position: absolute; left: 0; right: 0; bottom: 10px; height: 5px; background: var(--gold); }
.jxa-veh.van .body { background: linear-gradient(180deg, #f1f1ee, #c9c9c4); border-radius: 12px 26px 8px 8px; }
.jxa-veh.van .body span { font-size: 12px; color: #333; font-weight: 600; margin-right: 26px; font-family: Roboto, sans-serif; }
.jxa-veh .win { position: absolute; right: 8px; top: 10px; width: 34px; height: 26px; border-radius: 4px 14px 4px 4px; background: #0d1b2a; box-shadow: inset 0 2px 0 #5aa9e866; }
.jxa-veh > b { position: absolute; bottom: 0; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #777 0 30%, #111 32%); border: 3px solid #000; animation: jxSpin .4s linear infinite; }
.jxa-veh .w1 { left: 18px; } .jxa-veh .w2 { right: 18px; } .jxa-veh .w3 { left: 58px; }
@keyframes jxSpin { to { transform: rotate(360deg); } }
.jxa-veh::after { content: ""; position: absolute; right: -60px; top: 30px; width: 70px; height: 30px; background: radial-gradient(ellipse at left, #fff8d066, transparent 70%); }
.jxa-veh.skid { filter: drop-shadow(0 0 12px #ff9f43); }
.jxa-veh.stopped > b { animation: none; }
.jxa-veh.stopped { animation: jxShake .4s; }
.jxa-veh.fade { opacity: 0; transition: opacity .5s; }
.jxa-crew { position: absolute; left: 3%; top: 44%; font-size: 30px; z-index: 2; filter: drop-shadow(0 4px 4px #000); }
.jxa-btn { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 28; min-width: min(360px, 88%); }
.jxa-btn:active { transform: translate(-50%, 3px); }

/* Drönarspaningen */
.jx-g-drone .jx-stage { background: #0c100c; overflow: hidden; }
.jxd-city { position: absolute; inset: 0; filter: saturate(.85); }
.jxd-blocks { position: absolute; inset: 0; }
.jxd-blocks i { position: absolute; left: calc(var(--c) * 25% + 1.5%); top: calc(var(--r) * 25% + 1.5%); width: 22%; height: 22%; border-radius: 6px;
    background: linear-gradient(135deg, hsl(calc(90 + var(--hue)) 8% 18%), hsl(calc(90 + var(--hue)) 8% 12%)); box-shadow: inset 0 0 0 3px #0006, 4px 6px 0 #0007;
    background-image: radial-gradient(circle at 30% 30%, #ffffff10 0 8%, transparent 9%), radial-gradient(circle at 70% 65%, #ffffff0c 0 12%, transparent 13%), linear-gradient(135deg, hsl(calc(90 + var(--hue)) 8% 18%), hsl(calc(90 + var(--hue)) 8% 12%)); }
.jxd-road { position: absolute; background: #2a2d2a; box-shadow: 0 0 0 2px #1a1c1a; }
.jxd-road.h { left: 0; right: 0; height: 7%; transform: translateY(-50%); background-image: repeating-linear-gradient(90deg, #d8d2b066 0 16px, transparent 16px 34px); background-size: 100% 2px; background-repeat: repeat-x; background-position: 0 50%; }
.jxd-road.v { top: 0; bottom: 0; width: 5%; transform: translateX(-50%); background-image: repeating-linear-gradient(180deg, #d8d2b066 0 16px, transparent 16px 34px); background-size: 2px 100%; background-repeat: repeat-y; background-position: 50% 0; }
.jxd-cars { position: absolute; inset: 0; }
.jxd-car { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; z-index: 2; }
.jxd-car i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 6px; background: var(--c); box-shadow: 0 3px 6px #000c, inset 0 0 0 2px #0005; cursor: pointer; }
.jxd-car i::before { content: ""; position: absolute; inset: -14px; }
.jxd-car i::after { content: ""; position: absolute; right: 18%; top: 15%; bottom: 15%; width: 16%; background: #0008; border-radius: 3px; }
.jxd-car.rev i { transform: translate(-50%, -50%) rotate(180deg); }
.jxd-car.vert i { transform: translate(-50%, -50%) rotate(90deg); }
.jxd-car.vert.rev i { transform: translate(-50%, -50%) rotate(-90deg); }
.jxd-car.k3 i { border-radius: 8px; } .jxd-car.k2 i::after { right: auto; left: 8%; width: 60%; background: #fff2; }
.jxd-car.locked i { outline: 3px solid var(--green); outline-offset: 5px; box-shadow: 0 0 20px var(--green); }
.jxd-car.wrong i { outline: 3px solid #ff4d3a; outline-offset: 5px; box-shadow: 0 0 20px #ff4d3a; }
.jxd-hud { position: absolute; inset: 0; pointer-events: none; z-index: 10;
    background: repeating-linear-gradient(0deg, #67e26a08 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 55%, #041a0588); }
.jxd-hud i { position: absolute; width: 38px; height: 38px; border: 3px solid #67e26a99; }
.jxd-hud .c1 { left: 14px; top: 56px; border-right: 0; border-bottom: 0; } .jxd-hud .c2 { right: 14px; top: 56px; border-left: 0; border-bottom: 0; }
.jxd-hud .c3 { left: 14px; bottom: 14px; border-right: 0; border-top: 0; } .jxd-hud .c4 { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.jxd-cross { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border: 1px solid #67e26a66; border-radius: 50%; }
.jxd-hud .alt, .jxd-hud .rec { position: absolute; bottom: 20px; font: 12px monospace; color: #67e26acc; letter-spacing: 1px; }
.jxd-hud .alt { left: 60px; } .jxd-hud .rec { right: 60px; color: #ff4d3a; animation: jxBlink 1s step-start infinite; }
.jxd-brief { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 12; pointer-events: none; text-align: center; min-width: 200px;
    background: #0b140bdd; border: 1px solid #67e26a88; border-radius: 14px; padding: 6px 16px 8px; box-shadow: 0 0 20px #67e26a33; backdrop-filter: blur(4px); }
.jxd-brief small { display: block; font-size: 10px; letter-spacing: 3px; color: #67e26a; text-transform: uppercase; }
.jxd-brief b { font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); }
.jxd-brief.pop { animation: jxPop .4s cubic-bezier(.34,1.56,.64,1); }
.jxd-sample { height: 36px; position: relative; }
.jxd-sample i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 6px; background: var(--c); box-shadow: 0 0 0 2px #0008, 0 0 12px #67e26a55; }
@media (max-width: 640px) { .jxd-brief { top: 44px; } .jxd-brief b { font-size: 16px; } .jxd-hud .c1, .jxd-hud .c2 { top: 48px; } }
.jx-g-sniper .jx-hud { top: 106px; }
.jx-g-sniper .jx-combo { top: 146px; }
@media (max-width: 640px) { .jx-g-sniper .jx-hud { top: 86px; } .jx-g-sniper .jx-combo { top: 122px; } }
/* Drönare: tydliga siluetter per fordonstyp (samma i signalementet) */
.jxd-car i, .jxd-sample i { overflow: visible; }
.jxd-car.k0 i::after, .jxd-sample .k0::after { right: 20%; width: 14%; } /* bil: vindruta fram */
.jxd-car.k0 i, .jxd-sample .k0 { background: linear-gradient(90deg, var(--c) 0 18%, #0008 18% 26%, var(--c) 26%); border-radius: 10px; }
.jxd-car.k1 i, .jxd-sample .k1 { border-radius: 4px 8px 8px 4px; background: linear-gradient(90deg, var(--c) 0 78%, #0009 78% 88%, var(--c) 88%); }
.jxd-car.k1 i::after, .jxd-sample .k1::after { display: none; }
.jxd-car.k2 i, .jxd-sample .k2 { border-radius: 3px; background: linear-gradient(90deg, var(--c) 0 68%, #111 68% 72%, var(--c) 72% 86%, #0009 86% 92%, var(--c) 92%); }
.jxd-car.k2 i::after, .jxd-sample .k2::after { display: none; }
.jxd-car.k3 i, .jxd-sample .k3 { border-radius: 50%; }
.jxd-car.k3 i::after, .jxd-sample .k3::after { left: 40%; right: auto; top: 20%; bottom: 20%; width: 20%; border-radius: 50%; background: #111; }
.jxd-car.k4 i, .jxd-sample .k4 { border-radius: 6px; background: repeating-linear-gradient(90deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 70%, #000) 6px 8px); box-shadow: 0 3px 6px #000c, inset 0 0 0 3px color-mix(in srgb, var(--c) 60%, #000); }
.jxd-sample i::after { content: ""; position: absolute; }
.jxp-victim.robbed .jxp-bubble { border-color: #555; box-shadow: none; background: #111c; }
.jx-actions .jx-btn { white-space: nowrap; }
@media (max-width: 640px) { .jx-actions .jx-btn { font-size: 15px; letter-spacing: 1px; padding: 14px 10px; } .jx-actions .jx-btn.huge { font-size: 19px; } }

/* ── Svårighetsgrad (Medel/Svår) ─────────────────────────────── */
.jx-pill.diff.d1 { color: #ffb86b; border-color: #ffb86b66; }
.jx-pill.diff.d2 { color: #ff6b6b; border-color: #ff6b6b88; background: #2a0d0d; }
.jxp-cop { position: absolute; left: 0; bottom: 6%; width: 64px; z-index: 3; pointer-events: none; text-align: center; }
.jxp-cop .jxp-body { font-size: 46px; filter: drop-shadow(0 0 10px #3aa0ff); }
.jxp-cop .jxp-beam { position: absolute; left: 50%; bottom: 58px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #3aa0ff; box-shadow: 0 0 18px 6px #3aa0ff99; animation: jxpSiren .5s steps(2) infinite; }
@keyframes jxpSiren { 50% { background: #ff3a3a; box-shadow: 0 0 18px 6px #ff3a3a99; } }
.jxp-walk.cop-on .jxp-victim { filter: saturate(.5) brightness(.8); }
.jxp-walk.cop-on::after { content: "👮"; position: absolute; inset: 0; box-shadow: inset 0 0 60px #3aa0ff55; pointer-events: none; font-size: 0; }
.jxc-car.cop.swerve { box-shadow: 0 0 22px #ff3a3a88; }
.jx-d2 .jxs-target.bad { animation-duration: .7s; }

/* ── Svårighetsväljare + topplista (startskärm/resultat) ───────── */
.jx-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.jx-diff-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; cursor: pointer;
  background: #15110e; border: 1.5px solid #3a2f25; color: var(--text, #eee); font-family: inherit; min-width: 0; }
.jx-diff-opt b { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.jx-diff-opt small { font-size: 12px; color: var(--muted); font-family: Roboto, sans-serif; white-space: nowrap; }
.jx-diff-opt.on.d0 { border-color: #2ea043; background: #10200f; box-shadow: 0 0 0 2px #2ea04333; }
.jx-diff-opt.on.d1 { border-color: #ffb86b; background: #241709; box-shadow: 0 0 0 2px #ffb86b33; }
.jx-diff-opt.on.d2 { border-color: #ff5b4a; background: #2a0d0b; box-shadow: 0 0 0 2px #ff5b4a33; }
.jx-diff-opt.poor { opacity: .45; }
.jx-diff-desc { color: var(--muted); font-size: 13px; font-family: Roboto, sans-serif; margin: 2px 0 6px; min-height: 2.6em; }
.jx-diff-tag { font-size: 13px; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; border: 1px solid #3a2f25; color: #9be29b; }
.jx-diff-tag.d1 { color: #ffb86b; border-color: #ffb86b55; }
.jx-diff-tag.d2 { color: #ff6b6b; border-color: #ff6b6b66; }
.jx-newbest { color: #ffd75a; }
.jx-board { text-align: left; margin-top: 14px; background: #120e0b; border: 1px solid #2d241c; border-radius: 14px; padding: 10px 12px; }
.jx-board-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.jx-board-head > b { color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.jx-board-tabs { display: flex; gap: 4px; }
.jx-board-tabs button { background: transparent; border: 1px solid #3a2f25; color: var(--muted); border-radius: 999px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.jx-board-tabs button.on { color: var(--gold); border-color: var(--gold); }
.jx-board-list { list-style: none; margin: 0; padding: 0; font-family: Roboto, sans-serif; font-size: 14px; }
.jx-board-list li { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; }
.jx-board-list li:nth-child(odd) { background: #ffffff06; }
.jx-board-list li.me { background: #e8c15a22; outline: 1px solid #e8c15a88; }
.jx-board-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-board-list .nm small { color: var(--muted); margin-left: 4px; }
.jx-board-list .sc { color: var(--green, #2ea043); font-weight: 700; }
.jx-board-list .tm { color: var(--muted); font-size: 12px; min-width: 44px; text-align: right; }
.jx-board-list .cash { color: var(--gold, #e8c15a); font-weight: 800; white-space: nowrap; text-align: right; }
.jx-board-list .sc { font-size: 12px; min-width: 40px; text-align: right; }
.jx-board-list .lb-st, .jx-board-mine .lb-st { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: var(--muted); margin-top: 1px; }
.jx-board-list .lb-st i, .jx-board-mine .lb-st i { font-style: normal; white-space: nowrap; }
.jx-board-list .lb-st i.bad, .jx-board-mine .lb-st i.bad { color: #f85149; }
.jx-board-list .nm { white-space: normal; }
.jx-board-by { margin: 2px 0 6px; font-size: 11px; color: var(--muted); font-family: Roboto, sans-serif; }
.jx-board-mine { margin-top: 6px; font-size: 13px; color: var(--muted); font-family: Roboto, sans-serif; }
.jx-board-mine b { color: var(--gold); }

/* ── Mobil: helskärm under spel (ingen bottenmeny/header, ingen sidscroll/bounce) ── */
@media (max-width: 900px) {
  html.jx-playing, html.jx-playing body { overflow: hidden; overscroll-behavior: none; height: 100%; }
  html.jx-playing .gw-bottomnav, html.jx-playing .gwh-appbar, html.jx-playing .gwg-dock, html.jx-playing .gwg-pill { display: none !important; }
  html.jx-playing .jx-play-shell {
    position: fixed; inset: 0; z-index: 1400; background: #0b0807; display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) calc(env(safe-area-inset-right, 0px) + 6px)
             calc(env(safe-area-inset-bottom, 0px) + 6px) calc(env(safe-area-inset-left, 0px) + 6px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  html.jx-playing .jx-play-shell .jx-playhead { margin: 0 0 6px; flex: 0 0 auto; }
  html.jx-playing .jx-play-shell .jx-playhead b { font-size: 15px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.jx-playing .jx-play-shell .jx-playhead .jx-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; min-height: 0; width: auto; }
  html.jx-playing .jx-play-shell .jx-playhead .jx-diff-tag { font-size: 11px; padding: 1px 6px; }
  html.jx-playing .jx-play-shell > .jx-arena { flex: 1 1 auto; height: auto; min-height: 0; margin: 0; width: 100%; touch-action: none; }
}
@media (max-width: 640px) {
  .jx-diff-opt b { font-size: 13px; }
  .jx-diff-opt small { font-size: 11px; }
}
/* Lönespecifikation (Skarpskytten m.fl.) */
.jx-pay{max-width:420px;margin:10px auto 6px;padding:10px 14px;border-radius:12px;background:#0b0b0b;border:1px solid #3a3322;text-align:left;font-size:14px}
.jx-pay__row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:#cfc8b8}
.jx-pay__row b{white-space:nowrap}
.jx-pay__row.good b{color:#56d364}.jx-pay__row.bad b{color:#f0726a}
.jx-pay__row.total{border-top:1px solid #3a3322;margin-top:4px;padding-top:8px;font-weight:900;color:#f5d77a;font-size:15px}
.jx-g-lockpick.jx-arena::after { box-shadow: inset 0 0 60px 6px #0008; }

/* ═══ Förfalskaren – sedelkontroll ═══ */
.jx-g-counterfeit .jx-stage { background: radial-gradient(120% 80% at 50% 10%, #2a1a12 0%, #120b09 50%, #050404 85%); user-select: none; -webkit-user-select: none; }
.jx-g-counterfeit .jx-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: radial-gradient(60% 40% at 50% 0%, #e8c15a14, transparent 70%), repeating-linear-gradient(90deg, #ffffff03 0 1px, transparent 1px 4px); }
.jx-g-counterfeit.jx-arena::after { box-shadow: inset 0 0 60px 6px #0008; }
.jx-g-counterfeit .jx-combo { top: 54px; left: auto; right: 14px; transform: none; font-size: 16px; }
.jxc-wrap { position: absolute; inset: 48px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px 12px; --nw: 360px; }
.jxc-notes { display: flex; flex-direction: column; gap: 6px; }
.jxc-wrap.side .jxc-notes { flex-direction: row; gap: 14px; }
.jxc-wrap.side .jxc-chips { width: min(100%, calc(var(--nw) * 2 + 14px)); }
.jxc-chips { width: var(--nw); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.jxc-chips span { font: 700 10.5px/1 system-ui; letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; color: var(--muted); background: #15110dcc; border: 1px solid #3a3228; transition: all .2s; }
.jxc-chips span.ok { color: #0b1a0b; background: #67e26a; border-color: #67e26a; box-shadow: 0 0 10px #67e26a88; }
.jxc-chips span.ok::before { content: '✓ '; }
.jxc-row { width: var(--nw); display: flex; flex-direction: column; gap: 4px; }
.jxc-lab { display: flex; align-items: baseline; gap: 6px; font: 700 11px/1.2 system-ui; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 2px; }
.jxc-lab.gen { color: #9fd9a1; }
.jxc-lab.print { color: var(--gold); }
.jxc-lab b { color: #ff8a7a; }
.jxc-lab span { margin-left: auto; color: #ff6b5b; }
.jxc-note { position: relative; width: var(--nw); aspect-ratio: 2.1 / 1; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 10px 26px #000c, 0 2px 0 #ffffff10 inset; }
.jxc-note.gen { filter: saturate(.92); }
.jxc-note.gen::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px #67e26a55; pointer-events: none; }
.jxc-note.prn { cursor: crosshair; touch-action: none; box-shadow: 0 0 0 1px #000, 0 0 0 3px #e8c15a55, 0 12px 30px #000d, 0 0 30px #e8c15a1f; }
.jxc-note.in { animation: jxcIn .45s cubic-bezier(.2,.9,.3,1.2); }
.jxc-note.bad { animation: jxcBad .35s; }
.jxc-svgw, .jxc-svgw svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 8px; }
.jxc-svgw::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, #ffffff30 45%, transparent 60%); mix-blend-mode: soft-light; }
.jxc-mark { position: absolute; z-index: 3; border-radius: 6px; pointer-events: none; }
.jxc-mark.hit { box-shadow: 0 0 0 2px #67e26a, 0 0 16px #67e26acc, inset 0 0 12px #67e26a66; background: #67e26a1a; animation: jxcPop .35s cubic-bezier(.34,1.56,.64,1); }
.jxc-mark.ref { box-shadow: 0 0 0 1.5px #67e26acc; border: 1px dashed #fff8; }
.jxc-mark.missed { box-shadow: 0 0 0 2px #ff4d3a, 0 0 18px #ff4d3a; background: #ff4d3a22; animation: jxcBlink .5s steps(2) infinite; }
.jxc-mark[data-t]::after { content: attr(data-t); position: absolute; left: 50%; top: -3px; transform: translate(-50%, -100%); white-space: nowrap;
    font: 800 10px/1 system-ui; letter-spacing: .04em; padding: 3px 6px; border-radius: 4px; color: #0b1a0b; background: #67e26a; box-shadow: 0 2px 6px #000a; }
.jxc-mark.missed[data-t]::after { background: #ff4d3a; color: #fff; }
.jxc-x { position: absolute; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; animation: jxcX .7s ease-out forwards; }
.jxc-x::before, .jxc-x::after { content: ""; position: absolute; left: 11px; top: 0; width: 4px; height: 26px; border-radius: 2px; background: #ff4d3a; box-shadow: 0 0 8px #ff4d3a; transform: rotate(45deg); }
.jxc-x::after { transform: rotate(-45deg); }
.jxc-stamp { position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none; opacity: 0; font: 800 clamp(22px, 7vw, 44px)/1 'Oswald', system-ui; letter-spacing: .12em;
    color: #3ddc5a; border: 4px solid #3ddc5a; border-radius: 10px; padding: 4px 14px; background: #04120699; text-shadow: 0 0 12px #3ddc5a; transform: translate(-50%, -50%) rotate(-10deg); }
.jxc-stamp.on { animation: jxcStamp .5s cubic-bezier(.34,1.56,.64,1) forwards; }
.jxc-tip { margin-top: 2px; font-size: 12px; letter-spacing: .06em; color: var(--muted); text-align: center; }
.jxc-loupe { position: absolute; left: 0; top: 0; z-index: 35; width: 150px; height: 150px; pointer-events: none; opacity: 0; transition: opacity .12s; will-change: transform; }
.jxc-loupe.on { opacity: 1; }
.jxc-loupe .lp-m { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #000;
    box-shadow: 0 0 0 3px #e8c15a, 0 0 0 5px #000, 0 12px 30px #000e, inset 0 0 18px #000a; }
.jxc-loupe .lp-in { position: absolute; left: 0; top: 0; aspect-ratio: 2.1 / 1; will-change: transform; }
.jxc-loupe .lp-in svg { width: 100%; height: 100%; display: block; }
.jxc-loupe .lp-r { position: absolute; right: -18px; bottom: -14px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 0 2px #67e26a, 0 0 0 4px #000, 0 6px 14px #000c; }
.jxc-loupe .lp-r b { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 800 7px/1 system-ui; letter-spacing: .08em; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; text-transform: uppercase; }
.jxc-loupe .cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; box-shadow: 0 0 0 1.5px #c0392b, 0 0 0 3px #fff6; }
.jxc-tut .ci { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-style: normal; background: #1a140e; box-shadow: inset 0 0 0 1px #e8c15a55; }
@keyframes jxcIn { from { transform: translateX(30px) rotate(1.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jxcBad { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
@keyframes jxcPop { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jxcBlink { 50% { opacity: .35; } }
@keyframes jxcX { 0% { transform: scale(1.6); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes jxcStamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(2.4); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); } }
@media (min-width: 700px) { .jxc-loupe { width: 190px; height: 190px; } .jxc-loupe .lp-r { width: 80px; height: 80px; } .jxc-lab { font-size: 12px; } }

/* ═══ LARMSABOTAGE v2 ═══ */
.jx-g-alarm .jx-stage { background: radial-gradient(120% 80% at 50% 0%, #26140f 0%, #0e0908 50%, #040303 90%); touch-action: none; user-select: none; -webkit-user-select: none; }
.jxa-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 10px 12px; }
.jxa-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(560px, 100%); }
.jxa-lights { display: flex; gap: 6px; padding: 6px 9px; border-radius: 999px; background: #0008; border: 1px solid #ffffff14; }
.jxa-lights i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a2320, #2a0f0d); box-shadow: inset 0 0 3px #000; transition: .2s; }
.jxa-lights i.on { background: radial-gradient(circle at 35% 30%, #ff8a7a, #e0342b 55%, #7a1f18); box-shadow: 0 0 12px #ff3b30, 0 0 22px #ff3b3088; animation: jxaBlink .5s ease-in-out infinite alternate; }
@keyframes jxaBlink { to { filter: brightness(.65); } }
.jxa-steps { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.jxa-steps span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: #ffffff0a; border: 1px solid #ffffff14; opacity: .55; }
.jxa-steps span.cur { opacity: 1; border-color: var(--gold); box-shadow: 0 0 12px #e8c15a55; background: #e8c15a18; }
.jxa-steps span.ok { opacity: 1; color: #1a1206; background: linear-gradient(180deg, #ffe08a, #c9962c); border-color: #ffe08a; font-weight: 800; }
/* korridoren med vakten */
.jxa-hall { position: relative; width: min(560px, 100%); height: 34px; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #120c0a, #1d1512); border: 1px solid #ffffff10; }
.jxa-hall .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, #2a201b 0 18px, #221a16 18px 36px); }
.jxa-guard { position: absolute; left: -12%; bottom: 3px; font-size: 22px; transform: translateX(-50%); transition: left .1s linear; filter: drop-shadow(0 0 4px #000); }
.jxa-guard .beam { position: absolute; right: 70%; top: 2px; width: 90px; height: 26px; transform-origin: right center; background: linear-gradient(270deg, #fff6c8cc, #fff6c800); clip-path: polygon(100% 40%, 0 0, 0 100%, 100% 60%); opacity: 0; transition: opacity .2s; }
.jxa-hall .feet { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: 0; }
.jxa-hall.warn { border-color: #f5c51888; box-shadow: 0 0 14px #f5c51833 inset; }
.jxa-hall.warn .feet { opacity: 1; animation: jxaFeet .38s ease-in-out infinite alternate; }
.jxa-hall.on { border-color: #fff6c8; box-shadow: 0 0 20px #fff6c855; }
.jxa-hall.on .beam { opacity: 1; }
.jxa-hall:not(.warn):not(.on) .jxa-guard { left: -12% !important; }
@keyframes jxaFeet { to { transform: translateY(-50%) scale(1.25); } }
.jxa-beam { position: absolute; inset: 0; z-index: 22; pointer-events: none; opacity: 0; transition: opacity .15s; display: grid; place-items: center;
    background: radial-gradient(60% 45% at 50% 55%, #fff6c833, #fff6c808 60%, transparent), linear-gradient(180deg, #fff6c81a, transparent 40%); }
.jxa-beam b { font: 700 clamp(34px, 11vw, 64px)/1 'Oswald', system-ui; letter-spacing: .08em; color: #fff6c8; text-shadow: 0 0 22px #ffd166, 0 4px 0 #000; opacity: .9; animation: jxaPulse .4s ease-in-out infinite alternate; }
.jxa-beam.on { opacity: 1; }
@keyframes jxaPulse { to { transform: scale(1.06); } }
.jx-arena.jxa-frozen .jxa-box { filter: saturate(.4) brightness(1.15); }
/* panelboxen */
.jxa-box { position: relative; flex: 1 1 auto; width: min(560px, 100%); min-height: 0; border-radius: 18px; padding: 14px; display: flex;
    background: linear-gradient(160deg, #3a3531 0%, #24201d 45%, #181513 100%); border: 1px solid #0006;
    box-shadow: inset 0 1px 0 #ffffff22, inset 0 -3px 0 #0008, 0 12px 30px #000c; }
.jxa-box.in { animation: jxaIn .35s cubic-bezier(.34,1.56,.64,1); }
.jxa-box.hit { animation: jxaHit .35s; }
.jxa-box.solved { box-shadow: inset 0 1px 0 #ffffff22, 0 0 0 2px #e8c15a, 0 0 34px #e8c15a66; }
@keyframes jxaIn { from { transform: translateY(20px) scale(.96); opacity: 0; } }
@keyframes jxaHit { 30% { box-shadow: 0 0 0 3px #ff3b30, 0 0 40px #ff3b30aa; } }
.jxa-box .scr { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cfc6bb, #5b5550); box-shadow: 0 1px 1px #000; }
.jxa-box .scr::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4px; height: 2px; background: #3a3531; transform: rotate(35deg); }
.scr.a { left: 8px; top: 8px; } .scr.b { right: 8px; top: 8px; } .scr.c { left: 8px; bottom: 8px; } .scr.d { right: 8px; bottom: 8px; }
.jxa-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; padding: 10px;
    background: radial-gradient(100% 80% at 50% 30%, #15110f, #0a0807); box-shadow: inset 0 2px 10px #000; }
/* kablar */
.jxa-plate { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 12px; background: #000; border: 1px solid #e8c15a55; box-shadow: 0 0 16px #e8c15a22; }
.jxa-plate .lbl { font-size: 18px; }
.jxa-clue { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.jxa-clue i { width: 44px; height: 14px; border-radius: 7px; background: var(--c); box-shadow: 0 0 12px var(--c), inset 0 -3px 0 #0005; animation: jxaGlow 1s ease-in-out infinite alternate; border: 1px solid #fff3; }
.jxa-clue i.st { background: repeating-linear-gradient(90deg, var(--c) 0 7px, #fff 7px 11px); }
.jxa-clue b { font: 700 12px/1 system-ui; color: var(--gold); }
.jxa-clue.ok { opacity: .35; } .jxa-clue.ok::after { content: "✔"; position: absolute; left: 14px; top: -3px; color: #27c46b; font-weight: 900; }
@keyframes jxaGlow { to { filter: brightness(1.35); } }
.jxa-wires { width: min(100%, 420px); flex: 1; min-height: 0; overflow: visible; }
.jxa-wires .term { fill: #0f0d0c; stroke: #ffffff18; }
.jxa-w { cursor: pointer; }
.jxa-w path { fill: none; stroke-linecap: round; }
.jxa-w .hit { stroke: transparent; stroke-width: 30; pointer-events: stroke; }
.jxa-w .ol { stroke: #000; stroke-width: 13; pointer-events: none; }
.jxa-w .core { stroke-width: 9; pointer-events: none; filter: drop-shadow(0 2px 2px #000a); }
.jxa-w .stripe { stroke: #fff; stroke-width: 9; stroke-dasharray: 5 9; pointer-events: none; opacity: .9; }
.jxa-w .nut { fill: #b9a98c; stroke: #3d342c; stroke-width: 2; }
.jxa-w:hover .core { filter: brightness(1.25) drop-shadow(0 0 6px #fff6); }
.jxa-w.cut { pointer-events: none; }
.jxa-w.cut .core, .jxa-w.cut .stripe { opacity: .55; }
.jxa-w .gap { fill: #0c0908; }
.jxa-w .end { fill: #ffd166; filter: drop-shadow(0 0 4px #ffb703); animation: jxaSpark .6s ease-out 3; }
@keyframes jxaSpark { 50% { opacity: .2; } }
/* krets */
.jxa-circ { --sz: 56px; position: relative; display: grid; grid-template-columns: 30px auto 30px; align-items: start; }
.jxa-circ .grid { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), var(--sz)); gap: 3px; padding: 5px; border-radius: 12px; background: #000; border: 1px solid #ffffff14; }
.jxa-circ .src, .jxa-circ .dst { grid-row: 1; margin-top: calc(5px + var(--r) * (var(--sz) + 3px) + var(--sz) / 2 - 14px); font-size: 22px; line-height: 28px; text-align: center; }
.jxa-circ .src { grid-column: 1; filter: drop-shadow(0 0 6px #ffd166); } .jxa-circ .dst { grid-column: 3; filter: grayscale(1) brightness(.7); transition: .3s; }
.jxa-circ.live .dst { filter: drop-shadow(0 0 10px #ffd166); transform: scale(1.2); }
.jxa-circ .tile { width: var(--sz); height: var(--sz); padding: 0; border: 0; border-radius: 8px; background: linear-gradient(160deg, #221c18, #141110); box-shadow: inset 0 1px 0 #ffffff12; cursor: pointer; touch-action: manipulation; }
.jxa-circ .tile:active { transform: scale(.94); }
.jxa-circ .rot { width: 100%; height: 100%; transition: transform .16s cubic-bezier(.34,1.56,.64,1); }
.jxa-circ svg { width: 100%; height: 100%; display: block; }
.jxa-circ .pipe-o { fill: none; stroke: #000; stroke-width: 26; stroke-linecap: butt; }
.jxa-circ .pipe { fill: none; stroke: #5b524a; stroke-width: 16; stroke-linecap: butt; transition: stroke .2s; }
.jxa-circ .knob { fill: #3d352f; stroke: #000; stroke-width: 3; }
.jxa-circ .tile.on .pipe { stroke: #ffd166; filter: drop-shadow(0 0 6px #ffb703); }
.jxa-circ .tile.on .knob { fill: #e8c15a; }
.jxa-circ.live .tile.on .pipe { stroke: #fff2b3; }
/* sekvens */
.jxa-seq { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.jxa-seq .eye { font-size: 26px; height: 32px; transition: .2s; }
.jxa-seq .eye.go { animation: jxaPulse .5s ease-in-out infinite alternate; }
.jxa-seq .pads { display: grid; grid-template-columns: repeat(2, min(118px, 32vw)); gap: 12px; }
.jxa-seq .pad { aspect-ratio: 1; border-radius: 22px; border: 3px solid #000; cursor: pointer; touch-action: manipulation; position: relative;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #000), color-mix(in srgb, var(--c) 25%, #000)); box-shadow: inset 0 2px 0 #ffffff22, 0 6px 0 #000; transition: transform .08s, filter .1s; }
.jxa-seq .pad span { position: absolute; right: 9px; bottom: 6px; font: 700 11px system-ui; color: #fff5; }
.jxa-seq .pad.demo, .jxa-seq .pad.lit { background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 30px var(--c), 0 0 60px var(--c), 0 6px 0 #000; transform: translateY(2px); }
.jxa-seq .dots { display: flex; gap: 7px; }
.jxa-seq .dots i { width: 12px; height: 12px; border-radius: 50%; background: #ffffff18; border: 1px solid #ffffff22; }
.jxa-seq .dots i.ok { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
/* nål */
.jxa-dial { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.jxa-dial svg { width: min(100%, 330px); overflow: visible; }
.jxa-dial .track { fill: none; stroke: #1f1a17; stroke-width: 22; stroke-linecap: round; }
.jxa-dial .zone { fill: none; stroke: #27c46b; stroke-width: 22; filter: drop-shadow(0 0 8px #27c46b); }
.jxa-dial .tk { stroke: #5b524a; stroke-width: 2; }
.jxa-dial .ndl { transform-origin: 120px 120px; }
.jxa-dial .ndl line { stroke: #e0342b; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px #e0342b); }
.jxa-dial .ndl circle { fill: #e8c15a; stroke: #000; stroke-width: 3; }
.jxa-dial .ndl.in line { stroke: #9dffbf; filter: drop-shadow(0 0 8px #27c46b); }
.jxa-dial .locks { display: flex; gap: 8px; }
.jxa-dial .locks i { width: 18px; height: 18px; border-radius: 5px; background: #ffffff12; border: 1px solid #ffffff22; }
.jxa-dial .locks i.ok { background: linear-gradient(180deg, #ffe08a, #c9962c); box-shadow: 0 0 10px #e8c15a; }
.jxa-lock { min-width: 200px; padding: 16px 26px; border-radius: 16px; border: 0; cursor: pointer; touch-action: manipulation; font: 700 20px/1 'Oswald', system-ui; letter-spacing: .12em; color: #fff;
    background: linear-gradient(180deg, #ff5a4a, #c0392b 55%, #7a1f18); box-shadow: 0 6px 0 #4a0f0b, 0 10px 26px #c0392b66; }
.jxa-lock:active { transform: translateY(4px); box-shadow: 0 2px 0 #4a0f0b; }
.jx-arena.jxa-alarm::before { content: ""; position: absolute; inset: 0; z-index: 29; pointer-events: none; animation: jxaSiren .45s steps(2) infinite; }
@keyframes jxaSiren { 0% { background: #ff000033; } 100% { background: #0000ff22; } }
@media (max-width: 420px) { .jxa-wrap { gap: 6px; padding: 46px 8px 10px; } .jxa-box { padding: 10px; } .jxa-steps span { width: 24px; height: 24px; font-size: 12px; } }

/* ═══ SÄKERHETSHACKET v2 ═══ */
.jx-g-hack .jx-stage { background: radial-gradient(120% 80% at 50% 0%, #1d130c 0%, #0a0806 55%, #030202 100%); touch-action: none; user-select: none; -webkit-user-select: none; }
.jx-g-hack .jx-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); z-index: 1; }
.jxh-wrap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 10px 12px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
.jxh-wrap.in .jxh-gridwrap { animation: jxhIn .4s ease-out; }
@keyframes jxhIn { from { opacity: 0; filter: blur(6px) hue-rotate(40deg); transform: scale(.97); } }
.jxh-trace { width: min(560px, 100%); display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; color: #ff8a7a; }
.jxh-trace .bar { flex: 1; height: 10px; border-radius: 6px; background: #2a0f0d; border: 1px solid #ff3b3044; overflow: hidden; }
.jxh-trace .bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #7a1f18, #e0342b, #ff8a7a); box-shadow: 0 0 12px #ff3b30; }
.jxh-trace b { min-width: 42px; text-align: right; color: #ffd6d2; }
.jxh-wrap.hot .jxh-trace { animation: jxaBlink .35s infinite alternate; }
.jxh-head { width: min(560px, 100%); display: flex; align-items: center; gap: 10px; }
.jxh-head .srv { font-size: 13px; color: #cdbf9c; white-space: nowrap; } .jxh-head .srv b { color: var(--gold); }
.jxh-head .buf { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hc { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 3px; border-radius: 6px; font: 700 12px/1 ui-monospace, Menlo, monospace; color: var(--c, #e8c15a); background: #0b0907; border: 1px solid color-mix(in srgb, var(--c, #e8c15a) 45%, transparent); }
.hc.slot { border-style: dashed; border-color: #ffffff22; }
.hc.in { animation: jxhPop .25s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.hc.ice { color: #ff5a4a; border-color: #ff3b3066; background: #2a0f0d; }
@keyframes jxhPop { from { transform: scale(.4); } }
.jxh-dms { width: min(560px, 100%); display: grid; gap: 5px; }
.jxh-dms .dm { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 10px; background: #ffffff06; border: 1px solid #ffffff10; }
.jxh-dms .dm i { font-style: normal; width: 18px; color: #8f836c; }
.jxh-dms .dm .hc { opacity: .75; }
.jxh-dms .dm .hc.lit { opacity: 1; background: color-mix(in srgb, var(--c) 22%, #000); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.jxh-dms .dm.ok { border-color: #e8c15a88; background: linear-gradient(90deg, #e8c15a22, transparent); } .jxh-dms .dm.ok i { color: var(--gold); }
.jxh-dms .dm.ok .hc { opacity: 1; }
.jxh-dms .dm em { margin-left: auto; font: 700 10px/1 system-ui; letter-spacing: .14em; color: var(--gold); font-style: normal; }
.jxh-dms .dm.fail { border-color: #ff3b3066; opacity: .6; } .jxh-dms .dm.fail i { color: #ff5a4a; }
.jxh-gridwrap { flex: 1 1 auto; min-height: 0; width: min(560px, 100%); display: grid; place-items: center; }
.jxh-grid { --sz: 54px; display: grid; grid-template-columns: repeat(var(--n), var(--sz)); gap: 5px; padding: 8px; border-radius: 14px; background: #060504; border: 1px solid #e8c15a33; box-shadow: 0 0 30px #000, inset 0 0 20px #000; }
.jxh-grid .cell { width: var(--sz); height: var(--sz); border-radius: 10px; border: 1px solid #ffffff10; background: #0e0b09; color: var(--c); font: 700 clamp(13px, calc(var(--sz) * .32), 20px)/1 ui-monospace, Menlo, monospace; opacity: .35; cursor: pointer; touch-action: manipulation; transition: opacity .15s, transform .1s, box-shadow .15s; }
.jxh-grid .cell.on { opacity: 1; background: linear-gradient(180deg, #2a2014, #140f0a); border-color: #e8c15a66; box-shadow: 0 0 12px #e8c15a22, inset 0 0 0 1px #e8c15a22; }
.jxh-grid .cell.pv { opacity: .7; outline: 1px dashed #e8c15a66; }
.jxh-grid .cell.on:hover { transform: translateY(-2px); box-shadow: 0 0 18px #e8c15a55; }
.jxh-grid .cell:active { transform: scale(.94); }
.jxh-grid .cell.used { opacity: .12; } .jxh-grid .cell.used span { visibility: hidden; }
.jxh-grid .cell.ice { color: #ff5a4a; } .jxh-grid .cell.ice.on { border-color: #ff3b3088; background: linear-gradient(180deg, #3a1210, #1a0807); animation: jxhIce 1.2s steps(2) infinite; }
@keyframes jxhIce { 50% { box-shadow: 0 0 14px #ff3b3066; } }
.jxh-grid .cell.no { animation: jxhNo .25s; }
@keyframes jxhNo { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.jxh-out { padding: 9px 16px; border-radius: 10px; border: 1px solid #ffffff22; background: #ffffff08; color: #cdbf9c; font: 700 12px/1 system-ui; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.jxh-banner { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 5; padding: 14px 22px; border-radius: 14px; font: 700 clamp(20px, 6vw, 30px)/1 'Oswald', system-ui; letter-spacing: .08em; white-space: nowrap; animation: jxlPop .35s cubic-bezier(.34,1.56,.64,1); }
.jxh-banner.ok { color: #1a1206; background: linear-gradient(180deg, #ffe08a, #c9962c); box-shadow: 0 0 40px #e8c15a88; }
.jxh-banner.bad { color: #ffd6d2; background: #2a0f0d; border: 1px solid #ff3b3088; }
@media (max-width: 420px) { .jxh-wrap { gap: 6px; padding: 46px 8px 10px; } .hc { min-width: 27px; height: 22px; font-size: 11px; } }

/* ── Knarkaffären v2 ── */
.jxd-wrap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 12px 14px; }
.jxd-wrap > * { width: min(520px, 100%); }
.jxd-top { display: flex; justify-content: space-between; align-items: center; }
.jxd-top .rep i { font-style: normal; color: #4a3d22; font-size: 18px; letter-spacing: 1px; transition: color .3s; }
.jxd-top .rep i.on { color: var(--gold); text-shadow: 0 0 8px #e8c15a99; }
.jxd-top .q { display: flex; gap: 5px; }
.jxd-top .q span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #3a2e1a; background: #120e0a; font-size: 15px; color: #6b5a3a; }
.jxd-top .q span.cur { border-color: var(--gold); box-shadow: 0 0 10px #e8c15a66; }
.jxd-top .q span.bust, .jxd-top .q span.civ, .jxd-top .q span.walk { border-color: #7a1f18; background: #2a0d0b; }
.jxd-top .q span.deal, .jxd-top .q span.cop { border-color: var(--gold-dim); background: #221a0c; }
.jxd-scene { position: relative; flex: 1 1 auto; min-height: 250px; max-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid #2c2216;
  background: radial-gradient(ellipse at 50% 0%, #e8c15a26, transparent 55%), linear-gradient(180deg, #16110c, #0a0807 70%, #140a08); }
.jxd-scene .brick { position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 22px, #000 22px 24px), repeating-linear-gradient(90deg, #3a2317 0 46px, #000 46px 48px); mask: linear-gradient(180deg, #000, transparent 75%); }
.jxd-scene .lamp { position: absolute; left: 50%; top: -30px; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle, #ffd98a33, transparent 65%); animation: jxdLamp 4s infinite; }
@keyframes jxdLamp { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 50% { opacity: .55; } 53% { opacity: 1; } }
.jxd-buyer { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 70%; }
.jxd-buyer .av { font-size: clamp(76px, 22vw, 110px); line-height: 1; filter: drop-shadow(0 8px 14px #000); }
.jxd-buyer .av.mad { animation: jxdMad .45s; }
@keyframes jxdMad { 20% { transform: translateX(-6px) rotate(-6deg); } 50% { transform: translateX(6px) rotate(5deg); } 80% { transform: translateX(-3px); } }
.jxd-buyer .nm { position: relative; z-index: 1; margin-top: 4px; font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--gold); background: #000a; border: 1px solid var(--gold-dim); border-radius: 999px; padding: 1px 10px; }
.jxd-buyer .meters { width: 100%; display: grid; gap: 4px; margin-top: 4px; }
.jxd-buyer .m { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.jxd-buyer .m b { font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dim); min-width: 56px; font-weight: 600; }
.jxd-buyer .m .bar { flex: 1; height: 8px; border-radius: 5px; background: #1c1510; border: 1px solid #3a2e1a; overflow: hidden; }
.jxd-buyer .m.pat i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #7a1f18, var(--gold)); box-shadow: 0 0 8px #e8c15a88; transition: transform .12s linear; }
.jxd-buyer .m.pat.low .bar { animation: jxdLow .5s infinite alternate; border-color: #e0342b; }
@keyframes jxdLow { to { box-shadow: 0 0 12px #e0342b; } }
.jxd-buyer .m.nerve i { display: block; height: 100%; width: var(--n, 50%); background: linear-gradient(90deg, #6f86a8, #d9534f); }
.jxd-bub { position: absolute; left: 50%; bottom: calc(100% - 28px); bottom: auto; top: max(10px, calc(100% - 300px)); transform: translateX(-50%); max-width: 88%; background: #f3ead2; color: #1a1206; font-weight: 600; font-size: 15px; line-height: 1.25;
  padding: 8px 14px; border-radius: 16px; text-align: center; box-shadow: 0 6px 18px #000a; z-index: 3; }
.jxd-bub::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #f3ead2; }
.jxd-bub.pop { animation: jxdPop .3s ease-out; }
@keyframes jxdPop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
.jxd-bub.close { background: #ffe6a3; } .jxd-bub.mid { background: #ffcf9e; } .jxd-bub.bad { background: #ff9a8c; } .jxd-bub.ok { background: #d8f5c4; }
.jxd-scene.in .jxd-buyer { animation: jxdIn .55s cubic-bezier(.2,.9,.3,1.2); }
@keyframes jxdIn { from { transform: translateX(80%); opacity: 0; } }
.jxd-scene.out .jxd-buyer { transition: transform .7s ease-in, opacity .7s; transform: translateX(-160%); opacity: 0; }
.jxd-scene.out.happy .jxd-buyer { transform: translateX(120%); }
.jxd-scene.cop { box-shadow: inset 0 0 40px #e8c15a66; } .jxd-scene.civ { box-shadow: inset 0 0 40px #c0392b66; }
.jxd-scene.bust .jxd-buyer { transform: translateX(-50%) scale(1.25); opacity: 1; }
.jxd-sirens .jxd-scene { animation: jxdSiren .35s infinite; }
@keyframes jxdSiren { 0% { box-shadow: inset 0 0 60px #2d7ff9; } 50% { box-shadow: inset 0 0 60px #e0342b; } }
.jxd-tells { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 30px; }
.jxd-tells .tl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #e9dcc0; background: #17120d; border: 1px solid #3a2e1a; border-radius: 999px; padding: 4px 10px 4px 6px;
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s cubic-bezier(.2,.9,.3,1.4); }
.jxd-tells .tl.on { opacity: 1; transform: none; }
.jxd-tells .tl i { font-style: normal; font-size: 15px; }
.jxd-tells .tl.sus { border-color: #e0342b; background: #2a0d0b; color: #ffc9c2; }
.jxd-deal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jxd-off, .jxd-val { border-radius: 12px; border: 1px solid #3a2e1a; background: #120e0a; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; }
.jxd-off small, .jxd-val small { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); }
.jxd-off b, .jxd-val b { font-family: Oswald, sans-serif; font-size: 24px; color: #f3ead2; font-variant-numeric: tabular-nums; }
.jxd-off em { font-style: normal; font-size: 11px; color: #8a7a5a; }
.jxd-val { border-color: var(--gold-dim); } .jxd-val b { color: var(--gold); }
.jxd-val.warm b { color: #ffb36b; } .jxd-val.hot b { color: #ff6b5b; }
.jxd-rng { -webkit-appearance: none; appearance: none; height: 34px; background: transparent; touch-action: none; }
.jxd-rng::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p, 30%), #2a2016 var(--p, 30%)); border: 1px solid #3a2e1a; }
.jxd-rng::-moz-range-track { height: 10px; border-radius: 6px; background: #2a2016; }
.jxd-rng::-moz-range-progress { height: 10px; border-radius: 6px; background: var(--gold); }
.jxd-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f5d98a, #a3812f); border: 2px solid #1a1206; box-shadow: 0 3px 10px #000c, 0 0 12px #e8c15a66; }
.jxd-rng::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #e8c15a; border: 2px solid #1a1206; }
.jxd-btns { display: grid; grid-template-columns: 1fr 1.1fr 1.2fr; gap: 8px; }
.jxd-btns button { min-height: 52px; border-radius: 12px; font-family: Oswald, sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; cursor: pointer; touch-action: manipulation; }
.jxd-btns .d { color: #ffc9c2; background: #2a0d0b; border: 1px solid #7a1f18; }
.jxd-btns .a { color: #f3ead2; background: #1c1610; border: 1px solid var(--gold-dim); }
.jxd-btns .o { color: #1a1206; background: linear-gradient(180deg, #f5d98a, var(--gold) 55%, #c49a3a); border: 0; box-shadow: 0 4px 0 #6b5018; }
.jxd-btns button:active { transform: translateY(2px); }