/* Account screens (account.js): join, recovery code, restore, profile. Same chamfered HUD style. */
.acct-chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.acct-chip.in .nm { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.acct-chip .xp { color: #E0BE72; }
.acct { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(2,4,7,.78); backdrop-filter: blur(6px); }
.acct-box { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 26px 22px; color: #e8f2f8; font: 15px/1.45 var(--sans, system-ui);
  background: linear-gradient(180deg, rgba(14,26,38,.97), rgba(4,8,12,.98)); border: 1px solid rgba(114,220,255,.4);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); box-shadow: inset 0 0 50px -18px rgba(24,191,255,.55);
  animation: acctIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes acctIn { from { transform: translateY(16px) scale(.98); opacity: 0; } }
.acct-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: #8fa3b0; font-size: 26px; cursor: pointer; line-height: 1; }
.acct-in { display: grid; gap: 12px; }
.acct h2 { font: 700 26px/1.05 var(--hud, system-ui); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.acct p { margin: 0; color: #c9d8e1; }
.acct-why { color: #72DCFF !important; font: 700 12px var(--hud, system-ui); letter-spacing: .2em; text-transform: uppercase; }
.acct-f { display: grid; gap: 6px; }
.acct-f span { font: 600 11px var(--hud, system-ui); letter-spacing: .2em; text-transform: uppercase; color: #8fa3b0; }
.acct-f input { background: rgba(5,10,15,.9); border: 1px solid rgba(114,220,255,.3); color: #fff; padding: 11px 12px; font: 16px var(--sans, system-ui); outline: none; }
.acct-f input:focus { border-color: #18BFFF; box-shadow: 0 0 0 2px rgba(24,191,255,.25); }
.acct-err { color: #FF7A59 !important; min-height: 1.2em; font-size: 14px; }
.acct-fine { color: #728A9B !important; font-size: 12.5px; }
.acct-link { background: none; border: 0; padding: 0; color: #72DCFF; font: 600 13px var(--sans, system-ui); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.acct-link.danger { color: #FF7A59; }
.acct-code { font: 700 clamp(14px, 4.3vw, 20px)/1.2 var(--mono, monospace); letter-spacing: .04em; white-space: nowrap; overflow-x: auto; text-align: center; padding: 16px 10px; color: #E0BE72; user-select: all;
  background: rgba(224,190,114,.08); border: 1px dashed rgba(224,190,114,.6); }
.acct-ok { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.acct-ok input { accent-color: #18BFFF; width: 18px; height: 18px; }
.acct-head small { font: 600 11px var(--hud, system-ui); letter-spacing: .3em; text-transform: uppercase; color: #72DCFF; }
.acct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.acct-stats div { display: grid; justify-items: center; padding: 10px 4px; background: rgba(24,191,255,.06); border: 1px solid rgba(114,220,255,.15); }
.acct-stats b { font: 700 24px/1 var(--hud, system-ui); color: #fff; }
.acct-stats div:first-child b { color: #E0BE72; }
.acct-stats span { font: 600 10px var(--hud, system-ui); letter-spacing: .12em; text-transform: uppercase; color: #8fa3b0; text-align: center; }
.acct-bar { display: grid; gap: 6px; font: 600 12px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #8fa3b0; }
.acct-bar i { height: 8px; background: linear-gradient(90deg, #18BFFF var(--p), #1d3242 var(--p)); box-shadow: 0 0 12px -2px #18BFFF; }
.acct-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #c9d8e1; font-size: 14px; }
.acct-list b { color: #72DCFF; }
.acct-row { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-row.end { justify-content: space-between; margin-top: 4px; }
.acct .btn { text-decoration: none; display: inline-flex; justify-content: center; }
@media (max-width: 420px) { .acct-stats { grid-template-columns: repeat(2, 1fr); } }

/* XP block in the match result panel */
.r-xp { display: grid; gap: 6px; padding: 10px 12px; background: rgba(224,190,114,.07); border: 1px solid rgba(224,190,114,.35); }
.r-xp .big { font: 700 34px/1 var(--hud, system-ui); color: #E0BE72; text-shadow: 0 0 18px rgba(224,190,114,.5); }
.r-xp .line { font-size: 13.5px; color: #c9d8e1; }
.r-xp .line b { color: #72DCFF; }
.r-xp .pack { color: #8FD0B8; font-weight: 600; }
.r-xp.guest .big { font-size: 18px; color: #c9d8e1; text-shadow: none; }

/* the SABLE Emblem ceremony (emblem.js) */
.emb-cer { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; animation: embIn .5s ease-out; }
@keyframes embIn { from { opacity: 0; } }
.emb-cer.bye { opacity: 0; transition: opacity .45s; }
.emb-cer video { width: 100%; height: 100%; object-fit: contain; transition: opacity .8s, transform 1.2s; }
.emb-cer video.out { opacity: .18; transform: scale(1.06); filter: blur(4px); }
.emb-skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,.5); color: #9fd8ff; border: 1px solid rgba(31,139,255,.5); padding: 8px 16px; font: 700 12px var(--hud, system-ui); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.emb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 64px); padding: 20px; flex-wrap: wrap; }
.emb-card { width: min(340px, 70vw, calc(62vh * 63 / 88)); animation: embCard 1.1s cubic-bezier(.2,.9,.2,1) both; }
@keyframes embCard { from { transform: perspective(900px) translateY(40px) rotateY(-160deg) scale(.5); opacity: 0; filter: brightness(3); } 70% { filter: brightness(1.4); } }
.emb-text { display: grid; gap: 10px; max-width: 420px; animation: embTxt .8s .6s both; }
@keyframes embTxt { from { transform: translateY(16px); opacity: 0; } }
.emb-text small { font: 700 13px var(--hud, system-ui); letter-spacing: .4em; text-transform: uppercase; color: #1f8bff; }
.emb-text b { font: 700 clamp(28px, 4.4vw, 46px)/1.02 var(--hud, system-ui); text-transform: uppercase; color: #fff; text-shadow: 0 0 24px rgba(31,139,255,.7); }
.emb-text span { font: 600 15px var(--hud, system-ui); letter-spacing: .14em; text-transform: uppercase; color: #cfe8ff; }
.emb-text .btn { justify-self: start; margin-top: 8px; }
@media (max-width: 700px) { .emb-text { text-align: center; justify-items: center; } .emb-text .btn { justify-self: center; } }
.s-note { color: #FF7A59 !important; font-weight: 600; }
/* the starter deck choice */
.acct-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acct-starter { text-align: left; display: grid; gap: 3px; padding: 12px; cursor: pointer; color: #e8f2f8; background: rgba(14,24,34,.9); border: 1px solid var(--fc, rgba(114,220,255,.4));
  box-shadow: inset 0 0 26px -14px var(--fc, #18BFFF); font: inherit; }
.acct-starter:hover:not(:disabled) { background: rgba(24,191,255,.12); transform: translateY(-2px); }
.acct-starter:disabled { opacity: .5; cursor: default; }
.acct-starter b { font: 700 16px var(--hud, system-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--fc, #fff); }
.acct-starter span { font-size: 13px; color: #c9d8e1; }
@media (max-width: 420px) { .acct-starters { grid-template-columns: 1fr; } }
.acct-chip .lv { color: #72DCFF; font-weight: 700; }
/* level up on the result screen */
.r-xp .lvup { font: 700 16px var(--hud, system-ui); letter-spacing: .1em; text-transform: uppercase; color: #9fe6ff; text-shadow: 0 0 14px #18BFFF; animation: lvup 1.2s ease-out both; }
@keyframes lvup { from { transform: scale(1.6); opacity: 0; filter: blur(4px); } 40% { transform: scale(1); opacity: 1; filter: none; } }

/* avatars: the favourite card cropped round, the ring in the colour of its foil */
.avatar { display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: #0e1822 center 25% / cover; border: 2px solid rgba(114,220,255,.45);
  font: 700 calc(var(--s) * .45) var(--hud, system-ui); color: #72DCFF; box-shadow: 0 0 10px -3px #18BFFF; }
.avatar.ring-prism { border-color: transparent; background-clip: padding-box; box-shadow: 0 0 0 2px #ff6b9a, 0 0 0 4px #6bd9ff, 0 0 12px -2px #a86bff; }
.avatar.ring-gold { border-color: #ffd56a; box-shadow: 0 0 12px -2px #ffd56a; }
.avatar.ring-obsidian { border-color: #000; box-shadow: 0 0 0 2px #18BFFF, 0 0 12px -2px #18BFFF; }
.avatar.ring-aurora { border-color: #3dffb0; box-shadow: 0 0 0 2px #b06bff, 0 0 14px -2px #3dffb0; }
.acct-who { display: flex; gap: 14px; align-items: center; }
.acct-who .acct-link { font-size: 12px; }

/* ---------- Season 1 "First Light": the animated avatar frame and the card back ---------- */
@property --sang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.avatar.frame-s1 { position: relative; border-color: transparent; }
.avatar.frame-s1::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--sang), #ffd56a, #fff4c9, #18BFFF, #72DCFF, #ffd56a 60%, #e0a072, #ffd56a);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sring 4s linear infinite, spulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px #ffd56a); }
@keyframes sring { to { --sang: 360deg; } }
@keyframes spulse { 50% { filter: drop-shadow(0 0 12px #ffd56a) drop-shadow(0 0 4px #18BFFF); } }
.cback { width: 64px; aspect-ratio: 63 / 88; border-radius: 6px; border: 1px solid #1d3242; }
.back-s1, :is(.mc.back, .flipper .bk, .cback).back-s1 { position: relative; overflow: hidden; background: radial-gradient(70% 45% at 50% 108%, #ffd56a, #e0a072 30%, rgba(24,191,255,.35) 60%, transparent 75%), linear-gradient(180deg, #050b14, #0c2238 70%, #1b2f3e) !important; border-color: #b8862b !important; }
.back-s1::before { content: ""; position: absolute; left: 50%; top: 46%; width: 48%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(255,213,106,.7); box-shadow: 0 0 0 4px rgba(255,213,106,.08), 0 0 14px rgba(255,213,106,.45); animation: sdawn 3.6s ease-in-out infinite; }
.back-s1::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: repeating-conic-gradient(from 0deg at 50% 108%, rgba(255,213,106,.12) 0 4deg, transparent 4deg 14deg); }
@keyframes sdawn { 50% { box-shadow: 0 0 0 7px rgba(255,213,106,.12), 0 0 22px rgba(255,213,106,.7); } }
@media (prefers-reduced-motion: reduce) { .avatar.frame-s1::before, .back-s1::before { animation: none; } }

/* ---------- the catalogue (engine/cosmetics.js, 7 Oct 2026): six avatar frames for XP ---------- */
/* each frame is a ring (::before) and a moving detail (::after) scaled to the avatar's size --s */
.avatar.frame-seal, .avatar.frame-cap, .avatar.frame-receipt, .avatar.frame-rogue, .avatar.frame-constellation, .avatar.frame-eclipse { position: relative; border-color: transparent; }
:is(.frame-seal, .frame-cap, .frame-receipt, .frame-rogue, .frame-constellation, .frame-eclipse).avatar::before,
:is(.frame-seal, .frame-cap, .frame-receipt, .frame-rogue, .frame-constellation, .frame-eclipse).avatar::after {
  content: ""; position: absolute; inset: calc(var(--s) * -.1 - 2px); border-radius: 50%; pointer-events: none; }
:is(.frame-seal, .frame-cap, .frame-receipt, .frame-rogue, .frame-constellation, .frame-eclipse).avatar::before {
  padding: calc(var(--s) * .05 + 1.5px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@keyframes frot { to { transform: rotate(360deg); } }
/* Seal: cyan ring, a seal of light turning round it */
.avatar.frame-seal::before { background: conic-gradient(from var(--sang), #0a3b5a, #18BFFF 30%, #e8f8ff 36%, #18BFFF 42%, #0a3b5a 70%, #0a3b5a); animation: sring 5s linear infinite; filter: drop-shadow(0 0 5px #18BFFF); }
.avatar.frame-seal::after { inset: calc(var(--s) * -.16 - 3px); background: radial-gradient(circle at 50% calc(var(--s) * .05 + 2px), #e8f8ff 0 calc(var(--s) * .04 + 1.5px), rgba(24,191,255,.7) calc(var(--s) * .07 + 2px), transparent calc(var(--s) * .1 + 3px)); animation: frot 5s linear infinite reverse; }
/* Cap: green plates that lock round and pulse */
.avatar.frame-cap::before { background: repeating-conic-gradient(from var(--sang), #5FD3A8 0 26deg, #0b2a20 26deg 30deg); animation: sring 9s steps(12) infinite; filter: drop-shadow(0 0 5px #5FD3A8); }
.avatar.frame-cap::after { border: 1px solid rgba(143,240,200,.6); inset: calc(var(--s) * -.18 - 3px); animation: fcap 2.4s ease-in-out infinite; }
@keyframes fcap { 0%, 100% { opacity: .2; transform: scale(.94); } 50% { opacity: .9; transform: scale(1); } }
/* Receipt: a gold band, a stamp of light ticks round it */
.avatar.frame-receipt::before { background: conic-gradient(from var(--sang), #fff4c9 0 8deg, #b8862b 8deg 40deg, #ffd56a 40deg 180deg, #8a6420 180deg 220deg, #E0BE72 220deg); animation: sring 6s steps(16) infinite; filter: drop-shadow(0 0 5px #E0BE72); }
.avatar.frame-receipt::after { inset: calc(var(--s) * -.06 - 1px); border: 1px dashed rgba(255,244,201,.65); animation: frot 24s linear infinite; }
/* Rogue: an orange ring that flickers and throws sparks */
.avatar.frame-rogue::before { background: conic-gradient(from var(--sang), #FF7A59, #3a120a 25%, #ff9a6b 50%, #3a120a 75%, #FF7A59); animation: sring 2.2s linear infinite, frogue 1.9s steps(1) infinite; filter: drop-shadow(0 0 5px #FF7A59); }
@keyframes frogue { 0%, 100% { opacity: 1; } 40% { opacity: .35; } 43% { opacity: 1; } 71% { opacity: .5; } 72% { opacity: 1; } }
.avatar.frame-rogue::after { inset: calc(var(--s) * -.22 - 4px);
  background: radial-gradient(circle at 50% 3%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 64%, #ffd0b8 0 1.2px, transparent 2.2px), radial-gradient(circle at 12% 70%, #FF7A59 0 1.4px, transparent 2.4px);
  filter: drop-shadow(0 0 3px #FF7A59); animation: frot 1.3s linear infinite; }
/* Constellation: stars orbit, faint lines join them */
.avatar.frame-constellation::before { background: conic-gradient(from var(--sang), rgba(114,220,255,.25), rgba(207,232,255,.7) 25%, rgba(114,220,255,.25) 50%, rgba(207,232,255,.7) 75%, rgba(114,220,255,.25)); animation: sring 14s linear infinite; padding: 1px; }
.avatar.frame-constellation::after { inset: calc(var(--s) * -.24 - 4px);
  background: radial-gradient(circle at 50% 2%, #fff 0 1.8px, transparent 2.8px), radial-gradient(circle at 93% 30%, #cfe8ff 0 1.3px, transparent 2.3px), radial-gradient(circle at 85% 85%, #fff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 25% 92%, #9fe6ff 0 1.2px, transparent 2.2px), radial-gradient(circle at 4% 45%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 22% 10%, #cfe8ff 0 1px, transparent 2px),
    conic-gradient(from 0deg, transparent 0 10deg, rgba(159,230,255,.18) 10deg 11deg, transparent 11deg 110deg, rgba(159,230,255,.18) 110deg 111deg, transparent 111deg 220deg, rgba(159,230,255,.18) 220deg 221deg, transparent 221deg);
  filter: drop-shadow(0 0 3px #cfe8ff); animation: frot 30s linear infinite, ftwinkle 3s ease-in-out infinite; }
@keyframes ftwinkle { 50% { opacity: .55; } }
/* Eclipse: a black sun, its corona breathing */
.avatar.frame-eclipse { box-shadow: 0 0 0 2px #000, 0 0 14px 2px rgba(255,170,90,.55); }
.avatar.frame-eclipse::before { background: conic-gradient(from var(--sang), #000, #1a0d05 30%, #ffb35c 46%, #fff1d6 50%, #ffb35c 54%, #1a0d05 70%, #000); animation: sring 10s linear infinite; }
.avatar.frame-eclipse::after { inset: calc(var(--s) * -.3 - 5px);
  background: repeating-conic-gradient(from 0deg, rgba(255,190,110,.55) 0 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 66%, transparent 100%); mask: radial-gradient(closest-side, transparent 62%, #000 66%, transparent 100%);
  animation: frot 40s linear infinite, fcorona 4s ease-in-out infinite; }
@keyframes fcorona { 0%, 100% { opacity: .45; filter: blur(.5px); } 50% { opacity: 1; filter: blur(0) drop-shadow(0 0 4px #ffb35c); } }

/* ---------- six card backs for XP: on your face-down match cards (.mc.back), the pack flipper (.bk) and swatches (.cback) ---------- */
:is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit, .back-s1) { position: relative; overflow: hidden; }
:is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit, .back-s1) .seal { display: none; }
:is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit)::before,
:is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit)::after {
  content: ""; display: block; position: absolute; pointer-events: none; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: none; animation: none; transform: none; width: auto; aspect-ratio: auto; }
:is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit) svg { opacity: .55; }
/* the round centre piece most backs share */
:is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-vault, .back-moonlit)::before { inset: auto; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; margin: -29% 0 0 -29%; border-radius: 50%; }
/* Seal: deep blue, a seal ring that pulses */
:is(.mc.back, .flipper .bk, .cback).back-seal { background: radial-gradient(60% 45% at 50% 50%, #0d4a70, #04121e 70%), #04121e !important; border-color: #18BFFF !important; }
:is(.mc.back, .flipper .bk, .cback).back-seal::before { border: 2px solid #72DCFF; box-shadow: 0 0 0 5px rgba(24,191,255,.12), 0 0 18px rgba(24,191,255,.6), inset 0 0 14px rgba(24,191,255,.4); animation: bkPulse 2.8s ease-in-out infinite; }
:is(.mc.back, .flipper .bk, .cback).back-seal::after { background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(114,220,255,.08) 9px 10px); }
@keyframes bkPulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(24,191,255,.06), 0 0 28px rgba(24,191,255,.85), inset 0 0 18px rgba(24,191,255,.5); } }
/* Cap: green hex plates, a sweep of light */
:is(.mc.back, .flipper .bk, .cback).back-cap { background: linear-gradient(180deg, #0b2a20, #04140e) !important; border-color: #5FD3A8 !important; }
:is(.mc.back, .flipper .bk, .cback).back-cap::before { background: repeating-linear-gradient(60deg, transparent 0 10px, rgba(95,211,168,.3) 10px 11px), repeating-linear-gradient(-60deg, transparent 0 10px, rgba(95,211,168,.3) 10px 11px), repeating-linear-gradient(0deg, transparent 0 10px, rgba(95,211,168,.18) 10px 11px); }
:is(.mc.back, .flipper .bk, .cback).back-cap::after { background: linear-gradient(115deg, transparent 35%, rgba(143,240,200,.45) 50%, transparent 65%) 0 0 / 300% 100%; animation: bkSweep 4s ease-in-out infinite; }
@keyframes bkSweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }
/* Receipt: cream paper lines and a gold stamp */
:is(.mc.back, .flipper .bk, .cback).back-receipt { background: repeating-linear-gradient(180deg, #efe4c8 0 7px, #e2d3ae 7px 8px), #efe4c8 !important; border-color: #b8862b !important; }
:is(.mc.back, .flipper .bk, .cback).back-receipt::before { inset: auto; left: 50%; top: 50%; width: 54%; aspect-ratio: 1; margin: -27% 0 0 -27%; border-radius: 50%; border: 3px double #b8862b;
  background: radial-gradient(circle, rgba(224,190,114,.55), rgba(184,134,43,.15) 70%); transform: rotate(-14deg); animation: bkStamp 3.6s ease-in-out infinite; }
:is(.mc.back, .flipper .bk, .cback).back-receipt::after { background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 30%, transparent 70%, rgba(110,80,20,.2)); }
@keyframes bkStamp { 0%, 60%, 100% { transform: rotate(-14deg) scale(1); opacity: .9; } 66% { transform: rotate(-14deg) scale(1.25); opacity: .3; } 74% { transform: rotate(-14deg) scale(.96); opacity: 1; } }
.back-receipt svg path { fill: #8a6420; }
/* Rogue: warning stripes and a glitch sliding past */
:is(.mc.back, .flipper .bk, .cback).back-rogue { background: repeating-linear-gradient(45deg, #2a0d06 0 12px, #1a0703 12px 24px) !important; border-color: #FF7A59 !important; }
:is(.mc.back, .flipper .bk, .cback).back-rogue::before { inset: 38% 0 auto; height: 24%; background: repeating-linear-gradient(-45deg, #FF7A59 0 8px, #2a0d06 8px 16px); opacity: .8; box-shadow: 0 0 14px rgba(255,122,89,.6); }
:is(.mc.back, .flipper .bk, .cback).back-rogue::after { background: linear-gradient(180deg, transparent 30%, rgba(255,60,90,.6) 30% 33%, transparent 33% 70%, rgba(60,220,255,.55) 70% 72%, transparent 72%); opacity: 0; animation: bkGlitch 3.4s steps(1) infinite; }
@keyframes bkGlitch { 0%, 100% { opacity: 0; transform: none; } 62% { opacity: 1; transform: translateX(-6%); } 65% { opacity: .6; transform: translateX(7%); } 68% { opacity: 0; } }
/* Sealed Vault: a black steel door, its dial turning */
:is(.mc.back, .flipper .bk, .cback).back-vault { background: radial-gradient(70% 50% at 50% 50%, #1b2228, #05070a 75%), repeating-linear-gradient(90deg, #0a0e12 0 3px, #11171c 3px 6px) !important; border-color: #6b7c88 !important; }
:is(.mc.back, .flipper .bk, .cback).back-vault::before { background: repeating-conic-gradient(from 0deg, #8a98a4 0 4deg, #1b2228 4deg 15deg); border: 3px solid #3a4652; box-shadow: 0 0 0 2px #000, 0 0 16px -2px #18BFFF, inset 0 0 0 9px #11171c;
  -webkit-mask: radial-gradient(closest-side, #000 98%, transparent); mask: radial-gradient(closest-side, #000 98%, transparent); animation: bkDial 12s cubic-bezier(.6,0,.4,1) infinite; }
:is(.mc.back, .flipper .bk, .cback).back-vault::after { background: linear-gradient(90deg, transparent 6%, rgba(24,191,255,.5) 6% 7%, transparent 7% 93%, rgba(24,191,255,.5) 93% 94%, transparent 94%); }
@keyframes bkDial { 0% { transform: rotate(0); } 30% { transform: rotate(120deg); } 50% { transform: rotate(60deg); } 80% { transform: rotate(250deg); } 100% { transform: rotate(360deg); } }
/* Moonlit: a crescent over a night sky, stars blinking */
:is(.mc.back, .flipper .bk, .cback).back-moonlit { background: radial-gradient(80% 50% at 50% 30%, #13304d, #05070A 75%) !important; border-color: #cfe8ff !important; }
:is(.mc.back, .flipper .bk, .cback).back-moonlit::before { width: 46%; margin: -36% 0 0 -23%; box-shadow: inset -10px 6px 0 0 #f2f8ff; filter: drop-shadow(0 0 10px rgba(207,232,255,.85)); transform: rotate(-24deg); animation: bkMoon 6s ease-in-out infinite; }
:is(.mc.back, .flipper .bk, .cback).back-moonlit::after { background: radial-gradient(circle at 18% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 80% 14%, #cfe8ff 0 1.2px, transparent 2.2px), radial-gradient(circle at 70% 70%, #fff 0 1px, transparent 2px),
  radial-gradient(circle at 28% 78%, #9fe6ff 0 1px, transparent 2px), radial-gradient(circle at 50% 92%, #fff 0 .8px, transparent 1.8px), radial-gradient(circle at 88% 48%, #fff 0 .8px, transparent 1.8px), radial-gradient(circle at 10% 52%, #cfe8ff 0 1px, transparent 2px);
  animation: ftwinkle 2.6s ease-in-out infinite; }
@keyframes bkMoon { 50% { transform: rotate(-18deg) translateY(-4%); filter: drop-shadow(0 0 16px rgba(207,232,255,1)); } }
@media (prefers-reduced-motion: reduce) {
  :is(.frame-seal, .frame-cap, .frame-receipt, .frame-rogue, .frame-constellation, .frame-eclipse).avatar::before,
  :is(.frame-seal, .frame-cap, .frame-receipt, .frame-rogue, .frame-constellation, .frame-eclipse).avatar::after,
  :is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit)::before,
  :is(.mc.back, .flipper .bk, .cback):is(.back-seal, .back-cap, .back-receipt, .back-rogue, .back-vault, .back-moonlit)::after { animation: none; } }

/* ---------- polish (7 Oct 2026 review): distinct Seal and Cap motifs, a premium Constellation, a contained Eclipse ---------- */
/* Seal: the cyan ring keeps its turning light; a wax seal badge sits on it at the lower right and pulses */
.avatar.frame-seal::after { inset: auto; right: calc(var(--s) * -.08 - 1px); bottom: calc(var(--s) * -.08 - 1px); width: calc(var(--s) * .34 + 4px); height: calc(var(--s) * .34 + 4px);
  background: radial-gradient(circle at 50% 50%, transparent 0 28%, #e8f8ff 30% 36%, transparent 38%), radial-gradient(circle at 38% 32%, #bff4ff, #18BFFF 45%, #07466e 80%);
  box-shadow: 0 0 0 2px #04121e, 0 0 8px #18BFFF; animation: fsealPulse 2.6s ease-in-out infinite; }
@keyframes fsealPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 2px #04121e, 0 0 14px #72DCFF; } }
/* Cap: a rounded-square shield that locks a quarter turn at a time round the green plate ring */
.avatar.frame-cap::after { inset: calc(var(--s) * -.14 - 2px); border-radius: 28%; border: calc(var(--s) * .03 + 1.5px) solid #5FD3A8;
  box-shadow: 0 0 8px -1px #5FD3A8, inset 0 0 6px -2px #8ff0c8; animation: fcapLock 4.8s cubic-bezier(.7,0,.3,1) infinite; opacity: 1; }
@keyframes fcapLock { 0%, 30% { transform: rotate(0deg); } 50%, 80% { transform: rotate(45deg); } 100% { transform: rotate(90deg); } }
/* Constellation: a deep blue to violet ring and bright stars joined by lines, turning slowly */
.avatar.frame-constellation::before { padding: calc(var(--s) * .045 + 1.5px); background: conic-gradient(from var(--sang), #1a2b6b, #6b8cff 20%, #e8f2ff 28%, #b06bff 45%, #1a2b6b 60%, #6b8cff 80%, #1a2b6b);
  filter: drop-shadow(0 0 6px #8fb0ff); animation: sring 12s linear infinite; }
.avatar.frame-constellation::after { inset: calc(var(--s) * -.2 - 4px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolyline points='50,3 86,20 97,58 70,95' fill='none' stroke='%23cfe0ff' stroke-width='1.2' opacity='.8'/%3E%3Cpolyline points='28,92 4,62 10,24 50,3' fill='none' stroke='%23cfe0ff' stroke-width='1.2' opacity='.8'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='50' cy='3' r='3.4'/%3E%3Ccircle cx='86' cy='20' r='2.4'/%3E%3Ccircle cx='97' cy='58' r='3'/%3E%3Ccircle cx='70' cy='95' r='2.4'/%3E%3Ccircle cx='28' cy='92' r='2.8'/%3E%3Ccircle cx='4' cy='62' r='2.2'/%3E%3Ccircle cx='10' cy='24' r='2.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #8fb0ff); animation: frot 36s linear infinite, ftwinkle 3s ease-in-out infinite; }
/* Eclipse: the corona stays inside its own band round the ring */
.avatar.frame-eclipse::after { inset: calc(var(--s) * -.2 - 3px);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 80%, transparent 99%); mask: radial-gradient(closest-side, transparent 72%, #000 80%, transparent 99%); }
/* the header chip on the smallest phones: avatar and XP, the level and name live in the profile */
@media (max-width: 380px) { .acct-chip .lv, .acct-chip .nm { display: none; } }
@media (prefers-reduced-motion: reduce) { .avatar.frame-seal::after, .avatar.frame-cap::after, .avatar.frame-constellation::before, .avatar.frame-constellation::after, .avatar.frame-eclipse::after { animation: none !important; } }
/* Seal badge, second pass: smaller and sitting on the ring itself, so it never covers the avatar */
.avatar.frame-seal::after { right: calc(var(--s) * -.13 - 2px); bottom: calc(var(--s) * -.13 - 2px); width: calc(var(--s) * .24 + 3px); height: calc(var(--s) * .24 + 3px); box-shadow: 0 0 0 1.5px #04121e, 0 0 6px #18BFFF; }

/* ---------- ranked season prizes (engine/season.js, 8 Oct 2026): earned on the season ladder, never sold ---------- */
/* the Champion frame (top 10): a gold and moonlight double ring turning both ways, a crown of light orbiting, a slow
   breathing glow. Clearly above the shop frames, and season-tinted through --ch (gold for season 1). */
.avatar[class*="-champion"] { position: relative; border-color: transparent; --ch: #ffd56a; box-shadow: 0 0 0 2px #050b14, 0 0 18px 3px color-mix(in srgb, var(--ch) 55%, transparent); animation: chbreath 3.2s ease-in-out infinite; }
.avatar[class*="-champion"]::before, .avatar[class*="-champion"]::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.avatar[class*="-champion"]::before { inset: calc(var(--s) * -.12 - 3px); padding: calc(var(--s) * .05 + 2px);
  background: conic-gradient(from var(--sang), var(--ch), #fff8e0 8%, #18BFFF 20%, var(--ch) 33%, #fff8e0 41%, #72DCFF 53%, var(--ch) 66%, #fff8e0 74%, #18BFFF 86%, var(--ch));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sring 3s linear infinite; filter: drop-shadow(0 0 6px var(--ch)); }
.avatar[class*="-champion"]::after { inset: calc(var(--s) * -.3 - 6px);
  background: radial-gradient(circle at 50% 3%, #fff 0 calc(var(--s) * .035 + 1.5px), var(--ch) calc(var(--s) * .06 + 2px), transparent calc(var(--s) * .1 + 4px)),
    radial-gradient(circle at 50% 97%, #cfe8ff 0 calc(var(--s) * .025 + 1px), transparent calc(var(--s) * .07 + 3px)),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ch) 45%, transparent) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 74%, #000 88%, transparent 100%); mask: radial-gradient(closest-side, transparent 70%, #000 74%, #000 88%, transparent 100%);
  animation: frot 9s linear infinite reverse; }
@keyframes chbreath { 50% { box-shadow: 0 0 0 2px #050b14, 0 0 28px 6px color-mix(in srgb, var(--ch) 70%, transparent); } }
@media (prefers-reduced-motion: reduce) { .avatar[class*="-champion"], .avatar[class*="-champion"]::before, .avatar[class*="-champion"]::after { animation: none; } }
/* titles and badges next to a name: the Top 10 title in gold, the Ranked badge in moonlight */
.honour { display: inline-block; margin: 2px 4px 0 0; padding: 1px 7px; border-radius: 999px; font: 600 11px/1.5 var(--mono, monospace); letter-spacing: .02em; white-space: nowrap; }
.honour.title { color: #1a1206; background: linear-gradient(90deg, #ffd56a, #fff1c4, #ffd56a); box-shadow: 0 0 10px rgba(255,213,106,.45); }
.honour.badge { color: #cfe8ff; border: 1px solid rgba(114,220,255,.55); background: rgba(10,30,48,.7); }
.honours { margin: 2px 0 4px; }