/* ClanFights illustrated, tactile beta experience. */
@font-face{font-family:ClanDisplay;src:url('/images/fonts/LilitaOne-Regular.ttf') format('truetype');font-display:swap}
:root{--ink:#10162c;--paper:#fff1cb;--gold:#f4c65b;--blue:#81def4}
body{background:#11182b;color:#f4eddc;font-family:Arial,sans-serif}
h1,h2,h3,.button,.demo-mode button{font-family:ClanDisplay,'Trebuchet MS',sans-serif;font-weight:400;letter-spacing:0}
h2 em{color:var(--gold);font-style:normal}.site-header{background:#10162cf5;border-bottom:2px solid #a9843c;min-height:92px}.brand-logo{width:135px;height:84px;object-fit:contain}.brand-emblem{display:none}
.hero{background:#1d2840}.hero-landscape{background-image:linear-gradient(90deg,#10182de8 5%,#10182d75 52%,#10182d25),url('/images/backgrounds/town-background-human.webp');filter:saturate(1.2)}
.hero:after{background:linear-gradient(0deg,#11182b,transparent)}.hero h1{font-size:clamp(48px,5.3vw,80px);color:#fff0bd;text-shadow:3px 5px 0 #0b1022;letter-spacing:-.055em;line-height:1.08}.hero h1 em{color:#ffd260}.hero-halo{border-color:#efbd5f80;background:#efbd5f10}.hero-art img{filter:drop-shadow(0 8px 3px #0008)}
.button{background:linear-gradient(#ee6862 0%,#cc3134 48%,#ad1c29 51%,#dd4143 95%);color:#fff5d5;border:2px solid #eac16c;border-radius:13px;box-shadow:inset 0 0 0 3px #791c2b,inset 0 6px 0 #ffb79755,0 5px 0 #573d22,0 7px 0 #080e1e;font-size:17px;text-shadow:1px 2px #671c29;transition:transform .15s,filter .15s}.button:hover{filter:brightness(1.13);transform:translateY(-2px)}.button:active{transform:translateY(2px)}.button:disabled{opacity:.65;cursor:default}.button-outline{background:linear-gradient(#35476b,#1b2848)}
.platform-strip,.class-section,.community-section{background:#182137;border-color:#a884443b}.world-card,.reward-card,.beta-form-card{border:2px solid #aa873d;border-radius:18px;background:linear-gradient(145deg,#25304d,#141b30);box-shadow:inset 0 0 0 4px #0e1626,0 12px 22px #0003}.reward-card h3{color:#f7ce6b}.reward-art{background:radial-gradient(ellipse,#5477aa44,transparent 65%)}.reward-section,.beta-section{background:#10182b}.section-pad{padding-block:85px}.section-intro{color:#c7ccda}.class-tabs button{border-radius:12px}.class-tabs button[aria-selected=true]{border-color:#f5c866;background:#30405f}.form-seal{border-radius:50%;background:#314b64}.form-heading{border-color:#62708c55}.form-heading h3{font-size:28px}.form-feedback.success{color:#99edb7}.site-footer{background:#11182b}.privacy-note{color:#c3c8d6}.site-footer a{color:#dbc8a2}
.town-demo{border:2px solid #bc9241;border-radius:22px;background:#141d32;box-shadow:0 0 0 5px #080d1b,0 0 0 6px #6e532d,0 24px 60px #0005;overflow:hidden}.demo-toolbar{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(#293650,#152036);border-bottom:2px solid #866a38}.demo-mode{display:flex;gap:8px}.demo-mode button,.demo-bottom button{min-height:44px;border:1px solid #9c824f;border-radius:9px;padding:8px 18px;color:#f5e9c9;background:#101a30;cursor:pointer}.demo-mode button[aria-pressed=true]{background:linear-gradient(#f7d578,#bd8d39);color:#221a16;box-shadow:0 2px 0 #070e1f}.demo-wallet{display:flex;gap:20px;font-size:13px;color:#f8daa0}.demo-wallet span{display:flex;align-items:center;gap:6px}.demo-wallet img{object-fit:contain}.demo-wallet b{font-size:20px;color:#ffda76;font-variant-numeric:tabular-nums}
.demo-stage{position:relative;isolation:isolate;min-height:530px;overflow:hidden}.demo-town-art{position:absolute;inset:0;z-index:-1;background:linear-gradient(#10254b50,#10204480),url('/images/backgrounds/town-background-human.webp') center/cover;filter:saturate(1.25)}[data-faction=karus] .demo-town-art{background-image:linear-gradient(#17234b40,#1a173b80),url('/images/backgrounds/town-background-orc.webp')}.demo-health{position:absolute;top:24px;right:24px;width:310px;padding:14px 18px;border:1px solid #81b6d2;border-radius:12px;background:#0e172bea;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.demo-health strong{color:#bcf0ff}.demo-health span{font-weight:bold}.demo-health progress{width:100%;height:14px;accent-color:#65d6ec;border:0;border-radius:10px;overflow:hidden}.demo-health progress::-webkit-progress-bar{background:#27344f}.demo-health progress::-webkit-progress-value{background:linear-gradient(#c7f7ff,#35b7e6);border-radius:10px}
.demo-hero{position:absolute;left:5%;bottom:65px;width:32%;height:405px;object-fit:contain;filter:drop-shadow(4px 8px 3px #101525aa);transition:filter .3s}.demo-hero[data-gear="1"]{filter:drop-shadow(0 0 8px #68a8f2)}.demo-hero[data-gear="2"]{filter:drop-shadow(0 0 13px #b985ff)}.demo-hero[data-gear="3"]{filter:drop-shadow(0 0 15px #ffe985)}.demo-weapon-level{position:absolute;bottom:110px;left:30%;padding:8px 12px;border:2px solid #ecbf61;border-radius:50%;background:#4f2745;font-size:24px;font-weight:900;color:#ffe3a0}
.demo-crystal{position:absolute;left:47%;top:24%;width:36%;height:58%;border:0;background:transparent;cursor:pointer;touch-action:manipulation}.demo-crystal>img{width:85%;height:80%;object-fit:contain;filter:drop-shadow(0 0 22px #73d6ff);position:relative}.crystal-aura{position:absolute;inset:25% 2% 9%;border-radius:50%;background:radial-gradient(ellipse,#91e6ff77,transparent 65%);border-bottom:5px solid #8ce9ff80;transform:rotateX(30deg)}.crystal-prompt{display:block;color:#fff4cc;font-size:25px;font-weight:900;text-shadow:2px 2px #102039}.crystal-prompt small{display:block;font-size:11px;letter-spacing:1px;color:#dde8f8;margin-top:6px}.demo-npc{position:absolute;bottom:14px;left:20px;right:20px;display:flex;align-items:center;gap:15px;pointer-events:none}.demo-npc img{width:66px;height:66px;object-fit:cover;border:3px solid #d7b46d;border-radius:50%;box-shadow:0 3px 0 #090f21}.demo-npc p{margin:0;padding:13px 20px;max-width:680px;border:2px solid #352b29;border-radius:15px 15px 15px 0;background:#f6e8c6;color:#242539;font-size:14px;font-weight:700;box-shadow:0 4px 0 #0005}
.demo-workbench{padding:20px;display:grid;grid-template-columns:1fr 1fr auto;gap:25px;align-items:center;border-top:2px solid #a07c42;background:#1b2740}.demo-choices{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;font-size:12px;color:#c8cfe0}.demo-choices select{max-width:190px;min-width:0;height:39px;border:1px solid #7b8d9f;border-radius:8px;background:#0d1729;color:#fff0ca;padding:5px 10px;font-size:14px}.demo-upgrade-info{display:grid;gap:6px}.demo-upgrade-info strong{color:#f7d17d}.demo-upgrade-info span{font-size:14px}.demo-upgrade-info small{color:#a9bdd8;font-size:12px}.demo-bottom{padding:12px 20px;display:flex;gap:12px;align-items:center;color:#b7c5d9;font-size:12px}.demo-bottom>span{margin-right:auto}.demo-bottom button{font-size:12px;padding:5px 12px;background:transparent;border-color:#515d78}.demo-bottom button:last-child{color:#f6d07c;border-color:#8c7447}.demo-disclaimer{font-size:12px;text-align:center;max-width:750px;margin:22px auto 0;color:#aab5cc;line-height:1.6}
.demo-city{position:absolute;inset:0}.demo-building{position:absolute;top:20%;left:calc(8% + var(--plot)*29%);width:26%;height:59%;background:none;border:0;cursor:pointer;transition:filter .3s}.demo-building>img{position:relative;width:90%;height:75%;object-fit:contain;filter:sepia(.6) saturate(.6);transform:scale(.65);transform-origin:bottom;transition:transform .45s,filter .4s}.demo-building[data-tier="1"]>img{transform:scale(.8);filter:none}.demo-building[data-tier="2"]>img{transform:scale(.95);filter:drop-shadow(0 0 8px #c2eaff)}.demo-building[data-tier="3"]>img{transform:scale(1.12);filter:drop-shadow(0 0 10px #ffe197)}.building-foundation{position:absolute;left:5%;right:5%;height:80px;bottom:50px;border-radius:50%;background:radial-gradient(ellipse,#e5d18a99,#384e66aa 70%);border:3px solid #b1d5cd55;transform:rotateX(50deg)}.building-banner{display:none;position:absolute;top:10%;right:10%;padding:15px 8px;background:#9f2540;color:#ffdd73;border:2px solid #e7bf62;clip-path:polygon(0 0,100% 0,100% 100%,50% 85%,0 100%)}[data-tier="2"] .building-banner,[data-tier="3"] .building-banner{display:block}.building-caption{display:block;position:relative;background:linear-gradient(#513c28,#2d221e);border:2px solid #be9855;color:#fff0bd;border-radius:10px;padding:9px 6px;font-weight:bold;font-size:15px;box-shadow:0 4px 0 #0d1425}.building-caption small{display:block;margin-top:4px;color:#c6deec;font-size:12px}.demo-building[aria-pressed=true] .building-caption{border-color:#b4edff;box-shadow:0 0 18px #72dcff77}.demo-city-hint{text-align:center;margin:20px;padding:9px;border-radius:9px;background:#111b32cc;font-size:14px;color:#fff0bd}
.demo-particles{position:absolute;inset:0;pointer-events:none}.damage-number{position:absolute;top:35%;left:65%;font-size:38px;font-weight:900;color:#fff9d9;text-shadow:2px 3px #18213d;animation:demo-damage .8s ease-out forwards}.damage-number.critical{color:#ffd76c;font-size:48px}@keyframes demo-damage{to{transform:translate(var(--drift),-90px) scale(1.2);opacity:0}}
.founder-dialog{position:fixed;inset:0;margin:auto;width:min(540px,calc(100% - 24px));max-height:90dvh;padding:25px;border:3px solid #c6a253;border-radius:22px;background:linear-gradient(145deg,#29364e,#121b30);color:#fff1d1;box-shadow:0 0 0 4px #111726,0 22px 80px #000b;overflow:auto}.founder-dialog::backdrop{background:#050b18c9;backdrop-filter:blur(4px)}.founder-close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:1px solid #c2a168;border-radius:50%;background:#152037;color:#fff0c8;font-size:28px;cursor:pointer}.founder-greeting{display:flex;gap:15px;align-items:center;margin:18px 18px 20px 0}.founder-greeting img{width:77px;height:77px;border:3px solid #d6b66a;border-radius:50%;object-fit:cover}.founder-greeting>div{background:#f8eac9;color:#182039;border:3px solid #0c1426;border-radius:18px;padding:15px}.founder-greeting span{font-size:12px;font-weight:bold;color:#993829}.founder-greeting h2{font:400 24px/1.15 ClanDisplay,sans-serif;margin:6px 0 0}.founder-dialog>p{line-height:1.6;font-size:15px}.founder-dialog .beta-form-card{padding:0;margin:20px 0 0;border:0;box-shadow:none;background:transparent}.founder-dialog .form-heading{display:none}.founder-dialog .email-label{font-size:13px}.founder-dialog .consent{font-size:12px}.founder-dialog .privacy-note{font-size:11px}.founder-dialog .submit-button{width:100%;justify-content:center}.founder-dialog input[type=email]{border-radius:9px;border-color:#b29851}.mobile-join{background:linear-gradient(#df554c,#ae2230)}
@media(max-width:760px){.section-pad{padding-block:55px}.hero h1{font-size:49px}.brand-logo{width:100px;height:65px}.site-header{min-height:73px}.demo-toolbar{padding:10px;flex-direction:column;gap:11px}.demo-mode{width:100%}.demo-mode button{flex:1;font-size:15px;padding:9px}.demo-wallet{justify-content:center;width:100%;gap:30px}.demo-stage{min-height:440px}.demo-health{top:14px;right:14px;left:14px;width:auto;font-size:12px;padding:10px}.demo-hero{left:-5%;bottom:85px;width:46%;height:260px}.demo-crystal{left:39%;top:26%;width:56%;height:48%}.demo-weapon-level{left:26%;bottom:130px;font-size:17px}.crystal-prompt{font-size:20px}.crystal-prompt small{font-size:9px}.demo-npc{left:10px;right:10px;gap:8px;bottom:12px}.demo-npc img{width:49px;height:49px}.demo-npc p{font-size:12px;padding:10px;border-radius:12px}.demo-workbench{grid-template-columns:1fr auto;padding:15px;gap:17px 12px}.demo-choices{grid-column:1/-1;grid-template-columns:auto 1fr auto 1fr;gap:7px}.demo-choices select{width:100%;font-size:12px;padding:4px}.demo-choices label{font-size:10px}.demo-workbench .button{padding:12px;font-size:14px;gap:6px}.demo-upgrade-info strong{font-size:14px}.demo-upgrade-info span{font-size:12px}.demo-upgrade-info small{font-size:10px}.demo-bottom{flex-wrap:wrap;padding:12px;gap:8px}.demo-bottom>span{flex-basis:100%;font-size:10px}.demo-bottom button{flex:1;padding:6px;font-size:10px}.demo-city-hint{font-size:12px;margin:14px}.demo-building{top:24%;left:calc(1% + var(--plot)*33%);width:32%;height:46%}.demo-building>img{width:100%;height:75%}.building-caption{font-size:11px;padding:6px 2px}.building-caption small{font-size:10px}.building-banner{padding:8px 4px;font-size:10px}.building-foundation{bottom:35px;height:50px}.damage-number{font-size:29px}.founder-dialog{padding:18px}.founder-greeting{margin-top:30px;gap:10px}.founder-greeting img{width:60px;height:60px}.founder-greeting h2{font-size:20px}.founder-greeting>div{padding:12px}.section-intro{font-size:15px}}
@media(prefers-reduced-motion:reduce){.damage-number{animation:none}.demo-building>img{transition:none}}