.screen{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));gap:22px}.brand{font-size:36px;font-weight:900;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.muted{color:var(--muted)}.error{color:var(--danger);font-weight:700;margin:0}.join-top{padding-top:24px}.join-top p{margin:4px 0 0}.join-form{display:flex;flex-direction:column;gap:18px}.join-form label{display:flex;flex-direction:column;gap:8px;font-weight:700;color:var(--muted)}.input{width:100%;padding:16px 18px;border-radius:16px;border:2px solid var(--bg-3);background:var(--bg-2);color:var(--fg);font-size:20px;font-weight:700;outline:none}.input:focus{border-color:var(--accent)}.code-input{font-size:34px;letter-spacing:10px;text-align:center;text-transform:uppercase}.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.swatch{aspect-ratio:1;border-radius:50%;border:4px solid transparent;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}.swatch.selected{border-color:#fff;transform:scale(1.1)}.waiting,.results{align-items:center;justify-content:center;text-align:center}.me-card{display:flex;flex-direction:column;align-items:center;gap:6px}.me-avatar{width:110px;height:110px;border-radius:50%;background:var(--me, var(--accent));color:#06121c;display:grid;place-content:center;font-size:40px;font-weight:900;box-shadow:0 0 0 8px color-mix(in srgb,var(--me, var(--accent)) 25%,transparent)}.me-name{font-size:28px;font-weight:900}.waiting-text{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:18px}.spinner{width:28px;height:28px;border-radius:50%;border:4px solid var(--bg-3);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.waiting-players{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.waiting-players li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--bg-2);font-weight:700}.waiting-players li.offline{opacity:.4}.mini-avatar{width:14px;height:14px;border-radius:50%}.result-main{display:flex;flex-direction:column;gap:8px}.result-rank{font-size:34px;font-weight:900}.result-detail{font-size:20px}.rotate-hint{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;text-align:center;background:var(--bg)}.rotate-phone{width:66px;height:116px;border:5px solid var(--fg);border-radius:14px;box-shadow:inset 0 0 0 3px var(--bg-3);animation:rotate-phone 2.2s ease-in-out infinite}.rotate-title{font-size:26px;font-weight:900}.rotate-hint p{margin:0;max-width:320px;font-weight:700}@keyframes rotate-phone{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}@media(orientation:landscape)and (max-height:500px){.screen{gap:14px;padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}.brand{font-size:26px}.join-top{padding-top:0}.join-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-content:start}.join-form>label:first-of-type{grid-column:1}.join-form>label:nth-of-type(2){grid-column:2}.colors{grid-column:1 / -1;grid-template-columns:repeat(10,1fr)}.error,.join-form .btn{grid-column:1 / -1}.join-form .btn.big{padding:14px 24px;font-size:20px}.code-input{font-size:26px;letter-spacing:6px}.input{padding:10px 14px;font-size:18px}.me-avatar{width:64px;height:64px;font-size:24px}.me-name{font-size:20px}.result-rank{font-size:26px}.waiting-players{max-height:30vh;overflow-y:auto}}