/* crowns-page.css — /crowns, his pick B (10-27, mockups/v2/crowns-options): the quests window beside a player card
   that keeps changing its look, then the four steps. Each quest fills, its reward turns into Claim, Claim is pressed and
   the crowns land in the balance, then the next (his 10-27: "they should all be going to claim... the actual animation
   of clicking claim and the balance getting increased"). The card is the shop's own card (crowns.css .sp-card), dressed
   by looks.js. Home's type roles and headings (home.css, .hm) are shared; everything here is cp-. */
.hm .cp-wrap{max-width:1240px;margin:0 auto}
.hm .cp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;margin-top:10px}
.hm .cp-head h1{margin:0;display:flex;align-items:center;gap:14px;font-size:clamp(40px,3.6vw,54px);line-height:1}
.hm .cp-head h1 .cr-i{color:var(--gold)}
.hm .cp-head .bal{grid-column:2;grid-row:1 / span 3;text-align:right}
.hm .cp-head .bal b{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-family:var(--fig);font-weight:800;font-size:44px;line-height:1;color:var(--gold)}
.hm .cp-head .bal small{display:block;margin-top:6px;font-size:14px;color:var(--dim)}
.hm .cp-head .bal small a{color:var(--accent)}
.hm .cp-lede{grid-column:1;margin:0;font-size:18px;line-height:1.45;color:var(--fg2)}
.hm .cp-head #early{grid-column:1;margin:0;font-family:var(--font-body);font-weight:600;font-variant-caps:small-caps;letter-spacing:var(--track-caps);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--dim)}
.hm .cp-head #early[hidden]{display:none}
.hm .cp-head #early::before{content:"EARLY";display:inline-flex;align-items:center;height:20px;padding:0 7px;font-family:var(--wide);font-weight:800;font-size:11px;letter-spacing:.08em;font-variant-caps:normal;color:var(--ink);background:var(--gold);transform:rotate(-3deg)}
.hm .cp-head #early b{color:var(--fg)}

.hm .cp-b{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}

/* the quests window */
.hm .cp-qp{padding:22px;background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--gold) 12%,transparent),transparent 60%),var(--hm-glass),var(--panel);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:0 18px 50px -24px color-mix(in srgb,var(--gold) 40%,transparent)}
.hm .cp-qp .top{display:flex;align-items:center;gap:10px}
.hm .cp-qp .top .cr-i{color:var(--gold)}
.hm .cp-qp .top b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:18px;text-transform:uppercase;color:var(--fg)}
.hm .cp-qp .top .cp-bal{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--fig);font-weight:800;font-size:20px;color:var(--gold)}
.hm .cp-qp .top .cp-bal.bump{animation:cp-bump .5s var(--hm-curve)}
@keyframes cp-bump{40%{transform:scale(1.15);text-shadow:0 0 14px color-mix(in srgb,var(--gold) 70%,transparent)}}
.hm .cp-qp .hm-dv{margin:14px 0 4px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 65%,transparent),color-mix(in srgb,var(--gold) 12%,transparent) 45%,transparent 80%)}
.hm .cp-qr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line1)}
.hm .cp-qr:last-child{border-bottom:0}
.hm .cp-qr b{display:block;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:14px;text-transform:uppercase;color:var(--fg)}
.hm .cp-qr .hm-sc{font-size:13.5px;color:var(--dim)}
.hm .cp-r{position:relative;display:flex;justify-content:flex-end;align-items:center;min-width:76px;height:26px}
.hm .cp-pay{font-family:var(--fig);font-weight:800;font-size:15px;color:var(--gold)}
.hm .cp-claim{display:none;height:26px;align-items:center;padding:0 12px;font-family:var(--wide);font-weight:800;font-size:11px;letter-spacing:.08em;color:var(--ink);background:var(--gold);transition:transform .12s ease,filter .12s ease}
.hm .cp-got{display:none;font-size:13px;color:var(--mute)}
.hm .cp-fly{position:absolute;right:0;top:0;font-family:var(--fig);font-weight:800;font-size:15px;color:var(--gold);pointer-events:none;animation:cp-fly .8s var(--hm-curve) forwards}
@keyframes cp-fly{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-46px)}}
.hm .cp-bar{grid-column:1/-1;position:relative;height:6px;background:rgba(255,255,255,.08)}
.hm .cp-bar i{position:absolute;inset:0 auto 0 0;width:var(--from,0%);background:var(--gold)}
.hm .cp-qr.fill .cp-bar i{width:100%;transition:width 1.4s var(--hm-curve)}
.hm .cp-qr.done .cp-pay{display:none}
.hm .cp-qr.done .cp-claim{display:inline-flex;animation:cp-pop .35s var(--hm-curve)}
@keyframes cp-pop{from{transform:scale(.6);opacity:0}}
.hm .cp-qr.press .cp-claim{transform:scale(.88);filter:brightness(.8)}
.hm .cp-qr.got .cp-claim{display:none}
.hm .cp-qr.got .cp-got{display:inline;animation:cp-in .3s ease .6s both}
@keyframes cp-in{from{opacity:0}}
.hm .cp-qr.got .cp-bar i{opacity:.35}

/* the card: the shop's own, a new look every few seconds */
.hm .cp-card{padding:18px;background:var(--panel2);border:1px solid var(--line2)}
.hm .cp-card .sp-card{padding:0}
.hm .cp-card .idcard{transform:none;transition:opacity .25s ease,transform .25s ease}
.hm .cp-card .idcard.swap{opacity:0;transform:translateY(6px)}

/* the four steps */
.hm .cp-start{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.hm .cp-start>div{display:grid;align-content:start;gap:4px;padding-left:14px;border-left:2px solid var(--line2)}
.hm .cp-start .n{font-size:22px;color:var(--gold)}
.hm .cp-start b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:14px;text-transform:uppercase;color:var(--fg)}
.hm .cp-start .hm-sc{font-size:14px;color:var(--dim)}
.hm .cp-start a{color:var(--accent)}
.hm .cp-start .ok{color:var(--win)}

@media (max-width:900px){.hm .cp-b{grid-template-columns:minmax(0,1fr)}.hm .cp-start{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm .cp-head{grid-template-columns:minmax(0,1fr)}.hm .cp-head .bal{grid-column:1;grid-row:auto;text-align:left}.hm .cp-head .bal b{justify-content:flex-start}
  .hm .cp-start{grid-template-columns:minmax(0,1fr)}}
/* under the card: the companion app's colour, one of the shop's app themes, changing with the card */
.hm .cp-app{--mk:var(--accent);display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line1)}
.hm .cp-app .hm-mark{position:static;transform:none;width:44px;height:44px;flex:none}
.hm .cp-app .hm-mark .lens{fill:var(--mk);transition:fill .3s ease}
.hm .cp-app .hm-mark .ring{stroke:var(--mk);transition:stroke .3s ease}
.hm .cp-app b{display:block;font-size:14px;color:var(--fg)}
.hm .cp-app #cpTh{font-size:13.5px;color:var(--mk);transition:color .3s ease}
.hm .cp-qr .hm-sc a{color:var(--accent)}