body {

    background-color: #222;

    color: #eee;

    font-family: sans-serif;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    min-height: 100vh;

    padding-top: 0;

    margin: 0;

}

#container {

    text-align: center;

}



body:fullscreen {

    background-color: black;

    display: flex;

    align-items: center;   /* svislé centrování */

    justify-content: center; /* vodorovné centrování */

    margin: 0;

    overflow: hidden;

}



#screen {

    image-rendering: pixelated;

    outline: 2px solid #555;

    outline-offset: 0px;

    border: none; /* Skutečný border necháš nulový */

    background-color: #000;

}



#screen.screenDragOver {

    outline: 2px solid #7ab8ff;

    box-shadow: 0 0 0 1px rgba(122, 184, 255, 0.45) inset;

}



/* Kontejner, který vyplní celou obrazovku */

#canvascontainer:fullscreen {

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: black;

    width: 100vw;

    height: 100vh;

}



/* Vzhled, když je KONTEJNER (wrapper) ve fullscreenu */

#canvascontainer:fullscreen #screen {

    border: none;           /* Ve fullscreenu okraj zmizí */

    outline: none;          /* Pro jistotu odstraníme i outline */

}



#canvasTopSpacer {

    height: 20px;

}



#emulatorTitle {

    font-size: 1.3em;

    font-weight: bold;

    color: #ddd;

    margin-bottom: 8px;

    letter-spacing: 0.02em;

}



#controls {

    margin: 0 0 10px 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;

    align-self: flex-start;

}

button {

    padding: 8px 12px;

    margin: 0;

    background-color: #444;

    border: 1px solid #666;

    color: #eee;

    font-size: 1.2em;

    cursor: pointer;

}

button.icon {

    width: 34px;

    height: 34px;

    font-size: 1.4em;

    display: flex;

    align-items: center;

    justify-content: center;

}

button:hover {

    background-color: #555;

}



button:focus {  /* Úplné odstranění obrysu pro všechna tlačítka */

    outline: none;

    box-shadow: none;

}



/* Styl pro zakázané tlačítko */

button:disabled {

    background-color: #cccccc; /* Šedá */

    color: #666666;            /* Tmavší šedá pro text */

    cursor: not-allowed;       /* Ikona přeškrtnutého kruhu */

    opacity: 0.6;              /* Průhlednost */

    transform: scale(1.0);     /* Zamezení efektům při kliknutí */

}



#leds {

    margin-top: 15px;

    display: flex;

    gap: 15px;

    justify-content: flex-end;

    margin-left: auto;

    margin-right: auto;

}



.led {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: #444;

    border: 1px solid #666;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    transition: background-color 0.1s ease;

}



#scaleRadios label {

    margin-right: 8px;

    font-size: 0.9em;

}

#scaleRadios input {

    margin-right: 4px;

}

#cookieConsentLabel {

    margin-left: 15px;

    font-size: 0.9em;

}

#cookieConsent {

    margin-right: 4px;

}



#uartLogPanel {

    margin-top: 10px;

    border: 1px solid #555;

    background: #111;

    width: 100%;

    max-width: 520px;

    margin-left: auto;

    margin-right: auto;

}



#uartLogHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 6px 8px;

    font-size: 0.85em;

    color: #ddd;

    border-bottom: 1px solid #333;

}



#clearUartLogBtn {

    font-size: 0.8em;

    padding: 4px 8px;

}



#uartLog {

    margin: 0;

    min-height: 76px;

    max-height: 140px;

    overflow-y: auto;

    text-align: left;

    padding: 8px;

    color: #7dff7d;

    font-size: 0.9em;

    line-height: 1.4;

    white-space: pre-wrap;

    word-break: break-word;

}



#screenAndConfig {

    display: flex;

    gap: 15px;

    align-items: flex-start;

    justify-content: center;

}



#screenSection {

    display: flex;

    flex-direction: column;

    align-items: center;

}



#sidePanels {

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-width: 180px;

    margin-top: 56px;

}



#configPanel {

    background: #2a2a2a;

    border: 1px solid #555;

    padding: 12px;

    border-radius: 4px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-width: 160px;

}



.configGroup {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.configGroup label {

    font-size: 0.9em;

    font-weight: bold;

    color: #ddd;

    text-align: left;

}



.configGroup select {

    padding: 6px 8px;

    background-color: #444;

    color: #eee;

    border: 1px solid #666;

    border-radius: 2px;

    font-size: 0.85em;

    cursor: pointer;

}



.configGroup select:hover {

    background-color: #555;

}



.configGroup select:focus {

    outline: 1px solid #88f;

}



#tapePanel {

    background: #2a2a2a;

    border: 1px solid #555;

    padding: 10px;

    border-radius: 4px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    min-width: 160px;

}



#tapePanel.tapePanelDragOver {

    border-color: #7ab8ff;

    background: #233448;

    box-shadow: 0 0 0 1px rgba(122, 184, 255, 0.45) inset;

}



.tapePanelHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}



.tapePanelTitle {

    font-weight: bold;

    color: #ddd;

    font-size: 0.9em;

    text-align: left;

}



.tapePanelOpenBtn {

    flex-shrink: 0;

    width: 24px;

    height: 24px;

    padding: 2px;

    background-color: #3a3a3a;

    border: 1px solid #555;

    border-radius: 2px;

    color: #ddd;

    font-size: 0.9em;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color 0.15s ease, border-color 0.15s ease;

}



.tapePanelOpenBtn:hover {

    background-color: #4a4a4a;

    border-color: #6a6a6a;

}



.tapePanelOpenBtn:active {

    background-color: #2a2a2a;

    border-color: #555;

}



.tapeFileSelect {

    width: 100%;

    padding: 4px 6px;

    background-color: #3a3a3a;

    color: #eee;

    border: 1px solid #666;

    border-radius: 2px;

    font-size: 0.82em;

    cursor: pointer;

    min-width: 0;

}



.tapeFileSelect:hover {

    background-color: #454545;

}



.tapeFileSelect:focus {

    outline: 1px solid #5DA0FF;

}



.tapeList {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.tapeItem {

    display: flex;

    position: relative;

    height: 20px;

    min-width: 0;

    background: #1a1a1a;

    border: 1px solid #444;

    border-radius: 2px;

    overflow: hidden;

    font-size: 0.8em;

    cursor: pointer;

    transition: background-color 0.15s ease, border-color 0.15s ease;

}



.tapeItem:hover {

    background-color: #222;

    border-color: #555;

}



.tapeItem::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    background: rgba(100, 150, 200, 0.3);

    z-index: 1;

    transition: width 0.2s ease;

}



.tapeItemContent {

    display: flex;

    width: 100%;

    position: relative;

    z-index: 2;

    align-items: center;

}



.tapeItemName {

    flex: 1;

    padding-left: 6px;

    text-align: left;

    color: #ddd;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-weight: bold;

}



.tapeItemSize {

    padding-right: 6px;

    text-align: right;

    color: #aaa;

    white-space: nowrap;

    min-width: 50px;

}



.tapeItemArrow {

    flex-shrink: 0;

    margin-right: 4px;

    text-align: center;

    font-size: 0.8em;

    color: transparent;

    transition: color 0.15s ease;

    min-width: 0;

}



.tapeItemSelected {

    background-color: #2a2a2a !important;

    border-color: #ffa05d !important;

    min-width: 0;



}



.tapeItemSelected .tapeItemArrow {

    color: #ffa05d;

}



.tapeItemSelected .tapeItemName {

    color: #ffa05d;

}



#debugPanel {

    background: #202020;

    border: 1px solid #555;

    border-radius: 4px;

    padding: 10px;

    text-align: left;

    font-size: 0.85em;

}



.debugPanelTitle {

    font-weight: bold;

    margin-bottom: 8px;

    color: #ddd;

}



.debugRow {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 4px;

    color: #ddd;

}



.debugRow span:last-child {

    font-family: Consolas, "Courier New", monospace;

    color: #9fe89f;

}



#dbgInstr {

    max-width: 150px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.debugRowBp input {

    width: 52px;

    background: #141414;

    border: 1px solid #555;

    border-radius: 3px;

    color: #9fe89f;

    font-family: Consolas, "Courier New", monospace;

    font-size: 1em;

    padding: 1px 4px;

    text-align: center;

    text-transform: uppercase;

    outline: none;

}



.debugRowBp input:focus {

    border-color: #9fe89f;

}



.debugFlags,

.debugStatus {

    margin-top: 6px;

    font-family: Consolas, "Courier New", monospace;

    color: #cfcfcf;

}



.debugStatus {

    color: #ffcc66;

}



#stepBtn {

    flex: 1;

    background: #2a2a2a;

    border: 1px solid #555;

    border-radius: 3px;

    color: #ddd;

    font-family: Consolas, "Courier New", monospace;

    font-size: 0.9em;

    padding: 3px 0;

    cursor: pointer;

}



#stepBtn:hover {

    background: #3a3a3a;

    border-color: #9fe89f;

    color: #9fe89f;

}



#stepOverBtn {

    flex: 1;

    background: #2a2a2a;

    border: 1px solid #555;

    border-radius: 3px;

    color: #ddd;

    font-family: Consolas, "Courier New", monospace;

    font-size: 0.9em;

    padding: 3px 0;

    cursor: pointer;

}



#stepOverBtn:hover {

    background: #3a3a3a;

    border-color: #9fe89f;

    color: #9fe89f;

}



#debugButtons {

    display: flex;

    gap: 6px;

    margin-top: 8px;

}