@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap");
:root { --ink:#111111; --type:#b8b8b3; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; overscroll-behavior:none; }
body { margin:0; overflow:hidden; background:var(--ink); color:var(--type); font-family:Arial,Helvetica,sans-serif; transition:background-color .18s ease,color .18s ease; -webkit-tap-highlight-color:transparent; }
body.is-inverted { --ink:#b8b8b3; --type:#111111; }
.landing { min-height:100vh; min-height:100svh; display:grid; place-items:center; }
.portrait { position:relative; width:min(76vmin,650px); aspect-ratio:1; display:grid; place-items:center; contain:layout; }
.orbit-copy { position:absolute; inset:0; width:100%; height:100%; overflow:visible; cursor:grab; touch-action:none; user-select:none; will-change:transform; }
.orbit-copy.is-spinning { cursor:grabbing; }
.orbit-copy text { fill:var(--type); font-family:"Cinzel Decorative",Georgia,serif; font-size:24px; font-weight:400; letter-spacing:.01em; }
.orbit-text--mobile { display:none; }
.orbit-separator { fill:var(--type); transition:fill .18s ease; }
.scope-reticle { position:absolute; z-index:5; top:50%; left:50%; width:27px; aspect-ratio:1; border:1px solid rgba(184,184,179,.72); border-radius:50%; transform:translate(-50%,-50%) scale(.82); opacity:0; pointer-events:none; transition:opacity .15s ease,transform .2s ease; }
.scope-reticle::before,.scope-reticle::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.scope-reticle::before { width:37px; height:1px; background:linear-gradient(to right,rgba(184,184,179,.78) 0 8px,transparent 8px 29px,rgba(184,184,179,.78) 29px); }
.scope-reticle::after { width:1px; height:37px; background:linear-gradient(to bottom,rgba(184,184,179,.78) 0 8px,transparent 8px 29px,rgba(184,184,179,.78) 29px); }
.portrait.has-target { cursor:none; }
.portrait.has-target .scope-reticle { opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:inset 0 0 0 12px transparent; }
.scope-reticle { background:radial-gradient(circle,rgba(184,184,179,.9) 0 1px,transparent 1.5px); }
.game-trigger { position:absolute; z-index:2; top:50%; left:50%; width:58%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation; }
.portrait.has-target .game-trigger,.portrait.is-intro .game-trigger { opacity:0; pointer-events:none; }
.start-hint { position:absolute; z-index:3; top:50%; left:50%; padding:12px 16px; border:0; background:transparent; color:var(--type); font:700 clamp(11px,2.4vmin,16.5px)/1 Arial,Helvetica,sans-serif; letter-spacing:.2em; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.96); transition:opacity .55s ease,transform .55s ease,color .18s ease; cursor:pointer; }
.start-hint.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.portrait.has-target .start-hint,.portrait.is-intro .start-hint { opacity:0; pointer-events:none; }
.game-intro { position:absolute; z-index:3; inset:0; overflow:hidden; border-radius:50%; pointer-events:none; }
.round-title { position:absolute; top:50%; left:50%; color:var(--type); font-family:Arial,Helvetica,sans-serif; font-size:clamp(14px,3.2vmin,22px); font-weight:700; letter-spacing:.2em; white-space:nowrap; opacity:0; transform:translate(-50%,-50%) scale(.92); }
.portrait.is-intro .round-title { animation:round-flash 1s ease .08s both; }
.target-layer { position:absolute; z-index:4; inset:0; pointer-events:none; }
.flying-target { position:absolute; top:50%; left:50%; width:68px; height:62px; background:url("assets/duck-target.png") center/contain no-repeat; image-rendering:pixelated; filter:grayscale(1) contrast(1.5) brightness(1.05); mix-blend-mode:difference; transform:translate(-50%,-50%) scale(0) scaleX(var(--facing,1)); opacity:0; will-change:transform,left,top; transition:opacity .12s ease,transform .2s cubic-bezier(.2,.8,.2,1); }
.flying-target.is-live { opacity:1; transform:translate(-50%,-50%) scale(1) scaleX(var(--facing,1)); animation:duck-flap .34s steps(1,end) infinite; }
.flying-target.is-shot { z-index:8; background-image:url("assets/duck-hit.png"); animation:duck-shot .72s cubic-bezier(.45,0,.8,.55) forwards; }
.victory-dog { position:absolute; z-index:6; top:50%; left:50%; width:clamp(168px,45%,282px); aspect-ratio:543/724; background:url("assets/laughing-dog-sprite.png") 0 50%/300% 100% no-repeat; image-rendering:pixelated; filter:grayscale(1) contrast(1.12); opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.76); }
.portrait.is-victory { cursor:default; }
.portrait.is-victory .victory-dog { animation:victory-laugh 1.8s cubic-bezier(.2,.75,.25,1) both,victory-frames .42s steps(1,end) infinite; }
.portrait.is-victory .scope-reticle { opacity:0; }
.portal-wipe { position:fixed; z-index:10; top:50%; left:50%; width:12px; aspect-ratio:1; border-radius:50%; background:#000; box-shadow:0 0 80px 35px rgba(0,0,0,.3); transform:translate(-50%,-50%) scale(0); pointer-events:none; }
.portrait.is-entering .orbit-copy { animation:portal-collapse 1.4s cubic-bezier(.55,0,.18,1) forwards; }
.portrait.is-entering .target-layer { opacity:0; }
.portal-wipe.is-entering { animation:portal-expand 1.4s cubic-bezier(.62,0,.16,1) forwards; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes portal-collapse { 0%{transform:var(--current-rotation) scale(1);opacity:1} 45%{transform:var(--current-rotation) scale(.94);opacity:.9} 100%{transform:var(--current-rotation) scale(.02);opacity:0} }
@keyframes portal-expand { 0%,22%{transform:translate(-50%,-50%) scale(0);opacity:0} 34%{opacity:1} 100%{transform:translate(-50%,-50%) scale(220);opacity:1} }
@keyframes round-flash { 0%{opacity:0;transform:translate(-50%,-50%) scale(.9)} 28%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)} }
@keyframes duck-flap { 0%,32%{background-image:url("assets/duck-target.png")} 33%,65%{background-image:url("assets/duck-wing-mid.png")} 66%,100%{background-image:url("assets/duck-wing-down.png")} }
@keyframes duck-shot { 0%{opacity:1;transform:translate(-50%,-50%) scaleX(var(--facing,1)) rotate(0)} 22%{transform:translate(-50%,-65%) scaleX(var(--facing,1)) rotate(-10deg)} 100%{opacity:0;transform:translate(-50%,190%) scaleX(var(--facing,1)) rotate(38deg)} }
@keyframes victory-laugh { 0%{opacity:0;transform:translate(-50%,-50%) scale(.76)} 16%{opacity:1;transform:translate(-50%,-50%) scale(1.04)} 24%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-54%) scale(.94)} }
@keyframes victory-frames { 0%,32%{background-position:0 50%} 33%,65%{background-position:50% 50%} 66%,100%{background-position:100% 50%} }
@media (max-width:600px) { .landing{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.portrait{width:min(92vw,82svh)}.orbit-copy text{font-size:25px}.orbit-text--desktop{display:none}.orbit-text--mobile{display:block}.orbit-separator{display:none}.game-trigger{width:62%}.flying-target{width:60px;height:54px} }
@media (hover:none),(pointer:coarse) { .portrait.has-target{cursor:default}.portrait.has-target .scope-reticle{display:none} }
@media (max-height:520px) and (orientation:landscape) { .portrait{width:min(80vw,88svh)}.orbit-copy text{font-size:22px} }
@media (prefers-reduced-motion:reduce) { .orbit-copy{will-change:auto}.portrait.is-entering .orbit-copy{animation:portal-collapse .45s ease forwards}.portal-wipe.is-entering{animation:portal-expand .45s ease forwards} }