:root {
  --bg: #080e16;
  --surface: #101925;
  --surface-2: #151f2d;
  --line: #29364a;
  --text: #f4f7fb;
  --muted: #96a5ba;
  --purple: #8d46ff;
  --purple-2: #bd64ff;
  --cyan: #26c7f4;
  --gold: #ffc62c;
  --danger: #ff5470;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 78% 13%, rgba(75, 89, 220, .11), transparent 29rem),
    radial-gradient(circle at 22% 55%, rgba(139, 52, 226, .07), transparent 32rem),
    var(--bg);
  overflow-x: hidden;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.topbar {
  height: 62px;
  padding: 0 29px;
  display: grid;
  grid-template-columns: auto minmax(430px, 1fr) minmax(190px, .9fr) auto auto auto auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #273143;
  background: rgba(8, 14, 23, .94);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; border: 0; background: transparent; padding: 0; cursor: pointer; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; font-size: 29px; filter: drop-shadow(0 0 10px rgba(143, 79, 255, .55)); }
.top-mark { position: relative; overflow: hidden; }
.top-mark img { position: absolute; width: 42px; max-width: none; left: 0; top: 0; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.045em; }
.beta { font-size: 11px; color: #bdc9db; background: #252e3d; border: 1px solid #354052; padding: 3px 7px; border-radius: 5px; }

.nav { height: 100%; display: flex; justify-content: center; gap: 25px; }
.nav-link { position: relative; display: flex; align-items: center; color: #c7cfdb; background: none; border: 0; padding: 0; font-size: 13px; cursor: pointer; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: #c381ff; }
.nav-link.active::after { content: ""; height: 2px; background: #8d58ff; left: 0; right: 0; bottom: 0; position: absolute; box-shadow: 0 0 10px #7b44ff; }

.search { height: 38px; border: 1px solid #2c3749; border-radius: 9px; display: flex; align-items: center; gap: 10px; background: #111925; padding: 0 12px; min-width: 190px; }
.search svg, .topbar svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.search svg { color: #7f90a9; }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #dce4f0; background: transparent; font-size: 13px; }
.search input::placeholder { color: #748198; }

.mini-profile { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; border-right: 1px solid #273143; }
.mini-profile strong, .mini-profile small { display: block; text-align: left; }
.mini-profile strong { font-size: 12px; }.mini-profile small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.avatar { width: 39px; height: 39px; border-radius: 50%; border: 2px solid #e8ad44; overflow: hidden; display: block; flex: 0 0 auto; }
.balance { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; background: #131c29; border: 1px solid #2a3547; border-radius: 9px; white-space: nowrap; }
.coin, .price i { width: 18px; height: 18px; border-radius: 50%; background: #e6a51b; color: #fff2a8; display: inline-grid; place-items: center; font-style: normal; box-shadow: inset 0 0 0 2px #ffc83c; }
.balance strong { font-size: 14px; }.balance button { border: 0; background: #2a3547; color: #cbd5e4; width: 23px; height: 23px; border-radius: 50%; cursor: pointer; }

.primary, .secondary { border-radius: 8px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.primary { color: white; background: linear-gradient(100deg, #9138ed, #743dff 60%, #315ff0); box-shadow: 0 7px 22px rgba(118, 60, 255, .25); }
.secondary { color: #eef2f8; border-color: #35445a; background: linear-gradient(180deg, #1b2636, #121a27); }
.primary:hover, .secondary:hover { transform: translateY(-1px); filter: brightness(1.1); }
.primary:active, .secondary:active { transform: translateY(0); }

main { width: min(1489px, calc(100% - 40px)); margin: 0 auto; }

.view { display: none; min-height: 700px; }.view.active { display: block; animation: viewIn .25s ease; }
@keyframes viewIn { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body:not([data-view="wall"]) main { padding-top: 34px; }

.wall-card { grid-area: wall; }
.wall-viewport { aspect-ratio: 1035 / 675; border: 1px solid #2b3c54; border-radius: 9px; overflow: hidden; position: relative; background: #0c1420; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.wall-viewport::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 55% 35%, rgba(71, 104, 170, .12), transparent 42%), linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,0)); z-index: 1; }

.wall-topline { position: absolute; z-index: 7; top: 15px; left: 75px; right: 16px; height: 42px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; color: #bac6d8; background: rgba(12,19,30,.82); border: 1px solid #334158; border-radius: 6px; padding: 7px 9px; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #40e6a0; box-shadow: 0 0 10px #40e6a0; }
.wall-controls { position: absolute; z-index: 8; top: 14px; left: 12px; width: 43px; overflow: hidden; border: 1px solid #354055; border-radius: 9px; background: rgba(10, 15, 24, .92); box-shadow: 0 6px 20px rgba(0,0,0,.38); }
.wall-controls button { display: grid; place-items: center; width: 100%; height: 38px; border: 0; border-bottom: 1px solid #313d50; background: transparent; cursor: pointer; font-size: 27px; }
.wall-controls button:last-child { margin-top: 8px; border: 0; border-top: 1px solid #313d50; }.wall-controls button:hover { background: #253147; }
.wall-controls svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sidebar { grid-area: side; display: flex; flex-direction: column; gap: 14px; }
.panel, .collection-card, .case-card { background: linear-gradient(135deg, rgba(18, 27, 39, .98), rgba(13, 21, 31, .98)); border: 1px solid #253144; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.13); }
.panel { padding: 16px 15px; }.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.panel-heading h2 { font-size: 16px; margin: 0; letter-spacing: -.02em; }.panel-heading button { border: 0; background: transparent; color: #b66bff; font-size: 11px; cursor: pointer; }
.case-feature { display: grid; grid-template-columns: 48% 1fr; align-items: center; gap: 10px; min-height: 160px; overflow: hidden; }
.case-render { height: 160px; position: relative; overflow: hidden; border-radius: 8px; background: radial-gradient(circle, rgba(128,54,245,.22), transparent 68%); }
.case-render img { position: absolute; width: 1640px; max-width: none; left: -1162px; top: -253px; filter: saturate(1.12) contrast(1.04); }
.case-copy { min-width: 0; }.case-copy h3 { margin: 0 0 8px; font-size: 14px; }.case-copy p { margin: 0 0 16px; color: #9eacc0; font-size: 12px; line-height: 1.45; }.case-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }.case-actions .primary { padding: 11px 13px; font-size: 12px; white-space: nowrap; }
.price { height: 41px; padding: 0 12px; border: 1px solid #344157; background: #192332; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; white-space: nowrap; }.price i { width: 17px; height: 17px; font-size: 11px; }
.subheading { font-size: 13px; margin: 3px 0 11px; }.odds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.odds article { min-width: 0; text-align: center; }
.rarity { display: block; margin: -18px auto 7px; position: relative; width: fit-content; border: 1px solid; padding: 2px 7px; border-radius: 5px; font-size: 9px; background: #172131; }.common { color: #dce5f1; border-color: #718097; }.rare { color: #68bfff; border-color: #3b8ee6; }.epic { color: #e16aff; border-color: #a13ed1; }.legendary { color: #ffd33e; border-color: #d39b16; }.mythic { color: #ff5bb5; border-color: #c42a7e; }
.odds strong, .odds small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.odds strong { font-size: 10px; font-weight: 500; }.odds small { color: #8898ad; font-size: 10px; margin-top: 6px; }

.favorite-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.favorite-card { padding: 4px; border: 1px solid #344158; border-radius: 7px; background: #101824; overflow: hidden; }.favorite-art { height: 84px; display: grid; place-items: center; border-radius: 5px; background: radial-gradient(circle, #293c56, #0b131d 72%); }.favorite-art img { width: 90%; height: 90%; object-fit: contain; }.favorite-card h3 { margin: 7px 2px 3px; font-size: 11px; }.favorite-card p { margin: 0 2px 7px; color: #8e9cb0; font-size: 10px; }.favorite-card > div:last-child { padding: 0 2px 3px; display: flex; justify-content: space-between; color: #8492a7; font-size: 9px; }

.activity-panel { padding-bottom: 12px; }

.page-heading { min-height: 126px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }.eyebrow { color: #ad6eff; font-size: 10px; font-weight: 800; letter-spacing: .16em; }.page-heading h1 { margin: 6px 0 7px; font-size: 36px; letter-spacing: -.04em; }.page-heading p { margin: 0; color: #94a4b8; font-size: 13px; }.collection-actions { display: flex; align-items: center; gap: 18px; color: #94a4b8; font-size: 13px; }.collection-actions b { color: white; }.collection-actions .primary { padding: 13px 18px; }
.collection-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; padding-bottom: 34px; }.collection-card { padding: 8px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; }.collection-card:hover { transform: translateY(-3px); border-color: #685099; }.collection-art { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(circle, #26374f, #0d1521 74%); border: 1px solid #2a3c56; }.collection-art img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0,0,0,.5)); }.collection-card h3 { margin: 10px 3px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.collection-card p { margin: 0 3px 7px; color: #8494a9; font-size: 10px; }.collection-card footer { width: auto; min-height: 0; margin: 0 3px 2px; display: flex; justify-content: space-between; gap: 5px; font-size: 9px; color: #8d9aae; }.collection-card .rarity { position: absolute; top: 15px; left: 14px; margin: 0; z-index: 2; backdrop-filter: blur(6px); }.copy-count { position: absolute; top: 15px; right: 14px; padding: 3px 6px; border-radius: 5px; background: rgba(8,13,21,.76); border: 1px solid #38475c; font-size: 9px; }

.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding-bottom: 38px; }.case-card { min-height: 330px; padding: 18px; position: relative; overflow: hidden; }.case-card::before { content: ""; position: absolute; width: 240px; height: 240px; top: -100px; right: -80px; border-radius: 50%; background: var(--case-glow); filter: blur(55px); opacity: .35; }.case-card h2 { position: relative; margin: 3px 0 5px; font-size: 20px; }.case-card > p { position: relative; margin: 0; color: #92a2b7; font-size: 11px; }.case-card .case-render { width: 230px; height: 165px; margin: 5px auto 3px; }.case-card .case-render img { filter: var(--case-filter) saturate(1.15); }.case-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.case-card-bottom .primary { padding: 12px 15px; }.drop-miniatures { display: flex; margin-top: 9px; }.drop-miniatures img { width: 27px; height: 27px; object-fit: contain; background: #172131; border: 1px solid #36435a; border-radius: 50%; margin-left: -5px; }.drop-miniatures img:first-child { margin-left: 0; }

.case-dialog { width: min(900px, calc(100% - 32px)); border: 1px solid #43516a; border-radius: 16px; padding: 0 0 24px; color: white; background: linear-gradient(145deg, #151f2f, #0b121d); box-shadow: 0 30px 100px #000; overflow: hidden; }.case-dialog::backdrop { background: rgba(3, 7, 13, .86); backdrop-filter: blur(8px); }.dialog-head { padding: 22px 24px 17px; display: flex; align-items: flex-start; justify-content: space-between; }.dialog-head h2 { margin: 5px 0 0; font-size: 24px; }.dialog-close { border: 0; background: transparent; color: #aab7c8; font-size: 28px; cursor: pointer; }.roulette-shell { height: 194px; position: relative; overflow: hidden; border-block: 1px solid #344157; background: radial-gradient(circle at center, rgba(123,66,216,.16), transparent 32%), #080e17; box-shadow: inset 0 0 34px #000; }.roulette-shell::before, .roulette-shell::after { content: ""; position: absolute; top: 0; bottom: 0; width: 150px; z-index: 3; pointer-events: none; }.roulette-shell::before { left: 0; background: linear-gradient(90deg, #080e17, transparent); }.roulette-shell::after { right: 0; background: linear-gradient(-90deg, #080e17, transparent); }.roulette-marker { position: absolute; z-index: 5; left: 50%; top: 0; bottom: 0; width: 2px; background: #b66cff; box-shadow: 0 0 12px #b66cff; }.roulette-marker::before, .roulette-marker::after { content: ""; position: absolute; left: -7px; border-left: 8px solid transparent; border-right: 8px solid transparent; }.roulette-marker::before { top: 0; border-top: 12px solid #c67aff; }.roulette-marker::after { bottom: 0; border-bottom: 12px solid #c67aff; }.reel-track { display: flex; align-items: center; gap: 10px; height: 100%; width: max-content; padding-left: calc(50% - 64px); transform: translateX(0); will-change: transform; }.reel-item { width: 128px; height: 148px; flex: 0 0 128px; padding: 7px; border: 1px solid #354258; border-bottom: 3px solid var(--rarity-color); border-radius: 9px; background: linear-gradient(160deg, #1a2535, #0d151f); display: flex; flex-direction: column; align-items: center; justify-content: space-between; }.reel-item img { width: 102px; height: 102px; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(0,0,0,.5)); }.reel-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #c7d1df; }.case-result { min-height: 50px; padding: 14px 24px 0; text-align: center; }.case-result p { margin: 0; color: #99a8bb; font-size: 12px; }.case-result strong { color: white; font-size: 16px; }.dialog-action { display: block; min-width: 190px; margin: 8px auto 0; padding: 13px 24px; }.dialog-action:disabled { opacity: .55; cursor: wait; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #1d2736; border: 1px solid #3a4860; border-radius: 10px; padding: 12px 17px; box-shadow: 0 15px 45px rgba(0,0,0,.45); color: #eaf0f8; font-size: 12px; opacity: 0; pointer-events: none; transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1260px) {
  .topbar { grid-template-columns: auto 1fr minmax(170px, .8fr) auto auto; padding: 0 18px; }.mini-profile, .balance { display: none; }.nav { gap: 18px; }
  .collection-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .topbar { grid-template-columns: auto 1fr auto; }.nav { display: none; }.search { margin-left: auto; max-width: 320px; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }.activity-panel { grid-column: 1 / -1; }
  .case-feature { grid-template-columns: minmax(210px, 38%) 1fr; }.case-render { min-width: 0; }
  .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .topbar { height: 58px; padding: 0 12px; gap: 8px; }.brand-name { font-size: 17px; }.brand-mark { width: 34px; height: 34px; font-size: 25px; }.top-mark img { left: -4px; top: -3px; }.beta { display: none; }.search { height: 36px; }
  main { width: min(100% - 20px, 1490px); }
  .wall-viewport { aspect-ratio: 1 / 1.08; }.wall-topline { left: 66px; }.sidebar { display: flex; }.panel { padding: 14px 12px; }.case-feature { grid-template-columns: 44% 1fr; min-height: 150px; }.case-render { height: 145px; }.odds { overflow-x: auto; grid-template-columns: repeat(5, 82px); padding-bottom: 6px; }
  .page-heading { min-height: 150px; align-items: flex-start; padding-top: 10px; flex-direction: column; justify-content: center; gap: 16px; }.page-heading h1 { font-size: 30px; }.collection-actions { width: 100%; justify-content: space-between; }.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.cases-grid { grid-template-columns: 1fr; }.case-card { min-height: 315px; }.favorite-grid { gap: 5px; }
  .case-dialog { width: calc(100% - 18px); }.roulette-shell { height: 176px; }.reel-item { width: 112px; height: 134px; flex-basis: 112px; }.reel-item img { width: 90px; height: 90px; }.reel-track { padding-left: calc(50% - 56px); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }