/* --- RETENTION CHALLENGE : RPG GRID SYSTEM --- */

:root {
    /* Utilisation des variables globales injectées par style.css */
    --h-red-glow:       var(--h-accent-red-glow);
    --h-red-solid:      var(--h-accent-red);
    --h-gold-milestone: var(--h-accent-gold);
    --h-hold-duration:  1.333s;
}

.h-retention-wrapper {
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* ─── CINEMATIC RESET — variante couleur ────────────────────────────────────── */

.h-cinematic-overlay {
    position: absolute;
    inset: 0;
    z-index: 200;
    background: var(--h-bg-surface); /* Fond de surface */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
    border-radius: 12px;
}

#retention-view-intro,
#retention-view-confirm {
    position: relative;
}

.h-cinematic-reset .h-cin-l1,
.h-cinematic-reset .h-cin-l2 {
    color: var(--h-text-primary);
    text-shadow: none;
}

.h-cinematic-reset .h-cin-l3 {
    color: var(--h-red-solid);
    text-shadow: 0 0 30px var(--h-red-glow);
}

.h-cinematic-reset .h-cin-bar {
    background: var(--h-red-solid);
    box-shadow: 0 0 6px var(--h-red-glow);
}

/* ─── MISSED DAY BANNER ─────────────────────────────────────────────────────── */

.h-missed-banner {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 59, 48, 0.08); /* Opacité spécifique rouge */
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 8px; padding: 12px 15px;
    font-size: 12px; color: var(--h-text-muted); line-height: 1.4;
}
.h-missed-banner .material-icons { color: var(--h-red-solid); font-size: 18px !important; flex-shrink: 0; }
.h-missed-banner strong { color: var(--h-red-solid); }

/* ─── HEADER & STATS ────────────────────────────────────────────────────────── */

.h-retention-header {
    display: flex; justify-content: space-between;
    align-items: flex-end; padding: 0 10px;
}
.h-rank-label {
    font-size: 9px; text-transform: uppercase;
    letter-spacing: 2px; color: var(--h-text-dim); display: block; margin-bottom: 5px;
}
.h-retention-stats { display: flex; gap: 20px; }
.h-stat-item { text-align: right; }
.h-stat-item .val { display: block; font-size: 18px; font-weight: 800; color: var(--h-text-primary); }
.h-stat-item .lbl { font-size: 8px; text-transform: uppercase; color: var(--h-text-dim); letter-spacing: 1px; }

#h-current-rank-title {
    font-size: 24px; font-weight: 900; color: var(--h-red-solid);
    text-transform: uppercase; margin: 0;
    text-shadow: 0 0 15px var(--h-red-glow);
}

/* ─── VIEW MANAGEMENT ───────────────────────────────────────────────────────── */

.h-retention-view { display: none; animation: fadeIn 0.4s ease forwards; }
.h-retention-view.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ─── INTRO VIEW ────────────────────────────────────────────────────────────── */

.h-intro-content { text-align: center; padding: 40px 20px; }
.h-intro-icon-wrap { position: relative; margin-bottom: 30px; }
.h-big-icon { font-size: 60px !important; color: var(--h-accent-gold); z-index: 2; position: relative; }
.h-icon-pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80px; height: 80px; background: var(--h-accent-gold-glow); border-radius: 50%;
    animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
    0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
.h-intro-title { font-size: 28px; font-weight: 900; color: var(--h-text-primary); margin-bottom: 15px; text-transform: uppercase; letter-spacing: -1px; }
.h-intro-text  { color: var(--h-text-muted); line-height: 1.6; font-size: 14px; margin-bottom: 25px; }
.h-intro-benefits { list-style: none; padding: 0; margin-bottom: 20px; text-align: left; display: inline-block; }
.h-intro-benefits li { color: var(--h-text-muted); font-size: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.h-intro-benefits li span { color: var(--h-accent-gold); font-size: 18px !important; }
.h-best-streak-intro { font-size: 11px; color: var(--h-text-dim); margin-bottom: 30px; letter-spacing: 1px; }
.h-best-streak-intro strong { color: var(--h-gold-milestone); }

/* ─── CONFIRM VIEW ──────────────────────────────────────────────────────────── */

.h-confirm-content { text-align: center; padding: 50px 20px; }
.h-warn-icon { font-size: 50px !important; color: var(--h-accent-red); margin-bottom: 20px; }
.h-confirm-h1 { font-size: 22px; font-weight: 900; color: var(--h-text-primary); margin-bottom: 15px; text-transform: uppercase; }
.h-confirm-text { color: var(--h-text-dim); font-size: 13px; line-height: 1.5; margin-bottom: 40px; }
.h-confirm-actions { display: grid; gap: 15px; }

/* ─── HOLD BUTTON ───────────────────────────────────────────────────────────── */

.h-hold-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 22px 48px;
    background: var(--h-bg-card); /* Fond de bouton centralisé */
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: var(--h-red-solid);
    border-radius: 10px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    box-shadow: none;
    outline: none;
    transition: background 0.2s ease, border-color 0.25s ease, transform 0.15s ease;
    overflow: hidden;
}
.h-hold-btn:focus { outline: none; }

.h-hold-btn:hover {
    background: var(--h-bg-surface);
    border-color: rgba(255, 59, 48, 0.55);
}

.h-hold-hint {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--h-red-glow);
    text-transform: lowercase;
    transition: opacity 0.3s ease;
}

/* ── Anneau SVG ── */
.h-hold-ring {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px;
    pointer-events: none;
}
.h-hold-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.h-ring-track {
    fill: none;
    stroke: rgba(255, 59, 48, 0.12);
    stroke-width: 2;
}
.h-ring-fill {
    fill: none;
    stroke: var(--h-red-solid);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 119.38;
    stroke-dashoffset: 119.38;
    transition: none;
}

/* ── Sweep fond ── */
.h-hold-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,59,48,0.1) 0%, rgba(255,59,48,0.03) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    transition: none;
}

/* ── Holding ── */
.h-hold-btn.is-holding {
    background: var(--h-bg-surface);
    border-color: rgba(255, 59, 48, 0.75);
    transform: scale(0.98);
}
.h-hold-btn.is-holding .h-hold-hint { opacity: 0; }
.h-hold-btn.is-holding::before {
    animation: h-hold-sweep var(--h-hold-duration) linear forwards;
}
@keyframes h-hold-sweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ── Release spring-back ── */
.h-hold-btn.is-releasing {
    border-color: rgba(255, 59, 48, 0.3);
    transform: scale(1);
}
.h-hold-btn.is-releasing .h-ring-fill {
    transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Complete flash ── */
.h-hold-btn.is-complete {
    animation: h-hold-complete-flash 0.35s ease forwards;
}
@keyframes h-hold-complete-flash {
    0%   { border-color: rgba(255,59,48,0.3); background: var(--h-bg-card); }
    40%  { border-color: rgba(255,59,48,1);   background: rgba(255,59,48,0.18); }
    100% { border-color: rgba(255,59,48,0.3); background: var(--h-bg-card); }
}

/* ─── CINEMATIC — dans .h-tutorial-body ────────────────────────────────────── */

.h-tutorial-body {
    overflow-y: auto;
    position: relative;
}

.h-retention-wrapper {
    position: relative;
}

.h-cinematic-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}
.h-cinematic-overlay.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.85s ease;
}

.h-cinematic-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.h-cin-line {
    display: block;
    font-size: clamp(22px, 6vw, 42px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--h-text-primary);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.h-cinematic-overlay.is-visible .h-cin-l1 { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.h-cinematic-overlay.is-visible .h-cin-l2 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.h-cinematic-overlay.is-visible .h-cin-l3 {
    opacity: 1; transform: translateY(0); transition-delay: 0.75s;
    color: var(--h-red-solid);
    text-shadow: 0 0 30px var(--h-red-glow);
}

.h-cin-bar-wrap {
    margin-top: 24px;
    width: 100px; height: 1px;
    background: var(--h-border-subtle);
    border-radius: 1px; overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease 0.9s;
}
.h-cinematic-overlay.is-visible .h-cin-bar-wrap { opacity: 1; }

.h-cin-bar {
    height: 100%; width: 0%;
    background: var(--h-red-solid);
    box-shadow: 0 0 6px var(--h-red-glow);
    border-radius: 1px;
}
.h-cinematic-overlay.is-visible .h-cin-bar {
    animation: h-cin-bar-fill 2s linear 1s forwards;
}
@keyframes h-cin-bar-fill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ─── THE 7×7 GRID ──────────────────────────────────────────────────────────── */

.h-retention-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px; padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--h-border-subtle);
}

.h-grid-cell {
    position: relative; aspect-ratio: 1/1;
    background: var(--h-bg-main); border: 1px solid var(--h-border-subtle);
    border-radius: 6px; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.cell-number {
    position: absolute; top: 4px; left: 5px;
    font-size: 11px; font-weight: 800; color: var(--h-text-dim); line-height: 1;
}
.cell-date {
    position: absolute; bottom: 3px; right: 3px;
    font-size: 7px; font-weight: 600;
    color: var(--h-red-glow); line-height: 1;
}

/* COMPLETED */
.h-grid-cell.is-completed { border-color: var(--h-red-solid); background: rgba(255, 59, 48, 0.1); }
.h-grid-cell.is-completed .cell-number { color: var(--h-red-solid); }
.h-grid-cell.is-completed .cell-glow {
    position: absolute; inset: 0;
    box-shadow: inset 0 0 12px var(--h-red-glow);
    border-radius: 5px;
}

/* NEXT / TODAY */
.h-grid-cell.is-next { border-color: var(--h-text-primary); background: var(--h-bg-card); animation: h-pulse-cell 2s infinite; }
@keyframes h-pulse-cell {
    0%   { box-shadow: 0 0 0px  rgba(255,255,255,0); }
    50%  { box-shadow: 0 0 10px rgba(255,255,255,0.2); }
    100% { box-shadow: 0 0 0px  rgba(255,255,255,0); }
}

/* MILESTONE — pending */
.h-grid-cell.is-milestone {
    border: 1px solid rgba(244, 192, 37, 0.35);
    background: rgba(244, 192, 37, 0.04);
    border-radius: 8px;
}
.h-grid-cell.is-milestone .cell-icon   { color: rgba(244, 192, 37, 0.25); font-size: 18px !important; }
.h-grid-cell.is-milestone .cell-number { color: rgba(244, 192, 37, 0.5); }
.h-grid-cell.is-milestone:not(.is-completed):not(.is-locked) {
    animation: h-milestone-idle 3s ease-in-out infinite;
}
@keyframes h-milestone-idle {
    0%, 100% { box-shadow: 0 0 0px rgba(244,192,37,0); }
    50%       { box-shadow: 0 0 8px rgba(244,192,37,0.2); }
}

/* MILESTONE — completed */
.h-grid-cell.is-milestone.is-completed {
    border: 2px solid var(--h-gold-milestone);
    background: rgba(244, 192, 37, 0.12);
    box-shadow: 0 0 14px rgba(244,192,37,0.2), inset 0 0 10px rgba(244,192,37,0.08);
}
.h-grid-cell.is-milestone.is-completed .cell-number { color: var(--h-gold-milestone); font-size: 12px; }
.h-grid-cell.is-milestone.is-completed .cell-icon {
    color: var(--h-gold-milestone); font-size: 20px !important;
    text-shadow: 0 0 12px rgba(244,192,37,0.7);
    filter: drop-shadow(0 0 4px rgba(244,192,37,0.5));
}
.h-grid-cell.is-milestone.is-completed .cell-date { color: rgba(244, 192, 37, 0.7); }

.cell-icon { font-size: 16px !important; color: var(--h-bg-surface); }
.h-grid-cell.is-locked { opacity: 0.2; background: transparent; }

/* ─── JUST VALIDATED ────────────────────────────────────────────────────────── */

.h-grid-cell.is-just-validated { animation: h-validate-pulse 2s ease forwards; z-index: 5; }
@keyframes h-validate-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0px  rgba(255,59,48,0); }
    15%  { transform: scale(1.25); box-shadow: 0 0 20px rgba(255,59,48,0.9); }
    40%  { transform: scale(1.1);  box-shadow: 0 0 30px rgba(255,59,48,0.6); }
    70%  { transform: scale(1.05); box-shadow: 0 0 15px rgba(255,59,48,0.4); }
    100% { transform: scale(1);    box-shadow: 0 0 8px  rgba(255,59,48,0.2); }
}
.h-grid-cell.is-milestone.is-just-validated { animation: h-validate-pulse-gold 2s ease forwards; }
@keyframes h-validate-pulse-gold {
    0%   { transform: scale(1);    box-shadow: 0 0 0px  rgba(244,192,37,0); }
    15%  { transform: scale(1.3);  box-shadow: 0 0 25px rgba(244,192,37,1); }
    40%  { transform: scale(1.1);  box-shadow: 0 0 35px rgba(244,192,37,0.7); }
    70%  { transform: scale(1.05); box-shadow: 0 0 15px rgba(244,192,37,0.4); }
    100% { transform: scale(1);    box-shadow: 0 0 10px rgba(244,192,37,0.2); }
}

/* ─── PARTICLES ─────────────────────────────────────────────────────────────── */

.h-cell-particle {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: var(--h-red-solid); pointer-events: none;
    top: 50%; left: 50%;
    animation: h-particle-burst 0.8s ease forwards;
}
.h-grid-cell.is-milestone .h-cell-particle { background: var(--h-gold-milestone); }
@keyframes h-particle-burst {
    0%   { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(0)    scale(1); opacity: 1; }
    100% { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(18px) scale(0); opacity: 0; }
}

/* ─── COUNTDOWN ─────────────────────────────────────────────────────────────── */

.h-countdown-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; font-size: 11px; color: var(--h-text-dim); letter-spacing: 1px; margin-top: 10px;
}
.h-countdown-wrap.is-hidden { display: none; }
.h-countdown-wrap .material-icons { font-size: 14px !important; color: var(--h-text-dim); }
.h-countdown-wrap strong { color: var(--h-text-muted); font-variant-numeric: tabular-nums; letter-spacing: 2px; }

/* ─── FOOTER & BUTTONS ──────────────────────────────────────────────────────── */

.h-retention-footer { margin-top: 10px; padding: 0 10px; }

.h-retention-btn {
    width: 100%; padding: 18px; border-radius: 8px; border: none;
    font-weight: 900; font-size: 11px; text-transform: uppercase;
    letter-spacing: 2px; cursor: pointer; transition: all 0.3s;
}
.h-retention-btn.primary   { background: var(--h-text-primary); color: var(--h-bg-main); }
.h-retention-btn.success   { background: var(--h-red-solid); color: var(--h-text-primary); box-shadow: 0 0 20px var(--h-red-glow); }
.h-retention-btn.success.is-done { background: var(--h-bg-card); color: var(--h-text-dim); box-shadow: none; cursor: default; }
.h-retention-btn.secondary { background: var(--h-bg-card); color: var(--h-text-muted); border: 1px solid var(--h-border-active); }
.h-retention-btn.red-link  {
    background: none; border: none; color: var(--h-red-solid);
    font-size: 10px; letter-spacing: 1px; margin-top: 20px;
    opacity: 0.6; text-decoration: underline; box-shadow: none;
}
.h-retention-btn.red-link:hover { opacity: 1; }
.h-retention-btn:active { transform: scale(0.96); }

/* ─── MILESTONE TOOLTIP ─────────────────────────────────────────────────────── */

.h-grid-cell.is-milestone:hover::after {
    content: attr(data-label);
    position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%);
    background: var(--h-gold-milestone); color: var(--h-bg-main);
    padding: 4px 8px; font-size: 9px; border-radius: 4px;
    font-weight: 800; white-space: nowrap; z-index: 10;
}

/* ─── SHAKE ─────────────────────────────────────────────────────────────────── */

@keyframes h-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}