Framework State 18

Title of State:

Upgrade Title Card Front End

Goal of Change:

Replace the title card front-end with:

• Only the 1024×1024 title image centered
• A glowing yellow “BEGIN?” text under it (hover turns red)
• Clicking “BEGIN?” advances to the next screen (same behavior as your old Begin button)

PATCH 1 — Title Card HTML: remove everything inside and replace with image + BEGIN?

Code to Remove

324 - 
      <!-- TITLE CARD -->
      <div id="titleCard" class="panel titleCard">
        <div class="panelHeader">
          <div class="panelTitle">TITLE CARD</div>
          <div class="panelSub">1400 × 1400 • Click Begin</div>
        </div>

        <button id="btnBegin" class="btnPrimary btnBottomCenter" type="button">BEGIN</button>
      </div>

Code to Add

324 - 
      <!-- TITLE CARD -->
      <div id="titleCard" class="panel titleCard">
        <img
          src="https://chrisdeasy.com/wp-content/uploads/image-3842.png"
          width="1024" height="1024"
          alt="Ranger Ranch"
          style="display:block;width:1024px;height:1024px;"
        />
        <div id="btnBegin" class="rr-begin" role="button" tabindex="0">BEGIN?</div>
      </div>

---

PATCH 2 — Title Card CSS: make the title card clean + style BEGIN? text

Code to Remove

73 -
  /* Title Card: 1400x1400 */
  .titleCard{
    width:1400px;
    height:1400px;
    position:relative;
  }

Code to Add

73 -
  /* Title Card: clean, centered, image-native */
  .titleCard{
    width:1024px;
    height:auto;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
  }

  /* remove the panel look ONLY for the title card */
  #titleCard.panel{
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
  }

  /* BEGIN? glowing yellow -> red on hover */
  .rr-begin{
    color:#ffe900;
    font-weight:950;
    font-size:46px;
    letter-spacing:6px;
    cursor:pointer;
    user-select:none;
    text-shadow:
      0 2px 0 rgba(0,0,0,.55),
      0 0 18px rgba(255,233,0,.65),
      0 0 60px rgba(255,233,0,.22);
    transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
  }
  .rr-begin:hover{
    color:#ff2a2a;
    text-shadow:
      0 2px 0 rgba(0,0,0,.60),
      0 0 18px rgba(255,42,42,.72),
      0 0 60px rgba(255,42,42,.22);
    transform: translateY(-1px);
  }
  .rr-begin:active{
    transform: translateY(0px) scale(0.99);
  }

---

PATCH 1 — Center “BEGIN?” (CSS)

Code to Remove

94 -
  .rr-begin{
    color:#ffe900;
    font-weight:950;
    font-size:46px;
    letter-spacing:6px;
    cursor:pointer;
    user-select:none;
    text-shadow:
      0 2px 0 rgba(0,0,0,.55),
      0 0 18px rgba(255,233,0,.65),
      0 0 60px rgba(255,233,0,.22);
    transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
  }

Code to Add

94 -
  .rr-begin{
    display:block;
    width:100%;
    text-align:center;

    color:#ffe900;
    font-weight:950;
    font-size:46px;
    letter-spacing:6px;
    cursor:pointer;
    user-select:none;
    text-shadow:
      0 2px 0 rgba(0,0,0,.55),
      0 0 18px rgba(255,233,0,.65),
      0 0 60px rgba(255,233,0,.22);
    transition: color .18s ease, text-shadow .18s ease, transform .18s ease;
  }

---

PATCH 2 — Title scene: hide background + hide HUD chrome during TITLE

Code to Remove

819 -
function setView(v){
  S.view = v;

  if(v === "TITLE"){
    titleCard.style.display = "block";
    menuPanel.style.display = "none";
    overlayRoot.style.display = "flex";
    S.paused = false;
  } else if(v === "MENU"){
    titleCard.style.display = "none";
    menuPanel.style.display = "flex";
    overlayRoot.style.display = "flex";
    S.paused = false;
  } else { // GAME
    overlayRoot.style.display = "none";
    S.paused = false;
  }
}

Code to Add

819 -
function setView(v){
  S.view = v;

  const stageEl = document.getElementById("stage");

  if(v === "TITLE"){
    // clean title screen
    if(stageEl) stageEl.style.background = "transparent";

    titleCard.style.display = "flex";
    menuPanel.style.display = "none";
    overlayRoot.style.display = "flex";

    // hide all in-game HUD chrome during title
    if(minimap) minimap.style.display = "none";
    if(selhud) selhud.style.display = "none";
    const hudLeftEl = document.getElementById("hudLeft");
    if(hudLeftEl) hudLeftEl.style.display = "none";
    if(bottomhud) bottomhud.style.display = "none";

    S.paused = false;
  } else if(v === "MENU"){
    // restore normal stage background
    if(stageEl) stageEl.style.background = "#0b0f18";

    titleCard.style.display = "none";
    menuPanel.style.display = "flex";
    overlayRoot.style.display = "flex";

    // keep HUD chrome hidden in menu
    if(minimap) minimap.style.display = "none";
    if(selhud) selhud.style.display = "none";
    const hudLeftEl = document.getElementById("hudLeft");
    if(hudLeftEl) hudLeftEl.style.display = "none";
    if(bottomhud) bottomhud.style.display = "none";

    S.paused = false;
  } else { // GAME
    if(stageEl) stageEl.style.background = "#0b0f18";

    overlayRoot.style.display = "none";

    // show HUD chrome in game
    if(minimap) minimap.style.display = "block";
    if(selhud) selhud.style.display = "block";
    const hudLeftEl = document.getElementById("hudLeft");
    if(hudLeftEl) hudLeftEl.style.display = "block";
    if(bottomhud) bottomhud.style.display = "block";

    S.paused = false;
  }
}

---

Result