/* Pomoc (js/ui/help.js): blacha, rdza, ogień — jak HUD (zmienne z cp-hud.css). */
#cp-help { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-family: var(--cp-font); color: #fff; user-select: none; }
#cp-help.menu { pointer-events: auto; background: rgba(8, 6, 4, .45); cursor: pointer; }
#cp-help.hidden, #cp-hint1.hidden { display: none; }
.ch-panel { position: relative; padding: 22px 30px 26px; border-radius: 6px; max-width: calc(100vw - 32px);
  background: var(--cp-rivets), var(--cp-rust), var(--cp-metal); border: 2px solid #17130f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 10px 40px rgba(0, 0, 0, .7);
  animation: ch-in .16s ease-out; }
@keyframes ch-in { from { transform: scale(1.06); opacity: 0; } }
.ch-panel h2 { margin: 0 0 14px; text-align: center; font-size: 34px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
  transform: skewX(-10deg); background: var(--cp-fire); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(255, 110, 20, .45)); }
.ch-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 0; border-top: 2px solid rgba(0, 0, 0, .35); --ch: var(--cp-orange); }
.ch-group:first-of-type { border-top: 0; }
.ch-shop { --ch: var(--cp-yellow); }
.ch-pick { --ch: var(--cp-red); }
.ch-view { --ch: #b9c3cc; }
.ch-tile { width: 112px; padding: 8px 6px 7px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(12, 11, 10, .55); border-radius: 4px; border-bottom: 3px solid var(--ch); }
.ch-keys { display: flex; gap: 4px; }
#cp-help kbd { display: inline-block; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; border-radius: 5px;
  font: 18px/30px var(--cp-font); text-align: center; color: #1b1612;
  background: linear-gradient(180deg, #f1ece4 0%, #cfc6b9 70%, #a59c90 100%); border: 1px solid #2a231d; box-shadow: 0 3px 0 #3d342c, 0 4px 6px rgba(0, 0, 0, .5); }
#cp-help kbd.w { font-size: 14px; }
.ch-ico { width: 30px; height: 30px; color: var(--ch); filter: drop-shadow(0 1px 0 #000); }
.ch-ico svg { width: 100%; height: 100%; }
.ch-word { font-size: 15px; letter-spacing: .03em; text-shadow: 0 2px 3px #000; white-space: nowrap; }
.ch-word b { margin-left: 5px; color: var(--cp-yellow); font-weight: normal; }
.ch-close { position: absolute; top: 12px; right: 16px; opacity: .55; transform: scale(.75); }

/* pierwsza plansza: „Zniszcz wszystkich!” + strzałka do przeciwnika */
#cp-hint1 { position: fixed; left: 50%; top: 46%; width: 0; height: 0; z-index: 11; pointer-events: none; font-family: var(--cp-font); }
#cp-hint1 .h1-text { position: absolute; left: 0; top: -215px; transform: translateX(-50%) skewX(-10deg); white-space: nowrap;
  font-size: 54px; letter-spacing: .05em; text-transform: uppercase; background: var(--cp-fire); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(255, 90, 20, .6)); animation: h1-in .35s cubic-bezier(.2, 1.6, .4, 1); }
#cp-hint1 .h1-arrow { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; transition: opacity .2s; }
#cp-hint1 .h1-arrow svg { width: 100%; height: 100%; fill: var(--cp-orange); stroke: #160d06; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(255, 120, 20, .8)); animation: h1-pulse .6s ease-in-out infinite alternate; }
#cp-hint1.out { opacity: 0; transition: opacity .6s; }
@keyframes h1-in { from { transform: translateX(-50%) skewX(-10deg) scale(1.8); opacity: 0; } }
@keyframes h1-pulse { to { transform: translateY(-8px); } }
@media (max-width: 600px) { .ch-tile { width: 92px; } #cp-hint1 .h1-text { font-size: 34px; } }