:root {
  --bg: #0b0f14;
  --bg2: #111821;
  --panel: #151d27;
  --panel2: #1b2531;
  --line: #2a3644;
  --text: #dfe6ee;
  --mute: #8796a7;
  --ct: #5ab0ff;
  --t: #e0703a;
  --gold: #f2c14e;
  --red: #ff4655;
  --green: #3fbf6b;
  --radius: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #18263a 0%, transparent 60%), var(--bg);
  color: var(--text);
  font: 600 15px/1.35 Nunito, system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: rgba(11, 15, 20, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.logo { font: 22px 'Lilita One', sans-serif; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.logo b { color: var(--gold); font-weight: 400; margin-left: 6px; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 4px;
  background: linear-gradient(135deg, var(--red), #a3202b);
  box-shadow: inset 0 0 0 2px #ffffff22;
  position: relative;
}
.logo-mark::after { content: ''; position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ffe066; box-shadow: 0 0 8px #ffe066; }
.top-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  text-decoration: none; white-space: nowrap;
}
.chip.ca { color: var(--mute); font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.chip.bal b { color: var(--gold); font-size: 17px; }
.chip.ghost:hover, .chip.addr:hover { border-color: var(--ct); }
.coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe28a, #c8901c); box-shadow: inset 0 0 0 2px #8a5d0c55; display: inline-block; }
.sym { font-style: normal; color: var(--mute); }
.btn {
  border: 0; border-radius: var(--radius);
  padding: 10px 16px;
  background: linear-gradient(180deg, #ffd56a, #e2a92a);
  color: #1a1408; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 0 2px 0 #8a650f;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.btn.big { padding: 14px 18px; font-size: 17px; width: 100%; }
.btn.ghost { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ct); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.work-row { margin-top: 10px; }
.work-row .btn { color: #fff; opacity: .55; filter: saturate(.5); }
.btn.work-on { background: linear-gradient(180deg, #4fd27a 0 50%, #2fb35c 50%); }
.btn.work-off { background: linear-gradient(180deg, #ff6b5e 0 50%, #e5463a 50%); }
.work-row .btn.active { opacity: 1; filter: none; box-shadow: 0 0 0 3px #fff inset; cursor: default; }
.wd-btn { width: 100%; margin-top: 8px; }
.login { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: min(460px, 100%);
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line); border-radius: 10px;
  padding: 28px 26px; text-align: center;
  box-shadow: 0 20px 60px #0008;
}
.login-badge {
  width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #233448 0 55%, transparent 56%), conic-gradient(var(--gold) 0 25%, var(--ct) 0 50%, var(--gold) 0 75%, var(--ct) 0);
  position: relative;
}
.login-badge::after { content: ''; position: absolute; inset: 30px; border-radius: 4px; background: var(--red); box-shadow: 0 0 18px var(--red); }
.login h1 { font: 38px 'Lilita One', sans-serif; margin: 6px 0 4px; letter-spacing: 1px; }
.login h1 b { color: var(--gold); font-weight: 400; margin-left: 8px; }
.tag { color: var(--mute); margin: 0 0 16px; }
.how { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; display: grid; gap: 8px; }
.how li { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: flex; gap: 10px; align-items: center; }
.how li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ct); color: #06121f; flex: none; }
.fine { color: var(--mute); font-size: 13px; margin: 10px 0 0; }
.game {
  max-width: 1600px; margin: 0 auto; padding: 16px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px;
  grid-template-areas: "field field" "side roster"; align-items: start;
}
.field-wrap { grid-area: field; min-width: 0; width: 100%; max-width: calc((100vh - 120px) * 16 / 9); margin: 0 auto; }
.side { grid-area: side; display: flex; flex-direction: column; gap: 10px; }
.roster { grid-area: roster; }
.hud {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0; padding: 8px 14px;
}
.hud-l span { font-size: 17px; }
.hud-l em { font-style: normal; color: var(--mute); margin-left: 10px; }
.hud-c { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.hud-c .vs { color: var(--mute); font-size: 14px; }
.ct-tag, .t-tag { font-size: 12px; padding: 2px 6px; border-radius: 3px; }
.ct-tag { background: var(--ct); color: #06121f; }
.t-tag { background: var(--t); color: #1d0c03; }
.hud-c b:first-of-type { color: var(--ct); }
.hud-c b:last-of-type { color: var(--t); }
.hud-r { text-align: right; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.canvas-box { position: relative; border: 1px solid var(--line); border-radius: 0 0 8px 8px; overflow: hidden; background: #000; }
#field { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.killfeed { position: absolute; top: 8px; right: 8px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; pointer-events: none; }
.killfeed li { background: #000a; border: 1px solid #ffffff1a; padding: 2px 8px; border-radius: 3px; font-size: 13px; transition: opacity .4s; }
.killfeed .gun { color: var(--mute); margin: 0 6px; }
.killfeed .kf-gun { width: 39px; height: 13.5px; margin: 0 5px; vertical-align: middle; }
.killfeed .vic { color: var(--t); }
.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: #000c; border: 1px solid var(--gold); border-radius: 6px;
  padding: 12px 26px; text-align: center; pointer-events: none;
  font: 26px 'Lilita One', sans-serif; color: var(--gold); letter-spacing: 1px;
  animation: pop .25s ease-out;
}
.banner small { display: block; font: 800 16px Nunito, sans-serif; color: var(--text); letter-spacing: 0; margin-top: 2px; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }
.empty-note {
  position: absolute; inset: auto 0 18px 0; margin: auto; width: fit-content; max-width: 90%;
  background: #000c; border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; text-align: center;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat span { display: block; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.stat b { font-size: 19px; }
#sBal, #sLast { color: var(--gold); }
.odds h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; color: var(--mute); letter-spacing: 1px; }
.odds ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.odds li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center; }
.odds li i { width: 10px; height: 10px; border-radius: 2px; }
.odds li em { font-style: normal; color: var(--mute); min-width: 44px; text-align: right; }
.roster-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; flex-wrap: wrap; }
.roster-head h2 { font: 22px 'Lilita One', sans-serif; margin: 0; letter-spacing: 1px; }
.filters { display: flex; gap: 4px; margin-left: auto; }
.filters button { background: var(--panel); border: 1px solid var(--line); color: var(--mute); border-radius: 4px; padding: 4px 10px; }
.filters button.on { color: var(--text); border-color: var(--ct); }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.roster-head { margin-top: 0; }
.roster-empty { color: var(--mute); text-align: center; padding: 30px 0; }
.op {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  border-top: 3px solid var(--rc, #888);
}
.op canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 30%, #0b0f14), #0b0f14); }
.op .body { padding: 8px 10px 10px; }
.op .nm { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.op .nm b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op .nm em { font-style: normal; font-size: 12px; color: var(--rc); text-transform: uppercase; white-space: nowrap; }
.op .st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0; font-size: 12px; color: var(--mute); }
.op .st b { display: block; color: var(--text); font-size: 14px; }
.op .bar { height: 6px; background: #0007; border-radius: 3px; overflow: hidden; }
.op .bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fbf6b, #a5e05a); }
.op .state { position: absolute; top: 8px; left: 8px; font-size: 11px; padding: 2px 6px; border-radius: 3px; background: #000a; letter-spacing: .5px; }
.op .state.field { color: var(--ct); }
.op .state.rest { color: var(--mute); }
.op .en { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); margin-bottom: 3px; }
.modal { position: fixed; inset: 0; z-index: 50; background: #000b; display: grid; place-items: center; padding: 16px; }
.box {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px;
}
.box.wide { width: min(720px, 100%); }
.box h3 { margin: 0 0 8px; font: 22px 'Lilita One', sans-serif; letter-spacing: 1px; }
.box h4 { margin: 18px 0 6px; color: var(--mute); text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
.box .sub { color: var(--mute); margin: 0 0 14px; }
.box label { display: block; margin: 10px 0; color: var(--mute); font-size: 13px; }
.box input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg2); color: var(--text); }
.box input:focus { outline: none; border-color: var(--ct); }
.x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--mute); font-size: 26px; line-height: 1; }
.x:hover { color: var(--text); }
.msg { min-height: 1.2em; color: var(--gold); margin: 10px 0 0; }
.calc { color: var(--mute); margin: 0 0 10px; font-size: 14px; }
.wallets { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.wallet-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none;
}
.wallet-opt:hover { border-color: var(--ct); }
.wallet-opt canvas { width: 36px; height: 36px; image-rendering: pixelated; }
.wallet-opt span { flex: 1; text-align: left; }
.wallet-opt .tag { font-style: normal; font-size: 12px; margin: 0; padding: 2px 8px; border-radius: 999px; background: var(--panel2); }
.wallet-opt .tag.on { color: var(--green); }
.wallet-opt.off { opacity: .7; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.salary-box { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px; padding: 8px 12px; border: 4px solid #1b1626; border-radius: 14px; background: #2a2245; color: #fff; font: inherit; font-weight: 800; cursor: pointer; text-align: left; }
.salary-box span { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #b9b0d6; }
.salary-box b { flex: 1; font-size: 15px; color: #5df08e; }
.salary-box em { font-style: normal; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: #1b1626; }
.salary-box.due { background: #5a1f2a; animation: due 1.2s ease-in-out infinite; }
.salary-box.due b { color: #ff8a7a; }
@keyframes due { 50% { box-shadow: 0 0 0 4px rgba(255, 90, 80, .45); } }
.salary-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.salary-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 4px solid #1b1626; border-radius: 16px; background: var(--panel2); color: #fff; font: inherit; cursor: pointer; }
.salary-plan b { font-size: 20px; }
.salary-plan span { color: var(--gold); font-size: 18px; font-weight: 800; }
.salary-plan s { color: #b9b0d6; font-size: 13px; }
.salary-plan.best { background: linear-gradient(180deg, #245c3a, var(--panel2)); }
.salary-plan i { position: absolute; top: -12px; right: -8px; padding: 2px 10px; border: 3px solid #1b1626; border-radius: 999px; background: #ff4b3e; font-style: normal; font-weight: 800; }
.salary-plan:disabled { opacity: .5; cursor: default; }
.pro-box { background: #1f3550; }
.pro-box.off { background: #3a3150; }
.pro-box.off b { color: #b9b0d6; }
.op { cursor: pointer; }
.op:hover { filter: brightness(1.08); }
.op .gun-tag { position: absolute; top: 32px; left: 8px; z-index: 1; font-size: 10px; padding: 1px 6px; border: 2px solid var(--ol); border-radius: 8px; background: #1b1626; color: #ffd23f; font-weight: 900; }
.gun-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gun-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border: 4px solid var(--ol); border-radius: 16px; background: var(--panel2); }
.gun-card.on { background: linear-gradient(180deg, #245c3a, var(--panel2)); }
.gun-card canvas { width: 100%; max-width: 220px; height: auto; }
.gun-card h4 { margin: 0; font: 20px 'Lilita One', sans-serif; letter-spacing: 1px; }
.gun-card ul { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--mute); text-align: center; }
.gun-card .btn { width: 100%; margin-top: auto; }
@media (max-width: 720px) { .gun-list { grid-template-columns: 1fr; } }
.gear-btn { margin-top: 10px; background: linear-gradient(180deg, #4fd27a 0 50%, #2fb35c 50%); }
.gear-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gear-bar:empty { display: none; }
.gear-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 3px solid #1b1626; border-radius: 999px; background: #2a2245; color: #fff; font-size: 13px; font-weight: 800; }
.gear-chip svg { width: 22px; height: 22px; }
.gear-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gear-item { border: 4px solid #1b1626; border-radius: 16px; background: var(--panel2); padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.gear-item.on { background: linear-gradient(180deg, #245c3a, var(--panel2)); }
.gear-item.locked { filter: grayscale(.6); }
.gear-item svg { width: 64px; height: 64px; margin: 0 auto; }
.gear-item h4 { margin: 0; font-size: 18px; text-transform: none; letter-spacing: 0; }
.gear-item p { margin: 0; font-size: 13px; line-height: 1.35; flex: 1; }
.gear-item .price { color: var(--gold); font-size: 18px; flex: 0; }
.gear-item .state { font-size: 12px; font-weight: 800; color: #9fd3ff; flex: 0; }
.gear-item.on .state { color: #5df08e; }
.gear-item.locked .state { color: #ff8a7a; }
@media (max-width: 720px) { .gear-list { grid-template-columns: 1fr; } }
.pack { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; text-align: center; }
.pack.best { border-color: var(--gold); }
.pack h4 { margin: 8px 0 2px; color: var(--text); font-size: 18px; text-transform: none; letter-spacing: 0; }
.pack .price { color: var(--gold); margin: 0 0 10px; font-size: 18px; }
.crate {
  height: 90px; margin: 0 auto; width: 120px; border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 46%, #0005 46% 54%, transparent 54%),
    repeating-linear-gradient(0deg, #4c5b3a 0 14px, #42502f 14px 16px);
  box-shadow: inset 0 0 0 4px #2c361f, 0 6px 14px #0007;
  position: relative;
}
.crate::after { content: 'x1'; position: absolute; right: 8px; bottom: 6px; font: 18px 'Lilita One', sans-serif; color: #f2c14ecc; }
.crate.x10::after { content: 'x10'; }
.reveal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 10px 0 16px; }
.reveal-grid .op { animation: flip .45s ease-out both; }
.reveal-grid .op .st { display: none; }
@keyframes flip { from { transform: rotateY(90deg) scale(.9); opacity: 0; } }
.wd-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 14px; }
.wd-list li { display: flex; justify-content: space-between; gap: 8px; background: var(--bg2); border-radius: 4px; padding: 6px 8px; }
.wd-list .pending { color: var(--gold); }
.wd-list .paid { color: var(--green); }
.ref-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.ref-stats div { background: var(--bg2); border-radius: 6px; padding: 8px; }
.ref-stats span { display: block; color: var(--mute); font-size: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
  background: #0d141c; border: 1px solid var(--gold); color: var(--text);
  padding: 10px 18px; border-radius: 6px; max-width: min(520px, calc(100% - 32px)); text-align: center;
  box-shadow: 0 10px 30px #000a;
}
@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; grid-template-areas: "field" "side" "roster"; padding: 10px 16px; }
  .field-wrap { max-width: none; }
  .chip.ca { display: none; }
  .logo { font-size: 18px; }
  .hud { grid-template-columns: 1fr auto; }
  .hud-r { display: none; }
}
@media (max-width: 520px) {
  .top { padding: 8px 12px; gap: 8px; }
  .logo-mark { display: none; }
  #inviteBtn { display: none; }
  .logo { font-size: 16px; }
  .top-right { gap: 4px; }
  .top-right .chip { padding: 5px 8px; font-size: 13px; }
  #balChip .sym { display: none; }
  .packs { grid-template-columns: 1fr; }
  .killfeed li { font-size: 11px; }
}
:root {
  --bg: #121411;
  --bg2: #1a1d18;
  --panel: rgba(30, 34, 27, .94);
  --panel2: #262a22;
  --line: #070806;
  --ol: #070806;
  --hi: #4d5341;           
  --lo: #050604;           
  --text: #d8dacb;
  --mute: #8e927c;
  --ct: #8fb0d0;
  --t: #d08a4a;
  --gold: #e0b44a;
  --red: #c8483a;
  --green: #9db04a;
  --radius: 0;
}
body {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(900px 500px at 70% -10%, #262b22 0%, transparent 60%), var(--bg);
  font: 13px/1.35 Tahoma, Verdana, 'Segoe UI', sans-serif; font-weight: 400; color: var(--text);
}
.top { background: linear-gradient(180deg, #23271f, #171a14); border-bottom: 1px solid var(--lo); box-shadow: inset 0 -1px 0 var(--hi); backdrop-filter: none; }
.logo { font: 22px 'Allerta Stencil', sans-serif; letter-spacing: 3px; color: #c9cbb8; text-shadow: 1px 1px 0 #000; -webkit-text-stroke: 0; }
.logo b { color: var(--gold); }
.logo-mark { border: 1px solid var(--lo); border-radius: 0; background: #6b2a22; box-shadow: inset 1px 1px 0 #a04a3a; }
.logo-mark::after { box-shadow: none; background: #e0b44a; border-radius: 0; left: 8px; top: 8px; }
.chip { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); box-shadow: none; font-weight: 700; color: var(--text); padding: 5px 10px; }
.chip.bal b { color: var(--gold); text-shadow: none; font: 22px 'VT323', monospace; }
.coin { border: 1px solid #000; border-radius: 0; background: var(--gold); width: 12px; height: 12px; box-shadow: none; }
.sym { color: var(--mute); }
.btn {
  border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0;
  background: linear-gradient(180deg, #4a4f3e, #383c2f); color: #e6e8d8;
  font: 700 12px Tahoma, Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.08);
}
.btn:hover { filter: none; background: linear-gradient(180deg, #575d48, #42473a); color: #fff; }
.btn:active { transform: none; border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: #2e3127; box-shadow: none; }
.btn.big { padding: 11px 14px; font-size: 13px; }
.btn.ghost { background: linear-gradient(180deg, #333a40, #262c31); color: #d4dbe2; box-shadow: inset 1px 1px 0 rgba(255,255,255,.06); text-shadow: 1px 1px 0 #000; }
.btn.ghost:hover { background: linear-gradient(180deg, #3e464d, #2e353b); box-shadow: inset 1px 1px 0 rgba(255,255,255,.06); }
#connectBtn { background: linear-gradient(180deg, #8a6a24, #6b511a); color: #fff3d0; }
#connectBtn:hover { background: linear-gradient(180deg, #9c7a2c, #7a5d20); }
.gear-btn { background: linear-gradient(180deg, #4f5e30, #3c4824); }
.gear-btn:hover { background: linear-gradient(180deg, #5c6c38, #47552b); }
.btn.work-on { background: linear-gradient(180deg, #3f5a2a, #2f441f); }
.btn.work-off { background: linear-gradient(180deg, #6a2a22, #50201a); }
.work-row .btn { opacity: .5; filter: saturate(.6); }
.work-row .btn.active { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px #c9d48a; color: #fff; }
.panel, .login-card, .box { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; box-shadow: 0 0 0 1px #000, 4px 4px 0 rgba(0,0,0,.35); background: var(--panel); }
.box { padding: 0 16px 16px; }
.box h3 { margin: 0 -16px 12px; padding: 7px 34px 7px 12px; background: linear-gradient(90deg, #4a5236, #2c3122); border-bottom: 1px solid var(--lo);
  font: 15px 'Allerta Stencil', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #eef0de; text-shadow: 1px 1px 0 #000; -webkit-text-stroke: 0; }
.box .x { top: 4px; right: 6px; width: 22px; height: 22px; font-size: 16px; line-height: 18px; border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); background: #383c2f; color: var(--text); }
.box h4 { color: var(--gold); font: 700 12px Tahoma, sans-serif; letter-spacing: 1px; }
.box .sub, .calc, .fine, .tag { color: var(--mute); }
.box input { border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); border-radius: 0; background: #0e100c; color: #e8ead8; font: 18px 'VT323', monospace; }
.box input:focus { border-color: var(--gold); }
.msg { color: var(--gold); }
.modal { background: rgba(0,0,0,.7); }
.login-card { padding: 26px 24px; }
.login h1 { font: 40px 'Allerta Stencil', sans-serif; letter-spacing: 4px; color: #d0d2c0; text-shadow: 2px 2px 0 #000; -webkit-text-stroke: 0; }
.login-badge { border-radius: 0; background: repeating-linear-gradient(45deg, #2b2f24 0 8px, #22261d 8px 16px); border: 1px solid var(--hi); }
.login-badge::after { border-radius: 0; background: #6b2a22; box-shadow: none; inset: 26px; border: 1px solid #a04a3a; }
.how li { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); }
.how li b { border: 1px solid #000; border-radius: 0; background: var(--gold); color: #000; font: 18px 'VT323', monospace; }
.hud { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-bottom: 0; border-radius: 0; background: linear-gradient(180deg, #2a2e24, #1c1f18); padding: 4px 12px; }
.hud-l span, .hud-r { font: 15px 'Allerta Stencil', sans-serif; letter-spacing: 1px; color: #d6d8c4; }
.hud-l em { font: 18px 'VT323', monospace; color: var(--mute); }
.hud-r { color: var(--gold); font-size: 13px; }
.hud-c { font: 28px 'VT323', monospace; text-shadow: 1px 1px 0 #000; }
.hud-c .vs { font-size: 16px; }
.ct-tag, .t-tag { border: 1px solid #000; border-radius: 0; font: 700 11px Tahoma, sans-serif; padding: 1px 5px; }
.ct-tag { background: #4a6a8a; color: #e8f0f8; }
.t-tag { background: #8a5a2a; color: #f8eadb; }
.hud-c b:first-of-type { color: #a8c8e8; }
.hud-c b:last-of-type { color: #e8a868; }
.canvas-box { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; box-shadow: 0 0 0 1px #000, 4px 4px 0 rgba(0,0,0,.35); background: #000; }
.killfeed li { background: rgba(0,0,0,.62); color: #f0f0e8; border: 0; border-radius: 0; font: 700 12px Tahoma, sans-serif; box-shadow: none; padding: 2px 7px; }
.killfeed li span:first-child { -webkit-text-stroke: 0; }
.killfeed .vic { color: #e88a5a; }
.killfeed .gun { color: #aaa; }
.killfeed .kf-gun { image-rendering: auto; }
.killfeed li.down { background: rgba(110,20,14,.7); }
.killfeed li.gear { background: rgba(70,80,30,.75); }
.killfeed li.gear .gun { color: #f0e8b0; }
.banner {
  background: rgba(10,12,8,.85); color: var(--gold); border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0;
  font: 30px 'Allerta Stencil', sans-serif; letter-spacing: 3px; -webkit-text-stroke: 0; text-shadow: 2px 2px 0 #000; box-shadow: 0 0 0 1px #000;
  transform: translate(-50%, -50%);
}
.banner small { color: #d8dacb; font: 18px 'VT323', monospace; letter-spacing: 0; text-shadow: none; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.9); opacity: 0; } }
.banner.bad { background: rgba(70,14,10,.88); color: #ff9a80; }
.banner.bad small { color: #f0d0c8; }
.empty-note { background: rgba(0,0,0,.75); color: #d8dacb; border: 1px solid var(--hi); border-radius: 0; font: 18px 'VT323', monospace; }
.stat span { color: var(--mute); font: 700 10px Tahoma, sans-serif; letter-spacing: 1px; }
.stat b { font: 24px/1 'VT323', monospace; font-weight: 400; color: #e6e8d6; text-shadow: none; }
.odds h3 { font: 12px 'Allerta Stencil', sans-serif; letter-spacing: 2px; color: var(--gold); }
.odds li { font: 12px Tahoma, sans-serif; grid-template-columns: 10px 1fr auto auto; }
.odds li i { border: 1px solid #000; width: 10px; height: 10px; border-radius: 0; }
.salary-box { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); font: 13px Tahoma, sans-serif; }
.salary-box span { font: 700 10px Tahoma, sans-serif; color: var(--mute); }
.salary-box b { font: 20px/1 'VT323', monospace; color: #b8d070; }
.salary-box em { border-radius: 0; background: #6b511a; color: #fff3d0; border: 1px solid #000; font: 700 10px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.salary-box.due { background: #3c1814; }
.salary-box.due b { color: #ff8a6a; }
@keyframes due { 50% { box-shadow: inset 0 0 0 1px #c8483a; } }
.pro-box { background: #1e2a32; }
.pro-box.off { background: #22241e; }
.pro-box.off b { color: var(--mute); }
.salary-plan, .gun-card, .gear-item, .pack { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); color: var(--text); }
.salary-plan.best, .gun-card.on, .gear-item.on { background: linear-gradient(180deg, #34442a, var(--panel2)); }
.pack.best { background: linear-gradient(180deg, #3e3a26, var(--panel2)); }
.salary-plan span, .gear-item .price, .pack .price { color: var(--gold); font: 24px 'VT323', monospace; }
.salary-plan i { border: 1px solid #000; border-radius: 0; background: var(--red); font: 700 11px Tahoma, sans-serif; }
.gun-card h4, .gear-item h4, .pack h4 { font: 16px 'Allerta Stencil', sans-serif; letter-spacing: 2px; color: #e6e8d6; text-transform: uppercase; }
.gun-card canvas { background: #14160f; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.gear-chip { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); font: 700 11px Tahoma, sans-serif; }
.crate { border: 1px solid #000; border-radius: 0; background: repeating-linear-gradient(90deg, #6e5530 0 12px, #5e4828 12px 14px); box-shadow: inset 0 0 0 4px #3e2f18, 4px 4px 0 rgba(0,0,0,.35); }
.crate::after { color: #e0b44a; font: 24px 'VT323', monospace; -webkit-text-stroke: 0; }
.roster-head h2 { font: 16px 'Allerta Stencil', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #d6d8c4; text-shadow: 1px 1px 0 #000; -webkit-text-stroke: 0; }
.filters button { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); color: var(--mute); font: 700 11px Tahoma, sans-serif; text-transform: uppercase; }
.filters button.on { background: #4a5236; color: #fff; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.op { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-top: 2px solid var(--rc); border-radius: 0; box-shadow: 0 0 0 1px #000; background: var(--panel2); }
.op:hover { filter: brightness(1.15); }
.op canvas { border-bottom: 1px solid #000; image-rendering: pixelated; background: #101210; }
.op .nm b { font: 700 12px Tahoma, sans-serif; color: #e6e8d6; }
.op .nm em { font: 700 9px Tahoma, sans-serif; letter-spacing: .5px; -webkit-text-stroke: 0; }
.op .st { color: var(--mute); }
.op .st b { font: 18px/1 'VT323', monospace; }
.op .state { border: 1px solid #000; border-radius: 0; background: rgba(0,0,0,.75); font: 700 9px Tahoma, sans-serif; letter-spacing: 1px; }
.op .state.field { color: #b8d070; }
.op .state.rest { color: #9a9c88; }
.op .gun-tag { border: 1px solid #000; border-radius: 0; background: rgba(0,0,0,.75); color: var(--gold); font: 700 9px Tahoma, sans-serif; }
.op .bar { height: 6px; border: 1px solid #000; border-radius: 0; background: #0c0d0a; }
.op .bar i { background: repeating-linear-gradient(90deg, #9db04a 0 5px, #7a8a36 5px 6px); }
.toast { background: rgba(14,16,12,.95); color: var(--text); border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; box-shadow: 0 0 0 1px #000, 4px 4px 0 rgba(0,0,0,.4); font: 700 13px Tahoma, sans-serif; }
.wd-list li, .ref-stats div, .wallet-opt { border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); border-radius: 0; background: var(--panel2); }
.wallet-opt .tag { border-radius: 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0e100c; }
::-webkit-scrollbar-thumb { background: #3a3f30; border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); }
@media (min-width: 901px) {
  :root { --top-h: 46px; --roster-w: clamp(214px, 15.5vw, 290px); --side-w: 196px; }
  body:not(.logged-out) { height: 100vh; overflow: hidden; }
  body:not(.logged-out) .top { position: fixed; top: 0; left: 0; right: 0; z-index: 6; height: var(--top-h); box-sizing: border-box; padding: 4px 12px; gap: 12px;
    background: linear-gradient(180deg, rgba(20,22,17,.78), rgba(20,22,17,.35)); border-bottom: 0; box-shadow: none; }
  body:not(.logged-out) .game { position: fixed; inset: 0; display: block; width: auto; max-width: none; margin: 0; padding: 0; }
  .field-wrap { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; }
  .canvas-box { position: absolute; inset: 0; border: 0; box-shadow: none; }
  #field { width: 100%; height: 100%; aspect-ratio: auto; }
  .top .hud { flex: 0 1 520px; min-width: 0; margin: 0 auto; padding: 2px 10px; box-sizing: border-box;
    background: rgba(20,22,17,.55); border-bottom: 1px solid var(--lo); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
  .top .hud-c { font-size: 24px; }
  .top .hud-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .top .top-right { margin-left: 0; }
  .logo { font-size: 18px; }
  .killfeed { top: calc(var(--top-h) + 8px); right: calc(var(--roster-w) + 24px); }
  .killfeed li { font-size: 11px; }
  .side, .roster { position: absolute; z-index: 4; top: calc(var(--top-h) + 4px); bottom: 10px; min-height: 0; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(80,86,64,.7) transparent; padding: 0 4px 0 0; box-sizing: border-box;
    opacity: .72; transition: opacity .2s; }
  .side:hover, .roster:hover, .side:focus-within { opacity: 1; }
  .side { left: 8px; width: var(--side-w); gap: 6px; }
  .roster { right: 8px; width: var(--roster-w); }
  .side .panel, .side .salary-box, .roster .op { background: rgba(28,31,24,.62); }
  .side .panel, .roster .op { box-shadow: 0 0 0 1px rgba(0,0,0,.7); }
  .roster-head { position: sticky; top: 0; z-index: 1; padding: 4px 6px; background: rgba(20,22,17,.6); }
  .stat span, .stat b, .roster-head h2, .op .nm, .odds li { text-shadow: 1px 1px 0 #000; }
  .side .panel { padding: 6px 8px; }
  .stats { gap: 2px 8px; }
  .stat span { font-size: 9px; }
  .stat b { font-size: 13px; }
  .side .btn.big { padding: 7px 10px; font-size: 12px; }
  .side .salary-box { margin-bottom: 0; padding: 4px 8px; border-width: 2px; gap: 6px; }
  .side .salary-box span { font-size: 9px; }
  .side .salary-box b { font-size: 11px; white-space: nowrap; }
  .side .salary-box em { font-size: 10px; padding: 2px 7px; }
  .gear-btn, .work-row, .gear-bar { margin-top: 0; }
  .gear-bar { font-size: 11px; gap: 4px; }
  .work-row .btn { padding: 6px 4px; font-size: 11px; }
  .wd-btn { margin-top: 0; padding: 6px; font-size: 11px; }
  .odds h3 { margin-bottom: 2px; font-size: 10px; }
  .odds ul { gap: 1px; font-size: 11px; }
  .roster-head { gap: 4px; margin-bottom: 6px; }
  .roster-head h2 { font-size: 15px; }
  .filters { margin-left: 0; }
  .filters button { padding: 2px 6px; font-size: 10px; }
  .roster-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 6px; }
  .odds li { white-space: nowrap; }
  .op .body { padding: 4px 6px 6px; }
  .op .nm b { font-size: 11px; }
  .op .nm em { font-size: 8px; }
  .op .st { font-size: 9px; margin: 3px 0; }
  .op .st b { font-size: 10px; }
  .op .en { font-size: 9px; }
  .op .state { font-size: 8px; top: 4px; left: 4px; }
  .op .gun-tag { top: 20px; left: 4px; font-size: 8px; }
}
.squad-card { display: grid; gap: 8px; }
.work-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; cursor: pointer;
  border: 1px solid; border-color: #6f8a4a #1d2614 #1d2614 #6f8a4a; background: linear-gradient(180deg, #3f5a2a, #2f441f);
  color: #e9f3d6; font: 700 12px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.work-btn i { width: 9px; height: 9px; border-radius: 50%; background: #7dff8a; box-shadow: 0 0 6px #7dff8a; animation: pulse 1.6s ease-in-out infinite; }
.work-btn span { flex: 1; text-align: left; }
.work-btn em { font: 18px/1 'VT323', monospace; font-style: normal; color: #c9e6a0; letter-spacing: 0; }
.work-btn:hover { filter: brightness(1.12); }
.work-btn.off { border-color: #8a4a3e #2a120e #2a120e #8a4a3e; background: linear-gradient(180deg, #6a2a22, #50201a); color: #ffe2da; }
.work-btn.off i { background: #ff6a55; box-shadow: none; border-radius: 0; animation: none; }
.work-btn.off em { color: #ffb4a6; }
@keyframes pulse { 50% { opacity: .35; } }
.earn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.earn span { display: block; color: var(--mute); font: 700 9px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.earn b { font: 22px/1 'VT323', monospace; font-weight: 400; color: var(--gold); }
.sq-foot { margin: 0; color: var(--mute); font: 11px Tahoma, sans-serif; }
.sq-foot b { color: var(--text); font-weight: 700; }
.up-card { display: grid; gap: 6px; }
.up-head { display: flex; align-items: center; gap: 6px; }
.up-head h4 { margin: 0; font: 700 11px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.up-head h4 small { font-size: 9px; letter-spacing: .5px; color: var(--gold); text-transform: none; }
.up-badge { flex: none; padding: 2px 6px; font: 700 9px Tahoma, sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap; background: #2f441f; color: #b8f08a; border: 1px solid #000; }
.up-state { display: flex; align-items: center; gap: 7px; margin: 0; font: 18px/1 'VT323', monospace; color: #b8d070; }
.up-btn { width: 100%; margin: 0; padding: 7px 6px; }
.up-card.due { border-color: #c8483a; animation: due 1.2s ease-in-out infinite; }
.up-card.due .up-badge { background: #6a2a22; color: #ffd2c8; }
.up-card.due .up-state { color: #ff8a6a; font: 700 11px Tahoma, sans-serif; }
.up-card.off .up-badge { background: #3a3c34; color: #c9cbb8; }
.up-card.off .up-state { color: var(--mute); font: 11px Tahoma, sans-serif; }
.up-card.due .up-btn, .up-card.off .up-btn { background: linear-gradient(180deg, #8a6a24, #6b511a); color: #fff3d0; }
.up-card.due .up-btn:hover, .up-card.off .up-btn:hover { background: linear-gradient(180deg, #9c7a2c, #7a5d1f); }
.tip { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 50%; cursor: help;
  background: #3a3f30; border: 1px solid var(--hi); color: var(--gold); font: 700 10px Tahoma, sans-serif; }
.tip-box { position: absolute; z-index: 20; top: calc(100% + 6px); left: -40px; width: 200px; padding: 8px 10px; display: none;
  background: #14160f; border: 1px solid var(--gold); box-shadow: 0 6px 16px rgba(0,0,0,.6);
  color: var(--text); font: 12px/1.45 Tahoma, sans-serif; text-transform: none; letter-spacing: 0; text-align: left; cursor: default; }
.tip-box b { color: var(--gold); }
.tip:hover .tip-box, .tip:focus .tip-box { display: block; }
.side:has(.tip:hover), .side:has(.tip:focus) { overflow: visible; }
.gear-btn { width: 100%; margin: 0; }
.mint-cta { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 10px 12px 10px 8px;
  cursor: pointer; overflow: hidden; border: 2px solid #14100a; border-radius: 4px; text-align: left; color: #241603;
  background: linear-gradient(180deg, #ffe08a 0%, #f2c14e 45%, #d9a02a 100%);
  box-shadow: inset 0 2px 0 #fff3c4, inset 0 -3px 0 #b07a14, 0 4px 0 #6b4a10, 0 5px 0 #14100a, 0 0 18px rgba(242,193,78,.35);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease; animation: mintGlow 2.2s ease-in-out infinite; }
.mint-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: mintShine 3.2s ease-in-out infinite; }
.mint-cta:hover { filter: brightness(1.08); }
.mint-cta:hover .mint-crate { transform: rotate(-6deg) scale(1.08); }
.mint-cta:hover .mint-go { transform: translateX(3px); }
.mint-cta:active { transform: translateY(4px);
  box-shadow: inset 0 2px 0 #fff3c4, inset 0 -3px 0 #b07a14, 0 0 0 #6b4a10, 0 1px 0 #14100a, 0 0 12px rgba(242,193,78,.3); }
.mint-crate { flex: none; width: 42px; height: 33px; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.35)); transition: transform .15s ease; }
.mint-txt { flex: 1; min-width: 0; }
.mint-cta b { display: block; font: 22px/1 'Allerta Stencil', sans-serif; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 1px 0 #fff0b8; }
.mint-cta small { display: block; margin-top: 3px; font: 700 10px Tahoma, sans-serif; letter-spacing: .3px; color: #5a3c06; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mint-cta small em { font-style: normal; color: #241603; }
.mint-go { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #241603; position: relative; transition: transform .15s ease;
  box-shadow: inset 0 1px 0 #4a3410; }
.mint-go::before { content: ''; position: absolute; left: 7px; top: 7px; width: 7px; height: 7px; border: solid #f2c14e; border-width: 2px 2px 0 0; transform: rotate(45deg); }
@keyframes mintGlow { 50% { box-shadow: inset 0 2px 0 #fff3c4, inset 0 -3px 0 #b07a14, 0 4px 0 #6b4a10, 0 5px 0 #14100a, 0 0 28px rgba(242,193,78,.7); } }
@keyframes mintShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .mint-cta, .mint-cta::after { animation: none; } }
.box .odds { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lo); }
.box .odds h4 { margin: 0 0 6px; font: 11px 'Allerta Stencil', sans-serif; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.box .odds ul { grid-template-columns: repeat(3, 1fr); gap: 4px 14px; }
@media (max-width: 600px) { .box .odds ul { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
  .side .squad-card, .side .up-card { background: rgba(28,31,24,.72); }
  .side .work-btn { padding: 7px 8px; }
  .side .gear-btn { padding: 8px 4px; font-size: 11px; }
  .side { opacity: 1; } 
}
.sq-foot { white-space: nowrap; }
@media (min-width: 901px) { .top .hud-r { white-space: nowrap; } }
.op .wpn { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 6px 0; padding: 4px 4px 0; cursor: pointer; text-align: left;
  border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(242,193,78,.14), rgba(0,0,0,.35)); color: var(--text); font: inherit; overflow: hidden; }
.op .wpn-ico { align-self: center; width: 72px; height: 24px; margin: 2px 0 0; aspect-ratio: auto; background: none; border: 0; image-rendering: auto; }
.op .wpn-txt { min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 4px; line-height: 1.1; }
.op .wpn-txt small { font: 700 8px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.op .wpn-txt b { font: 700 11px Tahoma, sans-serif; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op .wpn-go { margin: 3px -4px 0; padding: 2px 0; text-align: center; background: var(--gold); color: #1b1606; font: 700 9px Tahoma, sans-serif; letter-spacing: .5px; text-transform: uppercase; border-top: 1px solid #000; }
.op .wpn-go::after { content: ' \203A'; }
.op .wpn.best .wpn-go { background: rgba(242,193,78,.18); color: var(--gold); }
.op .wpn:hover { background: linear-gradient(180deg, rgba(242,193,78,.3), rgba(0,0,0,.35)); }
.op .wpn:hover .wpn-go { filter: brightness(1.15); }
.reveal-grid .op .wpn { pointer-events: none; padding-bottom: 4px; }
.reveal-grid .op .wpn-go { display: none; }
.pro-guy { position: fixed; z-index: 30; width: 170px; pointer-events: none; display: none; }
.pro-guy.show { display: block; animation: pgIn .35s cubic-bezier(.3,1.6,.6,1) both; }
.pro-guy svg { display: block; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.55)); }
.pro-say { position: relative; margin: 0 0 4px 6px; width: max-content; max-width: 160px; padding: 5px 8px; background: #f2c14e; color: #1b1606;
  border: 2px solid #14120c; font: 700 12px Tahoma, sans-serif; box-shadow: 2px 2px 0 #000; animation: pgSay .3s .25s both; }
.pro-say::after { content: ''; position: absolute; left: 60px; bottom: -9px; border: 7px solid transparent; border-top-color: #14120c; border-bottom: 0; }
.pro-guy .pg-eyes { transform-origin: 84px 71px; animation: pgBlink 3s 1s infinite; }
@keyframes pgIn { from { opacity: 0; transform: translateY(24px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pgSay { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes pgBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
#proBox { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pro-guy.show, .pro-say, .pro-guy .pg-eyes { animation: none; } }
.op { container-type: inline-size; }
.op .state { top: calc(75cqw - 20px); left: 6px; }
.gear-cta, .side .gear-cta { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; padding: 8px 9px 8px 16px;
  cursor: pointer; overflow: hidden; text-align: left; color: #eef2d8;
  border: 1px solid; border-color: #9fb070 #1a2010 #1a2010 #9fb070;
  background: linear-gradient(180deg, #5d7034, #3e4d20); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(157,176,74,.25); }
.gear-cta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-right: 1px solid #000;
  background: repeating-linear-gradient(45deg, #e0b44a 0 5px, #14160f 5px 10px); }
.gear-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: mintShine 4s ease-in-out infinite; }
.gear-cta:hover { background: linear-gradient(180deg, #6b8040, #485a26); }
.gear-cta:active { transform: translateY(1px); border-color: #1a2010 #9fb070 #9fb070 #1a2010; }
.gear-cta.idle { animation: gearGlow 2.4s ease-in-out infinite; }
.gc-top, .gc-bot { display: flex; align-items: center; gap: 6px; }
.gc-top b { flex: 1; min-width: 0; white-space: nowrap; font: 15px/1 'Allerta Stencil', sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.gc-tag { flex: none; padding: 2px 5px; font: 700 9px/1.2 Tahoma, sans-serif; font-style: normal; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  color: #14160f; background: #e0b44a; border: 1px solid #000; box-shadow: inset 1px 1px 0 #ffe08a; }
.gear-cta:not(.idle) .gc-tag { background: #9db04a; box-shadow: inset 1px 1px 0 #d4e48a; }
.gc-icons { flex: none; display: flex; gap: 3px; }
.gc-icons svg { width: 22px; height: 22px; padding: 2px; background: #1c2212; border: 1px solid #000; }
.gc-bot small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px Tahoma, sans-serif; letter-spacing: .3px; color: #c9d69a; text-shadow: 1px 1px 0 #000; }
@keyframes gearGlow { 50% { box-shadow: 0 0 0 1px #000, 0 0 22px rgba(157,176,74,.7); } }
@media (max-width: 900px) { .gear-cta, .side .gear-cta { gap: 4px; padding: 6px 8px 6px 14px; } .gc-top b { font-size: 13px; } .gc-icons svg { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .gear-cta, .gear-cta::after { animation: none; } }
.socials { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.socials ~ .nav-play, .socials ~ .top-right { margin-left: 8px; }
.soc { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  background: linear-gradient(180deg, #3a3f30, #2a2e22); box-shadow: inset 1px 1px 0 rgba(255,255,255,.06); }
.soc svg { width: 18px; height: 18px; fill: #c9cbb8; filter: drop-shadow(1px 1px 0 #000); transition: fill .15s; }
.soc:hover { background: linear-gradient(180deg, #4a503e, #353a2b); }
.soc:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.soc.tg:hover svg { fill: #2aabee; }
.soc.dc:hover svg { fill: #7b88ff; }
@media (max-width: 600px) { .soc { width: 28px; height: 28px; } .soc svg { width: 15px; height: 15px; } .socials { gap: 4px; } }
body:not(.logged-out) .top .socials { display: none; }
body:not(.logged-out) .socials ~ .top-right { margin-left: auto; }
.side-social { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.ss { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; text-decoration: none;
  border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); box-shadow: 0 0 0 1px #000, inset 1px 1px 0 rgba(255,255,255,.08);
  background: linear-gradient(180deg, #4a4f3e, #383c2f); color: #e6e8d8; text-shadow: 1px 1px 0 #000; }
.ss svg { flex: none; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; background: #1a1d15; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.06); fill: #c9cbb8; transition: fill .15s; }
.ss span { flex: 1; font: 13px/1 'Allerta Stencil', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }
.ss::after { content: '\203A'; font: 700 16px/1 Tahoma, sans-serif; color: var(--gold); }
.ss.tg svg { fill: #3aa8e0; }
.ss.dc svg { fill: #8590ff; }
.ss:hover { background: linear-gradient(180deg, #575d48, #42473a); color: #fff; }
.ss:active { transform: translateY(1px); border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
@media (max-width: 900px) { .ss { padding: 4px 8px 4px 4px; gap: 6px; } .ss svg { width: 22px; height: 22px; padding: 4px; } .ss span { font-size: 11px; } }
.box-ico { width: 42px; height: 33px; flex: none; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.6)); }
.cd { display: flex; justify-content: center; gap: 6px; }
.cd span { display: grid; justify-items: center; min-width: 58px; padding: 6px 4px 4px; background: #14160f;
  border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: 0 0 0 1px #000; }
.cd b { font: 40px/1 'VT323', monospace; color: var(--gold); text-shadow: 0 0 10px rgba(224,180,74,.35), 1px 1px 0 #000; }
.cd i { margin-top: 2px; font: 700 9px Tahoma, sans-serif; font-style: normal; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); }
.launch-box { display: grid; gap: 10px; justify-items: center; margin: 14px auto 18px; padding: 12px 14px; max-width: 460px;
  background: rgba(20,22,17,.82); border: 1px solid var(--gold); box-shadow: 0 0 0 1px #000, 0 0 24px rgba(224,180,74,.25); }
.launch-box .lb-head { margin: 0; font: 13px 'Allerta Stencil', sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #d8dacb; }
.launch-box .lb-head b { color: var(--gold); font-weight: 400; }
.launch-box .lb-promo { display: flex; align-items: center; gap: 10px; margin: 0; text-align: left; font: 12px/1.4 Tahoma, sans-serif; color: var(--text); }
.launch-box .lb-promo b { display: block; font: 13px 'Allerta Stencil', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.launch-box .lb-promo em { font-style: normal; font-weight: 700; color: var(--gold); }
body.prelaunch #connectBtn { animation: mintGlow 2.2s ease-in-out infinite; }
.launch-gate { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(ellipse at center, rgba(14,16,11,.78), rgba(8,9,6,.92)); }
.lg-in { display: grid; gap: 10px; justify-items: center; max-width: 420px; padding: 18px 20px; text-align: center;
  background: rgba(28,31,24,.94); border: 1px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.6); }
.lg-eyebrow { margin: 0; padding: 2px 8px; font: 700 10px Tahoma, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #14160f; background: var(--green); }
.lg-in h2 { margin: 0; font: 22px 'Allerta Stencil', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #d8dacb; text-shadow: 1px 1px 0 #000; }
.lg-date { margin: 0; font: 700 11px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.lg-box { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; box-sizing: border-box; text-align: left;
  background: #14160f; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.lg-box b { display: block; font: 14px 'Allerta Stencil', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.lg-box small { font: 11px Tahoma, sans-serif; color: var(--mute); }
#lgInvite { width: 100%; }
.box-cta { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; cursor: pointer; overflow: hidden; text-align: left;
  border: 1px solid; border-color: #c8e08a #2a3a10 #2a3a10 #c8e08a; background: linear-gradient(180deg, #7a9a32, #56701e); color: #fff;
  box-shadow: 0 0 0 1px #000, 0 0 18px rgba(157,176,74,.5); animation: gearGlow 2s ease-in-out infinite; }
.box-cta b { display: block; font: 14px/1.1 'Allerta Stencil', sans-serif; letter-spacing: 1px; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.box-cta small { display: block; margin-top: 2px; font: 700 10px Tahoma, sans-serif; color: #e4f0bc; text-shadow: 1px 1px 0 #000; }
.box-cta:hover { filter: brightness(1.1); }
.box-cta:disabled { filter: grayscale(.6); cursor: wait; }
@media (max-width: 600px) { .cd span { min-width: 46px; } .cd b { font-size: 30px; } .lg-in { padding: 14px; } .lg-in h2 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .box-cta, body.prelaunch #connectBtn { animation: none; } }
.lg-box span { flex: 1; min-width: 0; }
.lg-bar { display: block; height: 6px; margin-top: 6px; background: #2b3224; border: 1px solid #000; box-shadow: inset 0 1px 0 #000; }
.lg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#f3d27a, #c9962e); transition: width .4s; }
.lg-box.won .lg-bar i { background: linear-gradient(#8fe08a, #3f9b3a); }
.lg-box.won b { color: #8fe08a; }
.lg-box { gap: 12px; padding: 10px 12px; background: linear-gradient(180deg, #1f2316, #14160f); position: relative; }
.lg-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.lg-box.won::before { background: #8fe08a; }
.lg-crate { position: relative; flex: none; width: 72px; height: 60px; display: grid; place-items: center; font-style: normal;
  background: radial-gradient(closest-side, #f2c14e40, transparent 75%), #0d0f0a; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.lg-crate .box-ico { width: 60px; height: 47px; animation: lgBob 2.4s ease-in-out infinite; }
.lg-crate em { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 6px; font: 700 9px/14px Tahoma, sans-serif;
  font-style: normal; letter-spacing: 1.5px; text-transform: uppercase; color: #14160f; background: var(--gold); border: 1px solid #000; }
.lg-box.won .lg-crate { background: radial-gradient(closest-side, #8fe08a4d, transparent 75%), #0d0f0a; }
.lg-box.won .lg-crate em { background: #8fe08a; }
.lg-box b { font-size: 15px; }
.lg-box small { display: block; margin-top: 2px; line-height: 1.35; }
.lg-bar { position: relative; height: 10px; margin-top: 8px; }
.lg-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), #000 calc(20% - 2px) 20%); }
@keyframes lgBob { 50% { transform: translateY(-3px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .lg-crate .box-ico { animation: none; } }
.chip.snd { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; }
.chip.snd svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: square; }
.chip.snd svg path:first-child { fill: var(--gold); stroke: none; }
.chip.snd .x { display: none; }
.chip.snd.off svg { stroke: var(--mute); }
.chip.snd.off svg path:first-child { fill: var(--mute); }
.chip.snd.off .w1, .chip.snd.off .w2 { display: none; }
.chip.snd.off .x { display: inline; stroke: #e0533d; }
.chip.snd.mus svg path:first-child { fill: none; stroke: var(--gold); }
.chip.snd.mus svg circle { fill: var(--gold); stroke: none; }
.chip.snd.mus.off svg path:first-child { stroke: var(--mute); }
.chip.snd.mus.off svg circle { fill: var(--mute); }
.chip.snd.mus.off .x { display: inline; stroke: #e0533d; }
@media (max-width: 600px) {
  body:not(.logged-out) .top { flex-wrap: wrap; row-gap: 6px; }
  body:not(.logged-out) .top .top-right { display: contents; }
  body:not(.logged-out) .top > * { order: 9; }
  body:not(.logged-out) .top .logo { order: 0; }
  body:not(.logged-out) #addrChip { order: 1; margin-left: auto; }
  body:not(.logged-out) .top::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  body:not(.logged-out) #balChip { order: 3; margin-right: auto; }
  body:not(.logged-out) #musBtn { order: 4; }
  body:not(.logged-out) #sndBtn { order: 5; }
  body:not(.logged-out) #wdBtn { order: 6; }
  body:not(.logged-out) .top .chip.snd { padding: 3px 5px; }
}
.case { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(40,44,34,.92), rgba(6,7,5,.97) 70%); }
.case-in { width: min(980px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.case-eyebrow { margin: 0; padding: 2px 8px; font: 700 10px Tahoma, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #14160f; background: var(--gold); }
.case-in h2 { margin: 0; font: 26px 'Allerta Stencil', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #d8dacb; text-shadow: 2px 2px 0 #000; }
.case-crate { height: 210px; display: grid; place-items: center; }
.case-crate { position: relative; }
.case-crate::before { content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 220px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #f2c14e40, transparent); pointer-events: none; }
.case-crate .box-ico { position: relative; width: 250px; height: 194px; filter: drop-shadow(0 16px 16px rgba(0,0,0,.6)); }
.case-crate .box-ico.stack, .case-crate.many .box-ico.one { display: none; }
.case-crate.many .box-ico.stack { display: block; width: 300px; height: 180px; }
.case-crate.open .box-ico { animation: crateShake .9s ease-in both; }
@keyframes crateShake {
  0% { transform: scale(.8); } 15% { transform: scale(1.05) rotate(-4deg); } 30% { transform: scale(1.05) rotate(4deg); }
  45% { transform: scale(1.08) rotate(-5deg); } 60% { transform: scale(1.1) rotate(5deg); } 75% { transform: scale(1.12) rotate(-2deg); }
  100% { transform: scale(1.5); opacity: 0; }
}
.case-reel { position: relative; width: 100%; height: 150px; overflow: hidden; background: #14160f;
  border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: inset 0 0 30px #000; }
.case-reel::before, .case-reel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.case-reel::before { left: 0; background: linear-gradient(90deg, #0b0c09, transparent); }
.case-reel::after { right: 0; background: linear-gradient(-90deg, #0b0c09, transparent); }
.case-strip { position: absolute; left: 0; top: 10px; display: flex; gap: 4px; will-change: transform; }
.rc { flex: 0 0 auto; width: 160px; height: 128px; position: relative; background: #1e221b; border: 1px solid #000; overflow: hidden; }
.rc canvas { display: block; width: 160px; height: 120px; image-rendering: pixelated; }
.rc span { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--rc); box-shadow: 0 -6px 14px var(--rc); }
.rc.won { outline: 2px solid var(--rc); outline-offset: -2px; box-shadow: 0 0 24px var(--rc); }
.case-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 3; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.case-line::before, .case-line::after { content: ''; position: absolute; left: -6px; border: 7px solid transparent; }
.case-line::before { top: 0; border-top-color: var(--gold); }
.case-line::after { bottom: 0; border-bottom-color: var(--gold); }
.case-win { display: flex; align-items: center; gap: 16px; padding: 12px 18px; text-align: left; background: #1e221b;
  border: 1px solid var(--rc); box-shadow: 0 0 0 1px #000, 0 0 30px color-mix(in srgb, var(--rc) 45%, transparent); animation: winPop .5s cubic-bezier(.2,1.6,.4,1) both; }
.case-win.glow { animation: winPop .5s cubic-bezier(.2,1.6,.4,1) both, winGlow 1.6s ease-in-out .5s infinite; }
.case-win canvas { width: 200px; height: 150px; image-rendering: pixelated; border: 1px solid #000; }
.case-win b { display: block; font: 24px 'Allerta Stencil', sans-serif; letter-spacing: 1px; color: #e8eadb; }
.case-win em { display: inline-block; margin: 4px 0 8px; padding: 1px 8px; font: 700 12px Tahoma, sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: #0b0c0a; background: var(--rc); border: 1px solid #000; }
.case-win span { display: block; font: 13px Tahoma, sans-serif; color: var(--mute); }
@keyframes winPop { from { transform: scale(.6); opacity: 0; } }
@keyframes winGlow { 50% { box-shadow: 0 0 0 1px #000, 0 0 60px var(--rc); } }
.case-btns { display: flex; gap: 8px; }
.case-btns .btn { min-width: 160px; }
@media (max-width: 600px) {
  .case-in h2 { font-size: 20px; }
  .case-crate { height: 160px; } .case-crate .box-ico { width: 180px; height: 140px; } .case-crate.many .box-ico.stack { width: 230px; height: 138px; }
  .case-crate::before { width: 260px; height: 160px; }
  .case-reel { height: 112px; } .rc { width: 112px; height: 92px; } .rc canvas { width: 112px; height: 84px; }
  .case-win { flex-direction: column; text-align: center; } .case-win canvas { width: 160px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .case-crate.open .box-ico, .case-win, .case-win.glow { animation: none; } }
.pack { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 16px 14px 14px;
  background: radial-gradient(120% 70% at 50% 0%, #3a3f2c 0%, var(--panel2) 62%); transition: transform .18s ease, box-shadow .18s ease; }
.pack::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #ffffff05 3px 4px); }
.pack:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #0008, 0 0 0 1px #e0b44a55; }
.pack.best { background: radial-gradient(120% 70% at 50% 0%, #5a4d22 0%, #2f2c1c 55%, var(--panel2) 100%); border-color: #e0b44a #6e5a24 #6e5a24 #e0b44a;
  box-shadow: 0 0 0 1px #e0b44a66, 0 0 26px #e0b44a22; }
.pack.best:hover { box-shadow: 0 10px 22px #0008, 0 0 0 1px #e0b44a, 0 0 32px #e0b44a44; }
.pack-art { position: relative; height: 122px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pack-art::before { content: ''; position: absolute; left: 50%; bottom: 6px; width: 170px; height: 90px; transform: translateX(-50%);
  background: radial-gradient(closest-side, #f2d27a33, transparent); pointer-events: none; }
.pack.best .pack-art::before { width: 230px; background: radial-gradient(closest-side, #f2c14e4d, transparent); }
.pack-art svg { position: relative; display: block; filter: drop-shadow(0 2px 0 #000a); transition: transform .25s ease; }
.crate-one { width: 132px; height: 102px; }
.crate-stack { width: 196px; height: 118px; }
.pack:hover .pack-art svg { transform: translateY(-4px) rotate(-1.5deg); }
.pack-qty { position: absolute; right: calc(50% - 98px); top: 4px; padding: 0 8px; background: #14160f; border: 1px solid #e0b44a;
  color: #e0b44a; font: 22px/1.15 'VT323', monospace; box-shadow: 2px 2px 0 #000a; transform: rotate(4deg); }
.pack.best .pack-qty { right: calc(50% - 118px); background: #e0b44a; color: #14160f; border-color: #14160f; }
.pack-ribbon { position: absolute; top: 22px; left: -42px; width: 160px; transform: rotate(-45deg); text-align: center; z-index: 1;
  background: #e0b44a; color: #14160f; font: 700 9px Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 3px 0;
  box-shadow: 0 2px 0 #0008; }
.pack h4 { margin: 10px 0 0; }
.pack .pack-sub { margin: 2px 0 8px; color: var(--mute); font-size: 12px; }
.pack .price { margin: 0 0 12px; padding: 0 14px; background: #0c0e09aa; border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); }
.pack .btn { width: 100%; max-width: 220px; }
.pack.best .btn { background: linear-gradient(180deg, #e9c25c, #b98d2c); color: #14160f; text-shadow: none; }
.pack.best .btn:hover { background: linear-gradient(180deg, #f2d06c, #c79a34); }
@media (max-width: 600px) {
  .pack-art { height: 104px; }
  .crate-one { width: 112px; height: 87px; }
  .crate-stack { width: 168px; height: 101px; }
  .pack-qty { right: calc(50% - 86px); }
  .pack.best .pack-qty { right: calc(50% - 104px); }
}
@media (prefers-reduced-motion: reduce) { .pack, .pack-art svg { transition: none; } .pack:hover, .pack:hover .pack-art svg { transform: none; } }
.logo-mark { width: 36px; height: 32px; flex: none; object-fit: contain; background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.logo-mark::after { content: none; }
@media (max-width: 600px) { .logo-mark { width: 30px; height: 27px; } }