/* ==========================================================================
   Shortcut Games Station — shared site chrome
   Loaded on every page AFTER each page's own <style> block.
   ========================================================================== */

:root{
  /* ---- channel palette, taken straight from the Shortcut Games Station logo */
  --sgs-red:#ec1c24;
  --sgs-blue:#9ac9ee;
  --sgs-green:#22b04c;

  --sgs-bg:#000;
  --sgs-panel:#0d0d11;
  --sgs-panel-2:#14141a;
  --sgs-border:#23232e;
  --sgs-red-dim:#a01218;
  --sgs-text:#f0f0f0;
  --sgs-dim:#8f8f9c;
  --sgs-faint:#5e5e6b;
  --sgs-yt:#ec1c24;
  --sgs-max:1100px;

  /* the logo's face: a heavy condensed sans. Impact ships with Windows and
     macOS; the rest of the stack covers Android, Linux and iOS. */
  --sgs-display:Impact,Haettenschweiler,'Arial Narrow Bold','Arial Black',
                'Roboto Condensed','Franklin Gothic Bold','DejaVu Sans Condensed',sans-serif;

  /* the guide pages define these inline; re-point them at the channel colours */
  --accent-red:#ec1c24;
  --accent-red-dim:#d81f27;
  --gold:#9ac9ee;
  --blue:#9ac9ee;
  --bg:#000;
}

html{scroll-behavior:smooth;}
body{padding-top:0;}
img{max-width:100%;}

/* width/height attributes are on every image now (they stop layout shift while
   loading) — this keeps the aspect ratio correct when CSS resizes them. */
.step-img img,.img-grid img{height:auto !important;}

/* --------------------------------------------------------- top navigation */
.sgs-nav{
  position:sticky;top:0;z-index:900;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sgs-border);
}
.sgs-nav-in{
  max-width:var(--sgs-max);margin:0 auto;padding:0 20px;
  height:60px;display:flex;align-items:center;gap:18px;
}
.sgs-brand{
  display:flex;align-items:center;text-decoration:none;white-space:nowrap;
}
.sgs-logo{
  font-family:var(--sgs-display);
  /* Impact has a single weight — font-synthesis-weight:none stops the browser
     faking a bolder one, while the fallbacks still use their real bold. */
  font-weight:700;font-synthesis-weight:none;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1.32em;line-height:1;
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
.sgs-logo b{font-weight:inherit;}
.sgs-logo .lr{color:var(--sgs-red);}
.sgs-logo .lb{color:var(--sgs-blue);}
.sgs-logo .lg{color:var(--sgs-green);}
.sgs-brand:hover .sgs-logo{filter:brightness(1.12);}
.sgs-links{display:flex;align-items:center;gap:4px;margin-left:auto;}
.sgs-links a{
  color:var(--sgs-dim);text-decoration:none;font-size:.85em;
  padding:8px 12px;border-radius:8px;transition:.2s;letter-spacing:.5px;
}
.sgs-links a:hover{color:#fff;background:rgba(255,255,255,.05);}
.sgs-links a.sgs-active{color:#fff;}
.sgs-links a.sgs-yt-btn{
  color:#fff;background:var(--sgs-yt);font-weight:600;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
}
.sgs-links a.sgs-yt-btn:hover{background:#ff2f38;box-shadow:0 0 22px rgba(236,28,36,.4);}
.sgs-links a.sgs-yt-btn svg{width:16px;height:16px;fill:#fff;}

@media (max-width:720px){
  .sgs-nav-in{height:54px;gap:8px;padding:0 13px;}
  .sgs-logo{font-size:1.02em;letter-spacing:.03em;}
  .sgs-links{gap:2px;}
  .sgs-links a{padding:7px 9px;font-size:.76em;}
  .sgs-links a.sgs-yt-btn{padding:8px 10px;}
  .sgs-hide-sm{display:none;}
}
@media (max-width:400px){
  .sgs-logo{font-size:.86em;}
}

/* ------------------------------------------------------------ video cards */
.sgs-video{
  margin:14px 0 4px;
  max-width:640px;
  border:1px solid rgba(236,28,36,.28);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(236,28,36,.07),rgba(236,28,36,.02));
  overflow:hidden;
}
.sgs-video-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;font-size:.74em;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:#ff6a70;
  border-bottom:1px solid rgba(236,28,36,.16);
}
.sgs-video-head svg{width:15px;height:15px;fill:#ec1c24;flex:none;}
.sgs-video-head .sgs-vtitle{
  color:var(--sgs-dim);font-weight:500;letter-spacing:.3px;
  text-transform:none;font-size:1.12em;margin-left:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sgs-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;cursor:pointer;display:block;border:0;padding:0;
}
.sgs-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.82;transition:opacity .3s,transform .5s;
}
.sgs-frame:hover img{opacity:1;transform:scale(1.02);}
.sgs-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.sgs-play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
.sgs-play i{
  width:64px;height:45px;border-radius:12px;background:rgba(0,0,0,.7);
  display:grid;place-items:center;transition:.25s;
  box-shadow:0 6px 26px rgba(0,0,0,.6);
}
.sgs-play i::after{
  content:'';border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #fff;margin-left:4px;
}
.sgs-frame:hover .sgs-play i{background:var(--sgs-yt);transform:scale(1.08);}
.sgs-video-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 14px;font-size:.78em;
}
.sgs-video-foot a{color:#ff6a70;text-decoration:none;font-weight:600;}
.sgs-video-foot a:hover{text-decoration:underline;}
.sgs-video-foot .sgs-at{color:var(--sgs-faint);}

/* ------------------------------- one video covering a group of linked steps */
.sgs-group-label{
  display:flex;align-items:center;gap:8px;
  margin:18px 0 -2px;padding:7px 12px;
  font-size:.72em;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#ff6a70;background:rgba(236,28,36,.06);
  border:1px solid rgba(236,28,36,.2);border-bottom:0;
  border-radius:10px 10px 0 0;width:fit-content;max-width:100%;
}
.sgs-group-label::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#ec1c24;flex:none;
}
.sgs-grouped{
  border-left:2px solid rgba(236,28,36,.35) !important;
  padding-left:14px !important;
  border-radius:0 10px 10px 0 !important;
  background:linear-gradient(90deg,rgba(236,28,36,.05),transparent 55%);
}
.sgs-group-first{border-top-left-radius:0 !important;}
.sgs-video.sgs-video-group{
  margin-left:14px;
  border-color:rgba(236,28,36,.4);
}

/* ------------------------------------------------ homepage search + extras */
.sgs-search-wrap{max-width:560px;margin:0 auto 34px;position:relative;}
.sgs-search{
  width:100%;padding:14px 18px 14px 46px;border-radius:12px;
  background:var(--sgs-panel);border:1px solid var(--sgs-border);
  color:var(--sgs-text);font-size:1em;font-family:inherit;outline:none;transition:.25s;
}
.sgs-search:focus{border-color:var(--sgs-red-dim);box-shadow:0 0 0 3px rgba(236,28,36,.12);}
.sgs-search::placeholder{color:var(--sgs-faint);}
.sgs-search-wrap::before{
  content:'';position:absolute;left:17px;top:50%;width:15px;height:15px;
  transform:translateY(-50%);border:2px solid var(--sgs-faint);border-radius:50%;
}
.sgs-search-wrap::after{
  content:'';position:absolute;left:29px;top:60%;width:7px;height:2px;
  background:var(--sgs-faint);transform:rotate(45deg);
}
.sgs-empty{text-align:center;color:var(--sgs-faint);padding:40px 0;display:none;}

.sgs-cta{
  max-width:var(--sgs-max);margin:0 auto 50px;padding:26px 24px;
  border:1px solid rgba(236,28,36,.22);border-radius:16px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(236,28,36,.09),transparent 70%),var(--sgs-panel);
}
.sgs-cta h3{color:#fff;font-size:1.25em;margin-bottom:8px;letter-spacing:.5px;}
.sgs-cta p{color:var(--sgs-dim);font-size:.92em;margin-bottom:18px;}
.sgs-cta a{
  display:inline-flex;align-items:center;gap:9px;background:var(--sgs-yt);color:#fff;
  text-decoration:none;padding:12px 24px;border-radius:10px;font-weight:700;
  letter-spacing:.6px;transition:.25s;
}
.sgs-cta a:hover{background:#ff2f38;box-shadow:0 0 30px rgba(236,28,36,.4);transform:translateY(-2px);}
.sgs-cta a svg{width:20px;height:20px;fill:#fff;}

/* ------------------------------------------------------------- site footer */
.sgs-foot{
  border-top:1px solid var(--sgs-border);margin-top:40px;
  padding:34px 20px;text-align:center;color:var(--sgs-faint);font-size:.84em;
}
.sgs-foot a{color:var(--sgs-dim);text-decoration:none;}
.sgs-foot a:hover{color:var(--sgs-red);}
.sgs-foot .sgs-foot-links{display:flex;gap:18px;justify-content:center;margin-bottom:12px;flex-wrap:wrap;}

/* ----------------------------------------------------------- back-to-top */
.sgs-top{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--sgs-border);
  background:rgba(13,13,17,.92);color:var(--sgs-dim);cursor:pointer;
  display:grid;place-items:center;font-size:17px;
  opacity:0;pointer-events:none;transition:.3s;backdrop-filter:blur(8px);
}
.sgs-top.show{opacity:1;pointer-events:auto;}
.sgs-top:hover{color:#fff;border-color:var(--sgs-red-dim);}

/* -------------------------------------------------------------- utilities */
.sgs-anchor{scroll-margin-top:130px;}
[hidden]{display:none !important;}


/* ------------------------------------------------- channel type & accents */
/* only the pieces this stylesheet adds get the channel display face — the
   guide pages keep the type Saud set in his own export (Segoe UI for the body
   and the tab bar, Georgia for the game title). */
.sgs-cta h3,.card-title h2,.sgs-hero-logo{
  font-family:var(--sgs-display) !important;
  font-weight:700 !important;
  font-synthesis-weight:none;
  letter-spacing:.05em !important;
}

/* ----------------------------------------------------- sticky guide tabs */
/* the exports already set .tabs{position:sticky;top:0}, but the channel nav
   is also pinned at top:0 with a higher z-index, so the tab bar slid under it
   and disappeared. Offset it by the nav's height instead. */
.tabs{top:61px !important;z-index:800 !important;}
@media (max-width:720px){
  /* on a phone a wrapped tab bar can eat four rows of screen, which defeats
     the point of pinning it — keep it to one row you swipe sideways */
  .tabs{
    top:55px !important;
    flex-wrap:nowrap !important;justify-content:flex-start !important;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tabs .tab-btn{flex:0 0 auto;white-space:nowrap;}
}

/* homepage: the real logo, as vector art — sharp at any size, no font needed */
.sgs-hero-img{
  display:block;width:min(560px,86vw);height:auto;margin:0 auto;
  filter:drop-shadow(0 0 60px rgba(236,28,36,.16));
}

/* kept as a CSS fallback for anywhere the SVG isn't used */
.sgs-hero-logo{
  display:inline-block;text-align:left;
  text-transform:uppercase;line-height:.94;
  font-size:clamp(2.6rem,8.5vw,5.4rem);
  color:#fff;margin-bottom:6px;
}
.sgs-hero-logo span{display:block;}
.sgs-hero-logo .l2{padding-left:.36em;}
.sgs-hero-logo .l3{padding-left:.18em;}
.sgs-hero-logo b{font-weight:inherit;}
.sgs-hero-logo .lr{color:var(--sgs-red);}
.sgs-hero-logo .lb{color:var(--sgs-blue);}
.sgs-hero-logo .lg{color:var(--sgs-green);}

/* the three channel colours as a thin rule — used under the hero */
.sgs-rule{
  height:5px;width:170px;margin:26px auto 4px;border-radius:3px;
  background:linear-gradient(90deg,var(--sgs-red) 0 33.3%,
                                    var(--sgs-blue) 33.3% 66.6%,
                                    var(--sgs-green) 66.6% 100%);
}

/* secondary colours earn their keep: blue = information, green = done */
.tip{border-left-color:var(--sgs-blue) !important;}
.tip strong{color:var(--sgs-blue) !important;}
.puzzle-title{color:var(--sgs-blue) !important;}
.stat-pill .num,.stat-box .num{color:var(--sgs-red) !important;}
.sgs-has-video .step-num{background:var(--sgs-green) !important;}

/* a branded tile stands in for guides that ship no screenshots */
.card-image-plain img{object-fit:cover;opacity:.9;}
.card-image-plain::after{height:80% !important;}
.card-image-plain .card-title h2{text-shadow:0 4px 26px #000,0 0 60px #000;}

/* ------------------------------------------------- "more guides" strip */
.sgs-more{
  max-width:var(--sgs-max);margin:44px auto 0;padding:0 20px;
}
.sgs-more h3{
  color:#fff;font-size:1.05em;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--sgs-border);
  font-weight:700;
}
.sgs-more-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;
}
.sgs-more-card{
  display:block;text-decoration:none;border-radius:12px;overflow:hidden;
  background:var(--sgs-panel);border:1px solid var(--sgs-border);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.sgs-more-card:hover{
  transform:translateY(-4px);border-color:var(--sgs-red-dim);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
}
.sgs-more-card .sgs-more-img{
  position:relative;height:104px;overflow:hidden;background:#000;line-height:0;
}
.sgs-more-card img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:.35s;
}
.sgs-more-card:hover img{opacity:1;transform:scale(1.05);}
.sgs-more-card .sgs-more-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--sgs-panel) 2%,transparent 65%);
}
.sgs-more-card b{
  display:block;padding:10px 12px 4px;color:#fff;font-size:.92em;line-height:1.3;
}
.sgs-more-card span{
  display:block;padding:0 12px 12px;color:var(--sgs-faint);font-size:.76em;
  letter-spacing:.4px;text-transform:uppercase;
}
@media (max-width:520px){
  .sgs-more-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .sgs-more-card .sgs-more-img{height:84px;}
}

/* --------------------------------------------- homepage cards: the artwork */
/* the Elden Ring tile is the reference: the art fills the whole card, edge to
   edge, with the title over the gradient. The old fixed 280px height forced a
   crop that ate the sides of wide key art (the RE4 logo lost its R), so the
   tile now takes the artwork's own 16:9 shape instead. */
.card-image{
  height:auto !important;aspect-ratio:16/9;
  overflow:hidden;position:relative;isolation:isolate;
}
.card-image img{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:cover !important;object-position:center 42%;
}
.card-image::after{z-index:2;}
.card-image .card-title{z-index:3;}
/* 2:3 posters have no wide framing of their own — sit the crop just under the
   logo so the character stays in shot */
.card-image.card-art-fill img{object-position:center 18%;}
@media (max-width:520px){
  .card-image{aspect-ratio:16/10;}
}

/* --------------------------------------------- homepage cards: the artwork */
/* the Elden Ring tile is the reference: the art fills the whole card, edge to
   edge, with the title over the gradient. The old fixed 280px height forced a
   crop that ate the sides of wide key art (the RE4 logo lost its R), so the
   tile now takes the artwork's own 16:9 shape instead. */
.card-image{
  height:auto !important;aspect-ratio:16/9;
  overflow:hidden;position:relative;isolation:isolate;
}
.card-image img{
  position:relative;z-index:1;
  width:100%;height:100%;
  object-fit:cover !important;object-position:center 42%;
}
.card-image::after{z-index:2;}
.card-image .card-title{z-index:3;}
/* 2:3 posters have no wide framing of their own — sit the crop just under the
   logo so the character stays in shot */
.card-image.card-art-fill img{object-position:center 12%;}
@media (max-width:520px){
  .card-image{aspect-ratio:16/10;}
}

/* ═══════════════════════════════════════════ readability system (site-wide) */
/* Player feedback: "everything is white, it reads as one long list." These rules
   add structure and contrast without touching the export's own palette. */

/* ---- tables --------------------------------------------------------------- */
.sgs-tw{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;
        border-radius:8px;border:1px solid #262626;min-width:0;max-width:100%;}
/* grid and flex children default to min-width:auto, so a wide table inside a
   two-column block would stretch the whole page instead of scrolling. */
.page .cols > *,.page .collectible-with-map > *,.page .step > *{min-width:0;}
.sgs-tw > table{margin:0 !important;min-width:520px;border:0;}
.sgs-hint{display:none;}
.sgs-tw::-webkit-scrollbar{height:8px;}
.sgs-tw::-webkit-scrollbar-track{background:#141414;}
.sgs-tw::-webkit-scrollbar-thumb{background:#3a2226;border-radius:4px;}
.sgs-tw:hover::-webkit-scrollbar-thumb{background:#8b0000;}

.page table th{
  text-transform:uppercase;letter-spacing:.06em;font-size:.8em;
  padding:10px 10px !important;border-bottom:2px solid #c41e3a;
  position:relative;
}
.page table td{padding:10px !important;border-color:#262626 !important;vertical-align:top;}
.page table tr:nth-child(even) td{background:#202020;}
.page table tr:hover td{background:#2b1519;}
/* the key column carries the row — give it the export's own gold. Some of the
   exports only defined .cat for one table class, so normalise it everywhere. */
.page table td.cat{color:#d4af37 !important;font-weight:600;}
.page table.sgs-keycol td:first-child{color:#d4af37;font-weight:600;white-space:normal;}
/* long tables get a row number so you can keep your place in 30 rows of loot */
.page table.sgs-long{counter-reset:sgsrow;}
.page table.sgs-long td:first-child::before{
  counter-increment:sgsrow;content:counter(sgsrow);
  display:inline-block;min-width:1.9em;margin-right:.55em;
  color:#6d6d6d;font-weight:400;font-size:.88em;text-align:right;
}

/* ---- value chips ---------------------------------------------------------- */
.sgs-chip{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:.82em;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  border:1px solid transparent;line-height:1.5;
}
.sgs-legendary{background:rgba(255,167,38,.16);color:#ffb648;border-color:rgba(255,167,38,.4);}
.sgs-epic     {background:rgba(186,104,200,.16);color:#ce93d8;border-color:rgba(186,104,200,.4);}
.sgs-rare     {background:rgba(66,165,245,.16);color:#7bbcf5;border-color:rgba(66,165,245,.4);}
.sgs-common   {background:rgba(255,255,255,.07);color:#a8a8a8;border-color:rgba(255,255,255,.14);}
.sgs-platinum {background:rgba(224,231,255,.16);color:#dfe6ff;border-color:rgba(224,231,255,.4);}
.sgs-gold     {background:rgba(212,175,55,.18);color:#e8c15a;border-color:rgba(212,175,55,.45);}
.sgs-silver   {background:rgba(200,200,210,.14);color:#cfd2da;border-color:rgba(200,200,210,.35);}
.sgs-bronze   {background:rgba(205,127,50,.18);color:#d99a5b;border-color:rgba(205,127,50,.45);}
/* "Yes" here means missable / one-shot — it is the warning, so it is the loud one.
   "No" is the common, safe answer, so it stays quiet and lets the Yes rows pop. */
.sgs-yes      {background:rgba(255,152,0,.18);color:#ffb04d;border-color:rgba(255,152,0,.45);}
.sgs-no       {background:rgba(255,255,255,.05);color:#7d7d7d;border-color:rgba(255,255,255,.10);}
.sgs-easy     {background:rgba(102,187,106,.14);color:#8bd18f;border-color:rgba(102,187,106,.38);}
.sgs-hard     {background:rgba(229,57,53,.18);color:#ff7b73;border-color:rgba(229,57,53,.45);}
.sgs-mid      {background:rgba(255,167,38,.14);color:#ffb648;border-color:rgba(255,167,38,.36);}

/* ---- lists: rows you can scan, not a paragraph wearing bullets ------------- */
.page .section > ul:not(.checklist),.page .summary > ul:not(.checklist),.page .sgs-rows,
.page .section > ol,.page .summary > ol{
  list-style:none;margin:14px 0;padding:0;
  border:1px solid #262626;border-radius:8px;overflow:hidden;
  counter-reset:sgsli;
}
.page .section > ul:not(.checklist) > li,.page .summary > ul:not(.checklist) > li,.page .sgs-rows > li,
.page .section > ol > li,.page .summary > ol > li{
  position:relative;margin:0;padding:11px 14px 11px 34px;
  border-bottom:1px solid #1f1f1f;line-height:1.68;background:#1a1a1a;
}
.page .section > ul:not(.checklist) > li:last-child,.page .summary > ul:not(.checklist) > li:last-child,
.page .sgs-rows > li:last-child,
.page .section > ol > li:last-child,.page .summary > ol > li:last-child{border-bottom:0;}
.page .section > ul:not(.checklist) > li:nth-child(even),.page .summary > ul:not(.checklist) > li:nth-child(even),
.page .sgs-rows > li:nth-child(even),
.page .section > ol > li:nth-child(even),.page .summary > ol > li:nth-child(even){background:#202020;}
.page .section > ul:not(.checklist) > li:hover,.page .summary > ul:not(.checklist) > li:hover,.page .sgs-rows > li:hover,
.page .section > ol > li:hover,.page .summary > ol > li:hover{background:#2b1519;}
.page .section > ul:not(.checklist) > li::before,.page .summary > ul:not(.checklist) > li::before,
.page .sgs-rows > li::before{
  content:"";position:absolute;left:14px;top:1.15em;
  width:6px;height:6px;border-radius:1px;transform:rotate(45deg);background:#c41e3a;
}
/* an ordered list is a sequence — keep its number, but make it a marker you see */
.page .section > ol > li::before,.page .summary > ol > li::before{
  counter-increment:sgsli;content:counter(sgsli);
  position:absolute;left:9px;top:.72em;
  width:20px;height:20px;border-radius:50%;
  background:rgba(196,30,58,.18);border:1px solid rgba(196,30,58,.55);
  color:#e8767f;font-size:.72em;font-weight:700;line-height:19px;text-align:center;
}
/* the lead-in of a bullet is its key — same gold as the tables */
.page .section > ul:not(.checklist) > li > strong:first-child,
.page .summary > ul:not(.checklist) > li > strong:first-child,
.page .sgs-rows > li > strong:first-child,
.page .section > ol > li > strong:first-child,
.page .summary > ol > li > strong:first-child{color:#d4af37;}

/* nested lists stay plain so they read as sub-points */
.page .section > ul:not(.checklist) ul,.page .summary > ul:not(.checklist) ul,.page .section > ol ul{
  list-style:disc;margin:6px 0 0 18px;padding:0;border:0;}
.page .section > ul:not(.checklist) ul > li,.page .summary > ul:not(.checklist) ul > li,.page .section > ol ul > li{
  padding:2px 0;border:0;background:none !important;}
.page .section > ul:not(.checklist) ul > li::before,.page .summary > ul:not(.checklist) ul > li::before,
.page .section > ol ul > li::before{display:none;}
/* the checklist tab keeps its own ☐ marks — the rules above skip it — but it
   still gets the same zebra so you can follow a long tick-list with your eye */
.page .section > ul.checklist > li{padding:8px 10px 8px 30px;}
.page .section > ul.checklist > li:nth-child(even){background:rgba(255,255,255,.028);}
.page .section > ul.checklist > li:hover{background:rgba(196,30,58,.07);}
.page .section > ul.checklist > li:before{left:9px;}

/* ---- body copy: a little more air and contrast ---------------------------- */
.page .section > p{line-height:1.75;}
.page .section p strong{color:#efefef;}
.page .section h3,.page .summary h3{
  background:linear-gradient(90deg,rgba(139,0,0,.18),transparent 60%);
  padding:6px 0 6px 12px;border-radius:0 6px 6px 0;}

@media (max-width:640px){
  .sgs-tw > table{min-width:460px;}
  /* a 4- or 5-column table squeezed into 390px turns every cell into one word
     per line — give it room and tell the player it slides */
  .sgs-tw > table.sgs-c4{min-width:580px;}
  .sgs-tw > table.sgs-c5{min-width:700px;}
  .sgs-hint{
    display:block;margin:12px 0 -4px;font-size:.75em;letter-spacing:.04em;
    text-transform:uppercase;color:#8a8a8a;
  }
  .sgs-hint::after{content:" ⟷";color:#c41e3a;}
  .page table th,.page table td{padding:8px !important;}
  .page .section > ul:not(.checklist) > li,.page .summary > ul:not(.checklist) > li,.page .sgs-rows > li,
  .page .section > ol > li,.page .summary > ol > li{padding:10px 10px 10px 30px;}
  .page table.sgs-long td:first-child::before{min-width:1.5em;margin-right:.4em;}
}

/* ------------------------------------------------------ image zoom (v2) */
/* Player feedback: "why don't the pictures open when I click them?" — they
   never could; the script that runs this was being blocked. Now it opens a
   proper viewer: arrows to move between the shots on the tab, a counter, and a
   second click to blow the picture up to its real size for reading map text. */
.sgs-zoomable{cursor:zoom-in;transition:transform .15s ease,box-shadow .15s ease;}
.sgs-zoomable:hover{transform:scale(1.012);box-shadow:0 8px 26px rgba(0,0,0,.55);}
.sgs-lb{
  position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(5,5,5,.975);backdrop-filter:blur(10px);
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
}
.sgs-lb.open{display:flex;}
.sgs-lb .sgs-lb-stage{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;overflow:auto;
}
.sgs-lb img{
  max-width:min(1500px,95vw);max-height:88vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.8);cursor:zoom-in;
}
.sgs-lb.zoomed .sgs-lb-stage{align-items:flex-start;justify-content:flex-start;}
.sgs-lb.zoomed img{max-width:none;max-height:none;cursor:zoom-out;border-radius:0;}
.sgs-lb .sgs-lb-cap{
  position:absolute;bottom:20px;left:0;right:0;text-align:center;
  color:#c9c9c9;font-size:.9em;padding:0 90px;pointer-events:none;
  text-shadow:0 2px 10px #000;
}
.sgs-lb .sgs-lb-count{
  position:absolute;top:22px;left:24px;color:#9a9a9a;
  font-size:.85em;letter-spacing:.08em;pointer-events:none;
}
.sgs-lb .sgs-lb-x{
  position:absolute;top:14px;right:18px;z-index:2;
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.07);color:#fff;font-size:26px;line-height:1;
  cursor:pointer;transition:background .15s;
}
.sgs-lb .sgs-lb-x:hover{background:rgba(196,30,58,.6);}
.sgs-lb .sgs-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:76px;border:0;border-radius:8px;
  background:rgba(255,255,255,.06);color:#fff;font-size:34px;line-height:1;
  cursor:pointer;transition:background .15s;
}
.sgs-lb .sgs-lb-nav:hover{background:rgba(196,30,58,.6);}
.sgs-lb .sgs-lb-prev{left:14px;}
.sgs-lb .sgs-lb-next{right:14px;}
@media (max-width:640px){
  .sgs-lb{padding:10px;}
  .sgs-lb img{max-width:98vw;max-height:78vh;}
  .sgs-lb .sgs-lb-nav{width:42px;height:60px;font-size:28px;}
  .sgs-lb .sgs-lb-cap{padding:0 12px;bottom:12px;font-size:.82em;}
}

/* ------------------------------------------------- footer: what we're doing */
.sgs-foot .sgs-foot-mission{
  max-width:640px;margin:0 auto 6px;color:#c3c3c3;font-size:1.02em;line-height:1.6;
}
.sgs-foot .sgs-foot-goal{
  color:#e8c15a;font-weight:600;margin-bottom:18px;
}
.sgs-foot .sgs-foot-goal + p{padding-top:14px;border-top:1px solid rgba(255,255,255,.06);}
@media (max-width:640px){.sgs-foot .sgs-foot-mission{font-size:.98em;}}

/* ---------------------------------------------------------------- sgs-card
   A self-contained bordered card. Some exports ship .puzzle-box and some
   don't, so this is site.css's own component and never depends on the
   export's classes. */
.page .sgs-card{
  background:linear-gradient(180deg,rgba(154,201,238,.05),transparent);
  border:1px solid rgba(154,201,238,.38);border-radius:9px;
  padding:15px 16px;margin:12px 0;
}
.page .sgs-card-h{
  color:var(--sgs-blue,#9ac9ee);font-weight:700;margin-bottom:8px;
  font-size:1.02em;letter-spacing:.02em;
}
.page .sgs-card p{margin:7px 0;}
.page .sgs-card p strong{color:#e6e6e6;}
.page .sgs-card > .warning:last-child,
.page .sgs-card > .sgs-note:last-child{margin-bottom:0;}

/* a warning that does not need the export's .warning class */
.page .sgs-note{
  background:rgba(255,176,74,.06);border-left:3px solid #ffb04a;
  padding:11px 15px;margin:10px 0;border-radius:6px;color:#ded4c2;
}
.page .sgs-note strong{color:#ffb04a;}
.page .sgs-note-b{
  background:rgba(154,201,238,.06);border-left:3px solid #9ac9ee;
  padding:11px 15px;margin:10px 0;border-radius:6px;color:#cfd8de;
}
.page .sgs-note-b strong{color:#9ac9ee;}

/* ------------------------------------------------------- printable checklist
   Real checkboxes, two columns on desktop, and a print stylesheet so the
   player can put it beside the TV. */
.page ul.sgs-check,.page ol.sgs-check{
  list-style:none !important;margin:12px 0 !important;padding:0 !important;
  column-gap:26px;
}
@media (min-width:820px){.page ul.sgs-check{column-count:2;}}
.page ul.sgs-check li{
  break-inside:avoid;position:relative;
  padding:6px 0 6px 30px !important;margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.05);line-height:1.55;
  list-style:none !important;background:none !important;
}
/* the exports each draw their own ::before bullet, so this has to win */
.page ul.sgs-check li::before{
  content:"" !important;position:absolute !important;left:2px !important;
  top:9px !important;width:15px !important;height:15px !important;
  border:1.5px solid #55606a !important;border-radius:3px !important;
  background:transparent !important;color:transparent !important;
  font-size:0 !important;line-height:0 !important;display:block !important;
  margin:0 !important;transform:none !important;
}
.page ul.sgs-check li::after{content:none !important;}
.page ul.sgs-check li::marker{content:"" !important;}
.page ul.sgs-check li strong{color:#d4af37;}
.page .sgs-check-h,.sgs-check-h{
  color:#fff;font-weight:700;margin:18px 0 2px;font-size:1.02em;
  padding-bottom:6px;border-bottom:2px solid rgba(196,30,58,.5);
}
.sgs-print{
  display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;
  padding:9px 16px;border-radius:7px;cursor:pointer;font:inherit;
  font-size:.88em;font-weight:600;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid #3a3a3a;
}
.sgs-print:hover{background:rgba(196,30,58,.22);border-color:#8b0000;}
@media print{
  .sgs-nav,.tabs,.hero,.sgs-cta,.sgs-foot,.sgs-top,.nav-buttons,
  .sgs-video,.sgs-more,.sgs-print,.sgs-hint{display:none !important;}
  body,.page,.section{background:#fff !important;color:#000 !important;}
  .page{display:none !important;}
  .page.active{display:block !important;}
  .page .sgs-check li::before{border-color:#000;}
  .page .sgs-check li strong,.sgs-check-h{color:#000 !important;}
  .sgs-check-h{border-bottom:2px solid #000;}
  h2,h3{color:#000 !important;}
}

/* ---- key/value tables inside .sgs-card ------------------------------------
   These are two-column label/value tables, not data grids — they must wrap on
   a phone instead of opening a scroll rail. */
.page .sgs-card .sgs-tw{border:0;margin:6px 0 0;overflow-x:visible;}
.page .sgs-tw:has(> table.sgs-kv){overflow-x:visible;}
.page table.sgs-kv{min-width:0 !important;width:100%;}
.page table.sgs-kv td{white-space:normal !important;vertical-align:top;}
.page table.sgs-kv td:first-child{width:36%;color:#cfcfcf;font-weight:600;}
@media (max-width:420px){
  .page table.sgs-kv td:first-child{width:42%;}
  .page table.sgs-kv td{padding:7px 8px !important;font-size:.94em;}
}

/* ---- floor cards: one tidy colour-coded table per floor -------------------
   Each row carries its own accent so the eye finds the line it wants without
   reading the labels. Wraps on a phone — never a scroll rail. */
.page .floor-card{overflow:hidden;}
.page table.sgs-floor{
  width:100% !important;min-width:0 !important;margin:9px 0 0 !important;
  border-collapse:separate;border-spacing:0;
  border:1px solid #262626;border-radius:8px;overflow:hidden;
}
.page table.sgs-floor td{
  padding:8px 11px !important;vertical-align:top;white-space:normal !important;
  border-bottom:1px solid rgba(255,255,255,.055);font-size:.94em;line-height:1.5;
  background:transparent;
}
.page table.sgs-floor tr:last-child td{border-bottom:0;}
.page table.sgs-floor tr:nth-child(even) td{background:rgba(255,255,255,.018);}
.page table.sgs-floor td:first-child{
  width:37%;font-weight:600;letter-spacing:.01em;
  border-left:3px solid #3a3a3a;color:#b9b9b9;
}
.page table.sgs-floor td:last-child{color:#ddd;}
.page table.sgs-floor td:last-child strong{color:#fff;}

.page table.sgs-floor tr.r-time  td:first-child{border-left-color:#9ac9ee;color:#9ac9ee;}
.page table.sgs-floor tr.r-fish  td:first-child{border-left-color:#4dd0c4;color:#4dd0c4;}
.page table.sgs-floor tr.r-sph   td:first-child{border-left-color:#22b04c;color:#5ec97e;}
.page table.sgs-floor tr.r-goal  td:first-child{border-left-color:#ffb04a;color:#ffb04a;}
.page table.sgs-floor tr.r-en    td:first-child{border-left-color:#c41e3a;color:#e2707f;}
.page table.sgs-floor tr.r-abs   td:first-child{border-left-color:#8a6d3b;color:#d4af37;}
.page table.sgs-floor tr.r-none  td:last-child{color:#7d7d7d;font-style:italic;}

.page .floor-card .floor-header{font-size:1.04em;padding-bottom:2px;}
.page .floor-no{
  display:inline-block;min-width:2.1em;margin-right:.5em;padding:1px 7px;
  border-radius:5px;background:rgba(196,30,58,.22);color:#ff7d8e;
  font-size:.82em;font-weight:700;letter-spacing:.04em;
}
.page .floor-card.is-event{border-left:3px solid #ffb04a !important;}
.page .floor-card.is-event .floor-header{color:#ffb04a;}

@media (max-width:430px){
  .page table.sgs-floor td:first-child{width:43%;}
  .page table.sgs-floor td{padding:7px 9px !important;font-size:.9em;}
}

/* =========================================================================
   Devil May Cry 2 — bring its export in line with the rest of the site.
   That export shipped square flush tabs, unboxed hero stats, no .section
   styling at all, and a .summary panel that looks nothing like the section
   cards every other guide uses. Scoped so no other guide is touched.
   ========================================================================= */
body[data-guide="devil-may-cry-2"] .tabs{
  justify-content:center;padding:8px 12px !important;gap:6px;
  background:#111 !important;border-bottom:1px solid #333 !important;
}
body[data-guide="devil-may-cry-2"] .tab-btn{
  background:#1a1a1a !important;color:#999 !important;
  border:1px solid #333 !important;border-radius:6px !important;
  padding:10px 20px !important;font-size:.88em !important;
}
body[data-guide="devil-may-cry-2"] .tab-btn:hover{
  background:#242424 !important;color:#ddd !important;border-color:#4a4a4a !important;
}
body[data-guide="devil-may-cry-2"] .tab-btn.active{
  background:#8b0000 !important;color:#fff !important;border-color:#8b0000 !important;
}

/* hero stats: give them the boxes every other guide has */
body[data-guide="devil-may-cry-2"] .stats{gap:12px !important;}
body[data-guide="devil-may-cry-2"] .stat{
  background:rgba(20,20,31,.72);border:1px solid #2a2a3a;border-radius:10px;
  padding:14px 22px;min-width:104px;text-align:center;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}

/* section cards — the export never styled these, so anything we add to the
   guide had no card around it */
body[data-guide="devil-may-cry-2"] .page .section{
  margin:26px 0;padding:22px 24px;background:#111;border-radius:12px;border:1px solid #222;
}
body[data-guide="devil-may-cry-2"] .page .section > h2{
  color:#c41e3a;font-size:1.55em;margin-bottom:14px;padding-bottom:8px;
  border-bottom:2px solid #c41e3a;text-transform:uppercase;letter-spacing:2px;
}
body[data-guide="devil-may-cry-2"] .page .section > h3{
  color:#fff;font-size:1.12em;margin:20px 0 6px;
  padding:6px 0 6px 12px;border-radius:0 6px 6px 0;
  background:linear-gradient(90deg,rgba(196,30,58,.18),transparent 60%);
}

/* the export's own .summary panels, matched to the same card language */
body[data-guide="devil-may-cry-2"] .summary{
  background:#111 !important;border:1px solid #222 !important;
  border-radius:12px !important;padding:22px 24px !important;margin:26px 20px !important;
}
body[data-guide="devil-may-cry-2"] .summary > h3{
  color:#c41e3a !important;font-size:1.55em !important;margin-bottom:14px !important;
  padding-bottom:8px !important;border-bottom:2px solid #c41e3a !important;
  text-transform:uppercase;letter-spacing:2px;
}
body[data-guide="devil-may-cry-2"] .char-header{
  color:#c41e3a;font-size:1.5em;letter-spacing:2px;
  padding:26px 20px 6px;
}

/* mission cards: same corner radius and border weight as the other guides'
   step and boss blocks */
body[data-guide="devil-may-cry-2"] .mission{
  margin:22px 0 !important;border:1px solid #222 !important;border-radius:12px !important;
}
body[data-guide="devil-may-cry-2"] .mission-header{
  background:linear-gradient(90deg,rgba(196,30,58,.14),transparent 70%) !important;
  border-bottom:1px solid #2a2a3a !important;padding:16px 22px !important;
}
body[data-guide="devil-may-cry-2"] .mission-body{padding:18px 22px !important;}

@media (max-width:640px){
  body[data-guide="devil-may-cry-2"] .tab-btn{padding:8px 13px !important;font-size:.8em !important;}
  body[data-guide="devil-may-cry-2"] .stat{padding:11px 15px;min-width:88px;}
  body[data-guide="devil-may-cry-2"] .page .section,
  body[data-guide="devil-may-cry-2"] .summary{padding:16px 15px !important;margin:18px 0 !important;}
}


/* ============================================================
   Badges — one shared palette for every guide on the site.
   A guide must NOT redefine badge colours in its own <style>.
   ============================================================ */
.badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:.74em;font-weight:700;
  margin-right:5px;letter-spacing:.35px;border:1px solid transparent;vertical-align:middle;text-decoration:none}

/* pickups */
.badge-item{background:rgba(212,175,55,.18);color:#e8c96a;border-color:rgba(212,175,55,.38)}
.badge-key{background:rgba(33,150,243,.18);color:#7cc4fb;border-color:rgba(33,150,243,.40)}
.badge-file{background:rgba(150,110,220,.20);color:#c2a8f2;border-color:rgba(150,110,220,.42)}
.badge-weapon{background:rgba(196,30,58,.22);color:#ff8f9c;border-color:rgba(196,30,58,.45)}
.badge-armor{background:rgba(0,180,160,.16);color:#6fe0cf;border-color:rgba(0,180,160,.40)}

/* places and actions */
.badge-save{background:rgba(130,150,170,.20);color:#c2cede;border-color:rgba(130,150,170,.42)}
.badge-code{background:rgba(255,193,7,.18);color:#ffd45e;border-color:rgba(255,193,7,.42)}
.badge-partner{background:rgba(0,188,212,.16);color:#5fd8e8;border-color:rgba(0,188,212,.42)}
.badge-back{background:rgba(255,120,40,.16);color:#ffb27a;border-color:rgba(255,120,40,.42)}

/* fights, warnings, optional content */
.badge-boss{background:rgba(190,80,220,.18);color:#d9a2ea;border-color:rgba(190,80,220,.42)}
.badge-boss2{background:rgba(190,80,220,.18);color:#d9a2ea;border-color:rgba(190,80,220,.42)}
.badge-miss{background:rgba(200,40,40,.24);color:#ff9b9b;border-color:rgba(200,60,60,.50)}
.badge-hard{background:rgba(200,40,40,.24);color:#ff9b9b;border-color:rgba(200,60,60,.50)}
.badge-sq{background:rgba(90,190,110,.16);color:#8fe28f;border-color:rgba(90,190,110,.42)}
.badge-end{background:rgba(255,120,40,.16);color:#ffb27a;border-color:rgba(255,120,40,.42)}

/* clickable badges that jump to a table row */
a.badge{cursor:pointer}
a.badge:hover{filter:brightness(1.3)}