/* Approved art direction: neutral black, luminous gold and spell-born colour.
   Functional styles remain in style.css; this is the shared visual theme. */
:root {
  --night:#030304;
  --deep:#0b0b0e;
  --ink:#050506;
  --text:#f7f3e9;
  --muted:#b9b7b3;
  --gold:#dabb78;
  --gold-light:#ffdfa0;
  --cyan:#65cfff;
  --line:rgba(219,181,102,.27);
  --display:Georgia,'Times New Roman',serif;
  scroll-padding-top:20px;
}
body{background:var(--night)}
/* Decorative overflow must not become a second scroll container on deep links. */
.hero,.deck-story,.grimoire-section,.online-section,.launch{overflow:clip}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.045em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(2.5rem,4.5vw,4.6rem)}
h1 em,h2 em{color:var(--gold-light);background:linear-gradient(125deg,#fff5d7 5%,#ffdf8e 45%,#bf8640 100%);background-clip:text;-webkit-text-fill-color:transparent}
.wrap{width:min(1380px,calc(100% - 112px))}
.eyebrow{font-size:.875rem;letter-spacing:.16em;font-weight:500}
.site-header{height:96px;background:linear-gradient(#000e,#0007,transparent);border-bottom:0}
.site-header .brand img{width:205px;height:68px}
.desktop-nav{gap:30px}.desktop-nav a{font-size:.9375rem;color:#eee8dc}
.motion-toggle,.language-switch{background:#050506a6;border-color:#dac08440}
.language-switch a{min-height:38px;color:#d6d1c5}
.language-switch a[aria-current=page]{color:#100d07;background:#e0bd75}
.button{border-radius:3px;font-size:.9375rem;letter-spacing:0}
.button-small{min-height:44px;border-color:#d6ac61a6}
.button-primary{background:linear-gradient(135deg,#ffe9af,#e5b64d 52%,#c08b30);color:#171006;border:1px solid #ffe9b3;box-shadow:inset 0 0 0 3px #7a531b99,inset 0 0 0 4px #f8daa587,0 0 30px #e5af3326;font-family:var(--display);font-size:1.25rem;font-weight:600}
.button-primary:hover{background:linear-gradient(130deg,#fff3ce,#f5ca64 52%,#d69e3f);box-shadow:inset 0 0 0 3px #7a531b99,inset 0 0 0 4px #ffe6ae,0 0 40px #e5af3345}
.header-actions>.signup-link{background:#090807b3;color:#ffe7a9}
.hero{padding-top:96px;min-height:800px;background:#030304}
.hero-inner{grid-template-columns:1.05fr 1fr;grid-template-areas:"copy stage" "action stage";grid-template-rows:1fr 1fr;gap:26px 36px;min-height:690px}
.hero-copy{grid-area:copy;align-self:end;padding:0;max-width:690px}
.hero-action{grid-area:action;align-self:start;position:relative;z-index:2;min-width:0;width:100%;max-width:690px}
.hero-action .hero-release{margin-top:0}
.hero h1{font-size:clamp(3.25rem,5.25vw,5.5rem);line-height:1.05;letter-spacing:-.055em;text-shadow:none}
.hero-copy .eyebrow{margin-bottom:27px;font-size:.8125rem;letter-spacing:.16em}
.hero-tagline{font-size:clamp(1.1rem,1.6vw,1.45rem);color:#ece8df;margin-top:24px;line-height:1.5}
.hero-release{font-size:1rem;color:#e6c77f;margin-top:28px;line-height:1.6}
.hero-release strong{font-size:inherit;color:inherit}
.hero-release>span{color:#c19b56}
.hero-backdrop img{opacity:1;object-position:65% center}
.hero-shade{background:linear-gradient(90deg,#030304 0%,#030304ea 24%,#0303049c 43%,#03030400 68%),linear-gradient(0deg,#030304,transparent 25%)}
.hero .light-beam{background:linear-gradient(90deg,transparent,#ffe2a0,transparent);opacity:.14;width:110px;filter:blur(13px)}
.hero .beam-one{right:18%}.hero .beam-two{left:auto;right:38%;width:34px;opacity:.12}
.hero-signup{padding:0;border:0;background:none;box-shadow:none;margin:20px 0 0;max-width:590px}
.hero-signup .form-fields>label:first-of-type{font-size:.875rem;color:#e2d5b7}
.site-form input:not([type=checkbox]),.site-form textarea{background:#070709;border-color:#ad945c88;border-radius:4px}
.site-form input::placeholder,.site-form textarea::placeholder{color:#989595}
.site-form input:focus,.site-form textarea:focus{border-color:#ffdc92;outline-color:#efd29660}
.hero-signup input[type=email]{padding:16px;min-height:58px}
.hero-signup .signup-row{gap:12px}
.hero-signup .signup-row .button{min-height:58px;padding:12px 24px;font-size:1.25rem}
.hero-signup .consent{font-size:.875rem;line-height:1.55;color:#d3cfca;margin-top:18px}
.hero-signup .form-note{font-size:.8125rem;line-height:1.6;color:#aaa49a;margin-top:10px}
.hero-signup .form-status{font-size:.8125rem;line-height:1.55}
.hero-secondary{margin-top:20px;margin-left:0;min-height:44px;font-size:.875rem;color:#dabe7d}
.hero-stage{grid-area:stage;height:640px;isolation:isolate}
.hero-phone{width:255px;border-radius:36px;padding:9px;background:#050506;border-color:#d1ad69;transform:rotate(0);animation:royal-phone 8s ease-in-out infinite;box-shadow:0 0 0 3px #121214,0 0 0 4px #e3bf7844,0 30px 55px #000c,0 0 38px #f4c57824}
.hero-phone img{border-radius:26px}
.hero-stage .floating-card{width:155px;aspect-ratio:2/3;border:2px solid #ebbf6c;outline:1px solid #ffefb577;outline-offset:4px}
.hero-stage .card-ice{left:-1%;top:32%;transform:rotate(-14deg);box-shadow:0 0 30px #2e9bff99,0 0 65px #1877ff4d,0 20px 30px #0009}
.hero-stage .card-fire{right:-2%;bottom:15%;transform:rotate(14deg);box-shadow:0 0 25px #f9b44388,0 0 60px #ed86294d,0 20px 30px #0009}
.stage-aura{background:radial-gradient(ellipse,#198bff35,transparent 65%)}
.stage-caption{bottom:0;color:#d3c6b0;background:none;font-size:.8125rem}
.hero-bottom{border-top:1px solid #d5b57721;padding-block:18px 24px;color:#a79f91;font-size:.8125rem}
.hero-bottom a{border-color:#a4864e88}
.site-form .form-success{background:radial-gradient(ellipse at top,#d29e3822,transparent 80%),#0c0b0c;border-color:#dfb46399;box-shadow:0 0 35px #eab35619}
.success-mark{background:#b187331c;border-color:#f9cc77;color:#f9cc77}
.site-form .form-success .success-email{color:#ffe2a3}
.site-form .form-success h3{font-family:var(--display);font-size:2rem}
.site-form .consent{color:#d0cac1}
.mobile-menu nav{background:#08080bfa}
.contact-page{background:radial-gradient(ellipse at 95% 0,#b07b2815,transparent 50%),var(--night)}
.legal-facts{background:#0d0c0a}
.legal-heading h1{font-family:var(--display);font-size:clamp(2.8rem,5vw,4.5rem)}
@keyframes royal-phone{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(min-width:1600px){.hero-inner{min-height:760px}.hero-stage{height:700px}.hero-phone{width:275px}.hero-stage .floating-card{width:175px}.hero h1{font-size:5.7rem}}
@media(max-width:1180px){.wrap{width:calc(100% - 64px)}.site-header .brand img{width:165px}.desktop-nav{gap:18px}.hero-inner{grid-template-columns:1.15fr .85fr;gap:24px}.hero h1{font-size:clamp(3.2rem,5.5vw,4.4rem)}.hero-stage{height:580px}.hero-phone{width:218px}.hero-stage .floating-card{width:119px}.hero-signup .signup-row .button{padding-inline:19px;font-size:1.125rem}}
@media(max-width:900px){.desktop-nav{display:none}.hero-inner{grid-template-columns:1fr 1fr;gap:20px}.hero h1{font-size:3.3rem}.hero-tagline{font-size:1.125rem}.hero-stage{height:560px}.hero-phone{width:215px}.hero-signup .signup-row{flex-direction:column}.hero-signup .signup-row .button{width:100%}.hero-copy .eyebrow{font-size:.75rem}.hero-release{font-size:.9375rem}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.site-header{height:76px;padding-inline:20px}.site-header .brand img{width:140px;height:50px}.hero{padding-top:76px}.hero-inner{grid-template-columns:1fr;gap:0;min-height:0}.hero-copy{padding:28px 0 0;max-width:530px;width:100%;margin:auto;text-align:left}.hero h1{font-size:clamp(2.75rem,9.5vw,4rem)}.hero-copy .eyebrow{font-size:.6875rem;letter-spacing:.12em;justify-content:flex-start;margin-bottom:20px}.hero-tagline{font-size:1.125rem;margin-top:18px}.hero-release{margin-top:22px;line-height:1.55}.hero-release strong{display:block}.hero-release>span{display:none}.hero-signup{margin-top:24px;padding:0}.hero-signup .signup-row{flex-direction:row;gap:9px}.hero-signup .signup-row .button{width:auto;min-height:55px;padding-inline:16px;font-size:1.0625rem}.hero-signup input[type=email]{padding:12px;min-height:55px}.hero-signup .consent{font-size:.875rem;margin-top:15px}.hero-signup .form-note{font-size:.75rem}.hero-signup .form-status{font-size:.8125rem}.hero-stage{height:545px;width:min(400px,100%);justify-self:center;margin-top:15px}.hero-phone{width:213px}.hero-stage .floating-card{width:117px}.hero-stage .card-ice{left:0;top:29%}.hero-stage .card-fire{right:0;bottom:18%}.hero-backdrop{inset:370px 0 auto;height:830px}.hero-backdrop img{object-position:66% center;opacity:.94}.hero-shade{background:linear-gradient(#030304 18%,#030304be 40%,transparent 65%,#030304 100%)}.hero-bottom{justify-content:center;margin-top:10px}.hero-bottom>span{display:none}.hero .beam-one{right:20%;top:420px}.hero .beam-two{display:none}.hero-secondary{margin:16px 0 0;justify-content:flex-start}.language-switch a{min-width:30px}.site-header{gap:8px}.header-actions{gap:8px}.header-actions>.signup-link{display:none}.stage-caption{font-size:.75rem}}
@media(max-width:370px){.site-header{padding-inline:16px}.site-header .brand img{width:110px}.hero-signup .signup-row .button{font-size:1rem;padding-inline:12px}.hero h1{font-size:2.65rem}.hero-stage .floating-card{width:100px}.hero-phone{width:198px}}

/* Story: shorter reading passages, with black space between illuminated scenes. */
.section{padding-block:96px}
.section-top{margin-bottom:32px}
.section-top .eyebrow{font-size:.8125rem}
.section-description{font-size:1rem;color:var(--muted);line-height:1.75}
.intro{padding-block:82px 76px}
.intro-grid{grid-template-columns:1fr 1fr;gap:80px}
.intro-grid h2{font-size:clamp(2.5rem,4vw,4rem)}
.intro-copy{max-width:560px}.intro-copy p{color:#c7c2b9;font-size:1.0625rem}
.intro-copy .text-link{margin-top:12px}
.text-link{font-size:.9375rem;min-height:44px;border-color:#a28347;color:#f6dba0}
.text-link:hover{color:#fff2cb;border-color:#fff2cb}
.principles{gap:36px;margin-top:46px;padding-top:28px}
.principles h3{font-family:var(--display);font-size:1.4rem;color:#e9d6aa}
.principles p{font-size:.9375rem;line-height:1.7;color:var(--muted)}
.principle-number{font-size:.8125rem}
.rule-note{color:#a8a39b;font-size:.8125rem;border-color:#d5b57719;margin-top:24px;padding-top:18px}

/* A playable-looking hand. The artwork is real; only its light is animated. */
.deck-story{position:relative;isolation:isolate;background:linear-gradient(#03030455,#03030400 30%,#03030466 90%,#030304),url('/assets/obsidian-grimoire.webp') center/cover;border:0;padding-block:65px 50px}
.deck-story-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:25px 50px;align-items:center}
.deck-story h2{font-size:clamp(3rem,5.2vw,5.1rem);margin:16px 0 0}
.deck-story-copy{padding-left:5%;max-width:none}
.deck-promise{justify-self:end;max-width:320px;padding-right:5%}
.deck-promise>p{font-size:1.15rem;color:#f2d290;line-height:1.5}
.deck-promise .deck-combinations{font-size:1.6rem;font-family:var(--display);color:#f5efe2;margin-top:6px;white-space:nowrap}
.deck-combinations strong{font-weight:400}
.deck-promise .deck-free{font-size:.9375rem;color:#bdb4a7;border-top:1px solid #e1bb7059;padding-top:17px;margin-top:20px}
.deck-showcase{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:center;padding:25px 10px 35px;perspective:1200px}
.showcase-card{--card-light:#49baff;position:relative;isolation:isolate;display:block;padding:5px;border:1px solid #f8d58b;border-radius:11px;background:linear-gradient(130deg,#ffd985,#684215 20%,#23170a 60%,#d7a348);box-shadow:0 0 0 2px #6e4a1f,0 0 0 4px #e3b45766,0 15px 35px #000b,0 0 40px color-mix(in srgb,var(--card-light) 25%,transparent);transition:transform .35s,box-shadow .35s;transform:translateY(8px) rotate(-3deg)}
.showcase-card[data-spell=potion]{--card-light:#ffaf23}
.showcase-card[data-spell=fog]{--card-light:#b66aff}
.showcase-card[data-spell=trap]{--card-light:#e5bf77}
.showcase-card:nth-child(2){transform:translateY(-7px) rotate(-1.5deg)}
.showcase-card:nth-child(3){transform:translateY(-18px);z-index:2}
.showcase-card:nth-child(4){transform:translateY(-7px) rotate(1.5deg)}
.showcase-card:nth-child(5){transform:translateY(8px) rotate(3deg)}
.showcase-card img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:6px 6px 0 0}
.showcase-card>span{display:block;text-align:center;padding:15px 5px 17px;background:#070607;font-family:var(--display);color:#f5e7c8;font-size:clamp(1.125rem,1.8vw,1.65rem);border-radius:0 0 6px 6px;border-top:1px solid #b7965745;line-height:1.15}
.showcase-card::before{content:'';position:absolute;inset:-10px;border:1px solid color-mix(in srgb,var(--card-light) 50%,transparent);border-radius:15px;box-shadow:0 0 20px color-mix(in srgb,var(--card-light) 40%,transparent),inset 0 0 18px color-mix(in srgb,var(--card-light) 14%,transparent);pointer-events:none;animation:card-radiance 5s ease-in-out infinite;z-index:-1}
.showcase-card:nth-child(2n)::before{animation-delay:-2s}.showcase-card:nth-child(3)::before{animation-delay:-3.4s}
.showcase-card::after{content:'';position:absolute;inset:5px;pointer-events:none;border-radius:5px;background:linear-gradient(115deg,transparent 40%,#fff6d255 48%,transparent 55%);background-size:350% 100%;animation:showcase-shine 10s ease-in-out infinite;mix-blend-mode:screen}
.showcase-card:nth-child(2n)::after{animation-delay:-5s}
.showcase-card:hover,.showcase-card:focus-visible{transform:translateY(-24px) rotate(0);z-index:4;box-shadow:0 0 0 2px #896020,0 0 0 4px #ffd784,0 18px 40px #000b,0 0 65px color-mix(in srgb,var(--card-light) 45%,transparent)}
.deck-explore{grid-column:1/-1;text-align:center;margin-top:-12px}
.deck-explore>p{font-size:.9375rem;color:#c4bba9}.deck-explore .text-link{margin-top:6px;font-family:var(--display);font-size:1.3rem}
@keyframes card-radiance{0%,100%{opacity:.3;transform:scale(.99)}50%{opacity:.85;transform:scale(1.015)}}
@keyframes showcase-shine{0%,35%{background-position:100% 0;opacity:0}42%{opacity:.65}65%,100%{background-position:-10% 0;opacity:0}}

/* Spell catalogue: all ten controls in sight, one generous detail panel. */
.grimoire-section{background:radial-gradient(ellipse at 28% 75%,#106bc316,transparent 55%),#030304;border:0;padding-top:65px}
.grimoire-section h2{font-size:clamp(2.5rem,4.1vw,4rem)}
.grimoire-section .section-description{max-width:650px;margin-top:18px}
.spell-picker{grid-template-columns:repeat(10,minmax(0,1fr));max-width:none;gap:14px;margin-top:36px}
.spell-picker a{padding:3px;background:linear-gradient(130deg,#96733c,#15120d 30%,#080709 80%,#b99658);border-color:#997335;box-shadow:0 6px 15px #000b}
.spell-picker img{aspect-ratio:4/5;border-color:#ac823f66;filter:none}
.spell-picker span{font-family:var(--display);font-size:.9375rem;padding:11px 1px;background:#070608;border-color:#ac823f44;letter-spacing:0}
.grimoire-section .spell-picker a[aria-selected=true]{border-color:#ffda8c;box-shadow:0 0 0 1px #ffda8c,0 0 28px color-mix(in srgb,var(--spell-glow) 27%,transparent);transform:translateY(-6px)}
.grimoire-section .spell-picker a:hover{border-color:#fce3ac}
.grimoire-hint{font-size:.875rem;margin-top:20px;color:#ada699}
.spell-panel{grid-template-columns:.9fr 1.1fr;gap:65px;min-height:455px;max-width:1100px;margin:auto;scroll-margin-top:36px}
.spell-panels{margin-top:24px}
.spell-art{min-height:430px;padding:30px;max-width:470px}
.spell-art img{height:330px;width:232px;border:2px solid #e5bb72;border-radius:6px;outline:1px solid #d6a04f66;outline-offset:5px;box-shadow:0 30px 40px #0009,0 0 26px color-mix(in srgb,var(--spell-color) 25%,transparent)}
.spell-art::before{width:280px;height:280px;opacity:.22}
.spell-orbit{inset:30px 16%;border-color:color-mix(in srgb,var(--spell-color) 35%,transparent)}
.spell-copy h3{font-family:var(--display);font-size:3.4rem;font-weight:400;color:#ffe5ad;margin-bottom:14px}
.spell-copy .spell-hook{font-family:var(--display);font-size:1.65rem;line-height:1.2;color:#f6ecdc;margin-bottom:20px}
.spell-category{font-size:.8125rem;letter-spacing:.12em}
.spell-copy .spell-tactic{font-size:.9375rem;color:#d6cdbd;border-color:#d5b57729;margin-top:22px}
.spell-art-number{color:#c3a166;font-size:1.5rem;opacity:.55;right:16%}

/* The arena gives the real gameplay image the foreground. */
.online-section{background:#030304;border:0;min-height:760px;padding-block:80px 60px}
.scene-backdrop{opacity:1;object-position:center;z-index:-2}
.online-section:after{background:linear-gradient(90deg,#030304f5 0%,#030304d9 28%,#03030400 65%),linear-gradient(0deg,#030304,transparent 30%,#03030411 80%,#030304)}
.online-grid{grid-template-columns:.82fr 1.18fr;gap:40px;align-items:end;min-height:610px}
.online-copy{padding-bottom:25px;position:relative;z-index:1}
.online-grid h2{font-size:clamp(3rem,4.8vw,4.9rem);margin:25px 0 0}
.online-lead{color:#ede6d9;font-size:1.25rem;line-height:1.6;margin-top:28px;max-width:470px}
.online-grid .section-description{font-size:1rem;margin-top:18px;color:#bdb6ac;max-width:450px}
.ranked-rule{display:flex;gap:12px 20px;flex-wrap:wrap;border-block:1px solid #d5b57738;margin-top:26px;padding:18px 0;color:#e9c886;font-size:.875rem;max-width:470px}
.online-grid .button{margin-top:26px;padding-inline:32px;min-height:57px}
.online-release{font-size:.875rem;color:#dcc798;margin-top:18px}
.matchmaking-note{font-size:.8125rem;line-height:1.6;color:#aaa298;margin-top:18px;max-width:460px}
.online-capture{padding:4px;align-self:end;margin-bottom:16px;position:relative}
.online-capture .capture-link{border:2px solid #e4b961;outline:1px solid #ffe2a977;outline-offset:4px;box-shadow:0 0 0 7px #171109,0 25px 60px #000e,0 0 36px #eab55922;border-radius:3px}
.online-capture figcaption{font-size:.8125rem;text-align:center;color:#c7bca7;margin-top:20px}
.online-capture .capture-link:hover{box-shadow:0 0 0 7px #171109,0 25px 60px #000e,0 0 45px #eab55944}

/* A pause in the narrative: the Sanctuary itself. */
.sanctuary-story{min-height:640px;background:linear-gradient(90deg,#030304e8 0%,#030304b3 35%,#03030400 75%),linear-gradient(0deg,#030304,transparent 30%,transparent 80%,#030304),url('/assets/sanctuary-gates.webp') 66% center/cover}
.sanctuary-copy h2{font-size:clamp(2.7rem,4.5vw,4.6rem);max-width:650px;margin:25px 0}
.sanctuary-copy>p:not(.eyebrow){font-size:1.0625rem;color:#d1c8b8;max-width:460px}
.art-note{color:#aaa18f;font-size:.75rem;margin-top:28px}
.gallery-section{padding-block:85px}
.gallery-heading h2{font-size:clamp(2.7rem,4.1vw,4.1rem)}
.gallery-heading>p{font-size:1rem;color:#c1b8a8}
.capture-gallery{gap:32px;margin:45px auto 0;max-width:1160px}
.capture-gallery figure:nth-child(even){padding-top:30px}
.capture-gallery .capture-link{border-radius:10px;padding:5px;border-color:#b4975b99;background:#09090c;box-shadow:0 15px 35px #0008}
.capture-gallery .capture-link img{border-radius:6px}
.capture-link:hover{border-color:#f4d397;box-shadow:0 12px 35px #cca25d24}
.expand-icon{background:#070709e6}
.capture-gallery figcaption{font-size:.875rem;line-height:1.5;color:#dacdaf}
.gallery-note{color:#a69f94;font-size:.8125rem;margin-top:26px;text-align:center}
.modes{gap:50px;margin-top:55px;padding-top:28px}
.modes h3{font-family:var(--display);font-size:1.6rem;color:#ecdfc4}
.modes p{font-size:1rem}.mode-label{font-size:.75rem;color:#cbb177;letter-spacing:.12em}
.mode-symbol{font-family:var(--display);font-size:2rem}
.fair-play{background:radial-gradient(ellipse at 20% 55%,#c1943d13,transparent 50%),#060507;border-block:1px solid #d5b57725;padding-block:68px}
.fair-grid{grid-template-columns:.5fr 1.25fr;gap:65px;max-width:1180px}
.fair-grid h2{font-size:clamp(2.6rem,3.8vw,3.7rem);margin:20px 0 23px}
.fair-grid p:not(.eyebrow){font-size:1rem;color:#c0b8ac;max-width:750px}
.fair-grid .fair-note{font-size:.8125rem;color:#a69b85}
.fair-art img{max-height:335px}.fair-art-glow{background:radial-gradient(#f2b44722,transparent 70%)}
.launch{background:radial-gradient(ellipse at 50% 40%,#ba812815,transparent 65%),linear-gradient(#030304bb,#030304d9),url('/assets/obsidian-grimoire.webp') center/cover;padding-block:84px 65px;border:0}
.launch h2{font-size:clamp(3.2rem,6vw,5.8rem);line-height:1.05}
.launch-emblem{height:55px;width:55px;filter:drop-shadow(0 0 18px #ffc66550);margin-bottom:20px}
.launch .eyebrow{font-size:.8125rem;letter-spacing:.15em}
.launch p:not(.eyebrow){font-size:1rem;color:#bfb6a4}
.launch .launch-note{font-size:.8125rem;color:#a79e8e}
.launch-cta{font-size:1.25rem;margin-top:28px}
.launch-piece{opacity:.75;filter:drop-shadow(0 0 40px #b5883722)}
.platform{background:#080709c9;border-color:#c6a35d55;min-width:205px}
.platform small{font-size:.75rem;color:#bcb09a}.platform strong{font-size:.9375rem}
.launch-contact{font-size:.875rem;color:#e9cb8d}
.site-footer{min-height:115px;border-color:#c3a16a30}
.site-footer p,.site-footer nav{font-size:.8125rem;color:#b7ad9d}
.lightbox{background:#040405f5}.lightbox figcaption{color:#e3d8c2}
.site-form .form-status[data-kind=error]{background:#42191a80;color:#ffd8ce}
.site-form .form-status[data-kind=pending]{color:#ead7af}
.contact-form .field-hint{color:#a99f8e}
.contact-form .form-note{font-size:.875rem}
.legal-page .site-header{background:#030304;border-bottom:1px solid var(--line)}
.legal-content h2{font-family:var(--display);font-size:1.65rem;color:#e9d6aa}
.legal-heading p:last-child{font-size:1rem;line-height:1.7}

/* Responsive layouts preserve the desktop composition and native card scrolling. */
@media(max-width:1180px){
  .section{padding-block:76px}.intro-grid{gap:40px}.deck-showcase{gap:19px;padding-inline:7px}
  .deck-story-copy{padding-left:2%}.deck-promise{padding-right:2%}.spell-picker{gap:9px}.spell-picker span{font-size:.875rem}
  .online-section{min-height:750px}.online-grid{grid-template-columns:.9fr 1.1fr;gap:35px;min-height:595px}
  .online-grid h2{font-size:3.75rem}.online-lead{font-size:1.125rem}.online-capture{margin-bottom:80px}
  .fair-grid{gap:40px}.capture-gallery{gap:22px}
}
@media(max-width:900px){
  .mobile-menu{display:block}
  .mobile-menu summary{width:44px;height:44px;display:grid;place-items:center;list-style:none;cursor:pointer;border:1px solid var(--line);color:var(--gold-light);font-size:1.2rem}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu nav{position:absolute;right:22px;top:76px;min-width:220px;background:#08080bfa;border:1px solid var(--line);padding:12px;box-shadow:0 20px 40px #0007}
  .mobile-menu nav a{display:flex;align-items:center;padding:10px 14px;min-height:44px;font-size:.9375rem}
  .mobile-menu .motion-toggle{width:100%;height:44px;display:flex;justify-content:space-between;padding:10px 14px;font-size:.875rem;border-radius:0;margin-top:8px}
  .header-actions>.motion-toggle{display:none}
  .section{padding-block:68px}.intro-grid{gap:32px}.intro-grid h2{font-size:3rem}.intro-copy p{font-size:1rem}
  .principles{gap:24px}.principles>div{padding-left:0}.principle-number{position:static;display:block;margin-bottom:8px}
  .deck-story-grid{grid-template-columns:1.2fr 1fr;gap:25px}.deck-story h2{font-size:3.75rem}.deck-story-copy{padding-left:0}
  .deck-promise>p{font-size:1rem}.deck-promise .deck-combinations{font-size:1.4rem}.deck-promise .deck-free{font-size:.875rem}
  .deck-showcase{gap:14px;padding-block:20px 30px}.showcase-card>span{font-size:1.15rem;padding-block:12px}.showcase-card::before{inset:-6px}
  .spell-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;max-width:650px}.spell-picker img{aspect-ratio:5/4;object-position:50% 35%}
  .spell-panel{gap:30px;grid-template-columns:.8fr 1fr}.spell-art img{width:195px;height:280px}.spell-art{min-height:365px}.spell-copy h3{font-size:3rem}
  .online-grid{grid-template-columns:1fr;gap:30px;min-height:0}.online-copy{max-width:610px;padding:0}.online-grid h2{font-size:4rem}
  .online-copy .section-description{max-width:540px}.online-capture{width:min(780px,100%);margin:60px 0 0;justify-self:center}
  .online-section:after{background:linear-gradient(90deg,#030304ed,#030304a3 50%,#03030411),linear-gradient(0deg,#030304 0%,transparent 45%,#03030499)}
  .scene-backdrop{object-position:70% top}.online-lead{max-width:500px}.online-release{margin-top:17px}
  .sanctuary-story{min-height:600px;background-position:70% center}.sanctuary-copy h2{font-size:3.2rem;max-width:520px}
  .capture-gallery{max-width:600px;gap:26px}.gallery-heading{display:block}.gallery-heading>p{margin-top:20px}
  .gallery-heading br{display:none}.capture-gallery figure:nth-child(even){padding-top:0}.fair-grid{grid-template-columns:.5fr 1fr;gap:25px}
  .fair-grid h2{font-size:3rem}.fair-art img{max-height:290px}.modes{gap:26px}.modes h3{font-size:1.4rem}
  .site-footer{gap:20px}.site-footer nav{gap:25px}
}
@media(max-width:700px){
  h2{font-size:2.75rem}.section{padding-block:60px}.section-top{gap:18px;margin-bottom:25px}.section-top .eyebrow{font-size:.75rem}
  .intro{padding-block:54px}.intro-grid{grid-template-columns:1fr;gap:25px}.intro-grid h2{font-size:clamp(2.55rem,8.5vw,3.6rem)}
  .intro-copy p{font-size:1rem}.principles{grid-template-columns:1fr;margin-top:30px;gap:24px;padding-top:26px}
  .principles>div{padding-left:35px}.principle-number{position:absolute;top:2px}.principles h3{font-size:1.4rem}
  .principles p{font-size:1rem}.rule-note{font-size:.8125rem;line-height:1.6}
  .deck-story{padding-bottom:55px;background-position:50% 50%}.deck-story-grid{grid-template-columns:1fr;gap:26px}
  .deck-story-copy{max-width:none}.deck-story h2{font-size:clamp(3rem,10vw,4rem)}
  .deck-promise{justify-self:start;max-width:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:center}
  .deck-promise>p{font-size:.875rem}.deck-promise .deck-combinations{font-size:1.2rem;margin:0}
  .deck-promise .deck-free{grid-column:1/-1;font-size:.875rem;padding-top:12px;margin-top:13px}
  .deck-showcase{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;grid-column:1;max-width:none;margin-inline:-20px;padding:25px 25px 35px;scroll-padding-inline:25px;scrollbar-color:#a58243 #090809;scrollbar-width:thin;perspective:none}
  .showcase-card{flex:0 0 58%;max-width:245px;scroll-snap-align:center}
  .showcase-card:nth-child(n){transform:none}.showcase-card img{aspect-ratio:3/4}.showcase-card>span{font-size:1.6rem;padding:15px 5px}
  .showcase-card:hover,.showcase-card:focus-visible{transform:translateY(-6px)}
  .deck-explore{grid-column:1;margin-top:0}.deck-explore>p{font-size:.875rem}.deck-explore .text-link{font-size:1.2rem}
  .grimoire-section h2{font-size:2.65rem}.grimoire-section .section-description{font-size:1rem;max-width:490px}
  .spell-picker{gap:13px 10px;margin-top:28px}.spell-picker img{aspect-ratio:1/1.1}.grimoire-section .spell-picker span{font-family:var(--sans);font-size:.75rem;padding:10px 0;border-inline:0;line-height:1.2}
  .spell-picker a{padding:2px;border-radius:4px}.grimoire-hint{font-size:.8125rem;line-height:1.6;max-width:300px;margin-inline:auto}
  .spell-panel{grid-template-columns:1fr;gap:6px;min-height:0}.spell-art{min-height:345px;margin:auto;width:100%;max-width:370px}
  .spell-art img{width:191px;height:276px}.spell-orbit{inset:24px 20%}.spell-copy{min-height:0;padding-top:5px}
  .spell-copy h3{font-size:3rem}.spell-category{font-size:.75rem}.spell-copy .spell-hook{font-size:1.65rem}
  .spell-copy>p:not(.spell-category):not(.spell-hook):not(.spell-tactic){font-size:1rem}.spell-copy .spell-tactic{font-size:.9375rem}
  .online-section{padding-top:70px}.online-grid h2{font-size:3.5rem}.online-lead{font-size:1.25rem;margin-top:23px}
  .online-copy .eyebrow{font-size:.75rem}.online-grid .section-description{font-size:1rem}.ranked-rule{font-size:.8125rem;gap:8px 16px;padding-block:15px}
  .online-grid .button{font-size:1.25rem;margin-top:25px}.online-release{font-size:.8125rem}.matchmaking-note{font-size:.8125rem;margin-top:14px}
  .online-capture{margin-top:130px}.online-capture figcaption{font-size:.75rem;margin-top:17px}.scene-backdrop{height:78%;inset:25% 0 auto;object-position:66% center}
  .online-section:after{background:linear-gradient(#030304 0%,#030304f5 25%,#03030466 52%,#03030400 72%,#030304 100%)}
  .sanctuary-story{min-height:730px;padding-top:330px;align-items:flex-end;background:linear-gradient(0deg,#030304 0%,#030304f2 42%,transparent 80%),url('/assets/sanctuary-gates.webp') 78% top/auto 530px no-repeat}
  .sanctuary-copy h2{font-size:2.75rem;margin:20px 0}.sanctuary-copy>p:not(.eyebrow){font-size:1rem}.sanctuary-copy .eyebrow{font-size:.75rem}.art-note{font-size:.75rem;margin-top:22px}
  .gallery-heading h2{font-size:2.75rem}.gallery-heading>p{font-size:1rem}.capture-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 15px;margin-top:32px}
  .capture-gallery .capture-link{padding:3px;border-radius:6px}.capture-gallery figcaption{font-size:.8125rem;gap:8px}.gallery-note{font-size:.75rem;text-align:left;line-height:1.6}
  .modes{grid-template-columns:1fr;gap:30px;margin-top:35px}.modes h3{font-size:1.5rem}.modes p{font-size:1rem}.mode-label{font-size:.75rem}
  .fair-grid{grid-template-columns:1fr;gap:16px}.fair-art{max-width:160px;margin:auto}.fair-art img{max-height:220px}.fair-grid h2{font-size:2.75rem}.fair-grid .eyebrow{font-size:.75rem}
  .fair-grid p:not(.eyebrow){font-size:1rem}.fair-grid .fair-note{font-size:.8125rem}.launch{padding-block:64px 50px}
  .launch h2{font-size:3.5rem}.launch p:not(.eyebrow){font-size:1rem}.launch .launch-note{font-size:.75rem}.launch-piece{opacity:.28;bottom:-45px;width:145px}
  .platform{min-width:0;padding:10px;gap:8px}.platform strong{font-size:.8125rem}.platform small{font-size:.75rem}.launch-cta{font-size:1.125rem}
  .site-footer{padding-block:28px}.site-footer nav{font-size:.8125rem;gap:16px;justify-content:flex-start}.site-footer p{font-size:.8125rem}.site-footer .brand img{width:140px}
  .legal-page .site-header{height:auto;min-height:85px;gap:12px}.legal-page .site-header>.button{max-width:190px;font-size:.8125rem}.legal-main{padding-top:38px}.legal-heading h1{font-size:3rem}.legal-content h2{font-size:1.5rem}.contact-form .form-fields>.button{font-size:1.2rem}
}
@media(max-width:370px){.deck-promise{gap:0 15px}.deck-promise .deck-combinations{font-size:1.1rem}.grimoire-section .spell-picker span{font-size:.6875rem}.spell-picker{gap:12px 7px}.online-grid h2{font-size:3.1rem}.launch h2{font-size:3.1rem}.platform strong{font-size:.75rem}}
/* Mobile leads with the game, followed by one unchanged signup form. */
@media(max-width:700px){
  .hero{min-height:0;padding-bottom:12px}
  .hero-inner{grid-template-areas:"copy" "stage" "action";grid-template-rows:auto;gap:0}
  .hero-copy{padding:20px 0 0}
  .hero-tagline{margin-top:14px}
  .hero-stage{height:440px;margin-top:8px}
  .hero-phone{width:185px}
  .hero-stage .floating-card{width:109px}
  .hero-stage .card-ice{top:26%;left:2%}
  .hero-stage .card-fire{bottom:19%;right:2%}
  .hero-action{max-width:530px;justify-self:center;margin-top:6px;padding-bottom:30px}
  .hero-signup{margin-top:16px;padding:0}
  .hero-signup input[type=email]{font-size:1rem}
  .hero-backdrop{top:155px;height:700px}
  .hero-shade{background:linear-gradient(#030304 8%,#030304b3 24%,transparent 46%,#03030466 65%,#030304 85%)}
  .hero .beam-one{top:140px}
}
@media(hover:none){.showcase-card:hover{transform:none}}
/* A hidden tab and the explicit pause control stop every decorative layer. */
.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
:root[data-motion=paused] .showcase-card::after{opacity:0}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=active]) .showcase-card::after{display:none}}