/* Vzhled podle programu (src/domain/graphics_palette.cpp, barevny rezim). */
:root {
    --plocha: #0000aa;      /* background, setbkcolor(1) */
    --pruh: #6060ff;        /* title_bar */
    --text: #e6e6e6;        /* main */
    --zluta: #ffff00;       /* highlight, item */
    --panel: #5c5c5c;       /* panel planet */
    --menu: #b0b0a0;        /* dialog, rozbalene menu */
    --legenda: #a0a0ff;     /* legend */
    --zelena: #55ff55;
    --cervena: #ff5555;
}

* { box-sizing: border-box; }

html { background: var(--plocha); }

body {
    margin: 0;
    background: var(--plocha);
    color: var(--text);
    font: 15px/1.55 "Lucida Console", Consolas, "DejaVu Sans Mono", monospace;
}

a { color: var(--zluta); }
code { color: var(--zluta); overflow-wrap: anywhere; }

.strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 6px 16px;
    background: var(--pruh);
    color: var(--zluta);
}
.strip a { color: var(--zluta); text-decoration: none; }
.strip a:hover, .strip a:focus-visible { background: var(--plocha); outline: none; }
.brand { font-weight: bold; }
.strip nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.strip.bottom { color: var(--text); font-size: 12px; margin-top: 32px; }
.strip.bottom a { color: var(--text); text-decoration: underline; }

main { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    gap: 28px;
    align-items: center;
    padding: 32px 0 8px;
}
h1 { color: var(--zluta); font-size: 26px; line-height: 1.25; margin: 0 0 16px; font-weight: normal; }
h2 {
    margin: -16px -16px 14px;
    padding: 3px 16px;
    background: var(--plocha);
    color: var(--zluta);
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.screen { margin: 0; }
.screen img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid var(--text);
    image-rendering: pixelated;
}

.box {
    margin-top: 28px;
    padding: 16px;
    background: var(--panel);
    border: 2px solid var(--text);
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 8px;
    background: var(--menu);
    color: #000;
}
.row.selected { background: var(--plocha); color: var(--zluta); border: 1px solid var(--menu); }

.button {
    display: inline-block;
    padding: 5px 16px;
    background: var(--menu);
    color: #000;
    border: 2px solid var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.button:hover, .button:focus-visible { background: var(--zluta); outline: none; }

.hint { color: var(--legenda); }
.box .hint { color: #d8d8ff; }
.small { font-size: 12px; }

ol, ul { padding-left: 22px; }
li { margin: 6px 0; }
.menu-list { list-style: none; padding: 0; }
.menu-list li { padding: 2px 8px; margin: 0; background: var(--menu); color: #000; }
.menu-list li:nth-child(odd) { background: #a6a696; }

.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: 24px; align-items: start; }
/* Zmenseny snimek bez ostreho prevzorkovani (pixelated jen pro zvetseni). */
@media (max-width: 1100px) { .screen img { image-rendering: auto; } }

label { display: block; margin: 12px 0 4px; }
textarea, input[type=text], input[type=email] {
    width: 100%;
    padding: 6px 8px;
    background: var(--menu);
    color: #000;
    border: 2px solid var(--text);
    font: inherit;
}
textarea:focus, input:focus { outline: 2px solid var(--zluta); outline-offset: 0; }
.fields { display: grid; grid-template-columns: 2fr 1fr; gap: 0 16px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.message { padding: 6px 10px; border: 2px solid; }
.message.ok { color: var(--zelena); }
.message.chyba { color: var(--cervena); background: #3a3a3a; }

@media (max-width: 760px) {
    .intro, .columns, .fields { grid-template-columns: minmax(0, 1fr); }
    h1 { font-size: 21px; }
    body { font-size: 14px; }
}