:root{--tg-bg: #18191a;--tg-text: #e4e6eb;--tg-hint: #b0b3b8;--tg-button: #7b5ea7;--tg-button-text: #ffffff;--tg-secondary-bg: #242526}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background:var(--tg-bg);color:var(--tg-text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#root{display:flex;flex-direction:column;height:100dvh}#app{flex:1;position:relative;overflow:hidden;min-height:0;isolation:isolate}#bottombar{flex-shrink:0;will-change:transform;display:flex;align-items:center;gap:8px;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--tg-secondary-bg);border-top:1px solid rgba(255,255,255,.06)}.search-input{flex:1;height:40px;padding:0 16px;border:none;border-radius:20px;background:#ffffff1a;color:var(--tg-text);font-size:15px;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.search-input::placeholder{color:var(--tg-hint)}.search-input::-webkit-search-cancel-button{-webkit-appearance:none}.filter-btn{flex-shrink:0;width:40px;height:40px;border:none;border-radius:50%;background:#ffffff1a;color:var(--tg-hint);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,background .15s}.filter-btn.active{color:var(--tg-button);background:#7b5ea72e}.filter-btn:active{opacity:.7}#card-bg{display:none}.swipe-card{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:20px;overflow:hidden;background-color:var(--tg-secondary-bg);box-shadow:0 12px 48px #0000008c;-webkit-user-select:none;user-select:none;cursor:grab;will-change:transform;z-index:1;transition:transform .32s cubic-bezier(.2,0,0,1),opacity .32s ease-out}.swipe-card-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none;-webkit-user-select:none;user-select:none}.swipe-card.flying,.swipe-card.peek-card{box-shadow:none}.swipe-card.peek-card{will-change:auto}.swipe-card.is-dragging{box-shadow:none}.swipe-card.is-dragging .card-info{opacity:0}.swipe-card.fly-left{transform:translate(-120%) rotate(-15deg);opacity:0}.swipe-card.fly-right{transform:translate(120%) rotate(15deg);opacity:0}.swipe-heart{position:absolute;left:0;right:50%;top:0;bottom:40%;display:flex;align-items:center;justify-content:center;font-size:clamp(80px,20vw,140px);opacity:0;pointer-events:none;z-index:2;transition:opacity .2s ease;will-change:transform}@keyframes heart-pop{0%{transform:scale(0) rotate(-15deg)}60%{transform:scale(1.3) rotate(5deg)}80%{transform:scale(.9) rotate(-3deg)}to{transform:scale(1) rotate(0)}}@keyframes heart-beat{0%,to{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.96)}}.swipe-heart.pop-in{animation:heart-pop .4s cubic-bezier(.34,1.56,.64,1) forwards}.swipe-heart.beating{animation:heart-beat 1.1s ease-in-out infinite}.card-overlay{position:absolute;bottom:0;left:0;right:0;padding:32px 20px 28px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);display:flex;flex-direction:column;gap:8px}.card-name{font-size:28px;font-weight:700;color:#fff;line-height:1.2}.card-age{font-weight:400;font-size:24px}.card-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:3px 10px;font-size:12px;color:#fff}.card-desc{font-size:14px;color:#fffc;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-info{position:absolute;bottom:0;left:0;right:0;max-height:75%;background:linear-gradient(to top,#000000f2 70%,#000000b3);border-radius:20px 20px 0 0;padding:0 20px 28px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94)}.card-info.open{transform:translateY(0)}.card-info-toprow{display:flex;justify-content:flex-end;padding:10px 0 4px;flex-shrink:0}.card-info-close{width:28px;height:28px;border:none;border-radius:50%;background:#ffffff26;color:#ffffffb3;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.card-info-close:hover{background:#ffffff40}.card-info-name{font-size:24px;font-weight:700;color:#fff;line-height:1.2;flex-shrink:0}.card-info-pills{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}.info-pill{background:#ffffff26;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:3px 12px;font-size:12px;font-weight:500;color:#fff}.card-info-desc{font-size:14px;color:#ffffffd9;line-height:1.6}.character-preview{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000;opacity:0;transition:opacity .25s ease;display:flex;flex-direction:column}.character-preview.open{opacity:1}.character-preview-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}.character-preview-panel{position:absolute;bottom:0;left:0;right:0;max-height:75%;background:linear-gradient(to top,#000000f2 70%,#000000b3);border-radius:20px 20px 0 0;padding:0 20px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;-webkit-overflow-scrolling:touch}.character-preview-panel .card-info-toprow{position:sticky;top:0;background:linear-gradient(to bottom,#000000f2 60%,#0000);margin:0 -20px;padding:10px 20px 4px;z-index:1}.character-preview-cta{margin-top:8px;padding:14px 24px;border:none;border-radius:24px;background:var(--tg-button);color:var(--tg-button-text);font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s;position:sticky;bottom:0}.character-preview-cta:active{opacity:.75}.end-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--tg-bg);z-index:2}.end-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px;text-align:center}.end-emoji{font-size:64px}.end-title{font-size:20px;font-weight:600;color:var(--tg-text)}.no-results-text{color:var(--tg-hint)}.restart-btn{padding:12px 32px;border:none;border-radius:24px;background:var(--tg-button);color:var(--tg-button-text);font-size:16px;font-weight:600;cursor:pointer;transition:opacity .15s}.restart-btn:active{opacity:.75}.view-toggle-btn{flex-shrink:0;width:40px;height:40px;border:none;border-radius:50%;background:#ffffff1a;color:var(--tg-hint);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,background .15s}.view-toggle-btn:active{opacity:.7}.char-grid{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:calc((100vw - 24px)*.75);gap:8px;padding:8px;will-change:transform}.grid-card{position:relative;border-radius:14px;contain:paint;background-color:var(--tg-secondary-bg);cursor:pointer}.grid-card-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}.grid-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:40px 10px 10px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);display:flex;flex-direction:column;gap:5px}.grid-card-name{font-size:13px;font-weight:700;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid-card-desc{font-size:11px;color:#ffffffbf;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.grid-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.grid-tag{background:#ffffff2e;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:2px 7px;font-size:10px;color:#fff}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tg-hint)}.scenario-sheet{position:fixed;bottom:0;left:0;right:0;max-height:60dvh;background:var(--tg-secondary-bg);border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column;z-index:100;box-shadow:0 -4px 24px #0006}.scenario-sheet.open{transform:translateY(0)}.sheet-handle{width:40px;height:4px;background:#fff3;border-radius:2px;margin:12px auto 0;flex-shrink:0}.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px 20px;flex-shrink:0}.sheet-title{font-size:17px;font-weight:600;color:var(--tg-text)}.sheet-close{width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:var(--tg-hint);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.sheet-close:hover{background:#ffffff2e}.sheet-close:active{opacity:.7}.sheet-section-label{font-size:13px;font-weight:500;color:var(--tg-hint);text-transform:uppercase;letter-spacing:.05em;padding:4px 20px 8px;flex-shrink:0}.sheet-list{overflow-y:auto;padding:8px 12px 32px;display:flex;flex-direction:column;gap:8px}.scenario-item{padding:14px 16px;border-radius:12px;background:#ffffff0f;cursor:pointer;transition:background .15s}.scenario-item:active{background:#ffffff1f}.scenario-name{font-size:15px;font-weight:600;color:var(--tg-text);margin-bottom:4px}.scenario-desc{font-size:13px;color:var(--tg-hint);line-height:1.4}.filter-body{overflow-y:auto;flex:1;min-height:0}.filter-tags-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 16px;align-content:flex-start}.filter-tag{border-radius:20px;padding:6px 14px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--tg-hint);font-size:13px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.filter-tag.selected{background:var(--tg-button);color:var(--tg-button-text);border-color:transparent}.filter-tag.exclude.selected{background:#b03a3a;color:#fff;border-color:transparent}.gender-row{display:flex;gap:8px;padding:4px 16px 16px;flex-shrink:0}.gender-btn{flex:1;height:36px;border-radius:18px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--tg-hint);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.gender-btn.selected{background:var(--tg-button);color:var(--tg-button-text);border-color:transparent}.gender-btn:active{opacity:.75}.sheet-actions{display:flex;gap:10px;padding:12px 16px max(16px,env(safe-area-inset-bottom));flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)}.action-btn{flex:1;height:44px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .15s}.action-btn:active{opacity:.75}.action-btn.primary{background:var(--tg-button);color:var(--tg-button-text)}.action-btn.secondary{background:#ffffff1a;color:var(--tg-text)}
