/* ==========================================================================
   Shortcut Games Station — ONE stylesheet for every guide page.

   The design is the Parasite Eve layout, repainted in the channel colours and
   extended to cover every block type the other guides use (Dark Cloud 2's
   floors and weapon trees, Devil May Cry 2's missions, Heartworm's possums and
   endings, Baba Is You's level lists…). Every guide links this file and none of
   them carry their own <style> block any more, so they all look the same.

   Colours: red #ec1c24 (headings, numbers, structure)
            blue #9ac9ee (names, items, puzzles — "information")
            green #22b04c (done / checklist)
   ========================================================================== */

:root{
  --red:#ec1c24;
  --red-soft:#ff6a70;
  --blue:#9ac9ee;
  --green:#22b04c;
  --amber:#ffb04a;

  --bg:#000;
  --panel:#0e0e13;
  --card:#15151b;
  --card-2:#1b1b22;
  --line:#26262f;
  --line-soft:#1e1e26;

  --text:#e6e6ec;
  --dim:#9a9aa8;
  --faint:#6a6a78;

  --radius:10px;
  --display:Impact,Haettenschweiler,'Arial Narrow Bold','Arial Black',
            'Roboto Condensed','DejaVu Sans Condensed',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.75;
}
.container{max-width:1100px;margin:0 auto;padding:20px;}
img{max-width:100%;}
a{color:var(--blue);}

/* =============================================================== the hero */
.hero{
  position:relative;overflow:hidden;
  text-align:center;padding:56px 20px 34px;
  /* each page sets its own background-image inline — the game's cover art.
     Declared in the HTML so the path resolves against the page, not this file. */
  background-color:#000;
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
  border-bottom:2px solid rgba(236,28,36,.55);
}
/* shading so the title, subtitle and stat boxes stay readable over any art */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.28) 0%,rgba(0,0,0,.58) 68%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 34%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.94) 100%);
}
.hero>*{position:relative;z-index:1;}
/* the small box-art thumbnail some guides carry is redundant now */
.hero .cover-img{display:none;}
.hero h1{
  font-family:var(--display);font-weight:700;font-synthesis-weight:none;
  font-size:clamp(2rem,6vw,3.2rem);color:#fff;letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 3px 26px rgba(0,0,0,.95),0 0 60px rgba(0,0,0,.9),
              0 0 44px rgba(236,28,36,.35);
}
.hero .subtitle{
  color:#ff8b90;font-size:1.05em;letter-spacing:2px;
  text-transform:uppercase;margin-top:10px;
  text-shadow:0 2px 14px rgba(0,0,0,.95);
}
.hero .stats,.stats{
  display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap;
}
.stat-box{
  background:rgba(10,10,14,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(236,28,36,.45);
  border-radius:9px;padding:10px 18px;text-align:center;min-width:100px;
}
.stat-box .num{color:var(--red);font-size:1.55em;font-weight:bold;display:block;}
.stat-box .label{color:#a5a5b2;font-size:.74em;text-transform:uppercase;letter-spacing:.5px;}
/* some guides use .stat instead of .stat-box — same look either way */
.stat{
  background:rgba(10,10,14,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(236,28,36,.45);
  border-radius:9px;padding:10px 18px;text-align:center;min-width:100px;
}
.stat .num{color:var(--red);font-size:1.55em;font-weight:bold;display:block;}
.stat .label,.stat .sub{color:#a5a5b2;font-size:.74em;text-transform:uppercase;letter-spacing:.5px;}

/* ============================================================== tab strip */
.tabs{
  position:sticky;top:60px;z-index:100;
  background:rgba(8,8,11,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);border-top:1px solid rgba(236,28,36,.5);
  display:flex;justify-content:center;flex-wrap:wrap;gap:5px;padding:9px 8px;
}
.tab-btn{
  background:var(--card);color:var(--dim);border:1px solid var(--line);
  padding:9px 20px;font-size:.86em;cursor:pointer;border-radius:7px;
  transition:.25s;font-family:var(--display);font-weight:700;
  font-synthesis-weight:none;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.tab-btn:hover{color:#fff;border-color:rgba(236,28,36,.6);background:var(--card-2);}
.tab-btn.active{background:var(--red);color:#fff;border-color:var(--red);}

/* ================================================================== pages */
.page{display:none;max-width:1100px;margin:0 auto;padding:22px 20px;}
.page.active{display:block;}
/* guides that already wrap their pages in .container don't need it twice */
.container .page{max-width:none;padding:20px 0;}
.back-btn{text-align:center;padding:10px;}
.back-btn a{color:var(--red);text-decoration:none;font-size:.9em;}

/* =============================================================== sections */
.section{
  margin:28px 0;padding:24px;background:var(--panel);
  border-radius:14px;border:1px solid var(--line-soft);
}
.section h2{
  font-family:var(--display);font-weight:700;font-synthesis-weight:none;
  color:var(--red);font-size:1.7em;margin-bottom:15px;padding-bottom:8px;
  border-bottom:2px solid rgba(236,28,36,.6);
  text-transform:uppercase;letter-spacing:.05em;
}
.section h3{
  color:var(--blue);font-size:1.22em;margin:22px 0 12px;
  padding-left:12px;border-left:4px solid var(--red);
}
.section h4{color:#cfcfd8;font-size:1.06em;margin:16px 0 8px;}
.section p{margin-bottom:10px;color:#d4d4dc;}
.section ul,.section ol{margin-left:22px;margin-bottom:10px;}
.section li{margin-bottom:6px;color:#d4d4dc;}
.section strong{color:#fff;}
.subtitle{color:var(--red);}

/* ================================================== steps (any flavour) */
.step,.walkthrough-step{
  display:flex;gap:12px;margin:12px 0;padding:13px 14px;
  background:var(--card);border-radius:9px;border-left:3px solid var(--line);
  align-items:flex-start;flex-wrap:wrap;transition:border-color .2s;
}
.step:hover,.walkthrough-step:hover{border-left-color:var(--red);}
.step-num{
  background:var(--red);color:#fff;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:.85em;flex-shrink:0;
}
.step-text{flex:1;min-width:200px;color:#dcdce4;}
.step-img{flex:0 0 280px;max-width:280px;margin-top:8px;}
.step-img img{width:100%;border:1px solid var(--line);border-radius:9px;display:block;}
.step-img img:hover{border-color:rgba(236,28,36,.6);}
.caption,.img-caption,.step-img .caption{
  font-size:.78em;color:var(--faint);text-align:center;
  margin-top:5px;font-style:italic;line-height:1.5;
}
.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:12px 0;}
.img-grid .step-img{flex:none;max-width:100%;margin:0;}

/* ==================================================== tips and warnings */
.tip{
  background:rgba(154,201,238,.06);border-left:3px solid var(--blue);
  padding:12px 16px;margin:10px 0;border-radius:6px;color:#cfd9e2;
}
.tip strong{color:var(--blue);}
.warning{
  background:rgba(255,176,74,.06);border-left:3px solid var(--amber);
  padding:12px 16px;margin:10px 0;border-radius:6px;color:#ded4c2;
}
.warning strong{color:var(--amber);}
.missable{color:var(--amber);}

/* ======================================================== puzzle blocks */
.puzzle-box{
  background:linear-gradient(180deg,rgba(154,201,238,.05),transparent);
  border:1px solid rgba(154,201,238,.45);border-radius:9px;
  padding:15px 16px;margin:12px 0;
}
.puzzle-title{color:var(--blue);font-weight:bold;margin-bottom:6px;font-size:1.04em;}
.puzzle-answer,.puzzle-solution{color:#dcdce4;}
.puzzle-answer strong,.puzzle-solution strong{color:#fff;}

/* ===================================================== collectible cards */
.collectible-box,.collectible{
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;margin:8px 0;
}
.collectible{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;}
.collectible-content{flex:1;min-width:220px;}
.collectible-img{flex:0 0 260px;max-width:260px;}
.collectible-img img{width:100%;border:1px solid var(--line);border-radius:8px;display:block;}
.collectible-title{color:var(--blue);font-weight:bold;margin-bottom:4px;line-height:1.5;}
.collectible-title strong{color:#fff;}
.collectible-desc,.collectible-location{color:var(--dim);font-size:.95em;}

/* Devil May Cry 2 tags each collectible card by type — tint the edge */
.collectible.fragment,.collectible[class*="fragment"]{border-left:3px solid var(--blue);}
.collectible.heart{border-left:3px solid var(--green);}
.collectible.secret,.collectible[class*="secret"]{border-left:3px solid var(--amber);}
.collectible.weapon{border-left:3px solid var(--red);}
.collectible.full{border-left:3px solid var(--green);}
.collectible.none{border-left:3px solid var(--line);}

/* ============================================================ boss cards */
.boss-box{
  background:linear-gradient(180deg,rgba(236,28,36,.07),transparent);
  border:1px solid rgba(236,28,36,.5);border-radius:var(--radius);
  padding:15px 16px;margin:14px 0;
}
.boss-box h3{border-left:0;padding-left:0;color:var(--red-soft);}
.boss-title{color:var(--red-soft);font-size:1.12em;font-weight:bold;margin-bottom:8px;line-height:1.45;}
.boss-strategy{color:#dcdce4;font-size:.95em;}
.boss-strategy strong{color:#fff;}
.boss-phase{
  margin-top:8px;padding-left:12px;border-left:2px solid rgba(236,28,36,.35);
  color:#c8c8d4;font-size:.94em;
}

/* ======================================================== ending cards */
.ending-card{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--faint);
  border-radius:9px;padding:14px 16px;margin:10px 0;
}
.ending-card h3{border-left:0;padding-left:0;margin:0 0 6px;color:#fff;font-size:1.1em;}
.ending-card.good{border-left-color:var(--green);}
.ending-card.good h3{color:#5ed486;}
.ending-card.bad{border-left-color:var(--red);}
.ending-card.bad h3{color:var(--red-soft);}

/* ================================================ achievements / possums */
.achievement{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;margin:7px 0;
}
.achievement span{color:var(--green);flex:none;}
.achievement strong{color:#fff;}
.achievement div{color:var(--dim);font-size:.94em;}

.possum-card{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;margin:8px 0;
}
.possum-num{
  background:var(--green);color:#04140a;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:.82em;flex-shrink:0;
}
.possum-card strong{color:#fff;}

/* ==================================== Dark Cloud 2: dungeon floor cards */
.floor-card{
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:13px 15px;margin:9px 0;
}
.floor-header{
  color:var(--blue);font-weight:bold;font-size:1.04em;
  margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--line-soft);
}
.floor-header strong{color:#fff;}
.floor-enemies,.floor-geostone,.floor-medal,.floor-scoop,.floor-time,.floor-notes{
  color:var(--dim);font-size:.92em;margin-top:4px;
}
.floor-enemies strong,.floor-geostone strong,.floor-medal strong,
.floor-scoop strong,.floor-time strong,.floor-notes strong{color:#c9c9d4;}

/* ==================================== Dark Cloud 2: weapon trees & recruits */
.weapon-tree{margin:14px 0;text-align:center;}
.weapon-node{
  display:inline-block;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:11px 14px;
  margin:5px auto;min-width:230px;max-width:100%;
}
.weapon-node-name{color:var(--blue);font-weight:bold;}
.weapon-node-stats{color:var(--dim);font-size:.9em;margin-top:3px;}
.weapon-node-req{color:var(--faint);font-size:.8em;text-transform:uppercase;letter-spacing:.6px;margin-top:4px;}
.weapon-node.tier-start{border-color:rgba(34,176,76,.5);}
.weapon-node.tier-mid{border-color:rgba(154,201,238,.45);}
.weapon-node.tier-ult{border-color:rgba(236,28,36,.55);}
.weapon-arrow{color:var(--red);font-size:1.3em;line-height:1;margin:2px 0;}
.weapon-or{color:var(--faint);font-size:.82em;text-transform:uppercase;letter-spacing:1px;margin:6px 0;}
.weapon-branch{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.weapon-branch-item{flex:1 1 260px;max-width:340px;}
.weapon-entry{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;margin:6px 0;
}
.we-name{color:var(--blue);font-weight:bold;}
.we-meta{color:var(--dim);font-size:.93em;}
.ab-badge{
  display:inline-block;background:rgba(154,201,238,.14);color:var(--blue);
  border-radius:5px;padding:1px 7px;font-size:.74em;font-weight:bold;margin-right:5px;
}

.recruit-box{
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:13px 15px;margin:9px 0;
}
.recruit-name{
  color:var(--blue);font-weight:bold;font-size:1.05em;margin-bottom:6px;
  padding-bottom:5px;border-bottom:1px solid var(--line-soft);
}
.recruit-info{color:var(--dim);font-size:.92em;margin-top:3px;}
.recruit-info strong{color:#c9c9d4;}

.photo-scoop{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;margin:6px 0;
}
.photo-name{color:var(--blue);font-weight:bold;}
.photo-loc{color:var(--dim);font-size:.92em;}
.cat{
  display:inline-block;background:rgba(236,28,36,.14);color:var(--red-soft);
  border-radius:5px;padding:1px 8px;font-size:.74em;font-weight:bold;
  text-transform:uppercase;letter-spacing:.5px;margin-right:6px;
}

/* ======================================== Devil May Cry 2: mission cards */
.mission{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin:14px 0;overflow:hidden;
}
.mission-header{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:12px 15px;background:var(--card-2);border-bottom:1px solid var(--line);
}
.mission-header.dante{border-bottom-color:rgba(236,28,36,.45);}
.mission-header.lucia{border-bottom-color:rgba(154,201,238,.45);}
.mission-num{
  background:var(--red);color:#fff;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:.85em;flex:none;
}
.mission-header.lucia .mission-num{background:var(--blue);color:#04121c;}
.mission-title{color:#fff;font-weight:bold;font-size:1.05em;flex:1;min-width:180px;}
.mission-badge{
  border-radius:5px;padding:2px 9px;font-size:.74em;font-weight:bold;text-transform:uppercase;
  background:rgba(236,28,36,.16);color:var(--red-soft);
}
.mission-badge.lucia{background:rgba(154,201,238,.16);color:var(--blue);}
.item-count{color:var(--faint);font-size:.8em;}
.mission-body{padding:14px 15px;}
.char-header{
  color:var(--red);font-family:var(--display);font-weight:700;font-synthesis-weight:none;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.3em;margin:22px 0 10px;
}
.walkthrough-thumb{
  width:100%;max-width:420px;border:1px solid var(--line);border-radius:9px;display:block;margin-bottom:10px;
}
.walkthrough-link{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:8px;font-weight:600;font-size:.9em;transition:.2s;
}
.walkthrough-link:hover{background:#ff2f38;color:#fff;}
.summary{color:var(--dim);font-size:.94em;margin-bottom:10px;}

/* ====================================================== Baba Is You lists */
.level-list{
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:13px 16px;margin:10px 0;
}
.level-list>strong{color:var(--blue) !important;display:block;margin-bottom:6px;}
.level-list ul{margin-left:20px;}
.level-list li{color:var(--dim);font-size:.93em;margin-bottom:4px;}
.word{
  display:inline-block;background:rgba(154,201,238,.14);color:var(--blue);
  border-radius:4px;padding:1px 7px;font-size:.86em;font-weight:bold;
  letter-spacing:.5px;margin:0 2px;
}

/* ================================================================ tables */
.word-table,.stat-table,.photo-table,.weapon-summary-table{
  width:100%;border-collapse:collapse;margin:12px 0;font-size:.85em;display:block;overflow-x:auto;
}
.word-table th,.stat-table th,.photo-table th,.weapon-summary-table th{
  background:var(--red);color:#fff;padding:8px;text-align:left;white-space:nowrap;
}
.word-table td,.stat-table td,.photo-table td,.weapon-summary-table td{
  background:var(--card);padding:8px;border:1px solid var(--line);vertical-align:top;color:#d4d4dc;
}
.word-table tr:hover td,.stat-table tr:hover td,
.photo-table tr:hover td,.weapon-summary-table tr:hover td{background:var(--card-2);}
.stat-table td.name{color:var(--blue);font-weight:bold;white-space:nowrap;}
.stat-table td.loc{color:var(--dim);}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.88em;}
table th{background:var(--red);color:#fff;padding:8px;text-align:left;}
table td{background:var(--card);padding:8px;border:1px solid var(--line);color:#d4d4dc;}

/* ================================================================ badges */
.badge{
  display:inline-block;padding:2px 8px;border-radius:5px;
  font-size:.73em;font-weight:bold;letter-spacing:.4px;margin-right:6px;
  text-transform:uppercase;vertical-align:middle;
}
.badge-item,.badge-key,.badge-scoop,.badge-fragment,.badge-extra{
  background:rgba(154,201,238,.16);color:var(--blue);
}
.badge-boss,.badge-weapon{background:rgba(236,28,36,.18);color:var(--red-soft);}
.badge-miss,.badge-secret,.badge-seal{background:rgba(255,176,74,.18);color:var(--amber);}
.badge-medal,.badge-heart,.badge-full{background:rgba(34,176,76,.18);color:#4ed37a;}
.badge-none{background:rgba(255,255,255,.07);color:var(--faint);}

/* ============================================================= checklist */
.checklist{list-style:none;margin-left:0;}
.checklist li{
  background:var(--card);border-left:3px solid var(--green);
  padding:10px 14px;margin:6px 0;border-radius:6px;color:#d4d4dc;
}
.checklist li::before{content:"\2610\00a0";color:var(--green);font-weight:bold;}

/* ============================================================= day cards */
.day-card{
  background:var(--card);border:1px solid rgba(236,28,36,.4);
  border-radius:var(--radius);padding:16px 20px;margin:15px 0;
}
.day-card .day-header{
  color:var(--red);font-size:1.28em;font-weight:bold;margin-bottom:8px;
  border-bottom:1px solid var(--line);padding-bottom:6px;
}
.day-card .day-sub{color:var(--blue);font-size:.95em;margin-bottom:10px;}

/* ====================================================== chapter dividers */
.chapter-divider{
  display:flex;align-items:center;gap:14px;margin:30px 0 18px;
  color:var(--red);font-family:var(--display);font-weight:700;
  font-synthesis-weight:none;text-transform:uppercase;letter-spacing:.06em;font-size:1.2em;
}
.chapter-divider::after{content:"";flex:1;height:1px;background:rgba(236,28,36,.35);}

/* ============================================================ navigation */
.nav-buttons{
  display:flex;justify-content:space-between;gap:12px;
  margin:22px 0;padding:15px 0;border-top:1px solid var(--line-soft);
}
.nav-btn{
  background:var(--card);color:var(--red);border:1px solid rgba(236,28,36,.5);
  padding:10px 22px;font-size:.88em;cursor:pointer;border-radius:8px;
  transition:.25s;font-family:inherit;
}
.nav-btn:hover{background:var(--red);color:#fff;border-color:var(--red);}
.nav-btn.disabled{opacity:.3;cursor:default;pointer-events:none;}

/* ------- the guide's own footer is replaced by the site footer; hide it --- */
.container>.footer,body>.footer:not(.sgs-foot){display:none;}

/* =========================================================== responsive */
@media (max-width:768px){
  .container{padding:14px;}
  .section{padding:17px;}
  .section h2{font-size:1.35em;}
  .step-img,.collectible-img{flex:0 0 100%;max-width:100%;}
  .hero .stats{gap:6px;}
  .stat-box{min-width:82px;padding:7px 11px;}
  .stat-box .num{font-size:1.25em;}
  .tab-btn{padding:8px 13px;font-size:.78em;}
  .tabs{top:54px;}
  .word-table,.stat-table,.photo-table{font-size:.75em;}
  .mission-header{padding:10px 12px;}
  .weapon-node{min-width:0;width:100%;}
}

/* ==========================================================================
   Resident Evil 4 — collectibles with a map screenshot beside them,
   collapsible chapters and the chapter jump bar.
   ========================================================================== */
.collectible-with-map{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:14px;align-items:stretch;margin:12px 0;
}
.collectible-with-map .collectible-side{min-width:0;display:flex;}
.collectible-with-map .collectible-box{margin:0;flex:1;display:flex;flex-direction:column;justify-content:center;}
.collectible-map{
  border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:var(--card);line-height:0;
}
.collectible-map img{
  width:100%;height:auto;display:block;cursor:zoom-in;
  transition:transform .35s,filter .35s;
}
.collectible-map img:hover{transform:scale(1.03);filter:brightness(1.08);}
@media (max-width:820px){
  .collectible-with-map{grid-template-columns:1fr;}
}

/* ---- collapsible chapters */
.chapter-toggle{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;
  margin:16px 0 0;padding:13px 16px;
  background:linear-gradient(90deg,rgba(236,28,36,.12),rgba(236,28,36,.02));
  border:1px solid rgba(236,28,36,.4);border-radius:10px;
  color:#fff;font-weight:700;letter-spacing:.4px;
  transition:border-color .2s,background .2s;
}
.chapter-toggle:hover{
  border-color:var(--red);
  background:linear-gradient(90deg,rgba(236,28,36,.2),rgba(236,28,36,.05));
}
.chapter-toggle .ch-badge{
  background:var(--red);color:#fff;border-radius:6px;
  padding:3px 10px;font-size:.78em;letter-spacing:1px;text-transform:uppercase;flex:none;
}
.chapter-toggle .ch-region{color:var(--blue);font-weight:500;font-size:.92em;}
.chapter-toggle .toggle-icon{
  margin-left:auto;color:var(--red);font-size:1.1em;transition:transform .25s;flex:none;
}
.chapter-content{display:none;padding:4px 0 8px;}
.chapter-content.open{display:block;}

/* ---- chapter jump bar */
.chapter-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px;
  padding:14px;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:12px;
}
.ch-nav-link{
  display:inline-block;padding:6px 12px;border-radius:7px;
  background:var(--card);border:1px solid var(--line);
  color:var(--blue);text-decoration:none;font-size:.85em;transition:.2s;
}
.ch-nav-link:hover{border-color:var(--red);color:#fff;background:var(--card-2);}
.ch-nav-current{border-color:var(--red);color:#fff;}

/* ---- odds and ends the RE4 export uses */
.page-inner{max-width:1100px;margin:0 auto;}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.word-table td.cat{color:var(--blue);font-weight:bold;white-space:nowrap;}
.danger{
  background:rgba(236,28,36,.09);border-left:4px solid var(--red);
  border-radius:0 9px 9px 0;padding:13px 15px;margin:12px 0;color:#e8d5d7;
}
.danger strong{color:var(--red-soft);}
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0;}
.map-item{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card);}
.map-item img{width:100%;height:auto;display:block;cursor:zoom-in;}
.map-caption{padding:8px 10px;color:var(--dim);font-size:.82em;}
.weapon-cat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0;}
.weapon-cat-title{color:var(--red);font-weight:bold;margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;}
.badge-request{background:rgba(255,176,74,.16);color:var(--amber);border:1px solid rgba(255,176,74,.5);}
.badge-castellan{background:rgba(154,201,238,.14);color:var(--blue);border:1px solid rgba(154,201,238,.5);}
.badge-trophy{background:rgba(34,176,76,.14);color:var(--green);border:1px solid rgba(34,176,76,.5);}
.badge-map{background:rgba(236,28,36,.14);color:var(--red-soft);border:1px solid rgba(236,28,36,.5);}
/* if the map screenshot was removed with image-manager, let the text reclaim the row */
.collectible-with-map:not(:has(.collectible-map)){grid-template-columns:1fr;}