/* Visual presentation only. Ticket structure, numbers, and odds never change. */

.tambola-ticket {
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html[data-ticket-template="classic"] .tambola-ticket,
.ticket-template-preview.ticket-template-classic {
    --ticket-surface: #fffdf5;
    --ticket-border: #6b5b3e;
    --ticket-cell: #ffffff;
    --ticket-text: #2f2a22;
    --ticket-marked: #f59e0b;
    --ticket-marked-text: #1f2937;
}

html[data-ticket-template="premium"] .tambola-ticket,
.ticket-template-preview.ticket-template-premium {
    --ticket-surface: linear-gradient(145deg, #312e81, #6d28d9);
    --ticket-border: #a78bfa;
    --ticket-cell: rgba(255, 255, 255, .96);
    --ticket-text: #312e81;
    --ticket-marked: #fbbf24;
    --ticket-marked-text: #312e81;
}

html[data-ticket-template="primary"] .tambola-ticket,
.ticket-template-preview.ticket-template-primary {
    --ticket-surface: var(--bs-primary-bg-subtle);
    --ticket-border: var(--bs-primary);
    --ticket-cell: var(--bs-body-bg);
    --ticket-text: var(--bs-primary-text-emphasis);
    --ticket-marked: var(--bs-primary);
    --ticket-marked-text: #fff;
}

html[data-ticket-template="success"] .tambola-ticket,
.ticket-template-preview.ticket-template-success {
    --ticket-surface: var(--bs-success-bg-subtle);
    --ticket-border: var(--bs-success);
    --ticket-cell: var(--bs-body-bg);
    --ticket-text: var(--bs-success-text-emphasis);
    --ticket-marked: var(--bs-success);
    --ticket-marked-text: #fff;
}

html[data-ticket-template="danger"] .tambola-ticket,
.ticket-template-preview.ticket-template-danger {
    --ticket-surface: var(--bs-danger-bg-subtle);
    --ticket-border: var(--bs-danger);
    --ticket-cell: var(--bs-body-bg);
    --ticket-text: var(--bs-danger-text-emphasis);
    --ticket-marked: var(--bs-danger);
    --ticket-marked-text: #fff;
}

html[data-ticket-template="warning"] .tambola-ticket,
.ticket-template-preview.ticket-template-warning {
    --ticket-surface: var(--bs-warning-bg-subtle);
    --ticket-border: var(--bs-warning);
    --ticket-cell: var(--bs-body-bg);
    --ticket-text: var(--bs-warning-text-emphasis);
    --ticket-marked: var(--bs-warning);
    --ticket-marked-text: #212529;
}

html[data-ticket-template="info"] .tambola-ticket,
.ticket-template-preview.ticket-template-info {
    --ticket-surface: var(--bs-info-bg-subtle);
    --ticket-border: var(--bs-info);
    --ticket-cell: var(--bs-body-bg);
    --ticket-text: var(--bs-info-text-emphasis);
    --ticket-marked: var(--bs-info);
    --ticket-marked-text: #052c65;
}

html[data-ticket-template="light"] .tambola-ticket,
.ticket-template-preview.ticket-template-light {
    --ticket-surface: var(--bs-light);
    --ticket-border: #adb5bd;
    --ticket-cell: #fff;
    --ticket-text: #212529;
    --ticket-marked: #dee2e6;
    --ticket-marked-text: #000;
}

html[data-ticket-template="dark"] .tambola-ticket,
.ticket-template-preview.ticket-template-dark {
    --ticket-surface: var(--bs-dark);
    --ticket-border: #adb5bd;
    --ticket-cell: #343a40;
    --ticket-text: #fff;
    --ticket-marked: #f8f9fa;
    --ticket-marked-text: #000;
}

html[data-ticket-template="contrast"] .tambola-ticket,
.ticket-template-preview.ticket-template-contrast {
    --ticket-surface: #000;
    --ticket-border: #fff;
    --ticket-cell: #fff;
    --ticket-text: #000;
    --ticket-marked: #ffeb00;
    --ticket-marked-text: #000;
}

html[data-ticket-template] .tambola-ticket,
.ticket-template-preview {
    background: var(--ticket-surface);
    border: 2px solid var(--ticket-border);
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .16);
}

html[data-ticket-template] .tambola-ticket .ticket-cell {
    color: var(--ticket-text);
    background: var(--ticket-cell);
    border-color: var(--ticket-border);
}

html[data-ticket-template] .tambola-ticket .ticket-cell--marked {
    color: var(--ticket-marked-text);
    background: var(--ticket-marked);
    font-weight: 800;
    box-shadow: inset 0 0 0 2px currentColor;
}

.ticket-template-preview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .2rem;
    min-height: 4.25rem;
    padding: .5rem;
    border-radius: .5rem;
}

.ticket-template-preview > span {
    display: grid;
    place-items: center;
    min-height: 1.4rem;
    color: var(--ticket-text);
    background: var(--ticket-cell);
    border: 1px solid var(--ticket-border);
    border-radius: .2rem;
    font-size: .7rem;
    font-weight: 700;
}

.ticket-template-preview > span.is-marked {
    color: var(--ticket-marked-text);
    background: var(--ticket-marked);
}

@media (prefers-reduced-motion: reduce) {
    .tambola-ticket { transition: none; }
}
html[data-ticket-progress="hidden"] .ticket-progress {
    display: none !important;
}

.ticket-progress .progress-bar {
    color: #fff;
    background: var(--ticket-progress-background, var(--bs-primary));
    transition: width .2s ease;
}

html[data-ticket-template="classic"] { --ticket-progress-background: #f59e0b; }
html[data-ticket-template="premium"] { --ticket-progress-background: linear-gradient(90deg, #6d28d9, #f59e0b); }
html[data-ticket-template="primary"] { --ticket-progress-background: var(--bs-primary); }
html[data-ticket-template="success"] { --ticket-progress-background: var(--bs-success); }
html[data-ticket-template="danger"] { --ticket-progress-background: var(--bs-danger); }
html[data-ticket-template="warning"] { --ticket-progress-background: var(--bs-warning); }
html[data-ticket-template="info"] { --ticket-progress-background: var(--bs-info); }
html[data-ticket-template="light"] { --ticket-progress-background: #6c757d; }
html[data-ticket-template="dark"] { --ticket-progress-background: #adb5bd; }
html[data-ticket-template="contrast"] { --ticket-progress-background: #ffeb00; }

html[data-ticket-template="warning"] .ticket-progress .progress-bar,
html[data-ticket-template="info"] .ticket-progress .progress-bar,
html[data-ticket-template="dark"] .ticket-progress .progress-bar,
html[data-ticket-template="contrast"] .ticket-progress .progress-bar {
    color: #000;
}

@media (prefers-reduced-motion: reduce) {
    .ticket-progress .progress-bar { transition: none; }
}