/* Header controls, profile menu, profile sections, feed and referral program. Loaded after account.css. */

header{position:relative;z-index:30;border-bottom:0}
/* The header rule fades into the dark at both ends. */
header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#ffffff24 22%,#ffffff24 78%,transparent)}
/* ===== Brand ===== */
.brand{white-space:nowrap}
.brand-icon{width:30px;height:30px;color:var(--accent);flex:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 35%,transparent));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-icon{transform:rotate(-8deg) translateY(-1px)}
.ui-icon{width:18px;height:18px;flex:none}

/* ===== How it works ===== */
.help-button{justify-self:center;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 18px 10px 12px;border-radius:40px;border:1px solid #ffffff1c;background:linear-gradient(180deg,#ffffff08,#ffffff02);color:#d8d0de;font-size:13px;font-weight:550;transition:border-color .25s,color .25s,box-shadow .25s,background .25s}
.help-button .ui-icon{color:var(--accent);width:19px;height:19px}
/* On hover only the outline takes the accent colour — no glow. */
.help-button:hover{color:var(--text);border-color:var(--accent)}

/* ===== Profile button + menu ===== */
.account-menu{position:relative}
.profile-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;background:transparent;border:1px solid #ffffff38;color:#efe9f3;transition:border-color .25s,color .25s,transform .2s}
.profile-button .ui-icon{width:21px;height:21px}
.profile-button:hover,.profile-button[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.menu{position:absolute;top:calc(100% + 12px);right:0;z-index:20;width:260px;padding:8px;border-radius:14px;border:1px solid #ffffff1c;background:#15111bf2;backdrop-filter:blur(14px);box-shadow:0 24px 60px -20px #000c;transform-origin:top right;animation:menuIn .18s cubic-bezier(.2,.8,.2,1)}
.menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.menu-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.menu-who{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-balance{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:14px}
.menu [role=menuitem],.profile-nav-list button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:9px;background:none;text-align:left;font-size:13px;color:#d6cfdc;transition:background .15s,color .15s}
.menu [role=menuitem] .ui-icon,.profile-nav-list .ui-icon{color:#9d93a7;transition:color .15s}
.menu [role=menuitem]:hover,.menu [role=menuitem]:focus-visible{background:#ffffff0c;color:var(--text);outline:none}
.menu [role=menuitem]:hover .ui-icon,.menu [role=menuitem]:focus-visible .ui-icon{color:var(--accent)}
.menu-divider{display:block;height:1px;background:var(--line);margin:6px 4px}
.menu-logout:hover,.nav-logout:hover{color:#f0b6c9!important}
.menu-logout:hover .ui-icon,.nav-logout:hover .ui-icon{color:#f0b6c9!important}

/* ===== Profile layout ===== */
.profile{max-width:1240px}
.profile-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start;margin-top:10px}
.profile-nav{position:sticky;top:24px}
.profile-nav-toggle{display:none}
.profile-nav-list{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:14px;border:1px solid #ffffff12;background:#110d16cc;backdrop-filter:blur(10px)}
.profile-nav-list button:hover{background:#ffffff0a;color:var(--text)}
.profile-nav-list button[aria-current="page"]{background:#ffffff10;color:var(--text)}
.profile-nav-list button[aria-current="page"] .ui-icon{color:var(--accent)}
.profile-content{min-width:0;animation:enter .45s ease}
.section-title{margin-bottom:28px}
.section-title h2{font:400 clamp(34px,4vw,46px)/1.15 Prata,Georgia,serif;margin:12px 0 8px;letter-spacing:-1px}
.section-title p{font-size:14px;margin:0}
/* Both columns end on one line: the last panel on the right stretches to the height of the left one. */
.profile-grid{margin-top:18px;align-items:stretch}
.stack{display:grid;gap:18px;grid-template-rows:auto 1fr}
.balance-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.balance-strip .big-balance{margin:10px 0 0}
.balance-strip .primary{min-width:0}
.wallet{grid-row:auto}
.wallet .big-balance{margin:0 0 24px}
.wallet .topup{margin:26px 0 14px}
.package.featured{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.package-badge{position:absolute;top:10px;left:14px;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}

/* ===== Feed ===== */
.feed{list-style:none;margin:0;padding:0;display:grid;gap:16px;container-type:inline-size}
.feed .empty{color:var(--muted);text-align:center;padding:40px}
/* Narrow: tag, time and price on one line; the question under them; three big cards centred;
   a full-width green button. */
.feed-item{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "q" "cards" "btn";gap:14px;padding:22px 24px}
.feed-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12px;color:var(--muted)}
.feed-deck{padding:5px 12px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.5px}
.feed-item .feed-q{grid-area:q;margin:0 0 6px;text-align:left;font:400 21px/1.3 Prata,Georgia,serif}
.feed-cost{display:inline-flex;align-items:center;gap:4px;color:#d9d1df;font-weight:700}
.feed-cost .shard-icon{width:14px;height:14px}
.feed-cards{grid-area:cards;display:flex;justify-content:center;gap:clamp(10px,3cqw,22px)}
.feed-card{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 1 150px;min-width:0;font-size:13px;color:#d4cbdb;text-align:center}
.collect-card.small{width:100%;box-shadow:3px 3px 0 #34303a,5px 7px 0 #1a181e,8px 16px 24px #0006;container-type:inline-size}
.collect-card.small .front-id{font-size:28cqw}
.collect-card.small .collect-name{font-size:10cqw;margin-top:5cqw}
.collect-card.small .card-number{font-size:6cqw;top:7cqw;left:7cqw}
.collect-card.small .placeholder-label{font-size:3.6cqw;bottom:8cqw}
.feed-item .feed-open{grid-area:btn;width:100%;min-width:0;margin-top:4px;justify-content:center;text-align:center;padding:15px 20px;font-size:14px}
.feed+.center{margin-top:22px}
/* Wide: tag/time/price, the question and the button on the left (the button reaches the cards),
   the three cards on the right. */
@container (min-width:760px){
  .feed-item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta cards" "q cards" "btn cards";grid-template-rows:auto 1fr auto;align-items:start;column-gap:36px;row-gap:12px;padding:26px 30px}
  .feed-item .feed-q{font-size:24px}
  .feed-item .feed-open{align-self:end}
  .feed-cards{width:min(520px,56cqw)}
}

/* ===== Referral ===== */
.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 22px;padding:16px 16px 16px 22px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.code{font:700 30px Manrope,Arial,sans-serif;letter-spacing:6px;color:var(--accent)}
.icon-button{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;border:1px solid #ffffff22;background:#ffffff06;transition:border-color .2s,color .2s}
.icon-button:hover{border-color:var(--accent);color:var(--accent)}
.link-row{display:flex;gap:10px}
.link-row input{font-size:13px!important;color:#c3bacb!important}
.link-row .secondary{white-space:nowrap}
.ref-steps{margin:24px 0 0;padding-left:20px;display:grid;gap:10px;font-size:13px;color:#c3bacb;line-height:1.6}
.ref-steps b{color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats b{font:400 32px Prata,Georgia,serif}
.stats span{font-size:11px;color:var(--muted)}
.ref-apply .promo-form{margin-top:14px}
.ref-apply .muted{font-size:13px;margin:12px 0 0}

/* ===== Mobile ===== */
@media(max-width:900px){
  .profile-layout{grid-template-columns:1fr;gap:20px}
  .profile-nav{position:sticky;top:10px;z-index:15}
  .profile-nav-toggle{backdrop-filter:blur(12px);box-shadow:0 12px 30px -16px #000}
  .profile-nav-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 16px;border-radius:12px;border:1px solid #ffffff1f;background:#15111be6;font-size:14px;font-weight:600;color:var(--text)}
  .profile-nav-toggle .ui-icon:first-child{color:var(--accent)}
  .profile-nav-toggle .ui-icon:last-child{margin-left:auto;transition:transform .25s}
  .profile-nav-toggle span{margin-right:auto}
  .profile-nav.open .profile-nav-toggle .ui-icon:last-child{transform:rotate(180deg)}
  .profile-nav-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);background:#15111bf5;box-shadow:0 24px 60px -20px #000c;animation:menuIn .18s ease}
  .profile-nav.open .profile-nav-list{display:flex}
}
@media(max-width:700px){
  header{gap:10px}
  .brand{font-size:15px;gap:7px}
  .brand-icon{width:24px;height:24px}
  .brand-dot{display:none}
  .help-button{justify-self:start;padding:9px}
  .help-label{display:none}
  .profile-button{width:38px;height:38px}
  .menu{position:fixed;top:72px;left:12px;right:12px;width:auto}
  .balance-strip .primary{width:100%}
  .stats b{font-size:26px}
  .link-row{flex-direction:column}
  .code{font-size:24px;letter-spacing:4px}
}
@media(prefers-reduced-motion:reduce){.menu,.profile-nav-list,.profile-content{animation:none}}

.free-hint{display:flex;align-items:center;gap:10px;margin:-10px 0 24px;padding:12px 16px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);font-size:13px;color:#d9d1df}
.free-hint::before{content:'✦';color:var(--accent)}
.free-hint.done{border-style:solid;color:var(--accent)}
.free-hint.done::before{content:none}

/* Buy page: promo code and ways to earn Shards for free. */
.buy-extras{margin-top:18px;grid-template-columns:1fr}
.bonus-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.bonus-list li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid #ffffff12;background:#ffffff04}
.bonus-ico{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:16px}
.bonus-ico .ui-icon{width:20px;height:20px}
.bonus-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bonus-text b{font-size:14px;font-weight:600}
.bonus-text small{font-size:12px;color:var(--muted)}
.bonus-list .secondary{padding:9px 14px;font-size:12px}

/* Promo code: when the panel is narrow (tablets), the button drops under the field at full width. */
.promo-form{flex-wrap:wrap}
.promo-form input{flex:1 1 190px;min-width:0}
.promo-form .secondary{flex:1 0 auto}

.topup-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.topup-head .field-label{margin:0}
.swap-unit{width:34px;height:34px}
.swap-unit svg{width:18px;height:18px}
.topup .pay{justify-content:center;text-align:center}

.tg-bot{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-width:0;margin-top:18px;padding:15px 20px;font-size:14px}
.tg-bot .ui-icon{width:20px;height:20px}
.tg-bot:disabled{opacity:.45}

/* Collection cards have sharp corners, like printed cards. */
.collect-card,.collect-card.large,.collect-card.small,.collect-card::after,.viewer-card,.viewer-card .collect-card.large{border-radius:0}

/* ===== Card viewer: the deck on a 3D arc ===== */
.card-viewer{--x:34%;--w:clamp(180px,19vw,280px);--step:calc(var(--w) * 1.06);
  position:fixed;top:var(--viewer-top,0);left:0;right:0;bottom:0;z-index:25;width:100%;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at var(--x) 52%,#1e1727,#09070c 72%);color:var(--text)}
.viewer-open,.viewer-open body{overflow:hidden}
.card-viewer.anime{--accent:#e9caff}
.viewer-stage{position:absolute;inset:0;perspective:1400px;z-index:1}
.viewer-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.card-viewer.webgl .viewer-card{display:none}
/* With WebGL (flag set in <head>) the living light is drawn by the canvas: the CSS glow would show for a
   moment while the 3D viewer loads. Without WebGL (or if it fails: .flat) the glow stays. */
.webgl .card-viewer:not(.flat){background:#09070c}
.viewer-card{position:absolute;left:var(--x);top:50%;width:var(--w);padding:0;background:none;border-radius:14px;cursor:pointer;
  transform:translate(-50%,-50%) translateX(calc(var(--d) * var(--step) - var(--d) * var(--ad) * 6px)) translateY(calc(var(--ad) * var(--ad) * 16px + var(--ad) * 34px)) rotate(calc(var(--d) * 14deg)) rotateX(calc(var(--ad) * 6deg)) scale(calc(1 - min(var(--ad),4) * .11));
  filter:brightness(.5) saturate(.75);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .45s,opacity .45s}
.viewer-card .collect-card.large{width:100%;border-radius:14px}
.viewer-card:hover{filter:brightness(.7) saturate(.85)}
.viewer-card.current{filter:none;cursor:default}
.viewer-card.current .collect-card{box-shadow:3px 3px 0 #34303a,6px 9px 0 #1a181e,0 30px 70px -20px color-mix(in srgb,var(--accent) 55%,transparent)}
.viewer-card.current .collect-card.locked{box-shadow:3px 3px 0 #2a2230,6px 9px 0 #17121c,0 30px 70px -24px #0009}
.viewer-card.far{opacity:0;pointer-events:none}
/* Darkness on the right, like on the home screen, so the text stays readable over the next cards. */
/* Starts right of the selected card, so the card itself is never shaded. */
/* A long, soft darkening that starts just past the selected card's edge and never falls on it. */
.viewer-shade{position:absolute;top:0;right:0;bottom:0;left:var(--edge,50%);z-index:2;pointer-events:none;
  /* Eased ramp measured only in pixels from the card's edge (no % stops, so no hard step on narrow screens):
     barely there by the card, already dense where the text starts (--ramp), fully dark further right. */
  background:linear-gradient(90deg,
    #09070c00 0,#09070c0d calc(var(--ramp,110px) * .2),#09070c33 calc(var(--ramp,110px) * .4),#09070c66 calc(var(--ramp,110px) * .6),
    #09070c94 calc(var(--ramp,110px) * .8),#09070cb3 var(--ramp,110px),#09070cc9 calc(var(--ramp,110px) + 90px),
    #09070cdb calc(var(--ramp,110px) + 200px),#09070ceb calc(var(--ramp,110px) + 360px),#09070cf7 calc(var(--ramp,110px) + 560px),#09070c calc(var(--ramp,110px) + 800px))}
/* Placed from JS (placeViewer): right next to the card, level with its centre. */
.viewer-text{position:absolute;z-index:3;left:var(--tx,57%);top:var(--ty,50%);transform:translateY(-50%);width:var(--tw,440px);max-width:calc(100% - var(--tx,57%) - 24px)}
.viewer-text.show{animation:viewerText .45s ease}
@keyframes viewerText{from{opacity:0;transform:translateY(calc(-50% + 12px))}}
.viewer-text h2{font:400 clamp(38px,4.4vw,60px)/1.1 Prata,Georgia,serif;letter-spacing:-1px;margin:14px 0 10px}
.viewer-desc{font-size:16px;line-height:1.8;color:#c9c0d0;margin:0}
.viewer-arrow{position:absolute;z-index:4;top:var(--ay,76%);width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff2a;background:#15111bcc;color:var(--text);transition:border-color .2s,color .2s,opacity .2s}
.viewer-arrow svg{width:20px;height:20px;display:block}
.viewer-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.viewer-arrow:disabled{opacity:.3;cursor:default}
.viewer-arrow.prev{left:calc(var(--cx,34%) - 58px)}
.viewer-arrow.next{left:calc(var(--cx,34%) + 10px)}
/* Round close button, right edge aligned with the profile button in the header. */
.close-round,.card-viewer .viewer-close{position:absolute;z-index:5;top:22px;right:5.4%;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff38;background:transparent;color:#efe9f3;font-size:26px;line-height:1;transition:border-color .25s,color .25s,transform .25s}
.close-round:hover,.card-viewer .viewer-close:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}

@media(max-width:700px){
  .card-viewer{--x:50%;--w:min(44vw,200px);--step:calc(var(--w) * .95)}
  .viewer-card{top:34%;transform:translate(-50%,-50%) translateX(calc(var(--d) * var(--step))) translateY(calc(var(--ad) * var(--ad) * 10px + var(--ad) * 20px)) rotate(calc(var(--d) * 13deg)) scale(calc(1 - min(var(--ad),4) * .12))}
  /* Phone: a long, eased fade from the bottom edge of the selected card down behind the text. */
  .viewer-shade{left:0;right:0;top:calc(var(--ty,60%) - 110px);bottom:0;background:linear-gradient(180deg,
    #09070c00 0,#09070c08 30px,#09070c1a 60px,#09070c38 90px,#09070c66 120px,#09070c94 150px,#09070cbd 185px,#09070cdb 225px,#09070cf0 270px,#09070c 340px)}
  .viewer-text{left:24px;right:24px;top:var(--ty,60%);width:auto;transform:none;max-width:none;text-align:center}
  @keyframes viewerText{from{opacity:0;transform:translateY(12px)}}
  .viewer-text h2{font-size:34px}
  .viewer-desc{font-size:14px;line-height:1.7}
  .viewer-arrow{top:var(--ay,80%);width:44px;height:44px}
  .viewer-arrow.prev{left:calc(50% - 54px)}
  .viewer-arrow.next{left:calc(50% + 10px)}
  .close-round,.card-viewer .viewer-close{top:14px;right:6%;width:38px;height:38px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){.viewer-card{transition:none}.viewer-text.show{animation:none}}

/* Buy page at full width: the field takes the row, the button keeps its own size;
   on narrow phones the button drops under the field at full width. Bonus buttons share one width. */
.buy-extras .promo-form input{flex:1 1 260px}
.buy-extras .promo-form .secondary{flex:0 0 auto;min-width:170px}
.bonus-list .secondary{min-width:118px;text-align:center;justify-content:center}
@media(max-width:520px){.buy-extras .promo-form .secondary{flex:1 1 100%}.bonus-list .secondary{min-width:0}}

/* Daily wheel: the button label alone, centred. */
.primary.spin{justify-content:center;text-align:center}

/* Card with an illustration: the image fills the card edge to edge. */
.collect-card.has-art{background-size:cover;background-position:center;background-color:#09070c;border-color:#ffffff1f}

/* Collection viewer: the anime card's character and title, a quiet line between the name and the text. */
.viewer-assoc{margin:-4px 0 12px;font-size:13px;letter-spacing:.02em;color:color-mix(in srgb,var(--accent) 70%,#a29aa9)}

/* Spread results: button labels centred (the price layout of .primary does not apply here). */
.result-actions button{justify-content:center;text-align:center}

/* Collection: a card opened in the last 24 hours glows softly along its edges. */
.collect-slot.fresh .collect-card{outline:1px solid color-mix(in srgb,var(--accent) 75%,transparent);outline-offset:0;
  animation:freshGlow 2.4s ease-in-out infinite}
@keyframes freshGlow{
  0%,100%{box-shadow:3px 3px 0 #34303a,5px 8px 0 #1a181e,0 0 10px 1px color-mix(in srgb,var(--accent) 35%,transparent)}
  50%{box-shadow:3px 3px 0 #34303a,5px 8px 0 #1a181e,0 0 26px 4px color-mix(in srgb,var(--accent) 60%,transparent)}}
@media(prefers-reduced-motion:reduce){.collect-slot.fresh .collect-card{animation:none;box-shadow:0 0 18px 3px color-mix(in srgb,var(--accent) 50%,transparent)}}

/* Opened card without an illustration yet: the shared frame, the number in the top medallion and the
   name on the bottom plaque (positions measured on cards/frame.webp). Sizes follow the card's width. */
.collect-card.framed{container-type:inline-size;background:#0b0a0d url('cards/frame.webp') center/100% 100% no-repeat;border-color:#ffffff1f;color:#f1e2c4}
.collect-card.framed::after{content:none}
.collect-card.framed .frame-num,.collect-card.framed .frame-name{position:absolute;left:50%;transform:translate(-50%,-50%);
  font-family:Prata,Georgia,serif;line-height:1;white-space:nowrap;color:#f1e2c4}
.collect-card.framed .frame-num{top:6.1%;font-size:6.7cqw}
.collect-card.framed .frame-name{top:91.5%;font-size:min(4.7cqw,calc(57cqw / (var(--len) * .8)));letter-spacing:.09em;text-transform:uppercase}

/* Subscription: a card on the buy page and a line under the balance in the profile. */
.panel.subscription{display:flex;align-items:center;gap:24px;margin-bottom:18px;border-color:color-mix(in srgb,var(--accent) 30%,#ffffff14)}
.panel.subscription .sub-info{flex:1;min-width:0}
.panel.subscription h3{margin:6px 0 8px}
.panel.subscription .muted{margin:0;font-size:13px;line-height:1.7}
.panel.subscription .sub-status{margin:10px 0 0;font-size:13px;color:var(--accent)}
.panel.subscription .sub-actions{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.panel.subscription .sub-actions .small{font-size:12px}
.panel.subscription .sub-buy{min-width:0;justify-content:center;white-space:nowrap}
.sub-line{margin:8px 0 0;font-size:13px;color:#c9c0d0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sub-line b{color:var(--accent)}
.sub-line .shard-icon{width:13px;height:13px}
@media(max-width:700px){.panel.subscription{flex-direction:column;align-items:stretch}.panel.subscription .sub-actions{align-items:stretch}.panel.subscription .sub-buy{width:100%}}

/* Number and name centred on the letters themselves (cap height), at the measured centres of the circle
   and the plaque: 92 / 1461 px of 1599 on the empty frame, 80 / 1464 px on the illustrations. */
.collect-card.framed .frame-num,.collect-card.framed .frame-name{text-box:trim-both cap alphabetic}
.collect-card.framed .frame-num{top:5.57%}
.collect-card.framed .frame-name{top:91.6%}
.collect-card.framed.art .frame-num{top:4.82%}
.collect-card.framed.art .frame-name{top:91.72%}
/* Long numerals shrink to stay inside the circle (about 10% of the card width). */
.collect-card.framed .frame-num{font-size:min(6.7cqw,calc(17cqw / var(--nlen,2)))}
/* Per-card medallion position and size (set inline for the few illustrations that need it). */
.collect-card.framed.art .frame-num{top:var(--num-y,4.82%);left:var(--num-x,50%);font-size:calc(min(6.7cqw,calc(17cqw / var(--nlen,2))) * var(--num-s,1))}
/* Illustrations: number and name at the card's measured circle and plaque (set inline from card-art.js). */
.collect-card.framed.art .frame-name{top:var(--name-y,91.72%);left:var(--name-x,50%);
  font-size:calc(min(4.7cqw,calc(57cqw / (var(--len) * .8))) * var(--name-s,1))}

/* Locked card of a deck with an illustrated back: just the back, edge to edge. */
.collect-card.locked.has-back{background-size:100% 100%;background-position:center;background-color:#09070c;border-color:#ffffff1f}
.collect-card.locked.has-back::after{content:none}

/* Tarot cards without an illustration: the cream tarot frame, dark ink, the arcana number at the top of
   the field and the name on the white plaque (centres 150 and 1493 px of 1599 on cards/tarot/frame.webp). */
.collect-card.framed.tarot:not(.art){background:#fdf7e7 url('cards/tarot/frame.webp') center/100% 100% no-repeat;color:#2a241c;border-color:#00000033}
.collect-card.framed.tarot:not(.art) .frame-num,.collect-card.framed.tarot:not(.art) .frame-name{color:#2a241c}
.collect-card.framed.tarot:not(.art) .frame-num{top:9.18%;font-size:min(5.9cqw,calc(17cqw / var(--nlen,2)))}
.collect-card.framed.tarot:not(.art) .frame-name{top:93.64%;font-size:min(5.2cqw,calc(65cqw / (var(--len) * .8)))}
/* Tarot frame text a touch bolder (Prata has one weight), as on the 3D cards. */
.collect-card.framed.tarot:not(.art) .frame-num,.collect-card.framed.tarot:not(.art) .frame-name{color:#1f1a14;-webkit-text-stroke:.035em #1f1a14}

/* Tarot illustration: the number at the top of the picture (light, soft dark shadow), the name on the white
   plaque in dark ink (centres 112 and 1493 px of 1599). */
.collect-card.framed.art.top-num .frame-name{top:93.64%;left:50%;color:#1f1a14;-webkit-text-stroke:.035em #1f1a14;
  font-size:min(4.9cqw,calc(70cqw / (var(--len) * .8)))}
.collect-card.framed.art.top-num .frame-num{top:7.2%;left:50%;color:#fff8e6;-webkit-text-stroke:.14em #1a140e;paint-order:stroke fill;
  font-size:min(7.2cqw,calc(20cqw / var(--nlen,2)));text-shadow:none}
/* A locked card with an illustrated back shows the back at full colour, not dimmed. */
.collect-card.locked.has-back{filter:none;box-shadow:3px 3px 0 #34303a,5px 8px 0 #1a181e,10px 20px 30px #0006}
/* …but a little muted, so opened cards still stand out. */
.collect-card.locked.has-back{filter:saturate(.8) brightness(.82)}