/* ======================= L'ENCLOS DES FAMILIERS =======================
   Pas un panneau posé sur un décor : le décor lui-même. Une crique au
   crépuscule, au bord des ruines de la Baie de Sufokia, fermée d'une clôture.
   Les aménagements s'y dressent et changent d'allure à chaque niveau, les
   familiers s'y promènent, et l'interface reste DANS la scène — une enseigne,
   une bourse, un carnet, des fiches qui s'ouvrent à côté de ce qu'on touche.

   Tout est peint en CSS en attendant les illustrations (le décor et chaque
   niveau de chaque aménagement ont leur prompt, lot 16 du catalogue). Ce qui
   bouge n'anime que `transform` et `opacity`.

   1. Scène et décor          5. Enseigne, bourse, compagnon, carnet
   2. Aménagements            6. Fiches
   3. Les bêtes               7. Éclosion et dévoilement
   4. Clôture                 8. Tutoriel, éveil, repères
   ===================================================================== */

/* ---------- 1. Scène et décor ---------- */
#familiars-screen { position: relative; overflow: hidden; background: #10100d; }

/* La scène passe sous la barre de jeu, qui est de verre : le ciel s'y voit. */
.enclos {
    --stone: linear-gradient(180deg, #7d8ca2 0%, #56637a 30%, #343d4f 70%, #2e2e2b 100%);
    --stone-dark: linear-gradient(180deg, #4d5870 0%, #2d3444 60%, #232320 100%);
    --wood: linear-gradient(180deg, #6b4a2c 0%, #4e341d 55%, #33210f 100%);
    --sea: #1f5566;
    position: absolute;
    inset: 0;
    overflow: hidden;
    user-select: none;
}

.enclos-world { position: absolute; inset: 0; background: center / cover no-repeat; }
.enclos-world > span { position: absolute; display: block; pointer-events: none; }
/* Le décor livré remplace toute la peinture CSS, lumières comprises. */
.enclos-world.painted > span:not(.ew-light) { display: none; }

.ew-sky {
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 78% 16%, rgba(210, 225, 255, 0.14), transparent 70%),
        linear-gradient(180deg, #12120f 0%, #101b3e 28%, #1a3358 42%, #26596a 50%, #2e6a72 53%);
}

.ew-stars {
    inset: 0 0 50% 0;
    background:
        radial-gradient(1.5px 1.5px at 8% 14%, #fff, transparent 60%),
        radial-gradient(1px 1px at 16% 30%, #dfe8ff, transparent 60%),
        radial-gradient(1.5px 1.5px at 27% 9%, #fff, transparent 60%),
        radial-gradient(1px 1px at 34% 22%, #cfe2ff, transparent 60%),
        radial-gradient(2px 2px at 44% 12%, #fff9e0, transparent 60%),
        radial-gradient(1px 1px at 52% 27%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 61% 6%, #e6f0ff, transparent 60%),
        radial-gradient(1px 1px at 67% 34%, #fff, transparent 60%),
        radial-gradient(1px 1px at 88% 8%, #fff, transparent 60%),
        radial-gradient(1.5px 1.5px at 93% 28%, #dfe8ff, transparent 60%),
        radial-gradient(1px 1px at 4% 40%, #fff, transparent 60%),
        radial-gradient(1px 1px at 38% 40%, #fff, transparent 60%);
    animation: starsTwinkle 5s ease-in-out infinite alternate;
}

.ew-moon {
    top: 11%;
    right: 17%;
    width: clamp(70px, 7.5vw, 118px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 64%, rgba(160, 158, 140, 0.35) 0 9%, transparent 10%),
        radial-gradient(circle at 36% 58%, rgba(160, 158, 140, 0.28) 0 6%, transparent 7%),
        radial-gradient(circle at 42% 36%, #fffdf0, #ece6cd 58%, #cfc9b2 100%);
    box-shadow: 0 0 40px 10px rgba(225, 235, 255, 0.28), 0 0 120px 40px rgba(170, 200, 255, 0.12);
}

/* La mer, d'un bout à l'autre de l'horizon : un reflet de lune et des lueurs vivantes. */
.ew-sea {
    left: 0;
    right: 0;
    top: 52%;
    height: 14%;
    background: linear-gradient(180deg, #2f7078 0%, #1d5263 30%, #123549 70%, #22221f 100%);
}
.ew-sea::before {
    content: '';
    position: absolute;
    right: calc(17% - 20px);
    width: clamp(110px, 10vw, 160px);
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 250, 225, 0.55) 0 2px, transparent 2px 7px);
    -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 50% 100% at 50% 0%, #000 30%, transparent 75%);
    animation: seaShimmer 2.6s ease-in-out infinite alternate;
}
.ew-glints {
    position: absolute;
    inset: 20% 0 10% 0;
    background:
        radial-gradient(2px 1px at 6% 40%, #7ff6ff, transparent 70%),
        radial-gradient(3px 1px at 19% 70%, #7ff6ff, transparent 70%),
        radial-gradient(2px 1px at 33% 30%, #9ffcff, transparent 70%),
        radial-gradient(3px 1px at 51% 62%, #7ff6ff, transparent 70%),
        radial-gradient(2px 1px at 64% 38%, #7ff6ff, transparent 70%),
        radial-gradient(3px 1px at 72% 80%, #9ffcff, transparent 70%),
        radial-gradient(2px 1px at 90% 55%, #7ff6ff, transparent 70%);
    animation: glints 3.4s ease-in-out infinite alternate;
}

/* Les ruines de la Cité émergent de l'eau, bleu nuit, éclairées côté lune. */
.ew-ruins { left: 0; right: 0; top: 32%; height: 23%; }
.ew-ruins i {
    position: absolute;
    bottom: 0;
    background: linear-gradient(90deg, #1c1c19 0%, #14293d 70%, #2a4a62 100%);
}
.ew-ruins .r-dome {
    left: 8%;
    width: 16%;
    height: 62%;
    border-radius: 50% 50% 0 0 / 80% 80% 0 0;
    clip-path: polygon(0 100%, 0 42%, 18% 12%, 34% 3%, 48% 0, 60% 4%, 66% 18%, 62% 30%, 70% 26%, 82% 30%, 100% 50%, 100% 100%);
}
.ew-ruins .r-col { width: 1.6%; }
.ew-ruins .r-col-1 { left: 27%; height: 72%; clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); }
.ew-ruins .r-col-2 { left: 31%; height: 48%; clip-path: polygon(0 12%, 40% 0, 100% 20%, 100% 100%, 0 100%); }
.ew-ruins .r-col-3 { left: 58%; height: 38%; clip-path: polygon(0 0, 100% 16%, 100% 100%, 0 100%); }
.ew-ruins .r-arch {
    left: 35%;
    width: 11%;
    height: 44%;
    background: linear-gradient(90deg, #1f1f1c, #1b3348);
    clip-path: polygon(0 100%, 0 20%, 18% 6%, 50% 0, 82% 6%, 100% 20%, 100% 100%, 84% 100%, 84% 38%, 70% 22%, 50% 17%, 30% 22%, 16% 38%, 16% 100%);
}

.ew-cliff { top: 30%; bottom: 24%; width: 17%; background: var(--stone-dark); }
.ew-cliff-left { left: -2%; clip-path: polygon(0 0, 30% 8%, 52% 4%, 70% 26%, 64% 40%, 86% 60%, 100% 100%, 0 100%); }
.ew-cliff-right { right: -2%; clip-path: polygon(100% 10%, 72% 0, 50% 14%, 40% 30%, 22% 44%, 16% 70%, 0 100%, 100% 100%); }

/* La plage où tout se tient : du sable bleui par la nuit, courbé vers l'horizon. */
.ew-terrace {
    left: -8%;
    right: -8%;
    top: 61%;
    bottom: 0;
    border-radius: 50% 50% 0 0 / 12% 12% 0 0;
    background:
        radial-gradient(ellipse 30% 22% at 30% 40%, rgba(0, 0, 0, 0.14), transparent 70%),
        radial-gradient(ellipse 26% 18% at 72% 66%, rgba(0, 0, 0, 0.16), transparent 70%),
        radial-gradient(ellipse 22% 14% at 50% 18%, rgba(255, 255, 255, 0.05), transparent 70%),
        linear-gradient(180deg, #5d6975 0%, #46525e 16%, #333c47 50%, #262623 100%);
}

/* L'écume au bord de l'eau, qui va et vient. */
.ew-foam {
    left: 0;
    right: 0;
    top: 60.4%;
    height: 2%;
    background:
        radial-gradient(ellipse 9% 50% at 12% 50%, rgba(220, 245, 250, 0.3), transparent 70%),
        radial-gradient(ellipse 14% 45% at 33% 55%, rgba(220, 245, 250, 0.22), transparent 70%),
        radial-gradient(ellipse 10% 50% at 58% 45%, rgba(220, 245, 250, 0.28), transparent 70%),
        radial-gradient(ellipse 16% 45% at 80% 55%, rgba(220, 245, 250, 0.22), transparent 70%),
        linear-gradient(180deg, transparent, rgba(200, 235, 245, 0.08) 50%, transparent);
    animation: foam 4.5s ease-in-out infinite alternate;
}
@keyframes foam { from { opacity: 0.4; transform: translateY(0); } to { opacity: 0.85; transform: translateY(3px); } }

/* La lune éclaire la plage de biais, depuis la droite. */
.ew-moonlight {
    left: 45%;
    right: -10%;
    top: 58%;
    bottom: 0;
    background: radial-gradient(ellipse 70% 60% at 70% 20%, rgba(200, 220, 255, 0.1), transparent 70%);
}

/* Ce que la marée laisse sur le sable : rochers, coquillages, algues, et un
   chemin de pierres plates qui mène au Brasier. */
.ew-props { inset: 0; }
.ew-props i { position: absolute; display: block; }
.ew-props .rock {
    background: var(--stone-dark);
    border-radius: 48% 52% 40% 44% / 60% 58% 42% 40%;
    box-shadow: inset 4px 5px 0 rgba(255, 255, 255, 0.06), 0 8px 10px rgba(0, 0, 0, 0.45);
}
.ew-props .r1 { left: 3%; bottom: 20%; width: 7%; height: 7%; }
.ew-props .r2 { left: 8.5%; bottom: 19%; width: 3.2%; height: 3.6%; }
.ew-props .r3 { right: 4%; bottom: 24%; width: 5.5%; height: 6%; }
.ew-props .r4 { right: 27%; bottom: 35%; width: 2.6%; height: 2.4%; }
.ew-props .shell {
    width: 14px;
    height: 11px;
    border-radius: 50% 50% 20% 20%;
    background: repeating-linear-gradient(90deg, #f1dccb 0 2px, #cfae98 2px 4px);
    opacity: 0.8;
}
.ew-props .s1 { left: 29%; bottom: 23%; transform: rotate(-12deg); }
.ew-props .s2 { left: 62%; bottom: 16%; transform: rotate(20deg); }
.ew-props .s3 { right: 12%; bottom: 36%; transform: rotate(-30deg) scale(0.8); }
.ew-props .weed {
    width: 2.2%;
    height: 5%;
    background: linear-gradient(180deg, #2e6b52, #2c2c29);
    clip-path: polygon(0 100%, 12% 40%, 22% 70%, 34% 0, 48% 60%, 60% 20%, 72% 70%, 86% 30%, 100% 100%);
    transform-origin: 50% 100%;
    animation: weedSway 4s ease-in-out infinite alternate;
}
.ew-props .w1 { left: 11%; bottom: 21%; }
.ew-props .w2 { left: 38%; bottom: 13%; height: 4%; animation-delay: -1.5s; }
.ew-props .w3 { right: 8%; bottom: 25%; animation-delay: -2.4s; }
.ew-props .w4 { right: 36%; bottom: 14%; height: 3.6%; animation-delay: -0.8s; }
.ew-props .path {
    left: 44%;
    width: 7%;
    bottom: 12%;
    height: 22%;
    background:
        radial-gradient(ellipse 34% 7% at 40% 92%, #535f70 60%, transparent 64%),
        radial-gradient(ellipse 30% 6% at 62% 72%, #535f70 60%, transparent 64%),
        radial-gradient(ellipse 26% 5% at 44% 52%, #4d586a 60%, transparent 64%),
        radial-gradient(ellipse 22% 4.5% at 58% 34%, #4a5566 60%, transparent 64%),
        radial-gradient(ellipse 18% 4% at 48% 18%, #465063 60%, transparent 64%);
    opacity: 0.85;
}
@keyframes weedSway { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }

/* Des nuages de nuit, qui passent lentement devant les étoiles. */
.ew-clouds { inset: 0 0 55% 0; overflow: hidden; }
.ew-clouds i {
    position: absolute;
    display: block;
    height: 9%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(120, 140, 190, 0.16), transparent 70%);
    animation: cloudDrift 80s linear infinite;
}
.ew-clouds i:nth-child(1) { top: 20%; left: -30%; width: 40%; }
.ew-clouds i:nth-child(2) { top: 44%; left: -50%; width: 55%; height: 12%; animation-duration: 110s; animation-delay: -40s; }
.ew-clouds i:nth-child(3) { top: 64%; left: -30%; width: 34%; animation-duration: 95s; animation-delay: -70s; }
@keyframes cloudDrift { to { transform: translateX(260%); } }

/* Les lumières que les aménagements jettent sur le sable : elles grandissent avec eux. */
.ew-light { border-radius: 50%; opacity: 0; transition: opacity 0.8s ease, transform 0.8s var(--ease-out); }
.ew-firelight {
    left: 31%; width: 30%; top: 56%; height: 32%;
    background: radial-gradient(ellipse, rgba(255, 150, 70, 0.34), transparent 65%);
}
/* Le feu vacille par-dessus sa lueur, sans toucher à l'intensité du niveau. */
.ew-firelight::after {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 190, 110, 0.3), transparent 65%);
    animation: fireFlicker 1.9s ease-in-out infinite alternate;
}
.ew-altarlight { left: 4%; width: 26%; top: 58%; height: 28%; background: radial-gradient(ellipse, rgba(95, 227, 212, 0.26), transparent 65%); }
.ew-poollight { left: 62%; width: 28%; top: 60%; height: 28%; background: radial-gradient(ellipse, rgba(79, 208, 224, 0.26), transparent 65%); }
.enclos[data-brasier-level="0"] .ew-firelight { opacity: 0.35; transform: scale(0.6); }
.enclos[data-brasier-level="1"] .ew-firelight { opacity: 0.6; transform: scale(0.8); }
.enclos[data-brasier-level="2"] .ew-firelight { opacity: 0.8; transform: scale(0.95); }
.enclos[data-brasier-level="3"] .ew-firelight { opacity: 1; transform: scale(1.12); }
.enclos[data-autel-level="1"] .ew-altarlight { opacity: 0.35; }
.enclos[data-autel-level="2"] .ew-altarlight { opacity: 0.65; }
.enclos[data-autel-level="3"] .ew-altarlight { opacity: 1; }
.enclos[data-bassin-level="1"] .ew-poollight { opacity: 0.35; }
.enclos[data-bassin-level="2"] .ew-poollight { opacity: 0.65; }
.enclos[data-bassin-level="3"] .ew-poollight { opacity: 1; }

.ew-ground {
    left: 0; right: 0; bottom: 0; height: 22%;
    background:
        radial-gradient(ellipse 18% 40% at 6% 100%, rgba(13, 13, 10, 0.8), transparent 70%),
        radial-gradient(ellipse 18% 40% at 94% 100%, rgba(13, 13, 10, 0.8), transparent 70%),
        linear-gradient(180deg, transparent, rgba(11, 11, 8, 0.55));
}

@keyframes starsTwinkle { from { opacity: 0.55; } to { opacity: 0.95; } }
@keyframes seaShimmer { from { opacity: 0.45; } to { opacity: 0.9; } }
@keyframes glints { from { opacity: 0.25; } to { opacity: 0.95; } }
@keyframes fireFlicker { from { opacity: 0.35; } to { opacity: 1; } }

/* ---------- 2. Aménagements ----------
   Chacun est un bouton posé dans la scène par son pied. Son dessin a les mêmes
   pièces à tous les niveaux ; `data-level` les montre, les grandit, les allume. */
.enclos-buildings { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.bld {
    position: absolute;
    display: block;
    width: clamp(170px, 15vw, 260px);
    aspect-ratio: 1 / 1.05;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    transform: translateX(-50%);
    transition: transform 0.25s var(--ease-out), filter 0.25s;
}
.bld-bassin { width: clamp(200px, 18vw, 310px); aspect-ratio: 1 / 0.72; }
/* Illustré, le bassin est un carré comme les deux autres : la boîte aplatie
   du dessin CSS le rapetissait. */
.bld-bassin:has(.bld-img) { width: clamp(170px, 15vw, 260px); aspect-ratio: 1 / 1.05; }
.bld:hover { transform: translateX(-50%) translateY(-4px); }
.bld:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

.bld-art { position: absolute; inset: 0; display: block; }
.bld-img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); }
.bld-draw i, .bld-draw > span { position: absolute; display: block; transition: all 0.6s var(--ease-out); }

/* Le nom du niveau, sur une petite plaque au pied. */
.bld-plaque {
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 11px 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(12, 12, 9, 0.72);
    white-space: nowrap;
    pointer-events: none;
    transition: border-color 0.2s, background 0.2s;
}
.bld-plaque b { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.bld:hover .bld-plaque { border-color: var(--line-strong); background: rgba(12, 12, 9, 0.88); }
.bld:hover .bld-plaque b { color: var(--gold-lit); }
.bld-pips { display: inline-flex; gap: 4px; }
.bld-pips i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold-deep); }
.bld-pips i.on { background: var(--gold); border-color: var(--gold-lit); box-shadow: 0 0 6px rgba(201, 171, 69, 0.6); }

/* Le chantier : un nuage de poussière, et le bâtiment qui reparaît. */
.bld.rising .bld-art { animation: bldRise 0.8s var(--ease-out); }
.bld.rising::after {
    content: '';
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: -8%;
    height: 45%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(200, 190, 170, 0.55), transparent 65%);
    animation: dustPuff 0.8s ease-out forwards;
    pointer-events: none;
}
@keyframes bldRise { 0% { transform: scale(0.92) translateY(6px); opacity: 0.4; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }
@keyframes dustPuff { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3) translateY(-12px); } }

/* Pièces communes : l'ombre au sol. */
.bld-draw .p1 { left: 8%; right: 8%; bottom: -2%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%); }

/* --- Le Brasier : un foyer de pierres, puis une vasque, puis une fournaise cornue --- */
.bld-brasier { --ped: 0%; --bowl-w: 64%; --bowl-h: 12%; --flame: 0.45; --coal: 0.55; --rune: 0; --horn: 0; }
.bld-brasier[data-level="1"] { --ped: 22%; --bowl-w: 62%; --bowl-h: 16%; --flame: 0.72; --coal: 1; }
.bld-brasier[data-level="2"] { --ped: 30%; --bowl-w: 68%; --bowl-h: 17%; --flame: 0.95; --coal: 1; --rune: 0.8; }
.bld-brasier[data-level="3"] { --ped: 34%; --bowl-w: 72%; --bowl-h: 18%; --flame: 1.2; --coal: 1; --rune: 1; --horn: 1; }

/* Pied de pierre. */
.bld-brasier .p2 {
    left: 50%; bottom: 2%; width: 30%; height: var(--ped);
    transform: translateX(-50%);
    background: var(--stone);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
/* Vasque — au sol, un simple cercle de pierres. */
.bld-brasier .p3 {
    left: 50%; bottom: calc(2% + var(--ped)); width: var(--bowl-w); height: var(--bowl-h);
    transform: translateX(-50%);
    background: var(--stone);
    clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.bld-brasier[data-level="0"] .p3 { clip-path: none; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #1a1110 40%, #5b6577 42%, #3a4252 70%, #30302d 100%); }
/* Braises au bord. */
.bld-brasier .p4 {
    left: 50%; bottom: calc(2% + var(--ped) + var(--bowl-h) - 3%); width: calc(var(--bowl-w) - 8%); height: 6%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, #ffd27a 0%, #ff7a2c 45%, #7a1d08 100%);
    opacity: var(--coal);
}
.bld-brasier[data-level="0"] .p4 { bottom: 7%; background: radial-gradient(ellipse, #ff9a4a 0%, #a8340f 50%, transparent 80%); }
/* Cornes de la fournaise, piquées de runes. */
.bld-brasier .p5, .bld-brasier .p6 {
    bottom: calc(2% + var(--ped)); width: 12%; height: 46%;
    background: var(--stone);
    border-radius: 60% 60% 20% 20% / 90% 90% 10% 10%;
    opacity: var(--horn);
    transform-origin: 50% 100%;
}
.bld-brasier .p5 { left: 10%; transform: rotate(-16deg) scaleY(var(--horn)); }
.bld-brasier .p6 { right: 10%; transform: rotate(16deg) scaleY(var(--horn)); }
.bld-brasier .p5::after, .bld-brasier .p6::after {
    content: '';
    position: absolute;
    left: 38%; top: 30%; width: 24%; height: 24%;
    border-radius: 50%;
    background: #7ff6ff;
    box-shadow: 0 0 10px #5fe3d4;
}
/* Rune gravée sur la vasque. */
.bld-brasier .p7 {
    left: 50%; bottom: calc(2% + var(--ped) + var(--bowl-h) * 0.4); width: calc(var(--bowl-w) * 0.6); height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #7ff6ff, transparent);
    box-shadow: 0 0 8px #5fe3d4;
    opacity: var(--rune);
}
.bld-flames {
    left: 50%; bottom: calc(2% + var(--ped) + var(--bowl-h) - 2%); width: 60%; height: 52%;
    margin-left: -30%;
    transform-origin: 50% 100%;
    transform: scale(var(--flame));
}
.bld-flames i {
    position: absolute;
    bottom: 0;
    width: 30%;
    height: 70%;
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 82%, #fff4c9 0%, #ffbf5e 26%, #ff6f2b 56%, rgba(255, 70, 20, 0) 74%);
    transform-origin: 50% 100%;
    animation: flame 1.05s ease-in-out infinite alternate;
}
.bld-flames i:nth-child(1) { left: 4%; height: 56%; animation-delay: -0.3s; }
.bld-flames i:nth-child(2) { left: 24%; height: 92%; width: 32%; animation-delay: -0.7s; }
.bld-flames i:nth-child(3) { left: 46%; height: 80%; width: 32%; animation-delay: -0.1s; }
.bld-flames i:nth-child(4) { left: 68%; height: 54%; animation-delay: -0.5s; }
/* Étincelles qui montent, au-delà du premier niveau. */
.bld-embers { left: 50%; bottom: calc(10% + var(--ped) + var(--bowl-h)); width: 50%; height: 60%; margin-left: -25%; opacity: var(--rune); }
.bld-embers i {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffc36b;
    box-shadow: 0 0 6px #ff8a3c;
    animation: ember 2.4s linear infinite;
}
.bld-embers i:nth-child(1) { left: 20%; animation-delay: 0s; }
.bld-embers i:nth-child(2) { left: 45%; animation-delay: -0.8s; }
.bld-embers i:nth-child(3) { left: 62%; animation-delay: -1.5s; }
.bld-embers i:nth-child(4) { left: 80%; animation-delay: -2s; }
.bld-brasier .bld-seat { position: absolute; left: 50%; bottom: calc(2% + var(--ped) + var(--bowl-h) - 1%); width: 0; height: 0; }

@keyframes flame {
    0% { transform: scaleY(0.84) rotate(-3deg); opacity: 0.72; }
    100% { transform: scaleY(1.12) rotate(3deg); opacity: 1; }
}
@keyframes ember {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-90px) translateX(8px) scale(0.4); opacity: 0; }
}

/* --- Le Bassin : à sec, puis l'eau revient, puis la fontaine, puis la source qui luit --- */
.bld-bassin { --rim: 72%; --water: 0; --glow: 0; --fountain: 0; --spout: 0; --coral: 0; }
.bld-bassin[data-level="1"] { --rim: 80%; --water: 1; }
.bld-bassin[data-level="2"] { --rim: 88%; --water: 1; --glow: 0.4; --fountain: 1; }
.bld-bassin[data-level="3"] { --rim: 96%; --water: 1; --glow: 1; --fountain: 1.3; --spout: 1; --coral: 1; }

.bld-bassin .p2 {
    left: 50%; bottom: 6%; width: var(--rim); height: 42%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--stone);
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.45);
}
/* Le fond : du sable fendu, ou de l'eau. */
.bld-bassin .p3 {
    left: 50%; bottom: 12%; width: calc(var(--rim) - 16%); height: 28%;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse 22% 26% at 30% 45%, rgba(0, 0, 0, 0.12), transparent 70%),
        radial-gradient(ellipse 18% 22% at 68% 60%, rgba(0, 0, 0, 0.1), transparent 70%),
        radial-gradient(ellipse at 50% 40%, #8a7c66, #5e5446 70%);
}
/* Au fond du bassin à sec, une seule fêlure qui court. */
.bld-bassin[data-level="0"] .p3::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 20%;
    top: 30%;
    bottom: 32%;
    background: rgba(35, 26, 18, 0.75);
    clip-path: polygon(0 52%, 14% 40%, 26% 58%, 40% 36%, 52% 54%, 66% 30%, 78% 50%, 100% 38%, 100% 44%, 78% 57%, 66% 38%, 52% 61%, 40% 43%, 26% 65%, 14% 47%, 0 59%);
}
.bld-bassin .p4 {
    left: 50%; bottom: 12%; width: calc(var(--rim) - 16%); height: 28%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #6fe6ee 0%, #2d8f9e 45%, #13495a 100%);
    box-shadow: 0 0 calc(24px * var(--glow)) rgba(79, 208, 224, 0.8);
    opacity: var(--water);
}
.bld-bassin[data-level="3"] .p4 { background: radial-gradient(ellipse at 50% 35%, #b8fcff 0%, #4fd0e0 40%, #16606f 100%); }
/* La fontaine au centre, puis son jet. */
.bld-bassin .p5 {
    left: 50%; bottom: 22%; width: 7%; height: 30%;
    transform: translateX(-50%) scaleY(var(--fountain));
    transform-origin: 50% 100%;
    border-radius: 3px 3px 0 0;
    background: var(--stone);
    opacity: min(1, var(--fountain));
}
/* La vasque au sommet de la colonne. */
.bld-bassin .p5::after {
    content: '';
    position: absolute;
    left: -110%;
    right: -110%;
    top: -10%;
    height: 16%;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    background: var(--stone);
    box-shadow: inset 0 3px 0 rgba(160, 245, 255, 0.5);
}
.bld-bassin .p6 {
    left: 50%; bottom: calc(22% + 30% * var(--fountain)); width: 4%; height: 30%;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    border-radius: 3px;
    background: linear-gradient(0deg, rgba(160, 245, 255, 0.85), rgba(210, 252, 255, 0.35) 80%, transparent);
    opacity: var(--spout);
    animation: spout 1.2s ease-in-out infinite alternate;
}
/* La couronne de gouttes qui retombe. */
.bld-bassin .p6::after {
    content: '';
    position: absolute;
    left: -260%;
    right: -260%;
    top: -8%;
    height: 40%;
    background:
        radial-gradient(circle at 10% 90%, rgba(190, 250, 255, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 26% 45%, rgba(190, 250, 255, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 12%, rgba(220, 255, 255, 0.95) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 74% 45%, rgba(190, 250, 255, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 90%, rgba(190, 250, 255, 0.9) 0 2px, transparent 3px);
}
/* Le corail qui pousse au bord de la source. */
.bld-bassin .p7 {
    left: 8%; bottom: 18%; width: 22%; height: 34%;
    opacity: var(--coral);
}
.bld-bassin .p7::before, .bld-bassin .p7::after {
    content: '🪸';
    position: absolute;
    bottom: 0;
    font-size: clamp(22px, 2.2vw, 36px);
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 120, 140, 0.45));
}
.bld-bassin .p7::before { left: 0; }
.bld-bassin .p7::after { left: 48%; font-size: clamp(16px, 1.5vw, 24px); }
.bld-ripples { left: 50%; bottom: 14%; width: 40%; height: 18%; margin-left: -20%; opacity: var(--water); }
.bld-ripples i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(190, 250, 255, 0.6);
    animation: ripple 2.8s ease-out infinite;
}
.bld-ripples i:nth-child(2) { animation-delay: -1.4s; }
.bld-bassin .bld-seat { display: none; }

@keyframes ripple { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes spout { from { transform: translateX(-50%) scaleY(0.9); } to { transform: translateX(-50%) scaleY(1.08); } }

/* --- L'Autel : renversé, relevé, gardé de colonnes, puis couvert d'une arche --- */
.bld-autel { --pillar: 0; --arch: 0; --crystal: 0; --float: 0; --halo: 0; }
.bld-autel[data-level="1"] { --crystal: 0.7; }
.bld-autel[data-level="2"] { --pillar: 1; --crystal: 1; }
.bld-autel[data-level="3"] { --pillar: 1.25; --arch: 1; --crystal: 1.25; --float: 1; --halo: 1; }

/* Le socle, puis la table de l'autel. Au niveau 0, tout est à terre. */
.bld-autel .p2 { left: 50%; bottom: 2%; width: 60%; height: 12%; transform: translateX(-50%); background: var(--stone-dark); border-radius: 3px; }
.bld-autel .p3 {
    left: 50%; bottom: 13%; width: 34%; height: 26%;
    transform: translateX(-50%);
    background: var(--stone);
    border-radius: 3px 3px 0 0;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12);
}
.bld-autel .p3::after {
    content: '';
    position: absolute;
    left: 35%; right: 35%; top: 30%; height: 34%;
    border: 2px solid rgba(127, 246, 255, 0.55);
    border-radius: 50%;
}
.bld-autel[data-level="0"] .p2 { transform: translateX(-50%) rotate(-4deg); }
.bld-autel[data-level="0"] .p3 { height: 17%; width: 30%; transform: translateX(-42%) rotate(-22deg); transform-origin: 20% 100%; }
.bld-autel[data-level="0"] .p3::after { border-color: rgba(127, 246, 255, 0.22); }
/* Le cristal éteint, tombé à côté. */
.bld-autel[data-level="0"] .p7 { left: 76%; bottom: 2%; width: 9%; height: 12%; opacity: 0.55; transform: rotate(68deg) scale(1); filter: grayscale(0.8) brightness(0.7); }
/* Deux colonnes, puis l'arche qui les relie. */
.bld-autel .p4, .bld-autel .p5 {
    bottom: 12%; width: 11%; height: 52%;
    background: var(--stone);
    transform: scaleY(var(--pillar));
    transform-origin: 50% 100%;
    opacity: min(1, var(--pillar));
}
.bld-autel .p4 { left: 12%; }
.bld-autel .p5 { right: 12%; }
.bld-autel .p6 {
    left: 8%; right: 8%; bottom: calc(12% + 52% * var(--pillar) - 2%); height: 18%;
    background: var(--stone);
    clip-path: polygon(0 100%, 0 45%, 20% 12%, 50% 0, 80% 12%, 100% 45%, 100% 100%, 88% 100%, 86% 60%, 70% 36%, 50% 30%, 30% 36%, 14% 60%, 12% 100%);
    opacity: var(--arch);
}
/* Le cristal : posé, puis grand, puis flottant. */
.bld-autel .p7 {
    left: 50%; bottom: calc(39% + 16% * var(--float)); width: 12%; height: 22%;
    margin-left: -6%;
    background: linear-gradient(160deg, #e6ffff 0%, #7ff6ff 35%, #1f9aa8 100%);
    clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%);
    transform: scale(var(--crystal));
    transform-origin: 50% 100%;
    opacity: min(1, var(--crystal));
    filter: drop-shadow(0 0 8px rgba(95, 227, 212, 0.9));
}
.bld-autel[data-level="3"] .p7 { animation: crystalFloat 3s ease-in-out infinite; }
.bld-halo {
    left: 50%; bottom: 42%; width: 44%; height: 44%;
    margin-left: -22%;
    border-radius: 50%;
    border: 1px dashed rgba(127, 246, 255, 0.7);
    opacity: var(--halo);
    animation: haloTurn 14s linear infinite;
}
.bld-autel .bld-seat { display: none; }

@keyframes crystalFloat { 0%, 100% { transform: scale(var(--crystal)) translateY(0); } 50% { transform: scale(var(--crystal)) translateY(-8px); } }
@keyframes haloTurn { to { transform: rotate(360deg); } }

/* ---------- 3. Les bêtes ----------
   La zone où elles vivent : la plage, devant les aménagements. Chaque bête est
   un point sans taille, que `transform` place ; son corps se pose au-dessus. */
.enclos-pen { position: absolute; left: 7%; right: 7%; top: 71%; bottom: 11%; z-index: 3; }
.enclos-pen.empty::after {
    content: 'La Maison attend son premier familier : il vous rejoindra au premier étage de la Baie.';
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    font-family: var(--font-lore);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-soft);
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.pen-fam {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    will-change: transform;
}
.pen-face { position: absolute; left: 0; bottom: 0; display: block; transform: translateX(-50%); }
.pen-fam.face-right .pen-face { transform: translateX(-50%) scaleX(-1); }
.pen-body { display: block; transform-origin: 50% 100%; animation: penIdle 2.6s ease-in-out infinite; }
.pen-emoji { display: block; font-size: clamp(40px, 3.6vw, 58px); line-height: 1; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.65)); }
.pen-img { display: block; height: clamp(60px, 5.6vw, 92px); width: auto; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.65)); }
.pen-fam[data-rarity="legendary"] .pen-emoji, .pen-fam[data-rarity="legendary"] .pen-img { filter: drop-shadow(0 0 10px rgba(240, 180, 41, 0.75)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6)); }
.pen-fam[data-rarity="mythic"] .pen-emoji, .pen-fam[data-rarity="mythic"] .pen-img { filter: drop-shadow(0 0 12px rgba(255, 59, 92, 0.8)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.6)); }

.pen-shadow {
    position: absolute;
    left: -24px;
    bottom: -6px;
    width: 48px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
}

/* Le compagnon : un anneau d'or au sol et une étoile au-dessus de lui. */
.pen-crest {
    position: absolute;
    left: -8px;
    bottom: clamp(52px, 4.8vw, 78px);
    width: 16px;
    text-align: center;
    color: var(--gold-lit);
    font-size: 14px;
    text-shadow: 0 0 8px var(--gold);
    opacity: 0;
    transition: opacity 0.3s;
}
.pen-fam.active .pen-crest { opacity: 1; animation: crestBob 2s ease-in-out infinite; }
.pen-fam.active .pen-shadow { box-shadow: 0 0 0 2px rgba(243, 212, 148, 0.75), 0 0 14px rgba(201, 171, 69, 0.5); }

.pen-name {
    position: absolute;
    left: 0;
    bottom: clamp(70px, 6.4vw, 104px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 10px 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(12, 12, 9, 0.85);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.pen-name small { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0; color: var(--text-dim); }
.pen-fam:hover .pen-name, .pen-fam:focus-visible .pen-name { opacity: 1; }

.pen-fam.walking .pen-body { animation: penWalk 0.38s ease-in-out infinite; }
.pen-fam.hop .pen-body { animation: penHop 0.52s cubic-bezier(0.3, 0.7, 0.4, 1) var(--hops, 1); }
.pen-fam.hop .pen-shadow { animation: shadowHop 0.52s ease-in-out var(--hops, 1); }
.pen-fam.newborn .pen-face { animation: bornPop 0.9s var(--ease-out); }
.pen-fam.newborn::after {
    content: '';
    position: absolute;
    left: -50px;
    bottom: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 244, 200, 0.85), transparent 65%);
    animation: bornFlash 1.2s ease-out forwards;
    pointer-events: none;
}

@keyframes penIdle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97); } }
@keyframes penWalk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes penHop {
    0% { transform: translateY(0) scale(1.08, 0.9); }
    40% { transform: translateY(-34px) scale(0.94, 1.08); }
    75% { transform: translateY(0) scale(1.1, 0.88); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes shadowHop { 40% { transform: scale(0.55); opacity: 0.5; } }
@keyframes crestBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bornPop { 0% { transform: translateX(-50%) scale(0.2); } 60% { transform: translateX(-50%) scale(1.25); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes bornFlash { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------- 4. Clôture ----------
   C'est elle qui fait de la crique un enclos : des piquets, deux traverses,
   et une lanterne de nacre à chaque bout. */
.enclos-fence {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12%;
    z-index: 4;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(8.33% - 12px), #4e341d calc(8.33% - 12px) calc(8.33% - 2px), #2c1c0e calc(8.33% - 2px) 8.33%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0 8%, #000 8%);
    mask-image: linear-gradient(180deg, transparent 0 8%, #000 8%);
}
.fence-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 22%;
    height: 9px;
    background: var(--wood);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}
.fence-rail.low { top: 56%; }
.fence-lantern {
    position: absolute;
    top: -34%;
    width: 16px;
    height: 22px;
    border-radius: 5px 5px 7px 7px;
    background: radial-gradient(ellipse at 50% 55%, #d6fdff, #5fe3d4 55%, #1f7f78);
    box-shadow: 0 0 18px 6px rgba(95, 227, 212, 0.45);
    animation: lantern 3.2s ease-in-out infinite alternate;
}
.fence-lantern.l1 { left: calc(16.66% - 8px); }
.fence-lantern.l2 { left: calc(83.33% - 8px); animation-delay: -1.6s; }
@keyframes lantern { from { opacity: 0.7; } to { opacity: 1; } }

/* ---------- 5. Enseigne, bourse, compagnon, carnet ---------- */
/* Accroché dans la carte (ses cqi sont ceux de la carte) : jamais à cheval
   sur la bande floue. Il ne prend pas les clics : on marche dessous. */
.enclos-sign {
    position: absolute;
    top: 0.4cqi;
    left: 1.4cqi;
    z-index: 1600;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-1.5deg);
    transform-origin: 50% 0;
    animation: signSway 6s ease-in-out infinite;
}
.sign-ropes {
    width: 72%;
    height: 18px;
    border-left: 2px solid #8c7350;
    border-right: 2px solid #8c7350;
}
.sign-plank {
    padding: 12px 30px 14px;
    border: 2px solid #22160b;
    border-radius: 6px;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 7px),
        linear-gradient(180deg, #6e4c2d 0%, #4f361f 60%, #3a2714 100%);
    box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.sign-kicker { margin: 0 0 2px; font-family: var(--font-lore); font-style: italic; font-size: 0.95rem; color: #e8d6b4; }
.sign-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #f6dca0;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 230, 180, 0.15);
}
@keyframes signSway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(0.6deg); } }

.enclos-purse {
    position: absolute;
    top: calc(var(--bar-h) + 20px);
    right: 28px;
    z-index: 20;
    width: 280px;
}
.fam-nacre-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; color: #7fe3ef; font-size: 15px; line-height: 1; }
.fam-nacre-ico img { width: 100%; height: 100%; object-fit: contain; }

.enclos-companion {
    --fam: var(--rune);
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 340px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(12, 12, 9, 0.78);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s;
}
.enclos-companion:hover { border-color: var(--line-strong); }
.plate-art {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fam) 40%, transparent), rgba(0, 0, 0, 0.4) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fam) 55%, transparent);
}
.plate-art-emoji { font-size: 32px; line-height: 1; }
.plate-art-img { width: 90%; height: 90%; object-fit: contain; }
.enclos-companion.empty .plate-art { filter: grayscale(1) brightness(0.5); }
.plate-text { display: flex; flex-direction: column; min-width: 0; }
.plate-text small { font-family: var(--font-display); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.plate-text b { font-family: var(--font-display); font-size: 0.92rem; color: var(--text); }
.plate-passive { font-size: 0.74rem; color: var(--text-soft); line-height: 1.3; }

.enclos-carnet {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 20;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(12, 12, 9, 0.78);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}
.carnet-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-display);
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}
.carnet-title b { font-size: 0.9rem; letter-spacing: 0.04em; color: var(--text); }
.carnet-row { display: flex; gap: 6px; }
.medal {
    --rar: transparent;
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, rgba(40, 60, 80, 0.8), rgba(9, 9, 6, 0.9) 72%);
    box-shadow: inset 0 0 0 1.5px var(--rar), 0 0 10px color-mix(in srgb, var(--rar) 40%, transparent);
    cursor: pointer;
    transition: transform 0.18s var(--ease-out);
}
.medal:hover { transform: translateY(-3px); }
.medal.active { box-shadow: inset 0 0 0 2px var(--gold-lit), 0 0 14px rgba(201, 171, 69, 0.55); }
.medal-art { display: grid; place-items: center; }
.medal-art-emoji { font-size: 24px; line-height: 1; }
.medal-art-img { width: 34px; height: 34px; object-fit: contain; }
.medal.unknown { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.medal.unknown .medal-art { filter: brightness(0) drop-shadow(0 0 1px rgba(160, 175, 210, 0.6)); opacity: 0.75; }
.medal-level {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 9px;
    background: #131310;
    border: 1px solid var(--rar);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 15px;
    color: var(--text);
    text-align: center;
}

/* ---------- 6. Fiches ----------
   Elles s'ouvrent à côté de ce qu'elles décrivent, et leur flèche le montre. */
.enclos-card {
    --arrow: 50%;
    position: absolute;
    z-index: 30;
    width: 330px;
    padding: 18px 18px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31, 31, 28, 0.97), rgba(15, 15, 12, 0.98));
    box-shadow: var(--lift);
    text-align: center;
    animation: popIn 0.18s var(--ease-out);
}
.enclos-card::after {
    content: '';
    position: absolute;
    left: calc(var(--arrow) - 7px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #151512;
    border: 1px solid var(--line-strong);
}
.enclos-card[data-side="above"]::after { bottom: -8px; border-top: 0; border-left: 0; }
.enclos-card[data-side="below"]::after { top: -8px; border-bottom: 0; border-right: 0; background: #20201d; }
.enclos-card[data-side="right"]::after,
.enclos-card[data-side="left"]::after { top: calc(var(--arrow-y, 50%) - 7px); }
.enclos-card[data-side="right"]::after { left: -8px; border-top: 0; border-right: 0; }
.enclos-card[data-side="left"]::after { left: auto; right: -8px; border-bottom: 0; border-left: 0; }

.card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
}
.card-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.card-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card-kicker { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.card-title { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 0.04em; color: var(--gold-lit); }
.card-lore { margin: 10px 0 0; font-family: var(--font-lore); font-style: italic; font-size: 0.98rem; line-height: 1.35; color: var(--text-soft); }
.card-effect { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--text); }
.card-next {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px dashed rgba(127, 246, 255, 0.3);
    border-radius: 6px;
    background: rgba(79, 208, 224, 0.05);
}
.card-next small { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7fe3ef; }
.card-next span { font-size: 0.84rem; color: var(--text); }
.card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; }
.card-note { display: block; margin-top: 6px; font-size: 0.74rem; color: var(--text-dim); }
.card-done { margin: 12px 0 0; font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verdant); }

.card-portrait {
    --fam: var(--rune);
    --rar: var(--common);
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin: 10px auto 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--fam) 36%, transparent), rgba(0, 0, 0, 0.4) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 55%, transparent);
}
.card-portrait.unknown .card-art { filter: brightness(0) drop-shadow(0 0 1px rgba(160, 175, 210, 0.6)); }
.card-art { display: grid; place-items: center; }
.card-art-emoji { font-size: 62px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.card-art-img { width: 96px; height: 96px; object-fit: contain; }
.card-xp { position: relative; display: block; height: 5px; margin: 10px 24px 0; border-radius: 3px; background: rgba(0, 0, 0, 0.55); overflow: hidden; }
.card-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--fam) 60%, #000), var(--fam)); }
.fam-chip {
    --fam: var(--rune);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 7px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fam) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--fam) 45%, transparent);
    color: color-mix(in srgb, var(--fam) 70%, #fff);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.card-eggs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.card-eggs > small { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.card-eggs.empty p { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-dim); }
.egg-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.egg-pick {
    display: grid;
    place-items: center;
    width: 40px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.egg-pick.selected { border-color: var(--gold); background: rgba(201, 171, 69, 0.1); }
.egg-name { margin: 8px 0 0; font-size: 0.84rem; }

/* Un œuf : sa coquille prend la teinte de sa rareté, avec deux taches et un reflet. */
.fam-egg, .seat-egg {
    --rar: var(--common);
    position: relative;
    display: block;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.8), transparent 20%),
        radial-gradient(circle at 64% 56%, color-mix(in srgb, var(--rar) 55%, #000) 0 3px, transparent 4px),
        radial-gradient(circle at 38% 72%, color-mix(in srgb, var(--rar) 55%, #000) 0 2px, transparent 3px),
        linear-gradient(160deg, color-mix(in srgb, var(--rar) 32%, #f6efdf), color-mix(in srgb, var(--rar) 78%, #171714));
    box-shadow: inset -5px -7px 12px rgba(0, 0, 0, 0.35), 0 0 14px color-mix(in srgb, var(--rar) 45%, transparent);
}
.fam-egg[data-rarity="legendary"], .fam-egg[data-rarity="mythic"],
.seat-egg[data-rarity="legendary"], .seat-egg[data-rarity="mythic"] {
    box-shadow: inset -5px -7px 12px rgba(0, 0, 0, 0.35), 0 0 22px color-mix(in srgb, var(--rar) 75%, transparent);
}
.fam-egg { width: 24px; height: 31px; }

/* ---------- 7. Éclosion et dévoilement ----------
   L'œuf monte sur les braises, tremble, se fend ; un éclair traverse la scène,
   et le familier paraît par-dessus. */
.seat-egg {
    position: absolute;
    left: -24px;
    bottom: 0;
    width: 48px;
    height: 62px;
    opacity: 0;
    transform: translateY(30px) scale(0.5);
    transition: transform 0.6s var(--ease-out), opacity 0.4s ease;
    z-index: 2;
}
.bld-brasier.egg-up .seat-egg { opacity: 1; transform: translateY(-6px) scale(1); }
.bld-brasier.hatching .bld-flames { transform: scale(calc(var(--flame) * 1.45)); transition: transform 1.2s var(--ease-out); }
.bld-brasier.shaking .seat-egg { animation: eggShake 0.11s ease-in-out infinite alternate; }
.bld-brasier.cracking .seat-egg::after {
    content: '';
    position: absolute;
    inset: 6% 18% 34%;
    background: #1d0d05;
    clip-path: polygon(50% 0, 58% 20%, 44% 38%, 60% 56%, 46% 78%, 53% 100%, 49% 100%, 42% 78%, 55% 56%, 39% 38%, 53% 20%, 46% 0);
}
.bld-brasier.burst .seat-egg { opacity: 0; transform: translateY(-10px) scale(1.5); animation: none; }
.bld.hatching { cursor: pointer; }
@keyframes eggShake {
    0% { transform: translateY(-6px) rotate(-8deg); }
    100% { transform: translateY(-8px) rotate(8deg); }
}

.enclos.flash::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 35;
    background: radial-gradient(circle at 45% 55%, rgba(255, 251, 232, 0.95), rgba(255, 220, 150, 0.4) 35%, transparent 70%);
    pointer-events: none;
    animation: sceneFlash 0.7s ease-out forwards;
}
@keyframes sceneFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

.enclos-reveal {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
    background: radial-gradient(ellipse at 50% 46%, rgba(18, 18, 15, 0.6), rgba(7, 7, 4, 0.9));
    animation: fadeIn 0.3s ease;
}
.reveal-card {
    --rar: var(--common);
    --fam: var(--rune);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(380px, 100%);
    text-align: center;
}
.reveal-rays {
    position: absolute;
    top: -80px;
    left: 50%;
    width: 380px;
    height: 380px;
    margin-left: -190px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rar) 40%, transparent) 0 8deg, transparent 8deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
    mask-image: radial-gradient(circle, #000 20%, transparent 68%);
    animation: raysTurn 18s linear infinite;
    pointer-events: none;
}
.reveal-aura {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 220px;
    height: 220px;
    margin-left: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--rar) 55%, transparent), transparent 66%);
    animation: breathe 2.4s ease-in-out infinite;
    pointer-events: none;
}
.reveal-art { position: relative; display: grid; place-items: center; width: 170px; height: 170px; animation: revealPop 0.6s var(--ease-out); }
.reveal-art-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7)); }
.reveal-art-emoji { font-size: 104px; line-height: 1; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7)); }
.reveal-card .card-kicker { position: relative; color: var(--rar); }
.reveal-title { position: relative; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.06em; color: var(--gold-lit); }
.reveal-name { position: relative; color: var(--text-soft); font-size: 0.95rem; }
.reveal-detail { position: relative; margin: 4px 0 12px; color: var(--text); font-size: 0.92rem; line-height: 1.45; }
@keyframes revealPop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes raysTurn { to { transform: rotate(360deg); } }

/* ---------- 8. Tutoriel, éveil, repères ---------- */
.enclos-tuto {
    position: absolute;
    left: 50%;
    bottom: 96px;
    z-index: 50;
    width: min(420px, calc(100% - 32px));
    transform: translateX(-50%);
}
.tuto-card {
    padding: 18px 20px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31, 31, 28, 0.97), rgba(15, 15, 12, 0.98));
    box-shadow: var(--lift);
    animation: popIn 0.22s var(--ease-out);
}
.tuto-card h3 { margin: 6px 0 8px; font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-lit); letter-spacing: 0.05em; }
.tuto-card p { margin: 0; color: var(--text-soft); line-height: 1.55; }
.tuto-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.tuto-dots { display: inline-flex; gap: 6px; }
.tuto-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-500); }
.tuto-dots i.on { background: var(--gold); }

/* Ce dont parle le tutoriel s'entoure d'un filet d'or qui respire. */
.coach-focus::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px dashed rgba(243, 212, 148, 0.85);
    border-radius: 16px;
    box-shadow: 0 0 24px rgba(201, 171, 69, 0.35);
    pointer-events: none;
    animation: coachPulse 1.6s ease-in-out infinite;
}
.enclos-buildings.coach-focus::before { inset: 26% 6% 26% 6%; }
@keyframes coachPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.fam-unlock-box { width: min(520px, 100%); }
.fam-unlock-box .dialog-actions .btn { max-width: 240px; white-space: nowrap; }
.fam-unlock-art {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, rgba(79, 208, 224, 0.35), transparent 65%);
    box-shadow: inset 0 0 0 1px rgba(79, 208, 224, 0.4);
}
.fam-unlock-portrait { display: grid; place-items: center; }
.fam-unlock-portrait-img { width: 96px; height: 96px; object-fit: contain; }
.fam-unlock-portrait-emoji { font-size: 64px; line-height: 1; animation: famFloat 3.2s ease-in-out infinite; }
@keyframes famFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* L'onglet de la barre de jeu, grisé tant que Crocabulia tient. */
.app-tab-glyph { font-size: 1.3rem; line-height: 1; }
.app-tab.locked { opacity: 0.42; cursor: not-allowed; }
.app-tab.locked:hover { color: var(--text-dim); }
.app-tab.locked:hover::before { opacity: 0; }
.app-tab.locked .app-tab-ico { position: relative; }
.app-tab.locked .app-tab-ico::after { content: '🔒'; position: absolute; right: -8px; bottom: -4px; font-size: 10px; }

/* ---------- 9. La Maison : le Havre-Sac Champs ----------
   La carte de Dofus, posée à ses proportions (1280 × 880) au centre de
   l'écran, sur le noir qui entoure tout Havre-Sac. Aménagements et promeneurs
   s'y placent en pourcentage de la carte ; une case fait 86 / 1280 de sa
   largeur, d'où les tailles en cqi (centièmes de la largeur de la carte). */
.enclos.maison { background: #050504; }
.maison-map {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, calc((100dvh - var(--bar-h)) * 1.4545));
    aspect-ratio: 1280 / 880;
    transform: translate(-50%, -50%);
    background: center / 100% 100% no-repeat;
    container-type: inline-size;
}
.maison-map .enclos-buildings,
.maison-map .enclos-pen { position: absolute; inset: 0; }
/* Ni l'une ni l'autre couche ne forme de pile à part : aménagements et
   promeneurs se trient ensemble par leur profondeur (z-index = leur hauteur
   sur la carte), et passent les uns derrière les autres. */
.maison-map .enclos-buildings,
.maison-map .enclos-pen { z-index: auto; }
.maison-map .enclos-pen { cursor: pointer; }

/* Aménagements et meubles se posent par leur pied sur leur case, à leur
   taille native de carte (largeur posée en ligne par familiars.js). */
.maison-map .bld,
.maison-map .bld.bld-bassin,
.maison-map .meuble {
    position: absolute;
    /* Le calque des aménagements laisse passer la souris : chaque objet la reprend. */
    pointer-events: auto;
    aspect-ratio: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: none;
}
.maison-map .bld .bld-art { position: static; }
.maison-map .bld-img, .maison-map .meuble-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)); }
.maison-map .bld:hover .bld-img, .maison-map .meuble:hover .meuble-img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)) brightness(1.12); }
.maison-map .bld-plaque { top: 100%; }
.maison-map .meuble .bld-plaque { opacity: 0; transition: opacity 0.2s; }
.maison-map .meuble:hover .bld-plaque, .maison-map .meuble:focus-visible .bld-plaque { opacity: 1; }

/* Pas encore gagné : le meuble attend à sa place, éteint, avec sa plaque
   qui dit ce qui l'allumera. */
.maison-map .meuble.locked .meuble-img { filter: grayscale(0.85) brightness(0.6) opacity(0.8) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.maison-map .meuble.locked .bld-plaque { opacity: 1; }
.maison-map .meuble .bld-plaque small { font-size: 0.68rem; color: var(--text-dim); }

/* Le voile du Zaap : il palpite, en opacité et en échelle seulement. */
.maison-map .zaap-devant { position: absolute; display: block; pointer-events: none; }
.maison-map .zaap-voile { position: absolute; display: block; pointer-events: none; transform-origin: 50% 60%; animation: zaapVoile 3.2s ease-in-out infinite; }
@keyframes zaapVoile { 0%, 100% { opacity: 0.72; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .maison-map .zaap-voile { animation: none; opacity: 0.9; } }


/* La barrière de l'enclos : des tronçons posés par familiars.js, qui se
   trient avec les promeneurs et ne prennent aucun clic. */
.maison-map .barriere { position: absolute; display: block; pointer-events: none; }

/* Le Zaap, le bandit manchot et le coffre sont dans le décor : une zone
   cliquable par-dessus, et leur plaque. Elle se montre au survol, sauf celle
   du bandit quand un œuf attend. */
.maison-map .repere {
    position: absolute;
    pointer-events: auto;
    z-index: 1500;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
}
.maison-map .repere:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.maison-map .repere .bld-plaque { top: auto; bottom: calc(100% + 4px); opacity: 0; transition: opacity 0.2s; }
.maison-map .repere:hover .bld-plaque,
.maison-map .repere:focus-visible .bld-plaque,
.maison-map .repere.pret .bld-plaque { opacity: 1; }
.maison-map .repere-zaap .bld-plaque { bottom: auto; top: 62%; }
.maison-map .repere.pret .bld-plaque { border-color: var(--lime); }
.maison-map .repere .bld-plaque small { font-size: 0.68rem; color: var(--text-dim); }
.maison-map .repere.pret .bld-plaque small { color: var(--lime); }

/* Les promeneurs à l'échelle de la carte : un familier tient dans sa case. */
.maison-map .pen-img { height: 2.5cqi; }
.maison-map .pen-emoji { font-size: 1.8cqi; }
.maison-map .pen-shadow { left: -1cqi; width: 2cqi; height: 0.6cqi; bottom: -0.3cqi; }
.maison-map .enclos-pen.empty::after { top: auto; bottom: 6%; }

/* Goultard, chez lui : ses bandes de Dofus (tools/dofus-heros.py), une par
   allure et par direction, jouées par paliers ; la dernière image est
   l'arrêt. Taille, ancre et bande sont posées par familiars.js
   (js/config/goultard.js) ; « miroir » retourne pour les directions 3, 4, 7. */
.maison-hero { pointer-events: none; }
.maison-hero-sprite { position: absolute; display: block; }
/* Un calque (la bande entière, ou le corps et ce qu'il porte) : tous jouent
   au même pas, la dernière image étant l'arrêt. */
.maison-hero-sprite .gc {
    position: absolute;
    display: block;
    background: var(--bande) 100% 0 / calc(var(--cadres) * 100%) 100% no-repeat;
}
.maison-hero.walking .maison-hero-sprite .gc { animation: goultardMarche var(--duree) steps(var(--images)) infinite; }
.maison-hero.miroir .maison-hero-sprite { transform: scaleX(-1); }
.maison-hero .pen-shadow { left: -2.2cqi; width: 4.4cqi; height: 1.3cqi; bottom: -0.65cqi; }
@keyframes goultardMarche { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@media (prefers-reduced-motion: reduce) { .maison-hero.walking .maison-hero-sprite .gc { animation: none; } }

/* Un familier animé (js/ui/familier-anime.js) : son vrai modèle de Dofus,
   une bande d'images jouée par paliers. Il s'ancre par ses pattes sur le
   point (0, 0) de son parent ; « miroir » pour les directions 3, 4 et 7. */
.fam-anime {
    position: absolute;
    display: block;
    pointer-events: none;
    background: var(--bande) 0 0 / calc(var(--images) * 100%) 100% no-repeat;
    animation: famAnime var(--duree) steps(var(--images)) infinite;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.fam-anime.miroir { transform: scaleX(-1); }
@keyframes famAnime { to { background-position-x: calc(100% * var(--images) / (var(--images) - 1)); } }
@media (prefers-reduced-motion: reduce) { .fam-anime { animation: none; } }

/* Le familier compagnon, fixé à Goultard comme un familier équipé dans
   Dofus (js/ui/promenade.js) : il vit dans l'élément de Goultard, à un poste
   qui suit sa direction, et marche à son pas. Sa hauteur (`--haut`) suit
   celle de Goultard. Il ne se clique que dans la Maison, où il ouvre sa fiche. */
.maison-hero-sprite { z-index: 1; }
.pen-fam.compagnon { pointer-events: none; transition: transform 0.18s ease-out; }
.maison-map .pen-fam.compagnon { pointer-events: auto; }
.pen-fam.compagnon .pen-img { height: var(--haut); }
.pen-fam.compagnon .pen-emoji { font-size: calc(var(--haut) * 0.7); }
.pen-fam.compagnon .pen-shadow {
    left: calc(var(--haut) * -0.4);
    width: calc(var(--haut) * 0.8);
    height: calc(var(--haut) * 0.22);
    bottom: calc(var(--haut) * -0.11);
}
.pen-fam.compagnon .pen-name { bottom: calc(var(--haut) * 1.15); }
/* Son modèle de Dofus peint déjà son ombre : on n'en ajoute pas une. Sa
   bande porte sa direction : le retournement des illustrations ne s'y
   applique pas. */
.pen-fam.modele > .pen-shadow { display: none; }
.pen-fam.modele.face-right .pen-face { transform: translateX(-50%); }
.pen-modele { position: absolute; left: 0; bottom: 0; width: 0; height: 0; display: block; }
.compagnon-modele { position: absolute; left: 0; top: 0; width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
    .ew-stars, .ew-sea::before, .ew-glints, .ew-firelight::after, .bld-flames i, .bld-embers i, .bld-ripples i,
    .bld-autel .p7, .bld-halo, .bld-bassin .p6, .pen-body, .pen-crest, .fence-lantern, .enclos-sign,
    .ew-foam, .ew-props .weed, .ew-clouds i,
    .reveal-rays, .reveal-aura, .reveal-art, .fam-unlock-portrait-emoji { animation: none !important; }
}

/* ---------- 10. Les fiches du hub : coffre et pupitre ---------- */
.enclos-card[data-kind="coffre"] { width: 380px; }
.coffre-part { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); text-align: left; }
.coffre-part > small { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.coffre-grille {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-top: 8px;
    max-height: 132px;
    overflow-y: auto;
}
.coffre-objet {
    aspect-ratio: 1;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
    border-radius: 5px;
    background: var(--well);
    cursor: pointer;
}
.coffre-objet:hover, .coffre-objet:focus-visible { border-color: var(--rar); background: color-mix(in srgb, var(--rar) 14%, var(--well)); }
.coffre-art { display: grid; place-items: center; width: 100%; height: 100%; }
.coffre-img { max-width: 100%; max-height: 100%; }
.coffre-emoji { font-size: 0.9rem; }
.coffre-vide { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); }

.pupitre-ligne { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pupitre-ligne > header { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pupitre-ligne > header b { font-family: var(--font-display); font-size: 0.95rem; color: var(--text); }
.pupitre-ligne .card-effect { margin: 4px 0 0; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 980px) {
    .enclos-companion { display: none; }
    .medal { width: 34px; height: 34px; }
    .medal-art-emoji { font-size: 19px; }
    .carnet-row { gap: 4px; }
    .sign-title { font-size: 1.4rem; }
}
@media (max-width: 640px) {
    .enclos-carnet { left: 12px; right: 12px; transform: none; overflow-x: auto; border-radius: 14px; }
    .enclos-card[data-kind="coffre"] { width: min(380px, calc(100% - 24px)); }
    .coffre-grille { grid-template-columns: repeat(6, 1fr); }
    .enclos-purse { top: calc(var(--bar-h) + 90px); right: 12px; }
    .enclos-card { width: min(330px, calc(100% - 24px)); }
}

/* L'établi : une ligne par recette, son coût, et « Fabriquer ». */
.recettes { display: flex; flex-direction: column; gap: 6px; }

.recette {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    background: var(--well);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}
.recette-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.recette-info b { font-family: var(--font-display); font-size: 0.8rem; }
.recette-cout { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; }
.recette .mat-cost { display: inline-flex; align-items: center; gap: 3px; color: var(--text-soft); }
.recette .mat-cost.missing { color: #d0707b; }
.recette .card-btn { margin: 0; padding: 5px 10px; font-size: 0.72rem; }

/* Surbrillance (js/ui/surbrillance.js) : meubles, poulailler et repères du
   décor se cernent de lime, et chacun montre sa plaque. */
body.surbrillance .maison-map :is(.meuble-img, .bld-img) { filter: drop-shadow(0 0 0.1cqi #fff) drop-shadow(0 0 0.1cqi #fff) drop-shadow(0 0 0.5cqi var(--lime)); }
body.surbrillance .maison-map .repere { outline: 2px dashed color-mix(in srgb, var(--lime) 75%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--lime) 8%, transparent); }
body.surbrillance .maison-map :is(.repere, .meuble, .bld) .bld-plaque { opacity: 1; transition: none; }

/* Autour de la carte, la même carte floue et assombrie : l'écran n'a plus de
   bandes noires. Un filtre fixe, jamais animé. */
.enclos.maison::before {
    content: '';
    position: absolute;
    inset: -60px;
    z-index: 0;
    background: var(--fond) center / cover no-repeat;
    filter: blur(26px) brightness(0.5) saturate(1.1);
    pointer-events: none;
}
.enclos.maison .maison-map { box-shadow: 0 0 60px 20px rgba(0, 0, 0, 0.45); }

/* ---------- L'éclosion groupée ----------
   Les œufs montent ensemble, en couronne au-dessus des braises (--gx, --gy),
   tremblent chacun à leur rythme (--i), et éclatent en gerbe. */
.seat-egg.groupe { width: 34px; height: 44px; left: -17px; z-index: calc(2 + var(--i)); }
.bld-brasier.groupee.egg-up .seat-egg.groupe {
    transform: translate(var(--gx), calc(var(--gy) - 14px)) scale(1);
    transition-delay: calc(var(--i) * 70ms);
}
.bld-brasier.groupee.shaking .seat-egg.groupe { animation: eggShakeGroupe 0.13s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -40ms); }
.bld-brasier.groupee.burst .seat-egg.groupe {
    opacity: 0;
    transform: translate(calc(var(--gx) * 2.4), calc(var(--gy) * 2.4 - 40px)) scale(1.6);
    animation: none;
    transition-delay: 0s;
}
@keyframes eggShakeGroupe {
    0% { transform: translate(var(--gx), calc(var(--gy) - 14px)) rotate(-9deg); }
    100% { transform: translate(var(--gx), calc(var(--gy) - 17px)) rotate(9deg); }
}

/* La bulle de récompense : une tuile par familier, qui paraît l'une après l'autre. */
.reveal-card.groupe { width: min(620px, 100%); }
.groupe-tuiles {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    width: 100%;
    max-height: min(52vh, 420px);
    margin: 0 0 12px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.groupe-tuile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rar) 22%, transparent), rgba(14, 13, 11, 0.9) 70%);
    animation: tuilePop 0.45s var(--ease-out) both;
    animation-delay: calc(var(--i) * 90ms);
}
.groupe-tuile b { font-size: 0.8rem; color: var(--text); }
.groupe-tuile small { font-size: 0.66rem; color: var(--rar); }
.groupe-issue { font-size: 0.68rem; color: var(--text-soft); }
.groupe-tuile.outcome-new .groupe-issue { color: var(--lime); font-weight: 700; }
.groupe-tuile.outcome-upgrade .groupe-issue { color: var(--gold-lit); }
.groupe-art { display: grid; place-items: center; width: 64px; height: 64px; }
.groupe-art-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.groupe-art-emoji { font-size: 40px; line-height: 1; }
.eclore-tout { margin-top: 6px; }
@keyframes tuilePop { 0% { opacity: 0; transform: translateY(10px) scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .groupe-tuile, .bld-brasier.groupee.shaking .seat-egg.groupe { animation: none; }
}