@font-face{font-family:'Sour Gummy';src:url(/fonts/SourGummy.woff2) format('woff2');font-weight:100 900;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url(/fonts/AtkinsonHyperlegibleNext.woff2) format('woff2');font-weight:200 800;font-display:swap}
:root{
  --display:'Sour Gummy',ui-rounded,system-ui,sans-serif;--text:'Atkinson Hyperlegible Next',system-ui,sans-serif;
  --bg:#f8f2e8;--line:rgba(42,34,51,.12);--fg:#2a2233;--muted:#6f6679;--err:#d93b4f;
  --yellow:#ffe27a;--yellow-2:#f2c94c;--pink:#ffb5d0;--pink-2:#f28db2;--lilac:#d6c4ff;--lilac-2:#b39af7;
  --mint:#b4ebcb;--mint-2:#84d3a8;--sky:#b7daff;--sky-2:#8cc0f7;
  --shadow:0 1px 2px rgba(42,34,51,.07),0 10px 24px -8px rgba(42,34,51,.2);
  --btn:#e6e0d6;--btn-down:#dcd5c9;
  --lift:drop-shadow(0 10px 12px rgba(58,36,82,.13)) drop-shadow(0 2px 2px rgba(58,36,82,.09));
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper:var(--grain),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23b7daff' fill-opacity='.6' d='M44.6-58.7C57.1-49.1 66.1-35.3 70.4-19.9 74.7-4.5 74.3 12.5 67.4 26.3 60.5 40.1 47.1 50.7 32.3 58.4 17.5 66.1 1.3 70.9-15.9 69.4-33.1 67.9-51.3 60.1-62.2 46.4-73.1 32.7-76.7 13.1-73.4-4.4-70.1-21.9-59.9-37.3-46.3-46.9-32.7-56.5-16.3-60.3.3-60.7 17-61.1 32.1-68.3 44.6-58.7Z' transform='translate(100 100)'/%3E%3C/svg%3E") left -150px top -140px/380px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23d6c4ff' fill-opacity='.6' d='M38.9-52.3C50.9-44.6 61-33.2 66.3-19.6 71.6-6 72.1 9.8 66.2 22.6 60.3 35.4 48 45.2 34.6 53.9 21.2 62.6 6.7 70.2-9.4 72.6-25.5 75-43.2 72.2-54.6 61.6-66 51-71.1 32.6-72.8 14.7-74.5-3.2-72.8-20.6-64.6-33.8-56.4-47-41.7-56-27.4-62.7-13.1-69.4.8-73.8 13.5-70.4 26.2-67 26.9-60 38.9-52.3Z' transform='translate(100 100) rotate(40)'/%3E%3C/svg%3E") right -170px bottom -150px/440px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23b4ebcb' fill-opacity='.6' d='M44.6-58.7C57.1-49.1 66.1-35.3 70.4-19.9 74.7-4.5 74.3 12.5 67.4 26.3 60.5 40.1 47.1 50.7 32.3 58.4 17.5 66.1 1.3 70.9-15.9 69.4-33.1 67.9-51.3 60.1-62.2 46.4-73.1 32.7-76.7 13.1-73.4-4.4-70.1-21.9-59.9-37.3-46.3-46.9-32.7-56.5-16.3-60.3.3-60.7 17-61.1 32.1-68.3 44.6-58.7Z' transform='translate(100 100) rotate(160)'/%3E%3C/svg%3E") right -140px top 38%/260px no-repeat,var(--bg);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:101vh;color:var(--fg);font:17px/1.4 var(--display);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
body.has-blobs{isolation:isolate}
#blob-background{z-index:-1;pointer-events:none}
body.has-blobs .screen{background:var(--grain)}
input,textarea{-webkit-user-select:text;user-select:text}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;overflow-y:auto;overflow-x:hidden;gap:14px;padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));text-align:center;background:var(--paper)}
.screen.on{display:flex}
.screen>*{flex-shrink:0}
body.host .screen{padding-bottom:calc(var(--bar,0px) + 24px)}
canvas{position:fixed;inset:0;width:100%;height:100%}
canvas.screen,body.has-blobs canvas.screen{padding:0;background:var(--grain),var(--bg)}
p{margin:0;max-width:34ch;color:var(--muted)}
p,label,.big,#grid div,#timer{font-family:var(--text)}

input{font:inherit;font-family:var(--text);width:100%;max-width:320px;height:48px;padding:0 20px;border:0;border-radius:999px;background:rgba(255,255,255,.7);color:var(--fg);outline:none;box-shadow:inset 0 0 0 1.5px var(--line);-webkit-appearance:none;appearance:none;transition:background-color .15s,box-shadow .15s}
input::placeholder{color:var(--muted);opacity:.8}
input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--fg)}
input.code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:800}
input.code::placeholder{text-transform:none;letter-spacing:normal;font-weight:500}

button{font:inherit;font-family:var(--text);font-size:16px;font-weight:600;width:auto;min-width:220px;max-width:320px;height:48px;padding:0 32px;border:0;border-radius:999px;background:var(--btn);color:var(--fg);outline:none;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none;transition:transform .12s,background-color .12s,opacity .15s}
button:not(.note):active{transform:scale(.98);background:var(--btn-down)}
button:disabled{opacity:.4;transform:none;cursor:default}
button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
button.sec{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
button.sec:active{background:rgba(42,34,51,.05)}
.paper{background:#fffcf7;box-shadow:0 0 0 1px rgba(42,34,51,.07),0 1px 1px rgba(42,34,51,.05),0 8px 16px -10px rgba(42,34,51,.32)}
button.paper:active{background:#f3ede4}
.codefield{position:relative}
.codefield input{max-width:none;padding:0 48px 0 12px}
.codefield .go{position:absolute;top:4px;right:4px;min-width:0;width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%}
label{width:100%;max-width:320px;text-align:left;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
label input{max-width:none}
.row{display:flex;gap:10px;width:100%;max-width:320px}
.row>*{flex:1;min-width:0;max-width:none}
#err{color:var(--err);min-height:1.4em;font-weight:600}
#connection{position:fixed;z-index:5;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));translate:-50% 0;width:max-content;max-width:calc(100% - 32px);padding:10px 18px;border-radius:16px;background:var(--fg);color:#fff;box-shadow:var(--shadow);font:600 14px/1.35 var(--text);text-align:center}
body.host #connection{bottom:calc(var(--bar,0px) + 12px)}

.note{--c:var(--yellow);--c2:var(--yellow-2);--tilt:-2deg;position:relative;border-radius:4px;background:linear-gradient(rgba(58,36,82,.05) 0 16px,transparent 0),linear-gradient(-45deg,transparent 16px,var(--c) 0);filter:var(--lift);transform:rotate(var(--tilt))}
.note::after{content:"";position:absolute;right:0;bottom:0;width:22.6px;height:22.6px;border-radius:0 0 0 4px;background:linear-gradient(-45deg,transparent 50%,var(--c2) 0)}
.note.pink{--c:var(--pink);--c2:var(--pink-2)}
.note.lilac{--c:var(--lilac);--c2:var(--lilac-2)}
.note.mint{--c:var(--mint);--c2:var(--mint-2)}
.note.sky{--c:var(--sky);--c2:var(--sky-2)}
.note.yellow{--c:var(--yellow);--c2:var(--yellow-2)}
.note.blank{--c:#fffcf7;--c2:#ece5da}

#join{justify-content:space-between;gap:28px;padding-top:calc(64px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.joinform{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
#discovered{width:100%;min-height:48px;height:auto;padding:12px 20px;overflow-wrap:anywhere}
#create{padding:0 12px}
.logo{display:flex;flex-direction:column;align-items:center;margin:0;font-size:46px;font-weight:900;line-height:1;letter-spacing:-.01em}
.logo .note{padding:24px 26px 20px}
.logo .note:first-child{--tilt:-5deg;margin-right:48px;z-index:1}
.logo .note:last-child{--tilt:3deg;margin:-16px -40px 0 0}
label.name{--tilt:-1.5deg;gap:10px;padding:24px 20px 26px;margin:0 0 10px;font-family:var(--display);font-size:20px;font-weight:700;color:var(--fg)}
label.name input{height:44px;padding:0 2px;border:0;border-bottom:2.5px dashed rgba(42,34,51,.35);border-radius:0;background:none;box-shadow:none;font-size:22px;font-weight:600}
label.name input:focus{background:none;border-bottom-color:var(--fg);box-shadow:none}

.bang{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--err);color:#fff;font:800 19px/1 var(--text);box-shadow:0 0 0 3px var(--bg),0 4px 10px -2px rgba(217,59,79,.5);transform:scale(0) rotate(-30deg);transition:transform .32s cubic-bezier(.3,1.7,.5,1)}
.bad .bang{transform:scale(1) rotate(10deg)}
.bad.note{animation:nudge .42s ease}
label.name.bad input{border-bottom-color:var(--err)}
input.bad,input.bad:focus{box-shadow:inset 0 0 0 2px var(--err)}
@keyframes nudge{20%{translate:-7px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:2px 0}}

#lobby{padding-top:calc(92px + env(safe-area-inset-top))}
#codeline{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:2;--tilt:3deg;padding:13px 14px 12px;text-align:left;background:linear-gradient(rgba(58,36,82,.05) 0 7px,transparent 0),linear-gradient(-45deg,transparent 10px,var(--c) 0)}
#codeline::after{width:14.1px;height:14.1px}
#codeline p{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(42,34,51,.6)}
.big{font-size:20px;font-weight:800;letter-spacing:.14em;line-height:1.1}
body:has(#timer:not([hidden])) #codeline{display:none}
#grid{--cols:1;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;justify-content:center;width:calc(var(--cols) * 76px - 14px);max-width:100%;margin:4px 0 8px}
#grid div{--pc:var(--btn);position:relative;z-index:0;width:100%;height:auto;aspect-ratio:62/128;min-height:72px;border-radius:15px;background:var(--fg);border:3px solid var(--fg);padding:16px 5px 10px;color:var(--fg);font-size:12px;font-weight:700;line-height:1.1;text-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden;word-break:break-word;box-shadow:0 12px 16px -10px rgba(58,36,82,.45);transition:opacity .2s,box-shadow .2s,background-color .2s}
#grid div::before{content:"";position:absolute;top:3px;left:50%;width:20px;height:5px;margin-left:-10px;border-radius:3px;background:rgba(255,255,255,.22)}
#grid div::after{content:"";position:absolute;inset:11px 2px 2px;border-radius:9px;background:var(--pc);z-index:-1;transition:opacity .2s}
#grid div.me{outline:2.5px solid var(--fg);outline-offset:4px}
#grid div.off{opacity:.35}
#grid div.unplaced{background:transparent;border:2.5px dashed rgba(42,34,51,.4);box-shadow:none}
#grid div.unplaced::before{background:rgba(42,34,51,.18)}
#grid div.unplaced::after{opacity:.5}
#grid div.empty{background:transparent;border:2.5px dashed rgba(42,34,51,.14);box-shadow:none}
#grid div.empty::before,#grid div.empty::after{display:none}
#place{display:flex;flex-direction:column;align-items:center;margin-top:6px}
#lobby:has(#place:not([hidden])){padding-bottom:calc(92px + env(safe-area-inset-bottom))}
#placed{position:fixed;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));width:fit-content;margin:0 auto}
.hint{font-size:24px;font-weight:700;line-height:1.2;max-width:14ch;overflow-wrap:anywhere}
.task{font-size:34px;font-weight:700;line-height:1.15;max-width:min(16ch,100%);overflow-wrap:anywhere}
#edge{position:fixed;display:none;background:var(--pink-2);box-shadow:0 0 60px 30px var(--pink)}
#edge.right{display:block;top:0;bottom:0;right:0;width:12px}
#edge.bottom{display:block;left:0;right:0;bottom:0;height:12px}
#quit{position:fixed;top:calc(-60px + env(safe-area-inset-top));left:-60px;z-index:3;width:140px;height:140px;min-width:0;max-width:none;padding:60px 4px 4px 60px;border-radius:50%;background:var(--sky);font-size:15px;box-shadow:0 8px 20px -10px rgba(58,36,82,.35);transform-origin:top left;display:none}
#quit:active{transform:scale(.94);background:var(--sky-2)}
#quit.on{display:grid;place-items:center}
#quit,#timer{transition:opacity .25s}
body.ontable:not(.peek) :is(#quit,#timer){opacity:0;pointer-events:none}
#timer{position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:2;height:36px;min-width:66px;padding:0 14px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--yellow);font-size:15px;font-weight:700;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
#timer.up{background:var(--pink)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:320px}
button.chip{min-width:0;max-width:100%;min-height:36px;height:auto;padding:8px 16px;font-size:14px;overflow-wrap:anywhere}
button.chip.got{background:var(--mint)}
button.chip b{margin-left:7px;font-weight:800;opacity:.5}
input.chip{width:160px;height:36px;padding:0 16px;font-size:16px}
#vote{display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px}
#vote .hint{max-width:none;margin-bottom:26px;font-size:28px;line-height:1.1}
.sheet{--tilt:2deg;min-width:180px;margin-top:34px;padding:0 16px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;border-radius:6px;background:linear-gradient(135deg,#fff 0%,#f6f2ea 55%,#fff 100%);filter:var(--lift);transform:rotate(var(--tilt))}
.sheet b{align-self:stretch;margin:0 -16px;padding:7px 16px 6px;border-radius:6px 6px 0 0;background:var(--pink);font:700 15px/1.2 var(--display);text-align:center;transition:background-color .3s}
.sheet.done b{background:var(--mint)}
.slots{--cols:6;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:calc(var(--cols) * 40px - 8px)}
.slot{width:32px;height:32px;border-radius:50%;border:1.5px dashed rgba(42,34,51,.24);display:grid;place-items:center}
.slot .sticker{margin:0;grid-area:1/1}

#setvote{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
button.set{min-width:0;width:auto;max-width:none;height:auto;aspect-ratio:1;padding:22px 14px 14px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border-radius:4px;color:var(--fg);transition:transform .35s cubic-bezier(.3,1.5,.5,1),filter .35s}
button.set:nth-child(1){--tilt:-2.5deg}
button.set:nth-child(2){--tilt:2deg}
button.set:nth-child(3){--tilt:1.5deg}
button.set:nth-child(4){--tilt:-1.5deg}
button.set:active{transform:rotate(var(--tilt)) scale(.96)}
button.set.mine{transform:rotate(calc(var(--tilt) * 1.6)) translateY(-4px) scale(1.04);filter:drop-shadow(0 18px 18px rgba(58,36,82,.2)) drop-shadow(0 3px 3px rgba(58,36,82,.12))}
button.set b{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.05}
button.set small{font-family:var(--text);font-size:13px;font-weight:500;line-height:1.25;color:rgba(42,34,51,.68)}
.stickers{display:flex;flex-wrap:wrap;align-content:flex-end;margin-top:auto;padding:0 12px 0 2px;min-height:30px}
.sticker{--r:0deg;width:28px;height:28px;margin:0 -8px -4px 0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--fg);font:800 13px/1 var(--text);font-style:normal;rotate:var(--r);box-shadow:0 1px 1px rgba(42,34,51,.12),0 3px 6px -2px rgba(42,34,51,.25);animation:stick .42s cubic-bezier(.3,1.6,.5,1) both}
.sticker.me{background:var(--fg);color:#fff}
.sticker.more{font-size:11px}
.sticker.out{animation:unstick .22s ease-in forwards}
@keyframes stick{from{scale:0;rotate:-45deg}}
@keyframes unstick{to{scale:0;opacity:0}}
#awardwrap{display:flex;flex-direction:column;align-items:center;gap:10px}
#awardwrap p{font-size:13px}
#result{gap:22px}
#result.got{background:var(--grain),var(--mint)}
.verdict{font-family:var(--display);font-size:44px;font-weight:800;line-height:1;color:var(--muted);animation:swell .5s cubic-bezier(.65,0,.35,1) both}
#result.got .verdict{font-size:72px;color:var(--fg)}
.plus{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--fg);font:800 36px/1 var(--text);rotate:-8deg;box-shadow:0 1px 1px rgba(42,34,51,.12),0 8px 18px -6px rgba(42,34,51,.3);animation:stick .42s cubic-bezier(.3,1.6,.5,1) .3s both}
@keyframes swell{from{font-weight:100}}
.slip{--tilt:-2deg;position:absolute;left:50%;bottom:calc(56px + env(safe-area-inset-bottom));translate:-50% 0;width:max-content;min-width:200px;max-width:calc(100% - 48px);padding:26px 24px 18px;text-align:left}
.slip small{display:block;margin-bottom:6px;font:700 11px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(42,34,51,.6);overflow-wrap:anywhere}
.slip b{font:700 30px/1.1 var(--display)}
#result.final .verdict{font-size:120px}
#result.win{background:var(--grain),var(--yellow)}
#result.win .verdict{color:var(--fg)}
#end{margin-top:8px}
#final{justify-content:flex-start;gap:24px;padding-top:calc(92px + env(safe-area-inset-top))}
#standings{list-style:none;margin:0;padding:0;width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}
#standings li{display:flex;align-items:baseline;gap:14px;padding:22px 20px 14px;text-align:left}
#standings li:nth-child(odd){--tilt:-1deg}
#standings li:nth-child(even){--tilt:1.2deg}
#standings b{font:700 22px/1 var(--display);min-width:42px}
#standings span{flex:1;min-width:0;overflow-wrap:anywhere;font:600 17px/1.2 var(--text)}
#standings em{font:700 22px/1 var(--display);font-style:normal}
#again{margin-top:auto}
#wait:empty{display:none}
#hostbar{position:fixed;left:0;right:0;bottom:0;display:none;flex-direction:column;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:rgba(248,242,232,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -1px 0 var(--line),0 -10px 30px -12px rgba(42,34,51,.15)}
#hostbar.on{display:flex}
#hostbar>*{max-width:none}
#deck{display:flex;gap:12px;margin:-10px -16px -18px;padding:18px 32px 30px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
#deck::-webkit-scrollbar{display:none}
#deck:focus-visible{outline:2px solid var(--fg);outline-offset:-4px;border-radius:8px}
#deck .q{flex:none;width:100%;min-height:104px;padding:24px 18px 16px;display:flex;flex-direction:column;gap:6px;text-align:left;scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .2s}
#deck .q:nth-child(odd){--tilt:-1.2deg}
#deck .q:nth-child(even){--tilt:1deg}
#deck .q small{font:700 10px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(42,34,51,.55)}
#deck .q span,#deck textarea{font:700 19px/1.15 var(--display);color:var(--fg)}
#deck .q.used{opacity:.5}
#deck textarea{flex:1;width:100%;margin:0;padding:0;border:0;background:none;resize:none;outline:none}
#deck textarea:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:2px}
#deck .q span{overflow-wrap:anywhere}
#deck textarea::placeholder{color:rgba(42,34,51,.38)}
.row>#limit{flex:none;display:flex;align-items:center;gap:7px;padding:0 20px}
@media (max-height:740px){
  #vote .hint{font-size:clamp(20px,6vw,24px);margin-bottom:18px}
  button.set{aspect-ratio:1.2;padding:18px 12px 12px 14px}
  .sheet{margin-top:22px}
}
@media (max-width:360px) and (max-height:650px){
  #vote .hint{margin-bottom:14px}
  #setvote{gap:14px}
  button.set{padding:16px 10px 10px 12px}
  button.set b{font-size:20px}
  button.set small{font-size:12px}
  .sheet{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .bad.note,.sticker,.sticker.out,.verdict,.plus{animation:none}
  .bang{transition:none}
}