/* ABI Stats Bot - my effects for the other pages (look A: tactical HUD): guide, What's new,
   download, viewer profiles, shop, clips, boss stats, privacy, terms and /admin.
   I load this after each page's own styles and theme.css, so these rules win.
   Colours, focus, disabled and "reduce motion" all come from theme.css, not from here. */

@keyframes p-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Top bar: the links get my amber line that slides in */
.top nav a, .top nav button { position: relative; transition: color .2s; }
.top nav a::after, .top nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.top nav a:hover, .top nav button:hover, .top nav a.on { color: var(--accent); }
.top nav a:hover::after, .top nav button:hover::after, .top nav a.on::after { transform: scaleX(1); }
.top nav a.btn::after { display: none; }

/* Page title: I keep it plain, no glow */
h1 { letter-spacing: .05em; animation: p-rise .5s ease both; }
.lead { animation: p-rise .5s .08s ease both; line-height: 1.6; color: var(--soft); }

/* Boxes fade in one after another; I only give clickable things (shop items, clips) the amber hover corners */
.panel, .entry, .step, .item, .clip, .tile, .ach, .card, section, details.grp {
  position: relative; transition: transform .22s ease, border-color .22s, box-shadow .22s; }
.panel, .entry, .step, .item, .clip, .tile, .ach { animation: p-rise .5s ease both; }
.wrap > :nth-child(3) { animation-delay: .04s; } .wrap > :nth-child(4) { animation-delay: .08s; }
.wrap > :nth-child(5) { animation-delay: .12s; } .wrap > :nth-child(6) { animation-delay: .16s; }
.wrap > :nth-child(7) { animation-delay: .2s; } .wrap > :nth-child(n+8) { animation-delay: .24s; }
.item:not(.no):hover, .clip:hover, .tile:hover, .ach:not(.locked):hover {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.item::before, .item::after, .clip::before, .clip::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid transparent; pointer-events: none; z-index: 1;
  transition: width .25s, height .25s, border-color .25s; }
.item::before, .clip::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.item::after, .clip::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.item:not(.no):hover::before, .item:not(.no):hover::after, .clip:hover::before, .clip:hover::after { border-color: rgba(226, 179, 60, .55); width: 18px; height: 18px; }


/* Setup guide: the step numbers light up when you hover */
.step .n { transition: color .25s; color: #6a5826; }
.step:hover .n { color: var(--accent); }
.toc a { transition: color .2s, border-color .2s; }
.toc a:hover { border-color: var(--soft); }

/* What's new: I only make the newest entry amber */
.entry.new { box-shadow: 0 0 0 1px rgba(226, 179, 60, .6); }

/* Tables (leaderboards, boss stats): rows light up on hover */
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* FAQ-style details */
details > summary { transition: color .2s; }
details > summary:hover { color: var(--text); }

/* ---- Layout and spacing (every screen size) ---------------------------------------------------
   Boxes: I give them 20px inside on desktop, 16px on phones. On phones the logo and links stack, and
   text next to a button moves above it. Touch screens get bigger buttons. */
.panel, .item { padding: 20px; }
.me > .grow, .me > div:first-child { flex: 1 1 240px; }
@media (max-width: 560px) {
  .top { flex-wrap: wrap; gap: 10px 14px; padding: 18px 0 8px; }
  .top nav { margin-left: 0; width: 100%; gap: 6px 16px; }
  .panel, .item { padding: 16px; }
  .me .btn { width: 100%; text-align: center; }
}
@media (pointer: coarse) {
  .btn, .top nav a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ==== Redesign (Nov 2026) on my other pages: guide, What's new, profiles, shop, clips, bosses, privacy, terms, admin ====
   Sentence case everywhere (only my logo shouts), one top bar, the same panels and tables on every page. */
html body *:not(code):not(kbd) { text-transform: none !important; }
html .top nav a, html .top nav button, html .top .menu a { letter-spacing: 0; }
html .stat > span, html .tag, html .badge, html th, html .pill, html .opt, html .eyebrow, html .label { letter-spacing: .01em !important; }
html h1 { font-size: clamp(30px, 4.4vw, 40px); letter-spacing: 0; line-height: 1.15; }
html .lead { font-size: 18px; max-width: 62ch; }
/* tables (leaderboards, boss stats, admin) */
html table { border-collapse: collapse; }
html th { font-size: 13px; font-weight: 600; color: var(--muted); }
html td, html th { padding-block: 10px; }
/* empty, loading and error text: the same quiet box on every page */
html .empty { padding: 32px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius-card); }
html .err, html .error { color: #ff8a7a; }
html .top { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
html .top nav a, html .top nav button { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
html .top nav a::after { display: none; }
html .top nav a:hover { background: var(--panel-2); color: var(--text); }
html .top nav a.on { background: var(--accent-dim); color: var(--accent); }
html .top nav { gap: 4px; }
html h1 { letter-spacing: .02em; animation: p-rise .4s ease both; }
html .panel, html .entry, html .item, html .clip, html .tile, html .ach, html .need { border-radius: var(--radius-lg); }
html body .need { border-left-width: 1px; }
html .step { border-radius: var(--radius-lg); border-top: 1px solid var(--line) !important; padding: 24px 26px 22px 84px; }
html .step::before { content: ""; position: absolute; left: 40px; top: 64px; bottom: -17px; width: 2px; background: var(--line); }
html .step:last-of-type::before { display: none; }
html .step .n { left: 22px; top: 20px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent) !important; font-size: 19px; }
html #s5 .n { background: var(--bad); color: #fff !important; }
html .step h2 { font-size: 19px; letter-spacing: .02em; text-transform: none; }
html .tip, html .step p:has(> .done) { border-radius: var(--radius-card); }
html .ui { border-radius: 6px; }
html h3.sec { text-transform: none; }
html .toc a { border-radius: 999px; }
html .toc a.on { border-color: var(--accent); color: var(--accent); }
html .step { scroll-margin-top: 24px; }
@media (min-width: 1240px) {
  html .toc { position: fixed; top: 140px; left: calc(50% - 410px - 220px); width: 196px; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0;
    padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
  html .toc::before { content: "On this page"; display: block; padding: 2px 10px 6px; font-size: 12px; color: var(--muted); }
  html .toc a { border: 0; border-radius: 8px; background: none; padding: 6px 10px; min-height: 0; color: var(--soft); }
  html .toc a:hover { background: var(--panel-2); color: var(--text); }
  html .toc a.on { background: var(--accent-dim); color: var(--accent); }
}
@media (max-width: 560px) {
  html .step { padding: 64px 16px 16px; }
  html .step::before { display: none; }
  html .step .n { left: 16px; top: 16px; }
}
/* Old letter-spacing from the all-caps days: gone, and no more "// " markers in front of titles */
html body *:not(code):not(kbd), html body *::before, html body *::after { letter-spacing: 0 !important; }
html body *::before, html body *::after { text-transform: none !important; }
html .asec-t::before, html h3.sec::before { content: none !important; }