:root{--ui:rgba(25,72,46,.88);--ui-strong:rgba(25,72,46,.96);--accent:#ffdb59}
#join{background:#d8f5bd;background-image:radial-gradient(ellipse at 10% 10%,#ecffdd 0,transparent 55%),radial-gradient(ellipse at 95% 100%,#a9dc8a 0,transparent 60%);overflow-y:auto}
#join .card{border:3px solid #28563e;border-radius:30px;box-shadow:0 9px 0 #83b56d,0 18px 45px #39672820;max-width:420px;padding:26px 28px;color:#244932}
#join h1{letter-spacing:1px;line-height:1.25;font-size:36px;color:#245d3a}
#join p{color:#47634f;margin:8px 0 18px;font-size:16px}
#name{border:2px solid #b4cfaa;background:#f6fff0;color:#244932}
#name:focus{border-color:#31814a;box-shadow:0 0 0 3px #d8f5bd}
#shirts{gap:10px}#shirts button{min-height:40px;border-radius:12px}#shirts button.on{border-color:#205c3b;outline:3px solid #d7edce}
#play{background:#ffdb59;color:#244932;box-shadow:0 6px 0 #d3ac2f;border:2px solid #dfb832;border-radius:16px;font-size:23px;min-height:58px}
#play:disabled{opacity:.7;cursor:wait}#play:active{box-shadow:0 2px 0 #d3ac2f}
#join .small-note{font-size:14px;line-height:1.5;margin:12px 0 0;color:#47634f}
#joinStatus{font-size:14px}#joinStatus:empty{display:none}
button:focus-visible{outline:3px solid #164d31;outline-offset:4px}
.mode{width:70px;height:70px}.mode small{font-size:12px}
#palette button{width:44px;height:44px}#panel .card{border:3px solid #28563e;border-radius:24px}#panel .row button.primary{background:#ffdb59;color:#244932}
#inviteBtn{background:#e4f6d9!important;color:#244932;margin-bottom:12px;width:100%;padding:12px;border-radius:12px;font-weight:700}
#worldHint{font-size:14px;color:#47634f;line-height:1.5;margin:0 0 12px}
#installBtn{display:none;margin:10px auto 0;background:transparent;color:#245d3a;text-decoration:underline;font-size:14px;padding:8px}
@media(max-height:650px){#join{align-items:flex-start}#join .card{margin:auto;padding:18px 24px}#join h1{font-size:28px}#shirts button{max-height:38px;min-height:32px}#play{margin-top:14px}}