/* Painted PNG interface skins; live text stays crisp and accessible. */
@font-face{font-family:Silkscreen;src:url('assets/silkscreen.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Silkscreen;src:url('assets/silkscreen-bold.ttf');font-weight:700;font-display:swap}
body,button{font-family:Silkscreen,monospace;font-weight:400}img{image-rendering:pixelated;user-select:none;pointer-events:none}
button{touch-action:manipulation}button:not(:disabled):active{box-shadow:none;transform:translateY(3px)}button:focus-visible{outline:3px solid #fff7c3;outline-offset:3px}
#logo{top:-4%;width:60%;height:108%;object-fit:contain;filter:drop-shadow(0 3px #513c5755);clip-path:none}header{z-index:4}
.plaque{background:transparent url('assets/frame-score.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
.wind{background-image:url('assets/frame-menu.png');width:19%;padding:1.5% 1%;transform:none;overflow:hidden;font-size:2.1cqw;font-weight:700}
.wind div{width:92%;height:45%;overflow:hidden;gap:0;justify-content:space-between;flex-shrink:0}
.wind #windsock{width:63%;height:95%;transform-origin:50% 50%;animation:windSockFixed 1.8s steps(3) infinite;--wind-direction:1;scale:none}
.wind b{font-size:3.6cqw;text-shadow:none}.wind strong{font-size:2.5cqw}.wind small{font-size:1.45cqw}
.gear{width:10%;background:transparent url('assets/button-settings.png') center/contain no-repeat;border:0;border-radius:0;box-shadow:none}
.scoreboard{top:17%;left:25%;width:51%;height:6.5%;padding:1.5% 4%;font-size:1.85cqw;font-weight:700}.scoreboard b{font-size:2.5cqw}.range-badge{top:24.2%;font-size:1.35cqw}.turn-banner{font-size:1.9cqw}
.controls{left:0;bottom:0;width:100%;height:31.5%;border:0;border-radius:0;box-shadow:none;background:transparent url('assets/frame-controls.png') center/100% 100% no-repeat;padding:3.6% 4% 2%;gap:4%;z-index:3}
.meter-row{grid-template-columns:minmax(0,1fr) 28%;gap:2.3%}.meter-title{font-size:2.7cqw;font-weight:700;height:4.4cqw;letter-spacing:-.02em;line-height:1}.stat-icon{width:4.3cqw;height:4cqw;object-fit:contain;flex-shrink:0}.meter-title output{font-size:1.55cqw;font-weight:400;color:#795c75}.meter-line{height:4.3cqw}.end-icon{width:5.5%;max-height:3.6cqw;object-fit:contain}.meter{height:3.6cqw}.marker span{font-family:monospace;font-weight:700;font-size:4.1cqw}
.game-button,.back,.text-button,.toggle{border:0;border-radius:0;box-shadow:none;background:transparent url('assets/button-cream.png') center/100% 100% no-repeat;image-rendering:pixelated;font-weight:700;letter-spacing:-.03em;transition:filter .15s,transform .12s;text-shadow:0 1px #fff6}
.pink,.shoot-button{background-image:url('assets/button-pink.png')}.mint,.angle-button{background-image:url('assets/button-mint.png')}.cream{background-image:url('assets/button-cream.png')}.angle-button{font-size:2.05cqw;height:95%;padding:2% 6%}.shoot-button{font-size:3.4cqw;height:100%;text-shadow:2px 2px #753859}
.hint{gap:1.5%;height:17%}.hint p{font-size:1.5cqw;color:#51334c;background:#fff8e7bd;padding:.7% 1.5%;line-height:1.2}.hint>span{font-size:2cqw}
.overlay{inset:23% 0 0;padding-bottom:6%;background:none;z-index:5}.dialog{width:62%;padding:6.5% 7% 6%;border:0;border-radius:0;box-shadow:none;background:transparent url('assets/frame-menu.png') center/100% 100% no-repeat;filter:drop-shadow(0 7px #5d365644)}
.dialog h1,.dialog h2{font-size:3.1cqw;font-weight:700;margin:0 0 5%;line-height:1.35;letter-spacing:-.04em;color:#623b62}.dialog p{font-size:1.65cqw;font-weight:400;line-height:1.65;margin-bottom:5%}.dialog .game-button{height:8.5cqw;padding:2% 7%;font-size:2.65cqw;margin-bottom:3%}.dialog .tiny{font-size:1.35cqw;color:#855b74;margin:4% 0 0}
.mini-bow{font-size:3.4cqw;line-height:1;margin:-2% 0 4%;animation:float 2.5s ease-in-out infinite}.menu{width:65%;padding:5.5% 8% 6%}.menu h1{font-size:3.15cqw}.menu .game-button{height:8.7cqw;margin-bottom:3.5%}
.back,.text-button{padding:1.3cqw 2cqw;font-size:1.55cqw;min-height:4.5cqw}.back{width:31%;margin:-1% 0 5%}.text-button{width:100%;margin-top:2%;font-size:1.35cqw}
.distance-options{gap:3%;margin:7% 0}.distance-options .distance{width:31.3%;height:11.5cqw;padding:1.4cqw .6cqw}.distance strong{font-size:3.3cqw}.distance strong span{font-size:1.8cqw}.distance small{font-size:1.25cqw!important;margin-top:5%}
.toggle{height:8cqw;padding:2% 10%;font-size:2.15cqw}.toggle strong{padding:0;background:none;border:0;border-radius:0;color:#367e65;font-size:1.8cqw}.toggle[aria-pressed=false] strong{background:none;color:#9a6985}.final-scores small{font-size:1.4cqw}.final-scores strong{font-size:5.2cqw}.dialog .best{font-size:1.5cqw}.loading{font-family:Silkscreen,monospace;font-weight:400}#scorePop{font-size:3.6cqw;font-weight:700}
@keyframes windSockFixed{0%,100%{transform:scaleX(var(--wind-direction)) rotate(-2deg)}50%{transform:scaleX(var(--wind-direction)) rotate(3deg)}}
@media(max-width:600px){.dialog,.menu{width:76%;padding:7% 9%}.dialog h1,.dialog h2{font-size:3.8cqw}.dialog p{font-size:2.1cqw}.dialog .game-button{height:10.5cqw;font-size:3.15cqw;box-shadow:none}.dialog .tiny{font-size:1.6cqw}.toggle{height:10cqw;font-size:2.5cqw}.toggle strong{font-size:2.2cqw}.back,.text-button{font-size:1.8cqw}.distance-options .distance{height:13cqw}.hint p{font-size:1.6cqw}.controls{padding:3.6% 4% 2%;border:0}.game-button{box-shadow:none}}
@media(prefers-reduced-motion:reduce){.wind #windsock,.mini-bow{animation:none}}
/* Nine-slice PNG borders keep flowers proportional at every panel size. */
.dialog{background:none;border:0 solid transparent;border-image:url('assets/frame-menu.png') 100 78 95 64 fill / 6.5cqw 5.5cqw 6cqw 5.5cqw / 0 stretch}
.controls{background:none;border:0 solid transparent;border-image:url('assets/frame-controls.png') 80 75 72 75 fill / 4.2cqw 5.5cqw 4cqw 5.5cqw / 0 stretch}
.scoreboard{background:none;border:0 solid transparent;border-image:url('assets/frame-score.png') 40 70 40 70 fill / 1.7cqw 3cqw 1.7cqw 3cqw / 0 stretch}
.wind{background:none;border:0 solid transparent;border-image:url('assets/frame-menu.png') 100 78 95 64 fill / 3cqw 2cqw 3cqw 2cqw / 0 stretch;padding:1.8% 1.3%;font-size:1.85cqw}
.wind strong{font-size:2.2cqw}.wind div{height:43%;width:88%}.wind small{font-size:1.25cqw}
.game-button,.back,.text-button,.toggle{background:none;border:0 solid transparent;border-image:url('assets/button-cream.png') 65 75 65 75 fill / 2.7cqw 4cqw 2.7cqw 4cqw / 0 stretch}
.pink,.shoot-button{border-image-source:url('assets/button-pink.png')}.mint,.angle-button{border-image-source:url('assets/button-mint.png')}
.back,.text-button{border-image-width:1.6cqw 2.5cqw}.dialog .tiny{margin-top:5%;padding-bottom:1cqw}.menu{padding-bottom:7%}
/* Keep all flower clusters inside uniformly scaled corners. Repeat edge tiles. */
.dialog{border-image-slice:140 120 145 125 fill;border-image-width:6.15cqw 5.27cqw 6.37cqw 5.49cqw;border-image-repeat:round}
.controls{border-image-slice:100 150 110 160 fill;border-image-width:4cqw 6cqw 4.4cqw 6.4cqw;border-image-repeat:round}
.wind{border-image-slice:140 120 145 125 fill;border-image-width:2.8cqw 2.4cqw 2.9cqw 2.5cqw;border-image-repeat:round}
.scoreboard{border-image-slice:50 90 50 90 fill;border-image-width:1.6cqw 2.88cqw 1.6cqw 2.88cqw;border-image-repeat:round}
.game-button,.back,.text-button,.toggle{border-image-slice:75 130 80 130 fill;border-image-width:2.6cqw 4.51cqw 2.77cqw 4.51cqw;border-image-repeat:round}
.back,.text-button{border-image-width:1.35cqw 2.34cqw 1.44cqw 2.34cqw}
#scorePop{opacity:0;left:50%;top:35%;width:80%;max-width:80%;text-align:center;white-space:normal;font-size:3.5cqw;line-height:1.5;z-index:4;transform:translateX(-50%)}
#scorePop.pop{animation:celebrateHit 1.8s ease-out forwards}
@keyframes celebrateHit{0%{opacity:0;transform:translateX(-50%) scale(.65)}15%{opacity:1;transform:translateX(-50%) scale(1.1)}28%{transform:translateX(-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px) scale(1)}}
.game-button,.back,.text-button,.toggle{border-image-repeat:stretch}
.marker span{bottom:auto;top:50%;transform:translate(-50%,-50%);font-size:3cqw}.marker span:before,.marker span:after{font-size:2cqw}
@font-face{font-family:ReadablePixel;src:url('assets/vt323.ttf');font-weight:400;font-display:swap}
body,button,.loading{font-family:ReadablePixel,monospace;font-weight:400}
.dialog h1,.dialog h2,.meter-title,.scoreboard,.game-button,.toggle,.back,.text-button{font-weight:400;letter-spacing:0}
.meter-title{font-size:3.5cqw}.meter-title output{font-size:2.4cqw}.range-badge{font-size:2.2cqw}.scoreboard{font-size:2.5cqw}.scoreboard b{font-size:3.1cqw;font-weight:400}.wind strong{font-size:3.2cqw}.wind small{font-size:1.9cqw}.wind>span{font-size:2.8cqw}
.dialog h1,.dialog h2{font-size:4.2cqw}.dialog p{font-size:2.4cqw}.dialog .tiny{font-size:2cqw}.dialog .game-button{font-size:3.5cqw}.angle-button{font-size:2.9cqw}.shoot-button{font-size:4.6cqw}.distance strong{font-size:4.9cqw;font-weight:400}.distance strong span{font-size:2.6cqw}.distance small{font-size:1.9cqw!important}.hint p{font-size:2.1cqw}.toggle{font-size:3cqw}.toggle strong{font-size:2.7cqw}.back,.text-button{font-size:2.2cqw}.final-scores small{font-size:2cqw}.final-scores strong{font-weight:400}
.controls{border-image-slice:160 150 100 160 fill;border-image-width:6.4cqw 6cqw 4cqw 6.4cqw;border-image-repeat:stretch}
.marker{background:transparent;box-shadow:none}.marker span{color:#3d2a49;text-shadow:0 1px #fff8;font-family:monospace;background:transparent}.marker span:before,.marker span:after{display:none}
.meter-line{padding-left:.5%;padding-right:.5%}