.join-page{max-width:1270px;margin:25px auto 45px;padding:0 22px;display:grid;grid-template-columns:1fr minmax(340px,490px);gap:32px;align-items:start}
.join-hero{padding-top:24px}.join-overline,.section-label{font-size:12px;color:#80eedc;font-weight:850;letter-spacing:.17em}
.join-hero h1{font-size:clamp(42px,5vw,70px);line-height:1.05;margin:22px 0;color:#fff}.join-hero h1 em{font-style:normal;color:#ffb948}.join-hero p{font-size:19px;color:#e3d5ed;line-height:1.65;max-width:550px}.join-hero img{display:block;width:100%;height:auto;margin-top:24px;border-radius:18px;box-shadow:0 14px 42px #0005}
.join-card{background:#fcf7ed;color:#20132a;padding:clamp(22px,3vw,36px);border-radius:25px;border-top:6px solid #ff9e3b;box-shadow:0 16px 55px #0008}
.join-card h2{font-size:30px;line-height:1.15;margin:17px 0 25px}.section-label{color:#783ea2}
.join-card label{font-weight:800;display:block;font-size:14px;margin:20px 0 8px}
.join-card input,.join-card textarea{font:inherit;display:block;width:100%;background:#fff;border:2px solid #d2bce0;border-radius:12px;padding:14px 15px;color:#21142a}
#gameCode{text-transform:uppercase;letter-spacing:.12em;font-size:23px;font-weight:850}
.join-card :focus-visible{outline:3px solid #ed7a2c;outline-offset:3px}.helper{font-size:12px;line-height:1.6;color:#756b7d}.bottom{border-top:1px solid #ddd1e5;padding-top:18px;margin-top:30px}
.action-button{border:0;border-radius:13px;background:linear-gradient(110deg,#fa8c2b,#c34e26);color:white;padding:17px 20px;font-size:16px;font-weight:850;width:100%;margin-top:19px;cursor:pointer}.action-button:hover{filter:brightness(1.07)}.action-button:disabled{opacity:.65;cursor:progress}
.text-button{border:0;background:none;color:#5b328e;cursor:pointer;margin-top:18px;font-size:14px;text-decoration:underline}.game-info{background:#f0e7f4;border-radius:12px;padding:13px;font-size:14px;line-height:1.6}
.success-icon{font-size:40px}.approval{background:#fff1d1;border-left:4px solid #ff9d2d;padding:15px;border-radius:8px}.message{margin-top:18px;background:#ffe5e4;border-left:4px solid #c53232;padding:12px;border-radius:6px;line-height:1.5}
[hidden]{display:none!important}footer a{color:#ffca80}
@media(max-width:840px){.join-page{grid-template-columns:1fr;max-width:660px;gap:12px;padding:0 15px}.join-hero{padding-top:0}.join-hero h1{font-size:38px}.join-hero img{max-height:260px;object-fit:cover}.join-card{padding:24px}}

.help-join-link{text-align:center;padding:8px 15px}.help-join-link a{color:#ffcf7a;font-size:13px;font-weight:800}