/* ── Money Widget ─────────────────────────────────────────────────── */
.ama-money-widget {
    --amc-primary: #ca8a04;
    --amc-dark:    #a16207;
    --amc-light:   #fefce8;
    --amc-green:   #16a34a;
    --amc-red:     #dc2626;
    --amc-radius:  14px;
    font-family: 'Segoe UI', Arial, sans-serif;
    position: relative;
    background: #fff;
    border-radius: var(--amc-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,.10);
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────── */
.amc-header {
    background: var(--amc-primary);
    color: #fff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.amc-title { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.amc-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }

.amc-mode-toggle { display: flex; gap: 4px; flex-wrap: wrap; }
.amc-mode-btn {
    background: rgba(255,255,255,.18);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.amc-mode-btn:hover { background: rgba(255,255,255,.28); }
.amc-mode-btn.amc-mode-active { background: #fff; color: var(--amc-primary); }

.amc-ctrl-label {
    font-size: .78rem;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 5px;
}
.amc-diff-sel {
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: .78rem;
    cursor: pointer;
}
.amc-diff-sel option { background: var(--amc-dark); }

.amc-btn {
    background: #fddd54;
    color: #5a3e00;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
}
.amc-btn:hover { filter: brightness(1.08); }
.amc-btn-new   { padding: 5px 10px; font-size: .78rem; }
.amc-btn-clear { padding: 4px 10px; font-size: .76rem; background: #f3f4f6; color: #555; border: 1px solid #ddd; }
.amc-btn-clear:hover { background: #e5e7eb; filter: none; }

.amc-stats { display: flex; align-items: center; gap: 4px; font-size: .88rem; color: #fff; font-weight: 700; }
.amc-sep { opacity: .5; margin: 0 2px; }

/* ── Body ─────────────────────────────────────────────────────────── */
.amc-body { flex: 1; overflow-y: auto; min-height: 0; }
.amc-problem { padding: 20px 24px 8px; }

/* ── Coin SVG base ────────────────────────────────────────────────── */
/* Coins are now pure SVG — wrappers just set size & shadow */
.amc-bank-coin svg,
.amc-tray-coin svg,
.amc-display-coin svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Bank coins ───────────────────────────────────────────────────── */
.amc-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
    margin: 8px 0;
}
.amc-bank-coin {
    /* width/height set inline per coin's real-world scale */
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
    transition: transform .12s, filter .12s;
}
.amc-bank-coin:hover  { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 6px 8px rgba(0,0,0,.40)) brightness(1.06); }
.amc-bank-coin:active { transform: translateY(1px) scale(0.95); }

/* ── Tray ─────────────────────────────────────────────────────────── */
.amc-tray-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.amc-tray-label { font-size: .85rem; font-weight: 700; color: #555; }
.amc-tray-hint  { font-size: .76rem; color: #aaa; }

.amc-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 60px;
    padding: 8px;
    background: var(--amc-light);
    border: 2px dashed #e5c84f;
    border-radius: 10px;
    margin-top: 6px;
    align-items: flex-end;
    align-content: flex-start;
}
.amc-tray:empty::after {
    content: 'Your coins will appear here…';
    color: #ccc;
    font-size: .82rem;
    align-self: center;
    width: 100%;
    text-align: center;
}

.amc-tray-coin {
    /* width/height set inline per coin's real-world scale */
    cursor: pointer;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.30));
    transition: transform .1s, filter .1s;
    position: relative;
}
.amc-tray-coin:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.30)) brightness(0.82);
}
.amc-tray-coin:hover::after {
    content: '×';
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc2626;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Target + Progress ────────────────────────────────────────────── */
.amc-target-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.amc-target-label { font-size: .88rem; font-weight: 600; color: #888; }
.amc-target-amt   { font-size: 2rem; font-weight: 900; color: var(--amc-dark); }
.amc-bank-label   { font-size: .82rem; font-weight: 600; color: #888; margin-top: 6px; }

.amc-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.amc-progress-track {
    flex: 1;
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.amc-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--amc-primary);
    border-radius: 6px;
    transition: width .25s, background .2s;
}
.amc-fill-ok   { background: var(--amc-green) !important; }
.amc-fill-over { background: var(--amc-red)   !important; }
.amc-current-amt { font-size: 1rem; font-weight: 800; color: var(--amc-dark); min-width: 52px; text-align: right; }

/* ── Change context box ───────────────────────────────────────────── */
.amc-change-ctx {
    background: var(--amc-light);
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.amc-change-row { display: flex; justify-content: space-between; align-items: center; font-size: .95rem; }
.amc-ctx-lbl  { color: #666; font-weight: 500; }
.amc-ctx-val  { font-weight: 800; color: var(--amc-dark); font-size: 1rem; }
.amc-change-highlight { border-top: 1px solid #fde68a; padding-top: 6px; margin-top: 2px; }
.amc-change-highlight .amc-ctx-lbl { font-weight: 700; color: var(--amc-dark); }
.amc-change-highlight .amc-ctx-val { font-size: 1.15rem; }

/* ── Count It ─────────────────────────────────────────────────────── */
.amc-count-area { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.amc-count-label { font-size: 1.1rem; font-weight: 700; color: #1a1a1a; text-align: center; }

.amc-coins-display {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-end;
    padding: 16px;
    background: var(--amc-light);
    border: 1.5px solid #fde68a;
    border-radius: 12px;
    width: 100%;
}
.amc-display-coin {
    /* width/height set inline per coin's real-world scale */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.32));
    pointer-events: none;
}

.amc-count-input-row { display: flex; align-items: center; gap: 6px; }
.amc-dollar-prefix { font-size: 1.4rem; font-weight: 800; color: var(--amc-dark); }

.amc-answer-inp {
    width: 110px;
    padding: 8px 12px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: border-color .15s;
}
.amc-answer-inp:focus { border-color: var(--amc-primary); }
.amc-answer-inp.amc-inp-correct { border-color: var(--amc-green); background: #f0fdf4; }
.amc-answer-inp.amc-inp-wrong   { border-color: var(--amc-red); background: #fef2f2; animation: amc-shake .3s; }
@keyframes amc-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* ── Hint row ─────────────────────────────────────────────────────── */
.amc-hint-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 14px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.amc-hint-cost { font-size: .72em; opacity: .7; }
.amc-btn-hint { background: #fff8dc; color: #5a3e00; border: 1.5px solid #fddd54; }
.amc-btn-hint:hover { background: #fddd54; filter: none; }
.amc-btn-hint:disabled { opacity: .45; cursor: default; }

.amc-feedback { min-height: 22px; font-size: .9rem; font-weight: 600; }
.amc-feedback-success { color: var(--amc-green); }
.amc-feedback-error   { color: var(--amc-red); }

/* ── Victory overlay ──────────────────────────────────────────────── */
.amc-victory {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
    z-index: 10;
}
.amc-victory.amc-show { opacity: 1; pointer-events: auto; }

.amc-victory-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.16);
    padding: 32px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.amc-v-emoji { font-size: 2.8rem; }
.amc-v-title { font-size: 1.5rem; font-weight: 800; color: var(--amc-dark); }

.amc-star     { font-size: 2rem; }
.amc-star-on  { color: #fddd54; }
.amc-star-off { color: #ddd; }

.amc-scorecard { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 4px 0; }
.amc-sc-row { display: flex; justify-content: space-between; gap: 24px; font-size: .92rem; }
.amc-sc-lbl { color: #888; }
.amc-sc-val { font-weight: 700; color: var(--amc-dark); }

/* Confetti */
.amc-confetti {
    position: absolute;
    top: -12px;
    animation: amc-fall linear forwards;
    pointer-events: none;
    z-index: 20;
}
@keyframes amc-fall {
    to { transform: translateY(calc(100% + 20px)) rotate(360deg); opacity: 0; }
}

/* New button — bright green, consistent across all widgets */
.amc-btn-new {
    background: #16a34a !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
}
.amc-btn-new:hover { background: #15803d !important; filter: none !important; }