/* ============================================================
   SCRATCH IT ! — habillage « Chêne clair » (jour) / « Charbon chaud » (nuit)
   Cadres extraits des maquettes IA :
   frame-day.png / frame-night.png — boîte commune 418x552 (--frame-ratio).
   Ouverture mesurée par scan pixel (variables --open-* par thème).
   ============================================================ */

:root {
    /* Jour — Chêne clair */
    --bg-page: #f3f0e4;
    --bg-panel: #fefffe;
    --panel-shadow: 0 24px 70px rgba(95, 78, 45, 0.18);
    --ink: #4a3c28;
    --muted: #978a72;
    --accent: #c2a87e;          /* chêne */
    --accent-deep: #a4885c;
    --hairline: rgba(120, 95, 60, 0.25);
    --btn-bg: #f1ead9;
    --btn-ink: #5b4c34;
    --btn-border: rgba(120, 95, 60, 0.18);
    --progress-track: #e7dfcd;
    --progress-fill: linear-gradient(90deg, #b9966a, #d6bb90);
    --bg-modal: #fefffe;
    --bg-archive-hover: #f5efe2;
    --frame-img: url("assets/frame-day.png");
    --frame-ratio: 447 / 585;
    /* bord intérieur du bois mesuré + ~3px de recouvrement sous la feuillure */
    --open-left: 4.92%;
    --open-top: 10.09%;
    --open-w: 81.88%;
    --open-h: 79.15%;
}

[data-theme="dark"] {
    /* Nuit — Charbon chaud : panneau charbon sur fond plus profond,
       même hiérarchie panneau/page que le mode jour */
    --bg-page: #2e2a25;
    --bg-panel: #433e39;
    --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    --ink: #e9dfc8;
    --muted: #a89c85;
    --accent: #c2a87e;
    --accent-deep: #d6bb90;
    --hairline: rgba(233, 223, 200, 0.25);
    --btn-bg: transparent;
    --btn-ink: #e9dfc8;
    --btn-border: rgba(233, 223, 200, 0.55);
    --progress-track: #57514a;
    --progress-fill: linear-gradient(90deg, #b9966a, #e6d3ac);
    --bg-modal: #4c4641;
    --bg-archive-hover: #57514a;
    --frame-img: url("assets/frame-night.png");
    /* PNG nuit recadré (ombre adoucie) : boîte et ouverture propres au thème */
    --frame-ratio: 423 / 560;
    --open-left: 6.62%;
    --open-top: 5.71%;
    --open-w: 83.68%;
    --open-h: 86.79%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--ink);
    font-family: Karla, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 2.5vh, 28px) 12px 30px;
    transition: background 0.3s ease, color 0.3s ease;
}

/* grain de lin / plâtre */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ---------- panneau principal ---------- */
.page {
    position: relative;
    width: min(100%, 460px);
    background: var(--bg-panel);
    border-radius: clamp(18px, 4vw, 30px);
    box-shadow: var(--panel-shadow);
    padding: clamp(16px, 3.5vw, 26px) clamp(14px, 4vw, 30px) clamp(18px, 3vw, 26px);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease, background 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}
.page.ready { opacity: 1; }

/* ---------- toggle thème ---------- */
.theme-toggle {
    position: absolute;
    top: clamp(14px, 3vw, 22px);
    left: clamp(14px, 3.5vw, 26px);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: var(--btn-bg);
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.3s ease;
    z-index: 10;
}
.theme-toggle:hover { transform: scale(1.08); }

/* ---------- drapeaux ---------- */
.lang-switcher {
    position: absolute;
    top: clamp(14px, 3vw, 22px);
    right: clamp(14px, 3.5vw, 26px);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.lang-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.lang-btn:hover { opacity: 0.85; transform: scale(1.08); }
.lang-btn.active {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.lang-btn-fr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='600' fill='%23ED2939'/%3E%3Crect width='600' height='600' fill='%23fff'/%3E%3Crect width='300' height='600' fill='%23002395'/%3E%3C/svg%3E");
}
.lang-btn-gb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- cadre + ouverture ---------- */
.frame {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: var(--frame-ratio);
    background: var(--frame-img) center / 100% 100% no-repeat;
    user-select: none;
    /* aligne l'écart drapeaux→cadre sur l'écart panneau→drapeaux :
       2 × clamp(14px,3vw,22px) + 32px (drapeaux) − padding-top du panneau
       − ~12px de marge transparente au-dessus du bois dans le PNG */
    margin-top: clamp(32px, 2.5vw + 20px, 38px);
}
.opening {
    /* léger surdébord (~0.4%) : la surface argentée cuite dans le PNG
       ne doit jamais dépasser du contenu réel */
    position: absolute;
    left: calc(var(--open-left) - 0.4%);
    top: calc(var(--open-top) - 0.4%);
    width: calc(var(--open-w) + 0.8%);
    height: calc(var(--open-h) + 0.8%);
    overflow: hidden;
}
.opening .hidden-image,
.opening .hidden-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hidden-video { display: none; }
.video-active .hidden-image { display: none; }
.video-active .hidden-video { display: block; }

#scratchCanvas,
#fxCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
#scratchCanvas { touch-action: none; cursor: grab; }
#fxCanvas { pointer-events: none; }

/* ---------- loader ---------- */
.loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--progress-track);
}
.spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--hairline);
    border-top-color: var(--accent-deep);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- bouton play vidéo ---------- */
.play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: Karla, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f1ead9;
    background: rgba(40, 34, 26, 0.85);
    border: 1px solid rgba(241, 234, 217, 0.5);
    border-radius: 999px;
    padding: 13px 26px;
    cursor: pointer;
    z-index: 5;
}
.play-button:hover { background: rgba(40, 34, 26, 0.95); }

/* ---------- progression ---------- */
.progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 360px);
    margin-top: clamp(16px, 3.5vw, 26px);
}
.progress-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--progress-track);
    overflow: visible;
    position: relative;
}
.progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    border-radius: 2px;
    background: var(--progress-fill);
    transition: width 0.3s ease;
}
.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c2a87e;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.progress-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    min-width: 38px;
    text-align: right;
}

/* ---------- bouton nouvelle carte ---------- */
.buttons-row {
    width: min(100%, 360px);
    margin-top: clamp(14px, 3vw, 22px);
}
.reset-button {
    width: 100%;
    font-family: Karla, sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--btn-ink);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 999px;
    padding: 15px 20px;
    cursor: pointer;
    transition: transform 0.25s ease, filter 0.25s ease, background 0.3s ease, color 0.3s ease;
}
.reset-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
[data-theme="dark"] .reset-button:hover { background: rgba(233, 223, 200, 0.08); }

/* ---------- panneau de vote ---------- */
.vote-panel {
    display: none;
    width: min(100%, 360px);
    margin-top: clamp(14px, 3vw, 22px);
    padding: 18px 20px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--bg-modal);
    text-align: center;
    animation: vote-in 0.5s ease both;
}
.vote-panel.active { display: block; }
@keyframes vote-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.vote-panel h3 {
    font-family: Fraunces, Georgia, serif;
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: 14px;
}
.vote-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.vote-btn {
    flex: 1;
    font-family: Karla, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 11px 14px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.vote-btn:hover:not(:disabled) { transform: translateY(-2px); }
.vote-btn:disabled { opacity: 0.45; cursor: default; }
.vote-btn-like {
    color: #fff;
    background: linear-gradient(180deg, #c2a87e, #a4885c);
    border: none;
}
.vote-btn-bad {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
}
.vote-result {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--muted);
    min-height: 1.2em;
}

/* ---------- footer ---------- */
.footer {
    margin-top: clamp(18px, 4vw, 28px);
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    width: min(100%, 360px);
    text-align: center;
}
.social-links {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-bottom: 8px;
}
.social-links img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.social-links a:hover img { opacity: 1; transform: scale(1.1); }
.footer-text {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- modale archives ---------- */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 12, 0.55);
    z-index: 1000;
}
.modal-content {
    background: var(--bg-modal);
    color: var(--ink);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    max-width: 480px;
    width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
    margin: 8vh auto 0;
    padding: 24px 26px;
    position: relative;
}
.modal-content h2 {
    font-family: Fraunces, Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 16px;
}
.close {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
}
.close:hover { color: var(--ink); }
.archive-item {
    padding: 11px 12px;
    border-radius: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--hairline);
    transition: background 0.2s ease;
}
.archive-item:hover { background: var(--bg-archive-hover); }
.archive-item em { color: var(--muted); font-size: 0.85em; }

/* ---------- confettis ---------- */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}
.confetti-piece {
    position: absolute;
    top: -10vh;
    width: 10px;
    height: 10px;
    animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(115vh) rotate(720deg); }
}