/* === Task Container === */
.task-container {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 1;
}

/* === Speech Button (read aloud) === */
.speech-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 5;
    padding: 0;
    line-height: 1;
}

.speech-btn:hover,
.speech-btn:active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.speech-btn.speaking {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--gold);
    animation: speechPulse 1s ease-in-out infinite;
}

@keyframes speechPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.task-question {
    font-size: var(--font-size-xl);
    color: var(--text-white);
    text-align: center;
    font-weight: bold;
    padding: 8px;
}

.task-rule {
    font-size: var(--font-size-sm);
    color: var(--gold);
    text-align: center;
    opacity: 0.8;
    margin-top: -8px;
}

/* === Multiple Choice Options (Arithmetic) === */
.task-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 360px;
}

.task-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    font-size: var(--font-size-2xl);
    font-weight: bold;
    background: var(--bg-card);
    color: var(--text-white);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.task-option:active {
    transform: scale(0.95);
    background: var(--primary);
    border-color: var(--gold);
}

.task-option.correct {
    background: var(--success);
    border-color: var(--success-light);
}

.task-option.wrong {
    background: var(--error);
    border-color: var(--error-light);
    animation: shake 0.5s ease-in-out;
}

.task-option.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* === Input Field (Fill Equation, etc.) === */
.task-input {
    width: 80px;
    height: 56px;
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--text-white);
    background: var(--bg-card);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    outline: none;
    caret-color: var(--gold);
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.task-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.task-input.correct {
    border-color: var(--success);
    background: rgba(76, 175, 80, 0.2);
}

.task-input.wrong {
    border-color: var(--error);
    background: rgba(255, 82, 82, 0.2);
}

/* Remove number input spinners */
.task-input::-webkit-inner-spin-button,
.task-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* === Equation Display (Fill Equation) === */
.task-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--text-white);
    padding: 12px 8px;
}

/* Left and right sides of the equation */
.equation-side {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(123, 47, 190, 0.3);
}

.equation-side--left {
    border-color: rgba(100, 181, 246, 0.4);
}

.equation-side--right {
    border-color: rgba(255, 183, 77, 0.4);
}

/* Balance sign between sides */
.equation-balance {
    font-size: var(--font-size-2xl);
    color: var(--gold);
    padding: 0 2px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.equation-part {
    min-width: 24px;
    text-align: center;
}

.equation-operator {
    color: var(--gold);
}

/* === Sequence / Train (Number Sequence) === */
.task-sequence {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 12px 8px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.task-sequence::-webkit-scrollbar {
    display: none;
}

.sequence-wagon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 56px;
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--text-white);
    background: var(--primary);
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    flex-shrink: 0;
}

.sequence-wagon.gap {
    background: var(--bg-card);
    border: 2px dashed var(--gold);
}

.sequence-wagon .task-input {
    width: 50px;
    height: 48px;
    font-size: var(--font-size-lg);
    border: none;
    background: transparent;
}

.sequence-connector {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* === Pyramid (Addition Pyramid) === */
.task-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
}

.pyramid-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pyramid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: var(--font-size-xl);
    font-weight: bold;
    border-radius: 8px;
    position: relative;
}

.pyramid-cell--given {
    background: var(--primary);
    border: 2px solid var(--primary-light);
    color: var(--text-white);
}

.pyramid-cell--input {
    background: var(--bg-card);
    border: 2px dashed var(--gold);
}

.pyramid-cell--input .task-input {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-lg);
    border: none;
    background: transparent;
    padding: 0;
}

.pyramid-cell.correct {
    border-color: var(--success);
    background: rgba(76, 175, 80, 0.2);
}

.pyramid-cell.wrong {
    border-color: var(--error);
    background: rgba(255, 82, 82, 0.2);
}

.pyramid-connector {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: -2px 0;
}

.pyramid-plus {
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: bold;
    width: 56px;
    text-align: center;
}

.pyramid-plus-spacer {
    width: 6px;
}

/* === Compare Expressions === */
.task-compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--text-white);
    padding: 16px 12px;
    flex-wrap: wrap;
}

.compare-expr {
    background: var(--bg-card);
    padding: 10px 16px;
    border-radius: var(--radius);
    border: 2px solid var(--primary-light);
    min-width: 60px;
    text-align: center;
}

.compare-sign {
    font-size: var(--font-size-3xl);
    color: var(--gold);
    min-width: 40px;
    text-align: center;
    transition: all var(--transition);
}

.compare-sign.correct {
    color: var(--success);
}

.compare-sign.wrong {
    color: var(--error);
}

/* Compare sides with calc inputs */
.compare-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.compare-calc {
    display: flex;
    align-items: center;
    gap: 4px;
}

.compare-calc-eq {
    color: var(--gold);
    font-size: var(--font-size-lg);
    font-weight: bold;
}

.compare-calc-input {
    width: 60px;
    height: 40px;
    font-size: var(--font-size-lg);
}

.compare-calc-input.hint-filled {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

/* Hint button */
.hint-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    color: var(--gold);
    background: transparent;
    border: 1px dashed var(--gold);
    border-radius: var(--radius);
    cursor: pointer;
    opacity: 0.7;
    transition: all var(--transition);
}

.hint-btn:hover, .hint-btn:active {
    opacity: 1;
    background: rgba(255, 215, 0, 0.1);
}

/* Hint box */
.hint-box {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius);
    padding: 10px 14px;
    width: 100%;
    max-width: 360px;
}

.hint-line {
    color: var(--gold);
    font-size: var(--font-size-base);
    padding: 2px 0;
}

.compare-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 64px;
    font-size: var(--font-size-2xl);
    font-weight: bold;
    background: var(--bg-card);
    color: var(--text-white);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.compare-btn:active {
    transform: scale(0.95);
    background: var(--primary);
    border-color: var(--gold);
}

.compare-btn.correct {
    background: var(--success);
    border-color: var(--success-light);
}

.compare-btn.wrong {
    background: var(--error);
    border-color: var(--error-light);
    animation: shake 0.5s ease-in-out;
}

.compare-btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* === Find Pair Sum === */
.task-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 12px;
    max-width: 360px;
}

.pool-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: var(--font-size-xl);
    font-weight: bold;
    background: var(--bg-card);
    color: var(--text-white);
    border: 2px solid var(--primary-light);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pool-number:active {
    transform: scale(0.95);
}

.pool-number.selected {
    background: var(--primary);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.pool-number.correct {
    background: var(--success);
    border-color: var(--success-light);
}

.pool-number.wrong {
    background: var(--error);
    border-color: var(--error-light);
    animation: shake 0.5s ease-in-out;
}

.pool-number.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* === Scratchpad (brudnopis) === */
.scratchpad-area {
    width: 100%;
    max-width: 320px;
}

.scratchpad-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.scratchpad-pad {
    width: 100%;
    min-height: 48px;
    max-height: 120px;
    padding: 8px 10px;
    font-size: var(--font-size-lg);
    font-family: inherit;
    font-weight: bold;
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    overflow-y: auto;
    outline: none;
    caret-color: var(--gold);
    white-space: pre-wrap;
    word-break: break-word;
}

.scratchpad-pad:focus {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.scratchpad-pad:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.6;
    pointer-events: none;
}

/* Digit coloring: ones=blue, tens=red, hundreds=green */
.digit-ones {
    color: #64B5F6;
}

.digit-tens {
    color: #EF5350;
}

.digit-hundreds {
    color: #66BB6A;
}

/* === Submit Button === */
.task-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    min-height: 52px;
    margin-top: 8px;
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--text-white);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.task-submit-btn:active {
    transform: scale(0.95);
}

.task-submit-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* === Level Header === */
.level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === Pacman Progress === */
.pacman-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--bg-card);
}

/* Track — thick rainbow bar */
.pac-track {
    position: relative;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Rainbow trail left behind (eaten part) */
.pac-trail {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        #ff6b6b 0%,
        #ffa502 15%,
        #ffd700 30%,
        #7bed9f 50%,
        #70a1ff 70%,
        #a29bfe 85%,
        #e056a0 100%
    );
    background-size: 300% 100%;
    animation: rainbowShift 3s linear infinite;
    border-radius: 14px 0 0 14px;
    transition: width 0.6s ease;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Remaining bar ahead — sparkly dots to eat */
.pac-remaining {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background:
        radial-gradient(circle 2px at 20% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(circle 2px at 40% 50%, rgba(255, 215, 0, 0.4), transparent),
        radial-gradient(circle 2px at 60% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(circle 2px at 80% 50%, rgba(255, 215, 0, 0.4), transparent),
        linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
    border-radius: 0 14px 14px 0;
    transition: width 0.6s ease;
}

/* Pacman — CSS drawn circle with mouth */
.pac-man {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    transition: left 0.6s ease;
}

/* Pacman body — yellow circle with animated mouth */
.pac-man::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: var(--gold);
    border-radius: 50%;
    clip-path: polygon(100% 50%, 50% 50%, 75% 15%, 100% 0%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 75% 85%, 50% 50%, 100% 50%);
    animation: pacChomp 0.35s ease-in-out infinite;
}

/* Pacman eye */
.pac-man::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 16px;
    width: 5px;
    height: 5px;
    background: var(--bg-dark);
    border-radius: 50%;
    z-index: 3;
}

@keyframes pacChomp {
    0%, 100% {
        clip-path: polygon(100% 50%, 50% 50%, 80% 25%, 100% 10%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 90%, 80% 75%, 50% 50%, 100% 50%);
    }
    50% {
        clip-path: polygon(100% 50%, 50% 50%, 95% 45%, 100% 48%, 100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 52%, 95% 55%, 50% 50%, 100% 50%);
    }
}

/* Gem dots row below the bar */
.pac-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.pac-dot {
    font-size: 0.85rem;
    transition: all 0.4s ease;
    text-align: center;
    flex: 1;
}

/* Diamond colors — rainbow spectrum */
.pac-gem { opacity: 0.9; }
.pac-gem--blue { color: #64B5F6; text-shadow: 0 0 4px rgba(100, 181, 246, 0.5); }
.pac-gem--pink { color: #F48FB1; text-shadow: 0 0 4px rgba(244, 143, 177, 0.5); }
.pac-gem--green { color: #81C784; text-shadow: 0 0 4px rgba(129, 199, 132, 0.5); }
.pac-gem--gold { color: var(--gold); text-shadow: 0 0 4px rgba(255, 215, 0, 0.5); }

/* Active (current task) gem pulses */
.pac-dot--active {
    animation: gemPulse 1s ease-in-out infinite;
}

@keyframes gemPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.5); opacity: 1; }
}

/* Eaten dots */
.pac-dot--eaten {
    font-size: 0.5rem;
    opacity: 0.5;
}

.pac-dot--correct {
    color: var(--success);
    opacity: 0.7;
}

.pac-dot--wrong {
    color: var(--text-muted);
    opacity: 0.25;
}

/* Finish flag */
.pac-finish {
    font-size: 0.85rem;
    flex: none;
    width: 22px;
}

/* === Multiples Grid === */
.task-multiples-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 360px;
    padding: 8px;
}

.multiples-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    font-size: var(--font-size-xl);
    font-weight: bold;
    background: var(--bg-card);
    color: var(--text-white);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.multiples-cell:active {
    transform: scale(0.95);
}

.multiples-cell.selected {
    background: var(--primary);
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.multiples-cell.correct {
    background: var(--success);
    border-color: var(--success-light);
}

.multiples-cell.wrong {
    background: var(--error);
    border-color: var(--error-light);
    animation: shake 0.5s ease-in-out;
}

.multiples-cell.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* === Clock Tasks === */
.task-clock {
    display: flex;
    justify-content: center;
    padding: 8px;
}

.clock-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
}

.clock-colon {
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--gold);
}

.clock-label {
    font-size: var(--font-size-lg);
    color: var(--text-muted);
}

.clock-hour-input,
.clock-minute-input {
    width: 70px;
}

.task-question--small {
    font-size: var(--font-size-lg);
    line-height: 1.4;
    max-width: 360px;
}

/* Clock Setting — 4 clock options */
.clock-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    padding: 8px;
}

.clock-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--bg-card);
    border: 2px solid var(--primary-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.clock-option:active {
    transform: scale(0.95);
    border-color: var(--gold);
}

.clock-option.correct {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--success);
}

.clock-option.wrong {
    background: rgba(255, 82, 82, 0.2);
    border-color: var(--error);
    animation: shake 0.5s ease-in-out;
}

.clock-option.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* === Picture Counting (arithmetic variant) === */
.picture-operand {
    display: inline-block;
    font-size: 1.4rem;
    letter-spacing: 2px;
    line-height: 1.4;
    max-width: 120px;
    word-break: break-word;
    vertical-align: middle;
}

.picture-operator {
    font-size: var(--font-size-2xl);
    vertical-align: middle;
    color: var(--gold);
}

/* === Coin Payment === */
.coin-payment-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    margin: 8px 0;
}

.coin-payment-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.coin-payment-coin {
    font-size: 1.1rem;
    font-weight: bold;
    min-width: 80px;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.coin-payment-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary-light);
    background: var(--bg-card);
    color: var(--text-white);
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.coin-payment-btn:active {
    transform: scale(0.9);
    border-color: var(--gold);
    background: var(--primary);
}

.coin-payment-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.coin-payment-count {
    font-size: 1.6rem;
    font-weight: bold;
    min-width: 36px;
    text-align: center;
    color: var(--text-white);
}

.coin-payment-total {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 8px 0;
}

.coin-payment-sum {
    font-weight: bold;
    font-size: 1.3rem;
    color: var(--text-white);
    transition: color 0.2s;
}

.coin-payment-sum--match {
    color: var(--success);
}

.coin-payment-sum--over {
    color: var(--error);
}

.coin-payment-count-info {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 4px 0;
}

.coin-payment-count--match {
    color: var(--success);
}

.coin-payment-count--over {
    color: var(--error);
}

.coin-payment-reveal-btn {
    display: block;
    margin: 8px auto;
    padding: 8px 16px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    color: var(--gold);
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.coin-payment-reveal-btn:active {
    background: rgba(255, 215, 0, 0.3);
}

/* === Visual Coins (easy levels) === */
.coin-visual-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 10px 4px;
    min-height: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

.coin-visual {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.95rem;
    animation: coinPop 0.25s ease-out both;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.3);
    border: 2px solid;
    user-select: none;
}

.coin-visual--1 {
    background: linear-gradient(145deg, #c0c0c0, #e8e8e8);
    border-color: #a0a0a0;
    color: #333;
}

.coin-visual--2 {
    background: linear-gradient(145deg, #ffd700, #ffec80);
    border-color: #daa520;
    color: #6b4c00;
}

.coin-visual--5 {
    background: linear-gradient(145deg, #ff8c00, #ffb347);
    border-color: #cc7000;
    color: #4a2800;
}

/* Grosze coins (złotówki w trybie groszy) */
.coin-visual--100 {
    background: linear-gradient(145deg, #c0c0c0, #e8e8e8);
    border-color: #a0a0a0;
    color: #333;
}

.coin-visual--200 {
    background: linear-gradient(145deg, #ffd700, #ffec80);
    border-color: #daa520;
    color: #6b4c00;
}

.coin-visual--500 {
    background: linear-gradient(145deg, #ff8c00, #ffb347);
    border-color: #cc7000;
    color: #4a2800;
}

/* Monety groszowe — mniejsze, brązowe */
.coin-visual--10,
.coin-visual--20,
.coin-visual--50 {
    width: 32px;
    height: 32px;
    font-size: 0.6rem;
    background: linear-gradient(145deg, #cd7f32, #e8a85c);
    border-color: #a0642d;
    color: #4a2800;
}

.coin-payment-coin--grosze {
    color: #cd7f32;
    text-shadow: 0 0 6px rgba(205, 127, 50, 0.3);
    font-size: 0.95rem;
}

@keyframes coinPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* === Shape Pattern === */
.shape-pattern-sequence {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 12px;
    max-width: 360px;
}

.shape-pattern-item {
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--bg-card);
    line-height: 1;
}

.shape-pattern-blank {
    border: 2px dashed var(--gold);
    background: rgba(255, 215, 0, 0.1);
    color: var(--text-muted);
    font-size: 1.2rem;
}

.shape-pattern-active {
    border-color: var(--primary-light);
    background: rgba(155, 89, 182, 0.2);
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(155, 89, 182, 0); }
}

.shape-pattern-filled {
    border-style: solid;
    border-color: var(--primary);
    color: var(--text-white);
}

.shape-pattern-blank.correct {
    border-color: var(--success);
    background: rgba(46, 204, 113, 0.2);
}

.shape-pattern-blank.wrong {
    border-color: var(--error);
    background: rgba(255, 82, 82, 0.2);
}

.shape-pattern-palette {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px;
}

.shape-pattern-palette-btn {
    font-size: 1.8rem;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    border: 2px solid var(--primary);
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.shape-pattern-palette-btn:active {
    transform: scale(0.9);
    background: var(--primary);
}

.shape-pattern-palette-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.shape-pattern-option {
    font-size: 1.8rem !important;
    min-width: 64px;
}

/* === Visual Algebra === */
.visual-algebra-equations {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 12px;
}

.visual-algebra-eq {
    font-size: 1.4rem;
    padding: 8px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    min-width: 200px;
}

.visual-algebra-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.visual-algebra-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.visual-algebra-figure {
    font-size: 1.6rem;
    min-width: 48px;
    text-align: right;
}