/* Rakeback page — flat, navy theme tokens from site.css. Item cases with Nano Banana icons. */
#v-rakeback .rb-sub{margin-top:30px}
.rb-chip{background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:7px 14px;font-size:13px;color:var(--muted);white-space:nowrap}
.rb-chip b{color:var(--text)}

/* ---- rank panel ---- */
.rb-top{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:8px}
.rb-rank{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px}
.rb-rank>div{flex:1;min-width:0}
.rb-rank-name{font-size:26px;line-height:1}
.rb-rank-sub{color:var(--muted);font-size:13px;margin:6px 0 10px}
.rb-bar{height:12px;border-radius:99px;background:var(--inset);border:1px solid var(--border);overflow:hidden}
.rb-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-lo),var(--cyan));transition:width .4s}
.rb-bar-lbl{display:flex;justify-content:space-between;color:var(--dim);font-size:11.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.rb-note{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;color:var(--muted);font-size:13.5px;line-height:1.55;margin:0}
.rb-note b{color:var(--text)}

/* ---- level badges ---- */
.rb-badge{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;
  background:var(--tint);box-shadow:inset 0 0 0 1px #ffffff22}
.rb-badge-lg{width:60px;height:60px;border-radius:14px;font-size:28px}

/* ---- case grid: compact cards (buttons) ---- */
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.rb-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 16%,var(--surface)),var(--surface) 70%);
  border:1px solid color-mix(in srgb,var(--tint) 40%,var(--border));border-radius:var(--r);color:var(--text);
  font:inherit;text-align:center;cursor:pointer;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.rb-card:hover,.rb-card:focus-visible{transform:translateY(-2px);border-color:var(--tint);box-shadow:0 8px 24px #0006;outline:none}
.rb-card:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 60%,transparent)}
.rb-card.locked .rb-card-art{filter:grayscale(.75) brightness(.7)}
.rb-card-art{width:96px;height:96px;flex:none;display:grid;place-items:center;border-radius:16px;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tint) 45%,transparent),transparent 70%)}
.rb-card-art img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 3px 5px #0009)}
.rb-card-art.sm{width:56px;height:56px;border-radius:12px}
.rb-card-art.sm img{width:48px;height:48px}
/* item icons are pixel art: never let the browser smooth them (sizes are 192/2, /3, /4, /8) */
img[src*="assets/rakeback/items/"]{image-rendering:pixelated}
.rb-card-ttl{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%}
.rb-card-ttl b{font-size:15.5px;font-weight:700;line-height:1.15}
.rb-card-st{font-size:12px;color:var(--muted);line-height:1.3}
.rb-card-st.ready{color:var(--win);font-weight:600}
.rb-card-st.lock{color:var(--dim)}
.rb-card-hover{position:absolute;inset:0;display:grid;place-items:center;
  background:#070e1fd9;opacity:0;transition:opacity .15s;pointer-events:none}
.rb-card-hover em{font-style:normal;font-weight:800;font-size:14px;letter-spacing:.02em;color:#fff;
  background:var(--tint);border-radius:99px;padding:8px 16px;box-shadow:0 6px 18px #0008;text-shadow:0 1px 2px #0008}
.rb-card:hover .rb-card-hover,.rb-card:focus-visible .rb-card-hover{opacity:1}
.rb-case-ttl{flex:1;min-width:0}
.rb-case-ttl h4{margin:0;font-size:17px;font-weight:700}
.rb-case-ttl small{color:var(--muted);font-size:12px}
.rb-lvtag{flex:none;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;
  background:var(--tint);border-radius:99px;padding:3px 9px;box-shadow:inset 0 0 0 1px #ffffff22;white-space:nowrap;text-shadow:0 1px 2px #0008}

/* ---- case view dialog ---- */
body.rb-noscroll{overflow:hidden}
.rb-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#030814c4;padding:20px;overflow-y:auto}
.rb-modal[hidden]{display:none}
.rb-dlg{width:min(640px,100%);min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #000a;margin:auto}
.rb-dlg-head{display:flex;align-items:center;gap:12px}
.rb-x{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);cursor:pointer}
.rb-x:hover,.rb-x:focus-visible{color:var(--text);border-color:var(--accent-lo)}
.rb-x .ic{width:18px;height:18px}
.rb-tiers{font-size:11.5px;color:var(--dim)}

/* ---- developer tool ---- */
.rb-dev{margin-top:34px;padding-top:16px;border-top:1px dashed var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rb-dev-btn{font-size:12.5px;padding:8px 14px}
.rb-dev small{color:var(--dim);font-size:11.5px}

/* ---- reel ---- */
.rb-reel{position:relative;height:118px;border-radius:var(--r-sm);overflow:hidden;background:var(--inset);border:1px solid var(--border);width:100%;min-width:0}
.rb-track{display:flex;height:100%;will-change:transform}
.rb-tile{width:104px;flex:none;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;
  border-right:1px solid var(--border-soft);text-align:center}
.rb-tile-ic{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:color-mix(in srgb,var(--tint) 24%,var(--surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 55%,transparent)}
.rb-tile-ic img{width:48px;height:48px;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px #0006)}
.rb-tile b{font-size:10.5px;font-weight:600;line-height:1.1;color:var(--text);max-width:100%;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rb-tile-v{font-size:11px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.rb-pointer{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:var(--gold);box-shadow:0 0 10px var(--gold);pointer-events:none;z-index:2}
.rb-pointer:before,.rb-pointer:after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:6px solid transparent}
.rb-pointer:before{top:-1px;border-top-color:var(--gold)}
.rb-pointer:after{bottom:-1px;border-bottom-color:var(--gold)}

/* result overlay */
.rb-won{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:14px;
  background:#070e1fe6;padding:0 16px}
.rb-reel[data-win] .rb-won{display:flex}
.rb-reel[data-win] .rb-track{opacity:.18}
.rb-won-img{width:96px;height:96px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 4px #000a)}
.rb-won-txt{min-width:0}
.rb-won-txt b{display:block;font-size:17px;color:#fff;line-height:1.2}
.rb-won-txt span{display:block;font-size:13px;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}

/* ---- meta / EV ---- */
.rb-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.rb-ev{font-size:11.5px;font-weight:700;color:var(--cyan);background:#4285ff1a;border:1px solid #4285ff33;border-radius:99px;padding:4px 10px;white-space:nowrap}

/* ---- odds table ---- */
.rb-odds{width:100%;border-collapse:collapse;font-size:12.5px}
.rb-odds th{text-align:left;color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:0 0 4px}
.rb-odds td{padding:5px 6px 5px 0;color:var(--muted);border-top:1px solid var(--border-soft);vertical-align:middle}
.rb-odds td:first-child{color:var(--text)}
.rb-odds td:last-child,.rb-odds th:last-child{text-align:right;color:var(--text);padding-right:0}
.rb-odds th:nth-child(3),.rb-odds td:nth-child(3){text-align:right}
.rb-odds th:nth-child(-n+2),.rb-odds td:nth-child(-n+2){text-align:left}
.rb-odds td:nth-child(2){white-space:nowrap}
.rb-odds-ic{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:8px;filter:drop-shadow(0 1px 1px #0006)}
.rb-odds-v{color:var(--gold)!important;font-weight:700;font-variant-numeric:tabular-nums}
.rb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.rb-open .ic{width:18px;height:18px}
.rb-cd{text-align:center;font-size:12px;color:var(--muted)}
.rb-cd.ready{color:var(--win)}

/* ---- recent openings icons ---- */
.rb-log-ic{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:7px;filter:drop-shadow(0 1px 1px #0006)}

@media (max-width:760px){
  .rb-top{grid-template-columns:1fr}
  .rb-rank-name{font-size:22px}
}
@media (max-width:480px){
  .rb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rb-card{padding:12px 8px}
  .rb-card-art{width:72px;height:72px}
  .rb-card-art img{width:64px;height:64px}
  .rb-card-ttl b{font-size:14px}
  .rb-rank{flex-direction:column;align-items:flex-start}
  .rb-modal{padding:10px;place-items:start center}
  .rb-dlg{padding:14px}
  .rb-odds{font-size:11.5px}
  .rb-odds-ic{width:20px;height:20px;margin-right:5px}
  .rb-log-tbl{overflow-x:auto}
}

/* Case art and explicit level milestones. */
.rb-card-art{width:154px;height:138px}.rb-card-art img{width:154px;height:138px;transition:transform .2s ease}.rb-card:hover .rb-card-art img{transform:translateY(-5px) scale(1.05)}
.rb-card:hover .rb-card-hover{opacity:0}.rb-card.locked .rb-lvtag{background:#263d60;color:#c3d2e9}.rb-card .rb-lvtag{background:#1c4d49;color:#91f0ca}.rb-card{min-height:230px}.rb-card.locked .rb-card-art{filter:saturate(.55) brightness(.82)}
@media(max-width:540px){.rb-top{grid-template-columns:1fr}.rb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rb-card-art,.rb-card-art img{width:128px;height:118px}.rb-card{padding:10px 6px;min-height:210px}.rb-chip{font-size:11px;padding:5px 9px}.rb-card-ttl b{font-size:14px}}

/* Reuse the battle case picker and item-card presentation for free level cases. */
.rb-card{background:radial-gradient(130% 80% at 50% 6%,#152a4e 0,#0c1930 60%);border-color:var(--border);border-radius:14px}
.rb-card:hover{border-color:var(--accent)}
.rb-card-art{background:none}
.rb-modal{z-index:120;align-items:start;padding:30px 16px;background:#040a18cc;backdrop-filter:blur(4px)}
.rb-dlg.cs-dlg{width:min(880px,100%);padding:0;gap:0;background:linear-gradient(180deg,#0f2041,#0b1930);border-radius:16px;overflow:hidden}
.rb-preview-art img{width:100%;height:100%;object-fit:contain}
.rb-dlg .rb-reel{width:auto;margin:20px 18px;height:240px;background:radial-gradient(ellipse at 50% 110%,#224d733d,transparent 68%),#071322;border:1px solid #294361;border-radius:14px}
.rb-dlg .rb-track,.rb-dlg .rb-pointer{visibility:hidden}
.rb-dlg .rb-reel.spinning .rb-track,.rb-dlg .rb-reel.spinning .rb-pointer{visibility:visible}
.rb-reel.spinning .cs-reel-ph,.rb-reel[data-win] .cs-reel-ph{display:none}
.rb-dlg .rb-tile{border:4px solid #071322;border-radius:12px;background:linear-gradient(155deg,#172d43,#0c1d2f);gap:8px}
.rb-dlg .rb-tile-ic{background:none;box-shadow:none}
.rb-dlg .rb-reel{height:216px}
.rb-dlg .rb-track{align-items:center}
.rb-dlg .rb-tile{width:152px;flex:0 0 152px;height:178px;padding:12px 8px;gap:8px}
.rb-dlg .rb-tile-ic{width:92px;height:92px;aspect-ratio:1}
.rb-dlg .rb-tile-ic img{width:80px;height:80px;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated;flex:none}
.rb-dlg .rb-tile b{font-size:11px;min-height:25px;text-align:center;display:flex;align-items:center;justify-content:center;white-space:normal}
.rb-sound{display:flex;align-items:center;gap:6px;background:#172b40;border:1px solid #29415e;border-radius:7px;color:#b8cce0;font-size:11px;padding:8px 10px;cursor:pointer;margin-left:auto}
.rb-sound .ic{width:15px;height:15px}.rb-sound[aria-pressed=false]{color:#74879f}
@media(max-width:620px){.rb-sound{padding:8px}.rb-sound span{display:none}.rb-dlg .cs-dlg-ttl{min-width:0}.rb-dlg .cs-dlg-ttl h2{font-size:19px}}
.rb-preview-controls{padding:0 18px 20px;display:grid;gap:10px}
.rb-dlg .rb-won{background:#071322}
@media(max-width:620px){.rb-modal{padding:14px 10px}.rb-dlg .cs-dlg-head{flex-wrap:nowrap;gap:10px}.rb-dlg .cs-dlg-art{width:54px;height:54px}.rb-dlg .cs-dlg-ttl h2{font-size:23px}.rb-dlg .rb-reel{margin:14px 10px}.rb-dlg .cs-prizegrid{grid-template-columns:repeat(2,minmax(0,1fr))}.rb-dlg .cs-prize-v{font-size:12px}}