/* Achievement Tracker card layouts. Shared markup lives in js/overlay-layouts.js. */

#at-card {
  position: absolute;
  z-index: 50;
  --atc-scale: 1;
  --atc-tx: 0;
  --atc-accent: #66c0f4;
  --atc-tier: var(--atc-accent);
  transform: translateX(var(--atc-tx)) scale(var(--atc-scale));
  transition: opacity .45s ease;
  pointer-events: none;
}
#at-card.hidden { opacity: 0; }
#at-card.pos-top-left { top: 24px; left: 24px; transform-origin: top left; }
#at-card.pos-top-center { top: 24px; left: 50%; --atc-tx: -50%; transform-origin: top center; }
#at-card.pos-top-right { top: 24px; right: 24px; transform-origin: top right; }
#at-card.pos-bottom-left { bottom: 24px; left: 24px; transform-origin: bottom left; }
#at-card.pos-bottom-center { bottom: 24px; left: 50%; --atc-tx: -50%; transform-origin: bottom center; }
#at-card.pos-bottom-right { bottom: 24px; right: 24px; transform-origin: bottom right; }

.atc {
  isolation: isolate;
  position: relative;
  color: #fff;
  font-family: var(--atc-font, var(--atc-theme-font, 'Inter', sans-serif));
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.atc *, .atc *::before, .atc *::after { box-sizing: border-box; }
.atc-art, .atc-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.atc-art { display: none; }
.atc-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atc-main { position: relative; display: grid; grid-template-areas: "head" "bar" "latest"; }
.atc-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-width: 0; }
.atc-cover { display: none; flex: none; object-fit: cover; }
.atc-title { flex: 1; min-width: 0; }
.atc-game { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atc-stats { display: flex; align-items: center; gap: 8px; flex: none; }
.atc-count { display: inline-flex; align-items: baseline; white-space: nowrap; }
.atc-sep { margin: 0 .18em; }
.atc-ring { grid-area: ring; display: none; position: relative; }
.atc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.atc-ring circle { fill: none; }
.atc-ring-fill { stroke-dasharray: 276.46; stroke-dashoffset: 276.46; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.atc-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.atc-bar { grid-area: bar; position: relative; overflow: hidden; }
.atc-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.atc-bar-segs { display: none; }
.atc-latest { grid-area: latest; min-width: 0; }
.atc-latest-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.atc-icon { position: relative; flex: none; }
.atc-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.atc-icon-cup { display: none; position: absolute; inset: 18%; color: var(--atc-tier); }
.atc-icon-cup svg, .atc-badge svg { width: 100%; height: 100%; display: block; }
.no-latest-icon .atc-icon-cup { display: block; }
.atc-badge { position: absolute; right: -8px; bottom: -6px; width: 34%; aspect-ratio: 1; color: var(--atc-tier); filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
.atc-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.atc-latest-text { min-width: 0; flex: 1; }
.atc-latest-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atc-latest-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.atc-latest-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atc-chip:empty, .atc-time:empty { display: none; }

/* Part toggles */
.no-game .atc-title, .no-game-name .atc-title { display: none !important; }
.no-count .atc-count, .no-pct .atc-pct, .no-total .atc-count .atc-sep, .no-total .atc-total, .no-total .atc-pct { display: none !important; }
.no-count.no-pct .atc-stats, .no-total.no-count .atc-stats { display: none !important; }
.no-bar .atc-bar, .no-total .atc-bar { display: none !important; }
.no-latest .atc-latest, .no-latest-data .atc-latest { display: none !important; }
.no-icon .atc-icon { display: none !important; }
.no-desc .atc-latest-desc { display: none !important; }
.no-time .atc-time { display: none !important; }
.no-art .atc-art { display: none !important; }
.no-art .atc-cover { display: none !important; }
.no-goal .atc-goal, .no-goal-data .atc-goal { display: none !important; }
.no-next .atc-next, .no-next-data .atc-next { display: none !important; }

/* Goal and Next up: full width rows under the theme's own grid. Themes restyle them below. */
.atc-goal, .atc-next { grid-column: 1 / -1; min-width: 0; }
.atc-goal { margin-top: 14px; }
.atc-goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.atc-goal-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.atc-goal-val { flex: none; font-variant-numeric: tabular-nums; }
.atc-goal-bar { position: relative; height: 5px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.12); }
.atc-goal-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--atc-fill, var(--atc-accent)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.goal-done .atc-goal-fill { background: #f6c945; box-shadow: 0 0 12px rgba(246,201,69,.7); }
.goal-done .atc-goal-val { color: #f6c945; }
.atc-next { margin-top: 14px; }
.atc-next-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.atc-next-list { display: flex; flex-direction: column; gap: 8px; }
.atc-next-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.atc-next-icon { flex: none; width: 32px; height: 32px; border-radius: 7px; overflow: hidden; background: rgba(0,0,0,.35); color: rgba(255,255,255,.5); }
.atc-next-icon img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.85) brightness(.8); }
.atc-next-icon svg { width: 60%; height: 60%; margin: 20%; display: block; }
.atc-next-text { flex: 1; min-width: 0; }
.atc-next-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atc-next-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.atc-next-track { position: relative; flex: 1; height: 3px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.12); }
.atc-next-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--atc-fill, var(--atc-accent)); }
.atc-next-val { flex: none; font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }

/* New unlock */
.atc.is-new .atc-icon { animation: atc-pop .9s cubic-bezier(.2,1.6,.4,1); }
.atc.is-new .atc-latest-text { animation: atc-slide .7s cubic-bezier(.2,.8,.2,1); }
.atc.is-new .atc-latest-row::after {
  content: ''; position: absolute; inset: -6px; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--atc-tier), 0 0 32px var(--atc-tier); animation: atc-flash 2.4s ease-out forwards;
}
.atc-latest-row { position: relative; }
@keyframes atc-pop { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes atc-slide { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes atc-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Showcase ---------- */
.atc[data-layout="showcase"] {
  --atc-theme-font: 'Poppins', sans-serif;
  --sc-accent: var(--atc-fill, var(--atc-accent));
  width: 560px; padding: 22px 22px 18px; border-radius: 22px;
  background: #121620; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.atc[data-layout="showcase"] .atc-art { display: block; }
.atc[data-layout="showcase"] .atc-art-img { opacity: .55; transform: scale(1.04); }
.atc[data-layout="showcase"] .atc-fx { background: linear-gradient(180deg, rgba(14,17,25,.2) 0%, rgba(14,17,25,.78) 48%, #0e1119 100%), linear-gradient(90deg, rgba(14,17,25,.6), transparent 60%); }
.atc[data-layout="showcase"] .atc-main { row-gap: 14px; }
.atc[data-layout="showcase"] .atc-head { padding: 2px 2px 0; align-items: flex-end; }
.atc[data-layout="showcase"] .atc-game { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.atc[data-layout="showcase"] .atc-stats { gap: 0; border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.35); background: rgba(8,10,16,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.atc[data-layout="showcase"] .atc-count { font-size: 15px; font-weight: 600; padding: 6px 12px 6px 14px; }
.atc[data-layout="showcase"] .atc-total { opacity: .6; }
.atc[data-layout="showcase"] .atc-sep { opacity: .4; }
.atc[data-layout="showcase"] .atc-pct { font-size: 15px; font-weight: 600; padding: 6px 14px 6px 12px; color: #0b0e15; background: var(--sc-accent); }
.atc[data-layout="showcase"].no-count .atc-pct { padding-left: 14px; }
.atc[data-layout="showcase"] .atc-bar { height: 10px; margin: 0 2px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: visible; }
.atc[data-layout="showcase"] .atc-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, transparent calc(25% - 1px), rgba(14,17,25,.8) calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) calc(50% - 1px), rgba(14,17,25,.8) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(75% - 1px), rgba(14,17,25,.8) calc(75% - 1px) calc(75% + 1px), transparent calc(75% + 1px)); }
.atc[data-layout="showcase"] .atc-bar-fill { border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--sc-accent) 55%, transparent), var(--sc-accent) 70%, color-mix(in srgb, var(--sc-accent) 40%, #fff)); box-shadow: 0 0 16px color-mix(in srgb, var(--sc-accent) 60%, transparent); }
.atc[data-layout="showcase"] .atc-latest { margin-top: 4px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.atc[data-layout="showcase"] .atc-latest-label { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-bottom: 12px; }
.atc[data-layout="showcase"] .atc-latest-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.4), transparent); }
.atc[data-layout="showcase"] .atc-icon { width: 74px; height: 74px; border-radius: 16px; background: #0b0e15; box-shadow: 0 0 0 2px var(--atc-tier), 0 0 22px color-mix(in srgb, var(--atc-tier) 40%, transparent); }
.atc[data-layout="showcase"] .atc-badge { width: 30px; right: -10px; bottom: -8px; }
.atc[data-layout="showcase"] .atc-latest-name { font-size: 18px; font-weight: 600; }
.atc[data-layout="showcase"] .atc-latest-desc { font-size: 14px; line-height: 1.4; opacity: .7; margin-top: 1px; }
.atc[data-layout="showcase"] .atc-latest-meta { font-size: 12px; font-weight: 500; opacity: .85; margin-top: 7px; gap: 8px; }
.atc[data-layout="showcase"] .atc-time { opacity: .7; }
.atc[data-layout="showcase"] .atc-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; color: var(--atc-tier); background: color-mix(in srgb, var(--atc-tier) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atc-tier) 45%, transparent); }
.atc[data-layout="showcase"].no-latest-data .atc-main, .atc[data-layout="showcase"].no-latest .atc-main { padding-bottom: 4px; }

/* ---------- Glass ---------- */
.atc[data-layout="glass"] {
  --atc-theme-font: 'Inter', sans-serif;
  width: 500px; padding: 18px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 20px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.atc[data-layout="glass"] .atc-art { display: block; }
.atc[data-layout="glass"] .atc-art-img { opacity: .28; filter: blur(14px) saturate(140%); transform: scale(1.2); }
.atc[data-layout="glass"] .atc-fx { background: rgba(10,14,24,.42); }
.atc[data-layout="glass"] .atc-main { row-gap: 14px; }
.atc[data-layout="glass"] .atc-cover { display: block; width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.atc[data-layout="glass"] .atc-game { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.atc[data-layout="glass"] .atc-stats { flex-direction: column; align-items: flex-end; gap: 0; }
.atc[data-layout="glass"] .atc-pct { font-size: 30px; font-weight: 300; letter-spacing: -.03em; line-height: 1; order: -1; }
.atc[data-layout="glass"] .atc-count { font-size: 13px; opacity: .7; font-weight: 500; }
.atc[data-layout="glass"] .atc-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); }
.atc[data-layout="glass"] .atc-bar-fill { border-radius: 99px; background: linear-gradient(90deg, var(--atc-fill, var(--atc-accent)), color-mix(in srgb, var(--atc-fill, var(--atc-accent)) 40%, #fff)); box-shadow: 0 0 14px var(--atc-fill, var(--atc-accent)); }
.atc[data-layout="glass"] .atc-latest { border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; }
.atc[data-layout="glass"] .atc-latest-label { display: none; }
.atc[data-layout="glass"] .atc-icon { width: 54px; height: 54px; border-radius: 14px; background: rgba(0,0,0,.3); box-shadow: 0 0 0 2px var(--atc-tier); }
.atc[data-layout="glass"] .atc-badge { width: 22px; right: -7px; bottom: -6px; }
.atc[data-layout="glass"] .atc-latest-name { font-size: 16px; font-weight: 600; }
.atc[data-layout="glass"] .atc-latest-desc { font-size: 13px; opacity: .72; -webkit-line-clamp: 1; margin-top: 1px; }
.atc[data-layout="glass"] .atc-latest-meta { font-size: 12px; opacity: .6; margin-top: 3px; gap: 8px; }
.atc[data-layout="glass"] .atc-chip { color: var(--atc-tier); opacity: 1; font-weight: 600; }
.atc[data-layout="glass"] .atc-chip::before { content: '•'; margin-right: 8px; color: #fff; opacity: .5; }

/* ---------- Broadcast (lower third) ---------- */
.atc[data-layout="broadcast"] { --atc-theme-font: 'Oswald', sans-serif; width: 600px; text-transform: uppercase; }
.atc[data-layout="broadcast"] .atc-main { row-gap: 8px; }
.atc[data-layout="broadcast"] .atc-head {
  position: relative; gap: 0; height: 84px; padding-right: 26px; overflow: hidden;
  background: linear-gradient(90deg, #0b0f17 0%, #121a26 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.atc[data-layout="broadcast"] .atc-head::after { content: ''; position: absolute; right: 30px; top: -10px; width: 14px; height: 120px; background: var(--atc-accent); transform: skewX(-15deg); opacity: .9; box-shadow: -22px 0 0 rgba(255,255,255,.08); }
.atc[data-layout="broadcast"] .atc-stats { order: -1; height: 100%; padding: 0 26px 0 22px; background: var(--atc-accent); color: #0b0f17; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.atc[data-layout="broadcast"] .atc-pct { font-size: 40px; font-weight: 500; line-height: 1; }
.atc[data-layout="broadcast"] .atc-count { font-size: 15px; font-weight: 500; letter-spacing: .08em; opacity: .8; }
.atc[data-layout="broadcast"] .atc-title { padding: 0 60px 0 20px; }
.atc[data-layout="broadcast"] .atc-game { font-size: 30px; font-weight: 500; letter-spacing: .02em; line-height: 1.1; }
.atc[data-layout="broadcast"] .atc-bar { height: 5px; margin: -8px 22px 0 0; background: rgba(255,255,255,.12); }
.atc[data-layout="broadcast"] .atc-bar-fill { background: var(--atc-fill, #fff); }
.atc[data-layout="broadcast"] .atc-latest { margin-left: 34px; margin-top: 4px; background: rgba(11,15,23,.92); border-left: 6px solid var(--atc-tier); padding: 10px 18px 10px 12px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.atc[data-layout="broadcast"] .atc-latest-label { font-size: 11px; letter-spacing: .3em; color: var(--atc-tier); margin-bottom: 6px; }
.atc[data-layout="broadcast"] .atc-icon { width: 54px; height: 54px; background: #000; }
.atc[data-layout="broadcast"] .atc-badge { width: 22px; right: -6px; bottom: -5px; }
.atc[data-layout="broadcast"] .atc-latest-name { font-size: 22px; font-weight: 500; letter-spacing: .03em; }
.atc[data-layout="broadcast"] .atc-latest-desc { font-family: 'Roboto Condensed', sans-serif; text-transform: none; font-size: 15px; opacity: .75; -webkit-line-clamp: 1; }
.atc[data-layout="broadcast"] .atc-latest-meta { font-size: 12px; letter-spacing: .14em; opacity: .65; }

/* ---------- HUD ---------- */
.atc[data-layout="hud"] {
  --hud: var(--atc-fill, #2be4ff);
  --atc-theme-font: 'Roboto Condensed', sans-serif;
  width: 540px; padding: 22px 24px 20px;
  background: linear-gradient(160deg, rgba(4,22,32,.9), rgba(3,10,18,.92));
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  filter: drop-shadow(0 0 1px var(--hud));
}
.atc[data-layout="hud"] .atc-fx {
  background:
    linear-gradient(var(--hud), var(--hud)) top left / 70px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top left / 2px 50px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 70px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 2px 50px no-repeat,
    repeating-linear-gradient(0deg, rgba(43,228,255,.04) 0 1px, transparent 1px 4px);
  border: 1px solid color-mix(in srgb, var(--hud) 35%, transparent);
  clip-path: inherit;
}
.atc[data-layout="hud"] .atc-main { row-gap: 14px; }
.atc[data-layout="hud"] .atc-game { font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #e9fbff; }
.atc[data-layout="hud"] .atc-stats { flex-direction: column; align-items: flex-end; gap: 2px; font-family: 'Orbitron', sans-serif; }
.atc[data-layout="hud"] .atc-pct { font-size: 32px; font-weight: 700; color: var(--hud); text-shadow: 0 0 14px color-mix(in srgb, var(--hud) 70%, transparent); line-height: 1; }
.atc[data-layout="hud"] .atc-count { font-size: 13px; color: #9fdcea; letter-spacing: .1em; }
.atc[data-layout="hud"] .atc-bar { height: 14px; overflow: visible; }
.atc[data-layout="hud"] .atc-bar-fill { display: none; }
.atc[data-layout="hud"] .atc-bar-segs { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; height: 100%; }
.atc[data-layout="hud"] .atc-bar-segs i { background: color-mix(in srgb, var(--hud) 14%, transparent); transform: skewX(-20deg); }
.atc[data-layout="hud"] .atc-bar-segs i.on { background: var(--hud); box-shadow: 0 0 10px color-mix(in srgb, var(--hud) 70%, transparent); }
.atc[data-layout="hud"] .atc-latest { padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--hud) 35%, transparent); }
.atc[data-layout="hud"] .atc-latest-label { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .26em; color: var(--hud); text-transform: uppercase; margin-bottom: 10px; }
.atc[data-layout="hud"] .atc-latest-label::before { content: '▸ '; }
.atc[data-layout="hud"] .atc-icon { width: 64px; height: 64px; padding: 4px; background: rgba(43,228,255,.06); outline: 1px solid color-mix(in srgb, var(--hud) 60%, transparent); outline-offset: 3px; }
.atc[data-layout="hud"] .atc-icon-img { border-radius: 0; }
.atc[data-layout="hud"] .atc-badge { width: 24px; right: -10px; bottom: -10px; }
.atc[data-layout="hud"] .atc-latest-name { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.atc[data-layout="hud"] .atc-latest-desc { font-size: 15px; color: #a9cfd9; -webkit-line-clamp: 1; }
.atc[data-layout="hud"] .atc-latest-meta { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .14em; color: #6fb6c6; text-transform: uppercase; margin-top: 4px; }
.atc[data-layout="hud"] .atc-chip { color: var(--atc-tier); border: 1px solid currentColor; padding: 1px 6px; }

/* ---------- Orbit ---------- */
.atc[data-layout="orbit"] {
  --atc-theme-font: 'Poppins', sans-serif;
  display: inline-block; padding: 14px 26px 14px 14px; border-radius: 100px 28px 28px 100px;
  background: linear-gradient(90deg, rgba(10,12,20,.92), rgba(16,20,30,.86));
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.atc[data-layout="orbit"] .atc-main { grid-template-areas: "ring head" "ring latest"; grid-template-columns: 150px minmax(0, 330px); column-gap: 22px; row-gap: 10px; align-items: center; }
.atc[data-layout="orbit"] .atc-bar { display: none; }
.atc[data-layout="orbit"] .atc-ring { display: block; width: 150px; height: 150px; }
.atc[data-layout="orbit"].no-bar .atc-ring, .atc[data-layout="orbit"].no-total .atc-ring { display: none; }
.atc[data-layout="orbit"].no-bar .atc-main, .atc[data-layout="orbit"].no-total .atc-main { grid-template-areas: "head" "latest"; grid-template-columns: minmax(0, 360px); padding-left: 14px; }
.atc[data-layout="orbit"] .atc-ring-track { stroke: rgba(255,255,255,.09); stroke-width: 9; }
.atc[data-layout="orbit"] .atc-ring-fill { stroke: var(--atc-fill, var(--atc-accent)); stroke-width: 9; filter: drop-shadow(0 0 6px var(--atc-fill, var(--atc-accent))); }
.atc[data-layout="orbit"] .atc-ring-pct { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.atc[data-layout="orbit"] .atc-ring-sub { font-size: 14px; opacity: .6; margin-top: 4px; }
.atc[data-layout="orbit"].no-pct .atc-ring-pct, .atc[data-layout="orbit"].no-count .atc-ring-sub { display: none; }
.atc[data-layout="orbit"] .atc-stats { display: none; }
.atc[data-layout="orbit"] .atc-head { align-self: end; }
.atc[data-layout="orbit"] .atc-game { font-size: 22px; font-weight: 600; }
.atc[data-layout="orbit"] .atc-latest { align-self: start; background: rgba(255,255,255,.05); border-radius: 16px; padding: 10px 12px; }
.atc[data-layout="orbit"] .atc-latest-label { display: none; }
.atc[data-layout="orbit"] .atc-icon { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px var(--atc-tier); }
.atc[data-layout="orbit"] .atc-icon-img { border-radius: 50%; }
.atc[data-layout="orbit"] .atc-badge { width: 20px; right: -6px; bottom: -4px; }
.atc[data-layout="orbit"] .atc-latest-name { font-size: 15px; font-weight: 600; }
.atc[data-layout="orbit"] .atc-latest-desc { font-size: 12px; opacity: .65; -webkit-line-clamp: 1; }
.atc[data-layout="orbit"] .atc-latest-meta { font-size: 11px; opacity: .55; }
.atc[data-layout="orbit"] .atc-chip { color: var(--atc-tier); opacity: 1; font-weight: 600; }

/* ---------- Hairline ---------- */
.atc[data-layout="hairline"] { --atc-theme-font: 'Inter', sans-serif; width: 420px; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
.atc[data-layout="hairline"] .atc-main { grid-template-areas: "head" "stats" "bar" "latest"; row-gap: 8px; }
.atc[data-layout="hairline"] .atc-head { display: contents; }
.atc[data-layout="hairline"] .atc-title { grid-area: head; }
.atc[data-layout="hairline"] .atc-game { font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.atc[data-layout="hairline"] .atc-stats { grid-area: stats; justify-content: space-between; align-items: baseline; }
.atc[data-layout="hairline"] .atc-count { font-size: 64px; font-weight: 200; letter-spacing: -.04em; line-height: .95; }
.atc[data-layout="hairline"] .atc-sep, .atc[data-layout="hairline"] .atc-total { font-size: 26px; opacity: .55; font-weight: 300; letter-spacing: 0; }
.atc[data-layout="hairline"] .atc-pct { font-size: 20px; font-weight: 300; opacity: .85; }
.atc[data-layout="hairline"] .atc-bar { height: 2px; background: rgba(255,255,255,.25); overflow: visible; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
.atc[data-layout="hairline"] .atc-bar-fill { background: var(--atc-fill, #fff); }
.atc[data-layout="hairline"] .atc-bar-fill::after { content: ''; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; box-shadow: 0 0 10px var(--atc-fill, #fff); }
.atc[data-layout="hairline"] .atc-latest { margin-top: 6px; }
.atc[data-layout="hairline"] .atc-latest-label { display: none; }
.atc[data-layout="hairline"] .atc-icon { width: 30px; height: 30px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.atc[data-layout="hairline"] .atc-badge { display: none; }
.atc[data-layout="hairline"] .atc-latest-row { gap: 10px; }
.atc[data-layout="hairline"] .atc-latest-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.atc[data-layout="hairline"] .atc-latest-name { font-size: 15px; font-weight: 600; flex: 0 1 auto; }
.atc[data-layout="hairline"] .atc-latest-desc { display: none; }
.atc[data-layout="hairline"] .atc-latest-meta { font-size: 13px; opacity: .65; flex: none; }
.atc[data-layout="hairline"] .atc-chip { display: none; }

/* ---------- Arcade ---------- */
.atc[data-layout="arcade"] {
  --px: #ffe14d; --pxg: var(--atc-fill, #3cff6b);
  --atc-theme-font: 'Press Start 2P', monospace;
  width: 560px; padding: 22px; background: #120428; image-rendering: pixelated;
  box-shadow: 0 -6px 0 0 #120428, 0 6px 0 0 #120428, -6px 0 0 0 #120428, 6px 0 0 0 #120428,
    0 -12px 0 0 #ff4fd8, 0 12px 0 0 #ff4fd8, -12px 0 0 0 #ff4fd8, 12px 0 0 0 #ff4fd8,
    -6px -6px 0 0 #ff4fd8, 6px -6px 0 0 #ff4fd8, -6px 6px 0 0 #ff4fd8, 6px 6px 0 0 #ff4fd8,
    0 18px 0 6px rgba(0,0,0,.45);
  margin: 12px;
}
.atc[data-layout="arcade"] .atc-fx { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); }
.atc[data-layout="arcade"] .atc-main { row-gap: 16px; }
.atc[data-layout="arcade"] .atc-game { font-size: 16px; line-height: 1.4; color: #fff; text-shadow: 3px 3px 0 #ff4fd8; text-transform: uppercase; }
.atc[data-layout="arcade"] .atc-stats { flex-direction: column; align-items: flex-end; gap: 8px; }
.atc[data-layout="arcade"] .atc-count { font-size: 18px; color: var(--px); text-shadow: 3px 3px 0 #a2410e; }
.atc[data-layout="arcade"] .atc-pct { font-size: 12px; color: var(--pxg); }
.atc[data-layout="arcade"] .atc-bar { height: 24px; padding: 4px; background: #000; box-shadow: 0 0 0 4px #fff; margin: 4px; }
.atc[data-layout="arcade"] .atc-bar-fill { display: none; }
.atc[data-layout="arcade"] .atc-bar-segs { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 100%; }
.atc[data-layout="arcade"] .atc-bar-segs i { background: #1c2a1f; }
.atc[data-layout="arcade"] .atc-bar-segs i.on { background: var(--pxg); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.35); }
.atc[data-layout="arcade"] .atc-latest-label { font-size: 10px; color: var(--px); margin-bottom: 12px; }
.atc[data-layout="arcade"] .atc-latest-label::before { content: '★ '; }
.atc[data-layout="arcade"] .atc-icon { width: 64px; height: 64px; box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000; margin: 8px; image-rendering: pixelated; }
.atc[data-layout="arcade"] .atc-icon-img { border-radius: 0; image-rendering: pixelated; }
.atc[data-layout="arcade"] .atc-badge { width: 22px; right: -14px; bottom: -14px; }
.atc[data-layout="arcade"] .atc-latest-name { font-size: 13px; line-height: 1.5; text-transform: uppercase; color: #fff; }
.atc[data-layout="arcade"] .atc-latest-desc { font-family: 'VT323', monospace; font-size: 20px; line-height: 1; color: #c9b8ff; margin-top: 4px; }
.atc[data-layout="arcade"] .atc-latest-meta { font-family: 'VT323', monospace; font-size: 18px; color: #8f7fc4; margin-top: 2px; }
.atc[data-layout="arcade"] .atc-chip { color: var(--atc-tier); }
.atc[data-layout="arcade"].is-new .atc-latest-label { animation: atc-blink .3s steps(2) 6; }
@keyframes atc-blink { 50% { opacity: 0; } }

/* ---------- Neon ---------- */
.atc[data-layout="neon"] {
  --neon: var(--atc-fill, #ff3df2); --neon2: #2de2ff;
  --atc-theme-font: 'Kanit', sans-serif;
  width: 540px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,6,36,.94), rgba(8,4,22,.94));
  border: 2px solid var(--neon);
  box-shadow: 0 0 12px var(--neon), 0 0 34px color-mix(in srgb, var(--neon) 55%, transparent), inset 0 0 22px color-mix(in srgb, var(--neon) 30%, transparent);
}
.atc[data-layout="neon"] .atc-fx {
  top: auto; height: 46%; opacity: .45;
  background: linear-gradient(transparent 0, rgba(8,4,22,.9) 100%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--neon2) 60%, transparent) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--neon2) 60%, transparent) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000);
}
.atc[data-layout="neon"] .atc-main { row-gap: 16px; }
.atc[data-layout="neon"] .atc-game { font-size: 30px; font-weight: 700; font-style: italic; line-height: 1.15; padding-right: 4px; color: #fff; text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon); }
.atc[data-layout="neon"] .atc-stats { flex-direction: column; align-items: flex-end; gap: 0; }
.atc[data-layout="neon"] .atc-pct { font-size: 34px; font-weight: 600; font-style: italic; color: var(--neon2); text-shadow: 0 0 10px var(--neon2); line-height: 1; }
.atc[data-layout="neon"] .atc-count { font-size: 15px; opacity: .8; }
.atc[data-layout="neon"] .atc-bar { height: 12px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--neon2) 70%, transparent); overflow: visible; }
.atc[data-layout="neon"] .atc-bar-fill { border-radius: 99px; inset: 1.5px auto 1.5px 1.5px; background: linear-gradient(90deg, var(--neon), var(--neon2)); box-shadow: 0 0 12px var(--neon), 0 0 22px var(--neon2); }
.atc[data-layout="neon"] .atc-latest { border-top: 1px solid color-mix(in srgb, var(--neon) 40%, transparent); padding-top: 14px; }
.atc[data-layout="neon"] .atc-latest-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 8px var(--neon); margin-bottom: 10px; }
.atc[data-layout="neon"] .atc-icon { width: 66px; height: 66px; border-radius: 12px; border: 2px solid var(--neon2); box-shadow: 0 0 14px var(--neon2); }
.atc[data-layout="neon"] .atc-badge { width: 24px; right: -9px; bottom: -8px; }
.atc[data-layout="neon"] .atc-latest-name { font-size: 20px; font-weight: 600; }
.atc[data-layout="neon"] .atc-latest-desc { font-size: 14px; opacity: .75; font-weight: 300; }
.atc[data-layout="neon"] .atc-latest-meta { font-size: 13px; opacity: .65; font-weight: 300; }
.atc[data-layout="neon"] .atc-chip { color: var(--atc-tier); opacity: 1; font-weight: 500; }

/* ---------- Collector card ---------- */
.atc[data-layout="collector"] {
  --atc-theme-font: 'Montserrat', sans-serif;
  width: 320px; padding: 4px; border-radius: 20px;
  background: conic-gradient(from var(--holo, 0deg), #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7cffcb, #fffb96, #ff6ad5);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  animation: atc-holo 8s linear infinite;
}
@property --holo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes atc-holo { to { --holo: 360deg; } }
.atc[data-layout="collector"] .atc-art { display: block; inset: 4px 4px auto 4px; height: 190px; border-radius: 16px 16px 0 0; }
.atc[data-layout="collector"] .atc-art-img { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.atc[data-layout="collector"] .atc-fx { inset: 4px; border-radius: 16px; background: linear-gradient(#0d1117, #0d1117); z-index: -1; }
.atc[data-layout="collector"] .atc-main { grid-template-areas: "latest" "head" "bar"; padding: 112px 22px 22px; row-gap: 12px; text-align: center; }
.atc[data-layout="collector"].no-art .atc-main { padding-top: 26px; }
.atc[data-layout="collector"] .atc-latest-row { flex-direction: column; gap: 12px; }
.atc[data-layout="collector"] .atc-latest-label { display: none; }
.atc[data-layout="collector"] .atc-icon { width: 112px; height: 112px; border-radius: 50%; padding: 4px; background: conic-gradient(var(--atc-tier), color-mix(in srgb, var(--atc-tier) 30%, #000), var(--atc-tier)); box-shadow: 0 0 26px color-mix(in srgb, var(--atc-tier) 70%, transparent), 0 10px 24px rgba(0,0,0,.6); }
.atc[data-layout="collector"] .atc-icon-img { border-radius: 50%; }
.atc[data-layout="collector"] .atc-badge { width: 34px; right: -2px; bottom: -2px; }
.atc[data-layout="collector"] .atc-latest-name { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: normal; color: var(--atc-tier); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.atc[data-layout="collector"] .atc-latest-desc { font-size: 13px; opacity: .78; margin-top: 4px; -webkit-line-clamp: 3; }
.atc[data-layout="collector"] .atc-latest-meta { justify-content: center; font-size: 11px; opacity: .55; margin-top: 8px; letter-spacing: .04em; }
.atc[data-layout="collector"] .atc-head { flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.atc[data-layout="collector"] .atc-title { width: 100%; }
.atc[data-layout="collector"] .atc-game { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.atc[data-layout="collector"] .atc-stats { width: 100%; justify-content: space-between; }
.atc[data-layout="collector"] .atc-count { font-size: 15px; font-weight: 700; }
.atc[data-layout="collector"] .atc-pct { font-size: 15px; font-weight: 700; color: var(--atc-accent); }
.atc[data-layout="collector"] .atc-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
.atc[data-layout="collector"] .atc-bar-fill { border-radius: 99px; background: linear-gradient(90deg, #ff6ad5, #94d0ff, #7cffcb); }
.atc[data-layout="collector"] .atc-latest-row::after { border-radius: 50%; inset: auto; width: 120px; height: 120px; left: calc(50% - 60px); top: -4px; }

/* ---------- Editorial ---------- */
.atc[data-layout="editorial"] {
  --atc-theme-font: 'Inter', sans-serif;
  width: 520px; padding: 22px 26px 22px; color: #1b1a17; border-radius: 4px;
  background: #f5f0e6; box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.atc[data-layout="editorial"] .atc-fx { background: radial-gradient(circle at 100% 0, rgba(0,0,0,.05), transparent 50%); }
.atc[data-layout="editorial"] .atc-main { row-gap: 14px; }
.atc[data-layout="editorial"] .atc-head { align-items: flex-end; border-bottom: 2px solid #1b1a17; padding-bottom: 12px; }
.atc[data-layout="editorial"] .atc-game { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.atc[data-layout="editorial"] .atc-stats { flex-direction: column; align-items: flex-end; gap: 2px; }
.atc[data-layout="editorial"] .atc-pct { font-family: 'Playfair Display', serif; font-size: 58px; font-weight: 800; line-height: .9; letter-spacing: -.03em; }
.atc[data-layout="editorial"] .atc-count { font-size: 12px; font-weight: 600; letter-spacing: .18em; color: #8a7f6b; }
.atc[data-layout="editorial"] .atc-bar { height: 4px; background: #ddd4c3; }
.atc[data-layout="editorial"] .atc-bar-fill { background: var(--atc-fill, #1b1a17); }
.atc[data-layout="editorial"] .atc-latest-label { font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #8a7f6b; margin-bottom: 10px; }
.atc[data-layout="editorial"] .atc-icon { width: 62px; height: 62px; border-radius: 2px; box-shadow: 0 0 0 1px #1b1a17, 4px 4px 0 #d8cfbd; background: #1b1a17; }
.atc[data-layout="editorial"] .atc-badge { width: 22px; right: -8px; bottom: -8px; filter: none; }
.atc[data-layout="editorial"] .atc-latest-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; font-style: italic; }
.atc[data-layout="editorial"] .atc-latest-desc { font-size: 13px; color: #4b463c; line-height: 1.4; margin-top: 2px; }
.atc[data-layout="editorial"] .atc-latest-meta { font-size: 11px; color: #8a7f6b; letter-spacing: .06em; margin-top: 4px; }
.atc[data-layout="editorial"] .atc-chip { font-weight: 700; color: #1b1a17; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; border: 1px solid #1b1a17; padding: 1px 6px; }

/* ---------- Spotlight ---------- */
.atc[data-layout="spotlight"] {
  --atc-theme-font: 'Montserrat', sans-serif;
  width: 480px; padding: 26px 26px 20px; border-radius: 22px; overflow: hidden;
  background: #0b0d13;
  border: 1px solid color-mix(in srgb, var(--atc-tier) 30%, transparent);
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
/* Rays sit on the icon itself so they always centre on it and fade out before the card edge. */
.atc[data-layout="spotlight"] .atc-icon::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--atc-tier) 42%, transparent) 0, transparent 34%), repeating-conic-gradient(color-mix(in srgb, var(--atc-tier) 20%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 14%, rgba(0,0,0,.45) 42%, transparent 78%); mask-image: radial-gradient(circle closest-side, #000 14%, rgba(0,0,0,.45) 42%, transparent 78%);
  animation: atc-spin 60s linear infinite;
}
@keyframes atc-spin { to { transform: rotate(360deg); } }
.atc[data-layout="spotlight"] .atc-main { grid-template-areas: "latest" "head" "bar"; row-gap: 14px; }
.atc[data-layout="spotlight"] .atc-latest-row { gap: 22px; }
.atc[data-layout="spotlight"] .atc-latest-label { display: none; }
.atc[data-layout="spotlight"] .atc-icon { width: 100px; height: 100px; border-radius: 50%; padding: 4px; background: conic-gradient(var(--atc-tier), #fff8, var(--atc-tier), #0008, var(--atc-tier)); box-shadow: 0 0 34px color-mix(in srgb, var(--atc-tier) 70%, transparent); }
.atc[data-layout="spotlight"] .atc-icon-img { border-radius: 50%; }
.atc[data-layout="spotlight"] .atc-badge { width: 32px; right: -4px; bottom: -2px; }
.atc[data-layout="spotlight"] .atc-latest-text::before { content: 'Unlocked'; display: block; font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--atc-tier); margin-bottom: 4px; }
.atc[data-layout="spotlight"] .atc-latest-name { font-size: 26px; font-weight: 800; line-height: 1.1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.atc[data-layout="spotlight"] .atc-latest-desc { font-size: 14px; opacity: .72; margin-top: 4px; }
.atc[data-layout="spotlight"] .atc-latest-meta { font-size: 12px; opacity: .55; margin-top: 6px; }
.atc[data-layout="spotlight"] .atc-chip { color: var(--atc-tier); opacity: 1; font-weight: 700; }
.atc[data-layout="spotlight"] .atc-head { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; gap: 10px; }
.atc[data-layout="spotlight"] .atc-cover { display: block; width: 36px; height: 36px; border-radius: 8px; }
.atc[data-layout="spotlight"] .atc-game { font-size: 15px; font-weight: 600; opacity: .9; }
.atc[data-layout="spotlight"] .atc-count { font-size: 14px; font-weight: 700; }
.atc[data-layout="spotlight"] .atc-pct { font-size: 14px; font-weight: 700; color: #0b0d13; background: var(--atc-fill, var(--atc-tier)); padding: 2px 8px; border-radius: 99px; }
.atc[data-layout="spotlight"] .atc-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); }
.atc[data-layout="spotlight"] .atc-bar-fill { border-radius: 99px; background: var(--atc-fill, var(--atc-tier)); }
.atc[data-layout="spotlight"].no-latest-data .atc-head { border-top: 0; padding-top: 0; }
.atc[data-layout="spotlight"] .atc-latest-row::after { border-radius: 50%; inset: auto; width: 108px; height: 108px; left: -4px; top: calc(50% - 54px); }

/* ---------- Capsule ---------- */
.atc[data-layout="capsule"] {
  --atc-theme-font: 'Poppins', sans-serif;
  display: inline-block; padding: 8px 20px 8px 8px; border-radius: 999px;
  background: rgba(12,14,22,.9); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.atc[data-layout="capsule"] .atc-main { grid-template-areas: "head bar latest"; grid-template-columns: auto auto auto; align-items: center; column-gap: 16px; }
.atc[data-layout="capsule"] .atc-head { gap: 12px; }
.atc[data-layout="capsule"] .atc-cover { display: block; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 2px var(--atc-accent); }
.atc[data-layout="capsule"] .atc-title { max-width: 220px; }
.atc[data-layout="capsule"] .atc-game { font-size: 16px; font-weight: 600; }
.atc[data-layout="capsule"] .atc-stats { gap: 6px; }
.atc[data-layout="capsule"] .atc-count { font-size: 18px; font-weight: 700; }
.atc[data-layout="capsule"] .atc-sep, .atc[data-layout="capsule"] .atc-total { opacity: .5; font-weight: 500; }
.atc[data-layout="capsule"] .atc-pct { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--atc-fill, var(--atc-accent)); color: #0c0e16; }
.atc[data-layout="capsule"] .atc-bar { width: 140px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); }
.atc[data-layout="capsule"] .atc-bar-fill { border-radius: 99px; background: var(--atc-fill, var(--atc-accent)); }
.atc[data-layout="capsule"] .atc-latest { border-left: 1px solid rgba(255,255,255,.12); padding-left: 16px; max-width: 280px; }
.atc[data-layout="capsule"] .atc-latest-label { display: none; }
.atc[data-layout="capsule"] .atc-latest-row { gap: 10px; }
.atc[data-layout="capsule"] .atc-icon { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px var(--atc-tier); }
.atc[data-layout="capsule"] .atc-icon-img { border-radius: 50%; }
.atc[data-layout="capsule"] .atc-badge { width: 18px; right: -5px; bottom: -4px; }
.atc[data-layout="capsule"] .atc-latest-name { font-size: 14px; font-weight: 600; }
.atc[data-layout="capsule"] .atc-latest-desc { display: none; }
.atc[data-layout="capsule"] .atc-latest-meta { font-size: 11px; opacity: .55; }
.atc[data-layout="capsule"] .atc-chip { display: none; }
.atc[data-layout="capsule"] .atc-latest-row::after { border-radius: 99px; }

/* ---------- Persona 5 Inspired ---------- */
@font-face { font-family: 'ExposeRegular'; src: url('../fonts/Expose-Regular.otf') format('opentype'); font-display: block; }
.atc[data-layout="persona"] {
  --atc-theme-font: 'Alegreya Sans', sans-serif;
  --p5-red: #e5191c;
  --p5-fill: var(--atc-fill, var(--p5-red));
  --p5-pop: cubic-bezier(.34, 1.56, .64, 1);
  --p5-head: 'ExposeRegular', 'Anton', sans-serif;
  width: 540px; padding: 30px 40px 34px 36px;
  filter: drop-shadow(7px 9px 0 rgba(0,0,0,.5));
}
.atc[data-layout="persona"]::before {
  content: ''; position: absolute; z-index: -1; inset: -12px -18px -16px -8px;
  background: radial-gradient(circle, rgba(0,0,0,.3) 1.5px, transparent 2px) 0 0 / 9px 9px, var(--p5-red);
  clip-path: polygon(2% 9%, 63% 0, 98% 5%, 100% 84%, 90% 100%, 34% 95%, 0 99%);
  transform: rotate(-2.4deg);
}
.atc[data-layout="persona"] .atc-fx {
  z-index: -1; overflow: visible; background: #fff;
  clip-path: polygon(0 5%, 58% 1%, 97% 0, 100% 90%, 70% 97%, 3% 100%);
}
.atc[data-layout="persona"] .atc-fx::before {
  content: ''; position: absolute; inset: 6px;
  background: repeating-linear-gradient(-62deg, transparent 0 22px, rgba(255,255,255,.035) 22px 44px), #050505;
  clip-path: polygon(0 5%, 58% 1%, 97% 0, 100% 90%, 70% 97%, 3% 100%);
}
.atc[data-layout="persona"] .atc-art { display: block; inset: 6px; clip-path: polygon(0 5%, 58% 1%, 97% 0, 100% 90%, 70% 97%, 3% 100%); }
.atc[data-layout="persona"] .atc-art-img { filter: grayscale(1) contrast(1.7) brightness(.9); opacity: .2; -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%); mask-image: linear-gradient(100deg, transparent 25%, #000 75%); }
.atc[data-layout="persona"] .atc-main { row-gap: 20px; }

.atc[data-layout="persona"] .atc-head { gap: 18px; align-items: flex-end; }
.atc[data-layout="persona"] .atc-game {
  font-family: var(--p5-head); font-size: 36px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--p5-red); transform: rotate(-3deg) skewX(-6deg); transform-origin: left bottom; padding: 2px 4px 0 0;
}
.atc[data-layout="persona"] .atc-stats { gap: 14px; align-items: center; padding-bottom: 2px; }
.atc[data-layout="persona"] .atc-count {
  font-family: 'Anton', sans-serif; font-size: 30px; line-height: 1; color: #000; background: #fff; padding: 6px 14px 5px;
  transform: rotate(4deg) skewX(-10deg); box-shadow: 5px 5px 0 var(--p5-red);
}
.atc[data-layout="persona"] .atc-earned { color: var(--p5-red); }
.atc[data-layout="persona"] .atc-total { font-size: .72em; }
.atc[data-layout="persona"] .atc-pct {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 74px; height: 74px; margin: -16px -14px -14px 0;
  font-family: 'Anton', sans-serif; font-size: 21px; color: #fff; transform: rotate(-8deg); text-shadow: 2px 2px 0 #000;
}
.atc[data-layout="persona"] .atc-pct::before, .atc[data-layout="persona"] .atc-pct::after {
  content: ''; position: absolute; z-index: -1; inset: 0;
  clip-path: polygon(50% 6%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 88.1% 28%, 84.8% 40.7%, 100% 50%, 84.8% 59.3%, 88.1% 72%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%, 50% 94%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 11.9% 72%, 15.2% 59.3%, 0 50%, 15.2% 40.7%, 11.9% 28%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%);
  animation: atc-spin 24s linear infinite;
}
.atc[data-layout="persona"] .atc-pct::before { inset: -5px; background: #fff; }
.atc[data-layout="persona"] .atc-pct::after { background: var(--p5-red); }

.atc[data-layout="persona"] .atc-bar {
  height: 16px; margin: 0 8px; overflow: visible; background: #1a1a1a;
  transform: skewX(-28deg); box-shadow: 0 0 0 3px #fff, 6px 6px 0 3px var(--p5-red);
}
.atc[data-layout="persona"] .atc-bar-fill { background: repeating-linear-gradient(-45deg, var(--p5-fill) 0 9px, color-mix(in srgb, var(--p5-fill) 70%, #000) 9px 18px); background-size: 25.5px 100%; }
.atc[data-layout="persona"] .atc-bar-fill::after { content: ''; position: absolute; right: -3px; top: -7px; bottom: -7px; width: 6px; background: #fff; }
.atc[data-layout="persona"] .atc-bar-fill[style*="width: 0%"]::after { display: none; }

.atc[data-layout="persona"] .atc-latest { position: relative; margin-top: 4px; }
.atc[data-layout="persona"] .atc-latest-label { display: flex; align-items: flex-end; margin: 0 0 12px -4px; transform: rotate(-4deg); transform-origin: left; }
.atc[data-layout="persona"] .atc-latest-row { gap: 22px; align-items: flex-start; }
.atc[data-layout="persona"] .atc-icon { width: 88px; height: 88px; margin: 4px 0 0 6px; isolation: isolate; transform: rotate(-6deg); }
.atc[data-layout="persona"] .atc-icon::before {
  content: ''; position: absolute; z-index: -1; inset: -26px; background: var(--p5-red);
  clip-path: polygon(50% 10%, 54.9% 28.6%, 71.7% 5%, 63.7% 32.8%, 81.3% 25.1%, 69.8% 40.5%, 98.7% 38.9%, 72% 50%, 89% 58.9%, 69.8% 59.5%, 89.1% 81.2%, 63.7% 67.2%, 67.4% 86%, 54.9% 71.4%, 50% 100%, 45.1% 71.4%, 32.6% 86%, 36.3% 67.2%, 10.9% 81.2%, 30.2% 59.5%, 11% 58.9%, 28% 50%, 1.3% 38.9%, 30.2% 40.5%, 18.7% 25.1%, 36.3% 32.8%, 28.3% 5%, 45.1% 28.6%);
}
.atc[data-layout="persona"] .atc-icon-img { border: 4px solid #fff; background: #000; box-shadow: 6px 6px 0 #000; }
.atc[data-layout="persona"].no-latest-icon .atc-icon { background: #000; outline: 4px solid #fff; }
.atc[data-layout="persona"] .atc-badge { width: 36px; right: -14px; bottom: -10px; }
.atc[data-layout="persona"] .atc-latest-name {
  font-family: var(--p5-head); font-size: 27px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase;
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  transform: skewX(-6deg); text-shadow: 3px 3px 0 var(--p5-red);
}
.atc[data-layout="persona"] .atc-latest-desc { font-size: 17px; font-weight: 800; line-height: 1.2; margin-top: 4px; opacity: .92; }
.atc[data-layout="persona"] .atc-latest-meta { gap: 12px; margin-top: 10px; }
.atc[data-layout="persona"] .atc-time {
  padding: 1px 8px; background: #fff; color: #000; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--p5-red);
}
.atc[data-layout="persona"] .atc-chip {
  padding: 1px 9px; background: var(--atc-tier); color: #000; font-size: 14px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(3deg) skewX(-8deg); box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}

/* Ransom-note letters */
.atc[data-layout="persona"] .rn { display: inline-block; margin-right: 2px; padding: 2px 5px 0; font-family: var(--p5-head); font-size: 26px; line-height: 1; transform: rotate(var(--rn-r, 0deg)); }
.atc[data-layout="persona"] .rn-gap { display: inline-block; width: 10px; }
.atc[data-layout="persona"] .rn-0 { background: #fff; color: #000; --rn-r: -7deg; }
.atc[data-layout="persona"] .rn-1 { background: var(--p5-red); color: #fff; --rn-r: 5deg; font-size: 30px; }
.atc[data-layout="persona"] .rn-2 { background: #000; color: #fff; --rn-r: -3deg; box-shadow: 0 0 0 2px #fff; font-size: 22px; }
.atc[data-layout="persona"] .rn-3 { background: #fff; color: var(--p5-red); --rn-r: 8deg; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 28px; padding-top: 0; }
.atc[data-layout="persona"] .rn-4 { background: none; color: #fff; --rn-r: -5deg; font-size: 32px; -webkit-text-stroke: 1.5px #000; text-shadow: 2px 2px 0 var(--p5-red); }

/* Entrance: the red slab slams in, the panel squashes into place */
#at-card:not(.hidden) .atc[data-layout="persona"]::before { animation: p5-slab-in .5s cubic-bezier(.2,.9,.3,1) both; }
#at-card:not(.hidden) .atc[data-layout="persona"] .atc-fx { animation: p5-panel-in .6s linear .06s both; }
#at-card:not(.hidden) .atc[data-layout="persona"] .atc-art,
#at-card:not(.hidden) .atc[data-layout="persona"] .atc-main { animation: p5-text-in .35s ease-out .28s both; }

/* New unlock: shake, a red slash sweeps the card, letters stamp in one by one */
.atc[data-layout="persona"].is-new { animation: p5-shake .45s steps(2) both; }
.atc[data-layout="persona"].is-new .atc-icon { animation: p5-icon-in .6s var(--p5-pop) both; }
.atc[data-layout="persona"].is-new .atc-icon::before { animation: p5-burst 1.2s cubic-bezier(.2,.9,.3,1) both; }
.atc[data-layout="persona"].is-new .atc-latest-text { animation: p5-text-in .4s ease-out .18s both; }
.atc[data-layout="persona"].is-new .rn { animation: p5-letter-in .42s var(--p5-pop) both; animation-delay: calc(var(--i) * 45ms); }
.atc[data-layout="persona"].is-new .atc-latest-row::after { display: none; }
.atc[data-layout="persona"] .atc-main::after {
  content: ''; position: absolute; inset: -30px -40px -34px -36px; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 42%, #fff 42% 43.5%, var(--p5-red) 43.5% 56.5%, #000 56.5% 58%, transparent 58%) 100% 0 / 320% 100% no-repeat;
}
.atc[data-layout="persona"].is-new .atc-main::after { animation: p5-slash .55s cubic-bezier(.5,0,.3,1) both; }

@keyframes p5-slab-in { 0% { transform: translateX(-60px) rotate(-14deg) scaleX(.15); opacity: 0; } 60% { transform: translateX(6px) rotate(1deg) scaleX(1.04); opacity: 1; } 100% { transform: rotate(-2.4deg); } }
@keyframes p5-panel-in {
  0% { transform: scale(.08, .5) skewX(-28deg); opacity: 0; }
  22% { transform: scale(1.1, .85) skewX(10deg); opacity: 1; }
  40% { transform: scale(.95, 1.08) skewX(-5deg); }
  62% { transform: scale(1.03, .97) skewX(2deg); }
  100% { transform: none; }
}
@keyframes p5-text-in { from { opacity: 0; transform: translateX(-16px) skewX(-12deg); } to { opacity: 1; transform: none; } }
@keyframes p5-icon-in {
  0% { transform: rotate(-30deg) scale(.1); opacity: 0; }
  45% { transform: rotate(7deg) scale(1.22); opacity: 1; }
  70% { transform: rotate(-9deg) scale(.94); }
  100% { transform: rotate(-6deg); }
}
@keyframes p5-burst { 0% { transform: scale(0) rotate(-90deg); } 55% { transform: scale(1.35) rotate(12deg); } 100% { transform: none; } }
@keyframes p5-letter-in { 0% { transform: rotate(calc(var(--rn-r, 0deg) * -4)) scale(2.4); opacity: 0; } 60% { transform: rotate(var(--rn-r, 0deg)) scale(.9); opacity: 1; } 100% { transform: rotate(var(--rn-r, 0deg)); } }
@keyframes p5-shake { 0% { transform: translate(-7px, 3px) rotate(-1deg); } 25% { transform: translate(6px, -4px) rotate(1deg); } 50% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, -1px); } 100% { transform: none; } }
@keyframes p5-slash { 0% { opacity: 1; background-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .atc[data-layout="persona"], .atc[data-layout="persona"] *, .atc[data-layout="persona"]::before, .atc[data-layout="persona"] *::before, .atc[data-layout="persona"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ---------- Goal and Next up, per theme ---------- */
.atc[data-layout="capsule"] .atc-goal, .atc[data-layout="capsule"] .atc-next { display: none !important; }
.atc[data-layout="orbit"] .atc-goal, .atc[data-layout="orbit"] .atc-next { grid-column: 2; }
.atc[data-layout="spotlight"] .atc-goal-fill, .atc[data-layout="spotlight"] .atc-next-fill { background: var(--atc-fill, var(--atc-tier)); }
.atc[data-layout="collector"] .atc-goal-head, .atc[data-layout="collector"] .atc-next-label { text-align: left; }
.atc[data-layout="broadcast"] .atc-goal-head, .atc[data-layout="broadcast"] .atc-next-name { text-transform: uppercase; letter-spacing: .06em; }
.atc[data-layout="broadcast"] .atc-goal-bar, .atc[data-layout="broadcast"] .atc-next-track { border-radius: 0; transform: skewX(-20deg); }

.atc[data-layout="hud"] .atc-goal-head, .atc[data-layout="hud"] .atc-next-label { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--hud); }
.atc[data-layout="hud"] .atc-goal-bar, .atc[data-layout="hud"] .atc-next-track, .atc[data-layout="hud"] .atc-next-icon { border-radius: 0; }
.atc[data-layout="hud"] .atc-goal-bar { height: 6px; background: color-mix(in srgb, var(--hud) 14%, transparent); }
.atc[data-layout="hud"] .atc-goal-fill, .atc[data-layout="hud"] .atc-next-fill { border-radius: 0; background: var(--hud); box-shadow: 0 0 10px var(--hud); }
.atc[data-layout="hud"] .atc-next-icon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hud) 50%, transparent); }

.atc[data-layout="arcade"] .atc-goal-head { font-size: 10px; color: var(--px); }
.atc[data-layout="arcade"] .atc-next-label { font-size: 10px; color: #ff4fd8; opacity: 1; letter-spacing: 0; }
.atc[data-layout="arcade"] .atc-next-name { font-size: 10px; }
.atc[data-layout="arcade"] .atc-goal-bar { height: 10px; border-radius: 0; background: #1b0a33; box-shadow: 0 0 0 2px #fff; }
.atc[data-layout="arcade"] .atc-goal-fill, .atc[data-layout="arcade"] .atc-next-fill { border-radius: 0; background: var(--pxg); }
.atc[data-layout="arcade"] .atc-next-track { border-radius: 0; height: 4px; }
.atc[data-layout="arcade"] .atc-next-icon { border-radius: 0; box-shadow: 0 0 0 2px #fff; image-rendering: pixelated; }

.atc[data-layout="neon"] .atc-next-label { color: var(--neon2); opacity: 1; text-shadow: 0 0 8px var(--neon2); }
.atc[data-layout="neon"] .atc-goal-fill, .atc[data-layout="neon"] .atc-next-fill { background: linear-gradient(90deg, var(--neon), var(--neon2)); box-shadow: 0 0 10px var(--neon); }
.atc[data-layout="neon"] .atc-next-icon { box-shadow: 0 0 0 1.5px var(--neon2), 0 0 10px color-mix(in srgb, var(--neon2) 60%, transparent); }

.atc[data-layout="editorial"] .atc-goal-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.atc[data-layout="editorial"] .atc-next-label { color: #8a7f6b; opacity: 1; letter-spacing: .28em; font-size: 10px; }
.atc[data-layout="editorial"] .atc-goal-bar, .atc[data-layout="editorial"] .atc-next-track { border-radius: 0; background: #ddd4c3; }
.atc[data-layout="editorial"] .atc-goal-fill, .atc[data-layout="editorial"] .atc-next-fill { border-radius: 0; background: var(--atc-fill, #1b1a17); }
.atc[data-layout="editorial"] .atc-next-icon { border-radius: 2px; }
.atc[data-layout="editorial"] .atc-next-name { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14px; }
.atc[data-layout="editorial"].goal-done .atc-goal-fill { background: #b8860b; box-shadow: none; }
.atc[data-layout="editorial"].goal-done .atc-goal-val { color: #b8860b; }

.atc[data-layout="persona"] .atc-goal { margin-top: 2px; }
.atc[data-layout="persona"] .atc-goal-head { font-family: 'Anton', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg) skewX(-8deg); }
.atc[data-layout="persona"] .atc-goal-val { color: var(--p5-red); background: #fff; padding: 0 6px; }
.atc[data-layout="persona"] .atc-goal-bar { height: 10px; margin: 0 6px; border-radius: 0; overflow: visible; background: #1a1a1a; transform: skewX(-28deg); box-shadow: 0 0 0 2px #fff, 4px 4px 0 2px var(--p5-red); }
.atc[data-layout="persona"] .atc-goal-fill { border-radius: 0; background: var(--p5-fill); }
.atc[data-layout="persona"].goal-done .atc-goal-fill { background: #f6c945; box-shadow: none; }
.atc[data-layout="persona"] .atc-next-label { display: inline-block; padding: 1px 12px 2px; background: var(--p5-red); color: #fff; opacity: 1; font-family: var(--p5-head); font-size: 14px; letter-spacing: .1em; transform: rotate(-3deg) skewX(-14deg); }
.atc[data-layout="persona"] .atc-next-icon { border-radius: 0; border: 2px solid #fff; transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--p5-red); }
.atc[data-layout="persona"] .atc-next-name { font-family: var(--p5-head); font-weight: 400; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; }
.atc[data-layout="persona"] .atc-next-track { border-radius: 0; height: 5px; transform: skewX(-28deg); background: #333; }
.atc[data-layout="persona"] .atc-next-fill { border-radius: 0; background: var(--p5-fill); }
.atc[data-layout="persona"] .atc-next-val { font-family: 'Anton', sans-serif; opacity: 1; }