/* ============================================================
   SHADOWMIRE — shared design system (mockup)
   Wuxia / immortal-cultivation game portal. Firelit dark stage,
   crimson primary action, antique-gold ornament, jade qi accent.
   Type: Soulmaze brush (logo) · Cinzel (display) · Inter (body).
   ============================================================ */
/* Self-hosted (no external CDN; CSP-clean). Cinzel display + Inter body + Soulmaze wordmark. */
@font-face{font-family:'Cinzel';src:url('/fonts/cinzel-latin-600-normal.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel';src:url('/fonts/cinzel-latin-700-normal.woff2') format('woff2');font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Soulmaze';src:url('/files/soulmaze.otf') format('opentype');font-display:swap}

:root{
  /* Where Winds Meet palette: COOL near-black, graded gold→bronze, muted oxblood crimson. No brown. */
  --bg:oklch(0.135 0.012 250);
  --bg2:oklch(0.17 0.013 250);
  --bg3:oklch(0.205 0.014 250);
  --ink:oklch(0.96 0.008 250);
  --muted:oklch(0.72 0.015 250);
  --faint:oklch(0.55 0.015 250);
  --crimson:oklch(0.515 0.178 27);     /* cleaner crimson red (NOT brown/oxblood) */
  --crimson-hi:oklch(0.575 0.195 28);
  --gold:oklch(0.81 0.095 86);          /* bright gold */
  --gold-dim:oklch(0.70 0.082 86);      /* warm gold (was brownish bronze — de-browned) */
  --jade:oklch(0.73 0.08 168);          /* minor qi accent */
  --line:oklch(0.74 0.08 80 / .24);
  --line-soft:oklch(0.96 0.012 85 / .10);
  --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
/* clickable elements: hand cursor, no text-caret over their labels */
a,button,summary,label,.btn,[role="button"],[role="tab"]{-webkit-user-select:none;-moz-user-select:none;user-select:none}
/* decorative non-interactive chips/wordmark: plain arrow, no text-caret, no false pointer */
.badge,.badge *,.foot__mark{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.sm{font-family:'Soulmaze',"Cinzel",serif}
.cz{font-family:Cinzel,serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* ---------- flourish divider ---------- */
.flourish{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);font-size:12px;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap}
.flourish::before,.flourish::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.flourish::after{transform:scaleX(-1)}
.eyebrow{font-size:12px;letter-spacing:.30em;text-transform:uppercase;color:var(--gold)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:26px;padding:18px 34px;background:linear-gradient(180deg,oklch(0.05 0.008 250 / .5) 0%,transparent 100%);transition:background .5s var(--ease)}
.nav.solid{background:linear-gradient(180deg,oklch(0.05 0.008 250 / .62) 0%,transparent 100%)}
.nav__mark{display:inline-block;width:150px;height:36px;background:url(/files/crest-full.png) left center/contain no-repeat;text-indent:-9999px;overflow:hidden;white-space:nowrap;font-size:0;flex:none}
.nav__links{display:flex;gap:24px;font-size:13px;letter-spacing:.06em;margin-left:8px}
.nav__links a{opacity:.85;padding:6px 0;position:relative;transition:opacity .3s}
.nav__links a:hover,.nav__links a.current{opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--gold);transition:right .4s var(--ease)}
.nav__links a:hover::after,.nav__links a.current::after{right:0}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__util{display:flex;gap:14px;color:var(--muted)}
.nav__util a:hover{color:var(--ink)}
.nav__cta{font-family:Cinzel,serif;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);padding:10px 20px;transition:all .4s var(--ease)}
.nav__cta:hover{background:var(--gold);color:oklch(0.18 0.02 250)}
/* language menu (header) */
.nav__util a{display:flex;align-items:center}
.nav__util svg{width:18px;height:18px;display:block}
.lang{position:relative;display:flex}
.lang__btn{display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;background:none;border:0;font:inherit;padding:2px;transition:color .3s}
.lang__btn:hover{color:var(--ink)}
.lang__cur{font-family:Cinzel,serif;font-size:11px;letter-spacing:.1em;font-weight:600}
.lang__pop{position:absolute;right:0;top:calc(100% + 12px);min-width:172px;background:oklch(0.12 0.012 250 / .97);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px;display:none;flex-direction:column;z-index:80;box-shadow:0 22px 54px -26px #000}
.lang.open .lang__pop{display:flex}
.lang__pop button{text-align:left;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;letter-spacing:.03em;padding:10px 13px;cursor:pointer;transition:color .25s,background .25s}
.lang__pop button:hover{color:var(--ink);background:oklch(0.16 0.012 250 / .6)}
.lang__pop button.on{color:var(--gold)}

/* ---------- BUTTONS ---------- */
.btn{font-family:Cinzel,serif;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:16px 34px;position:relative;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s,background .4s;display:inline-flex;align-items:center;gap:10px}
.btn--primary{background:linear-gradient(176deg,var(--crimson-hi),var(--crimson) 52%,oklch(0.44 0.16 27) 100%);color:var(--ink);border:1px solid var(--gold-dim);box-shadow:inset 0 1px 0 oklch(0.80 0.12 62 / .38),0 10px 30px -14px oklch(0.50 0.17 27 / .7),0 0 22px -10px oklch(0.55 0.17 27 / .55);text-shadow:0 1px 2px oklch(0.20 0.08 27 / .55)}
.btn--primary:hover{background:linear-gradient(176deg,oklch(0.62 0.205 28),var(--crimson-hi) 55%,var(--crimson) 100%);transform:translateY(-2px);box-shadow:inset 0 1px 0 oklch(0.84 0.12 62 / .5),0 20px 54px -16px oklch(0.52 0.18 28 / .85),0 0 0 1px var(--gold),0 0 30px -6px oklch(0.60 0.18 28 / .6)}
.btn--ghost{background:oklch(0.20 0.01 250 / .4);color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn--light{background:oklch(0.93 0.01 250);color:oklch(0.2 0.02 250);border:1px solid oklch(0.93 0.01 250)}
.btn--light:hover{background:#fff;transform:translateY(-2px)}
.btn--primary::before,.btn--primary::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--gold);opacity:.85}
.btn--primary::before{left:5px;top:5px;border-right:0;border-bottom:0}
.btn--primary::after{right:5px;bottom:5px;border-left:0;border-top:0}
.play-tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- PLATFORM BADGES ---------- */
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid var(--line);border-radius:7px;background:oklch(0.13 0.01 250 / .55);transition:border-color .4s,transform .4s}
.badge:hover{border-color:var(--gold-dim);transform:translateY(-1px)}
.badge svg{width:17px;height:17px;color:var(--ink);flex:none}
.badge .b__t{text-align:left;line-height:1.1}
.badge .b__s{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.badge .b__n{display:block;font-size:12.5px;font-weight:600}

/* ---------- SECTION SHELL ---------- */
.sec{position:relative;padding:96px 40px}
.sec--tight{padding:64px 40px}
.sec__head{text-align:center;margin-bottom:54px;display:flex;flex-direction:column;align-items:center;gap:16px}
.sec__title{font-family:Cinzel,serif;font-weight:700;font-size:clamp(30px,4.4vw,56px);letter-spacing:.04em;line-height:1.05}
.sec__sub{color:var(--muted);max-width:54ch;line-height:1.55;font-size:15px}

/* ---------- INNER-PAGE HERO (sub-pages) ---------- */
.phero{position:relative;min-height:66vh;padding-top:96px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06);animation:kb 28s ease-out infinite alternate;filter:brightness(.74) contrast(1.06)}
@keyframes kb{to{transform:scale(1.12)}}
.phero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,oklch(0.09 0.012 250 / .8) 0,transparent 30%,transparent 45%,oklch(0.10 0.012 250 / .86) 88%,var(--bg) 100%)}
.phero__in{position:relative;z-index:3;padding:0 40px 8vh;max-width:var(--maxw);margin:0 auto;width:100%}
.phero__title{font-family:Cinzel,serif;font-weight:700;font-size:clamp(40px,6vw,86px);line-height:1;letter-spacing:.02em;margin:14px 0 16px;text-shadow:0 2px 18px oklch(0 0 0 / .8)}
.phero__sub{color:var(--muted);max-width:52ch;line-height:1.55;font-size:clamp(15px,1.5vw,18px)}

/* ---------- CARDS / TILES ---------- */
.grid{display:grid;gap:26px;max-width:var(--maxw);margin:0 auto}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.ncard{border:1px solid var(--line);background:var(--bg2);overflow:hidden;transition:transform .5s var(--ease),border-color .5s;display:block}
.ncard:hover{transform:translateY(-4px);border-color:var(--gold-dim)}
.ncard__img{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.ncard__tag{position:absolute;left:14px;top:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--crimson);color:var(--ink);padding:5px 10px}
.ncard__body{padding:20px 22px 26px}
.ncard__date{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.ncard__title{font-family:Cinzel,serif;font-size:18px;line-height:1.3}

/* class / portrait tile */
.ctile{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);display:block;transition:border-color .5s var(--ease)}
.ctile:hover{border-color:var(--gold)}
.ctile__img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform 1.1s var(--ease)}
.ctile:hover .ctile__img{transform:scale(1.06)}
.ctile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,oklch(0.09 0.01 250 / .92))}
.ctile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px}
.ctile__role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.ctile__name{font-family:Cinzel,serif;font-weight:700;font-size:24px;line-height:1}

.chip{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--jade);border:1px solid oklch(0.74 0.085 168 / .4);padding:5px 11px;border-radius:4px}
.chip--gold{color:var(--gold);border-color:var(--gold-dim)}

/* panel (bordered content block) */
.panel{border:1px solid var(--line);background:var(--bg2);padding:30px 32px}

/* ---------- SOCIAL RAIL ---------- */
.rail{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:16px}
.rail__t{writing-mode:vertical-rl;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.rail a{color:var(--ink);transition:color .3s,transform .3s}
.rail a:hover{color:var(--gold);transform:translateY(-2px)}
.rail svg{width:17px;height:17px}

/* ---------- CTA BAND ---------- */
.band{position:relative;text-align:center;padding:110px 40px;overflow:hidden}
.band__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.band__scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),oklch(0.12 0.01 250 / .82),var(--bg));z-index:1}
.band__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px}
.band__h{font-family:Cinzel,serif;font-weight:700;font-size:clamp(30px,5vw,64px);letter-spacing:.03em;max-width:18ch;line-height:1.05}

/* ---------- FOOTER ---------- */
.foot{background:oklch(0.11 0.012 250);border-top:1px solid var(--line);padding:54px 40px 30px}
.foot__top{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot__mark{font-family:'Soulmaze',"Cinzel",serif;font-size:32px;letter-spacing:.01em}
.foot__studio{font-size:12px;color:var(--faint);margin-top:8px;letter-spacing:.06em}
.foot__cols{display:flex;gap:54px;flex-wrap:wrap}
.foot__col h4{font-family:Cinzel,serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot__col a{display:block;font-size:13px;color:var(--muted);margin-bottom:9px;transition:color .3s}
.foot__col a:hover{color:var(--ink)}
.foot__bottom{max-width:var(--maxw);margin:36px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;color:var(--faint);font-size:12px}
.rating{display:flex;align-items:center;gap:10px;color:var(--muted)}
.rating .box{border:1px solid var(--faint);padding:4px 9px;font-size:10px;letter-spacing:.1em}
.foot__bottom a{color:var(--muted)}.foot__bottom a:hover{color:var(--gold)}
.foot__studio a{color:var(--muted)}.foot__studio a:hover{color:var(--gold)}
.foot__social{display:flex;gap:11px;margin-top:22px}
.foot__social a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--muted);transition:color .3s,border-color .3s,transform .3s}
.foot__social a:hover{color:var(--gold);border-color:var(--gold-dim);transform:translateY(-2px)}
.foot__social svg{width:18px;height:18px}

/* cookie consent (site-wide, via partials) */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:16px 28px;background:oklch(0.1 0.012 250 / .97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -12px 44px -24px #000}
.cookie p{font-size:13px;color:var(--muted);line-height:1.55;max-width:640px}
.cookie p a{color:var(--gold)}
.cookie__btns{display:flex;gap:12px;flex:none}
.cookie .btn{padding:11px 24px;font-size:12px}
@media(max-width:620px){.cookie{flex-direction:column;gap:14px;text-align:center;padding:16px 20px}}

/* feedback chip (mockup only) */
.feedback{position:fixed;right:18px;bottom:18px;z-index:90;background:oklch(0.12 0.01 250 / .92);border:1px solid var(--line);padding:11px 16px;font-size:12px;color:var(--muted);border-radius:6px}
.feedback b{color:var(--gold)}

@media(max-width:980px){.nav__links{display:none}.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.rail{display:none}.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- LEGAL PAGES (privacy / terms / user-agreement / delete-account) ---------- */
.lhero{padding:130px 24px 0;text-align:center}
.lhero h1{font-family:Cinzel,serif;font-weight:700;font-size:clamp(30px,4.4vw,50px);letter-spacing:.03em}
.lhero .upd{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.legal{max-width:780px;margin:0 auto;padding:48px 40px 64px}
.legal__note{border:1px solid var(--gold-dim);background:oklch(0.13 0.012 250 / .5);padding:16px 20px;font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:40px}
.legal h2{font-family:Cinzel,serif;font-weight:700;font-size:19px;letter-spacing:.03em;color:var(--ink);margin:34px 0 12px;display:flex;gap:12px;align-items:baseline}
.legal h2 .n{color:var(--gold);font-size:14px;flex:none}
.legal p{color:var(--muted);line-height:1.72;font-size:14.5px;margin-bottom:14px}
.legal ul{margin:0 0 16px 22px;color:var(--muted);line-height:1.7;font-size:14px}
.legal li{margin-bottom:7px}
.legal a{color:var(--gold)}
@media(max-width:680px){.legal{padding:40px 22px 40px}}