/* Szczelina — zatwierdzony ekran osady, filmowy HUD 2.5D. */
:root{--bg:#090d10;--bg2:#0d1217;--line:#46505a;--text:#ece9e0;--dim:#b7b8b7;--accent:#d89938;--accent2:#ffc06b}
#game{background:#080b0e}
#topbar{min-height:65px;gap:clamp(8px,1.4vw,24px);padding:calc(8px + var(--safe-t)) 18px 8px;background:linear-gradient(180deg,rgba(5,9,13,.98),rgba(9,13,17,.94));border-bottom:1px solid #66717a;box-shadow:0 5px 22px #0009}
#topbar .wordmark{font-family:Georgia,serif;font-size:clamp(18px,2.2vw,31px);letter-spacing:.15em;font-weight:900;color:#e4e2da;text-shadow:0 2px 5px #000}
#topbar .wordmark small{display:block;font:9px system-ui;letter-spacing:.22em;color:#b6a88f}
#topbar .res{padding:6px 10px;background:#0d1419a6;border:1px solid #58616a55;border-radius:4px;gap:9px}
#topbar .res b{font-size:clamp(13px,1.2vw,18px);color:#eee8dc}
#topbar .cap{color:#e1d5bd;font-weight:600}
#stage{background:#111b22;isolation:isolate}
#stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#05090d40,transparent 25%,transparent 75%,#03080c4a),linear-gradient(0deg,#05090d55,transparent 18%);box-shadow:inset 0 0 85px #02050980}
#sceneTitle{background:linear-gradient(90deg,#090d10d9,transparent)!important;filter:drop-shadow(0 2px 4px #000);border-left:3px solid #e3a64b;padding-left:12px!important}
#sceneTitle h2{font-family:Georgia,serif;letter-spacing:.06em;color:#f3e6cf}
#environmentBar{border:1px solid #75838c!important;background:linear-gradient(135deg,#101d26ee,#080d12ef)!important;color:#e4ebec!important;box-shadow:0 5px 18px #0009}
#sceneTools button{background:#0a1018db;border:1px solid #65727c;color:#f0e8d8;box-shadow:0 3px 12px #0009}
#buildingDock{background:linear-gradient(0deg,#080b10eb,#0c1219b9)!important;border:1px solid #58616b99!important;box-shadow:0 5px 22px #000a!important}
#buildingDock button{background:linear-gradient(#1c252bb8,#0a1017c9);border-color:#56606b}
#buildingDock button:hover{border-color:#e9a746}
#tabs{min-height:72px;background:linear-gradient(180deg,#090c10ed,#06090cee);border-top:1px solid #69717a;box-shadow:0 -8px 24px #0009}
#tabs button{font-size:13px;font-weight:600;letter-spacing:.025em;border-right:1px solid #4b545d77;text-shadow:0 2px 4px #000;padding:10px 5px}
#tabs button.on{background:linear-gradient(#ba751b5e,#4b300e4d);box-shadow:inset 0 2px 0 #f4b75b;color:#ffd28d}
#tabs .nav-icon{font-size:23px;display:block;line-height:1.4}
#panel{background:linear-gradient(155deg,rgba(14,20,26,.98),rgba(5,9,13,.98));border-color:#7c6745;box-shadow:0 10px 40px #000d;color:#e9e5db}
#panelBody h2{font-family:Georgia,serif;font-size:22px;color:#f4ede1}
#panel .card{background:linear-gradient(145deg,#1a2229,#0a1015);border-color:#45525d}
#panel .primary{background:linear-gradient(#f5b85b,#c67b20);border:1px solid #ffce80;color:#191008;box-shadow:inset 0 1px #fff5,0 2px 12px #0008}
#panelClose{color:#f4ba64;background:#161d24;border-color:#77654b}
#objectiveBar{background:#0a1016df!important;border:1px solid #7b6a4b!important}
#queueBar{background:#12181e;border-color:#6d5434}
@media(min-width:900px){#panel{top:14px;bottom:14px;right:16px;width:min(365px,29vw);max-height:none;border:1px solid #7c6745;border-radius:4px;padding:18px 15px}#panelBody{padding-right:28px}#panelClose{top:7px;right:7px}}
@media(max-width:899px){#topbar{min-height:54px;padding-left:8px;padding-right:8px;gap:5px}#topbar .wordmark{font-size:16px}#topbar .wordmark small{display:none}#topbar .res{padding:4px 5px;gap:4px}#topbar .res b{font-size:12px}#tabs{min-height:57px}#tabs .nav-icon{font-size:18px}#tabs button{font-size:11px;padding:6px 2px}#panel{z-index:5}}
@media(prefers-reduced-motion:reduce){#tabs button,#panel button{transition:none}}

/* Menu z wizji: ciemne pionowe pole z ikonami i złotym akcentem. */
#visionSidebar{position:absolute;top:24px;left:0;z-index:3;width:154px;display:flex;flex-direction:column;background:linear-gradient(90deg,#080d12eb,#080d12b8 78%,transparent);border-top:1px solid #58636a77;border-bottom:1px solid #58636a77;box-shadow:8px 8px 28px #0007}
#visionSidebar button{width:100%;display:flex;align-items:center;gap:13px;min-height:51px;padding:9px 12px;background:transparent;border:0;border-bottom:1px solid #66717a48;border-radius:0;text-align:left;font-size:12px;font-weight:600;color:#e6e6e3;text-shadow:0 1px 3px #000}
#visionSidebar button span{width:29px;text-align:center;font-size:24px;color:#e4e7e5;line-height:1}
#visionSidebar button:hover,#visionSidebar button:focus-visible{background:#aa712b4a;outline:1px solid #bd914b}
#visionSidebar button:first-child{border-left:2px solid #e5a044}
#visionSidebar button:first-child span{color:#f2b55d}
#visionSidebar button:last-child{border-bottom:0}
@media(max-width:899px){#visionSidebar{top:72px;width:48px;background:#080d12d9}#visionSidebar button{padding:6px 8px;min-height:43px;justify-content:center;gap:0;font-size:0}#visionSidebar button span{font-size:21px;width:30px}#sceneTitle{max-width:calc(100% - 62px)}}
@media(max-width:520px){#visionSidebar{top:108px}#visionSidebar button{min-height:39px}}

/* Podgląd prawdziwych grafik budynków i pięciu poziomów rozwoju. */
.vision-building-preview{margin:10px 0 14px;padding:9px;background:radial-gradient(ellipse at 50% 60%,#27343b,#0b1015 76%);border:1px solid #46525d;border-radius:5px}
.vision-building-preview>img{display:block;object-fit:contain;width:100%;height:clamp(125px,19vh,205px);filter:drop-shadow(0 8px 10px #000a)}
.vision-level-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:7px}
.vision-level{min-width:0;border:1px solid #4b5359;background:#0b1116;border-radius:4px;text-align:center;padding:3px 1px}
.vision-level.active{border-color:#f1b65b;box-shadow:inset 0 0 0 1px #bb812f,0 0 8px #dc8f2955;background:#322516}
.vision-level img{width:100%;height:47px;object-fit:contain;display:block}
.vision-level small{font-size:11px;color:#d7d4cd;font-weight:700}
.vision-level.active small{color:#ffcd7c}
@media(max-width:899px){.vision-building-preview>img{height:105px}.vision-level img{height:36px}}

/* Tabliczki budynków z zatwierdzonego kadru: czarne, prostokątne,
   dwie linie tekstu i złoty numer poziomu zamiast jasnych dymków. */
#photoMarkers button{background:linear-gradient(90deg,rgba(4,7,9,.95),rgba(7,10,12,.86));border:1px solid rgba(161,167,161,.24);border-radius:2px;min-width:110px;padding:6px 10px;box-shadow:0 3px 13px #000b;text-align:left;white-space:nowrap}
#photoMarkers button b{font-size:13px;color:#f0eee9;font-weight:700}
#photoMarkers button small{font-size:12px;color:#f1b95c;font-weight:600;margin-top:1px}
#photoMarkers button.on{border-color:#f4b957;box-shadow:0 0 0 1px #c98d36,0 3px 18px #000b}
#photoMarkers button.unbuilt{border-style:solid;opacity:.83}
@media(max-width:899px){#photoMarkers{display:none}}

/* Pełnoekranowa sceneria: naprawa dużej pustej strefy widocznej na desktopie. */
#photoScene{left:0!important;right:0!important;top:0!important;bottom:var(--photo-inset,0px)!important;width:100%!important}
#photoView{position:absolute;inset:0;width:100%;height:100%;display:block}
#sceneTitle{left:clamp(72px,13vw,174px)!important;top:20px!important;width:auto;max-width:min(370px,35vw);background:linear-gradient(90deg,#080d12a8,#080d1266 78%,transparent)!important;padding:10px 18px!important;border-left:2px solid #d6a157;pointer-events:none}
#sceneTitle h2{font-size:clamp(18px,1.8vw,26px);line-height:1.12}
#environmentBar{position:absolute;left:clamp(72px,13vw,174px)!important;top:126px!important;max-width:280px;white-space:normal;z-index:4}
#objectiveBar{position:absolute;left:clamp(72px,13vw,174px)!important;top:178px!important;max-width:300px;z-index:4}
#visionSidebar{z-index:5}
#photoCaption{left:clamp(72px,13vw,174px)!important;bottom:105px!important;background:#081017aa;padding:4px 9px;border-radius:3px}
@media(min-width:900px){#game:has(#panel.sel:not([hidden])) #photoScene{right:0!important}#game:has(#panel.sel:not([hidden])) #sceneTools{right:390px}}
@media(max-width:899px){#sceneTitle{left:60px!important;top:12px!important;max-width:calc(100% - 130px);padding:5px 8px!important}#sceneTitle h2{font-size:18px}#environmentBar{left:60px!important;top:99px!important;max-width:210px}#objectiveBar{left:60px!important;top:150px!important;max-width:210px}#photoCaption{left:60px!important;bottom:95px!important}}