/* ===================================================================
   CaptureDex APP — shared design system (Pocket Dex / V1 language)
   Ported tokens + holo-card frame from v1, plus app chrome & social UI.
   Pages add page-specific styles inline; everything here is shared.
   =================================================================== */
:root{
  --ink:#0E1116; --surface:#181E29; --surface-2:#1F2735; --surface-3:#27303F;
  --text:#F2F5F2; --muted:#9AA6B6; --line:rgba(242,245,242,.10);
  /* active category accent (re-tintable) — defaults to animals teal */
  --accent:#16B8A6; --accent-soft:rgba(22,184,166,.16); --accent-glow:rgba(22,184,166,.45);
  --r-common:#9aa3ad; --r-rare:#4f8ef7; --r-holo:#a35cff; --r-legendary:#f6b73c;
  --radius:20px; --radius-sm:13px; --shadow:0 18px 40px -22px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--text);line-height:1.5;
  background:radial-gradient(120% 70% at 50% -10%,rgba(124,132,255,.10),transparent 60%),var(--ink);
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.display{font-family:"Fredoka",sans-serif;font-weight:700;letter-spacing:-.01em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
button{font-family:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* App column — mobile first, capped, bottom space for tab bar */
.app{width:100%;max-width:460px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom));position:relative;min-height:100vh}
.muted{color:var(--muted)}
.tint{color:var(--accent)}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:12px 2px;margin-bottom:6px;
  background:linear-gradient(180deg,var(--ink) 62%,transparent);backdrop-filter:blur(6px);
}
/* The theme + notification cluster (.topright) is fixed at the top-right of the
   viewport. On narrow screens the app column reaches the screen edge, so a page's
   own topbar actions (edit, share, settings…) would sit underneath it. Reserve
   room on the right so they slot to the LEFT of the floating cluster instead.
   On wider screens the cluster floats out in the side margin, so no reserve needed. */
@media(max-width:640px){ .topbar{padding-right:96px} }
.topbar .tb-title{font-family:"Fredoka";font-weight:700;font-size:19px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;color:var(--text);
  transition:border-color .2s,background-color .2s}
.iconbtn:hover{border-color:var(--accent)}
.iconbtn svg{width:20px;height:20px}
.logo{display:flex;align-items:center;gap:9px;font-family:"Fredoka";font-weight:700;font-size:19px}
.logo-badge{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent);color:#0c0f14;font-size:19px;
  box-shadow:0 0 0 3px var(--accent-soft),0 8px 18px -8px var(--accent-glow);
  transition:background-color .4s,box-shadow .4s}
.logo b span{color:var(--accent)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:"Fredoka";
  font-weight:700;font-size:15px;border-radius:14px;padding:13px 18px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .1s,filter .2s,background-color .3s,border-color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent);color:#0b0e13;box-shadow:0 12px 26px -14px var(--accent-glow)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-block{width:100%}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:11px}

/* ---------------- chips / segmented ---------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:7px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.seg{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:4px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;white-space:nowrap;border:0;background:transparent;color:var(--muted);
  font-weight:700;font-size:13px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:.2s}
.seg button[aria-selected="true"]{background:var(--surface-3);color:var(--text)}
.catpill-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none}
.catpill-row::-webkit-scrollbar{display:none}
.catpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--line);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s}
.catpill[aria-pressed="true"]{border-color:var(--pill-hue,var(--accent));
  background:color-mix(in srgb,var(--pill-hue,var(--accent)) 18%,var(--surface));
  box-shadow:0 0 0 1px var(--pill-hue,var(--accent))}

/* ---------------- section head ---------------- */
.shead{margin:30px 0 14px}
.shead h2{font-size:23px;margin-bottom:3px}
.shead p{margin:0;color:var(--muted);font-size:14px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

/* ---------------- avatars + user rows ---------------- */
.av{flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 26%,var(--surface-2));
  box-shadow:inset 0 0 0 1px var(--line);font-size:20px}
.av.sm{width:34px;height:34px;font-size:16px}
.av.md{width:46px;height:46px;font-size:22px}
.av.lg{width:84px;height:84px;font-size:40px;box-shadow:inset 0 0 0 2px var(--accent-glow)}
.urow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:11px 12px}
.urow .ub{flex:1;min-width:0}
.urow .un{font-family:"Fredoka";font-weight:600;font-size:15px;display:flex;align-items:center;gap:7px}
.urow .uh{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.followbtn{flex:0 0 auto;font-family:"Fredoka";font-weight:700;font-size:13px;padding:8px 15px;border-radius:11px;
  background:var(--accent);color:#0b0e13;border:1.5px solid transparent;cursor:pointer;transition:.2s}
.followbtn[aria-pressed="true"]{background:transparent;color:var(--muted);border-color:var(--line)}
.followbtn[aria-pressed="true"]::after{content:"Following"}
.followbtn[aria-pressed="false"]::after{content:"Follow"}
.badge-mini{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);padding:2px 7px;border-radius:999px}

/* ---------------- stat tiles ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px 8px;text-align:center}
.stat b{font-family:"Fredoka";font-weight:700;font-size:18px;display:block}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ---------------- XP bar ---------------- */
.xp-bar{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.xp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff));
  box-shadow:0 0 14px var(--accent-glow);transition:width .5s ease}

/* ============ HOLO CARD (ported verbatim from V1) ============ */
.holo-card{--c-hue:var(--accent)}
.holo-card .card-bg{position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:radial-gradient(110% 80% at 50% 0%,color-mix(in srgb,var(--c-hue) 55%,#0b0e13),#0a0d12 78%)}
.holo-card .card-bg::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0);
  background-size:11px 11px;opacity:.4}
.holo-card .card-art{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden}
.holo-card .cap-art{display:block}
.holo-card .card-frame{position:absolute;inset:0;z-index:2;border-radius:inherit;display:flex;
  flex-direction:column;justify-content:space-between;padding:9cqw 8cqw;pointer-events:none}
.cf-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.cf-name{font-family:"Fredoka";font-weight:700;font-size:6.6cqw;line-height:1.05;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);max-width:70%}
.cf-rarity{font-family:"Fredoka";font-weight:700;font-size:3.6cqw;text-transform:uppercase;letter-spacing:.05em;
  padding:1.6cqw 3cqw;border-radius:999px;color:#0b0e13;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.cf-bottom{background:linear-gradient(180deg,transparent,rgba(8,10,14,.82) 36%);margin:0 -8cqw -9cqw;padding:9cqw 8cqw 8cqw;border-radius:inherit}
.cf-stats{display:flex;gap:4cqw;margin-bottom:4cqw}
.cf-stat{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:2.4cqw 2.6cqw;backdrop-filter:blur(2px)}
.cf-stat .l{font-size:2.7cqw;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.6);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-stat .v{font-family:"Fredoka";font-weight:600;font-size:4cqw;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-foot{display:flex;align-items:center;justify-content:space-between;font-size:3cqw;color:rgba(255,255,255,.7);font-weight:600}
.cf-foot .xp{font-family:"Fredoka";font-weight:700;color:#fff}

/* ---------- dex grid / slot (ported from V1) ---------- */
.dex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dex-slot{position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:63/88;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;padding:0;
  transition:transform .12s,border-color .2s}
.dex-slot:hover{transform:translateY(-2px)}
.dex-slot .slot-art{position:absolute;inset:0}
.dex-slot .slot-art .cap-art{width:100%;height:100%}
.dex-slot .slot-bg{position:absolute;inset:0;background:radial-gradient(110% 80% at 50% 0%,color-mix(in srgb,var(--c-hue) 50%,#0b0e13),#0a0d12)}
.dex-slot .slot-foot{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;background:linear-gradient(180deg,transparent,rgba(8,10,14,.9) 55%)}
.dex-slot .slot-name{font-size:11px;font-weight:700;color:#fff;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rarity-dot{position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.5)}
.dex-slot.locked{display:grid;place-items:center;cursor:default;
  background:repeating-linear-gradient(45deg,var(--surface) 0 8px,var(--surface-2) 8px 16px)}
.dex-slot.locked .lk{text-align:center;color:var(--muted);padding:6px;font-size:9.5px}
.dex-slot.locked .lk .ico{font-size:18px}

/* ---------- category rows (ported) ---------- */
.crow{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 14px;cursor:pointer;text-align:left;width:100%;transition:.2s}
.crow:hover{transform:translateX(2px);border-color:var(--row-hue,var(--accent))}
.cicon{width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:23px;
  background:color-mix(in srgb,var(--row-hue,var(--accent)) 20%,var(--surface-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--row-hue,var(--accent)) 45%,transparent)}
.cbody{flex:1;min-width:0}
.cbody .cn{font-family:"Fredoka";font-weight:600;font-size:16px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cbody .author{font-size:11px;font-weight:700;color:var(--row-hue,var(--accent));background:color-mix(in srgb,var(--row-hue,var(--accent)) 16%,transparent);padding:2px 8px;border-radius:999px}
.cbody .cmeta{font-size:12.5px;color:var(--muted);margin-top:1px}
.ccount{font-family:"Fredoka";font-weight:700;font-size:14px;color:var(--row-hue,var(--accent))}
.create-cat{margin-top:12px;display:flex;align-items:center;gap:13px;width:100%;background:var(--accent-soft);
  border:1.5px dashed var(--accent-glow);border-radius:var(--radius-sm);padding:15px 14px;cursor:pointer;text-align:left;transition:.2s}
.create-cat:hover{transform:translateY(-1px)}
.create-cat .plus{width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;font-size:26px;font-weight:700;background:var(--accent);color:#0b0e13}

/* ---------- feed post ---------- */
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.post-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.post-head .ub{flex:1;min-width:0}
.post-head .un{font-family:"Fredoka";font-weight:600;font-size:15px}
.post-head .pmeta{font-size:12.5px;color:var(--muted)}
.post-head .pmeta b{color:var(--text);font-weight:600}
.post-card-wrap{display:grid;place-items:center;padding:6px 0 4px;perspective:1000px}
.post-card-wrap .holo-card{width:min(300px,84vw)}
.post-actions{display:flex;align-items:center;gap:18px;margin-top:14px;font-size:14px;font-weight:600;color:var(--muted)}
.post-actions button{background:none;border:0;display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:inherit;font:inherit}
.post-actions .like[aria-pressed="true"]{color:#ff5b7f}
.post-actions svg{width:20px;height:20px}
.fresh-tag{font-family:"Fredoka";font-weight:700;font-size:10.5px;color:#0b0e13;background:var(--accent);padding:2px 8px;border-radius:999px}

/* ---------- leaderboard ---------- */
.lrow{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:11px 13px;margin-bottom:9px}
.lrow.me{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent 70%),var(--surface);box-shadow:0 0 0 1px var(--accent-glow)}
.lrow .rk{font-family:"Fredoka";font-weight:700;font-size:17px;width:30px;text-align:center;color:var(--muted)}
.lrow.top .rk{color:var(--accent)}
.lrow .lb{flex:1;min-width:0}
.lrow .ln{font-family:"Fredoka";font-weight:600;font-size:15px}
.lrow .ls{font-size:12.5px;color:var(--muted)}
.lrow .delta{font-size:12px;font-weight:700;color:#5BA94F}
.lrow .delta.down{color:#e0524d}.lrow .delta.flat{color:var(--muted)}

/* ---------- bottom sheet / modal ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(6,8,12,.6);backdrop-filter:blur(3px);
  display:none;align-items:flex-end;justify-content:center}
.scrim.open{display:flex}
.sheet{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);
  border-radius:24px 24px 0 0;padding:8px 18px calc(26px + env(safe-area-inset-bottom));max-height:86vh;overflow:auto}
.sheet .grab{width:40px;height:4px;border-radius:999px;background:var(--surface-3);margin:8px auto 14px}

/* ---------- empty / banners ---------- */
.note{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:11px 13px}

/* ===================================================================
   BOTTOM TAB BAR (injected by app.js)
   =================================================================== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:flex-end;justify-content:center;
  gap:2px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--ink) 38%);pointer-events:none}
.tabbar-inner{pointer-events:auto;width:100%;max-width:460px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  background:color-mix(in srgb,var(--surface) 92%,#000);border:1px solid var(--line);border-radius:22px;
  padding:8px 6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:10.5px;font-weight:700;transition:color .2s}
.tab svg{width:23px;height:23px}
.tab[aria-current="page"]{color:var(--accent)}
.tab.center{position:relative;justify-content:center}
.tab.center .cap-fab{width:58px;height:58px;margin:-26px auto 0;border-radius:50%;border:4px solid var(--ink);
  background:var(--accent);color:#0b0e13;display:grid;place-items:center;
  box-shadow:0 12px 26px -10px var(--accent-glow),0 0 0 5px var(--accent-soft);transition:transform .14s,background-color .4s}
.tab.center:hover .cap-fab{transform:translateY(-2px) scale(1.04)}
.tab.center .cap-fab svg{width:27px;height:27px}

/* ===================================================================
   DESKTOP
   =================================================================== */
@media(min-width:980px){
  body{background:radial-gradient(80% 60% at 80% -5%,var(--accent-soft),transparent 55%),
    radial-gradient(70% 50% at 8% 8%,rgba(124,132,255,.08),transparent 55%),var(--ink)}
  .app{max-width:720px}
  .dex-grid{grid-template-columns:repeat(5,1fr)}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.btn,.dex-slot,.crow,.tab.center .cap-fab{transition:none}}

/* ===================================================================
   LIGHT THEME — toggled via <html data-theme="light"> (dark is default).
   Collectible cards stay dark by design; only the app chrome flips.
   =================================================================== */
[data-theme="light"]{
  --ink:#F3F5F9; --surface:#FFFFFF; --surface-2:#EEF1F6; --surface-3:#E1E6EF;
  --text:#161A20; --muted:#5B6473; --line:rgba(20,26,34,.12);
}
[data-theme="light"] body{
  background:radial-gradient(120% 70% at 50% -10%,rgba(22,184,166,.10),transparent 60%),var(--ink);
}
[data-theme="light"] .topbar{background:linear-gradient(180deg,var(--ink) 62%,transparent)}
[data-theme="light"] .tabbar{background:linear-gradient(180deg,transparent,var(--ink) 38%)}
[data-theme="light"] .tabbar-inner{background:#fff;box-shadow:0 16px 36px -18px rgba(20,26,34,.28)}
[data-theme="light"] .logo-badge{color:#fff}
[data-theme="light"] .seg button[aria-selected="true"]{background:#fff;box-shadow:0 1px 3px rgba(20,26,34,.12)}
@media(min-width:980px){
  [data-theme="light"] body{background:radial-gradient(80% 60% at 80% -5%,var(--accent-soft),transparent 55%),var(--ink)}
}

/* theme toggle button — fixed top-right, injected by app.js */
.topright{position:fixed;top:12px;right:14px;z-index:60;display:flex;gap:8px;align-items:center}
.theme-btn,.notif-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  cursor:pointer;color:var(--text);position:relative;text-decoration:none;
  background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);
  backdrop-filter:blur(8px);transition:border-color .2s,transform .12s}
.theme-btn:hover,.notif-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.theme-btn svg,.notif-btn svg{width:20px;height:20px}
.notif-btn .nd{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
@media(min-width:980px){.topright{top:16px;right:24px}}

/* ===================================================================
   CARD FRAME STYLES — add one class to .holo-card (default = frame-classic).
   Pickable alongside the 10 holo styles when you capture.
   =================================================================== */
.holo-card.frame-foil::after{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c-hue) 70%,#fff),inset 0 0 0 5px rgba(0,0,0,.35)}
.holo-card.frame-clean .cf-bottom{background:none;margin-bottom:0}
.holo-card.frame-clean .cf-stats{display:none}
.holo-card.frame-clean .cf-name{text-shadow:0 2px 10px rgba(0,0,0,.85)}
.holo-card.frame-vintage::after{box-shadow:inset 0 0 0 6px #ece6d8,inset 0 0 0 7px rgba(0,0,0,.3)}
.holo-card.frame-vintage .card-frame{padding:11cqw 10cqw}
.holo-card.frame-neon::after{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c-hue) 90%,#fff),0 0 18px -2px var(--c-hue)}

/* ===================================================================
   CARD SHAPES — default is the trading-card 63:88. Add shape-* to change.
   =================================================================== */
.holo-card.shape-square{aspect-ratio:1/1}
.holo-card.shape-wide{aspect-ratio:4/5}

/* ===================================================================
   CARD TEMPLATES — themed chrome (font + frame + header) on top of the
   photo + holo. Add tpl-* to .holo-card. Default (no class) = the clean
   "Pocket Dex" look. These are previews of the LLM-picked styles.
   =================================================================== */

/* Cyber — tech/hacker: mono type, neon cyan frame, corner brackets, scan header */
.holo-card.tpl-cyber{--c-hue:#1ee8c6}
.holo-card.tpl-cyber::after{box-shadow:inset 0 0 0 1.5px #1ee8c6,inset 0 0 14px rgba(30,232,198,.35)}
.holo-card.tpl-cyber .cf-name{font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  font-weight:600;font-size:5.4cqw;text-transform:uppercase;letter-spacing:.06em;
  color:#d6fff7;text-shadow:0 0 8px rgba(30,232,198,.7)}
.holo-card.tpl-cyber .cf-rarity{font-family:ui-monospace,Menlo,monospace;border-radius:4px;
  background:#06140f !important;color:#1ee8c6;border:1px solid #1ee8c6;text-transform:uppercase}
.holo-card.tpl-cyber .cf-stat{border-radius:3px;border-color:rgba(30,232,198,.4);background:rgba(30,232,198,.10)}
.holo-card.tpl-cyber .cf-stat .v{font-family:ui-monospace,Menlo,monospace}
.holo-card.tpl-cyber .cf-foot{font-family:ui-monospace,Menlo,monospace;color:rgba(30,232,198,.85)}
.holo-card.tpl-cyber .cf-bottom{background:linear-gradient(180deg,transparent,rgba(2,12,9,.9) 40%)}

/* Arcade — retro game: chunky pixel border + drop-shadow title, hot colours */
.holo-card.tpl-arcade{--c-hue:#ff5470}
.holo-card.tpl-arcade::after{box-shadow:
  inset 0 0 0 3px #0b0b14, inset 0 0 0 6px #ffd23f, inset 0 0 0 9px #0b0b14}
.holo-card.tpl-arcade .card-frame{padding:10cqw 9cqw}
.holo-card.tpl-arcade .cf-name{font-family:"Fredoka";font-weight:700;font-size:7cqw;letter-spacing:.01em;
  color:#fff;text-shadow:3px 3px 0 #ff5470,5px 5px 0 rgba(0,0,0,.55)}
.holo-card.tpl-arcade .cf-rarity{background:#ffd23f !important;color:#0b0b14;border-radius:3px;
  box-shadow:2px 2px 0 #0b0b14;text-transform:uppercase}
.holo-card.tpl-arcade .cf-stat{background:rgba(11,11,20,.6);border-color:#ffd23f;border-radius:3px}
.holo-card.tpl-arcade .cf-foot .xp{color:#ffd23f}

/* Cute — soft sticker: thick rounded white border, pastel, rounded type */
.holo-card.tpl-cute{--c-hue:#ff8fc7;border-radius:clamp(18px,7cqw,30px)}
.holo-card.tpl-cute::after{box-shadow:inset 0 0 0 7px #fff,inset 0 0 0 9px rgba(255,143,199,.6)}
.holo-card.tpl-cute .card-frame{padding:10cqw 9cqw}
.holo-card.tpl-cute .cf-name{font-family:"Fredoka";font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.holo-card.tpl-cute .cf-rarity{border-radius:999px;background:#fff !important;color:#e85aa0;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.holo-card.tpl-cute .cf-bottom{background:linear-gradient(180deg,transparent,rgba(232,90,160,.6) 60%)}
.holo-card.tpl-cute .cf-stat{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}

/* Pokémon — thick yellow border, beige name bar + info panel, art window between */
.holo-card.tpl-poke{--c-hue:#f7c12b;border-radius:clamp(10px,4cqw,18px)}
.holo-card.tpl-poke::after{box-shadow:inset 0 0 0 7px #f7c12b,inset 0 0 0 10px #c8990f}
.holo-card.tpl-poke .cf-top{background:linear-gradient(180deg,rgba(247,242,228,.96),rgba(247,242,228,.8));
  margin:-9cqw -8cqw 0;padding:6cqw 5cqw 4cqw;align-items:center}
.holo-card.tpl-poke .cf-name{color:#17120a;text-shadow:none;font-size:5.8cqw;max-width:62%}
.holo-card.tpl-poke .cf-rarity{background:#e23b2e !important;color:#fff;border-radius:6px;font-size:3.4cqw}
.holo-card.tpl-poke .cf-bottom{background:linear-gradient(180deg,transparent,rgba(247,242,228,.96) 26%)}
.holo-card.tpl-poke .cf-stat{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.16)}
.holo-card.tpl-poke .cf-stat .l{color:rgba(0,0,0,.5)}
.holo-card.tpl-poke .cf-stat .v{color:#17120a}
.holo-card.tpl-poke .cf-foot{color:rgba(0,0,0,.6)}
.holo-card.tpl-poke .cf-foot .xp{color:#c0392b}

/* Yu-Gi-Oh — ornate brown+gold border, serif type, parchment info panel */
.holo-card.tpl-yugioh{--c-hue:#c79a3f;border-radius:clamp(6px,2.5cqw,12px)}
.holo-card.tpl-yugioh::after{box-shadow:inset 0 0 0 4px #3a2c14,inset 0 0 0 9px #c79a3f,inset 0 0 0 11px #6b5220}
.holo-card.tpl-yugioh .cf-top{background:linear-gradient(180deg,rgba(58,44,20,.94),rgba(58,44,20,.55));
  margin:-9cqw -8cqw 0;padding:7cqw 5cqw 4cqw}
.holo-card.tpl-yugioh .cf-name{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:#f4e6c0;
  text-shadow:0 1px 2px #000;font-size:5.4cqw}
.holo-card.tpl-yugioh .cf-rarity{font-family:Georgia,serif;background:#2a1d0e !important;color:#e8c878;
  border:1px solid #c79a3f;border-radius:3px}
.holo-card.tpl-yugioh .cf-bottom{background:linear-gradient(180deg,transparent,rgba(217,201,163,.96) 26%)}
.holo-card.tpl-yugioh .cf-stat{background:rgba(58,44,20,.10);border-color:rgba(58,44,20,.35);border-radius:2px}
.holo-card.tpl-yugioh .cf-stat .l{color:rgba(58,44,20,.6)}
.holo-card.tpl-yugioh .cf-stat .v{font-family:Georgia,serif;color:#2a1d0e}
.holo-card.tpl-yugioh .cf-foot{font-family:Georgia,serif;color:rgba(42,29,14,.8)}
.holo-card.tpl-yugioh .cf-foot .xp{color:#7a5a14}

/* Magic — thick black border, serif title banner, parchment text box */
.holo-card.tpl-magic{--c-hue:#b9a06a;border-radius:clamp(8px,3cqw,14px)}
.holo-card.tpl-magic::after{box-shadow:inset 0 0 0 9px #0c0a07,inset 0 0 0 12px #2e271a}
.holo-card.tpl-magic .cf-top{background:linear-gradient(180deg,rgba(40,34,22,.96),rgba(40,34,22,.6));
  margin:-9cqw -8cqw 0;padding:7cqw 4.6cqw 4cqw;border-radius:5px 5px 0 0}
.holo-card.tpl-magic .cf-name{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:#f3ead2;
  text-shadow:0 1px 2px #000;font-size:5cqw}
.holo-card.tpl-magic .cf-rarity{font-family:Georgia,serif;background:#1c1710 !important;color:#cdb985;
  border:1px solid #6b5a36;border-radius:3px}
.holo-card.tpl-magic .cf-bottom{background:linear-gradient(180deg,transparent 6%,rgba(207,196,173,.97) 30%)}
.holo-card.tpl-magic .cf-stat{background:rgba(28,23,16,.10);border-color:rgba(28,23,16,.3);border-radius:2px}
.holo-card.tpl-magic .cf-stat .l{color:rgba(28,23,16,.6)}
.holo-card.tpl-magic .cf-stat .v{font-family:Georgia,serif;color:#1c1710}
.holo-card.tpl-magic .cf-foot{font-family:Georgia,serif;color:rgba(28,23,16,.8)}
.holo-card.tpl-magic .cf-foot .xp{color:#6b5320}

/* ===================================================================
   CARD EDGES — square (straight) corners instead of the default rounded.
   Combine with any template. Defined last so it wins the border-radius.
   =================================================================== */
.holo-card.edge-sharp{border-radius:0}

/* social links row (profile) */
.socials{display:flex;gap:8px;flex-wrap:wrap}
.social{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);transition:.2s}
.social:hover{border-color:var(--accent);transform:translateY(-1px)}
.social svg{width:19px;height:19px}

/* ============ shared fullscreen card viewer (expand + spin + finger-drag) ============ */
.cdv{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:26px}
.cdv.open{display:flex}
.cdv-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;transition:opacity .35s ease}
.cdv.in .cdv-backdrop{opacity:1}
.cdv-persp{position:relative;z-index:1;width:min(360px,80vw);aspect-ratio:63/88;
  perspective:1500px;perspective-origin:50% 50%;touch-action:none;cursor:grab}
.cdv-persp:active{cursor:grabbing}
.cdv-rot{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* entry flourish: a full 360° spin + zoom-in (reliable CSS keyframe) */
@keyframes cdv-spin-in{from{transform:rotateY(-360deg) scale(.6)}to{transform:rotateY(0deg) scale(1)}}
.cdv.cdv-enter .cdv-rot{animation:cdv-spin-in .9s cubic-bezier(.2,.9,.25,1) both}
.cdv-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* NB: do NOT put container-type on .cdv-front — CSS containment makes iOS ignore
   backface-visibility:hidden, so the flipped-away front kept showing through the
   back (mirrored photo). The inner .holo-card has its own container-type, so cqw
   units still resolve. The face below carries the backface hiding + flatten. */
.cdv-front{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cdv-front .holo-card{width:100%;transform:none;transform-style:flat;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
/* branded holographic back */
.cdv-back{transform:rotateY(180deg);border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 85% at 50% 0%,color-mix(in srgb,var(--c-hue,#16b8a6) 45%,#0c0f16),#06080d 80%);
  border:1px solid color-mix(in srgb,var(--c-hue,#16b8a6) 55%,#000);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#eef2f6}
.cdv-back::before{content:"";position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 10px,transparent 10px 20px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px)}
.cdv-back::after{content:"";position:absolute;inset:-40%;opacity:.4;mix-blend-mode:color-dodge;pointer-events:none;
  background:conic-gradient(from 0deg,#ff7773,#ffed5f,#5fff9e,#5ff7ff,#7d8cff,#ff78eb,#ff7773);
  animation:cdvfoil 9s linear infinite}
@keyframes cdvfoil{to{transform:rotate(360deg)}}
.cdv-blogo{position:relative;z-index:1;width:88px;height:88px;border-radius:27px;display:grid;place-items:center;
  font-size:46px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.7)}
.cdv-bname{position:relative;z-index:1;font-family:"Fredoka";font-weight:700;font-size:24px;letter-spacing:.01em}
.cdv-bname span{color:var(--accent)}
.cdv-bid{position:relative;z-index:1;font-family:"Fredoka";font-weight:700;font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.78);padding:5px 13px;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18)}
.cdv-close{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);cursor:pointer;color:var(--text);
  background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(6px)}
.cdv-close svg{width:20px;height:20px}
.cdv-hint{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:3;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;pointer-events:none;
  display:flex;align-items:center;gap:7px}
.cdv-hint svg{width:15px;height:15px;color:var(--accent)}
@media(prefers-reduced-motion:reduce){.cdv-back::after{animation:none}}