.twilight-guide { width:100%; max-width:none; }
.twilight-heading { margin:24px 0 18px; }
.twilight-heading h1 { margin:6px 0 8px; font-size:clamp(27px,3vw,38px); }
.twilight-heading p { margin:0; color:#d3c9b8; }
.twilight-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.twilight-nav a { padding:7px 11px; border:1px solid #5d5038; border-radius:3px; color:#ead4ac; background:#111915; font-size:14px; }
.twilight-nav a:hover { color:#fff1d0; border-color:#b28a55; }
.twilight-section { margin:0 0 16px; padding:21px 23px; border:1px solid #59482f; border-radius:4px; background:#101914; color:#e5ddcf; scroll-margin-top:24px; }
.twilight-section h2 { margin:0 0 12px; color:#f2dfbb; font-size:24px; }
.twilight-section h3 { margin:18px 0 8px; color:#eed4a7; font-size:19px; }
.twilight-section h4 { margin:13px 0 6px; color:#e5cda2; font-size:16px; }
.twilight-section p,.twilight-section li { line-height:1.55; }
.twilight-section p { margin:9px 0; }
.twilight-section ul,.twilight-section ol { margin:8px 0 12px; padding-left:22px; }
.twilight-section strong { color:#f2d8a9; }
.twilight-summary { display:flex; gap:22px; align-items:center; justify-content:space-between; }
.twilight-summary>div { flex:1; min-width:0; }
.twilight-summary-image { max-width:min(38%,320px); max-height:200px; width:auto; height:auto; object-fit:contain; }
.twilight-note { padding:12px 15px; border-left:3px solid #b28a50; background:#26291e; }
.twilight-with-figure { display:flex; align-items:center; gap:14px; margin:12px 0; }
.twilight-with-figure img { width:55px; max-height:90px; height:auto; object-fit:contain; }
.twilight-with-figure p { flex:1; margin:0; }
.twilight-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.twilight-steps article { display:flex; gap:12px; align-items:flex-start; padding:14px; background:#0b120e; border:1px solid #403c2b; }
.twilight-steps article>span { flex:0 0 30px; display:grid; place-items:center; width:30px; height:30px; border:1px solid #957548; border-radius:50%; color:#e9cb92; }
.twilight-steps article>div { flex:1; min-width:0; }
.twilight-steps article h3 { margin:0 0 5px; font-size:17px; }
.twilight-steps article p { margin:0; }
.twilight-steps article img { width:64px; max-height:80px; height:auto; object-fit:contain; }
.twilight-route li { margin:7px 0; padding-left:3px; }
.twilight-objects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.twilight-object { min-width:0; border:1px solid #484331; border-radius:3px; background:#0b120f; }
.twilight-object summary { display:flex; align-items:center; gap:10px; min-height:47px; padding:9px 12px; color:#ead1a2; cursor:pointer; font-weight:600; }
.twilight-object summary:after { content:'+'; margin-left:auto; font-size:20px; color:#c09a62; }
.twilight-object[open] summary:after { content:'−'; }
.twilight-object summary img { width:42px; height:42px; object-fit:contain; }
.twilight-object p { margin:0; padding:0 12px 13px; }
.twilight-object-creature { display:flex; align-items:center; gap:10px; padding:0 12px 13px; color:#d7c6a7; }
.twilight-object-creature img { width:45px; max-height:72px; height:auto; object-fit:contain; }
.twilight-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 26px; }
.twilight-table-wrap { max-width:100%; overflow-x:auto; margin:10px 0 14px; }
.twilight-table-wrap::before { display:none; }
.twilight-section table { border-collapse:collapse; width:100%; min-width:430px; background:#0b120f; }
.twilight-section th,.twilight-section td { padding:10px 12px; border:1px solid #45402f; text-align:left; vertical-align:top; }
.twilight-section th { color:#ead2a5; background:#1c2119; }
.twilight-section th img,.twilight-section td img { width:38px; max-height:38px; height:auto; object-fit:contain; vertical-align:middle; margin-right:7px; }
.twilight-portraits { display:flex; flex-wrap:wrap; gap:8px; }
.twilight-portraits figure { flex:1 1 120px; margin:0; padding:10px; border:1px solid #45402f; background:#0b120f; text-align:center; }
.twilight-portraits img { display:block; width:auto; max-width:100%; height:82px; object-fit:contain; margin:0 auto 7px; }
.twilight-portraits figcaption { color:#e2cfb1; font-size:14px; }
.twilight-portraits figcaption small { display:block; margin-top:5px; color:#c9bea9; line-height:1.35; }
.twilight-monster-list { margin:12px 0 2px; }
.twilight-resources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.twilight-resource { display:flex; gap:12px; align-items:flex-start; padding:13px; border:1px solid #45402f; background:#0b120f; }
.twilight-resource img { flex:0 0 52px; width:52px; max-height:65px; height:auto; object-fit:contain; }
.twilight-resource h3 { margin:0 0 5px; font-size:17px; }
.twilight-resource p { margin:5px 0; }
.twilight-spell-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.twilight-spell-groups section { min-width:0; padding:12px 14px; border:1px solid #45402f; background:#0b120f; }
.twilight-spell-groups h4 { margin:0 0 10px; }
.twilight-spell-groups ul { margin:0; padding:0; list-style:none; }
.twilight-spell-groups li { display:flex; align-items:center; gap:9px; margin:8px 0; }
.twilight-spell-groups li img { flex:0 0 34px; width:34px; height:34px; object-fit:contain; }
.twilight-section>details { padding:11px 13px; background:#0b120f; border:1px solid #45402f; }
.twilight-section>details>summary { color:#ead1a2; cursor:pointer; font-weight:600; }
@media(max-width:700px) {
  .twilight-table-wrap::before { content:'Прокрутите таблицу вбок →'; display:block; position:sticky; left:0; padding:0 0 7px; color:#cbb58d; font-size:12px; }
  .twilight-section { padding:16px; }
  .twilight-heading { margin-top:18px; }
  .twilight-columns,.twilight-steps,.twilight-objects,.twilight-resources,.twilight-spell-groups { grid-template-columns:minmax(0,1fr); }
  .twilight-summary { display:block; }
  .twilight-summary-image { display:block; max-width:100%; margin:12px auto; }
  .twilight-section h2 { font-size:22px; }
}