:root {
  --mdp-gold:      #cbb26a;
  --mdp-dark-gold: #be9e44;
  --mdp-light-gold:#d8c690;
  --mdp-black:     #000000;
  --mdp-off-black: #111111;
  --mdp-gray:      #2a2a2a;
  --mdp-white:     #fff;
}
.mdp-game {
    max-width: 700px;
    margin: 2em auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px #f0ead6;
    padding: 2em 1em;
}
.mdp-game-instructions {
    text-align: center;
    margin-bottom: 1.5em;
    color: #444;
}
.mdp-game-result {
    text-align: center;
    margin-top: 2em;
}
.mdp-game-reset, .mdp-fortune-btn {
    display: block;
    margin: 1em auto 0 auto;
    background: #d4ba7d;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-weight: 600;
    font-size: 1.1em;
    cursor: pointer;
    padding: 0.6em 1.2em;
    box-shadow: 0 2px 10px #eee;
    max-width: 100%;
    width: auto;
}
.mdp-game-reset:hover, .mdp-fortune-btn:hover {
    background: #b58a38;
}

/* Tarot specifics */
.mdp-tarot-cards {
    display: flex;
    justify-content: center;
    gap: 1.2em;
    margin: 2em 0;
}
.mdp-tarot-result-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  margin: 16px 0;
  flex-wrap: nowrap;
}
.mdp-tarot-card {
    perspective: 700px;
    width: 110px;
    height: 160px;
    border-radius: 14px;
    box-shadow: 0 6px 24px #a2b0c7;
    background: #f4e9d8;
    cursor: pointer;
    position: relative;
    border: 2px solid #d4ba7d;
    overflow: hidden;
}

/* Card flip effect */
.mdp-tarot-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(.23,1.11,.59,.95);
    transform-style: preserve-3d;
    position: relative;
}
.mdp-tarot-card.flipped .mdp-tarot-card-inner {
    transform: rotateY(180deg);
}
.mdp-tarot-card-front,
.mdp-tarot-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}
.mdp-tarot-card-back {
    background: linear-gradient(135deg, #d8b66c 0%, #a98b4b 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6em;
    font-weight: bold;
    color: #fffbe9;
    z-index: 2;
}
.mdp-tarot-card-back::after {
    content: "★";
    display: block;
    margin: auto;
}
.mdp-tarot-card-front {
    transform: rotateY(180deg);
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    padding-top: 8px;
}
.mdp-tarot-card-front img {
    width: 80px;
    height: 110px;
    border-radius: 8px;
    margin-bottom: 0.5em;
}
.mdp-tarot-card-name {
    font-size: 0.88em;
    font-weight: 500;
    color: #a9851b;
    margin-top: 0.2em;
    letter-spacing: 0.02em;
    text-align: center;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Result card display */
.mdp-tarot-result-card {
    display: inline-block;
    vertical-align: top;
    margin: 0 1em;
    background: #fff7e2;
    border-radius: 10px;
    box-shadow: 0 2px 10px #eee;
    padding: 1em;
    width: 150px;
}
.mdp-tarot-result-card img {
    width: 60px;
    height: 80px;
    border-radius: 5px;
    margin-bottom: 0.5em;
}

/* Fortune specifics */
.mdp-fortune-result {
    background: #fcf7eb;
    border-radius: 10px;
    box-shadow: 0 2px 10px #fae5a2;
    padding: 1em 1em 0.5em 1em;
    display: inline-block;
}
.mdp-fortune-result img {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-bottom: 0.5em;
}

.mdp-fortune-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 1.2em;
}
.mdp-fortune-orb {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 30%, #ffe6b7 60%, #f2d489 90%, #b89753 100%);
    box-shadow: 0 0 32px 6px #f7e9c1, 0 0 0 3px #fffbe6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.3s, transform 0.2s;
}
.mdp-fortune-glow {
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 24px 10px #ffe4b6, 0 0 90px 22px #ffe6a8;
    top: 0; left: 0;
    z-index: 1;
    opacity: 0.75;
    pointer-events: none;
}
.mdp-fortune-icon {
    font-size: 2.5em;
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 2px 8px #ffefba80);
    pointer-events: none;
}
.mdp-fortune-orb.pulse {
    animation: orb-pulse 1.2s infinite alternate;
}
@keyframes orb-pulse {
    0% { box-shadow: 0 0 32px 6px #f7e9c1, 0 0 0 3px #fffbe6; }
    100% { box-shadow: 0 0 60px 14px #ffe6a8, 0 0 0 5px #ffeebb; }
}
.mdp-fortune-orb.magic-reveal {
    animation: orb-reveal 0.7s linear;
}
@keyframes orb-reveal {
    0% { transform: scale(1) rotate(-2deg); }
    40% { transform: scale(1.1) rotate(2deg); }
    60% { transform: scale(1.06) rotate(-2deg);}
    100% { transform: scale(1) rotate(0);}
}
.mdp-fortune-orb.glow {
    box-shadow: 0 0 48px 18px #ffd678, 0 0 0 4px #ffeebb;
}
.mdp-fortune-btn.pulse {
    animation: btn-pulse 1.1s infinite alternate;
}
@keyframes btn-pulse {
    0% { box-shadow: 0 2px 10px #eee; }
    100% { box-shadow: 0 4px 32px #ffeebb; }
}
.mdp-fortune-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1em;
    margin-bottom: 1em;
    color: #b58a38;
}
.loader-spinner {
    border: 4px solid #e7dbba;
    border-top: 4px solid #b58a38;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 1s linear infinite;
    margin-bottom: 0.5em;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
.fortune-loader-text {
    font-style: italic;
    font-size: 1em;
    opacity: 0.7;
}
.fortune-typewriter {
    display: inline-block;
    min-height: 1.6em;
    font-size: 1.03em;
    margin-top: 0.4em;
    color: #6d5213;
    font-family: Georgia, serif;
}
.mdp-fortune-share {
    display: block;
    margin: 1.5em auto 0 auto;
    background: #a9851b;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-weight: 600;
    font-size: 1.05em;
    cursor: pointer;
    padding: 0.55em 1.2em;
    box-shadow: 0 2px 10px #eed;
    transition: background 0.2s;
}
.mdp-fortune-share:hover {
    background: #b58a38;
}
.fortune-category {
  font-size: 1.5em;
  font-weight: bold;
  color: #b87e09; /* Example gold */
  margin-bottom: 0.5em;
}
.mdp-game-container {
   /* width: 30%; */
    min-width: 270px;
    max-width: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px #f0ead6;
    padding: 2em 1em;
    margin: 1.5em 1em 1.5em 0;
    display: inline-block;
    vertical-align: top;
}

.mdp-game-container.location-left {
    float: left;
    margin-right: 2em;
    margin-left: 0;
}

.mdp-game-container.location-right {
    float: right;
    margin-left: 2em;
    margin-right: 0;
}

.mdp-game-container.location-center {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.mdp-compatibility-start, .mdp-game-result, .mdp-solo-result-block, .mdp-together-result-block {
    /* max-width: 540px; */
    margin: 2em auto;
    background: #fffbea;
    border-radius: 22px;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
    padding: 2em 2em 1.2em;
    text-align: center;
    width: 700px;
    max-width: 95vw; /* Prevents overflow on small screens */

}
.mdp-mode-continue {
    display: inline-block;
    animation: mdp-flash-pulse 1.15s infinite alternate;
    font-weight: 700;
    color: #7b1fa2;
    font-size: 1.13em;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0.9em;
    box-shadow: none;
    transition: none;
    text-shadow: 0 0 8px #d1b3f9;
}
@keyframes mdp-flash-pulse {
    0%   { opacity: 1; text-shadow: 0 0 4px #ba68c8; }
    70%  { opacity: 0.3; text-shadow: 0 0 14px #ba68c8; }
    100% { opacity: 1; text-shadow: 0 0 4px #ba68c8; }
}
.mdp-game-instructions {
    font-size: 1.2em;
    margin-bottom: 1em;
    color: #9c27b0;
}

button.mdp-mode-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 70px;
    margin: 10px 14px;
    text-align: center;
}
.mdp-mode-btn .mdp-mode-desc {
    font-size: 0.98em;
    font-weight: 400;
    opacity: 0.82;
    margin-top: 2px;
    line-height: 1.2;   /* Lower values = tighter lines. Try 1.1–1.3 */
}
.mdp-mode-btn .mdp-mode-title {
    font-size: 1.3em;   /* or try 1.5em, 22px, etc. */
    font-weight: 700;
    margin-bottom: 0.1em;
    letter-spacing: 0.5px;
}

.mdp-mode-btn:hover, .mdp-mode-btn:focus {
    background: #7b1fa2;
}

.mdp-mode-description {
    margin-top: 1.2em;
    font-size: 1.1em;
    color: #555;
}

.mdp-compatibility-questions, .mdp-question-block {
    margin-bottom: 1.1em;
}

.mdp-solo-answer {
    color: #5e35b1;
    font-weight: bold;
}

.mdp-together-answer {
    color: #3f2d7f;
}

.mdp-match {
    color: #2e7d32;
    font-size: 1.3em;
    font-weight: bold;
    margin-left: 0.7em;
}

.mdp-invite-sent {
    background: #f3ffe6;
    border: 1px solid #aed581;
    border-radius: 10px;
    padding: 1.1em;
    color: #33691e;
    margin-top: 1.5em;
}

.mdp-compatibility-submit {
    margin-top: 1em;
    background: #ff7043;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 0.7em 2.2em;
    font-size: 1.15em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(255,87,34,0.09);
    transition: background 0.2s;
}
.mdp-compatibility-submit:hover {
    background: #d84315;
}

.mdp-mode-btn span {
    font-size: .8em;
    color: #fffde7;
}
.mdp-mode-btn:hover, .mdp-mode-btn:focus {
    background: #7b1fa2;
}

.mdp-names-form, .mdp-together-form, .mdp-apart-form, .mdp-compatibility-form, .mdp-solo-form, .mdp-p2-form {
    max-width: 90%;
    margin: 2em auto 1em auto;
    background: var(--mdp-off-black);
    border-radius: 14px;
    padding: 2em 1.5em 1.5em 1.5em;
    box-shadow: 0 2px 16px rgba(156,39,176,0.06);
}

.mdp-form-section label {
    display: block;
    margin-bottom: 1em;
    font-weight: 500;
    color: var(--mdp-light-gold);
}

.mdp-question-progress {
    font-size: 1.2em;
    font-weight: 500;
    color: #8e24aa;
    margin-bottom: 0.8em;
    margin-top: -1em;
    text-align: center;
}

.mdp-question-block {
    margin-bottom: 1.2em;
}
.mdp-question {
  font-size: 1.35em;         /* Make it slightly larger for emphasis */
  font-weight: bold;
  color: var(--mdp-gold);    /* Use your gold palette for all */
  text-align: center;        /* Center the text */
  margin-bottom: 0.7em;
  margin-top: 0.2em;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-family: Georgia, serif; /* For a classy look */
}

.mdp-options, .mdp-options-together {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9em;
    margin-bottom: 0.4em;
    width: 280px;       /* Set your preferred width */
    min-width: 160px;   /* Optional: for responsiveness */
    max-width: 95%;
    margin: 0.5em auto; /* Center horizontally */
    text-align: center;
    align-items: center;
    justify-content: center;
}
.mdp-options-together > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;      /* So they don't shrink to 0 */
  max-width: 400px; /* You can adjust this */
  margin: 0 auto;
}
.mdp-label {
  font-size: 1.28em;          /* Larger font size */
  font-weight: bold;
  color: var(--mdp-light-gold);     /* Light Gold color */
  margin-bottom: 0.5em;
  text-align: center;
  letter-spacing: 0.03em;
  display: block;             /* Makes label span whole line */
  font-family: Georgia, serif;
}

.mdp-error {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #ffcdd2;
    padding: 0.7em 1em;
    border-radius: 7px;
    font-size: 1em;
    margin-bottom: 1em;
    margin-top: 0.5em;
    display: block;
    text-align: center;
}
.mdp-question-nav {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-top: 1.4em;
}
.mdp-next-btn, .mdp-prev-btn, .mdp-compatibility-submit, .mdp-names-continue {
    background: #ff7043;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.6em 2em;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(255,87,34,0.09);
    transition: background 0.2s;
}
.mdp-next-btn:hover, .mdp-prev-btn:hover, .mdp-compatibility-submit:hover, .mdp-names-continue:hover {
    background: #d84315;
}

.mdp-fancy-question-box {
    background: var(--mdp-off-black); /* or your gradient if you prefer */
    border-radius: 20px;
    box-shadow: 0 3px 14px var(--mdp-gray);
    border: 2px solid var(--mdp-gold);
    color: var(--mdp-gold);
    padding: 2em 1.5em;
    margin: 0 auto 2em auto;
    font-size: 1.14em;
    transition: box-shadow 0.15s;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    /* Remove: overflow-x: auto; */
}
.mdp-fancy-question-box h4 {
    font-size: 1.1em;
    color: var(--mdp-light-gold);
    margin-bottom: 0.6em;
}
.mdp-solo-answers ul, .mdp-fancy-question-box ul {
    padding-left: 1.2em;
    margin-bottom: 0.6em;
}

.mdp-mode-card {
    background: var(--mdp-gray);
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(156,39,176,0.10);
    padding: 2em 1.5em 1.2em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 200px;        /* Makes each button grow/shrink, base width 200px */
    min-width: 180px;       /* Prevents getting too small */
    max-width: 235px;       /* Optional: controls maximum width */
    box-sizing: border-box;
    justify-content: center;
    border: 2px solid #d8c690;
}

.mdp-mode-btn:hover,
.mdp-mode-btn:focus {
    background: #7b1fa2;
}

.mdp-mode-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.3em;
    margin: 2em 0;
    flex-wrap: wrap;
    max-width: 750px;              /* Adjust as needed */
    /* min-width: 660px;              /* 3 × 220px + gaps */
    margin-left: auto;
    margin-right: auto;
}

.mdp-mode-btn {
    width: 220px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 70px;
    margin: 10px 14px 0 14px;
    padding: 1em 1.5em;
    border-radius: 16px;
    background: #9c27b0;
    color: #fff;
    border: none;
    font-size: 1.12em;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(156,39,176,0.08);
    transition: background 0.2s;
    text-align: center;
    overflow: hidden; 
}
.mdp-mode-btn:hover,
.mdp-mode-btn:focus {
    background: #7b1fa2;
}

.mdp-mode-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;          /* White by default, but can override if needed */
    margin-bottom: 0.1em; /* Tighter space below title */
    letter-spacing: 0.5px;
    line-height: 1.1;     /* Tighter line-height for title */
}

.mdp-mode-desc {
    font-size: 1em;
    font-weight: 400;
    color: #fff; 
    margin-top: 0.12em;     /* Tighter space above desc */
    margin-bottom: 0.15em;  /* Tighter space below desc (adjust as needed) */
    opacity: 0.93;
    line-height: 1.18;      /* Tighter lines if desc wraps */
}

/* Control width of games */
.mdp-game-container.width-100 { width: 80% !important; min-width: 0 !important; max-width: 100% !important; }
.mdp-game-container.width-30 { width: 30%; min-width: 270px; max-width: 400px; }

/* Compatibility Game: MyDatePlans Black & Gold Theme */
.mdp-game,
.mdp-compatibility-start,
.mdp-solo-result-block,
.mdp-together-result-block,
.mdp-game-result {
    background: var(--mdp-black);
    color: var(--mdp-gold);
    border-radius: 22px;
    box-shadow: 0 4px 24px 0 var(--mdp-gray);
    border: 2px solid var(--mdp-gray);
}

.mdp-game h3 {
    color: var(--mdp-gold);
    background: var(--mdp-gray);
    padding: 0.5em 0;
    letter-spacing: 2px;
    font-family: Georgia, serif;
    border-radius: 12px;
    text-align: center;
    font-size: 2em;  
    margin-bottom: 0.5em;
}

.mdp-game-instructions {
    color: var(--mdp-gold);
    background: var(--mdp-off-black);
    border-radius: 8px;
    padding: 0.6em;
    font-weight: 600;
    box-shadow: 0 2px 6px var(--mdp-gray);
}

.mdp-mode-btn {
    background: var(--mdp-gold);
    color: var(--mdp-white);
    border: 2px solid var(--mdp-dark-gold);
    box-shadow: 0 2px 6px var(--mdp-black);
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.mdp-mode-btn:hover,
.mdp-mode-btn:focus {
    background: var(--mdp-dark-gold);
    color: var(--mdp-white);
}

.mdp-mode-continue {
    color: var(--mdp-gold);
    background: none;
    border: none;
    font-weight: 700;
    text-shadow: 0 0 12px var(--mdp-gold);
    animation: mdp-flash-pulse 1.15s infinite alternate;
}

@keyframes mdp-flash-pulse {
    0%   { opacity: 1; text-shadow: 0 0 8px var(--mdp-gold);}
    70%  { opacity: 0.5; text-shadow: 0 0 18px var(--mdp-gold);}
    100% { opacity: 1; text-shadow: 0 0 8px var(--mdp-gold);}
}

.mdp-mode-description {
    color: var(--mdp-light-gold);
    background: var(--mdp-gray);
    border-radius: 7px;
    padding: 0.4em 0.7em;
}

.mdp-question-progress {
    color: var(--mdp-gold);
}

.mdp-question {
    color: var(--mdp-gold);
}
.mdp-option {
  position: relative;
  background: var(--mdp-gray);
  border: 2px solid var(--mdp-gold);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(203,178,106,0.07);
  padding: 0.9em 1.5em;
  cursor: pointer;
  font-size: 1.08em;
  color: var(--mdp-gold);
  font-weight: 600;
  transition: background 0.17s, border-color 0.17s, color 0.17s;
  flex: none;           /* Default: don't grow, stack vertically */
  min-width: 0;
  width: 100%;
  text-align: center;
  margin: 0 auto 0.5em auto;  /* Added auto for left/right margin */
  user-select: none;
  box-sizing: border-box;
}
/* SOLO & APART: Center the answer buttons vertically under the question */
.mdp-solo-form .mdp-options,
.mdp-apart-form .mdp-options,
.mdp-p2-form .mdp-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin-bottom: 2em;
  /* width: 80%; */
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.mdp-solo-form .mdp-options,
.mdp-apart-form .mdp-options,
.mdp-p2-form .mdp-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin-bottom: 2em;
  /* width: 100%; */
  max-width: 400px;    /* or your preferred width */
  margin-left: auto;
  margin-right: auto;
}
.mdp-options-together
.mdp-option input[type="radio"]:checked + span {
  background: var(--mdp-gold);
  color: var(--mdp-black);
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 0 0 3px var(--mdp-dark-gold);
}
.mdp-option:hover,
.mdp-option:focus-within {
  background: var(--mdp-gold);
  color: var(--mdp-black);
  border-color: var(--mdp-dark-gold);
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.mdp-option:hover span,
.mdp-option:focus-within span {
  color: var(--mdp-black);
  font-weight: bold;
}
.mdp-option:hover,
.mdp-option:focus-within {
  background: var(--mdp-gold);
  color: var(--mdp-black);
  border-color: var(--mdp-dark-gold);
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}

.mdp-option:hover span,
.mdp-option:focus-within span {
  color: var(--mdp-black);
  font-weight: bold;
}
.mdp-solo-answer,
.mdp-together-answer,
.mdp-match {
    color: var(--mdp-gold);
}

.mdp-together-result-block a {
  color: var(--mdp-gold);
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.15s;
}
.mdp-together-verdict {
  font-size: 2em;          /* Make it big and bold */
  font-weight: 700;
  color: var(--mdp-light-gold);
  margin: 0.7em 0 1em 0;   /* Some space above and below */
  text-align: center;
  letter-spacing: 1px;
}
.mdp-solo-result-blurb {
  font-size: 1.5em;          /* Make it big and bold */
  font-weight: 700;
  color: var(--mdp-light-gold);
  margin: 0.7em 0 1em 0;   /* Some space above and below */
  text-align: center;
  letter-spacing: 1px;
}
.mdp-game-note-fade {
    margin: 1.5em 1.5em;
}
.mdp-together-result-block a:hover,
.mdp-together-result-block a:focus {
  color: var(--mdp-dark-gold);
  text-decoration: underline;
}
.mdp-next-btn,
.mdp-prev-btn,
.mdp-compatibility-submit,
.mdp-names-continue {
    background: var(--mdp-gold);
    color: var(--mdp-white);
    border: 2px solid var(--mdp-dark-gold);
    box-shadow: 0 2px 12px var(--mdp-gray);
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.mdp-next-btn:hover,
.mdp-prev-btn:hover,
.mdp-compatibility-submit:hover,
.mdp-names-continue:hover {
    background: var(--mdp-dark-gold);
    color: var(--mdp-white);
}

.mdp-invite-sent {
    background: var(--mdp-dark-gold);
    border: 1px solid var(--mdp-gold);
    color: var(--mdp-white);
}

.mdp-option input[type="radio"] {
  display: none;
}

.mdp-option input[type="radio"]:checked + span {
  background: var(--mdp-gold);
  color: var(--mdp-black);
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 0 0 3px var(--mdp-dark-gold);
}

.mdp-option span {
  display: inline-block;
  width: 100%;
  padding: 0.25em 0;
  pointer-events: none;
  transition: background 0.15s, color 0.15s;
}

.mdp-mode-title-block {
  font-family: Georgia, serif;
  font-size: 2.5em;
  color: var(--mdp-gold);
  font-weight: bold;
  letter-spacing: 1.5px;
  text-align: center;
  margin: 0 0 1em 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
button.mdp-next-btn,
button.mdp-prev-btn,
button[type="submit"].mdp-next-btn,
button[type="button"].mdp-prev-btn {    background: var(--mdp-gold) !important;
    color: var(--mdp-white) !important;
    border: 2px solid var(--mdp-dark-gold) !important;
    box-shadow: 0 2px 12px var(--mdp-gray) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    font-size: 1.1em !important;
    cursor: pointer !important;
    padding: 0.6em 2em !important;
    transition: background 0.2s, color 0.2s !important;
    min-width: 120px !important;
}

button.mdp-next-btn:hover,
button.mdp-prev-btn:hover,
button[type="submit"].mdp-next-btn:hover,
button[type="button"].mdp-prev-btn:hover {
    background: var(--mdp-dark-gold) !important;
    color: var(--mdp-white) !important;
}
.mdp-apart-form .mdp-fancy-question-box {
  width: 80%;
  max-width: 100%;
  box-sizing: border-box;
}
.mdp-options-together .mdp-label {
  font-size: 1.4em;
  font-weight: bold;
  color: var(--mdp-light-gold);
  text-align: center;
  font-family: Georgia, serif;
  letter-spacing: 0.04em;
  margin-bottom: 0.35em;
  margin-top: 0.2em;
  text-shadow: 0 2px 12px #cbb26a40, 0 1px 0 #111;
  background: linear-gradient(90deg, #2a2a2a 0%, #1c1610 100%);
  border-radius: 8px;
  padding: 0.15em 0.25em;
  display: block;
  position: relative;
}

.mdp-options-together .mdp-label::after {
  content: '';
  display: block;
  margin: 0.2em auto 0 auto;
  width: 36px;
  height: 3px;
  background: var(--mdp-gold);
  opacity: 0.58;
  border-radius: 2px;
  box-shadow: 0 2px 8px #d8c69099;
}
.mdp-solo-result-block,
.mdp-together-result-block,
.mdp-game-result,
.mdp-compatibility-start {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center inner content horizontally */
}
.mdp-game-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mdp-together-answers ul,
.mdp-together-answers li,
.mdp-apart-answers ul,
.mdp-apart-answers li {
  text-align: left !important;
  margin-left: 0;
  margin-right: 0;
  display: block;
}
:root {
  --mdp-gold:      #cbb26a;
  --mdp-dark-gold: #be9e44;
  --mdp-light-gold:#d8c690;
  --mdp-black:     #000000;
  --mdp-off-black: #111111;
  --mdp-gray:      #2a2a2a;
  --mdp-white:     #fff;
  --mdp-error:     red;
}

.mdp-game-container {
  border-radius: 22px;
  color: var(--mdp-gold, #cbb26a);
  box-shadow: 0 4px 32px 0 var(--mdp-gray, #2a2a2a);
  border: 2px solid var(--mdp-gray, #2a2a2a);
  padding: 2.5em 2em;
  max-width: 90%;
  margin: 2em auto;
  font-family: 'Georgia', 'Segoe UI', Arial, serif;
  line-height: 1.7;
  /* Optional: subtle gold gradient for depth */
  background: linear-gradient(120deg, #111111 90%, #cbb26a15 100%);
}

.mdp-game-container h1,
.mdp-game-container h2,
.mdp-game-container h3,
.mdp-game-container h4 {
  color: var(--mdp-gold);
  font-family: Georgia, serif;
  margin-top: 1em;
  margin-bottom: 2em;
  letter-spacing: 1.2px;
}

.mdp-game-container h1 {
  font-size: 2.4em;
  text-align: center;
  background: var(--mdp-gray);
  border-radius: 14px;
  padding: 0.6em 0;
  margin-bottom: 1em;
  color: var(--mdp-gold);
  letter-spacing: 2.5px;
}

.mdp-game-container h2 {
  font-size: 1.6em;
  color: var(--mdp-light-gold);
  border-left: 4px solid var(--mdp-gold);
  padding-left: 0.5em;
}

.mdp-game-container h3 {
  font-size: 2em;
  color: var(--mdp-gold);
}

.mdp-game-container p {
  color: var(--mdp-light-gold);
  line-height: 1.7;
  font-size: 1.12em;
  margin-bottom: 1.1em;
}

.mdp-game-container ul,
.mdp-game-container ol {
  color: var(--mdp-light-gold);
  /* margin-left: 2em; */
  margin-bottom: 1.1em;
  font-size: 1.07em;
}

.mdp-game-container li {
  margin-bottom: 0.5em;
}

.mdp-game-container a {
  color: var(--mdp-gold);
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s;
}
.mdp-game-container a:hover {
  color: var(--mdp-dark-gold);
  background: var(--mdp-gray);
  border-radius: 4px;
}

.mdp-game-quote {
  background: var(--mdp-gray);
  border-left: 6px solid var(--mdp-gold);
  color: var(--mdp-light-gold);
  margin: 2em 0 2em 0;
  padding: 1.3em 2em;
  border-radius: 18px;
  font-style: italic;
  font-size: 1.16em;
}

.mdp-game-note {
  background: var(--mdp-dark-gold);
  color: var(--mdp-black);
  border-radius: 9px;
  padding: 1.1em 1.5em;
  margin: 2em 0;
  font-size: 1.1em;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 14px var(--mdp-gray);
}

.mdp-game-container hr {
  border: none;
  border-top: 2px solid var(--mdp-gold);
  margin: 2.2em 0;
  opacity: 0.3;
}

/* Raised headline */
.mdp-game-headline {
  color: var(--mdp-dark-gold);
  font-size: 2.1em;
  letter-spacing: 1px;
  background: var(--mdp-gray);
  border-radius: 14px;
  padding: 0.2em 0.7em;
  box-shadow:
    0 2px 12px rgba(203,178,106,0.17),
    0 1.5px 0 var(--mdp-gold),
    0 0.5px 1.5px #e9d8a6;
  text-shadow:
    0 1px 0 var(--mdp-white),
    0 3px 16px #9e840088;
  display: inline-block;
  margin-bottom: 1em;
}

/* Note with fading border */
.mdp-game-note-fade {
  margin: 2em 2em;
  background: var(--mdp-gray);
  color: var(--mdp-gold);
  border-radius: 14px;
  font-size: 1.12em;
  padding: 1.3em 1.3em 1em 1.3em;
  position: relative;
  overflow: hidden;
  /* Fading border using box-shadow and pseudo-elements */
  box-shadow:
    0 0 0 2px var(--mdp-gold),
    0 0 10px 6px var(--mdp-light-gold),
    0 2px 18px 6px #00000022;
}
.mdp-game-note-fade:before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(ellipse at top left, #cbb26a66 30%, transparent 60%),
              radial-gradient(ellipse at bottom right, #d8c69044 20%, transparent 50%);
  z-index: 1;
}
.entry-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Optional: make text inside <b> stand out more */
.mdp-game-note-fade b {
  color: var(--mdp-white);
  text-shadow: 0 1px 7px var(--mdp-gold), 0 0px 1.5px #fffbe9;
  font-weight: 600;
}
.mdp-options-together .mdp-option {
  width: 280px;
  min-width: 200px;
  max-width: 98%;
  text-align: center;
  margin: 0.5em auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Responsive Mobile styles */
@media (min-width: 801px) {
  .mdp-fancy-question-box {
    max-width: none;
  }
  .mdp-game {
    max-width: 900px;
  }
}
@media (max-width: 740px) {
    .mdp-mode-choice {
        max-width: 100vw;
        min-width: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 1em;
    }
}
@media (max-width: 700px) {
    .mdp-mode-choice {
        flex-direction: column;
        align-items: center;
    }
    .mdp-mode-btn {
        width: 95vw;
        max-width: 350px;
    }
    .mdp-tarot-result-cards {
      flex-wrap: wrap !important;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
   .mdp-tarot-result-card {
      min-width: 0 !important;
      max-width: 95vw !important;
      width: 100% !important;
      margin: 0 auto;
    }
    .mdp-game-reset,
    .mdp-fortune-btn {
      width: auto;               /* Let the content decide the width */
      min-width: 140px;          /* Set a minimum width if needed */
      max-width: 220px;           /* Prevents overflow but avoids the "full-bleed" look */
      padding: 0.8em 1.5em;      /* Balanced padding for tap targets */
      font-size: 1em;
      margin: 1.3em auto 0 auto; /* Centered with some margin */
      box-sizing: border-box;
      display: block;
    }
}
@media (max-width: 600px) {
    .mdp-game {
        padding: 1em 0.2em;
        font-size: 1em;
    }
    .mdp-game h3 {
        font-size: 2em;
        padding: 0 0.5em;
    }
    .mdp-tarot-cards {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.7em;
        margin: 1.2em 0;
    }
    .mdp-tarot-card {
        width: 80px;
        height: 115px;
        margin: 0.3em;
    }
    .mdp-tarot-card-front img {
        width: 58px;
        height: 85px;
        border-radius: 6px;
    }
    .mdp-tarot-result-card {
        width: 90vw;
        max-width: 300px;
        margin: 1em auto;
        font-size: 1em;
        padding: 0.8em 0.4em;
    }
    .mdp-tarot-result-card img {
        width: 40px;
        height: 54px;
    }
    .mdp-game-result {
        font-size: 1em;
    }
    .mdp-game-reset,
    .mdp-fortune-btn {
        width: 95vw;
        font-size: 1.05em;
    }
    .mdp-tarot-card-name {
        font-size: 0.80em;
    }
    .mdp-options-together {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1em;
      width: 100%;
      margin-bottom: 2em;
      max-width: 720px;
    }
    .mdp-solo-result-block,
    .mdp-together-result-block,
    .mdp-game-result,
    .mdp-compatibility-start {
      padding-left: 0.8em;
      padding-right: 0.8em;
    }
    .mdp-names-form,
    .mdp-together-form,
    .mdp-apart-form,
    .mdp-compatibility-form,
    .mdp-solo-form,
    .mdp-p2-form {
    max-width: 95%;
    }
    button.mdp-next-btn,
    button.mdp-prev-btn,
    button[type="submit"].mdp-next-btn,
    button[type="button"].mdp-prev-btn {    background: var(--mdp-gold) !important;
      font-size: 1em !important;
      min-width: 180px !important;           /* Minimum width for visibility */
    }
    .mdp-game-container {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
        padding: 1.2em 0.6em 1.4em 0.6em;
        font-size: 1em;
        max-width: 100%;
    }
    .mdp-solo-form .mdp-option {
        width: 92%;         /* Slightly less than full parent width */
        max-width: 220px;   /* Never wider than a phone screen */
        min-width: 120px;
        font-size: 1em;
        margin: 0.6em auto;
        box-sizing: border-box;
    }
    .mdp-next-btn {
      white-space: nowrap;       /* Prevent text from wrapping */
      overflow: hidden;          /* Hide overflow just in case */
      text-overflow: ellipsis;   /* Add ... if text is too long */
      text-align: center;        /* Center the text */
      font-size: 1em;            /* Adjust as needed */
      padding: 0.65em 1.1em;     /* Comfortable padding */
      min-width: 120px;           /* Minimum width for visibility */
      max-width: 95vw;           /* Don't go full edge-to-edge */
      box-sizing: border-box;
    }
    .mdp-prev-btn {
      display: none !important;
    }
    .mdp-solo-answers ul,
    .mdp-fancy-question-box ul {
    padding-left: .2em !important;
    }
    .mdp-game-container h1 { font-size: 1.3em; }
    .mdp-game-container h2 { font-size: 1.07em; }    
    .mdp-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    }
    .mdp-solo-form .mdp-options .mdp-option {
     display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    }
    .mdp-solo-form .mdp-options .mdp-option {
        width: 92vw;
    max-width: 200px;
    min-width: 120px;
    margin: 0.6em auto;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    }
 
}