/* ═══ LA NOTE SALÉE — identité visuelle ═══ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');

:root {
    --tomate: #F04B32;
    --beurre: #F6C445;
    --creme: #FFF3DE;
    --olive: #657A4B;
    --aubergine: #29202E;
    --blanc: #FFFFFF;
    --background: var(--creme);
    --surface: var(--blanc);
    --text: var(--aubergine);
    --muted: #6B5F72;
    --border: rgba(41, 32, 46, 0.12);
    --shadow: 0 6px 0 rgba(41, 32, 46, 0.12), 0 12px 32px rgba(41, 32, 46, 0.1);
    --shadow-sm: 0 3px 0 rgba(41, 32, 46, 0.1), 0 6px 16px rgba(41, 32, 46, 0.08);
    --radius: 20px;
    --radius-sm: 12px;
    --font-display: 'Bebas Neue', Impact, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--background);
    color: var(--text);
    min-height: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle, rgba(41,32,46,0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
}

body.view-draw::before,
body.view-reveal::before {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(41,32,46,0.02) 12px, rgba(41,32,46,0.02) 24px);
}

body.view-final::before,
body[data-view="final"]::before { opacity: 0; }

#app {
    position: relative; z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 12px 18px calc(24px + var(--safe-bottom));
}

.view { display: none; }
.view.active { display: block; animation: viewIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes viewIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-centered { display: none; min-height: 78dvh; align-items: center; justify-content: center; }
.view-centered.active { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
    .view.active, .anim-in, .anim-rise, .anim-draw-card, .anim-plate, .anim-star, .anim-ticket,
    .badge-pop, .confetti-piece, .score-pick.selected, .sticker { animation: none !important; }
}

/* ─── Typographie display ─── */
.display-xl { font-family: var(--font-display); font-size: clamp(2.8rem, 12vw, 4.2rem); line-height: 0.92; letter-spacing: 0.02em; }
.display-lg { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); line-height: 0.95; letter-spacing: 0.02em; }
.display-md { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1; letter-spacing: 0.03em; }

/* ─── Lockup logo ─── */
.brand-lockup { display: flex; flex-direction: column; align-items: center; line-height: 0.85; }
.lockup-line { font-family: var(--font-display); display: block; letter-spacing: 0.06em; }
.lockup-la { font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--tomate); transform: rotate(-2deg); }
.lockup-note { font-size: clamp(3.2rem, 14vw, 5rem); color: var(--aubergine); text-shadow: 3px 3px 0 var(--beurre); }
.lockup-salee { font-size: clamp(2.8rem, 12vw, 4.5rem); color: var(--tomate); transform: rotate(1deg); margin-top: -4px; }
.lockup-compact .lockup-note { font-size: clamp(2rem, 8vw, 2.8rem); }
.lockup-compact .lockup-salee { font-size: clamp(1.6rem, 6vw, 2.2rem); }

/* ─── Stickers ─── */
.sticker {
    display: inline-block;
    padding: 5px 12px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    border: 2.5px solid var(--aubergine);
    border-radius: 4px;
    box-shadow: 2px 3px 0 var(--aubergine);
    transform: rotate(var(--rot, -2deg));
    white-space: nowrap;
}
.sticker-default { background: var(--beurre); color: var(--aubergine); }
.sticker-round { background: var(--rc-bg, var(--tomate)); color: var(--rc-text, #fff); border-color: var(--aubergine); }
.sticker-hot { background: var(--tomate); color: #fff; }
.sticker-ok { background: var(--olive); color: #fff; }
.sticker-draw { background: var(--beurre); color: var(--aubergine); }
.sticker-final { background: var(--aubergine); color: var(--beurre); }
.sticker-test { background: #7B5EA7; color: #fff; }
.sticker-action { background: var(--tomate); color: #fff; animation: stickerWiggle 3s ease-in-out infinite; }
.sticker-live { background: var(--olive); color: #fff; }

@keyframes stickerWiggle {
    0%, 100% { transform: rotate(var(--rot, -2deg)); }
    50% { transform: rotate(calc(var(--rot, -2deg) + 2deg)); }
}

/* ─── Hero accueil ─── */
.hero-screen {
    text-align: center;
    padding: 8px 0 20px;
    position: relative;
}
.hero-screen::after {
    content: '';
    position: absolute; top: -20px; right: -30px; width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(246,196,69,0.35), transparent 70%);
    pointer-events: none;
}
.hero-sticker-top { margin-bottom: 12px; }
.hero-decos {
    position: relative; height: 0; pointer-events: none;
}
.deco {
    position: absolute; width: 28px; height: auto;
    filter: drop-shadow(2px 2px 0 rgba(41,32,46,0.15));
}
.deco-fork { top: -20px; left: 8%; transform: rotate(-18deg); width: 22px; }
.deco-star { top: -32px; right: 12%; transform: rotate(12deg); width: 26px; }
.deco-plate { top: 60px; left: -4%; transform: rotate(-8deg); width: 32px; }
.deco-pepper { top: 50px; right: 0; transform: rotate(15deg); width: 20px; }

.hero-plate-wrap { margin: 20px auto 16px; max-width: 240px; }
.hero-plate { width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(41,32,46,0.15)); }
.anim-plate { animation: floatPlate 4s ease-in-out infinite; }
.anim-star { animation: spinStar 8s linear infinite; transform-origin: center; }
.anim-ticket { animation: floatTicket 3s ease-in-out infinite; }

@keyframes floatPlate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spinStar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes floatTicket { 0%, 100% { transform: translate(42px,180px) rotate(-8deg); } 50% { transform: translate(42px,174px) rotate(-5deg); } }

.hero-tagline {
    font-size: clamp(0.95rem, 3.5vw, 1.08rem);
    font-weight: 700;
    color: var(--muted);
    line-height: 1.45;
    max-width: 26ch;
    margin: 0 auto 24px;
}

.hero-steps-row {
    display: flex; justify-content: center; gap: 6px;
    margin: 28px 0 8px; flex-wrap: wrap;
}
.hero-step-pill {
    flex: 1; min-width: 68px; max-width: 80px;
    background: var(--blanc);
    border: 2.5px solid var(--aubergine);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    box-shadow: var(--shadow-sm);
    transform: rotate(var(--rot, 0deg));
}
.hero-step-pill:nth-child(odd) { --rot: -1deg; }
.hero-step-pill:nth-child(even) { --rot: 1deg; }
.hero-step-pill strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--tomate);
    line-height: 1;
}
.hero-step-pill span { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--aubergine); }

.hero-divider {
    border: none; height: 3px;
    background: repeating-linear-gradient(90deg, var(--aubergine) 0, var(--aubergine) 8px, transparent 8px, transparent 16px);
    margin: 20px auto; max-width: 200px; opacity: 0.2;
}

/* ─── Dashboard ─── */
.dash-header { position: relative; text-align: center; padding-top: 4px; margin-bottom: 16px; }
.dash-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 6vw, 2rem);
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    text-align: left;
}
.icon-btn-settings {
    position: absolute; top: 0; right: 0;
    width: 42px; height: 42px; font-size: 1.15rem;
    background: var(--blanc); border: 2.5px solid var(--aubergine);
    border-radius: 50%; box-shadow: var(--shadow-sm); cursor: pointer;
}

.home-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.home-foot { text-align: center; margin-top: 20px; font-size: 0.78rem; color: var(--muted); font-weight: 600; }

/* Session cards dashboard */
.session-list { display: flex; flex-direction: column; gap: 14px; }
.session-card {
    display: block; width: 100%; text-align: left; padding: 0;
    border: none; background: none; cursor: pointer; font-family: inherit;
    animation: riseIn 0.35s ease backwards;
}
.session-card-inner {
    position: relative;
    padding: 18px 18px 16px;
    border: 3px solid var(--aubergine);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: rotate(var(--card-rot, -0.5deg));
    transition: transform 0.15s;
    overflow: hidden;
}
.session-card:active .session-card-inner { transform: rotate(0deg) scale(0.98); }
.session-card-inner::before {
    content: '';
    position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.session-card-badge { position: absolute; top: 12px; right: 12px; }
.session-badge {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--tomate); border: 2px solid var(--aubergine);
    box-shadow: 0 0 0 3px rgba(240,75,50,0.25);
}
.session-card-sticker { margin-bottom: 10px; }
.session-card-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin-bottom: 8px;
    padding-right: 24px;
}
.session-card-headline { font-weight: 800; font-size: 0.92rem; margin-bottom: 4px; }
.session-card-sub { font-size: 0.85rem; color: var(--muted); font-style: italic; margin-bottom: 12px; }
.session-card-cta {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--aubergine);
}

/* ─── Boutons ─── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 24px; border: 3px solid var(--aubergine);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 1.15rem; letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s, box-shadow 0.1s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--aubergine); }
.btn-accent {
    background: var(--tomate); color: #fff;
    font-size: clamp(1.1rem, 4.5vw, 1.25rem);
    padding: 18px 24px;
}
.btn-accent.btn-hero { font-size: clamp(1.2rem, 5vw, 1.45rem); padding: 20px 28px; }
.btn-ghost { background: var(--blanc); color: var(--aubergine); }
.btn-xl { width: 100%; border-radius: var(--radius); }
.btn-lg { padding: 18px 28px; font-size: 1.2rem; }
.btn-block { width: 100%; margin-top: 10px; }
.btn-sm { padding: 12px 16px; font-size: 0.95rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-round-action {
    background: var(--rc-bg, var(--tomate));
    color: var(--rc-text, #fff);
    font-size: clamp(1.3rem, 5.5vw, 1.6rem);
    padding: 22px;
    width: 100%;
}
.hidden { display: none !important; }

.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--blanc); border: 2.5px solid var(--aubergine);
    color: var(--text); cursor: pointer; margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.icon-btn svg { display: block; }

/* ─── Cartes génériques ─── */
.card {
    border-radius: var(--radius);
    border: 3px solid var(--aubergine);
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.card-main { background: var(--blanc); padding: 24px 20px; }
.card-warm { background: var(--creme); padding: 18px 16px; }

.view-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}
.view-title.compact { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.section-label {
    font-family: var(--font-display);
    font-size: 0.85rem; letter-spacing: 0.12em;
    color: var(--muted); margin: 20px 0 10px;
}
.muted { color: var(--muted); }
.game-brand {
    font-family: var(--font-display);
    font-size: 0.75rem; letter-spacing: 0.18em;
    color: var(--tomate); margin-bottom: 4px;
}

/* ─── Resto poster (round) ─── */
.view-round[data-round-color] {
    --rc-bg: var(--tomate);
    --rc-soft: #FFE8E4;
    --rc-text: #fff;
    --rc-dark: #C42E18;
}

.resto-poster {
    position: relative;
    background: var(--rc-soft);
    border: 3px solid var(--aubergine);
    border-radius: var(--radius);
    padding: 24px 20px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: center;
}
.resto-poster-bgnum {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: clamp(6rem, 28vw, 9rem);
    color: var(--rc-bg);
    opacity: 0.12;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.resto-poster .sticker { position: absolute; top: 14px; left: 14px; z-index: 2; }
.resto-poster-body { position: relative; z-index: 1; padding-top: 20px; }
.resto-poster-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
    color: var(--aubergine);
    margin-bottom: 8px;
}
.resto-poster-name span { display: block; }
.resto-poster-meta { font-weight: 600; color: var(--muted); margin-bottom: 16px; font-size: 0.92rem; }
.resto-poster-by { margin-top: 16px; }
.resto-poster-by-label {
    font-family: var(--font-display);
    font-size: 0.75rem; letter-spacing: 0.14em;
    color: var(--muted); display: block; margin-bottom: 8px;
}
.resto-poster-player {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--blanc); border: 2.5px solid var(--aubergine);
    padding: 8px 16px 8px 8px; border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.resto-poster-player strong { font-size: 1rem; }
.resto-poster-link {
    display: inline-block; margin-top: 16px;
    font-family: var(--font-display);
    font-size: 0.95rem; letter-spacing: 0.08em;
    color: var(--rc-dark, var(--tomate));
    text-decoration: none;
    padding: 8px 20px;
    border: 2px solid var(--aubergine);
    border-radius: 999px;
    background: var(--blanc);
}

/* ─── Round path ─── */
.round-top { margin-bottom: 12px; }
.round-big-num {
    font-family: var(--font-display);
    font-size: clamp(4rem, 22vw, 6rem);
    line-height: 0.8;
    color: var(--rc-bg, var(--tomate));
    opacity: 0.25;
    text-align: center;
    margin: -8px 0 -20px;
    pointer-events: none;
}
.round-heading {
    font-family: var(--font-display);
    font-size: clamp(1rem, 4vw, 1.2rem);
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 8px;
}
.round-mood { text-align: center; font-size: 0.88rem; font-style: italic; color: var(--muted); margin-bottom: 14px; }

.path-track {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 16px; overflow-x: auto; padding: 4px 0;
}
.path-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 26px; }
.path-sym { font-size: 0.85rem; font-weight: 800; }
.path-num { font-size: 0.6rem; font-weight: 700; color: var(--muted); }
.path-done .path-sym { color: var(--olive); }
.path-current .path-sym { color: var(--rc-bg, var(--tomate)); font-size: 1.1rem; }
.path-upcoming .path-sym { color: var(--border); }
.path-line { flex: 1; min-width: 10px; max-width: 28px; height: 3px; background: var(--border); margin-bottom: 14px; border-radius: 2px; }
.path-line-done { background: var(--olive); opacity: 0.6; }

/* ─── Draw ─── */
.view-draw { background: var(--creme); min-height: 80dvh; }
.draw-stage { padding: 16px 0; min-height: 70dvh; display: flex; flex-direction: column; justify-content: center; }
.draw-intro-screen { text-align: center; padding: 32px 12px; }
.draw-dice {
    font-size: 4rem; margin: 24px 0;
    animation: diceShake 0.6s ease infinite;
}
@keyframes diceShake {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg) scale(1.05); }
}
.draw-cards { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.draw-card {
    display: flex; align-items: stretch; gap: 0;
    background: var(--rc-soft);
    border: 3px solid var(--aubergine);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    opacity: 0;
}
.anim-draw-card { animation: cardSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes cardSlideUp {
    from { opacity: 0; transform: translateY(24px) rotate(-2deg); }
    to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.draw-card-num {
    display: flex; align-items: center; justify-content: center;
    min-width: 52px;
    background: var(--rc-bg);
    color: var(--rc-text);
    font-family: var(--font-display);
    font-size: 1.6rem;
    border-right: 3px solid var(--aubergine);
}
.draw-card-body { padding: 14px 16px; flex: 1; }
.draw-card-name { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.04em; display: block; line-height: 1.05; }
.draw-card-name span { display: block; font-size: 0.95em; }
.draw-card-by { font-size: 0.82rem; color: var(--muted); font-weight: 600; margin-top: 4px; display: block; }
.draw-sealed { text-align: center; padding: 20px 0; }

/* ─── Vote ─── */
.vote-intro { font-style: italic; color: var(--muted); margin-bottom: 14px; font-size: 0.88rem; }
.crit-card {
    background: var(--blanc);
    border: 3px solid var(--aubergine);
    border-radius: var(--radius-sm);
    padding: 18px 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.crit-card h4 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 5vw, 1.6rem);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.crit-q { font-size: 0.88rem; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.crit-feedback {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    letter-spacing: 0.04em;
    color: var(--tomate);
    text-align: center;
    min-height: 1.4em;
    margin-top: 10px;
    animation: popIn 0.25s ease;
}
.score-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.score-pick {
    height: 44px;
    border: 2.5px solid var(--aubergine);
    background: var(--creme);
    color: var(--aubergine);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.12s;
}
.score-pick.selected {
    background: var(--tomate); color: #fff;
    transform: scale(1.12);
    box-shadow: 0 4px 0 var(--aubergine);
    z-index: 1;
    position: relative;
}

/* ─── Vote vidéo ─── */
.vote-video-box { margin: 16px 0; padding: 14px; }
.vote-video-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vote-video-head h4 { margin: 0; font-size: 1rem; }
.vote-video-hint { font-size: 0.82rem; margin: 8px 0 12px; }
.vote-video-stage {
    position: relative; background: var(--aubergine); border-radius: 12px;
    overflow: hidden; aspect-ratio: 4 / 3; max-height: 220px;
    display: flex; align-items: center; justify-content: center;
}
.vote-video-placeholder { text-align: center; color: rgba(255,243,222,0.7); padding: 16px; }
.vote-video-icon { font-size: 2rem; display: block; margin-bottom: 6px; }
.vote-video-preview {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: #000;
}
.vote-video-rec-indicator {
    position: absolute; top: 10px; left: 10px;
    background: rgba(0,0,0,0.55); color: #fff;
    padding: 4px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 800; display: flex; align-items: center; gap: 6px;
}
.rec-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #ff3b30;
    animation: pulseRec 1s ease infinite;
}
@keyframes pulseRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.vote-video-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ─── Archives vidéo ─── */
.archive-intro { font-size: 0.88rem; margin-bottom: 12px; }
.archive-export-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; margin-bottom: 14px; }
.video-archive-list { display: flex; flex-direction: column; gap: 14px; }
.archive-clip { padding: 12px; }
.archive-clip-meta { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; }
.archive-clip-video {
    width: 100%; border-radius: 10px; background: #000;
    max-height: 280px; object-fit: contain;
}
.archive-note { font-size: 0.8rem; margin-top: 20px; font-style: italic; }

/* ─── Transition overlay ─── */
#transition-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: var(--olive);
    color: #fff;
    text-align: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
#transition-overlay.active { opacity: 1; pointer-events: auto; }
#transition-overlay.theme-green { background: var(--olive); }
#transition-overlay.theme-dark { background: var(--aubergine); color: var(--creme); }
#transition-overlay.theme-gold { background: var(--beurre); color: var(--aubergine); }
.transition-check { font-size: 4rem; margin-top: 16px; animation: popIn 0.4s ease 0.2s both; }

/* ─── Waiting votes ─── */
.vote-wait-screen { text-align: center; width: 100%; padding: 16px; }
.vote-wait-title { margin-bottom: 8px; }
.vote-wait-promise { font-size: 0.88rem; font-style: italic; color: var(--muted); margin-top: 20px; }
.vote-avatars { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.vote-avatar-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 48px;
}
.vote-avatar-item.pending { opacity: 0.45; animation: pulseWait 2s ease infinite; }
@keyframes pulseWait { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.75; } }
.vote-avatar-item .avatar { width: 40px; height: 40px; font-size: 1rem; }
.vote-avatar-mark { font-size: 0.75rem; font-weight: 800; color: var(--olive); }

/* ─── Round complete ─── */
.round-complete-screen { text-align: center; width: 100%; padding: 8px; }
.complete-timeline {
    display: flex; justify-content: center; gap: 8px;
    flex-wrap: wrap; margin: 20px 0;
}
.complete-tl-item {
    font-family: var(--font-display);
    font-size: 0.9rem;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid var(--aubergine);
    border-radius: 8px;
    background: var(--blanc);
}
.complete-tl-item.done { background: var(--olive); color: #fff; }
.complete-tl-item.current { background: var(--beurre); }
.next-resto-block {
    background: var(--creme);
    border: 3px solid var(--aubergine);
    border-radius: var(--radius);
    padding: 20px;
    margin: 20px 0;
    box-shadow: var(--shadow-sm);
}
.next-resto-block h3 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.04em; margin-top: 8px; }

/* ─── Final / dark theme ─── */
.view-final-dark {
    background: var(--aubergine) !important;
    color: var(--creme);
    min-height: 85dvh;
    margin: -12px -18px;
    padding: 48px 24px calc(32px + var(--safe-bottom));
    border-radius: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.view-final-dark::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at 20% 30%, rgba(246,196,69,0.12), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(240,75,50,0.08), transparent 40%);
}
.view-final-dark .display-xl { color: var(--beurre); text-shadow: 2px 2px 0 rgba(0,0,0,0.3); }
.view-final-dark .muted { color: rgba(255,243,222,0.65); }
.view-final-dark .btn-accent { background: var(--beurre); color: var(--aubergine); border-color: var(--beurre); }

/* ─── Reveal ─── */
.reveal-stage { width: 100%; min-height: 80dvh; display: flex; align-items: center; justify-content: center; padding: 20px 8px; }
.reveal-rank-screen { text-align: center; width: 100%; animation: riseIn 0.5s ease; }
.reveal-rank-num { font-family: var(--font-display); font-size: clamp(4rem, 20vw, 6rem); line-height: 1; }
.reveal-rank-name { font-family: var(--font-display); font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: 0.03em; margin: 8px 0; }
.reveal-rank-score { font-family: var(--font-display); font-size: clamp(2rem, 10vw, 3rem); color: var(--tomate); }
.reveal-rank-by { color: var(--muted); margin-top: 8px; font-weight: 600; }

.reveal-podium { padding: 32px 16px; }
.reveal-podium.rank-3 { background: linear-gradient(180deg, #CD7F32 0%, var(--creme) 100%); }
.reveal-podium.rank-2 { background: linear-gradient(180deg, #E8E8E8 0%, var(--creme) 100%); }
.reveal-podium.rank-1 {
    background: linear-gradient(180deg, var(--beurre) 0%, #FFF8E8 50%, var(--creme) 100%);
    position: relative;
}
.reveal-winner-lockup { margin-bottom: 12px; }
.reveal-winner-lockup .lockup-note { text-shadow: 3px 3px 0 var(--tomate); }
.reveal-winner-year { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.2em; color: var(--muted); }

.confetti-wrap { position: relative; overflow: hidden; }
.confetti-piece {
    position: absolute; width: 8px; height: 8px;
    animation: confettiFall 2.5s ease-out forwards;
    pointer-events: none;
}
@keyframes confettiFall {
    0% { opacity: 1; transform: translateY(0) rotate(0); }
    100% { opacity: 0; transform: translateY(180px) rotate(720deg); }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes riseIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Avatars ─── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: #fff; font-weight: 800; font-size: 0.95rem;
    flex-shrink: 0; border: 2.5px solid var(--aubergine);
    box-shadow: 2px 2px 0 rgba(41,32,46,0.15);
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.82rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1.15rem; }

/* ─── Forms ─── */
.form-stack label, .field-label {
    display: block; font-size: 0.82rem; font-weight: 700; color: var(--muted);
    margin-bottom: 6px; margin-top: 16px; text-transform: uppercase; letter-spacing: 0.06em;
}
input[type="text"], input[type="url"], input[type="number"] {
    width: 100%; padding: 14px 16px;
    background: var(--blanc); border: 2.5px solid var(--aubergine);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: var(--font-body); font-size: 1.05rem; font-weight: 600;
    outline: none;
}
input:focus { box-shadow: 0 0 0 3px rgba(240,75,50,0.2); }
.input-code { text-align: center; letter-spacing: 0.2em; font-weight: 800 !important; font-size: 1.4rem !important; }

.player-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.picker-btn {
    aspect-ratio: 1; border: 2.5px solid var(--aubergine);
    background: var(--blanc); font-family: var(--font-display);
    font-size: 1.2rem; border-radius: var(--radius-sm); cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.picker-btn.active { background: var(--beurre); }

/* ─── Lobby ─── */
.lobby-tagline { font-style: italic; color: var(--muted); margin-bottom: 12px; }
.lobby-count { font-weight: 800; margin-bottom: 12px; }
.share-chip {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--blanc); border: 2.5px solid var(--aubergine);
    border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.share-chip strong { color: var(--tomate); letter-spacing: 0.12em; font-family: var(--font-display); font-size: 1.2rem; }
.lobby-hint, .lobby-ready {
    padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
    border: 2.5px solid var(--aubergine); font-weight: 700; font-size: 0.88rem;
}
.lobby-hint { background: rgba(246,196,69,0.25); }
.lobby-ready { background: rgba(101,122,75,0.15); color: var(--olive); text-align: center; }

.player-status-list { list-style: none; margin-bottom: 16px; }
.player-status-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 2px dashed var(--border);
}
.pl-name { font-weight: 800; display: block; }
.pl-status { font-size: 0.84rem; color: var(--muted); }

/* Predict boxes */
.predict-box, .winner-pick-box { margin-bottom: 14px; }
.predict-btn, .winner-pick-btn {
    width: 100%; padding: 14px; text-align: left;
    border: 2.5px solid var(--aubergine); background: var(--blanc);
    border-radius: var(--radius-sm); font-family: inherit;
    font-weight: 600; cursor: pointer; margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
}
.predict-btn.selected, .winner-pick-btn.selected { background: var(--beurre); }

/* ─── Results ─── */
.results-list { display: flex; flex-direction: column; gap: 8px; }
.result-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px 16px; background: var(--blanc);
    border: 2.5px solid var(--aubergine); border-radius: var(--radius-sm);
    font-family: inherit; cursor: pointer; text-align: left;
    box-shadow: var(--shadow-sm);
    animation: riseIn 0.3s ease backwards;
}
.result-pos { font-family: var(--font-display); font-size: 1.3rem; min-width: 2em; }
.result-name { flex: 1; font-weight: 800; }
.result-pts { font-family: var(--font-display); font-size: 1.2rem; color: var(--tomate); }

.awards-list, .palmares-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.award-row, .palmares-card {
    padding: 14px 16px; background: var(--blanc);
    border: 2.5px solid var(--aubergine); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.palmares-title { font-family: var(--font-display); letter-spacing: 0.06em; font-size: 0.85rem; color: var(--muted); }
.palmares-name { font-weight: 800; font-size: 1.05rem; margin: 6px 0; }
.palmares-blurb { font-size: 0.85rem; color: var(--muted); font-style: italic; }

/* ─── Settings / test ─── */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.settings-desc { font-size: 0.82rem; margin-top: 4px; }
.settings-danger { border-color: rgba(192, 57, 43, 0.25); }
.toggle-btn {
    min-width: 52px; padding: 10px 14px; border-radius: 999px;
    border: 2.5px solid var(--aubergine); background: var(--blanc);
    font-weight: 800; cursor: pointer;
}
.toggle-btn[aria-pressed="true"] { background: var(--beurre); }
.test-tools { display: flex; flex-direction: column; gap: 8px; }
.test-field-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--olive); }
.test-session-select {
    width: 100%; padding: 10px 12px; border-radius: 12px;
    border: 2px solid rgba(41, 32, 46, 0.15); background: var(--blanc);
    font: inherit; font-size: 0.9rem; color: var(--aubergine);
}
.test-session-status { font-size: 0.82rem; margin: 0; min-height: 1.2em; }
.test-divider { border: none; border-top: 1px dashed rgba(41, 32, 46, 0.12); margin: 4px 0; }
.btn-danger { color: #c0392b; }
.btn-danger-text { color: #c0392b; font-size: 0.85rem; margin-top: 12px; }

.test-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    background: #7B5EA7; color: #fff; text-align: center;
    font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.14em;
    padding: 6px; padding-top: calc(6px + env(safe-area-inset-top, 0px));
}
body.test-mode-active #app { padding-top: calc(12px + 28px); }

.toast {
    position: fixed; bottom: calc(20px + var(--safe-bottom)); left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--aubergine); color: var(--creme);
    padding: 12px 22px; border-radius: 999px;
    font-weight: 700; font-size: 0.88rem;
    border: 2px solid var(--beurre);
    opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 400;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 390px) {
    .score-pick { height: 40px; font-size: 1rem; }
    .hero-step-pill { min-width: 62px; padding: 8px 4px; }
}

@media (max-width: 320px) {
    #app { padding-left: 14px; padding-right: 14px; }
    .score-grid { gap: 4px; }
    .score-pick { height: 36px; font-size: 0.9rem; }
}

@media (min-width: 600px) {
    #app { max-width: 440px; }
}