Embed


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tombstone Rips — Match the Rip Team</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Cinzel:wght@500;700;900&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================================
   Everything is scoped under .tsr-game so it renders correctly
   whether Durable iframes it OR drops it inline into its own
   layout. No html/body styling = nothing leaks, nothing breaks.
   ============================================================ */
.tsr-game{
  --oxblood:#6d1f1a; --oxblood-deep:#4a1512;
  --gold:#c8a24c; --gold-bright:#e4c477;
  --parchment:#ede0c4; --parchment-dk:#d8c39a;
  --ink:#20160f; --night:#161009;
  position:relative;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  font-family:'Spectral',Georgia,'Times New Roman',serif;
  color:var(--parchment);
  background:radial-gradient(circle at 50% -10%, #3a2818 0%, var(--night) 58%, #0d0906 100%);
  border:1px solid rgba(200,162,76,.35);
  border-radius:16px;
  padding:clamp(16px,3vw,34px);
  overflow:hidden;
  box-sizing:border-box;
}
.tsr-game *{box-sizing:border-box; margin:0; padding:0;}

/* ---------- Masthead ---------- */
.tsr-game .tsr-head{width:100%;max-width:960px;text-align:center;margin-bottom:14px;}
.tsr-game .tsr-kicker{
  font-family:'Cinzel',serif;font-weight:700;letter-spacing:.42em;
  text-transform:uppercase;font-size:clamp(9px,2.2vw,12px);
  color:var(--gold);opacity:.85;margin-bottom:6px;padding-left:.42em;
}
.tsr-game h1{
  font-family:'Rye',cursive;font-weight:400;
  font-size:clamp(28px,7vw,56px);line-height:.95;
  color:var(--parchment);
  text-shadow:0 2px 0 var(--oxblood-deep),0 3px 6px rgba(0,0,0,.6);
}
.tsr-game h1 .tsr-rip{color:var(--gold-bright);}
.tsr-game .tsr-rule{
  height:2px;width:min(88%,640px);margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative;
}
.tsr-game .tsr-rule::after{
  content:"\2726";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--gold);background:var(--night);padding:0 12px;font-size:13px;
}
.tsr-game .tsr-tagline{font-style:italic;color:var(--parchment-dk);font-size:clamp(12px,2.6vw,15px);margin-top:14px;}

/* ---------- Control console ---------- */
.tsr-game .tsr-console{
  width:100%;max-width:720px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(109,31,26,.35),rgba(0,0,0,.25));
  border:1px solid rgba(200,162,76,.4);border-radius:10px;
  padding:12px 14px;margin:16px 0 18px;
}
.tsr-game .tsr-stat{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:0 6px;}
.tsr-game .tsr-num{font-family:'Cinzel',serif;font-weight:900;font-size:22px;color:var(--gold-bright);line-height:1;}
.tsr-game .tsr-lbl{font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:var(--parchment-dk);margin-top:4px;}
.tsr-game .tsr-div{width:1px;align-self:stretch;background:rgba(200,162,76,.3);}
.tsr-game .tsr-seg{display:flex;border:1px solid rgba(200,162,76,.5);border-radius:8px;overflow:hidden;}
.tsr-game .tsr-seg button{
  font-family:'Cinzel',serif;font-weight:700;letter-spacing:.05em;
  background:transparent;color:var(--parchment);border:none;
  padding:9px 11px;cursor:pointer;font-size:12px;transition:background .15s,color .15s;
}
.tsr-game .tsr-seg button + button{border-left:1px solid rgba(200,162,76,.4);}
.tsr-game .tsr-seg button.tsr-active{background:var(--gold);color:var(--ink);}
.tsr-game .tsr-seg button:hover:not(.tsr-active){background:rgba(200,162,76,.18);}
.tsr-game .tsr-deal{
  font-family:'Rye',cursive;font-size:15px;
  background:linear-gradient(180deg,var(--oxblood),var(--oxblood-deep));
  color:var(--parchment);border:1px solid var(--gold);border-radius:8px;
  padding:9px 20px;cursor:pointer;box-shadow:0 3px 0 var(--oxblood-deep),0 6px 10px rgba(0,0,0,.4);
  transition:transform .08s,box-shadow .08s;
}
.tsr-game .tsr-deal:hover{background:linear-gradient(180deg,#832822,var(--oxblood));}
.tsr-game .tsr-deal:active{transform:translateY(3px);box-shadow:0 0 0 var(--oxblood-deep);}

/* ---------- Board (fluid: fits any container width) ---------- */
.tsr-game .tsr-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:clamp(6px,1.6vw,12px);
  width:100%;max-width:680px;
  perspective:1200px;
}
.tsr-game .tsr-card{
  position:relative;aspect-ratio:5/7;cursor:pointer;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.3,1.2);
  border-radius:9px;touch-action:manipulation;
}
.tsr-game .tsr-card.is-flipped,.tsr-game .tsr-card.is-matched{transform:rotateY(180deg);}
.tsr-game .tsr-card:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;}
.tsr-game .tsr-face{
  position:absolute;inset:0;border-radius:9px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:2px solid var(--gold);box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.tsr-game .tsr-back{
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 6px,transparent 6px 12px),
    radial-gradient(circle at 50% 34%, #8a2a22 0%, var(--oxblood) 45%, var(--oxblood-deep) 100%);
  display:flex;align-items:center;justify-content:center;
}
.tsr-game .tsr-back svg{width:70%;height:70%;}
.tsr-game .tsr-card:hover .tsr-back{filter:brightness(1.12);}
.tsr-game .tsr-front{
  transform:rotateY(180deg);background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.tsr-game .tsr-front img{width:100%;height:100%;object-fit:cover;display:block;}
.tsr-game .tsr-card.is-matched .tsr-face{border-color:var(--gold-bright);}
.tsr-game .tsr-card.is-matched .tsr-front::after{
  content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--gold-bright),inset 0 0 22px rgba(228,196,119,.55);
  animation:tsr-pop .45s ease;
}
@keyframes tsr-pop{0%{opacity:0;transform:scale(1.05);}100%{opacity:1;transform:scale(1);}}
.tsr-game .tsr-board.is-locked .tsr-card{pointer-events:none;}

/* ---------- Footer ---------- */
.tsr-game .tsr-foot{
  width:100%;text-align:center;margin-top:24px;
  color:var(--parchment-dk);font-size:11px;letter-spacing:.14em;
  font-family:'Cinzel',serif;text-transform:uppercase;opacity:.7;
}

/* ---------- Win overlay (absolute = covers just the game panel) ---------- */
.tsr-game .tsr-overlay{
  position:absolute;inset:0;background:rgba(9,6,3,.85);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:20;
}
.tsr-game .tsr-overlay.is-show{opacity:1;pointer-events:auto;}
.tsr-game .tsr-plaque{
  background:radial-gradient(circle at 50% 0%, #241812, #2a1c12);
  border:2px solid var(--gold);border-radius:14px;
  padding:32px 28px;max-width:400px;width:100%;text-align:center;
  box-shadow:0 0 0 6px var(--oxblood-deep),0 20px 50px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.96);transition:transform .35s cubic-bezier(.2,.7,.3,1.2);
}
.tsr-game .tsr-overlay.is-show .tsr-plaque{transform:none;}
.tsr-game .tsr-epitaph{font-family:'Cinzel',serif;letter-spacing:.3em;font-size:11px;color:var(--gold);text-transform:uppercase;}
.tsr-game .tsr-plaque h2{font-family:'Rye',cursive;font-size:32px;color:var(--parchment);margin:8px 0 4px;}
.tsr-game .tsr-plaque h2 span{color:var(--gold-bright);}
.tsr-game .tsr-summary{color:var(--parchment-dk);font-style:italic;margin:14px 0 6px;font-size:15px;}
.tsr-game .tsr-best{font-family:'Cinzel',serif;font-size:12px;color:var(--gold);letter-spacing:.08em;margin-bottom:20px;min-height:16px;}

@media (max-width:520px){
  .tsr-game .tsr-console{gap:8px;padding:10px;}
  .tsr-game .tsr-stat{min-width:56px;}
  .tsr-game .tsr-div{display:none;}
  .tsr-game .tsr-board{grid-template-columns:repeat(auto-fit,minmax(62px,1fr));}
}
@media (prefers-reduced-motion:reduce){
  .tsr-game .tsr-card{transition:transform .001s;}
  .tsr-game .tsr-plaque{transition:none;}
}
</style>
</head>
<body>
<div class="tsr-game">
  <div class="tsr-head">
    <div class="tsr-kicker">Tombstone Rips &middot; Saloon Games</div>
    <h1>Match the <span class="tsr-rip">Rip</span> Team</h1>
    <div class="tsr-rule"></div>
    <p class="tsr-tagline">Flip the cards, find the matching breakers. Clear the board in as few moves as you can.</p>
  </div>

  <div class="tsr-console" role="group" aria-label="Game controls">
    <div class="tsr-stat"><span class="tsr-num" data-moves>0</span><span class="tsr-lbl">Moves</span></div>
    <div class="tsr-div"></div>
    <div class="tsr-stat"><span class="tsr-num" data-match>0</span><span class="tsr-lbl">Pairs</span></div>
    <div class="tsr-div"></div>
    <div class="tsr-stat"><span class="tsr-num" data-time>0:00</span><span class="tsr-lbl">Time</span></div>
    <div class="tsr-div"></div>
    <div class="tsr-seg" role="group" aria-label="Difficulty">
      <button data-pairs="6" class="tsr-active">Rookie &middot; 6</button>
      <button data-pairs="8">Breaker &middot; 8</button>
      <button data-pairs="12">Legend &middot; 12</button>
    </div>
    <button class="tsr-deal" data-deal>Deal New Board</button>
  </div>

  <div class="tsr-board" data-board aria-label="Memory board"></div>

  <div class="tsr-foot">Tombstone Collectibles &middot; Las Vegas</div>

  <div class="tsr-overlay" data-overlay role="dialog" aria-modal="true" aria-label="Round complete">
    <div class="tsr-plaque">
      <div class="tsr-epitaph">Here Lies The Board</div>
      <h2>You <span>Cleaned Up!</span></h2>
      <p class="tsr-summary" data-summary></p>
      <p class="tsr-best" data-best></p>
      <button class="tsr-deal" data-again>Deal Again</button>
    </div>
  </div>
</div>

<script>
(function(){
  var root = document.currentScript.parentNode.querySelector('.tsr-game')
             || document.querySelector('.tsr-game');
  if(!root) return;

  /* Team cards served via the site's own image proxy (works same-origin on Durable). */
  var FILES = [
    "8gv4xdhHDOPA25Y5keGtcVDgdExUof7okxJQ0Wy7Pu867FeRZTZgCeWj4VOBg5ub.jpg",
    "37je0XjhA4w087B7vf4AM8YF2wcttHuJyAmByWrTQ6KExSjKESO4j6NAAKTUpypw.png",
    "17lzrJ0EpYvUMtusGuMXhPbhdeviQieFoV6WiG7KxoJXFjVuyQu0ni777HkDFGj5.png",
    "3aMy2XslSOq5FAdkk6gzPaGUpMUzOMUpSbz8SkiQ5txldXC6wCFdlQpsyMvfHvZQ.png",
    "14Y9VtpuV2byvWcRFEKofVVZ3ouK9UZDya5yaPJXDzyYy4mo0D4NM00h3YNkffXP.png",
    "7Nv0ww9PCPWkytNashZyAPFeuMweos302JT4NQkZAHJ9kL156ySG87uErh7fS7Zc.png",
    "18hliXa5MpbmbhHYmzg0WTo2DD722rm5vZcLbFs4HNoWIJqHQSr0xA6YVX7vtwxt.png",
    "6gafyHiUDnCKuyArIzwn6VQaciiwXDTeMwx7DndtE48SYnZ3WrlH1eLgdCpRqGiC.png",
    "18fhiV9LmAq6KdgHbCxUNZngbgRpE9vaezGCIF4pXLrV895NAg5Xk2kEZoN7NY0W.png",
    "cPe2HpDDpFW08MvElxSNHZE0cE5Jwzwl90S5qnsyEYyZHseHrAjPt6OXZlQmm5En.png",
    "21ZZ2o8qe4vYU1cBExVM9VhdcyQKeNbyIcpBfqWbQU0woD3kLSbPBUCmkztJtXmO.png",
    "9pgCuKGTlunxHT2G4HZI8UZeHar6sytTsWYhTHzmn0bgYUQDM94f4GoMh6XFJ1oj.png",
    "1x3Exl8DzfsZa2bagsVULPlfvG2xYVzpJsimwGqhVdv6u92JjztNtO42OS051JSp.png",
    "1aIk6Oz5UhJUxKFhzJc7tNZaYLgbBcJOR0pvUCE7Xr6CNXY9y1QUx4Q4w0LkZkVM.png",
    "23H301O1COmYOScq4EsxgR69jeSoxHLIJFsTuG0fribmKw3cSYwD0Y6wTPguW8Px.png",
    "1elLficVH48CQj3tkC4oKTA2Hh9dsl1NU3RpuIm26Fuhw4JxMnJ0R1OBnreh8l1h.png",
    "10hh2BNjv4ugxio83kZruAwxyEgpzuJ2Uz0ygbjVnkz8mLxr34nv3PWOJqJzShn3.png",
    "12l12iDwfbqpjYoP0IvovWVfSdRV2939Ipxf0w9RPWVqXJHMNPxqJ4gk8AlfrXdo.png",
    "bIMvX04sRUB4jmf8cS2Tjr5IE26FsrkKAN8ZxuSfeyluc2cKOH0du0UvcnxLg1Ub.png",
    "4iEMbEzOq8wAOmKC9XwJ094ng7dLvSetS02xYmM51gLjUABOhhYzcvQ8IiPgGCjc.png",
    "1fCHdc52ArhvzceNUDZHvuHpWkDx1U1UxTtL50WeB4EgdtWPEEsgSDDVI80Y7HW9.png",
    "2ab7sWo7EcEXRjjwXqk8jjTkOaAmOC8pth1hom2WiJw6v18KRz5zFQExiJ0TrlPE.png",
    "10U7NZL0N4VjSzRL87CPpH4mY4QQ1aNT8epGAMkxnu30s7OjbsEz38xSEcFXJS6G.png",
    "bvKq5u8jLDCf6vfsADJroiOlzaSZw31snXxjYQYtb3wYy6Mb5zLhBv8LocAaGlwA.png",
    "9xF9Z0yWnka1vO8IAzXyyRZnwj2aGWXxy5uGUl8P7vXr4uRFTKFEli64ac5AxGMv.png",
    "2evaj8EBytBMPyhzrD7169j5YySodk33hT3e0paaYWFFhgXlX5T3cSo0SML2M96j.png",
    "8avz2dHMEIJLizFyMgkxm5BDYi7XriFv4lQAwLcjF34KHgdkAEU7ymLOhtLFZfx0.png",
    "5WvxI3GylDBARMHejw5m0JJKEU9mwLUKYlZmmLyFGq8m5mhe6DAzFUnkPUGQWlXq.png"
  ];
  function imgURL(f){
    return "https://tombstonecollectibles.com/_next/image?url="
      + encodeURIComponent("https://cdn.durable.co/blocks/" + f) + "&w=640&q=80";
  }

  var BACK = '<svg viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'
    + '<defs><linearGradient id="tsrg" x1="0" y1="0" x2="0" y2="1">'
    + '<stop offset="0" stop-color="#e4c477"/><stop offset="1" stop-color="#b78a34"/></linearGradient></defs>'
    + '<rect x="4" y="4" width="92" height="122" rx="7" fill="none" stroke="url(#tsrg)" stroke-width="1.6"/>'
    + '<rect x="8" y="8" width="84" height="114" rx="5" fill="none" stroke="url(#tsrg)" stroke-width="0.7" opacity="0.7"/>'
    + '<path d="M32 96 V58 a18 18 0 0 1 36 0 V96 Z" fill="#1c120c" stroke="url(#tsrg)" stroke-width="1.4"/>'
    + '<text x="50" y="66" text-anchor="middle" font-family="Cinzel, serif" font-size="8" fill="url(#tsrg)" letter-spacing="1">R &#183; I &#183; P</text>'
    + '<text x="50" y="86" text-anchor="middle" font-family="Rye, serif" font-size="18" fill="url(#tsrg)">TR</text>'
    + '<g transform="translate(50 44)" fill="url(#tsrg)">'
    + '<circle cx="0" cy="-2" r="6.4"/><rect x="-4.5" y="2" width="9" height="4" rx="1.5"/>'
    + '<circle cx="-2.4" cy="-2.2" r="1.7" fill="#1c120c"/><circle cx="2.4" cy="-2.2" r="1.7" fill="#1c120c"/></g>'
    + '<text x="50" y="112" text-anchor="middle" font-family="Cinzel, serif" font-size="5.4" fill="url(#tsrg)" letter-spacing="1.5">TOMBSTONE RIPS</text>'
    + '</svg>';

  var $  = function(sel){ return root.querySelector(sel); };
  var board   = $('[data-board]');
  var overlay = $('[data-overlay]');
  var elMoves = $('[data-moves]'), elMatch = $('[data-match]'), elTime = $('[data-time]');
  var elSum   = $('[data-summary]'), elBest = $('[data-best]');

  var pairs=6, first=null, lock=false, moves=0, matched=0, seconds=0, timer=null, started=false;

  function shuffle(a){for(var i=a.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=a[i];a[i]=a[j];a[j]=t;}return a;}
  function fmt(s){return Math.floor(s/60)+":"+String(s%60).padStart(2,'0');}
  function startTimer(){ if(started) return; started=true; timer=setInterval(function(){seconds++;elTime.textContent=fmt(seconds);},1000); }
  function stopTimer(){ clearInterval(timer); }

  function deal(){
    stopTimer();
    moves=0;matched=0;seconds=0;started=false;first=null;lock=false;
    elMoves.textContent='0';
    elMatch.textContent='0 / '+pairs;
    elTime.textContent='0:00';
    overlay.classList.remove('is-show');

    var chosen = shuffle(FILES.slice()).slice(0,pairs);
    var deck = shuffle(chosen.concat(chosen));
    board.classList.remove('is-locked');
    board.innerHTML='';

    deck.forEach(function(file){
      var card=document.createElement('div');
      card.className='tsr-card';
      card.tabIndex=0;
      card.setAttribute('role','button');
      card.setAttribute('aria-label','Face-down card');
      card.dataset.file=file;
      card.innerHTML =
        '<div class="tsr-face tsr-back">'+BACK+'</div>'+
        '<div class="tsr-face tsr-front"><img alt="Rip team card" loading="lazy" '+
        'src="'+imgURL(file)+'" onerror="this.parentNode.style.background=\'#6d1f1a\'"></div>';
      function flip(){ onFlip(card); }
      card.addEventListener('click',flip);
      card.addEventListener('keydown',function(e){ if(e.key==='Enter'||e.key===' '){e.preventDefault();flip();} });
      board.appendChild(card);
    });
  }

  function onFlip(card){
    if(lock || card.classList.contains('is-flipped') || card.classList.contains('is-matched')) return;
    startTimer();
    card.classList.add('is-flipped');
    card.setAttribute('aria-label','Card revealed');
    if(!first){ first=card; return; }

    moves++; elMoves.textContent=moves;

    if(first.dataset.file===card.dataset.file){
      first.classList.add('is-matched'); card.classList.add('is-matched');
      first=null; matched++; elMatch.textContent=matched+' / '+pairs;
      if(matched===pairs) win();
    }else{
      lock=true; board.classList.add('is-locked');
      var a=first, b=card; first=null;
      setTimeout(function(){
        a.classList.remove('is-flipped'); b.classList.remove('is-flipped');
        a.setAttribute('aria-label','Face-down card'); b.setAttribute('aria-label','Face-down card');
        lock=false; board.classList.remove('is-locked');
      },900);
    }
  }

  function win(){
    stopTimer();
    elSum.textContent = pairs+' pairs matched in '+moves+' moves and '+fmt(seconds)+'.';
    var bestTxt='';
    try{
      var key='tsrips-match-best-'+pairs;
      var prev=JSON.parse(localStorage.getItem(key)||'null');
      var now={moves:moves,seconds:seconds};
      var better=!prev||now.moves<prev.moves||(now.moves===prev.moves&&now.seconds<prev.seconds);
      if(better){ localStorage.setItem(key,JSON.stringify(now)); bestTxt='\u2605 New best for this level!'; }
      else { bestTxt='Best: '+prev.moves+' moves \u00b7 '+fmt(prev.seconds); }
    }catch(e){}
    elBest.textContent=bestTxt;
    setTimeout(function(){ overlay.classList.add('is-show'); },450);
  }

  root.querySelectorAll('.tsr-seg button').forEach(function(b){
    b.addEventListener('click',function(){
      root.querySelector('.tsr-seg button.tsr-active').classList.remove('tsr-active');
      b.classList.add('tsr-active');
      pairs=parseInt(b.dataset.pairs,10);
      deal();
    });
  });
  $('[data-deal]').addEventListener('click',deal);
  $('[data-again]').addEventListener('click',deal);

  deal();
})();
</script>
</body>
</html>


Tombstone Collectibles

Tombstone Rips is a live sports-card breaking company that delivers high-energy, community-driven experiences across major streaming platforms including eBay-live, Tiktok shops, Walmart ,  Fanatics Live, Whatnot, and Loupe. Built around a distinctive Western-inspired identity, Tombstone Rips blends entertainment, transparency, and premium product access—ranging from hobby and high-end boxes to curated repacks and special promotions. The brand emphasizes trust, consistent value, and interactive engagement, making it a destination for both seasoned collectors and newcomers to the hobby.
Tombstone Collectibles is a full-service sports card and collectibles retailer offering sealed wax, singles, graded cards, consignment sales, and custom hobby products through both physical storefronts and online channels. Operating as the retail backbone of the Tombstone brand ecosystem, the company focuses on inventory depth, fair market pricing, and customer education while supporting live breaking, events, and national expansion. Tombstone Collectibles positions itself as a long-term hobby partner—bridging retail, entertainment, and community under one unified brand.