/* AbildskovUndervisning - abildskovundervisning.dk */
/* =====================================================
   MUS - PENGEBUTIK
===================================================== */

.shop-board {
    width: min(94vw, 680px);
    margin: 0 auto;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1.6vh, 12px);
    text-align: center;
}

.shop-progress {
    font-size: 0.95rem;
    opacity: 0.85;
}

.shop-prompt {
    font-size: clamp(1.05rem, 3.4vh, 1.5rem);
    font-weight: 700;
}

.shop-placed {
    width: 100%;
    min-height: clamp(56px, 12vh, 84px);
    max-height: 22vh;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border: 2px dashed #770000;
    border-radius: 12px;
    background: #0d0000;
}

.shop-placed.correct { border: 2px solid #7cd992; background: #0e2a16; }
.shop-placed.wrong { border: 2px solid #ff9d9d; background: #2a0e0e; }

.shop-placed-hint {
    opacity: 0.5;
}

.shop-total {
    font-size: 1.1rem;
    font-weight: 700;
}

.shop-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.shop-money {
    font-weight: 800;
    cursor: pointer;
    color: #1a0000;
    border: 3px solid #fff1a8;
    background: #ffd44d;
    transition: transform 0.1s ease;
}

.shop-money:hover { transform: translateY(-2px); }

.shop-coin {
    width: clamp(40px, 8vh, 54px);
    height: clamp(40px, 8vh, 54px);
    border-radius: 50%;
    font-size: clamp(0.9rem, 2.4vh, 1.15rem);
}

.shop-value-1, .shop-value-5, .shop-value-10 { background: #d9d9d9; border-color: #fff; }
.shop-value-20 { background: #e0b04c; }

.shop-note {
    width: clamp(62px, 11vh, 86px);
    height: clamp(34px, 6.5vh, 46px);
    border-radius: 6px;
    font-size: clamp(0.9rem, 2.4vh, 1.1rem);
    color: #fff;
    border-color: #ffffff88;
    background: #1f6fb5;
}

.shop-value-100 { background: #c47a1c; }
.shop-value-200 { background: #2e8b57; }
.shop-value-500 { background: #6b3fa0; }
.shop-value-1000 { background: #a02c4a; }

.shop-confirm {
    min-width: 180px;
}