/* ===== Dead of Winter — Setup & Reference Utility =========================
   A frozen-night survival skin: typewriter display type (a survivor's journal),
   an ice-and-ash palette with frost blue, blood red and lantern amber accents,
   drifting snow and a frostbitten grain. ==================================== */
:root{
  /* palette — deep winter night with frost & ember accents */
  --bg:#05080d; --bg2:#0a111a;
  --panel:rgba(15,22,30,.92); --panel-solid:#111a24; --panel2:rgba(21,30,40,.9);
  --frame:rgba(143,208,232,.28);            /* frost hairline frame */
  --frame-soft:rgba(143,208,232,.14);
  --line:rgba(143,208,232,.14); --line2:rgba(143,208,232,.26);
  --text:#dde7ee;                            /* cold ivory */
  --muted:#93a4b0; --dim:#66757f;
  --ice:#8fd0e8; --ice-bright:#c9ecfa; --ice-deep:#4e8ba3;
  --red:#b04038; --red-soft:#d47a6a;         /* frozen blood */
  --amber:#c9a44c; --amber-bright:#e8cd85;   /* lantern light / bullets */
  --violet:#9d87cc; --violet-soft:#bda9e8;   /* the long night */
  --green:#7fb15a; --green-soft:#a4d56f;     /* variants */
  --radius:6px; --radius-sm:4px; --radius-pill:999px;
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --shadow-lift:0 22px 60px rgba(0,0,0,.65);
  --ease:cubic-bezier(.2,.7,.2,1);
  --logo:"Special Elite","Courier New",monospace;        /* journal typewriter — logo & headings */
  --display:Georgia,Cambria,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --type:ui-monospace,"SF Mono","Consolas","Liberation Mono",monospace; /* citations & meta */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--text); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--bg); min-height:100vh; position:relative;
}
/* layered ambient: cold aurora glow + ember warmth + vignette */
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(900px 620px at 50% -6%, rgba(143,208,232,.14), transparent 60%),
    radial-gradient(1200px 800px at 84% 8%, rgba(157,135,204,.09), transparent 62%),
    radial-gradient(1000px 760px at 10% 92%, rgba(176,64,56,.08), transparent 60%),
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
/* ---- Gentle snow ----------------------------------------------------------
   Two fixed dot-field layers animated with TRANSFORM ONLY, so the browser
   promotes them to compositor layers and the animation runs on the GPU with
   zero per-frame layout or paint work (mobile-safe). Each loop translates by
   exactly one background tile, so the wrap is seamless; the mid-keyframe adds
   a slight sideways sway that returns to 0 by loop end. */
.snow{
  /* Background snow: sits ABOVE the page gradients but BEHIND every content
     panel, so it fills the margins and gaps without crossing any text. */
  position:fixed; inset:-760px; z-index:-2; pointer-events:none;
  will-change:transform; backface-visibility:hidden;
}
.snow.s1{
  opacity:.6;
  background-image:
    radial-gradient(3.2px 3.2px at 12% 18%, rgba(230,242,250,.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 34% 64%, rgba(230,242,250,.75), transparent 60%),
    radial-gradient(3.6px 3.6px at 56% 32%, rgba(230,242,250,.9), transparent 60%),
    radial-gradient(2.2px 2.2px at 71% 76%, rgba(230,242,250,.65), transparent 60%),
    radial-gradient(3px 3px at 88% 44%,  rgba(230,242,250,.85), transparent 60%),
    radial-gradient(2.4px 2.4px at 22% 88%, rgba(230,242,250,.6), transparent 60%),
    radial-gradient(2.8px 2.8px at 64% 6%,  rgba(230,242,250,.8), transparent 60%),
    radial-gradient(2.2px 2.2px at 44% 47%, rgba(230,242,250,.7), transparent 60%),
    radial-gradient(3.2px 3.2px at 5% 55%,  rgba(230,242,250,.85), transparent 60%),
    radial-gradient(2.6px 2.6px at 79% 12%, rgba(230,242,250,.7), transparent 60%),
    radial-gradient(3px 3px at 96% 68%,  rgba(230,242,250,.8), transparent 60%),
    radial-gradient(2.4px 2.4px at 51% 92%, rgba(230,242,250,.65), transparent 60%);
  background-size:460px 460px;
  animation:snowNear 26s linear infinite;
}
.snow.s2{
  opacity:.35;
  background-image:
    radial-gradient(2px 2px at 8% 42%,   rgba(230,242,250,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 28% 12%, rgba(230,242,250,.6), transparent 60%),
    radial-gradient(2.2px 2.2px at 47% 70%, rgba(230,242,250,.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 38%, rgba(230,242,250,.55), transparent 60%),
    radial-gradient(2px 2px at 82% 84%,  rgba(230,242,250,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 94% 16%, rgba(230,242,250,.6), transparent 60%),
    radial-gradient(1.8px 1.8px at 18% 66%, rgba(230,242,250,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 8%,  rgba(230,242,250,.5), transparent 60%);
  background-size:640px 640px;
  animation:snowFar 58s linear infinite;
}
@keyframes snowNear{
  0%   { transform:translate3d(0,0,0) }
  50%  { transform:translate3d(42px,230px,0) }
  100% { transform:translate3d(0,460px,0) }
}
@keyframes snowFar{
  0%   { transform:translate3d(0,0,0) }
  50%  { transform:translate3d(-30px,320px,0) }
  100% { transform:translate3d(0,640px,0) }
}
@media (prefers-reduced-motion: reduce){
  .snow{ animation:none; opacity:.15 }
  .topbar::before{ animation:none; opacity:.2 }
}
@media (max-width:760px){
  .snow.s2{ display:none }   /* one layer is plenty on small screens */
  .snow.s1{ opacity:.5 }
}

/* fine frost grain */
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Top bar ---- */
.topbar{
  position:sticky; top:0; z-index:30; overflow:hidden;
  border-bottom:1px solid var(--frame);
  background:
    radial-gradient(700px 200px at 50% -40%, rgba(143,208,232,.13), transparent 70%),
    linear-gradient(180deg, rgba(8,13,20,.97), rgba(5,8,13,.93));
  box-shadow:0 2px 0 rgba(143,208,232,.1), 0 14px 30px rgba(0,0,0,.5);
}
.topbar::after{
  content:""; position:absolute; left:6%; right:6%; bottom:5px; height:3px; pointer-events:none;
  border-top:1px solid rgba(143,208,232,.45); border-bottom:1px solid rgba(143,208,232,.18);
}
/* snow inside the header — clipped by the topbar's overflow:hidden, drifting
   behind the brand text (transform-only, same GPU-cheap loop as .snow) */
.topbar::before{
  content:""; position:absolute; inset:-460px -460px 0 -460px; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(2.8px 2.8px at 12% 18%, rgba(230,242,250,.9), transparent 60%),
    radial-gradient(2.2px 2.2px at 34% 64%, rgba(230,242,250,.7), transparent 60%),
    radial-gradient(3.2px 3.2px at 56% 32%, rgba(230,242,250,.85), transparent 60%),
    radial-gradient(2px 2px at 71% 76%,  rgba(230,242,250,.6), transparent 60%),
    radial-gradient(2.6px 2.6px at 88% 44%, rgba(230,242,250,.8), transparent 60%),
    radial-gradient(2.2px 2.2px at 22% 88%, rgba(230,242,250,.55), transparent 60%),
    radial-gradient(2.4px 2.4px at 64% 6%,  rgba(230,242,250,.7), transparent 60%),
    radial-gradient(2.8px 2.8px at 44% 47%, rgba(230,242,250,.75), transparent 60%),
    radial-gradient(2.2px 2.2px at 5% 55%,  rgba(230,242,250,.6), transparent 60%),
    radial-gradient(2.6px 2.6px at 96% 68%, rgba(230,242,250,.7), transparent 60%);
  background-size:460px 460px;
  animation:snowNear 26s linear infinite;
  will-change:transform; backface-visibility:hidden;
}
.topbar-inner{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto; padding:20px 28px 16px;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:20px; align-items:center;
}
.sigil{grid-row:1 / span 2; position:relative; width:62px; height:62px; color:var(--ice); display:grid; place-items:center;
  filter:drop-shadow(0 0 10px rgba(143,208,232,.4))}
.sigil svg{position:relative; z-index:1; width:100%; height:100%}
/* frost-breath glow behind the snowflake */
.sigil::before{
  content:""; position:absolute; inset:-16%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(143,208,232,.45), rgba(143,208,232,0) 66%);
  animation:frostBreath 6s ease-in-out infinite;
}
@keyframes frostBreath{
  0%,100%{ opacity:.35; transform:scale(.92) }
  50%    { opacity:.8;  transform:scale(1.06) }
}
@media (prefers-reduced-motion: reduce){ .sigil::before{ animation:none } }

.brand{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.brand-dw{
  font-family:var(--logo); font-weight:400; font-size:2rem; letter-spacing:.06em; line-height:1;
  color:var(--ice-bright);
  text-shadow:0 0 22px rgba(143,208,232,.35), 0 2px 0 rgba(0,0,0,.6);
}
.deco-rule{display:flex; align-items:center; gap:8px; width:min(420px,100%)}
.deco-rule i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--frame),transparent)}
.deco-rule b{width:7px; height:7px; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--ice-bright),var(--ice-deep)); box-shadow:0 0 8px rgba(143,208,232,.5)}
.brand-sub{
  font-family:var(--type); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.tagline{grid-column:2; margin:2px 0 0; font-size:.86rem; color:var(--muted); max-width:72ch}

/* ---- Layout ---- */
main{max-width:1180px; margin:0 auto; padding:26px 28px 60px}
.footer{
  max-width:1180px; margin:0 auto; padding:26px 28px 44px; color:var(--dim);
  font-size:.8rem; border-top:1px solid var(--line); text-align:center;
}

/* ---- Configurator ---- */
.config{
  display:flex; flex-wrap:wrap; gap:22px 34px; padding:20px 22px;
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:20px; position:relative;
}
.config::before,.config::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none; opacity:.55;
  border-color:var(--ice); border-style:solid; border-width:0;
}
.config::before{top:7px; left:7px; border-top-width:2px; border-left-width:2px}
.config::after{bottom:7px; right:7px; border-bottom-width:2px; border-right-width:2px}
.cfg-group{display:flex; flex-direction:column; gap:10px}
.cfg-group.grow{flex:1 1 340px}
.cfg-label{
  font-family:var(--type); font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ice); opacity:.9;
}
.cfg-label .hint{letter-spacing:.05em; text-transform:none; color:var(--dim); font-size:.68rem}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  appearance:none; cursor:pointer; user-select:none;
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--muted);
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:7px 14px; transition:all .18s var(--ease);
}
.chip:hover{color:var(--text); border-color:var(--line2); transform:translateY(-1px)}
.chip.on{
  color:#0b1520; background:linear-gradient(180deg,var(--ice-bright),var(--ice));
  border-color:var(--ice); box-shadow:0 0 14px rgba(143,208,232,.35);
}
.chip.locked{cursor:default}
.chip.locked:hover{transform:none}
.chip.small{font-size:.78rem; padding:5px 12px; font-weight:500}
/* set-flavoured chips when active */
.e-ln-chip.on{background:linear-gradient(180deg,var(--violet-soft),var(--violet)); border-color:var(--violet); box-shadow:0 0 14px rgba(157,135,204,.4)}
.e-wc-chip.on{background:linear-gradient(180deg,var(--amber-bright),var(--amber)); border-color:var(--amber); box-shadow:0 0 14px rgba(201,164,76,.4)}

.pbtns{display:flex; flex-wrap:wrap; gap:6px}
.pbtn{
  appearance:none; cursor:pointer; width:34px; height:34px; border-radius:var(--radius-sm);
  font-family:var(--type); font-size:.85rem; color:var(--muted);
  background:var(--panel2); border:1px solid var(--line); transition:all .15s var(--ease);
}
.pbtn:hover{color:var(--text); border-color:var(--line2)}
.pbtn.on{color:#0b1520; background:linear-gradient(180deg,var(--ice-bright),var(--ice)); border-color:var(--ice); font-weight:700}
.pbtn.off{opacity:.32; cursor:not-allowed}
.pbtn.off:hover{color:var(--muted); border-color:var(--line)}

.mods{display:flex; flex-direction:column; gap:12px}
.mod-group{display:flex; flex-direction:column; gap:7px}
.mod-group-label{
  font-family:var(--type); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.mod-group-label .mg-note{letter-spacing:.03em; text-transform:none; color:var(--dim); font-size:.68rem; margin-left:6px}
.muted{color:var(--dim); font-size:.85rem; margin:0}

/* ---- Detail head ---- */
.detail-head{
  position:relative; padding:20px 22px; margin-bottom:14px;
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.share-btn{
  position:absolute; top:14px; right:14px; cursor:pointer;
  font-family:var(--type); font-size:.7rem; letter-spacing:.06em; color:var(--muted);
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:6px 12px; transition:all .15s var(--ease);
}
.share-btn:hover{color:var(--ice-bright); border-color:var(--ice)}
.dh-mode{
  font-family:var(--logo); font-size:1.5rem; color:var(--ice-bright); letter-spacing:.04em;
  text-shadow:0 0 16px rgba(143,208,232,.3);
}
.dh-desc{margin:8px 0 12px; color:var(--muted); font-size:.9rem; max-width:88ch}
.dh-meta{display:flex; flex-wrap:wrap; gap:6px}
.meta-pill{
  font-family:var(--type); font-size:.68rem; color:var(--ice); letter-spacing:.04em;
  border:1px solid var(--line2); border-radius:var(--radius-pill); padding:3px 10px;
  background:rgba(143,208,232,.06);
}
.meta-pill.mode{color:var(--amber-bright); border-color:rgba(201,164,76,.4); background:rgba(201,164,76,.07)}
.meta-pill.opt{color:var(--green-soft); border-color:rgba(127,177,90,.35); background:rgba(127,177,90,.06)}

/* ---- Jump nav ---- */
.jump-nav{
  position:sticky; top:var(--topbar-h,86px); z-index:25;
  display:flex; flex-wrap:wrap; gap:6px; padding:10px 0; margin-bottom:14px;
  background:linear-gradient(180deg, rgba(5,8,13,.96), rgba(5,8,13,.9));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.jn{
  font-family:var(--type); font-size:.72rem; letter-spacing:.08em; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:5px 12px; transition:all .15s var(--ease);
}
.jn:hover{color:var(--ice-bright); border-color:var(--ice)}

/* ---- Legends & section headers ---- */
.legend{color:var(--muted); font-size:.85rem; margin:6px 2px 14px}
h3{
  font-family:var(--logo); font-weight:400; font-size:1.3rem; color:var(--ice-bright);
  letter-spacing:.04em; margin:34px 0 6px; position:relative; padding-left:18px;
}
h3::before{
  content:""; position:absolute; left:0; top:.48em; width:9px; height:9px;
  background:linear-gradient(135deg,var(--ice-bright),var(--ice-deep));
  transform:rotate(45deg); box-shadow:0 0 8px rgba(143,208,232,.5);
}

/* ---- Setup steps ---- */
.steps{display:flex; flex-direction:column; gap:16px}
.setup-block{
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 20px 12px;
}
.setup-block h3{margin:2px 0 10px; font-size:1.1rem}
.ustep{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.ustep li{
  display:flex; gap:14px; padding:12px 2px; border-top:1px solid var(--line);
}
.ustep li:first-child{border-top:none}
.snum{
  flex:0 0 30px; height:30px; display:grid; place-items:center; margin-top:2px;
  font-family:var(--type); font-size:.8rem; font-weight:700; color:var(--ice-bright);
  border:1px solid var(--line2); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(143,208,232,.18), rgba(143,208,232,.04));
}
.sbody{flex:1; min-width:0}
.st{font-weight:700; color:var(--text)}
.sd{color:var(--muted); font-size:.9rem; margin-top:3px}
.sd b{color:var(--text)}
.ssrc{font-family:var(--type); font-size:.68rem; color:var(--dim); margin-top:5px; letter-spacing:.04em}

/* source tags */
.etag{
  display:inline-block; vertical-align:1px; margin-left:6px;
  font-family:var(--type); font-size:.62rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  border-radius:3px; padding:2px 7px; border:1px solid;
}
.e-base{color:var(--ice); border-color:rgba(143,208,232,.45); background:rgba(143,208,232,.08)}
.e-ln{color:var(--violet-soft); border-color:rgba(157,135,204,.45); background:rgba(157,135,204,.09)}
.e-wc{color:var(--amber-bright); border-color:rgba(201,164,76,.45); background:rgba(201,164,76,.09)}
.e-var{color:var(--green-soft); border-color:rgba(127,177,90,.45); background:rgba(127,177,90,.08)}
.e-mod{color:#8fd8c5; border-color:rgba(95,184,165,.5); background:rgba(95,184,165,.09)}

/* ---- How to play ---- */
.htp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px}
.htp-sec{
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 18px;
}
.htp-sec.mod{border-color:rgba(157,135,204,.3)}
.htp-sec h5{
  margin:0 0 8px; font-family:var(--display); font-size:1rem; color:var(--ice-bright); letter-spacing:.02em;
}
.htp-sec h5 .etag{margin-left:8px; vertical-align:2px}
.htp-sec ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px}
.htp-sec li{color:var(--muted); font-size:.87rem}
.htp-sec li b{color:var(--text)}
/* nested lists inside a rule item */
.htp-sec .sub{margin:7px 0 3px; padding-left:20px; display:flex; flex-direction:column; gap:5px}
.htp-sec ol.sub{list-style:decimal}
.htp-sec ul.sub{list-style:disc}
.htp-sec .sub li{font-size:.84rem}
.htp-sec .sub-title{
  margin-top:8px; font-family:var(--type); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ice);
}
.htp-sec li > .sub-title:first-child, .htp-sec li .sub-title + .sub{margin-top:4px}
.htp-src{font-family:var(--type); font-size:.64rem; color:var(--dim); letter-spacing:.03em; white-space:nowrap}

/* ---- Locations ---- */
.loc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px}
.loc-board{
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 18px;
}
.loc-board h5{margin:0 0 8px; font-family:var(--display); font-size:1rem; color:var(--red-soft); letter-spacing:.02em}
.loc-board ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px}
.loc-board li{color:var(--muted); font-size:.87rem}
.loc-board li b{color:var(--text)}

/* ---- Rulings ---- */
.faq-list{display:flex; flex-direction:column; gap:8px}
.faq-item{
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:0 16px;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:12px 0; font-weight:600; color:var(--text); font-size:.92rem;
  position:relative; padding-right:26px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--type); color:var(--ice); font-size:1rem;
}
.faq-item[open] summary::after{content:"–"}
.faq-a{color:var(--muted); font-size:.88rem; padding:0 0 14px; border-top:1px dashed var(--line)}
.faq-a{padding-top:10px}
.faq-a b{color:var(--text)}
.faq-a i{color:var(--dim); font-size:.8rem}

/* ---- Reference ---- */
.ref-grid{display:flex; flex-direction:column; gap:12px}
.ref-callout{
  margin:0; padding:10px 14px; color:var(--muted); font-size:.87rem;
  background:rgba(143,208,232,.06); border:1px solid var(--line2); border-radius:var(--radius-sm);
}
.ref-callout b{color:var(--ice-bright)}
.ref-table{
  width:100%; border-collapse:collapse; font-size:.87rem;
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.ref-table th{
  font-family:var(--type); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ice); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line2);
  background:rgba(143,208,232,.05);
}
.ref-table td{padding:9px 14px; border-bottom:1px solid var(--line); color:var(--muted)}
.ref-table tr:last-child td{border-bottom:none}
.ref-table tr.ref-active td{color:var(--text); background:rgba(143,208,232,.08); font-weight:600}
.ref-notes{margin:2px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
.ref-notes li{color:var(--muted); font-size:.85rem}
.ref-notes li b{color:var(--text)}

/* ---- Rulebook search ---- */
.rules-search{
  background:var(--panel); border:1px solid var(--frame-soft); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 20px 18px; margin-bottom:8px;
}
.rules-search h3{margin:2px 0 4px; font-size:1.1rem}
.rs-sub{color:var(--muted); font-size:.84rem; margin:4px 0 12px; max-width:96ch}
.rs-sub b{color:var(--text)}
.rs-input{
  width:100%; padding:12px 16px; font-family:var(--sans); font-size:1rem; color:var(--text);
  background:rgba(5,8,13,.7); border:1px solid var(--line2); border-radius:var(--radius-sm);
  outline:none; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rs-input:focus{border-color:var(--ice); box-shadow:0 0 0 3px rgba(143,208,232,.14)}
.rs-input::placeholder{color:var(--dim)}
.rs-results{margin-top:12px; display:flex; flex-direction:column; gap:8px; max-height:560px; overflow-y:auto; padding-right:4px}
.rs-hint{color:var(--dim); font-size:.85rem; margin:4px 2px}
.rs-count{font-family:var(--type); font-size:.68rem; color:var(--dim); letter-spacing:.06em; margin:0 2px 2px}
.rs-item{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 12px;
}
.rs-item[open]{border-color:var(--line2)}
.rs-sum{cursor:pointer; list-style:none; padding:10px 0}
.rs-sum::-webkit-details-marker{display:none}
.rs-meta{display:flex; align-items:center; gap:8px; margin-bottom:5px}
.rs-meta .etag{margin-left:0}
.rs-page{font-family:var(--type); font-size:.68rem; color:var(--dim); letter-spacing:.04em}
.rs-toggle{margin-left:auto; font-family:var(--type); font-size:.64rem; color:var(--ice); opacity:.7}
.rs-snip{color:var(--muted); font-size:.85rem}
.rs-full{padding:2px 0 12px; border-top:1px dashed var(--line); margin-top:2px}
.rs-full p{color:var(--muted); font-size:.85rem; margin:8px 0 0}
mark{background:rgba(201,164,76,.3); color:var(--amber-bright); border-radius:2px; padding:0 2px}

/* ---- Responsive ---- */
@media (max-width:760px){
  .topbar-inner{grid-template-columns:auto 1fr; padding:14px 16px 12px}
  .sigil{width:44px; height:44px}
  .brand-dw{font-size:1.35rem}
  .brand-sub{letter-spacing:.2em; font-size:.62rem}
  .tagline{display:none}
  main{padding:18px 14px 50px}
  .config{gap:16px; padding:14px}
  .share-btn{position:static; margin-bottom:10px}
  .ref-table{display:block; overflow-x:auto}
}