/* RIPDEN — card site theme. Dark neon arcade. */
/* Rarity colors: common #9696aa | uncommon #7ddf8a | rare #ff2d96 | epic #b06bff | legendary #ffd700 */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0d0d1a; color: #f0f0f5;
  font-family: "Courier New", monospace;
  min-height: 100vh; padding: 0 0 64px;
}
a { color: #00e5ff; }

/* ---------- nav + session ---------- */
nav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 14px 20px; border-bottom: 2px solid #ff2d96; background: #101022;
  position: sticky; top: 0; z-index: 40;
}
nav .brand { color: #ff2d96; font-size: 20px; letter-spacing: 4px; font-weight: bold; text-decoration: none; }
nav .links { display: flex; gap: 18px; flex-wrap: wrap; }
nav .links a { color: #b9b9cc; text-decoration: none; letter-spacing: 2px; font-size: 13px; }
nav .links a:hover, nav .links a.active { color: #00e5ff; }
#sessionBar { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #9696aa; }
#sessionBar input {
  background: #1e1e34; border: 1px solid #33334d; color: #f0f0f5; border-radius: 6px;
  padding: 7px 10px; font-family: inherit; font-size: 13px; width: 150px;
}
#sessionBar .who { color: #00e5ff; letter-spacing: 1px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 16px 0; }
header.page { text-align: center; margin-bottom: 24px; }
header.page h1 { color: #ff2d96; font-size: clamp(26px, 5vw, 44px); letter-spacing: 4px; }
header.page p { color: #9696aa; margin-top: 10px; font-size: 14px; line-height: 1.6; max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- buttons / inputs / errors ---------- */
.btn {
  background: #ff2d96; color: #0d0d1a; border: none; border-radius: 10px;
  font-family: inherit; font-weight: bold; font-size: 15px; letter-spacing: 3px;
  padding: 13px 30px; cursor: pointer;
}
.btn:hover { background: #ff5cae; }
.btn.ghost { background: transparent; color: #00e5ff; border: 2px solid #00e5ff; }
.btn.ghost:hover { background: rgba(0,229,255,.12); }
.btn:disabled { opacity: .45; cursor: default; }
input[type=text], select {
  background: #1e1e34; border: 1px solid #33334d; color: #f0f0f5; border-radius: 8px;
  padding: 10px 12px; font-family: inherit; font-size: 14px;
}
.err {
  display: none; max-width: 640px; margin: 16px auto 0; padding: 12px 16px;
  background: #3a1420; border: 1px solid #ff2d96; border-radius: 8px;
  color: #ffb3d4; font-size: 13px; line-height: 1.5;
}

/* ---------- full-size card (all data rendered in code, never baked into art) ---------- */
.showcase { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; perspective: 1200px; }
.card-wrap { perspective: 1200px; }
.card {
  width: 340px; border-radius: 22px; padding: 10px;
  background: #101022; border: 3px solid #ff2d96;
  box-shadow: 0 0 0 2px #00e5ff, 0 18px 50px rgba(0,0,0,.6);
  transition: transform .15s ease-out; transform-style: preserve-3d; position: relative;
}
.card.uncommon { border-color: #7ddf8a; }
.card.epic {
  border-color: #b06bff;
  box-shadow: 0 0 0 2px #b06bff, 0 0 30px rgba(176,107,255,.5), 0 18px 50px rgba(0,0,0,.6);
  animation: epicPulse 3s ease-in-out infinite;
}
@keyframes epicPulse {
  0%,100% { box-shadow: 0 0 0 2px #b06bff, 0 0 18px rgba(176,107,255,.4), 0 18px 50px rgba(0,0,0,.6); }
  50%     { box-shadow: 0 0 0 2px #d0a6ff, 0 0 42px rgba(176,107,255,.7), 0 18px 50px rgba(0,0,0,.6); }
}
.card.legendary {
  border-color: #ffd700;
  box-shadow: 0 0 0 2px #ff9d00, 0 0 34px rgba(255,180,0,.45), 0 18px 50px rgba(0,0,0,.6);
  animation: legPulse 3s ease-in-out infinite;
}
@keyframes legPulse {
  0%,100% { box-shadow: 0 0 0 2px #ff9d00, 0 0 22px rgba(255,180,0,.35), 0 18px 50px rgba(0,0,0,.6); }
  50%     { box-shadow: 0 0 0 2px #ffe066, 0 0 46px rgba(255,180,0,.65), 0 18px 50px rgba(0,0,0,.6); }
}
.card-inner { position: relative; border-radius: 14px; overflow: hidden; }
.card h3 { text-align: center; color: #ff2d96; letter-spacing: 3px; font-size: 22px; padding: 12px 0 8px; }
.card.uncommon h3 { color: #7ddf8a; } .card.epic h3 { color: #b06bff; } .card.legendary h3 { color: #ffd700; }
.art { margin: 0 12px; border: 2px solid #ff2d96; border-radius: 8px; overflow: hidden; }
.card.uncommon .art { border-color: #7ddf8a; } .card.epic .art { border-color: #b06bff; } .card.legendary .art { border-color: #ffd700; }
.art img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.cname { text-align: center; font-size: 30px; letter-spacing: 4px; margin: 12px 0 2px; font-weight: bold; }
.cnum { text-align: center; color: #9696aa; font-size: 15px; letter-spacing: 2px; }
.crar { text-align: center; font-size: 16px; letter-spacing: 3px; margin: 8px 0 12px; }
.common .crar { color: #9696aa; } .uncommon .crar { color: #7ddf8a; }
.rare .crar { color: #ff2d96; } .epic .crar { color: #b06bff; } .legendary .crar { color: #ffd700; }
.stat { margin: 8px 18px; }
.stat .lab { display: flex; justify-content: space-between; font-size: 12px; color: #00e5ff; letter-spacing: 2px; margin-bottom: 4px; }
.stat .lab span:last-child { color: #f0f0f5; }
.bar { height: 12px; background: #1e1e34; border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; }
.lore { margin: 14px 18px 0; border: 1px solid #33334d; border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #9696aa; line-height: 1.6; }
.supply { text-align: center; color: #9696aa; font-size: 11px; letter-spacing: 2px; padding: 12px 0 14px; }

/* sheen sweep (Rare and up) */
.fx-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%);
  background-size: 280% 100%; background-position: 120% 0; mix-blend-mode: screen; }
.rare .fx-sheen, .epic .fx-sheen { animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 120% 0; } 55%,100% { background-position: -40% 0; } }

/* holo (Legendary) */
.fx-holo { position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: color-dodge;
  background: conic-gradient(from var(--ha, 0deg), #ff0080, #ff8000, #ffee00, #00ff80, #00c8ff, #8a00ff, #ff0080);
  filter: blur(2px) saturate(1.4); animation: holoSpin 6s linear infinite; }
@property --ha { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes holoSpin { to { --ha: 360deg; } }
.fx-sparkle { position: absolute; inset: 0; pointer-events: none; opacity: .8; mix-blend-mode: screen;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 70% 15%, #fff, transparent),
    radial-gradient(3px 3px at 40% 70%, #ffe9a8, transparent),
    radial-gradient(2px 2px at 85% 60%, #fff, transparent),
    radial-gradient(3px 3px at 10% 80%, #ffd700, transparent),
    radial-gradient(2px 2px at 55% 40%, #fff, transparent);
  animation: twinkle 2.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .9; } }

/* mouse glare (fine-pointer devices only; JS gates the tilt itself) */
.fx-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 60%); }
.card:hover .fx-glare { opacity: 1; }

/* gentle idle motion on touch devices (no mouse to tilt with) */
.card.touch-idle { animation: idleRock 7s ease-in-out infinite; }
.card.epic.touch-idle { animation: epicPulse 3s ease-in-out infinite, idleRock 7s ease-in-out infinite; }
.card.legendary.touch-idle { animation: legPulse 3s ease-in-out infinite, idleRock 7s ease-in-out infinite; }
@keyframes idleRock { 0%,100% { transform: rotateY(-7deg) rotateX(4deg); } 50% { transform: rotateY(7deg) rotateX(-4deg); } }

/* ---------- pack rip ---------- */
.rip-zone { text-align: center; }
#pack { width: 210px; height: 320px; margin: 10px auto; border-radius: 14px; cursor: pointer;
  background: repeating-linear-gradient(45deg, #1a1a30 0 18px, #232344 18px 36px);
  border: 3px solid #ff2d96; box-shadow: 0 0 26px rgba(255,45,150,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; letter-spacing: 3px; color: #ff2d96; user-select: none; }
#pack .seal { font-size: 44px; }
#pack.shaking { animation: shake .7s; }
@keyframes shake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-7deg) scale(1.04)} 40%{transform:rotate(6deg) scale(1.07)} 60%{transform:rotate(-5deg) scale(1.05)} 80%{transform:rotate(4deg) scale(1.08)} }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50; }
#fan { display: none; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; perspective: 900px; }

/* pull minis — fan rotation lives in --fan (CSS var), flip in .flipped. NEVER inline transform here. */
.mini { width: 132px; height: 200px; cursor: pointer; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3,1.4,.5,1); position: relative;
  transform: rotate(var(--fan, 0deg)); }
.mini .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.mini .back { background: repeating-linear-gradient(45deg, #1a1a30 0 12px, #232344 12px 24px); border: 2px solid #00e5ff;
  display: flex; align-items: center; justify-content: center; }
.mini .back .bb { color: #00e5ff; font-size: 34px; font-weight: bold; letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(0,229,255,.8); border: 2px solid #00e5ff; border-radius: 8px; padding: 4px 10px; }
.mini .front { transform: rotateY(180deg); background: #101022; border: 2px solid #ff2d96; }
.mini .front img { width: 100%; height: 128px; object-fit: cover; display: block; }
.mini .front .mn { text-align: center; font-size: 13px; letter-spacing: 2px; padding: 6px 2px 0; }
.mini .front .mr { text-align: center; font-size: 10px; letter-spacing: 2px; padding: 2px; }
.mini.flipped { transform: rotate(var(--fan, 0deg)) rotateY(180deg); }
.mini.legendary .front { border-color: #ffd700; box-shadow: 0 0 18px rgba(255,180,0,.6); }
.mini.epic .front { border-color: #b06bff; box-shadow: 0 0 14px rgba(176,107,255,.55); }
.mini.legendary .mr { color: #ffd700; } .mini.epic .mr { color: #b06bff; }
.mini.rare .mr { color: #ff2d96; } .mini.uncommon .mr { color: #7ddf8a; } .mini.common .mr { color: #9696aa; }
.mini .empty { transform: rotateY(180deg); background: #101022; border: 2px dashed #55556a;
  display: flex; align-items: center; justify-content: center; color: #55556a; font-size: 11px; text-align: center; padding: 8px; }

#hitBanner { display: none; margin: 18px auto 0; max-width: 640px; padding: 14px 18px; border-radius: 12px;
  font-size: 16px; letter-spacing: 2px; line-height: 1.6; }
#hitBanner.epic { display: block; border: 2px solid #b06bff; color: #d0a6ff; background: rgba(176,107,255,.08);
  box-shadow: 0 0 24px rgba(176,107,255,.4); }
#hitBanner.legendary { display: block; border: 2px solid #ffd700; color: #ffe066; background: rgba(255,215,0,.07);
  box-shadow: 0 0 32px rgba(255,180,0,.5); animation: legPulse 3s ease-in-out infinite; }
#pullList { max-width: 640px; margin: 18px auto 0; text-align: left; font-size: 13px; line-height: 2; color: #b9b9cc; }
#pullList .pc { color: #9696aa; } #pullList .pu { color: #7ddf8a; } #pullList .pr { color: #ff2d96; }
#pullList .pe { color: #b06bff; } #pullList .pl { color: #ffd700; font-weight: bold; }

/* ---------- gallery ---------- */
.toolbar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.toolbar input[type=text] { width: 260px; }
.grid { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.tile { width: 190px; background: #141428; border: 1px solid #2a2a44; border-radius: 12px; overflow: hidden;
  text-decoration: none; color: #f0f0f5; transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.tile .tn { padding: 10px 10px 2px; font-size: 15px; letter-spacing: 2px; font-weight: bold; }
.tile .tr { padding: 0 10px 10px; font-size: 11px; letter-spacing: 2px; }
.tile .tr.common { color: #9696aa; } .tile .tr.uncommon { color: #7ddf8a; } .tile .tr.rare { color: #ff2d96; }
.tile .tr.epic { color: #b06bff; } .tile .tr.legendary { color: #ffd700; }
.tile.legendary { border-color: #ffd700; } .tile.epic { border-color: #b06bff; }

/* ---------- binder ---------- */
.progress { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.progress .pct { font-size: 26px; color: #00e5ff; letter-spacing: 3px; margin-bottom: 8px; }
.progress .track { height: 16px; background: #1e1e34; border-radius: 8px; overflow: hidden; }
.progress .track i { display: block; height: 100%; background: linear-gradient(90deg, #ff2d96, #00e5ff); }
.count-badge { display: inline-block; background: #1e1e34; border: 1px solid #00e5ff; color: #00e5ff;
  border-radius: 20px; font-size: 12px; padding: 2px 10px; margin-top: 6px; letter-spacing: 1px; }
.dupe-flag { display: inline-block; background: rgba(0,229,255,.1); border: 1px dashed #00e5ff; color: #00e5ff;
  border-radius: 8px; font-size: 11px; padding: 3px 8px; margin-top: 6px; letter-spacing: 1px; }
.missing { opacity: .45; filter: grayscale(.6); }
.sec-title { color: #00e5ff; letter-spacing: 3px; font-size: 18px; margin: 40px 0 16px; text-align: center; }
.melt-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
  max-width: 760px; margin: 8px auto; background: #141428; border: 1px solid #2a2a44;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.melt-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.melt-row .iid { color: #55556a; font-size: 11px; }
.melt-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #ff2d96; }

/* ---------- trades ---------- */
.listing { max-width: 760px; margin: 10px auto; background: #141428; border: 1px solid #2a2a44;
  border-radius: 12px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.listing img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.listing .info { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.7; }
.listing .info .ln { font-size: 16px; letter-spacing: 2px; font-weight: bold; }
.listing .info .want { color: #9696aa; }
.listing .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.listing .actions .btn { font-size: 12px; padding: 9px 16px; }
.form-card { max-width: 640px; margin: 30px auto 0; background: #141428; border: 1px solid #2a2a44;
  border-radius: 12px; padding: 20px; }
.form-card h3 { color: #00e5ff; letter-spacing: 3px; margin-bottom: 14px; font-size: 16px; }
.form-card .row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.form-card .row > * { flex: 1; min-width: 160px; }
.form-card label { display: block; font-size: 11px; color: #9696aa; letter-spacing: 2px; margin-bottom: 6px; }

footer { text-align: center; color: #55556a; font-size: 11px; margin-top: 56px; letter-spacing: 2px; }
</style>

/* ---------- key gate: verified agents only ---------- */
#keyGate { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(8, 8, 16, .96); backdrop-filter: blur(6px); padding: 20px; }
.gate-card { width: min(420px, 92vw); text-align: center; background: #101018; border: 2px solid #ff2d96;
  border-radius: 16px; padding: 34px 28px; box-shadow: 0 0 40px rgba(255,45,150,.25); }
.gate-card h1 { color: #ff2d96; letter-spacing: 8px; margin: 0 0 6px; font-size: 34px; }
.gate-sub { color: #00e5ff; letter-spacing: 3px; font-size: 12px; margin: 0 0 22px; }
.gate-card input[type=text] { width: 100%; box-sizing: border-box; background: #0a0a12; border: 1px solid #3a3a55;
  color: #fff; border-radius: 8px; padding: 12px; font-size: 15px; font-family: inherit; margin-bottom: 12px; }
.gate-card input[type=text]:focus { outline: none; border-color: #00e5ff; }
.gate-card .btn { width: 100%; }
.gate-err { color: #ff5d5d; font-size: 13px; min-height: 20px; margin-top: 10px; }
.gate-div { color: #55556a; margin: 18px 0 12px; font-size: 13px; }
.gate-sub2 { color: #9696aa; font-size: 13px; margin: 0 0 10px; }
.gate-row { display: flex; gap: 8px; }
.gate-row input { margin-bottom: 0; }
.gate-row .btn { width: auto; white-space: nowrap; }
.gate-note { color: #7ddf8a; font-size: 13px; min-height: 20px; margin-top: 10px; }