diff --git a/static/balatro/index.html b/static/balatro/index.html
new file mode 100644
index 0000000..30b315d
--- /dev/null
+++ b/static/balatro/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Balatro Reference</title>
+<style>
+  :root{
+    --bg:#15171c; --bg2:#1d2027; --card:#252934; --line:#343a47;
+    --txt:#e8ebf2; --muted:#c3cad8;
+  }
+  *{box-sizing:border-box}
+  body{
+    margin:0; min-height:100vh; background:var(--bg); color:var(--txt);
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+    display:flex; flex-direction:column; align-items:center; justify-content:center;
+    padding:24px;
+  }
+  h1{font-size:24px; letter-spacing:.3px; margin:0 0 4px}
+  .sub{color:var(--muted); font-size:13px; margin-bottom:24px}
+  .menu{display:grid; gap:12px; width:100%; max-width:360px}
+  .menu a{
+    display:flex; align-items:center; gap:12px;
+    padding:16px 18px; border-radius:14px; text-decoration:none; color:var(--txt);
+    background:var(--card); border:1px solid var(--line); border-left:4px solid var(--c);
+    font-size:17px; font-weight:600;
+  }
+  .menu a span{margin-left:auto; color:var(--muted); font-weight:400; font-size:13px}
+  footer{color:var(--muted); font-size:11px; margin-top:28px}
+  footer a{color:var(--muted)}
+</style>
+</head>
+<body>
+<h1>Balatro Reference</h1>
+<div class="sub">Searchable card lists</div>
+<nav class="menu">
+  <a href="/balatro/jokers.html"   style="--c:#ffd34e">Jokers   <span>150</span></a>
+  <a href="/balatro/tarot.html"    style="--c:#ca8cff">Tarot    <span>22</span></a>
+  <a href="/balatro/planet.html"   style="--c:#69e6ff">Planet   <span>12</span></a>
+  <a href="/balatro/spectral.html" style="--c:#76a6ff">Spectral <span>18</span></a>
+</nav>
+<footer>Data &amp; art from <a href="https://balatrowiki.org/" target="_blank" rel="noopener">balatrowiki.org</a></footer>
+</body>
+</html>
diff --git a/static/balatro.html b/static/balatro/jokers.html
similarity index 99%
rename from static/balatro.html
rename to static/balatro/jokers.html
index e1c1559..4268173 100644
--- a/static/balatro.html
+++ b/static/balatro/jokers.html
@@ -22,6 +22,12 @@
     background:var(--bg); border-bottom:1px solid var(--line);
     padding:10px 12px;
   }
+  .nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
+  .nav a{
+    font-size:12px; padding:6px 12px; border-radius:999px; text-decoration:none;
+    background:var(--bg2); border:1px solid var(--line); color:var(--muted);
+  }
+  .nav a.active{background:var(--gold); color:#15171c; border-color:transparent; font-weight:600}
   .title{display:flex; align-items:baseline; gap:8px; margin:0 0 8px}
   .title h1{font-size:18px; margin:0; letter-spacing:.3px}
   .title .count{font-size:12px; color:var(--muted)}
@@ -138,6 +144,7 @@
 <input class="rfilter" type="radio" name="rar" id="r-Rare">
 <input class="rfilter" type="radio" name="rar" id="r-Legendary">
 <header>
+  <nav class="nav"><a href="/balatro/jokers.html" class="active">Jokers</a><a href="/balatro/tarot.html">Tarot</a><a href="/balatro/planet.html">Planet</a><a href="/balatro/spectral.html">Spectral</a></nav>
   <div class="title"><h1>Balatro Jokers</h1><span class="count">150 jokers</span></div>
   <input class="search" id="q" type="search" placeholder="Search name or effect..." autocomplete="off">
   <div class="filters">
diff --git a/static/balatro/planet.html b/static/balatro/planet.html
new file mode 100644
index 0000000..8738f87
--- /dev/null
+++ b/static/balatro/planet.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Balatro Planet</title>
+<style>
+  :root{
+    --bg:#15171c; --bg2:#1d2027; --card:#252934; --line:#343a47;
+    --txt:#e8ebf2; --muted:#c3cad8; --accent:#69e6ff;
+  }
+  *{box-sizing:border-box}
+  html{-webkit-text-size-adjust:100%}
+  body{
+    margin:0; background:var(--bg); color:var(--txt);
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+    line-height:1.35; -webkit-font-smoothing:antialiased;
+  }
+  header{background:var(--bg); border-bottom:1px solid var(--line); padding:10px 12px}
+  .nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
+  .nav a{
+    font-size:12px; padding:6px 12px; border-radius:999px; text-decoration:none;
+    background:var(--bg2); border:1px solid var(--line); color:var(--muted);
+  }
+  .nav a.active{background:var(--accent); color:#15171c; border-color:transparent; font-weight:600}
+  .title{display:flex; align-items:baseline; gap:8px; margin:0 0 8px}
+  .title h1{font-size:18px; margin:0; letter-spacing:.3px}
+  .title .count{font-size:12px; color:var(--muted)}
+  .search{
+    width:100%; padding:9px 12px; font-size:16px; color:var(--txt);
+    background:var(--bg2); border:1px solid var(--line); border-radius:10px; outline:none;
+  }
+  .search:focus{border-color:#5566aa}
+  .search::-webkit-search-cancel-button{display:none}
+
+  main{padding:12px; max-width:1100px; margin:0 auto}
+  .grid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
+  @media (max-width:520px){
+    .grid{grid-template-columns:repeat(3,1fr); gap:6px}
+    .card{padding:7px 5px 8px}
+    .card img{height:64px}
+    .name{font-size:12px}
+    .effect{font-size:11px}
+  }
+  .card{
+    display:flex; flex-direction:column; align-items:center; text-align:center;
+    background:var(--card); border:1px solid var(--line); border-radius:12px;
+    padding:9px 8px 10px; position:relative;
+    border-top:3px solid var(--accent); -webkit-tap-highlight-color:transparent;
+  }
+  .card[open]{background:#2c313e}
+  .card summary{
+    display:flex; flex-direction:column; align-items:center;
+    list-style:none; cursor:pointer; width:100%;
+  }
+  .card summary::-webkit-details-marker{display:none}
+  .card img{
+    width:auto; height:78px; image-rendering:pixelated;
+    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
+  }
+  .name{font-weight:600; font-size:13px; margin:6px 0 2px; line-height:1.2; min-height:2.4em}
+  .effect{font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:6px}
+  .wiki{
+    margin-top:7px; font-size:11px; color:#69e6ff;
+    text-decoration:underline; text-underline-offset:2px; display:inline-block;
+  }
+  .card.nomatch{display:none}
+  @media (min-width:768px){
+    .grid{grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px}
+    .card{padding:14px 12px 16px}
+    .card img{width:142px; height:190px}
+    .name{font-size:15px}
+    .effect{font-size:13px}
+  }
+  .totop{
+    position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0));
+    width:46px; height:46px; border-radius:50%; z-index:20;
+    background:rgba(37,41,52,.7);
+    border:1px solid var(--line); color:var(--txt); font-size:22px; line-height:46px;
+    text-align:center; text-decoration:none;
+  }
+  footer{text-align:center; color:var(--muted); font-size:11px; padding:18px 12px 30px}
+  footer a{color:var(--muted)}
+
+  .effect p{margin:0}
+  .effect b{font-weight:600}
+  .hl-chips,.hl-blue{color:#0093ff}
+  .hl-mult,.hl-red,.hl-xmult{color:#ff4c40}
+  .hl-cyan{color:#69e6ff}
+  .hl-gray,.hl-grey{color:#b1b1b1}
+  .hl-green{color:#35bd86}
+  .hl-orange{color:#ff8f00}
+  .hl-purple{color:#ca8cff}
+  .hl-sblue{color:#76a6ff}
+  .hl-yellow,.hl-edition{color:#f5b244}
+  .suit-diamond{color:#ffa300}
+  .suit-heart{color:#f83b2f}
+  .suit-spade{color:#8fb1b8}
+  .suit-club{color:#009cfd}
+</style>
+</head>
+<body id="top">
+<header>
+  <nav class="nav"><a href="/balatro/jokers.html">Jokers</a><a href="/balatro/tarot.html">Tarot</a><a href="/balatro/planet.html" class="active">Planet</a><a href="/balatro/spectral.html">Spectral</a></nav>
+  <div class="title"><h1>Balatro Planet</h1><span class="count">12 planet</span></div>
+  <input class="search" id="q" type="search" placeholder="Search name or effect..." autocomplete="off">
+</header>
+<main><div class="grid">
+    <details class="card" data-search="pluto increases high card hand value by +1 mult and +10 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Pluto.png" alt="Pluto" width="142" height="190">
+        <span class="name">Pluto</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>High Card</b></span> hand value by <span class="hl-mult">+1</span>&#160;Mult and <span class="hl-chips">+10</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Pluto" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="mercury increases pair hand value by +1 mult and +15 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Mercury.png" alt="Mercury" width="142" height="190">
+        <span class="name">Mercury</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Pair</b></span> hand value by <span class="hl-mult">+1</span>&#160;Mult and <span class="hl-chips">+15</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Mercury" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="uranus increases two pair hand value by +1 mult and +20 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Uranus.png" alt="Uranus" width="142" height="190">
+        <span class="name">Uranus</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Two Pair</b></span> hand value by <span class="hl-mult">+1</span>&#160;Mult and <span class="hl-chips">+20</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Uranus" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="venus increases three of a kind hand value by +2 mult and +20 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Venus.png" alt="Venus" width="142" height="190">
+        <span class="name">Venus</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Three of a Kind</b></span> hand value by <span class="hl-mult">+2</span>&#160;Mult and <span class="hl-chips">+20</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Venus" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="saturn increases straight hand value by +3 mult and +30 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Saturn.png" alt="Saturn" width="142" height="190">
+        <span class="name">Saturn</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Straight</b></span> hand value by <span class="hl-mult">+3</span>&#160;Mult and <span class="hl-chips">+30</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Saturn" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="jupiter increases flush hand value by +2 mult and +15 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Jupiter.png" alt="Jupiter" width="142" height="190">
+        <span class="name">Jupiter</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Flush</b></span> hand value by <span class="hl-mult">+2</span>&#160;Mult and <span class="hl-chips">+15</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Jupiter" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="earth increases full house hand value by +2 mult and +25 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Earth.png" alt="Earth" width="142" height="190">
+        <span class="name">Earth</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Full House</b></span> hand value by <span class="hl-mult">+2</span>&#160;Mult and <span class="hl-chips">+25</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Earth" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="mars increases four of a kind hand value by +3 mult and +30 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Mars.png" alt="Mars" width="142" height="190">
+        <span class="name">Mars</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Four of a Kind</b></span> hand value by <span class="hl-mult">+3</span>&#160;Mult and <span class="hl-chips">+30</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Mars" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="neptune increases straight flush hand value by +4 mult and +40 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Neptune.png" alt="Neptune" width="142" height="190">
+        <span class="name">Neptune</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Straight Flush</b></span> hand value by <span class="hl-mult">+4</span>&#160;Mult and <span class="hl-chips">+40</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Neptune" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="planet x increases five of a kind hand value by +3 mult and +35 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Planet_X.png" alt="Planet X" width="142" height="190">
+        <span class="name">Planet X</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Five of a Kind</b></span> hand value by <span class="hl-mult">+3</span>&#160;Mult and <span class="hl-chips">+35</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Planet_X" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="ceres increases flush house hand value by +4 mult and +40 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Ceres.png" alt="Ceres" width="142" height="190">
+        <span class="name">Ceres</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Flush House</b></span> hand value by <span class="hl-mult">+4</span>&#160;Mult and <span class="hl-chips">+40</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Ceres" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="eris increases flush five hand value by +3 mult and +50 chips">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Eris.png" alt="Eris" width="142" height="190">
+        <span class="name">Eris</span>
+      </summary>
+      <div class="effect"><p>Increases <span style="color:#ff8f00;"><b>Flush Five</b></span> hand value by <span class="hl-mult">+3</span>&#160;Mult and <span class="hl-chips">+50</span>&#160;Chips</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Eris" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+</div></main>
+<footer>Data &amp; art from <a href="https://balatrowiki.org/" target="_blank" rel="noopener">balatrowiki.org</a> &middot; tap a card for full details</footer>
+<a class="totop" href="#top" aria-label="Scroll to top" title="Back to top">&uarr;</a>
+<script>
+// Only behaviour CSS can't do: live text search across the cards.
+const cards = document.querySelectorAll('.card');
+document.getElementById('q').addEventListener('input', e => {
+  const v = e.target.value.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+  cards.forEach(c => c.classList.toggle('nomatch', v && !c.dataset.search.includes(v)));
+});
+</script>
+</body>
+</html>
diff --git a/static/balatro/spectral.html b/static/balatro/spectral.html
new file mode 100644
index 0000000..6d42838
--- /dev/null
+++ b/static/balatro/spectral.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Balatro Spectral</title>
+<style>
+  :root{
+    --bg:#15171c; --bg2:#1d2027; --card:#252934; --line:#343a47;
+    --txt:#e8ebf2; --muted:#c3cad8; --accent:#76a6ff;
+  }
+  *{box-sizing:border-box}
+  html{-webkit-text-size-adjust:100%}
+  body{
+    margin:0; background:var(--bg); color:var(--txt);
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+    line-height:1.35; -webkit-font-smoothing:antialiased;
+  }
+  header{background:var(--bg); border-bottom:1px solid var(--line); padding:10px 12px}
+  .nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
+  .nav a{
+    font-size:12px; padding:6px 12px; border-radius:999px; text-decoration:none;
+    background:var(--bg2); border:1px solid var(--line); color:var(--muted);
+  }
+  .nav a.active{background:var(--accent); color:#15171c; border-color:transparent; font-weight:600}
+  .title{display:flex; align-items:baseline; gap:8px; margin:0 0 8px}
+  .title h1{font-size:18px; margin:0; letter-spacing:.3px}
+  .title .count{font-size:12px; color:var(--muted)}
+  .search{
+    width:100%; padding:9px 12px; font-size:16px; color:var(--txt);
+    background:var(--bg2); border:1px solid var(--line); border-radius:10px; outline:none;
+  }
+  .search:focus{border-color:#5566aa}
+  .search::-webkit-search-cancel-button{display:none}
+
+  main{padding:12px; max-width:1100px; margin:0 auto}
+  .grid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
+  @media (max-width:520px){
+    .grid{grid-template-columns:repeat(3,1fr); gap:6px}
+    .card{padding:7px 5px 8px}
+    .card img{height:64px}
+    .name{font-size:12px}
+    .effect{font-size:11px}
+  }
+  .card{
+    display:flex; flex-direction:column; align-items:center; text-align:center;
+    background:var(--card); border:1px solid var(--line); border-radius:12px;
+    padding:9px 8px 10px; position:relative;
+    border-top:3px solid var(--accent); -webkit-tap-highlight-color:transparent;
+  }
+  .card[open]{background:#2c313e}
+  .card summary{
+    display:flex; flex-direction:column; align-items:center;
+    list-style:none; cursor:pointer; width:100%;
+  }
+  .card summary::-webkit-details-marker{display:none}
+  .card img{
+    width:auto; height:78px; image-rendering:pixelated;
+    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
+  }
+  .name{font-weight:600; font-size:13px; margin:6px 0 2px; line-height:1.2; min-height:2.4em}
+  .effect{font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:6px}
+  .wiki{
+    margin-top:7px; font-size:11px; color:#69e6ff;
+    text-decoration:underline; text-underline-offset:2px; display:inline-block;
+  }
+  .card.nomatch{display:none}
+  @media (min-width:768px){
+    .grid{grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px}
+    .card{padding:14px 12px 16px}
+    .card img{width:142px; height:190px}
+    .name{font-size:15px}
+    .effect{font-size:13px}
+  }
+  .totop{
+    position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0));
+    width:46px; height:46px; border-radius:50%; z-index:20;
+    background:rgba(37,41,52,.7);
+    border:1px solid var(--line); color:var(--txt); font-size:22px; line-height:46px;
+    text-align:center; text-decoration:none;
+  }
+  footer{text-align:center; color:var(--muted); font-size:11px; padding:18px 12px 30px}
+  footer a{color:var(--muted)}
+
+  .effect p{margin:0}
+  .effect b{font-weight:600}
+  .hl-chips,.hl-blue{color:#0093ff}
+  .hl-mult,.hl-red,.hl-xmult{color:#ff4c40}
+  .hl-cyan{color:#69e6ff}
+  .hl-gray,.hl-grey{color:#b1b1b1}
+  .hl-green{color:#35bd86}
+  .hl-orange{color:#ff8f00}
+  .hl-purple{color:#ca8cff}
+  .hl-sblue{color:#76a6ff}
+  .hl-yellow,.hl-edition{color:#f5b244}
+  .suit-diamond{color:#ffa300}
+  .suit-heart{color:#f83b2f}
+  .suit-spade{color:#8fb1b8}
+  .suit-club{color:#009cfd}
+</style>
+</head>
+<body id="top">
+<header>
+  <nav class="nav"><a href="/balatro/jokers.html">Jokers</a><a href="/balatro/tarot.html">Tarot</a><a href="/balatro/planet.html">Planet</a><a href="/balatro/spectral.html" class="active">Spectral</a></nav>
+  <div class="title"><h1>Balatro Spectral</h1><span class="count">18 spectral</span></div>
+  <input class="search" id="q" type="search" placeholder="Search name or effect..." autocomplete="off">
+</header>
+<main><div class="grid">
+    <details class="card" data-search="familiar destroy 1 random card in your hand, add 3 random enhanced face cards to your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Familiar.png" alt="Familiar" width="142" height="190">
+        <span class="name">Familiar</span>
+      </summary>
+      <div class="effect"><p>Destroy <span class="hl-orange">1</span> random card in your hand, add <span class="hl-orange">3</span> random <span class="hl-orange">Enhanced</span> <span class="hl-orange">face cards</span> to your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Familiar" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="grim destroy 1 random card in your hand, add 2 random enhanced aces to your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Grim.png" alt="Grim" width="142" height="190">
+        <span class="name">Grim</span>
+      </summary>
+      <div class="effect"><p>Destroy <span class="hl-orange">1</span> random card in your hand, add <span class="hl-orange">2</span> random <span class="hl-orange">Enhanced</span> <span class="hl-orange">Aces</span> to your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Grim" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="incantation destroy 1 random card in your hand, add 4 random enhanced numbered cards to your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Incantation.png" alt="Incantation" width="142" height="190">
+        <span class="name">Incantation</span>
+      </summary>
+      <div class="effect"><p>Destroy <span class="hl-orange">1</span> random card in your hand, add <span class="hl-orange">4</span> random <span class="hl-orange">Enhanced</span> <span class="hl-orange">numbered cards</span> to your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Incantation" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="talisman add a gold seal to 1 selected card in your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Talisman.png" alt="Talisman" width="142" height="190">
+        <span class="name">Talisman</span>
+      </summary>
+      <div class="effect"><p>Add a <span class="hl-orange">Gold Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Talisman" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="aura add foil , holographic , or polychrome effect to 1 selected card in hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Aura.png" alt="Aura" width="142" height="190">
+        <span class="name">Aura</span>
+      </summary>
+      <div class="effect"><p>Add <span class="hl-edition">Foil</span>, <span class="hl-edition">Holographic</span>, or <span class="hl-edition">Polychrome</span> effect to <span class="hl-orange">1</span> selected card in hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Aura" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="wraith creates a random rare joker , sets money to $0">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Wraith.png" alt="Wraith" width="142" height="190">
+        <span class="name">Wraith</span>
+      </summary>
+      <div class="effect"><p>Creates a random <span class="hl-red">Rare</span> <span class="hl-orange">Joker</span>, sets money to <b><span class="hl-yellow">$0</span></b></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Wraith" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="sigil converts all cards in hand to a single random suit">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Sigil.png" alt="Sigil" width="142" height="190">
+        <span class="name">Sigil</span>
+      </summary>
+      <div class="effect"><p>Converts all cards in hand to a single random <span class="hl-orange">suit</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Sigil" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="ouija converts all cards in hand to a single random rank -1 hand size">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Ouija.png" alt="Ouija" width="142" height="190">
+        <span class="name">Ouija</span>
+      </summary>
+      <div class="effect"><p>Converts all cards in hand to a single random <span class="hl-orange">rank</span><br><span class="hl-red">-1</span> hand size</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Ouija" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="ectoplasm add negative to a random joker, -1 hand size">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Ectoplasm.png" alt="Ectoplasm" width="142" height="190">
+        <span class="name">Ectoplasm</span>
+      </summary>
+      <div class="effect"><p>Add <span class="hl-edition">Negative</span> to a random <span class="hl-orange">Joker,</span> <span class="hl-red">-1</span> hand size</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Ectoplasm" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="immolate destroys 5 random cards in hand, gain $20">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Immolate.png" alt="Immolate" width="142" height="190">
+        <span class="name">Immolate</span>
+      </summary>
+      <div class="effect"><p>Destroys <span class="hl-orange">5</span> random cards in hand, gain <b><span class="hl-yellow">$20</span></b></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Immolate" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="ankh create a copy of a random joker , destroy all other jokers (removes negative from copy)">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Ankh.png" alt="Ankh" width="142" height="190">
+        <span class="name">Ankh</span>
+      </summary>
+      <div class="effect"><p>Create a copy of a random <span class="hl-orange">Joker</span>, destroy all other Jokers <br> <span class="hl-gray">(Removes <span class="hl-edition">Negative</span> from copy)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Ankh" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="deja vu add a red seal to 1 selected card in your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Deja_Vu.png" alt="Deja Vu" width="142" height="190">
+        <span class="name">Deja Vu</span>
+      </summary>
+      <div class="effect"><p>Add a <span class="hl-red">Red Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Deja_Vu" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="hex add polychrome to a random joker , destroy all other jokers">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Hex.png" alt="Hex" width="142" height="190">
+        <span class="name">Hex</span>
+      </summary>
+      <div class="effect"><p>Add <span class="hl-edition">Polychrome</span> to a random <span class="hl-orange">Joker</span>, destroy all other Jokers</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Hex" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="trance add a blue seal to 1 selected card in your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Trance.png" alt="Trance" width="142" height="190">
+        <span class="name">Trance</span>
+      </summary>
+      <div class="effect"><p>Add a <span class="hl-blue">Blue Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Trance" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="medium add a purple seal to 1 selected card in your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Medium.png" alt="Medium" width="142" height="190">
+        <span class="name">Medium</span>
+      </summary>
+      <div class="effect"><p>Add a <span class="hl-purple">Purple Seal</span> to <span class="hl-orange">1</span> selected card in your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Medium" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="cryptid create 2 copies of 1 selected card in your hand">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Cryptid.png" alt="Cryptid" width="142" height="190">
+        <span class="name">Cryptid</span>
+      </summary>
+      <div class="effect"><p>Create <span class="hl-orange">2</span> copies of <span class="hl-orange">1</span> selected card in your hand</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Cryptid" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the soul creates a legendary joker (must have room)">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Soul.png" alt="The Soul" width="142" height="190">
+        <span class="name">The Soul</span>
+      </summary>
+      <div class="effect"><p>Creates a <span class="hl-purple">Legendary</span> Joker <br> <span class="hl-gray">(Must have room)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Soul" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="black hole upgrade every poker hand by 1 level">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Black_Hole.png" alt="Black Hole" width="142" height="190">
+        <span class="name">Black Hole</span>
+      </summary>
+      <div class="effect"><p>Upgrade every <span class="hl-purple">poker hand</span> by <span class="hl-orange">1</span> level</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Black_Hole" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+</div></main>
+<footer>Data &amp; art from <a href="https://balatrowiki.org/" target="_blank" rel="noopener">balatrowiki.org</a> &middot; tap a card for full details</footer>
+<a class="totop" href="#top" aria-label="Scroll to top" title="Back to top">&uarr;</a>
+<script>
+// Only behaviour CSS can't do: live text search across the cards.
+const cards = document.querySelectorAll('.card');
+document.getElementById('q').addEventListener('input', e => {
+  const v = e.target.value.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+  cards.forEach(c => c.classList.toggle('nomatch', v && !c.dataset.search.includes(v)));
+});
+</script>
+</body>
+</html>
diff --git a/static/balatro/tarot.html b/static/balatro/tarot.html
new file mode 100644
index 0000000..461f1ae
--- /dev/null
+++ b/static/balatro/tarot.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<title>Balatro Tarot</title>
+<style>
+  :root{
+    --bg:#15171c; --bg2:#1d2027; --card:#252934; --line:#343a47;
+    --txt:#e8ebf2; --muted:#c3cad8; --accent:#ca8cff;
+  }
+  *{box-sizing:border-box}
+  html{-webkit-text-size-adjust:100%}
+  body{
+    margin:0; background:var(--bg); color:var(--txt);
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+    line-height:1.35; -webkit-font-smoothing:antialiased;
+  }
+  header{background:var(--bg); border-bottom:1px solid var(--line); padding:10px 12px}
+  .nav{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
+  .nav a{
+    font-size:12px; padding:6px 12px; border-radius:999px; text-decoration:none;
+    background:var(--bg2); border:1px solid var(--line); color:var(--muted);
+  }
+  .nav a.active{background:var(--accent); color:#15171c; border-color:transparent; font-weight:600}
+  .title{display:flex; align-items:baseline; gap:8px; margin:0 0 8px}
+  .title h1{font-size:18px; margin:0; letter-spacing:.3px}
+  .title .count{font-size:12px; color:var(--muted)}
+  .search{
+    width:100%; padding:9px 12px; font-size:16px; color:var(--txt);
+    background:var(--bg2); border:1px solid var(--line); border-radius:10px; outline:none;
+  }
+  .search:focus{border-color:#5566aa}
+  .search::-webkit-search-cancel-button{display:none}
+
+  main{padding:12px; max-width:1100px; margin:0 auto}
+  .grid{display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
+  @media (max-width:520px){
+    .grid{grid-template-columns:repeat(3,1fr); gap:6px}
+    .card{padding:7px 5px 8px}
+    .card img{height:64px}
+    .name{font-size:12px}
+    .effect{font-size:11px}
+  }
+  .card{
+    display:flex; flex-direction:column; align-items:center; text-align:center;
+    background:var(--card); border:1px solid var(--line); border-radius:12px;
+    padding:9px 8px 10px; position:relative;
+    border-top:3px solid var(--accent); -webkit-tap-highlight-color:transparent;
+  }
+  .card[open]{background:#2c313e}
+  .card summary{
+    display:flex; flex-direction:column; align-items:center;
+    list-style:none; cursor:pointer; width:100%;
+  }
+  .card summary::-webkit-details-marker{display:none}
+  .card img{
+    width:auto; height:78px; image-rendering:pixelated;
+    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
+  }
+  .name{font-weight:600; font-size:13px; margin:6px 0 2px; line-height:1.2; min-height:2.4em}
+  .effect{font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:6px}
+  .wiki{
+    margin-top:7px; font-size:11px; color:#69e6ff;
+    text-decoration:underline; text-underline-offset:2px; display:inline-block;
+  }
+  .card.nomatch{display:none}
+  @media (min-width:768px){
+    .grid{grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px}
+    .card{padding:14px 12px 16px}
+    .card img{width:142px; height:190px}
+    .name{font-size:15px}
+    .effect{font-size:13px}
+  }
+  .totop{
+    position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0));
+    width:46px; height:46px; border-radius:50%; z-index:20;
+    background:rgba(37,41,52,.7);
+    border:1px solid var(--line); color:var(--txt); font-size:22px; line-height:46px;
+    text-align:center; text-decoration:none;
+  }
+  footer{text-align:center; color:var(--muted); font-size:11px; padding:18px 12px 30px}
+  footer a{color:var(--muted)}
+
+  .effect p{margin:0}
+  .effect b{font-weight:600}
+  .hl-chips,.hl-blue{color:#0093ff}
+  .hl-mult,.hl-red,.hl-xmult{color:#ff4c40}
+  .hl-cyan{color:#69e6ff}
+  .hl-gray,.hl-grey{color:#b1b1b1}
+  .hl-green{color:#35bd86}
+  .hl-orange{color:#ff8f00}
+  .hl-purple{color:#ca8cff}
+  .hl-sblue{color:#76a6ff}
+  .hl-yellow,.hl-edition{color:#f5b244}
+  .suit-diamond{color:#ffa300}
+  .suit-heart{color:#f83b2f}
+  .suit-spade{color:#8fb1b8}
+  .suit-club{color:#009cfd}
+</style>
+</head>
+<body id="top">
+<header>
+  <nav class="nav"><a href="/balatro/jokers.html">Jokers</a><a href="/balatro/tarot.html" class="active">Tarot</a><a href="/balatro/planet.html">Planet</a><a href="/balatro/spectral.html">Spectral</a></nav>
+  <div class="title"><h1>Balatro Tarot</h1><span class="count">22 tarot</span></div>
+  <input class="search" id="q" type="search" placeholder="Search name or effect..." autocomplete="off">
+</header>
+<main><div class="grid">
+    <details class="card" data-search="the fool creates the last tarot or planet card used during this run the fool excluded">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Fool.png" alt="The Fool" width="142" height="190">
+        <span class="name">The Fool</span>
+      </summary>
+      <div class="effect"><p>Creates the last <span class="hl-purple">Tarot</span> or <span class="hl-cyan">Planet</span> card used during this run<br><small><span class="hl-purple">The Fool</span> excluded</small></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Fool" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the magician enhances 2 selected cards to lucky cards">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Magician.png" alt="The Magician" width="142" height="190">
+        <span class="name">The Magician</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">2</span> selected cards to <span class="hl-orange">Lucky Cards</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Magician" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the high priestess creates up to 2 random planet cards (must have room)">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_High_Priestess.png" alt="The High Priestess" width="142" height="190">
+        <span class="name">The High Priestess</span>
+      </summary>
+      <div class="effect"><p>Creates up to <span class="hl-orange">2</span> random <span class="hl-cyan">Planet</span> cards<br><span class="hl-gray">(Must have room)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_High_Priestess" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the empress enhances 2 selected cards to mult cards">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Empress.png" alt="The Empress" width="142" height="190">
+        <span class="name">The Empress</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">2</span> selected cards to <span class="hl-orange">Mult Cards</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Empress" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the emperor creates up to 2 random tarot cards (must have room)">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Emperor.png" alt="The Emperor" width="142" height="190">
+        <span class="name">The Emperor</span>
+      </summary>
+      <div class="effect"><p>Creates up to <span class="hl-orange">2</span> random <span class="hl-purple">Tarot</span> cards<br><span class="hl-gray">(Must have room)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Emperor" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the hierophant enhances 2 selected cards to bonus cards">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Hierophant.png" alt="The Hierophant" width="142" height="190">
+        <span class="name">The Hierophant</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">2</span> selected cards to <span class="hl-orange">Bonus Cards</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Hierophant" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the lovers enhances 1 selected card into a wild card">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Lovers.png" alt="The Lovers" width="142" height="190">
+        <span class="name">The Lovers</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">1</span> selected card into a <span class="hl-orange">Wild Card</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Lovers" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the chariot enhances 1 selected card into a steel card">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Chariot.png" alt="The Chariot" width="142" height="190">
+        <span class="name">The Chariot</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">1</span> selected card into a <span class="hl-orange">Steel Card</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Chariot" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="justice enhances 1 selected card into a glass card">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Justice.png" alt="Justice" width="142" height="190">
+        <span class="name">Justice</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">1</span> selected card into a <span class="hl-orange">Glass Card</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Justice" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the hermit doubles money (max of $20 )">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Hermit.png" alt="The Hermit" width="142" height="190">
+        <span class="name">The Hermit</span>
+      </summary>
+      <div class="effect"><p>Doubles money<br><span class="hl-grey">(Max of <b><span class="hl-yellow">$20</span></b>)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Hermit" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the wheel of fortune 1 in 4 chance to add foil , holographic , or polychrome edition to a random joker">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Wheel_of_Fortune.png" alt="The Wheel of Fortune" width="142" height="190">
+        <span class="name">The Wheel of Fortune</span>
+      </summary>
+      <div class="effect"><p><span class="hl-green">1 in 4</span> chance to add <span class="hl-edition">Foil</span>, <span class="hl-edition">Holographic</span>, or <span class="hl-edition">Polychrome</span> edition to a random <span class="hl-orange">Joker</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Wheel_of_Fortune" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="strength increases rank of up to 2 selected cards by 1">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Strength.png" alt="Strength" width="142" height="190">
+        <span class="name">Strength</span>
+      </summary>
+      <div class="effect"><p>Increases rank of up to <span class="hl-orange">2</span> selected cards by <span class="hl-orange">1</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Strength" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the hanged man destroys up to 2 selected cards">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Hanged_Man.png" alt="The Hanged Man" width="142" height="190">
+        <span class="name">The Hanged Man</span>
+      </summary>
+      <div class="effect"><p>Destroys up to <span class="hl-orange">2</span> selected cards</p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Hanged_Man" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="death select 2 cards, convert the left card into the right card (drag to rearrange)">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Death.png" alt="Death" width="142" height="190">
+        <span class="name">Death</span>
+      </summary>
+      <div class="effect"><p>Select <span class="hl-orange">2</span> cards, convert the <span class="hl-orange">left</span> card into the <span class="hl-orange">right</span> card<br><span class="hl-gray">(Drag to rearrange)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Death" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="temperance gives the total sell value of all current jokers (max of $50 )">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Temperance.png" alt="Temperance" width="142" height="190">
+        <span class="name">Temperance</span>
+      </summary>
+      <div class="effect"><p>Gives the total sell value of all current Jokers<br><span class="hl-grey">(Max of</span> <span class="hl-orange"><b><span class="hl-yellow">$50</span></b></span><span class="hl-grey">)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Temperance" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the devil enhances 1 selected card into a gold card">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Devil.png" alt="The Devil" width="142" height="190">
+        <span class="name">The Devil</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">1</span> selected card into a <span class="hl-orange">Gold Card</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Devil" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the tower enhances 1 selected card into a stone card">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Tower.png" alt="The Tower" width="142" height="190">
+        <span class="name">The Tower</span>
+      </summary>
+      <div class="effect"><p>Enhances <span class="hl-orange">1</span> selected card into a <span class="hl-orange">Stone Card</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Tower" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the star converts up to 3 selected cards to .mw-parser-output .suit-diamond{color:var(--suit-diamond)}.mw-parser-output .suit-heart{color:var(--suit-heart)}.mw-parser-output .suit-spade{color:var(--suit-spade)}.mw-parser-output .suit-club{color:var(--suit-club)} diamonds">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Star.png" alt="The Star" width="142" height="190">
+        <span class="name">The Star</span>
+      </summary>
+      <div class="effect"><p>Converts up to <span class="hl-orange">3</span> selected cards to <style data-mw-deduplicate="TemplateStyles:r10652">.mw-parser-output .suit-diamond{color:var(--suit-diamond)}.mw-parser-output .suit-heart{color:var(--suit-heart)}.mw-parser-output .suit-spade{color:var(--suit-spade)}.mw-parser-output .suit-club{color:var(--suit-club)}</style><span style="white-space: nowrap"><span class="mw-default-size suit-icon" typeof="mw:File"><img src="/images/Diamond_suit_icon.png?11540" decoding="async" loading="lazy" width="36" height="36" class="mw-file-element" data-file-width="36" data-file-height="36" /></span><span class="suit-diamond"><b>&#160;Diamonds</b></span></span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Star" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the moon converts up to 3 selected cards to clubs">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Moon.png" alt="The Moon" width="142" height="190">
+        <span class="name">The Moon</span>
+      </summary>
+      <div class="effect"><p>Converts up to <span class="hl-orange">3</span> selected cards to <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r10652" /><span style="white-space: nowrap"><span class="mw-default-size suit-icon" typeof="mw:File"><img src="/images/Club_suit_icon.png?4434c" decoding="async" loading="lazy" width="36" height="36" class="mw-file-element" data-file-width="36" data-file-height="36" /></span><span class="suit-club"><b>&#160;Clubs</b></span></span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Moon" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the sun converts up to 3 selected cards to hearts">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_Sun.png" alt="The Sun" width="142" height="190">
+        <span class="name">The Sun</span>
+      </summary>
+      <div class="effect"><p>Converts up to <span class="hl-orange">3</span> selected cards to <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r10652" /><span style="white-space: nowrap"><span class="mw-default-size suit-icon" typeof="mw:File"><img src="/images/Heart_suit_icon.png?bc8d1" decoding="async" loading="lazy" width="36" height="36" class="mw-file-element" data-file-width="36" data-file-height="36" /></span><span class="suit-heart"><b>&#160;Hearts</b></span></span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_Sun" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="judgement creates a random joker card (must have room)">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/Judgement.png" alt="Judgement" width="142" height="190">
+        <span class="name">Judgement</span>
+      </summary>
+      <div class="effect"><p>Creates a random <span class="hl-orange">Joker</span> card<br><span class="hl-gray">(Must have room)</span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/Judgement" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+    <details class="card" data-search="the world converts up to 3 selected cards to spades">
+      <summary>
+        <img loading="lazy" src="/media/balatro/images/The_World.png" alt="The World" width="142" height="190">
+        <span class="name">The World</span>
+      </summary>
+      <div class="effect"><p>Converts up to <span class="hl-orange">3</span> selected cards to <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r10652" /><span style="white-space: nowrap"><span class="mw-default-size suit-icon" typeof="mw:File"><img src="/images/Spade_suit_icon.png?b75c4" decoding="async" loading="lazy" width="36" height="36" class="mw-file-element" data-file-width="36" data-file-height="36" /></span><span class="suit-spade"><b>&#160;Spades</b></span></span></p></div>
+      <a class="wiki" href="https://balatrowiki.org/w/The_World" target="_blank" rel="noopener">Wiki &#8599;</a>
+    </details>
+</div></main>
+<footer>Data &amp; art from <a href="https://balatrowiki.org/" target="_blank" rel="noopener">balatrowiki.org</a> &middot; tap a card for full details</footer>
+<a class="totop" href="#top" aria-label="Scroll to top" title="Back to top">&uarr;</a>
+<script>
+// Only behaviour CSS can't do: live text search across the cards.
+const cards = document.querySelectorAll('.card');
+document.getElementById('q').addEventListener('input', e => {
+  const v = e.target.value.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+  cards.forEach(c => c.classList.toggle('nomatch', v && !c.dataset.search.includes(v)));
+});
+</script>
+</body>
+</html>
