/* Easy Tabletop Fantasy – Fantasy-themed design with decorative borders
   Uses foundation/kleurenschema.css as base for WCAG-compliant colors
*/
@import url('../foundation/kleurenschema.css');

/* Map new color schema to existing variable names for compatibility */
:root{
    /* Base colors from kleurenschema.css */
    --bg-page:#f7f7fb;
    --bg-card:#ffffff;
    --text-primary:#1f2937;
    --text-secondary:#4b5563;
    --brand-primary:#4c1d95;
    --brand-secondary:#6d28d9;
    --brand-focus:#7c3aed;
    --accent-gold:#7a5c00;
    --accent-gold-soft:#c9a227;
    --border-subtle:#e5e7eb;
    --radius:14px;
    --radius-lg:18px;

    /* Map to new schema variables */
    --color-primary:var(--brand-primary);
    --color-primary-glow:var(--brand-focus);
    --color-secondary:var(--accent-gold-soft);
    --color-secondary-soft:var(--accent-gold);
    --color-bg-dark:var(--bg-page);
    --color-bg-deep:var(--bg-card);
    --color-text-light:var(--text-primary);
    --color-text-muted:var(--text-secondary);
    --color-text-dark:var(--text-primary);
    --color-text-dark-muted:var(--text-secondary);
    --color-focus:var(--brand-focus);

    /* Mapped variables for compatibility */
    --bg:var(--bg-page);
    --fg:var(--text-primary);
    --muted:var(--text-secondary);
    --line:var(--border-subtle);
    --soft:var(--bg-page);
    --soft2:var(--bg-card);
    --link:var(--brand-focus);

    /* Fantasy accent colors mapped to new scheme */
    --fantasy-gold:var(--accent-gold-soft);
    --fantasy-gold-light:var(--accent-gold);
    --fantasy-blue:var(--brand-primary);
    --fantasy-blue-light:var(--brand-secondary);
    --fantasy-burgundy:var(--brand-primary);
    --fantasy-burgundy-light:var(--brand-secondary);
    --fantasy-green:var(--accent-gold-soft);
    --fantasy-green-light:var(--accent-gold);

    --max:1104px;
    --r:var(--radius);
    --r2:var(--radius-lg);
    --shadow:0 2px 8px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.08);
    --shadow-strong:0 4px 12px rgba(0,0,0,.15),0 12px 32px rgba(0,0,0,.12);
    --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    --serif:Georgia,serif;
    
    /* Callout colors with new theme */
    --note-b:rgba(199,184,243,.5); --note-bg:rgba(243,241,255,.8);
    --ex-b:rgba(230,214,163,.5); --ex-bg:rgba(255,250,240,.8);
    --warn-b:rgba(243,180,180,.5); --ex-bg:rgba(255,243,243,.8);
  }
  
  /* Dark mode mapping */
  @media (prefers-color-scheme: dark){
    :root{
      /* Base colors - dark mode */
      --bg-page:#120814;
      --bg-card:#1b0f24;
      --text-primary:#f5f3f7;
      --text-secondary:#d6d3dd;
      --brand-primary:#d8b4fe;
      --brand-secondary:#9b5de5;
      --brand-focus:#b983ff;
      --accent-gold:#f2d27c;
      --accent-gold-soft:#d4af37;
      --border-subtle:#2a2033;

      --color-primary:var(--brand-primary);
      --color-primary-glow:var(--brand-focus);
      --color-secondary:var(--accent-gold);
      --color-secondary-soft:var(--accent-gold-soft);
      --color-bg-dark:var(--bg-page);
      --color-bg-deep:var(--bg-card);
      --color-text-light:var(--text-primary);
      --color-text-muted:var(--text-secondary);
      --color-text-dark:var(--text-primary);
      --color-text-dark-muted:var(--text-secondary);

      --bg:var(--bg-page);
      --fg:var(--text-primary);
      --muted:var(--text-secondary);
      --line:var(--border-subtle);
      --soft:var(--bg-page);
      --soft2:var(--bg-card);
      --link:var(--brand-focus);

      --fantasy-gold:var(--accent-gold);
      --fantasy-gold-light:var(--accent-gold-soft);
      --fantasy-blue:var(--brand-primary);
      --fantasy-blue-light:var(--brand-secondary);
      --fantasy-burgundy:var(--brand-primary);
      --fantasy-burgundy-light:var(--brand-secondary);
      --fantasy-green:var(--accent-gold);
      --fantasy-green-light:var(--accent-gold-soft);

      --shadow:0 2px 8px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
      --shadow-strong:0 4px 12px rgba(0,0,0,.6),0 12px 32px rgba(0,0,0,.7);
    }
  }

  *{box-sizing:border-box}
  html{
    scroll-behavior:smooth;
    scroll-padding-top:80px;
  }
  body{height:100%}
  body{
    margin:0;
    font-family:var(--sans);
    line-height:1.55;
    color:var(--fg);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    position:relative;
  }
  
  /* Subtle gradient overlay for visual interest */
  @media (prefers-color-scheme: dark){
    body{
      background:
        radial-gradient(circle at 20% 50%, rgba(107,47,168,.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212,175,55,.05) 0%, transparent 50%),
        var(--bg);
    }
  }
  
  img,svg,video{max-width:100%;height:auto}
  a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
  a:hover{color:var(--accent-gold-soft);text-decoration:underline}
  ::selection{background:rgba(107,47,168,.3)}
  
  /* Layout */
  header,main,footer{max-width:var(--max);margin:0 auto;padding:18px}
  header{
    border-bottom:1px solid var(--line);
    background:var(--bg-card);
    backdrop-filter:saturate(150%) blur(8px);
    position:sticky;top:0;z-index:1000;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
  
  @media (prefers-color-scheme: dark){
    header{
      border-bottom:2px solid var(--accent-gold-soft);
      background:var(--bg-card);
      box-shadow:0 2px 8px rgba(0,0,0,.4);
    }
  }
  main{padding-top:22px}
  footer{
    border-top:1px solid var(--line);
    font-size:.95rem;
    color:var(--muted);
    background:var(--bg-card);
    padding-top:24px;
    margin-top:32px;
  }
  
  @media (prefers-color-scheme: dark){
    footer{
      border-top:2px solid var(--accent-gold-soft);
      background:var(--bg-card);
    }
  }
  
  /* Nav */
  nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .nav-logo{
    height:40px;
    width:auto;
    display:block;
  }
  .logo-link{
    padding:4px 8px;
    border-radius:999px;
    border:1px solid transparent;
    display:flex;
    align-items:center;
    transition:all 0.2s ease;
  }
  .logo-link:hover{
    border-color:var(--line);
    background:rgba(255,255,255,.8);
  }
  .logo-link:hover .nav-logo{
    filter:brightness(0.8);
  }
  nav a{
    text-decoration:none;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid transparent;
    color:var(--muted);
  }
  nav a:hover{border-color:var(--line);background:rgba(255,255,255,.8);color:var(--fg-on-light)}
  nav a[aria-current="page"]{
    border-color:var(--accent-gold-soft);
    background:linear-gradient(135deg, rgba(184,134,11,.1), rgba(212,175,55,.05));
    color:var(--brand-primary);
    font-weight:600;
    box-shadow:0 2px 4px rgba(184,134,11,.15);
  }
  
  @media (prefers-color-scheme: dark){
    nav a[aria-current="page"]{
      color:var(--accent-gold);
      border-color:var(--accent-gold);
    }
  }
  
  /* Dropdown menu */
  .nav-dropdown{
    position:relative;
    display:inline-block;
  }
  .nav-dropdown > a{
    position:relative;
    padding-right:24px;
  }
  .nav-dropdown > a::after{
    content:'▼';
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    font-size:0.7em;
    opacity:0.6;
    transition:transform 0.2s ease;
  }
  .nav-dropdown:hover > a::after{
    transform:translateY(-50%) rotate(180deg);
  }
  .nav-dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    margin-top:4px;
    min-width:160px;
    background:var(--bg-card);
    border:2px solid var(--accent-gold-soft);
    border-radius:var(--r);
    box-shadow:var(--shadow-strong);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index:100;
    padding:8px 0;
    color:var(--text-primary);
  }
  
  @media (prefers-color-scheme: dark){
    .nav-dropdown-menu{
      border-color:var(--accent-gold);
      background:var(--bg-card);
    }
  }
  .nav-dropdown:hover .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav-dropdown-menu a{
    display:block;
    padding:8px 16px;
    color:var(--muted);
    text-decoration:none;
    border-radius:0;
    border:none;
    border-left:3px solid transparent;
    transition:all 0.2s ease;
  }
  .nav-dropdown-menu a:hover{
    background:rgba(184,134,11,.08);
    color:var(--brand-primary);
    border-left-color:var(--accent-gold-soft);
  }
  .nav-dropdown-menu a[aria-current="page"]{
    background:linear-gradient(135deg, rgba(184,134,11,.12), rgba(212,175,55,.08));
    color:var(--brand-primary);
    font-weight:600;
    border-left-color:var(--accent-gold-soft);
    box-shadow:none;
  }
  
  @media (prefers-color-scheme: dark){
    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a[aria-current="page"]{
      color:var(--accent-gold);
    }
  }
  
  /* Typography */
  h1,h2,h3,h4{letter-spacing:-.01em;color:var(--brand-primary)}
  h1{
    font-size:1.85rem;
    line-height:1.15;
    margin:0 0 10px;
    color:var(--brand-primary);
    scroll-margin-top:80px;
  }
  .hero-section{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-bottom:24px;
    text-align:center;
  }
  .hero-logo-wrapper{
    max-width:600px;
    width:100%;
    margin:0 auto;
    position:relative;
    display:none;
    text-align:center;
  }
  .hero-logo-combined{
    width:100%;
    height:auto;
    display:block;
    position:relative;
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    background:var(--bg-card);
    box-shadow:var(--shadow);
  }
  
  @media (prefers-color-scheme: dark){
    .hero-logo-combined{
      box-shadow:var(--shadow-strong);
      border-color:var(--accent-gold-soft);
      background:var(--bg-card);
    }
  }
  
  /* Decorative border using SVG pattern */
  .hero-logo-combined::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:var(--r2);
    padding:2px;
    background:
      url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><style>.border-path{fill:none;stroke:%23b8860b;stroke-width:0.8;opacity:0.6;}.corner-ornament{fill:%23b8860b;opacity:0.4;}</style></defs><rect x="5" y="5" width="90" height="90" class="border-path" rx="2"/><path d="M 5 5 Q 5 8 8 8 Q 8 5 5 5" class="corner-ornament"/><path d="M 8 8 Q 8 12 12 12 Q 12 8 8 8" class="corner-ornament" opacity="0.3"/><path d="M 95 5 Q 92 5 92 8 Q 95 8 95 5" class="corner-ornament"/><path d="M 92 8 Q 88 8 88 12 Q 92 12 92 8" class="corner-ornament" opacity="0.3"/><path d="M 5 95 Q 5 92 8 92 Q 8 95 5 95" class="corner-ornament"/><path d="M 8 92 Q 8 88 12 88 Q 12 92 8 92" class="corner-ornament" opacity="0.3"/><path d="M 95 95 Q 92 95 92 92 Q 95 92 95 95" class="corner-ornament"/><path d="M 92 92 Q 88 92 88 88 Q 92 88 92 92" class="corner-ornament" opacity="0.3"/><circle cx="25" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="50" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="75" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="25" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="50" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="75" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="25" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="50" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="75" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="25" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="50" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="75" r="1.5" class="corner-ornament" opacity="0.2"/></svg>')
      repeat;
    background-size:40px 40px;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:0;
  }
  
  .hero-logo-combined{
    position:relative;
    z-index:1;
  }
  .hero-section-mobile{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .hero-logo{
    height:120px;
    width:auto;
    display:block;
    margin:0 auto;
  }
  
  .character-types-image-wrapper{
    max-width:800px;
    width:100%;
    margin:24px auto;
    position:relative;
  }
  .character-types-image{
    width:100%;
    height:auto;
    display:block;
    position:relative;
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    background:var(--bg-card);
    box-shadow:var(--shadow);
    z-index:1;
  }
  
  @media (prefers-color-scheme: dark){
    .character-types-image{
      box-shadow:var(--shadow-strong);
      border-color:var(--accent-gold-soft);
      background:var(--bg-card);
    }
  }
  
  /* Decorative border using SVG pattern */
  .character-types-image::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:var(--r2);
    padding:2px;
    background:
      url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><style>.border-path{fill:none;stroke:%23b8860b;stroke-width:0.8;opacity:0.6;}.corner-ornament{fill:%23b8860b;opacity:0.4;}</style></defs><rect x="5" y="5" width="90" height="90" class="border-path" rx="2"/><path d="M 5 5 Q 5 8 8 8 Q 8 5 5 5" class="corner-ornament"/><path d="M 8 8 Q 8 12 12 12 Q 12 8 8 8" class="corner-ornament" opacity="0.3"/><path d="M 95 5 Q 92 5 92 8 Q 95 8 95 5" class="corner-ornament"/><path d="M 92 8 Q 88 8 88 12 Q 92 12 92 8" class="corner-ornament" opacity="0.3"/><path d="M 5 95 Q 5 92 8 92 Q 8 95 5 95" class="corner-ornament"/><path d="M 8 92 Q 8 88 12 88 Q 12 92 8 92" class="corner-ornament" opacity="0.3"/><path d="M 95 95 Q 92 95 92 92 Q 95 92 95 95" class="corner-ornament"/><path d="M 92 92 Q 88 92 88 88 Q 92 88 92 92" class="corner-ornament" opacity="0.3"/><circle cx="25" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="50" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="75" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="25" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="50" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="75" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="25" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="50" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="75" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="25" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="50" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="75" r="1.5" class="corner-ornament" opacity="0.2"/></svg>')
      repeat;
    background-size:40px 40px;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:0;
  }
  
  @media (min-width: 640px){
    .hero-logo-wrapper{
      display:block;
    }
    .hero-section-mobile{
      display:none;
    }
  }
  
  /* Lineages accordion styling */
  .lineages-controls{
    display:flex;
    gap:12px;
    margin:20px 0;
    padding:16px;
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:var(--r);
    align-items:center;
    flex-wrap:wrap;
  }
  
  .level-scaling-select{
    padding:8px 12px;
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    background:var(--bg-card);
    color:var(--text-primary);
    font-family:var(--sans);
    font-size:0.9em;
    cursor:pointer;
    transition:all 0.2s ease;
  }
  
  .level-scaling-select:hover{
    background:var(--bg-page);
    border-color:var(--accent-gold);
  }
  
  .level-scaling-select:focus{
    outline:none;
    border-color:var(--brand-focus);
    box-shadow:0 0 0 3px rgba(124,58,237,.1);
  }
  .lineage-control-btn{
    padding:8px 16px;
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    background:var(--bg-card);
    color:var(--text-primary);
    font-weight:500;
    font-size:0.9em;
    cursor:pointer;
    transition:all 0.2s ease;
    font-family:var(--sans);
  }
  .lineage-control-btn:hover{
    background:var(--bg-page);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
  .lineages-container{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:24px 0;
  }
  .lineage-item{
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--bg-card);
    overflow:hidden;
    transition:box-shadow 0.2s ease;
  }
  .lineage-item:hover{
    box-shadow:0 2px 8px rgba(0,0,0,.1);
  }
  .lineage-header{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    background:var(--bg-card);
    border:none;
    text-align:left;
    cursor:pointer;
    font-family:var(--sans);
    font-size:1.1rem;
    font-weight:600;
    color:var(--brand-primary);
    transition:background 0.2s ease;
  }
  .lineage-header:hover{
    background:var(--bg-page);
  }
  .lineage-header:focus{
    outline:2px solid var(--brand-focus);
    outline-offset:-2px;
  }
  .lineage-title{
    flex:1;
  }
  .lineage-toggle-icon{
    font-size:0.8em;
    transition:transform 0.2s ease;
    color:var(--text-secondary);
  }
  .lineage-content{
    display:none;
    padding:0 20px 20px 20px;
    border-top:1px solid var(--line);
    margin-top:0;
    animation:slideDown 0.3s ease;
  }
  .lineage-content.expanded{
    display:block;
  }
  .lineage-content p{
    margin:12px 0;
    line-height:1.6;
  }
  .lineage-content p:first-child{
    margin-top:20px;
  }
  .lineage-content strong{
    color:var(--brand-primary);
  }
  
  @keyframes slideDown{
    from{
      opacity:0;
      transform:translateY(-10px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
  
  @media (prefers-color-scheme: dark){
    .lineage-control-btn{
      background:rgba(255,255,255,.04);
    }
    .lineage-control-btn:hover{
      background:rgba(255,255,255,.07);
    }
    .lineage-header:hover{
      background:rgba(255,255,255,.02);
    }
  }
  h2{
    font-size:1.25rem;
    line-height:1.25;
    margin:20px 0 10px;
    color:var(--brand-primary);
    scroll-margin-top:80px;
  }
  h3{
    font-size:1.06rem;
    line-height:1.3;
    margin:16px 0 8px;
    color:var(--brand-primary);
    scroll-margin-top:80px;
  }
  h4{
    font-size:1rem;
    line-height:1.3;
    margin:0;
    color:var(--brand-primary);
  }
  
  @media (prefers-color-scheme: dark){
    h1{
      background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    h1,h2,h3,h4{color:var(--accent-gold)}
  }
  p{margin:0 0 10px;color:var(--text-primary)}
  p.lede{font-size:1.05rem;color:var(--text-secondary)}
  
  /* Text colors automatically handled by foundation schema */
  /* Light backgrounds use --text-primary (dark), dark backgrounds use --text-primary (light) */
  hr{border:0;border-top:1px solid var(--line);margin:18px 0}
  small,.small{font-size:.95rem;color:var(--muted)}
  kbd{
    font-family:var(--mono);
    font-size:.9em;
    border:1px solid var(--line);
    background:#fff;
    border-bottom-color:#d9d9de;
    border-radius:8px;
    padding:2px 6px;
  }
  
  /* Lists */
  ul,ol{margin:0 0 10px 22px;padding:0}
  li{margin:0 0 6px}
  
  /* Inline code & blocks */
  code.dice,code{
    font-family:var(--mono);
    font-size:.95em;
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:8px;
    padding:1px 6px;
    color:var(--text-primary);
  }
  pre,pre.formula{
    font-family:var(--mono);
    font-size:.95rem;
    border:1px solid var(--line);
    background:var(--bg-card);
    border-radius:var(--r);
    padding:12px 14px;
    overflow:auto;
    margin:0 0 12px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
    color:var(--text-primary);
  }
  
  @media (prefers-color-scheme: dark){
    code,pre{
      background:rgba(255,255,255,.03);
    }
  }
  pre code{border:0;background:transparent;padding:0}
  
  /* Moments indicator - visual representation of 3 Moments per turn */
  .moments-indicator{
    margin:24px 0 32px;
    padding:20px;
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,248,244,.9));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    box-shadow:0 2px 8px rgba(184,134,11,.12), 0 4px 16px rgba(44,82,130,.08);
  }
  
  .moments-label{
    text-align:center;
    font-size:1rem;
    font-weight:600;
    color:var(--fantasy-blue);
    margin-bottom:12px;
    letter-spacing:.03em;
  }
  
  .moments-bar{
    display:flex;
    gap:8px;
    margin:16px 0;
    justify-content:center;
    align-items:stretch;
  }
  
  .moment-segment{
    flex:1;
    max-width:140px;
    min-height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, var(--fantasy-blue), var(--fantasy-burgundy));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    box-shadow:0 2px 6px rgba(44,82,130,.2), inset 0 1px 0 rgba(255,255,255,.2);
    position:relative;
    transition:all .3s ease;
    cursor:default;
  }
  
  .moment-segment::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:linear-gradient(135deg, rgba(255,255,255,.1), transparent);
    border-radius:var(--r);
    pointer-events:none;
  }
  
  .moment-segment:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(44,82,130,.3), inset 0 1px 0 rgba(255,255,255,.3);
    border-color:var(--fantasy-gold-light);
  }
  
  .moment-number{
    font-size:2rem;
    font-weight:700;
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,.3);
    line-height:1;
    margin-bottom:4px;
  }
  
  .moment-label{
    font-size:.75rem;
    color:rgba(255,255,255,.95);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:500;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
  }
  
  .moments-hint{
    text-align:center;
    font-size:.9rem;
    color:var(--muted);
    margin-top:12px;
    font-style:italic;
  }
  
  /* Turn examples with used Moments */
  .turn-example{
    margin:24px 0;
    padding:16px 20px;
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,244,.95));
    border:2px solid var(--line);
    border-radius:var(--r2);
    box-shadow:0 2px 6px rgba(44,35,22,.08);
  }
  
  .example-label{
    font-weight:600;
    color:var(--fantasy-blue);
    margin-bottom:12px;
    font-size:1rem;
  }
  
  .example-bar{
    margin:12px 0;
  }
  
  .moment-segment.used{
    background:linear-gradient(135deg, var(--fantasy-green), var(--fantasy-green-light));
    border-color:var(--fantasy-gold);
    opacity:1;
  }
  
  .moment-segment.used.multi{
    background:linear-gradient(135deg, var(--fantasy-burgundy), var(--fantasy-burgundy-light));
  }
  
  /* Attack states - showing stacking Disadvantage progression */
  .moment-segment.attack-normal{
    background:linear-gradient(135deg, var(--fantasy-green), var(--fantasy-green-light));
    border-color:var(--fantasy-gold);
  }
  
  .moment-segment.attack-disadvantage{
    background:linear-gradient(135deg, #d4a574, #e6b886);
    border-color:#b8860b;
  }
  
  .moment-segment.attack-double-disadvantage{
    background:linear-gradient(135deg, #c97a5a, #d98a6a);
    border-color:#a85555;
  }
  
  .moment-segment.multi-start{
    border-right:1px solid var(--fantasy-gold);
    border-radius:var(--r) 0 0 var(--r);
  }
  
  .moment-segment.multi-end{
    border-left:1px solid var(--fantasy-gold);
    border-radius:0 var(--r) var(--r) 0;
  }
  
  .moment-segment.multi-start + .moment-segment.multi-end{
    margin-left:-2px;
  }
  
  .moment-segment.empty{
    background:transparent;
    border:2px dashed var(--line);
    opacity:.4;
    cursor:default;
  }
  
  .moment-segment.empty:hover{
    transform:none;
    box-shadow:none;
  }
  
  .moment-segment.empty .moment-number,
  .moment-segment.empty .moment-label{
    opacity:.3;
  }
  
  .example-description{
    margin-top:12px;
    font-size:.9rem;
    color:var(--muted);
    font-style:italic;
    padding-left:4px;
  }
  
  @media (max-width:640px){
    .moments-bar{
      flex-direction:column;
      gap:6px;
    }
    
    .moment-segment{
      max-width:100%;
      min-height:60px;
    }
    
    .moment-number{
      font-size:1.5rem;
    }
    
    .turn-example{
      padding:12px 16px;
    }
  }
  
  /* Formula box - centered, styled mathematical expressions */
  .formula-box{
    display:block;
    text-align:center;
    margin:16px auto;
    padding:16px 20px;
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,244,.95));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    box-shadow:0 2px 8px rgba(184,134,11,.15);
    font-family:var(--serif);
    font-size:1.1rem;
    line-height:1.6;
    color:var(--fantasy-blue);
    max-width:500px;
  }
  
  .formula-box .formula-label{
    display:block;
    font-size:.9rem;
    color:var(--muted);
    margin-bottom:8px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  
  .formula-box .formula-equation{
    display:block;
    font-size:1.3rem;
    font-weight:600;
    color:var(--fantasy-blue);
    margin:8px 0;
  }
  
  .formula-box .formula-equation .variable{
    font-style:italic;
    color:var(--fantasy-burgundy);
  }
  
  .formula-box .formula-equation .operator{
    color:var(--fantasy-gold);
    margin:0 4px;
  }
  
  /* Tables */
  .table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:#fff;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
    margin:0 0 14px;
  }
  table{border-collapse:separate;border-spacing:0;width:100%;font-size:.98rem}
  thead th{
    position:sticky;top:0; /* helpt bij lange tabellen */
    background:linear-gradient(180deg,#fff,var(--soft));
    border-bottom:1px solid var(--line);
    font-weight:700;
  }
  th,td{
    text-align:left;
    vertical-align:top;
    padding:10px 12px;
    border-bottom:1px solid #f0f0f2;
  }
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover td{background:rgba(246,247,249,.7)}
  
  /* Buttons */
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:100}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:2px solid var(--fantasy-gold);
    border-radius:999px;
    padding:10px 16px;
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,248,244,.9));
    text-decoration:none;
    color:var(--fantasy-blue);
    font-weight:500;
    box-shadow:0 2px 4px rgba(184,134,11,.15);
    transition:all 0.2s ease;
  }
  .btn:hover{
    background:linear-gradient(135deg, rgba(184,134,11,.1), rgba(212,175,55,.05));
    border-color:var(--fantasy-gold-light);
    box-shadow:0 4px 8px rgba(184,134,11,.25);
    transform:translateY(-1px);
  }
  .btn:active{transform:translateY(0)}

  /* Button with dropdown */
  .btn-dropdown{
    position:relative;
    display:inline-block;
  }

  /* Add padding below button to create hover bridge */
  .btn-dropdown::after{
    content:'';
    position:absolute;
    bottom:-6px;
    left:0;
    right:0;
    height:6px;
    background:transparent;
  }

  .btn-dropdown-menu{
    display:none;
    position:absolute;
    top:calc(100% + 2px);
    left:0;
    min-width:220px;
    max-height:400px;
    overflow-y:auto;
    background:var(--bg-card);
    border:2px solid var(--fantasy-gold);
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    z-index:9999;
    padding:8px 0;
  }

  .btn-dropdown:hover .btn-dropdown-menu,
  .btn-dropdown-menu:hover{
    display:block;
  }

  .btn-dropdown-menu a{
    display:block;
    padding:8px 16px;
    color:var(--text-primary);
    text-decoration:none;
    font-size:0.9em;
    transition:background 0.2s ease;
  }

  .btn-dropdown-menu a:hover{
    background:rgba(212,175,55,.1);
    color:var(--brand-primary);
  }

  @media (prefers-color-scheme: dark){
    .btn-dropdown-menu{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
      box-shadow:0 4px 16px rgba(0,0,0,.3);
    }

    .btn-dropdown-menu a{
      color:var(--text-primary);
    }

    .btn-dropdown-menu a:hover{
      background:rgba(212,175,55,.15);
      color:var(--accent-gold);
    }
  }

  /* Callouts */
  .callout{
    border:2px solid var(--line);
    border-radius:var(--r2);
    padding:14px 16px;
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,244,.95));
    box-shadow:var(--shadow);
    margin:0 0 14px;
    position:relative;
  }
  
  .callout::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background:var(--fantasy-gold);
    border-radius:var(--r2) 0 0 var(--r2);
  }
  .callout-title{font-weight:800;margin:0 0 6px;letter-spacing:-.01em}
  .callout.note{border-color:var(--note-b);background:var(--note-bg)}
  .callout.example{border-color:var(--ex-b);background:var(--ex-bg)}
  .callout.warning{border-color:var(--warn-b);background:var(--warn-bg)}
  .callout p{margin:0 0 8px}
  .callout p:last-child{margin:0}
  
  /* Feature highlight callout - special styling */
  .callout.feature{
    border:3px solid var(--accent-gold-soft);
    background:linear-gradient(135deg, rgba(242,210,124,.3), rgba(212,175,55,.2));
    box-shadow:0 4px 16px rgba(184,134,11,.2),0 8px 32px rgba(44,35,22,.15);
    padding:20px 24px;
    margin:24px 0;
    color:var(--text-primary);
  }
  
  @media (prefers-color-scheme: dark){
    .callout.feature{
      background:linear-gradient(135deg, rgba(212,175,55,.12), rgba(244,208,63,.08));
      border-color:var(--accent-gold);
      box-shadow:0 4px 16px rgba(212,175,55,.3),0 8px 32px rgba(0,0,0,.4);
    }
  }
  
  .callout.feature::before{
    width:6px;
    background:linear-gradient(180deg, var(--fantasy-gold), var(--fantasy-gold-light));
  }
  
  .callout.feature .callout-title{
    color:var(--brand-primary);
    font-size:1.1rem;
    margin-bottom:12px;
  }
  
  .callout.feature h3{
    color:var(--brand-primary);
    font-size:1rem;
    margin-top:16px;
    margin-bottom:8px;
    font-weight:700;
  }
  
  @media (prefers-color-scheme: dark){
    .callout.feature .callout-title,
    .callout.feature h3{
      color:var(--accent-gold);
    }
  }
  
  .callout.feature ul{
    margin:8px 0 8px 20px;
    list-style:none;
    padding-left:0;
  }
  
  .callout.feature ul li{
    position:relative;
    padding-left:20px;
    margin-bottom:6px;
    color:var(--text-primary);
  }
  
  .callout.feature ul li::before{
    content:'✦';
    position:absolute;
    left:0;
    color:var(--fantasy-gold);
    font-weight:bold;
  }
  
  .callout.feature .summary{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(184,134,11,.2);
    font-style:italic;
    color:var(--text-secondary);
  }
  
  /* Rules layout + TOC */
  .layout{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:1164px){
    .layout{grid-template-columns:240px 1fr;gap:18px}
    .toc{position:sticky;top:86px;align-self:start}
  }
  .toc{
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    padding:14px 14px;
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,248,244,.9));
    box-shadow:var(--shadow);
  }
  .toc h2{margin:0 0 10px;font-size:1rem;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}
  .toc ul{margin:0 0 0 18px}
  .toc li{margin:0 0 6px}
  .toc a{color:var(--muted);text-decoration:none}
  .toc a:hover{color:var(--fg);text-decoration:underline}
  .toc-h3{margin-left:10px}
  
  /* Content "card" with fantasy decorative border */
  .content{
    position:relative;
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    background:var(--bg-card);
    padding:24px;
    box-shadow:var(--shadow);
    margin:0 0 24px;
    color:var(--text-primary);
  }
  
  @media (prefers-color-scheme: dark){
    .content{
      box-shadow:var(--shadow-strong);
      border-color:var(--accent-gold-soft);
      background:var(--bg-card);
      color:var(--text-primary);
    }
    /* TOC sidebar: dark background, light text */
    .toc{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }
    .toc h2{
      color:var(--text-secondary);
    }
    .toc a{
      color:var(--text-secondary);
    }
    .toc a:hover{
      color:var(--text-primary);
    }
    /* Moments indicator card */
    .moments-indicator{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }
    .moments-label{
      color:var(--brand-primary);
    }
    .moments-hint{
      color:var(--text-secondary);
    }
    /* Turn example cards */
    .turn-example{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }
    .example-label{
      color:var(--brand-primary);
    }
    .example-description{
      color:var(--text-secondary);
    }
    /* Moment segment buttons: darker backgrounds so white text has contrast */
    .moment-segment{
      background:linear-gradient(135deg, rgba(74,58,140,.95), rgba(88,28,135,.95));
      border-color:var(--accent-gold-soft);
      box-shadow:0 2px 6px rgba(0,0,0,.4);
    }
    .moment-segment.used{
      background:linear-gradient(135deg, rgba(55,48,90,.95), rgba(70,55,120,.95));
      border-color:var(--accent-gold-soft);
    }
    .moment-segment.used.multi{
      background:linear-gradient(135deg, rgba(80,45,100,.95), rgba(100,60,130,.95));
    }
    .moment-segment.attack-normal{
      background:linear-gradient(135deg, rgba(55,48,90,.95), rgba(70,55,120,.95));
      border-color:var(--accent-gold-soft);
    }
    .moment-segment.attack-disadvantage{
      background:linear-gradient(135deg, rgba(100,70,50,.95), rgba(120,85,60,.95));
      border-color:var(--accent-gold-soft);
    }
    .moment-segment.attack-double-disadvantage{
      background:linear-gradient(135deg, rgba(100,55,50,.95), rgba(120,65,60,.95));
      border-color:var(--accent-gold-soft);
    }
    /* Formula box */
    .formula-box{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
      color:var(--text-primary);
    }
    .formula-box .formula-label{
      color:var(--text-secondary);
    }
    .formula-box .formula-equation,
    .formula-box .formula-equation .variable{
      color:var(--brand-primary);
    }
    .formula-box .formula-equation .operator{
      color:var(--accent-gold-soft);
    }
    /* General callouts (note, example, warning keep distinct tint but dark) */
    .callout{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }
    .callout.note{
      background:rgba(100,80,140,.25);
      border-color:var(--brand-secondary);
    }
    .callout.example{
      background:rgba(120,100,60,.2);
      border-color:var(--accent-gold-soft);
    }
    .callout.warning{
      background:rgba(120,60,60,.2);
      border-color:#c97a5a;
    }
    .callout p,
    .callout .callout-title{
      color:var(--text-primary);
    }
  }
  
  /* Decorative border using SVG pattern */
  .content::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius:var(--r2);
    padding:2px;
    background:
      url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><style>.border-path{fill:none;stroke:%23b8860b;stroke-width:0.8;opacity:0.6;}.corner-ornament{fill:%23b8860b;opacity:0.4;}</style></defs><rect x="5" y="5" width="90" height="90" class="border-path" rx="2"/><path d="M 5 5 Q 5 8 8 8 Q 8 5 5 5" class="corner-ornament"/><path d="M 8 8 Q 8 12 12 12 Q 12 8 8 8" class="corner-ornament" opacity="0.3"/><path d="M 95 5 Q 92 5 92 8 Q 95 8 95 5" class="corner-ornament"/><path d="M 92 8 Q 88 8 88 12 Q 92 12 92 8" class="corner-ornament" opacity="0.3"/><path d="M 5 95 Q 5 92 8 92 Q 8 95 5 95" class="corner-ornament"/><path d="M 8 92 Q 8 88 12 88 Q 12 92 8 92" class="corner-ornament" opacity="0.3"/><path d="M 95 95 Q 92 95 92 92 Q 95 92 95 95" class="corner-ornament"/><path d="M 92 92 Q 88 92 88 88 Q 92 88 92 92" class="corner-ornament" opacity="0.3"/><circle cx="25" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="50" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="75" cy="5" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="25" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="50" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="75" cy="95" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="25" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="50" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="5" cy="75" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="25" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="50" r="1.5" class="corner-ornament" opacity="0.2"/><circle cx="95" cy="75" r="1.5" class="corner-ornament" opacity="0.2"/></svg>')
      repeat;
    background-size:40px 40px;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:0;
  }
  
  .content > *{
    position:relative;
    z-index:1;
  }

  /* Override for btnrow to ensure dropdowns appear above other content */
  .content > .btnrow{
    z-index:100;
  }

  /* Override for print-controls to ensure filter dropdowns appear above other content */
  .content > .print-controls{
    z-index:100;
  }

  /* Enhanced card hover effect */
  .content:hover{
    border-color:var(--fantasy-gold-light);
    box-shadow:0 4px 16px rgba(184,134,11,.2),0 12px 40px rgba(44,35,22,.25);
    transform:translateY(-2px);
    transition:all 0.3s ease;
  }
  
  /* Spell Cards */
  .spells-container{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:16px;
    margin:20px 0;
  }
  
  .spell-level-section{
    margin:32px 0;
  }
  
  .spell-level-section h3{
    border-bottom:2px solid var(--fantasy-gold);
    padding-bottom:8px;
    margin-bottom:16px;
  }
  
  .spell-card{
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,244,.95));
    padding:16px;
    box-shadow:var(--shadow);
    position:relative;
    break-inside:avoid;
    color:var(--text-primary);
  }
  
  .spell-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:12px;
    gap:12px;
    padding-right:32px;
  }
  
  .spell-card-name{
    font-size:1.1rem;
    font-weight:700;
    color:var(--fantasy-blue);
    margin:0;
    flex:1;
  }
  
  .spell-card-level{
    font-size:.9rem;
    color:var(--fantasy-burgundy);
    font-weight:600;
    white-space:nowrap;
  }
  
  .spell-card-meta{
    display:flex;
    gap:12px;
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:12px;
    flex-wrap:wrap;
  }
  
  .spell-card-meta span{
    display:flex;
    align-items:center;
    gap:4px;
  }
  
  .spell-card-description{
    font-size:.95rem;
    line-height:1.5;
    color:var(--fg);
    background:linear-gradient(135deg, rgba(245,241,234,.95), rgba(240,236,228,.9));
    border:1px solid rgba(184,134,11,.15);
    border-radius:var(--r);
    padding:14px 16px;
    margin-top:8px;
    box-shadow:inset 0 1px 2px rgba(44,35,22,.05);
  }
  
  .spell-card-description p{
    color:var(--fg);
  }
  
  .spell-card-description p{
    margin:0 0 8px;
  }
  
  .spell-card-description p:last-child{
    margin:0;
  }
  
  .spell-card-checkbox{
    position:absolute;
    top:12px;
    right:12px;
    width:20px;
    height:20px;
    cursor:pointer;
    accent-color:var(--fantasy-gold);
  }
  
  .spell-card:has(.spell-card-checkbox:checked){
    border-color:var(--fantasy-gold-light);
    box-shadow:0 4px 12px rgba(184,134,11,.3);
  }
  
  .print-controls{
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,248,244,.9));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    padding:16px;
    margin:20px 0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  .print-controls .control-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
  }
  
  .print-controls .search-row{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .search-label{
    font-weight:600;
    color:var(--text-primary);
    white-space:nowrap;
    min-width:fit-content;
  }
  .spell-search-input{
    flex:1;
    min-width:0;
    max-width:400px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:var(--r);
    font-size:1rem;
    font-family:var(--sans);
    background:var(--bg-card);
    color:var(--text-primary);
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .spell-search-input:focus{
    outline:none;
    border-color:var(--brand-focus);
    box-shadow:0 0 0 3px rgba(124,58,237,.1);
  }
  .spell-search-input::placeholder{
    color:var(--text-secondary);
  }
  .toggle-filters-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,248,244,.9));
    color:var(--fantasy-blue);
    font-weight:500;
    font-size:0.9em;
    cursor:pointer;
    transition:all 0.2s ease;
    white-space:nowrap;
    font-family:var(--sans);
  }
  .toggle-filters-btn:hover{
    background:linear-gradient(135deg, rgba(255,255,255,1), rgba(250,248,244,.95));
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
  .toggle-filters-icon{
    font-size:0.8em;
    transition:transform 0.2s ease;
  }
  .toggle-filters-text{
    display:inline-block;
  }
  .filters-container{
    overflow:visible;
    transition:max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
    max-height:1000px;
    opacity:1;
  }
  .filters-container.filters-hidden{
    max-height:0;
    opacity:0;
    margin-bottom:0;
    padding-top:0;
  }
  
  @media (prefers-color-scheme: dark){
    .spell-search-input{
      background:var(--bg-card);
      color:var(--text-primary);
    }
    .spell-search-input:focus{
      box-shadow:0 0 0 3px rgba(185,131,255,.2);
    }
    .print-controls .toggle-filters-btn{
      background:var(--bg-card) !important;
      border-color:var(--accent-gold-soft);
      color:var(--text-primary) !important;
    }
    .print-controls .toggle-filters-btn .toggle-filters-icon{
      color:var(--text-primary);
    }
    .print-controls .toggle-filters-btn:hover{
      background:var(--bg-page) !important;
      box-shadow:0 0 0 2px var(--accent-gold-soft);
      color:var(--text-primary) !important;
    }
    .print-controls .toggle-filters-btn:hover .toggle-filters-icon{
      color:var(--text-primary);
    }
    /* Spell cards: dark background so light text is readable */
    .spell-card{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
      color:var(--text-primary);
    }
    .spell-card-name{
      color:var(--brand-primary);
    }
    .spell-card-level{
      color:var(--accent-gold-soft);
    }
    .spell-card-meta{
      color:var(--text-secondary);
    }
    .spell-card-meta span{
      color:var(--text-secondary);
    }
    .spell-card-description{
      background:rgba(0,0,0,.25);
      border-color:rgba(201,162,39,.3);
      color:var(--text-primary);
    }
    .spell-card-description p{
      color:var(--text-primary);
    }
    /* Print controls & filter area in dark mode – override base rules that come later */
    .print-controls{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }
    .print-controls .filter-label{
      color:var(--text-primary);
    }
    .print-controls button{
      background:var(--bg-page) !important;
      border-color:var(--accent-gold-soft) !important;
      color:var(--text-primary) !important;
    }
    .print-controls button:hover{
      background:rgba(201,162,39,.15) !important;
      border-color:var(--accent-gold-soft) !important;
      color:var(--text-primary) !important;
    }
    .print-controls .filter-btn.active{
      background:rgba(201,162,39,.25) !important;
      border-color:var(--accent-gold-soft) !important;
      color:var(--accent-gold-soft) !important;
    }
    .print-controls .filter-btn.active:hover{
      background:rgba(201,162,39,.35) !important;
      color:var(--accent-gold-soft) !important;
    }
  }
  
  @media (max-width: 600px){
    .print-controls .search-row{
      flex-wrap:wrap;
      gap:8px;
    }
    .search-label{
      width:100%;
      margin-bottom:0;
    }
    .spell-search-input{
      max-width:100%;
      flex:1 1 auto;
      min-width:200px;
    }
    .toggle-filters-btn{
      flex:0 0 auto;
    }
    .toggle-filters-text{
      display:none;
    }
    .search-row .toggle-filters-btn:last-of-type{
      margin-left:auto;
    }
  }
  
  .print-controls .filter-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    padding-top:8px;
    border-top:1px solid var(--line);
  }
  
  .filters-container{
    border-top:1px solid var(--line);
    padding-top:8px;
  }
  
  .filters-container .filter-row{
    border-top:none;
    padding-top:8px;
  }
  
  .filters-container .filter-row:first-of-type{
    padding-top:0;
  }
  
  .filters-container .control-row:first-of-type{
    padding-top:0;
  }
  
  .filters-container.filters-hidden{
    border-top:none;
    padding-top:0;
  }
  
  .print-controls .filter-label{
    font-weight:500;
    color:var(--fantasy-blue);
    margin-right:4px;
  }
  
  .print-controls button{
    padding:8px 14px;
    border:2px solid var(--fantasy-gold);
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,248,244,.9));
    color:var(--fantasy-blue);
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
    font-size:0.9em;
  }
  
  .print-controls button:hover{
    background:linear-gradient(135deg, rgba(184,134,11,.1), rgba(212,175,55,.05));
    border-color:var(--fantasy-gold-light);
  }
  
  .print-controls .filter-btn.active{
    background:linear-gradient(135deg, rgba(184,134,11,.15), rgba(212,175,55,.1));
    border-color:var(--fantasy-gold);
    color:var(--fantasy-burgundy);
    font-weight:600;
  }
  
  .print-controls .filter-btn.active:hover{
    background:linear-gradient(135deg, rgba(184,134,11,.2), rgba(212,175,55,.15));
  }
  
  /* Toggle switch for 5e descriptions */
  .toggle-switch{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    user-select:none;
  }
  
  .toggle-switch input[type="checkbox"]{
    display:none;
  }
  
  .toggle-slider{
    position:relative;
    width:48px;
    height:24px;
    background:var(--line);
    border-radius:24px;
    transition:background .3s ease;
  }
  
  .toggle-slider::before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    background:#fff;
    border-radius:50%;
    top:3px;
    left:3px;
    transition:transform .3s ease;
    box-shadow:0 2px 4px rgba(0,0,0,.2);
  }
  
  .toggle-switch input[type="checkbox"]:checked + .toggle-slider{
    background:var(--fantasy-gold);
  }
  
  .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before{
    transform:translateX(24px);
  }
  
  .toggle-label{
    font-weight:500;
    color:var(--fantasy-blue);
    font-size:.95rem;
  }
  
  /* Character Converter Styles */
  .converter-form{
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,244,.95));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    padding:24px;
    margin:24px 0;
    box-shadow:var(--shadow);
  }
  
  .converter-tabs{
    display:flex;
    gap:8px;
    margin-bottom:20px;
    border-bottom:2px solid var(--fantasy-gold);
  }
  
  .tab-btn{
    padding:10px 20px;
    background:transparent;
    border:none;
    border-bottom:3px solid transparent;
    color:var(--muted);
    font-size:1rem;
    cursor:pointer;
    transition:all .2s ease;
  }
  
  .tab-btn:hover{
    color:var(--fantasy-blue);
  }
  
  .tab-btn.active{
    color:var(--fantasy-blue);
    border-bottom-color:var(--fantasy-gold);
    font-weight:600;
  }
  
  .gear-tabs{
    display:flex;
    gap:8px;
    margin-bottom:20px;
    border-bottom:2px solid var(--fantasy-gold);
  }
  
  .tab-content{
    display:none;
  }
  
  .tab-content.active{
    display:block;
  }
  
  .ability-inputs{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-top:8px;
  }
  
  .ability-inputs > div{
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .ability-inputs label{
    min-width:40px;
    font-weight:600;
    color:var(--fantasy-blue);
  }
  
  .ability-inputs input{
    flex:1;
    padding:8px;
    border:2px solid var(--line);
    border-radius:var(--r);
    font-size:1rem;
  }
  
  .ability-inputs input:focus{
    outline:none;
    border-color:var(--fantasy-gold);
  }
  
  .form-group{
    margin-bottom:20px;
  }
  
  .form-group label{
    display:block;
    font-weight:600;
    color:var(--fantasy-blue);
    margin-bottom:8px;
    font-size:1rem;
  }
  
  .form-group input[type="url"]{
    width:100%;
    padding:12px 16px;
    border:2px solid var(--line);
    border-radius:var(--r);
    background:#fff;
    font-size:1rem;
    color:var(--fg);
    transition:border-color .2s ease;
  }
  
  .form-group input[type="url"]:focus{
    outline:none;
    border-color:var(--fantasy-gold);
    box-shadow:0 0 0 3px rgba(184,134,11,.1);
  }
  
  .form-hint{
    display:block;
    margin-top:6px;
    font-size:.85rem;
    color:var(--muted);
    font-style:italic;
  }
  
  .loading, .error{
    padding:16px;
    border-radius:var(--r);
    margin:16px 0;
    text-align:center;
  }
  
  .loading{
    background:linear-gradient(135deg, rgba(44,82,130,.1), rgba(124,45,45,.05));
    color:var(--fantasy-blue);
  }
  
  .error{
    background:linear-gradient(135deg, rgba(232,168,168,.2), rgba(248,232,232,.1));
    border:2px solid var(--warn-b);
    color:var(--fantasy-burgundy);
  }
  
  /* Character Sheet Styles */
  .character-sheet{
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,248,244,.95));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r2);
    padding:24px;
    margin:24px 0;
    box-shadow:var(--shadow-strong);
  }
  
  .character-sheet-header{
    text-align:center;
    padding-bottom:20px;
    border-bottom:2px solid var(--fantasy-gold);
    margin-bottom:24px;
  }
  
  .character-sheet-header h2{
    font-size:2rem;
    color:var(--fantasy-blue);
    margin:0 0 12px;
  }
  
  .character-basics{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
    font-size:.95rem;
    color:var(--muted);
  }
  
  .character-basics span{
    padding:4px 12px;
    background:linear-gradient(135deg, rgba(184,134,11,.1), rgba(212,175,55,.05));
    border-radius:999px;
    border:1px solid rgba(184,134,11,.2);
  }
  
  .character-sheet-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    margin-top:24px;
  }
  
  .abilities-section{
    grid-column:1;
  }
  
  .combat-section{
    grid-column:2;
  }
  
  .character-section{
    background:linear-gradient(135deg, rgba(245,241,234,.95), rgba(240,236,228,.9));
    border:1px solid rgba(184,134,11,.15);
    border-radius:var(--r);
    padding:16px;
    box-shadow:inset 0 1px 2px rgba(44,35,22,.05);
  }
  
  .character-section h3{
    margin:0 0 12px;
    font-size:1.1rem;
    color:var(--fantasy-burgundy);
    border-bottom:2px solid var(--fantasy-gold);
    padding-bottom:8px;
  }
  
  .ability-scores{
    display:flex;
    flex-direction:row;
    gap:16px;
    justify-content:center;
    flex-wrap:nowrap;
  }
  
  .ability-score{
    text-align:center;
    padding:16px;
    background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(250,248,244,.8));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    box-shadow:0 2px 4px rgba(184,134,11,.1);
    flex:1;
    min-width:0;
  }
  
  .ability-name{
    font-size:0.85rem;
    font-weight:700;
    color:var(--fantasy-blue);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  
  .ability-modifier{
    font-size:2.5rem;
    font-weight:700;
    color:var(--fantasy-burgundy);
    margin:8px 0;
    line-height:1;
  }
  
  .ability-label{
    font-size:.8rem;
    color:var(--muted);
    font-style:italic;
    margin-top:4px;
  }
  
  .combat-stats{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:16px;
  }
  
  .hp-display,
  .defense-display{
    text-align:center;
    padding:16px;
    background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(250,248,244,.8));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    box-shadow:0 2px 4px rgba(184,134,11,.1);
  }
  
  .hp-name{
    font-size:0.85rem;
    font-weight:700;
    color:var(--fantasy-blue);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  
  .hp-value{
    font-size:2.5rem;
    font-weight:700;
    color:var(--fantasy-burgundy);
    margin:8px 0;
    line-height:1;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    padding-left:8px;
  }
  
  .hp-number{
    display:inline-block;
  }
  
  .hp-slash{
    display:inline-block;
    color:var(--muted);
    font-weight:400;
  }
  
  .defense-display{
    text-align:center;
    padding:16px;
    background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(250,248,244,.8));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    box-shadow:0 2px 4px rgba(184,134,11,.1);
  }
  
  .defense-name{
    font-size:0.85rem;
    font-weight:700;
    color:var(--fantasy-blue);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  
  .defense-value{
    font-size:2.5rem;
    font-weight:700;
    color:var(--fantasy-burgundy);
    margin:8px 0;
    line-height:1;
  }
  
  .hp-labels{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:8px;
  }
  
  .hp-label-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.8rem;
    color:var(--muted);
  }
  
  .hp-label-text{
    font-style:italic;
  }
  
  .hp-label-value{
    font-weight:600;
    color:var(--fantasy-burgundy);
  }
  
  .proficiency-bonus{
    text-align:center;
    padding:12px;
    background:linear-gradient(135deg, rgba(44,82,130,.1), rgba(66,153,225,.05));
    border-radius:var(--r);
    color:var(--fantasy-blue);
    font-size:1.1rem;
  }
  
  .skills-list, .weapons-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  
  .skills-list li, .weapon-item{
    padding:8px 12px;
    margin-bottom:8px;
    background:rgba(255,255,255,.7);
    border-left:3px solid var(--fantasy-gold);
    border-radius:4px;
  }
  
  .weapon-item{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  
  .weapon-item strong{
    color:var(--fantasy-blue);
    font-size:1rem;
  }
  
  .weapon-attack, .weapon-damage{
    font-size:.85rem;
    color:var(--muted);
  }
  
  .no-skills, .no-weapons{
    color:var(--muted);
    font-style:italic;
    text-align:center;
    padding:16px;
  }
  
  .conversion-notes{
    margin-top:32px;
    padding:20px;
    background:linear-gradient(135deg, rgba(184,134,11,.08), rgba(212,175,55,.05));
    border:2px solid rgba(184,134,11,.2);
    border-radius:var(--r);
  }
  
  .conversion-notes h3{
    margin:0 0 12px;
    color:var(--fantasy-blue);
    font-size:1rem;
  }
  
  .conversion-notes ul{
    margin:0;
    padding-left:20px;
  }
  
  .conversion-notes li{
    margin-bottom:6px;
    color:var(--muted);
    font-size:.9rem;
  }
  
  .form-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-bottom:24px;
  }
  
  .form-group input[type="text"],
  .form-group input[type="number"],
  .form-group select{
    width:100%;
    padding:12px 16px;
    border:2px solid var(--line);
    border-radius:var(--r);
    background:#fff;
    font-size:1rem;
    color:var(--fg);
    transition:border-color .2s ease;
  }
  
  .form-group input[type="text"]:focus,
  .form-group input[type="number"]:focus,
  .form-group select:focus{
    outline:none;
    border-color:var(--fantasy-gold);
    box-shadow:0 0 0 3px rgba(184,134,11,.1);
  }
  
  .proficiency-display{
    padding:12px 16px;
    background:linear-gradient(135deg, rgba(44,82,130,.1), rgba(66,153,225,.05));
    border:2px solid var(--fantasy-gold);
    border-radius:var(--r);
    color:var(--fantasy-blue);
    font-size:1.2rem;
    font-weight:700;
    text-align:center;
  }
  
  .ability-scores-input{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:12px;
    margin:16px 0 24px;
  }
  
  .ability-scores-input .form-group{
    margin-bottom:0;
  }
  
  .ability-scores-input input{
    width:100%;
    padding:8px 12px;
    font-size:0.9rem;
  }
  
  .calculation-preview{
    margin:24px 0;
    padding:20px;
    background:linear-gradient(135deg, rgba(184,134,11,.08), rgba(212,175,55,.05));
    border:2px solid rgba(184,134,11,.2);
    border-radius:var(--r);
  }
  
  .calculation-preview h3{
    margin:0 0 16px;
    color:var(--fantasy-blue);
    font-size:1.1rem;
  }
  
  .preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:16px;
  }
  
  .preview-item{
    padding:12px;
    background:rgba(255,255,255,.7);
    border-radius:var(--r);
    border-left:3px solid var(--fantasy-gold);
  }
  
  .preview-item strong{
    display:block;
    color:var(--fantasy-blue);
    margin-bottom:8px;
    font-size:1rem;
  }
  
  .preview-item .modifier{
    display:block;
    margin-top:8px;
    font-size:.9rem;
    color:var(--fantasy-burgundy);
    font-weight:600;
  }
  
  .hp-calculation{
    margin-top:16px;
    padding:12px;
    background:rgba(255,255,255,.7);
    border-radius:var(--r);
    border-left:3px solid var(--fantasy-gold);
    font-size:.9rem;
    color:var(--muted);
  }
  
  .hp-calculation p{
    margin:4px 0;
  }
  
  .hp-calculation strong{
    color:var(--fantasy-burgundy);
  }
  
  @media (max-width:640px){
    .character-sheet-grid{
      grid-template-columns:1fr;
    }
    
    .abilities-section,
    .combat-section{
      grid-column:1;
    }
    
    .character-basics{
      flex-direction:column;
      align-items:center;
    }
  }

  /* Dark mode for Character Converter */
  @media (prefers-color-scheme: dark){
    .converter-form{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }

    .tab-btn{
      color:var(--text-secondary);
      border-bottom-color:transparent;
    }

    .tab-btn:hover{
      color:var(--brand-primary);
    }

    .tab-btn.active{
      color:var(--brand-primary);
      border-bottom-color:var(--accent-gold-soft);
    }

    .form-group label{
      color:var(--brand-primary);
    }

    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group input[type="url"],
    .form-group select,
    .ability-inputs input{
      background:var(--bg-card);
      border-color:var(--border-subtle);
      color:var(--text-primary);
    }

    .form-group input[type="text"]:focus,
    .form-group input[type="number"]:focus,
    .form-group input[type="url"]:focus,
    .form-group select:focus,
    .ability-inputs input:focus{
      border-color:var(--accent-gold-soft);
      box-shadow:0 0 0 3px rgba(212,175,55,.2);
    }

    .character-sheet{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }

    .character-sheet-header{
      border-bottom-color:var(--accent-gold-soft);
    }

    .character-sheet-header h2{
      color:var(--brand-primary);
    }

    .character-basics span{
      background:rgba(212,175,55,.15);
      border-color:var(--accent-gold-soft);
      color:var(--text-secondary);
    }

    .character-section{
      background:var(--bg-page);
      border-color:var(--border-subtle);
    }

    .character-section h3{
      color:var(--accent-gold);
      border-bottom-color:var(--accent-gold-soft);
    }

    .ability-score,
    .hp-display,
    .defense-display{
      background:var(--bg-card);
      border-color:var(--accent-gold-soft);
    }

    .ability-name,
    .hp-name,
    .defense-name{
      color:var(--brand-primary);
    }

    .ability-modifier,
    .hp-value,
    .defense-value{
      color:var(--accent-gold);
    }

    .ability-label,
    .hp-label-item{
      color:var(--text-secondary);
    }

    .hp-label-value{
      color:var(--accent-gold-soft);
    }

    .proficiency-bonus{
      background:rgba(124,58,237,.15);
      color:var(--brand-primary);
    }

    .skills-list li,
    .weapon-item{
      background:var(--bg-card);
      border-left-color:var(--accent-gold-soft);
    }

    .weapon-item strong{
      color:var(--brand-primary);
    }

    .weapon-attack,
    .weapon-damage{
      color:var(--text-secondary);
    }

    .no-skills,
    .no-weapons{
      color:var(--text-secondary);
    }

    .conversion-notes{
      background:rgba(212,175,55,.12);
      border-color:var(--accent-gold-soft);
    }

    .conversion-notes h3{
      color:var(--brand-primary);
    }

    .conversion-notes li{
      color:var(--text-secondary);
    }

    .proficiency-display{
      background:rgba(124,58,237,.15);
      border-color:var(--accent-gold-soft);
      color:var(--brand-primary);
    }

    .calculation-preview{
      background:rgba(212,175,55,.12);
      border-color:var(--accent-gold-soft);
    }

    .calculation-preview h3{
      color:var(--brand-primary);
    }

    .preview-item{
      background:var(--bg-card);
      border-left-color:var(--accent-gold-soft);
    }

    .preview-item strong{
      color:var(--brand-primary);
    }

    .preview-item .modifier{
      color:var(--accent-gold-soft);
    }

    .hp-calculation{
      background:var(--bg-card);
      border-left-color:var(--accent-gold-soft);
      color:var(--text-secondary);
    }

    .hp-calculation strong{
      color:var(--accent-gold-soft);
    }
  }

  /* Print styles for spell cards */
  @media print {
    /* Reset all backgrounds and shadows */
    * {
      background: none !important;
      background-color: transparent !important;
      background-image: none !important;
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
      filter: none !important;
      text-shadow: none !important;
    }
    
    *::before,
    *::after {
      display: none !important;
    }
    
    /* Base document setup */
    body {
      background: #fff !important;
      background-color: #fff !important;
      color: #000;
      margin: 0;
      padding: 0;
    }
    
    /* Hide non-essential elements */
    header, nav, .toc, .btnrow, .print-controls, footer, h1 {
      display: none !important;
    }
    
    /* Clean main containers */
    main {
      max-width: none;
      padding: 0;
      margin: 0;
    }
    
    .content {
      border: 0;
      padding: 0;
      margin: 0;
    }
    
    .content > p:first-child {
      display: none !important;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    /* Hide unselected cards and empty sections */
    .spell-card:not(.print-selected) {
      display: none !important;
    }
    
    .spell-level-section:not(:has(.print-selected)) {
      display: none !important;
    }
    
    .spell-level-section h3 {
      display: none !important;
    }
    
    /* Grid layout for spell cards */
    .spells-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 0;
      padding: 0;
    }
    
    .spell-level-section {
      page-break-after: auto;
      margin: 0;
      padding: 0;
    }
    
    /* Spell card styling */
    .spell-card {
      border: 2px solid #000;
      border-radius: 6px;
      padding: 10px;
      page-break-inside: avoid;
      break-inside: avoid;
      background: #fff !important;
      background-color: #fff !important;
      margin: 0;
    }
    
    .spell-card::before,
    .spell-card::after {
      content: none !important;
    }
    
    .spell-card-checkbox {
      display: none;
    }
    
    .spell-card-name {
      color: #000;
      font-size: 1rem;
    }
    
    .spell-card-level {
      color: #333;
    }
    
    .spell-card-meta {
      color: #555;
      font-size: 0.8rem;
    }
    
    .spell-card-description {
      color: #000;
      font-size: 0.85rem;
    }
    
    /* Page setup */
    @page {
      margin: 1.5cm;
      size: A4;
    }
  }