/* Gece Yarısı Salonu — lobi ve bağlantı ayarları. */
#hud:has(#overlay:not(.hidden), #settings:not(.hidden)) { z-index:90; }
body:has(#overlay:not(.hidden), #settings:not(.hidden)) #y-kartlar,
body:has(#overlay:not(.hidden), #settings:not(.hidden)) #yayin,
body:has(#overlay:not(.hidden), #settings:not(.hidden)) #watch-strip { visibility:hidden; pointer-events:none; }
#overlay { position:fixed; padding:28px; z-index:75; background:rgba(7,13,13,.68); backdrop-filter:blur(12px); overflow:auto; }
#overlay .lobby { display:grid; grid-template-columns:300px minmax(0,1fr); width:1160px; max-width:100%; padding:0; max-height:calc(100dvh - 56px); border:1px solid #726449; border-radius:16px; background:#151e1d; text-align:left; font-family:'IBM Plex Sans',sans-serif; color:#f2eee5; box-shadow:0 28px 100px #0009; }
.lobby button { font-family:inherit; cursor:pointer; transition:background .16s,border-color .16s,transform .16s; }
.lobby button:focus-visible { outline:2px solid #f2eee5; outline-offset:3px; }
.lobby-brand { padding:34px 30px 24px; display:flex; flex-direction:column; background:radial-gradient(ellipse at 60% 50%,#24534550,transparent 65%),#102a23; border-right:1px solid #b99b6233; position:relative; overflow:hidden; }
.lb-wordmark { font:600 17px 'IBM Plex Sans',sans-serif; letter-spacing:2px; color:#dfcc9e; }
.lb-wordmark>span { font:26px Georgia,serif; margin-right:5px; }
.lb-wordmark small { display:block; margin:3px 0 0 31px; font-size:10px; letter-spacing:6px; color:#c0c9be; }
.lb-invitation { margin-top:54px; }
.lb-eyebrow { font-size:10px; letter-spacing:2px; font-weight:600; color:#beaa7e; }
#overlay .lobby h1 { font:normal 43px/1.12 Georgia,serif; letter-spacing:-1.5px; color:#f2eee5; text-shadow:none; margin:15px 0; }
#overlay .lobby h1 em { color:#d9c38e; font-weight:400; }
.lb-invitation p { font-size:14px; line-height:1.7; color:#becbc3; }
.lb-table-art { position:relative; height:132px; margin:34px 0 28px; }
.lb-felt { position:absolute; width:206px; height:106px; left:50%; top:0; transform:translateX(-50%); border:8px solid #463c2d; outline:1px solid #b99b6255; border-radius:12px 12px 110px 110px; background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 22px,#b99b6210 23px 24px),#1d493b; display:grid; place-items:center; color:#c7b583; font:32px Georgia,serif; box-shadow:0 16px 26px #0003,inset 0 0 0 1px #b99b6244; }
.lb-table-art i { position:absolute; width:23px;height:23px;background:#14241e;border:1px solid #9a865e;border-radius:50%;box-shadow:inset 0 0 0 4px #1c342a;top:63px;left:0; }
.lb-table-art i:nth-of-type(2) { left:35px;top:99px; }.lb-table-art i:nth-of-type(3) { left:calc(50% - 11px);top:112px; }.lb-table-art i:nth-of-type(4) { left:auto;right:35px;top:99px; }.lb-table-art i:nth-of-type(5) { left:auto;right:0; }
.lb-selection { margin-top:auto; padding:22px 0; border-top:1px solid #c6b17a30; }
.lb-selection>span { display:block;font-size:10px;letter-spacing:1.8px;color:#a9bdb1; }
.lb-selection strong { display:block;font:27px Georgia,serif;margin:8px 0;color:#f2eee5; }
.lb-selection p { font-size:13px;line-height:1.6;color:#becbc3; }
.lb-brand-foot { display:flex;gap:15px;font-size:9px;letter-spacing:1px;color:#8fa99b; }
.lobby-content { min-width:0;padding:30px 32px 24px; }
.lb-header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px; }
#overlay .lb-header h2 { font-size:25px;letter-spacing:-.4px;color:#f2eee5;font-weight:500;margin:5px 0 0; }
#lobby-close { min-height:44px; padding:0 12px; display:flex;gap:16px;align-items:center; border:1px solid #657169; background:transparent; color:#e5e8df; border-radius:6px;font-size:13px; }
#lobby-close:hover { background:#26332e; }
.lb-section { margin:0 0 25px; }
.lb-section-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px; }
.lb-section-head h3 { font-size:16px;font-weight:500;margin:0; }
.lb-section-head h3>span { font-size:11px;margin-right:10px;color:#bca774; }
.lb-section-head>span,.lb-section-head>small { font-size:12px;color:#b8c3bc; }
#overlay #game-cards { gap:10px;grid-template-columns:repeat(4,minmax(0,1fr)); }
#overlay .game-card { position:relative;min-width:0;padding:12px 10px 15px;border:1px solid #45534c;border-radius:8px;background:#1b2723;color:#f2eee5;text-align:left;box-shadow:none; }
#overlay .game-card:hover { background:#273b31;transform:translateY(-2px);border-color:#a28e60; }
#overlay .game-card.sel { border-color:#d9c38e;background:#263c31;box-shadow:inset 0 0 0 1px #d9c38e22; }
.gc-art { width:100%;height:68px;margin-bottom:8px; }.gc-art svg { width:100%;height:100%; }
#overlay .game-card b { font-size:16px;font-weight:500;margin-bottom:6px; }
#overlay .game-card small { font-size:12px;line-height:1.45;color:#bac7be;opacity:1; }
.gc-check { position:absolute;right:8px;top:6px;font-size:13px;color:#dfcc9e;opacity:0; }.sel .gc-check { opacity:1; }
#overlay #lineup-chips { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px; }
#overlay .lu-chip { position:relative;min-width:0;min-height:116px;padding:11px 10px 10px;border:1px solid #435149;background:#1b2522;border-radius:8px;text-align:left;opacity:1; }
#overlay .lu-chip:hover { background:#2a3830;border-color:#8d9d8e; }
#overlay .lu-chip.sel { border-color:#b99b62;background:#2d3429;box-shadow:inset 0 2px 0 #b99b62; }
.lu-mark { display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff0c;border:1px solid color-mix(in srgb,var(--c) 45%,#a9b2a9);font-size:11px;font-weight:600;letter-spacing:.5px;color:#eee9d9;margin-bottom:9px; }
.lu-check { position:absolute;right:9px;top:10px;color:#d9c38e;font-size:12px;opacity:0; }.sel .lu-check { opacity:1; }
#overlay .lu-chip b { font-size:15px;line-height:20px;font-weight:500;color:#f2eee5;white-space:normal;overflow:visible; }
#overlay .lu-chip small { font-size:11px;line-height:1.4;margin-top:3px;opacity:1;color:#b9c5bb;white-space:normal;overflow:visible; }
.lb-roster-note { font-size:12px;line-height:1.5;color:#b9c5bb;margin-top:10px;min-height:18px; }
.lb-launch { border-top:1px solid #46554a;padding-top:14px; }
.lb-connection { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#bbc6bd;margin-bottom:9px; }
#lobby-connection { display:flex;align-items:center;gap:7px; }
#lobby-connection::before { content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#ac9e7c;flex-shrink:0; }
#lobby-connection.ready::before { background:#9ed1ac; }
#btn-open-settings { min-height:44px;border:0;background:none;color:#d3c69f;font-size:12px;padding:0 4px; }
#overlay .ov-btns { justify-content:stretch;flex-wrap:nowrap;gap:12px;margin:0; }
#overlay .ov-btns button { min-height:52px;padding:12px 20px;font-size:15px;border-radius:7px;box-shadow:none; }
#overlay #btn-start-demo { flex:1;background:#1c2924;border-color:#657668;color:#eee9dc; }
#overlay #btn-start-llm { flex:1.65;background:#d6bd82;color:#17231c;border:1px solid #d6bd82;display:flex;align-items:center;justify-content:space-between;font-weight:600; }
#overlay #btn-start-llm:hover { background:#e5ce9b; }
#overlay .ov-btns button:disabled { opacity:.4;cursor:not-allowed;transform:none; }
#btn-world { display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 0 0;background:transparent;border:0;color:#b9c5bb;font-size:12px;text-align:left; }
#btn-world span { color:#e0d0a6;white-space:nowrap; }
/* Ayarlar da aynı tipografi ve alan düzenini kullanır. */
#settings { position:fixed;z-index:85;padding:24px;background:#08110deb; }
#settings .ov-card.wide { font-family:'IBM Plex Sans',sans-serif;max-width:920px;background:#15241d;border-color:#8b7950;text-align:left; }
#settings input,#settings select,#settings button { min-height:44px; }
#settings .row>label { min-width:220px;color:#d3dccf;opacity:1;font-size:13px; }
#settings .hint { opacity:1;color:#b9c5bb;font-size:13px; }
@media(max-width:1000px) { #overlay .lobby { grid-template-columns:240px minmax(0,1fr); }.lobby-brand { padding:28px 22px; }.lobby-content { padding:26px 24px; }#overlay .lobby h1 { font-size:36px; }#overlay #game-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }#overlay #lineup-chips { grid-template-columns:repeat(3,minmax(0,1fr)); }.lb-table-art { transform:scale(.8); } }
@media(max-width:700px) { #overlay { padding:12px;align-items:flex-start; }#overlay .lobby { display:block;max-height:none;width:100%;border-radius:12px; }.lobby-brand { border-right:0;border-bottom:1px solid #b99b6240;padding:24px; }.lb-invitation { margin-top:22px; }#overlay .lobby h1 { font-size:36px;margin:10px 0; }.lb-invitation p { font-size:13px; }.lb-table-art,.lb-selection,.lb-brand-foot { display:none; }.lobby-content { padding:24px 18px 18px; }.lb-header { margin-bottom:24px; }#overlay .lb-header h2 { font-size:21px; }#lobby-close { padding:0 9px;gap:8px;font-size:12px; }#overlay #lineup-chips { grid-template-columns:repeat(2,minmax(0,1fr)); }#overlay .lu-chip { min-height:108px; }.lb-connection { flex-wrap:wrap;gap:0; }#overlay .ov-btns { flex-direction:column-reverse;gap:8px; }#overlay .ov-btns button { flex:auto!important; }#btn-world { flex-wrap:wrap;gap:4px; }.lb-section-head>span { display:none; }#settings { padding:12px; }#settings .ov-card.wide { width:100%;padding:22px 16px; }#settings .row { flex-wrap:wrap; }#settings .row>label { min-width:100%; }#settings .seat-cfg { display:grid;grid-template-columns:1fr 1fr; }#settings .seat-cfg input[type=text] { grid-column:1/-1;width:100%; }#settings .seat-cfg select { width:100%; }.lb-invitation p br { display:none; } }
@media(prefers-reduced-motion:reduce) { .lobby button { transition:none; }#overlay .game-card:hover { transform:none; } }