/* FORRE.NU — Lama-klickaren v2 (Cookie Clicker-mekanik, Fortnite-tema).
   Scopad under .lama-game. Egen mörk arcade-yta → identisk i ljust/mörkt tema. */

.lama-game{
  --lg-gold:#ffce3a; --lg-gold-lo:#d99a00;
  --lg-cyan:#8fe3ff; --lg-pink:#ff9ee0; --lg-lime:#c4ef43;
  --lg-panel:rgba(255,255,255,.07); --lg-line:rgba(255,255,255,.16);
  --lg-tier:#b5b5c3;
  position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0; overflow:hidden; color:#fff;
  background:radial-gradient(80% 55% at 28% 20%, rgba(47,200,239,.22), transparent 55%),
             radial-gradient(70% 50% at 78% 85%, rgba(197,111,216,.25), transparent 60%),
             linear-gradient(170deg,#2b1358,#1a0b40 60%,#120732);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.lama-game .disp{ font-family:'Luckiest Guy','Segoe UI',sans-serif; font-weight:400; text-transform:uppercase; }

/* Rarity-tiers — färgar gem, aura, badge */
.lama-game[data-tier="common"]{    --lg-tier:#b5b5c3; }
.lama-game[data-tier="uncommon"]{  --lg-tier:#4fd45b; }
.lama-game[data-tier="rare"]{      --lg-tier:#2ec8ef; }
.lama-game[data-tier="epic"]{      --lg-tier:#c56fd8; }
.lama-game[data-tier="legendary"]{ --lg-tier:#ff9538; }
.lama-game[data-tier="mythic"]{    --lg-tier:#ffce3a; }

/* ── Vänster: klickytan ── */
.lama-left{ position:relative; display:flex; flex-direction:column; align-items:center; padding:16px 12px 10px; overflow:hidden; }

/* Himmel med drivande moln */
.lama-sky{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.lama-sky .cl{ position:absolute; height:14px; border-radius:999px; background:rgba(255,255,255,.09);
  box-shadow:22px -8px 0 4px rgba(255,255,255,.07), -20px -5px 0 2px rgba(255,255,255,.06); }
.lama-sky .c1{ width:70px; top:12%; animation:lamaCloud 46s linear infinite; }
.lama-sky .c2{ width:48px; top:30%; animation:lamaCloud 64s linear infinite; animation-delay:-24s; }
.lama-sky .c3{ width:88px; top:56%; animation:lamaCloud 80s linear infinite; animation-delay:-50s; }
@keyframes lamaCloud{ from{ left:-120px; } to{ left:110%; } }

.lama-stats{ position:relative; z-index:2; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; justify-content:center; }
.lama-bars{ font-family:'Luckiest Guy',sans-serif; font-size:clamp(26px,4vw,40px); color:var(--lg-gold);
  text-shadow:0 3px 0 rgba(120,70,0,.5), 0 0 24px rgba(255,206,58,.25); line-height:1; }
.lama-bars small{ font-size:15px; color:#ffe9b0; margin-left:4px; }
.lama-sub{ position:relative; z-index:2; font-size:12px; color:#cfc3ef; text-align:center; }
.lama-sub b{ color:#fff; }
.lama-crowns{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  background:rgba(255,206,58,.13); border:1px solid rgba(255,206,58,.4); color:#ffe9b0; font-size:12px; font-weight:700; }

/* Rarity-badge */
.lama-tierbadge{ position:relative; z-index:2; margin-top:5px; font-family:'Luckiest Guy',sans-serif; font-size:11px;
  letter-spacing:.14em; padding:3px 14px; border-radius:999px; color:var(--lg-tier);
  border:1px solid color-mix(in srgb, var(--lg-tier) 55%, transparent);
  background:color-mix(in srgb, var(--lg-tier) 12%, transparent);
  text-shadow:0 0 12px color-mix(in srgb, var(--lg-tier) 60%, transparent); }

/* Combo-mätare */
.lama-combo{ position:relative; z-index:2; width:min(240px,70%); height:20px; margin-top:7px; border-radius:999px;
  border:1px solid var(--lg-line); background:rgba(0,0,0,.35); overflow:hidden; }
.lama-combo i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#2ec8ef,#c4ef43,#ffce3a);
  transition:width .15s; border-radius:999px; }
.lama-combo b{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Luckiest Guy',sans-serif;
  font-size:11px; letter-spacing:.08em; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.7); }
.lama-combo.max i{ background:linear-gradient(90deg,#ffce3a,#ff9538,#ff5c8a); animation:lamaComboMax .5s ease infinite alternate; }
@keyframes lamaComboMax{ from{ filter:brightness(1);} to{ filter:brightness(1.45);} }

.lama-clickwrap{ position:relative; z-index:1; flex:1; width:100%; display:grid; place-items:center; min-height:230px; }

/* Storm-ring bakom laman (pulserar i tier-färg) */
.lama-ring{ position:absolute; left:50%; top:52%; width:min(320px,72%); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  border:2px solid color-mix(in srgb, var(--lg-tier) 35%, transparent);
  box-shadow:0 0 60px color-mix(in srgb, var(--lg-tier) 18%, transparent) inset,
             0 0 40px color-mix(in srgb, var(--lg-tier) 12%, transparent);
  animation:lamaRingPulse 3.4s ease-in-out infinite; }
@keyframes lamaRingPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(.97); opacity:.7; } 50%{ transform:translate(-50%,-50%) scale(1.03); opacity:1; } }

.lama-btn{ position:relative; z-index:2; background:none; border:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
  transition:transform .06s;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.45)) drop-shadow(0 0 26px color-mix(in srgb, var(--lg-tier) 45%, transparent)); }
.lama-btn:active{ transform:scale(.94) rotate(-2deg); }
.lama-btn svg{ width:clamp(180px,27vw,265px); height:auto; display:block; }
.lama-btn.pop{ animation:lamaPop .14s ease; }
@keyframes lamaPop{ 40%{ transform:scale(1.06) rotate(1.5deg);} }

/* Laman lever: idle-gungning + blink + öron + svans */
.lama-btn svg.lm{ animation:lamaIdle 3.2s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes lamaIdle{ 0%,100%{ transform:rotate(0) translateY(0);} 30%{ transform:rotate(-1.2deg) translateY(-3px);} 65%{ transform:rotate(1.1deg) translateY(-1px);} }
.lama-btn:hover svg.lm{ animation-duration:1.4s; }
.lama-btn .lm-lid{ transform-box:fill-box; transform-origin:center top; transform:scaleY(.06); animation:lamaBlink 4.6s infinite; }
@keyframes lamaBlink{ 0%,93%,100%{ transform:scaleY(.06);} 95%,97%{ transform:scaleY(1);} }
.lama-btn .lm-ear{ transform-box:fill-box; transform-origin:center bottom; }
.lama-btn .lm-ear-l{ animation:lamaEarL 5.2s ease-in-out infinite; }
.lama-btn .lm-ear-r{ animation:lamaEarR 5.2s ease-in-out infinite; animation-delay:-2.4s; }
@keyframes lamaEarL{ 0%,88%,100%{ transform:rotate(0);} 92%{ transform:rotate(-14deg);} 96%{ transform:rotate(5deg);} }
@keyframes lamaEarR{ 0%,88%,100%{ transform:rotate(0);} 92%{ transform:rotate(14deg);} 96%{ transform:rotate(-5deg);} }
.lama-btn .lm-tail{ transform-box:fill-box; transform-origin:right center; animation:lamaTail 3.2s ease-in-out infinite; }
@keyframes lamaTail{ 0%,100%{ transform:rotate(0);} 50%{ transform:rotate(7deg);} }
.lama-btn .lm-gem{ animation:lamaGem 2.4s ease-in-out infinite; }
@keyframes lamaGem{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} }

.lama-float{ position:absolute; pointer-events:none; font-family:'Luckiest Guy',sans-serif; font-size:19px; color:var(--lg-gold);
  text-shadow:0 2px 0 rgba(0,0,0,.45); animation:lamaFloat .9s ease-out forwards; z-index:5; }
.lama-float.crit{ font-size:26px; color:var(--lg-lime); }
@keyframes lamaFloat{ to{ transform:translateY(-64px) scale(1.12); opacity:0; } }
.lama-confetti{ position:absolute; width:8px; height:8px; pointer-events:none; animation:lamaConf .8s ease-out forwards; z-index:4; }
@keyframes lamaConf{ to{ transform:translate(var(--dx),var(--dy)) rotate(340deg); opacity:0; } }
.lama-hitring{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  border:3px solid var(--lg-gold); pointer-events:none; z-index:4; animation:lamaHitRing .45s ease-out forwards; }
.lama-hitring.crit{ border-color:var(--lg-lime); border-width:4px; }
@keyframes lamaHitRing{ to{ transform:scale(3.4); opacity:0; } }
.lama-game.lama-shake{ animation:lamaShake .18s ease; }
@keyframes lamaShake{ 25%{ transform:translate(3px,-2px);} 50%{ transform:translate(-3px,2px);} 75%{ transform:translate(2px,1px);} }
.lama-game.lama-goldflash::after{ content:''; position:absolute; inset:0; z-index:8; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 45%, rgba(255,206,58,.28), transparent 70%); animation:lamaGoldFlash .7s ease forwards; }
@keyframes lamaGoldFlash{ from{ opacity:1;} to{ opacity:0;} }

/* Guldlaman (golden cookie-event) */
.lama-gl{ position:absolute; z-index:6; background:none; border:0; cursor:pointer; padding:6px; font-size:44px; line-height:1;
  -webkit-tap-highlight-color:transparent; }
.lama-gl span{ display:block; filter:sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15)
  drop-shadow(0 0 14px rgba(255,206,58,.9)) drop-shadow(0 4px 10px rgba(0,0,0,.4));
  animation:lamaGlBob .7s ease-in-out infinite alternate; }
@keyframes lamaGlBob{ from{ transform:translateY(0) rotate(-4deg);} to{ transform:translateY(-8px) rotate(4deg);} }
.lama-gl.ltr{ left:-70px; animation:lamaGlFlyL 9s linear forwards; }
.lama-gl.rtl{ right:-70px; animation:lamaGlFlyR 9s linear forwards; }
.lama-gl.rtl span{ transform:scaleX(-1); }
@keyframes lamaGlFlyL{ to{ left:105%; } }
@keyframes lamaGlFlyR{ to{ right:105%; } }

/* Battle bus-flyby */
.lama-busfly{ position:absolute; z-index:6; left:-90px; background:none; border:0; cursor:pointer; padding:6px;
  font-size:30px; line-height:1; animation:lamaBusFly 12s linear forwards; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
@keyframes lamaBusFly{ to{ left:106%; } }

/* Buff-bar */
.lama-buffs{ position:relative; z-index:2; display:flex; gap:7px; flex-wrap:wrap; justify-content:center; min-height:26px; margin-bottom:2px; }
.lama-buff{ display:inline-flex; align-items:center; gap:5px; font-size:13px; padding:3px 10px; border-radius:999px;
  background:rgba(255,206,58,.12); border:1px solid rgba(255,206,58,.45); color:#ffe9b0;
  animation:lamaBuffIn .25s ease; }
.lama-buff b{ font-size:11px; font-family:'Luckiest Guy',sans-serif; letter-spacing:.04em; }
@keyframes lamaBuffIn{ from{ transform:scale(.6); opacity:0;} }

.lama-prestige{ position:relative; z-index:2; margin:4px 0 8px; font-family:'Luckiest Guy',sans-serif; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; border:0; border-radius:11px; padding:11px 20px; cursor:pointer; color:#3a2500;
  background:linear-gradient(180deg,#fff0b0,var(--lg-gold) 55%,var(--lg-gold-lo)); box-shadow:0 5px 0 var(--lg-gold-lo); }
.lama-prestige:active{ box-shadow:0 2px 0 var(--lg-gold-lo); }
.lama-prestige[disabled]{ filter:grayscale(.75); opacity:.55; cursor:default; }
.lama-storm{ position:relative; z-index:2; font-size:10px; color:#b9a8e6; text-align:center; margin-bottom:8px; max-width:300px; }

/* ── Höger: butiken ── */
.lama-right{ border-left:1px solid var(--lg-line); background:rgba(10,4,30,.35); display:flex; flex-direction:column; min-height:0; }
.lama-shophead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px 8px; }
.lama-shophead h3{ margin:0 auto 0 0; font-family:'Luckiest Guy',sans-serif; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--lg-cyan); text-shadow:0 2px 0 rgba(0,0,0,.4); }
.lama-tabs2{ display:flex; gap:5px; flex-wrap:wrap; }
.lama-tab2{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; cursor:pointer;
  border:1px solid var(--lg-line); border-radius:8px; padding:5px 9px; color:#d9cdf7; background:transparent; }
.lama-tab2.on{ background:#fff; color:#241048; border-color:#fff; }
.lama-qty{ font-family:'Luckiest Guy',sans-serif; font-size:12px; cursor:pointer; border:1px solid rgba(255,206,58,.5);
  border-radius:8px; padding:4px 10px; color:var(--lg-gold); background:rgba(255,206,58,.1); }
.lama-shop{ flex:1; overflow-y:auto; padding:4px 10px 12px; scrollbar-width:thin; }
.lama-shopnote{ font-size:10.5px; color:#b9a8e6; text-align:center; padding:6px 8px 9px; }
.lama-shopnote b{ color:#ffe9b0; }
.lama-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; border:1px solid var(--lg-line);
  border-radius:12px; background:var(--lg-panel); padding:9px 11px; margin-bottom:7px; color:#fff; transition:.08s; }
.lama-item:hover:not([disabled]){ background:rgba(255,255,255,.13); transform:translateX(2px); }
.lama-item[disabled]{ opacity:.45; cursor:default; }
.lama-item .ic{ width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; font-size:24px;
  background:rgba(0,0,0,.3); border-radius:10px; border:1px solid var(--lg-line); }
.lama-item .mid{ flex:1; min-width:0; }
.lama-item .nm{ font-weight:800; font-size:13px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lama-item .nm .own{ font-family:'Luckiest Guy',sans-serif; font-size:12px; color:var(--lg-cyan); }
.lama-item .fx{ font-size:10.5px; color:#c4b6ea; }
.lama-item .cost{ text-align:right; font-family:'Luckiest Guy',sans-serif; font-size:14px; color:var(--lg-gold); white-space:nowrap; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.lama-item .cost small{ display:block; font-family:inherit; font-size:9px; color:#b9a8e6; font-weight:600; }
.lama-item.afford{ border-color:rgba(255,206,58,.55); box-shadow:0 0 12px rgba(255,206,58,.12); }
.lama-item.active{ border-color:rgba(196,239,67,.6); box-shadow:0 0 12px rgba(196,239,67,.15); opacity:1; }
.lama-item.active .nm .own{ color:var(--lg-lime); }

/* Troféer */
.lama-ach{ cursor:default; }
.lama-ach.locked{ opacity:.5; filter:grayscale(.6); }
.lama-ach.unlocked{ border-color:rgba(255,206,58,.45); }
.lama-ach.unlocked .ic{ background:rgba(255,206,58,.14); border-color:rgba(255,206,58,.4); }
.lama-empty{ text-align:center; color:#b9a8e6; font-size:12px; padding:20px 10px; }

/* Toast (offline-intäkter, milstolpar, prestige) */
.lama-toast{ position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:9; background:rgba(12,5,34,.94);
  border:1px solid rgba(255,206,58,.5); color:#ffe9b0; border-radius:12px; padding:10px 18px; font-size:13px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:lamaToast 4.6s ease forwards; max-width:86%; text-align:center; }
@keyframes lamaToast{ 0%{ opacity:0; transform:translate(-50%,-14px);} 8%,86%{ opacity:1; transform:translate(-50%,0);} 100%{ opacity:0; transform:translate(-50%,-10px);} }

@media (max-width:760px){
  .lama-game{ grid-template-columns:1fr; grid-template-rows:minmax(0,auto) minmax(0,1fr); overflow-y:auto; }
  .lama-right{ border-left:0; border-top:1px solid var(--lg-line); }
  .lama-clickwrap{ min-height:190px; }
  .lama-gl{ font-size:38px; }
}

/* Fallback när color-mix saknas (äldre webbläsare) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lama-tierbadge{ border-color:var(--lg-line); background:rgba(255,255,255,.06); }
  .lama-ring{ border-color:rgba(255,255,255,.14); box-shadow:none; }
  .lama-btn{ filter:drop-shadow(0 16px 26px rgba(0,0,0,.45)); }
}