/* Styl HUD (wzór: koncepcja w Gfx): ciemne drewno, złote wąsy ram, granatowe tabliczki i ikony surowców rysowane SVG.
   Plik ładuje się po style.css i nadpisuje jego kolory; karty i panel zaznaczenia są w hud-cards.css. */
:root {
  --gold: #d9ae5a; --gold-hi: #ffe39a; --wood: #5a3920; --wood-dark: #1c110a;
  --ink: #0f131c; --navy: #1d4a9e; --navy-dark: #0f2c63;
  --accent: #ecc977; --text: #f6ead2; --muted: #c9b995;
}

/* Rama: drewno z cienką złotą linią w środku i ciemnym wnętrzem. */
.panel, .chip {
  border: 3px solid var(--wood); border-radius: 7px;
  background: linear-gradient(180deg, #1d1712, #110d0a);
  box-shadow: 0 0 0 1px var(--wood-dark), inset 0 0 0 1px var(--gold), inset 0 0 0 3px var(--wood-dark), 0 7px 12px #000a;
}
/* Złote romby w narożnikach (w środku ramy, żeby nie ucinał ich overflow paneli). */
#build::before, #build::after, #sel::before, #sel::after {
  top: 2px; width: 9px; height: 9px; border-radius: 1px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi), #b07a22); box-shadow: 0 0 0 1px #2a1808; z-index: 2;
}
#build::before, #sel::before { left: 2px; }
#build::after, #sel::after { right: 2px; }

/* Przyciski w HUD: granat ze złotym obrysem; stany: zwykły, najechany, wciśnięty, wyłączony. */
#topbar .btn, #sel .btn, #build .btn, #debug .btn, #merchant .btn, #result .btn {
  color: #eef3ff; border: 2px solid var(--gold); border-radius: 5px;
  background: linear-gradient(#2b5cb8, #1a418c 50%, #112b66);
  box-shadow: inset 0 1px 0 #8fb4ff66, inset 0 0 0 1px #07142e, 0 2px 0 #07101f;
  text-shadow: 0 1px 2px #030a1c; font-family: Georgia, serif; letter-spacing: .3px;
}
#topbar .btn:hover:not(:disabled), #sel .btn:hover:not(:disabled), #build .btn:hover:not(:disabled), #debug .btn:hover:not(:disabled), #merchant .btn:hover:not(:disabled), #result .btn:hover:not(:disabled) {
  border-color: var(--gold-hi); background: linear-gradient(#3a6ed0, #1f4aa0 50%, #14337a); box-shadow: inset 0 0 0 1px #07142e, 0 0 10px #f5c85a88, 0 2px 0 #07101f;
}
#topbar .btn:active:not(:disabled), #sel .btn:active:not(:disabled), #build .btn:active:not(:disabled), #result .btn:active:not(:disabled) {
  background: linear-gradient(#0f2c63, #153b82); transform: translateY(1px); box-shadow: inset 0 2px 5px #000a;
}
#topbar .btn:disabled, #sel .btn:disabled, #build .btn:disabled, #result .btn:disabled {
  opacity: 1; color: #8d9097; border-color: #5b5d63; background: linear-gradient(#4a4d54, #2c2e33); box-shadow: none; text-shadow: none;
}
#topbar .btn.accent, #sel .btn.accent, #result .btn.accent {
  color: #3a2608; border-color: #ffe39a; background: linear-gradient(#f7d77c, #d9a93f 55%, #b07f25); text-shadow: 0 1px 0 #fff2c4aa;
}
#topbar .btn.accent:hover:not(:disabled), #sel .btn.accent:hover:not(:disabled), #result .btn.accent:hover:not(:disabled) {
  color: #3a2608; border-color: #fff4cc; background: linear-gradient(#ffe7a0, #e6b84c 55%, #c18d2b); box-shadow: inset 0 0 0 1px #7a5414, 0 0 12px #f5c85a99, 0 2px 0 #07101f;
}

/* Pasek górny: licznik fali i podgląd (pasek surowców to grafika, hud-art.css). */
#topbar .chip { height: 58px; gap: 10px; padding: 4px 16px; font: 700 20px Georgia, serif; color: #fff4d6; text-shadow: 0 2px 2px #000; }
#wTimer {
  height: 24px; border: 1px solid #07142e; border-radius: 4px; color: #eaf1ff; font-family: Georgia, serif;
  background: linear-gradient(90deg, #2f86f0, #1b58b8 calc(var(--p, 0) * 100%), #0a0f18 0); box-shadow: inset 0 1px 4px #000c, 0 0 0 1px #6b4a26;
}
#wavePrev { border-color: #6b4a26; }
#wavePrev .lanes { color: #ff7a66; }

/* Ikony surowców (SVG): zamiast prostych kształtów CSS. */
.ic.wood, .ic.stone, .ic.gold {
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain;
  border-radius: 0; box-shadow: none; transform: none; clip-path: none; filter: drop-shadow(0 1px 1px #000a);
}
.ic.gold { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='17' rx='9' ry='4.5' fill='%23a8690a'/%3E%3Crect x='3' y='11.5' width='18' height='5.5' fill='%23c98a14'/%3E%3Cellipse cx='12' cy='11.5' rx='9' ry='4.5' fill='%23f6cf4a' stroke='%237a4a05'/%3E%3Cellipse cx='12' cy='11.5' rx='5.5' ry='2.6' fill='none' stroke='%23c98a14' stroke-width='1.2'/%3E%3Cpath d='M7 10q4-2 7-1' stroke='%23fff3b0' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); }
.ic.wood { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='15' height='8' rx='1' fill='%23a5683a'/%3E%3Cellipse cx='17' cy='8' rx='3.2' ry='4' fill='%23e2b878' stroke='%236b4020'/%3E%3Crect x='4' y='12' width='15' height='8' rx='1' fill='%23915a30'/%3E%3Cellipse cx='19' cy='16' rx='3.2' ry='4' fill='%23e8c386' stroke='%236b4020'/%3E%3Cellipse cx='19' cy='16' rx='1.4' ry='2' fill='none' stroke='%23a5683a'/%3E%3Cpath d='M4 7h11M6 15h11' stroke='%236b4020' stroke-width='.8'/%3E%3C/svg%3E"); }
.ic.stone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 18l4-8 6-3 5 4 5 7z' fill='%23aab3bf' stroke='%23424a55'/%3E%3Cpath d='M6 10l6 3 5-2M12 13l-1 5' stroke='%23eef2f7' stroke-width='1' fill='none'/%3E%3Cpath d='M12 7l5 4-5 2-6-3z' fill='%23d6dce4'/%3E%3C/svg%3E"); }
.cost .ic { width: 18px; height: 18px; }

/* Podpowiedź: ciemna tabliczka ze złotym obrysem. */
#tooltip {
  color: var(--text); background: linear-gradient(#171b26, #0c0f16); border: 2px solid var(--gold); border-radius: 5px;
  box-shadow: 0 0 0 1px #000, 0 8px 14px #000a, inset 0 0 0 1px #3a2a14;
}
#tooltip b { color: var(--gold-hi); font: 700 16px Georgia, serif; text-transform: uppercase; letter-spacing: .5px; }
#tooltip small { color: var(--muted); }

/* Komunikat środka ekranu: zwycięstwo/fala to granatowy sztandar, porażka to postrzępiona czerwień. */
#msg {
  padding: 12px 54px; border: 3px solid var(--gold); border-radius: 6px; color: #ffe39a; font: 800 36px Georgia, serif; letter-spacing: 3px;
  background: linear-gradient(#27559f, #153470 55%, #0e2552); text-shadow: 0 3px 0 #061330, 0 0 14px #f5c85a66;
  box-shadow: 0 0 0 1px #000, 0 0 0 5px #1b110a, 0 0 0 6px var(--gold), 0 12px 26px #000b, inset 0 0 0 2px #07142e;
}
#msg.bad {
  color: #ffd5c9; border-color: #b8584a; background: linear-gradient(#5b1c1a, #3a1010 60%, #260a0a); text-shadow: 0 3px 0 #1a0505;
  box-shadow: 0 0 0 1px #000, 0 0 0 5px #1b0c0a, 0 0 0 6px #b8584a, 0 12px 26px #000b, inset 0 0 0 2px #1a0505;
}

/* Menu w grze (hud/game-menu.js): przyciemnione tło i okno z powrotem do gry, językiem, dźwiękiem i wyjściem. */
#gameMenu { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #05080acc; animation: gm-in .18s ease-out; }
@keyframes gm-in { from { opacity: 0; } }
#gameMenu .gm-box { width: min(340px, 90vw); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
#gameMenu h2 { margin: 0 0 6px; text-align: center; color: var(--gold-hi); font: 800 24px Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }
#gameMenu .btn { color: #eef3ff; border: 2px solid var(--gold); border-radius: 5px; background: linear-gradient(#2b5cb8, #1a418c 50%, #112b66); font: 700 15px Georgia, serif; padding: 8px 12px; cursor: pointer; }
#gameMenu .btn:hover { border-color: var(--gold-hi); background: linear-gradient(#3a6ed0, #1f4aa0 50%, #14337a); box-shadow: 0 0 10px #f5c85a88; }
#gameMenu .btn.wide { width: 100%; padding: 11px; font-size: 16px; }
#gameMenu .btn.accent { color: #3a2608; border-color: #ffe39a; background: linear-gradient(#f7d77c, #d9a93f 55%, #b07f25); }
#gameMenu .btn.accent:hover { background: linear-gradient(#ffe7a0, #e6b84c 55%, #c18d2b); }
#gameMenu .btn.on { border-color: var(--gold-hi); color: #3a2608; background: linear-gradient(#f7d77c, #d9a93f 55%, #b07f25); }
#gameMenu .btn.gm-exit { margin-top: 6px; border-color: #b8584a; background: linear-gradient(#5b1c1a, #3a1010 60%, #260a0a); color: #ffd5c9; }
#gameMenu .btn.gm-exit:hover { background: linear-gradient(#7a2622, #4a1414 60%, #300c0c); }
#gameMenu .gm-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid #3a2a18; color: var(--text); font: 700 15px Georgia, serif; }
#gameMenu .gm-row { flex-wrap: wrap; gap: 6px; }
#gameMenu .gm-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
#gameMenu .gm-ctl .btn { min-width: 34px; padding: 5px 6px; font-size: 12px; }
#gameMenu .gm-row:has(.btn[data-act^=lang]) .gm-ctl { width: 100%; justify-content: space-between; } /* 7 języków w jednym rzędzie pod etykietą */