/* =========================================
   RxChamp - Complete Style Sheet (v1.0)
   Rebranded from RxMaster
   ========================================= */

/* Base Reset */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    /* Safe Area Variables for Notches/Home Bars */
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background: #f3f4f6; 
    margin: 0; 
    /* Add padding for Safe Areas (Notches) */
    padding-top: max(10px, var(--sat)); 
    padding-bottom: max(10px, var(--sab));
    padding-left: var(--sal);
    padding-right: var(--sar);
    
    text-align: center; 
    overflow-x: hidden; 
    /* Prevents the 'Rubber Band' bounce effect on iOS/Android */
    overscroll-behavior-y: none;
    user-select: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
}

.container { 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
    background: white; 
    padding: 20px; 
    border-radius: 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    position: relative; 
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* --- HEADERS & STREAK --- */
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; width: 100%; }
h1 { color: #2563eb; margin: 0; font-size: 22px; text-align: left; letter-spacing: -0.5px; }
.subtitle { color: #6b7280; font-size: 13px; margin: 0; text-align: left; font-weight: 500; }

.streak-badge { 
    background: #fff1f2; color: #e11d48; font-weight: 800; font-size: 15px; 
    padding: 6px 12px; border-radius: 30px; border: 2px solid #e11d48; 
    display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(225, 29, 72, 0.15);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}
.streak-badge.pulse { transform: scale(1.2); }

/* --- CONTROLS --- */
.controls-area { display: flex; gap: 8px; margin-bottom: 8px; width: 100%; }
select { 
    padding: 12px; 
    border-radius: 12px; 
    border: 1px solid #e5e7eb; font-weight: 600; color: #374151; 
    cursor: pointer; background: #f9fafb; outline: none;
    transition: border-color 0.2s;
    flex: 1; 
    min-width: 0; 
    font-size: 16px; 
}
select:focus { border-color: #2563eb; }
#modeSelect { flex: 2; } 

.toggle-row { margin-bottom: 15px; text-align: left; width: 100%; }
.toggle-label { 
    font-size: 13px; color: #6b7280; font-weight: 600; 
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 5px 0; 
}
input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer; }

/* --- CARD AREA (THE FLIPPER) --- */
.card-area { 
    perspective: 1000px; 
    width: 100%;
    /* Height ensures scrollable content fits */
    height: 55vh; 
    min-height: 400px; 
    max-height: 600px; 
    margin-bottom: 20px; 
    cursor: pointer; 
    position: relative; 
    z-index: 10; 
}

.card-inner { 
    position: relative; width: 100%; height: 100%; 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    transform-style: preserve-3d; border-radius: 18px; 
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.1); 
}
.card-inner.flipped { transform: rotateY(180deg); }

.card-face { 
    position: absolute; width: 100%; height: 100%; 
    backface-visibility: hidden; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; padding: 15px; 
    box-sizing: border-box; background: white; border-radius: 18px; 
    border: 1px solid #f3f4f6; 
}

.card-front { background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%); z-index: 2; }

/* Default Back (Centered Content) */
.card-back { 
    background: #fff; transform: rotateY(180deg); 
    justify-content: center; 
    align-items: center;     
    text-align: center;
    padding-top: 0; 
    z-index: 1; 
}

/* --- CRITICAL FIX: SCROLLABLE BACK (ULTIMATE MODE) --- */
.card-back.detailed-view {
    display: block !important; /* Force block to allow scrolling */
    text-align: left;
    
    /* Alignment: Start at Top */
    justify-content: flex-start !important; 
    align-items: flex-start !important;
    
    /* Scrolling Physics */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; /* Smooth iOS Scroll */
    touch-action: pan-y; /* Allow vertical drag */
    
    /* Padding to prevent Cutoffs */
    padding-top: 30px;    /* Fixes Top Cutoff */
    padding-bottom: 80px; /* Fixes Bottom Cutoff */
    padding-left: 15px;
    padding-right: 15px;
    
    height: 100%; 
    width: 100%;
    pointer-events: auto;
    border-radius: 18px; 
}

/* --- TYPOGRAPHY --- */
h2 { 
    margin: 0; color: #111827; font-size: 24px; 
    font-weight: 800; line-height: 1.3; 
    word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; 
    max-width: 100%;
}
.name-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; width: 100%; }

.row { border-bottom: 1px solid #f3f4f6; padding: 12px 0; width: 100%; text-align: left; }
.row:last-child { border-bottom: none; }
.label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 700; }

.val-container { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.val { 
    font-size: 15px; font-weight: 600; color: #1f2937; line-height: 1.4; 
    word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; flex: 1;
}

.warn { color: #dc2626; }
.highlight { color: #2563eb; font-weight: 900; }
.affix-tag { font-size: 11px; background: #dbeafe; color: #1e40af; padding: 3px 8px; border-radius: 12px; margin-left: 6px; font-weight: 700; vertical-align: middle; white-space: nowrap; display: inline-block;}

/* Audio Button */
.btn-audio { 
    background: #e0f2fe; border: none; border-radius: 50%; width: 36px; height: 36px; 
    display: flex; align-items: center; justify-content: center; cursor: pointer; 
    color: #0284c7; flex-shrink: 0; transition: background 0.2s; 
}
.btn-audio:active { transform: scale(0.9); background: #bae6fd; }
.btn-audio svg { width: 18px; height: 18px; fill: currentColor; }

/* --- NAVIGATION --- */
.btn-group { display: flex; gap: 12px; margin-top: auto; width: 100%; padding-bottom: 10px; }
button.nav { 
    flex: 1; padding: 16px; background: #2563eb; color: white; border: none; 
    border-radius: 14px; font-size: 16px; font-weight: bold; cursor: pointer; 
    transition: transform 0.1s, background 0.2s; 
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
    touch-action: manipulation;
}
button.nav:active { transform: scale(0.96); background: #1d4ed8; }
button.secondary { background: #f3f4f6; color: #4b5563; box-shadow: none; border: 1px solid #e5e7eb; }
button.secondary:active { background: #e5e7eb; }

/* --- QUIZ STYLES --- */
.quiz-container { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.quiz-btn { 
    background: white; border: 2px solid #e5e7eb; padding: 14px; border-radius: 12px; 
    font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; text-align: left; 
    transition: all 0.2s; position: relative; overflow: hidden; 
    word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;
    touch-action: manipulation;
}
.quiz-btn:active { transform: scale(0.98); background: #f9fafb; }
.quiz-btn.correct { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.quiz-btn.wrong { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.quiz-header { font-size: 13px; color: #6b7280; margin-bottom: 5px; font-weight: 600; text-transform: uppercase; }

/* --- TRACKER & FLAGS --- */
.exam-tracker {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); 
    gap: 6px;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.tracker-btn {
    width: 100%; aspect-ratio: 1; border: 1px solid #d1d5db; background: white;
    color: #6b7280; font-size: 12px; font-weight: bold; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.tracker-btn.current { border: 2px solid #2563eb; color: #2563eb; transform: scale(1.1); }
.tracker-btn.answered { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.tracker-btn.flagged { background: #fef3c7; border-color: #fbbf24; color: #d97706; position: relative; }
.tracker-btn.flagged::after { content: "•"; position: absolute; top: 0; right: 2px; color: #d97706; font-size: 14px; line-height: 10px; }
.tracker-btn.tracker-correct { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.tracker-btn.tracker-wrong { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }

.flag-btn {
    position: absolute; top: 5px; right: 5px; background: none; border: none;
    font-size: 28px; padding: 10px; cursor: pointer; opacity: 0.3;
    transition: opacity 0.2s; z-index: 5;
}
.flag-btn.active { opacity: 1; color: #f59e0b; }

/* --- ULTIMATE MODE GRID --- */
.ult-section { margin-bottom: 15px; width: 100%; }
.ult-header { font-size: 11px; font-weight: 700; color: #2563eb; margin-bottom: 4px; text-transform: uppercase; border-bottom: 1px solid #e5e7eb; padding-bottom: 2px; }

.ult-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 8px; 
    width: 100%;
}

.ult-btn {
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    padding: 8px 4px; font-size: 13px; font-weight: 600; color: #4b5563;
    cursor: pointer; text-align: center;
    transition: all 0.2s;
    min-height: 50px; /* Touch friendly */
    display: flex; align-items: center; justify-content: center;
    word-break: break-word; hyphens: auto;
    height: auto; 
    user-select: none;
}
.ult-btn:active { background: #f3f4f6; }
.ult-btn.correct { background: #dcfce7; border-color: #22c55e; color: #15803d; font-weight: 800; pointer-events: none; }
.ult-btn.wrong { background: #fee2e2; border-color: #ef4444; color: #b91c1c; opacity: 0.6; }
.ult-btn.locked { background: #f3f4f6; color: #9ca3af; pointer-events: none; border-color: #f3f4f6; }

/* --- HINT & CONFETTI --- */
.hint { margin-top: 20px; font-size: 11px; color: #93c5fd; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: #eff6ff; padding: 6px 12px; border-radius: 20px; }
.confetti { position: absolute; width: 8px; height: 8px; background-color: #fcd34d; animation: fall linear forwards; z-index: 100; pointer-events: none; }
@keyframes fall { 0% { transform: translateY(-50px) rotate(0deg); opacity: 1; } 100% { transform: translateY(600px) rotate(720deg); opacity: 0; } }

/* --- MILESTONE OVERLAY --- */
#milestone-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.98); z-index: 200;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    border-radius: 20px; text-align: center; padding: 20px; box-sizing: border-box;
}
.milestone-emoji { font-size: 60px; margin-bottom: 15px; animation: bounce 1s infinite; }
.milestone-title { font-size: 28px; font-weight: 900; color: #2563eb; margin-bottom: 8px; }
.milestone-desc { font-size: 16px; color: #6b7280; margin-bottom: 25px; font-weight: 600; }
.milestone-btn { padding: 14px 30px; background: #2563eb; color: white; border: none; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; box-shadow: 0 10px 20px -5px rgba(37,99,235,0.4); transition: transform 0.2s; }
.milestone-btn:active { transform: scale(0.95); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* --- MOBILE & SMALL SCREEN TWEAKS --- */
@media (max-width: 380px) {
    h1 { font-size: 18px; }
    h2 { font-size: 18px; }
    .streak-badge { font-size: 13px; padding: 4px 8px; }
    .card-area { height: 60vh; /* Taller on small screens */ }
    .quiz-btn, .ult-btn { font-size: 12px; padding: 8px; }
    button.nav { padding: 14px; font-size: 15px; }
    .container { padding: 15px; width: 100%; border-radius: 0; min-height: 100vh; box-shadow: none; }
}

/* --- FOOTER / MONEY BUTTONS --- */
.money-btn-group {
    margin-top: 25px;       
    width: 100%;
    display: flex; flex-direction: column; gap: 12px; align-items: center;    
    padding-bottom: 10px;
}
.money-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 20px; border-radius: 12px; text-decoration: none;
    font-weight: 700; font-size: 14px; width: 100%; max-width: 100%;
    transition: transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}
.money-btn:active { transform: scale(0.96); }
.btn-amazon { background-color: #232f3e; color: #ffffff; border: 1px solid #37475a; }
.btn-coffee { background-color: #FFDD00; color: #000000; border: 1px solid #e6c800; }

/* --- SORTING GAME --- */
.sorting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; width: 100%; }
.sort-bin {
    padding: 20px; border-radius: 15px; font-weight: 800; font-size: 20px; color: white;
    border: none; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    transition: transform 0.1s; text-shadow: 0 1px 2px rgba(0,0,0,0.3); touch-action: manipulation;
}
.sort-bin:active { transform: translateY(4px); box-shadow: none; }
.bin-c2 { background: #ef4444; }
.bin-c3 { background: #f97316; }
.bin-c4 { background: #3b82f6; }
.bin-c5 { background: #10b981; }

/* --- DROPDOWN STYLING --- */
optgroup { font-weight: 900 !important; color: #1e3a8a !important; background-color: #eff6ff; font-family: sans-serif; font-size: 16px; }
option { font-weight: 500; color: #374151; background-color: #ffffff; padding: 10px; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 600; }

/* --- INTRO MODAL --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(4px); animation: fadeIn 0.3s;
}
.intro-card {
    background: white; width: 90%; max-width: 400px;
    border-radius: 20px; padding: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    text-align: center;
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-header h2 { font-size: 24px; color: #1e3a8a; margin-bottom: 5px; }

.instruction-step {
    display: flex; align-items: center; gap: 15px;
    background: #f8fafc; padding: 12px; border-radius: 12px;
    margin-bottom: 12px; text-align: left; border: 1px solid #e2e8f0;
}
.step-icon { font-size: 24px; }
.step-text strong { display: block; color: #1e293b; font-size: 15px; }
.step-text p { margin: 2px 0 0 0; color: #64748b; font-size: 13px; }

.checkbox-container {
    margin: 20px 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; color: #64748b;
}

.modal-btn {
    width: 100%; padding: 14px; background: #2563eb; color: white;
    border: none; border-radius: 12px; font-weight: 700; font-size: 16px;
    cursor: pointer; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.modal-btn:active { transform: scale(0.98); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- IOS PROMPT --- */
.ios-prompt {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 400px;
    background: #1e293b; color: white;
    padding: 15px; border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    z-index: 3000; text-align: center;
    font-size: 14px;
    animation: slideUp 0.5s ease-out;
}
.ios-prompt button {
    margin-top: 10px; background: #3b82f6; color: white;
    border: none; padding: 5px 15px; border-radius: 20px; font-weight: bold;
}
.ios-prompt::after {
    content: ''; position: absolute; bottom: -10px; left: 50%;
    border-width: 10px 10px 0; border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* --- GAME GRID FALLBACKS --- */
.options-grid {
    display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px;
    max-height: 50vh; overflow-y: auto; 
}
@media (min-width: 600px) { .options-grid { grid-template-columns: repeat(2, 1fr); } }
.option-btn { font-size: 14px; padding: 12px; white-space: normal; height: auto; min-height: 50px; }