/* steamcommunity.report — first-visit onboarding tutorial (tutorial.js).
   Same 2002-Steam homage as site.css: flat & square, 1px olive borders, gold
   accents, two-tone uppercase headings. Reuses the :root tokens from site.css
   (--bg-in / --panel / --frame / --fg / --muted / --dim / --gold / --gold-dim /
   --white / --font / --mono). Olive border hexes (#3a3d2e / #16170f / #23251a)
   match the literals that already recur across site.css / reviews.css. */

/* ====================================================================== */
/* OVERLAY + PANEL                                                        */
/* ====================================================================== */
.tut {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.tut[hidden] { display: none; }
.tut__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.80);
  backdrop-filter: blur(2px);
}
.tut__panel {
  position: relative; z-index: 1;
  background: var(--bg-in); border: 1px solid var(--frame);
  width: 100%; max-width: 520px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

/* ---- Smooth transitions: fade+scale on open, fade+slide per step ------- */
@keyframes tut-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tut-pop  { from { opacity: 0; transform: translateY(10px) scale(.98); }
                      to   { opacity: 1; transform: none; } }
@keyframes tut-step { from { opacity: 0; transform: translateY(7px); }
                      to   { opacity: 1; transform: none; } }
.tut--in .tut__backdrop { animation: tut-fade .22s ease both; }
.tut--in .tut__panel    { animation: tut-pop  .30s cubic-bezier(.2,.7,.3,1) both; }
.tut__body--in          { animation: tut-step .24s ease both; }
.tut__dot, .tut__btn, .tut__skip { transition: all .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .tut--in .tut__backdrop, .tut--in .tut__panel, .tut__body--in { animation: none; }
}

/* ---- Spotlight tour: highlight a real element + anchored tooltip ------- */
/* The spot's giant box-shadow darkens everything OUTSIDE its rect, so the
   highlighted element shows through brightly with a gold ring. */
.tut__spot {
  position: fixed; z-index: 1; border-radius: 0;   /* flat theme: square ring */
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.74), 0 0 16px 2px rgba(199,168,80,.35);
  pointer-events: none; display: none;
  transition: top .3s cubic-bezier(.2,.7,.3,1), left .3s cubic-bezier(.2,.7,.3,1),
              width .3s cubic-bezier(.2,.7,.3,1), height .3s cubic-bezier(.2,.7,.3,1);
}
.tut--anchored .tut__spot     { display: block; }
.tut--anchored .tut__backdrop { display: none; }   /* the spot's shadow darkens instead */
.tut--anchored .tut__panel {
  position: fixed; z-index: 2; max-width: 360px; width: calc(100% - 32px);
  max-height: none;
  transition: top .28s ease, left .28s ease;
  animation: tut-fade .25s ease both;               /* clean fade for tooltips */
}
@media (prefers-reduced-motion: reduce) {
  .tut__spot, .tut--anchored .tut__panel { transition: none; animation: none; }
}

/* ---- Beak: the tooltip's pointer toward the highlighted element -------- */
.tut__beak {
  position: absolute; width: 13px; height: 13px; margin-left: -6.5px;
  background: var(--bg-in); display: none; transform: rotate(45deg); z-index: 0;
}
.tut__panel--below .tut__beak { top: -7px;    border-top: 1px solid var(--gold-dim);    border-left: 1px solid var(--gold-dim); }
.tut__panel--above .tut__beak { bottom: -7px; border-bottom: 1px solid var(--gold-dim); border-right: 1px solid var(--gold-dim); }

/* ---- Top progress bar -------------------------------------------------- */
.tut__prog { height: 2px; background: rgba(255,255,255,.05); overflow: hidden; }
.tut__prog-fill {
  display: block; height: 100%; width: 0; background: var(--gold);
  box-shadow: 0 0 8px rgba(199,168,80,.7);
  transition: width .35s cubic-bezier(.3,.7,.3,1);
}

/* ---- Pulsing glow on the spotlight ring (keeps the dim constant) ------- */
@keyframes tut-glow {
  0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.74), 0 0 0 1px rgba(199,168,80,0),   0 0 14px 1px rgba(199,168,80,.28); }
  50%     { box-shadow: 0 0 0 9999px rgba(0,0,0,.74), 0 0 0 3px rgba(199,168,80,.20), 0 0 24px 4px rgba(199,168,80,.5); }
}
.tut--anchored .tut__spot { animation: tut-glow 2.1s ease-in-out infinite; }

/* ---- Polish: gold dot glow + a premium panel edge --------------------- */
.tut__dot--active { box-shadow: 0 0 8px rgba(199,168,80,.55); }
.tut__panel { box-shadow: 0 10px 44px rgba(0,0,0,.62), inset 0 0 0 1px rgba(199,168,80,.08); }

@media (prefers-reduced-motion: reduce) {
  .tut--anchored .tut__spot { animation: none; }
  .tut__prog-fill { transition: none; }
}

/* ---- Header: step counter + close (skip) ------------------------------- */
.tut__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--frame);
}
.tut__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dim); font-family: var(--mono);
}
.tut__count { color: var(--muted); }
.tut__skip {
  background: none; border: none; padding: 4px 2px; cursor: pointer;
  font: 700 11px var(--font); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
  transition: color .15s ease;
}
.tut__skip:hover { color: var(--gold); }
.tut__skip:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }

/* ---- Body: title + copy ----------------------------------------------- */
.tut__body {
  padding: 22px 22px 18px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--frame) rgba(0,0,0,.15);
}
.tut__body::-webkit-scrollbar { width: 8px; }
.tut__body::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
.tut__body::-webkit-scrollbar-thumb { background: var(--frame); }

.tut__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 7px;
}
.tut__title {
  margin: 0 0 12px; font-size: 21px; line-height: 1.2;
  color: var(--white); letter-spacing: .01em; font-weight: 700;
}
.tut__title .hl { color: var(--gold); }
.tut__text { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.tut__text:last-child { margin-bottom: 0; }
.tut__text b { color: var(--fg); }
.tut__text code {
  font-family: var(--mono); color: var(--gold);
  background: rgba(0,0,0,.22); padding: 1px 5px;
}

/* Small "demo" line showing the .com -> .report swap, etc. */
.tut__demo {
  margin: 4px 0 12px; padding: 10px 13px;
  background: var(--panel); border: 1px solid #3a3d2e;
  font-family: var(--mono); font-size: 13px; color: var(--fg);
  word-break: break-word;
}
.tut__demo .was { color: var(--muted); text-decoration: line-through; text-decoration-color: #8a4a3a; }
.tut__demo .now { color: var(--gold); }
.tut__demo .arrow { color: var(--muted); padding: 0 6px; }

/* Optional bullet list inside a step */
.tut__list { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.tut__list li { margin: 3px 0; }
.tut__list b { color: var(--fg); }

/* ---- Footer: dots + Back / Next ---------------------------------------- */
.tut__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--frame);
}
/* Dots hidden — with a ~20-step multi-page tour they overflow the panel and push
   Back/Next out. The top progress bar + the "N / total" counter convey progress. */
.tut__dots { display: none; }
.tut__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a3d2e; border: 1px solid #4a4e3b; padding: 0;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tut__dot:hover { border-color: var(--gold-dim); }
.tut__dot:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.tut__dot--active { background: var(--gold); border-color: var(--gold); transform: scale(1.15); }

.tut__nav { margin-left: auto; display: inline-flex; gap: 8px; }
.tut__btn {
  font: 700 13px var(--font); cursor: pointer; padding: 8px 16px; line-height: 1;
  border-radius: 0; white-space: nowrap;
}
/* secondary (Back) — quiet olive */
.tut__btn--ghost {
  color: var(--gold); background: #1e2015; border: 1px solid var(--gold-dim);
}
.tut__btn--ghost:hover:not(:disabled) { background: #262a18; }
.tut__btn--ghost:disabled { opacity: .4; cursor: default; }
/* primary (Next / Got it) — solid gold */
.tut__btn--primary {
  color: var(--black); background: var(--gold); border: 1px solid var(--gold-dim);
}
.tut__btn--primary:hover { background: #cdb96f; }
.tut__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ====================================================================== */
/* RE-OPEN LINK (footer / nav "Tutorial")                                 */
/* ====================================================================== */
.tut-link {
  background: none; border: none; padding: 0;
  color: var(--gold-dim); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(143, 127, 68, .3);
}
.tut-link:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* The nav variants should read like the other gold nav links, not a button */
.snav .tut-link,
.sfoot__nav .tut-link {
  font-weight: 700; color: var(--gold); text-decoration: none;
}
.snav .tut-link:hover,
.sfoot__nav .tut-link:hover { text-decoration: underline; }

/* ====================================================================== */
/* LANDING POLISH (index.html)                                            */
/* Small, theme-consistent additions layered on top of site.css.          */
/* ====================================================================== */

/* Tagline under the CS2 STATS heading — one tight line of what this is. */
.tagline {
  margin: 0 0 14px; color: var(--fg); font-size: 15px; line-height: 1.5;
}
.tagline b { color: var(--white); }

/* Feature strip — four square olive chips summarising the site at a glance. */
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 18px 0 6px;
}
.feature {
  background: rgba(0,0,0,.15); border: 1px solid var(--frame);
  padding: 12px 13px;
}
.feature__h {
  margin: 0 0 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.feature__d { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (max-width: 720px) {
  .tut__panel { max-height: 92vh; }
  .tut__body { padding: 18px 16px 14px; }
  .tut__title { font-size: 18px; }
  .tut__foot { padding: 12px 14px; gap: 10px; }
  .tut__head { padding: 12px 14px 10px; }
  .tut__btn { padding: 8px 13px; font-size: 12px; }

  /* Feature strip stacks two-up on phones */
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tagline { font-size: 14px; }
}

@media (max-width: 380px) {
  .feature-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tut__dot { transition: none; }
}

/* ====================================================================== */
/* SKIP-CONFIRMATION CARD                                                  */
/* Shown when the user tries to cancel the tour via Skip or Escape.       */
/* ====================================================================== */
.tut__confirm {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.5);
}
.tut__confirm-card {
  width: 390px; max-width: 100%;
  background: var(--bg-in); border: 1px solid var(--frame);
  padding: 20px 22px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.tut__confirm-title {
  margin: 0 0 8px; font: 700 18px var(--font);
  color: var(--white, #fff);
}
.tut__confirm-lead {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5;
  color: var(--fg, #d8d8c8);
}
.tut__confirm-list {
  margin: 0 0 18px; padding-left: 18px;
}
.tut__confirm-list li {
  margin: 7px 0; font-size: 12.5px; line-height: 1.5;
  color: var(--fg, #d8d8c8);
}
.tut__confirm-list b { color: var(--white, #fff); }
.tut__confirm-btns {
  display: flex; gap: 10px; justify-content: flex-end;
}