@font-face{font-family:Gochi;src:url(/fonts/GochiHand.woff2) format('woff2');font-display:swap}
@font-face{font-family:Patrick;src:url(/fonts/PatrickHand.woff2) format('woff2');font-display:swap}
:root{--door:#cfe9df;--door2:#bfe0d3;--ink:#2d3a3a;--muted:#5d706c;--paper:#fffdf7;--red:#e8553d;--yellow:#ffc93c;--blue:#3c8dde;--green:#3fae6a;--purple:#8a5cd6;--pink:#f06ba8;--orange:#f28a2e;--shadow:0 3px 0 rgba(0,0,0,.14),0 6px 16px rgba(30,60,50,.14)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#a9d3c3;color:var(--ink);font:19px/1.35 Patrick,'Comic Sans MS','Chalkboard SE',system-ui,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
button,a,input,label,select,textarea,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;min-height:100dvh}
.fridge{position:relative;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;background:linear-gradient(90deg,var(--door2) 0,var(--door) 10%,#d9efe6 55%,var(--door) 90%,var(--door2) 100%);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 0 40px rgba(0,0,0,.12);padding:max(10px,env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom)) 14px}
.handle{position:absolute;right:6px;top:120px;width:9px;height:160px;border-radius:6px;background:linear-gradient(90deg,#9fbfb3,#e7f4ef,#9fbfb3);box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}
h1,h2,h3,.hand{font-family:Gochi,Patrick,'Comic Sans MS',cursive;font-weight:400;margin:.2em 0}
h1{font-size:44px;line-height:1}h2{font-size:30px;line-height:1.05}h3{font-size:24px}
p{margin:.4em 0}.muted{color:var(--muted)}.small{font-size:16px}.center{text-align:center}
.logo{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin:12px 0 4px}
.logo span{display:inline-grid;place-items:center;min-width:34px;height:46px;padding:0 4px;font:400 40px/1 Gochi,cursive;color:#fff;border-radius:10px;box-shadow:var(--shadow);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.logo span.gap{background:none!important;box-shadow:none;min-width:10px}
.logo.sm span{min-width:24px;height:32px;font-size:27px;border-radius:7px}
.paper{position:relative;background:var(--paper);border-radius:6px;padding:16px 16px 14px;margin:18px 2px 14px;box-shadow:0 2px 0 rgba(0,0,0,.06),0 8px 18px rgba(30,60,50,.16);transform:rotate(var(--tilt,-.6deg))}
.paper:nth-of-type(2n){--tilt:.7deg}
.paper::before{content:"";position:absolute;top:-11px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--mag,var(--red));box-shadow:0 3px 4px rgba(0,0,0,.28)}
.paper.m-blue{--mag:var(--blue)}.paper.m-yellow{--mag:var(--yellow)}.paper.m-green{--mag:var(--green)}.paper.m-purple{--mag:var(--purple)}.paper.m-pink{--mag:var(--pink)}
.lined{background-image:repeating-linear-gradient(transparent 0 27px,#d8e6f3 27px 28px)}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px 16px;margin:10px 0;font:400 26px/1.05 Gochi,Patrick,cursive;color:#fff;background:var(--red);box-shadow:0 4px 0 rgba(0,0,0,.2);cursor:pointer;text-align:center;text-decoration:none}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.blue{background:var(--blue)}.btn.green{background:var(--green)}.btn.purple{background:var(--purple)}.btn.yellow{background:var(--yellow);color:#4a3500}.btn.pink{background:var(--pink)}.btn.orange{background:var(--orange)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.12);font-size:22px}
.btn.small{font-size:20px;padding:9px 12px;border-radius:12px}
.btn.huge{font-size:40px;padding:20px;animation:pulse 1.4s ease-in-out infinite}
.row{display:flex;gap:8px;align-items:center}.row>.grow{flex:1}
.pill{display:inline-block;border:0;border-radius:999px;padding:6px 12px;font:400 17px Patrick,cursive;background:#fff;color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.14);cursor:pointer;white-space:nowrap}
.pill.nudge{background:var(--yellow);color:#4a3500}.pill.skip{background:#f3d2cc;color:#8a2c1c}.pill.on{background:var(--ink);color:#fff}
input.txt{width:100%;font:400 20px Patrick,cursive;padding:12px 14px;border-radius:12px;border:2px solid #b9cfc7;background:#fff;color:var(--ink);outline:none}
input.txt:focus{border-color:var(--blue)}
.code{font:400 34px Gochi,cursive;letter-spacing:4px}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 4px}
.top .back{border:0;background:#fff8;border-radius:12px;font:400 20px Patrick;padding:6px 12px;color:var(--ink)}
.magnets{display:flex;flex-wrap:wrap;gap:10px 8px;justify-content:center;margin:8px 0}
.mag{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:14px;color:#fff;font:400 22px Gochi,cursive;box-shadow:var(--shadow);transform:rotate(var(--r,0deg));animation:pop .35s ease-out both}
.mag .x{border:0;background:#0003;color:#fff;border-radius:50%;width:22px;height:22px;font-size:14px;line-height:22px;padding:0;cursor:pointer}
.c0{background:var(--red)}.c1{background:var(--blue)}.c2{background:var(--green)}.c3{background:var(--purple)}.c4{background:var(--orange)}.c5{background:var(--pink)}.c6{background:#2a9d8f}.c7{background:#c28a12}.c8{background:#5b6fd6}.c9{background:#d94f7a}.c10{background:#4f9a3a}.c11{background:#8d6e63}
.seg{display:flex;gap:8px}.seg button{flex:1;border:0;border-radius:12px;padding:10px 0;font:400 24px Gochi,cursive;background:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.seg button.on{background:var(--blue);color:#fff}.seg button:disabled{opacity:.35}
/* status board */
.stat{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center;padding:8px 0;border-bottom:1.5px dashed #d6e3dd}
.stat:last-child{border-bottom:0}
.stat .nm{font:400 22px Gochi,cursive}.stat .st{font-size:16px;color:var(--muted)}
.stat .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.done-badge{color:var(--green);font:400 20px Gochi,cursive}
.chk{display:inline-block;margin-right:8px}.chk.ok{color:var(--green)}.chk.no{color:#b7c3bf}
/* drawing grid */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin-top:8px}
.thumb{position:relative;border:0;padding:5px 5px 4px;background:#fff;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.15);transform:rotate(var(--r,0deg));cursor:pointer;font:inherit;color:var(--ink)}
.thumb img,.thumb .ph{display:block;width:100%;aspect-ratio:1;border-radius:2px;background:#f3f6f4;object-fit:contain}
.thumb .ph{display:grid;place-items:center;font-size:30px;color:#b8c7c1}
.thumb .who{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb .tag{position:absolute;top:-8px;right:-6px;border-radius:999px;padding:2px 8px;font-size:14px;color:#fff;background:var(--red);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.thumb .tag.ok{background:var(--green)}.thumb .tag.wait{background:#9aa9a4}.thumb .tag.vote{background:var(--purple)}
/* draw */
.drawwrap{position:relative;margin:6px auto 0;width:100%;max-width:420px}
canvas.pad{display:block;width:100%;aspect-ratio:1;background:#fff;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.phrase{font:400 30px/1.05 Gochi,cursive;text-align:center;margin:4px 0 6px}
.timer{height:12px;border-radius:999px;background:#fff9;overflow:hidden;margin:6px 0}
.timer>i{display:block;height:100%;background:var(--green);transition:width .25s linear}
.timer.low>i{background:var(--red)}
.tools{display:flex;gap:10px;align-items:center;justify-content:center;margin:10px 0 2px}
.swatch{width:52px;height:52px;border-radius:50%;border:4px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.22);cursor:pointer}
.swatch.on{outline:4px solid var(--ink);outline-offset:2px}
.tool{border:0;background:#fff;border-radius:14px;height:52px;min-width:52px;padding:0 12px;font:400 20px Patrick;box-shadow:0 3px 0 rgba(0,0,0,.12);color:var(--ink)}
.tool.on{background:var(--ink);color:#fff}
.secs{font:400 28px Gochi,cursive;min-width:52px;text-align:center}
/* task + vote */
.art{display:block;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1;background:#fff;border-radius:4px;object-fit:contain}
.opt{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0;padding:12px 12px;border:2px solid #d7e4df;border-radius:14px;background:#fff;font:400 21px Patrick,cursive;color:var(--ink);text-align:left;cursor:pointer;animation:pop .3s ease-out both}
.opt.on{border-color:var(--purple);background:#f1eafd}
.opt .t{flex:1}
.heart{border:0;background:none;font-size:24px;padding:0 4px;cursor:pointer;filter:grayscale(1);opacity:.5}
.heart.on{filter:none;opacity:1;animation:pop .3s}
/* reveal */
.rv{min-height:70vh}
.rv .art{animation:drop .5s cubic-bezier(.2,1.4,.5,1) both}
.ans{position:relative;margin:8px 0;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.08);animation:pop .35s ease-out both}
.ans .t{font:400 22px Gochi,cursive}
.ans .by{font-size:15px;color:var(--muted)}
.ans .pk{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ans .pk span{font-size:14px;color:#fff;border-radius:999px;padding:1px 8px}
.ans .pts{position:absolute;right:10px;top:8px;font:400 20px Gochi,cursive;color:var(--green)}
.ans.real{background:#fff6cf;border:3px solid var(--yellow)}
.stamp{display:inline-block;transform:rotate(-6deg);border:3px solid var(--red);color:var(--red);border-radius:8px;padding:0 8px;font:400 18px Gochi,cursive;margin-left:6px;animation:stamp .4s ease-out both}
.board{margin-top:10px}
.board .b{display:flex;justify-content:space-between;padding:4px 2px;font-size:19px;border-bottom:1px dashed #dbe6e1}
.board .b .plus{color:var(--green);margin-left:6px;animation:pop .4s}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0}
.dots i{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.6}.dots i.on{background:var(--ink);opacity:1}
.tapnote{text-align:center;color:var(--muted);font-size:16px;margin:4px 0}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:12px 0}
.podium>div{flex:1;max-width:120px;text-align:center;border-radius:10px 10px 0 0;color:#fff;padding:8px 4px;font:400 20px Gochi,cursive;animation:rise .6s ease-out both}
.crown{font-size:56px;text-align:center;animation:drop .7s cubic-bezier(.2,1.4,.5,1) both}
/* toast + modal */
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:14px;font-size:18px;transition:transform .25s;z-index:30;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
#modal{position:fixed;inset:0;background:#0006;display:grid;place-items:center;z-index:20;padding:20px}
#modal[hidden]{display:none}
#modal .box{background:var(--paper);border-radius:16px;padding:18px;max-width:360px;width:100%;box-shadow:0 10px 30px #0004;animation:pop .25s}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:25}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}
.empty{text-align:center;color:var(--muted);padding:10px}
.hr{height:0;border-top:2px dashed #b9d4ca;margin:16px 0}
.howto li{margin:4px 0}
.spin{display:inline-block;animation:wig 1s ease-in-out infinite}
@keyframes pop{0%{transform:scale(.6) rotate(var(--r,0deg));opacity:0}70%{transform:scale(1.06) rotate(var(--r,0deg))}100%{transform:scale(1) rotate(var(--r,0deg));opacity:1}}
@keyframes drop{0%{transform:translateY(-60px) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes stamp{0%{transform:scale(2.4) rotate(-6deg);opacity:0}100%{transform:scale(1) rotate(-6deg);opacity:1}}
@keyframes rise{0%{transform:translateY(40px);opacity:0}100%{transform:none;opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes wig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media (max-width:370px){html,body{font-size:18px}h1{font-size:38px}.logo span{min-width:29px;height:41px;font-size:34px}.thumbs{gap:10px 8px}.btn{font-size:24px}.btn.huge{font-size:34px}}
@media (prefers-reduced-motion:reduce){.btn.huge,.spin{animation:none}}

/* ---- v2: accounts, avatars, artist bar ---- */
.linkbtn{background:none;border:0;padding:6px 2px;color:var(--blue);font:inherit;text-decoration:underline;cursor:pointer;display:inline-block}
#acct .linkbtn{display:block;margin:6px auto 0}
.av{--c:#5d706c;display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--c);overflow:hidden;vertical-align:middle;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av b{font:400 18px Gochi,cursive;color:var(--c);line-height:1}
.av.xs{width:24px;height:24px;border-width:2px}.av.xs b{font-size:13px}
.av.sm{width:30px;height:30px;border-width:2px}.av.sm b{font-size:16px}
.av.md{width:44px;height:44px}.av.md b{font-size:22px}
.av.lg{width:62px;height:62px;border-width:4px}.av.lg b{font-size:30px}
.mag .av{margin:-4px 6px -4px -6px}
.thumb .who .av,.board .av,.board .bn .av{margin-right:6px}
.board .bn{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stat .who2{display:flex;align-items:center;gap:10px;min-width:0}
.frame{background:#fff;border-radius:4px;overflow:hidden;max-width:420px;margin:0 auto}
.frame .art{display:block;border-radius:0;box-shadow:none;margin:0;width:100%}
.artbar{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 12px;background:#fffaf0;border-top:2px dashed #e5dccb}
.artbar .nm{flex:1;min-width:0;font:400 24px Gochi,cursive;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.artbar .av{width:42px;height:42px}
canvas.avpad{width:min(100%,280px);border-radius:50%;margin:10px auto}
/* reveal answers: points get their own column so nothing overlaps */
.ans .ahead{display:flex;align-items:flex-start;gap:8px}
.ans .ahead .t{flex:1;min-width:0;overflow-wrap:anywhere}
.ans .pts{position:static;flex:none;white-space:nowrap;margin-top:2px}
.ans .stamp{margin:10px 0 8px 3px;display:inline-block}
/* podium with avatars on top */
.podium .pc{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:6px;height:auto;background:none!important;padding:0;box-shadow:none;animation:none}
.podium .pc .pb{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;color:#fff;border-radius:10px 10px 0 0;padding:8px 4px 0;box-sizing:border-box;transform-origin:bottom;animation:rise .6s both}
.podium .pc .pn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 20px Gochi,cursive}
#toast{opacity:0;pointer-events:none;transition:transform .25s,opacity .25s}#toast.show{opacity:1}#toast:empty{display:none}
/* "Fridge Artist" (12 letters) on one line, down to 360 px */
.logo{flex-wrap:nowrap;gap:min(3px,.5vw)}
.logo span{min-width:min(30px,6vw);height:min(44px,9.4vw);font-size:min(38px,7.6vw);padding:0 min(4px,.6vw);border-radius:min(10px,2vw)}
.logo span.gap{min-width:min(10px,2vw)}
@media (max-width:370px){.logo span{min-width:6vw;height:9.4vw;font-size:7.6vw}}
.logo.sm span{min-width:min(22px,5vw);height:min(30px,7vw);font-size:min(25px,6vw);padding:0 min(3px,.5vw)}
/* phrase pick: two big, wrapping choices */
.btn.pickp{font:400 27px/1.12 Gochi,cursive;padding:16px 12px;white-space:normal;text-transform:none}

/* stroke replay on reveal cards */
.frame.rpf{position:relative}
.rpwrap{position:absolute;z-index:2;background:#fff;cursor:pointer;transition:opacity .25s}
.rpwrap.fade{animation:none;opacity:0}
.rpwrap canvas{display:block;width:100%;height:100%}
.rptag{position:absolute;left:8px;bottom:8px;background:rgba(45,58,58,.78);color:#fff;font:400 15px Patrick,system-ui,sans-serif;padding:3px 9px;border-radius:12px;pointer-events:none}
.rpbtn{position:absolute;z-index:3;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.25);font-size:22px;line-height:38px;padding:0;color:var(--ink);cursor:pointer}
.rpbtn[hidden]{display:none}
.frame.playing .rpbtn{opacity:.5}
.rv .rpwrap.first{animation:drop .5s cubic-bezier(.2,1.4,.5,1) both}