/* Order Automatica Wiki — dark ceremonial theme (clones farevergame.wiki page structure language,
   tuned to the "nine-cell ritual" tone). English site. */
:root{
  --bg:#0a0c10; --bg2:#0f131a; --panel:#141a22; --panel2:#1b232f; --line:#2b3543;
  --text:#ece6d8; --muted:#94a0ad; --gold:#c8a04a; --gold-soft:#e3c277; --blood:#a83a2c;
  --link:#c8a04a; --warn:#e0a23a; --warnbg:#2e2410;
  --serif:"Georgia","Times New Roman",serif;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.75;
  background-image:radial-gradient(1200px 600px at 50% -10%, rgba(200,160,74,.10), transparent 60%);}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--gold-soft);text-decoration:underline}
.site-header{position:sticky;top:0;z-index:20;background:rgba(10,12,16,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.55rem 1.1rem}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand a{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--text);letter-spacing:.3px}
.topnav ul{list-style:none;display:flex;gap:.15rem;flex-wrap:wrap;margin:0;padding:0}
.topnav a{display:block;padding:.4rem .7rem;border-radius:8px;color:var(--muted);font-size:.86rem;
  border:1px solid transparent;transition:.15s}
.topnav a:hover{background:var(--panel2);color:var(--text);text-decoration:none;border-color:var(--line)}
.topnav .active a{background:linear-gradient(180deg,var(--gold),#a8842f);color:#1a1206;font-weight:700;border-color:transparent}
/* Hamburger drawer toggle (hidden on desktop; pure-CSS, no JS) */
.nav-burger{display:none}
main{max-width:1040px;margin:0 auto;padding:1.6rem 1rem 3.5rem}
.breadcrumb{color:var(--muted);font-size:.82rem;margin-bottom:1.1rem}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold-soft)}
.crumb-cat{color:var(--gold-soft)}
.related{margin-top:1.5rem}
.rel-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.rel-chip{display:inline-block;padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--text);font-size:.9rem;text-decoration:none;transition:.18s}
.rel-chip:hover{border-color:var(--gold);color:var(--gold-soft);transform:translateY(-1px)}
.hero{position:relative;overflow:hidden;background:
    radial-gradient(900px 420px at 80% -20%, rgba(168,58,44,.18), transparent 55%),
    linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:20px;padding:2.6rem 2rem;margin-bottom:1.8rem}
.hero::before{content:"";position:absolute;inset:0;background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(200,160,74,.04) 38px 39px);
  pointer-events:none}
.hero-tag{display:inline-block;font-family:var(--serif);letter-spacing:2px;font-size:.72rem;
  color:var(--gold-soft);border:1px solid var(--gold);border-radius:999px;padding:.25rem .8rem;margin-bottom:1rem;text-transform:uppercase}
.hero h1{position:relative;margin:0 0 .5rem;font-family:var(--serif);font-size:2.6rem;line-height:1.15;
  background:linear-gradient(180deg,#f3e6c4,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Unofficial-fan-site disclaimer. Rendered only on pages that opt in via a
   `fan_notice` string in pages.py. `position:relative` is required so it paints
   above .hero::before (the scanline overlay) and stays clickable. */
.fan-notice{position:relative;display:block;margin:0 0 1.1rem;max-width:68ch;padding:.7rem 1rem;
  background:rgba(20,26,34,.72);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;color:var(--muted);font-size:.88rem;line-height:1.6}
.fan-notice .fn-tag{display:inline-block;margin-right:.5rem;padding:.12rem .55rem;
  background:rgba(200,160,74,.14);border:1px solid rgba(200,160,74,.4);border-radius:999px;
  color:var(--gold-soft);font-family:var(--serif);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.fan-notice a{color:var(--gold-soft);text-decoration:underline}
.fan-notice a:hover{color:var(--text)}
.hero .tagline{position:relative;color:var(--muted);font-size:1.02rem;margin:0 0 1.3rem;max-width:60ch}
.hero-facts{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:1.4rem}
.hero-fact{background:rgba(20,26,34,.7);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem}
.hero-fact .k{display:block;font-size:.72rem;letter-spacing:1px;color:var(--gold);text-transform:uppercase;margin-bottom:.25rem}
.hero-fact .v{display:block;font-size:1rem;color:var(--text);font-weight:600}
.hero-cta{position:relative;display:flex;gap:.7rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:10px;font-weight:700;font-size:.92rem;border:1px solid transparent;transition:.15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-steam{background:linear-gradient(180deg,var(--gold),#a8842f);color:#1a1206}
.btn-steam:hover{box-shadow:0 6px 20px rgba(200,160,74,.3)}
.btn-discord{background:transparent;border-color:var(--line);color:var(--text)}
.btn-discord:hover{border-color:var(--gold);color:var(--gold-soft)}
.block{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:1.4rem 1.6rem;margin-bottom:1.2rem;transition:.15s}
.block:hover{border-color:#3a4757}
.block h2{margin-top:0;font-family:var(--serif);color:var(--gold-soft);font-size:1.35rem;
  border-left:4px solid var(--gold);padding-left:.7rem}
.block h3{color:var(--text);margin:.7rem 0 .3rem;font-size:1.02rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin:.9rem 0}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:1rem;transition:.15s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card h3{margin:0 0 .35rem;font-size:.95rem;color:var(--gold-soft);font-family:var(--serif)}
.card p{margin:0;color:var(--text);font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0;padding:0;list-style:none}
.tags li{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;
  font-size:.86rem;color:var(--text)}
.data td.num{text-align:right;font-variant-numeric:tabular-nums}
.nav-card{color:var(--text);display:flex;flex-direction:column;gap:.3rem}
.nav-card:hover{text-decoration:none;border-color:var(--gold);transform:translateY(-2px)}
.nav-card h3{color:var(--gold-soft)}
.nav-card .arrow{color:var(--gold);font-size:1.1rem;transition:.15s}
.nav-card:hover .arrow{transform:translateX(4px)}
.navlink{margin:.25rem 0}
.navlink a{color:var(--link)}
.missing{background:var(--warnbg);border:1px solid var(--warn);color:var(--warn);
  border-radius:12px;padding:.8rem 1rem;margin:.7rem 0;font-size:.92rem}
ul,ol{margin:.5rem 0;padding-left:1.4rem}
ul li,ol li{margin:.25rem 0}
.site-footer{border-top:1px solid var(--line);margin-top:2.5rem;padding:1.8rem 1rem;
  text-align:center;color:var(--muted);font-size:.85rem;background:var(--bg2)}
.site-footer .links a{margin:0 .25rem;color:var(--muted)}
.site-footer .links a:hover{color:var(--gold-soft)}
img{max-width:100%;height:auto;display:block}
.emblem{width:30px;height:30px;vertical-align:-7px;margin-right:.45rem}
.brand .emblem{width:26px;height:26px}
.page-banner{margin:0 0 1.8rem;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);
  box-shadow:0 10px 40px rgba(0,0,0,.45)}
.page-banner img{width:100%;display:block}
.page-banner figcaption,.sect-fig figcaption{color:var(--muted);font-size:.78rem;text-align:right;
  padding:.5rem .9rem;border-top:1px solid var(--line);background:var(--bg2)}
.sect-fig{margin:1.1rem 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.sect-fig img{width:100%;display:block}
.sect-fig.contain img{max-height:360px;width:auto;margin:0 auto;background:var(--bg2);padding:.6rem}
.divider{display:block;width:100%;max-width:600px;margin:1.4rem auto;opacity:.85}
.nav-ico{width:34px;height:34px;margin-bottom:.55rem;opacity:.92}
.note{color:var(--muted);font-size:.82rem;margin-top:.6rem}
.banner-note{background:var(--warnbg);border:1px solid var(--warn);color:var(--warn);border-radius:12px;
  padding:.9rem 1.1rem;margin:.7rem 0;font-size:.95rem;line-height:1.5}
.devnote{margin:.8rem 0;padding:.9rem 1.1rem;border-left:3px solid var(--gold);background:var(--panel2);
  border-radius:0 12px 12px 0;font-style:italic;color:var(--text)}
.data{width:100%;border-collapse:collapse;margin:.9rem 0;font-size:.9rem}
.data th,.data td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top}
.data thead th{background:var(--panel2);color:var(--gold-soft);font-family:var(--serif)}
.data tbody tr:nth-child(even){background:var(--bg2)}
.unit-sigils{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin:1rem 0}
.unit-sigils figure{margin:0;text-align:center}
.unit-sigils img{width:104px;height:104px}
.unit-sigils figcaption{color:var(--muted);font-size:.78rem;margin-top:.35rem}
.ad-wrap{max-width:728px;margin:1.6rem auto;padding:1rem;background:var(--bg2);border:1px solid var(--line);border-radius:14px;text-align:center;min-height:90px}
.ad-wrap .ad-label{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .6rem}
@media(max-width:600px){
  .hero{padding:1.8rem 1.2rem}.hero h1{font-size:1.9rem}
  .fan-notice{font-size:.84rem;padding:.6rem .8rem;margin-bottom:1rem}
  .block{padding:1.1rem}
  /* Mobile nav: collapse 17 links into a hamburger drawer (tap targets >=44px) */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0c10}
  /* ^ MUST disable backdrop-filter on mobile. It creates a containing block for
     position:fixed descendants, which would make the drawer (a child of .site-header)
     size to the header box instead of the viewport — producing the reported bug:
     expanded drawer only showed the first "Home" link (~143px tall header vs 844px viewport). */
  .site-header .bar{flex-wrap:nowrap}
  .brand{flex:1 1 auto}
  .topnav{width:auto;display:flex;align-items:center}
  .nav-burger{display:inline-flex;position:relative;z-index:26;flex-direction:column;justify-content:center;gap:5px;
    align-self:center;width:42px;height:42px;margin:.25rem 0;cursor:pointer;
    padding:0 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
  .nav-burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.2s}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Expanded drawer: fixed full-viewport overlay that scrolls internally, so touch
     scrolling never passes through to <body> (fixes "only 9 links show / page scrolls"). */
  .topnav .nav-list{display:none}
  /* flex-wrap:nowrap is MANDATORY here. The desktop rule `.topnav ul{flex-wrap:wrap}`
     is not overridden by the drawer rule (different specificity, same element), so
     without nowrap a column-direction flex container with a viewport-height box
     spills overflowing links into NEW COLUMNS — that is exactly the reported
     "horizontal, swipe left/right" drawer. Keep nowrap whenever editing this block. */
  .nav-toggle:checked ~ .nav-list{
    display:flex;flex-direction:column;flex-wrap:nowrap;gap:.12rem;
    position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:24;
    background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:3.9rem .9rem 1.4rem;border-top:1px solid var(--line)}
  .topnav .nav-list li{width:100%;flex:0 0 auto}
  .topnav .nav-list a{padding:.7rem .85rem;font-size:.95rem}
}
/* Latest-from-Steam news feed (auto-pulled, home page only) */
.news-feed .news-list{list-style:none;margin:.7rem 0;padding:0}
.news-feed .news-list li{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.news-feed .news-list li:last-child{border-bottom:none}
.news-feed .news-list a{color:var(--text);text-decoration:none;font-weight:600}
.news-feed .news-list a:hover{color:var(--gold-soft);text-decoration:underline}
.news-feed .news-date{color:var(--muted);font-size:.76rem;white-space:nowrap;flex:0 0 auto}

/* In-page TOC anchor nav — sticky on desktop, collapses inline on mobile. */
.toc{position:sticky;top:78px;float:right;width:230px;margin:0 0 1.2rem 1.4rem;
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;
  font-size:.86rem;max-height:calc(100vh - 100px);overflow:auto}
.toc-title{display:block;font-family:var(--serif);font-size:.7rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:.15rem 0}
.toc a{display:block;color:var(--muted);padding:.25rem .5rem;border-radius:8px;border-left:2px solid transparent;transition:.15s}
.toc a:hover{color:var(--gold-soft);text-decoration:none;background:var(--panel);border-left-color:var(--gold)}
.toc a::before{content:"# ";color:var(--line)}

/* "Start Here" guided journey (home + guide only) */
.journey-lead{color:var(--muted);max-width:62ch;margin:.2rem 0 1rem}
.journey-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem}
.step{position:relative;display:flex;flex-direction:column;gap:.2rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:1rem 1rem 1rem 3.1rem;
  color:var(--text);text-decoration:none;transition:.15s}
.step:hover{text-decoration:none;border-color:var(--gold);transform:translateY(-2px)}
.step-n{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:1.9rem;height:1.9rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(180deg,var(--gold),#a8842f);color:#1a1206;font-weight:700;font-family:var(--serif)}
.step-t{font-weight:700;font-size:.98rem;color:var(--gold-soft)}
.step-d{font-size:.82rem;color:var(--muted);line-height:1.4}

/* Popular / Trending dual-column discovery hub */
.popular-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.pop-col h3{margin:.1rem 0 .7rem;color:var(--gold-soft);font-family:var(--serif);font-size:1.05rem}
.pop-list{list-style:none;margin:0;padding:0}
.pop-list li{display:flex;flex-direction:column;gap:.1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.pop-list li:last-child{border-bottom:none}
.pop-list a{color:var(--text);font-weight:600;text-decoration:none}
.pop-list a:hover{color:var(--gold-soft);text-decoration:underline}
.pop-meta{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* Long-tail topic-guide discovery block (home + guide only). Surfaces the
   order-automatica-* cluster so link equity reaches those pages; mirrors the
   Popular/Trending list styling. */
.longtail .lt-list{list-style:none;margin:.7rem 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.4rem}
.longtail .lt-list li{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--line)}
.longtail .lt-list li:nth-last-child(-n+2){border-bottom:none}
.longtail .lt-list a{color:var(--text);font-weight:600;text-decoration:none}
.longtail .lt-list a:hover{color:var(--gold-soft);text-decoration:underline}
.longtail .lt-meta{font-size:.74rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap}

/* FAQ block — visible mirror of the FAQPage JSON-LD (Google requires the Q&A
   to be rendered on-page, not only in schema). */
.faq .faq-item{padding:.7rem 0;border-bottom:1px solid var(--line)}
.faq .faq-item:last-child{border-bottom:none}
.faq .faq-q{font-size:1.02rem;margin:0 0 .35rem;color:var(--gold-soft)}
.faq .faq-a{margin:0;color:var(--text);line-height:1.6}

/* Active Offer badge — honest live-discount callout (no-op when none) */
.active-deal{border-color:var(--blood);background:linear-gradient(160deg,var(--panel),#1c1416)}
.deal-badge{font-size:1.15rem;margin:.2rem 0 .6rem}
.deal-badge .deal-old{color:var(--muted);text-decoration:line-through;margin:0 .35rem;font-size:.95rem}
.deal-badge .deal-pct{display:inline-block;background:var(--blood);color:#fff;border-radius:999px;
  padding:.1rem .6rem;font-size:.82rem;font-weight:700;vertical-align:1px}
.deal-cta{margin:.3rem 0}
.active-deal .note{margin:.4rem 0 0;font-size:.76rem;color:var(--muted)}
.btn-steam{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:10px;
  font-weight:700;font-size:.92rem;border:1px solid transparent;
  background:linear-gradient(180deg,var(--gold),#a8842f);color:#1a1206;transition:.15s}
.btn-steam:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,160,74,.3)}

/* Homepage official-trailer embed: 16:9 responsive wrapper, lazy iframe */
.trailer-wrap{position:relative;width:100%;max-width:760px;margin:0 auto;
  aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--panel2);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.trailer-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:600px){
  .toc{position:static;float:none;width:auto;margin:0 0 1.1rem;max-height:none}
  .popular-cols{grid-template-columns:1fr}
  .longtail .lt-list{grid-template-columns:1fr}
  .longtail .lt-list li{border-bottom:1px solid var(--line)}
  .longtail .lt-list li:last-child{border-bottom:none}
  .hero h1{font-size:1.9rem}
  .trailer-wrap{max-width:100%;border-radius:10px}
}