.bleepo-display{width:min(100%,55vh);width:min(100%,55dvh);max-width:440px;margin:0 auto 25px}
.bleepo-pipe-frame{position:relative;padding:13px;overflow:hidden;border:3px solid #302526;border-radius:18px;background:linear-gradient(135deg,#342b2a 0%,#a7663d 9%,#d3a370 17%,#536b65 28%,#7c482c 42%,#d29a59 51%,#58372b 68%,#a35f38 81%,#344748 100%);box-shadow:inset 0 0 0 3px #d7a775,inset 0 0 0 7px #4c342b,4px 5px 0 #090812,0 12px 24px #07060a88}
.pipe-rivets{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 9px 9px,#f0cf95 0 2px,#513629 3px 5px,transparent 6px),radial-gradient(circle at calc(100% - 9px) 9px,#f0cf95 0 2px,#513629 3px 5px,transparent 6px),radial-gradient(circle at 9px calc(100% - 9px),#f0cf95 0 2px,#513629 3px 5px,transparent 6px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#f0cf95 0 2px,#513629 3px 5px,transparent 6px)}
.bleepo-image-button{display:block;position:relative;width:100%;aspect-ratio:2/3;padding:0;border:3px inset #343b3d;background:#5e5d5e;overflow:hidden;cursor:pointer}
.bleepo-image-button:focus-visible{outline:3px solid var(--pink);outline-offset:5px}
.bleepo-image-stack,.bleepo-pose{position:absolute;inset:0;display:block;width:100%;height:100%}
.bleepo-pose{object-fit:cover;opacity:0;pointer-events:none}
.bleepo-pose.is-current{opacity:1}
.bleepo-display-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 2px 0;color:var(--cream)}
.bleepo-display-caption>div:first-child{display:flex;flex-direction:column;gap:3px}
.bleepo-display-label{font:10px/1.4 var(--mono);letter-spacing:1.4px;color:var(--cyan)}
#bleepo-display-status{font:bold 12px/1.4 var(--mono);letter-spacing:.7px;color:var(--yellow)}
.bleepo-reset-wrap{position:relative}
.bleepo-reset{padding:9px 11px;border:2px outset #bd9568;background:linear-gradient(#725344,#48352f);color:#ffdfaa;box-shadow:2px 2px 0 #08080d;font:bold 10px/1.3 var(--mono);letter-spacing:.5px;white-space:nowrap}
.bleepo-reset:hover{background:linear-gradient(#906247,#50362c)}
.bleepo-reset:active{border-style:inset;transform:translate(1px,1px);box-shadow:1px 1px 0 #08080d}
.bleepo-reset-bubble{position:absolute;right:0;bottom:calc(100% + 11px);z-index:5;width:max-content;max-width:min(225px,78vw);padding:11px 13px;border:2px solid #b97c66;border-radius:11px;background:#f6e4c0;color:#403131;box-shadow:3px 4px 0 #100d13;font:12px/1.45 var(--mono);text-align:left;animation:bleepo-bubble-in .18s ease-out}
.bleepo-reset-bubble::after{content:"";position:absolute;right:18px;bottom:-10px;width:14px;height:14px;transform:rotate(45deg);border-right:2px solid #b97c66;border-bottom:2px solid #b97c66;background:#f6e4c0}
@keyframes bleepo-bubble-in{from{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.bleepo-projectile{position:fixed;z-index:95;pointer-events:none;width:var(--banana-size);height:var(--banana-size);object-fit:contain;filter:drop-shadow(5px 8px 4px #120d1188);transform-origin:center}
.bleepo-splat{position:fixed;z-index:96;display:block;width:var(--splat-size);height:calc(var(--splat-size) * .667);padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(3px 6px 4px #120d1188);animation:bleepo-splat-in .24s cubic-bezier(.2,1.35,.5,1)}
.bleepo-splat img{display:block;width:100%;height:100%;object-fit:contain}
.bleepo-splat:hover,.bleepo-splat:focus-visible{filter:drop-shadow(0 0 8px #f3ce73)}
.bleepo-splat.is-clearing{animation:bleepo-splat-out .18s ease-in forwards;pointer-events:none}
@keyframes bleepo-splat-in{from{opacity:.4;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes bleepo-splat-out{to{opacity:0;transform:scale(.7) rotate(13deg)}}
@media(max-width:430px){.bleepo-pipe-frame{padding:9px;border-radius:13px}.bleepo-display-caption{align-items:flex-start;flex-wrap:wrap}.bleepo-reset-wrap{margin-left:auto}.bleepo-reset{font-size:9px}}
@media(prefers-reduced-motion:reduce){.bleepo-reset-bubble,.bleepo-splat,.bleepo-splat.is-clearing{animation:none}}
.pause-motion .bleepo-reset-bubble,.pause-motion .bleepo-splat,.pause-motion .bleepo-splat.is-clearing{animation:none}