@font-face{font-family:BopoliHand;src:url('/play/assets/pangolin-latin-m8jKOiJo.woff2') format('woff2');font-display:swap}
@font-face{font-family:BopoliSans;src:url('/play/assets/inter-latin-8kRkwJBP.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--bop-ink:#413256;--bop-line:#655573;--bop-muted:#766080;--bop-paper:#fffdf6;--bop-bg:#f4efff;--bop-lilac:#d8c8ff;--bop-mint:#bcefc6;--bop-peach:#ffcfac;--bop-yellow:#fff0bd;--bop-sky:#c7ddff;--bop-hand:BopoliHand,cursive;--bop-ui:BopoliSans,system-ui,sans-serif}
.bopoli-logo{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;color:var(--bop-ink)}
.bopoli-letters{display:inline-flex;align-items:baseline;font:normal 58px/.9 var(--bop-hand);letter-spacing:-4px;white-space:nowrap;filter:drop-shadow(1px 2px 0 #655573)}
.bopoli-letters b{display:inline-block;font-weight:400;color:var(--bop-lilac);-webkit-text-stroke:1px var(--bop-ink);paint-order:stroke fill}
.bopoli-letters b:nth-child(2){color:var(--bop-mint);transform:translateY(-4px) rotate(8deg)}.bopoli-letters b:nth-child(3){color:var(--bop-peach);transform:rotate(-5deg)}.bopoli-letters b:nth-child(4){color:var(--bop-yellow);transform:translateY(-3px) rotate(-8deg)}.bopoli-letters b:nth-child(5){color:var(--bop-sky);transform:rotate(7deg)}.bopoli-letters b:nth-child(6){color:var(--bop-lilac);transform:translateY(-4px) rotate(-6deg)}.bopoli-letters i{font-style:normal;color:var(--bop-ink);letter-spacing:0}
.bopoli-logo:hover .bopoli-letters b:nth-child(even){transform:translateY(-6px) rotate(-5deg)}
.bopoli-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;border:2px solid var(--bop-line);border-radius:13px 17px 12px 16px;background:var(--bop-paper);color:var(--bop-ink);box-shadow:3px 4px 0 var(--bop-line);font:20px/1.2 var(--bop-hand);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;min-height:46px}
.bopoli-button:hover{transform:translateY(-3px) rotate(-1deg);background:var(--bop-lilac)}.bopoli-button:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--bop-line)}.bopoli-button.mint{background:var(--bop-mint)}.bopoli-button.peach{background:var(--bop-peach)}.bopoli-button.lilac{background:var(--bop-lilac)}
.bopoli-icon{display:inline-grid;place-items:center;flex-shrink:0}.bopoli-icon img{width:100%;height:100%;object-fit:contain}.bopoli-eyebrow{font:600 10px/1.5 var(--bop-ui);letter-spacing:1.8px;text-transform:uppercase;color:var(--bop-muted)}
:where(a,button,input,select,canvas):focus-visible{outline:3px solid #8d61be!important;outline-offset:4px}button,a,select{touch-action:manipulation}button:disabled{cursor:default} [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A simple tint keeps dialogs crisp, including on integrated browser compositors. */
dialog::backdrop{backdrop-filter:none!important;background:#3b2b5066}