@import"https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:Space Grotesk,system-ui,sans-serif}button,input,select{font-family:inherit}#root{min-height:100vh}:root{color-scheme:light}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}.app{min-height:100dvh;background:#f6f6f6;color:#111;font-family:Manrope,system-ui,sans-serif;padding:16px 16px calc(20px + env(safe-area-inset-bottom));display:flex;justify-content:center}.screen{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:16px;min-height:calc(100dvh - 36px - env(safe-area-inset-bottom));position:relative}.input{width:100%;border-radius:12px;border:1px solid #e0e0e0;padding:12px 14px;font-size:1rem;background:#fff;color:#111;box-shadow:0 1px #0000000a}.input::placeholder{color:#9b9b9b}.btn{border:none;background:#fff;color:#111;padding:12px 18px;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 1px #00000014}.btn.dark{background:#2b2b2b;color:#fff}.btn.wide{width:100%}.btn.outline{background:#fff;border:1px solid #2b2b2b}.btn.ghost{background:transparent;color:#5a5a5a;box-shadow:none}.btn.small{padding:6px 12px;font-size:.8rem;border-radius:10px}.btn.tiny{padding:6px 10px;font-size:.7rem;border-radius:8px}.home{align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:24px}.home-form{width:100%;display:flex;flex-direction:column;gap:14px}.input-row{display:grid;grid-template-columns:1fr auto;gap:10px}.home-title{text-align:left;width:100%}.home-title img{width:100%;max-width:320px;height:auto;display:block}.home-title p{margin:6px 0 0;color:#7c7c7c;font-size:1rem}.joining{justify-content:center}.joining-header{width:100%;display:flex;justify-content:flex-start}.status{font-size:.9rem;color:#9b9b9b;margin-top:0}.tutorial-btn{align-self:flex-start}.joining-main{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;flex:1;justify-content:center}.emoji-circle{width:120px;height:120px;border-radius:50%;border:none;background:#111;color:#fff;font-size:3rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 14px #0000002e}.emoji-circle .avatar-img{width:88%;height:88%}.avatar-img{width:100%;height:100%;object-fit:contain;border-radius:50%}.avatar-fallback{font-size:1rem;color:#ffffffb3}.emoji-placeholder{font-size:1rem;color:#ffffffb3;letter-spacing:.02em}.name-input{width:50%;min-width:160px;max-width:220px;text-align:center}.preference{display:flex;align-items:center;gap:12px;font-size:.9rem;color:#8a8a8a}.pref-icon-img{width:20px;height:20px}.pref-toggle-btn{border:none;border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;background:#f0f0f0;font-weight:700;color:#4d4d4d;min-width:96px}.pref-toggle-btn.good{background:#2b2b2b;color:#fff}.pref-toggle-btn.evil{background:#f0f0f0;color:#4d4d4d}.pref-toggle-btn:focus{outline:2px solid rgba(0,0,0,.2);outline-offset:2px}.pref-toggle-btn.active{background:#2b2b2b;color:#fff}.joining-actions{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center}.ready-btn{padding:12px 45px}.inline-error{width:100%;padding:10px 12px;border-radius:10px;background:#ffe3e3;color:#8f2f2f;text-align:center;font-weight:600}.tutorial{gap:16px;justify-content:space-between}.tutorial-header{width:100%;display:flex;justify-content:flex-start}.tutorial-card{width:100%;background:#fff;border-radius:16px;border:1px solid #d8d8d8;padding:18px 16px;box-shadow:0 4px 12px #00000014;display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}.tutorial-grid{display:flex;flex-direction:column;gap:16px;width:100%;align-items:center}.tutorial-line{display:grid;grid-template-columns:32px 32px 1fr;gap:12px;align-items:center;width:100%;max-width:280px}.tutorial-line.catnip-line{grid-template-columns:auto 1fr}.tutorial-row.catnip{gap:10px;color:#777;font-size:.9rem}.tutorial-text{color:#7a7a7a;font-size:.9rem}.tutorial-icon{width:28px;height:28px;display:block}.tutorial-icon-wrap{position:relative;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}.tutorial-icon-wrap .tutorial-icon{width:28px;height:28px}.tutorial-mask-overlay{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:#fff;border-radius:50%;border:1px solid #d6d6d6;padding:2px}.tutorial-mask-overlay.dark{background:#111;border-color:#111}.tutorial-divider{height:1px;background:#ececec;width:100%;max-width:280px;margin:2px 0}.lobby{gap:22px;justify-content:center}.lobby-card{width:100%}.lobby-code{background:#fff;padding:8px 16px;border-radius:12px;border:1px solid #e0e0e0;text-align:center;font-size:.85rem;box-shadow:0 4px 8px #00000014;margin-top:0}.lobby-code strong{display:block;font-weight:700}.qr-wrap{width:100%;background:#d8d8d8;border-radius:16px;padding:16px;display:flex;justify-content:center;align-items:center;min-height:220px}.qr-wrap img{width:70%;max-width:260px;height:auto}.qr-placeholder{color:#6a6a6a;font-weight:700}.lobby-players{text-align:center;width:100%}.lobby-players p{margin:0 0 12px;color:#9b9b9b}.player-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.player-pill{display:grid;gap:6px;justify-items:center}.player-emoji{width:50px;height:50px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem}.player-emoji .avatar-img{width:90%;height:90%}.player-name{font-size:.75rem;color:#7a7a7a}.lobby-actions{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}.duel{width:min(520px,100%);gap:12px}.duel-result{width:min(520px,100%);gap:10px;padding-bottom:10px}.topbar{width:100%;background:#fff;border-radius:14px;border:1px solid #e0e0e0;padding:8px 10px;display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:8px;box-shadow:0 6px 14px #00000014}.score-pill{display:flex;align-items:center;gap:8px;justify-content:center;font-weight:700}.score-value{font-size:.9rem}.score-pill.down{opacity:.4}.score-emoji{width:34px;height:34px;border-radius:50%;background:#111;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;position:relative}.score-emoji .avatar-img{width:88%;height:88%}.menu-btn{border:none;background:transparent;font-size:1.2rem;color:#2b2b2b;cursor:pointer}.duel-field{width:100%;flex:1;display:flex;flex-direction:column;gap:8px;position:relative;align-items:stretch;justify-content:stretch}.bubble{display:flex;align-items:stretch;gap:12px;width:100%;position:relative;flex:1}.your-bubble{align-self:flex-start;justify-content:flex-start;padding-left:12px;align-items:flex-start}.enemy-bubble{align-self:flex-end;justify-content:flex-end;padding-right:12px;align-items:flex-end}.bubble-emoji{width:72px;height:72px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.4rem;line-height:1;position:relative;flex-shrink:0}.bubble-emoji .avatar-img{width:92%;height:92%}.your-bubble .bubble-emoji{margin-left:-12px;margin-top:-8px;z-index:2;align-self:flex-start}.enemy-bubble .bubble-emoji{margin-right:-12px;margin-bottom:-8px;z-index:2;align-self:flex-end}.bubble-card{background:#fff;border:1px solid #e0e0e0;border-radius:14px;padding:14px 12px;min-width:160px;max-width:210px;min-height:170px;height:100%;box-shadow:0 4px 10px #00000014;text-align:center;position:relative;display:flex;flex-direction:column;justify-content:center}.bubble-card h3{margin:0 0 12px;font-size:.95rem}.your-bubble .bubble-card:before,.your-bubble .bubble-card:after,.enemy-bubble .bubble-card:before,.enemy-bubble .bubble-card:after{content:"";position:absolute;width:0;height:0;border-style:solid}.your-bubble .bubble-card:before{left:-10px;top:18px;border-width:8px 10px 8px 0;border-color:transparent #e0e0e0 transparent transparent}.your-bubble .bubble-card:after{left:-9px;top:19px;border-width:7px 9px 7px 0;border-color:transparent #fff transparent transparent}.enemy-bubble .bubble-card:before{right:-10px;bottom:18px;border-width:8px 0 8px 10px;border-color:transparent transparent transparent #e0e0e0}.enemy-bubble .bubble-card:after{right:-9px;bottom:19px;border-width:7px 0 7px 9px;border-color:transparent transparent transparent #fff}.choice-row{display:flex;justify-content:center;gap:14px;margin-bottom:10px}.offer-btn{align-self:center;margin-top:6px}.kitten{width:72px;height:72px;border-radius:50%;border:1px solid #bbb;background:#fff;display:inline-flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.kitten img{width:42px;height:42px}.kitten.active{box-shadow:0 0 0 3px #0003}.kitten:disabled{opacity:.5;cursor:not-allowed}.round-label{font-weight:700;color:#555;align-self:center;margin:4px 0;flex:0}.duel-result .btn{margin-top:auto}.countdown{color:#2b2b2b;font-weight:800}.catnip-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}.catnip-label{border:1px solid #d0d0d0;padding:4px 10px;border-radius:8px;font-size:.8rem;color:#555;background:#f7f7f7}.result-value{font-size:1.6rem;font-weight:800;margin-bottom:12px}.result-icon .kitten{cursor:default}.avatar{position:relative}.mask-overlay{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;background:#fff;border-radius:50%;border:1px solid #e0e0e0;padding:2px}.bubble-emoji .mask-overlay{width:24px;height:24px;right:-8px;bottom:-8px}.mask-overlay.white{background:#fff}.mask-overlay.black{background:#111}.lose{justify-content:center;text-align:center;gap:16px}.lose-image{width:120px;height:auto}.emoji-modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.emoji-panel{background:#fff;border-radius:16px;padding:20px;width:min(360px,100%);display:flex;flex-direction:column;gap:16px}.emoji-panel h3{margin:0}.emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.emoji-option{border:1px solid #e0e0e0;background:#fff;font-size:1.5rem;padding:10px 0;border-radius:12px;cursor:pointer}.emoji-option img{width:36px;height:36px}.emoji-option:disabled{opacity:.3;cursor:not-allowed}@media(max-width:420px){.home-title h1{font-size:2.6rem}.bubble-card{min-width:170px}.player-row{grid-template-columns:repeat(4,1fr)}}@media(max-width:360px){.topbar{grid-template-columns:repeat(4,1fr) auto;padding:8px}.score-value{font-size:.75rem}.bubble-card{min-width:160px;padding:12px 10px}}