/* Core Companions store — same design language as the Muse Avatars picker site:
   warm cream background, white cards, warm ink text, tan lines, violet accent.
   2026-11-01 polish pass: tighter spacing scale, softer layered shadows,
   smoother motion, real keyboard-focus rings, reduced-motion support. Same
   look, same structure — just more finished. */
:root{
  --bg:#faf7f2; --card:#ffffff; --ink:#2b2622; --muted:#8a7f74;
  --line:#e9e1d6; --accent:#7c5cd6; --accent-ink:#5b3fb0; --accent-tint:#f1ecfb;
  --radius:16px; --radius-sm:10px; --radius-pill:999px; --well:#f3eee7;
  /* 8px spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --shadow-1:0 1px 2px rgba(60,40,10,.04), 0 2px 8px rgba(60,40,10,.05);
  --shadow-2:0 6px 16px rgba(60,40,10,.08), 0 14px 36px rgba(60,40,10,.10);
  --ring:0 0 0 3px rgba(124,92,214,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, #fffdf9 0%, rgba(255,253,249,0) 70%),
    var(--bg);
  color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
main,.wrap{max-width:1180px;margin:0 auto;padding:var(--s3) var(--s4) var(--s8)}
img{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
::selection{background:var(--accent-tint);color:var(--accent-ink)}

/* ---------- header / footer (picker-site pattern) ---------- */
header.site{padding:var(--s7) var(--s4) var(--s2);text-align:center}
header.site .brand{font-size:clamp(28px,5.2vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.05}
header.site .brand span{color:var(--accent)}
header.site .brand:hover{text-decoration:none}
header.site .tag{margin:var(--s3) auto 0;max-width:640px;color:var(--muted);font-size:15.5px;line-height:1.55}
nav.main{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin:var(--s4) 0 var(--s1)}
nav.main a{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--radius-pill);
  padding:8px 16px;font-size:14px;font-weight:500;box-shadow:var(--shadow-1);
  transition:border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease)}
nav.main a:hover{border-color:var(--accent);color:var(--accent-ink);text-decoration:none;transform:translateY(-1px)}
nav.main a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
nav.main a.active:hover{color:#fff;transform:none}
.preview-note{display:inline-block;margin:var(--s3) auto 0;max-width:640px;background:var(--accent-tint);
  color:var(--accent-ink);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:8px 18px;font-size:13.5px;font-weight:500;line-height:1.5}
footer.site{text-align:center;color:var(--muted);font-size:13px;padding:var(--s6) var(--s4) var(--s7);line-height:1.6;
  margin-top:var(--s7);border-top:1px solid var(--line)}

/* ---------- sections ---------- */
h1.page{margin:var(--s2) 0 var(--s1);font-size:clamp(26px,4.4vw,36px);font-weight:800;letter-spacing:-.02em;text-align:center}
h2.section{font-size:clamp(20px,2.6vw,24px);font-weight:700;letter-spacing:-.01em;margin:var(--s7) 0 var(--s1)}
.lede{text-align:center;color:var(--muted);font-size:17px;line-height:1.55;max-width:680px;margin:var(--s3) auto 0}
.section-sub{color:var(--muted);font-size:15px;line-height:1.55;margin:var(--s1) 0 0;max-width:720px}
.countline{text-align:center;color:var(--muted);font-size:14px;margin:var(--s3) 0 var(--s1)}

/* ---------- cards (picker-site pattern) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--s4);margin-top:var(--s3)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  text-align:left;padding:0;font:inherit;color:inherit;width:100%;box-shadow:var(--shadow-1)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#ddd0bd}
.card .thumb{display:block;position:relative;aspect-ratio:1/1;background:var(--well)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.card:hover .thumb img{transform:scale(1.04)}
.card .num{position:absolute;top:var(--s2);left:var(--s2);background:rgba(30,25,20,.78);color:#fff;font-size:12px;
  padding:2px 8px;border-radius:var(--radius-pill);font-weight:600;backdrop-filter:blur(3px)}
.card .meta{display:block;padding:10px 12px 12px}
.card .name{display:block;font-weight:700;font-size:16px}
.card .species{color:var(--muted);font-size:13px;margin-top:1px}
.card .type{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s2);font-size:12px;font-weight:600;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 9px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.card .priceline{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);
  margin-top:9px;padding-top:var(--s2);font-size:13px}
.card .priceline .free{color:var(--accent-ink);font-weight:700}
.card .priceline .price{font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;
  padding:12px 22px;border-radius:var(--radius-pill);font-size:15px;border:1px solid var(--ink);cursor:pointer;
  font:inherit;line-height:1.1;box-shadow:var(--shadow-1);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease), background .15s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line);font-weight:500;box-shadow:var(--shadow-1)}
.btn.alt:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.soon{background:var(--well);color:var(--muted);border:1px solid var(--line);cursor:default;box-shadow:none}
.btn.soon:hover{transform:none;box-shadow:none}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* ---------- filters (shop) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin:var(--s4) 0 var(--s1)}
.filters input[type="search"],.filters select{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:var(--radius-pill);padding:9px 16px;font-size:14px;font:inherit;box-shadow:var(--shadow-1);transition:border-color .15s var(--ease)}
.filters input[type="search"]{min-width:220px}
.filters input[type="search"]:focus,.filters select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* ---------- packs ---------- */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4);margin-top:var(--s4)}
.pack{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.pack:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#ddd0bd}
.pack h3{margin:0 0 2px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.pack .count{color:var(--muted);font-size:13px}
.pack .faces{display:flex;gap:6px;margin:var(--s3) 0}
.pack .faces img{width:44px;height:44px;object-fit:cover;border-radius:9px;background:var(--well);box-shadow:var(--shadow-1)}
.pack p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
.pack .foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s4);gap:var(--s3)}
.pack .big-price{font-size:24px;font-weight:800;letter-spacing:-.01em}

/* ---------- free dozen persona entries ---------- */
.persona{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);
  padding:var(--s4);display:grid;grid-template-columns:150px 1fr;gap:18px;margin-top:var(--s4)}
@media (max-width:640px){.persona{grid-template-columns:1fr}}
.persona>img{width:150px;height:150px;object-fit:cover;border-radius:12px;background:var(--well)}
.persona h3{margin:0 0 4px;font-size:19px;font-weight:700}
.persona .voice{color:var(--ink);font-size:14px;margin:0 0 4px}
.persona .best{color:var(--muted);font-size:14px;margin:0 0 10px}
.persona pre,.sheetbox pre{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;
  line-height:1.6;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:0;color:var(--ink)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;border-radius:var(--radius-pill);
  padding:2px 9px;vertical-align:middle}
.tag.free{background:var(--accent);color:#fff}

/* ---------- detail overlay ---------- */
.overlay{display:none;position:fixed;inset:0;background:rgba(43,38,34,.5);z-index:50;
  padding:var(--s5) var(--s3);overflow:auto;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.overlay.open{display:block;animation:overlay-in .2s var(--ease)}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.sheetbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2);
  max-width:980px;margin:0 auto;padding:var(--s5);position:relative;animation:sheet-in .24s var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheetbox .close{position:absolute;top:10px;right:12px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--radius-pill);width:36px;height:36px;font-size:18px;cursor:pointer;color:var(--ink);line-height:1;
  transition:border-color .15s var(--ease), color .15s var(--ease)}
.sheetbox .close:hover{border-color:var(--accent);color:var(--accent-ink)}
.sheetbox .cols{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:var(--s5)}
@media (max-width:820px){.sheetbox .cols{grid-template-columns:1fr}}
.sheetbox .cols>div>img{border-radius:12px;background:var(--well)}
.sheetbox h2{margin:2px 0 2px;font-size:clamp(24px,3.4vw,28px);font-weight:800;letter-spacing:-.02em}
.sheetbox .sub{color:var(--muted);font-size:15px}
table.attrs{border-collapse:collapse;margin-top:var(--s3);width:100%;max-width:520px}
table.attrs td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
table.attrs td.k{color:var(--muted);width:130px}
.sheetbox .line{font-size:16px;margin:var(--s3) 0 2px;line-height:1.5}
.sheetbox .voice{color:var(--accent-ink);font-weight:600;margin:var(--s4) 0 4px}
.sheetbox .best{color:var(--muted);font-size:14px;margin:0 0 var(--s2)}
.persona-locked{color:var(--muted);font-size:14px;background:var(--accent-tint);border:1px solid #e3d9f6;
  border-radius:12px;padding:12px 14px;margin-top:var(--s3)}
.detail-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s4)}

/* ---------- about ---------- */
.prose{max-width:720px;line-height:1.7;font-size:16px}
.prose p{margin:0 0 var(--s4)}

/* ---------- account bar + 2FA (styled here so account.js stays lean) ---------- */
#account-bar{max-width:1060px;margin:var(--s4) auto 0;padding:var(--s3) var(--s4);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-1);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px}
#account-bar .who{font-weight:700}
#account-bar .bal{font-weight:800;color:var(--accent-ink)}
#account-bar input{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px;font:inherit;background:var(--bg)}
#account-bar input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
#account-bar .note{flex-basis:100%;color:var(--muted);line-height:1.5}
#account-bar .err{flex-basis:100%;color:#b3402f}
#account-bar .btn{padding:9px 16px;font-size:14px}
.otp-row{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:var(--s1);
  padding-top:var(--s3);border-top:1px dashed var(--line)}
.otp-row input{letter-spacing:.3em;font-weight:600;text-align:center;max-width:150px}
#collection-panel .sheetbox{max-width:860px}
.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--s3);margin-top:var(--s4)}
.coll-grid button{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s2);cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease)}
.coll-grid button:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--accent)}
.coll-grid img{width:100%;border-radius:8px}
.coll-grid span{display:block;font-size:13px;margin-top:4px;font-weight:600}
.dl-row{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover,.pack:hover,.btn:hover,.coll-grid button:hover{transform:none}
  .card:hover .thumb img{transform:none}
}

/* ===== polish layer 2 (2026-11-01): depth reveal, glass, grain, refraction =====
   Reveal + grain are gated on 'html.motion', which polish.js adds only when
   motion is allowed (not reduced-motion). No-JS / reduced-motion = fully visible,
   static, and clean. Everything here is transform/opacity (GPU) only. */
html.motion .reveal{opacity:0;transform:perspective(1000px) translate3d(0,26px,0) rotateX(5deg);
  transform-origin:50% 120%;transition:opacity .6s var(--ease), transform .72s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
html.motion .reveal.in{opacity:1;transform:perspective(1000px) translate3d(0,0,0) rotateX(0)}

/* Film grain — static, decorative, never blocks input, sits under modals */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px 160px}

/* Glass — translucent blurred surfaces where they sit over content */
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  nav.main a{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25)}
  #account-bar{background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25)}
}

/* Refraction — a light sweep across a card on hover */
.card{position:relative;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 46%,transparent 60%);
  transform:translateX(-130%);opacity:0;transition:transform .75s var(--ease), opacity .3s var(--ease);mix-blend-mode:screen}
.card:hover::after{transform:translateX(130%);opacity:1}

/* GPU hint for the magnet targets */
.btn,nav.main a{will-change:transform}