/* ============================================================
   Nowoczesny interfejs: ekran tytułowy, powtórki, statystyki z wykresami,
   samouczek, podpowiedzi, ustawienia, napisy, skala interfejsu.
   Osobny plik, żeby nie kolidować ze zmianami w style.css.
   ============================================================ */
:root { --ui-scale: 1; }

/* ---------- skala interfejsu (suwak 75-150%, 4K automatycznie) ---------- */
#topbar, #bottom, #groupBar, #alerts, .overlay > .menu-box, .screen > .menu-box, #replayBar, #tutPanel, #hintBox, .title-wrap, .title-foot { zoom: var(--ui-scale); }
#tooltip { font-size: calc(12px * var(--ui-scale)); max-width: calc(280px * var(--ui-scale)); }
#tooltip b { font-size: calc(13px * var(--ui-scale)); }

/* ---------- tło menu: scena z gry ---------- */
#menuBg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse at center, #3a3020 0%, #15130f 70%); }
#menuBg.ready { opacity: 1; }
#menu, .menu-screen, #title { background: transparent; }
#menu::before, .menu-screen::before, #title::before { content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(21,19,15,0.35) 0%, rgba(21,19,15,0.82) 75%); }
#menu > .menu-box, .menu-screen > .menu-box { position: relative; background: linear-gradient(rgba(47,40,30,0.94), rgba(34,29,22,0.95)); }
.menu-screen { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; }
.menu-screen > .menu-box { margin: auto; }   /* środkowanie bez ucinania góry: przy align-items: center początek wysokiego okna (ustawienia na 768 px) był nieosiągalny */

/* ---------- ekran tytułowy ---------- */
#title { display: flex; align-items: center; justify-content: flex-start; padding-left: max(24px, 7vw); }
#title::before { background: linear-gradient(90deg, rgba(21,19,15,0.88) 0%, rgba(21,19,15,0.55) 38%, rgba(21,19,15,0.08) 70%, rgba(21,19,15,0.25) 100%) !important; }
.title-wrap { position: relative; text-align: center; padding: 34px 56px 30px; border-radius: 8px;
  background: linear-gradient(rgba(34,29,22,0.78), rgba(21,19,15,0.86)); border: 1px solid rgba(216,180,90,0.45);
  box-shadow: 0 20px 60px #000c, inset 0 0 0 1px rgba(0,0,0,0.6); }
.title-logo { margin: 0; font-size: 72px; letter-spacing: 18px; color: var(--gold); font-weight: normal;
  text-shadow: 0 3px 0 #000, 0 0 28px rgba(216,180,90,0.35); padding-left: 18px; }
.title-sub { margin: 4px 0 26px; color: var(--muted); font-style: italic; font-size: 16px; letter-spacing: 1px; }
.title-btns { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 320px; margin: 0 auto; }
.tbtn { font-size: 18px; padding: 11px 20px; letter-spacing: 0.5px; transition: transform 0.12s ease, border-color 0.12s ease;
  background: linear-gradient(rgba(95,77,48,0.95), rgba(58,47,30,0.95)); }
.tbtn:hover { transform: translateX(3px); }
.tbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#tbSingle { background: linear-gradient(#8a6a2a, #5c4518); border-color: var(--gold); }
.title-slot { display: flex; flex-direction: column; gap: 10px; }
.title-slot:empty { display: none; }
.tbtn-small { align-self: center; margin-top: 6px; }
.title-foot { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 12px; text-shadow: 0 1px 2px #000; }

/* ---------- wspólne ---------- */
.muted { color: var(--muted); }
.center { text-align: center; }
.hint { font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.35; }
.chk-hint { display: block; margin: 0 0 8px 24px; }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 1px #0008; }
.st-dot.big { width: 18px; height: 18px; margin-right: 4px; }
.btn.on { border-color: var(--gold); color: var(--gold); background: linear-gradient(#6d5a3a, #4a3c27); }
input[type=range] { accent-color: var(--gold); }

kbd { display: inline-block; min-width: 1.5em; padding: 0 5px; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 3px;
  background: #1a1611; color: var(--gold); font-family: inherit; font-size: 0.92em; line-height: 1.35; text-align: center; }

/* ---------- ustawienia ---------- */
#settingsBody .menu-grid { align-items: start; }
.cb-row { display: flex; gap: 4px; margin: 2px 0 10px 24px; }

/* ---------- napisy ---------- */
.credits-body { max-height: 62vh; overflow-y: auto; padding-right: 8px; }
.cr-about p { line-height: 1.55; font-size: 14px; margin: 0 0 8px; }
.cr-row { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 6px 4px; border-bottom: 1px solid rgba(107,90,62,0.4); font-size: 13px; line-height: 1.45; }
.cr-row small { color: var(--muted); }
.cr-row a { color: var(--gold); }
.cr-who { color: var(--text); font-weight: bold; }
.cr-req { background: rgba(216,180,90,0.07); }
.cr-foot { font-size: 12px; margin-top: 14px; }

/* ---------- powtórki: lista ---------- */
.replay-list { max-height: 50vh; overflow-y: auto; }
.rl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px; border-bottom: 1px solid rgba(107,90,62,0.4); }
.rl-info { font-size: 14px; line-height: 1.4; }
.rl-info small { color: var(--muted); }
.rl-btns { display: flex; gap: 6px; flex: none; }
.replay-msg { text-align: center; color: #ffb0a0; min-height: 18px; font-size: 13px; margin-top: 6px; }

/* ---------- powtórki: pasek sterowania ---------- */
#replayBar { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 6; background: rgba(21,19,15,0.92);
  border: 1px solid var(--edge); border-radius: 5px; padding: 6px 10px; box-shadow: 0 6px 24px #0009; width: max-content; max-width: 96vw; }
.rp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rp-tag { color: #ff8a7a; font-weight: bold; letter-spacing: 2px; font-size: 12px; }
.rp-speeds { display: flex; gap: 2px; }
.rp-time { font-variant-numeric: tabular-nums; min-width: 96px; text-align: center; font-size: 13px; }
#rpSeek { width: 260px; }
.rp-view { flex-direction: row; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.rp-view select { padding: 3px; font-size: 12px; }
.rp-msg { text-align: center; font-size: 12px; color: #9fd08a; min-height: 0; }
.rp-msg:empty { display: none; }
#game.replay-mode #cmdPanel { pointer-events: none; opacity: 0.55; }
#game.replay-mode #alerts { top: 96px; }

/* ---------- statystyki ---------- */
.end-box { max-height: 94vh; overflow-y: auto; }
.st-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--edge); margin-bottom: 12px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.st-table th, .st-table td { padding: 4px 6px; border-bottom: 1px solid #4a3e2c; text-align: right; }
.st-table th:first-child, .st-table td:first-child { text-align: left; }
.st-table th { color: var(--muted); font-weight: normal; font-size: 12px; }
.cmp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin: 4px 0 8px; }
.cmp { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 22px; }
.cmp-cat { font-size: 12px; }
.cmp-name { color: var(--muted); margin-bottom: 2px; }
.cmp-bar { position: relative; height: 13px; margin: 2px 0; display: flex; align-items: center; gap: 6px; }
.cmp-bar > div { height: 9px; border-radius: 0 4px 4px 0; min-width: 2px; max-width: calc(100% - 52px); }
.cmp-bar > span { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.st-metrics { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.st-chart-head { font-size: 13px; margin-bottom: 2px; }
.st-chart-head b { color: var(--gold); font-size: 15px; margin-right: 6px; }
.st-chart { position: relative; }
.st-chart canvas { display: block; width: 100%; }
.st-tip { position: absolute; background: #0e0c09f0; border: 1px solid var(--edge); padding: 6px 9px; font-size: 12px; pointer-events: none; line-height: 1.5; min-width: 140px; }
.st-events { max-height: 220px; overflow-y: auto; margin-top: 10px; font-size: 13px; }
.ev { padding: 3px 4px; border-bottom: 1px solid rgba(107,90,62,0.35); display: flex; align-items: center; gap: 8px; }
.ev-t { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 44px; }
.ev-k { min-width: 62px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.ev-battle .ev-k { color: #ff9a8a; }
.ev-age .ev-k { color: var(--gold); }
.end-btns { margin-top: 14px; flex-wrap: wrap; position: sticky; bottom: -2px; z-index: 2; padding: 10px 0 4px; background: #231e17; }   /* przyciski widoczne bez przewijania długich statystyk */
.end-box .note { color: var(--muted); font-size: 13px; margin: 10px 0 0; line-height: 1.5; }

/* ---------- samouczek ---------- */
#tutPanel { position: absolute; top: 44px; right: 10px; width: 330px; z-index: 5; background: rgba(21,19,15,0.93);
  border: 1px solid var(--gold); border-radius: 6px; padding: 10px 12px; box-shadow: 0 8px 28px #000a; font-size: 13px; line-height: 1.5; }
.tut-head { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; display: flex; justify-content: space-between; }
.tut-step { color: var(--muted); letter-spacing: 0; text-transform: none; }
.tut-title { font-size: 17px; color: var(--text); margin: 4px 0 4px; }
.tut-text b { color: var(--gold); }
.tut-prog { color: #9fd08a; min-height: 18px; margin-top: 4px; }
.tut-bar { height: 4px; background: #3a3226; margin: 6px 0 8px; border-radius: 2px; overflow: hidden; }
.tut-bar > div { height: 100%; background: var(--gold); transition: width 0.4s ease; }
.tut-btns { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
#tutArrow { position: absolute; left: -14px; top: -34px; width: 28px; height: 34px; z-index: 4; pointer-events: none; }
#tutArrow::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 22px solid var(--gold); filter: drop-shadow(0 2px 2px #000); animation: tutBob 0.9s ease-in-out infinite; }
#tutArrow::after { content: ''; position: absolute; left: 9px; top: -14px; width: 10px; height: 16px; background: var(--gold); animation: tutBob 0.9s ease-in-out infinite; }
@keyframes tutBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- podpowiedzi ---------- */
#hintBox { position: absolute; left: 10px; top: 44px; width: 320px; z-index: 5; background: rgba(21,19,15,0.92); border: 1px solid var(--edge);
  border-left: 3px solid var(--gold); border-radius: 4px; padding: 8px 10px; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 20px #0009; }
.hint-head { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; display: flex; justify-content: space-between; align-items: center; }
.hint-x { background: none; border: none; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 14px; padding: 0 2px; }
.hint-x:hover { color: var(--text); }
.hint-text b { color: var(--gold); }
.hint-off { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--muted); cursor: pointer; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { #tutArrow::before, #tutArrow::after { animation: none; } #menuBg { transition: none; } .tbtn { transition: none; } }
@media (max-height: 760px) { .title-logo { font-size: 52px; } .title-btns { gap: 7px; } .tbtn { padding: 8px 18px; font-size: 16px; } }

#savesOverlay { z-index: 60; }
.save-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(239,230,210,0.12); }
.save-info { flex: 1; font-size: 14px; }
#loadBar { position: fixed; left: 50%; top: 45%; transform: translateX(-50%); width: min(460px, 86vw); height: 34px; background: #231e17; border: 2px solid var(--edge); z-index: 80; }
#loadBar .lb-fill { height: 100%; background: #8a6d2c; width: 0; }
#loadBar .lb-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text); }
/* ikony wartości (js/ikony.js) */
.ikw { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; flex: none; }
.ikw svg, .ikw img { display: block; width: 100%; height: 100%; }
.ikw-v { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; margin-right: 6px; }
.ikw-v .ikw { vertical-align: 0; }
.ikw-v.no { color: #e8705f; }