:root{--navy:#172640;--cream:#fff7e2;--gold:#ffc54b;--red:#b6414b;--sky:#759cdb}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--navy);font-family:'Trebuchet MS',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #df8532;outline-offset:4px}header{height:90px;padding:0 4%;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--navy)}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-weight:900;letter-spacing:1px;font-size:17px}.brand-mark{width:43px;height:43px;background:var(--red);border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy);border-radius:10px;display:grid;place-items:center;color:var(--cream);font-size:26px}.brand small{display:block;font-size:10px;letter-spacing:1.5px;margin-top:6px}.contact{font-weight:700;font-size:12px;color:inherit;text-decoration:none}main{padding:22px 3% 0;max-width:1800px;margin:auto}#game{height:calc(100svh - 256px);min-height:475px;max-height:810px;position:relative;overflow:hidden;border:3px solid var(--navy);border-radius:18px;background:var(--sky);isolation:isolate;touch-action:pan-y;outline:none}.hud{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;color:white;font-size:13px;font-weight:900;letter-spacing:1.3px;background:linear-gradient(#17264066,transparent)}.hud>div{display:flex;gap:28px;align-items:center}.score{color:var(--gold);white-space:nowrap}.world{position:absolute;inset:0 auto 0 0;width:3600px;will-change:transform}.scenery{position:absolute;inset:0;background:url('assets/cities.webp') center bottom/100% 100% no-repeat}.chapter-card{position:absolute;top:72px;left:30px;width:350px;background:var(--cream);border:3px solid var(--navy);border-radius:12px;padding:20px 23px;box-shadow:6px 6px 0 #172640;z-index:3}.date{font-weight:900;font-size:12px;letter-spacing:1.2px;color:var(--red)}h1{font-size:32px;letter-spacing:-1.3px;line-height:1.1;margin:12px 0}h1 em{font-style:normal;color:var(--red)}.role{font-size:16px;line-height:1.4;margin:0}.achievement{margin:17px 0 13px;padding-top:13px;border-top:2px dashed #17264033;display:flex;gap:9px;align-items:flex-start}.achievement>span{color:#ae6b12;font-size:21px}.achievement p{font-size:14px;line-height:1.5;margin:0;font-weight:700}#detailsButton{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:4px 0;font-size:13px;font-weight:700;color:var(--red)}#detailsButton span{font-size:20px}.game-bottom{position:absolute;bottom:13px;left:22px;right:22px;display:flex;justify-content:space-between;gap:14px;z-index:3;color:var(--cream);text-shadow:1px 2px var(--navy);font-weight:900;letter-spacing:1px;font-size:12px;pointer-events:none}#player{position:absolute;width:92px;height:110px;bottom:16%;left:0;will-change:transform;z-index:2;filter:drop-shadow(0 4px 0 #17264033)}.sprite{width:100%;height:100%;background:url('assets/walker-alternating.png') 0 0/400% 100% no-repeat}.moving .sprite{animation:walk .56s steps(4) infinite}.reverse .sprite{transform:scaleX(-1)}@keyframes walk{to{background-position:133.333% 0}}.coin{position:absolute;bottom:calc(16% + 116px);width:27px;height:33px;border:3px solid #754a17;border-radius:50%;background:var(--gold);box-shadow:inset 3px 0 #ffed9d,3px 3px #17264033;display:grid;place-items:center;font-weight:900;font-size:17px;color:#a86919;transition:opacity .15s,translate .2s}.coin.collected{opacity:0;translate:0 -35px}.checkpoint{position:absolute;bottom:16%;width:5px;height:150px;background:var(--navy);border-radius:3px}.checkpoint span{position:absolute;top:0;left:5px;border:3px solid var(--navy);border-left:0;border-radius:0 5px 5px 0;background:var(--red);padding:9px 16px;color:var(--cream);font-weight:900;white-space:nowrap;font-size:14px}.checkpoint.passed span{background:#275d53}.checkpoint-toast{position:absolute;top:75px;right:30px;background:var(--gold);border:3px solid var(--navy);box-shadow:4px 4px var(--navy);border-radius:7px;font-weight:900;font-size:14px;padding:10px 14px;opacity:0;transform:translateY(-12px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:4}.checkpoint-toast.show{opacity:1;transform:none}.control-bar{height:76px;display:flex;justify-content:space-between;align-items:center;gap:10px}.pad{display:flex;gap:9px}.pad button,#next{min-height:43px;border:2px solid var(--navy);border-radius:7px;background:var(--cream);box-shadow:0 3px var(--navy);font-weight:900;touch-action:none;user-select:none}.pad button{min-width:46px;font-size:22px;padding:3px 13px}.pad button span{font-size:11px;vertical-align:middle}.pad button:active,#next:active{box-shadow:none;translate:0 3px}#next{padding:10px 18px;background:var(--red);color:var(--cream);font-size:12px;letter-spacing:.7px;display:flex;gap:24px;align-items:center}.levels{display:flex;gap:12px;padding:0 0 20px;justify-content:space-between}.levels button{flex:1;display:flex;align-items:center;gap:12px;background:none;border:0;border-top:3px solid #17264022;padding:13px 8px 0;text-align:left}.levels b{font-size:20px;color:#17264055}.levels span{font-size:14px;font-weight:900}.levels small{display:block;font-size:10px;letter-spacing:.6px;margin-top:5px;font-weight:400}.levels button.active{border-color:var(--red)}.levels button.active b{color:var(--red)}.levels button.passed{border-color:#275d53}dialog{background:var(--cream);color:var(--navy);width:min(650px,calc(100% - 30px));max-height:85svh;border:3px solid var(--navy);border-radius:15px;padding:35px;box-shadow:8px 8px var(--navy)}dialog::backdrop{background:#172640aa}dialog h2{font-size:28px;line-height:1.15}dialog p,dialog li{font-size:16px;line-height:1.7}dialog h3{font-size:17px}dialog ul{padding-left:20px}#closeDetails{position:absolute;top:8px;right:12px;border:0;background:none;font-size:28px}.card-enter{animation:reveal .2s ease}@keyframes reveal{from{opacity:.4;translate:0 5px}to{opacity:1;translate:none}}
@media(max-width:700px){header{height:76px;padding:0 5%}.brand{font-size:14px}.brand small{font-size:8px;letter-spacing:.4px;max-width:210px}.brand-mark{width:35px;height:35px;font-size:23px}.contact{font-size:10px;max-width:65px;line-height:1.5}main{padding:12px 12px 0}#game{height:calc(100svh - 250px);min-height:525px;border-radius:12px}.hud{padding:14px 13px;font-size:10px;letter-spacing:.4px}.hud>div{gap:12px}.chapter-card{top:53px;left:16px;width:min(310px,calc(100% - 36px));padding:15px 18px;box-shadow:4px 4px var(--navy)}h1{font-size:28px;margin:8px 0}.role{font-size:14px}.date{font-size:11px}.achievement{margin:11px 0 7px;padding-top:10px}.achievement p{font-size:13px}#player{width:77px;height:92px}.checkpoint{height:114px}.checkpoint span{font-size:12px;padding:7px 10px}.coin{width:24px;height:29px;bottom:calc(16% + 96px)}.controls-hint{display:none}.game-bottom{left:14px;right:14px;font-size:10px;bottom:14px}.checkpoint-toast{top:auto;bottom:37%;right:15px;font-size:12px;padding:8px}.control-bar{height:73px}.pad{gap:6px}.pad button{min-width:40px;padding:4px 10px}.pad button span{display:none}#next{font-size:10px;gap:12px;padding:10px 12px;max-width:190px}.levels{gap:4px}.levels button{padding:9px 0 0;gap:5px;display:block}.levels b{font-size:13px;display:block;margin-bottom:5px}.levels span{font-size:11px}.levels small{font-size:8px;letter-spacing:0}.world{width:3600px}dialog{padding:32px 22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.brand-mark{background:none;border:0;box-shadow:none;width:59px;height:59px;border-radius:0;transform:rotate(-7deg);transition:transform .2s}.brand:hover .brand-mark{transform:rotate(5deg) translateY(-2px)}.brand-mark svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 3px 0 #17264033)}.score{border:1px solid #fff5;background:#172640aa;border-radius:7px;padding:7px 10px;font:inherit;cursor:pointer}.coin{bottom:calc(16% + 42px);padding:0;width:35px;height:39px;font-size:18px;cursor:pointer;z-index:2;animation:coinFloat 1.4s ease-in-out infinite}.coin.collected{opacity:.4;translate:none;background:#fff7e2;animation:none;box-shadow:none;color:#275d53;border-color:#275d53}.coin:focus-visible{outline:3px solid white;outline-offset:5px}.coin:hover{filter:brightness(1.15)}@keyframes coinFloat{50%{translate:0 -6px}}#discovery{width:min(440px,calc(100% - 32px));text-align:center;padding:28px 30px 30px;overflow:visible;box-shadow:7px 7px var(--navy);animation:discoveryPop .24s ease-out}#discovery::backdrop{background:#17264055}.discovery-icon{width:55px;height:55px;background:var(--gold);border:3px solid var(--navy);border-radius:50%;box-shadow:3px 3px var(--navy);margin:-56px auto 22px;display:grid;place-items:center;font-size:27px;color:#935316}#discovery h2{font-size:26px;margin:13px 0;line-height:1.15}#discovery p{font-size:16px;line-height:1.65;margin:0 0 23px}#continueJourney{background:var(--red);color:var(--cream);border:2px solid var(--navy);border-radius:7px;box-shadow:0 3px var(--navy);padding:12px 18px;font-weight:900;font-size:14px;width:100%}@keyframes discoveryPop{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}@media(max-width:700px){.brand-mark{width:45px;height:45px;flex-shrink:0}.brand{gap:10px}.coin{bottom:calc(16% + 36px);width:31px;height:35px}.score{padding:5px 7px}#discovery{padding:26px 22px}.controls-hint{display:none}}
.contact-actions{display:flex;align-items:center;gap:20px}#messageButton{border:2px solid var(--navy);background:var(--gold);box-shadow:2px 3px var(--navy);border-radius:7px;padding:10px 13px;font-size:12px;font-weight:900}#soundButton{background:#172640aa;color:var(--cream);border:1px solid #fff5;border-radius:6px;padding:7px 9px;font:inherit;font-size:12px;cursor:pointer}.coin{bottom:calc(16% + var(--coin-height,110px));animation:none}.coin-label{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:165px;text-align:center;padding:5px 8px;background:var(--cream);border:2px solid var(--navy);border-radius:5px;box-shadow:2px 2px var(--navy);color:var(--navy);font-size:12px;line-height:1.2;font-weight:900;pointer-events:none}.coin.collected .coin-label{box-shadow:none}#messageDialog{width:min(510px,calc(100% - 28px));padding:28px 30px}#closeMessage{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px}#messageDialog h2{margin:10px 0 20px}#messageForm label{display:block;font-size:14px;font-weight:700;margin:12px 0}#messageForm input,#messageForm textarea{display:block;width:100%;border:2px solid #17264088;border-radius:6px;padding:10px;background:white;color:var(--navy);font:16px 'Trebuchet MS',Arial;margin-top:6px}#messageForm textarea{resize:vertical;min-height:100px}.honey{display:none!important}#messageForm .form-note{font-size:12px;line-height:1.4;color:#495568;margin:12px 0}#sendMessage{width:100%;border:2px solid var(--navy);border-radius:6px;background:var(--red);color:var(--cream);font-weight:900;padding:12px;box-shadow:0 3px var(--navy)}#sendMessage:disabled{opacity:.6;cursor:wait}#messageStatus{font-size:14px!important;line-height:1.5!important}.email-fallback{font-size:12px;color:var(--navy);overflow-wrap:anywhere}@media(max-width:700px){header{height:auto;min-height:105px;flex-wrap:wrap;gap:12px;padding:13px 5%}.contact-actions{width:100%;justify-content:space-between;gap:12px}.contact-actions .contact{max-width:none}#messageButton{font-size:11px;padding:7px 11px}#soundButton{font-size:10px;padding:4px 6px}.hud>div{gap:7px}.hud>span{font-size:9px}.coin{bottom:calc(16% + var(--coin-height,110px))}.coin-label{font-size:11px;max-width:140px}.chapter-card{pointer-events:none}.chapter-card button{pointer-events:auto}#messageDialog{padding:25px 20px}#game{min-height:560px}}
@media(max-width:700px){.chapter-card{padding:12px 15px;width:min(280px,calc(100% - 36px))}.chapter-card h1{font-size:24px;margin:6px 0}.chapter-card .role{font-size:13px;line-height:1.35}.chapter-card .achievement{display:none}.chapter-card #detailsButton{margin-top:5px;font-size:12px}.chapter-card .date{font-size:10px}}

.cv-link{white-space:nowrap;font-weight:900;border-bottom:2px solid var(--red);padding:8px 0}.contact-actions{flex-wrap:wrap}@media(max-width:700px){.contact-actions{gap:10px}.contact-actions .contact{font-size:10px}.cv-link{flex-shrink:0}}
/* Keep opposing arm/leg contact poses synchronized instead of replaying the same leg phase. */
.moving .sprite{background:none;animation:none;position:relative}
.moving .sprite::before,.moving .sprite::after{content:"";position:absolute;inset:0;background-image:url('assets/walker-alternating.png');background-repeat:no-repeat;background-size:400% 100%}
.moving .sprite::before{clip-path:inset(0 0 30% 0);animation:upperStride .64s steps(1,end) infinite}
.moving .sprite::after{clip-path:inset(70% 0 0 0);animation:lowerStride .64s steps(1,end) infinite}
@keyframes upperStride{0%,100%{background-position:0% 0}25%{background-position:33.333333% 0}50%{background-position:66.666667% 0}75%{background-position:100% 0}}
@keyframes lowerStride{0%,25%,100%{background-position:33.333333% 0}50%,75%{background-position:66.666667% 0}}