#joinScreen .joinPanel{width:min(920px,calc(100vw - 28px));padding:22px 24px}.joinLayout{display:grid;grid-template-columns:minmax(320px,1.08fr) minmax(300px,.92fr);gap:24px;align-items:stretch}.characterChooser{display:grid;grid-template-rows:minmax(390px,1fr) 180px;min-height:590px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#284d5a 0%,#18333e 58%,#10242d 100%);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 80px rgba(0,0,0,.2)}.characterViewport{position:relative;min-height:0;overflow:hidden}.characterViewport:after{content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;background:linear-gradient(transparent,rgba(7,18,24,.72))}#characterPreview{position:absolute;inset:0}#characterPreview canvas,#tokenPreview canvas{width:100%;height:100%;display:block}.characterTop{position:absolute;z-index:3;left:18px;right:18px;top:17px;display:flex;justify-content:space-between;align-items:center;text-align:left}.characterTop span,.tokenPickerTitle span{font-size:10px;letter-spacing:1.2px;font-weight:1000;color:#a9c3cf}.characterTop b,.tokenPickerTitle b{font-size:11px;color:#d7e8ef}.characterBottom{position:absolute;z-index:4;left:16px;right:16px;bottom:16px;display:grid;grid-template-columns:54px 1fr 54px;gap:10px;align-items:center}.characterArrow{height:54px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(7,20,27,.66);color:#fff;font-size:27px;font-weight:1000}.characterArrow:hover,.tokenArrow:hover{background:rgba(50,103,125,.75)}#characterName{font-size:30px;font-weight:1000;letter-spacing:-1px}.tokenPicker{position:relative;z-index:5;border-top:1px solid rgba(255,255,255,.10);background:#0c2029;padding:9px 12px 10px}.tokenPickerTitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.tokenPickerBody{height:122px;display:grid;grid-template-columns:38px 1fr 38px;gap:8px;align-items:center}.tokenArrow{height:42px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(24,55,67,.8);color:white;font-size:22px;line-height:1}.tokenPicker>strong{display:block;text-align:center;font-size:11px;letter-spacing:.7px;margin-top:2px;color:#eef7fb}#tokenPreview{height:122px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:#102a34}.joinForm{text-align:center;display:flex;flex-direction:column;justify-content:center}.joinForm .sub{margin-bottom:18px}.joinForm .shareBox{margin-top:14px}.characterSelectTitle{font-size:11px;font-weight:1000;letter-spacing:1px;color:#ffce4c;margin-bottom:5px}@media(max-width:760px){#joinScreen{overflow:auto;align-items:flex-start;padding:14px 0}.joinLayout{grid-template-columns:1fr}.characterChooser{grid-template-rows:minmax(330px,1fr) 170px;min-height:500px}.joinForm{padding-bottom:4px}#characterName{font-size:26px}.joinPanel{margin:auto}.tokenPickerBody,#tokenPreview{height:112px}}@media(max-width:520px){.characterChooser{grid-template-rows:minmax(285px,1fr) 160px;min-height:445px}.joinLayout{gap:14px}#joinScreen .joinPanel{padding:14px}.tokenPickerBody,#tokenPreview{height:102px}}