@font-face{font-family:'SwarmDisplay';src:url('fonts/Nunito-ExtraBold.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'SwarmBody';src:url('fonts/Nunito-SemiBold.ttf') format('truetype');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'SwarmBody';src:url('fonts/Nunito-ExtraBold.ttf') format('truetype');font-weight:701 900;font-style:normal;font-display:swap}
/* ==========================================================================
   SEPARATOR CONTROLS
   Set visually with tune.html (one folder up) - drag, scale, reorder, then
   Copy CSS and paste the :root block back over this one. Or type numbers.
     width  100% = edge to edge. Height follows the art's own 904:107, so it
            can only ever scale uniformly.
     nudge  move off the seam. NEGATIVE = up, POSITIVE = down, in pixels.
            0px sits dead-centre on the edge between the two images.
     z      layer order. Higher = in front. -1 puts it behind the artwork.
   ========================================================================== */
:root{
  --sep-top-width:102%;   --sep-top-nudge:0px;    --sep-top-z:4;
  --sep-map-width:104%;   --sep-map-nudge:0px;    --sep-map-z:4;
  --sep-title-scale:1.72; --sep-title-nudge:0px; --sep-title-z:5;
  --sep-title-size:clamp(13px,2.55vw,37px);
}
:root{--navy:#061d45;--ink:#07162f;--red:#f33b36;--blue:#1589ee;--gold:#ffc527;--green:#13b890}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f8fbff;color:var(--ink);font-family:var(--font-sw-body),Arial,sans-serif}a{text-decoration:none;color:inherit}button,a{font:inherit}.hero-mix{position:relative;width:100%;aspect-ratio:1672/941;height:auto;min-height:0;max-height:840px;overflow:hidden}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mix-nav{position:absolute;z-index:3;top:24px;left:6%;right:6%;height:auto;min-height:74px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:30px;padding:7px 26px;border:3px solid white;border-radius:30px;background:rgba(255,255,255,.95);box-shadow:0 8px 24px rgba(7,22,47,.18)}.mix-nav>a:first-child img{width:135px;height:52px;object-fit:contain}.mix-nav nav{display:flex;justify-content:center;gap:clamp(20px,3vw,48px)}.mix-nav nav a,.mix-footer nav a{font-family:var(--font-sw-display);font-size:13px;text-transform:uppercase}.gold-btn,.navy-btn,.join{display:inline-flex;align-items:center;justify-content:center;border:2px solid white;border-radius:17px;cursor:pointer;font-family:var(--font-sw-display);font-weight:900;text-transform:uppercase;box-shadow:0 5px 0 rgba(4,18,42,.2),0 10px 25px rgba(4,18,42,.2);transition:.18s}.gold-btn:hover,.navy-btn:hover,.join:hover,.gold-btn:focus-visible,.navy-btn:focus-visible,.join:focus-visible{transform:translateY(-2px);filter:brightness(1.04)}.gold-btn{min-height:58px;padding:0 28px;background:linear-gradient(#ffd953,#ffb914);color:#0a1c36;border-color:#fff0a9}.nav-download{min-width:225px;min-height:55px;text-align:center;font-size:14px;line-height:1.05}.navy-btn{min-height:49px;padding:0 31px;background:#08274f;color:white}.hero-center{position:absolute;z-index:2;top:115px;left:50%;display:flex;flex-direction:column;align-items:center;gap:15px;transform:translateX(-50%)}.hero-center img{width:520px;max-width:47vw;height:210px;object-fit:contain;filter:drop-shadow(0 7px 15px rgba(255,255,255,.8))}.hero-center .gold-btn{font-size:18px}
.core-strip{position:relative;z-index:14;width:88%;max-width:1420px;min-height:156px;display:grid;grid-template-columns:repeat(3,1fr);margin:-48px auto 22px;padding:18px 28px;background:white;border-radius:28px;box-shadow:0 12px 32px rgba(6,29,69,.18)}.core-strip article{display:flex;align-items:center;justify-content:center;gap:20px;border-right:1px solid #cbd8e7}.core-strip article:last-child{border:0}.core-strip i{width:67px;height:67px;display:grid;place-items:center;border-radius:50%;color:white;font-style:normal;font-size:31px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.25)}.castle{background:var(--blue)}.shield{background:var(--red)}.trophy{background:var(--green)}.core-strip h2,.feature-row h2{margin:0;font-family:var(--font-sw-display);text-transform:uppercase}.core-strip p{margin:4px 0 0}.feature-row{width:88%;max-width:1420px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 auto 22px}.feature-row article{overflow:hidden;padding:12px 12px 22px;text-align:center;background:white;border:1px solid #dae4ef;border-radius:22px;box-shadow:0 9px 25px rgba(6,29,69,.12)}.feature-row article>img,.medal-card{width:100%;height:220px;border-radius:16px;object-fit:cover}.feature-row article>img:first-child{object-position:center}.medal-card{display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#f23838,#fff 48%,#1589ee)}.medal-card img{width:30%;height:93%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.2))}.feature-row h2{margin-top:14px;font-size:25px}.feature-row p{margin:6px 0 0;font-size:17px}
.faction-mix{position:relative;height:585px;overflow:hidden}.faction-mix>img{width:100%;height:100%;object-fit:cover;object-position:center center}.faction-title{position:absolute;z-index:2;inset:clamp(34px,5vw,66px) 0 auto;text-align:center}.faction-title h2{margin:0;font-family:var(--font-sw-display);font-size:58px;text-transform:uppercase}.faction-title h2 span{color:#e83232}.faction-title h2 strong{color:#0a315f}.faction-title p{margin:4px 0;font-family:var(--font-sw-display);font-size:21px;text-transform:uppercase}.faction-title b{display:block;margin-top:11px;font-family:var(--font-sw-display);font-size:60px}.join{position:absolute;bottom:28px;width:250px;min-height:58px;color:white;font-size:18px}.red-join{left:17%;background:linear-gradient(#fa4a43,#c41d22)}.blue-join{right:17%;background:linear-gradient(#38a5ff,#0870d0)}.map-mix{background:#f9fcff;text-align:center}.map-mix h2{margin:0;padding:22px 15px 12px;font-family:var(--font-sw-display);font-size:39px;text-transform:uppercase}.map-mix img{display:block;width:100%;height:auto}.navy-zone{padding:0 clamp(20px,3vw,48px) 34px;background:var(--navy)}.rank-title{margin:0;padding:24px 0;color:white;text-align:center;font-family:var(--font-sw-display);font-size:37px;text-transform:uppercase}.medal-road{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:24px 10px 15px;background:white;border-radius:22px}.medal-road article{position:relative;text-align:center;min-width:0}.medal-road article>b{position:absolute;z-index:2;top:-37px;left:50%;display:grid;width:34px;height:34px;place-items:center;transform:translateX(-50%);border:3px solid white;border-radius:50%;background:#52a1dd;color:white;box-shadow:0 3px 6px rgba(0,0,0,.2)}.medal-road img{width:100%;height:205px;object-fit:contain;filter:drop-shadow(0 10px 7px rgba(0,0,0,.2))}.medal-road span{display:block;font-family:var(--font-sw-display);font-size:13px;text-transform:uppercase}.guild-card{position:relative;height:356px;margin-top:26px;overflow:hidden;border:4px solid white;border-radius:24px;background:white}.guild-card>img{width:100%;height:100%;object-fit:cover}.guild-card>div{position:absolute;inset:0 auto 0 0;width:29%;padding:42px 30px;background:linear-gradient(90deg,#fff 72%,rgba(255,255,255,.85),transparent)}.guild-card h2{margin:0 0 24px;font-family:var(--font-sw-display);font-size:48px;line-height:.92;text-transform:uppercase}.download-card{display:grid;grid-template-columns:210px 1fr 280px;align-items:center;gap:24px;min-height:250px;margin-top:26px;padding:18px 30px;background:white;border-radius:24px}.android-download{display:grid;width:150px;height:150px;place-items:center;border-radius:48% 48% 22% 22%;background:#75bf21;color:white;box-shadow:inset 0 0 0 9px rgba(255,255,255,.2),0 12px 25px rgba(54,118,0,.2)}.android-download span{font-size:90px;font-weight:900}.download-card>div:nth-child(2){text-align:center}.download-card h2{margin:0;font-family:var(--font-sw-display);font-size:34px;text-transform:uppercase}.download-card strong{display:block;margin:5px 0 13px;color:#e5272b;text-transform:uppercase;letter-spacing:.08em}.apk-btn{width:min(540px,100%);margin:auto;font-size:27px}.apk-btn span{margin-left:35px}.install-mini{padding:20px;border-radius:18px;background:#f2f7fc}.install-mini h3{margin:0 0 10px;font-family:var(--font-sw-display);text-transform:uppercase}.install-mini ol{margin:0;padding-left:20px;font-size:13px}.install-mini button{margin-top:10px;border:0;background:none;color:#0870d0;cursor:pointer;font-weight:900;text-decoration:underline}.mix-footer{display:grid;grid-template-columns:260px 1fr 1fr auto;align-items:center;gap:40px;padding:28px 5%;background:#041631;color:white}.mix-footer>div:first-child img{width:210px;height:80px;object-fit:contain}.mix-footer nav{display:grid;gap:10px}.social p{margin:0 0 10px;font-family:var(--font-sw-display);text-transform:uppercase}.social button,.social a{width:43px;height:43px;margin-right:9px;border:2px solid white;border-radius:50%;background:transparent;color:white;cursor:pointer;font-weight:900}.toast{position:fixed;z-index:90;right:20px;bottom:20px;max-width:430px;padding:16px 20px;border:0;border-radius:14px;background:#061d45;color:white;box-shadow:0 18px 50px rgba(0,0,0,.35);cursor:pointer}.modal-bg{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:rgba(1,11,30,.78);backdrop-filter:blur(8px)}.install-modal{position:relative;width:min(620px,100%);padding:40px;background:white;border-radius:26px}.install-modal>img{width:220px;height:85px;object-fit:contain}.install-modal h2{font-family:var(--font-sw-display);font-size:31px;text-transform:uppercase}.install-modal li{margin:12px 0}.install-modal .gold-btn{width:100%;margin-top:15px}.close{position:absolute;top:15px;right:15px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;font-size:27px}
@media(max-width:900px){.hero-mix{height:680px}.mix-nav{top:12px;left:3%;right:3%;grid-template-columns:1fr auto;height:66px;padding:5px 8px 5px 16px}.mix-nav nav{display:none}.mix-nav>a:first-child img{width:115px}.nav-download{min-width:155px;font-size:11px}.hero-center{top:92px}.hero-center img{max-width:76vw}.core-strip,.feature-row{width:94%}.core-strip{grid-template-columns:1fr;margin-top:-30px}.core-strip article{justify-content:flex-start;border-right:0;border-bottom:1px solid #cbd8e7;padding:12px}.feature-row{grid-template-columns:1fr}.faction-mix{height:360px}.faction-title h2{font-size:40px}.join{width:190px}.red-join{left:7%}.blue-join{right:7%}.medal-road{grid-template-columns:repeat(4,1fr);row-gap:46px}.guild-card{height:460px}.guild-card>div{width:55%;padding:35px 20px}.download-card{grid-template-columns:1fr;text-align:center}.android-download{margin:auto}.mix-footer{grid-template-columns:1fr 1fr}.mix-footer>div:first-child,.mix-footer .social{grid-column:1/-1;text-align:center}.mix-footer>div:first-child img{margin:auto}.map-mix h2{font-size:29px}}
@media(max-width:560px){.hero-mix{height:620px}.hero-art{object-position:center}.hero-center{top:120px}.hero-center img{width:330px;height:150px}.hero-center .gold-btn{font-size:13px}.faction-title{top:18px}.faction-title b{font-size:42px}.join{width:150px;font-size:12px}.medal-road{grid-template-columns:repeat(2,1fr)}.guild-card>div{width:70%;background:rgba(255,255,255,.87)}.guild-card h2{font-size:38px}.download-card{padding:25px 15px}.apk-btn{font-size:19px}.mix-footer{grid-template-columns:1fr;text-align:center}.mix-footer nav{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gold-btn,.navy-btn,.join{transition:none}}

/* .modal-bg and any future component that sets its own display would
   otherwise beat the browser's [hidden] rule, which is a class-vs-UA
   specificity fight [hidden] always loses. This settles it once. */
[hidden]{display:none!important}

/* --- real game art in the hero strip ------------------------------------ */
.core-strip i img{display:block;width:38px;height:38px;object-fit:contain}

/* --- torn separators ---------------------------------------------------- */
/* Every number here comes from the SEPARATOR CONTROLS block at the top of
   this file. Centred on the seam by default: half over the artwork above,
   half over the artwork below. */
.sep{position:absolute;top:0;left:50%;height:auto;
     aspect-ratio:904/107;
     background:url('assets/separator.webp') center/100% 100% no-repeat;
     pointer-events:none}
.sep-top{width:var(--sep-top-width);z-index:var(--sep-top-z);transform:translate(-50%,calc(-50% + var(--sep-top-nudge)))}
.sep-map{width:var(--sep-map-width);z-index:var(--sep-map-z);transform:translate(-50%,calc(-50% + var(--sep-map-nudge)))}
.faction-mix{overflow:visible}      /* the upper half of .sep-top lives outside */
.map-wrap{position:relative}

/* the heading rides on the separator, out of flow, so the faction art and the
   world map close right up and the tear bites into both */
.map-mix h2{position:absolute;z-index:var(--sep-title-z);top:0;left:0;right:0;margin:0;padding:0 15px;
            transform:translateY(calc(-50% + var(--sep-title-nudge)));
            font-size:calc(var(--sep-title-size) * var(--sep-title-scale));line-height:1.12;white-space:nowrap}

/* --- white rule under the world map, before the navy ranks zone ---------- */
.map-mix img{border-bottom:7px solid #fff}

/* --- footer wordmark: taller box, the stroked logo needs the room -------- */
.mix-footer>div:first-child img{width:230px;height:92px}

/* --- footer social marks ------------------------------------------------ */
.social button,.social a{display:inline-grid;place-items:center;padding:0;vertical-align:middle}
.social button svg,.social a svg{width:19px;height:19px;display:block}

/* --- buttons always clear the torn separators ---------------------------- */
/* The tears sit at z-index 4 and deliberately overhang the artwork, so
   anything clickable has to be lifted above them or the tear eats the tap. */
.join{z-index:12}
.gold-btn,.navy-btn,.install-mini button,.social button{position:relative;z-index:12}
/* .close is already position:absolute (top-right of the modal) - it only
   needs the layer, never position:relative, which would drop it into flow */
.close{z-index:12}

/* --- phones get the portrait cut of the hero art ------------------------- */
/* The wide 1672x941 painting cannot fill a tall phone hero without losing two
   thirds of its width, so below 760px the <picture> swaps in a 1024x1536
   version and the box takes that shape - nothing is cropped. max-height keeps
   it from swallowing the screen on a big phone; when it does bind, cover
   trims sky and ground, never the sides, so both mascots always survive. */
@media(max-width:760px){
  .hero-mix{height:auto;aspect-ratio:1024/1536;max-height:82vh;min-height:0}
}

/* --- JOIN buttons clear the lower tear ----------------------------------- */
/* The bottom separator is centred on the section's lower edge, and its ink
   reaches ~46px above that edge at desktop. Lifting the buttons keeps a real
   gap instead of letting the tear crowd them. */
.join{bottom:clamp(44px,7.6vw,100px)}

/* --- the strip after the hero, and the cards under it, stay above everything */
/* 120 -> 156px (+30%). The three items are already flex-centred, so they hold
   the middle of the taller panel instead of drifting to its top. */
.core-strip article{align-self:center}
/* the upper tear overhangs into this row - keep the cards in front of it */
.feature-row article{position:relative;z-index:10}

/* --- the tears are deliberately wider than the page --------------------- */
/* --sep-*-width above 100% is intentional (the torn edge should run past
   both sides), but it made the document 25px wider than the viewport and the
   whole page could be dragged sideways. Clip that axis; nothing here relies
   on horizontal scrolling or position:sticky. */
html,body{overflow-x:hidden;overflow-x:clip}

/* --- guild card bullets -------------------------------------------------- */
/* A fixed icon column is what makes the three text lines start on the same
   x - the old version leaned on glyph widths, which differ, and on <p>
   margins, which collapse unevenly. */
.guild-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.guild-list li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:14px;
               font-size:17px;line-height:1.35}
.guild-list img{width:30px;height:30px;object-fit:contain;display:block}

/* --- install card: logo centred ------------------------------------------ */
.install-modal>img{display:block;margin-left:auto;margin-right:auto}

/* --- team card ----------------------------------------------------------- */
.team-card{--team:#1589ee;text-align:center}
.team-card .team-crest{width:110px;height:130px;object-fit:contain;margin:4px auto 6px;display:block}
.team-card h2{margin:0 0 10px;color:var(--team)}
.team-lead{margin:0 0 22px;color:#3d4a60}
.team-motto-label{margin:0 0 4px;color:#7c8798;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.team-motto{margin:0 0 6px;color:var(--team);font-family:var(--font-sw-display);
            font-size:clamp(20px,2.4vw,27px);line-height:1.25}
@media(max-width:560px){
  .team-card .team-crest{width:84px;height:100px}
  .team-lead{font-size:15px}
}

/* --- desktop hero fills the screen --------------------------------------- */
/* A 16:9 viewport is 1.78 and the artwork is 1.777, so at 1920x1080 this
   crops essentially nothing; on a taller window cover trims the sides, which
   is the safe direction - the sky goes first, the mascots stay. */
@media(min-width:761px){
  .hero-mix{height:100vh;min-height:620px;max-height:none;aspect-ratio:auto}
  .hero-center{top:50%;transform:translate(-50%,-50%)}
}

/* --- desktop only: VS band at double height ------------------------------ */
/* Phones stay at 360px and the tablet range at 585px - this is the PC cut. */
@media(min-width:761px){
  .faction-mix{height:1170px}
}