298 lines
19 KiB
HTML
298 lines
19 KiB
HTML
<!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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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 ↗</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> Diamonds</b></span></span></p></div>
|
|
<a class="wiki" href="https://balatrowiki.org/w/The_Star" target="_blank" rel="noopener">Wiki ↗</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> Clubs</b></span></span></p></div>
|
|
<a class="wiki" href="https://balatrowiki.org/w/The_Moon" target="_blank" rel="noopener">Wiki ↗</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> Hearts</b></span></span></p></div>
|
|
<a class="wiki" href="https://balatrowiki.org/w/The_Sun" target="_blank" rel="noopener">Wiki ↗</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 ↗</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> Spades</b></span></span></p></div>
|
|
<a class="wiki" href="https://balatrowiki.org/w/The_World" target="_blank" rel="noopener">Wiki ↗</a>
|
|
</details>
|
|
</div></main>
|
|
<footer>Data & art from <a href="https://balatrowiki.org/" target="_blank" rel="noopener">balatrowiki.org</a> · tap a card for full details</footer>
|
|
<a class="totop" href="#top" aria-label="Scroll to top" title="Back to top">↑</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>
|