@font-face{font-family:"Press Start 2P";font-style:normal;font-display:swap;font-weight:400;src:url("./assets/press-start-2p-latin-400-normal.woff2") format("woff2"),url("./assets/press-start-2p-latin-400-normal.woff") format("woff")}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:400;src:url("./assets/space-mono-latin-400-normal.woff2") format("woff2"),url("./assets/space-mono-latin-400-normal.woff") format("woff")}@font-face{font-family:Space Mono;font-style:normal;font-display:swap;font-weight:700;src:url("./assets/space-mono-latin-700-normal.woff2") format("woff2"),url("./assets/space-mono-latin-700-normal.woff") format("woff")}:root{color-scheme:light;font-family:Space Mono,monospace;--cream: #fff1d2;--cream-deep: #f4dcae;--peach: #e99574;--peach-light: #f3b08e;--gold: #e8ad59;--cocoa: #4a2819;--cocoa-deep: #2e170f;--olive: #45561e;--olive-deep: #263313;--teal: #147c77;--teal-dark: #0a5755;--red: #b63a2d;--white: #fffaf0;--shadow: rgba(46, 23, 15, .42);--motion-fast: .15s;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:var(--peach)}body{min-width:320px;min-height:100svh;margin:0;background:var(--peach);color:var(--cocoa-deep)}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:4px solid var(--teal);outline-offset:4px}[hidden]{display:none!important}.skip-link{position:fixed;z-index:100;top:.75rem;left:.75rem;padding:.75rem 1rem;transform:translateY(-180%);border:3px solid var(--cocoa);background:var(--cream);color:var(--cocoa);font-weight:700}.skip-link:focus{transform:translateY(0)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.app-shell,.screen{min-height:100svh}.screen{position:relative}.menu-screen{display:grid;min-height:100svh;padding:clamp(1rem,2vw,2rem) clamp(1rem,3vw,3rem) clamp(.75rem,1.6vw,1.35rem);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(.65rem,1.5vh,1.25rem);overflow:hidden;background-color:#e89a78;background-image:url("./assets/dog-park-background.png");background-position:center;background-size:cover;isolation:isolate}.menu-topbar{position:absolute;z-index:3;top:clamp(.9rem,2vw,2rem);right:clamp(.9rem,2vw,2rem);left:clamp(.9rem,2vw,2rem);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.menu-topbar>*{pointer-events:auto}.stitched-panel{position:relative;border:3px solid var(--cocoa);border-radius:14px;background:var(--cream);box-shadow:7px 7px 0 var(--shadow),inset 0 0 0 5px #ffffff40;color:var(--cocoa-deep)}.stitched-panel:after{position:absolute;pointer-events:none;inset:7px;border:2px dashed rgba(94,52,28,.46);border-radius:8px;content:""}.best-panel,.hud-best{display:grid;width:clamp(6.4rem,9vw,8.2rem);min-height:clamp(6rem,9vw,7.6rem);padding:.95rem .75rem;place-items:center;align-content:center;gap:.45rem;text-align:center;text-transform:uppercase}.best-panel span,.hud-best span{font-family:"Press Start 2P",monospace;font-size:clamp(.63rem,1vw,.88rem);line-height:1.4}.best-panel strong,.hud-best strong{font-family:"Press Start 2P",monospace;font-size:clamp(1.85rem,3.2vw,3rem);font-weight:400;line-height:1}.icon-button{z-index:1;display:inline-grid;width:clamp(3.5rem,5.5vw,5rem);aspect-ratio:1;padding:.9rem;place-items:center;cursor:pointer;transition:transform var(--motion-fast) ease,background var(--motion-fast) ease}.icon-button:hover{transform:translateY(-3px);background:var(--gold)}.icon-button svg{z-index:1;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sound-off-icon,[aria-pressed=true] .sound-on-icon{display:none}[aria-pressed=true] .sound-off-icon{display:block}.title-block{z-index:2;display:grid;width:min(75vw,820px);margin:0 auto;place-items:center;align-content:start;gap:.55rem}.game-title{display:flex;margin:0;align-items:baseline;justify-content:center;gap:.18em;color:var(--cream);font-family:"Press Start 2P",monospace;font-size:clamp(3.2rem,7.8vw,7.7rem);font-weight:400;letter-spacing:-.08em;line-height:1;text-transform:uppercase;text-shadow:0 5px 0 var(--cocoa),0 10px 0 var(--cocoa-deep),8px 14px 0 rgba(64,31,17,.25)}.game-title span:first-child{letter-spacing:-.16em}.game-subtitle{margin:0;padding:.75rem clamp(1rem,2.5vw,2.2rem);border:3px solid var(--cocoa);border-radius:999px;background:#fff1d2f0;box-shadow:0 5px #4a28196b;color:var(--cocoa);font-size:clamp(.78rem,1.5vw,1.25rem);font-weight:700;letter-spacing:.08em;text-align:center}.game-subtitle span{color:var(--teal)}.launcher-grid{z-index:1;display:grid;width:min(100%,1450px);min-height:0;margin:0 auto;grid-template-columns:minmax(18rem,.68fr) minmax(36rem,1.55fr);gap:clamp(1.5rem,4vw,5.5rem);align-items:center}.about-card{align-self:center;padding:clamp(1.65rem,3vw,2.5rem) clamp(1.35rem,2.4vw,2.25rem) 1.5rem;font-size:clamp(.72rem,1.05vw,.92rem);line-height:1.72}.about-card h2{position:relative;z-index:1;width:max-content;margin:-3.25rem auto 1.3rem;padding:.7rem 1.15rem;border:3px solid var(--cocoa-deep);border-radius:6px;background:var(--cocoa);color:var(--cream);font-family:"Press Start 2P",monospace;font-size:clamp(.64rem,1vw,.82rem);font-weight:400;letter-spacing:.04em;text-transform:uppercase}.about-card p{position:relative;z-index:1;margin:0 0 .9rem}.about-heart{position:relative;z-index:1;display:block;margin-top:.2rem;color:var(--red);font-size:1.5rem;text-align:center;text-shadow:2px 2px 0 var(--cocoa)}.character-stage{display:grid;min-width:0;place-items:center;align-content:center;gap:clamp(.55rem,1.2vh,1rem)}.dog-duo{display:grid;width:min(100%,760px);height:clamp(11rem,29vh,18rem);grid-template-columns:1fr 1fr;align-items:end}.dog-preview,.character-button-art{display:block;background-image:url("./assets/dog-sprites.png");background-repeat:no-repeat;background-size:200% 200%}.dog-preview{width:100%;height:100%;filter:drop-shadow(8px 12px 0 rgba(74,40,25,.18));animation:hover-dog 2.3s ease-in-out infinite}.dog-preview-shih{background-position:0 0}.dog-preview-sausage{background-position:0 100%;animation-delay:-1.05s}.character-actions{display:grid;width:min(100%,760px);grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}.character-button,.how-to-button,.ready-hint,.primary-button,.secondary-button{border:3px solid var(--cocoa);border-radius:12px;background:var(--cream);box-shadow:6px 6px #4a28197a,inset 0 0 0 5px #ffffff4d;color:var(--cocoa-deep);cursor:pointer}.character-button{position:relative;display:grid;min-height:clamp(5.4rem,10vh,6.8rem);padding:.7rem 1rem;grid-template-columns:clamp(3.5rem,6vw,5rem) 1fr 1rem;gap:clamp(.4rem,1vw,.8rem);align-items:center;font-size:clamp(.7rem,1.15vw,.95rem);font-weight:700;letter-spacing:.04em;line-height:1.5;text-align:left;text-transform:uppercase;transition:transform var(--motion-fast) ease,background var(--motion-fast) ease,border-color var(--motion-fast) ease}.character-button:before{position:absolute;top:-1.05rem;left:50%;width:2.3rem;height:1.25rem;transform:translate(-50%);border:3px solid var(--cocoa);border-radius:999px;background:var(--cream-deep);content:"";clip-path:polygon(12% 35%,0 0,32% 0,42% 28%,58% 28%,68% 0,100% 0,88% 35%,100% 100%,68% 100%,58% 72%,42% 72%,32% 100%,0 100%)}.character-button:hover,.character-button.is-selected,.character-button:focus-visible{transform:translateY(-4px);border-color:var(--teal-dark);background:#fff6df}.character-button.is-selected{box-shadow:0 0 0 5px var(--gold),8px 8px #4a28197a}.character-button strong{font-family:"Press Start 2P",monospace;font-size:clamp(.62rem,.95vw,.8rem);font-weight:400;line-height:1.65}.character-button>svg{width:1rem;fill:currentColor}.character-button-art{width:100%;aspect-ratio:1.35}.character-button-art-shih{background-position:0 0}.character-button-art-sausage{background-position:0 100%}.how-to-button{display:inline-flex;min-width:min(100%,330px);min-height:3.5rem;padding:.75rem 1.15rem;align-items:center;justify-content:center;gap:.8rem;font-family:"Press Start 2P",monospace;font-size:clamp(.55rem,.82vw,.72rem);line-height:1.5;text-transform:uppercase;transition:transform var(--motion-fast) ease,background var(--motion-fast) ease}.how-to-button:hover{transform:translateY(-3px);background:var(--gold)}.how-to-button svg{z-index:1;width:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8}.control-banner{z-index:2;display:flex;width:max-content;min-height:3.7rem;margin:0 auto;padding:.55rem clamp(1rem,2vw,1.8rem);align-items:center;justify-content:center;gap:.75rem;border:3px solid var(--cream);border-radius:10px;background:var(--cocoa);box-shadow:6px 6px #2e170f59;color:var(--cream);font-family:"Press Start 2P",monospace;font-size:clamp(.55rem,1vw,.78rem);line-height:1.5;text-transform:uppercase}kbd{display:inline-grid;min-height:2.1rem;padding:.35rem .65rem;place-items:center;border:2px solid currentColor;border-radius:6px;background:var(--cream);box-shadow:inset 0 -3px #4a281933;color:var(--cocoa);font:inherit}.control-banner svg{width:1.7rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.game-screen{display:grid;min-height:100svh;padding:clamp(.5rem,1.5vw,1.25rem);place-items:center;align-content:center;gap:.75rem;overflow:hidden;background:var(--peach)}.game-frame{position:relative;width:min(calc(100vw - clamp(1rem,3vw,2.5rem)),calc((100svh - 4.8rem) * 16 / 9),1500px);aspect-ratio:16 / 9;overflow:hidden;border:clamp(4px,.55vw,8px) solid var(--cocoa);border-radius:clamp(8px,1vw,14px);background:#f3ab87;box-shadow:10px 12px #4a281959}.game-frame canvas{display:block;width:100%;height:100%;background:#f3ab87;touch-action:none}.game-hud{position:absolute;z-index:3;top:clamp(.6rem,1.7vw,1.55rem);right:clamp(.6rem,1.7vw,1.55rem);left:clamp(.6rem,1.7vw,1.55rem);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none}.game-hud .hud-best{width:clamp(4.6rem,7vw,7.2rem);min-height:clamp(4.2rem,7vw,6.6rem);padding:.7rem .55rem;justify-self:start}.game-hud .hud-best span{font-size:clamp(.42rem,.72vw,.72rem)}.game-hud .hud-best strong{font-size:clamp(1.15rem,2.35vw,2.55rem)}.hud-score{align-self:start;color:var(--cream);font-family:"Press Start 2P",monospace;font-size:clamp(2.7rem,7vw,6.7rem);font-weight:400;letter-spacing:-.06em;line-height:1;text-shadow:0 5px 0 var(--cocoa),0 9px 0 var(--cocoa-deep),6px 12px 0 rgba(74,40,25,.22)}.hud-actions{display:flex;justify-self:end;gap:clamp(.45rem,1vw,.8rem);pointer-events:auto}.hud-actions .icon-button{width:clamp(2.8rem,4.5vw,4.5rem);padding:clamp(.55rem,1vw,.9rem)}.ready-hint{position:absolute;z-index:4;bottom:clamp(1rem,3vw,2.5rem);left:50%;display:inline-flex;min-height:3.4rem;padding:.65rem 1.25rem;transform:translate(-50%);align-items:center;gap:.7rem;font-family:"Press Start 2P",monospace;font-size:clamp(.5rem,1vw,.78rem);line-height:1.4;text-transform:uppercase}.ready-hint:hover{background:var(--gold)}.ready-hint kbd{min-height:1.8rem;background:var(--white)}.game-overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:#2e170f6b;backdrop-filter:blur(3px)}.overlay-card{width:min(calc(100% - 2rem),440px);padding:clamp(1.5rem,4vw,2.5rem);text-align:center}.overlay-card>p{position:relative;z-index:1;margin:0 0 1.5rem;font-family:"Press Start 2P",monospace;font-size:clamp(1.2rem,3vw,2rem);text-transform:uppercase}.overlay-actions,.result-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.primary-button,.secondary-button{min-height:3.1rem;padding:.75rem 1.25rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:transform var(--motion-fast) ease,background var(--motion-fast) ease}.primary-button{background:var(--gold)}.secondary-button{background:var(--cream)}.primary-button:hover,.secondary-button:hover{transform:translateY(-3px);background:var(--white)}.game-dialog{width:min(calc(100% - 2rem),760px);max-height:calc(100svh - 2rem);padding:clamp(1.25rem,4vw,2.5rem);overflow:auto;border:4px solid var(--cocoa);border-radius:14px;background:var(--cream);box-shadow:12px 12px #2e170f6b,inset 0 0 0 7px #ffffff59;color:var(--cocoa-deep)}.game-dialog::backdrop{background:#2e170fb8;backdrop-filter:blur(4px)}.dialog-header{display:flex;margin-bottom:1.5rem;align-items:start;justify-content:space-between;gap:1rem}.dialog-header h2,.result-dialog h2{margin:0;font-family:"Press Start 2P",monospace;font-size:clamp(1.15rem,3vw,2rem);font-weight:400;line-height:1.5;text-transform:uppercase}.dialog-close{width:2.8rem;height:2.8rem;border:3px solid var(--cocoa);border-radius:8px;background:var(--cream-deep);color:var(--cocoa);cursor:pointer;font-size:1.55rem;line-height:1}.dialog-close:hover{background:var(--gold)}.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px dashed rgba(74,40,25,.35);border-bottom:2px dashed rgba(74,40,25,.35)}.how-grid article{padding:1.35rem;border-right:2px dashed rgba(74,40,25,.25)}.how-grid article:first-child{padding-left:0}.how-grid article:last-child{padding-right:0;border-right:0}.how-grid article>span{color:var(--red);font-family:"Press Start 2P",monospace;font-size:.7rem}.how-grid h3{margin:.65rem 0;color:var(--teal-dark);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}.how-grid p,.dialog-note,.result-detail{font-size:.78rem;line-height:1.7}.dialog-note{margin:1.25rem 0;color:var(--teal-dark);font-weight:700;text-align:center}.dialog-confirm{width:100%}.result-dialog{text-align:center}.result-paw{margin-bottom:1rem;font-size:2.6rem}.result-score{margin:1.4rem 0 .7rem;color:var(--red);font-family:"Press Start 2P",monospace;font-size:clamp(3rem,10vw,6rem);line-height:1;text-shadow:4px 4px 0 rgba(74,40,25,.2)}.result-detail{margin:0 0 1.5rem;color:var(--teal-dark);font-weight:700;text-transform:uppercase}@keyframes hover-dog{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}@media(max-width:1000px){.menu-screen{min-height:100svh;overflow:auto}.title-block{width:min(74vw,650px)}.game-title{font-size:clamp(2.7rem,8vw,5.2rem)}.launcher-grid{grid-template-columns:minmax(16rem,.7fr) minmax(27rem,1.3fr);gap:1.6rem}.dog-duo{height:clamp(9rem,23vh,13rem)}.about-card{line-height:1.58}}@media(max-width:760px){.menu-screen{min-height:100svh;padding:5.7rem .8rem 1rem;grid-template-rows:auto auto auto;gap:2rem;background-position:58% center}.menu-topbar{right:.8rem;left:.8rem}.best-panel{width:5.2rem;min-height:4.8rem}.best-panel strong{font-size:1.4rem}.title-block{width:calc(100% - 1rem)}.game-title{flex-wrap:wrap;font-size:clamp(2.25rem,11.2vw,4.4rem);text-shadow:0 4px 0 var(--cocoa),0 7px 0 var(--cocoa-deep),5px 9px 0 rgba(64,31,17,.22)}.game-subtitle{font-size:clamp(.62rem,3vw,.82rem)}.launcher-grid{width:min(100%,600px);grid-template-columns:1fr;gap:2.5rem}.about-card{grid-row:1;margin-inline:.3rem;padding:1.85rem 1.25rem 1.1rem;font-size:.74rem}.about-card h2{margin-top:-3.25rem}.character-stage{grid-row:2}.dog-duo{height:clamp(10rem,32vw,14rem)}.character-actions{gap:.65rem}.character-button{min-height:5.2rem;padding:.55rem .6rem;grid-template-columns:3rem 1fr .75rem;font-size:.62rem}.character-button strong{font-size:.54rem}.control-banner{width:min(100%,360px);font-size:.54rem}.game-screen{min-height:100svh;padding:.35rem;align-content:center}.game-frame{width:min(calc(100vw - .7rem),calc((100svh - 1rem) * 16 / 9));border-width:4px;box-shadow:4px 5px #4a281959}.hud-score{text-shadow:0 3px 0 var(--cocoa),0 5px 0 var(--cocoa-deep)}.how-grid{grid-template-columns:1fr}.how-grid article,.how-grid article:first-child,.how-grid article:last-child{padding:1rem 0;border-right:0;border-bottom:2px dashed rgba(74,40,25,.25)}.how-grid article:last-child{border-bottom:0}}@media(max-height:720px)and (min-width:761px){.menu-screen{padding-block:.7rem}.title-block{gap:.25rem}.game-title{font-size:clamp(2.8rem,6vw,5.4rem)}.game-subtitle{padding-block:.55rem}.dog-duo{height:9.5rem}.about-card{font-size:.68rem;line-height:1.48}.about-card p{margin-bottom:.55rem}.character-button{min-height:4.8rem}.how-to-button,.control-banner{min-height:3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.portfolio-demo-banner{position:relative;z-index:30;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;padding:10px 16px;background:#111218;color:#f4f1e9;font:12px/1.5 system-ui,sans-serif;border-bottom:1px solid #34343f}.portfolio-demo-banner a{color:inherit;text-decoration:underline;text-underline-offset:3px}.portfolio-demo-banner a:focus-visible{outline:2px solid currentColor;outline-offset:4px}@media(max-width:420px){.portfolio-demo-banner{font-size:11px;padding:8px 12px}}