/* Робот Карел — цео екран, код лево, свет десно, без скроловања странице. */
/* Имена боја не смеју да се поклопе са бојама аватара (--koza, --kosa, --belo,
   --usne, --pozadina, --linija), јер би их аватар у углу наследио. */
:root {
    --plava: #1d5fb5;
    --plava-tamna: #164a8d;
    --tekst: #1f2430;
    --sivo: #5b6475;
    --mreza: #d9dde5;
    --strana: #fbfbfd;
    --polje: #ffffff;
    --zid: #2b2f3a;
    --lopta: #e8552d;
    --robot: #1d5fb5;
    --greska: #b3261e;
    --greska-pozadina: #fdecea;
    --uspeh: #1b7a3a;
    --uspeh-pozadina: #e6f4ea;
    --tekuci: #fff3c4;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}
body {
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    color: var(--tekst);
    background: var(--strana);
    overflow: hidden;
}

.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
}

/* ---------- Лево: код ---------- */
.kod {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--mreza);
}
.traka {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem;
    background: var(--plava);
    white-space: nowrap;
}
.logo-mali {
    display: flex;
    flex-shrink: 0;
}
.logo-mali img {
    width: 2.1rem;
    height: 2.1rem;
}
.traka select,
.traka button {
    font: inherit;
    font-size: 1rem;
    border-radius: .35rem;
    border: 1px solid transparent;
    padding: .35rem .7rem;
    cursor: pointer;
}
.traka select {
    flex: 0 1 13rem;
    min-width: 6rem;
    background: #fff;
    color: var(--tekst);
}
.traka button {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.traka button:hover { background: rgba(255, 255, 255, .28); }
.traka button.glavno {
    background: #fff;
    color: var(--plava-tamna);
    font-weight: 700;
}
.traka button.glavno:hover { background: #e9f0fb; }
.traka button:disabled { opacity: .5; cursor: default; }
.brzina {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    color: #fff;
}
.brzina input { width: 4.5rem; }
.brzina[hidden] { display: none; }

.editor {
    flex: 1;
    min-height: 0;
    position: relative;
}
.editor .CodeMirror {
    position: absolute;
    inset: 0;
    height: auto;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 1.15rem;
    line-height: 1.5;
}
.CodeMirror-linenumber { color: #9aa2b1; }
.CodeMirror .red-tekuci { background: var(--tekuci); }
.CodeMirror .red-greska { background: var(--greska-pozadina); }
.CodeMirror .red-greska .CodeMirror-linenumber,
.CodeMirror-gutter-wrapper.red-greska .CodeMirror-linenumber { color: var(--greska); font-weight: 700; }

.naredbe {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .45rem .5rem;
    border-top: 1px solid var(--mreza);
    background: #f2f4f8;
}
.naredbe button {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .9rem;
    padding: .15rem .45rem;
    border: 1px solid var(--mreza);
    border-radius: .3rem;
    background: #fff;
    color: var(--tekst);
    cursor: pointer;
}
.naredbe button:hover { border-color: var(--plava); color: var(--plava); }
.naredbe button.pitanje { color: #7a3fb0; }
.blokovi { border-top-style: dashed; }
.blokovi button { color: #b45309; font-weight: 700; }
.blokovi button:hover { border-color: #b45309; color: #b45309; }

/* ---------- Десно: свет ---------- */
.svet {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: .6rem .8rem;
    gap: .5rem;
}
.vrh {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}
.opis { flex: 1; min-width: 0; }

/* Пријављени ученик: аватар и надимак, горе десно. */
.ja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    text-decoration: none;
    color: var(--tekst);
}
.ja-avatar {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 2px solid var(--plava);
    background: #fff;
    overflow: hidden;
}
.ja-nadimak {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .05em;
}
.ja-prijava {
    flex-direction: row;
    padding: .3rem .7rem;
    border: 1px solid var(--plava);
    border-radius: .35rem;
    color: var(--plava);
}

.opis h1 {
    margin: 0;
    font-size: 1.25rem;
}
.opis p {
    margin: .2rem 0 0;
    color: var(--sivo);
}
.opis code {
    font-family: Consolas, "Cascadia Mono", monospace;
    background: #eef1f6;
    padding: 0 .25rem;
    border-radius: .2rem;
    color: var(--tekst);
}
.tabla {
    flex: 1;
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tabla svg {
    width: 100%;
    height: 100%;
    overflow: visible;   /* балончић изнад горњег реда */
}
.stanje {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--sivo);
    font-size: .95rem;
}
button.sitno {
    font: inherit;
    font-size: .85rem;
    background: none;
    border: none;
    color: var(--sivo);
    text-decoration: underline;
    cursor: pointer;
}

.poruka {
    min-height: 3.2rem;
    padding: .6rem .8rem;
    border-radius: .4rem;
    font-size: 1.1rem;
    background: #eef1f6;
    color: var(--sivo);
}
.poruka:empty { visibility: hidden; }
.poruka.greska { background: var(--greska-pozadina); color: var(--greska); }
.poruka.uspeh { background: var(--uspeh-pozadina); color: var(--uspeh); }
.poruka .red { font-weight: 700; }
button.resio {
    font: inherit;
    font-weight: 700;
    margin-left: .6rem;
    padding: .25rem .8rem;
    border: none;
    border-radius: .35rem;
    background: var(--uspeh);
    color: #fff;
    cursor: pointer;
}
button.resio:hover { filter: brightness(1.1); }
button.resio:disabled { opacity: .6; cursor: default; }
.resio-greska { margin-top: .3rem; font-size: .95rem; color: var(--greska); }
.poruka code {
    font-family: Consolas, "Cascadia Mono", monospace;
}

.ispis {
    max-height: 6rem;
    overflow-y: auto;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .95rem;
    white-space: pre-wrap;
}
.ispis:empty { display: none; }
.ispis div { padding: .1rem 0; border-bottom: 1px dashed var(--mreza); }

/* ---------- Цртеж ---------- */
.t-polje { fill: var(--polje); stroke: var(--mreza); stroke-width: 1; }
.t-ivica { fill: none; stroke: var(--zid); stroke-width: 5; }
.t-zid { stroke: var(--zid); stroke-width: 6; stroke-linecap: round; }
.t-broj { fill: #b3b9c5; font-size: 11px; font-family: system-ui, sans-serif; }
.t-lopta { fill: var(--lopta); }
.t-lopta-broj { fill: #fff; font-size: 15px; font-weight: 700; font-family: system-ui, sans-serif; }
.t-robot { transition: transform var(--trajanje, 200ms) ease-in-out; }
.t-robot-telo { fill: var(--robot); transition: fill .2s; }
.t-robot.sudar .t-robot-telo { fill: var(--greska); }
.t-robot-oko { fill: #fff; }
.t-robot-zenica { fill: var(--zid); }
.t-robot-lopte { fill: #fff; font-size: 13px; font-weight: 700; font-family: system-ui, sans-serif; }
.t-govor { transition: transform var(--trajanje, 200ms) ease-in-out, opacity .4s; pointer-events: none; }
.t-govor-okvir { fill: #fff; stroke: var(--zid); stroke-width: 1.5; }
.t-govor-tekst { fill: var(--tekst); font-size: 15px; font-family: system-ui, sans-serif; }
.t-nosi-krug { fill: #fff; stroke: var(--robot); stroke-width: 2.5; }
.t-nosi-broj { fill: var(--robot); font-size: 13px; font-weight: 700; font-family: system-ui, sans-serif; }

.nevidljivo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ---------- Мали екрани: једно испод другог ---------- */
@media (max-width: 50rem) {
    body { overflow: auto; }
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }
    .kod { height: 60vh; border-right: none; border-bottom: 1px solid var(--mreza); }
    .tabla { height: 45vh; }
    .traka { flex-wrap: wrap; }
    .brzina { margin-left: 0; }
}