@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");:root{--bg:#07070f;--surface:rgba(255,255,255,0.045);--surface-hover:rgba(255,255,255,0.09);--border:rgba(255,255,255,0.08);--border-bright:rgba(255,255,255,0.14);--text:#f0f0f8;--text-muted:rgba(255,255,255,0.38);--accent:#ff4e6a;--accent2:#ff9f43;--green:#2ed573;--red:#ff4e6a}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overflow:hidden}body{background:var(--bg);background-image:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(255,78,106,.14) 0,transparent 70%),radial-gradient(ellipse 60% 50% at 100% 110%,rgba(100,60,200,.07) 0,transparent 60%);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100dvh;max-width:520px;margin:0 auto;padding:0 18px}.header{display:flex;align-items:center;justify-content:space-between;padding:22px 0 18px;flex-shrink:0}.logo{font-size:1.55rem;font-weight:800;letter-spacing:-.6px;background:linear-gradient(130deg,#ff4e6a,#ff9f43);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:.82rem;font-weight:600;padding:8px 16px;border-radius:100px;cursor:pointer;transition:background .18s,border-color .18s;letter-spacing:.2px}.glass-btn:hover{background:var(--surface-hover);border-color:var(--border-bright)}.main{flex:1 1;flex-direction:column;justify-content:center;gap:20px;overflow:hidden;padding-bottom:12px}.cards-row,.main{display:flex;align-items:center}.cards-row{gap:10px;width:100%;transition:opacity .3s ease,transform .3s ease}.cards-row.exiting{opacity:0;transform:scale(.95) translateY(8px)}.card{flex:1 1;aspect-ratio:3/4;max-height:min(54vh,440px);background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;position:relative;cursor:pointer;padding:0;outline:none;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease,filter .3s ease,opacity .3s ease,border-color .3s ease}.card:hover:not(:disabled):not(.winner):not(.loser){transform:scale(1.035) translateY(-5px);box-shadow:0 24px 60px rgba(0,0,0,.55)}.card:disabled{cursor:default}.card img{height:100%;object-fit:cover;display:block;transition:filter .3s ease}.card img,.card-footer{width:100%;pointer-events:none}.card-footer{position:absolute;bottom:0;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;justify-content:center}.elo-badge{font-size:.72rem;font-weight:700;background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.14);padding:3px 11px;border-radius:100px;letter-spacing:.3px}.vote-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.8rem;background:rgba(46,213,115,.18);opacity:0;transition:opacity .15s ease;pointer-events:none}.card:active:not(:disabled) .vote-hint{opacity:1}.card.winner{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 50px rgba(46,213,115,.28);animation:winPulse .45s cubic-bezier(.34,1.56,.64,1)}.card.winner .winner-badge{opacity:1}.card.loser{transform:scale(.91);opacity:.55}.card.loser img{filter:grayscale(.85) brightness(.7)}.winner-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--green);color:#000;font-size:.7rem;font-weight:800;padding:4px 12px;border-radius:100px;letter-spacing:.8px;text-transform:uppercase;opacity:0;transition:opacity .2s;pointer-events:none}@keyframes winPulse{0%{transform:scale(1)}45%{transform:scale(1.06)}to{transform:scale(1)}}.card.skeleton{cursor:default;animation:skeletonPulse 1.6s ease-in-out infinite}@keyframes skeletonPulse{0%,to{background:rgba(255,255,255,.03)}50%{background:rgba(255,255,255,.07)}}.vs{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;letter-spacing:.5px;box-shadow:0 0 24px rgba(255,78,106,.45);flex-shrink:0}.hint{font-size:.78rem;letter-spacing:.1px}.empty,.hint{color:var(--text-muted);text-align:center}.empty{font-size:.9rem}.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 24px}.empty-state-icon{font-size:3rem;line-height:1;margin-bottom:4px}.empty-state-title{font-size:1.15rem;font-weight:700;color:var(--text)}.empty-state-text{font-size:.88rem;color:var(--text-muted);line-height:1.5}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:backdropIn .2s ease}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:520px;max-height:82vh;background:#0f0f1c;border:1px solid var(--border);border-bottom:none;border-radius:26px 26px 0 0;display:flex;flex-direction:column;animation:sheetUp .32s cubic-bezier(.34,1.2,.64,1)}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-handle{width:36px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;margin:12px auto 0;flex-shrink:0}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0}.modal-header h2{font-size:1.05rem;font-weight:700;letter-spacing:-.2px}.close-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:background .18s;font-family:inherit}.close-btn:hover{background:var(--surface-hover)}.modal-body{overflow-y:auto;padding:6px 0 env(safe-area-inset-bottom,16px);flex:1 1;overscroll-behavior:contain}.lb-loading{text-align:center;padding:44px 20px;color:var(--text-muted);font-size:.88rem}.rank-item{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}.rank-item:last-child{border-bottom:none}.rank-item:hover{background:var(--surface)}.rank-num{width:26px;font-size:.78rem;font-weight:700;color:var(--text-muted);flex-shrink:0;text-align:right}.rank-1 .rank-num{color:#ffd700}.rank-2 .rank-num{color:#c0c0c0}.rank-3 .rank-num{color:#cd7f32}.rank-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface);border:1px solid var(--border)}.rank-name{flex:1 1;font-size:.88rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.rank-elo{font-size:.82rem;font-weight:700;color:var(--green);flex-shrink:0}.rank-matches{font-size:.72rem;color:var(--text-muted);flex-shrink:0;margin-left:-4px}.header-actions{gap:8px}.header-actions,.user-chip{display:flex;align-items:center}.user-chip{position:relative;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:4px 12px 4px 4px;cursor:pointer;transition:background .18s,border-color .18s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.user-chip:hover{background:var(--surface-hover);border-color:var(--border-bright)}.user-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface)}.user-name{font-size:.8rem;font-weight:600;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu{position:absolute;top:calc(100% + 8px);right:0;background:#14141f;border:1px solid var(--border-bright);border-radius:12px;padding:6px;min-width:130px;z-index:100;animation:menuIn .15s ease;box-shadow:0 12px 40px rgba(0,0,0,.5)}@keyframes menuIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.menu-item{width:100%;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:.85rem;font-weight:500;padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:background .15s}.menu-item:hover{background:var(--surface-hover)}.rank-me{background:rgba(255,159,67,.06);border-left:2px solid var(--accent2)}.rank-you{font-size:.72rem;color:var(--accent2);font-weight:600}.auth-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 18px;overflow-y:auto}.auth-card{width:100%;max-width:360px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:28px;padding:36px 28px 32px;display:flex;flex-direction:column;gap:24px}.auth-logo{text-align:center}.auth-logo .logo{font-size:2rem}.auth-tagline{margin-top:6px;font-size:.85rem;color:var(--text-muted)}.auth-form{gap:14px}.auth-form,.field{display:flex;flex-direction:column}.field{gap:5px}.field label{font-size:.74rem;font-weight:600;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}.field input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--text);font-family:inherit;font-size:.92rem;padding:11px 14px;outline:none;transition:border-color .18s,background .18s}.field input:focus{border-color:var(--accent);background:rgba(255,255,255,.08)}.auth-error{font-size:.82rem;color:var(--accent);background:rgba(255,78,106,.1);border:1px solid rgba(255,78,106,.22);border-radius:10px;padding:9px 13px;text-align:center}.auth-btn{background:linear-gradient(130deg,var(--accent) 0,var(--accent2) 100%);border:none;border-radius:14px;color:#fff;font-family:inherit;font-size:.95rem;font-weight:700;padding:13px;cursor:pointer;margin-top:4px;transition:opacity .18s,transform .18s;letter-spacing:.2px}.auth-btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.auth-btn:disabled{opacity:.55;cursor:default}.auth-link{text-align:center;font-size:.83rem;color:var(--text-muted)}.auth-link a{color:var(--accent2);text-decoration:none;font-weight:600}.auth-link a:hover{text-decoration:underline}.photo-upload-field{display:flex;flex-direction:column;align-items:center;gap:8px}.photo-picker{width:90px;height:90px;border-radius:50%;background:var(--surface);border:2px dashed var(--border-bright);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;padding:0}.photo-picker:hover{border-color:var(--accent);background:var(--surface-hover)}.photo-preview-img{width:100%;height:100%;object-fit:cover;display:block}.photo-placeholder-icon{font-size:2rem;line-height:1}.photo-hint{font-size:.76rem;color:var(--text-muted)}.menu-item[href]{display:block;text-decoration:none}.menu-item-danger{color:var(--accent)}.menu-item-danger:hover{background:rgba(255,78,106,.1)}.logo-link{text-decoration:none}.profile-section-label{font-size:.72rem;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase;padding-top:4px;border-top:1px solid var(--border)}.auth-success{font-size:.82rem;color:var(--green);background:rgba(46,213,115,.1);border:1px solid rgba(46,213,115,.22);border-radius:10px;padding:9px 13px;text-align:center}.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;background:#fff;color:#1f1f1f;border:none;border-radius:12px;font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .15s;letter-spacing:.1px}.btn-google:hover:not(:disabled){opacity:.92;transform:translateY(-1px)}.btn-google:disabled{opacity:.5;cursor:default}.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:.78rem}.auth-divider:after,.auth-divider:before{content:"";flex:1 1;height:1px;background:var(--border)}@media (max-width:360px){.card{border-radius:16px}.vs{width:28px;height:28px;font-size:.6rem}.user-name{display:none}}