:root{--bg:#213c29;--bg-elevated:#2b4a34;--accent:#daf939;--ink:#1f321e;--text:#f3f5ee;--neutral:#95bacc;--danger:#e8434c;--warning:#f5b942;--radius-card:20px;--radius-slot:16px;--radius-pill:999px;--font-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-body:"Work Sans", ui-sans-serif, system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);margin:0}body{height:100dvh;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;flex-direction:column;display:flex;overflow:hidden}#app{flex-direction:column;flex:1;min-height:0;display:flex}.topbar{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px 0;display:flex}.wordmark{font-family:var(--font-display);font-size:20px;font-weight:700}.wordmark i{color:var(--accent);font-style:normal}.badge{border-radius:var(--radius-pill);font-family:var(--font-display);flex-shrink:0;padding:5px 12px;font-size:12px;font-weight:700;line-height:1.2}.badge.claimed{color:var(--warning);background:#f5b94229}.badge.validated{color:var(--accent);background:#daf93929}.screen{min-height:0;padding:24px 24px calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;flex:1;display:flex}.screen.welcome .roomy{padding:0 4px}.centred{text-align:center;justify-content:center;align-items:center;gap:14px}.title{font-family:var(--font-display);margin:0;font-size:30px;font-weight:700;line-height:1.15}.title-sm{font-family:var(--font-display);margin:0;font-size:24px;font-weight:700;line-height:1.2}.muted{color:var(--neutral);margin:0;font-size:14px;line-height:1.5}.meta{color:var(--neutral);margin:0;font-size:13px}.card{background:var(--bg-elevated);border-radius:var(--radius-card);flex-direction:column;gap:16px;padding:22px;display:flex}.card.raised{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);gap:14px}.card.mission{min-height:0;overflow-y:auto}.rule{align-items:flex-start;gap:12px;display:flex}.rule span{border-radius:var(--radius-pill);background:var(--accent);width:24px;height:24px;color:var(--ink);font-family:var(--font-display);flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.rule p{margin:0;font-size:14px;line-height:1.5}.mission-text{font-family:var(--font-display);margin:0;font-size:20px;font-weight:700;line-height:1.3}.spacer{flex:1}.cta{border-radius:var(--radius-pill);background:var(--accent);width:100%;height:56px;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--font-display);cursor:pointer;flex-shrink:0;font-size:16px;font-weight:700}.cta.quiet{color:var(--text);box-shadow:none;background:0 0;border:1.5px solid #95bacc80;width:auto;height:52px;padding:0 28px}.note{border-radius:var(--radius-slot);flex-direction:column;flex-shrink:0;gap:6px;padding:16px;display:flex}.note.waiting{background:#95bacc24;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:6px 16px}.note.waiting h2{font-size:15px}.undo{border-radius:var(--radius-pill);width:44px;height:44px;color:var(--text);cursor:pointer;background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.note.won{background:var(--accent);color:var(--ink);padding:18px}.note.lost{border:1.5px solid var(--danger);background:#e8434c29;padding:18px}.note h2{font-family:var(--font-display);margin:0;font-size:20px;font-weight:700}.note.lost h2{color:var(--danger)}.note p{margin:0;font-size:13px;line-height:1.4}.note.waiting p{color:var(--neutral)}.confirm{background:0 0;border:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;position:fixed;inset:0}.confirm[open]{flex-direction:column;justify-content:flex-end;display:flex}.confirm:focus{outline:none}.confirm::backdrop{background:#1f321eb8;animation:.18s ease-out sheet-fade}.sheet{background:var(--bg);width:100%;color:var(--text);padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));touch-action:none;border-radius:28px 28px 0 0;flex-direction:column;transition:transform .18s ease-out;display:flex}.confirm[open] .sheet{animation:.18s ease-out sheet-up}.sheet-handle{border-radius:var(--radius-pill);background:#95bacc66;flex-shrink:0;align-self:center;width:40px;height:4px;margin-bottom:4px}.confirm h2{font-family:var(--font-display);margin:8px 0 12px;font-size:18px;font-weight:700;line-height:22px}.confirm p{color:var(--neutral);margin:0;font-size:13px;line-height:18px}.sheet-actions{justify-content:flex-end;gap:8px;padding-top:16px;display:flex}.pair{border-radius:var(--radius-pill);background:var(--accent);height:50px;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--font-display);cursor:pointer;padding:0 22px;font-size:16px;font-weight:700}.pair.quiet{color:var(--text);box-shadow:none;background:0 0;border:1.5px solid #95bacc80}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-fade{0%{opacity:0}to{opacity:1}}.link-action{color:var(--accent);cursor:pointer;font:inherit;background:0 0;border:0;padding:0;text-decoration:underline}.bar{border-radius:var(--radius-pill);background:#95bacc38;width:120px;height:6px;overflow:hidden}.bar span{border-radius:var(--radius-pill);background:var(--accent);width:46%;height:100%;display:block}.overlay{z-index:10;background:#213c29f0;display:flex;position:fixed;inset:0}.loader{flex-direction:column;align-items:center;gap:28px;display:flex}.loader-faces{width:150px;height:150px;position:relative}.loader-faces img{object-fit:contain;opacity:0;width:100%;height:100%;animation:2.8s infinite loader-face;position:absolute;inset:0}.loader-faces img:nth-child(2){animation-delay:.7s}.loader-faces img:nth-child(3){animation-delay:1.4s}.loader-faces img:nth-child(4){animation-delay:2.1s}@keyframes loader-face{0%{opacity:0;transform:scale(.92)}6%{opacity:1;transform:scale(1)}20%{opacity:1;transform:scale(1)}27%{opacity:0;transform:scale(.92)}to{opacity:0}}.loader-says{flex-direction:column;align-items:center;gap:14px;display:flex}.loader-says h1{font-family:var(--font-display);color:var(--text);text-align:center;margin:0;font-size:20px;font-weight:700;line-height:26px}.loader-dots{gap:8px;display:flex}.loader-dots span{border-radius:var(--radius-pill);background:var(--accent);opacity:.3;width:8px;height:8px;animation:1.1s infinite loader-dot}.loader-dots span:nth-child(2){animation-delay:.18s}.loader-dots span:nth-child(3){animation-delay:.36s}@keyframes loader-dot{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}@media (prefers-reduced-motion:reduce){.loader-faces img{opacity:0;animation:none}.loader-faces img:first-child{opacity:1}.loader-dots span{opacity:.3;animation:none}.confirm[open] .sheet{animation:none}.confirm::backdrop{animation:none}.sheet{transition:none}}.proof{flex-direction:column;flex:1 1 0;min-height:120px;display:flex}.slot{border-radius:var(--radius-slot);box-sizing:border-box;text-align:center;width:100%;min-height:0;font:inherit;color:var(--neutral);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:0 24px;display:flex}.slot.empty,.slot.pending{cursor:pointer;background:#95bacc1f;border:1.5px dashed #95bacc73}.slot.failed{border:1.5px solid var(--danger);background:#e8434c1a;gap:8px}.slot.failed h2{font-family:var(--font-display);color:var(--danger);margin:0;font-size:15px;font-weight:700}.slot.filled{cursor:pointer;border:0;padding:0;position:relative;overflow:hidden}.slot.filled img{object-fit:cover;flex:1;width:100%;min-height:0}.slot .change{border-radius:var(--radius-pill);color:var(--text);background:#1f321edb;padding:8px 14px;font-size:12px;font-weight:600;position:absolute;bottom:10px;right:10px}
