/* FORRE.NU — Storm Snake 2.1. Scopad under .snake-game (egen mörk arcade-yta, samma i båda teman). */
.snake-game{ position:absolute; inset:0; display:flex; flex-direction:column; color:#fff;
  background:radial-gradient(75% 50% at 50% 0%, rgba(47,200,239,.16), transparent 55%),
             linear-gradient(170deg,#171040,#0e0930 60%,#0a0624);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
.snake-game .disp{ font-family:'Luckiest Guy','Segoe UI',sans-serif; font-weight:400; text-transform:uppercase; }

/* ── Topp-HUD ── */
.snake-game .ss-top{ display:flex; align-items:center; gap:14px; padding:12px 18px 8px; flex-wrap:wrap; }
.snake-game .ss-stat .k{ display:block; font-size:9px; font-weight:800; letter-spacing:.18em; color:#9fb4e6; }
.snake-game .ss-stat b{ font-family:'Luckiest Guy',sans-serif; font-size:24px; color:#fff; line-height:1; }
.snake-game .ss-stat.gold b{ color:#ffce3a; text-shadow:0 2px 0 rgba(120,70,0,.4); }
.snake-game .ss-stat.cyan b{ color:#7fe3ff; text-shadow:0 2px 0 rgba(0,60,90,.4); }

.snake-game .ss-combo{ font-family:'Luckiest Guy',sans-serif; font-size:15px; letter-spacing:.04em; color:#0c2a00;
  background:linear-gradient(180deg,#e2ff9a,#c4ef43); border-radius:999px; padding:5px 13px;
  box-shadow:0 0 14px rgba(196,239,67,.45); animation:ssComboPop .18s ease-out; }
.snake-game .ss-combo b{ font-family:inherit; }
.snake-game .ss-combo.max{ color:#3a1d00; background:linear-gradient(180deg,#ffe49a,#ffb02e);
  box-shadow:0 0 18px rgba(255,176,46,.65); animation:ssComboMax .5s infinite alternate; }
@keyframes ssComboPop{ from{ transform:scale(.6);} to{ transform:scale(1);} }
@keyframes ssComboMax{ from{ transform:scale(1);} to{ transform:scale(1.08);} }

/* HP + sköld */
.snake-game .ss-hp{ min-width:140px; flex:0 1 180px; }
.snake-game .ss-hp-label{ display:flex; justify-content:space-between; font-size:9px; font-weight:800; letter-spacing:.14em; color:#9fb4e6; margin-bottom:3px; }
.snake-game .ss-hp-track{ position:relative; height:10px; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); overflow:hidden; }
.snake-game .ss-hp-fill{ position:absolute; inset:0 auto 0 0; width:100%; border-radius:999px;
  background:linear-gradient(90deg,#6ee34a,#a5ef43); transition:width .25s ease; }
.snake-game .ss-hp-fill.low{ background:linear-gradient(90deg,#ff4d4d,#ff8a3d); animation:ssHpLow .6s infinite alternate; }
@keyframes ssHpLow{ from{ opacity:.7;} to{ opacity:1;} }
.snake-game .ss-sh-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; height:4px; top:0;
  background:linear-gradient(90deg,#2ec8ef,#7fe3ff); box-shadow:0 0 8px rgba(46,200,239,.7); transition:width .25s ease; }

/* Liga/match-chip */
.snake-game .ss-div{ font-family:'Luckiest Guy',sans-serif; font-size:12px; letter-spacing:.08em; color:#ffe9b0;
  padding:5px 12px; border-radius:999px; border:1px solid rgba(255,206,58,.4); background:rgba(255,176,46,.12); white-space:nowrap; }

/* Storm-etikett */
.snake-game .ss-storm{ margin-left:auto; font-family:'Luckiest Guy',sans-serif; font-size:14px; letter-spacing:.05em;
  color:#c9a6ff; padding:6px 14px; border-radius:999px; border:1px solid rgba(180,110,255,.4); background:rgba(150,70,230,.14); }
.snake-game .ss-storm.hot{ color:#fff; background:rgba(190,60,240,.35); border-color:#d37bff; box-shadow:0 0 12px 2px rgba(190,80,255,.45); animation:ssStormPulse 1s infinite; }
.snake-game .ss-storm.final{ color:#fff; background:rgba(255,60,90,.35); border-color:#ff7ba0; box-shadow:0 0 12px 2px rgba(255,80,120,.45); animation:ssStormPulse .6s infinite; }
.snake-game .ss-storm.win{ color:#3a1d00; background:linear-gradient(180deg,#ffe49a,#ffb02e); border-color:#ffce3a; }
@keyframes ssStormPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }

/* Mute/paus-knappar */
.snake-game .ss-mute{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff;
  border-radius:10px; width:36px; height:36px; font-size:15px; cursor:pointer; display:grid; place-items:center;
  transition:background .1s, transform .06s; touch-action:manipulation; }
.snake-game .ss-mute:hover{ background:rgba(255,255,255,.16); }
.snake-game .ss-mute:active{ transform:scale(.92); }
.snake-game .ss-mute.off{ opacity:.55; }

/* ── Arena ── */
.snake-game .ss-arena-wrap{ position:relative; flex:1; margin:2px 14px; min-height:0; }
.snake-game canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* Aktiva effekter (chips över arenan) — OBS ingen backdrop-filter (prestanda) */
.snake-game .ss-fx{ position:absolute; top:8px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; pointer-events:none; }
.snake-game .ss-chip{ font-size:11px; font-weight:800; letter-spacing:.04em; padding:4px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); background:rgba(10,5,30,.85); white-space:nowrap; }
.snake-game .ss-chip.boogie{ color:#ffb8ec; border-color:#ff5fd0; box-shadow:0 0 10px rgba(255,95,208,.5); animation:ssChipWig .4s infinite alternate; }
.snake-game .ss-chip.slurp{ color:#d1f7b0; border-color:#8fd14f; }
.snake-game .ss-chip.shield{ color:#bfeaff; border-color:#2ec8ef; }
.snake-game .ss-chip.reboot{ color:#c9f2ff; border-color:#6be0ff; box-shadow:0 0 10px rgba(107,224,255,.45); }
@keyframes ssChipWig{ from{ transform:rotate(-2deg);} to{ transform:rotate(2deg);} }

/* Kill feed (nere till vänster) */
.snake-game .ss-feed{ position:absolute; left:10px; bottom:10px; z-index:3; display:flex; flex-direction:column-reverse; gap:4px;
  pointer-events:none; max-width:64%; }
.snake-game .ss-feedrow{ font-size:11px; font-weight:700; color:#cfd8f5; background:rgba(8,4,26,.82);
  border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:4px 10px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; animation:ssFeedIn .18s ease-out; transition:opacity .5s ease; }
.snake-game .ss-feedrow.out{ opacity:0; }
.snake-game .ss-feedrow.gold{ color:#ffe9b0; border-color:rgba(255,206,58,.45); }
.snake-game .ss-feedrow.storm{ color:#e3c2ff; border-color:rgba(211,123,255,.45); }
@keyframes ssFeedIn{ from{ transform:translateX(-8px); opacity:0;} to{ transform:none; opacity:1;} }

/* ── Overlay ── */
.snake-game .ss-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,4,26,.62);
  backdrop-filter:blur(3px); border-radius:12px; z-index:5; }
.snake-game .ss-overlay.hide{ display:none; }
.snake-game .ss-card{ text-align:center; background:linear-gradient(180deg,#2b1656,#1b0d40); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:24px 28px; max-width:470px; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.snake-game .ss-h{ font-size:30px; letter-spacing:.03em; color:#c4ef43; text-shadow:0 3px 0 rgba(20,60,0,.45), 0 0 22px rgba(196,239,67,.35); }
.snake-game .ss-p{ font-size:13px; color:#d7ccf5; margin:10px 0 14px; line-height:1.55; }
.snake-game .ss-legend{ display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin:0 0 16px; }
.snake-game .ss-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#bfb3e6; }
.snake-game .ss-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; box-shadow:0 0 6px rgba(255,255,255,.25); }
.snake-game .ss-btn{ font-family:'Luckiest Guy',sans-serif; font-size:17px; letter-spacing:.03em; text-transform:uppercase; cursor:pointer;
  border:0; border-radius:11px; padding:13px 30px; color:#1d2b00; background:linear-gradient(180deg,#e2ff9a,#c4ef43 55%,#8fb922);
  box-shadow:0 5px 0 #6f9313; transition:transform .06s, filter .1s; touch-action:manipulation; }
.snake-game .ss-btn:hover{ filter:brightness(1.07); }
.snake-game .ss-btn:active{ box-shadow:0 2px 0 #6f9313; transform:translateY(2px); }
.snake-game .ss-hint{ margin-top:12px; font-size:10px; color:#8d84b8; }

/* ── Fot ── */
.snake-game .ss-foot{ display:flex; align-items:center; gap:14px; padding:8px 18px 12px; flex-wrap:wrap; }
.snake-game .ss-lb{ display:flex; align-items:center; gap:10px; font-size:12px; color:#cfc3ef; flex-wrap:wrap; }
.snake-game .ss-lb .disp{ font-size:13px; color:#8fe3ff; }
.snake-game .ss-lbrow{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:3px 10px; margin-right:4px; }
.snake-game .ss-lbrow.you{ border-color:#ffce3a; color:#ffe9b0; }
.snake-game .ss-lbrow b{ color:#fff; }
.snake-game .ss-keys{ margin-left:auto; font-size:10px; color:#8d84b8; }
@media (max-width:700px){
  .snake-game .ss-keys{ display:none; }
  .snake-game .ss-hp{ flex:1 1 110px; min-width:100px; }
  .snake-game .ss-top{ gap:10px; }
  .snake-game .ss-stat b{ font-size:20px; }
  .snake-game .ss-div{ display:none; }
}

/* 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); }