@import url("../../../../../global/ui/elements/numberbox.css");
@import url("../../../../../global/ui/elements/dropzone.css");

:root {
    --fam-wall: #fdf3e0;          /* Hauswand (creme) */
    --fam-frame: #8d6e63;         /* Mauer-/Etagenlinien (braun) */
    --fam-roof: #c0392b;          /* Dachfarbe (rot) */
}

body {
    overflow: hidden;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--stage-height);
    padding: clamp(10px, 3vh, 30px) 0 10px 0;
    box-sizing: border-box;
    background: white;
    gap: clamp(14px, 3vh, 34px);
}

/* ===== Das Haus ===== */
.fam-house {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    transition: transform 0.3s ease;
}

/* Dach als skalierbares Dreieck (SVG → echter, gleichmäßiger Rahmen auf allen
   Kanten, genau wie die Wände des Rechtecks). non-scaling-stroke hält die
   Rahmenstärke konstant, obwohl preserveAspectRatio="none" die Breite streckt.
   overflow sichtbar, damit die zentrierte Strichbreite nicht beschnitten wird. */
.fam-roof {
    display: block;
    width: 100%;
    height: clamp(34px, 7vh, 80px);
    overflow: visible;
    /* Kein negativer Abstand mehr: der Körper hat jetzt eine eigene obere
       Rahmenlinie als Abgrenzung zwischen Dach und Stockwerken. */
}

.fam-roof polygon {
    fill: var(--fam-roof);
    stroke: var(--fam-frame);
    stroke-width: clamp(4px, 0.8vw, 8px);
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.3s ease;
}

.fam-body {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: clamp(4px, 0.8vw, 8px) solid var(--fam-frame);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.fam-floor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 1vw, 8px);
    padding: clamp(4px, 1.2vh, 12px) clamp(10px, 2.5vw, 26px);
    border-bottom: clamp(3px, 0.6vw, 6px) solid var(--fam-frame);
}

.fam-floor:last-child {
    border-bottom: none;
}

.nb-symbol {
    font-weight: 900;
    color: #2c3e50;
    user-select: none;
}

/* ===== Etagen-Slot Zustände ===== */

/* Inaktiv: blasse, ruhige Box – noch nicht an der Reihe. */
.fam-slot {
    border: 3px dashed #d8cfc4;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.35);
    color: transparent;
    box-sizing: border-box;
}

/* Richtig gelegte Zahl: kurz grün aufleuchten … */
.fam-flash {
    border: var(--nb-overlap) solid #1b5e20;
    border-radius: 10px;
    background: #2e7d32;
    color: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

/* … danach als ruhige weiße Karte stehen bleiben (kein Drop-Ziel mehr). */
.fam-filled {
    border: calc(var(--nb-overlap) * 0.7) solid var(--nb-border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--nb-border-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ===== Startzahlen unten ===== */
.fam-tray {
    display: flex;
    gap: clamp(8px, 2vw, 22px);
    min-height: var(--nb-box-size-small);
    align-items: center;
}

/* Kurzes Aufleuchten, wenn die ganze Familie fertig ist. */
.fam-house.fam-complete {
    transform: scale(1.04);
}