/* Coin Roulette - CS:GO-case style spinner. Matches the Scrapinity theme. */
:root {
  --cr-bg: #0e2a25;
  --cr-panel: rgba(16, 48, 42, 0.72);
  --cr-border: rgba(79, 209, 199, 0.22);
  --cr-accent: #4fd1c7;
  --cr-gold: #f1c40f;
  --cr-text: #cde4e1;
  --cr-dim: #8fb3ad;
  --rar-common: #7b8f8b;
  --rar-uncommon: #4fd1c7;
  --rar-rare: #5b8def;
  --rar-epic: #b06cf0;
  --rar-legendary: #f1c40f;
}

.cr-wrap { padding: 2.2rem 0 4rem; }

/* hero */
.cr-hero { text-align: center; margin-bottom: 1.8rem; }
.cr-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: #fff; letter-spacing: .5px; }
.cr-title .bi { color: var(--cr-gold); }
.cr-sub { color: var(--cr-dim); max-width: 640px; margin: .6rem auto 0; line-height: 1.5; }
.cr-hl { color: var(--cr-accent); font-weight: 600; }
.cr-balance-row { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1.1rem; }
.cr-balance { background: var(--cr-panel); border: 1px solid var(--cr-border); border-radius: 12px; padding: .55rem 1.1rem; font-size: 1.15rem; font-weight: 700; color: #fff; }
.cr-balance .bi { color: var(--cr-gold); }
.cr-balance small { color: var(--cr-dim); font-weight: 500; }
.cr-cost { color: var(--cr-dim); font-size: .95rem; }
.cr-cost strong { color: var(--cr-text); }

/* case / reel */
.cr-case { background: var(--cr-panel); border: 1px solid var(--cr-border); border-radius: 18px; padding: 1.4rem; margin-bottom: 2.2rem; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.cr-reel-window { position: relative; height: 170px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #0c231f, #0a1d1a); border: 1px solid rgba(79,209,199,.14); }
.cr-pointer { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, var(--cr-gold), #ff8c2b); z-index: 6; box-shadow: 0 0 14px rgba(241,196,15,.8); }
.cr-pointer::before, .cr-pointer::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 8px solid transparent; }
.cr-pointer::before { top: -1px; border-top-color: var(--cr-gold); }
.cr-pointer::after { bottom: -1px; border-bottom-color: var(--cr-gold); }
.cr-reel { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 0; will-change: transform; }
.cr-reel-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cr-dim); font-size: 1.05rem; letter-spacing: .5px; pointer-events: none; }
.cr-reel-fade { position: absolute; top: 0; bottom: 0; width: 90px; z-index: 5; pointer-events: none; }
.cr-fade-left { left: 0; background: linear-gradient(90deg, #0a1d1a, transparent); }
.cr-fade-right { right: 0; background: linear-gradient(270deg, #0a1d1a, transparent); }

/* a card on the reel / showcase / inventory */
.cr-card { flex: 0 0 auto; width: 118px; height: 148px; border-radius: 12px; background: #12302b; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: .5rem; position: relative; overflow: hidden; }
.cr-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, var(--rar, #4fd1c7) 0%, transparent 62%); opacity: .14; }
.cr-card.r-common { border-color: var(--rar-common); --rar: var(--rar-common); }
.cr-card.r-uncommon { border-color: var(--rar-uncommon); --rar: var(--rar-uncommon); }
.cr-card.r-rare { border-color: var(--rar-rare); --rar: var(--rar-rare); }
.cr-card.r-epic { border-color: var(--rar-epic); --rar: var(--rar-epic); }
.cr-card.r-legendary { border-color: var(--rar-legendary); --rar: var(--rar-legendary); box-shadow: 0 0 18px rgba(241,196,15,.3) inset; }
.cr-card .cr-c-icon { font-size: 1.9rem; line-height: 1; z-index: 1; }
.cr-card .cr-c-logo { height: 26px; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.cr-card .cr-c-main { font-size: 1.15rem; font-weight: 800; z-index: 1; }
.cr-card .cr-c-sub { font-size: .72rem; color: var(--cr-dim); z-index: 1; }
.cr-card .cr-c-rar { position: absolute; bottom: 6px; left: 0; right: 0; font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--rar, #4fd1c7); z-index: 1; }

/* controls */
.cr-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.2rem; }
.cr-spin-btn { background: linear-gradient(135deg, #16a34a, #0d7a3a); color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: 1px; border: none; border-radius: 12px; padding: .85rem 2.6rem; cursor: pointer; transition: transform .1s, filter .2s, box-shadow .2s; box-shadow: 0 10px 24px rgba(22,163,74,.3); }
.cr-spin-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.cr-spin-btn:active:not(:disabled) { transform: translateY(1px); }
.cr-spin-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }

/* result banner */
.cr-result { margin-top: 1.3rem; text-align: center; padding: 1rem; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--rar, #4fd1c7); animation: cr-pop .4s ease; }
.cr-result .cr-r-head { color: var(--cr-dim); font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; }
.cr-result .cr-r-prize { font-size: 1.5rem; font-weight: 800; color: #fff; margin-top: .2rem; }
@keyframes cr-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* sections */
.cr-section { margin-top: 2.4rem; }
.cr-h2 { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.cr-h2 .bi { color: var(--cr-accent); }

/* grids */
.cr-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.cr-empty { grid-column: 1 / -1; text-align: center; color: var(--cr-dim); padding: 2.2rem 1rem; background: var(--cr-panel); border: 1px dashed var(--cr-border); border-radius: 12px; }

/* showcase card + its win chance */
.cr-show-item { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; }
.cr-show-item .cr-card { width: 100%; }
.cr-chance { font-size: .74rem; font-weight: 700; color: var(--cr-accent); text-align: center; }
.cr-chance span { color: var(--cr-dim); font-size: .66rem; font-weight: 500; margin-left: .2rem; }

/* inventory item: card + redeem */
.cr-inv-item { display: flex; flex-direction: column; gap: .5rem; }
.cr-inv-item .cr-card { width: 100%; height: 138px; }
.cr-redeem { border: none; border-radius: 8px; padding: .5rem; font-weight: 700; font-size: .85rem; cursor: pointer; background: linear-gradient(135deg, var(--cr-accent), #2f9e94); color: #06201c; transition: filter .15s; }
.cr-redeem:hover:not(:disabled) { filter: brightness(1.1); }
.cr-redeem:disabled { opacity: .55; cursor: default; background: #2a3f3b; color: var(--cr-dim); }
.cr-redeem.done { background: #223b36; color: var(--cr-accent); }
.cr-timer { font-size: .72rem; color: var(--cr-gold); text-align: center; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.cr-timer .bi { font-size: .7rem; }
.cr-timer.exp { color: #e2655c; }

/* toast */
.cr-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #0c231f; border: 1px solid var(--cr-accent); color: var(--cr-text); padding: .9rem 1.3rem; border-radius: 12px; z-index: 1000; max-width: 92vw; box-shadow: 0 12px 30px rgba(0,0,0,.4); animation: cr-pop .3s ease; }
.cr-toast.err { border-color: #e2655c; }
.cr-toast .cr-code { display: inline-block; font-family: monospace; font-weight: 800; color: var(--cr-gold); background: rgba(0,0,0,.3); padding: .15rem .5rem; border-radius: 6px; margin-left: .3rem; letter-spacing: 1px; }

/* inventory: horizontal rows inside a container */
.cr-inv-list { background: var(--cr-panel); border: 1px solid var(--cr-border); border-radius: 14px; padding: .6rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.cr-inv-row { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; border-radius: 10px; background: rgba(0,0,0,.2); border-left: 3px solid var(--rar, #4fd1c7); }
.cr-row-badge { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #10302a; border: 1px solid rgba(255,255,255,.08); }
.cr-badge.disc { font-weight: 800; color: #8ab4ff; font-size: .95rem; }
.cr-badge.rank { font-size: 1.5rem; }
.cr-row-info { flex: 1 1 auto; min-width: 0; }
.cr-row-name { font-weight: 800; font-size: 1.05rem; }
.cr-row-desc { color: var(--cr-dim); font-size: .82rem; line-height: 1.35; margin-top: .15rem; }
.cr-row-action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; min-width: 128px; }
.cr-row-action .cr-redeem { width: 100%; }
.cr-row-action .cr-timer { text-align: right; width: 100%; }
.cr-redeemed { font-size: .78rem; color: var(--cr-accent); font-family: monospace; text-align: right; word-break: break-all; }
.cr-pn { display: block; border-radius: 10px; }
.cr-code-copy { background: rgba(0,0,0,.3); border: 1px dashed var(--cr-gold); color: var(--cr-gold); font-family: monospace; font-weight: 800; letter-spacing: 1px; padding: .4rem .6rem; border-radius: 8px; cursor: pointer; font-size: .82rem; transition: filter .15s; width: 100%; }
.cr-code-copy:hover { filter: brightness(1.15); }
.cr-code-copy .bi { margin-left: .3rem; opacity: .75; }
.cr-timer.code { color: var(--cr-accent); }

@media (max-width: 560px) {
  .cr-reel-window { height: 150px; }
  .cr-card { width: 100px; height: 128px; }
  .cr-inv-row { flex-wrap: wrap; }
  .cr-row-action { min-width: 0; width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .cr-row-action .cr-redeem { width: auto; padding: .45rem 1.1rem; }
}