/* Main plaza first screen: look, name, Google. The player's avatar stands in the live plaza beside the panel. */
#start{--j-ink:#f3f7ff;--j-soft:#c3d2f0;--j-dim:#93a6cf;--j-line:#87a9ec;--j-panel:rgba(30,43,92,.9);--j-deep:#121c46;--j-lime:#baff38;--j-lime-ink:#163626;--j-gold:#ffe16b;--j-pink:#ff89c8;--j-err:#ffb3c8;
}
#start.screen{display:flex;justify-content:flex-start;align-items:center;padding:24px 24px 24px clamp(24px,4vw,64px);pointer-events:none;
 background:linear-gradient(90deg,rgba(14,20,52,.62) 0,rgba(14,20,52,.28) 34%,transparent 58%);}
#start .join{pointer-events:auto;position:relative;width:min(430px,100%);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
 padding:26px 26px 20px;border:3px solid var(--j-line);border-radius:26px;background:linear-gradient(160deg,rgba(49,70,126,.93),rgba(38,35,86,.93));
 box-shadow:0 10px 0 rgba(13,25,64,.75),inset 0 2px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--j-ink);
 -webkit-user-select:text;user-select:text;animation:join-in .5s cubic-bezier(.2,.9,.25,1.15) both}
#start .logo.big{margin:0 0 14px;font-size:20px}
#start .logo.big img{width:230px;max-width:100%;margin:0;display:block}
#start .join-title{font:26px/1.12 Launch,sans-serif;margin:0;color:var(--j-ink);text-shadow:3px 3px 0 #6c3269;letter-spacing:.3px}
#start .join-lead{margin:8px 0 18px;font:700 15px/1.45 Nunito,sans-serif;color:var(--j-soft)}

/* Steps: a real sequence, so numbered. A step turns lime with a tick once it is complete. */
#start .join-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#start .join-step{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:12px 0;position:relative}
#start .join-step:not(:last-child)::after{content:'';position:absolute;left:16px;top:50px;bottom:-6px;width:2px;border-radius:2px;background:rgba(135,169,236,.3)}
#start .join-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:15px/1 Launch,sans-serif;color:var(--j-soft);background:var(--j-deep);border:2px solid #56689e;transition:background .2s,color .2s,border-color .2s}
#start .join-step[data-done="true"] .join-num{background:var(--j-lime);border-color:var(--j-lime);color:transparent;position:relative}
#start .join-step[data-done="true"] .join-num::before{content:'';position:absolute;width:11px;height:6px;border:solid var(--j-lime-ink);border-width:0 0 3px 3px;transform:translateY(-2px) rotate(-45deg)}
#start .join-step-body{min-width:0;display:grid;gap:7px}
#start .join-step-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#start .join-h{display:block;margin:5px 0 0;font:900 16px/1.2 Nunito,sans-serif;color:var(--j-ink);text-shadow:none;letter-spacing:0}
#start .join-h2{margin:0 0 6px;font:24px/1.2 Launch,sans-serif;color:var(--j-gold);text-shadow:3px 3px 0 #5a3d00;overflow-wrap:anywhere}
#start .join-sub{margin:0;font:700 13px/1.5 Nunito,sans-serif;color:var(--j-soft)}
#start .join-hint{margin:0;font:700 12px/1.45 Nunito,sans-serif;color:var(--j-dim);min-height:1.45em}
#start .join-hint[data-state="error"],#start .join-err{color:var(--j-err)}
#start .join-err{margin:6px 0 0;font:800 13px/1.5 Nunito,sans-serif}
#start .join-err:empty{display:none}

#start input{width:100%;min-height:50px;padding:0 14px;font:800 18px/1 Nunito,sans-serif!important;letter-spacing:.2px;color:#fff;background:var(--j-deep);border:2px solid #7891c5;border-radius:12px;outline:none;transition:border-color .15s,box-shadow .15s}
#start input::placeholder{color:#7f92bd;font-weight:700}
#start input:focus{border-color:var(--j-gold);box-shadow:0 0 0 3px rgba(255,225,107,.25)}
#start input[aria-invalid="true"]{border-color:var(--j-err);box-shadow:0 0 0 3px rgba(255,137,200,.22)}

#start button{font-family:Nunito,sans-serif!important;cursor:pointer}
#start .join-look{flex:none;min-height:40px;padding:0 16px;font-size:13px;font-weight:1000;color:#2b2053;background:#c5a6ff;border:2px solid #202857;border-radius:12px;box-shadow:0 4px 0 #18214c}
#start .join-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:0 18px;font-size:16px;font-weight:1000;color:#1f2a44;background:#fff;border:2px solid #172650;border-radius:14px;box-shadow:0 5px 0 #0f1a3d,inset 0 -3px 0 #e3e9f6;transition:transform .08s,box-shadow .08s}
#start .join-google:hover{background:#f6f9ff}
#start .join-google:active{transform:translateY(3px);box-shadow:0 2px 0 #0f1a3d}
#start .join-google.is-signed{background:var(--j-lime);color:var(--j-lime-ink);box-shadow:0 5px 0 #386446,inset 0 -3px 0 #9ad62a}
#start .join-google.is-signed .g-mark{display:none}
#start .join-google[aria-busy="true"]{pointer-events:none;opacity:.85}
#start .join-google[aria-busy="true"]::after{content:'';width:16px;height:16px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:join-spin .7s linear infinite}
#start .g-mark{flex:none}
#start .join-primary,#start .join-secondary{width:100%;min-height:52px;font-size:15px;font-weight:1000;border-radius:14px;border:2px solid #172650}
#start .join-primary{background:var(--j-lime);color:var(--j-lime-ink);box-shadow:0 5px 0 #386446,inset 0 2px 0 #ffffff77}
#start .join-primary:disabled{opacity:.55;cursor:wait}
#start .join-secondary{background:#4967ab;color:#fff;box-shadow:0 5px 0 #122049}
#start .join-actions{display:grid;gap:12px;margin:16px 0 4px}
#start .join-link{display:inline-block;margin:10px 0 0;padding:6px 2px;min-height:0;background:none;border:0;box-shadow:none;font-size:14px;font-weight:800;color:#9fe9ff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;border-radius:6px}
#start .join-link:hover{color:#fff}
#start .join-guest-link{display:block;margin:4px auto 0;font-size:15px}
#start button:focus-visible,#start a:focus-visible{outline:3px solid var(--j-gold);outline-offset:3px}

#start .join-inapp{padding:12px 14px;border-radius:12px;background:rgba(255,225,107,.12);border:2px solid rgba(255,225,107,.5);display:grid;gap:10px}
#start .join-inapp p{margin:0;font:800 13px/1.5 Nunito,sans-serif;color:#fff3c2}
#start .join-inapp button{justify-self:start;min-height:38px;padding:0 14px;font-size:13px;font-weight:1000;background:var(--j-gold);color:#3a2c00;border:2px solid #172650;border-radius:10px;box-shadow:0 3px 0 #122049}

/* Guest trade-off: what still works and what needs Google. */
#start .join-compare{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
#start .join-compare li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font:800 14px/1.45 Nunito,sans-serif;color:var(--j-ink)}
#start .join-compare li::before{content:'';width:22px;height:22px;border-radius:50%;margin-top:-1px;background:var(--j-lime) no-repeat center/12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23163626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#start .join-compare li[data-ok="false"]{color:var(--j-dim)}
#start .join-compare li[data-ok="false"]::before{background-color:#3b3f73;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3 3 9' fill='none' stroke='%23ff9fca' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
#start .join-note{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:rgba(18,28,70,.6);font:700 13px/1.5 Nunito,sans-serif;color:var(--j-soft)}
#start .join-return .join-h2{font-size:26px}
#start .join-return[aria-busy="true"] .join-h2{color:var(--j-soft);text-shadow:none}

#start .join-studio{display:block;margin:18px 0 0;padding-top:14px;border-top:2px solid rgba(135,169,236,.22);font:800 13px/1.4 Nunito,sans-serif;color:var(--j-dim);text-decoration:none}
#start .join-studio:hover{color:#9fe9ff;text-decoration:underline;text-underline-offset:3px}
#start[data-mode="guest"] .join-lead,#start[data-mode="returning"] .join-lead,#start[data-mode="guest"] .join-title,#start[data-mode="returning"] .join-title{display:none}
#start:not(.is-ready) .join-num{transition:none}
#start .join-body[hidden]{display:none!important}

@keyframes join-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes join-spin{to{transform:rotate(360deg)}}

/* Phone and narrow windows: the avatar stands in the top of the screen, the panel becomes a bottom sheet. */
@media (max-width:819px),(max-aspect-ratio:9/10){
 #start.screen{align-items:flex-end;padding:0;background:linear-gradient(0deg,rgba(14,20,52,.55),transparent 55%)}
 #start .join{width:100%;max-width:560px;margin:0 auto;max-height:64dvh;border-radius:24px 24px 0 0;border-bottom:0;padding:18px 18px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 0 rgba(13,25,64,.35),inset 0 2px 0 rgba(255,255,255,.12);animation-name:join-up}
 #start .logo.big{margin:0 0 8px}
 #start .logo.big img{width:150px}
 #start .join-title{font-size:20px}
 #start .join-title br{display:none}
 #start .join-lead{margin:4px 0 6px;font-size:13px}
 #start .join-step{padding:8px 0;gap:10px;grid-template-columns:30px 1fr}
 #start .join-num{width:30px;height:30px;font-size:13px}
 #start .join-step:not(:last-child)::after{left:14px;top:42px}
 #start .join-h{margin-top:3px;font-size:15px}
 #start .join-h2{font-size:21px}
 #start .join-return .join-h2{font-size:22px}
 #start .join-studio{display:none}
 #start .join-compare{gap:7px;margin-top:10px}
 #start .join-compare li{font-size:13px}
}
@media (max-width:819px) and (max-height:700px),(max-aspect-ratio:9/10) and (max-height:700px){
 #start .join-lead,#start .join-hint:not([data-state="error"]){display:none}
 #start .join{max-height:70dvh}
}
@keyframes join-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#start .join{animation:none}#start .join-google[aria-busy="true"]::after{animation-duration:2s}}

/* In-game guest chip under the HUD name: the one place a guest signs in from. */
#hud .guest-chip{pointer-events:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;min-height:30px;padding:3px 4px 3px 10px;font:900 11px/1 Nunito,sans-serif!important;color:#c4ecff;background:#121c46;border:2px solid #6e95d0;border-radius:999px;box-shadow:0 3px 0 #0d1942;cursor:pointer}
#hud .guest-chip b{padding:5px 10px;border-radius:999px;background:#fff;color:#1f2a44;font-weight:1000}
#hud .guest-chip:hover b{background:#baff38;color:#163626}
#hud .guest-chip[hidden]{display:none}
html:not(.mhud-on) body.gb-guest #hud .destination{transform:translateY(40px)}
html.mhud-on #hud .guest-chip{margin-top:6px;order:9}