/* Crates are a separate shop surface; no global portal selectors. */
#crate-app { --crate-accent: #e8e8e6; --crate-border: #ffffff1c; margin-top: 32px; color: #f7f8f8; }
#crate-app *, .crate-dialog * { box-sizing: border-box; }
#crate-app [hidden], .crate-dialog [hidden] { display: none !important; }
#crate-app h3, #crate-app h4, .crate-dialog h2, .crate-dialog h3 { text-transform: none; letter-spacing: -.035em; }
#crate-app h3 { font-size: 24px; }
#crate-app h4 { font-size: 19px; line-height: 1.3; }
.crate-app-head, .crate-owned-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.crate-app-head > div { display: flex; align-items: center; gap: 14px; }
.crate-network { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #95959544; border-radius: 4px; color: #c5c5c5; background: #77777712; font-size: 11px; font-weight: 600; white-space: nowrap; }
.crate-network::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.crate-service-status, .crate-owned-status, .crate-inventory-intro { color: #b1b7c1; font-size: 13px; line-height: 1.65; margin: 16px 0 22px; max-width: 80ch; }
#crate-app .button, .crate-dialog .button { min-height: 44px; border-radius: 6px; padding: 12px 16px; font-size: 11px; letter-spacing: .02em; white-space: normal; text-align: center; }
#crate-app .button.filled, .crate-dialog .button.filled { background:var(--accent-fill); color:var(--accent-ink); border:1px solid var(--accent-fill); font-weight:750; text-transform:none; font-size:14px; }
#crate-app .button.filled:hover:not(:disabled), .crate-dialog .button.filled:hover:not(:disabled) { background:#b3b3b3; color:#131313; }
#crate-app .button:disabled, .crate-dialog .button:disabled { cursor: not-allowed; opacity: .45; }
#crate-app :is(button,a):focus-visible, .crate-dialog :is(button,a,summary):focus-visible { outline: 3px solid #b8b8b8; outline-offset: 4px; }
.crate-release-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 20px; }
.crate-empty { grid-column: 1 / -1; padding: 30px; border: 1px solid #ffffff1c; border-radius: 10px; background: #141517; }
.crate-empty p { margin: 12px 0 22px; max-width: 66ch; color: #9ea5b0; font-size: 13px; line-height: 1.7; }
.crate-release { display: grid; grid-template-columns: minmax(130px,.75fr) minmax(0,1fr); overflow: hidden; border: 1px solid #ffffff24; border-radius: 10px; background: #151618; }
.crate-release-art { display: grid; place-items: center; min-height: 260px; padding: 18px; background: #1d1f24; }
.crate-release-art img { display: block; width: 100%; max-height: 290px; object-fit: contain; }
.crate-release-copy { display: flex; flex-direction: column; padding: 24px; }
.crate-release-copy > p { color: #b0b0b0; font-size: 12px; line-height: 1.65; margin: 12px 0; }
.crate-release-copy > .button { margin-top: auto; }
.crate-release-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:12px; }
.crate-release-actions .filled { flex:1; }
.crate-release-facts { display: grid; gap: 8px; margin-top: 6px; font-size: 23px; font-weight:650; color: #f7f8f8; }
.crate-release-facts span + span { color: #979fad; font-size: 11px; }
.crate-release-facts .crate-release-fee { margin-top: -4px; }
.crate-eligibility { color: #b1b1b1; font-size: 11px; line-height: 1.6; }
.crate-pending-request { margin: 24px 0; padding: 20px; border: 1px solid #90909080; border-radius: 14px; background: #9090900c; }
.crate-pending-request[hidden] { display: none; }
.crate-pending-request p { max-width: 72ch; line-height: 1.65; }
.crate-pending-request .crate-eligibility { overflow-wrap: anywhere; }
.crate-art-pending { display: grid; place-items: center; text-align: center; color: #9399a6; font-size: 12px; line-height: 1.6; padding: 24px; }
.crate-owned { border-top: 1px solid #ffffff1c; margin-top: 32px; padding-top: 28px; }
.crate-owned-heading > span { color: #858d9c; font-size: 11px; }
.crate-owned-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr)); gap: 16px; }
.crate-owned-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid #ffffff20; border-radius: 8px; background: #151618; padding: 16px; min-width: 0; }
.crate-owned-art { min-height: 160px; display: grid; place-items: center; border-radius: 5px; background: #22242a; }
.crate-owned-art img { width: 100%; height: 180px; object-fit: contain; }
.crate-owned-card p { font-size: 12px; line-height: 1.6; color: #a9a9a9; margin: 7px 0 0; }
.crate-owned-card small { font-size: 10px; color: #949494; overflow-wrap: anywhere; }
.crate-owned-card > .button { margin-top: auto; }
/* Market resale: a sealed crate can be listed from Inventory (monochrome text link, 44px target). */
.crate-owned-card .crate-sell-link { display: flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.crate-openings > h4 { margin-top: 24px; margin-bottom: 12px; }
.crate-completed { margin-top: 18px; color: #a4a4a4; }
.crate-completed > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; }
.crate-completed > summary:focus-visible { outline: 2px solid #b6b6b6; outline-offset: 2px; }
.crate-recorded { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #ffffff16; }
.crate-recorded > div { display: grid; gap: 5px; }
.crate-recorded strong { font-size: 13px; }
.crate-recorded span { font-size: 12px; color: #a4a4a4; }
.crate-dialog { --crate-border: #ffffff1c; width: min(900px,calc(100% - 36px)); max-width: 900px; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; padding: 30px; border: 1px solid #ffffff30; border-radius: 12px; background: #141517; color: #f7f8f8; box-shadow: 0 35px 110px #0009; }
.crate-dialog::backdrop { background: #050609d9; backdrop-filter: blur(7px); }
.crate-dialog > header { display: flex; gap: 14px; align-items: center; padding: 0 45px 22px 0; border-bottom: 1px solid #ffffff1c; }
.crate-wordmark { font-size: 26px; font-weight: 800; letter-spacing: -.07em; }
.crate-dialog-close { position: absolute; top: 23px; right: 23px; width: 44px; height: 44px; border: 1px solid #ffffff26; border-radius: 6px; background: #23252b; color: #f7f8f8; font-size: 24px; cursor: pointer; }
.crate-dialog-content { margin-top: 26px; }
.crate-checkout-layout { display:grid; grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr); gap:32px; align-items:start; }
.crate-checkout-item { min-width:0; position:sticky; top:0; }
.crate-checkout-art { display:grid; place-items:center; aspect-ratio:1; background:#22242a; border:1px solid #ffffff12; border-radius:12px; overflow:hidden; }
.crate-checkout-art img { display:block; width:100%; max-height:320px; object-fit:contain; }
.crate-checkout-item h3 { margin:18px 0 12px; }
.crate-checkout-item a { display:inline-block; margin-top:20px; color:#c0c0c0; font-size:13px; }
.crate-dialog .crate-checkout-price { color:#f7f8f8; font-size:22px; font-weight:650; margin:18px 0 12px; }
.crate-dialog .crate-checkout-fees { font-size:12px; color:#b0b0b0; }
/* Price + mint fee, like shipping: Crate price and Mint fee above the one Total. */
.crate-dialog .crate-price-breakdown { display:grid; gap:6px; margin:16px 0 12px; padding:12px 0 0; border-top:1px solid #ffffff16; }
.crate-dialog .crate-price-breakdown > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.crate-dialog .crate-price-breakdown dt { margin:0; color:#b0b0b0; font-size:12px; }
.crate-dialog .crate-price-breakdown dd { margin:0; color:#e6e6e6; font-size:13px; font-variant-numeric:tabular-nums; text-align:right; }
.crate-dialog .crate-price-breakdown .crate-price-total { padding-top:8px; border-top:1px solid #ffffff12; }
.crate-dialog .crate-price-breakdown .crate-price-total dt { color:#e6e6e6; font-weight:600; }
.crate-dialog .crate-price-breakdown .crate-price-total dd { color:#f7f8f8; font-size:18px; font-weight:650; }
.crate-checkout-steps { padding:0; margin:0 0 26px; list-style:none; display:flex; gap:10px; }
.crate-checkout-steps li { flex:1; display:grid; gap:8px; color:#9299a8; font-size:10px; line-height:1.4; border-top:2px solid #ffffff16; padding-top:10px; }
.crate-checkout-steps li span { color:inherit; font-size:14px; }
.crate-checkout-steps .is-current { color:#c0c0c0; border-color:#9c9c9c; }
.crate-checkout-steps .is-complete { color:#9cdfc0; border-color:#8ee0a8; }
.crate-qr-loading { display:grid; place-items:center; text-align:center; min-height:260px; padding:30px 20px; border:1px solid #ffffff18; border-radius:12px; background:#1d1f24; }
.crate-qr-loading > span { width:32px; height:32px; border:2px solid #9c9c9c35; border-top-color:#c0c0c0; border-radius:50%; animation:crate-qr-spin 1s linear infinite; margin-bottom:20px; }
.crate-qr-loading strong { font-size:15px; font-weight:600; }
.crate-qr-loading p { font-size:12px; }
@keyframes crate-qr-spin { to { transform:rotate(360deg); } }
.crate-dialog .crate-auto-status { margin-top:18px; padding:12px 14px; border-left:2px solid #9c9c9c; background:#9c9c9c0a; color:#d0d0d0; font-size:12px; }
.crate-checkout-footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #ffffff18; padding-top:18px; margin-top:28px; font-size:10px; color:#b0b0b0; }
.crate-recovery-options { margin-top:18px; color:#b0b0b0; font-size:12px; }
.crate-recovery-options summary { cursor:pointer; min-height:34px; padding:8px 0; }
.crate-checkout-layout .crate-signing { display:grid; grid-template-columns:1fr; gap:18px; text-align:center; }
.crate-checkout-layout .crate-qr-frame { justify-self:center; }
.crate-checkout-layout .crate-awaiting { padding:16px 0; gap:12px; }
.crate-checkout-layout .crate-awaiting > span { display:none; }
.crate-dialog h2 { font-size: clamp(27px,4vw,42px); line-height: 1.08; margin-bottom: 14px; }
.crate-dialog h3 { font-size: 23px; line-height: 1.2; }
.crate-dialog p { font-size: 13px; line-height: 1.7; color: #bababa; }
.crate-review { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1fr); gap: 28px; align-items: start; }
.crate-review-art { position: sticky; top: 0; display: grid; place-items: center; min-height: 260px; aspect-ratio: 1; border-radius: 8px; background: #22242a; }
.crate-review-art img { width: 100%; max-height: 320px; object-fit: contain; }
.crate-dialog .crate-review-price { color: #dbdbdb; font-size: 18px; margin: 18px 0; }
.crate-policy { margin-top: 22px; padding: 16px; border-left: 3px solid #aeaeae; border-radius: 0 6px 6px 0; background: #9595950c; }
.crate-policy strong { font-size: 13px; line-height: 1.5; }
.crate-policy p { margin-top: 8px; font-size: 12px; }
.crate-rules { margin-top: 22px; border-top: 1px solid #ffffff20; padding-top: 18px; }
.crate-rules summary, .crate-request-details summary { cursor: pointer; font-size: 12px; min-height: 34px; }
.crate-odds { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.crate-odds > li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.crate-odds strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.crate-rarity { --rarity-color: var(--rarity-common); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: color-mix(in srgb, var(--rarity-color) 70%, #fff); font-size: 11px; line-height: 1.4; }
.crate-rarity[data-rarity="common"] { --rarity-color: var(--rarity-common); }
.crate-rarity[data-rarity="uncommon"] { --rarity-color: var(--rarity-uncommon); }
.crate-rarity[data-rarity="rare"] { --rarity-color: var(--rarity-rare); }
.crate-rarity[data-rarity="very-rare"] { --rarity-color: var(--rarity-very-rare); }
.crate-rarity[data-rarity="epic"] { --rarity-color: var(--rarity-epic); }
.crate-rarity[data-rarity="legendary"] { --rarity-color: var(--rarity-legendary); }
.crate-rarity[data-rarity="mythic"] { --rarity-color: var(--rarity-mythic); }
.crate-rarity[data-rarity="super-rare"] { --rarity-color: var(--rarity-super-rare); }
.crate-stars { font-size: 9px; letter-spacing: .07em; }
.crate-pool { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.crate-pool > div { min-width: 0; display: grid; align-content: start; gap: 8px; padding: 10px; border: 1px solid #ffffff20; border-radius: 5px; }
.crate-pool img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #262626; border-radius: 3px; }
.crate-pool > div > span { font-size: 11px; line-height: 1.5; }
.crate-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.crate-blockers { font-size: 11px; line-height: 1.65; color: #b3b3b3; padding-left: 18px; margin-top: 16px; }
.crate-action-error:not(:empty) { color: #f1b5b5; padding: 14px; border: 1px solid #ef9d9d40; border-radius: 5px; margin-top: 20px; background: #8b313110; }
.crate-operation { max-width: 700px; margin: 0 auto; }
.crate-checkout-layout > .crate-operation { min-width:0; width:100%; max-width:none; margin:0; }
.crate-checkout-layout .crate-result { min-width:0; }
.crate-checkout-layout .crate-duplicate-result { display:none; }
.crate-reveal-recap { margin:20px 0; color:#c0c0c0; font-size:12px; }
.crate-reveal-recap summary { cursor:pointer; padding:10px 0; }
.crate-awaiting { display: flex; align-items: center; gap: 20px; padding: 25px 0; }
.crate-awaiting > span { display: grid; place-items: center; flex: 0 0 70px; height: 70px; background: #272727; border-radius: 9px; color: #b3b3b3; font-size: 35px; }
.crate-result { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(0,1fr); gap: 26px; align-items: center; margin: 26px 0; border: 1px solid #9595955a; border-radius: 10px; overflow: hidden; background: #1c1d23; }
.crate-result-art { display: grid; place-items: center; min-height: 230px; background: #2b2b2b; }
.crate-result-art img { width: 100%; max-height: 320px; object-fit: contain; }
.crate-result > div + div { padding: 22px 22px 22px 0; }
.crate-record-label { display: block; margin-bottom: 10px; color: #a8a8a8; font-size: 11px; }
.crate-result .crate-rarity { margin-top: 14px; }
.crate-result p { margin-top: 14px; font-size: 11px; }
.crate-result-reveal .crate-result-art img { animation: crate-recorded-reveal .85s cubic-bezier(.16,.8,.2,1) both; }
@keyframes crate-recorded-reveal { from { opacity: 0; transform: perspective(500px) rotateY(-12deg) scale(.92); } to { opacity: 1; transform: none; } }
.crate-reel { --reel-cell: 144px; --reel-gap: 12px; margin: 26px 0; border: 1px solid #9595955a; border-radius: 9px; background: #101115; overflow: hidden; }
.crate-reel-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #ffffff1a; font-size: 11px; color: #dcdcdc; }
.crate-reel-label span { color: #9a9a9a; font-size: 10px; }
.crate-reel-window { position: relative; overflow: hidden; padding: 22px 0; }
.crate-reel-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#101115 0,transparent 15%,transparent 85%,#101115); }
.crate-reel-track { display: flex; gap: var(--reel-gap); width: max-content; margin-left: calc(50% - var(--reel-cell) / 2); transform: translateX(calc(-1 * var(--winner-index) * (var(--reel-cell) + var(--reel-gap)))); }
.crate-reel-item { flex: 0 0 var(--reel-cell); width: var(--reel-cell); padding: 10px; border: 1px solid #ffffff24; border-radius: 6px; background: #1c1e25; }
.crate-reel-item > div { display: grid; place-items: center; height: 122px; border-radius: 3px; background: #2a2a2a; }
.crate-reel-item img { display: block; width: 100%; height: 122px; object-fit: contain; }
.crate-reel-item > strong { display: block; margin: 10px 0 7px; font-size: 11px; line-height: 1.4; color: #eeeeee; }
.crate-reel-item .crate-rarity { font-size: 9px; gap: 4px; }
.crate-reel-item .crate-stars { font-size: 8px; }
.crate-reel-winner { border-color: #b3b3b3; }
.crate-reel-marker { position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 50%; width: calc(var(--reel-cell) + 10px); transform: translateX(-50%); border: 1px solid #c0c0c099; border-radius: 7px; pointer-events: none; box-shadow: 0 0 0 1px #95959522; }
.crate-reel-marker::before { content: ''; position: absolute; top: -6px; left: calc(50% - 5px); width: 10px; height: 10px; background: #c7c7c7; transform: rotate(45deg); }
.crate-reel-animated .crate-reel-track { animation: crate-reel-land var(--reel-duration,6500ms) cubic-bezier(.13,.68,.17,1) both; animation-delay:var(--reel-delay,0ms); }
@keyframes crate-reel-land { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--winner-index) * (var(--reel-cell) + var(--reel-gap)))); } }
.crate-reel-followup { animation: none; }
.crate-history { border-top:1px solid #ffffff1c; padding:18px 0; color:#b0b0b0; }
.crate-history > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:13px; gap:10px; }
.crate-history > summary::before { content:'+'; color:#b6b6b6; font-size:20px; }
.crate-history[open] > summary::before { content:'−'; }
.crate-history[open] > summary { margin-bottom:18px; }
.crate-mystery-art { display:grid;place-items:center;width:100%;height:100%;min-height:180px;font-size:100px;font-weight:900;color:#9c9c9c;background:radial-gradient(ellipse,#9c9c9c26,transparent 70%); }
.crate-signing { display: flex; align-items: center; gap: 26px; padding: 22px; border: 1px solid #ffffff24; border-radius: 8px; background: #0f1012; }
.crate-qr-frame { flex: 0 0 208px; padding: 8px; background: #fff; border-radius: 7px; }
.crate-qr-frame img { display: block; width: 192px; height: 192px; }
.crate-signing h3 { font-size: 21px; }
.crate-signing p { margin: 10px 0 16px; font-size: 12px; }
.crate-signing .crate-qr-status { font-size: 11px; margin-bottom: 0; color: #c0c0c0; }
.crate-request-details { border-top: 1px solid #ffffff20; padding-top: 18px; margin-top: 24px; color: #a7a7a7; }
.crate-request-details dl { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; font-size: 11px; }
.crate-request-details dd { margin: 0; color: #cacaca; overflow-wrap: anywhere; }
@media (max-width:700px) {
  .crate-checkout-layout { grid-template-columns:1fr; gap:24px; }
  .crate-checkout-item { position:static; display:grid; grid-template-columns:90px minmax(0,1fr); column-gap:16px; }
  .crate-checkout-art { grid-row:1/5; align-self:start; }
  .crate-checkout-item h3 { font-size:20px; margin:0 0 6px; }
  .crate-checkout-item .crate-checkout-fees, .crate-checkout-item a, .crate-checkout-item .crate-price-breakdown { grid-column:1/-1; }
  .crate-dialog .crate-checkout-price { font-size:18px; margin:8px 0; }
  .crate-checkout-steps { margin-bottom:18px; }
  .crate-checkout-footer { flex-direction:column; }
  .crate-app-head { align-items: flex-start; }
  .crate-app-head > div { align-items: flex-start; flex-direction: column; gap: 10px; }
  #crate-app h3 { font-size: 22px; }
  .crate-release { grid-template-columns: 1fr; }
  .crate-release-art { min-height: 210px; }
  .crate-release-art img { height: 220px; }
  .crate-owned-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .crate-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 22px; border-radius: 9px; }
  .crate-dialog-close { top: 17px; right: 17px; }
  .crate-review { grid-template-columns: 1fr; gap: 24px; }
  .crate-review-art { position: static; min-height: 0; aspect-ratio: auto; }
  .crate-review-art img { height: 230px; }
  .crate-result { grid-template-columns: 1fr; gap: 0; }
  .crate-result-art { min-height: 200px; }
  .crate-result-art img { height: 230px; }
  .crate-result > div + div { padding: 22px; }
  .crate-reel { --reel-cell: 124px; --reel-gap: 10px; }
  .crate-reel-item > div, .crate-reel-item img { height: 108px; }
  .crate-signing { flex-direction: column; align-items: stretch; padding: 18px; }
  .crate-qr-frame { align-self: center; flex-basis: auto; }
  .crate-dialog-actions .button { flex: 1 1 auto; }
  .crate-recorded { gap: 14px; }
}
@media (prefers-reduced-motion:reduce) { .crate-dialog *, .crate-dialog *::before, .crate-dialog *::after { animation: none !important; transition: none !important; } }

/* The Shop vitrine is a display, not a checkout. Scope all new tokens here. */
#shop-crates { --crate-base:#14131b; --crate-panel:#232323; --crate-violet:#e8e8e6; --crate-chalk:#f3f3f3; --crate-muted:#b3b3b3; --crate-steel:#6f6f6f; scroll-margin-top:24px; }
#shop-crates > .shop-section-heading h2 { font-size:clamp(34px,4.5vw,58px); letter-spacing:-.055em; line-height:1.05; }
#shop-crates > .shop-section-heading p { max-width:58ch; color:var(--crate-muted); }
#shop-crates .crate-preview-status { text-transform:none; letter-spacing:0; color:var(--crate-chalk); border-color:#97979755; background:#97979710; }
.crate-showcase { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(235px,.8fr); border:1px solid #b3b3b324; border-radius:14px; overflow:hidden; background:var(--crate-base); color:var(--crate-chalk); }
.crate-vitrine { min-width:0; background:var(--crate-panel); }
.crate-stage { position:relative; isolation:isolate; aspect-ratio:1.6; min-height:280px; overflow:hidden; }
.crate-stage-caption { position:absolute; z-index:5; top:24px; left:28px; right:20px; font-size:12px; color:var(--crate-muted); }
.crate-stage-art { position:absolute; height:auto; max-width:none; object-fit:contain; pointer-events:none; transition:left .35s ease,width .35s ease,bottom .35s ease; }
.crate-stage-art[data-offset="0"] { width:78%; left:11%; bottom:-23%; z-index:4; }
.crate-stage-art[data-offset="-1"] { width:41%; left:2%; bottom:14%; z-index:2; }
.crate-stage-art[data-offset="1"] { width:41%; left:57%; bottom:14%; z-index:2; }
.crate-stage-art[data-offset="-2"] { width:32%; left:0; bottom:-2%; z-index:3; }
.crate-stage-art[data-offset="2"] { width:32%; left:68%; bottom:-2%; z-index:3; }
.crate-stage-plinth { position:absolute; left:11%; right:11%; bottom:13%; height:8%; border-radius:50%; background:#14131b; border-bottom:1px solid #6f6f6f55; z-index:1; }
.crate-finish-controls { display:flex; justify-content:center; padding:0 16px 20px; gap:4px; }
.crate-finish-controls button { min-height:44px; flex:1 1 0; max-width:104px; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--crate-muted); padding:8px 4px; font-size:12px; }
.crate-finish-controls button[aria-pressed="true"] { background:#14131b; color:var(--crate-chalk); border-color:#97979780; }
.crate-finish-controls button:hover { color:var(--crate-chalk); background:#14131b80; }
.crate-finish-dot { width:6px; height:6px; border-radius:50%; background:var(--finish-tone); flex-shrink:0; }
.crate-finish-dot[data-tone="white"] { --finish-tone:#e1e2eb; } .crate-finish-dot[data-tone="blue"] { --finish-tone:#77cfee; } .crate-finish-dot[data-tone="purple"] { --finish-tone:#ba9df7; } .crate-finish-dot[data-tone="gold"] { --finish-tone:#e6c878; } .crate-finish-dot[data-tone="red"] { --finish-tone:#f18b9e; }
.crate-finish-detail { padding:38px 28px; align-self:center; }
.crate-finish-detail .crate-display-label { color:var(--crate-muted); font-size:12px; margin:0 0 8px; }
.crate-finish-detail h3 { font-size:clamp(32px,3.5vw,46px); font-weight:600; letter-spacing:-.05em; line-height:1.1; margin:0 0 16px; }
.crate-finish-detail > p { font-size:13px; line-height:1.65; color:var(--crate-muted); margin:20px 0 0; }
.crate-finish-detail .crate-finish-odds { color:var(--crate-chalk); }
.crate-finish-odds strong { font-size:21px; font-weight:500; padding-right:7px; }
.crate-finish-detail .crate-display-disclaimer { font-size:11px; line-height:1.7; padding-top:20px; border-top:1px solid #b3b3b324; }
.crate-trial-strip { grid-column:1/-1; border-top:1px solid #b3b3b324; padding:26px 28px; }
.crate-approved-odds h3 { font-size:12px; font-weight:500; text-transform:none; color:var(--crate-muted); margin:0 0 16px; }
.crate-approved-odds ul { list-style:none; display:flex; gap:20px; margin:0; padding:0; }
/* Odds rows are rarities, so they use the --rarity-* tokens. The finish colours above
   (--finish-tone) are only for the finish swatches. */
.crate-approved-odds li { --odds-tone:var(--rarity-common); flex:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; border-top:2px solid var(--odds-tone); padding:12px 0 0; font-size:12px; color:var(--crate-muted); }
.crate-approved-odds li > span { color:color-mix(in srgb, var(--odds-tone) 70%, #fff); }
.crate-approved-odds li[data-rarity="common"] { --odds-tone:var(--rarity-common); } .crate-approved-odds li[data-rarity="uncommon"] { --odds-tone:var(--rarity-uncommon); } .crate-approved-odds li[data-rarity="rare"] { --odds-tone:var(--rarity-rare); } .crate-approved-odds li[data-rarity="very-rare"] { --odds-tone:var(--rarity-very-rare); } .crate-approved-odds li[data-rarity="epic"] { --odds-tone:var(--rarity-epic); } .crate-approved-odds li[data-rarity="legendary"] { --odds-tone:var(--rarity-legendary); } .crate-approved-odds li[data-rarity="mythic"] { --odds-tone:var(--rarity-mythic); } .crate-approved-odds li[data-rarity="super-rare"] { --odds-tone:var(--rarity-super-rare); }
.crate-approved-odds strong { color:var(--crate-chalk); font-weight:500; }
.crate-trial-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid #b3b3b324; margin-top:26px; padding-top:24px; }
.crate-trial-terms { display:flex; gap:34px; }
.crate-trial-terms p { margin:0; }
.crate-trial-terms strong { display:block; font-size:20px; letter-spacing:-.035em; font-weight:500; }
.crate-trial-terms span { display:block; color:var(--crate-muted); font-size:10px; margin-top:5px; }
.crate-preview-action { display:flex; align-items:flex-end; flex-direction:column; gap:8px; }
.crate-showcase .button { min-height:46px; text-transform:none; letter-spacing:0; border-radius:6px; background:var(--crate-violet); border-color:var(--crate-violet); color:#14131b; font-weight:600; }
.crate-preview-action > span { color:var(--crate-muted); font-size:10px; }
.crate-showcase :is(button,a):focus-visible, .crate-flow-note summary:focus-visible { outline:3px solid var(--crate-violet); outline-offset:3px; }
.crate-flow-note { margin:20px 0 0; color:var(--crate-muted); font-size:13px; }
.crate-flow-note summary { display:list-item; min-height:44px; padding:12px 0; cursor:pointer; color:var(--crate-chalk); }
.crate-flow-note p { max-width:76ch; margin:6px 0 18px; line-height:1.7; }
.crate-showcase-dialog { background:#14131b; color:#f3f3f3; }
.crate-simulation-tag { font-size:11px; color:#c2c2c2; padding:7px 10px; border:1px solid #97979766; border-radius:4px; }
.crate-showcase-dialog .crate-reel-item > div { overflow:hidden; background:#232323; }
.crate-showcase-dialog .crate-reel-item img { width:125%; height:125%; max-width:none; object-fit:contain; }
.crate-simulation-result { border-left:2px solid #979797; padding:3px 0 3px 18px; }
.crate-simulation-result > span:not(.crate-rarity) { display:block; color:#b3b3b3; font-size:11px; margin-bottom:8px; }
.crate-showcase-dialog h2:focus-visible { outline:2px solid #979797; outline-offset:6px; border-radius:3px; }
.crate-simulation-result h3 { margin-bottom:10px; }
.crate-simulation-result p { max-width:68ch; margin-top:12px; }
@media(max-width:1100px) {
  .crate-showcase { grid-template-columns:minmax(0,1fr); }
  .crate-stage { aspect-ratio:1.85; }
  .crate-stage-art[data-offset="0"] { width:65%; left:17.5%; bottom:-26%; }
  .crate-stage-art[data-offset="-1"] { bottom:7%; }
  .crate-stage-art[data-offset="1"] { bottom:7%; }
  .crate-finish-detail { padding:26px 28px; border-top:1px solid #b3b3b324; display:grid; grid-template-columns:1fr 1fr; column-gap:26px; }
  .crate-finish-detail .crate-display-label, .crate-finish-detail h3, .crate-finish-detail > .crate-rarity { grid-column:1; }
  .crate-finish-detail [data-finish-copy] { grid-column:1; margin-top:14px; }
  .crate-finish-detail .crate-finish-odds { grid-column:2; grid-row:2; align-self:center; margin:0; }
  .crate-finish-detail .crate-display-disclaimer { grid-column:2; grid-row:3/5; margin:0; padding:0; border:0; }
}
@media(max-width:600px) {
  .crate-stage { min-height:240px; aspect-ratio:1.4; }
  .crate-stage-caption { top:18px; left:18px; font-size:11px; }
  .crate-stage-art[data-offset="0"] { width:94%; left:3%; bottom:-13%; }
  .crate-stage-art[data-offset="-1"] { width:48%; left:1%; bottom:29%; }
  .crate-stage-art[data-offset="1"] { width:48%; left:51%; bottom:29%; }
  .crate-stage-art[data-offset="-2"] { width:36%; left:-1%; bottom:3%; }
  .crate-stage-art[data-offset="2"] { width:36%; left:65%; bottom:3%; }
  .crate-stage-plinth { bottom:11%; }
  .crate-finish-controls { padding:0 8px 14px; gap:1px; }
  .crate-finish-controls button { font-size:11px; gap:4px; }
  .crate-finish-detail { padding:24px 20px; display:block; }
  .crate-finish-detail h3 { font-size:35px; }
  .crate-finish-detail .crate-finish-odds { margin:18px 0; }
  .crate-finish-detail .crate-display-disclaimer { margin-top:18px; max-width:42ch; }
  .crate-trial-strip { padding:24px 20px; }
  .crate-approved-odds ul { flex-wrap:wrap; gap:18px 20px; }
  .crate-approved-odds li { flex:1 1 25%; min-width:65px; font-size:11px; }
  .crate-trial-bottom { align-items:stretch; flex-direction:column; gap:24px; }
  .crate-trial-terms { justify-content:space-between; gap:18px; }
  .crate-trial-terms strong { font-size:18px; }
  .crate-trial-terms span { max-width:17ch; line-height:1.5; }
  .crate-preview-action { align-items:stretch; text-align:center; }
  .crate-showcase-dialog .crate-simulation-tag { max-width:130px; }
}
@media(prefers-reduced-motion:reduce) { .crate-qr-loading > span { animation:none; } .crate-showcase *, .crate-showcase *::before, .crate-showcase *::after { animation:none!important; transition:none!important; } }

/* --- Crate reveal polish: rarity tones, motion blur, landing burst, result celebration (presentation only) --- */
.crate-reel, .crate-reel-item, .crate-result, .crate-checkout-art { --tone:var(--rarity-common); }
[data-tone="uncommon"], [data-winner-tone="uncommon"] { --tone:var(--rarity-uncommon); }
[data-tone="rare"], [data-winner-tone="rare"] { --tone:var(--rarity-rare); }
[data-tone="very-rare"], [data-winner-tone="very-rare"] { --tone:var(--rarity-very-rare); }
[data-tone="epic"], [data-winner-tone="epic"] { --tone:var(--rarity-epic); }
[data-tone="legendary"], [data-winner-tone="legendary"] { --tone:var(--rarity-legendary); }
[data-tone="mythic"], [data-winner-tone="mythic"] { --tone:var(--rarity-mythic); }
[data-tone="super-rare"], [data-winner-tone="super-rare"] { --tone:var(--rarity-super-rare); }
.crate-reel { background: radial-gradient(120% 140% at 50% 120%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%), #0d0e13; }
/* A spinning reel glows neutral, so its background cannot hint the winning rarity before it lands. */
.crate-reel-animated:not(.crate-reel-landed) { background: radial-gradient(120% 140% at 50% 120%, #c9ced624, transparent 60%), #0d0e13; }
.crate-reel-item { position: relative; border-color: color-mix(in srgb, var(--tone) 38%, transparent); background: linear-gradient(180deg, #1c1e25, color-mix(in srgb, var(--tone) 12%, #16171d)); }
.crate-reel-item::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--tone); opacity: .85; }
.crate-reel-item > div { background: radial-gradient(80% 80% at 50% 60%, color-mix(in srgb, var(--tone) 22%, #2a2a2a), #242424); }
.crate-reel-winner { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 0 28px color-mix(in srgb, var(--tone) 45%, transparent); }
.crate-reel-burst { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(40% 90% at 50% 50%, color-mix(in srgb, var(--tone) 55%, transparent), transparent 70%); }
.crate-result[data-tone] { border-color: color-mix(in srgb, var(--tone) 55%, transparent); }
.crate-result[data-tone] .crate-result-art { background: radial-gradient(90% 90% at 50% 60%, color-mix(in srgb, var(--tone) 26%, #2b2b2b), #212121); }
@media (prefers-reduced-motion: no-preference) {
  /* Speed blur while the reel races, easing out before it lands. */
  .crate-reel-animated .crate-reel-track { will-change: transform; }
  .crate-reel-animated .crate-reel-window { animation: crate-reel-blur var(--reel-duration,6500ms) linear both; animation-delay: var(--reel-delay,0ms); }
  @keyframes crate-reel-blur { 0% { filter: blur(0); } 6% { filter: blur(2.5px); } 45% { filter: blur(1.2px); } 70%, 100% { filter: blur(0); } }
  .crate-reel-animated .crate-reel-marker { animation: crate-marker-tick .18s ease-in-out infinite alternate; }
  @keyframes crate-marker-tick { from { box-shadow: 0 0 0 0 #c0c0c000; } to { box-shadow: 0 0 18px 2px #c0c0c055; } }
  /* Landing: the recorded frame pops in its rarity colour and the window flashes. */
  .crate-reel-animated .crate-reel-landing { animation: crate-winner-land 1.2s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--reel-duration,6500ms) + var(--reel-delay,0ms) - 120ms); }
  @keyframes crate-winner-land { 0% { transform: none; box-shadow: none; } 35% { transform: scale(1.1); border-color: var(--tone); box-shadow: 0 0 0 2px var(--tone), 0 0 44px color-mix(in srgb, var(--tone) 70%, transparent); } 100% { transform: scale(1.04); border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 0 28px color-mix(in srgb, var(--tone) 45%, transparent); } }
  .crate-reel-animated .crate-reel-burst { animation: crate-reel-burst 1.4s ease-out both; animation-delay: calc(var(--reel-duration,6500ms) + var(--reel-delay,0ms) - 120ms); }
  @keyframes crate-reel-burst { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
  /* Result card celebration right after landing. */
  .crate-result-landed { animation: crate-result-land .9s cubic-bezier(.16,1.2,.3,1) both; position: relative; overflow: hidden; }
  @keyframes crate-result-land { from { opacity: 0; transform: translateY(14px) scale(.96); box-shadow: none; } to { opacity: 1; transform: none; box-shadow: 0 0 0 1px var(--tone), 0 18px 60px color-mix(in srgb, var(--tone) 30%, transparent); } }
  .crate-result-landed::after { content: ''; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, #ffffff40, transparent); animation: crate-result-shine 1.3s .35s ease-out both; pointer-events: none; }
  @keyframes crate-result-shine { from { left: -60%; } to { left: 130%; } }
  .crate-result-landed .crate-result-art img { animation: crate-recorded-reveal .85s cubic-bezier(.16,.8,.2,1) both, crate-art-float 3.2s 1s ease-in-out infinite alternate; }
  @keyframes crate-art-float { from { translate: 0 0; } to { translate: 0 -6px; } }
  /* Landing hold: the reel has stopped, and the checkout aside (the visible result)
     celebrates. The offset resumes the celebration when the dialog re-renders. */
  .crate-reel-animated.crate-reel-landed .crate-reel-marker { animation: none; }
  .crate-checkout-art.crate-result-landed { animation-delay: var(--landed-offset,0ms); }
  .crate-checkout-art.crate-result-landed::after { animation-delay: calc(.35s + var(--landed-offset,0ms)); }
}
/* Point-of-purchase terms line (privacy/legal review G7). */
.crate-terms { margin: 14px 0 0; color: #aab0bd; font-size: 12px; line-height: 1.5; }
.crate-terms a { color: #f7f8f8; text-decoration: underline; text-underline-offset: 3px; }

/* Crates on Mainnet (2026-10-09): full-background crate art, live release odds, paused and
   refund states, received crates. Finish colours stay on swatches; rarity text uses --rarity-*. */
.crate-stage[data-art="full"] { background:#1b1b1d; }
.crate-stage[data-art="full"] .crate-stage-art { top:0; left:0; bottom:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:1; transition:opacity .35s ease; }
.crate-stage[data-art="full"] .crate-stage-art[data-offset="0"] { opacity:1; z-index:2; }
.crate-stage[data-art="full"] .crate-stage-plinth { display:none; }
.crate-stage[data-art="full"] .crate-stage-caption { color:#d8d8d8; text-shadow:0 1px 8px #000000b3; }

.crate-preview-status[data-state="paused"] { border-color:#d8d8d866; color:#f2f2f2; }
.crate-odds-finish { display:inline-flex; align-items:center; gap:7px; min-width:64px; font-size:12px; color:#d6d6d6; }
.crate-finish-odds-list > li { display:grid; grid-template-columns:minmax(64px,auto) 1fr auto; }
.crate-rules details > summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.crate-rules details > summary small { color:#9a9a9a; font-size:11px; }
.crate-item-odds { margin-top:4px; padding-top:10px; border-top:1px solid #ffffff14; }
.crate-item-odds > li { display:grid; grid-template-columns:1fr auto auto; gap:10px; font-size:12px; }
.crate-received { color:#ededed; font-weight:600; }
.crate-recorded small { font-size:11px; line-height:1.55; color:#c8c8c8; max-width:60ch; }
.crate-recorded a { font-size:12px; color:#ededed; text-decoration:underline; text-underline-offset:3px; }
.crate-closed { margin-top:12px; color:#a4a4a4; }
.crate-closed > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:13px; }
.crate-closed > summary:focus-visible { outline:2px solid #b6b6b6; outline-offset:2px; }
.crate-refund-note, .crate-paused-note, .crate-holder-note { margin:16px 0 0; padding:12px 14px; border:1px solid #ffffff24; border-radius:6px; background:#ffffff08; font-size:12px; line-height:1.6; color:#d4d4d4; }
.crate-refund-note code { font-size:11px; overflow-wrap:anywhere; color:#f2f2f2; }
.crate-rules details > summary { list-style:none; cursor:pointer; min-height:34px; }
.crate-rules details > summary::-webkit-details-marker { display:none; }
.crate-rules details > summary::before { content:'+'; width:12px; color:#9a9a9a; }
.crate-rules details[open] > summary::before { content:'−'; }
@media(max-width:600px) { .crate-finish-odds-list > li { grid-template-columns:minmax(58px,auto) 1fr auto; gap:8px; } .crate-item-odds > li { grid-template-columns:1fr auto; } .crate-item-odds > li > .crate-rarity { grid-column:1; grid-row:2; } }