@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600;700;800&display=swap");:root{--ink:#101820;--navy:#062846;--blue:#1679c9;--orange:#f87912;--yellow:#ffd22a;--paper:#fff4dc;--muted:#bed0df}*{box-sizing:border-box}body,html{margin:0;background:#062846;color:var(--paper);font-family:Inter,system-ui,sans-serif}.game-shell,body{min-height:100vh}.game-shell{max-width:620px;margin:auto;padding:18px 14px 112px;background:linear-gradient(#0e6fb6,#0a3c69 35%,#05233c);position:relative;overflow:hidden}.game-shell:before{content:"";position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(125deg,transparent 0 16px,#fff 17px 18px,transparent 19px 42px);pointer-events:none}.brand,.power,.topbar{display:flex;align-items:center}.topbar{justify-content:space-between;position:relative;z-index:1}.brand{gap:10px}.brand span{display:grid;place-items:center;width:38px;height:38px;border:3px solid var(--ink);border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--yellow);font-weight:900}.brand b{font:italic 24px Anton,sans-serif;letter-spacing:.08em;text-shadow:3px 3px var(--ink)}.power{gap:8px}.power small{font-size:8px;letter-spacing:.16em;color:var(--muted)}.power strong{font:28px Anton;color:var(--yellow);text-shadow:2px 2px var(--ink)}.power i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#20362a;color:var(--yellow);font-style:normal;font-weight:900}.hero{display:flex;position:relative;z-index:1;min-height:430px;padding:44px 16px 25px;border-bottom:3px solid var(--yellow);background:radial-gradient(circle at 70% 50%,#ffd22a55,transparent 35%)}.hero-copy{flex:1 1}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--yellow);font-weight:800}.hero h1{font:italic 54px/.9 Anton,sans-serif;letter-spacing:.03em;margin:14px 0;text-shadow:4px 4px var(--ink);transform:skew(-5deg)}.hero h1 em{color:var(--yellow);font-style:normal}.hero p{max-width:240px;color:var(--muted);font-size:13px;line-height:1.5}.hero button{margin-top:20px;padding:13px 16px;border:3px solid var(--ink);background:var(--orange);box-shadow:4px 4px var(--yellow);font:16px Anton;color:var(--ink);cursor:pointer}.hero button span{margin-left:18px}.avatar-placeholder{width:160px;align-self:center;text-align:center;position:relative}.burst{position:absolute;inset:10px;color:var(--yellow);font-size:100px;filter:drop-shadow(0 0 15px var(--yellow));opacity:.7}.silhouette{position:relative;display:grid;place-items:center;width:120px;height:210px;margin:auto;background:#101820;border:5px solid var(--ink);clip-path:polygon(50% 0,75% 14%,82% 37%,100% 58%,80% 67%,76% 100%,24% 100%,20% 67%,0 58%,18% 37%,25% 14%);font:70px Anton;color:var(--yellow);text-shadow:3px 3px var(--ink)}.avatar-placeholder small{display:block;margin-top:10px;font-size:10px;letter-spacing:.14em;color:var(--yellow);font-weight:900}.cards,.mission{position:relative;z-index:1}.mission{display:flex;justify-content:space-between;gap:14px;padding:20px 0;border-bottom:2px solid #477da5}.cards h3,.mission h2{font:25px Anton;margin:8px 0;color:var(--paper);text-shadow:2px 2px var(--ink);letter-spacing:.04em}.cards p,.mission p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.mission-badge{display:grid;place-items:center;flex:0 0 46px;height:46px;background:var(--orange);border:3px solid var(--ink);font:25px Anton;color:var(--ink);box-shadow:3px 3px var(--yellow)}.cards{display:grid;gap:10px;margin-top:14px}.cards article{display:flex;align-items:center;gap:13px;padding:15px;background:#0b3b63;border:2px solid #4c82aa;box-shadow:3px 3px var(--ink)}.cards article>div{flex:1 1}.cards h3{font-size:18px;margin:5px 0}.cards article>b{font-size:24px;color:var(--yellow)}.card-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;background:var(--orange);border:3px solid var(--ink);color:var(--ink);font-size:20px}.card-icon.blue{background:#53b8ed}.bottom-nav{position:fixed;z-index:5;bottom:10px;left:50%;transform:translateX(-50%);width:min(590px,calc(100% - 20px));display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;background:#06223bf2;border:3px solid var(--ink);box-shadow:4px 4px var(--yellow)}.bottom-nav button{padding:8px 2px;background:#0c426c;border:1px solid #6995b8;color:var(--paper);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}.bottom-nav button span{color:var(--yellow);font-size:20px}.bottom-nav button b{font:12px Anton}.bottom-nav button.active{background:var(--orange);color:var(--ink)}.bottom-nav button.active span{color:var(--ink)}@media(max-width:480px){.hero{min-height:400px;padding-top:36px}.hero h1{font-size:45px}.avatar-placeholder{width:125px}.silhouette{width:100px;height:175px}.brand b{font-size:20px}.power small{display:none}.bottom-nav button b{font-size:10px}}