/* Shared visual pass for the game pages. The booster opening choreography is
   intentionally left to styles.css so its timing and reveal layout stay intact. */
:root {
  --experience-ink: #090c13;
  --experience-panel: #101522;
  --experience-panel-raised: #151c2b;
  --experience-line: #28334a;
  --experience-muted: #98a4bc;
  --experience-text: #e8edf8;
  --experience-blue: #91b4ff;
  --experience-violet: #b7a0ff;
  --experience-mint: #71e0bd;
  --experience-amber: #f4c779;
}

body { color: var(--experience-text); }
.main-content { min-width: 0; }
.sidebar { background: #090c13; border-color: #20283a; }
.brand { margin-bottom: 20px; }
.side-label { color: #77849d; letter-spacing: 1.8px; }
.primary-nav { gap: 4px; }
.nav-item { min-height: 42px; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.nav-item:hover { background: #151c2b; color: #f1f4fc; }
.nav-item.active { background: linear-gradient(90deg,#1a2844,#151b2a); color: #dce7ff; box-shadow: inset 2px 0 #91b4ff; }
.nav-icon { color: #91a0bc; }
.nav-item.active .nav-icon { color: #a9c5ff; }
.sidebar-bottom { border-color: #20283a; }
.season { color: #d8e1f3; }
.season small { color: #8592aa; }
.topbar { border-color: #20283a; }
.breadcrumbs { color: #7f8ba3; }
.top-credits { color: #d9e2f5; }
.avatar { border-color: #516384; background: #1a2335; }

.home-welcome {
  min-height: 300px; margin-top: 25px; padding: clamp(26px,4vw,48px);
  border: 1px solid #303d5a;
  background: radial-gradient(ellipse at 77% 50%,#4754a13d,transparent 34%),
    linear-gradient(112deg,#111a2c 0%,#101522 58%,#17152a 100%);
}
.home-welcome { isolation:isolate; border-radius:20px; background:radial-gradient(ellipse at 82% 20%,#74a7ff35,transparent 26%),radial-gradient(ellipse at 74% 100%,#aa78ff22,transparent 34%),linear-gradient(112deg,#121d31 0%,#101522 58%,#19162b 100%); box-shadow:0 22px 70px #0003,inset 0 1px #ffffff0d; }
.home-welcome:before { content:"";position:absolute;z-index:-1;right:4%;top:12%;width:clamp(115px,17vw,220px);aspect-ratio:1;border:1px solid #aec6ff24;border-radius:50%;box-shadow:0 0 0 18px #aec6ff08,0 0 0 38px #aec6ff05;transform:rotate(-18deg); }
.home-welcome:after { mix-blend-mode:screen; }
.home-copy .eyebrow { color:var(--experience-mint); }
.home-copy h1 em { color:#b4c8ff; }
.home-actions .button-primary { box-shadow:0 9px 28px #7199ef30; }
.page-heading { position:relative; }
.page-heading:after { content:"";position:absolute;bottom:16px;left:0;width:min(150px,23vw);height:1px;background:linear-gradient(90deg,#89aeff9c,#b99dff55,transparent); }
.button-primary { border:1px solid #aec3ff5c; background:linear-gradient(130deg,#9bb8ff,#b7a2ff); color:#111522; font-weight:750; box-shadow:0 7px 22px #8199ec25; transition:transform .18s,filter .18s,box-shadow .18s; }
.button-primary:hover { transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 10px 28px #8199ec42; }
.button-primary:focus-visible,.nav-item:focus-visible,.home-shortcuts button:focus-visible { outline:2px solid var(--experience-mint);outline-offset:3px; }
.overview-main { position:relative;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 100% 0%,#91b4ff14,transparent 35%),linear-gradient(145deg,#141c2d,#101522 74%); }
.overview-main:after { content:"";position:absolute;top:0;left:24px;width:48px;height:2px;background:linear-gradient(90deg,var(--experience-mint),transparent); }
.home-booster-tile { border-radius:16px;transition:transform .2s,border-color .2s,box-shadow .2s; }
.home-booster-tile:hover { transform:translateY(-3px);border-color:#6d82b3;box-shadow:0 16px 36px #0004; }
.collection-tab.selected { border-color:#8faeff;background:linear-gradient(130deg,#283958,#24253f);color:#edf2ff;box-shadow:inset 0 0 0 1px #9cb8ff22,0 5px 20px #7e9cdb17; }
.status-chip.approved { border-color:#3b8c74;color:#8ce4c5;background:#122820; }
.mission-tile,.admin-tools,.recent-section { border-radius:14px; }
::selection { background:#91b4ff59;color:#fff; }
.home-welcome:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background:linear-gradient(120deg,transparent 50%,#a9c2ff0a 50.2%,transparent 50.5%); }
.home-copy h1 { letter-spacing:-1.6px; }
.home-copy h1 em { font-style:normal; }
.home-copy p { color:#aab5ca; }
.home-art-stack { width:310px; height:250px; }
.home-art-card { width:139px; height:198px; border-color:#c0d0ff66; box-shadow:0 22px 55px #0009; }
.home-art-card:nth-child(2) { filter:saturate(.82); }
.home-overview { gap:14px; }
.overview-main, .home-booster-tile { border:1px solid var(--experience-line); background:var(--experience-panel); }
.overview-main { padding:25px; }
.overview-heading h2, .recent-section h2 { letter-spacing:-.5px; }
.overview-stats > div { border-color:#283248; }
.overview-stats b { color:#edf2ff; }
.overview-stats span, .overview-foot { color:#9aa7bf; }
.home-booster-tile { position:relative; overflow:hidden; background:linear-gradient(145deg,#1d2540,#111725 72%); }
.home-booster-tile:after { color:#93adf4; opacity:.11; }
.home-booster-tile .tile-pack-symbol { color:#bed0ff; }
.home-shortcuts { border-top:1px solid var(--experience-line); border-bottom:1px solid var(--experience-line); }
.home-shortcuts button { min-width:0; border-color:var(--experience-line); transition:background .18s ease; }
.home-shortcuts button:hover { background:#121a29; }
.shortcut-icon { color:#9bb9ff; }
.participation-banner { border-color:#39476a; background:linear-gradient(105deg,#18213a,#111723 75%); }

.page-heading { gap:20px; }
.page-heading h1 { letter-spacing:-1px; }
.page-heading p { max-width:640px; color:var(--experience-muted); }
.section-head { align-items:end; }
.section-head h2 { letter-spacing:-.35px; }
.recent-section, .admin-tools, .placeholder-panel, .mission-tile { border-color:var(--experience-line); }
.mission-tile { position:relative; min-height:230px; background:linear-gradient(155deg,#151d2c,#10141f 72%); }
.mission-tile:before { content:""; position:absolute; top:0; left:0; width:38px; height:2px; background:linear-gradient(90deg,#8eafff,transparent); }
.mission-tile h2 { color:#edf2ff; }
.mission-tile p { color:#a5b0c5; }
.mission-tile .tile-progress { color:#9aabc9; }
.mission-tile .progress-track { height:4px; }

.friends-search, .friends-columns .admin-tools, .public-player, .placeholder-panel {
  border-color:var(--experience-line); background:var(--experience-panel);
}
.friends-search { padding:18px; }
.friends-search form { max-width:820px; }
.player-results { max-width:820px; margin-top:8px; }
.player-result, .friend-row { border-color:#273148; }
.player-result:hover, .friend-row:hover { background:#141b29; }
.player-result span, .friend-row small { color:#9caac2; }
.friends-columns { gap:18px; }
.friends-columns .admin-tools { padding:18px; }
.friend-list { min-height:46px; }
.public-player { position:relative; overflow:hidden; background:radial-gradient(ellipse at 8% 0%,#52639a25,transparent 42%),#111724; }
.player-monogram { border-color:#526990; color:#b5cbff; background:#1c2840; }
.public-player h2 { color:#f0f4ff; }
.public-player p { color:#aab5ca; }
.stats-strip { border-color:#2b354c; }
.series-progress-list i { background:#29334a; }
.series-progress-list i em { background:linear-gradient(90deg,#82aaff,#ae9bff); }
.player-actions { gap:10px; }

.market-balance { color:#afc5ff; }
.market-listings { grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:12px; }
.market-listing {
  position:relative; display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr auto auto;
  align-content:start; gap:9px; min-width:0; margin:0; padding:9px;
  border:1px solid #29334a; background:linear-gradient(155deg,#141c2b,#0f1420 75%);
  transition:transform .18s,border-color .18s,background .18s;
}
.market-listing:hover { z-index:1; transform:translateY(-3px); border-color:#536b95; background:#151e2e; }
.market-listing > img { display:block; width:100%; aspect-ratio:430/640; height:auto; object-fit:cover; border:1px solid #43516d; background:#090c13; cursor:pointer; }
.market-listing > div[data-card] { min-width:0; cursor:pointer; }
.market-listing > div[data-card]:focus-visible, .market-listing > img:focus-visible { outline:2px solid #aac4ff; outline-offset:2px; }
.market-listing h3 { overflow:hidden; color:#edf2ff; font-size:clamp(12px,1.1vw,15px); text-overflow:ellipsis; white-space:nowrap; }
.market-listing small { display:block; overflow:hidden; color:#9cacc9; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.market-listing p { color:#a2aec3; line-height:1.45; min-height:30px; }
.market-listing > button, .market-listing input { width:100%; min-width:0; border:1px solid #4a5b7a; background:#1a2740; color:#e3ebff; }
.market-listing > button { min-height:38px; cursor:pointer; }
.market-listing > button:hover { background:#283a5d; }
.market-listing input:focus { outline:1px solid #8fb0ff; }
.placeholder-panel { position:relative; overflow:hidden; padding:26px; background:radial-gradient(ellipse at 0% 0%,#53669c2d,transparent 42%),linear-gradient(125deg,#151d2c,#101522 70%); }
.placeholder-panel h2 { margin:9px 0 6px; color:#f1f4ff; font-size:clamp(24px,3vw,34px); letter-spacing:-.8px; }
.placeholder-panel p { color:#aab5ca; line-height:1.7; }
.placeholder-panel .button-primary { margin-top:10px; }
.stats-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:14px 0 20px; padding:0; border:0; }
.stats-strip > span { display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:76px; padding:13px 15px; border:1px solid #29354c; background:#111724; color:#c7d3e8; line-height:1.45; }
.stats-strip > span strong, .stats-strip > span b { color:#f0f4ff; font-size:17px; }
.profile-stats > span b { font:700 24px var(--display); letter-spacing:-.5px; }
.profile-stats > span small { color:#9caac2; font-size:10px; }
.profile-stats { grid-template-columns:repeat(5,minmax(0,1fr)); }
.recent-section { padding:20px; background:#101522; }
.recent-section + .recent-section { margin-top:14px; }
.history-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:13px; }
.history-row > span { color:#a4b1c8; }
.mission-tile .progress-track + p { width:100%; margin:0 0 4px; padding:11px 12px; border-left:2px solid #849fe3; background:#1a2336; color:#d8e2f5; font-size:11px; }
.market-modal-actions { display:grid; gap:13px; margin-top:18px; padding:14px; border:1px solid #34435f; background:linear-gradient(120deg,#1a2740,#131a28); }
.market-modal-actions > div { display:grid; gap:5px; }
.market-modal-actions > div > b { color:#eef3ff; font:700 20px var(--display); }
.market-modal-actions > div > small { color:#a5b2ca; }
.market-modal-actions .button-primary { width:100%; }
.market-modal-bid { display:grid; gap:6px; color:#c9d5ec; font-size:10px; }
.market-modal-bid input { width:100%; }
.market-create-overlay{position:fixed;z-index:40;inset:0;display:grid;place-items:center;padding:18px;background:#070a11d9;backdrop-filter:blur(10px)}
.market-create-panel{width:min(480px,100%);max-height:min(92dvh,820px);overflow:auto;padding:clamp(20px,4vw,30px);border:1px solid #45516a;border-radius:18px;background:radial-gradient(ellipse at 90% 0%,#53679824,transparent 40%),linear-gradient(155deg,#171d2a,#10141e 72%);box-shadow:0 30px 100px #000d;color:#edf1fa;overscroll-behavior:contain}
.market-create-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.market-create-panel h2{margin:8px 0 0;font:600 25px/1.15 var(--display)}
.market-create-close{width:36px;height:36px;border:1px solid #3b465b;border-radius:50%;background:#ffffff08;color:#cbd4e5;font-size:23px;line-height:1;cursor:pointer}
.market-compose-card{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid #303b50;border-radius:12px;background:#ffffff06}.market-compose-card img{width:56px;aspect-ratio:2/3;object-fit:cover;border-radius:5px;background:#0a0d14}.market-compose-card>div{display:grid;gap:4px;min-width:0}.market-compose-card span,.market-compose-card small{color:#a8b4cc;font-size:9px}.market-compose-card b{overflow:hidden;color:#f1f3f9;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.market-sale-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.market-sale-modes button{display:grid;gap:5px;padding:12px;text-align:left;border:1px solid #38435a;border-radius:11px;background:#101520;color:#b7c2d7;cursor:pointer}.market-sale-modes button.selected{border-color:#829bd4;background:linear-gradient(135deg,#35466a66,#222a3c);color:#f2f4fb;box-shadow:inset 0 0 0 1px #8aa4e43b}.market-sale-modes button span{font-size:12px;font-weight:700}.market-sale-modes button small{font-size:9px;color:#9ba8bf}
.market-field{display:grid;gap:7px;margin-top:13px;color:#e4e9f3;font-size:11px;font-weight:600}.market-field>span{color:#9eabc2;font-size:9px;font-weight:400}.market-field input,.market-field select{width:100%;min-height:43px;padding:0 12px;border:1px solid #3a455c;border-radius:9px;background:#0d121c;color:#f0f3fa}.market-field input:focus,.market-field select:focus{outline:2px solid #829bd488;border-color:#829bd4}.market-auction-quantity{margin:0;padding:11px 12px;border:1px solid #343f56;border-radius:9px;background:#ffffff05;color:#b4c0d4;font-size:10px}
.market-create-panel>footer{display:flex;justify-content:flex-end;gap:10px;margin-top:21px}.market-create-panel>footer button{min-height:43px;padding-inline:18px}.market-create-feedback{min-height:0;margin:9px 0 0;color:#ffaaa4;font-size:10px}.market-create-feedback:empty{display:none}
@media(max-width:540px){.market-create-overlay{align-items:end;padding:0}.market-create-panel{width:100%;max-height:92dvh;padding:22px 18px max(22px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;border-bottom:0}.market-create-panel h2{font-size:22px}.market-sale-modes{gap:7px}.market-sale-modes button{padding:10px}}
.history-section, .history-empty { border-color:#29334a; }
.history-row { background:#111724; border-color:#29334a; }

.modal-backdrop { background:#05070bd9; backdrop-filter:blur(8px); }
.modal:not(:has(.booster-modal)) { border-color:#3a4762; background:#111724; box-shadow:0 30px 100px #000b; }
.modal-close { color:#b8c4d9; }
.modal-image { border-color:#34415a; }
.modal-details h2 { color:#f0f4ff; }
.modal-meta { border-color:#2d3950; }

.button-primary { min-height:42px; font-weight:700; }
.button-primary:focus-visible, .button-quiet:focus-visible, .text-button:focus-visible,
.nav-item:focus-visible, .collection-tab:focus-visible, .filter:focus-visible {
  outline:2px solid #aac4ff; outline-offset:3px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea {
  border-color:#303b52; background-color:#0c111b; color:#edf2ff;
}
input::placeholder, textarea::placeholder { color:#75819a; }
input:focus, select:focus, textarea:focus { border-color:#7998d7; outline:2px solid #7998d733; }
.form-feedback { line-height:1.55; }
.filter, .collection-tab { transition:color .18s,border-color .18s,background .18s; }
.filter:hover, .collection-tab:hover { border-color:#708dc4; color:#e0e9ff; }

@media (max-width: 900px) {
  .home-welcome { min-height:270px; }
  .home-art-stack { transform:scale(.9); margin-right:-10px; }
  .market-listings { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .stats-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .sidebar { height:68px; padding:0 8px max(env(safe-area-inset-bottom),0px); }
  .sidebar .brand, .sidebar .side-label, .sidebar .sidebar-bottom { display:none; }
  .primary-nav { display:flex; width:100%; height:100%; justify-content:flex-start; gap:4px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .primary-nav::-webkit-scrollbar { display:none; }
  .primary-nav .nav-item, .primary-nav .nav-item[data-page="favorites"], .primary-nav .nav-item[data-page="missions"], .primary-nav .nav-item[data-page="rankings"], .primary-nav .logout-nav {
    display:flex; min-width:66px; min-height:58px; flex:0 0 auto; flex-direction:column; justify-content:center; gap:3px;
    padding:5px 8px; font-size:9px; white-space:nowrap; border-radius:0;
  }
  .primary-nav .nav-item.active { box-shadow:inset 0 2px #91b4ff; }
  .nav-icon { font-size:17px; line-height:1; }
  .nav-badge { position:absolute; top:2px; right:9px; }
  .main-content { padding-bottom:104px; }
  .home-welcome { min-height:0; padding:24px 18px; }
  .home-art-stack { right:-83px; top:12px; opacity:.22; transform:scale(.75); }
  .home-copy { max-width:100%; }
  .home-copy h1 { font-size:clamp(29px,8vw,36px); }
  .home-copy p { max-width:340px; }
  .home-actions { align-items:flex-start; }
  .home-overview { grid-template-columns:1fr; }
  .overview-main { padding:18px; }
  .overview-stats { gap:6px; }
  .overview-stats > div { min-width:0; }
  .overview-stats b { font-size:21px; }
  .home-shortcuts button { min-height:92px; padding:12px; }
  .friends-search { padding:13px; }
  .friends-search form { flex-wrap:wrap; }
  .friends-search form .button-primary { width:100%; }
  .friends-columns { grid-template-columns:1fr; }
  .public-player { padding:17px; }
  .market-listings { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .market-listing { gap:7px; padding:7px; }
  .market-listing > div { min-width:0; }
  .market-listing h3 { font-size:14px; }
  .market-listing > button, .market-listing > input { grid-column:1; justify-self:stretch; }
  .market-listing > button { min-height:38px; }
  .market-listing input { width:min(100%,180px); }
  .market-balance { margin:6px 0 0; }
  .participation-banner { gap:14px; }
  .stats-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .recent-section { padding:15px; }
  .modal:not(:has(.booster-modal)) { width:min(94vw,600px); max-height:88dvh; overflow:auto; }
}
@media (max-width: 420px) {
  .main-content { padding-left:12px; padding-right:12px; }
  .topbar { gap:8px; }
  .season-pill { display:none; }
  .home-welcome { padding:21px 15px; }
  .home-copy h1 { font-size:29px; }
  .home-copy p { font-size:11px; }
  .home-actions { gap:8px; }
  .home-actions .button-primary { padding:10px 12px; }
  .overview-heading { align-items:flex-start; }
  .overview-stats b { font-size:18px; }
  .overview-stats span { font-size:9px; }
  .section-head { gap:8px; align-items:flex-start; }
  .section-head .text-button { flex:none; }
}
@media (prefers-reduced-motion: reduce) {
  .experience *, .nav-item, .home-art-card, .market-listing, .filter, .collection-tab { scroll-behavior:auto; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
/* Booster opening: focused, responsive TCG scene */
#view[data-page="booster"] .booster-layout{grid-template-columns:minmax(0,1fr);max-width:1120px;margin-inline:auto}
#view[data-page="booster"] .booster-side{display:none}
#view[data-page="booster"] .booster-feature{min-height:610px}
#view[data-page="booster"] .booster-feature .feature-top{max-width:520px;margin-inline:auto}
#view[data-page="booster"] .booster-feature .pack-display{min-height:350px}
#view[data-page="booster"] .participation-banner{margin-top:28px}
.pack-journey{width:min(1060px,96vw);max-height:min(94vh,940px);overflow:auto;padding:30px clamp(18px,4vw,48px) 26px;background:radial-gradient(ellipse at 50% 37%,rgba(98,71,35,.15),transparent 52%),linear-gradient(155deg,#141615,#0c0e0d 72%);border:1px solid rgba(211,180,119,.2);color:#f4efe5;box-shadow:0 30px 100px rgba(0,0,0,.64)}
.pack-journey-label{color:#d3b477;letter-spacing:.2em}
.pack-journey-title{font:500 clamp(24px,3vw,36px)/1.1 var(--font-display,Georgia,serif);margin:12px 0 6px}
.pack-journey-instruction{color:#b1afa8;margin:0 0 18px}
.opening-stage{min-height:360px;display:grid;grid-template-columns:minmax(175px,.72fr) minmax(420px,1.45fr);align-items:center;gap:clamp(18px,5vw,66px);position:relative;padding:16px clamp(8px,3vw,34px) 38px}
.pack-art{width:min(100%,250px);aspect-ratio:2/3;justify-self:center;position:relative;isolation:isolate;overflow:visible;border-radius:5px;background:#171a1c;box-shadow:0 20px 44px #0009;transform-origin:50% 6%;transition:transform .56s cubic-bezier(.2,.75,.2,1),filter .35s}
.pack-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px;z-index:-1}
.pack-art:after{content:"";position:absolute;inset:0;border:1px solid #ead7a44a;border-radius:5px;pointer-events:none}
.pack-top-flap{position:absolute;z-index:3;left:0;right:0;top:0;height:12%;background:linear-gradient(#d8c491,#ac8d54);clip-path:polygon(0 0,100% 0,96% 82%,4% 100%);transform-origin:50% 0;transition:transform .62s cubic-bezier(.16,.68,.22,1),opacity .4s;box-shadow:0 5px 10px #0007}
.pack-art .pack-glow{position:absolute;inset:-12%;z-index:-1;background:radial-gradient(ellipse,rgba(201,163,88,.22),transparent 67%);filter:blur(8px);opacity:0;transition:opacity .5s}
.pack-art .pack-lines,.pack-art .pack-symbol,.pack-art .pack-title,.pack-art .pack-small,.pack-art .pack-number,.pack-art .pack-tear,.pack-art .pack-mouth{transition:opacity .4s,transform .5s}
.pack-art .pack-title{top:29%;font-size:clamp(15px,1.8vw,21px);letter-spacing:.11em}
.pack-art .pack-small{bottom:14%}.pack-art .pack-number{bottom:6%}
.pack-shadow{position:absolute;bottom:25px;left:5%;right:5%;height:28px;border-radius:50%;background:#0009;filter:blur(14px);transform:scale(.8);transition:transform .5s,opacity .5s}
.pack-journey.opening-cut .pack-art{animation:pack-jostle .24s ease-in-out 3}
.pack-journey.opening-cut .pack-glow{opacity:1}
.pack-journey.cards-extracted .pack-art{transform:translateY(-17px) rotate(-4deg) scale(.9);filter:saturate(.78)}
.pack-journey.cards-extracted .pack-top-flap{transform:rotateX(158deg) translateY(-8px);opacity:.72}
.pack-journey.cards-extracted .pack-tear,.pack-journey.cards-extracted .pack-mouth{opacity:0;transform:translateY(10px)}
.pack-journey.cards-extracted .pack-shadow{transform:scale(.6);opacity:.65}
@keyframes pack-jostle{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg) translateX(-2px)}70%{transform:rotate(2deg) translateX(2px)}}
.reveal-board{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(230px,1fr);align-items:center;gap:clamp(15px,3vw,42px);min-width:0}
.deck-stage{position:relative;display:grid;justify-items:center;align-content:center;min-height:270px}
.deck-count,.revealed-count{font-size:10px;letter-spacing:.16em;color:#b9a779;text-align:center;margin:0 0 12px}
.physical-card-stack{position:relative;width:clamp(120px,15vw,172px);aspect-ratio:2/3;perspective:1000px;cursor:pointer;touch-action:manipulation}
.physical-card{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;perspective:1000px;transform:translate(calc(var(--stack-depth)*2px),calc(var(--stack-depth)*-2px));transition:transform .3s,filter .3s;cursor:pointer}
.physical-card-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.72,.18,1)}
.card-back-face,.card-front-face{position:absolute;inset:0;overflow:hidden;border-radius:7px;backface-visibility:hidden;box-shadow:0 10px 28px #0009;background:#111}
.card-back-face img,.card-front-face img{display:block;width:100%;height:100%;object-fit:cover}
.card-front-face{transform:rotateY(180deg)}
.card-front-face img{object-position:center}
.physical-card.is-flipped .physical-card-inner,.physical-card.is-flipping .physical-card-inner{transform:rotateY(180deg)}
.physical-card.is-featured{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2/3;transform:none!important;z-index:2}
.physical-card.is-featured .physical-card-inner{width:100%;height:100%}
.physical-card.is-flipping{z-index:12;filter:drop-shadow(0 0 22px rgba(217,183,113,.54))}
.revealed-area{min-width:0;display:grid;justify-items:center;align-content:center;gap:12px}
.revealed-area .revealed-count{margin:0}
.revealed-focus{width:clamp(170px,22vw,248px);aspect-ratio:2/3;position:relative;display:grid;place-items:center;perspective:1000px}
.revealed-empty{position:absolute;inset:0;display:grid;place-items:center;border:1px dashed #ffffff25;color:#aaa79d;text-align:center;padding:16px;font-size:12px;letter-spacing:.03em}
.revealed-focus:has(.physical-card){display:block}
.revealed-caption{text-align:center;display:grid;gap:3px;color:#aaa79d;font-size:10px;letter-spacing:.12em;text-transform:uppercase;min-height:38px}
.revealed-caption b{font:500 19px var(--font-display,Georgia,serif);letter-spacing:0;color:#f4efe5;text-transform:none}
.revealed-controls{display:flex;align-items:center;justify-content:center;gap:16px;color:#aaa79d;font-size:11px}
.revealed-controls button{border:0;background:transparent;color:#ded8ca;cursor:pointer;padding:6px 4px}
.revealed-controls button:disabled{opacity:.32;cursor:default}
.revealed-position{font-variant-numeric:tabular-nums;min-width:38px;text-align:center}
.revealed-stack{width:min(100%,340px);display:flex;align-items:center;justify-content:center;gap:6px;min-height:62px;overflow-x:auto;padding:5px;scrollbar-width:thin}
.revealed-stack .physical-card{position:relative;inset:auto;width:38px;height:57px;flex:0 0 38px;transform:none!important;cursor:pointer;border:1px solid #ffffff30;border-radius:3px;overflow:hidden}
.revealed-stack .physical-card-inner{transform:rotateY(180deg)!important}
.revealed-stack .physical-card.is-featured{outline:1px solid #d5b779;outline-offset:2px}
.revealed-stack:empty{display:none}
.pack-opening-note{text-align:center;color:#9f9d96;font-size:11px;letter-spacing:.04em;margin-top:2px}
.pack-completion{border-top:1px solid #ffffff17;margin:18px auto 0;padding:18px 0 0;max-width:650px;text-align:center}
.pack-completion-copy{display:grid;gap:7px;color:#a9a69c;font-size:12px}
.pack-completion-copy>span{font-size:10px;letter-spacing:.17em;color:#d1b476}
.pack-completion-copy>b{font:500 21px var(--font-display,Georgia,serif);color:#f4efe5}
.pack-completion-copy>b i{font-style:normal}
.pack-completion-actions{display:flex;justify-content:center;gap:12px;margin-top:15px;flex-wrap:wrap}
.pack-completion-actions button[hidden]{display:none}
.pack-journey.booster-is-finished .opening-stage{min-height:300px}
.pack-journey.booster-is-finished .deck-stage{opacity:.42}
.pack-journey .physical-card.rarity-rare.is-flipping,.pack-journey .physical-card.rarity-epic.is-flipping,.pack-journey .physical-card.rarity-legendary.is-flipping,.pack-journey .physical-card.variant-gold.is-flipping,.pack-journey .physical-card.variant-shiny.is-flipping{filter:drop-shadow(0 0 14px var(--rarity-color,#c6a968)) drop-shadow(0 0 26px #fff4)}
.pack-journey .physical-card.rarity-epic.is-featured .card-front-face:after,.pack-journey .physical-card.rarity-legendary.is-featured .card-front-face:after,.pack-journey .physical-card.variant-gold.is-featured .card-front-face:after,.pack-journey .physical-card.variant-shiny.is-featured .card-front-face:after{content:"";position:absolute;inset:-60%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff60 48%,transparent 58%);transform:translateX(-45%);animation:rare-sheen 2.4s ease-in-out infinite}
@keyframes rare-sheen{to{transform:translateX(45%)}}
#modal .modal[data-rarity="rare"] .modal-image{box-shadow:0 0 0 1px #78a8ce66,0 0 24px #4b88bb40}
#modal .modal[data-rarity="epic"] .modal-image{box-shadow:0 0 0 1px #ae77dd77,0 0 28px #8754b740}
#modal .modal[data-rarity="legendary"] .modal-image{box-shadow:0 0 0 1px #e2bc6680,0 0 34px #ce9b3b55}
#modal .modal[data-variant="gold"] .modal-image,#modal .modal[data-variant="shiny"] .modal-image{box-shadow:0 0 0 1px #e3c76b,0 0 34px #e7c45a77}
#view .card-item:hover.rarity-rare,#view .card-item:hover.rarity-epic,#view .card-item:hover.rarity-legendary,#view .card-item:hover.variant-gold,#view .card-item:hover.variant-shiny{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--rarity-color,#c6a968) 45%,transparent));}
@media(max-width:760px){#view[data-page="booster"] .booster-feature{min-height:unset}.opening-stage{grid-template-columns:1fr;gap:12px;min-height:unset;padding:8px 0 28px}.pack-art{width:clamp(120px,34vw,180px);margin:0 auto -8px}.reveal-board{width:100%;grid-template-columns:minmax(100px,.65fr) minmax(175px,1fr);gap:10px}.deck-stage{min-height:230px}.physical-card-stack{width:clamp(90px,22vw,140px)}.revealed-focus{width:clamp(150px,40vw,205px)}.pack-journey{padding:24px 16px 20px}.pack-journey-instruction{text-align:center}.revealed-controls button span{display:none}}
@media(max-width:420px){.reveal-board{grid-template-columns:90px minmax(150px,1fr);gap:8px}.physical-card-stack{width:82px}.deck-stage{min-height:190px}.revealed-focus{width:min(100%,168px)}.revealed-controls{gap:8px}.revealed-stack .physical-card{width:31px;height:47px;flex-basis:31px}.pack-completion-actions{display:grid}}
@media(prefers-reduced-motion:reduce){.pack-journey *,.pack-journey *:before,.pack-journey *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Override legacy absolute staging rules from the previous opening animation */
#modal .pack-journey .opening-stage{position:relative;display:grid;grid-template-columns:minmax(175px,.72fr) minmax(420px,1.45fr);min-height:360px;isolation:isolate;}
#modal .pack-journey .pack-art{position:relative;left:auto;top:auto;width:min(100%,250px);height:auto;aspect-ratio:2/3;margin:0;transform:none;opacity:1;}
#modal .pack-journey.cards-extracted .pack-art{left:auto;top:auto;width:min(100%,250px);height:auto;transform:translateY(-12px) rotate(-3deg) scale(.94);opacity:1;}
#modal .pack-journey .reveal-board{position:relative;inset:auto;visibility:visible;opacity:1;grid-template-columns:minmax(130px,.6fr) minmax(230px,1fr);}
#modal .pack-journey.cards-extracted .physical-card-stack{opacity:1;transform:none;animation:none;}
#modal .pack-journey .physical-card-stack{width:clamp(120px,15vw,172px);height:auto;aspect-ratio:2/3;}
#modal .pack-journey .revealed-stack{width:min(100%,340px);height:auto;min-height:62px;}
#modal .pack-journey.cards-extracted .pack-art .pack-title,#modal .pack-journey.cards-extracted .pack-art .pack-small,#modal .pack-journey.cards-extracted .pack-art .pack-number{display:block;}
@media(max-width:760px){#modal .pack-journey .opening-stage{grid-template-columns:1fr;min-height:unset;}#modal .pack-journey .pack-art,#modal .pack-journey.cards-extracted .pack-art{width:clamp(120px,34vw,180px);height:auto;}#modal .pack-journey .reveal-board{grid-template-columns:minmax(100px,.65fr) minmax(175px,1fr);}}
@media(max-width:420px){#modal .pack-journey .physical-card-stack{width:82px;}#modal .pack-journey .reveal-board{grid-template-columns:90px minmax(150px,1fr);}}
.pack-art .pack-title,.pack-art .pack-small,.pack-art .pack-number,.pack-art .pack-symbol,.pack-art .pack-lines{display:none!important}
.pack-top-flap{opacity:0;background-image:url('/assets/cards/backs/booster-pack.png');background-size:100% 833%;background-position:top center;background-repeat:no-repeat;box-shadow:0 5px 11px #0009}
.pack-journey.opening-cut .pack-top-flap{opacity:1}
#modal .pack-journey.cards-extracted .pack-art .pack-title,#modal .pack-journey.cards-extracted .pack-art .pack-small,#modal .pack-journey.cards-extracted .pack-art .pack-number{display:none}
.pack-journey.cards-extracted:not(.opening-cut) .pack-top-flap{opacity:0}
.pack-journey.opening-cut .pack-top-flap{opacity:1}
/* Navigation: compact rail on desktop, expands only while pointer is over it */
@media(min-width:721px){
 .sidebar{width:72px;padding:23px 9px;overflow:visible;transition:width .28s cubic-bezier(.2,.75,.25,1);z-index:1000;pointer-events:auto}
 .sidebar .brand,.sidebar .nav-item{pointer-events:auto}
 .sidebar:hover{width:226px;padding-inline:14px;background:#0d111b;box-shadow:16px 0 44px #0008}
 .sidebar .brand{height:65px;margin:0 7px 36px;overflow:hidden}
 .sidebar .brand img{width:54px;max-width:none;flex:none;object-position:left center;transition:width .25s ease}
 .sidebar:hover .brand img{width:126px}
 .sidebar .side-label{opacity:0;visibility:hidden;white-space:nowrap;overflow:hidden;transition:opacity .16s ease}
 .sidebar:hover .side-label{opacity:1;visibility:visible}
  .sidebar .nav-item{position:relative;width:100%;justify-content:flex-start;gap:13px;min-width:0;padding-inline:11px;overflow:visible;white-space:nowrap}
 .sidebar:not(:hover) .nav-item{width:54px;justify-content:center;gap:0;padding-inline:0}
 .sidebar .nav-icon{flex:0 0 20px}
  .sidebar .nav-label{position:absolute;left:54px;top:50%;width:max-content;max-width:0;transform:translateY(-50%);opacity:0;visibility:hidden;overflow:hidden;pointer-events:none;transition:max-width .25s ease,opacity .18s ease}
  .sidebar:hover .nav-label{max-width:155px;opacity:1;visibility:visible}
  .sidebar:hover .nav-badge,.sidebar:focus-within .nav-badge{display:none}
 .sidebar:not(:hover) .nav-badge,.sidebar:not(:hover) .nav-arrow,.sidebar:not(:hover) .season>div,.sidebar:not(:hover) .season>.online-dot{display:none}
 .sidebar .season{justify-content:center;gap:0;padding-inline:8px}
 .sidebar:hover .season{justify-content:flex-start;gap:10px}
 .main-content{margin-left:72px;max-width:none;transition:margin-left .28s cubic-bezier(.2,.75,.25,1)}
}
@media(max-width:720px){
 .sidebar,.sidebar:hover,.sidebar:focus-within{inset:auto 0 0;width:100%;height:68px;padding:6px 8px;display:flex;flex-direction:row;align-items:center;overflow:hidden;box-shadow:0 -12px 34px #0008;transition:none;pointer-events:auto}
 .sidebar .brand,.sidebar .side-label,.sidebar .sidebar-bottom{display:none!important}
 .sidebar .primary-nav{width:100%;height:100%;display:flex;align-items:center;justify-content:space-around;gap:3px}
 .sidebar .nav-item,.sidebar:not(:hover):not(:focus-within) .nav-item,.sidebar:hover .nav-item,.sidebar:focus-within .nav-item{flex:1;min-width:0;height:52px;justify-content:center;padding:0 4px;gap:0;transform:none}
 .sidebar .nav-icon{flex-basis:auto;font-size:20px}
 .sidebar .nav-label,.sidebar:hover .nav-label{display:none;max-width:0}
 .sidebar .nav-badge{display:none!important}
 .main-content{margin-left:0;padding-bottom:96px}
}
/* Consistent, restrained corner treatment and stronger surface separation */
:root{--panel-radius:11px;--control-radius:8px;--text-secondary:#b2bad0;--line-soft:#343e55}
body{color:#edf0f8}
.side-label,.eyebrow,.breadcrumbs,.collection-copy-count,.overview-stats span,.overview-foot,.history-empty,.filter span,.modal-meta{color:#a2abc0}
.button-primary,.button-quiet,.text-button,.clear-filters,.filter,.select-filter select,.search-box,.nav-item{border-radius:var(--control-radius)}
.collection-toolbar,.market-filter-bar{position:relative;z-index:31;isolation:isolate}
.collection-toolbar input,.collection-toolbar select,.market-filter-bar input,.market-filter-bar select{position:relative;z-index:1;pointer-events:auto;touch-action:manipulation}
.collection-toolbar input:focus,.collection-toolbar select:focus,.market-filter-bar input:focus,.market-filter-bar select:focus{outline:2px solid #829ddd88;outline-offset:1px}
.page-heading,.home-welcome,.overview-main,.home-booster-tile,.home-shortcuts,.home-shortcuts button,.participation-banner,.booster-layout,.booster-feature,.booster-side,.admin-tools,.placeholder-panel,.mission-tile,.history-row,.history-empty,.collection-tabs,.collection-progress,.collection-tile,.filter,.filter-panel,.application-layout,.profile-panel,.friends-search{border-radius:var(--panel-radius)}
.trading-card{border-radius:12px;overflow:hidden;border-color:#3a4560;background:#131927;box-shadow:0 10px 30px #0005}
.trading-card .card-image{border-radius:10px 10px 0 0;overflow:hidden}
.collection-tabs,.admin-tools,.placeholder-panel,.mission-tile,.booster-layout,.booster-feature,.booster-side,.history-row,.history-empty{background-color:#131927;border-color:#343e55}
.registration-list{display:grid;gap:10px}.registration-review{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid #303a50;background:#111722}.registration-review-main{min-width:0}.registration-review h3{font:600 16px var(--display);margin:9px 0 5px}.registration-review h3 small{font:400 11px var(--font);color:#a2abc0}.registration-review p{font-size:11px;color:#a2abc0;margin:0 0 6px;overflow-wrap:anywhere}.registration-review p a{color:#c5d0e5;text-decoration:underline;text-underline-offset:2px}.registration-review-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.registration-review-actions .button-primary,.registration-review-actions .reject-button{padding:9px 12px;font-size:10px}@media(max-width:720px){.registration-review{align-items:flex-start;flex-direction:column}.registration-review-actions{justify-content:flex-start}}
.button-primary{border-radius:8px}
.text-button,.button-quiet{color:#c1cbed}
/* Home spotlight: real catalogue cards, one at a time, with a calm continuous loop */
.home-welcome{gap:clamp(24px,4vw,60px);padding:clamp(26px,4vw,44px);border-radius:14px;background:radial-gradient(ellipse at 78% 42%,#5d58a533,transparent 36%),linear-gradient(115deg,#111a2b,#111522 65%,#1b1930)}
.home-copy{flex:1;min-width:0}
.home-carousel{width:min(100%,440px);min-width:0;overflow:hidden;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-left:1px solid #39425a;padding-left:clamp(17px,3vw,34px)}
.home-carousel-track{display:flex;width:100%;transform:translate3d(0,0,0)}
.showcase-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(108px,156px) minmax(0,1fr);align-items:center;gap:clamp(14px,2.4vw,24px);padding:8px 4px;box-sizing:border-box}
.showcase-image{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid #7180a6;border-radius:9px;background:#111827;box-shadow:0 16px 38px #0008}
.showcase-image img{width:100%;height:100%;display:block;object-fit:cover}
.showcase-image>span{position:absolute;top:8px;left:8px;padding:4px 7px;background:#080d18df;border:1px solid #ffffff2c;border-radius:5px;color:#eef1ff;font-size:9px;letter-spacing:.05em}
.showcase-info{min-width:0}.showcase-info .eyebrow{color:#b8acd9;font-size:9px;line-height:1.5}
.showcase-info h2{font:600 clamp(17px,2.1vw,23px)/1.2 var(--display);margin:8px 0;color:#f0f1f7}
.showcase-info p{font-size:11px;line-height:1.6;color:#b2bad0;margin:0}
.showcase-variant{display:inline-block;margin-top:10px;padding:4px 8px;border:1px solid #c3a85a66;border-radius:5px;color:#eed68f;text-transform:uppercase;letter-spacing:.1em;font-size:8px}
.home-carousel-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 5px 0;color:#9eabc7;font-size:8px;letter-spacing:.16em}
.home-carousel-dots{display:flex;gap:7px}
.home-carousel-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#57627e;cursor:pointer;transition:width .25s,background .25s}
.home-carousel-dots button[aria-current="true"]{width:21px;border-radius:8px;background:#a7b8e3}
@media(max-width:900px){.home-welcome{align-items:center}.home-carousel{width:340px}.showcase-slide{grid-template-columns:minmax(95px,125px) minmax(0,1fr)}}
@media(max-width:720px){.home-welcome{display:block;min-height:unset;padding-bottom:23px}.home-carousel{width:100%;margin-top:25px;border-left:0;border-top:1px solid #39425a;padding:17px 0 0}.showcase-slide{grid-template-columns:minmax(108px,34vw) minmax(0,1fr);gap:16px;min-height:180px}.showcase-info p{font-size:10px}.home-carousel-footer{padding-inline:3px}}
@media(prefers-reduced-motion:reduce){.home-carousel-track{transition:none!important}}
/* Booster: direct click on the pack, then two tactile, tightly stacked piles */
#view[data-page="booster"] .booster-page{max-width:1120px;margin:24px auto 60px}
.booster-intro{text-align:center;margin:25px auto 22px;max-width:680px}
.booster-intro .eyebrow{color:#a9b8dc;letter-spacing:.2em}
.booster-intro h1{font:600 clamp(30px,4vw,46px)/1.08 var(--display);margin:12px 0 9px;color:#f1f2f8}
.booster-intro h1 em{font-style:normal;background:linear-gradient(100deg,#99bcff,#c8a9ff);background-clip:text;-webkit-background-clip:text;color:transparent}
.booster-intro p{max-width:560px;margin:0 auto;color:#b0b9ce;line-height:1.7;font-size:12px}
.booster-lab{position:relative;min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 22px 23px;border:1px solid #39435a;border-radius:15px;overflow:hidden;background:radial-gradient(ellipse at 50% 41%,#34336a4a,transparent 40%),linear-gradient(150deg,#151b2a,#0d111b 68%,#151526);box-shadow:0 26px 70px #0006}
.booster-lab:before{content:"";position:absolute;inset:10% 17%;border:1px solid #7787b310;border-radius:50%;pointer-events:none}
.booster-lab-top{position:absolute;top:24px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;color:#acb8d5;font-size:9px;letter-spacing:.15em}
.booster-stock{color:#bec9e3}
.booster-pack-launch{position:relative;display:block;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;transition:transform .28s ease,filter .28s ease}
.booster-pack-main{width:clamp(205px,25vw,280px);aspect-ratio:2/3;margin:22px auto 4px;filter:drop-shadow(0 26px 30px #0009)}
.booster-pack-main:before{content:"";position:absolute;z-index:2;left:3%;right:3%;top:0;height:7%;background:linear-gradient(180deg,#dfe8ff35,#12172225);clip-path:polygon(0 0,100% 0,96% 84%,4% 100%);transform-origin:50% 0;transition:transform .38s ease}
.booster-pack-main:after{content:"";position:absolute;inset:2px;border:1px solid #c3d3ff4a;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.booster-pack-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;box-shadow:0 16px 38px #0007}
.booster-pack-main:not(:disabled):hover{transform:translateY(-7px) rotate(-1deg);filter:drop-shadow(0 31px 38px #000b) drop-shadow(0 0 15px #8999d926)}
.booster-pack-main:not(:disabled):hover:before{transform:rotateX(18deg)}
.booster-pack-main:focus-visible{outline:2px solid #bbcaff;outline-offset:7px;border-radius:7px}
.booster-pack-main:disabled{cursor:default;filter:grayscale(.15) brightness(.69) drop-shadow(0 22px 28px #0008)}
.pack-ready-mark{position:absolute;right:-8px;top:11%;color:#d8c18a;text-shadow:0 0 15px #e0bd7066;font-size:14px}
.booster-countdown{min-height:30px;margin-top:12px;font:600 clamp(17px,2vw,21px) var(--display);color:#dfe6fa;font-variant-numeric:tabular-nums}
.booster-countdown span{font:500 9px var(--font);color:#a7b3cb;margin:0 5px}
.booster-click-hint{margin:4px 0;color:#aeb8cb;font-size:10px;letter-spacing:.04em;text-align:center}
.booster-balance{margin-top:20px;color:#a3aec5;font-size:9px;letter-spacing:.07em}.booster-balance span{padding:0 7px;color:#727d96}
.extra-packs{width:min(100%,490px);margin-top:18px;text-align:center}.extra-packs>.eyebrow{font-size:8px;letter-spacing:.15em}.extra-packs>div{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.booster-pack-small{width:53px;text-align:center;filter:drop-shadow(0 5px 8px #0008)}.booster-pack-small img{width:38px;height:57px;object-fit:cover;border-radius:3px;display:block;margin:auto}.booster-pack-small span{display:block;margin-top:4px;color:#b7c2d8;font-size:8px;white-space:nowrap}.booster-pack-small:hover{transform:translateY(-3px)}
.booster-page .history-section{margin-top:28px}
.booster-page .history-row{padding:13px 16px}
.booster-feedback:empty{display:none}
@media(max-width:720px){#view[data-page="booster"] .booster-page{margin:12px auto 28px}.booster-intro{margin:15px auto 18px}.booster-intro h1{font-size:32px}.booster-lab{min-height:535px;padding:22px 14px 20px;border-radius:13px}.booster-lab-top{top:17px;left:15px;right:15px}.booster-pack-main{width:clamp(190px,60vw,255px)}.booster-countdown{margin-top:10px}}
@media(max-width:390px){.booster-intro h1{font-size:28px}.booster-lab{min-height:500px}}
/* New physical reveal sequence */
#modal:has(.booster-modal){padding:clamp(8px,2vw,20px)}
#modal:has(.booster-modal)>.modal{display:block;width:min(1000px,96vw);height:auto;max-height:96dvh;min-height:0;overflow:hidden;border:1px solid #48536d;border-radius:14px;background:#10141f;box-shadow:0 34px 100px #000c}
body:has(#modal.booster-locked){overflow:hidden}
.booster-modal.pack-journey{width:100%;max-height:calc(96dvh - 16px);min-height:0;padding:clamp(20px,3vw,34px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#53617b transparent;background:radial-gradient(ellipse at 50% 48%,#30335c35,transparent 48%),linear-gradient(155deg,#141a28,#0b0f18 76%);color:#eef0f7}
.booster-scene-heading{text-align:center;margin-bottom:18px}.booster-scene-heading .eyebrow{color:#adb9d4;letter-spacing:.18em}.booster-scene-heading h2,.booster-final-heading h2{font:600 clamp(23px,3vw,32px)/1.12 var(--display);margin:8px 0;color:#f1f3fa}.booster-scene-heading p,.booster-final-heading p{font-size:11px;color:#b5bfd3;margin:0}
.opening-stage{display:flex;flex-direction:column;align-items:center;min-height:450px;position:relative;overflow:hidden;perspective:1100px}
.pack-display-scene{position:relative;z-index:3;width:clamp(170px,23vw,230px);aspect-ratio:2/3;perspective:1000px;transition:transform .7s,opacity .5s}
.pack-physical{position:absolute;inset:0;transform-origin:50% 5%;overflow:visible;filter:drop-shadow(0 18px 21px #0009);transition:transform .58s cubic-bezier(.2,.78,.25,1),filter .4s}
.pack-artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px}
.pack-top-flap{position:absolute;z-index:2;left:2%;right:2%;top:0;height:9%;background:url('/assets/cards/backs/booster-pack.png') top center/100% 1111% no-repeat;clip-path:polygon(0 0,100% 0,95% 82%,4% 100%);transform-origin:50% 0;opacity:.95;transition:transform .55s cubic-bezier(.18,.74,.22,1)}
.pack-tear{position:absolute;z-index:3;left:5%;right:5%;top:8%;height:2px;background:linear-gradient(90deg,transparent,#d7e4ff,#fff,transparent);opacity:0;transform:rotate(-2deg)}
.pack-shadow{width:75%;height:19px;margin-top:-2px;border-radius:50%;background:#03050a;filter:blur(11px);transition:transform .45s,opacity .45s}
.pack-journey.opening-cut .pack-physical{animation:sachet-shake .35s ease-in-out 2,pack-peel .78s cubic-bezier(.2,.8,.25,1) .64s forwards}
.pack-journey.opening-cut .pack-top-flap{animation:flap-peel .8s cubic-bezier(.2,.8,.25,1) .64s forwards}
.pack-journey.opening-cut .pack-tear{animation:tear-flash .56s ease .4s forwards}
@keyframes sachet-shake{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg) translateX(-3px)}70%{transform:rotate(2deg) translateX(3px)}}
@keyframes pack-peel{to{transform:translateY(-34px) rotate(-5deg) scale(.94);filter:drop-shadow(0 8px 12px #0005)}}
@keyframes flap-peel{to{transform:rotateX(158deg) translateY(-8px);opacity:.68}}
@keyframes tear-flash{to{opacity:.92;transform:rotate(-2deg) translateY(-5px)}}
.pile-table{width:min(100%,760px);display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,35px);margin-top:22px;visibility:hidden;opacity:0;transform:translateY(-20px) scale(.94);transition:opacity .32s,transform .42s;perspective:1100px}
.pack-journey.cards-extracted .pile-table{visibility:visible;opacity:1;transform:none;animation:pile-extract .72s cubic-bezier(.18,.78,.24,1) both}
@keyframes pile-extract{0%{transform:translateY(-54px) scale(.82);filter:brightness(1.3)}65%{transform:translateY(4px) scale(1.015)}100%{transform:none;filter:none}}
.pile-column{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}.pile-label{color:#aebad3;font-size:8px;letter-spacing:.16em;white-space:nowrap}.physical-card-stack{position:relative;width:clamp(128px,17vw,190px);height:auto;aspect-ratio:2/3;flex:0 0 auto;perspective:1000px;transform-style:preserve-3d;filter:drop-shadow(0 11px 14px #0008)}
.physical-card{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:6px;background:transparent;transform:translate(calc(var(--stack-depth)*1.2px),calc(var(--stack-depth)*-1.2px));transform-style:preserve-3d;z-index:calc(20 - var(--stack-depth));cursor:default;overflow:visible;box-shadow:0 1px 1px #000a}
.physical-card.is-top-card[data-reveal-top]{cursor:pointer;touch-action:manipulation}
.physical-card-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .44s cubic-bezier(.2,.73,.2,1);filter:drop-shadow(0 5px 8px #0008)}
.physical-card.is-front .physical-card-inner{transform:rotateY(180deg)}
.card-back-face,.card-front-face{position:absolute;inset:0;display:block;padding:0;border:1px solid #96a5c755;border-radius:6px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#111827}
.card-back-face img,.card-front-face img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border:0}
.card-front-face{transform:rotateY(180deg)}
.pile-divider{color:#818ba2;font-size:19px;opacity:.65}
.revealed-stack .physical-card{cursor:default}
.physical-card.is-being-revealed{z-index:40;filter:drop-shadow(0 12px 22px #000b)}
.physical-card.rarity-rare.reveal-flash{filter:drop-shadow(0 0 10px #73b4eaa0)}
.physical-card.rarity-epic.reveal-flash{filter:drop-shadow(0 0 13px #b37ceba8)}
.physical-card.rarity-legendary.reveal-flash{filter:drop-shadow(0 0 17px #ffe08bcc) drop-shadow(0 0 30px #ce9b3b55)}
.physical-card.variant-gold.reveal-flash{filter:drop-shadow(0 0 16px #f0ce68c9)}
.physical-card.variant-shiny.reveal-flash{filter:drop-shadow(0 0 12px #8ce8ffd0) drop-shadow(0 0 22px #ba92ff88)}
.physical-card.variant-shiny.reveal-flash .card-front-face:after,.physical-card.variant-gold.reveal-flash .card-front-face:after,.physical-card.rarity-epic.reveal-flash .card-front-face:after,.physical-card.rarity-legendary.reveal-flash .card-front-face:after{content:"";position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(112deg,transparent 38%,#ffffff45 49%,transparent 60%);animation:rarity-glint .95s ease-out both}
@keyframes rarity-glint{from{transform:translateX(-36%)}to{transform:translateX(36%)}}
.pack-opening-note{text-align:center;min-height:16px;color:#aeb8cc;font-size:9px;margin:2px 0 0}
.booster-final{padding:10px 0 2px;text-align:center}.booster-final-heading{margin-bottom:17px}.booster-final-heading .eyebrow{color:#acbadd;letter-spacing:.18em}
.booster-final-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,1.6vw,17px);max-width:780px;margin:0 auto 20px}
.booster-final-card{min-width:0;text-align:left;overflow:hidden;border:1px solid #38435a;border-radius:9px;background:#141a28;box-shadow:0 8px 20px #0005}
.booster-final-card>div{aspect-ratio:2/3;background:#0d111a;overflow:hidden}.booster-final-card img{display:block;width:100%;height:100%;object-fit:cover}
.booster-final-card>span,.booster-final-card>b,.booster-final-card>small{display:block;margin:6px 9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.booster-final-card>span{color:#aeb8ce;font-size:8px}.booster-final-card>b{font-size:10px;color:#f0f1f6}.booster-final-card>small{margin:4px 9px 9px;color:#c0aedc;font-size:8px}
.booster-send-dex{min-width:min(100%,300px);min-height:46px}
.pack-journey.is-finishing .opening-stage{animation:piles-away .4s ease both}
@keyframes piles-away{to{opacity:0;transform:translateY(-14px) scale(.97)}}
@media(max-width:720px){.opening-stage{min-height:390px}.pile-table{gap:10px;margin-top:16px}.physical-card-stack{width:clamp(115px,36vw,155px)}.pack-display-scene{width:clamp(160px,48vw,205px)}.pile-divider{font-size:14px}.booster-final-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.booster-final-card{border-radius:7px}.booster-final-card>span,.booster-final-card>b,.booster-final-card>small{margin-inline:6px;font-size:7px}.booster-final-card>b{font-size:8px}}
@media(max-width:410px){.opening-stage{min-height:340px}.pile-table{gap:7px}.physical-card-stack{width:clamp(105px,35vw,132px)}.pack-display-scene{width:clamp(148px,46vw,178px)}.booster-modal.pack-journey{padding:18px 10px}.booster-final-grid{gap:5px}.booster-final-card>span,.booster-final-card>small{font-size:6px}.booster-final-card>b{font-size:7px}}
@media(prefers-reduced-motion:reduce){.booster-pack-main,.pack-physical,.pack-top-flap,.pile-table,.physical-card-inner,.home-carousel-track{transition-duration:.01ms!important;animation-duration:.01ms!important}.booster-pack-main:not(:disabled):hover{transform:none}}
@media(min-width:721px){.sidebar:not(:hover) .side-label{display:none}.sidebar:hover .side-label{display:block}}
#modal .pile-table .physical-card-stack[data-pile="revealed"]{display:block!important;width:clamp(128px,17vw,190px);height:auto;aspect-ratio:2/3;min-height:0}
#modal .pile-table .physical-card-stack[data-pile="revealed"]:empty{border:1px dashed #8896ad36;border-radius:7px;background:linear-gradient(145deg,#ffffff03,#00000008)}
@media(max-width:720px){#modal .pile-table .physical-card-stack[data-pile="revealed"]{width:clamp(115px,36vw,155px)}}
@media(max-width:410px){#modal .pile-table .physical-card-stack[data-pile="revealed"]{width:clamp(105px,35vw,132px)}}
/* Keep card faces readable across engines when the 3D parent has completed its turn */
#modal .pack-journey .card-back-face{opacity:1;visibility:visible;transition:opacity .12s ease,visibility .12s}
#modal .pack-journey .card-front-face{opacity:0;visibility:hidden;transition:opacity .16s ease .14s,visibility .16s ease .14s}
#modal .pack-journey .physical-card.is-front .card-back-face{opacity:0;visibility:hidden}
#modal .pack-journey .physical-card.is-front .card-front-face{opacity:1;visibility:visible}
#modal .pack-journey .revealed-stack .physical-card{position:absolute;inset:0;width:100%;height:100%;min-width:0;flex:none;transform:translate(calc(var(--stack-depth)*1.2px),calc(var(--stack-depth)*-1.2px));border:0;border-radius:6px;overflow:visible;cursor:default}

#modal.booster-locked .modal-close{display:none}

/* The torn foil remains beside the cards; the cards never rotate as a mirrored stack. */
.pack-journey.cards-extracted .opening-stage{display:grid;grid-template-columns:minmax(112px,.42fr) minmax(0,1.58fr);gap:clamp(12px,2vw,26px);align-items:center;min-height:370px}
.pack-journey.cards-extracted .pack-display-scene{grid-column:1;justify-self:center;width:clamp(112px,14vw,150px);transform:rotate(-7deg)}
.pack-journey.cards-extracted .pack-physical{transform:translateY(-10px) rotate(-5deg) scale(.96)}
.pack-journey.cards-extracted .pack-artwork{z-index:0}
.pack-journey.cards-extracted .pack-physical:after{content:"";position:absolute;z-index:1;left:4%;right:4%;top:2%;height:12%;background:linear-gradient(180deg,#080b16,#292740);clip-path:polygon(0 0,100% 0,96% 68%,82% 100%,68% 76%,53% 100%,38% 74%,22% 100%,6% 72%);pointer-events:none}
.pack-journey.cards-extracted .pack-artwork{clip-path:polygon(0 13%,12% 9%,24% 13%,37% 9%,50% 14%,62% 10%,75% 14%,88% 9%,100% 13%,100% 100%,0 100%)}
.pack-journey.cards-extracted:not(.opening-cut) .pack-top-flap{z-index:3;left:31%;top:-2%;width:64%;height:12%;transform:translate(48px,39px) rotate(20deg);opacity:.96!important;filter:brightness(1.25) saturate(1.15);box-shadow:0 12px 18px #0008;clip-path:polygon(0 0,100% 0,96% 74%,82% 100%,67% 83%,51% 100%,35% 78%,19% 98%,4% 76%);background-color:#343251}
.pack-journey.cards-extracted .pack-shadow{transform:translate(-8px,3px) scale(.82);opacity:.78}
.pack-journey.cards-extracted .pile-table{grid-column:2;width:100%;gap:clamp(8px,1.5vw,20px);margin:0;transform:translate(14px,0) scale(.94);animation:pile-emerge .72s cubic-bezier(.18,.78,.24,1) both}
@keyframes pile-emerge{0%{opacity:0;transform:translate(-116px,-6px) scale(.82) rotate(-3deg);filter:blur(2px) brightness(1.35)}62%{opacity:1;transform:translate(8px,2px) scale(1.02) rotate(.5deg);filter:none}100%{opacity:1;transform:none;filter:none}}
.pack-journey.cards-extracted .physical-card-stack{width:clamp(112px,15vw,170px)}
#modal .pack-journey .revealed-stack .physical-card{position:absolute;inset:0;width:100%;height:100%;min-width:0;flex:none;transform:translate(calc(var(--stack-depth)*1.2px),calc(var(--stack-depth)*-1.2px))!important;border:0;border-radius:6px;overflow:visible;cursor:default}
#modal .pack-journey .revealed-stack .physical-card-inner{transform:none!important}
#modal .pack-journey .revealed-stack .card-back-face{display:none}
#modal .pack-journey .revealed-stack .card-front-face{transform:none!important;backface-visibility:visible;-webkit-backface-visibility:visible}
.modal-image-mystery{background-color:#10131c!important;background-image:radial-gradient(ellipse at 50% 42%,#59617a55,transparent 34%),repeating-linear-gradient(135deg,#ffffff06 0 1px,transparent 1px 10px)!important}
.modal-image-mystery::after{background:linear-gradient(180deg,transparent 50%,#0b0d13e8)!important}
.modal-image-mystery .modal-id{color:#d0d5e2}
@media(max-width:720px){.pack-journey.cards-extracted .opening-stage{grid-template-columns:82px minmax(0,1fr);gap:8px;min-height:320px}.pack-journey.cards-extracted .pack-display-scene{width:clamp(82px,24vw,120px)}.pack-journey.cards-extracted .pile-table{gap:5px}.pack-journey.cards-extracted .physical-card-stack{width:clamp(98px,29vw,130px)}.pack-journey.cards-extracted .pack-top-flap{transform:translate(35px,29px) rotate(20deg)}}

/* Physical booster opening: one visible card on top of the stack inside the cut sachet. */
#modal .pack-journey .opening-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.34fr);gap:clamp(18px,4vw,56px);align-items:center;min-height:min(62vh,560px);padding:12px clamp(12px,4vw,52px);overflow:visible}
#modal .pack-journey .pack-display-scene{position:relative;display:grid;place-items:center;justify-self:center;width:100%;height:clamp(410px,60vh,570px);min-width:0;overflow:visible;isolation:isolate;transform:none!important}
#modal .pack-journey .pack-physical{position:absolute;z-index:2;left:50%;top:50%;width:clamp(220px,25vw,300px);aspect-ratio:2/3;overflow:visible;transform:translate(-50%,-50%);transform-origin:center;filter:drop-shadow(0 8px 9px #0007);transition:filter .45s ease}
#modal .pack-journey .pack-artwork,#modal .pack-journey .pack-top-flap{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#modal .pack-journey .pack-artwork{z-index:2;transition:clip-path .4s ease}
#modal .pack-journey .pack-top-flap{z-index:4;background:none!important;background-color:transparent!important;clip-path:polygon(0 0,100% 0,100% 13%,87% 16%,73% 13%,59% 17%,45% 13%,29% 16%,14% 13%,0 16%);transition:opacity .3s ease}
#modal .pack-journey .pack-tear{position:absolute;z-index:5;left:1%;right:1%;top:14%;height:3px;display:block;opacity:0;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#f58ab6,#fff,#a9ccff);box-shadow:0 0 14px #fff9}
#modal .pack-journey.cards-extracted .pack-physical:after{content:"";position:absolute;z-index:3;left:4%;right:4%;top:12%;height:8%;display:block;background:linear-gradient(180deg,#080a12,#23283c 52%,#10121a);clip-path:polygon(0 0,100% 0,96% 54%,82% 100%,68% 54%,53% 100%,38% 53%,22% 100%,6% 50%);box-shadow:inset 0 5px 10px #000b;pointer-events:none}
#modal .pack-journey .pack-shadow{position:absolute;z-index:0;left:50%;bottom:40px;width:220px;height:24px;border-radius:50%;background:#0009;filter:blur(16px);transform:translateX(-50%);transition:all .6s ease}
#modal .pack-journey .contained-card-stack{position:absolute;z-index:1;left:50%;top:50%;width:clamp(164px,18vw,218px);aspect-ratio:2/3;transform:translate(-50%,-64%);visibility:hidden;opacity:0;pointer-events:none}
#modal .pack-journey .contained-card-stack:before,#modal .pack-journey .revealed-stack:not(:empty):before{content:"";position:absolute;z-index:0;inset:1px;border-radius:9px;background:#e7edf6;box-shadow:0 3px 0 #69758a,0 7px 14px #0008;transform:translateY(5px);pointer-events:none}
#modal .pack-journey .unpacked-card{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;padding:0;border:2px solid var(--rarity-color,#b9c9ea);border-radius:9px;background:#101725;overflow:visible;cursor:pointer;isolation:isolate;box-shadow:0 9px 22px #0009;transform:none;z-index:calc(100 - var(--stack-depth));transition:filter .2s,transform .18s cubic-bezier(.2,.7,.2,1)}
#modal .pack-journey .contained-card-stack.is-peeking{cursor:grabbing}
#modal .pack-journey .contained-card-stack.is-peeking .unpacked-card:not([data-stack-top]){filter:brightness(1.14) saturate(1.18)}
#modal .pack-journey .unpacked-card:before{content:"";position:absolute;z-index:0;inset:0;border:1px solid #f4f6fa;border-radius:9px;background:#e0e6f0;transform:translateY(5px);pointer-events:none}
#modal .pack-journey .unpacked-front,#modal .pack-journey .unpacked-back{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:8px;overflow:hidden}
body>.booster-flight{border:1px solid #b9c9ea;border-radius:9px;background:#101725;box-shadow:0 15px 34px #000c;overflow:visible}
body>.booster-flight .unpacked-front{position:absolute;inset:0;display:block;width:100%;height:100%;visibility:visible!important;z-index:2;border-radius:8px;overflow:hidden}
body>.booster-flight .unpacked-front img{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover}
body>.booster-flight .unpacked-back{display:none}
body>.booster-flight .new-badge{position:absolute;z-index:10;top:-13px;left:50%;transform:translateX(-50%);padding:5px 9px;border:1px solid #f58ab6;border-radius:4px;background:linear-gradient(135deg,#ffc0d9,#d94f88);box-shadow:0 4px 14px #000b;color:#211a0c;font:900 10px/1 var(--display,Arial,sans-serif);letter-spacing:.14em}
#modal .pack-journey .unpacked-front{z-index:1;visibility:hidden}
#modal .pack-journey .unpacked-front img{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover}
#modal .pack-journey .unpacked-back{z-index:2;border:4px solid #e8edf7;background:linear-gradient(135deg,#25375e,#131d34 52%,#334b75);box-shadow:inset 0 0 0 2px #8da6d0,inset 0 0 22px #080f20}
#modal .pack-journey .unpacked-back:after{content:"SD";position:absolute;inset:0;display:grid;place-items:center;color:#ffffff20;font:900 42px/1 var(--display,Arial,sans-serif);letter-spacing:.08em}
#modal .pack-journey .contained-card-stack .unpacked-card[data-stack-top] .unpacked-front,#modal .pack-journey .unpacked-card.is-being-revealed .unpacked-front{visibility:visible}
#modal .pack-journey .contained-card-stack .unpacked-card[data-stack-top] .unpacked-back,#modal .pack-journey .unpacked-card.is-being-revealed .unpacked-back{visibility:hidden}
#modal .pack-journey .revealed-stack .unpacked-front{visibility:visible}
#modal .pack-journey .revealed-stack .unpacked-back{display:none}
#modal .pack-journey .unpacked-card:disabled{cursor:default;opacity:1}
#modal .pack-journey .contained-card-stack .unpacked-card:not([data-stack-top]){cursor:default;pointer-events:none}
#modal .pack-journey .contained-card-stack .unpacked-card[data-stack-top]{pointer-events:auto}
#modal .pack-journey .contained-card-stack .unpacked-card:not([data-stack-top]) .new-badge,#modal .pack-journey .revealed-stack .new-badge{display:none}
#modal .pack-journey .contained-card-stack .unpacked-card:not([data-stack-top]) .unpacked-number{display:none}
#modal .pack-journey .contained-card-stack .unpacked-card[data-stack-top] .unpacked-front{animation:card-appears .32s cubic-bezier(.18,.8,.2,1) both}
@keyframes card-appears{from{transform:translateY(16px) scale(.96);filter:brightness(.55)}to{transform:translateY(0) scale(1);filter:brightness(1)}}
#modal .pack-journey .unpacked-card[data-stack-top]:hover{filter:brightness(1.04)}
#modal .pack-journey .unpacked-number{position:absolute;left:5px;bottom:5px;padding:3px 5px;border-radius:4px;background:#080b12e8;color:#f2f3f8;font-size:9px;line-height:1.2}
#modal .pack-journey .new-badge{position:absolute;z-index:120;top:-13px;left:50%;transform:translateX(-50%);padding:5px 9px;border:1px solid #f58ab6;border-radius:4px;background:linear-gradient(135deg,#ffc0d9,#d94f88);box-shadow:0 4px 14px #000b;color:#211a0c;font:900 10px/1 var(--display,Arial,sans-serif);letter-spacing:.14em}
#modal .pack-journey.opening-start .opening-stage{grid-template-columns:minmax(0,1fr) minmax(0,0fr);min-height:min(62vh,560px)}
#modal .pack-journey.opening-start .revealed-column{visibility:hidden;opacity:0}
#modal .pack-journey.opening-start .pack-physical{animation:booster-object-grow .7s cubic-bezier(.16,.82,.2,1) both}
@keyframes booster-object-grow{from{transform:translate(-50%,-50%) scale(.68)}to{transform:translate(-50%,-50%) scale(1)}}
#modal .pack-journey .contained-card-stack{visibility:hidden;opacity:0}
#modal .pack-journey.opening-cut .pack-tear{opacity:1;animation:tear-left-to-right .72s cubic-bezier(.2,.8,.2,1) .08s forwards}
#modal .pack-journey.opening-cut .opening-stage{grid-template-columns:minmax(0,1fr) minmax(0,.34fr);transition:grid-template-columns .85s cubic-bezier(.2,.8,.2,1) .62s}
#modal .pack-journey.opening-cut .revealed-column{visibility:visible;opacity:1;transition:opacity .38s ease .82s}
@keyframes tear-left-to-right{0%{transform:scaleX(0);opacity:1}85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.2}}
#modal .pack-journey.opening-cut .pack-artwork{clip-path:polygon(0 15%,13% 12%,27% 16%,40% 12%,54% 16%,69% 12%,84% 16%,100% 13%,100% 100%,0 100%)}
#modal .pack-journey.opening-cut .pack-physical{animation:booster-drop 1.18s cubic-bezier(.52,.02,.82,.34) .62s forwards}
@keyframes booster-drop{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}100%{transform:translate(-50%,112vh) rotate(7deg) scale(.84)}}
#modal .pack-journey.opening-cut .pack-top-flap{animation:flap-tear-away .76s cubic-bezier(.2,.75,.2,1) .12s forwards}
@keyframes flap-tear-away{to{transform:translate(45px,-53px) rotate(16deg);opacity:0}}
#modal .pack-journey.opening-cut .contained-card-stack{visibility:visible;opacity:1}
#modal .pack-journey.pack-open .pack-artwork{clip-path:polygon(0 15%,13% 12%,27% 16%,40% 12%,54% 16%,69% 12%,84% 16%,100% 13%,100% 100%,0 100%)}
#modal .pack-journey.pack-open .pack-physical{transform:translate(-50%,112vh) rotate(7deg) scale(.84);filter:drop-shadow(0 7px 9px #0007)}
#modal .pack-journey.pack-open .pack-top-flap{opacity:0}
#modal .pack-journey.cards-extracted .pack-physical:after{display:block!important}
#modal .pack-journey.pack-open .contained-card-stack{visibility:visible;opacity:1;transform:translate(-50%,-64%)}
#modal .pack-journey .revealed-column{align-self:center;display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0;visibility:visible;opacity:1}
#modal .pack-journey .pile-label{font-size:10px;letter-spacing:.16em;color:#bdc9df}
#modal .pack-journey .revealed-stack{position:relative;width:clamp(130px,16vw,195px);height:auto;aspect-ratio:2/3;min-height:0;overflow:visible;border:1px dashed #8896ad50;border-radius:9px;background:linear-gradient(145deg,#ffffff04,#0000000c)}
#modal .pack-journey .revealed-stack:empty{display:block}
#modal .pack-journey .revealed-stack .unpacked-card{position:absolute;inset:0;width:100%;height:100%;transform:none;z-index:calc(100 - var(--stack-depth));cursor:default}
#modal .pack-journey .revealed-stack .unpacked-card[data-top-card]{transform:none}
#modal .pack-journey .pack-opening-note{margin-top:2px;color:#aeb9cf;font-size:11px}
@media(max-width:720px){#modal .pack-journey .opening-stage{grid-template-columns:minmax(0,1fr) minmax(104px,.42fr);gap:8px;min-height:460px;padding:8px 8px}#modal .pack-journey .pack-display-scene{height:410px}#modal .pack-journey .pack-physical{width:clamp(178px,48vw,220px)}#modal .pack-journey .contained-card-stack{width:clamp(142px,38vw,172px)}#modal .pack-journey .revealed-stack{width:clamp(100px,26vw,130px)}#modal .pack-journey .pile-label{font-size:8px}#modal .pack-journey.opening-start .pack-physical{width:clamp(204px,56vw,250px)}}
@media(max-width:720px){#modal .pack-journey.opening-start .opening-stage{grid-template-columns:minmax(0,1fr) minmax(0,0fr)}#modal .pack-journey.opening-cut .opening-stage{grid-template-columns:minmax(0,1fr) minmax(0,.42fr)}}
@media(prefers-reduced-motion:reduce){#modal .pack-journey .pack-physical,#modal .pack-journey .pack-top-flap,#modal .pack-journey .pack-tear,#modal .pack-journey .contained-card-stack{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}

/* The booster tile uses the same isolated foil object as the opening scene. */
#view[data-page="booster"] .booster-pack-main{filter:drop-shadow(0 9px 12px #0008)}
#view[data-page="booster"] .booster-pack-main:before,#view[data-page="booster"] .booster-pack-main:after{display:none}
#view[data-page="booster"] .booster-pack-main img{object-fit:contain;border-radius:0;box-shadow:none}
#view[data-page="booster"] .booster-pack-small img{object-fit:contain;border-radius:0;box-shadow:none}
.card-cropper{display:grid;grid-template-columns:minmax(130px,220px) minmax(130px,1fr) minmax(180px,1fr);gap:16px;align-items:center;padding:16px;background:#171b22;border:1px solid #343b47;border-radius:14px}.card-cropper>div:first-child{display:grid;gap:5px}.card-cropper small,.crop-controls output{color:#aab4c2}.card-cropper canvas{display:block;max-width:100%;max-height:260px;margin:auto;background:#0c0f14;border-radius:8px}.crop-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.crop-controls label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px}.crop-controls input{grid-column:1/-1;width:100%}.crop-controls button{grid-column:1/-1;justify-self:start}@media(max-width:800px){.card-cropper{grid-template-columns:1fr 1fr}.card-cropper>div:first-child{grid-column:1/-1}.card-cropper canvas{grid-row:span 2}}@media(max-width:520px){.card-cropper{grid-template-columns:1fr}.card-cropper canvas{grid-row:auto;max-height:220px}}
.sd-toast-stack{position:fixed;z-index:10000;top:20px;right:20px;display:grid;gap:10px;width:min(370px,calc(100vw - 32px));pointer-events:none}.sd-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;width:100%;padding:16px 18px;border:1px solid rgba(177,245,207,.38);border-radius:16px;background:linear-gradient(135deg,#142d25f5,#101a1af5);color:#f5fff8;text-align:left;box-shadow:0 18px 55px #0008,0 0 28px #37d98b22;backdrop-filter:blur(18px);cursor:pointer;animation:sd-toast-in .32s cubic-bezier(.2,.8,.2,1)}.sd-toast-mark{display:grid;place-items:center;flex:0 0 29px;height:29px;border-radius:50%;background:#60e39b;color:#0c2117;font-weight:900}.sd-toast span:last-child{display:grid;gap:5px}.sd-toast b{font-size:14px;letter-spacing:.02em}.sd-toast small{color:#d2ded7;font-size:12px;line-height:1.45}.sd-toast em{color:#76edaa;font-size:11px;font-style:normal;font-weight:700}.sd-toast-leaving{opacity:0;transform:translateX(12px);transition:opacity .28s,transform .28s}@keyframes sd-toast-in{from{opacity:0;transform:translate(12px,-8px) scale(.98)}to{opacity:1;transform:translate(0) scale(1)}}@media(max-width:600px){.sd-toast-stack{top:10px;right:10px;width:calc(100vw - 20px)}}

/* Leaderboard */
.ranking-tabs{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 14px;scrollbar-width:thin}
.ranking-tab{flex:0 0 auto;padding:10px 15px;border:1px solid #333e56;border-radius:999px;background:#111725;color:#aeb8cd;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.2s}
.ranking-tab:hover{border-color:#7189b8;color:#eef3ff}.ranking-tab.selected{border-color:#91b4ff;background:linear-gradient(135deg,#243657,#17253c);color:#f2f6ff;box-shadow:0 5px 20px #6c97ed20}
.ranking-note{margin:12px 2px;color:#8e9ab2;font-size:11px}
.ranking-board{padding:clamp(16px,3vw,28px);border:1px solid #303a50;border-radius:20px;background:radial-gradient(ellipse at 50% 0,#273751 0,transparent 55%),linear-gradient(145deg,#151c2a,#0e131e 75%);box-shadow:0 20px 55px #0003}
.ranking-board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}.ranking-board-head h2{margin:6px 0 0;font-size:clamp(22px,3vw,30px);letter-spacing:-.04em}.ranking-board-head>span{color:#aab5ca;font-size:12px}
.ranking-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;margin:0 auto 22px;max-width:850px}
.ranking-podium-card{position:relative;display:flex;min-height:190px;align-items:center;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px 12px;border:1px solid #37445c;border-radius:16px;background:linear-gradient(165deg,#202a3b,#111722);text-align:center;overflow:hidden}
.ranking-podium-card.place-1{min-height:220px;border-color:#d97ca2;background:radial-gradient(ellipse at 50% 0,#f58ab614,transparent 72%),linear-gradient(165deg,#29202a,#151923);box-shadow:0 0 38px #f58ab614}.ranking-podium-card small{color:#aeb8ca;font-size:9px;letter-spacing:.14em}.ranking-podium-card b{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#edf2fc;font-size:14px}.ranking-podium-card strong{color:#ffb6d1;font-size:14px}.ranking-podium-card>span:last-child{color:#9eabc1;font-size:10px;line-height:1.4}.ranking-medal{position:absolute;top:11px;right:13px;color:#f58ab6;font-size:18px}.ranking-avatar{display:grid;width:40px;height:40px;place-items:center;overflow:hidden;border:1px solid #55647e;border-radius:50%;background:#27334a;color:#e8eeff;font-weight:800}.ranking-avatar img{width:100%;height:100%;object-fit:cover}.ranking-avatar.small{width:30px;height:30px;font-size:11px}
.ranking-list{display:grid;gap:7px}.ranking-row{display:grid;grid-template-columns:42px 34px minmax(90px,1fr) minmax(100px,1.25fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #293349;border-radius:12px;background:#101622}.ranking-row.ranking-self{border-color:#7f9fd6;background:#1a273a}.ranking-position{color:#a6b5d2;font-size:12px;font-weight:800}.ranking-row b{overflow:hidden;color:#e8edf8;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.ranking-row b i{margin-left:7px;color:#a8c5ff;font-size:9px;font-style:normal}.ranking-detail{overflow:hidden;color:#97a4bc;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.ranking-row strong{color:#ffb6d1;font-size:12px;text-align:right}
.ranking-empty{padding:24px;text-align:center}
@media(max-width:600px){.ranking-podium{gap:6px}.ranking-podium-card{min-height:165px;padding:13px 6px}.ranking-podium-card.place-1{min-height:190px}.ranking-podium-card b{font-size:11px}.ranking-podium-card>span:last-child{font-size:9px}.ranking-row{grid-template-columns:28px 30px minmax(70px,1fr) auto;gap:7px;padding:9px}.ranking-detail{display:none}.ranking-tab{padding:9px 12px;font-size:11px}}

/* Wallet shortcut and claimable rewards */
.rewards-shortcut{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid #42516a;border-radius:999px;background:linear-gradient(135deg,#1b293a,#131a27);color:#e9efff;font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:border-color .18s,transform .18s,background .18s}.rewards-shortcut:hover{transform:translateY(-1px);border-color:#a3c0fb;background:#24334a}.rewards-shortcut>span{color:#f58ab6;font-size:17px}.rewards-badge{position:absolute;top:-7px;right:-6px;display:grid;min-width:18px;height:18px;place-items:center;padding:0 5px;border:2px solid #0c111b;border-radius:20px;background:#f58ab6;color:#1b1a14;font-size:9px;font-style:normal;font-weight:800}.rewards-badge[hidden]{display:none}
.rewards-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 18px;padding:20px 22px;border:1px solid #465269;border-radius:16px;background:radial-gradient(ellipse at 0 0,#b1c8ff16,transparent 60%),#121927}.rewards-summary h2{margin:6px 0;font-size:22px;letter-spacing:-.04em}.rewards-summary p,.reward-copy p{margin:5px 0;color:#a3aec2;font-size:12px;line-height:1.5}.rewards-list{display:grid;gap:10px}.reward-card{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:17px;padding:14px;border:1px solid #2f3b52;border-radius:16px;background:linear-gradient(120deg,#171f2d,#101520);box-shadow:0 12px 35px #0002}.reward-art{display:grid;width:78px;height:96px;place-items:center;overflow:hidden;border:1px solid #3d4b64;border-radius:11px;background:radial-gradient(circle,#34425b,#151b27);color:#ffb6d1;font-size:30px}.reward-art.has-image{background:#0b1018}.reward-art img{width:100%;height:100%;object-fit:cover}.reward-copy{display:grid;gap:5px;min-width:0}.reward-copy h2{margin:0;color:#eef2fb;font-size:17px}.reward-copy strong{color:#ffb6d1;font-size:14px}.reward-copy small{color:#77859d;font-size:10px}.reward-claim{white-space:nowrap}.rewards-empty{display:grid;justify-items:center;gap:8px;margin-top:12px;padding:56px 20px;border:1px dashed #3a465b;border-radius:18px;background:linear-gradient(145deg,#131a26,#0e131c);text-align:center}.rewards-empty>span{color:#f58ab6;font-size:38px}.rewards-empty h2{margin:4px 0;font-size:24px}.rewards-empty p{max-width:440px;margin:0 0 10px;color:#a2aec3;font-size:12px;line-height:1.6}
@media(max-width:640px){.top-actions{gap:6px}.rewards-shortcut{min-height:32px;padding:0 8px;gap:4px}.rewards-shortcut b{font-size:10px}.top-credits{padding:6px 7px;font-size:9px}.reward-card{grid-template-columns:58px minmax(0,1fr);gap:11px;padding:11px}.reward-art{grid-row:span 2;width:58px;height:76px}.reward-copy h2{font-size:14px}.reward-copy p{font-size:10px}.reward-claim{grid-column:2;justify-self:start;padding:8px 12px;font-size:11px}.rewards-summary{align-items:flex-start;padding:16px}.rewards-summary h2{font-size:18px}.rewards-summary p{font-size:10px}.rewards-summary .button-quiet{padding:8px 10px;font-size:10px}}

.reward-admin-hint{margin:-7px 0 18px;color:#a2abc0;font-size:11px;line-height:1.55}

/* Use the same printed SD back artwork on every newly imported card. */
#modal .pack-journey .unpacked-back{border:0;background:#111 url('/assets/cards/backs/card-back.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px #dce5f288}
#modal .pack-journey .unpacked-back:after{content:none}


/* Tilt and foil only on the enlarged card face; the detail panel stays still. */
#modal.open .card-tilt-target{position:relative;z-index:2;transform-style:preserve-3d;will-change:transform;--card-tilt-x:0deg;--card-tilt-y:0deg;--card-push-x:0px;--card-push-y:0px;--card-shine-x:50%;--card-shine-y:50%;transition:transform .16s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease}
#modal.open .card-tilt-target:hover{z-index:3;transform:perspective(820px) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y)) translate3d(var(--card-push-x),var(--card-push-y),0);box-shadow:0 28px 64px #000a,0 0 38px #b28aff48}
#modal.open .card-tilt-target::after{inset:0;z-index:1;background:linear-gradient(0deg,#080c16c9,transparent 24%),radial-gradient(ellipse 52% 48% at var(--card-shine-x) var(--card-shine-y),#ffffff9c 0,transparent 73%),linear-gradient(116deg,transparent 28%,#ffffff95 47%,#ffffff24 52%,transparent 72%);opacity:.46;mix-blend-mode:screen;transition:opacity .16s ease,background-position .12s linear}
#modal.open .card-tilt-target:hover::after{opacity:.86}
#modal .modal[data-variant="shiny"] .card-tilt-target{box-shadow:0 0 0 1px #e3c76b,0 0 34px #e7c45a77}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover{box-shadow:0 0 0 2px #fff0b8,0 0 42px #ffe27ccc,0 0 88px #b986ffb8}
#modal .modal[data-variant="shiny"] .card-tilt-target::after{inset:0;background:linear-gradient(0deg,#080c16c9,transparent 24%),radial-gradient(circle at var(--card-shine-x) var(--card-shine-y),#ffffffeb 0,transparent 27%),radial-gradient(circle at 18% 26%,#ff8bd877 0 2px,transparent 4px),radial-gradient(circle at 79% 69%,#8ceaffd0 0 2px,transparent 4px),radial-gradient(circle at 65% 20%,#fff9b8dc 0 1.8px,transparent 4px),repeating-linear-gradient(112deg,transparent 0 7px,#ffffff68 8px,#b69aff75 10px,#8de6ff65 12px,transparent 16px),linear-gradient(115deg,transparent 18%,#ff80d047 38%,#a98aff72 50%,#83eaff70 61%,transparent 82%);background-size:auto,auto,auto,auto,auto,auto,220% 100%;opacity:.58}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover::after{opacity:1;animation:modal-shiny-foil 1.15s ease-in-out infinite alternate}
#modal .modal[data-variant="shiny"] .card-tilt-target::before{content:"✦  ·  ✧";position:absolute;z-index:2;top:13%;right:9%;color:#fff;text-shadow:0 0 9px #fff,0 0 20px #d9aaff;font-size:20px;letter-spacing:20px;opacity:0;pointer-events:none;transition:opacity .18s ease}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover::before{opacity:1;animation:modal-sparkle 1s ease-in-out infinite alternate}
@keyframes modal-shiny-foil{from{background-position:center,center,center,center,center,center,0% 50%;filter:brightness(1)}to{background-position:center,center,center,center,center,center,100% 50%;filter:brightness(1.24)}}
@keyframes modal-sparkle{from{transform:translateY(1px) scale(.88);filter:brightness(.85)}to{transform:translateY(-4px) scale(1.16);filter:brightness(1.7)}}
@media(hover:none){#modal.open .card-tilt-target:hover{transform:none}}
@media(prefers-reduced-motion:reduce){#modal.open .card-tilt-target{transition:none}#modal.open .card-tilt-target:hover{transform:none}#modal.open .card-tilt-target::after,#modal .modal[data-variant="shiny"] .card-tilt-target::before{animation:none!important}}

/* The enlarged preview removes a dark matte connected to the image edges, then
   uses that cleaned alpha as a mask so foil never spills into the display bay. */
#modal .modal-card-stage .card-tilt-target.card-art-isolated{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
#modal .modal-card-stage .card-tilt-target.card-art-isolated>img{border-radius:0;filter:drop-shadow(0 12px 18px #0009)}
#modal .modal-card-stage .card-tilt-target.card-art-isolated::before,#modal .modal-card-stage .card-tilt-target.card-art-isolated::after{-webkit-mask-image:var(--card-face-mask);mask-image:var(--card-face-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#modal .modal-card-stage .card-tilt-target.card-art-isolated>.modal-id{z-index:3}

/* Epic and Gold keep a restrained finish: a clean colored edge, not a bright
   animated sheet of foil. Common and Rare retain their existing treatment. */
#modal .modal[data-rarity="epic"] .card-tilt-target{border:0;box-shadow:none}
#modal .modal[data-rarity="epic"] .card-tilt-target>img{filter:drop-shadow(0 0 5px #b47be866) drop-shadow(0 12px 18px #0009)}
#modal .modal[data-rarity="epic"] .card-tilt-target::after{background-image:linear-gradient(118deg,transparent 38%,#e3caff38 49%,#fff4 52%,transparent 63%);opacity:0;animation:none}
#modal .modal[data-rarity="epic"] .card-tilt-target:hover{box-shadow:none}
#modal .modal[data-rarity="epic"] .card-tilt-target:hover>img{filter:brightness(1.02) saturate(1.03) drop-shadow(0 0 8px #c38af099) drop-shadow(0 12px 18px #0009)}
#modal .modal[data-rarity="epic"] .card-tilt-target:hover::after{opacity:.2;animation:none}
#modal .modal[data-variant="gold"] .card-tilt-target{border:0;box-shadow:none}
#modal .modal[data-variant="gold"] .card-tilt-target>img{filter:drop-shadow(0 0 6px #e4bd5966) drop-shadow(0 12px 18px #0009)}
#modal .modal[data-variant="gold"] .card-tilt-target::after{background-image:linear-gradient(118deg,transparent 38%,#ffe6a044 49%,#fff8 52%,transparent 63%);opacity:0;animation:none}
#modal .modal[data-variant="gold"] .card-tilt-target:hover{box-shadow:none}
#modal .modal[data-variant="gold"] .card-tilt-target:hover>img{filter:brightness(1.02) saturate(1.04) drop-shadow(0 0 9px #f1ca7199) drop-shadow(0 12px 18px #0009)}
#modal .modal[data-variant="gold"] .card-tilt-target:hover::after{opacity:.22;animation:none}

/* Shiny is deliberately unmistakable: animated rainbow foil and starbursts,
   clipped to the actual card silhouette rather than its black source canvas. */
#modal .modal[data-variant="shiny"] .card-tilt-target{border:0;box-shadow:none}
#modal .modal[data-variant="shiny"] .card-tilt-target>img{filter:drop-shadow(0 0 9px #9cecffaa) drop-shadow(0 0 16px #c17dff88) drop-shadow(0 12px 18px #0009)}
#modal .modal[data-variant="shiny"] .card-tilt-target::after{background-image:radial-gradient(circle at 13% 17%,#fff 0 2px,transparent 5px),radial-gradient(circle at 81% 25%,#fff7bb 0 2.5px,transparent 6px),radial-gradient(circle at 73% 76%,#a9f3ff 0 2px,transparent 5.5px),radial-gradient(circle at 20% 78%,#ffb9ed 0 2.2px,transparent 5.5px),radial-gradient(circle at 52% 40%,#ffffffc9 0 1.5px,transparent 4px),linear-gradient(112deg,transparent 15%,#ff72d973 31%,#b18bffcc 42%,#80eaffdf 50%,#fff8b9ed 55%,#a3f5d9b8 62%,transparent 78%),repeating-linear-gradient(112deg,transparent 0 11px,#ffffff7d 12px,#c19dffb0 14px,#8ceaff96 17px,transparent 21px);background-size:auto,auto,auto,auto,auto,240% 100%,auto;background-position:center,center,center,center,center,calc(100% - var(--card-shine-x,50%)) 50%,center;opacity:.34;animation:card-shiny-idle 4s ease-in-out infinite alternate}
#modal .modal[data-variant="shiny"] .card-tilt-target::before{content:"✦      ✧      ✦";display:block;padding:14% 9% 0;text-align:right;color:#fff;text-shadow:0 0 6px #fff,0 0 15px #8feaff,0 0 28px #d99cff;font-size:clamp(19px,2.5vw,30px);letter-spacing:.28em;opacity:.65;animation:card-star-twinkle .8s ease-in-out infinite alternate}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover{box-shadow:none}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover>img{filter:brightness(1.09) saturate(1.2) drop-shadow(0 0 13px #8ceaffdd) drop-shadow(0 0 24px #bd83ffcc) drop-shadow(0 12px 18px #0009)}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover::after{opacity:1;animation:card-foil-shiny .85s ease-in-out infinite alternate}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover::before{opacity:1}
@keyframes card-shiny-idle{from{background-position:center,center,center,center,center,20% 50%,center}to{background-position:center,center,center,center,center,80% 50%,center}}

/* Shiny is a rarity in the catalog as well as a variant; style both encodings. */
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target{border:0;box-shadow:none}
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target>img{filter:drop-shadow(0 0 9px #9cecffaa) drop-shadow(0 0 16px #c17dff88) drop-shadow(0 12px 18px #0009)}
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target::after{background-image:radial-gradient(circle at 13% 17%,#fff 0 2px,transparent 5px),radial-gradient(circle at 81% 25%,#fff7bb 0 2.5px,transparent 6px),radial-gradient(circle at 73% 76%,#a9f3ff 0 2px,transparent 5.5px),radial-gradient(circle at 20% 78%,#ffb9ed 0 2.2px,transparent 5.5px),radial-gradient(circle at 52% 40%,#ffffffc9 0 1.5px,transparent 4px),linear-gradient(112deg,transparent 15%,#ff72d973 31%,#b18bffcc 42%,#80eaffdf 50%,#fff8b9ed 55%,#a3f5d9b8 62%,transparent 78%),repeating-linear-gradient(112deg,transparent 0 11px,#ffffff7d 12px,#c19dffb0 14px,#8ceaff96 17px,transparent 21px);background-size:auto,auto,auto,auto,auto,240% 100%,auto;background-position:center,center,center,center,center,calc(100% - var(--card-shine-x,50%)) 50%,center;opacity:.4;animation:card-shiny-idle 4s ease-in-out infinite alternate}
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target::before{content:"✦      ✧      ✦";display:block;padding:14% 9% 0;text-align:right;color:#fff;text-shadow:0 0 6px #fff,0 0 15px #8feaff,0 0 28px #d99cff;font-size:clamp(19px,2.5vw,30px);letter-spacing:.28em;opacity:.72;animation:card-star-twinkle .8s ease-in-out infinite alternate}
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover>img{filter:brightness(1.09) saturate(1.2) drop-shadow(0 0 13px #8ceaffdd) drop-shadow(0 0 24px #bd83ffcc) drop-shadow(0 12px 18px #0009)}
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover::after{opacity:1;animation:card-foil-shiny .85s ease-in-out infinite alternate}
#modal .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover::before{opacity:1}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target::after{opacity:.48!important}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover::after{opacity:1!important}

/* Tilt only the PNG card face; keep its display stage and the detail column fixed. */
#modal .modal-card-stage{position:relative;display:grid;place-items:center;min-width:0;min-height:min(610px,82vh);overflow:visible;padding:24px;background:#080b12;border-right:1px solid #29364c;perspective:1100px}
#modal .modal-card-stage .card-tilt-target{width:auto;height:min(560px,calc(82vh - 52px));min-height:0;max-width:100%;aspect-ratio:2/3;position:relative;overflow:hidden;border:1px solid #ffffff42;border-radius:12px;background:#080b12;box-shadow:0 16px 38px #0009;transform-style:preserve-3d;transform-origin:center;isolation:isolate;will-change:transform;transition:transform .16s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,border-color .2s ease}
#modal .modal-card-stage .card-tilt-target>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;user-select:none;pointer-events:none;transition:filter .2s ease}
#modal .modal-card-stage .card-tilt-target::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(116deg,transparent 37%,#ffffffb5 49%,#ffffff24 53%,transparent 66%);background-size:240% 100%;background-position:calc(100% - var(--card-shine-x,50%)) 50%;opacity:0;mix-blend-mode:screen;transition:opacity .22s ease}
#modal .modal-card-stage .card-tilt-target::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s ease}
#modal.open .modal-card-stage .card-tilt-target:hover{z-index:3;transform:perspective(1100px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)) translate3d(var(--card-push-x,0px),var(--card-push-y,0px),0);box-shadow:0 26px 54px #000b,0 0 25px #b28aff24}
#modal.open .modal-card-stage .card-tilt-target:hover::after{opacity:.08}
#modal .modal[data-rarity="epic"] .card-tilt-target{border-color:#d9b0ff8c;box-shadow:0 0 0 1px #9864c344,0 0 25px #9856d344,0 16px 38px #0009}
#modal .modal[data-rarity="epic"] .card-tilt-target::after{background-image:linear-gradient(116deg,transparent 26%,#9a5be528 39%,#eddbffb8 49%,#9f6be879 54%,transparent 69%),repeating-linear-gradient(116deg,transparent 0 18px,#ffffff17 19px,#9b71d623 22px,transparent 26px)}
#modal .modal[data-rarity="epic"] .card-tilt-target:hover{box-shadow:0 0 0 1px #dcb7ff,0 0 27px #b66bff88,0 0 55px #8150d844,0 26px 54px #000b}
#modal .modal[data-rarity="epic"] .card-tilt-target:hover>img{filter:brightness(1.07) saturate(1.1)}
#modal .modal[data-rarity="epic"] .card-tilt-target:hover::after{opacity:.86;animation:card-foil-two-layer 1.5s ease-in-out infinite alternate}
#modal .modal[data-rarity="legendary"] .card-tilt-target,#modal .modal[data-variant="gold"] .card-tilt-target,#modal .modal[data-variant="shiny"] .card-tilt-target{border:2px solid #ffe6a0;box-shadow:0 0 0 1px #b77d2d,0 0 20px #ffcc5c66,0 16px 38px #0009}
#modal .modal[data-rarity="legendary"] .card-tilt-target::after,#modal .modal[data-variant="gold"] .card-tilt-target::after{background-image:linear-gradient(112deg,transparent 23%,#ffcb4a20 37%,#fff2b6de 48%,#f2ad36a8 53%,transparent 68%),repeating-linear-gradient(112deg,transparent 0 16px,#fff1bb30 17px,#fff1bb0a 21px,transparent 24px)}
#modal .modal[data-rarity="legendary"] .card-tilt-target:hover,#modal .modal[data-variant="gold"] .card-tilt-target:hover{border-color:#fff6c9;box-shadow:0 0 0 1px #fff0a9,0 0 24px #ffd253c9,0 0 48px #ffae3580,0 26px 54px #000b}
#modal .modal[data-rarity="legendary"] .card-tilt-target:hover>img,#modal .modal[data-variant="gold"] .card-tilt-target:hover>img{filter:brightness(1.12) saturate(1.18) contrast(1.04)}
#modal .modal[data-rarity="legendary"] .card-tilt-target:hover::after,#modal .modal[data-variant="gold"] .card-tilt-target:hover::after{opacity:.95;animation:card-foil-two-layer 1.25s ease-in-out infinite alternate}
#modal .modal[data-variant="shiny"] .card-tilt-target{border-color:#fff3bf;box-shadow:0 0 0 1px #ab78ff,0 0 22px #ffdb7080,0 0 44px #9c62ff55,0 16px 38px #0009}
#modal .modal[data-variant="shiny"] .card-tilt-target::after{background-image:radial-gradient(circle at 14% 20%,#fff 0 1.3px,transparent 3px),radial-gradient(circle at 82% 24%,#fff8c9 0 1.8px,transparent 3.8px),radial-gradient(circle at 76% 73%,#9eeeff 0 1.4px,transparent 3.5px),radial-gradient(circle at 21% 78%,#ffc6f0 0 1.5px,transparent 3.5px),linear-gradient(115deg,transparent 19%,#ff86df59 34%,#a88dff91 45%,#9ff4ffd1 51%,#fff8c4a8 55%,transparent 71%),repeating-linear-gradient(112deg,transparent 0 9px,#ffffff51 10px,#b69aff65 12px,#8de6ff5e 14px,transparent 18px);background-size:auto,auto,auto,auto,230% 100%,auto;background-position:center,center,center,center,calc(100% - var(--card-shine-x,50%)) 50%,center;opacity:.72}
#modal .modal[data-variant="shiny"] .card-tilt-target::before{content:"✦     ✧      ✦";display:block;padding:14% 9% 0;text-align:right;color:#fff;text-shadow:0 0 5px #fff,0 0 13px #9feaff,0 0 22px #d99cff;font-size:clamp(16px,2.1vw,25px);letter-spacing:.3em;animation:card-star-twinkle 1.3s ease-in-out infinite alternate}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover{border-color:#fffbd6;box-shadow:0 0 0 1px #fff2bd,0 0 28px #ffe27ccc,0 0 60px #a16affbb,0 0 90px #69dffff0,0 26px 54px #000b}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover>img{filter:brightness(1.16) saturate(1.28) contrast(1.05)}
#modal .modal[data-variant="shiny"] .card-tilt-target:hover::after{opacity:1;animation:card-foil-shiny .95s ease-in-out infinite alternate}
@keyframes card-foil-two-layer{from{background-position:0% 50%,0% 50%;filter:brightness(.94)}to{background-position:100% 50%,100% 50%;filter:brightness(1.24)}}
@keyframes card-foil-shiny{from{background-position:center,center,center,center,0% 50%,center;filter:brightness(.94)}to{background-position:center,center,center,center,100% 50%,center;filter:brightness(1.32)}}
@keyframes card-star-twinkle{from{opacity:.35;filter:brightness(.9);transform:scale(.96)}to{opacity:.95;filter:brightness(1.6);transform:scale(1.03)}}
@media(max-width:800px){#modal .modal-card-stage{min-height:min(48vh,430px);height:min(48vh,430px);padding:14px;border-right:0;border-bottom:1px solid #29364c}#modal .modal-card-stage .card-tilt-target{height:min(45vh,380px)}}
@media(hover:none){#modal.open .modal-card-stage .card-tilt-target:hover{transform:none}}
@media(prefers-reduced-motion:reduce){#modal .modal-card-stage .card-tilt-target,#modal .modal-card-stage .card-tilt-target::after{transition:none}#modal .modal-card-stage .card-tilt-target::before,#modal .modal-card-stage .card-tilt-target:hover::after{animation:none!important}}

/* Keep rarity foil on the card silhouette; avoid washing out the artwork. */
#modal.open .modal[data-rarity="epic"] .card-tilt-target,
#modal.open .modal[data-variant="gold"] .card-tilt-target,
#modal.open .modal[data-rarity="legendary"] .card-tilt-target{border:0;box-shadow:none}
#modal.open .modal[data-rarity="epic"] .card-tilt-target>img{filter:drop-shadow(0 0 4px #bb8be966) drop-shadow(0 12px 18px #0009)}
#modal.open .modal[data-rarity="epic"] .card-tilt-target:hover>img{filter:drop-shadow(0 0 6px #c697ee88) drop-shadow(0 12px 18px #0009)}
#modal.open .modal[data-rarity="epic"] .card-tilt-target::after{background-image:linear-gradient(115deg,transparent 39%,#d8bbf226 49%,#fff3 52%,transparent 63%);opacity:0;animation:none;filter:none}
#modal.open .modal[data-rarity="epic"] .card-tilt-target:hover::after{opacity:.18;animation:none}
#modal.open .modal[data-variant="gold"] .card-tilt-target>img,
#modal.open .modal[data-rarity="legendary"] .card-tilt-target>img{filter:drop-shadow(0 0 5px #edca6870) drop-shadow(0 12px 18px #0009)}
#modal.open .modal[data-variant="gold"] .card-tilt-target:hover>img,
#modal.open .modal[data-rarity="legendary"] .card-tilt-target:hover>img{filter:drop-shadow(0 0 7px #f1d17c90) drop-shadow(0 12px 18px #0009)}
#modal.open .modal[data-variant="gold"] .card-tilt-target::after,
#modal.open .modal[data-rarity="legendary"] .card-tilt-target::after{background-image:linear-gradient(115deg,transparent 40%,#f0cc6220 49%,#fff4 52%,transparent 63%);opacity:0;animation:none;filter:none}
#modal.open .modal[data-variant="gold"] .card-tilt-target:hover::after,
#modal.open .modal[data-rarity="legendary"] .card-tilt-target:hover::after{opacity:.2;animation:none}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target>img{filter:drop-shadow(0 0 7px #9cecff88) drop-shadow(0 0 12px #c17dff70) drop-shadow(0 12px 18px #0009)}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover>img{filter:saturate(1.08) drop-shadow(0 0 10px #8ceaffb0) drop-shadow(0 0 17px #bd83ff99) drop-shadow(0 12px 18px #0009)}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target::after{background-image:radial-gradient(circle at 14% 20%,#fff 0 1px,transparent 3px),radial-gradient(circle at 82% 24%,#fff8c9 0 1.4px,transparent 3.5px),radial-gradient(circle at 76% 73%,#9eeeff 0 1px,transparent 3px),radial-gradient(circle at 21% 78%,#ffc6f0 0 1.2px,transparent 3px),linear-gradient(115deg,transparent 20%,#ff86df38 36%,#a88dff66 46%,#9ff4ff82 51%,#fff8c45c 56%,transparent 73%),repeating-linear-gradient(112deg,transparent 0 13px,#ffffff38 14px,#b69aff42 16px,#8de6ff40 18px,transparent 22px);background-size:auto,auto,auto,auto,230% 100%,auto;background-position:center,center,center,center,calc(100% - var(--card-shine-x,50%)) 50%,center;opacity:.3;filter:none;animation:card-shiny-idle 4s ease-in-out infinite alternate}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover::after{opacity:.36!important;animation:card-shiny-glide 2.2s ease-in-out infinite alternate}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target::before{content:"✦     ✧      ✦";display:block;padding:14% 9% 0;text-align:right;color:#fff;text-shadow:0 0 5px #fff,0 0 13px #9feaff,0 0 22px #d99cff;font-size:clamp(16px,2.1vw,25px);letter-spacing:.3em;opacity:.46;animation:card-star-twinkle 1.4s ease-in-out infinite alternate}
#modal.open .modal:is([data-rarity="shiny"],[data-variant="shiny"]) .card-tilt-target:hover::before{opacity:.9}
@keyframes card-shiny-glide{from{background-position:center,center,center,center,8% 50%,center}to{background-position:center,center,center,center,92% 50%,center}}
#modal .modal-card-stage{overflow:hidden}
#modal.open .modal-card-stage .card-tilt-target{transition:transform .08s linear,box-shadow .12s ease,border-color .12s ease}

.rarity-pool-note{display:grid;gap:8px;margin:14px 0 18px;padding:13px 15px;border:1px solid #42435a;border-radius:12px;background:linear-gradient(135deg,#211a29,#141824);color:#dce2f1;font-size:12px}.rarity-pool-note>div{display:flex;flex-wrap:wrap;gap:7px 14px}.rarity-pool-note span{color:#b8c1d2}.rarity-pool-note span b{color:#ffe2ee}.rarity-pool-note p{margin:0;color:#9da8bd;font-size:11px;line-height:1.5}