hantim/timothykim.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tarot/planet/spectral pages, move balatro into balatro/
Build and Push Docker Image / build (push) Successful in 10s
Details

Browse Source
This commit is contained in:
Timothy Kim
2026-06-20 22:46:15 -04:00
parent dbeb311274
commit 4fcc8ba5ba
5 changed files with 830 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/balatro/index.html
+44
View File
@@ -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>
static/balatro.html → static/balatro/jokers.html
+7
View File
@@ -22,6 +22,12 @@
background:var(--bg); border-bottom:1px solid var(--line); background:var(--bg); border-bottom:1px solid var(--line);
padding:10px 12px; 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{display:flex; align-items:baseline; gap:8px; margin:0 0 8px}
.title h1{font-size:18px; margin:0; letter-spacing:.3px} .title h1{font-size:18px; margin:0; letter-spacing:.3px}
.title .count{font-size:12px; color:var(--muted)} .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-Rare">
<input class="rfilter" type="radio" name="rar" id="r-Legendary"> <input class="rfilter" type="radio" name="rar" id="r-Legendary">
<header> <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> <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"> <input class="search" id="q" type="search" placeholder="Search name or effect..." autocomplete="off">
<div class="filters"> <div class="filters">
static/balatro/planet.html
+217
View File
@@ -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>
static/balatro/spectral.html
+265
View File
@@ -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>
static/balatro/tarot.html
+297
View File
@@ -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>