/* Styles for the public landing page (templates/landing.html).

   Ported from the Claude Design project "CardWyrm Landing Page.dc.html". The
   design file holds the inline styles this file turns into classes; token
   names, values and breakpoints are taken from it unchanged so a later
   re-sync stays a diff instead of a rewrite.

   Separate from app.css on purpose. app.css dresses the signed-in application
   and is 3200 lines of grids, tables and dialogs, none of which this page
   uses; and the landing page carries its own type pairing (EB Garamond for
   headings, Karla for text) that the app only adopted afterwards. */

:root{
  --app-bg:linear-gradient(160deg,#faf2e5,#f6ebd9 55%,#f1e3ce);
  --header-bg:linear-gradient(180deg,rgba(255,253,248,.9),rgba(250,242,229,.66));
  --surface:linear-gradient(180deg,#fffdf8,#faf2e5);
  --surface-2:#f1e3ce;
  --border-soft:#efe0c8;--border:#e3cfaf;
  --text:#4a3327;--text-strong:#2a100b;
  --text-dim:#8a6a4f;--text-faint:#a4886c;
  --accent:#c9420f;
  --accent-glow:rgba(226,96,15,.45);
  --accent-soft:rgba(201,66,15,.10);
  --accent-border:#e3cfaf;
  --chip-a-text:#8a3018;
  --on-accent:#fffdf8;
  --overlay:rgba(42,16,11,.62);
  --tab-bg:#faf2e5;
  --logo-chip:#fffdf8;
  --logo-light:block;--logo-dark:none;
  --hiw-cols:1fr;--mob:block;--desk:none;--mkt-cols:1fr;
  --pad-x:20px;--sec-y:76px;--sec-gy:76px;--col-gap:44px;--tcg-h:92px;
  --ring:142px;--hero-min:560px;--faq-txt-o:1;--faq-list-o:2;--logo-k:.74;
  --mkt-txt-o:2;--mkt-logo-o:1;--stack-mb:56px;--fan-w:80%;--mkt-grid:1fr;
  --mkt-chip-w:min(320px, 100%);--mkt-gap:22px;
  --wall-h:100svh;
  --wall-text:#2a100b;--wall-dim:#8a6a4f;--wall-shadow:none;
  --wall-cta-bg:#c9420f;--wall-cta-text:#fffdf8;
}
:root[data-theme="dark"]{
  --app-bg:linear-gradient(160deg,#121316,#16181b 55%,#101114);
  --header-bg:linear-gradient(180deg,rgba(26,28,31,.92),rgba(18,19,22,.7));
  --surface:linear-gradient(180deg,#1a1c1f,#161819);
  --surface-2:#212428;
  --border-soft:#26292d;--border:#33373c;
  --text:#cbd4dc;--text-strong:#e8ebee;
  --text-dim:#8b929a;--text-faint:#6f757d;
  --accent:#a6b1bc;
  --accent-glow:rgba(166,177,188,.4);
  --accent-soft:rgba(166,177,188,.13);
  --accent-border:#5a6169;
  --chip-a-text:#cbd4dc;
  --on-accent:#121316;
  --overlay:rgba(6,7,9,.7);
  --tab-bg:#121316;
  --logo-chip:#e8ebee;
  --logo-light:none;--logo-dark:block;
  --wall-text:#fffdf8;--wall-dim:rgba(255,253,248,.76);
  --wall-shadow:0 4px 26px rgba(12,8,6,.6);
  --wall-cta-bg:#e8ebee;--wall-cta-text:#121316;
}

@media (min-width:760px){:root{--pad-x:24px;--sec-y:130px;--col-gap:64px;--tcg-h:116px;--ring:168px;--hero-min:620px;--logo-k:1;}}
@media (min-width:900px){:root{--hiw-cols:5fr 7fr;--mob:none;--desk:block;--mkt-cols:6fr 5fr;--faq-txt-o:2;--faq-list-o:1;--mkt-txt-o:1;--mkt-logo-o:2;--stack-mb:-20px;--fan-w:100%;--sec-gy:0px;}}
@media (min-width:760px) and (max-width:899px){:root{--sec-y:104px;--sec-gy:104px;}}
@media (min-width:560px) and (max-width:899px){:root{--mkt-grid:repeat(2, minmax(0, 1fr));--mkt-chip-w:100%;--mkt-gap:16px;}}

*{box-sizing:border-box}
html{background-color:#faf2e5;background-image:var(--app-bg);background-attachment:fixed;background-size:100vw 100vh;background-repeat:no-repeat}
html[data-theme="dark"]{background-color:#121316}
html,body{overflow-x:clip}
body{margin:0;color:var(--text);font-family:'Karla',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--text-strong)}
h1,h2{font-family:'EB Garamond',Georgia,serif}

/* --- Header ------------------------------------------------------------- */

#cw-nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent}
#cw-nav-bg{position:absolute;inset:0;background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft);opacity:0;transition:opacity 380ms ease;pointer-events:none}
.nav-inner{position:relative;max-width:1180px;margin:0 auto;padding:10px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{display:flex;align-items:center;gap:10px;font-family:'EB Garamond',Georgia,serif;font-size:clamp(19px,5vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}
.wordmark:hover{color:var(--text-strong)}
.wordmark img{height:22px;width:auto}
.mark-light{display:var(--logo-light)}
.mark-dark{display:var(--logo-dark)}
.ember{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--text);cursor:pointer;padding:0}
.ico-sun{display:none}
:root[data-theme="dark"] .ico-sun{display:block}
:root[data-theme="dark"] .ico-moon{display:none}
.pill-btn{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--text-strong);font-family:'Karla',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer}
.pill-btn:hover{color:var(--text-strong);background:var(--surface-2)}

/* --- Hero --------------------------------------------------------------- */

#cw-hero{position:relative;overflow:hidden;height:var(--wall-h);min-height:var(--hero-min);display:grid;place-items:center;background:transparent}
.hero-copy{position:relative;z-index:3;width:min(700px,100%);text-align:center;padding:96px 22px 40px}
.hero-copy h1{margin:0 0 20px;font-weight:500;font-size:clamp(33px,7vw,80px);line-height:1.04;letter-spacing:-.012em;color:var(--wall-text);text-shadow:var(--wall-shadow)}
.hero-copy p{margin:0 auto 34px;font-size:clamp(16px,1.7vw,22px);line-height:1.45;color:var(--wall-dim);max-width:30ch;text-wrap:pretty}
.cta-hero{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;background:var(--wall-cta-bg);color:var(--wall-cta-text);font-size:16px;font-weight:600;box-shadow:0 16px 40px rgba(12,8,6,.28)}
.cta-hero:hover{color:var(--wall-cta-text);transform:translateY(-1px)}

@keyframes cwRowL{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@keyframes cwRowR{from{transform:translateX(-33.3333%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.cw-row{animation:none !important}}

/* --- How it works ------------------------------------------------------- */

.hiw{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--pad-x)}
.hiw-grid{display:grid;grid-template-columns:var(--hiw-cols);gap:var(--col-gap);align-items:start}
.hiw-copy{position:sticky;top:20vh;display:var(--desk)}
.hiw-steps{display:grid;gap:44px}
.hiw-step{text-align:center}
.hiw-step h2{margin:0 0 10px;font-weight:600;font-size:34px;letter-spacing:-.01em;color:var(--text-faint);transition:color .4s}
.hiw-step p{margin:0 auto;font-size:16.5px;line-height:1.5;max-width:30ch;color:var(--text-faint);transition:color .4s}
.hiw-step.is-active h2{color:var(--text-strong)}
.hiw-step.is-active p{color:var(--text-dim)}
.hiw-visuals{display:grid;gap:72px}
.hiw-mob{display:var(--mob);text-align:center;margin-bottom:18px}
.hiw-mob h2{margin:0 0 8px;font-weight:600;font-size:28px;color:var(--text-strong)}
.hiw-mob p{margin:0 auto;font-size:15.5px;line-height:1.5;max-width:32ch;color:var(--text-dim)}

.stack-anim{position:relative;aspect-ratio:1/0.92;perspective:1500px;margin-bottom:var(--stack-mb)}
.stack-anim>div{position:absolute;left:50%;width:48%;opacity:0}
.stack-anim>div:nth-child(1){top:52%;z-index:1}
.stack-anim>div:nth-child(2){top:36%;z-index:2}
.stack-anim>div:nth-child(3){top:20%;z-index:3}
.stack-anim>div:nth-child(4){top:4%;z-index:4}
.stack-anim img{width:100%;aspect-ratio:63/88;object-fit:cover;display:block;transform:translateX(-50%) rotateX(58deg) rotateZ(45deg);border-radius:4%;filter:drop-shadow(0 30px 26px var(--overlay)) drop-shadow(0 8px 10px var(--overlay))}

.fan-anim{position:relative;aspect-ratio:1/1;width:var(--fan-w);max-width:100%;margin:26px auto 64px}
.fan-anim>div{position:absolute;left:50%;bottom:10%;width:40%;opacity:0;transform-origin:50% 150%}
.fan-anim>div:nth-child(1){z-index:1}
.fan-anim>div:nth-child(2){z-index:2}
.fan-anim>div:nth-child(3){z-index:3}
.fan-anim>div:nth-child(4){z-index:4}
.fan-anim>div:nth-child(5){z-index:5}
.fan-anim img{width:100%;aspect-ratio:63/88;object-fit:cover;display:block;border-radius:4.5%/3.4%;box-shadow:0 10px 26px var(--overlay)}
.pos-chip{position:absolute;top:-58px;left:50%;transform:translateX(-50%);z-index:2;background:var(--accent);color:var(--on-accent);font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:999px;box-shadow:0 2px 10px var(--accent-glow);white-space:nowrap}

.search-anim{display:grid;gap:30px;justify-items:center;margin-top:26px}
.search-field{width:100%;max-width:400px;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:14px 20px;box-shadow:0 10px 30px var(--accent-soft);color:var(--text-dim)}
.search-field span{font-size:clamp(14px,4vw,16.5px);color:var(--text-strong);min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-search-result]{opacity:0;display:grid;gap:20px;justify-items:center}
[data-search-result] img{width:min(58%,250px);aspect-ratio:63/88;object-fit:cover;border-radius:4.5%/3.4%;display:block;filter:drop-shadow(0 18px 26px var(--overlay))}
.chip-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--chip-a-text);font-size:14px;font-weight:600;padding:7px 16px;border-radius:999px}

/* A card slot with no image yet: the striped placeholder from the design
   file, so a missing asset reads as pending rather than as breakage. */
.stack-anim img:not([src]),.fan-anim img:not([src]),[data-search-result] img:not([src]){
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 18px,var(--tab-bg) 18px 36px);
  border:1px solid var(--border-soft);box-shadow:none;filter:none}

/* --- Statistics --------------------------------------------------------- */

#cw-stats{background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.stats-row{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--pad-x);display:flex;flex-wrap:wrap;justify-content:center;gap:48px clamp(40px,8vw,96px)}
.stat{display:grid;justify-items:center;gap:4px}
.ring{position:relative;width:var(--ring);height:var(--ring);display:grid;place-items:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--border-soft);stroke-width:6}
.ring circle.arc{stroke:var(--accent);stroke-linecap:round}
.ring span{font-family:'EB Garamond',Georgia,serif;font-weight:600;font-size:clamp(25px,5.5vw,30px);letter-spacing:-.01em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.stat-label{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}

/* --- Logo sections (games, marketplaces) -------------------------------- */

.logos-section{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--pad-x) var(--sec-gy)}
/* Der Spielabschnitt schliesst mit `--sec-gy` (auf breiten Schirmen null) —
   direkt darunter beginnt der Marktplatzabschnitt mit seinem eigenen oberen
   Abstand, zwei volle Abstaende waeren dort ein Loch. Der Marktplatzabschnitt
   dagegen stoesst an den Gruen hinterlegten Freundeteil und braucht den vollen.
   Hier stand `:last-of-type`, was nie griff: das bezieht sich auf den
   Elementtyp, und nach diesem `<section>` kommen fuenf weitere. */
.logos-section.spaced{padding-bottom:var(--sec-y)}
.logos-grid{display:grid;grid-template-columns:var(--mkt-cols);gap:var(--col-gap);align-items:center}
.tcg-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.logo-chip{opacity:0;background:var(--logo-chip);border:1px solid var(--border-soft);border-radius:14px;padding:12px 14px;height:var(--tcg-h);display:grid;place-items:center}
.logo-chip img{width:auto;max-width:100%;max-height:100%;object-fit:contain;display:block}
/* Stands in for a game logo that is not on disk. Set in the wordmark serif so
   the tile still reads as a brand plate, not as an error. */
.logo-name{font-family:'EB Garamond',Georgia,serif;font-size:clamp(15px,3.4vw,19px);font-weight:600;line-height:1.15;text-align:center;color:#2a100b;padding:0 6px}
.logos-copy{text-align:center}
.logos-copy h2{margin:0 0 14px;font-weight:600;font-size:clamp(28px,5.4vw,47px);letter-spacing:-.006em;color:var(--text-strong)}
.logos-copy p{margin:0 auto;font-size:17px;line-height:1.55;color:var(--text-dim);max-width:32ch}
.mkt-chips{order:var(--mkt-logo-o);display:grid;grid-template-columns:var(--mkt-grid);gap:var(--mkt-gap);justify-items:stretch}
.mkt-copy{order:var(--mkt-txt-o)}
.logo-chip.wide{opacity:0;padding:22px clamp(20px,6vw,40px);width:var(--mkt-chip-w);height:auto;margin:0 auto}
.logo-chip.wide img{width:210px;height:60px}

/* --- Community ---------------------------------------------------------- */

.social{background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.social-grid{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--pad-x);display:grid;grid-template-columns:var(--mkt-cols);gap:var(--col-gap);align-items:center}
.social-shot{display:grid;justify-items:center;gap:14px}
.shot-frame{opacity:0;width:100%;max-width:460px;position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--border-soft);box-shadow:0 18px 44px rgba(42,16,11,.12)}
.shot-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;background:repeating-linear-gradient(135deg,var(--surface-2) 0 18px,var(--tab-bg) 18px 36px);color:var(--text-dim);font-size:13.5px}
.social-copy{display:grid;gap:30px;justify-items:center}
.social-points{display:grid;gap:18px;max-width:40ch;text-align:left}
.point{opacity:0;display:flex;gap:14px;align-items:flex-start}
.point-ico{flex:none;width:36px;height:36px;border-radius:11px;background:var(--accent-soft);border:1px solid var(--accent-border);display:grid;place-items:center;color:var(--accent)}
.point-text{display:grid;gap:3px;line-height:1.45}
.point-title{font-size:15.5px;font-weight:600;color:var(--text-strong)}
.point-body{font-size:14.5px;color:var(--text-dim)}

/* --- Join --------------------------------------------------------------- */

.join{padding:var(--sec-y) var(--pad-x);text-align:center}
.join h2{margin:0 0 16px;font-weight:500;font-size:clamp(31px,6.4vw,60px);letter-spacing:-.008em;line-height:1.15;color:var(--text-strong);text-wrap:balance}
.join p{margin:0 auto 42px;font-size:17.5px;line-height:1.55;color:var(--text-dim);max-width:44ch}
.join-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.store-btn{display:grid;text-align:left;padding:10px 22px;border-radius:12px;background:var(--text-strong);color:var(--on-accent);line-height:1.2}
.store-btn:hover{color:var(--on-accent);opacity:.9}
.store-small{font-size:11px;opacity:.75;letter-spacing:.04em}
.store-big{font-size:18px;font-weight:600;color:var(--on-accent)}
.cta-solid{display:inline-block;padding:15px 26px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:600;box-shadow:0 6px 24px var(--accent-glow)}
.cta-solid:hover{color:var(--on-accent);transform:translateY(-1px)}

/* --- Video -------------------------------------------------------------- */

.video-grid{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--pad-x);display:grid;grid-template-columns:var(--mkt-cols);gap:var(--col-gap);align-items:center}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--border-soft);background:var(--surface-2);box-shadow:0 18px 44px rgba(42,16,11,.14);display:grid;place-items:center}
.video-empty{display:grid;justify-items:center;gap:16px;text-align:center;padding:24px}
.play{width:74px;height:74px;border-radius:999px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 14px 34px var(--accent-glow);padding-left:3px}
.video-text{display:grid;gap:5px}
.video-title{font-size:15.5px;font-weight:600;color:var(--text-strong)}
.video-note{font-size:13.5px;color:var(--text-dim)}

/* --- FAQ ---------------------------------------------------------------- */

.faq-section{background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.faq-grid{max-width:1180px;margin:0 auto;padding:var(--sec-y) var(--pad-x);display:grid;grid-template-columns:var(--mkt-cols);gap:var(--col-gap);align-items:center}
.faq-copy{order:var(--faq-txt-o)}
.faq-list{order:var(--faq-list-o);display:grid;gap:12px}
.cw-faq{opacity:0;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;box-shadow:0 10px 28px rgba(42,16,11,.07);padding:0 clamp(16px,4.5vw,22px)}
.cw-faq summary{display:flex;align-items:center;gap:14px;padding:19px 0;cursor:pointer;list-style:none;font-size:clamp(16px,4.2vw,17px);font-weight:600;line-height:1.4;color:var(--text-strong)}
.cw-faq summary>span:first-child{flex:1}
.cw-faq summary::-webkit-details-marker{display:none}
.cw-faq summary::marker{content:''}
.cw-chev{flex:none;width:30px;height:30px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-border);display:grid;place-items:center;color:var(--accent);transition:transform 240ms ease}
.cw-faq[open] .cw-chev{transform:rotate(180deg)}
.cw-faq p{margin:0;padding:0 clamp(0px,4vw,46px) 20px 0;font-size:15.5px;line-height:1.6;color:var(--text-dim)}

/* --- Footer ------------------------------------------------------------- */

footer{background:var(--surface-2);border-top:1px solid var(--border)}
.footer-inner{max-width:1180px;margin:0 auto;padding:36px var(--pad-x);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.footer-brand{display:grid;gap:4px}
.footer-brand .wordmark{font-size:19px}
.footer-brand .wordmark img{height:19px}
.copyright{font-size:13px;color:var(--text-dim)}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px}
.footer-links a{color:var(--text)}
.footer-links a:hover{color:var(--text-strong)}


/* A footer link whose page does not exist yet. Dimmed and not clickable, so it
   reads as "coming" instead of promising something and doing nothing. */
.footer-links a[data-soon]{color:var(--text-faint);cursor:default}
.footer-links a[data-soon]:hover{color:var(--text-faint)}