:root{--ink:#15110d;--ink-2:#221a12;--ink-3:#2c2116;--beer:#e8a33d;--beer-deep:#c97a1e;--cap-red:#d6473c;--cap-red-deep:#a8332a;--foam:#fff6e6;--lime:#b6d94c;--muted:#b3a08a;--line:rgba(255,246,230,.12);font-size:16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,html{height:100%;margin:0;overscroll-behavior:none}body{font-family:Be Vietnam Pro,sans-serif;background:radial-gradient(120% 90% at 50% -10%,#3a2a16 0,transparent 55%),radial-gradient(140% 100% at 50% 120%,#1e1006 0,transparent 60%),var(--ink);color:var(--foam);min-height:100dvh;overflow:hidden;position:relative}.mono{font-family:JetBrains Mono,monospace}.display{font-family:Baloo\ 2,sans-serif}.bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.bubble{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,246,230,.55),rgba(255,246,230,.03) 70%);animation:rise linear infinite}@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.5}90%{opacity:.35}to{transform:translateY(-110dvh) translateX(var(--drift,20px));opacity:0}}.loading-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% -10%,#3a2a16 0,transparent 55%),var(--ink);transition:opacity .45s ease,visibility .45s ease}.loading-screen.hide{opacity:0;visibility:hidden;pointer-events:none}.loading-inner{text-align:center}.loading-mug{font-size:3.2rem;display:inline-block;animation:bob 1.1s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}@keyframes bob{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(6deg)}}.loading-track{width:150px;height:6px;margin:20px auto 12px;border-radius:999px;background:var(--ink-2);overflow:hidden;border:1px solid var(--line)}.loading-fill{height:100%;width:36%;border-radius:999px;background:linear-gradient(90deg,var(--beer),var(--cap-red));animation:loadbar 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes loadbar{0%{transform:translateX(-120%)}to{transform:translateX(380%)}}.loading-text{font-size:.78rem;color:var(--muted);letter-spacing:.4px}.screen{position:relative;z-index:1;display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom))}.topbar{justify-content:space-between;padding:2px 2px 14px}.brand,.topbar{display:flex;align-items:center}.brand{gap:8px}.brand .mug{font-size:1.4rem;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}.brand h1{font-size:1.15rem;margin:0;letter-spacing:.2px;font-weight:700;color:var(--foam)}.brand small{display:block;color:var(--muted);font-size:.68rem;letter-spacing:.4px;text-transform:uppercase}.cap-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(var(--ink-3) 0deg 10deg,var(--ink-2) 10deg 20deg);border:2px solid var(--line);box-shadow:inset 0 0 0 6px var(--ink),0 3px 0 rgba(0,0,0,.35);color:var(--foam);font-size:1.1rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:transform .15s ease}.cap-btn:active{transform:translateY(2px) scale(.96)}.stage{flex:1 1;position:relative;display:flex;align-items:center;justify-content:center;perspective:1400px;touch-action:pan-y;overflow:hidden}.stage.busy .card{pointer-events:none}.deck-count{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:.72rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase}.peek{position:absolute;width:78%;max-width:300px;aspect-ratio:3/4.3;border-radius:22px;background:var(--ink-2);border:2px dashed var(--line);transition:opacity .18s ease}.peek.p2{transform:translateY(18px) scale(.94) rotate(-4deg);opacity:.5}.peek.p1{transform:translateY(9px) scale(.97) rotate(3deg);opacity:.75}.card{position:relative;width:78%;max-width:300px;aspect-ratio:3/4.3;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.34,.69,.46,1.1),opacity .25s ease;cursor:-webkit-grab;cursor:grab;touch-action:none;will-change:transform}.card.grabbing{cursor:-webkit-grabbing;cursor:grabbing;transition:none}.card.flipped{transform:rotateY(180deg)}.card.slide-out-l{transform:translateX(-120%) rotate(-12deg)}.card.slide-out-l,.card.slide-out-r{opacity:0;transition:transform .24s cubic-bezier(.3,0,1,.8),opacity .24s ease-in}.card.slide-out-r{transform:translateX(120%) rotate(12deg)}.card.slide-in{animation:pop-in .24s cubic-bezier(.34,.69,.46,1.1)}.card.snap-back{transition:transform .2s cubic-bezier(.34,.69,.46,1)}.card.shuffling{opacity:.12;transition:opacity .3s ease}.card.edge-bounce{animation:edgeBounce .22s ease}@keyframes edgeBounce{0%{transform:translateX(0)}35%{transform:translateX(20px) rotate(3deg)}65%{transform:translateX(-8px) rotate(-1.5deg)}to{transform:translateX(0)}}.card.cleared .face.front .qmark{opacity:.9}.card.cleared .face.front .capicon{opacity:0}@keyframes pop-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.face{position:absolute;inset:0;border-radius:22px;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;box-shadow:0 18px 30px -12px rgba(0,0,0,.55),inset 0 2px 0 hsla(0,0%,100%,.03)}.face.front{background:radial-gradient(120% 90% at 50% 10%,rgba(255,246,230,.08),transparent 55%),linear-gradient(160deg,var(--beer) 0,var(--beer-deep) 100%);border:3px solid rgba(0,0,0,.18);color:#2a1804}.face.front:before{content:"";position:absolute;inset:10px;border-radius:16px;border:2px dashed rgba(42,24,4,.35)}.front .eyebrow{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;opacity:.7;margin-bottom:6px}.front .no{font-size:5.2rem;line-height:1;font-weight:800;opacity:0;pointer-events:none}.front .qmark{font-size:4.8rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.front .hint{margin-top:30px;font-size:.75rem;opacity:.65;letter-spacing:.3px}.front .capicon{position:absolute;bottom:16px;font-size:1.3rem;opacity:.55}.face.back{transform:rotateY(180deg);background:var(--ink-2);border:2px dashed var(--line);text-align:center;gap:14px}.back .tag{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.back .desc{font-size:1.15rem;font-weight:600;line-height:1.45;color:var(--foam);font-family:Baloo\ 2,sans-serif}.back .amount{margin-top:4px;display:inline-flex;align-items:center;gap:6px;background:var(--cap-red);color:var(--foam);padding:8px 16px;border-radius:999px;font-size:.95rem;font-weight:700;box-shadow:0 4px 0 var(--cap-red-deep)}.back .stub{position:absolute;bottom:14px;font-size:.68rem;color:var(--muted);letter-spacing:.5px}.shuffle-fx{inset:0;z-index:5;pointer-events:none}.ghost-card,.shuffle-fx{position:absolute;display:flex;align-items:center;justify-content:center}.ghost-card{width:78%;max-width:300px;aspect-ratio:3/4.3;border-radius:22px;background:radial-gradient(120% 90% at 50% 10%,rgba(255,246,230,.08),transparent 55%),linear-gradient(160deg,var(--beer) 0,var(--beer-deep) 100%);border:3px solid rgba(0,0,0,.18);box-shadow:0 18px 30px -12px rgba(0,0,0,.55),inset 0 2px 0 hsla(0,0%,100%,.03);color:#2a1804;opacity:0;animation:riffle .72s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i) * 45ms)}.ghost-card:before{content:"";position:absolute;inset:10px;border-radius:16px;border:2px dashed rgba(42,24,4,.35)}.ghost-card:after{content:"❓";font-size:4.8rem}@keyframes riffle{0%{transform:translate(0) rotate(0deg) scale(.88);opacity:0}18%{opacity:1}46%{transform:translate(var(--tx),-16px) rotate(var(--rot)) scale(1);opacity:1}to{transform:translate(0) rotate(0deg) scale(.88);opacity:0}}.controls{gap:22px;padding:16px 0 6px}.controls,.shuffle-btn{display:flex;align-items:center;justify-content:center}.shuffle-btn{width:64px;height:64px;border-radius:50%;background:repeating-conic-gradient(var(--cap-red) 0deg 9deg,var(--cap-red-deep) 9deg 18deg);box-shadow:inset 0 0 0 8px var(--ink),0 5px 0 rgba(0,0,0,.4);border:none;color:var(--foam);font-size:1.5rem;cursor:pointer}.shuffle-btn:active{transform:translateY(3px)}.shuffle-btn:disabled{opacity:.6;cursor:default}.shuffle-btn.spin svg{animation:spin .5s ease}.shuffle-btn.pulse{animation:pulseGlow 1.3s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:inset 0 0 0 8px var(--ink),0 5px 0 rgba(0,0,0,.4),0 0 0 0 rgba(232,163,61,.55)}50%{box-shadow:inset 0 0 0 8px var(--ink),0 5px 0 rgba(0,0,0,.4),0 0 0 10px rgba(232,163,61,0)}}@keyframes spin{to{transform:rotate(220deg)}}.side-hint{font-size:.7rem;color:var(--muted)}.overlay{position:fixed;inset:0;z-index:20;background:var(--ink);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.9,.3,1);overflow-y:auto;-webkit-overflow-scrolling:touch}.overlay.open{transform:translateY(0)}.overlay-inner{max-width:480px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px 60px}.overlay-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.overlay-top h2{font-family:Baloo\ 2;font-size:1.3rem;margin:0}.receipt{margin-top:18px;background:var(--ink-2);border:1px dashed var(--line);border-radius:16px;padding:18px}.receipt+.receipt{margin-top:14px}.receipt h3{margin:0 0 4px;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--beer)}.receipt p.sub{margin:0 0 14px;font-size:.78rem;color:var(--muted)}label{display:block;font-size:.75rem;color:var(--muted);margin:12px 0 6px;letter-spacing:.3px}input[type=password],input[type=text]{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--foam);font-family:JetBrains Mono;font-size:.85rem;outline:none}input:focus{border-color:var(--beer);box-shadow:0 0 0 3px rgba(232,163,61,.2)}.row2{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font-family:Be Vietnam Pro;font-weight:700;font-size:.9rem;border-radius:12px;padding:13px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}.btn-primary{background:var(--beer);color:#2a1804;box-shadow:0 4px 0 var(--beer-deep)}.btn-primary:active{transform:translateY(3px);box-shadow:none}.btn-ghost{background:transparent;color:var(--foam);border:1px solid var(--line)}.btn-ghost:active{transform:translateY(2px)}.btn-row{display:flex;gap:10px;margin-top:16px}.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;padding:5px 10px;border-radius:999px;background:var(--ink);border:1px solid var(--line);color:var(--muted)}.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.status-pill.ok .dot{background:var(--lime)}.status-pill.ok{color:var(--lime)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink-3);color:var(--foam);border:1px solid var(--line);padding:12px 18px;border-radius:12px;font-size:.85rem;opacity:0;pointer-events:none;transition:all .25s ease;z-index:50;max-width:88%;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.4)}.toast.show{opacity:1;transform:translate(-50%);pointer-events:auto}footer.note{margin-top:20px;font-size:.68rem;color:var(--muted);line-height:1.6;text-align:center}@media (prefers-reduced-motion:reduce){.bubble,.card,.ghost-card,.loading-fill,.loading-mug,.peek{animation-duration:1ms!important}}