@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/libre-caslon-text-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/libre-caslon-text-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/libre-caslon-text-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/libre-caslon-text-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/libre-caslon-text-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/libre-caslon-text-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Rye";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/rye-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Rye";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/rye-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Special Elite";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/special-elite-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Special Elite";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/special-elite-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Arabic (AR mode only — the files are fetched only when Arabic glyphs are rendered) */
@font-face{font-family:"Cairo";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/cairo-400-700-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:"Lalezar";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/lalezar-400-arabic.woff2") format("woff2");unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
:root{--night:#140b05;--wood:#2A1404;--wood-2:#3A1E07;--wood-3:#4A2C0A;--wood-4:#6B3A12;--outline:#3D1F05;--parch:#E8D4A0;--parch-2:#C8A96E;--parch-3:#A8854A;--gold:#D4A820;--copper:#C49A2E;--copper-d:#8B6A1C;--red:#B84020;--red-d:#7A2A12;--red-l:#D8603A;--cream:#FFF4D0;--cream-2:#E8C987;--f-display:'Rye',serif;--f-type:'Special Elite',monospace;--f-body:'Libre Caslon Text',Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#3d2210 url("wood-bg-small.jpg") center top/320px auto repeat;background-blend-mode:multiply;color:var(--cream);font:17px/1.5 var(--f-body);overflow-x:hidden}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--cream)}
img{display:block;max-width:100%}
button,input{font:inherit}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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")}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.sec{position:relative;padding:72px 0;overflow:hidden}
.kicker{font:13px var(--f-type);letter-spacing:.38em;text-transform:uppercase;color:var(--copper);text-align:center}
.kicker::before,.kicker::after{content:"✦";margin:0 10px;color:var(--copper-d)}
.h2{font:400 clamp(38px,10vw,72px)/.95 var(--f-display);color:var(--cream);text-align:center;margin-top:14px;text-shadow:0 3px 0 #1a0a02,0 8px 18px rgba(0,0,0,.5);text-wrap:balance}
.lede{font-style:italic;color:var(--cream-2);text-align:center;margin:16px auto 0;max-width:34ch;text-wrap:pretty}
.rule{display:flex;align-items:center;gap:12px;max-width:420px;margin:0 auto}
.rule span{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--copper-d))}
.rule span:last-child{background:linear-gradient(to left,transparent,var(--copper-d))}
.rule i{width:8px;height:8px;background:var(--copper);transform:rotate(45deg)}
.reveal{opacity:0;transform:translateY(28px) rotate(var(--rot,0deg));transition:opacity .7s ease var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.reveal.in{opacity:1;transform:rotate(var(--rot,0deg))}
.btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:12px;font:400 20px var(--f-display);letter-spacing:.06em;color:var(--cream);text-shadow:0 2px 0 #1a0a02;border:2px solid var(--outline);position:relative;transition:transform .08s,box-shadow .08s;text-align:center}
.btn:active{transform:translateY(3px)}
.btn-red{background:linear-gradient(#D25A34,#B84020 50%,#8a2e14);box-shadow:inset 0 1px 0 rgba(255,220,180,.35),0 4px 0 #1a0a02,0 8px 18px rgba(0,0,0,.5)}
.btn-red:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 1px 0 #1a0a02}
.btn-wood{background:linear-gradient(#6B3A12,#4A2C0A 45%,#3A1E07);border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,200,120,.25),0 4px 0 #1a0a02,0 8px 18px rgba(0,0,0,.5),0 0 22px rgba(212,168,32,.25)}
.btn-wood:active{box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 1px 0 #1a0a02}

/* HERO */
.hero-wrap{position:relative}
.hero{--p:0;position:sticky;top:0;min-height:calc(var(--svh,100svh) * 1);overflow:hidden;background:linear-gradient(180deg,#160c0c 0%,#33161a 16%,#6e2b1a 34%,#b8561f 52%,#e7953c 66%,#f7c86d 78%,#d9893a 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;will-change:opacity;background:linear-gradient(180deg,#2e6fb8 0%,#5ea3df 28%,#9ccdee 52%,#e9dcb6 76%,#e6b06a 100%);opacity:calc(1 - var(--p))}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;min-height:calc(var(--svh,100svh) * 1);max-width:1200px;margin:0 auto;padding:64px 20px 104px}
.hero-top{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px}
.wordmark{font:12px var(--f-type);letter-spacing:.42em;text-transform:uppercase;color:#F4E3B8;text-shadow:0 1px 0 #3D1F05,0 2px 6px rgba(0,0,0,.45);animation:fade 1s .2s both}
.ribbon{display:inline-block;white-space:nowrap;text-align:center;background:linear-gradient(#D25A34,#8a2e14);color:var(--cream);font:15px var(--f-type);letter-spacing:.32em;text-transform:uppercase;padding:7px 16px 5px 20px;border:1.5px solid var(--outline);box-shadow:0 3px 0 #1a0a02,0 6px 14px rgba(0,0,0,.4);transform:rotate(-2deg);animation:drop .9s .35s cubic-bezier(.2,.9,.3,1.2) both}
.hero-title{text-align:center;margin-top:clamp(8px,2vh,30px);position:relative;z-index:6}
.hero-title .w{display:block;font:400 clamp(64px,min(24vw,calc(var(--svh,100svh) * 0.15)),200px)/.88 var(--f-display);letter-spacing:.02em;-webkit-text-stroke:1.5px var(--outline);animation:drop .9s cubic-bezier(.2,.9,.3,1.15) both}
.hero-title .w1{color:#DBA34C;text-shadow:0 3px 0 #7A4A0C,0 6px 0 #3D1F05,0 12px 24px rgba(0,0,0,.6);animation-delay:.5s}
.hero-title .w2{color:#C8482A;text-shadow:0 3px 0 #7A2A12,0 6px 0 #3D1F05,0 12px 24px rgba(0,0,0,.6);animation-delay:.65s}
.hero-tag{display:block;font:13px var(--f-type);letter-spacing:.34em;text-transform:uppercase;color:#F4E3B8;margin-top:12px;text-shadow:0 1px 0 #3D1F05,0 2px 6px rgba(0,0,0,.45);animation:fade .8s 1.1s both}
.posse{position:relative;flex:1 0 auto;min-height:clamp(160px,calc(var(--svh,100svh) * 0.28),300px);margin:8px -20px 0}
.scene{position:absolute;inset:0;pointer-events:none}
.layer{position:absolute}
.sun{will-change:transform}
.sun{left:50%;top:var(--sun-start,-96%);width:clamp(200px,52vw,320px);aspect-ratio:1;margin-left:calc(clamp(200px,52vw,320px) / -2);z-index:0;transform:translate3d(0,calc(var(--p) * var(--sun-travel,180px)),0)}
.rays{opacity:calc(1 - var(--p) * .75);will-change:opacity,transform;position:absolute;inset:-40%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,225,150,.22) 0 5deg,transparent 5deg 22deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 70s linear infinite}
.disc{position:absolute;left:50%;top:50%;width:50%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 45% 40%,#FFF3C8 0%,#FFE08A 30%,#F5B83D 60%,#D48A1E 95%);box-shadow:0 0 60px 24px rgba(255,200,110,.55),0 0 140px 60px rgba(255,170,70,.3)}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;will-change:opacity;background:radial-gradient(circle at 45% 40%,#FFD27A 0%,#FF9A3C 45%,#E8611F 100%);opacity:calc(var(--p) * .85)}
.haze{opacity:calc(.35 + var(--p) * .65);will-change:opacity}
.haze{position:absolute;left:0;right:0;bottom:12%;height:30%;background:linear-gradient(to bottom,rgba(255,215,140,0) 0%,rgba(255,200,120,.35) 55%,rgba(200,130,60,.0) 100%);filter:blur(6px)}
.mesas{left:-2%;width:104%;bottom:16%;height:40%;z-index:0}
.mesas svg{width:100%;height:100%;display:block}
.town{left:-22%;width:144%;bottom:15%;height:46%;z-index:1;filter:drop-shadow(0 4px 8px rgba(60,20,5,.45))}
.town text{font-family:var(--f-display);fill:#3D1F05;letter-spacing:.04em}
.town .lit{opacity:var(--p)}
.town svg{width:100%;height:100%;display:block}
.ground .dunes{position:absolute;left:0;right:0;top:0;width:100%;height:100%;display:block}
.ground{position:absolute;left:-10vw;right:-10vw;top:83%;height:420px;z-index:0;background:linear-gradient(to bottom,#bb7a2c 0%,#a8661e 22%,#95591a 55%,#7d4812 100%)}
.ground::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,200,120,.25)}
.dust{position:absolute;inset:0;z-index:2;will-change:transform;background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,225,170,.7),transparent 70%),radial-gradient(1.5px 1.5px at 70% 60%,rgba(255,225,170,.6),transparent 70%),radial-gradient(2px 2px at 45% 80%,rgba(255,210,150,.55),transparent 70%),radial-gradient(1.5px 1.5px at 85% 20%,rgba(255,225,170,.6),transparent 70%),radial-gradient(1px 1px at 10% 70%,rgba(255,225,170,.7),transparent 70%);background-size:300px 300px,260px 260px,340px 340px,220px 220px,280px 280px;animation:drift 22s linear infinite;opacity:.8}
.skin-l{position:absolute;bottom:0;z-index:4}
.skin-l img{height:100%;width:auto;animation:rise 1s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 12px 14px rgba(0,0,0,.6))}
.skin-l.front{height:92%}
.skin-l.front.l{left:-10%}
.skin-l.front.r{right:-10%}
.skin-l.front img{animation-delay:1.15s}
.skin-l.front.r img{animation-delay:1.3s}
.tumble{position:absolute;left:0;bottom:-4px;width:30px;height:30px;z-index:5;animation:roll 12s 3s linear infinite}
.tumble svg{width:100%;height:100%;animation:spin 1.3s linear infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.hero-cta{position:relative;z-index:6;margin-top:18px;animation:rise .9s 1.6s both}
.stores{display:flex;gap:12px;max-width:560px;margin:0 auto}
.store{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:8px 10px;border-radius:12px;background:linear-gradient(#6B3A12,#4A2C0A 45%,#3A1E07);border:2px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,200,120,.25),0 4px 0 #1a0a02,0 8px 18px rgba(0,0,0,.5),0 0 22px rgba(212,168,32,.25);transition:transform .08s,box-shadow .08s}
.store:active{transform:translateY(3px);box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 1px 0 #1a0a02}
.store-k{font:10px var(--f-type);letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}
.store-n{font:400 clamp(17px,4.6vw,22px) var(--f-display);color:var(--cream);text-shadow:0 2px 0 #1a0a02;white-space:nowrap}
.hero-note{text-align:center;font:12px var(--f-type);letter-spacing:.22em;text-transform:uppercase;color:var(--cream-2);margin-top:14px}
.hero-note b{display:block;font-weight:400;margin-top:6px;animation:bob 1.6s ease-in-out infinite}

/* DUEL */
.beats{display:grid;gap:26px;margin-top:40px}
.beat{position:relative;background:radial-gradient(ellipse at 50% 0%,#F1E1B4,#E8D4A0 50%,#D8BC85);color:var(--outline);padding:28px 22px 26px;border:3px solid var(--outline);box-shadow:inset 0 0 0 3px var(--parch),inset 0 0 0 5px var(--copper-d),inset 0 0 60px rgba(74,44,10,.3),0 14px 30px rgba(0,0,0,.5);display:grid;grid-template-columns:96px 1fr;column-gap:18px;align-items:center}
.beat::before,.beat::after{content:"";position:absolute;top:10px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4D27B,#8B6A1C 70%,#3D1F05);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.beat::before{left:10px}.beat::after{right:10px}
.beat .num{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:400 18px/1 var(--f-display);color:#F0DDB0;background:linear-gradient(#3D1F05,#2A1503);border:1.5px solid var(--copper);padding:6px 16px 7px;letter-spacing:.1em;box-shadow:0 3px 6px rgba(0,0,0,.45)}
.beat h3{font:400 30px/1 var(--f-display);color:var(--red)}
.beat p{margin-top:8px;font-size:16px;line-height:1.4;color:#4A2C0A;text-wrap:pretty}
.ico{width:96px;height:96px;display:flex;align-items:center;justify-content:center;position:relative}
.img-ico img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.img-ico b{position:absolute;inset-inline-end:-6px;top:2px;font:400 22px var(--f-display);color:#2f7a2a;text-shadow:0 1px 0 rgba(255,235,180,.7)}
.in .img-ico img{animation:clash .9s .4s cubic-bezier(.3,1.4,.4,1) both}
.streak{width:84px;height:84px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:radial-gradient(circle at 40% 35%,#FFF6DC,#E8D4A0 70%);border:4px solid var(--red);box-shadow:inset 0 0 0 2px var(--outline),0 0 0 3px rgba(184,64,32,.25),0 4px 10px rgba(0,0,0,.35)}
.streak b{font:400 36px/1 var(--f-display);color:var(--red)}
.streak small{font:8px var(--f-type);letter-spacing:.18em;text-transform:uppercase;color:#6B3A12;margin-top:2px}
.in .streak{animation:glowred 1.4s .9s ease-out}
.pass i{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) rotate(-4deg);font:9px var(--f-type);letter-spacing:.26em;text-transform:uppercase;color:var(--outline);background:linear-gradient(#F1D585,#D9B25A 60%,#9E792C);border:1.5px solid var(--outline);padding:3px 8px 2px;box-shadow:0 2px 0 rgba(122,82,32,.5);white-space:nowrap}
.in .pass img{animation:clash .9s .4s cubic-bezier(.3,1.4,.4,1) both}
.watch{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF6DC,#E8D4A0 70%);border:4px solid var(--copper-d);box-shadow:inset 0 0 0 2px var(--outline),0 4px 10px rgba(0,0,0,.35);position:relative}
.watch::before{content:"";position:absolute;left:50%;top:6px;width:3px;height:9px;margin-left:-1.5px;background:var(--red)}
.watch::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--outline)}
.hand{position:absolute;left:50%;bottom:50%;width:3px;height:30px;margin-left:-1.5px;background:var(--outline);transform-origin:50% 100%;transform:rotate(-110deg);border-radius:2px}
.in .hand{animation:handin 1.8s .3s cubic-bezier(.3,1.2,.3,1) forwards}
.flash{font:400 26px var(--f-display);color:var(--red);text-shadow:0 2px 0 rgba(255,235,180,.6)}
.flash::before{content:"";position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px;border-radius:50%;background:radial-gradient(circle,rgba(255,220,120,.95),rgba(255,170,40,.5) 45%,transparent 70%);opacity:0;z-index:-1}
.in .flash::before{animation:burst 1.4s .4s ease-out infinite}
.in .flash{animation:shake .5s .45s ease-in-out 2}
.elo-ico img{width:54px;height:54px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.elo-ico b{position:absolute;inset-inline-end:-2px;top:6px;font:400 22px var(--f-display);color:#2f7a2a;text-shadow:0 1px 0 rgba(255,235,180,.7)}

/* ARSENAL */
.arsenal{background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(212,168,32,.12),transparent 70%),linear-gradient(rgba(10,5,2,.55),rgba(10,5,2,.55))}
.finish{display:flex;justify-content:center;margin-top:28px;max-width:420px;margin-left:auto;margin-right:auto}
.finish button{all:unset;cursor:pointer;flex:1 1 0;min-width:0;font:13px var(--f-type);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2);padding:12px 6px;border:2px solid var(--copper-d);border-inline-width:1px;background:linear-gradient(#3A1E07,#2A1404);text-align:center;white-space:nowrap}
.finish button:first-child{border-start-start-radius:10px;border-end-start-radius:10px;border-inline-start-width:2px}
.finish button:last-child{border-start-end-radius:10px;border-end-end-radius:10px;border-inline-end-width:2px}
.finish button.on{background:linear-gradient(#F1D585,#D9B25A 60%,#9E792C);color:var(--outline);box-shadow:inset 0 2px 4px rgba(255,245,210,.6)}
.guns{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px max(20px,calc((100vw - min(74vw,320px)) / 2)) 16px;scroll-padding-inline:max(20px,calc((100vw - min(74vw,320px)) / 2));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.guns::-webkit-scrollbar{display:none}
.gun{flex:0 0 min(74vw,320px);scroll-snap-align:center;position:relative;background:linear-gradient(#3A1E07,#2A1404);border:2px solid var(--copper-d);border-radius:12px;padding:18px 18px 22px;box-shadow:inset 0 0 0 1px rgba(212,168,32,.3),inset 0 0 40px rgba(0,0,0,.5),0 12px 26px rgba(0,0,0,.5);text-align:center}
.gun-img{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:radial-gradient(circle at 50% 55%,rgba(232,212,160,.14),transparent 65%)}
.gun-img img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(0,0,0,.6));transition:filter .3s;will-change:transform}
.gun[data-finish="-gold"] .gun-img img{filter:drop-shadow(0 0 4px rgba(255,210,120,.9)) drop-shadow(0 0 20px rgba(255,170,40,.55)) drop-shadow(0 14px 14px rgba(0,0,0,.6))}
.gun[data-finish="-silver"] .gun-img img{filter:drop-shadow(0 0 4px rgba(200,220,255,.8)) drop-shadow(0 0 18px rgba(120,160,220,.45)) drop-shadow(0 14px 14px rgba(0,0,0,.6))}
.gun-img::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,240,200,.35),transparent);transform:translateX(-200%) skewX(-20deg);pointer-events:none}
.gun.swap .gun-img::after{animation:shine .7s ease-out}
.gun.swap .gun-img img{animation:pop .45s ease-out}
.gun h3{font:400 28px/1 var(--f-display);color:var(--cream);margin-top:14px;text-shadow:0 2px 0 #1a0a02}
.gun p{font-style:italic;color:var(--cream-2);font-size:15px;margin-top:8px;text-wrap:pretty}
.guns-hint{display:flex;justify-content:center;gap:12px;margin-top:4px}
.guns.grab{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.guns.grab .gun{pointer-events:none;transition:none}
.gun{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;will-change:transform}
.gun.off{transform:scale(.94);opacity:.72}
@media (hover:hover){.guns{cursor:grab}}
/* carousel focus effect driven by the scroll position itself (compositor only, no JS during the swipe) */
@media (max-width:759px){
@supports (animation-timeline: view()){
.guns .gun{transition:none;animation:gunFocus linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
.guns .gun.off{transform:none;opacity:1}
@keyframes gunFocus{0%{transform:scale(.9);opacity:.55}50%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.55}}
}
}

.guns-hint i{width:9px;height:9px;border-radius:50%;background:var(--copper-d);opacity:.5;cursor:pointer;padding:0;position:relative}
.guns-hint i::after{content:"";position:absolute;inset:-10px}
.guns-hint i.on{background:var(--gold);opacity:1}
.gun .fin{display:inline-block;margin-top:12px;font:11px var(--f-type);letter-spacing:.3em;text-transform:uppercase;color:var(--copper);border:1px solid var(--copper-d);padding:5px 10px 4px;border-radius:999px}
.gun.tease{border-style:dashed;background:linear-gradient(rgba(58,30,7,.6),rgba(42,20,4,.6))}
.gun.tease .gun-img{background:radial-gradient(circle at 50% 55%,rgba(212,168,32,.12),transparent 65%)}
.gun.tease .q{font:400 clamp(96px,30vw,150px)/1 var(--f-display);color:transparent;-webkit-text-stroke:2px var(--copper-d);text-shadow:0 0 24px rgba(212,168,32,.25);animation:qpulse 2.6s ease-in-out infinite}
.gun.tease h3{color:var(--cream-2);letter-spacing:.06em}
.gun.tease .fin{color:var(--cream);background:var(--red);border-color:var(--outline);box-shadow:0 2px 0 #1a0a02}

/* RANKED */
.board{position:relative;max-width:560px;margin:38px auto 0;background:linear-gradient(#F1E1B4,#E8D4A0 40%,#D8BC85);color:var(--outline);border:3px solid var(--outline);box-shadow:inset 0 0 0 3px var(--parch),inset 0 0 0 5px var(--copper-d),inset 0 0 60px rgba(74,44,10,.3),0 14px 30px rgba(0,0,0,.5);padding:16px 14px 14px}
.board-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;font:12px var(--f-type);letter-spacing:.3em;text-transform:uppercase;color:#4A2C0A;padding:0 4px 12px;border-bottom:2px solid var(--outline);position:relative}
.board-head::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--outline);opacity:.5}
.board-head span:last-child{text-align:end}
.seal{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:400 18px/1 var(--f-display);letter-spacing:0;color:#2A1404;background:radial-gradient(circle at 35% 30%,#F4D27B,#C49A2E 40%,#8B6A1C 78%,#4A2C0A);box-shadow:0 0 0 2px var(--outline),inset -2px -3px 5px rgba(0,0,0,.4),inset 2px 3px 4px rgba(255,235,180,.5),0 3px 6px rgba(0,0,0,.35)}
.cols{display:grid;grid-template-columns:30px 38px minmax(0,1fr) auto;gap:10px;padding:14px 8px 2px;font:10px var(--f-type);letter-spacing:.26em;text-transform:uppercase;color:#8B6A1C}
.cols span:first-child{text-align:center}
.rows{position:relative;height:calc(5 * 58px);margin-top:2px}
.row{position:absolute;left:0;right:0;height:58px;top:calc((var(--r,1) - 1) * 58px);display:grid;grid-template-columns:30px 38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 8px;border-bottom:1px dashed rgba(61,31,5,.3);transition:top 1s cubic-bezier(.2,.8,.2,1)}
.row .rk{font:400 20px var(--f-display);color:var(--copper-d);text-align:center}
.badge{display:block;flex:none;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:transform .4s}
.row .nm{display:flex;align-items:center;gap:8px;min-width:0}
.row .nm em{font-style:normal;font-weight:700;font-size:16px;color:var(--outline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm i{flex:none;font:10px var(--f-type);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);background:var(--red);padding:3px 7px 2px;border-radius:3px;box-shadow:0 1px 0 #3D1F05}
.row .elo{font:400 22px var(--f-display);color:var(--outline);font-variant-numeric:tabular-nums}
.row.you{z-index:2;background:linear-gradient(to right,rgba(184,64,32,.16),rgba(184,64,32,.05));border:2px solid var(--red);border-radius:6px;margin:0 -2px;padding:0 10px}
.row.you .rk,.row.you .nm em,.row.you .elo{color:var(--red)}
.row.up{animation:glow 1.3s .9s ease-out}
.row.up .badge{transform:scale(1.15)}
.row .gain{position:absolute;inset-inline-end:10px;top:-14px;font:400 16px var(--f-display);color:#2f7a2a;opacity:0}
.row.up .gain{animation:floatup 1.6s .2s ease-out forwards}
.board-foot{margin-top:10px;padding-top:10px;border-top:2px solid var(--outline);font-size:13px;font-style:italic;color:#6B3A12;text-align:center;text-wrap:pretty}
.tiers{position:relative;display:flex;justify-content:space-between;gap:4px;max-width:560px;margin:34px auto 0;padding:0 4px}
.tiers::before{content:"";position:absolute;left:10%;right:10%;top:20px;height:2px;background:linear-gradient(90deg,transparent,#8B6A1C 15%,#D4A820 50%,#8B6A1C 85%,transparent);opacity:.7}
.tier{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font:10px var(--f-type);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);text-align:center}
.tier .badge{width:40px;height:40px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s}
.tier small{display:block;font:10px var(--f-type);letter-spacing:.1em;color:var(--copper);margin-top:-3px}
.tier .pin{position:absolute;top:-24px;font:10px var(--f-type);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);background:var(--red);padding:3px 7px 2px;border-radius:3px;box-shadow:0 2px 0 #3D1F05;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.tier .pin::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:var(--red);transform:rotate(45deg)}
.tier.here .pin{opacity:1;transform:none}
.tier.here{color:var(--gold)}
.tier.here .badge{transform:scale(1.22);filter:drop-shadow(0 0 10px rgba(212,168,32,.85)) drop-shadow(0 4px 6px rgba(0,0,0,.5))}

/* NOTIFY */
.notify{background:radial-gradient(ellipse 90% 60% at 50% 40%,rgba(212,168,32,.14),transparent 70%)}
.poster{position:relative;max-width:560px;margin:0 auto;background:radial-gradient(ellipse at 50% 0%,#F1E1B4,#E8D4A0 50%,#D8BC85);color:var(--outline);padding:40px 24px 32px;border:3px solid var(--outline);box-shadow:inset 0 0 0 4px var(--parch),inset 0 0 0 7px var(--copper-d),inset 0 0 70px rgba(74,44,10,.35),0 18px 40px rgba(0,0,0,.55);text-align:center}
.nail{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4D27B 0%,#C49A2E 30%,#8B6A1C 70%,#4A2C0A 100%);box-shadow:0 0 0 2px var(--outline),inset -2px -3px 4px rgba(0,0,0,.45)}
.nail.tl{top:12px;left:12px}.nail.tr{top:12px;right:12px}.nail.bl{bottom:12px;left:12px}.nail.br{bottom:12px;right:12px}
.poster-k{font:15px var(--f-type);letter-spacing:.5em;text-transform:uppercase;color:#5C2E0A}
.poster-h{font:400 clamp(72px,22vw,120px)/.9 var(--f-display);color:var(--red);margin-top:6px;text-shadow:0 2px 0 rgba(255,235,180,.5),0 4px 0 rgba(122,42,18,.35)}
.poster-p{margin:18px auto 0;max-width:30ch;color:#4A2C0A;text-wrap:pretty}
.form{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.form input{min-height:54px;padding:0 16px;border:2px solid var(--outline);border-radius:10px;background:#FBF1D6;color:var(--outline);font-size:17px;outline:none;box-shadow:inset 0 2px 6px rgba(74,44,10,.25)}
.form .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form input::placeholder{color:#9a7a4a}
.form input:focus{border-color:var(--red);box-shadow:inset 0 2px 6px rgba(74,44,10,.25),0 0 0 3px rgba(184,64,32,.25)}
.form.err input{border-color:var(--red);animation:shake .4s}
.fine{margin-top:16px;font:11px var(--f-type);letter-spacing:.24em;text-transform:uppercase;color:#6B3A12}
.done{margin-top:24px;font:400 24px/1.2 var(--f-display);color:#2f7a2a;text-shadow:0 1px 0 rgba(255,235,180,.6)}
.done[hidden]{display:none}
.discord{display:block;text-align:center;margin-top:26px;font:14px var(--f-type);letter-spacing:.2em;text-transform:uppercase}

/* DRAW GAME */
.drawgame{background:linear-gradient(rgba(10,5,2,.6),rgba(10,5,2,.6))}
.arena{position:relative;max-width:640px;margin:36px auto 0;min-height:340px;border-radius:16px;overflow:hidden;border:3px solid var(--copper-d);box-shadow:inset 0 0 0 1px rgba(212,168,32,.35),0 18px 40px rgba(0,0,0,.6);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.arena-bg{position:absolute;inset:0;background:linear-gradient(180deg,#0e0a14 0%,#2a1622 40%,#5a2a16 70%,#2a1404 72%,#1a0f05 100%);transition:filter .2s}
.arena-bg::after{content:"";position:absolute;left:-5%;right:-5%;top:71.5%;height:2px;background:rgba(255,200,120,.3)}
.arena-flash{position:absolute;left:50%;top:45%;width:120px;height:120px;margin:-60px;border-radius:50%;background:radial-gradient(circle,#FFF6D0,rgba(255,200,80,.9) 35%,rgba(255,120,30,.4) 60%,transparent 72%);opacity:0;pointer-events:none}
.arena[data-state="go"] .arena-bg{filter:brightness(1.9) saturate(1.3)}
.arena[data-state="go"] .arena-flash{animation:burst .5s ease-out}
.arena[data-state="go"]{animation:shake .35s}
.arena-ui{position:relative;z-index:2;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.arena-k{font:14px var(--f-type);letter-spacing:.4em;text-transform:uppercase;color:var(--copper);min-height:1.4em}
.arena-big{font:400 clamp(56px,16vw,96px)/1 var(--f-display);color:var(--cream);text-shadow:0 3px 0 #1a0a02,0 10px 24px rgba(0,0,0,.6)}
.arena[data-state="go"] .arena-big{color:#C8482A;text-shadow:0 3px 0 #3D1F05,0 0 30px rgba(255,180,60,.9)}
.arena[data-state="wait"] .arena-big{color:var(--cream-2);letter-spacing:.3em;animation:pulse 1.2s ease-in-out infinite}
.arena[data-state="early"] .arena-big{color:#9a8a7a}
.arena-sub{font-style:italic;color:var(--cream-2);min-height:1.5em}
.arena .btn{margin-top:10px}
.arena:not([data-state="idle"]) .btn{display:none}
.scores{max-width:640px;margin:22px auto 0;display:grid;grid-template-columns:1fr;gap:14px}
.best{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border:2px solid var(--copper-d);border-radius:12px;background:linear-gradient(#3A1E07,#2A1404)}
.best span{font:12px var(--f-type);letter-spacing:.3em;text-transform:uppercase;color:var(--copper)}
.best b{font:400 30px var(--f-display);color:var(--gold);text-shadow:0 2px 0 #1a0a02}
.score-list{border:2px solid var(--copper-d);border-radius:12px;background:linear-gradient(#3A1E07,#2A1404);padding:6px 18px}
.score-list li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(212,168,32,.25)}
.score-list li:last-child{border-bottom:0}
.score-list .rk{font:400 16px var(--f-display);color:var(--copper-d)}
.score-list b{font:400 20px var(--f-display);color:var(--cream)}
.score-list .lbl{font:11px var(--f-type);letter-spacing:.24em;text-transform:uppercase;color:var(--cream-2)}
.score-list .empty{display:block;font-style:italic;color:var(--cream-2);text-align:center;padding:14px 0}

/* FOOTER */
.foot{position:relative;padding:48px 0 calc(110px + env(safe-area-inset-bottom));background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.6));border-top:2px solid var(--copper-d);text-align:center}
.foot-mark{font:13px var(--f-type);letter-spacing:.42em;text-transform:uppercase;color:var(--cream-2)}
.foot-links,.foot-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:22px}
.foot-links a{font:400 20px var(--f-display);color:var(--gold);text-shadow:0 2px 0 #1a0a02}
.foot-legal{margin-top:18px}
.foot-legal a{font:12px var(--f-type);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}
.copy{margin-top:26px;font-size:12px;color:rgba(232,201,135,.6);text-wrap:pretty}

/* STICKY CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 14px calc(14px + env(safe-area-inset-bottom));pointer-events:none;transform:translateY(130%);transition:transform .55s cubic-bezier(.2,.9,.25,1.15)}
.sticky.show{transform:none}
.sticky-in{pointer-events:auto;max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;padding-inline-start:18px;border-radius:16px;background:linear-gradient(#5a3010,#3A1E07 40%,#22100a);border:2px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,220,150,.3),0 10px 30px rgba(0,0,0,.65),0 0 0 4px rgba(26,10,2,.6);position:relative;overflow:hidden}
.sticky-in::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-20%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,235,180,.16),transparent);transform:skewX(-20deg) translateX(-200%)}
.sticky.show .sticky-in::before{animation:shine 3.2s 1s ease-in-out infinite}
.sticky span{display:flex;flex-direction:column;gap:3px;font:13px var(--f-type);letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 0 #1a0a02;min-width:0}
.sticky span small{font:11px var(--f-type);letter-spacing:.16em;color:var(--copper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{min-height:48px;padding:0 22px;font-size:19px;flex:none;box-shadow:inset 0 1px 0 rgba(255,220,180,.35),0 4px 0 #1a0a02,0 8px 18px rgba(0,0,0,.5),0 0 18px rgba(216,96,58,.45)}
.sticky.show .btn{animation:nudge 2.6s 1.2s ease-in-out infinite}

/* KEYFRAMES */
@keyframes drop{0%{opacity:0;transform:translateY(-80px) scale(1.15)}60%{opacity:1;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes drift{to{background-position:40px -300px,-30px -260px,20px -340px,-40px -220px,30px -280px}}
@keyframes roll{0%{transform:translateX(-60px) translateY(0)}25%{transform:translateX(25vw) translateY(-6px)}50%{transform:translateX(50vw) translateY(0)}75%{transform:translateX(75vw) translateY(-5px)}100%{transform:translateX(calc(100vw + 60px)) translateY(0)}}
@keyframes handin{to{transform:rotate(0deg)}}
@keyframes burst{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
@keyframes shine{to{transform:translateX(420%) skewX(-20deg)}}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes qpulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
@keyframes floatup{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}
@keyframes nudge{0%,100%{transform:none}6%{transform:scale(1.05)}12%{transform:scale(1)}18%{transform:scale(1.04)}24%{transform:none}}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(212,168,32,0)}35%{box-shadow:0 0 0 4px rgba(212,168,32,.45),0 0 28px rgba(212,168,32,.7)}100%{box-shadow:0 0 0 0 rgba(212,168,32,0)}}
@keyframes glowred{0%{box-shadow:inset 0 0 0 2px var(--outline),0 0 0 3px rgba(184,64,32,.25)}40%{box-shadow:inset 0 0 0 2px var(--outline),0 0 0 8px rgba(184,64,32,.0),0 0 30px rgba(216,96,58,.8)}100%{box-shadow:inset 0 0 0 2px var(--outline),0 0 0 3px rgba(184,64,32,.25),0 4px 10px rgba(0,0,0,.35)}}
@keyframes clash{0%{transform:scale(.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}


/* SHORT VIEWPORTS (in-app browsers, small phones): keep title, skins, stores and sticky CTA all visible */
/* @media (max-height:720px) -> measured once at load (class set by landing.js), so the layout never jumps when the mobile toolbar collapses */
.hero.compact .hero-content{padding-top:22px;padding-bottom:96px}
.hero.compact .hero-top{gap:6px}
.hero.compact .ribbon{font-size:13px;padding:5px 14px 4px 18px}
.hero.compact .hero-title{margin-top:6px}
.hero.compact .hero-title .w{font-size:clamp(52px,min(21vw,calc(var(--svh,100svh) * 0.115)),200px)}
.hero.compact .hero-tag{margin-top:8px;font-size:12px}
.hero.compact .posse{min-height:clamp(120px,calc(var(--svh,100svh) * 0.22),300px);margin-top:4px}
.hero.compact .hero-cta{margin-top:12px}
.hero.compact .store{min-height:54px;padding:6px 10px}
.hero.compact .hero-note{font-size:11px;margin-top:8px}
.hero.compact .hero-note b{display:none}
/* @media (max-height:600px) -> measured once at load (class set by landing.js), so the layout never jumps when the mobile toolbar collapses */
.hero.tiny .hero-title .w{font-size:clamp(44px,min(18vw,calc(var(--svh,100svh) * 0.1)),200px)}
.hero.tiny .posse{min-height:clamp(100px,calc(var(--svh,100svh) * 0.2),300px)}
.hero.tiny .hero-note{display:none}

/* DESKTOP */
@media (min-width:760px){
.sec{padding:100px 0}
.hero-content{min-height:calc(var(--svh,100svh) * 1);padding-top:18px;padding-bottom:110px}
.posse{min-height:clamp(160px,calc(var(--svh,100svh) * 0.3),260px);margin-top:0}
.skin-l.front{height:100%}
.skin-l.front.l{left:8%}
.skin-l.front.r{right:8%}
.town{left:0;width:100%;bottom:14%;height:58%}
.mesas{height:50%}
.beats{grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.beat{grid-template-columns:1fr;text-align:center;justify-items:center;padding:36px 24px 30px;row-gap:14px}
.beat p{max-width:26ch}
.guns{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;overflow:visible;max-width:1040px;margin:0 auto;padding:40px 20px 0}
.gun.off{transform:none;opacity:1}
.guns-hint{display:none}
.gun{flex:none}
.scores{grid-template-columns:1fr 1.4fr}
.best{flex-direction:column;align-items:center;justify-content:center;text-align:center}
.best b{font-size:44px}
.foot{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.sticky{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.sticky-in{gap:28px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:rotate(var(--rot,0deg))}}

/* stagger helpers (replaces inline style attrs, CSP-safe) */
.d08{--d:.08s}.d1{--d:.1s}.d15{--d:.15s}.d16{--d:.16s}.d2{--d:.2s}.d24{--d:.24s}.d25{--d:.25s}.d3{--d:.3s}.d32{--d:.32s}
.rn12{--rot:-1.2deg}.rp10{--rot:1deg}.rn06{--rot:-.6deg}

/* EN / AR button (top corner of the hero, static) */
.lang{all:unset;cursor:pointer;position:absolute;top:14px;inset-inline-end:14px;z-index:7;font:700 11px/1 system-ui,'Segoe UI',Tahoma,sans-serif;letter-spacing:.04em;color:var(--cream);text-shadow:0 1px 0 #1a0a02;background:linear-gradient(#6B3A12,#4A2C0A 45%,#3A1E07);border:1.5px solid var(--gold);border-radius:999px;padding:7px 11px 6px;box-shadow:inset 0 1px 0 rgba(255,200,120,.25),0 3px 0 #1a0a02,0 6px 14px rgba(0,0,0,.4);animation:fade 1s .2s both}
.lang:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 1px 0 #1a0a02}
.lang:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.hero.compact .lang{top:10px;inset-inline-end:10px}
@media (min-width:760px){.lang{top:18px;inset-inline-end:20px;font-size:12px;padding:8px 14px 7px}}

/* ARABIC MODE — <html lang="ar" dir="rtl"> set by lang.js. Cursive script: no letter-spacing, no fake italics, taller line boxes.
   Latin runs (HIGH NOON, store names, town signs, gun names, digits) keep the western fonts via unicode-range fallthrough. */
html[lang="ar"]{--f-display:'Lalezar','Rye',serif;--f-type:'Cairo','Special Elite',monospace;--f-body:'Cairo','Libre Caslon Text',Georgia,serif}
html[lang="ar"] body{font-size:17px;line-height:1.7}
html[lang="ar"] .lang{font-family:var(--f-type);letter-spacing:.12em}
html[lang="ar"] :is(.kicker,.ribbon,.hero-tag,.store-k,.hero-note,.fin,.cols,.board-head,.tier,.tier small,.pin,.row .nm i,.sticky span,.fine,.discord,.arena-k,.foot-legal a,.streak small,.pass i,.score-list .lbl,.best span,.poster-k){letter-spacing:0;font-weight:700}
html[lang="ar"] :is(.lede,.gun p,.arena-sub,.board-foot,.score-list .empty,.copy){font-style:normal}
html[lang="ar"] :is(.btn,.beat .num,.gun .fin){letter-spacing:0}
html[lang="ar"] .ribbon{padding:6px 16px 5px}
html[lang="ar"] .hero-tag{font-size:14px}
html[lang="ar"] .store-k{font-size:11px}
html[lang="ar"] .hero-note{font-size:13px}
html[lang="ar"] .h2{line-height:1.15}
html[lang="ar"] .lede{max-width:40ch}
html[lang="ar"] .beat h3{line-height:1.25}
html[lang="ar"] .beat p{font-size:16px;line-height:1.6}
html[lang="ar"] .streak small{font-size:9px}
html[lang="ar"] .pass i{font-size:10px}
html[lang="ar"] .gun h3{line-height:1.25}
html[lang="ar"] .cols,html[lang="ar"] .board-head{font-size:11px}
html[lang="ar"] .row .nm i,html[lang="ar"] .pin{font-size:11px}
html[lang="ar"] .tier,html[lang="ar"] .tier small{font-size:11px}
html[lang="ar"] .poster-h{line-height:1.05}
html[lang="ar"] .poster-k{font-size:16px}
html[lang="ar"] .form input{text-align:left}
html[lang="ar"] .fine{font-size:12px}
html[lang="ar"] .done{line-height:1.35}
html[lang="ar"] .discord{font-size:15px}
html[lang="ar"] .arena-k{font-size:15px}
html[lang="ar"] .arena-big{line-height:1.15}
html[lang="ar"] .score-list .lbl{font-size:12px}
html[lang="ar"] .best span{font-size:13px}
html[lang="ar"] .foot-legal a{font-size:13px}
html[lang="ar"] .sticky span{font-size:14px}
html[lang="ar"] .btn{font-size:21px}
html[dir="rtl"] .row.you{background:linear-gradient(to left,rgba(184,64,32,.16),rgba(184,64,32,.05))}

/* cookie settings panel (consent.js) — opened from the footer, above the sticky CTA */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 14px calc(14px + env(safe-area-inset-bottom))}
.consent[hidden]{display:none}
.consent-in{max-width:560px;margin:0 auto;padding:16px 18px;border-radius:16px;background:linear-gradient(#5a3010,#3A1E07 40%,#22100a);border:2px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,220,150,.3),0 10px 30px rgba(0,0,0,.65),0 0 0 4px rgba(26,10,2,.6);color:var(--cream)}
.consent p{font:14px/1.5 var(--f-body);text-wrap:pretty}
.consent p+p{margin-top:8px;font-family:system-ui,'Segoe UI',Tahoma,sans-serif;font-size:15px}
.consent a{color:var(--cream-2);text-decoration:underline}
.consent-btns{display:flex;gap:10px;margin-top:14px}
.consent .btn{flex:1;flex-direction:column;gap:2px;min-height:54px;padding:4px 12px;font-size:17px}
.consent .btn small{font:600 14px system-ui,'Segoe UI',Tahoma,sans-serif;letter-spacing:0;text-shadow:none;color:var(--cream-2)}