/* game.css — the Card Shop, premium dark+gold treatment.
   Every selector the JS renders into is preserved; only the look is upgraded. */
.hidden { display: none !important; }

/* ── shop backdrop: deep black-gold "Millennium sanctum" the content floats inside.
   Top crown-glow + ember + bg_deck photo are unchanged (the bottom 4 layers).
   Added above them (no new raster assets — pure gradients + 2 inline-SVG Wedjat
   data-URIs): a side-vignette that deepens the gutters into deliberate framing,
   a thin gold rim hugging each edge, and a barely-there (~4%) Wedjat eye watermark
   in the left/right gutters. All static (no motion) and all behind the opaque
   panels, so text/card contrast is untouched. Holds up narrow/vertical too — the
   gutter glints are pinned a hair off each viewport edge and simply tuck behind
   content when the gutters close. ── */
body {
  background:
    /* faint Millennium-Eye (Wedjat) watermark — left gutter. Same canonical
       almond eye + brow + iris + wedjat tail/curl as eye-bg.js / icons.js / the
       transition curtain, so the symbol reads as ONE Eye across the whole app. */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2074'%3E%3Cg%20fill='none'%20stroke='%23e7c66b14'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2037%20Q50%208%2094%2037%20Q50%2064%206%2037%20Z'/%3E%3Cpath%20d='M10%2026%20Q50%206%2090%2028'/%3E%3Ccircle%20cx='50'%20cy='38'%20r='13'/%3E%3Cpath%20d='M38%2060%20L31%2073'/%3E%3Cpath%20d='M62%2060%20q14%202%2012%2016'/%3E%3C/g%3E%3Ccircle%20cx='50'%20cy='38'%20r='5'%20fill='%23e7c66b14'/%3E%3C/svg%3E") left 2.2vw center / min(230px, 17vw) auto no-repeat fixed,
    /* …and mirrored in the right gutter */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2074'%3E%3Cg%20transform='translate(100,0)%20scale(-1,1)'%3E%3Cg%20fill='none'%20stroke='%23e7c66b14'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%2037%20Q50%208%2094%2037%20Q50%2064%206%2037%20Z'/%3E%3Cpath%20d='M10%2026%20Q50%206%2090%2028'/%3E%3Ccircle%20cx='50'%20cy='38'%20r='13'/%3E%3Cpath%20d='M38%2060%20L31%2073'/%3E%3Cpath%20d='M62%2060%20q14%202%2012%2016'/%3E%3C/g%3E%3Ccircle%20cx='50'%20cy='38'%20r='5'%20fill='%23e7c66b14'/%3E%3C/g%3E%3C/svg%3E") right 2.2vw center / min(230px, 17vw) auto no-repeat fixed,
    /* thin gold rim hugging the far edges — the inner edge of the frame */
    linear-gradient(90deg, rgba(231,198,107,.07), transparent 7%, transparent 93%, rgba(231,198,107,.07)) fixed,
    /* side vignette: deepen the gutters so the content sits in a pool of light */
    radial-gradient(125% 100% at 50% 50%, transparent 52%, rgba(4,3,2,.55) 88%, rgba(2,1,1,.78)) fixed,
    /* ── existing layers (unchanged) ── */
    radial-gradient(1100px 700px at 50% -10%, rgba(231,198,107,.10), transparent 65%),
    linear-gradient(rgba(8,7,5,.88), rgba(5,4,3,.94)),
    url("img/ui/bg_deck.png") center/cover fixed,
    linear-gradient(#14110b, #0a0806 60%, #060504);
}

/* ── PER-PAGE SOULS ────────────────────────────────────────────────────────
   Each tab gets its own atmospheric "stage" rendered on a FIXED, full-viewport
   layer that lives BEHIND everything (z-index:-1, pointer-events:none). Because
   it's position:fixed it adds ZERO layout height (app-fit untouched) and it does
   NOT scroll with the tab's internal scroll region — the goods stay framed while
   the content moves over them. The opaque .panel windows keep all text contrast.
   Tab-awareness via :has() on the visible tabpane (game.js toggles .hidden). ── */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .45s ease, background-position .6s ease;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}

/* THE VAULT (Packs/Shop) — a deep sanctum: a vaulted arch of light overhead, a
   warm pool spilling onto a "rail" of light low-center (the lit storefront goods),
   and tall pilaster shadows framing the gutters like a treasury chamber. */
body:has(#tab-packs:not(.hidden))::after {
  opacity: 1;
  background:
    /* vaulted arch glow crowning the storefront */
    radial-gradient(1200px 520px at 50% -16%, rgba(231,198,107,.16), transparent 60%),
    /* the lit rail the sealed packs sit on */
    radial-gradient(900px 150px at 50% 78%, rgba(231,198,107,.10), transparent 72%),
    /* twin pilaster shadows deepening the side walls of the vault */
    linear-gradient(90deg, rgba(2,1,1,.55), transparent 16%, transparent 84%, rgba(2,1,1,.55)),
    /* low ambient floor wash */
    radial-gradient(140% 90% at 50% 120%, rgba(40,30,14,.5), transparent 60%);
}

/* THE GALLERY / BINDER (Collection) — a museum hall: a soft top spotlight, a
   faint vertical plinth band centered behind the grid, and a grounding floor
   gradient so each card reads as a mounted exhibit on a lit wall. */
body:has(#tab-collection:not(.hidden))::after {
  opacity: 1;
  background:
    /* gallery ceiling spotlight */
    radial-gradient(1000px 360px at 50% -8%, rgba(231,198,107,.10), transparent 62%),
    /* the plinth/frame band the exhibits hang against */
    linear-gradient(180deg, transparent 8%, rgba(231,198,107,.045) 30%, rgba(231,198,107,.045) 64%, transparent 88%),
    /* grounding floor shadow */
    radial-gradient(150% 80% at 50% 118%, rgba(4,3,2,.6), transparent 58%);
}

/* header → game HUD bar.
   style.css already supplies header{position:relative} + header::after (the fading
   gold underline) — we KEEP that and only deepen the plate + add gold filigree
   corner accents via header::before (free; style.css uses ::after only). The
   pseudo is absolutely positioned + pointer-events:none, so it adds ZERO layout
   height and never disturbs app-fit or the #userbar player plate. */
header {
  background: linear-gradient(180deg, rgba(20,17,11,.95), rgba(10,8,6,.92)) !important;
  border-bottom: 1px solid var(--gold-dim) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.55);
  overflow: hidden; /* clip the corner flourishes to the bar */
}
/* twin gold filigree flourishes pinned to the top-left & top-right corners —
   one inline-SVG drawn once and mirrored to the right edge. ~40% opacity so it
   reads as engraving, not decoration that competes with the title/nav. */
header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  pointer-events: none; z-index: 0; opacity: .42;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2090%2044'%3E%3Cg%20fill='none'%20stroke='%23e7c66b'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cpath%20d='M2%202%20H40'/%3E%3Cpath%20d='M2%202%20V20%20q0%2010%2010%2010%20q8%200%208%20-7%20q0%20-5%20-5%20-5%20q-4%200%20-4%204'/%3E%3Cpath%20d='M22%202%20q6%200%206%206%20q0%204%20-4%204'/%3E%3Ccircle%20cx='11'%20cy='28'%20r='1.6'%20fill='%23e7c66b'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") left top / 90px auto no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2090%2044'%3E%3Cg%20transform='translate(90,0)%20scale(-1,1)'%20fill='none'%20stroke='%23e7c66b'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Cpath%20d='M2%202%20H40'/%3E%3Cpath%20d='M2%202%20V20%20q0%2010%2010%2010%20q8%200%208%20-7%20q0%20-5%20-5%20-5%20q-4%200%20-4%204'/%3E%3Cpath%20d='M22%202%20q6%200%206%206%20q0%204%20-4%204'/%3E%3Ccircle%20cx='11'%20cy='28'%20r='1.6'%20fill='%23e7c66b'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") right top / 90px auto no-repeat;
}
/* the title + nav + player plate must sit above the filigree */
header > * { position: relative; z-index: 1; }
header h1 { font-family: "Cinzel", serif; letter-spacing: .1em; }

/* gold-trimmed thin scrollbars everywhere in the shop */
* { scrollbar-width: thin; scrollbar-color: #6b5430 #14110b; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #14110b; border-radius: 8px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(#7a6136, #4a3a1e); border-radius: 8px; border: 2px solid #14110b; }
*::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── auth ── */
.auth-box { max-width: 360px; margin: 70px auto; background: linear-gradient(160deg, rgba(30,26,18,.96), rgba(13,11,8,.96));
  border: 1px solid var(--gold-dim); border-radius: 16px; padding: 30px 28px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(231,198,107,.10); animation: riseIn .5s ease; }
.auth-box h2 { font-family: "Cinzel", serif; color: var(--gold); margin: 0 0 18px; letter-spacing: .12em; }
.auth-box input { width: 100%; margin: 6px 0; padding: 10px; background: #0e0c08; border: 1px solid var(--line); border-radius: 8px; color: var(--txt); font-size: 14px; }
.auth-btns { display: flex; gap: 8px; margin-top: 12px; }
.auth-btns button { flex: 1; }
button.wallet-btn { width: 100%; padding: 13px; font-size: 15px; letter-spacing: .03em; background: linear-gradient(135deg, #ab9ff2, #7c5cff); color: #15131f; border: none; font-weight: 800; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(124,92,255,.35); }
button.wallet-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
button.wallet-btn:disabled { opacity: .6; cursor: default; transform: none; }
.wallet-note { font-size: 11px; color: #a9966a; margin: 10px 2px 4px; line-height: 1.45; }
.auth-or { font-size: 11px; color: #8a7a55; letter-spacing: .1em; margin: 16px 0 8px; opacity: .7; }
.err { color: var(--p1); font-size: 12px; margin-top: 10px; min-height: 16px; }
.err a { color: var(--gold); }

/* ── userbar = player plate ── */
.userbar { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, rgba(231,198,107,.10), rgba(231,198,107,.03)); border: 1px solid var(--gold-dim);
  border-radius: 22px; padding: 4px 12px 4px 5px; box-shadow: inset 0 1px 0 rgba(231,198,107,.10); }
.pfp { width: 30px; height: 30px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 10px rgba(231,198,107,.35); }
.pfp-edit { padding: 2px 7px; font-size: 12px; border-radius: 8px; }
.usd { color: #9a8552; font-weight: 400; font-size: .85em; }

/* ── tabs → game nav panels ── */
.tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  position: relative; overflow: hidden; padding: 11px 22px; font-size: 14px; font-weight: 700; letter-spacing: .08em;
  font-family: "Cinzel", serif; color: #cdb98a; cursor: pointer; border-radius: 11px;
  background: linear-gradient(160deg, rgba(30,26,18,.92), rgba(14,12,8,.92));
  border: 1px solid var(--gold-dim); border-bottom: 2px solid var(--gold-dim);
  box-shadow: 0 5px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(231,198,107,.07);
  transition: transform .13s ease, box-shadow .13s ease, color .13s ease, border-color .13s ease;
}
.tab:hover { transform: translateY(-2px); color: var(--gold); border-color: var(--gold);
  box-shadow: 0 9px 24px rgba(231,198,107,.14), inset 0 1px 0 rgba(231,198,107,.12); }
.tab.active { color: #1a1408; font-weight: 800; background: linear-gradient(180deg, #f0d488, #c8a04a);
  border-color: var(--gold); box-shadow: 0 6px 22px rgba(231,198,107,.35), inset 0 1px 0 rgba(255,245,210,.7); }
.tab.active:hover { transform: none; }
/* inline-SVG tab/HUD glyphs (replace emojis) — inherit currentColor so they go
   gold normally and dark-on-gold on the active tab automatically */
.tab .tg, .hud-link .tg { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; margin-right: 7px; vertical-align: -0.16em; }
.tab .tg .ygi, .hud-link .tg .ygi { width: 100%; height: 100%; }
.hud-link { display: inline-flex; align-items: center; }

/* inline-SVG glyphs injected by game.js (window.IG) into innerHTML contexts.
   They size to their line (1em) and inherit currentColor like the tab glyphs. */
.hud-tick-ic, .st-ic { display: inline-flex; align-items: center; width: 1em; height: 1em; vertical-align: -0.14em; }
.hud-tick-ic { color: var(--gold); margin-right: 6px; }
.st-ic { margin-right: 4px; opacity: .85; }
.hud-tick-ic .ygi, .st-ic .ygi { width: 100%; height: 100%; }
/* icon-buttons (burn/sell on card chips) center their glyph */
.burnbtn .ygi, .sellbtn .ygi { width: 14px; height: 14px; vertical-align: -0.18em; }

/* ── panels → game windows ── */
.panel { background: linear-gradient(165deg, rgba(26,22,15,.94), rgba(12,10,7,.95));
  border: 1px solid var(--gold-dim); border-radius: 14px; padding: 18px; margin-bottom: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(231,198,107,.07); }
.tabpane { animation: riseIn .35s ease; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.muted { color: #9a8552; font-size: 12px; }

/* section headings inside panels */
.row-between > b { font-family: "Cinzel", serif; color: var(--gold); letter-spacing: .08em; font-size: 14px; }

/* ── inputs / selects: dark with gold focus ── */
input, select { background: #0e0c08; border: 1px solid var(--line); border-radius: 8px; color: var(--txt); padding: 8px 10px; font-size: 13px;
  transition: border-color .12s ease, box-shadow .12s ease; }
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(231,198,107,.18); }

/* ── the storefront hero (packs tab) ── */
.shop-tagline { text-align: center; color: var(--gold); font-family: "Cinzel", serif; font-weight: 900; letter-spacing: .42em; font-size: 17px;
  margin: 4px 0 14px; text-shadow: 0 0 18px rgba(231,198,107,.45); animation: tagPulse 3s ease-in-out infinite; }
@keyframes tagPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; text-shadow: 0 0 28px rgba(231,198,107,.8); } }
.shop-hero { display: flex; align-items: center; gap: 22px; padding: 14px 18px; margin-bottom: 12px;
  background: radial-gradient(420px 200px at 18% 50%, rgba(231,198,107,.10), transparent 70%),
    linear-gradient(135deg, rgba(36,30,18,.85), rgba(14,12,8,.9));
  border: 1px solid var(--gold-dim); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(231,198,107,.08); }
.shop-hero .hero-pack { width: 86px; border-radius: 7px; border: 2px solid var(--gold); flex: 0 0 auto;
  box-shadow: 0 0 26px rgba(231,198,107,.35), 0 12px 26px rgba(0,0,0,.7); animation: heroFloat 3.4s ease-in-out infinite; }
@keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
.shop-hero .hero-txt { flex: 1; min-width: 220px; }
button.primary#buyBtn { padding: 12px 26px; font-size: 15px; font-weight: 800; letter-spacing: .06em; border-radius: 12px;
  background: linear-gradient(180deg, #f0d488, #c8a04a); border: 1px solid var(--gold);
  box-shadow: 0 8px 26px rgba(231,198,107,.35), inset 0 1px 0 rgba(255,245,210,.7); transition: transform .12s ease, box-shadow .12s ease; }
button.primary#buyBtn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 34px rgba(231,198,107,.5), inset 0 1px 0 rgba(255,245,210,.7); }
.buy-col { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 252px; }
.cbuy { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 12px 16px; font-size: 14px; font-weight: 700; letter-spacing: .02em; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--gold-dim); background: linear-gradient(160deg, #2a2412, #14110a); color: #e0cf9f;
  transition: transform .14s, border-color .14s, color .14s, box-shadow .14s; }
.cbuy:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.45); }
/* button icons: Solana mark (currentColor), $YUGIOH gold coin, credits silver coin */
.cbuy svg { flex: 0 0 auto; width: 18px; height: 18px; display: block; }
/* SOL — the primary buy (solid gold) */
.cbuy.sol { background: linear-gradient(180deg, #f0d488, #c8a04a); color: #2a1e07; border-color: #d9b766; font-weight: 800;
  box-shadow: 0 6px 20px rgba(231,198,107,.28), inset 0 1px 0 rgba(255,245,210,.6); }
.cbuy.sol:hover { color: #2a1e07; box-shadow: 0 10px 28px rgba(231,198,107,.42); }
/* $YUGIOH burn — the discounted alternative (warm) */
.cbuy.tok { border-color: #ff6b4a55; color: #ffb24a; }
.cbuy.tok:hover { border-color: #ff6b4a; color: #ff8a4a; }
.cbuy .off { font-size: 11px; background: #ff6b4a; color: #1a0d08; padding: 1px 6px; border-radius: 6px; font-weight: 800; }
/* up-front price on each buy option — pinned to the trailing edge, inherits the
   button's text color so it inverts on the gold SOL button */
.cbuy .cbuy-price { margin-left: auto; font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 8px; border: 1px solid currentColor; opacity: .92; white-space: nowrap; }
.cbuy.ghost .cbuy-price { font-weight: 700; }
/* earned credits — the quiet secondary */
.cbuy.ghost { background: transparent; color: #a9966a; font-weight: 600; border-style: dashed; }
.cbuy.ghost:hover { color: #cdb98a; border-color: var(--gold-dim); transform: none; box-shadow: none; }
/* dev-only free credits — tiny muted chip, obviously not a real option */
.dev-chip { align-self: center; margin-top: 2px; font-size: 10.5px; padding: 3px 11px; border-radius: 14px; cursor: pointer; font-weight: 600;
  background: transparent; border: 1px dashed #5a5240; color: #6e6044; letter-spacing: .04em; }
.dev-chip:hover { color: #9a8552; border-color: #6e6044; }
/* connected wallet's $YUGIOH balance, shown by the Burn option (even at 0) */
.shop-yg-bal { text-align: center; font-size: 12px; color: #cdb98a; margin-top: 1px; }
.shop-yg-bal svg { vertical-align: -3px; }
.shop-yg-bal b { color: var(--gold); font-weight: 800; }
.pay-status { font-size: 11.5px; color: #9a8552; min-height: 15px; text-align: center; }
.pay-status.ok { color: #8fd49a; } .pay-status.err { color: var(--p1); }

/* ── card chips: art-first, lift + glow on hover ── */
/* card browsing area scrolls INSIDE a capped box so the filters/stats above it
   stay put — you never lose the controls while viewing a big collection. */
/* align-items:start so each chip sizes to its own content and is NOT stretched to
   the tallest item in its grid-row track (the default stretch left short-named
   chips with empty bordered space below their art — ragged, uneven heights). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px;
  align-items: start; max-height: calc(100dvh - 300px); min-height: 180px; overflow-y: auto; padding: 4px 6px 4px 0; }
.card-grid.small { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: calc(100dvh - 360px); overflow: auto; padding-right: 4px; }
.cardc { position: relative; border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px; padding: 6px; background: linear-gradient(165deg, #15120c, #0d0b08);
  cursor: default; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.cardc.click { cursor: pointer; }
.cardc:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.55); }
.cardc.click:hover { border-color: var(--gold-dim); }
/* fixed 2-line name block so a 1-line name reserves the same height as a 2-line
   one → every chip is identical height (clean uniform grid); long names clamp
   with ellipsis (the full name shows in the hover peek). */
.cardc .cn { font-size: 12px; font-weight: 600; line-height: 1.2; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.2em); }
/* single-line meta row: rarity tag + stat stay on ONE line so a long stat can't
   wrap to a 2nd line and make that chip taller than its neighbours (kept the grid
   ragged on narrow columns). Stat ellipsizes if it can't fit. */
.cardc .cmeta { font-size: 10px; color: #9a8552; margin-top: 3px; display: flex; justify-content: space-between;
  align-items: center; gap: 4px; white-space: nowrap; line-height: 1.4; }
.cardc .cmeta > .rtag { flex: 0 0 auto; }
.cardc .cmeta > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cart { width: 100%; aspect-ratio: 59/86; object-fit: cover; border-radius: 6px; display: block; background: #0c0a07; }

/* rarity accents (left bar + hover glow) */
.r-common { border-left-color: #8a8a93; }
.r-rare { border-left-color: #4aa3ff; }
.r-super { border-left-color: #b06bff; }
.r-ultra { border-left-color: var(--gold); box-shadow: 0 0 10px rgba(231,198,107,.12); }
.r-god { border-left-color: #ff4d4d; box-shadow: 0 0 14px rgba(255,77,77,.25); }
.cardc.r-rare:hover { box-shadow: 0 12px 26px rgba(0,0,0,.5), 0 0 16px rgba(74,163,255,.25); }
.cardc.r-super:hover { box-shadow: 0 12px 26px rgba(0,0,0,.5), 0 0 18px rgba(176,107,255,.3); }
.cardc.r-ultra:hover { box-shadow: 0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(231,198,107,.4); }
.cardc.r-god:hover { box-shadow: 0 12px 26px rgba(0,0,0,.5), 0 0 26px rgba(255,77,77,.5); }
.rtag { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.rtag.r-common { color: #8a8a93; } .rtag.r-rare { color:#4aa3ff; } .rtag.r-super{color:#b06bff;} .rtag.r-ultra{color:var(--gold);} .rtag.r-god { color: #ff4d4d; }

/* ── THE GALLERY / BINDER (Collection tab) ──
   The collection grid becomes a museum wall: a faint inset plinth frame around the
   mounted exhibits, and each card casts a soft floor-shadow that deepens on hover
   (the exhibit lifting off its mount). Scoped to #collGrid so the Market / Deck /
   Trade grids keep their plain look. Pure decoration → pointer-events:none. */
#collGrid {
  border: 1px solid rgba(231,198,107,.10); border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(231,198,107,.035), transparent 30%),
    radial-gradient(120% 60% at 50% 100%, rgba(4,3,2,.4), transparent 70%);
  padding: 12px 10px; box-shadow: inset 0 1px 0 rgba(231,198,107,.06);
}
#collGrid .cardc::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 78%; height: 12px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
  opacity: .4; transition: opacity .14s ease, width .14s ease, bottom .14s ease;
}
#collGrid .cardc:hover::after { opacity: .85; width: 92%; bottom: -11px; }

.pack-result { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; min-height: 10px; }
.pack-card { border: 1px solid var(--gold-dim); border-radius: 9px; padding: 12px 8px; text-align: center; background: linear-gradient(165deg, #1a1610, #0e0c08); animation: flip .4s ease both; }
@keyframes flip { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
.pack-card .cart { margin-bottom: 6px; }
.qbadge { display:inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(231,198,107,.12); border: 1px solid var(--gold-dim); font-size: 10px; color: var(--gold); }
/* Forbidden & Limited badge on deck-builder / collection cards */
.banbadge { position: absolute; top: 5px; left: 5px; z-index: 3; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 12px; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.banbadge.b0 { background: #7a1f26; color: #ffd6da; border: 1px solid #ff5d6c; }
.banbadge.b1 { background: #6b5430; color: #ffe9b0; border: 1px solid var(--gold); }
.banbadge.b2 { background: #2f5a6b; color: #cdeeff; border: 1px solid #7cc7ff; }

/* ── deck builder ──
   The Deck Builder must FIT the viewport with NO whole-page scroll — the action
   buttons (Auto-Build / Save / TO BATTLE / Quick Duel) stay reachable at ANY
   height. Approach: on the deck tab only (body.deck-active, toggled in game.js)
   the page becomes a viewport-height flex column [header → #app], so the deck
   tab inherits exactly the remaining height regardless of how many rows the tab
   bar wrapped to. Each builder panel is then its own flex column whose MIDDLE
   region scrolls internally — left: the card pool grid; right: the deck-list
   area — while the panel header + the footer buttons stay pinned. Mirrors how
   the left "Your cards" pool already scrolled, now applied to the right too.
   SCOPED to the deck tab: other tabs (Packs/Collection/Market/Trades) keep the
   normal page-scroll flow untouched. */
body.deck-active { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.deck-active > header { flex: 0 0 auto; }
body.deck-active > #app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.deck-active #app > .tabs { flex: 0 0 auto; }
body.deck-active #tab-deck { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.deck-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* fill the deck tab's available height when active so the panels can bound
   their scroll regions; min-height keeps it usable on very short viewports */
body.deck-active .deck-layout { flex: 1 1 auto; min-height: 0; height: auto; }
/* both builder panels are flex columns that fill the row height and clip,
   so their inner scroll regions (not the page) absorb the overflow */
body.deck-active .deck-layout > .panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin-bottom: 0; }
/* left pool: the card grid is the flex-grow scroll region (override its
   viewport-anchored max-height so it shares the now-bounded panel height) */
body.deck-active .deck-pool .card-grid.small { flex: 1 1 auto; min-height: 0; max-height: none; }
/* right builder: header pinned, lists scroll, footer pinned */
body.deck-active .deck-build .deck-head { flex: 0 0 auto; }
.deck-scroll { overflow-y: auto; }
body.deck-active .deck-scroll { flex: 1 1 auto; min-height: 0; padding-right: 4px; }
body.deck-active .deck-foot { flex: 0 0 auto; padding-top: 8px; }
/* inside the scroll region the lists grow naturally — drop their own cap */
body.deck-active .deck-build .deck-list { max-height: none; overflow: visible; }
.deck-list { max-height: 420px; overflow: auto; margin: 8px 0; }
.deck-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 12px; transition: background .1s ease; }
.deck-row:hover { background: rgba(231,198,107,.05); }
.deck-row button { padding: 2px 8px; font-size: 12px; }

/* ── app-fit: EVERY non-deck tab also fits the viewport (no whole-page scroll).
   Pinned header (HUD) + tabs; the active tab becomes the single internal scroll
   region. The deck tab keeps its own 2-column deck-active layout above — the two
   are mutually exclusive (game.js toggles one or the other). ── */
body.app-fit { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.app-fit > header { flex: 0 0 auto; }
body.app-fit > #app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.app-fit #app > .tabs { flex: 0 0 auto; }
body.app-fit .tabpane:not(.hidden) { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }

/* TAB-BAR ANCHOR: as a flex child, #app shrank to its content width — wide on the
   Packs tab, narrow on Collection — so margin:auto re-centered it per tab and the
   tab row visibly slid sideways. Lock #app to a constant width (centered) so the
   HUD tab bar never moves between tabs. Released to full width on narrow screens. */
body.app-fit > #app, body.deck-active > #app { align-self: center; width: min(1600px, 94vw); }

/* ── odds & supply ── */
.odds { margin-top: 12px; font-size: 12px; color: #9a8552; }
.odds summary { cursor: pointer; color: var(--gold); font-family: "Cinzel", serif; letter-spacing: .06em; }
.odds-info { margin: 8px 0; color: #9a8552; }
.odds-search { width: 100%; max-width: 280px; margin: 4px 0 8px; padding: 7px 10px; }
.odds-scroll { max-height: min(52vh, 440px); overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.odds table { width: 100%; border-collapse: collapse; }
.odds thead th { position: sticky; top: 0; z-index: 1; background: #16120b; color: var(--gold); text-align: left; padding: 7px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--gold-dim); }
.odds tbody td { padding: 4px 12px; border-bottom: 1px solid var(--line); }
.odds tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
.odds tbody tr:hover { background: rgba(231,198,107,.07); }
.odds .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* HUD bar must not clip the player plate on a narrow/vertical screen (the userbar —
     incl. logout/edit — was running off-screen). Let it wrap + shed the dev/meta tags. */
  header { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px; }
  header #meta, header .hud-link[href^="cards"] { display: none; } /* hide 'play-money·local' + 'All Cards (dev)' */
  .userbar { font-size: 12px; padding: 3px 8px 3px 4px; }
  .userbar .usd { display: none; } /* drop the ≈$ subline to save width */
  .deck-layout { grid-template-columns: 1fr; }
  /* Narrow / single-column (phones): two stacked full panels can't both fit one
     short viewport, so RELEASE the viewport lock here and let the deck tab flow
     and scroll like every other tab — panels size to content, all action
     buttons reachable by scrolling. The viewport-fit (no page scroll) path is
     for the 2-column desktop/vertical-monitor case the bug was about. */
  body.deck-active, body.app-fit { height: auto; display: block; overflow: visible; }
  body.deck-active > #app, body.app-fit > #app { display: block; overflow: visible; min-height: 0; width: auto; align-self: auto; }
  body.app-fit .tabpane:not(.hidden) { overflow: visible; min-height: 0; }
  body.deck-active #tab-deck { display: block; min-height: 0; }
  body.deck-active .deck-layout { display: grid; height: auto; }
  body.deck-active .deck-layout > .panel { display: block; overflow: visible; margin-bottom: 16px; }
  body.deck-active .deck-pool .card-grid.small { max-height: 46vh; }
  body.deck-active .deck-scroll { max-height: none; }
  body.deck-active .deck-build .deck-list { max-height: none; }
  .pack-result { grid-template-columns: repeat(3,1fr);}
  .shop-hero { flex-direction: column; text-align: center; }
}

/* burn / sell buttons on collection cards */
.burnbtn { position: absolute; top: 4px; right: 4px; padding: 2px 6px; font-size: 13px; line-height: 1; background: rgba(0,0,0,.65); border: 1px solid var(--p1); border-radius: 7px; opacity: 0; transition: .12s; }
.cardc:hover .burnbtn { opacity: 1; }
.burnbtn:hover { background: var(--p1); }
.sellbtn { position: absolute; top: 4px; right: 32px; padding: 2px 6px; font-size: 13px; line-height: 1; background: rgba(0,0,0,.65); border: 1px solid var(--gold); border-radius: 7px; opacity: 0; transition: .12s; }
.cardc:hover .sellbtn { opacity: 1; }
.sellbtn:hover { background: var(--gold); }
.mkt-btn { width: 100%; margin-top: 6px; padding: 5px 0; font-size: 12px; }
.cardc .mkt-price { color: var(--gold); font-weight: 800; }
.mkt-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }

/* ── $YUGIOH token market ── */
/* read-only holdings + live price header (informational; no money moves) */
.yg-holdings { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.yg-hold-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.yg-hold-bal { font-family: "Cinzel", serif; color: #e6dcc6; font-size: 15px; letter-spacing: .04em; }
.yg-hold-bal b { color: var(--gold); }
.yg-hold-usd { color: #8fd49a; font-weight: 700; font-size: 14px; }
.yg-hold-price { font-size: 12px; }
.yg-hold-price #ygHoldPrice { color: var(--gold); font-weight: 600; }
.yg-list-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 8px; }
.yg-list-row select { flex: 2; min-width: 180px; }
.yg-list-row input { flex: 1; min-width: 140px; }
.yg-list-row button { flex: 0 0 auto; }
.yg-split-hint { font-size: 11.5px; line-height: 1.5; }
.yg-split-hint b { color: var(--gold); }
.cardc .yg-split { font-size: 9.5px; color: #9a8552; margin-top: 3px; letter-spacing: .01em; }
.yg-reserved { position: absolute; top: 6px; left: 6px; background: rgba(10,8,6,.85); border: 1px solid var(--gold-dim);
  color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 1px 6px; border-radius: 7px; }

/* ── 🔄 card-for-card trading ── */
.trade-fee-note { font-size: 12px; line-height: 1.55; color: #e6dcc6; background: rgba(255,77,77,.07);
  border: 1px solid #ff4d4d44; border-radius: 9px; padding: 9px 12px; margin: 4px 0 12px; }
.trade-fee-note b { color: var(--gold); }
.trade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.trade-col { display: flex; flex-direction: column; gap: 6px; }
.trade-lbl { font-size: 11px; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; font-weight: 700; }
.trade-cp-row, .trade-add-row { display: flex; gap: 6px; }
.trade-cp-row input, .trade-add-row input, .trade-add-row select { flex: 1; min-width: 0; }
.trade-cp-row button, .trade-add-row button { flex: 0 0 auto; }
.trade-search-results { position: relative; border: 1px solid var(--gold-dim); border-radius: 8px; background: #14110b;
  max-height: 220px; overflow: auto; margin-top: -2px; }
.trade-sr { padding: 6px 10px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid #6b543033; color: #e6dcc6; }
.trade-sr:last-child { border-bottom: none; }
.trade-sr:hover { background: rgba(231,198,107,.12); }
.trade-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.trade-chip { position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px;
  background: linear-gradient(165deg, #15120c, #0d0b08); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; font-size: 12px; }
.trade-chip .tch-art { width: 22px; height: 32px; object-fit: cover; border-radius: 3px; }
.trade-chip .tch-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tch-x { padding: 1px 5px; font-size: 11px; line-height: 1; background: rgba(0,0,0,.5); border: 1px solid var(--p1); border-radius: 6px; color: #ffb0b0; }
.tch-x:hover { background: var(--p1); color: #1a1408; }

.trade-divider { margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--gold-dim);
  font-family: "Cinzel", serif; color: var(--gold); letter-spacing: .08em; font-size: 13px; }
.trade-block { border: 1px solid var(--gold-dim); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: linear-gradient(165deg, rgba(26,22,16,.7), rgba(13,11,8,.7)); }
.trade-block.accepted { border-color: var(--gold); box-shadow: 0 0 14px rgba(231,198,107,.12); }
.trade-block.executed { opacity: .72; }
.trade-block.cancelled, .trade-block.expired { opacity: .55; }
.trade-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.trade-who { font-size: 12px; color: #b8a478; }
.trade-status { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 2px 9px; border-radius: 9px; border: 1px solid var(--gold-dim); }
.trade-status.st-open { color: #cdb98a; }
.trade-status.st-acc { color: #1a1408; background: linear-gradient(180deg, #f0d488, #c8a04a); border-color: var(--gold); }
.trade-status.st-done { color: #8fd49a; border-color: #8fd49a66; }
.trade-status.st-dead { color: #9a8552; }
.trade-sides { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trade-side { flex: 1; min-width: 150px; }
.trade-side-lbl { font-size: 10px; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; margin-bottom: 5px; }
.trade-card-row { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-card { width: 58px; text-align: center; }
.trade-card img { width: 58px; aspect-ratio: 59/86; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); border-left-width: 3px; }
.trade-card.r-ultra img { border-color: var(--gold); } .trade-card.r-god img { border-color: #ff4d4d; }
.trade-card .trc-name { display: block; font-size: 9px; line-height: 1.1; margin-top: 3px; color: #cdb98a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-swap { font-size: 22px; color: var(--gold); flex: 0 0 auto; }
.trade-fee { font-size: 11.5px; color: #e6dcc6; margin-top: 10px; background: rgba(255,77,77,.07);
  border: 1px solid #ff4d4d33; border-radius: 7px; padding: 5px 9px; }
.trade-fee b { color: var(--gold); }
.trade-burnstate { font-size: 12px; color: #ffe9b0; margin-top: 8px; font-style: italic; }
.trade-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.trade-act { padding: 7px 16px; font-size: 13px; }

/* ── God jackpot meter ── */
.jackpot { margin: 12px 0; padding: 12px 14px; background: linear-gradient(90deg, rgba(60,12,12,.8), rgba(26,19,12,.85));
  border: 1px solid #ff4d4d55; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,100,100,.08); }
.jp-row { display: flex; justify-content: space-between; align-items: center; }
.jp-name { font-weight: 700; color: #ff6b6b; letter-spacing: .03em; font-family: "Cinzel", serif; }
.jp-pct { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.jp-bar { height: 8px; background: #16120b; border-radius: 5px; overflow: hidden; margin: 7px 0 5px; }
.jp-fill { height: 100%; background: linear-gradient(90deg, #ff4d4d, var(--gold)); transition: width .4s ease; box-shadow: 0 0 10px #ff4d4d88; }
.jp-sub { font-size: 11px; color: #9a8552; }
.jp-done { color: var(--gold); font-weight: 700; text-align: center; }

/* filter/sort bar */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.filterbar input { flex: 1; min-width: 140px; }
.filterbar select { min-width: 110px; }

/* pack serial number — every pack is numbered, forever */
.packserial { width: 100%; text-align: center; color: var(--gold); letter-spacing: .18em; font-size: 13px; margin: 6px 0 2px; }
.packserial b { font-size: 16px; }

/* ── sealed packs shelf → THE VAULT's lit rail ──
   a single horizontal SHELF — scroll sideways, never clip a card mid-row. A gold
   "rail" line runs under the row (::after) and each pack stands in its own pool of
   light, so the sealed goods read like merchandise lit on a treasury shelf. */
.mypacks { position: relative; display: flex; gap: 12px; flex-wrap: nowrap; margin: 10px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
/* the rail: a thin lit gold ledge running along the base of the shelf. Drawn as a
   bottom border-image gradient so it tracks the full shelf width (incl. when the
   row scrolls) and adds no box. */
.mypacks {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(231,198,107,.5) 12%, var(--gold) 50%, rgba(231,198,107,.5) 88%, transparent) 1;
}
.sealedpack { position: relative; width: 104px; flex: 0 0 auto; text-align: center; scroll-snap-align: start; }
/* the pool of light each pack stands in */
.sealedpack::after {
  content: ""; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  width: 84%; height: 26px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(231,198,107,.22), transparent 70%);
  opacity: .65; transition: opacity .15s ease, width .15s ease;
}
.sealedpack:hover::after { opacity: 1; width: 96%; }
.sealedpack .sp-img { position: relative; width: 100%; aspect-ratio: 100/183; border-radius: 7px;
  background: url("img/ui/pack_yugioh.png") center/cover, radial-gradient(circle at 50% 40%, #6b4a8f, #2f1d4a); border: 2px solid var(--gold);
  box-shadow: 0 6px 16px rgba(0,0,0,.6), inset 0 0 14px rgba(231,198,107,.12); display: flex; align-items: flex-end; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease; }
.sealedpack:hover .sp-img { transform: translateY(-5px) rotate(-1.5deg); box-shadow: 0 14px 28px rgba(0,0,0,.75), 0 0 22px rgba(231,198,107,.4); }
.sealedpack .sp-serial { background: rgba(10,8,6,.88); color: var(--gold); font-weight: 800; font-size: 12px;
  padding: 2px 8px; border-radius: 8px 8px 0 0; letter-spacing: .06em; }
.sealedpack .sp-vic { position: absolute; top: 4px; right: 6px; font-size: 15px; }
.sealedpack .sp-btns { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.sealedpack .sp-btns button { padding: 4px 10px; font-size: 12px; }
.sealedpack.listed .sp-img { filter: grayscale(.4); border-color: var(--muted); }
.sealedpack .sp-price { font-size: 11px; color: var(--gold); margin-top: 4px; }

/* sealed-pack market */
.packmarket { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mkt-row { display: flex; align-items: center; gap: 14px; padding: 9px 14px; background: linear-gradient(165deg, #14110b, #0d0b08);
  border: 1px solid var(--line); border-radius: 10px; transition: border-color .12s ease, transform .12s ease; }
.mkt-row:hover { border-color: var(--gold-dim); transform: translateX(3px); }
.mkt-row .mkt-price { margin-left: auto; color: var(--gold); font-weight: 800; }
.mkt-packimg { width: 26px; border-radius: 3px; border: 1px solid var(--gold-dim); }

/* ── pack-opening ceremony ── */
#ceremony { position: fixed; inset: 0; z-index: 90; background: radial-gradient(900px 600px at 50% 35%, rgba(70,50,15,.5), rgba(8,6,3,.97));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: cerIn .3s ease; }
@keyframes cerIn { from { opacity: 0; } to { opacity: 1; } }
.cer-serial { color: var(--gold); letter-spacing: .25em; font-size: 15px; font-family: "Cinzel", serif; }
.cer-serial b { font-size: 20px; }
.cer-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 380px; justify-content: center; }
.cer-hint { color: #cdb98a; letter-spacing: .3em; font-size: 11px; animation: hintPulse 1.6s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.cer-pack { cursor: pointer; text-align: center; }
.cer-pack img { width: 200px; border-radius: 8px; border: 2px solid var(--gold);
  box-shadow: 0 0 40px rgba(231,198,107,.35), 0 18px 50px rgba(0,0,0,.8); animation: packBreathe 2.2s ease-in-out infinite; margin-bottom: 14px; }
@keyframes packBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.cer-pack:hover img { box-shadow: 0 0 60px rgba(231,198,107,.6), 0 18px 50px rgba(0,0,0,.8); }
.cer-pack.torn img { animation: packTear .6s ease forwards; }
@keyframes packTear { 20% { transform: rotate(-4deg) scale(1.06); } 45% { transform: rotate(4deg) scale(1.1); }
  70% { transform: rotate(-2deg) scale(1.15); filter: brightness(2.4); } 100% { transform: scale(1.6); opacity: 0; filter: brightness(3); } }
.cer-cards { display: flex; gap: 14px; }
.cer-card { width: 128px; cursor: pointer; perspective: 700px; animation: cardSlide .4s ease backwards; }
@keyframes cardSlide { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.cer-flip { position: relative; transform-style: preserve-3d; transition: transform .5s ease; aspect-ratio: 59/86; }
.cer-card.revealed .cer-flip { transform: rotateY(180deg); }
.cer-back, .cer-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 7px; }
.cer-back { background: url("img/ui/back.jpg") center/cover, #2f1d4a; border: 2px solid #6b4aa8; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.cer-card:hover .cer-back { border-color: var(--gold); box-shadow: 0 8px 26px rgba(231,198,107,.35); }
.cer-front { transform: rotateY(180deg); background: #16131f; border: 2px solid var(--line); padding: 6px; text-align: center; overflow: hidden; }
.cer-front .cn { font-size: 11px; font-weight: 700; margin-top: 4px; }
.cer-card.revealed.r-rare .cer-front { border-color: #4aa3ff; box-shadow: 0 0 18px rgba(74,163,255,.5); }
.cer-card.revealed.r-super .cer-front { border-color: #b06bff; box-shadow: 0 0 24px rgba(176,107,255,.65); }
.cer-card.revealed.r-ultra .cer-front { border-color: var(--gold); box-shadow: 0 0 34px rgba(231,198,107,.85); animation: ultraGlow 1.4s ease-in-out infinite; }
@keyframes ultraGlow { 0%,100% { box-shadow: 0 0 24px rgba(231,198,107,.6); } 50% { box-shadow: 0 0 44px rgba(231,198,107,1); } }
.cer-card.revealed.r-god .cer-front { border-color: #ff4d4d; box-shadow: 0 0 50px rgba(255,77,77,1); animation: godGlow .8s ease-in-out infinite; }
@keyframes godGlow { 0%,100% { box-shadow: 0 0 30px rgba(255,77,77,.7); } 50% { box-shadow: 0 0 70px rgba(255,77,77,1); } }
#ceremony.godmode { background: radial-gradient(900px 600px at 50% 35%, rgba(120,10,10,.7), rgba(10,2,2,.97)); }
.cer-god { color: #ff4d4d; font-size: 22px; font-weight: 900; letter-spacing: .2em; animation: godBanner .6s ease infinite alternate; }
@keyframes godBanner { from { transform: scale(1); text-shadow: 0 0 16px #ff4d4d; } to { transform: scale(1.06); text-shadow: 0 0 34px #ff4d4d; } }
#ceremony.shake { animation: cerShake .45s ease; }
@keyframes cerShake { 0%,100% { transform: none; } 25% { transform: translate(-7px, 4px); } 50% { transform: translate(6px, -5px); } 75% { transform: translate(-4px, -3px); } }
.cer-close { padding: 12px 30px; font-size: 15px; font-weight: 800; letter-spacing: .12em; background: linear-gradient(180deg, #f0d488, #c8a04a); color: #1a1408; border: none; border-radius: 24px; cursor: pointer;
  box-shadow: 0 8px 26px rgba(231,198,107,.35); }
.cer-close:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cer-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cer-build { padding: 12px 22px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--gold); text-decoration: none;
  border: 1px solid var(--gold-dim); border-radius: 24px; background: linear-gradient(135deg, rgba(30,26,18,.92), rgba(14,12,8,.92)); transition: border-color .14s, transform .14s; }
.cer-build:hover { border-color: var(--gold); transform: translateY(-1px); }
/* gold-themed prompt dialog (ygPrompt) — replaces native window.prompt */
.yg-prompt-box { min-width: 330px; max-width: 440px; }
.yg-prompt-sub { color: #a9966a; font-size: 13px; line-height: 1.5; margin: 4px 0 16px; }
.yg-prompt-label { display: block; font-size: 11px; letter-spacing: .1em; color: #9a8552; text-transform: uppercase; margin-bottom: 7px; }
.yg-prompt-input { display: flex; align-items: center; gap: 9px; padding: 0 13px; border-radius: 11px;
  background: linear-gradient(160deg, #1a1610, #100d08); border: 1px solid var(--gold-dim); transition: border-color .14s; }
.yg-prompt-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(231,198,107,.12); }
.yg-prompt-input input { flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: #f0e6cc; font-size: 19px; font-weight: 700; padding: 13px 0; font-variant-numeric: tabular-nums; }

/* ── card peek: hover any owned card → big art + readable text ── */
#cardPeek { position: fixed; z-index: 80; width: 470px; max-width: calc(100vw - 28px); display: flex; gap: 16px; padding: 16px;
  background: linear-gradient(160deg, rgba(34,28,16,.98), rgba(15,12,8,.98));
  border: 2px solid var(--gold); border-radius: 14px; pointer-events: none;
  box-shadow: 0 18px 55px rgba(0,0,0,.85), 0 0 30px rgba(231,198,107,.28); }
#cardPeek.hidden { display: none; }
#cardPeek .pk-art { width: 168px; aspect-ratio: 59/86; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--gold-dim); box-shadow: 0 6px 18px rgba(0,0,0,.6); flex: 0 0 auto; align-self: flex-start; }
#cardPeek .pk-body { min-width: 0; flex: 1; }
#cardPeek .pk-name { font-family: "Cinzel", serif; font-weight: 700; font-size: 19px; color: var(--gold); line-height: 1.2; margin-bottom: 6px; }
#cardPeek .pk-line { font-size: 13px; color: #cdb98a; margin-bottom: 10px; }
#cardPeek .pk-line b { color: #efe6cf; }
#cardPeek .pk-atk { color: var(--atk, #ff9d6b); font-weight: 700; }
#cardPeek .pk-def { color: var(--def, #8fd49a); font-weight: 700; }
/* bigger, higher-contrast, faster to read — shows the FULL effect (no clip) */
#cardPeek .pk-desc { font-family: "Crimson Text", serif; font-size: 16.5px; line-height: 1.5; color: #f3ecd8;
  background: rgba(232,220,192,.08); border: 1px solid rgba(231,198,107,.2); border-radius: 8px; padding: 11px 13px;
  white-space: pre-wrap; }
#cardPeek .pk-desc.dim { color: #9a8552; font-style: italic; }

/* ── profile editor ── */
#profileEd, .pe-overlay { position: fixed; inset: 0; z-index: 96; background: rgba(5,4,3,.9); display: flex; align-items: center; justify-content: center; }
.pe-box { width: min(560px, 94vw); background: linear-gradient(160deg, #221c10, #110d08); border: 2px solid var(--gold); border-radius: 16px; padding: 22px 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,.8); }
.pe-box h3 { margin: 0 0 14px; color: var(--gold); letter-spacing: .15em; text-align: center; font-family: "Cinzel", serif; }
.pe-row { display: flex; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(231,198,107,.12); color: #efe6cf; font-size: 13.5px; }
.pe-row > span { min-width: 110px; }
.pe-row input { flex: 1; }
.pe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; flex: 1; }
.pe-av { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform .1s ease; }
.pe-av:hover { border-color: var(--gold-dim); transform: scale(1.06); }
.pe-av.sel { border-color: var(--gold); box-shadow: 0 0 12px rgba(231,198,107,.5); }
.pe-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

/* ── pay toggle: $YUGIOH (cheapest) vs SOL (+10%) ── */
.yg-pay-box { width: min(440px, 94vw); }
.yg-pay-sub { text-align: center; color: #cdbf9c; font-size: 13px; margin-bottom: 16px; }
.yg-pay-sub b { color: var(--gold); }
.yg-pay-opts { display: flex; flex-direction: column; gap: 12px; }
.yg-pay-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer; transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease; }
.yg-pay-opt:hover { transform: translateY(-2px); }
.yg-pay-opt.token { background: linear-gradient(150deg, #2a2412, #16120b); border: 1px solid var(--gold); color: #f3ead2; }
.yg-pay-opt.token:hover { box-shadow: 0 10px 28px rgba(231,198,107,.3); }
.yg-pay-opt.sol { background: linear-gradient(150deg, #1a1726, #110e1a); border: 1px solid #5a4a8c; color: #d9d2ee; }
.yg-pay-opt.sol:hover { box-shadow: 0 10px 28px rgba(124,92,255,.25); border-color: #7c5cff; }
.yg-pay-opt .yp-main { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.yg-pay-opt .yp-sub { font-size: 11px; color: #a99c7d; }
.yg-pay-opt.sol .yp-sub { color: #948bb8; }
.yg-pay-opt .yp-tag { position: absolute; top: 10px; right: 12px; font-size: 9.5px; font-weight: 900; letter-spacing: .12em;
  padding: 2px 7px; border-radius: 6px; background: var(--gold); color: #1a1408; }
.yg-pay-opt .yp-tag.premium { background: #7c5cff; color: #15131f; }
.yg-pay-box .pay-status { text-align: center; }