/* MEOWSEUM visual system — golden reference: midnight archive, warm-gold display cases. */
:root {
  --bg-primary: #071633;
  --bg-panel: #0c1d43;
  --bg-panel-deep: #061127;
  --bg-soft: #f6f1e7;
  --text-primary: #f3dfb2;
  --text-dark: #1e1d22;
  --accent-gold: #d4af6a;
  --accent-gold-soft: #e7c98d;
  --accent-rare: #6ea8ff;
  --accent-epic: #ad78ff;
  --accent-legendary: #f0c35a;
  --radius-card: 18px;
  --radius-panel: 24px;
  --shadow-archive: 0 24px 64px rgba(0, 0, 0, .42);
  --shadow-gold: 0 0 28px rgba(224, 177, 82, .2);
}

html { background: #e8e0d3; }
body {
  min-width: 320px;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(110deg, #eee7dc 0%, #d7c6ad 52%, #eee7dc 100%);
  font-family: "Noto Sans TC", sans-serif;
}
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  opacity: .42;
  background-image: radial-gradient(rgba(99, 65, 31, .18) .6px, transparent .7px);
  background-size: 5px 5px;
  pointer-events: none;
}
.grain { opacity: .1; pointer-events: none; }
.app-shell {
  width: min(1510px, calc(100% - 24px));
  min-height: calc(100vh - 18px);
  margin: 9px auto;
  padding: 0 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(220, 177, 90, .56);
  border-radius: var(--radius-panel);
  background: linear-gradient(135deg, #0a1a39, #061127 66%);
  box-shadow: 0 18px 70px rgba(33, 25, 16, .36), inset 0 0 0 2px rgba(255,255,255,.025);
}
.app-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid rgba(212, 175, 106, .2);
  border-radius: 18px;
  pointer-events: none;
}
.topbar, .nav-tabs, .view, .storage-note { position: relative; z-index: 1; }

/* Header and archive navigation */
.topbar {
  min-height: 74px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(212, 175, 106, .35);
  background: linear-gradient(90deg, rgba(3, 12, 29, .7), rgba(12, 29, 67, .35));
}
.brand { color: var(--text-primary); gap: 12px; font-family: "Playfair Display", serif; letter-spacing: .06em; }
.brand-mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--accent-gold);
  border-radius: 50%;
  color: var(--accent-gold-soft);
  box-shadow: inset 0 0 0 3px rgba(212, 175, 106, .12), 0 0 18px rgba(212,175,106,.14);
}
.brand small, .stat-set small { color: rgba(243, 223, 178, .62); letter-spacing: .14em; }
.stat-set { gap: 23px; }
.stat-set > div { padding-left: 16px; border-left: 1px solid rgba(212,175,106,.26); }
.stat-set span { color: var(--accent-gold-soft); font-family: "DM Mono", monospace; }
.nav-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 47px;
  border-bottom: 1px solid rgba(212,175,106,.25);
  background: rgba(5, 15, 34, .76);
}
.nav-tab {
  position: relative;
  min-width: 126px;
  padding: 13px 20px;
  color: rgba(243,223,178,.74);
  background: transparent;
  border: 0;
  border-radius: 0;
  letter-spacing: .12em;
  font-size: 12px;
}
.nav-tab::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; background: transparent; }
.nav-tab:hover, .nav-tab.active { color: var(--accent-gold-soft); background: rgba(212,175,106,.06); }
.nav-tab.active::after { background: var(--accent-gold); box-shadow: 0 0 14px var(--accent-gold); }

/* Homepage composition */
#home {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4, 14, 33, .82) 0%, rgba(4, 14, 33, .35) 53%, rgba(4,14,33,.13) 100%),
    linear-gradient(0deg, rgba(5, 14, 32, .98) 0%, rgba(5,14,32,0) 43%),
    var(--home-background);
  background-size: cover;
  background-position: center;
}
#home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,22,51,.38), transparent 40%), radial-gradient(circle at 78% 16%, rgba(235,179,76,.16), transparent 23%);
  pointer-events: none;
}
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(290px, .48fr);
  gap: 40px;
  min-height: 300px;
  padding: 52px clamp(28px, 8vw, 115px) 45px;
  border-bottom: 1px solid rgba(212,175,106,.32);
}
.hero > div:first-child { max-width: 590px; }
.eyebrow { color: var(--accent-gold); font-family: "DM Mono", monospace; letter-spacing: .17em; font-size: 10px; }
.hero h1, .fusion-head h1, .collection-head h1 {
  margin: 9px 0 13px;
  color: #f5dfb7;
  font-family: "Playfair Display", "Noto Serif TC", serif;
  font-size: clamp(46px, 5vw, 77px);
  line-height: 1.03;
  letter-spacing: .015em;
  text-shadow: 0 5px 18px rgba(0,0,0,.32);
}
.hero h1 em { color: var(--accent-gold-soft); font-style: normal; }
.hero-copy { max-width: 510px; color: rgba(255,248,231,.78); line-height: 1.95; font-size: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero .primary-button, .fusion-button, .primary-button {
  min-width: 174px;
  color: #1d1b1c;
  border: 1px solid #f0cf91;
  background: linear-gradient(135deg, #f0cf91, #bf873d);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.23), 0 5px 16px rgba(0,0,0,.28);
}
.hero-secondary {
  min-width: 174px;
  color: var(--text-primary);
  border: 1px solid rgba(231,201,141,.75);
  background: rgba(3,13,31,.48);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero .primary-button:hover, .fusion-button:not(:disabled):hover, .primary-button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.hero-secondary:hover { border-color: var(--accent-gold-soft); background: rgba(212,175,106,.12); }
.hero-note {
  align-self: end;
  justify-self: end;
  width: min(300px, 100%);
  padding: 22px 25px;
  border: 1px solid rgba(220, 183, 109, .45);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(5,16,36,.76), rgba(10,30,67,.46));
  box-shadow: var(--shadow-archive), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.hero-note span { display:block; color: var(--accent-gold); font: 10px "DM Mono", monospace; letter-spacing: .17em; }
.hero-note strong { display:block; margin-top: 5px; color: #fff0ce; font: 700 25px "Playfair Display", serif; }
.hero-note p { color: rgba(255,245,224,.7); font-size: 12px; line-height: 1.6; }
.background-switcher { display: flex; gap: 7px; margin-top: 12px; }
.background-switcher button { flex: 1; padding: 7px 3px; color: rgba(243,223,178,.75); border: 1px solid rgba(212,175,106,.34); background: rgba(2,10,24,.4); font: 10px "DM Mono", monospace; }
.background-switcher button.active, .background-switcher button:hover { color: #1e1d22; background: var(--accent-gold-soft); border-color: var(--accent-gold-soft); }

/* Pack showcase */
.packs-section {
  position: relative;
  z-index: 2;
  margin: 0 clamp(12px, 5vw, 74px) 22px;
  padding: 24px clamp(15px, 3vw, 42px) 19px;
  transform: translateY(-1px);
  border: 1px solid rgba(212,175,106,.58);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  background:
    linear-gradient(135deg, rgba(8,27,61,.95), rgba(4,15,35,.95)),
    repeating-linear-gradient(45deg, transparent 0 15px, rgba(212,175,106,.025) 16px 17px);
  box-shadow: 0 13px 35px rgba(0,0,0,.27), inset 0 0 0 1px rgba(255,255,255,.035);
}
.packs-section::before, .recent-section::before, .fusion-preview::before {
  content: "✦";
  position: absolute;
  left: 50%; top: -10px;
  translate: -50% 0;
  color: var(--accent-gold);
  padding: 0 13px;
  background: #0a1b3d;
  font-size: 13px;
}
.section-heading { align-items: end; margin-bottom: 14px; }
.section-heading h2 { margin: 3px 0 0; color: var(--accent-gold-soft); font: 700 clamp(27px,3vw,39px) "Playfair Display", "Noto Serif TC", serif; }
.section-heading > p { color: rgba(243,223,178,.65); font-size: 12px; }
.demo-refresh { margin: -45px 0 13px auto; color: #ead3a4; border-color: rgba(212,175,106,.56); background: rgba(2,12,27,.5); }
.demo-refresh:hover { color: #1e1d22; background: var(--accent-gold-soft); }
.pack-grid { display: grid; grid-template-columns: repeat(5, minmax(116px, 1fr)); gap: clamp(9px, 2vw, 25px); align-items: end; }
.pack {
  position: relative;
  min-height: 250px;
  padding: 9px 8px 12px;
  overflow: visible;
  color: var(--accent-gold-soft);
  border: 1px solid rgba(212,175,106,.33);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(12,38,82,.35), rgba(1,10,25,.58));
  box-shadow: inset 0 0 20px rgba(0,0,0,.2);
}
.pack::before { content:""; position:absolute; inset: 13px; border: 1px solid rgba(212,175,106,.12); border-radius: 9px; pointer-events:none; }
.pack img { position: relative; z-index:1; display:block; width: min(148px, 82%); height: 190px; margin: 5px auto 3px; object-fit: contain; filter: drop-shadow(0 14px 12px rgba(0,0,0,.5)); transition: transform .32s ease, filter .32s ease; }
.pack-letter { position:absolute; z-index:2; top: 13px; left: 14px; color: rgba(247,225,177,.9); font: 700 23px "Playfair Display", serif; }
.pack-seal { position:absolute; z-index:2; top: 13px; right: 12px; color:#1d1b1b; padding: 4px 5px; background: var(--accent-gold-soft); font: 8px "DM Mono", monospace; letter-spacing:.06em; }
.pack small { position:relative; z-index:1; display:block; color: rgba(242,218,165,.7); font: 9px "DM Mono", monospace; letter-spacing:.11em; }
.pack:hover:not(:disabled) { border-color: var(--accent-gold-soft); background: linear-gradient(180deg, rgba(38,71,127,.46), rgba(3,15,34,.72)); box-shadow: var(--shadow-gold), inset 0 0 20px rgba(223,175,82,.08); transform: translateY(-7px); }
.pack:hover:not(:disabled) img { transform: translateY(-7px) scale(1.035); filter: drop-shadow(0 19px 15px rgba(0,0,0,.55)) drop-shadow(0 0 11px rgba(220,177,90,.25)); }
.pack.opened { opacity: .5; filter: grayscale(.36); }
.pack.opened .pack-seal { color: #f7ead2; background: #3d536e; }

/* Recent display case and the shared thin rarity edge. */
.recent-section {
  position: relative;
  margin: 28px clamp(12px, 5vw, 74px) 12px;
  padding: 33px clamp(18px, 3vw, 42px) 28px;
  border: 1px solid rgba(220,183,109,.82);
  border-radius: var(--radius-panel);
  color: var(--text-dark);
  background: linear-gradient(116deg, rgba(255,251,241,.98), rgba(240,226,201,.97));
  box-shadow: 0 14px 35px rgba(0,0,0,.26), inset 0 0 0 4px rgba(255,255,255,.5);
}
.recent-section::before { background: #f5eddf; }
.recent-section .eyebrow { color: #94652d; }
.recent-section .section-heading h2 { color: #211c19; }
.text-button { color: #9a642a; border-bottom-color: rgba(154,100,42,.45); }
.text-button:hover { color: #5f3a16; }
.recent-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 23px); }
.card {
  --rarity-border: #d9bd7c;
  overflow: hidden;
  border: 1px solid var(--rarity-border) !important;
  border-radius: 12px;
  background: #f7f0e4;
  box-shadow: 0 9px 18px rgba(35,25,16,.18), inset 0 0 0 1px rgba(255,255,255,.54);
}
.card.rare, .pull-card.rare { --rarity-border: var(--accent-rare); }
.card.epic, .pull-card.epic { --rarity-border: var(--accent-epic); }
.card.legendary, .pull-card.legendary { --rarity-border: var(--accent-legendary); }
.card.rare { box-shadow: 0 9px 19px rgba(37,115,230,.19), 0 0 12px rgba(110,168,255,.16); }
.card.epic { box-shadow: 0 9px 20px rgba(135,70,224,.2), 0 0 14px rgba(173,120,255,.22); }
.card.legendary { box-shadow: 0 9px 21px rgba(200,133,21,.26), 0 0 17px rgba(240,195,90,.3); }
.card-art { overflow: hidden; aspect-ratio: 2 / 3; height: auto !important; background: #081630; border-bottom: 1px solid var(--rarity-border); }
.card-art .cat-art, .card-art .undiscovered-art { width:100%; height:100%; object-fit: contain !important; object-position: center; display:block; }
.rarity-frame, .pull-rarity-frame { display: none !important; }
.card-info { color: #25201e; background: #f7f0e4; }
.card-info .rarity { color: #967342; }
.card-name { font-family: "Playfair Display", "Noto Serif TC", serif; }
.card-meta { color: #6c5b4b; }
.card .encounter.new { color: #396b52; }
.card .encounter.repeat { color: #8b6338; }
.recent-cards .card { min-width: 0; }
.recent-cards .card-info { min-height: 105px; padding: 11px 12px 13px; }
.recent-cards .card-name { margin-top: 5px; font-size: 18px; }
.recent-cards .card-meta { display:block; margin-top: 6px; line-height:1.55; }
.empty-recent { grid-column: 1 / -1; color: #66523d; }

/* Archive collection */
#collection { padding: clamp(26px,4vw,58px); background: linear-gradient(135deg, rgba(8,27,61,.96), rgba(4,15,35,.99)); }
.collection-head { padding-bottom: 24px; border-bottom: 1px solid rgba(212,175,106,.32); }
.collection-head h1 { font-size: clamp(42px,5vw,70px); }
.collection-head > div > p:not(.eyebrow) { color: rgba(243,223,178,.72); }
.progress-ring { border-color: var(--accent-gold); color: var(--accent-gold-soft); box-shadow: inset 0 0 20px rgba(212,175,106,.07); }
.series-progress-card, .collection-tools { border-color: rgba(212,175,106,.32); background: rgba(2,13,32,.42); }
.series-progress-card span, .series-progress-card strong { color: var(--text-primary); }
.series-progress-card i, .series-progress-card b { background-color: var(--accent-gold); }
.filters .filter, .collection-tools select, .search { color: var(--text-primary); border-color: rgba(212,175,106,.42); background: rgba(3,14,33,.68); }
.filters .filter.active, .filters .filter:hover { color: #1e1d22; background: var(--accent-gold-soft); }
.collection-grid { gap: 18px; }
.collection-grid .card { background: #f6f0e4; }
.collection-grid .card.locked { border-color: rgba(212,175,106,.3) !important; background: #111f3a; box-shadow:none; }
.collection-grid .card.locked .card-info { color: #ecd8a9; background:#111f3a; }
.collection-grid .card.locked .rarity { color:#c89e5e; }

/* Full-screen pull stage: this must never scroll or advance by a click. */
.opening-modal { z-index: 80; overflow: hidden !important; padding: 0; background: rgba(2, 8, 22, .94); }
.opening-stage {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(18px, 3vh, 35px) 20px 13px !important;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(33,73,133,.34), transparent 30%),
    linear-gradient(rgba(4,15,35,.82), rgba(3,12,28,.96)),
    url("assets/optimization/backgrounds/home_bg_03_indigo_museum.png") center / cover;
}
.opening-stage::before { content:""; position:absolute; inset: 10px; border: 1px solid rgba(212,175,106,.54); pointer-events:none; }
.opening-stage::after { content:""; position:absolute; inset: 25px; border: 1px solid rgba(212,175,106,.14); pointer-events:none; }
.opening-stage > * { position: relative; z-index: 1; }
.opening-close { top: 27px; right: 32px; width: 52px; height:52px; color: var(--accent-gold-soft); border: 1px solid var(--accent-gold); border-radius:50%; background:rgba(2,12,29,.6); }
.opening-progress { margin-top: 6px; color: var(--accent-gold-soft); border-color: rgba(212,175,106,.48); }
.opening-progress span { color: var(--accent-gold-soft); }
.opening-stage h2 { margin: 8px 0 4px; color: #f5dfb7; font: 700 clamp(31px,4vw,58px) "Playfair Display", "Noto Serif TC", serif; letter-spacing:.03em; }
.opening-copy { margin: 0 0 9px; color: rgba(245,229,197,.78); font-size: 13px; text-align:center; }
.tear-pack { width: min(280px, 65vw); height: min(420px, 54dvh); min-height: 280px; margin: auto 0 14px; border: 0; background: transparent url("assets/optimization/packs/pack_selected_v2.png") center / contain no-repeat; filter: drop-shadow(0 18px 24px rgba(0,0,0,.52)); }
.tear-pack:hover { filter: drop-shadow(0 19px 25px rgba(0,0,0,.58)) drop-shadow(0 0 14px rgba(224,177,82,.4)); }
.tear-pack.tearing { animation: archiveTear .76s cubic-bezier(.35,.02,.2,1) forwards; }
@keyframes archiveTear { 0% { transform: rotate(0) scale(1); } 22% { transform: rotate(-3deg) scale(1.035); } 46% { transform: rotate(4deg) scale(1.05); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } 100% { transform: translateY(38px) rotate(8deg) scale(.86); opacity:0; clip-path: polygon(0 0,100% 0,82% 48%,100% 100%,0 100%,19% 49%); } }
.card-stack { flex: 1 1 auto; width: min(560px, 92vw); height: min(660px, calc(100dvh - 170px)); min-height: 0 !important; margin: 0; overflow: visible; }
.card-stack::before, .card-stack::after { width: min(304px, 72vw); aspect-ratio: 2 / 3; background: url("assets/optimization/card_back/card_back_selected_v2.png") center / contain no-repeat; }
.card-stack::before { opacity:.72; transform: rotate(7deg); translate: -42% 3px; }
.card-stack::after { content:""; position:absolute; inset: 20px auto auto 50%; translate:-57% 0; width:min(304px,72vw); aspect-ratio:2/3; opacity:.48; transform:rotate(-7deg); background:url("assets/optimization/card_back/card_back_selected_v2.png") center / contain no-repeat; pointer-events:none; }
.pull-card {
  --rarity-border: #d9bd7c;
  width: clamp(250px, 25vw, 340px);
  max-width: 82vw;
  overflow: hidden;
  border: 1px solid var(--rarity-border) !important;
  border-radius: 15px;
  background: #f6f0e4;
  box-shadow: 0 17px 33px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.35) inset;
}
.pull-art { height:auto !important; aspect-ratio: 2 / 3; overflow:hidden; background:#081630; border-bottom:1px solid var(--rarity-border); }
.pull-art .pull-cat-art { width:100%; height:100%; object-fit:contain !important; object-position:center; display:block; }
.pull-info { padding: 10px 13px 11px; color: #26201d; background: #f6f0e4; }
.pull-info .rarity { color: #936f39; }
.pull-info h3 { margin:2px 0; font:700 clamp(20px,2vw,27px) "Playfair Display", "Noto Serif TC", serif; }
.pull-meta { margin:2px 0; color:#655441; font-size:11px; }
.pull-description { margin:6px 0; color:#4f463d; font-size:11px; line-height:1.55; }
.pull-tags { padding-top:7px; border-top:1px solid rgba(147,111,57,.26); color:#725c43; }
.pull-card.is-top::after { content:"向左或向右滑動"; top:12px; right:10px; color:var(--accent-gold-soft); border:1px solid rgba(212,175,106,.54); background:rgba(4,14,33,.76); }
.card-stack.rare-effect { filter: drop-shadow(0 0 14px rgba(110,168,255,.48)); }
.card-stack.epic-effect { filter: drop-shadow(0 0 20px rgba(173,120,255,.56)); }
.card-stack.legendary-effect { animation: legendPulse 1s ease-in-out infinite alternate; filter: drop-shadow(0 0 28px rgba(240,195,90,.78)); }

/* Cream archive dossier */
.detail-modal { z-index: 70; padding: 26px; overflow: auto; background: rgba(2,7,18,.86); backdrop-filter: blur(8px); }
.detail-panel {
  width: min(1280px, 94vw) !important;
  max-height: min(860px, 92vh) !important;
  overflow: auto !important;
  grid-template-columns: minmax(290px, 41%) minmax(0,1fr) !important;
  gap: clamp(28px, 5vw, 75px) !important;
  padding: clamp(26px,4vw,54px) !important;
  border: 1px solid #b78947;
  border-radius: var(--radius-panel);
  background: linear-gradient(120deg, #fffaf0, #eee0c9);
  box-shadow: 0 28px 80px rgba(0,0,0,.6), inset 0 0 0 5px rgba(255,255,255,.62), inset 0 0 0 7px rgba(166,112,48,.26);
}
.detail-card-wrap { max-width: 440px; }
.detail-card-wrap .card { border-color: var(--rarity-border) !important; }
.detail-card-wrap .card-info { padding: 13px 16px; }
.detail-close { z-index:2; width:52px; height:52px; right: 22px; top: 21px; color: #f6d591; border: 1px solid #bd8843; border-radius:50%; background:#101d36; box-shadow:0 3px 10px rgba(0,0,0,.35); }
.detail-copy { align-self:center; max-width: 600px; }
.detail-copy .eyebrow { color:#82582d; font-size:11px; }
.detail-copy h2 { color:#29211d; font-family:"Playfair Display", "Noto Serif TC", serif; }
.detail-rarity { color:#9b6a30; padding: 9px 0 19px; border-bottom:1px solid #bd8843; }
.detail-copy > p:not(.eyebrow) { color:#594b3e; line-height:2; }
.detail-copy dl { border-color: rgba(172,119,53,.64); }
.detail-copy dl div { padding: 13px 8px; border-bottom: 1px solid rgba(172,119,53,.25); }
.detail-copy dt { color:#906636; }
.detail-copy dd { color:#2e2823; font-family:"Playfair Display", "Noto Serif TC", serif; }
.detail-card-wrap.epic .card, .detail-card-wrap.legendary .card { animation-duration: 2s; }

/* Alchemy room and result reveal */
#fusion {
  min-height: 780px;
  padding: clamp(34px,5vw,72px) clamp(18px,8vw,130px) 42px;
  overflow:hidden;
  color:var(--text-primary);
  background:
    linear-gradient(90deg, rgba(3,13,30,.88) 0%, rgba(3,13,30,.46) 52%, rgba(3,13,30,.86) 100%),
    linear-gradient(0deg, rgba(4,14,32,.94), transparent 55%),
    url("assets/optimization/alchemy/alchemy_room_background.png") center / cover;
}
.fusion-head { max-width: 600px; margin-bottom: 35px; }
.fusion-head h1 { font-size: clamp(48px,5vw,74px); }
.fusion-head > p:not(.eyebrow) { color:rgba(249,232,195,.8); line-height:1.9; }
.fusion-board { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(13px,2vw,28px); }
.fusion-tier { min-height: 245px; padding: 27px clamp(17px,2.4vw,35px); color:var(--text-primary); border:1px solid rgba(212,175,106,.62); border-radius:18px; background:linear-gradient(140deg, rgba(7,25,57,.91), rgba(3,14,33,.88)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 14px 30px rgba(0,0,0,.24); }
.fusion-tier .rarity { color:var(--accent-gold-soft); }
.fusion-tier h2 { color:#f5dfb7; font:700 clamp(25px,2.4vw,36px) "Playfair Display", "Noto Serif TC", serif; }
.fusion-tier p, .material-count { color:rgba(247,225,183,.74); }
.material-count { border-color:rgba(212,175,106,.32); }
.material-count span { color:var(--accent-gold-soft); }
.fusion-button { width:100%; margin-top:14px; }
.fusion-button:disabled { color:rgba(242,218,165,.42); border-color:rgba(212,175,106,.2); background:rgba(5,15,34,.7); box-shadow:none; }
.fusion-preview { position:relative; margin-top:31px; min-height:248px; padding:25px 20px; text-align:center; border:1px solid rgba(212,175,106,.52); border-radius:19px; background:linear-gradient(rgba(5,20,48,.8),rgba(3,13,31,.9)); }
.fusion-preview::before { background:#081a3b; }
.fusion-preview h2 { margin:3px 0; color:var(--accent-gold-soft); font:700 28px "Playfair Display", "Noto Serif TC", serif; }
.fusion-preview > p:not(.eyebrow) { margin:0; color:rgba(246,225,187,.7); font-size:12px; }
.preview-card-back { width: 112px; aspect-ratio:2/3; margin:14px auto 0; background:url("assets/optimization/card_back/card_back_selected_v2.png") center / contain no-repeat; filter:drop-shadow(0 12px 16px rgba(0,0,0,.44)); }
.fusion-note { color:rgba(243,223,178,.64); }
.fusion-reveal { z-index:85; overflow:hidden; background:rgba(2,8,20,.9); }
.fusion-reveal-inner { width:min(730px,94vw); min-height:min(760px,94dvh); overflow:hidden; border:1px solid rgba(212,175,106,.72); border-radius:20px; background:linear-gradient(rgba(4,16,36,.74),rgba(4,15,34,.89)),url("assets/optimization/alchemy/alchemy_room_background.png") center/cover; box-shadow:0 25px 80px rgba(0,0,0,.64), inset 0 0 0 3px rgba(255,255,255,.06); }
.fusion-reveal-inner>button:first-child { right:20px; top:17px; width:43px; height:43px; color:var(--accent-gold-soft); border:1px solid var(--accent-gold); border-radius:50%; background:rgba(3,14,33,.58); }
.fusion-reveal-inner h2 { color:#f6dfaf; font-family:"Playfair Display", "Noto Serif TC", serif; }
.fusion-reveal-inner > p { color:rgba(246,225,187,.8); }
.fusion-back { border:1px solid var(--accent-gold); border-radius:12px; box-shadow:0 17px 24px rgba(0,0,0,.45),0 0 30px rgba(224,177,82,.18); }
.fusion-reveal.flipping .fusion-back { animation: fusionBackFlip .33s ease-in both; }
.fusion-reveal.revealed #fusionResult .card { animation: fusionReveal .65s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fusionBackFlip { to { opacity:0; transform:rotateY(90deg) scale(.9); } }
@keyframes fusionReveal { from { opacity:0; transform:rotateY(90deg) scale(.82); } to { opacity:1; transform:rotateY(0) scale(1); } }

.storage-note { color: rgba(243,223,178,.58); }

@media (max-width: 900px) {
  .app-shell { width: min(100% - 12px, 1510px); padding: 0 11px 16px; border-radius: 17px; }
  .hero { grid-template-columns: 1fr; min-height: 480px; padding: 45px 8vw 30px; }
  .hero-note { justify-self:start; }
  .pack-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .recent-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fusion-board { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .topbar { min-height:64px; padding:0 8px; }
  .brand { font-size:17px; }
  .brand-mark { width:37px; height:37px; }
  .stat-set { gap:7px; font-size:10px; }
  .stat-set > div { padding-left:7px; }
  .stat-set small { display:none; }
  .nav-tabs { justify-content:stretch; }
  .nav-tab { min-width:0; flex:1; padding:12px 4px; font-size:11px; }
  .hero { min-height:500px; padding:37px 25px 24px; background:linear-gradient(0deg,rgba(4,14,33,.05),transparent); }
  .hero h1 { font-size:48px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-actions button { width:100%; }
  .hero-note { width:100%; padding:16px 18px; }
  .packs-section, .recent-section { margin-inline: 0; border-radius:17px; }
  .packs-section { padding:25px 13px 15px; }
  .section-heading { align-items:start; gap:10px; }
  .section-heading h2 { font-size:29px; }
  .demo-refresh { margin: 0 0 12px; }
  .pack-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .pack { min-height:218px; }
  .pack img { height:165px; }
  .pack:last-child { grid-column:1 / -1; width:calc(50% - 5px); justify-self:center; }
  .recent-section { padding:30px 14px 18px; }
  .recent-cards { grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; }
  .recent-cards .card-info { min-height:101px; padding:9px; }
  .recent-cards .card-name { font-size:16px; }
  #collection, #fusion { padding:29px 16px; }
  .collection-tools { padding:11px; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .opening-stage { padding:16px 12px 7px !important; }
  .opening-close { top:17px; right:17px; width:42px; height:42px; }
  .opening-progress { margin-top:0; }
  .opening-stage h2 { margin:5px 38px 2px; font-size:29px; text-align:center; }
  .opening-copy { max-width:310px; font-size:11px; }
  .card-stack { width:100%; height:calc(100dvh - 144px); }
  .pull-card { width:min(254px,75vw); }
  .pull-info { padding:7px 10px 8px; }
  .pull-info h3 { font-size:21px; }
  .pull-description { margin:4px 0; font-size:10px; line-height:1.42; }
  .pull-tags { padding-top:5px; font-size:8px; }
  .detail-modal { padding:12px; }
  .detail-panel { grid-template-columns:1fr !important; max-height:94vh !important; padding:42px 21px 25px !important; }
  .detail-card-wrap { max-width:280px; }
  .detail-copy { text-align:center; }
  .detail-copy h2 { font-size:38px; }
  .detail-copy dl { text-align:left; }
  .detail-close { top:10px; right:10px; width:42px; height:42px; }
  .fusion-head h1 { font-size:51px; }
  .fusion-tier { min-height:0; }
  .fusion-reveal { padding:11px; }
  .fusion-reveal-inner { min-height:0; padding:35px 16px 22px; }
  .fusion-back { width:220px; }
}

/* Round-three layout corrections: the artwork leads, controls recede. */
@media (min-width: 901px) {
  .app-shell { width: min(1320px, calc(100vw - 64px)); max-width:none; }
  .hero { min-height: 352px; grid-template-columns: 45% 55%; padding-inline: clamp(34px, 6vw, 82px); background: linear-gradient(90deg, #071633 0%, #071633 42%, rgba(7,22,51,.76) 62%, rgba(7,22,51,.18) 100%); }
  .hero > div:first-child { position:relative; z-index:1; }
  .hero-art { position:absolute; z-index:0; inset:0 0 0 auto; width:58%; background:url("assets/visuals/meowseum-hero-archive-v1.png") right center / cover no-repeat; }
  .hero-note { position:relative; z-index:1; align-self:end; justify-self:end; }
  .pack-grid { gap: clamp(18px, 3vw, 38px); }
  .pack { min-height: 300px; padding: 4px 0 0; border-color: transparent; background: transparent; box-shadow:none; }
  .pack::before { display:none; }
  .pack img { width:min(178px, 94%); height:242px; margin:0 auto 7px; }
  .pack-letter { top:auto; bottom:27px; left:50%; translate:-50% 0; padding:3px 8px; color:#f0d59f; border:1px solid rgba(212,175,106,.42); border-radius:99px; background:rgba(4,14,33,.78); font-size:12px; letter-spacing:.14em; }
  .pack-seal { top:14px; right:2px; }
  .pack small { text-align:center; }
  .pack:hover:not(:disabled) { border-color:transparent; background:transparent; box-shadow:none; }
  .recent-cards { gap:clamp(17px, 2.2vw, 30px); }
  .recent-cards .card-info { min-height:114px; }
  .collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:23px; }
  .detail-panel { grid-template-columns:minmax(380px,46%) minmax(0,1fr) !important; }
  .detail-card-wrap { max-width:500px; }
}

/* Remove the inherited circular decoration and give the opening stage a clear hierarchy. */
.opening-stage::before, .opening-stage::after {
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  top:10px !important;
  right:10px !important;
  bottom:10px !important;
  left:10px !important;
}
.opening-stage::after { top:25px !important; right:25px !important; bottom:25px !important; left:25px !important; }
.card-stack.is-complete::before, .card-stack.is-complete::after { display:none; }
.card-stack.is-complete { visibility:hidden; }
@media (min-width: 721px) {
  .opening-progress { position:absolute; top:24px; left:34px; z-index:3; }
  .opening-close { top:16px; right:30px; z-index:3; }
  #openingEyebrow { margin:9px 0 3px; font-size:9px; }
  .opening-stage h2 { margin:2px 0 3px; font-size:clamp(34px,3.7vw,54px); }
  .opening-copy { margin:0 0 5px; font-size:12px; }
  .card-stack { width:min(700px,94vw); height:auto; min-height:0 !important; }
  .card-stack::before, .card-stack::after { width:min(360px,calc((100dvh - 165px) / 2.04)); }
  .pull-card { width:clamp(238px,calc((100dvh - 165px) / 2.04),400px); }
  .pull-info { padding:8px 13px 9px; }
  .pull-info h3 { font-size:clamp(20px,2vw,25px); }
  .pull-description { margin:4px 0; font-size:11px; line-height:1.45; }
  .pull-tags { padding-top:5px; }
}

/* Collection as a cabinet of series, not a management dashboard. */
.series-progress { display:flex; gap:10px; padding:0 0 18px; overflow-x:auto; scrollbar-width:thin; }
.series-progress-card { flex:0 0 178px; min-height:0; padding:11px 13px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px 10px; border-radius:11px; }
.series-progress-card i { grid-column:1 / -1; }
.collection-filter-toggle { padding:0 0 16px; }
.collection-filter-toggle button { color:var(--accent-gold-soft); border:1px solid rgba(212,175,106,.44); background:rgba(2,13,32,.42); padding:9px 13px; font-size:12px; }
.collection-filter-toggle button:hover { background:rgba(212,175,106,.12); }
.collection-tools[hidden] { display:none; }
.collection-tools { justify-content:flex-start; padding:15px; border:1px solid rgba(212,175,106,.32); border-radius:13px; }
.status-filters { margin-left:0; }

/* Keep all three fusion tiers in the same desktop composition. */
#fusion { margin-inline:0 !important; width:auto; }
.fusion-board { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px; padding:0; }
.fusion-tier { min-width:0; min-height:205px; padding:22px 23px; }
.fusion-tier h2 { margin:1px 0 4px; font-size:30px; }
.fusion-tier p { margin:0; }
.material-count { margin:16px 0 13px; font-size:22px; }
.fusion-button { margin-top:auto; }
.fusion-preview { display:none; }
@media (min-width: 901px) { #fusion { padding-inline:clamp(32px,6vw,80px); } }
@media (max-width: 900px) { .fusion-board { grid-template-columns:1fr !important; } }

/* Final archive polish: no pack lettering, just the collectible itself. */
.pack-letter { display:none !important; }
.pack small { margin-top:4px; }

/* The rarity identifier is a fine edge. Legendary receives a slow full-card metallic sheen. */
.card { position:relative; isolation:isolate; }
.pull-card { position:absolute !important; isolation:isolate; }
.card-art::before { display:none !important; }
.card.legendary::after, .pull-card.legendary::before {
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(108deg, transparent 24%, rgba(245,202,102,.03) 39%, rgba(255,239,183,.5) 48%, rgba(224,166,60,.24) 53%, rgba(255,242,196,.08) 59%, transparent 74%);
  mix-blend-mode:screen;
  transform:translateX(-125%);
  animation:legendaryCardSheen 7.2s ease-in-out infinite;
}
.card.legendary { box-shadow:0 9px 21px rgba(200,133,21,.21), 0 0 16px rgba(240,195,90,.18); }
.pull-card.legendary { box-shadow:0 17px 33px rgba(0,0,0,.48), 0 0 17px rgba(240,195,90,.2); }
.card.epic::after, .pull-card.epic::before {
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(112deg, transparent 28%, rgba(204,163,255,.04) 42%, rgba(223,192,255,.34) 50%, rgba(155,109,255,.21) 55%, transparent 68%);
  mix-blend-mode:screen;
  transform:translateX(-125%);
  animation:epicCardSheen 8.4s ease-in-out infinite;
}
.card.epic { box-shadow:0 9px 20px rgba(135,70,224,.17), 0 0 13px rgba(173,120,255,.16); }
@keyframes legendaryCardSheen {
  0%, 58% { opacity:0; transform:translateX(-125%); }
  64% { opacity:.34; }
  79% { opacity:.5; transform:translateX(125%); }
  84%, 100% { opacity:0; transform:translateX(125%); }
}
@keyframes epicCardSheen {
  0%, 61% { opacity:0; transform:translateX(-125%); }
  68% { opacity:.25; }
  81% { opacity:.38; transform:translateX(125%); }
  87%, 100% { opacity:0; transform:translateX(125%); }
}

/* Detail cards stay readable: no permanent shaking, scaling, or modal movement. */
html { scrollbar-gutter:stable; }
body.detail-modal-open { overflow:hidden; }
.detail-modal { overflow:hidden !important; padding:24px; }
.detail-panel { width:min(1360px,94vw) !important; max-height:calc(100dvh - 48px) !important; overflow:hidden !important; }
.detail-card-wrap.legendary::before { animation:none !important; opacity:.32; transform:none !important; }
.detail-card-wrap.legendary .card, .detail-card-wrap.epic .card { animation:none !important; transform:none !important; }
.detail-card-wrap.legendary .card { box-shadow:0 14px 30px rgba(104,67,15,.23), 0 0 20px rgba(240,195,90,.2); }
.detail-copy { max-height:calc(100dvh - 150px); overflow-y:auto; overscroll-behavior:contain; padding:4px 17px 4px 3px; scrollbar-color:rgba(177,126,56,.58) transparent; }
.detail-copy::-webkit-scrollbar { width:7px; }
.detail-copy::-webkit-scrollbar-thumb { border-radius:99px; background:rgba(177,126,56,.5); }
.detail-copy::-webkit-scrollbar-track { background:transparent; }

/* A completed fusion opens a focused card-back stage instead of a small persistent preview. */
.fusion-reveal-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fusion-back { width:190px; aspect-ratio:2 / 3; }
#fusionResult { width:min(300px,82vw); }

@media (max-width: 760px) {
  .detail-modal { padding:10px; }
  .detail-panel { max-height:calc(100dvh - 20px) !important; overflow-y:auto !important; }
  .detail-copy { max-height:none; overflow:visible; padding-right:0; }
}

/* Home repair: hero art belongs only to the hero, never to the pack gallery behind it. */
#home {
  background:#071633 !important;
}
#home::before { display:none; }
.hero-art { background:var(--home-background) right center / cover no-repeat !important; }
.hero {
  overflow:hidden;
  isolation:isolate;
  min-height:340px;
}
@media (min-width:901px) {
  .hero { grid-template-columns:45% 55%; min-height:352px; }
  .hero h1 { font-size:clamp(43px,4.25vw,65px); line-height:1.08; }
  .hero-art { background-position:right center; }
}

/* The demo action remains available without competing with the pack heading. */
.packs-section { position:relative; }
.pack-heading-actions { display:flex; align-items:center; gap:13px; }
.packs-section .section-heading { padding-right:150px; margin-bottom:24px; }
#packHint { display:none; }
.demo-refresh {
  position:absolute;
  top:25px;
  right:27px;
  z-index:3;
  margin:0 !important;
  padding:7px 9px;
  font-size:9px;
}
.pack.opened {
  background:transparent !important;
  opacity:.48;
  filter:grayscale(.34);
  box-shadow:none !important;
}
.pack::before, .pack::after { display:none !important; }
.pack.opened::before, .pack.opened::after { display:none !important; }
.pack.opened .pack-seal { color:#f7ead2; background:#3d536e; }
@media (min-width:901px) {
  .pack { min-height:278px; }
  .pack img { height:226px; }
}
@media (max-width:620px) {
  .packs-section .section-heading { padding-right:0; }
  .pack-heading-actions { align-items:flex-end; flex-direction:column; gap:7px; }
  .demo-refresh { position:static; margin:0 0 13px !important; }
}

/* Never show a generated back/placeholder once the fifth card has left. */
.opening-modal.opening-complete .card-stack,
.opening-modal.opening-complete .card-stack::before,
.opening-modal.opening-complete .card-stack::after { display:none !important; }
#cardStack[hidden] { display:none !important; }
.legendary-effect, .legendary-effect .pull-card.is-top { animation:none !important; }
.legendary-effect .pull-card.is-top { translate:-50% 0; filter:drop-shadow(0 0 18px rgba(240,195,90,.42)); }

/* Preserve the whole hero illustration instead of cropping the cat at the panel edge. */
@media (min-width:901px) {
  .hero-art { background-size:auto 100% !important; background-position:right center !important; background-color:#071633; }
}

/* Exact visual corrections: keep the actual cards and packs, remove only fake placeholders. */
.card-stack::before,
.card-stack::after {
  content:none !important;
  display:none !important;
  background:none !important;
}
.opening-modal.opening-complete #cardStack,
#cardStack[hidden] { display:none !important; }

/* Each of the three hero scenes is a full-width background, never a right-hand crop. */
.hero {
  background-image:
    linear-gradient(90deg, rgba(4,15,35,.90) 0%, rgba(4,15,35,.76) 33%, rgba(4,15,35,.32) 61%, rgba(4,15,35,.12) 100%),
    var(--home-background) !important;
  background-position:center, center !important;
  background-size:cover, cover !important;
  background-repeat:no-repeat, no-repeat !important;
}
.hero-art { display:none !important; }
.hero > div:first-child,
.hero-note { position:relative; z-index:1; }

/* Product packs are isolated transparent assets: no black canvas or enclosing tile. */
.pack,
.pack.opened { background:transparent !important; border:0 !important; box-shadow:none !important; }
.pack img { background:transparent !important; object-fit:contain !important; filter:drop-shadow(0 15px 16px rgba(0,0,0,.34)); }
.tear-pack { background:transparent url("assets/visuals/meowseum-pack-clear-v1.png") center / contain no-repeat !important; }

/* The enlarged archive card receives one fine rarity edge around its entire card. */
.detail-card-wrap .card { border:2px solid var(--rarity-border) !important; border-radius:12px; overflow:hidden; }
.detail-card-wrap.common .card { --rarity-border:#d9bd7c; }
.detail-card-wrap.rare .card { --rarity-border:#6ea8ff; box-shadow:0 0 15px rgba(110,168,255,.24) !important; }
.detail-card-wrap.epic .card { --rarity-border:#a978ff; box-shadow:0 0 16px rgba(169,120,255,.24) !important; }
.detail-card-wrap.legendary .card { --rarity-border:#f0c35a; box-shadow:0 0 18px rgba(240,195,90,.30) !important; }

/* Epic retains its purple sheen but no longer breathes. Legendary alone breathes on reveal. */
.epic-effect .pull-card.is-top { animation:none !important; filter:drop-shadow(0 0 18px rgba(173,120,255,.46)); }
.legendary-effect .pull-card.is-top {
  animation:legendaryOpeningBreath 2.6s ease-in-out infinite !important;
  filter:drop-shadow(0 0 15px rgba(240,195,90,.38));
}
.pull-card.dragging { animation:none !important; }
@keyframes legendaryOpeningBreath {
  0%,100% { filter:drop-shadow(0 0 14px rgba(240,195,90,.34)); }
  50% { filter:drop-shadow(0 0 29px rgba(240,195,90,.66)); }
}

/* 08-12 acceptance corrections: compact mobile opening stage and collection-first follow-up. */
.pack:focus-visible,
.nav-tab:focus-visible,
.hero-actions button:focus-visible,
.text-button:focus-visible,
.detail-series-link:focus-visible {
  outline:2px solid var(--accent-gold-soft);
  outline-offset:3px;
}
.summary-highlight { max-width:250px; margin:0 auto 16px; }
.summary-highlight .eyebrow { margin-bottom:7px; }
.summary-highlight .card { box-shadow:0 14px 28px rgba(0,0,0,.28); }
.reveal-cards { grid-template-columns:repeat(4,minmax(0,1fr)); }
.reveal-cards .card { min-width:0; }
.collection-chapter-title { grid-column:1/-1; display:flex; align-items:end; justify-content:space-between; gap:15px; padding:4px 0 14px; color:var(--text-primary); border-bottom:1px solid rgba(212,175,106,.3); }
.collection-chapter-title .eyebrow { margin:0 0 4px; }
.collection-chapter-title h2 { margin:0; font:700 30px "Playfair Display", "Noto Serif TC", serif; }
.collection-chapter-title span { color:rgba(243,223,178,.72); font-size:12px; }
.series-progress-card { appearance:none; text-align:left; cursor:pointer; }
.series-progress-card.active { border-color:var(--accent-gold-soft); box-shadow:0 0 0 1px rgba(231,201,141,.35) inset, 0 8px 20px rgba(0,0,0,.18); }
.series-completion { margin:18px 0 9px; color:#7f5d31; font-size:13px; }
.detail-series-link { border:0; padding:0; color:#8c5e25; background:transparent; font:600 13px var(--sans); }
.detail-series-link:hover { color:#4e2e0e; }

@media (max-width:480px) {
  .opening-modal { height:100dvh !important; min-height:100dvh !important; overflow:hidden !important; }
  .opening-stage {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-rows:21dvh 1fr !important;
    align-items:start !important;
    justify-items:center !important;
    padding:calc(env(safe-area-inset-top) + 10px) 11px calc(env(safe-area-inset-bottom) + 8px) !important;
  }
  .opening-stage::before { inset:7px; }
  .opening-stage::after { inset:17px; }
  .opening-close { top:13px; right:15px; width:40px; height:40px; font-size:23px; }
  .opening-progress { position:absolute; top:20px; left:17px; margin:0; gap:6px; font-size:10px; }
  .opening-progress i { width:36px; }
  #openingEyebrow { align-self:end; margin:0 0 1px; font-size:8px; letter-spacing:.13em; }
  .opening-stage h2 { align-self:end; margin:0; padding:0 44px; font-size:clamp(28px,8.5vw,36px); line-height:1.04; }
  .opening-copy { align-self:end; margin:3px 0 0; max-width:310px; font-size:10px; line-height:1.4; }
  .card-stack {
    align-self:stretch;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
  }
  .pull-card {
    width:min(72vw, calc((100dvh - 190px) / 2.04)) !important;
    max-width:72vw !important;
    max-height:calc(100dvh - 190px) !important;
    top:0 !important;
  }
  .pull-art { max-height:calc((100dvh - 190px) * .64); }
  .pull-info { padding:7px 10px 8px; }
  .pull-info h3 { font-size:clamp(17px,5.8vw,22px); }
  .pull-meta,.pull-description { font-size:9px; }
  .pull-description { margin:3px 0; line-height:1.36; }
  .pull-tags { padding-top:4px; font-size:8px; }
  .pull-card.is-top::after { top:7px; right:7px; font-size:7px; padding:4px 5px; }
  .tear-pack {
    align-self:center;
    width:min(54vw, 224px) !important;
    height:min(56dvh, 350px) !important;
    min-height:0 !important;
    margin:0 !important;
  }
  .pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px 9px; padding:0 3px; }
  .pack { min-height:164px; }
  .pack img { height:138px; width:min(92px,100%); }
  .pack:nth-child(4) { grid-column:1 / span 1; grid-column-start:1; margin-left:50%; }
  .pack:nth-child(5) { grid-column:3; margin-right:50%; }
  .pack:hover:not(:disabled) { transform:translateY(-8px) rotate(-1deg); }
  .pack:nth-child(2n) { transform:translateY(3px) rotate(1deg); }
  .pack:nth-child(3n) { transform:translateY(-2px) rotate(-1deg); }
  .pack.opened { transform:none !important; }
  .reveal-inner { width:min(94vw,420px); max-height:92dvh; overflow:auto; padding:25px 17px 20px; }
  .summary-highlight { max-width:190px; margin-bottom:11px; }
  .summary-highlight .card-info { padding:8px 10px; }
  .summary-highlight .card-name { font-size:18px; }
  .reveal-cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:18px; }
  .reveal-cards .card-info { display:none; }
  .collection-chapter-title { align-items:start; flex-direction:column; gap:3px; }
  .collection-chapter-title h2 { font-size:25px; }
  .hero-secondary[hidden] { display:none !important; }
  .stat-set small { display:inline !important; font-size:8px; color:rgba(243,223,178,.68); }
  .stat-set > div:first-child small::before { content:"包裹 "; }
  .stat-set > div:nth-child(2) small::before { content:"圖鑑 "; }
  .stat-set small { font-size:0; }
  .stat-set > div:first-child small::before,.stat-set > div:nth-child(2) small::before { font-size:8px; }
  .hero .eyebrow span { color:rgba(231,201,141,.72); }
}

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

/* Final mobile stage override: the header is fixed inside the 100dvh scene;
   the card stack alone consumes the remaining space. */
@media (max-width:480px) {
  .opening-stage { display:block !important; position:relative !important; }
  #openingEyebrow { position:absolute !important; top:calc(env(safe-area-inset-top) + 50px); left:0; right:0; z-index:3; text-align:center; }
  .opening-stage h2 { position:absolute !important; top:calc(env(safe-area-inset-top) + 64px); left:0; right:0; z-index:3; text-align:center; }
  .opening-copy { position:absolute !important; top:calc(env(safe-area-inset-top) + 108px); left:20px; right:20px; z-index:3; text-align:center; }
  .card-stack { position:absolute !important; inset:21dvh 0 env(safe-area-inset-bottom) !important; height:auto !important; min-height:0 !important; }
  .pull-card { top:0 !important; }
  .tear-pack { position:absolute !important; top:25dvh; left:50%; translate:-50% 0; }

  .pack-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:4px 8px !important; }
  .pack { grid-column:span 2; }
  .pack-grid .pack { width:auto !important; min-width:0 !important; justify-self:stretch !important; }
  .pack:nth-child(4) { grid-column:2 / span 2 !important; margin-left:0 !important; }
  .pack:nth-child(5) { grid-column:4 / span 2 !important; margin-right:0 !important; }
}

body.opening-modal-open { overflow:hidden !important; scrollbar-gutter:stable; }

/* A chosen pack gets a short, ceremonial acknowledgement before opening. */
.pack.selected { transform:translateY(-10px) scale(1.035) !important; filter:drop-shadow(0 0 14px rgba(231,201,141,.48)); }
.pack.unselected { opacity:.35; transform:translateY(4px) scale(.97) !important; transition:opacity .18s ease, transform .18s ease; }

/* Rarity feedback stays on the edge: rare flashes once, epic sweeps once,
   while legendary keeps its slow gold edge and restrained halo. */
.rare-effect .pull-card.is-top { animation:rareEdgeReveal .8s ease-out 1 !important; }
.epic-effect .pull-card.is-top { animation:epicEdgeReveal .95s ease-out 1 !important; }
@keyframes rareEdgeReveal { 0% { filter:drop-shadow(0 0 21px rgba(136,187,255,.62)); } 100% { filter:drop-shadow(0 0 10px rgba(110,168,255,.22)); } }
@keyframes epicEdgeReveal { 0% { filter:drop-shadow(0 0 24px rgba(184,129,255,.64)); } 100% { filter:drop-shadow(0 0 13px rgba(169,120,255,.28)); } }

/* Pack Summary is one completed five-card set: every card has equal weight. */
#summaryHighlight { display:none !important; }
.reveal-inner { width:min(1180px,94vw); }
.reveal-cards { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:14px; margin:0 0 28px; }
.reveal-cards .card { width:auto; min-width:0; }
.reveal-cards .card-info { display:block; }

/* Series are filters, not a horizontal carousel or a restriction of the archive. */
.series-progress { display:flex !important; flex-wrap:wrap !important; gap:8px !important; overflow:visible !important; padding-bottom:22px; }
.series-progress-card { flex:0 1 auto; min-width:0; display:flex !important; align-items:center; gap:7px; padding:8px 11px !important; white-space:normal; }
.series-progress-card i { display:none !important; }
.series-progress-card strong { font-size:12px !important; white-space:nowrap; }
.collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }

@media (max-width:700px) {
  .reveal-inner { width:min(94vw,430px); }
  .reveal-cards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
  .reveal-cards .card:nth-child(5) { grid-column:1 / span 2; width:calc(50% - 5px); justify-self:center; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .series-progress { gap:6px !important; }
  .series-progress-card { padding:7px 9px !important; font-size:10px; }
}