:root{--paper:#f6f0e4;--ink:#1d1a17;--accent:#c2412d;--card:#fffaf0;--back:#3d3150;--back2:#54446c;--good:#4f8a45;--gold:#e0a526;--bg:#ece2cf}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;margin:0;font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif;overflow:hidden}body{background:radial-gradient(circle at 50% 30%, #f4ecdc 0, var(--bg) 60%, #e1d3b8 100%)}button{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);touch-action:manipulation;border-radius:999px;padding:8px 16px;transition:transform .12s,box-shadow .12s}button:active{box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}button.primary{background:var(--accent);color:#fff;font-weight:800}button.big{padding:12px 44px;font-size:24px}.round{border-radius:50%;flex:none;place-items:center;width:38px;height:38px;padding:0;font-weight:800;display:grid}a.round{background:var(--card);border:2px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink);text-decoration:none}#mute.off{opacity:.45;text-decoration:line-through}.drift{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.drift img{opacity:.13;animation:linear infinite drift;position:absolute}@keyframes drift{0%{transform:translateY(110vh)rotate(0)}to{transform:translateY(-20vh)rotate(360deg)}}.app{z-index:1;flex-direction:column;height:100dvh;display:flex;position:relative}.bar{padding:max(8px, env(safe-area-inset-top)) 12px 2px;align-items:center;gap:8px;display:flex}.bar h1{text-align:center;white-space:nowrap;text-overflow:ellipsis;margin:0 auto;font-size:clamp(20px,5.4vw,30px);line-height:1;overflow:hidden}.stats{flex-wrap:wrap;justify-content:center;gap:6px;padding:4px 10px 0;font-size:14px;display:flex}.pill{background:var(--card);border:2px solid var(--ink);font-variant-numeric:tabular-nums;border-radius:999px;padding:2px 10px}.pill small{opacity:.6;margin-left:3px}.pill b.bump{animation:.3s bump;display:inline-block}@keyframes bump{40%{color:var(--accent);transform:scale(1.5)}}.combo{text-align:center;height:26px;color:var(--accent);letter-spacing:.5px;font-size:20px;font-weight:900}.combo span{animation:.45s cubic-bezier(.3,1.6,.5,1) comboIn;display:inline-block}@keyframes comboIn{0%{opacity:0;transform:scale(.2)rotate(-12deg)}}.board{gap:var(--gap,8px);perspective:1000px;flex:1;place-content:center;min-height:0;margin:0 auto;padding:4px 10px;display:grid}.coach{text-align:center;min-height:22px;margin:0 12px 2px;font-size:15px;font-weight:700}.coach.flash{animation:.5s coach}@keyframes coach{30%{color:var(--accent);transform:scale(1.08)}}.credit{text-align:center;padding:2px 14px max(8px, env(safe-area-inset-bottom));font-size:13px}.credit a{color:var(--ink);font-weight:700}.c{width:var(--cw,80px);height:calc(var(--cw,80px) * 4 / 3);box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:12px;padding:0;transition:transform .18s;position:relative}.c:active{box-shadow:none;transform:none}@media (hover:hover){.c:not(.up):not(.done):hover{transform:translateY(-4px)rotate(-1.5deg)}}.c .in{transform-style:preserve-3d;transition:transform .42s cubic-bezier(.3,1.45,.5,1);position:absolute;inset:0}.c.up .in,.c.done .in{transform:rotateY(180deg)}.c .face{border:3px solid var(--ink);backface-visibility:hidden;border-radius:12px;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.c .front{box-shadow:3px 3px 0 var(--ink);background:#fff;transform:rotateY(180deg)}.c .front img{transform-origin:50% 100%;max-width:84%;max-height:84%}.c .back{background:var(--back);box-shadow:3px 3px 0 var(--ink);background-image:radial-gradient(circle at 25% 25%, #ffffff21 0 7%, transparent 8%), radial-gradient(circle at 75% 75%, #ffffff21 0 7%, transparent 8%), linear-gradient(160deg, var(--back2), var(--back));background-size:30px 30px,30px 30px,100% 100%}.c .back:after{content:"";border:2px dashed #ffffff47;border-radius:8px;position:absolute;inset:5px}.c .back img{opacity:.92;filter:none;width:40%}.c.gold .front{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold), 3px 3px 0 3px var(--ink)}.c.done .front{border-color:var(--good);background:#f7fbf3}.c.done.gold .front{border-color:var(--gold);background:#fff8e4}.c.done .front img{animation:1.8s ease-in-out infinite alternate bob}.c.squash .front img{animation:.55s cubic-bezier(.3,1.6,.5,1) squash}@keyframes bob{0%{transform:rotate(-3deg)}to{transform:rotate(3deg)translateY(-3px)}}@keyframes squash{0%{transform:scale(1.25,.7)}40%{transform:scale(.85,1.25)translateY(-10%)}70%{transform:scale(1.08,.94)}to{transform:none}}.c.miss .front img{animation:.5s shrug}@keyframes shrug{25%{transform:rotate(-12deg)}60%{transform:rotate(9deg)}}.c.peek .front{border-color:#6a5a86}.screen{z-index:6;background:#ece2cfed;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow-y:auto}.screen.enter>*{animation:.42s cubic-bezier(.3,1.4,.5,1) cardIn}@keyframes cardIn{0%{opacity:0;transform:translateY(30px)scale(.92)}}.card{background:var(--card);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);text-align:center;border-radius:22px;width:100%;max-width:460px;padding:18px}.card.wide{max-width:620px}.card h2{margin:0 0 4px;font-size:30px}.card h3{margin:12px 0 4px}.card ol{text-align:left;margin:8px 0;padding-left:22px;line-height:1.45}.sub{margin:6px 0 14px;font-size:17px;line-height:1.35}.small{font-size:14px;line-height:1.4}.gold{color:#b07d0a}.row{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;display:flex}.col{flex-direction:column;align-items:center;gap:10px;display:flex}#title-screen{background:0 0}body.on-title .app{visibility:hidden}.title-wrap{text-align:center;width:100%;max-width:440px}.logo{letter-spacing:-1px;text-shadow:4px 4px 0 #fff, 7px 7px 0 var(--ink);margin:6px 0 4px;font-size:clamp(54px,16vw,92px);line-height:.88;animation:3.2s ease-in-out infinite alternate logo;transform:rotate(-3deg)}@keyframes logo{to{transform:rotate(2deg)translateY(-4px)}}.fan{width:280px;height:150px;margin:0 auto;position:relative}.fan .c{--cw:84px;transform-origin:50% 140%;cursor:default;margin-left:-42px;position:absolute;top:10px;left:50%}.best{opacity:.75;min-height:1.2em}.map{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 6px;display:grid}.node{border-radius:14px;flex-direction:column;align-items:center;gap:2px;min-height:112px;padding:6px 4px 4px;display:flex;position:relative}.node .host{place-items:center;width:46px;height:46px;display:grid}.node .host img{max-width:46px;max-height:46px}.node .host.q{background:var(--back);color:#fff;border:2px solid var(--ink);border-radius:8px;width:36px;font-weight:900}.node b{font-size:13px;line-height:1.1}.node small{opacity:.75;font-size:11px}.node .st{color:var(--accent);letter-spacing:1px;font-size:14px}.node .tw{color:var(--back);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:800}.node.locked{opacity:.45;cursor:not-allowed}.node.next{animation:1.2s ease-in-out infinite alternate nextGlow}@keyframes nextGlow{to{box-shadow:2px 2px 0 var(--ink), 0 0 0 5px #c2412d59;transform:translateY(-2px)}}.stars{letter-spacing:8px;height:58px;font-size:46px}.stars i{color:#d8cdb8;font-style:normal;display:inline-block}.stars i.on{color:var(--accent);animation:.45s cubic-bezier(.3,1.6,.5,1) stamp}@keyframes stamp{0%{opacity:0;transform:scale(3)rotate(-30deg)}}.badges{min-height:1.3em;margin:2px 0;font-weight:800}.badges span{border:2px solid var(--ink);background:#fff3cf;border-radius:999px;margin:2px;padding:1px 10px;font-size:14px;animation:.4s backwards cardIn;display:inline-block}.tally{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.tally div{border:2px solid var(--ink);background:#fff;border-radius:12px;min-width:76px;padding:4px 10px}.tally b{font-variant-numeric:tabular-nums;font-size:22px;display:block}.tally small{opacity:.7}.share pre{border:2px dashed var(--ink);white-space:pre-wrap;background:#fff;border-radius:12px;margin:10px 0 6px;padding:8px;font:15px/1.35 ui-monospace,Menlo,monospace}.met{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:34vh;margin:6px 0 4px;padding:4px;display:grid;overflow-y:auto}.met>div{border:2px solid var(--ink);background:#fff;border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:12px;animation:.5s cubic-bezier(.3,1.4,.5,1) backwards flipIn;display:flex}@keyframes flipIn{0%{opacity:0;transform:rotateY(90deg)scale(.8)}}.met img{object-fit:contain;max-width:100%;height:58px}.met span{line-height:1.15}.met a{color:var(--accent);font-size:12px;font-weight:800}.met a.shop-link{background:var(--accent);color:#fff;border-radius:999px;margin-top:2px;padding:2px 8px;font-size:11px;line-height:1.25;text-decoration:none}.demo{perspective:600px;justify-content:center;gap:8px;margin:6px 0;display:flex}.demo .dc{--cw:52px}.demo .c{cursor:default}@media (height<=640px){.fan{height:120px}.fan .c{--cw:66px;margin-left:-33px}.logo{font-size:52px}}@media (width<=420px){.map{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{font-size:13px}.tally div{min-width:64px}}
