/* Shared square packs in the store, header wallet and live-room picker. */
.coin-carousel { --coin-card: 272px; max-width: 1100px; min-width: 0; margin: 0 auto; }
.coin-carousel, .coin-carousel * { box-sizing: border-box; }
.coin-carousel-track { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0 14px; }
.coin-carousel-track::-webkit-scrollbar { display: none; }
.coin-carousel-track { cursor: grab; user-select: none; -webkit-user-select: none; }
.coin-carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.coin-carousel-track.is-dragging .coin-pack { cursor: grabbing; }
.coin-carousel-track img { -webkit-user-drag: none; pointer-events: none; }
.coin-carousel-track::before, .coin-carousel-track::after { content: ''; flex: 0 0 max(0px, calc(50% - var(--coin-card) / 2 - 12px)); }
.coin-carousel .coin-pack { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 var(--coin-card); width: var(--coin-card); height: var(--coin-card); min-height: 0; gap: 5px; padding: 16px; scroll-snap-align: center; border: 1px solid #ffffff18; border-radius: 20px; background: #191b1e; color: #f6f6f8; font-family: var(--face); text-align: center; cursor: pointer; transform: scale(.93); opacity: .65; transition: transform 350ms cubic-bezier(.22,1,.36,1), opacity 250ms ease, border-color 200ms ease, background 200ms ease; }
.coin-carousel .coin-pack.is-centred { transform: scale(1); opacity: 1; }
.coin-carousel .coin-pack:hover { opacity: 1; border-color: #ffffff50; }
.coin-carousel .coin-pack:focus-visible { outline: 2px solid #e6cc87; outline-offset: 3px; opacity: 1; }
.coin-carousel .coin-pack.is-best { border-color: #c7a75688; background: radial-gradient(ellipse at 50% 28%, #b38c2422, transparent 65%), #1d1d1a; }
.coin-carousel .coin-pack[aria-pressed="true"] { border-color: #efd58f; box-shadow: inset 0 0 0 1px #efd58f; }
.coin-pack-badge { flex: none; min-height: 18px; padding: 3px 8px; border-radius: 5px; color: #acb0b8; font: 600 9px/1.3 var(--face); letter-spacing: .025em; }
.is-best .coin-pack-badge { color: #efd58f; background: #e3c16c16; }
.coin-pack-art { position: relative; display: grid; place-items: center; flex: 1; width: 100%; min-height: 0; }
.coin-pack-art img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; max-width: 128px; max-height: 114px; object-fit: contain; filter: drop-shadow(0 6px 14px #0005); transition: transform 450ms cubic-bezier(.22,1,.36,1); }
.is-centred .coin-pack-art img { transform: translateY(-2px) scale(1.04); }
.coin-pack-copy { flex: none; }
.coin-pack-copy strong { display: block; font: 750 29px/1.1 var(--face); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.coin-pack-copy > span { display: block; margin-top: 4px; color: #9ea3ad; font: 600 8px/1.3 var(--face); letter-spacing: .12em; }
.coin-pack-price { display: block; min-width: 86px; margin-top: 3px; padding: 6px 12px; border: 1px solid #ffffff10; border-radius: 8px; color: #f5f3ec; background: #ffffff08; font: 650 14px/1.2 var(--face); }
.is-best .coin-pack-price { color: #f4dfa6; border-color: #e3c16c25; background: #e3c16c0d; }
.coin-pack-unit { flex: none; margin-top: 1px; color: #8f939d; font: 400 9px/1.4 var(--face); }
.coin-pack-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #ffffff18; border-radius: 50%; font: 700 11px var(--face); color: transparent; }
.coin-pack[aria-pressed="true"] .coin-pack-check { background: #efd58f; border-color: #efd58f; color: #171713; }
.coin-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 0 4px; }
.coin-carousel-dots { display: flex; align-items: center; gap: 0; }
.coin-carousel-dots button { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.coin-carousel-dots span { display: block; width: 5px; height: 5px; border-radius: 999px; background: #676c76; transition: width 240ms ease, background 240ms ease; }
.coin-carousel-dots [aria-current="true"] span { width: 16px; background: #e4c779; }
.coin-carousel-nav button:focus-visible { outline: 2px solid #efd58f; outline-offset: 2px; }

html.is-coin-picker { background: #101113; }
html.is-coin-picker body { padding: 0 !important; background: #101113 !important; }
html.is-coin-picker .page-shell { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
html.is-coin-picker .ar-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px !important; }
html.is-coin-picker :is(.shop-heading, .shop-intro, .shop-nav, .shop-explainer, .shop-season, .shop-footer, .ar-mine, .shop-pack-note, .shop-selection-close) { display: none !important; }
html.is-coin-picker .ar-sec { margin: 0 !important; padding: 0 !important; }
html.is-coin-picker .shop-availability { margin: 0 0 3px; padding: 5px 0; border: 0; color: #999da6; font: 500 10px/1.4 var(--face); }
html.is-coin-picker .ar-sec-head { display: none !important; }
.coin-picker-intro h2 { margin: 0 0 3px; color: #f5f5f7; font: 600 18px/1.3 var(--face); }
.coin-picker-intro p { margin: 0; color: #9499a3; font: 400 11px/1.5 var(--face); }
html.is-coin-picker .coin-carousel { --coin-card: 160px; margin: 0 -16px; }
html.is-coin-picker .coin-carousel-track { padding: 6px 0 8px; }
html.is-coin-picker .coin-carousel-dots button { height: 32px; }
html.is-coin-picker .coin-pack { padding: 9px; gap: 3px; border-radius: 14px; }
html.is-coin-picker .coin-pack-badge { padding: 3px 6px; font-size: 8px; }
html.is-coin-picker .coin-pack-copy strong { font-size: 21px; }
html.is-coin-picker .coin-pack-copy > span { margin-top: 2px; font-size: 7px; }
html.is-coin-picker .coin-pack-price { min-width: 72px; margin-top: 2px; padding: 4px 8px; font-size: 12px; }
html.is-coin-picker .coin-pack-unit { display: none; }
html.is-coin-picker .coin-pack-check { width: 16px; height: 16px; top: 9px; right: 9px; }
html.is-coin-picker #store-selection { flex: none; position: relative; bottom: auto; display: grid !important; grid-template-columns: 1fr; gap: 5px; padding: 6px 12px 8px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none; }
html.is-coin-picker .shop-selection-item { display: none !important; }
html.is-coin-picker .shop-selection-item .shop-eyebrow { display: none; }
html.is-coin-picker #selected-name { display: block; color: #c2c5cc; font: 500 12px var(--face); }
html.is-coin-picker #confirm { width: 100%; height: 36px; min-height: 36px; margin: 0; font: 600 12px var(--face) !important; }
html.is-coin-picker #after { margin: 0; color: #878d98 !important; font-size: 9px; line-height: 1.4; }
html.is-header-coin-picker .ar-body { padding: 8px 12px 0 !important; }
html.is-header-coin-picker .shop-availability { margin: 0 0 3px; padding: 0; font-size: 10px; }
html.is-header-coin-picker .ar-sec-head { display: none !important; }
html.is-header-coin-picker .coin-carousel { margin: 0 -12px; }
html.is-header-coin-picker #store-selection { padding: 8px 12px 10px !important; gap: 5px; }
html.is-header-coin-picker .shop-selection-item { display: none !important; }
html.is-header-coin-picker #confirm { min-height: 38px; font-size: 12px !important; }
html.is-header-coin-picker #after { font-size: 9px; }
.coin-checkout { box-sizing: border-box; width: min(340px,calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 16px; border: 1px solid #ffffff25; border-radius: 16px; background: #141516; color: #f5f5f7; font-family: var(--face); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 40px #0008; }
.coin-checkout::backdrop { background: #08090bc9; backdrop-filter: blur(4px); }
.coin-checkout[open] { animation: coin-review-in 220ms cubic-bezier(.22,1,.36,1); }
.coin-checkout-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coin-checkout-head h2 { margin: 0; font: 600 17px/1.3 var(--face); letter-spacing: -.025em; }
.coin-checkout-head button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #ffffff09; color: #a8adb7; font-size: 20px; cursor: pointer; }
.coin-checkout-pack { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.coin-checkout-pack img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.coin-checkout-pack strong { display: block; font-size: 16px; font-weight: 650; }
.coin-checkout-pack span { display: block; color: #a2a6b0; font-size: 10px; margin-top: 4px; }
.coin-checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid #ffffff13; font-size: 12px; }
.coin-checkout-total small { color: #9196a1; font-size: 9px; margin-left: 3px; }
.coin-checkout-total strong { font-size: 20px; font-style: normal; font-variant-numeric: tabular-nums; }
.coin-checkout-note,.coin-checkout-error { margin: 10px 0; color: #a2a6b0; font-size: 10px; line-height: 1.5; }
.coin-checkout-error { color: #ff9ca5; }
.coin-checkout-pay { width: 100%; min-height: 38px; padding: 8px; border: 1px solid #efd58f; border-radius: 9px; background: #efd58f; color: #1a1914; font: 650 12px/1.3 var(--face); cursor: pointer; }
.coin-checkout-pay:disabled { background: #ffffff08; border-color: #ffffff12; color: #9196a1; cursor: default; }
.coin-checkout-back { display: block; margin: 4px auto 0; min-height: 30px; padding: 4px 10px; border: 0; background: none; color: #d0d3db; font: 500 11px var(--face); cursor: pointer; }
.coin-checkout-footnote { display: block; text-align: center; color: #797f8b; font-size: 9px; }
.coin-checkout button:focus-visible { outline: 2px solid #efd58f; outline-offset: 2px; }
html.is-coin-picker .coin-checkout { padding: 12px; border-radius: 12px; }
html.is-coin-picker .coin-checkout-pack { margin: 8px 0; }
html.is-coin-picker .coin-checkout-pack img { flex-basis: 48px; width: 48px; height: 48px; }
html.is-coin-picker .coin-checkout-total { padding-top: 8px; }
html.is-coin-picker .coin-checkout-note { margin: 8px 0; }
@keyframes coin-review-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .coin-checkout[open] { animation: none; } }
@media (max-width: 600px) {
  .coin-carousel { --coin-card: 240px; }
  .coin-carousel-dots button { width: 26px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .coin-carousel *, .coin-pack-art img { transition: none !important; } }