@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto+Condensed:wght@400;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #090a0c;
  --surface: #111318;
  --surface-2: #181b21;
  --surface-3: #20242b;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --text: #f4f2ed;
  --muted: #8a9098;
  --cyan: #59d5e0;
  --acid: #b9e769;
  --gold: #f4c44e;
  --red: #ee5b5b;
  --team-primary: #552583;
  --team-secondary: #fdb927;
  --radius: 6px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Player Media Library */
.player-media-open {
  width: 100%;
  margin-top: 10px;
  min-height: 40px;
  border: 1px solid rgba(88, 220, 216, .38);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(45, 192, 190, .16), rgba(98, 75, 220, .12));
  color: #d8ffff;
  font: 700 11px/1 var(--font-display, monospace);
  letter-spacing: .12em;
  cursor: pointer;
}

.player-media-open:hover { border-color: #54e0dc; background-color: rgba(84, 224, 220, .14); }
.player-media-status { margin: 8px 0 0; color: #87919e; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.player-media-status.is-fallback { color: #e1b96a; }

.player-media-modal { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; padding: 18px; }
.player-media-modal[hidden] { display: none; }
.player-media-backdrop { position: absolute; inset: 0; border: 0; background: rgba(3, 5, 11, .82); backdrop-filter: blur(12px); cursor: default; }
.player-media-dialog { position: relative; width: min(920px, 96vw); max-height: min(820px, 92vh); overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(113, 235, 232, .3); border-radius: 14px; background: linear-gradient(150deg, #11151f, #090b12 68%); box-shadow: 0 32px 90px rgba(0, 0, 0, .7), 0 0 45px rgba(50, 191, 190, .1); color: #f4f7fb; }
.player-media-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.player-media-header span { color: #50d8d4; font: 700 9px/1 var(--font-mono, monospace); letter-spacing: .18em; }
.player-media-header h2 { margin: 6px 0 4px; font: 800 22px/1.1 var(--font-display, sans-serif); letter-spacing: .05em; }
.player-media-header p { margin: 0; color: #9099a8; font: 600 11px/1.4 var(--font-mono, monospace); }
.player-media-close { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.04); color: white; font-size: 22px; cursor: pointer; }
.player-media-tabs { display: flex; gap: 6px; padding: 14px 24px 8px; overflow-x: auto; }
.player-media-tabs button { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 8px 13px; background: rgba(255,255,255,.035); color: #969eaa; font: 700 10px/1 var(--font-display, sans-serif); cursor: pointer; }
.player-media-tabs button.active { border-color: #4fd8d3; background: rgba(79,216,211,.16); color: #e8ffff; }
.player-media-notice { margin: 0 24px 10px; padding: 9px 11px; border-left: 2px solid #d1a54e; background: rgba(209,165,78,.08); color: #b9b3a5; font-size: 10px; line-height: 1.45; }
.player-media-grid { min-height: 240px; overflow-y: auto; padding: 8px 24px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.player-media-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; text-align: center; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; color: #808997; font: 600 11px/1.7 var(--font-mono, monospace); padding: 24px; }
.player-media-card { min-width: 0; overflow: hidden; text-align: left; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 0; background: #10141c; color: white; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.player-media-card:hover, .player-media-card:focus-visible { transform: translateY(-3px); border-color: #50d8d4; outline: none; }
.player-media-card.is-selected { border-color: #50d8d4; box-shadow: 0 0 0 2px rgba(80,216,212,.18); }
.player-media-thumb { position: relative; aspect-ratio: 5 / 7; overflow: hidden; background: #080a0f; }
.player-media-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.player-media-badge { position: absolute; top: 8px; left: 8px; padding: 5px 7px; border-radius: 5px; background: rgba(7,9,14,.84); color: #6ae4df; font: 800 8px/1 var(--font-mono, monospace); letter-spacing: .08em; }
.player-media-badge.fallback { color: #f0c36a; }
.player-media-meta { padding: 11px; }
.player-media-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 11px/1.3 var(--font-display, sans-serif); }
.player-media-meta span { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8c95a3; font: 600 9px/1.35 var(--font-mono, monospace); }
.player-media-footer { display: flex; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid rgba(255,255,255,.08); color: #727b88; font: 700 9px/1.4 var(--font-mono, monospace); }

@media (max-width: 680px) {
  .player-media-modal { padding: 0; align-items: end; }
  .player-media-dialog { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; }
  .player-media-header { padding: 18px 16px 13px; }
  .player-media-tabs { padding-inline: 16px; }
  .player-media-notice { margin-inline: 16px; }
  .player-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 16px 20px; gap: 10px; }
  .player-media-footer { padding-inline: 16px; }
}
.player-media-thumb.thumb-error { background: rgba(255,255,255,.04); display: grid; place-items: center; min-height: 120px; }
.player-media-thumb.thumb-error::after { content: "⚠ 图片不可用"; color: #808997; font: 600 10px/1 var(--font-mono, monospace); }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #0d0f12;
  z-index: 100;
}

.brand-block,
.project-strip,
.tool-group,
.view-label {
  display: flex;
  align-items: center;
}

.brand-block {
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-name {
  font-size: 13px;
  font-weight: 850;
}

.brand-sub {
  margin-top: 2px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
}

.project-strip {
  gap: 7px;
}

.save-state {
  margin-right: 5px;
  color: var(--muted);
  font-size: 11px;
}

.save-state.saved {
  color: var(--acid);
}

.icon-btn,
.tool-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: #bbc0c7;
  font-size: 16px;
}

.icon-btn:hover,
.tool-btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
  color: #fff;
}

.icon-btn.danger:hover {
  border-color: rgba(238, 91, 91, 0.55);
  color: var(--red);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) 400px;
  min-height: 0;
}

.preview-pane {
  position: relative;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr) 92px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0c0e11;
}

.preview-watermark {
  position: absolute;
  right: 16px;
  bottom: 104px;
  z-index: 30;
  color: rgba(255, 255, 255, 0.30);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.shared-card-featured {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(244, 196, 78, 0.45);
  border-radius: 4px;
  color: var(--gold);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  background: rgba(244, 196, 78, 0.08);
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 15, 18, 0.96);
  z-index: 20;
}

.view-label {
  gap: 8px;
  color: #a4aab2;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}

.status-dot {
  width: 7px;
  height: 7px;
  background: var(--acid);
  box-shadow: 0 0 10px rgba(185, 231, 105, 0.55);
}

.tool-group {
  gap: 6px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 78px;
  height: 30px;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
}

.tool-btn > span:first-child {
  font-size: 15px;
}

.tool-btn.active {
  border-color: rgba(89, 213, 224, 0.48);
  background: rgba(89, 213, 224, 0.10);
  color: var(--cyan);
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,0.035) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 49.9%, rgba(255,255,255,0.035) 50%, transparent 50.1%),
    #0c0e11;
}

.stage::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(89, 213, 224, 0.22), transparent);
}

.stage-grid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -80px;
  height: 44%;
  opacity: 0.35;
  transform: perspective(450px) rotateX(58deg);
  transform-origin: center bottom;
  background-image:
    linear-gradient(rgba(89, 213, 224, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 213, 224, 0.11) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}

.card-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: 370px;
  height: 530px;
  perspective: 1400px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 2;
}

.card-scene:active {
  cursor: grabbing;
}

.preview-card-nav {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 48px;
  height: 72px;
  padding: 0 0 5px;
  transform: translateY(-50%);
  border: 1px solid rgba(124, 228, 236, 0.34);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(22, 25, 38, 0.86), rgba(7, 9, 16, 0.76));
  color: rgba(235, 251, 255, 0.92);
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.34), inset 0 0 18px rgba(89, 213, 224, 0.06);
  font: 300 46px/1 system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.preview-card-prev { left: clamp(14px, 4.2vw, 76px); }
.preview-card-next { right: clamp(14px, 4.2vw, 76px); }

.preview-card-nav:hover,
.preview-card-nav:focus-visible {
  border-color: rgba(124, 228, 236, 0.72);
  background: linear-gradient(180deg, rgba(43, 54, 72, 0.92), rgba(12, 16, 26, 0.88));
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.42), 0 0 24px rgba(89, 213, 224, 0.14);
  transform: translateY(-50%) scale(1.05);
  outline: none;
}

.preview-card-nav:active { transform: translateY(-50%) scale(0.96); }
.preview-card-nav:disabled { opacity: 0.3; cursor: default; }

.preview-card-position {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 7;
  min-width: 72px;
  padding: 7px 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(7, 9, 16, 0.62);
  color: rgba(231, 241, 247, 0.72);
  text-align: center;
  font: 700 9px/1 "Orbitron", ui-monospace, monospace;
  letter-spacing: 1.3px;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

@media (max-width: 700px) {
  .preview-card-nav {
    top: 47%;
    width: 40px;
    height: 58px;
    border-radius: 12px;
    font-size: 38px;
  }

  .preview-card-prev { left: 8px; }
  .preview-card-next { right: 8px; }
  .preview-card-position { bottom: 11px; }
}

.slab-shell {
  position: relative;
  width: 344px;
  height: 508px;
  padding: 66px 22px 22px;
  border: 1px solid rgba(225, 245, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(230,248,255,0.10), rgba(255,255,255,0.025) 44%, rgba(89,213,224,0.08)),
    rgba(205, 228, 238, 0.055);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 6px rgba(255, 255, 255, 0.018),
    inset 0 0 28px rgba(180, 230, 255, 0.07);
  transform-style: preserve-3d;
  will-change: transform;
}

.slab-shell::before,
.slab-shell::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 5px;
  pointer-events: none;
}

.slab-shell::after {
  inset: 11px;
  border-color: rgba(89, 213, 224, 0.06);
}

.slab-label {
  position: absolute;
  top: 16px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8, 10, 13, 0.78);
  backface-visibility: hidden;
}

.slab-brand {
  color: #b7c0c8;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
}

.slab-grade {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: 7px;
}

.slab-grade strong {
  font-size: 20px;
}

.slab-shell.slab-none {
  width: 300px;
  height: 420px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

.slab-shell.slab-none::before,
.slab-shell.slab-none::after,
.slab-shell.slab-none .slab-label {
  display: none;
}

.slab-shell.slab-forge {
  border-color: rgba(89, 213, 224, 0.58);
  background: linear-gradient(145deg, rgba(89,213,224,0.12), rgba(255,255,255,0.025), rgba(244,196,78,0.08));
}

.slab-shell.slab-forge .slab-label {
  border-left: 3px solid var(--cyan);
}

.slab-shell.slab-museum {
  border-color: rgba(244, 196, 78, 0.55);
  background: linear-gradient(145deg, rgba(244,196,78,0.10), rgba(255,255,255,0.025), rgba(238,91,91,0.04));
}

.slab-shell.slab-museum .slab-label {
  border-left: 3px solid var(--gold);
}

.slab-shell.slab-acrylic {
  width: 356px;
  height: 520px;
  padding: 72px 28px 28px;
  border: 2px solid rgba(232, 248, 255, 0.52);
  border-radius: 14px;
  background:
    linear-gradient(128deg, rgba(235,250,255,0.21), rgba(255,255,255,0.035) 34%, rgba(125,193,220,0.09) 74%, rgba(244,252,255,0.16)),
    rgba(167, 208, 223, 0.09);
  box-shadow:
    0 34px 76px rgba(0,0,0,0.60),
    12px 14px 0 rgba(83, 120, 134, 0.12),
    inset 0 0 0 5px rgba(255,255,255,0.095),
    inset 0 0 26px rgba(137, 215, 245, 0.18),
    inset -11px -15px 22px rgba(74, 119, 139, 0.16);
}

.slab-shell.slab-acrylic::before,
.slab-shell.slab-acrylic::after {
  border-radius: 10px;
  border-color: rgba(255,255,255,0.26);
}

.slab-shell.slab-acrylic::before {
  inset: 5px;
  background: linear-gradient(145deg, rgba(255,255,255,0.10), transparent 22%, rgba(162,223,245,0.08));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.34), inset -2px -2px 0 rgba(73, 111, 129, 0.24);
  transform: translateZ(4px);
}

.slab-shell.slab-acrylic::after {
  inset: 10px;
  border-color: rgba(128, 186, 209, 0.30);
  box-shadow: 0 0 0 6px rgba(28, 44, 54, 0.09), inset 0 0 16px rgba(255,255,255,0.08);
  transform: translateZ(-5px);
}

.slab-shell.slab-acrylic .slab-label {
  top: 18px;
  left: 28px;
  right: 28px;
  z-index: 90;
  border-color: rgba(238, 250, 255, 0.40);
  background: linear-gradient(110deg, rgba(16, 30, 38, 0.80), rgba(35, 67, 79, 0.60));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 3px 9px rgba(4, 12, 16, 0.24);
}

.slab-shell.slab-acrylic .slab-grade {
  color: #c9f2ff;
}

.slab-shell.slab-crystal {
  width: 326px;
  height: 446px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 4px;
  background: linear-gradient(150deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 50%, rgba(200,225,255,0.10));
  box-shadow:
    0 20px 46px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.28),
    inset 0 0 16px rgba(255,255,255,0.08);
}

.slab-shell.slab-crystal::before {
  inset: 3px;
  border-radius: 2px;
  border-color: rgba(230,246,255,0.30);
}

.slab-shell.slab-crystal::after {
  inset: 6px;
  border-radius: 2px;
  border-color: rgba(100,190,230,0.18);
}

.slab-shell.slab-crystal .slab-label {
  display: none;
}

.slab-shell.slab-crystal .slab-reflection {
  opacity: 0.36;
  mix-blend-mode: screen;
}

.card-scene:hover .slab-shell.slab-crystal .slab-reflection {
  opacity: 0.82;
}

.slab-shell.slab-gallery {
  width: 352px;
  height: 520px;
  padding: 72px 24px 24px;
  border: 2px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.015) 46%, rgba(120,140,170,0.10));
  box-shadow:
    0 34px 82px rgba(0,0,0,0.62),
    inset 0 0 0 8px rgba(255,255,255,0.025),
    inset 0 0 36px rgba(200,215,235,0.10);
}

.slab-shell.slab-gallery .slab-label {
  top: 15px;
  height: 46px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(6,7,10,0.88);
}

.slab-shell.slab-gallery .slab-reflection {
  opacity: 0.30;
}

.card-scene:hover .slab-shell.slab-gallery .slab-reflection {
  opacity: 0.88;
}

.card-3d {
  position: relative;
  width: 300px;
  height: 420px;
  border-radius: 8px;
  transform-style: preserve-3d;
}

.card-face {
  position: absolute;
  inset: 0;
  width: 300px;
  height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #191b20;
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.card-front {
  z-index: 2;
}

.card-back {
  transform: rotateY(180deg);
}

.card-design {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  --c1: var(--team-primary);
  --c2: var(--team-secondary);
}

.base-bg,
.style-pattern,
.photo-layer,
.fullart-shade,
.uniform-pattern,
.base-foil,
.effect-layer {
  position: absolute;
  inset: 0;
}

.base-bg,
.style-pattern,
.photo-layer,
.fullart-shade,
.uniform-pattern {
  pointer-events: none;
}

.photo-layer {
  z-index: 5;
  overflow: hidden;
}

.photo-layer img {
  position: absolute;
  display: block;
  max-width: none;
  transform-origin: center;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.48));
}

.photo-layer.cutout img {
  left: 50%;
  bottom: 62px;
  width: 86%;
  height: 76%;
  object-fit: contain;
  object-position: center bottom;
}

.photo-layer.fullart img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.12);
}

.style-prism.mode-fullart .photo-layer.fullart img {
  filter: saturate(1.24) contrast(1.20) brightness(0.93);
}

.style-tactical.mode-fullart .photo-layer.fullart img {
  filter: saturate(0.66) contrast(1.42) brightness(0.84) sepia(0.10);
}

.style-heritage.mode-fullart .photo-layer.fullart img {
  filter: saturate(0.34) sepia(0.42) contrast(1.05) brightness(1.08);
}

.style-mosaic.mode-fullart .photo-layer.fullart img {
  filter: saturate(1.38) contrast(1.22) brightness(0.92) hue-rotate(-5deg);
}

.style-select.mode-fullart .photo-layer.fullart img {
  filter: saturate(0.92) contrast(1.34) brightness(0.80) sepia(0.14);
}

.style-optic.mode-fullart .photo-layer.fullart img {
  filter: saturate(0.72) contrast(1.18) brightness(1.12);
}

.photo-placeholder {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 126px;
  height: 196px;
  transform: translate(-50%, -50%);
  opacity: 0.44;
}

.photo-placeholder .head {
  position: absolute;
  top: 4px;
  left: 42px;
  width: 42px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.photo-placeholder .body {
  position: absolute;
  left: 17px;
  bottom: 0;
  width: 92px;
  height: 130px;
  border: 2px solid currentColor;
  border-radius: 52% 52% 10% 10%;
  transform: skew(-6deg);
}

.photo-placeholder .ball {
  position: absolute;
  right: -13px;
  bottom: 34px;
  width: 50px;
  height: 50px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.fullart-shade {
  z-index: 6;
  display: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.50), transparent 22%),
    linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.22) 44%, transparent 68%);
}

.mode-fullart .fullart-shade {
  display: block;
}

.uniform-pattern {
  z-index: 7;
  opacity: 0;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.uniform-solid .uniform-pattern {
  opacity: 0;
}

.uniform-stripe .uniform-pattern {
  opacity: 0.24;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,0.88) 9px 10px, transparent 10px 18px),
    linear-gradient(180deg, transparent 0 18%, rgba(255,255,255,0.10) 42%, transparent 72%);
}

.uniform-sash .uniform-pattern {
  opacity: 0.26;
  background:
    linear-gradient(122deg, transparent 0 35%, rgba(255,255,255,0.28) 35% 38%, rgba(255,255,255,0.95) 38% 45%, rgba(255,255,255,0.28) 45% 48%, transparent 48%),
    linear-gradient(122deg, transparent 0 40%, color-mix(in srgb, var(--c2) 72%, transparent) 40% 43%, transparent 43%);
}

.card-topline,
.player-copy,
.card-footline,
.number-seal,
.team-logo,
.serial-badge,
.badge-layer,
.heritage-record,
.style-title {
  position: absolute;
  z-index: 20;
}

.card-topline {
  top: 14px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
}

.series-word {
  text-transform: uppercase;
}

.team-logo {
  top: 13px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.44);
  background: rgba(0,0,0,0.24);
  color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  font-weight: 900;
}

.team-logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.number-seal {
  top: 55px;
  left: 14px;
  font-size: 55px;
  font-weight: 950;
  line-height: 1;
  opacity: 0.2;
}

.player-copy {
  left: 15px;
  right: 15px;
  bottom: 32px;
}

.player-copy .position {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-left: 2px solid currentColor;
  background: rgba(0,0,0,0.30);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 800;
}

.player-copy h2 {
  max-width: 260px;
  margin-top: 5px;
  color: #fff;
  font-size: 27px;
  font-weight: 950;
  line-height: 0.94;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  overflow-wrap: anywhere;
}

.player-copy .team-line {
  margin-top: 7px;
  color: rgba(255,255,255,0.72);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 700;
}

.card-footline {
  left: 15px;
  right: 15px;
  bottom: 11px;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.54);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 6px;
}

.base-foil {
  z-index: 41;
  opacity: 0.13;
  overflow: hidden;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 48%), rgba(255,255,255,0.66), rgba(89,213,224,0.22) 12%, transparent 31%),
    repeating-linear-gradient(128deg, transparent 0 13px, rgba(255,255,255,0.10) 14px, transparent 15px 28px);
  transition: opacity 180ms ease, filter 180ms ease;
}

.base-foil::before {
  content: "";
  position: absolute;
  inset: -35% -80%;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,0.08) 44%, rgba(255,255,255,0.90) 50%, rgba(92,228,242,0.36) 54%, transparent 62%);
  transform: translateX(-42%) rotate(5deg);
}

.card-scene:hover .base-foil {
  opacity: 0.62;
  filter: saturate(1.28) brightness(1.14);
}

.card-scene.motion-active:not(:hover) .base-foil {
  opacity: 0.34;
}

.card-scene.motion-active .base-foil::before,
.card-scene:hover .base-foil::before {
  animation: base-foil-sweep 3.8s ease-in-out infinite alternate;
}

@keyframes base-foil-sweep {
  from { transform: translateX(-42%) rotate(5deg); }
  to { transform: translateX(42%) rotate(5deg); }
}

/* Card series */
.style-prism {
  color: #fff;
}

.style-prism .base-bg {
  background: linear-gradient(145deg, var(--c1), #11131b 48%, var(--c2));
}

.style-prism .style-pattern {
  z-index: 2;
  opacity: 0.86;
  background:
    conic-gradient(from 26deg at 28% 28%, transparent 0 14%, rgba(255,255,255,0.18) 14% 22%, transparent 22% 52%, color-mix(in srgb, var(--c2) 65%, transparent) 52% 63%, transparent 63%),
    conic-gradient(from 184deg at 73% 69%, transparent 0 22%, rgba(89,213,224,0.22) 22% 34%, transparent 34% 70%, rgba(255,255,255,0.10) 70% 82%, transparent 82%);
}

.style-prism::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 30;
  border: 1px solid rgba(255,255,255,0.45);
  pointer-events: none;
}

.style-tactical .base-bg {
  background: linear-gradient(108deg, var(--c1) 0 46%, #15171d 46% 54%, var(--c2) 54% 100%);
}

.style-tactical .style-pattern {
  z-index: 2;
  opacity: 0.48;
  background:
    repeating-linear-gradient(122deg, transparent 0 13px, rgba(255,255,255,0.13) 13px 14px),
    linear-gradient(180deg, rgba(0,0,0,0.22), transparent 34%, rgba(0,0,0,0.38));
}

.style-tactical .number-seal {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border: 3px solid #d7ad45;
  border-radius: 50%;
  background: #15171b;
  color: #f3d277;
  font-size: 22px;
  opacity: 1;
}

.style-tactical .player-copy h2 {
  color: #f7f3e9;
  text-transform: uppercase;
}

.style-tactical::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 31;
  border-top: 7px solid #d7ad45;
  border-bottom: 7px solid #d7ad45;
  pointer-events: none;
}

.style-heritage {
  background: #eee5d2;
  color: #16253b;
}

.style-heritage .base-bg {
  background:
    radial-gradient(circle at 20% 18%, rgba(130,85,45,0.11) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 72%, rgba(130,85,45,0.08) 0 1px, transparent 2px),
    #eee5d2;
  background-size: 14px 17px, 19px 15px, auto;
}

.style-heritage .style-pattern {
  z-index: 3;
  inset: 9px;
  border: 2px solid var(--c1);
  box-shadow: inset 0 0 0 3px #eee5d2, inset 0 0 0 4px color-mix(in srgb, var(--c2) 72%, #7c2e28);
}

.style-heritage .photo-layer.cutout {
  top: 108px;
  bottom: 78px;
  left: 14px;
  right: 14px;
  border: 1px solid rgba(22,37,59,0.32);
  background: color-mix(in srgb, var(--c1) 18%, #d9cfba);
}

.style-heritage .photo-layer.cutout img {
  bottom: 0;
  width: 94%;
  height: 100%;
  filter: saturate(0.58) sepia(0.25) contrast(1.08);
}

.style-heritage .fullart-shade {
  background: linear-gradient(0deg, rgba(238,229,210,0.96), rgba(238,229,210,0.30) 39%, rgba(238,229,210,0.12));
  mix-blend-mode: screen;
}

.style-heritage .card-topline,
.style-heritage .player-copy,
.style-heritage .card-footline,
.style-heritage .number-seal,
.style-heritage .team-logo {
  color: #16253b;
}

.style-heritage .card-topline {
  top: 21px;
  left: 20px;
  right: 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid color-mix(in srgb, var(--c1) 72%, #16253b);
}

.style-heritage .number-seal {
  top: 58px;
  left: 20px;
  color: color-mix(in srgb, var(--c1) 74%, #16253b);
  font-family: Georgia, serif;
  font-size: 32px;
  opacity: 1;
}

.style-heritage .team-logo {
  top: 57px;
  right: 20px;
  border-color: #16253b;
  background: #eee5d2;
  color: #16253b;
}

.style-heritage .badge-rack {
  top: 100px;
  right: 20px;
}

.style-heritage .player-copy {
  left: 20px;
  right: 20px;
  bottom: 29px;
  padding-top: 7px;
  border-top: 1px solid rgba(22,37,59,0.42);
}

.style-heritage .player-copy .position {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a3d32;
}

.style-heritage .player-copy h2 {
  color: #16253b;
  font-family: Georgia, serif;
  font-size: 23px;
  text-shadow: none;
}

.style-heritage .player-copy .team-line,
.style-heritage .card-footline {
  color: rgba(22,37,59,0.70);
}

.style-mosaic .base-bg {
  background: linear-gradient(145deg, #111820, var(--c1) 53%, #0a0b0f);
}

.style-mosaic .style-pattern {
  z-index: 2;
  opacity: 0.7;
  background:
    linear-gradient(45deg, transparent 46%, rgba(255,255,255,0.16) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, color-mix(in srgb, var(--c2) 70%, transparent) 47% 53%, transparent 54%);
  background-size: 38px 38px;
}

.style-mosaic::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 31;
  border: 3px solid var(--c2);
  clip-path: polygon(0 0, 42% 0, 46% 4%, 54% 4%, 58% 0, 100% 0, 100% 100%, 58% 100%, 54% 96%, 46% 96%, 42% 100%, 0 100%);
  pointer-events: none;
}

.style-select .base-bg {
  background: linear-gradient(160deg, #12141a 0 42%, var(--c1) 42% 67%, var(--c2) 67%);
}

.style-select .style-pattern {
  z-index: 3;
  opacity: 0.92;
  background:
    radial-gradient(ellipse at 50% 62%, transparent 0 37%, rgba(244,196,78,0.34) 38% 39%, transparent 40% 46%, rgba(255,255,255,0.13) 47% 48%, transparent 49%),
    linear-gradient(118deg, transparent 0 20%, rgba(244,196,78,0.18) 20% 22%, transparent 22% 78%, rgba(244,196,78,0.18) 78% 80%, transparent 80%);
}

.style-select .series-word {
  color: var(--gold);
}

.style-select::after {
  content: "COURTSIDE";
  position: absolute;
  top: 94px;
  right: -30px;
  z-index: 19;
  transform: rotate(90deg);
  color: rgba(255,255,255,0.38);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
}

.style-optic {
  color: #171a20;
}

.style-optic .base-bg {
  background: linear-gradient(138deg, #f7f7f3, #c9d0d4 43%, #ffffff 58%, color-mix(in srgb, var(--c2) 25%, #e4e9ea));
}

.style-optic .style-pattern {
  z-index: 2;
  opacity: 0.8;
  background:
    radial-gradient(circle at 55% 42%, transparent 0 25%, color-mix(in srgb, var(--c1) 35%, transparent) 26% 27%, transparent 28% 40%, color-mix(in srgb, var(--c2) 45%, transparent) 41% 42%, transparent 43%),
    linear-gradient(125deg, transparent 45%, rgba(255,255,255,0.88) 46% 49%, transparent 50%);
}

.style-optic .card-topline,
.style-optic .number-seal,
.style-optic .player-copy,
.style-optic .team-logo,
.style-optic .card-footline {
  color: #15171b;
}

.style-optic .team-logo {
  border-color: rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.55);
}

.style-optic .player-copy {
  left: 14px;
  right: 14px;
  bottom: 28px;
  min-height: 92px;
  padding: 10px 8px 11px;
  overflow: visible;
  background: transparent;
  border-left: 0;
}

.style-optic .player-copy .position {
  color: #fff;
  background: rgba(5, 8, 15, 0.62);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

.style-optic .player-copy h2,
.style-optic .player-copy .team-line,
.style-optic .card-footline {
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.72);
}

.style-optic .player-copy h2 {
  color: #fff;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  overflow-wrap: normal;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 3px 4px rgba(0, 0, 0, 0.98), 0 0 13px rgba(0, 0, 0, 0.78);
}

.style-optic .player-copy h2.player-name-lg {
  font-size: 20px;
  letter-spacing: -0.04em;
}

.style-optic .player-copy h2.player-name-xl {
  font-size: 17px;
  letter-spacing: -0.06em;
}

/* Rarity variants */
.rarity-silver {
  box-shadow: inset 0 0 32px rgba(210,238,247,0.22);
}

.rarity-silver .base-bg,
.rarity-silver .style-pattern {
  filter: saturate(0.34) brightness(1.17) contrast(1.10);
}

.rarity-silver .base-foil {
  opacity: 0.52;
  background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,0.82) 48%, rgba(160,224,242,0.48) 55%, transparent 76%);
}

.rarity-gold {
  box-shadow: inset 0 0 38px rgba(245,200,79,0.28);
}

.rarity-gold .base-bg,
.rarity-gold .style-pattern {
  filter: sepia(0.48) saturate(1.42) brightness(1.04) contrast(1.08);
}

.rarity-gold .player-copy h2 {
  color: #ffe7a2;
}

.rarity-gold .base-foil {
  opacity: 0.50;
  background: linear-gradient(116deg, transparent 20%, rgba(255,246,185,0.85) 45%, rgba(248,188,52,0.48) 54%, transparent 75%);
}

.rarity-neon {
  box-shadow: inset 0 0 34px rgba(57,255,20,0.24), 0 0 13px rgba(57,255,20,0.24);
}

.rarity-neon .base-bg,
.rarity-neon .style-pattern {
  filter: saturate(1.52) hue-rotate(76deg) brightness(1.04) contrast(1.10);
}

.rarity-neon .player-copy h2,
.rarity-neon .number-seal {
  color: #8dff73;
}

.rarity-neon .base-foil {
  opacity: 0.46;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 48%), rgba(215,255,203,0.92), rgba(57,255,20,0.38) 17%, transparent 42%);
}

.rarity-rwb {
  box-shadow: inset 24px 0 40px rgba(226,45,57,0.18), inset -24px 0 40px rgba(45,105,226,0.20);
}

.rarity-rwb .base-foil {
  opacity: 0.43;
  background: linear-gradient(112deg, transparent 4%, rgba(227,48,57,0.58) 27%, rgba(255,255,255,0.76) 50%, rgba(43,103,221,0.58) 73%, transparent 96%);
}

.rarity-black {
  background: #030405;
  box-shadow: inset 0 0 42px rgba(0,0,0,0.92), inset 0 0 0 1px rgba(228,189,89,0.32);
}

.rarity-black .base-bg,
.rarity-black .style-pattern {
  filter: saturate(0.28) brightness(0.40) contrast(1.48);
}

.rarity-black .player-copy h2,
.rarity-black .number-seal {
  color: #edca70;
}

.rarity-black .base-foil {
  opacity: 0.30;
  background: linear-gradient(118deg, transparent 28%, rgba(231,198,107,0.64) 50%, transparent 72%);
}

.rarity-rwb::before,
.rarity-silver::before,
.rarity-gold::before,
.rarity-neon::before,
.rarity-black::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 43;
  border: 3px solid rgba(255,255,255,0.66);
  pointer-events: none;
}

.rarity-gold::before { border-color: #f5c84f; box-shadow: inset 0 0 22px rgba(245,200,79,0.22); }
.rarity-silver::before { border-color: #d7edf4; box-shadow: inset 0 0 18px rgba(200,235,246,0.20); }
.rarity-neon::before { border-color: #39ff14; box-shadow: 0 0 15px rgba(57,255,20,0.62), inset 0 0 18px rgba(57,255,20,0.20); }
.rarity-black::before { border-color: #e4bd59; box-shadow: inset 0 0 25px rgba(0,0,0,0.88); }
.rarity-rwb::before { border-image: linear-gradient(90deg, #e93838 0 33%, #f7f5eb 33% 66%, #2874df 66%) 1; }

/* Badge layer */
.badge-layer {
  inset: 0;
  pointer-events: none;
}

.badge-rack {
  position: absolute;
  top: 67px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(13,15,18,0.82);
  color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 900;
}

.badge-rc { background: #d83e3e; }
.badge-mvp { background: #d8ab34; color: #15120a; }
.badge-allstar { background: #dfe5e8; color: #13161a; }
.badge-champion { background: #102a20; color: #f4c44e; }

.serial-badge {
  position: absolute;
  top: 58px;
  left: 14px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.58);
  color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 900;
}

.serial-badge-persistent {
  display: block;
  min-width: 72px;
  text-align: center;
  background: rgba(5, 10, 18, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.auto-badge {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 91px;
  height: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.72);
  color: rgba(255,255,255,0.86);
  font-family: "Snell Roundhand", cursive;
  font-size: 20px;
  transform: rotate(-4deg);
}

.patch-badge {
  position: absolute;
  right: 16px;
  bottom: 132px;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border: 4px solid #d7d1c7;
  background: repeating-linear-gradient(45deg, var(--c1) 0 4px, var(--c2) 4px 8px);
  color: #fff;
  font-size: 6px;
  font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

/* Effects */
.effect-layer {
  z-index: 42;
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
}

.effect-back {
  opacity: 0.42;
}

.sparkle-layer .sparkle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--spark-color);
  box-shadow: 0 0 3px var(--spark-color), 0 0 7px rgba(255,255,255,0.5);
  animation: sparkle-flash var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes sparkle-flash {
  0%, 100% { opacity: 0.08; transform: scale(0.35); }
  48% { opacity: 1; transform: scale(1.3); }
  62% { opacity: 0.2; transform: scale(0.7); }
}

.rainbow-layer {
  opacity: 0.32;
  mix-blend-mode: color-dodge;
  background: conic-gradient(from var(--rainbow-angle, 0deg) at var(--mx, 50%) var(--my, 50%), #f00, #ff8a00, #ffef00, #31d843, #00e9ff, #176cff, #8c31ff, #f00);
}

.crystal-layer {
  opacity: 0.48;
  mix-blend-mode: screen;
  background:
    linear-gradient(60deg, transparent 20%, rgba(100,200,255,0.18) 30%, rgba(255,255,255,0.22) 35%, rgba(140,180,255,0.14) 40%, transparent 50%),
    linear-gradient(130deg, transparent 25%, rgba(200,140,255,0.14) 35%, transparent 45%),
    linear-gradient(-20deg, transparent 35%, rgba(120,220,255,0.10) 42%, transparent 50%);
  animation: crystal-layer-shift 4s ease-in-out infinite alternate;
}

.crystal-layer svg {
  width: 100%;
  height: 100%;
}

@keyframes crystal-layer-shift {
  from { background-position: -20% 0, 0 -10%, 10% 0; }
  to { background-position: 120% 0, 100% 110%, 90% 100%; }
}

.holographic-layer {
  opacity: 0.52;
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 3px),
    conic-gradient(from var(--rainbow-angle, 0deg) at var(--mx, 50%) var(--my, 50%),
      rgba(255,0,80,0.6), rgba(255,150,0,0.5), rgba(255,240,0,0.5),
      rgba(0,255,120,0.5), rgba(0,180,255,0.6), rgba(120,0,255,0.5),
      rgba(255,0,120,0.5), rgba(255,0,80,0.6));
}

.holographic-glare {
  opacity: 0.3;
  mix-blend-mode: screen;
  background: linear-gradient(
    calc(var(--rainbow-angle, 0deg) + 45deg),
    transparent 30%,
    rgba(255,255,255,0.7) 48%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.7) 52%,
    transparent 70%
  );
}

.laser-layer {
  opacity: 0.42;
  mix-blend-mode: screen;
}

.laser-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.06) 4px, rgba(255,255,255,0.06) 5px),
    repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 5px),
    repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(255,255,255,0.03) 8px, rgba(255,255,255,0.03) 9px);
}

.laser-spectrum {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--rainbow-angle, 0deg) at var(--mx, 50%) var(--my, 50%),
    rgba(255,0,80,0.45), rgba(255,120,0,0.35), rgba(255,240,0,0.35),
    rgba(0,255,100,0.35), rgba(0,160,255,0.45), rgba(140,0,255,0.35),
    rgba(255,0,120,0.35), rgba(255,0,80,0.45)
  );
  mix-blend-mode: color-dodge;
}

.laser-scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 1px,
    rgba(255,255,255,0.03) 1px, rgba(255,255,255,0.03) 2px
  );
}

.lightning-layer,
.flame-layer,
.galaxy-layer {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.galaxy-layer {
  z-index: 4;
  mix-blend-mode: normal;
}

.galaxy-tint {
  z-index: 3;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(151,73,214,0.70), rgba(15,31,86,0.90) 30%, #080417 74%);
}

/* Card back */
.card-back-design {
  padding: 16px;
  background: #eceff0;
  color: #15181d;
}

.card-back-design.back-tactical {
  background: #17191f;
  color: #f0f1f2;
}

.card-back-design.back-heritage {
  background: #eee5d2;
  color: #16253b;
  font-family: Georgia, serif;
}

.card-back-design.back-mosaic {
  background: linear-gradient(135deg, #e8edf0, #cdd6dc);
}

.card-back-design.back-select {
  background: linear-gradient(155deg, #111319, #27221b);
  color: #f5ead1;
}

.card-back-design.back-optic {
  background: #f7f7f3;
}

.back-shell {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.back-head {
  display: grid;
  grid-template-columns: 50px 1fr 38px;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--c1);
}

.back-card-id {
  display: grid;
  place-items: center;
  height: 24px;
  background: var(--c1);
  color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 900;
}

.back-series {
  text-align: center;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 800;
}

.back-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 900;
}

.back-logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.back-name {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.back-role {
  margin: 5px auto 10px;
  padding: 3px 9px;
  background: var(--c1);
  color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 800;
}

.back-bio {
  min-height: 64px;
  font-size: 8px;
  line-height: 1.5;
  opacity: 0.78;
}

.back-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  opacity: 0.76;
}

.back-profile div {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  padding: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-size: 6px;
}

.back-profile span {
  opacity: 0.56;
}

.back-profile strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-title {
  margin-top: 10px;
  padding: 4px;
  background: var(--c1);
  color: #fff;
  text-align: center;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  font-weight: 900;
}

.back-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid currentColor;
  border-top: 0;
}

.back-stats div {
  padding: 7px 2px;
  border-right: 1px solid currentColor;
  text-align: center;
}

.back-stats div:last-child {
  border: 0;
}

.back-stats strong {
  display: block;
  font-size: 11px;
}

.back-stats span {
  display: block;
  margin-top: 2px;
  font-size: 5px;
  opacity: 0.58;
}

.back-footer {
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid currentColor;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 6px;
  opacity: 0.55;
  text-align: center;
}

.card-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
  background: #0d0f12;
  z-index: 20;
}

.info-primary {
  min-width: 0;
}

.eyebrow {
  overflow: hidden;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-name {
  margin-top: 4px;
  overflow: hidden;
  color: #f4f2ed;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 20px;
  min-width: 360px;
}

.info-meta div {
  min-width: 0;
}

.info-meta span,
.info-meta strong {
  display: block;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-meta span {
  margin-bottom: 4px;
  color: #555b63;
}

.info-meta strong {
  color: #b9bec5;
  font-weight: 700;
}

/* Inspector */
.inspector {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 50px;
  border-bottom: 1px solid var(--line);
}

.tab-btn {
  position: relative;
  border: 0;
  border-right: 1px solid var(--line);
  background: #101217;
  color: #727881;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.tab-btn:last-child {
  border-right: 0;
}

.tab-btn.active {
  background: var(--surface);
  color: #fff;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  background: var(--cyan);
}

.tab-panel {
  display: none;
  height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #343942 transparent;
  scrollbar-width: thin;
}

.tab-panel.active {
  display: block;
}

.panel-section {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #d8dadd;
  font-size: 11px;
  font-weight: 750;
}

.section-head span:last-child {
  color: #626871;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  font-weight: 500;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.choice-btn {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: #7f858d;
  cursor: pointer;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  text-align: left;
}

.choice-btn:hover {
  border-color: var(--line-strong);
}

.choice-btn.active {
  border-color: rgba(89,213,224,0.55);
  background: rgba(89,213,224,0.08);
  color: #fff;
}

.style-swatch {
  width: 22px;
  height: 27px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 2px;
}

.swatch-prism { background: conic-gradient(#552583, #fdb927, #59d5e0, #552583); }
.swatch-tactical { background: linear-gradient(110deg, #552583 0 45%, #15171b 45% 55%, #fdb927 55%); }
.swatch-heritage { background: linear-gradient(#eee5d2, #d5c6aa); }
.swatch-mosaic { background: conic-gradient(from 45deg, #111820 0 25%, #59d5e0 0 50%, #552583 0 75%, #fdb927 0); background-size: 8px 8px; }
.swatch-select { background: linear-gradient(145deg, #101319 0 46%, #552583 46% 68%, #f4c44e 68%); }
.swatch-optic { background: linear-gradient(135deg, #f7f7f3, #59d5e0, #fdb927, #fff); }

.effect-switcher {
  display: flex;
  gap: 7px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-color: #343942 transparent;
  scrollbar-width: thin;
}

.effect-btn {
  flex: 0 0 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: #686e76;
  cursor: pointer;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 6px;
}

.effect-btn.active {
  border-color: rgba(89,213,224,0.52);
  background: rgba(89,213,224,0.08);
  color: #fff;
}

.effect-preview {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 34px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 3px;
  background: #22262c;
}

.effect-none { color: #777; font-size: 16px; }
.effect-preview::before,
.effect-preview::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.effect-none::before,
.effect-none::after {
  display: none;
}

.effect-diamond {
  background: #20242a;
}

.effect-diamond::before {
  inset: -8px;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.7px) 0 0 / 8px 8px,
    radial-gradient(circle, #8ddff2 0 0.8px, transparent 1.5px) 4px 4px / 9px 9px;
  animation: effect-diamond-shimmer 1.9s ease-in-out infinite alternate;
}

.effect-diamond::after {
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 7px 3px rgba(255,255,255,0.88);
  transform: rotate(45deg);
  animation: effect-diamond-star 2.4s ease-in-out infinite;
}

.effect-lightning {
  background: radial-gradient(circle at 50% 54%, #202758, #090d25 62%);
}

.effect-lightning::before {
  inset: -16px 7px;
  background: #d9f8ff;
  clip-path: polygon(58% 0, 33% 41%, 53% 41%, 26% 100%, 73% 48%, 52% 48%, 79% 0);
  filter: drop-shadow(0 0 4px #8b5cf6) drop-shadow(0 0 7px #4f7cff);
  animation: effect-lightning-flash 1.55s steps(2, end) infinite;
}

.effect-rainbow {
  background: #171b25;
}

.effect-rainbow::before {
  inset: -16px;
  background: conic-gradient(#f44, #fd4, #4e7, #4df, #65f, #d4f, #f44);
  opacity: 0.88;
  animation: effect-rainbow-spin 3.3s linear infinite;
}

.effect-rainbow::after {
  inset: 4px;
  border: 1px solid rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.08);
  mix-blend-mode: screen;
}

.effect-crystal {
  background: linear-gradient(145deg, #0a1a2e, #162944 48%, #0e1628);
}

.effect-crystal::before {
  inset: -4px;
  background:
    linear-gradient(60deg, transparent 30%, rgba(100,200,255,0.5) 38%, rgba(255,255,255,0.7) 42%, rgba(140,180,255,0.4) 46%, transparent 54%),
    linear-gradient(130deg, transparent 35%, rgba(200,140,255,0.4) 42%, transparent 50%),
    linear-gradient(-20deg, transparent 45%, rgba(120,220,255,0.3) 50%, transparent 55%);
  animation: effect-crystal-pulse 2.5s ease-in-out infinite alternate;
}

.effect-crystal::after {
  inset: 2px;
  background:
    linear-gradient(72deg, transparent 20%, rgba(255,255,255,0.15) 30%, transparent 40%),
    linear-gradient(144deg, transparent 40%, rgba(180,220,255,0.12) 50%, transparent 60%);
  animation: effect-crystal-refract 3.2s ease-in-out infinite alternate-reverse;
}

.effect-holographic {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  overflow: hidden;
}

.effect-holographic::before {
  inset: -12px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 3px),
    conic-gradient(from 0deg at 50% 50%, #ff0040, #ff8a00, #ffe600, #00ff88, #00c8ff, #8000ff, #ff0080, #ff0040);
  opacity: 0.8;
  animation: effect-holo-shift 3s linear infinite;
}

.effect-holographic::after {
  inset: 4px;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  animation: effect-holo-glare 2s ease-in-out infinite alternate;
}

.effect-laser {
  background: #0a0a14;
  overflow: hidden;
}

.effect-laser::before {
  inset: -6px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,0.08) 3px, rgba(255,255,255,0.08) 4px),
    repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 4px);
  animation: effect-laser-scan 2s linear infinite;
}

.effect-laser::after {
  inset: 0;
  background: conic-gradient(from 45deg at 50% 50%,
    rgba(255,0,100,0.4), rgba(255,150,0,0.3), rgba(0,255,100,0.3),
    rgba(0,150,255,0.4), rgba(150,0,255,0.3), rgba(255,0,100,0.4));
  mix-blend-mode: color-dodge;
  opacity: 0.6;
  animation: effect-laser-rotate 4s linear infinite;
}

.effect-flame {
  background: #21120f;
}

.effect-flame::before,
.effect-flame::after {
  left: -7px;
  right: -7px;
  bottom: -16px;
  height: 55px;
  background:
    radial-gradient(ellipse at 18% 100%, #ffea70 0 10%, #ff650c 24%, transparent 54%),
    radial-gradient(ellipse at 52% 100%, #fff09b 0 9%, #ff3b08 28%, transparent 59%),
    radial-gradient(ellipse at 84% 100%, #ffd45a 0 8%, #ef2100 26%, transparent 55%);
  filter: blur(0.3px);
  animation: effect-flame-rise 1.25s ease-in-out infinite alternate;
}

.effect-flame::after {
  opacity: 0.54;
  transform: translateY(6px) scaleX(0.72);
  animation-delay: -0.62s;
}

.effect-galaxy {
  background: radial-gradient(circle at 40% 42%, #7738a3, #17285d 34%, #070313 72%);
}

.effect-galaxy::before {
  inset: -13px;
  background:
    radial-gradient(circle, #fff 0 0.7px, transparent 1.1px) 0 0 / 8px 10px,
    radial-gradient(circle, #9fdcff 0 0.7px, transparent 1.2px) 4px 5px / 11px 13px,
    conic-gradient(from 90deg at 52% 48%, transparent, rgba(205,102,255,0.40), transparent 34%, rgba(65,107,196,0.34), transparent 68%);
  animation: effect-galaxy-drift 5.6s linear infinite;
}

.effect-galaxy::after {
  inset: 8px 5px;
  border-radius: 50%;
  box-shadow: 0 0 10px 4px rgba(195,95,228,0.34);
  animation: effect-galaxy-core 2.2s ease-in-out infinite alternate;
}

@keyframes effect-diamond-shimmer {
  from { opacity: 0.28; transform: translate(-2px, -2px) scale(0.96); }
  to { opacity: 0.96; transform: translate(2px, 2px) scale(1.04); }
}

@keyframes effect-diamond-star {
  0%, 100% { left: 7px; top: 32px; opacity: 0.15; transform: rotate(45deg) scale(0.45); }
  48% { left: 23px; top: 9px; opacity: 1; transform: rotate(45deg) scale(1.25); }
}

@keyframes effect-lightning-flash {
  0%, 16%, 24%, 100% { opacity: 0.18; transform: translateX(-2px) scaleY(0.94); }
  18%, 22% { opacity: 1; transform: translateX(1px) scaleY(1.05); }
  58% { opacity: 0.66; transform: translateX(0) scaleY(1); }
}

@keyframes effect-rainbow-spin {
  to { transform: rotate(1turn); }
}

@keyframes effect-crystal-pulse {
  from { opacity: 0.5; transform: scale(0.96) rotate(-1deg); }
  to { opacity: 1; transform: scale(1.06) rotate(2deg); }
}

@keyframes effect-crystal-refract {
  from { opacity: 0.3; transform: translateX(-4px); }
  to { opacity: 0.8; transform: translateX(4px); }
}

@keyframes effect-holo-shift {
  to { transform: rotate(360deg); }
}

@keyframes effect-holo-glare {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(8px); }
}

@keyframes effect-laser-scan {
  to { transform: translate(4px, 4px); }
}

@keyframes effect-laser-rotate {
  to { transform: rotate(360deg); }
}

@keyframes effect-flame-rise {
  from { transform: translateY(8px) scaleX(0.92); opacity: 0.72; }
  to { transform: translateY(-7px) scaleX(1.06); opacity: 1; }
}

@keyframes effect-galaxy-drift {
  to { transform: rotate(1turn) scale(1.08); }
}

@keyframes effect-galaxy-core {
  from { opacity: 0.28; transform: scale(0.72); }
  to { opacity: 0.82; transform: scale(1.08); }
}

.rarity-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.rarity-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 31px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: #747a82;
  cursor: pointer;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
}

.rarity-btn.active {
  border-color: rgba(244,196,78,0.54);
  color: #fff;
}

.rarity-chip {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.26);
}

.chip-base { background: #626872; }
.chip-silver { background: linear-gradient(135deg, #8d979c, #fff, #9ec5d1); }
.chip-gold { background: linear-gradient(135deg, #a36f18, #ffd66b, #c18b22); }
.chip-neon { background: #39ff14; box-shadow: 0 0 5px rgba(57,255,20,0.72); }
.chip-rwb { background: linear-gradient(90deg, #df3737 0 33%, #f5f2e9 33% 66%, #3474d4 66%); }
.chip-black { background: #050505; border-color: #e0bb58; }

/* Slab / Case Switcher */
.slab-switcher {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.slab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 31px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: #747a82;
  cursor: pointer;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
}

.slab-btn.active {
  border-color: rgba(89, 213, 224, 0.54);
  color: #fff;
}

.slab-chip {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 2px;
}

.chip-none { background: #626872; }
.chip-magnetic { background: linear-gradient(135deg, #8bbfc9, #e7f7ff, #70c1d4); }
.chip-forge { background: linear-gradient(135deg, #6db8c9, #c4f7ff, #4ea3b8); }
.chip-museum { background: linear-gradient(135deg, #c99a30, #ffe4a0, #d4a73a); }
.chip-acrylic { background: linear-gradient(135deg, #a0d8e6, #eaf9ff, #b8e8f2); }
.chip-crystal { background: linear-gradient(135deg, #c4e4f0, #f4fcff, #d0eaf4); }
.chip-gallery { background: linear-gradient(135deg, #8a9ab4, #dce8f4, #96a8c0); }

.asset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.asset-row.compact {
  margin-top: 10px;
}

.upload-tile,
.asset-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 76px;
  border: 1px dashed var(--line-strong);
  border-radius: 5px;
  background: var(--surface-2);
  color: #858b93;
  font-size: 10px;
}

.upload-tile {
  cursor: pointer;
}

.upload-tile:hover {
  border-color: rgba(89,213,224,0.55);
  color: var(--cyan);
}

.upload-symbol {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  font-size: 15px;
}

.asset-preview {
  overflow: hidden;
  border-style: solid;
}

.asset-preview img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-preview.has-image img {
  display: block;
}

.asset-preview.has-image > span {
  display: none;
}

.asset-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 3px;
  background: rgba(6,7,9,0.82);
  color: #fff;
  cursor: pointer;
}

.asset-preview.has-image .asset-remove {
  display: grid;
}

.logo-preview {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 18px;
  font-weight: 900;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.segmented button {
  height: 31px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #111318;
  color: #6f757d;
  cursor: pointer;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button.active {
  background: var(--surface-3);
  color: var(--cyan);
}

.range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.range-grid label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 5px;
  color: #6f757d;
  font-size: 8px;
}

.range-grid input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--cyan);
}

.range-grid output {
  color: #a9afb6;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.range-grid.effect-intensity-control {
  grid-template-columns: 1fr;
}

.team-preset-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 9px;
  color: #70767e;
  font-size: 8px;
}

.team-preset-field select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: #e8e9eb;
  cursor: pointer;
}

.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.color-grid label {
  display: grid;
  grid-template-columns: auto 34px 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 36px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #777d85;
  font-size: 8px;
}

.color-grid input[type="color"] {
  width: 34px;
  height: 23px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.color-grid output {
  overflow: hidden;
  color: #b4b9bf;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 7px;
  text-overflow: ellipsis;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 9px;
}

.field-row.three {
  grid-template-columns: repeat(3, 1fr);
}

.field,
.field-row label,
.stats-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: #70767e;
  font-size: 8px;
}

.field.full {
  margin-top: 9px;
}

.field:first-of-type.full {
  margin-top: 0;
}

.field input,
.field textarea,
.field-row input,
.field-row select,
.stats-grid input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: #e8e9eb;
}

.field input,
.field-row input,
.field-row select,
.stats-grid input {
  height: 34px;
  padding: 0 9px;
}

.field textarea {
  min-height: 92px;
  padding: 9px;
  resize: vertical;
  line-height: 1.4;
}

.field-row select {
  cursor: pointer;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats-grid input {
  font-family: "SFMono-Regular", Consolas, monospace;
  text-align: center;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.badge-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: #666c74;
  cursor: pointer;
}

.badge-grid button strong {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}

.badge-grid button span {
  font-size: 6px;
}

.badge-grid button.active {
  border-color: rgba(244,196,78,0.55);
  background: rgba(244,196,78,0.08);
  color: var(--gold);
}

.export-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.export-section .section-head {
  margin-bottom: 5px;
}

.export-btn,
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: #b8bdc4;
  cursor: pointer;
  font-size: 10px;
}

.export-btn strong,
.action-row strong {
  color: #6f757d;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
}

.export-btn:hover,
.action-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
}

.export-btn.primary {
  border-color: rgba(89,213,224,0.48);
  background: rgba(89,213,224,0.10);
  color: #fff;
}

.export-progress {
  height: 3px;
  margin-top: 5px;
  overflow: hidden;
  background: #252931;
}

.export-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--acid));
  transition: width 260ms ease;
}

.output-summary dl {
  border-top: 1px solid var(--line);
}

.output-summary dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 34px;
  border-bottom: 1px solid var(--line);
}

.output-summary dt {
  color: #676d75;
  font-size: 8px;
}

.output-summary dd {
  overflow: hidden;
  color: #b9bec5;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 8px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 200;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cyan);
  border-radius: 4px;
  background: rgba(16,18,23,0.96);
  color: #e9eaec;
  font-size: 11px;
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1100px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .preview-pane {
    grid-template-rows: 50px 600px 92px;
    min-height: 742px;
  }

  .inspector {
    min-height: 720px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .tab-panel {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 700px) {
  .app-shell {
    grid-template-rows: 52px auto;
  }

  .topbar {
    padding: 0 10px;
  }

  .brand-sub,
  .save-state,
  .tool-btn span:last-child {
    display: none;
  }

  .workspace {
    min-width: 0;
  }

  .preview-pane {
    grid-template-rows: 46px 492px 116px;
    min-height: 654px;
  }

  .preview-toolbar {
    padding: 0 10px;
  }

  .tool-btn {
    min-width: 34px;
    width: 34px;
    padding: 0;
  }

  .card-scene {
    width: 310px;
    height: 455px;
    transform: scale(0.84);
  }

  .card-info-bar {
    align-items: flex-start;
    padding: 12px;
  }

  .edition-name {
    font-size: 18px;
  }

  .info-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    min-width: 130px;
  }

  .info-meta div {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
  }

  .info-meta span {
    margin: 0;
  }

  .style-grid,
  .rarity-switcher {
    grid-template-columns: repeat(2, 1fr);
  }

  .badge-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .range-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ui-ripple {
    display: none !important;
  }
}

/* Claude Card Builder shell */
:root {
  --bg: #0a0a0f;
  --surface: #111118;
  --surface-2: #191920;
  --surface-3: #23222c;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  --cyan: #9a72e8;
  --acid: #c2a8ff;
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
}

body {
  background: #0a0a0f;
  font-family: "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
}

.app-shell {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #0a0a0f;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  width: 100%;
  height: 100vh;
  min-height: 0;
}

.preview-pane {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #0a0a0f;
}

.preview-toolbar {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 90;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.preview-toolbar .tool-group,
.preview-toolbar .view-label {
  pointer-events: auto;
}

.view-label {
  color: rgba(255,255,255,0.48);
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
}

.status-dot {
  background: #9a72e8;
  box-shadow: 0 0 10px rgba(154,114,232,0.72);
}

.tool-btn {
  min-width: 82px;
  height: 30px;
  border-color: rgba(255,255,255,0.14);
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  color: #a8a5af;
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
}

.tool-btn:hover {
  border-color: rgba(154,114,232,0.55);
  background: rgba(154,114,232,0.16);
}

.tool-btn.active {
  border-color: rgba(154,114,232,0.62);
  background: rgba(100,60,180,0.36);
  color: #fff;
}

.stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: radial-gradient(ellipse at center, #1a192c 0%, #0e0d17 42%, #0a0a0f 72%);
}

.stage::before,
.stage-grid {
  display: none;
}

.card-scene {
  width: 360px;
  height: 520px;
  perspective: 1250px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.slab-shell {
  isolation: isolate;
  transition: filter 220ms ease;
  transform-style: preserve-3d;
}

.card-scene:hover .slab-shell {
  filter: drop-shadow(0 28px 34px rgba(0,0,0,0.50));
}

.slab-shell.slab-none {
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.58), 0 0 70px rgba(100,60,180,0.14);
}

.card-3d,
.card-face,
.card-design {
  border-radius: 12px;
}

.card-3d::before,
.card-3d::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(109,105,121,0.22) 45%, rgba(10,10,14,0.72));
}

.card-3d::before {
  top: 9px;
  right: -4px;
  width: 5px;
  height: calc(100% - 18px);
  transform: translateZ(-3px) rotateY(82deg);
  transform-origin: left center;
}

.card-3d::after {
  left: 9px;
  bottom: -4px;
  width: calc(100% - 18px);
  height: 5px;
  transform: translateZ(-3px) rotateX(82deg);
  transform-origin: center top;
}

.slab-reflection {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.24;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  transition: opacity 180ms ease;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(255,255,255,0.34) 0%, rgba(176,145,255,0.12) 18%, transparent 44%),
    linear-gradient(
      var(--glint-angle, 112deg),
      transparent calc(var(--glint-position, 50%) - 20%),
      rgba(255,255,255,0.06) calc(var(--glint-position, 50%) - 12%),
      rgba(235,242,255,0.42) var(--glint-position, 50%),
      rgba(255,255,255,0.06) calc(var(--glint-position, 50%) + 10%),
      transparent calc(var(--glint-position, 50%) + 18%)
    ),
    linear-gradient(calc(var(--glint-angle, 112deg) + 48deg), transparent 38%, rgba(190,225,255,0.12) 49%, transparent 60%);
}

.slab-reflection::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.45;
  box-shadow:
    inset 1px 1px 0 rgba(255,80,80,0.18),
    inset -1px 0 0 rgba(80,200,255,0.18),
    inset 0 -1px 0 rgba(120,255,80,0.15),
    inset 2px 2px 3px rgba(200,160,255,0.08);
}

.slab-reflection::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(
    var(--glint-angle, 112deg),
    transparent calc(var(--glint-position, 50%) - 0.5%),
    rgba(255,255,255,0.92) var(--glint-position, 50%),
    transparent calc(var(--glint-position, 50%) + 0.5%)
  );
  animation: slab-flash 8s ease-in-out infinite;
}

@keyframes slab-flash {
  0%, 90%, 100% { opacity: 0; }
  93% { opacity: 0.45; }
  95% { opacity: 0; }
}

.card-scene:hover .slab-reflection {
  opacity: 0.72;
}

.card-scene.motion-active:not(:hover) .slab-reflection {
  opacity: 0.40;
}

.slab-none .slab-reflection {
  display: none;
  border-radius: 12px;
}

.acrylic-lens {
  display: none;
}

.slab-shell.slab-acrylic .acrylic-lens {
  position: absolute;
  inset: 6px;
  z-index: 82;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0.68;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at var(--mx, 50%) var(--my, 45%), rgba(255,255,255,0.36), rgba(202,239,255,0.10) 18%, transparent 44%),
    linear-gradient(var(--glint-angle, 112deg), transparent 18%, rgba(255,255,255,0.03) 36%, rgba(238,251,255,0.26) 48%, rgba(168,221,241,0.07) 53%, transparent 66%),
    linear-gradient(28deg, transparent 34%, rgba(255,255,255,0.10) 46%, transparent 52%),
    linear-gradient(165deg, rgba(232,244,250,0.04), transparent 40%, rgba(200,230,245,0.03) 80%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.04),
    inset 2px 2px 4px rgba(255,255,255,0.08),
    inset -3px -4px 8px rgba(63,104,120,0.12),
    inset 0 0 20px rgba(180,220,240,0.04);
  transition: opacity 180ms ease, filter 180ms ease;
}

.slab-shell.slab-acrylic .acrylic-lens::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background:
    repeating-linear-gradient(102deg, transparent 0 32px, rgba(255,255,255,0.12) 32.4px 33px, transparent 33.4px 82px),
    repeating-linear-gradient(7deg, transparent 0 70px, rgba(59,96,111,0.10) 70.4px 71px, transparent 71.6px 120px),
    repeating-linear-gradient(168deg, transparent 0 55px, rgba(180,210,230,0.06) 55.5px 56px, transparent 56.5px 95px);
  mask-image: radial-gradient(ellipse at 50% 46%, #000 22%, transparent 72%);
}

.slab-shell.slab-acrylic .acrylic-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 2px 2px 2px rgba(255,255,255,0.22),
    inset -3px -4px 5px rgba(45,79,94,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

.slab-shell.slab-acrylic .slab-reflection {
  z-index: 80;
  opacity: 0.32;
  mix-blend-mode: screen;
}

.card-scene:hover .slab-shell.slab-acrylic .acrylic-lens,
.card-scene.motion-active:not(:hover) .slab-shell.slab-acrylic .acrylic-lens {
  opacity: 0.92;
  filter: brightness(1.08);
}

.card-face {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.20), 0 0 35px rgba(0,0,0,0.38);
}

.card-topline,
.player-copy .position,
.team-line,
.card-footline,
.series-word {
  font-family: "Orbitron", ui-sans-serif, sans-serif;
}

.player-copy h2 {
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 0;
}

.card-info-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  align-items: flex-end;
  min-height: 130px;
  padding: 58px 30px 22px;
  border: 0;
  background: linear-gradient(transparent, rgba(5,5,9,0.92));
  pointer-events: none;
}

.eyebrow,
.info-meta span,
.info-meta strong {
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
}

.edition-name {
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  font-size: 27px;
  letter-spacing: 2px;
}

.inspector {
  width: 380px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,0.07);
  background: #111118;
  scrollbar-color: #3d3352 transparent;
  scrollbar-width: thin;
}

.panel-header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(17,17,24,0.96);
  backdrop-filter: blur(14px);
}

.panel-title {
  color: #fff;
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
}

.panel-subtitle {
  margin-top: 5px;
  color: #666270;
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  font-size: 6px;
  letter-spacing: 1px;
}

.panel-header .project-strip {
  gap: 4px;
}

.panel-header .save-state {
  position: absolute;
  right: 20px;
  bottom: 5px;
  margin: 0;
  font-size: 8px;
}

.panel-header .icon-btn {
  width: 29px;
  height: 29px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
}

.player-quick-bar {
  position: sticky;
  top: 78px;
  z-index: 115;
  padding: 13px 20px 12px;
  border-bottom: 1px solid rgba(89, 213, 224, 0.22);
  background:
    linear-gradient(135deg, rgba(89, 213, 224, 0.10), rgba(154, 114, 232, 0.08)),
    rgba(14, 14, 21, 0.97);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.player-quick-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-family: "Orbitron", ui-sans-serif, sans-serif;
}

.player-quick-heading span {
  color: var(--cyan);
  font-size: 7px;
  letter-spacing: 1.3px;
}

.player-quick-heading strong {
  color: #f3f4f8;
  font-size: 10px;
  letter-spacing: .5px;
}

.player-quick-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

.player-quick-input-wrap {
  min-width: 0;
}

.player-quick-input-wrap input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(4, 6, 11, 0.72);
  color: #fff;
  font: 700 10px/1 "Roboto Condensed", ui-sans-serif, sans-serif;
  letter-spacing: .35px;
}

.player-quick-input-wrap input::placeholder {
  color: #6f7480;
}

.player-quick-btn {
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid rgba(89, 213, 224, 0.28);
  border-radius: 6px;
  background: rgba(89, 213, 224, 0.08);
  color: #bceef2;
  font: 800 8px/1 "Orbitron", ui-sans-serif, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.player-quick-btn:hover {
  border-color: rgba(89, 213, 224, 0.68);
  background: rgba(89, 213, 224, 0.16);
}

.player-quick-btn:active {
  transform: translateY(1px);
}

.player-quick-btn.primary {
  border-color: rgba(244, 196, 78, 0.48);
  background: rgba(244, 196, 78, 0.13);
  color: #ffe29a;
}

.player-quick-status {
  margin-top: 7px;
  color: #777d88;
  font: 600 8px/1.35 "SFMono-Regular", Consolas, monospace;
}

.player-quick-status.is-error {
  color: #ff8d8d;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.player-quick-bar {
  position: relative;
  top: auto;
}

.inspector-tabs {
  position: sticky;
  top: 78px;
  z-index: 114;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 54px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(89,213,224,0.18);
  background: rgba(13,13,19,0.96);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
  backdrop-filter: blur(14px);
}

.tab-panel,
.tab-panel[hidden] {
  display: none !important;
  width: 100%;
  height: auto;
  overflow: visible;
  scroll-margin-top: 132px;
}

.tab-panel.active:not([hidden]) {
  display: block !important;
}

.tab-panel + .tab-panel {
  border-top: 0;
}

.tab-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0 10px;
  border-color: rgba(255,255,255,0.07);
  background: rgba(11,11,17,0.82);
  color: #777481;
  font-family: "Orbitron", ui-sans-serif, sans-serif;
}

.tab-btn span {
  color: #514d5a;
  font: 700 7px/1 "SFMono-Regular", Consolas, monospace;
}

.tab-btn strong {
  overflow: hidden;
  font-size: 8px;
  letter-spacing: .4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-btn.active {
  background: linear-gradient(180deg, rgba(89,213,224,0.09), rgba(17,17,24,0.96));
  color: #f4f7fa;
}

.tab-btn.active span {
  color: var(--cyan);
}

.panel-section {
  padding: 17px 20px;
  border-bottom-color: rgba(255,255,255,0.07);
}

.section-head {
  margin-bottom: 11px;
  color: #8c8795;
  font-family: "Orbitron", ui-sans-serif, sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-head span:last-child {
  color: #5f5a68;
  font-size: 7px;
  letter-spacing: 0;
}

.usage-notice {
  margin: 14px 20px 24px;
  padding: 13px 14px;
  border: 1px solid rgba(244,196,78,0.22);
  border-radius: 7px;
  background: rgba(244,196,78,0.055);
  color: #8d8993;
}

.usage-notice strong {
  display: block;
  margin-bottom: 6px;
  color: #dac784;
  font: 800 8px/1.2 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: .7px;
}

.usage-notice p {
  font-size: 9px;
  line-height: 1.55;
}

.choice-btn,
.effect-btn,
.rarity-btn,
.segmented button,
.badge-grid button,
.export-btn,
.action-row {
  font-family: "Orbitron", ui-sans-serif, sans-serif;
}

.choice-btn,
.effect-btn,
.rarity-btn,
.badge-grid button {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
}

.choice-btn:hover,
.effect-btn:hover,
.rarity-btn:hover,
.badge-grid button:hover {
  border-color: rgba(154,114,232,0.42);
  background: rgba(154,114,232,0.10);
}

.choice-btn.active,
.effect-btn.active,
.rarity-btn.active,
.badge-grid button.active {
  border-color: rgba(154,114,232,0.62);
  background: rgba(100,60,180,0.30);
  color: #fff;
  box-shadow: inset 0 0 18px rgba(154,114,232,0.08);
}

.upload-tile,
.asset-preview {
  min-height: 86px;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.025);
}

.upload-tile:hover {
  border-color: rgba(154,114,232,0.58);
  color: #c2a8ff;
}

.segmented button.active {
  background: rgba(100,60,180,0.30);
  color: #d5c4ff;
}

.field input,
.field textarea,
.field-row input,
.field-row select,
.stats-grid input,
.team-preset-field select {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.field input:focus,
.field textarea:focus,
.field-row input:focus,
.field-row select:focus,
.stats-grid input:focus,
.team-preset-field select:focus {
  border-color: rgba(154,114,232,0.62);
}

.range-grid input {
  accent-color: #9a72e8;
}

.export-btn.primary {
  border-color: rgba(154,114,232,0.72);
  background: rgba(100,60,180,0.34);
}

.export-progress span {
  background: linear-gradient(90deg, #7650c4, #c2a8ff);
}

.toast {
  border-left-color: #9a72e8;
  background: rgba(17,17,24,0.97);
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app-shell,
  .workspace {
    width: 100%;
    height: auto;
    min-height: 100vh;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .preview-pane {
    width: 100%;
    height: 680px;
    min-height: 680px;
  }

  .inspector {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-left: 0;
  }

  .panel-header {
    position: sticky;
  }
}

@media (max-width: 560px) {
  .preview-pane {
    height: 620px;
    min-height: 620px;
  }

  .preview-toolbar {
    top: 12px;
    left: 12px;
    right: 12px;
  }

  .view-label {
    display: none;
  }

  .tool-btn {
    padding: 0;
  }

  .tool-btn span:last-child {
    display: none;
  }

  .card-scene {
    width: 320px;
    height: 470px;
    transform: scale(0.88);
  }

  .card-info-bar {
    min-height: 118px;
    padding: 48px 14px 14px;
  }

  .edition-name {
    font-size: 18px;
    letter-spacing: 1px;
  }

  .info-meta {
    min-width: 128px;
  }

  .panel-header {
    padding: 14px 16px;
  }

  .player-quick-bar {
    position: relative;
    top: auto;
    padding: 12px 16px;
  }

  .inspector-tabs {
    top: 74px;
  }

  .player-quick-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .player-quick-input-wrap {
    grid-column: 1 / -1;
  }

  .player-quick-btn {
    min-height: 40px;
  }

  .panel-section {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* V7 automatic card library */
.library-quick-section {
  border-color: rgba(255,255,255,.12) !important;
}

.save-trigger {
  border-color: rgba(255,196,89,.5) !important;
  background: linear-gradient(135deg, rgba(255,150,60,.20), rgba(255,210,110,.10)) !important;
}

.save-trigger:hover {
  border-color: rgba(255,196,89,.8) !important;
  background: linear-gradient(135deg, rgba(255,150,60,.32), rgba(255,210,110,.18)) !important;
}

.save-trigger strong {
  color: #ffcf6b !important;
}

.auto-build-trigger {
  border-color: rgba(200,160,255,.28) !important;
  background: linear-gradient(135deg, rgba(100,60,180,.14), rgba(64,190,198,.08)) !important;
}

.auto-build-trigger:hover {
  border-color: rgba(200,160,255,.52) !important;
  background: linear-gradient(135deg, rgba(100,60,180,.24), rgba(64,190,198,.14)) !important;
}

.auto-build-trigger:disabled {
  cursor: progress;
  opacity: .62;
}

.auto-build-progress {
  margin: 8px 0 2px;
  padding: 11px 12px;
  border: 1px solid rgba(200,160,255,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
}

.auto-build-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  color: rgba(227,233,242,.55);
  font: 700 7px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: .5px;
}

.auto-build-progress-head strong {
  color: #c8a0ff;
  font-size: 8px;
}

.auto-build-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
}

.auto-build-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c4dff, #c8a0ff 58%, #55c6c8);
  box-shadow: 0 0 12px rgba(158,112,255,.28);
  transition: width 220ms ease;
}

.auto-build-status {
  min-height: 18px;
  margin-top: 8px;
  overflow: hidden;
  color: #8f96a5;
  font: 700 8px/1.25 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .auto-build-status {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   V6 collection systems
   ============================================================ */

.library-toggle-btn {
  color: #a7dce8;
}

.library-save-btn {
  color: #ff7b98;
}

.library-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 900;
  width: min(430px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(157, 210, 224, 0.2);
  background: rgba(12, 13, 19, 0.975);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.48);
  transform: translateX(102%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  backdrop-filter: blur(20px);
}

.library-drawer.open {
  transform: translateX(0);
}

.library-overlay {
  position: fixed;
  inset: 0;
  z-index: 899;
  background: rgba(2, 3, 7, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.library-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.library-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.library-title-row {
  min-width: 0;
}

.library-title {
  margin: 0;
  color: #f1f5f6;
  font: 900 13px/1.1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 2px;
}

.library-count {
  display: block;
  margin-top: 6px;
  color: #738087;
  font: 700 8px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
}

.library-actions {
  display: flex;
  gap: 6px;
}

.library-action-btn,
.library-close-btn,
.library-filter-btn,
.compare-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: #9da6aa;
  font-size: 15px;
  cursor: pointer;
}

.library-action-btn:hover,
.library-close-btn:hover,
.compare-close-btn:hover {
  border-color: rgba(142, 214, 230, 0.45);
  background: rgba(93, 174, 194, 0.12);
  color: #f8fbfc;
}

.library-filters {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 30px;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.library-filters label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #646d72;
  font: 700 6px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 0.6px;
}

.library-filter {
  width: 100%;
  height: 29px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  outline: 0;
  background: #171920;
  color: #b6bdc0;
  font: 700 7px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.library-filter:focus {
  border-color: rgba(142, 214, 230, 0.55);
}

.library-filter-btn {
  align-self: end;
  width: 30px;
  height: 29px;
  color: #62696d;
}

.library-filter-btn.active {
  border-color: rgba(239, 199, 91, 0.55);
  background: rgba(239, 199, 91, 0.1);
  color: #efc75b;
}

.library-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  scrollbar-color: #34444a transparent;
  scrollbar-width: thin;
}

.library-card {
  position: relative;
  aspect-ratio: 5 / 7;
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: #191b21;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.library-card:hover {
  z-index: 2;
  border-color: rgba(142, 214, 230, 0.55);
  box-shadow: 0 8px 22px rgba(30, 119, 140, 0.18);
  transform: translateY(-3px);
}

.library-card-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: inherit;
  touch-action: manipulation;
}

.library-card-open:focus-visible {
  outline: 2px solid #8ed6e6;
  outline-offset: -3px;
}

.library-card img,
.library-card-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.library-card-placeholder {
  display: grid;
  place-items: center;
  background: #20232a;
  color: #6f777c;
  font: 900 19px/1 "Orbitron", ui-sans-serif, sans-serif;
}

.library-card-info {
  position: absolute;
  inset: auto 0 0;
  padding: 24px 7px 7px;
  background: linear-gradient(transparent, rgba(4, 5, 8, 0.94));
  pointer-events: none;
}

.library-card-name {
  overflow: hidden;
  color: #f5f7f8;
  font: 800 7px/1.2 "Orbitron", ui-sans-serif, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card-meta {
  margin-top: 3px;
  overflow: hidden;
  color: #8b9498;
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card-fav {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(3, 4, 7, 0.72);
  color: #5d6265;
  font-size: 11px;
  cursor: pointer;
}

.library-card-fav.is-fav {
  border-color: rgba(239, 199, 91, 0.4);
  color: #efc75b;
}

.library-card-actions {
  position: absolute;
  z-index: 3;
  top: 4px;
  left: 4px;
  opacity: 0;
  transition: opacity 140ms ease;
}

.library-card:hover .library-card-actions,
.library-card:focus-within .library-card-actions {
  opacity: 1;
}

.library-card-action {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(3, 4, 7, 0.74);
  color: #a4aaad;
  cursor: pointer;
}

.library-card-action:hover {
  border-color: rgba(255, 100, 115, 0.48);
  color: #ff7e8c;
}

.library-card[data-rarity="gold"] { border-color: rgba(225, 186, 80, 0.46); }
.library-card[data-rarity="neon"] { border-color: rgba(72, 223, 145, 0.38); }
.library-card[data-rarity="black"] { border-color: rgba(210, 220, 225, 0.25); background: #08090b; }
.library-card[data-rarity="rwb"] { border-color: rgba(214, 90, 104, 0.4); }

.library-card.select-mode {
  cursor: crosshair;
}

.library-card.selected-for-compare {
  border-color: #58dca8;
  box-shadow: 0 0 0 2px rgba(88, 220, 168, 0.16), 0 0 22px rgba(88, 220, 168, 0.22);
}

.library-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 260px;
  padding: 24px;
  color: #697277;
  text-align: center;
  font: 700 9px/1.6 "Orbitron", ui-sans-serif, sans-serif;
}

.library-empty strong {
  color: #3f5c64;
  font-size: 32px;
}

.library-achievements {
  flex: 0 0 auto;
  max-height: 174px;
  padding: 13px 15px 15px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 8, 12, 0.42);
}

.achievements-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #747d81;
  font: 800 8px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
}

.achievements-progress {
  color: #8ed6e6;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.achievement-badge {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
}

.achievement-badge span {
  color: #aeb5b8;
  font: 900 6px/1 "Orbitron", ui-sans-serif, sans-serif;
}

.achievement-badge.locked {
  opacity: 0.24;
  filter: grayscale(1);
}

.achievement-badge.unlocked {
  border-color: rgba(92, 199, 221, 0.45);
  background: rgba(92, 199, 221, 0.09);
  box-shadow: inset 0 0 10px rgba(92, 199, 221, 0.08);
}

.stage-mosaic-bg {
  position: absolute;
  inset: -42px;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 7px;
  padding: 7px;
  overflow: hidden;
  opacity: 0.43;
  filter: blur(13px) brightness(0.32) saturate(0.7);
  pointer-events: none;
  transform: scale(1.04);
}

.stage-mosaic-bg img,
.stage-mosaic-tile {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 3px;
  object-fit: cover;
}

.stage-mosaic-tile {
  background: linear-gradient(145deg, var(--tile-a), var(--tile-b));
}

.stage-grid,
.card-scene {
  z-index: 2;
}

.pack-opening[hidden],
.card-compare[hidden] {
  display: none;
}

.pack-opening,
.card-compare {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 9, 18, 0.93);
  backdrop-filter: blur(14px);
}

.pack-opening {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
}

.pack-wrapper {
  position: relative;
  z-index: 2;
  width: min(1060px, 100%);
  min-width: 0;
  min-height: min(680px, calc(100dvh - 48px));
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.pack-envelope {
  position: relative;
  width: 260px;
  height: 370px;
  margin: 0 auto 28px;
  border-radius: 12px;
  outline: 0;
  cursor: grab;
  perspective: 700px;
}

.pack-envelope:focus-visible {
  box-shadow: 0 0 0 2px #8ed6e6;
}

.pack-series {
  color: #8ed6e6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
}

.pack-close-btn {
  min-width: 118px;
  height: 38px;
  margin-top: 12px;
  border: 1px solid rgba(142, 214, 230, 0.42);
  border-radius: 6px;
  background: rgba(74, 156, 176, 0.1);
  color: #a9e1ed;
  font: 800 9px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 2px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 180ms ease;
}

.pack-close-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.pack-rarity-flash {
  position: fixed;
  inset: 0;
  z-index: 1010;
  pointer-events: none;
  animation: pack-flash 600ms ease-out forwards;
}

.pack-rarity-flash.flash-gold { background: rgba(214, 184, 90, 0.26); }
.pack-rarity-flash.flash-neon { background: rgba(57, 255, 150, 0.18); }
.pack-rarity-flash.flash-black { background: rgba(220, 226, 235, 0.15); }

.card-compare {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.compare-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-header span {
  color: #657176;
  font: 700 7px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
}

.compare-header h2 {
  margin: 6px 0 0;
  color: #f3f6f7;
  font: 900 15px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 2px;
}

.compare-stage {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(250px, 340px) 64px minmax(250px, 340px);
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 26px;
}

.compare-slot {
  display: grid;
  justify-items: center;
  gap: 16px;
  min-width: 0;
}

.compare-card-frame {
  width: min(250px, 100%);
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #171920;
}

.compare-card-frame img,
.compare-card-frame .library-card-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-vs {
  color: rgba(142, 214, 230, 0.56);
  font: 900 30px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 2px;
  text-align: center;
}

.compare-stats {
  width: 100%;
}

.compare-player {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  text-align: center;
}

.compare-player strong {
  overflow: hidden;
  color: #f3f6f7;
  font: 900 11px/1.2 "Orbitron", ui-sans-serif, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-player span {
  color: #6c767a;
  font-size: 8px;
}

.compare-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 29px;
  margin-bottom: 4px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  font-family: "Orbitron", ui-sans-serif, sans-serif;
}

.compare-stat-label {
  color: #778085;
  font-size: 8px;
}

.compare-stat-value {
  color: #c8ced1;
  font-size: 9px;
  font-weight: 800;
}

.compare-stat-row.winner {
  border-color: rgba(88, 220, 168, 0.22);
  background: rgba(88, 220, 168, 0.07);
}

.compare-stat-row.winner .compare-stat-value {
  color: #58dca8;
}

.compare-stat-row.loser {
  opacity: 0.48;
}

.compare-result {
  flex: 0 0 auto;
  min-height: 56px;
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #8f999d;
  font: 800 10px/1.4 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
  text-align: center;
}

.compare-result strong {
  color: #58dca8;
}

@keyframes pack-hint-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.78; }
}

@keyframes pack-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 820px) {
  .compare-stage {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 10px;
    padding: 18px 10px;
  }

  .compare-card-frame {
    width: min(210px, 100%);
  }

  .compare-vs {
    font-size: 19px;
  }

  .pack-card-slot {
    flex-basis: 140px;
    width: 140px;
    min-width: 140px;
    height: 196px;
    min-height: 196px;
  }

  .pack-cards {
    min-height: 230px;
  }
}

@media (max-width: 560px) {
  .library-header {
    min-height: 66px;
    padding: 12px 14px;
  }

  .library-filters {
    padding: 9px 10px;
  }

  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
  }

  .achievements-grid {
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
  }

  .pack-opening {
    align-items: start;
    padding: 14px;
  }

  .pack-wrapper {
    min-height: calc(100dvh - 28px);
  }

  .pack-envelope {
    width: 220px;
    height: 314px;
  }

  .pack-cards {
    justify-content: start;
    min-height: 199px;
  }

  .pack-card-slot {
    flex-basis: 118px;
    width: 118px;
    min-width: 118px;
    height: 165px;
    min-height: 165px;
  }

  .compare-header {
    min-height: 64px;
    padding: 12px 14px;
  }

  .compare-stage {
    align-items: start;
    padding: 14px 7px;
  }

  .compare-card-frame {
    width: min(145px, 100%);
  }

  .compare-slot {
    gap: 9px;
  }

  .compare-player strong {
    font-size: 8px;
  }

  .compare-player span,
  .compare-stat-label,
  .compare-stat-value {
    font-size: 6px;
  }

  .compare-stat-row {
    min-height: 24px;
    padding: 4px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-drawer,
  .library-overlay,
  .pack-card-inner,
  .pack-envelope {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* V2 optical response, physical card body, and drawing tools */
:root {
  --card-thickness: 6px;
}

.card-3d::before,
.card-3d::after {
  display: none;
}

.card-front {
  transform: translateZ(calc(var(--card-thickness) / 2));
  opacity: var(--face-opacity, 1);
  transition: opacity 120ms ease-out;
}

.card-back {
  transform: rotateY(180deg) translateZ(calc(var(--card-thickness) / 2));
  opacity: var(--face-opacity, 1);
  transition: opacity 120ms ease-out;
}

.card-edge {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, #f5f5f7 0%, #d8d9de 43%, #aeb0b8 54%, #eceef2 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.30), 0 0 3px rgba(255,255,255,0.18);
  transition: opacity 180ms ease;
  backface-visibility: visible;
}

.card-edge-top,
.card-edge-bottom {
  left: 0;
  width: 100%;
  height: var(--card-thickness);
  transform-origin: 50% 50%;
}

.card-edge-top {
  top: calc(var(--card-thickness) / -2);
  transform: rotateX(90deg);
}

.card-edge-bottom {
  bottom: calc(var(--card-thickness) / -2);
  transform: rotateX(-90deg);
}

.card-edge-left,
.card-edge-right {
  top: 0;
  width: var(--card-thickness);
  height: 100%;
  transform-origin: 50% 50%;
}

.card-edge-left {
  left: calc(var(--card-thickness) / -2);
  transform: rotateY(-90deg);
}

.card-edge-right {
  right: calc(var(--card-thickness) / -2);
  transform: rotateY(90deg);
}

.card-3d.no-thickness {
  --card-thickness: 0px;
}

.card-3d.no-thickness .card-edge {
  opacity: 0;
}

.card-3d[data-rarity="gold"] .card-edge {
  background-image: linear-gradient(180deg, #fff0b5, #d6b85a 43%, #8c6c19 56%, #f6dc8b);
}

.card-3d[data-rarity="black"] .card-edge {
  background-image: linear-gradient(180deg, #4a4538, #181713 44%, #030303 57%, #b29243);
}

.card-3d[data-rarity="neon"] .card-edge {
  box-shadow: inset 0 0 2px rgba(57,255,20,0.62), 0 0 7px rgba(57,255,20,0.42);
}

.base-foil {
  --foil-accent: rgba(178, 150, 255, 0.18);
  z-index: 48;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(1.06);
  transform-origin: center;
  will-change: transform, opacity, background-position;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.40) 0%, var(--foil-accent) 20%, transparent 56%),
    linear-gradient(var(--glint-angle, 180deg), transparent 0%, transparent calc(var(--glint-position, 50%) - 7%), rgba(255,255,255,0.62) var(--glint-position, 50%), transparent calc(var(--glint-position, 50%) + 7%), transparent 100%),
    repeating-linear-gradient(calc(var(--glint-angle, 180deg) - 90deg), hsla(0,100%,65%,0.055) 0%, hsla(60,100%,65%,0.05) 8%, hsla(120,100%,65%,0.05) 16%, hsla(180,100%,65%,0.055) 24%, hsla(240,100%,65%,0.05) 32%, hsla(300,100%,65%,0.05) 40%, transparent 48%);
  transition: opacity 220ms ease, filter 180ms ease;
}

.rarity-silver .base-foil { --foil-accent: rgba(180,232,248,0.28); }
.rarity-gold .base-foil { --foil-accent: rgba(255,204,78,0.32); }
.rarity-neon .base-foil { --foil-accent: rgba(57,255,20,0.28); }
.rarity-rwb .base-foil { --foil-accent: rgba(101,151,255,0.28); }
.rarity-black .base-foil { --foil-accent: rgba(231,198,107,0.32); }

.card-scene:hover .base-foil,
.card-3d.is-tilted .base-foil {
  opacity: 0.68;
  filter: saturate(1.34) brightness(1.18);
}

.effect-layer {
  transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) scale(1.06);
  transform-origin: center;
  will-change: transform, opacity;
}

.lightning-layer {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  z-index: 46;
  pointer-events: none;
}

.signature-layer {
  position: absolute;
  z-index: 55;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.48));
  mix-blend-mode: multiply;
}

.rarity-black .signature-layer,
.style-tactical .signature-layer,
.back-tactical .signature-layer,
.back-select .signature-layer {
  mix-blend-mode: screen;
}

.signature-layer.signature-blue {
  mix-blend-mode: normal;
}

.workshop-section canvas {
  display: block;
  touch-action: none;
}

#signatureCanvas {
  width: 100%;
  height: 112px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  background: #101016;
  cursor: crosshair;
}

.foil-paint-wrap {
  position: relative;
  width: min(210px, 100%);
  aspect-ratio: 5 / 7;
  margin: 2px auto 12px;
  overflow: hidden;
  border: 1px solid rgba(154,114,232,0.36);
  border-radius: 6px;
  background: #0b0b10;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.62);
}

.foil-card-guide,
#foilMaskCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.foil-card-guide {
  background:
    linear-gradient(145deg, var(--team-primary), #11131b 50%, var(--team-secondary)),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.08) 18px 19px);
}

.foil-card-guide::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 13%;
  height: 17%;
  border-left: 4px solid rgba(255,255,255,0.58);
  background: rgba(0,0,0,0.48);
}

#foilMaskCanvas {
  z-index: 2;
  opacity: 0.88;
  mix-blend-mode: screen;
  cursor: crosshair;
}

.workshop-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 12px;
}

.workshop-btn {
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  background: rgba(255,255,255,0.045);
  color: #aaa7b1;
  font: 700 10px "Roboto Condensed", ui-sans-serif, sans-serif;
}

.workshop-btn:hover {
  border-color: rgba(154,114,232,0.52);
  color: #fff;
}

.workshop-btn.primary {
  border-color: rgba(154,114,232,0.62);
  background: rgba(100,60,180,0.34);
  color: #efeaff;
}

.workshop-status {
  margin-top: 8px;
  color: #7e7989;
  font: 700 9px "Orbitron", ui-sans-serif, sans-serif;
  text-align: right;
}

.switch-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #aaa7b1;
  cursor: pointer;
}

.switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-control > span {
  position: relative;
  width: 30px;
  height: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  transition: background 160ms ease, border-color 160ms ease;
}

.switch-control > span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #77737f;
  transition: transform 160ms ease, background 160ms ease;
}

.switch-control input:checked + span {
  border-color: rgba(154,114,232,0.70);
  background: rgba(100,60,180,0.54);
}

.switch-control input:checked + span::after {
  transform: translateX(14px);
  background: #e6dcff;
}

.switch-control input:focus-visible + span {
  outline: 2px solid #9a72e8;
  outline-offset: 2px;
}

.switch-control strong {
  font: 700 9px "Roboto Condensed", ui-sans-serif, sans-serif;
}

.setting-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: #8e8a96;
  font: 700 10px "Roboto Condensed", ui-sans-serif, sans-serif;
}

.signature-colors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.signature-color {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  background: rgba(255,255,255,0.035);
  color: #8e8a96;
  font: 700 9px "Roboto Condensed", ui-sans-serif, sans-serif;
}

.signature-color.active {
  border-color: rgba(154,114,232,0.68);
  background: rgba(100,60,180,0.28);
  color: #fff;
}

.signature-color span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
}

.sig-gold { background: #e8c766; }
.sig-silver { background: #d9dde3; }
.sig-black { background: #111318; }
.sig-white { background: #f7f7f7; }
.sig-blue { background: #1764c6; }

/* V3 acrylic response and signature extraction */
.signature-mode-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.mode-tab {
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: #8a8594;
  font: 700 10px "Roboto Condensed", ui-sans-serif, sans-serif;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.mode-tab:hover {
  border-color: rgba(154,114,232,0.42);
  color: #ccc;
}

.mode-tab.active {
  border-color: rgba(154,114,232,0.62);
  background: rgba(100,60,180,0.30);
  color: #efeaff;
}

.signature-upload-block[hidden],
#signatureCanvas[hidden],
#signatureColorRow[hidden],
#signatureDrawActions[hidden] {
  display: none;
}

.signature-photo-btn {
  width: 100%;
  margin-bottom: 10px;
}

.signature-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.signature-preview-grid canvas {
  display: block;
  width: 100%;
  height: 80px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  background: #0a0a0f;
}

.preview-label {
  display: block;
  margin-bottom: 4px;
  color: #6e6a77;
  font: 700 8px "Roboto Condensed", ui-sans-serif, sans-serif;
  text-transform: uppercase;
}

.inline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  color: #9a96a3;
  font: 500 11px "Roboto Condensed", ui-sans-serif, sans-serif;
  cursor: pointer;
}

.inline-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #9a72e8;
}

.signature-foil-wrap {
  position: absolute;
  z-index: 55;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}

.signature-foil-wrap img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.18);
}

.signature-foil-shine {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: color-dodge;
  background-size: 280% 280%;
  background-position: var(--sig-shine-x, 50%) var(--sig-shine-y, 50%);
  transition: background-position 60ms linear, filter 160ms ease;
}

.signature-gold .signature-foil-shine {
  background-image: linear-gradient(var(--glint-angle, 120deg), #5c4216 0%, #d9ad4e 18%, #fff3c4 36%, #f4dfa0 50%, #a9812f 66%, #f4dfa0 82%, #5c4216 100%);
}

.signature-silver .signature-foil-shine {
  background-image: linear-gradient(var(--glint-angle, 120deg), #4a5058 0%, #b9c2cc 18%, #ffffff 36%, #d9dee5 50%, #7d848c 66%, #d9dee5 82%, #4a5058 100%);
}

.card-scene:hover .signature-foil-shine,
.card-3d.is-tilted .signature-foil-shine {
  filter: brightness(1.2) saturate(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .slab-reflection::after {
    animation: none;
  }
}

/* V4 physical 3D case body and view controls */
.zoom-controls {
  display: grid;
  grid-template-columns: 30px 42px 30px;
  align-items: center;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  background: rgba(255,255,255,0.045);
}

.zoom-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b9b5c1;
  font: 700 18px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.zoom-btn:hover:not(:disabled) {
  background: rgba(154,114,232,0.20);
  color: #fff;
}

.zoom-btn:disabled {
  color: rgba(255,255,255,0.20);
  cursor: default;
}

.zoom-level {
  display: grid;
  place-items: center;
  height: 18px;
  border-right: 1px solid rgba(255,255,255,0.09);
  border-left: 1px solid rgba(255,255,255,0.09);
  color: #8f8a98;
  font: 700 8px "Orbitron", ui-sans-serif, sans-serif;
}

.rotate-controls {
  display: grid;
  grid-template-columns: 30px 30px;
  align-items: center;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  background: rgba(255,255,255,0.045);
}

.rotate-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b9b5c1;
  font: 700 16px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.rotate-btn + .rotate-btn {
  border-left: 1px solid rgba(255,255,255,0.09);
}

.rotate-btn:hover {
  background: rgba(154,114,232,0.20);
  color: #fff;
}

.slab-shell {
  --slab-depth: 14px;
  --slab-width: 344px;
  --slab-height: 508px;
  --slab-border: rgba(225,245,255,0.48);
  --slab-front:
    linear-gradient(135deg, rgba(235,250,255,0.12), rgba(255,255,255,0.015) 42%, rgba(89,213,224,0.09)),
    rgba(174,211,226,0.045);
  --slab-back:
    linear-gradient(150deg, rgba(219,241,250,0.10), rgba(79,119,137,0.07)),
    rgba(118,153,168,0.045);
  --slab-side:
    linear-gradient(90deg, #eaf7fc 0%, #b3d6e6 10%, #e6f4fb 26%, #f8fcff 50%, #dcecf4 74%, #6c94ab 90%, #d5e8f2 100%);
  isolation: auto !important;
  filter: none !important;
  overflow: visible;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform-style: preserve-3d;
  will-change: auto;
}

.card-scene:hover .slab-shell {
  filter: none !important;
}

.slab-shell.slab-forge {
  --slab-depth: 18px;
  --slab-border: rgba(89,213,224,0.68);
  --slab-front: linear-gradient(145deg, rgba(89,213,224,0.15), rgba(255,255,255,0.025), rgba(244,196,78,0.10));
  --slab-back: linear-gradient(145deg, rgba(31,69,77,0.26), rgba(218,246,250,0.08));
  --slab-side: linear-gradient(90deg, #d8fbff, #4c9ca5 18%, #bcebf0 48%, #326870 78%, #d4f7fa);
}

.slab-shell.slab-museum {
  --slab-depth: 20px;
  --slab-border: rgba(244,196,78,0.62);
  --slab-front: linear-gradient(145deg, rgba(244,196,78,0.12), rgba(255,255,255,0.025), rgba(238,91,91,0.055));
  --slab-back: linear-gradient(145deg, rgba(78,61,22,0.20), rgba(255,238,189,0.075));
  --slab-side: linear-gradient(90deg, #fff0ad, #a47a20 18%, #ead079 48%, #68470e 79%, #fff1a8);
}

.slab-shell.slab-acrylic {
  --slab-depth: 28px;
  --slab-width: 356px;
  --slab-height: 520px;
  --slab-border: rgba(232,248,255,0.58);
  --slab-front:
    linear-gradient(128deg, rgba(243,253,255,0.22), rgba(255,255,255,0.012) 30%, rgba(125,193,220,0.06) 60%, rgba(244,252,255,0.18)),
    rgba(200,228,238,0.035);
  --slab-back:
    linear-gradient(145deg, rgba(223,247,255,0.16), rgba(75,132,155,0.07) 55%, rgba(240,252,255,0.12)),
    rgba(160,200,218,0.035);
  --slab-side:
    linear-gradient(90deg,
      #f0f8fc 0%,
      #c8e2ee 6%,
      #daeaf4 16%,
      #f4f9fc 32%,
      #ffffff 50%,
      #f0f6fa 68%,
      #d6e6f0 84%,
      #92bdd2 94%,
      #c4dce8 100%);
}

.slab-shell.slab-crystal {
  --slab-depth: 10px;
  --slab-width: 326px;
  --slab-height: 446px;
  --slab-border: rgba(255,255,255,0.72);
  --slab-front: linear-gradient(150deg, rgba(255,255,255,0.16), rgba(255,255,255,0.015) 50%, rgba(200,225,255,0.12));
  --slab-back: linear-gradient(150deg, rgba(238,251,255,0.12), rgba(145,196,221,0.06));
  --slab-side: linear-gradient(90deg, #ffffff, #bfe8fa 24%, #f8fdff 55%, #78b7d2 78%, #f5fcff);
}

.slab-shell.slab-gallery {
  --slab-depth: 24px;
  --slab-width: 352px;
  --slab-height: 520px;
  --slab-border: rgba(218,228,240,0.42);
  --slab-front: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.012) 46%, rgba(120,140,170,0.12));
  --slab-back: linear-gradient(155deg, rgba(69,78,96,0.32), rgba(201,216,235,0.08));
  --slab-side: linear-gradient(90deg, #dfe7ef, #596779 16%, #b9c5d2 46%, #303946 78%, #d4dde7);
}

.slab-surface,
.slab-side {
  position: absolute;
  display: block;
  pointer-events: none;
  transform-style: preserve-3d;
}

.slab-surface {
  inset: 0;
  border: 1px solid var(--slab-border);
  border-radius: inherit;
  backface-visibility: hidden;
}

.slab-surface-front {
  background: var(--slab-front);
  box-shadow:
    0 30px 72px rgba(0,0,0,0.52),
    inset 0 0 0 4px rgba(255,255,255,0.04),
    inset 0 0 20px rgba(185,230,247,0.10),
    inset 0 0 50px rgba(0,20,40,0.05);
  transform: translateZ(calc(var(--slab-depth) / 2));
  opacity: var(--surface-opacity, 1);
  transition: opacity 120ms ease-out;
}

/* Inner cavity — dark shadow lines around the card opening inside the slab */
.slab-cavity {
  position: absolute;
  z-index: 60;
  pointer-events: none;
  transform-style: preserve-3d;
  display: none;
}

.slab-shell:not(.slab-none):not(.slab-crystal) .slab-cavity {
  display: block;
  inset: 0;
  transform: translateZ(calc(var(--slab-depth) / 2 + 0.3px));
}

.slab-cavity::before,
.slab-cavity::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 1px;
}

/* Horizontal cavity lines (top & bottom of card area) */
.slab-cavity::before {
  left: 50%;
  top: 50%;
  width: calc(300px + 8px);
  height: calc(420px + 8px);
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(0,0,0,0.06);
  border-radius: 9px;
  box-shadow:
    inset 0 0 8px rgba(0,20,40,0.08),
    0 0 4px rgba(0,20,40,0.04);
}

/* Inner glow highlight on cavity edge */
.slab-cavity::after {
  left: 50%;
  top: 50%;
  width: calc(300px + 12px);
  height: calc(420px + 12px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(180,220,240,0.04);
}

/* Acrylic-specific cavity — more pronounced for thick slab */
.slab-shell.slab-acrylic .slab-cavity::before {
  border-color: rgba(0,15,30,0.09);
  box-shadow:
    inset 0 0 10px rgba(0,25,50,0.10),
    inset 0 2px 4px rgba(0,20,40,0.06),
    0 0 6px rgba(0,20,40,0.05);
}

.slab-shell.slab-acrylic .slab-cavity::after {
  border-color: rgba(200,235,250,0.06);
  box-shadow: inset 0 0 16px rgba(160,210,235,0.05);
}

.slab-surface-back {
  background: var(--slab-back);
  box-shadow:
    0 30px 72px rgba(0,0,0,0.48),
    inset 0 0 0 5px rgba(255,255,255,0.035),
    inset 0 0 26px rgba(106,156,177,0.10),
    inset 0 0 44px rgba(0,20,40,0.05);
  transform: rotateY(180deg) translateZ(calc(var(--slab-depth) / 2));
  opacity: var(--surface-opacity, 1);
  transition: opacity 120ms ease-out;
}

.slab-side {
  border: 1px solid rgba(255,255,255,0.38);
  background: var(--slab-side);
  box-shadow:
    inset 0 0 4px rgba(255,255,255,0.52),
    inset 0 0 12px rgba(30,55,67,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,20,40,0.15),
    0 0 6px rgba(0,0,0,0.30);
  backface-visibility: visible;
  overflow: hidden;
  opacity: 1;
}

/* Side-wall construction details remain attached to the physical shell faces. */
.slab-shell.slab-acrylic .slab-side::before,
.slab-shell.slab-acrylic .slab-side::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.slab-shell.slab-acrylic .slab-side::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(200,215,225,0.3), rgba(255,255,255,0.62) 12%, rgba(255,255,255,0.78) 50%, rgba(255,255,255,0.62) 88%, rgba(200,215,225,0.3));
  box-shadow: 0 0.5px 1px rgba(0,40,60,0.18), 0 -0.5px 1px rgba(255,255,255,0.12);
}

.slab-shell.slab-acrylic .slab-side::after {
  left: 10%;
  right: 10%;
  top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 0.5px;
  background: linear-gradient(90deg, rgba(245,248,250,0.5), rgba(210,215,222,0.55) 25%, rgba(185,192,200,0.65) 50%, rgba(210,215,222,0.55) 75%, rgba(245,248,250,0.5));
  box-shadow: 0 0 2px rgba(0,0,0,0.22), inset 0 0 1px rgba(255,255,255,0.3);
}

.slab-shell.slab-acrylic .slab-side-left::before,
.slab-shell.slab-acrylic .slab-side-right::before {
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  height: auto;
  background: linear-gradient(180deg, rgba(200,215,225,0.3), rgba(255,255,255,0.62) 6%, rgba(255,255,255,0.78) 50%, rgba(255,255,255,0.62) 94%, rgba(200,215,225,0.3));
  box-shadow: 0.5px 0 1px rgba(0,40,60,0.18), -0.5px 0 1px rgba(255,255,255,0.12);
}

.slab-shell.slab-acrylic .slab-side-left::after,
.slab-shell.slab-acrylic .slab-side-right::after {
  top: 68px;
  right: auto;
  bottom: 24px;
  left: calc(50% - 1.5px);
  width: 3px;
  height: auto;
  background: linear-gradient(90deg, rgba(245,248,250,0.5), rgba(192,198,208,0.60) 46%, rgba(246,248,252,0.5));
  box-shadow: 0 0 2px rgba(0,0,0,0.18), inset 0 0 1px rgba(255,255,255,0.25);
}

.slab-shell.slab-gallery .slab-side::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.slab-shell.slab-museum .slab-side::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,196,78,0.6) 20%, rgba(255,220,120,0.8) 50%, rgba(244,196,78,0.6) 80%, transparent);
}

.slab-shell.slab-forge .slab-side::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(89,213,224,0.5) 20%, rgba(216,251,255,0.7) 50%, rgba(89,213,224,0.5) 80%, transparent);
}

.slab-side-left,
.slab-side-right {
  top: 0;
  left: calc(50% - var(--slab-depth) / 2);
  right: auto;
  width: var(--slab-depth);
  height: 100%;
}

.slab-side-left {
  transform: rotateY(-90deg) translateZ(calc(var(--slab-width) / 2));
}

.slab-side-right {
  transform: rotateY(90deg) translateZ(calc(var(--slab-width) / 2));
}

.slab-side-top,
.slab-side-bottom {
  left: 0;
  top: calc(50% - var(--slab-depth) / 2);
  bottom: auto;
  width: 100%;
  height: var(--slab-depth);
}

.slab-side-top {
  transform: rotateX(90deg) translateZ(calc(var(--slab-height) / 2));
}

.slab-side-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--slab-height) / 2));
}

.slab-shell > .slab-label,
.slab-shell > .slab-reflection,
.slab-shell > .acrylic-lens,
.slab-shell > .slab-cavity,
.slab-shell::before,
.slab-shell::after {
  transform: translateZ(calc(var(--slab-depth) / 2 + 0.6px)) !important;
}

.slab-shell > .card-3d {
  transform: translateZ(0);
}

.slab-shell.slab-none {
  --slab-depth: 0px;
}

.slab-shell.slab-none .slab-surface,
.slab-shell.slab-none .slab-side {
  display: none;
}

/* At the exact quarter turn, reveal only the physical side faces. */
.slab-shell.is-quarter-edge:not(.slab-none) > .slab-surface,
.slab-shell.is-quarter-edge:not(.slab-none) > .slab-label,
.slab-shell.is-quarter-edge:not(.slab-none) > .slab-reflection,
.slab-shell.is-quarter-edge:not(.slab-none) > .acrylic-lens,
.slab-shell.is-quarter-edge:not(.slab-none) > .slab-cavity,
.slab-shell.is-quarter-edge:not(.slab-none) > .card-3d {
  visibility: hidden;
}

.slab-shell.slab-none.is-quarter-edge > .card-3d > .card-face {
  visibility: hidden;
}

@media (max-width: 700px) {
  .zoom-controls {
    grid-template-columns: 34px 34px;
    height: 34px;
    border: 0;
    gap: 6px;
    overflow: visible;
    background: transparent;
  }

  .zoom-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
  }

  .zoom-level {
    display: none;
  }

  .rotate-controls {
    grid-template-columns: 34px 34px;
    height: 34px;
    overflow: visible;
    border: 0;
    gap: 6px;
    background: transparent;
  }

  .rotate-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
  }

  .rotate-btn + .rotate-btn {
    border-left: 1px solid rgba(255,255,255,0.14);
  }
}

@media (max-width: 560px) {
  .foil-paint-wrap {
    width: min(230px, 78vw);
  }

  .workshop-actions {
    gap: 5px;
  }

  .info-primary {
    max-width: 150px;
  }

  .edition-name {
    font-size: 15px;
  }

  .info-meta div {
    align-items: start;
  }

  .info-meta strong {
    overflow: visible;
    font-size: 6px;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* V5 Three.js WebGL preview */
.three-card-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.three-card-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.three-card-stage canvas:active {
  cursor: grabbing;
}

.three-status {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(205,235,245,0.16);
  border-radius: 4px;
  background: rgba(8,10,15,0.52);
  color: rgba(224,242,248,0.55);
  font: 700 7px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1px;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.three-preview-ready .card-scene {
  width: min(720px, calc(100% - 24px));
  height: min(640px, calc(100% - 88px));
  margin-bottom: 34px;
  perspective: none;
  transform: none;
}

.three-preview-ready .three-card-stage {
  opacity: 1;
  pointer-events: auto;
}

.three-preview-ready .slab-shell {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.three-card-stage.is-unavailable {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .three-preview-ready .card-scene {
    width: min(680px, calc(100% - 20px));
    height: 565px;
    margin-bottom: 36px;
  }
}

@media (max-width: 560px) {
  .three-preview-ready .card-scene {
    width: 100%;
    height: 500px;
    margin-bottom: 42px;
    transform: none;
  }

  .three-status {
    right: 8px;
    bottom: 8px;
  }
}

/* ============================================================
   Shared Card Library (共享卡牌库)
   Tab 样式由本节统一定义，避免 v1/v2 皮肤在层叠中互相覆盖。
   ============================================================ */

.shared-header {
  padding: 12px 18px 8px;
}

.shared-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.shared-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shared-actions {
  display: flex;
  gap: 6px;
}

.shared-publish-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.shared-nickname {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #f4e8cf;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
}

.shared-nickname:focus {
  border-color: rgba(255, 196, 89, 0.6);
}

.shared-publish-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #14100a;
  background: linear-gradient(135deg, #ffcf6b, #e0a03f);
  border: 1px solid #ffcf6b;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.shared-publish-btn:hover {
  filter: brightness(1.1);
}

.shared-publish-btn:active {
  transform: translateY(1px);
}

.shared-note {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cream-dim, #a89a83);
}

.shared-card {
  position: relative;
}

.shared-card-author {
  margin-top: 3px;
  font-size: 11px;
  color: #d9a441;
}

.shared-card-delete {
  top: 8px !important;
  right: 34px !important;
}

.shared-detail {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 6, 8, 0.78);
  backdrop-filter: blur(4px);
}

.shared-detail-panel {
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px 20px 20px;
  background: #141008;
  border: 1px solid rgba(255, 196, 89, 0.35);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45), 0 18px 60px rgba(0, 0, 0, 0.55);
}

.shared-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.shared-detail-header h2 {
  margin: 2px 0 0;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #f4e8cf;
}

.shared-detail-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #d9a441;
}

.shared-detail-author {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #a89a83;
}

.shared-detail-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  margin-top: 16px;
}

.shared-detail-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#sharedDetailCanvas {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b0d10;
}

.shared-detail-flip {
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #14100a;
  background: #ffcf6b;
  border: 1px solid #ffcf6b;
  cursor: pointer;
}

.shared-detail-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.shared-detail-meta {
  font-size: 12px;
  line-height: 1.7;
  color: #d8c9ad;
}

.shared-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.shared-detail-stat {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.shared-detail-stat span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #8f8269;
}

.shared-detail-stat strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: #f4e8cf;
}

.shared-detail-time {
  font-size: 11px;
  color: #8f8269;
}

.shared-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.shared-detail-actions .library-action-btn {
  padding: 9px 12px;
  font-size: 12px;
  cursor: pointer;
}

.shared-detail-delete {
  color: #e07070 !important;
  border-color: rgba(224, 112, 112, 0.45) !important;
}

@media (max-width: 720px) {
  .shared-detail-body {
    grid-template-columns: 1fr;
  }

  .shared-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .shared-publish-row {
    flex-direction: column;
  }
}

/* Shared library tabs */
.library-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.library-tab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  text-transform: uppercase;
}
.library-tab:hover { color: rgba(255, 255, 255, 0.8); }
.library-tab.active {
  color: #fff;
  border-bottom-color: #4ecdc4;
}

.library-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.library-panel.hidden { display: none; }

/* ============================
   SHARED LIBRARY — 发布区
   ============================ */
.shared-publish-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}
.shared-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.shared-author-row label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
#shared-author-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
}
#shared-author-input:focus { border-color: rgba(255, 255, 255, 0.3); }
.btn-publish {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #4ecdc4, #44b09e);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-publish:hover { opacity: 0.85; }
.btn-publish:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================
   SHARED LIBRARY — 筛选区
   ============================ */
.shared-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.shared-filter-select {
  flex: 1;
  min-width: 90px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  -webkit-appearance: none;
}
.shared-filter-select option { background: #1a1a2e; color: #fff; }

/* ============================
   SHARED LIBRARY — 工具栏
   ============================ */
.shared-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.shared-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
}
.btn-refresh {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}
.btn-refresh:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }

/* ============================
   SHARED LIBRARY — 网格
   ============================ */
.shared-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: calc(100vh - 350px);
  overflow-y: auto;
  padding-right: 4px;
}
.shared-card-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.shared-card-item:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.shared-card-thumb {
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.shared-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shared-card-info { padding: 8px; }
.shared-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.shared-card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.shared-card-team {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.shared-card-rarity {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.rarity-base { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }
.rarity-silver { background: rgba(192, 192, 192, 0.2); color: #c0c0c0; }
.rarity-gold { background: rgba(255, 215, 0, 0.2); color: #ffd700; }
.rarity-neon { background: rgba(0, 255, 128, 0.15); color: #00ff80; }
.rarity-rwb { background: rgba(255, 0, 0, 0.15); color: #ff6666; }
.rarity-black {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.shared-card-author {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
}
.shared-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
}

/* ============================
   SHARED LIBRARY — 检视弹层
   ============================ */
.shared-detail-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.shared-detail-modal.active { display: flex; }
.shared-detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.shared-detail-container {
  position: relative;
  z-index: 1;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  max-width: 720px;
  width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}
.shared-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}
.shared-detail-body {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.shared-detail-preview {
  flex: none;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#shared-detail-canvas {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #0b0d10;
}
.shared-detail-flip-btns { display: flex; gap: 6px; }
.btn-flip {
  flex: 1;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.btn-flip.active {
  background: #4ecdc4;
  border-color: #4ecdc4;
  color: #fff;
}
.shared-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.shared-detail-name {
  margin: 0 0 4px;
  font-size: 22px;
  color: #fff;
}
.shared-detail-author {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}
.shared-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.shared-detail-tags span {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}
.shared-detail-badges {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.shared-detail-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
}
.shared-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.shared-detail-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-label {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5px;
}
.stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.shared-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.btn-action {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #4ecdc4, #44b09e);
  color: #fff;
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-danger {
  background: rgba(255, 59, 48, 0.2);
  color: #ff3b30;
}
.btn-action:hover { opacity: 0.85; }

/* ============================
   移动端适配 (≤ 600px)
   ============================ */
@media (max-width: 600px) {
  .shared-detail-body {
    flex-direction: column;
    padding: 16px 0;
  }
  .shared-detail-container {
    width: 95vw;
    padding: 16px;
  }
  .shared-detail-preview {
    width: 100%;
  }
  .shared-detail-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .shared-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .shared-filters {
    flex-direction: column;
  }
}

/* ============================
   球员基础信息警告（PRD v2.0 §3）
   ============================ */
.library-card,
.shared-card-item,
.shared-card-thumb {
  position: relative;
}

.player-warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}

.player-warning {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 4px;
}

.player-warning-error {
  background: rgba(255, 59, 48, 0.16);
  color: #ff6b61;
  border: 1px solid rgba(255, 59, 48, 0.35);
}

.player-warning-warn {
  background: rgba(255, 199, 0, 0.12);
  color: #ffd54a;
  border: 1px solid rgba(255, 199, 0, 0.30);
}

.player-warning-info {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===== UI POLISH v3 ===== */

/* 1.1 Ripple 按钮容器 */
.choice-btn,
.effect-btn,
.rarity-btn,
.slab-btn,
.badge-grid button,
.export-btn,
.action-row,
.workshop-btn,
.library-action-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ui-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 213, 224, 0.28) 0%, transparent 70%);
  transform: scale(0);
  animation: ui-ripple-expand 480ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  pointer-events: none;
  z-index: 0;
}

@keyframes ui-ripple-expand {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* 1.2 按钮按下缩放 */
.choice-btn:active,
.effect-btn:active,
.rarity-btn:active,
.slab-btn:active,
.badge-grid button:active,
.export-btn:active,
.action-row:active {
  transform: scale(0.965);
  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.choice-btn,
.effect-btn,
.rarity-btn,
.slab-btn,
.badge-grid button,
.export-btn,
.action-row {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 160ms ease,
              border-color 160ms ease,
              color 160ms ease;
}

/* 1.3 选中态光晕 */
.choice-btn.active,
.effect-btn.active,
.rarity-btn.active,
.slab-btn.active {
  animation: ui-select-glow 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ui-select-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(89, 213, 224, 0.45);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(89, 213, 224, 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(89, 213, 224, 0);
  }
}

/* 2.1 Panel Section 错落入场（仅页面初次加载） */
.panel-section {
  animation: ui-section-enter 400ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.panel-section:nth-child(1) { animation-delay: 0ms; }
.panel-section:nth-child(2) { animation-delay: 60ms; }
.panel-section:nth-child(3) { animation-delay: 120ms; }
.panel-section:nth-child(4) { animation-delay: 180ms; }
.panel-section:nth-child(5) { animation-delay: 240ms; }
.panel-section:nth-child(6) { animation-delay: 300ms; }
.panel-section:nth-child(7) { animation-delay: 360ms; }

@keyframes ui-section-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2.2 Section Header hover 指示 */
.section-head {
  transition: color 180ms ease;
}

.section-head:hover > span:last-child {
  color: var(--cyan, #59d5e0);
  transform: translateX(3px);
  transition: color 180ms ease, transform 180ms ease;
}

/* 3.1 Drawer 标题与关闭按钮延迟入场 */
.library-drawer.open .library-title {
  animation: ui-drawer-title-enter 420ms cubic-bezier(0.22, 0.61, 0.36, 1) 180ms both;
}

@keyframes ui-drawer-title-enter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.library-drawer.open .library-close-btn {
  animation: ui-close-btn-enter 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 250ms both;
}

@keyframes ui-close-btn-enter {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* 3.3 卡片 hover 增强 */
.library-card {
  transition: border-color 220ms ease,
              transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 260ms ease;
}

.library-card:hover {
  border-color: rgba(89, 213, 224, 0.35);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(89, 213, 224, 0.12);
}

.library-card:hover img {
  filter: brightness(1.08);
  transition: filter 260ms ease;
}

/* 3.4 收藏心形弹跳 */
.library-card-fav.is-fav {
  animation: ui-heart-pop 420ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
}

@keyframes ui-heart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* 4.1 Toast 弹性入场 + 进度条 */
.toast {
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: ui-toast-enter 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ui-toast-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.toast.show::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--cyan, #59d5e0);
  transform-origin: left;
  animation: ui-toast-countdown 2200ms linear forwards;
  border-radius: 0 0 4px 4px;
}

@keyframes ui-toast-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* 4.2 Toast 类型区分 */
.toast[data-type="success"] { border-left-color: #58dca8; }
.toast[data-type="success"]::after { background: #58dca8; }
.toast[data-type="warning"] { border-left-color: #f4c44e; }
.toast[data-type="warning"]::after { background: #f4c44e; }
.toast[data-type="error"] { border-left-color: #e85d75; }
.toast[data-type="error"]::after { background: #e85d75; }

/* 5.1 导出 Loading 状态 */
.export-btn.exporting {
  pointer-events: none;
  border-color: rgba(89, 213, 224, 0.55);
  animation: ui-export-pulse 1200ms ease-in-out infinite;
}

.export-btn.exporting span {
  opacity: 0.4;
}

.export-btn.exporting strong::after {
  content: "⏳";
  margin-left: 6px;
  display: inline-block;
  animation: ui-spin 1s linear infinite;
}

@keyframes ui-export-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89, 213, 224, 0); }
  50% { box-shadow: 0 0 14px 2px rgba(89, 213, 224, 0.2); }
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* 5.2 导出成功闪光 */
.export-btn.export-done {
  animation: ui-export-success 600ms ease forwards;
}

@keyframes ui-export-success {
  0% { border-color: rgba(88, 220, 168, 0.8); box-shadow: 0 0 16px rgba(88, 220, 168, 0.4); }
  100% { border-color: var(--line); box-shadow: none; }
}

/* 6.1 包体晃动暗示 */
.pack-envelope {
  animation: ui-pack-idle-wobble 2.5s ease-in-out infinite;
}

@keyframes ui-pack-idle-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.2deg); }
  75% { transform: rotate(1.2deg); }
}

.pack-envelope:active,
.pack-envelope.tearing {
  animation: none;
}

/* 6.2 撕包粒子 */
.ui-tear-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan, #59d5e0);
  pointer-events: none;
  z-index: 10000;
  animation: ui-tear-particle-fly 500ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ui-tear-particle-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}

/* 6.3 翻卡弹跳 */
.pack-card-inner.revealed {
  animation: ui-card-reveal-flip 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ui-card-reveal-flip {
  0% { transform: rotateY(0deg) scale(1); }
  40% { transform: rotateY(110deg) scale(1.06); }
  70% { transform: rotateY(175deg) scale(1.03); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* 7.1 缩放按钮反馈 */
.zoom-btn {
  transition: transform 120ms ease,
              background 120ms ease,
              color 120ms ease;
}

.zoom-btn:active:not(:disabled) {
  transform: scale(0.88);
}

/* 7.2 工具栏 active 呼吸光效 */
.tool-btn.active {
  position: relative;
}

.tool-btn.active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 0 8px rgba(89, 213, 224, 0.25);
  animation: ui-tool-active-breathe 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ui-tool-active-breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* 7.3 卡片信息栏入场 */
.card-info-bar {
  animation: ui-info-bar-enter 500ms cubic-bezier(0.22, 0.61, 0.36, 1) 400ms both;
}

@keyframes ui-info-bar-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 8.1 Input Focus 动效 */
.inspector input[type="text"]:focus,
.inspector input[type="number"]:focus,
.inspector textarea:focus,
.inspector select:focus {
  border-color: rgba(89, 213, 224, 0.5);
  box-shadow: 0 1px 8px rgba(89, 213, 224, 0.12);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* 8.2 Range Slider 拇指动效 */
input[type="range"]::-webkit-slider-thumb {
  transition: transform 120ms ease, box-shadow 120ms ease;
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(89, 213, 224, 0.4);
}

/* 8.3 色彩输出闪烁 */
.ui-color-flash {
  animation: ui-color-pulse 400ms ease;
}

@keyframes ui-color-pulse {
  0% { color: var(--cyan); transform: scale(1.1); }
  100% { color: inherit; transform: scale(1); }
}

/* 9.1 保存心形动画 */
.library-save-btn.saving,
.action-row.save-trigger.saving {
  animation: ui-save-heart 600ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
  color: #e85d75 !important;
}

@keyframes ui-save-heart {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 9.2 保存状态指示器 */
.save-state.saved {
  animation: ui-save-state-pop 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ui-save-state-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 10.1 发布按钮呼吸脉冲 */
.btn-publish {
  animation: ui-publish-pulse 3s ease-in-out infinite;
}

@keyframes ui-publish-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89, 213, 224, 0); }
  50% { box-shadow: 0 0 12px 2px rgba(89, 213, 224, 0.15); }
}

.btn-publish:hover {
  animation: none;
  box-shadow: 0 0 16px 3px rgba(89, 213, 224, 0.25);
}

/* 10.3 共享检视弹层入场 */
.shared-detail-modal {
  transition: opacity 260ms ease;
  opacity: 0;
  pointer-events: none;
}

.shared-detail-modal.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.shared-detail-modal.active .shared-detail-container {
  animation: ui-modal-enter 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ui-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 11.1 VS 爆发动画 */
.compare-vs {
  animation: ui-vs-burst 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both;
}

@keyframes ui-vs-burst {
  0% {
    opacity: 0;
    transform: scale(0.3);
    text-shadow: 0 0 40px rgba(89, 213, 224, 0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: none;
  }
}

/* 11.2 数据对比条入场 */
.compare-stat-row {
  animation: ui-stat-row-enter 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.compare-stat-row:nth-child(1) { animation-delay: 400ms; }
.compare-stat-row:nth-child(2) { animation-delay: 470ms; }
.compare-stat-row:nth-child(3) { animation-delay: 540ms; }
.compare-stat-row:nth-child(4) { animation-delay: 610ms; }
.compare-stat-row:nth-child(5) { animation-delay: 680ms; }
.compare-stat-row:nth-child(6) { animation-delay: 750ms; }

@keyframes ui-stat-row-enter {
  from {
    opacity: 0;
    transform: scaleX(0.5);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* 11.3 Winner 高亮 */
.compare-stat-row.winner {
  animation: ui-stat-row-enter 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
             ui-winner-flash 500ms ease 900ms both;
}

@keyframes ui-winner-flash {
  0% { box-shadow: 0 0 0 0 rgba(88, 220, 168, 0); }
  40% { box-shadow: 0 0 12px 2px rgba(88, 220, 168, 0.3); }
  100% { box-shadow: none; }
}

/* 12.1 自定义滚动条 */
.inspector::-webkit-scrollbar,
.library-drawer::-webkit-scrollbar {
  width: 5px;
}

.inspector::-webkit-scrollbar-track,
.library-drawer::-webkit-scrollbar-track {
  background: transparent;
}

.inspector::-webkit-scrollbar-thumb,
.library-drawer::-webkit-scrollbar-thumb {
  background: rgba(89, 213, 224, 0.18);
  border-radius: 4px;
}

.inspector::-webkit-scrollbar-thumb:hover,
.library-drawer::-webkit-scrollbar-thumb:hover {
  background: rgba(89, 213, 224, 0.35);
}

/* 12.2 Focus-visible 全局增强 */
:focus-visible {
  outline: 2px solid rgba(89, 213, 224, 0.6);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===== PACK REDESIGN v2 — Elite Court Real Image Pack =====
 *
 * Holographic foil CSS technique inspired by:
 *   simeydotme/pokemon-cards-css (GPL-3.0)
 *   https://github.com/simeydotme/pokemon-cards-css
 *
 * Confetti particle physics inspired by:
 *   catdad/canvas-confetti (ISC License)
 *   https://github.com/catdad/canvas-confetti
 */

/* --- 翻卡基础布局（兼容旧版 revealPackCards） --- */
.pack-cards {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 258px;
  overflow-x: auto;
  padding: 14px 4px 20px;
}

.pack-card-slot {
  flex: 0 0 160px;
  width: 160px;
  min-width: 160px;
  height: 224px;
  min-height: 224px;
  aspect-ratio: 5 / 7;
  align-self: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: transparent;
  cursor: pointer;
  perspective: 700px;
}

.pack-card-slot:focus-visible {
  box-shadow: 0 0 0 2px #8ed6e6;
}

.pack-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.pack-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pack-card-face-front {
  background: #171827;
  box-shadow: inset 0 0 40px rgba(110, 89, 181, 0.18);
}

.pack-card-face-front strong {
  color: rgba(142, 214, 230, 0.3);
  font: 900 27px/1 "Orbitron", ui-sans-serif, sans-serif;
}

.pack-card-face-back {
  transform: rotateY(180deg);
}

.pack-card-face-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- pack backdrop v2: aurora stage ---
 *
 * 零依赖五层背板，灵感参考：
 *   AlberErre/auroral  — 纯 CSS 动态极光渐变
 *   VincentGarreau/particles.js  — 背景浮尘粒子氛围
 */
.pack-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 100% at 50% 36%,
      rgba(10, 14, 28, 0) 0%,
      rgba(4, 6, 12, 0.42) 72%,
      rgba(2, 3, 7, 0.86) 100%),
    linear-gradient(180deg,
      rgba(8, 11, 22, 0.42) 0%,
      rgba(5, 7, 14, 0.16) 52%,
      rgba(3, 4, 9, 0.5) 100%);
}

/* --- 1/5 极光团：四色缓慢漂移 --- */
.pack-aurora {
  position: absolute;
  width: 50vw;
  height: 50vw;
  min-width: 380px;
  min-height: 380px;
  border-radius: 50%;
  opacity: 0.5;
  will-change: transform, opacity;
}
.pack-aurora-a {
  top: -20%;
  left: -14%;
  background: radial-gradient(circle at 34% 38%,
    rgba(89, 213, 224, 0.62),
    rgba(89, 213, 224, 0) 62%);
  animation: pack-aur-drift-a 24s ease-in-out infinite alternate;
}
.pack-aurora-b {
  top: -16%;
  right: -18%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle at 58% 42%,
    rgba(200, 162, 255, 0.58),
    rgba(200, 162, 255, 0) 60%);
  animation: pack-aur-drift-b 28s ease-in-out infinite alternate;
}
.pack-aurora-c {
  bottom: -26%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle at 46% 42%,
    rgba(255, 214, 102, 0.46),
    rgba(255, 214, 102, 0) 58%);
  animation: pack-aur-drift-c 30s ease-in-out infinite alternate;
}
.pack-aurora-d {
  right: -12%;
  bottom: -30%;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle at 44% 40%,
    rgba(232, 93, 117, 0.48),
    rgba(232, 93, 117, 0) 58%);
  animation: pack-aur-drift-d 32s ease-in-out infinite alternate;
}
@keyframes pack-aur-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.44; }
  to   { transform: translate3d(5vw, 4vh, 0) scale(1.2); opacity: 0.72; }
}
@keyframes pack-aur-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); opacity: 0.52; }
  to   { transform: translate3d(-4vw, 6vh, 0) scale(0.92); opacity: 0.78; }
}
@keyframes pack-aur-drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.38; }
  to   { transform: translate3d(4vw, -3vh, 0) scale(1.16); opacity: 0.64; }
}
@keyframes pack-aur-drift-d {
  from { transform: translate3d(0, 0, 0) scale(1.06); opacity: 0.4; }
  to   { transform: translate3d(-5vw, -4vh, 0) scale(0.94); opacity: 0.66; }
}

/* --- 2/5 中央聚光灯：柔和光锥 + 跟随视线的径向光晕 --- */
.pack-spotlight {
  position: absolute;
  inset: -8% -12%;
  z-index: 1;
  background:
    conic-gradient(from 208deg at 50% 42%,
      transparent 0deg,
      rgba(89, 213, 224, 0.07) 32deg,
      transparent 70deg,
      rgba(180, 120, 255, 0.05) 118deg,
      transparent 152deg,
      rgba(255, 214, 102, 0.05) 202deg,
      transparent 250deg,
      rgba(232, 93, 117, 0.05) 298deg,
      transparent 344deg),
    radial-gradient(ellipse 72% 58% at 50% 42%,
      rgba(142, 214, 230, 0.12),
      rgba(180, 120, 255, 0.06) 42%,
      transparent 72%);
  background-position: center, 50% 42%;
  background-repeat: no-repeat;
  transition: background-position 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: pack-spot-breathe 7s ease-in-out infinite alternate;
  filter: blur(2px);
}
@keyframes pack-spot-breathe {
  from { opacity: 0.78; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.05); }
}

/* --- 3/5 舞台点阵地板：透视纵深 --- */
.pack-grid-floor {
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -6%;
  height: 60%;
  z-index: 2;
  background-image: radial-gradient(circle at center,
    rgba(142, 214, 230, 0.5) 1px,
    rgba(142, 214, 230, 0) 1.7px);
  background-size: 44px 44px;
  transform: perspective(620px) rotateX(58deg) scale(1.08);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 0.85) 6%,
    rgba(0, 0, 0, 0.28) 52%,
    transparent 80%);
  mask-image: linear-gradient(to top,
    rgba(0, 0, 0, 0.85) 6%,
    rgba(0, 0, 0, 0.28) 52%,
    transparent 80%);
  animation: pack-grid-pulse 9s ease-in-out infinite alternate;
}
@keyframes pack-grid-pulse {
  from { opacity: 0.45; }
  to   { opacity: 0.85; }
}

/* --- 4/5 浮尘粒子画布（PackDust 引擎驱动） --- */
.pack-dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

/* --- 5/5 暗角 + 胶片噪点：收拢视线聚焦卡包 --- */
.pack-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse 135% 115% at 50% 44%,
      transparent 40%,
      rgba(2, 3, 7, 0.4) 76%,
      rgba(1, 2, 5, 0.82) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.9;
}

/* --- confetti canvas --- */
.pack-confetti-canvas {
  position: absolute;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- pack stage --- */
.pack-stage { position: relative; z-index: 2; }

/* --- pack envelope (real image split) --- */
.pack-envelope {
  position: relative;
  width: 260px;
  height: 390px;
  margin: 0 auto;
  outline: 0;
  cursor: grab;
  perspective: 800px;
  transition: transform 180ms ease-out, filter 250ms ease;
  transform:
    perspective(800px)
    rotateX(calc((var(--pack-my, 0.5) - 0.5) * -8deg))
    rotateY(calc((var(--pack-mx, 0.5) - 0.5) * 8deg));
  filter: drop-shadow(0 20px 50px rgba(100, 40, 180, 0.35));
  animation: none; /* 关闭旧版通用晃动，由 idle-wobble 类控制 */
}

/* 五帧拆包动画层 */
.pack-frame {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 120ms ease;
  will-change: opacity;
}
.pack-frame-1 { background-image: url("assets/pack-preview.webp"); }
.pack-frame-2 { background-image: url("assets/pack-frame-2.webp"); }
.pack-frame-3 { background-image: url("assets/pack-frame-3.webp"); }
.pack-frame-4 { background-image: url("assets/pack-frame-4.webp"); }
.pack-frame-5 { background-image: url("assets/pack-frame-5.webp"); }
.pack-envelope[data-frame="1"] .pack-frame-1,
.pack-envelope[data-frame="2"] .pack-frame-2,
.pack-envelope[data-frame="3"] .pack-frame-3,
.pack-envelope[data-frame="4"] .pack-frame-4,
.pack-envelope[data-frame="5"] .pack-frame-5 {
  opacity: 1;
}

/* 自然光泽特效：光标处柔和高光 + 悬停时一次斜向流光扫过 */
.pack-foil-sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  /* 沿包装纸不规则边缘裁切：用卡包透明图作遮罩 */
  -webkit-mask-image: url("assets/pack-preview.webp");
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-image: url("assets/pack-preview.webp");
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  background:
    radial-gradient(
      ellipse 90% 70% at
        calc(var(--pack-mx, 0.5) * 100%)
        calc(var(--pack-my, 0.5) * 100%),
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 45%,
      transparent 65%
    ),
    linear-gradient(
      115deg,
      transparent 32%,
      rgba(255,255,255,0.16) 46%,
      rgba(255,255,255,0.04) 52%,
      transparent 64%
    );
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, -70% 0;
  transition: opacity 300ms ease;
}
.pack-envelope:hover .pack-foil-sheen,
.pack-envelope.tearing .pack-foil-sheen {
  opacity: 1;
  animation: pack-gloss-sweep 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes pack-gloss-sweep {
  0%   { background-position: 0 0, -70% 0; }
  100% { background-position: 0 0, 170% 0; }
}

/* hint text below pack */
.pack-hint-text {
  margin-top: 24px;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font: 700 8px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 2px;
  animation: pack-hint-pulse 1.7s ease-in-out infinite;
}

/* --- tearing states --- */
.pack-envelope.tearing {
  cursor: grabbing;
  filter: drop-shadow(0 24px 60px rgba(130, 50, 200, 0.45))
          drop-shadow(0 0 30px rgba(89, 213, 224, 0.15));
}

/* critical: > 70% progress — shake + glow intensifies */
.pack-envelope.tear-critical {
  animation: pack-shake 55ms ease-in-out infinite;
  filter: drop-shadow(0 24px 60px rgba(130, 50, 200, 0.5))
          drop-shadow(0 0 50px rgba(89, 213, 224, 0.3));
}
.pack-envelope.tear-critical .pack-foil-sheen { opacity: 1; }

@keyframes pack-shake {
  0%,100% { transform: perspective(800px) translateX(0); }
  25%     { transform: perspective(800px) translateX(-2px) rotateZ(-0.3deg); }
  75%     { transform: perspective(800px) translateX(2px) rotateZ(0.3deg); }
}

/* --- split open animation --- */
.pack-envelope.split-open {
  animation: pack-envelope-burst 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}
.pack-envelope.split-open .pack-foil-sheen { opacity: 0; }
@keyframes pack-envelope-burst {
  0%   { opacity: 1; transform: perspective(800px) scale(1) rotateZ(0deg);
         filter: brightness(1.3) drop-shadow(0 0 40px rgba(180,120,255,0.6)); }
  40%  { opacity: 1; transform: perspective(800px) scale(1.12) rotateZ(-2deg);
         filter: brightness(2) drop-shadow(0 0 60px rgba(89,213,224,0.8)); }
  100% { opacity: 0; transform: perspective(800px) scale(0.6) translateY(-80px) rotateZ(3deg);
         filter: brightness(3) drop-shadow(0 0 0 transparent); }
}
/* flash burst on split open */
.pack-split-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.4) 0%,
    rgba(180,120,255,0.25) 20%,
    rgba(89,213,224,0.1) 40%,
    transparent 65%);
  animation: pack-split-flash-anim 650ms ease-out forwards;
}
@keyframes pack-split-flash-anim {
  0%   { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* flash-open button effect */
.pack-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.55) 0%,
    rgba(180,120,255,0.2) 30%,
    transparent 60%);
  animation: pack-flash-overlay-anim 600ms ease-out forwards;
}
@keyframes pack-flash-overlay-anim {
  0%   { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.8); }
}

/* flash-burst envelope state (rapid frame cycle) */
.pack-envelope.flash-burst {
  animation: pack-flash-burst-shake 40ms ease-in-out infinite;
  filter: brightness(1.4) drop-shadow(0 0 40px rgba(255,255,255,0.5)) !important;
}
@keyframes pack-flash-burst-shake {
  0%,100% { transform: perspective(800px) scale(1.03); }
  50%     { transform: perspective(800px) scale(1.06) rotateZ(0.5deg); }
}

/* pack idle wobble */
.pack-envelope.idle-wobble {
  animation: pack-idle-wobble 3s ease-in-out infinite;
}
@keyframes pack-idle-wobble {
  0%,100% { transform: perspective(800px) rotateY(0deg) rotateZ(0deg); }
  25%     { transform: perspective(800px) rotateY(2deg) rotateZ(-0.5deg); }
  75%     { transform: perspective(800px) rotateY(-2deg) rotateZ(0.5deg); }
}

/* --- pack cards reveal (enhanced) --- */
.pack-card-inner.revealed {
  transform: rotateY(180deg);
}

.pack-card-slot.rarity-gold .pack-card-inner.revealed {
  animation: pack-card-gold-glow-v2 1.6s ease;
}
.pack-card-slot.rarity-black .pack-card-inner.revealed {
  animation: pack-card-black-glow-v2 1.6s ease;
}
.pack-card-slot.rarity-neon .pack-card-inner.revealed {
  animation: pack-card-neon-glow-v2 1.6s ease;
}
@keyframes pack-card-gold-glow-v2 {
  0%   { box-shadow: none; filter: brightness(1); }
  25%  { box-shadow: 0 0 40px rgba(214,184,90,0.8), 0 0 80px rgba(214,184,90,0.3);
         filter: brightness(1.15); }
  100% { box-shadow: 0 0 12px rgba(214,184,90,0.2); filter: brightness(1); }
}
@keyframes pack-card-black-glow-v2 {
  0%   { box-shadow: none; filter: brightness(1); }
  25%  { box-shadow: 0 0 42px rgba(225,232,238,0.6), 0 0 80px rgba(180,200,220,0.25);
         filter: brightness(1.2); }
  100% { box-shadow: 0 0 12px rgba(210,220,225,0.18); filter: brightness(1); }
}
@keyframes pack-card-neon-glow-v2 {
  0%   { box-shadow: none; filter: brightness(1); }
  25%  { box-shadow: 0 0 42px rgba(57,255,150,0.7), 0 0 80px rgba(57,255,150,0.28);
         filter: brightness(1.15); }
  100% { box-shadow: 0 0 12px rgba(57,255,150,0.17); filter: brightness(1); }
}

/* card reveal entrance — stagger each card */
.pack-card-slot {
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}
.pack-card-slot.card-entered {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 350ms cubic-bezier(0.22,0.61,0.36,1),
              transform 350ms cubic-bezier(0.22,0.61,0.36,1);
}

/* card flip enhanced bounce */
.pack-card-inner {
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* flash open button */
.pack-flash-open-btn {
  display: block;
  margin: 16px auto 0;
  padding: 8px 20px;
  border: 1px solid rgba(255, 214, 102, 0.4);
  border-radius: 6px;
  background: rgba(255, 214, 102, 0.06);
  color: #ffd666;
  font: 800 8px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 200ms ease, box-shadow 200ms ease, transform 120ms ease;
}
.pack-flash-open-btn:hover {
  background: rgba(255, 214, 102, 0.12);
  box-shadow: 0 0 18px rgba(255, 214, 102, 0.2);
}
.pack-flash-open-btn:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .pack-backdrop .pack-aurora,
  .pack-backdrop .pack-spotlight,
  .pack-backdrop .pack-grid-floor,
  .pack-envelope.idle-wobble,
  .pack-envelope.tear-critical,
  .pack-hint-text {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== END PACK REDESIGN v2 — Elite Court Real Image Pack ===== */

/* ===== PACK MINI BUTTON ===== */
.pack-mini-btn {
  position: absolute;
  top: 66px;
  right: 18px;
  z-index: 45;
  width: 74px;
  height: 104px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pack-mini-btn::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(89, 213, 224, 0.28);
  border-radius: 16px;
  animation: pack-mini-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes pack-mini-pulse {
  0%   { transform: scale(0.9); opacity: 0.9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.pack-mini-btn:hover {
  transform: translateY(-3px) scale(1.06);
}

.pack-mini-art {
  position: absolute;
  inset: 0;
  background: url("assets/pack-preview.webp") center/cover no-repeat;
  border-radius: 6px;
  opacity: 1;
  animation: pack-mini-bob 2.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

@keyframes pack-mini-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}

.pack-mini-gloss {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: url("assets/pack-preview.webp");
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-image: url("assets/pack-preview.webp");
  mask-size: cover;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 60%),
    linear-gradient(115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.22) 46%,
      rgba(255, 255, 255, 0.05) 54%,
      transparent 66%);
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, -70% 0;
}

.pack-mini-btn:hover .pack-mini-gloss {
  opacity: 1;
  animation: pack-mini-gloss-sweep 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes pack-mini-gloss-sweep {
  0%   { background-position: 0 0, -70% 0; }
  100% { background-position: 0 0, 170% 0; }
}

.pack-mini-label {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  padding: 3px 8px;
  border: 1px solid rgba(89, 213, 224, 0.35);
  border-radius: 20px;
  background: rgba(8, 10, 16, 0.78);
  color: #a9e1ed;
  font: 800 7px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 1.5px;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 600px) {
  .pack-mini-btn {
    isolation: isolate;
    border: 1px solid rgba(89, 213, 224, 0.24);
    border-radius: 10px;
    background:
      radial-gradient(circle at 50% 34%, rgba(38, 31, 72, 0.72), transparent 62%),
      #05060a;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.58),
      inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  }

  .pack-mini-art {
    border-radius: 9px;
    background-color: #05060a;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pack-mini-btn::before,
  .pack-mini-art,
  .pack-mini-gloss {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== END PACK MINI BUTTON ===== */

/* ===== PACK CARD REVEAL v3 ===== */

/* --- 卡背纹理重新设计 --- */
.pack-card-face-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 11px,
      rgba(89, 213, 224, 0.03) 11px,
      rgba(89, 213, 224, 0.03) 12px
    ),
    radial-gradient(ellipse 80% 70% at 50% 45%,
      rgba(110, 89, 181, 0.15) 0%,
      rgba(18, 20, 36, 0.5) 60%,
      #12141f 100%),
    linear-gradient(175deg, #171a2e 0%, #0f1120 50%, #0c0e1a 100%);
  border: 1px solid rgba(89, 213, 224, 0.12);
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

/* 卡背顶部与底部装饰线 */
.pack-card-face-front::before,
.pack-card-face-front::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(89, 213, 224, 0.2) 20%,
    rgba(180, 120, 255, 0.15) 50%,
    rgba(89, 213, 224, 0.2) 80%,
    transparent 100%);
  box-shadow: 0 0 6px rgba(89, 213, 224, 0.1);
}

.pack-card-face-front::before { top: 10px; }
.pack-card-face-front::after { bottom: 10px; }

/* CB 升级为品牌标志，副标题保持稀有度悬念。 */
.pack-card-face-front strong {
  color: transparent;
  font: 900 32px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 6px;
  background: linear-gradient(180deg,
    rgba(142, 214, 230, 0.45) 0%,
    rgba(180, 120, 255, 0.3) 50%,
    rgba(142, 214, 230, 0.2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(89, 213, 224, 0.15));
  position: relative;
  z-index: 1;
}

.pack-card-face-front .pk-subtitle {
  display: block;
  margin-top: 6px;
  font: 700 5px/1 "Orbitron", ui-sans-serif, sans-serif;
  letter-spacing: 3px;
  color: rgba(142, 214, 230, 0.18);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* --- 稀有度预告：只用边框与光感，不提前泄露名称 --- */
.pack-card-slot.rarity-base .pack-card-face-front {
  border-color: rgba(160, 165, 171, 0.15);
}

.pack-card-slot.rarity-silver .pack-card-face-front {
  border-color: rgba(200, 206, 209, 0.25);
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.12),
    0 0 8px rgba(200, 206, 209, 0.08);
}

.pack-card-slot.rarity-rwb .pack-card-face-front {
  border-color: rgba(232, 93, 117, 0.3);
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.12),
    0 0 10px rgba(232, 93, 117, 0.1);
}

.pack-card-slot.rarity-gold .pack-card-face-front {
  border-color: rgba(214, 184, 90, 0.35);
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.12),
    0 0 12px rgba(214, 184, 90, 0.12);
  animation: pk-glow-gold 2.5s ease-in-out infinite alternate;
}

@keyframes pk-glow-gold {
  from { box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 10px rgba(214,184,90,0.08); }
  to { box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 22px rgba(214,184,90,0.22); }
}

.pack-card-slot.rarity-neon .pack-card-face-front {
  border-color: rgba(57, 255, 150, 0.3);
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.12),
    0 0 14px rgba(57, 255, 150, 0.12);
  animation: pk-glow-neon 2.2s ease-in-out infinite alternate;
}

@keyframes pk-glow-neon {
  from { box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 8px rgba(57,255,150,0.06); }
  to { box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 28px rgba(57,255,150,0.24); }
}

.pack-card-slot.rarity-black .pack-card-face-front {
  border-color: rgba(225, 232, 238, 0.35);
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.12),
    0 0 16px rgba(225, 232, 238, 0.12);
  animation: pk-glow-black 2s ease-in-out infinite alternate;
}

@keyframes pk-glow-black {
  from {
    box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 10px rgba(225,232,238,0.08);
    border-color: rgba(225,232,238,0.3);
  }
  to {
    box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 30px rgba(225,232,238,0.28);
    border-color: rgba(180,120,255,0.4);
  }
}

.pack-card-slot.rarity-gold .pack-card-face-front::before,
.pack-card-slot.rarity-neon .pack-card-face-front::before,
.pack-card-slot.rarity-black .pack-card-face-front::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%);
  animation: pk-line-shimmer 3s linear infinite;
}

@keyframes pk-line-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* --- 入场：从舞台下方弹起，并形成轻微扇面 --- */
.pack-card-slot {
  --pack-fan-rotate: 0deg;
  opacity: 0;
  transform: translateY(80px) scale(0.7) rotateZ(var(--pack-fan-rotate));
  filter: blur(4px);
  will-change: transform;
}

.pack-card-slot.card-entered {
  opacity: 1;
  transform: translateY(0) scale(1) rotateZ(var(--pack-fan-rotate));
  filter: blur(0);
  transition:
    opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 350ms ease;
}

.pack-card-slot:nth-child(1) { --pack-fan-rotate: -3deg; }
.pack-card-slot:nth-child(2) { --pack-fan-rotate: -1.5deg; }
.pack-card-slot:nth-child(3) { --pack-fan-rotate: 0deg; }
.pack-card-slot:nth-child(4) { --pack-fan-rotate: 1.5deg; }
.pack-card-slot:nth-child(5) { --pack-fan-rotate: 3deg; }

/* --- 翻转：弹性转场，点击瞬间给出一次能量闪白 --- */
.pack-card-inner {
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pack-card-inner.revealed {
  animation: none;
  transform: rotateY(180deg);
}

.pack-card-slot.flipping {
  animation: pk-flip-flash 600ms ease-out;
}

@keyframes pk-flip-flash {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.6); }
  60% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

.pack-card-slot.rarity-gold .pack-card-inner.revealed { animation: pk-reveal-gold 1.2s ease; }
.pack-card-slot.rarity-neon .pack-card-inner.revealed { animation: pk-reveal-neon 1.2s ease; }
.pack-card-slot.rarity-black .pack-card-inner.revealed { animation: pk-reveal-black 1.5s ease; }

@keyframes pk-reveal-gold {
  0% { box-shadow: none; }
  20% { box-shadow: 0 0 50px rgba(214,184,90,0.9), 0 0 100px rgba(214,184,90,0.3); }
  50% { box-shadow: 0 0 30px rgba(214,184,90,0.5); }
  100% { box-shadow: 0 0 8px rgba(214,184,90,0.15); }
}

@keyframes pk-reveal-neon {
  0% { box-shadow: none; }
  20% { box-shadow: 0 0 50px rgba(57,255,150,0.85), 0 0 100px rgba(57,255,150,0.28); }
  50% { box-shadow: 0 0 25px rgba(57,255,150,0.4); }
  100% { box-shadow: 0 0 8px rgba(57,255,150,0.12); }
}

@keyframes pk-reveal-black {
  0% { box-shadow: none; }
  15% { box-shadow: 0 0 60px rgba(225,232,238,0.8), 0 0 120px rgba(180,120,255,0.3); }
  40% { box-shadow: 0 0 35px rgba(225,232,238,0.4), 0 0 70px rgba(180,120,255,0.15); }
  65% { box-shadow: 0 0 50px rgba(225,232,238,0.5); }
  100% { box-shadow: 0 0 10px rgba(225,232,238,0.12); }
}

/* --- 悬停：整体卡槽上浮，确保卡面、稀有度光边与焦点框同步形变 --- */
.pack-card-slot:not(.flipping) .pack-card-inner:not(.revealed) {
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) and (pointer: fine) {
  .pack-card-slot.card-entered:hover {
    z-index: 10;
    transform: translateY(-8px) scale(1.035) rotateZ(var(--pack-fan-rotate));
  }
}

.pack-card-slot:hover .pack-card-face-front {
  box-shadow:
    inset 0 0 30px rgba(110, 89, 181, 0.2),
    0 8px 30px rgba(0, 0, 0, 0.4);
}

.pack-card-slot.rarity-gold:hover .pack-card-face-front {
  box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 30px rgba(214,184,90,0.25);
}

.pack-card-slot.rarity-neon:hover .pack-card-face-front {
  box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 30px rgba(57,255,150,0.2);
}

.pack-card-slot.rarity-black:hover .pack-card-face-front {
  box-shadow: inset 0 0 30px rgba(110,89,181,0.12), 0 0 30px rgba(225,232,238,0.2);
}

/* DONE 在完成五张翻转后作为阶段收束出现。 */
.pack-close-btn.visible {
  animation: pk-done-enter 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pk-done-enter {
  0% { opacity: 0; transform: translateY(16px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pack-card-slot,
  .pack-card-slot.card-entered,
  .pack-card-slot.rarity-gold .pack-card-face-front,
  .pack-card-slot.rarity-neon .pack-card-face-front,
  .pack-card-slot.rarity-black .pack-card-face-front,
  .pack-card-slot.flipping,
  .pack-card-slot.rarity-gold .pack-card-inner.revealed,
  .pack-card-slot.rarity-neon .pack-card-inner.revealed,
  .pack-card-slot.rarity-black .pack-card-inner.revealed,
  .pack-close-btn.visible {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== END PACK CARD REVEAL v3 ===== */

/* Pack reveal v4 — portrait-first rare hits and readable collection progress. */
.pack-exit-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  background: #101320cc;
  color: #eef3ff;
  font: 28px/1 sans-serif;
  cursor: pointer;
}

.pack-reveal-status {
  color: #d6c7a3;
  font: 600 11px/1.6 monospace;
  letter-spacing: 0.22em;
  margin: 0 0 24px;
}

.pack-reveal-status[hidden] { display: none; }
.pack-cards { padding-bottom: 78px; }
.pack-card-slot { --reveal-accent: #bbcddd; }
.pack-card-slot.rarity-neon { --reveal-accent: #59e0c1; }
.pack-card-slot.rarity-gold { --reveal-accent: #f4c96b; }
.pack-card-slot.rarity-black { --reveal-accent: #c6a2ff; }

.pack-card-caption {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: 100%;
  display: grid;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms 320ms ease, transform 300ms 320ms ease;
  pointer-events: none;
}

.pack-card-caption span {
  color: var(--reveal-accent);
  font: 600 9px/1.4 monospace;
  letter-spacing: 0.18em;
}

.pack-card-caption strong {
  color: #edf0f7;
  font: 500 11px/1.5 sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-revealed .pack-card-caption { opacity: 1; transform: translateY(0); }
.pack-card-face-back { overflow: hidden; }
.pack-card-glint {
  position: absolute;
  inset: -30% -60%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 42%, #ffffff50 49%, #ffffff10 53%, transparent 60%);
  transform: translateX(-65%);
}

.is-revealed .pack-card-glint { animation: pack-reveal-glint 950ms 320ms ease-out both; }
@keyframes pack-reveal-glint {
  0% { opacity: 0; transform: translateX(-65%); }
  25% { opacity: 0.65; }
  100% { opacity: 0; transform: translateX(65%); }
}

@media (max-width: 700px) {
  .pack-cards { justify-content: flex-start; scroll-snap-type: x mandatory; padding-inline: 20px; }
  .pack-card-slot { scroll-snap-align: center; }
  .pack-reveal-status { font-size: 10px; letter-spacing: 0.13em; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-card-glint, .pack-split-flash, .pack-flash-overlay, .pack-rarity-flash { display: none !important; }
  .pack-card-inner, .pack-card-caption { transition: none !important; animation: none !important; }
}

@media (max-width: 700px) {
  .zoom-controls,
  .rotate-controls {
    grid-template-columns: 44px 44px;
    height: 44px;
  }

  .zoom-btn,
  .rotate-btn,
  .tool-btn {
    width: 44px;
    height: 44px;
  }

  .tool-btn {
    min-width: 44px;
  }
}