/* ═══════════════════════════════════════════════════════════════
   ks-mynt.css — myntspelen (myntvaxlingmenu.php och myntvaxling.php)

   Allt är scopat till main. Ytor, text och ramar tar färg ur
   temavariablerna i css/style.css, så spelen byter utseende med temat.
   Bara mynten har fasta färger: de ska se ut som riktiga kronor
   (1 och 2 kr i silver, 5 och 10 kr i guld).
   ═══════════════════════════════════════════════════════════════ */

main {
    --mv-ratt: #2e9e4f;
    --mv-fel:  #d9443a;
    --mv-radie: 18px;
}

/* ── Mynten ─────────────────────────────────────────────────────── */
main .coin, main .mv-mynt, main .legend-coin {
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: 'Exo 2', sans-serif; font-weight: 800; line-height: 1;
    box-shadow: 0 3px 8px rgba(0,0,0,.25); flex-shrink: 0; user-select: none;
}
main .c1  { background: radial-gradient(circle at 35% 35%, #f2f2f2, #a0a0a0); color: #3a3a3a; border: 2px solid #858585; }
main .c2  { background: radial-gradient(circle at 35% 35%, #e6e6e6, #8e8e8e); color: #2e2e2e; border: 2px solid #747474; }
main .c5  { background: radial-gradient(circle at 35% 35%, #ffe680, #c9a000); color: #5a3d00; border: 2px solid #a88400; }
main .c10 { background: radial-gradient(circle at 35% 35%, #f2de7a, #b08a00); color: #3a2800; border: 2px solid #8a6800; }

main .mv-mynt-rad { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
main .mv-mynt { width: 50px; height: 50px; font-size: 1.15rem; animation: mvSvava 3s ease-in-out infinite; }
main .mv-mynt:nth-child(2) { animation-delay: .4s; }
main .mv-mynt:nth-child(3) { animation-delay: .8s; }
main .mv-mynt:nth-child(4) { animation-delay: 1.2s; }
@keyframes mvSvava { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ── Vänsterkolumnen i spelet ───────────────────────────────────── */
main .mv-panel { display: flex; flex-direction: column; gap: 12px; }
main .mv-ruta {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle);
    border-radius: 14px; padding: 12px; text-align: center;
}
main .mv-ruta .etikett { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); }
main .mv-ruta .varde { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 2rem; color: var(--color-accent-gold); line-height: 1.2; }
main .mv-ruta .varde.streak { color: #f08a00; }
main .progress-bar { background: var(--color-bg-tertiary); border-radius: 8px; height: 12px; overflow: hidden; margin-top: 6px; }
main .progress-bar-inner { height: 100%; width: 0; border-radius: 8px; background: var(--gradient-gold, linear-gradient(90deg, #c9a000, #ffe680)); transition: width .5s ease; }
main .coin-legend h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin: 0 0 8px; }
main .legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; text-align: left; }
main .legend-row span { color: var(--color-text-secondary); font-size: .85rem; }
main .legend-coin { width: 32px; height: 32px; font-size: .8rem; }

/* ── Spelytan ───────────────────────────────────────────────────── */
main .mv-spelyta { display: flex; flex-direction: column; gap: 20px; font-family: 'Exo 2', sans-serif; }
main .game-tab-row { display: flex; gap: 8px; flex-wrap: wrap; }
main .tab-btn {
    padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .88rem;
    background: var(--color-bg-secondary); color: var(--color-text-secondary);
    border: 2px solid var(--color-border-subtle); min-height: 40px; display: inline-flex; align-items: center;
}
main .tab-btn:hover { border-color: var(--color-accent-gold); color: var(--color-text-primary); }
main .tab-btn.active { border-color: var(--color-accent-gold); color: var(--color-text-primary); background: var(--color-bg-tertiary); box-shadow: inset 0 -3px 0 var(--color-accent-gold); }

main .game-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
main .game-header h1 { font-family: 'Exo 2', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--color-text-primary); margin: 0; }
main .question-number {
    font-family: 'Orbitron', sans-serif; font-size: .78rem; padding: 5px 12px; border-radius: 999px;
    background: var(--color-bg-tertiary); color: var(--color-accent-gold); border: 1px solid var(--color-accent-border);
}
main .question-card, main .result-screen {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border-subtle);
    border-radius: var(--mv-radie); padding: 24px 28px; box-shadow: var(--shadow-sm);
}
main .question-card { display: flex; flex-direction: column; gap: 18px; }
main .question-text { font-size: 1.35rem; font-weight: 800; color: var(--color-text-primary); }
main .question-sub { color: var(--color-text-secondary); font-size: .95rem; }

/* Knappar */
main .mv-knapp, main .btn-check, main .btn-clear, main .btn-next, main .btn-restart, main .btn-menu, main .diff-btn {
    font-family: 'Exo 2', sans-serif; font-weight: 800; cursor: pointer; border-radius: 999px;
    transition: transform .15s, background .15s, border-color .15s; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
}
main .btn-check { background: var(--mv-ratt); color: #fff; border: none; padding: 10px 28px; font-size: 1.02rem; }
main .btn-clear { background: transparent; color: var(--mv-fel); border: 2px solid var(--mv-fel); padding: 10px 22px; }
main .btn-clear:hover { background: color-mix(in srgb, var(--mv-fel) 12%, transparent); }
main .btn-next { background: var(--color-accent-gold); color: var(--color-bg-primary); border: none; padding: 8px 22px; margin-left: auto; }
main .btn-restart { background: var(--color-accent-gold); color: var(--color-bg-primary); border: none; padding: 12px 30px; font-size: 1.05rem; }
main .btn-menu { background: transparent; color: var(--color-text-primary); border: 2px solid var(--color-border-subtle); padding: 12px 24px; }
main .btn-menu:hover { border-color: var(--color-accent-gold); }
main .btn-check:hover, main .btn-next:hover, main .btn-restart:hover { transform: translateY(-2px); }
main :is(.btn-check, .btn-clear, .btn-next, .btn-restart, .btn-menu, .diff-btn, .tab-btn, .coin-btn, .match-item, .rita-coin-slot):focus-visible {
    outline: 3px solid var(--color-accent-gold); outline-offset: 2px;
}
main .action-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Återkoppling */
main .feedback { display: none; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; font-weight: 700; flex-wrap: wrap; }
main .feedback.correct { display: flex; background: color-mix(in srgb, var(--mv-ratt) 14%, var(--color-bg-secondary)); color: var(--color-text-primary); border: 2px solid var(--mv-ratt); }
main .feedback.wrong   { display: flex; background: color-mix(in srgb, var(--mv-fel) 12%, var(--color-bg-secondary)); color: var(--color-text-primary); border: 2px solid var(--mv-fel); }
main .feedback-icon { font-size: 1.5rem; }

/* Resultat */
main .result-screen { display: none; text-align: center; padding: 40px 28px; }
main .result-screen h2 { font-family: 'Exo 2', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--color-text-primary); margin: 0 0 8px; }
main .result-emoji { font-size: 4rem; margin-bottom: 10px; }
main .result-score-big { font-family: 'Orbitron', sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--color-accent-gold); }
main .result-sub { color: var(--color-text-secondary); margin-bottom: 24px; }
main .result-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Spel 1: växla ──────────────────────────────────────────────── */
main .target-coin-display { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
main .target-coin { width: 80px; height: 80px; font-size: 2rem; animation: mvSvava 2.5s ease-in-out infinite; }
main .coin-bank-label, main .selected-label { font-weight: 700; color: var(--color-text-primary); font-size: .95rem; margin-bottom: 8px; }
main .selected-label small { font-weight: 400; color: var(--color-text-muted); }
main .coin-bank { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
main .coin-btn { width: 60px; height: 60px; font-size: 1.3rem; cursor: pointer; transition: transform .15s, box-shadow .15s; }
main .coin-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
main .selected-area { background: var(--color-bg-tertiary); border-radius: 14px; padding: 16px 18px; min-height: 80px; display: flex; flex-direction: column; gap: 8px; }
main .selected-coins { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 44px; }
main .selected-coin { width: 48px; height: 48px; font-size: 1.1rem; cursor: pointer; animation: mvIn .2s ease; }
main .selected-coin:hover { filter: brightness(.85); }
@keyframes mvIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
main .selected-total { font-weight: 800; color: var(--color-text-primary); font-size: 1.05rem; }
main .selected-total span { color: var(--color-accent-gold); }
main .diff-row { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
main .diff-btn { background: var(--color-bg-secondary); border: 2px solid var(--color-border-subtle); color: var(--color-text-secondary); padding: 4px 14px; font-size: .82rem; min-height: 36px; }
main .diff-btn.active { border-color: var(--color-accent-gold); color: var(--color-text-primary); background: var(--color-bg-tertiary); }

/* ── Spel 2: matcha ─────────────────────────────────────────────── */
main .match-arena { display: flex; align-items: flex-start; position: relative; }
main .match-col { display: flex; flex-direction: column; gap: 16px; flex: 1; }
main .match-col.right { align-items: flex-end; }
main .match-svg-wrap { flex: 0 0 80px; position: relative; }
main .match-svg { width: 80px; overflow: visible; }
main .match-item {
    background: var(--color-bg-tertiary); border-radius: 14px; padding: 12px 14px; cursor: pointer;
    border: 2px solid transparent; transition: border-color .15s, background .15s;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 140px;
}
main .match-item:hover { border-color: var(--color-border-subtle); }
main .match-item.selected { border-color: var(--color-accent-gold); }
main .match-item.matched { border-color: var(--mv-ratt); background: color-mix(in srgb, var(--mv-ratt) 14%, var(--color-bg-tertiary)); pointer-events: none; }
main .match-item.wrong-flash { animation: mvFel .5s; }
@keyframes mvFel { 50% { border-color: var(--mv-fel); background: color-mix(in srgb, var(--mv-fel) 18%, var(--color-bg-tertiary)); } }
main .match-coin { width: 38px; height: 38px; font-size: .9rem; }

/* ── Spel 3 och 4: påsen ────────────────────────────────────────── */
main .bag-handle { width: 60px; height: 20px; border: 4px solid #a0522d; border-bottom: none; border-radius: 12px 12px 0 0; margin: 0 auto -4px; }
main .bag-display, main .rita-bag {
    background: linear-gradient(145deg, #c8a878, #9c7a4a); border: 3px solid #7a5a30; border-radius: 24px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.2), var(--shadow-sm);
}
main .bag-display { padding: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; min-height: 150px; }
main .bag-coin { width: 56px; height: 56px; font-size: 1.2rem; }
main .answer-input-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
main .answer-input {
    width: 110px; border: 2px solid var(--color-border-subtle); border-radius: 12px; padding: 8px;
    font-family: 'Orbitron', sans-serif; font-size: 1.6rem; text-align: center;
    background: var(--color-bg-primary); color: var(--color-text-primary);
}
main .answer-input:focus { outline: none; border-color: var(--color-accent-gold); }
main .kr-label { font-weight: 800; font-size: 1.3rem; color: var(--color-text-secondary); }
main .rita-bag { padding: 22px; min-height: 180px; display: flex; flex-direction: column; gap: 14px; }
main .rita-coins-grid { display: flex; flex-wrap: wrap; gap: 10px; min-height: 60px; align-items: center; }
main .rita-coin-slot {
    width: 52px; height: 52px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.7);
    background: rgba(255,255,255,.25); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: #fff;
}
main .rita-coin-slot:hover { background: rgba(255,255,255,.45); }
main .rita-coin-slot.filled { border: none; }
main .rita-coin-slot.filled:hover { filter: brightness(.85); }
main .rita-price-tag {
    display: inline-block; background: #fff8e1; border: 2px solid #c9a000; border-radius: 8px;
    font-weight: 800; font-size: 1.1rem; color: #7a5200; padding: 4px 14px; box-shadow: var(--shadow-sm);
}
main .rita-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
main .rita-current-count { font-weight: 700; color: var(--color-text-secondary); }

@media (max-width: 700px) {
    main .question-card, main .result-screen { padding: 18px; }
    main .match-svg-wrap { flex-basis: 40px; }
    main .match-svg { width: 40px; }
    main .match-item { min-width: 0; }
    main .diff-row { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    main .mv-mynt, main .target-coin, main .selected-coin, main .match-item.wrong-flash { animation: none; }
    main .progress-bar-inner { transition: none; }
}

/* ── Knappar i ljust tema och havstema ─────────────────────────────
   style.css gör alla knappar i main neutralt grå i de temana
   ([data-theme="ljus"] main button:not(.sc-start)…). Spelens knappar
   har betydelse – grön = kontrollera, röd = rensa, guld = gå vidare –
   så de får behålla sina färger med en tillräckligt specifik regel. */
[data-theme] main .mv-spelyta button.btn-check:not(.sc-start):not(.ks-tts-figur) { background: var(--mv-ratt); color: #fff; border: none; }
[data-theme] main .mv-spelyta button.btn-clear:not(.sc-start):not(.ks-tts-figur) { background: transparent; color: var(--mv-fel); border: 2px solid var(--mv-fel); }
[data-theme] main .mv-spelyta button.btn-next:not(.sc-start):not(.ks-tts-figur),
[data-theme] main .mv-spelyta button.btn-restart:not(.sc-start):not(.ks-tts-figur) { background: var(--color-accent-gold); color: var(--color-bg-primary); border: none; }
[data-theme] main .mv-spelyta button.diff-btn.active:not(.sc-start):not(.ks-tts-figur) { border-color: var(--color-accent-gold); background: var(--color-bg-tertiary); color: var(--color-text-primary); }