@font-face{font-family:Bangers;src:url(assets/fonts/Bangers.ttf) format("truetype");font-display:swap}
@font-face{font-family:Nunito;src:url(assets/fonts/Nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{--vh:100vh}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#2a1446;font-family:Nunito,system-ui,sans-serif;color:#3b2410;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;overscroll-behavior:none}
img{-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#2a1446;color:#ffd75a;font:32px Bangers,Impact,sans-serif;letter-spacing:2px;z-index:99}
.screen{position:fixed;left:0;top:0;width:100%;height:var(--vh);display:none;overflow:hidden}
.screen.on{display:block}

/* title */
#title{background:#2a1446 url(assets/img/title_l.webp) center/cover no-repeat}
#tbtns{position:absolute;left:3.2%;top:38%;width:min(30vw,52vh);display:flex;flex-direction:column;gap:1.1vh}
@media (max-aspect-ratio:1/1){
  #title{background-image:url(assets/img/title_p.webp)}
  #tbtns{left:50%;transform:translateX(-50%);top:25%;width:min(64vw,33vh)}
}
.btn{display:block;border:0;background:none;padding:0;cursor:pointer;width:100%;transition:transform .08s}
.btn img{width:100%;display:block;filter:drop-shadow(0 .5vh .8vh #000a)}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.95)}

/* game */
#game{background:#3a1d0d url(assets/img/bg_farm_l.webp) center/cover no-repeat}
@media (max-aspect-ratio:1/1){#game{background-image:url(assets/img/bg_farm_p.webp)}}
#board{position:absolute;background:url(assets/img/board.webp) 0 0/100% 100%;filter:drop-shadow(0 1.2vh 2vh #000b);touch-action:none}
#hls,#pcs,#fx{position:absolute;inset:0}
#fx{pointer-events:none}
.pc,.hl,.mk{position:absolute;width:9.4%;height:9.4%;transform:translate(-50%,-50%);pointer-events:none}
.pc{transition:left .2s ease-in-out,top .2s ease-in-out,opacity .25s,transform .25s;z-index:2}
.pc img{width:100%;height:100%;display:block;filter:drop-shadow(0 .35vh .35vh #0009)}
.pc.sel img{filter:drop-shadow(0 0 .5vh #fff) drop-shadow(0 0 1.2vh #ffe14d)}
.pc.sel{transform:translate(-50%,-56%) scale(1.08);z-index:5}
.pc.can img{animation:can 1.2s ease-in-out infinite}
@keyframes can{50%{filter:drop-shadow(0 0 .9vh #ffe14d) drop-shadow(0 .35vh .35vh #0009)}}
.pc.gone{opacity:0;transform:translate(-50%,-50%) scale(.3)}
.pc.hop{z-index:6}
.pc.kinged img{animation:kingpop .6s ease-out}
@keyframes kingpop{40%{transform:scale(1.35)}}
.hl{width:11%;height:11%;background:url(assets/img/cell_highlight.webp) center/100% 100%;z-index:1;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}
.hl.cap{filter:hue-rotate(-60deg) saturate(1.6)}
.hl.last{width:10.9%;height:10.9%;background:rgba(255,230,120,.22);border-radius:8%;animation:none}
.mk{display:none;z-index:4;font:900 3.6vmin/1 Nunito,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000;align-items:center;justify-content:center}
body.cb .mk{display:flex}
body.cb .hl{background:none;border:.6vmin dashed #fff;border-radius:50%;box-shadow:0 0 0 .4vmin #000 inset,0 0 0 .3vmin #000;width:7%;height:7%;animation:none}
body.cb .hl.last{border:0;box-shadow:none;width:10.9%;height:10.9%;border-radius:8%;background:rgba(255,255,255,.18)}
body.cb .pc.sel img{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 .25vh #000)}
body.cb .pc.sel{outline:.5vmin dashed #fff;outline-offset:.2vmin;border-radius:50%}

#jinx{position:absolute;pointer-events:none;filter:drop-shadow(0 1vh 1.5vh #0008);transform-origin:50% 96%}
#jinx.talk{animation:bob .5s ease-in-out 3}
@keyframes bob{50%{transform:translateY(-1.2%) rotate(-1deg)}}
#bubble{position:absolute;z-index:20;border-style:solid;border-width:2.2vmin 3vmin 4.4vmin 3vmin;border-image:url(assets/img/bubble.webp) 48 64 96 64 fill / 2.2vmin 3vmin 4.4vmin 3vmin;padding:.3vmin .4vmin .8vmin;font:800 clamp(13px,2.4vmin,22px)/1.2 Nunito,sans-serif;color:#1d1208;opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .18s,transform .22s cubic-bezier(.3,1.6,.6,1);pointer-events:none;min-height:9vmin;display:flex;align-items:center}
#bubble.on{opacity:1;transform:scale(1)}
#bubble{box-sizing:border-box}

#hud{position:absolute;display:flex;align-items:center;justify-content:center;gap:1.4vmin;z-index:8}
.badge{position:relative;border:0;background:none;padding:0;display:block}
.badge img{width:100%;display:block;filter:drop-shadow(0 .6vh .8vh #0009)}
.badge b{position:absolute;left:0;right:0;top:69%;text-align:center;font:400 var(--bf,5vmin)/1 Bangers,Impact,sans-serif;color:#fff;letter-spacing:.1em;text-shadow:0 .25vmin 0 #000,0 0 .6vmin #000}
button.badge{cursor:pointer}
#hF.ready img{animation:can 1.1s ease-in-out infinite}
#hF.off{filter:grayscale(.8) brightness(.75)}
#hF:active{transform:scale(.95)}
.badge.turn img{filter:drop-shadow(0 0 1.2vmin #ffe14d) drop-shadow(0 .6vh .8vh #0009)}

.chip{position:absolute;z-index:15;border:.35vmin solid #4a2a0c;border-radius:1.2vmin;background:linear-gradient(#f0b257,#c26d1f);color:#fff;font:400 clamp(14px,2.6vmin,24px)/1 Bangers,Impact,sans-serif;letter-spacing:.08em;padding:.9vmin 1.6vmin;text-shadow:0 .2vmin 0 #5a2c00;box-shadow:0 .5vmin 0 #4a2a0c,0 .8vmin 1.4vmin #0008;cursor:pointer}
.chip:active{transform:translateY(.3vmin);box-shadow:0 .2vmin 0 #4a2a0c}
.chip.small{position:static;font-size:clamp(12px,2vmin,18px);padding:.6vmin 1.2vmin}
#bMenu{left:max(1.2vmin,env(safe-area-inset-left));top:max(1.2vmin,env(safe-area-inset-top))}
#turnTag{pointer-events:none;background:linear-gradient(#4b2a7a,#2a1446);border-color:#ffd75a;color:#ffd75a;display:none}
#turnTag.on{display:block}
#toast{position:absolute;z-index:30;left:50%;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#2a1446e6;border:.35vmin solid #ffd75a;color:#fff;border-radius:1.4vmin;padding:1.1vmin 2vmin;font:400 clamp(15px,3vmin,28px)/1.1 Bangers,Impact,sans-serif;letter-spacing:.06em;text-align:center;pointer-events:none;max-width:90vw;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast small{display:block;font:700 clamp(11px,1.9vmin,17px)/1.2 Nunito,sans-serif;letter-spacing:0;color:#ffe9a8;white-space:normal}

/* fx */
.boom{position:absolute;width:30%;height:30%;transform:translate(-50%,-50%) scale(.2);background:url(assets/img/boom.webp) center/contain no-repeat;animation:boom .7s ease-out forwards;z-index:9}
@keyframes boom{40%{transform:translate(-50%,-50%) scale(1.05);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2);opacity:0}}
.cracker{position:absolute;width:12%;height:12%;transform:translate(-50%,-50%);background:url(assets/img/firecracker.webp) center/contain no-repeat;z-index:9;transition:left .55s cubic-bezier(.3,.0,.7,1),top .55s cubic-bezier(.3,-.6,.7,1),transform .55s}
.smoke{position:absolute;width:12%;height:12%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#ddd,#9990 70%);animation:smoke 1s ease-out forwards;z-index:9}
@keyframes smoke{to{transform:translate(-50%,-90%) scale(2.2);opacity:0}}
.fwk{position:fixed;width:var(--s,24vmin);height:var(--s,24vmin);transform:translate(-50%,-50%);background:url(assets/img/firework_strip.webp) 0 0/500% 100% no-repeat;animation:fwk .5s steps(5,jump-none) forwards;pointer-events:none;z-index:60}
@keyframes fwk{to{background-position:100% 0}}
.fwk.fade{animation:fwk .5s steps(5,jump-none) forwards,fade .6s .5s forwards}
@keyframes fade{to{opacity:0}}
.scr{position:absolute;width:9.4%;height:9.4%;transform:translate(-50%,-50%);font-size:4vmin;z-index:9;animation:smoke .9s ease-out forwards}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:70}
#flash.go{animation:flash .35s ease-out}
@keyframes flash{20%{opacity:.6}}
body.rf #flash.go{animation:none}

/* overlay + panels */
#ov{position:fixed;inset:0;height:var(--vh);display:none;place-items:center;background:#120822b8;z-index:50}
#ov.on{display:grid}
.panel{display:none;position:relative;background:var(--img) 0 0/100% 100% no-repeat;aspect-ratio:var(--ar);container-type:size;filter:drop-shadow(0 1.5vh 3vh #000c);grid-area:1/1}
.panel.on{display:block}
.pin{position:absolute;left:8%;right:8%;top:17%;bottom:7%;overflow:auto;font-size:3.6cqw}
#pOdds .pin{top:21%}
#pOpp .pin{top:14%;left:5%;right:5%}
.x{position:absolute;right:1%;top:4%;width:9cqw;height:9cqw;border-radius:50%;border:.6cqw solid #4a2a0c;background:#c2461f;color:#fff;font:900 4.8cqw/1 Nunito,sans-serif;cursor:pointer;box-shadow:0 .6cqw 0 #4a2a0c}
#oppCards{display:flex;gap:3%;justify-content:center;height:100%;align-items:center}
.opp{flex:1;border:0;background:none;padding:0;cursor:pointer;transition:transform .1s;max-width:31%}
.opp img{width:100%;display:block;border-radius:4%;filter:drop-shadow(0 .8cqw 1cqw #0008)}
.opp:hover{transform:translateY(-1.5%) scale(1.03)}
.opp:active{transform:scale(.96)}
.opp em{display:block;font:normal 400 3.6cqw/1.2 Bangers,Impact,sans-serif;letter-spacing:.06em;color:#6b3a10;margin-top:2%}
.howgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw 3cqw;align-content:start;font-weight:800;font-size:3.3cqw;line-height:1.15}
.howgrid>div{display:flex;align-items:center;gap:2.5cqw}
.howgrid img{width:8.5cqw;flex:none}
.howgrid img.sm{width:7cqw}
.howgrid .wide{grid-column:1/3}
.howgrid .tip{grid-column:1/3;margin:0;font-weight:700;font-size:2.7cqw;color:#6b3a10}
.howgrid .chip{position:static;grid-column:1/3;justify-self:center;font-size:3.6cqw}
#oddsList{display:flex;flex-direction:column;gap:2.2cqw;font-weight:800;font-size:3.4cqw}
#oddsList div{display:flex;gap:2cqw;align-items:baseline}
#oddsList i{font-style:normal;font-size:5cqw;width:7cqw;flex:none;text-align:center}
#oddsList b{font:400 4.6cqw/1 Bangers,Impact,sans-serif;letter-spacing:.04em;color:#8a2a0a}
#oddsList span{flex:1}
#oddsList u{text-decoration:none;font:400 4.6cqw/1 Bangers,Impact,sans-serif;color:#2a5a1a}
.panel.dark .pin{color:#ffe9c2}
.setgrid{display:flex;flex-direction:column;gap:2.6cqw;font:800 4.2cqw/1.1 Nunito,sans-serif;padding-top:1cqw}
.setgrid label{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.setgrid input[type=range]{width:46%;accent-color:#ffc43d;height:4cqw}
.setgrid select{width:46%;font:800 3.8cqw Nunito,sans-serif;border-radius:1cqw;background:#f7d9a0;border:.4cqw solid #4a2a0c;padding:.5cqw}
.setgrid .ck{justify-content:flex-start}
.setgrid input[type=checkbox]{width:5cqw;height:5cqw;accent-color:#ffc43d;margin:0}
.pausegrid{display:flex;flex-direction:column;gap:2.4cqw;align-items:center;justify-content:center}
.pausegrid .chip{position:static;width:62%;font-size:5cqw;padding:1.6cqw}

#end{display:none;position:absolute;inset:0;place-items:center;grid-area:1/1}
#end.on{display:grid}
#pEnd{display:block}
#endJinx{position:absolute;left:1%;bottom:0;height:88%;pointer-events:none;filter:drop-shadow(0 1vh 2vh #000a)}
#endSq{position:absolute;right:1%;bottom:2%;height:42%;pointer-events:none;display:none;filter:drop-shadow(0 1vh 2vh #000a)}
#end.lose #endSq{display:block}
.endin{top:30%;bottom:7%;left:6%;right:6%;color:#fff;text-shadow:0 .3cqw .4cqw #000;display:flex;flex-direction:column;gap:1.5cqw;overflow:hidden}
#endSub{font:400 6cqw/1 Bangers,Impact,sans-serif;letter-spacing:.06em;text-align:center;color:#ffd75a}
#endBody{display:flex;align-items:center;gap:3cqw;justify-content:center;flex:1;min-height:0}
#trophy{height:100%;max-height:30cqw}
#end.lose #trophy{display:none}
#endStats{background:#1d0f2ccc;border:.5cqw solid #c98a2e;border-radius:2cqw;padding:1.6cqw 3cqw;font:800 3.4cqw/1.35 Nunito,sans-serif;display:grid;grid-template-columns:auto auto;column-gap:4cqw}
#endStats span:nth-child(even){text-align:right;color:#ffd75a}
#end.lose #endStats{font-size:3.8cqw;display:block;max-width:80%;text-align:center}
#endBtns{position:absolute;display:flex;gap:2vmin;left:50%;transform:translateX(-50%)}
#endBtns .btn{width:max(214px,min(30vw,34vmin))}
@media (max-width:540px){#endBtns{flex-direction:column;align-items:center;gap:1.2vh}}
#end.lose .endin{top:40%}
#end.lose #endSub{font-size:5cqw}