/*
 * Stilovi važe samo za okvire animacija na stranici sa slobodnim padom
 * i kosim/horizontalnim hitcem. Ne menjaju globalni body ili ostale strane.
 */
.animacija-okvir {
    box-sizing: border-box;
    width: min(100%, 400px);
    aspect-ratio: 1 / 1;
    margin: 1.25rem auto;
    overflow: hidden;
    border: 1px solid #0000ff;
    background: #c8c8c8;
}

.animacija-okvir canvas,
.animacija-okvir .p5Canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

#canvasForHTMLSlobodanPad,
#canvasForHTMLHorizontalniHitac {
    box-sizing: border-box;
    width: min(100%, 400px);
    margin: 1.25rem auto;
}

#canvasForHTMLSlobodanPad canvas,
#canvasForHTMLHorizontalniHitac canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 400px;
    margin: 0 auto;
}

.animacija-kontejner {
    width: 100%;
    max-width: 1000px;
    margin: 24px auto;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #d5dce5;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animacija-canvas {
    width: 100%;
    max-width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.animacija-canvas canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 480px) {

    .animacija-okvir,
    #canvasForHTMLSlobodanPad,
    #canvasForHTMLHorizontalniHitac {
        width: 100%;
    }
}

/* =====================================================
   10.11.2026 – p5.js animacije u Processing lekcijama
   (zamenjuju stare processing.js / .pde animacije)
   ===================================================== */

/* Platno se smanjuje na užim ekranima, a odnos strana ostaje isti */
.animacija-canvas {
    flex-direction: column;
    gap: 8px;
}

.animacija-canvas canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Okvir oko animacije koja prima tastere (klikni pa koristi strelice) */
.animacija-canvas canvas:focus {
    outline: 2px solid #2b6cb0;
    outline-offset: 2px;
}

/* Dugmad ispod 3D animacije (za telefon i tablet) */
.animacija-dugmad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.animacija-dugmad button {
    min-width: 44px;
    min-height: 40px;
    padding: 4px 10px;
    font-size: 1.05rem;
    border: 1px solid #9aa7b4;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.animacija-dugmad button:hover {
    background: #eef3f6;
}

.animacija-napomena {
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}

/* -----------------------------------------------------
   Veće aplikacije (kružno kretanje, operacije sa vektorima).
   Pisane su sa Bootstrap klasama, pa ovde dodajemo samo one
   koje koriste – i to samo unutar .animacija-app.
   ----------------------------------------------------- */
.animacija-app {
    width: 100%;
    max-width: 1000px;
    margin: 24px auto;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #d5dce5;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.animacija-app .animacija-info {
    font-size: 0.95rem;
}

#canvasForHTMLKruzno,
#canvasForHTMLVektori {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
}

.animacija-app canvas {
    flex: 1 1 300px;
    width: 100% !important;
    height: auto !important;
}

#canvasForHTMLKruzno canvas {
    max-width: 640px;
}

#canvasForHTMLVektori canvas {
    max-width: 760px;
}

.animacija-app #inputContainer {
    flex: 0 0 auto;
    max-width: 100%;
}

.animacija-app .d-flex { display: flex; }
.animacija-app .flex-row { flex-direction: row; flex-wrap: wrap; }
.animacija-app .flex-column { flex-direction: column; }
.animacija-app .flex-wrap { flex-wrap: wrap; }
.animacija-app .justify-content-center { justify-content: center; }
.animacija-app .justify-content-between { justify-content: space-between; }
.animacija-app .justify-content-left { justify-content: flex-start; }
.animacija-app .align-items-start { align-items: flex-start; }
.animacija-app .align-items-end { align-items: flex-end; }
.animacija-app .align-self-end { align-self: flex-end; }
.animacija-app .align-content-around { align-content: space-around; }
.animacija-app .mb-auto { margin-bottom: auto; }
.animacija-app .ml-3 { margin-left: 1rem; }
.animacija-app .p-2 { padding: 0.5rem; }
.animacija-app .text-white { color: #fff; }
.animacija-app .bg-secondary { background: #6c757d; }
.animacija-app .text-bg-primary { background: #0d6efd; color: #fff; }
.animacija-app h6 { margin: 0; font-size: 0.95rem; }
.animacija-app button { cursor: pointer; }