Moulin-Rouge-Tarot-5

Running

App Files Files Community

awacke1 commited on Aug 15

Commit

cc2cb33

verified ·

1 Parent(s): 3e6b272

Update index.html

Browse files

Files changed (1) hide show

index.html +370 -170

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Moulin Rouge! Tarot Reading</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Crimson+Text:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
@@ -16,95 +16,133 @@
             --primary-text: #f5e6d3;
             --secondary-text: #3b0909;
             --accent-color: #d4af37; /* Gold */
-            --shadow-color: rgba(0, 0, 0, 0.4);
             --card-back-bg: linear-gradient(145deg, #8B0000, #4a0000); /* Deep Red */
         }
         body {
             font-family: 'Crimson Text', serif;
             background-color: var(--bg-color);
             background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
             background-size: 15px 15px;
             color: var(--primary-text);
-            margin: 0;
-            padding: 2rem;
             display: flex;
             flex-direction: column;
             align-items: center;
-            min-height: 100vh;
             text-align: center;
         }
         h1 {
             font-family: 'Playfair Display', serif;
             font-weight: 700;
             font-style: italic;
             color: var(--accent-color);
             text-shadow: 2px 2px 5px var(--shadow-color);
-            margin-bottom: 1rem;
-            font-size: 2.5rem;
-        }
-        p#instructions {
-            max-width: 600px;
-            margin-bottom: 2rem;
-            font-style: italic;
-            opacity: 0.9;
-            font-size: 1.1rem;
         }
-        /* --- Main Layout --- */
-        #table {
             display: flex;
-            flex-direction: column;
             align-items: center;
-            gap: 2rem;
             width: 100%;
         }
         #controls {
             display: flex;
             gap: 1rem;
-            margin-bottom: 2rem;
         }
         button {
             font-family: 'Playfair Display', serif;
-            padding: 0.8rem 1.5rem;
-            font-size: 1rem;
             border: 2px solid var(--accent-color);
             background-color: transparent;
             color: var(--accent-color);
             border-radius: 5px;
             cursor: pointer;
             transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1);
             text-transform: uppercase;
-            letter-spacing: 1px;
         }
         button:hover, button:focus {
             background-color: var(--accent-color);
             color: var(--secondary-text);
-            box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
             transform: translateY(-2px);
         }
-        /* --- Card Slots and Reading Area --- */
         #card-slots {
             display: flex;
             justify-content: center;
-            flex-wrap: wrap;
-            gap: 1.5rem;
-            perspective: 1200px;
             width: 100%;
-            min-height: 450px; /* Ensure space for cards */
         }
         .card-slot {
-            width: 300px;
-            height: 450px;
             position: relative;
         }
         .card-slot .placeholder {
@@ -117,17 +155,16 @@
              justify-content: center;
              align-items: center;
              font-style: italic;
-             opacity: 0.7;
              color: var(--accent-color);
         }
         .placeholder span {
             font-family: 'Playfair Display', serif;
-            font-size: 1.5rem;
             font-weight: bold;
         }
-        /* --- Card Styling & Flip Animation --- */
         .card {
             width: 100%;
             height: 100%;
@@ -136,112 +173,161 @@
             transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             cursor: pointer;
         }
-        .card.is-flipped {
-            transform: rotateY(180deg);
-        }
         .card-face {
             position: absolute;
             width: 100%;
             height: 100%;
             backface-visibility: hidden;
             border-radius: 15px;
-            box-shadow: 0 10px 25px var(--shadow-color);
             overflow: hidden;
             display: flex;
             flex-direction: column;
         }
         .card-back {
             background: var(--card-back-bg);
             border: 5px solid var(--accent-color);
             display: flex;
             justify-content: center;
             align-items: center;
         }
-        .card-back-design {
-            width: 80%;
-            height: 90%;
-            border: 2px solid var(--accent-color);
-            border-radius: 10px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 4rem;
-            color: var(--accent-color);
-            opacity: 0.8;
-            font-family: 'Playfair Display', serif;
-        }
         .card-front {
             background-color: var(--card-bg);
             color: var(--secondary-text);
             transform: rotateY(180deg);
-            padding: 1rem;
             text-align: left;
-            overflow-y: auto;
         }
-        /* --- Card Content Styling --- */
         .card-header {
             text-align: center;
             border-bottom: 2px solid var(--card-border);
-            padding-bottom: 0.5rem;
-            margin-bottom: 1rem;
         }
         .card-header h2 {
             margin: 0;
             font-family: 'Playfair Display', serif;
-            font-size: 1.2rem;
             color: #8B0000;
         }
         .card-header .tarot-title {
             font-style: italic;
-            font-size: 1rem;
             color: #666;
             margin-top: 0.25rem;
         }
         .card-body {
-            font-size: 0.95rem;
-            line-height: 1.5;
         }
-        .card-body p {
-            margin: 0 0 0.75rem 0;
         }
-        .card-body strong {
-            color: #8B0000;
-            font-weight: bold;
         }
-        .story, .lyric {
             font-style: italic;
-            background-color: rgba(224, 208, 184, 0.4);
-            padding: 0.5rem;
             border-radius: 8px;
             border-left: 3px solid var(--accent-color);
         }
         .lyric {
-            margin-top: 1rem;
             border-left-color: #8B0000;
         }
     </style>
 </head>
 <body>
     <h1>Moulin Rouge! Tarot</h1>
-    <p id="instructions">A three-card spread for Past, Present, and Future. Click "Draw Cards" to begin your spectacular, spectacular reading, then click each card to reveal its meaning.</p>
-    <div id="controls">
-        <button id="draw-button">Draw Cards</button>
-        <button id="reset-button">Reset</button>
     </div>
     <div id="table">
@@ -254,88 +340,80 @@
         // --- Data: Moulin Rouge Tarot Deck ---
         const tarot_data = [
             // Major Arcana
-            {"name":"Christian's Arrival","card":"0 - The Fool","classifier":"Major Arcana","character":"Christian","emojis":"✍️, 🚂","story":"A young, penniless writer arrives in Montmartre, full of naive ideals about truth, beauty, freedom, and love. He takes a leap of faith, leaving his old life behind to join the Bohemian revolution, unaware of the spectacular and tragic journey that awaits.","lyric":"The hills are alive with the sound of music..."},
             {"name":"Zidler the Showman","card":"I - The Magician","classifier":"Major Arcana","character":"Zidler","emojis":"🎩, 🎪","story":"Harold Zidler, the proprietor of the Moulin Rouge, is the master manipulator. He has all the tools—the dancers, the stage, the spectacle—and uses his willpower to manifest a world of fantasy and illusion to attract the rich and powerful.","lyric":"The show must go on!"},
-            {"name":"Satine's Secret","card":"II - The High Priestess","classifier":"Major Arcana","character":"Satine","emojis":"💎, 🤫","story":"Satine, the Sparkling Diamond, holds a deep secret: her consumption. She guards this intuitive knowledge, this hidden truth beneath the glittering surface, knowing it will change everything. She is the keeper of a mystery that others cannot yet see.","lyric":"A kiss on the hand may be quite continental, but diamonds are a girl's best friend."},
             {"name":"The Courtesan's Role","card":"III - The Empress","classifier":"Major Arcana","character":"Satine","emojis":"💃, ❤️","story":"As the star of the Moulin Rouge, Satine embodies earthly delights, sensuality, and creativity. She is the nurturing mother of the club, promising abundance and pleasure, her entire being a work of art designed to bring dreams to life.","lyric":"I'm the Sparkling Diamond!"},
-            {"name":"The Duke's Authority","card":"IV - The Emperor","classifier":"Major Arcana","character":"The Duke","emojis":"👑, 📜","story":"The Duke represents structure, power, and worldly authority. He seeks to own and control the Moulin Rouge and Satine, imposing his will through contracts and the unyielding structure of patronage. His rule is absolute and possessive.","lyric":"It's not that I'm a jealous man... I just don't like other people touching my things."},
-            {"name":"The Bohemian Ideal","card":"V - The Hierophant","classifier":"Major Arcana","character":"Toulouse-Lautrec","emojis":"🎨, 📜","story":"Toulouse-Lautrec is the high priest of the Bohemian revolution, teaching its core beliefs: truth, beauty, freedom, and love. He is the keeper of tradition for this unconventional group, guiding Christian and upholding their sacred values against the establishment.","lyric":"The greatest thing you'll ever learn is just to love and be loved in return."},
-            {"name":"The Choice","card":"VI - The Lovers","classifier":"Major Arcana","character":"Satine & Christian","emojis":"❤️, 💔","story":"The central conflict. Satine is torn between two paths, two values: the true, passionate love offered by Christian, and the financial security and career promised by the Duke. This is the ultimate choice of the heart, a defining alignment of values.","lyric":"Come what may, I will love you until my dying day."},
-            {"name":"Spectacular Spectacular","card":"VII - The Chariot","classifier":"Major Arcana","character":"The Bohemians","emojis":"🎭, ➡️","story":"Driven by the sheer force of will and Christian's creative vision, the Bohemians propel their play, 'Spectacular Spectacular,' forward. They harness the opposing forces of comedy and tragedy, love and jealousy, to steer their ambitious project toward opening night.","lyric":"So exciting! We'll write a show!"},
-            {"name":"A Woman Has to Be Strong","card":"VIII - Strength","classifier":"Major Arcana","character":"Satine","emojis":"🦁, ❤️‍🩹","story":"Satine must tame the wild beast of her own heart and the dangerous passions of the men around her. Her strength is not physical, but internal: the compassion, patience, and courage to maintain her composure and protect Christian in the face of the Duke's jealousy.","lyric":"The French are glad to die for love. They delight in fighting duels. But I prefer a man who lives and gives expensive jewels."},
-            {"name":"The Penniless Writer","card":"IX - The Hermit","classifier":"Major Arcana","character":"Christian","emojis":"✍️, 🏮","story":"After Satine's death, Christian retreats into the solitude of his garret. He withdraws from the world to process his grief and find the truth of his story, writing it down to bring the light of his inner wisdom out into the world.","lyric":"I've paid my whore... I owe you nothing."},
             {"name":"The Topsy-Turvy World","card":"X - Wheel of Fortune","classifier":"Major Arcana","character":"The Moulin Rouge","emojis":"🎡, 🎭","story":"The Moulin Rouge itself is a wheel of fortune. One night you're on top, the star of the show; the next, you're replaced. The fate of the show, the love affair, and the club are constantly turning, subject to the whims of luck, patronage, and destiny.","lyric":"Because you can, can, can!"},
-            {"name":"The Duke's Decree","card":"XI - Justice","classifier":"Major Arcana","character":"The Duke","emojis":"⚖️, 📜","story":"The Duke operates on a cold logic of cause and effect. He has paid for the club and for Satine, and he expects the deed to be honored. This card represents the clear, and often harsh, consequences of the contracts and choices that have been made.","lyric":"I am the Duke. That is the final word."},
-            {"name":"A Secret Love","card":"XII - The Hanged Man","classifier":"Major Arcana","character":"Christian & Satine","emojis":"🤫, 🤸","story":"Christian and Satine must suspend their lives, putting their love on hold and seeing the world from a new perspective to keep their affair secret. They are in a state of voluntary sacrifice, waiting for the right moment to act, seeing things differently than those around them.","lyric":"We should be lovers... we can't do that."},
-            {"name":"Consumption's Toll","card":"XIII - Death","classifier":"Major Arcana","character":"Satine","emojis":"💀, 🥀","story":"Satine's terminal illness represents an inevitable, unstoppable, and transformative end. It is the force that will bring the curtain down on her life and her love affair, clearing the way for the tragic but beautiful story that Christian will write.","lyric":"I'm dying, Christian. It's the consumption."},
-            {"name":"The Green Fairy","card":"XIV - Temperance","classifier":"Major Arcana","character":"The Bohemians","emojis":"🧪, 🧚","story":"The Bohemians blend inspiration (absinthe) with creativity (writing) to find a perfect synthesis. The Green Fairy represents this alchemical process, mixing different elements to create a new vision, a balanced path between madness and genius.","lyric":"I'm the Green Fairy! Freedom, beauty, truth, and love!"},
             {"name":"The Patronage Trap","card":"XV - The Devil","classifier":"Major Arcana","character":"The Duke","emojis":"⛓️, 💰","story":"The deal with the Duke is a trap. It offers the illusion of security and success, but binds Satine and the Moulin Rouge in a chain of ownership and jealousy. It represents the dark side of materialism, addiction to power, and possessive obsession.","lyric":"She is mine."},
             {"name":"The Final Confrontation","card":"XVI - The Tower","classifier":"Major Arcana","character":"The Stage","emojis":"💥, 🎭","story":"The climax of the play mirrors reality as the Duke's rage explodes. The false reality of the stage is shattered by a sudden, shocking revelation of truth. The entire structure of lies comes crashing down in a moment of violent, chaotic change.","lyric":"He's got a gun!"},
-            {"name":"The Elephant","card":"XVII - The Star","classifier":"Major Arcana","character":"Christian & Satine","emojis":"🐘, ✨","story":"In the sanctuary of the elephant, Christian and Satine find a moment of pure hope, inspiration, and serenity away from the chaos of the club. It is their guiding star, a place where their love feels pure and blessed by a higher power.","lyric":"Come what may... I will love you..."},
-            {"name":"The Unconscious Fear","card":"XVIII - The Moon","classifier":"Major Arcana","character":"Satine","emojis":"🌙, 😥","story":"Satine navigates a world of illusion and deception, both on stage and off. She is haunted by deep-seated fears of poverty and her past, forces that emerge from the unconscious and threaten to derail her path to love and security.","lyric":"Another hero, another mindless crime. Behind the curtain, in the pantomime."},
             {"name":"The Perfect Show","card":"XIX - The Sun","classifier":"Major Arcana","character":"Spectacular Spectacular","emojis":"☀️, 👏","story":"The moment the show succeeds, it is a burst of pure joy, success, and clarity. The vision of the Bohemians is realized, and for a brief, shining moment, everything is vibrant, triumphant, and celebrated by all.","lyric":"We have a show!"},
             {"name":"The Story is Told","card":"XX - Judgment","classifier":"Major Arcana","character":"Christian","emojis":"✍️, 🌅","story":"At the end, Christian answers a higher calling. He rises from his grief to write the story of his love, bringing absolution and rebirth. He judges the events that have passed and gives them meaning, resurrecting their love as a timeless tale.","lyric":"This is a story about love."},
-            {"name":"The Greatest Thing","card":"XXI - The World","classifier":"Major Arcana","character":"The Story","emojis":"🌍, ❤️","story":"The story of Christian and Satine reaches its successful completion. It becomes a whole, integrated narrative that teaches the 'greatest thing.' The cycle is complete, the lesson is learned, and their love has achieved a form of worldly immortality.","lyric":"The greatest thing you'll ever learn is just to love and be loved in return."},
-            // Wands (Christian - Passion/Creativity)
             {"name":"The Spark of a Story","card":"Ace of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"💡, 🔥","story":"The moment Christian, filled with the Bohemian spirit, has the initial, passionate idea for 'Spectacular Spectacular.' It is a pure burst of creative energy and inspiration, a new beginning and a call to action.","lyric":"A story about a penniless sitar player!"},
             {"name":"A Choice of Paths","card":"Two of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🗺️, 🤔","story":"Christian stands between the world of his father and the world of the Moulin Rouge. He holds his potential in his hands, making a bold choice to leave security behind and plan a future based on his creative passion.","lyric":"I don't want to be a lawyer!"},
-            {"name":"The Pitch","card":"Three of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🚢, 🔭","story":"Christian and the Bohemians pitch their show to Satine and Zidler. They are looking to the future, anticipating the results of their creative enterprise and waiting for their ship to come in.","lyric":"It's a story about a magical kingdom in faraway India!"},
-            {"name":"The First Rehearsal","card":"Four of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🎉, 🏡","story":"The cast and crew come together for the first time, celebrating the beginning of their new creative project. There is a sense of harmony, community, and the joy of a stable foundation for their work.","lyric":"The Bohemians, the children of the revolution!"},
             {"name":"Creative Conflict","card":"Five of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"😖, 🎭","story":"The rehearsals are chaotic. The writer, the composer, the actors—everyone has a different idea. This represents the minor struggles and creative clashes that are part of any ambitious project.","lyric":"But the ending is not happy!"},
-            {"name":"The Poet's Victory","card":"Six of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🏆, 👏","story":"Satine chooses Christian's song, 'Your Song,' over the Duke's wishes. It is a public recognition of his talent and a victory for his creative vision and passionate love.","lyric":"My gift is my song, and this one's for you."},
             {"name":"Defending the Story","card":"Seven of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🛡️, ✍️","story":"Christian must constantly defend his artistic integrity and the 'happy ending' of his play against the Duke's demands and Zidler's compromises. He stands his ground, fighting for his creative principles.","lyric":"The greatest thing is love!"},
-            {"name":"A Love Letter","card":"Eight of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"💌, ✈️","story":"Christian's passion and words travel swiftly to Satine's heart. 'Your Song' is a direct, energetic message of love that overcomes all obstacles to reach its destination.","lyric":"How wonderful life is while you're in the world."},
-            {"name":"The Burden of Love","card":"Nine of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🤕,  стойкос��ь","story":"Wounded by jealousy and the seeming betrayal of Satine, Christian is weary but not defeated. He gathers his resilience for one final stand, ready to defend his love despite the pain.","lyric":"I've paid my whore. I owe you nothing."},
-            {"name":"The Weight of the Story","card":"Ten of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"😫, ✍️","story":"At the end, Christian is left alone, burdened with the responsibility of telling their tragic story. The creative passion that once brought him joy has now become a heavy weight he must carry.","lyric":"A story about a love that will live forever."},
             {"name":"The Idealist","card":"Page of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🤩, 📜","story":"Christian at the very beginning: exploring his new passion for the Bohemian ideals, full of creative energy, and ready to embark on a new adventure without fully understanding the consequences.","lyric":"I am the writer!"},
-            {"name":"The Romantic Hero","card":"Knight of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🧗, ❤️‍🔥","story":"Christian's passionate and often reckless pursuit of Satine. He charges into the Moulin Rouge, climbs elephants, and writes poetry, driven by a fiery love that is both charming and impulsive.","lyric":"I've come to tell you my secret. I love you."},
-            {"name":"The Playwright","card":"Queen of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"👑, 🎭","story":"Christian, in his creative element, is confident, determined, and the center of the show's creation. He inspires others with his vibrant energy and his unwavering belief in the power of his story.","lyric":"No, it's about love! Overcoming all obstacles!"},
             {"name":"The Father","card":"King of Wands","classifier":"Wands - Fire - Creativity","character":"Christian's Father","emojis":"👨‍💼, 😠","story":"Christian's father represents the established, visionary leader of a different world. He has a clear vision for Christian's future (as a lawyer) and tries to control his son's passionate, creative impulses with his own authority.","lyric":"You'll be a lawyer!"},
-            // Pentacles (Satine - Physical/Material)
-            {"name":"The Duke's Offer","card":"Ace of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💎, 🤝","story":"The Duke makes his offer to fund the show in exchange for Satine. This is a new, tangible opportunity for wealth and security, a seed of prosperity planted in the material world.","lyric":"A man who lives and gives expensive jewels."},
             {"name":"The Double Life","card":"Two of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🎭, ⚖️","story":"Satine masterfully juggles two realities: her public performances for the Duke and her secret, private moments with Christian. She is constantly balancing her financial obligations with her heart's desires.","lyric":"I can't fall in love with anyone."},
             {"name":"A Star is Born","card":"Three of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💃, 👏","story":"Satine's performance in the initial pitch for the show demonstrates her skill and mastery of her craft. It is a moment of teamwork where her tangible talent is recognized as the key to the project's success.","lyric":"He's a maharajah!"},
-            {"name":"The Gilded Cage","card":"Four of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🔒, 💎","story":"Satine clings to the security promised by the Duke, fearing a return to poverty. She builds a wall around her heart, holding tightly to material stability at the expense of emotional freedom.","lyric":"We're creatures of the underworld. We can't afford to love."},
             {"name":"The Sickness","card":"Five of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"😥, ❄️","story":"Satine collapses from her consumption. This is a moment of physical hardship, illness, and feeling left out in the cold, facing the harsh reality that material wealth cannot protect her from her body's decline.","lyric":"I'm cold."},
             {"name":"A Diamond for a Song","card":"Six of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🎁, 💔","story":"The diamond necklace from the Duke. It is a gift of immense value, but it comes with strings attached. It represents a power imbalance, a charity that is really a transaction for ownership.","lyric":"It's for you..."},
-            {"name":"The Long Game","card":"Seven of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🤔, ⏳","story":"Satine must patiently wait for the show to become a success, hoping her investment of time and emotion will pay off in long-term security. She is assessing her progress, wondering if her hard work will bear fruit.","lyric":"I'm a courtesan. I'm paid to make men believe what they want to believe."},
-            {"name":"The Courtesan's Craft","card":"Eight of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💄, 🎭","story":"Satine's life is one of diligent, repetitive work. She is a master of her craft—the art of seduction and performance—and she dedicates herself to perfecting the skills required for her job.","lyric":"I make men believe I'm in love with them."},
             {"name":"The Real Actress","card":"Nine of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💃, 🕊️","story":"Satine dreams of becoming a 'real actress,' a life of independent success and self-sufficiency. This card represents the grace, discipline, and financial independence she longs for, free from the control of men.","lyric":"I want to be a real actress!"},
             {"name":"The Moulin Rouge Legacy","card":"Ten of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🏰, 💰","story":"The ultimate material goal: for the Moulin Rouge to be transformed from a dance hall into a legitimate, wealthy theatre. This represents the establishment of a lasting financial legacy and community stability.","lyric":"A real theatre!"},
-            {"name":"The Aspiring Actress","card":"Page of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🌟, 📖","story":"Satine at her core is a student of the material world, eager to learn the craft of acting and manifest a new, tangible reality for herself. She is focused on a new opportunity for earthly success.","lyric":"I can't just fall in love. I have to think about my future."},
             {"name":"The Diamond Dog","card":"Knight of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🐕, 💎","story":"Satine's public persona is hardworking, dependable, and focused on the practical goal of securing her future. She methodically works towards her material goals, even at a slow and steady pace.","lyric":"I am the Sparkling Diamond!"},
             {"name":"The Star Performer","card":"Queen of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"👑, 💃","story":"As the star of the Moulin Rouge, Satine is a nurturing, practical, and down-to-earth figure for the other dancers. She manages the material and physical world of the club with grace and authority.","lyric":"The show must go on!"},
-            {"name":"The Financier","card":"King of Pentacles","classifier":"Pentacles - Earth - Physical","character":"The Duke","emojis":"💰, 👑","story":"The Duke in his element: a master of wealth and enterprise. He uses his vast fortune to control the world around him, seeing everything as an investment and expecting a return. He is the king of the material world.","lyric":"I'm a financier. I invest in things."},
-            // Swords (The Duke - Conflict/Reason)
             {"name":"The Duke's Claim","card":"Ace of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"💡, 🗡️","story":"The Duke makes his intentions clear. His offer is a breakthrough moment of sharp, cold clarity: he will fund the show, but Satine is part of the deal. The truth of his possessiveness is revealed.","lyric":"She is mine."},
-            {"name":"The Stalemate","card":"Two of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"😑, ⚔️","story":"The Duke is willfully blind to the love between Christian and Satine, creating a tense stalemate. He blocks out the emotional truth, refusing to make a decision and keeping everyone in a state of suspended conflict.","lyric":"I don't believe you. You're a courtesan."},
             {"name":"The Jealous Heart","card":"Three of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"💔, 😥","story":"The moment the Duke realizes the truth of the affair. It is a painful, piercing sorrow born of betrayal and jealousy. The heartbreak is sharp, intellectual, and leads to a desire for revenge.","lyric":"He's been with her!"},
-            {"name":"The Ultimatum","card":"Four of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"⏳, 😠","story":"After a jealous outburst, the Duke retreats to plan his next move. This is a period of forced rest and contemplation, a strategic withdrawal to recover from a conflict and decide on a new course of action.","lyric":"If you're not with me, you're against me."},
             {"name":"A Hollow Victory","card":"Five of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"😒, 🏆","story":"The Duke forces Satine to send Christian away. He wins the conflict, but it is a pyrrhic victory that brings no joy, only the cold satisfaction of having asserted his power through cruelty.","lyric":"Tell him you don't love him."},
-            {"name":"The Escape","card":"Six of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"✈️, 😥","story":"The Duke, feeling betrayed, contemplates abandoning the whole project. This card represents a sorrowful transition, moving away from a difficult situation towards a calmer, but uncertain, future.","lyric":"I'm leaving. The show is off."},
             {"name":"The Deception","card":"Seven of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"🤫, 😈","story":"The Duke operates through deception and strategy, using Zidler as his pawn and manipulating events from behind the scenes. He acts alone, using his intellect to try and outsmart his rivals.","lyric":"I control everything."},
-            {"name":"The Gilded Cage's Bars","card":"Eight of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"⛓️, 😥","story":"The Duke creates a situation where Satine feels trapped and powerless, believing there is no way out of her obligation to him. He uses threats and logic to restrict her choices and isolate her.","lyric":"If you leave me, I'll kill your lover."},
             {"name":"The Nightmare","card":"Nine of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"😰, 😠","story":"The Duke is tormented by anxiety, paranoia, and jealousy over the affair. He is kept awake at night by his dark thoughts, a mental anguish born from his fear of betrayal and loss of control.","lyric":"He's been with her behind my back!"},
             {"name":"The Final Betrayal","card":"Ten of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"💀, 🗡️","story":"The Duke's rage culminates in the final, dramatic confrontation on stage. It is a moment of absolute ruin, the painful and violent end of the affair, brought about by his vengeful actions.","lyric":"My way, or the highway!"},
             {"name":"The Threat","card":"Page of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"📜, 🗣️","story":"The Duke's initial interactions are full of probing questions and tests. He is curious, communicative, and uses his words as a way to gather information and assert his intellectual dominance.","lyric":"A real actress..."},
             {"name":"The Pursuer","card":"Knight of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"🏃, 😠","story":"When his ownership is challenged, the Duke acts with swift, assertive, and ruthless ambition. He pursues his goal of possessing Satine with a single-minded and cold logic, regardless of the emotional cost.","lyric":"I will have her."},
-            {"name":"The Unseen Power","card":"Queen of Swords","classifier":"Swords - Air - Reason","character":"Marie","emojis":"👑, 🤫","story":"Marie, the head courtesan, operates with the sharp, unbiased clarity of experience. She understands the rules of the world they live in and offers Satine clear, if sometimes painful, advice based on impartial truth.","lyric":"You must make him believe you love him."},
             {"name":"The Patron","card":"King of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"👑, 🗡️","story":"The Duke in his ultimate form: a figure of immense intellectual and worldly power. He rules with authority, truth (as he sees it), and the law of contracts. He is the final arbiter of their fates.","lyric":"The show will end my way."},
-            // Cups (The Ensemble - Emotion/Dreams)
             {"name":"The Bohemian Ideal","card":"Ace of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"❤️, 🥂","story":"The overflowing of creative and emotional energy as the Bohemians welcome Christian. It is a moment of pure, divine love for their ideals, a new spiritual and emotional beginning.","lyric":"Freedom, Beauty, Truth, and Love!"},
             {"name":"A Perfect Union","card":"Two of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🤝, ❤️","story":"The partnership between Christian's words and Satine's voice. It is a mutual attraction and a union of two souls that forms the emotional heart of the show and their love story.","lyric":"We should be lovers..."},
-            {"name":"The Children of the Underworld","card":"Three of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🎉, 💃","story":"The joyous, celebratory moments of the cast creating their show. It is a time of friendship, community, and the emotional high of shared creative expression.","lyric":"Here we are now, entertainers!"},
             {"name":"Apathy and Dreams","card":"Four of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😒, 🤔","story":"During a creative block, the Bohemians are apathetic and withdrawn. They are contemplating their situation, waiting for a new emotional or spiritual offering to re-engage their passion.","lyric":"The writer's blocked!"},
-            {"name":"The Loss of an Ideal","card":"Five of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😥, 💔","story":"The moment the Bohemians realize the Duke's influence is corrupting their play and their ideals. It is a moment of grief and disappointment, focusing on what has been lost.","lyric":"It's about a penniless sitar player... and the woman he loves..."},
             {"name":"Nostalgia for the Garret","card":"Six of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🎨, 🏡","story":"The Bohemians look back on the innocent, happy times in their garret before the complications of the Duke and the Moulin Rouge. It is a moment of nostalgia for a simpler, purer emotional past.","lyric":"We are the children of the revolution!"},
             {"name":"The World of Illusion","card":"Seven of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"💭, 🧚","story":"The influence of absinthe and the Green Fairy. The Bohemians are presented with a world of fantasy, dreams, and illusion, with many creative choices but a danger of getting lost in the fantasy.","lyric":"The Green Fairy!"},
             {"name":"Leaving the Party","card":"Eight of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🚶, 🌙","story":"The moment Christian decides to leave the Moulin Rouge, walking away from the emotional chaos and disillusionment to seek a higher, more authentic truth, even if it means walking away alone.","lyric":"I've paid my whore."},
             {"name":"A Dream Come True","card":"Nine of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😊, 🥂","story":"The moment the show is a success and the cast gets everything they wished for: a hit play, a real theatre. It is a moment of pure emotional satisfaction and contentment.","lyric":"We have a show!"},
-            {"name":"Tragic Fulfillment","card":"Ten of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😭, ❤️","story":"The final tableau. Though tragic, the love story is complete and has achieved a kind of divine, emotional fulfillment. The community is united in their shared grief and the beauty of the love they witnessed.","lyric":"A love that will live forever."},
             {"name":"The Narcoleptic Argentinian","card":"Page of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😴, 💃","story":"The Argentinian represents the intuitive, emotional, and somewhat naive side of the ensemble. He is a messenger of unconscious feelings, often expressing them in surprising and creative ways.","lyric":"The hills are alive..."},
             {"name":"The Sitar Player","card":"Knight of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🎸, ❤️","story":"The romantic hero of 'Spectacular Spectacular.' He is on a quest driven by his heart, a romantic idealist who follows his emotions and creative vision above all else.","lyric":"I will love you..."},
             {"name":"The Indian Princess","card":"Queen of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"👑, 💧","story":"The character Satine plays. She is compassionate, intuitive, and in control of her emotional world, representing the emotional heart and soul of the story they are trying to tell.","lyric":"She is the queen of the underworld."},
@@ -346,14 +424,97 @@
         const drawButton = document.getElementById('draw-button');
         const resetButton = document.getElementById('reset-button');
         const cardSlotsContainer = document.getElementById('card-slots');
         let drawnCards = [];
-        // --- Functions ---
         /**
-         * Shuffles an array in place using the Fisher-Yates algorithm.
-         * @param {Array} array The array to shuffle.
          */
         function shuffle(array) {
             for (let i = array.length - 1; i > 0; i--) {
@@ -362,79 +523,119 @@
             }
         }
         /**
          * Creates the HTML for a single card.
-         * @param {Object} cardData The data for the card.
-         * @param {string} position The position in the reading (e.g., 'Past').
-         * @returns {HTMLElement} The card element.
          */
         function createCardElement(cardData, position) {
             const card = document.createElement('div');
             card.className = 'card';
             card.innerHTML = `
                 <div class="card-face card-back">
-                    <div class="card-back-design">
-                        <span>M</span>
-                    </div>
                 </div>
                 <div class="card-face card-front">
-                    <div class="card-header">
-                        <h2>${cardData.name} ${cardData.emojis}</h2>
-                        <p class="tarot-title">${cardData.card}</p>
-                    </div>
-                    <div class="card-body">
-                        <p><strong>Position:</strong> ${position}</p>
-                        <p><strong>Character/Theme:</strong> <em>${cardData.character}</em></p>
-                        <p class="story"><strong>Story:</strong> ${cardData.story}</p>
-                        <p class="lyric"><strong>Lyric:</strong> "${cardData.lyric}"</p>
                     </div>
                 </div>
             `;
             card.addEventListener('click', () => {
                 card.classList.toggle('is-flipped');
             });
             return card;
         }
         /**
-         * Draws three cards and places them in the slots.
          */
         function drawReading() {
             if (drawnCards.length > 0) return; // Prevent re-drawing
             shuffle(tarot_data);
             drawnCards = tarot_data.slice(0, 3);
-            const positions = ['The Past', 'The Present', 'The Future'];
-            cardSlotsContainer.innerHTML = ''; // Clear placeholders
             drawnCards.forEach((card, index) => {
                 const slot = document.createElement('div');
                 slot.className = 'card-slot';
                 const cardElement = createCardElement(card, positions[index]);
                 slot.appendChild(cardElement);
                 cardSlotsContainer.appendChild(slot);
             });
         }
         /**
          * Resets the reading to its initial state.
          */
         function resetReading() {
             drawnCards = [];
             cardSlotsContainer.innerHTML = '';
             setupPlaceholders();
         }
         /**
          * Sets up the initial placeholder slots.
          */
         function setupPlaceholders() {
-             const positions = ['The Past', 'The Present', 'The Future'];
              cardSlotsContainer.innerHTML = ''; // Clear any existing cards
              for (let i = 0; i < 3; i++) {
                 const placeholder = document.createElement('div');
@@ -451,10 +652,9 @@
         // --- Event Listeners ---
         drawButton.addEventListener('click', drawReading);
         resetButton.addEventListener('click', resetReading);
         // --- Initial Setup ---
         window.onload = setupPlaceholders;
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Moulin Rouge! Tarot</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Crimson+Text:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
             --primary-text: #f5e6d3;
             --secondary-text: #3b0909;
             --accent-color: #d4af37; /* Gold */
+            --shadow-color: rgba(0, 0, 0, 0.5);
             --card-back-bg: linear-gradient(145deg, #8B0000, #4a0000); /* Deep Red */
         }
+        html, body {
+            height: 100%;
+            margin: 0;
+            overflow: hidden; /* Prevent body scroll */
+        }
         body {
             font-family: 'Crimson Text', serif;
             background-color: var(--bg-color);
             background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
             background-size: 15px 15px;
             color: var(--primary-text);
+            padding: 0.5rem; /* Reduced padding */
             display: flex;
             flex-direction: column;
             align-items: center;
             text-align: center;
+            box-sizing: border-box;
         }
         h1 {
             font-family: 'Playfair Display', serif;
             font-weight: 700;
             font-style: italic;
             color: var(--accent-color);
             text-shadow: 2px 2px 5px var(--shadow-color);
+            margin: 0 0 0.5rem 0; /* Reduced margin */
+            font-size: clamp(1.8rem, 5vw, 2.2rem);
         }
+        /* --- Horizontal Top Bar --- */
+        #top-bar {
             display: flex;
+            justify-content: space-between;
             align-items: center;
             width: 100%;
+            max-width: 1200px;
+            padding: 0.5rem 1rem;
+            margin-bottom: 0.5rem; /* Reduced margin */
+            background-color: rgba(0,0,0,0.2);
+            border-radius: 10px;
+            border: 1px solid rgba(212, 175, 55, 0.2);
+            box-sizing: border-box;
+            gap: 1.5rem;
+            flex-shrink: 0;
+        }
+        p#instructions {
+            flex-grow: 1;
+            text-align: left;
+            margin: 0;
+            font-style: italic;
+            opacity: 0.9;
+            font-size: clamp(0.8rem, 1.5vw, 1rem);
         }
         #controls {
             display: flex;
             gap: 1rem;
+            flex-shrink: 0;
+        }
+        #score-board {
+            position: static; /* Removed absolute positioning */
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            background-color: rgba(0,0,0,0.3);
+            border: 1px solid var(--accent-color);
+            border-radius: 10px;
+            padding: 0.5rem 1rem;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
         }
+        #score-board h2 {
+            margin: 0;
+            font-family: 'Playfair Display', serif;
+            color: var(--accent-color);
+            font-size: 1.1rem;
+        }
+        #score-board .score-details {
+            text-align: right;
+        }
+        #score-board p { margin: 0; font-size: 1rem; }
+        #bonus-info { font-size: 0.8rem; font-style: italic; opacity: 0.8; }
         button {
             font-family: 'Playfair Display', serif;
+            padding: 0.7rem 1.2rem;
+            font-size: 0.9rem;
             border: 2px solid var(--accent-color);
             background-color: transparent;
             color: var(--accent-color);
             border-radius: 5px;
             cursor: pointer;
             transition: all 0.3s ease;
             text-transform: uppercase;
         }
         button:hover, button:focus {
             background-color: var(--accent-color);
             color: var(--secondary-text);
             transform: translateY(-2px);
         }
+        /* --- Main Table and Card Layout --- */
+        #table {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+            flex-grow: 1; /* Takes up remaining vertical space */
+            overflow: hidden; /* Hide any potential overflow */
+        }
         #card-slots {
             display: flex;
             justify-content: center;
+            align-items: center;
+            flex-wrap: nowrap; /* Prevent wrapping */
+            gap: 2vw; /* Responsive gap */
             width: 100%;
+            height: 100%; /* Fill the table area */
+            max-width: 1800px;
+            perspective: 2000px;
         }
         .card-slot {
+            height: 98%; /* Fill vertical space */
+            width: auto; /* Let width be determined by aspect ratio */
+            aspect-ratio: 9 / 16; /* Taller aspect ratio */
             position: relative;
+            max-width: 31%; /* Prevent cards from becoming too wide on ultrawide screens */
         }
         .card-slot .placeholder {
              justify-content: center;
              align-items: center;
              font-style: italic;
              color: var(--accent-color);
+             box-sizing: border-box;
         }
         .placeholder span {
             font-family: 'Playfair Display', serif;
+            font-size: clamp(1.2rem, 4vw, 1.8rem);
             font-weight: bold;
         }
+        /* --- Card Styling --- */
         .card {
             width: 100%;
             height: 100%;
             transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             cursor: pointer;
         }
+        .card.is-flipped { transform: rotateY(180deg); }
         .card-face {
             position: absolute;
             width: 100%;
             height: 100%;
             backface-visibility: hidden;
             border-radius: 15px;
+            box-shadow: 0 10px 30px var(--shadow-color);
             overflow: hidden;
             display: flex;
             flex-direction: column;
         }
         .card-back {
             background: var(--card-back-bg);
             border: 5px solid var(--accent-color);
             display: flex;
             justify-content: center;
             align-items: center;
+            box-sizing: border-box;
         }
+        .card-back .animated-svg-back { width: 100%; height: 100%; }
         .card-front {
             background-color: var(--card-bg);
             color: var(--secondary-text);
             transform: rotateY(180deg);
+            padding: 4%; /* Use percentage for scaling padding */
             text-align: left;
+            box-sizing: border-box;
+            position: relative; /* For background SVG positioning */
+        }
+        .background-suit-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            height: 80%;
+            opacity: 0.08;
+            z-index: 0;
+        }
+        .card-content {
+            position: relative;
+            z-index: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        .suit-border {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            pointer-events: none; /* Make sure it doesn't block clicks */
         }
+        /* --- Card Content Styling (NO SCROLL) --- */
         .card-header {
             text-align: center;
             border-bottom: 2px solid var(--card-border);
+            padding-bottom: 2%;
+            margin-bottom: 4%;
         }
         .card-header h2 {
             margin: 0;
             font-family: 'Playfair Display', serif;
+            font-size: 3.5vh; /* Proportional font size */
             color: #8B0000;
         }
         .card-header .tarot-title {
             font-style: italic;
+            font-size: 2.8vh; /* Proportional font size */
             color: #666;
             margin-top: 0.25rem;
         }
         .card-body {
+            font-size: 2.2vh; /* Proportional font size */
+            line-height: 1.45;
+            flex-grow: 1;
+            overflow: hidden; /* Prevent content from overflowing */
         }
+        .card-body p {
+            margin: 0 0 3% 0;
+            display: flex;
+            align-items: center;
         }
+        .card-body .body-icon {
+            width: 2.5vh;
+            height: 2.5vh;
+            margin-right: 0.5em;
+            flex-shrink: 0;
         }
+        .card-body .detail-text {
+            font-size: 2.8vh; /* Proportional font size */
+            font-family: 'Playfair Display', serif;
+        }
+        .card-body strong { color: #8B0000; font-weight: bold; }
+        .info-box {
+            display: block; /* Override flex for these paragraphs */
             font-style: italic;
+            background-color: rgba(224, 208, 184, 0.2);
+            padding: 2%;
             border-radius: 8px;
             border-left: 3px solid var(--accent-color);
         }
+        .info-box-title {
+            font-weight: bold;
+            font-style: normal;
+            display: block;
+            margin-bottom: 0.3em;
+            color: #8B0000;
+        }
         .lyric {
+            margin-top: 4%;
             border-left-color: #8B0000;
+            text-align: center;
         }
+        /* Responsive adjustments for the top bar */
+        @media (max-width: 900px) {
+            #top-bar {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 0.5rem;
+            }
+            p#instructions {
+                text-align: center;
+            }
+            #controls {
+                justify-content: center;
+            }
+            #score-board {
+                justify-content: space-between;
+            }
+        }
     </style>
 </head>
 <body>
     <h1>Moulin Rouge! Tarot</h1>
+    <div id="top-bar">
+        <p id="instructions">Past, Present, Future spread. Draw cards, then click to reveal. Score bonus points for suits!</p>
+        <div id="controls">
+            <button id="draw-button">Draw Cards</button>
+            <button id="reset-button">Reset</button>
+        </div>
+        <div id="score-board">
+            <h2>Score</h2>
+            <div class="score-details">
+                <p id="current-score">0</p>
+                <p id="bonus-info"></p>
+            </div>
+        </div>
     </div>
     <div id="table">
         // --- Data: Moulin Rouge Tarot Deck ---
         const tarot_data = [
             // Major Arcana
+            {"name":"Christian's Arrival","card":"0 - The Fool","classifier":"Major Arcana","character":"Christian","emojis":"✍️, 🚂","story":"A young, penniless writer arrives in Montmartre, full of naive ideals about truth, beauty, freedom, and love. He takes a leap of faith, leaving his old life behind to join the Bohemian revolution, unaware of the spectacular and tragic journey that awaits.","lyric":"The hills are alive...<br>with the sound of music!"},
             {"name":"Zidler the Showman","card":"I - The Magician","classifier":"Major Arcana","character":"Zidler","emojis":"🎩, 🎪","story":"Harold Zidler, the proprietor of the Moulin Rouge, is the master manipulator. He has all the tools—the dancers, the stage, the spectacle—and uses his willpower to manifest a world of fantasy and illusion to attract the rich and powerful.","lyric":"The show must go on!"},
+            {"name":"Satine's Secret","card":"II - The High Priestess","classifier":"Major Arcana","character":"Satine","emojis":"💎, 🤫","story":"Satine, the Sparkling Diamond, holds a deep secret: her consumption. She guards this intuitive knowledge, this hidden truth beneath the glittering surface, knowing it will change everything. She is the keeper of a mystery that others cannot yet see.","lyric":"A kiss on the hand may be quite continental,<br>but diamonds are a girl's best friend."},
             {"name":"The Courtesan's Role","card":"III - The Empress","classifier":"Major Arcana","character":"Satine","emojis":"💃, ❤️","story":"As the star of the Moulin Rouge, Satine embodies earthly delights, sensuality, and creativity. She is the nurturing mother of the club, promising abundance and pleasure, her entire being a work of art designed to bring dreams to life.","lyric":"I'm the Sparkling Diamond!"},
+            {"name":"The Duke's Authority","card":"IV - The Emperor","classifier":"Major Arcana","character":"The Duke","emojis":"👑, 📜","story":"The Duke represents structure, power, and worldly authority. He seeks to own and control the Moulin Rouge and Satine, imposing his will through contracts and the unyielding structure of patronage. His rule is absolute and possessive.","lyric":"It's not that I'm a jealous man...<br>I just don't like other people touching my things."},
+            {"name":"The Bohemian Ideal","card":"V - The Hierophant","classifier":"Major Arcana","character":"Toulouse-Lautrec","emojis":"🎨, 📜","story":"Toulouse-Lautrec is the high priest of the Bohemian revolution, teaching its core beliefs: truth, beauty, freedom, and love. He is the keeper of tradition for this unconventional group, guiding Christian and upholding their sacred values against the establishment.","lyric":"The greatest thing you'll ever learn<br>is just to love and be loved in return."},
+            {"name":"The Choice","card":"VI - The Lovers","classifier":"Major Arcana","character":"Satine & Christian","emojis":"❤️, 💔","story":"The central conflict. Satine is torn between two paths, two values: the true, passionate love offered by Christian, and the financial security and career promised by the Duke. This is the ultimate choice of the heart, a defining alignment of values.","lyric":"Come what may,<br>I will love you until my dying day."},
+            {"name":"Spectacular Spectacular","card":"VII - The Chariot","classifier":"Major Arcana","character":"The Bohemians","emojis":"🎭, ➡️","story":"Driven by the sheer force of will and Christian's creative vision, the Bohemians propel their play, 'Spectacular Spectacular,' forward. They harness the opposing forces of comedy and tragedy, love and jealousy, to steer their ambitious project toward opening night.","lyric":"So exciting!<br>We'll write a show!"},
+            {"name":"A Woman Has to Be Strong","card":"VIII - Strength","classifier":"Major Arcana","character":"Satine","emojis":"🦁, ❤️‍🩹","story":"Satine must tame the wild beast of her own heart and the dangerous passions of the men around her. Her strength is not physical, but internal: the compassion, patience, and courage to maintain her composure and protect Christian in the face of the Duke's jealousy.","lyric":"They delight in fighting duels,<br>But I prefer a man who lives and gives expensive jewels."},
+            {"name":"The Penniless Writer","card":"IX - The Hermit","classifier":"Major Arcana","character":"Christian","emojis":"✍️, 🏮","story":"After Satine's death, Christian retreats into the solitude of his garret. He withdraws from the world to process his grief and find the truth of his story, writing it down to bring the light of his inner wisdom out into the world.","lyric":"I've paid my whore...<br>I owe you nothing."},
             {"name":"The Topsy-Turvy World","card":"X - Wheel of Fortune","classifier":"Major Arcana","character":"The Moulin Rouge","emojis":"🎡, 🎭","story":"The Moulin Rouge itself is a wheel of fortune. One night you're on top, the star of the show; the next, you're replaced. The fate of the show, the love affair, and the club are constantly turning, subject to the whims of luck, patronage, and destiny.","lyric":"Because you can, can, can!"},
+            {"name":"The Duke's Decree","card":"XI - Justice","classifier":"Major Arcana","character":"The Duke","emojis":"⚖️, 📜","story":"The Duke operates on a cold logic of cause and effect. He has paid for the club and for Satine, and he expects the deed to be honored. This card represents the clear, and often harsh, consequences of the contracts and choices that have been made.","lyric":"I am the Duke.<br>That is the final word."},
+            {"name":"A Secret Love","card":"XII - The Hanged Man","classifier":"Major Arcana","character":"Christian & Satine","emojis":"🤫, 🤸","story":"Christian and Satine must suspend their lives, putting their love on hold and seeing the world from a new perspective to keep their affair secret. They are in a state of voluntary sacrifice, waiting for the right moment to act, seeing things differently than those around them.","lyric":"We should be lovers...<br>we can't do that."},
+            {"name":"Consumption's Toll","card":"XIII - Death","classifier":"Major Arcana","character":"Satine","emojis":"💀, 🥀","story":"Satine's terminal illness represents an inevitable, unstoppable, and transformative end. It is the force that will bring the curtain down on her life and her love affair, clearing the way for the tragic but beautiful story that Christian will write.","lyric":"I'm dying, Christian.<br>It's the consumption."},
+            {"name":"The Green Fairy","card":"XIV - Temperance","classifier":"Major Arcana","character":"The Bohemians","emojis":"🧪, 🧚","story":"The Bohemians blend inspiration (absinthe) with creativity (writing) to find a perfect synthesis. The Green Fairy represents this alchemical process, mixing different elements to create a new vision, a balanced path between madness and genius.","lyric":"I'm the Green Fairy!<br>Freedom, beauty, truth, and love!"},
             {"name":"The Patronage Trap","card":"XV - The Devil","classifier":"Major Arcana","character":"The Duke","emojis":"⛓️, 💰","story":"The deal with the Duke is a trap. It offers the illusion of security and success, but binds Satine and the Moulin Rouge in a chain of ownership and jealousy. It represents the dark side of materialism, addiction to power, and possessive obsession.","lyric":"She is mine."},
             {"name":"The Final Confrontation","card":"XVI - The Tower","classifier":"Major Arcana","character":"The Stage","emojis":"💥, 🎭","story":"The climax of the play mirrors reality as the Duke's rage explodes. The false reality of the stage is shattered by a sudden, shocking revelation of truth. The entire structure of lies comes crashing down in a moment of violent, chaotic change.","lyric":"He's got a gun!"},
+            {"name":"The Elephant","card":"XVII - The Star","classifier":"Major Arcana","character":"Christian & Satine","emojis":"🐘, ✨","story":"In the sanctuary of the elephant, Christian and Satine find a moment of pure hope, inspiration, and serenity away from the chaos of the club. It is their guiding star, a place where their love feels pure and blessed by a higher power.","lyric":"Come what may...<br>I will love you..."},
+            {"name":"The Unconscious Fear","card":"XVIII - The Moon","classifier":"Major Arcana","character":"Satine","emojis":"🌙, 😥","story":"Satine navigates a world of illusion and deception, both on stage and off. She is haunted by deep-seated fears of poverty and her past, forces that emerge from the unconscious and threaten to derail her path to love and security.","lyric":"Another hero, another mindless crime,<br>Behind the curtain, in the pantomime."},
             {"name":"The Perfect Show","card":"XIX - The Sun","classifier":"Major Arcana","character":"Spectacular Spectacular","emojis":"☀️, 👏","story":"The moment the show succeeds, it is a burst of pure joy, success, and clarity. The vision of the Bohemians is realized, and for a brief, shining moment, everything is vibrant, triumphant, and celebrated by all.","lyric":"We have a show!"},
             {"name":"The Story is Told","card":"XX - Judgment","classifier":"Major Arcana","character":"Christian","emojis":"✍️, 🌅","story":"At the end, Christian answers a higher calling. He rises from his grief to write the story of his love, bringing absolution and rebirth. He judges the events that have passed and gives them meaning, resurrecting their love as a timeless tale.","lyric":"This is a story about love."},
+            {"name":"The Greatest Thing","card":"XXI - The World","classifier":"Major Arcana","character":"The Story","emojis":"🌍, ❤️","story":"The story of Christian and Satine reaches its successful completion. It becomes a whole, integrated narrative that teaches the 'greatest thing.' The cycle is complete, the lesson is learned, and their love has achieved a form of worldly immortality.","lyric":"The greatest thing you'll ever learn<br>is just to love and be loved in return."},
             {"name":"The Spark of a Story","card":"Ace of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"💡, 🔥","story":"The moment Christian, filled with the Bohemian spirit, has the initial, passionate idea for 'Spectacular Spectacular.' It is a pure burst of creative energy and inspiration, a new beginning and a call to action.","lyric":"A story about a penniless sitar player!"},
             {"name":"A Choice of Paths","card":"Two of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🗺️, 🤔","story":"Christian stands between the world of his father and the world of the Moulin Rouge. He holds his potential in his hands, making a bold choice to leave security behind and plan a future based on his creative passion.","lyric":"I don't want to be a lawyer!"},
+            {"name":"The Pitch","card":"Three of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🚢, 🔭","story":"Christian and the Bohemians pitch their show to Satine and Zidler. They are looking to the future, anticipating the results of their creative enterprise and waiting for their ship to come in.","lyric":"It's a story about a magical kingdom<br>in faraway India!"},
+            {"name":"The First Rehearsal","card":"Four of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🎉, 🏡","story":"The cast and crew come together for the first time, celebrating the beginning of their new creative project. There is a sense of harmony, community, and the joy of a stable foundation for their work.","lyric":"The Bohemians,<br>the children of the revolution!"},
             {"name":"Creative Conflict","card":"Five of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"😖, 🎭","story":"The rehearsals are chaotic. The writer, the composer, the actors—everyone has a different idea. This represents the minor struggles and creative clashes that are part of any ambitious project.","lyric":"But the ending is not happy!"},
+            {"name":"The Poet's Victory","card":"Six of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🏆, 👏","story":"Satine chooses Christian's song, 'Your Song,' over the Duke's wishes. It is a public recognition of his talent and a victory for his creative vision and passionate love.","lyric":"My gift is my song,<br>and this one's for you."},
             {"name":"Defending the Story","card":"Seven of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🛡️, ✍️","story":"Christian must constantly defend his artistic integrity and the 'happy ending' of his play against the Duke's demands and Zidler's compromises. He stands his ground, fighting for his creative principles.","lyric":"The greatest thing is love!"},
+            {"name":"A Love Letter","card":"Eight of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"💌, ✈️","story":"Christian's passion and words travel swiftly to Satine's heart. 'Your Song' is a direct, energetic message of love that overcomes all obstacles to reach its destination.","lyric":"How wonderful life is<br>while you're in the world."},
+            {"name":"The Burden of Love","card":"Nine of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🤕,  стойкость","story":"Wounded by jealousy and the seeming betrayal of Satine, Christian is weary but not defeated. He gathers his resilience for one final stand, ready to defend his love despite the pain.","lyric":"I've paid my whore.<br>I owe you nothing."},
+            {"name":"The Weight of the Story","card":"Ten of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"😫, ✍️","story":"At the end, Christian is left alone, burdened with the responsibility of telling their tragic story. The creative passion that once brought him joy has now become a heavy weight he must carry.","lyric":"A story about a love<br>that will live forever."},
             {"name":"The Idealist","card":"Page of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🤩, 📜","story":"Christian at the very beginning: exploring his new passion for the Bohemian ideals, full of creative energy, and ready to embark on a new adventure without fully understanding the consequences.","lyric":"I am the writer!"},
+            {"name":"The Romantic Hero","card":"Knight of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"🧗, ❤️‍🔥","story":"Christian's passionate and often reckless pursuit of Satine. He charges into the Moulin Rouge, climbs elephants, and writes poetry, driven by a fiery love that is both charming and impulsive.","lyric":"I've come to tell you my secret.<br>I love you."},
+            {"name":"The Playwright","card":"Queen of Wands","classifier":"Wands - Fire - Creativity","character":"Christian","emojis":"👑, 🎭","story":"Christian, in his creative element, is confident, determined, and the center of the show's creation. He inspires others with his vibrant energy and his unwavering belief in the power of his story.","lyric":"No, it's about love!<br>Overcoming all obstacles!"},
             {"name":"The Father","card":"King of Wands","classifier":"Wands - Fire - Creativity","character":"Christian's Father","emojis":"👨‍💼, 😠","story":"Christian's father represents the established, visionary leader of a different world. He has a clear vision for Christian's future (as a lawyer) and tries to control his son's passionate, creative impulses with his own authority.","lyric":"You'll be a lawyer!"},
+            {"name":"The Duke's Offer","card":"Ace of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💎, 🤝","story":"The Duke makes his offer to fund the show in exchange for Satine. This is a new, tangible opportunity for wealth and security, a seed of prosperity planted in the material world.","lyric":"A man who lives<br>and gives expensive jewels."},
             {"name":"The Double Life","card":"Two of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🎭, ⚖️","story":"Satine masterfully juggles two realities: her public performances for the Duke and her secret, private moments with Christian. She is constantly balancing her financial obligations with her heart's desires.","lyric":"I can't fall in love with anyone."},
             {"name":"A Star is Born","card":"Three of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💃, 👏","story":"Satine's performance in the initial pitch for the show demonstrates her skill and mastery of her craft. It is a moment of teamwork where her tangible talent is recognized as the key to the project's success.","lyric":"He's a maharajah!"},
+            {"name":"The Gilded Cage","card":"Four of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🔒, 💎","story":"Satine clings to the security promised by the Duke, fearing a return to poverty. She builds a wall around her heart, holding tightly to material stability at the expense of emotional freedom.","lyric":"We're creatures of the underworld.<br>We can't afford to love."},
             {"name":"The Sickness","card":"Five of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"😥, ❄️","story":"Satine collapses from her consumption. This is a moment of physical hardship, illness, and feeling left out in the cold, facing the harsh reality that material wealth cannot protect her from her body's decline.","lyric":"I'm cold."},
             {"name":"A Diamond for a Song","card":"Six of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🎁, 💔","story":"The diamond necklace from the Duke. It is a gift of immense value, but it comes with strings attached. It represents a power imbalance, a charity that is really a transaction for ownership.","lyric":"It's for you..."},
+            {"name":"The Long Game","card":"Seven of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🤔, ⏳","story":"Satine must patiently wait for the show to become a success, hoping her investment of time and emotion will pay off in long-term security. She is assessing her progress, wondering if her hard work will bear fruit.","lyric":"I'm a courtesan.<br>I'm paid to make men believe what they want to believe."},
+            {"name":"The Courtesan's Craft","card":"Eight of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💄, 🎭","story":"Satine's life is one of diligent, repetitive work. She is a master of her craft—the art of seduction and performance—and she dedicates herself to perfecting the skills required for her job.","lyric":"I make men believe<br>I'm in love with them."},
             {"name":"The Real Actress","card":"Nine of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"💃, 🕊️","story":"Satine dreams of becoming a 'real actress,' a life of independent success and self-sufficiency. This card represents the grace, discipline, and financial independence she longs for, free from the control of men.","lyric":"I want to be a real actress!"},
             {"name":"The Moulin Rouge Legacy","card":"Ten of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🏰, 💰","story":"The ultimate material goal: for the Moulin Rouge to be transformed from a dance hall into a legitimate, wealthy theatre. This represents the establishment of a lasting financial legacy and community stability.","lyric":"A real theatre!"},
+            {"name":"The Aspiring Actress","card":"Page of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🌟, 📖","story":"Satine at her core is a student of the material world, eager to learn the craft of acting and manifest a new, tangible reality for herself. She is focused on a new opportunity for earthly success.","lyric":"I can't just fall in love.<br>I have to think about my future."},
             {"name":"The Diamond Dog","card":"Knight of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"🐕, 💎","story":"Satine's public persona is hardworking, dependable, and focused on the practical goal of securing her future. She methodically works towards her material goals, even at a slow and steady pace.","lyric":"I am the Sparkling Diamond!"},
             {"name":"The Star Performer","card":"Queen of Pentacles","classifier":"Pentacles - Earth - Physical","character":"Satine","emojis":"👑, 💃","story":"As the star of the Moulin Rouge, Satine is a nurturing, practical, and down-to-earth figure for the other dancers. She manages the material and physical world of the club with grace and authority.","lyric":"The show must go on!"},
+            {"name":"The Financier","card":"King of Pentacles","classifier":"Pentacles - Earth - Physical","character":"The Duke","emojis":"💰, 👑","story":"The Duke in his element: a master of wealth and enterprise. He uses his vast fortune to control the world around him, seeing everything as an investment and expecting a return. He is the king of the material world.","lyric":"I'm a financier.<br>I invest in things."},
             {"name":"The Duke's Claim","card":"Ace of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"💡, 🗡️","story":"The Duke makes his intentions clear. His offer is a breakthrough moment of sharp, cold clarity: he will fund the show, but Satine is part of the deal. The truth of his possessiveness is revealed.","lyric":"She is mine."},
+            {"name":"The Stalemate","card":"Two of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"😑, ⚔️","story":"The Duke is willfully blind to the love between Christian and Satine, creating a tense stalemate. He blocks out the emotional truth, refusing to make a decision and keeping everyone in a state of suspended conflict.","lyric":"I don't believe you.<br>You're a courtesan."},
             {"name":"The Jealous Heart","card":"Three of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"💔, 😥","story":"The moment the Duke realizes the truth of the affair. It is a painful, piercing sorrow born of betrayal and jealousy. The heartbreak is sharp, intellectual, and leads to a desire for revenge.","lyric":"He's been with her!"},
+            {"name":"The Ultimatum","card":"Four of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"⏳, 😠","story":"After a jealous outburst, the Duke retreats to plan his next move. This is a period of forced rest and contemplation, a strategic withdrawal to recover from a conflict and decide on a new course of action.","lyric":"If you're not with me,<br>you're against me."},
             {"name":"A Hollow Victory","card":"Five of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"😒, 🏆","story":"The Duke forces Satine to send Christian away. He wins the conflict, but it is a pyrrhic victory that brings no joy, only the cold satisfaction of having asserted his power through cruelty.","lyric":"Tell him you don't love him."},
+            {"name":"The Escape","card":"Six of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"✈️, 😥","story":"The Duke, feeling betrayed, contemplates abandoning the whole project. This card represents a sorrowful transition, moving away from a difficult situation towards a calmer, but uncertain, future.","lyric":"I'm leaving.<br>The show is off."},
             {"name":"The Deception","card":"Seven of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"🤫, 😈","story":"The Duke operates through deception and strategy, using Zidler as his pawn and manipulating events from behind the scenes. He acts alone, using his intellect to try and outsmart his rivals.","lyric":"I control everything."},
+            {"name":"The Gilded Cage's Bars","card":"Eight of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"⛓️, 😥","story":"The Duke creates a situation where Satine feels trapped and powerless, believing there is no way out of her obligation to him. He uses threats and logic to restrict her choices and isolate her.","lyric":"If you leave me,<br>I'll kill your lover."},
             {"name":"The Nightmare","card":"Nine of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"😰, 😠","story":"The Duke is tormented by anxiety, paranoia, and jealousy over the affair. He is kept awake at night by his dark thoughts, a mental anguish born from his fear of betrayal and loss of control.","lyric":"He's been with her behind my back!"},
             {"name":"The Final Betrayal","card":"Ten of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"💀, 🗡️","story":"The Duke's rage culminates in the final, dramatic confrontation on stage. It is a moment of absolute ruin, the painful and violent end of the affair, brought about by his vengeful actions.","lyric":"My way, or the highway!"},
             {"name":"The Threat","card":"Page of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"📜, 🗣️","story":"The Duke's initial interactions are full of probing questions and tests. He is curious, communicative, and uses his words as a way to gather information and assert his intellectual dominance.","lyric":"A real actress..."},
             {"name":"The Pursuer","card":"Knight of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"🏃, 😠","story":"When his ownership is challenged, the Duke acts with swift, assertive, and ruthless ambition. He pursues his goal of possessing Satine with a single-minded and cold logic, regardless of the emotional cost.","lyric":"I will have her."},
+            {"name":"The Unseen Power","card":"Queen of Swords","classifier":"Swords - Air - Reason","character":"Marie","emojis":"👑, 🤫","story":"Marie, the head courtesan, operates with the sharp, unbiased clarity of experience. She understands the rules of the world they live in and offers Satine clear, if sometimes painful, advice based on impartial truth.","lyric":"You must make him believe<br>you love him."},
             {"name":"The Patron","card":"King of Swords","classifier":"Swords - Air - Reason","character":"The Duke","emojis":"👑, 🗡️","story":"The Duke in his ultimate form: a figure of immense intellectual and worldly power. He rules with authority, truth (as he sees it), and the law of contracts. He is the final arbiter of their fates.","lyric":"The show will end my way."},
             {"name":"The Bohemian Ideal","card":"Ace of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"❤️, 🥂","story":"The overflowing of creative and emotional energy as the Bohemians welcome Christian. It is a moment of pure, divine love for their ideals, a new spiritual and emotional beginning.","lyric":"Freedom, Beauty, Truth, and Love!"},
             {"name":"A Perfect Union","card":"Two of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🤝, ❤️","story":"The partnership between Christian's words and Satine's voice. It is a mutual attraction and a union of two souls that forms the emotional heart of the show and their love story.","lyric":"We should be lovers..."},
+            {"name":"The Children of the Underworld","card":"Three of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🎉, 💃","story":"The joyous, celebratory moments of the cast creating their show. It is a time of friendship, community, and the emotional high of shared creative expression.","lyric":"Here we are now,<br>entertainers!"},
             {"name":"Apathy and Dreams","card":"Four of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😒, 🤔","story":"During a creative block, the Bohemians are apathetic and withdrawn. They are contemplating their situation, waiting for a new emotional or spiritual offering to re-engage their passion.","lyric":"The writer's blocked!"},
+            {"name":"The Loss of an Ideal","card":"Five of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😥, 💔","story":"The moment the Bohemians realize the Duke's influence is corrupting their play and their ideals. It is a moment of grief and disappointment, focusing on what has been lost.","lyric":"It's about a penniless sitar player...<br>and the woman he loves..."},
             {"name":"Nostalgia for the Garret","card":"Six of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🎨, 🏡","story":"The Bohemians look back on the innocent, happy times in their garret before the complications of the Duke and the Moulin Rouge. It is a moment of nostalgia for a simpler, purer emotional past.","lyric":"We are the children of the revolution!"},
             {"name":"The World of Illusion","card":"Seven of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"💭, 🧚","story":"The influence of absinthe and the Green Fairy. The Bohemians are presented with a world of fantasy, dreams, and illusion, with many creative choices but a danger of getting lost in the fantasy.","lyric":"The Green Fairy!"},
             {"name":"Leaving the Party","card":"Eight of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🚶, 🌙","story":"The moment Christian decides to leave the Moulin Rouge, walking away from the emotional chaos and disillusionment to seek a higher, more authentic truth, even if it means walking away alone.","lyric":"I've paid my whore."},
             {"name":"A Dream Come True","card":"Nine of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😊, 🥂","story":"The moment the show is a success and the cast gets everything they wished for: a hit play, a real theatre. It is a moment of pure emotional satisfaction and contentment.","lyric":"We have a show!"},
+            {"name":"Tragic Fulfillment","card":"Ten of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😭, ❤️","story":"The final tableau. Though tragic, the love story is complete and has achieved a kind of divine, emotional fulfillment. The community are united in their shared grief and the beauty of the love they witnessed.","lyric":"A love that will live forever."},
             {"name":"The Narcoleptic Argentinian","card":"Page of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"😴, 💃","story":"The Argentinian represents the intuitive, emotional, and somewhat naive side of the ensemble. He is a messenger of unconscious feelings, often expressing them in surprising and creative ways.","lyric":"The hills are alive..."},
             {"name":"The Sitar Player","card":"Knight of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"🎸, ❤️","story":"The romantic hero of 'Spectacular Spectacular.' He is on a quest driven by his heart, a romantic idealist who follows his emotions and creative vision above all else.","lyric":"I will love you..."},
             {"name":"The Indian Princess","card":"Queen of Cups","classifier":"Cups - Water - Emotional","character":"The Ensemble","emojis":"👑, 💧","story":"The character Satine plays. She is compassionate, intuitive, and in control of her emotional world, representing the emotional heart and soul of the story they are trying to tell.","lyric":"She is the queen of the underworld."},
         const drawButton = document.getElementById('draw-button');
         const resetButton = document.getElementById('reset-button');
         const cardSlotsContainer = document.getElementById('card-slots');
+        const scoreDisplay = document.getElementById('current-score');
+        const bonusInfoDisplay = document.getElementById('bonus-info');
         let drawnCards = [];
+        let score = 0;
+        // --- SVG Definitions ---
+        const bodyIcons = {
+            position: `<svg class="body-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Z"><animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite" /></path></svg>`,
+            character: `<svg class="body-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 13.5A1.5 1.5 0 0 1 15 12A1.5 1.5 0 0 1 16.5 10.5A1.5 1.5 0 0 1 18 12a1.5 1.5 0 0 1-1.5 1.5m-9 0A1.5 1.5 0 0 1 6 12A1.5 1.5 0 0 1 7.5 10.5A1.5 1.5 0 0 1 9 12a1.5 1.5 0 0 1-1.5 1.5M12 2a10 10 0 0 0-10 10a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8m0-4.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5Z"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="15 12 12" dur="4s" repeatCount="indefinite" yoyo="true" /></path></svg>`,
+        };
+        const suitColors = {
+            'Wands': '#FF5733', // Fiery Orange
+            'Cups': '#337BFF', // Watery Blue
+            'Swords': '#A8A8A8', // Airy Silver
+            'Pentacles': '#28A745', // Earthy Green
+            'Major Arcana': '#D4AF37' // Gold
+        };
+        const backgroundSuitIcons = {
+            'Wands': `<svg class="background-suit-icon" viewBox="0 0 100 100"><defs><filter id="glow-wands"><feGaussianBlur stdDeviation="2.5" result="coloredBlur"/><feFlood flood-color="${suitColors.Wands}" flood-opacity="0.8" result="flood"/><feComposite in="flood" in2="coloredBlur" operator="in" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g stroke-width="3" stroke="currentColor" filter="url(#glow-wands)"><path d="M50,10 L50,90" /><path d="M40,20 L60,20" /><path d="M45,90 L55,90" /><circle cx="50" cy="10" r="8"><animate attributeName="r" values="8;10;8" dur="3s" repeatCount="indefinite" /></circle><path d="M50,10 L50,90" stroke-width="1.5" stroke-opacity="0.5"><animate attributeName="stroke-dasharray" values="0 100; 50 50; 100 0" dur="3s" repeatCount="indefinite"/></path></g></svg>`,
+            'Cups': `<svg class="background-suit-icon" viewBox="0 0 100 100"><defs><filter id="glow-cups"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feFlood flood-color="${suitColors.Cups}" flood-opacity="0.8" result="flood"/><feComposite in="flood" in2="coloredBlur" operator="in" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g stroke-width="2" stroke="currentColor" fill="none" filter="url(#glow-cups)"><path d="M30 10 H 70 V 30 C 70 45, 60 50, 50 60 C 40 50, 30 45, 30 30 Z" /><path d="M40 70 H 60" /><path d="M50 60 V 80" /><path d="M35 80 H 65" /><path d="M40,5 C40,0 45,0 45,5 S50,0 50,5 S55,0 55,5 S60,0 60,5"><animate attributeName="d" values="M40,5 C40,0 45,0 45,5 S50,0 50,5 S55,0 55,5 S60,0 60,5; M40,8 C40,3 45,3 45,8 S50,3 50,8 S55,3 55,8 S60,3 60,8; M40,5 C40,0 45,0 45,5 S50,0 50,5 S55,0 55,5 S60,0 60,5" dur="3s" repeatCount="indefinite" /></path></g></svg>`,
+            'Swords': `<svg class="background-suit-icon" viewBox="0 0 100 100"><defs><filter id="glow-swords"><feGaussianBlur stdDeviation="2.5" result="coloredBlur"/><feFlood flood-color="${suitColors.Swords}" flood-opacity="0.7" result="flood"/><feComposite in="flood" in2="coloredBlur" operator="in" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g stroke-width="3" stroke="currentColor" fill="none" filter="url(#glow-swords)"><path d="M50,10 L50,70" /><path d="M35,80 L65,80" /><path d="M50,70 C 40 80, 40 85, 50 90 C 60 85, 60 80, 50 70 Z" /><path d="M50,10 L50,70" stroke-width="1" stroke-dasharray="2 4"><animate attributeName="stroke-dashoffset" from="0" to="12" dur="1s" repeatCount="indefinite" /></path></g></svg>`,
+            'Pentacles': `<svg class="background-suit-icon" viewBox="0 0 100 100"><defs><filter id="glow-pentacles"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feFlood flood-color="${suitColors.Pentacles}" flood-opacity="0.8" result="flood"/><feComposite in="flood" in2="coloredBlur" operator="in" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" stroke="currentColor" filter="url(#glow-pentacles)"><circle cx="50" cy="50" r="38" stroke-width="1.5" /><path stroke-width="2" d="M50 10 L21 89 L90 35 L10 35 L79 89 Z"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="20s" linear="true" repeatCount="indefinite" /></path></g></svg>`,
+            'Major Arcana': `<svg class="background-suit-icon" viewBox="0 0 100 100"><defs><filter id="glow-arcana"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feFlood flood-color="${suitColors['Major Arcana']}" flood-opacity="0.8" result="flood"/><feComposite in="flood" in2="coloredBlur" operator="in" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g stroke-width="1.5" stroke="currentColor" fill="none" filter="url(#glow-arcana)"><path d="M50,10 L50,90 M10,50 L90,50"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="25s" linear="true" repeatCount="indefinite" /></path><path d="M22,22 L78,78 M22,78 L78,22"><animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="35s" linear="true" repeatCount="indefinite" /></path><circle cx="50" cy="50" r="20"><animate attributeName="r" values="20;28;20" dur="7s" repeatCount="indefinite" /></circle></g></svg>`
+        };
+        const suitBorders = {
+            'Wands': `<svg class="suit-border" viewBox="0 0 100 180" preserveAspectRatio="none"><path d="M 5,5 C 20 80, -10 100, 5 175 M 95,5 C 80 80, 110 100, 95 175" fill="none" stroke="${suitColors.Wands}" stroke-width="1.5" opacity="0.3" stroke-dasharray="5,5"><animate attributeName="stroke-dashoffset" from="0" to="20" dur="2s" repeatCount="indefinite" /></path></svg>`,
+            'Cups': `<svg class="suit-border" viewBox="0 0 100 180" preserveAspectRatio="none"><path d="M 5,5 Q 25 90, 5 175 M 95,5 Q 75 90, 95 175" fill="none" stroke="${suitColors.Cups}" stroke-width="1.5" opacity="0.3" stroke-dasharray="170" stroke-dashoffset="170"><animate attributeName="stroke-dashoffset" values="340;0;340" dur="6s" repeatCount="indefinite" /></path></svg>`,
+            'Swords': `<svg class="suit-border" viewBox="0 0 100 180" preserveAspectRatio="none"><path d="M5,5 L5,175 M95,5 L95,175" fill="none" stroke="${suitColors.Swords}" stroke-width="1.5" opacity="0.4" /><path d="M5,5 L95,5 M5,175 L95,175" fill="none" stroke="${suitColors.Swords}" stroke-width="3" opacity="0.4" /></svg>`,
+            'Pentacles': `<svg class="suit-border" viewBox="0 0 100 180" preserveAspectRatio="none"><rect x="2" y="2" width="96" height="176" rx="10" fill="none" stroke="${suitColors.Pentacles}" stroke-width="1.5" opacity="0.3"><animate attributeName="stroke-dasharray" values="10 40; 40 10; 10 40" dur="5s" repeatCount="indefinite" /></rect></svg>`,
+            'Major Arcana': `<svg class="suit-border" viewBox="0 0 100 180" preserveAspectRatio="none"><defs><path id="arcana-filigree" d="M0,10 C 20,0 30,20 50,10 S 80,0 100,10" stroke="${suitColors['Major Arcana']}" fill="none" stroke-width="1.5" opacity="0.4" stroke-dasharray="100"/></defs><use href="#arcana-filigree" transform="translate(0, 5)"><animate attributeName="stroke-dashoffset" values="200;0" dur="8s" linear="true" repeatCount="indefinite" /></use><use href="#arcana-filigree" transform="translate(100, 5) scale(-1, 1) translate(-100, 0)"><animate attributeName="stroke-dashoffset" values="0;200" dur="8s" linear="true" repeatCount="indefinite" /></use><use href="#arcana-filigree" transform="translate(0, 165) scale(1,-1)"><animate attributeName="stroke-dashoffset" values="0;200" dur="8s" linear="true" repeatCount="indefinite" /></use><use href="#arcana-filigree" transform="translate(100, 165) scale(-1, -1) translate(-100, 0)"><animate attributeName="stroke-dashoffset" values="200;0" dur="8s" linear="true" repeatCount="indefinite" /></use></svg>`
+        };
+        // --- L-System SVG Generator for Card Backs ---
+        const lSystemGenerator = (suit) => {
+            const rules = {
+                'Wands': { 'F': 'F[+F]F[-F]F' },
+                'Cups': { 'X': 'F+[[X]-X]-F[-FX]+X', 'F': 'FF' },
+                'Swords': { 'F': 'F-F++F-F' },
+                'Pentacles': { 'F': 'FF-[-F+F+F]+[+F-F-F]' },
+                'Major Arcana': { 'X': 'F[+X]F[-X]+X', 'F': 'FF' }
+            };
+            const axiom = (suit === 'Cups' || suit === 'Major Arcana') ? 'X' : 'F';
+            const iterations = (suit === 'Wands' || suit === 'Swords') ? 3 : 4;
+            const angle = (suit === 'Swords') ? 60 : 25;
+            const length = (suit === 'Wands' || suit === 'Swords') ? 15 : 5;
+            const color = suitColors[suit] || suitColors['Major Arcana'];
+            let current = axiom;
+            for (let i = 0; i < iterations; i++) {
+                let next = '';
+                for (const char of current) {
+                    next += rules[suit][char] || char;
+                }
+                current = next;
+            }
+            let path = '';
+            const stack = [];
+            let x = 50, y = 100, a = -90;
+            for (const char of current) {
+                if (char === 'F') {
+                    const newX = x + length * Math.cos(a * Math.PI / 180);
+                    const newY = y + length * Math.sin(a * Math.PI / 180);
+                    path += `M${x},${y} L${newX},${newY} `;
+                    x = newX; y = newY;
+                } else if (char === '+') a += angle;
+                else if (char === '-') a -= angle;
+                else if (char === '[') stack.push({x, y, a});
+                else if (char === ']') ({x, y, a} = stack.pop());
+            }
+            return `
+                <svg class="animated-svg-back" width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                     <defs>
+                        <filter id="glow-back-${suit}"><feGaussianBlur stdDeviation="1" result="coloredBlur"/><feFlood flood-color="${color}" flood-opacity="0.9" result="flood"/><feComposite in="flood" in2="coloredBlur" operator="in" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+                    </defs>
+                    <g transform="translate(0, -10)">
+                        <path d="${path}" stroke="${color}" stroke-width="0.5" fill="none" opacity="0.7">
+                           <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="60s" linear="true" repeatCount="indefinite" />
+                        </path>
+                    </g>
+                    <text x="50" y="50" font-family="Playfair Display" font-size="60" fill="${color}" text-anchor="middle" dominant-baseline="central" filter="url(#glow-back-${suit})">M</text>
+                </svg>`;
+        };
         /**
+         * Shuffles an array in place.
          */
         function shuffle(array) {
             for (let i = array.length - 1; i > 0; i--) {
             }
         }
+        /**
+         * Extracts the suit from the classifier string.
+         */
+        function getSuit(classifier) {
+            if (classifier.startsWith('Major')) return 'Major Arcana';
+            return classifier.split(' ')[0];
+        }
         /**
          * Creates the HTML for a single card.
          */
         function createCardElement(cardData, position) {
             const card = document.createElement('div');
             card.className = 'card';
+            const suit = getSuit(cardData.classifier);
+            const displayName = cardData.name.replace(/^The\s/, '');
             card.innerHTML = `
                 <div class="card-face card-back">
+                    ${lSystemGenerator(suit)}
                 </div>
                 <div class="card-face card-front">
+                    ${backgroundSuitIcons[suit] || ''}
+                    ${suitBorders[suit] || ''}
+                    <div class="card-content">
+                        <div class="card-header">
+                            <h2>${displayName} ${cardData.emojis}</h2>
+                            <p class="tarot-title">${cardData.card}</p>
+                        </div>
+                        <div class="card-body">
+                            <p>${bodyIcons.position} <em class="detail-text">${position}</em></p>
+                            <p>${bodyIcons.character} <em class="detail-text">${cardData.character}</em></p>
+                            <div class="info-box story"><span class="info-box-title">Story</span>${cardData.story}</div>
+                            <div class="info-box lyric"><span class="info-box-title">Lyric</span>"${cardData.lyric}"</div>
+                        </div>
                     </div>
                 </div>
             `;
             card.addEventListener('click', () => {
                 card.classList.toggle('is-flipped');
             });
             return card;
         }
         /**
+         * Calculates the score based on drawn cards.
+         */
+        function calculateScore() {
+            score = 0;
+            bonusInfoDisplay.innerHTML = '';
+            const suitCounts = {};
+            drawnCards.forEach(card => {
+                const suit = getSuit(card.classifier);
+                suitCounts[suit] = (suitCounts[suit] || 0) + 1;
+            });
+            let bonusMessages = [];
+            for (const suit in suitCounts) {
+                const count = suitCounts[suit];
+                let bonus = 0;
+                if (count === 2) bonus = 100;
+                else if (count === 3) bonus = 300;
+                if (bonus > 0) {
+                    score += bonus;
+                    bonusMessages.push(`+${bonus} for ${count} ${suit}`);
+                }
+            }
+            scoreDisplay.textContent = score;
+            bonusInfoDisplay.innerHTML = bonusMessages.join('<br>');
+        }
+        /**
+         * Draws cards and places them in the slots.
          */
         function drawReading() {
             if (drawnCards.length > 0) return; // Prevent re-drawing
             shuffle(tarot_data);
             drawnCards = tarot_data.slice(0, 3);
+            const positions = ['Past', 'Present', 'Future'];
+            cardSlotsContainer.innerHTML = ''; // Clear placeholders
             drawnCards.forEach((card, index) => {
                 const slot = document.createElement('div');
                 slot.className = 'card-slot';
                 const cardElement = createCardElement(card, positions[index]);
                 slot.appendChild(cardElement);
                 cardSlotsContainer.appendChild(slot);
             });
+            calculateScore();
         }
         /**
          * Resets the reading to its initial state.
          */
         function resetReading() {
             drawnCards = [];
+            score = 0;
+            scoreDisplay.textContent = '0';
+            bonusInfoDisplay.innerHTML = '';
             cardSlotsContainer.innerHTML = '';
             setupPlaceholders();
         }
         /**
          * Sets up the initial placeholder slots.
          */
         function setupPlaceholders() {
+             const positions = ['Past', 'Present', 'Future'];
              cardSlotsContainer.innerHTML = ''; // Clear any existing cards
              for (let i = 0; i < 3; i++) {
                 const placeholder = document.createElement('div');
         // --- Event Listeners ---
         drawButton.addEventListener('click', drawReading);
         resetButton.addEventListener('click', resetReading);
         // --- Initial Setup ---
         window.onload = setupPlaceholders;
     </script>
 </body>
 </html>