body.online-entry #app{max-width:1180px;margin:auto;padding:40px 28px;overflow:visible;height:auto}
body.online-entry{overflow:auto;background:#101920}
body.online-entry .edition{display:none}
body.premenu>header{display:none}
body.premenu{height:auto;min-height:100dvh;display:block;overflow-y:auto}
body.premenu #app{padding-top:26px;min-height:100dvh;height:auto;flex:none;display:flex;flex-direction:column;box-sizing:border-box}
body.premenu .entry-shell{min-height:auto;flex:1 0 auto}
.entry-shell>div{min-width:0}
.entry-logo{display:block;width:min(100%,420px);height:auto;aspect-ratio:3/2;object-fit:contain;margin:18px 0 0}
.entry-copy .eyebrow{font-size:14px;letter-spacing:.1em}
.entry-footer{position:static;flex:none;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:30px;padding:20px 0 10px;border-top:1px solid #3b4e59;color:#aabdc8;font-size:14px}
.entry-footer nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.entry-footer a{color:#e9aa7b;text-decoration:none}
.entry-footer a:hover,.entry-footer a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.resume-time{display:block;color:#efb789;font-size:14px;margin-top:6px;font-variant-numeric:tabular-nums}
@media(max-width:850px){.entry-logo{width:min(80%,300px);margin:16px auto 0}.entry-copy{text-align:center}.entry-copy>p{margin-left:auto!important;margin-right:auto!important}.entry-facts{justify-content:center}.entry-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
.entry-shell{min-height:calc(100dvh - 180px);display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}
.entry-copy h1{font-size:clamp(42px,6vw,80px);line-height:1.05;margin:16px 0 24px;letter-spacing:-.035em}
.entry-copy h1 span{color:#eba16d}
.entry-copy>p{max-width:450px;font-size:18px;line-height:1.7;color:#b8c5cc}
.entry-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.entry-facts span{border:1px solid #41515a;padding:8px 12px;border-radius:20px;font-size:14px}
.entry-panel,.room-panel,.room-chat,.resume-card{background:#19272f;border:1px solid #3b4e59;border-radius:20px;padding:26px}
.entry-panel form,.room-profile,.own-profile{display:grid;gap:12px}.entry-panel input,.room-panel input,.room-panel textarea,.room-chat input{width:100%;box-sizing:border-box;background:#101b23;border:1px solid #536772;color:#f1eee5;border-radius:10px;padding:12px 14px;font:inherit;font-size:16px}
.entry-panel input:focus,.room-panel input:focus,.room-panel textarea:focus,.room-chat input:focus{outline:2px solid #e9a06a;outline-offset:2px}
.entry-panel label,.room-panel label{font-size:14px;color:#c7d3d8;display:grid;gap:8px}.entry-panel .primary{margin-top:12px}
.mode-switch{display:flex;padding:4px;border-radius:12px;background:#0e1920;gap:4px;margin-bottom:25px}.mode-switch button{flex:1;padding:12px 8px;border:0;border-radius:9px;background:transparent;color:#b8c5cc;font:inherit;font-size:16px;cursor:pointer}.mode-switch button.active{background:#364a56;color:#fff}
.room-code-input{text-transform:uppercase;letter-spacing:.24em;font-weight:700}.account-note{font-size:13px;color:#aabdc8;line-height:1.5;margin:20px 0 0}.account-note a{color:#e9aa7b}
.resume-card{margin-top:14px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.resume-card strong,.resume-card small{display:block}.resume-card small{color:#b8c5cc;margin-top:5px}
.room-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}.room-main{display:grid;gap:20px}.room-profile{grid-template-columns:1fr auto}.room-profile label{grid-column:1/-1}.room-profile textarea{min-height:65px;resize:vertical}.room-panel h1{font-size:32px;margin:10px 0}.room-panel h2{font-size:23px;margin:0 0 16px}.room-description{color:#b8c5cc;white-space:pre-wrap;overflow-wrap:anywhere}
.room-invite{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:22px 0}.room-code{letter-spacing:.22em;font-size:25px!important;font-weight:700}.room-invite small{color:#b8c5cc}.room-members{display:grid;gap:10px;margin:16px 0}.room-member{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:#111d25;min-width:0}.member-edit-area{display:flex;gap:12px;align-items:center;flex:1;min-width:0;border-radius:8px}.room-member.editable .member-edit-area{cursor:pointer}.room-member.editable .member-edit-area:hover{background:#1a2b35}.room-member .member-face{width:46px;height:46px;flex:0 0 46px}.member-face svg{width:100%;height:100%}.member-info{flex:1;min-width:0}.member-name-line{display:flex;align-items:center;gap:7px;min-height:25px}.member-info strong{display:block;overflow-wrap:anywhere}.member-info small{display:block;color:#aebfc8;font-size:13px;margin-top:3px}.bot-label{display:inline-flex;align-items:center;border:1px solid #8fc4d7;border-radius:5px;padding:1px 5px;color:#bce9f6;background:#173440;font-size:10px;font-weight:800;letter-spacing:.08em}.member-name-button{padding:0;border:0;background:transparent;color:#f1eee5;font:inherit;font-weight:700;text-align:left}.member-name-button:hover{text-decoration:underline}.bot-name-input{margin:0!important;padding:4px 7px!important;min-height:0;font-size:14px!important}.room-member .quiet{padding:7px 10px;min-height:36px}.room-member.empty{min-height:56px;border:1px dashed #435865;color:#9bb0bc;background:transparent}.room-member.mine{border:1px solid #d29a69}.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.profile-heading strong{display:flex;align-items:center;gap:7px}
.room-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.room-map{padding:0;background:#111d25;color:#fff;border:2px solid transparent;border-radius:14px;overflow:hidden;text-align:left;cursor:pointer}.room-map.selected{border-color:#eea975}.room-map img{width:100%;height:155px;object-fit:cover;display:block}.room-map span{display:block;padding:12px 14px}.room-map small{display:block;color:#c0cbd1;margin-top:5px}.room-map:disabled{cursor:default;opacity:.85}.own-profile{margin-top:20px;border-top:1px solid #3e515e;padding-top:18px}.own-profile .aliens{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.own-profile .alien-choice{min-width:0;padding:7px 2px}.own-profile .portrait{height:62px;width:100%;margin:0}.own-profile .alien-choice span{font-size:12px}.room-start{display:grid;gap:10px;margin-top:20px}.room-start .hint{margin:0}
.room-chat{position:sticky;top:20px;display:flex;flex-direction:column;max-height:650px}.room-chat h2{margin:0 0 15px;font-size:22px}.chat-messages{height:350px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}.chat-message{font-size:15px;line-height:1.5;overflow-wrap:anywhere}.chat-message strong{display:block;color:#efb789;margin-bottom:3px}.chat-message p{margin:0;white-space:pre-wrap}.chat-form{display:flex;gap:8px;margin-top:18px}.chat-form input{min-width:0}.chat-form button{padding:10px}.chat-empty{color:#aebbc4;font-size:14px}.chat-cooldown{font-size:12px;color:#9baeb8;margin-top:8px}
#online-notice{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:1000;background:#573326;color:#fff;padding:12px 20px;border-radius:12px;max-width:90vw;box-shadow:0 8px 32px #0006;font-size:15px}#online-notice:empty{display:none}
.online-status{color:#b9d2df;font-size:14px;margin:0 0 12px}.online-game-info{position:fixed;left:18px;bottom:14px;z-index:32;display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid #405562;border-radius:12px;background:#101b23ed;font-size:13px}.game-chat-toggle{padding:8px 12px!important}.online-game-chat{position:fixed;right:16px;top:94px;z-index:70;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 130px);box-shadow:0 20px 60px #0009;box-sizing:border-box}.online-game-chat .chat-messages{height:280px}.leave-icon{border-color:#b76c68!important}
@media(max-width:850px){body.online-entry #app{padding:22px 16px}.entry-shell{gap:26px;grid-template-columns:1fr;min-height:auto;max-width:600px;margin:auto}.entry-copy h1{font-size:42px}.entry-copy>p{font-size:16px;margin:12px 0}.entry-facts{margin-top:12px}.entry-panel,.room-panel,.room-chat{padding:20px}.room-layout{grid-template-columns:1fr}.room-chat{position:static}.chat-messages{height:230px}.room-map img{height:110px}.own-profile .aliens{grid-template-columns:repeat(4,1fr)}.own-profile .portrait{height:76px}.online-game-chat{position:fixed}.online-game-info{bottom:8px;left:8px;max-width:calc(100vw - 16px);font-size:12px}.online-game-info>span{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-profile{grid-template-columns:1fr}.room-profile button{width:100%}}
.online-game-info{top:82px;bottom:auto;left:12px}
.round-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:24px;background:radial-gradient(circle at center,#283351 0,#0a121f 72%);color:#f5f0e7;animation:intro-arrive .35s ease-out}
.round-intro-content{width:min(760px,100%);text-align:center}.round-intro .eyebrow{color:#e9bb83}.round-intro h2{font-size:clamp(38px,7vw,70px);margin:12px 0 20px}.round-intro-map{width:min(450px,80vw);height:140px;object-fit:cover;border-radius:18px;border:2px solid #b8b4dd;box-shadow:0 20px 45px #0009}.round-intro-players{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px auto}.round-intro-player{display:flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid #66778d;border-radius:14px;background:#1a2a3cbf;font-size:15px}.round-intro-player .member-face{width:44px;height:44px;flex:none}.round-intro-player strong{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.round-intro-player .bot-label{margin-left:3px}.round-intro-progress{height:4px;width:min(400px,80vw);margin:14px auto;background:#384959;border-radius:9px;overflow:hidden}.round-intro-progress:after{content:'';display:block;height:100%;background:#f6c388;animation:intro-progress 2s ease-out forwards}.round-intro.leaving{animation:intro-leave .4s ease-in forwards;pointer-events:none}@keyframes intro-arrive{from{opacity:0;transform:scale(1.03)}}@keyframes intro-leave{to{opacity:0;transform:scale(.98)}}@keyframes intro-progress{from{width:0}to{width:100%}}
@media(max-width:850px){.online-game-info{top:auto;bottom:calc(var(--hud-space,220px) + 18px);left:auto;right:12px;padding:0;border-radius:50%}.online-game-info>span{display:none}.online-game-info .game-chat-toggle{border-radius:50%;width:54px;height:54px;font-size:12px;padding:4px!important}}

.entry-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}.entry-tools button{font-size:14px;padding:8px 12px}

/* Both entry tabs share the same field slots and dimensions. */
.entry-panel{min-width:0}
.entry-panel form{grid-template-columns:minmax(0,1fr)}
.entry-panel form>label{line-height:1.5}
.entry-panel form>input{height:3rem;min-width:0;line-height:1.5}
.entry-panel form>.primary{min-height:3rem;line-height:1.5}

/* The mobile menu grows with its content, including return cards and the footer. */
@media(max-width:850px){
 body.premenu #app{display:block;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 body.premenu .entry-shell{width:100%;min-height:auto;margin:0 auto}
 body.premenu .entry-footer{width:min(600px,100%);margin:32px auto 0;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:20px 0 0}
 body.premenu .entry-footer nav{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px;width:100%}
 body.premenu .entry-footer a{display:block;max-width:100%;padding:8px 12px;min-height:40px;overflow-wrap:anywhere}
}

.room-host-actions{display:flex;flex-wrap:wrap;gap:10px}.room-host-actions .quiet{min-height:42px}

/* Let the lobby page grow instead of clipping the main element's bottom padding. */
body.online-entry:not(.premenu){height:auto;min-height:100dvh;display:block}
body.online-entry:not(.premenu) #app{flex:none;box-sizing:border-box}
.chat-backdrop,.lobby-chat-toggle{display:none}
.room-chat h2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.room-layout .chat-close{display:none}
.online-game-chat:not(.chat-open){display:none}
@keyframes chat-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:850px){
 .room-chat,.online-game-chat{position:fixed;inset:0 0 0 auto;z-index:90;width:min(360px,92vw);height:100dvh;max-height:none;margin:0;border-radius:18px 0 0 18px;box-sizing:border-box;padding:calc(20px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 20px;box-shadow:-16px 0 50px #0008;touch-action:pan-y;transition:transform .2s ease-out}
 .room-chat:not(.chat-open){display:none}
 .room-chat.chat-entering{animation:chat-enter .22s ease-out}
 .room-chat.chat-dragging{transition:none;animation:none}
 .room-chat .chat-messages{flex:1;min-height:0;height:auto;overscroll-behavior:contain}
 .room-chat .chat-form,.room-chat h2,.room-chat .chat-cooldown{flex:none}
 .room-layout .chat-close{display:block}
 .chat-backdrop.is-open{display:block;position:fixed;inset:0;z-index:80;padding:0;border:0;border-radius:0;background:#06101c8c;touch-action:none}
 .lobby-chat-toggle{display:block;position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:32;box-shadow:0 6px 24px #0006}
}
@media(prefers-reduced-motion:reduce){.room-chat.chat-entering{animation:none}.room-chat{transition:none}}

/* Full-height in-game drawer on desktop as well as mobile. */
.room-profile>button[type="submit"]{justify-self:start;width:auto}
.online-game-chat{inset:0 0 0 auto;z-index:90;width:min(440px,92vw);height:100dvh;max-height:none;margin:0;border-radius:18px 0 0 18px;padding:calc(22px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 22px;box-shadow:-16px 0 50px #0008;transition:transform .2s ease-out}
.online-game-chat .chat-messages{flex:1;min-height:0;height:auto;overscroll-behavior:contain}
.online-game-chat .chat-form,.online-game-chat h2,.online-game-chat .chat-cooldown{flex:none}
.online-game-chat.chat-entering{animation:chat-enter .22s ease-out}
#app>.online-game-chat~.chat-backdrop.is-open{display:block;position:fixed;inset:0;z-index:80;padding:0;border:0;border-radius:0;background:#06101c8c;touch-action:none}
.game-chat-toggle{position:fixed;right:340px;bottom:16px;z-index:82;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:#19272ff5;box-shadow:0 6px 24px #0006}
.game-chat-toggle[aria-expanded="true"]{right:calc(min(440px,92vw) + 16px)}
.game-chat-toggle svg{flex:none}
@media(max-width:850px){.online-game-info{display:none}.game-chat-toggle,.game-chat-toggle[aria-expanded="true"]{right:12px;bottom:calc(var(--hud-space,220px) + 18px);width:54px;height:54px;border-radius:50%;font-size:11px;padding:5px!important;flex-direction:column;gap:1px}}
@media(prefers-reduced-motion:reduce){.online-game-chat.chat-entering{animation:none}.online-game-chat{transition:none}}

.room-code-actions{display:flex;align-items:center;gap:8px;min-width:0}
.room-settings-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.room-code-eye{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;flex:none}
.room-code-eye svg,.room-settings-trigger svg{flex:none}
#room-settings{max-width:460px}
#room-settings h2{font-size:32px;padding-right:28px}
#room-settings form{display:grid;gap:12px;margin-top:24px}
#room-settings form p{margin:0}
#room-settings label{color:#eee7d8;font-size:16px;font-weight:700}
#room-settings select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #536772;border-radius:8px;background:#101b23;color:#f1eee5;font:inherit}
#room-settings select:focus-visible{outline:2px solid #e9a06a;outline-offset:2px}
#room-settings .settings-error{color:#ffb2aa;font-size:14px}
#room-settings .settings-error:empty{display:none}
#room-settings [type="submit"]{justify-self:start;margin-top:6px}
@media(max-width:600px){.room-settings-trigger{width:44px;padding:0;flex:none}.room-settings-trigger span{display:none}.room-code-actions{gap:6px}.room-invite small{flex-basis:100%}}

/* The code slot never resizes when its characters are masked. */
.room-code{width:132px;min-width:132px;max-width:132px;flex:0 0 132px;padding:9px 10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}