/* Room directory: a focused destination reached from the Launch Bay. */
body[data-app-state="ROOM_BROWSER"] #room-browser {
 position:fixed;inset:0;z-index:20;display:block;box-sizing:border-box;overflow:hidden;padding:24px;
 background:radial-gradient(ellipse at 52% 40%,#075b7c30,transparent 58%),linear-gradient(135deg,#020811,#061927 58%,#020910);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-scene {
 position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;opacity:.72;image-rendering:pixelated;pointer-events:none;
}
body[data-app-state="ROOM_BROWSER"] #room-browser:after {
 position:absolute;inset:0;z-index:0;content:"";pointer-events:none;
 background:linear-gradient(90deg,#0209137a,#03111ac2 20%,#04111ad6 80%,#02091380),linear-gradient(0deg,#020913d9,transparent 42%,#02091368);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {
 position:relative;z-index:1;display:flex;flex-direction:column;gap:0;width:min(1780px,100%);height:100%;box-sizing:border-box;margin:0 auto;padding:18px 26px 22px;overflow:hidden;
 border:1px solid #1fa4c4;border-radius:7px;background:linear-gradient(140deg,#041421de,#061925e8 55%,#06131dde);box-shadow:0 0 0 4px #020b12c9,0 0 40px #16bed22b,inset 0 0 0 1px #67e8f126,inset 0 0 35px #0986a219;backdrop-filter:blur(2px);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-header {
 display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:clamp(16px,3vw,50px);flex:none;min-height:74px;padding:0 6px 12px;border-bottom:1px solid #16718b;
}
body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb {display:flex;align-items:center;gap:16px;min-width:0;color:#b8d8e6;font-size:clamp(12px,.95vw,17px);font-weight:800;letter-spacing:.08em;white-space:nowrap}
body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb img {width:74px;height:60px;object-fit:contain;filter:drop-shadow(0 0 7px #20c9e65c)}
body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb span {color:#79eafa}
body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb i {color:#46bed5;font-style:normal}
body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb b {color:#f3f7fd}
body[data-app-state="ROOM_BROWSER"] .room-browser-ready {display:flex;align-items:center;gap:10px;min-width:210px;padding:6px 15px 6px 8px;border:1px solid #1688a4;background:linear-gradient(110deg,#092536,#061520);box-shadow:inset 0 0 18px #0cbdd21b}
body[data-app-state="ROOM_BROWSER"] .room-browser-ready img {width:54px;height:48px;object-fit:contain;image-rendering:pixelated}
body[data-app-state="ROOM_BROWSER"] .room-browser-ready span {display:grid;gap:3px}
body[data-app-state="ROOM_BROWSER"] .room-browser-ready b {color:#d9f9ff;font-size:13px;letter-spacing:.08em}
body[data-app-state="ROOM_BROWSER"] .room-browser-ready small {color:#81b5c7;font-size:9px;letter-spacing:.13em}
body[data-app-state="ROOM_BROWSER"] #rooms-hangar {min-height:48px;padding:0 20px;border:1px solid #d6ab43;border-radius:2px;background:linear-gradient(180deg,#181d20de,#111a20ed);color:#ffd65a;font-weight:800;letter-spacing:.025em;white-space:nowrap;box-shadow:inset 0 0 14px #efb93917}
body[data-app-state="ROOM_BROWSER"] #rooms-hangar:hover {background:#493b1f;color:#fff0a0}
body[data-app-state="ROOM_BROWSER"] .room-browser-title {flex:none;padding:20px 8px 16px}
body[data-app-state="ROOM_BROWSER"] .room-browser-title h1 {margin:0;color:#f4faff;font-size:clamp(26px,2.25vw,39px);font-weight:900;letter-spacing:.09em;text-shadow:0 2px #0a2534,0 0 16px #45dff238;text-transform:uppercase}
body[data-app-state="ROOM_BROWSER"] .room-browser-title p {margin:4px 0 0;color:#b7d5e2;font-size:clamp(12px,.95vw,17px);letter-spacing:.025em}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns {display:grid;grid-template-columns:minmax(0,1.95fr) minmax(300px,.82fr);gap:22px;flex:1;min-height:0;margin:0}
body[data-app-state="ROOM_BROWSER"] .room-directory {display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid #1596b6;background:linear-gradient(145deg,#041824f2,#04131ff5);box-shadow:inset 0 0 0 1px #0b2c3b,inset 0 0 28px #0b8ba61c}
body[data-app-state="ROOM_BROWSER"] .room-directory-toolbar {display:grid;grid-template-columns:minmax(180px,1.15fr) auto minmax(110px,.52fr) 48px;align-items:center;gap:14px;flex:none;min-height:72px;padding:10px 14px;border-bottom:1px solid #126380;background:linear-gradient(90deg,#071f2deF,#061923f5)}
body[data-app-state="ROOM_BROWSER"] .room-search {display:flex;align-items:center;gap:10px;height:46px;min-width:0;box-sizing:border-box;padding:0 13px;border:1px solid #147b96;background:#03111b;color:#56e6f6}
body[data-app-state="ROOM_BROWSER"] .room-search>span {font-size:24px;line-height:1}
body[data-app-state="ROOM_BROWSER"] .room-search input {width:100%;min-width:0;height:100%;border:0;outline:none;background:transparent;color:#e4f8ff;font-size:14px}
body[data-app-state="ROOM_BROWSER"] .room-search input::placeholder {color:#698b9c}
body[data-app-state="ROOM_BROWSER"] .room-mode-filters {display:flex;align-items:stretch;height:44px;border:1px solid #137b98;background:#06121c}
body[data-app-state="ROOM_BROWSER"] .room-mode-filters button {min-width:66px;padding:0 17px;border:0;border-right:1px solid #164960;border-radius:0;background:transparent;color:#bfd4df;font-size:13px;font-weight:800}
body[data-app-state="ROOM_BROWSER"] .room-mode-filters button:last-child {border-right:0}
body[data-app-state="ROOM_BROWSER"] .room-mode-filters button[aria-pressed="true"] {background:linear-gradient(180deg,#12bfd6,#0589a9);color:#00121a;box-shadow:inset 0 0 0 1px #75f6ff,0 0 14px #16cfe753}
body[data-app-state="ROOM_BROWSER"] .room-directory-kind {padding-left:14px;border-left:1px solid #1b5c70;color:#8baebe;font-size:10px;font-weight:800;letter-spacing:.1em;text-align:center}
body[data-app-state="ROOM_BROWSER"] .room-refresh {width:46px;height:46px;border:1px solid #1684a1;border-radius:2px;background:#071925;color:#4bdcef;font-size:28px;line-height:1}
body[data-app-state="ROOM_BROWSER"] .room-refresh:hover {background:#10384a;color:#fff}
body[data-app-state="ROOM_BROWSER"] #browser-status {flex:none;min-height:0;margin:0;padding:0 14px;color:#e7c967;font-size:12px}
body[data-app-state="ROOM_BROWSER"] #room-list {display:grid;align-content:start;gap:10px;min-height:0;padding:10px;overflow-y:auto;overscroll-behavior:contain}
body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card {display:grid;grid-template-columns:minmax(150px,29%) minmax(150px,1fr) auto;grid-template-rows:1fr;grid-template-areas:none;align-items:center;gap:clamp(12px,1.5vw,26px);min-width:0;min-height:145px;height:auto;max-height:none;flex:initial;margin:0;padding:10px;border:1px solid #187c98;background:linear-gradient(100deg,#082331,#05151f 70%);box-shadow:inset 0 0 0 1px #0a2b39,inset 3px 0 #16bfd4,0 5px 14px #01070e80}
body[data-app-state="ROOM_BROWSER"] .room-card-art {width:100%;height:122px;overflow:hidden;border:1px solid #1687a5;background:#07131c}
body[data-app-state="ROOM_BROWSER"] .room-card-art img {display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto;transition:transform .25s ease}
body[data-app-state="ROOM_BROWSER"] .room-card:hover .room-card-art img {transform:scale(1.035)}
body[data-app-state="ROOM_BROWSER"] .room-card-copy {display:grid;align-content:center;gap:7px;min-width:0}
body[data-app-state="ROOM_BROWSER"] .room-card-copy h3 {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;overflow:hidden;color:#f2f8ff;font-size:clamp(15px,1.2vw,21px);line-height:1.12;letter-spacing:.055em;text-overflow:ellipsis;text-transform:uppercase;overflow-wrap:anywhere}
body[data-app-state="ROOM_BROWSER"] .room-card-details {display:flex;flex-wrap:wrap;align-items:center;gap:7px}
body[data-app-state="ROOM_BROWSER"] .room-card-mode,body[data-app-state="ROOM_BROWSER"] .room-card-map {display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border:1px solid #27657e;background:#071722;color:#9ed8e9;font-size:11px;font-weight:800;letter-spacing:.04em}
body[data-app-state="ROOM_BROWSER"] .room-card-map {border-color:#5d4e32;color:#f4d17b}
body[data-app-state="ROOM_BROWSER"] .room-card-status {display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 9px;border:1px solid #176a55;background:#082b2c;color:#62edbd;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
body[data-app-state="ROOM_BROWSER"] .room-card-status:before {width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;content:""}
body[data-app-state="ROOM_BROWSER"] .room-card-status-in_progress {border-color:#81502d;background:#382117;color:#ff9b66}
body[data-app-state="ROOM_BROWSER"] .room-card-status-finished {border-color:#505969;background:#202834;color:#aebdca}
body[data-app-state="ROOM_BROWSER"] .room-card-description {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:#a8c3d0;font-size:12px;line-height:1.35}
body[data-app-state="ROOM_BROWSER"] .room-card-join {min-width:138px;min-height:58px;padding:0 15px;border:1px solid #ffe181;border-radius:2px;background:linear-gradient(180deg,#ffe17a,#e9a92f);color:#211600;font-size:14px;font-weight:950;letter-spacing:.025em;text-shadow:0 1px #fff1b0;box-shadow:0 0 16px #f1b3313d,inset 0 0 0 1px #fff7be}
body[data-app-state="ROOM_BROWSER"] .room-card-join:hover:not(:disabled) {background:linear-gradient(180deg,#fff0a5,#f7be43);transform:translateY(-1px)}
body[data-app-state="ROOM_BROWSER"] .room-card-join:disabled {border-color:#47606a;background:#1b2a30;color:#78909a;box-shadow:none}
body[data-app-state="ROOM_BROWSER"] .room-empty {display:grid;place-items:center;align-content:center;gap:10px;min-height:220px;border:1px dashed #216079;background:radial-gradient(ellipse,#0c2938,#05151f 70%);color:#a7c4d1;text-align:center}
body[data-app-state="ROOM_BROWSER"] .room-empty-mark {color:#4fe2f4;font-size:34px;text-shadow:0 0 16px #21c9e77c}
body[data-app-state="ROOM_BROWSER"] .room-empty p {margin:0;font-size:14px}
body[data-app-state="ROOM_BROWSER"] .room-empty-quick-play {min-height:44px;padding:0 24px;border:1px solid #d2a849;background:linear-gradient(140deg,#59441d,#2d2515);color:#ffe29a;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
body[data-app-state="ROOM_BROWSER"] .room-empty-quick-play:hover {filter:brightness(1.2)}
body[data-app-state="ROOM_BROWSER"] .create-room-panel {display:flex;flex-direction:column;gap:0;min-width:0;padding:clamp(18px,1.8vw,30px);border:1px solid #1596b6;background:linear-gradient(145deg,#041824f4,#04131ff7);box-shadow:inset 0 0 0 1px #0b2c3b,inset 0 0 32px #0b8ba61c}
body[data-app-state="ROOM_BROWSER"] .room-panel-eyebrow {margin:0 0 7px;color:#40d9ec;font-size:10px;font-weight:900;letter-spacing:.16em}
body[data-app-state="ROOM_BROWSER"] .create-room-panel h2,body[data-app-state="ROOM_BROWSER"] #room-create-dialog h2 {margin:0;color:#f0f8fc;font-size:clamp(19px,1.4vw,25px);letter-spacing:.075em;text-transform:uppercase}
body[data-app-state="ROOM_BROWSER"] .create-room-copy {margin:8px 0 0;color:#a9c5d2;font-size:14px;line-height:1.55}
body[data-app-state="ROOM_BROWSER"] .create-room-summary {margin-top:28px;padding:18px 0 24px;border-top:1px solid #174d62;border-bottom:1px solid #174d62}
body[data-app-state="ROOM_BROWSER"] .create-room-summary>span {display:block;margin-bottom:12px;color:#e0eefa;font-size:13px;font-weight:850}
body[data-app-state="ROOM_BROWSER"] .create-room-summary>div {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-app-state="ROOM_BROWSER"] .create-mode-card {display:grid;justify-items:center;align-content:center;gap:5px;min-width:0;min-height:150px;padding:12px 8px;border:1px solid #315366;border-radius:0;background:linear-gradient(155deg,#082332,#05141e);color:#eaf7fb;font:inherit;text-align:center;cursor:pointer}
body[data-app-state="ROOM_BROWSER"] .create-mode-card.is-recommended {border:2px solid #23c8e1;box-shadow:inset 0 0 24px #0cb9d32d,0 0 14px #10bcd330}
body[data-app-state="ROOM_BROWSER"] .room-size-formation {display:flex;align-items:center;justify-content:center;width:100%;height:68px;overflow:hidden}
body[data-app-state="ROOM_BROWSER"] .room-size-formation img {flex:none;width:44px;height:60px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 7px #37dff038)}
body[data-app-state="ROOM_BROWSER"] .room-size-formation img+img {margin-left:-6px}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-small img:first-child,body[data-app-state="ROOM_BROWSER"] .room-size-formation-small img:last-child {transform:translateY(8px)}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-small img:nth-child(2) {transform:translateY(-6px)}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img {width:36px;height:56px}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img+img {margin-left:-8px}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img:first-child,body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img:last-child {transform:translateY(8px)}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img:nth-child(2),body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img:nth-child(4) {transform:translateY(-2px)}
body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img:nth-child(3) {transform:translateY(-9px)}
body[data-app-state="ROOM_BROWSER"] .create-mode-card b {color:#f3faff;font-size:18px;letter-spacing:.04em}
body[data-app-state="ROOM_BROWSER"] .create-mode-card small {max-width:130px;color:#9ab9c8;font-size:11px;line-height:1.35}
body[data-app-state="ROOM_BROWSER"] .create-room-assist {display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px 12px;border:1px solid #173e50;background:#071925}
body[data-app-state="ROOM_BROWSER"] .assist-mark {display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #43d8ee;color:#55e3f5;font-size:17px}
body[data-app-state="ROOM_BROWSER"] .create-room-assist .assist-copy {display:grid;gap:4px;min-width:0}
body[data-app-state="ROOM_BROWSER"] .create-room-assist b {color:#eaf7fb;font-size:12px}
body[data-app-state="ROOM_BROWSER"] .create-room-assist small {color:#9db8c4;font-size:10px;line-height:1.35}
body[data-app-state="ROOM_BROWSER"] .assist-on {flex:none;margin-left:auto;color:#58efc0;font-size:9px;font-weight:900;letter-spacing:.07em}
body[data-app-state="ROOM_BROWSER"] .assist-toggle {position:relative;display:flex;align-items:center;gap:8px;flex:none;margin-left:auto;cursor:pointer}
body[data-app-state="ROOM_BROWSER"] .assist-toggle input {position:absolute;z-index:1;left:0;width:46px;height:26px;margin:0;opacity:0;cursor:pointer}
body[data-app-state="ROOM_BROWSER"] .assist-switch {position:relative;display:block;width:46px;height:24px;box-sizing:border-box;border:1px solid #466274;border-radius:99px;background:#142531;transition:background .15s,border-color .15s}
body[data-app-state="ROOM_BROWSER"] .assist-switch:after {position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#91a4af;box-shadow:0 1px 4px #0009;content:"";transition:transform .15s,background .15s}
body[data-app-state="ROOM_BROWSER"] .assist-toggle input:checked+.assist-switch {border-color:#2ae0d1;background:#075d62;box-shadow:0 0 12px #16d8d14d}
body[data-app-state="ROOM_BROWSER"] .assist-toggle input:checked+.assist-switch:after {transform:translateX(22px);background:#b9fff2}
body[data-app-state="ROOM_BROWSER"] .assist-toggle input:focus-visible+.assist-switch {outline:2px solid #75f6ff;outline-offset:3px}
body[data-app-state="ROOM_BROWSER"] .assist-toggle .assist-on {margin:0}
body[data-app-state="ROOM_BROWSER"] .create-room-cta {display:flex;align-items:center;justify-content:center;gap:11px;min-height:60px;margin-top:auto;padding:0 18px;border:1px solid #ffe58d;border-radius:2px;background:linear-gradient(180deg,#ffe481,#e9a72e);color:#211600;font-size:16px;font-weight:950;letter-spacing:.045em;box-shadow:0 0 20px #edb2373b,inset 0 0 0 1px #fff6bf;text-transform:uppercase}
body[data-app-state="ROOM_BROWSER"] .create-room-cta:hover {background:linear-gradient(180deg,#fff0a7,#fac247)}
body[data-app-state="ROOM_BROWSER"] .create-room-cta>span:first-child {font-size:27px;line-height:1}
body[data-app-state="ROOM_BROWSER"] .room-create-dialog {width:min(640px,calc(100vw - 40px));max-width:none;max-height:min(88dvh,780px);box-sizing:border-box;padding:24px;border:1px solid #25b8d1;border-radius:3px;background:linear-gradient(145deg,#071d2a,#06131d 72%);color:#e6f5fa;box-shadow:0 0 0 4px #020b12d9,0 0 36px #16bfd642,inset 0 0 28px #0d829f21}
body[data-app-state="ROOM_BROWSER"] .room-create-dialog::backdrop {background:#01060cc9;backdrop-filter:blur(5px)}
body[data-app-state="ROOM_BROWSER"] .room-create-dialog>header {display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid #15536b}
body[data-app-state="ROOM_BROWSER"] #room-create-close {width:44px;height:44px;border:1px solid #2c6377;background:#091b25;color:#d6eff5;font-size:27px;line-height:1}
body[data-app-state="ROOM_BROWSER"] .room-create-dialog-copy {margin:13px 0 16px;color:#a9c5d2;font-size:13px;line-height:1.5}
body[data-app-state="ROOM_BROWSER"] #room-create {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"name name" "mode map" "duration ai" "difficulty balance" "submit submit";gap:12px 14px;margin:0;padding:0;border:0;background:none;box-shadow:none}
body[data-app-state="ROOM_BROWSER"] #room-create .room-name-field {grid-area:name}
body[data-app-state="ROOM_BROWSER"] #room-create .room-mode-field {grid-area:mode}
body[data-app-state="ROOM_BROWSER"] #room-create .room-map-field {grid-area:map}
body[data-app-state="ROOM_BROWSER"] #room-create .room-duration-field {grid-area:duration}
body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-fill-field {grid-area:ai}
body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-level-field {grid-area:difficulty}
body[data-app-state="ROOM_BROWSER"] #room-create .room-team-balance-field {grid-area:balance}
body[data-app-state="ROOM_BROWSER"] #room-create label {display:grid;align-content:start;gap:6px;min-width:0;margin:0;color:#a9c8d5;font-size:12px;font-weight:750}
body[data-app-state="ROOM_BROWSER"] #room-create input:not([type="checkbox"]),body[data-app-state="ROOM_BROWSER"] #room-create select {width:100%;min-width:0;height:44px;box-sizing:border-box;padding:0 11px;border:1px solid #28586c;border-radius:2px;background:#04121c;color:#e5f7fc;font-size:13px}
body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-fill-field {display:flex;align-items:center;gap:9px;min-height:44px;padding-top:21px}
body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-fill-field input {width:20px;height:20px;margin:0;accent-color:#47e0c0}
body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-fill-field span {color:#e3f5f8}
body[data-app-state="ROOM_BROWSER"] #room-create button[type="submit"] {grid-area:submit;min-height:50px;margin-top:4px;border:1px solid #ffe58d;border-radius:2px;background:linear-gradient(180deg,#ffe481,#e9a72e);color:#211600;font-size:14px;font-weight:950;letter-spacing:.04em;text-transform:uppercase}
body[data-app-state="ROOM_BROWSER"] .room-create-dialog:not([open]) {display:none}

@media (max-width:1100px) {
 body[data-app-state="ROOM_BROWSER"] #room-browser {padding:10px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {padding:10px 14px 13px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-header {min-height:56px;gap:14px;padding-bottom:8px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb img {width:52px;height:44px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-ready {min-width:155px;padding:4px 8px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-ready img {width:38px;height:36px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-ready b {font-size:11px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-ready small {font-size:8px}
 body[data-app-state="ROOM_BROWSER"] #rooms-hangar {min-height:44px;padding:0 12px;font-size:12px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-title {padding:12px 5px 10px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns {grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);gap:10px}
 body[data-app-state="ROOM_BROWSER"] .room-directory-toolbar {grid-template-columns:minmax(120px,1fr) auto 40px;gap:8px;min-height:56px;padding:6px 8px}
 body[data-app-state="ROOM_BROWSER"] .room-directory-kind {display:none}
 body[data-app-state="ROOM_BROWSER"] .room-search {height:42px;padding:0 9px}
 body[data-app-state="ROOM_BROWSER"] .room-search input {font-size:12px}
 body[data-app-state="ROOM_BROWSER"] .room-mode-filters {height:40px}
 body[data-app-state="ROOM_BROWSER"] .room-mode-filters button {min-width:47px;padding:0 10px;font-size:11px}
 body[data-app-state="ROOM_BROWSER"] .room-refresh {width:40px;height:40px}
 body[data-app-state="ROOM_BROWSER"] #room-list {gap:7px;padding:7px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card {grid-template-columns:minmax(100px,27%) minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);grid-template-areas:none;gap:9px;min-height:112px;height:auto;max-height:none;padding:7px}
 body[data-app-state="ROOM_BROWSER"] .room-card-art {height:94px}
 body[data-app-state="ROOM_BROWSER"] .room-card-copy {gap:5px}
 body[data-app-state="ROOM_BROWSER"] .room-card-copy h3 {font-size:14px}
 body[data-app-state="ROOM_BROWSER"] .room-card-join {min-width:92px;min-height:48px;padding:0 9px;font-size:12px}
 body[data-app-state="ROOM_BROWSER"] .create-room-panel {padding:12px}
 body[data-app-state="ROOM_BROWSER"] .create-room-summary {margin-top:14px;padding:12px 0}
 body[data-app-state="ROOM_BROWSER"] .create-mode-card {min-height:110px;padding:8px 4px}
 body[data-app-state="ROOM_BROWSER"] .room-size-formation {height:50px}
 body[data-app-state="ROOM_BROWSER"] .room-size-formation img {width:36px;height:48px}
 body[data-app-state="ROOM_BROWSER"] .room-size-formation-large img {width:30px;height:45px}
 body[data-app-state="ROOM_BROWSER"] .create-mode-card b {font-size:15px}
 body[data-app-state="ROOM_BROWSER"] .create-mode-card small {font-size:9px}
 body[data-app-state="ROOM_BROWSER"] .create-room-assist {margin-top:12px;padding:9px}
 body[data-app-state="ROOM_BROWSER"] .assist-on {display:none}
 body[data-app-state="ROOM_BROWSER"] .create-room-cta {min-height:50px;font-size:13px}
}
@media (max-width:900px) {
 body[data-app-state="ROOM_BROWSER"] #room-browser {padding:0;overflow:hidden}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {width:100%;height:100dvh;padding:6px 10px 8px;border:0;border-radius:0}
 body[data-app-state="ROOM_BROWSER"] .room-browser-header {grid-template-columns:minmax(0,1fr) auto;min-height:44px;gap:8px;padding:0 2px 5px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb {gap:8px;font-size:11px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb img {width:42px;height:38px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-ready {display:none}
 body[data-app-state="ROOM_BROWSER"] #rooms-hangar {min-height:44px;padding:0 10px;font-size:10px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-title {padding:6px 3px 7px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-title h1 {font-size:19px;letter-spacing:.075em}
 body[data-app-state="ROOM_BROWSER"] .room-browser-title p {margin-top:2px;font-size:10px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns {display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow:hidden}
 body[data-app-state="ROOM_BROWSER"] .create-room-panel {display:flex;flex:none;min-height:0;padding:0;border:0;background:none;box-shadow:none}
 body[data-app-state="ROOM_BROWSER"] .create-room-panel>div {display:none}
 body[data-app-state="ROOM_BROWSER"] .create-room-cta {width:100%;min-height:44px;margin:0;padding:0 10px;font-size:12px}
 body[data-app-state="ROOM_BROWSER"] .create-room-cta>span:first-child {font-size:22px}
 body[data-app-state="ROOM_BROWSER"] .room-directory {flex:1;min-height:0}
 body[data-app-state="ROOM_BROWSER"] .room-directory-toolbar {grid-template-columns:minmax(0,1fr) auto 44px;gap:6px;min-height:50px;padding:3px 5px}
 body[data-app-state="ROOM_BROWSER"] .room-search {height:44px;gap:5px;padding:0 7px}
 body[data-app-state="ROOM_BROWSER"] .room-search>span {font-size:21px}
 body[data-app-state="ROOM_BROWSER"] .room-search input {font-size:11px}
 body[data-app-state="ROOM_BROWSER"] .room-mode-filters {height:44px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters button {min-width:42px;height:44px;min-height:44px;padding:0 8px;font-size:10px}
 body[data-app-state="ROOM_BROWSER"] .room-refresh {width:44px;height:44px;font-size:24px}
 body[data-app-state="ROOM_BROWSER"] #room-list {gap:5px;padding:5px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card {grid-template-columns:minmax(92px,21%) minmax(0,1fr) 82px;grid-template-rows:minmax(0,1fr);grid-template-areas:none;gap:6px;min-height:70px;height:70px;max-height:70px;box-sizing:border-box;padding:4px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card>.room-card-join {grid-area:auto;grid-column:auto;grid-row:auto;align-self:center;height:44px;min-height:44px}
 body[data-app-state="ROOM_BROWSER"] .room-card-art {height:60px}
 body[data-app-state="ROOM_BROWSER"] .room-card-copy {gap:4px}
 body[data-app-state="ROOM_BROWSER"] .room-card-copy h3 {font-size:12px;line-height:1.05}
 body[data-app-state="ROOM_BROWSER"] .room-card-details {gap:4px}
 body[data-app-state="ROOM_BROWSER"] .room-card-description {display:none}
 body[data-app-state="ROOM_BROWSER"] .room-card-mode,body[data-app-state="ROOM_BROWSER"] .room-card-map {min-height:20px;padding:0 5px;font-size:9px}
 body[data-app-state="ROOM_BROWSER"] .room-card-status {font-size:9px}
 body[data-app-state="ROOM_BROWSER"] .room-card-join {min-width:0;width:100%;min-height:44px;padding:0 5px;font-size:10px}
 body[data-app-state="ROOM_BROWSER"] .room-empty {min-height:130px}
 body[data-app-state="ROOM_BROWSER"] .room-empty p {font-size:12px}
 body[data-app-state="ROOM_BROWSER"] .room-create-dialog {width:calc(100vw - 20px);max-height:calc(100dvh - 20px);margin:auto;padding:16px}
 body[data-app-state="ROOM_BROWSER"] #room-create {gap:9px 10px}
 body[data-app-state="ROOM_BROWSER"] #room-create label {gap:4px;font-size:10px}
 body[data-app-state="ROOM_BROWSER"] #room-create input:not([type="checkbox"]),body[data-app-state="ROOM_BROWSER"] #room-create select {height:40px;font-size:12px}
 body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-fill-field {min-height:40px;padding-top:18px}
 body[data-app-state="ROOM_BROWSER"] #room-create button[type="submit"] {min-height:48px}
}
@media (max-width:600px) and (orientation:portrait) {
 body[data-app-state="ROOM_BROWSER"] .room-browser-header {grid-template-columns:minmax(0,1fr) auto;gap:8px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb {gap:4px;overflow:hidden;font-size:10px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb img {flex:0 0 32px;width:32px;height:32px}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb span,body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb i {flex:none}
 body[data-app-state="ROOM_BROWSER"] .room-browser-breadcrumb b {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 body[data-app-state="ROOM_BROWSER"] #room-browser {overflow-y:auto}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {height:auto;min-height:100dvh;overflow:visible;padding:8px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns {flex:none;overflow:visible}
 body[data-app-state="ROOM_BROWSER"] .room-directory {min-height:440px}
 body[data-app-state="ROOM_BROWSER"] #room-list {overflow:visible}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card {grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:none;height:auto;min-height:116px;max-height:none}
 body[data-app-state="ROOM_BROWSER"] .room-card-art {grid-row:1/3;height:102px}
 body[data-app-state="ROOM_BROWSER"] .room-card-join {grid-column:2;min-height:44px}
 body[data-app-state="ROOM_BROWSER"] .room-directory-toolbar {grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:40px 38px}
 body[data-app-state="ROOM_BROWSER"] .room-search {grid-column:1;height:38px}
 body[data-app-state="ROOM_BROWSER"] .room-mode-filters {grid-column:1;height:36px}
 body[data-app-state="ROOM_BROWSER"] .room-refresh {grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion:reduce) {
 body[data-app-state="ROOM_BROWSER"] .room-card-art img,body[data-app-state="ROOM_BROWSER"] .room-card-join {transition:none}
}
body[data-app-state="PLAY_HOME"] .play-home-actions .quick-play-mode {display:grid;align-content:center;gap:4px;min-width:90px;padding:0 5px;color:#96bfce;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
body[data-app-state="PLAY_HOME"] .quick-play-mode select {width:100%;min-width:90px;height:40px;box-sizing:border-box;padding:0 8px;border:1px solid #267086;border-radius:2px;background:#061a26;color:#e2f8fc;font-size:12px;font-weight:750}
@media (max-width:900px) and (orientation:landscape) {
 body[data-app-state="PLAY_HOME"] .play-home-actions .quick-play-mode {min-width:75px;font-size:8px}
 body[data-app-state="PLAY_HOME"] .quick-play-mode select {min-width:75px;height:44px;font-size:11px}
}
@media (max-width:900px) and (orientation:portrait) {
 body[data-app-state="PLAY_HOME"] .play-home-actions {grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-app-state="PLAY_HOME"] .play-home-actions .quick-play-mode {min-width:0;min-height:44px}
 body[data-app-state="PLAY_HOME"] .quick-play-mode select {min-width:0;height:44px}
}