<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex, nofollow" />
  <title>Chaos Ranger — Spanish (Spain) Translation for Skitto</title>
  <style>
    :root {
      --bg: #0d0c0b;
      --card: #171513;
      --card-alt: #1f1c19;
      --border: #362f28;
      --gold: #c9a45c;
      --gold-bright: #e4c37d;
      --red: #a33327;
      --text: #e6dfd5;
      --muted: #9e9487;
      --green: #4e9a62;
      --code-bg: #100e0d;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 36px 18px 64px;
      background: radial-gradient(circle at top, #1d1814 0%, var(--bg) 60%);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
      line-height: 1.6;
    }
    .wrap {
      max-width: 820px;
      margin: 0 auto;
    }
    header {
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #211c17 0%, var(--card) 100%);
      border-radius: 12px;
      padding: 26px 28px;
      margin-bottom: 22px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    }
    .eyebrow {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--gold);
      font-weight: 700;
      margin-bottom: 6px;
    }
    h1 {
      margin: 0 0 10px;
      font-size: 26px;
      color: #fff;
      letter-spacing: -0.01em;
    }
    header p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }
    .downloads {
      border: 1px solid var(--gold);
      background: var(--card);
      border-radius: 12px;
      padding: 22px 26px;
      margin-bottom: 22px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    }
    .downloads h2, .section h2 {
      margin: 0 0 14px;
      font-size: 18px;
      color: var(--gold-bright);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .primary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(180deg, #d3ae65 0%, #b38b42 100%);
      color: #120f0b;
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      padding: 13px 22px;
      border-radius: 8px;
      transition: transform 0.1s ease, filter 0.15s ease;
      margin-bottom: 16px;
    }
    .primary-btn:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }
    .file-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 12px;
    }
    .file-card {
      background: var(--card-alt);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
    }
    .file-card.recommended {
      border-color: rgba(201, 164, 92, 0.55);
    }
    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 8px;
      border-radius: 99px;
      background: rgba(78, 154, 98, 0.2);
      color: #7cd492;
      margin-left: 6px;
    }
    .badge.alt {
      background: rgba(201, 164, 92, 0.15);
      color: var(--gold);
    }
    .file-name {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px;
      color: #fff;
      word-break: break-all;
      font-weight: 600;
    }
    .file-desc {
      font-size: 13.5px;
      color: var(--muted);
      margin: 6px 0 0;
    }
    .secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #27221d;
      border: 1px solid var(--border);
      color: var(--gold-bright);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 13px;
      border-radius: 6px;
      align-self: flex-start;
      cursor: pointer;
    }
    .secondary-btn:hover {
      background: #322b25;
      border-color: var(--gold);
    }
    .section {
      border: 1px solid var(--border);
      background: var(--card);
      border-radius: 12px;
      padding: 22px 26px;
      margin-bottom: 18px;
    }
    .section p {
      margin: 0 0 12px;
      font-size: 14.5px;
    }
    .section p:last-child {
      margin-bottom: 0;
    }
    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 13px;
      background: var(--code-bg);
      border: 1px solid #2b2520;
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--gold-bright);
    }
    pre {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px;
      overflow-x: auto;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 12.5px;
      color: #e8e1d7;
      margin: 10px 0;
    }
    ul {
      margin: 8px 0 12px;
      padding-left: 20px;
    }
    li {
      margin-bottom: 6px;
      font-size: 14.5px;
    }
    .img-preview {
      width: 100%;
      border-radius: 8px;
      border: 1px solid var(--border);
      margin: 12px 0;
      display: block;
    }
    .copy-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <div class="eyebrow">Darkest Dungeon · Workshop ID 3766203587</div>
      <h1>Chaos Ranger — Spanish (Spain) Translation</h1>
      <p>Hi Skitto! Here is the complete Spanish translation of Chaos Ranger, tested in-game, along with a few technical notes and fixes you might find useful for all languages.</p>
    </header>

    <section class="downloads">
      <h2>📦 Downloads</h2>
      <a class="primary-btn" href="/ChaosRanger_Spanish_Translation.zip" download>
        ⬇ Download Full Package (.zip · 137 KB)
      </a>
      <div class="file-grid">
        <div class="file-card recommended">
          <div>
            <div class="file-name">
              1) cznselena_otherLangauges.string_table.xml
              <span class="badge">Recommended</span>
            </div>
            <p class="file-desc">
              Your own file with only the <code>spanish</code> block replaced by the translation. Everything else (the other languages, comments, and formatting) is byte-for-byte identical to yours. Just replace the file in your <code>localization</code> folder.
            </p>
          </div>
          <a class="secondary-btn" href="/cznselena_otherLangauges.string_table.xml" download>
            ⬇ Download XML (825 KB)
          </a>
        </div>

        <div class="file-card">
          <div>
            <div class="file-name">
              2) cznselena_spanish.string_table.xml
              <span class="badge alt">Alternative</span>
            </div>
            <p class="file-desc">
              Only if you'd rather keep Spanish in its own file: contains your English block, untouched, plus the Spanish block. If you go this way, use it in place of <code>cznselena_english.string_table.xml</code> and delete the old <code>spanish</code> block from <code>cznselena_otherLangauges</code> so nothing ends up duplicated.
            </p>
          </div>
          <a class="secondary-btn" href="/cznselena_spanish.string_table.xml" download>
            ⬇ Download XML (153 KB)
          </a>
        </div>
      </div>
    </section>

    <section class="section">
      <h2>📝 Notes on the Spanish Translation</h2>
      <p>
        The Spanish block follows your current English file: same IDs, same order, same comments, and the same colour tags and placeholders, including the lines the old Spanish placeholder was missing. After that, just build as you usually do and it will generate <code>3766203587_spanish.loc2</code>. I did a test build on my side and the English output stays byte-for-byte the same as yours.
      </p>
      <p>
        <strong>Flashback popups (Spanish only):</strong> The Spanish block also has two extra lines at the end that aren't in your English file: <code>tutorial_popup_flashback_description</code> and <code>tutorial_popup_flashbacks_completed_description</code>. Your class uses the game's flashback popups, and the base game's Spanish text only mentions the Shieldbreaker, so these two lines rewrite them to cover both classes. They only affect Spanish; if you'd rather not override base game texts, just delete those two lines at the end of the Spanish block.
      </p>
    </section>

    <section class="section">
      <h2>🛠️ Heads-up #1: Unclosed colour tag in armour names</h2>
      <p>
        Unrelated to the translation: the five armour descriptions (<code>cznselena_armour_0</code> to <code>cznselena_armour_4</code>) open <code>{colour_start|neutral}</code> but never close it, so the localization tool reports a <code>colour_start/colour_end mismatch</code> error for every language.
      </p>
      <p>
        I kept the Spanish lines identical to your English so the tags match; adding <code>{colour_end}</code> at the end of those five lines fixes the warning across all languages.
      </p>
    </section>

    <section class="section">
      <h2>🛠️ Heads-up #2: Fix for the empty row at the bottom of skill tooltips (all languages)</h2>
      <p>
        For every skill that can be used in both modes, the game adds a line break plus the <code>str_skill_mode_info_&lt;mode&gt;</code> text of each mode, and it cuts that text to <strong>63 bytes</strong> when the class loads.
      </p>
      <p>
        Your current invisible text is longer than 63 bytes, so the cut leaves half a character, which merges the two mode lines into one line of spaces — that's the empty row at the bottom of the tooltips in the character sheet and Guild. Leaving the strings empty doesn't help either, because the line breaks are still drawn.
      </p>
      <p><strong>What works in any language:</strong></p>
      <ul>
        <li><code>str_skill_mode_info_cznselena_normal</code>: the character <code>U+034F</code> followed by 21 × <code>U+200B</code> (exactly 65 bytes in UTF-8)</li>
        <li><code>str_skill_mode_info_cznselena_extra</code>: a single space</li>
      </ul>
      <p>
        The 63-byte cut then leaves a lone byte that swallows the line break and the space, nothing printable is left, and no empty row is drawn. Your skills and modes stay exactly as they are. (It relies on how the game cuts that text, so if a future game patch changes that, it may need another look.) The Spanish block already uses it, and you can copy these exact two lines into your other languages:
      </p>
      <pre id="mode-fix-snippet">&lt;entry id="str_skill_mode_info_cznselena_normal"&gt;&lt;![CDATA[&#x034F;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;&#x200B;]]&gt;&lt;/entry&gt;
&lt;entry id="str_skill_mode_info_cznselena_extra"&gt;&lt;![CDATA[ ]]&gt;&lt;/entry&gt;</pre>
      <div class="copy-row">
        <button class="secondary-btn" onclick="copySnippet(this)">📋 Copy exact XML lines (with U+034F + 21×U+200B)</button>
      </div>
    </section>

    <section class="section">
      <h2>🎨 Optional Bonus: Slightly darker Guild Header for name readability</h2>
      <p>
        In the character sheet and Guild, the game draws the hero's white name and class title directly over Selena's bright white hair in <code>heroes/cznselena/cznselena_guild_header.png</code>, making the text hard to read in any language.
      </p>
      <p>
        If you like how it looks, here is a version of your header slightly darkened in the upper area (like vanilla Darkest Dungeon headers) so the white text reads cleanly while keeping the artwork intact:
      </p>
      <img class="img-preview" src="/header_comparison.png" alt="Before and after comparison of cznselena_guild_header.png" />
      <a class="secondary-btn" href="/cznselena_guild_header.png" download>
        ⬇ Download darkened cznselena_guild_header.png (199 KB)
      </a>
    </section>

    <section class="section">
      <p style="color: var(--muted);">
        If you change or add English lines in a future update, just send them over and I'll gladly update the Spanish translation. Thanks again for making Chaos Ranger and including Spanish! — <strong>Crinlorite</strong>
      </p>
    </section>
  </div>

  <script>
    function copySnippet(btn) {
      const normal = '\u034F' + '\u200B'.repeat(21);
      const xml = '<entry id="str_skill_mode_info_cznselena_normal"><![CDATA[' + normal + ']]></entry>\n<entry id="str_skill_mode_info_cznselena_extra"><![CDATA[ ]]></entry>';
      navigator.clipboard.writeText(xml).then(() => {
        const old = btn.textContent;
        btn.textContent = '✓ Copied to clipboard!';
        setTimeout(() => { btn.textContent = old; }, 2200);
      });
    }
  </script>
</body>
</html>
