@font-face{font-family:"Maguntia";src:url(assets/UnifrakturMaguntia.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alegreya Sans";font-weight:400;src:url(assets/Alegreya-Sans-wght-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alegreya Sans";font-weight:700;src:url(assets/Alegreya-Sans-wght-700.woff2) format("woff2");font-display:swap}
/* dark by design, and said so: dark-mode extensions such as Noir in Safari
   leave a page alone only when its styles carry a prefers-color-scheme rule */
@media (prefers-color-scheme: dark){:root{color-scheme:dark}}
:root{color-scheme:dark;
  --bg:#101215;--pane:#181b1f;--pane2:#1e2227;--line:rgba(228,218,194,.13);
  --ink:#e4dac2;--body:#d3c9b0;--dim:#9f998b;--gold:#d9a62b;--gold-dim:#c9a45a;
  --bone:#e4dac2;--madder:#b8483a;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:17px/1.6 "Alegreya Sans",system-ui,-apple-system,sans-serif;overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--gold)} a:hover{color:#f0c55a}

/* ---------- hero: the keep and the tarn at night (pass 62), mist rolling through it ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:30px 16px 40px;min-height:min(100svh,860px);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero .bg{position:absolute;inset:0;z-index:-3;background:url(assets/backdrop-keep.webp) center 30%/cover no-repeat;filter:brightness(.62) saturate(.9)}
.hero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,18,21,.2) 0%,transparent 35%,rgba(16,18,21,.35) 70%,var(--bg) 100%)}
.fog{position:absolute;left:0;right:0;z-index:-2;pointer-events:none;background:url(assets/fog.png) 0 0/1024px 100% repeat-x;
  animation:roll 30s linear infinite;will-change:background-position}
.fog.a{top:34%;height:320px;opacity:.95}
.fog.b{top:52%;height:260px;opacity:.7;animation-duration:19s;animation-direction:reverse;background-size:820px 100%}
.fog.c{top:12%;height:220px;opacity:.35;animation-duration:44s;background-size:1300px 100%}
@keyframes roll{from{background-position-x:0}to{background-position-x:-1024px}}
.fog.b{animation-name:rollb}@keyframes rollb{from{background-position-x:0}to{background-position-x:-820px}}
.fog.c{animation-name:rollc}@keyframes rollc{from{background-position-x:0}to{background-position-x:-1300px}}
@media (prefers-reduced-motion:reduce){.fog{animation-duration:120s!important}}

.crest{width:min(64vw,245px);aspect-ratio:1;mix-blend-mode:lighten;margin:0 auto -12px;
  -webkit-mask:radial-gradient(closest-side,#000 72%,transparent);mask:radial-gradient(closest-side,#000 72%,transparent);
  animation:rise 1.4s ease-out both}
/* on a big screen the crest larger, with the window's height (2026-10-05) */
@media(min-width:900px){.crest{width:clamp(245px,38vh,360px)}}
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--crest-offset,30px) + 10px))}to{opacity:1;transform:translateY(var(--crest-offset,30px))}}
/* the banner as the game's menu has it: 40% of the red, so the dusk shows
   through and darkens it; the words stay solid */
.wordmark-heading{margin:0;line-height:0}
/* the title large, clear of the crest: the lockup's own empty quarter above
   and below its letters sets it midway between the crest and the line */
.wordmark{display:block;width:min(88vw,560px);height:auto;margin:0 auto;transform:translate(var(--wordmark-x,-5px),var(--wordmark-y,0px));
  filter:brightness(.72) saturate(.82) drop-shadow(0 6px 12px rgba(0,0,0,.72))}
.tag{font-size:clamp(18px,4.6vw,21px);max-width:540px;margin:4px auto 0;color:var(--ink);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.stores{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0 0}
.stores span,.stores a{background:rgba(16,18,21,.6);border:1px solid rgba(217,166,43,.35);border-radius:8px;padding:9px 15px;color:var(--ink);font-size:14px;letter-spacing:.04em;backdrop-filter:blur(4px)}
.stores a{text-decoration:none}.stores a:hover{border-color:var(--gold)}
.stores b{color:var(--gold);font-weight:700}

nav{display:flex;justify-content:center;gap:22px;margin:22px 0 0;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
nav a{color:var(--dim);text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--gold);border-color:var(--gold)}

/* ---------- sections ---------- */
section{max-width:1040px;margin:0 auto;padding:56px 16px}
.eyebrow{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--gold);text-align:center}
h2{font:400 clamp(30px,7vw,42px)/1.15 "Maguntia",serif;color:var(--gold);text-align:center;margin:6px 0 12px}
.intro{max-width:620px;margin:0 auto 30px;text-align:center;color:var(--body);font-size:18px}
p{color:var(--body)}
.rule{height:1px;max-width:340px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(217,166,43,.5),transparent);position:relative}
.rule::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;background:var(--gold);transform:translateX(-50%) rotate(45deg)}

/* the game itself, in phone frames */
.shots{display:flex;gap:18px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.phone{width:min(260px,86vw);border-radius:30px;padding:10px;background:linear-gradient(160deg,#2a2e33,#15171a);
  box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06)}
.phone img{border-radius:22px;width:100%}
.phone figcaption{text-align:center;color:var(--dim);font-size:14px;padding:10px 6px 2px}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:34px}
.point{background:var(--pane);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.point h3{font-size:17px;color:var(--ink);margin-bottom:4px}
.point p{font-size:16px;line-height:1.5}

/* the rosters */
.roster{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.roster .unit{flex:0 1 150px}@media(min-width:900px){.roster .unit{flex-basis:130px}}
@media(min-width:900px){.roster:has(> .unit:nth-child(8)){max-width:600px;margin:0 auto}}
.unit{background:linear-gradient(180deg,var(--pane2),var(--pane));border:1px solid var(--line);border-radius:10px;padding:14px 12px 14px;text-align:center}
.unit img{width:88px;height:88px;margin:0 auto 8px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.unit h3{font:400 23px/1.1 "Maguntia",serif;color:var(--gold)}
.dead .unit h3{color:var(--bone)}
/* the game's own marks under each unit: health, walks, damage, reach, two by two */
.unit .marks{display:grid;grid-template-columns:auto auto;justify-content:center;gap:4px 14px;margin:6px 0 8px;font-weight:700;font-size:14px;color:var(--bone)}
.unit .marks span,.mki{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.unit .marks img{width:18px;height:18px}
.mki{font-weight:700;vertical-align:-3px}
.mki img{width:17px;height:17px}
.legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;margin:-4px 0 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.legend img{width:18px;height:18px;margin-left:8px}
.legend img:first-child{margin-left:0}
.unit p{font-size:14.5px;line-height:1.45}
.dead .unit{background:linear-gradient(180deg,#1f1c1d,#171516);border-color:rgba(184,72,58,.22)}

/* the marches */
.band{position:relative;isolation:isolate;overflow:hidden}
.band .bg{position:absolute;inset:0;z-index:-2;background:url(assets/screen.webp) center/cover;filter:brightness(.28) saturate(.8)}
.band .fog{top:40%;height:260px;opacity:.45}
.marches{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.march{background:rgba(20,22,26,.78);border:1px solid rgba(217,166,43,.28);border-radius:10px;padding:18px;text-align:center;backdrop-filter:blur(3px)}
.march img.map{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 12px;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.6)}
.march h3{font:400 26px/1.1 "Maguntia",serif;color:var(--gold)}
.march .n{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:4px 0 8px}
.march p{font-size:15.5px}
.biomes{display:flex;gap:8px;justify-content:center;margin-top:12px}
.biomes img{width:38px;height:38px;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.stars{display:flex;gap:4px;justify-content:center;margin:22px 0 0}
.stars img{width:34px;height:34px}

/* the close */
.close{text-align:center;padding-bottom:70px}
.close .sheet{width:min(800px,100%);margin:0 auto 22px;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.6);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.close .quote{font:400 clamp(22px,5vw,28px)/1.35 "Maguntia",serif;color:var(--ink);max-width:640px;margin:0 auto}
.icon{width:104px;height:104px;border-radius:24px;margin:26px auto 0;box-shadow:0 8px 22px rgba(0,0,0,.6)}

/* inner pages */
.hero.small{min-height:0;padding:26px 16px 22px}
.hero.small .crest{width:130px;animation:none;transform:translateY(30px)}
.hero.small .wordmark{width:min(78vw,245px);transform:translate(-5px,-28px)}
.hero.small .fog.a{top:30%;height:200px}.hero.small .fog.b{top:50%;height:160px}.hero.small .fog.c{display:none}
main{max-width:680px;margin:0 auto;padding:18px 16px 56px}
main h2{text-align:left;font-size:32px;margin:30px 0 10px}
main h3{font-size:17px;margin:22px 0 4px;color:var(--ink)}
main p,main ul{margin:0 0 12px}
main ul{padding-left:22px;color:var(--body)}
.muted{color:var(--dim);font-size:15px}
.card{background:var(--pane);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin:14px 0}
.card h3{margin-top:0}
footer{border-top:1px solid var(--line);text-align:center;padding:22px 16px 34px;color:var(--dim);font-size:14px}
footer a{color:var(--dim)}

.free{margin:14px auto 0;font-size:15px;color:var(--gold-dim);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.achs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.achs .ach{flex:0 1 150px}@media(min-width:900px){.achs .ach{flex-basis:152px}}
.ach{text-align:center;background:var(--pane);border:1px solid var(--line);border-radius:10px;padding:14px 10px}
.ach img{width:92px;height:92px;margin:0 auto 8px;border-radius:50%;box-shadow:0 6px 14px rgba(0,0,0,.6)}
.ach h3{font:400 20px/1.15 "Maguntia",serif;color:var(--gold)}
.ach p{font-size:14px;line-height:1.4;margin-top:4px}
.ach.secret img{filter:grayscale(1) brightness(.35) blur(2px)}
.ach.secret h3{color:var(--dim)}

/* the trailer, as wide as the page allows */
.trailer .yt{display:block;width:100%;max-width:960px;aspect-ratio:16/9;margin:8px auto 0;border-radius:8px;background:#000;border:0;padding:0;overflow:hidden;cursor:pointer;position:relative;
  box-shadow:0 0 0 1px rgba(217,166,43,.35),0 24px 60px rgba(0,0,0,.6)}

.trailer .yt img{width:100%;height:100%;object-fit:cover;display:block}
.ytplay{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(16,18,21,.75);box-shadow:0 0 0 2px var(--gold)}
.ytplay::after{content:"";position:absolute;left:34px;top:26px;border:16px solid transparent;border-left:26px solid var(--gold);border-right:0}
.trailer button.yt:hover .ytplay{background:rgba(120,20,20,.85)}

/* the way into the browser teaser */
.play{margin:14px auto 0;text-align:center}
.play a{display:inline-block;padding:11px 20px;border-radius:8px;border:1px solid var(--gold);color:var(--gold);font-weight:700;
  letter-spacing:.04em;text-decoration:none;background:rgba(217,166,43,.08);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.play a:hover{background:rgba(217,166,43,.18)}