*{box-sizing:border-box} :root{font-family:'Trebuchet MS','Arial Rounded MT Bold',sans-serif;color:#292b26;color-scheme:light}body{margin:0;background:#243d32;min-height:100dvh;display:grid;place-items:center;overflow:hidden}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:4px solid #325e91;outline-offset:4px}button:disabled{cursor:default} [hidden]{display:none!important}.game{position:relative;width:min(100vw,100dvh);aspect-ratio:1;overflow:hidden;container-type:inline-size;isolation:isolate;background:#bed6ab}.garden{position:absolute;inset:0;background:url('assets/garden.png') center/cover;z-index:-3}.garden:after{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff12,transparent 55%,#3443230d)}.logo{position:absolute;top:1.6%;left:25%;width:50%;height:10%;margin:0;z-index:3}.logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.settings-button{position:absolute;top:2.5%;right:2.5%;width:7.5%;aspect-ratio:1;border:0.35cqw solid #fff7df;border-radius:50%;background:#eaf1dd;color:#50725d;font-size:4.8cqw;line-height:1;box-shadow:0 .5cqw .7cqw #28422e35;z-index:5;transition:transform .25s}.settings-button:hover{transform:rotate(25deg)}.panda-label{position:absolute;top:12.5%;left:43%;width:14%;text-align:center;border:0.28cqw solid #a8bb90;border-radius:3cqw;background:#507558;color:#fffbed;font-weight:900;font-size:2.5cqw;letter-spacing:.1cqw;padding:.35cqw}.panda{position:absolute;left:27%;top:17%;width:46%;height:40%;background-image:url('assets/pandas.png');background-size:400% 100%;background-position:0% 0%;background-repeat:no-repeat;transform-origin:50% 95%;filter:drop-shadow(0 1cqw .4cqw #36412f24);z-index:1}.panda.idle{animation:breathe 3.6s ease-in-out infinite}.panda.rock{background-position:33.3333% 0}.panda.paper{background-position:66.6667% 0}.panda.scissors{background-position:100% 0}.panda.reveal{animation:reveal .6s cubic-bezier(.18,.86,.3,1.35)}.panda.counting{animation:anticipate .55s ease-in-out infinite}.chant{position:absolute;right:8%;top:18%;border:.35cqw solid #383b2c;border-radius:45%;background:#fff9e7;padding:2cqw;text-align:center;font-size:3cqw;font-weight:900;transform:rotate(5deg);z-index:2;box-shadow:0 .6cqw 0 #45473222;animation:pop .3s both}.chant span{display:block;color:#e87535;letter-spacing:1.5cqw;font-size:3cqw}.board{position:absolute;top:56%;left:24%;width:52%;height:17%;background:#fff7dfed;border:.5cqw solid #858348;border-radius:1cqw;box-shadow:inset 0 0 0 .45cqw #d9c99b,0 .9cqw .8cqw #3c452e35;text-align:center;padding:1.2cqw 1cqw}.board p{margin:.25cqw;font-weight:700;font-size:1.8cqw}.board h2{margin:.5cqw 0;color:#e77c36;font-size:3.8cqw;font-weight:900;line-height:1.2}.choices{position:absolute;left:14%;right:14%;top:76%;height:20%;display:flex;gap:3.2%}.choice{position:relative;width:31.2%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:.35cqw solid #a6ae7a;border-radius:4cqw;background:linear-gradient(135deg,#fffdf0,#f7eed3);box-shadow:inset 0 0 0 .45cqw #fffdf4,0 .6cqw 0 #575d3530;color:#252923;font-weight:1000;font-size:2.7cqw;transition:transform .2s,box-shadow .2s,border-color .2s; padding:.7cqw}.choice:hover:not(:disabled){transform:translateY(-.7cqw) rotate(-2deg);box-shadow:inset 0 0 0 .45cqw #fffdf4,0 1cqw 1.2cqw #575d3530}.choice.selected{border-color:#f78e32;background:#ffe3bc;box-shadow:0 0 0 .5cqw #ffb269,0 .8cqw 1cqw #63382430;transform:translateY(-.4cqw)}.choice small{display:none;position:absolute;top:-2.5cqw;border-radius:2cqw;background:#ff8c2e;border:.25cqw solid #ffd3a0;color:#fff;font-size:2cqw;padding:.4cqw 2cqw}.choice.selected small{display:block}.hand-art{display:block;width:14cqw;height:13cqw;background-image:url('assets/reference.png');background-size:100cqw 100cqw;mix-blend-mode:multiply}.rock-art{background-position:-17.4cqw -77.5cqw}.paper-art{background-position:-43.8cqw -76.8cqw}.scissors-art{background-position:-67cqw -76.8cqw}.menu-panel{position:absolute;left:30%;top:64%;width:40%;display:grid;gap:1.7cqw;z-index:2}.primary,.secondary{font-weight:900;border-radius:2.4cqw;padding:1.6cqw 2.5cqw;font-size:3cqw;border:.3cqw solid #fff0ce;transition:transform .2s,filter .2s;box-shadow:0 .55cqw 0 #72503555}.primary{background:linear-gradient(#ffa448,#ed7d2e);color:#fffbed;text-shadow:0 .15cqw #b45c2e}.primary span{font-size:2.1cqw;margin-left:1cqw}.secondary{background:#fff5da;color:#526743;border-color:#a5ae7c}.primary:hover,.secondary:hover{transform:translateY(-.25cqw);filter:brightness(1.04)}.primary:active,.secondary:active{transform:translateY(.3cqw)}.menu .panda{top:20%;height:43%;width:49%;left:25.5%}.menu .panda-label{top:15%}.petals{position:absolute;inset:0;pointer-events:none;z-index:4}.petals i{position:absolute;top:-5%;width:1.3%;height:2%;background:#f7bcca;border-radius:90% 10% 80% 20%;opacity:.8;animation:fall 14s linear infinite}.petals i:nth-child(2){left:20%;animation-delay:-3s}.petals i:nth-child(3){left:40%;animation-delay:-10s}.petals i:nth-child(4){left:60%;animation-delay:-6s}.petals i:nth-child(5){left:80%;animation-delay:-12s}.petals i:nth-child(6){left:95%;animation-delay:-8s}dialog{position:absolute;margin:auto;width: min(78vw,64vh);max-width:580px;padding:0;border:4px solid #bac193;border-radius:30px;background:#fff7e4;color:#33392c;box-shadow:0 20px 80px #15302266}dialog::backdrop{background:#183b3159;backdrop-filter:blur(4px)}dialog[open]{animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}.dialog-inner{padding:clamp(20px,4cqw,45px);text-align:center}.dialog-inner h2{font-size:clamp(26px,4cqw,44px);margin:5px 0 24px}.dialog-inner .primary,.dialog-inner .secondary{display:block;width:100%;font-size:clamp(18px,2.6cqw,27px);padding:13px;margin-top:14px;border-radius:18px}.eyebrow{font-weight:900;font-size:clamp(12px,1.6cqw,16px);letter-spacing:1px;color:#6b7a55}.close{position:absolute;right:12px;top:8px;background:none;border:0;font-size:30px;color:#657256}.setting-row{display:flex;align-items:center;gap:10px;text-align:left;padding:18px 0;font-size:clamp(16px,2.4cqw,23px);font-weight:800;border-bottom:1px solid #dfd8be;cursor:pointer}.setting-row small{display:block;font-size:14px;font-weight:400;margin-top:4px;color:#738061}.setting-row input{position:absolute;opacity:0;width:1px;height:1px}.switch{margin-left:auto;width:52px;height:30px;border-radius:18px;background:#c8c9b4;position:relative;flex-shrink:0;transition:background .2s}.switch:after{content:'';position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff8e8;box-shadow:0 2px 4px #33443333;transition:transform .2s}input:checked+.switch{background:#68875c}input:checked+.switch:after{transform:translateX(22px)}input:focus-visible+.switch{outline:3px solid #325e91;outline-offset:3px}.result-mark{font-size:60px;line-height:1;margin:0;color:#e8893e}.result-inner h2{color:#e57d34;margin-bottom:10px}.result-inner>p:not(.eyebrow):not(.result-mark){font-size:18px}.game.win .petals i{animation-duration:3s}.game.lose .panda{animation:breathe 2s infinite}@keyframes breathe{50%{transform:translateY(-.5cqw) scale(1.015)}}@keyframes anticipate{50%{transform:translateY(-1cqw) rotate(-3deg)}}@keyframes reveal{0%{transform:scale(.88) rotate(-6deg)}65%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}@keyframes fall{to{transform:translate(12cqw,110cqw) rotate(380deg)}}@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:450px){dialog{width:88vw}.board p{font-size:2.3cqw}.board h2{font-size:4cqw}.choices{left:9%;right:9%;gap:3%}.choice{font-size:3.1cqw}.menu-panel{width:46%;left:27%}.primary,.secondary{font-size:3.5cqw}}
.panda{left:31.25%;top:10%;width:37.5%;height:50%}.menu .panda{left:29.75%;top:12%;width:40.5%;height:54%}
.hand-art{height:11.2cqw;border-radius:24%;margin-bottom:1cqw}.rock-art{background-position:-17.4cqw -77cqw}.board{background-color:#fff7df}
@font-face{font-family:Baloo;src:url('assets/baloo2.ttf') format('truetype');font-weight:400 800;font-style:normal;font-display:swap}
:root{font-family:Baloo,'Trebuchet MS',sans-serif}button{font-weight:800!important}.board{top:55.5%;height:16%;padding:.8cqw 1cqw}.board h2{font-size:3.7cqw;line-height:1.1;margin:.5cqw 0}.board p{line-height:1.25;font-size:1.9cqw}.primary,.secondary{line-height:1.2}.heart-bar{display:flex;align-items:center;justify-content:center;gap:.5cqw;line-height:1}.panda-hearts{position:absolute;top:12.3%;left:42%;width:16%;padding:.65cqw 1cqw;border-radius:4cqw;background:#fff8e9e8;border:.25cqw solid #eec5a2;box-shadow:0 .3cqw .7cqw #3b533b25;z-index:2}.heart{font-family:Arial,sans-serif;font-size:3.1cqw;color:#ed7a84;filter:drop-shadow(0 .2cqw 0 #fff9e9);transition:color .3s,transform .3s}.heart.empty{color:#abac91;opacity:.7}.menu .panda-hearts{display:none}.player-health{position:absolute;top:72.3%;left:38%;width:24%;height:4%;display:flex;justify-content:center;align-items:center;gap:1cqw;background:#fff7e4ee;border-radius:3cqw;box-shadow:0 .2cqw .4cqw #354a3533}.player-health .heart{font-size:2.6cqw}.you-label{font-size:1.8cqw;font-weight:800;color:#55734f}.choices{top:78%;height:19%}.hand-art{width:13cqw;height:13cqw;margin-bottom:0;background-image:url('assets/hands.png');background-size:300% 100%;mix-blend-mode:normal;border-radius:0;background-repeat:no-repeat}.rock-art{background-position:0% 0}.paper-art{background-position:50% 0}.scissors-art{background-position:100% 0}.choice{line-height:1.1;padding:.3cqw;font-size:2.5cqw}.dialog-inner h2{font-weight:800;line-height:1.15}.setting-row{line-height:1.15}.eyebrow{line-height:1.3}@media(max-width:450px){.board p{font-size:2.4cqw}.board h2{font-size:4cqw}.you-label{font-size:2.3cqw}.player-health{left:34%;width:32%}.choice{font-size:3cqw}}
.settings-button{display:grid;place-items:center;padding:0}.settings-button svg{display:block;width:60%;height:60%;pointer-events:none}
/* Center the title, panda and actions together on the menu screen. */
.game.menu{display:flex;flex-direction:column;align-items:center;justify-content:center}
.menu .logo{position:relative;top:auto;left:auto;flex:0 0 10cqw}
.menu .panda{position:relative;top:auto;left:auto;flex:0 0 54cqw;margin-top:-4cqw}
.menu .menu-panel{position:relative;top:auto;left:auto;flex:0 0 auto;margin-top:-2cqw}

/* One standalone transparent logo shared by the menu and play screen. */
.logo{top:-1.5%;height:17.26%;background:none;mask-image:none}
.logo img{display:block;width:100%;height:100%;object-fit:contain}
.menu .logo{flex-basis:17.26cqw;height:17.26cqw}