/* Bohemia Unbound, the public site. Black like the owner's favourite slider page, the gold and vellum of the game's own
   pages (gamemodes/basicrp/ui/bu.css tokens), no fetched fonts, no images but our icons, the four banner paintings and the
   login screen's painting. The rows, the deck and the rails follow the Smooothy demo's FoodSlider.astro (MIT, THIRD_PARTY.md):
   --slide-w clamp(18rem, 25vw, 30rem), 2rem round each slide, the 4/5.5 block, black round them, dots and an arrow. */
:root {
  --gold: #e2c26a; --gold-hi: #f6e2a0; --gold-lo: #8f7434;
  --ink: #efe4c8; --dim: #b7a582; --faint: #7f7058;
  --leaf: #1c150d; --leaf-2: #2a2014;
  --edge: rgba(226, 194, 106, 0.45); --edge-soft: rgba(226, 194, 106, 0.18);
  --blood: #a33a2a; --green: #5cc08b;
  --lion: #d03030; --eagle: #3060d0; --wolf: #30a050; --mint: #d0a030;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "JetBrains Mono", monospace;
  --slide-w: clamp(18rem, 25vw, 30rem);
  --gutter: 16px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { position: relative; z-index: 0; margin: 0; background: #000; color: var(--ink); font: 16px/1.55 var(--serif); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: var(--gold); }
code { font-family: var(--mono); font-size: .92em; color: var(--gold-hi); }
.skip { position: absolute; left: -999px; top: 8px; background: #000; color: var(--gold); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* ---- the backdrop: one scene. The painting fills the hero, fades long into the black, and comes back faint and blurred behind
   the rows, with a slow parallax (site.js sets --scene from the scroll: 0 while the hero shows, so there is never a seam). A
   1px grain over everything so no gradient bands. ---- */
.scene { position: fixed; inset: -14% 0; z-index: -2; pointer-events: none; opacity: calc(var(--scene, 0) * .11);
  background: url("img/bg.jpg") 50% 40% / cover no-repeat; filter: blur(10px) saturate(.6); transform: translate3d(0, var(--sy, 0px), 0) scale(1.06); will-change: transform, opacity; }
.grain-fx { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: var(--noise); }
.glcanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; display: none; }
.glcanvas.on { display: block; }

/* ---- the top bar ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px var(--gutter);
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge-soft); }
.mark { display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font-size: 17px; letter-spacing: .06em; }
.mark img { width: 28px; height: 28px; }
.top nav { display: flex; gap: 16px; margin-left: auto; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.top nav a { color: var(--dim); text-decoration: none; transition: color .2s; }
.top nav a:hover { color: var(--gold-hi); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--edge-soft); border-radius: 999px;
  color: var(--dim); text-decoration: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.live-pill.on i { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.8s infinite; }
.live-pill.off i { background: var(--blood); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(92, 192, 139, .6); } 70% { box-shadow: 0 0 0 8px rgba(92, 192, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 192, 139, 0); } }

/* ---- hero: the login screen's painting with the loading page's own layering (ui/loading/loading.css #art and #art::after),
   a dark scrim under the words, and a long fade into the black below ---- */
.hero { position: relative; min-height: calc(100svh - 52px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 56px var(--gutter) 120px; overflow: hidden; }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("img/bg.jpg") 50% 40% / cover no-repeat,
    radial-gradient(ellipse at 28% 42%, rgba(150, 112, 62, .35), transparent 60%),
    linear-gradient(160deg, #2b2016 0%, #1a130c 38%, #3a352d 78%, #57514a 100%); }
.hero-bg::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .78) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 42%, transparent 58%, rgba(0, 0, 0, .4)),
    radial-gradient(ellipse 46% 44% at 50% 46%, rgba(0, 0, 0, .55), transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .12) 24%, transparent 42%); }
.hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .04) 10%, rgba(0, 0, 0, .14) 22%, rgba(0, 0, 0, .3) 36%, rgba(0, 0, 0, .5) 52%, rgba(0, 0, 0, .7) 66%, rgba(0, 0, 0, .86) 80%, rgba(0, 0, 0, .96) 92%, #000 100%); }
.kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--dim); }
.hero h1 { margin: 0; font: 400 clamp(54px, 11vw, 132px)/.92 var(--serif); letter-spacing: .04em; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 40px rgba(0, 0, 0, .9), 0 0 70px rgba(226, 194, 106, .2); }
.tagline { margin: 18px 0 0; font: 400 clamp(20px, 2.6vw, 30px)/1.1 var(--serif); font-style: italic; letter-spacing: .12em; color: var(--gold-hi); text-shadow: 0 1px 0 #000, 0 0 24px rgba(0, 0, 0, .9); }
.tagline::before, .tagline::after { content: ""; display: inline-block; width: 48px; height: 1px; vertical-align: middle; margin: 0 14px; background: linear-gradient(90deg, transparent, var(--gold)); }
.tagline::after { background: linear-gradient(90deg, var(--gold), transparent); }
.spears { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(860px, 100%); }
.spears li { padding: 14px 18px; border: 1px solid var(--edge-soft); border-left: 2px solid var(--gold); background: rgba(8, 6, 3, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-align: left; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: var(--ink); text-shadow: 0 1px 2px #000; }
.spears b { display: block; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--gold-hi); margin-bottom: 4px; }
.addr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; }
.addr code { font-size: 17px; padding: 11px 16px; border: 1px solid var(--edge); background: rgba(14, 10, 6, .82); border-radius: 3px; }
.btn { display: inline-block; font: 600 13px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: #140f09; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #c9a84e);
  border: 1px solid var(--gold-lo); border-radius: 3px; padding: 13px 18px; cursor: pointer; text-decoration: none; transition: filter .2s, transform .2s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.big { font-size: 15px; padding: 15px 26px; box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(226, 194, 106, .25); }
.btn.ghost { background: transparent; color: var(--gold); border-color: var(--edge); }
.btn.done { background: var(--green); border-color: var(--green); color: #061; }
.launcher { margin: 12px 0 0; font-size: 13.5px; color: var(--dim); text-shadow: 0 1px 2px #000, 0 0 14px #000; }
.launcher code { font-size: .95em; }
.strip { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: min(760px, 100%);
  background: var(--edge-soft); border: 1px solid var(--edge-soft); border-radius: 4px; overflow: hidden; }
.strip li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 14px; background: rgba(12, 9, 5, .9); }
.strip img { width: 36px; height: 36px; margin-bottom: 4px; }
.strip b { font: 400 26px/1 var(--serif); color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.motd { margin: 18px auto 0; max-width: 60ch; font-style: italic; color: var(--dim); min-height: 1.5em; text-shadow: 0 1px 2px #000; }
.online { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.online li { font-size: 13px; padding: 4px 10px; border: 1px solid var(--edge-soft); border-radius: 999px; color: var(--ink); background: rgba(0, 0, 0, .5); }

/* ---- sections ---- */
.sec { position: relative; padding: 72px 0 24px; }
.sec-h { padding: 0 var(--gutter); max-width: 900px; margin: 0 auto 28px; text-align: center; }
.sec-h.later { margin-top: 56px; }
.sec h2 { margin: 0; font: 400 clamp(32px, 5vw, 52px)/1.05 var(--serif); letter-spacing: .03em; color: var(--gold); text-shadow: 0 2px 0 #000; }
.sub { margin: 14px auto 0; max-width: 64ch; color: var(--dim); text-wrap: pretty; }
.note { margin: 10px var(--gutter) 0; text-align: center; color: var(--faint); font-style: italic; }

/* ---- why here: the two spear points as two big cards ---- */
.why { padding-top: 40px; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.why article { position: relative; padding: 28px 28px 26px; border: 1px solid var(--gold-lo); border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, var(--leaf-2), var(--leaf) 60%, #140f09); box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0, 0, 0, .6), inset 0 0 80px rgba(0, 0, 0, .45); }
.why article::before, .why article::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--gold); opacity: .8; pointer-events: none; }
.why article::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; } .why article::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.why .kicker { color: var(--gold); }
.why h3 { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--serif); color: var(--gold-hi); text-shadow: 0 2px 0 #000; text-wrap: balance; }
.why p { margin: 14px 0 0; color: var(--ink); font-size: 15.5px; }
.ladder { list-style: none; margin: 26px 0 0; padding: 0; position: relative; }
.ladder::before { content: ""; position: absolute; left: 70px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--gold), var(--edge-soft)); }
.ladder li { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 28px; align-items: baseline; padding: 9px 0 9px; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc((6 - var(--i)) * 90ms); }
.ladder li::before { content: ""; position: absolute; left: 66px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--leaf); border: 1px solid var(--gold); box-shadow: 0 0 10px rgba(226, 194, 106, .4); }
.ladder li:first-child::before { background: var(--gold); }
.why article.in .ladder li { opacity: 1; transform: none; }
.ladder b { font: 400 22px/1 var(--serif); color: var(--gold-hi); text-align: right; font-variant-numeric: tabular-nums; }
.ladder li:first-child b { font-size: 26px; }
.ladder span { display: block; font-size: 16.5px; color: var(--ink); }
.ladder li:first-child span { color: var(--gold-hi); font-size: 19px; }
.ladder small { display: block; grid-column: 2; font-size: 12.5px; letter-spacing: .02em; color: var(--dim); }
.death .pict { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 26px 0 0; padding: 22px 16px; border: 1px solid var(--edge-soft); border-radius: 4px; background: rgba(0, 0, 0, .35); }
.death .pict > div { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.death .pict img { width: 96px; height: 96px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.death .drop { position: relative; }
.death .drop img { opacity: .55; filter: grayscale(.6) drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); transform: rotate(14deg) translateY(10px); }
.death .drop i { position: absolute; left: 50%; top: 48px; width: 120px; height: 2px; margin-left: -60px; background: var(--blood); transform: rotate(-28deg); box-shadow: 0 0 12px var(--blood); }
.death .keep img { filter: drop-shadow(0 0 22px rgba(226, 194, 106, .35)) drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); }
.death .keep span { color: var(--gold-hi); }
.death .vs { font: 400 44px/1 var(--serif); color: var(--gold-lo); }
.death .line { font-size: 17px; line-height: 1.5; color: var(--gold-hi); text-wrap: pretty; }
.facts { list-style: none; margin: 20px 0 0; padding: 0; }
.facts li { padding: 9px 0; border-top: 1px solid var(--edge-soft); font-size: 14.5px; color: var(--ink); }
.facts b { font-weight: 400; color: var(--gold-hi); margin-right: 6px; white-space: nowrap; }

/* ---- the Smooothy rows (FoodSlider.astro): a window k whole slots wide centred with black round it (site.js sets --roww and
   --lead), the middle slot the active one, full size; the others smaller. The DOM face is the fallback and the pointer target;
   with WebGL on, the planes draw the cards and the faces hide (.gl-on). ---- */
.fs { position: relative; width: var(--roww, 100%); max-width: 100%; margin-inline: auto; overflow: clip; padding: 24px 0 60px; }
.fs ul[data-slider="wrapper"] { list-style: none; margin: 0; padding: 0 0 0 var(--lead, 0px); display: flex; flex-direction: row; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.fs ul[data-slider="wrapper"]:active { cursor: grabbing; }
.gslide { flex: none; padding: 0 2rem; }
.card { --p: 0; --s: 1; --ly: 0px; position: relative; display: block; width: var(--slide-w); aspect-ratio: 4 / 5.5; outline: none; isolation: isolate;
  transform: scale(var(--s)) translateY(var(--ly)); will-change: transform; transition: translate .3s, filter .4s; cursor: pointer; }
.card:hover, .card:focus-visible { --ly: -10px; }
.card:focus-visible .face { outline: 1px solid var(--gold-hi); outline-offset: 3px; }
.face { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; transform: skewX(var(--sk, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(180deg, var(--leaf-2), var(--leaf) 55%, #140f09); border: 1px solid var(--gold-lo); box-shadow: 0 0 0 1px #000, 0 22px 60px rgba(0, 0, 0, .7), inset 0 0 70px rgba(0, 0, 0, .45); }
.gslide.active .face { border-color: var(--gold); box-shadow: 0 0 0 1px #000, 0 26px 70px rgba(0, 0, 0, .75), 0 0 36px rgba(226, 194, 106, .12); }
.fs.gl-on .face { visibility: hidden; }
.face::before, .face::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); z-index: 3; pointer-events: none; opacity: .8; }
.face::before { left: 5px; top: 5px; border-right: 0; border-bottom: 0; }
.face::after { right: 5px; bottom: 5px; border-left: 0; border-top: 0; }
.face .shine { position: absolute; inset: -40%; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(246, 226, 160, .14) 50%, transparent 58%); transform: translateX(calc(var(--p) * -60%)); }
.face .grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .28; mix-blend-mode: overlay; background-image: var(--noise); }
.face .body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 18px; }
.face .tag { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face h3 { margin: 6px 0 0; font: 400 clamp(22px, calc(var(--slide-w) * .11), 30px)/1.1 var(--serif); color: var(--gold); letter-spacing: .02em; text-shadow: 0 2px 0 #000; }
.face p { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.face .icon { position: absolute; right: 16px; top: 16px; width: 56px; height: 56px; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); transform: translateY(var(--fy, 0)) rotate(var(--fr, 0deg)); }
.face .big { margin: auto 0 0; align-self: center; width: 42%; aspect-ratio: 1; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); transform: translateY(var(--fy, 0)) rotate(var(--fr, 0deg)); }
.face .foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--edge-soft); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; gap: 8px; }
.face .foot b { color: var(--gold-hi); font-weight: 400; }
/* banner cards: the painting fills the card, the words sit on a dark foot */
.banner .paint { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.04) translateX(calc(var(--p) * 4%)); transition: transform .4s; }
.banner .icon { width: 64px; height: 64px; }
.banner .body { justify-content: flex-end; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .93)); }
.banner h3 { color: #fff; }
.banner .tag { color: var(--c, var(--gold)); font-weight: 700; }
.banner .perk { margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--c, var(--gold)); background: rgba(0, 0, 0, .45); font-size: 13px; color: var(--ink); }
.banner .perk b { color: var(--gold-hi); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; display: block; margin-bottom: 2px; }
.banner .home { font-size: 12px; color: var(--dim); margin-top: 8px; }
.banner .home img { display: inline-block; width: 18px; height: 18px; vertical-align: -5px; margin-right: 4px; }
/* town cards */
.town .holder { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 10px; border-radius: 3px; background: rgba(0, 0, 0, .4); border: 1px solid var(--edge-soft); font-size: 13px; align-self: flex-start; }
.town .holder i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--faint)); box-shadow: 0 0 8px var(--c, transparent); }
.town .lvl { display: flex; gap: 4px; margin-top: 12px; }
.town .lvl i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.town .lvl i.on { background: var(--gold); box-shadow: 0 0 6px rgba(226, 194, 106, .5); }
.town p { padding-right: 70px; }
.town .raidon { color: #ff8a70; }

/* dots and arrows (FoodSlider.astro) */
.fsui { position: absolute; left: 0; right: 0; bottom: 12px; height: 36px; display: flex; justify-content: center; align-items: center; z-index: 3; }
.fsui [data-slider="controls"] ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.fsui [data-slider="controls"] button { display: block; background: none; border: 0; padding: 4px; cursor: pointer; }
.fsui [data-slider="controls"] button div { width: .45rem; aspect-ratio: 1; border-radius: 50%; outline: 1px solid var(--gold); transition: background-color .3s; }
.fsui [data-slider="controls"] .active button { pointer-events: none; }
.fsui [data-slider="controls"] .active button div { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.fsui [data-slider="arrows"] { list-style: none; margin: 0; padding: 0 24px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2.2rem; pointer-events: none; }
.fsui [data-slider="arrows"] button { pointer-events: auto; background: none; border: 0; padding: 6px; cursor: pointer; opacity: .75; transition: opacity .2s; }
.fsui [data-slider="arrows"] button:hover { opacity: 1; }
.fsui [data-slider="arrows"] div { width: 18px; height: 16px; background: var(--gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath d='M16.0022 8.5242H0V6.56267H16.0022V8.5242ZM9.67406 15.0869H7.05552L14.596 7.50711L7.07977 0H9.69831L17.2145 7.53133L9.67406 15.0869Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath d='M16.0022 8.5242H0V6.56267H16.0022V8.5242ZM9.67406 15.0869H7.05552L14.596 7.50711L7.07977 0H9.69831L17.2145 7.53133L9.67406 15.0869Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.fsui .flip { transform: rotate(180deg); }

/* the raid line */
.raid { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px var(--gutter) 0; color: var(--dim); font-style: italic; }
.raid img { width: 32px; height: 32px; }

/* the three plain cards */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1100px; margin: 40px auto 0; padding: 0 var(--gutter); }
.trio article { position: relative; padding: 22px; border: 1px solid var(--gold-lo); border-radius: 4px; background: linear-gradient(180deg, var(--leaf-2), var(--leaf)); box-shadow: 0 0 0 1px #000, inset 0 0 50px rgba(0, 0, 0, .4); }
.trio img { width: 48px; height: 48px; margin-bottom: 10px; }
.trio h3 { margin: 0; font: 400 24px/1.1 var(--serif); color: var(--gold); }
.trio p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink); }

/* the rules: a Smooothy rail (infinite: false, snap: false), static when the five fit the width */
.rail { overflow: clip; padding: 6px 0 14px; }
.rules { list-style: none; margin: 0; padding: 0 max(var(--gutter), calc(50vw - 880px)); display: flex; gap: 14px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.rail.static .rules { justify-content: center; cursor: auto; }
.rules:active { cursor: grabbing; }
.rail.static .rules:active { cursor: auto; }
.rules li { flex: none; width: clamp(16rem, 20vw, 20rem); min-height: 200px; padding: 20px 20px 18px; border: 1px solid var(--gold-lo); border-radius: 4px; background: linear-gradient(180deg, var(--leaf-2), var(--leaf)); box-shadow: 0 0 0 1px #000, inset 0 0 50px rgba(0, 0, 0, .4); }
.rules span { display: block; font: 400 44px/1 var(--serif); color: var(--gold); text-shadow: 0 2px 0 #000; margin-bottom: 12px; }
.rules p { margin: 0; font-size: 15.5px; line-height: 1.5; }

/* the steps */
.steps { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { position: relative; padding: 26px 22px 22px; border: 1px solid var(--gold-lo); border-radius: 4px; background: linear-gradient(180deg, var(--leaf-2), var(--leaf)); box-shadow: 0 0 0 1px #000; }
.steps b { position: absolute; right: 16px; top: 10px; font: 400 54px/1 var(--serif); color: rgba(226, 194, 106, .18); }
.steps h3 { margin: 0; font: 400 22px/1.15 var(--serif); color: var(--gold); padding-right: 40px; }
.steps p { margin: 10px 0 0; font-size: 14.5px; }
.steps em { font-style: normal; color: var(--gold-hi); }

/* the leaderboard deck: one board centred at a time, the one in focus full size, the others smaller and dimmer */
.deck { --sw: clamp(20rem, 30vw, 29rem); position: relative; padding: 10px 0 60px; }
.dkv { overflow: clip; }
.dk { list-style: none; margin: 0; padding: 0 calc(50% - var(--sw) / 2); display: flex; flex-direction: row; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.dk:active { cursor: grabbing; }
.dslide { flex: none; width: var(--sw); padding: 0 14px; }
.scard { --sc: 1; --op: 1; min-height: 380px; border: 1px solid var(--gold-lo); border-radius: 4px; background: linear-gradient(180deg, var(--leaf-2), var(--leaf)); box-shadow: 0 0 0 1px #000, 0 18px 40px rgba(0, 0, 0, .5); padding: 18px 18px 10px;
  scale: var(--s, 1); opacity: var(--op); transition: border-color .2s; }
.dslide.active .scard { border-color: var(--gold); }
.scard h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 10px; font: 400 22px/1 var(--serif); color: var(--gold); }
.scard h3 img { width: 30px; height: 30px; }
.scard ol { list-style: none; margin: 0; padding: 0; }
.scard li { display: grid; grid-template-columns: 24px 1fr auto; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--edge-soft); font-size: 15px; }
.scard li span { color: var(--faint); font-variant-numeric: tabular-nums; }
.scard li small { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.scard li b { font-weight: 400; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scard li.empty { grid-template-columns: 1fr; color: var(--faint); font-style: italic; }

/* footer */
.foot { margin-top: 64px; padding: 28px var(--gutter) 40px; border-top: 1px solid var(--edge-soft); text-align: center; color: var(--dim); font-size: 14px; }
.foot p { margin: 4px 0; }
.foot .credit { font-size: 12.5px; color: var(--faint); }

/* motion and widths */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card, .face, .face .shine, .banner .paint, .ladder li { transition: none; } .scene { transform: none; } .live-pill.on i { animation: none; } .ladder li { opacity: 1; transform: none; } }
@media (max-width: 960px) { .trio, .steps, .why-grid { grid-template-columns: 1fr; } .top nav { display: none; } }
@media (max-width: 640px) {
  :root { --slide-w: min(72vw, 20rem); }
  .gslide { padding: 0 1rem; }
  .scene { filter: blur(6px) saturate(.6); }
  .hero { min-height: auto; padding: 44px var(--gutter) 90px; }
  .hero-bg { background-position: 40% 50%, 0 0, 0 0; }
  .spears { grid-template-columns: 1fr; }
  .tagline::before, .tagline::after { width: 22px; margin: 0 8px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip b { font-size: 22px; }
  .addr code { font-size: 15px; }
  .why article { padding: 22px 18px 20px; }
  .ladder::before { left: 54px; } .ladder li { grid-template-columns: 44px 1fr; column-gap: 22px; } .ladder li::before { left: 50px; }
  .death .pict img { width: 64px; height: 64px; } .death .drop i { width: 84px; margin-left: -42px; top: 32px; }
  .rules li { width: min(74vw, 18rem); }
  .deck { --sw: min(84vw, 24rem); }
  .fsui [data-slider="arrows"] { padding: 0 8px; gap: 1.2rem; }
  .mark b { display: none; }
  .live-pill { margin-left: auto; }
}