*{box-sizing:border-box}body{margin:0}a{text-decoration:none;color:inherit}button,textarea{font:inherit}main{padding-block:36px 16px}h1,h2,h3,p{margin:0}.lobby-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px}.lobby-intro h1{font-size:clamp(30px,3.5vw,46px)!important;font-weight:600;letter-spacing:-1.5px;margin:12px 0}.lobby-intro h1 span{color:#8cf5df}.lobby-intro p{font-size:14px;color:#a5b5cc}.model-signature{border-left:1px solid #34465d;padding-left:26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.model-signature>span{font:10px ui-monospace,monospace;letter-spacing:2px;color:#879fb8}.model-signature strong{font:22px ui-monospace,monospace;color:#dceefa}.model-signature a{font-size:12px;color:#a1d6dd}.library-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.library-bar h2{font-size:16px;font-weight:550;display:flex;align-items:center;gap:16px}.library-bar h2 span,.library-bar>span{font:10px ui-monospace,monospace;letter-spacing:1.3px;color:#839bb5}.experience-grid{display:grid;grid-template-columns:1.14fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}.experience{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid #2c4059;border-radius:10px;background:#101b2c;transition:transform .18s,border-color .18s,box-shadow .18s}.experience:hover{transform:translateY(-3px);border-color:#79d5d2;box-shadow:0 8px 30px #0005}.experience:focus-visible{outline:2px solid #8bf5e1;outline-offset:4px}.experience-fc{grid-row:1/3}.experience-art{position:relative;height:112px;overflow:hidden;background:#142b44;border-bottom:1px solid #2b4058}.experience-art img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .18s,transform .35s}.experience:hover img{opacity:1;transform:scale(1.035)}.experience-art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0d192bb3,transparent 60%)}.art-label{position:absolute;z-index:1;bottom:12px;left:18px;font:10px ui-monospace,monospace;letter-spacing:2px;color:#d2ebf7;text-shadow:0 1px 4px #000}.experience-fc .experience-art{height:auto;min-height:200px;flex:1;background:#1c3261}.experience-fc .experience-art img{object-fit:cover;image-rendering:pixelated}.experience-info{padding:14px 18px 12px}.experience-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#8da7c2;font:9px ui-monospace,monospace;letter-spacing:1px}.experience-meta>span:last-child{font:10px system-ui;letter-spacing:0;color:#a9c7d9}.experience h3{font-size:18px;font-weight:600;letter-spacing:-.2px;margin:9px 0 5px}.experience p{color:#a1b4cd;font-size:12px;line-height:1.6}.experience-enter{margin-top:10px;padding-top:8px;border-top:1px solid #263a52;font-size:11px;color:#9ae9e0;display:flex;justify-content:space-between;align-items:center}.experience-enter>span{font-size:18px}.experience-fc h3{font-size:28px;margin:12px 0 8px}.experience-fc .experience-info{padding:20px 22px}.experience-fc p{font-size:13px}.experience-fc .experience-enter{margin-top:22px;font-size:13px}.lobby-connect.page-title{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:30px;margin:24px 0 0;padding:20px 24px;border:1px solid #293e57;border-radius:8px;background:linear-gradient(110deg,#122138,#0b1625)}.connect-copy h2{font-size:20px;margin:8px 0;font-weight:550}.connect-copy p{font-size:12px;color:#a4bad0}.connect-copy>a{display:inline-block;font-size:12px;color:#8ee7dc;margin-top:12px}body[data-game="lobby"] .lobby-connect .agent-install{padding:12px 14px;justify-content:center;background:#0b192b;border-color:#304861}body[data-game="lobby"] .lobby-connect #agent-install-prompt{height:40px;font-size:11px}body[data-game="lobby"] .agent-install-top label{font-size:12px}.lobby-footer{display:flex;justify-content:space-between;margin-top:20px;font:10px ui-monospace,monospace;letter-spacing:1px}@media(min-width:1200px) and (max-height:820px){main{padding-top:24px}.lobby-intro{margin-bottom:20px}.lobby-intro h1{font-size:36px!important;margin:8px 0}.experience-art{height:84px}.experience-info{padding:10px 16px}.experience h3{margin-top:7px;font-size:17px}.experience p{font-size:11px}.experience-enter{margin-top:7px;padding-top:5px}.experience-fc h3{font-size:27px}.lobby-connect.page-title{padding:16px 20px;margin-top:18px}.lobby-footer{margin-top:14px}}@media(max-width:1000px){.experience-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.experience-fc{grid-row:auto;grid-column:1/-1;flex-direction:row}.experience-fc .experience-art{width:45%;min-height:230px}.experience-fc .experience-info{flex:1;align-self:center}.experience-art{height:150px}.lobby-connect.page-title{grid-template-columns:1fr 1fr}.model-signature{padding-left:18px}.model-signature strong{font-size:18px}}@media(max-width:650px){main{padding-top:24px}.lobby-intro{margin-bottom:26px}.model-signature{display:none}.lobby-intro h1{font-size:32px!important}.lobby-intro p{font-size:12px}.library-bar h2{font-size:15px}.library-bar h2 span{display:none}.experience-grid{gap:12px}.experience-fc{display:flex;flex-direction:column}.experience-fc .experience-art{width:100%;height:190px;min-height:0;flex:none}.experience-fc .experience-art img{object-position:50% 58%}.experience-fc .experience-info{align-self:stretch;padding:16px}.experience-fc h3{font-size:24px}.experience-fc .experience-enter{margin-top:12px}.experience-art{height:105px}.experience-info{padding:12px}.experience-meta>span:last-child{display:none}.experience-meta{font-size:8px;letter-spacing:.6px}.experience h3{font-size:16px;line-height:1.5}.experience p{font-size:11px;min-height:36px}.lobby-connect.page-title{display:flex;flex-direction:column;gap:16px;padding:18px;margin-top:20px}.connect-copy h2{font-size:18px}.lobby-footer{font-size:9px;letter-spacing:0;line-height:1.7}.lobby-footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){.experience,.experience-art img{transition:none}.experience:hover,.experience:hover img{transform:none}}
/* Brand is the dominant title; motion introduces the working surface once. */
body[data-game="lobby"] .lobby-intro h1{font-family:"Avenir Next","PingFang SC",sans-serif;font-size:clamp(42px,4.6vw,64px)!important;line-height:1.05;letter-spacing:-2.5px}
@keyframes lobby-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){.lobby-intro{animation:lobby-arrive .45s both}.lobby-library{animation:lobby-arrive .5s .08s both}.lobby-connect{animation:lobby-arrive .5s .16s both}}
@media(max-width:650px){body[data-game="lobby"] .lobby-intro h1{font-size:46px!important}}
/* Keep selection dense enough to see every game before entering one. */
body[data-game="lobby"] main{padding-top:24px}
.lobby-intro{margin-bottom:20px}
body[data-game="lobby"] .lobby-intro h1{font-size:52px!important;margin:8px 0}
.experience-art img{position:absolute;inset:0;opacity:1}
.experience-art::after{background:linear-gradient(0deg,#0d192b99,transparent 40%)}
.experience-flight img,.experience-mario img{object-position:50% 85%}
.experience-fc .experience-art{min-height:0}
body[data-game="lobby"] .lobby-connect{margin-top:20px}
@media(min-width:1001px){.experience-grid{height:430px}.experience-art{height:85px;flex-shrink:0}.experience-fc .experience-art{flex:1;height:auto}.experience-info{padding:12px 16px}.experience h3{font-size:17px;margin:6px 0 4px}.experience-enter{margin-top:7px;padding-top:5px}.experience-fc h3{font-size:26px}.experience-fc .experience-info{padding:18px 20px}.experience-fc .experience-enter{margin-top:14px}}
@media(min-width:1001px) and (max-height:820px){.experience-grid{height:390px}.experience-art{height:66px}.experience-info{padding:9px 15px}.experience-fc .experience-art{height:auto}.lobby-connect.page-title{padding:14px 20px}.connect-copy h2{font-size:18px}body[data-game="lobby"] .lobby-intro h1{font-size:46px!important}.lobby-intro{margin-bottom:16px}}
@media(max-width:650px){body[data-game="lobby"] .lobby-intro h1{font-size:46px!important}.experience-fc .experience-art{min-height:190px}.experience-fc .experience-info{padding:16px}}
.experience-fc .experience-art img{object-fit:contain}
.experience-fc .experience-art{background:#101b30}
body[data-game="lobby"] .lobby-footer{margin-top:14px}

/* A horizontal access console balances the brand and keeps the hall above the fold. */
body[data-game="lobby"] .lobby-intro{display:grid;grid-template-columns:minmax(280px,1fr) minmax(540px,740px);gap:32px;align-items:center;margin-bottom:28px}
body[data-game="lobby"] .lobby-intro .agent-install{display:grid;grid-template-columns:158px minmax(0,1fr);grid-template-rows:auto auto auto;gap:7px 18px;padding:14px 18px;min-height:0;border:1px solid #2b4257;border-radius:6px;background:#0e1b2b}
.agent-engine{grid-column:1;grid-row:1/4;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;border-right:1px solid #2b4156;padding-right:18px;margin:0}
.agent-engine>span{font:10px ui-monospace,monospace;letter-spacing:1.4px;color:#91aec7}
.agent-engine>strong{font:17px ui-monospace,monospace;letter-spacing:-.5px;color:#d9fff6;white-space:nowrap}
body[data-game="lobby"] .lobby-intro .agent-install-top{grid-column:2;margin:0;gap:12px}
body[data-game="lobby"] .lobby-intro .agent-install-top label{font-size:12px;color:#e4f6fc}
body[data-game="lobby"] .lobby-intro #copy-agent-prompt{font-size:11px;padding:5px 9px}
body[data-game="lobby"] .lobby-intro #agent-install-prompt{grid-column:2;height:36px;font-size:11px;line-height:1.6;color:#a9c4d8}
.agent-links{grid-column:2;display:flex;align-items:center;gap:22px;margin:0}
body[data-game="lobby"] .lobby-intro .agent-links a{font-size:11px;line-height:1.5;margin:0;color:#9fdcdb;text-decoration:none}
body[data-game="lobby"] .lobby-intro .agent-links a:hover{color:#defff7}
@media(max-width:1100px){body[data-game="lobby"] .lobby-intro{grid-template-columns:1fr;gap:20px}body[data-game="lobby"] .lobby-intro .agent-install{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:560px){
 body[data-game="lobby"] .lobby-intro .agent-install{grid-template-columns:minmax(0,1fr);padding:14px;gap:10px}
 .agent-engine{grid-column:1;grid-row:auto;flex-direction:row;justify-content:space-between;align-items:center;border-right:0;border-bottom:1px solid #2b4156;padding:0 0 10px;gap:10px}
 .agent-engine>strong{font-size:16px}
 body[data-game="lobby"] .lobby-intro .agent-install-top,body[data-game="lobby"] .lobby-intro #agent-install-prompt,.agent-links{grid-column:1}
 body[data-game="lobby"] .lobby-intro #agent-install-prompt{height:54px}
 .agent-links{justify-content:space-between;gap:12px}
}


/* Steam-inspired featured shelf; the page grows naturally with the catalog. */
body[data-game="lobby"]{height:auto;min-height:100svh;overflow-y:auto}
body[data-game="lobby"] main{height:auto;overflow:visible;padding-bottom:24px}
.experience-grid{height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:16px;align-items:stretch}
.featured-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr);grid-template-rows:repeat(2,184px)}
.experience{border-radius:6px;background:linear-gradient(115deg,#16273a,#101c2c);border-color:#293f54;box-shadow:0 4px 16px #0002}
.experience:hover{transform:translateY(-2px);border-color:#679aab;box-shadow:0 8px 24px #0005}
.experience .experience-art{width:100%;height:150px;min-height:0;aspect-ratio:auto;flex:none;background:#101b30}
.experience .experience-info{padding:15px 18px;flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column}
.experience h3,.experience-fc h3{font-size:19px;margin:9px 0 6px}
.experience p,.experience-fc p{font-size:12px;min-height:0}
.experience .experience-enter{font-size:12px;margin-top:auto;padding-top:10px;border-top:0}
.experience .experience-meta{font-size:9px;letter-spacing:.7px}
.featured-grid .experience-fc{grid-column:1;grid-row:1/3;flex-direction:column}
.featured-grid .experience-fc .experience-art{height:222px}
.featured-grid .experience-fc .experience-art img{object-fit:cover;object-position:center 28%;image-rendering:pixelated}
.featured-grid .experience-fc .experience-info{padding:17px 22px}
.featured-grid .experience-fc h3{font-size:25px;letter-spacing:-.5px}
.featured-grid .experience:not(.experience-fc){grid-column:2;display:grid;grid-template-columns:44% minmax(0,1fr)}
.featured-grid .experience:not(.experience-fc) .experience-art{height:100%;border-bottom:0;border-right:1px solid #293f54}
.featured-grid .experience:not(.experience-fc) .experience-info{padding:20px}
.experience-battle-city .experience-art img{object-fit:cover;object-position:center 60%;image-rendering:pixelated}
.catalog-grid .experience-info{min-height:136px}
.library-subheading{display:flex;align-items:center;gap:16px;margin:28px 0 14px;font-size:14px;font-weight:550}
.library-subheading::after{content:'';height:1px;background:#263a4f;flex:1}
.library-subheading span{font:9px ui-monospace,monospace;letter-spacing:1.6px;color:#809bb5}
@media(max-width:1000px){
 .featured-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
 .featured-grid .experience:not(.experience-fc){grid-template-columns:38% minmax(0,1fr)}
 .featured-grid .experience:not(.experience-fc) .experience-info{padding:14px}
 .experience .experience-meta>span:last-child{display:none}
 .experience .experience-info{padding:14px}
 .experience h3{font-size:17px}
 .featured-grid .experience-fc h3{font-size:22px}
 .catalog-grid .experience-art{height:125px}
}
@media(max-width:650px){
 .featured-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:12px}
 .featured-grid .experience-fc{grid-column:1;grid-row:auto}
 .featured-grid .experience-fc .experience-art{height:190px}
 .featured-grid .experience-fc .experience-info{padding:16px;min-height:146px}
 .featured-grid .experience:not(.experience-fc){grid-column:1;grid-template-columns:40% minmax(0,1fr);min-height:162px}
 .catalog-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .catalog-grid .experience{display:grid;grid-template-columns:40% minmax(0,1fr);min-height:154px}
 .catalog-grid .experience .experience-art{height:100%;border-bottom:0;border-right:1px solid #293f54}
 .catalog-grid .experience-info{min-height:154px}
 .experience .experience-meta{font-size:8px;letter-spacing:.2px}
 .experience h3{font-size:17px}
 .experience p{font-size:11px}
 .art-label{left:12px;font-size:8px;letter-spacing:1px}
}

.experience-super-contra .experience-art img{image-rendering:pixelated;object-fit:cover;object-position:center 62%}