.social-app{container-type:inline-size;container-name:hatch-social;--social-border:#ffffff16;--social-muted:#9aa1b7;color:#eff0f9;padding:18px 0 32px;font-size:14px;line-height:1.5}.social-app *{box-sizing:border-box}.social-avatar{overflow:hidden;flex-shrink:0}.social-avatar img{width:100%;height:100%;object-fit:cover}.social-layout.profile-page-layout{grid-template-columns:minmax(0,1fr);max-width:1100px;margin-inline:auto}.profile-page-layout>.social-connections{display:none}.public-profile{max-width:1100px;margin-inline:auto}.social-profile-banner{display:flex;align-items:flex-start;justify-content:space-between;padding:28px 32px;background:radial-gradient(ellipse at 80% 10%,#8262bd77,transparent 58%),linear-gradient(115deg,#292138,#11131f)}.social-profile-banner>span:first-child{letter-spacing:.2em;font-size:10px;color:#e7d8ff}.social-profile-banner>span:last-child{font-size:72px;color:#bda4ec88;line-height:1}.social-profile-title .social-avatar{border:5px solid #151823;border-radius:28px;font-size:32px}.profile-role{display:block;color:#c4b0f5;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.profile-introduction{max-width:760px}.profile-introduction .social-bio{white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.7}.profile-social-links{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.profile-connect,.profile-social-links a{padding:10px 16px;border:1px solid #ffffff26;border-radius:999px;color:#f4f0ea;text-decoration:none;background:#ffffff06;overflow-wrap:anywhere}.profile-social-links a:hover{border-color:#b6a0e7;background:#9d74eb16}.profile-connect{background:#7450c1}.profile-games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px;margin-top:24px}.profile-game-card{min-width:0}.profile-game-art{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#202033}.profile-game-art img,.profile-game-art svg{width:100%;height:100%;object-fit:cover;transition:transform .2s}.profile-game-art:hover img,.profile-game-art:hover svg{transform:scale(1.035)}.profile-game-card small{display:block;color:#b6a0e7;margin-top:14px}.profile-game-card h4{font-size:19px;margin:5px 0;overflow-wrap:anywhere}.profile-game-card p{margin:0;color:var(--social-muted)}.profile-empty{border:1px dashed #ffffff20;border-radius:18px;text-align:center;padding:32px 18px;margin-top:20px;color:var(--social-muted)}.profile-empty>span{font-size:34px;color:#b7a0e5}.profile-empty h4{color:#eee8df;font-size:18px;margin:8px 0}.profile-avatar-editor{display:flex;align-items:flex-start;gap:20px;padding:20px 0}.profile-avatar-editor>div{min-width:0;flex:1 1}.profile-avatar-editor .social-avatar{width:64px;height:64px}.profile-links-editor{margin-top:20px}.profile-link-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(160px,2fr) auto;gap:10px;align-items:end}.profile-link-row,.profile-link-row button{margin-bottom:12px}@media (max-width:600px){.profile-link-row{grid-template-columns:minmax(0,1fr);gap:0;border-bottom:1px solid #ffffff16;padding-bottom:12px}.profile-avatar-editor{flex-direction:column}.profile-games-grid{grid-template-columns:minmax(0,1fr)}.social-profile-title .social-avatar{width:76px;height:76px;border-radius:22px}}.social-app button,.social-app input,.social-app textarea{font:inherit}.social-app button{cursor:pointer;border:1px solid #ffffff22;border-radius:9px;background:#232639;color:#f2f3ff;padding:9px 13px;white-space:normal}.social-app button:hover{background:#34334f;border-color:#a89afd}.social-app button:disabled{opacity:.45;cursor:default}.social-app :focus-visible{outline:2px solid #b3a3ff;outline-offset:3px}.social-app input,.social-app textarea{width:100%;background:#0e1120;border:1px solid #ffffff26;border-radius:8px;padding:10px 12px;color:#f2f3ff;resize:vertical;min-width:0}.social-app label{display:grid;gap:7px;margin:0 0 12px;color:#d7daea;font-size:13px}.social-app h1{font-size:clamp(32px,4vw,50px);line-height:1.15;letter-spacing:-1.8px;margin:6px 0 10px}.social-app h1>span{color:#ad9bff}.social-app h2{font-size:18px;margin:0 0 14px;letter-spacing:-.3px}.social-app h2>span,.social-app h3>span{color:#b7aaff;font-size:13px;margin-left:8px}.social-app h3{font-size:17px;margin:0 0 12px}.social-app p{margin:0 0 14px}.social-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.social-heading>div>p{color:var(--social-muted)}.social-eyebrow{font-size:10px;letter-spacing:2px;color:#b3a2ff}.social-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.social-layout{display:grid;grid-template-columns:minmax(240px,310px) minmax(0,1fr);gap:22px;align-items:start}.social-connections{display:grid;gap:16px}.social-card{background:linear-gradient(125deg,#1b1e2d,#151824);border:1px solid var(--social-border);border-radius:16px;padding:20px;min-width:0;overflow:hidden}.social-identity,.social-person-line{display:flex;align-items:center;gap:12px}.social-identity>div{min-width:0}.social-identity span:not(.social-avatar),.social-identity strong{display:block;overflow-wrap:anywhere}.social-identity>div>span{font-size:12px;color:var(--social-muted)}.social-avatar{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;background:linear-gradient(135deg,#7462c3,#34445a);color:#fff;font-weight:700;font-size:14px;border:1px solid #c2b3ff45;border-radius:13px;letter-spacing:1px}.social-app .social-link{padding:5px 0;border:0;background:transparent;color:#beafff;font-size:12px}.social-muted{color:var(--social-muted);font-size:12px}.social-person{border-top:1px solid var(--social-border);padding:14px 0;display:grid;gap:9px}.social-person:last-child{padding-bottom:0}.social-app .social-person-name{padding:0;background:none;border:0;text-align:left;overflow-wrap:anywhere;min-width:0}.social-app small{font-size:11px}.social-app small,.social-playing{display:block;color:var(--social-muted)}.social-playing{font-size:12px;margin-top:4px;overflow-wrap:anywhere}.social-playing.is-playing{color:#7be1be}.social-app .social-search-result{display:flex;align-items:center;text-align:left;gap:10px;width:100%;margin-top:10px;background:#ffffff05;border:0;overflow-wrap:anywhere}.social-search-result>span:nth-child(2){min-width:0;flex:1 1}.social-search-result>span:last-child{color:#bdaeff}.social-welcome{min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}.social-welcome>p{max-width:400px;color:var(--social-muted)}.social-welcome>.social-muted{margin-top:22px}.social-orbit{font-size:70px;color:#b2a3ff;text-shadow:0 0 80px #8d71ff;margin-bottom:20px}.social-error{border:1px solid #ff8ca444;background:#381e2b;color:#ffc0ca;padding:12px;border-radius:10px;margin-bottom:15px;overflow-wrap:anywhere}.social-notice{color:#83e5bf;font-size:13px;padding:8px 0}.social-profile{padding:0 24px 24px}.social-profile-banner{height:155px;margin:0 -24px;background:radial-gradient(ellipse at 85% 130%,#6aaeb055,transparent 65%),radial-gradient(ellipse at 0 0,#876fe077,transparent 75%),#202335;border-bottom:1px solid var(--social-border)}.social-profile-title{display:flex;align-items:center;gap:16px;margin:-20px 0 20px;position:relative}.social-profile-title .social-avatar{width:100px;height:100px;flex-basis:100px;border-radius:21px;font-size:26px;border:4px solid #1a1d2b}.social-profile-title>div{padding-top:28px;min-width:0;overflow-wrap:anywhere}.social-profile-title h2{margin:0;font-size:25px}.social-profile-title p{margin:0;color:var(--social-muted);font-size:12px}.social-bio{white-space:pre-wrap;overflow-wrap:anywhere}.social-profile-actions{margin:18px 0}.social-confirm{background:#ffffff07;border-radius:10px;padding:15px;font-size:13px;margin:15px 0}.social-editor{border-top:1px solid var(--social-border);margin-top:22px;padding-top:22px}.social-editor fieldset{padding:0;border:0;margin:0;min-width:0}.social-editor .social-checkbox{display:flex;align-items:center;gap:10px;margin-top:18px}.social-checkbox input{width:17px;height:17px;accent-color:#a994f9;flex:none}.social-published{border-top:1px solid var(--social-border);padding-top:22px;margin-top:25px}.social-published-game{display:flex;align-items:center;gap:15px;background:#ffffff04;border:1px solid var(--social-border);padding:14px;border-radius:12px;margin-top:10px;overflow-wrap:anywhere}.social-published-game>span{color:#aa99f0;font-size:28px}.social-published-game a{color:#d1c5ff}.social-chat{padding:0;display:flex;flex-direction:column;min-height:580px}.social-chat-heading{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--social-border);min-width:0}.social-chat-heading>div{min-width:0;overflow-wrap:anywhere}.social-chat-heading h2{margin:0}.social-private{margin-left:auto;font-size:10px;color:var(--social-muted);text-transform:uppercase;letter-spacing:1px}.social-history{padding:12px 20px;font-size:11px;color:var(--social-muted)}.social-history button{font-size:11px;padding:6px 10px}.social-messages{height:340px;overflow:auto;padding:12px 20px;display:flex;flex-direction:column;gap:14px;scrollbar-color:#4b436b transparent}.social-message{align-self:flex-start;max-width:88%;padding:12px 15px;background:#292c3d;border:1px solid var(--social-border);border-radius:12px 12px 12px 3px;flex-shrink:0}.social-message.from-me{align-self:flex-end;background:#3a3056;border-color:#ad97f329;border-radius:12px 12px 3px 12px}.social-message>span{font-size:11px;color:#c5b8f8}.social-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0}.social-message time{font-size:10px;color:#b0afc3}.social-chat-empty{margin:auto!important;text-align:center;color:var(--social-muted)}.social-compose{border-top:1px solid var(--social-border);padding:20px}.social-compose>div{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--social-muted)}.social-compose button,.social-editor button[type=submit]{background:#8570d9;color:#fff;border-color:#b09af9}.social-compose .social-error{margin-top:12px}.social-app summary{cursor:pointer;color:var(--social-muted);font-size:12px}.social-detail{min-width:0;scroll-margin-top:20px;outline:none}@media (max-width:850px){.social-layout{grid-template-columns:240px minmax(0,1fr);gap:14px}.social-card{padding:16px}.social-profile{padding:0 16px 16px}.social-profile-banner{margin:0 -16px}.social-chat{padding:0}.social-welcome{padding:24px}.social-private{display:none}}@container hatch-social (max-width: 680px){.social-layout{grid-template-columns:1fr}.social-layout.has-detail>.social-detail{grid-row:1}.social-heading{align-items:flex-start;flex-direction:column}.social-connections{grid-template-columns:1fr}.social-welcome{min-height:280px}.social-chat{min-height:500px}.social-messages{height:300px}}