/** Shopify CDN: Minification failed Line 880:3 Unexpected "12%" Line 880:94 Unexpected "30%" Line 880:213 Unexpected "50%" Line 880:332 Unexpected "60%" Line 880:425 Unexpected "70%" Line 880:514 Unexpected "88%" Line 880:604 Unexpected "100%" Line 880:669 Unexpected "}" Line 880:730 Unexpected "34%" Line 880:787 Unexpected "52%" ... and 18 more hidden warnings **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:ledger-discovery (INDEX:21) */ .ld .ld-tcg-primary{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin:0 0 .55rem} .ld .ld-condition,.ld .ld-rarity{display:inline-flex;align-items:center;padding:.28rem .65rem;border:1px solid rgba(18,18,18,.22);border-radius:999px;font-size:1.2rem;line-height:1.25;font-weight:700} .ld .ld-sealed-details{margin:.2rem 0 0;font-size:1.2rem;line-height:1.35;opacity:.7} .ld .ld-card-info{background:transparent!important} .ld .ld-sealed-details{margin:.2rem 0 0;font-size:1.2rem;line-height:1.35;opacity:.7} .ld .ld-sealed{border-radius:999px;padding:.28rem .65rem;border:1px solid rgba(18,18,18,.22);font-weight:700;display:inline-flex;align-items:center} .ledger-character { display:block; background-image:url('/cdn/shop/files/ledger-reference-tiles.jpg?v=1789993067'); background-repeat:no-repeat; background-size:731.42857% 1146.2687%; aspect-ratio:140/134; } .ledger-character--pokemon { background-position:22.28507% 70.97004%; } .ledger-character--onepiece { background-position:60.63348% 70.97004%; } .ledger-character--dragonball { background-position:98.30317% 70.97004%; } .ledger-hero-art { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .ledger-hero-art .ledger-character { position:absolute; width:35%; opacity:.19; filter:grayscale(1) contrast(1.5); mix-blend-mode:screen; mask-image:radial-gradient(ellipse,#000 25%,transparent 72%); } .ledger-hero-art .ledger-character--pokemon { left:-10%; top:5%; transform:rotate(-12deg); } .ledger-hero-art .ledger-character--onepiece { left:37%; bottom:-14%; } .ledger-hero-art .ledger-character--dragonball { right:-8%; top:-5%; } .ld .ld-games { padding-block:24px; gap:16px; } .ld .ld-games .ld-game-tile { position:relative; display:block; padding:0; min-height:0; aspect-ratio:320 / 134; overflow:hidden; border:0; border-radius:12px; background:#f6f4ef; box-shadow:0 3px 12px #1220390c; transition:box-shadow .2s,transform .2s; } .ld .ld-games .ld-game-tile:hover { box-shadow:0 6px 22px #12203926; transform:translateY(-2px); } .ld .ld-game-tile .ld-reference-tile { position:absolute; inset:0; display:block; background-image:url('/cdn/shop/files/ledger-reference-tiles.jpg?v=1789993067'); background-repeat:no-repeat; background-size:320% 1146.2687%; } .ld-game-tile--pokemon .ld-reference-tile { background-position:2.41477% 70.97004%; } .ld-game-tile--onepiece .ld-reference-tile { background-position:50.56818% 70.97004%; } .ld-game-tile--dragonball .ld-reference-tile { background-position:97.86932% 70.97004%; } .ld-game-tile--soon{cursor:default} .ld .ld-games .ld-game-tile.ld-game-tile--soon{opacity:1;cursor:default;pointer-events:none} .ld .ld-games .ld-game-tile--soon:hover{box-shadow:0 3px 12px #1220390c;transform:none} .ld .ld-game-tile--soon .ld-reference-tile{filter:grayscale(1);opacity:.55} .ld .ld-game-tile--soon .ld-game-soon{position:absolute;top:10px;right:10px;margin:0;background:#fffffff2;font-size:12px;z-index:1} .ld .ld-hero { position:relative; isolation:isolate; background:radial-gradient(ellipse at 78% 40%,#123967 0,transparent 58%),radial-gradient(ellipse at 3% 60%,#112c50,transparent 45%),#061327; } .ld .ld-hero::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:.25; background-image:radial-gradient(circle at 15% 24%,#f0c75e 0 1px,transparent 2px),radial-gradient(circle at 76% 68%,#77c3fa 0 1px,transparent 2px),repeating-linear-gradient(128deg,transparent 0 72px,#7596bb12 73px,transparent 74px 148px); background-size:240px 200px,370px 290px,auto; } .ld h1 .ld-heading-gold { color:#f0c75e; } .ld .ld-hero-grid { padding-block:60px 46px; } @media(max-width:749px) { .ld .ld-games { grid-template-columns:1fr; max-width:540px; gap:14px; } .ld .ld-hero-grid { padding-block:36px; } } .ld{position:relative;isolation:isolate;z-index:0;display:block;background:#faf9f6;color:#122039}.ld *{box-sizing:border-box}.ld [hidden]{display:none!important}.ld a{color:inherit;text-decoration:none}.ld button{font:inherit;cursor:pointer}.ld :is(a,button):focus-visible{outline:3px solid #2e70df;outline-offset:4px}.ld-wrap{max-width:1240px;margin:auto;padding-inline:32px}.ld-hero{background:radial-gradient(ellipse at 80% 35%,#264b76 0,transparent 52%),#101d33;color:#fff;overflow:hidden}.ld-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-block:56px}.ld-eyebrow{font-size:12px;letter-spacing:.17em;font-weight:700;text-transform:uppercase;margin:0 0 14px}.ld-intro .ld-eyebrow{color:#f0c75e}.ld h1{font-size:clamp(38px,5vw,66px);line-height:1.06;letter-spacing:-.04em;font-weight:700;color:inherit;margin:0;max-width:580px}.ld-lead{font-size:18px;line-height:1.6;max-width:450px;color:#d5dfeb;margin:24px 0}.ld-actions{display:flex;gap:12px;flex-wrap:wrap}.ld-button{display:inline-flex;justify-content:center;align-items:center;gap:24px;padding:14px 22px;border-radius:8px;font-weight:700;min-height:48px;border:1px solid transparent}.ld .ld-button-gold{background:#f0c75e;color:#101d33}.ld .ld-button-outline{background:transparent;color:white;border-color:#7a8da8}.ld-small{font-size:13px;color:#becbdc;margin-top:20px}.ld-spotlight{display:block;text-align:center}.ld-spotlight-label{font-size:11px;text-transform:uppercase;letter-spacing:.17em;color:#d6e2f3}.ld-fan{height:320px;position:relative;margin:22px auto 12px;max-width:440px}.ld-fan img{position:absolute;top:8%;left:25%;width:50%;height:84%;object-fit:contain;filter:drop-shadow(0 14px 20px #0006);transition:transform .25s ease}.ld-fan img:nth-child(1){transform:translateX(-40%) rotate(-14deg);z-index:1}.ld-fan img:nth-child(2){transform:translateY(-10px);z-index:3}.ld-fan img:nth-child(3){transform:translateX(40%) rotate(14deg);z-index:2}.ld-spotlight:hover .ld-fan img:nth-child(2){transform:translateY(-18px)}.ld-spotlight-caption{display:block;font-size:13px;max-width:340px;margin:auto;color:#e6edf7}.ld-games{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:24px}.ld-games a{background:#fff;border:1px solid #dde3ec;border-radius:12px;padding:18px 22px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s}.ld-games a:hover{border-color:#F0C75E;box-shadow:0 4px 16px #1220390d}.ld-games a>span{font-size:21px;font-weight:700}.ld-games small{color:#657087;font-size:13px}.ld-discover{padding-block:36px 48px;scroll-margin-top:24px}.ld-heading-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.ld h2{margin:0;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.025em;color:inherit}.ld-text-link{font-weight:600;white-space:nowrap}.ld-controls{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}.ld-filters{display:flex;gap:8px;flex-wrap:wrap}.ld-filters button,.ld-shuffle{border:1px solid #cad3df;border-radius:25px;padding:11px 18px;background:#fff;color:#17365c;min-height:44px}.ld-filters [aria-pressed=true]{background:#F0C75E;color:#101D33;border-color:#F0C75E;font-weight:700;box-shadow:0 3px 10px #12203912}.ld-results{font-size:13px;color:#657087;min-height:20px;margin:14px 0}.ld-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.ld-card{background:white;border:1px solid #e0e5ec;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}.ld-card:hover{border-color:#F0C75E;box-shadow:0 8px 24px #12203918;transform:translateY(-3px)}.ld-card.ld-picked{outline:3px solid #bf8b12;outline-offset:3px}.ld-card-image{position:relative;display:block;background:transparent;padding:20px;aspect-ratio:4/5}.ld-card-image img,.ld-card-image svg{display:block;width:100%;height:100%;object-fit:contain} @media(hover:hover) and (pointer:fine){ .ld-card-image{overflow:visible} .ld-card-image img{transform:perspective(700px) rotateY(var(--ledger-ry,0deg)) rotateX(var(--ledger-rx,0deg)) translateZ(0);transform-origin:50% 50%;transition:transform 160ms ease-out;will-change:transform;backface-visibility:hidden} .ld-card.is-ledger-tilting .ld-card-image img{transition:transform 35ms linear} } @media(prefers-reduced-motion:reduce){.ld-card-image img{transform:none!important;transition:none!important}}.ld-badge{position:absolute;top:12px;left:12px;border-radius:20px;background:#17365c;color:white;padding:5px 10px;font-size:12px;font-weight:700}.ld-card-info{padding:16px;display:flex;flex-direction:column;flex:1}.ld-card-type{color:#52715f;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin:0 0 7px}.ld h3{font-size:15px;font-weight:600;line-height:1.45;margin:0 0 14px;color:inherit}.ld-tcg-primary{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px;font-size:14px;font-weight:800;line-height:1.25;color:#122039}.ld-condition{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid #d8dde5;border-radius:999px;background:#f4f5f7}.ld-rarity{font-weight:700}.ld-tcg-name{font-size:16px!important;font-weight:750!important;margin:0 0 5px!important}.ld-tcg-number{display:inline-block;margin:0 0 14px;font-size:15px;font-weight:800;color:#17365c!important}.ld-price{display:flex;gap:8px;align-items:center;margin-top:auto;margin-bottom:14px;flex-wrap:wrap}.ld-price strong{font-size:22px}.ld-price s{font-size:13px;color:#6c7481}.ld-add{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;border:1px solid #ced7e4;border-radius:7px;padding:10px 12px;background:white;color:#17365c;font-size:13px!important;font-weight:700!important}.ld-add:hover{background:#F0C75E;color:#101D33;border-color:#F0C75E}.ld-more{text-align:center;margin-top:28px}.ld .ld-button-navy{background:#F0C75E;color:#101D33}.ld-set-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#101d33;color:white;border-radius:16px;padding:36px;margin-bottom:48px}.ld-set-banner p:last-child{color:#c3d0e1;margin-bottom:0}.ld-set-banner .ld-eyebrow{color:#f0c75e} @media(max-width:989px){.ld-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ld-hero-grid{gap:16px}.ld-fan{height:260px}} @media(max-width:749px){.ld-wrap{padding-inline:18px}.ld-hero-grid{grid-template-columns:1fr;padding-block:36px;gap:22px}.ld-lead{font-size:16px;margin:18px 0}.ld h1{max-width:420px}.ld-fan{height:250px;max-width:370px;margin:8px auto}.ld-spotlight-caption{font-size:12px}.ld-games{gap:8px;padding-block:16px}.ld-games a{padding:13px 10px}.ld-games a>span{font-size:15px}.ld-games small{font-size:11px}.ld-heading-row{align-items:start}.ld-text-link{font-size:13px}.ld-discover{padding-top:24px}.ld-controls{gap:10px}.ld-filters button,.ld-shuffle{font-size:13px;padding:10px 13px}.ld-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ld-card-image{padding:12px}.ld-card-info{padding:12px}.ld h3{font-size:13px}.ld-price strong{font-size:19px}.ld-set-banner{margin-inline:18px;padding:26px 22px;flex-direction:column;align-items:start}.ld-button{padding:12px 17px;gap:12px}.ld-eyebrow{font-size:10px}} @media(prefers-reduced-motion:reduce){.ld *{transition:none!important;scroll-behavior:auto!important}} .ld-art-stage{position:relative;isolation:isolate;overflow:hidden;background:#061327} .ld-art-stage__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none} @media(min-width:750px){.ld-art-stage__image{object-fit:cover;object-position:center top;background:#061327}} .ld-art-stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,19,39,.82),rgba(6,19,39,.28) 62%,rgba(6,19,39,.2)),linear-gradient(0deg,rgba(6,19,39,.65),transparent 50%)} .ld .ld-art-stage .ld-hero,.ld .ld-art-stage .ll{position:relative;z-index:2;background:transparent} .ld .ld-art-stage .ld-hero::before,.ld .ld-art-stage .ld-hero::after{content:none} .ld .ld-art-stage .ll__frame{background:rgba(6,19,39,.7);border-color:#f0c75e;box-shadow:none} @media(max-width:749px){.ld-art-stage__image{object-position:55% center}.ld-art-stage::after{background:rgba(6,19,39,.65)}} .ld .ld-art-stage::after{background:linear-gradient(90deg,rgba(6,19,39,.48),rgba(6,19,39,.18) 62%,rgba(6,19,39,.12)),linear-gradient(0deg,rgba(6,19,39,.34),transparent 55%)} .ld .ld-art-stage :is(.ld-lead,.ld-small,.ld-spotlight-label,.ld-spotlight-caption){color:#f5f7fc;text-shadow:0 2px 5px #000a} .ld .ld-small{font-size:14px;line-height:1.6} .ld .ld-spotlight-label{display:inline-block;padding:9px 14px;border-radius:8px;background:rgba(6,19,39,.76);font-size:14px;line-height:1.5;font-weight:700} .ld .ld-spotlight-caption{padding:12px 16px;border-radius:10px;background:rgba(6,19,39,.82);font-size:16px;line-height:1.5;font-weight:600} .ld .ll__copy p,.ld .ll__note,.ld .ll__details small{color:#edf2fa} .ld .ld-button-outline{background:rgba(6,19,39,.7);color:#fff;border-color:rgba(240,199,94,.65);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .ld :is(.ld-button,.ld-filters button,.ld-shuffle,.ld-add){--ld-ring:#101d33;--ld-halo:rgba(16,29,51,.18);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease} .ld .ld-button-outline{--ld-ring:#f0c75e;--ld-halo:rgba(240,199,94,.24)} .ld :is(.ld-button,.ld-filters button,.ld-shuffle,.ld-add):focus-visible{outline:3px solid var(--ld-ring);outline-offset:4px;box-shadow:0 0 0 7px var(--ld-halo)} @media(hover:hover) and (pointer:fine){ .ld :is(.ld-button,.ld-filters button,.ld-shuffle,.ld-add):not(:disabled):hover{transform:translateY(-3px);border-color:var(--ld-ring);box-shadow:0 0 0 2px var(--ld-ring),0 0 0 5px var(--ld-halo),0 8px 18px #06132733} } .ld :is(.ld-button,.ld-filters button,.ld-shuffle,.ld-add):not(:disabled):active{transform:translateY(1px);border-color:var(--ld-ring);box-shadow:0 0 0 2px var(--ld-ring),0 0 0 4px var(--ld-halo)} @media(max-width:749px){.ld .ld-art-stage::after{background:rgba(6,19,39,.72)}} @media(prefers-reduced-motion:reduce){ .ld :is(.ld-button,.ld-filters button,.ld-shuffle,.ld-add):is(:hover,:active){transform:none} .ld .ld-spotlight:hover .ld-fan img:nth-child(2){transform:translateY(-10px)} } .ld .ld-stock{display:inline-flex;align-items:center;align-self:flex-start;width:max-content;max-width:100%;margin-top:auto;margin-bottom:.65rem;padding:.38rem .8rem;border:1px solid rgba(18,18,18,.32);border-radius:999px;background:transparent;font-size:1.2rem;line-height:1.25;font-weight:700;text-align:left} .ld .ld-stock + .ld-price{margin-top:0} .ld .ld-price{padding:1.15rem 1.1rem;border:1px solid rgba(18,18,18,.16);border-radius:.8rem;background:rgba(18,18,18,.05);justify-content:center;width:100%;box-sizing:border-box} /* Collectible Ledger mobile homepage pass */ @media(max-width:749px){ .ld .ld-hero-grid{padding-block:28px 24px;gap:16px} .ld h1{font-size:clamp(34px,10.5vw,46px);line-height:1.04} .ld .ld-lead{font-size:15px;line-height:1.5;margin:14px 0 18px} .ld .ld-actions{gap:9px} .ld .ld-button{min-height:46px;padding:11px 15px} .ld .ld-small{margin-top:14px;font-size:12px;line-height:1.45} .ld .ld-fan{height:210px;margin:2px auto 0} .ld .ld-spotlight-label{font-size:11px;padding:6px 10px} .ld .ld-spotlight-caption{font-size:12px;line-height:1.4;padding:8px 10px} .ld .ld-games{grid-template-columns:1fr;max-width:none;padding-block:14px;gap:10px} .ld .ld-games .ld-game-tile{width:100%;border-radius:10px} .ld .ld-discover{padding-top:22px;padding-bottom:34px} .ld .ld-heading-row{margin-bottom:16px;gap:10px} .ld .ld-heading-row h2{font-size:28px;line-height:1.08} .ld .ld-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-items:stretch} .ld .ld-card{border-radius:12px;height:100%} .ld .ld-card-image{padding:9px;aspect-ratio:1/1.18} .ld .ld-card-info{padding:11px 10px 10px;min-width:0} .ld .ld-tcg-primary{gap:5px;margin-bottom:7px} .ld .ld-condition,.ld .ld-rarity{font-size:10px;line-height:1.15;padding:3px 6px;min-height:23px} .ld .ld-tcg-name,.ld h3{font-size:12px!important;line-height:1.3!important;margin-bottom:5px!important;overflow-wrap:anywhere} .ld .ld-tcg-number,.ld .ld-sealed-details{font-size:10.5px;line-height:1.3;margin-bottom:9px} .ld .ld-stock{margin-top:auto;margin-bottom:7px;padding:4px 7px;font-size:10px;line-height:1.15;white-space:nowrap} .ld .ld-price{min-height:47px;margin:0 0 9px;padding:8px 6px;gap:4px;align-content:center} .ld .ld-price strong{font-size:16px;line-height:1.1;overflow-wrap:anywhere} .ld .ld-price s{font-size:10px} .ld .ld-add{min-height:46px;padding:8px 9px;font-size:11px!important;border-radius:8px;gap:4px} .ld .ld-more{margin-top:20px} } @media(max-width:390px){ .ld-wrap{padding-inline:12px} .ld .ld-grid{gap:10px 8px} .ld .ld-card-info{padding-inline:8px} .ld .ld-price strong{font-size:15px} } /* Three independently clickable featured cards. The hovered card comes forward. */ .ld .ld-fan .ld-fan-card{position:absolute;top:8%;left:25%;width:50%;height:84%;display:block;z-index:1;cursor:pointer;transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease;filter:drop-shadow(0 14px 20px #0006)} .ld .ld-fan .ld-fan-card img{position:static!important;width:100%!important;height:100%!important;object-fit:contain;transform:none!important;filter:none!important} .ld .ld-fan .ld-fan-card:nth-child(1){transform:translateX(-40%) rotate(-14deg);z-index:1} .ld .ld-fan .ld-fan-card:nth-child(2){transform:translateY(-10px);z-index:3} .ld .ld-fan .ld-fan-card:nth-child(3){transform:translateX(40%) rotate(14deg);z-index:2} .ld .ld-fan .ld-fan-card:nth-child(1):is(:hover,:focus-visible){transform:translate(-55%,-18px) rotate(-9deg) scale(1.1);z-index:8} .ld .ld-fan .ld-fan-card:nth-child(2):is(:hover,:focus-visible){transform:translateY(-23px) scale(1.1);z-index:8} .ld .ld-fan .ld-fan-card:nth-child(3):is(:hover,:focus-visible){transform:translate(55%,-18px) rotate(9deg) scale(1.1);z-index:8} .ld .ld-spotlight:hover .ld-fan .ld-fan-card:nth-child(2):not(:hover):not(:focus-visible){transform:translateY(-10px)} @media(prefers-reduced-motion:reduce){.ld .ld-fan .ld-fan-card{transition:none}} /* Separate, concise labels for each featured product. */ .ld .ld-spotlight-captions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px auto 0;max-width:520px} .ld .ld-spotlight-caption-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:60px;padding:9px 7px;border-radius:9px;background:rgba(6,19,39,.84);color:#f5f7fc!important;font-size:12px;line-height:1.3;text-align:center;transition:background .2s,transform .2s} .ld .ld-spotlight-caption-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:700} .ld .ld-spotlight-caption-item small{font-size:10px;color:#f0c75e;font-weight:700} .ld .ld-spotlight-caption-item:is(:hover,:focus-visible){background:rgba(28,56,88,.96);transform:translateY(-2px)} @media(max-width:749px){.ld .ld-spotlight-captions{gap:5px}.ld .ld-spotlight-caption-item{font-size:10px;padding:7px 4px;min-height:54px}} /* One dynamic description, synchronized with the featured card. */ .ld .ld-spotlight-captions{display:block;max-width:380px;margin:10px auto 0;min-height:62px} .ld .ld-spotlight-caption-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:9px 14px;border-radius:9px;background:rgba(6,19,39,.84);color:#f5f7fc!important;font-size:13px;line-height:1.3;text-align:center;text-decoration:none} .ld .ld-spotlight-caption-item[hidden]{display:none!important} .ld .ld-spotlight-caption-name{font-weight:750;overflow-wrap:anywhere} .ld .ld-spotlight-caption-item small{font-size:11px;color:#f0c75e;font-weight:700} .ld .ld-spotlight-caption-item.is-feature-entering{animation:ld-feature-fade .22s ease both} @keyframes ld-feature-fade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.ld .ld-spotlight-caption-item.is-feature-entering{animation:none}} /* END_SECTION:ledger-discovery */ /* START_SECTION:pokemon-set-directory (INDEX:49) */ .pokemon-set-directory { padding-top: 2.4rem; padding-bottom: 2.4rem; } .pokemon-set-directory__header { margin-bottom: 2rem; } .pokemon-set-directory__eyebrow { margin: 0 0 .6rem; color: rgb(var(--color-link)); font-size: 1.2rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .pokemon-set-directory__title { margin: 0; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; } .pokemon-set-directory__subtitle { max-width: 68rem; margin: 1rem 0 1.8rem; color: rgba(var(--color-foreground), .7); } .pokemon-set-directory__search-label { display: block; margin-bottom: .6rem; font-size: 1.3rem; font-weight: 700; } .pokemon-set-directory__search { width: 100%; min-height: 5.2rem; padding: 0 1.6rem; border: .1rem solid rgba(var(--color-foreground), .22); border-radius: 1rem; background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); font: inherit; } .pokemon-set-directory__eras { display: grid; gap: 1rem; } .pokemon-set-directory__era { overflow: hidden; border: .1rem solid rgba(var(--color-foreground), .14); border-radius: 1.2rem; background: rgb(var(--color-background)); } .pokemon-set-directory__era summary { display: flex; align-items: center; justify-content: space-between; min-height: 6rem; padding: 0 1.8rem; cursor: pointer; font-size: 1.8rem; font-weight: 750; list-style: none; } .pokemon-set-directory__era summary::-webkit-details-marker { display: none; } .pokemon-set-directory__era-count { min-width: 3.2rem; padding: .35rem .8rem; border-radius: 99rem; background: rgba(var(--color-foreground), .08); font-size: 1.2rem; text-align: center; } .pokemon-set-directory__sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0 1rem 1rem; list-style: none; } .pokemon-set-directory__sets li { min-width: 0; } .pokemon-set-directory__sets a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; min-height: 5.8rem; padding: .9rem 1rem; border-radius: .8rem; color: rgb(var(--color-foreground)); text-decoration: none; } .pokemon-set-directory__sets a:hover { background: rgba(var(--color-foreground), .055); } .pokemon-set-directory__set-name { min-width: 0; font-weight: 650; } .pokemon-set-directory__product-count { color: rgba(var(--color-foreground), .58); font-size: 1.2rem; white-space: nowrap; } .pokemon-set-directory__arrow { color: rgb(var(--color-link)); font-size: 1.8rem; } [data-pokemon-set-item][hidden], [data-pokemon-set-era][hidden] { display: none; } @media screen and (max-width: 749px) { .pokemon-set-directory { padding-top: 1.2rem; } .pokemon-set-directory__sets { grid-template-columns: 1fr; } .pokemon-set-directory__product-count { display: none; } } .pokemon-set-directory .pokemon-set-directory__era > summary { background:linear-gradient(110deg,#f5d887,#edc55f); color:#142039; gap:12px; padding:16px 20px; font-weight:800; font-size:19px; } .pokemon-set-directory__era > summary > span:first-child { flex:1; } .pokemon-set-directory .pokemon-set-directory__era-count { background:#ffffff80; color:#142039; flex-shrink:0; white-space:nowrap; } .pokemon-set-directory .pokemon-set-directory__set-stock { justify-self:end; flex-shrink:0; white-space:nowrap; padding:.25rem .7rem; border-radius:99rem; background:#fbf3dc; border:1px solid #f0c75e80; color:#142039; font-size:1.1rem; font-weight:600; line-height:1.3; } .pokemon-set-directory .pokemon-set-directory__product-count { display:none; } .pokemon-set-directory .pokemon-set-directory__set-stock.is-empty { background:transparent; border-color:rgba(20,32,57,.15); color:rgba(20,32,57,.55); font-weight:500; } .pokemon-set-directory__chevron { width:10px; height:10px; flex:0 0 10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s; margin:0 4px 5px; } .pokemon-set-directory__era[open] > summary .pokemon-set-directory__chevron { transform:rotate(225deg); margin-bottom:0; } .pokemon-set-directory__era[open] > summary { border-bottom:1px solid #d6b353; } .pokemon-set-directory .pokemon-set-directory__sets { background:#fff; padding:10px 18px 14px; gap:0 14px; } .pokemon-set-directory .pokemon-set-directory__sets a { padding:14px 14px; border-bottom:1px solid #ece9e0; border-radius:0; } .pokemon-set-directory .pokemon-set-directory__set-name { font-size:15px; font-weight:500; } .pokemon-set-directory .pokemon-set-directory__sets a:hover { background:#fff7e4; } .pokemon-set-directory__sets .pokemon-set-directory__soon { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.8rem; align-items:center; min-height:5.8rem; padding:14px; border-bottom:1px solid #ece9e0; opacity:.55; cursor:default; pointer-events:none; } .pokemon-set-directory__era > summary:focus-visible { outline:3px solid #214e83; outline-offset:-4px; } /* END_SECTION:pokemon-set-directory */ /* START_SECTION:tcg-set-directory (INDEX:55) */ .tcg-set-directory { padding-top: 2rem; padding-bottom: 3rem; } .tcg-set-directory h2 { margin: 0 0 1rem; font-size: clamp(2.6rem, 5vw, 4.6rem); } .tcg-set-directory > p { max-width: 70rem; } .tcg-set-directory label { display: block; margin: 2rem 0 .7rem; font-weight: 700; } .tcg-set-directory input { width: 100%; min-height: 5.2rem; padding: 1rem 1.6rem; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 1rem; color: rgb(var(--color-foreground)); background: rgb(var(--color-background)); font: inherit; } .tcg-set-directory__groups { display: grid; gap: 1.4rem; margin-top: 2rem; } .tcg-set-directory__group { border: .1rem solid rgba(var(--color-foreground), .16); border-radius: 1rem; } .tcg-set-directory__group summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.6rem; cursor: pointer; font-weight: 750; font-size: 1.8rem; list-style: none; } .tcg-set-directory__group summary::-webkit-details-marker { display: none; } .tcg-set-directory__group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0 1rem 1rem; margin: 0; list-style: none; } .tcg-set-directory__group a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; min-height: 5.4rem; padding: 1rem; color: rgb(var(--color-foreground)); text-decoration: none; border-radius: .6rem; } .tcg-set-directory__group a:hover { background: rgba(var(--color-foreground), .06); } .tcg-set-directory__count { opacity: .65; font-size: 1.2rem; white-space: nowrap; } .tcg-set-directory [hidden] { display: none; } @media screen and (max-width: 749px) { .tcg-set-directory__group ul { grid-template-columns: 1fr; } .tcg-set-directory__count { display: none; } } .tcg-set-directory .tcg-set-directory__group { overflow:hidden; } .tcg-set-directory .tcg-set-directory__group > summary { align-items:center; background:linear-gradient(110deg,#f5d887,#edc55f); color:#142039; font-weight:800; font-size:19px; padding:16px 20px; } .tcg-set-directory__chevron { width:10px; height:10px; flex:0 0 10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-right:4px; transition:transform .2s; } .tcg-set-directory__group[open] > summary .tcg-set-directory__chevron { transform:rotate(225deg); } .tcg-set-directory__group[open] > summary { border-bottom:1px solid #d6b353; } .tcg-set-directory .tcg-set-directory__group ul { background:#fff; padding:10px 18px 14px; gap:0 14px; } .tcg-set-directory .tcg-set-directory__group a { padding:14px; font-size:15px; font-weight:500; border-bottom:1px solid #ece9e0; border-radius:0; } .tcg-set-directory .tcg-set-directory__group a:hover { background:#fff7e4; } .tcg-set-directory__group > summary:focus-visible { outline:3px solid #214e83; outline-offset:-4px; } /* END_SECTION:tcg-set-directory */ /* CSS from snippet stylesheet tags */ /* START_SNIPPET:card-product (INDEX:61) */ .tcg-product-card .card__heading { display:none !important; } .tcg-card-media-heading { display:none !important; } .tcg-card-meta { margin: 0.5rem 0 0.8rem; color: rgba(var(--color-foreground), 0.68); font-size: 1.3rem; line-height: 1.35; } .tcg-card-details { margin-top: .15rem; } .tcg-card-topline { display:block; margin:0 0 .55rem; } .tcg-card-topline__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-bottom:.45rem; } .tcg-card-details__badges { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-bottom:.45rem; } .tcg-condition-badge { display:inline-flex; align-items:center; min-height:2.7rem; padding:.35rem .85rem; border:1px solid rgba(var(--color-foreground),.2); border-radius:999px; background:rgba(var(--color-foreground),.06); font-size:1.3rem; line-height:1; font-weight:800; letter-spacing:.04em; } .tcg-card-details__rarity { font-size:1.3rem; line-height:1.2; font-weight:700; color:rgba(var(--color-foreground),.82); } .tcg-card-number { display:inline-block; position:relative; z-index:3; margin:.1rem 0 .2rem; padding:.25rem .55rem; border-radius:.45rem; background:rgba(var(--color-foreground),.06); color:rgb(var(--color-foreground)); text-decoration:none; font-size:1.45rem; line-height:1.2; font-weight:800; } .tcg-product-card .tcg-card-topline ~ .card__heading, .tcg-product-card .tcg-card-topline + .card__heading { display:none !important; } .tcg-card-details__name { margin:.3rem 0 .1rem; font-size:1.15rem; line-height:1.3; font-weight:600; color:rgba(var(--color-foreground),.76); } .tcg-card-details__number,.tcg-card-details__line,.tcg-card-details__language { margin:.15rem 0 0; font-size:1.05rem; line-height:1.35; font-weight:400; color:rgba(var(--color-foreground),.62); } .tcg-card-details__language { font-size:1rem; } .tcg-card-name-number { font-weight:600; color:rgba(var(--color-foreground),.7); } .product-card-wrapper .card__heading { font-weight:750; } .product-card-wrapper .card__inner{aspect-ratio:1 / 1 !important; min-height:0; margin-bottom:1.6rem;} .product-card-wrapper .card__media{height:100%; display:flex; align-items:center; justify-content:center;} .product-card-wrapper .card__media .media{height:100%; width:100%;} .product-card-wrapper .card__media img{width:100%; height:100%; object-fit:contain;} .product-card-wrapper .card__content{display:flex; flex-direction:column; flex:1;} .product-card-wrapper .card__information{display:flex; flex-direction:column; flex:1;} .product-card-wrapper > .card, .product-card-wrapper > .card .card__content, .product-card-wrapper > .card .card__inner, .product-card-wrapper > .card .card__information{background:transparent!important;background-color:transparent!important;} /* Keep price and stock on one baseline across mixed product types */ .product-card-wrapper .card__content > .card__information > .card-information{display:flex!important;flex-direction:column!important;flex:1!important;margin-top:0!important;} .product-card-wrapper .card__content > .card__information > .card-information .price{margin-top:auto!important;} .product-card-wrapper .tcg-stock-count{margin-top:.35rem!important;} /* Final cleanup: single-card text area must have no surface, gradient, border, or shadow */ .tcg-product-card .card__content > .card__information, .tcg-product-card .card__content > .card__information > *, .tcg-product-card .card__content > .card__information .tcg-card-topline, .tcg-product-card .card__content > .card__information .tcg-card-details, .tcg-product-card .card__content > .card__information .tcg-card-meta, .tcg-product-card .card__content > .card__information .card-information, .tcg-product-card .card__content > .card__information .card__heading, .tcg-product-card .card__content > .card__information .card__heading a { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; filter: none !important; } .tcg-product-card .card__content > .card__information::before, .tcg-product-card .card__content > .card__information::after, .tcg-product-card .card__content > .card__information *::before, .tcg-product-card .card__content > .card__information *::after { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; filter: none !important; } .tcg-clean-title{margin:.2rem 0 .25rem;font-size:1.55rem;line-height:1.25;font-weight:750;} .tcg-clean-title a{background:transparent!important;background-image:none!important;box-shadow:none!important;text-decoration:none;} .tcg-clean-subline{margin:0;font-size:1.1rem;line-height:1.4;color:rgba(var(--color-foreground),.65);background:transparent!important;background-image:none!important;box-shadow:none!important;} .tcg-card-topline{background:transparent!important;background-image:none!important;box-shadow:none!important;} /* Collection singles: breathing room + price/stock panel */ .tcg-product-card .tcg-card-topline{margin-bottom:1rem!important;} .tcg-product-card .tcg-card-topline__meta{margin-bottom:.7rem!important;} .tcg-product-card .tcg-clean-title{margin:.35rem 0 .45rem!important;line-height:1.35!important;} .tcg-product-card .tcg-clean-subline{margin:0 0 .8rem!important;line-height:1.45!important;} .tcg-product-card .card-information{gap:.35rem;} .tcg-product-card .card-information .price{ margin-top:auto!important; padding:1rem 1.1rem .15rem!important; border:1px solid rgba(var(--color-foreground),.14)!important; border-bottom:0!important; border-radius:.8rem .8rem 0 0!important; background:rgba(var(--color-foreground),.035)!important; } .tcg-product-card .card-information .price + .tcg-stock-count, .tcg-product-card .card-information .tcg-stock-count{ margin:.0rem 0 .75rem!important; padding:.15rem 1.1rem 1rem!important; border:1px solid rgba(var(--color-foreground),.14)!important; border-top:0!important; border-radius:0 0 .8rem .8rem!important; background:rgba(var(--color-foreground),.035)!important; } /* Sealed products: match singles price/stock panel */ .product-card-wrapper:not(.tcg-product-card) .card-information .price{ margin-top:auto!important; padding:1rem 1.1rem .15rem!important; border:1px solid rgba(var(--color-foreground),.14)!important; border-bottom:0!important; border-radius:.8rem .8rem 0 0!important; background:rgba(var(--color-foreground),.035)!important; } .product-card-wrapper:not(.tcg-product-card) .card-information .tcg-stock-count{ margin:0 0 .75rem!important; padding:.15rem 1.1rem 1rem!important; border:1px solid rgba(var(--color-foreground),.14)!important; border-top:0!important; border-radius:0 0 .8rem .8rem!important; background:rgba(var(--color-foreground),.035)!important; } /* Collection sealed badge: match the stronger product-page treatment */ .sealed-card-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.65rem;} .sealed-card-badge{ display:inline-flex!important; align-items:center!important; min-height:2.7rem!important; padding:.4rem .9rem!important; border:1px solid rgba(var(--color-foreground),.22)!important; border-radius:999px!important; background:rgba(var(--color-foreground),.08)!important; box-shadow:0 1px 2px rgba(var(--color-foreground),.06)!important; font-size:1.2rem!important; line-height:1!important; font-weight:800!important; letter-spacing:.04em!important; } .sealed-card-title-subline{margin:.35rem 0 .8rem;font-size:1.15rem;line-height:1.4;font-weight:600;color:rgba(var(--color-foreground),.65);} /* Sealed is the primary badge; condition stays visually lighter */ .sealed-card-badge--primary{background:rgba(var(--color-foreground),.11)!important;border-color:rgba(var(--color-foreground),.28)!important;font-weight:800!important;} .sealed-card-badge--secondary{background:transparent!important;border-color:rgba(var(--color-foreground),.18)!important;font-weight:650!important;box-shadow:none!important;opacity:.78;} /* Collection cards: separate price and inventory into distinct surfaces */ .product-card-wrapper .card-information .price{ margin-top:auto!important; padding:.45rem 1.1rem!important; border:1px solid rgba(var(--color-foreground),.16)!important; border-radius:.8rem!important; background:rgba(var(--color-foreground),.05)!important; text-align:center!important; } .product-card-wrapper .card-information .price .price-item{ font-size:2rem!important; font-weight:800!important; line-height:1.15!important; } .product-card-wrapper .card-information .tcg-stock-count{ margin:.65rem 0 .75rem!important; padding:.65rem .9rem!important; border:1px solid rgba(var(--color-foreground),.12)!important; border-radius:.65rem!important; background:transparent!important; text-align:center!important; font-size:1.15rem!important; line-height:1.25!important; opacity:.72!important; } /* Final collection price/stock treatment: all product types */ .product-card-wrapper .card-information .price{ margin-top:auto!important; padding:1.15rem 1.1rem!important; border:1px solid rgba(var(--color-foreground),.16)!important; border-radius:.8rem!important; background:rgba(var(--color-foreground),.05)!important; text-align:center!important; } .product-card-wrapper .card-information .price .price-item{ font-size:2rem!important; font-weight:800!important; line-height:1.15!important; } .product-card-wrapper .card-information .tcg-stock-count, .tcg-product-card .card-information .tcg-stock-count, .product-card-wrapper:not(.tcg-product-card) .card-information .tcg-stock-count{ margin:.55rem 0 .75rem!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; text-align:center!important; font-size:1.15rem!important; line-height:1.3!important; opacity:.68!important; } /* Hard final override: clean stock text and intact price panel */ .product-card-wrapper .card-information > .tcg-stock-count, .product-card-wrapper .card-information .tcg-stock-count{ display:block!important; width:auto!important; min-height:0!important; margin:.55rem 0 .75rem!important; padding:0!important; border:0!important; outline:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; text-align:center!important; } .product-card-wrapper .card-information > .tcg-stock-count::before, .product-card-wrapper .card-information > .tcg-stock-count::after{ content:none!important; display:none!important; } .product-card-wrapper .card-information > .price{ overflow:visible!important; box-sizing:border-box!important; width:100%!important; padding:1.15rem 1.1rem!important; border:1px solid rgba(var(--color-foreground),.16)!important; border-radius:.8rem!important; background:rgba(var(--color-foreground),.05)!important; box-shadow:none!important; } /* Collection inventory badge above price, matching product-page pill */ .product-card-wrapper .card-information > .tcg-stock-count, .product-card-wrapper .card-information .tcg-stock-count{ display:table!important; width:auto!important; min-height:0!important; margin:.45rem 0 .65rem!important; padding:.38rem .8rem!important; border:1px solid rgba(var(--color-foreground),.32)!important; border-radius:999px!important; background:transparent!important; box-shadow:none!important; text-align:left!important; font-size:1.2rem!important; line-height:1.25!important; font-weight:700!important; opacity:1!important; } .product-card-wrapper .card-information > .price{ margin-top:0!important; } /* Sealed collection cards: force stock pill + price panel to match singles */ .product-card-wrapper:not(.tcg-product-card) .card__information > .card-information{ overflow:visible!important; } .product-card-wrapper:not(.tcg-product-card) .card-information > .tcg-stock-count{ display:table!important; width:auto!important; margin:.45rem 0 .65rem!important; padding:.38rem .8rem!important; border:1px solid rgba(var(--color-foreground),.32)!important; border-radius:999px!important; background:transparent!important; box-shadow:none!important; font-size:1.2rem!important; line-height:1.25!important; font-weight:700!important; opacity:1!important; } .product-card-wrapper:not(.tcg-product-card) .card-information > .price{ display:block!important; position:relative!important; overflow:visible!important; width:100%!important; max-width:100%!important; box-sizing:border-box!important; margin:0!important; padding:1.15rem 1.1rem!important; border:1px solid rgba(var(--color-foreground),.16)!important; border-radius:.8rem!important; background:rgba(var(--color-foreground),.05)!important; box-shadow:none!important; text-align:center!important; } /* Align sealed inventory pill with singles */ .product-card-wrapper:not(.tcg-product-card) .card-information > .tcg-stock-count{ align-self:flex-start!important; text-align:left!important; margin-top:1.45rem!important; } /* Normalize collection stock pills and keep the stock/price rows aligned */ .product-card-wrapper .card__content > .card__information > .card-information{ display:flex!important; flex-direction:column!important; flex:1!important; } .product-card-wrapper .card-information > .tcg-stock-count, .product-card-wrapper:not(.tcg-product-card) .card-information > .tcg-stock-count, .tcg-product-card .card-information > .tcg-stock-count{ display:inline-flex!important; align-items:center!important; align-self:flex-start!important; width:max-content!important; max-width:100%!important; min-height:0!important; margin-top:auto!important; margin-bottom:.65rem!important; padding:.38rem .8rem!important; border:1px solid rgba(var(--color-foreground),.32)!important; border-radius:999px!important; background:transparent!important; box-shadow:none!important; text-align:left!important; font-size:1.2rem!important; line-height:1.25!important; font-weight:700!important; opacity:1!important; } .product-card-wrapper .card-information > .price{ margin-top:0!important; } /* Keep sealed stock pill locked to its price panel */ .product-card-wrapper:not(.tcg-product-card) .card-information > .tcg-stock-count{ margin-top:auto!important; margin-bottom:.65rem!important; } .product-card-wrapper:not(.tcg-product-card) .card-information > .tcg-stock-count + .price{ margin-top:0!important; } /* END_SNIPPET:card-product */ /* START_SNIPPET:header-drawer (INDEX:68) */ /* Mobile Home: match desktop's layered gold star and occluded return. */ .ledger-mobile-home-star .ledger-mobile-nav-label{z-index:3!important} .ledger-mobile-home-star::before{z-index:2!important} .ledger-mobile-home-star::after{z-index:1!important} @media (prefers-reduced-motion:no-preference){ .ledger-mobile-home-star::before{animation:ledgerMobileDesktopStar 4.4s linear infinite!important} .ledger-mobile-home-star::after{animation:ledgerMobileDesktopTrail 4.4s linear infinite!important} } @keyframes ledgerMobileDesktopStar{ 0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(.9)} 4%{opacity:1;transform:translate3d(8px,-10px,0) rotate(15deg) scale(1)} 10%{opacity:1;transform:translate3d(28px,-26px,0) rotate(45deg) scale(1.1)} 17%{opacity:1;transform:translate3d(68px,-32px,0) rotate(85deg) scale(1.05)} 23.5%{opacity:.65;transform:translate3d(92px,-12px,0) rotate(130deg) scale(.85)} 27%{opacity:0;transform:translate3d(83px,7px,0) rotate(155deg) scale(.78)} 31.5%{opacity:0;transform:translate3d(55px,25px,0) rotate(195deg) scale(.82)} 35%{opacity:.85;transform:translate3d(31px,30px,0) rotate(230deg) scale(.95)} 39%{opacity:1;transform:translate3d(4px,25px,0) rotate(265deg) scale(1.08)} 45%{opacity:1;transform:translate3d(-10px,9px,0) rotate(315deg) scale(1)} 50%{opacity:0;transform:translate3d(0,0,0) rotate(360deg) scale(.9)} 100%{opacity:0} } @keyframes ledgerMobileDesktopTrail{ 0%{opacity:0;transform:translate3d(-20px,0,0) rotate(-30deg) scaleX(.3)} 4%{opacity:.5;transform:translate3d(-12px,-9px,0) rotate(-30deg) scaleX(.7)} 10%{opacity:.8;transform:translate3d(8px,-25px,0) rotate(-25deg) scaleX(1)} 17%{opacity:.8;transform:translate3d(48px,-31px,0) rotate(0deg) scaleX(1.2)} 23.5%{opacity:.4;transform:translate3d(72px,-11px,0) rotate(30deg) scaleX(1)} 27%{opacity:0;transform:translate3d(63px,8px,0) rotate(50deg) scaleX(.8)} 31.5%{opacity:0;transform:translate3d(35px,24px,0) rotate(105deg) scaleX(.8)} 35%{opacity:.6;transform:translate3d(11px,29px,0) rotate(145deg) scaleX(1)} 39%{opacity:.75;transform:translate3d(-16px,24px,0) rotate(170deg) scaleX(1.1)} 45%{opacity:.5;transform:translate3d(-30px,8px,0) rotate(205deg) scaleX(.8)} 50%{opacity:0;transform:translate3d(-20px,0,0) rotate(230deg) scaleX(.3)} 100%{opacity:0} } /* Mobile Home: shared star styling; flight keyframes are defined above. */ @keyframes ledgerMobileRestingStar{0%,2%{opacity:1} 5%,43%{opacity:0} 46%,100%{opacity:1}} .ledger-mobile-home-star{position:relative;isolation:isolate;overflow:visible!important} .ledger-mobile-home-star .ledger-mobile-nav-label{position:relative;z-index:3!important} .ledger-mobile-home-star::before,.ledger-mobile-home-star::after{position:absolute;pointer-events:none;opacity:0;will-change:transform,opacity;backface-visibility:hidden} .ledger-mobile-home-star::before{content:"★";left:1.15rem;top:50%;z-index:2!important;width:42px;height:42px;margin:-21px 0 0 -11px;display:grid;place-items:center;color:#f5ce46;font:400 42px/1 Arial,Helvetica,sans-serif;text-shadow:0 0 6px #fff,0 0 15px #f5ce46,0 0 25px #f5ce46;filter:drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(245,206,70,.95))} .ledger-mobile-home-star::after{content:"";left:.1rem;top:50%;z-index:1!important;width:62px;height:10px;margin-top:-5px;border-radius:999px;background:linear-gradient(90deg,transparent 0%,#cbd5e1 38%,#fff 100%);transform-origin:right center;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 9px #f5ce46)} @media(prefers-reduced-motion:no-preference){ .ledger-mobile-home-star .ledger-game-icon--home{animation:ledgerMobileRestingStar 4.4s linear infinite!important;opacity:1} } .ledger-menu-scroll-cue{display:none} .tcg-drawer-primary>.menu-drawer__menu-item,.tcg-drawer-primary>li>details>summary{align-items:center} .ledger-mobile-nav-label{display:inline-flex;align-items:center;min-width:0} .ledger-mobile-nav-label .ledger-game-icon{width:3rem;height:3rem;flex:0 0 3rem;margin-right:1rem} .ledger-mobile-submenu-title{display:inline-flex;align-items:center} .ledger-mobile-submenu-title .ledger-game-icon{width:3rem;height:3rem;flex:0 0 3rem;margin:0 .9rem 0 .2rem} @media (prefers-reduced-motion:no-preference){ details[open]>.menu-drawer__submenu .ledger-mobile-submenu-title .ledger-game-icon--pokemon .ledger-pokeball{animation:ledgerPokeballLoop 3.5s ease-in-out infinite} details[open]>.menu-drawer__submenu .ledger-mobile-submenu-title .ledger-game-icon--pokemon .ledger-capture-flash{animation:ledgerCaptureLoop 3.5s ease-in-out infinite} details[open]>.menu-drawer__submenu .ledger-mobile-submenu-title .ledger-game-icon--one-piece .ledger-straw-hat{animation:ledgerHatLoop 3.5s ease-in-out infinite} details[open]>.menu-drawer__submenu .ledger-mobile-submenu-title .ledger-game-icon--one-piece .ledger-splash{animation:ledgerSplashLoop 3.5s ease-in-out infinite} details[open]>.menu-drawer__submenu .ledger-mobile-submenu-title .ledger-dragon-orbs{animation:ledgerPowerLoop 3.5s ease-in-out infinite} details[open]>.menu-drawer__submenu .ledger-mobile-submenu-title .ledger-aura{animation:ledgerAuraLoop 3.5s ease-in-out infinite} /* Pokémon keeps its full desktop sequence while the menu item is pressed. */ .tcg-drawer-primary>li>:is(a,details>summary):active .ledger-chest-lid{animation:ledgerChest .72s ease both} .tcg-drawer-primary>li>:is(a,details>summary):active .ledger-gold-burst{animation:ledgerGold .72s ease both} .tcg-drawer-primary>li>:is(a,details>summary):active .ledger-shooting-star{animation:ledgerShoot .72s ease both} .tcg-drawer-primary>li>:is(a,details>summary):active .ledger-star-trail{animation:ledgerTrail .72s ease both} } @keyframes ledgerPokeballLoop{0%,22%,100%{transform:translateY(0) rotate(0)}5%{transform:translateY(-6px) rotate(-10deg)}10%{transform:translateY(0)}13%{transform:rotate(-8deg)}16%{transform:rotate(8deg)}19%{transform:rotate(0)}} @keyframes ledgerCaptureLoop{0%,11%,22%,100%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(3.2)}18%{opacity:.6;transform:scale(.45)}} @keyframes ledgerHatLoop{0%,22%,100%{transform:translateY(0) rotate(0)}7%{transform:translateY(-7px) rotate(16deg)}15%{transform:translateY(-3px) rotate(350deg)}} @keyframes ledgerSplashLoop{0%,8%,22%,100%{opacity:0;transform:scaleX(.4)}13%{opacity:1;transform:scaleX(1.1)}18%{opacity:.3;transform:scaleX(.8)}} @keyframes ledgerPowerLoop{0%,22%,100%{transform:scale(1);filter:none}10%{transform:scale(1.1);filter:drop-shadow(0 0 4px #ffd34d)}17%{transform:scale(.99)}} @keyframes ledgerAuraLoop{0%,5%,22%,100%{opacity:0;transform:scale(.5)}11%{opacity:1;transform:scale(1.12)}18%{opacity:.25;transform:scale(1.35)}} @media screen and (max-width:749px){ .menu-drawer{width:min(88vw,40rem)} .menu-drawer__navigation{padding-top:2.4rem} .menu-drawer__menu-item{min-height:5.4rem;font-size:1.7rem} .menu-drawer__inner-submenu{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;position:relative} .menu-drawer__submenu .menu-drawer__submenu{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;background:rgb(var(--color-background))!important;z-index:10!important;overflow-y:auto!important;overflow-x:hidden!important} .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu{padding-bottom:12rem!important} .menu-drawer__inner-submenu>.menu-drawer__menu{padding-bottom:7rem} .ledger-menu-scroll-cue{position:sticky;bottom:0;z-index:30;min-height:3.8rem;align-items:flex-end;justify-content:center;gap:.7rem;padding:1.2rem 1rem .65rem;pointer-events:none;font-size:1.15rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(to bottom,rgba(var(--color-background),0),rgb(var(--color-background)) 62%)} .ledger-menu-scroll-cue.is-visible{display:flex} #link-pokemon .ledger-browse-all-item{margin:.4rem 1.8rem 1rem;border-bottom:.1rem solid rgba(var(--color-foreground),.18)} #link-pokemon .ledger-browse-all-link{justify-content:space-between;padding-left:1.2rem;padding-right:1.2rem;font-weight:750} #link-pokemon .ledger-browse-all-link__arrow{font-size:2rem;line-height:1} } .ledger-mobile-dragon-host{position:relative!important;isolation:isolate;overflow:hidden!important;display:flex!important;width:100%!important;box-sizing:border-box!important;align-items:center!important;justify-content:space-between!important;padding-right:5rem!important} .ledger-mobile-dragon-host>.ledger-dragon-wrap{position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none;overflow:hidden} .ledger-mobile-dragon-host>.ledger-mobile-nav-label{position:relative;z-index:2} .ledger-nav-dragon-host.ledger-mobile-dragon-host>span.svg-wrapper{position:absolute!important;left:auto!important;right:3rem!important;top:50%!important;transform:translateY(-50%)!important;z-index:5!important;margin:0!important;flex:0 0 auto!important} .ledger-mobile-dragon-host .ledger-dragon-canvas{position:absolute;left:0;top:0;width:100%;height:100%} /* END_SNIPPET:header-drawer */ /* START_SNIPPET:header-mega-menu (INDEX:70) */ .section-header.shopify-section-group-header-group { z-index: 40; } .ledger-nav .mega-menu__content { z-index: 5; } .ledger-nav > .list-menu { gap: .6rem; align-items: center; } .ledger-nav > .list-menu > li > a, .ledger-nav .mega-menu > summary { min-height: 4.6rem; padding: 1rem 2.7rem 1rem 1.3rem; border: 1px solid #e5dfcf; border-radius: 9px; background: #faf9f5; color: #17365c; font-weight: 750; letter-spacing: .02em; box-shadow: 0 3px 0 #e9e4d8; transition: background .16s, box-shadow .16s; } .ledger-nav > .list-menu > li > a { padding-right: 1.3rem; } .ledger-nav__badge { display: inline-grid; place-items: center; width: 2.2rem; height: 2.5rem; margin-right: .8rem; background: #17365c; color: #f0c75e; border: 1px solid #bd9842; border-radius: 4px; font-size: 1.4rem; vertical-align: middle; } .ledger-nav .mega-menu > summary:hover, .ledger-nav .mega-menu[open] > summary, .ledger-nav > .list-menu > li > a:hover, .ledger-nav > .list-menu > li > a[aria-current="page"] { background: #f0c75e; color: #101d33; border-color: #c59d42; box-shadow: 0 3px 0 #c59d42; } .ledger-nav .header__menu-item:hover span { text-decoration: none; } .ledger-nav .header__active-menu-item { text-decoration: none; } .ledger-nav .mega-menu__content { background: #fffdf8; border: 1px solid #e5dfcf; border-top: 3px solid #f0c75e; border-radius: 0 0 20px 20px; padding-top: 2.4rem; padding-bottom: 2.4rem; box-shadow: 0 18px 32px #12203924; max-height: min(70vh, 76rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #c8ae70 #f4f0e7; } .ledger-nav__intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .ledger-nav__intro p { color: #647087; margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .ledger-nav__intro strong { color: #17365c; font-size: 2.6rem; line-height: 1.2; } .ledger-nav__intro > a { border: 1px solid #d1b668; background: #fff3ca; color: #17365c; border-radius: 8px; padding: 1.1rem 1.6rem; font-size: 1.3rem; font-weight: 700; text-decoration: none; } .ledger-nav .mega-menu__list, .ledger-nav .mega-menu .mega-menu__list--condensed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; } .ledger-nav .mega-menu__list > li.ledger-nav__redundant-browse { display:none; } .ledger-nav .mega-menu__list > li { border: 1px solid #e4e7ed; border-radius: 12px; background: #fff; padding: 1.2rem; box-shadow: 0 3px 0 #ede8dc; } .ledger-nav .mega-menu__link { padding: .9rem 1rem; min-height: 4.4rem; line-height: 1.4; overflow-wrap: anywhere; color: #344862; border-radius: 6px; font-size: 1.3rem; } .ledger-nav .mega-menu__link--level-2 { color: #17365c; font-weight: 750; background: #f5f3eb; border-left: 3px solid #d9af4c; margin-bottom: .7rem; } .ledger-nav__set-group > summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; } .ledger-nav__set-group > summary::-webkit-details-marker { display:none; } .ledger-nav__set-group > ul { margin:0; padding:.4rem 0 .2rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem .6rem; } .ledger-nav__set-group > ul .mega-menu__link { min-height:3.4rem; padding:.55rem .7rem; font-size:1.2rem; } .ledger-nav__set-group:not([open]) > ul { display:none; } .ledger-nav__set-chevron { width:8px; height:8px; flex:0 0 8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .16s; margin-right:.3rem; } .ledger-nav__set-group[open] .ledger-nav__set-chevron { transform:rotate(225deg); } .ledger-nav .mega-menu__link:hover, .ledger-nav .mega-menu__link--active { background: #fff2c7; color: #101d33; text-decoration: underline; text-underline-offset: .3rem; } .ledger-nav :is(a, summary):focus-visible { outline: 3px solid #2459a6; outline-offset: 3px; } .header-wrapper .menu-drawer { background: #fffdf8; border-top: 3px solid #f0c75e; } .header-wrapper .tcg-drawer-primary { padding-inline: 1.6rem; } .header-wrapper .tcg-drawer-primary > li { margin-bottom: 1rem; } .header-wrapper .tcg-drawer-primary > li > a, .header-wrapper .tcg-drawer-primary > li > details > summary { border: 1px solid #e3dac4; border-left: 4px solid #dfb84f; background: #faf8f1; border-radius: 9px; box-shadow: 0 3px 0 #ece6d7; color: #17365c; font-weight: 750; padding: 1.6rem 3.6rem 1.6rem 1.6rem; } .header-wrapper .menu-drawer__submenu { background: #fffdf8; } .header-wrapper .menu-drawer__submenu .menu-drawer__close-button { background: #fff0c2; color: #17365c; border-bottom: 1px solid #e0c376; min-height: 5.6rem; font-weight: 750; } .header-wrapper .menu-drawer__submenu .menu-drawer__menu-item { color: #17365c; border-bottom: 1px solid #eeebe2; min-height: 4.8rem; } .header-wrapper .menu-drawer__menu-item:hover, .header-wrapper .menu-drawer__menu-item--active { background: #fff0c2; } @media (min-width: 990px) and (max-width: 1199px) { .ledger-nav .mega-menu__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledger-nav > .list-menu { gap: .5rem; } .ledger-nav__badge { display: none; } } @media (min-width: 1200px) { .ledger-nav__set-group > ul { grid-template-columns:repeat(2,minmax(0,1fr)); } } .ledger-nav, .ledger-nav > .list-menu, .ledger-nav > .list-menu > li, .ledger-nav header-menu, .ledger-nav .mega-menu { overflow:visible !important; } .ledger-nav-star-host { position:relative; isolation:isolate; overflow:visible !important; } .ledger-nav-star-host > span:not(.ledger-menu-orbit), .ledger-nav-star-host > .icon-caret { position:relative; z-index:3; } .ledger-menu-orbit { display:none !important; } .ledger-menu-orbit--back { z-index:0; } .ledger-menu-orbit--front { z-index:5; } .ledger-menu-orbit-star { position:absolute; left:0; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; display:grid; place-items:center; color:#f5ce46; font-size:20px; line-height:1; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #d5deea); } .ledger-menu-orbit-tail { position:absolute; left:-27px; top:50%; width:31px; height:5px; margin-top:-2px; border-radius:999px; background:linear-gradient(90deg,transparent,#cbd5e1 35%,#fff 100%); filter:drop-shadow(0 0 3px #fff); transform-origin:100% 50%; } .ledger-nav-star-host:is(:hover,:focus-visible,:active) .ledger-game-icon { animation:ledgerRestingStarHide 1.7s linear both; } .ledger-nav-star-host::before { content:"★"; position:absolute; left:1.15rem; top:50%; z-index:12; width:20px; height:20px; margin:-10px 0 0 0; display:grid; place-items:center; pointer-events:none; opacity:0; color:#f5ce46; font-size:21px; line-height:1; text-shadow:0 0 3px #fff,0 0 6px #cbd5e1; } .ledger-nav-star-host::after { content:""; position:absolute; left:.1rem; top:50%; z-index:11; width:34px; height:5px; margin-top:-2px; border-radius:999px; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent 0%,#cbd5e1 38%,#fff 100%); filter:drop-shadow(0 0 3px #fff); transform-origin:right center; } .ledger-nav-star-host:is(:hover,:focus-visible,:active)::before { animation:ledgerButtonStarFlight 1.7s cubic-bezier(.32,.05,.24,1) both; } .ledger-nav-star-host:is(:hover,:focus-visible,:active)::after { animation:ledgerButtonStarTrail 1.7s cubic-bezier(.32,.05,.24,1) both; } @keyframes ledgerButtonStarFlight { 0%{opacity:0;transform:translate(0,0) scale(1) rotate(0)} 6%{opacity:1;transform:translate(0,0) scale(1) rotate(0)} 28%{opacity:1;transform:translate(calc(100% + 82px),-31px) scale(1.18) rotate(35deg)} 40%{opacity:.75;transform:translate(calc(100% + 104px),-10px) scale(.78) rotate(70deg)} 49%{opacity:0;transform:translate(calc(50% + 54px),5px) scale(.5) rotate(100deg)} 58%{opacity:0;transform:translate(-22px,24px) scale(.55) rotate(140deg)} 66%{opacity:1;transform:translate(-16px,29px) scale(1.16) rotate(175deg)} 84%{opacity:1;transform:translate(-4px,8px) scale(1.06) rotate(220deg)} 96%{opacity:1;transform:translate(0,0) scale(1) rotate(250deg)} 100%{opacity:0;transform:translate(0,0) scale(1) rotate(250deg)} } @keyframes ledgerButtonStarTrail { 0%,5%{opacity:0;transform:translate(-20px,4px) rotate(-38deg) scaleX(.25)} 14%{opacity:.7;transform:translate(8px,-8px) rotate(-38deg) scaleX(1)} 28%{opacity:1;transform:translate(calc(100% + 55px),-27px) rotate(-22deg) scaleX(1.8)} 40%{opacity:.55;transform:translate(calc(100% + 78px),-6px) rotate(12deg) scaleX(1.2)} 49%,58%{opacity:0;transform:translate(30px,8px) rotate(35deg) scaleX(.5)} 66%{opacity:1;transform:translate(-42px,27px) rotate(20deg) scaleX(1.6)} 84%{opacity:.6;transform:translate(-28px,9px) rotate(-18deg) scaleX(1)} 96%{opacity:.15;transform:translate(-20px,2px) rotate(-28deg) scaleX(.4)} 100%{opacity:0;transform:translate(-20px,2px) rotate(-28deg) scaleX(.2)} } @keyframes ledgerRestingStarHide { 0%,7%{opacity:1} 8%,92%{opacity:0} 93%,100%{opacity:1} } @keyframes ledgerMenuOrbitBack { 0%,30%{opacity:0;transform:translate(92%,-12%) scale(.82)} 36%{opacity:.72;transform:translate(82%,8%) scale(.72)} 48%{opacity:.48;transform:translate(50%,48%) scale(.56)} 58%{opacity:.68;transform:translate(18%,82%) scale(.7)} 64%,100%{opacity:0;transform:translate(5%,96%) scale(.82)} } @keyframes ledgerMenuOrbitFront { 0%{opacity:1;transform:translate(8%,52%) scale(1)} 10%{opacity:1;transform:translate(32%,18%) scale(1.08)} 24%{opacity:1;transform:translate(78%,-12%) scale(1.18)} 30%{opacity:.95;transform:translate(92%,-12%) scale(1.12)} 31%,63%{opacity:0} 64%{opacity:1;transform:translate(5%,96%) scale(1.16)} 76%{opacity:1;transform:translate(-8%,78%) scale(1.12)} 88%{opacity:1;transform:translate(0,60%) scale(1.05)} 100%{opacity:0;transform:translate(8%,52%) scale(1)} } @media (prefers-reduced-motion: reduce) { .ledger-nav .header__menu-item { transition: none; } } /* END_SNIPPET:header-mega-menu */ /* START_SNIPPET:ledger-brand (INDEX:75) */ .ledger-brand{display:inline-flex;align-items:center;gap:10px;vertical-align:middle;text-align:left;max-width:260px} .ledger-brand__mark{width:56px;height:56px;flex:0 0 56px} .ledger-brand__name{max-width:180px;font-size:24px;font-weight:750;letter-spacing:-.04em;line-height:1.05;color:#17365c} @media(max-width:749px){.ledger-brand{gap:7px;max-width:180px}.ledger-brand__mark{width:40px;height:40px;flex-basis:40px}.ledger-brand__name{font-size:19px;max-width:125px}} /* END_SNIPPET:ledger-brand */ /* START_SNIPPET:ledger-header-layout (INDEX:79) */ .header-wrapper .ledger-header { column-gap: 2.4rem; } .header-wrapper .ledger-header > .tcg-search-bar { grid-area: search; padding: 0; margin: 0; width: 100%; max-width: none; min-width: 0; } .ledger-navigation-bar { background: #101d33; border-bottom: 2px solid #dfb84f; } .ledger-navigation-bar .header__inline-menu { max-width: 1240px; padding: 1rem 3.2rem; margin: auto; } .ledger-navigation-bar .ledger-nav > .list-menu { gap: .8rem; } .ledger-navigation-bar .ledger-nav .mega-menu > summary, .ledger-navigation-bar .ledger-nav > .list-menu > li > a { background: transparent; color: #fff; border-color: #364158; box-shadow: none; } .ledger-navigation-bar .ledger-nav .mega-menu > summary:hover, .ledger-navigation-bar .ledger-nav .mega-menu[open] > summary, .ledger-navigation-bar .ledger-nav > .list-menu > li > a:hover, .ledger-navigation-bar .ledger-nav > .list-menu > li > a[aria-current="page"] { background: #f0c75e; color: #101d33; border-color: #f0c75e; } @media (min-width: 990px) { .header-wrapper .ledger-header { grid-template-areas: 'heading search icons'; grid-template-columns: auto minmax(240px,1fr) auto; padding-top: 2.2rem; padding-bottom: 2.2rem; } .header-wrapper .ledger-header .header__heading, .header-wrapper .ledger-header > .header__heading-link { justify-self: start; } } @media (max-width: 989px) { .header-wrapper .ledger-header { grid-template-areas: 'left-icons heading icons' 'search search search'; grid-template-columns: 44px minmax(0,1fr) auto; row-gap: 1.8rem; padding-bottom: 2.4rem; } .ledger-navigation-bar { display: none; } } /* END_SNIPPET:ledger-header-layout */ /* START_SNIPPET:ledger-live-lounge (INDEX:80) */ .ll { display:block; width:100%; padding:0 32px 32px; color:#fff; background:#061327; } .ll__frame { max-width:1176px; margin:auto; padding:28px; border:2px solid transparent; border-radius:16px; background:linear-gradient(120deg,#071226,#101d30) padding-box,linear-gradient(110deg,#e891b1,#f0c75e 60%,#fff1a5) border-box; box-shadow:0 0 18px #f0c75e20; } .ll__eyebrow { color:#f0c75e; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .ld .ll h2 { color:#fff; font-size:clamp(26px,3vw,36px); margin:10px 0; } .ll__copy p { color:#d5dfeb; margin:0 0 24px; font-size:15px; } .ll__hosts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .ll .ll__host { display:flex; align-items:center; gap:12px; min-width:0; padding:20px 16px; background:#102139; border:1px solid #4b5a70; border-radius:12px; color:#fff; text-decoration:none; transition:background .2s,border-color .2s; } .ll .ll__host:hover { background:#1b304c; border-color:#f0c75e; } .ll__host:focus-visible { outline:3px solid #f0c75e; outline-offset:4px; } .ll__avatar { display:grid; place-items:center; flex:0 0 40px; height:40px; border:1px solid #d5b662; border-radius:50%; color:#f0c75e; font-weight:700; } .ll__details { flex:1; min-width:0; } .ll__details strong { display:block; font-size:15px; overflow-wrap:anywhere; } .ll__details small { display:block; margin:4px 0 10px; color:#bfcddd; font-size:11px; overflow-wrap:anywhere; } .ll__badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#cfdae9; } .ll__badge i { width:7px; height:7px; border-radius:50%; background:#97a7ba; } .ll__host.is-live { border-color:#37d99c; } .ll__host.is-live .ll__badge { color:#8bf0c5; } .ll__host.is-live .ll__badge i { background:#37d99c; box-shadow:0 0 8px #37d99c88; } .ll__arrow { color:#f0c75e; font-size:22px; } .ll__note { font-size:12px; color:#bfcddd; margin:18px 0 0; } @media(max-width:989px) { .ll__hosts { grid-template-columns:1fr; } } @media(max-width:599px) { .ll { padding:0 18px 24px; } .ll__frame { padding:20px; } } /* END_SNIPPET:ledger-live-lounge */ /* START_SNIPPET:ledger-nav-icon (INDEX:81) */ .ledger-game-icon { display:inline-block;width:3rem;height:3rem;flex:0 0 3rem;margin-right:.8rem;vertical-align:middle;filter:drop-shadow(0 2px 1px #17365c14);overflow:visible; } .ledger-game-icon * { transform-box:fill-box;transform-origin:center; } .ledger-capture-flash,.ledger-splash,.ledger-aura,.ledger-gold-burst,.ledger-gold-rays,.ledger-chest-glow,.ledger-star-trail,.ledger-pirate-flag { opacity:0; } @media (prefers-reduced-motion:no-preference) { .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-pokeball { animation:ledgerPokeballDesktop 1.8s cubic-bezier(.22,.75,.25,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-capture-flash { animation:ledgerCaptureDesktop 1.8s ease both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--one-piece .ledger-straw-hat { animation:ledgerHatDesktop 1.15s cubic-bezier(.22,.75,.25,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--one-piece .ledger-jolly-roger { animation:ledgerFlagDesktop 1.15s ease both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--one-piece .ledger-splash { animation:ledgerSplashDesktop 1.15s ease both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--one-piece .ledger-pirate-flag { animation:ledgerPirateFlagDesktop 1.15s cubic-bezier(.2,.8,.2,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon[class*="dragon"] { animation:ledgerDragonGlow 1.3s ease both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon[class*="dragon"] .ledger-dragon-orb--one { animation:ledgerDragonOrbitOne 1.3s cubic-bezier(.22,.75,.25,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon[class*="dragon"] .ledger-dragon-orb--two { animation:ledgerDragonOrbitTwo 1.3s cubic-bezier(.22,.75,.25,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon[class*="dragon"] .ledger-dragon-orb--three { animation:ledgerDragonOrbitThree 1.3s cubic-bezier(.22,.75,.25,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--dragon-ball .ledger-aura, .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--dragon-ball-super .ledger-aura { animation:ledgerAura .1.8s cubic-bezier(.22,.75,.25,1) both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-chest-lid { animation:ledgerChestDesktop 1.8s cubic-bezier(.22,.75,.25,1) both;transform-origin:50% 100%; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst { animation:ledgerGoldDesktop 1.8s ease both; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-shooting-star { animation:none; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-star-trail { animation:none; } .ledger-nav > .list-menu > li, .ledger-nav .mega-menu > summary { overflow:visible; } .ledger-nav .ledger-game-icon { overflow:visible; } .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-star-trail { animation:ledgerTrailDesktop 1.8s ease both; } } @keyframes ledgerHatDesktop { 0%{transform:translateY(0) rotate(0)} 20%{transform:translateY(-8px) rotate(18deg)} 46%{transform:translateY(-6px) rotate(165deg)} 72%{transform:translateY(-4px) rotate(325deg)} 88%{transform:translateY(-2px) rotate(355deg)} 100%{transform:translateY(0) rotate(360deg)} } @keyframes ledgerHatMobileFast { 0%{transform:translateY(0) rotate(0)} 6.4%{transform:translateY(-8px) rotate(18deg)} 14.7%{transform:translateY(-6px) rotate(165deg)} 23%{transform:translateY(-4px) rotate(325deg)} 28.1%{transform:translateY(-2px) rotate(355deg)} 31.94%,100%{transform:translateY(0) rotate(360deg)} } @keyframes ledgerFlagDesktop { 0%{transform:scale(1) skewX(0)} 25%{transform:scale(1.1) skewX(-7deg)} 50%{transform:scale(1.05) skewX(7deg)} 75%{transform:scale(1.08) skewX(-4deg)} 100%{transform:scale(1) skewX(0)} } @keyframes ledgerPirateFlagDesktop { 0%,10%{opacity:0;transform:translate(-7px,9px) scale(.25) rotate(-20deg)} 28%{opacity:1;transform:translate(7px,-2px) scale(1.45) rotate(8deg)} 48%{opacity:1;transform:translate(7px,-2px) scale(1.28) rotate(-8deg)} 68%{opacity:1;transform:translate(7px,-2px) scale(1.38) rotate(7deg)} 88%{opacity:1;transform:translate(7px,-2px) scale(1.25) rotate(-3deg)} 100%{opacity:0;transform:translate(4px,-5px) scale(1.05) rotate(0)} } @keyframes ledgerSplashDesktop { 0%{opacity:0;transform:scaleX(.35)} 28%{opacity:1;transform:scaleX(1.15)} 52%{opacity:.45;transform:scaleX(.8)} 72%{opacity:1;transform:scaleX(1.05)} 100%{opacity:0;transform:scaleX(.45)} } @keyframes ledgerChestDesktop { 0%{transform:translateY(0) rotateX(0) scale(1)} 18%{transform:translateY(-3px) rotateX(25deg) scale(1.04)} 38%{transform:translateY(-9px) rotateX(85deg) scale(1.1)} 58%{transform:translateY(-8px) rotateX(72deg) scale(1.07)} 78%{transform:translateY(-4px) rotateX(40deg) scale(1.04)} 92%{transform:translateY(-1px) rotateX(12deg)} 100%{transform:translateY(0) rotateX(0) scale(1)} } @keyframes ledgerGoldDesktop { 0%{opacity:0;transform:translateY(7px) scale(.3)} 28%{opacity:.2;transform:translateY(2px) scale(.6)} 42%{opacity:1;transform:translateY(-12px) scale(1.5) rotate(8deg)} 62%{opacity:.9;transform:translateY(-16px) scale(1.2) rotate(-5deg)} 82%{opacity:.35;transform:translateY(-20px) scale(.85)} 100%{opacity:0;transform:translateY(-22px) scale(.6)} } 12%{opacity:.55;transform:translate(-2px,2px) scaleX(.8);filter:drop-shadow(0 0 2px #fff)} 30%{opacity:1;transform:translate(-9px,9px) scaleX(2.8);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px #cfd8e6)} 50%{opacity:1;transform:translate(-17px,17px) scaleX(4);filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #b8c5d8)} 60%{opacity:.2;transform:translate(-20px,20px) scaleX(4.4);filter:drop-shadow(0 0 3px #fff)} 70%{opacity:.7;transform:translate(-8px,8px) scaleX(2);filter:drop-shadow(0 0 3px #fff)} 88%{opacity:.3;transform:translate(-3px,3px) scaleX(.8);filter:drop-shadow(0 0 2px #fff)} 100%{opacity:0;transform:translate(0,0) scaleX(.15);filter:none} } 14%{opacity:.35;transform:translate(-1px,1px) scaleX(.65)} 34%{opacity:1;transform:translate(-8px,8px) scaleX(2.4)} 52%{opacity:.8;transform:translate(-14px,14px) scaleX(3.2)} 58%{opacity:0;transform:translate(-18px,18px) scaleX(3.8)} 70%{opacity:.5;transform:translate(-6px,6px) scaleX(1.5)} 88%{opacity:.15;transform:translate(-2px,2px) scaleX(.6)} 100%{opacity:0;transform:translate(0,0) scaleX(.15)} } 24%{opacity:.35;transform:scaleX(.6)} 42%{opacity:1;transform:scaleX(1.7)} 66%{opacity:.6;transform:scaleX(1.15)} 84%{opacity:.25;transform:scaleX(.65)} 100%{opacity:0;transform:scaleX(.25)} } @keyframes ledgerPokeball { 0%{transform:translateY(0) rotate(0) scale(1)} 16%{transform:translateY(-8px) rotate(-14deg) scale(1.06)} 32%{transform:translateY(0) rotate(8deg) scale(1)} 48%{transform:translateY(-4px) rotate(-11deg) scale(1.04)} 64%{transform:translateY(0) rotate(11deg) scale(1)} 80%{transform:translateY(-2px) rotate(-5deg)} 100%{transform:translateY(0) rotate(0) scale(1)} } @keyframes ledgerCapture { 0%,48%,100%{opacity:0;transform:scale(.3)} 58%{opacity:1;transform:scale(3.8)} 72%{opacity:.9;transform:scale(.35)} } @keyframes ledgerDragonGlow { 0%,100%{filter:drop-shadow(0 2px 1px #17365c14)} 18%{filter:drop-shadow(0 0 5px #fff7c2) drop-shadow(0 0 8px #ffb52f)} 48%{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 14px #ff9f1c)} 72%{filter:drop-shadow(0 0 6px #ffe36b) drop-shadow(0 0 10px #ffb52f)} } @keyframes ledgerDragonOrbitOne { 0%,100%{transform:translate(0,0) rotate(0) scale(1)} 22%{transform:translate(-5px,-6px) rotate(-35deg) scale(1.04)} 48%{transform:translate(8px,-9px) rotate(145deg) scale(1.12)} 72%{transform:translate(7px,5px) rotate(265deg) scale(1.05)} } @keyframes ledgerDragonOrbitTwo { 0%,100%{transform:translate(0,0) rotate(0) scale(1)} 22%{transform:translate(6px,3px) rotate(35deg) scale(1.04)} 48%{transform:translate(-8px,7px) rotate(155deg) scale(1.12)} 72%{transform:translate(-7px,-6px) rotate(275deg) scale(1.05)} } @keyframes ledgerDragonOrbitThree { 0%,100%{transform:translate(0,0) rotate(0) scale(1)} 22%{transform:translate(0,-7px) rotate(45deg) scale(1.04)} 48%{transform:translate(0,10px) rotate(165deg) scale(1.12)} 72%{transform:translate(8px,-1px) rotate(285deg) scale(1.05)} } @keyframes ledgerAura { 0%,25%,100%{opacity:0;transform:scale(.5)} 48%{opacity:1;transform:scale(1.12)} 72%{opacity:.35;transform:scale(1.35)} } @keyframes ledgerChest { 0%,18%,100%{transform:translateY(0) rotateX(0) scale(1)} 28%{transform:translateY(-2px) rotateX(18deg) scale(1.04)} 42%{transform:translateY(-8px) rotateX(82deg) scale(1.08)} 62%{transform:translateY(-7px) rotateX(72deg) scale(1.06)} 78%{transform:translateY(-3px) rotateX(34deg) scale(1.02)} 90%{transform:translateY(0) rotateX(0) scale(1)} } @keyframes ledgerGold { 0%,24%,100%{opacity:0;transform:translateY(8px) scale(.35) rotate(-8deg)} 40%{opacity:1;transform:translateY(-10px) scale(1.45) rotate(5deg)} 58%{opacity:1;transform:translateY(-14px) scale(1.18) rotate(-3deg)} 78%{opacity:.35;transform:translateY(-18px) scale(.8) rotate(4deg)} } @keyframes ledgerTrail { 0%,25%,100%{opacity:0;transform:scaleX(.2)} 48%{opacity:1;transform:scaleX(1.5)} 70%{opacity:.25;transform:scaleX(.7)} } /* Main-menu icons replay the same full interaction animation on a loop. */ @media (prefers-reduced-motion:no-preference) { /* Mobile Pokémon uses the same throw, hinged lid and delayed light as desktop. */ .ledger-mobile-nav-label .ledger-game-icon--one-piece .ledger-straw-hat { animation:ledgerHatMobileFast 3.6s linear infinite!important; } .ledger-mobile-nav-label .ledger-game-icon--one-piece .ledger-jolly-roger { animation:ledgerFlagDesktop 3.6s ease infinite!important; } .ledger-mobile-nav-label .ledger-game-icon--one-piece .ledger-splash { animation:ledgerSplashDesktop 3.6s ease infinite!important; } .ledger-mobile-nav-label .ledger-game-icon--one-piece .ledger-pirate-flag { animation:ledgerPirateFlagDesktop 3.6s cubic-bezier(.2,.8,.2,1) infinite!important; } .ledger-mobile-nav-label .ledger-game-icon[class*="dragon"] { animation:ledgerDragonMobileGlow 3.9s linear infinite!important; } .ledger-mobile-nav-label .ledger-game-icon[class*="dragon"] .ledger-dragon-orb--one { animation:ledgerDragonMobileOne 3.9s linear infinite!important; } .ledger-mobile-nav-label .ledger-game-icon[class*="dragon"] .ledger-dragon-orb--two { animation:ledgerDragonMobileTwo 3.9s linear infinite!important; } .ledger-mobile-nav-label .ledger-game-icon[class*="dragon"] .ledger-dragon-orb--three { animation:ledgerDragonMobileThree 3.9s linear infinite!important; } .ledger-mobile-nav-label .ledger-game-icon[class*="dragon"] .ledger-aura { animation:ledgerDragonMobileAura 3.9s linear infinite!important; } .ledger-mobile-nav-label .ledger-game-icon[class*="all"] .ledger-chest-lid, .ledger-mobile-nav-label .ledger-game-icon[class*="product"] .ledger-chest-lid { animation:ledgerChestMobileDesktop 6.5s cubic-bezier(.22,.75,.25,1) infinite; transform-origin:50% 100%; } .ledger-mobile-nav-label .ledger-game-icon[class*="all"] .ledger-gold-burst, .ledger-mobile-nav-label .ledger-game-icon[class*="product"] .ledger-gold-burst { animation:ledgerGoldMobileDesktop 4.2s ease infinite; } .ledger-mobile-nav-label .ledger-game-icon[class*="all"], } @keyframes ledgerChestRays { 0%,25%,100%{opacity:0;transform:scale(.45)} 40%{opacity:1;transform:scale(1.25)} 58%{opacity:.8;transform:scale(1.05)} 78%{opacity:0;transform:scale(1.4)} } @keyframes ledgerChestGlow { 0%,25%,100%{opacity:0;transform:scale(.4)} 40%{opacity:.95;transform:scale(1.35)} 60%{opacity:.6;transform:scale(1.1)} 78%{opacity:0;transform:scale(1.55)} } @keyframes ledgerChestPunch { 0%,20%,100%{transform:scale(1);filter:drop-shadow(0 2px 1px #17365c14)} 38%{transform:scale(1.16);filter:drop-shadow(0 0 7px #ffd84d)} 55%{transform:scale(1.08);filter:drop-shadow(0 0 10px #ffbf32)} 78%{transform:scale(1);filter:drop-shadow(0 2px 1px #17365c14)} } /* Pokeball toss, landing, opening and capture burst. */ .ledger-poke-rays{opacity:0;transform-origin:20px 20px;transform-box:view-box;pointer-events:none} .ledger-game-icon--pokemon .ledger-ball-lid{transform-origin:50% 100%} @media(prefers-reduced-motion:no-preference){ .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-pokeball{animation:ledgerPokeThrow 2.5s cubic-bezier(.3,.1,.25,1) both!important;transform-origin:center} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-ball-lid{animation:ledgerPokeOpen 2.5s ease-in-out both!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-capture-flash{animation:ledgerPokeBurst 2.5s ease-out both!important;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #ffe66b)} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-poke-rays{animation:ledgerPokeRays 2.5s ease-out both!important} } @keyframes ledgerPokeThrow{ 0%{transform:translate3d(-42px,-38px,0) rotate(-110deg) scale(.65);opacity:0} 8%{opacity:1} 25%{transform:translate3d(-19px,-44px,0) rotate(65deg) scale(.9)} 44%{transform:translate3d(0,0,0) rotate(390deg) scale(1.1)} 50%{transform:translate3d(0,4px,0) rotate(398deg) scale(.94)} 57%{transform:translate3d(0,-9px,0) rotate(372deg) scale(1.04)} 65%{transform:translate3d(0,0,0) rotate(360deg) scale(1)} 100%{transform:translate3d(0,0,0) rotate(360deg) scale(1)} } @keyframes ledgerPokeOpen{ 0%,64%{transform:translateY(0) scaleY(1)} 72%{transform:translateY(-5px) scaleY(.5)} 83%{transform:translateY(-8px) scaleY(.35)} 94%,100%{transform:translateY(0) scaleY(1)} } @keyframes ledgerPokeBurst{ 0%,65%{opacity:0;transform:scale(.1)} 73%{opacity:1;transform:scale(7)} 84%{opacity:.9;transform:scale(11)} 100%{opacity:0;transform:scale(1)} } @keyframes ledgerPokeRays{ 0%,67%{opacity:0;transform:scale(.2) rotate(0)} 77%{opacity:1;transform:scale(1.2) rotate(15deg)} 88%{opacity:.9;transform:scale(1.65) rotate(25deg)} 100%{opacity:0;transform:scale(1.9) rotate(30deg)} } /* Clearly separate the top half before the capture light emerges. */ .ledger-game-icon--pokemon .ledger-ball-lid{transform-box:view-box!important;transform-origin:34px 20px!important} .ledger-game-icon--pokemon .ledger-poke-inside{opacity:0} @media(prefers-reduced-motion:no-preference){ .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-ball-lid{animation:ledgerPokeLidVisible 2.9s ease-in-out both!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-poke-inside{animation:ledgerPokeInnerLight 2.9s ease-out both!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-pokeball{animation-duration:2.9s!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-capture-flash{animation:ledgerPokeFlashAfterOpen 2.9s ease-out both!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-game-icon--pokemon .ledger-poke-rays{animation:ledgerPokeRaysAfterOpen 2.9s ease-out both!important} } @keyframes ledgerPokeLidVisible{ 0%,65%{transform:translate(0,0) rotate(0deg)} 75%,85%{transform:translate(0,-3px) rotate(-62deg)} 96%,100%{transform:translate(0,0) rotate(0deg)} } @keyframes ledgerPokeInnerLight{ 0%,71%{opacity:0;transform:scale(.3)} 78%,86%{opacity:1;transform:scale(1.1)} 100%{opacity:0;transform:scale(.2)} } @keyframes ledgerPokeFlashAfterOpen{ 0%,75%{opacity:0;transform:scale(.1)} 81%{opacity:1;transform:scale(7)} 88%{opacity:1;transform:scale(12)} 100%{opacity:0;transform:scale(1)} } @keyframes ledgerPokeRaysAfterOpen{ 0%,76%{opacity:0;transform:scale(.2)} 83%{opacity:1;transform:scale(1.35)} 92%{opacity:.9;transform:scale(1.8)} 100%{opacity:0;transform:scale(2.1)} } /* Mobile matches the current desktop upward-opening lid and delayed flash. */ @keyframes ledgerPokeUpwardLid{0%,65%{transform:translateY(0) scaleY(1)}74%{transform:translateY(-10px) scaleY(.95)}80%,87%{transform:translateY(-17px) scaleY(.82)}95%{transform:translateY(-6px) scaleY(.94)}100%{transform:translateY(0) scaleY(1)}} @keyframes ledgerLateInner{0%,80%{opacity:0;transform:scale(.2)}86%,92%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.2)}} @keyframes ledgerLateFlash{0%,83%{opacity:0;transform:scale(.1)}89%{opacity:1;transform:scale(8)}94%{opacity:.85;transform:scale(12)}100%{opacity:0;transform:scale(1)}} @keyframes ledgerLateRays{0%,84%{opacity:0;transform:scale(.2)}90%{opacity:1;transform:scale(1.4)}96%{opacity:.75;transform:scale(1.8)}100%{opacity:0;transform:scale(2)}} /* Mobile Pokémon sequence matched to current desktop animation. */ @media(prefers-reduced-motion:no-preference){ .ledger-mobile-nav-label .ledger-game-icon--pokemon .ledger-pokeball{animation:ledgerPokeThrow 2.9s cubic-bezier(.3,.1,.25,1) infinite!important;transform-origin:center;will-change:transform,opacity} .ledger-mobile-nav-label .ledger-game-icon--pokemon .ledger-ball-lid{animation:ledgerPokeUpwardLid 2.9s ease-in-out infinite!important;transform-box:view-box!important;transform-origin:20px 20px!important} .ledger-mobile-nav-label .ledger-game-icon--pokemon .ledger-poke-inside{animation:ledgerLateInner 2.9s ease-out infinite!important} .ledger-mobile-nav-label .ledger-game-icon--pokemon .ledger-capture-flash{animation:ledgerLateFlash 2.9s ease-out infinite!important} .ledger-mobile-nav-label .ledger-game-icon--pokemon .ledger-poke-rays{animation:ledgerLateRays 2.9s ease-out infinite!important} } /* Mobile Dragon Ball: desktop-speed 1.3s orbit and glow, then a quiet pause. */ @keyframes ledgerDragonMobileGlow{0%,33.33%,100%{filter:drop-shadow(0 2px 1px #17365c14)}6%{filter:drop-shadow(0 0 5px #fff7c2) drop-shadow(0 0 8px #ffb52f)}16%{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 14px #ff9f1c)}24%{filter:drop-shadow(0 0 6px #ffe36b) drop-shadow(0 0 10px #ffb52f)}} @keyframes ledgerDragonMobileOne{0%,33.33%,100%{transform:translate(0,0) rotate(0) scale(1)}7.33%{transform:translate(-5px,-6px) rotate(-35deg) scale(1.04)}16%{transform:translate(8px,-9px) rotate(145deg) scale(1.12)}24%{transform:translate(7px,5px) rotate(265deg) scale(1.05)}} @keyframes ledgerDragonMobileTwo{0%,33.33%,100%{transform:translate(0,0) rotate(0) scale(1)}7.33%{transform:translate(6px,3px) rotate(35deg) scale(1.04)}16%{transform:translate(-8px,7px) rotate(155deg) scale(1.12)}24%{transform:translate(-7px,-6px) rotate(275deg) scale(1.05)}} @keyframes ledgerDragonMobileThree{0%,33.33%,100%{transform:translate(0,0) rotate(0) scale(1)}7.33%{transform:translate(0,-7px) rotate(45deg) scale(1.04)}16%{transform:translate(0,10px) rotate(165deg) scale(1.12)}24%{transform:translate(8px,-1px) rotate(285deg) scale(1.05)}} @keyframes ledgerDragonMobileAura{0%,8.33%,33.33%,100%{opacity:0;transform:scale(.5)}16%{opacity:1;transform:scale(1.12)}24%{opacity:.35;transform:scale(1.35)}} /* Match the desktop chest's 1.8-second opening, followed by a resting pause. */ @keyframes ledgerChestMobileDesktop{0%,27.69%,100%{transform:translateY(0) rotateX(0) scale(1)}4.98%{transform:translateY(-3px) rotateX(25deg) scale(1.04)}10.52%{transform:translateY(-9px) rotateX(85deg) scale(1.1)}16.06%{transform:translateY(-8px) rotateX(72deg) scale(1.07)}21.60%{transform:translateY(-4px) rotateX(40deg) scale(1.04)}25.48%{transform:translateY(-1px) rotateX(12deg)}} @keyframes ledgerGoldMobileDesktop{0%,42.857%,100%{opacity:0;transform:translateY(7px) scale(.3)}12%{opacity:.2;transform:translateY(2px) scale(.6)}18%{opacity:1;transform:translateY(-12px) scale(1.5) rotate(8deg)}26.571%{opacity:.9;transform:translateY(-16px) scale(1.2) rotate(-5deg)}35.143%{opacity:.35;transform:translateY(-20px) scale(.85)}42.85%{opacity:0;transform:translateY(-22px) scale(.6)}} /* Fifteen cards, scattered beneath the chest, never over the label. */ .ledger-gold-burst{opacity:1!important;animation:none!important;transform:none!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst,.ledger-mobile-nav-label .ledger-gold-burst{animation:none!important;transform:none!important} .ledger-gold-burst .ledger-coin{opacity:0;transform-box:fill-box!important;transform-origin:center!important} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--1{animation:ledgerScatter1 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--1{animation:ledgerScatterMobile1 6.5s linear infinite} @keyframes ledgerScatter1{0%,14.0%{opacity:0;transform:translate(0,0) rotate(0)}20.0%{opacity:1;transform:translate(0,-7px) rotate(-6deg)}30.0%{opacity:1;transform:translate(-4px,-29px) rotate(-15deg)}50.0%{opacity:1;transform:translate(-23px,26px) rotate(-31deg)}54.0%{opacity:1;transform:translate(-23px,24px) rotate(-31deg)}58.0%,91%{opacity:1;transform:translate(-23px,26px) rotate(-31deg)}100%,100%{opacity:0;transform:translate(-23px,26px) rotate(-31deg)}} @keyframes ledgerScatterMobile1{0%,7.0%{opacity:0;transform:translate(0,0) rotate(0)}10.0%{opacity:1;transform:translate(0,-7px) rotate(-6deg)}15.0%{opacity:1;transform:translate(-4px,-29px) rotate(-15deg)}25.0%{opacity:1;transform:translate(-23px,26px) rotate(-31deg)}27.0%{opacity:1;transform:translate(-23px,24px) rotate(-31deg)}29.0%,55%{opacity:1;transform:translate(-23px,26px) rotate(-31deg)}59%,100%{opacity:0;transform:translate(-23px,26px) rotate(-31deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--2{animation:ledgerScatter2 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--2{animation:ledgerScatterMobile2 6.5s linear infinite} @keyframes ledgerScatter2{0%,16.4%{opacity:0;transform:translate(0,0) rotate(0)}22.4%{opacity:1;transform:translate(0,-7px) rotate(3deg)}32.4%{opacity:1;transform:translate(-2px,-29px) rotate(8deg)}52.4%{opacity:1;transform:translate(-12px,30px) rotate(16deg)}56.4%{opacity:1;transform:translate(-12px,28px) rotate(16deg)}60.4%,91%{opacity:1;transform:translate(-12px,30px) rotate(16deg)}100%,100%{opacity:0;transform:translate(-12px,30px) rotate(16deg)}} @keyframes ledgerScatterMobile2{0%,8.2%{opacity:0;transform:translate(0,0) rotate(0)}11.2%{opacity:1;transform:translate(0,-7px) rotate(3deg)}16.2%{opacity:1;transform:translate(-2px,-29px) rotate(8deg)}26.2%{opacity:1;transform:translate(-12px,30px) rotate(16deg)}28.2%{opacity:1;transform:translate(-12px,28px) rotate(16deg)}30.2%,55%{opacity:1;transform:translate(-12px,30px) rotate(16deg)}59%,100%{opacity:0;transform:translate(-12px,30px) rotate(16deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--3{animation:ledgerScatter3 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--3{animation:ledgerScatterMobile3 6.5s linear infinite} @keyframes ledgerScatter3{0%,18.8%{opacity:0;transform:translate(0,0) rotate(0)}24.8%{opacity:1;transform:translate(0,-7px) rotate(-2deg)}34.8%{opacity:1;transform:translate(1px,-29px) rotate(-6deg)}54.8%{opacity:1;transform:translate(4px,27px) rotate(-12deg)}58.8%{opacity:1;transform:translate(4px,25px) rotate(-12deg)}62.8%,91%{opacity:1;transform:translate(4px,27px) rotate(-12deg)}100%,100%{opacity:0;transform:translate(4px,27px) rotate(-12deg)}} @keyframes ledgerScatterMobile3{0%,9.4%{opacity:0;transform:translate(0,0) rotate(0)}12.4%{opacity:1;transform:translate(0,-7px) rotate(-2deg)}17.4%{opacity:1;transform:translate(1px,-29px) rotate(-6deg)}27.4%{opacity:1;transform:translate(4px,27px) rotate(-12deg)}29.4%{opacity:1;transform:translate(4px,25px) rotate(-12deg)}31.4%,55%{opacity:1;transform:translate(4px,27px) rotate(-12deg)}59%,100%{opacity:0;transform:translate(4px,27px) rotate(-12deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--4{animation:ledgerScatter4 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--4{animation:ledgerScatterMobile4 6.5s linear infinite} @keyframes ledgerScatter4{0%,21.2%{opacity:0;transform:translate(0,0) rotate(0)}27.2%{opacity:1;transform:translate(0,-7px) rotate(7deg)}37.2%{opacity:1;transform:translate(3px,-29px) rotate(17deg)}57.2%{opacity:1;transform:translate(17px,29px) rotate(34deg)}61.2%{opacity:1;transform:translate(17px,27px) rotate(34deg)}65.2%,91%{opacity:1;transform:translate(17px,29px) rotate(34deg)}100%,100%{opacity:0;transform:translate(17px,29px) rotate(34deg)}} @keyframes ledgerScatterMobile4{0%,10.6%{opacity:0;transform:translate(0,0) rotate(0)}13.6%{opacity:1;transform:translate(0,-7px) rotate(7deg)}18.6%{opacity:1;transform:translate(3px,-29px) rotate(17deg)}28.6%{opacity:1;transform:translate(17px,29px) rotate(34deg)}30.6%{opacity:1;transform:translate(17px,27px) rotate(34deg)}32.6%,55%{opacity:1;transform:translate(17px,29px) rotate(34deg)}59%,100%{opacity:0;transform:translate(17px,29px) rotate(34deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--5{animation:ledgerScatter5 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--5{animation:ledgerScatterMobile5 6.5s linear infinite} @keyframes ledgerScatter5{0%,23.6%{opacity:0;transform:translate(0,0) rotate(0)}29.6%{opacity:1;transform:translate(0,-7px) rotate(2deg)}39.6%{opacity:1;transform:translate(5px,-29px) rotate(5deg)}59.6%{opacity:1;transform:translate(29px,25px) rotate(9deg)}63.6%{opacity:1;transform:translate(29px,23px) rotate(9deg)}67.6%,91%{opacity:1;transform:translate(29px,25px) rotate(9deg)}100%,100%{opacity:0;transform:translate(29px,25px) rotate(9deg)}} @keyframes ledgerScatterMobile5{0%,11.8%{opacity:0;transform:translate(0,0) rotate(0)}14.8%{opacity:1;transform:translate(0,-7px) rotate(2deg)}19.8%{opacity:1;transform:translate(5px,-29px) rotate(5deg)}29.8%{opacity:1;transform:translate(29px,25px) rotate(9deg)}31.8%{opacity:1;transform:translate(29px,23px) rotate(9deg)}33.8%,55%{opacity:1;transform:translate(29px,25px) rotate(9deg)}59%,100%{opacity:0;transform:translate(29px,25px) rotate(9deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--6{animation:ledgerScatter6 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--6{animation:ledgerScatterMobile6 6.5s linear infinite} @keyframes ledgerScatter6{0%,14.0%{opacity:0;transform:translate(0,0) rotate(0)}20.0%{opacity:1;transform:translate(0,-7px) rotate(-5deg)}30.0%{opacity:1;transform:translate(-3px,-29px) rotate(-12deg)}50.0%{opacity:1;transform:translate(-19px,35px) rotate(-24deg)}54.0%{opacity:1;transform:translate(-19px,33px) rotate(-24deg)}58.0%,91%{opacity:1;transform:translate(-19px,35px) rotate(-24deg)}100%,100%{opacity:0;transform:translate(-19px,35px) rotate(-24deg)}} @keyframes ledgerScatterMobile6{0%,7.0%{opacity:0;transform:translate(0,0) rotate(0)}10.0%{opacity:1;transform:translate(0,-7px) rotate(-5deg)}15.0%{opacity:1;transform:translate(-3px,-29px) rotate(-12deg)}25.0%{opacity:1;transform:translate(-19px,35px) rotate(-24deg)}27.0%{opacity:1;transform:translate(-19px,33px) rotate(-24deg)}29.0%,55%{opacity:1;transform:translate(-19px,35px) rotate(-24deg)}59%,100%{opacity:0;transform:translate(-19px,35px) rotate(-24deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--7{animation:ledgerScatter7 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--7{animation:ledgerScatterMobile7 6.5s linear infinite} @keyframes ledgerScatter7{0%,16.4%{opacity:0;transform:translate(0,0) rotate(0)}22.4%{opacity:1;transform:translate(0,-7px) rotate(4deg)}32.4%{opacity:1;transform:translate(-1px,-29px) rotate(11deg)}52.4%{opacity:1;transform:translate(-7px,33px) rotate(21deg)}56.4%{opacity:1;transform:translate(-7px,31px) rotate(21deg)}60.4%,91%{opacity:1;transform:translate(-7px,33px) rotate(21deg)}100%,100%{opacity:0;transform:translate(-7px,33px) rotate(21deg)}} @keyframes ledgerScatterMobile7{0%,8.2%{opacity:0;transform:translate(0,0) rotate(0)}11.2%{opacity:1;transform:translate(0,-7px) rotate(4deg)}16.2%{opacity:1;transform:translate(-1px,-29px) rotate(11deg)}26.2%{opacity:1;transform:translate(-7px,33px) rotate(21deg)}28.2%{opacity:1;transform:translate(-7px,31px) rotate(21deg)}30.2%,55%{opacity:1;transform:translate(-7px,33px) rotate(21deg)}59%,100%{opacity:0;transform:translate(-7px,33px) rotate(21deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--8{animation:ledgerScatter8 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--8{animation:ledgerScatterMobile8 6.5s linear infinite} @keyframes ledgerScatter8{0%,18.8%{opacity:0;transform:translate(0,0) rotate(0)}24.8%{opacity:1;transform:translate(0,-7px) rotate(-1deg)}34.8%{opacity:1;transform:translate(2px,-29px) rotate(-3deg)}54.8%{opacity:1;transform:translate(9px,36px) rotate(-6deg)}58.8%{opacity:1;transform:translate(9px,34px) rotate(-6deg)}62.8%,91%{opacity:1;transform:translate(9px,36px) rotate(-6deg)}100%,100%{opacity:0;transform:translate(9px,36px) rotate(-6deg)}} @keyframes ledgerScatterMobile8{0%,9.4%{opacity:0;transform:translate(0,0) rotate(0)}12.4%{opacity:1;transform:translate(0,-7px) rotate(-1deg)}17.4%{opacity:1;transform:translate(2px,-29px) rotate(-3deg)}27.4%{opacity:1;transform:translate(9px,36px) rotate(-6deg)}29.4%{opacity:1;transform:translate(9px,34px) rotate(-6deg)}31.4%,55%{opacity:1;transform:translate(9px,36px) rotate(-6deg)}59%,100%{opacity:0;transform:translate(9px,36px) rotate(-6deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--9{animation:ledgerScatter9 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--9{animation:ledgerScatterMobile9 6.5s linear infinite} @keyframes ledgerScatter9{0%,21.2%{opacity:0;transform:translate(0,0) rotate(0)}27.2%{opacity:1;transform:translate(0,-7px) rotate(6deg)}37.2%{opacity:1;transform:translate(4px,-29px) rotate(15deg)}57.2%{opacity:1;transform:translate(23px,34px) rotate(29deg)}61.2%{opacity:1;transform:translate(23px,32px) rotate(29deg)}65.2%,91%{opacity:1;transform:translate(23px,34px) rotate(29deg)}100%,100%{opacity:0;transform:translate(23px,34px) rotate(29deg)}} @keyframes ledgerScatterMobile9{0%,10.6%{opacity:0;transform:translate(0,0) rotate(0)}13.6%{opacity:1;transform:translate(0,-7px) rotate(6deg)}18.6%{opacity:1;transform:translate(4px,-29px) rotate(15deg)}28.6%{opacity:1;transform:translate(23px,34px) rotate(29deg)}30.6%{opacity:1;transform:translate(23px,32px) rotate(29deg)}32.6%,55%{opacity:1;transform:translate(23px,34px) rotate(29deg)}59%,100%{opacity:0;transform:translate(23px,34px) rotate(29deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--10{animation:ledgerScatter10 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--10{animation:ledgerScatterMobile10 6.5s linear infinite} @keyframes ledgerScatter10{0%,23.6%{opacity:0;transform:translate(0,0) rotate(0)}29.6%{opacity:1;transform:translate(0,-7px) rotate(-4deg)}39.6%{opacity:1;transform:translate(-5px,-29px) rotate(-9deg)}59.6%{opacity:1;transform:translate(-27px,28px) rotate(-18deg)}63.6%{opacity:1;transform:translate(-27px,26px) rotate(-18deg)}67.6%,91%{opacity:1;transform:translate(-27px,28px) rotate(-18deg)}100%,100%{opacity:0;transform:translate(-27px,28px) rotate(-18deg)}} @keyframes ledgerScatterMobile10{0%,11.8%{opacity:0;transform:translate(0,0) rotate(0)}14.8%{opacity:1;transform:translate(0,-7px) rotate(-4deg)}19.8%{opacity:1;transform:translate(-5px,-29px) rotate(-9deg)}29.8%{opacity:1;transform:translate(-27px,28px) rotate(-18deg)}31.8%{opacity:1;transform:translate(-27px,26px) rotate(-18deg)}33.8%,55%{opacity:1;transform:translate(-27px,28px) rotate(-18deg)}59%,100%{opacity:0;transform:translate(-27px,28px) rotate(-18deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--11{animation:ledgerScatter11 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--11{animation:ledgerScatterMobile11 6.5s linear infinite} @keyframes ledgerScatter11{0%,14.0%{opacity:0;transform:translate(0,0) rotate(0)}20.0%{opacity:1;transform:translate(0,-7px) rotate(2deg)}30.0%{opacity:1;transform:translate(-3px,-29px) rotate(4deg)}50.0%{opacity:1;transform:translate(-14px,39px) rotate(8deg)}54.0%{opacity:1;transform:translate(-14px,37px) rotate(8deg)}58.0%,91%{opacity:1;transform:translate(-14px,39px) rotate(8deg)}100%,100%{opacity:0;transform:translate(-14px,39px) rotate(8deg)}} @keyframes ledgerScatterMobile11{0%,7.0%{opacity:0;transform:translate(0,0) rotate(0)}10.0%{opacity:1;transform:translate(0,-7px) rotate(2deg)}15.0%{opacity:1;transform:translate(-3px,-29px) rotate(4deg)}25.0%{opacity:1;transform:translate(-14px,39px) rotate(8deg)}27.0%{opacity:1;transform:translate(-14px,37px) rotate(8deg)}29.0%,55%{opacity:1;transform:translate(-14px,39px) rotate(8deg)}59%,100%{opacity:0;transform:translate(-14px,39px) rotate(8deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--12{animation:ledgerScatter12 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--12{animation:ledgerScatterMobile12 6.5s linear infinite} @keyframes ledgerScatter12{0%,16.4%{opacity:0;transform:translate(0,0) rotate(0)}22.4%{opacity:1;transform:translate(0,-7px) rotate(-5deg)}32.4%{opacity:1;transform:translate(0px,-29px) rotate(-13deg)}52.4%{opacity:1;transform:translate(1px,38px) rotate(-27deg)}56.4%{opacity:1;transform:translate(1px,36px) rotate(-27deg)}60.4%,91%{opacity:1;transform:translate(1px,38px) rotate(-27deg)}100%,100%{opacity:0;transform:translate(1px,38px) rotate(-27deg)}} @keyframes ledgerScatterMobile12{0%,8.2%{opacity:0;transform:translate(0,0) rotate(0)}11.2%{opacity:1;transform:translate(0,-7px) rotate(-5deg)}16.2%{opacity:1;transform:translate(0px,-29px) rotate(-13deg)}26.2%{opacity:1;transform:translate(1px,38px) rotate(-27deg)}28.2%{opacity:1;transform:translate(1px,36px) rotate(-27deg)}30.2%,55%{opacity:1;transform:translate(1px,38px) rotate(-27deg)}59%,100%{opacity:0;transform:translate(1px,38px) rotate(-27deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--13{animation:ledgerScatter13 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--13{animation:ledgerScatterMobile13 6.5s linear infinite} @keyframes ledgerScatter13{0%,18.8%{opacity:0;transform:translate(0,0) rotate(0)}24.8%{opacity:1;transform:translate(0,-7px) rotate(3deg)}34.8%{opacity:1;transform:translate(3px,-29px) rotate(7deg)}54.8%{opacity:1;transform:translate(14px,40px) rotate(14deg)}58.8%{opacity:1;transform:translate(14px,38px) rotate(14deg)}62.8%,91%{opacity:1;transform:translate(14px,40px) rotate(14deg)}100%,100%{opacity:0;transform:translate(14px,40px) rotate(14deg)}} @keyframes ledgerScatterMobile13{0%,9.4%{opacity:0;transform:translate(0,0) rotate(0)}12.4%{opacity:1;transform:translate(0,-7px) rotate(3deg)}17.4%{opacity:1;transform:translate(3px,-29px) rotate(7deg)}27.4%{opacity:1;transform:translate(14px,40px) rotate(14deg)}29.4%{opacity:1;transform:translate(14px,38px) rotate(14deg)}31.4%,55%{opacity:1;transform:translate(14px,40px) rotate(14deg)}59%,100%{opacity:0;transform:translate(14px,40px) rotate(14deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--14{animation:ledgerScatter14 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--14{animation:ledgerScatterMobile14 6.5s linear infinite} @keyframes ledgerScatter14{0%,21.2%{opacity:0;transform:translate(0,0) rotate(0)}27.2%{opacity:1;transform:translate(0,-7px) rotate(-2deg)}37.2%{opacity:1;transform:translate(5px,-29px) rotate(-4deg)}57.2%{opacity:1;transform:translate(27px,37px) rotate(-9deg)}61.2%{opacity:1;transform:translate(27px,35px) rotate(-9deg)}65.2%,91%{opacity:1;transform:translate(27px,37px) rotate(-9deg)}100%,100%{opacity:0;transform:translate(27px,37px) rotate(-9deg)}} @keyframes ledgerScatterMobile14{0%,10.6%{opacity:0;transform:translate(0,0) rotate(0)}13.6%{opacity:1;transform:translate(0,-7px) rotate(-2deg)}18.6%{opacity:1;transform:translate(5px,-29px) rotate(-4deg)}28.6%{opacity:1;transform:translate(27px,37px) rotate(-9deg)}30.6%{opacity:1;transform:translate(27px,35px) rotate(-9deg)}32.6%,55%{opacity:1;transform:translate(27px,37px) rotate(-9deg)}59%,100%{opacity:0;transform:translate(27px,37px) rotate(-9deg)}} .ledger-nav :is(a,summary):is(:hover,:focus-visible,:active) .ledger-gold-burst .ledger-coin--15{animation:ledgerScatter15 1.8s linear both} .ledger-mobile-nav-label .ledger-gold-burst .ledger-coin--15{animation:ledgerScatterMobile15 6.5s linear infinite} @keyframes ledgerScatter15{0%,23.6%{opacity:0;transform:translate(0,0) rotate(0)}29.6%{opacity:1;transform:translate(0,-7px) rotate(5deg)}39.6%{opacity:1;transform:translate(-1px,-29px) rotate(13deg)}59.6%{opacity:1;transform:translate(-3px,31px) rotate(25deg)}63.6%{opacity:1;transform:translate(-3px,29px) rotate(25deg)}67.6%,91%{opacity:1;transform:translate(-3px,31px) rotate(25deg)}100%,100%{opacity:0;transform:translate(-3px,31px) rotate(25deg)}} @keyframes ledgerScatterMobile15{0%,11.8%{opacity:0;transform:translate(0,0) rotate(0)}14.8%{opacity:1;transform:translate(0,-7px) rotate(5deg)}19.8%{opacity:1;transform:translate(-1px,-29px) rotate(13deg)}29.8%{opacity:1;transform:translate(-3px,31px) rotate(25deg)}31.8%{opacity:1;transform:translate(-3px,29px) rotate(25deg)}33.8%,55%{opacity:1;transform:translate(-3px,31px) rotate(25deg)}59%,100%{opacity:0;transform:translate(-3px,31px) rotate(25deg)}} /* END_SNIPPET:ledger-nav-icon */ /* START_SNIPPET:ledger-world-banner (INDEX:82) */ .ledger-character { display:block; background-image:url('/cdn/shop/files/ledger-reference-tiles.jpg?v=1789993067'); background-repeat:no-repeat; background-size:731.42857% 1146.2687%; aspect-ratio:140/134; } .ledger-character--pokemon { background-position:22.28507% 70.97004%; } .ledger-character--onepiece { background-position:60.63348% 70.97004%; } .ledger-character--dragonball { background-position:98.30317% 70.97004%; } .ledger-hero-art { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; } .ledger-hero-art .ledger-character { position:absolute; width:35%; opacity:.19; filter:grayscale(1) contrast(1.5); mix-blend-mode:screen; mask-image:radial-gradient(ellipse,#000 25%,transparent 72%); } .ledger-hero-art .ledger-character--pokemon { left:-10%; top:5%; transform:rotate(-12deg); } .ledger-hero-art .ledger-character--onepiece { left:37%; bottom:-14%; } .ledger-hero-art .ledger-character--dragonball { right:-8%; top:-5%; } #MainContent[data-ledger-world] { background:#faf9f6; } .ledger-world-banner { position:relative; overflow:hidden; color:#fff; background:radial-gradient(ellipse at 80% 50%,#214971,transparent 62%),#071629; border-bottom:3px solid #e7bd59; } .ledger-world-banner__inner { position:relative; max-width:1200px; min-height:230px; margin:auto; padding:42px 32px; display:flex; align-items:center; isolation:isolate; } .ledger-world-banner p { color:#f0c75e; text-transform:uppercase; letter-spacing:.14em; font-size:12px; margin:0 0 12px; } .ledger-world-banner strong { display:block; font-size:clamp(30px,4vw,52px); line-height:1.15; } .ledger-world-banner a { display:inline-flex; gap:24px; margin-top:18px; color:#f0c75e; text-underline-offset:5px; font-weight:700; } .ledger-world-banner .ledger-character { position:absolute; right:3%; top:-12%; width:310px; opacity:.58; filter:sepia(.2); mask-image:radial-gradient(ellipse,#000 20%,transparent 70%); z-index:-1; } [data-ledger-world="pokemon"] .ledger-world-banner { background:radial-gradient(ellipse at 85% 30%,#49683c,transparent 65%),#071b32; } [data-ledger-world="onepiece"] .ledger-world-banner { background:radial-gradient(ellipse at 85% 30%,#1c6676,transparent 65%),#061b32; } [data-ledger-world="dragonball"] .ledger-world-banner { background:radial-gradient(ellipse at 85% 30%,#7a491e,transparent 65%),#141b34; } #MainContent[data-ledger-world] :is(.collection-hero,.collection-hero__inner,.product,.tcg-set-directory,.pokemon-set-directory) { border-radius:14px; } #MainContent[data-ledger-world] :is(.tcg-set-directory__group,.pokemon-set-directory details) { background:#fffdf8; border-color:#d9c99e; } #MainContent[data-ledger-world] :is(.button--primary,.product-form__submit) { --color-button:240,199,94; --color-button-text:16,29,51; } #MainContent[data-ledger-world] .card-wrapper { border-radius:14px; overflow:hidden; } #MainContent[data-ledger-world] .card-wrapper:hover { box-shadow:0 6px 22px #b48b2824; } @media(max-width:749px) { .ledger-world-banner__inner { min-height:190px; padding:30px 20px; } .ledger-world-banner .ledger-character { width:230px; right:-65px; opacity:.32; } .ledger-world-banner__inner>div { max-width:75%; } .ledger-hero-art .ledger-character { width:70%; } } /* END_SNIPPET:ledger-world-banner */ /* START_SNIPPET:tcg-search-bar (INDEX:104) */ .tcg-search-bar { padding-top: 1.2rem; padding-bottom: 3.2rem; } .tcg-search-bar__form { display: grid; grid-template-columns: minmax(0, 1fr) 5.6rem; min-height: 5.6rem; overflow: hidden; background: #fffdf7; border: 0.1rem solid #d6c8a4; box-shadow: 0 5px 18px #1220390d; border-radius: 3rem; padding: 0.4rem; } .tcg-search-bar__input { min-width: 0; padding: 0 1.8rem; color: rgb(var(--color-foreground)); background: transparent; border: 0; font: inherit; font-size: 1.6rem; } .tcg-search-bar__input:focus-visible { outline: 0.2rem solid #2459a6; outline-offset: -0.4rem; border-radius: 2rem; } .tcg-search-bar__button { display: grid; place-items: center; color: rgb(var(--color-foreground)); background: transparent; border: 0; background: #F0C75E; color: #101D33; border-radius: 50%; min-height: 4.6rem; cursor: pointer; } .tcg-search-bar__form:focus-within { border-color: #2459a6; box-shadow: 0 0 0 3px #2459a61a; } .tcg-search-bar__button:hover { filter: brightness(0.94); } .tcg-search-bar__button:focus-visible { outline: 2px solid #17365c; outline-offset: 2px; } .tcg-search-bar__button .svg-wrapper { width: 2.4rem; height: 2.4rem; } .header-wrapper .header__search { display: none; } @media screen and (max-width: 749px) { .tcg-search-bar { padding-top: 0.8rem; padding-bottom: 2.4rem; } } @media screen and (min-width: 990px) { .tcg-search-bar { max-width: 92rem; } } /* END_SNIPPET:tcg-search-bar */