#generals *{box-sizing:border-box}#generals a{color:inherit;text-decoration:none}#generals a:focus-visible{outline:3px solid var(--lime);outline-offset:5px}#generals .tag,#generals .pill{font-size:11px;letter-spacing:1.3px;font-weight:750;border:1px solid var(--line);padding:6px 10px;border-radius:6px}#generals .tag{color:var(--muted)}#generals .hero{isolation:isolate;position:relative;overflow:hidden;border-radius:24px;display:grid;grid-template-columns:1fr 390px;gap:36px;align-items:center;padding:60px 44px;min-height:560px;background:#202821 none center/cover}#generals .hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0a1212e8,#09101244 65%,#0a121288)}#generals .eyebrow{font-size:12px;font-weight:700;letter-spacing:3px;color:var(--lime);margin:0 0 16px}#generals h1{font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-2.5px;margin:0 0 28px}#generals h1 span{display:block;font-size:.57em;letter-spacing:5px;margin-top:12px;color:#d4dace}#generals .lead{font-size:25px;line-height:1.35;margin:0 0 32px}#generals .chips{display:flex;gap:9px;flex-wrap:wrap}#generals .chips span{border:1px solid #ffffff35;background:#121b1780;padding:5px 11px;border-radius:100px;font-size:12px}#generals .test-card{padding:28px;border:1px solid #ffffff2a;background:#111a16eb;backdrop-filter:blur(15px);border-radius:18px}#generals .pill{color:var(--lime);border-color:#cce87540;display:inline-block}#generals .test-card h2{font-size:26px;line-height:1.2;letter-spacing:-.7px;margin:20px 0 14px}#generals .test-card p{color:var(--muted);font-size:14px}#generals .button{display:block;background:var(--lime);color:#172010;border-radius:10px;font-weight:750;text-align:center;padding:15px 12px;margin-top:23px}#generals .button:hover{background:#d9f48a}#generals .button.disabled{opacity:.5;pointer-events:none}#generals .test-card .caption{font-size:11px;line-height:1.7;margin:12px 0 22px}#generals .server{border-top:1px solid var(--line);padding-top:18px;display:flex;gap:10px;align-items:center;font-size:12px}#generals .dot{height:7px;width:7px;flex-shrink:0;background:#889184;border-radius:50%}#generals .dot.online{background:var(--lime)}#generals .notice{display:flex;gap:18px;padding:23px 4px;border-bottom:1px solid var(--line);font-size:13px}#generals .notice strong{white-space:nowrap;color:var(--lime)}#generals .notice span{color:var(--muted)}#generals .guide{padding:48px 0 36px}#generals .section-title h2{margin:0 0 28px;font-size:28px;letter-spacing:-.8px}#generals .section-title .eyebrow{font-size:10px;margin-bottom:10px}#generals .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}#generals .steps li{border:1px solid var(--line);padding:24px;border-radius:14px;background:#17201c}#generals .number{font-size:13px;font-weight:700;color:var(--lime)}#generals h3{font-size:17px;line-height:1.3;margin:18px 0 10px}#generals .steps p,#generals .progress p{font-size:13px;color:var(--muted);margin:0}#generals .progress{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:10px 0 38px}#generals .progress h2{font-size:17px}@media(max-width:950px){#generals .hero{grid-template-columns:1fr 340px;padding:34px 25px;gap:20px}#generals .notice{display:block}#generals .notice strong{display:block;margin-bottom:5px}#generals .steps li{padding:18px}#generals .lead{font-size:22px}}@media(max-width:680px){#generals .tag{font-size:8px;padding:4px 6px}#generals .hero{grid-template-columns:1fr;padding:28px 20px;gap:28px;background-position:35% center;border-radius:18px}#generals .hero:before{background:linear-gradient(#0a1212bb,#0a121244,#0a1212bb)}#generals h1{font-size:49px}#generals .lead{font-size:22px;margin-bottom:22px}#generals .test-card{padding:23px}#generals .steps,#generals .progress{grid-template-columns:1fr}#generals .steps{gap:12px}#generals .progress{gap:15px}#generals .guide{padding-top:32px}#generals .section-title h2{font-size:25px}}#generals [hidden]{display:none!important}#generals button,#generals input{font:inherit}#generals button{cursor:pointer;border:0}#generals button:disabled{opacity:.4;cursor:default}#generals .button{width:100%;font-size:14px}#generals .secondary{background:#243328;color:#eef5e6;border:1px solid #cce87540;margin-top:10px}#generals .secondary:hover{background:#354731}#generals .download{display:block;text-align:center;font-size:13px;text-decoration:underline;margin-top:20px}#generals .text-button{color:var(--muted);background:transparent;font-size:13px;padding:12px}#generals .text-button:hover{color:var(--lime)}#generals button:focus-visible,#generals input:focus-visible{outline:3px solid var(--lime);outline-offset:3px}#generals .room-panel{margin-top:28px;padding:30px;border:1px solid #cce87550;border-radius:18px;background:#17201c;scroll-margin-top:20px}#generals .room-heading,#generals .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:18px}#generals .room-heading h2{margin:0;overflow-wrap:anywhere}#generals .room-heading .eyebrow{margin-bottom:8px}#generals .room-layout{display:grid;grid-template-columns:1fr 340px;gap:36px}#generals .members-list{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}#generals .members-list li{background:#0d1511;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;min-width:0}#generals .member-number{color:var(--lime);font-size:22px;font-weight:700}#generals .member-name{display:block;font-size:14px;overflow-wrap:anywhere}#generals .member-state{display:block;font-size:12px;color:var(--muted)}#generals .member-ready .member-state{color:var(--lime)}#generals .member-empty{opacity:.55}#generals .room-code{font-size:21px;letter-spacing:1px;overflow-wrap:anywhere}#generals .meta{color:var(--muted);font-size:11px;letter-spacing:2px;margin-bottom:6px}#generals .caption,#generals .map-note{font-size:12px;color:var(--muted);line-height:1.6}#generals .map-note{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}#generals .action-pair{display:flex;gap:8px}#generals .action-pair .button{font-size:12px;padding:12px 7px}#generals #room-feedback{font-size:13px;color:var(--lime)}#generals dialog{color:#f5f7ef;background:#18221b;border:1px solid #cce87550;border-radius:18px;padding:26px;width:min(520px,calc(100% - 28px));max-height:90vh;overflow:auto}#generals dialog::backdrop{background:#030806cc;backdrop-filter:blur(5px)}#generals .dialog-head h2{font-size:24px;margin:0 0 20px}#generals dialog label{display:block;font-size:14px}#generals input{display:block;width:100%;margin-top:8px;padding:13px;border:1px solid #819176;border-radius:8px;background:#0e1712;color:white}#generals fieldset{padding:0;border:0;margin:22px 0}#generals legend{font-size:14px;margin-bottom:12px}#generals .capacity-options{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}#generals .capacity-options label{text-align:center;cursor:pointer;position:relative}#generals .capacity-options input{position:absolute;opacity:0;width:1px;height:1px}#generals .capacity-options span{display:block;border:1px solid #78896d;border-radius:8px;padding:12px 0}#generals .capacity-options input:checked+span{background:var(--lime);color:#172010;border-color:var(--lime);font-weight:bold}#generals .capacity-options input:focus-visible+span{outline:3px solid white;outline-offset:3px}#generals .error{color:#ffb7a6;font-size:14px}@media(max-width:800px){#generals .room-layout{grid-template-columns:1fr;gap:12px}#generals .room-panel{padding:22px}#generals .room-actions{max-width:500px}#generals .members-list{grid-template-columns:1fr 1fr}}@media(max-width:430px){#generals .members-list{grid-template-columns:1fr}#generals .room-heading{align-items:flex-start}#generals .room-heading h2{font-size:21px}#generals .room-count{white-space:nowrap}#generals .room-panel{padding:18px}#generals .capacity-options{gap:5px}#generals dialog{padding:20px}}#generals .qr{display:block;width:210px;max-width:100%;height:auto;margin:18px auto;image-rendering:pixelated;border:8px solid white;border-radius:8px}#generals #authorize-panel label{font-size:13px}#generals #entry-ready .pill{margin-top:20px}#generals #share-link{font-size:12px}#generals .room-directory{padding:32px 0;border-bottom:1px solid var(--line);scroll-margin-top:20px}#generals .room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}#generals .room-card{padding:22px;background:#17201c;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-width:0}#generals .room-card h3{margin:16px 0 8px;font-size:21px;overflow-wrap:anywhere}#generals .room-card .button{margin-top:auto}#generals .room-card .caption{overflow-wrap:anywhere;margin-bottom:18px}#generals .room-card-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--lime)}#generals .room-card-members{font-size:13px;color:var(--muted);overflow-wrap:anywhere}#generals .access-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}#generals .access-options label{position:relative;cursor:pointer}#generals .access-options input{position:absolute;opacity:0;width:1px;height:1px}#generals .access-options span{display:block;border:1px solid var(--line);border-radius:10px;padding:12px}#generals .access-options input:checked+span{border-color:var(--lime);background:#cce87512}#generals .access-options input:focus-visible+span{outline:3px solid white}#generals .access-options small{display:block;color:var(--muted);font-size:11px;margin-top:5px}#generals .check-label{display:flex;align-items:center;gap:10px;margin:16px 0}#generals .check-label input{width:18px;height:18px;margin:0;accent-color:var(--lime)}#generals #entry-password-label{display:block;margin-top:15px}@media(max-width:900px){#generals .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){#generals .room-grid{grid-template-columns:1fr}#generals .room-directory .room-heading{align-items:center}#generals .room-directory h2{font-size:23px}}#generals #directory-create{max-width:340px;margin-top:18px}#generals .room-back{display:none;align-items:center;gap:8px;font-size:14px}#generals .room-back img,#generals .icon-button img,#generals .status-icon{width:22px;height:22px;filter:invert(1);opacity:.85}body.room-view #generals .hero,body.room-view #generals .notice,body.room-view #generals .room-directory,body.room-view #generals .guide,body.room-view #generals .progress{display:none}body.room-view #generals .room-back{display:flex}#generals .room-panel{margin:0 0 30px;padding:0;background:transparent;border:0;scroll-margin-top:0}#generals .room-hero{min-height:252px;padding:28px 30px 24px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#111516ed 0%,#11151670 55%,#11151620),none center 43%/cover}#generals .game-wordmark{display:flex;flex-direction:column;line-height:1.02;max-width:260px;text-shadow:0 2px 8px #0006}#generals .game-wordmark small{font-size:12px;letter-spacing:1px}#generals .game-wordmark strong{font-size:39px;font-weight:900;letter-spacing:-1.8px}#generals .game-wordmark>span{font-size:20px;letter-spacing:3px;margin-top:2px}#generals .room-hero .room-heading{margin-top:24px}#generals .room-heading h2{font-size:32px;line-height:1.15;letter-spacing:-.8px}#generals .room-heading .eyebrow{font-size:11px;letter-spacing:1px;margin-bottom:6px}#generals .room-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:14px;color:#d0d5d5}#generals .room-meta>span+span{border-left:1px solid #ffffff40;padding-left:12px}#generals #room-access{display:inline-flex;align-items:center;gap:6px}#generals #room-access img{width:16px;filter:invert(1)}#generals .room-layout{grid-template-columns:minmax(0,1fr) 360px;gap:24px;padding:24px 0 0;align-items:start}#generals .room-team{min-width:0}#generals .members-list{display:flex;flex-direction:column;margin:0;border:1px solid var(--line);border-radius:12px;gap:0;overflow:hidden;background:#171d1de0}#generals .members-list li{background:transparent;border:0;border-radius:0;min-height:76px;padding:14px 20px;border-bottom:1px solid var(--line);gap:14px}#generals .members-list li:last-child{border-bottom:0}#generals .member-avatar{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:21px;font-weight:750;background:#485b27;color:#eff9db}#generals .members-list li:nth-child(2) .member-avatar{background:#2d495d;color:#c1deee}#generals .members-list li:nth-child(3) .member-avatar{background:#634126;color:#ffe0c8}#generals .member-avatar img{width:24px;filter:invert(1);opacity:.65}#generals .member-empty{opacity:1}#generals .member-empty .member-avatar{background:transparent!important;border:1px dashed #74807b}#generals .member-info{flex:1;min-width:0}#generals .member-name{font-size:16px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}#generals .member-state{font-size:12px;margin-top:4px;color:var(--muted)!important}#generals .member-badge{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap}#generals .member-badge img{width:20px;height:20px;filter:invert(1);opacity:.6}#generals .member-ready .member-badge{color:var(--lime)}#generals .member-ready .member-badge img{background:var(--lime);border-radius:50%;filter:none;opacity:1;padding:3px}#generals .members-list.large-roster{display:grid;grid-template-columns:1fr 1fr}#generals .large-roster li:nth-child(odd){border-right:1px solid var(--line)}#generals .large-roster li:nth-last-child(2):nth-child(odd){border-bottom:0}#generals .large-roster .member-badge span{display:none}#generals .launch-panel{display:grid;grid-template-columns:30px 1fr;gap:12px;margin-top:20px;background:#1a2020;padding:22px;border:1px solid var(--line);border-radius:12px;align-items:center}#generals .launch-panel strong{font-size:16px}#generals .launch-panel p{font-size:13px;color:var(--muted);margin:4px 0 0}#generals #start-room{grid-column:1/-1;margin:6px 0 0;min-height:48px}#generals button.button:disabled{background:#353d3f;color:#a2a8a8;opacity:.65;border-color:transparent}#generals .room-actions{max-width:none;padding:22px;background:#171d1d;border:1px solid var(--line);border-radius:12px;position:sticky;top:16px}#generals .room-actions h3{margin:0;font-size:21px;letter-spacing:-.3px}#generals .room-actions .caption{font-size:13px;line-height:1.55;margin:8px 0}#generals .qr-preview{display:block;padding:0;color:var(--muted);background:transparent;width:100%}#generals .qr-preview .qr{width:222px;border:0;border-radius:8px;margin:20px auto 6px}#generals .qr-preview>span{font-size:11px}#generals .code-line{display:flex;align-items:center;gap:8px}#generals .code-line .room-code{flex:1;font-size:16px;letter-spacing:.4px;font-weight:650;white-space:nowrap}#generals .icon-button{background:transparent;min-width:44px;height:44px;border:1px solid #ffffff30;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}#generals .room-actions .meta{font-size:13px;letter-spacing:0;margin:14px 0 2px}#generals .invite-buttons .button{margin:12px 0 0;min-height:48px;padding:12px}#generals .secondary{background:transparent;border-color:#ffffff30}#generals .secondary:hover{background:#27302c}#generals .participation{padding:22px;margin-top:20px;border:1px solid var(--line);border-radius:12px}#generals .participation h3{margin:0 0 6px;font-size:18px}#generals .entry-fields{display:flex;gap:12px}#generals .entry-fields label{flex:1;min-width:0}#generals .participation .button{margin-top:14px}#generals .personal-entry{margin-top:16px}#generals .personal-entry summary{font-size:13px;cursor:pointer;color:var(--muted)}#generals .room-tools{display:flex;justify-content:space-between}#generals .room-tools .text-button{padding:10px 0}#generals #close-room{color:#deb5aa}#generals .room-code{font-family:Inter,system-ui,sans-serif}#generals .map-note{font-size:12px;max-width:760px;margin-top:20px}#generals .map-note summary{cursor:pointer;min-height:40px;display:flex;align-items:center;color:var(--muted)}#generals .map-note p{margin:4px 0 12px}#generals .room-panel #room-feedback:empty,#generals .room-actions #invite-feedback:empty,#generals .participation #app-hint:empty{display:none}body.room-unavailable #generals .room-layout{display:none}#generals .room-unavailable #room-state{display:block}#generals .room-back:focus-visible,#generals .qr-preview:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
@media(max-width:1000px){#generals .room-layout{grid-template-columns:minmax(0,1fr) 320px;gap:18px}#generals .members-list li{padding:12px}#generals .member-badge span{display:none}#generals .room-actions{padding:18px}#generals .room-heading h2{font-size:29px}#generals .members-list.large-roster{display:flex}#generals .large-roster li:nth-child(odd){border-right:0}#generals .large-roster li:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}}
@media(max-width:700px){#generals .room-back{margin-left:auto;font-size:12px;gap:4px}#generals .room-back img{width:18px}#generals .room-hero{padding:20px 16px 18px;min-height:216px;background-position:45% center}#generals .game-wordmark strong{font-size:32px}#generals .game-wordmark small{font-size:10px}#generals .game-wordmark>span{font-size:16px}#generals .room-hero .room-heading{margin-top:22px}#generals .room-heading h2{font-size:26px}#generals .room-meta{font-size:12px;gap:8px}#generals .room-meta>span+span{padding-left:8px}#generals .room-layout{display:flex;flex-direction:column;padding-top:16px;gap:16px}#generals .room-team{display:contents}#generals .members-list{width:100%;order:1}#generals .members-list li{min-height:65px;padding:10px 14px}#generals .member-avatar{width:38px;height:38px;font-size:18px}#generals .member-name{font-size:14px}#generals .member-badge span{display:inline}#generals .members-list.large-roster{display:grid;grid-template-columns:1fr 1fr}#generals .large-roster li{gap:8px;padding:10px 8px;min-height:64px}#generals .large-roster .member-avatar{width:30px;height:30px;font-size:15px}#generals .large-roster .member-badge{display:none}#generals .large-roster .member-name{font-size:12px}#generals .large-roster .member-state{font-size:10px}#generals .large-roster li:nth-child(odd){border-right:1px solid var(--line)}#generals .large-roster li:nth-last-child(2):nth-child(odd){border-bottom:0}#generals .room-actions{order:2;width:100%;position:static;display:grid;grid-template-columns:116px minmax(0,1fr);gap:0 12px;padding:16px}#generals .room-actions h3,#generals .room-actions .invite-description{grid-column:1/-1}#generals .room-actions h3{font-size:19px}#generals .room-actions .invite-description{margin-bottom:14px}#generals .room-actions .invite-description br{display:none}#generals .qr-preview{grid-column:1;grid-row:3}#generals .qr-preview .qr{width:116px;margin:0}#generals .qr-preview>span{display:none}#generals .invite-details{grid-column:2;grid-row:3;align-self:center;min-width:0}#generals .room-actions .meta{margin-top:0;font-size:12px}#generals .code-line{gap:3px;flex-wrap:wrap}#generals .code-line .room-code{font-size:12px;letter-spacing:0;flex-basis:100%}#generals .icon-button{min-width:40px;width:40px;height:40px;margin-top:5px}#generals .room-actions .caption{font-size:12px}#generals .invite-buttons{grid-column:1/-1;margin-top:8px}#generals .room-actions #invite-feedback{grid-column:1/-1}#generals .launch-panel{order:3;width:100%;margin:0;padding:16px;gap:10px}#generals .launch-panel strong{font-size:14px}#generals .launch-panel p{font-size:12px}#generals .participation{order:4;width:100%;margin:0;padding:16px}#generals .room-tools{order:6;width:100%}#generals #room-feedback{order:5}#generals .entry-fields{flex-direction:column}#generals .map-note{margin-top:14px}#generals .room-panel{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){#generals *{scroll-behavior:auto!important}}#generals .room-options{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0}#generals .room-options label{display:flex;align-items:center;gap:8px;margin:0}#generals .room-options input[type=checkbox]{width:22px;height:22px;margin:0}#generals .room-options select{width:auto;min-width:64px;background:#17231b;color:#f5f7f4;border:1px solid #8b9b78;border-radius:8px;padding:10px}#generals .room-options [hidden]{display:none}#generals .match-controls{display:grid;gap:14px;margin:20px 0;padding:18px;background:#182420;border-radius:12px}#generals .match-controls[hidden]{display:none}#generals .match-controls label{display:grid;gap:8px}#generals .match-controls select{width:100%;padding:12px;background:#24332b;color:#f5f6f3;border:0;border-radius:8px}#generals .match-controls label:has(input[type=checkbox]){display:flex;align-items:center}#generals .match-preview{width:100%;max-height:180px;object-fit:contain;background:#101915;border-radius:8px}#generals .match-controls form{display:grid;gap:14px}#generals .match-controls form[hidden]{display:none}

#generals{--lime:var(--accent);line-height:1.55}#generals .secondary{height:auto}#generals ol li:before{content:none}#generals .members-list li{margin:0}#generals .steps li{display:block;margin:0}#generals .download{border:0;padding:0;margin:18px 0 0}#generals .game-links{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;font-size:14px;color:var(--muted)}#generals .game-links a{min-height:44px;display:inline-flex;align-items:center;gap:8px}#generals .game-links img{width:20px;height:20px;filter:invert(1)}#generals .hero .lead{font-size:22px}#generals .server:has(#status:empty){display:none}#generals .test-card h2{margin-top:0}#generals #room-feedback:empty{display:none}

#generals .game-links{flex-wrap:wrap}#generals .guide-link{color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-size:16px;min-height:44px;display:inline-flex;align-items:center}#generals .guide .section-title{flex-wrap:wrap;gap:12px}#generals .generals-video{max-width:900px;margin:0 auto 24px}#generals .generals-video video{display:block;width:100%;aspect-ratio:16/9;background:#071008;border-radius:12px}#generals .generals-video p{font-size:13px;color:var(--muted);margin-top:6px}
#generals .generals-art{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-2;pointer-events:none}#generals .generals-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}#generals .room-hero{position:relative;isolation:isolate;overflow:hidden;background:#111516}#generals .room-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#111516ed 0%,#11151670 55%,#11151620);pointer-events:none}#generals .room-hero .generals-art img{object-position:center 43%}@media(max-width:680px){#generals .hero .generals-art img{object-position:35% center}}@media(max-width:700px){#generals .room-hero .generals-art img{object-position:45% center}}
@font-face{font-family:Oswald;font-style:normal;font-weight:200 700;font-display:swap;src:url('/generals-original-assets/desert-ui13-final4-20261012/oswald-variable.ttf') format('truetype')}
/* GeneralsX @feature Codex 12/10/2026 Desert operations. Room routes, admission and shared site chrome remain intact. */
#generals{--accent:#e8a34b;--lime:#e8a34b;--muted:#aaa9a1;--line:#ffffff12;color:#f1eee6;background:#171918;font-family:Inter,system-ui,sans-serif}
#generals .hero,#generals .room-hero{border:0;border-radius:4px;background:#1b1d1b;min-height:300px}
#generals .hero{padding:36px;grid-template-columns:minmax(0,1fr) 330px;gap:36px}
#generals .hero:before{background:linear-gradient(90deg,#121514b8,#12151428 60%,#12151466)}
#generals .hero-copy h1,#generals .game-wordmark strong{font-family:Oswald,'Arial Narrow',sans-serif;font-size:clamp(48px,6vw,76px);font-weight:700;letter-spacing:.025em;line-height:1.05;margin:8px 0 16px}
#generals .hero-copy .eyebrow{letter-spacing:.16em;color:#e7cfaa;font-size:11px}
#generals .lead{font-size:22px;margin:0 0 20px}
#generals .test-card{border:0;border-radius:4px;background:#171918d9;backdrop-filter:none;padding:22px}
#generals .test-card h2{font-size:23px;font-weight:650;letter-spacing:-.025em;margin:0 0 8px}
#generals .test-card p{margin:8px 0 14px}
#generals .button,#generals dialog .button{border:0;border-radius:4px;background:#e8a34b;color:#211b13;box-shadow:none;min-height:48px;font-weight:700;transition:background .15s}
#generals .button:hover{background:#f1b66b}
#generals .button.secondary,#generals dialog .button.secondary{background:#ffffff0a;color:#f1eee6;border:0}
#generals .button.secondary:hover{background:#ffffff14}
#generals .tag,#generals .pill,#generals .chips span{border:0;background:#15181699;border-radius:3px}
#generals .chips span{padding:4px 8px;font-size:11px}
#generals .support-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:#ddc5a0;text-decoration:underline;text-underline-offset:4px}
#generals .test-card .download{display:inline-flex;align-items:center;min-height:44px;float:right;margin:0;font-size:13px}
#generals .test-card .caption{clear:both;font-size:11px;margin:4px 0 10px}
#generals .server{padding-top:12px}
#generals .room-directory{padding:28px 0 36px;border:0}
#generals #directory-create{display:none}
#generals .room-heading h2{font-size:28px;font-weight:650;letter-spacing:-.025em}
#generals .room-heading .eyebrow{font-size:10px;letter-spacing:.16em;color:var(--accent)}
#generals .room-grid{gap:14px}
#generals .room-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:18px;border:0;border-radius:4px;box-shadow:none;background:#222522;min-height:190px}
#generals .room-card-map{position:absolute;right:0;top:0;width:44%;height:100%;object-fit:cover;opacity:.23;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000)}
#generals .room-card>*:not(img){position:relative;z-index:1}
#generals .room-card-top{grid-column:1/-1;color:#e7c08c;font-size:11px}
#generals .room-card h3{grid-column:1/-1;font-size:21px;margin:12px 0 0;line-height:1.2}
#generals .room-card .caption{grid-column:1/-1;margin:6px 0;font-size:11px}
#generals .room-card-members{font-size:12px;margin:4px 0 12px;grid-column:1/-1}
#generals .room-card .button{grid-column:1/-1;padding:10px;margin:0;min-height:44px;text-align:left;color:#e8c69b;background:#ffffff06}
#generals .room-panel{background:transparent;padding:0;border:0;box-shadow:none}
#generals .room-hero{position:relative;isolation:isolate;overflow:hidden;min-height:218px;padding:24px 28px}
#generals .room-hero .game-wordmark strong{font-size:36px;margin:3px 0 0}
#generals .room-hero .game-wordmark small{font-size:10px;letter-spacing:.14em}
#generals .room-hero:before{background:linear-gradient(90deg,#151817e8,#15181733 90%)}
#generals .room-hero .room-heading{margin-top:20px}
#generals .room-meta{font-size:12px;color:#c4c1b7}
#generals .room-layout{gap:24px;padding-top:24px}
#generals .members-list{border:0;border-radius:4px;background:#202320}
#generals .members-list li{border:0;border-bottom:1px solid #ffffff08;background:transparent;border-radius:0;min-height:70px;padding:12px 16px}
#generals .member-avatar{border-radius:4px;background:#6e6046;color:#fff1db}
#generals .member-empty .member-avatar{border:0;background:#ffffff08!important}
#generals .member-ready .member-badge{color:#b1c694}
#generals .member-ready .member-badge img{background:#b1c694}
#generals .room-actions,#generals .participation,#generals .launch-panel,#generals .match-controls{border:0;border-radius:4px;background:#202320;box-shadow:none}
#generals .room-actions{padding:24px}
#generals .room-actions .qr-preview{border:0;background:transparent}
#generals .room-actions .qr-preview .qr{width:218px;border-radius:3px;background:white;padding:10px;margin:20px auto 8px}
#generals .invite-buttons .button{font-size:13px}
#generals .code-line .room-code{font-size:16px;letter-spacing:.07em}
#generals .icon-button{border:0;background:#ffffff08;border-radius:4px}
#generals .participation{padding:20px}
#generals .launch-panel{padding:20px;margin-top:16px}
#generals .room-options{margin:12px 0;font-size:12px}
#generals .room-tools .text-button,#generals .text-button{min-height:44px}
#generals .match-controls{padding:0;background:transparent;gap:16px;margin:20px 0}
#generals .match-controls h3{margin:0;font-size:18px}
#generals .match-preview{height:136px;object-fit:cover;border-radius:4px;background:#222622}
#generals input,#generals select,#generals dialog input,#generals dialog select{font:inherit;background:#2a2d29;border:0;border-radius:4px;color:#f1eee6;min-height:48px;padding:13px;outline-offset:3px}
#generals dialog{background:#1b1e1b;color:#f1eee6;border:0;border-radius:6px;box-shadow:0 20px 90px #0008;padding:28px;width:min(500px,calc(100% - 32px));max-height:94dvh}
#generals dialog::backdrop{background:#090c0bc9;backdrop-filter:blur(8px)}
#generals .dialog-head{margin-bottom:20px}
#generals .dialog-head h2{font-size:27px;letter-spacing:-.025em;margin:0}
#generals dialog label,#generals dialog legend{font-size:13px;color:#d4d1c7}
#generals dialog .capacity-options{gap:6px}
#generals dialog .capacity-options span{border:0;background:#ffffff08;border-radius:4px;padding:12px 0}
#generals dialog .capacity-options input:checked+span{background:#e8a34b;color:#211b13}
#generals .access-options{gap:8px}
#generals .access-options span{border:0;background:#ffffff06;border-radius:4px;padding:12px}
#generals .access-options input:checked+span{background:#54432e;box-shadow:inset 0 -2px #e8a34b}
#generals dialog input[type=checkbox],#generals input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:0;accent-color:#e8a34b}
#generals dialog label:has(input[type=checkbox]),#generals label:has(input[type=checkbox]){min-height:44px;gap:10px;cursor:pointer}
#generals .advanced-rules{border-top:1px solid #ffffff0c;padding-top:8px}
#generals .advanced-rules summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:#c9bdab;font-size:13px}
#generals .advanced-rules[open] summary{color:var(--accent)}
#generals #create-submit{position:sticky;bottom:0;margin-top:18px;box-shadow:0 -12px 16px #1b1e1b}
#generals .steps{gap:28px}#generals .steps li{background:transparent;padding:14px 0;border:0;border-radius:0}
#generals .number{color:#d8b683;font-size:24px;font-weight:400}
#generals :focus-visible,#generals dialog :focus-visible{outline:2px solid #f4c887;outline-offset:3px}
#generals .guide-article{max-width:820px;margin:30px auto 70px}#generals .guide-article h1{font-size:40px;line-height:1.15;letter-spacing:-.02em}#generals .guide-step{margin-top:42px}#generals .guide-step h2{font-size:24px;margin:4px 0 14px}#generals .guide-step p{color:var(--muted);line-height:1.75}
@media(max-width:850px){#generals .hero{grid-template-columns:1fr;gap:18px;padding:24px}#generals .test-card{max-width:none;padding:20px;background:#171918e8}#generals .hero .generals-art img{object-position:70% center}#generals .hero-copy{min-height:130px}#generals .room-layout{gap:16px}}
@media(max-width:700px){#generals .hero{padding:20px;min-height:0;gap:12px}#generals .hero-copy{min-height:100px}#generals .hero-copy h1{font-size:48px;margin:5px 0 10px}#generals .lead{font-size:16px;margin-bottom:10px}#generals .chips{display:none}#generals .test-card{padding:16px}#generals .test-card h2{display:none}#generals .test-card>p:first-of-type{display:none}#generals .test-card .button{margin-top:0}#generals .test-card .secondary{margin-top:8px}#generals .test-card .caption{display:none}#generals .server{padding-top:6px;border:0;min-height:16px}#generals .room-directory{padding:24px 0}#generals .room-directory h2{font-size:23px}#generals .room-directory .eyebrow{margin-bottom:5px}#generals .room-directory .caption{font-size:12px}#generals .room-card{min-height:170px;padding:16px}#generals .room-hero{min-height:190px;padding:20px}#generals .room-hero .game-wordmark strong{font-size:30px}#generals .room-heading h2{font-size:25px}#generals .room-layout{display:flex;flex-direction:column;padding-top:16px}#generals .members-list{order:1}#generals .room-actions{order:2;display:block;width:100%;padding:20px;text-align:center}#generals .room-actions h3{font-size:21px}#generals .room-actions .invite-description{margin-bottom:12px}#generals .room-actions .qr-preview .qr{width:192px;margin:16px auto 6px}#generals .invite-details{margin:12px 0}#generals .code-line{justify-content:center;flex-wrap:nowrap}#generals .code-line .room-code{flex:0 1 auto;flex-basis:auto;font-size:16px}#generals .invite-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}#generals .invite-buttons .button{margin:0;padding:12px 8px}#generals .launch-panel{order:3;margin:0;width:100%}#generals .participation{order:4;width:100%;margin:0}#generals #match-summary{order:5;width:100%}#generals .room-tools{order:7;width:100%}#generals .room-options{order:6;width:100%}#generals dialog{width:100%;max-width:none;max-height:100dvh;height:100dvh;margin:0;padding:20px 20px max(20px,env(safe-area-inset-bottom));border-radius:0}#generals .dialog-head{position:sticky;top:-20px;background:#1b1e1bf5;padding:12px 0;z-index:2}#generals .match-preview{height:120px}#generals .room-meta{gap:8px}}
@media(prefers-reduced-motion:reduce){#generals *{scroll-behavior:auto;transition:none}}

/* GeneralsX @bugfix Codex 12/10/2026 Keep the map recognizable and reduce form height without hiding access controls. */
#generals #create-match{position:relative}
#generals #create-match>label:first-child{padding-right:88px;min-height:82px}
#generals #create-map-preview{position:absolute;right:0;top:0;width:76px;height:82px;object-fit:contain;background:#272b26;margin:0}
#generals .hero-copy h1,#generals .game-wordmark strong{color:#e8a34b}
#generals .room-directory .room-heading h2{white-space:nowrap;font-size:24px}
@media(max-width:400px){#generals .room-directory .room-heading{gap:6px}#generals .room-directory .text-button{font-size:11px;padding:8px}#generals .room-directory .room-heading h2{font-size:22px}}

/* GeneralsX @feature Codex 12/10/2026 Put the room list before creation actions on phones, matching the selected command flow. */
@media(max-width:700px){#generals:not(:has(#room-panel:not([hidden]))){display:flex;flex-direction:column}#generals:not(:has(#room-panel:not([hidden]))) .hero{display:contents}#generals:not(:has(#room-panel:not([hidden]))) .hero>.generals-art{display:none}#generals:not(:has(#room-panel:not([hidden]))) .hero-copy{order:0;min-height:0;padding:20px 16px 12px;background:#20231f url('/generals-original-assets/art/desert-operations-wide.png') 68% 42%/cover;border-radius:4px}#generals:not(:has(#room-panel:not([hidden]))) .hero-copy .lead{margin:0;font-size:14px}#generals:not(:has(#room-panel:not([hidden]))) .room-directory{order:1;padding:24px 0 12px}#generals:not(:has(#room-panel:not([hidden]))) .test-card{order:2;background:transparent;padding:8px 0 24px}#generals:not(:has(#room-panel:not([hidden]))) .guide{order:3}#generals #directory-create{display:none}#generals #create-form{padding-bottom:24px}}

#generals .edit-rules:has(form[hidden]){display:none}
#generals .match-controls .match-preview{height:80px;object-fit:contain;width:80px;float:left}
#generals #match-summary-text{font-size:13px;color:var(--muted);margin:0}
@media(max-width:700px){#generals .room-hero{min-height:160px;padding:18px 20px}#generals .room-hero .room-heading{margin-top:12px}#generals .room-actions{display:grid;grid-template-columns:160px minmax(0,1fr);text-align:left;gap:0 14px;padding:16px}#generals .room-actions h3,#generals .room-actions .invite-description{grid-column:1/-1}#generals .room-actions .invite-description{font-size:12px;margin:6px 0 12px}#generals .room-actions .qr-preview{grid-column:1;grid-row:3}#generals .room-actions .qr-preview .qr{width:160px;margin:0;padding:8px}#generals .invite-details{grid-column:2;grid-row:3;align-self:center;margin:0;min-width:0}#generals .code-line{display:block}#generals .code-line .room-code{font-size:13px;white-space:normal;overflow-wrap:anywhere}#generals .code-line .icon-button{margin-top:6px}#generals .invite-buttons{grid-column:1/-1;margin-top:14px}#generals .room-actions #invite-feedback{grid-column:1/-1}#generals .members-list li{min-height:60px;padding:10px 14px}#generals #share-dialog .qr{width:240px;margin:24px auto;background:white;padding:8px}}

@media(max-width:700px){#generals #launch-note,#generals #launch-role{order:5;width:100%;font-size:12px}#generals #room-feedback{order:6}}

/* GeneralsX @bugfix Codex 12/10/2026 Keep game identity and desert artwork within the room creation flow. */
#generals #create-dialog{background:linear-gradient(#1b1e1b 60%,#1b1e1bbd 82%,#1b1e1b70),#1b1e1b url('/generals-original-assets/art/desert-operations-wide.png') 66% bottom/auto 340px no-repeat}
#generals .dialog-brand{padding:0 0 14px;color:#e8a34b}
#generals .dialog-brand span{display:block;font-size:10px;letter-spacing:.15em;color:#e7cfaa}
#generals .dialog-brand strong{display:block;font-family:Oswald,'Arial Narrow',sans-serif;font-size:36px;line-height:1.1;letter-spacing:.025em}

#generals #create-form .dialog-brand{padding-bottom:8px}
#generals #create-form .dialog-head{margin-bottom:10px;padding-top:8px;padding-bottom:8px}
#generals #create-form fieldset{margin:14px 0}
#generals #create-match{margin:12px 0}

/* GeneralsX @bugfix Codex 12/10/2026 Use a recognizable map thumbnail and compact room rows on phones. */
@media(max-width:700px){#generals .room-card{grid-template-columns:76px minmax(0,1fr);gap:4px 12px;min-height:132px;padding:14px}#generals .room-card-map{position:static;grid-column:1;grid-row:1/5;width:76px;height:96px;align-self:center;object-fit:contain;opacity:1;mask-image:none;border-radius:3px;background:#292c27}#generals .room-card-top{grid-column:2;font-size:10px}#generals .room-card h3{grid-column:2;font-size:18px;margin:2px 0;overflow-wrap:anywhere}#generals .room-card .caption{grid-column:2;margin:0;font-size:11px}#generals .room-card-members{display:none}#generals .room-card .button{grid-column:2;min-height:28px;margin:0;padding:0;background:transparent;font-size:12px;display:flex;align-items:center}#generals .room-card .button:after{content:'→';margin-left:auto}}