@font-face{font-family:'Bangers';src:url(assets/bangers.ttf) format('truetype');font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#3b2414;font-family:Bangers,'Luckiest Guy',Impact,sans-serif;letter-spacing:.5px;color:#fcf0d4;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button img{display:block;width:100%;height:auto;pointer-events:none}
.hidden{display:none!important}
:root{--vh:100vh}
@supports (height:100dvh){:root{--vh:100dvh}}

/* ---------- game screen (portrait first) ---------- */
#game{position:fixed;inset:0;--porch:min(calc(58vw / .856),calc(var(--vh) * .33));background:url(assets/art/backyard_bg_portrait.webp) center/cover no-repeat #4f6b2a;overflow:hidden}
#icons{position:absolute;top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));display:flex;gap:4px;align-items:center;z-index:6}
.icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.icon img{width:100%}
.icon:active,.plankbtn:active{transform:translateY(2px) scale(.97)}
.icon:disabled{opacity:.45;filter:grayscale(.6)}
.plank{background:url(assets/ui/buttons/btn_blank_wood.webp) center/100% 100% no-repeat;padding:9px 14px 11px;font-size:17px;color:#fcf0d4;-webkit-text-stroke:1px #3b1d08;text-shadow:0 2px 0 #3b1d08;white-space:nowrap;margin-left:4px}
#left{font-size:21px;color:#ffe27a}
#stage{position:absolute;left:0;right:0;top:calc(60px + env(safe-area-inset-top));bottom:var(--porch);display:flex;align-items:center;justify-content:center;z-index:3}
#board{position:relative;width:min(98vw,calc((var(--vh) - 66px - var(--porch) - env(safe-area-inset-top)) * 1.2027));aspect-ratio:1080/898;background:url(assets/art/board_empty.webp) center/100% 100% no-repeat;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
#pegs{position:absolute;inset:0}
.hit{position:absolute;width:14.7%;height:16.5%;transform:translate(-50%,-58%);border-radius:50%;z-index:20;cursor:pointer}
.peg,.ring,.fx{position:absolute;pointer-events:none;max-width:none}
.ring{width:18.98%;height:20.04%;transform:translate(-50%,-50%);opacity:0;z-index:1}
.ring.on{animation:ringp .5s ease-in-out infinite alternate}
.ring.hint{animation:ringp .25s ease-in-out infinite alternate;filter:hue-rotate(-25deg) saturate(1.6) brightness(1.15)}
@keyframes ringp{from{opacity:.5}to{opacity:1}}
.peg{z-index:2;transform-origin:50% 62%}
.peg.idle{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-1.5%) rotate(-1.5deg)}}
.peg.sel{z-index:3;animation:none}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#jinx{position:absolute;left:calc(-2vw + env(safe-area-inset-left));bottom:0;height:var(--porch);z-index:4;pointer-events:none}
#jinx img{height:100%;width:auto;display:block;transform-origin:50% 100%;transition:opacity .12s}
#jinx.bounce img{animation:jb .35s ease-in-out 2}
@keyframes jb{50%{transform:translateY(-3%) rotate(-2deg)}}
#nutf{position:absolute;right:0;top:calc(4px + env(safe-area-inset-top));height:min(15vh,24vw / .532);aspect-ratio:460/864;z-index:2;transform:translateX(62%);transition:transform .55s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
#nutf img{height:100%;width:auto;display:block}
#nutf.peek{transform:translateX(0)}
/* speech bubbles: 9-slice + tail from the pack */
.bub{position:absolute;z-index:7;border-image:url(assets/ui/speech_bubble_9slice.webp) 64 fill / 26px stretch;border-style:solid;border-width:26px;padding:0;min-width:90px;max-width:min(44vw,250px);color:#1f0e04;font-size:clamp(16px,4.6vw,22px);line-height:1.05;text-align:center;opacity:0;transform:scale(.5);transition:opacity .18s,transform .22s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.bub span{display:block;margin:-12px -10px}
.bub:after{content:'';position:absolute;width:38px;height:34px;left:-6px;bottom:-44px;background:url(assets/ui/speech_bubble_tail.webp) center/contain no-repeat}
.bub.flip:after{left:auto;right:-6px;transform:scaleX(-1)}
.bub.on{opacity:1;transform:scale(1)}
#bubble{left:52vw;bottom:calc(var(--porch) * .52);transform-origin:0 100%}
#bubble:after{left:-30px;bottom:-8px;transform:rotate(55deg)}
#nbubble{right:calc(min(15vh,24vw / .532) * .55 + 4px);top:calc(10px + env(safe-area-inset-top));transform-origin:100% 0}
#nbubble:after{right:-30px;bottom:auto;top:4px;transform:scaleX(-1) rotate(-60deg)}
#msg{position:absolute;left:50%;top:calc(62px + env(safe-area-inset-top));transform:translateX(-50%);z-index:8;background:rgba(40,18,4,.88);border:2px solid #ffe27a;padding:6px 12px;border-radius:12px;font-size:17px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;width:max-content;max-width:92vw}
#msg.on{opacity:1}

/* ---------- title ---------- */
.screen{position:fixed;inset:0;z-index:10}
#title{background:url(assets/art/title_screen_portrait.webp) center top/cover no-repeat #3b2414}
#tmenu{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(64vw,300px);display:flex;flex-direction:column;align-items:center;gap:4px}
#tmenu .plankbtn{width:100%;min-height:44px}
#tmenu #how,#tmenu #scores{width:90%}
.plankbtn{filter:drop-shadow(0 4px 2px rgba(0,0,0,.4))}
.plankbtn.blank,.plankbtn.green{display:block;margin:8px auto 0;width:min(70vw,260px);aspect-ratio:440/116;background:url(assets/ui/buttons/btn_blank_wood.webp) center/100% 100% no-repeat;font-size:clamp(20px,6vw,28px);color:#fcf0d4;-webkit-text-stroke:1.5px #3b1d08;text-shadow:0 3px 0 #3b1d08}
.plankbtn.green{background-image:url(assets/ui/buttons/btn_blank_green.webp)}
.pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06) rotate(-1deg)}}
.tsnd{position:absolute;top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right))}
.dim{background:rgba(20,8,0,.6);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}
.card{margin:auto;max-width:480px;width:100%;background:#f3dfb4;color:#2b1405;border:5px solid #2b1405;border-radius:20px;padding:14px 18px 18px;box-shadow:0 8px 0 rgba(0,0,0,.4);font-family:'Trebuchet MS',Verdana,sans-serif;letter-spacing:0}
.card h2{font-family:Bangers,Impact,sans-serif;letter-spacing:1px;margin:2px 0 8px;font-size:32px;color:#c0392b;text-align:center;-webkit-text-stroke:1px #2b1405}
.card ol{padding-left:22px;line-height:1.35;font-size:16px;margin:0 0 6px}
.small{font-size:14px;margin:6px 0}
#hsbody{font-size:18px;line-height:1.5;text-align:center}
#hsbody b{font-family:Bangers,Impact,sans-serif;font-size:24px;letter-spacing:1px;color:#c0392b}
/* ---------- end ---------- */
.endwrap{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%}
#endpanel{max-height:calc(var(--vh) * .62);max-width:92vw;width:auto;border-radius:12px;box-shadow:0 8px 0 rgba(0,0,0,.4);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4) rotate(-6deg);opacity:0}}
#endbest{font-size:clamp(16px,4.5vw,21px);text-align:center;text-shadow:0 2px 0 #000;max-width:92vw}
.endbtns{display:flex;flex-direction:column;align-items:center}
#replay{width:min(72vw,280px)}

/* ---------- landscape phones / desktop ---------- */
@media (orientation:landscape){
  #game{background-image:url(assets/art/backyard_bg_landscape.webp);--nutw:calc(var(--vh) * .5 * .532)}
  #stage{top:0;bottom:0;left:auto;right:calc(var(--nutw) + 4px);width:calc((var(--vh) - 12px) * 1.2027);max-width:calc(100vw - var(--nutw) - 120px)}
  #board{width:min(100%,calc((var(--vh) - 12px) * 1.2027))}
  #jinx{height:calc(var(--vh) * .8);left:calc(-3vh + env(safe-area-inset-left))}
  #nutf{top:auto;bottom:0;height:calc(var(--vh) * .5);transform:translateX(70%)}
  #nutf.peek{transform:translateX(0)}
  #nbubble{top:auto;right:6px;bottom:calc(var(--vh) * .5 + 30px);max-width:calc(var(--nutw) + 120px)}
  #nbubble:after{top:auto;bottom:-40px;right:6px;transform:scaleX(-1)}
  #bubble{left:calc(8px + env(safe-area-inset-left));top:62px;bottom:auto;max-width:min(240px,calc(100vw - var(--nutw) - (var(--vh) - 12px) * 1.2027 + 60px));font-size:clamp(15px,4.2vh,22px)}
  #bubble:after{left:30px;bottom:-40px;transform:none}
  #msg{top:auto;bottom:8px}
  #title{background-image:url(assets/art/title_screen_landscape.webp);background-position:center}
  #tmenu{left:calc(4vw + env(safe-area-inset-left));transform:none;width:min(30vw,250px);bottom:max(8px,env(safe-area-inset-bottom))}
  #endpanel{max-height:calc(var(--vh) * .7)}
  .endwrap{flex-direction:row;gap:16px}
  .endbtns{max-width:38vw}
  #replay{width:min(36vw,260px)}
  .plankbtn.blank{width:min(34vw,240px)}
}
@media (orientation:landscape) and (min-height:700px){#icons .icon{width:60px;height:60px}.plank{font-size:22px}}