/* حُماة الرمال: the site speaks in the game's own materials (scripts/ui.gd, docs/PLAN_UI_UX.md 3):
   desert night for the page, carved plaster for content, mud brick and merlons for edges, Sadu
   weave for bands, brass for the one action. Display type is the game's Baloo Bhaijaan 2 at 800;
   reading type is the game's Noto Sans Arabic. */

@font-face{font-family:"Baloo Bhaijaan 2";src:url(../fonts/baloo-bhaijaan-2-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url(../fonts/noto-sans-arabic-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url(../fonts/noto-sans-arabic-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
 --night-0:#07111b;--night-1:#0b1826;--night-2:#12263a;--night-3:#1a3249;--dusk:#23405c;
 --sky-0:#0a1b1d;--sky-1:#0d2224;
 --cream:#f7ead0;--cream-2:#e4d6ba;--muted:#a9bcc8;--muted-2:#8aa0af;
 --plaster:#efe3cc;--plaster-hi:#f7eedd;--plaster-lo:#dcc6a2;--plaster-line:#c2a57a;--ink:#3a2616;--ink-2:#634a31;
 --mud:#b98552;--mud-hi:#d9a86f;--mud-lo:#7d5230;--mud-rim:#2b1a0c;
 --brass:#f2c36b;--brass-top:#ffe396;--brass-bottom:#f0b13e;--brass-lip:#a26b19;--brass-rim:#4a2c05;--brass-ink:#6b3f08;
 --sadu:#b8352c;--sadu-dark:#1c1310;--sadu-white:#f1e4cc;--sadu-ochre:#d99a3d;
 --roshan:#2aa6ad;--coral:#e0674f;--energy:#8a62bf;--energy-hi:#c29cf2;--energy-lo:#4f3281;
 --r0:#9cbacb;--r1:#e3aa58;--r2:#bc83ed;--r3:#67e2cd;
 --display:"Baloo Bhaijaan 2","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
 --body:"Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
 --gut:clamp(16px,5vw,48px);
 --wrap:1200px;
 --nav-h:64px;
 /* The Najdi parapet: a row of triangular merlons, used as the top edge of walls and sheets. */
 --merlons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M3 16 12.2 2.4Q14 .2 15.8 2.4L25 16Z'/%3E%3C/svg%3E");
 /* A band of Sadu weave: black edges, white rules, a red field of white eyes and ochre diamonds. */
 --sadu-band:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%231c1310'/%3E%3Crect y='3' width='48' height='1.6' fill='%23f1e4cc'/%3E%3Crect y='19.4' width='48' height='1.6' fill='%23f1e4cc'/%3E%3Crect y='5.6' width='48' height='12.8' fill='%23a8322a'/%3E%3Cpath d='M12 6.4 17.6 12 12 17.6 6.4 12Z' fill='%23f1e4cc'/%3E%3Cpath d='M12 9.4 14.6 12 12 14.6 9.4 12Z' fill='%231c1310'/%3E%3Cpath d='M36 8.6 39.4 12 36 15.4 32.6 12Z' fill='%23d99a3d'/%3E%3Cpath d='M0 6.4 2.4 8.8 0 11.2ZM48 6.4 45.6 8.8 48 11.2ZM24 6.4 26.4 8.8 24 11.2 21.6 8.8ZM0 17.6 2.4 15.2 0 12.8ZM48 17.6 45.6 15.2 48 12.8ZM24 17.6 26.4 15.2 24 12.8 21.6 15.2Z' fill='%231c1310'/%3E%3C/svg%3E");
 /* The game's desert-night page: a faint field of stars over the night blue (PLAN_UI_UX.md 3.3). */
 --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Ccircle cx='155' cy='72' r='1.3' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='35' cy='257' r='0.8' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='28' cy='244' r='0.6' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='208' cy='34' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='204' cy='397' r='0.6' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='303' cy='280' r='0.6' fill='%23fff' fill-opacity='0.5'/%3E%3Ccircle cx='281' cy='24' r='0.7' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='267' cy='64' r='0.9' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='260' cy='274' r='1.1' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='49' cy='274' r='0.7' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='47' cy='342' r='1.1' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='297' cy='238' r='1.1' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='373' cy='223' r='0.9' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='144' cy='381' r='1.3' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='39' cy='144' r='0.9' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='350' cy='138' r='0.6' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='246' cy='79' r='0.8' fill='%23fff' fill-opacity='0.25'/%3E%3Ccircle cx='448' cy='202' r='1.3' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='367' cy='275' r='0.8' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='334' cy='285' r='1.1' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='33' cy='45' r='0.8' fill='%23fff' fill-opacity='0.4'/%3E%3Ccircle cx='335' cy='31' r='1.3' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='311' cy='477' r='0.9' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='344' cy='426' r='0.8' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='452' cy='171' r='1.1' fill='%23fff' fill-opacity='0.18'/%3E%3Ccircle cx='237' cy='105' r='0.8' fill='%23fff' fill-opacity='0.25'/%3E%3C/svg%3E");
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;background:var(--night-1);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{margin:0;background:var(--night-1);color:var(--cream-2);font:400 1.0625rem/1.9 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:800;color:var(--cream);line-height:1.3;text-wrap:balance}
h2{font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem);line-height:1.25}
h3{font-size:1.3rem}
p{text-wrap:pretty}
a{color:inherit}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit}
strong{color:var(--cream);font-weight:700}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
::selection{background:#6b4a1c;color:var(--cream)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.95;color:var(--cream-2);max-width:40em}
.skip{position:fixed;top:10px;inset-inline-start:10px;z-index:200;padding:10px 18px;border-radius:10px;background:var(--brass);color:var(--ink);font-weight:700;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ------------------------------------------------------------------ buttons: the game's brass */
.btn{--lip:6px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:56px;padding:.55em 1.5em calc(.55em + var(--lip));border:0;border-radius:16px;font:800 1.25rem/1.2 var(--display);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .15s linear,box-shadow .08s linear,padding .08s linear}
.btn--brass{color:#fffaf0;background:linear-gradient(var(--brass-top),var(--brass-bottom) 64%);box-shadow:inset 0 calc(-1 * var(--lip)) 0 var(--brass-lip),inset 0 2px 0 rgba(255,255,255,.6),0 0 0 2.5px var(--brass-rim),0 5px 0 -1px rgba(0,0,0,.35);text-shadow:0 0 1px var(--brass-ink),-1px -1px 0 var(--brass-ink),1px -1px 0 var(--brass-ink),-1px 1px 0 var(--brass-ink),1px 1px 0 var(--brass-ink),0 2px 0 var(--brass-ink),-1.5px 0 0 var(--brass-ink),1.5px 0 0 var(--brass-ink)}
.btn--night{color:var(--cream);background:linear-gradient(#4f82ab,#2d5779 64%);box-shadow:inset 0 calc(-1 * var(--lip)) 0 #1a364d,inset 0 2px 0 rgba(255,255,255,.3),0 0 0 2.5px #08131d,0 5px 0 -1px rgba(0,0,0,.35);text-shadow:0 1px 0 #0c2233,0 0 2px #0c2233}
.btn:hover{filter:brightness(1.07) saturate(1.05)}
.btn:active{--lip:2px;padding-top:calc(.55em + 4px);filter:brightness(.97)}
.btn--big{flex-direction:column;gap:.1em;min-height:66px;padding-inline:1.7em;font-size:1.4rem;line-height:1.15}
.btn--big small{font:800 .66em/1.2 var(--display);color:#fff4d6;opacity:.95}
.btn--small{--lip:4px;min-height:40px;padding:.3em 1em calc(.3em + var(--lip));font-size:1.05rem;border-radius:12px}
.btn--small:active{--lip:1px;padding-top:calc(.3em + 3px)}

/* ------------------------------------------------------------------ the nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:10px var(--gut) 0;pointer-events:none}
.nav__bar{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,2vw,28px);max-width:var(--wrap);height:var(--nav-h);margin-inline:auto;padding-inline:16px 12px;border-radius:18px;background:rgba(8,18,28,.93);box-shadow:inset 0 1px 0 rgba(247,234,208,.07),inset 0 0 0 1px rgba(247,234,208,.06);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
.nav__brand{display:flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;color:var(--cream);font:800 1.3rem/1 var(--display);white-space:nowrap}
.nav__brand img{width:34px;height:34px;flex:none}
.nav__links{display:flex;gap:clamp(8px,1.6vw,26px);margin-inline:auto}
.nav__links a{display:flex;align-items:center;min-height:48px;padding-inline:4px;color:var(--cream-2);text-decoration:none;font-size:1rem;transition:color .15s linear}
.nav__links a:hover{color:var(--brass)}
.nav__links a[aria-current="true"],.nav__links a[aria-current="page"]{color:var(--cream);font-weight:700}
.nav__menu{display:none;position:relative}
.nav__menu summary{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;cursor:pointer;list-style:none}
.nav__menu summary::-webkit-details-marker{display:none}
.nav__burger,.nav__burger::before,.nav__burger::after{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--cream);transition:transform .2s ease,background-color .2s linear}
.nav__burger{position:relative}
.nav__burger::before,.nav__burger::after{content:"";position:absolute;inset-inline:0}
.nav__burger::before{top:-7px}.nav__burger::after{top:7px}
.nav__menu[open] .nav__burger{background:transparent}
.nav__menu[open] .nav__burger::before{transform:translateY(7px) rotate(45deg)}
.nav__menu[open] .nav__burger::after{transform:translateY(-7px) rotate(-45deg)}
.nav__sheet{position:absolute;top:calc(100% + 12px);inset-inline-end:-12px;width:min(78vw,300px);padding:10px;border-radius:18px;background:#0c1b2a;box-shadow:inset 0 0 0 1px rgba(247,234,208,.08),0 18px 40px -12px rgba(0,0,0,.7)}
.nav__sheet a{display:flex;align-items:center;min-height:50px;padding-inline:14px;border-radius:12px;color:var(--cream);text-decoration:none;font-size:1.05rem}
.nav__sheet a:hover{background:var(--night-3)}
@media (max-width:899px){
 :root{--nav-h:56px}
 .nav{padding-top:8px}
 .nav__links{display:none}
 .nav__get{margin-inline-start:auto}
 .nav__menu{display:block}
 .nav__bar{padding-inline:10px 6px;gap:8px}
 .nav__brand{font-size:1.15rem}
 .nav__brand img{width:30px;height:30px}
}

/* ------------------------------------------------------------------ the card, as the game draws it */
.card{--w:150px;--frame:linear-gradient(160deg,#f3f7f8,#bccbd3 58%,#9cbacb);--rim:#23323b;--crest:none;position:relative;display:block;flex:none;width:var(--w);aspect-ratio:3/4;padding:calc(var(--w) * .045);border-radius:calc(var(--w) * .09);background:var(--frame);box-shadow:0 0 0 2px var(--rim),0 calc(var(--w) * .035) 0 calc(var(--w) * -.01) rgba(0,0,0,.28);color:var(--cream);text-decoration:none;isolation:isolate}
.card__art{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--w) * .055);background:#2a2018}
.card__name{position:absolute;inset-inline:calc(var(--w) * .045);bottom:calc(var(--w) * .045);padding:calc(var(--w) * .12) calc(var(--w) * .03) calc(var(--w) * .045);border-radius:0 0 calc(var(--w) * .055) calc(var(--w) * .055);background:linear-gradient(rgba(14,9,5,0),rgba(14,9,5,.72) 42%,rgba(14,9,5,.9));font:800 calc(var(--w) * .105)/1.15 var(--display);text-align:center;color:#fff6e4;text-shadow:0 1px 0 #1b1006,0 0 3px #1b1006;overflow-wrap:anywhere}
.card__cost{position:absolute;top:calc(var(--w) * -.075);inset-inline-end:calc(var(--w) * -.075);width:calc(var(--w) * .3);aspect-ratio:1;filter:drop-shadow(0 0 1px var(--energy-lo)) drop-shadow(0 0 1px var(--energy-lo)) drop-shadow(0 2px 0 rgba(20,8,40,.55))}
.card__cost span{display:grid;place-items:center;width:100%;height:100%;padding-top:calc(var(--w) * .018);background:radial-gradient(circle at 45% 32%,var(--energy-hi),var(--energy) 55%,#6a47a3);clip-path:polygon(50% 0,64.64% 14.64%,85.36% 14.64%,85.36% 35.36%,100% 50%,85.36% 64.64%,85.36% 85.36%,64.64% 85.36%,50% 100%,35.36% 85.36%,14.64% 85.36%,14.64% 64.64%,0 50%,14.64% 35.36%,14.64% 14.64%,35.36% 14.64%);font:800 calc(var(--w) * .16)/1 var(--display);color:#fff;text-shadow:0 0 2px #2d1653,0 1px 0 #2d1653}
.card::before{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(100% - 1px);translate:-50% 0;width:var(--crest-w,0);height:calc(var(--w) * .075);background:var(--crest-c,transparent);-webkit-mask:var(--merlons) repeat-x left bottom/calc(var(--w) * .13) 100%;mask:var(--merlons) repeat-x left bottom/calc(var(--w) * .13) 100%}
.card--r1{--frame:radial-gradient(circle at 9% 6%,#ffe8a6 0 1.6%,#8a5a22 2.3%,transparent 2.9%),radial-gradient(circle at 91% 6%,#ffe8a6 0 1.6%,#8a5a22 2.3%,transparent 2.9%),radial-gradient(circle at 9% 94.5%,#ffe8a6 0 1.6%,#8a5a22 2.3%,transparent 2.9%),radial-gradient(circle at 91% 94.5%,#ffe8a6 0 1.6%,#8a5a22 2.3%,transparent 2.9%),linear-gradient(160deg,#f0bd6c,#b77c43 42%,#7d4f2a);--rim:#231004;--crest-w:calc(var(--w) * .39);--crest-c:#d49a55}
.card--r2{--frame:linear-gradient(160deg,#f1ddff,#c690f0 40%,#8a57c4 78%,#6b3fa3);--rim:#26123f;--crest-w:calc(var(--w) * .65);--crest-c:#b980ea}
.card--r3{--frame:conic-gradient(from 200deg at 50% 42%,#f1fffb,#9fe9dc,#f7e9ff,#c9f4ec,#fff4de,#8ee0d1,#f1fffb);--rim:#0b3531;--crest-w:0}
.card--r3::after{content:"";position:absolute;left:50%;bottom:calc(100% - 3px);translate:-50% 0;width:calc(var(--w) * .34);height:calc(var(--w) * .1);background:radial-gradient(circle at 50% 60%,#fffdf7 0 18%,#bfeee6 34%,transparent 38%) 50% 0/34% 100% no-repeat,radial-gradient(circle at 50% 70%,#fffdf7 0 14%,#bfeee6 28%,transparent 32%) 0 100%/34% 80% no-repeat,radial-gradient(circle at 50% 70%,#fffdf7 0 14%,#bfeee6 28%,transparent 32%) 100% 100%/34% 80% no-repeat;filter:drop-shadow(0 0 1px #0b3531)}
.card--foe{box-shadow:0 0 0 2px var(--rim),0 0 0 calc(2px + var(--w) * .025) var(--coral),0 calc(var(--w) * .035) 0 calc(var(--w) * -.01) rgba(0,0,0,.28)}
a.card{transition:translate .22s cubic-bezier(.2,.8,.2,1)}
a.card:hover{translate:0 -4px}
a.card:focus-visible{outline-offset:6px}

/* ------------------------------------------------------------------ the hero: dusk over Diriyah */
.hero{--hand-w:108px;--spread:.76;position:relative;z-index:3;overflow-x:clip;min-height:100vh;min-height:100svh;display:grid;align-content:start;justify-items:center;padding:calc(var(--nav-h) + 40px) var(--gut) calc(var(--hand-w) * .88 + 28px)}
.hero__stage{position:absolute;inset:0;overflow:hidden;background:var(--sky-0)}
.hero__gate{position:absolute;inset:0}
.hero__art{width:100%;height:100%;object-fit:cover;object-position:64% 30%;-webkit-mask:linear-gradient(#000 0,#000 64%,rgba(0,0,0,.93) 70%,rgba(0,0,0,.8) 76%,rgba(0,0,0,.6) 82%,rgba(0,0,0,.38) 88%,rgba(0,0,0,.18) 93%,rgba(0,0,0,.05) 97%,transparent);mask:linear-gradient(#000 0,#000 64%,rgba(0,0,0,.93) 70%,rgba(0,0,0,.8) 76%,rgba(0,0,0,.6) 82%,rgba(0,0,0,.38) 88%,rgba(0,0,0,.18) 93%,rgba(0,0,0,.05) 97%,transparent)}
.hero__stage::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(rgba(11,24,38,0),var(--night-1));pointer-events:none}
/* A little night kept over the sky where the title sits, so the words read over the bright dusk. */
.hero__gate picture{position:relative;display:block;height:100%}
.hero__gate picture::after{content:"";position:absolute;inset:0 0 auto;height:58%;background:linear-gradient(rgba(5,14,16,.55),rgba(5,14,16,.28) 50%,rgba(5,14,16,0));pointer-events:none}
@media (orientation:landscape) and (max-width:899px){.hero__art{object-position:50% 10%}}
.hero__sand{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__dunes{display:none}
.hero__head{position:relative;display:grid;justify-items:center;text-align:center;max-width:44rem}
.hero__title{position:relative;isolation:isolate;font-size:clamp(3.4rem,2rem + 7vw,8rem);line-height:1.15;color:#fff4dc;letter-spacing:0}
/* The outline is a layer of its own behind the word. A stroke on the visible text is drawn glyph by
   glyph, and each glyph's outline then cuts through its neighbour's join: the Arabic word breaks. */
.hero__title::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:#2a1606;-webkit-text-stroke:.09em #2a1606;filter:drop-shadow(0 .05em 0 rgba(20,10,2,.55)) drop-shadow(0 .02em .22em rgba(8,16,18,.5));pointer-events:none}
.hero__pitch{margin-top:.6rem;max-width:30em;text-wrap:balance;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);line-height:1.8;color:#f3e6cb;text-shadow:0 1px 2px rgba(6,14,16,.8),0 0 18px rgba(6,14,16,.6)}
.hero__get{margin-top:1.4rem}

.hand{position:absolute;z-index:2;left:50%;bottom:calc(var(--hand-w) * -.46);width:0;height:calc(var(--hand-w) * 1.34)}
.hand__slot{position:absolute;bottom:0;left:calc(var(--hand-w) * -.5);transform-origin:50% 150%;translate:calc(var(--i) * var(--hand-w) * var(--spread)) calc(var(--a) * var(--hand-w) * .07);rotate:calc(var(--i) * 6.5deg);transition:translate .28s cubic-bezier(.2,.8,.2,1),rotate .28s cubic-bezier(.2,.8,.2,1);animation:deal .9s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(var(--a) * 90ms + 250ms)}
.hand__slot .card{--w:var(--hand-w);box-shadow:0 0 0 2px var(--rim),0 10px 18px -8px rgba(0,0,0,.65)}
.hand__slot .card:hover{translate:none}
.hand__slot:hover,.hand__slot:focus-within{z-index:6;translate:calc(var(--i) * var(--hand-w) * var(--spread)) calc(var(--hand-w) * -.16);rotate:0deg}
@keyframes deal{from{translate:0 calc(var(--hand-w) * .5);rotate:0deg}}

@media (min-width:900px) and (min-aspect-ratio:1/1){
 .hero{min-height:max(700px,100svh);padding-top:calc(var(--nav-h) + 56px)}
 .hero__stage{background:radial-gradient(120% 70% at 50% 108%,#3a2413 0,#241a14 30%,transparent 62%),linear-gradient(#060f16,#0a1a1f 40%,#10252a 72%,#1a221f)}
 .hero__stage::before{content:"";position:absolute;inset:0;background:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 22% 8%,#fff6 50%,transparent 51%),radial-gradient(1.4px 1.4px at 31% 26%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 8% 38%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 17% 52%,#fff4 50%,transparent 51%),radial-gradient(1.2px 1.2px at 88% 14%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 79% 30%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 93% 44%,#fff5 50%,transparent 51%),radial-gradient(1.4px 1.4px at 72% 9%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 84% 58%,#fff3 50%,transparent 51%),radial-gradient(1px 1px at 4% 12%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 96% 24%,#fff6 50%,transparent 51%);opacity:.9}
 .hero__dunes{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(140px,26vh,260px)}
 .hero__gate{inset:auto;left:50%;top:calc(var(--nav-h) + 44px);bottom:0;width:min(620px,46vw);translate:-50% 0;padding:14px 14px 0;background:linear-gradient(var(--mud-hi),var(--mud) 30%,var(--mud-lo));border-radius:6px 6px 0 0;box-shadow:inset 0 0 0 2px rgba(255,236,200,.18),0 0 0 2px var(--mud-rim)}
 .hero__gate::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:22px;background:linear-gradient(var(--mud-hi),var(--mud));-webkit-mask:var(--merlons) repeat-x center bottom/34px 22px;mask:var(--merlons) repeat-x center bottom/34px 22px;filter:drop-shadow(0 -2px 0 var(--mud-rim))}
 .hero__gate::after{content:"";position:absolute;left:14px;right:14px;top:14px;bottom:0;box-shadow:inset 0 0 0 2px rgba(43,26,12,.85),inset 0 6px 14px rgba(43,26,12,.5);pointer-events:none}
 .hero__gate picture{background:var(--sky-0)}
 .hero__gate picture::after{display:none}
 .hero__art{object-position:50% 0;padding-top:clamp(40px,11vh,120px);background:linear-gradient(#0a1b1c,#0b1d1e 60%);-webkit-mask:none;mask:none}
 .hero__stage::after{height:34%;background:linear-gradient(rgba(11,24,38,0),rgba(11,24,38,.72) 45%,var(--night-1))}
 .hero__head{margin-top:calc(clamp(40px,11vh,120px) - 44px)}
 .hero{--hand-w:clamp(118px,min(11.5vw,19vh),190px);--spread:.86;padding-bottom:calc(var(--hand-w) * 1.34 + 48px)}
 .hand{bottom:clamp(8px,2.5vh,28px)}
 .hero__title{font-size:clamp(4.5rem,1.5rem + 5.4vw,7rem)}
 .battle{padding-top:clamp(90px,9vw,130px)}
}
@media (min-width:600px) and (max-aspect-ratio:1/1){
 .hero{--hand-w:150px}
 .hero__head{margin-top:3vh}
}

/* ------------------------------------------------------------------ a phone, a window */
.phone{--pw:300px;position:relative;width:var(--pw);margin:0}
.phone__body{position:relative;padding:calc(var(--pw) * .036) calc(var(--pw) * .032) calc(var(--pw) * .042);border-radius:calc(var(--pw) * .14);background:linear-gradient(145deg,#2a3036,#0d1114 42%,#171c20);box-shadow:inset 0 0 0 1.5px #3a4148,inset 0 0 0 3px #0a0d10,0 24px 40px -22px rgba(0,0,0,.75)}
.phone__body::before{content:"";position:absolute;z-index:2;top:calc(var(--pw) * .012);left:50%;translate:-50% 0;width:calc(var(--pw) * .028);aspect-ratio:1;border-radius:50%;background:#020304;box-shadow:0 0 0 1.5px #1c2226}
.phone__screen{display:block;width:100%;height:auto;aspect-ratio:540/1170;object-fit:cover;border-radius:calc(var(--pw) * .1);background:#0e1d2b}
.phone--small{--pw:220px}

/* ------------------------------------------------------------------ the battle */
.battle{position:relative;z-index:1;padding-block:clamp(150px,20vw,230px) clamp(72px,10vw,130px);background:var(--stars) 0 0/480px 480px,linear-gradient(var(--night-1),var(--night-2) 55%,var(--night-1))}
.battle__intro{text-align:center;display:grid;justify-items:center;gap:1rem}
.battle__stage{position:relative;display:grid;justify-items:center;gap:28px;margin-top:clamp(32px,5vw,56px);padding-inline:var(--gut)}
.phone--film{--pw:min(84vw,320px)}
.film{cursor:pointer}
.mark{position:absolute;z-index:3;top:calc(var(--pw) * .036 + var(--y) * var(--pw) * 2.028);left:calc(var(--pw) * .032 + var(--x) * var(--pw) * .936);translate:-50% -50%;display:grid;place-items:center;width:30px;height:30px;padding-top:2px;border-radius:50%;background:var(--brass);color:var(--brass-ink);font:800 1rem/1 var(--display);box-shadow:0 0 0 2.5px var(--brass-rim),0 2px 0 2px rgba(0,0,0,.25);pointer-events:none}
.film__toggle{position:relative;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--night-3);box-shadow:inset 0 0 0 1.5px rgba(247,234,208,.22);cursor:pointer}
.film__toggle::before{content:"";position:absolute;inset:0;margin:auto;width:12px;height:14px;background:linear-gradient(90deg,var(--cream) 0 35%,transparent 35% 65%,var(--cream) 65%)}
.film__toggle[aria-pressed="true"]::before{width:14px;height:16px;background:var(--cream);clip-path:polygon(100% 0,100% 100%,0 50%)}
.film__toggle:hover{background:#21405c}
.phone--film figcaption{display:flex;align-items:center;gap:12px;max-width:var(--pw);margin-top:14px;font-size:.88rem;line-height:1.75;color:var(--muted);text-align:start}
.rules{display:grid;gap:20px;counter-reset:rule;max-width:34rem}
.rule h3{display:flex;align-items:center;gap:.6rem;font-size:1.3rem}
.rule__n{display:grid;place-items:center;flex:none;width:30px;height:30px;padding-top:2px;border-radius:50%;background:var(--brass);color:var(--brass-ink);font:800 1rem/1 var(--display);box-shadow:0 0 0 2.5px var(--brass-rim)}
.rule p{margin-top:.35rem;color:var(--cream-2);font-size:1rem;line-height:1.85}
@media (min-width:1000px){
 .battle__stage{--pw:330px;display:block;height:calc(var(--pw) * 2.12 + 110px);max-width:var(--wrap);margin-inline:auto}
 .phone--film{--pw:330px;position:absolute;left:50%;top:0;translate:-50% 0}
 .rules{position:static;max-width:none}
 .rule{position:absolute;top:calc(var(--pw) * .036 + var(--y) * var(--pw) * 2.028);translate:0 -22px;width:calc(50% - var(--pw) / 2 - 88px);max-width:340px}
 .rule--start{inset-inline-start:var(--gut);text-align:end}
 .rule--start h3{flex-direction:row-reverse;justify-content:flex-start}
 .rule--end{inset-inline-end:var(--gut)}
 .battle__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:rgba(242,195,107,.72);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 .battle__lines circle{fill:var(--brass);stroke:none}
}
@media (max-width:999px){
 .rules{margin-top:8px}
}

/* ------------------------------------------------------------------ plaster sheets and the quiz */
.plaster{position:relative;border-radius:22px;background:var(--grain),linear-gradient(var(--plaster-hi),var(--plaster) 40%,#e8d9bd);color:var(--ink);box-shadow:inset 0 0 0 7px var(--plaster-hi),inset 0 0 0 8.5px var(--plaster-line),0 18px 34px -20px rgba(0,0,0,.7)}
.plaster::before{content:"";position:absolute;left:28px;right:28px;bottom:calc(100% - 1px);height:18px;background:var(--plaster-hi);-webkit-mask:var(--merlons) repeat-x center bottom/30px 18px;mask:var(--merlons) repeat-x center bottom/30px 18px}
.plaster h2,.plaster h3{color:var(--ink)}
.plaster strong{color:var(--ink)}
.quiz{margin-top:clamp(80px,11vw,140px);padding:clamp(28px,4vw,52px) clamp(18px,4vw,56px)}
.quiz__head{display:grid;justify-items:center;text-align:center;gap:.4rem}
.quiz__title{font-size:clamp(1.8rem,1.2rem + 2.4vw,2.8rem)}
.quiz__head p{color:var(--ink-2);max-width:34em}
.quiz__count{font:800 1rem/1.4 var(--display);color:var(--ink-2)}
.quiz__count:empty{display:none}
.quiz__rounds{display:grid;gap:40px;margin-top:28px}
.quiz__round{display:grid;gap:26px;justify-items:center}
.quiz__threat{display:grid;justify-items:center;gap:10px;text-align:center}
.quiz__threat .card{--w:150px}
.quiz__says{font:800 1.05rem/1 var(--display);color:#9b3a26}
.quiz__desc{max-width:18em;font-size:.95rem;line-height:1.75;color:var(--ink-2)}
.quiz__answer{display:grid;justify-items:center;gap:14px;width:100%}
.quiz__ask{font:800 1.2rem/1.2 var(--display);color:var(--ink)}
.quiz__picks{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 8px}
.quiz__pick{display:grid;justify-items:center;align-content:start;gap:10px;width:104px;padding:12px 0 8px;border-radius:16px;text-align:center}
.quiz__pick .card{--w:86px}
.quiz__role{font-size:.82rem;line-height:1.5;color:var(--ink-2)}
.quiz__reveal{max-width:34em;padding:10px 16px;border-radius:12px;background:rgba(58,38,22,.06)}
.quiz__reveal summary{cursor:pointer;font:800 1rem/2 var(--display);color:var(--ink)}
.quiz__reveal p{margin-top:.3rem;font-size:.98rem;line-height:1.85}
.quiz__why{max-width:32em;min-height:0;font-size:1rem;line-height:1.85;text-align:center}
.quiz__why:empty{display:none}
.quiz__why b{font-family:var(--display);font-weight:800}
.quiz__foot{display:flex;justify-content:center;gap:12px;margin-top:22px}
.quiz--live .quiz__round{display:none}
.quiz--live .quiz__round.is-current{display:grid}
.quiz--live .quiz__reveal{display:none}
.quiz--live .quiz__pick{cursor:pointer;transition:background-color .15s linear}
.quiz--live .quiz__pick:hover{background:rgba(58,38,22,.07)}
.quiz--live .quiz__pick:focus-visible{outline:3px solid var(--brass-lip);outline-offset:0}
.quiz__pick.is-wrong .card{filter:grayscale(.85) brightness(.8)}
.quiz__pick.is-wrong .quiz__role{text-decoration:line-through;text-decoration-thickness:1.5px}
.quiz__pick.is-right{background:rgba(47,157,99,.14);box-shadow:inset 0 0 0 2.5px #2f9d63}
.quiz__round.is-done .quiz__pick:not(.is-right){opacity:.55}
@media (max-width:400px){
 .quiz__pick{width:90px}
 .quiz__pick .card{--w:76px}
 .quiz__role{font-size:.78rem}
}
@media (min-width:760px){
 .quiz__round{grid-template-columns:auto auto;justify-content:center;align-items:center;justify-items:stretch;gap:56px}
 .quiz__threat .card{--w:176px}
 .quiz__answer{justify-items:start}
 .quiz__picks{justify-content:flex-start}
 .quiz__why{text-align:start}
 .quiz__pick{width:136px}
 .quiz__pick .card{--w:116px}
}

/* ------------------------------------------------------------------ the cards and the legends */
.cards{position:relative;padding-block:clamp(90px,12vw,150px) clamp(40px,6vw,72px);background:var(--stars) 140px 60px/480px 480px,linear-gradient(var(--night-1),#0e1e2e 30%,var(--night-1))}
.cards__intro{display:grid;gap:1rem;justify-items:center;text-align:center}
.legends{position:relative;margin-top:clamp(36px,5vw,64px)}
.legends__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.legends__track::-webkit-scrollbar{display:none}
.legends__track:focus-visible{outline-offset:-3px}
.legend{--hue:#f07a3a;position:relative;isolation:isolate;overflow:hidden;flex:0 0 100%;scroll-snap-align:center;display:grid;justify-items:center;gap:26px;padding:clamp(28px,4vw,56px) var(--gut)}
/* Each legend's own light: its portrait, blurred far past recognition, behind the panel. */
.legend__glow{position:absolute;z-index:-1;inset:-10% -5%;width:110%;height:120%;max-width:none;object-fit:cover;filter:blur(56px) saturate(1.3) brightness(.55);opacity:.8;-webkit-mask:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 62%,transparent);mask:radial-gradient(closest-side,#000 30%,rgba(0,0,0,.55) 62%,transparent);pointer-events:none}
.legend__art .card{--w:min(66vw,300px)}
.legend__text{max-width:30rem;text-align:center}
.legend__from{font:800 1.02rem/1.5 var(--display);color:color-mix(in srgb,var(--hue) 55%,var(--cream))}
.legend__name{margin-top:.2rem;font-size:clamp(2.6rem,1.8rem + 3.5vw,4.4rem);line-height:1.2}
.legend__desc{margin-top:.6rem;font-size:1.08rem;line-height:1.9}
.legend__facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:14px clamp(20px,3vw,40px);margin-top:1.3rem;text-align:start}
.legend__facts div{padding-top:10px;border-top:2px solid rgba(247,234,208,.14)}
.legend__facts div:nth-child(2){grid-column:1/-1;order:1}
.legend__facts dt{font:800 .92rem/1.4 var(--display);color:var(--muted)}
.legend__facts dd{margin-top:.2rem;font-size:1rem;line-height:1.75;color:var(--cream)}
.legends__thumbs{display:grid;grid-template-columns:repeat(6,auto);justify-content:center;gap:10px;margin-top:22px;padding-inline:var(--gut)}
.legends__thumbs a{display:block;width:48px;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px #0b3531,0 0 0 3.5px rgba(103,226,205,.35);opacity:.72;transition:opacity .15s linear,box-shadow .15s linear}
.legends__thumbs img{width:100%;height:100%;object-fit:cover}
.legends__thumbs a:hover,.legends__thumbs a[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px #0b3531,0 0 0 4.5px var(--r3)}
@media (min-width:900px){
 .legend{grid-template-columns:auto minmax(0,31rem);justify-content:center;align-items:center;gap:clamp(40px,6vw,96px)}
 .legend__art .card{--w:360px}
 .legend__text{text-align:start}
 .legends__thumbs{grid-template-columns:repeat(12,auto)}
 .legends__thumbs a{width:60px}
}
.collection{margin-top:clamp(64px,9vw,110px)}
.collection__title{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem);text-align:center}
.collection__note{margin:.5rem auto 0;max-width:36em;text-align:center;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 34px;padding:0;border:0}
.filters input{position:absolute;opacity:0;pointer-events:none}
.filters label{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:.2em 1.1em;border-radius:12px;background:var(--night-3);box-shadow:inset 0 0 0 1.5px rgba(247,234,208,.08);font:800 1rem/1 var(--display);color:var(--cream-2);cursor:pointer;transition:background-color .15s linear,color .15s linear}
.filters label span{font-size:.85em;color:var(--muted)}
.filters label:hover{background:#21405c}
.filters input:checked+label{background:var(--cream);color:var(--night-1);box-shadow:none}
.filters input:checked+label span{color:var(--ink-2)}
.filters input:focus-visible+label{outline:3px solid var(--brass);outline-offset:2px}
.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:34px 18px;justify-items:center}
@media (max-width:560px){
 .deck{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px}
 .deck__role{margin-top:10px;font-size:.84rem;line-height:1.4}
 .deck__city{display:none}
}
.deck__item{display:grid;justify-items:center;gap:0;width:100%;max-width:190px;text-align:center;container-type:inline-size}
.deck__item .card{--w:150px;width:100%;max-width:170px}
@supports (width:1cqi){.deck__item .card{--w:min(100cqi,170px)}}
.deck__role{margin-top:14px;font:800 .98rem/1.45 var(--display);color:var(--cream)}
.deck__city{font-size:.85rem;line-height:1.6;color:var(--muted)}
.collection:has(#rarity-0:checked) .deck__item:not([data-rarity="0"]),
.collection:has(#rarity-1:checked) .deck__item:not([data-rarity="1"]),
.collection:has(#rarity-2:checked) .deck__item:not([data-rarity="2"]),
.collection:has(#rarity-3:checked) .deck__item:not([data-rarity="3"]){display:none}

/* The card sheet: a card's full page, opened over the collection (the fragment works without script). */
.sheet{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:16px}
html:not(.js) .sheet:target,.sheet.is-open{display:grid}
.sheet__shade{position:absolute;inset:0;background:rgba(4,10,16,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet__panel{--hue:#c8964f;position:relative;display:grid;width:min(100%,860px);max-height:calc(100dvh - 32px);overflow:auto;border-radius:24px;background:radial-gradient(90% 70% at 100% 0,color-mix(in srgb,var(--hue) 20%,transparent),transparent 70%),var(--night-2);box-shadow:inset 0 0 0 1.5px rgba(247,234,208,.08),0 24px 60px -20px rgba(0,0,0,.8);overscroll-behavior:contain}
.sheet__art{width:100%;aspect-ratio:1;max-height:46vh;object-fit:cover;border-radius:24px 24px 0 0}
.sheet__text{padding:22px clamp(20px,4vw,36px) 30px}
.sheet__meta{font-size:.92rem;color:var(--muted)}
.sheet__rarity{font:800 1em/1 var(--display)}
.sheet--r0 .sheet__rarity{color:var(--r0)}.sheet--r1 .sheet__rarity{color:var(--r1)}.sheet--r2 .sheet__rarity{color:var(--r2)}.sheet--r3 .sheet__rarity{color:var(--r3)}
.sheet__name{margin-top:.3rem;font-size:clamp(2rem,1.6rem + 2vw,3rem)}
.sheet__desc{margin-top:.5rem;font-size:1.05rem;line-height:1.9;color:var(--cream-2)}
.sheet__facts{display:grid;gap:10px;margin-top:1.1rem}
.sheet__facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:12px;padding-top:10px;border-top:1.5px solid rgba(247,234,208,.1)}
.sheet__facts dt{font:800 .95rem/1.7 var(--display);color:var(--muted)}
.sheet__facts dd{font-size:1rem;line-height:1.75;color:var(--cream)}
.sheet__stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem}
.sheet__stats div{min-width:84px;padding:8px 14px;border-radius:12px;background:rgba(247,234,208,.06);text-align:center}
.sheet__stats dt{font-size:.8rem;color:var(--muted)}
.sheet__stats dd{font:800 1.2rem/1.4 var(--display);color:var(--cream)}
.sheet__note{margin-top:.6rem;font-size:.82rem;color:var(--muted-2)}
.sheet__close{position:absolute;top:12px;inset-inline-start:12px;display:grid;place-items:center;min-width:48px;height:48px;padding-inline:14px;border-radius:14px;background:rgba(8,18,28,.8);color:var(--cream);font:800 1rem/1 var(--display);text-decoration:none;box-shadow:inset 0 0 0 1.5px rgba(247,234,208,.2)}
.sheet__close:hover{background:#0b1a28}
@media (min-width:760px){
 .sheet__panel{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
 .sheet__art{height:100%;max-height:none;aspect-ratio:auto;border-radius:0 24px 24px 0}
 .sheet__text{padding:34px 34px 34px 30px;align-self:center}
}
html:not(.js):has(.sheet:target),html.has-sheet{overflow:hidden}

/* ------------------------------------------------------------------ the road */
.road{position:relative;padding-block:clamp(56px,8vw,100px) clamp(72px,10vw,120px);background:linear-gradient(var(--night-1),#101b24 40%,#151b1f 60%,var(--night-1))}
.road__intro{display:grid;gap:.8rem;justify-items:center;text-align:center}
.road__trail{position:relative;margin-top:clamp(36px,5vw,60px)}
.road__stations{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:max(var(--gut),calc((100vw - var(--wrap)) / 2));padding:18px max(var(--gut),calc((100vw - var(--wrap)) / 2)) 30px;scrollbar-width:thin;scrollbar-color:#3a5570 transparent;background:linear-gradient(transparent calc(18px + 128px),#1b120d calc(18px + 128px),#1b120d calc(18px + 132px),transparent calc(18px + 132px)),var(--sadu-band) repeat-x 0 calc(18px + 132px)/48px 24px,linear-gradient(transparent calc(18px + 156px),#1b120d calc(18px + 156px),#1b120d calc(18px + 158px),transparent calc(18px + 158px));background-attachment:local}
.station{position:relative;flex:0 0 200px;scroll-snap-align:start;display:grid;justify-items:center;align-content:start;text-align:center}
.station__fort{width:180px;height:135px;object-fit:contain;margin-bottom:22px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.station__step{position:absolute;top:141px;display:grid;place-items:center;width:34px;height:34px;padding-top:2px;border-radius:50%;background:var(--sand,#d0a66f);color:#2a1a0c;font:800 .95rem/1 var(--display);box-shadow:0 0 0 2.5px #2a1a0c}
.station__name{margin-top:18px;font-size:1.45rem;line-height:1.3}
.station__cups{display:flex;align-items:center;justify-content:center;gap:.35em;font-size:.9rem;color:var(--muted)}
.station__cups span{font:800 1.05rem/1.4 var(--display);color:var(--brass)}
.station__style{margin-top:.25rem;font-size:.92rem;line-height:1.6;color:var(--cream-2)}
.station__new{margin-top:.5rem;font-size:.82rem;line-height:1.6;color:var(--muted)}
.station__cards{display:flex;justify-content:center;gap:6px;margin-top:10px}
.station__cards a{display:block;width:44px;aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px #0d1720,0 0 0 3.5px color-mix(in srgb,var(--accent,#c6a365) 55%,transparent)}
.station__cards img{width:100%;height:100%;object-fit:cover}
.station--last .station__step{width:40px;height:40px;background:var(--brass);box-shadow:0 0 0 2.5px var(--brass-rim),0 0 0 6px rgba(242,195,107,.25)}
.station--last .station__name{color:var(--brass)}
.road__controls{display:flex;justify-content:center;gap:12px;margin-top:6px}
.road__step{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--night-3);box-shadow:inset 0 0 0 1.5px rgba(247,234,208,.12);cursor:pointer;transition:background-color .15s linear}
.road__step::before{content:"";width:12px;height:12px;border:solid var(--cream);border-width:0 3px 3px 0;border-radius:2px;rotate:135deg;translate:2px 0}
.road__back::before{rotate:-45deg;translate:-2px 0}
.road__step:hover{background:#21405c}
.road__step:disabled{opacity:.35;cursor:default}
.road__journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-items:start;gap:28px 16px;margin-top:clamp(48px,7vw,90px)}
.road__journey-text{grid-column:1/-1;grid-row:1;align-self:center;max-width:26rem;text-align:center}
.road__journey-text h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.road__journey-text p{margin-top:.5rem}
.road__phone{--pw:min(42vw,220px)}
.road__phone figcaption{margin-top:12px;font-size:.85rem;line-height:1.7;color:var(--muted);text-align:center}
@media (min-width:900px){
 .road__journey{grid-template-columns:auto minmax(0,26rem) auto;justify-content:center;gap:clamp(32px,5vw,72px)}
 .road__journey-text{grid-column:2;grid-row:1}
 .road__phone:first-child .phone__body{rotate:-3deg}
 .road__phone:last-child .phone__body{rotate:3deg}
}
@media (max-width:640px){
 .station{flex-basis:176px}
}

/* ------------------------------------------------------------------ the majlis */
.majlis{position:relative;padding-block:clamp(64px,9vw,120px) clamp(72px,10vw,120px);background:var(--stars) 300px 200px/480px 480px,linear-gradient(var(--night-1),#0e2031 50%,var(--night-1))}
.emotes{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:clamp(12px,2vw,28px) clamp(8px,3vw,40px)}
@media (min-width:900px){.emotes{grid-template-columns:repeat(6,auto)}}
.emote{display:grid;justify-items:center;width:clamp(100px,12vw,150px)}
.emote__say{position:relative;padding:.35em .9em .45em;border-radius:14px;background:var(--plaster-hi);color:var(--ink);font:800 1.05rem/1.3 var(--display);white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--plaster-line)}
.emote__say::after{content:"";position:absolute;top:100%;left:50%;translate:-50% -1px;width:14px;height:9px;background:var(--plaster-hi);clip-path:polygon(0 0,100% 0,50% 100%)}
.emote__figure{--size:clamp(104px,13vw,140px);position:relative;display:block;width:var(--size);height:var(--size);margin-top:4px;overflow:hidden}
/* The ground under the character's feet, so it stands rather than floats. */
.emote__figure::before{content:"";position:absolute;left:24%;right:24%;bottom:1%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(2,6,10,.6),rgba(2,6,10,0))}
/* A strip of frames (data/emotes.json) behind a one-frame window, played as the game plays it: a
   row of six at a time, ten a second. Without motion the window rests on the strip's hero frame. */
.emote__figure img{position:absolute;top:0;left:0;width:calc(var(--cols) * var(--size));max-width:none;height:calc(var(--rows) * var(--size));translate:calc(var(--hero-x) * var(--size) * -1) 0;transform:translateY(calc(var(--hero-y) * var(--size) * -1));animation:emote-x calc(var(--cols) / var(--fps) * 1s) steps(var(--cols)) infinite,emote-y calc(var(--frames) / var(--fps) * 1s) steps(var(--rows)) infinite;animation-delay:var(--delay,0s)}
@keyframes emote-x{from{translate:0 0}to{translate:calc(var(--cols) * var(--size) * -1) 0}}
@keyframes emote-y{from{transform:translateY(0)}to{transform:translateY(calc(var(--rows) * var(--size) * -1))}}
.emote__who{font-size:.85rem;color:var(--muted)}
.emotes__note{margin:18px auto 0;max-width:34em;text-align:center;color:var(--muted);font-size:.95rem}
.majlis h2{margin-top:clamp(56px,8vw,96px);text-align:center}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:34px clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,52px)}
.features li{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
.features img{grid-row:span 2;width:48px;height:48px}
.features h3{font-size:1.25rem;line-height:1.4}
.features p{margin-top:.25rem;font-size:1rem;line-height:1.85}

/* ------------------------------------------------------------------ phone and pc */
.pc{position:relative;padding-block:clamp(80px,11vw,140px);background:var(--stars) 60px 330px/480px 480px,linear-gradient(var(--night-1),#122236 50%,var(--night-1))}
.pc__layout{display:grid;gap:clamp(40px,6vw,80px);align-items:center}
.devices{position:relative;padding-bottom:8%;margin-inline:auto;width:min(100%,640px)}
.window{border-radius:12px;overflow:hidden;background:#0a0f14;box-shadow:0 0 0 1.5px #2b3339,0 28px 50px -26px rgba(0,0,0,.8)}
.window__bar{display:flex;align-items:center;gap:8px;height:34px;padding-inline:12px;background:#1d2126;color:#d9dee2;font:400 .82rem/1 var(--body)}
.window__bar img{width:16px;height:16px}
.window__ctl{margin-inline-start:auto;display:flex;gap:18px;width:86px;height:12px;background:linear-gradient(#d9dee2,#d9dee2) 0 50%/11px 1.5px no-repeat,linear-gradient(#d9dee2,#d9dee2) 37px 0/11px 11px no-repeat,linear-gradient(#1d2126,#1d2126) 38.5px 1.5px/8px 8px no-repeat;position:relative}
.window__ctl::after{content:"";position:absolute;left:72px;top:-1px;width:13px;height:13px;background:linear-gradient(45deg,transparent 45%,#d9dee2 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#d9dee2 45% 55%,transparent 55%)}
.window__view{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.phone--tilt{--pw:clamp(120px,24vw,180px);position:absolute;inset-inline-start:2%;bottom:0;rotate:4deg}
.pc__text{display:grid;gap:1rem;max-width:34rem}
.ticks{display:grid;gap:14px;margin-top:.6rem}
.ticks li{position:relative;padding-inline-start:30px;line-height:1.85}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:14px;height:14px;background:var(--brass);clip-path:polygon(50% 0,64.64% 14.64%,85.36% 14.64%,85.36% 35.36%,100% 50%,85.36% 64.64%,85.36% 85.36%,64.64% 85.36%,50% 100%,35.36% 85.36%,14.64% 85.36%,14.64% 64.64%,0 50%,14.64% 35.36%,14.64% 14.64%,35.36% 14.64%)}
@media (min-width:980px){
 .pc__layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
 .devices{margin-inline:0}
}

/* ------------------------------------------------------------------ fair play */
.fair{position:relative;padding-block:clamp(80px,11vw,140px);background:var(--stars) 210px 90px/480px 480px,linear-gradient(var(--night-1),#0d1d2c 50%,var(--night-1))}
.fair__layout{display:grid;gap:clamp(48px,6vw,80px);align-items:center}
.fair__text{display:grid;gap:1rem;max-width:36rem}
.fair__sheet{padding:clamp(28px,4vw,40px) clamp(20px,3.4vw,36px) clamp(22px,3vw,30px);max-width:560px;width:100%;justify-self:center}
.fair__sheet-title{text-align:center;font-size:1.7rem}
.odds{display:grid;gap:8px;margin-top:16px}
.odds__row{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"icon name chance" "icon copies chance";align-items:center;column-gap:14px;padding:8px 14px 8px 10px;border-radius:14px;background:linear-gradient(90deg,rgba(58,38,22,.1) calc(var(--chance) * 100%),rgba(58,38,22,.03) calc(var(--chance) * 100%))}
.odds__row img{grid-area:icon;width:56px;height:56px;object-fit:contain}
.odds__name{grid-area:name;font:800 1.1rem/1.3 var(--display);color:var(--ink)}
.odds__copies{grid-area:copies;font-size:.85rem;line-height:1.4;color:var(--ink-2)}
.odds__chance{grid-area:chance;font:800 1.4rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.fair__sheet-note{margin-top:14px;font-size:.88rem;line-height:1.75;color:var(--ink-2);text-align:center}
@media (min-width:980px){
 .fair__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
[dir="rtl"] .odds__row{background:linear-gradient(270deg,rgba(58,38,22,.1) calc(var(--chance) * 100%),rgba(58,38,22,.03) calc(var(--chance) * 100%))}

/* ------------------------------------------------------------------ download */
.get{position:relative;padding-block:clamp(80px,11vw,140px) clamp(80px,10vw,120px);background:var(--stars) 20px 140px/480px 480px,radial-gradient(90% 60% at 50% 0,#17304a 0,transparent 70%),var(--night-1)}
.get__head{display:grid;gap:1rem;justify-items:center;text-align:center}
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:22px;margin-top:clamp(36px,5vw,56px)}
.plate{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;padding:30px 26px 24px;border-radius:22px;background:var(--night-2);box-shadow:inset 0 0 0 1.5px rgba(247,234,208,.08),inset 0 1px 0 rgba(247,234,208,.08)}
.plate h3{font-size:1.9rem;line-height:1.2}
.plate__req{font-size:.95rem;line-height:1.7;color:var(--muted);min-height:3.4em}
.plate__get{justify-self:stretch}
.plate__soon{display:grid;place-items:center;min-height:56px;border-radius:16px;background:repeating-linear-gradient(-45deg,rgba(247,234,208,.05) 0 10px,transparent 10px 20px);box-shadow:inset 0 0 0 2px rgba(247,234,208,.14);font:800 1.25rem/1 var(--display);color:var(--cream-2)}
.plate__file{display:grid;gap:6px;font-size:.88rem}
.plate__file div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:10px;align-items:baseline}
.plate__file dt{color:var(--muted-2)}
.plate__file dd{color:var(--cream-2);overflow-wrap:anywhere}
.plate__file dd[dir="ltr"]{text-align:end;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem}
.plate__hash{color:var(--muted)!important}
.plate__hash code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.6;color:var(--cream-2);word-break:break-all;direction:ltr;unicode-bidi:isolate}
.plate__how{font-size:.9rem;line-height:1.8;color:var(--muted)}
.plate--steam .plate__how,.plate--ios .plate__how{align-self:start}
.get__account{margin:34px auto 0;max-width:46em;text-align:center;color:var(--muted);font-size:.95rem;line-height:1.9}
.get__account a{color:var(--cream);text-underline-offset:4px}

/* ------------------------------------------------------------------ footer */
.foot{position:relative;background:var(--night-0)}
.foot__weave{height:24px;background:var(--sadu-band) repeat-x center/48px 24px}
.foot__row{display:grid;justify-items:center;gap:14px;padding-block:40px 34px;text-align:center}
.foot__brand{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font:800 1.5rem/1 var(--display)}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream-2);text-underline-offset:5px}
.foot__copy{font-size:.85rem;color:var(--muted-2)}
/* The page ends at a fort wall: mud brick under a parapet of merlons, a row of vents, the name carved in. */
.foot__wall{position:relative;display:grid;place-items:center;margin-top:calc(26px + clamp(20px,2.4vw,28px));padding:clamp(40px,5vw,60px) var(--gut) clamp(28px,4vw,48px);background:var(--grain),linear-gradient(#d09a5f,#b98552 40%,#a0703f)}
.foot__wall::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(20px,2.4vw,28px);background:#d6a064;-webkit-mask:var(--merlons) repeat-x center bottom/clamp(32px,3.8vw,44px) 100%;mask:var(--merlons) repeat-x center bottom/clamp(32px,3.8vw,44px) 100%}
.foot__wall::after{content:"";position:absolute;left:0;right:0;top:clamp(12px,1.6vw,18px);height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14'%3E%3Cpath d='M16 1h12l-6 11z' fill='%232b1a0c' fill-opacity='.72'/%3E%3C/svg%3E") repeat-x center/clamp(32px,3.8vw,44px) 14px}
.foot__wall span{font:800 clamp(3.2rem,1rem + 9vw,8.5rem)/1.25 var(--display);color:#8a5a33;text-shadow:0 2px 0 rgba(255,226,180,.45),0 -2px 0 rgba(58,34,14,.5);white-space:nowrap}
.foot__wall small{margin-top:-.2em;font:800 clamp(1.2rem,.9rem + 1vw,1.6rem)/1.4 var(--display);color:#331a08;text-shadow:0 1px 0 rgba(255,226,180,.35)}

/* ------------------------------------------------------------------ reading pages (how to play, privacy) */
.page{padding:calc(var(--nav-h) + 64px) 0 90px;background:linear-gradient(var(--night-2),var(--night-1) 420px)}
.page .wrap{max-width:calc(46rem + 2 * var(--gut))}
.page__head{display:grid;gap:.8rem;max-width:46rem}
.page__aside{display:none}
@media (min-width:1080px){
 .page .wrap:has(.page__layout){max-width:calc(46rem + 290px + 64px + 2 * var(--gut))}
 .page__layout{display:grid;grid-template-columns:minmax(0,46rem) 290px;justify-content:space-between;gap:64px}
 .page__aside{display:block;order:2;padding-top:36px}
 .page__aside .phone{position:sticky;top:calc(var(--nav-h) + 40px);--pw:230px;margin-inline:auto}
 .page__aside figcaption{margin-top:12px;font-size:.88rem;color:var(--muted);text-align:center}
}
.page__head h1{font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem)}
.page__body{max-width:46rem;margin-top:36px}
.page__body h2{margin-top:2.6rem;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.page__body h3{margin-top:1.6rem;font-size:1.2rem}
.page__body p,.page__body li{margin-top:.8rem}
.page__body ul{display:grid;gap:.2rem;margin-top:.6rem}
.page__body ul li{position:relative;padding-inline-start:24px}
.page__body ul li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:10px;height:10px;background:var(--brass);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.page__body a{color:var(--cream);text-underline-offset:4px}
.page__note{margin-top:2.4rem;padding:18px 20px;border-radius:16px;background:rgba(247,234,208,.05);color:var(--muted);font-size:.95rem}

/* ------------------------------------------------------------------ calmer motion */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}