/* ============================================================
   feat/doradca: okienko doradcy (w kolumnie powiadomień), napis przy kursorze przy stawianiu budynku,
   analiza po grze, okno powitalne. Ładowany po css/ux.css.
   ============================================================ */

/* ---------- doradca (js/doradca.js) ---------- */
#alerts .alert.nt.dor { display: block; width: 300px; padding: 5px 9px 6px 10px; border-left: 3px solid #7fb4e0; background: linear-gradient(#232a30ee, #171b1fee);
  color: var(--text); font-size: 13px; cursor: default; }
#alerts .alert.nt.dor.dor-act { cursor: pointer; }
#alerts .alert.nt.dor:hover { border-color: #7fb4e0; }
#alerts .dor-head { display: flex; align-items: center; gap: 5px; color: #9cc8ee; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
#alerts .dor-head span { flex: 1; }
#alerts .dor-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 1px 2px; line-height: 0; }
#alerts .dor-x:hover { color: var(--text); }
#alerts .dor-text { line-height: 1.3; }
#alerts .dor-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 11px; }
#alerts .dor-go { color: var(--gold); }
#alerts .dor-off { color: var(--muted); text-decoration: underline; cursor: pointer; }
#alerts .dor-off:hover { color: var(--text); }
.hint a.link, a.link { color: var(--gold); cursor: pointer; text-decoration: underline; }

/* ---------- czytelność: napis przy kursorze (js/czytelnosc.js) ---------- */
#curTip { position: absolute; z-index: 7; pointer-events: none; padding: 2px 7px; line-height: 1.3; border-radius: 3px;
  background: rgba(16, 13, 10, 0.86); border: 1px solid #5a4a32; color: var(--text); white-space: nowrap; font-size: calc(12px * var(--ui-scale, 1)); }
#curTip.bad { border-color: #b8483c; color: #ffc6bc; }
#curTip.ok { border-color: #4f8a3c; color: #d6f2c8; }
#curTip.warn { border-color: #c89a3a; color: #ffe2a8; }
#curTip.hidden { display: none; }

/* ---------- analiza po grze (js/analiza.js) ---------- */
.an-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 4px 0 12px; }
.an-col h4 { margin: 0 0 4px; font-size: 14px; }
.an-col.good h4 { color: #8fd27a; }
.an-col.bad h4 { color: #f0a090; }
.an-col ul { margin: 0; padding-left: 18px; }
.an-col li { margin: 3px 0; line-height: 1.3; font-size: 13px; }
.an-col .muted { font-size: 12px; }
.an-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 10px; }
.an-chart .st-chart-head { margin: 2px 0; font-size: 13px; }
@media (max-width: 900px) { .an-box, .an-charts { grid-template-columns: 1fr; } }

/* ---------- okno powitalne (js/powitanie.js) ---------- */
#welcome .menu-box { max-width: 560px; }
#welcome h2 { margin-bottom: 4px; }
#welcome .wl-sub { text-align: center; color: var(--muted); margin: 0 0 14px; }
.wl-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; margin: 0 0 8px; box-sizing: border-box; }
.wl-opt svg { flex: none; color: var(--gold); }
.wl-opt b { display: block; font-size: 16px; margin-bottom: 2px; }
.wl-opt small { color: var(--muted); font-size: 12px; }
.wl-opt.main { border-color: var(--gold); box-shadow: 0 0 10px #d8b45a33; }
.wl-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
.wl-foot a { color: var(--muted); cursor: pointer; text-decoration: underline; }
.wl-foot a:hover { color: var(--text); }