/* ===== Block Gacha: a "Minecraft GUI" look. Stone panels with bevelled edges, pixel type, inventory slots. ===== */
@font-face{font-family:"Silkscreen";font-weight:400;font-display:swap;src:url(fonts/silkscreen-400.woff2) format("woff2")}
@font-face{font-family:"Silkscreen";font-weight:700;font-display:swap;src:url(fonts/silkscreen-700.woff2) format("woff2")}
:root{
  --bg:#0d0f11; --stone:#1b1e21; --stone2:#262a2e; --hi:#4b535b; --lo:#0e1012; --line:#ffffff14;
  --text:#e9ecef; --muted:#8e979f; --green:#69d94a; --green2:#3f8f2a; --gold:#f5c542; --cyan:#7ae8ff;
  --accent:var(--green); --px:"Silkscreen","Courier New",monospace; --ui:"Segoe UI",system-ui,sans-serif;
  --common:#b4bcc4; --uncommon:#4ade80; --rare:#38bdf8; --epic:#a855f7; --legendary:#fbbf24; --mythic:#ff3d81; --exotic:#0f9b8e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:"Segoe UI",system-ui,sans-serif;min-height:100vh;
  background:
    linear-gradient(45deg,#ffffff06 25%,transparent 25%,transparent 75%,#ffffff06 75%) 0 0/32px 32px,
    linear-gradient(45deg,#ffffff06 25%,transparent 25%,transparent 75%,#ffffff06 75%) 16px 16px/32px 32px,
    radial-gradient(900px 600px at 70% -10%,#1d3a2433,transparent 70%),var(--bg) fixed}
img{image-rendering:pixelated}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{font-family:var(--px);text-transform:uppercase;letter-spacing:.5px}
h1{font-size:1.5rem;margin:0 0 8px}
.muted{color:var(--muted)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#0b0c0d}
::-webkit-scrollbar-thumb{background:#5a6168;border:3px solid #0b0c0d}

/* ---------- layout: sidebar + content ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:20px 16px;background:#141618;
  border-right:3px solid #000;box-shadow:inset -3px 0 0 #272b2f;z-index:20}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--px);font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:0;padding:4px 4px 14px;border-bottom:3px solid #000;box-shadow:0 3px 0 #272b2f}
.logo{justify-content:center}
.logo img{width:180px;height:auto;display:block}            /* the art is built on an 8px grid: 8 x 0.375 = 3px per pixel, so it stays crisp */
.toplogo{display:none}
.side nav{display:flex;flex-direction:column;gap:8px}
.side nav a{display:flex;align-items:center;gap:14px;padding:9px 12px;text-decoration:none;font-family:var(--px);font-size:1rem;text-transform:uppercase;letter-spacing:0;
  color:var(--muted);border:3px solid transparent;position:relative}
.side nav a img{width:32px;height:32px;filter:grayscale(.55) brightness(.85);transition:filter .15s}
.side nav a:hover{color:#fff;background:#1d2124}
.side nav a:hover img{filter:none}
.side nav a.active{color:#fff;background:#262b2f;border-color:#000;box-shadow:inset 3px 3px 0 #3e454c,inset -3px -3px 0 #14171a}
.side nav a.active img{filter:none}
.side nav a.active::before{content:"";position:absolute;left:-19px;top:6px;bottom:6px;width:6px;background:var(--green)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.pill-packs{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#101214;color:var(--text);text-decoration:none;font-size:.95rem;font-weight:700;
  border:3px solid;border-color:#07080a #3d444b #3d444b #07080a}
.pill-packs .k{font-family:var(--ui);font-size:.66rem;color:var(--muted);letter-spacing:1.3px;font-weight:700}
.pill-packs b{white-space:nowrap}
.pill-packs.ready{border-color:#07080a #2f6f21 #2f6f21 #07080a;box-shadow:0 0 14px #69d94a33}
.pill-packs.ready b{color:var(--green)}
.shardpill b{color:var(--cyan)}.shardpill:hover{background:#15191c}
.acct{padding:6px 6px 6px 12px}
.acct a{color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.acct a:hover{color:var(--green)}
.acct a::before{content:"👤 ";font-size:.85em}
.acct button{background:#1b1f22;color:var(--muted);border:2px solid;border-color:#3d444b #07080a #07080a #3d444b;font-family:var(--ui);font-size:.7rem;font-weight:700;padding:4px 8px;cursor:pointer;line-height:1.2}
.acct button:hover{color:#fff;background:#262b2f}
.signed-out .side nav,.signed-out #hdrPacks,.signed-out .shardpill{display:none}
.auth{max-width:440px;margin:6vh auto 0}
.auth .tabs{display:flex;gap:8px;margin-bottom:16px}
.auth .tabs button{flex:1;padding:10px;font-family:var(--ui);font-weight:700;font-size:.9rem;color:var(--muted);background:#101214;border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;cursor:pointer}
.auth .tabs button.on{color:#fff;background:#262b2f;border-color:#000;box-shadow:inset 3px 3px 0 #3e454c,inset -3px -3px 0 #14171a}
.auth form{display:flex;flex-direction:column;gap:12px}
.auth label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--muted);font-family:var(--ui);font-weight:600}
.auth label[hidden]{display:none}
.auth input{background:#101214;color:var(--text);border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;border-radius:0;padding:10px 12px;font-size:1rem;font-family:inherit}
.auth input:focus{outline:2px solid var(--green);outline-offset:1px}
.auth .err{color:#ff7a7a;font-size:.85rem;min-height:1.2em}
.auth .btn{align-self:flex-start}
.mute{cursor:pointer;justify-content:center;gap:8px;font-size:.85rem;line-height:1;font-family:var(--ui);color:var(--muted)}
.mute:hover{color:#fff}
.mute:hover{background:#15191c}
.content{min-width:0;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:30px 30px 30px}
footer{text-align:center;color:#5d666e;font-size:.72rem;padding:18px 18px 26px}

/* ---------- panels, buttons, inputs ---------- */
.panel{background:var(--stone);padding:24px;margin-bottom:22px;border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);outline:3px solid #000;
  position:relative}
.btn{border:3px solid #000;cursor:pointer;font-family:var(--px);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:0;padding:11px 20px;color:#fff;
  text-shadow:2px 2px 0 #1f4f12;background:#4fa332;box-shadow:inset 3px 3px 0 #8be063,inset -3px -3px 0 #2c6a1a;transition:background .1s,transform .1s}
.btn:hover:not(:disabled){background:#5bb83a;transform:translateY(-2px)}
.btn:active:not(:disabled){box-shadow:inset 3px 3px 0 #2c6a1a,inset -3px -3px 0 #8be063;transform:translateY(1px)}
.btn:disabled{background:#383c40;color:#7d858c;text-shadow:none;cursor:not-allowed;box-shadow:inset 3px 3px 0 #4a5056,inset -3px -3px 0 #25282b}
.btn.ghost{background:#70767c;text-shadow:2px 2px 0 #2a2e32;box-shadow:inset 3px 3px 0 #a5acb3,inset -3px -3px 0 #464b50}
.btn.ghost:hover:not(:disabled){background:#7e858c}
.btn.ghost:active:not(:disabled){box-shadow:inset 3px 3px 0 #464b50,inset -3px -3px 0 #a5acb3}
.btn.ghost:disabled{background:#383c40;box-shadow:inset 3px 3px 0 #4a5056,inset -3px -3px 0 #25282b}
.btn.danger{color:#ffb3b3;text-shadow:2px 2px 0 #4a0f0f}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 22px}
.filters input,.filters select,.btnrow select,textarea{background:#101214;color:var(--text);border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;border-radius:0;padding:10px 12px;font-size:.9rem;font-family:inherit}
.filters input{flex:1;min-width:200px}
.filters input:focus,.filters select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px}
textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.75rem;resize:vertical}
.chk{display:flex;gap:8px;align-items:center;font-size:.9rem;margin-bottom:6px;cursor:pointer}
input[type=checkbox]{accent-color:var(--green);width:16px;height:16px}

/* ---------- the pack station (home) ---------- */
.station{display:grid;grid-template-columns:minmax(300px,1fr) minmax(330px,1fr);gap:34px;align-items:center;padding:30px 34px;
  background:linear-gradient(180deg,#181c1f,#14171a)}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:440px;padding-bottom:46px;
  background:radial-gradient(55% 45% at 50% 58%,#2f4a2a55,transparent 72%)}
.podium{position:absolute;left:4%;right:4%;bottom:0;height:46px;border:3px solid #000;
  background:
    repeating-linear-gradient(90deg,#68b13a 0 16px,#5ba02f 16px 32px) top/100% 14px no-repeat,
    repeating-linear-gradient(90deg,#7b5535 0 16px,#6d4a2d 16px 32px) 0 14px/100% 100% no-repeat,#6d4a2d;
  box-shadow:inset 0 -6px 0 #00000033}
.torch{position:absolute;bottom:44px;width:64px;height:64px}
.torch.l{left:9%}.torch.r{right:9%}
.torch img{position:relative;width:64px;height:64px;z-index:1}
.torch::before{content:"";position:absolute;left:50%;top:-24px;width:190px;height:190px;margin-left:-95px;
  background:radial-gradient(circle,#ffb34766,transparent 66%);animation:flicker 2.3s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.9;transform:scale(1)}30%{opacity:.6;transform:scale(.94)}60%{opacity:1;transform:scale(1.04)}}
.stage .pack-art{margin-bottom:22px}
.controls .eyebrow{font-family:var(--ui);font-weight:700;font-size:.74rem;letter-spacing:1.4px;color:var(--muted);margin-bottom:10px}
.hotbar{display:grid;grid-template-columns:repeat(10,1fr);border:3px solid #000;background:#0b0c0d;max-width:540px}
.slot{aspect-ratio:1;position:relative;background:#2a2e32;border:3px solid;border-color:#101214 #555d65 #555d65 #101214;overflow:hidden}
.slot.sel{outline:3px solid #fff;outline-offset:-3px;z-index:2;background:#33383d}
.slot.next::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--p,0) * 100%);background:#69d94a55;border-top:2px solid #69d94acc}
.mini-pack{position:absolute;inset:14% 24%;background:linear-gradient(165deg,#47bb5c 0%,#1f7a4a 45%,#16547a 100%);border:2px solid #000;
  box-shadow:inset 2px 2px 0 #ffffff66,inset -2px -2px 0 #00000055}
.mini-pack::before,.mini-pack::after{content:"";position:absolute;left:-2px;right:-2px;height:4px;background:repeating-linear-gradient(90deg,#f2d36b 0 2px,#a8832a 2px 4px);border:1px solid #000}
.mini-pack::before{top:-3px}.mini-pack::after{bottom:-3px}
.nexttimer{display:flex;justify-content:space-between;align-items:baseline;max-width:540px;margin:14px 0 20px;padding:10px 14px;background:#101214;
  border:3px solid;border-color:#07080a #3d444b #3d444b #07080a}
.nexttimer span{font-family:var(--ui);font-weight:700;font-size:.74rem;letter-spacing:1.4px;color:var(--muted)}
.nexttimer b{font-family:var(--px);font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--green)}
.controls p{color:var(--muted);line-height:1.55;max-width:460px;font-size:.9rem;margin:16px 0 0}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- pack art ---------- */
.pack-art{width:200px;height:290px;position:relative;cursor:pointer;transition:transform .25s;filter:drop-shadow(0 18px 24px #00000088);animation:float 3.5s ease-in-out infinite}
.pack-art{perspective:800px}
.pack-tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pack-art:hover:not(.locked) .pack-tilt{--s:1.06;transition:transform .12s ease-out}
.pack-art.locked .pack-tilt{transform:none}
.pack-core{transform:translateZ(34px)}
.pack-glare{position:absolute;inset:14px 0;pointer-events:none;z-index:3;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.6),transparent 55%);mix-blend-mode:soft-light}
.pack-art:hover:not(.locked) .pack-glare{opacity:1}
.pack-art.locked{filter:grayscale(.9) brightness(.55);animation:none;cursor:default}
.pack-art.locked:hover{transform:none}
.pack-body{position:absolute;inset:14px 0;overflow:hidden;border:3px solid #000;
  background:linear-gradient(165deg,#47bb5c 0%,#1f8a52 32%,#157a7a 66%,#17507d 100%)}
.pack-body::before{content:"";position:absolute;inset:9px;border:3px dashed #ffffff66}
.pack-body::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff55 48%,transparent 62%);
  background-size:250% 100%;background-repeat:no-repeat;animation:sheen 3.2s linear infinite}
.pack-art .crimp{position:absolute;left:0;right:0;height:16px;border:3px solid #000;
  background:repeating-linear-gradient(90deg,#f6dc7a 0 4px,#b08a2a 4px 8px)}
.pack-art .crimp.top{top:0}.pack-art .crimp.bot{bottom:0}
.pack-core{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pack-core img{width:96px;height:96px;filter:drop-shadow(0 6px 0 #00000066)}
.pack-core b{font-family:var(--px);font-size:1.5rem;text-shadow:3px 3px 0 #0b3a24;letter-spacing:0;text-align:center;line-height:1.15;text-transform:uppercase}
.pack-core span{font-family:var(--ui);font-weight:800;font-size:.7rem;letter-spacing:2px;background:#000a;padding:4px 10px;border:2px solid #000}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes sheen{from{background-position:150% 0}to{background-position:-100% 0}}

/* ---------- bars: XP-style ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 16px;gap:12px}
.sec-head h2{margin:0;font-size:1rem}
.sec-head a{color:var(--green);font-weight:600;font-size:.88rem;text-decoration:none}
.sec-head a:hover{text-decoration:underline}
.bar{position:relative;height:14px;background:#0a0b0c;border:3px solid #000;box-shadow:inset 0 0 0 2px #2d3236;margin:9px 0 0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green)}
.bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,#00000050 6px 8px);pointer-events:none}
.xpwrap{position:relative;padding-top:30px}
.xpwrap .bar{height:18px;margin:0}
.xpwrap .bar i{background:linear-gradient(#b4fa68,#62c522 55%,#3f931a)}
.xp-level{position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--px);font-weight:700;font-size:1rem;color:#80e83e;
  text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000,2px 2px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;letter-spacing:1px}
.xpstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.xs{display:flex;align-items:center;gap:12px;background:#121416;padding:11px 12px;border:3px solid;border-color:#07080a #3d444b #3d444b #07080a}
.xs img{width:40px;height:40px;flex:none}
.xs b{display:block;font-family:var(--px);font-size:1rem}
.xs span{color:var(--muted);font-size:.76rem}
.section{margin-top:34px}
.section>h2{font-size:1rem;margin:0 0 14px;display:flex;align-items:center;gap:14px;letter-spacing:1px}
.section>h2::after{content:"";flex:1;height:3px;background:#2a2f33;box-shadow:0 3px 0 #0a0b0c}
.row{display:flex;gap:16px;overflow-x:auto;padding:6px 6px 16px;scroll-snap-type:x proximity}
.empty{color:var(--muted);padding:26px;border:3px dashed #2f353a;width:100%;text-align:center}

/* ---------- cards: an inventory slot with a name plate ---------- */
.tcard{--rc:var(--common);flex:0 0 170px;width:170px;scroll-snap-align:start;position:relative;padding:12px 10px 10px;display:flex;flex-direction:column;gap:7px;min-height:236px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 10%,#202326),#1a1d20 70%);
  border:3px solid;border-color:#454d55 #101214 #101214 #454d55;outline:3px solid #000}
.tcard::before{content:"";position:absolute;left:-3px;right:-3px;top:-3px;height:6px;background:var(--rc)}
.tcard.r-uncommon{--rc:var(--uncommon)}.tcard.r-rare{--rc:var(--rare)}.tcard.r-epic{--rc:var(--epic)}
.tcard.r-legendary{--rc:var(--legendary)}.tcard.r-mythic{--rc:var(--mythic)}.tcard.r-exotic{--rc:var(--exotic)}
.tcard.r-legendary{box-shadow:0 0 18px -4px var(--rc)}
.tcard.r-mythic,.tcard.r-exotic{box-shadow:0 0 24px -2px var(--rc);animation:mythic 2.4s ease-in-out infinite alternate}
@keyframes mythic{to{box-shadow:0 0 38px 2px var(--rc)}}
.tcard .art{aspect-ratio:1.4;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:4px;
  background:radial-gradient(circle at 50% 58%,color-mix(in srgb,var(--rc) 30%,#14161a),#101214 72%);
  border:3px solid;border-color:#07080a #484f56 #484f56 #07080a}
.tcard .art img{width:64px;height:64px;filter:drop-shadow(0 4px 0 #00000066)}
.tcard .num{position:absolute;top:3px;right:6px;font-family:var(--ui);font-weight:700;font-size:.66rem;color:#ffffff80;letter-spacing:.3px}
.tcard .nm{font-weight:700;font-size:.9rem;line-height:1.15;color:color-mix(in srgb,var(--rc) 80%,#fff)}
.tcard.r-common .nm{color:#eef1f4}
.tcard .rl{font-family:var(--ui);font-weight:700;font-size:.64rem;letter-spacing:.9px;text-transform:uppercase;color:var(--rc)}
.tcard .ft{margin-top:auto;font-size:.6rem;line-height:1.3;color:#ffffff3d;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;overflow-wrap:anywhere;padding-right:34px}
.tcard .qty{position:absolute;right:8px;bottom:8px;font-family:var(--ui);font-weight:800;font-size:.76rem;background:#000;color:#fff;padding:2px 6px;border:2px solid #4b535b}
.tcard.missing .art img{filter:none;opacity:.55;pointer-events:none;user-select:none;-webkit-user-drag:none}
.tcard.missing{opacity:.6}
.tcard.missing .nm{color:#8e979f}
.tcard.new::after{content:"NEW";position:absolute;top:-12px;right:-10px;background:var(--rc);color:#000;font-family:var(--ui);font-size:.68rem;font-weight:900;padding:2px 7px;border:2px solid #000}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:18px}
.cgrid .tcard{flex:none;width:auto}
.more{display:block;margin:26px auto 0}

/* ---------- tables, admin ---------- */
table{width:100%;border-collapse:collapse;margin-top:12px}
td,th{padding:12px 10px;border-bottom:3px solid #14171a;text-align:left;font-size:.92rem}
th{color:var(--muted);font-family:var(--ui);font-size:.7rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:700}
.obar{height:10px;background:#0a0b0c;border:2px solid #000;min-width:120px}.obar i{display:block;height:100%}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:18px}
.admin-grid h2,.panel>h2{margin:0 0 14px;font-size:1rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-bottom:14px}.kv span{color:var(--muted)}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.btnrow .btn{padding:9px 14px;font-family:var(--ui);font-size:.8rem;letter-spacing:.3px}
.atable td{padding:6px 10px}
.arow img{width:30px;height:30px;vertical-align:middle}
.qc{white-space:nowrap}.qc b{display:inline-block;min-width:34px;text-align:center}
.sm{background:#70767c;color:#fff;border:3px solid #000;width:28px;height:28px;cursor:pointer;font-weight:800;box-shadow:inset 2px 2px 0 #a5acb3,inset -2px -2px 0 #464b50}
.sm:hover{background:#8a9198}

/* ---------- opening overlay ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 42%,#142a1cf2,#060807fa 74%);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;padding:20px;overflow-y:auto;animation:fade .25s}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}}
@keyframes quake{
  0%{transform:none;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--hint) 35%,transparent))}
  10%{transform:translate(-2px,1px) rotate(-1deg) scale(1.02)}20%{transform:translate(3px,-2px) rotate(1.5deg) scale(1.04)}
  30%{transform:translate(-4px,2px) rotate(-2deg) scale(1.06)}40%{transform:translate(5px,-3px) rotate(2.5deg) scale(1.08)}
  50%{transform:translate(-6px,3px) rotate(-3deg) scale(1.1);filter:drop-shadow(0 0 50px color-mix(in srgb,var(--hint) 70%,transparent))}
  60%{transform:translate(7px,-4px) rotate(3.5deg) scale(1.12)}70%{transform:translate(-8px,4px) rotate(-4deg) scale(1.14)}
  80%{transform:translate(9px,-5px) rotate(4deg) scale(1.17)}90%{transform:translate(-10px,5px) rotate(-4.5deg) scale(1.2)}
  100%{transform:scale(1.26);filter:drop-shadow(0 0 100px var(--hint)) brightness(1.5)}}
.overlay .pack-art{animation:none;cursor:default}
.overlay .pack-art.opening{animation:quake 1.7s ease-in forwards}
.fxl{position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.fxl-back{z-index:1}.fxl-front{z-index:90}
.spark{position:absolute;z-index:90;background:currentColor;box-shadow:0 0 10px 2px currentColor;pointer-events:none}
.ring-fx{position:absolute;z-index:85;width:100px;height:100px;border:4px solid currentColor;border-radius:50%;pointer-events:none;
  box-shadow:0 0 24px currentColor,inset 0 0 24px currentColor}
.rays-fx{position:absolute;z-index:1;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;opacity:.75;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--rc) 55%,transparent) 0 7deg,transparent 7deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 0%,transparent 68%);mask-image:radial-gradient(circle,#000 0%,transparent 68%);
  animation:spin 7s linear infinite,raysIn .8s ease-out}
.rays-fx.big{width:960px;height:960px;margin:-480px 0 0 -480px;opacity:.9;animation:spin 4.5s linear infinite,raysIn 1s ease-out}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes raysIn{from{opacity:0;scale:.3}}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:60;animation:flash .7s ease-out}
@keyframes flash{0%{opacity:var(--fa,.9)}100%{opacity:0}}
.reveal{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;position:relative;z-index:2}
.reveal.focus .fc:not(.charging){opacity:.3;filter:saturate(.5) blur(1.5px)}
/* the card is 170 x 240 and is scaled with a transform (not CSS zoom, which phones measure differently); the box it takes up shrinks to match */
.fc{width:calc(170px * var(--z,1));height:calc(240px * var(--z,1));animation:drop .5s backwards;transition:opacity .4s,filter .4s}
.fc .sc{width:170px;height:240px;transform:scale(var(--z,1));transform-origin:0 0;perspective:900px}
@keyframes drop{from{opacity:0;transform:translateY(-40px) scale(.8)}}
.fc .in{position:relative;width:100%;height:100%;transition:transform var(--flip,.6s) cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.fc.flipped .in{transform:rotateY(180deg)}
.fc .f,.fc .b{position:absolute;inset:0;backface-visibility:hidden}
.fc .f{transform:rotateY(180deg)}
.fc .f .tcard{width:100%;height:100%}
.fc .b{border:3px solid #000;display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:2.5rem;font-weight:700;color:#ffffffb0;text-shadow:3px 3px 0 #0b3a24;
  background:repeating-conic-gradient(#2f7d3a 0 25%,#276a31 0 50%) 0 0/30px 30px;box-shadow:inset 3px 3px 0 #6fcf7a88,inset -3px -3px 0 #0b2a14,0 0 24px #3fae5233}
.fc.charging .b{animation:charge var(--chg,1.5s) ease-in forwards}
@keyframes charge{0%{box-shadow:0 0 14px -2px #b79cff;filter:brightness(1)}100%{box-shadow:0 0 80px 18px #b79cff;filter:brightness(1.7)}}
/* what a revealed card looks like, by rarity */
.fc.fx-uncommon .tcard{box-shadow:0 0 18px -4px var(--rc)}
.fc.fx-rare .tcard{box-shadow:0 0 26px -2px var(--rc)}
.fc.fx-epic .tcard{animation:pulse 1.6s ease-in-out infinite alternate}
.fc.fx-legendary .tcard,.fc.fx-mythic .tcard,.fc.fx-exotic .tcard{animation:pulse 1.1s ease-in-out infinite alternate}
@keyframes pulse{from{box-shadow:0 0 16px -2px var(--rc)}to{box-shadow:0 0 46px 4px var(--rc)}}
.fc.fx-rare .f::after,.fc.fx-epic .f::after,.fc.fx-legendary .f::after,.fc.fx-mythic .f::after,.fc.fx-exotic .f::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 50%,transparent 65%);background-size:260% 100%;background-repeat:no-repeat;animation:sheen 2.6s linear infinite}
.fc.flipped.fx-epic{animation:pop .6s ease-out}
.fc.flipped.fx-legendary{animation:pop .8s ease-out,bob 3.4s ease-in-out .8s infinite}
.fc.flipped.fx-mythic,.fc.flipped.fx-exotic{animation:pop 1s ease-out,bob 3s ease-in-out 1s infinite}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes bob{50%{transform:translateY(-8px)}}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* the list of cards is top-aligned; the pack charging up and tearing open stays centred on screen */
.overlay.bulk-grid{justify-content:flex-start;padding-top:28px;padding-bottom:120px}
.bulk-head{text-align:center;opacity:0;transition:opacity .6s}
.bulk-head.show{opacity:1}
.bulk-head h2{margin:0 0 4px;font-size:1.5rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.chip{border:2px solid var(--rc);color:var(--rc);background:color-mix(in srgb,var(--rc) 12%,#0d0f11);padding:4px 12px;font-family:var(--ui);font-weight:700;font-size:.78rem;letter-spacing:.4px}
.chip b{color:#fff;margin-left:6px}
.reveal.bulk{max-width:1180px;gap:12px;padding-bottom:10px}

/* pack tearing open */
.pack-piece{position:fixed;width:200px;height:290px;z-index:55;pointer-events:none;transform:scale(1.26)}
.pack-art.static{animation:none;cursor:default;filter:brightness(1.35)}
.pack-art.static .pack-tilt{transform:none}
.rip-glow{position:fixed;z-index:54;width:340px;height:48px;pointer-events:none;border-radius:50%;filter:blur(3px);
  background:radial-gradient(ellipse at center,#fff 0%,var(--hint) 38%,transparent 72%)}
.rip-beam{position:fixed;z-index:53;width:200px;height:360px;pointer-events:none;transform-origin:50% 100%;opacity:0;
  background:linear-gradient(to top,var(--hint),transparent 88%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(to right,transparent,#000 28%,#000 72%,transparent)}
.rip-aura{position:fixed;z-index:52;width:200px;height:290px;pointer-events:none;transform:scale(1.26);
  background:color-mix(in srgb,var(--hint) 40%,transparent);box-shadow:0 0 100px 6px var(--hint),0 0 190px 30px color-mix(in srgb,var(--hint) 45%,transparent)}
.reveal.rip .fc{animation:none}                        /* no entrance drop: the cards fly out of the pack instead */
.reveal.rip .fc.flipped.fx-epic{animation:pop .6s ease-out}
.reveal.rip .fc.flipped.fx-legendary{animation:pop .8s ease-out,bob 3.4s ease-in-out .8s infinite}
.reveal.rip .fc.flipped.fx-mythic,.reveal.rip .fc.flipped.fx-exotic{animation:pop 1s ease-out,bob 3s ease-in-out 1s infinite}
.hint{opacity:0;transition:opacity .5s}
.hint.show{opacity:1}
/* hint text + buttons live in a bar below the pack and cards, out of the way of the animation */
.dock{position:fixed;left:0;right:0;top:min(calc(50% + 210px),calc(100% - 150px));z-index:56;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.dock>*{pointer-events:auto}
@media(max-height:560px){.dock{top:auto;bottom:10px}}
.overlay.bulk-grid .dock{top:auto;bottom:0;padding:44px 0 22px;background:linear-gradient(to top,#060807f2 50%,transparent)}

/* ---------- economy: shards, shop, luck meters, crafting ---------- */
.pity-grid{display:grid;grid-template-columns:1fr 1fr 220px;gap:22px;align-items:center}
.pity-grid.two{grid-template-columns:1fr 1fr}
.meter .mh{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:.9rem}
.meter .mh span{font-family:var(--ui);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.8px}
.meter .mh b{font-size:.78rem;color:var(--muted);font-weight:600}
.shardbox{background:#121416;padding:12px 16px;text-align:center;border:3px solid;border-color:#07080a #3d444b #3d444b #07080a}
.shardbox small{color:var(--muted);letter-spacing:1.5px;font-size:.68rem;font-family:var(--ui);font-weight:700}
.shardbox b{display:block;font-family:var(--px);font-size:1.5rem;color:var(--cyan);margin:4px 0}
.shardbox span{color:var(--muted);font-size:.72rem}
.shop-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.balance{text-align:right}.balance small{color:var(--muted);letter-spacing:1.5px;font-size:.68rem;font-family:var(--ui);font-weight:700}
.balance b{display:block;font-family:var(--px);font-size:2rem;color:var(--cyan)}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shop-grid .panel{margin-bottom:0}
.rec{display:grid;grid-template-columns:auto 110px 1fr auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:3px solid #14171a;cursor:pointer}
.rec input:disabled{opacity:.3}
.rec b{color:var(--cyan)}
.shop-packs{display:flex;flex-direction:column;gap:14px}
.sp{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border:3px solid;border-color:#454d55 #101214 #101214 #454d55;outline:3px solid #000;
  background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 14%,#1d2023),#1a1d20);border-left:8px solid var(--rc)}
.sp b{display:block;color:var(--rc);font-family:var(--px);font-size:1rem;text-transform:uppercase;margin-bottom:4px}.sp span{font-size:.82rem}
.sp .btn{padding:10px 16px;white-space:nowrap}
.craft{width:100%;border:2px solid #000;background:#1d3b44;color:var(--cyan);padding:6px 6px;font-weight:800;font-size:.72rem;cursor:pointer;font-family:var(--ui);letter-spacing:.3px;
  box-shadow:inset 2px 2px 0 #2f6573,inset -2px -2px 0 #0f2128}
.craft:hover{background:#25505c}
.craft.poor{background:#26292c;color:var(--muted);box-shadow:inset 2px 2px 0 #3a3f44,inset -2px -2px 0 #16181a}
.tcard .ft:has(.craft){margin-top:auto}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:90;background:#15181b;border:3px solid #000;box-shadow:inset 3px 3px 0 #4b535b,inset -3px -3px 0 #0e1012;color:#fff;
  padding:14px 22px;font-weight:600;animation:toastIn .25s ease-out;transition:opacity .4s}
.toast.bad{box-shadow:inset 3px 3px 0 #8a4a3a,inset -3px -3px 0 #3a1a12}.toast.out{opacity:0}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}}
.modal-back{position:fixed;inset:0;z-index:80;background:#060807cc;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.modal{background:var(--stone);padding:24px 26px;max-width:430px;width:100%;border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);outline:3px solid #000;box-shadow:0 30px 80px #000c}
.modal h3{margin:0 0 10px;font-size:1rem}.modal p{color:var(--muted);line-height:1.55;margin:0 0 20px}.modal p b{color:var(--cyan)}

@media (prefers-reduced-motion:reduce){.pack-art,.fc.flipped,.rays-fx,.fc .f::after,.torch::before{animation:none!important}.pack-tilt{transition:none}}

/* ---------- small screens: the sidebar becomes a menu that slides in from the left (opened by the button at the top-left) ---------- */
@media(max-width:900px){
  .app{display:block}
  .toplogo{display:flex;justify-content:center;padding:16px 64px 0}.toplogo img{width:180px;max-width:100%;height:auto}
  main{padding:20px 16px 40px}
  .station{grid-template-columns:1fr;padding:20px 16px}.stage{min-height:400px}
  .xpstats{grid-template-columns:repeat(2,1fr)}
  .pity-grid,.shop-grid{grid-template-columns:1fr}.rec{grid-template-columns:auto 90px 1fr auto}.balance{text-align:left}

  .side{position:fixed;top:0;bottom:0;left:0;width:min(310px,86vw);height:auto;z-index:90;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-104%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
  body.menu-open .side{transform:none;visibility:visible;transition:transform .25s ease;box-shadow:0 0 44px #000}
  body.menu-open{overflow:hidden}
  body .menu-back{display:block}
  body .menu-btn{display:flex}
}
.menu-btn{display:none;position:absolute;top:12px;left:14px;z-index:40;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer;
  background:#101214;border:3px solid;border-color:#3d444b #07080a #07080a #3d444b}
.menu-btn:hover{background:#15191c}
.menu-btn span{display:block;width:20px;height:3px;background:#dfe5ea}
.menu-dot{position:absolute;top:-6px;right:-6px;width:14px;height:14px;background:var(--green);border:2px solid #000;border-radius:50%;box-shadow:0 0 8px var(--green)}
.menu-dot[hidden]{display:none}
.menu-back{display:none;position:fixed;inset:0;z-index:85;background:#000b;opacity:0;pointer-events:none;transition:opacity .2s}
body.menu-open .menu-back{opacity:1;pointer-events:auto}

/* ---------- exotic cards & the solo reveal for Mythic / Exotic pulls ---------- */
.exo-note{color:#3fd9c6;font-style:normal}
.solo{position:fixed;inset:0;z-index:57;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rc) 24%,#0a0c0e),#030405 80%);animation:fade .35s}
.solo.out{opacity:0;transition:opacity .25s}
.solo>.solo-title,.solo>.fc,.solo>.solo-odds,.solo>.solo-go{position:relative;z-index:2}
.solo-title{font-family:var(--px);font-weight:700;font-size:2rem;letter-spacing:2px;text-align:center;color:color-mix(in srgb,var(--rc) 45%,#fff);
  text-shadow:0 0 24px var(--rc),0 0 60px var(--rc),3px 3px 0 #000;opacity:0;transform:translateY(-14px);transition:opacity .6s,transform .6s}
.solo .fc{animation:none}
.solo-odds{font-family:var(--ui);font-weight:800;font-size:1.15rem;color:#fff;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .6s .15s,transform .6s .15s}
.solo-odds span{color:var(--muted);font-weight:600}
.solo.shown .solo-title,.solo.shown .solo-odds{opacity:1;transform:none}
.solo-go{opacity:0;pointer-events:none;transition:opacity .5s}
.solo-go.show{opacity:1;pointer-events:auto}
@media(max-width:600px){.solo-title{font-size:1.5rem;letter-spacing:1px}}

/* ---------- admin: manage players ---------- */
#aPlayers{overflow-x:auto}
.ptable td{vertical-align:middle}
.pact{display:flex;gap:6px;flex-wrap:wrap;min-width:230px}
.pact .sm{width:auto;height:auto;padding:5px 9px;font-family:var(--ui);font-size:.72rem;font-weight:700;white-space:nowrap}
.pact .sm.danger{background:#7a3030;box-shadow:inset 2px 2px 0 #b35a5a,inset -2px -2px 0 #4a1717}
.admin-grid .wide{grid-column:1/-1}


/* ---------- admin: player lookup ---------- */
.pstats{font-size:.85rem;margin:-4px 0 12px}
.psearch{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.psearch input{flex:1;min-width:200px;background:#101214;color:var(--text);border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;border-radius:0;padding:10px 12px;font-size:1rem;font-family:inherit}
.psearch input:focus{outline:2px solid var(--green);outline-offset:1px}
.psearch .btn{padding:9px 16px;font-family:var(--ui);font-size:.85rem}
.panel .err{color:#ff7a7a;font-size:.88rem;min-height:1.2em;margin-top:6px}
.pcard{margin-top:16px;padding-top:16px;border-top:3px solid #000;box-shadow:0 -3px 0 #272b2f}
.phead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.phead h3{margin:0;font-family:var(--px);font-size:1.5rem}
.phead .muted{flex-basis:100%;font-size:.85rem}
.badge{font-family:var(--ui);font-weight:800;font-size:.68rem;letter-spacing:1px;padding:3px 8px;border:2px solid #000}
.badge.adm{background:#fbbf24;color:#2a1d00}.badge.ban{background:#e5484d;color:#fff}
.banbox{margin:12px 0;padding:10px 14px;background:#3a1618;border:3px solid #7a2c30;color:#ffc9cb;font-size:.9rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:14px}
.psec{background:#15181b;border:3px solid #000;box-shadow:inset 3px 3px 0 #272b2f;padding:12px 14px}
.psec h4,.pcard>h4{margin:0 0 10px;font-family:var(--ui);font-size:.8rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.setrow{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.setrow label{width:56px;font-size:.85rem;color:var(--muted)}
.setrow input,.qin{background:#101214;color:var(--text);border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;border-radius:0;padding:6px 8px;width:96px;font-size:.9rem;font-family:inherit}
.qin{width:70px;text-align:center;padding:3px 4px}
.setrow .btn{padding:7px 14px;font-family:var(--ui);font-size:.78rem}
.pcard .filters{align-items:center}
.plog{list-style:none;margin:0;padding:0;font-size:.85rem;display:flex;flex-direction:column;gap:5px}
.plog li{padding:5px 0;border-bottom:1px solid #20252a}
.qc{white-space:nowrap}
.qc .sm{vertical-align:middle}
.qc .qin{vertical-align:middle;margin:0 4px}

/* ---------- about & credits ---------- */
.about-link{display:block;text-align:center;font-family:var(--ui);font-size:.74rem;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0}
.about-link:hover{color:#fff;text-decoration:underline}
footer a{color:#8a949c}footer a:hover{color:#fff}
.about{max-width:720px}
.about h2{margin:26px 0 6px;font-size:1rem}
.about p{line-height:1.6;margin:6px 0;color:#cdd3d8}
.about a{color:var(--green)}

/* ---------- leaderboards ---------- */
.lbtabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.lbtabs button{padding:9px 14px;font-family:var(--ui);font-weight:700;font-size:.85rem;color:var(--muted);background:#101214;border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;cursor:pointer}
.lbtabs button:hover{color:#fff}
.lbtabs button.on{color:#fff;background:#262b2f;border-color:#000;box-shadow:inset 3px 3px 0 #3e454c,inset -3px -3px 0 #14171a}
table.lb{width:100%;border-collapse:collapse;background:#15181b;border:3px solid #000;box-shadow:inset 3px 3px 0 #272b2f}
table.lb td{padding:10px 12px;border-bottom:1px solid #20252a}
.lb-rank{width:56px;text-align:center;font-family:var(--px);font-size:1.1rem;color:var(--muted)}
.lb-gold{color:#fbbf24}.lb-silver{color:#cfd6dc}.lb-bronze{color:#d08a4e}
.lb-name{font-weight:700}
.lb-val{text-align:right;font-weight:800;white-space:nowrap}
.lb-extra{font-size:.82rem}
tr.lb-me td{background:#1d2a1f}
.lb-yours{margin:0 0 10px;padding:10px 14px;background:#1d2a1f;border:3px solid #2f5a2c;font-size:.92rem}
.lb-how{font-size:.85rem;line-height:1.5;margin:0 0 12px}
.lb-off{color:#ffb86b}
@media(max-width:600px){.lb-extra{display:none}.lb-rank{width:40px}}

/* ---------- profiles ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--s,64px);height:var(--s,64px);box-sizing:border-box;--rc:var(--common);
  border:3px solid var(--rc);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--rc) 28%,#14161a),#101214 75%);box-shadow:0 0 0 3px #000,0 0 14px -3px var(--rc)}
.avatar img{width:78%;height:78%;image-rendering:pixelated;object-fit:contain}
.avatar.r-uncommon{--rc:var(--uncommon)}.avatar.r-rare{--rc:var(--rare)}.avatar.r-epic{--rc:var(--epic)}.avatar.r-legendary{--rc:var(--legendary)}.avatar.r-mythic{--rc:var(--mythic)}.avatar.r-exotic{--rc:var(--exotic)}
.profile,.edit{max-width:980px}
.pf-head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.pf-who{flex:1;min-width:220px}
.pf-who h1{margin:0 0 4px}
.pf-bio{margin:10px 0 14px;line-height:1.55;color:#d6dce1;overflow-wrap:anywhere}
.pf-online{color:var(--green);font-weight:700}
.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:22px 0 6px}
.pf-stat{background:#15181b;border:3px solid #000;box-shadow:inset 3px 3px 0 #272b2f;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pf-stat small{font-family:var(--ui);font-size:.66rem;letter-spacing:1.3px;color:var(--muted)}
.pf-stat b{font-family:var(--px);font-size:1.5rem}
.pf-rank{margin-top:4px;font-family:var(--ui);font-size:.74rem;font-weight:800;color:#fbbf24}
.profile h2,.edit h2{margin:26px 0 10px;font-size:1rem}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge2{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;background:#1b2023;border:3px solid #000;box-shadow:inset 2px 2px 0 #30373d;font-family:var(--ui);font-weight:700;font-size:.82rem}
.badge2 img{width:26px;height:26px;image-rendering:pixelated}
.badge2.locked{opacity:.38;filter:grayscale(1)}
.profile .row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.ed-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ed-btns{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ed-btns .btn,.edit .btnrow .btn{padding:9px 16px;font-family:var(--ui);font-size:.82rem}
.edit textarea{width:100%;font-family:inherit;font-size:.95rem;resize:vertical}
.edit .row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--muted);font-family:var(--ui);font-weight:600;max-width:380px;margin-bottom:12px}
.fld input{background:#101214;color:var(--text);border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;border-radius:0;padding:10px 12px;font-size:1rem;font-family:inherit}
.picker{margin:12px 0;padding:12px;background:#15181b;border:3px solid #000;box-shadow:inset 3px 3px 0 #272b2f}
.pk-q{width:100%;box-sizing:border-box;background:#101214;color:var(--text);border:3px solid;border-color:#07080a #3d444b #3d444b #07080a;border-radius:0;padding:8px 10px;font-size:.9rem;font-family:inherit;margin-bottom:10px}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;max-height:260px;overflow-y:auto;padding:2px}
.pk{--rc:var(--common);aspect-ratio:1;padding:4px;background:#101214;border:3px solid #30373d;cursor:pointer}
.pk img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain;pointer-events:none}
.pk:hover{border-color:var(--rc)}
.pk.on{border-color:var(--rc);box-shadow:0 0 0 2px #000,0 0 12px var(--rc);background:color-mix(in srgb,var(--rc) 22%,#101214)}
.pk.r-uncommon{--rc:var(--uncommon)}.pk.r-rare{--rc:var(--rare)}.pk.r-epic{--rc:var(--epic)}.pk.r-legendary{--rc:var(--legendary)}.pk.r-mythic{--rc:var(--mythic)}.pk.r-exotic{--rc:var(--exotic)}
.pk-n{margin-top:8px;font-size:.8rem}
.pfind{margin:14px 0 0}
.pfind input{max-width:360px}
.lb-user{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.lb-user:hover span{text-decoration:underline}
.lb-user .avatar{box-shadow:0 0 0 2px #000}
.ulink{color:var(--green)}
@media(max-width:600px){.pf-head{gap:14px}.pf-who h1{font-size:1.4rem}}
@media(max-width:600px){.pf-stats{grid-template-columns:1fr 1fr;gap:10px}.pf-stat{padding:10px}.pf-stat b{font-size:1.1rem}.pf-head .avatar{--s:72px!important}}

/* ---------- badge tooltips & the badges page ---------- */
.badge2{cursor:default;outline-offset:2px}
.badge2:hover,.badge2:focus-visible{border-color:#fbbf24;outline:none}
.tip{position:fixed;z-index:300;display:flex;gap:12px;align-items:flex-start;max-width:270px;padding:12px 14px;background:#0e1113;border:3px solid #fbbf24;box-shadow:0 0 0 3px #000,0 8px 24px #000a;pointer-events:none}
.tip[hidden]{display:none}
.tip.locked{border-color:#6b747c}
.tip-icon{width:40px;height:40px;image-rendering:pixelated;flex:none}
.tip.locked .tip-icon{filter:grayscale(1);opacity:.6}
.tip-name{display:block;font-family:var(--ui);font-size:.95rem;color:#fff}
.tip-desc{margin-top:3px;font-size:.85rem;line-height:1.4;color:#cdd3d8}
.tip-state{margin-top:6px;font-family:var(--ui);font-size:.78rem;font-weight:800;color:var(--green)}
.tip.locked .tip-state{color:#ffb86b}
.tip-pct{margin-top:3px;font-size:.76rem;color:var(--muted)}
.bd-group{margin:26px 0 10px;font-size:1rem}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.bd{display:flex;gap:14px;padding:14px;background:#15181b;border:3px solid #000;box-shadow:inset 3px 3px 0 #272b2f}
.bd.earned{border-color:#2f6f21;box-shadow:inset 3px 3px 0 #2c4a26,0 0 14px -6px #69d94a}
.bd-icon{width:48px;height:48px;image-rendering:pixelated;flex:none}
.bd.locked .bd-icon{filter:grayscale(1);opacity:.45}
.bd-info{flex:1;min-width:0}
.bd-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.bd-top b{font-family:var(--ui);font-size:.98rem}
.bd-ok{font-family:var(--ui);font-size:.72rem;font-weight:800;color:var(--green);white-space:nowrap}
.bd-desc{margin:3px 0 8px;font-size:.88rem;color:#cdd3d8}
.bd-prog,.bd-pct{font-size:.76rem;margin-top:4px}
.bd .bar{height:12px}
.profile .sec-head{margin:26px 0 10px}.profile .sec-head h2{margin:0}

/* ---------- the profile picture in the account pill ---------- */
.acct a::before{content:none}
.acct a{display:flex;align-items:center;gap:8px}
.acct .avatar{width:26px;height:26px;border-width:2px;box-shadow:0 0 0 2px #000}
#acctName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- notifications ---------- */
.content{position:relative}
.topbar{display:flex;justify-content:flex-end;padding:12px 26px 0;min-height:54px}
.bell{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#101214;border:3px solid;border-color:#3d444b #07080a #07080a #3d444b}
.bell[hidden]{display:none}
.bell:hover{background:#15191c}
.bell img{width:24px;height:24px;image-rendering:pixelated;transform-origin:50% 10%}
.bell.ring img{animation:ring .9s ease}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.bell-n{position:absolute;top:-9px;right:-9px;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  background:#e5484d;color:#fff;border:2px solid #000;font-family:var(--ui);font-weight:800;font-size:.72rem}
.bell-n[hidden]{display:none}
.notifs{position:fixed;top:68px;right:24px;width:min(390px,calc(100vw - 16px));max-height:min(72vh,580px);display:flex;flex-direction:column;z-index:80;
  background:#14171a;border:3px solid #000;box-shadow:inset 3px 3px 0 #30373d,0 14px 34px #000b}
.notifs[hidden]{display:none}
.np-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:3px solid #000;background:#1a1e21}
.np-head b{font-family:var(--ui);font-size:.95rem}
.np-head div{display:flex;gap:6px}
.np-head button{font-family:var(--ui);font-weight:700;font-size:.72rem;padding:5px 9px;color:#fff;background:#3b4147;border:2px solid;border-color:#5a636b #15181b #15181b #5a636b;cursor:pointer}
.np-head button:disabled{opacity:.4;cursor:default}
.np-list{overflow-y:auto;flex:1}
.np-item{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;padding:11px 14px;background:transparent;border:0;border-bottom:1px solid #22272c;color:var(--text);cursor:pointer;font:inherit}
.np-item:hover{background:#1c2125}
.np-item.unread{background:#18271c}
.np-item.unread:hover{background:#1e3023}
.np-item img{width:32px;height:32px;image-rendering:pixelated;flex:none;margin-top:1px}
.np-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.np-body b{font-family:var(--ui);font-size:.9rem;color:#fff}
.np-body span{font-size:.82rem;line-height:1.4;color:#cdd3d8;overflow-wrap:anywhere}
.np-body small{font-size:.72rem;color:var(--muted)}
.np-dot{flex:none;width:10px;height:10px;margin-top:6px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green)}
.np-empty{padding:26px 18px;text-align:center;font-size:.88rem;color:var(--muted);line-height:1.5}
.foot-badges{display:none}

@media(max-width:900px){
  .topbar{position:absolute;top:0;right:0;z-index:40;min-height:0;padding:12px 14px 0}
  .notifs{top:66px;right:8px}
}
@media(max-width:900px){.content{overflow-x:clip}}
@media(max-width:600px){.odds-t{display:block;max-width:100%;overflow-x:auto}.odds-t th,.odds-t td{padding:8px 6px;font-size:.84rem}.odds-bar th:nth-child(3),.odds-bar td:nth-child(3){display:none}}

/* ---------- admin: leaderboard ban ---------- */
.badge.ban2{background:#b45309;color:#fff}
.lbline{margin-top:6px;font-size:.85rem}