:root{
  --bg: #0b0e14;
  --surface: #141a24;
  --surface-2: #1b2330;
  --line: #2a3342;
  --text: #eef1f6;
  --text-dim: #9aa5b6;
  --orange: #ff6a33;
  --orange-dim: #c94f22;
  --teal: #17e6c9;

  --common: #8a93a3;
  --rare: #4ea1ff;
  --epic: #b24eff;
  --legendary: #FF7B1C;
  --forzaedition: #930EE8;
  --treasure: #FFED1C;
  --barnfind: #02B30D;

  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* Guarantee the native [hidden] attribute always wins, even against
   elements that set their own `display` (e.g. .spin-overlay{display:flex}).
   Without this, toggling `.hidden = true` in JS silently does nothing. */
[hidden]{ display:none !important; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:24px;
  padding:16px 28px;
  background:rgba(11,14,20,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  font-family:var(--font-display); font-weight:700; font-size:20px;
  background:var(--orange); color:#0b0e14; padding:6px 9px; border-radius:6px;
  letter-spacing:1px;
  transform: skewX(-8deg);
  display:inline-block;
}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-title{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:2px;}
.brand-sub{font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase;}

.credits-pill{
  margin-left:auto;
  display:flex; align-items:baseline; gap:8px;
  background:var(--surface-2); border:1px solid var(--line);
  padding:8px 16px; border-radius:999px;
}
.credits-label{font-size:10px; letter-spacing:2px; color:var(--text-dim);}
.credits-value{font-family:var(--font-mono); font-weight:700; font-size:18px; color:var(--teal);}

.tabs{display:flex; gap:4px;}
.tab-btn{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.5px;
  background:none; border:none; color:var(--text-dim);
  padding:8px 14px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition: color .15s, background .15s;
}
.tab-btn:hover{color:var(--text); background:var(--surface-2);}
.tab-btn.active{color:var(--bg); background:var(--orange);}
.count-badge{
  font-family:var(--font-mono); font-size:11px; background:rgba(255,255,255,.15);
  padding:1px 7px; border-radius:999px;
}
.tab-btn.active .count-badge{background:rgba(0,0,0,.2);}

/* ---------- layout ---------- */
main{max-width:1100px; margin:0 auto; padding:40px 28px 90px; position:relative; z-index:1;}
.view.hidden{display:none;}
.section-head{margin-bottom:28px;}
.section-head h1{font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:.5px;}
.section-sub{color:var(--text-dim); margin-top:4px; font-size:15px;}

.status-banner{
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--orange);
  padding:10px 16px; border-radius:8px; font-size:13px; color:var(--text-dim); margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.status-banner.loading{border-left-color:var(--teal);}
.spinner{
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.15); border-top-color:var(--teal);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.wheel-card.skeleton{
  min-height:196px;
  background:linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 45%, var(--surface) 60%);
  background-size:300% 100%;
  animation:skeletonPulse 1.3s ease-in-out infinite;
  cursor:default;
}
.wheel-card.skeleton::before{display:none;}
@keyframes skeletonPulse{
  0%{background-position:120% 0;}
  100%{background-position:-20% 0;}
}

/* ---------- wheel selection cards ---------- */
.wheel-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:18px;
}
.wheel-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 18px; cursor:pointer; position:relative; overflow:hidden;
  transition: transform .15s, border-color .15s;
}
.wheel-card:hover{transform:translateY(-3px); border-color:var(--tier-color, var(--orange));}
.wheel-card::before{
  content:""; position:absolute; top:-40%; right:-40%; width:140px; height:140px;
  background:var(--tier-color, var(--orange)); opacity:.15; border-radius:50%; filter:blur(20px);
}
.wheel-card .tier-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--tier-color, var(--orange));
  text-transform:uppercase;
}
.wheel-card h3{font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:6px;}
.wheel-card .wheel-desc{font-size:12.5px; color:var(--text-dim); margin-top:6px; min-height:32px;}
.wheel-card .wheel-cost{
  margin-top:16px; display:flex; align-items:center; justify-content:space-between;
}
.wheel-cost .cost-num{font-family:var(--font-mono); font-weight:700; font-size:19px; color:var(--text);}
.wheel-cost .cost-tag{font-size:10px; color:var(--text-dim); letter-spacing:1px;}
.wheel-card .spin-btn{
  margin-top:14px; width:100%; padding:10px; border-radius:8px; border:none;
  font-family:var(--font-display); font-weight:700; letter-spacing:1px; font-size:14px;
  background:var(--tier-color, var(--orange)); color:#0b0e14; cursor:pointer;
}
.wheel-card .spin-btn:disabled{opacity:.4; cursor:not-allowed;}
.wheel-card.locked{opacity:.55;}

/* ---------- spin overlay ---------- */
.spin-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(6,7,10,.88); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 16px; overflow-y:auto;
}
.spin-stage{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:32px; max-width:480px; width:100%; text-align:center; position:relative;
  margin:auto;
  --item-h: 92px;
}
.close-spin{
  position:absolute; top:14px; right:14px; background:var(--surface-2); border:1px solid var(--line);
  color:var(--text-dim); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px;
}
.spin-wheel-title{font-family:var(--font-display); font-size:22px; margin-bottom:8px; letter-spacing:1px;}
.spin-round-indicator{
  font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; color:var(--teal);
  text-transform:uppercase; margin-bottom:14px;
}
.super-summary-title{
  font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:14px;
}
.super-summary-grid{grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin-top:0;}

.slot-frame{
  position:relative; width:100%; max-width:340px; margin:0 auto;
}
.slot-viewport{
  height:calc(var(--item-h) * 3);
  overflow:hidden; position:relative;
  border-radius:14px; border:2px solid var(--line);
  background:var(--surface-2);
  box-shadow: inset 0 0 24px rgba(0,0,0,.4);
}
.slot-strip{
  display:flex; flex-direction:column;
  will-change:transform;
}
.slot-item{
  height:var(--item-h); flex:0 0 auto;
  display:flex; align-items:center; gap:12px;
  padding:0 16px;
  border-left:4px solid var(--rarity-color, var(--common));
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.015);
}
.slot-item img{
  width:64px; height:44px; border-radius:6px; object-fit:cover; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.slot-item-text{display:flex; flex-direction:column; gap:2px; overflow:hidden; text-align:left;}
.slot-item-rarity{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--rarity-color,var(--common)); text-transform:uppercase;}
.slot-item-name{font-family:var(--font-display); font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.slot-item-value{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); white-space:nowrap;}

.slot-center-line{
  position:absolute; top:50%; left:0; right:0; height:var(--item-h);
  transform:translateY(-50%);
  border-top:2px solid var(--teal); border-bottom:2px solid var(--teal);
  box-shadow:0 0 14px rgba(23,230,201,.4), inset 0 0 14px rgba(23,230,201,.08);
  pointer-events:none; z-index:2;
}
.slot-fade-top, .slot-fade-bottom{
  position:absolute; left:0; right:0; height:36%; pointer-events:none; z-index:3;
}
.slot-fade-top{top:0; background:linear-gradient(var(--surface-2), transparent);}
.slot-fade-bottom{bottom:0; background:linear-gradient(transparent, var(--surface-2));}
.slot-pointer-left, .slot-pointer-right{
  position:absolute; top:50%; transform:translateY(-50%); width:0; height:0; z-index:4;
}
.slot-pointer-left{left:-3px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:12px solid var(--teal);}
.slot-pointer-right{right:-3px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:12px solid var(--teal);}

/* ---------- super wheel: 5 parallel reels in a horizontal line ---------- */
.super-reels{position:relative; width:100%; max-width:420px; margin:0 auto;}
.super-reels-row{
  display:flex;
  border-radius:14px; border:2px solid var(--line); background:var(--surface-2);
  box-shadow: inset 0 0 24px rgba(0,0,0,.4);
  overflow:hidden;
}
/* .mini reuses .slot-viewport for sizing/overflow, but the shared row above
   supplies the border/background/shadow — this resets the individual
   per-column chrome so the 5 columns read as one continuous housing. */
.slot-viewport.mini{
  flex:1; min-width:0;
  border:none; border-radius:0; background:none; box-shadow:none;
  border-right:1px solid var(--line);
}
.slot-viewport.mini:last-child{border-right:none;}
.slot-viewport.mini .slot-item{padding:0 4px; gap:4px; border-left-width:3px;}
.slot-viewport.mini .slot-item img{width:32px; height:22px;}
.slot-viewport.mini .slot-item-text{gap:0;}
.slot-viewport.mini .slot-item-name{font-size:9px;}
.slot-viewport.mini .slot-item-rarity{font-size:7px; letter-spacing:.5px;}
.slot-viewport.mini .slot-item-value{display:none;}
/* the fade/center-line/pointer elements are appended as direct children of
   #superReels (a positioned ancestor of the row), so — same classes as the
   single reel — they span the full width as one shared payline instead of
   five separate ones */

.spin-result{margin-top:22px;}
.result-card{
  border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--surface-2);
  border-top:4px solid var(--rarity-color, var(--common));
  animation: revealPop .5s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes revealPop{
  0%{ transform:scale(.85); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.result-card .r-image-wrap{
  width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:14px;
  position:relative; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 70%);
  box-shadow: 0 0 0 2px var(--rarity-color, var(--common)), 0 0 30px -4px var(--rarity-color, var(--common));
}
.result-card .r-image-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
.result-card .r-rarity{font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--rarity-color,var(--common)); text-transform:uppercase;}
.result-card .r-name{font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:4px;}
.result-card .r-value{font-family:var(--font-mono); color:var(--text-dim); margin-top:4px; font-size:13px;}
.spin-actions{display:flex; gap:10px; margin-top:16px;}

.btn{
  font-family:var(--font-display); font-weight:700; letter-spacing:.5px; font-size:14px;
  padding:10px 18px; border-radius:8px; border:none; cursor:pointer; flex:1;
}
.btn-primary{background:var(--orange); color:#0b0e14;}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text);}
.btn-sell-all{background:var(--teal); color:#0b0e14; padding:9px 18px; border-radius:8px; border:none; font-family:var(--font-display); font-weight:700; cursor:pointer;}

/* ---------- inventory ---------- */
.inventory-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.filter-group{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  font-family:var(--font-mono); font-size:12px; padding:6px 12px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim); cursor:pointer;
}
.chip.active{color:var(--bg); background:var(--text); border-color:var(--text);}

.inventory-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px;}
.item-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px;
  border-left:4px solid var(--rarity-color, var(--common));
}
.item-card .i-image{
  width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; margin-bottom:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.item-card .i-image img{width:100%; height:100%; object-fit:cover; display:block;}
.item-card .i-rarity{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--rarity-color,var(--common)); text-transform:uppercase;}
.item-card .i-name{font-family:var(--font-display); font-weight:700; font-size:17px; margin-top:3px;}
.item-card .i-source{font-size:11px; color:var(--text-dim); margin-top:2px;}
.item-card .i-base{font-size:12px; color:var(--text-dim); margin-top:12px; font-family:var(--font-mono);}
.item-card .i-actions{display:flex; gap:8px; margin-top:10px;}
.item-card .i-actions button{
  flex:1; padding:9px 8px; border-radius:8px; cursor:pointer; font-family:var(--font-body);
  font-weight:600; font-size:12.5px; text-align:center; line-height:1.3;
}
.item-card .quick-sell-btn{background:var(--surface-2); border:1px solid var(--line); color:var(--text);}
.item-card .quick-sell-btn:hover{border-color:var(--text-dim);}
.item-card .auction-btn{background:linear-gradient(120deg, var(--orange), #ffb347); border:none; color:#0b0e14; font-weight:700;}
.item-card .auction-btn:hover{filter:brightness(1.08);}
.btn-sub{display:block; font-size:10px; font-weight:500; opacity:.8; margin-top:2px; font-family:var(--font-mono);}

/* ---------- auction overlay ---------- */
.auction-preview{
  width:160px; height:110px; margin:4px auto 18px; border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 2px var(--line);
}
.auction-preview img{width:100%; height:100%; object-fit:cover; display:block;}
.auction-status{
  font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.5px;
  color:var(--teal); min-height:28px;
}

.empty-state{color:var(--text-dim); text-align:center; padding:60px 20px; font-size:14px;}

/* ---------- collection book ---------- */
.collection-progress{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.collection-progress .progress-track{flex:1; height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.collection-progress .progress-fill{height:100%; background:linear-gradient(90deg, var(--orange), var(--teal)); width:0%; transition:width .4s ease;}
.collection-progress .progress-label{font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); white-space:nowrap;}

.collection-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; margin-top:18px;}
.collection-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px;
  border-left:4px solid var(--rarity-color, var(--common));
}
.collection-card .c-image{
  width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; margin-bottom:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.collection-card .c-image img{width:100%; height:100%; object-fit:cover; display:block;}
.collection-card .c-rarity{font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--rarity-color,var(--common)); text-transform:uppercase;}
.collection-card .c-name{font-family:var(--font-display); font-weight:700; font-size:17px; margin-top:3px;}
.collection-card .c-source{font-size:11px; color:var(--text-dim); margin-top:2px;}

.collection-card.locked{border-left-color:var(--line); opacity:.6;}
.collection-card.locked .c-image{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 8px, var(--surface) 8px, var(--surface) 16px);
}
.collection-card.locked .c-image span{font-family:var(--font-display); font-size:26px; color:var(--text-dim);}
.collection-card.locked .c-rarity{color:var(--text-dim);}

.new-badge{
  display:inline-block; background:var(--teal); color:#0b0e14;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:1px;
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
}
/* ---------- jobs ---------- */
.jobs-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px;}
.job-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 18px;
}
.job-card h3{font-family:var(--font-display); font-weight:700; font-size:19px;}
.job-card .job-desc{font-size:12.5px; color:var(--text-dim); margin-top:6px; min-height:32px;}
.job-card .job-payout{font-family:var(--font-mono); font-weight:700; color:var(--teal); margin-top:12px; font-size:16px;}
.job-card .job-meta{font-size:11px; color:var(--text-dim); margin-top:4px; letter-spacing:.5px;}
.job-card .job-start-btn{
  margin-top:14px; width:100%; padding:10px; border-radius:8px; border:none;
  font-family:var(--font-display); font-weight:700; letter-spacing:1px; font-size:14px;
  background:var(--orange); color:#0b0e14; cursor:pointer;
}
.job-card .job-start-btn:hover{filter:brightness(1.06);}
.job-card .job-progress{margin-top:14px;}
.job-card .job-progress-track{height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden;}
.job-card .job-progress-fill{height:100%; background:linear-gradient(90deg, var(--teal), var(--orange)); transition:width .3s linear;}
.job-card .job-timer{display:block; margin-top:6px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); text-align:right;}
.job-card.running{border-color:var(--teal);}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--surface-2); border:1px solid var(--line); padding:12px 20px; border-radius:10px;
  font-size:14px; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.4);
}

@media (max-width:640px){
  .topbar{flex-wrap:wrap; padding:14px;}
  .tabs{order:3; width:100%; justify-content:space-between;}
  .credits-pill{order:2; margin-left:auto;}
}