/* One reference-art navigation strip, fixed outside every destination. */
:root{--nav-height:clamp(52px,13.178vw,57px);--screen-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));--content-height:calc(var(--screen-height) - var(--nav-height))}
body[data-screen=home] main,body[data-screen=menu] main{height:100dvh;min-height:0;overflow:hidden}
#militia-hub{height:var(--screen-height);min-height:0!important;position:relative;margin:0!important}
#militia-hub[hidden]{display:none!important}
#militia-hub .app-bottom-nav{position:absolute;z-index:60;left:0;right:0;bottom:0;height:var(--nav-height);display:block;padding:0;gap:0;margin:0;border:0;overflow:hidden;background:#07123a;box-shadow:0 -3px #060b27}
#militia-hub .app-bottom-nav>button{position:absolute;top:0;bottom:0;width:20%;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:transparent;touch-action:manipulation}
#militia-hub .app-bottom-nav>button[aria-current=page]{background:#43dfff13;box-shadow:inset 0 3px #f9ff9a,inset 0 0 0 2px #b5ffff88}
#militia-hub .app-bottom-nav>button:active{background:#fff3}
#militia-hub .app-bottom-nav>button:focus-visible{outline:3px solid #ffe76b;outline-offset:-4px}
.reference-viewport{width:100%;height:var(--screen-height);aspect-ratio:auto;margin:0;overflow:hidden}
.with-main-nav .reference-viewport{width:100%;height:var(--content-height);aspect-ratio:auto}
.reference-artboard{width:100%;height:100%;aspect-ratio:auto}
.with-main-nav .reference-artboard{height:calc(100% * 1672 / var(--crop))}
.reference-artboard>img{width:100%;height:100%;object-fit:fill}
.ref-resume{left:13.8%;top:64.2%;width:33.3%;height:2.85%}
#militia-hub .ref-resume .pixel-button{margin:0;padding:1px!important;min-height:0!important;height:100%;border-width:1px;background:#075127;box-shadow:inset 0 0 0 1px #b9ff6e;clip-path:none}
.ref-resume .pixel-copy{height:100%;width:100%}
.ref-save{position:absolute;z-index:62;left:4%;right:4%;bottom:calc(var(--nav-height) + 8px);border:2px solid #ffdd65!important}
body[data-screen=home] .ref-save{bottom:4px}
/* Keep navigation usable while inspecting inventory, trophies or locked content. */
.ref-modal-shade{position:absolute;inset:0 0 var(--nav-height);padding:14px;z-index:50}
.ref-modal{max-height:100%;padding:18px 14px 16px;border:3px solid #43eaff;box-shadow:inset 0 0 0 2px #057cf4,0 0 0 3px #020929,0 0 0 5px #208bd8;background:linear-gradient(130deg,#08274f,#021334 65%,#041d49)}
.ref-modal h2{margin:3px 0 12px}.ref-modal h2 .pixel-copy{width:100%;height:34px}
.ref-modal p{font-size:13px;line-height:1.6}.ref-modal h3{font-size:15px}
.pixel-copy{display:block;width:100%;height:27px;image-rendering:pixelated;object-fit:contain;pointer-events:none}
#militia-hub .pixel-button .pixel-copy{height:26px}
/* New page art leaves a dark aisle for live cards, labels and controls. */
#militia-hub.pixel-page{border:0;box-shadow:none;background:#070e3b}
.pixel-page-scroll{height:var(--content-height);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background-image:var(--page-art);background-size:100% auto;background-position:center top;background-repeat:repeat-y;scrollbar-width:thin;scrollbar-color:#2078c8 #07143b;padding-bottom:14px}
.pixel-page-header{position:relative;width:100%;aspect-ratio:941/345;overflow:hidden}
.pixel-page-header>img{position:absolute;width:100%;max-width:none;left:0;top:0;image-rendering:pixelated;pointer-events:none}
#page-coins{position:absolute;left:17.3220%;top:9.5652%;width:15.8342%;height:12.1739%;image-rendering:pixelated}
#militia-hub .pixel-page-header>button{position:absolute;padding:0;border:0;background:transparent;box-shadow:none;min-height:30px}
.page-wallet{left:10%;top:3%;width:31%;height:25%}.page-settings{left:81%;top:3%;width:12%;height:27%}.page-logo{left:17%;top:30%;width:66%;height:65%}
.pixel-page-title{position:relative;margin:0 5% 20px;padding:12px 8px;background:linear-gradient(#173c7e,#031139 50%,#082657);border:3px solid #3be9ff;box-shadow:inset 0 0 0 2px #0470da,0 0 0 3px #010a28,0 5px 0 3px #07103c;clip-path:polygon(3% 0,97% 0,97% 4%,100% 4%,100% 96%,97% 96%,97% 100%,3% 100%,3% 96%,0 96%,0 4%,3% 4%)}
.pixel-page-title .pixel-copy{height:36px;filter:drop-shadow(0 2px #e65908) drop-shadow(2px 0 #040828)}
.pixel-page-content{padding:0 6%;display:flex;flex-direction:column;gap:18px}
.pixel-card{position:relative;margin:0;padding:14px 16px 16px;color:#e2f3ff;background:linear-gradient(125deg,#082e5cfa,#031238fc 55%,#072653fa);border:3px solid #39dfff;box-shadow:inset 0 0 0 2px #146ab2,0 0 0 3px #050a2c,0 5px 0 3px #020a27;text-align:center}
.pixel-card:before,.pixel-card:after{content:'';position:absolute;width:5px;height:5px;background:#eaffff;top:3px;left:3px;box-shadow:5px 0 #61e7ff,0 5px #61e7ff}
.pixel-card:after{left:auto;right:3px;transform:scaleX(-1)}
.pixel-card h2{margin:0 0 9px;padding:0 0 8px;border-bottom:2px solid #145487}
.pixel-card h2 .pixel-copy{height:25px}
.pixel-card p{margin:8px 0 13px;font:13px/1.6 'Courier New',monospace;color:#c6e8ff}
.pixel-card p.small-copy{font-size:11px;margin-bottom:0;color:#8dcbed}
.pixel-card .pixel-status{font-size:12px;color:#bfff75;font-weight:bold;letter-spacing:1px}.pixel-card .upcoming{color:#ffd45d}
.pixel-tagline{margin:22px 0 9px;text-align:center;font:bold 10px monospace;letter-spacing:1.5px;color:#40dcff;text-shadow:1px 2px #070b38}
#militia-hub .pixel-action{--edge:#42eaff;--light:#c7ffff;--top:#0d8cf3;--mid:#0756c2;--base:#062b87;position:relative;width:100%;display:block;min-height:51px;padding:8px 13px;margin:10px 0 0;border:3px solid var(--edge);background:repeating-linear-gradient(135deg,#ffffff04 0 3px,transparent 3px 9px),linear-gradient(var(--top),var(--mid) 48%,var(--base));box-shadow:inset 0 0 0 2px var(--light),inset 0 -5px #00102799,0 4px #02041d;clip-path:polygon(3% 0,97% 0,97% 5%,100% 5%,100% 95%,97% 95%,97% 100%,3% 100%,3% 95%,0 95%,0 5%,3% 5%);touch-action:manipulation}
#militia-hub .pixel-action.green{--edge:#96ff39;--light:#edffbc;--top:#25d90b;--mid:#08a916;--base:#056621}
#militia-hub .pixel-action.purple{--edge:#f454ff;--light:#fff0ff;--top:#ba13f3;--mid:#7906ad;--base:#49057c}
#militia-hub .pixel-action.orange{--edge:#ffe327;--light:#fff8ca;--top:#ffb409;--mid:#ef6800;--base:#b72e05}
#militia-hub .pixel-action:active{filter:brightness(1.2);transform:translateY(2px)}
#militia-hub .pixel-action:disabled{filter:saturate(.2);opacity:.55;cursor:default}
.pixel-action .pixel-copy{filter:drop-shadow(2px 2px #02113a)}
.ration-icon{width:56px;height:56px;border:4px solid #ecf5ff;outline:3px solid #05113a;margin:16px auto;background:#ed3121;color:white;font:bold 48px/48px monospace;box-shadow:inset 0 0 0 3px #a91b24,0 0 20px #18d8ff55}
.coin-price{display:block;font:bold 17px monospace;color:#ffe561;margin:10px}
.pixel-card p.trophy-number{font:bold 34px monospace;color:#ffdf53}
.pixel-card .timing-track{margin:22px 0;height:64px;border:3px solid #40deff;box-shadow:inset 0 0 0 3px #04123e,0 3px #020720}
#intro-screen{position:fixed;inset:0;z-index:100;background:#030821;display:grid;place-items:center}
#intro-screen video{height:100%;width:100%;object-fit:contain}
#intro-screen button{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));padding:12px 18px;border:2px solid #37d9ff;color:#faffc9;background:#071c49;font:bold 14px monospace}
#intro-screen .intro-play{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}

.ref-resume{pointer-events:none;display:grid;place-items:center;background:#075127;border:1px solid #beff5a;box-shadow:inset 0 0 0 1px #164718}
.pixel-card .save-status{padding:0;border:0}
.app-bottom-nav .battle-nav-art{inset:0}
.pixel-card .timing-track #timing-marker{height:calc(100% - 16px)}
/* The supplied title animation contains its own pixel Play artwork. */
#intro-screen{background:#050a26;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:hidden}
.intro-artboard{position:relative;width:min(100vw,430px,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 720 / 1280));aspect-ratio:720/1280}
#intro-screen video{display:block;width:100%;height:100%;object-fit:fill;image-rendering:pixelated}
#intro-screen .intro-play-hotspot{left:18.8889%;top:63.9875%;width:62.4074%;height:9.499%;right:auto;bottom:auto;min-height:44px;padding:0;background:transparent;border:0;box-shadow:none;color:transparent;touch-action:manipulation}
#intro-screen .intro-play-hotspot:active{background:#ffffff25}
#intro-screen .intro-play-hotspot:focus-visible{outline:3px solid #fff883;outline-offset:2px}
#intro-screen .intro-sound{top:max(10px,env(safe-area-inset-top));bottom:auto;right:max(12px,env(safe-area-inset-right));width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:8px;border:2px solid #37d9ff;box-shadow:inset 0 0 0 1px #a2ecff,0 3px #02051d;background:#071c49ed}
#intro-screen .intro-sound svg{display:block;width:24px;height:24px;pointer-events:none;shape-rendering:crispEdges}
#intro-screen .intro-sound[data-sound-state=muted]{color:#9dc5e0}
#intro-screen .intro-sound[data-sound-state=blocked]{color:#ffe76b}
.intro-slogan{position:absolute;left:32.5%;top:95.9375%;width:35%;height:1.71875%;pointer-events:none;image-rendering:pixelated}
/* The new clips contain their own slogan and button art. Hit areas follow it. */
.intro-artboard{width:min(100vw,430px);height:100%;aspect-ratio:auto;isolation:isolate}
#intro-screen .intro-transition{position:absolute;inset:0;z-index:1}
#intro-screen video[hidden],#intro-screen button[hidden]{display:none!important}
#intro-screen .intro-play-hotspot{left:20.1%;top:64.2%;width:60%;height:8.2%;z-index:2}
#intro-screen .intro-sound{z-index:3;right:auto;left:10px;top:10px;clip-path:polygon(8% 0,92% 0,92% 8%,100% 8%,100% 92%,92% 92%,92% 100%,8% 100%,8% 92%,0 92%,0 8%,8% 8%)}
.reference-artboard>.home-loop{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;image-rendering:pixelated}
.reference-artboard>.home-loop[hidden]{display:none}
.ref-home-wallet{position:absolute;z-index:1;left:10%;top:1.2%;width:30.7%;height:4.3%;overflow:hidden;pointer-events:none}
.ref-home-wallet img{position:absolute;max-width:none;width:325.6%;height:2300%;left:-33%;top:-30%;image-rendering:pixelated}
.animated-home .ref-resume{left:24%;top:89.2%;width:52%;height:2.85%}
@media(max-width:600px){.intro-artboard{width:100%}}

.animated-home .ref-hotspot[aria-label="Settings"]{min-width:44px!important;min-height:44px!important}