/**

 * @author      Mike Fairbrother <mike@fairbrother.me>

 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.

 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse

 *              any part of this code without explicit written permission from the author.

 */

/* ---- Money Market Styles ---- */







.mm-logo {



    font-size: 64px;



    margin-bottom: 8px;



    text-align: center;



    filter: drop-shadow(0 4px 20px rgba(255, 217, 61, 0.3));



}



.mm-title {



    font-size: 28px;



    font-weight: 800;



    text-align: center;



    background: linear-gradient(135deg, #ffd93d, #f0a030);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 4px;



}



.mm-subtitle {



    font-size: 14px;



    color: rgba(255,255,255,0.5);



    text-align: center;



    margin-bottom: 16px;



}



.menu-best {



    font-size: 13px;



    color: rgba(255,255,255,0.4);



    text-align: center;



    margin-bottom: 20px;



}







/* Difficulty selector */



.mm-difficulty {



    margin: 0 0 20px;



    text-align: center;



}



.mm-diff-label {



    font-size: 11px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 1px;



    color: rgba(255,255,255,0.35);



    margin-bottom: 8px;



}



.mm-diff-pills {



    display: flex;



    gap: 6px;



    justify-content: center;



    flex-wrap: wrap;



}



.mm-pill {



    padding: 8px 14px;



    border-radius: 20px;



    border: 1px solid rgba(255,255,255,0.12);



    background: rgba(255,255,255,0.05);



    color: rgba(255,255,255,0.55);



    font-size: 12px;



    font-weight: 700;



    cursor: pointer;



    transition: all 150ms;



    font-family: inherit;



}



.mm-pill.active {



    background: linear-gradient(135deg, rgba(255,217,61,0.2), rgba(240,160,48,0.15));



    border-color: rgba(255,217,61,0.35);



    color: #ffd93d;



}







/* Game area */



#game-area {



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    flex: 1;



    padding: 20px 16px;



    position: relative;



}







.mm-prompt {



    font-size: 18px;



    font-weight: 700;



    color: rgba(255,255,255,0.7);



    text-align: center;



    margin-bottom: 20px;



    min-height: 24px;



    line-height: 1.4;



    max-width: 340px;



}







/* Visual area for coins/notes */



.mm-visual-area {



    display: flex;



    flex-wrap: wrap;



    gap: 12px;



    justify-content: center;



    align-items: center;



    margin-bottom: 24px;



    min-height: 80px;



    max-width: 340px;



}







/* Coin styling */



.mm-coin {



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    font-weight: 800;



    text-align: center;



    line-height: 1;



    border: 3px solid rgba(255,255,255,0.15);



    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.15);



    user-select: none;



    position: relative;



    flex-shrink: 0;



}







/* Coin sizes */



.mm-coin-small {



    width: 56px;



    height: 56px;



    font-size: 14px;



}



.mm-coin-medium {



    width: 68px;



    height: 68px;



    font-size: 16px;



}



.mm-coin-large {



    width: 80px;



    height: 80px;



    font-size: 18px;



}







/* Coin colours - copper */



.mm-coin-copper {



    background: radial-gradient(circle at 35% 35%, #d4875e, #b5651d, #8b4513);



    border-color: rgba(181, 101, 29, 0.5);



    color: #3d1f00;



}



/* Coin colours - silver */



.mm-coin-silver {



    background: radial-gradient(circle at 35% 35%, #e8e8e8, #b0b0b0, #888);



    border-color: rgba(180, 180, 180, 0.5);



    color: #333;



}



/* Coin colours - gold (pound coins) */



.mm-coin-gold {



    background: radial-gradient(circle at 35% 35%, #ffe066, #ffd93d, #d4a017);



    border-color: rgba(212, 160, 23, 0.5);



    color: #5a3e00;



}



/* Coin colours - bimetallic (2 pound) */



.mm-coin-bimetal {



    background: radial-gradient(circle at 50% 50%, #ffe066 0%, #ffd93d 40%, #b0b0b0 41%, #888 100%);



    border-color: rgba(180, 180, 180, 0.5);



    color: #3d1f00;



}







/* Coin inner ring for bimetallic effect */



.mm-coin-bimetal::after {



    content: '';



    position: absolute;



    width: 60%;



    height: 60%;



    border-radius: 50%;



    background: radial-gradient(circle at 35% 35%, #ffe066, #ffd93d, #d4a017);



    top: 20%;



    left: 20%;



}



.mm-coin-bimetal .mm-coin-text {



    position: relative;



    z-index: 1;



}







.mm-coin-text {



    position: relative;



    z-index: 1;



    text-shadow: 0 1px 2px rgba(255,255,255,0.3);



}







/* Note styling */



.mm-note {



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 8px;



    font-weight: 800;



    font-size: 20px;



    text-align: center;



    border: 2px solid rgba(255,255,255,0.2);



    box-shadow: 0 4px 12px rgba(0,0,0,0.3);



    user-select: none;



    width: 120px;



    height: 64px;



    flex-shrink: 0;



}



.mm-note-5 {



    background: linear-gradient(135deg, #5ba3cf, #3a7ca5);



    color: #fff;



}



.mm-note-10 {



    background: linear-gradient(135deg, #e08850, #b5651d);



    color: #fff;



}



.mm-note-20 {



    background: linear-gradient(135deg, #b07fcf, #7b4f9e);



    color: #fff;



}







/* Answer buttons */



.mm-answers {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12px;



    width: 100%;



    max-width: 320px;



}







.mm-answer-btn {



    padding: 18px 12px;



    border-radius: 16px;



    border: 2px solid rgba(255,255,255,0.1);



    background: rgba(255,255,255,0.06);



    color: #fff;



    font-size: 20px;



    font-weight: 800;



    cursor: pointer;



    transition: all 150ms;



    font-family: inherit;



    text-align: center;



    -webkit-tap-highlight-color: transparent;



    user-select: none;



    line-height: 1.2;



}



.mm-answer-btn:active {



    transform: scale(0.95);



}



.mm-answer-btn.correct {



    background: rgba(46, 213, 115, 0.3);



    border-color: #2ed573;



    color: #2ed573;



    animation: mm-pop 300ms ease;



}



.mm-answer-btn.wrong {



    background: rgba(255, 71, 87, 0.3);



    border-color: #ff4757;



    color: #ff4757;



    animation: mm-shake 300ms ease;



}







@keyframes mm-pop {



    0% { transform: scale(1); }



    50% { transform: scale(1.1); }



    100% { transform: scale(1); }



}



@keyframes mm-shake {



    0%, 100% { transform: translateX(0); }



    25% { transform: translateX(-8px); }



    75% { transform: translateX(8px); }



}







/* Feedback overlay text */



.mm-feedback {



    position: absolute;



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%);



    font-size: 48px;



    font-weight: 800;



    pointer-events: none;



    opacity: 0;



    transition: all 300ms ease;



}



.mm-feedback.show {



    opacity: 1;



    animation: mm-float-up 600ms ease forwards;



}



@keyframes mm-float-up {



    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }



    30% { transform: translate(-50%, -60%) scale(1.2); opacity: 1; }



    100% { transform: translate(-50%, -100%) scale(1); opacity: 0; }



}







/* Game over stats */



.mm-stats-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 10px;



    margin: 20px 0;



}



.mm-stat-box {



    background: rgba(255,255,255,0.06);



    border-radius: 12px;



    padding: 14px 8px;



    text-align: center;



}



.mm-stat-num {



    display: block;



    font-size: 24px;



    font-weight: 800;



    color: #fff;



}



.mm-stat-lbl {



    font-size: 10px;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 0.5px;



    color: rgba(255,255,255,0.35);



    margin-top: 2px;



}







/* Word problem styling */



.mm-word-problem {



    background: rgba(255,255,255,0.06);



    border-radius: 12px;



    padding: 16px 20px;



    text-align: center;



    font-size: 16px;



    color: rgba(255,255,255,0.8);



    line-height: 1.5;



    max-width: 300px;



}



.mm-word-problem .mm-item-name {



    color: #ffd93d;



    font-weight: 700;



}



.mm-word-problem .mm-item-price {



    color: #2ed573;



    font-weight: 700;



}







/* Price tag styling */



.mm-price-tags {



    display: flex;



    gap: 12px;



    flex-wrap: wrap;



    justify-content: center;



}



.mm-price-tag {



    background: rgba(255,217,61,0.1);



    border: 1px solid rgba(255,217,61,0.25);



    border-radius: 10px;



    padding: 10px 16px;



    text-align: center;



}



.mm-price-tag-emoji {



    font-size: 28px;



    display: block;



    margin-bottom: 4px;



}



.mm-price-tag-price {



    font-size: 16px;



    font-weight: 800;



    color: #ffd93d;



}







/* Help modal tweaks */



.help-section {



    margin-bottom: 16px;



}



.help-section h4 {



    font-size: 14px;



    font-weight: 700;



    color: #ffd93d;



    margin-bottom: 4px;



}



.help-section p {



    font-size: 13px;



    color: rgba(255,255,255,0.6);



    line-height: 1.5;



}