:root{--ink:#0b1215;--gold:#cb984c;--light:#ffe8b2;--cream:#f6e6c7;--red:#8b160f;--border:#76552c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b1011;color:var(--cream);font-family:Georgia,'Times New Roman',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffe8ad;outline-offset:5px}button{border:0}svg{fill:currentColor}button{touch-action:manipulation}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-80px;left:10px;background:#fff;color:#111;padding:12px;z-index:100}.skip-link:focus{top:10px}.site-header{height:79px;background:linear-gradient(120deg,#141b20,#0b1218 55%,#13191b);border-bottom:2px solid #b88235;box-shadow:0 1px #251a0c,0 5px 22px #0008;position:relative;z-index:5}.header-inner{height:100%;max-width:1280px;margin:auto;padding:0 30px;display:flex;align-items:center;gap:35px}.brand{position:relative;flex-shrink:0;padding:0 7px;display:block;line-height:1;font-size:43px;font-weight:bold;letter-spacing:-2px;color:#f7cd85;text-shadow:2px 3px #251306,0 -1px #fff0bd}.brand svg{position:absolute;width:32px;height:22px;left:45%;top:-17px;color:#d6a14a;transform:rotate(9deg)}.site-header nav{display:flex;gap:30px;align-self:stretch;align-items:center;flex:1}.site-header nav a,.site-header nav button{position:relative;white-space:nowrap;font-size:19px;background:none;padding:25px 0}.site-header nav .active{color:#f7bb50;text-shadow:0 0 22px #fa891b}.site-header nav .active:after{content:'';position:absolute;bottom:-2px;left:40%;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffdb8c}.site-header nav button:hover,.site-header nav a:hover{color:#ffd88c}.account-actions{display:flex;gap:17px;margin-left:auto}.button{padding:11px 29px;border:1px solid #bd955c;border-radius:6px;background:#161d20;box-shadow:inset 0 0 0 2px #0005,0 3px 5px #0009;font-size:18px;white-space:nowrap;transition:filter .2s,transform .2s}.button:hover{filter:brightness(1.15);transform:translateY(-1px)}.button.gold{color:#261305;background:linear-gradient(#ffcb7b,#df942d 55%,#ad5b15);border-color:#ffdb9a;text-shadow:0 1px #ffd88f;font-weight:bold}.button.secondary{border-color:#77756d;background:linear-gradient(#1b2226,#090e12)}.menu-toggle{display:none}.frontier{background-image:linear-gradient(180deg,#0000 40%,#080c0c88 73%,#0b1011 100%),url('assets/hero.png');background-size:cover;background-position:center 38%;padding-bottom:38px;position:relative;isolation:isolate}.hero{position:relative;min-height:650px;padding-top:35px}.hero-copy{text-align:center;width:49%;margin-inline:auto;position:relative}.pillars{margin:43px auto 0;display:grid;grid-template-columns:repeat(4,1fr);width:810px;max-width:90%;padding-left:70px}.pillars button{background:none;position:relative;padding:0 16px;text-shadow:0 2px 3px #000;display:flex;align-items:center;flex-direction:column;gap:7px}.pillars button+button:before{content:'';position:absolute;left:0;top:66px;height:66px;width:1px;background:linear-gradient(transparent,#b893473b,transparent)}.icon-medallion{display:grid;place-items:center;width:78px;height:78px;border:2px solid #dda24c;border-radius:50%;color:#eab363;background:radial-gradient(at 35% 25%,#293334,#10191b 70%);box-shadow:0 2px 1px #000,inset 0 0 0 3px #070e11,0 0 0 2px #1b130b;transition:transform .2s,box-shadow .2s}.icon-medallion svg{width:44px;height:44px}.pillars button:hover .icon-medallion{transform:translateY(-4px);box-shadow:0 0 20px #d2923644}.pillars strong{font-weight:normal;font-size:20px;text-transform:uppercase;white-space:nowrap}.pillars button>span:last-child{font-size:17px;white-space:nowrap}.realms{display:grid;grid-template-columns:repeat(4,1fr);gap:23px;padding:0 3.2%;max-width:1700px;margin:auto}.realm-card{border:1px solid #a37d42;padding:5px;background:linear-gradient(135deg,#986e35,#151c1e 3%,#090e10 97%,#b3894e);position:relative;box-shadow:0 4px 10px #000,inset 0 0 0 2px #14110b;text-align:center;transition:transform .25s,border-color .25s}.realm-card:before,.realm-card:after{content:'◆';position:absolute;color:#e0b775;top:-8px;left:-6px;font-size:12px;text-shadow:0 1px #000;z-index:1}.realm-card:after{left:auto;top:auto;bottom:-7px;right:-6px}.realm-card:hover{transform:translateY(-5px);border-color:#ffe0a3}.card-art{display:block;width:100%;aspect-ratio:1.98;background-image:url('assets/reference.png');background-size:451.76% auto;border-bottom:1px solid #8e6a32}.village-art{background-position:4.6% 86.62%}.army-art{background-position:35.1% 86.62%}.battle-art{background-position:65.9% 86.62%}.world-art{background-position:96.6% 86.62%}.card-copy{display:flex;flex-direction:column;gap:6px;padding:9px 4px 11px;background:radial-gradient(ellipse at top,#1b2426,#0c1113)}.card-copy strong{font-size:22px;text-transform:uppercase;font-weight:normal;color:#ffe8b2}.card-copy>span{font-size:15px;line-height:1.4;color:#e4c896}.eyebrow{color:#c49857;font:11px/1.5 system-ui,sans-serif;text-transform:uppercase;letter-spacing:3px}h2{font-size:34px;font-weight:normal;color:#f5dfae;margin:17px 0}p{line-height:1.6}body > footer{border-top:1px solid #72522b55;padding:28px 4%;display:flex;align-items:center;gap:20px;color:#99968a;font-size:13px}.footer-brand{font-size:27px;color:#dab276;letter-spacing:-1px}body > footer p{margin:0}body > footer div{margin-left:auto;display:flex;gap:20px}body > footer button{background:none;padding:10px 0;font-size:13px}body > footer button:hover{color:#ffe8b2}dialog{position:fixed;border:1px solid #b78b46;background:linear-gradient(130deg,#1b2324,#0b1114);color:#e9dbc1;width:min(950px,94vw);max-height:90dvh;padding:42px;box-shadow:0 25px 100px #000;border-radius:3px;overflow:auto}dialog::backdrop{background:#030807db;backdrop-filter:blur(6px)}.close-dialog{position:sticky;top:0;float:right;z-index:9;background:#20292a;border:1px solid #8c713e;color:#fce0aa;border-radius:50%;width:36px;height:36px;font:26px/1 sans-serif;margin:-22px -22px 0 0}.dialog-label{font:11px system-ui,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#c79c5b}.dialog-body{max-width:650px;margin:auto;padding:15px 0}.dialog-body h2{font-size:37px}.dialog-body p{color:#c0beb2}.dialog-art{height:220px;background-image:url('assets/hero.png');background-size:cover;background-position:center 60%;border:1px solid #715832;margin:20px 0}.dialog-body ul{padding-left:20px;line-height:1.9;color:#d6c6a6}.status-label{display:inline-block;font:11px system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;border:1px solid #75603a;padding:7px 10px;color:#cba86b}.dialog-note{font:12px/1.6 system-ui,sans-serif;color:#9ba39c!important}.dialog-body .button{margin-top:12px}.noscroll{overflow:hidden}
@media(min-width:1600px){.hero{min-height:700px;padding-top:55px}.hero-copy{width:46%;margin-inline:auto}.pillars{margin-top:56px}}@media(max-width:1200px){.header-inner{gap:24px;padding:0 22px}.site-header nav{gap:21px}.site-header nav a,.site-header nav button{font-size:17px}.brand{font-size:35px}.account-actions{gap:10px}.button{padding:10px 21px}.hero{min-height:590px;padding-top:30px}.pillars{margin-top:38px}.realms{gap:17px}.card-copy strong{font-size:20px}.card-copy>span{font-size:13px}}
@media(max-width:1000px){.header-inner{gap:20px}.brand{font-size:36px}.site-header{height:72px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:44px;background:none;order:3;padding:7px}.menu-toggle span{height:2px;width:25px;background:#e4c287}.site-header nav{display:none;position:absolute;top:70px;right:0;left:0;background:#0d1519f8;padding:15px 25px;border-bottom:1px solid #bc8944;flex-wrap:wrap;justify-content:center;gap:18px 30px}.site-header nav.open{display:flex}.site-header nav a,.site-header nav button{padding:12px}.site-header nav .active:after{display:none}.hero-copy{width:60%;margin-inline:auto}.hero{min-height:590px}.frontier{background-position:37% top}.realms{grid-template-columns:repeat(2,1fr);max-width:850px;gap:22px}.pillars{padding-left:0;max-width:90%;width:740px}.card-copy{padding:12px 5px}.card-copy>span{font-size:15px}body > footer{flex-wrap:wrap}body > footer div{margin-left:auto}}
@media(max-width:620px){.header-inner{padding:0 14px;gap:12px}.brand{font-size:32px;letter-spacing:-1px}.brand svg{width:24px;top:-13px}.account-actions{gap:8px}.account-actions .button{font-size:14px;padding:9px 12px}.account-actions .secondary{display:none}.menu-toggle{width:35px}.site-header{height:68px}.frontier{background-size:auto 700px;background-repeat:no-repeat;background-position:31% 0;background-color:#0b1011}.hero{padding-top:45px;min-height:730px;background:linear-gradient(180deg,#0000 40%,#0b1011bb 62%,#0b1011 100%)}.hero-copy{margin-inline:auto;width:100%;padding:0 15px}.pillars{grid-template-columns:repeat(2,1fr);gap:25px 0;margin-top:35px;max-width:350px;width:96%}.pillars button{gap:4px;padding:0 10px}.pillars button+button:before{display:none}.icon-medallion{width:58px;height:58px;margin-bottom:3px}.icon-medallion svg{width:33px;height:33px}.pillars strong{font-size:17px}.pillars button>span:last-child{font-size:14px}.realms{padding:0 18px;gap:18px}.card-copy strong{font-size:17px}.card-copy>span{font-size:12px}.card-copy{padding:10px 4px;min-height:78px}.frontier{padding-bottom:10px}.eyebrow{font-size:10px;letter-spacing:2px}body > footer{padding:25px 22px;gap:10px 20px}body > footer .footer-brand{width:100%}body > footer p{font-size:12px}body > footer div{order:3;margin-left:0}body > footer>span{margin-left:auto;font-size:11px}dialog{padding:28px 22px}.close-dialog{margin:-15px -10px 0 0}.dialog-body h2{font-size:29px}.dialog-art{height:160px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Transparent Micedom artwork lets the landscape show through. */
.hero{padding-top:10px}
.hero-brand{display:block;width:min(100%,650px);margin:0 auto 17px;padding:0;line-height:0;background:none;filter:none;letter-spacing:normal;-webkit-text-fill-color:initial}
.hero-brand img{display:block;width:100%;height:auto;aspect-ratio:1768/890;object-fit:contain}
@media(min-width:1600px){.hero{padding-top:15px}.hero-brand{width:min(100%,730px)}}
@media(max-width:1000px){.hero{padding-top:35px}.hero-brand{margin-bottom:22px}}
@media(max-width:620px){.hero{padding-top:55px;min-height:660px}.hero-copy{padding:0 10px}.hero-brand{width:100%;margin:0 auto 24px}}

/* Fit the complete homepage to laptop and desktop viewports.
   Narrow windows and enlarged text keep the normal scrolling layout. */
@media (min-width:56.25em) and (min-height:31.25em){
  body{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
  .site-header{height:clamp(48px,8dvh,74px)}
  .header-inner{max-width:1500px;padding:0 clamp(20px,3vw,48px);gap:24px}
  .site-header nav{gap:clamp(16px,2.2vw,32px)}
  .site-header nav a,.site-header nav button{font-size:clamp(15px,1.9dvh,19px);padding:12px 0}
  .account-actions .button{font-size:clamp(14px,1.8dvh,18px);padding:8px 20px}
  .site-header nav.open{top:100%}
  #main{display:grid;grid-template-rows:minmax(0,1fr);min-height:0}
  .frontier{display:grid;grid-template-rows:minmax(0,1fr) clamp(112px,22dvh,255px);gap:clamp(8px,1.3dvh,16px);min-height:0;padding-bottom:clamp(8px,1.3dvh,16px);background-size:cover;background-position:center 38%}
  .hero{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;padding-top:clamp(4px,1dvh,12px);gap:clamp(6px,1.4dvh,18px)}
  .hero-copy{display:flex;flex-direction:column;align-items:center;min-height:0;width:49%;margin-inline:auto}
  .hero-brand{flex:1 1 0;min-height:0;width:100%;max-width:730px;margin:0 0 clamp(4px,1dvh,12px)}
  .hero-brand img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center bottom}

  .pillars{width:min(900px,88%);max-width:none;margin:0 auto;padding-left:0;gap:12px}
  .pillars button{padding:0 6px;gap:clamp(3px,.6dvh,7px)}
  .pillars button+button:before{top:50%;height:45%}
  .icon-medallion{width:clamp(36px,6.8dvh,74px);height:clamp(36px,6.8dvh,74px);flex-shrink:0}
  .icon-medallion svg{width:57%;height:57%}
  .pillars strong{font-size:clamp(14px,2dvh,20px)}
  .pillars button>span:last-child{font-size:clamp(12px,1.65dvh,17px)}
  .realms{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:1700px;min-height:0;gap:clamp(12px,1.6vw,24px);padding:0 3.2%;margin:0 auto}
  .realm-card{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0;padding:4px}
  .card-art{position:relative;min-height:0;aspect-ratio:auto;container-type:size;overflow:hidden;background-image:none}
  .card-art:before{content:'';position:absolute;left:50%;top:50%;width:max(100cqw,198cqh);aspect-ratio:1.98;transform:translate(-50%,-50%);background-image:url('assets/reference.png');background-size:451.76% auto;background-position:inherit}
  .card-copy{min-height:0;gap:3px;padding:clamp(5px,.8dvh,9px) 3px}
  .card-copy strong{font-size:clamp(16px,2.2dvh,22px)}
  .card-copy>span{font-size:clamp(12px,1.5dvh,15px);line-height:1.25}

  body > footer{flex-wrap:nowrap;padding:clamp(5px,.8dvh,10px) 4%;gap:18px;font-size:12px}
  .footer-brand{font-size:clamp(20px,2.4dvh,26px)}
  body > footer button{font-size:12px;padding:5px 0}
}
@media (min-width:56.25em) and (min-height:31.25em) and (max-height:40.625em){
  .pillars{width:min(1000px,90%)}
  .pillars button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;text-align:left}
  .icon-medallion{grid-column:1;grid-row:1 / 3}
  .pillars strong{align-self:end;white-space:normal}
  .pillars button>span:last-child{align-self:start;white-space:normal}
  .pillars button+button:before{top:5%;height:90%;left:-6px}
}

/* Beta status and release notice. */
.beta-badge{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:8px 12px;border:1px solid #bc8e49;border-radius:4px;background:#c68d2114;color:#f0ce90;font:600 11px/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:1.5px}
.beta-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:#efbf6d;box-shadow:0 0 8px #efbf6d66}
.beta-badge:hover{background:#c68d212b;border-color:#efbf6d}
#details:has(.development-notice){width:min(660px,94vw)}
.development-notice{text-align:center;max-width:570px;padding:22px 5px 18px}
.development-emblem{display:block;width:64px;height:44px;margin:0 auto 24px;color:#dfb66b}
.development-emblem svg{display:block;width:100%;height:100%;fill:none}
.development-notice h2{font-size:clamp(28px,4vw,39px);line-height:1.15;margin:15px 0 20px}
.development-notice p{max-width:490px;margin:0 auto 22px;font-size:17px;line-height:1.65;color:#cfc5b0}
.development-notice .button{min-width:150px;margin-top:8px}
@media(max-width:620px){.beta-badge{font-size:10px;padding:7px 10px}.development-notice{padding:15px 0}.development-notice p{font-size:16px}}

/* Use the supplied button artwork at its original proportions. */
.play-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:min(400px,100%);height:auto;min-width:0;aspect-ratio:440/104;padding:0;border:0;background:transparent;clip-path:none;line-height:0;filter:drop-shadow(0 4px 5px #0009);transition:filter .2s,transform .2s}
.play-button svg{display:block;width:100%;height:auto;aspect-ratio:440/104;pointer-events:none}
.play-button:hover{filter:brightness(1.08) drop-shadow(0 4px 8px #000a);transform:translateY(-1px)}
.play-button:active{transform:translateY(1px)}
.play-button:focus-visible{outline:3px solid #ffe8ad;outline-offset:5px}
@media (min-width:56.25em) and (min-height:31.25em){.play-button{width:min(100%,clamp(250px,36dvh,440px))}}
@media(max-width:620px){.play-button{width:min(330px,100%)}}