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

:root{
  --sgs-bg:#08080c;
  --sgs-panel:#101017;
  --sgs-panel-2:#15151f;
  --sgs-border:#22222f;
  --sgs-red:#c41e3a;
  --sgs-red-dim:#8b0000;
  --sgs-text:#e8e8e8;
  --sgs-dim:#8a8a96;
  --sgs-faint:#5a5a66;
  --sgs-yt:#ff0033;
  --sgs-max:1100px;
}

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(8,8,12,.82);
  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;gap:10px;
  text-decoration:none;color:#fff;font-weight:700;
  letter-spacing:1.5px;font-size:.92em;text-transform:uppercase;
  white-space:nowrap;
}
.sgs-brand .sgs-mark{
  width:26px;height:26px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--sgs-red),#5a0018);
  display:grid;place-items:center;font-size:13px;color:#fff;
  box-shadow:0 0 18px rgba(196,30,58,.45);
}
.sgs-brand span.sgs-sub{color:var(--sgs-red);}
.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-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:#d90029;box-shadow:0 0 22px rgba(255,0,51,.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-brand{font-size:.7em;letter-spacing:.8px;gap:7px;}
  .sgs-brand .sgs-mark{width:23px;height:23px;font-size:11px;}
  .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-brand{font-size:.62em;}
}

/* ------------------------------------------------------------ video cards */
.sgs-video{
  margin:14px 0 4px;
  max-width:640px;
  border:1px solid rgba(255,0,51,.28);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,0,51,.07),rgba(255,0,51,.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:#ff5c7a;
  border-bottom:1px solid rgba(255,0,51,.16);
}
.sgs-video-head svg{width:15px;height:15px;fill:#ff2b52;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:#ff5c7a;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:#ff5c7a;background:rgba(255,0,51,.06);
  border:1px solid rgba(255,0,51,.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:#ff2b52;flex:none;
}
.sgs-grouped{
  border-left:2px solid rgba(255,0,51,.35) !important;
  padding-left:14px !important;
  border-radius:0 10px 10px 0 !important;
  background:linear-gradient(90deg,rgba(255,0,51,.05),transparent 55%);
}
.sgs-group-first{border-top-left-radius:0 !important;}
.sgs-video.sgs-video-group{
  margin-left:14px;
  border-color:rgba(255,0,51,.4);
}

/* ------------------------------------------------------------- image zoom */
.sgs-zoomable{cursor:zoom-in;}
.sgs-lb{
  position:fixed;inset:0;z-index:9999;display:none;
  background:rgba(4,4,8,.94);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
}
.sgs-lb.open{display:flex;}
.sgs-lb img{max-width:96vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.8);}
.sgs-lb .sgs-lb-cap{
  position:absolute;bottom:22px;left:0;right:0;text-align:center;
  color:var(--sgs-dim);font-size:.9em;padding:0 24px;
}
.sgs-lb .sgs-lb-x{
  position:absolute;top:18px;right:22px;color:#fff;font-size:30px;
  line-height:1;opacity:.65;
}

/* ------------------------------------------------ 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(196,30,58,.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(255,0,51,.22);border-radius:16px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,0,51,.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:#d90029;box-shadow:0 0 30px rgba(255,0,51,.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(16,16,23,.9);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;}