:root{
  /* WOM Brand palette (from presentation) */
  --bg: #231F20;            /* Flat Black */
  --text: #f4f1ec;
  --muted: rgba(244,241,236,.70);
  --line: rgba(175,167,119,.22); /* Gold-ish line */

  --teal: #30BEBC;          /* Tropical Teal */
  --green: #65743A;         /* Fern Green */
  --orange: #E97132;        /* Atomic Tangerine */
  --red: #BF3100;           /* Rusty Red */
  --gold: #AFA777;          /* Gold */

  --accent: var(--teal);
  --accent2: var(--orange);
  --danger: var(--red);

  --radius: 14px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
              radial-gradient(1200px 600px at 16% 0%, rgba(48,190,188,.28), transparent 60%),
              radial-gradient(1050px 520px at 86% 0%, rgba(233,113,50,.22), transparent 60%),
              radial-gradient(900px 650px at 55% 110%, rgba(101,116,58,.16), transparent 62%),
              radial-gradient(800px 520px at 70% 55%, rgba(191,49,0,.10), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height:1.45;
}

/* Subtle grain / texture (SVG turbulence) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* DNA vibe – big, subtle strands */
body::after{
  content:"";
  position:fixed;
  top:120px;
  right:-140px;
  width:520px;
  height:920px;
  background: url("./wom_dna_loop_green.png") no-repeat center / contain;
  opacity:.07;
  pointer-events:none;
  z-index:0;
  transform: rotate(10deg);
}
@media (max-width: 900px){
  body::after{display:none}
}

/* Extra icons – subtle, chaotic, WOM vibe */
.bg-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.075;
  background:
    url("./wom_icon_poker.png") no-repeat 6% 18% / 220px,
    url("./wom_icon_action.png") no-repeat 92% 22% / 210px,
    url("./wom_icon_flash.png") no-repeat 10% 86% / 160px,
    url("./wom_icon_power.png") no-repeat 92% 84% / 240px;
  filter:
    drop-shadow(0 22px 60px rgba(0,0,0,.55))
    drop-shadow(0 0 26px rgba(48,190,188,.10));
}
@media (max-width: 900px){
  .bg-decor{
    opacity:.06;
    background:
      url("./wom_icon_flash.png") no-repeat 10% 86% / 130px,
      url("./wom_icon_action.png") no-repeat 88% 18% / 170px;
  }
}

/* Ensure content is always above the decorative layer */
main, .site-footer{position:relative; z-index:1;}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.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;
}

.container{max-width:1100px; margin:0 auto; padding:24px}

body.modal-open{overflow:hidden}

/* ===== Header / Navigation ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background: rgba(35,31,32,.70); /* fallback */
  isolation:isolate;
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(35,31,32,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index:-1;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(48,190,188,.55), rgba(233,113,50,.45), transparent);
  opacity:.55;
  pointer-events:none;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  letter-spacing:.4px;
  position:relative;
}
.brand::before{
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius: 16px;
  background:
      radial-gradient(120px 70px at 28% 40%, rgba(48,190,188,.18), transparent 65%),
      radial-gradient(120px 70px at 75% 35%, rgba(233,113,50,.14), transparent 65%);
  opacity:.9;
  pointer-events:none;
}
.brand-logo{
  display:block;
  width:auto;
  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,.35))
    drop-shadow(0 0 20px rgba(48,190,188,.10));
}
.brand-logo--mark{height:56px}
.brand-logo--full{height:54px}

@media (max-width: 640px){
  .brand-logo--full{display:none}
}
@media (min-width: 641px){
  .brand-logo--mark{display:none}
}

/* Burger button */
.nav-toggle{
  display:none;
  border-radius: 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
}
.nav-toggle:hover{background: rgba(255,255,255,.07)}
.nav-toggle:active{transform: translateY(1px)}
.nav-toggle__bars{
  display:block;
  width:22px;
  height:14px;
  position:relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars{
  background: transparent;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(48,190,188,.95), rgba(233,113,50,.85));
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars::after{bottom:0}
.nav-toggle__bars{
  background: linear-gradient(90deg, rgba(48,190,188,.85), rgba(233,113,50,.75));
  height:2px;
  margin-top:6px;
  border-radius:999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.nav{
  display:flex;
  align-items:center;
}
.nav-head{display:none}
.nav-links{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.nav a{
  padding:8px 10px;
  border-radius:10px;
  color:var(--muted);
  border:1px solid transparent;
}
.nav a.active{
  color:var(--text);
  border-color: rgba(48,190,188,.44);
  background: linear-gradient(135deg, rgba(48,190,188,.18), rgba(233,113,50,.10));
}
.nav a:hover{background: rgba(255,255,255,.06); text-decoration:none; color:var(--text)}

.nav-sep{
  width:1px;
  height:20px;
  background: rgba(175,167,119,.28);
  border-radius:999px;
  margin:0 4px;
}

.nav-scrim{display:none}

/* Mobile off-canvas nav */
@media (max-width: 900px){
  .nav-toggle{display:inline-flex}

  .nav{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(360px, 88vw);
    transform: translateX(102%);
    transition: transform .22s ease;
    background: rgba(35,31,32,.94);
    border-left:1px solid var(--line);
    box-shadow: var(--shadow);
    padding:14px 14px 18px;
    z-index:80;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    backdrop-filter: blur(14px);
  }

  body.nav-open .nav{transform: translateX(0)}

  body.nav-open{overflow:hidden}

  .nav-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .nav-head-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:950;
    letter-spacing:.08em;
  }
  .nav-head-logo{height:32px; width:auto}

  .nav-close{
    border-radius: 12px;
    padding:8px 10px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--text);
    cursor:pointer;
  }
  .nav-close:hover{background: rgba(255,255,255,.07)}
  .nav-close:active{transform: translateY(1px)}

  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding-top:6px;
    overflow:auto;
  }

  .nav a{
    padding:12px 12px;
    font-size:16px;
    border-radius: 14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: var(--text);
  }
  .nav a:hover{background: rgba(255,255,255,.06)}
  .nav a.active{background: rgba(48,190,188,.16)}

  .nav-sep{
    width:100%;
    height:1px;
    margin:6px 0;
    background: rgba(175,167,119,.22);
  }

  .nav-scrim{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition: opacity .22s ease;
    z-index:70;
  }
  body.nav-open .nav-scrim{opacity:1; pointer-events:auto}
}

/* ===== Hero ===== */
.hero{padding:46px 0 18px}

.hero--wom{position:relative}
.hero--wom::before{
  content:"";
  position:absolute;
  left:-140px;
  top:-40px;
  width:420px;
  height:420px;
  background: url("./wom_icon_mutation.png") no-repeat center / contain;
  opacity:.08;
  pointer-events:none;
  transform: rotate(-16deg);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(48,190,188,.10));
}
@media (max-width: 900px){
  .hero--wom::before{display:none}
}

.hero--wom::after{
  content:"";
  position:absolute;
  top:-60px;
  right:-140px;
  width:520px;
  height:700px;
  background: url("./wom_dna_loop_white.png") no-repeat center / contain;
  opacity:.10;
  pointer-events:none;
  transform: rotate(10deg);
}
@media (max-width: 900px){
  .hero--wom::after{display:none}
}

.hero-brand{display:flex; align-items:center; gap:12px}
.hero-logo{
  height:170px;
  width:auto;
  max-width: min(640px, 100%);
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(48,190,188,.12));
}
@media (max-width: 700px){
  .hero-logo{height:120px}
}

.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }

.h1{
  font-size:44px;
  line-height:1.05;
  margin:0 0 10px;
  background: linear-gradient(90deg, rgba(48,190,188,.95), rgba(233,113,50,.88));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
@media (max-width: 700px){ .h1{font-size:34px} }
.lead{color:var(--muted); font-size:18px; margin:0 0 18px}

.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  padding:10px 14px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:var(--text);
  font-weight:750;
  cursor:pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.16);
}
.btn:hover{background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); text-decoration:none}
.btn:active{transform: translateY(1px)}

.btn.primary{
  border-color: rgba(48,190,188,.55);
  background: linear-gradient(135deg, rgba(48,190,188,.42), rgba(233,113,50,.28));
  box-shadow:
    0 0 0 1px rgba(48,190,188,.10),
    0 12px 40px rgba(48,190,188,.14),
    0 12px 40px rgba(233,113,50,.10);
}
.btn.primary:hover{background: linear-gradient(135deg, rgba(48,190,188,.52), rgba(233,113,50,.36))}


/* Extra accent button variants */
.btn.teal{
  border-color: rgba(48,190,188,.55);
  background: linear-gradient(135deg, rgba(48,190,188,.28), rgba(101,116,58,.16));
  box-shadow:
    0 0 0 1px rgba(48,190,188,.08),
    0 12px 36px rgba(48,190,188,.10);
}
.btn.teal:hover{background: linear-gradient(135deg, rgba(48,190,188,.36), rgba(101,116,58,.20))}

.btn.orange{
  border-color: rgba(233,113,50,.55);
  background: linear-gradient(135deg, rgba(233,113,50,.28), rgba(191,49,0,.14));
  box-shadow:
    0 0 0 1px rgba(233,113,50,.08),
    0 12px 36px rgba(233,113,50,.10);
}
.btn.orange:hover{background: linear-gradient(135deg, rgba(233,113,50,.38), rgba(191,49,0,.18))}

.panel{
  border:1px solid rgba(175,167,119,.20);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
.panel h3{margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.panel p{margin:0; color:var(--muted)}

.section{padding:18px 0}
.section-title{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.section-title h2{margin:0; font-size:18px}
.section-title .muted{color:var(--muted); font-size:14px}

/* ===== Cards grid ===== */
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
  justify-content:center;
  gap:18px;
}

.card-item{
  position:relative;
  width:100%;
  max-width: 240px;
  border:1px solid rgba(175,167,119,.22);
  border-radius: calc(var(--radius) + 2px);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
.card-item:hover{
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:
    0 0 0 1px rgba(48,190,188,.16),
    0 22px 60px rgba(0,0,0,.32);
  text-decoration:none;
}

.card-link{display:block; color:inherit}
.card-link:hover{text-decoration:none}

.card-thumb{aspect-ratio: 5 / 7; background: rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center}
.card-thumb img{width:100%; height:100%; object-fit:cover; display:block}

.card-meta{padding:10px 10px 12px}
.card-name{font-weight:850; margin:0 0 6px; font-size:14px}
.card-sub{display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px}
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(175,167,119,.24);
  background: rgba(255,255,255,.04);
}

.form-row{display:flex; gap:10px; flex-wrap:wrap}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
}

/* Card action overlay */
.card-actions{
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:10;
  pointer-events:none; /* allow card link click through */
}
.card-actions-left,
.card-actions-right{display:flex; align-items:center; gap:8px; pointer-events:auto}

.card-action-btn{
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(175,167,119,.28);
  background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.28));
  color: var(--text);
  cursor:pointer;
  font-weight:850;
  letter-spacing:.01em;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.card-action-btn:hover{background: linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.32))}
.card-action-btn:active{transform: translateY(1px)}

.card-action-btn--flip{
  border-color: rgba(48,190,188,.55);
  background: linear-gradient(135deg, rgba(48,190,188,.18), rgba(0,0,0,.34));
}
.card-action-btn--zoom{
  padding:8px 10px;
  border-color: rgba(233,113,50,.50);
  background: linear-gradient(135deg, rgba(233,113,50,.16), rgba(0,0,0,.36));
}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line); margin-top:30px; padding:20px 0; color:var(--muted)}
.footer-inner{display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; align-items:center}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}

.kv{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 700px){ .kv{grid-template-columns:1fr} }
.kv .panel{padding:14px}

.note{color:var(--muted); font-size:13px}

.card-detail{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 900px){ .card-detail{grid-template-columns:1fr} }

.card-hero{
  border:1px solid rgba(175,167,119,.22);
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
.card-hero img{width:100%; height:auto; display:block}

/* ===== Phase 2: Filters ===== */
.filters{padding:14px}
.filters-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:10px}
.field{display:flex; flex-direction:column; gap:6px}
.label{font-size:12px; color:var(--muted); letter-spacing:.03em}
.range{display:flex; gap:8px; align-items:center}
.range-sep{color:var(--muted)}
.filters-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px}

/* ===== Phase 2: Flip cards ===== */
.flip-card{
  aspect-ratio: 5 / 7;
  background: rgba(255,255,255,.04);
  display:block;
  width:100%;
  perspective: 900px;
  overflow:hidden;
}
.flip-card--large{max-width:100%}
.flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style: preserve-3d;
  transition: transform .55s ease;
}
.flip-card.is-flipped .flip-inner{transform: rotateY(180deg)}
.flip-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.flip-face img{width:100%; height:100%; object-fit:cover; display:block}
.flip-back{transform: rotateY(180deg)}

@media (prefers-reduced-motion: reduce){
  .flip-inner{transition:none}
  .card-item{transition:none}
}

.fav-form{margin:0}
.fav-toggle{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(175,167,119,.28);
  background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.28));
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.fav-toggle:hover{background: rgba(35,31,32,.72)}
.fav-toggle.is-on{
  border-color: rgba(175,167,119,.60);
  background: rgba(175,167,119,.14);
  color: var(--gold);
}

.btn.fav-btn{border-color: rgba(175,167,119,.35)}
.btn.fav-btn.is-on{border-color: rgba(175,167,119,.55); background: rgba(175,167,119,.12); color: var(--text)}

/* ===== Tooltips (hover/focus) ===== */
.tip{position:relative}
.tip[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(2px);
  opacity:0;
  pointer-events:none;
  background: rgba(35,31,32,.94);
  border:1px solid var(--line);
  color: var(--text);
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  line-height:1.2;
  max-width:260px;
  width:max-content;
  white-space:normal;
  z-index:30;
  transition: opacity .12s ease, transform .12s ease;
}
.tip[data-tip]::before{
  content: "";
  position:absolute;
  left:50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid rgba(17,21,27,.95);
  opacity:0;
  transition: opacity .12s ease;
  z-index:31;
}
.tip[data-tip]:hover::after,
.tip[data-tip]:focus-visible::after{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}
.tip[data-tip]:hover::before,
.tip[data-tip]:focus-visible::before{opacity:1}

/* ===== Keyword chips ===== */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(175,167,119,.24);
  background: rgba(255,255,255,.04);
  font-size:13px;
  color: var(--text);
}
.chip-level{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(48,190,188,.20);
  border:1px solid rgba(48,190,188,.38);
  font-size:12px;
  font-weight:900;
}

/* ===== Pagination ===== */
.pagination{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-weight:750;
}
.page-btn:hover{background: rgba(255,255,255,.07); text-decoration:none}
.page-btn.active{background: rgba(48,190,188,.16); border-color: rgba(48,190,188,.35)}
.page-btn.disabled{opacity:.45; pointer-events:none}
.page-dots{color:var(--muted); padding:0 4px}
.page-meta{margin-left:auto; color:var(--muted); font-size:13px}

.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:4px 0}

hr.sep{border:none; border-top:1px solid var(--line); margin:16px 0}

.small{font-size:13px; color:var(--muted)}

/* ===== Phase 3: Rules / Lore / FAQ ===== */
.doc-layout{
  display:grid;
  grid-template-columns: 290px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 950px){
  .doc-layout{grid-template-columns:1fr}
}

.doc-toc{
  border:1px solid rgba(175,167,119,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding:12px;
  position: sticky;
  top: 76px; /* header height */
  max-height: calc(100vh - 92px);
  overflow:auto;
}
@media (max-width: 950px){
  .doc-toc{position:relative; top:auto; max-height:none}
}

.toc-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px}
.toc-title{font-weight:900; letter-spacing:.02em}
.toc-sub{color:var(--muted); font-size:12px}

.toc{list-style:none; margin:0; padding-left:0}
.toc li{margin:2px 0}
.toc-link{display:block; padding:6px 8px; border-radius:10px; color:var(--muted); border:1px solid transparent}
.toc-link:hover{background: rgba(255,255,255,.06); color:var(--text); text-decoration:none}
.toc-link.is-active{background: rgba(48,190,188,.12); border-color: rgba(48,190,188,.30); color:var(--text)}
.toc-l1{font-weight:850}
.toc-l2{padding-left:16px}
.toc-l3{padding-left:26px; font-size:13px}

.doc-content{min-width:0}

.prose h1,.prose h2,.prose h3,.prose h4{scroll-margin-top: 90px}
.prose h1{font-size:28px; margin:10px 0 10px}
.prose h2{font-size:20px; margin:18px 0 8px}
.prose h3{font-size:16px; margin:14px 0 6px}
.prose p{color:var(--muted); margin:10px 0}
.prose ul,.prose ol{color:var(--muted); padding-left:22px}
.prose li{margin:4px 0}
.prose code{background: rgba(255,255,255,.06); border:1px solid var(--line); padding:2px 6px; border-radius:8px; font-size:.95em}
.prose pre.code{background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius: var(--radius); padding:12px; overflow:auto}
.prose blockquote{margin:12px 0; padding:10px 12px; border-left:3px solid rgba(48,190,188,.55); background: rgba(48,190,188,.06); border-radius: 12px}
.prose blockquote p{margin:0; color:var(--text)}
.prose hr.sep{margin:18px 0}

.h-anchor{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:8px;
  border:1px solid transparent;
  color: rgba(168,179,197,.85);
  font-weight:950;
  opacity:.0;
  transition: opacity .12s ease, background .12s ease;
}
.prose h1:hover .h-anchor,
.prose h2:hover .h-anchor,
.prose h3:hover .h-anchor,
.prose h4:hover .h-anchor{opacity:1}
.h-anchor:hover{background: rgba(255,255,255,.06); border-color: var(--line); color:var(--text); text-decoration:none}

.note.note-sep{display:inline-block; margin:0 8px; color:var(--muted)}
.note-sep{display:inline-block; margin:0 8px; color:var(--muted)}

/* Lore */
.chapter-nav{display:flex; flex-direction:column; gap:6px}
.chapter-link{
  display:block;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
}
.chapter-link:hover{background: rgba(255,255,255,.06); color:var(--text); text-decoration:none}
.chapter-link.active{background: rgba(48,190,188,.12); border-color: rgba(48,190,188,.30); color:var(--text)}
.lore-head{margin-bottom:10px}
.lore-title{margin:0 0 6px; font-size:24px}
.lore-nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* FAQ */
.faq-category{margin-bottom:18px}
.faq-title{margin:12px 0 10px; font-size:16px; letter-spacing:.02em}
.faq-item{
  border:1px solid rgba(175,167,119,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding:0;
  margin:10px 0;
  overflow:hidden;
}
.faq-q{cursor:pointer; padding:12px 14px; font-weight:850; color:var(--text)}
.faq-q:hover{background: rgba(255,255,255,.04)}
.faq-a{padding:0 14px 12px}
.faq-a p{margin:8px 0; color:var(--muted)}

/* ===== Phase 4: Public User-Auth (minimal UI) ===== */
.alert{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:12px 14px;
  margin:12px 0;
  background: rgba(255,255,255,.03);
}
.alert--success{
  border-color: rgba(48,190,188,.40);
  background: rgba(48,190,188,.10);
}
.alert--error{
  border-color: rgba(191,49,0,.40);
  background: rgba(191,49,0,.10);
}

/* ===== Card Zoom Modal ===== */
.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.modal.is-open{opacity:1; pointer-events:auto}

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.66);
}

.modal__dialog{
  position:relative;
  width:min(520px, 100%);
  border-radius: calc(var(--radius) + 4px);
  border:1px solid rgba(175,167,119,.22);
  background: rgba(35,31,32,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(0,0,0,.58);
  padding:14px;
}

.modal__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}
.modal__title h3{margin:0; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

.modal__close{
  border-radius: 12px;
  padding:8px 10px;
  border:1px solid rgba(175,167,119,.26);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
}
.modal__close:hover{background: rgba(255,255,255,.07)}
.modal__close:active{transform: translateY(1px)}

.modal__content{display:flex; flex-direction:column; align-items:center; gap:10px}
.flip-card--modal{width:min(360px, 84vw)}
.modal__actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:4px}


/* ===== Little motion (optional) ===== */
@media (prefers-reduced-motion: no-preference){
  body::after{animation: womDnaFloat 18s ease-in-out infinite}
  .hero--wom::after{animation: womDnaFloat2 20s ease-in-out infinite}
}
@keyframes womDnaFloat{
  0%,100%{transform: rotate(10deg) translateY(0)}
  50%{transform: rotate(10deg) translateY(-18px)}
}
@keyframes womDnaFloat2{
  0%,100%{transform: rotate(10deg) translateY(0)}
  50%{transform: rotate(10deg) translateY(14px)}
}