body{color:#ffffffde;background-color:#000;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}#app{justify-content:center;align-items:center;width:100%;height:100vh;display:flex;overflow:hidden}.game-container{background:radial-gradient(ellipse at center, transparent 50%, #140a0540 100%), url(/assets/ui/wood-planks.svg) 0 0 / calc(var(--px) * 32) repeat, var(--ui-backdrop);width:100vw;height:100dvh;image-rendering:pixelated;flex-direction:column;display:flex;position:relative;overflow:hidden}#game-container canvas{box-shadow:var(--pixel-outline)}.game-main{flex:1;min-height:0;display:flex}#game-container{flex:1;min-width:0;min-height:0}:root{--px:2px;--ui-outline:#2b1a12;--ui-wood-dark:#5c3620;--ui-wood:#8a5530;--ui-wood-light:#b57843;--ui-parchment:#f3e6c4;--ui-parchment-shade:#dcc796;--ui-ink:#3b2418;--ui-grass-dark:#2f6b34;--ui-grass:#4f9a4a;--ui-grass-light:#78c35f;--ui-zone-pink:#ff5aa8;--ui-backdrop:#1f140d}.game-container{--font-ui:var(--font-pixel), "Courier New", monospace}:root{--pixel-outline:0 calc(var(--px) * -2) 0 0 var(--ui-outline), 0 calc(var(--px) * 2) 0 0 var(--ui-outline), calc(var(--px) * -2) 0 0 0 var(--ui-outline), calc(var(--px) * 2) 0 0 0 var(--ui-outline)}.project-overlay{z-index:10;box-sizing:border-box;width:min(640px,90%);max-height:80%;font-family:var(--font-ui);color:var(--ui-ink);background:var(--ui-parchment);border:calc(var(--px) * 4) solid var(--ui-wood);box-shadow:var(--pixel-outline), inset 0 0 0 var(--px) var(--ui-wood-dark),  inset calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--ui-parchment-shade),  calc(var(--px) * 4) calc(var(--px) * 4) 0 calc(var(--px) * 2) #140a0559;padding:36px 32px 20px;line-height:1.5;animation:.2s steps(4,end) popup-appear;position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}.project-overlay h2{color:var(--ui-parchment);text-shadow:var(--px) var(--px) 0 var(--ui-outline);background:var(--ui-wood);box-shadow:var(--pixel-outline), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 0 var(--ui-wood-dark),  inset var(--px) var(--px) 0 0 var(--ui-wood-light);margin:0 0 16px;padding:6px 14px;font-size:22px;font-weight:700;display:inline-block}.project-overlay p{margin:0;font-size:16px}.project-overlay a,.portfolio-footer-container a{color:#fff;text-shadow:var(--px) var(--px) 0 var(--ui-grass-dark);background:var(--ui-grass);box-shadow:var(--pixel-outline), inset calc(var(--px) * -2) calc(var(--px) * -2) 0 0 var(--ui-grass-dark), inset var(--px) var(--px) 0 0 var(--ui-grass-light);padding:8px 16px 10px;font-size:16px;font-weight:600;text-decoration:none;display:inline-block}.project-overlay a{margin-top:20px}.project-overlay a:hover,.portfolio-footer-container a:hover{background:var(--ui-grass-light)}.project-overlay a:active,.portfolio-footer-container a:active{transform:translate(var(--px), var(--px));box-shadow:var(--pixel-outline), inset var(--px) var(--px) 0 0 var(--ui-grass-dark)}.project-overlay a:focus-visible,.portfolio-footer-container a:focus-visible{outline:calc(var(--px) * 2) dashed var(--ui-zone-pink);outline-offset:calc(var(--px) * 4)}.portfolio-header-container,.portfolio-footer-container{font-family:var(--font-ui);background:var(--ui-wood);justify-content:center;align-items:center;padding:10px 16px;display:flex}.portfolio-header-container{box-shadow:inset 0 var(--px) 0 0 var(--ui-wood-light),  inset 0 calc(var(--px) * -2) 0 0 var(--ui-wood-dark),  0 calc(var(--px) * 2) 0 0 var(--ui-outline);z-index:1;position:relative}.portfolio-footer-container{box-shadow:inset 0 calc(var(--px) * 2) 0 0 var(--ui-wood-light), inset 0 calc(var(--px) * -1) 0 0 var(--ui-wood-dark), 0 calc(var(--px) * -2) 0 0 var(--ui-outline);z-index:1;position:relative}.portfolio-header-container h1{color:var(--ui-parchment);text-shadow:var(--px) var(--px) 0 var(--ui-outline), calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ui-wood-dark);text-align:center;margin:0;font-size:26px;font-weight:700}.volume-slider{cursor:pointer;align-items:center;gap:8px;font-size:18px;display:flex;position:absolute;top:50%;right:16px;transform:translateY(-50%)}.volume-slider input[type=range]{appearance:none;width:110px;height:calc(var(--px) * 4);background:var(--ui-wood-dark);box-shadow:0 0 0 var(--px) var(--ui-outline);cursor:pointer;margin:0}.volume-slider input[type=range]::-webkit-slider-thumb{appearance:none;width:calc(var(--px) * 6);height:calc(var(--px) * 10);background:var(--ui-parchment);box-shadow:0 0 0 var(--px) var(--ui-outline);border:none;border-radius:0}.volume-slider input[type=range]::-moz-range-thumb{width:calc(var(--px) * 6);height:calc(var(--px) * 10);background:var(--ui-parchment);box-shadow:0 0 0 var(--px) var(--ui-outline);border:none;border-radius:0}.volume-slider input[type=range]:focus-visible{outline:calc(var(--px) * 2) dashed var(--ui-zone-pink);outline-offset:calc(var(--px) * 3)}.portfolio-footer-container address{flex-wrap:wrap;justify-content:center;gap:16px;font-style:normal;display:flex}.portfolio-footer-container a{padding:6px 12px 8px;font-size:14px}.side-bar-container{box-sizing:border-box;font-family:var(--font-ui);color:var(--ui-ink);background:var(--ui-parchment);border:calc(var(--px) * 3) solid var(--ui-wood);box-shadow:var(--pixel-outline), inset 0 0 0 var(--px) var(--ui-wood-dark), inset calc(var(--px) * 3) calc(var(--px) * 3) 0 0 var(--ui-parchment-shade);scrollbar-color:var(--ui-wood) var(--ui-parchment-shade);flex-direction:column;flex:0 0 290px;gap:18px;margin:12px;padding:16px 18px;font-size:15px;line-height:1.4;display:flex;overflow-y:auto}.side-bar-container p{margin:0}.side-bar-container>*{flex-shrink:0}.sidebar-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.sidebar-heading h2{color:var(--ui-parchment);text-shadow:var(--px) var(--px) 0 var(--ui-outline);background:var(--ui-wood);box-shadow:var(--pixel-outline), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 0 var(--ui-wood-dark), inset var(--px) var(--px) 0 0 var(--ui-wood-light);margin:0;padding:4px 12px 6px;font-size:20px;font-weight:700}.sidebar-heading a{color:var(--ui-wood-dark);border-bottom:var(--px) dashed var(--ui-wood-light);font-size:13px;font-weight:600;text-decoration:none}.sidebar-heading a:hover{color:var(--ui-grass-dark);border-bottom-color:var(--ui-grass)}.sidebar-section-title{letter-spacing:1px;text-transform:uppercase;color:var(--ui-wood-dark);border-bottom:var(--px) dashed var(--ui-wood-light);margin:18px 0 10px;padding-bottom:4px;font-size:13px;font-weight:700}.gh-message{text-align:center;color:var(--ui-wood);padding:12px}.gh-hero{color:#fff;text-shadow:var(--px) var(--px) 0 var(--ui-grass-dark);background:var(--ui-grass);box-shadow:var(--pixel-outline), inset calc(var(--px) * -2) calc(var(--px) * -2) 0 0 var(--ui-grass-dark), inset var(--px) var(--px) 0 0 var(--ui-grass-light);flex-direction:column;align-items:center;padding:10px 8px 12px;display:flex}.gh-hero-value{font-size:40px;font-weight:700;line-height:1}.gh-hero-label{margin-top:4px;font-size:13px;font-weight:600}.gh-tiles{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;display:grid}.gh-tile{color:var(--ui-parchment);text-shadow:var(--px) var(--px) 0 var(--ui-outline);background:var(--ui-wood);box-shadow:var(--pixel-outline), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 0 var(--ui-wood-dark), inset var(--px) var(--px) 0 0 var(--ui-wood-light);flex-direction:column;align-items:center;padding:6px 4px 8px;display:flex}.gh-tile-value{font-size:22px;font-weight:700;line-height:1.1}.gh-tile-label{letter-spacing:.5px;text-transform:uppercase;font-size:11px}.gh-languages{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.gh-language-row{justify-content:space-between;margin-bottom:3px;font-size:13px;font-weight:600;display:flex}.gh-language-bar{height:calc(var(--px) * 4);background:var(--ui-parchment-shade);box-shadow:0 0 0 var(--px) var(--ui-wood-dark)}.gh-language-bar>div{background:var(--ui-grass);height:100%;box-shadow:inset 0 calc(var(--px) * -1) 0 0 var(--ui-grass-dark)}.gh-activity{gap:2px;display:grid}.gh-activity-week{grid-template-rows:repeat(7,1fr);gap:2px;display:grid}.gh-activity-day{aspect-ratio:1;background:var(--ui-parchment-shade)}.gh-activity-day[data-level="1"]{background:#b5d98c}.gh-activity-day[data-level="2"]{background:var(--ui-grass-light)}.gh-activity-day[data-level="3"]{background:var(--ui-grass)}.gh-activity-day[data-level="4"]{background:var(--ui-grass-dark)}.gh-activity-legend{color:var(--ui-wood);justify-content:flex-end;align-items:center;gap:3px;margin-top:6px;font-size:11px;display:flex}.gh-activity-legend .gh-activity-day{width:10px}.gh-activity-legend span{margin:0 3px}.skip-game{border-top:var(--px) dashed var(--ui-wood-light);text-align:center;flex-direction:column;gap:10px;padding-top:14px;font-size:13px;display:flex}.touch-note{color:var(--ui-wood-dark);background:var(--ui-parchment-shade);box-shadow:0 0 0 var(--px) var(--ui-wood-light);padding:6px 8px;font-weight:600}.skip-game-button{color:#fff;text-shadow:var(--px) var(--px) 0 #a8326c;background:var(--ui-zone-pink);cursor:pointer;box-shadow:var(--pixel-outline), inset calc(var(--px) * -2) calc(var(--px) * -2) 0 0 #c43d80, inset var(--px) var(--px) 0 0 #ff9cca;border:none;padding:8px 16px 10px;font-family:inherit;font-size:16px;font-weight:700}.skip-game-button:hover{background:#ff7dbb}.skip-game-button:active{transform:translate(var(--px), var(--px));box-shadow:var(--pixel-outline), inset var(--px) var(--px) 0 0 #c43d80}.skip-game-button:focus-visible,.project-item a:focus-visible,.sidebar-heading a:focus-visible{outline:calc(var(--px) * 2) dashed var(--ui-grass-dark);outline-offset:calc(var(--px) * 3)}.project-display{flex-direction:column;gap:14px;animation:.15s steps(3,end) dropdown-open;display:flex}.project-display .sidebar-section-title{margin:0}.project-item{box-shadow:0 0 0 var(--px) var(--ui-wood-light), calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--ui-parchment-shade);background:#fbf3dc;padding:10px 12px 12px}.project-item h4{color:var(--ui-wood-dark);margin:0 0 4px;font-size:16px}.project-item p{font-size:13px}.project-item-tech{flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;display:flex}.project-item-tech li{color:var(--ui-parchment);background:var(--ui-wood);box-shadow:0 0 0 var(--px) var(--ui-wood-dark);padding:1px 6px 2px;font-size:11px;font-weight:600}.project-item a{color:#fff;text-shadow:var(--px) var(--px) 0 var(--ui-grass-dark);background:var(--ui-grass);box-shadow:var(--pixel-outline), inset calc(var(--px) * -2) calc(var(--px) * -2) 0 0 var(--ui-grass-dark), inset var(--px) var(--px) 0 0 var(--ui-grass-light);margin-top:10px;padding:4px 10px 6px;font-size:13px;font-weight:600;text-decoration:none;display:inline-block}.project-item a:hover{background:var(--ui-grass-light)}@keyframes dropdown-open{0%{opacity:0;transform:translateY(calc(var(--px) * -4))}to{opacity:1;transform:none}}@media (max-width:720px){.game-main{flex-direction:column}.side-bar-container{flex:none;max-height:25%;margin:8px 12px}.portfolio-header-container{padding:8px 12px}.portfolio-header-container h1{font-size:20px}.volume-slider{font-size:16px;right:12px}.volume-slider input[type=range]{width:60px}.portfolio-footer-container{padding:8px 12px}.portfolio-footer-container address{gap:10px}}.project-overlay .overlay-hint{color:var(--ui-wood);margin-top:16px;font-size:13px}.overlay-section-title{letter-spacing:1px;text-transform:uppercase;color:var(--ui-wood-dark);border-bottom:var(--px) dashed var(--ui-wood-light);margin:20px 0 10px;padding-bottom:4px;font-size:14px;font-weight:700}.tech-stack{flex-wrap:wrap;gap:10px;margin:0;padding:4px;list-style:none;display:flex}.tech-tag{color:var(--ui-parchment);text-shadow:var(--px) var(--px) 0 var(--ui-outline);background:var(--ui-wood);box-shadow:var(--pixel-outline), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 0 var(--ui-wood-dark), inset var(--px) var(--px) 0 0 var(--ui-wood-light);padding:4px 10px 6px;font-size:13px;font-weight:600;line-height:1.3}.screenshot-gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:4px;display:grid}.screenshot-frame{padding:calc(var(--px) * 2);background:var(--ui-wood);box-shadow:var(--pixel-outline), inset var(--px) var(--px) 0 0 var(--ui-wood-light), calc(var(--px) * 2) calc(var(--px) * 2) 0 0 #140a0540;margin:0}.screenshot-image{aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--ui-backdrop);image-rendering:auto;width:100%;height:auto;display:block}.popup_interaction{z-index:10;background:var(--ui-wood);box-shadow:var(--pixel-outline), inset calc(var(--px) * -1) calc(var(--px) * -2) 0 0 var(--ui-wood-dark), inset var(--px) var(--px) 0 0 var(--ui-wood-light), calc(var(--px) * 2) calc(var(--px) * 3) 0 var(--px) #140a0559;pointer-events:none;padding:6px 12px;animation:.2s steps(4,end) popup-appear,1.2s steps(2,jump-none) .2s infinite popup-bob;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.popup_interaction_text{font-family:var(--font-ui);color:var(--ui-parchment);text-shadow:var(--px) var(--px) 0 var(--ui-outline);white-space:nowrap;margin:0;font-size:15px;font-weight:600}.key_cap{color:var(--ui-ink);text-shadow:none;background:var(--ui-parchment);box-shadow:var(--pixel-outline), inset 0 calc(var(--px) * -2) 0 0 var(--ui-parchment-shade);margin:0 4px;padding:0 6px 2px;font-family:inherit;font-size:14px;font-weight:700;display:inline-block}@keyframes popup-appear{0%{opacity:0;transform:translate(-50%,-50%)scale(.85)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes popup-bob{0%{transform:translate(-50%,-50%)}to{transform:translate(-50%, calc(-50% - var(--px) * 2))}}@media (prefers-reduced-motion:reduce){.popup_interaction,.project-overlay,.project-display{animation:none}}