/* Forge No Ads Games: launcher homepage. Forge and Salty face the burning Forge sign; halls on the left, showcase below.
   Storefront only. Motion is CSS; it pauses off screen and stops for reduced-motion and data-saver visitors. */
.fx-body{--ink:#f6ebde;--muted:#c9b4a0;--dim:#a99280;--ember:#ff7a1a;--ember2:#ff9a3c;--gold:#f2b84b;--gold2:#ffd98a;
 --panel:rgba(19,11,8,.82);--line:rgba(255,154,72,.24);--line2:rgba(242,184,75,.55);--px:0;--py:0;
 --cinzel:"Cinzel",Georgia,"Times New Roman",serif;--bungee:"Bungee",Impact,"Arial Black",sans-serif;--fig:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
 margin:0;min-height:100vh;background:#0b0604;color:var(--ink);font:15px/1.45 var(--fig);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.fx-body a{color:inherit}
.fx-body :focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:8px}
.fx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--gold2);color:#1a0b05!important;font-weight:800;text-decoration:none}
.fx-skip:focus{top:12px}
html:not(.fx-owned) .fx-is-owned,html.fx-owned .fx-not-owned{display:none!important}
.fx-body svg{flex:none}

/* atmosphere */
.fx-bg{position:fixed;inset:0;z-index:-3;background:radial-gradient(1100px 520px at 50% 4%,rgba(255,96,20,.2),transparent 70%),radial-gradient(900px 700px at 50% 120%,rgba(120,30,8,.32),transparent 70%),url("/assets/art/forge-ash.webp") center top/1400px auto repeat}
.fx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,4,.15),rgba(11,6,4,.7) 55%,rgba(11,6,4,.92))}
.fx-ambient{position:absolute;z-index:-2;left:0;right:0;top:-40px;height:1060px;background:url("/assets/art/forge-ambient.webp") center/max(1900px,130%) auto no-repeat;opacity:.4;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}

/* top bar */
.fx-top{position:sticky;top:0;z-index:30;max-width:1640px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:14px 28px;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.fx-top.is-scrolled{background:rgba(12,6,4,.82);box-shadow:0 1px 0 rgba(255,154,72,.16),0 14px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
@supports (width:100dvw){.fx-top.is-scrolled{max-width:none;padding-inline:max(28px,calc((100dvw - 1640px)/2 + 28px))}}
.fx-top .fh-brand{gap:12px;color:var(--ink);flex:none}
.fx-top .fh-brand img{width:46px;height:46px;filter:drop-shadow(0 0 10px rgba(255,120,30,.55));transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.fx-top .fh-brand:hover img{transform:rotate(-18deg)}
.fx-top .fh-brand b{display:block;font:400 34px/1 var(--bungee);letter-spacing:.02em;background:linear-gradient(180deg,#fff1c9 0%,#ffc35a 38%,#ff7a1a 70%,#b8410c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #3a1406) drop-shadow(0 0 14px rgba(255,110,20,.45))}
.fx-top .fh-brand small{display:flex;align-items:center;gap:8px;margin-top:5px;font:700 11px/1 var(--cinzel);letter-spacing:.32em;color:var(--gold2);white-space:nowrap}
.fx-top .fh-brand small::before,.fx-top .fh-brand small::after{content:"";width:18px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.fx-top .fh-brand small::after{transform:scaleX(-1)}
.fx-find{display:flex;align-items:center;gap:10px;flex:0 1 420px;min-width:0;min-height:46px;margin:0 auto;padding:0 10px 0 16px;border-radius:12px;border:1px solid var(--line);background:rgba(20,11,8,.66);color:var(--muted);font:600 14px var(--fig);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.fx-find:hover{border-color:var(--line2);color:var(--ink);background:rgba(30,16,10,.8)}
.fx-find svg{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.fx-find span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-find kbd{padding:2px 8px;border-radius:6px;border:1px solid var(--line);background:rgba(0,0,0,.3);font:700 12px var(--fig);color:var(--dim)}
.fx-actions{display:flex;align-items:center;gap:10px;flex:none}
.fx-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:46px;height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:rgba(20,11,8,.66);color:var(--ink);font:700 14px var(--fig);cursor:pointer;transition:border-color .2s,background .2s}
.fx-icon:hover{border-color:var(--line2);background:rgba(34,18,11,.85)}
.fx-icon svg{width:21px;height:21px;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx-icon[hidden]{display:none}
.fx-find-sm{display:none}
.fx-sound .fx-snd-w{display:none}
.fx-sound[aria-pressed="true"]{border-color:var(--line2);background:linear-gradient(180deg,rgba(214,74,14,.55),rgba(120,24,6,.55));box-shadow:0 0 18px rgba(255,100,20,.3)}
.fx-sound[aria-pressed="true"] .fx-snd-w{display:inline;animation:fx-pulse-o 1.4s ease-in-out infinite}
.fx-sound[aria-pressed="true"] .fx-snd-x{display:none}
.fx-me{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px 0 6px;border-radius:12px;border:1px solid var(--line);background:rgba(20,11,8,.66);text-decoration:none;transition:border-color .2s}
.fx-me:hover{border-color:var(--line2)}
.fx-me-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--me,#3a2216);box-shadow:0 0 0 2px rgba(255,217,138,.35);font:400 15px var(--bungee);font-style:normal;color:#fff}
.fx-me-av svg{width:18px;height:18px;fill:none;stroke:var(--gold2);stroke-width:1.8}
.fx-me b{display:block;font-size:14px;font-weight:800;line-height:1.1;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-me small{display:block;font-size:12px;color:var(--muted);line-height:1.2;white-space:nowrap}
.fx-buy{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 8px 0 18px;border-radius:12px;border:1px solid #ffc66b;background:linear-gradient(180deg,#ff9a3c,#e2560e 60%,#b63a07);color:#fff;text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,.4) inset,0 8px 26px rgba(255,100,20,.35);transition:filter .2s,transform .2s}
.fx-buy:hover{filter:brightness(1.1);transform:translateY(-1px)}
.fx-buy i{font-style:normal}
.fx-buy em{padding:4px 9px;border-radius:8px;background:rgba(40,10,0,.38);font:400 14px var(--bungee);font-style:normal}
.fx-buy.is-owned{background:linear-gradient(180deg,#3b2a1c,#21150e);border-color:var(--line2);box-shadow:none;padding-right:18px}
.fx-buy.is-owned em{display:none}

/* shell */
.fx-shell{position:relative;z-index:2;max-width:1640px;margin:0 auto;padding:4px 28px 36px;display:grid;grid-template-columns:264px minmax(0,1fr) 320px;
 grid-template-areas:"side stage right" "side show right" "side jump jump" "side top10 top10";gap:22px 24px;align-items:start}
.fx-panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 0 rgba(255,210,150,.08) inset,0 20px 50px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fx-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,170,90,.1),transparent 30%)}
.fx-h3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font:700 15px/1.2 var(--cinzel);letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.fx-h3 a{display:inline-flex;align-items:center;gap:4px;min-height:32px;font:700 13px var(--fig);letter-spacing:0;text-transform:none;text-decoration:none;color:var(--muted)}
.fx-h3 a:hover{color:#fff}
.fx-h3 svg,.fx-head-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* halls */
.fx-side{grid-area:side;grid-row:1/-1;position:sticky;top:86px;padding:12px 10px 14px}
.fx-nav{display:flex;flex-direction:column;gap:2px}
.fx-navlabel{margin:12px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fx-item{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:10px;border:1px solid transparent;color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;transition:background .2s,border-color .2s,padding .2s}
.fx-item svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.fx-item em{margin-left:auto;font-style:normal;font-weight:700;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;min-width:22px;text-align:right}
.fx-item:hover{background:rgba(255,140,50,.09);border-color:rgba(255,154,72,.2);padding-left:16px}
.fx-item:hover svg{transform:scale(1.12) rotate(-6deg)}
.fx-item.on{background:linear-gradient(90deg,rgba(214,74,14,.85),rgba(120,24,6,.75));border-color:var(--line2);box-shadow:0 0 22px rgba(255,90,20,.25),0 1px 0 rgba(255,220,160,.25) inset;color:#fff;padding-left:12px}
.fx-item.on svg{stroke:#ffe0a8;transform:none}
.fx-lv{margin-left:auto;padding:2px 7px;border-radius:6px;background:rgba(242,184,75,.16);border:1px solid rgba(242,184,75,.35);font-size:11px;font-weight:800;color:var(--gold2)}
.fx-sep{display:block;height:1px;margin:10px 8px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.fx-sidefoot{display:flex;align-items:center;gap:8px;margin:12px 12px 0;font-size:12px;font-weight:700;color:var(--muted)}
.fx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#43d16b;box-shadow:0 0 0 3px rgba(67,209,107,.18),0 0 10px #43d16b}

/* stage: Forge and Salty facing the burning sign */
.fx-stage{grid-area:stage;position:relative;height:610px;overflow-x:clip;clip-path:inset(-200px 0 0 0)}
.fx-logo{position:absolute;left:50%;top:-6px;width:min(690px,100%);aspect-ratio:1504/835;transform:translate(calc(-50% + var(--px)*-12px),calc(var(--py)*-7px));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fx-logo i{position:absolute;inset:0;background:url("/assets/art/forge-fire-logo.webp") center/cover no-repeat;-webkit-mask-image:radial-gradient(ellipse 54% 54% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 54% 54% at 50% 50%,#000 72%,transparent 100%);animation:fx-breathe 7s ease-in-out infinite}
.fx-flicker{position:absolute;left:50%;top:0;width:min(820px,110%);height:470px;transform:translateX(-50%);background:radial-gradient(ellipse 50% 46% at 50% 55%,rgba(255,120,30,.3),transparent 70%);mix-blend-mode:screen;pointer-events:none;animation:fx-flicker 2.6s steps(1,end) infinite}
.fx-floor{position:absolute;left:0;right:0;bottom:0;height:220px;background:radial-gradient(ellipse 46% 70% at 50% 100%,rgba(255,96,18,.3),transparent 70%);pointer-events:none}
.fx-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffb347;box-shadow:0 0 6px 2px rgba(255,120,30,.8);opacity:0;animation:fx-rise 7s linear infinite}
.fx-embers i:nth-child(1){left:6%;animation-duration:7.5s}
.fx-embers i:nth-child(2){left:12%;animation-delay:1.8s;width:3px;height:3px}
.fx-embers i:nth-child(3){left:19%;animation-delay:3.6s;animation-duration:8.2s}
.fx-embers i:nth-child(4){left:25%;animation-delay:.9s;width:5px;height:5px;animation-duration:9s}
.fx-embers i:nth-child(5){left:31%;animation-delay:4.4s}
.fx-embers i:nth-child(6){left:37%;animation-delay:2.4s;width:3px;height:3px;animation-duration:6.4s}
.fx-embers i:nth-child(7){left:43%;animation-delay:5.1s;animation-duration:8.6s}
.fx-embers i:nth-child(8){left:48%;animation-delay:.4s;width:5px;height:5px}
.fx-embers i:nth-child(9){left:53%;animation-delay:3.1s;animation-duration:7.8s}
.fx-embers i:nth-child(10){left:58%;animation-delay:1.3s;width:3px;height:3px}
.fx-embers i:nth-child(11){left:63%;animation-delay:5.8s;animation-duration:9.4s}
.fx-embers i:nth-child(12){left:68%;animation-delay:2.9s}
.fx-embers i:nth-child(13){left:73%;animation-delay:4.9s;width:5px;height:5px;animation-duration:8s}
.fx-embers i:nth-child(14){left:78%;animation-delay:.2s;width:3px;height:3px}
.fx-embers i:nth-child(15){left:84%;animation-delay:6.3s;animation-duration:6.8s}
.fx-embers i:nth-child(16){left:90%;animation-delay:6.9s;width:3px;height:3px}
.fx-embers i:nth-child(17){left:95%;animation-delay:3.9s;animation-duration:8.8s}
.fx-embers i:nth-child(18){left:40%;animation-delay:7.4s;width:2px;height:2px;animation-duration:5.6s}
.fx-strike{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none}
.fx-strike i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe4a8;box-shadow:0 0 10px 3px rgba(255,150,40,.9);opacity:0}
.fx-cast{position:absolute;inset:0;pointer-events:none}
.fx-actor{position:absolute;bottom:0;width:300px;height:400px;margin:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;overflow:hidden;-webkit-tap-highlight-color:transparent;
 -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%);mask-image:linear-gradient(180deg,#000 74%,transparent 100%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fx-actor:focus-visible{outline:none}
.fx-actor:focus-visible .fx-back,.fx-actor:focus-visible .fx-turn{filter:drop-shadow(0 0 3px #ffd98a) drop-shadow(0 0 16px rgba(255,140,40,.7))}
.fx-actor img{position:absolute;top:0;height:600px;width:auto;filter:drop-shadow(0 0 16px rgba(255,110,24,.38)) drop-shadow(0 0 2px rgba(255,170,80,.55));transition:opacity .28s ease .12s}
.fx-actor--forge{left:-22px;transform:translateX(calc(var(--px)*16px))}
.fx-actor--forge img{left:18px}
.fx-actor--salty{right:-22px;transform:translateX(calc(var(--px)*16px))}
.fx-actor--salty img{right:18px}
.fx-actor .fx-turn{opacity:0}
.fx-actor.is-turned .fx-back{opacity:0}
.fx-actor.is-turned .fx-turn{opacity:1}
.fx-actor.is-spinning img{animation:fx-spin .5s ease-in-out}
.fx-actor:hover .fx-back{filter:drop-shadow(0 0 22px rgba(255,130,30,.6)) drop-shadow(0 0 2px rgba(255,190,100,.8))}
.fx-say{position:absolute;z-index:3;top:118px;max-width:300px;margin:0;padding:12px 16px;border-radius:14px;background:rgba(255,246,232,.97);color:#2a140b;font:600 14.5px/1.4 var(--fig);box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 2px rgba(255,200,120,.6);animation:fx-pop .35s cubic-bezier(.3,1.5,.5,1)}
.fx-say b{display:block;margin-bottom:2px;font:800 12px var(--cinzel);letter-spacing:.14em;text-transform:uppercase;color:#b0420b}
.fx-say::after{content:"";position:absolute;bottom:-9px;width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:3px}
.fx-say[data-side="forge"]{left:120px}
.fx-say[data-side="forge"]::after{left:34px}
.fx-say[data-side="salty"]{right:120px}
.fx-say[data-side="salty"]::after{right:34px}
.fx-say[hidden]{display:none}
.fx-cta{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 24px);z-index:2}
.fx-play{display:block;padding:2px;text-decoration:none;background:linear-gradient(180deg,#ffe7a8,#d99a2b 45%,#7a4410);clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,22px 100%,0 50%);filter:drop-shadow(0 0 22px rgba(255,100,20,.55));animation:fx-pulse 2.8s ease-in-out infinite;transition:transform .2s}
.fx-play span{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:76px;padding:0 64px;overflow:hidden;clip-path:polygon(21px 0,calc(100% - 21px) 0,100% 50%,calc(100% - 21px) 100%,21px 100%,0 50%);background:radial-gradient(120% 140% at 50% 0%,#e8641a 0%,#9f2a08 55%,#4a0f04 100%);font:800 34px/1 var(--cinzel);letter-spacing:.08em;color:#fff3da;text-shadow:0 2px 0 #3a0c02,0 0 18px rgba(255,170,80,.6)}
.fx-play span::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,236,190,.35),transparent);transform:skewX(-18deg);animation:fx-sheen 4.5s ease-in-out 2s infinite}
.fx-play svg{width:22px;height:22px;fill:#ffe2a6}
.fx-play:hover{transform:scale(1.04)}
.fx-play:active{transform:scale(.98)}
.fx-cta p{margin:0;max-width:100%;padding:6px 14px;border-radius:999px;background:rgba(14,7,5,.74);border:1px solid var(--line);font-size:14px;font-weight:600;text-align:center;text-wrap:balance}
.fx-cta p b{color:var(--gold2)}

/* showcase */
.fx-show{grid-area:show;display:flex;flex-direction:column;gap:16px;min-width:0}
.fx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.fx-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:200px;padding:16px 14px 18px;border-radius:12px;overflow:hidden;text-decoration:none;text-align:center;border:1px solid var(--line2);box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 14px 34px rgba(0,0,0,.5);background:#1a0e09;transition:transform .3s ease,box-shadow .3s ease,border-color .3s}
.fx-card-art{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fx-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,5,3,0) 28%,rgba(10,5,3,.6) 60%,rgba(10,5,3,.94) 100%)}
.fx-card::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,214,150,.18);border-radius:8px;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,226,170,.16) 50%,transparent 65%) -200% 0/250% 100% no-repeat;transition:background-position 0s}
.fx-card:hover{transform:translateY(-4px);border-color:#ffc66b;box-shadow:0 0 0 1px rgba(0,0,0,.6) inset,0 0 30px rgba(255,110,24,.38),0 20px 42px rgba(0,0,0,.55)}
.fx-card:hover .fx-card-art{transform:scale(1.09)}
.fx-card:hover::after{background-position:200% 0;transition:background-position 1s ease}
.fx-card--qm .fx-card-art{background-image:url("/assets/art/card-quarter-mile.webp")}
.fx-card--cc .fx-card-art{background-image:url("/assets/art/card-concrete-crown.webp");background-position:center 30%}
.fx-card--sm .fx-card-art{background-image:url("/assets/art/survivor.webp")}
.fx-card-txt{display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .3s}
.fx-card strong{font:800 23px/1.08 var(--cinzel);letter-spacing:.04em;text-transform:uppercase;color:#fff2dc;text-shadow:0 2px 10px #000}
.fx-card small{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.fx-card-go{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:rgba(12,6,4,.78);border:1px solid var(--line2);font-size:12px;font-weight:800;color:var(--gold2);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.fx-card-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-card:hover .fx-card-go,.fx-card:focus-visible .fx-card-go{opacity:1;transform:none}
.fx-tag{position:absolute;top:12px;left:12px;padding:4px 9px;border-radius:6px;background:rgba(12,6,4,.78);border:1px solid var(--line2);color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fx-tag--new{background:linear-gradient(180deg,#ff9a3c,#c9480b);border-color:#ffc66b;color:#fff}

.fx-banner{position:relative;isolation:isolate;display:flex;align-items:center;min-height:200px;padding:24px 28px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#1c0b07;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.fx-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,6,4,.98) 0%,rgba(14,6,4,.94) 46%,rgba(14,6,4,.55) 66%,rgba(14,6,4,.12) 84%,rgba(14,6,4,.4) 100%)}
.fx-banner::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,214,150,.18);border-radius:8px;pointer-events:none}
.fx-banner-art{position:absolute;z-index:-2;right:0;top:0;width:58%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fx-banner:hover .fx-banner-art{transform:scale(1.05)}
.fx-host{position:absolute;z-index:-1;right:30px;bottom:-232px;height:404px;width:auto;filter:drop-shadow(0 0 18px rgba(0,0,0,.8))}
.fx-banner-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:480px}
.fx-banner small{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ember2)}
.fx-banner small svg{width:16px;height:16px;fill:none;stroke:var(--ember2);stroke-width:1.8;stroke-linejoin:round}
.fx-banner h3{margin:6px 0 6px;font:800 36px/1 var(--cinzel);letter-spacing:.05em;text-transform:uppercase;color:#fff2dc;text-shadow:0 2px 12px #000}
.fx-banner p{margin:0;font-size:14px;color:var(--muted)}
.fx-banner p b{color:var(--ink)}
.fx-banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.fx-banner-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:8px;border:1px solid #ffc66b;background:linear-gradient(180deg,#ff9a3c,#c4470b);font:700 13px var(--cinzel);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap;transition:filter .2s,transform .2s}
.fx-banner-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.fx-banner-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:rgba(16,8,5,.85);font-size:13px;font-weight:800;color:var(--gold2);text-decoration:none}
.fx-banner-link:hover{color:#fff;border-color:#ffc66b}
.fx-banner-link svg,.fx-reset svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx-banner .fx-reset{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--muted)}
.fx-reset time{font-variant-numeric:tabular-nums;color:var(--gold2);font-weight:800}

/* section heads */
.fx-head{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px}
.fx-head h2{margin:0;font:800 26px/1 var(--cinzel);letter-spacing:.06em;text-transform:uppercase;color:#fff2dc}
.fx-head h2 span{background:linear-gradient(180deg,#ffe4a0,#ff8a2a);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-head p{margin:0;font-size:14px;color:var(--muted)}
.fx-head-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-left:auto;font-size:13px;font-weight:800;color:var(--gold2);text-decoration:none}
.fx-head-link:hover{color:#fff}

/* top 10 */
.fx-top10{grid-area:top10;min-width:0;padding-top:6px}
.fx-rail-nav{display:flex;gap:8px;margin-left:auto}
.fx-rail-nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(20,11,8,.8);color:var(--gold2);cursor:pointer;transition:background .2s,opacity .2s}
.fx-rail-nav button:hover{background:rgba(214,74,14,.6)}
.fx-rail-nav button:disabled{opacity:.35;cursor:default;background:rgba(20,11,8,.8)}
.fx-rail-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:316px;gap:8px;margin:0;padding:6px 4px 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.fx-rail::-webkit-scrollbar{display:none}
.fx-rail.at-end{-webkit-mask-image:none;mask-image:none}
.fx-rail li{scroll-snap-align:start}
.fx-top10-card{position:relative;display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:0;text-decoration:none}
.fx-rank{grid-row:1/3;align-self:start;justify-self:end;margin-right:-26px;margin-top:-6px;font:400 158px/1 var(--bungee);letter-spacing:-.08em;color:#1b0c06;-webkit-text-stroke:3px #f2b84b;paint-order:stroke fill;text-shadow:0 0 22px rgba(255,120,30,.35);transition:-webkit-text-stroke-color .3s,text-shadow .3s,transform .3s;z-index:0}
.fx-top10-card:hover .fx-rank{-webkit-text-stroke-color:#ffd98a;text-shadow:0 0 30px rgba(255,130,40,.7);transform:translateX(-4px)}
.fx-poster{position:relative;z-index:1;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 12px 26px rgba(0,0,0,.55);transition:transform .3s,box-shadow .3s}
.fx-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fx-top10-card:hover .fx-poster{transform:translateY(-4px);box-shadow:0 0 26px rgba(255,110,24,.4),0 16px 30px rgba(0,0,0,.6)}
.fx-top10-card:hover .fx-poster img{transform:scale(1.07)}
.fx-top10-meta{grid-column:2;display:flex;flex-direction:column;gap:2px;padding:10px 4px 0;min-width:0}
.fx-top10-meta strong{font-size:15px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-top10-meta small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fx-free{position:absolute;z-index:2;top:8px;right:8px;padding:3px 8px;border-radius:6px;background:rgba(12,6,4,.82);border:1px solid rgba(67,209,107,.5);font-size:11px;font-weight:800;letter-spacing:.06em;color:#9df0b4}
.fx-free.is-used{border-color:var(--line2);color:var(--gold2)}
html.fx-owned .fx-free{display:none}

/* jump back in */
.fx-jump{grid-area:jump;min-width:0}
.fx-jump[hidden]{display:none}
.fx-jump-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.fx-jump-list a{display:block;text-decoration:none;border-radius:10px;padding:6px;border:1px solid var(--line);background:rgba(20,11,8,.7);transition:border-color .2s,transform .2s}
.fx-jump-list a:hover{border-color:var(--line2);transform:translateY(-2px)}
.fx-jump-list img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:7px}
.fx-jump-list b{display:block;margin:6px 4px 0;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-jump-list small{display:block;margin:0 4px 2px;font-size:12px;color:var(--muted)}

/* right column */
.fx-right{grid-area:right;display:flex;flex-direction:column;gap:18px;min-width:0}
.fx-status{padding:16px 18px}
.fx-status-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fx-rule{display:block;height:1px;margin:12px 0;background:var(--line)}
.fx-status small{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fx-big{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.fx-big b{font:400 40px/1 var(--bungee);color:var(--gold2);text-shadow:0 0 18px rgba(255,150,40,.35)}
.fx-big span{font-size:14px;font-weight:600;color:var(--muted)}
.fx-status-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:14px;border-radius:10px;border:1px solid var(--line2);background:rgba(36,18,10,.9);color:var(--gold2);font:800 14px var(--fig);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.fx-status-btn:hover{background:linear-gradient(180deg,#ff9a3c,#c4470b);color:#fff;border-color:#ffc66b}
.fx-status-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-news,.fx-earn,.fx-app{padding:16px}
.fx-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.fx-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px;border-radius:10px;text-decoration:none;transition:background .2s}
.fx-row:hover{background:rgba(255,140,50,.09)}
.fx-row img{flex:none;width:76px;height:57px;background:#1f120c;border-radius:7px;object-fit:cover;border:1px solid var(--line2)}
.fx-row b{display:block;font-size:14.5px;font-weight:800;line-height:1.2}
.fx-row span span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.fx-row time{display:block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fx-also{margin:10px 6px 0;font-size:12.5px;color:var(--muted)}
.fx-also a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}
.fx-also a:hover{color:#fff;border-color:var(--gold)}
.fx-sub{margin:-4px 0 12px;font-size:13px;color:var(--muted)}
.fx-gear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fx-gear a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(40,20,12,.9),rgba(16,9,6,.9));text-decoration:none;text-align:center;transition:border-color .2s,transform .2s}
.fx-gear a:hover{border-color:var(--a);transform:translateY(-2px)}
.fx-gear i{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--a) 45%,transparent),rgba(60,20,8,.2) 70%);box-shadow:0 0 18px color-mix(in srgb,var(--a) 30%,transparent) inset}
.fx-gear svg{width:30px;height:30px;fill:none;stroke:var(--gold2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fx-gear b{font-size:12.5px;font-weight:800;line-height:1.2}
.fx-gear span{padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.35);border:1px solid rgba(242,184,75,.3);font-size:11px;font-weight:700;color:var(--gold2)}
.fx-app[hidden]{display:none}
.fx-how{padding:16px}
.fx-steps{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;counter-reset:fx}
.fx-steps li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;counter-increment:fx}
.fx-steps li::before{content:counter(fx);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:radial-gradient(circle at 50% 35%,rgba(255,150,50,.35),rgba(40,14,6,.9));font:400 15px var(--bungee);color:var(--gold2)}
.fx-steps b{display:block;font-size:14px;font-weight:800}
.fx-steps span{display:block;font-size:12.5px;color:var(--muted)}

/* footer */
.fx-foot{position:relative;z-index:2;max-width:1640px;margin:0 auto;padding:22px 28px 30px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;border-top:1px solid rgba(255,154,72,.14);font-size:13px;color:var(--muted)}
.fx-foot-brand{display:flex;align-items:center;gap:10px}
.fx-foot-brand b{font:400 15px var(--bungee);letter-spacing:.03em;color:var(--ink)}
.fx-foot p{margin:0;flex:1 1 320px}
.fx-foot nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.fx-foot nav a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);text-decoration:none;font-weight:600}
.fx-foot nav a:hover{color:#fff}
.fx-foot small{flex-basis:100%;color:var(--dim)}

/* find a game */
.fx-search{width:min(1080px,calc(100vw - 32px));max-width:none;height:min(86vh,900px);max-height:none;margin:auto;padding:0;border:1px solid var(--line2);border-radius:18px;background:rgba(16,9,6,.97);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(255,100,20,.12);overflow:hidden}
.fx-search[open]{animation:fx-pop .28s cubic-bezier(.3,1.4,.5,1)}
.fx-search::backdrop{background:rgba(6,3,2,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fx-search-in{display:flex;flex-direction:column;height:100%}
.fx-search-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px}
.fx-search-field{display:flex;align-items:center;gap:12px;flex:1;min-height:54px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:rgba(0,0,0,.35)}
.fx-search-field:focus-within{border-color:#ffc66b;box-shadow:0 0 0 3px rgba(255,170,70,.18)}
.fx-search-field svg{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.fx-search-field input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:600 18px var(--fig)}
.fx-search-field input::placeholder{color:var(--dim)}
.fx-search-field input:focus-visible{outline:none}
.fx-search-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fx-search-x{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--ink);cursor:pointer}
.fx-search-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.fx-chips{display:flex;gap:8px;padding:0 16px 8px;overflow-x:auto;scrollbar-width:none}
.fx-chips::-webkit-scrollbar{display:none}
.fx-chips button{flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(30,16,10,.8);color:var(--ink);font:700 13px var(--fig);cursor:pointer}
.fx-chips button:hover{border-color:var(--line2)}
.fx-chips button.on{background:linear-gradient(180deg,#e2560e,#9f2a08);border-color:#ffc66b;color:#fff}
.fx-count{margin:0;padding:0 18px 8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fx-results{flex:1;overflow-y:auto;padding:0 16px 20px;overscroll-behavior:contain}
.fx-results section{margin-bottom:18px}
.fx-results section[hidden]{display:none}
.fx-results h3{display:flex;align-items:center;gap:8px;margin:6px 2px 10px;font:700 14px var(--cinzel);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.fx-results h3 span{font:700 12px var(--fig);letter-spacing:0;color:var(--dim)}
.fx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.fx-tiles a{display:block;padding:5px;border-radius:10px;border:1px solid transparent;text-decoration:none;transition:background .15s,border-color .15s}
.fx-tiles a:hover,.fx-tiles a:focus-visible,.fx-tiles a.is-cursor{background:rgba(255,140,50,.12);border-color:var(--line2);outline:none}
.fx-tiles a[hidden]{display:none}
.fx-tiles img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:7px;background:#1f120c}
.fx-tiles b{display:block;margin:6px 2px 1px;font-size:13px;font-weight:700;line-height:1.25}
.fx-tiles b mark{background:none;color:var(--gold2)}
.fx-empty{margin:0;padding:30px 20px;text-align:center;color:var(--muted)}
.fx-empty a{color:var(--gold2)}

/* on the way into a game */
.fx-leave{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 60%,rgba(255,140,30,.0),rgba(11,6,4,.96) 70%),radial-gradient(circle at 20% 80%,rgba(255,170,60,.55) 0 2px,transparent 3px) 0 0/90px 110px,radial-gradient(circle at 70% 30%,rgba(255,120,30,.6) 0 1.5px,transparent 3px) 0 0/70px 90px,#0b0604;transition:opacity .22s ease}
.fx-body.fx-leaving .fx-leave{opacity:1}
.is-hot{box-shadow:0 0 0 2px #ffc66b,0 0 34px rgba(255,120,30,.75)!important}

/* the forge lights (first visit of a session) */
html.fh-intro .fx-logo i{animation:fx-ignite 1.9s cubic-bezier(.3,.1,.3,1) both,fx-breathe 7s ease-in-out 1.9s infinite}
html.fh-intro .fx-flicker{animation:fx-fade 1.2s ease .8s both,fx-flicker 2.6s steps(1,end) 2s infinite}
html.fh-intro .fx-stage::after{content:"";position:absolute;left:50%;top:44%;width:900px;height:900px;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(circle,rgba(255,236,190,.95),rgba(255,140,40,.5) 25%,transparent 60%);mix-blend-mode:screen;animation:fx-flash 1.1s ease-out .62s both}
html.fh-intro .fx-strike i{animation:fx-spark 1s cubic-bezier(.1,.7,.3,1) .66s both}
html.fh-intro .fx-actor{animation:fx-rise-in 1s cubic-bezier(.2,.8,.2,1) both}
html.fh-intro .fx-actor--forge{animation-delay:.95s}
html.fh-intro .fx-actor--salty{animation-delay:1.1s}
html.fh-intro .fx-cta{animation:fx-cta-in .8s cubic-bezier(.2,.8,.2,1) 1.35s both}
.fx-strike i:nth-child(1){--x:-210px;--y:-120px}.fx-strike i:nth-child(2){--x:190px;--y:-150px}.fx-strike i:nth-child(3){--x:-150px;--y:90px}
.fx-strike i:nth-child(4){--x:240px;--y:60px}.fx-strike i:nth-child(5){--x:-40px;--y:-190px}.fx-strike i:nth-child(6){--x:60px;--y:170px}
.fx-strike i:nth-child(7){--x:-290px;--y:10px}.fx-strike i:nth-child(8){--x:300px;--y:-40px}.fx-strike i:nth-child(9){--x:120px;--y:-210px}
.fx-strike i:nth-child(10){--x:-120px;--y:-220px}.fx-strike i:nth-child(11){--x:-230px;--y:150px}.fx-strike i:nth-child(12){--x:210px;--y:160px}

@keyframes fx-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.95}60%{opacity:.7}100%{transform:translate(28px,-520px);opacity:0}}
@keyframes fx-flicker{0%{opacity:.85}12%{opacity:1}24%{opacity:.78}37%{opacity:.95}51%{opacity:.82}63%{opacity:1}78%{opacity:.86}90%{opacity:.97}}
@keyframes fx-breathe{0%,100%{filter:brightness(1) saturate(1.05)}50%{filter:brightness(1.12) saturate(1.18)}}
@keyframes fx-pulse{0%,100%{filter:drop-shadow(0 0 18px rgba(255,100,20,.45))}50%{filter:drop-shadow(0 0 32px rgba(255,130,40,.8))}}
@keyframes fx-pulse-o{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fx-sheen{0%,70%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(567%) skewX(-18deg)}}
@keyframes fx-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fx-spin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.8)}}
@keyframes fx-ignite{0%{filter:brightness(.12) saturate(.2);transform:scale(1.05)}32%{filter:brightness(.22) saturate(.4)}38%{filter:brightness(2.4) saturate(1.4)}62%{filter:brightness(1.18) saturate(1.2)}100%{filter:brightness(1) saturate(1.05);transform:scale(1)}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes fx-spark{0%{opacity:1;transform:translate(0,0) scale(1.4)}70%{opacity:.9}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}}
@keyframes fx-rise-in{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes fx-cta-in{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}

/* off screen, hidden tab, data saver, reduced motion */
.fx-stage.is-paused *,.fx-stage.is-paused::after{animation-play-state:paused!important}
html.fx-still .fx-embers,html.fx-still .fx-ambient{display:none}
html.fx-still .fx-flicker,html.fx-still .fx-logo i,html.fx-still .fx-play,html.fx-still .fx-play span::after{animation:none}

/* tablet */
@media (max-width:1240px){
 .fx-shell{grid-template-columns:248px minmax(0,1fr);grid-template-areas:"side stage" "side show" "side jump" "side top10" "side right"}
 .fx-right{display:block;columns:2 280px;column-gap:18px}
 .fx-right>*{break-inside:avoid;margin-bottom:18px}
 .fx-item{font-size:14px}
 /* tablets and phones: the player chip shrinks to its round avatar (tap to see or set your name) */
 .fx-me{flex:none;gap:0;min-height:0;padding:0;border:0;background:none;border-radius:50%}
 .fx-me>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .fx-me-av{width:36px;height:36px}
}
/* phone */
@media (max-width:820px){
 .fx-top{gap:8px;padding:10px 14px}
 .fx-top.is-scrolled{padding-inline:14px}
 .fx-top .fh-brand{gap:8px;flex:0 1 auto;min-width:0}
 .fx-top .fh-brand span{min-width:0;overflow:hidden}
 .fx-top .fh-brand b{font-size:25px}
 .fx-top .fh-brand img{width:36px;height:36px}
 .fx-top .fh-brand small{font-size:9px;letter-spacing:.24em;margin-top:4px}
 .fx-top .fh-brand small::before,.fx-top .fh-brand small::after{display:none}
 .fx-find{display:none}
 .fx-find-sm{display:inline-flex}
 .fx-actions{margin-left:auto;gap:6px}
 .fx-icon{min-width:40px;height:40px;padding:0 8px}
 .fx-install span{display:none}
 .fx-buy{min-height:40px;padding:0 5px 0 11px;gap:6px}
 .fx-buy i{display:none}
 .fx-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "side" "show" "jump" "top10" "right";padding:0 14px 24px;gap:18px}
 .fx-side{position:static;grid-row:auto;padding:8px}
 .fx-nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:2px;scrollbar-width:none;scroll-snap-type:x proximity}
 .fx-nav::-webkit-scrollbar{display:none}
 .fx-item{flex:none;border-color:var(--line);background:rgba(30,16,10,.7);scroll-snap-align:start}
 .fx-item:hover{padding-left:12px}
 .fx-navlabel,.fx-sep,.fx-sidefoot{display:none}
 .fx-stage{height:500px;clip-path:inset(-140px 0 0 0)}
 .fx-logo{top:4px;width:100%}
 .fx-actor{width:190px;height:270px}
 .fx-actor img{height:420px}
 .fx-actor--forge{left:-26px}.fx-actor--forge img{left:10px}
 .fx-actor--salty{right:-26px}.fx-actor--salty img{right:10px}
 .fx-say{top:auto;bottom:250px;max-width:min(260px,72vw);font-size:13.5px}
 .fx-say[data-side="forge"]{left:12px}
 .fx-say[data-side="salty"]{right:12px}
 .fx-cta{bottom:14px}
 .fx-play span{min-height:64px;padding:0 42px;font-size:27px}
 .fx-cta p{font-size:13px}
 .fx-banner{flex-direction:column;align-items:stretch;min-height:0;padding:20px}
 .fx-banner::before{background:linear-gradient(180deg,rgba(14,6,4,.55),rgba(14,6,4,.94) 60%)}
 .fx-banner-art{width:100%}
 .fx-host{display:none}
 .fx-banner h3{font-size:30px}
 .fx-head h2{font-size:22px}
 .fx-rail{grid-auto-columns:262px}
 .fx-top10-card{grid-template-columns:78px 1fr}
 .fx-rank{font-size:128px;margin-right:-22px}
 .fx-rail-nav{display:none}
 .fx-search{width:100vw;height:100dvh;border-radius:0;border:0}
 .fx-search-head{padding:12px 12px 8px}
 .fx-chips{padding:0 12px 8px}
 .fx-results{padding:0 12px 20px}
 .fx-tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
}
@media (max-width:380px){.fx-top .fh-brand small{display:none}.fx-play span{padding:0 30px;font-size:24px}}
@media (hover:none){.fx-card-go{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
 .fx-body *,.fx-body *::before,.fx-body *::after{animation:none!important;transition-duration:.01s!important;scroll-behavior:auto!important}
 .fx-embers,.fx-strike{display:none}
 .fx-actor,.fx-logo{transform:none!important}
 .fx-logo{transform:translateX(-50%)!important}
}
/* narrow phones: room for the FORGE wordmark next to search, sound, your avatar and Unlock */
@media (max-width:430px){
 .fx-top{gap:6px;padding-inline:10px}
 .fx-actions{gap:4px}
 .fx-icon{min-width:36px;height:36px;padding:0 6px}
 .fx-me-av{width:34px;height:34px}
 .fx-buy{min-height:36px;padding:0 4px 0 9px;gap:5px}
 .fx-buy em{padding:3px 7px;font-size:13px}
 .fx-top .fh-brand{gap:6px}
 .fx-top .fh-brand b{font-size:23px}
 .fx-top .fh-brand img{width:32px;height:32px}
}
@media (max-width:340px){ .fx-buy:not(.is-owned) [data-unlock-label]{display:none} .fx-buy:not(.is-owned){padding-left:4px} }
/* Touch devices: same look, far less painting. Frosted glass, looping filter animations and blend modes repaint big
   areas every frame and make phones lag, so panels go solid, the logo and Play glow hold still, and half the embers rest. */
@media (hover:none),(pointer:coarse){
 .fx-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(19,11,8,.93)}
 .fx-top.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,6,4,.95)}
 .fx-logo i{animation:none}
 html.fh-intro .fx-logo i{animation:fx-ignite 1.9s cubic-bezier(.3,.1,.3,1) both}
 .fx-play{animation:none}
 .fx-flicker{mix-blend-mode:normal}
 .fx-embers i:nth-child(n+10){display:none}
}
/* Fit to the screen (home.html sets the zoom): a zoomed page keeps its height to the window, not window x zoom. */
html.fx-zoomed .fx-body{min-height:calc(100vh / var(--fx-z,1))}

/* Phones: the header tagline fits instead of being clipped to "GAME INFINITEL"; the host's speech bubble keeps its
   dark text on the light card (a later muted-text rule turned it light grey on cream). */
@media (max-width:430px){.fx-top .fh-brand small{letter-spacing:.14em}}
.fx-body .fx-cast .fx-say{color:#2a140b}