@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#101d30;--deep:#0a1321;--panel:#192a40;--cream:#fff6e3;--gold:#ffb02e;--muted:#a8b8c9;--line:#32435a;--accent:var(--gold)}
*{box-sizing:border-box}body{margin:0;background:var(--deep);color:var(--cream);font-family:Barlow,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid #57e1f2;outline-offset:4px}button{touch-action:manipulation}a{color:inherit}button:hover{filter:brightness(1.12)}[hidden]{display:none!important}.topbar{max-width:1400px;margin:auto;min-height:76px;padding:16px 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-size:31px;letter-spacing:-1px;text-decoration:none;transform:skew(-7deg)}.brand span{color:var(--gold);font-size:20px}.edition{font-size:12px;letter-spacing:3px;font-weight:700}.edition i{color:var(--gold);padding:0 15px}.top-actions{display:flex;gap:10px}.icon-button{width:40px;height:40px;background:transparent;border:1px solid var(--line);border-radius:50%;font-size:22px}.topbar .icon-button{font-size:20px}#shell{max-width:1328px;margin:28px auto 0;padding:0 28px}.title-scene{height:400px;position:relative;overflow:hidden;background:#437f9c url('assets/environments.png') no-repeat;background-size:100% 300%;background-position:center top;border-radius:8px;border:1px solid #78939a}.scene-tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,23,37,.94),rgba(10,23,37,.48) 45%,transparent 75%)}.title-copy{position:relative;z-index:2;padding:31px 40px;width:60%}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--accent)}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:100px;line-height:.82;margin:15px 0 15px;letter-spacing:-1px;font-weight:900;transform:skew(-5deg);transform-origin:left}h1 span{color:var(--gold)}.title-copy p{font-size:16px;margin:0 0 21px}.primary{background:var(--gold);border:0;color:var(--ink);font-weight:900;font-size:17px;letter-spacing:1px;padding:16px 28px;box-shadow:0 5px 0 #bc7220;border-radius:4px}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #bc7220}.primary::after{content:' →';padding-left:15px}.micro{display:block;font-size:12px;margin-top:14px;color:var(--muted)}.hero-portrait{position:absolute;width:228px;height:330px;bottom:28px;right:11%;background:transparent url('assets/porky-portrait-transparent.png') center/contain no-repeat;filter:drop-shadow(10px 15px 0 #10243a55);z-index:1;transform:rotate(-4deg)}.scene-caption{position:absolute;right:24px;bottom:24px;text-align:right;text-shadow:0 2px 4px #000}.scene-caption span{display:block;font-size:12px;letter-spacing:2px;margin-bottom:7px}.scene-caption b{font-size:16px}.mission-panel{padding:25px 0 0}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-title h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:24px;margin:0;letter-spacing:1px}.section-title>span{font-size:12px;color:var(--gold);letter-spacing:1px;font-weight:700}.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mission-card{display:grid;grid-template-columns:54px 1fr 25px;gap:12px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:16px;position:relative;overflow:hidden}.mission-card.selected{border-color:var(--accent);box-shadow:inset 0 3px var(--accent)}.mission-card.locked{opacity:.55}.mission-icon,.item-icon{background-image:url('assets/items.png');background-size:400% 200%;display:inline-block;width:52px;height:52px;background-repeat:no-repeat}.mission-card .num{font-size:11px;letter-spacing:2px;color:var(--muted);display:block}.mission-card strong{display:block;font-size:20px;font-family:'Barlow Condensed',Impact,sans-serif;margin:3px 0}.mission-card small{font-size:12px;color:var(--muted)}.mission-card .arrow{color:var(--accent);font-size:22px;align-self:center}.home-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:20px}.home-bottom>span{font-size:12px;color:var(--muted)}.text-button{background:none;border:none;font-size:12px;font-weight:800;letter-spacing:1px;padding:5px 0;text-align:left}.text-button span{color:var(--gold);margin-left:8px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1272px;margin:8px auto 20px;border-top:1px solid var(--line);padding-top:14px}footer>span{font-size:10px;letter-spacing:1px;color:var(--muted)}#challenge-banner{padding:8px 10px;background:#0b253e;border-left:3px solid var(--gold);font-size:14px;margin-bottom:12px}.game-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 16px}.game-header h2{font:800 30px 'Barlow Condensed',Impact,sans-serif;margin:3px 0}.hud{display:flex;justify-content:space-between;gap:12px;background:var(--panel);padding:12px 20px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0}.hud>div{display:flex;flex-direction:column;gap:3px}.hud span{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted)}.hud b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}#health{color:#ff7879;white-space:nowrap}#score{color:var(--gold)}#timer.urgent{color:#ff7676;animation:blink .5s alternate infinite}#arena{position:relative;height:clamp(300px,48vh,540px);overflow:hidden;background:#436d94}#game,#game canvas{width:100%;height:100%;display:block}#toast{position:absolute;top:15px;left:50%;transform:translateX(-50%);background:#101d30ed;border:1px solid var(--accent);border-radius:4px;padding:12px 20px;font-weight:700;font-size:16px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90%;text-align:center;width:max-content}#toast.visible{opacity:1}#tutorial{position:absolute;left:50%;top:25%;transform:translateX(-50%);text-align:center;pointer-events:none;background:#101d30e0;padding:12px 20px;border-radius:5px;border:1px solid #ffffff33}#tutorial b{display:block;color:var(--gold);font-size:16px}#tutorial span{display:block;font-size:13px;margin-top:5px}#combo{position:absolute;right:15px;top:18px;font:900 25px 'Barlow Condensed',Impact,sans-serif;color:var(--gold);text-shadow:2px 2px #13243c;pointer-events:none}.route{display:flex;align-items:center;gap:18px;padding:14px 18px;background:var(--panel);font-size:11px;letter-spacing:1px;font-weight:800}.route-track{height:5px;position:relative;flex:1;background:#465165;border-radius:5px}.route-track i{height:100%;width:0;display:block;background:var(--accent)}.stop{position:absolute;top:-3px;width:11px;height:11px;border-radius:50%;background:#607085;border:2px solid var(--panel)}.stop-1{left:28%}.stop-2{left:57%}.stop-3{left:86%}.stop.done{background:var(--gold)}.controls{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:15px 0 8px;user-select:none}.controls button{display:grid;grid-template-columns:40px 1fr;align-items:center;column-gap:12px;min-width:190px;padding:10px 22px;border-radius:8px;background:var(--gold);color:var(--ink);border:0;border-bottom:5px solid #a56420;touch-action:none}.controls button:last-child{background:#62d9ee;border-color:#277b96}.controls button span{grid-row:span 2;font-size:35px}.controls button b{font-size:17px;letter-spacing:1px}.controls button small{font-size:10px}.controls button:active,.controls button.pressed{transform:translateY(3px);border-bottom-width:2px}.controls button.cooldown{filter:saturate(.3)}.control-hint{text-align:center}.control-hint b{font-size:12px;letter-spacing:1px;color:var(--accent)}.control-hint span{display:block;color:var(--muted);font-size:12px;margin-top:4px}dialog{border:1px solid #546377;border-radius:12px;background:var(--ink);color:var(--cream);padding:32px;width:min(92vw,540px);max-height:88dvh;overflow:auto;box-shadow:0 24px 120px #000a}dialog::backdrop{background:#050d1be0;backdrop-filter:blur(6px)}.modal-close{position:absolute;right:12px;top:12px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:none;font-size:22px}dialog h2{font:900 44px/.95 'Barlow Condensed',Impact,sans-serif;margin:15px 0;color:var(--gold)}dialog h3{font:800 24px 'Barlow Condensed',Impact,sans-serif}dialog p{color:#ced7e0;line-height:1.5;font-size:16px}dialog a{color:#69def0}dialog .eyebrow{font-size:12px}dialog .actions{display:flex;flex-direction:column;gap:13px;margin-top:25px}dialog .secondary{padding:13px;border:1px solid #52657d;background:#22334b;border-radius:4px;font-weight:700}dialog .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}dialog .stats>div{padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:5px}dialog .stats span{display:block;font-size:11px;color:var(--muted);letter-spacing:1px}dialog .stats b{font-size:29px;display:block;color:var(--gold)}.medals{font-size:36px;color:var(--gold);letter-spacing:8px}.instructions{display:grid;gap:12px;margin:20px 0}.instructions>div{background:var(--panel);padding:14px;border-radius:4px;font-size:15px;line-height:1.4}.instructions b{color:var(--gold)}.fact{border-left:3px solid var(--gold);padding-left:16px;margin-top:25px}.fact p,.fact a{font-size:14px}.outfit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.outfit{background:var(--panel);padding:10px;border:1px solid var(--line);border-radius:5px;text-align:center}.outfit .portrait{width:100%;aspect-ratio:80/116;background:transparent url('assets/porky-portrait-transparent.png') center/contain no-repeat}.outfit:nth-child(2) .portrait{filter:hue-rotate(150deg)}.outfit:nth-child(3) .portrait{filter:sepia(.65) saturate(2)}.outfit b{font-size:14px;display:block}.outfit small{font-size:11px;color:var(--muted)}.outfit.chosen{border-color:var(--gold)}.outfit:disabled{cursor:not-allowed}body.playing .topbar{min-height:58px;padding-block:8px}body.playing #shell{margin-top:18px;max-width:1150px}body.playing footer{display:none}#share-copy{width:100%;padding:10px;background:var(--deep);border:1px solid var(--line);color:var(--cream)}@keyframes blink{to{opacity:.5}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:1500px){#shell{margin-top:44px}.title-scene{height:440px}.title-copy{padding-top:42px}h1{font-size:110px}.hero-portrait{width:255px;height:370px}}
@media(max-width:700px){.topbar{padding:12px 18px;min-height:60px}.brand{font-size:26px}.brand span{font-size:17px}.edition{font-size:10px;letter-spacing:1px}.edition i{padding:0 5px}.icon-button{width:34px;height:34px}.top-actions{gap:7px}#shell{padding:0 14px;margin-top:14px}.title-scene{height:370px;background-size:auto 300%;background-position:45% 0}.title-copy{padding:25px 20px;width:80%}.title-copy .eyebrow{font-size:10px;letter-spacing:1.4px}h1{font-size:82px}.title-copy p{font-size:14px}.title-copy .primary{font-size:14px;padding:14px 19px}.hero-portrait{right:-2px;bottom:33px;width:155px;height:225px}.scene-tint{background:linear-gradient(90deg,#102134e8,#10213477 65%,#10213422)}.scene-caption{bottom:16px;right:12px}.scene-caption b{display:none}.scene-caption span{font-size:10px}.mission-panel{padding-top:22px}.missions{grid-template-columns:1fr;gap:8px}.mission-card{padding:12px 14px;grid-template-columns:44px 1fr 25px;gap:12px}.mission-icon{width:43px;height:43px}.mission-card strong{font-size:20px}.mission-card .num{font-size:10px}.mission-card small{font-size:11px}.home-bottom{align-items:start;gap:15px}.home-bottom>span{text-align:right;max-width:170px;line-height:1.5}footer{margin:8px 16px 22px;flex-direction:column;align-items:start;gap:8px}.section-title h2{font-size:22px}.section-title>span{font-size:10px}.game-header{padding-bottom:10px}.game-header h2{font-size:25px}.game-header .eyebrow{font-size:10px}.hud{padding:10px 12px;gap:7px}.hud b{font-size:18px}.hud span{font-size:9px}.controls{gap:12px;padding-top:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.controls button{min-width:0;width:132px;padding:11px 13px;column-gap:5px;grid-template-columns:28px 1fr}.controls button span{font-size:29px}.controls button b{font-size:14px}.controls button small{display:none}.control-hint{flex:1}.control-hint b{font-size:9px}.control-hint span{font-size:10px;line-height:1.3}body.playing #shell{margin-top:12px;padding:0 10px}body.playing{height:100dvh;overflow:hidden}body.playing #shell{height:calc(100dvh - 73px)}#play-screen{height:100%;display:flex;flex-direction:column}#arena{min-height:180px;flex:1;height:auto}.route{padding:12px 10px;gap:10px}.route span{font-size:9px}dialog{padding:27px 23px}dialog h2{font-size:39px}#tutorial{width:80%;padding:10px;top:18%}#tutorial b{font-size:14px}#tutorial span{font-size:12px}.outfit-list{gap:6px}.outfit{padding:5px}#combo{font-size:21px;top:10px}#toast{font-size:13px;padding:9px 12px}}
@media(max-height:550px) and (orientation:landscape){body.playing{height:100dvh;overflow:hidden}body.playing .topbar{display:none}body.playing #shell{margin:0;padding:0;max-width:none}#play-screen{height:100dvh}.game-header{position:absolute;left:12px;top:8px;z-index:4;padding:0}.game-header .eyebrow{display:none}.game-header h2{font-size:18px}.game-header .icon-button{position:fixed;right:12px;top:10px;background:#101d30c0}.hud{position:absolute;top:40px;left:12px;z-index:3;background:#101d30dd;width:350px;padding:7px 12px;border-radius:5px}.hud b{font-size:16px}.hud span{font-size:8px}#arena{height:100dvh}.route{position:absolute;bottom:8px;left:25%;width:50%;z-index:3;background:#101d30cc;border-radius:4px;padding:8px}.controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));z-index:3;padding:0;pointer-events:none}.controls button{pointer-events:auto;width:116px;min-width:0;height:48px;padding:5px 10px;grid-template-columns:24px 1fr;column-gap:5px;opacity:.68;border-bottom-width:3px}.controls button span{font-size:27px}.controls button b{font-size:14px;letter-spacing:.4px}.controls button small{display:none}.controls button:active,.controls button.pressed{opacity:.86}.control-hint{display:none}#toast{top:95px}#tutorial{top:30%}}

.rank-form{display:grid;gap:12px;margin:24px 0;padding:18px;border:1px solid var(--line);border-radius:8px}.rank-form label,dialog>label{font-weight:700}.rank-form input,#rank-stage{width:100%;padding:12px;font:inherit;font-size:16px;color:var(--cream);background:var(--deep);border:1px solid var(--line);border-radius:4px}.rank-form small{font-size:13px;color:var(--muted);line-height:1.4}.rank-form p{margin:0;font-size:14px}.ranking-list{padding-left:28px}.ranking-list li{padding:12px 4px;border-bottom:1px solid var(--line)}.ranking-list li span{display:inline-block;width:72%;overflow-wrap:anywhere}.ranking-list b{color:var(--gold)}#rank-stage{margin:10px 0 18px}.home-bottom{flex-wrap:wrap}

.mission-icon.food-icon{background-image:url('assets/soup-ingredients.png');background-size:300% 200%}

.mission-icon.project-icon{background-image:url('assets/projects-atlas.png');background-size:300% 200%}

.intro-icon{background-image:url(assets/intro-atlas.png);background-size:300% 200%}