/* Ventus Roleplay | Regelboek 2.0 – uitsluitend presentatie, Supabase blijft de bron */
#regels {padding-block:62px 100px!important;background:linear-gradient(180deg,#061326 0%,#07182e 80%,#061326 100%)}
#regels .rulehead{align-items:end;gap:24px;margin-bottom:30px;flex-wrap:wrap}
#regels .rulehead .heading{font-size:clamp(2.2rem,4vw,3.5rem);font-weight:900;letter-spacing:-.045em;margin:8px 0 10px;line-height:1.1}
#regels .rulehead .sub{max-width:660px;color:#b8cee6;font-size:1rem!important;line-height:1.6}
#regels .section-eyebrow{letter-spacing:.22em;color:#54caff;font-size:.76rem;font-weight:800}
#regels .search{width:min(380px,100%);background:#0b2039;border:1px solid #315f85;border-radius:14px;padding:16px 18px;box-shadow:inset 0 1px #ffffff09}
#regels .search input{font-size:14px;min-width:0;color:#f4f9ff}
#regels .grid{grid-template-columns:minmax(225px,270px) minmax(0,1fr);gap:28px;align-items:start}
#regels .side{border-radius:18px;position:sticky;top:100px;padding:18px;background:linear-gradient(150deg,#0d2643,#09192f)!important;border:1px solid #2b5579!important;box-shadow:0 16px 40px #0003}
#regels .side h3{color:#8acfff;font-weight:900;letter-spacing:.19em;font-size:11px;margin:6px 12px 18px}
#regels .filter{padding:13px 12px;margin-bottom:5px;border-radius:10px;gap:10px;color:#c5d6eb;line-height:1.3;transition:background .18s,color .18s}
#regels .filter:hover{background:#143958!important;color:white}
#regels .filter.active{background:linear-gradient(95deg,#116fb4,#16558a)!important;color:#fff!important;border:1px solid #3baff2;box-shadow:0 4px 18px #06a2ff1b}
#regels .filter-name{min-width:0;text-align:left;flex:1;font-size:13px;overflow-wrap:anywhere}
#regels .filter-count{flex:none;background:#09253a;min-width:29px;text-align:center;padding:4px 6px;border-radius:7px;color:#9fdafa!important;font-variant-numeric:tabular-nums}
#regels .filter.active .filter-count{background:#0b335a;color:#f4fbff!important}
#regels .feature{border:1px solid #315f85!important;background:linear-gradient(120deg,#0d2a49,#0c1e37)!important;padding:22px 24px;border-radius:17px;margin-bottom:22px;box-shadow:0 12px 32px #0002}
#regels .feature h3{font-size:23px;font-weight:900;letter-spacing:-.025em}
#regels .feature p{color:#b9cde4!important;margin-top:6px;line-height:1.5}
#regels .rulebook-chapter{margin:0 0 35px;scroll-margin-top:95px}
#regels .rulebook-chapter-heading{display:flex;gap:16px;align-items:center;padding:16px 3px 17px;border-bottom:1px solid #2c577a;margin-bottom:14px}
#regels .rulebook-chapter-icon{width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(150deg,#063e6a,#126ca6);border:1px solid #328ac0;border-radius:13px;color:#b4efff;font-weight:900;letter-spacing:.02em;font-size:15px;flex:none}
#regels .rulebook-chapter-copy{min-width:0}
#regels .rulebook-kicker{font-size:10px;font-weight:900;letter-spacing:.18em;color:#58caff}
#regels .rulebook-chapter-copy h3{font-weight:900;font-size:clamp(19px,2.1vw,25px);margin:3px 0 2px;color:#f6fbff;letter-spacing:-.025em}
#regels .rulebook-chapter-copy p{font-size:12px;color:#a1bcd6;margin:0}
#regels .rulebook-articles{display:grid;gap:9px}
#regels .rulebook-article{margin:0!important;border-radius:13px!important;background:#0c2039!important;border:1px solid #254d73!important;min-height:0!important;box-shadow:0 6px 15px #0001!important;overflow:hidden;transition:border-color .18s,background .18s}
#regels .rulebook-article:hover,#regels .rulebook-article[open]{border-color:#339be1!important;background:#0e2845!important;box-shadow:0 10px 24px #0003!important}
#regels .rulebook-article summary{padding:15px 18px!important;min-height:72px!important;gap:18px;align-items:center}
#regels .rulebook-article .rleft{gap:15px;flex:1;min-width:0;align-items:center}
#regels .rulebook-article .num{background:#143d64;color:#85d9ff;border:1px solid #2d709e;min-width:60px;padding:10px 8px;font-size:12px;border-radius:9px;font-weight:900;flex:none;line-height:1.2}
#regels .rulebook-info{display:flex;flex-direction:column;min-width:0;gap:5px}
#regels .rulebook-article .rtitle{font-size:15px;font-weight:800;color:#f6f9ff;line-height:1.35;letter-spacing:.005em;overflow-wrap:anywhere;display:block}
#regels .rulebook-hint{font-size:11px;color:#8daac6;line-height:1.3}
#regels .rulebook-chevron{font-size:26px;line-height:1;color:#57c3fa;flex:none;display:block;transition:transform .16s}
#regels .rulebook-article[open] .rulebook-chevron{transform:rotate(180deg)}
#regels .rulebook-article .content{padding:18px 24px 22px 93px!important;border-top:1px solid #235174!important;background:#091c33;line-height:1.75;font-size:14px!important;color:#d1e1f2!important}
#regels .rulebook-article .content p{margin:0 0 13px;white-space:pre-line;overflow-wrap:anywhere}
#regels .rulebook-article .content .important{background:#18354d;border-left:3px solid #37b8fd;border-radius:0 8px 8px 0;padding:11px 13px;color:#d9f1ff!important}
#regels .rulebook-empty{background:#0d243e;border:1px dashed #376b99;padding:32px;border-radius:16px}
#regels .rulebook-empty p{margin:8px 0 18px}
#regels .rulebook-empty button{background:#0b75b9;color:white;border:1px solid #4cc2ff;border-radius:9px;padding:10px 16px;font-weight:800;cursor:pointer}
@media(max-width:850px){#regels .grid{grid-template-columns:1fr;gap:16px}#regels .side{position:static}#regels .side h3{margin-bottom:9px}#regels .side .filter{display:inline-flex;width:auto;margin:4px 5px 4px 0;vertical-align:middle;max-width:100%}#regels .filter-name{white-space:normal}#regels .rulehead .search{width:100%}}
@media(max-width:540px){#regels{padding-block:42px 65px!important}#regels .side{padding:12px}#regels .feature{padding:17px}#regels .rulebook-chapter-heading{gap:11px}#regels .rulebook-chapter-icon{width:40px;height:40px}#regels .rulebook-article summary{padding:13px 12px!important;gap:10px;min-height:65px!important}#regels .rulebook-article .rleft{gap:9px}#regels .rulebook-article .num{min-width:46px;padding:10px 5px}#regels .rulebook-article .rtitle{font-size:14px}#regels .rulebook-article .content{padding:15px 15px 18px!important}#regels .rulebook-hint{font-size:10px}}