/*
Plugin Name: Mushroom RPG Scenarios and Missions
Description: This is the RPG CREATOR for creating RPG Scenarios, Missions and Quests. It controls the hierarchy and categories for the Missions and Quests custom post type and all RPG elements and styling.
Version: 2.0
Author: Mushroom
Author URI: http://localhost/mushroom-education
*/

/* RPG Icons */
.xp-icon {
    vertical-align: middle;
    margin-right: 15px;
}

.lives-icon {
    width: 50px;
    vertical-align: middle;
    margin-right: 20px;
}

.level-icon {
    width: 100px;
    vertical-align: middle;
}

.rpg-featured-img {
    width: 100px;
    border-radius: 10%;
    float: left;
}

/* RPG Missions & Quests */
.rpg-scenario-category-item {
    display: flex;
    align-items: center;
    border-radius: 5%;
    box-shadow: 0px 1px 5px darkblue;
    margin-bottom: 5px;
}

.rpg-scenario-category-item h2 {
    flex: 1;
    margin-left: 20px;
}

.rpg-scenario-featured-image {
    order: -1;
    margin-right: 5px;
    max-width: 100px;
}

.rpg-scenario-featured-image img {
    border-radius: 10%;
}

/* RPG Sidebar Flashing Logo */
.mushroom-rpg-flashing-logo {
    color: #fff;
    padding: 10px;
    display: flex;
    margin: 0 40px;
    justify-content: center;
    text-align: center;
    border-radius: 5px;
    flex-direction: column;
    animation: blinkingBackground 2s infinite;
}

@keyframes blinkingBackground {
    0% { background-color: darkblue; }
    25% { background-color: orange; }
    50% { background-color: goldenrod; }
    75% { background-color: darkblue; }
    100% { background-color: blue; }
}

.mushroom-rpg-flashing-logo h4 {
    word-break: keep-all;
    font-size: clamp(16px, 4vw, 24px);
    margin: 0;
}

.mushroom-rpg-flashing-logo img {
    align-self: center;
    max-width: 100px;
}

.rpg_scenario{
	border-radius:10%;
	box-shadow: 0px 2px 10px darkgray;
	background-color:white;
}
.rpg_scenario .entry-header{
	padding-left:35px;
	padding-top:35px;
	text-align:center;
}
.rpg_scenario .entry-content{
	padding:35px;
	padding-top:5px;
	/* max-width:90%; not sure why this is here so commenting out for now */
	white-space:normal;
}
.rpg_scenario .entry-content:not(:first-child){
	margin-top:5px;
}
/* Obstacle stuff removed for now
 .rpg-obstacle{
	display:flex;
	flex-direction: column; 
  justify-content: center;
	background-color: palegoldenrod;
	box-shadow: 0px 1px 5px red;
	border-radius:15%;
	margin:5px;
}
.rpg-obstacle-content{
	padding:35px;
	flex-basis: content; 
}
.rpg-obstacle-content img{
	max-width:500px;
}
.rpg-obstacle-image-container{
	margin:0px;
	float:left;
}
.rpg-obstacle-image-container img{
	width:25px;
	filter: drop-shadow(1px 1px 5px darkred);
	margin:0px;
}
*/
#luck-tester-container{
	display:block;
	text-align: center;
	margin-top: 15px;
	margin-bottom:25px;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
}
#lucky{
	padding:25px;
	background-color: palegreen;
	box-shadow: 1px 1px 5px darkgreen;
	text-align:center;
	border-radius:15%;
}
#unlucky{
	padding:25px;
	background-color: #ff9780;
	box-shadow: 1px 1px 5px darkred;
	text-align:center;
	border-radius:15%;
}
/* ============================================
   SPEECH BUBBLE - RPG ELEMENTS (Classic Style)
   ============================================ */

/* Speech Bubble Wrapper - flex layout for avatar + bubble */
.rpg-speech-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 20px 0;
    max-width: 100%;
}

/* Avatar image styling */
.rpg-speech-wrapper .bubble-avatar {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.rpg-speech-wrapper .bubble-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Bubble container - Classic White */
.rpg-speech-wrapper .bubble {
    font-size: 1.2em;
    color: #333;
    background: #ffffff;
    padding: 20px 25px;
    border-radius: 10px;
    max-width: 600px;
    position: relative;
    margin: 0;
    flex: 1;
    word-wrap: break-word;
    border: 2px solid #333;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
}

/* ============================================
   SIDE: LEFT (Avatar on LEFT, bubble on RIGHT)
   ============================================ */
.rpg-speech-wrapper.side-left {
    flex-direction: row;
}

.rpg-speech-wrapper.side-left .bubble-avatar {
    order: 1;
}

.rpg-speech-wrapper.side-left .bubble {
    order: 2;
}

/* Tail points LEFT (toward avatar) */
.rpg-speech-wrapper.side-left .bubble::after {
    content: "";
    position: absolute;
    left: -24px;
    top: 20px;
    border: 12px solid transparent;
    border-right-color: #ffffff;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    filter: drop-shadow(-2px 0 0 #333);
}

/* ============================================
   SIDE: RIGHT (Avatar on RIGHT, bubble on LEFT)
   ============================================ */
.rpg-speech-wrapper.side-right {
    flex-direction: row;
}

.rpg-speech-wrapper.side-right .bubble-avatar {
    order: 2;
}

.rpg-speech-wrapper.side-right .bubble {
    order: 1;
}

/* Tail points RIGHT (toward avatar) */
.rpg-speech-wrapper.side-right .bubble::after {
    content: "";
    position: absolute;
    right: -24px;
    top: 20px;
    border: 12px solid transparent;
    border-left-color: #ffffff;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    filter: drop-shadow(2px 0 0 #333);
}

/* ============================================
   SIDE: TOP (Avatar ABOVE, bubble BELOW)
   ============================================ */
.rpg-speech-wrapper.side-top {
    flex-direction: column;
    align-items: flex-start;
}

.rpg-speech-wrapper.side-top .bubble-avatar {
    order: 1;
    margin-bottom: 15px;
}

.rpg-speech-wrapper.side-top .bubble {
    order: 2;
    max-width: 100%;
}

/* Tail points UP (toward avatar) - positioned at top of bubble, aligned with avatar */
.rpg-speech-wrapper.side-top .bubble::after {
    content: "";
    position: absolute;
    top: -24px;
    left: 20px;
    border: 12px solid transparent;
    border-bottom-color: #ffffff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    filter: drop-shadow(0 -2px 0 #333);
}

/* ============================================
   SIDE: BOTTOM (Avatar BELOW, bubble ABOVE)
   ============================================ */
.rpg-speech-wrapper.side-bottom {
    flex-direction: column;
    align-items: flex-start;
}

.rpg-speech-wrapper.side-bottom .bubble-avatar {
    order: 2;
    margin-top: 5px;
}

.rpg-speech-wrapper.side-bottom .bubble {
    order: 1;
    max-width: 100%;
}

/* Tail points DOWN (toward avatar) - positioned at bottom of bubble */
.rpg-speech-wrapper.side-bottom .bubble::after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 20px;
    border: 12px solid transparent;
    border-top-color: #ffffff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    filter: drop-shadow(0 2px 0 #333);
}
/* ============================================
   QUIZ GATE STYLES
   ============================================ */

.rpg-quiz-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 25px 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.rpg-quiz-title {
    margin-top: 0;
    color: #2c3e50;
    font-size: 1.6rem;
}

.rpg-quiz-description {
    color: #7f8c8d;
    font-size: 1rem;
    margin-bottom: 25px;
}

/* ============================================
   QUESTION STYLES
   ============================================ */

.rpg-quiz-question {
    margin-bottom: 25px;
    padding: 15px 18px;
    border-radius: 8px;
    border: 1px solid #e8ecf0;
    transition: border-color 0.3s ease;
}

.rpg-quiz-question h4 {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #34495e;
}

.rpg-quiz-question-text {
    font-size: 1.05rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.rpg-quiz-question-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0 12px 0;
    border: 1px solid #e8ecf0;
}

/* ============================================
   MULTIPLE CHOICE OPTIONS
   ============================================ */

.rpg-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.rpg-quiz-options label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    border: 1px solid transparent;
    font-size: 0.95rem;
}

.rpg-quiz-options label:hover {
    background: #f0f4f8;
}

.rpg-quiz-options input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.rpg-quiz-options input[type="radio"]:checked + label {
    background: #e8f0fe;
    border-color: #4a90d9;
}

/* ============================================
   SHORT ANSWER
   ============================================ */

.rpg-quiz-short-answer input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.rpg-quiz-short-answer input:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */

.rpg-quiz-submit {
    text-align: center;
    margin-top: 20px;
}

.rpg-quiz-submit-btn {
    background: #2c3e50;
    color: #ffffff;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.rpg-quiz-submit-btn:hover {
    background: #1a252f;
}

.rpg-quiz-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   RESULTS
   ============================================ */

.rpg-quiz-results {
    padding: 20px 25px;
    border-radius: 8px;
    margin: 15px 0;
    display: block !important;
}

.rpg-quiz-results.pass {
    background: #e8f5e9;
    border: 2px solid #4caf50;
}

.rpg-quiz-results.fail {
    background: #fff5f5;
    border: 2px solid #e53e3e;
}

.rpg-quiz-score {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.rpg-quiz-success-message {
    text-align: center;
}

.rpg-quiz-success-message h2 {
    color: #2e7d32;
}

.rpg-quiz-fail-message {
    text-align: center;
}

.rpg-quiz-fail-message h2 {
    color: #c62828;
}

/* ============================================
   RETRY BUTTON
   ============================================ */

.rpg-quiz-retry {
    background: #e53e3e;
    color: #ffffff;
    border: none;
    padding: 10px 30px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.rpg-quiz-retry:hover {
    background: #c62828;
}

/* ============================================
   INCOMPLETE STATE
   ============================================ */

.rpg-quiz-question.rpg-quiz-incomplete {
    border-color: #e53e3e;
    background: #fff5f5;
}
 /* Mission COmpletion 'Complete' button */
.mission-completion-button.mission-completed {
    background: #4caf50 !important;
    cursor: default !important;
    opacity: 0.7;
}

.mission-completion-button.mission-completed::after {
    content: ' ✅';
}
/* Already completed mission button */
.mission-completion-button.mission-completed {
    background: #4caf50 !important;
    border-color: #388e3c !important;
    cursor: default !important;
    opacity: 0.7;
    pointer-events: none; /* Prevents any click interaction */
}

/* But if you want the link to still work, use this instead: */
.mission-completion-button.mission-completed {
    background: #4caf50 !important;
    border-color: #388e3c !important;
    opacity: 0.8;
}

.mission-completion-button.mission-completed:hover {
    background: #4caf50 !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Frontend modal (for mission completion button) */
.rpg-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rpg-modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.rpg-modal-close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 24px;
    cursor: pointer;
}
.rpg-xp-badge {
    display: inline-block;
    background: #4CAF50;
    color: #fff;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    margin: 12px 0;
}
.rpg-modal-btn {
    background: #2196F3;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
/* ============================================
   GAPFILL STYLES
   ============================================ */

.rpg-gapfill-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 25px 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.rpg-gapfill-title {
    margin-top: 0;
    color: #2c3e50;
}

.rpg-gapfill-description {
    color: #7f8c8d;
    font-size: 1rem;
    margin-bottom: 20px;
}

.rpg-gapfill-text {
    font-size: 1.2rem;
    line-height: 2.4;
    padding: 15px 0;
}

.rpg-gapfill-text-part {
    white-space: pre-wrap;
}

.rpg-gapfill-gap {
    display: inline-block;
    position: relative;
    margin: 0 4px;
    min-width: 100px;
}

.rpg-gapfill-select {
    padding: 4px 8px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    background: #f9f9f9;
    cursor: pointer;
    min-width: 80px;
}

.rpg-gapfill-select:hover {
    border-color: #0073aa;
}

.rpg-gapfill-gap.rpg-gapfill-incomplete .rpg-gapfill-select {
    border-color: #e53e3e;
    background: #fff5f5;
}

.rpg-gapfill-gap.rpg-gapfill-correct .rpg-gapfill-select {
    border-color: #4caf50;
    background: #e8f5e9;
}

.rpg-gapfill-gap.rpg-gapfill-incorrect .rpg-gapfill-select {
    border-color: #e53e3e;
    background: #ffebee;
}

.rpg-gapfill-correct-answer {
    display: block;
    font-size: 0.8rem;
    color: #4caf50;
    font-weight: bold;
    margin-top: 2px;
}

.rpg-gapfill-submit {
    text-align: center;
    margin-top: 20px;
}

.rpg-gapfill-submit-btn {
    background: #2c3e50;
    color: #ffffff;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.rpg-gapfill-submit-btn:hover {
    background: #1a252f;
}

.rpg-gapfill-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Results */
.rpg-gapfill-results {
    padding: 20px 25px;
    border-radius: 8px;
    margin: 15px 0;
    display: block !important;
}

.rpg-gapfill-results.pass {
    background: #e8f5e9;
    border: 2px solid #4caf50;
}

.rpg-gapfill-results.fail {
    background: #fff5f5;
    border: 2px solid #e53e3e;
}

.rpg-gapfill-score {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Retry button */
.rpg-gapfill-retry {
    background: #e53e3e;
    color: #ffffff;
    border: none;
    padding: 10px 30px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.rpg-gapfill-retry:hover {
    background: #c62828;
}
/* ============================================================
   ESCAPE PURGATORY BUTTON — health giving look
   ============================================================ */

.rpg-escape-purgatory-wrap {
    margin: 30px auto 20px;
    max-width: 480px;
    padding: 24px 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #10b981;
    box-shadow:
        0 0 0 4px rgba(16, 185, 129, 0.1),
        0 6px 20px rgba(16, 185, 129, 0.2);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Soft glow pulse on the wrapper */
.rpg-escape-purgatory-wrap::before {
    content: "";
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle at center,
                                rgba(16, 185, 129, 0.25) 0%,
                                transparent 65%);
    animation: rpg-escape-pulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rpg-escape-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.03); }
}

.rpg-escape-purgatory-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 26px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow:
        0 3px 0 #065f46,
        0 6px 14px rgba(5, 150, 105, 0.35);
}

.rpg-escape-purgatory-button:hover {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    transform: translateY(-1px);
    box-shadow:
        0 4px 0 #065f46,
        0 8px 18px rgba(5, 150, 105, 0.45);
    color: #ffffff;
}

.rpg-escape-purgatory-button:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 #065f46,
        0 3px 8px rgba(5, 150, 105, 0.35);
}

.rpg-escape-purgatory-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.rpg-escape-hearts {
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 4px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.rpg-escape-label {
    font-size: 1rem;
    line-height: 1.2;
}

/* Small screens */
@media (max-width: 480px) {
    .rpg-escape-purgatory-wrap {
        padding: 18px 14px;
        margin: 20px 10px;
    }
    .rpg-escape-purgatory-button {
        padding: 12px 18px;
        font-size: 0.9rem;
    }
    .rpg-escape-label {
        font-size: 0.9rem;
    }
    .rpg-escape-hearts {
        font-size: 1rem;
    }
}
/* -------------------------------
----------- RPG Responsive -------
----------------------------------*/
@media (max-width: 600px) {
    .rpg-avatar-container {
        margin-left: auto;
        margin-right: auto;
    }
    
    .rpg-avatar-container img {
        width: 200px !important;
    }
    
    .profile-user-stats-container {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
    }
    
    .mission-log-container {
        padding: 10px;
    }
    
    .the-missions-log {
        padding: 10px;
    }
    
    .mission-log-container li {
        padding: 5px;
    }
    
    .mission-log-entry {
        margin-right: 10px;
    }
    
    .mission-log-entry-icon {
        max-width: 60px;
        max-height: 90px;
    }
	
	/* RESPONSIVE SPEECH BUBBLE */
  .rpg-speech-wrapper {
        flex-direction: column !important;
        align-items: center;
    }
    
    .rpg-speech-wrapper .bubble-avatar {
        width: 50px;
        height: 50px;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        order: 1 !important;
    }
    
    .rpg-speech-wrapper .bubble {
        max-width: 100%;
        font-size: 1em;
        padding: 15px 18px;
        order: 2 !important;
    }
    
    /* On mobile, tail always points UP (toward avatar) */
    .rpg-speech-wrapper .bubble::after {
        top: -24px !important;
        bottom: auto !important;
        left: calc(50% - 12px) !important;
        right: auto !important;
        border-bottom-color: #ffffff !important;
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        filter: drop-shadow(0 -2px 0 #333) !important;
    }
	
	/* The QUIZ */
	 .rpg-quiz-container {
        padding: 16px;
        margin: 10px;
    }

    .rpg-quiz-options label {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .rpg-quiz-submit-btn {
        width: 100%;
        padding: 14px;
    }

    .rpg-quiz-title {
        font-size: 1.3rem;
    }
	/* Gapfill */
	  .rpg-gapfill-container {
        padding: 16px;
        margin: 10px;
    }
    
    .rpg-gapfill-text {
        font-size: 1rem;
        line-height: 2.2;
    }
    
    .rpg-gapfill-gap {
        min-width: 80px;
    }
    
    .rpg-gapfill-select {
        font-size: 0.9rem;
        min-width: 60px;
    }
    
    .rpg-gapfill-submit-btn {
        width: 100%;
        padding: 14px;
    }
}