:root{--blue: #3d7be0;--blue-dark: #2a5fb8;--blue-soft: #e8f0fd;--pink: #e0569b;--pink-dark: #b8357a;--pink-soft: #fde8f2;--yellow: #f2c230;--yellow-soft: #fff6d6;--ink: #1d2433;--muted: #5b6475;--line: #dde3ee;--bg: #f6f8ff;--card: #ffffff;--radius: 16px;--phone-w: 390px;--phone-h: 844px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}a{color:var(--blue-dark)}.stage{min-height:100%}.phone{position:relative;width:100%;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column}.desk-note{display:none;max-width:260px;color:var(--muted);font-size:15px;line-height:1.5}.desk-note h1{color:var(--ink);font-size:34px;margin:0 0 8px}@media (min-width: 600px){.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:48px;padding:32px;background:radial-gradient(circle at 20% 20%,var(--pink-soft),transparent 45%),radial-gradient(circle at 80% 80%,var(--blue-soft),transparent 45%),#eef1f8}.phone{width:var(--phone-w);height:var(--phone-h);min-height:0;border-radius:44px;border:10px solid #1d2433;box-shadow:0 30px 60px #1d243340;overflow:hidden;flex:none}.desk-note{display:block}}.screen{flex:1;overflow-y:auto;padding:16px 16px 24px;display:flex;flex-direction:column;gap:16px}.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px}.card.blue{background:var(--blue-soft);border-color:#c5d8f7}.card.pink{background:var(--pink-soft);border-color:#f5c3dc}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.stack{display:flex;flex-direction:column;gap:10px}.label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}.muted{color:var(--muted)}.small{font-size:13px}.title{font-size:26px;font-weight:900;margin:0}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-weight:800;font-size:14px}.chip.coin{background:var(--yellow-soft);border-color:#f0dc95}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--ink);background:var(--card);font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;color:var(--ink)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.pink{background:var(--pink);border-color:var(--pink);color:#fff}.btn.ghost{border-color:var(--line)}.btn.block{width:100%}.btn.small{min-height:36px;padding:0 12px;font-size:13px}.pill-link{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dark);font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}.bar{height:12px;border-radius:999px;background:#e4e8f1;overflow:hidden}.bar>div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--pink));transition:width .6s ease}.bar.thin{height:8px}.input{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;background:#fff;font-size:16px}.input:focus{outline:2px solid var(--blue);border-color:var(--blue)}.field{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:14px}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#e9edf5;border-radius:12px;padding:4px;gap:4px}.seg button{min-height:38px;border:0;border-radius:9px;background:transparent;font-weight:800;font-size:14px;color:var(--muted);cursor:pointer}.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001f}.choices{display:flex;flex-wrap:wrap;gap:8px}.choice{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:800;cursor:pointer}.choice.on{background:var(--blue);border-color:var(--blue);color:#fff}.avatar{width:52px;height:52px;border-radius:999px;border:2px solid #fff;background:var(--blue-soft);color:var(--blue-dark);font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.avatar.glow{box-shadow:0 0 0 3px var(--yellow),0 0 16px 4px #f2c23099}.avatar.sm{width:36px;height:36px;font-size:13px;cursor:default}.todo{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--line);cursor:pointer}.todo:last-child{border-bottom:0}.todo input{width:22px;height:22px;accent-color:var(--pink);margin:0}.reward{font-size:12px;font-weight:800;background:var(--yellow-soft);border-radius:999px;padding:3px 8px;white-space:nowrap}.char-wrap{width:260px;height:260px;border-radius:999px;background:radial-gradient(circle at 50% 40%,#fff,var(--blue-soft) 70%);margin:0 auto;cursor:pointer}.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1.5px solid var(--line);background:#fff;padding:6px 4px calc(10px + env(safe-area-inset-bottom))}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;font-size:11px;font-weight:800;color:var(--muted);text-decoration:none}.tab.active{color:var(--pink)}.logbtn{width:56px;height:56px;border-radius:999px;border:0;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;margin:-26px auto 0;cursor:pointer;box-shadow:0 6px 16px #e0569b66}.sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#1d243366;display:flex;align-items:flex-end;z-index:20}.sheet{width:100%;max-height:90%;overflow-y:auto;background:#fff;border-radius:24px 24px 0 0;padding:20px 16px 24px;display:flex;flex-direction:column;gap:16px}.toast{position:absolute;left:16px;right:16px;bottom:96px;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;font-weight:700;z-index:30;animation:pop .25s ease}@keyframes pop{0%{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}.thumb{height:92px;border-radius:12px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--blue-dark)}.thumb.rare{background:var(--pink-soft);color:var(--pink-dark)}.thumb.legendary{background:var(--yellow-soft);color:#8a6a00;box-shadow:inset 0 0 0 2px var(--yellow)}.blob{width:64px;height:64px;border-radius:50% 50% 46% 46%;background:var(--blue);margin:8px auto 0;position:relative}.blob:before,.blob:after{content:"";position:absolute;top:24px;width:8px;height:10px;border-radius:999px;background:#fff}.blob:before{left:18px}.blob:after{right:18px}.timeline{display:flex;flex-direction:column;border-left:2px solid var(--line);margin-left:8px}.stage-row{display:flex;gap:12px;align-items:center;padding:8px 0;margin-left:-9px}.dot{width:16px;height:16px;border-radius:999px;border:3px solid var(--blue);background:#fff;flex:none}.dot.done{background:var(--blue)}.stage-row.current{background:var(--blue-soft);border-radius:14px;padding:10px 10px 10px 0}.center{text-align:center}.error{color:var(--pink-dark);font-weight:700}.banner{background:var(--yellow-soft);border:1.5px solid #f0dc95;border-radius:12px;padding:10px 12px;font-size:13px}.divider{display:flex;align-items:center;text-align:center;margin:4px 0;color:var(--muted);font-size:13px;font-weight:700}.divider:before,.divider:after{content:"";flex:1;border-bottom:1.5px solid var(--line)}.divider:before{margin-right:12px}.divider:after{margin-left:12px}.btn.google{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:0 1px 3px #00000014}.btn.google:hover{background:#f9faff;border-color:#cbd5e1}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#1d243399;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}.modal-card{width:100%;max-width:340px;background:#fff;border-radius:24px;padding:24px 20px;box-shadow:0 20px 40px #00000040;text-align:center;animation:pop .25s cubic-bezier(.16,1,.3,1)}.code-display{font-family:monospace;font-size:32px;font-weight:900;letter-spacing:.25em;padding:14px 16px;background:var(--blue-soft);border:2px dashed var(--blue);border-radius:16px;color:var(--blue-dark);text-align:center;margin:8px 0;-webkit-user-select:all;user-select:all}.logo-wake{animation:wake 1.6s ease-in-out infinite}@keyframes wake{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (prefers-reduced-motion: reduce){.logo-wake{animation:none}}