/* Savi sriftai - apkarpyti is Google Fonts 2026-08-15.
   Buvo: 8 failai / 209 KB is fonts.gstatic.com, o pries pirma raide
   narsykle turejo atlikti DNS+TLS i DU svetimus domenus
   (fonts.googleapis.com del CSS + fonts.gstatic.com del failu).
   Dabar: 10 failu / 106 KB is savo domeno, per ta pati HTTP/2 rysi.

   Zenklu ruozas: Basic Latin + Latin-1 + Latin Extended-A. Dengia
   VISA lietuviu abecele ir lenku/ceku/vokieciu/skandinavu vardus -
   zaideju vardai ir profiliu tekstai yra vartotojo kuriami, tad
   karpyti tik iki siandien matomu zenklu butu buve nesaugu.
   Inter ir JetBrains Mono lieka KINTAMIEJI, tik svorio asis
   apribota iki realiai naudojamos (400-600 / 400-700), tad 500 ir
   600 yra TIKRI svoriai, o ne narsykles imituotas paryskinimas. */

@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* === Sweden Code paletė (swedencode.com) === */
  --void:#060A12;
  --panel:rgba(11,18,32,.80);     /* #0B1220 */
  --panel2:rgba(14,23,41,.72);    /* #0E1729 */
  --stroke:rgba(140,170,255,.10);
  --stroke2:rgba(140,170,255,.20);
  --text:#EAF0F7;
  --muted:#8295AC;

  --accent:#ffd24a;     /* SWGC auksas (Sweden Code paletėje) */
  --accent2:#f0b323;
  --money:#F4C45F;
  --cyan:#56E6FF;       /* interaktyvus akcentas (nav/links) */
  --discord:#5865F2;

  /* rarities (unbox) */
  --paprastas:#4b69ff;
  --retas:#8847ff;
  --epikas:#d32ce6;
  --legendinis:#eb4b4b;
  --auksinis:#ffd700;

  /* Sweden Code node spalvos */
  --samp:#4DA3FF;    /* SFG (SA-MP) - mėlyna */
  --cs16:#35E0A1;    /* CS 1.6 ZM - žalia (sukeista 2026-06-23) */

  --radius:2px;
  --clip-panel: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);

  --font-display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Code',Consolas,ui-monospace,monospace;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: var(--font-body);
  color:var(--text);
  background-color:var(--void);
  background-image:
    radial-gradient(1100px 560px at 72% 8%, rgba(75,105,255,.10), transparent 55%),
    radial-gradient(900px 520px at 18% 92%, rgba(255,210,74,.07), transparent 55%),
    linear-gradient(180deg, #0b0e14, #0a0c12);
  min-height:100vh;
  overflow-x:hidden;
}
/* backgroundunboxing.png kaip viso puslapio fonas */
.bgFx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("/assets/background.webp") center center / cover no-repeat;
  filter: saturate(1.03);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(180deg, rgba(6,10,18,.46), rgba(3,6,12,.66)),
    radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(2,4,9,.6) 100%);
}

.wrap{ position:relative; z-index:1; width:min(1180px, 94vw); margin:0 auto; padding:26px 0 48px; }
.mt16{ margin-top:16px; }
.hideSm{ }

header{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:46px;height:46px;border-radius:10px;
  border:1px solid var(--stroke2);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,210,74,.12) inset;
  background: radial-gradient(circle at 50% 30%, rgba(255,210,74,.12), transparent 60%), #141a24;
  background-image: url("icons/swgc.svg");
  background-size: 78%; background-position:center; background-repeat:no-repeat;
}
h1{ font-size:19px; margin:0; letter-spacing:1.2px; font-weight:800; text-transform:uppercase; }
.badge-pro{ font-size:10px; vertical-align:middle; background:linear-gradient(180deg,#ffe27a,#f0b323); color:#1a1407; padding:2px 7px; border-radius:6px; letter-spacing:1.5px; margin-left:6px; box-shadow:0 4px 12px rgba(240,179,35,.3); }
.sub{ font-size:12.5px; color:var(--muted); margin-top:3px; letter-spacing:.3px; }

.top-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.pill{ padding:8px 12px; border-radius:8px; background: var(--panel2); border:1px solid var(--stroke); color:var(--muted); font-size:12px; letter-spacing:.2px; display:flex; align-items:center; gap:6px; }
.pill.wallet{ color:var(--money); border-color:rgba(255,210,74,.30); font-weight:700; }
.pill.wallet .cur{ font-size:10px; opacity:.85; }
.pill.key{ color:var(--accent); border-color:rgba(255,210,74,.28); }
.pill.key .mono{ color:var(--accent); font-weight:700; }

.coin{ display:inline-block; width:16px; height:16px; vertical-align:-3px; background:url("icons/swgc.svg") center/contain no-repeat; }
.coin.sm{ width:13px; height:13px; vertical-align:-2px; }

.buykey{
  padding:6px 10px; border-radius:7px; cursor:pointer; font-weight:800; letter-spacing:.3px; font-size:10.5px; text-transform:uppercase;
  background:linear-gradient(180deg, rgba(255,210,74,.95), rgba(240,179,35,.95)); color:#1a1407; border:1px solid rgba(255,210,74,.6);
  transition: background .15s ease, transform .08s ease, opacity .15s ease; display:inline-flex; align-items:center; gap:5px;
}
.buykey:hover{ background:linear-gradient(180deg,#ffdd6a,#f6bd35); }
.buykey:active{ transform: translateY(1px); }
.buykey:disabled{ opacity:.4; cursor:not-allowed; }

/* Panels */
.card{ background: var(--panel); border:1px solid var(--stroke); border-radius: var(--radius); box-shadow: 0 22px 70px rgba(0,0,0,.45); overflow:hidden; backdrop-filter: blur(6px); }
.card-h{ padding:13px 16px; border-bottom:1px solid var(--stroke); display:flex; align-items:center; justify-content:space-between; gap:10px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); }
.card-h b{ font-size:13px; letter-spacing:1.2px; text-transform:uppercase; }
.card-h-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card-b{ padding:16px; }

.mini{ padding:6px 10px; border-radius:7px; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; background: rgba(255,255,255,.08); color:var(--text); border:1px solid var(--stroke2); transition: background .15s ease; }
.mini:hover{ background: rgba(255,255,255,.14); }
.mini.ghost{ background:transparent; color:var(--muted); }
.mini.ghost:hover{ color:var(--text); background:rgba(255,255,255,.06); }

/* ====== BOX STORE ====== */
.boxStore{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; }
.boxCard{ position:relative; border:1px solid var(--baFaint, var(--stroke2)); border-radius:12px; background:radial-gradient(120% 90% at 50% 0%, #1b2230, #0d1119 85%); padding:14px; cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; overflow:hidden; }
.boxCard:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.22); box-shadow:0 16px 36px rgba(0,0,0,.5); }
.boxCard.active{ border-color:var(--ba, var(--accent)); box-shadow:0 0 0 1px var(--ba, var(--accent)), 0 18px 44px var(--baSoft, rgba(0,0,0,.5)), 0 14px 32px rgba(0,0,0,.42); }
.boxCard.active .boxTag{ display:block; }
.boxTag{ display:none; position:absolute; top:8px; right:8px; font-size:9px; font-weight:800; letter-spacing:1px; color:#0b0e14; background:var(--ba, var(--accent)); padding:3px 7px; border-radius:6px; z-index:3; }
.boxCard-glow{ position:absolute; left:50%; top:6px; width:140px; height:96px; transform:translateX(-50%); z-index:1; pointer-events:none; opacity:.26; mix-blend-mode:screen; filter:blur(7px);
  background: radial-gradient(closest-side, var(--ba, #ffd24a), transparent); }
.boxCard-art{ position:relative; z-index:2; height:90px; background:center/contain no-repeat; filter: drop-shadow(0 0 4px var(--ba, transparent)) drop-shadow(0 0 13px var(--baSoft, transparent)) drop-shadow(0 9px 12px rgba(0,0,0,.6)); margin-bottom:8px; }
.boxCard-name{ position:relative; z-index:2; font-weight:800; font-size:14px; letter-spacing:.3px; color:var(--ba, var(--text)); text-shadow:0 1px 10px var(--baSoft, transparent); }
.boxCard-sub{ position:relative; z-index:2; font-size:11px; color:var(--muted); margin-top:2px; }
.boxCard-badges{ position:relative; z-index:2; display:flex; gap:5px; margin:9px 0; flex-wrap:wrap; }
.boxCard-foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.boxCard-price{ font-weight:800; color:var(--accent); font-size:13px; display:flex; align-items:center; gap:4px; }
.boxCard-own{ font-size:11px; color:var(--muted); }
.boxBuy{ padding:7px 11px; border-radius:7px; font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; cursor:pointer; background:linear-gradient(180deg, rgba(255,210,74,.95), rgba(240,179,35,.95)); color:#1a1407; border:1px solid rgba(255,210,74,.6); }
.boxBuy:hover{ background:linear-gradient(180deg,#ffdd6a,#f6bd35); }
.boxBuy:disabled{ opacity:.45; cursor:not-allowed; }

/* server badges */
.serverBadges{ display:flex; gap:6px; flex-wrap:wrap; margin:7px 0; }
.srvBadge{ font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 8px; border-radius:5px; border:1px solid currentColor; }
.srvBadge.big{ font-size:12px; padding:4px 12px; border-radius:7px; }

/* Box stage */
.box3d{ border-radius: 12px; background: radial-gradient(700px 260px at 30% 0%, rgba(75,105,255,.10), transparent 55%), radial-gradient(520px 240px at 85% 100%, rgba(255,210,74,.08), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--baSoft, var(--stroke)); box-shadow:0 22px 60px -14px var(--baSoft, transparent); position:relative; overflow:hidden; padding:18px; }
.box3d .shine{ position:absolute; inset:-40% -10%; background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%); transform: rotate(15deg); animation: shine 5s ease-in-out infinite; pointer-events:none; }
@keyframes shine{ 0%{ transform: translateX(-22%) rotate(15deg); opacity:.20;} 50%{ transform: translateX(22%) rotate(15deg); opacity:.45;} 100%{ transform: translateX(-22%) rotate(15deg); opacity:.20;} }

.caseHead{ display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.caseArt{ position:relative; width:120px; height:90px; flex:0 0 auto; overflow:visible; background:transparent; border:0; box-shadow:none; }
.caseArt-img{ position:absolute; inset:0; z-index:2; background: center/contain no-repeat; filter: drop-shadow(0 0 4px var(--ba, transparent)) drop-shadow(0 0 13px var(--baSoft, transparent)) drop-shadow(0 9px 12px rgba(0,0,0,.6)); }
.caseArt-glow{ position:absolute; left:50%; top:6px; width:140px; height:96px; transform:translateX(-50%); z-index:1; pointer-events:none; opacity:.26; mix-blend-mode:screen; filter:blur(7px);
  background: radial-gradient(closest-side, var(--ba, #ffd24a), transparent); }
#activeBoxName{ color:var(--ba, var(--text)); text-shadow:0 1px 16px var(--baSoft, transparent); transition:color .15s ease; }
.caseInfo{ flex:1 1 240px; min-width:200px; }
.caseSeries{ color:var(--accent); letter-spacing:1.4px; font-size:11px; }
.caseInfo h2{ margin:4px 0 6px; font-size:18px; letter-spacing:.4px; font-weight:800; }
.caseInfo .hint{ font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:4px; }
.caseInfo .hint b{ color:var(--accent); }

/* Buttons */
.btnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }
button{ appearance:none; border:0; cursor:pointer; border-radius: 8px; padding:12px 16px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; font-size:12.5px; background: rgba(255,255,255,.08); color:var(--text); border:1px solid var(--stroke2); transition: transform .08s ease, background .18s ease, opacity .18s ease, box-shadow .18s ease; user-select:none; }
button:hover{ background: rgba(255,255,255,.13); }
button:active{ transform: translateY(1px) scale(.99); }
button:disabled{ opacity:.45; cursor:not-allowed; }
.primary{ background: linear-gradient(180deg, rgba(255,210,74,.95), rgba(240,179,35,.95)); color:#1a1407; border:1px solid rgba(255,210,74,.65); box-shadow: 0 10px 26px rgba(240,179,35,.28), 0 0 0 1px rgba(255,255,255,.10) inset; }
.primary:hover{ background: linear-gradient(180deg, #ffdd6a, #f6bd35); }
.toggle.on{ border-color: rgba(98,210,140,.4); color:#bff3d2; }

/* ====== ROLLER ====== */
.rollerWrap{ margin-top:6px; border-radius: 12px; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.45)), radial-gradient(120% 100% at 50% 0%, rgba(75,105,255,.06), transparent 60%); border:1px solid var(--stroke2); padding:18px 0; overflow:hidden; position:relative; box-shadow: inset 0 2px 24px rgba(0,0,0,.5); }
.rollerWrap::before, .rollerWrap::after{ content:""; position:absolute; top:0; bottom:0; width:120px; z-index:5; pointer-events:none; }
.rollerWrap::before{ left:0;  background: linear-gradient(90deg, rgba(8,10,15,.95), transparent); }
.rollerWrap::after{  right:0; background: linear-gradient(270deg, rgba(8,10,15,.95), transparent); }
.ticker{ position:absolute; top:6px; bottom:6px; left:50%; width:3px; z-index:6; background: linear-gradient(180deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent); box-shadow: 0 0 16px rgba(255,210,74,.85), 0 0 40px rgba(255,210,74,.4); transform: translateX(-50%); pointer-events:none; }
.ticker::before, .ticker::after{ content:""; position:absolute; left:50%; width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; filter: drop-shadow(0 0 6px rgba(255,210,74,.8)); }
.ticker::before{ top:-2px; transform: translate(-50%,-100%); border-top:13px solid var(--accent); }
.ticker::after{ bottom:-2px; transform: translate(-50%, 100%); border-bottom:13px solid var(--accent); }
.roller{ display:flex; gap:10px; align-items:center; will-change: transform; transform: translate3d(0,0,0); padding:0 10px; }

.csItem{ flex:0 0 158px; height:150px; position:relative; overflow:hidden; border-radius:7px; background:#15181f; border:1px solid rgba(255,255,255,.06); box-shadow:0 8px 20px rgba(0,0,0,.45); display:flex; align-items:flex-end; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor:pointer; }
.csItem-bg{ position:absolute; inset:0; background: radial-gradient(120% 100% at 50% 0%, #1d2533, #0d1119 82%); }
.csItem-glow{ position:absolute; left:0; right:0; bottom:0; height:80%; z-index:1; pointer-events:none; }
.csItem-icon{ position:absolute; left:10px; right:10px; top:12px; bottom:34px; z-index:2; background-position:center; background-repeat:no-repeat; background-size:contain; filter: drop-shadow(0 6px 9px rgba(0,0,0,.55)); }
.csItem-srv{ position:absolute; top:8px; left:8px; z-index:3; font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:1px 6px; border-radius:4px; border:1px solid currentColor; background:rgba(0,0,0,.35); }
.csItem-name{ position:relative; z-index:3; width:100%; padding:0 9px 12px; font-size:11px; font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.csItem-sub{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:1px; }
.csItem-bar{ position:absolute; left:0; right:0; bottom:0; height:5px; z-index:4; }
.csItem:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.16); box-shadow: 0 14px 30px rgba(0,0,0,.5); }

/* ====== Inline result ====== */
.result{ display:none; margin-top:16px; border-radius: 10px; background: rgba(0,0,0,.28); border:1px solid var(--stroke); padding:14px; }
.result.show{ display:block; animation: resultPop 480ms cubic-bezier(.12,.88,.12,1) both; }
@keyframes resultPop{ 0%{ opacity:0; transform: translateY(8px) scale(.99);} 100%{ opacity:1; transform: translateY(0) scale(1);} }
.resLabel{ color:var(--muted); letter-spacing:1.4px; font-size:11px; margin-bottom:10px; }
.resSlot{ display:flex; gap:14px; align-items:center; }
.resThumb{ position:relative; width:88px; height:66px; flex:0 0 auto; border-radius:8px; overflow:hidden; border:1px solid var(--stroke2); background: radial-gradient(120% 100% at 50% 0%, #1d2533, #0d1119 82%); }
.resIcon{ position:absolute; left:8px; right:8px; top:7px; bottom:12px; background:center/contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.resBar{ position:absolute; left:0; right:0; bottom:0; height:5px; }
.resText{ min-width:0; }
.resName{ font-size:15px; font-weight:800; letter-spacing:.2px; }
.resMeta{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.resRarity{ font-weight:800; letter-spacing:.4px; text-transform:uppercase; font-size:12px; }
.dotSep{ color:var(--muted); }
.resWear{ color:var(--muted); }
.stTag{ display:none; color:#e6a23c; font-weight:800; font-size:11px; letter-spacing:.4px; border:1px solid rgba(230,162,60,.4); border-radius:6px; padding:2px 7px; }
.stTag.show{ display:inline-block; }

/* ====== Chances + odds ====== */
.oddsBar{ display:flex; height:26px; border-radius:8px; overflow:hidden; border:1px solid var(--stroke2); margin-bottom:14px; box-shadow: inset 0 1px 6px rgba(0,0,0,.45); }
.oddsSeg{ display:flex; align-items:center; justify-content:center; min-width:0; position:relative; transition: filter .15s ease; }
.oddsSeg:hover{ filter: brightness(1.15); }
.oddsSeg span{ font-size:10.5px; font-weight:800; color:rgba(0,0,0,.78); letter-spacing:.2px; text-shadow:0 1px 1px rgba(255,255,255,.25); white-space:nowrap; overflow:hidden; }
.chances{ display:grid; gap:10px; }
.chance{ position:relative; padding:12px 14px 12px 18px; border-radius: 8px; border:1px solid var(--stroke); background: rgba(0,0,0,.20); display:flex; align-items:center; justify-content:space-between; gap:10px; overflow:hidden; }
.chance::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--rc, transparent); box-shadow: 0 0 12px var(--rc, transparent); }
.tag{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; }
.tag .cs{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }
.dot{ width:11px;height:11px;border-radius:3px; }
.rarityClick{ cursor:pointer; }
.rarityClick:hover{ text-decoration:underline; }
.pct{ color:var(--text); font-size:13px; font-weight:800; }
.footerNote{ margin-top:12px; font-size:12px; color:var(--muted); line-height:1.45; }

/* ====== Stats ====== */
.statGrid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.statTile{ background: rgba(0,0,0,.22); border:1px solid var(--stroke); border-radius:10px; padding:12px 14px; transition: border-color .2s ease, transform .12s ease; }
.statTile:hover{ border-color: var(--stroke2); transform: translateY(-2px); }
.statTile.wide{ grid-column: span 2; }
.statLabel{ font-size:11px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px; }
.statNum{ font-size:19px; font-weight:800; letter-spacing:.3px; }
.statNum.money{ color:var(--money); }
.statNum.best{ font-size:14px; line-height:1.3; font-weight:800; }
.pityStat-warn{ color:var(--accent); }
.rarityCounts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.rcChip{ display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:rgba(0,0,0,.22); border:1px solid var(--stroke); font-size:12px; font-weight:700; }
.rcChip .dot{ width:9px; height:9px; border-radius:3px; }
.rcChip .c{ color:var(--text); font-weight:800; }

/* ====== flash/confetti/toast ====== */
.flash{ position:fixed; inset:0; z-index:1500; background: radial-gradient(900px 420px at 50% 45%, rgba(255,255,255,.22), transparent 60%), linear-gradient(180deg, rgba(255,210,74,.14), transparent); opacity:0; pointer-events:none; transition: opacity .22s ease; }
.flash.on{ opacity:1; }
.confetti{ position:fixed; inset:0; z-index:1600; pointer-events:none; overflow:hidden; opacity:0; transition: opacity .18s ease; }
.confetti.on{ opacity:1; }
.particle{ position:absolute; width:8px;height:14px; border-radius:3px; background: rgba(255,255,255,.6); opacity:.85; animation: fall 1.1s ease-out forwards; }
@keyframes fall{ 0%{ transform: translateY(-30px) rotate(0deg); opacity:0;} 10%{ opacity:.95;} 100%{ transform: translateY(110vh) rotate(260deg); opacity:0;} }
.toast{ position:fixed; left:50%; bottom:28px; transform: translateX(-50%) translateY(20px); z-index:2200; padding:12px 20px; border-radius:10px; background: rgba(20,25,35,.96); border:1px solid var(--stroke2); color:var(--text); font-size:13px; font-weight:700; letter-spacing:.3px; box-shadow:0 16px 40px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px; color:var(--muted); }

/* ====== Inventory ====== */
.history{ display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; padding-right:4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.2); }
.history::-webkit-scrollbar{ width:8px; }
.history::-webkit-scrollbar-track{ background:rgba(0,0,0,.2); border-radius:8px; }
.history::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
.history::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); }
.emptyInv{ color:var(--muted); text-align:center; padding:18px; font-size:13px; }
.historyItem{ position:relative; padding:9px 12px 9px 16px; border-radius:8px; border:1px solid var(--stroke); background:rgba(0,0,0,.2); display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
.historyItem::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--rc, transparent); }
.historyItem .hLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.hThumb{ width:34px; height:26px; flex:0 0 auto; border-radius:5px; background:#0e131b center/contain no-repeat; border:1px solid var(--stroke); }
.historyItem .hName{ font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.historyItem .hRight{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.historyItem .hWear{ font-size:11px; color:var(--muted); }
.historyItem .hSt{ color:#e6a23c; font-weight:800; font-size:10px; border:1px solid rgba(230,162,60,.4); border-radius:5px; padding:1px 5px; }
.delivered{ font-size:10px; font-weight:800; letter-spacing:.3px; color:var(--cs16); border:1px solid rgba(126,217,87,.4); border-radius:5px; padding:2px 7px; }
.claimBtn{ padding:5px 9px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; background: rgba(255,210,74,.12); color:var(--accent); border:1px solid rgba(255,210,74,.35); cursor:pointer; }
.claimBtn:hover{ background: rgba(255,210,74,.22); }

/* ====== info modal ====== */
.infoModal{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.7); backdrop-filter: blur(4px); display:none; align-items:center; justify-content:center; }
.infoModal.show{ display:flex; }
.infoBox{ width:auto; min-width:520px; max-width:95vw; padding:30px; border-radius:14px; background: linear-gradient(180deg, rgba(26,31,42,.98), rgba(16,20,28,.98)); border:1px solid var(--stroke2); text-align:center; box-shadow: 0 40px 110px rgba(0,0,0,.75); }
.infoBox h3{ margin-top:0; letter-spacing:.6px; text-transform:uppercase; }
.infoBox p{ font-size:13px; color:var(--muted); line-height:1.55; }
.infoBox button{ margin-top:16px; }
#infoDesc{ overflow:visible; }

/* ====== REVEAL ====== */
.revealOverlay{ position:fixed; inset:0; z-index:1800; display:none; overflow-y:auto; -webkit-overflow-scrolling:touch; align-items:center; justify-content:center; background: radial-gradient(120% 90% at 50% 45%, rgba(10,12,18,.82), rgba(4,5,8,.96)); backdrop-filter: blur(8px); }
.revealOverlay.show{ display:flex; animation: overlayIn .25s ease both; }
@keyframes overlayIn{ from{opacity:0} to{opacity:1} }
.revealInner{ position:relative; display:flex; flex-direction:column; align-items:center; padding:28px 20px; max-width:92vw; margin:auto; }
.revealRays{ position:absolute; top:50%; left:50%; width:760px; height:760px; max-width:120vw; max-height:120vw; transform: translate(-50%,-56%); background: conic-gradient(from 0deg, rgba(255,210,74,0) 0deg, rgba(255,210,74,.22) 6deg, rgba(255,210,74,0) 12deg, rgba(255,210,74,0) 18deg, rgba(255,210,74,.18) 24deg, rgba(255,210,74,0) 30deg); filter: blur(2px); opacity:0; pointer-events:none; animation: spinRays 9s linear infinite; }
.revealOverlay.gold .revealRays{ opacity:.9; }
.revealOverlay.covert .revealRays{ opacity:.5; }
@keyframes spinRays{ to{ transform: translate(-50%,-56%) rotate(360deg); } }
.revealGlow{ position:absolute; top:50%; left:50%; width:520px; height:520px; max-width:90vw; max-height:90vw; transform: translate(-50%,-56%); border-radius:50%; pointer-events:none; animation: glowPulse 2.4s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.revealHeadline{ position:relative; z-index:2; font-size:14px; letter-spacing:5px; font-weight:800; color:var(--muted); text-transform:uppercase; margin-bottom:6px; animation: dropIn .5s ease both; }
.specialBanner{ position:relative; z-index:2; display:none; font-size:20px; font-weight:900; letter-spacing:3px; background: linear-gradient(180deg,#fff4b3,#ffd24a,#ffb300); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 30px rgba(255,210,74,.55); margin-bottom:10px; animation: bannerPop .6s cubic-bezier(.12,.88,.12,1) both; }
.revealOverlay.gold .specialBanner{ display:block; }
@keyframes bannerPop{ 0%{opacity:0; transform:scale(.8)} 100%{opacity:1; transform:scale(1)} }
.revealCard{ position:relative; z-index:2; width:300px; height:264px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow: 0 30px 90px rgba(0,0,0,.7); animation: cardReveal .7s cubic-bezier(.12,.88,.12,1) both; }
@keyframes cardReveal{ 0%{ opacity:0; transform: scale(.6) translateY(20px);} 60%{ opacity:1; transform: scale(1.05) translateY(0);} 100%{ opacity:1; transform: scale(1) translateY(0);} }
.revealCard-bg{ position:absolute; inset:0; background: radial-gradient(120% 100% at 50% 0%, #1d2533, #0c1018 85%); }
.revealCard-icon{ position:absolute; left:34px; right:34px; top:30px; bottom:46px; background:center/contain no-repeat; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); z-index:2; }
.revealCard-bar{ position:absolute; left:0; right:0; bottom:0; height:7px; z-index:3; }
.revealCard-shine{ position:absolute; inset:-60% -80%; z-index:4; background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.28) 50%, transparent 55%); transform: translateX(-40%) rotate(18deg); animation: sweep 1s ease-out .35s both; pointer-events:none; }
@keyframes sweep{ 0%{ opacity:0; transform: translateX(-45%) rotate(18deg);} 25%{ opacity:1;} 100%{ opacity:0; transform: translateX(45%) rotate(18deg);} }
.revealRarity{ position:relative; z-index:2; margin-top:16px; font-size:14px; font-weight:900; letter-spacing:2px; text-transform:uppercase; text-shadow:0 0 18px currentColor; animation: dropIn .5s ease .12s both; }
.revealName{ position:relative; z-index:2; margin-top:6px; font-size:20px; font-weight:800; text-align:center; max-width:520px; line-height:1.25; animation: dropIn .5s ease .18s both; }
.revealServerWrap{ position:relative; z-index:2; margin-top:10px; animation: dropIn .5s ease .2s both; }
@keyframes dropIn{ 0%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:translateY(0)} }
.stBadge{ position:relative; z-index:2; display:none; margin-top:10px; color:#e6a23c; font-weight:900; letter-spacing:1px; border:1px solid rgba(230,162,60,.5); border-radius:8px; padding:4px 12px; background: rgba(230,162,60,.08); text-shadow:0 0 12px rgba(230,162,60,.5); }
.stBadge.show{ display:inline-block; animation: dropIn .5s ease .22s both; }
.floatWrap{ position:relative; z-index:2; margin-top:18px; width:min(420px, 86vw); animation: dropIn .5s ease .26s both; }
.wbHead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.wbTier{ font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#fff; text-shadow:0 0 12px currentColor; }
.wbVal{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; font-weight:700; letter-spacing:.5px; color:rgba(255,255,255,.82); }
.wbTrack{ position:relative; height:14px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.wbTrack::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(90deg, transparent 0 calc(7% - 1px), rgba(0,0,0,.30) calc(7% - 1px) calc(7% + 1px), transparent calc(7% + 1px) calc(15% - 1px), rgba(0,0,0,.30) calc(15% - 1px) calc(15% + 1px), transparent calc(15% + 1px) calc(38% - 1px), rgba(0,0,0,.30) calc(38% - 1px) calc(38% + 1px), transparent calc(38% + 1px) calc(45% - 1px), rgba(0,0,0,.30) calc(45% - 1px) calc(45% + 1px), transparent calc(45% + 1px)); }
.wbFill{ position:absolute; left:0; top:0; height:100%; width:0%; border-radius:8px; z-index:1; background-image: linear-gradient(90deg, #2ee6a6 0%, #86ef3e 7%, #c6e636 15%, #ffd24a 30%, #ff9f3a 38%, #ff6a3d 45%, #ff4757 70%, #f5314f 100%); background-repeat:no-repeat; background-position:left center; background-size:200% 100%; box-shadow: 0 0 16px -2px var(--tip, #ffd24a), inset 0 1px 0 rgba(255,255,255,.25); transition: width .85s cubic-bezier(.16,1,.3,1); }
.wbFill::after{ content:""; position:absolute; right:0; top:-1px; bottom:-1px; width:2px; background:rgba(255,255,255,.92); box-shadow:0 0 12px 2px var(--tip, #fff); border-radius:2px; }
@media (prefers-reduced-motion: reduce){ .wbFill{ transition:none; } }
.floatBar{ position:relative; height:11px; border-radius:7px; border:1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04); }
.floatTrack{ position:absolute; inset:0; border-radius:inherit; background: linear-gradient(90deg, #46d869 0%, #8fe23a 7%, #e8cf36 15%, #e9a52a 30%, #e87b28 38%, #e85a2a 45%, #e23636 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 4px rgba(0,0,0,.3); }
.floatBar::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; background: linear-gradient(90deg, transparent calc(7% - 0.8px), rgba(0,0,0,.4) calc(7% - 0.8px), rgba(0,0,0,.4) calc(7% + 0.8px), transparent calc(7% + 0.8px), transparent calc(15% - 0.8px), rgba(0,0,0,.4) calc(15% - 0.8px), rgba(0,0,0,.4) calc(15% + 0.8px), transparent calc(15% + 0.8px), transparent calc(38% - 0.8px), rgba(0,0,0,.4) calc(38% - 0.8px), rgba(0,0,0,.4) calc(38% + 0.8px), transparent calc(38% + 0.8px), transparent calc(45% - 0.8px), rgba(0,0,0,.4) calc(45% - 0.8px), rgba(0,0,0,.4) calc(45% + 0.8px), transparent calc(45% + 0.8px)); }
.floatMarker{ position:absolute; top:-7px; width:2px; height:18px; background:linear-gradient(180deg,#fff,rgba(255,255,255,.82)); border-radius:2px; box-shadow:0 0 10px rgba(255,255,255,.95); transform: translateX(-50%); left:0%; z-index:3; transition: left .8s cubic-bezier(.12,.88,.12,1); }
.floatMarker::before{ content:""; position:absolute; top:-6px; left:50%; width:8px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%) rotate(45deg); box-shadow:0 0 8px rgba(255,255,255,.95); }
.floatMeta{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; font-size:12px; color:var(--muted); }
.floatMeta .mono{ font-size:11.5px; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--stroke); padding:2px 8px; border-radius:6px; letter-spacing:.3px; }
.floatMeta #revealWear{ color:var(--text); font-weight:700; }
.revealDeliver{ position:relative; z-index:2; margin-top:16px; font-size:12px; color:var(--cs16); letter-spacing:.4px; animation: dropIn .5s ease .28s both; }
.revealBtns{ position:relative; z-index:2; display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; justify-content:center; animation: dropIn .5s ease .3s both; }

/* ====== button sheen + focus ====== */
.primary, .boxBuy{ position:relative; overflow:hidden; }
.primary::before, .boxBuy::before{ content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); transition: left .55s ease; pointer-events:none; }
.primary:hover::before, .boxBuy:hover::before{ left:130%; }
button:focus-visible, .rarityClick:focus-visible, .boxCard:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ====== case shake ====== */
@keyframes caseShake{ 0%,100%{ transform: translateX(0) rotate(0);} 15%{ transform: translateX(-3px) rotate(-1.5deg);} 30%{ transform: translateX(3px) rotate(1.5deg);} 45%{ transform: translateX(-3px) rotate(-1deg);} 60%{ transform: translateX(2px) rotate(1deg);} 75%{ transform: translateX(-1px) rotate(0);} }
.caseArt.shake{ animation: caseShake .55s ease; }
@keyframes caseGlow{ 0%,100%{ opacity:.6; } 50%{ opacity:1; filter: brightness(1.7); } }
.caseArt.shake .caseArt-glow{ animation: caseGlow .55s ease; }

/* ====== reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  .box3d .shine, .revealRays, .revealGlow{ animation: none !important; }
  .caseArt.shake{ animation: none !important; }
  .result.show, .revealCard, .revealRarity, .revealName, .stBadge, .floatWrap, .revealServerWrap, .revealDeliver, .revealBtns, .specialBanner, .revealHeadline, .revealCard-shine{ animation-duration: .01ms !important; }
  .csItem, button, .floatMarker, .statTile, .boxCard{ transition-duration: .01ms !important; }
}

/* ====== responsive ====== */
@media (max-width: 760px){
  .wrap{ padding:18px 0 36px; }
  h1{ font-size:15px; letter-spacing:.6px; }
  .sub{ font-size:11px; }
  .hideSm{ display:none; }
  .top-actions{ width:100%; justify-content:flex-start; }
  .statTile.wide{ grid-column: span 1; }
  .infoBox{ min-width:auto; width:92vw; padding:22px; }
  .revealCard{ width:236px; height:210px; }
  .revealCard-icon{ left:26px; right:26px; top:24px; bottom:38px; }
  .revealName{ font-size:17px; }
  .csItem{ flex:0 0 132px; height:128px; }
  .rollerWrap::before, .rollerWrap::after{ width:64px; }
  .revealBtns button{ padding:11px 13px; font-size:11.5px; }
  .siteNav{ gap:10px; }
  .navLinks a{ padding:7px 9px; font-size:11px; }
}

/* ============ SWEDEN CODE TEMA (swedencode.com) ============ */
h1, h2, .card-h b, .caseInfo h2, .statNum, .revealName, .revealRarity, .revealHeadline,
.specialBanner, .boxCard-name, .resName, .badge-pro, .navLogo, .navLinks a, .navDiscord,
.tagline, button, .buykey, .mini, .boxBuy, .claimBtn, .invSell, .primary{
  font-family: var(--font-display);
}
.mono{ font-family: var(--font-mono); }
h1{ letter-spacing:1.6px; }
.card-h b{ letter-spacing:1.6px; }

/* aštrūs HUD kampai */
.card, .statTile, .chance, .historyItem, .result, .rollerWrap, .csItem, .infoBox, button,
.pill, .mini, .buykey, .boxBuy, .srvBadge, .stTag, .oddsBar, .revealCard, .toast, .delivered,
.claimBtn, .hThumb, .resThumb, .navDiscord{ border-radius:2px !important; }
/* nukirptas kampas - Sweden Code signature.
   .caseArt ČIA NEDĖTI: jis turi overflow:visible, nes jo vaikai sąmoningai
   išlenda už ribų - .caseArt-img turi spalvotą drop-shadow švytėjimą, o
   .caseArt-glow yra 140px pločio 120px konteineryje. clip-path nukerpa
   nepaisant overflow, todėl dėžės paveikslėliui nupjaudavo kampą ir
   užgesindavo švytėjimą. (Pataisyta 2026-07-27.) */
.siteNav, .boxCard{ border-radius:2px; clip-path: var(--clip-panel); }

/* NAV */
.siteNav{ display:flex; align-items:center; gap:16px; padding:11px 16px; margin-bottom:12px;
  background:rgba(6,10,18,.62); border:1px solid var(--stroke); backdrop-filter:blur(8px); flex-wrap:wrap; }
.navLogo{ font-weight:700; letter-spacing:2px; color:var(--text); text-decoration:none; font-size:16px; white-space:nowrap; }
.navLogo b{ color:var(--cyan); }
.navLinks{ display:flex; gap:2px; flex:1; flex-wrap:wrap; min-width:0; }
.navLinks a{ color:var(--muted); text-decoration:none; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:600; padding:8px 12px; transition:color .15s ease, background .15s ease; }
.navLinks a:hover{ color:var(--text); background:rgba(140,170,255,.08); }
.navRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.navDiscord{ font-size:12px; letter-spacing:1px; text-transform:uppercase; font-weight:700; color:#fff;
  background:var(--discord); border:1px solid rgba(120,130,255,.55); padding:9px 14px; text-decoration:none; transition:filter .15s ease; }
.navDiscord:hover{ filter:brightness(1.12); }
.tagline{ text-align:center; letter-spacing:6px; color:var(--muted); font-size:12px; font-weight:600; margin:0 0 16px; text-transform:uppercase; }
/* poster header banner - clean framed picture, flush with nav above + cards below */
.siteNav{ margin-bottom:0; }                 /* kill gap between nav and banner */
.hdrBanner{ position:relative; box-sizing:border-box; width:100%; margin:0 0 4px; overflow:hidden; line-height:0;
  border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:0 30px 80px -14px rgba(0,0,0,.62), 0 0 0 1px rgba(86,230,255,.10), 0 1px 0 rgba(255,255,255,.04) inset; }
.hdrBanner img{ display:block; width:100%; height:auto; }
/* keep banner clean: hide grid/scan/corners + status; terminal code stays (moved up) */
.hdrStat, .hdrHud .grid, .hdrHud .scan, .hdrHud .c{ display:none; }
/* ===== datamosh / RGB-split slice glitch on the banner picture ===== */
.hdrBanner .glx-l{ position:absolute; inset:-3px -14px; z-index:2; background-position:50% 50%; background-size:cover; background-repeat:no-repeat; opacity:0; pointer-events:none; will-change:transform,clip-path,opacity; }
.hdrBanner.imgglx .glx-l{ opacity:.95; }
.hdrBanner.imgglx .g1{ mix-blend-mode:screen; filter:brightness(.82) sepia(1) saturate(8) hue-rotate(70deg); animation:glSlice1 .52s steps(1) both; }
.hdrBanner.imgglx .g2{ mix-blend-mode:screen; filter:brightness(.82) sepia(1) saturate(8) hue-rotate(285deg); animation:glSlice2 .52s steps(1) both; }
.hdrBanner.imgglx img{ animation:imgFlick .52s steps(1) both; }
@keyframes glSlice1{ 0%{transform:translate(16px,0);clip-path:inset(8% 0 78% 0)} 15%{transform:translate(-20px,0);clip-path:inset(38% 0 42% 0)} 30%{transform:translate(13px,0);clip-path:inset(66% 0 14% 0)} 45%{transform:translate(-16px,0);clip-path:inset(22% 0 60% 0)} 60%{transform:translate(22px,0);clip-path:inset(50% 0 30% 0)} 75%{transform:translate(-12px,0);clip-path:inset(80% 0 6% 0)} 90%{transform:translate(15px,0);clip-path:inset(14% 0 70% 0)} 100%{transform:none;clip-path:inset(0 0 100% 0)} }
@keyframes glSlice2{ 0%{transform:translate(-18px,0);clip-path:inset(60% 0 28% 0)} 15%{transform:translate(16px,0);clip-path:inset(18% 0 64% 0)} 30%{transform:translate(-13px,0);clip-path:inset(46% 0 36% 0)} 45%{transform:translate(18px,0);clip-path:inset(74% 0 10% 0)} 60%{transform:translate(-22px,0);clip-path:inset(30% 0 54% 0)} 75%{transform:translate(14px,0);clip-path:inset(6% 0 84% 0)} 90%{transform:translate(-16px,0);clip-path:inset(54% 0 28% 0)} 100%{transform:none;clip-path:inset(0 0 100% 0)} }
@keyframes imgFlick{ 0%{filter:none;transform:none} 20%{filter:brightness(1.28) contrast(1.4);transform:scale(1.04) translate(-5px,0)} 40%{filter:brightness(.9) saturate(1.7);transform:scale(1.04) translate(5px,0)} 60%{filter:contrast(1.5) hue-rotate(-14deg);transform:scale(1.04) translate(-3px,1px)} 80%{filter:brightness(1.16);transform:scale(1.04) translate(3px,0)} 100%{filter:none;transform:none} }
@media (prefers-reduced-motion: reduce){ .hdrBanner.imgglx .glx-l, .hdrBanner.imgglx img{ animation:none; } .hdrBanner.imgglx .glx-l{ opacity:0; } }
/* frozen glitch (debug/preview only, ?glxfreeze) */
.hdrBanner.glxfreeze .glx-l{ opacity:.92; }
.hdrBanner.glxfreeze .g1{ mix-blend-mode:screen; filter:brightness(.82) sepia(1) saturate(8) hue-rotate(70deg); transform:translate(20px,0); clip-path:inset(18% 0 52% 0); }
.hdrBanner.glxfreeze .g2{ mix-blend-mode:screen; filter:brightness(.82) sepia(1) saturate(8) hue-rotate(285deg); transform:translate(-20px,0); clip-path:inset(56% 0 20% 0); }
/* ===== Header futuristic HUD overlay ===== */
.hdrBanner::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to top, rgba(4,6,12,.55) 0%, rgba(4,6,12,0) 13%),
    radial-gradient(130% 130% at 50% 42%, transparent 64%, rgba(2,4,9,.4) 100%); }
.hdrHud{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.hdrHud .grid{ position:absolute; inset:0; opacity:.14; mix-blend-mode:screen;
  background-image:
    repeating-linear-gradient(0deg, rgba(86,230,255,.55) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(86,230,255,.55) 0 1px, transparent 1px 32px);
  -webkit-mask-image: radial-gradient(135% 130% at 50% 42%, transparent 24%, #000 82%);
          mask-image: radial-gradient(135% 130% at 50% 42%, transparent 24%, #000 82%); }
.hdrHud .scan{ position:absolute; left:0; right:0; top:0; height:130px; transform:translateY(-130px);
  background: linear-gradient(to bottom, rgba(86,230,255,0), rgba(86,230,255,.15) 62%, rgba(190,248,255,.5) 84%, rgba(86,230,255,0) 100%);
  box-shadow:0 0 26px rgba(86,230,255,.4); mix-blend-mode:screen; opacity:.7;
  animation: hdrScan 5.5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hdrScan{ 0%{ transform:translateY(-130px); } 40%{ transform:translateY(338px); } 100%{ transform:translateY(338px); } }
.hdrHud .c{ position:absolute; width:20px; height:20px; border:2px solid rgba(150,242,255,.85); filter:drop-shadow(0 0 6px rgba(86,230,255,.6)); }
.hdrHud .tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.hdrHud .tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.hdrHud .bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.hdrHud .br{ bottom:10px; right:10px; border-left:0; border-top:0; }
@media (prefers-reduced-motion: reduce){ .hdrHud .scan{ animation:none; opacity:0; } }
/* ===== Header hacker terminal feed + sizzle (v2) ===== */
.hdrTerm{ position:absolute; left:16px; bottom:12px; z-index:5; width:min(56%,520px); max-height:300px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none;
  font:600 13.5px/1.5 "JetBrains Mono", ui-monospace, monospace; mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to top, #000 70%, transparent); mask-image:linear-gradient(to top, #000 70%, transparent); }
.hdrTerm .feed{ display:flex; flex-direction:column; justify-content:flex-end; gap:1px; }
.hdrTerm .tln{ white-space:nowrap; overflow:hidden; opacity:0; transform:translateY(5px); animation:tlnIn .16s ease forwards;
  color:rgba(125,238,255,.9); text-shadow:0 0 7px rgba(86,230,255,.4); }
@keyframes tlnIn{ to{ opacity:1; transform:none; } }
.hdrTerm .tln.out{ opacity:0 !important; transition:opacity .55s ease; }
.hdrTerm .p{ color:#5BE6A0; } .hdrTerm .dim{ color:rgba(155,232,255,.6); } .hdrTerm .cmd{ color:#8FEFFF; }
.hdrTerm .val{ color:#EAFBFF; } .hdrTerm .ok{ color:#5BE6A0; } .hdrTerm .warn{ color:#FFC24A; }
.hdrTerm .hex{ color:rgba(120,236,255,.66); letter-spacing:.4px; }
.hdrTerm .grant{ color:#7BFFA8; font-weight:800; text-shadow:0 0 10px rgba(91,230,160,.6); }
.hdrTerm .prompt{ margin-top:1px; white-space:nowrap; color:#5BE6A0; }
.hdrTerm .prompt b{ color:#8FEFFF; font-weight:800; animation:cblink 1.05s steps(1) infinite; }
@keyframes cblink{ 50%{ opacity:0; } }
.hdrTerm.glx{ animation:hdrGlx .22s steps(2,end); }
.hdrTerm.glx .feed{ text-shadow:1.6px 0 rgba(255,40,90,.7), -1.6px 0 rgba(40,220,255,.7); }
@keyframes hdrGlx{ 0%{transform:none} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,0)} 100%{transform:none} }
.hdrStat{ position:absolute; left:40px; top:13px; z-index:5; display:flex; align-items:center; gap:7px; pointer-events:none;
  font:700 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing:1.6px; color:rgba(150,230,255,.72); text-transform:uppercase; mix-blend-mode:screen; }
.hdrStat .dot{ width:7px; height:7px; border-radius:50%; background:#5BE6A0; box-shadow:0 0 9px #5BE6A0; animation:statpulse 1.6s ease-in-out infinite; }
.hdrStat em{ color:#5BE6A0; font-style:normal; }
@keyframes statpulse{ 0%,100%{ opacity:.5; transform:scale(.82);} 50%{ opacity:1; transform:scale(1.15);} }
@media (prefers-reduced-motion: reduce){ .hdrTerm .tln{ animation:none; opacity:.92; transform:none; } .hdrStat .dot, .hdrTerm .prompt b{ animation:none; } }

/* FOOTER */
.siteFooter{ margin-top:22px; padding-top:16px; border-top:1px solid var(--stroke); text-align:center;
  color:var(--muted); font-family:var(--font-mono); font-size:12px; letter-spacing:.5px; }
.siteFooter b{ color:var(--text); }

/* CLAIM modal */
.claimBox{ min-width:auto; width:min(440px,94vw); }
.claimPrize{ font-size:15px; margin:6px 0 12px; }
.claimHint{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.claimInput{ width:100%; padding:12px 14px; background:rgba(0,0,0,.35); border:1px solid var(--stroke2); color:var(--text); font-family:var(--font-mono); font-size:14px; letter-spacing:.5px; text-align:center; margin-top:10px; border-radius:2px; }
.claimInput:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(86,230,255,.25); }
.claimErr{ min-height:18px; color:#ff6a6a; font-size:12px; font-weight:700; margin-top:8px; }
.claimStatus{ min-height:18px; font-size:12px; font-weight:700; margin-top:8px; color:var(--muted); }
.claimStatus .on{ color:#46D6A0; }
.claimStatus .off{ color:var(--muted); }
.claimStatus .no{ color:#ff6a6a; }
.claimStatus .ok{ color:#46D6A0; }
.claimBtns{ display:flex; gap:10px; justify-content:center; margin-top:6px; }
.claimNote{ margin-top:14px; font-size:11px; color:var(--muted); }
.claimBtns button:disabled{ opacity:.5; cursor:wait; }

/* ====== Per-box KEYS (parduotuvės kortelėse) ====== */
.boxCard-foot.keyFoot{ margin-top:6px; }
.boxCard-price.keyPrice{ color:#cfe0ff; font-size:12px; font-weight:700; }
/* buy-key mygtukas = vienodo dydžio kaip „Pirkti dėžę", bet ŠVIESIAI MĖLYNAS */
.boxCard-foot .boxBuy{ min-width:104px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.boxBuy.keyBuy{ background:linear-gradient(180deg,#a9d8ff,#6cb6f0); color:#06243d; border:1px solid rgba(150,200,255,.7); }
.boxBuy.keyBuy:hover{ background:linear-gradient(180deg,#c6e6ff,#7cc0f5); }
.boxCard-own b{ color:var(--text); }

/* Mystery Box - premium violetinis akcentas */
.boxCard.mystery{ background:radial-gradient(120% 90% at 50% 0%, #241a38, #0d0a16 85%); border-color:rgba(176,107,255,.35); }
.boxCard.mystery .boxCard-name{ color:#d9c2ff; }
/* mystery active border/shadow now handled per-box via --ba */
.boxCard.mystery .boxTag{ background:#b06bff; color:#fff; }

/* Inventoriaus „užsakyta, bet nepatikrinta" žyma (backend nepasiekiamas) */
.delivered.pend{ color:var(--accent); border-color:rgba(255,210,74,.4); }

/* ============================================================
   HUD SUVIENODINIMAS - užbaigimas (2026-07-27)
   Tęsia migraciją, pradėtą ties „aštrūs HUD kampai" (eil. 370-375).
   Blokas tik papildo - jį ištrynus grįžta ankstesnis vaizdas.
   ============================================================ */

:root{ --stattrak:#e6a23c; }   /* CS:GO StatTrak oranžinė - turi vardą, ne atsitiktinis auksas */

/* --- 1. likę kampai -> tokenas ------------------------------ */
/* Apvalūs palikti sąmoningai: .dot, .rcChip .dot, .particle,
   .revealGlow, .hdrStat .dot, .floatMarker - tai apskritimai/taškai. */
.logo, .badge-pro, .boxTag, .box3d, .csItem-srv, .rcChip,
.historyItem .hSt, .stBadge, .wbTrack, .wbFill, .floatBar,
.floatMeta .mono{ border-radius: var(--radius); }
.history::-webkit-scrollbar-track,
.history::-webkit-scrollbar-thumb{ border-radius: var(--radius); }

/* --- 2. nukirptas kampas vidiniuose skyduose ----------------- */
/* .card ir .box3d SĄMONINGAI praleisti: jų išorinis šešėlis
   (.box3d - spalvotas --baSoft švytėjimas) yra dizaino dalis, o
   clip-path jį nukirstų. Atstatyti per filter:drop-shadow būtų
   galima, bet tada roller'io animacija perpieštų šešėlį kas kadrą.
   .rollerWrap šešėlis yra inset, todėl nenukenčia. */
.rollerWrap, .result, .infoBox{ clip-path: var(--clip-panel); }

/* --- 3. StatTrak spalva per tokeną --------------------------- */
.stTag, .historyItem .hSt, .stBadge{ color: var(--stattrak); }

/* --- 4. UI ikonos: vienspalvės linijos, paveldi currentColor -- */
/* icons/*.svg yra spalvota daiktų grafika - netinka mygtukams, todėl
   chrome ikonos čia yra mask'ai ir atkartoja pagrindinio puslapio
   linijinį stilių (stroke 2, apvalios galūnės). */
.ico{ display:inline-block; width:1em; height:1em; vertical-align:-.13em;
  background: currentColor; flex:0 0 auto;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain; }

/* raktas - horizontalus, su dviem dantimis. Įstrižas variantas su apskritimu
   atrodo kaip padidinimo stiklas, todėl netinka. */
.ico-key{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Cpath d='M11 12h10'/%3E%3Cpath d='M17 12v3.6'/%3E%3Cpath d='M20.6 12v2.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Cpath d='M11 12h10'/%3E%3Cpath d='M17 12v3.6'/%3E%3Cpath d='M20.6 12v2.6'/%3E%3C/svg%3E"); }

.ico-sound{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.4 8.6a5 5 0 0 1 0 6.8'/%3E%3Cpath d='M18.4 5.6a9 9 0 0 1 0 12.8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.4 8.6a5 5 0 0 1 0 6.8'/%3E%3Cpath d='M18.4 5.6a9 9 0 0 1 0 12.8'/%3E%3C/svg%3E"); }

.ico-mute{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M16 9.5 21 14.5'/%3E%3Cpath d='M21 9.5 16 14.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M16 9.5 21 14.5'/%3E%3Cpath d='M21 9.5 16 14.5'/%3E%3C/svg%3E"); }

.ico-bag{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13H5.7z'/%3E%3Cpath d='M8.8 7.5V5.8a3.2 3.2 0 0 1 6.4 0v1.7'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7.5h15l-1.2 13H5.7z'/%3E%3Cpath d='M8.8 7.5V5.8a3.2 3.2 0 0 1 6.4 0v1.7'/%3E%3C/svg%3E"); }

.ico-redo{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.9-6.4'/%3E%3Cpath d='M20.5 3.5V9h-5.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.9-6.4'/%3E%3Cpath d='M20.5 3.5V9h-5.5'/%3E%3C/svg%3E"); }

.ico-undo{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.9-6.4'/%3E%3Cpath d='M3.5 3.5V9H9'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.9-6.4'/%3E%3Cpath d='M3.5 3.5V9H9'/%3E%3C/svg%3E"); }

/* mygtukuose ikona + tekstas per flex gap - veikia ir prieš, ir po tekstu */
#btnOpen, #btnSound, #btnKeep, #btnRevealAgain, #btnReset, #btnClaimAll{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em; }
.emptyInv .ico{ opacity:.55; }

/* būsenos taškas (prisijungęs / neprisijungęs) - spalvą paveldi iš .on/.off */
.sdot{ display:inline-block; width:7px; height:7px; border-radius:50%;
  background: currentColor; margin-right:.45em; vertical-align:.06em; }

/* --- 5. fokusas ten, kur jį nukerpa clip-path --------------------
   Bendra taisyklė (325 eil.) naudoja outline su outline-offset:2px -
   mygtukams ji veikia gerai ir lieka. Bet .boxCard ir .siteNav turi
   clip-path, o jis nukerpa VISKĄ, kas piešiama už elemento ribų, todėl
   ten žiedas tiesiog nematomas. Šiems dviem - vidinis žiedas. */
.boxCard:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cyan), inset 0 0 14px -2px var(--cyan);
  border-color: var(--cyan);
}
.siteNav :focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cyan);
}

/* --- 6. </> ženklas prie logotipo (2026-07-29) ------------------
   Toks pat ženklas kaip pagrindinio puslapio viršuje ir favicon'e. */
.navLogo{ display: inline-flex; align-items: center; gap: 9px; }
.navLogo .brand__mark{
  width: 24px; height: 24px; flex: 0 0 auto;
  border: 1px solid var(--stroke2);
  border-radius: 6px;
}


/* ==========================================================================
   Prisijungimo vartai                                      (pridėta 2026-08-15)
   Buvo inline stiliai su 18px apvalinimu, emoji ir auksiniu mygtuku. Auksas
   cia = valiuta (--accent), tad mygtukui naudojam --cyan, kuris :root aprasytas
   kaip interaktyvus akcentas. Formos - is sio failo tokenu, style.css
   neuzkraunamas.
   ========================================================================== */
.ub-gate{
  position:fixed; inset:0; z-index:2200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:color-mix(in srgb, var(--void) 74%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.ub-gate:focus{ outline:none; }
.ub-gate__box{
  max-width:430px; width:100%; text-align:center;
  padding:34px 30px;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--stroke2);
  clip-path:var(--clip-panel);
  color:var(--text);
  font-family:var(--font-body);
}
.ub-gate__icon{ width:34px; height:34px; display:block; margin:0 auto 14px; color:var(--cyan); }
.ub-gate__title{
  font-family:var(--font-display); font-weight:800; font-size:1.32rem;
  letter-spacing:.06em; margin:0 0 8px; color:var(--text);
}
.ub-gate__text{ font-size:.92rem; color:var(--muted); line-height:1.55; margin:0 0 22px; }
.ub-gate__cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; min-height:44px;
  font-family:var(--font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  color:var(--cyan); border:1px solid var(--cyan);
  background:linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--cyan) 10%, transparent) 50%) 0 0/200% 100%;
  transition:background-position 300ms cubic-bezier(.16,1,.3,1), color 180ms, box-shadow 180ms;
}
.ub-gate__cta:hover{
  background-position:-100% 0; color:#eafcff;
  box-shadow:0 0 22px -6px var(--cyan);
}
.ub-gate__links{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.ub-gate__link{ color:var(--cyan); font-size:.82rem; text-decoration:none; }
.ub-gate__link:hover{ text-decoration:underline; }
.ub-gate__link--muted{ color:var(--muted); font-size:.74rem; }

/* ===== Dezes atidarymo uzraktas =====
   Kol deze atidaroma, kitos dezes rinktis negalima: selectBox() perpiestu
   daiktu juosta ir animacija nutruktu. Rasoma failo GALE samoningai - virsuje
   (433, 475 eil.) yra veliau einanciu bloku, kurie kitaip perrasytu sias
   taisykles. Aktyvi korta lieka ryski, kad matytusi, kuri deze atidaroma.
   pointer-events NEISJUNGIAM: paspaudimas turi ivykti, kad pasirodytu
   paaiskinantis pranesimas, o ne tyla. */
.boxStore.isLocked .boxCard{ cursor:not-allowed; }
.boxStore.isLocked .boxCard:not(.active){ opacity:.38; filter:saturate(.45); }
.boxStore.isLocked .boxCard:not(.active):hover{ transform:none; border-color:var(--baFaint, var(--stroke2)); box-shadow:none; }

/* ===== Parduotuves korta: maketas "A" (2026-08-22) =====
   Pagrindine mintis: KAINA ANT MYGTUKO. Anksciau kaina uzeme tris eilutes
   (uzrasas / skaicius / mygtukas) ir taip du kartus - is viso ~150px. Dabar
   dvi mygtuku juostos ~40px, tad deze gali buti gerokai didesne (148px vietoj
   90px), o korta vis tiek auga tik ~60px.
   Nukirstas virsutinis desinys kampas jau ateina is .boxCard clip-path, o
   mygtuku astrius kampus duoda "astrus HUD kampai" blokas auksciau. */
.boxCard-art{ height:148px; margin-bottom:9px; }
.boxCard-glow{ width:178px; height:126px; opacity:.32; }
.boxCard-name{ font-size:17px; }
.boxCard-sub{ font-size:11.5px; color:#A9BAD0; letter-spacing:.3px; }
.boxCard-badges{ margin:8px 0 0; }
/* turimas kiekis - vienintele BUSENA kortoje, tad jai skiriama sava juosta */
.boxCard-own{ font-size:12px; color:#A9BAD0; text-align:center; margin-top:10px;
  padding:7px 0; border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08); }
.boxCard-own b{ color:var(--ba, var(--text)); font-weight:800; }
.boxCard-buys{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.boxCard-buys .boxBuy{ display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; padding:0 8px; font-size:15px; letter-spacing:.2px; text-transform:none; }
.boxCard-buys .ico{ width:16px; height:16px; }
/* deze - kontureline ikona ant mygtuko, kad butu aisku, KAS perkama */
.ico-case{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M10 11v4h4v-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M10 11v4h4v-4'/%3E%3C/svg%3E"); }