.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.2s ease;
}
.modal-box {
    background: white; border-radius: var(--radius-lg); padding: 28px 24px;
    width: 90%; max-width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; gap: 12px;
    text-align: center;
    animation: modalPop 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.modal-box h2 { font-size: 1.4rem; color: var(--red); text-transform: uppercase; letter-spacing: 1px; }
.modal-box p  { font-size: 0.85rem; color: #666; }
.modal-box input {
    padding: 12px 16px; border-radius: var(--radius);
    border: 3px solid var(--border);
    font-size: 1rem; font-weight: bold; text-align: center; outline: none;
    box-shadow: 0 4px 0 var(--border);
    transition: border-color var(--t), box-shadow var(--t);
}
.modal-box input:focus { border-color: var(--red); box-shadow: 0 4px 0 var(--red); }
.modal-error { color: var(--red); font-size: 0.82rem; font-weight: bold; }

/* ── Tutorial overlay ──────────────────────────────────────────── */
.tutorial-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.78); backdrop-filter: blur(6px);
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.2s ease;
}
.tutorial-overlay.hidden { display: none; }
.tutorial-box {
    background: white; border-radius: var(--radius-lg); padding: 32px 24px 24px;
    width: 90%; max-width: 380px;
    box-shadow: 0 12px 50px rgba(0,0,0,0.45);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center;
    animation: modalPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.tuto-dots { display: flex; gap: 8px; justify-content: center; }
.tuto-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #ddd; transition: background 0.25s, transform 0.25s;
}
.tuto-dot--active { background: var(--red); transform: scale(1.3); }
.tuto-icon { font-size: 3.2rem; line-height: 1; }
.tuto-title {
    font-size: 1.15rem; font-weight: 900; color: var(--red);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.tuto-text { font-size: 0.87rem; color: #555; line-height: 1.55; max-width: 300px; }
.tuto-actions { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.tuto-actions button { flex: 1; padding: 10px; font-size: 0.9rem; font-weight: 800;
    border-radius: var(--radius); border: 3px solid var(--border); cursor: pointer; }
#tutoNextBtn { background: var(--red); color: white; border-color: var(--red-dark);
    box-shadow: 0 4px 0 var(--red-dark); }
#tutoPrevBtn { background: #f5f5f5; color: #555; border-color: #ddd; box-shadow: 0 4px 0 #ccc; }
#tutoSkipBtn { background: none; border: none; box-shadow: none;
    color: #aaa; font-size: 0.78rem; text-decoration: underline; font-weight: 600; flex: 0 0 auto; }

/* ── Cookie consent banner ─────────────────────────────────────── */
#cookieBanner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
    background: #1a1a2e; color: #eee; padding: 14px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-size: 0.82rem; box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
#cookieBanner.hidden { display: none; }
#cookieBanner p { flex: 1; min-width: 200px; margin: 0; }
#cookieBanner a { color: #b3cfff; }
.cookie-btns { display: flex; gap: 8px; }
.cookie-btns button {
    padding: 7px 14px; border-radius: 8px; border: none;
    font-weight: 800; font-size: 0.82rem; cursor: pointer;
}
#cookieAcceptBtn { background: var(--green); color: #000; }
#cookieRefuseBtn { background: #444; color: #eee; }