:root{--ink:#3b2f2a;--paper:#fff6e5;--card:#fffdf7;--coral:#ff6f61;--teal:#2ec4b6;--sunshine:#ffbe0b;--violet:#8338ec;--meadow:#6fcf7c;--wood:#c98a4b;--shadow:#3b2f2a47;--radius:18px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;color:var(--ink);background:var(--paper);font-family:Nunito,sans-serif;overflow:hidden}#app,#app canvas{display:block;position:fixed;inset:0}#hud{pointer-events:none;font-family:Nunito,sans-serif;position:fixed;inset:0}#hud h1,#hud h2,#hud .display,#hud button{font-family:Fredoka,sans-serif}#hud button{pointer-events:auto;border:3px solid var(--ink);border-radius:var(--radius);background:var(--sunshine);color:var(--ink);cursor:pointer;box-shadow:0 5px 0 var(--ink);padding:.65em 1.6em;font-size:1.15rem;font-weight:600;transition:transform .12s,box-shadow .12s}#hud button:hover:not(:disabled){box-shadow:0 7px 0 var(--ink);transform:translateY(-2px)}#hud button:active:not(:disabled){box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}#hud button:disabled{opacity:.45;cursor:default}.cl-view-hint{color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);opacity:.85;background:#fffdf7d1;border-radius:12px;padding:.32rem .7rem;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:700;position:fixed;bottom:1.1rem;right:1.1rem}.hidden{display:none!important}.cl-setup{pointer-events:none;background:radial-gradient(circle at 28% 18%,#ffffff8c,#0000 55%),linear-gradient(160deg,#fff1d6 0%,#ffe3b0 45%,#cdeedd 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.cl-setup-card{background:var(--card);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--shadow);text-align:center;border-radius:28px;width:92vw;max-width:620px;padding:2.2rem 2.6rem 2rem;transform:rotate(-.6deg)}.cl-title{margin-bottom:.35rem;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15}.cl-title span{color:var(--coral);-webkit-text-stroke:1px var(--ink);display:block}.cl-subtitle{opacity:.82;margin-bottom:1.5rem;font-size:1.02rem;font-weight:700}.cl-chip-grid{grid-template-columns:repeat(2,1fr);gap:.9rem;margin-bottom:1.2rem;display:grid}.cl-chip{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);transform:rotate(var(--chip-rot,0deg));opacity:.48;background:#fff;border-radius:16px;align-items:center;gap:.45rem;padding:.65rem .7rem .65rem 3.3rem;transition:opacity .15s,transform .15s,box-shadow .15s;display:flex;position:relative}.cl-chip:before{content:"";background:var(--chip-color);border:2.5px solid var(--ink);border-radius:50%;width:1.6rem;height:1.6rem;position:absolute;top:50%;left:.65rem;transform:translateY(-50%)}.cl-chip.selected{opacity:1;transform:rotate(var(--chip-rot,0deg)) scale(1.03);box-shadow:6px 6px 0 var(--shadow)}#hud .cl-chip-toggle{width:1.8rem;height:1.8rem;box-shadow:2px 2px 0 var(--ink);background:#fff;border-radius:50%;flex:none;padding:0;font-size:.9rem;line-height:1}#hud .cl-chip.selected .cl-chip-toggle{background:var(--chip-color)}#hud .cl-chip-toggle:active{box-shadow:1px 1px 0 var(--ink);transform:translateY(1px)}#hud .cl-chip-toggle:hover{box-shadow:2px 2px 0 var(--ink);transform:none}.cl-chip-name{pointer-events:auto;border:none;border-bottom:2px dashed var(--ink);min-width:0;color:var(--ink);background:0 0;flex:1;padding:.15rem .1rem;font-family:Nunito,sans-serif;font-size:.98rem;font-weight:800}.cl-chip-name:focus{border-bottom-style:solid;outline:none}@keyframes clChipRefuse{0%,to{transform:rotate(var(--chip-rot,0deg)) scale(1.03) translateX(0)}15%{transform:rotate(var(--chip-rot,0deg)) scale(1.03) translateX(-7px)}35%{transform:rotate(var(--chip-rot,0deg)) scale(1.03) translateX(6px)}55%{transform:rotate(var(--chip-rot,0deg)) scale(1.03) translateX(-4px)}78%{transform:rotate(var(--chip-rot,0deg)) scale(1.03) translateX(3px)}}.cl-chip.refused{animation:.44s clChipRefuse}.cl-setup-hint{opacity:.7;margin-bottom:1.1rem;font-size:.88rem;font-weight:700}.cl-setup-hint.nudge{opacity:1;color:var(--coral)}#hud .cl-start-btn{background:var(--meadow);font-size:1.25rem}.cl-game{pointer-events:none;position:fixed;inset:0}.cl-players{flex-direction:column;gap:.55rem;max-width:min(250px,32vw);display:flex;position:fixed;top:1.3rem;left:1.3rem}.cl-player-chip{background:var(--card);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);opacity:.8;border-radius:14px;align-items:center;gap:.6rem;padding:.45rem .75rem;transition:transform .18s,opacity .18s,box-shadow .18s;display:flex;transform:rotate(-.6deg)}.cl-player-chip:nth-child(2n){transform:rotate(.7deg)}.cl-player-chip.active{opacity:1;box-shadow:5px 5px 0 var(--ink);transform:scale(1.06)rotate(0)}.cl-player-dot{background:var(--chip-color);border:2px solid var(--ink);border-radius:50%;flex:none;width:1.1rem;height:1.1rem}.cl-player-name{font-family:Fredoka,sans-serif;font-size:.98rem;font-weight:600;line-height:1.15}.cl-player-square{opacity:.62;font-size:.78rem;font-weight:700}.cl-roll-wrap{flex-direction:column;align-items:center;gap:.5rem;display:flex;position:fixed;bottom:2.1rem;left:50%;transform:translate(-50%)}#hud .cl-roll-btn{background:var(--coral);color:#fff3ec;padding:.75em 2.3em;font-size:1.35rem}.cl-roll-flourish{pointer-events:none;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);opacity:0;background:#fff;border-radius:14px;padding:.3rem .9rem;font-family:Fredoka,sans-serif;font-size:1.5rem;font-weight:600}.cl-roll-flourish.show{animation:1.5s cubic-bezier(.34,1.56,.64,1) forwards clFlourish}@keyframes clFlourish{0%{opacity:0;transform:translateY(14px)scale(.5)rotate(-6deg)}18%{opacity:1;transform:translateY(-6px)scale(1.15)rotate(3deg)}30%{opacity:1;transform:translateY(0)scale(1)rotate(0)}75%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-16px)scale(.9)}}.cl-banner-host{pointer-events:none;justify-content:center;display:flex;position:fixed;top:1.5rem;left:50%;transform:translate(-50%)}.cl-banner{border:3.5px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);opacity:0;white-space:nowrap;background:#fff;border-radius:18px;align-items:center;gap:.55rem;padding:.65rem 1.3rem;font-family:Fredoka,sans-serif;font-size:1.1rem;font-weight:600;display:flex}.cl-banner.show{animation:.42s cubic-bezier(.34,1.56,.64,1) forwards clBannerIn}.cl-banner.leave{animation:.42s ease-in forwards clBannerOut}@keyframes clBannerIn{0%{opacity:0;transform:translateY(-50px)rotate(-4deg)scale(.7)}60%{opacity:1;transform:translateY(6px)rotate(2deg)scale(1.05)}to{opacity:1;transform:translateY(0)rotate(0)scale(1)}}@keyframes clBannerOut{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}to{opacity:0;transform:translateY(-40px)rotate(4deg)scale(.8)}}.cl-banner-ladder{background:#eafff0}.cl-banner-chute{background:#fff0e8}.cl-banner-info{background:#fff9e6}.cl-banner-icon{font-size:1.35rem}.cl-winner{pointer-events:none;background:#3b2f2a73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.cl-winner-card{z-index:2;background:var(--card);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--shadow);text-align:center;border-radius:26px;padding:2.2rem 2.8rem;animation:.52s cubic-bezier(.34,1.56,.64,1) both clWinnerIn;position:relative;transform:rotate(-1deg)}@keyframes clWinnerIn{0%{opacity:0;transform:rotate(-1deg)scale(.6)translateY(30px)}to{opacity:1;transform:rotate(-1deg)scale(1)translateY(0)}}.cl-winner-trophy{margin-bottom:.25rem;font-size:3.4rem}.cl-winner-title{color:var(--chip-color,var(--ink));-webkit-text-stroke:1px var(--ink);margin-bottom:.35rem;font-size:2rem}.cl-winner-sub{opacity:.8;margin-bottom:1.4rem;font-weight:700}#hud .cl-again-btn{font-size:1.1rem}.cl-confetti{z-index:1;pointer-events:none;position:absolute;inset:0}.cl-confetti-piece{border:1.5px solid #3b2f2a80;width:9px;height:15px;animation-name:clConfettiFall;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;top:-6%}@keyframes clConfettiFall{0%{opacity:1;transform:translateY(-10vh)rotate(0)}to{transform:translate(var(--drift,40px), 110vh) rotate(var(--spin,360deg));opacity:.9}}