/* Bounou et la course de pirogues — feuille de style unique (vanilla, sans build).
 *
 * Couleurs pilotées par le thème (variables --p-* posées par main.js) ; valeurs
 * de secours ci-dessous. Rendu 100% DOM + SVG → net sur tout écran (Retina inclus).
 * Barre du haut inspirée de Mawa.
 */

:root {
    --p-bg: #3fb0c4;
    --p-bg-deep: #0d6e7e;
    --p-sand: #fbe3a2;
    --p-sand-deep: #f0cd7a;
    --p-accent: #ffc94d;
    --p-player1: #ff7a59;
    --p-player2: #7c5cff;
    --p-success: #5cb85c;
    --p-error: #e0573a;
    --p-ink: #163b42;
    --p-paper: #fffdf6;

    --radius: 20px;
    --shadow: 0 6px 0 rgba(0, 0, 0, .16);
    --font: 'Fredoka', 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font);
    color: var(--p-ink);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

#app {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(120% 80% at 80% -10%, rgba(255, 255, 255, .22), transparent 60%),
        linear-gradient(180deg, var(--p-bg) 0%, var(--p-bg-deep) 100%);
    overflow: hidden;
}

#app::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 2px, transparent 3px);
    background-size: 90px 70px;
    opacity: .5;
    pointer-events: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.svg-ico { display: block; width: 100%; height: 100%; }

.screen-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ===================== Boutons ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    color: #fff;
    background: var(--btn, var(--p-player1));
    padding: 14px 26px;
    border-radius: 16px;
    box-shadow: 0 5px 0 var(--btn-deep, rgba(0, 0, 0, .25));
    transition: transform .06s, box-shadow .06s;
    font-size: clamp(16px, 2.4vw, 22px);
    line-height: 1;
}
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-deep, rgba(0, 0, 0, .25)); }
.btn--ghost { --btn: var(--p-paper); --btn-deep: #d8cba8; color: var(--p-ink); }
.btn--success { --btn: var(--p-success); --btn-deep: #3f9a45; }

.btn-text {
    background: none;
    color: var(--p-ink);
    font-weight: 700;
    font-size: 16px;
    text-decoration: underline;
    padding: 6px;
}

/* ===================== Barre du haut (façon Mawa) ===================== */
.topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, .16);
    padding-top: max(clamp(8px, 1.6vh, 14px), env(safe-area-inset-top));
    padding-bottom: clamp(8px, 1.6vh, 14px);
    padding-left: max(clamp(10px, 3vw, 20px), env(safe-area-inset-left));
    padding-right: max(clamp(10px, 3vw, 20px), env(safe-area-inset-right));
}

.back-link {
    flex: none;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: var(--p-paper);
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
    color: var(--p-ink);
    font-size: 30px; font-weight: 700;
    text-decoration: none;
    line-height: 1; padding-bottom: 4px;
}
.back-link:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .14); }

.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-badge {
    flex: none;
    width: 46px; height: 46px;
    background: var(--p-paper);
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
    overflow: hidden;
}
.brand-badge svg { width: 38px; height: 38px; }
.brand-text { min-width: 0; }
.brand-text h1 {
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    font-size: clamp(16px, 3.4vw, 24px);
    color: var(--p-paper);
    line-height: 1.05;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text p { font-size: clamp(11px, 2vw, 14px); font-weight: 500; color: rgba(255, 255, 255, .85); }

.topbar-right { display: flex; align-items: center; gap: 8px; flex: none; }

.hud-pill {
    display: inline-flex; align-items: center;
    background: var(--p-paper);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: 'Baloo 2', var(--font);
    font-weight: 800; font-size: 16px;
    color: var(--p-ink);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
    line-height: 1;
}

.player-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--p-paper);
    border-radius: 999px;
    padding: 5px 12px 5px 6px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.player-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.player-chip .avatar { width: 28px; height: 28px; flex: none; }
.player-chip .pname {
    font-family: 'Baloo 2', var(--font);
    font-weight: 800; font-size: 16px; color: var(--p-ink);
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.icon-btn {
    flex: none;
    width: 42px; height: 42px;
    background: var(--p-paper);
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
    display: grid; place-items: center;
    color: var(--p-ink);
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .14); }
.icon-btn svg { width: 22px; height: 22px; }

@media (max-width: 560px) {
    .brand-text { display: none; }
    .player-chip .pname { display: none; }
    .back-link, .icon-btn { width: 38px; height: 38px; }
}

/* ===================== Menu ===================== */
.menu-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.4vh, 22px);
    padding: clamp(14px, 3vh, 30px) clamp(14px, 4vw, 40px);
    overflow-y: auto;
    text-align: center;
}
.hello {
    color: var(--p-paper);
    font-family: 'Baloo 2', var(--font);
    font-weight: 700;
    font-size: clamp(22px, 4.4vw, 34px);
    text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.field-label {
    color: var(--p-paper);
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    font-size: clamp(16px, 2.6vw, 22px);
}
.level-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: clamp(6px, 1.2vw, 12px);
    width: min(720px, 96%);
}
@media (max-width: 560px) { .level-grid { grid-template-columns: repeat(5, 1fr); } }

.level-tile {
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--p-paper);
    color: var(--p-ink);
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    font-size: clamp(16px, 2.4vw, 22px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
    display: grid; place-items: center;
    transition: transform .1s;
}
.level-tile[aria-pressed="true"] { background: var(--p-accent); transform: translateY(-3px); }
.level-tile.locked { background: #cfd8d6; color: #8aa; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.level-tile .lock { width: 42%; height: 42%; opacity: .7; }

/* ===================== Plateau ===================== */
.board {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;            /* travelers & pirogues rapprochés */
    gap: clamp(14px, 3vh, 34px);
    padding: clamp(10px, 2vh, 22px) clamp(8px, 2vw, 24px);
    min-height: 0;
}

.travelers, .boats {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 18px);
}

/* Progression : 10 opérations par niveau (pastilles qui se remplissent). */
.progress { display: flex; gap: clamp(5px, 1vw, 8px); justify-content: center; flex-wrap: wrap; }
.progress i {
    width: clamp(10px, 1.5vw, 14px);
    height: clamp(10px, 1.5vw, 14px);
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
    transition: background .25s, transform .25s;
}
.progress i.done { background: var(--p-accent); transform: scale(1.18); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }

/* Arrivée d'une nouvelle vague d'animaux / pirogues.
   (Pas de fill-mode : sinon la transform figée bloquerait la glisse des pirogues.) */
.enter { animation: popin .35s ease; }
@keyframes popin { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }

/* ----- Carte voyageur (« cool ») ----- */
.traveler {
    position: relative;
    width: clamp(98px, 13vw, 142px);
    background: linear-gradient(180deg, #ffffff 0%, var(--p-paper) 100%);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 4px solid transparent;
    transition: transform .12s, border-color .12s, box-shadow .12s, opacity .3s;
    touch-action: none;                 /* glisser sans scroller la page */
}
.traveler::after {                      /* petit reflet en haut */
    content: "";
    position: absolute; top: 6px; left: 10%; right: 10%; height: 16px;
    border-radius: 99px; background: rgba(255, 255, 255, .6);
}
.traveler .avatar {
    width: clamp(52px, 7.6vw, 76px);
    height: clamp(52px, 7.6vw, 76px);
    animation: bob 2.6s ease-in-out infinite;
}
.traveler .calc {
    display: inline-flex; align-items: baseline; gap: 2px;
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    font-size: clamp(22px, 3.2vw, 34px);
    color: var(--p-ink);
}
.traveler .calc i { font-style: normal; color: var(--p-accent); font-size: .8em; padding: 0 1px; }
.traveler.selected {
    border-color: var(--p-accent);
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 12px 0 rgba(0, 0, 0, .18);
}
.traveler.dragging { opacity: .35; }
.traveler.embarked { opacity: 0; pointer-events: none; transform: scale(.4); }
.traveler.shake { animation: shake .45s; }

/* ----- Pirogue ----- */
.boat {
    position: relative;
    width: clamp(122px, 16vw, 170px);
    transition: transform 2.2s cubic-bezier(.4, 0, .6, 1), outline-color .15s;
}
.boat .hull { width: 100%; display: block; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .18)); }

/* Le NUMÉRO est peint SUR la coque (pas au-dessus). */
.boat .num {
    position: absolute;
    left: 0; right: 0;
    top: 64%;
    transform: translateY(-50%);
    text-align: center;
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    font-size: clamp(24px, 3.6vw, 38px);
    color: #fff7e6;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.boat .rider {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    aspect-ratio: 1;
    animation: bob 1.4s ease-in-out infinite;
}
.boat.claimed { outline: 5px solid var(--claim, var(--p-accent)); outline-offset: -2px; border-radius: 18px; }
.boat.drop-hover { transform: translateY(-10px) scale(1.05); outline: 4px dashed var(--p-accent); outline-offset: 4px; border-radius: 18px; }
.boat.wobble { animation: wobble .5s; }
.boat.hintpulse { animation: hintpulse .6s 2; }
.boat.glide { transform: translateX(130vw) translateY(-6px) rotate(4deg); }

/* ----- Consigne ----- */
.howto {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(0, 0, 0, .26);
    color: var(--p-paper);
    font-weight: 700;
    font-size: clamp(15px, 2.4vw, 22px);
    padding: 8px 18px;
    border-radius: 999px;
    transition: opacity .4s;
    animation: nudge 1.6s ease-in-out infinite;
}
/* Masquée mais GARDE sa place (sinon le plateau se resserre brusquement). */
.howto.gone { opacity: 0; pointer-events: none; animation: none; }
.howto .tap { width: clamp(20px, 3vw, 28px); height: clamp(20px, 3vw, 28px); flex: none; }

/* ----- Chrono ambiant ----- */
.timer { width: min(340px, 80%); height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.timer > i { display: block; height: 100%; width: 100%; background: var(--p-accent); transition: width 1s linear; }

/* ----- Sable ----- */
.sand {
    flex: 0 0 auto;
    height: clamp(26px, 5vh, 54px);
    background: linear-gradient(180deg, var(--p-sand) 0%, var(--p-sand-deep) 100%);
    box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35);
}

/* ----- Fantôme de glisser-déposer ----- */
.drag-ghost {
    position: fixed;
    z-index: 30;
    width: clamp(64px, 9vw, 92px);
    height: clamp(64px, 9vw, 92px);
    transform: translate(-50%, -50%) rotate(-5deg);
    pointer-events: none;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3));
}
.fly { position: fixed; z-index: 20; pointer-events: none; transition: transform .42s cubic-bezier(.5, 0, .5, 1); }

/* ===================== Création / sélection de joueur ===================== */
.create-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.create-card {
    background: var(--p-paper);
    border-radius: 26px;
    box-shadow: 0 12px 0 rgba(0, 0, 0, .18);
    padding: clamp(22px, 4vh, 36px);
    width: min(420px, 92%);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    text-align: center;
}
.create-avatar { width: clamp(80px, 18vw, 110px); height: clamp(80px, 18vw, 110px); }
.create-card h2 { font-family: 'Baloo 2', var(--font); font-weight: 800; color: var(--p-ink); font-size: clamp(20px, 4vw, 28px); }

.name-input {
    font-family: 'Baloo 2', var(--font);
    font-weight: 700;
    font-size: clamp(18px, 3.4vw, 24px);
    text-align: center;
    color: var(--p-ink);
    background: #fff;
    border: 3px solid var(--p-bg);
    border-radius: 14px;
    padding: 12px 16px;
    width: 100%;
    outline: none;
}
.name-input:focus { border-color: var(--p-accent); }
.name-input.shake { animation: shake .45s; }

.modal-overlay {
    position: absolute; inset: 0; z-index: 40;
    background: rgba(13, 59, 66, .5);
    display: grid; place-items: center;
    padding: 18px;
}
.modal {
    background: var(--p-paper);
    border-radius: 24px;
    box-shadow: 0 14px 0 rgba(0, 0, 0, .2);
    padding: clamp(18px, 3vh, 28px);
    width: min(400px, 94%);
    max-height: 88%;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}
.modal h2 { font-family: 'Baloo 2', var(--font); font-weight: 800; color: var(--p-ink); text-align: center; font-size: clamp(20px, 4vw, 26px); }
.players-list { display: flex; flex-direction: column; gap: 8px; }
.player-row { display: flex; align-items: center; gap: 8px; }
.player-row.active .player-pick { outline: 3px solid var(--p-accent); }
.player-pick {
    flex: 1;
    display: flex; align-items: center; gap: 12px;
    background: #f2ead6;
    border-radius: 14px;
    padding: 10px 14px;
}
.player-pick .avatar { width: 36px; height: 36px; flex: none; }
.player-pick .pname { font-family: 'Baloo 2', var(--font); font-weight: 800; font-size: 18px; color: var(--p-ink); flex: 1; text-align: left; }
.pick-check { width: 22px; height: 22px; color: var(--p-success); flex: none; }
.player-del { width: 42px; height: 42px; }
.player-del svg { color: var(--p-error); }
.add-player {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    --btn: var(--p-bg); --btn-deep: var(--p-bg-deep);
    font-family: 'Baloo 2', var(--font); font-weight: 800; color: #fff;
    padding: 12px; border-radius: 16px;
    box-shadow: 0 5px 0 var(--btn-deep);
    font-size: 18px;
}
.add-player:active { transform: translateY(5px); box-shadow: 0 0 0 var(--p-bg-deep); }
.add-ico { width: 20px; height: 20px; display: inline-flex; }
.modal-close { align-self: center; }

/* ===================== Victoire ===================== */
.victory {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(12px, 2.5vh, 24px);
    text-align: center; padding: 24px;
    background: rgba(13, 110, 126, .42);
    backdrop-filter: blur(2px);
}
.victory .stars { width: clamp(110px, 22vw, 170px); height: clamp(110px, 22vw, 170px); animation: pop .5s ease-out; }
.victory h2 {
    font-family: 'Baloo 2', var(--font);
    font-weight: 800;
    font-size: clamp(28px, 6vw, 52px);
    color: var(--p-accent);
    text-shadow: 0 4px 0 rgba(0, 0, 0, .25);
    max-width: 90%;
}
.victory .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }

/* ===================== Confettis ===================== */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 2px; will-change: transform, opacity; animation: fall linear forwards; }

/* ===================== Keyframes ===================== */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-8px) rotate(-6deg); }
    40% { transform: translateX(8px) rotate(6deg); }
    60% { transform: translateX(-6px) rotate(-4deg); }
    80% { transform: translateX(6px) rotate(4deg); }
}
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } }
@keyframes hintpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .9; } }

/* La carte voyageur garde son animation bob ; on neutralise les bob globaux au besoin. */
@media (prefers-reduced-motion: reduce) {
    .traveler, .boat, .howto, .boat .rider, .traveler .avatar { animation: none !important; transition: none !important; }
}