:root{--ink:#111;--paper:#fff7e8;--pink:#ff2d95;--yellow:#ffd12e;--cyan:#22d3ee;--purple:#a855f7;--orange:#ff6b35;--red:#e11d2e;--deck-color:var(--orange);--avatar-color:var(--yellow);--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--shadow-sm:3px 3px 0 var(--ink);--shadow-md:4px 4px 0 var(--ink);--shadow-lg:6px 6px 0 var(--ink);--shadow-xl:8px 8px 0 var(--ink);--radius:14px}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}h1,h2,h3,p,ul,ol{margin:0}body{min-height:100dvh;color:var(--ink);background-color:var(--paper);-webkit-tap-highlight-color:transparent;background-image:radial-gradient(#11111121 1.5px,#0000 1.5px);background-size:16px 16px;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:600;overflow-x:hidden}button,input{font:inherit;color:inherit}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app{z-index:1;max-width:520px;padding:16px 16px calc(24px + env(safe-area-inset-bottom));margin:0 auto;position:relative}@media (width>=900px){.app{max-width:640px}}.panel{border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);background:#fff;margin-bottom:20px;padding:14px}.panel-title{letter-spacing:-.02em;text-transform:uppercase;margin-bottom:12px;font-size:1.1rem;font-weight:900}.field-label{text-transform:uppercase;margin:14px 0 6px;font-size:.85rem;font-weight:900;display:block}.row{gap:10px;display:flex}.error:empty{display:none}.error{color:var(--red);border:3px solid var(--red);border-radius:var(--radius);box-shadow:4px 4px 0 var(--red);text-align:center;background:#fff;margin-bottom:12px;padding:10px;font-weight:900}input[type=text]{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);flex:1;width:100%;min-width:0;min-height:48px;padding:8px 12px;font-weight:700}input:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}.btn{border:3px solid var(--ink);border-radius:var(--radius);min-width:48px;min-height:48px;box-shadow:var(--shadow-md);text-transform:uppercase;letter-spacing:-.01em;cursor:pointer;touch-action:manipulation;background:#fff;padding:8px 16px;font-weight:900}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink);background:#ddd}.btn-pink{background:var(--pink);color:#fff}.btn-yellow{background:var(--yellow)}.btn-cyan{background:var(--cyan)}.btn-purple{background:var(--purple);color:#fff}.btn-ghost{box-shadow:none;background:0 0}.btn-big{width:100%;min-height:68px;box-shadow:var(--shadow-lg);border-width:4px;font-size:1.6rem}.avatar{--size:64px;width:var(--size);height:var(--size);background:var(--avatar-color);border:3px solid var(--ink);box-shadow:var(--shadow-md);font-size:calc(var(--size) * .5);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;place-items:center;line-height:1;display:grid;position:relative}.avatar-sm{--size:40px;box-shadow:2px 2px 0 var(--ink);border-width:2px}.avatar-lg{--size:88px;box-shadow:var(--shadow-lg);border-width:4px}.avatar-xl{--size:132px;box-shadow:var(--shadow-xl);border-width:4px}.avatar.is-on{box-shadow:var(--shadow-lg),0 0 0 4px #fff,0 0 0 7px var(--ink);border-width:5px}.avatar-name{text-transform:uppercase;letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere;max-width:100%;font-size:.8rem;font-weight:900;line-height:1.1}.avatar-btn{cursor:pointer;touch-action:manipulation;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;min-width:64px;min-height:44px;padding:6px;display:flex;position:relative}.avatar-del{z-index:1;border:2px solid var(--ink);cursor:pointer;background:#fff;border-radius:50%;width:28px;height:28px;padding:0;font-size:.8rem;font-weight:900;line-height:1;position:absolute;top:-4px;right:-4px}.avatar-del:before{content:"";position:absolute;inset:-8px}.avatar-grid{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));justify-items:center;gap:12px;display:grid}.deck-grid{grid-template-columns:1fr;gap:12px;display:grid}@media (width>=900px){.deck-grid{grid-template-columns:1fr 1fr}}.deck-card{text-align:left;border:3px solid var(--ink);border-left:12px solid var(--deck-color);border-radius:var(--radius);width:100%;min-height:64px;box-shadow:var(--shadow-md);cursor:pointer;touch-action:manipulation;background:#fff;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:10px 12px;display:grid}.deck-emoji{grid-row:span 3;font-size:2rem}.deck-name{text-transform:uppercase;letter-spacing:-.02em;font-weight:900}.deck-desc{opacity:.75;font-size:.8rem;font-weight:600}.deck-count{font-size:.75rem;font-weight:800}.deck-card.is-on{background:var(--deck-color);box-shadow:var(--shadow-lg);outline:3px solid var(--ink);outline-offset:3px}.deck-card.is-on .deck-desc{opacity:1}.mode-toggle{gap:10px;display:grid}.mode-opt{border:3px solid var(--ink);border-radius:var(--radius);min-height:48px;box-shadow:var(--shadow-sm);text-align:left;cursor:pointer;touch-action:manipulation;background:#fff;align-items:center;gap:10px;padding:8px 12px;font-weight:800;display:flex}.mode-opt:before{content:"";border:3px solid var(--ink);background:#fff;border-radius:50%;flex:none;width:20px;height:20px}.mode-opt.is-on{background:var(--cyan)}.mode-opt.is-on:before{background:var(--ink);box-shadow:inset 0 0 0 3px var(--cyan)}.topbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.turn-label{text-transform:uppercase;letter-spacing:.1em;text-align:center;font-size:.8rem;font-weight:900}.turn-name{background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:var(--radius);max-width:100%;box-shadow:var(--shadow-md);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere;margin-top:4px;padding:2px 14px;font-size:1.8rem;font-weight:900;display:inline-block}.turn-sub{text-align:center;min-height:1.2em;margin-top:8px;font-weight:700}.card-stage{perspective:1200px;aspect-ratio:3/4;width:min(100%,320px);margin:6px auto;position:relative}@media (width>=900px){.card-stage{width:340px}}.card{width:100%;height:100%;transform-style:preserve-3d;position:relative}.card-face{backface-visibility:hidden;border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);position:absolute;inset:0;overflow:hidden}.card-back{background-color:var(--pink);color:var(--ink);text-transform:uppercase;text-align:center;background-image:repeating-linear-gradient(45deg,#ffffff47 0 10px,#0000 10px 20px),radial-gradient(#11111140 2px,#0000 2px);background-size:auto,14px 14px;align-content:center;place-items:center;gap:8px;font-size:1.4rem;font-weight:900;display:grid}.card-back:before{content:"";border:3px dashed var(--ink);pointer-events:none;border-radius:8px;position:absolute;inset:12px}.card-front{text-align:center;border-top:16px solid var(--deck-color);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:18px;display:flex;transform:rotateY(180deg)}.card-deck-badge{background:var(--deck-color);border:3px solid var(--ink);text-transform:uppercase;border-radius:999px;padding:3px 12px;font-size:.8rem;font-weight:900}.card-title{letter-spacing:-.02em;text-transform:uppercase;font-size:1.5rem;font-weight:900;line-height:1.1}.card-text{overflow-wrap:anywhere;font-size:1.05rem;font-weight:700;line-height:1.35}.card-sips{background:var(--yellow);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm);text-transform:uppercase;margin-top:auto;padding:4px 14px;font-size:1.2rem;font-weight:900;display:inline-block}.card-sips:empty{display:none}.ghost{border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-md);background-color:var(--pink);pointer-events:none;background-image:repeating-linear-gradient(45deg,#ffffff47 0 10px,#0000 10px 20px);position:absolute;inset:0}.ghost:nth-child(2){background-color:var(--cyan)}.ghost:nth-child(3){background-color:var(--purple)}.ghost:nth-child(4){background-color:var(--yellow)}.overlay{z-index:50;background:#111111b3;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:520px;max-height:80dvh;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:var(--paper);border:4px solid var(--ink);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-lg);border-bottom:0;flex-direction:column;gap:12px;display:flex;overflow-y:auto}.history-list{flex:1;align-content:start;gap:8px;padding:0;list-style:none;display:grid;overflow-y:auto}.history-item{border:3px solid var(--ink);background:#fff;border-radius:10px;gap:2px;padding:8px 10px;display:grid}.history-head{text-transform:uppercase;opacity:.6;font-size:.72rem;font-weight:800}.history-title{text-transform:uppercase;letter-spacing:-.02em;font-weight:900}.history-text{font-size:.88rem;font-weight:600;line-height:1.3}.history-sips{background:var(--yellow);border:2px solid var(--ink);border-radius:999px;justify-self:start;margin-top:4px;padding:1px 8px;font-size:.75rem;font-weight:900}.history-sips:empty{display:none}@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){filter:brightness(1.07)}.deck-card:not(.is-on):hover,.mode-opt:not(.is-on):hover{background:var(--paper)}.avatar-btn:hover .avatar{filter:brightness(1.08)}.avatar-del:hover{background:var(--pink);color:#fff}}.card{transition:transform .45s var(--ease-in-out)}.card.is-flipped{transform:rotateY(180deg)}.ghost{opacity:0}.card-stage.is-shuffling .ghost{animation:ghost-shuffle .65s var(--ease-in-out) both}.card-stage.is-shuffling .ghost:first-child{--dx:-64px;--rot:-9deg;animation-delay:0s}.card-stage.is-shuffling .ghost:nth-child(2){--dx:64px;--rot:8deg;animation-delay:40ms}.card-stage.is-shuffling .ghost:nth-child(3){--dx:-40px;--rot:5deg;animation-delay:80ms}.card-stage.is-shuffling .ghost:nth-child(4){--dx:40px;--rot:-6deg;animation-delay:.12s}@keyframes ghost-shuffle{0%{opacity:0;transform:translate(0)rotate(0)}15%{opacity:1;transform:translate(0)rotate(0)}50%{opacity:1;transform:translateX(var(--dx,50px)) rotate(var(--rot,6deg))}85%{opacity:1;transform:translate(0)rotate(0)}to{opacity:0;transform:translate(0)rotate(0)}}.ghost{z-index:1}.card-layer{z-index:2}.pile-layer,.discard-layer{border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-md);pointer-events:none;position:absolute;inset:0}.pile-layer{background-image:repeating-linear-gradient(45deg,#ffffff47 0 10px,#0000 10px 20px)}.pile-1{background-color:var(--cyan);transform:translate(-7px,6px)rotate(-4deg)}.pile-2{background-color:var(--purple);transform:translate(6px,4px)rotate(3deg)}.pile-top{pointer-events:none}.discard-layer{background:#fff}.discard-1{transform:translate(40px,10px)rotate(8deg)}.discard-2{transform:translate(34px,6px)rotate(5deg)}.card-ground{pointer-events:none;background:#1111114d;border-radius:50%;height:14px;position:absolute;bottom:-18px;left:8%;right:8%}.card-sips.is-pop{animation:pop-punch .32s var(--ease-out) .42s backwards}@keyframes pop-punch{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}.card.is-heavy{animation:heavy-shake .42s var(--ease-out) .45s}@keyframes heavy-shake{0%,to{transform:rotateY(180deg)translate(0)}20%{transform:rotateY(180deg)translate(-6px)rotate(-1.5deg)}40%{transform:rotateY(180deg)translate(6px)rotate(1.5deg)}60%{transform:rotateY(180deg)translate(-4px)rotate(-1deg)}80%{transform:rotateY(180deg)translate(3px)rotate(.5deg)}}.screen-shake{animation:screen-shake .35s var(--ease-out)}@keyframes screen-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}.overlay{background:0 0}.overlay-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#111111b3;position:absolute;inset:0}.sheet{position:relative}.round{flex-wrap:wrap;justify-content:center;gap:10px;max-width:100%;margin:10px 0 0;display:flex}.round-item{display:inline-flex;position:relative}.turn-ring{border:3px solid var(--ink);box-shadow:0 0 0 3px var(--yellow);pointer-events:none;border-radius:50%;position:absolute;inset:-6px}.deck-card{position:relative}.deck-card.is-on .deck-name:after{content:none}.deck-tick{border:3px solid var(--ink);background:#fff;border-radius:50%;place-items:center;width:30px;height:30px;font-size:.9rem;font-weight:900;line-height:1;display:grid;position:absolute;top:-12px;right:-8px}.bg-blob{z-index:0;opacity:.18;pointer-events:none;will-change:transform;border-radius:50%;width:50vmax;height:50vmax;animation:24s linear infinite alternate blob-drift;position:fixed}.bg-blob:first-of-type{background:var(--pink);top:-15vmax;left:-15vmax}.bg-blob:nth-of-type(2){background:var(--cyan);animation-duration:28s;bottom:-18vmax;right:-15vmax}.bg-blob:nth-of-type(3){background:var(--yellow);opacity:.12;animation-duration:22s;top:30%;left:40%}@keyframes blob-drift{0%{transform:translate(0)}to{transform:translate(12vmax,8vmax)}}@media (prefers-reduced-motion:reduce){.card{transform-style:flat;transition:none;transform:none}.card.is-flipped,.card.is-heavy{animation:none;transform:none}.card .card-face{backface-visibility:visible;transition:opacity .15s linear}.card .card-front{opacity:0;transform:none}.card .card-back,.card.is-flipped .card-front{opacity:1}.card.is-flipped .card-back{opacity:0}.ghost,.card-stage.is-shuffling .ghost{opacity:0;animation:none}.card-sips.is-pop,.screen-shake,.bg-blob{animation:none}}
