/* ---------- Shardbound rules page (regels.html), on top of css/welkom.css ---------- */
.regels-pagina .nav-links a{padding:8px 10px;font-size:14px}
.r-kop{position:relative;padding:150px 0 70px;overflow:hidden;isolation:isolate}
.r-kop::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 500px at 80% 20%,rgba(124,58,237,.35),transparent 70%),radial-gradient(600px 400px at 10% 90%,rgba(14,116,144,.18),transparent 70%)}
.r-kop h1{margin:14px 0 18px;font-family:var(--kop);font-style:italic;text-transform:uppercase;font-size:clamp(40px,6.4vw,88px);line-height:1;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 0%,#e3dcff 55%,#b9a5ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #1e1b4b) drop-shadow(0 0 30px rgba(124,58,237,.45))}
.r-doel{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:16px;margin-top:32px}
.r-doel .paneel{padding:20px 22px}
.r-doel b{display:block;font:400 clamp(28px,3vw,40px)/1 var(--kop);font-style:italic;color:var(--goud);margin-bottom:8px}
.r-doel span{color:var(--tekstkl)}
.r-doel strong{color:#fff}
.r-noot{margin-top:14px!important;font-size:15.5px;color:var(--stil)}
.r-sectie{padding:clamp(64px,8vw,110px) 0}
.r-sectie h2{margin-bottom:22px}
.r-sectie .lead{margin-bottom:30px}
.r-tekst{color:var(--stil);margin-top:16px}
.r-h3{margin:0 0 14px;color:var(--goud)}
.r-h3-groot{margin-top:56px;font-size:clamp(22px,2vw,28px)}
.r-twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:40px}
.r-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.r-drie h3{margin-bottom:10px}
.r-drie p,.r-drie li{color:var(--tekstkl);font-size:17px}
.r-drie p+p,.r-drie ul+p{margin-top:10px}
.r-lijst ul,.r-drie ul{margin:0 0 18px;padding-left:20px}
.r-lijst li,.r-drie li{margin:6px 0;color:var(--tekstkl)}
.r-lijst li::marker,.r-drie li::marker{color:var(--goud)}
@media (max-width:960px){.r-twee,.r-drie{grid-template-columns:1fr}.r-doel{grid-template-columns:1fr}}

/* phases */
.fasen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:f}
.fasen li{padding:24px 22px 26px}
.fasen i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:12px;font:400 18px var(--kop);font-style:italic;color:#1c1003;
  background:linear-gradient(180deg,#ffe7a3,#e9a52a);clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.fasen h3{margin-bottom:8px}
.fasen p{color:var(--tekstkl);font-size:17px}
@media (max-width:960px){.fasen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fasen{grid-template-columns:1fr}}

/* cards: upright, or turned for defense */
.rk{position:relative;display:inline-block;flex:none;width:var(--rkw,132px);aspect-ratio:200/290}
.rk img{position:absolute;inset:0;width:100%;height:100%;border-radius:6%/4.2%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.rk-def{width:calc(var(--rkw,132px)*1.45);aspect-ratio:290/200}
.rk-def img{inset:auto;left:50%;top:50%;width:calc(100%*200/290);height:calc(100%*290/200);transform:translate(-50%,-50%) rotate(-90deg)}
.rk-klein{--rkw:86px}
.rk-leeg{display:flex;align-items:center;justify-content:center;border:2px dashed rgba(196,181,253,.35);border-radius:8px;color:var(--stil);font:700 13px var(--tekst);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.mini-kaarten{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}

.offers{display:flex;flex-wrap:wrap;gap:22px}
.offer,.pos{display:flex;gap:16px;align-items:center;padding:14px 18px 14px 14px;background:linear-gradient(160deg,var(--paneel),var(--paneel2));box-shadow:inset 0 0 0 1px var(--lijn);clip-path:var(--schuin)}
.offer .rk{--rkw:96px}
.offer p,.pos p,.buff p,.val p{display:flex;flex-direction:column;gap:2px}
.offer b,.pos b{font:400 20px var(--kop);font-style:italic;color:#fff}
.offer span,.pos span{color:var(--stil);font-weight:600}
.posities{display:grid;gap:12px}
.pos .rk{--rkw:74px}

/* the matrix */
.matrix-vak{margin-top:10px}
.matrix{width:100%;border-collapse:separate;border-spacing:6px;table-layout:fixed}
.matrix caption{caption-side:top;text-align:left;padding:0 6px 8px;font:700 13px var(--tekst);letter-spacing:.2em;text-transform:uppercase;color:var(--goud2)}
.matrix th,.matrix td{padding:18px 18px;vertical-align:top;text-align:left;font-size:17px;line-height:1.45}
.matrix thead th{font:700 14px var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:#e9e4ff;background:rgba(20,14,52,.8);border-radius:6px}
.matrix thead th:first-child{background:none}
.matrix tbody th{width:22%;background:rgba(20,14,52,.85);border-radius:6px;box-shadow:inset 0 0 0 1px var(--lijn)}
.m-label{display:block;font:400 18px var(--kop);font-style:italic;color:#fff}
.matrix tbody th small{display:block;margin-top:4px;font:700 13px var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.matrix td{color:#ece9ff;border-radius:6px}
.matrix td b{color:#fff}
.matrix td b.mk{display:block;font-size:18px;margin-bottom:2px}
td.m-hoger{background:linear-gradient(160deg,rgba(34,197,94,.22),rgba(21,128,61,.12));box-shadow:inset 0 0 0 1px rgba(74,222,128,.45)}
td.m-hoger b.mk{color:#86efac}
td.m-gelijk{background:linear-gradient(160deg,rgba(168,85,247,.24),rgba(107,33,168,.12));box-shadow:inset 0 0 0 1px rgba(192,132,252,.45)}
td.m-gelijk b.mk{color:#d8b4fe}
td.m-lager{background:linear-gradient(160deg,rgba(251,146,60,.22),rgba(194,65,12,.12));box-shadow:inset 0 0 0 1px rgba(251,146,60,.5)}
td.m-lager b.mk{color:#fdba74}
td.m-direct{background:rgba(125,249,255,.08);box-shadow:inset 0 0 0 1px rgba(125,249,255,.35)}
thead .m-hoger{box-shadow:inset 0 -3px 0 #4ade80}.thead .m-gelijk,thead .m-gelijk{box-shadow:inset 0 -3px 0 #c084fc}thead .m-lager{box-shadow:inset 0 -3px 0 #fb923c}
.matrix-noten{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.matrix-noten li{position:relative;padding-left:22px;color:var(--tekstkl)}
.matrix-noten li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;transform:rotate(45deg);background:var(--goud)}
@media (max-width:760px){
  .matrix,.matrix thead,.matrix tbody,.matrix tr,.matrix th,.matrix td{display:block;width:auto}
  .matrix thead{display:none}
  .matrix tbody tr{margin-bottom:18px}
  .matrix tbody th{width:auto!important;margin-bottom:6px;display:flex!important;align-items:baseline;gap:10px;flex-wrap:wrap}
  .matrix tbody th small{margin-top:0}
  .matrix td{margin-bottom:6px;padding:12px 14px}
  .matrix td::before{display:block;margin-bottom:4px;font:700 12px var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--stil)}
  .matrix td.m-hoger::before{content:"Attacker higher"}.matrix td.m-gelijk::before{content:"Equal"}.matrix td.m-lager::before{content:"Attacker lower"}
  .matrix-noten{grid-template-columns:1fr}
}

/* worked examples */
.voorbeelden{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.voorbeelden.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.vb{margin:0;padding:18px 18px 20px;background:linear-gradient(160deg,var(--paneel),var(--paneel2));box-shadow:inset 0 0 0 1px var(--lijn);clip-path:var(--schuin);display:flex;flex-direction:column}
.vb-titel{font:700 13px var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--goud2);margin-bottom:12px!important}
.vb-rij{display:flex;align-items:center;justify-content:center;gap:10px;min-height:150px}
.vb-kant{display:flex;flex-direction:column;align-items:center;gap:8px;--rkw:92px}
.vb-pijl{font-size:26px;color:var(--neon);text-shadow:0 0 12px rgba(125,249,255,.6)}
.vb-label{display:flex;flex-direction:column;align-items:center;font-size:15px;color:#e9e4ff;text-align:center;line-height:1.25}
.vb-label em{font-style:normal;font:700 11px var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--stil)}
.vb-label s{color:var(--stil);margin-left:4px}
.vb-uitkomst{margin:14px 0 8px;padding:9px 12px;font:400 16px/1.3 var(--kop);font-style:italic;text-align:center;border-radius:4px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.vb-uitkomst.k-winst{background:linear-gradient(180deg,#22c55e,#15803d);color:#fff}
.vb-uitkomst.k-verlies{background:linear-gradient(180deg,#fb923c,#c2410c);color:#fff}
.vb-uitkomst.k-gelijk{background:linear-gradient(180deg,#a855f7,#6b21a8);color:#fff}
.vb figcaption{font-size:16px;line-height:1.5;color:var(--tekstkl)}
.vb-noot{display:block;margin-top:6px;color:var(--stil)}
.valkuil{margin-top:40px;padding:26px 26px 28px;box-shadow:inset 0 0 0 1px rgba(232,194,106,.5)}
.valkuil h3{color:var(--goud);margin-bottom:6px}
.valkuil>p{color:var(--tekstkl);margin-bottom:18px}
@media (max-width:760px){.voorbeelden,.voorbeelden.twee{grid-template-columns:1fr}.vb-kant{--rkw:80px}}
@media (max-width:380px){.vb-kant{--rkw:70px}.vb{padding:14px}}

/* power changes, traps */
.buffs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:30px}
.buff,.val{display:flex;gap:14px;align-items:flex-start;padding:12px;background:rgba(20,14,52,.55);box-shadow:inset 0 0 0 1px var(--lijn);border-radius:6px}
.buff b,.val b{color:#fff;font-size:17px}
.buff em,.val em{font-style:normal;font:700 12px var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--goud2)}
.buff span,.val span{color:var(--stil);font-size:15.5px;line-height:1.4}
.vallen{display:grid;gap:10px}

/* keywords */
.kw-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.kw{padding:22px 22px 24px}
.kw-chip{display:inline-block;padding:3px 12px;border-radius:999px;border:1.5px solid var(--kl);color:var(--kl);font:800 13px var(--tekst);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.kw>p{color:var(--tekstkl)}
.kw-kaarten{margin-top:4px!important;font-size:14.5px;color:var(--stil)!important}
.deckregels{list-style:none;padding:0!important}
.deckregels li{padding:6px 0;border-bottom:1px solid rgba(167,139,250,.14)}
.deckregels li::marker{content:none}