/* ValGacha. Light palette on :root; the dark palette (default on dark devices) below. */
:root{
  --bg:#F3F4F8; --surface:#FFFFFF; --surface-2:#ECEEF4; --ink:#12121A; --muted:#5D6074; --line:#DFE2EA;
  --rad:#0E9F84; --rad-glow:rgba(14,159,132,.22); --shadow:0 1px 2px rgba(18,18,26,.05),0 6px 20px -12px rgba(18,18,26,.12);
  --t0:#3F86D0; --t1:#00826F; --t2:#C23F7C; --t3:#D9732F; --t4:#B8920A;
  --t0-bg:#5A9FE2; --t1-bg:#009587; --t2-bg:#D1548D; --t3-bg:#F5955B; --t4-bg:#FAD663;
  --gold:#C89A1B;
  --icon-filter:brightness(0) opacity(.72); /* weapon icons from valorant-api are white */
  --brand:linear-gradient(90deg,#14B896,#0B7A66);
  --r-sm:8px; --r:12px; --r-lg:18px;
  --display:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B10; --surface:#13131B; --surface-2:#1B1B25; --ink:#EDEDF3; --muted:#9C9CB2; --line:#25252F;
    --rad:#6FF0CF; --rad-glow:rgba(111,240,207,.22); --shadow:0 1px 0 rgba(255,255,255,.03) inset;
    --t0:#7DB6EE; --t1:#2FC2B1; --t2:#EA7FB0; --t3:#F7A97A; --t4:#FAD663; --gold:#FAD663; --icon-filter:none;
    --brand:linear-gradient(90deg,#8CF7DB,#2FC2B1);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B10; --surface:#13131B; --surface-2:#1B1B25; --ink:#EDEDF3; --muted:#9C9CB2; --line:#25252F;
  --rad:#6FF0CF; --rad-glow:rgba(111,240,207,.22); --shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --t0:#7DB6EE; --t1:#2FC2B1; --t2:#EA7FB0; --t3:#F7A97A; --t4:#FAD663; --gold:#FAD663; --icon-filter:none;
  --brand:linear-gradient(90deg,#8CF7DB,#2FC2B1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);min-height:100vh}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rad);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--display);letter-spacing:.02em;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo svg{width:28px;height:28px}
nav.tabs{display:flex;gap:4px;margin-right:auto}
nav.tabs a{font:600 15px/1 var(--display);text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:2px;position:relative}
nav.tabs a[aria-current="page"]{color:var(--ink)}
nav.tabs a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-13px;height:3px;background:var(--rad)}
nav.tabs a:hover{color:var(--ink)}
.wallet{display:flex;gap:16px;align-items:center}
.wallet .item{display:flex;align-items:center;gap:7px;font:600 15px/1 var(--display);white-space:nowrap}
.wallet .item small{font:500 12px/1 var(--body);color:var(--muted)}
.wallet svg{width:18px;height:18px;flex:none}
.ico-rad{color:var(--rad)}

/* ---------- generic ---------- */
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0}
h2{font-size:24px;font-weight:700}
h3{font-size:18px;font-weight:600}
.muted{color:var(--muted)}
.btn{--c:var(--ink);display:inline-flex;text-decoration:none;white-space:nowrap;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:700 16px/1 var(--display);letter-spacing:.02em;padding:14px 22px;background:var(--ink);color:var(--bg);
  border-radius:999px;transition:filter .15s}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.rad{background:var(--rad);color:#0B1A16}
.btn.gold{background:var(--t4-bg);color:#2A2003}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn.big{padding:18px 30px;font-size:19px}
select,input[type=search],input[type=text],textarea{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;min-height:42px}
textarea{width:100%;min-height:110px;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.panel{background:var(--surface);border:1px solid var(--line);padding:22px;box-shadow:var(--shadow);border-radius:var(--r-lg)}
.stack>*+*{margin-top:12px}
main.wrap{padding-top:28px;padding-bottom:64px}
section+section{margin-top:44px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:48px;align-items:center;padding:24px 0 8px}
.hero h1{font-size:clamp(32px,4.4vw,54px);font-weight:700;letter-spacing:-.01em;max-width:14ch}
.hero p.lead{font-size:18px;color:var(--muted);max-width:52ch;margin:14px 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.status-line{font:500 15px/1.4 var(--body);color:var(--muted)}
.status-line b{color:var(--ink);font-weight:600}
.pity{margin-top:28px;max-width:440px}
.pity-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.pity-top b{font-family:var(--display)}
.segs{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.segs i{height:8px;background:var(--surface-2);transform:skewX(-20deg)}
.segs i.on{background:var(--gold)}
.segs i.next{background:repeating-linear-gradient(90deg,var(--gold) 0 3px,transparent 3px 6px)}

/* pack object */
.pack{position:relative;width:100%;max-width:300px;aspect-ratio:5/7;margin:0 auto;color:#fff;
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
  background:#1A1C2C;isolation:isolate;overflow:hidden}
.pack::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 0 38%,var(--t0-bg) 38% 44%,var(--t1-bg) 44% 50%,var(--t2-bg) 50% 56%,var(--t3-bg) 56% 62%,var(--t4-bg) 62% 68%,transparent 68%)}
.pack::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px)}
.pack .pk-top{position:absolute;top:22px;left:22px;right:40px;font:700 13px/1.2 var(--display);letter-spacing:.06em;opacity:.8}
.pack .pk-top,.pack .pk-name{text-shadow:0 2px 10px rgba(0,0,0,.7)}
.pack .pk-name{position:absolute;left:22px;right:22px;bottom:26px;font:700 30px/1 var(--display)}
.pack .pk-name small{display:block;font:500 15px/1.3 var(--body);opacity:.75;margin-top:8px}
.pack.gold{background:#2B220A}
.pack.gold::before{background:linear-gradient(115deg,transparent 0 30%,#FAD663 30% 50%,#F5955B 50% 58%,#FAD663 58% 68%,transparent 68%)}
.pack.elite{background:#2A1222}
.pack.elite::before{background:linear-gradient(115deg,transparent 0 38%,var(--t2-bg) 38% 52%,var(--t3-bg) 52% 62%,var(--t4-bg) 62% 68%,transparent 68%)}
.pack.arsenal{background:#0F2321}
.pack.arsenal::before{background:linear-gradient(115deg,transparent 0 38%,#6FF0CF 38% 50%,#1F9C85 50% 62%,transparent 62%)}
.pack.mini{max-width:120px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.pack.mini .pk-name{font-size:15px;left:12px;bottom:12px}
.pack.mini .pk-top{display:none}
.pack-count{position:absolute;top:18px;right:18px;font:700 14px/1 var(--display);background:rgba(0,0,0,.45);padding:6px 9px}

/* shop */
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.offer{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:start}
.offer h3{margin-bottom:4px}
.offer p{margin:0 0 14px;color:var(--muted);font-size:15px}
.offer .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.price{display:inline-flex;align-items:center;gap:5px}
.price svg{width:16px;height:16px}

/* odds table */
.odds{width:100%;border-collapse:collapse;font-size:15px}
.odds th,.odds td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.odds th{font:600 13px/1.2 var(--display);color:var(--muted)}
.odds td.num{font-variant-numeric:tabular-nums}
.tier-name{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.tier-name img{width:20px;height:20px}
.tdot{width:12px;height:12px;transform:rotate(45deg);display:inline-block}

/* strip of recent */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,200px);gap:12px;overflow-x:auto;padding-bottom:8px}

/* ---------- card ---------- */
.card{--tc:var(--t0);--tb:var(--t0-bg);position:relative;display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:var(--surface);border:0;padding:0;min-width:0;width:100%;border-radius:var(--r);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tb)}
.card::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;pointer-events:none}
.card.t1{--tc:var(--t1);--tb:var(--t1-bg)} .card.t2{--tc:var(--t2);--tb:var(--t2-bg)}
.card.t3{--tc:var(--t3);--tb:var(--t3-bg)} .card.t4{--tc:var(--t4);--tb:var(--t4-bg)}
.card-art{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:14px 14px 10px 18px;
  background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--tb) 26%,transparent),transparent 70%),var(--surface-2)}
.card-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.card-art .noimg{font:600 12px/1.3 var(--display);color:var(--muted);text-align:center}
.card-body{padding:10px 12px 12px 16px;display:grid;gap:2px}
.card-name{font:600 15px/1.2 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-meta{display:flex;justify-content:space-between;gap:6px;font-size:13px;color:var(--muted)}
.card-meta .tn{color:var(--tc);font-weight:600}
.card .count{position:absolute;top:8px;left:12px;font:700 12px/1 var(--display);background:var(--ink);color:var(--bg);padding:4px 6px}
.card.locked .card-art{background:var(--surface-2)}
.card.locked .card-art img{filter:brightness(0);opacity:.22}
.card.locked .card-name{color:var(--muted)}
.card:hover::after{border-color:var(--tb)}
.tag-new{position:absolute;top:8px;left:12px;font:700 12px/1 var(--display);background:var(--rad);color:#0B1A16;padding:5px 7px;z-index:2}
.tag-dupe{position:absolute;top:8px;left:12px;font:600 12px/1 var(--display);background:rgba(0,0,0,.6);color:#fff;padding:5px 7px;z-index:2;display:flex;gap:4px;align-items:center}
.tag-dupe svg{width:12px;height:12px;color:#6FF0CF}

/* ---------- collection ---------- */
.col-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:22px}
.big-progress{font:700 44px/1 var(--display)}
.big-progress small{font:500 18px/1 var(--body);color:var(--muted);margin-left:6px}
.bar{height:8px;background:var(--surface-2);position:relative;overflow:hidden}
.bar>i{position:absolute;inset:0 auto 0 0;background:var(--rad)}
.tier-progress{display:flex;gap:18px;flex-wrap:wrap}
.tier-progress div{font-size:14px;color:var(--muted)}
.tier-progress b{display:block;font:700 18px/1.2 var(--display)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:5}
.filters input[type=search]{flex:1 1 220px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:transparent;padding:7px 12px;cursor:pointer;font:600 13px/1 var(--display);display:inline-flex;align-items:center;gap:6px;border-radius:999px}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.empty{padding:48px 20px;text-align:center;color:var(--muted)}
.result-count{font-size:14px;color:var(--muted);margin:-6px 0 14px}

/* ---------- profile ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats div{background:var(--surface);padding:18px 20px}
.stats b{display:block;font:700 30px/1.1 var(--display)}
.stats span{font-size:14px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.prow{display:grid;grid-template-columns:110px 1fr 76px;gap:12px;align-items:center;font-size:14px;padding:6px 0}
.prow .n{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.hist{list-style:none;margin:0;padding:0 4px 0 0;max-height:560px;overflow-y:auto}
.hist .noimg{font-size:10px;line-height:1.1;display:block;color:var(--muted)}
.hist li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.hist img{width:64px;height:32px;object-fit:contain}
.hist .when{font-size:13px;color:var(--muted)}

/* ---------- dialogs ---------- */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none}
dialog::backdrop{background:rgba(8,9,16,.78)}
.modal{background:var(--surface);width:min(880px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;position:relative;border:1px solid var(--line)}
.modal .x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:var(--surface-2);cursor:pointer;font-size:22px;line-height:1;z-index:3}
.detail-art{aspect-ratio:21/9;display:grid;place-items:center;padding:30px;
  background:radial-gradient(90% 100% at 50% 50%,color-mix(in srgb,var(--tb) 34%,transparent),transparent 75%),var(--surface-2)}
.detail-art img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))}
.detail-art.locked img{filter:brightness(0);opacity:.25}
.detail-body{padding:22px 26px 26px;display:grid;gap:18px}
.detail-title h2{font-size:30px}
.detail-title .sub{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:15px;color:var(--muted)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:44px;height:44px;border:2px solid var(--line);padding:0;cursor:pointer;background:var(--surface-2) center/cover}
.swatch[aria-pressed="true"]{border-color:var(--ink)}
.swatch:disabled{cursor:not-allowed;opacity:.45}
.theme-list{display:flex;flex-wrap:wrap;gap:6px}
.theme-list button{border:1px solid var(--line);background:transparent;padding:6px 10px;font-size:13px;cursor:pointer;border-radius:2px}
.theme-list button.own{border-color:var(--rad);font-weight:600}
.theme-list button.cur{background:var(--surface-2)}
video{width:100%;background:#000;display:block}
.callout{background:var(--surface-2);padding:14px 16px;font-size:15px}

/* opening overlay */
#opener::backdrop{background:radial-gradient(circle at 50% 40%,rgba(30,32,56,.94),rgba(6,7,12,.97))}
.open-stage{width:min(1120px,calc(100vw - 24px));min-height:min(640px,calc(100dvh - 24px));display:grid;place-items:center;color:#ECEAF4;position:relative;padding:24px 0}
.open-pack{width:min(280px,64vw);display:grid;gap:22px;justify-items:center}
.open-pack .pack{cursor:pointer}
.shake{animation:shake .5s ease-in both}
@keyframes shake{0%{transform:none}20%{transform:rotate(-3deg) scale(1.02)}40%{transform:rotate(3deg) scale(1.04)}60%{transform:rotate(-2deg) scale(1.06)}100%{transform:scale(1.25);opacity:0;filter:brightness(2.2)}}
.deal{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,190px));gap:16px;justify-content:center;width:100%}
.flip{perspective:1200px;cursor:pointer;animation:dealin .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms);background:none;border:0;padding:0;color:inherit;text-align:left}
@keyframes dealin{from{opacity:0;transform:translateY(40px) rotate(-6deg)}}
.flip-inner{position:relative;transition:transform .55s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.flip.on .flip-inner{transform:rotateY(180deg)}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{position:absolute;inset:0;transform:rotateY(180deg)}
.face.front .card-art{flex:1;aspect-ratio:auto}
.face.front .card{height:100%;background:#1B1D2E;color:#ECEAF4}
.face.front .card::after{border-color:#30334B}
.face.front .card-art{background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--tb) 40%,transparent),transparent 70%),#25283D}
.face.front .card-meta{color:#A0A3BD}
.face.back{height:100%;min-height:0}
.cardback{aspect-ratio:3/3.6;background:#1A1C2C;display:grid;place-items:center;position:relative;
  border-radius:var(--r);
  background-image:repeating-linear-gradient(115deg,rgba(111,240,207,.08) 0 2px,transparent 2px 10px)}
.cardback svg{width:42%;color:#6FF0CF;opacity:.85}
.flip.glow-3 .face.front,.flip.glow-4 .face.front{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--tb) 80%,transparent))}
.flip.t3{--tb:var(--t3-bg)} .flip.t4{--tb:var(--t4-bg)} .flip.t2{--tb:var(--t2-bg)}
.burst{position:absolute;inset:-30%;pointer-events:none;opacity:0;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 10deg,var(--tb) 10deg 14deg,transparent 14deg 40deg,var(--tb) 40deg 43deg,transparent 43deg 70deg,var(--tb) 70deg 74deg,transparent 74deg 110deg,var(--tb) 110deg 113deg,transparent 113deg 150deg,var(--tb) 150deg 154deg,transparent 154deg 200deg,var(--tb) 200deg 203deg,transparent 203deg 250deg,var(--tb) 250deg 254deg,transparent 254deg 300deg,var(--tb) 300deg 303deg,transparent 303deg 360deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%)}
.flip.on.glow-3 .burst,.flip.on.glow-4 .burst{animation:burst 1.4s ease-out .2s both}
@keyframes burst{0%{opacity:0;transform:scale(.4) rotate(0)}30%{opacity:.9}100%{opacity:0;transform:scale(1.2) rotate(60deg)}}
.open-foot{display:flex;flex-direction:column;gap:14px;align-items:center;margin-top:26px;text-align:center}
.open-foot .summary{font:600 16px/1.4 var(--display)}
.open-foot .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.open-title{font:700 22px/1.2 var(--display);text-align:center;margin-bottom:22px}
.open-title.gold{color:#FAD663}
.btn.light{background:#ECEAF4;color:#12131F}
.btn.ghost.light{background:transparent;color:#ECEAF4;box-shadow:inset 0 0 0 1.5px #4A4E6E}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;font-weight:600;z-index:50;max-width:calc(100vw - 32px)}

body>footer{border-top:1px solid var(--line);padding:24px 0 40px;font-size:13px;color:var(--muted)}
body>footer p{margin:0;max-width:80ch}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:28px}
  .pack.hero-pack{max-width:220px}
  .two{grid-template-columns:1fr}
  .col-head{grid-template-columns:1fr}
  .deal{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media (max-width:640px){
  .top .wrap{height:auto;flex-wrap:wrap;gap:6px 14px;padding-top:10px;padding-bottom:6px}
  nav.tabs{order:3;width:100%;margin-right:0}
  nav.tabs a[aria-current="page"]::after{bottom:-7px}
  .wallet{margin-left:auto}
  .filters{position:static}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .offer{grid-template-columns:80px 1fr}
  .deal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-art{aspect-ratio:16/9;padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
}

/* ---------- v0.2 additions ---------- */
.account{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:600 14px/1 var(--display)}
.account img{width:30px;height:30px;border-radius:50%;background:var(--surface-2)}
.btn.discord{background:#5865F2;color:#fff}
.btn.discord svg{width:20px;height:20px}
.guest-note{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.guest-note p{margin:0;max-width:62ch;color:var(--muted);font-size:15px}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty select{min-height:36px;padding:4px 8px}
.deal.many{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:calc(100dvh - 260px);overflow-y:auto;padding:6px 6px 30px}
.deal.many .card-name{font-size:13px}
.deal.many .card-body{padding:8px 10px 10px 13px}
.open-err{color:#F7A97A;font-weight:600}
.open-sub{text-align:center;color:#A0A3BD;margin:-14px 0 18px}
.danger{color:var(--t2)}
@media (max-width:640px){
  .account span{display:none}
  .deal.many{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= v0.3 ================= */
.small{font-size:13px}
.page-title{font-size:clamp(26px,3vw,34px)}
.row-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.btn.danger-btn{background:var(--t2-bg);color:#fff}
.btn.ghost.danger{color:var(--t2)}
nav.tabs{overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nbadge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--t2-bg);color:#fff;font:700 11px/1 var(--display);vertical-align:middle}
.top .wrap{gap:16px}
.wallet{gap:12px}

/* stopwatch timer */
.hero-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.hero-actions{display:grid;gap:12px}
.status-line{margin:0}
.ptimer{position:relative;width:128px;height:132px;flex:none}
.ptimer svg{width:100%;height:100%;overflow:visible}
.pt-crown{fill:var(--muted)}
.pt-track{fill:var(--surface);stroke:var(--surface-2);stroke-width:9}
.pt-ticks line{stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.55}
.pt-prog{fill:none;stroke:var(--rad);stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px var(--rad-glow))}
.pt-hand{transform-origin:60px 68px;transition:transform 1s linear}
.pt-hand circle{fill:var(--ink)}
.pt-center{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);display:grid;justify-items:center;margin-top:8px}
.pt-center b{font:700 26px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pt-center span{font-size:12px;color:var(--muted);margin-top:4px}
.ptimer.full .pt-prog{stroke:var(--gold);animation:ptpulse 2s ease-in-out infinite}
.ptimer.full .pt-hand{opacity:0}
@keyframes ptpulse{50%{opacity:.55}}

/* card footer (rare feed) */
.card-foot{display:flex;justify-content:space-between;gap:6px;padding:0 12px 10px 16px;font-size:12px;color:var(--muted)}
.cf-user{display:inline-flex;gap:5px;align-items:center;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cf-user:hover{text-decoration:underline}
.avatar{border-radius:50%;object-fit:cover;background:var(--surface-2);flex:none}
.avatar-guest{display:inline-block;width:72px;height:72px;border:2px dashed var(--line)}

/* segmented control */
.seg{display:inline-flex;border:1.5px solid var(--line);padding:3px;gap:3px;background:var(--surface)}
.seg button{border:0;background:transparent;padding:8px 14px;cursor:pointer;font:600 14px/1 var(--display);color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.seg-n{opacity:.7;font-weight:500}

/* badges */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.badge-tile{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:14px}
.badge-tile.locked .badge-info b{color:var(--muted)}
.badge-info{display:grid;gap:3px;min-width:0}
.badge-info b{font:600 16px/1.2 var(--display)}
.badge-info .muted{font-size:13px}
.badge-bar{height:5px;background:var(--surface-2);margin-top:5px;position:relative}
.badge-bar i{position:absolute;inset:0 auto 0 0;background:var(--rad)}
.badge-state{font-size:12px;color:var(--muted)}
.badge-icon{--c:#8A8FA8;position:relative;width:58px;height:58px;display:grid;place-items:center;color:#fff;background:var(--c);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.badge-icon svg{width:28px;height:28px}
.badge-icon i{position:absolute;bottom:6px;font:700 10px/1 var(--display);font-style:normal;letter-spacing:.05em;opacity:.95}
.badge-icon.lv0{--c:var(--surface-2);color:var(--muted)}
.badge-icon.lv1{--c:linear-gradient(160deg,#D49A6A,#8C5A33)}
.badge-icon.lv2{--c:linear-gradient(160deg,#D7DEE8,#7E8A9A)}
.badge-icon.lv3{--c:linear-gradient(160deg,#F7D96B,#B8860B)}
.badge-icon.lv4{--c:linear-gradient(160deg,#9CFBE3,#1E9C84);color:#06221C}
.badge-icon.gem:not(.lv0) svg{color:var(--gem);filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.badge-chip{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);padding:6px 14px 6px 6px;font:600 14px/1.2 var(--display)}
.badge-chip .badge-icon{width:40px;height:40px}
.badge-chip .badge-icon svg{width:19px;height:19px}
.badge-chip .badge-icon i{bottom:3px;font-size:8px}

/* profile header */
.profile-head{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-bottom:22px}
.profile-head h1{font-size:clamp(28px,3vw,36px)}
.ph-main{min-width:0}
.profile-score{text-align:right;display:grid;justify-items:end}
.profile-score b{font:700 40px/1 var(--display);color:var(--rad)}
.profile-score span{font-size:13px;color:var(--muted)}
.profile-score em{font-style:normal;font:600 15px/1.3 var(--display);margin-top:6px}
.clan-tag{font:700 14px/1 var(--display);color:var(--rad);text-decoration:none;letter-spacing:.03em}
.clan-tag.big{font-size:20px}
.clan-tag:hover{text-decoration:underline}
.clan-emblem{width:72px;height:72px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:700 18px/1 var(--display);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.clan-head{display:flex;gap:12px;align-items:baseline;font:700 20px/1.2 var(--display)}

/* people lists */
.user-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600;min-width:0}
.user-link:hover span{text-decoration:underline}
.user-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people{list-style:none;margin:0;padding:0}
.person{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.person .muted{font-size:13px}
.person .pts{margin-left:auto;font:600 14px/1 var(--display);font-variant-numeric:tabular-nums}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form input{flex:1 1 180px;min-width:0}
.field{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.field input{color:var(--ink)}
.check{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
.invite{display:grid;gap:6px}
.invite input{font:600 16px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em}
.stack h3{margin-top:8px}
.login-prompt{max-width:560px;margin:30px auto;text-align:center;display:grid;gap:12px;justify-items:center}

/* ranking */
.table-wrap{padding:4px 12px;overflow-x:auto}
table.rank{width:100%;border-collapse:collapse}
table.rank th,table.rank td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left}
table.rank th{font:600 13px/1.2 var(--display);color:var(--muted)}
table.rank .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
table.rank .pos{width:64px;font:700 16px/1 var(--display);color:var(--muted)}
table.rank tr.top1 .pos{color:var(--t4)} table.rank tr.top2 .pos{color:#AEB8C6} table.rank tr.top3 .pos{color:#D49A6A}
table.rank tr.me{background:color-mix(in srgb,var(--rad) 12%,transparent)}
.rk-me{margin-bottom:16px}

/* trades */
.trade{background:var(--surface);border:1px solid var(--line);padding:16px 18px;margin-bottom:12px}
.trade.closed{opacity:.85}
.trade header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.trade-who{display:inline-flex;gap:6px;align-items:center}
.status-chip{margin-left:auto;font:600 12px/1 var(--display);padding:5px 8px;background:var(--surface-2)}
.status-chip.s-accepted{background:color-mix(in srgb,var(--rad) 25%,transparent)}
.status-chip.s-failed,.status-chip.s-declined{background:color-mix(in srgb,var(--t2-bg) 22%,transparent)}
.trade-sides{display:grid;grid-template-columns:1fr 40px 1fr;gap:12px;align-items:start}
.trade-sides h4{margin:0 0 8px;font:600 13px/1 var(--display);color:var(--muted)}
.trade-arrow{align-self:center;color:var(--muted)}
.trade-arrow svg{width:28px;height:28px}
.trade footer{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.delta{font:700 15px/1 var(--display)}
.delta.up{color:var(--rad)} .delta.down{color:var(--t2)}
.ti{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;padding:5px 0}
.ti-art{display:grid;place-items:center;height:34px;background:var(--surface-2);border-left:3px solid var(--tb,var(--line))}
.ti.t0,.pick.t0{--tb:var(--t0-bg)} .ti.t1,.pick.t1{--tb:var(--t1-bg)} .ti.t2,.pick.t2{--tb:var(--t2-bg)} .ti.t3,.pick.t3{--tb:var(--t3-bg)} .ti.t4,.pick.t4{--tb:var(--t4-bg)}
.ti-art img{max-width:100%;max-height:30px;object-fit:contain}
.ti-art .noimg{font-size:9px;color:var(--muted)}
.ti-txt{display:grid;min-width:0;font-size:13px}
.ti-txt b{font:600 14px/1.25 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-txt span{color:var(--muted)}

/* composer */
.cp-target{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cp-target label{font:600 15px/1 var(--display)}
.composer{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.cp-side{display:grid;gap:12px;padding:16px}
.cp-selected{min-height:48px;display:grid;gap:2px}
.sel-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border-bottom:1px solid var(--line)}
.sel-row .warn{grid-column:1/-1;font-size:12px;color:var(--t3);margin:-4px 0 6px 74px}
.stepper{display:inline-flex;align-items:center;gap:4px}
.stepper button{width:28px;height:28px;border:1.5px solid var(--line);background:transparent;cursor:pointer;font-size:16px;line-height:1}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper b{min-width:22px;text-align:center;font-family:var(--display)}
.cp-picker{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.cp-picker-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;max-height:420px;overflow-y:auto;padding-right:4px}
.pick{display:grid;gap:4px;text-align:left;background:var(--surface-2);border:1px solid transparent;padding:6px;cursor:pointer;min-width:0;position:relative}
.pick:hover:not(:disabled){border-color:var(--tb)}
.pick:disabled{opacity:.35;cursor:not-allowed}
.pick .ti-art{height:44px;background:var(--surface)}
.pick .ti-art img{max-height:38px}
.pick-name{font:600 12px/1.2 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.pick-own{font-size:10px;color:var(--muted)}
.cp-foot{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  background:var(--surface);border:1px solid var(--line);padding:12px 16px;margin-top:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:4}
.cp-foot #cp-delta{margin-right:auto}

@media (max-width:860px){
  .composer{grid-template-columns:1fr}
  .profile-head{grid-template-columns:auto 1fr}
  .profile-score{grid-column:1/-1;justify-items:start;text-align:left}
}
@media (max-width:640px){
  .trade-sides{grid-template-columns:1fr}
  .trade-arrow{transform:rotate(90deg);justify-self:center}
  .ptimer{width:108px;height:112px}
  .pt-center b{font-size:22px}

}
@media (prefers-reduced-motion:reduce){ .pt-prog,.pt-hand{transition:none} }
.two>section,.two>div{margin-top:0}
table.rank td .clan-tag{vertical-align:middle;margin-left:4px}
.stats + section{margin-top:32px}
@media (max-width:640px){
  nav.tabs{flex-wrap:wrap;overflow:visible;gap:0}
  nav.tabs a{padding:9px 8px;font-size:14px}
  nav.tabs a[aria-current="page"]::after{left:8px;right:8px;bottom:-2px}
}

/* ================= v0.4 ================= */
/* --- polish: page atmosphere, header, panels, buttons --- */
body{background:
  radial-gradient(900px 420px at 8% -120px, color-mix(in srgb,var(--rad) 9%,transparent), transparent 70%),
  radial-gradient(800px 380px at 100% -80px, color-mix(in srgb,var(--t2-bg) 7%,transparent), transparent 70%),
  var(--bg);background-repeat:no-repeat;background-attachment:fixed}
header.top{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
body::before{background:color-mix(in srgb,var(--surface) 86%,transparent)}
.panel,.trade,.badge-tile,.stats div,.filters{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent)}
.btn{transition:filter .15s,transform .12s}
.btn:active:not(:disabled){transform:translateY(1px)}
.card{transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--tb) 70%,transparent)}
.sec-head h2{letter-spacing:-.005em}
h1,.page-title{letter-spacing:-.015em}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;color:var(--muted);border-radius:2px}
.icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.icon-btn svg{width:20px;height:20px}
#account-slot{display:flex;align-items:center;gap:8px}
.small{font-size:13px}

/* --- home --- */
.hero-pack-wrap{display:grid;gap:12px;justify-items:center}
.pack-note{margin:0;font-size:13px;color:var(--muted);text-align:center;max-width:300px}
.hero-row{align-items:flex-start}
.code-form{display:grid;gap:6px;margin-top:4px;max-width:340px}
.code-form label{font:600 13px/1 var(--display);color:var(--muted)}
.code-form input{text-transform:uppercase;letter-spacing:.08em;font:600 15px/1 var(--display)}
.code-form p{margin:0;min-height:1em}
.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0 0}
.summary-strip div{background:var(--surface);padding:16px 20px;display:grid;gap:2px}
.summary-strip b{font:700 28px/1.1 var(--display)}
.summary-strip b small{font-size:15px;color:var(--muted);font-weight:500;margin-left:2px}
.summary-strip span{font-size:13px;color:var(--muted)}
.up-text{color:var(--t4)}
.luck-chip{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--display);padding:6px 10px;color:#06221C;background:linear-gradient(120deg,#9CFBE3,#6FF0CF)}
.luck-chip.sm{font-size:11px;padding:3px 6px}
.luck-chip.big{font-size:16px;padding:9px 14px}
.table-note{font-size:13px;color:var(--muted);margin:10px 12px 8px}
.odds td.num{white-space:nowrap}
table.feed td{vertical-align:middle}
.feed-skin{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:inherit}
.feed-skin b{font:600 15px/1.2 var(--display)}
.feed-skin:hover b{text-decoration:underline}
.feed-thumb{width:84px;height:40px;display:grid;place-items:center;background:var(--surface-2);border-left:3px solid var(--tb);flex:none}
.feed-thumb.t0{--tb:var(--t0-bg)} .feed-thumb.t1{--tb:var(--t1-bg)} .feed-thumb.t2{--tb:var(--t2-bg)} .feed-thumb.t3{--tb:var(--t3-bg)} .feed-thumb.t4{--tb:var(--t4-bg)}
.feed-thumb img{max-width:100%;max-height:36px;object-fit:contain}
.feed-thumb .noimg{font-size:9px}
.rel-chip{display:inline-block;font:600 12px/1 var(--display);padding:5px 8px;background:color-mix(in srgb,var(--rad) 18%,transparent);color:var(--ink)}
.user-cell{display:inline-flex;align-items:center;gap:8px;min-width:0}
.user-cell .user-link{font-weight:600}

/* --- clan tag chip (color picked by the clan) --- */
.clan-tag{display:inline-block;font:700 12px/1 var(--display);letter-spacing:.04em;padding:3px 5px 2px;background:var(--tag,var(--rad));color:#10121C;text-decoration:none;vertical-align:middle;white-space:nowrap}
.clan-tag:hover{filter:brightness(1.1);text-decoration:none}
.clan-tag.big{font-size:15px;padding:4px 7px 3px}
table.rank td .clan-tag{margin-left:0}

/* --- upgraded (max variant) --- */
.up-chip{position:absolute;top:8px;right:22px;z-index:2;display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--display);padding:4px 6px;color:#2A2003;background:linear-gradient(120deg,#FFF1A8,#FAD663 45%,#F5955B)}
.up-chip svg{width:12px;height:12px}
:not(.card-art) > .up-chip{position:static;vertical-align:middle;margin-left:6px}
.up-line .up-chip,.prow .up-chip,.tier-progress .up-chip,.pick-name .up-chip,.sum .up-chip{padding:2px 4px;margin:0 4px 0 0}
.card.up::after{border:2px solid transparent;background:linear-gradient(120deg,#9CFBE3,#FAD663,#F5955B,#D1548D,#5A9FE2,#9CFBE3) border-box;background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:holo 6s linear infinite}
.card.up .card-art{background:radial-gradient(120% 90% at 50% 40%,rgba(250,214,99,.28),transparent 70%),var(--surface-2)}
@keyframes holo{to{background-position:300% 0}}
.up-line{margin:12px 0 0;font-size:15px;color:var(--muted)}
.up-line b{color:var(--ink)}
.tier-progress em{display:block;font-style:normal;font-size:12px;margin-top:2px}
.sep-note{grid-column:1/-1;margin:0;max-width:80ch}
.dupes-bar{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);padding:10px 14px;font-size:15px}
.dupes-bar .btn{margin-left:auto}
.col-head{row-gap:14px}
.up-section{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;padding:14px;background:var(--surface-2);border:1px solid var(--line)}
.up-section.owned{border-color:#FAD663;background:linear-gradient(120deg,rgba(250,214,99,.12),transparent 60%),var(--surface-2)}
.up-section:not(.owned) .up-art img{filter:grayscale(1) brightness(.5)}
.up-art{display:grid;place-items:center;height:90px}
.up-art img{max-width:100%;max-height:90px;object-fit:contain}
.up-section h3{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* --- suspense before Exclusive / Ultra reveals --- */
.flip.suspense .cardback{animation:sus-shake .12s linear infinite;box-shadow:0 0 0 2px var(--tb) inset}
.flip.suspense .face.back{filter:drop-shadow(0 0 18px var(--tb)) drop-shadow(0 0 40px var(--tb));animation:sus-glow .9s ease-in infinite alternate}
.flip.t3.suspense .cardback{background-color:#3A2414}
.flip.t4.suspense .cardback{background-color:#3A3012}
@keyframes sus-shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-1deg)}50%{transform:translate(2px,-1px) rotate(1deg)}75%{transform:translate(-1px,-2px) rotate(-.5deg)}}
@keyframes sus-glow{from{filter:drop-shadow(0 0 6px var(--tb))}to{filter:drop-shadow(0 0 22px var(--tb)) drop-shadow(0 0 50px var(--tb))}}
.flip.is-up.on .face.front{filter:drop-shadow(0 0 16px rgba(250,214,99,.8))}

/* --- badges: pips, legend --- */
.pips{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.pip{--c:var(--surface-2);display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 4px;font:700 11px/1 var(--display);color:#fff;background:var(--c);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:relative}
.pip small{position:absolute;bottom:-1px;font-size:7px;font-weight:600;opacity:.9}
.pip.lv0{color:var(--muted)}
.pip.lv1{--c:linear-gradient(160deg,#D49A6A,#8C5A33)} .pip.lv2{--c:linear-gradient(160deg,#D7DEE8,#7E8A9A)}
.pip.lv3{--c:linear-gradient(160deg,#F7D96B,#B8860B)} .pip.lv4{--c:linear-gradient(160deg,#9CFBE3,#1E9C84);color:#06221C}
.pip{background:var(--c)}
.badge-tile .pip{min-width:34px;height:34px;padding-bottom:6px}
.lvl-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.lvl-legend div{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.lvl-legend .pip{grid-row:span 2;min-width:36px;height:36px}
.lvl-legend b{font:700 18px/1 var(--display);color:var(--ink)}

/* --- profile rank highlight --- */
.rank-plaque{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--display);padding:7px 11px;color:#1A1405}
.rank-plaque svg{width:14px;height:14px}
.rank-plaque.r100{background:linear-gradient(120deg,#E3B48A,#9C6A3F);color:#fff}
.rank-plaque.r10{background:linear-gradient(120deg,#F0F4F9,#9AA6B6)}
.rank-plaque.r3{background:linear-gradient(120deg,#FFF1A8,#E0B12A);box-shadow:0 0 18px rgba(250,214,99,.45)}
.rank-plaque.r1{background:linear-gradient(120deg,#9CFBE3,#FAD663,#F5955B,#D1548D,#9CFBE3);background-size:300% 100%;animation:holo 5s linear infinite;box-shadow:0 0 26px rgba(250,214,99,.55)}
.profile-head.ranked{padding:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--t4-bg) 12%,transparent),transparent 55%);border:1px solid color-mix(in srgb,var(--t4-bg) 40%,var(--line))}
.profile-head h1 .clan-tag{vertical-align:6px}

/* --- settings --- */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
.switch-row > span{display:grid;gap:3px}
.switch{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:13px;background:var(--surface-2);border:1.5px solid var(--line);position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.switch:checked{background:var(--rad);border-color:var(--rad)}
.switch:checked::after{transform:translateX(20px);background:#06221C}
input[type=range]{width:100%;accent-color:var(--rad)}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}

/* --- trades --- */
.trade-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.trade-info .switch-row{padding:12px 16px}
.warn-callout{background:color-mix(in srgb,var(--t3-bg) 18%,var(--surface));margin-bottom:12px}
.ti.up .ti-art,.pick.up{box-shadow:inset 0 0 0 1px #FAD663}

/* --- clans --- */
.privacy-chip{display:inline-block;font:600 11px/1 var(--display);padding:4px 7px;vertical-align:middle;border:1px solid var(--line);color:var(--muted)}
.privacy-chip.private{border-color:var(--t2);color:var(--t2)}
.role-chip{font:600 11px/1 var(--display);padding:4px 7px;background:var(--surface-2);color:var(--muted)}
.role-chip.owner{background:var(--t4-bg);color:#2A2003}
.role-chip.officer{background:color-mix(in srgb,var(--t0-bg) 30%,transparent);color:var(--ink)}
.clan-list{list-style:none;margin:0;padding:0}
.clan-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.clan-banner{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:20px;margin-bottom:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--tag) 16%,transparent),transparent 60%),var(--surface);border:1px solid var(--line);border-left:4px solid var(--tag)}
.clan-banner h1,.clan-banner h2{font-size:clamp(22px,2.6vw,30px);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.clan-banner .clan-emblem{background:var(--tag);color:#10121C}
.clan-desc{margin:8px 0 0;max-width:70ch}
.clan-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.bank{display:flex;align-items:baseline;gap:10px}
.price.big{font:700 28px/1 var(--display)}
.price.big svg{width:22px;height:22px}
.up-card{display:grid;gap:6px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line)}
.up-card p{margin:0}
.up-card-head{display:flex;justify-content:space-between;gap:8px}
.up-values b{font:700 20px/1 var(--display)}
.up-cost{display:flex;justify-content:space-between;align-items:center;gap:10px}
.color-row{display:flex;gap:8px;flex-wrap:wrap}
.color-dot{width:30px;height:30px;border:2px solid var(--line);background:var(--c);cursor:pointer;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.color-dot[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px;clip-path:none;border-radius:50%}
.radio-cards{border:0;padding:0;margin:0;display:grid;gap:8px}
.radio-cards legend{margin-bottom:6px;padding:0}
.radio-cards label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);cursor:pointer}
.radio-cards label:has(input:checked){border-color:var(--rad);background:color-mix(in srgb,var(--rad) 8%,transparent)}
.radio-cards label > span{display:grid;gap:2px}
.radio-cards input{accent-color:var(--rad);margin-top:3px}
textarea{font:15px/1.45 var(--body)}
.field textarea{width:100%}
.log{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
.log li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.log li.log-kick span:first-child,.log li.log-leave span:first-child{color:var(--t2)}
.log li.log-join span:first-child{color:var(--rad)}
.log li.log-donate span:first-child,.log li.log-upgrade span:first-child{color:var(--t4)}

@media (max-width:860px){
  .summary-strip{grid-template-columns:repeat(2,1fr)}
  .clan-grid,.trade-info{grid-template-columns:1fr}
  .clan-banner{grid-template-columns:auto 1fr}
  .clan-banner .profile-score{grid-column:1/-1;justify-items:start;text-align:left}
  .up-section{grid-template-columns:1fr}
}
@media (max-width:640px){
  .feed th:nth-child(2),.feed td:nth-child(2),.feed th:nth-child(4),.feed td:nth-child(4){display:none}
  .feed-thumb{width:60px}
  .summary-strip b{font-size:22px}
  .icon-btn{width:32px}
}

.summary-strip + section{margin-top:40px}
.clan-grid>*{margin-top:0!important}
input[type=number]{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;min-height:42px;color:var(--ink);font:inherit}
.pipw{display:inline-grid;justify-items:center;gap:2px}
.pipw small{font:600 10px/1 var(--display);color:var(--muted)}
.pips{gap:8px}
.prow{grid-template-columns:110px 1fr 120px}
.prow .n{white-space:nowrap}
.prow .n small{margin-left:6px}

/* ===== v0.5: copies, trade filters, progress page ===== */
.card .count + .up-chip,.card-art .up-chip span{font-variant-numeric:tabular-nums}
.prow-up{align-items:start}
.prow-up .bars{display:grid;gap:4px;padding-top:5px}
.bar.thin{height:4px}
.up-bar>i{background:linear-gradient(90deg,#FFF1A8,#FAD663 45%,#F5955B)}
.prow-up .n{line-height:1.35}
.cp-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cp-filters input[type=search]{flex:1 1 100%}
.cp-filters select{flex:1 1 120px;min-width:0}
.chips.sm .chip{padding:5px 8px;font-size:12px}
.cp-count{margin-top:-2px}
.cp-more{display:flex;justify-content:center;margin-top:8px}
.cp-more:empty{display:none}
.pick-own{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pick-own.new{color:var(--rad);font-weight:600}
.pick-own .up-chip,.wp-counts .up-chip,.line-thumbs .up-chip{padding:2px 4px;margin:0}
.pick-own .up-chip svg{width:9px;height:9px}
.summary-strip.three{grid-template-columns:repeat(3,1fr);margin:6px 0 24px}
.wp-class{margin-top:22px}
.wp-class h2{margin-bottom:12px}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.wp-tile{display:grid;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);padding:14px 16px;cursor:pointer;color:inherit;font:inherit;border-radius:var(--r-lg)}
.wp-tile:hover{border-color:var(--rad)}
.wp-tile:focus-visible{outline:2px solid var(--rad);outline-offset:2px}
.wp-tile.done{box-shadow:inset 0 0 0 1px var(--rad)}
.wp-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wp-name{font:700 17px/1.1 var(--display)}
.wp-pct{font:700 17px/1 var(--display);font-variant-numeric:tabular-nums}
.wp-icon{height:54px;display:grid;place-items:center}
.wp-icon img{max-height:50px;max-width:100%;object-fit:contain;filter:var(--icon-filter,none)}
.wp-icon .noimg{font-size:12px;color:var(--muted)}
.wp-counts{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.up-count{display:inline-flex;align-items:center;gap:4px}
.wp-tiers{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.wp-tiers span{display:inline-flex;align-items:center;gap:5px}
.wp-tiers .tdot{width:8px;height:8px}
.line-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.line-card{background:var(--surface);border:1px solid var(--line);padding:14px 16px;display:grid;gap:8px;align-content:start}
.line-card.done{box-shadow:inset 0 0 0 1px var(--rad)}
.line-card header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.line-card h3{font-size:17px;margin:0;margin-right:auto}
.line-tier{font:600 12px/1 var(--display)}
.line-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:4px}
.lt{position:relative;display:grid;gap:2px;justify-items:center;background:var(--surface-2);border:1px solid transparent;padding:6px 4px 4px;cursor:pointer;color:inherit;font:inherit;min-width:0}
.lt img{height:30px;width:100%;object-fit:contain}
.lt:not(.own) img{filter:brightness(0);opacity:.25}
.lt span{font-size:11px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt.own span{color:var(--ink)}
.lt.own{border-color:color-mix(in srgb,var(--rad) 45%,transparent)}
.lt.up{box-shadow:inset 0 0 0 1px #FAD663}
.lt .up-chip{position:absolute;top:3px;right:3px}
.lt .up-chip svg{width:9px;height:9px}
.lt .noimg{font-size:10px;color:var(--muted);height:30px;display:grid;place-items:center}
.lt:hover{border-color:var(--rad)}
@media (max-width:640px){
  .summary-strip.three{grid-template-columns:1fr 1fr 1fr}
  .summary-strip.three div{padding:12px}
  .summary-strip.three b{font-size:22px}
  .line-grid{grid-template-columns:1fr}
  .wp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ================= v1.0: ValGacha look (rounded, softer surfaces, pill buttons) ================= */
h1,.page-title,.hero h1{font-weight:800;letter-spacing:-.025em}
h2{font-weight:750;letter-spacing:-.015em}
.btn{font-weight:700;letter-spacing:0}
.btn.rad{box-shadow:0 8px 22px -10px var(--rad-glow)}
.btn.big{padding:17px 30px}

/* --- header --- */
.top .wrap{gap:14px;height:64px}
.logo{gap:9px}
.logo img{width:30px;height:30px;flex:none}
.logo-text{font:800 20px/1 var(--display);letter-spacing:-.03em}
.logo-text b{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
nav.tabs{flex:1 1 auto;min-width:0;gap:2px;margin-right:0}
nav.tabs a{font:600 14.5px/1 var(--display);padding:9px 13px;border-radius:999px}
nav.tabs a:hover{background:var(--surface-2)}
nav.tabs a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}
nav.tabs a[aria-current="page"]::after{display:none}
.wallet{gap:6px;flex:none}
.wallet .item{background:var(--surface-2);border-radius:999px;padding:7px 11px;font-size:14px}
.slot-bonus{font:700 11px/1 var(--display);padding:3px 6px;border-radius:999px;color:#06221C;background:linear-gradient(120deg,#9CFBE3,#6FF0CF);margin-left:-2px}
.site-links{display:flex;gap:6px;flex:none}
.site-links:empty{display:none}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font:700 14px/1 var(--display);color:#fff;text-decoration:none;white-space:nowrap;transition:filter .15s,transform .12s}
.pill:hover{filter:brightness(1.1)}
.pill:active{transform:translateY(1px)}
.pill svg{width:18px;height:18px;flex:none}
.pill.discord{background:#5865F2}
.pill.support{background:linear-gradient(120deg,#FF5E8A,#FF8A4C)}

/* --- account menu (hover, click or keyboard) --- */
#account-slot{flex:none}
.acct{position:relative}
.account{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);font:600 14px/1 var(--display)}
.account:hover,.acct.open .account{background:var(--surface-2)}
.account img,.acct .avatar-ph{width:30px;height:30px;border-radius:50%;background:var(--surface-2);flex:none;object-fit:cover}
.avatar-ph{display:grid;place-items:center;color:var(--muted)}
.avatar-ph svg{width:18px;height:18px}
.account > svg{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.acct.open .account > svg{transform:rotate(180deg)}
.acct-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.45);display:none;z-index:20}
.acct-pop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* hover bridge between button and menu */
.acct.open .acct-pop{display:block;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
.acct-head{display:flex;gap:10px;align-items:center;padding:8px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.acct-head img,.acct-head .avatar-ph{width:38px;height:38px}
.acct-head b{display:block;font:700 15px/1.2 var(--display)}
.acct-head span{font-size:13px;color:var(--muted)}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;background:none;border-radius:var(--r-sm);color:var(--ink);font:600 14px/1 var(--display);text-decoration:none;cursor:pointer;text-align:left}
.acct-item:hover,.acct-item:focus-visible{background:var(--surface-2)}
.acct-item svg{width:18px;height:18px;color:var(--muted);flex:none}
.acct-item.discord svg{color:#5865F2}

/* --- rounded surfaces --- */
.seg{border-radius:999px;border-width:1px}
.seg button{border-radius:999px}
.summary-strip,.stats{border-radius:var(--r-lg);overflow:hidden}
.filters{border-radius:var(--r-lg)}
.trade,.line-card,.clan-banner,.cp-foot,.modal{border-radius:var(--r-lg)}
.badge-tile,.callout,.dupes-bar,.up-section,.up-card,.radio-cards label{border-radius:var(--r)}
.badge-chip,.status-chip,.rel-chip,.role-chip,.privacy-chip,.luck-chip,.rank-plaque,.theme-list button,.stepper button,.icon-btn,.modal .x,.toast{border-radius:999px}
.clan-tag,.tag-new,.tag-dupe,.card .count,.up-chip,.ti-art,.feed-thumb,.pack-count{border-radius:6px}
.pick,.lt,.swatch{border-radius:var(--r-sm)}
.bar,.badge-bar{border-radius:999px}
.bar>i,.badge-bar i{border-radius:inherit}
.segs i{transform:none;border-radius:3px}
.modal .x{width:36px;height:36px;font-size:20px}
.ti-art{border-left-width:0;box-shadow:inset 3px 0 0 var(--tb,var(--line))}
.card::before{width:3px;border-radius:0}
dialog::backdrop{backdrop-filter:blur(3px)}

/* --- home --- */
.hero-actions{margin-bottom:6px}
.hero-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:18px}
.code-form.panel{flex:1 1 260px;max-width:380px;margin:0;padding:16px 18px;gap:8px}

/* --- opening several packs: 5 cards per row = one row per pack --- */
.deal.many{grid-template-columns:repeat(5,minmax(0,1fr))}

/* --- profile --- */
.showcase{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.showcase-empty{padding:18px 22px}
.showcase-empty p{margin:0}
.done-chips{display:flex;flex-wrap:wrap;gap:8px}
.done-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--rad) 45%,var(--line));font:600 14px/1 var(--display)}
.done-chip img{height:18px;width:auto;max-width:56px;filter:var(--icon-filter,none)}
.perk-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.luck-chip.storage{background:linear-gradient(120deg,#BFE3FF,#5A9FE2);color:#0A1B2E}

/* --- showcase editor --- */
.sc-chosen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.sc-slot{position:relative;display:grid;gap:4px;justify-items:center;align-content:center;min-height:78px;padding:6px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);font:600 11px/1.2 var(--display);color:var(--ink);cursor:pointer;min-width:0}
.sc-slot.empty{border-style:dashed;color:var(--muted);cursor:default;font-size:14px}
.sc-slot img{height:30px;width:100%;object-fit:contain}
.sc-slot span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-slot i{position:absolute;top:3px;right:6px;font-style:normal;color:var(--muted)}
.sc-slot:hover:not(.empty){border-color:var(--t2-bg)}
.sc-slot.up{box-shadow:inset 0 0 0 1px #FAD663}
.sc-grid{margin-top:10px;max-height:46vh}
.pick.picked{outline:2px solid var(--rad);outline-offset:-2px}

/* Header compaction: fitHeader() in app.js adds c1..c4 until every tab is visible (any width, language or zoom) */
.top .wrap{max-width:1440px}
nav.tabs{overflow:visible}
header.top.c1 .pill span{display:none}
header.top.c1 .pill{padding:8px 10px}
header.top.c2 .acct-name,header.top.c2 #w-timer{display:none}
header.top.c2 .account > svg{display:none}
header.top.c3 .logo-text{display:none}
header.top.c3 .top .wrap,header.top.c3 .wrap{gap:8px}
header.top.c4 .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:8px;row-gap:8px}
header.top.c4 nav.tabs{order:5;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
header.top.c4 .wallet{margin-left:auto}
@media (max-width:980px){
  .showcase{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .deal.many{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sc-chosen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  nav.tabs{flex-wrap:nowrap;overflow-x:auto;gap:2px}
  nav.tabs a{padding:8px 11px;font-size:14px}
  .wallet .item small{display:none}
  .deal.many{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase{grid-template-columns:repeat(2,minmax(0,1fr))}
  .code-form.panel{max-width:none}
}
/* timer label sits lower so the wider font clears the ring ticks */
.pt-center{top:48%}
/* tab bars never wrap their labels; they scroll sideways on small screens */
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{white-space:nowrap;flex:none}
@media (max-width:640px){
  .top .wrap{column-gap:6px}
  .wallet{gap:4px}
  .wallet .item{padding:6px 8px;gap:5px}
  .site-links{gap:4px}
  .pill{padding:7px 8px}
  .account{padding:3px;gap:0}
  .account > svg{display:none}
  .seg button{padding:8px 11px}
}

/* ================= v1.1: pack and badge art (tactical-shooter mood, no game logos or assets) ================= */
.pack{--pa:#FF5A5F;--pb:#ECE8E1;--pc:#FF5A5F;--gm:#ECE8E1;background:linear-gradient(160deg,#1C2836,#0F1923 70%)}
.pack::before,.pack::after{display:none}
.pk-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.pk-art .pa{fill:var(--pa)} .pk-art .pb{fill:var(--pb)} .pk-art .pc{fill:var(--pc);opacity:.5}
.pk-art .g1{fill:var(--gm)} .pk-art .g2{fill:#fff;opacity:.55} .pk-art .g3{fill:#000;opacity:.22}
.pk-art .gem{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gm) 55%,transparent))}
.pk-art .frame{fill:none;stroke:#fff;stroke-opacity:.38;stroke-width:3;stroke-linecap:square}
.pack.gold{--pa:#FAD663;--pb:#F5955B;--pc:#FFF1A8;--gm:#FFE38A;background:linear-gradient(160deg,#30260C,#15110A 70%)}
.pack.arsenal{--pa:#6FF0CF;--pb:#ECE8E1;--pc:#1F9C85;--gm:#9CFBE3;background:linear-gradient(160deg,#10302B,#08140F 70%)}
.pack.elite{--pa:#D1548D;--pb:#F5955B;--pc:#FAD663;--gm:#F7B5D2;background:linear-gradient(160deg,#2E1424,#140A11 70%)}
.pack .pk-top{letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.pack .pk-name{letter-spacing:-.01em;text-transform:uppercase;font-weight:800}
.pack.mini .pk-art .frame{stroke-width:5}
.cardback{background-color:#0F1923;background-image:linear-gradient(135deg,transparent 46%,rgba(255,90,95,.55) 46% 54%,transparent 54%),repeating-linear-gradient(135deg,rgba(236,232,225,.05) 0 2px,transparent 2px 10px)}
.cardback svg{color:#ECE8E1}

/* badges: angular insignia with an inner frame; levels shown as chevrons */
.badge-icon,.pip{clip-path:polygon(0 0,34% 0,50% 9%,66% 0,100% 0,100% 64%,50% 100%,0 64%)}
.badge-icon::before{content:"";position:absolute;inset:3px;clip-path:inherit;background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(0,0,0,.28) 70%);pointer-events:none}
.badge-icon.lv0::before{background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(0,0,0,.12))}
.badge-icon svg{position:relative;z-index:1;margin-top:-6px}
.badge-icon .lv-ch{position:absolute;bottom:17%;left:0;right:0;display:flex;justify-content:center;gap:1px;z-index:1}
.lv-ch b{width:8px;height:5px;background:currentColor;clip-path:polygon(0 100%,50% 0,100% 100%,76% 100%,50% 44%,24% 100%)}
.badge-chip .badge-icon .lv-ch{bottom:15%}
.badge-chip .lv-ch b{width:5px;height:3px}
.badge-chip .badge-icon svg{margin-top:-4px}
.pip{padding-bottom:4px}

/* ================= small screens: nothing may push the page sideways ================= */
html,body{overflow-x:clip}
main,section,.panel,.card,.trade,.line-card,.wp-tile,.badge-tile,.cp-side,.clan-grid>*,.two>*{min-width:0}
h1,h2,h3,.user-link,.clan-banner h2,.acct-head b,.trade-who,.person{overflow-wrap:anywhere}
input,select,textarea{max-width:100%}
.table-wrap,.odds-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .profile-head{grid-template-columns:auto 1fr;gap:14px}
  .profile-head .avatar{width:56px;height:56px}
  .profile-score{grid-column:1/-1;justify-items:start;text-align:left}
  .clan-banner{grid-template-columns:1fr}
  .clan-banner .clan-emblem{display:none}
  .perk-chips{justify-content:flex-start}
  .badge-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .shop{grid-template-columns:1fr}
  .offer{grid-template-columns:72px 1fr;gap:14px}
  .hero h1{font-size:30px}
  .big-progress{font-size:34px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div{padding:14px 16px}
  .stats b{font-size:24px}
  .modal{width:calc(100vw - 16px)!important}
  .detail-body{padding:18px 16px 20px}
  .sec-head{gap:8px}
  .cp-foot{gap:10px}
  .cp-foot .btn{flex:1 1 100%}
  .trade-info{grid-template-columns:1fr}
  .sel-row .warn{margin-left:0}
}
@media (max-width:380px){
  .wrap{padding:0 12px}
  .wallet .item{padding:5px 7px;font-size:13px}
  .summary-strip,.summary-strip.three{grid-template-columns:1fr 1fr}
}

/* Tabs on their own row (c4): they share the width so all of them stay visible; c5 shrinks them further */
header.top.c4 nav.tabs{justify-content:space-between;gap:0}
header.top.c4 nav.tabs a{padding:8px 9px;font-size:14px}
header.top.c5 nav.tabs a{padding:7px 5px;font-size:12.5px}
/* c5: the Discord / donation buttons move into the account menu */
.acct-pop .acct-link{display:none}
header.top.c5 .acct-pop .acct-link{display:flex}
header.top.c5 .site-links{display:none}
.acct-item.support svg{color:#FF6F7A}
/* packs share one text layout (packArt): small kicker, short name, detail line */
.pack .pk-name small{font-size:14px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:6px}
.pack.mini .pk-name{font-size:16px;left:12px;right:10px;bottom:12px}
.pack.mini .pk-name small{font-size:9px;letter-spacing:.04em;margin-top:4px}
.open-pack .pack .pk-name{font-size:34px}
/* dark fade behind the pack name so the text reads on every pack color */
.pack::after{display:block;content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,transparent,rgba(8,12,18,.82) 78%);z-index:-1;pointer-events:none}
.pack .pk-name{text-shadow:0 2px 10px rgba(0,0,0,.8)}

/* cancel a pack opening before confirming (× in the corner + Cancel button) */
.open-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#ECEAF4;font-size:24px;line-height:1;cursor:pointer;z-index:5}
.open-x:hover{background:rgba(255,255,255,.16)}
.open-x:disabled{opacity:.3;cursor:not-allowed}
.open-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.open-actions .btn:disabled{opacity:.4}