/* items.css — split out of style.css on 2026-09-02 so a feature's styles live
   with the feature and parallel sessions stop colliding in one 4,600-line
   file. Items (items.js): the daily-chest card and screen, the collection grid, the rarity rims and the vendor's counter.
   Loads AFTER style.css (index.html), so the cascade order the rules had
   inside it is preserved: nothing here was moved relative to what follows it. */

/* ---- items (items.js): the chest card, the chest screen, the collection ---- */
.chest-card { border-color: rgba(200,140,255,.5); background: linear-gradient(90deg, rgba(200,140,255,.14), rgba(255,255,255,.03)); }
.chest-card:hover { border-color: #d9a6ff; background: rgba(200,140,255,.2); }
.chest-card .db-body b { color: #d9a6ff; }
.chest-card.claimed { border-color: rgba(125,255,178,.45); background: rgba(125,255,178,.08); }
.chest-card.claimed .db-body b { color: #7dffb2; }
.chest-top { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.chest-box { flex: 0 0 260px; display: flex; }
.chest-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 170px; padding: 14px; border-radius: 16px; border: 2px solid rgba(255,215,94,.7);
  background: radial-gradient(circle at 50% 30%, rgba(255,215,94,.25), rgba(255,255,255,.04));
  color: #fff; font: inherit; cursor: pointer; text-align: center;
}
.chest-btn b { font-size: 15px; letter-spacing: .8px; color: var(--gold); }
.chest-btn small { font-size: 12px; color: #d7e0ea; font-weight: 600; }
.chest-btn .chest-ico { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.chest-btn:not(.locked):hover { background: radial-gradient(circle at 50% 30%, rgba(255,215,94,.4), rgba(255,255,255,.06)); }
.chest-btn:not(.locked):hover .chest-ico { animation: chest-wiggle .6s ease-in-out infinite; }
.chest-btn.locked { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); cursor: default; }
.chest-btn.locked b { color: #c9d1dc; }
.chest-btn.locked[data-chest="signin"] { cursor: pointer; border-color: rgba(52,211,255,.6); }
.chest-btn.locked[data-chest="signin"] b { color: var(--cyan); }
.chest-btn.shaking .chest-ico { animation: chest-shake .12s linear infinite; }
@keyframes chest-wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes chest-shake { 0% { transform: translate(-3px,0) rotate(-6deg); } 50% { transform: translate(3px,-4px) rotate(6deg) scale(1.08); } 100% { transform: translate(-2px,1px) rotate(-4deg); } }
.chest-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.chest-streak, .chest-odds { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 4px; }
.chest-streak b, .chest-odds b { font-size: 12px; letter-spacing: .8px; color: #c9d1dc; text-transform: uppercase; }
.chest-streak small, .chest-odds small { font-size: 12px; color: #d7e0ea; font-weight: 600; line-height: 1.4; }
.chest-dots { display: flex; gap: 6px; margin: 2px 0; }
.chest-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); }
.chest-dots i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(255,215,94,.7); }
.chest-dots i.seven { border-color: #d9a6ff; }
.chest-dots i.seven.on { background: #d9a6ff; border-color: #d9a6ff; box-shadow: 0 0 10px #d9a6ff; }
.r-common { --rar: #c9d1dc; }
.r-uncommon { --rar: #7dffb2; }
.r-rare { --rar: #34d3ff; }
.r-legendary { --rar: #ffd75e; }
span.r-common, span.r-uncommon, span.r-rare, span.r-legendary { color: var(--rar); }
.chest-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 16px; padding: 18px;
  border-radius: 16px; border: 2px solid var(--rar, #fff); background: rgba(255,255,255,.05);
  box-shadow: 0 0 24px color-mix(in srgb, var(--rar, #fff) 45%, transparent);
  animation: reveal-in .55s cubic-bezier(.2,1.4,.4,1); text-align: center;
}
.chest-reveal.note { border-color: rgba(255,255,255,.2); box-shadow: none; color: #ffb84d; font-weight: 700; }
.chest-reveal.r-legendary { background: linear-gradient(180deg, rgba(255,215,94,.18), rgba(255,120,60,.12)); animation: reveal-in .55s cubic-bezier(.2,1.4,.4,1), fire-pulse .6s infinite alternate; }
@keyframes reveal-in { 0% { transform: scale(.3) translateY(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.chest-reveal .cr-tag { font-size: 11px; letter-spacing: 1.2px; color: #c9d1dc; }
.chest-reveal .cr-ico { font-size: 72px; line-height: 1.1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.chest-reveal .cr-ico .ic-art { width: 132px; height: 132px; object-fit: contain; }
.chest-reveal .cr-name { font-size: 22px; color: #fff; }
.chest-reveal .cr-rar { font-size: 13px; font-weight: 800; letter-spacing: .8px; color: var(--rar); text-transform: uppercase; }
.chest-reveal .cr-desc { font-size: 13px; color: #d7e0ea; font-weight: 600; max-width: 460px; }
.chest-reveal .cr-new { margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--rar); color: #111; font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.chest-reveal .cr-dupe { margin-top: 4px; color: var(--gold); font-weight: 800; font-size: 14px; }
.chest-reveal .cr-streak { font-size: 12px; color: #c9d1dc; font-weight: 600; }
.chest-cat { font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: #c9d1dc; margin: 12px 0 6px; }
.chest-cat small { color: #8a94a6; }
.chest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.item-card { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent); text-align: left; }
.item-card.got { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 25%, transparent); }
.item-card.locked { opacity: .5; }
.item-card .ic-ico { font-size: 28px; line-height: 1.1; }
/* a painted icon sits in the same square the emoji did (web/items/<id>.png) */
.item-card .ic-art { width: 44px; height: 44px; object-fit: contain; display: block; margin: -4px -4px 0 -2px; }
.item-card .ic-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-card .ic-body b { font-size: 13px; color: #fff; }
.item-card .ic-body small { font-size: 11px; color: #c9d1dc; font-weight: 600; line-height: 1.35; }
.item-card .ic-meta { display: flex; gap: 8px; font-size: 11px; font-weight: 800; }
.item-card .ic-rar { color: var(--rar); text-transform: uppercase; letter-spacing: .6px; }
.item-card .ic-qty { color: var(--gold); }
/* the vendor's counter: what Herr Kohl pays for one copy, and the ask */
.item-card .ic-val { color: #8a94a6; display: inline-flex; align-items: center; gap: 3px; }
.item-card .ic-val .coin { width: 11px; height: 11px; }
.item-card .ic-sell { align-self: flex-start; margin-top: 4px; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  font: 800 11px/1.2 inherit; letter-spacing: .3px; color: #ffd98a;
  background: rgba(255,184,77,.12); border: 1px solid rgba(255,184,77,.35); }
.item-card .ic-sell:hover { background: rgba(255,184,77,.22); }
.item-card .ic-sell.asking { color: #12161d; background: var(--gold, #ffb84d); border-color: var(--gold, #ffb84d); }
.chest-vendor { font-size: 12px; font-weight: 600; color: #8a94a6; margin: -2px 0 8px; line-height: 1.45; }
.rw-drop { animation: fire-pulse .6s infinite alternate; }
.vs-chip.r-legendary { border-color: var(--gold); }