/* coldstorage-db.css — COLD STORAGE · THE RIP (Dirty Bomb menu style)
   Scoped under .csdb so it can mount inside MERCSERV HQ without clobbering.
   Palette: yellow hero accent on blue-grey faceted ground, cyan as thin secondary.
   Rarity colors are NEVER hardcoded here — JS sets --rar from meta.rarity[r].color. */

.csdb{
  --bg0:#2a3a47; --bg1:#18242e; --bg2:#0c1118;
  --panel:rgba(18,28,37,.82); --panel2:rgba(13,21,29,.9); --edge:rgba(120,168,198,.22); --edge2:rgba(120,168,198,.12);
  --yellow:#f5c534; --yellow-hi:#ffe07a; --yellow-lo:#dca617; --yellow-deep:#b6860f;
  --cyan:#34cce8; --cyan-soft:#8fdcec;
  --txt:#eaf1f6; --soft:#b8c8d6; --muted:#869aab; --dim:#5d7283;
  --disp:"Saira Condensed",system-ui,sans-serif; --ui:"Saira",system-ui,sans-serif;
  position:relative; width:100%; min-height:100vh; overflow:hidden;
  background:linear-gradient(157deg,#2c3d4b 0%,#1a2731 42%,#0e1822 100%);
  font-family:var(--ui); color:var(--txt); -webkit-font-smoothing:antialiased;
}
.csdb *{box-sizing:border-box; margin:0; padding:0}
.csdb:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
   linear-gradient(118deg,transparent 38%,rgba(140,180,205,.05) 38% 39%,transparent 39%),
   linear-gradient(118deg,transparent 60%,rgba(140,180,205,.04) 60% 61%,transparent 61%),
   radial-gradient(70% 60% at 78% 24%,rgba(53,201,232,.06),transparent 60%),
   radial-gradient(60% 60% at 18% 80%,rgba(245,197,52,.04),transparent 60%)}
.csdb .hexbg{position:absolute;inset:0;z-index:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 0L42 0L56 24L42 48L14 48L0 24Z' fill='none' stroke='%2380b0d0' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 48px}
.csdb:after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 36%,transparent 58%,rgba(0,0,0,.5))}

/* ===== top nav ===== */
.csdb .nav{position:relative;z-index:10;display:flex;align-items:center;height:62px;padding:0 26px;
  background:linear-gradient(180deg,rgba(16,26,35,.94),rgba(11,18,26,.7));border-bottom:1px solid rgba(140,180,205,.16);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.csdb .logo{display:flex;align-items:center;gap:11px;margin-right:30px}
.csdb .logo .hx{width:30px;height:34px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,var(--yellow),var(--yellow-lo));display:flex;align-items:center;justify-content:center}
.csdb .logo .hx svg{width:17px;height:17px}
.csdb .logo b{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--txt)}
.csdb .logo b i{color:var(--yellow);font-style:normal}
.csdb .navitems{display:flex;gap:4px}
.csdb .navitems a{position:relative;font-weight:600;font-size:15px;letter-spacing:.12em;color:var(--soft);padding:8px 16px;text-decoration:none;text-transform:uppercase}
.csdb .navitems a.on{color:#fff}
.csdb .navitems a.on:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;background:var(--yellow);box-shadow:0 0 10px rgba(245,197,52,.5)}
.csdb .navitems a.dim{color:var(--muted)}
.csdb .navspacer{flex:1}
.csdb .coll{display:flex;align-items:center;gap:11px;margin-right:26px}
.csdb .coll .av{width:30px;height:34px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#33485a,#1d2c38);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;color:var(--cyan-soft);font-size:13px}
.csdb .coll .pb{width:150px}
.csdb .coll .pb .t{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}
.csdb .coll .pb .t b{color:var(--cyan-soft)}
.csdb .coll .pb .track{height:6px;background:rgba(120,168,198,.16);overflow:hidden}
.csdb .coll .pb .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#7fe6f4);box-shadow:0 0 8px rgba(53,201,232,.5);transition:width .5s}
.csdb .cur{display:flex;align-items:center;gap:18px;margin-right:18px}
.csdb .cur .c{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;letter-spacing:.04em}
.csdb .cur .coin{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:11px}
.csdb .cur .coin.r{background:radial-gradient(circle at 35% 30%,#ffe488,var(--yellow-lo));color:#3a2c06}
.csdb .cur .coin.s{background:radial-gradient(circle at 35% 30%,#9fb6c6,#5c7384);color:#1a2229}
.csdb .cur .c b{color:#fff}
.csdb .ico{display:flex;gap:14px;color:var(--muted)}
.csdb .ico svg{width:20px;height:20px;display:block}

/* ===== grid ===== */
.csdb .grid{position:relative;z-index:10;display:grid;grid-template-columns:340px 1fr 396px;gap:22px;padding:24px 26px;min-height:calc(100vh - 62px)}

/* framed panel */
.csdb .bf{position:relative;background:var(--panel);border:1px solid var(--edge)}
.csdb .bf>.acc{position:absolute;top:0;left:18px;right:18px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--cyan) 70%,transparent)}
.csdb .bf>.acc:after{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:42px;height:5px;background:var(--cyan);box-shadow:0 0 8px rgba(53,201,232,.6)}
.csdb .bf>.cn{position:absolute;width:16px;height:16px;border:2px solid var(--cyan);opacity:.65;pointer-events:none}
.csdb .bf>.cn.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.csdb .bf>.cn.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.csdb .bf>.cn.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.csdb .bf>.cn.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.csdb .eyebrow{font-weight:600;font-size:11px;letter-spacing:.26em;color:var(--muted);text-transform:uppercase}

/* left column */
.csdb .col{display:flex;flex-direction:column;gap:20px}
.csdb .qm{padding:18px 18px 16px}
.csdb .qm .top{display:flex;align-items:center;gap:14px}
.csdb .qm .av{width:54px;height:60px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#2b3e4d,#172430);display:flex;align-items:center;justify-content:center;position:relative}
.csdb .qm .av:before{content:"";position:absolute;inset:2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:1px solid rgba(53,201,232,.4)}
.csdb .qm .av span{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--cyan-soft)}
.csdb .qm .who b{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:.04em;color:#fff;display:block;line-height:1}
.csdb .qm .who small{font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.csdb .qm .dot{width:9px;height:9px;border-radius:50%;background:#79e08d;box-shadow:0 0 8px #79e08d;display:inline-block;margin-right:6px;vertical-align:1px}
.csdb .qm .div{height:1px;background:var(--edge2);margin:15px 0 13px}
.csdb .qm .stat{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.csdb .qm .stat .lb{font-weight:600;font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.csdb .qm .stat .v{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--yellow);line-height:.9}
.csdb .qm .pity .pl{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;color:var(--soft);margin-bottom:6px;text-transform:uppercase}
.csdb .qm .pity .pl b{color:var(--cyan-soft)}
.csdb .qm .ptrack{height:7px;background:rgba(120,168,198,.16)}
.csdb .qm .ptrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#7fe6f4);transition:width .4s}

.csdb .rates{padding:16px 18px 14px}
.csdb .rates h4{margin:6px 0 12px;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.08em;color:#fff;text-transform:uppercase}
.csdb .rrow{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--edge2)}
.csdb .rrow:last-child{border-bottom:0}
.csdb .rrow .sw{width:11px;height:11px;transform:rotate(45deg);background:var(--rar,#9aa6b3)}
.csdb .rrow .nm{font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--soft);text-transform:uppercase}
.csdb .rrow .pc{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--rar,#9aa6b3)}
.csdb .rrow.hl .nm{color:#fff}

/* center column */
.csdb .center{display:flex;flex-direction:column;align-items:center}
.csdb .chead{align-self:flex-start;margin-bottom:14px}
.csdb .chead .eb{font-weight:600;font-size:12px;letter-spacing:.3em;color:var(--cyan-soft);text-transform:uppercase}
.csdb .chead h1{font-family:var(--disp);font-weight:700;font-size:40px;letter-spacing:.04em;color:#fff;line-height:1;margin-top:4px;text-transform:uppercase}
.csdb .hexsel{display:flex;gap:14px;margin-bottom:8px;flex-wrap:wrap;justify-content:center}
.csdb .hex{position:relative;width:92px;cursor:pointer;text-align:center;transition:transform .15s}
.csdb .hex:hover{transform:translateY(-3px)}
.csdb .hex .shape{width:92px;height:104px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,rgba(40,56,70,.9),rgba(20,32,42,.95));display:flex;align-items:center;justify-content:center;position:relative}
.csdb .hex .shape:before{content:"";position:absolute;inset:2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:1px solid rgba(120,168,198,.22)}
.csdb .hex .shape img{width:60px;height:84px;object-fit:cover;clip-path:polygon(50% 4%,94% 27%,94% 73%,50% 96%,6% 73%,6% 27%)}
.csdb .hex .nm{font-weight:600;font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin-top:7px;text-transform:uppercase}
.csdb .hex.sel .shape{background:linear-gradient(180deg,rgba(245,197,52,.22),rgba(20,32,42,.95))}
.csdb .hex.sel .shape:before{border-color:var(--yellow);box-shadow:0 0 16px rgba(245,197,52,.4),inset 0 0 14px rgba(245,197,52,.18)}
.csdb .hex.sel .nm{color:var(--yellow)}
.csdb .hex .tag{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-weight:700;font-size:8.5px;letter-spacing:.1em;color:#2a2206;background:var(--yellow);padding:2px 7px;text-transform:uppercase;white-space:nowrap}
.csdb .hex .lk{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-weight:700;font-size:8.5px;letter-spacing:.1em;color:#0c1118;background:var(--cyan-soft);padding:2px 7px;text-transform:uppercase;white-space:nowrap}

.csdb .stage{position:relative;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px}
.csdb .stage .floor{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);width:330px;height:90px;background:radial-gradient(ellipse at center,rgba(245,197,52,.12),transparent 70%);filter:blur(2px)}
.csdb .stage .floor:after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:220px;height:14px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
.csdb .stage .hexfloor{position:absolute;bottom:54px;left:50%;transform:translateX(-50%) rotateX(64deg);width:300px;height:300px;opacity:.16;background-image:linear-gradient(rgba(53,201,232,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(53,201,232,.5) 1px,transparent 1px);background-size:34px 34px;-webkit-mask:radial-gradient(circle,#000,transparent 70%);mask:radial-gradient(circle,#000,transparent 70%)}
.csdb .crate{position:relative;z-index:2;height:330px;filter:drop-shadow(0 26px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(245,197,52,.14));margin-bottom:14px;animation:csdb-float 4s ease-in-out infinite}
@keyframes csdb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.csdb .cname{position:relative;z-index:2;text-align:center}
.csdb .cname b{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:.05em;color:#fff;text-transform:uppercase;line-height:1}
.csdb .cname small{display:block;font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--yellow);margin-top:6px;text-transform:uppercase}

/* right: supply drop */
.csdb .drop{padding:0;display:flex;flex-direction:column;align-self:start}
.csdb .drop .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.csdb .drop .dh .t{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.06em;color:#fff;text-transform:uppercase}
.csdb .drop .dh .cl{font-weight:600;font-size:10.5px;letter-spacing:.14em;color:var(--cyan-soft);text-transform:uppercase}
.csdb .hazbox{position:relative;margin:0 18px;height:266px;border:3px solid transparent;
  background:linear-gradient(rgba(8,12,18,.7),rgba(8,12,18,.7)) padding-box,repeating-linear-gradient(135deg,var(--yellow) 0 16px,#15161a 16px 32px) border-box;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.csdb .hazbox:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 40%,rgba(245,197,52,.14),transparent 70%)}
.csdb .hazbox img{position:relative;z-index:2;height:226px;filter:drop-shadow(0 16px 26px rgba(0,0,0,.6))}
.csdb .hazbox .spark{position:absolute;inset:0;z-index:1;opacity:.5;background:radial-gradient(2px 2px at 22% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 74% 22%,#fff,transparent),radial-gradient(2px 2px at 64% 72%,#ffe488,transparent),radial-gradient(1.5px 1.5px at 33% 78%,#fff,transparent),radial-gradient(1.5px 1.5px at 86% 56%,#ffe488,transparent)}
.csdb .hazbox.flash{animation:csdb-flash .55s ease-out}
@keyframes csdb-flash{0%{filter:none}20%{filter:brightness(2.4) saturate(1.4)}22%{transform:translateX(-3px)}24%{transform:translateX(3px)}26%{transform:translateX(-2px)}28%{transform:translateX(0)}100%{filter:none}}
.csdb .opn{margin:16px 18px 0;height:60px;cursor:pointer;border:0;position:relative;background:linear-gradient(180deg,var(--yellow-hi),var(--yellow) 40%,var(--yellow-lo));box-shadow:0 4px 0 var(--yellow-deep),0 8px 22px rgba(245,197,52,.3);display:flex;align-items:center;justify-content:center;gap:12px;transition:filter .12s,transform .06s,box-shadow .06s}
.csdb .opn:before{content:"";position:absolute;left:0;top:0;right:0;height:48%;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent)}
.csdb .opn:hover{filter:brightness(1.06)}
.csdb .opn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--yellow-deep),0 3px 12px rgba(245,197,52,.25)}
.csdb .opn[disabled]{filter:grayscale(.55) brightness(.62);cursor:default;box-shadow:0 4px 0 #3a3a3a}
.csdb .opn .gt{position:relative;z-index:2;color:#2a2206;font-size:20px}
.csdb .opn span{position:relative;z-index:2;font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:.08em;color:#2a2206;text-transform:uppercase}
.csdb .opn b{position:relative;z-index:2;font-weight:700;font-size:15px;letter-spacing:.04em;color:#3a2c06}
.csdb .opn-msg{margin:10px 18px 0;padding:9px 12px;border:1px solid rgba(255,82,103,.5);background:rgba(255,82,103,.1);color:#ff8b98;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.csdb .contents{margin:14px 18px 18px;padding-top:14px;border-top:1px solid var(--edge2)}
.csdb .contents .cr{display:flex;justify-content:space-between;font-weight:600;font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.csdb .contents .cr b{color:var(--soft)}
.csdb .ob{display:flex;height:12px;overflow:hidden;background:rgba(0,0,0,.3)}
.csdb .ob i{display:block;height:100%}
.csdb .contents .note{margin-top:9px;font-weight:600;font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;text-align:center}

/* ===== reveal overlay ===== */
.csdb .reveal{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
.csdb .reveal[hidden]{display:none}
.csdb .reveal-bg{position:absolute;inset:0;background:rgba(4,8,12,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:csdb-fade .25s ease-out}
.csdb .reveal-rays{position:absolute;width:1100px;height:1100px;z-index:1;opacity:.16;animation:csdb-rayspin 16s linear infinite,csdb-fade .4s ease-out;
  background:repeating-conic-gradient(from 0deg,var(--rar,#f5c534) 0 1deg,transparent 1deg 9deg);
  -webkit-mask:radial-gradient(circle,#000 0%,transparent 58%);mask:radial-gradient(circle,#000 0%,transparent 58%)}
@keyframes csdb-rayspin{to{transform:rotate(360deg)}}
@keyframes csdb-fade{from{opacity:0}to{opacity:1}}
.csdb .rcard{position:relative;z-index:2;width:340px;padding:0 0 22px;text-align:center;background:linear-gradient(180deg,rgba(20,30,40,.96),rgba(11,18,26,.98));border:1px solid var(--rar,#f5c534);
  box-shadow:0 0 50px -6px var(--rar,#f5c534),0 24px 60px rgba(0,0,0,.6);
  clip-path:polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px));
  animation:csdb-cardin .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes csdb-cardin{from{transform:translateY(46px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.csdb .rcard-tier{margin:0 0 0;padding:11px 0;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:#0c1118;background:var(--rar,#f5c534)}
.csdb .rcard-art{position:relative;padding:20px 0 6px;display:flex;align-items:center;justify-content:center;height:230px}
.csdb .rcard-art:before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--rar,#f5c534),transparent 68%);opacity:.18}
.csdb .rcard-art img{position:relative;z-index:2;max-height:200px;max-width:78%;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
.csdb .rcard-name{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.03em;color:#fff;text-transform:uppercase;line-height:1.05;padding:0 18px;margin-top:4px}
.csdb .rcard-set{font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:7px}
.csdb .rcard-badge{display:inline-block;margin-top:14px;padding:6px 16px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.csdb .rcard-badge[hidden]{display:none}
.csdb .rcard-badge.is-new{color:#0c1118;background:#79e08d}
.csdb .rcard-badge.is-dupe{color:#ffd9a0;border:1px solid rgba(245,197,52,.5);background:rgba(245,197,52,.08)}
.csdb .rcard-btn{margin:18px 18px 0;width:calc(100% - 36px);height:48px;border:0;cursor:pointer;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:#2a2206;
  background:linear-gradient(180deg,var(--yellow-hi),var(--yellow) 40%,var(--yellow-lo));box-shadow:0 4px 0 var(--yellow-deep)}
.csdb .rcard-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--yellow-deep)}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .csdb .crate,.csdb .reveal-rays,.csdb .rcard,.csdb .hazbox.flash{animation:none!important}
}

/* ============================================================
   SUPPLY DROP — four-room shell (room nav, album, wall, daily,
   locked veil, toast). Scoped under .csdb. Rarity via --rar. */
.csdb{position:relative}

/* ---- persistent room nav ---- */
.csroom-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 18px;background:var(--panel2);border-bottom:1px solid var(--edge)}
.csroom-tabs{display:flex;gap:2px;flex-wrap:wrap}
.csroom{position:relative;background:none;border:0;font-family:var(--ui);font-weight:600;font-size:13.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:8px 14px;cursor:pointer}
.csroom .rl{color:var(--yellow);margin-right:6px;font-size:11px}
.csroom:hover{color:var(--soft)}
.csroom.is-active{color:var(--txt)}
.csroom.is-active:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--yellow);box-shadow:0 0 10px rgba(245,197,52,.5)}
.csroom-meta{margin-left:auto;display:flex;align-items:center;gap:16px}
.csroom-coll{min-width:120px}
.csroom-coll .t{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-bottom:4px}
.csroom-coll .t b{color:var(--cyan-soft)}
.csroom-coll .track{height:4px;background:rgba(120,168,198,.16)}
.csroom-coll .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#7fe6f4);box-shadow:0 0 8px rgba(53,201,232,.5);transition:width .5s}
.csroom-cur{display:flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:18px;color:var(--txt)}
.csroom-cur .coin{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:11px}
.csroom-cur .coin.r{background:radial-gradient(circle at 35% 30%,#ffe488,var(--yellow-lo));color:#3a2c06}
.csroom-cur .coin.s{background:radial-gradient(circle at 35% 30%,#bcd2e2,#5d7283);color:#10202c}

.csroom-panel{display:block}
.csroom-panel[hidden]{display:none}

/* ---- shared section heads use .bf already; small add-ons ---- */
.csdb h2{font-family:var(--disp);font-weight:700;letter-spacing:.05em;color:#fff;text-transform:uppercase;font-size:24px;line-height:1;margin:2px 0 0}

/* =================== THE ALBUM =================== */
.csa-head{padding:14px 18px;margin:14px 18px 0}
.csa-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.csa-pct{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--cyan-soft);margin-left:8px}
.csa-toggle{background:none;border:1px solid var(--edge);color:var(--muted);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;cursor:pointer}
.csa-toggle.on{border-color:var(--yellow);color:var(--yellow)}
.csa-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.csa-search{flex:1 1 200px;min-width:0;background:rgba(8,14,20,.7);border:1px solid var(--edge);color:var(--txt);font-family:var(--ui);font-size:14px;letter-spacing:.02em;padding:9px 12px}
.csa-search::placeholder{color:var(--dim)}
.csa-search:focus{outline:none;border-color:var(--cyan)}
.csa-chips{display:flex;gap:6px;flex-wrap:wrap}
.csa-chip{background:rgba(120,168,198,.08);border:1px solid var(--edge2);color:var(--muted);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;cursor:pointer}
.csa-chip:hover{color:var(--soft)}
.csa-chip.on{border-color:var(--rar,var(--cyan));color:#fff;background:color-mix(in srgb,var(--rar,var(--cyan)) 16%,transparent)}
.csa-sets{padding:14px 18px 18px;display:flex;flex-direction:column;gap:18px}
.csa-set-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;border-bottom:1px solid var(--edge2);padding-bottom:8px}
.csa-set-nm{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.08em;color:#fff;text-transform:uppercase}
.csa-set-ct{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--cyan-soft)}
.csa-set-done{margin-left:auto;font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--yellow);text-transform:uppercase;opacity:.7}
.csa-set-claim{margin-left:auto;background:linear-gradient(180deg,var(--yellow-hi),var(--yellow-lo));color:#3a2c06;border:0;font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;cursor:pointer;box-shadow:0 0 14px rgba(245,197,52,.35)}
.csa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.csa-slot{position:relative;background:var(--panel);border:1px solid var(--edge2);border-left:3px solid var(--rar,var(--dim));padding:8px;cursor:pointer;transition:transform .12s,border-color .12s}
.csa-slot:hover{transform:translateY(-2px);border-color:var(--rar,var(--cyan))}
.csa-slot.missing{opacity:.5}
.csa-slot.craftable{opacity:.8;box-shadow:inset 0 0 0 1px rgba(53,201,232,.5)}
.csa-slot-art{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:rgba(8,14,20,.5);margin-bottom:6px;overflow:hidden}
.csa-slot-art img{width:100%;height:100%;object-fit:contain}
.csa-slot-lock{font-size:22px;color:var(--dim)}
.csa-slot.craftable .csa-slot-lock{color:var(--cyan)}
.csa-slot-nm{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--soft);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:27px}
.csa-slot-x{position:absolute;top:6px;right:6px;background:rgba(8,14,20,.85);color:var(--cyan-soft);font-family:var(--disp);font-weight:700;font-size:11px;padding:1px 6px}
.csa-empty{color:var(--dim);font-size:14px;padding:20px;text-align:center}

/* album detail modal */
.csa-modal{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.csa-modal-bg{position:absolute;inset:0;background:rgba(6,11,16,.78);backdrop-filter:blur(3px)}
.csa-modal-card{position:relative;width:min(340px,86%);background:var(--panel2);border:1px solid var(--rar,var(--edge));box-shadow:0 0 40px color-mix(in srgb,var(--rar,#000) 30%,transparent);padding:20px;text-align:center}
.csa-modal-tier{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--rar,var(--cyan))}
.csa-modal-art{height:130px;display:flex;align-items:center;justify-content:center;margin:10px 0}
.csa-modal-art img{max-width:100%;max-height:100%;object-fit:contain}
.csa-modal-name{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.03em;color:#fff}
.csa-modal-set{font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.csa-modal-lore{font-size:13px;color:var(--soft);line-height:1.45;margin:10px 0;font-style:italic}
.csa-modal-state{font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--cyan-soft);text-transform:uppercase}
.csa-modal-act{display:flex;gap:8px;justify-content:center;margin-top:14px}
.csa-modal-craft{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow-lo));color:#3a2c06;border:0;font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
.csa-modal-close{background:none;border:1px solid var(--edge);color:var(--soft);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;cursor:pointer}

/* =================== SERVICE WALL =================== */
.csw-head{padding:14px 18px;margin:14px 18px 0}
.csw-head .top{display:flex;align-items:center;gap:12px}
.csw-head .av{width:36px;height:40px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#33485a,#1d2c38);display:flex;align-items:center;justify-content:center}
.csw-head .av span{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--cyan-soft)}
.csw-head .who b{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:.04em;color:#fff;display:block;line-height:1}
.csw-head .who small{font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.csw-head .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:6px;box-shadow:0 0 6px var(--cyan)}
.csw-count{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:24px;color:var(--yellow)}
.csw-wren{margin-top:12px;font-size:13px;color:var(--soft);line-height:1.5;font-style:italic;border-left:2px solid var(--edge);padding-left:12px}
.csw-grid{padding:16px 18px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.csw-med{position:relative;background:var(--panel);border:1px solid var(--edge2);border-top:3px solid var(--rar,var(--dim));padding:12px;text-align:center}
.csw-med.locked{opacity:.42}
.csw-med.owned{box-shadow:0 0 18px color-mix(in srgb,var(--rar,#000) 22%,transparent)}
.csw-med-art{height:78px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.csw-med-art img{max-width:100%;max-height:100%;object-fit:contain}
.csw-med-lock{font-size:30px;color:var(--dim)}
.csw-med-nm{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.03em;color:#fff;line-height:1.1}
.csw-med-tier{font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--rar,var(--muted));margin-top:3px}
.csw-note{padding:10px 18px 18px;color:var(--dim);font-size:12px;line-height:1.5}

/* =================== DAILY =================== */
.csd-wrap{padding:18px;margin:14px 18px;max-width:560px}
.csd-title{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.csd-date{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--muted);margin-left:8px}
.csd-wren{margin:8px 0 16px;font-size:13px;color:var(--soft);line-height:1.5;font-style:italic;border-left:2px solid var(--edge);padding-left:12px}
.csd-core{position:relative;text-align:center;padding:22px 16px;background:rgba(8,14,20,.5);border:1px solid var(--edge2)}
.csd-core[data-tier=bronze]{--tier:#c97b3a}
.csd-core[data-tier=silver]{--tier:#c7d0d8}
.csd-core[data-tier=gold]{--tier:#f5c534}
.csd-core[data-tier=cobalt]{--tier:#4aa3ff}
.csd-tier{font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--tier,var(--muted))}
.csd-amt{margin:6px 0 16px;display:flex;align-items:baseline;justify-content:center;gap:8px}
.csd-amt b{font-family:var(--disp);font-weight:700;font-size:54px;line-height:.9;color:var(--tier,var(--txt))}
.csd-amt span{font-weight:600;font-size:13px;letter-spacing:.18em;color:var(--muted)}
.csd-claim{background:linear-gradient(180deg,var(--yellow-hi),var(--yellow-lo));color:#3a2c06;border:0;font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:12px 22px;cursor:pointer;box-shadow:0 0 18px rgba(245,197,52,.35)}
.csd-claim:disabled{background:rgba(120,168,198,.14);color:var(--dim);box-shadow:none;cursor:not-allowed}
.csd-msg{margin-top:10px;font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--cyan-soft);min-height:16px}
.csd-odds{margin-top:16px;display:flex;flex-direction:column;gap:1px}
.csd-odds-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--edge2)}
.csd-odds-row .t{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.csd-odds-row .t.bronze{color:#c97b3a}.csd-odds-row .t.silver{color:#c7d0d8}.csd-odds-row .t.gold{color:#f5c534}.csd-odds-row .t.cobalt{color:#4aa3ff}
.csd-odds-row .r{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--soft)}
.csd-odds-row .a{font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--muted)}

/* =================== LOCKED VEIL =================== */
.csdb-locked{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(6,11,16,.82);backdrop-filter:blur(4px)}
.csdb-locked-card{text-align:center;max-width:380px;padding:28px}
.csdb-locked-mark{font-size:40px;color:var(--yellow);text-shadow:0 0 20px rgba(245,197,52,.5)}
.csdb-locked-t{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.1em;color:#fff;text-transform:uppercase;margin:10px 0 8px}
.csdb-locked-b{font-size:14px;color:var(--soft);line-height:1.6}

/* =================== TOAST =================== */
.csdb-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,12px);z-index:80;background:rgba(8,14,20,.94);border:1px solid var(--cyan);color:var(--txt);font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.04em;padding:10px 18px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 0 22px rgba(53,201,232,.3)}
.csdb-toast.on{opacity:1;transform:translate(-50%,0)}

/* [hidden] must beat the unconditional display:flex on absolutely-positioned overlays */
.csdb .csdb-locked[hidden],
.csdb .csa-modal[hidden],
.csdb .reveal[hidden]{display:none!important}