@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--navy:#10172d;--deep:#080f22;--panel:rgba(12,21,43,.9);--line:rgba(255,255,255,.13);--white:#f8f8ff;--muted:#aebbd1;--mint:#7ef0d0;--gold:#ffd36a;--coral:#ff6d78;--blue:#6baaf9}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#080e20;color:var(--white);font-family:'DM Sans',Arial,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}#app{position:relative;width:100%;height:100%;min-height:480px;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,29,.48),transparent 45%,rgba(7,12,29,.12)),linear-gradient(0deg,rgba(7,12,29,.4),transparent 23%);z-index:1}.topbar{position:absolute;z-index:10;top:0;left:0;right:0;height:68px;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,48px);background:linear-gradient(180deg,rgba(6,12,27,.74),rgba(6,12,27,0))}.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:rgba(9,20,42,.67);color:white;font-size:24px;line-height:1}.icon-btn:hover,.pause-btn:hover{background:#253c60}.brand{font-family:'Barlow Condensed',Impact,sans-serif;font-size:25px;font-weight:900;letter-spacing:1px;white-space:nowrap;text-shadow:0 2px 14px #081025}.brand em{color:var(--mint);font-style:normal}.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;background:linear-gradient(135deg,#7ce7d9,#50a8f5);border-radius:9px;color:#10243d}.wallet{display:flex;margin-left:auto;gap:8px}.wallet span{padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(8,17,38,.76);font-weight:800;color:var(--gold);white-space:nowrap}.wallet span:first-child{color:#a5b8ff}.wallet b{color:#fff}.screen{position:absolute;z-index:3;inset:0}.menu-screen{display:grid;grid-template-columns:minmax(290px,1fr) minmax(360px,.78fr);align-items:center;gap:clamp(24px,5vw,100px);padding:85px max(5vw,30px) 54px}.menu-copy{max-width:650px}.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:3px;color:var(--mint);font-size:16px}.menu-copy h1{font:900 clamp(58px,7.6vw,124px)/.83 'Barlow Condensed',Impact,sans-serif;letter-spacing:-2px;margin:15px 0 26px;text-shadow:0 6px 24px #09122a}.menu-copy h1 span{color:var(--gold)}.menu-copy p{max-width:420px;line-height:1.6;color:#e0e8f5;font-size:clamp(14px,1.1vw,18px);text-shadow:0 2px 6px #0b152c}.primary{border:0;color:#13233d;background:linear-gradient(135deg,#ffe18a,#ffad69);font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;letter-spacing:1px;box-shadow:0 8px 0 #ab653d,0 14px 25px #0c142b88;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translateY(-3px);box-shadow:0 11px 0 #ab653d,0 19px 25px #0c142b88}.primary:active{transform:translateY(5px);box-shadow:0 3px 0 #ab653d}.primary.big{margin-top:25px;padding:17px 24px;border-radius:13px;min-width:310px;display:flex;justify-content:space-between;gap:16px}.tiny-note{margin-top:24px;color:#cbd9e8;font-size:12px;letter-spacing:1px}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:560px;justify-self:end}.mode-card{position:relative;min-height:112px;text-align:left;padding:17px 20px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:linear-gradient(130deg,rgba(22,43,72,.85),rgba(13,23,48,.87));color:white;box-shadow:0 16px 30px #06112770;backdrop-filter:blur(14px);overflow:hidden;transition:transform .18s,border-color .18s,background .18s}.mode-card:hover{transform:translateY(-5px);border-color:var(--mint);background:#294c69}.mode-card.active{border-color:#ffd36a;box-shadow:inset 0 0 0 1px #ffd36a44,0 16px 30px #06112770}.mode-icon{display:block;color:var(--gold);font-size:24px;height:30px}.mode-name{display:block;font:900 22px 'Barlow Condensed',sans-serif;letter-spacing:1.2px}.mode-card small{color:#b6c9db}.mode-arrow{position:absolute;right:15px;bottom:17px;color:var(--mint);font-size:21px}.menu-stats{position:absolute;bottom:18px;left:max(5vw,30px);display:flex;align-items:center;gap:20px;font:800 13px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#b7c9dc}.menu-stats b{color:#fff;font-size:17px;margin-left:5px}.menu-stats i{height:15px;width:1px;background:#9cb6ce66}.hidden{display:none!important}.hud{position:absolute;z-index:4;inset:0;pointer-events:none}.hud-left,.hud-right,.hud-mid{position:absolute;top:75px;background:rgba(10,20,43,.84);border:1px solid #ffffff30;box-shadow:0 8px 30px #0b122f55;backdrop-filter:blur(12px);border-radius:14px;padding:10px 13px}.hud-left{left:3%;width:min(25%,280px)}.hud-right{right:3%;width:min(25%,280px);text-align:right}.hud-mid{left:50%;transform:translateX(-50%);min-width:130px;text-align:center;background:linear-gradient(135deg,#22354cdd,#101d3cdd);border-color:#ffd36a88}.hud-mid span{display:block;color:var(--gold);font:900 24px 'Barlow Condensed',sans-serif}.hud-mid small{font:800 12px 'DM Sans',sans-serif;color:var(--mint)}.hud-label{display:block;font:800 14px 'Barlow Condensed',sans-serif;letter-spacing:1px}.hud strong{display:block;font:800 13px 'DM Sans',sans-serif;margin-top:3px}.health{height:8px;border-radius:99px;background:#182136;overflow:hidden;margin-top:5px}.health div{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#32cba3,#a5f58b);transition:width .3s}.health.enemy div{background:linear-gradient(90deg,#ff7b7b,#ffc17a)}.game-info{position:absolute;top:153px;left:50%;transform:translateX(-50%);font:800 13px 'DM Sans',sans-serif;color:#fff;text-align:center;text-shadow:0 2px 6px #0b1738}.pause-btn{pointer-events:auto;position:absolute;top:77px;right:calc(3% + min(25%,280px) + 12px);border:1px solid #ffffff44;border-radius:12px;background:#162844c9;color:#fff;width:42px;height:42px;font-size:22px}.ammo-bar{pointer-events:auto;position:absolute;left:3%;bottom:30px;display:flex;gap:7px}.ammo{border:1px solid #ffffff44;border-radius:10px;background:#152742dd;color:#fff;padding:9px 12px;font:800 12px 'DM Sans',sans-serif;box-shadow:0 4px 15px #07122a88}.ammo.active{border-color:var(--gold);color:var(--gold);background:#3a3140}.ammo:disabled{opacity:.45;cursor:not-allowed}.instruction{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);padding:9px 17px;border-radius:40px;background:#09162ac0;border:1px solid #ffffff30;color:#e3efff;font:800 11px 'DM Sans',sans-serif;letter-spacing:1px;white-space:nowrap}.overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(4,9,22,.74);backdrop-filter:blur(8px);padding:15px}.modal{width:min(760px,100%);max-height:min(86vh,770px);overflow:auto;border:1px solid #7be8d275;border-radius:22px;background:linear-gradient(160deg,#213b57,#101b39 70%);box-shadow:0 30px 80px #020918d9,inset 0 0 80px #3e6f771d;padding:clamp(22px,3vw,36px)}.modal h2{font:900 clamp(38px,5vw,58px)/1 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:5px 0 10px;color:var(--gold)}.modal h3{font:900 25px 'Barlow Condensed',sans-serif;margin:0 0 8px}.modal p{color:#ccdaea;line-height:1.5}.modal .sub{color:var(--mint);font:800 12px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase}.modal-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.secondary,.buy-btn{border:1px solid #8ab5cb7a;background:#203c5b;color:#fff;border-radius:10px;padding:10px 17px;font-weight:800}.secondary:hover,.buy-btn:hover:not(:disabled){background:#315879}.buy-btn:disabled{opacity:.42;cursor:not-allowed}.modal .primary{padding:12px 20px;border-radius:10px;font-size:19px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:11px;margin-top:20px}.item-card{border:1px solid #ffffff2d;border-radius:15px;background:#142844;padding:17px;min-height:150px;display:flex;flex-direction:column;align-items:flex-start}.item-card.selected{border-color:var(--gold);background:#3b3a45}.item-card .symbol{font-size:30px;color:var(--mint);margin-bottom:7px}.item-card h3{font-size:20px;margin:0}.item-card p{font-size:12px;margin:7px 0 13px;flex:1}.item-card button{font-size:12px;width:100%;padding:8px 10px}.tabs{display:flex;gap:8px;margin:18px 0}.tab{border:1px solid #ffffff44;border-radius:9px;padding:8px 14px;background:#172c48;color:white;font-weight:800}.tab.active{background:#6acdbd;color:#102437}.toast{position:absolute;z-index:30;left:50%;top:19%;transform:translateX(-50%);padding:12px 22px;border:1px solid #ffe9a3;border-radius:11px;background:#172a46ef;color:var(--gold);font:900 22px 'Barlow Condensed',sans-serif;box-shadow:0 10px 30px #07152b99;text-align:center;pointer-events:none}
@media(max-width:850px){.menu-screen{grid-template-columns:1fr;align-content:center;gap:20px;padding:72px 20px 46px}.menu-copy h1{font-size:clamp(54px,12vw,80px);margin:10px 0}.menu-copy p{font-size:13px;max-width:530px}.primary.big{margin-top:13px;padding:11px 18px;min-width:0;font-size:19px}.tiny-note{margin-top:15px}.mode-grid{max-width:none;grid-template-columns:repeat(3,1fr);gap:7px}.mode-card{min-height:87px;padding:10px}.mode-icon{font-size:18px;height:24px}.mode-name{font-size:17px}.mode-card small{font-size:10px}.mode-arrow{right:8px;bottom:8px;font-size:15px}.menu-stats{bottom:10px;left:20px;font-size:10px}.hud-left,.hud-right,.hud-mid{top:62px;padding:6px 8px;border-radius:9px}.hud-left,.hud-right{width:26%}.hud-mid span{font-size:17px}.hud-mid small{font-size:9px}.hud-label{font-size:11px}.hud strong{font-size:10px}.pause-btn{top:126px;right:3%;width:33px;height:33px}.game-info{top:113px;font-size:10px}.instruction{bottom:10px;font-size:9px}.ammo-bar{bottom:9px}.ammo{padding:7px;font-size:10px}}
@media(max-width:560px){#app{min-height:360px}.topbar{height:50px;padding:0 10px;gap:7px}.icon-btn{width:30px;height:30px;font-size:19px;border-radius:8px}.brand{font-size:17px}.brand-mark{width:21px;height:21px;margin-right:4px}.wallet{gap:3px}.wallet span{font-size:11px;padding:5px 6px}.menu-screen{grid-template-columns:minmax(0,1fr);padding:55px 13px 35px;overflow:auto;align-content:start}.menu-copy,.mode-grid{min-width:0}.eyebrow{font-size:10px;letter-spacing:1.5px}.menu-copy h1{font-size:clamp(43px,12vw,60px);margin:7px 0}.menu-copy p{font-size:12px;line-height:1.35;margin:6px 0}.primary.big{font-size:16px;margin-top:9px;padding:9px 12px}.tiny-note{font-size:10px;margin-top:9px}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.mode-card{min-height:68px;padding:7px 10px}.mode-icon{font-size:15px;height:19px}.mode-name{font-size:15px}.mode-card small{font-size:9px}.menu-stats{display:none}.hud-left,.hud-right{width:31%}.hud-mid{min-width:80px}.hud-mid span{font-size:14px}.hud-mid small{font-size:8px}.game-info{top:108px}.instruction{left:auto;right:9px;transform:none;max-width:50%;white-space:normal;text-align:center;line-height:1.2}.ammo-bar{max-width:53%;overflow:auto}.ammo{font-size:9px;padding:6px}.modal{padding:17px}.modal h2{font-size:38px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.item-card{padding:10px;min-height:140px}.item-card h3{font-size:17px}}
@media(max-height:560px) and (min-width:700px){.menu-screen{grid-template-columns:1fr 1fr;padding-top:55px;padding-bottom:25px}.menu-copy h1{font-size:clamp(48px,6vw,85px);margin:8px 0}.menu-copy p{font-size:12px;line-height:1.3}.primary.big{padding:10px 15px;margin-top:10px;font-size:18px}.tiny-note{margin-top:10px}.mode-card{min-height:80px;padding:9px}.mode-icon{font-size:17px;height:21px}.mode-name{font-size:17px}.menu-stats{display:none}}
.wallet button{padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(8,17,38,.76);font-weight:800;color:var(--gold);white-space:nowrap}.wallet button:first-child{color:#a5b8ff}.wallet button:hover{background:#253c60}.wallet button b{color:#fff}
@media(max-width:560px){.wallet button{font-size:11px;padding:5px 6px}}

/* Skylands art direction: translucent ink panels and warm brass details. */
:root{--navy:#102439;--deep:#0c1a2b;--panel:rgba(11,29,43,.89);--line:rgba(230,245,226,.24);--white:#f8f6e9;--muted:#d1decf;--mint:#a6e5c5;--gold:#f6d179;--coral:#f38e74;--blue:#92cce5}
.vignette{background:linear-gradient(90deg,rgba(9,29,45,.32),transparent 44%,rgba(9,29,45,.12)),linear-gradient(0deg,rgba(8,28,34,.40),transparent 29%);box-shadow:inset 0 0 110px #132e3452}
.topbar{height:64px;padding:0 clamp(15px,2.8vw,42px);background:linear-gradient(180deg,#0b233abd,rgba(15,39,56,.42) 74%,transparent);border-bottom:1px solid #e4f5e41f}
.brand{font-size:27px;letter-spacing:1.4px;color:#fff6de;text-shadow:0 2px 8px #091f31}.brand em{color:#aee8cb}.brand-mark{background:linear-gradient(155deg,#e7e3a5,#7dcfc4);border:1px solid #e8f7cf88;border-radius:50%;color:#173543;box-shadow:0 0 18px #9cddc58c}
.icon-btn,.wallet button{background:#0b2738c9;border:1px solid #c4e7d253;box-shadow:inset 0 1px #ffffff33,0 5px 14px #051d2b55;border-radius:10px}
.menu-screen{grid-template-columns:minmax(340px,1.1fr) minmax(350px,.85fr);gap:clamp(20px,4vw,75px)}
.menu-copy{position:relative;padding:clamp(25px,3.6vw,46px);border-radius:28px;background:linear-gradient(115deg,#102f44e8,#153c4ca9 70%,#153a4a8a);border:1px solid #d8ecc177;box-shadow:0 25px 60px #061c2aa3,inset 0 1px #ffffff55;backdrop-filter:blur(10px)}
.menu-copy:before{content:'';position:absolute;inset:8px;border-radius:21px;border:1px solid #f0e0a228;pointer-events:none}
.eyebrow{color:#b2e7c4;letter-spacing:2.5px;text-shadow:0 2px 8px #081e27}
.menu-copy h1{color:#fff8e8;font-size:clamp(57px,6.5vw,110px);line-height:.88;margin:19px 0 22px;text-shadow:0 5px 12px #082132c9}.menu-copy h1 span{color:#ffd47a}
.menu-copy p{color:#eef3df;font-size:clamp(14px,1vw,17px);text-shadow:none;line-height:1.55}
.primary{color:#2a352f;background:linear-gradient(160deg,#fff1ab,#edb962);box-shadow:inset 0 2px #fff5ce,0 6px 0 #9d683b,0 13px 25px #071f2ca1;border:1px solid #fbe2a5}
.primary:hover{box-shadow:inset 0 2px #fff5ce,0 9px 0 #9d683b,0 18px 25px #071f2ca1}
.tiny-note{color:#cdebd7}
.mode-grid{gap:11px}.mode-card{min-height:105px;background:linear-gradient(135deg,#0d2a3fde,#24465bc9);border:1px solid #d9e5bb75;border-radius:17px;box-shadow:0 13px 23px #08233488,inset 0 1px #ffffff3d;backdrop-filter:blur(11px)}
.mode-card:hover{background:linear-gradient(140deg,#205367,#35645b);border-color:#fbda8e}.mode-card.active{border-color:#f7d58f;box-shadow:0 12px 24px #0823349c,inset 0 0 0 1px #f5dc9d73}
.mode-icon{color:#ffdb8d}.mode-name{color:#fff7e9}.mode-card small{color:#d5e9df}.mode-arrow{color:#abdfbf}
.menu-stats{color:#e5f3e4;text-shadow:0 2px 7px #081b27}.menu-stats b{color:#ffdc8e}
.hud-left,.hud-right,.hud-mid{background:linear-gradient(160deg,#102f42eb,#112d3fc9);border:1px solid #d8eadb86;box-shadow:0 10px 24px #0c2b38a6,inset 0 1px #ffffff4a;backdrop-filter:blur(12px)}
.hud-left,.hud-right{top:75px;border-radius:13px;padding:10px 13px}.hud-mid{border-color:#f6d382;background:linear-gradient(160deg,#173b49e8,#112c39e8)}.hud-mid span{color:#ffdf91}.hud-mid small{color:#afe9d2}
.health{background:#172d34;border:1px solid #050f19ad;height:11px}.health div{background:linear-gradient(180deg,#c0f685,#58bd6a 65%,#3c8d52)}.health.enemy div{background:linear-gradient(180deg,#ffba8e,#eb6e62 65%,#b0474b)}
.pause-btn,.ammo,.instruction{background:#0d2d40dd;border:1px solid #d5e8d17a;box-shadow:0 6px 17px #0c273b7a}.ammo.active{background:#685331e8;border-color:#ffdf8f;color:#ffe4a3}
.modal{background:linear-gradient(155deg,#174257,#0e283a 70%);border-color:#d4e5bb8f;box-shadow:0 30px 85px #061e31dc,inset 0 1px #ffffff55}.modal h2{color:#ffe09b}.item-card{background:#16394b;border-color:#cfe3c94d}.item-card.selected{background:#375145;border-color:#f3d280}
@media(max-width:850px){.menu-screen{grid-template-columns:1fr;gap:15px;padding:68px 18px 45px}.menu-copy{padding:20px;max-width:none}.menu-copy h1{font-size:clamp(56px,10vw,80px);margin:9px 0}.mode-grid{gap:7px;max-width:none}.mode-card{min-height:82px;padding:10px}.hud-left,.hud-right,.hud-mid{top:62px}}
@media(max-width:560px){.topbar{height:48px;padding:0 9px}.brand{font-size:17px}.menu-screen{padding:54px 12px 30px;align-content:start;gap:8px}.menu-copy{padding:13px 16px 15px;border-radius:18px}.menu-copy:before{inset:5px;border-radius:13px}.eyebrow{font-size:9px;letter-spacing:1.2px}.menu-copy h1{font-size:clamp(44px,11vw,58px);margin:8px 0}.menu-copy p{font-size:11px;line-height:1.35;margin:7px 0}.primary.big{font-size:16px;margin-top:8px;padding:8px 12px}.tiny-note{font-size:9px;margin-top:10px}.mode-grid{gap:5px}.mode-card{min-height:65px;padding:6px 9px;border-radius:11px}.mode-icon{font-size:15px;height:17px}.mode-name{font-size:14px}.mode-card small{font-size:9px}.hud-left,.hud-right{width:31%;padding:6px}.hud-mid{padding:5px}.game-info{top:112px}.instruction{bottom:8px}}