/* FORRE.NU Aim Training — Fortnite-inspirerad spelyta.
   Allt scopat under .aim-app så det inte krockar med pulse-temat.
   Medvetet undantag från FORRE_DARK 0px/tw-standard (användarens val: Fortnite-look). */

.aim-app{
  --disp:'Luckiest Guy','Segoe UI',system-ui,sans-serif;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lob1:#8b4fd6; --lob2:#3a1a72; --lob3:#210f49; --haze:#c56fd8;
  --cyan:#2ec8ef; --cyan-hi:#8fe3ff; --cyan-lo:#128fc4;
  --lime:#9bdb28; --lime-hi:#c4ef43; --lime-lo:#6fa80f; --shield:#35c3f3;
  --yellow:#f4ec2f; --yellow-lo:#dccb00;
  --pblue:#2f8fff; --pblue-lo:#1a63cf;
  --pill:#c3d2f2; --pill-lo:#93abdc; --pink:#ff9ee0;
  --vr1:#8fe0fb; --vr2:#1f9fda; --gold:#ffce3a; --gold-lo:#d99a00;
  --grn1:#248545; --grn2:#0e5227;
  --ink:#152238; --navy:#22406e; --white:#fff;
  --sh:0 14px 34px rgba(8,0,26,.5);

  /* BREDD 2026-07-26: var 1180px → kanonisk var(--shell-w). Ingen egen siffra. */
  max-width:var(--shell-w); margin:16px auto; padding:20px 20px 26px;
  font-family:var(--sans); color:var(--white); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* Egen mörk arcade-panel → identisk & läsbar i BÅDE ljust och mörkt tema. */
  background:linear-gradient(180deg,#1c0f3f,#160a34);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  box-shadow:var(--sh);
}
.aim-app *{ box-sizing:border-box; }
.aim-app .disp{ font-family:var(--disp); font-weight:400; text-transform:uppercase; }

/* top bar */
.aim-app .aim-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.aim-app .aim-brand{ display:flex; align-items:center; gap:12px; }
.aim-app .aim-mark{ width:42px;height:42px; border-radius:10px; display:grid;place-items:center;
  background:linear-gradient(160deg,#3a2d63,#191033); border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 16px rgba(47,200,239,.35); }
.aim-app .aim-mark svg{ width:24px;height:24px; }
.aim-app .aim-bn{ font-family:var(--disp); font-size:20px; letter-spacing:.02em; line-height:.9; }
.aim-app .aim-bn small{ display:block; font-family:var(--sans); font-size:10px; font-weight:800; letter-spacing:.28em; color:#e6c6ff; margin-top:4px; }
.aim-app .aim-tabs{ display:flex; gap:4px; background:rgba(16,8,44,.55); padding:5px; border-radius:12px; border:1px solid rgba(255,255,255,.1); }
.aim-app .aim-tab{ font-family:var(--disp); font-size:14px; letter-spacing:.03em; text-transform:uppercase;
  color:#cbb2ee; background:transparent; border:0; padding:9px 17px; border-radius:8px; cursor:pointer; transition:.13s; }
.aim-app .aim-tab:hover{ color:#fff; }
.aim-app .aim-tab.on{ color:var(--ink); background:linear-gradient(180deg,#fff,#e3ecff); box-shadow:0 3px 0 #b9c4e0; }
.aim-app .aim-tab:focus-visible,.aim-app .fbtn:focus-visible,.aim-app .startbtn:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }

/* stage */
.aim-app .stage{ position:relative; height:min(74vh,640px); min-height:540px; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--sh); background:#160a34; }
.aim-app .screen{ position:absolute; inset:0; opacity:0; visibility:hidden; overflow:auto; transition:opacity .16s ease; }
.aim-app .screen.on{ opacity:1; visibility:visible; }

/* fortnite buttons */
.aim-app .fbtn{ font-family:var(--disp); font-size:18px; letter-spacing:.02em; text-transform:uppercase; cursor:pointer;
  border:0; border-radius:12px; padding:14px 26px; color:var(--ink); position:relative; transition:.1s;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.aim-app .fbtn:active{ transform:translateY(3px); }
.aim-app .fbtn.play{ background:linear-gradient(180deg,#fff7a0,var(--yellow) 50%,var(--yellow-lo)); box-shadow:0 6px 0 var(--yellow-lo); }
.aim-app .fbtn.play:active{ box-shadow:0 3px 0 var(--yellow-lo); }
.aim-app .fbtn.equip{ background:linear-gradient(180deg,#ffe6a6,var(--pink) 55%,#c56ad8); color:var(--ink); box-shadow:0 6px 0 #9a49b8; }
.aim-app .fbtn.equip:active{ box-shadow:0 3px 0 #9a49b8; }
.aim-app .fbtn.lobby{ background:linear-gradient(180deg,#efe4ff,#cbb4ef); color:#3a2166; box-shadow:0 6px 0 #9c7ecd; }
.aim-app .fbtn.lobby:active{ box-shadow:0 3px 0 #9c7ecd; }
.aim-app .fbtn.soft{ font-size:15px; padding:13px 18px; color:var(--navy); background:linear-gradient(180deg,var(--pill),var(--pill-lo)); box-shadow:0 5px 0 #6f88bd; }
.aim-app .fbtn.soft:active{ box-shadow:0 3px 0 #6f88bd; }

/* LOBBY */
.aim-app #aim-lobby .lobby{ position:absolute; inset:0; padding:24px 28px; display:flex; flex-direction:column; gap:18px;
  background:radial-gradient(120% 80% at 100% -10%, rgba(197,111,216,.55), transparent 52%),linear-gradient(170deg,#6a2fb8,#3a1a72 66%,#24114f); }
.aim-app #aim-lobby .lobby::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 2px,transparent 2px 96px); opacity:.6; }
.aim-app .party-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.aim-app .party-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:9px; background:linear-gradient(90deg,var(--pblue),var(--pblue-lo)); box-shadow:0 4px 12px rgba(0,0,0,.35); }
.aim-app .party-chip svg{ width:16px;height:16px; }
.aim-app .party-chip b{ font-family:var(--disp); font-size:13px; letter-spacing:.02em; }
.aim-app .party-chip small{ font-size:10px; opacity:.85; margin-left:2px; }
.aim-app .promo{ margin-left:auto; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 16px; border-radius:12px; background:linear-gradient(100deg,#8a2fd8,#5a1fb0); border:1px solid rgba(255,255,255,.16); box-shadow:0 6px 16px rgba(0,0,0,.3); }
.aim-app .promo .pt{ font-family:var(--disp); font-size:15px; letter-spacing:.02em; }
.aim-app .promo .ps{ font-size:11px; color:#f0ddff; }
.aim-app .party{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; flex:1; align-content:center; }
.aim-app .pcard{ position:relative; display:flex; flex-direction:column; align-items:stretch; }
.aim-app .ready{ font-family:var(--disp); font-size:clamp(20px,3vw,30px); color:#fff; text-align:center; transform:skewX(-6deg); text-shadow:0 4px 0 rgba(0,0,0,.32); margin-bottom:8px; letter-spacing:.02em; }
.aim-app .pcard.is-you .ready{ color:#ffe98f; }
.aim-app .portrait{ position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; border:2px solid rgba(255,255,255,.16); box-shadow:0 12px 26px rgba(0,0,0,.42); }
.aim-app .pcard.is-you .portrait{ border-color:rgba(255,220,120,.7); box-shadow:0 0 0 2px rgba(255,220,120,.35),0 12px 26px rgba(0,0,0,.5); }
.aim-app .portrait .mono{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--disp); font-size:54px; color:rgba(255,255,255,.7); text-shadow:0 2px 10px rgba(0,0,0,.5); }
.aim-app .portrait::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg,transparent 45%,rgba(10,6,30,.85)); }
.aim-app .p-ken{ background:radial-gradient(75% 55% at 50% 26%,#e6f6ff 0 16%,#a9d0ea 34%,#5f83b4 62%,#2a3a68 100%); }
.aim-app .p-king{ background:radial-gradient(75% 55% at 50% 26%,#fff2cf 0 16%,#f0d98a 40%,#b98a3a 70%,#5a3f1c 100%); }
.aim-app .p-dal{ background:radial-gradient(75% 55% at 50% 26%,#f6f7fb 0 16%,#dfe2ea 40%,#9aa0b3 70%,#4a4f63 100%); }
.aim-app .p-sky{ background:radial-gradient(75% 55% at 50% 26%,#ffe8d6 0 16%,#d9a884 40%,#8a5a3c 70%,#3a241c 100%); }
.aim-app .crown{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:26px;height:26px; z-index:3; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.aim-app .check{ position:absolute; right:8px; bottom:8px; width:28px;height:28px; z-index:3; background:linear-gradient(180deg,#8dff72,#22c93a); border-radius:8px; display:grid;place-items:center; box-shadow:0 3px 0 #158a26; }
.aim-app .check svg{ width:18px;height:18px; }
.aim-app .nameplate{ position:absolute; left:6px; right:6px; bottom:6px; z-index:3; display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:8px; background:linear-gradient(90deg,rgba(47,143,255,.95),rgba(26,99,207,.95)); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.aim-app .pcard.is-you .nameplate{ background:linear-gradient(90deg,rgba(120,90,220,.95),rgba(80,50,180,.95)); }
.aim-app .nameplate .pn{ font-family:var(--disp); font-size:12px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aim-app .plat{ margin-left:auto; width:16px;height:16px; opacity:.9; flex:none; }
.aim-app .mute{ width:15px;height:15px; opacity:.85; flex:none; }
.aim-app .lobby-cta{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.aim-app .lobby-cta .fbtn.play{ font-size:24px; padding:16px 40px; }
.aim-app .lobby-cta .pills{ margin-left:auto; display:flex; gap:10px; }

/* MATCH */
.aim-app .match{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(75% 60% at 50% 40%, #3a2a72 0%, #241452 46%, #140a33 100%); }
.aim-app .match .bg{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 46px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 46px); }
.aim-app #aim-arena{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
.aim-app .m-elims{ position:absolute; top:16px; right:18px; z-index:3; pointer-events:none; text-align:right; }
.aim-app .m-elims .k{ font-family:var(--disp); font-size:12px; letter-spacing:.08em; color:#dfe8ff; opacity:.85; }
.aim-app .m-elims .n{ font-family:var(--disp); font-size:46px; line-height:.85; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.35); }
.aim-app .m-elims .stk{ font-family:var(--disp); font-size:16px; color:var(--gold); margin-top:2px; }
.aim-app .fps{ position:absolute; top:18px; left:18px; z-index:3; pointer-events:none; font-family:ui-monospace,Consolas,monospace; font-size:11px; color:rgba(255,255,255,.5); }
.aim-app .fps b{ color:#7dffb0; }
.aim-app .m-vitals{ position:absolute; left:18px; bottom:60px; z-index:3; pointer-events:none; width:min(360px,46vw); }
.aim-app .vrow{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.aim-app .vrow .vk{ width:34px; font-family:var(--disp); font-size:10px; letter-spacing:.04em; color:#cfe0ff; text-align:right; }
.aim-app .barwrap{ flex:1; height:17px; border-radius:5px; background:rgba(0,0,0,.5); overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
.aim-app .barwrap i{ display:block; height:100%; border-radius:4px; box-shadow:inset 0 3px 0 rgba(255,255,255,.4); transition:width .12s linear; }
.aim-app .bar-hp i{ background:linear-gradient(180deg,var(--cyan-hi),var(--cyan) 55%,var(--cyan-lo)); }
.aim-app .bar-sh i{ background:linear-gradient(180deg,var(--lime-hi),var(--lime) 55%,var(--lime-lo)); }
.aim-app .vval{ width:40px; font-family:var(--disp); font-size:16px; color:#fff; font-variant-numeric:tabular-nums; }
.aim-app .shieldbadge{ display:inline-flex; align-items:center; gap:5px; }
.aim-app .shieldbadge svg{ width:20px;height:20px; }
.aim-app .shieldbadge b{ font-family:var(--disp); font-size:15px; color:var(--shield); }
.aim-app .m-lvl{ position:absolute; left:18px; bottom:16px; z-index:3; pointer-events:none; display:flex; align-items:center; gap:9px; }
.aim-app .m-lvl .rr{ position:relative; width:44px;height:44px; border-radius:10px; border:2px solid #fff; background:radial-gradient(70% 55% at 50% 30%,#dff3ff,#7fbfe0 55%,#2c4a86); box-shadow:0 5px 12px rgba(0,0,0,.4); }
.aim-app .m-lvl .rr .c{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:20px;height:20px; }
.aim-app .m-lvl .lt{ font-family:var(--disp); font-size:13px; color:#dfe8ff; }
.aim-app .m-lvl .ln{ font-family:var(--disp); font-size:12px; color:var(--gold); }
.aim-app .hotbar{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3; display:flex; gap:8px; pointer-events:none; }
.aim-app .slot{ position:relative; width:92px; height:60px; border-radius:9px; padding:7px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg,rgba(40,30,74,.92),rgba(20,12,44,.92)); border:2px solid rgba(255,255,255,.12); }
.aim-app .slot.on{ border-color:var(--cyan); box-shadow:0 0 0 2px rgba(47,200,239,.35),0 8px 18px rgba(0,0,0,.4); }
.aim-app .slot.on .sn{ color:var(--cyan-hi); }
.aim-app .slot.lock{ opacity:.68; }
.aim-app .slot .sk{ align-self:flex-start; font-family:var(--disp); font-size:11px; color:#a99fce; background:rgba(0,0,0,.4); padding:1px 6px; border-radius:5px; }
.aim-app .slot .sn{ font-family:var(--disp); font-size:13px; color:#e6ecff; }
.aim-app .slot .soon{ position:absolute; top:5px; right:5px; font-family:var(--sans); font-size:9px; font-weight:900; letter-spacing:.06em; color:var(--ink); background:var(--yellow); padding:2px 5px; border-radius:5px; }
.aim-app .hotbar .slot{ pointer-events:auto; cursor:pointer; transition:border-color .12s, transform .1s; }
.aim-app .hotbar .slot:hover{ border-color:rgba(255,255,255,.32); transform:translateY(-2px); }
/* Tracking-läget har ingen streak/klick-accuracy → dölj de irrelevanta HUD-raderna */
.aim-app .match.mode-tracking .m-elims .stk{ display:none; }
.aim-app .match.mode-tracking .m-vitals .vrow:last-child{ display:none; }
.aim-app .overlay{ position:absolute; inset:0; z-index:6; display:grid; place-items:center; background:rgba(14,7,38,.6); backdrop-filter:blur(2px); }
.aim-app .overlay.hide{ display:none; }
.aim-app .ov-card{ text-align:center; padding:28px 40px; border-radius:16px; max-width:420px; background:linear-gradient(180deg,rgba(58,32,112,.96),rgba(34,18,74,.96)); border:1px solid rgba(255,255,255,.2); box-shadow:var(--sh); }
.aim-app .ov-card .oe{ font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#c9b6ee; }
.aim-app .ov-card .oh{ font-family:var(--disp); font-size:34px; margin:8px 0 10px; letter-spacing:.02em; }
.aim-app .ov-card .op{ color:#e6dbff; font-size:13px; margin:0 0 20px; }
.aim-app .startbtn{ font-family:var(--disp); font-size:20px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer; border:0; border-radius:12px; padding:15px 40px; color:var(--ink); background:linear-gradient(180deg,#fff7a0,var(--yellow) 50%,var(--yellow-lo)); box-shadow:0 6px 0 var(--yellow-lo); }
.aim-app .startbtn:active{ transform:translateY(3px); box-shadow:0 3px 0 var(--yellow-lo); }
.aim-app .ov-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.aim-app .count{ font-family:var(--disp); font-size:80px; line-height:1; color:#fff; text-shadow:0 4px 30px rgba(47,200,239,.4); }
.aim-app .guest-note{ margin-top:14px; font-size:12px; color:#e6dbff; }
.aim-app .guest-note a{ color:var(--cyan-hi); font-weight:700; }

/* RESULT */
.aim-app .result{ position:absolute; inset:0; overflow:auto; padding:24px 26px; background:radial-gradient(90% 60% at 50% -8%, rgba(197,111,216,.4), transparent 52%),linear-gradient(175deg,#4a2091,#2a1360 66%,#180a3d); display:flex; flex-direction:column; gap:16px; align-items:center; }
.aim-app .vrbanner{ position:relative; display:flex; align-items:center; gap:16px; margin-top:2px; padding:12px 40px 12px 26px; transform:skewX(-10deg); background:linear-gradient(180deg,var(--vr1),var(--vr2)); border-radius:7px; border:2px solid rgba(255,255,255,.55); box-shadow:0 12px 26px rgba(0,0,0,.45),inset 0 3px 0 rgba(255,255,255,.5); }
.aim-app .vrbanner>*{ transform:skewX(10deg); }
.aim-app .vr-num{ font-family:var(--disp); font-size:54px; color:var(--gold); -webkit-text-stroke:2px #7a4d00; text-shadow:0 4px 0 rgba(0,0,0,.22); }
.aim-app .vr-words b{ display:block; font-family:var(--disp); font-size:34px; color:#fff; line-height:.86; text-shadow:0 3px 0 rgba(0,0,0,.3); letter-spacing:.02em; }
.aim-app .vr-sub{ margin-top:2px; font-family:var(--disp); font-size:14px; color:#f0ffff; }
.aim-app .result-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:16px; width:100%; max-width:860px; }
.aim-app .report{ position:relative; padding:20px 22px; background:linear-gradient(160deg,#2f80d8,#1a53ad); clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); box-shadow:var(--sh); }
.aim-app .report h3{ margin:0 0 14px; font-family:var(--disp); font-size:20px; letter-spacing:.03em; color:#e6f3ff; }
.aim-app .rrow{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.16); }
.aim-app .rrow:last-child{ border-bottom:0; }
.aim-app .rrow .k{ font-size:12px; font-weight:700; letter-spacing:.03em; color:#d3e6ff; text-transform:uppercase; }
.aim-app .rrow .v{ font-family:var(--disp); font-size:22px; color:#fff; font-variant-numeric:tabular-nums; }
.aim-app .rrow.big .v{ font-size:30px; color:var(--yellow); }
.aim-app .lb{ background:linear-gradient(160deg,var(--grn1),var(--grn2)); border-radius:14px; padding:16px; box-shadow:var(--sh); }
.aim-app .lb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.aim-app .lb h3{ margin:0; font-family:var(--disp); font-size:15px; letter-spacing:.03em; color:#c8ffd8; }
.aim-app .lb-scope{ display:flex; gap:4px; }
.aim-app .lb-scope button{ font-family:var(--sans); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#c8ffd8; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15); padding:4px 8px; border-radius:6px; cursor:pointer; }
.aim-app .lb-scope button.on{ background:rgba(255,255,255,.2); color:#fff; }
.aim-app .lbrow{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.aim-app .lbrow .aim-av{ width:34px;height:34px; border-radius:8px; flex:none; border:1px solid rgba(255,255,255,.3); }
.aim-app .lbrow .info{ flex:1; min-width:0; }
.aim-app .lbrow .nm{ font-family:var(--disp); font-size:12px; color:#eafff0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; letter-spacing:.01em; }
.aim-app .lbrow .db{ height:7px; border-radius:5px; background:rgba(0,0,0,.35); overflow:hidden; margin-bottom:3px; }
.aim-app .lbrow .db i{ display:block; height:100%; }
.aim-app .lbrow .db.c i{ background:linear-gradient(90deg,var(--cyan-lo),var(--cyan-hi)); }
.aim-app .lbrow .db.g i{ background:linear-gradient(90deg,var(--lime-lo),var(--lime-hi)); }
.aim-app .lbrow .sc{ font-family:var(--disp); font-size:18px; color:#fff; font-variant-numeric:tabular-nums; flex:none; }
.aim-app .lbrow.you{ background:rgba(255,255,255,.13); margin:2px -6px 9px; padding:9px 6px; border-radius:9px; }
.aim-app .lbrow.you .aim-av{ width:42px;height:42px; }
.aim-app .lbrow.you .nm{ font-size:14px; color:#ffe98f; }
.aim-app .lbrow.you .sc{ font-size:26px; }
.aim-app .lb-empty{ font-size:12px; color:#c8ffd8; opacity:.8; padding:8px 2px; }
.aim-app .toast{ display:flex; align-items:center; gap:12px; padding:10px 20px 10px 12px; border-radius:12px; background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.25); }
.aim-app .toast .gem{ width:42px;height:42px; border-radius:9px; flex:none; background:conic-gradient(from 0deg,#ff6ad5,#ffd93a,#5ad1ff,#a06bff,#ff6ad5); box-shadow:0 0 18px rgba(255,150,255,.6); }
.aim-app .toast .tt{ font-family:var(--disp); font-size:13px; color:#bfe9ff; letter-spacing:.05em; }
.aim-app .toast .tv{ font-family:var(--disp); font-size:17px; color:#fff; }
.aim-app .result-cta{ display:flex; gap:12px; width:100%; max-width:860px; flex-wrap:wrap; }
.aim-app .result-cta .fbtn{ flex:1; min-width:150px; }
.aim-app .result-cta .fbtn.play{ flex:1.5; }
.aim-app .aim-hint{ text-align:center; margin:14px auto 0; max-width:680px; font-size:13px; color:#d8c9f2; }

@media (max-width:820px){
  .aim-app .party{ grid-template-columns:repeat(2,1fr); }
  .aim-app .result-grid{ grid-template-columns:1fr; }
  .aim-app #aim-lobby .lobby{ padding:18px 16px; }
  .aim-app .m-vitals{ width:60vw; }
}
@media (prefers-reduced-motion:reduce){ .aim-app *{ transition:none !important; } }


/* ===== v2: rekord, streak-chips & flick (2026-07-06) ===== */
.aim-app .pbchips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
.aim-app .pbchip{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(143,227,255,.12);border:1px solid rgba(143,227,255,.35);color:#dff6ff;font-size:12px;font-weight:700}
.aim-app .pbchip b{color:#8fe3ff}
.aim-app .pbchip.fire{background:rgba(255,160,60,.14);border-color:rgba(255,180,80,.45);color:#ffe2bd}
.aim-app .pbchip.fire b{color:#ffce3a}
.aim-app .ov-card.record{border-color:#ffce3a;box-shadow:0 0 0 2px rgba(255,206,58,.35),0 0 44px rgba(255,206,58,.30),0 18px 60px rgba(0,0,0,.5);animation:aimRecordPulse 1.6s ease-in-out infinite}
.aim-app .ov-card.record .oh{color:#ffce3a;text-shadow:0 2px 0 rgba(120,70,0,.55),0 0 22px rgba(255,206,58,.5)}
@keyframes aimRecordPulse{0%,100%{box-shadow:0 0 0 2px rgba(255,206,58,.35),0 0 44px rgba(255,206,58,.30),0 18px 60px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 2px rgba(255,206,58,.55),0 0 64px rgba(255,206,58,.45),0 18px 60px rgba(0,0,0,.5)}}
.aim-app .hotbar .slot[data-mode="flick"] .sn{color:#ffd9f2}
.aim-app .hotbar .slot[data-mode="flick"].on{box-shadow:0 0 14px rgba(255,120,220,.35)}


/* ===== v2.1: lobbyn visar riktiga spelare + lägesval + fullskärm (2026-07-06) ===== */
.aim-app .lobby-modes{ position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; }
.aim-app .lmode{ font-family:var(--disp); font-size:13px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer;
  border:2px solid rgba(255,255,255,.22); border-radius:10px; padding:8px 14px; color:#e6dcff; background:rgba(255,255,255,.07); transition:.1s; }
.aim-app .lmode:hover{ background:rgba(255,255,255,.14); }
.aim-app .lmode.on{ color:var(--ink); background:linear-gradient(180deg,#fff,#d9e6ff); border-color:#fff; box-shadow:0 3px 0 #b9c4e0; }
.aim-app .pcard .pscore{ position:absolute; top:8px; right:8px; z-index:2; font-family:var(--disp); font-size:15px; color:#fff;
  background:rgba(10,4,30,.75); border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:3px 9px; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.aim-app .pcard.empty .portrait{ opacity:.45; filter:grayscale(.4); }
.aim-app .pcard.empty .ready{ opacity:.55; }
.aim-app .fsbtn{ position:absolute; top:12px; left:64px; z-index:6; width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(10,4,30,.6); color:#cfe9ff; font-size:16px; line-height:1; display:grid; place-items:center; }
.aim-app .fsbtn:hover{ background:rgba(255,255,255,.15); }
.aim-app .match:fullscreen{ border-radius:0; }
.aim-app .match:fullscreen canvas{ height:100%; }


/* ===== v2.2: tydlighet + lama-tab (2026-07-06) ===== */
.aim-app .lmode{ border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.13); font-size:14px; padding:10px 18px; box-shadow:0 3px 0 rgba(0,0,0,.35); }
.aim-app .lmode:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.aim-app .hotbar .slot{ border-color:rgba(255,255,255,.4); }
.aim-app .hotbar .slot .sn{ color:#fff; }
.aim-app .ov-row{ flex-wrap:wrap; justify-content:center; }
.aim-app .aim-tab.lama{ color:#ffd9a0; }
.aim-app .aim-tab.lama.on{ color:var(--ink); }


/* ===== v3: ARCADE — full bredd (bryter ut ur sidans container) ===== */
.aim-app{
  /* BREDD 2026-07-26: detta SENARE block styr faktiskt bredden (rad 20 ovan blir
     no-op av max-width:none här). Låg på 1180px → 20px smalare än toppdäcket.
     Nu kanon via var(--shell-w). Felsökningsläxa: kolla ALLTID efter ett senare
     block med samma selektor innan du tror att den övre regeln gäller. */
  width:min(var(--shell-w), calc(100vw - 28px));
  max-width:none;
  position:relative; left:50%; transform:translateX(-50%);
  margin-left:0; margin-right:0;
}
.aim-app .stage{ height:min(78vh,720px); min-height:560px; }


/* ===== v4: SPELHALLEN — 3 spelkort med topplistor (2026-07-06) ===== */
.aim-app .arc-grid{ position:relative; z-index:1; flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch; min-height:0; }
.aim-app .arc-card{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:16px;
  background:rgba(10,4,32,.42); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 28px rgba(0,0,0,.3);
  transition:transform .12s, border-color .12s; }
.aim-app .arc-card:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.32); }
.aim-app .arc-card.aim{ background:linear-gradient(165deg, rgba(47,143,255,.16), rgba(10,4,32,.5) 55%); }
.aim-app .arc-card.snake{ background:linear-gradient(165deg, rgba(196,239,67,.13), rgba(10,4,32,.5) 55%); }
.aim-app .arc-card.lama{ background:linear-gradient(165deg, rgba(255,206,58,.13), rgba(10,4,32,.5) 55%); }
.aim-app .arc-head{ display:flex; align-items:center; gap:11px; }
.aim-app .arc-ic{ font-size:32px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.aim-app .arc-head h3{ margin:0; font-family:var(--disp); font-size:20px; letter-spacing:.02em; text-transform:uppercase; line-height:1; text-shadow:0 3px 0 rgba(0,0,0,.35); }
.aim-app .arc-head small{ display:block; font-size:10.5px; color:#cfc3ef; margin-top:3px; }
.aim-app .arc-desc{ margin:0; font-size:11.5px; color:#d7ccf5; line-height:1.5; }
.aim-app .arc-lb{ display:flex; flex-direction:column; gap:5px; margin-top:auto; min-height:76px; justify-content:flex-end; }
.aim-app .arc-lbrow{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#e9e2ff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:5px 10px; }
.aim-app .arc-lbrow b{ margin-left:auto; font-family:var(--disp); font-size:13px; color:#8fe3ff; }
.aim-app .arc-lbrow.you{ border-color:rgba(255,206,58,.55); color:#ffe9b0; }
.aim-app .arc-lbrow.you b{ color:#ffce3a; }
.aim-app .arc-dim{ font-size:11px; color:#9d90c8; }
.aim-app .arc-play{ width:100%; font-size:19px; padding:13px 0; }
.aim-app .arc-card .lobby-modes{ gap:6px; }
.aim-app .arc-card .lmode{ font-size:11px; padding:7px 11px; }
@media (max-width:900px){ .aim-app .arc-grid{ grid-template-columns:1fr; } .aim-app #aim-lobby .lobby{ overflow-y:auto; } .aim-app .arc-lb{ min-height:0; } }

/* Spelarnamn i topplistan är en länk sedan 2026-07-26 (arv från raden så
   layouten är oförändrad — bara understruken vid hover, plus kontaktkort). */
.arc-plink { color: inherit; text-decoration: none; font: inherit; }
.arc-plink:hover { text-decoration: underline; color: var(--accent); }

/* ── Utmana en vän (2026-07-26) ──────────────────────────────────────────
   Panelen bor i resultatkortet, inte i en egen modal: man ska se sitt eget
   resultat medan man väljer vem som ska slå det. */
.fbtn.chal { background: var(--accent); border-color: var(--accent); color: #fff; }
.fbtn.chal:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.aim-chal {
  margin-top: 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.aim-chal[hidden] { display: none; }
.aim-chal-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.aim-chal-x {
  border: 0; background: none; color: var(--dim); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 4px;
}
.aim-chal-x:hover { color: var(--ink); }
.aim-chal-list { max-height: 260px; overflow-y: auto; }
.aim-chal-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--card); color: var(--ink2); cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left;
  /* 44px så den går att träffa med tummen — panelen används oftast direkt
     efter en runda, och rundor spelas lika ofta på mobil. */
  min-height: 44px;
}
.aim-chal-row:last-child { border-bottom: 0; }
.aim-chal-row:hover:not(:disabled) { background: var(--inset); }
.aim-chal-row:disabled { cursor: default; opacity: .75; }
.aim-chal-row.is-sent { color: var(--live); opacity: 1; }
.aim-chal-av {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--inset); color: var(--ink2); font-weight: 700; font-size: 12px;
}
.aim-chal-av.on { box-shadow: 0 0 0 2px var(--live); }
.aim-chal-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aim-chal-on { font-size: 11px; font-weight: 700; color: var(--live); flex: 0 0 auto; }
.aim-chal-note { padding: 14px 12px; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.aim-chal-note a { color: var(--accent-ink); }
.aim-chal-note.bad { color: var(--danger); }

/* Coins från körningen (2026-07-26). Arkaden gav tidigare ingenting tillbaka
   till ekonomin; nu betalas dagens första rankade runda + nytt rekord ut. */
.aim-app .aim-coins{
  margin-top:10px; font-size:12.5px; font-weight:700; color:#f0c94a;
  display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap;
}
.aim-app .aim-coins a{ color:#e6dbff; text-decoration:underline; font-weight:600 }
.aim-app .aim-coins a:hover{ color:#fff }