/* Finished presentation for the existing settlement. No external fonts or UI dependencies. */
:root{--bg:#111817;--bg2:#1b2421;--line:#39443c;--text:#f0eddf;--dim:#b5b9a8;--accent:#d5a361;--accent2:#f3cb8c;--ok:#9db88d;--bad:#ee9684;--r:12px}
body{font-family:Segoe UI,system-ui,sans-serif}
button{min-height:44px;background:linear-gradient(145deg,#2c3630,#1b2421);transition:border-color .15s,background .15s,transform .15s}
button:hover:not(:disabled){background:#344037}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,summary:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
button.primary{background:linear-gradient(135deg,#f0cb91,#bd8c4b);color:#1b211c;box-shadow:0 3px 16px #0003;border-color:#edc58b}
button:disabled{opacity:.6}
.eyebrow{display:block;font-size:10px;letter-spacing:.2em;color:var(--accent2);font-weight:700}
#auth{background:linear-gradient(90deg,#101815eb,#10181565),url('assets/ui/green-hospital.png') center/cover,#1b2421}
.auth-box{width:min(430px,92vw);padding:34px 30px;background:linear-gradient(150deg,#1f2b25f2,#101815f5);border:1px solid #6f78654d;border-radius:18px;box-shadow:0 24px 90px #0008;backdrop-filter:blur(14px)}
.auth-box .eyebrow{text-align:center;margin:0 0 14px;font-size:9px}
.auth-box h1{font-size:36px;letter-spacing:.19em;color:#f1e7d0;text-shadow:0 2px 25px #ecc08926}
.auth-box .sub{margin:7px 0 18px;font-size:17px;color:var(--accent2)}
.auth-story{font-size:13px;line-height:1.7;color:var(--dim);margin:0 0 24px;text-align:center}
input{background:#111a16;border-color:#48544a;min-height:46px;font-size:16px}
label{font-weight:600;font-size:12px;color:#c4c9b9}
.wordmark{font-size:18px;letter-spacing:.18em;font-weight:800;color:#ede6d3;margin-right:24px}
.wordmark small{display:block;font-size:8px;letter-spacing:.16em;color:var(--dim);font-weight:500}
#topbar{background:linear-gradient(120deg,#1c2922,#141e19);gap:16px;padding:calc(12px + var(--safe-t)) 24px 12px;box-shadow:0 3px 18px #0003;border-color:#69715b55}
.res{position:relative;display:grid;grid-template-columns:14px auto;column-gap:7px;row-gap:0;padding:0 12px;border-right:1px solid #58635140}
.res b{font-size:19px;line-height:1.15}
.res small{display:block;grid-column:2;font-size:10px;color:#a5bda1}
.ico.scrap{background:linear-gradient(135deg,#e2b78a,#946746);border-radius:2px;box-shadow:inset 0 0 0 1px #e5c3a355}
.ico.water{background:linear-gradient(135deg,#a2d6db,#498b9d)}
.cap{color:#d1d4c1;font-size:12px}
#topbar button.mini{min-width:42px;min-height:42px;border-color:#5c6b5440}
#sceneTitle{position:absolute;top:24px;left:28px;z-index:2;pointer-events:none;text-shadow:0 2px 12px #000b}
#sceneTitle h2{margin:5px 0 4px;font-size:25px;font-weight:650;letter-spacing:-.025em;color:#f4f0de}
#sceneTitle p{margin:0;font-size:12px;color:#bdc6b6}
#sceneTools{position:absolute;right:24px;bottom:130px;z-index:2;display:flex;flex-direction:column;gap:7px}
#sceneTools button{background:#17251ee6;border-color:#8a987650;font-size:22px;min-width:44px;min-height:44px;box-shadow:0 5px 15px #0003}
#buildingDock{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px;width:min(680px,calc(100% - 40px));z-index:2}
.building-shortcut{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(145deg,#223127ed,#152019f5);padding:10px 12px;border-color:#83927355;box-shadow:0 8px 20px #0005}
.building-shortcut img{width:48px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 3px #0006)}
.building-shortcut strong{display:block;font-size:12px;font-weight:650;line-height:1.3}
.building-shortcut small{display:block;font-size:10px;color:var(--dim);margin-top:3px}
.building-shortcut.on{border-color:var(--accent);background:#334331f5}
#stage:has(#interior:not([hidden])) #sceneTitle,#stage:has(#interior:not([hidden])) #sceneTools,#stage:has(#interior:not([hidden])) #buildingDock{display:none}
#game:has(#panel:not([hidden])) #buildingDock{display:none}
#game:has(#panel:not([hidden])) #sceneTools{bottom:auto;top:100px}
#hint{bottom:104px;left:28px;font-size:11px;color:#cad2bf}
#tabs{background:linear-gradient(#1d2b22,#152019);border-color:#82937145;padding:6px 16px calc(6px + var(--safe-b));gap:5px}
#tabs button{min-height:54px;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:600}
#tabs button.on{color:#f6d9a8;background:linear-gradient(130deg,#394638,#28332a);box-shadow:inset 0 0 0 1px #b9996140}
.nav-icon{display:block;font-size:20px;line-height:1.15;margin-bottom:2px;color:#b7c4aa}
#tabs button.on .nav-icon{color:var(--accent2)}
#expDot{top:6px;right:25%;box-shadow:0 0 10px #a7c484}
#panel{bottom:calc(72px + var(--safe-b));background:linear-gradient(140deg,#243026fa,#131d17fc);border:1px solid #83937360;border-top-color:#dab57a;border-radius:18px 18px 0 0;box-shadow:0 -12px 50px #0007;padding:20px;scrollbar-width:thin;scrollbar-color:#58684c #162019}
#panelBody{padding-right:0}
#panelBody>h2{padding-right:42px;line-height:1.35;font-size:22px;margin-bottom:10px;font-weight:650}
#panelClose{top:8px;right:8px;border-color:transparent;background:#26382be6}
#panelBody p{line-height:1.55;color:#bdc8b5;font-size:13px}
.card{background:linear-gradient(140deg,#2c392dd9,#18231bd9);border-color:#75836540;border-radius:12px;padding:15px;margin-bottom:12px}
.card h3{font-size:15px;line-height:1.4}
.tag{background:#48523d70;color:#d5dbc6;border:1px solid #94a17d22;padding:3px 9px;margin:2px 5px 2px 0}
.cost{flex-wrap:wrap;gap:8px}
.cost span{padding:4px 8px;background:#101c164d;border:1px solid #79856a30;border-radius:6px;font-size:12px}
.card .primary{width:100%;margin-top:6px}
.panel-illustration{height:155px;margin:-20px -20px 18px;position:relative;overflow:hidden;border-radius:17px 17px 0 0;background:#283b2f}
.panel-illustration img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.panel-illustration:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#243026)}
.panel-illustration .eyebrow{position:absolute;left:20px;bottom:17px;z-index:1;text-shadow:0 1px 6px #000}
.building-portrait{float:left;width:88px;height:96px;object-fit:contain;margin:0 12px 8px 0;filter:drop-shadow(0 4px 8px #0005)}
.building-card-head{min-height:100px;padding-right:34px}
.building-card-head h2{font-size:20px;margin:10px 0 5px;color:var(--accent2)}
.building-card-head .tag{font-size:10px}
.risks{grid-template-columns:1fr;gap:10px}
.risks button{position:relative;padding:13px 14px;border-color:#74826650;background:linear-gradient(110deg,#2c3c2e,#1d2c21);font-size:12px;line-height:1.7}
.risks button b{color:#f0e7d2;font-size:15px}
.risks button[data-risk="ryzykowny"]{border-color:#bc816257}
.risks button[data-risk="ostrozny"]{border-color:#86aa7357}
.empty-state{text-align:center;padding:30px 10px;color:var(--dim)}
.empty-state .nav-icon{font-size:36px;color:var(--accent);margin-bottom:15px}
#queueBar{background:#273025;border-color:#7a80514a;flex-wrap:wrap;padding:10px 16px}
#queueBar .bar i{background:linear-gradient(90deg,#94753e,#e9c881)}
#queueBar .bar{min-width:60px}
#toast{background:#25362cf5;box-shadow:0 5px 24px #0005;top:calc(90px + var(--safe-t));font-size:13px}
#intPanel{background:linear-gradient(140deg,#243026fa,#131d17fc);border-color:#83937360;border-radius:16px 16px 0 0}
#intHead{background:linear-gradient(#17241ef2,#17241e00);padding:14px}
.opts button,.seg button{background:#25382b;border-color:#63785450}
.opts button.cur,.seg button.cur{background:#3b4c34;border-color:var(--accent)}
@media(min-width:900px){#panel{right:24px;width:430px;bottom:94px;max-height:calc(100% - 180px);border-radius:18px}#tabs{justify-content:center}#tabs button{max-width:180px}#game:has(#panel:not([hidden])) #sceneTools{right:474px}#intPanel{border-radius:16px}}
@media(max-width:899px){.wordmark{display:none}#topbar{padding:calc(10px + var(--safe-t)) 12px 10px;gap:9px}.res{padding:0 8px 0 0}.res b{font-size:18px}.res small{display:block;font-size:9px}.cap{font-size:10px;max-width:66px;text-align:right}#topbar button.mini{min-width:36px;min-height:42px;padding:5px 7px}#sceneTitle{top:20px;left:18px}#sceneTitle h2{font-size:22px}.eyebrow{font-size:9px}#sceneTools{right:12px;bottom:122px;gap:5px}#sceneTools button{min-width:38px;min-height:40px;font-size:19px}#buildingDock{bottom:17px;gap:6px;width:calc(100% - 24px)}.building-shortcut{flex-direction:column;gap:2px;padding:7px 4px;text-align:center}.building-shortcut img{width:42px;height:46px}.building-shortcut strong{font-size:10px}.building-shortcut small{font-size:9px}#tabs{padding-left:8px;padding-right:8px}#panel{max-height:64%;padding:17px}#panel.sel{max-height:49%;padding:17px}#panel.sel .card{padding:12px}#panel.sel .cost{margin:7px 0}.panel-illustration{margin:-17px -17px 15px;height:135px}#panelBody>h2{font-size:20px}.building-card-head{min-height:94px}.building-card-head h2{font-size:17px;margin:5px 0}.building-portrait{width:80px;height:88px}#hint{display:none}.auth-box{padding:28px 24px}.auth-box h1{font-size:31px}}
@media(max-width:359px){#topbar{gap:5px;padding-left:8px;padding-right:8px}.res b{font-size:16px}.res{column-gap:4px}.cap{max-width:55px}#topbar button.mini{min-width:30px;padding:5px}.building-shortcut strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){button,#toast{transition:none}}
#game:has(#panel:not([hidden])) #sceneTitle{display:none}

/* Photo scenes are the default presentation; the original 3D view remains an optional view. */
#photoScene{position:absolute;inset:0 0 var(--photo-inset,0px);overflow:hidden;background:#111814;z-index:1}
#photoImage{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 56%;transform:scale(var(--photo-zoom,1));transition:transform .45s,opacity .3s}
#photoScene.building-scene #photoImage{object-fit:contain;object-position:center}
.photo-shade{position:absolute;inset:0;background:linear-gradient(#06110dcc,transparent 28%,transparent 65%,#08130ee6);pointer-events:none}
#photoCaption{position:absolute;left:28px;bottom:118px;color:#ece6d6;font-size:11px;letter-spacing:.02em;text-shadow:0 2px 5px #000}
#photoScene.building-scene #photoCaption{bottom:12px;left:18px;padding:5px 10px;background:#0b151bb3;border-radius:5px}
#photoMarkers{position:absolute;inset:0;pointer-events:none}
#photoMarkers button{position:absolute;top:63%;transform:translate(-50%,-50%);padding:8px 14px;min-width:100px;background:#121b16dd;border-color:#c1cbb659;box-shadow:0 4px 12px #0004;pointer-events:auto}
#photoMarkers button[data-photo-building="oczyszczalnia"]{left:20%}
#photoMarkers button[data-photo-building="schron"]{left:50%;top:61%}
#photoMarkers button[data-photo-building="zlomowisko"]{left:80%}
#photoMarkers b{display:block;font-size:12px}
#photoMarkers small{display:block;color:#c3ccb7;font-size:10px;margin-top:2px}
#photoMarkers button.unbuilt{border-style:dashed}
#photoScene.loading:after{content:'Przygotowywanie widoku…';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;background:#121b16de;border:1px solid #687561;padding:8px 14px;border-radius:6px}
#sceneTitle,#sceneTools,#buildingDock{z-index:2}
.building-shortcut{padding:7px;display:grid;grid-template-columns:70px auto;gap:10px;background:#101a15ed;border-color:#9daf8147}
.building-shortcut img{width:70px;height:56px;object-fit:cover;border-radius:6px;filter:none}
.photographic-head{min-height:0;margin-bottom:12px}
.photographic-head h2{margin:5px 0}
#panel.sel .photographic-head p{margin-top:8px}
@media(max-width:899px){
  #photoMarkers{display:none}
  #photoCaption{left:18px;bottom:136px;max-width:calc(100% - 68px);font-size:10px}
  .building-shortcut{display:flex;flex-direction:column;gap:5px;padding:6px 5px}
  .building-shortcut img{width:100%;height:55px;border-radius:5px}
  #buildingDock{bottom:16px}
  #sceneTools{bottom:156px}
  #photoScene.building-scene #photoCaption{bottom:6px;font-size:10px}
  .photo-shade{background:linear-gradient(#06110dbb,transparent 25%,transparent 62%,#08130ee8)}
}
@media(prefers-reduced-motion:reduce){#photoImage{transition:none}}
/* Keep the building photograph large while showing the actual actions. */
#photoScene{touch-action:none}
#photoImage{transform:translate(var(--photo-pan-x,0px),var(--photo-pan-y,0px)) scale(var(--photo-zoom,1))}
#photoScene.building-scene #photoImage{object-fit:cover}
@media(max-width:899px){#panel.sel{max-height:39%}}
@media(min-width:900px){#game:has(#panel.sel:not([hidden])) #photoScene{right:466px}}
@media(min-width:560px) and (max-height:650px){
 #panel.sel{left:auto;right:10px;width:46%;top:82px;bottom:76px;max-height:none;border-radius:14px}
 #game:has(#panel.sel:not([hidden])) #photoScene{right:48%;bottom:0}
 #game:has(#panel.sel:not([hidden])) #sceneTools{right:49%;top:90px}
 #photoScene.building-scene #photoImage{object-fit:contain}
}
/* Approved layered 2.5D canvas keeps the complete settlement visible on selection. */
#photoView{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#photoView:active{cursor:grabbing}
#photoMarkers button.on{border-color:#e5dfbe;color:#f2ebd0}
#game:has(#panel:not([hidden])) #photoCaption{bottom:8px;left:14px;font-size:10px;padding:4px 8px;background:#142017c9;border-radius:4px;pointer-events:none}
@media(min-width:900px){#game:has(#panel.sel:not([hidden])) #photoScene{right:466px;bottom:0}}
.guild-order button:disabled,.guild-expedition button:disabled{opacity:.45;filter:grayscale(.7);cursor:not-allowed}.guild-order ul,.guild-expedition ul{padding-left:18px}.guild-order details,.guild-expedition details{margin:8px 0}

/* R-A: ostrzeżenie o prognozowanym przecięciu chmury pyłu w wycenie drogi */
.threat-warn { border-left: 3px solid #c9a227; padding: 4px 8px; background: rgba(201,162,39,.12); }